/* ==========================================================================
   WebRescue — Atelier
   Design system + components.  Single stylesheet, served from
   /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);
  /* anchors: the sticky header's height, and the editorial breathing room between it
     and the first line of a section a link lands on */
  --header-h:75px;
  --anchor-breath:clamp(1.5rem,2.6vw,2.5rem);

  --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{--pad-top:var(--section);padding-block:var(--pad-top) var(--section);position:relative}
.section--tight{--pad-top:clamp(3rem,6vw,5.5rem);padding-block:var(--pad-top)}
/* ANCHOR LANDING. A link lands on the section's CONTENT (its label row) at
   header + breathing room — never on the top of a large padding. Where a section's top
   padding is genuine (a colour band, a layer that slides over the hero) it stays, and
   the landing line is derived from that same padding token. Sections whose top padding
   only separated them from the previous section moved that space outside (see .svc). */
.section[id]{scroll-margin-top:calc(var(--header-h) + var(--anchor-breath) - var(--pad-top))}
.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 .lang a,.site-header.is-dark .burger{color:var(--color-ivory)}
.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;flex:0 0 auto}
.brand__logo{height:46px;width:auto}
.brand__logo--dark,.site-header.is-dark .brand__logo{display:none}
.site-header.is-dark .brand__logo--dark{display:block}
@media (max-width:899px){.brand__logo{height:42px}}
@media (max-width:359px){.brand__logo{height:38px}}
.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 ------------------------------------------------------------------
   Left: proposition → support → project CTA. Right: the code→site object (proof of
   craft) with the direct WhatsApp route under it. Priority: CTA, then the object,
   then WhatsApp. Desktop columns meet on the hero grid's centre line, so the object
   starts on a structural line instead of floating in the empty half. */
.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;display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"title" "body" "visual" "contact";
}
.hero__title{grid-area:title;font-size:var(--fs-hero)}
.hero__body{grid-area:body}
.hero__visual{grid-area:visual;position:relative;pointer-events:none;min-width:0}
.hero__contact{grid-area:contact}
/* 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%}}
/* ONE SAFE MASK for every display-type reveal (hero lines, SplitText line masks, the
   word masks of .split headings). The clip box sits outside the glyph outlines on all
   four sides, cancelled by negative margins so the layout never moves:
     above  .12em  accents and ascenders (É, b, l, k) at line-height .94
     below  .26em  descenders (g p j q y) reach ~.08em below the line box; the extra room
                   lets them clear the edge while the word is still settling, so a reveal
                   never lingers on a shaved descender
     sides  .1em   italic and serif overhang left of the advance box (the italic g and
                   the j hook overhang ~.075em; caps such as J, V, W ~.03em)
   Reveals start at ≥ 145% (the glyphs begin fully below the larger mask) and leave at
   ≤ −130% (fully above it). Measured: no ink outside its mask at rest on any page. */
:root{--mask-t:.12em;--mask-b:.26em;--mask-x:.1em}
.hero__title .line,.mline-mask{padding:var(--mask-t) var(--mask-x) var(--mask-b);margin:calc(-1 * var(--mask-t)) calc(-1 * var(--mask-x)) calc(-1 * var(--mask-b))}
.hero__title .line{display:block;overflow:hidden}
.hero__title .line>span{display:block}
.hero__title em{color:var(--color-copper)}
.hero__body{margin-top:clamp(1.25rem,4vw,3.2rem)}
.hero__sub{max-width:44ch;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}

/* WHATSAPP — the secondary, direct route. Matte moss instead of WhatsApp's signal green:
   the same brushed-material language as the copper CTA, but darker, flatter and smaller,
   so it reads as "contact" and never as the main action. White text ≥ 7:1 everywhere. */
