/* ==========================================================================
   WebRescue — Atelier
   Design system + components.  Single stylesheet, served from
   /atelier/assets/css/style.css
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root{
  --color-ivory:#F5F2EC;
  --color-ivory-deep:#EFEBE3;
  --color-carbon:#111111;
  --color-charcoal:#24211E;
  --color-copper:#B97845;
  --color-copper-deep:#9C5F34;
  --color-neutral:#D8D2C8;
  /* small copper text on light surfaces: the brand copper is 3.2:1 on ivory, so text
     below display size uses a deeper copper that reaches 4.5:1 on both ivories */
  --copper-text:#925F36;

  --ink:var(--color-carbon);
  --ink-70:rgba(17,17,17,.70);
  --ink-50:rgba(17,17,17,.68);
  --ink-30:rgba(17,17,17,.22);
  --rule:rgba(17,17,17,.16);
  --rule-soft:rgba(17,17,17,.09);

  --paper:var(--color-ivory);

  --font-display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --font-sans:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* fluid type */
  /* minimums are capped by the viewport: with enlarged text a single word still fits the screen */
  --fs-hero:clamp(min(2.9rem,12vw),10.2vw,10.5rem);
  /* display: the hero, the homepage statement and the closing CTA statements */
  --fs-statement:clamp(min(2.4rem,11vw),6.4vw,6rem);
  /* section titles → content headings → lead copy: each a clear step below display */
  --fs-xxl:clamp(min(2.3rem,11vw),5vw,4.6rem);
  --fs-xl:clamp(1.9rem,3.5vw,3.2rem);
  --fs-lg:clamp(1.4rem,2.2vw,2rem);
  --fs-md:clamp(1.02rem,1.25vw,1.18rem);
  --fs-body:clamp(1rem,1.05vw,1.1rem);
  --fs-sm:.875rem;
  --fs-meta:.6875rem;

  /* fluid spacing */
  --gutter:clamp(1.25rem,4.2vw,4.5rem);
  --s-1:.5rem; --s-2:1rem; --s-3:1.5rem; --s-4:2rem;
  --s-5:3rem; --s-6:4.5rem; --s-7:6.5rem;
  --section:clamp(4.5rem,10vw,10rem);

  --maxw:96rem;
  --radius:0;
  --radius-lg:0;

  --ease:ease;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --t-fast:.2s var(--ease);
  --t:.3s var(--ease-out);
  --t-slow:.9s var(--ease-out);
  --press:.16s var(--ease-out);
}

/* 2. Reset ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-wrap:pretty;
}
html:has(body.is-locked),body.is-locked{overflow:hidden}
/* scrolling inside an overlay never chains to the page behind it */
.cfg__body,.mobile-nav{overscroll-behavior:contain}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--ink);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--copper-text)}
:focus-visible{outline:2px solid var(--color-copper);outline-offset:3px}
::selection{background:var(--color-copper);color:var(--color-ivory)}
svg{display:block}

/* 3. Typography helpers ---------------------------------------------------- */
.display{font-family:var(--font-display);font-weight:400;line-height:.94;letter-spacing:-.015em;overflow-wrap:break-word;hyphens:manual}
/* last resort for very large text settings: break a word rather than the layout */
fieldset{min-width:0}
.display em{font-style:italic;color:var(--color-copper)}
h1.display{font-size:var(--fs-hero)}
h2.display{font-size:var(--fs-xxl)}
h3.display{font-size:var(--fs-xl)}
.meta{
  font-family:var(--font-mono);
  font-size:var(--fs-meta);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-50);
  font-weight:400;
}
.meta--copper{color:var(--copper-text)}
.num{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.1em;color:var(--copper-text)}
.lead{font-size:var(--fs-lg);line-height:1.35;letter-spacing:-.01em;font-weight:400}
.body-lg{font-size:var(--fs-md);line-height:1.6;color:var(--ink-70)}
.muted{color:var(--ink-70)}

/* 4. Layout ---------------------------------------------------------------- */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section);position:relative;scroll-margin-top:82px}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.section-head{
  display:flex;align-items:baseline;gap:var(--s-3);
  padding-bottom:var(--s-3);border-bottom:1px solid var(--rule);
  margin-bottom:clamp(2rem,4vw,3.5rem);flex-wrap:wrap;
}
.section-head__label{flex:1 1 auto}

/* dark inversion */
.invert{
  --ink:var(--color-ivory);
  --ink-70:rgba(245,242,236,.72);
  --ink-50:rgba(245,242,236,.52);
  --ink-30:rgba(245,242,236,.26);
  --rule:rgba(245,242,236,.18);
  --rule-soft:rgba(245,242,236,.1);
  --paper:var(--color-carbon);
  background:var(--color-carbon);
  color:var(--color-ivory);
}
.invert a{color:var(--color-ivory)}
.invert a:hover{color:var(--copper-text)}
.invert ::selection{background:var(--color-copper);color:var(--color-carbon)}

/* grain + hairline grid atmosphere */
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:9;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}
@media (max-width:700px){.grain{opacity:.22}}

/* 5. Buttons --------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  padding:1.05em 1.6em;border:1px solid currentColor;border-radius:var(--radius);
  min-height:48px;transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--press);
  position:relative;white-space:nowrap;
}
.btn__arrow{transition:transform var(--t);display:inline-block}
.btn:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.btn:hover .btn__arrow{transform:translateX(.28em)}}
.btn--primary{background:var(--color-carbon);color:var(--color-ivory);border-color:var(--color-carbon)}
.btn--primary:hover{background:var(--color-copper);border-color:var(--color-copper);color:var(--color-ivory)}
.invert .btn--primary{background:var(--color-ivory);color:var(--color-carbon);border-color:var(--color-ivory)}
.invert .btn--primary:hover{background:var(--color-copper);border-color:var(--color-copper);color:var(--color-ivory)}
.btn--ghost{border-color:var(--ink-30);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink);background:rgba(185,120,69,.08)}
.btn--copper{background:#A1683C;border-color:#A1683C;color:#fff}
.btn--copper:hover{background:var(--color-copper-deep);border-color:var(--color-copper-deep);color:#fff}
.btn--sm{padding:.75em 1.1em;min-height:40px;font-size:.6875rem}
.btn--block{width:100%;justify-content:center}
/* solid ivory on dark surfaces (configurator "Volgende" / "Sluiten") */
.btn--light{background:var(--color-ivory);color:var(--color-carbon);border-color:var(--color-ivory)}
.btn--light:hover{background:#fff;border-color:#fff;color:var(--color-carbon)}

/* PRIMARY CONVERSION CTA — brushed copper. Reserved for high-intent project actions
   (open the configurator, send a request). Everything else stays ghost, inline or
   disclosure, so the copper keeps meaning "this is the next step".
   Darkest stop #74462A, lightest #A1683C: white text stays ≥ 4.6:1 at every point of
   the gradient, also while the highlight travels. The resting state is the finished
   object (touch screens never see hover); hover only moves the light. */
.btn--cta{
  color:#fff;border-color:transparent;border-radius:2px;overflow:hidden;isolation:isolate;
  background:linear-gradient(112deg,#74462A 0%,#8A5632 32%,#A1683C 56%,#8E5A33 78%,#7A4A2B 100%);
  background-size:220% 100%;background-position:0% 50%;
  box-shadow:inset 0 1px 0 rgba(255,226,196,.3),inset 0 -1px 0 rgba(40,20,8,.32),0 1px 1px rgba(60,30,12,.22),0 14px 26px -18px rgba(92,52,24,.95);
  transition:background-position .7s var(--ease-out),transform var(--press),box-shadow var(--t),color var(--t-fast);
}
/* a soft band of light lying across the metal */
.btn--cta::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 32%,rgba(255,232,206,.13) 45%,rgba(255,240,222,.2) 50%,rgba(255,232,206,.13) 55%,transparent 68%);
  transform:translateX(-62%);transition:transform .9s var(--ease-out);
}
/* the inner hairline: a printed edge, slightly brighter on hover */
.btn--cta::after{content:"";position:absolute;inset:3px;border:1px solid rgba(255,222,190,.15);pointer-events:none;transition:border-color var(--t)}
.btn--cta .btn__arrow{transition:transform var(--t),opacity var(--t-fast)}
.btn--cta:hover,.btn--cta:focus-visible{color:#fff}
@media (hover:hover) and (pointer:fine){
  .btn--cta:hover{background-position:100% 50%;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,226,196,.38),inset 0 -1px 0 rgba(40,20,8,.32),0 2px 2px rgba(60,30,12,.2),0 18px 30px -18px rgba(92,52,24,1)}
  .btn--cta:hover::before{transform:translateX(62%)}
  .btn--cta:hover::after{border-color:rgba(255,222,190,.32)}
}
.btn--cta:active{transform:translateY(0) scale(.98);transition-duration:.08s;box-shadow:inset 0 1px 0 rgba(255,226,196,.18),inset 0 2px 7px rgba(40,20,8,.38),0 6px 12px -10px rgba(92,52,24,.9)}
.btn--cta:focus-visible{outline:2px solid var(--color-carbon);outline-offset:3px}
.invert .btn--cta:focus-visible,.cfg .btn--cta:focus-visible,.mobile-nav .btn--cta:focus-visible{outline-color:var(--color-ivory)}
/* sending: the button locks, the arrow retracts, the light carries the request */
.btn--cta[aria-busy="true"]{cursor:progress;transform:none}
.btn--cta[aria-busy="true"] .btn__arrow{transform:translateX(-.5em);opacity:0}
.btn--cta[aria-busy="true"]::before{animation:cta-carry 1.15s var(--ease-in-out) infinite}
@keyframes cta-carry{from{transform:translateX(-85%)}to{transform:translateX(85%)}}
@media (prefers-reduced-motion:reduce){
  .btn--cta,.btn--cta::before{transition:none}
  .btn--cta:hover,.btn--cta:active{transform:none}
  .btn--cta[aria-busy="true"]::before{animation:none;transform:none}
}

.link-arrow{
  display:inline-flex;align-items:center;gap:.6em;font-family:var(--font-mono);
  font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:.35em;border-bottom:1px solid var(--ink-30);
}
.link-arrow:hover{border-color:var(--color-copper)}
.link-arrow>span[aria-hidden]{color:var(--copper-text)}

/* Legal / context link (privacy, terms) next to forms and the configurator.
   Pointer screens: copper, no underline at rest; the underline draws in on hover.
   Touch screens: copper AND underlined from the start — there is no hover to reveal it. */
.legal-link{
  position:relative;color:var(--copper-text);text-decoration:none;padding-bottom:.1em;
  background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;
  transition:background-size .26s var(--ease-out),color var(--t-fast);
}
.legal-link:hover{color:#7A4A2B}
.cfg .legal-link:hover,.invert .legal-link:hover{color:#D4A57A}
@media (hover:hover) and (pointer:fine){.legal-link:hover{background-size:100% 1px}}
.legal-link:focus-visible{background-size:100% 1px;outline:2px solid var(--color-copper);outline-offset:3px}
@media (hover:none),(pointer:coarse){
  .legal-link{background-size:100% 1.5px;padding-bottom:.14em}
  .legal-link::before{content:"";position:absolute;inset:-10px -4px}
}
@media (prefers-reduced-motion:reduce){.legal-link{transition:color var(--t-fast)}}

/* 6. Header ---------------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--color-ivory) 88%,transparent);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--rule-soft);
  transition:background var(--t-fast),border-color var(--t-fast);
}
.site-header.is-dark{
  background:color-mix(in srgb,var(--color-carbon) 88%,transparent);
  border-bottom-color:rgba(245,242,236,.14);
}
.site-header.is-dark .nav__link,.site-header.is-dark .brand__word,
.site-header.is-dark .lang a,.site-header.is-dark .burger{color:var(--color-ivory)}
.site-header.is-dark .brand__mark{filter:invert(1) brightness(1.6)}
.site-header.is-dark .btn--primary{background:var(--color-ivory);color:var(--color-carbon);border-color:var(--color-ivory)}
.nav-bar{display:flex;align-items:center;gap:var(--s-3);min-height:74px}
.brand{display:flex;align-items:center;gap:.65rem;flex:0 0 auto}
.brand__mark{width:34px;height:auto}
.brand__word{font-family:var(--font-display);font-size:1.32rem;letter-spacing:-.01em;line-height:1}
.brand__word span{color:var(--color-copper)}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:clamp(1rem,2vw,2.1rem)}
.nav__link{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  position:relative;padding-block:.4em;
}
.nav__link::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:var(--color-copper);transform:scaleX(0);transform-origin:left;transition:transform var(--t)
}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1)}
.nav__link[aria-current="page"]{color:var(--copper-text)}
.nav-actions{display:flex;align-items:center;gap:var(--s-2);margin-inline-start:var(--s-3)}
.lang{display:flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em}
.lang a{color:var(--ink-50);text-transform:uppercase}
.lang a:hover{color:var(--copper-text)}
.lang a[aria-current="true"]{color:var(--ink);border-bottom:1px solid var(--color-copper)}
.lang span{color:var(--ink-30)}
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-inline-start:auto}
.burger i{display:block;width:22px;height:1px;background:currentColor;position:relative;transition:background var(--t-fast)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1px;background:currentColor;transition:transform var(--t)}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1080px){
  .nav,.nav-actions{display:none}
  .burger{display:flex}
}

/* mobile drawer */
.mobile-nav{
  position:fixed;inset:0;z-index:70;background:var(--color-carbon);color:var(--color-ivory);
  display:flex;flex-direction:column;padding:var(--gutter);
  transform:translateY(-100%);transition:transform .5s var(--ease-drawer),visibility .5s;
  visibility:hidden;overflow-y:auto;
}
.mobile-nav.is-open{transform:translateY(0);visibility:visible}
.mobile-nav__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--s-5)}
.mobile-nav__close{width:44px;height:44px;color:var(--color-ivory);font-size:1.5rem;line-height:1}
.mobile-nav ul{display:flex;flex-direction:column;gap:.2rem;margin-block:auto}
.mobile-nav li{opacity:0;transform:translateY(16px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out)}
.mobile-nav.is-open li{opacity:1;transform:none;transition-duration:.5s}
.mobile-nav.is-open li:nth-child(1){transition-delay:.12s}.mobile-nav.is-open li:nth-child(2){transition-delay:.17s}
.mobile-nav.is-open li:nth-child(3){transition-delay:.22s}.mobile-nav.is-open li:nth-child(4){transition-delay:.27s}
.mobile-nav.is-open li:nth-child(5){transition-delay:.32s}.mobile-nav.is-open li:nth-child(6){transition-delay:.37s}
.mobile-nav ul a{
  font-family:var(--font-display);font-size:clamp(2.1rem,10vw,3.4rem);line-height:1.08;
  color:var(--color-ivory);display:flex;align-items:baseline;gap:.7rem;padding-block:.12em;
}
.mobile-nav ul a .num{color:var(--copper-text);font-size:.65rem}
.mobile-nav__foot{display:flex;flex-direction:column;gap:var(--s-2);margin-top:var(--s-5)}
.mobile-nav__foot .btn--primary{background:var(--color-ivory);color:var(--color-carbon);border-color:var(--color-ivory)}
.mobile-nav__foot .lang a{color:rgba(245,242,236,.55)}
.mobile-nav__foot .lang a[aria-current="true"]{color:var(--color-ivory)}
.mobile-nav__foot .lang span{color:rgba(245,242,236,.3)}

/* 7. Hero ------------------------------------------------------------------ */
.hero{position:relative;padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,7vw,6rem);overflow:hidden}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,var(--rule-soft) 1px,transparent 1px);
  background-size:calc(100% / 6) 100%;
  opacity:.9;
}
.hero__inner{position:relative}
/* phones: the hero stays one full first screen (without the eyebrow the content is centred in it) */
@media(max-width:899px){.hero{min-height:calc(100svh - 75px);display:flex;flex-direction:column;justify-content:center}.hero__inner{width:100%}}
.hero__title{font-size:var(--fs-hero)}
/* Line masks clip a little outside the line box (.1em above, .2em below, cancelled by
   negative margins so the layout does not move): display type is set at line-height
   .94, and Instrument Serif's descenders (g p j q y) reach ~.1em below the line box.
   Reveals therefore start at ≥ 135% and leave at ≤ −130% to clear the larger mask. */
.hero__title .line,.mline-mask{padding-block:.1em .2em;margin-block:-.1em -.2em}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span{display:block}
.hero__title em{color:var(--color-copper)}
.hero__body{
  display:grid;grid-template-columns:1fr;gap:var(--s-4);
  margin-top:clamp(2rem,4vw,3.2rem);align-items:end;
}
@media(min-width:900px){
  .hero__body{grid-template-columns:1.15fr 1fr;gap:var(--s-6)}
}
.hero__sub{max-width:34ch;font-size:var(--fs-md);color:var(--ink-70)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-3)}
/* The hero CTA: the visitor's own sentence, so it is set in sentence case (Archivo),
   not in the mono label voice of the other buttons. Same copper material; a little
   more light at rest and a light band that follows the pointer (fine pointers only). */
.hero__go{
  min-height:58px;padding:.95rem 1.5rem .95rem 1.7rem;gap:1.1rem;
  font-family:var(--font-sans);font-size:1.0625rem;font-weight:500;letter-spacing:.005em;text-transform:none;line-height:1.25;
}
.hero__go::before{transform:translateX(-46%)}
.hero__go .btn__arrow{font-size:1.2em;line-height:1}
@media (hover:hover) and (pointer:fine){
  .hero__go:hover::before{transform:translateX(calc((var(--mx,.5) - .5) * 120%));transition:transform .35s var(--ease-out)}
  .hero__go:hover .btn__arrow{transform:translateX(.3em)}
}
/* CTA copy with a shorter phone version: one line wherever it fits */
.cta-s{display:none}
@media(max-width:374px){.cta-l{display:none}.cta-s{display:inline}}
@media(max-width:899px){
  .hero__go{width:100%;max-width:26rem;justify-content:space-between;padding-inline:1.25rem 1.1rem;font-size:1rem}
}
/* very large text: a two-line sentence is fine, clipping is not */
.hero__go-l{white-space:normal;text-align:left}
/* desktop: the headline also respects the viewport height, so on common laptop screens
   the CTA arrives in (or right at the edge of) the first screen instead of far below it */
@media(min-width:900px){
  h1.display.hero__title{font-size:min(var(--fs-hero),15vh)}
  .hero{padding-top:clamp(2.5rem,6vh,7rem)}
  .hero__body{margin-top:clamp(1.5rem,3.2vh,3.2rem)}
  /* the decision hold pushes the ticker down; the hero always fills the first screen so that gap is never seen */
  html[data-hero-sequence=""] .hero{min-height:calc(100svh - 75px)}
}
.hero__aside{display:flex;flex-direction:column;gap:var(--s-2);border-top:1px solid var(--rule);padding-top:var(--s-2)}
.hero__aside dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem var(--s-3);margin:0}
.hero__aside dt{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50)}
.hero__aside dd{margin:0;font-size:var(--fs-sm)}

/* ticker */
.ticker{border-block:1px solid var(--rule);overflow:hidden;padding-block:.85rem;background:var(--color-ivory-deep)}
.invert .ticker{background:var(--color-charcoal)}
.ticker__track{display:flex;gap:3rem;width:max-content;animation:ticker 38s linear infinite}
.ticker__track span{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-50);white-space:nowrap}
.ticker__track span::after{content:"·";margin-inline-start:3rem;color:var(--copper-text)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* 8. Principles (intro) ---------------------------------------------------- */
.principles{display:grid;gap:0;grid-template-columns:1fr}
@media(min-width:820px){.principles{grid-template-columns:repeat(3,1fr)}}
.principle{padding:var(--s-4) 0;border-top:1px solid var(--rule)}
@media(min-width:820px){
  .principle{padding:var(--s-4) var(--s-4) var(--s-5) 0;border-inline-end:1px solid var(--rule)}
  .principle:last-child{border-inline-end:0}
  .principle+.principle{padding-inline-start:var(--s-4)}
}
.principle h3{font-family:var(--font-sans);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-text);margin-bottom:.9rem}
.principle p{font-size:var(--fs-md);line-height:1.5}
.intro-statement{max-width:24ch}
h2.display.intro-statement{font-size:var(--fs-statement)}

/* 9. Tags ------------------------------------------------------------------ */
.svc__tags{display:flex;flex-wrap:wrap;gap:.4rem}
.tag{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.5em .8em;color:var(--ink-70);line-height:1.2;
}

/* 10. Why — asymmetric statements ------------------------------------------ */
.why{display:grid;gap:0;border-top:1px solid var(--rule)}
.why__item{
  display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.2rem var(--s-3);
  padding-block:clamp(1.4rem,3vw,2.6rem);border-bottom:1px solid var(--rule);align-items:baseline;
}
.why__item .num{grid-row:1;padding-top:.4rem}
.why__item h3{font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,2.2rem);line-height:1;letter-spacing:-.015em}
.why__item p{color:var(--ink-70);font-size:var(--fs-sm);max-width:44ch;grid-column:2;margin-top:.45rem}
@media(min-width:900px){
  .why__item{grid-template-columns:2.6rem minmax(0,1.05fr) minmax(0,.8fr);gap:var(--s-4)}
  .why__item p{grid-column:3;grid-row:1;margin-top:.4rem}
  .why__item--offset{padding-inline-start:clamp(2rem,7vw,6rem)}
}

/* 11. Listen / personal ---------------------------------------------------- */
.listen{display:grid;gap:var(--s-5);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){.listen{grid-template-columns:.85fr 1fr;gap:var(--s-6)}}
.listen__figure{position:relative}
.listen__figure img{
  width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;
  filter:grayscale(1) contrast(1.05);border-radius:var(--radius-lg);
}
.listen__figure figcaption{margin-top:.75rem}
.listen__quote{font-family:var(--font-display);font-size:var(--fs-xl);line-height:1.06;letter-spacing:-.01em}
.listen__quote em{color:var(--color-copper)}
.listen__list{display:flex;flex-wrap:wrap;gap:.45rem;margin-block:var(--s-3)}

/* 12. Process -------------------------------------------------------------- */
.process{display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
.step{
  display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.15rem var(--s-2);align-items:baseline;
  padding-block:var(--s-3);border-bottom:1px solid var(--rule);position:relative;
}
.step .num{grid-row:1/3}
.step h3{font-family:var(--font-display);font-size:clamp(1.35rem,2vw,1.6rem);line-height:1.05}
.step p{font-size:var(--fs-sm);color:var(--ink-70);max-width:48ch}
@media(min-width:1024px){
  .process{grid-template-columns:repeat(5,minmax(0,1fr))}
  .step{display:flex;flex-direction:column;gap:.55rem;padding:var(--s-4) var(--s-4) var(--s-5);border-bottom:0;border-inline-end:1px solid var(--rule)}
  .step:first-child{padding-inline-start:0}
  .step:last-child{border-inline-end:0;padding-inline-end:0}
}
.step::before{
  content:"";position:absolute;top:-1px;inset-inline:0;height:1px;background:var(--color-copper);
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease-in-out)
}
.step.is-visible::before{transform:scaleX(1)}
.step:nth-child(2)::before{transition-delay:.08s}.step:nth-child(3)::before{transition-delay:.16s}
.step:nth-child(4)::before{transition-delay:.24s}.step:nth-child(5)::before{transition-delay:.32s}
.support-note{
  margin-top:clamp(3rem,7vw,6rem);border-top:1px solid var(--ink);padding-top:clamp(1.2rem,2.5vw,2rem);
  display:grid;gap:var(--s-2);grid-template-columns:1fr;
}
@media(min-width:820px){.support-note{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:var(--s-5);align-items:start}}
.support-note__big{
  font-family:var(--font-display);font-size:clamp(5rem,15vw,12rem);line-height:.78;
  color:var(--copper-text);letter-spacing:-.04em;
}