.btn--wa{
  gap:.65em;min-height:48px;padding:.85em 1.25em .85em 1.05em;color:#F4F1E8;border-color:transparent;border-radius:2px;
  font-size:.72rem;letter-spacing:.14em;isolation:isolate;overflow:hidden;
  background:linear-gradient(112deg,#2E3B2A 0%,#3A4A33 34%,#47593F 56%,#3B4B35 78%,#32402D 100%);
  background-size:220% 100%;background-position:0% 50%;
  box-shadow:inset 0 1px 0 rgba(222,236,206,.16),inset 0 -1px 0 rgba(12,20,10,.35),0 10px 20px -16px rgba(30,44,26,.9);
  transition:background-position .7s var(--ease-out),transform var(--press),box-shadow var(--t);
}
.btn--wa::after{content:"";position:absolute;inset:3px;border:1px solid rgba(222,236,206,.1);pointer-events:none}
.btn--wa__icon{width:18px;height:18px;flex:none}
.btn--wa:hover,.btn--wa:focus-visible{color:#fff}
@media (hover:hover) and (pointer:fine){.btn--wa:hover{background-position:100% 50%;transform:translateY(-1px)}}
.btn--wa:active{transform:scale(.98)}
.btn--wa:focus-visible{outline:2px solid var(--color-carbon);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn--wa{transition:none}.btn--wa:hover{transform:none}}
.hero__contact{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.1rem}
.hero__call{font-size:var(--fs-sm);color:var(--ink-70);line-height:1.4}
.hero__call a{position:relative;color:var(--ink);white-space:nowrap;border-bottom:1px solid var(--color-copper);padding-bottom:.08em}
.hero__call a:hover{color:var(--copper-text)}
@media (hover:none),(pointer:coarse){.hero__call a::before{content:"";position:absolute;inset:-12px -8px}}

/* stacked (phones, portrait tablets): headline → support → CTA → object → WhatsApp.
   Tight vertical rhythm so the whole hero still fits one phone screen where it can. */
@media(max-width:899px){
  .hero{padding-block:clamp(1.25rem,5vw,3rem)}
  .hero__sub{max-width:40ch}
  .hero__cta{margin-top:1.15rem}
  .hero__visual{margin-top:clamp(1.1rem,4.5vw,2rem);width:100%;max-width:34rem}
  .hero__contact{margin-top:clamp(.8rem,3.4vw,1.3rem);flex-wrap:nowrap;gap:.9rem}
  /* the number sits beside the button on two short lines, so the row stays one button high */
  .hero__call{line-height:1.35}
  .hero__call a{display:table;margin-top:.1rem}
}

/* side by side: desktop, and wide-but-short screens (landscape phones) */
@media(min-width:900px),(min-width:640px) and (max-height:520px) and (orientation:landscape){
  .hero__inner{
    grid-template-columns:minmax(0,10fr) minmax(0,11fr);
    grid-template-areas:"title visual" "body contact";
    column-gap:clamp(2rem,4.2vw,4.5rem);align-items:end;
    container-type:inline-size;
  }
  /* the headline's widest line ("én winstgevend.") is ~5.2em: it is sized to its column
     and to the screen height, so the object never squeezes it */
  h1.display.hero__title{font-size:min(calc((100cqw - clamp(2rem,4.2vw,4.5rem)) * 10 / 21 / 5.75),11.4vh,9.5rem)}
  .hero__body{margin-top:clamp(1.25rem,3vh,2.6rem)}
  .hero__visual{align-self:center;margin-bottom:clamp(.5rem,1.6vh,1.5rem)}
  .hero__contact{align-self:end;padding-bottom:.35rem}
}
@media(min-width:900px){
  .hero{padding-top:clamp(2.25rem,5.5vh,6rem)}
  /* 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)}
}
/* 4:3-ish desktops (1024×768): the five-line headline is capped by height as well, so
   the CTA still arrives in the first screen */
@media(min-width:900px) and (max-aspect-ratio:3/2){
  h1.display.hero__title{font-size:min(calc((100cqw - clamp(2rem,4.2vw,4.5rem)) * 10 / 21 / 5.75),9.6vh,9.5rem)}
}
@media(min-width:640px) and (max-height:520px) and (orientation:landscape){
  /* the first screen is ~315px under the header: the text column is a little wider (the
     support copy sets in two lines) and the headline is capped a little lower, so the
     primary CTA lands inside the first screen */
  .hero{min-height:0;padding-block:1rem 1.5rem}
  h1.display.hero__title{font-size:min(8vh,6.4vw)}
  /* left: headline over support + CTA; right: the object over the WhatsApp route */
  .hero__inner{grid-template-columns:minmax(0,12fr) minmax(0,9fr);grid-template-areas:"title visual" "body visual" "body contact";grid-template-rows:auto 1fr auto;align-items:start}
  .hero__body{margin-top:.6rem}
  /* (width:100% also on landscape phones wider than 900px, e.g. 915×412, where the
     phone rule that sets it does not apply) */
  .hero__visual{width:100%;max-width:92vh;justify-self:end;align-self:start;margin-bottom:.8rem}
  .hero__contact{margin-top:0}
  .hero__sub{font-size:.9rem;line-height:1.45;max-width:none}
  .hero__go{width:auto;font-size:.95rem;min-height:48px;margin-top:.6rem}
}

/* THE OBJECT — a WebRescue editor that becomes a WebRescue page. Everything is sized in
   container units (cqw) of the frame, so one design scales from phone to 1920.
   Resting state (no JS, reduced motion, and the end of the autoplay) = the finished
   site; the editor layer only exists while motion/hero-visual.js is building. */
.hv{
  position:relative;border-radius:10px;overflow:hidden;background:#2a2622;container-type:inline-size;
  box-shadow:0 0 0 1px rgba(17,17,17,.1),0 2px 3px rgba(17,17,17,.05),0 46px 80px -50px rgba(40,26,14,.62);
  transform-origin:100% 50%;
}
.hv__bar{display:flex;align-items:center;gap:6px;height:max(26px,4.6cqw);padding-inline:max(10px,1.9cqw);background:#2a2622}
.hv__bar i{width:max(7px,1.3cqw);height:max(7px,1.3cqw);border-radius:50%;background:rgba(245,242,236,.22);flex:none}
.hv__chip{display:grid;place-items:center;margin-inline:auto;min-width:34%;height:max(16px,2.9cqw);padding-inline:1.2em;border-radius:99px;background:rgba(245,242,236,.08);font-family:var(--font-mono);font-size:max(9px,1.55cqw);letter-spacing:.04em;color:rgba(245,242,236,.7);overflow:hidden}
.hv__chip>span{grid-area:1/1;white-space:nowrap}
.hv__tab{visibility:hidden}
.hv__view{position:relative;aspect-ratio:16/10.4;overflow:hidden;background:var(--color-ivory)}

/* editor layer */
.hv__code{
  display:none;position:absolute;inset:0;margin:0;padding:3.4cqw 0 0;list-style:none;counter-reset:ln;
  background:#1D1A17;font-family:var(--font-mono);font-size:2.02cqw;line-height:2.05;color:rgba(245,242,236,.9);
}
.hv.is-live .hv__code{display:block}
.hv__code li{position:relative;padding-left:7.2cqw;padding-right:2cqw;white-space:pre;overflow:hidden;counter-increment:ln}
.hv__code li::before{content:counter(ln);position:absolute;left:0;width:4.4cqw;text-align:right;color:rgba(245,242,236,.22)}
.hv__code li.is-active{background:rgba(185,120,69,.12)}
.hv__code b,.hv__code u,.hv__code s{font-weight:400;font-style:normal;text-decoration:none}
.hv__code b{color:rgba(245,242,236,.5)}          /* structure: tags */
.hv__code u{color:#C98A57}                        /* key tokens: attributes */
.hv__code s{color:#E4B78E}                        /* values */
.hv__code .t{display:inline-block;vertical-align:top}
/* (the editor is no stacking context: the key lines can lift above the rising page) */
.hv__code li.is-lifting{background:transparent!important;overflow:visible}
.hv__code li.is-lifting .t{color:rgba(17,17,17,.82);transition:color .35s var(--ease-out)}
.hv__code li.is-lifting b{color:rgba(17,17,17,.42);transition:color .35s var(--ease-out)}
.hv__code li.is-lifting u,.hv__code li.is-lifting s{color:var(--copper-text);transition:color .35s var(--ease-out)}
.hv__caret{display:none;position:absolute;left:0;top:0;z-index:6;width:max(2px,.32cqw);height:2.6cqw;background:var(--color-copper);transform-origin:50% 0}
.hv.is-live .hv__caret{display:block}

/* site layer */
.hv__paper{position:absolute;inset:0;z-index:2;background:var(--color-ivory)}
.hv__rules{position:absolute;inset:0;z-index:3}
.hv__rules i{position:absolute;top:0;bottom:0;width:1px;background:rgba(17,17,17,.075)}
.hv__rules i:nth-child(1){left:16.6667%}.hv__rules i:nth-child(2){left:33.3333%}.hv__rules i:nth-child(3){left:50%}
.hv__rules i:nth-child(4){left:66.6667%}.hv__rules i:nth-child(5){left:83.3333%}
.hv__site{position:absolute;inset:0;z-index:4;color:var(--color-carbon)}
.hv__site p{margin:0}
.hvs__nav{position:absolute;left:0;right:0;top:0;height:7.4cqw;display:flex;align-items:center;gap:2.4cqw;padding-inline:4cqw;border-bottom:1px solid rgba(17,17,17,.08);background:rgba(245,242,236,.9)}
.hvs__logo{font-family:var(--font-display);font-weight:400;font-size:2.4cqw;letter-spacing:-.01em;line-height:1}
.hvs__logo span{color:var(--color-copper)}
.hvs__links{display:flex;gap:2.2cqw;margin-inline-start:auto;font-family:var(--font-mono);font-size:1.05cqw;letter-spacing:.16em;text-transform:uppercase;color:rgba(17,17,17,.72)}
.hvs__links span:first-child{color:var(--copper-text)}
.hvs__navcta{font-family:var(--font-mono);font-size:1.02cqw;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:.85cqw 1.3cqw;border-radius:2px;background:linear-gradient(112deg,#74462A,#A1683C 56%,#7A4A2B)}
.hvs__title{position:absolute;left:4cqw;top:12.6cqw;width:44cqw;font-family:var(--font-display);font-size:5.05cqw;line-height:.94;letter-spacing:-.015em}
.hvs__title>span{display:block}
.hvs__title em{color:var(--color-copper)}
.hvs__sub{position:absolute;left:4cqw;top:40.4cqw;width:38cqw;font-size:1.42cqw;line-height:1.5;color:rgba(17,17,17,.7)}
.hvs__cta{position:absolute;left:4cqw;top:49.6cqw;display:flex;align-items:center;gap:1.6cqw;padding:1.15cqw 1.7cqw 1.15cqw 2cqw;border-radius:2px;font-size:1.4cqw;font-weight:500;color:#fff;
  background:linear-gradient(112deg,#74462A 0%,#8A5632 32%,#A1683C 56%,#8E5A33 78%,#7A4A2B 100%);box-shadow:0 1.4cqw 2.6cqw -1.8cqw rgba(92,52,24,.95)}
/* the page shows itself: a smaller frame on the right, like this one */
.hvs__mini{position:absolute;left:53.5cqw;top:14.5cqw;width:42.5cqw;height:31cqw;border-radius:1cqw;overflow:hidden;background:#EFEBE3;box-shadow:0 0 0 1px rgba(17,17,17,.08),0 2.6cqw 4cqw -2.8cqw rgba(40,26,14,.6)}
.hvs__mini span:first-child{position:absolute;left:0;right:0;top:0;height:3.2cqw;background:#2a2622}
.hvs__mini span:last-child{position:absolute;left:3cqw;top:6.6cqw;width:19cqw;height:14cqw;
  background:linear-gradient(rgba(17,17,17,.82) 0 0) 0 0/88% 1.9cqw no-repeat,linear-gradient(rgba(17,17,17,.82) 0 0) 0 2.9cqw/66% 1.9cqw no-repeat,linear-gradient(var(--color-copper) 0 0) 0 5.8cqw/78% 1.9cqw no-repeat,linear-gradient(rgba(17,17,17,.2) 0 0) 0 9cqw/92% .5cqw no-repeat,linear-gradient(rgba(17,17,17,.2) 0 0) 0 10.2cqw/74% .5cqw no-repeat,linear-gradient(#8A5632 0 0) 0 12.2cqw/46% 1.8cqw no-repeat}

/* phones: fewer code lines, larger type in the editor, a shorter frame */
@media(max-width:639px){
  .hv__view{aspect-ratio:16/9}
  .hv__code{font-size:2.85cqw;padding-top:3.8cqw}
  .hv__code li{padding-left:8.6cqw}
  .hv__code li::before{width:5.4cqw}
  .hv__code li[data-m="0"]{display:none}
  .hv__caret{height:3.6cqw}
}
/* before the autoplay takes over (and as the fallback when it never does) the object
   simply arrives finished; motion/hero-visual.js cancels this the moment it starts */
.hv{animation:hv-arrive .7s var(--ease-out) 1.5s both}
.hv.is-played{animation:none}
@keyframes hv-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hv{animation:fadeIn .35s ease .15s both}}

/* 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 (work viewer) ---------------------------------------------------
   One scroll area only: the overlay and the shell never scroll, the website preview
   flexes into the remaining height and is the single vertical scroller. Everything
   above it (top bar, project head, hint) is compact so the preview keeps most of the
   screen. min-height:0 down the flex chain lets the preview shrink instead of pushing
   the shell into overflow. */
.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 0s linear .25s;
  overflow:hidden;overscroll-behavior:none;
}
/* visible at once when opening (focus can only move into a visible dialog), hidden only
   after the fade when closing */
.modal.is-open{opacity:1;visibility:visible;transition:opacity .25s var(--ease-out),visibility 0s}
.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%);
  height:100dvh;display:flex;flex-direction:column;overflow:hidden;
  padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(12px) scale(.96);transition:transform .35s var(--ease-out);
}
@media(min-width:900px) and (min-height:560px){.modal__dialog{height:min(92dvh,940px);margin-block:auto;border-radius:var(--radius-lg)}}
.modal.is-open .modal__dialog{transform:none}

/* HEADER GRID — the controls row shares the content's edges: the project switcher starts
   on the left gutter, Sluiten ends on the right gutter, both 48px tall and centred on one
   line, with real air above them (plus the safe areas). Nothing scrolls away. */
.modal__top{
  --mx:calc(var(--gutter) + env(safe-area-inset-left));--mxr:calc(var(--gutter) + env(safe-area-inset-right));
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);
  padding:calc(clamp(.7rem,2.2vw,1.6rem) + env(safe-area-inset-top)) var(--mxr) clamp(.55rem,1vw,.8rem) var(--mx);
}
/* PROJECT SWITCHER — two real controls with the position between them: [←] 01 / 04 [→].
   Framed 44px squares (48 on wide screens), ink arrows; on hover/focus the frame turns
   copper and the arrow leans in its own direction. Touch screens show the frames from
   the start. The count is for reading (the live region announces each switch). */
.modal__nav{display:flex;align-items:center;gap:.5rem}
.modal__nav[hidden]{display:none}
.modal__step{
  width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex:none;
  border:1px solid var(--ink-30);border-radius:2px;color:var(--ink);
  transition:color var(--t-fast),background-color var(--t-fast),border-color var(--t-fast),transform var(--press);
}
.modal__step-a{font-family:var(--font-mono);font-size:1rem;line-height:1;transition:transform .32s var(--ease-out)}
.modal__step:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .modal__step:hover{color:var(--copper-text);border-color:var(--color-copper);background-color:rgba(185,120,69,.07)}
  .modal__step--prev:hover .modal__step-a{transform:translateX(-3px)}
  .modal__step--next:hover .modal__step-a{transform:translateX(3px)}
}
.modal__step:focus-visible{outline:2px solid var(--color-copper);outline-offset:2px;border-color:var(--color-copper);color:var(--copper-text)}
.modal__count{display:flex;align-items:baseline;gap:.45rem;padding-inline:.35rem;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.12em;color:var(--ink-50);font-variant-numeric:tabular-nums}
.modal__count b{font-weight:500;color:var(--ink)}
.modal__count-sep{width:1.1rem;height:1px;background:var(--color-copper);align-self:center}
@media(min-width:900px){.modal__step{width:48px;height:48px}.modal__count{font-size:.8125rem}}

/* CLOSE — a real control, not a footnote: label + a framed ✕, 48px tall.
   Pointer screens: ink at rest; on hover the label turns copper, its underline draws
   in, the frame warms and the ✕ turns a few degrees. Touch screens get that finished
   state from the start — there is no hover to discover it. */
.modal__close{
  display:inline-flex;align-items:center;gap:.8rem;min-height:44px;padding:0 0 0 .9rem;
  font-family:var(--font-mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  transition:color var(--t-fast),transform var(--press);
}
.modal__close-l{position:relative;padding-block:.3em}
.modal__close-l::after{
  content:"";position:absolute;left:0;right:.16em;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .32s var(--ease-out);
}
.modal__close-x{
  --xr:0deg;--xx:0px;
  position:relative;width:44px;height:44px;flex:none;border:1px solid var(--ink-30);border-radius:2px;
  transition:border-color var(--t),background-color var(--t);
}
@media(min-width:900px){.modal__close-x{width:48px;height:48px}}
/* the frame stays still; only the ✕ inside turns a few degrees and steps aside */
.modal__close-x::before,.modal__close-x::after{
  content:"";position:absolute;left:50%;top:50%;width:17px;height:1.5px;background:currentColor;
  transform:translate(calc(-50% + var(--xx)),-50%) rotate(calc(45deg + var(--xr)));transition:transform .38s var(--ease-out);
}
.modal__close-x::after{transform:translate(calc(-50% + var(--xx)),-50%) rotate(calc(-45deg + var(--xr)))}
.modal__close:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .modal__close:hover{color:var(--copper-text)}
  .modal__close:hover .modal__close-l::after{transform:scaleX(1)}
  .modal__close:hover .modal__close-x{--xr:12deg;--xx:1px;border-color:var(--color-copper);background-color:rgba(185,120,69,.07)}
}
.modal__close:focus-visible{outline:2px solid var(--color-copper);outline-offset:2px;color:var(--copper-text)}
.modal__close:focus-visible .modal__close-l::after{transform:scaleX(1)}
@media (hover:none),(pointer:coarse){
  .modal__close{color:var(--copper-text)}
  .modal__close-l::after{transform:scaleX(1)}
  .modal__close-x{border-color:var(--color-copper);background-color:rgba(185,120,69,.07)}
}

.modal__body{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  padding:0 calc(var(--gutter) + env(safe-area-inset-right)) clamp(.75rem,1.8vw,1.5rem) calc(var(--gutter) + env(safe-area-inset-left));
}
.modal__body.is-swap{animation:modal-swap .4s var(--ease-out)}
@keyframes modal-swap{from{opacity:.25;transform:translateY(6px)}to{opacity:1;transform:none}}

/* HEAD — category → title → signature → rule → content. The gaps follow the type's
   visible bounds, not its boxes: the title is set at line-height .96, so its cap line sits
   ~.12em below its box and its descenders reach ~.2em below the baseline. Category to
   cap line ≈ .7rem; descender to signature ≈ .75rem; the signature closes the head and
   the rule follows a beat later; the content starts a slightly larger beat after it. */
.modal__head{flex:none;display:grid;justify-items:start;padding-bottom:clamp(.85rem,1.6vw,1.35rem);border-bottom:1px solid var(--rule);margin-bottom:clamp(.9rem,1.8vw,1.5rem)}
.modal__head>.meta{margin-bottom:.3rem}
.modal__title{font-size:clamp(2.1rem,8.6vw,4.6rem);line-height:.96;overflow-wrap:break-word}
@media(min-width:900px){.modal__title{font-size:clamp(3rem,5.2vw,5rem)}}
/* the studio signature: a copper rule on the label's x-height, the mono label and the
   wordmark share one baseline */
.modal__sig{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .7rem;margin-top:calc(.75rem - .1em);color:var(--copper-text)}
.modal__sig::before{content:"";width:1.6rem;height:1px;background:var(--color-copper);align-self:center;transform:translateY(.05em)}
.modal__sig-l{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase}
.modal__sig-mark{font-family:var(--font-display);font-size:1.18rem;line-height:1;letter-spacing:-.005em;color:var(--ink)}
.modal__sig-mark span{color:var(--color-copper)}

/* CONTENT — wide screens and phones held sideways: preview left, project info right.
   The instruction belongs to the preview column only; the description starts level with
   the preview's top edge (it is pushed down by exactly the instruction row), and the
   project CTA follows the facts. */
.modal__cols{--hint-h:2.5rem;flex:1 1 auto;min-height:0;display:grid}
.modal__gallery{min-height:0;min-width:0;display:flex;flex-direction:column}
.modal__hint{flex:none;position:relative;display:flex;align-items:center;height:var(--hint-h);padding-bottom:.4rem}
.modal__hint-l{display:flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-50);white-space:nowrap;transition:opacity .25s var(--ease-out)}
.modal__hint-l--info{position:absolute;left:0;top:0;bottom:.4rem;opacity:0;color:var(--copper-text)}
.modal__hint-i{position:relative;width:11px;height:15px;border:1px solid currentColor;border-radius:6px;flex:none}
.modal__hint-i::after{content:"";position:absolute;left:50%;top:3px;width:1px;height:3px;margin-left:-.5px;background:var(--color-copper)}
.modal__frame{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.browser--modal{transform:none!important;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;clip-path:none!important}
.browser--modal .browser__bar{flex:none}
.browser--modal .browser__view{
  flex:1 1 auto;min-height:0;aspect-ratio:auto;height:auto;overflow-y:auto;overflow-x:hidden;container-type:normal;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.browser--modal .browser__view:focus-visible{outline:2px solid var(--color-copper);outline-offset:-2px}
.browser--modal .browser__inner,.browser--modal .browser__shot{transform:none!important;transition:none}
.modal__info{min-height:0;overflow-y:auto;overscroll-behavior:contain;outline:none}
.modal__info .body-lg{margin-top:-.28em}
.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)}
.modal__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2)}
.modal__about{
  display:none;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-text);white-space:nowrap;
  min-height:44px;padding-inline:.1rem .25rem;
}
.modal__about-l,.modal__about-s{background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.3em}
.modal__about-s{display:none}
/* the switch glyph: two short rules that swap places — "the other side of this project" */
.modal__about-i{position:relative;width:14px;height:9px;flex:none}
.modal__about-i::before,.modal__about-i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .3s var(--ease-out)}
.modal__about-i::before{top:1px;right:4px}.modal__about-i::after{bottom:1px;left:4px}
.modal.shows-info .modal__about-i::before{transform:translateX(4px)}.modal.shows-info .modal__about-i::after{transform:translateX(-4px)}
.modal .modal__cta{white-space:nowrap;flex:none}

@media(min-width:860px),(min-width:600px) and (max-height:500px){
  .modal__cols{grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);grid-template-rows:minmax(0,max-content) auto minmax(0,1fr);column-gap:var(--s-5)}
  .modal__gallery{grid-column:1;grid-row:1/-1}
  .modal__info{grid-column:2;grid-row:1;margin-top:var(--hint-h)}
  .modal__actions{grid-column:2;grid-row:2;justify-content:flex-start;padding-top:clamp(1.25rem,2.4vw,2rem)}
}
/* PHONES (portrait): one column — instruction, then the website OR the project info in
   the same place, then a bar that never swaps: the Site / Projectinfo switch and the
   project CTA, so the way into a brief is visible in both modes without opening anything. */
@media(max-width:859px) and (min-height:501px),(max-width:599px){
  .modal__cols{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  .modal__gallery{display:contents}
  .modal__hint{grid-row:1;grid-column:1}
  .modal__frame,.modal__info{grid-row:2;grid-column:1}
  .modal__actions{grid-row:3;grid-column:1;padding-top:.7rem}
  .modal__about{display:inline-flex}
  .modal__cta{min-height:44px;padding:.8em 1.15em;font-size:.6875rem}
  .modal__info{visibility:hidden;padding-top:.15rem}
  .modal__info .body-lg{font-size:1rem}
  .modal.shows-info .modal__frame:not(.is-leaving){visibility:hidden}
  .modal.shows-info .modal__info,.modal__info.is-leaving{visibility:visible}
  .modal.shows-info .modal__hint-l--site{opacity:0}
  .modal.shows-info .modal__hint-l--info{opacity:1}
}
/* small phones: tighter head so the preview keeps most of the height */
@media(max-width:400px),(max-height:620px){
  .modal__title{font-size:clamp(1.8rem,9vw,2.5rem)}
  .modal__sig{margin-top:calc(.55rem - .1em)}
  .modal__sig-mark{font-size:1.05rem}
  .modal__sig-l{font-size:.625rem;letter-spacing:.14em}
  .modal__hint-l,.modal__about{font-size:.625rem;letter-spacing:.1em}
  .modal__close{gap:.6rem;min-height:44px}
  .modal__cols{--hint-h:2.1rem}
}
/* short phones (≤ 700px tall): every row of chrome gives a little back to the preview */
@media(max-width:859px) and (max-height:700px) and (min-height:501px){
  .modal__top{padding-block:calc(.5rem + env(safe-area-inset-top)) .35rem}
  .modal__head{padding-bottom:.6rem;margin-bottom:.5rem}
  .modal__head>.meta{margin-bottom:.1rem}
  .modal__sig{margin-top:calc(.4rem - .1em)}
  .modal__cols{--hint-h:1.75rem}
  .modal__hint{padding-bottom:.25rem}
  .modal__actions{padding-top:.45rem}
  .modal__body{padding-bottom:calc(.5rem + env(safe-area-inset-bottom) * 0)}
}
@media(max-width:374px){
  .modal__about-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .modal__about-s{display:inline}
  .modal__close{gap:.5rem;letter-spacing:.12em}
  .modal__nav{gap:.25rem}
  .modal__count{padding-inline:.15rem;gap:.3rem}
  .modal__count-sep{width:.7rem}
  .modal__cta{padding-inline:.95em}
}
/* short desktops (≈720px tall): a tighter head so the preview keeps more than half */
@media(min-width:900px) and (max-height:820px){
  .modal__top{padding-block:calc(.75rem + env(safe-area-inset-top)) .5rem}
  .modal__title{font-size:min(5vw,7.6vh)}
  .modal__sig{margin-top:calc(.55rem - .1em)}
  .modal__head{padding-bottom:.75rem;margin-bottom:.85rem}
}
/* landscape phones: head in one row (category, title, signature), controls tight */
@media(max-height:500px) and (min-width:600px){
  .modal__top{padding-block:calc(.35rem + env(safe-area-inset-top)) .3rem}
  .modal__step,.modal__close-x{width:40px;height:40px}
  .modal__close{min-height:44px}
  .modal__head{grid-template-columns:auto auto minmax(0,1fr);align-items:baseline;column-gap:var(--s-3);padding-bottom:.45rem;margin-bottom:.5rem}
  .modal__head>.meta{margin-bottom:0}
  .modal__title{font-size:1.75rem}
  .modal__sig{margin-top:0}
  .modal__cols{--hint-h:1.9rem}
  .modal__info .body-lg{font-size:.9rem;line-height:1.45}
  /* facts as two compact lines, so the info column rarely needs to scroll */
  .modal__facts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem .8rem;margin-top:.7rem}
  .modal__facts dt{margin-top:0;padding-top:.2em}
  .modal__facts dd{margin:0;font-size:.8125rem}
  .modal__actions{padding-top:.9rem}
  .modal__cta{min-height:44px;padding:.8em 1.15em;font-size:.6875rem}
  .modal__body{padding-bottom:.55rem}
}

/* 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;margin-bottom:1rem}
.footer-brand img{height:52px;width:auto}
.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}
/* the two long pages (Grachtzicht, Klei & Co) browse from top to bottom while their row is
   active: their rows leave room below them, so the page travels at a readable pace */
html[data-services-sequence="mobile"] .services__item:nth-child(2){margin-bottom:30vh}
html[data-services-sequence="mobile"] .services__item:nth-child(3){margin-bottom:42vh}
/* 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;scroll-margin-top:0}
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:var(--mask-t) var(--mask-x) var(--mask-b);margin:calc(-1 * var(--mask-t)) calc(-1 * var(--mask-x)) calc(-1 * var(--mask-b))}
.split .w>span{display:inline-block;transform:translateY(145%);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(145%);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-line:nth-child(5)>span{animation-delay:.28s}
.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}
  .modal__body.is-swap{animation:none}
  .modal__close,.modal__close-l::after,.modal__close-x{transition:none}
  .modal__close:hover .modal__close-x{--xr:0deg;--xx:0px}
  .modal__close-x::before,.modal__close-x::after{transition:none}
  .modal__step,.modal__step-a,.modal__about-i::before,.modal__about-i::after,.modal__hint-l{transition:none}
  .modal__step:hover .modal__step-a{transform:none!important}
  .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}
/* Diensten services. The space above a service on the shared paper was a large
   padding-top doing two jobs (separating it from the previous service AND being the
   anchor's top edge), so #seo landed half a screen above its title. The separation is
   now an external margin; inside, only the breathing room the label needs. Same total
   distance, so the page looks and scrolls exactly as before. */
.svc{--svc-pad:clamp(4rem,8vw,7.5rem);padding-block:var(--anchor-breath) var(--svc-pad);margin-top:calc(var(--svc-pad) - var(--anchor-breath));overflow-x:clip}
.svc[id]{scroll-margin-top:var(--header-h)}
/* colour bands (lokale SEO, redesign): the top padding paints the band, so it is genuine */
.svc--band{--pad-top:var(--svc-pad);padding-top:var(--svc-pad);margin-top:0}
.svc--band[id]{scroll-margin-top:calc(var(--header-h) + var(--anchor-breath) - var(--svc-pad))}
.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)}
}
/* the photo of each card; its <picture> wrapper does not take part in the layout */
.atlas__item>picture{display:contents}
.atlas__frag{width:100%;height:auto;aspect-ratio:1600/1076;object-fit:cover;display:block;border:1px solid var(--rule);background:#e9e1d4}
.atlas__slot{display:none}
.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:.45rem;margin-block:.3rem .55rem}
/* FEATURE CHIPS — information, not controls: each quality is its own small printed label
   (hairline copper edge, a breath of paper highlight). No pointer, no hover, no press, no
   focus: the only interactive things on the card stay the link and the index. */
.atlas__proof li{
  display:inline-flex;align-items:center;padding:.44rem .7rem .4rem;cursor:default;
  font-family:var(--font-mono);font-size:.64rem;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-70);
  border:1px solid rgba(185,120,69,.42);border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.15));box-shadow:inset 0 1px 0 rgba(255,255,255,.75)
}
/* THE ACTIVE NUMBER — "this is service 02 of 08", readable at a glance. Phones and the
   plain list: a solid copper numeral. The pinned desktop atlas: a large outlined numeral
   (see below), secondary to the title in weight, much stronger than the index. Its digits
   sit in a safe mask so they can roll from one service to the next. */
.atlas__num{display:flex;align-items:baseline;gap:.55rem;color:var(--copper-text)}
.atlas__num-mask{display:inline-block;overflow:clip;padding:var(--mask-t) var(--mask-x) var(--mask-b);margin:calc(-1 * var(--mask-t)) calc(-1 * var(--mask-x)) calc(-1 * var(--mask-b))}
.atlas__num-n{display:inline-block;font-family:var(--font-display);font-weight:400;font-size:2.5rem;line-height:.82;letter-spacing:-.02em;color:var(--color-copper)}
.atlas__num-of{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;color:var(--ink-50)}

/* Desktop: the pinned atlas. Index | active copy | the slot where the sheets live.
   The stage is as tall as the composition needs (not a full viewport) and holds centred
   in the space under the header (diensten.js), so it follows the page hero with ordinary
   breathing room. All three regions share the stage's vertical centre; the sheets are
   fitted into the slot (the third column) and centred in it by the 3D scene. */