/* 14. Work ----------------------------------------------------------------- */
.work-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.5rem,5vw,4.5rem) clamp(1.5rem,3vw,3rem)}
@media(min-width:760px){.work-grid{grid-template-columns:repeat(12,minmax(0,1fr))}}
.work-item{grid-column:1/-1;text-align:start;display:block;width:100%;cursor:pointer}
@media(min-width:760px){
  .work-item--a{grid-column:1/span 7}
  .work-item--b{grid-column:8/span 5;align-self:end}
  .work-item--c{grid-column:1/span 5;align-self:start}
  .work-item--d{grid-column:6/span 7}
  .work-item--e{grid-column:1/span 7}
  .work-item--f{grid-column:8/span 5;align-self:end}
}
@media(min-width:900px){.work-grid--trio{grid-template-columns:repeat(3,minmax(0,1fr));perspective:1600px}
  .work-grid--trio .work-item{grid-column:auto;transform-origin:50% 100%}}
.work-item__meta{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem var(--s-2);padding-top:.9rem;margin-top:1rem;border-top:1px solid var(--rule);flex-wrap:wrap}
.work-item__title{font-family:var(--font-sans);font-weight:600;font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.2;transition:color var(--t-fast)}
.work-item__cat{font-family:var(--font-sans);font-size:var(--fs-sm);color:var(--ink-50)}
.note{font-size:var(--fs-sm);color:var(--ink-50);max-width:56ch}
.page-hero .note{margin-top:var(--s-2);font-size:var(--fs-sm);color:var(--ink-50)}

.browser{
  display:block;position:relative;border-radius:10px;overflow:hidden;background:#1b1917;
  box-shadow:0 1px 0 rgba(17,17,17,.06),0 40px 70px -45px rgba(17,17,17,.6);
  transform:perspective(1200px);will-change:transform;
}
.browser__bar{display:flex;align-items:center;gap:6px;height:30px;padding-inline:12px;background:#2a2622}
.browser__bar i{width:9px;height:9px;border-radius:50%;background:rgba(245,242,236,.22)}
.browser__url{
  margin-inline:auto;transform:translateX(-18px);font:500 .68rem/1 var(--font-sans);letter-spacing:.02em;
  color:rgba(245,242,236,.62);background:rgba(245,242,236,.08);padding:.35rem 1.4rem;border-radius:99px;
}
.browser__view{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;container-type:size;background:#efe9df}
.browser__inner{display:block}
.browser__shot{width:100%;height:auto;transition:transform .6s var(--ease-out)}
.browser::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,rgba(255,255,255,.18),transparent 40%);opacity:0;transition:opacity var(--t)
}
@media (hover:hover) and (pointer:fine){
  /* starts moving immediately, eases into the bottom; duration set per hover by main.js */
  .work-item:hover .browser__shot{transform:translateY(calc(-100% + 100cqh));transition:transform var(--preview-travel,2s) cubic-bezier(.3,.12,.2,1)}
  .work-item:hover .browser::after{opacity:1}
  .work-item:hover .work-item__title{color:var(--copper-text)}
}
.work-item:active .browser{transform:perspective(1200px) scale(.985)}

/* onthulling op de werkpagina: frame opent van onder naar boven, beeld zoomt uit */
.reveal-clip .browser{clip-path:inset(100% 0 0 0 round 10px);transition:clip-path 1.1s var(--ease-in-out)}
.reveal-clip .browser__inner{transform:scale(1.18);transform-origin:50% 0;transition:transform 1.6s var(--ease-out)}
.reveal-clip .work-item__meta{opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease-out) .5s,transform .6s var(--ease-out) .5s}
.reveal-clip.is-visible .browser{clip-path:inset(0 0 0 0 round 10px)}
.reveal-clip.is-visible .browser__inner{transform:none}
.reveal-clip.is-visible .work-item__meta{opacity:1;transform:none}

/* volgend label bij concepten */
.cursor-chip{
  position:fixed;left:0;top:0;z-index:85;pointer-events:none;
  font:600 .72rem/1 var(--font-sans);letter-spacing:.04em;color:var(--color-ivory);background:var(--color-copper);
  padding:.8rem 1.1rem;border-radius:99px;opacity:0;scale:.9;transition:opacity .2s var(--ease-out),scale .2s var(--ease-out);
}
.cursor-chip.is-on{opacity:1;scale:1}

/* 15. Modal ---------------------------------------------------------------- */
.modal{
  position:fixed;inset:0;z-index:90;display:flex;align-items:stretch;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease-out),visibility .25s;
}
.modal.is-open{opacity:1;visibility:visible}
.modal__backdrop{position:absolute;inset:0;background:rgba(17,17,17,.82);backdrop-filter:blur(6px)}
.modal__dialog{
  position:relative;z-index:2;background:var(--color-ivory);width:100%;max-width:min(1200px,100%);
  margin:auto;max-height:100dvh;overflow-y:auto;
  transform:translateY(12px) scale(.96);transition:transform .35s var(--ease-out);
}
@media(min-width:900px){.modal__dialog{max-height:92dvh;margin-block:auto;border-radius:var(--radius-lg)}}
.modal.is-open .modal__dialog{transform:none}
.modal__close{
  position:sticky;top:0;margin-inline-start:auto;z-index:3;
  display:flex;align-items:center;gap:.5rem;padding:1rem 1.25rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  background:var(--color-ivory);
}
.modal__body{padding:0 var(--gutter) var(--gutter)}
.modal__head{display:grid;gap:var(--s-2);padding-bottom:var(--s-3);border-bottom:1px solid var(--rule);margin-bottom:var(--s-4)}
.modal__cols{display:grid;grid-template-columns:1fr;gap:var(--s-4)}
@media(min-width:860px){.modal__cols{grid-template-columns:1.4fr .8fr;gap:var(--s-5)}}
.modal__gallery{display:grid;gap:var(--s-2)}
.browser--modal{transform:none!important}
.browser--modal .browser__view{aspect-ratio:auto;height:min(68dvh,760px);overflow-y:auto;container-type:normal;overscroll-behavior:contain}
.browser--modal .browser__inner,.browser--modal .browser__shot{transform:none!important;transition:none}
.modal__facts dt{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50);margin-top:1.1rem}
.modal__facts dd{margin:.25rem 0 0;font-size:var(--fs-sm)}

/* 17. Pricing -------------------------------------------------------------- */
.price-lines{border-top:1px solid var(--rule)}
.price-line{
  display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:var(--s-3);
  padding-block:clamp(1.1rem,2.4vw,1.7rem);border-bottom:1px solid var(--rule);
}
.price-line__name{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,2rem);line-height:1;transition:transform var(--t),color var(--t-fast)}
a.price-line:active .price-line__name{transform:translateX(.3rem)}
@media (hover:hover) and (pointer:fine){a.price-line:hover .price-line__name{transform:translateX(.75rem);color:var(--copper-text)}}
.price-line__val{font-family:var(--font-mono);font-size:clamp(.85rem,1.5vw,1rem);letter-spacing:.04em;white-space:nowrap}
.price-line__val b{color:var(--copper-text);font-weight:500}
.price-line>.num{grid-column:1;grid-row:1}
.price-line__name{grid-column:2;grid-row:1}
.price-line__val{grid-column:3;grid-row:1}
.price-line__desc{font-size:var(--fs-sm);color:var(--ink-70);grid-column:1/-1;grid-row:2;max-width:60ch}
@media(min-width:820px){
  .price-line:has(.price-line__desc){grid-template-columns:auto minmax(0,16rem) minmax(0,1fr) auto}
  .price-line:has(.price-line__desc) .price-line__val{grid-column:4}
  .price-line__desc{grid-column:3;grid-row:1;align-self:center;padding-inline-start:var(--s-4)}
}

.pack-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media(min-width:720px){.pack-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.pack-grid{grid-template-columns:repeat(4,1fr)}}
.pack{background:var(--paper);padding:clamp(1.5rem,2.6vw,2.2rem);display:flex;flex-direction:column;gap:var(--s-2)}
.pack__name{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-text)}
.pack__price{font-family:var(--font-display);font-size:clamp(2rem,3.4vw,2.9rem);line-height:1}
.pack__price small{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;display:block;color:var(--ink-50);text-transform:uppercase;margin-bottom:.35rem}
.pack ul{display:grid;gap:.5rem;margin-top:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--rule)}
.pack li{font-size:var(--fs-sm);color:var(--ink-70);display:flex;gap:.6rem}
.pack li::before{content:"·";color:var(--copper-text)}
.pack .btn{margin-top:auto}
/* compact vs professional: scope, not quality */
.pack-scope{font-size:var(--fs-sm);color:var(--ink-70);max-width:68ch;margin-top:var(--s-3)}
.pack-custom{display:grid;grid-template-columns:minmax(0,1fr);gap:.6rem var(--s-4);align-items:center;margin-top:var(--s-3);padding:clamp(1.3rem,2.4vw,1.8rem) clamp(1.5rem,2.6vw,2.2rem);border:1px solid var(--rule)}
.pack-custom__price{font-family:var(--font-display);font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1}
.pack-custom__text{font-size:var(--fs-sm);color:var(--ink-70);max-width:56ch}
.pack-custom .btn{justify-self:start}
@media(min-width:900px){.pack-custom{grid-template-columns:minmax(0,13rem) auto minmax(0,1fr) auto}.pack-custom .pack__name{align-self:center}}

/* calculator */
.calc{border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden;display:grid;grid-template-columns:1fr}
@media(min-width:960px){.calc{grid-template-columns:1.3fr .85fr}}
.calc__questions{padding:clamp(1.5rem,3vw,2.6rem);display:grid;gap:var(--s-4)}
.calc__q{display:grid;gap:.85rem;border:0;padding:0;margin:0;min-width:0}
.calc__q>p,.calc__q>legend{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-50);padding:0;float:none}
.invert .calc__q>legend{color:rgba(245,242,236,.6)}
.choice-row{display:flex;flex-wrap:wrap;gap:.5rem}
.choice{position:relative}
.choice input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;cursor:pointer}
.choice span{
  display:inline-flex;align-items:center;min-height:44px;padding:.6em 1.05em;
  border:1px solid var(--rule);font-size:var(--fs-sm);
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--press);
}
.choice:active span{transform:scale(.97)}
.choice input:checked+span{background:var(--color-carbon);color:var(--color-ivory);border-color:var(--color-carbon)}
.choice input:focus-visible+span{outline:2px solid var(--color-copper);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.choice:hover span{border-color:var(--ink)}}
.invert .calc{border-color:rgba(245,242,236,.2)}
.invert .calc .choice span{border-color:rgba(245,242,236,.3);color:var(--color-ivory)}
.invert .calc .choice input:checked+span{background:var(--color-ivory);color:var(--color-carbon);border-color:var(--color-ivory)}
.invert .calc .choice:hover span{border-color:var(--color-ivory)}
.calc__out{
  background:var(--color-carbon);color:var(--color-ivory);padding:clamp(1.5rem,3vw,2.6rem);
  display:flex;flex-direction:column;gap:var(--s-2);position:sticky;top:74px;align-self:start;
}
.calc__amount{font-family:var(--font-display);font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1;color:var(--color-ivory)}
.calc__amount b{font-weight:400;color:var(--copper-text)}
.calc__note{font-size:var(--fs-sm);color:rgba(245,242,236,.65)}
.calc__summary{display:grid;gap:.4rem;margin-block:var(--s-2);padding-top:var(--s-2);border-top:1px solid rgba(245,242,236,.2)}
.calc__summary div{display:flex;justify-content:space-between;gap:1rem;font-size:.8rem}
.calc__summary dt,.calc__summary span:first-child{color:rgba(245,242,236,.55);font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase}

/* 18. FAQ ------------------------------------------------------------------ */
.faq{border-top:1px solid var(--rule)}
.faq__item{border-bottom:1px solid var(--rule)}
.faq__q{
  display:grid;grid-template-columns:1fr auto;gap:var(--s-3);align-items:center;width:100%;
  padding-block:clamp(1rem,2vw,1.5rem);text-align:start;font-size:var(--fs-md);font-weight:500;
  transition:color var(--t-fast);
}
.faq__q:hover{color:var(--copper-text)}
.faq__icon{width:18px;height:18px;position:relative;flex:0 0 auto}
.faq__icon::before,.faq__icon::after{content:"";position:absolute;background:var(--ink-50);transition:transform var(--t)}
.faq__icon::before{top:8.5px;left:0;width:18px;height:1px}
.faq__icon::after{left:8.5px;top:0;height:18px;width:1px}
.faq__item.is-open .faq__icon::after{transform:rotate(90deg)}
.faq__a{overflow:hidden;height:0;transition:height .3s var(--ease-out)}
.faq__a p{padding-bottom:var(--s-3);max-width:62ch;color:var(--ink-70)}

/* 19. Big CTA -------------------------------------------------------------- */
.cta-final{text-align:center;display:grid;gap:var(--s-3);justify-items:center}
.cta-final h2{max-width:16ch}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.cta-mail{font-family:var(--font-mono);font-size:clamp(.8rem,1.6vw,1rem);letter-spacing:.1em;border-bottom:1px solid var(--rule);padding-bottom:.3rem}

/* 20. Footer --------------------------------------------------------------- */
.site-footer{background:var(--color-carbon);color:var(--color-ivory);padding-block:var(--s-6) var(--s-4)}
.footer-grid{display:grid;grid-template-columns:1fr;gap:var(--s-4);padding-bottom:var(--s-5)}
@media(min-width:760px){.footer-grid{grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s-5)}}
.footer-grid .footer-h{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.18em;text-transform:uppercase;color:rgba(245,242,236,.5);margin-bottom:1rem}
.footer-grid ul{display:grid;gap:.6rem}
.footer-grid a{color:rgba(245,242,236,.85);font-size:var(--fs-sm)}
.footer-grid a:hover{color:var(--copper-text)}
.footer-brand{display:flex;align-items:center;gap:.7rem;margin-bottom:1rem}
.footer-brand img{width:38px;filter:invert(1) brightness(1.7)}
.footer-brand span{font-family:var(--font-display);font-size:1.4rem}
.footer-bottom{
  border-top:1px solid rgba(245,242,236,.16);padding-top:var(--s-3);
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);justify-content:space-between;
}
.footer-bottom p{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,242,236,.72);margin:0;align-self:center;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.footer-copy span{white-space:nowrap}
/* legal layer: readable sans, not fine print */
.footer-legal{display:flex;flex-wrap:wrap;gap:.25rem 1.6rem}
.footer-legal a{font-size:var(--fs-sm);color:rgba(245,242,236,.85);text-decoration:underline;text-decoration-color:rgba(245,242,236,.3);text-underline-offset:.25em;padding-block:.35rem}
.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--copper-text);text-decoration-color:currentColor}
@media(max-width:759px){.footer-bottom{flex-direction:column-reverse;align-items:flex-start}.footer-legal{flex-direction:column;gap:0}.footer-legal a{padding-block:.6rem}}

/* 21. Forms ---------------------------------------------------------------- */
.form-block{display:grid;gap:var(--s-4)}
.form-block[hidden]{display:none}
.fieldset{border:0;padding:0;margin:0;display:grid;gap:var(--s-3)}
.fieldset>legend{
  font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper-text);padding:0 0 .9rem;border-bottom:1px solid var(--rule);width:100%;margin-bottom:.6rem;
}
.field-grid{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
@media(min-width:700px){.field-grid--2{grid-template-columns:repeat(2,1fr)}}
.field{display:grid;gap:.45rem}
.field label,.field>span.lbl{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--font-sans);font-size:var(--fs-body);color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--rule);padding:.75rem 0;
  min-height:48px;border-radius:0;transition:border-color var(--t-fast);
}
.field textarea{min-height:8rem;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--color-copper)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-30)}
.form-status{display:grid;gap:var(--s-2);justify-items:start}
.success{
  border:1px solid var(--color-copper);padding:clamp(1.8rem,4vw,3rem);
  display:grid;gap:var(--s-2);
}
.success[hidden]{display:none}
.success h3{font-family:var(--font-display);font-size:var(--fs-xl);line-height:1.02}

/* contact routes */
.routes{display:grid;grid-template-columns:1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--radius-lg);overflow:hidden}
@media(min-width:760px){.routes{grid-template-columns:repeat(3,1fr)}}
.route{background:var(--paper);padding:clamp(1.4rem,2.6vw,2rem);display:flex;flex-direction:column;gap:.5rem;transition:background var(--t-fast)}
.route:hover{background:var(--color-ivory-deep)}
.invert .route:hover{background:var(--color-charcoal)}
.route__name{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2rem);line-height:1}
.route__val{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.04em;color:var(--copper-text);word-break:break-word}
.route__note{font-size:var(--fs-sm);color:var(--ink-70)}

/* 22. Configurator overlay ------------------------------------------------- */
/* Project configurator — a full-screen takeover (main.js §9). The carbon surface opens
   out of the pressed button; a project sheet assembles beside the questions. */
.cfg{position:fixed;inset:0;z-index:95;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.cfg.is-open{opacity:1;visibility:visible}
.cfg.cfg--motion{transition:none}
.cfg [hidden]{display:none!important}
.cfg__panel{
  position:relative;z-index:2;height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  background:var(--color-carbon);color:var(--color-ivory);
}
/* the hero's hairline grid, on carbon */
.cfg__grid{position:absolute;top:0;bottom:0;left:50%;width:min(100% - 2 * var(--gutter),var(--maxw) - 2 * var(--gutter));transform:translateX(-50%);pointer-events:none}
.cfg__grid i{position:absolute;top:0;bottom:0;width:1px;background:rgba(245,242,236,.065)}
.cfg__grid i:nth-child(1){left:16.666%}.cfg__grid i:nth-child(2){left:33.333%}.cfg__grid i:nth-child(3){left:50%}.cfg__grid i:nth-child(4){left:66.666%}.cfg__grid i:nth-child(5){left:83.333%}
.cfg__aperture{position:fixed;left:0;top:0;z-index:3;display:none;border:1px solid var(--color-copper);pointer-events:none}
/* the copper of the pressed CTA, carried by the frame for its first and last moments */
.cfg__aperture b{position:absolute;inset:0;opacity:0;background:linear-gradient(112deg,#74462A 0%,#8A5632 32%,#A1683C 56%,#7A4A2B 100%)}
.cfg__top{position:relative;z-index:1;display:flex;align-items:center;gap:var(--s-3);padding:1rem var(--gutter);border-bottom:1px solid rgba(245,242,236,.16);flex-wrap:wrap;row-gap:.5rem}
.cfg__title{display:flex;align-items:baseline;gap:.4rem 1rem;flex-wrap:wrap}
.cfg__title b{font-family:var(--font-display);font-weight:400;font-size:1.45rem;line-height:1.1}
.cfg__title .meta{color:rgba(245,242,236,.55)}
.cfg__steps{display:flex;gap:.4rem;margin-inline-start:auto;align-items:center;flex-wrap:wrap}
.cfg__steps i{width:26px;height:2px;background:rgba(245,242,236,.25);display:block;transition:background var(--t)}
.cfg__steps i.is-done{background:var(--color-copper)}
.cfg__close{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ivory);min-height:44px;padding-inline:.5rem}
.cfg__close:hover,.cfg__close:focus-visible{color:var(--color-copper)}
.cfg__body{position:relative;z-index:1;flex:1;overflow-y:auto;display:flex}
.cfg__stage{width:100%;max-width:var(--maxw);margin:auto;padding:clamp(2rem,5vh,4rem) var(--gutter);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);align-items:center}
.cfg__inner{position:relative;z-index:3;width:100%}
/* (above the sheet: the sticky action row must never sit under the review sheet on phones) */
.cfg__q{display:grid;gap:var(--s-3);align-content:start}
.cfg__q h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2.1rem,4.4vw,4.2rem);line-height:1;max-width:16ch;color:var(--color-ivory)}
.cfg .choice span{border-color:rgba(245,242,236,.3);color:var(--color-ivory);font-size:var(--fs-md);padding:.75em 1.3em}
.cfg .choice input:checked+span{background:var(--color-ivory);color:var(--color-carbon);border-color:var(--color-ivory)}
/* several goals: a + that turns into a tick, so "more than one" is visible before tapping */
.cfg__hint{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--color-copper);margin-top:-.4rem}
.cfg .choice--multi span{display:inline-flex;align-items:center;gap:.55em}
.cfg .choice--multi span::before{content:"+";content:"+" / "";display:inline-grid;place-items:center;width:1.15em;height:1.15em;border:1px solid currentColor;border-radius:50%;font-size:.8em;line-height:1;opacity:.75}
.cfg .choice--multi input:checked+span::before{content:"✓";content:"✓" / "";background:var(--color-copper);border-color:var(--color-copper);color:#fff;opacity:1}
/* the type list is longer: a little tighter so it stays one screen on phones */
@media(max-width:899px){.cfg .choice span{font-size:.95rem;padding:.65em 1em}}
.cfg .field input,.cfg .field textarea{color:var(--color-ivory);border-bottom-color:rgba(245,242,236,.3)}
.cfg .field label{color:rgba(245,242,236,.5)}
.cfg__note{color:rgba(245,242,236,.72);font-size:var(--fs-md);max-width:40ch}
.cfg__q h2:focus,.cfg__sent h2:focus,.cfg__notice h3:focus{outline:none}
.cfg .opt{color:rgba(245,242,236,.55)}
.cfg .field input::placeholder,.cfg .field textarea::placeholder{color:rgba(245,242,236,.3)}
.cfg.is-sent .sheet__ph{border-bottom-color:transparent}
.cfg .btn--ghost{color:var(--color-ivory);border-color:rgba(245,242,236,.35)}
.cfg .btn--ghost:hover{border-color:var(--color-ivory);background:rgba(245,242,236,.06)}
/* final step: contact details, in the same voice as the questions */
.cfg__lead{color:rgba(245,242,236,.72);font-size:var(--fs-md);max-width:40ch;margin-top:-.4rem}
.cfg__fields{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem var(--s-4)}
@media(min-width:700px){.cfg__fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cfg__fields .field{gap:.2rem}
.cfg .field input{font-size:max(1rem,var(--fs-md))}
.cfg .field input[aria-invalid="true"]{border-bottom-color:var(--color-copper);border-bottom-width:2px}
.cfg__err{font-size:var(--fs-sm);color:#D4A57A;display:flex;gap:.45rem;align-items:baseline}
.cfg__err::before{content:"";flex:none;width:.6rem;height:1px;background:currentColor;transform:translateY(-.25em)}
.cfg__privacy{color:rgba(245,242,236,.66);font-size:var(--fs-sm);max-width:52ch}
/* the success view */
.cfg__sent{display:grid;gap:var(--s-2);align-content:start}
.cfg__sent h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2.4rem,5vw,4.6rem);line-height:1;color:var(--color-ivory)}
.cfg__wa{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;color:rgba(245,242,236,.72);font-size:var(--fs-sm);padding-top:var(--s-2);border-top:1px solid rgba(245,242,236,.14);max-width:32rem;margin-top:var(--s-1)}
.cfg .cfg__wa .link-arrow{color:var(--color-ivory);border-bottom-color:var(--color-copper);min-height:44px}
.cfg .cfg__wa .link-arrow:hover{color:#D4A57A}
.cfg__sent-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s-1)}
.cfg.is-sent .cfg__nav{display:none}
/* QUESTION → ANSWERS → ACTION: the navigation row sits directly under the answers.
   On a long step it sticks to the bottom edge of the scroll area (and only then needs
   its fade); it never covers the answers once the visitor has scrolled to them. */