html[data-atlas="3d"] .atlas,html[data-atlas="2d"] .atlas{padding:var(--anchor-breath) 0 0}
html[data-atlas="3d"] .atlas__stage,html[data-atlas="2d"] .atlas__stage{
  --atlas-h:min(calc(100vh - var(--header-h)),clamp(30rem,62vh,46rem));
  height:var(--atlas-h);display:flex
}
html[data-atlas="3d"] .atlas__grid,html[data-atlas="2d"] .atlas__grid{
  width:100%;height:100%;grid-template-columns:minmax(8.5rem,11rem) minmax(0,25rem) 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,25rem) 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__num-n,html[data-atlas="2d"] .atlas__num-n{
  font-size:clamp(4.2rem,min(7.4vw,12.5vh),8rem);line-height:.8;
  color:rgba(185,120,69,.07);-webkit-text-stroke:1.2px var(--color-copper);paint-order:stroke fill
}
html[data-atlas="3d"] .atlas__num-of,html[data-atlas="2d"] .atlas__num-of{font-size:.7rem}
html[data-atlas="3d"] .atlas__copy,html[data-atlas="2d"] .atlas__copy{row-gap:.9rem}
html[data-atlas="3d"] .atlas__num,html[data-atlas="2d"] .atlas__num{margin-bottom:.15rem}
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%,calc(var(--atlas-h) * .62 * 1600 / 1076));box-shadow:0 30px 60px -40px rgba(17,17,17,.55);border-color:var(--color-copper)}
.atlas__space{position:relative;pointer-events:none}
/* the canvas reaches past the stage (up to the header, out to the page edge) so sheets
   travelling in depth are never cut by its edges; the composition itself is the slot */
html[data-atlas="3d"] .atlas__space{
  grid-column:2/4;grid-row:1;align-self:stretch;z-index:1;
  margin-inline:18% calc(-1 * var(--gutter));margin-block:calc(-1 * var(--atlas-bleed,12vh))
}
html[data-atlas="3d"] .atlas__slot{display:block;grid-column:3;grid-row:1;align-self:stretch;margin-block:clamp(1rem,4vh,2.5rem);pointer-events:none;visibility:hidden}
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__item[data-surface="ink"] .atlas__proof li{border-color:rgba(201,138,87,.5);background:rgba(245,242,236,.05);box-shadow:inset 0 1px 0 rgba(245,242,236,.08)}
html[data-atlas="deck"] .atlas__frag{aspect-ratio:3/2;object-fit:cover;object-position:50% 50%;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}
/* start states of the pinned SEO sequence (motion/diensten.js tweens from these) */
html[data-seo="pin"] .serp{clip-path:inset(0% 0% 100% 0%)}
html[data-seo="pin"] .serp-hit,html[data-seo="pin"] .serp__foot,html[data-seo="pin"] .serp-hit__flag,html[data-seo="pin"] .seo__source{opacity:0}
html[data-seo="pin"] .serp-hit--strong{--ring:0}
html[data-seo="pin"] .seo__factors li{clip-path:inset(0% 100% 0% 0%)}