.cfg__nav{
  position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap-reverse;align-items:center;gap:.7rem;
  margin-top:var(--s-4);padding:1rem 0 calc(.9rem + env(safe-area-inset-bottom));max-width:44rem;
  background:linear-gradient(to bottom,rgba(17,17,17,0),var(--color-carbon) 1rem);
}
.cfg__nav[hidden]{display:none}
/* the contact step is a form: the action row follows the fields and never floats over an input
   (keyboard open); Enter in the last field sends as well */
.cfg.is-done .cfg__nav{position:relative;bottom:auto;background:none}
.cfg__nav .btn{min-height:52px;white-space:normal;line-height:1.3}
/* primary: the site's copper CTA; it wraps above "Terug" rather than squeezing its label */
.cfg__next,.cfg__send{margin-inline-start:auto;flex:0 1 auto;min-width:fit-content;justify-content:center;text-align:center;padding-inline:1.5rem}
/* secondary: an obvious outlined button with a copper arrow, never copper material */
.cfg__back{gap:.6em;color:var(--color-ivory);border:1px solid rgba(245,242,236,.42);background:transparent;padding-inline:1.15rem 1.35rem}
.cfg__back-a{color:var(--color-copper);display:inline-block;transition:transform var(--t)}
.cfg__back:focus-visible{outline:2px solid var(--color-ivory);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .cfg__back:hover{border-color:var(--color-ivory);background:rgba(245,242,236,.06);color:var(--color-ivory)}
  .cfg__back:hover .cfg__back-a{transform:translateX(-.28em)}
}
.cfg__back:active{background:rgba(245,242,236,.08)}
.cfg__back[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
@media(max-width:899px){
  .cfg__nav{max-width:none}
  .cfg__next,.cfg__send{flex:1 1 9rem;justify-content:space-between}
}
/* the chosen single answer carries a copper tick; a fresh choice lands it, then moves on */
.cfg .choice span{position:relative}
.cfg .choice:not(.choice--multi) input:checked+span::after{
  content:"✓";content:"✓" / "";position:absolute;top:-.5rem;right:-.5rem;display:grid;place-items:center;
  width:1.25rem;height:1.25rem;border-radius:50%;background:var(--color-copper);color:#fff;font-size:.7rem;line-height:1;
  box-shadow:0 0 0 2px var(--color-carbon);
}
.cfg .choice.is-committed span{animation:choice-commit .26s var(--ease-out)}
.cfg .choice.is-committed span::after{animation:tick-land .24s var(--ease-out) both}
@keyframes choice-commit{from{transform:scale(.965)}}
@keyframes tick-land{from{transform:scale(1.8);opacity:0}}
@media (prefers-reduced-motion:reduce){.cfg .choice.is-committed span,.cfg .choice.is-committed span::after{animation:none}}
/* the confirmation / failure sheet: rises from the send button (phones: a bottom sheet) */
.cfg__notice{
  position:absolute;z-index:3;left:0;right:0;bottom:0;display:grid;gap:.7rem;
  background:var(--color-charcoal);color:var(--color-ivory);border-top:1px solid var(--color-copper);
  padding:1.3rem var(--gutter) calc(1.2rem + env(safe-area-inset-bottom));
  box-shadow:0 -30px 60px -24px rgba(0,0,0,.7);max-height:calc(100dvh - 4rem);overflow-y:auto;overscroll-behavior:contain;
}
.cfg__notice.is-on{animation:notice-in .38s var(--ease-out) both}
@keyframes notice-in{from{opacity:0;transform:translateY(14px)}}
/* phones: a bottom sheet over the whole dialog; wide: a card rising from the action row */
@media(max-width:899px){.cfg__notice{position:fixed}}
@media(min-width:900px){
  .cfg__notice{left:auto;right:0;bottom:calc(100% - .25rem);width:min(31rem,calc(100vw - 2 * var(--gutter)));border:1px solid rgba(185,120,69,.55);border-top-width:2px;padding:1.4rem 1.5rem 1.3rem}
}
.cfg__notice h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.05}
.cfg__notice-text{font-size:var(--fs-sm);color:rgba(245,242,236,.74);max-width:44ch}
.cfg__missing{display:flex;flex-wrap:wrap;gap:.4rem}
.cfg__missing[hidden]{display:none}
.cfg__chip{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-ivory);border:1px dashed rgba(185,120,69,.7);padding:.55rem .75rem;min-height:40px;transition:background var(--t-fast),border-color var(--t-fast)}
.cfg__chip span{color:var(--color-copper)}
.cfg__chip:hover,.cfg__chip:focus-visible{border-style:solid;border-color:var(--color-copper);background:rgba(185,120,69,.12)}
.cfg__notice-actions{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin-top:.3rem}
.cfg__dismiss{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,242,236,.7);min-height:44px;padding-inline:.4rem;text-decoration:underline;text-underline-offset:.3em;text-decoration-color:rgba(245,242,236,.3)}
.cfg__dismiss:hover{color:var(--color-ivory)}
@media(max-width:520px){
  .cfg__notice-actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .cfg__notice-actions .btn{justify-content:center;white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){.cfg__notice.is-on{animation:notice-fade .2s linear both}@keyframes notice-fade{from{opacity:0}}}
@media(max-width:419px){.cfg__xs{display:none}}
@media(max-width:479px){
  /* top bar in two lines: title + close, then the progress dots full width */
  .cfg__top{display:grid;grid-template-columns:minmax(0,1fr) auto;padding-block:.55rem .7rem;row-gap:.35rem}
  .cfg__title b{font-size:1.25rem}
  .cfg__steps{grid-column:1 / -1;grid-row:2;margin:0;flex-wrap:nowrap}
  .cfg__steps i{flex:1;width:auto}
  .cfg__close{grid-column:2;grid-row:1;margin-right:-.5rem}
  .cfg__stage{padding-top:1.5rem}
  .cfg__notice [data-n-meta]{display:none}
  .cfg__notice h3{font-size:1.5rem}
  /* sent: everything that matters fits one phone screen */
  .cfg.is-sent .cfg__stage{padding-top:.75rem;gap:var(--s-2)}
  .cfg.is-sent .cfg__sheet{height:7.25rem}
  .cfg.is-sent .sheet__head b{font-size:1.25rem}
  .cfg.is-sent .sheet__head span{visibility:hidden}
  .cfg.is-sent .sheet__head b{font-size:1.15rem}
  .cfg.is-sent .sheet__stamp{top:2.55rem;right:1.1rem;padding:.3rem .45rem;font-size:.46rem;letter-spacing:.1em;gap:.1rem}
  .cfg.is-sent .sheet__stamp b{font-size:.56rem;letter-spacing:.14em}
  .cfg__sent{gap:.75rem}
  .cfg__sent h2{font-size:2.3rem}
  .cfg__sent .cfg__note{font-size:1rem}
  .cfg__wa{margin-top:0;padding-top:.35rem;row-gap:0}
  .cfg__sent-actions{margin-top:0}
}
@media(max-width:479px) and (max-height:600px){
  .cfg.is-sent .cfg__sheet{height:6.25rem}
  .cfg.is-sent .cfg__stage{gap:.75rem}
  .cfg__sent{gap:.55rem}
  .cfg__sent h2{font-size:2rem}
}
/* the fields stay reachable above the on-screen keyboard and the action bar */
.cfg__body{scroll-padding-block:1rem 6.5rem}

/* the project sheet: a WebRescue page object with registration marks */
.cfg__sheet{position:relative;perspective:1400px}
.sheet-tilt{position:relative;perspective:1400px;--lx:50;--ly:30;--lo:0;--sx:0}
/* the shadow under the sheet drifts away from the light (transform only) */
.sheet-tilt::before{content:"";position:absolute;left:10%;right:10%;bottom:-26px;height:52px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);transform:translate3d(calc(var(--sx) * 1px),0,0);opacity:calc(.4 + var(--lo) * .35)}
.sheet{position:relative;z-index:1;max-width:34rem;margin-inline:auto;background:var(--color-ivory);color:var(--color-carbon);border-radius:8px;box-shadow:0 60px 90px -50px rgba(0,0,0,.85),0 0 0 1px rgba(245,242,236,.08);transform-origin:0% 50%;transform:rotateY(-7deg) rotate(.6deg)}
.cfg.is-done .sheet{transform:none}
.sheet__mark{position:absolute;width:16px;height:16px;border:0 solid var(--color-copper)}
.sheet__mark--tl{left:-14px;top:-14px;border-top-width:1px;border-left-width:1px}
.sheet__mark--tr{right:-14px;top:-14px;border-top-width:1px;border-right-width:1px}
.sheet__mark--bl{left:-14px;bottom:-14px;border-bottom-width:1px;border-left-width:1px}
.sheet__mark--br{right:-14px;bottom:-14px;border-bottom-width:1px;border-right-width:1px}
.sheet__bar{display:flex;align-items:center;gap:5px;height:28px;padding-inline:12px;background:#2a2622;border-radius:8px 8px 0 0}
.sheet__bar i{width:7px;height:7px;border-radius:50%;background:rgba(245,242,236,.22)}
.sheet__bar span{margin-inline:auto;transform:translateX(-12px);font:500 .62rem/1 var(--font-sans);color:rgba(245,242,236,.66);background:rgba(245,242,236,.08);padding:.3rem 1rem;border-radius:99px;white-space:nowrap}
.sheet__body{padding:1.3rem 1.5rem 1.1rem}
.sheet__head{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:.75rem;border-bottom:1px solid var(--color-carbon)}
.sheet__head b{font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1.1}
.sheet__head span,.sheet__k,.sheet__ph,.sheet__status{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}
.sheet__head span,.sheet__k{color:var(--ink-50)}
.sheet__row{position:relative;display:grid;grid-template-columns:5.2rem minmax(0,1fr) auto;gap:.3rem 1rem;align-items:baseline;width:100%;padding:.6rem 0;border-bottom:1px solid var(--rule);text-align:left;color:inherit;font:inherit;line-height:inherit;cursor:pointer;transition:transform .25s var(--ease-out),background-color .2s var(--ease-out)}
.sheet__row:disabled{cursor:default}
/* rows are the navigation: an "edit" cue, a copper marker and a small offset on hover/focus */
.sheet__edit{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-text);opacity:0;transform:translateX(-4px);transition:opacity .2s var(--ease-out),transform .25s var(--ease-out);white-space:nowrap;align-self:center}
.sheet__row:focus-visible{outline:2px solid var(--color-copper);outline-offset:2px}
.sheet__row:focus-visible .sheet__edit{opacity:1;transform:none}
.sheet__row:focus-visible::before{transform:none;opacity:.55}
@media (hover:hover) and (pointer:fine){
  .sheet__row:not(:disabled):hover{transform:translateX(4px)}
  .sheet__row:not(:disabled):hover .sheet__edit{opacity:1;transform:none}
  .sheet__row:not(:disabled):hover::before{transform:none;opacity:.55}
}
/* touch: the cue is always there (no hover), and a press answers immediately */
@media (hover:none),(pointer:coarse){
  .sheet__row{min-height:48px;padding-block:.75rem}
  .sheet__edit{opacity:.75;transform:none;font-size:0}
  .sheet__edit span{font-size:.8rem}
  .sheet__row:not(:disabled):active{transform:translateX(3px);background-color:rgba(185,120,69,.1);transition-duration:.06s}
  .sheet__row:not(:disabled):active::before{transform:none;opacity:1}
}
.sheet__row:disabled .sheet__edit{display:none}
.sheet__v small{display:block;margin-top:.2rem;font-size:.72rem;line-height:1.35;color:var(--ink-70);overflow-wrap:anywhere}
.sheet__row--contact.is-set .sheet__v b:empty{display:none}
.sheet__light{position:absolute;inset:0;z-index:2;border-radius:8px;pointer-events:none;opacity:var(--lo);
  background:radial-gradient(42rem circle at calc(var(--lx) * 1%) calc(var(--ly) * 1%),rgba(255,236,212,.3),rgba(236,190,140,.09) 38%,transparent 64%);mix-blend-mode:soft-light}
.sheet__seal{position:absolute;left:-14px;right:-14px;top:0;height:1px;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--color-copper) 10%,#E2B184 50%,var(--color-copper) 90%,transparent);box-shadow:0 0 14px 1px rgba(185,120,69,.5)}
.cfg.is-sending .sheet__seal{animation:sheet-scan 1.5s var(--ease-in-out) infinite}
@keyframes sheet-scan{0%{transform:translateY(0);opacity:0}15%,85%{opacity:1}100%{transform:translateY(var(--sheet-h,420px));opacity:0}}
.cfg.is-sending .sheet__status{animation:caret 1.1s steps(1) infinite}
.sheet__stamp{position:absolute;right:1.1rem;top:2.9rem;z-index:3;display:grid;gap:.15rem;justify-items:center;padding:.5rem .7rem;
  font-family:var(--font-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-text);
  border:1px solid var(--color-copper);outline:1px solid rgba(185,120,69,.35);outline-offset:2px;background:rgba(245,242,236,.94);opacity:0;transform:rotate(-4deg);pointer-events:none}
.sheet__stamp b{font-size:.72rem;font-weight:600;letter-spacing:.2em}
.cfg.is-sent .sheet__stamp{opacity:1}
.cfg.is-sent .sheet__status{color:var(--copper-text);font-weight:600}
.sheet__wipe{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);margin-inline:auto 1rem;min-height:32px;padding-inline:.3rem;text-decoration:underline;text-underline-offset:.3em;text-decoration-color:var(--ink-30)}
.sheet__wipe:hover,.sheet__wipe.is-armed{color:var(--copper-text);text-decoration-color:currentColor}
@media (prefers-reduced-motion:reduce){.cfg.is-sending .sheet__seal,.cfg.is-sending .sheet__status{animation:none}.sheet__row{transition:none}}
.sheet__row::before{content:"";position:absolute;left:-1.5rem;top:.45rem;bottom:.45rem;width:2px;background:var(--color-copper);transform:scaleY(0);transition:transform .35s var(--ease-out)}
.sheet__row.is-current::before{transform:none}
.sheet__v{min-height:1.4rem;display:block}
.sheet__v b{display:none;font-family:var(--font-display);font-weight:400;font-size:1.2rem;line-height:1.15;overflow-wrap:anywhere}
.sheet__ph{display:block;font-style:normal;color:var(--ink-30);padding-bottom:.25rem;border-bottom:1px dashed rgba(17,17,17,.22);max-width:12rem}
.sheet__row.is-current .sheet__ph{color:var(--copper-text);border-bottom-color:var(--color-copper)}
.sheet__row.is-current:not(.is-set) .sheet__ph::after{content:"";display:inline-block;width:1px;height:.9em;margin-left:.35em;vertical-align:-.1em;background:var(--color-copper);animation:caret 1s steps(1) infinite}
.sheet__row.is-set .sheet__ph{display:none}
.sheet__row.is-set .sheet__v b{display:block}
.sheet__tag{display:inline-block;font-family:var(--font-sans);font-size:.72rem;line-height:1.2;padding:.22em .55em;margin:0 .3em .3em 0;border:1px solid var(--color-carbon);border-radius:99px}
.sheet__tag:first-child{background:var(--color-carbon);color:var(--color-ivory)}
.sheet__pages{grid-column:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;height:14px}
.sheet__pages i{background:rgba(17,17,17,.07);transform-origin:50% 100%}
.sheet__pages i.is-on{background:var(--color-carbon)}
.sheet__pages i.is-on:first-child{background:var(--color-copper)}
.sheet__row.is-open-count .sheet__pages i{background:none;outline:1px dashed rgba(17,17,17,.25);outline-offset:-1px}
.sheet__foot{display:flex;justify-content:space-between;align-items:center;padding-top:.85rem}
.sheet__status{color:var(--copper-text)}
.sheet__foot img{width:26px;height:auto}
@media(min-width:900px){
  .cfg__stage{grid-template-columns:minmax(0,1.1fr) minmax(20rem,.9fr);gap:clamp(2.5rem,6vw,6rem)}
}
/* phones: the sheet is a cropped object under the question, a window that follows the
   current row; on the last step it comes up whole beneath the send button */
@media(max-width:899px){
  .cfg__body{display:block}
  /* the window sits at the bottom of the stage (never over the options; a long step scrolls) */
  .cfg__stage{position:relative;min-height:100%;align-content:start;align-items:start;margin:0;padding-bottom:12.5rem}
  .cfg__sheet{position:absolute;left:0;right:0;bottom:0;height:11.5rem;overflow:hidden;perspective:none}
  .sheet-tilt{position:static;perspective:none}
  .sheet-tilt::before,.sheet__light{display:none}
  .cfg__sheet .sheet{position:absolute;left:var(--gutter);right:calc(-1 * var(--gutter));top:1.4rem;max-width:none;transform:rotate(-2.5deg);transform-origin:0 0}
  .sheet__mark--tr,.sheet__mark--br{display:none}
  .cfg.is-done .cfg__stage{padding-bottom:var(--s-5)}
  .cfg.is-done .cfg__sheet{position:relative;height:auto;overflow:visible;margin-top:var(--s-2)}
  .cfg.is-done .cfg__sheet .sheet{position:relative;left:auto;right:auto;top:auto;transform:none}
  /* sent: the top of the sheet with its stamp, above the thank-you */
  .cfg.is-sent .cfg__stage{padding-bottom:var(--s-5);gap:var(--s-3)}
  .cfg.is-sent .cfg__sheet{order:-1;position:relative;height:9.5rem;margin-top:.4rem;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .cfg.is-sent .cfg__sheet .sheet{position:relative;left:auto;right:auto;top:.9rem;margin-inline:.9rem;transform:none}
  .cfg.is-sent .sheet__mark--tr,.cfg.is-sent .sheet__mark--br{display:block}
  .cfg__title .meta{display:none}
}
/* short landscape phones: questions only; the full sheet returns on the last step as review */
@media (max-height:560px){.cfg:not(.is-done):not(.is-sent) .cfg__sheet{display:none}.cfg__stage{padding-bottom:var(--s-4)}.cfg.is-sent .cfg__sheet{display:none}}
@media (max-height:560px){
  .cfg__top{padding-block:.45rem}
  .cfg__stage{padding-top:1rem}
  .cfg__q{gap:var(--s-2)}
  .cfg__q h2,.cfg__sent h2{font-size:clamp(1.6rem,4vw,2.3rem)}
  .cfg__nav{margin-top:var(--s-2);padding-block:.6rem calc(.5rem + env(safe-area-inset-bottom))}
  .cfg__sent{gap:.5rem}
  .cfg__wa{padding-top:.3rem;margin-top:0}
  .cfg__sent-actions{margin-top:0}
}
/* short wide screens: the sheet rows tighten so the whole brief stays in view */
@media (min-width:900px) and (max-height:820px){.sheet__row{padding-block:.42rem}.sheet__body{padding-block:1rem .8rem}.sheet__head b{font-size:1.35rem}}

/* page note for a request that finished while the configurator was closed */
.cfg-toast{position:fixed;z-index:96;left:50%;bottom:calc(1rem + env(safe-area-inset-bottom));width:min(30rem,calc(100vw - 2rem));
  display:flex;align-items:center;gap:.75rem;padding:.8rem .8rem .8rem 1.1rem;background:var(--color-carbon);color:var(--color-ivory);
  border-left:2px solid var(--color-copper);box-shadow:0 18px 40px -18px rgba(0,0,0,.6);
  transform:translate(-50%,calc(100% + 2rem));opacity:0;visibility:hidden;transition:transform .4s var(--ease-out),opacity .3s,visibility .4s}
.cfg-toast.is-on{transform:translate(-50%,0);opacity:1;visibility:visible}
.cfg-toast p{font-size:var(--fs-sm);flex:1}
.cfg-toast__act{display:flex;align-items:center;gap:.2rem}
.cfg-toast__go{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-copper);min-height:44px;padding-inline:.6rem}
.cfg-toast__x{min-width:44px;min-height:44px;color:rgba(245,242,236,.7)}
.cfg-toast__go:hover,.cfg-toast__x:hover{color:var(--color-ivory)}
@media (prefers-reduced-motion:reduce){.cfg-toast{transition:opacity .2s,visibility .2s;transform:translate(-50%,0)}}

/* 23. (No cookie banner: the site sets no cookies and runs no tracking.) */

/* 24. Page hero (inner pages) ---------------------------------------------- */
.page-hero{padding-block:clamp(3rem,7vw,6rem) clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--rule)}
.page-hero__crumb{display:flex;gap:.6rem;align-items:center;margin-bottom:var(--s-3)}
.page-hero__crumb .sep{color:var(--ink-30)}
.page-hero h1{max-width:18ch}
.page-hero p{max-width:52ch;margin-top:var(--s-3);font-size:var(--fs-md);color:var(--ink-70)}

/* founders */
.founders{display:grid;grid-template-columns:1fr;gap:var(--s-5)}
@media(min-width:760px){.founders{grid-template-columns:repeat(2,1fr);gap:var(--s-5)}}
.founder img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius-lg);filter:grayscale(1) contrast(1.04);transition:filter var(--t-slow)}
@media (hover:hover) and (pointer:fine){.founder:hover img{filter:grayscale(0) contrast(1)}}
.founder__meta{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:.9rem;margin-top:.9rem;border-top:1px solid var(--rule)}
.founder__name{font-family:var(--font-display);font-size:var(--fs-lg);line-height:1}

/* deep service blocks */
.svc-block{display:grid;grid-template-columns:1fr;gap:var(--s-4);padding-block:var(--section);border-top:1px solid var(--rule)}
@media(min-width:960px){
  .svc-block{grid-template-columns:.55fr 1fr;gap:var(--s-6)}
  .svc-block--flip{grid-template-columns:1fr .55fr}
  .svc-block--flip .svc-block__aside{order:2}
}
.svc-block__aside{display:flex;flex-direction:column;gap:var(--s-2)}
.svc-block__aside h2{font-family:var(--font-display);font-size:var(--fs-xl);line-height:1}
.svc-block__stick{position:sticky;top:100px;display:flex;flex-direction:column;gap:var(--s-2)}
.svc-block__body{display:grid;gap:var(--s-3)}
.stack-list{display:grid;gap:0;border-top:1px solid var(--rule)}
.stack-list li{display:grid;grid-template-columns:minmax(0,1fr);gap:.2rem;padding-block:1rem;border-bottom:1px solid var(--rule)}
.stack-list li b{font-weight:600;font-size:var(--fs-sm)}
.stack-list li p{font-size:var(--fs-sm);color:var(--ink-70);max-width:52ch}
@media(min-width:1100px){.stack-list--cols li{grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:var(--s-4);align-items:baseline}}

/* Homepage diensten: four services beside one browser frame of real work.
   Without motion the frame simply shows the first example. */
.services{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
@media(min-width:900px){.services{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s-6);align-items:center}}
.services__text h2{max-width:14ch;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.services__item{grid-template-columns:auto minmax(0,1fr);row-gap:.35rem}
.services__item .price-line__val{grid-column:2;grid-row:2;white-space:normal;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50)}
.services__stage{position:relative}
.services__frame{z-index:2}
.services__view .services__shot{position:absolute;inset:0 0 auto 0;width:100%;height:auto}
.services__view .services__shot:first-child{position:relative}
.services__view .services__shot:not(:first-child){visibility:hidden}
.services__url{display:grid;overflow:hidden}
.services__url>span{grid-area:1/1}
.services__url>span:not(:first-child){visibility:hidden}
.services__mini{position:absolute;left:0;width:46%;z-index:1;visibility:hidden}
.services__mini:first-child{top:-6%}
.services__mini:nth-child(2){bottom:-6%}
.services__mini:nth-child(3){top:auto;bottom:-6%;left:auto;right:0}
/* Mobile: the sheets are full-size copies stacked behind the frame; they show only by
   peeking past its edges (motion/sections.js). */