/* ==========================================================================
   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}
/* nested anchor targets (#hosting, #onderhoud, #support, #maatwerk) used to land under the sticky header */
.after__row[id]{scroll-margin-top:calc(var(--header-h) + var(--anchor-breath) - var(--s-3))}
.pack-custom[id]{scroll-margin-top:calc(var(--header-h) + var(--anchor-breath))}
.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,21rem) minmax(0,1fr)}
  html[data-atlas="3d"] .atlas__item,html[data-atlas="2d"] .atlas__item{grid-template-columns:minmax(0,21rem) 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{padding-top:3rem}
html[data-atlas-stage] .atlas__stage{display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:.75rem 2.75rem}
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__copy{padding:.9rem 1rem 1rem;gap:.45rem}
  html[data-atlas-stage] .atlas__name{font-size:1.7rem}
}

/* 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{--axis-h:3.6rem;position:sticky;top:var(--header-h);z-index:4;background:var(--paper);height:var(--axis-h);box-shadow:0 1px 0 var(--rule)}
/* the sticky axis sits under the header here, so the rows' anchors land below both */
html[data-after="time"] .after__row[id]{scroll-margin-top:calc(var(--header-h) + 3.6rem + var(--anchor-breath) - var(--s-3))}
.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)}
html[lang="fr"] #support.is-ended .after__price::after{content:" · terminé, puis maintenance"}
html[lang="en"] #support.is-ended .after__price::after{content:" · completed, then maintenance"}
html[lang="ar"] #support.is-ended .after__price::after{content:" · انتهى، ثم الصيانة"}

/* ==========================================================================
   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}
}

/* 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){
  .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)}
/* translated legal pages: the note that the binding text was written in Dutch, under Dutch law */
.page-hero--legal .legal__l10n{margin-top:var(--s-2);max-width:62ch;font-size:var(--fs-sm);color:var(--ink-70)}
.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}