html[data-services-sequence="mobile"] .services__mini{inset:0 0 auto 0;width:100%}
/* Mobile sequence: the frame stays in view above the list while the services scroll past it.
   Order: heading, frame, list; each service gets about a quarter screen of scroll. */
html[data-services-sequence="mobile"] .services__text{display:contents}
html[data-services-sequence="mobile"] .services__stage{order:1;position:sticky;top:calc(75px + .75rem);z-index:3}
html[data-services-sequence="mobile"] .services__list{order:2}
html[data-services-sequence="mobile"] .services__item{min-height:24vh;align-content:center}
/* Desktop sequence: the whole composition fits one screen, also on short laptops. */
html[data-services-sequence="desktop"] #diensten{min-height:100vh;display:flex;align-items:center;padding-block:calc(75px + 2vh) 2vh}
html[data-services-sequence="desktop"] #diensten>.shell{width:100%}
/* The release into Concepten travels sideways: clip horizontally (vertical overflow stays
   visible for the WOW 1 flight that enters from Aanpak above). */
html[data-services-sequence] #diensten{overflow-x:clip}
html[data-services-sequence="desktop"] #diensten .section-head{margin-bottom:clamp(1rem,3.5vh,3rem)}
html[data-services-sequence="desktop"] .services__text h2{font-size:min(var(--fs-statement),9.5vh);margin-bottom:clamp(.8rem,3vh,2.5rem)}
html[data-services-sequence="desktop"] .services__item{padding-block:clamp(.55rem,2vh,1.5rem)}

/* Homepage makers (wie we zijn) */
.makers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,2vw,1.5rem);align-items:start}
.maker:nth-child(2){margin-top:18%}
.maker figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;padding-top:.6rem;border-top:1px solid var(--rule)}
.maker__name{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.3rem);line-height:1}

/* WOW 2 — makers in the word (motion/makers.js, Over ons). The pinned stage is
   full-bleed and fits one screen; layers: word (1) < Karim (2) < headline column (3)
   < Hamza (4), so the headline crosses in front of one maker and behind the other. */
.makers-stage{position:relative}
html[data-makers-sequence] .makers-stage{min-height:100vh;display:flex;align-items:center;padding-block:calc(75px + 2vh) 2vh;overflow:hidden;background-color:var(--paper)}
html[data-makers-sequence] .makers-stage>.shell{width:100%}
html[data-makers-sequence] .makers-stage .maker{position:relative;z-index:2}
html[data-makers-sequence] .makers-stage .maker:first-child{z-index:4}
html[data-makers-sequence] .makers-stage .listen>div:last-child{position:relative;z-index:3}
.makers-bios{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3) var(--s-5);margin-top:var(--s-5)}
@media(min-width:760px){.makers-bios{grid-template-columns:repeat(2,minmax(0,1fr))}}
.makers-bios p{font-size:var(--fs-sm);color:var(--ink-70);max-width:48ch;padding-top:.9rem;border-top:1px solid var(--rule)}
html[data-makers-sequence] .section--makers{overflow-x:clip}
html[data-makers-sequence] .makers-bios p{position:relative;border-top-color:transparent}
.makers-bios__rule{position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--ink);will-change:transform}
.makers-bios b{display:block;font-family:var(--font-display);font-weight:400;font-size:var(--fs-lg);line-height:1.1;color:var(--ink);margin-bottom:.35rem}
.makers-word{
  position:absolute;top:0;bottom:0;left:0;z-index:1;pointer-events:none;
  font-family:var(--font-display);font-style:italic;font-weight:400;line-height:1;white-space:nowrap;letter-spacing:-.02em;
  color:transparent;background-color:var(--color-copper);background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;will-change:transform,opacity;
}
.makers-word>span{display:inline-block}

/* prijsfactoren */
.factors{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--s-5);border-top:1px solid var(--rule)}
@media(min-width:720px){.factors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.factors{grid-template-columns:repeat(3,minmax(0,1fr))}}
.factor{display:flex;flex-direction:column;gap:.7rem;padding-block:var(--s-4) var(--s-5);border-bottom:1px solid var(--rule)}
.factor h3{font-family:var(--font-display);font-weight:400;font-size:var(--fs-lg);line-height:1.05}
.factor p{font-size:var(--fs-sm);color:var(--ink-70);max-width:44ch}

/* 25. Motion --------------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.is-visible{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.06s}
.reveal[data-delay="2"]{transition-delay:.12s}
.reveal[data-delay="3"]{transition-delay:.18s}

/* koppen: woorden stijgen gestaffeld op uit een masker */
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .06em .2em 0;margin:-.1em -.06em -.2em 0}
.split .w>span{display:inline-block;transform:translateY(135%);transition:transform .9s var(--ease-out)}
.split.is-visible .w>span{transform:none}

/* foto's: onthullen van onder naar boven en licht uitzoomen */
.listen__figure.reveal,.founder.reveal{opacity:1;transform:none}
.listen__figure.reveal img,.founder.reveal img{clip-path:inset(100% 0 0 0);transform:scale(1.12);transition:clip-path 1.1s var(--ease-in-out),transform 1.6s var(--ease-out),filter var(--t-slow)}
.listen__figure.reveal.is-visible img,.founder.reveal.is-visible img{clip-path:inset(0 0 0 0);transform:none}

/* hero */
.load-line>span{display:block;transform:translateY(135%);animation:lineUp 1.05s var(--ease-out) forwards}
.load-line:nth-child(2)>span{animation-delay:.07s}
.load-line:nth-child(3)>span{animation-delay:.14s}
.load-line:nth-child(4)>span{animation-delay:.21s}
.load-fade{opacity:0;animation:fadeUp .8s var(--ease-out) .35s forwards}
.load-fade[data-delay="1"]{animation-delay:.45s}
.load-fade[data-delay="2"]{animation-delay:.55s}
.page-hero p,.page-hero__crumb{opacity:0;animation:fadeUp .8s var(--ease-out) .3s forwards}
.page-hero__crumb{animation-delay:.05s}
@keyframes lineUp{to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}

/* scrollvoortgang */
.progress{position:fixed;inset-inline:0;top:0;height:2px;z-index:61;background:var(--color-copper);transform:scaleX(0);transform-origin:left;pointer-events:none}

/* ticker pauzeert onder de muis */
@media (hover:hover) and (pointer:fine){.ticker:hover .ticker__track{animation-play-state:paused}}

/* Hero → aanpak (motion/hero.js) ----------------------------------------- */
/* Once the CSS intro has played, keep its end state without an animation fill,
   so GSAP's inline transforms can take over. */
.hero.is-intro-done .load-line>span{animation:none;transform:none}
.hero.is-intro-done .load-fade{animation:none;opacity:1}
/* While the hero is held in place, everything after it slides over it as the next layer.
   (Set on <html>: once pinned, the hero sits inside GSAP's pin-spacer.) */
html[data-hero-sequence] main>.ticker,html[data-hero-sequence] main>.section{position:relative;z-index:2}
html[data-hero-sequence] main>.section:not(.invert){background-color:var(--paper)}
html[data-hero-sequence] .hero__title,html[data-hero-sequence] .hero__title .line{will-change:transform}

/* section index rail — desktop only */
.rail{display:none}
@media(min-width:1340px){
  .rail{
    display:flex;flex-direction:column;gap:.5rem;position:fixed;top:50%;z-index:50;
    inset-inline-start:clamp(.8rem,1.4vw,1.5rem);transform:translateY(-50%);
  }
  .rail a{
    display:flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.58rem;
    letter-spacing:.1em;color:var(--ink-30);transition:color var(--t-fast)
  }
  .rail a::after{content:"";height:1px;width:10px;background:currentColor;transition:width var(--t)}
  .rail a:hover{color:var(--ink)}
  .rail a.is-active{color:var(--copper-text)}
  .rail a.is-active::after{width:28px}
  body.on-dark .rail a{color:rgba(245,242,236,.32)}
  body.on-dark .rail a:hover{color:var(--color-ivory)}
  body.on-dark .rail a.is-active{color:var(--copper-text)}
}

.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:100;background:var(--color-carbon);
  color:var(--color-ivory);padding:.8rem 1.2rem;font-family:var(--font-mono);font-size:.75rem;
}
.skip-link:focus{inset-inline-start:0;color:var(--color-ivory)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal-clip .work-item__meta{transform:none;transition:opacity .3s ease}
  .split .w>span,.load-line>span{transform:none;transition:none;animation:none}
  .load-fade,.page-hero p,.page-hero__crumb{animation:fadeIn .3s ease forwards}
  .listen__figure.reveal img,.founder.reveal img,.reveal-clip .browser,.reveal-clip .browser__inner{clip-path:none;transform:none;transition:opacity .3s ease}
  .ticker__track{animation:none}
  .step::before{transform:scaleX(1);transition:none}
  .browser__shot,.work-item:hover .browser__shot{transform:none!important;transition:none}
  .mobile-nav,.mobile-nav li{transition:opacity .2s ease,visibility .2s}
  .mobile-nav{transform:none;opacity:0}.mobile-nav.is-open{opacity:1}
  .modal__dialog{transform:none}
  .progress{display:none}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Ambient layer (motion/ambient.js, homepage). Decorative only: the elements are
   created by JS when motion is on and removed again for reduced motion. They sit
   behind the content (shell above them) and never take pointer events. */
.amb{position:absolute;left:0;top:0;pointer-events:none;z-index:0}
html[data-ambient] #aanpak,html[data-ambient] #concepten,html[data-ambient] #tarieven,html[data-ambient] #kennismaken{overflow-x:clip}
html[data-ambient] #aanpak>.shell,html[data-ambient] #concepten>.shell,html[data-ambient] #tarieven>.shell,html[data-ambient] #kennismaken>.shell{position:relative;z-index:1}
.amb-rule{height:1px;background:var(--color-copper);transform-origin:0 50%}
.amb-rule--v{width:1px;height:auto;transform-origin:50% 0}
.amb-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-text);white-space:nowrap}
.amb-type{font-family:var(--font-display);font-style:italic;font-weight:400;line-height:.8;letter-spacing:-.02em;white-space:nowrap;color:rgba(17,17,17,.045);font-size:clamp(9rem,26vw,30rem)}
.amb-type>span,.amb-mark>span{display:inline-block}
.amb-mark>span{display:flex;align-items:flex-start;gap:.6rem}
.amb-mark i{display:block;width:18px;height:18px;border-left:1px solid var(--ink);border-top:1px solid var(--ink)}
.amb-mark b{font-family:var(--font-mono);font-weight:400;font-size:.6rem;letter-spacing:.14em;color:var(--ink-50);margin-top:-.2rem}
.amb-grid{position:absolute;inset:0;pointer-events:none;z-index:0}
.amb-grid i{position:absolute;top:0;bottom:0;width:1px;background:var(--rule-soft);transform-origin:50% 100%}
.amb-index{width:14px}
.amb-index__tick{position:sticky;top:50vh;display:grid;justify-items:center;gap:6px}
.amb-index__slot{height:1.2em;overflow:hidden;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.04em;color:var(--copper-text);line-height:1.2}
.amb-index__slot span{display:block}
.amb-index__rule{width:1px;height:48px;background:var(--color-copper);transform-origin:50% 0}
@media(max-width:899px),(max-height:599px){.amb-type{font-size:44vw}}

/* ==========================================================================
   26. Subpages — shared pieces (services, disclosures)
   ========================================================================== */
.svc__intro{display:grid;gap:var(--s-3);margin-bottom:clamp(2.5rem,5vw,4.5rem)}
@media(min-width:960px){.svc__intro{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:end;gap:var(--s-6)}}
.svc__intro h2,.local__text h2,.redo__text h2{font-size:var(--fs-xl);line-height:1;max-width:15ch;text-wrap:wrap}
.svc{padding-block:clamp(4rem,8vw,7.5rem);overflow-x:clip}
.svc__support{font-size:var(--fs-md);line-height:1.5;color:var(--ink-70);max-width:40ch}
.section-head>.meta:not(.section-head__label){color:var(--ink-50)}

/* disclosure: detail that the default view does not need */
.more{border-top:1px solid var(--rule);margin-top:clamp(2rem,4vw,3.5rem)}
.more__btn{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);width:100%;min-height:48px;
  padding-block:1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);transition:color var(--t-fast);text-align:start;
}
.more__btn:hover{color:var(--copper-text)}
/* the + marker follows the label on hover and keyboard focus */
.more__btn:hover .faq__icon::before,.more__btn:hover .faq__icon::after,.more__btn:focus-visible .faq__icon::before,.more__btn:focus-visible .faq__icon::after,
.faq__q:hover .faq__icon::before,.faq__q:hover .faq__icon::after,.faq__q:focus-visible .faq__icon::before,.faq__q:focus-visible .faq__icon::after{background:var(--color-copper)}
.more.is-open .faq__icon::after{transform:rotate(90deg)}
.more__panel{overflow:hidden;transition:height .3s var(--ease-out)}
.more__list{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:var(--s-3)}
@media(min-width:760px){.more__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-5)}}
.more__list>div{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:var(--s-2);padding-block:.8rem;border-top:1px solid var(--rule-soft)}
.more__list dt{font-weight:600;font-size:var(--fs-sm)}
.more__list dd{margin:0;font-size:var(--fs-sm);color:var(--ink-70)}
.more__plain{display:grid;gap:.55rem;padding-bottom:var(--s-3);max-width:68ch}
.more__plain li{display:flex;gap:.7rem;font-size:var(--fs-sm);color:var(--ink-70)}
.more__plain li::before{content:"";flex:0 0 5px;height:5px;margin-top:.62em;background:var(--color-copper)}
/* maintenance: what is included, by kind, then the boundary in one calm line */
.more__plain li b{flex:0 0 6.6rem;font-weight:600;color:var(--ink)}
.more__plain li.more__note{margin-top:.35rem;padding-top:.75rem;border-top:1px solid var(--rule);color:var(--ink)}
.more__plain li.more__note::before{background:none;border:1px solid var(--color-copper)}
@media(max-width:420px){.more__plain li:has(b){flex-wrap:wrap}.more__plain li b{flex-basis:calc(100% - 1.2rem)}.more__plain li:has(b)::before{order:-1}}
.honest{font-size:var(--fs-sm);color:var(--ink-70);max-width:62ch;padding-left:1rem;border-left:2px solid var(--color-copper)}
.honest b{color:var(--ink);font-weight:600}

/* ==========================================================================
   27. Diensten — atlas
   ========================================================================== */
.atlas{padding-block:clamp(3rem,6vw,5.5rem);position:relative;overflow-x:clip}
.atlas__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.atlas__label{margin-bottom:var(--s-2)}
.atlas__index ol{display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.atlas__index a{display:inline-flex;align-items:baseline;gap:.5rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50);padding-block:.35rem;transition:color var(--t-fast)}
.atlas__index a .num{font-size:.62rem}
.atlas__index a:hover,.atlas__index a.is-active{color:var(--ink)}
.atlas__list{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
.atlas__item{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:var(--s-3);align-items:start;padding-block:var(--s-3);border-bottom:1px solid var(--rule)}
@media(min-width:900px){
  .atlas__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-5)}
  .atlas__item{grid-template-columns:minmax(0,9rem) minmax(0,1fr)}
}
.atlas__frag{width:100%;height:auto;aspect-ratio:4/5;display:block;border:1px solid var(--rule)}
.atlas__copy{display:grid;gap:.6rem;justify-items:start}
.atlas__name{font-family:var(--font-display);font-weight:400;font-size:var(--fs-lg);line-height:1.02;letter-spacing:-.01em}
.atlas__line{font-size:var(--fs-md);line-height:1.45;max-width:30ch}
.atlas__proof{display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;margin-block:.2rem .5rem}
.atlas__proof li{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-70)}
.atlas__proof li::before{content:"";width:6px;height:1px;background:var(--color-copper)}

/* Desktop: the pinned atlas. Index | active copy | the space where the sheets live. */
html[data-atlas="3d"] .atlas,html[data-atlas="2d"] .atlas{padding:0}
html[data-atlas="3d"] .atlas__stage,html[data-atlas="2d"] .atlas__stage{height:100vh;padding-top:75px;display:flex}
html[data-atlas="3d"] .atlas__grid,html[data-atlas="2d"] .atlas__grid{
  width:100%;height:100%;grid-template-columns:minmax(9rem,12rem) minmax(0,28rem) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);gap:0 clamp(2rem,4vw,4.5rem);align-items:center;
}
html[data-atlas="3d"] .atlas__head,html[data-atlas="2d"] .atlas__head{grid-column:1;grid-row:1;position:relative;z-index:3}
html[data-atlas="3d"] .atlas__index ol,html[data-atlas="2d"] .atlas__index ol{display:grid;gap:.15rem;border-left:1px solid var(--rule)}
html[data-atlas="3d"] .atlas__index a,html[data-atlas="2d"] .atlas__index a{position:relative;padding:.42rem 0 .42rem 1rem}
html[data-atlas="3d"] .atlas__index a::before,html[data-atlas="2d"] .atlas__index a::before{
  content:"";position:absolute;left:-1px;top:0;bottom:0;width:1px;background:var(--color-copper);transform:scaleY(0);transition:transform var(--t)
}
html[data-atlas="3d"] .atlas__index a.is-active::before,html[data-atlas="2d"] .atlas__index a.is-active::before{transform:scaleY(1)}
html[data-atlas="3d"] .atlas__list,html[data-atlas="2d"] .atlas__list{grid-column:2/4;grid-row:1;position:relative;height:100%;display:block;border:0;z-index:2}
html[data-atlas="3d"] .atlas__item,html[data-atlas="2d"] .atlas__item{
  position:absolute;inset:0;padding:0;border:0;pointer-events:none;
  grid-template-columns:minmax(0,28rem) minmax(0,1fr);gap:0 clamp(2rem,4vw,4.5rem);align-items:center;
}
html[data-atlas="3d"] .atlas__item.is-active .atlas__copy,html[data-atlas="2d"] .atlas__item.is-active .atlas__copy{pointer-events:auto}
html[data-atlas="3d"] .atlas__copy,html[data-atlas="2d"] .atlas__copy{grid-column:1;grid-row:1;gap:.9rem}
html[data-atlas="3d"] .atlas__name,html[data-atlas="2d"] .atlas__name{font-size:clamp(2.6rem,min(5vw,8.5vh),4.8rem);line-height:.96}
html[data-atlas="3d"] .atlas__line,html[data-atlas="2d"] .atlas__line{font-size:clamp(1.05rem,1.5vw,1.3rem)}
html[data-atlas="3d"] .atlas__frag{display:none}
html[data-atlas="2d"] .atlas__item{perspective:1600px;perspective-origin:70% 45%}
html[data-atlas="2d"] .atlas__frag{grid-column:2;grid-row:1;justify-self:center;width:min(100%,56vh*.8);box-shadow:0 30px 60px -40px rgba(17,17,17,.55);border-color:var(--color-copper)}
.atlas__space{position:relative;pointer-events:none}
html[data-atlas="3d"] .atlas__space{grid-column:2/4;grid-row:1;height:100%;margin-inline:18% calc(-1 * var(--gutter));z-index:1}
html[data-atlas="2d"] .atlas__space{display:none}
.atlas__gl{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Mobile: the atlas is a lateral deck of sheets. */
html[data-atlas="deck"] .atlas__index{margin-inline:calc(-1 * var(--gutter));overflow-x:auto;scrollbar-width:none;padding-inline:var(--gutter)}
html[data-atlas="deck"] .atlas__index::-webkit-scrollbar{display:none}
html[data-atlas="deck"] .atlas__index ol{flex-wrap:nowrap;gap:.3rem}
html[data-atlas="deck"] .atlas__index a{white-space:nowrap;border:1px solid var(--rule);padding:.5rem .75rem;min-height:40px;transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
html[data-atlas="deck"] .atlas__index a.is-active{border-color:var(--ink);background:var(--color-carbon);color:var(--color-ivory)}
html[data-atlas="deck"] .atlas__index a.is-active .num{color:var(--copper-text)}
html[data-atlas="deck"] .atlas__list{
  display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
  margin-inline:calc(-1 * var(--gutter));padding:.5rem 9vw 1.5rem;border:0;perspective:900px;
}
html[data-atlas="deck"] .atlas__list::-webkit-scrollbar{display:none}
html[data-atlas="deck"] .atlas__item{
  flex:0 0 82vw;max-width:26rem;scroll-snap-align:center;display:flex;flex-direction:column;gap:0;padding:0;
  border:1px solid var(--rule);background:var(--color-ivory);box-shadow:0 26px 50px -38px rgba(17,17,17,.6);
}
html[data-atlas="deck"] .atlas__item[data-surface="ink"]{
  --ink:var(--color-ivory);--ink-70:rgba(245,242,236,.72);--ink-50:rgba(245,242,236,.52);--ink-30:rgba(245,242,236,.26);--rule:rgba(245,242,236,.18);
  background:#1b1917;color:var(--color-ivory);border-color:#1b1917;
}
html[data-atlas="deck"] .atlas__item[data-surface="ink"] a{color:var(--color-ivory)}
html[data-atlas="deck"] .atlas__frag{aspect-ratio:16/10;object-fit:cover;object-position:50% 38%;border:0;border-bottom:1px solid var(--color-copper)}
html[data-atlas="deck"] .atlas__copy{padding:1.1rem 1.1rem 1.3rem}
html[data-atlas="deck"] .atlas__name{font-size:2rem}
html[data-atlas="deck"] .atlas__line{font-size:1rem}

/* ==========================================================================
   28. Diensten — 01 build
   ========================================================================== */
.build{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
@media(min-width:900px){.build{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s-6);align-items:start}}
.build__frame{border-radius:10px;overflow:hidden;background:#1b1917;box-shadow:0 1px 0 rgba(17,17,17,.06),0 40px 70px -45px rgba(17,17,17,.6)}
.build__bar{display:flex;align-items:center;gap:6px;height:30px;padding-inline:12px;background:#2a2622}
.build__bar i{width:9px;height:9px;border-radius:50%;background:rgba(245,242,236,.22)}
.build__url{margin-inline:auto;display:inline-flex;align-items:center;gap:.45rem;font:500 .68rem/1 var(--font-sans);color:rgba(245,242,236,.62);background:rgba(245,242,236,.08);padding:.35rem 1.2rem;border-radius:99px}
.build__lock{width:7px;height:6px;border:1px solid currentColor;border-radius:1px;position:relative;opacity:0;transition:opacity var(--t)}
.build__live{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-text);display:inline-flex;align-items:center;gap:.4rem;opacity:0;transition:opacity var(--t)}
.build__live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-copper)}
.build__frame.is-live .build__lock,.build__frame.is-live .build__live{opacity:1}
.build__view{position:relative;aspect-ratio:16/10;background:var(--color-ivory);overflow:hidden}
.build__layer{position:absolute;inset:0}
.build__steps{border-top:1px solid var(--rule)}
.build__steps li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.2rem var(--s-2);padding-block:1.1rem;border-bottom:1px solid var(--rule);transition:opacity var(--t)}
.build__steps .num{grid-row:1/3;padding-top:.45rem}
.build__steps b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,1.9vw,1.8rem);line-height:1}
.build__steps li>span:last-child{font-size:var(--fs-sm);color:var(--ink-70)}
html[data-build] .build__frame{position:sticky;top:calc(75px + 5vh)}
html[data-build] .build__steps li{min-height:clamp(7rem,19vh,12rem);align-content:center;opacity:.34}
html[data-build] .build__steps li.is-done{opacity:.6}
html[data-build] .build__steps li.is-active{opacity:1}
@media(max-width:899px){
  html[data-build] .build__frame{top:calc(75px + .75rem);z-index:3}
  html[data-build] .build__steps li{min-height:15svh}
}

/* ==========================================================================
   29. Diensten — 02 SEO
   ========================================================================== */
.seo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);position:relative}
.seo__intro{margin-bottom:0}
.seo__demo{margin:0;position:relative;display:grid;gap:var(--s-2)}
.serp{background:#fbfaf7;border:1px solid var(--rule);border-radius:10px;overflow:hidden;box-shadow:0 40px 70px -50px rgba(17,17,17,.55)}
.serp__chrome{display:flex;align-items:center;gap:6px;height:30px;padding-inline:12px;background:#2a2622}
.serp__chrome i{width:9px;height:9px;border-radius:50%;background:rgba(245,242,236,.22)}
.serp__engine{margin-inline:auto;transform:translateX(-18px);font:500 .68rem/1 var(--font-sans);color:rgba(245,242,236,.62);background:rgba(245,242,236,.08);padding:.35rem 1.4rem;border-radius:99px}
.serp__query{display:flex;align-items:center;gap:.7rem;margin:1rem 1.1rem .4rem;padding:.7rem 1.1rem;border:1px solid var(--ink-30);border-radius:99px;min-height:46px;font-size:.95rem;background:#fff}
.serp__query svg{width:17px;height:17px;flex:0 0 auto;color:var(--ink-50)}
.serp__caret{width:1px;height:1.1em;background:var(--color-copper);margin-left:-.45rem;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.serp__tabs{display:flex;gap:1.2rem;padding:.2rem 1.6rem 0;border-bottom:1px solid var(--rule-soft);font-size:.72rem;color:var(--ink-50)}
.serp__tabs span{padding-bottom:.55rem}
.serp__tabs .is-on{color:var(--ink);border-bottom:2px solid var(--color-copper)}
.serp__results{display:grid;gap:.2rem;padding:.7rem .6rem}
.serp-hit{position:relative;padding:.85rem 1rem .95rem;display:grid;gap:.22rem;transform-origin:0 50%}
.serp-hit--strong{box-shadow:inset 0 0 0 calc(var(--ring,1) * 1px) var(--color-copper);background:rgba(185,120,69,calc(var(--ring,1) * .055))}
.serp-hit__flag{position:absolute;top:.8rem;right:1rem;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-text)}
.serp-hit__url{display:flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.01em;color:var(--ink-50);min-width:0;overflow-wrap:anywhere}
.serp-hit__fav{flex:0 0 18px;height:18px;border-radius:50%;display:grid;place-items:center;font:600 .58rem/1 var(--font-sans);background:var(--color-ivory-deep);border:1px solid var(--rule);color:var(--ink-70)}
.serp-hit--strong .serp-hit__fav{background:var(--color-carbon);color:var(--color-ivory);border-color:var(--color-carbon)}
.serp-hit--strong .serp-hit__fav--wr{background:#fff;border-color:var(--rule)}
.serp-hit__fav--wr img{width:12px;height:auto}
.serp-hit__title{font-family:var(--font-display);font-weight:400;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.15;color:var(--ink)}
.serp-hit__desc{font-size:.82rem;line-height:1.5;color:var(--ink-70);max-width:62ch}
.serp-hit__desc--none{font-style:italic;color:var(--ink-50)}
.serp-hit__links{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin-top:.25rem;font-size:.74rem;color:var(--ink)}
.serp-hit__links span{border-bottom:1px solid var(--ink-30)}
.serp__foot{padding:.4rem 1.6rem 1rem;font-size:.72rem;color:var(--ink-50)}
[data-t]{transition:background-color .35s var(--ease-out),outline-color .35s var(--ease-out),color .35s var(--ease-out);outline:1px solid transparent;outline-offset:3px}
[data-t].is-lit{outline-color:var(--color-copper);background-color:rgba(185,120,69,.14)}
.seo__source{background:var(--color-carbon);color:var(--color-ivory);padding:1.1rem 1.2rem 1.2rem;border-radius:4px;box-shadow:0 30px 60px -36px rgba(17,17,17,.7)}
.seo__source-label{color:rgba(245,242,236,.55);margin-bottom:.7rem}
.seo__source ul{display:grid;gap:.45rem}
.seo__source li{font-size:.76rem;line-height:1.4;color:rgba(245,242,236,.82);padding:.12rem .3rem;margin-inline:-.3rem}
.seo__source code{font-family:var(--font-mono);font-size:.68rem;color:var(--copper-text);margin-right:.3rem}
.seo__source .seo__indent{padding-left:1.2rem}
.seo__source [data-t].is-lit{background-color:rgba(185,120,69,.28);color:var(--color-ivory)}
.seo__meter{display:inline-block;width:56px;height:4px;background:rgba(245,242,236,.15);vertical-align:middle;margin-inline:.3rem;position:relative}
.seo__meter i{position:absolute;inset:0;background:var(--color-copper);transform:scaleX(.86);transform-origin:0 50%}
.seo__example{color:var(--ink-50)}
.seo__why-label{margin-bottom:.8rem}
.seo__factors{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
@media(min-width:600px){.seo__factors{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4)}}
.seo__factors li{display:grid;gap:.12rem;padding-block:.8rem;border-bottom:1px solid var(--rule);transition:opacity var(--t)}
.seo__factors b{font-weight:600;font-size:.92rem}
.seo__factors span{font-size:var(--fs-sm);color:var(--ink-70)}
.seo__factors code{font-family:var(--font-mono);font-size:.72rem}
.seo__foot{display:grid;gap:var(--s-2);margin-top:clamp(2rem,4vw,3.5rem)}
.seo__foot .more{margin-top:var(--s-2)}
.seo__leader{position:absolute;left:0;top:0;height:1px;background:var(--color-copper);transform-origin:0 50%;transform:scaleX(0);pointer-events:none;z-index:5}
@media(min-width:960px){
  .seo{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s-4) clamp(2.5rem,5vw,5rem);align-items:start}
  .seo__demo{grid-column:1;grid-row:1/3}
  .seo__intro{grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
  .seo__why{grid-column:2;grid-row:2}
  .seo__factors{grid-template-columns:minmax(0,1fr)}
  .serp{width:80%}
  .seo__source{position:absolute;right:0;top:40%;width:40%;z-index:2}
}
/* pinned composition: fits one screen under the header */
html[data-seo="pin"] .seo{min-height:calc(100vh - 75px - 24px);align-content:center;row-gap:var(--s-3)}
html[data-seo="pin"] .seo__intro h2{font-size:min(var(--fs-xl),7.2vh)}
html[data-seo="pin"] .seo__intro .svc__support{font-size:clamp(.95rem,2.1vh,1.15rem)}
html[data-seo="pin"] .seo__factors li{padding-block:clamp(.35rem,1.05vh,.7rem);grid-template-columns:minmax(0,11rem) minmax(0,1fr);align-items:baseline;gap:var(--s-2);opacity:.34}
html[data-seo="pin"] .seo__factors li.is-seen{opacity:.62}
html[data-seo="pin"] .seo__factors li.is-active{opacity:1}
html[data-seo="pin"] .seo__factors li.is-active b{color:var(--copper-text)}
html[data-seo="pin"] .seo.is-settled .seo__factors li{opacity:1}
html[data-seo="pin"] .serp-hit{padding-block:clamp(.5rem,1.25vh,.85rem)}
html[data-seo="pin"] .serp-hit__desc{font-size:clamp(.74rem,1.6vh,.82rem)}
html[data-seo="pin"] .seo__source{perspective:900px}

/* ==========================================================================
   30. Diensten — 03 lokale SEO
   ========================================================================== */
.local{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
@media(min-width:960px){.local{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s-6);align-items:center}}
.local__text{display:grid;gap:var(--s-3)}
.local__list{border-top:1px solid var(--rule);margin-top:var(--s-2)}
.local__list li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:var(--s-2);padding-block:.75rem;border-bottom:1px solid var(--rule);align-items:baseline}
.local__list b{font-weight:600;font-size:var(--fs-sm)}
.local__list span{font-size:var(--fs-sm);color:var(--ink-70)}
@media(max-width:520px){.local__list li{grid-template-columns:minmax(0,1fr);gap:.1rem}}
.local__demo{margin:0;display:grid;gap:var(--s-2)}
.local__panel{background:#fbfaf7;border:1px solid var(--rule);border-radius:10px;overflow:hidden;box-shadow:0 40px 70px -50px rgba(17,17,17,.55)}
.local__query{display:flex;align-items:center;gap:.6rem;margin:.9rem;padding:.6rem 1rem;border:1px solid var(--ink-30);border-radius:99px;font-size:.9rem;background:#fff}
.local__query svg{width:16px;height:16px;color:var(--ink-50)}
.local__map{position:relative;aspect-ratio:16/8;background:#e9e2d6;overflow:hidden;border-block:1px solid var(--rule-soft)}
.local__pin{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;margin:-14px 0 0 -7px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:rgba(17,17,17,.42)}
.local__pin--you{width:26px;height:26px;margin:-26px 0 0 -13px;background:var(--color-copper);box-shadow:0 8px 16px -6px rgba(17,17,17,.5)}
.local__pin--you::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fbfaf7}
.local__card{position:relative;margin:-2.2rem .9rem .9rem;background:#fff;border:1px solid var(--rule);padding:1rem 1.1rem;display:grid;gap:.3rem;box-shadow:0 18px 40px -30px rgba(17,17,17,.6)}
.local__name{font-family:var(--font-display);font-size:1.45rem;line-height:1.05}
.local__meta{font-size:.8rem;color:var(--ink-70)}
.local__stars{color:var(--color-copper);letter-spacing:.08em}
.local__open{color:#3f7a4d;font-weight:600}
.local__actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.45rem}
.local__actions span{display:inline-flex;align-items:center;min-height:34px;padding:.3rem .9rem;border:1px solid var(--ink-30);border-radius:99px;font-size:.75rem;font-weight:500}
.local__actions span:first-child{background:var(--color-copper);border-color:var(--color-copper);color:#fff}
.local__nap{border-top:1px solid var(--rule);padding-top:.8rem}
.local__nap ul{display:grid;margin-top:.5rem}
.local__nap li{display:grid;grid-template-columns:minmax(0,8.5rem) minmax(0,1fr) 1.2rem;gap:var(--s-2);align-items:baseline;padding-block:.5rem;border-bottom:1px solid var(--rule-soft);font-size:.82rem}
.local__nap li::after{content:"✓";color:var(--copper-text);opacity:0;transition:opacity var(--t)}
.local.is-consistent .local__nap li::after,.local:not([data-motion]) .local__nap li::after{opacity:1}
.local__src{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)}
.local__val{display:grid;overflow:hidden}
.local__val>span{grid-area:1/1}
.local__old{visibility:hidden}
.local__demo figcaption{color:var(--ink-50)}
@media(max-width:520px){.local__nap li{grid-template-columns:minmax(0,1fr) 1.2rem}.local__src{grid-column:1/-1}}

/* ==========================================================================
   31. Diensten — 04 webshop
   ========================================================================== */
.shop{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
@media(min-width:900px){.shop{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-6)}}
.shop__steps{border-top:1px solid var(--rule)}
.shop__steps li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.2rem var(--s-2);padding-block:1.1rem;border-bottom:1px solid var(--rule);transition:opacity var(--t)}
.shop__steps .num{grid-row:1/3;padding-top:.45rem}
.shop__steps b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,2vw,1.9rem);line-height:1}
.shop__steps li>span:last-child{font-size:var(--fs-sm);color:var(--ink-70);max-width:38ch}
.shop__device{display:grid;justify-items:center;gap:var(--s-2);align-self:start}
.shop__caption{color:var(--ink-50);text-align:center}
.shop__note{margin-top:var(--s-4);font-size:var(--fs-sm);color:var(--ink-70);max-width:52ch}
/* the conversion moment right after the order has been confirmed */
.shop-cta{display:grid;gap:var(--s-2);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--rule)}
.shop-cta__line{font-family:var(--font-display);font-size:var(--fs-lg);line-height:1.1;max-width:22ch}
.shop-cta__line em{color:var(--copper-text)}
.shop-cta .cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:1rem 1.6rem}
@media(min-width:900px){.shop-cta{grid-template-columns:minmax(0,1fr) auto;align-items:end}}
.phone{width:clamp(210px,21vw,270px);aspect-ratio:9/18.2;border:1px solid var(--ink);border-radius:30px;background:#fbfaf7;padding:.7rem .6rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:0 40px 70px -45px rgba(17,17,17,.65),inset 0 0 0 5px var(--color-carbon)}
.phone__top{display:flex;justify-content:center;padding-top:.5rem;font:500 .6rem/1 var(--font-sans);color:var(--ink-50)}
.phone__top span{background:var(--color-ivory-deep);padding:.35rem .9rem;border-radius:99px}
.phone__screens{position:relative;flex:1;overflow:hidden;margin-inline:.25rem}
.scr{position:absolute;inset:0;display:flex;flex-direction:column;gap:.55rem;padding:.4rem .2rem;background:#fbfaf7}
.scr:not(:first-child){visibility:hidden}
.scr__h{font-family:var(--font-display);font-size:1.35rem;line-height:1}
.scr__chips{display:flex;gap:.3rem}
.scr__chips span{font-size:.58rem;padding:.25rem .55rem;border:1px solid var(--rule);border-radius:99px}
.scr__chips .is-on{background:var(--color-carbon);color:var(--color-ivory);border-color:var(--color-carbon)}
.scr__grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;flex:1}
.scr__grid i,.scr__img,.scr__line i{display:block;background:var(--c)}
.scr__img{flex:1;min-height:40%}
.scr__name{font-weight:600;font-size:.82rem}
.scr__price{font-family:var(--font-display);font-size:1.3rem;line-height:1}
.scr__cta{margin-top:auto;display:grid;place-items:center;min-height:34px;background:var(--color-carbon);color:var(--color-ivory);font-size:.68rem;font-weight:600;border-radius:99px}
.scr__cta--copper{background:var(--color-copper)}
.scr__swatches{display:flex;gap:.45rem}
.scr__swatches i{width:26px;height:26px;border-radius:50%;background:var(--c);display:block}
.scr__swatches .is-on{box-shadow:0 0 0 2px #fbfaf7,0 0 0 3px var(--color-copper)}
.scr__row{display:flex;justify-content:space-between;font-size:.7rem;color:var(--ink-70);border-bottom:1px solid var(--rule-soft);padding-bottom:.35rem}
.scr__row b{color:var(--ink);font-weight:600}
.scr__row--total{font-size:.78rem;color:var(--ink)}
.scr__line{display:flex;align-items:center;gap:.5rem;font-size:.7rem}
.scr__line i{width:34px;height:34px}
.scr__line b{margin-left:auto}
.scr__opt{display:flex;align-items:center;gap:.5rem;font-size:.74rem;padding:.55rem .6rem;border:1px solid var(--rule)}
.scr__opt i{width:12px;height:12px;border-radius:50%;border:1px solid var(--ink-50)}
.scr__opt.is-on{border-color:var(--ink)}
.scr__opt.is-on i{border:4px solid var(--color-copper)}
.phone__dots{display:flex;justify-content:center;gap:.35rem;padding-bottom:.3rem}
.phone__dots i{width:5px;height:5px;border-radius:50%;background:var(--ink-30);transition:background var(--t),transform var(--t)}
.phone__dots i.is-on{background:var(--color-copper);transform:scale(1.3)}
html[data-shop] .scr{visibility:visible}
html[data-shop] .shop__steps li{min-height:clamp(8rem,26vh,15rem);align-content:center;opacity:.34}
html[data-shop] .shop__steps li.is-active{opacity:1}
html[data-shop] .shop__device{position:sticky;top:calc(75px + 8vh)}
@media(max-width:899px){
  html[data-shop] .shop{grid-template-columns:minmax(0,1fr) auto;gap:var(--s-3)}
  html[data-shop] .shop__device{grid-column:2;grid-row:1;top:calc(75px + 12vh)}
  html[data-shop] .shop__steps{grid-column:1;grid-row:1}
  html[data-shop] .phone{width:38vw;max-width:190px;border-radius:24px}
  html[data-shop] .shop__steps li{grid-template-columns:minmax(0,1fr);min-height:34vh}
  html[data-shop] .shop__steps .num{grid-row:auto;padding:0}
  html[data-shop] .shop__caption{display:none}
}

/* ==========================================================================
   32. Diensten — 05 redesign
   ========================================================================== */
.redo{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
@media(min-width:960px){.redo{grid-template-columns:minmax(0,5fr) minmax(0,6.5fr);gap:var(--s-6);align-items:center}}
.redo__text{display:grid;gap:var(--s-3);align-content:start}
.redo__stages{border-top:1px solid var(--rule)}
.redo__stages li{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.1rem var(--s-2);padding-block:.8rem;border-bottom:1px solid var(--rule);transition:opacity var(--t)}
.redo__stages .num{grid-row:1/3;padding-top:.3rem}
.redo__stages b{font-weight:600}
.redo__stages li>span:last-child{font-size:var(--fs-sm);color:var(--ink-70)}
.redo__note{font-size:var(--fs-sm);color:var(--ink-70)}
html[data-redo] .redo__stages li{opacity:.38}
html[data-redo] .redo__stages li.is-done{opacity:.62}
html[data-redo] .redo__stages li.is-active{opacity:1}
html[data-redo] .redo__stages li.is-active b{color:var(--copper-text)}
.redo__frame{border-radius:10px;overflow:hidden;background:#2a2622;box-shadow:0 50px 80px -50px rgba(0,0,0,.9)}
.redo__bar{display:flex;align-items:center;gap:6px;height:30px;padding-inline:12px}
.redo__bar i{width:9px;height:9px;border-radius:50%;background:rgba(245,242,236,.22)}
.redo__bar span{margin-inline:auto;transform:translateX(-18px);font:500 .68rem/1 var(--font-sans);color:rgba(245,242,236,.62);background:rgba(245,242,236,.08);padding:.35rem 1.4rem;border-radius:99px}
.redo__view{--old:0;position:relative;aspect-ratio:4/3;background:var(--color-ivory);background:color-mix(in srgb,#dfe3e8 calc(var(--old) * 100%),var(--color-ivory));overflow:hidden;color:var(--color-carbon)}
.redo__scan{position:absolute;left:0;right:0;top:0;height:10%;background:linear-gradient(to bottom,transparent,rgba(185,120,69,.35));border-bottom:1px solid var(--color-copper);opacity:0;visibility:hidden;z-index:4}
.rp{--keep:0;--judge:0;position:absolute;display:flex;align-items:center;outline:1px solid rgba(185,120,69,calc(var(--keep) + var(--judge)));outline-offset:3px}
.rp--drop{outline-style:dashed;display:none}
html[data-redo] .rp--drop{display:flex}
.rp--banner{left:0;right:0;top:12%;height:8%;justify-content:center;background:#ffe45c;font:700 clamp(.6rem,1.3vw,.95rem)/1 var(--font-sans);color:#b00020}
.rp--counter{left:4%;bottom:4%;font:400 clamp(.5rem,.9vw,.7rem)/1 var(--font-mono);background:#000;color:#0f0;padding:.25rem .4rem}
.rp--click{right:6%;top:26%;font:700 clamp(.55rem,1vw,.8rem)/1 var(--font-sans);background:linear-gradient(#6fa8ff,#1d4ed8);color:#fff;padding:.45rem .8rem;border-radius:4px}
.rp--dots{left:45%;top:88%;gap:.3rem}
.rp--dots i{width:8px;height:8px;border-radius:50%;background:#1d4ed8;display:block}
.rp--date{right:4%;bottom:4%;font:italic 400 clamp(.5rem,.9vw,.7rem)/1 var(--font-sans);color:#666}
.rp--logo{left:6%;top:6%;font:400 clamp(.9rem,1.8vw,1.4rem)/1 var(--font-display);color:color-mix(in srgb,#1d4ed8 calc(var(--old) * 100%),var(--color-carbon))}
.rp--nav{right:6%;top:6.5%;gap:clamp(.5rem,1.4vw,1.1rem);font:500 clamp(.5rem,.9vw,.7rem)/1 var(--font-sans)}
.rp--nav i{font-style:normal;color:color-mix(in srgb,#1d4ed8 calc(var(--old) * 100%),var(--color-carbon));text-decoration:underline;text-decoration-color:rgba(29,78,216,var(--old))}
.rp--h1{left:6%;top:24%;width:44%;font:400 clamp(1.1rem,2.7vw,2.3rem)/1 var(--font-display);letter-spacing:-.01em}
.rp--img{left:55%;top:22%;width:39%;height:44%;background:#d9c8b1 linear-gradient(135deg,rgba(255,255,255,.25),transparent 60%)}
.rp--cta{left:6%;top:52%;padding:.55rem 1rem;font:500 clamp(.55rem,1vw,.78rem)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;background:var(--color-copper);background:color-mix(in srgb,#9aa3ad calc(var(--old) * 100%),var(--color-copper));color:#fff}
.rp--hours{left:6%;top:74%;right:6%;padding-top:.6rem;border-top:1px solid rgba(17,17,17,.16);font:400 clamp(.55rem,1vw,.8rem)/1 var(--font-mono);letter-spacing:.06em;color:rgba(17,17,17,.7)}
.rp--mark{display:none}
html[data-redo] .redo__frame{will-change:transform}

/* ==========================================================================
   33. Diensten — 06–08 na de livegang
   ========================================================================== */
.after{display:grid;gap:0;border-top:1px solid var(--rule)}
.after__axis,.after__row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
@media(min-width:900px){.after__axis,.after__row{grid-template-columns:minmax(0,21rem) minmax(0,1fr);column-gap:var(--s-5)}}
.after__axis{position:relative;height:2.4rem}
.after__tick{position:absolute;top:.9rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);white-space:nowrap}
.after__tick::before{content:"";position:absolute;left:0;top:-.9rem;width:1px;height:.6rem;background:var(--ink-30)}
@media(min-width:900px){
  .after__tick{--track:calc(100% - 21rem - var(--s-5))}
  .after__tick--0{left:calc(21rem + var(--s-5))}
  .after__tick--30{left:calc(21rem + var(--s-5) + var(--track) * .3)}
  .after__tick--m{left:calc(21rem + var(--s-5) + var(--track) * .58)}
  .after__tick--end{right:0}
  .after__tick--end::before{left:auto;right:0}
}
@media(max-width:899px){.after__tick--0{left:0}.after__tick--30{left:30%}.after__tick--m{left:58%}.after__tick--end{right:0}.after__tick--end::before{left:auto;right:0}}
.after__row{padding-block:var(--s-3) 0;border-top:1px solid var(--rule);align-items:center}
.after__head{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.1rem var(--s-2);align-items:baseline}
.after__head .num{grid-row:1/4}
.after__head h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.45rem,2.2vw,2rem);line-height:1}
.after__head p{font-size:var(--fs-sm);color:var(--ink-70)}
.after__head .after__price{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink)}
.after__price b{color:var(--copper-text);font-weight:500}
.after__track{position:relative;height:44px}
.after__line{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:var(--ink);transform-origin:0 50%}
.after__track--care .after__line{background:var(--ink-30);height:1px}
.after__beat{position:absolute;top:50%;width:2px;height:16px;margin-top:-8px;background:var(--color-copper);transform-origin:50% 50%}
.after__beat:nth-of-type(2){left:12%}.after__beat:nth-of-type(3){left:32%}.after__beat:nth-of-type(4){left:52%}.after__beat:nth-of-type(5){left:72%}.after__beat:nth-of-type(6){left:92%}
.after__track--support .after__line{right:70%;background:var(--color-copper);height:3px;margin-top:-1.5px}
.after__track--support::after{content:"";position:absolute;left:30%;right:0;top:50%;border-top:1px dashed var(--ink-30)}
.after__cap{position:absolute;left:30%;top:50%;width:2px;height:22px;margin:-11px 0 0 -1px;background:var(--color-copper)}
.after__pulse{position:absolute;right:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--color-copper)}
.after__pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--color-copper);animation:pulse 2.4s var(--ease-out) infinite}
@keyframes pulse{from{transform:scale(.6);opacity:.9}to{transform:scale(2.2);opacity:0}}
/* with motion the pulse only appears once the clock has run: the system is then live */
html[data-after] .after__pulse{opacity:0;transition:opacity .6s var(--ease-out)}
html[data-after] .after.is-running .after__pulse{opacity:1}
.more--row{grid-column:1/-1;margin-top:var(--s-2);border-top:1px solid var(--rule-soft)}
.more--row .more__btn{min-height:44px;padding-block:.7rem;font-size:.66rem;color:var(--ink-70)}
.more--row .more__btn:hover,.more--row .more__btn:focus-visible{color:var(--copper-text)}

@media (prefers-reduced-motion:reduce){
  .after__pulse::after,.serp__caret{animation:none}
}
@media(max-width:599px){.serp-hit__flag{position:static;order:-1}.serp__results{padding-inline:.3rem}.serp-hit{padding-inline:.8rem}}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   34. Werk
   ========================================================================== */
.work-real,.work-concepts{overflow-x:clip}
.work-feature{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);align-items:end}
@media(min-width:900px){.work-feature{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:var(--s-6)}}
.work-feature .work-item{grid-column:auto}
.work-feature__aside{display:grid;gap:.8rem;justify-items:start;padding-bottom:var(--s-2)}
.work-feature__title{font-family:var(--font-display);font-size:var(--fs-xl);line-height:1}
.work-feature__line{font-size:var(--fs-md);color:var(--ink-70);max-width:32ch}
.work-feature__facts{display:grid;gap:0;width:100%;border-top:1px solid var(--rule);margin-top:.4rem}
.work-feature__facts>div{display:grid;grid-template-columns:minmax(0,6.5rem) minmax(0,1fr);gap:var(--s-2);padding-block:.6rem;border-bottom:1px solid var(--rule)}
.work-feature__facts dt{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);padding-top:.2rem}
.work-feature__facts dd{margin:0;font-size:var(--fs-sm)}
.work-badge{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:.45em .8em;border:1px solid var(--ink-30)}
.work-badge--real{background:var(--color-carbon);border-color:var(--color-carbon);color:var(--color-ivory)}
.work-badge--real::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-copper)}
@media(min-width:760px){
  .work-grid--concepts .work-item--e{grid-column:3/span 8}
}
.readme{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
@media(min-width:820px){.readme{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s-5)}}
.readme li{display:grid;gap:.4rem;padding-block:var(--s-3);border-bottom:1px solid var(--rule)}
@media(min-width:820px){.readme li{border-bottom:0}}
.readme__k{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.16em;text-transform:uppercase;color:var(--copper-text)}
.readme li>span:last-child{font-size:var(--fs-md);line-height:1.45}

/* ==========================================================================
   35. Tarieven
   ========================================================================== */
.dials{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule);column-gap:var(--s-5)}
@media(min-width:760px){.dials{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.dials{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dial{display:grid;gap:.55rem;padding-block:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule)}
.dial__name{font-family:var(--font-display);font-weight:400;font-size:var(--fs-lg);line-height:1.05}
.dial__line{font-size:var(--fs-sm);color:var(--ink-70);max-width:40ch}
.dial__rail{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;margin-top:.5rem;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50)}
.dial__track{position:relative;height:1px;background:var(--rule);display:block}
.dial__fill{position:absolute;inset:-1px 0;background:linear-gradient(to right,rgba(185,120,69,.25),var(--color-copper));transform-origin:0 50%;display:block}
.dial__fill::after{content:"";position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--color-copper)}
.calc__progress{color:rgba(245,242,236,.6)}
.calc__n{display:inline-block;min-width:2.2em;color:var(--copper-text)}
.calc__q{transition:opacity var(--t)}
.calc__range{position:relative;height:1px;background:rgba(245,242,236,.2);margin:.4rem 0 1.2rem;display:flex;justify-content:space-between}
.calc__range i{position:absolute;top:-2px;height:5px;background:var(--color-copper);left:0;width:0;transition:left .4s var(--ease-out),width .4s var(--ease-out)}
.calc__range span{position:relative;top:.7rem;font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;color:rgba(245,242,236,.45)}
@media(max-width:959px){
  /* the result stays in view while answering on a phone */
  .calc__out{position:sticky;top:auto;bottom:0;z-index:4;padding:1rem 1.2rem;gap:.35rem;border-top:1px solid rgba(245,242,236,.2);box-shadow:0 -20px 40px -20px rgba(0,0,0,.7)}
  .calc__out .calc__summary,.calc__out .calc__note{display:none}
  .calc__out .calc__amount{font-size:1.9rem}
  .calc__out .calc__range{margin-bottom:1.5rem}
  .calc__out .btn{margin-top:.4rem!important;min-height:44px;padding-block:.7em}
}
.faq-split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
@media(min-width:960px){.faq-split{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:var(--s-6);align-items:start}}
.faq-split h2{font-size:var(--fs-xl);max-width:10ch}
@media(min-width:960px){.faq-split h2{position:sticky;top:110px}}

/* ==========================================================================
   36. Over ons
   ========================================================================== */
.origin{overflow-x:clip}
.origin__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
@media(min-width:960px){.origin__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6);align-items:center}}
.origin__text{display:grid;gap:var(--s-3)}
.origin__text h2{font-size:var(--fs-xl);line-height:1;max-width:12ch;text-wrap:wrap}
.origin__text p{max-width:44ch}
.problems{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--rule)}
@media(min-width:600px){.problems{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4)}}
.problems li{--strike:0;--fade:0;position:relative;display:grid;gap:.15rem;padding-block:1rem;border-bottom:1px solid var(--rule)}
.problems b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.4rem,2.3vw,1.9rem);line-height:1.05;position:relative;justify-self:start;color:color-mix(in srgb,var(--ink) calc(100% - var(--fade) * 45%),transparent)}
.problems b::after{content:"";position:absolute;left:-.1em;right:-.1em;top:55%;height:2px;background:var(--color-copper);transform:scaleX(var(--strike));transform-origin:0 50%}
.problems span{font-size:var(--fs-sm);color:var(--ink-70)}
.path{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:900px){.path{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s-4)}}
.path li{position:relative;display:grid;gap:.45rem;padding:0 0 var(--s-4) 2.2rem;align-content:start}
@media(min-width:900px){.path li{padding:2.4rem 0 0}}
.path li h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1}
.path li p{font-size:var(--fs-sm);color:var(--ink-70);max-width:30ch}
.path::before{content:"";position:absolute;left:5px;top:6px;bottom:0;width:1px;background:var(--rule)}
@media(min-width:900px){.path::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:1px}}
.path__line{position:absolute;left:5px;top:6px;bottom:0;width:1px;background:var(--color-copper);transform-origin:50% 0;display:block}
@media(min-width:900px){.path__line{left:0;right:0;top:5px;bottom:auto;width:auto;height:1px;transform-origin:0 50%}}
.path__dot{position:absolute;left:0;top:0;width:11px;height:11px;border-radius:50%;border:1px solid var(--ink-30);background:var(--paper);transition:background var(--t),border-color var(--t)}
.path li.is-reached .path__dot,.path:not([data-motion]) .path__dot{background:var(--color-copper);border-color:var(--color-copper)}
.market{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
@media(min-width:960px){.market{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-6);align-items:start}}
.market h2{font-size:var(--fs-xl);line-height:1;max-width:10ch}
.market__list{border-top:1px solid var(--rule)}
.market__list li{display:grid;grid-template-columns:minmax(0,1fr);gap:.2rem;padding-block:var(--s-3);border-bottom:1px solid var(--rule)}
@media(min-width:700px){.market__list li{grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:var(--s-4);align-items:baseline}}
.market__list b{font-weight:600}
.market__list span{color:var(--ink-70)}

/* ==========================================================================
   37. Contact
   ========================================================================== */
.routes--big .route{padding:clamp(1.5rem,3vw,2.4rem);gap:.6rem;min-height:clamp(11rem,20vw,15rem);justify-content:space-between}
.routes--big .route__name{font-size:clamp(1.7rem,2.6vw,2.4rem)}
.routes--big .route__note{font-size:var(--fs-sm);max-width:30ch}
.routes--big .route__val{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.82rem;padding-top:.9rem;border-top:1px solid var(--rule)}
.route__go{transition:transform var(--t);display:inline-block;font-size:1rem}
@media (hover:hover) and (pointer:fine){.route:hover .route__go{transform:translateX(.35rem)}}
.route:active{transform:scale(.99)}
.routes--big .route:first-child{background:var(--color-carbon);color:var(--color-ivory)}
.routes--big .route:first-child .route__note{color:rgba(245,242,236,.72)}
.routes--big .route:first-child .route__val{border-top-color:rgba(245,242,236,.2)}
.routes--big .route:first-child:hover{background:var(--color-charcoal)}
.routes__elsewhere{margin-top:1rem}
section:has(>.shell>[data-routes]){overflow-x:clip}
.cfg-band{border-block:1px solid var(--rule)}
.cfg-band__inner{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);align-items:center}
@media(min-width:900px){.cfg-band__inner{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--s-5)}}
.cfg-band__faces{display:flex}
.cfg-band__faces img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 18%;filter:grayscale(1) contrast(1.05);border:2px solid var(--paper)}
.cfg-band__faces img+img{margin-left:-14px}
h2.cfg-band__title{font-size:var(--fs-lg);line-height:1.05}
.cfg-band__line{color:var(--ink-70);margin-top:.35rem;max-width:44ch}
.cfg-band__cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.inquiry{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
@media(min-width:960px){.inquiry{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:var(--s-6);align-items:start}.inquiry__head{position:sticky;top:110px}}
.inquiry__head{display:grid;gap:var(--s-2);align-content:start}
.inquiry__head h2{font-size:var(--fs-xl);line-height:1;max-width:12ch}
.inquiry__steps{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:var(--s-2)}
@media(min-width:960px){.inquiry__steps{display:grid;gap:0;border-top:1px solid var(--rule)}}
.inquiry__steps[hidden]{display:none}
.inquiry__steps button{display:flex;align-items:baseline;gap:.6rem;min-height:40px;padding:.5rem .8rem;border:1px solid var(--rule);font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);transition:color var(--t-fast),border-color var(--t-fast),background var(--t-fast)}
@media(min-width:960px){.inquiry__steps button{width:100%;border:0;border-bottom:1px solid var(--rule);padding:.8rem 0}}
.inquiry__steps button.is-done{color:var(--ink)}
.inquiry__steps button.is-done .num::after{content:" ✓"}
.inquiry__steps button[aria-current]{color:var(--ink);border-color:var(--ink)}
@media(min-width:960px){.inquiry__steps button[aria-current]{border-color:var(--rule);box-shadow:inset 2px 0 0 var(--color-copper);padding-left:.9rem}}
.form-block.is-stepped{gap:var(--s-3)}
.form-block.is-stepped .fieldset{min-height:18rem;align-content:start}
.fieldset>legend .num{margin-right:.4rem}
.opt{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;text-transform:lowercase;color:var(--ink-30);margin-left:.4rem}
.form-nav{display:flex;align-items:center;gap:var(--s-2);padding-top:var(--s-2);border-top:1px solid var(--rule)}
.form-nav[hidden]{display:none}
.form-nav__count{margin-inline:auto}
.form-status[hidden]{display:none}
[data-submit][disabled]{opacity:.6;cursor:progress}
.form-block[data-state="loading"] [data-submit] .btn__arrow{animation:nudge .8s var(--ease-in-out) infinite}
@keyframes nudge{50%{transform:translateX(.35em)}}
.form-error{border:1px solid var(--color-copper);background:rgba(185,120,69,.08);padding:1.1rem 1.2rem;display:grid;gap:.8rem}
.form-error[hidden]{display:none}
.form-error p{font-size:var(--fs-sm)}
.form-error:focus{outline:none}
@media (prefers-reduced-motion:reduce){.form-block[data-state="loading"] [data-submit] .btn__arrow{animation:none}}
.calc{overflow:clip}
.work-grid--concepts .work-item,.work-feature .work-item,#concepten .work-grid--duo .work-item{padding:0}
.work-feature .work-item__meta{display:none}
.faq-split .faq__q,.more__btn{padding-inline:0}
.fieldset[hidden]{display:none}
.opt{color:var(--ink-50);font-size:.6rem}
.scr__row b{white-space:nowrap}.scr__row{gap:.5rem}
/* pinned SEO: only the active factor opens its line, so eight factors fit short screens;
   the text stays in the DOM (collapsed, not hidden) and opens fully when there is room */
html[data-seo="pin"] .seo__factors li{grid-template-columns:minmax(0,1fr);gap:0}
html[data-seo="pin"] .seo__factors li>span{display:block;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s var(--ease-out),opacity .35s var(--ease-out)}
html[data-seo="pin"] .seo__factors li.is-active>span{max-height:3.2em;opacity:1}
@media(min-height:860px){html[data-seo="pin"] .seo.is-settled .seo__factors li>span{max-height:3.2em;opacity:1}}
@media(max-width:1180px){.serp-hit__flag{position:static;order:-1}}
@media(max-width:1200px){
  html[data-atlas="3d"] .atlas__grid,html[data-atlas="2d"] .atlas__grid{grid-template-columns:minmax(8rem,10rem) minmax(0,22rem) minmax(0,1fr)}
  html[data-atlas="3d"] .atlas__item,html[data-atlas="2d"] .atlas__item{grid-template-columns:minmax(0,22rem) minmax(0,1fr)}
  html[data-atlas="3d"] .atlas__space{margin-inline-start:34%}
}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   38. Mobile SEO lens: the strong result stays in view while factors pass under it
   ========================================================================== */
.seo__affects{display:none;font-style:normal;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-text);margin-top:.35rem}
html[data-seo="lens"] .seo__affects{display:block}
.seo-lens{position:sticky;top:calc(75px + .5rem);z-index:3;margin-bottom:var(--s-3);background:#fbfaf7;border:1px solid var(--rule);border-radius:10px;box-shadow:0 24px 40px -30px rgba(17,17,17,.55);overflow:hidden}
.seo-lens::after{content:"";position:absolute;left:1.1rem;bottom:0;width:36%;height:2px;background:var(--color-copper);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease-out)}
.seo-lens:has(.is-lit)::after{transform:scaleX(1)}
.seo-lens__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;padding:.7rem 1rem .6rem;border-bottom:1px solid var(--rule-soft);min-height:2.6rem}
.seo-lens__f{font-weight:600;font-size:.86rem}
.seo-lens__a{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-text)}
.seo-lens__body{display:grid;position:relative}
.seo-lens__body>*{grid-area:1/1;transition:transform .45s var(--ease-out),opacity .35s var(--ease-out)}
.seo-lens__hit{padding:.8rem 1rem 1rem;box-shadow:none;background:transparent}
.seo-lens__hit .serp-hit__flag{display:none}
html[data-seo="lens"] .seo-lens .seo__source{position:static;width:auto;border-radius:0;box-shadow:none;transform:translateY(102%);opacity:0;padding:.8rem 1rem}
html[data-seo="lens"] .seo-lens.shows-source .seo__source{transform:none;opacity:1}
.seo-lens.shows-source .seo-lens__hit{transform:translateY(-12%);opacity:0}
.seo-lens [data-t]{--pulse:0;box-shadow:0 0 0 calc(var(--pulse) * 6px) rgba(185,120,69,calc(var(--pulse) * .35))}
html[data-seo="lens"] .seo__factors{grid-template-columns:minmax(0,1fr);border-top:0}
html[data-seo="lens"] .seo__factors li{min-height:17svh;align-content:center;border-bottom:0;border-top:1px solid var(--rule);padding-left:.9rem;position:relative;opacity:.4;transition:opacity var(--t)}
html[data-seo="lens"] .seo__factors li::before{content:"";position:absolute;left:0;top:-1px;bottom:0;width:2px;background:var(--color-copper);transform:scaleY(0);transform-origin:50% 0;transition:transform .4s var(--ease-out)}
html[data-seo="lens"] .seo__factors li.is-active{opacity:1}
html[data-seo="lens"] .seo__factors li.is-active::before{transform:scaleY(1)}
html[data-seo="lens"] .seo__factors li:last-child{margin-bottom:12vh}

/* ==========================================================================
   39. Mobile webshop stage: the phone grows to nearly full width while the order plays
   ========================================================================== */
html[data-shop="stage"] .shop{display:block;position:relative;height:calc(100svh + var(--shop-units, 8.4) * 36svh)}
html[data-shop="stage"] .shop__steps{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[data-shop="stage"] .shop__device{
  position:sticky;top:75px;height:calc(100svh - 75px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
}
html[data-shop="stage"] .phone{width:min(76vw,calc((100svh - 75px - 11rem) * .4945));max-width:none;border-radius:34px;transform-origin:50% 60%;will-change:transform}
html[data-shop="stage"] .shop__caption{display:none}
.shop__live{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem .8rem;width:min(76vw,22rem);min-height:4.2rem;align-content:start}
.shop__live .num{grid-row:1/3;padding-top:.35rem}
.shop__live b{font-family:var(--font-display);font-weight:400;font-size:1.7rem;line-height:1}
.shop__live span:last-child{font-size:var(--fs-sm);color:var(--ink-70)}
/* bigger phone, so the screens read at phone size */
html[data-shop="stage"] .scr{gap:.7rem;padding:.6rem .35rem}
html[data-shop="stage"] .scr__name{font-size:.95rem}
html[data-shop="stage"] .scr__row,html[data-shop="stage"] .scr__line,html[data-shop="stage"] .scr__opt{font-size:.82rem}
html[data-shop="stage"] .scr__chips span{font-size:.7rem}
html[data-shop="stage"] .scr__cta{min-height:42px;font-size:.78rem}
@media (max-height:560px){.seo-lens{position:relative;top:auto}html[data-seo="lens"] .seo__factors li{min-height:0;padding-block:1rem}}
.work-concepts{padding-top:clamp(2.5rem,5vw,4rem)}
/* mobile: the demonstration comes right after the heading, the detail list follows it */
@media(max-width:959px){
  .local,.redo{gap:var(--s-3)}
  .local__text,.redo__text{display:contents}
  .local__demo,.redo__frame{order:2;margin-block:var(--s-2)}
  .local__list,.redo__stages{order:3}
  .redo__note{order:4}
  .local__list{margin-top:0}
}

/* Safari < 16 has no overflow:clip; keep the page from scrolling sideways there
   (overflow on <html> clips the viewport without breaking position:sticky) */
@supports not (overflow:clip){html{overflow-x:hidden}}

/* Homepage page spine (motion/ambient.js): lives inside the Tarieven price list and
   sits on the left grid axis, min(22px, gutter − 8px) outside the content edge. At
   1440 that is the rail's own axis (numbers left of it, ticks hanging off it). */
html[data-ambient] #tarieven .price-lines{position:relative}
.amb.amb-spine{left:calc(-1 * min(22px, var(--gutter) - 8px));top:0;bottom:0;width:1px;background:var(--color-copper)}
.amb.amb-spine::after{content:"";position:absolute;left:0;bottom:0;width:7px;height:1px;background:inherit}
.amb-mark-k{height:1px;transform-origin:50% 50%}
/* the outer browser context of the SEO demo is WebRescue itself; the results inside are the example */
.serp__context{padding:.9rem 1.6rem 0;color:var(--ink-50)}
.serp__context+.serp__query{margin-top:.5rem}
.seo-lens__chrome{display:flex;align-items:center;gap:5px;height:26px;padding-inline:10px;background:#2a2622}
.seo-lens__chrome i{width:7px;height:7px;border-radius:50%;background:rgba(245,242,236,.22)}
.seo-lens__chrome > span{margin-inline:auto;transform:translateX(-12px);font:500 .62rem/1 var(--font-sans);color:rgba(245,242,236,.66);background:rgba(245,242,236,.08);padding:.3rem 1rem;border-radius:99px}

/* ==========================================================================
   40. Mobile stages: one object holds while its story changes (diensten.js)
   ========================================================================== */
/* shared step caption (webshop, local) */
.stage-cap{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.1rem .8rem;min-height:3.6rem;align-content:start;margin-bottom:.6rem}
.stage-cap .num{grid-row:1/3;padding-top:.3rem}
.stage-cap b{font-family:var(--font-display);font-weight:400;font-size:1.55rem;line-height:1}
.stage-cap span:last-child{font-size:var(--fs-sm);color:var(--ink-70)}

/* atlas: the deck holds while vertical scroll walks it through the eight sheets */
html[data-atlas-stage] .atlas__stage{height:calc(100svh - 75px);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
html[data-atlas-stage] .atlas__grid{gap:var(--s-2)}
/* the sheets are stacked; diensten.js places them on one row in space from the scroll position */
html[data-atlas-stage] .atlas__list{display:block;position:relative;overflow:visible;scroll-snap-type:none;padding:0;margin-inline:0;perspective:1100px;perspective-origin:50% 40%}
html[data-atlas-stage] .atlas__item{position:absolute;top:0;left:50%;width:min(84vw,26rem);margin-left:calc(min(84vw,26rem) / -2);transform-origin:50% 50%;will-change:transform}
html[data-atlas-stage] .atlas__item.is-active{box-shadow:0 34px 60px -36px rgba(17,17,17,.7)}
/* the chip strip is not a second scroller: it follows the same progress */
html[data-atlas-stage] .atlas__index{overflow:hidden;margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
html[data-atlas-stage] .atlas__index ol{width:max-content;will-change:transform}
/* short phones: the sheet keeps its picture and name, the proof list steps aside */
@media (max-height:740px){
  html[data-atlas-stage] .atlas__proof{display:none}
  html[data-atlas-stage] .atlas__frag{aspect-ratio:16/10}
  html[data-atlas-stage] .atlas__copy{padding:.9rem 1rem 1rem;gap:.45rem}
  html[data-atlas-stage] .atlas__name{font-size:1.7rem}
}
html[data-atlas="deck"] .atlas__frag{aspect-ratio:4/3;object-position:50% 60%}

/* local: the demo holds under the header during the four beats */
html[data-local="stage"] .local__demo{background:var(--color-ivory-deep);padding-block:.5rem;margin-block:0}
html[data-local="stage"] .local__map{aspect-ratio:16/7}
html[data-local="stage"] .local__nap{padding-top:.5rem}
html[data-local="stage"] .local__nap li{padding-block:.35rem}

/* redesign: the old page stays in view while the stages scroll under it */
html[data-redo="hold"] .redo__frame{position:sticky;top:calc(75px + .6rem);z-index:3;align-self:start;box-shadow:0 30px 50px -30px rgba(0,0,0,.95)}
html[data-redo="hold"] .redo__stages li{min-height:18svh;align-content:center}

/* after launch: the time axis sticks and a cursor carries the day count */
html[data-after="time"] .after__axis{position:sticky;top:75px;z-index:4;background:var(--paper);height:3.6rem;box-shadow:0 1px 0 var(--rule)}
.after__cursor{position:absolute;left:0;top:.3rem;bottom:.2rem;width:1px;background:var(--color-copper);display:block}
.after__cursor::before{content:"";position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;background:var(--color-copper)}
.after__cursor b{position:absolute;left:8px;bottom:0;font-family:var(--font-mono);font-weight:500;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--copper-text);white-space:nowrap;background:var(--paper);padding-inline:.2rem}
#support.is-ended .after__price::after{content:" · afgerond, daarna onderhoud";color:var(--copper-text)}

/* ==========================================================================
   41. Affordance system: one accent language for mouse, keyboard and touch
   Mouse:     normal → hover accent (existing rules above)
   Keyboard:  normal → the same accent on :focus-visible (plus the copper ring)
   Touch:     no hover exists, so the accent is visible by default — in the
              element's own hover language, and never more than one accent each
   ========================================================================== */
/* keyboard: the hover accent comes along with the focus ring */
a.price-line:focus-visible .price-line__name,
.work-item:focus-visible .work-item__title,
.faq__q:focus-visible,.more__btn:focus-visible{color:var(--copper-text)}
.link-arrow:focus-visible,.cta-mail:focus-visible{border-color:var(--color-copper)}
/* focus rings that a clipping container would cut off are drawn inside instead */
.route:focus-visible,.atlas__index a:focus-visible,.inquiry__steps button:focus-visible{outline-offset:-4px}
.work-item:focus-visible{outline-offset:6px}

@media (hover: none), (pointer: coarse){
  /* clickable rows and cards: a copper arrow where the hover would have moved them */
  a.price-line .price-line__name::after,
  .work-item__title::after{content:"\00a0→";content:"\00a0→" / "";white-space:nowrap;color:var(--copper-text);font-family:var(--font-sans);font-size:.85em}
  /* the featured project's caption row carries the tap cue on touch (and its name) */
  .work-feature .work-item__meta{display:flex}
  .work-feature__title{display:none}
  /* expandable: the + marker itself carries the accent */
  .faq__icon::before,.faq__icon::after{background:var(--color-copper)}
  /* disclosure labels ("Alles wat erin zit", "Wat valt eronder") wear their hover state:
     a copper label beside the copper +, so they never read as a passive caption.
     FAQ questions keep ink text (a whole list in copper would flatten the hierarchy);
     their copper + carries the cue. */
  .more__btn,.more--row .more__btn{color:var(--copper-text)}
  /* text links: the underline is copper from the start */
  .link-arrow,.cta-mail{border-bottom-color:var(--color-copper)}
  .page-hero__crumb a{border-bottom:1px solid var(--color-copper);padding-bottom:.15em}
}

/* atlas cards: compact 4:3 composition everywhere except the desktop 3D / CSS-3D sheets */
.atlas__frag{aspect-ratio:4/3}
html[data-atlas="2d"] .atlas__frag{aspect-ratio:4/5}
html[data-atlas="deck"] .atlas__frag{aspect-ratio:4/3;object-position:50% 50%}
/* English is not available yet: shown, but not a link */
.lang__soon{color:var(--ink-30);cursor:default}
.mobile-nav__foot .lang__soon{color:rgba(245,242,236,.3)}
.lang__soon-text{color:rgba(245,242,236,.45);font-size:var(--fs-sm)}
.lang__soon-text small{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;margin-left:.4rem}

/* on dark surfaces the brand copper already passes (5.2:1 on carbon) */
.invert,.site-footer,.mobile-nav,.cfg,.calc__out,.seo__source,.bl--dev,
.routes--big .route:first-child,html[data-atlas="deck"] [data-surface="ink"],.cursor-chip{--copper-text:var(--color-copper)}

/* ==========================================================================
   42. Touch targets: the hit area grows, the visible element does not
   ========================================================================== */
@media (hover: none), (pointer: coarse){
  .link-arrow,.cta-mail,.page-hero__crumb a,.brand{position:relative}
  .link-arrow::before,.cta-mail::before,.page-hero__crumb a::before,.brand::before{content:"";position:absolute;inset:-10px -8px}
  .footer-grid ul{gap:0}
  .footer-grid li a{display:inline-block;padding-block:.62rem}
  .mobile-nav__foot .lang a,.mobile-nav__foot .lang__soon{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center}
  .atlas__index a{min-height:44px}
}

/* Short landscape screens: no holds, but the objects must fit the screen next to their text */
@media (max-height:560px) and (min-width:600px){
  .build{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s-4);align-items:start}
  html[data-build] .build__frame{top:calc(75px + .5rem)}
  html[data-build] .build__steps li{min-height:0;padding-block:1rem}
  .shop{grid-template-columns:minmax(0,1fr) auto}
  html[data-shop] .shop__device{top:calc(75px + .5rem)}
  html[data-shop] .shop__steps li{min-height:42svh}
  html[data-shop] .phone{width:calc((100svh - 75px - 3.5rem) * .4945);min-width:120px;max-width:none}
  html[data-shop] .shop__caption{display:none}
}

/* ==========================================================================
   43. Text scaling and narrow screens: nothing may force the page wider
   ========================================================================== */
/* buttons wrap only when their label cannot fit (header button stays on one line) */
.btn{white-space:normal;max-width:100%;text-align:center}
.site-header .btn,.nav-actions .btn{white-space:nowrap}
/* fieldsets default to min-width:min-content */
.fieldset{min-width:0}
/* one word longer than the screen (large text settings) breaks instead of overflowing */
.display,.page-hero h1,.cta-mail,.route__val{overflow-wrap:break-word}
.cta-mail{max-width:100%}
/* maker captions at 320px */
.maker figcaption{flex-wrap:wrap}
/* grid tracks that must be allowed to shrink below their content's min-content width */
.work-grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.work-grid{grid-template-columns:repeat(12,minmax(0,1fr))}}
@media(min-width:900px){.work-grid--trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.price-line{grid-template-columns:auto minmax(0,1fr) auto}
.field-grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:700px){.field-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field input,.field select,.field textarea{min-width:0}
.form-block,.pack-grid{grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.pack-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:520px){.price-line__val{white-space:normal;text-align:right}}
.maker figcaption .meta{min-width:0;overflow-wrap:anywhere}
.form-nav{flex-wrap:wrap}
/* when the full navigation does not fit (large text, zoom), the burger takes over at any width */
html.nav-compact .nav,html.nav-compact .nav-actions{display:none}
html.nav-compact .burger{display:flex}
.choice span{min-width:44px;justify-content:center}
@media (hover: none), (pointer: coarse){
  .hero__aside dd a{position:relative}
  .hero__aside dd a::before{content:"";position:absolute;inset:-12px -6px}
}
@media (hover: none), (pointer: coarse){
  .page-hero__crumb a::before{inset:-13px -8px}
  html[data-atlas="deck"] .atlas__index a,.inquiry__steps button{min-height:44px}
  .footer-grid li a{padding-block:.72rem}
}
main:focus{outline:none}

/* homepage Werk: four pieces in the editorial 7/5 · 5/7 grid (same as the Werk page) */
@media(min-width:760px){.work-grid--duo{perspective:1600px}}
.work-grid--duo .work-item{transform-origin:50% 100%}

/* ==========================================================================
   44. Webshop phone: the real Klei & Co shop (its own identity inside the phone)
   Sizes are in container units, so the same screens read on the small desktop
   phone and on the enlarged mobile stage.
   ========================================================================== */
.phone__screens{container-type:inline-size}
.kshop{--k-red:#ea2804;--k-ink:#202020;--k-mute:#646464;--k-line:rgba(32,32,32,.12);--k-bg:#f9f7f3;
  background:var(--k-bg);color:var(--k-ink);font-family:var(--font-sans);gap:2.6cqw;padding:2cqw 1.2cqw 3cqw}
.kshop__bar{display:flex;justify-content:space-between;align-items:center;padding-bottom:2.4cqw;border-bottom:1px solid var(--k-line)}
.kshop__logo{font-weight:800;font-size:7cqw;letter-spacing:-.04em;line-height:1}
.kshop__bag{display:grid;place-items:center;min-width:7.5cqw;height:7.5cqw;border-radius:99px;background:var(--k-ink);color:#fff;font-size:3.6cqw;font-weight:700;padding-inline:1.6cqw}
.kshop--cart .kshop__bag,.kshop--checkout .kshop__bag,.kshop--pay .kshop__bag{background:var(--k-red)}
.kshop__h{font-weight:800;font-size:8.4cqw;line-height:1;letter-spacing:-.03em;margin-top:1cqw}
.kshop__chips{display:flex;gap:1.6cqw;flex-wrap:nowrap;overflow:hidden}
.kshop__chips span{font-size:3.8cqw;font-weight:600;padding:1.2cqw 3cqw;border:1px solid var(--k-line);border-radius:99px;white-space:nowrap}
.kshop__chips .is-on{background:var(--k-ink);color:#fff;border-color:var(--k-ink)}
.kshop__grid{display:grid;grid-template-columns:1fr 1fr;gap:3cqw 2.6cqw;margin:0}
.kshop__grid figure{margin:0;display:grid;gap:1.2cqw}
.kshop__grid img,.kshop__hero,.kshop__mini img,.kshop__line img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:2.4cqw;background:#efe8dc}
.kshop__grid figcaption{display:flex;justify-content:space-between;gap:1cqw;font-size:3.9cqw;font-weight:600;line-height:1.2}
.kshop__grid figcaption b{font-weight:600;color:var(--k-mute)}
.kshop__grid .is-pick img{box-shadow:0 0 0 .6cqw var(--k-red)}
.kshop__hero{aspect-ratio:1/1.05;border-radius:3cqw}
.kshop__name{font-weight:800;font-size:7.6cqw;letter-spacing:-.03em;line-height:1}
.kshop__meta{font-size:4cqw;color:var(--k-mute);line-height:1.35}
.kshop__price{font-weight:800;font-size:9cqw;letter-spacing:-.03em;line-height:1}
.kshop__mini,.kshop__line{display:grid;grid-template-columns:22cqw 1fr auto;gap:3cqw;align-items:center}
.kshop__mini p,.kshop__line p{display:grid;gap:.6cqw;font-size:4.2cqw}
.kshop__mini b,.kshop__line b{font-weight:700}
.kshop__mini span,.kshop__line p span{color:var(--k-mute);font-size:3.8cqw}
.kshop__line>b{font-size:4.2cqw}
.kshop__label{font-size:3.6cqw;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--k-mute);margin-top:1cqw}
.kshop__sw{display:flex;align-items:center;gap:2.6cqw}
.kshop__sw i{width:8.5cqw;height:8.5cqw;border-radius:50%;background:var(--c);display:block}
.kshop__sw .is-on{box-shadow:0 0 0 .8cqw var(--k-bg),0 0 0 1.4cqw var(--k-ink)}
.kshop__sw span{font-size:4.2cqw;font-weight:600;margin-left:1cqw}
.kshop__row{display:flex;justify-content:space-between;font-size:4.2cqw;color:var(--k-mute);padding-block:1.8cqw;border-bottom:1px solid var(--k-line)}
.kshop__row b{color:var(--k-ink);font-weight:600}
.kshop__row--total{color:var(--k-ink);font-weight:700;border-bottom:0}
.kshop__row--total b{font-weight:800;font-size:5cqw}
.kshop__cta{margin-top:auto;position:relative;display:grid;place-items:center;min-height:13cqw;border-radius:99px;background:var(--k-ink);color:#fff;font-size:4.4cqw;font-weight:700;overflow:hidden}
.kshop--cart .kshop__cta,.kshop--pay .kshop__cta,.kshop--checkout .kshop__cta{background:var(--k-red)}
.kshop__cta>span{grid-area:1/1;transition:transform .35s var(--ease-out),opacity .35s var(--ease-out)}
.kshop__cta-b{transform:translateY(120%);opacity:0}
.kshop.is-added .kshop__cta{background:#2b9a66}
.kshop.is-added .kshop__cta-a{transform:translateY(-120%);opacity:0}
.kshop.is-added .kshop__cta-b{transform:none;opacity:1}
.kshop__field{display:grid;gap:.6cqw;font-size:4.4cqw;font-weight:600;padding:2cqw 2.6cqw;border:1px solid var(--k-line);border-radius:2cqw;background:#fff}
.kshop__field span{font-size:3.2cqw;font-weight:600;color:var(--k-mute);text-transform:uppercase;letter-spacing:.06em}
.kshop__opt{display:flex;align-items:center;gap:2.4cqw;font-size:4.2cqw;font-weight:600;padding:2.4cqw 2.6cqw;border:1px solid var(--k-line);border-radius:2cqw;background:#fff}
.kshop__opt b{margin-left:auto;font-weight:600;color:var(--k-mute)}
.kshop__opt i{width:4.4cqw;height:4.4cqw;border-radius:50%;border:1px solid var(--k-mute);flex:0 0 auto}
.kshop__opt.is-on{border-color:var(--k-ink)}
.kshop__opt.is-on i{border:1.4cqw solid var(--k-red)}
.kshop__ideal{margin-left:0!important;color:#cc0066!important;font-weight:800!important;letter-spacing:-.01em}
.kshop__banks{display:flex;gap:1.6cqw;padding-left:2cqw}
.kshop__banks span{font-size:3.6cqw;font-weight:600;padding:1.4cqw 2.4cqw;border:1px solid var(--k-line);border-radius:99px;background:#fff}
.kshop__banks .is-on{border-color:var(--k-ink);background:var(--k-ink);color:#fff}
.kshop__check{display:grid;place-items:center;width:18cqw;height:18cqw;border-radius:50%;background:#2b9a66;color:#fff;font-size:9cqw;font-weight:700;margin:4cqw auto 1cqw}
.kshop--done{text-align:center}
.kshop--done .kshop__line{text-align:left;margin-top:auto;padding:2.4cqw;border:1px solid var(--k-line);border-radius:3cqw;background:#fff}
/* the phone's own font scale on the enlarged mobile stage is already handled by cqw */
html[data-shop="stage"] .kshop{gap:2.8cqw}

/* desktop: the step list sets the reading pace; the confirmation step is longer (the hold) */
html[data-shop="desk"] .scr{visibility:visible}
html[data-shop="desk"] .shop__steps li{min-height:clamp(9rem,32vh,19rem);align-content:center;opacity:.34;transition:opacity var(--t)}
html[data-shop="desk"] .shop__steps li.is-done{opacity:.55}
html[data-shop="desk"] .shop__steps li.is-active{opacity:1}
html[data-shop="desk"] .shop__steps li:last-child{min-height:clamp(12rem,40vh,22rem)}
html[data-shop="desk"] .shop__device{position:sticky;top:calc(75px + 6vh)}

/* Local SEO section: the drawn city fills the map; pins and labels sit on top */
.local__canvas{position:absolute;inset:-6% 0 -6% 0;width:100%;height:112%;display:block}
.local__map{aspect-ratio:16/9}
.local__pin b{position:absolute;left:150%;top:-2px;transform:rotate(45deg);transform-origin:0 0;font:600 .62rem/1 var(--font-sans);color:rgba(17,17,17,.62);white-space:nowrap}
.local__pin:not(.local__pin--you){width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;transform:none;background:rgba(17,17,17,.62);box-shadow:0 0 0 3px #fbfaf7}
.local__pin:not(.local__pin--you) b{transform:none;left:16px;top:-1px}
.local__pin--you::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:rgba(185,120,69,.2);transform:rotate(45deg);animation:pinpulse 2.4s var(--ease-out) infinite}
@keyframes pinpulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.local__actions span{min-height:36px}
@media(max-width:520px){.local__pin b{display:none}.local__actions{gap:.35rem}.local__actions span{padding-inline:.75rem;font-size:.8rem}}
@media (prefers-reduced-motion:reduce){.local__pin--you::before{animation:none}}

/* SEO demo: WebRescue owns the outer frame; the search inside is the example */
.serp__brandbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1.1rem;background:var(--color-ivory);border-bottom:1px solid var(--rule)}
.serp__brand{display:flex;align-items:center;gap:.55rem}
.serp__brand img{width:30px;height:auto}
.serp__brand b{font-family:var(--font-display);font-weight:400;font-size:1.35rem;line-height:1;letter-spacing:-.01em}
.serp__brand b span{color:var(--color-copper)}
.serp__tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-text)}
.serp__engine{color:rgba(245,242,236,.85)!important}
.seo-lens__chrome{justify-content:space-between}
.seo-lens__chrome > span{margin-inline:0;transform:none}
.seo-lens__brand{display:flex;align-items:center;gap:0;font-family:var(--font-display);font-weight:400;font-size:1rem;color:var(--color-ivory);line-height:1}
.seo-lens__brand img{width:17px;height:auto;margin-right:.4rem;filter:invert(1) brightness(1.6)}
.seo-lens__brand span{color:var(--color-copper)}
.seo-lens__chrome{height:32px}

/* ==========================================================================
   45. Build sequence: five distinct states of one project (Grachtzicht)
   Without motion only the finished, live state shows; the steps carry the text.
   ========================================================================== */
.build__view{container-type:inline-size}
.bl{position:absolute;inset:0;display:none;font-family:var(--font-sans);color:var(--color-carbon)}
.bl--live{display:block}
html[data-build] .bl{display:block;opacity:0}
html[data-build] .bl--talk,html[data-build] .bl--structure,html[data-build] .bl--dev{display:grid}
/* 01 KENNISMAKING — a conversation and the notes taken from it */
.bl--talk{display:grid;grid-template-columns:1.25fr 1fr;gap:4cqw;padding:5cqw;background:var(--color-ivory)}
.bl-talk__chat{display:flex;flex-direction:column;gap:2cqw;justify-content:center}
.bl-q,.bl-a{font-size:2.15cqw;line-height:1.35;padding:1.6cqw 2.2cqw;border-radius:2cqw;max-width:92%}
.bl-q{align-self:flex-start;background:#fff;border:1px solid var(--rule)}
.bl-a{align-self:flex-end;background:var(--color-carbon);color:var(--color-ivory)}
.bl-talk__notes{background:#fffdf8;border:1px solid var(--rule);padding:3cqw;display:flex;flex-direction:column;gap:1.8cqw;transform:rotate(1.2deg);box-shadow:0 12px 26px -18px rgba(17,17,17,.4);align-self:center}
.bl-notes__h{font-family:var(--font-mono);font-size:1.5cqw;letter-spacing:.1em;text-transform:uppercase;color:var(--copper-text);padding-bottom:1.4cqw;border-bottom:1px solid var(--rule)}
.bl-talk__notes p:not(.bl-notes__h){display:grid;gap:.4cqw;font-size:1.95cqw;line-height:1.3}
.bl-talk__notes b{font-family:var(--font-mono);font-weight:500;font-size:1.4cqw;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50)}
/* 02 STRUCTUUR — scattered content becomes a sitemap and an annotated wireframe */
.bl--structure{display:grid;grid-template-columns:1fr 1fr;gap:4cqw;padding:5cqw;background:var(--color-ivory)}
.bl-sitemap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw 2cqw;align-content:center}
.bl-node{display:grid;place-items:center;min-height:6.4cqw;border:1px solid var(--color-carbon);font-size:2cqw;font-weight:600;background:#fff}
.bl-node--root{grid-column:1/-1;justify-self:center;width:50%;background:var(--color-carbon);color:var(--color-ivory)}
.bl-wire{display:flex;flex-direction:column;gap:1.3cqw;justify-content:center}
.bl-wire__row{display:flex;align-items:center;min-height:5.6cqw;padding-inline:2cqw;border:1.5px dashed rgba(17,17,17,.35);font-family:var(--font-mono);font-size:1.55cqw;letter-spacing:.04em;color:var(--ink-70);background:rgba(255,255,255,.6)}
.bl-wire__row--nav{min-height:3.6cqw}
.bl-wire__row--hero{min-height:11cqw;border-color:var(--copper-text);color:var(--copper-text)}
.bl-wire__row--foot{min-height:3.6cqw}
/* 03 DESIGN — identity arrives: photo, type, colour, buttons */
.bl--design{background:#f3eee5}
.bl-design__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.95)}
.bl--design::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,34,30,.82) 0%,rgba(28,34,30,.45) 46%,transparent 75%)}
.bl-design__copy{position:absolute;left:6cqw;top:7cqw;z-index:2;display:grid;gap:1cqw;color:#f6f1e7}
.bl-design__logo{font-family:var(--font-display);font-size:3cqw;margin-bottom:3cqw}
.bl-design__h{font-family:var(--font-display);font-size:6.4cqw;line-height:.98;letter-spacing:-.01em}
.bl-design__h--it{font-style:italic;color:#e3cfa3}
.bl-design__btns{display:flex;gap:1.6cqw;margin-top:3cqw}
.bl-design__btns span{font-size:1.8cqw;font-weight:600;padding:1.4cqw 2.4cqw;background:#f6f1e7;color:#2f3a33}
.bl-design__btns span+span{background:transparent;color:#f6f1e7;border:1px solid rgba(246,241,231,.6)}
.bl-design__spec{position:absolute;right:3cqw;bottom:3cqw;z-index:2;display:flex;gap:1.4cqw}
.bl-design__spec span{display:flex;align-items:center;gap:.8cqw;font-family:var(--font-mono);font-size:1.45cqw;letter-spacing:.04em;padding:1cqw 1.6cqw;background:rgba(246,241,231,.92);color:#2f3a33}
.bl-design__spec i{width:2cqw;height:2cqw;border-radius:50%;background:var(--c);display:block;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.bl-design__spec b{font-family:var(--font-display);font-weight:400;font-size:2.4cqw;line-height:1}
/* 04 DEVELOPMENT — the code beside what it renders, at two widths */
.bl--dev{display:grid;grid-template-columns:1.05fr 1fr .42fr;gap:2.6cqw;padding:4cqw;background:var(--color-carbon);align-items:center}
.bl-dev__code{display:flex;flex-direction:column;gap:1.2cqw;font-family:var(--font-mono);font-size:1.62cqw;color:rgba(245,242,236,.82);white-space:nowrap;overflow:hidden}
.bl-dev__code em{font-style:normal;color:var(--color-copper)}
.bl-dev__ok{margin-top:1.6cqw;color:#9fd3b0!important;font-size:1.5cqw}
.bl-dev__render,.bl-dev__phone{position:relative;background:#f3eee5;overflow:hidden;border-radius:1cqw}
.bl-dev__render{aspect-ratio:4/3}
.bl-dev__phone{aspect-ratio:9/18;border-radius:2cqw;box-shadow:0 0 0 .6cqw #3a342e}
.bl-dev__render img,.bl-dev__phone img{width:100%;height:62%;object-fit:cover;display:block}
.bl-dev__render p,.bl-dev__phone p{font-family:var(--font-display);font-size:3.2cqw;line-height:1;padding:1.6cqw 2cqw 0;color:#2f3a33}
.bl-dev__phone p{font-size:2.1cqw;padding:1.2cqw}
.bl-dev__search{display:block;margin:1.4cqw 2cqw;padding:1.2cqw 1.6cqw;border:1px solid rgba(47,58,51,.3);font-size:1.5cqw;color:rgba(47,58,51,.7);background:#fff}
.bl-dev__phone span{display:block;margin:1cqw;height:3.4cqw;border:1px solid rgba(47,58,51,.3);background:#fff}
/* 05 LIVEGANG — the finished site, live, at desktop and phone size */
.bl--live{background:#1b1917}
.bl-live__site{position:absolute;inset:0;overflow:hidden}
.bl-live__site img{width:100%;height:auto;display:block}
.bl-live__phone{position:absolute;right:4cqw;bottom:4cqw;width:17cqw;aspect-ratio:9/18.5;border-radius:3cqw;overflow:hidden;background:#000;box-shadow:0 0 0 .8cqw #111,0 3cqw 6cqw -2cqw rgba(0,0,0,.6);z-index:2}
.bl-live__phone img{width:100%;height:auto;display:block;transform:translateY(0)}
.bl-live__notch{position:absolute;top:1.2cqw;left:50%;width:30%;height:2cqw;margin-left:-15%;border-radius:99px;background:#111;z-index:2}

/* Build reading pace: every state gets a real scroll range, Livegang the longest (hold) */
html[data-build] .build__steps li{min-height:clamp(10rem,30vh,19rem)}
html[data-build] .build__steps li:last-child{min-height:clamp(16rem,52vh,30rem)}
@media(max-width:899px){
  html[data-build] .build__steps li{min-height:30svh}
  html[data-build] .build__steps li:last-child{min-height:52svh}
}
@media (max-height:560px) and (min-width:600px){html[data-build] .build__steps li,html[data-build] .build__steps li:last-child{min-height:60svh}}

/* Build as a held stage (diensten.js): the composition stays while the five states play */
html[data-build] .bl--talk{opacity:1}
html[data-build="stage"] .build{align-items:center}
html[data-build="stage"] .build__frame{position:relative;top:auto}
html[data-build="stage"] .build__steps li,html[data-build="stage"] .build__steps li:last-child{min-height:0;padding-block:clamp(.8rem,1.9vh,1.25rem)}
html[data-build="stage-m"] .build__steps{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html[data-build="stage-m"] .build__frame{position:relative;top:auto;width:min(100%,calc((100svh - 75px - 8.5rem - 30px) * .8));margin-inline:auto}
.build__hold{display:flex;flex-direction:column;gap:.9rem;z-index:3}
.build__prog{display:flex;gap:4px;width:min(100%,calc((100svh - 75px - 8.5rem - 30px) * .8));margin-inline:auto}
.build__prog i{flex:1;height:2px;background:var(--rule);transition:background-color var(--t)}
.build__prog i.is-on{background:var(--color-copper)}
.build__cap{width:min(100%,calc((100svh - 75px - 8.5rem - 30px) * .8));margin:0 auto}

/* Build on phones: its own composition — a taller frame, one column per state,
   type sized for reading (not the desktop frame scaled down) */
@media(max-width:899px){
  html[data-build] .build__view{aspect-ratio:4/5}
  .bl--talk,.bl--structure{grid-template-columns:minmax(0,1fr);gap:4cqw;padding:6cqw;align-content:center}
  .bl-q,.bl-a{font-size:3.9cqw;padding:2.6cqw 3.4cqw;border-radius:3.4cqw}
  .bl-talk__chat .bl-q:nth-child(n+3),.bl-talk__chat .bl-a:nth-child(n+3){display:none}
  .bl-talk__notes{padding:4.4cqw;gap:2.4cqw}
  .bl-notes__h{font-size:3cqw}
  .bl-talk__notes p:not(.bl-notes__h){font-size:3.8cqw}
  .bl-talk__notes b{font-size:2.8cqw}
  .bl-node{min-height:10cqw;font-size:3.8cqw}
    .bl-wire{gap:2cqw}
  .bl-wire__row{min-height:8cqw;font-size:3cqw}
  .bl-wire__row--hero{min-height:14cqw}
  .bl-wire__row--nav,.bl-wire__row--foot{min-height:6cqw}
  .bl--design::after{background:linear-gradient(180deg,rgba(28,34,30,.85) 0%,rgba(28,34,30,.35) 55%,transparent 80%)}
  .bl-design__copy{left:6cqw;top:8cqw;right:6cqw}
  .bl-design__logo{font-size:5cqw;margin-bottom:4cqw}
  .bl-design__h{font-size:10cqw}
  .bl-design__btns span{font-size:3.4cqw;padding:2.4cqw 3.6cqw}
  .bl-design__spec{left:4cqw;right:4cqw;bottom:4cqw;flex-wrap:wrap}
  .bl-design__spec span{font-size:2.8cqw;padding:1.8cqw 2.4cqw}
  .bl-design__spec b{font-size:4cqw}
  .bl-design__spec i{width:3.4cqw;height:3.4cqw}
  .bl--dev{grid-template-columns:minmax(0,1fr) 30cqw;grid-template-rows:auto 1fr;gap:4cqw;padding:5cqw;align-content:center}
  .bl-dev__code{grid-column:1/-1;font-size:3.1cqw;gap:1.8cqw}
  .bl-dev__ok{font-size:3cqw}
  .bl-dev__render p{font-size:5.4cqw}
  .bl-dev__search{font-size:2.8cqw;padding:2cqw}
  .bl-dev__phone p{font-size:3.6cqw}
  .bl-live__phone{width:34cqw;right:5cqw;bottom:5cqw}
}

/* Local SEO on phones: the map fills the panel, the profile rises over its lower edge */
@media(max-width:520px){.local__actions span:nth-child(3){display:none}}
html[data-local="stage"] .local__panel{position:relative}
html[data-local="stage"] .local__map{aspect-ratio:auto;height:min(96vw, calc(100svh - 75px - 22rem))}
html[data-local="stage"] .local__card{position:absolute;left:.75rem;right:.75rem;bottom:.75rem;margin:0}
html[data-local="stage"] .local__query{margin:.6rem}
html[data-local="stage"] .local__nap{padding-top:.4rem}
html[data-local="stage"] .local__nap li{padding-block:.3rem}
html[data-local="stage"] .local__demo figcaption{display:none}
html[data-local="stage"] .local__nap li{grid-template-columns:minmax(0,7rem) minmax(0,1fr) 1.2rem;font-size:.78rem}
html[data-local="stage"] .local__src{grid-column:auto}
html[data-local="stage"] .local__val>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Redesign analysis: every piece of the old page is visibly judged */
.rp--keep::after,.rp--drop::after{position:absolute;top:-.55rem;right:-.55rem;display:grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;font:700 .62rem/1 var(--font-sans);color:#fff;pointer-events:none}
.rp--keep::after{content:"✓";background:var(--color-copper);opacity:var(--keep)}
.rp--drop::after{content:"✕";background:#7a2b2b;opacity:var(--judge)}
.rp--drop{outline-color:rgba(122,43,43,calc(var(--judge) * .8))!important}

/* After launch: each track carries its own events on the shared timeline */
.after__ev{position:absolute;left:calc(var(--at) * 100%);bottom:calc(50% + 9px);transform:translateX(-50%);font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-50);white-space:nowrap;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.after__ev::after{content:"";position:absolute;left:50%;top:calc(100% + 4px);width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--color-copper)}
.after__ev--low{bottom:auto;top:calc(50% + 12px)}
.after__ev--low::after{top:auto;bottom:calc(100% + 5px)}
.after__track--care .after__ev::after{display:none}
.after__ev--req{color:var(--ink-70)}
.after__ev--fix{color:var(--copper-text)}
.after__ev--fix::after{background:#3f7a4d}
.after__ev--end{transform:none;left:calc(var(--at) * 100% + 10px);bottom:auto;top:calc(50% + 10px);color:var(--copper-text)}
.after__ev--end::after{display:none}
.after__nightly{position:absolute;left:0;right:0;top:50%;height:3px;margin-top:6px;background:radial-gradient(circle,rgba(17,17,17,.28) 1px,transparent 1.5px) 0 0/14px 3px repeat-x;transform-origin:0 50%}
html[data-after] .after__ev{opacity:0;transform:translate(-50%,4px)}
html[data-after] .after__ev--end{transform:translateY(4px)}
html[data-after] .after__ev.is-on{opacity:1;transform:translateX(-50%)}
html[data-after] .after__ev--end.is-on{transform:none}
.after__track{height:64px}
@media(max-width:899px){.after__ev{font-size:.54rem}.after__ev--end{white-space:normal;max-width:9rem;line-height:1.3}}
.after__track--support .after__ev--low::after{display:block}

/* ==========================================================================
   Legal pages (privacy, algemene voorwaarden): reading pages, no motion
   ========================================================================== */
h1.display.legal__title{font-size:clamp(min(2.2rem,11vw),4.6vw,4.2rem);max-width:none}
.legal__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 2rem;margin-top:var(--s-3)}
.legal__meta .meta{color:var(--ink-70);margin:0;font-size:var(--fs-meta)}
.legal__print[hidden]{display:none}
.legal{padding-block:var(--s-5) var(--s-6)}
.legal__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
@media(min-width:960px){
  .legal__grid{grid-template-columns:16.5rem minmax(0,1fr);gap:var(--s-6)}
}
.legal__body{max-width:44rem;min-width:0}
.legal__print-id{display:none}
.legal-sec{padding-block:var(--s-4);border-top:1px solid var(--rule);scroll-margin-top:calc(75px + 1rem)}
.legal-sec h2{display:flex;gap:.9rem;align-items:baseline;font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,2.3vw,1.95rem);line-height:1.12;margin-bottom:1rem}
.legal-sec h2 .num{flex:0 0 auto}
.legal-sec h3{font-family:var(--font-sans);font-weight:600;font-size:1rem;margin-top:var(--s-3);margin-bottom:.5rem}
.legal-sec p,.legal-sec li,.legal-sec dd{font-size:var(--fs-body);line-height:1.65;color:var(--ink-70)}
.legal-sec strong{color:var(--ink);font-weight:600}
.legal-sec p+p,.legal-sec p+ul,.legal-sec p+ol,.legal-sec ul+p,.legal-sec ol+p,.legal-sec .legal-table+p{margin-top:.9rem}
.legal-sec ul,.legal-sec ol{padding-left:1.35rem}
.legal-sec ul{list-style:disc}
.legal-sec ol{list-style:decimal}
.legal-sec li+li{margin-top:.55rem}
.legal-sec li::marker{color:var(--copper-text)}
.legal-sec a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--color-copper);text-underline-offset:.2em;overflow-wrap:anywhere}
.legal-sec a:hover,.legal-sec a:focus-visible{color:var(--copper-text)}
.legal-sec code{font-family:var(--font-mono);font-size:.82em;background:var(--color-ivory-deep);padding:.1em .35em;overflow-wrap:anywhere}
/* facts and definitions: label / value rows */
.legal-facts,.legal-terms{border-top:1px solid var(--rule);margin-top:1rem}
.legal-facts>div,.legal-terms>div{display:grid;grid-template-columns:minmax(0,1fr);gap:.15rem;padding-block:.7rem;border-bottom:1px solid var(--rule)}
.legal-facts dt,.legal-terms dt{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)}
.legal-terms dt{font-family:var(--font-sans);font-size:var(--fs-body);letter-spacing:0;text-transform:none;color:var(--ink);font-weight:600}
.legal-facts dd,.legal-terms dd{margin:0;overflow-wrap:anywhere}
@media(min-width:600px){.legal-facts>div,.legal-terms>div{grid-template-columns:10rem minmax(0,1fr);gap:1.2rem}}
/* purposes and legal bases */
.legal-table{border-top:1px solid var(--rule);margin-top:1rem}
.legal-table>div{display:grid;grid-template-columns:minmax(0,1fr);gap:.25rem;padding-block:.8rem;border-bottom:1px solid var(--rule)}
.legal-table span{font-size:var(--fs-body);line-height:1.55;color:var(--ink-70)}
.legal-table span:first-child{color:var(--ink)}
.legal-table__head{display:none!important}
@media(min-width:600px){
  .legal-table>div{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem}
  .legal-table__head{display:grid!important}
  .legal-table__head span{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50)!important}
}

/* printing / saving as pdf: only the document, with its identity and version */
@media print{
  @page{margin:16mm 16mm 18mm}
  body:has(.legal-page){background:#fff;color:#000}
  body:has(.legal-page)>:not(main){display:none!important}
  .legal-page .page-hero,.legal-page .legal{padding:0;border:0}
  .legal-page .page-hero p,.legal-page .page-hero__crumb{opacity:1!important;animation:none!important}
  .legal-page .page-hero__crumb,.legal-page .docnav,.legal-page .docbar,.legal-page .docsheet,.legal-page .legal__print{display:none!important}
  .legal-page .legal__title{font-size:26pt;margin-top:4pt}
  .legal-page .page-hero p{font-size:11pt;color:#000;max-width:none}
  .legal-page .legal__grid{display:block}
  .legal-page .legal__body{max-width:none}
  .legal-page .legal__print-id{display:block;order:-1;font-family:var(--font-mono);font-size:7.5pt;letter-spacing:.06em;color:#333;border-top:1px solid #999;padding-top:6pt;margin:10pt 0 4pt}
  .legal-page .legal-sec{padding-block:9pt;border-color:#bbb}
  .legal-page .legal-sec h2{font-size:14pt;break-after:avoid}
  .legal-page .legal-sec h3{break-after:avoid}
  .legal-page .legal-chapter__title{break-inside:avoid;break-after:avoid;font-size:17pt;padding-top:8pt;margin-top:6pt}
  .legal-page .legal-sec h3{font-size:12.5pt;break-inside:avoid}
  .legal-page .legal-sec p,.legal-page .legal-sec li,.legal-page .legal-sec dd,.legal-page .legal-table span{font-size:10pt;color:#000;line-height:1.45}
  .legal-page .legal-sec a{color:#000;text-decoration:none}
  .legal-page .legal-sec a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt}
  .legal-page .legal-sec code{background:none;padding:0}
}

/* contact: form privacy line and business details */
.form-privacy{font-size:var(--fs-sm);color:var(--ink-70);max-width:52ch}
.company{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2) var(--s-5);margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--rule)}
.company__label{color:var(--ink-50)}
.company__facts{display:grid;grid-template-columns:minmax(0,1fr);gap:.2rem 2rem}
.company__facts>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:1rem;padding-block:.35rem}
.company__facts dt{font-family:var(--font-mono);font-size:var(--fs-meta);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-50);padding-top:.2rem}
.company__facts dd{margin:0;font-size:var(--fs-sm);overflow-wrap:anywhere}
.company__links{display:flex;flex-wrap:wrap;gap:.2rem 1.6rem}
.company__links a{font-size:var(--fs-sm)}
@media(min-width:900px){.company{grid-template-columns:12rem minmax(0,1fr) auto;align-items:start}.company__facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* long Dutch compounds ("Persoonsgegevens") at large text sizes: hyphenate, or break as a last resort */
.legal-sec,.docnav,.docsheet,.page-hero--legal,.company{hyphens:auto;overflow-wrap:break-word}
.legal-sec h2>:not(.num),.legal-sec h2{min-width:0;overflow-wrap:anywhere}

/* ==========================================================================
   Document map for the legal pages (legal.js). One system for both documents:
   desktop — a sticky rail: where you are (unit + title), how far you are, and the
             index with the current chapter open and the current item marked copper;
   phones  — a slim sticky bar (current item + "Inhoud") that opens a bottom sheet.
   The index is real links in the HTML; without JS the desktop rail is a plain list.
   ========================================================================== */
.docnav{display:none}
@media(min-width:960px){
  .docnav{display:block;position:sticky;top:calc(75px + 1.5rem);align-self:start;max-height:calc(100svh - 75px - 2.5rem);overflow-y:auto;
    scrollbar-width:thin;scrollbar-color:var(--rule) transparent;padding-right:.5rem;padding-bottom:1rem}
  .docnav::-webkit-scrollbar{width:4px}.docnav::-webkit-scrollbar-thumb{background:var(--rule);border-radius:4px}
}
.docnav__label{color:var(--ink-50);margin-bottom:1rem}
.docnav__total{color:var(--ink-30)}
/* the index */
.docnav__chapter+.docnav__chapter{margin-top:.15rem}
.docnav__head{display:flex;align-items:center;gap:.25rem}
.docnav__chapter-link{flex:1;display:flex;gap:.7rem;align-items:baseline;padding:.5rem 0;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-50)}
.docnav__chapter.is-current>.docnav__head .docnav__chapter-link{color:var(--ink)}
.docnav__chapter-link:hover,.docnav__chapter-link:focus-visible{color:var(--copper-text)}
.docnav__toggle{width:32px;height:32px;display:grid;place-items:center;color:var(--ink-50);border-radius:50%}
.docnav__toggle::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform var(--t)}
.docnav__toggle[aria-expanded="false"]::before{transform:translateY(1px) rotate(-45deg)}
.docnav__toggle:hover,.docnav__toggle:focus-visible{color:var(--copper-text)}
.docnav__articles{position:relative;border-left:1px solid var(--rule);margin:.1rem 0 .6rem}
.docnav__articles a{position:relative;display:flex;gap:.6rem;align-items:baseline;padding:.32rem 0 .32rem 1rem;font-size:var(--fs-sm);line-height:1.3;color:var(--ink-70)}
.docnav__articles a .num{font-size:.62rem;color:var(--ink-30);min-width:1.4rem}
.docnav__articles a::before{content:"";position:absolute;left:-1px;top:.25rem;bottom:.25rem;width:2px;background:var(--color-copper);transform:scaleY(0);transition:transform .25s var(--ease-out)}
.docnav__articles a:hover,.docnav__articles a:focus-visible{color:var(--copper-text)}
.docnav__articles a[aria-current]{color:var(--ink)}
.docnav__articles a[aria-current] .num{color:var(--copper-text)}
.docnav__articles a[aria-current]::before{transform:none}
/* chapter headings in the document */
.legal-chapter{scroll-margin-top:calc(75px + 1rem)}
.legal-chapter+.legal-chapter{margin-top:var(--s-4)}
.legal-chapter__title{display:grid;gap:.4rem;font-family:var(--font-display);font-weight:400;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.05;padding:var(--s-3) 0 .4rem;border-top:2px solid var(--ink)}
.legal-chapter__title .meta{color:var(--copper-text)}
.legal-chapter .legal-sec{border-top-color:var(--rule)}
.legal-sec h3{display:flex;gap:.9rem;align-items:baseline;font-family:var(--font-display);font-weight:400;font-size:clamp(1.35rem,1.9vw,1.6rem);line-height:1.15;margin-bottom:.9rem}
.legal-sec h3>:not(.num){min-width:0;overflow-wrap:anywhere}
.legal-sec h3 .num{flex:0 0 auto}
.legal-sec h2:focus,.legal-sec h3:focus,.legal-chapter__title:focus{outline:none}
.legal-sec ol ul{margin-top:.55rem}
.legal-sec h2,.legal-sec h3{scroll-margin-top:calc(75px + 1rem)}

/* phones: a slim bar under the header, the index opens as a sheet */
.docbar{display:none}
@media(max-width:959px){
  .legal{--docbar-h:3.6rem}
  .docbar{position:sticky;top:75px;z-index:20;display:flex;align-items:center;gap:.8rem;min-height:var(--docbar-h);
    margin-inline:calc(-1 * var(--gutter));padding:.5rem var(--gutter);background:var(--paper);border-bottom:1px solid var(--rule)}
  .legal-sec,.legal-chapter,.legal-sec h2,.legal-sec h3{scroll-margin-top:calc(75px + var(--docbar-h) + .8rem)}
}
.docbar__open{flex:0 0 auto;display:inline-flex;align-items:center;gap:.55rem;min-height:44px;padding:0 .95rem;border:1px solid var(--ink-30);border-radius:99px;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.docbar__open::before{content:"";width:12px;height:9px;background:linear-gradient(currentColor,currentColor) 0 0/100% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 50%/70% 1.5px no-repeat,linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat}
.docbar__open:hover,.docbar__open:focus-visible{border-color:var(--color-copper);color:var(--copper-text)}
@media (hover:none),(pointer:coarse){.docbar__open{border-color:var(--color-copper);color:var(--copper-text)}}

.docsheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:min(82svh,46rem);padding:0;border:0;
  border-radius:16px 16px 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -20px 50px -20px rgba(17,17,17,.4);overflow:hidden;display:none;flex-direction:column}
.docsheet[open]{display:flex;animation:sheetIn .28s var(--ease-out)}
.docsheet::backdrop{background:rgba(17,17,17,.45)}
@keyframes sheetIn{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.docsheet__head{display:flex;align-items:center;gap:1rem;padding:1rem var(--gutter) .9rem;border-bottom:1px solid var(--rule)}
.docsheet__head h2{font-family:var(--font-display);font-weight:400;font-size:1.6rem;line-height:1;flex:1}
.docsheet__close{min-height:44px;padding:0 .3rem;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-text)}
.docsheet__body{overflow-y:auto;overscroll-behavior:contain;padding:.6rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom))}
.docsheet__group+.docsheet__group{margin-top:.8rem}
.docsheet__group>p{padding:.7rem 0 .3rem;color:var(--ink-50)}
.docsheet__group>p .num{margin-right:.6rem}
.docsheet ol{border-left:1px solid var(--rule)}
.docsheet a{position:relative;display:flex;gap:.7rem;align-items:center;min-height:46px;padding:.35rem 0 .35rem 1rem;font-size:1rem;line-height:1.3;color:var(--ink-70)}
.docsheet a .num{font-size:.65rem;color:var(--ink-30);min-width:1.5rem}
.docsheet a[aria-current]{color:var(--ink);font-weight:600}
.docsheet a[aria-current] .num{color:var(--copper-text)}
.docsheet a[aria-current]::before{content:"";position:absolute;left:-1px;top:.4rem;bottom:.4rem;width:2px;background:var(--color-copper)}
.docsheet a:focus-visible{outline:2px solid var(--color-copper);outline-offset:-2px}
body:has(.docsheet[open]){overflow:hidden}
@media (prefers-reduced-motion:reduce){.docsheet[open]{animation:none}.docnav__articles a::before,.docnav__toggle::before{transition:none}}
/* an anchored item lands with its heading just under the header (and the bar on phones),
   not under the section's own top padding */
.legal-sec{scroll-margin-top:calc(75px + 1rem - var(--s-4))}
@media(max-width:959px){.legal-sec{scroll-margin-top:calc(75px + var(--docbar-h) + .6rem - var(--s-4))}}
/* very large text: chapter labels and the phone bar wrap instead of widening the page */
.legal-chapter__title>*{min-width:0;overflow-wrap:anywhere}
.legal__body>*{max-width:100%}
.legal-chapter__title{grid-template-columns:minmax(0,1fr);overflow-wrap:anywhere;hyphens:auto}

/* index chapters fold open and shut (legal.js): a short height animation, the items
   follow with a small stagger. Quick on purpose — readers scroll fast through terms. */
.docnav__fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows .28s cubic-bezier(.23,1,.32,1)}
.docnav__fold-inner{min-height:0;overflow:hidden}
.docnav.is-enhanced .docnav__chapter:not(.is-open) .docnav__fold{grid-template-rows:0fr;transition-duration:.22s}
.docnav.is-enhanced .docnav__articles li{transition:opacity .22s ease,transform .3s cubic-bezier(.23,1,.32,1);transition-delay:calc(var(--i,0) * 22ms + 40ms)}
.docnav.is-enhanced .docnav__chapter:not(.is-open) .docnav__articles li{opacity:0;transform:translateX(-8px);transition-delay:0s;transition-duration:.12s}
.docnav__chapter-link{transition:color .2s ease}
.docnav__chapter.is-current>.docnav__head .docnav__chapter-link .num{color:var(--copper-text)}
.docnav.is-instant *{transition:none!important}
@media (prefers-reduced-motion:reduce){.docnav__fold,.docnav.is-enhanced .docnav__articles li{transition:none}}
/* phones: the bar only names the document and opens the index */
.docbar__doc{flex:1;min-width:0;font-family:var(--font-display);font-size:1.15rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}