/* AVALA Services — kleurhoofdstukken uit de lucht boven de Avala-top.
   Alle kleuren en fonts lopen via tokens; elke sectie staat tussen <!-- section:x --> markeringen
   zodat hij later een eigen WordPress-blok/pattern wordt. */

/* ---------- tokens ---------- */
:root {
  /* merk + lucht uit de hero-foto (gemeten), licht → donker */
  --paper: #F3EFE8;   /* warm wit, merk */
  --white: #FFFFFF;   /* wit, merk */
  --sun:   #F98320;   /* zonsondergang, foto — ook het accent */
  --sky:   #27609B;   /* Avala-blauw, foto */
  --dusk:  #18335F;   /* schemer, foto */
  --night: #11191F;   /* donker, merk */

  --accent: var(--sun);
  --accent-ink: var(--night);

  --font: "Albert Sans", "Helvetica Neue", Arial, sans-serif;

  /* zes stappen, meer niet */
  --step-small: 0.9375rem;                                  /* 15 */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* 17–19 */
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);    /* 20–26 */
  --step-title: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);        /* 24–40 */
  --step-head: clamp(2.5rem, 1rem + 4.4vw, 4.25rem);        /* 40–68 */
  --step-display: clamp(3.25rem, 1rem + 8.6vw, 8.25rem);    /* 52–132 */

  --margin: clamp(1rem, 2.4vw, 2.25rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(7rem, 12vw, 12rem);
  --cut: 14px;                    /* de Λ-afsnede: de enige vorm op de site */
  --bar-h: 4.5rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--sky) var(--paper); }
body { margin: 0; background: var(--paper); color: var(--night); font-family: var(--font); font-size: var(--step-body); line-height: 1.5; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; overflow-x: clip; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: calc(var(--bar-h) + 1rem); }
::selection { background: var(--sun); color: var(--night); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.on-sun :focus-visible, [data-field="sun"] :focus-visible { outline-color: var(--night); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--margin); top: -4rem; z-index: 100; background: var(--night); color: var(--paper); padding: 0.75rem 1rem; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; }
.display { font-size: var(--step-display); line-height: 0.96; letter-spacing: -0.04em; }
.head { font-size: var(--step-head); line-height: 1.02; }
.title { font-size: var(--step-title); line-height: 1.05; letter-spacing: -0.03em; }
.lead { font-size: var(--step-lead); line-height: 1.35; max-width: 34ch; font-weight: 500; letter-spacing: -0.01em; }
.small { font-size: var(--step-small); line-height: 1.45; }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
.nums { font-variant-numeric: tabular-nums; }

/* ---------- velden (hoofdstukken) ---------- */
[data-field] { background: var(--f-bg); color: var(--f-ink); }
[data-field="paper"] { --f-bg: var(--paper); --f-ink: var(--night); --f-soft: #4A5056; --f-step: #E7E1D6; }
[data-field="white"] { --f-bg: var(--white); --f-ink: var(--night); --f-soft: #4A5056; --f-step: #F1EEE8; }
[data-field="deep"]  { --f-bg: #0B1116; --f-ink: var(--paper); --f-soft: #B9BEC4; --f-step: #19232C; }
[data-field="night"] { --f-bg: var(--night); --f-ink: var(--paper); --f-soft: #B9BEC4; --f-step: #1C2731; }

.wrap { padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* ---------- knoppen en links ---------- */
.button {
  --b-bg: var(--accent); --b-ink: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.25rem; padding: 0 1.6rem 0 1.4rem;
  background: var(--b-bg); color: var(--b-ink);
  font-weight: 600; font-size: var(--step-body); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.button--ink { --b-bg: var(--night); --b-ink: var(--paper); }
.button--paper { --b-bg: var(--paper); --b-ink: var(--night); }
.button--small { min-height: 2.75rem; padding: 0 1.2rem 0 1rem; font-size: var(--step-small); }
.button .arrow { width: 0.9em; height: 0.9em; transition: transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { --b-bg: var(--night); --b-ink: var(--paper); }
  .button--ink:hover, [data-field="night"] .button:hover { --b-bg: var(--paper); --b-ink: var(--night); }
  .button--paper:hover { --b-bg: var(--sun); --b-ink: var(--night); }
  .button:hover .arrow { transform: translateX(3px); }
}
.link { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color var(--t-hover) ease; font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .link:hover { text-decoration-color: currentColor; } }

/* het woordmerk: alleen AVALA, polygonen uit het aangeleverde SVG */
.mark { display: block; width: 9.5rem; min-width: 140px; height: auto; fill: currentColor; }

/* ---------- vaste balk (subpagina's en na de hero op home) ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-inline: var(--margin);
  background: var(--bar-bg, var(--paper)); color: var(--bar-ink, var(--night));
  transition: background-color 300ms ease, color 300ms ease, transform 200ms var(--ease-out);
}
.bar a { text-decoration: none; }
.bar__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); font-size: var(--step-body); font-weight: 500; }
.bar__nav a:not(.button) { position: relative; padding-block: 0.5rem; }
.bar__nav a:not(.button)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t-ui) var(--ease-out); }
.bar__nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .bar__nav a:not(.button):hover::after { transform: scaleX(1); } }
.bar .button { --b-bg: var(--bar-btn, var(--sun)); --b-ink: var(--bar-btn-ink, var(--night)); }
.bar__lang { font-size: var(--step-small); opacity: 0.85; }
.bar__menu { display: none; min-height: 2.75rem; min-width: 2.75rem; justify-content: flex-end; padding: 0 0.25rem; color: inherit; }
/* drie streepjes in de kleur van het woordmerk; open worden ze een kruis */
.bar__burger { position: relative; display: block; width: 1.5rem; height: 1rem; }
.bar__burger span { position: absolute; left: 0; right: 0; height: 2px; background: currentColor; transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) var(--ease-out); }
.bar__burger span:nth-child(1) { top: 0; }
.bar__burger span:nth-child(2) { top: calc(50% - 1px); }
.bar__burger span:nth-child(3) { bottom: 0; }
.bar.is-open .bar__burger span:nth-child(1) { transform: translateY(calc(0.5rem - 1px)) rotate(45deg); }
.bar.is-open .bar__burger span:nth-child(2) { opacity: 0; }
.bar.is-open .bar__burger span:nth-child(3) { transform: translateY(calc(-0.5rem + 1px)) rotate(-45deg); }
@media (max-width: 56em) {
  .bar__nav { display: none; }
  .bar__menu { display: inline-flex; align-items: center; }
  .bar.is-open .bar__nav {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem;
    position: absolute; top: var(--bar-h); left: 0; right: 0; padding: 1rem var(--margin) 1.5rem;
    background: var(--bar-bg, var(--paper)); font-size: var(--step-lead);
  }
  .bar.is-open .bar__nav a:not(.button) { padding-block: 0.6rem; }
  .bar.is-open .bar__nav .button { margin-top: 0.75rem; }
}
.page { padding-top: var(--bar-h); }

/* ---------- HOME · hero: foto met kleurkolom ---------- */
.hero { position: relative; height: 100svh; min-height: 40rem; padding: 10px; background: var(--paper); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hero__panel { grid-column: 1 / 11; position: relative; overflow: hidden; background: var(--dusk); color: var(--white); isolation: isolate; }
.hero__photo { position: absolute; inset: 0; z-index: -2; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 8% 50%; transform-origin: 72% 40%; }
.hero__panel::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: -1; background: linear-gradient(to top, rgb(5 10 14 / 0.55), rgb(5 10 14 / 0)); } /* neutrale scrim onder tekst op foto */ /* taste-skill-ignore: neutrale scrim onder tekst op foto */
.hero__mark { position: absolute; top: 28px; left: 28px; width: 9.5rem; color: var(--white); }
.hero__lang { position: absolute; top: 28px; right: 28px; color: var(--white); font-size: var(--step-small); font-weight: 500; text-decoration: none; padding: 0.4rem 0.2rem; }
.hero__title { position: absolute; left: 0; right: 0; top: 17%; text-align: center; padding-inline: 1.5rem; }
.hero__title h1 { font-size: var(--step-display); line-height: 0.95; letter-spacing: -0.045em; transform: translateX(-12%); }
.hero__title .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero__title .line > span { display: block; }
.hero__foot { position: absolute; inset: auto 36px 36px 36px; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); align-items: end; column-gap: var(--gutter); }
.hero__lead { grid-column: 1 / 5; font-size: var(--step-body); line-height: 1.45; font-weight: 500; max-width: 36ch; }
.hero__cta { grid-column: 5 / 7; justify-self: center; }
.swatches { grid-column: 11 / 13; display: grid; grid-template-rows: repeat(5, 1fr); margin-left: 10px; }
.swatches a { display: block; padding: 20px; font-size: var(--step-body); font-weight: 600; text-decoration: none; background: var(--f-bg); color: var(--f-ink); position: relative; overflow: hidden; }
.swatches a span { display: inline-block; transition: transform var(--t-ui) var(--ease-out); }
.swatches a::after { content: ""; position: absolute; right: 20px; bottom: 20px; width: 22px; height: 22px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 82% 100%, 50% 36%, 18% 100%, 0 100%); opacity: 0; transform: translateY(8px); transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .swatches a:hover span { transform: translateX(4px); }
  .swatches a:hover::after { opacity: 1; transform: none; }
}
@media (max-width: 47.99em) {
  .hero { height: auto; min-height: 0; padding: 8px; display: block; }
  .hero__panel { height: 64svh; min-height: 30rem; }
  .hero__photo img { object-position: 50% 30%; transform-origin: 50% 30%; }
  .hero__mark { top: 18px; left: 18px; width: 140px; }
  .hero__lang { display: none; }
  .hero__title { top: 84px; }
  .hero__title h1 { font-size: 12vw; transform: none; }
  .hero__foot { inset: auto 16px 20px 16px; display: grid; gap: 1rem; justify-items: start; }
  .hero__lead { font-size: var(--step-body); max-width: 30ch; }
  .swatches { margin: 8px 0 0; grid-template-rows: none; }
  .swatches a { height: 52px; padding: 0 16px; display: flex; align-items: center; font-size: var(--step-small); }
  .swatches a::after { bottom: 15px; right: 16px; opacity: 1; transform: none; width: 18px; height: 18px; }
}
@media (min-width: 48em) and (max-width: 63.99em) {
  .hero__panel { grid-column: 1 / 10; }
  .swatches { grid-column: 10 / 13; }
  .hero__lead { grid-column: 1 / 7; }
  .hero__cta { grid-column: 7 / 11; justify-self: end; }
  .hero__title h1 { transform: none; }
}

/* ---------- HOME · Eerst zien (het live ding) ---------- */
.see { position: relative; height: 210svh; background: var(--night); color: var(--white); }
.see__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.see__photo { position: absolute; inset: 0; z-index: -1; }
.see__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: brightness(0.5) saturate(0.9); }
.see__intro { position: absolute; top: calc(var(--bar-h) + 2.5rem); left: var(--margin); right: var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.see__intro h2 { grid-column: 1 / 7; font-size: var(--step-head); }
.see__intro p { grid-column: 1 / 6; margin-top: 1rem; font-size: var(--step-body); }
.namefield { grid-column: 7 / 13; grid-row: 1 / 3; align-self: end; display: grid; gap: 0.5rem; }
.namefield label { font-weight: 600; font-size: var(--step-body); }
.namefield input {
  width: 100%; min-height: 4.25rem; padding: 0 1.25rem; border: 0; border-radius: 0;
  background: var(--paper); color: var(--night); font-size: var(--step-title); font-weight: 600; letter-spacing: -0.02em;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.namefield input::placeholder { color: #5D6267; font-weight: 500; }
.namefield input:focus-visible { outline: none; background: var(--white); box-shadow: inset 0 -4px 0 var(--sun); } /* taste-skill-ignore: focus-onderstreep, alleen bij focus */
.see__track { position: absolute; left: 0; bottom: 9svh; display: flex; gap: 40px; padding-left: 62vw; will-change: transform; }
.sketch { flex: 0 0 auto; width: min(640px, 46vw); height: min(440px, 46svh); display: grid; grid-template-rows: 68% 32%; background: var(--paper); color: var(--night); }
.sketch__site { position: relative; overflow: hidden; container-type: inline-size; }
.sketch__panel { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: 22px 28px 24px; background: var(--k-panel, var(--paper)); }
.sketch__panel h3 { font-size: var(--step-title); }
.sketch__panel p { font-size: var(--step-body); line-height: 1.4; max-width: 26ch; text-align: right; }
.sketch--end { width: min(520px, 40vw); grid-template-rows: 1fr; background: var(--sun); padding: 32px; display: flex; flex-direction: column; justify-content: space-between; }
.sketch--end h3 { font-size: var(--step-head); }
.sketch--end p { font-size: var(--step-body); max-width: 34ch; }
.sketch--end .button { align-self: flex-start; }

/* de vier schetsstijlen: andere sites, dus eigen kleuren (data-ui) */
.k-site { position: absolute; inset: 0; padding: 7cqw 7cqw; display: flex; flex-direction: column; }
.k-site .k-nav { display: flex; justify-content: space-between; font-size: 2.4cqw; font-weight: 600; }
.k-site .k-nav i { font-style: normal; display: flex; gap: 3cqw; font-weight: 500; opacity: 0.8; }
.k-name { overflow-wrap: anywhere; hyphens: auto; }
.k-1 { background: #1F3A2C; color: #F1E9DA; text-align: center; justify-content: space-between; }
.k-1 .k-name { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 8.5cqw; line-height: 1; letter-spacing: -0.02em; }
.k-1 .k-sub { font-size: 2.5cqw; }
.k-1 .k-btn { align-self: center; padding: 1.4cqw 3.6cqw; background: #F1E9DA; color: #1F3A2C; font-size: 2.3cqw; font-weight: 600; border-radius: 99px; }
.k-2 { background: #FFFFFF; color: #0B0B0B; display: grid; grid-template-columns: 1fr 38%; gap: 4cqw; padding: 6cqw; }
.k-2 .k-name { align-self: end; font-weight: 600; font-size: 9cqw; line-height: 0.92; letter-spacing: -0.05em; }
.k-2 .k-img { background: center / cover url("../assets/img/crop-bos.webp"); }
.k-3 { background: #FFD23F; color: #121212; justify-content: center; }
.k-3 .k-name { font-weight: 600; font-size: 12cqw; line-height: 0.85; letter-spacing: -0.06em; text-transform: uppercase; }
.k-3 .k-bar { margin-top: 3cqw; display: flex; gap: 2cqw; }
.k-3 .k-bar b { padding: 1.4cqw 3cqw; background: #121212; color: #FFD23F; font-size: 2.3cqw; }
.k-4 { background: #EEF1F2; color: #1D2A33; justify-content: space-between; padding: 6cqw 8cqw; }
.k-4 .k-name { font-weight: 500; font-size: 4.6cqw; letter-spacing: -0.02em; }
.k-4 .k-wide { height: 52%; background: center 70% / cover url("../assets/img/crop-zon.webp"); }
.k-4 .k-sub { font-size: 2.3cqw; opacity: 0.85; }

.see__note { position: absolute; left: var(--margin); bottom: 3svh; font-size: var(--step-small); color: var(--paper); max-width: 60ch; }

@media (max-width: 47.99em) {
  .see { height: auto; padding: 3.5rem var(--margin) 4rem; }
  .see__stage { position: relative; height: auto; overflow: visible; }
  .see__photo { position: relative; inset: auto; height: 46vw; margin: 0 calc(var(--margin) * -1) 2rem; }
  .see__intro { position: static; display: block; }
  .see__intro h2 { font-size: 9vw; }
  .see__intro p { font-size: var(--step-body); }
  .namefield { margin-top: 1.5rem; }
  .namefield input { min-height: 3.75rem; font-size: var(--step-lead); }
  .see__track { position: static; display: grid; gap: 24px; padding: 2rem 0 0; transform: none !important; }
  .sketch { width: 100%; height: auto; grid-template-rows: auto auto; }
  .sketch__site { aspect-ratio: 4 / 3; }
  .sketch__panel { min-height: 140px; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 0.5rem; }
  .sketch__panel h3 { font-size: var(--step-lead); }
  .sketch__panel p { text-align: left; }
  .sketch--end { width: 100%; gap: 1.25rem; }
  .see__note { position: static; margin-top: 1.5rem; }
}

/* ---------- HOME · Diensten: bladen die over elkaar schuiven ---------- */
.services { padding: var(--section) 0 0; }
.services__head { padding-inline: var(--margin); margin-bottom: 3rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.services__head h2 { grid-column: 1 / 8; font-size: var(--step-head); }
.services__head p { grid-column: 8 / 13; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; }
.sheet { position: sticky; top: calc(var(--bar-h) + var(--i) * 72px); min-height: calc(var(--sheet-h) - var(--i) * 72px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 72px 1fr; column-gap: var(--gutter); padding-inline: var(--margin); background: var(--f-bg); color: var(--f-ink); }
.sheet__name { grid-column: 1 / 7; grid-row: 1; align-self: center; font-size: var(--step-title); }
.sheet__kind { grid-column: 7 / 13; grid-row: 1; align-self: center; justify-self: end; font-weight: 500; font-size: var(--step-body); }
.sheet__body { grid-column: 1 / 6; grid-row: 2; align-self: end; padding-bottom: 3rem; }
.sheet__body p { font-size: var(--step-body); max-width: 40ch; }
.sheet__body .link { display: inline-block; margin-top: 1.25rem; }
.sheet__media { grid-column: 7 / 13; grid-row: 2; margin-right: calc(var(--margin) * -1); overflow: hidden; height: calc(var(--sheet-h) - 72px - var(--i) * 72px - 3rem); align-self: end; }
.sheet__media img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.services { --sheet-h: calc(100svh - var(--bar-h)); }
@media (max-width: 47.99em) {
  .services__head { display: block; }
  .services__head p { margin-top: 1rem; }
  .sheet { top: calc(var(--bar-h) + var(--i) * 52px); grid-template-rows: 52px auto auto; min-height: 0; padding-bottom: 1.5rem; }
  .sheet__name { font-size: var(--step-lead); grid-column: 1 / 9; }
  .sheet__kind { grid-column: 9 / 13; font-size: var(--step-small); }
  .sheet__media { grid-column: 1 / 13; grid-row: 2; margin: 0 calc(var(--margin) * -1); height: auto; aspect-ratio: 4 / 3; }
  .sheet__body { grid-column: 1 / 13; grid-row: 3; padding: 1.25rem 0 0; }
  .sheet__body p { font-size: var(--step-body); }
}

/* ---------- Werk: mappen met tabs ---------- */
.work { padding-top: var(--section); }
.work__head { padding-inline: var(--margin); margin-bottom: 4.5rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.work__head h2 { grid-column: 1 / 7; font-size: var(--step-head); }
.work__head p { grid-column: 8 / 13; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; }
.folder { position: relative; background: var(--f-bg); color: var(--f-ink); padding: 5rem var(--margin) 6rem; }
.folder__tabrow { display: flex; align-items: flex-end; justify-content: space-between; height: 64px; }
.folder__tab {
  display: flex; align-items: center; height: 64px; margin-top: -44px; padding: 0 2.5rem 0 1.5rem; min-width: 18rem;
  background: var(--tab-bg); color: var(--tab-ink); font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em;
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 100%, 0 100%);
}
.folder__kind { align-self: center; font-size: var(--step-body); font-weight: 500; }
.folder__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: 1.75rem; }
.folder__view { grid-column: 1 / 8; }
.folder__text { grid-column: 9 / 13; display: flex; flex-direction: column; gap: 1.25rem; }
.folder__text h3 { font-size: var(--step-title); }
.folder__text p { font-size: var(--step-body); }
.folder__facts { display: grid; gap: 0.5rem; font-size: var(--step-body); font-weight: 500; }
.folder__facts li { display: flex; gap: 0.75rem; }
.folder__facts li::before { content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin-top: 0.45em; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.folder__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin-top: 0.5rem; }

/* het interactieve venster */
.viewer { display: grid; gap: 0.75rem; }
.viewer__switch { display: flex; gap: 6px; }
.viewer__switch button { min-height: 2.75rem; padding: 0 1.1rem; font-weight: 600; font-size: var(--step-small); background: var(--f-step); color: var(--f-ink); transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.viewer__switch button:active { transform: scale(0.97); }
.viewer__switch button[aria-pressed="true"] { background: var(--f-ink); color: var(--f-bg); }
.viewer__frame { position: relative; aspect-ratio: 16 / 10; background: var(--night); overflow: hidden; }
.viewer__frame[data-mode="mob"] { aspect-ratio: auto; height: min(62svh, 640px); display: grid; place-items: center; background: var(--f-step); }
.viewer__screen { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.viewer__screen img { width: 100%; height: auto; }
.viewer__frame[data-mode="mob"] .viewer__screen { position: relative; inset: auto; width: 360px; height: 100%; background: var(--night); }
.viewer__live { position: absolute; top: 0; left: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; background: var(--white); }
.viewer__frame[data-mode="mob"] .viewer__live { position: relative; width: 390px; height: calc(100% / var(--s, 1)); }
.viewer__hint { font-size: var(--step-body); font-weight: 500; }
@media (max-width: 47.99em) {
  .work__head { display: block; margin-bottom: 3.5rem; }
  .work__head p { margin-top: 1rem; }
  .folder { position: relative; top: auto !important; min-height: 0; padding-bottom: 3rem; }
  .folder__tab { min-width: 0; height: 48px; margin-top: -32px; font-size: var(--step-lead); padding-right: 2rem; }
  .folder__tabrow { height: 48px; }
  .folder__kind { font-size: var(--step-small); }
  .folder__view, .folder__text { grid-column: 1 / 13; }
  .folder__text { margin-top: 1.75rem; }
  .viewer__frame[data-mode="mob"] { height: 70svh; }
  .viewer__frame[data-mode="mob"] .viewer__screen { width: 100%; }
}

/* ---------- Werkwijze: één kaart, vier velden ---------- */
.steps { position: relative; }
.steps__row { display: grid; grid-template-columns: repeat(4, 1fr); }
.step { position: relative; min-height: 84svh; padding: calc(var(--bar-h) + 1.5rem) 28px 28px; background: var(--f-bg); color: var(--f-ink); display: flex; flex-direction: column; }
.step h2 { font-size: var(--step-title); font-weight: 600; max-width: 10ch; }
.step__clause { margin-top: auto; font-size: var(--step-title); line-height: 1.12; font-weight: 500; letter-spacing: -0.025em; max-width: 13ch; }
.step__card { position: absolute; top: 34%; left: 50%; width: min(260px, calc(100% - 40px)); transform: translate(-50%, 0); transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .step:hover .step__card { transform: translate(-50%, -6px); } }
.ticket { background: var(--white); color: var(--night); padding: 16px 16px 18px; font-size: var(--step-small); line-height: 1.4; display: grid; gap: 10px; clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.ticket__top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.ticket__name { font-weight: 600; font-size: var(--step-body); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ticket__state { font-weight: 600; font-size: var(--step-small); padding: 2px 8px; background: #E9E4DA; white-space: nowrap; }
.ticket__state--live { background: var(--sun); }
.ticket dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.ticket dt { color: #4A5056; }
.ticket dd { font-weight: 500; text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.ticket .tick { width: 13px; height: 11px; background: #1F7A3E; flex: 0 0 auto; clip-path: polygon(0 55%, 14% 41%, 38% 66%, 86% 0, 100% 14%, 38% 94%); }
.ticket__thumb { height: 64px; background: center 40% / cover url("../assets/img/crop-toren.webp"); }
.ticket__todo dd { color: #5E646A; font-weight: 400; }
.steps__after { padding: 3.5rem var(--margin) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.steps__say { grid-column: 1 / 9; }
.steps__statement { font-size: var(--step-title); line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; max-width: 30ch; }
.steps__say p + p { margin-top: 1rem; font-size: var(--step-body); color: var(--f-soft); max-width: 46ch; }
.steps__after .link { grid-column: 10 / 13; justify-self: end; font-size: var(--step-body); }
@media (min-width: 48em) and (max-width: 63.99em) {
  .steps__row { grid-template-columns: 1fr 1fr; }
  .step { min-height: 70svh; }
}
@media (max-width: 47.99em) {
  .steps__row { grid-template-columns: 1fr; }
  .step { min-height: 0; padding: 2.5rem var(--margin) 3rem; }
  .step__clause { order: -1; margin: 0 0 1.75rem; font-size: var(--step-lead); max-width: 16ch; }
  .step h2 { order: -2; margin-bottom: 1rem; font-size: var(--step-lead); }
  .step__card { position: static; transform: none; }
  .steps__after { display: block; padding-top: 2.5rem; }
  .steps__after .link { display: inline-block; margin-top: 1.25rem; }
}

/* ---------- Ervaringen: quotes in de kantlijn ---------- */
.voices { position: relative; height: 200svh; }
.voices__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding: calc(var(--bar-h) + 1rem) var(--margin) 2rem; }
.voices__stage h2 { font-size: min(var(--step-display), 6.5rem); letter-spacing: -0.045em; line-height: 0.92; max-width: 12ch; }
.voices__pic { position: absolute; left: 50%; top: 30svh; width: min(24vw, 46svh); aspect-ratio: 4 / 5; transform: translateX(-50%); overflow: hidden; background: var(--night); }
.voices__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 600ms ease; }
.voices__pic img.is-on { opacity: 1; }
.quote { position: absolute; width: min(280px, 22vw); opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 700ms var(--ease-out); }
.quote.is-on { opacity: 1; transform: none; }
.quote--1 { right: var(--margin); top: 34svh; }
.quote--2 { left: var(--margin); top: 56svh; }
.quote--3 { right: var(--margin); top: 66svh; }
.quote .quote__text, .quote blockquote p { font-size: var(--step-lead); line-height: 1.22; font-weight: 600; letter-spacing: -0.015em; }
.quote figcaption { margin-top: 0.75rem; font-size: var(--step-small); color: var(--f-soft); }
.quote--placeholder .quote__text { color: var(--f-soft); }
.voices__more { position: absolute; left: var(--margin); bottom: 2rem; font-size: var(--step-small); color: var(--f-soft); max-width: 40ch; }
.voices__steps { position: absolute; inset: 0; pointer-events: none; }
.voices__steps div { height: 100svh; }
@media (max-width: 47.99em) {
  .voices { height: auto; padding: 4rem var(--margin) 4.5rem; }
  .voices__stage { position: static; height: auto; overflow: visible; padding: 0; display: block; }
  .voices__stage h2 { font-size: 16vw; margin-bottom: 2.5rem; }
  .voices__pic, .voices__steps { display: none; }
  .quote { position: static; width: 100%; opacity: 1; transform: none; display: grid; gap: 1rem; margin-bottom: 4.5rem; }
  .quote__pic { display: block !important; width: 72%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; }
  .quote:nth-of-type(even) .quote__pic { justify-self: end; }
  .quote .quote__text, .quote blockquote p { font-size: var(--step-lead); }
  .voices__more { position: static; }
}
.quote__pic { display: none; }

/* ---------- Offerte-blok: fotostrook + balk van drie vakken ---------- */
.ask { padding: 3rem 0 var(--section); min-height: 80svh; overflow: hidden; }
.strip { display: flex; gap: 8px; width: max-content; animation: strip 70s linear infinite; }
.strip img { height: 150px; width: auto; object-fit: cover; flex: 0 0 auto; }
.strip img.r34 { aspect-ratio: 3 / 4; } .strip img.r11 { aspect-ratio: 1; } .strip img.r32 { aspect-ratio: 3 / 2; }
@keyframes strip { to { transform: translateX(-50%); } }
.ask__body { padding-inline: var(--margin); margin-top: 4.5rem; }
.ask__body h2 { font-size: var(--step-head); max-width: 16ch; }
.ask__bar { margin-top: 2.5rem; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ask__bar input, .ask__bar button {
  min-height: 96px; border: 0; border-radius: 0; text-align: left; padding: 0 1.5rem; font-size: var(--step-body);
  background: var(--f-step); color: var(--f-ink); transition: background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.ask__bar input::placeholder { color: var(--f-soft); }
.ask__bar input:focus-visible { outline: none; background: var(--paper); color: var(--night); }
.ask__bar input:focus-visible::placeholder { color: #5D6267; }
.ask__bar button { background: var(--sun); color: var(--night); font-weight: 600; font-size: var(--step-lead); display: flex; align-items: center; justify-content: center; gap: 0.75rem; clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%); }
.ask__bar button { transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.ask__bar button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ask__bar button:hover { background: var(--paper); } }
.ask__print { margin-top: 1rem; font-size: var(--step-small); color: var(--f-soft); max-width: none; }
.ask__print a { color: var(--f-ink); font-weight: 500; }
@media (max-width: 47.99em) {
  .ask { min-height: 0; }
  .strip img { height: 110px; }
  .ask__body { margin-top: 3rem; }
  .ask__body h2 { font-size: 9vw; }
  .ask__bar { grid-template-columns: 1fr; }
  .ask__bar input, .ask__bar button { min-height: 60px; }
}

/* ---------- Footer: het woordmerk als bergkam ---------- */
.foot { padding: 5rem var(--margin) 2rem; font-size: var(--step-body); }
.ridge { display: grid; grid-template-columns: 1fr 1fr 1fr 0.86fr 1fr; gap: 4px; height: 34svh; min-height: 13rem; align-items: end; }
.ridge span { position: relative; display: block; height: var(--h); background: var(--f); transform-origin: bottom; }
.ridge svg { position: absolute; left: 14%; right: 14%; bottom: 12%; width: 72%; height: auto; fill: var(--paper); }
.foot__cols { margin-top: 3.5rem; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; font-size: var(--step-small); }
.foot__cols h2 { font-size: var(--step-body); letter-spacing: -0.01em; margin-bottom: 0.75rem; }
.foot__cols ul { display: grid; gap: 0; }
.foot__cols li a { display: inline-block; padding-block: 0.6rem; }
.foot__cols a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot__cols a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.foot__col { grid-column: span 2; }
.foot__addr { grid-column: 9 / 13; font-style: normal; line-height: 1.6; }
.foot__last { margin-top: 3.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: var(--step-small); }
@media (max-width: 47.99em) {
  .ridge { height: 22svh; min-height: 8rem; }
  .foot__col { grid-column: span 6; }
  .foot__addr { grid-column: 1 / 13; }
}

/* ---------- subpagina's ---------- */
.opener { min-height: 82svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 3rem var(--margin) 0; align-items: end; }
.opener__text { grid-column: 1 / 7; align-self: center; padding-bottom: 3rem; }
.opener__text h1 { font-size: var(--step-display); line-height: 0.95; letter-spacing: -0.045em; }
.opener__text p { margin-top: 2rem; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; max-width: 32ch; }
.opener__text .button { margin-top: 2rem; }
.opener__pic { grid-column: 8 / 13; align-self: stretch; margin-right: calc(var(--margin) * -1); position: relative; overflow: hidden; min-height: 60svh; }
.opener__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 47.99em) {
  .opener { display: block; min-height: 0; padding-top: 2.5rem; }
  .opener__text { padding-bottom: 2.5rem; }
  .opener__text h1 { font-size: 15vw; }
  .opener__pic { margin: 0 calc(var(--margin) * -1); min-height: 0; aspect-ratio: 4 / 5; }
}

.block { padding: var(--section) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: start; }
.block__head { grid-column: 1 / 6; }
.block__head h2 { font-size: var(--step-head); }
.block__head p { margin-top: 1.5rem; font-size: var(--step-body); }
.block__side { grid-column: 7 / 13; }
.block__pic { grid-column: 7 / 13; overflow: hidden; }
.block__pic img { width: 100%; height: auto; }
.block--flip .block__head { grid-column: 8 / 13; grid-row: 1; }
.block--flip .block__pic { grid-column: 1 / 7; grid-row: 1; }
.checks { display: grid; gap: 1rem; margin-top: 2rem; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 1rem; font-size: var(--step-body); line-height: 1.4; }
.checks li::before { content: ""; width: 14px; height: 14px; margin-top: 0.3em; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.checks strong { font-weight: 600; }
@media (max-width: 47.99em) {
  .block { display: block; }
  .block__head, .block__side { margin-bottom: 2rem; }
  .block__pic, .block--flip .block__pic { margin: 0 calc(var(--margin) * -1); }
}

.band { padding: var(--section) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.band h2 { grid-column: 1 / 9; font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.045em; }
.band .band__act { grid-column: 9 / 13; justify-self: end; display: grid; gap: 1rem; justify-items: end; text-align: right; }
.band .band__act p { font-size: var(--step-body); }
@media (max-width: 47.99em) {
  .band { display: block; }
  .band h2 { font-size: 11vw; }
  .band .band__act { justify-items: start; text-align: left; margin-top: 2rem; }
}

/* werkwijze-pagina: stappen uitgeschreven */
.stage-list { display: grid; }
.stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 6rem var(--margin); background: var(--f-bg); color: var(--f-ink); align-items: start; }
.stage h2 { grid-column: 1 / 6; font-size: var(--step-head); line-height: 1; }
.stage__text { grid-column: 7 / 13; display: grid; gap: 1rem; }
.stage__text p { font-size: var(--step-body); }
.stage .ticket { grid-column: 12 / 13; }
.stage__card { grid-column: 7 / 10; margin-top: 2rem; }
@media (max-width: 47.99em) {
  .stage { display: block; padding: 4rem var(--margin); }
  .stage__text { margin-top: 1.5rem; }
  .stage__card { max-width: 280px; }
}

/* veelgestelde vragen */
.faq { grid-column: 7 / 13; display: grid; gap: 8px; }
.faq details { background: var(--f-step); }
.faq summary { list-style: none; cursor: pointer; padding: 1.25rem 3.5rem 1.25rem 1.5rem; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.015em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 1.5rem; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 82% 100%, 50% 36%, 18% 100%, 0 100%); transform: rotate(180deg); transition: transform var(--t-ui) var(--ease-out); }
.faq details[open] summary::after { transform: none; }
.faq details p { padding: 0 1.5rem 1.5rem; font-size: var(--step-body); }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { background: color-mix(in srgb, var(--f-ink) 6%, transparent); } }

/* offerte-formulier */
.form { grid-column: 1 / 8; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
.form .full { grid-column: 1 / -1; }
.form label, .form legend { display: block; font-weight: 600; font-size: var(--step-body); margin-bottom: 0.5rem; }
.form .hint { font-weight: 400; color: var(--f-soft); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="url"], .form textarea {
  width: 100%; min-height: 3.5rem; padding: 0.85rem 1rem; border: 0; border-radius: 0; font-size: var(--step-body);
  background: var(--f-step); color: var(--f-ink); transition: background-color var(--t-hover) ease, box-shadow var(--t-hover) ease;
}
.form textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.form input:focus-visible, .form textarea:focus-visible { outline: none; background: var(--paper); color: var(--night); box-shadow: inset 0 -4px 0 var(--sun); } /* taste-skill-ignore: focus-onderstreep, alleen bij focus */
.form input::placeholder, .form textarea::placeholder { color: var(--f-soft); }
.form input[aria-invalid="true"] { box-shadow: inset 0 -4px 0 #FF6B5B; } /* taste-skill-ignore: foutmarkering, alleen bij een fout */
.form .error { margin-top: 0.4rem; font-size: var(--step-body); color: #FFB4AA; min-height: 0; }
.form fieldset { border: 0; padding: 0; margin: 0; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { margin: 0; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices span { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1.15rem; background: var(--f-step); font-weight: 500; cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.choices input:checked + span { background: var(--sun); color: var(--night); }
.choices input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .choices span:hover { background: color-mix(in srgb, var(--f-step) 70%, var(--paper)); } .choices input:checked + span:hover { background: var(--sun); } }
.siteurl[hidden] { display: none; }
.form__send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.75rem; }
.form__send .button { min-height: 3.75rem; font-size: var(--step-body); }
.form__send p { font-size: var(--step-body); color: var(--f-soft); max-width: 40ch; }
.form__done { grid-column: 1 / -1; padding: 1.5rem; background: var(--f-step); font-size: var(--step-body); }
.aside { grid-column: 9 / 13; display: grid; gap: 2rem; align-content: start; }
.aside h2 { font-size: var(--step-lead); }
.aside p { color: var(--f-soft); }
.aside a.big { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; display: inline-block; }
@media (hover: hover) and (pointer: fine) { .aside a.big:hover { color: var(--sun); } }
@media (max-width: 47.99em) {
  .form { grid-template-columns: 1fr; }
  .aside { margin-top: 3.5rem; }
}

/* ---------- beweging: inhoud blijft zichtbaar zonder script ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__title .line > span { transform: translateY(105%); animation: line 1000ms var(--ease-expo) forwards; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js .hero [data-rise] { opacity: 0; transform: translateY(16px); animation: rise 800ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 450ms); }
  .js .swatches a { transform: translateX(24px); opacity: 0; animation: rise 700ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms + 300ms); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-expo); transition-delay: calc(var(--d, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* het figuur zelf blijft onbegrensd, anders ziet de IntersectionObserver het nooit */
  .js .shutter[data-reveal] { opacity: 1; transform: none; }
  .js .shutter[data-reveal] img { clip-path: inset(0 0 100% 0); transform: scale(1.1); transition: clip-path 1100ms var(--ease-in-out), transform 1500ms var(--ease-soft); }
  .js .shutter[data-reveal].is-in img { clip-path: inset(0); transform: none; }
  .js .ridge span { transform: scaleY(0.08); transition: transform 1100ms var(--ease-expo); transition-delay: calc(var(--i) * 90ms); }
  .js .ridge.is-in span { transform: none; }
  .js .ticket[data-reveal] { transform: translateY(18px) rotate(-1.5deg); }
  .js .ticket[data-reveal].is-in { transform: none; }
}
@keyframes line { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .strip { animation: none; }
  .bar, .button, .quote, .voices__pic img { transition: none; }
}

/* werk-pagina: mappen liggen naast elkaar in de stroom, niet gestapeld */
.folder--flat { position: relative; top: auto; min-height: 0; padding-top: 6rem; padding-bottom: var(--section); }

.folder__phone { width: 9.5rem; aspect-ratio: 9 / 16; overflow: hidden; margin-top: 0.75rem; }
.folder__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.stage__pic { grid-column: 1 / 6; margin-top: 2.5rem; overflow: hidden; aspect-ratio: 3 / 2; }
.stage__pic img { width: 100%; height: 100%; object-fit: cover; }
.stage__pic--ui img { object-position: top; }
.page-strip { padding: 3rem 0; overflow: hidden; }
@media (min-width: 48em) and (max-width: 63.99em) {
  .form { grid-column: 1 / 13; }
  .aside { grid-column: 1 / 13; margin-top: 3.5rem; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 47.99em) { .stage__pic { margin-top: 2rem; } }

.ask__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.ask__top h2 { grid-column: 1 / 8; }
.ask__top p { grid-column: 8 / 13; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; }
@media (max-width: 47.99em) { .ask__top { display: block; } .ask__top p { margin-top: 1rem; } }

/* offerteblok: zichtbare labels boven de vakken */
.ask__bar { grid-template-rows: auto auto; }
.ask__label { grid-row: 1; font-weight: 600; font-size: var(--step-body); padding-bottom: 0.25rem; align-self: end; }
.ask__bar input, .ask__bar button { grid-row: 2; }
.ask__bar label[for="ask-bedrijf"] { grid-column: 1; } .ask__bar #ask-bedrijf { grid-column: 1; }
.ask__bar label[for="ask-site"] { grid-column: 2; } .ask__bar #ask-site { grid-column: 2; }
.ask__bar button { grid-column: 3; }
.ask__print a { display: inline-block; padding-block: 0.5rem; }
.sheet__body { align-self: center; padding-bottom: 0; }
.form__send .button--paper { --b-bg: var(--paper); --b-ink: var(--night); }
@media (max-width: 47.99em) {
  .ask__bar { grid-template-rows: none; }
  .ask__bar > * { grid-column: 1 !important; grid-row: auto !important; }
  .ask__label { padding-top: 0.5rem; }
  .sheet__kind { white-space: nowrap; font-size: var(--step-small); }
  .sheet__body { align-self: start; }
  .aside figure { display: none; }
}

/* tikvlakken van minstens 44px */
.bar > a:first-child { display: inline-flex; align-items: center; min-height: 44px; }
.link { display: inline-block; padding-block: 0.55rem; }
.aside a.big { padding-block: 0.4rem; }
/* verborgen balk bovenaan home is ook niet bereikbaar met Tab */

/* polish: drukfeedback op alles wat je aanraakt, en een zachte entree voor de bevestiging */
.swatches a { transition: transform var(--t-press) var(--ease-out); }
.swatches a:active { transform: scale(0.98); }
.choices span { transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.choices label:active span { transform: scale(0.97); }
.faq summary { transition: background-color var(--t-hover) ease; }
.form__done { transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
@starting-style { .form__done { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .form__done { transition: opacity 200ms ease; } }

/* mobiel: voelt als een app, niet als een website */
html { -webkit-tap-highlight-color: transparent; }
button, a, .button, .swatches a, .choices span, summary {
  touch-action: manipulation;
  -webkit-touch-callout: none;
}
button, .button, .swatches a, .choices span, summary, .viewer__switch button { user-select: none; -webkit-user-select: none; }
.bar { padding-left: max(var(--margin), env(safe-area-inset-left, 0px)); padding-right: max(var(--margin), env(safe-area-inset-right, 0px)); }

/* =====================================================================
   v2 · HOME — de klim (3D), de waaier, rijen, cases, de weg, het venster
   ===================================================================== */
[data-field="deep"] .button:hover { --b-bg: var(--paper); --b-ink: var(--night); }

/* ---------- de klim ---------- */
.climb { position: relative; height: 340svh; background: var(--night); color: var(--paper); }
.climb__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.climb__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.climb__still { position: absolute; inset: 0; display: none; background: center 40% / cover url("../assets/img/hero-2560.webp"); }
.climb.no-webgl .climb__still { display: block; }
.climb.no-webgl .climb__still::after { content: ""; position: absolute; inset: 0; background: rgb(17 25 31 / 0.55); }
.climb__text { position: absolute; inset: 0; padding: calc(var(--bar-h) + 2rem) var(--margin) 3rem; pointer-events: none; }
.climb__phase { position: absolute; left: var(--margin); right: var(--margin); pointer-events: auto; }
.climb__phase--one { top: calc(var(--bar-h) + 6svh); }
.climb__phase--two { top: 34%; max-width: 48vw; }
.climb__phase--three { max-width: 52vw; }
.climb__phase--three { bottom: 12svh; }
.climb__title { font-size: clamp(3.5rem, 1rem + 10vw, 11rem); line-height: 0.9; letter-spacing: -0.05em; font-weight: 600; }
.climb__title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.climb__title .line > span { display: block; }
.climb__lead { margin-top: 1.75rem; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; max-width: 30ch; }
.climb__say { font-size: clamp(2rem, 1rem + 3.6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; max-width: 18ch; text-wrap: balance; }
.climb__phase--three .button { margin-top: 2rem; }
.climb__hint { position: absolute; right: var(--margin); bottom: 2rem; font-size: var(--step-small); color: #B9BEC4; display: flex; align-items: center; gap: 0.6rem; }
.climb__hint::after { content: ""; width: 1px; height: 2.5rem; background: currentColor; transform-origin: top; animation: hint 2.4s var(--ease-in-out) infinite; } /* taste-skill-ignore: scroll-hint line, moves */
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
.climb:not(.is-live) .climb__phase:not(.climb__phase--one) { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .climb { height: 100svh; }
  .climb__hint { display: none; }
}
@media (max-width: 47.99em) {
  .climb__title { font-size: 15.5vw; }
  .climb__phase--three { bottom: 9svh; }
  .climb__hint { display: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .climb__title .line > span { transform: translateY(105%); animation: line 1100ms var(--ease-expo) forwards; animation-delay: calc(var(--i, 0) * 120ms + 200ms); }
  .js .climb__lead { opacity: 0; animation: rise 900ms var(--ease-out) 600ms forwards; }
}

/* ---------- de waaier: vier schetsen klappen open ---------- */
.fan-sec { padding: var(--section) var(--margin); overflow: hidden; }
.fan-sec__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.fan-sec__head h2 { grid-column: 1 / 8; font-size: clamp(3rem, 1rem + 7vw, 8rem); line-height: 0.92; letter-spacing: -0.05em; }
.fan-sec .namefield { grid-column: 8 / 13; }
.fan-sec .namefield label { font-size: var(--step-body); font-weight: 500; }
.fan-sec .namefield input { background: var(--night); color: var(--paper); }
.fan-sec .namefield input::placeholder { color: #9AA1A8; }
.fan-sec .namefield input:focus-visible { background: #1C2731; }
.fan { position: relative; height: min(28vw, 420px); margin-top: 5rem; }
.fan__card {
  position: absolute; left: 50%; top: 4%; width: min(21.5vw, 340px);
  transform: translateX(-50%) rotate(0deg); transform-origin: 50% 140%;
  transition: transform 1100ms var(--ease-expo); transition-delay: calc(var(--n) * 60ms);
}
.fan__card .sketch__site { aspect-ratio: 4 / 3; overflow: hidden; container-type: inline-size; position: relative; }
.fan__label { margin-top: 0.9rem; font-size: var(--step-body); max-width: none; opacity: 0; transition: opacity 600ms ease 500ms; }
.fan.is-open .fan__label { opacity: 1; }
.fan.is-open .fan__card:nth-child(1) { transform: translateX(calc(-50% - 162%)) translateY(7%) rotate(-7deg); }
.fan.is-open .fan__card:nth-child(2) { transform: translateX(calc(-50% - 54%)) translateY(1%) rotate(-2.2deg); }
.fan.is-open .fan__card:nth-child(3) { transform: translateX(calc(-50% + 54%)) translateY(1%) rotate(2.2deg); }
.fan.is-open .fan__card:nth-child(4) { transform: translateX(calc(-50% + 162%)) translateY(7%) rotate(7deg); }
@media (hover: hover) and (pointer: fine) {
  .fan.is-open .fan__card { transition: transform 500ms var(--ease-out); }
  .fan.is-open .fan__card:hover { z-index: 5; }
  .fan.is-open .fan__card:nth-child(1):hover { transform: translateX(calc(-50% - 162%)) translateY(2%) rotate(-5deg) scale(1.03); }
  .fan.is-open .fan__card:nth-child(2):hover { transform: translateX(calc(-50% - 54%)) translateY(-4%) rotate(-1deg) scale(1.03); }
  .fan.is-open .fan__card:nth-child(3):hover { transform: translateX(calc(-50% + 54%)) translateY(-4%) rotate(1deg) scale(1.03); }
  .fan.is-open .fan__card:nth-child(4):hover { transform: translateX(calc(-50% + 162%)) translateY(2%) rotate(5deg) scale(1.03); }
}
.fan-sec__foot { margin-top: 4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.fan-sec__foot p { font-size: var(--step-lead); line-height: 1.35; font-weight: 500; max-width: 36ch; }
@media (max-width: 63.99em) {
  .fan { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1rem; margin-top: 3rem; }
  .fan__card, .fan.is-open .fan__card { position: static; width: auto; transform: none !important; }
  .fan__label { opacity: 1; }
}
@media (max-width: 47.99em) {
  .fan-sec__head { display: block; }
  .fan-sec__head h2 { font-size: 15vw; }
  .fan-sec .namefield { margin-top: 2rem; }
  .fan { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .fan__card { transition: none; } }

/* ---------- rijen: Ask Phill-achtige dienstenlijst ---------- */
.rows-sec { padding: var(--section) var(--margin); }
.rows-sec__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 4rem; }
.rows-sec__head h2 { grid-column: 1 / 8; font-size: var(--step-head); }
.rows-sec__head p { grid-column: 8 / 13; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; }
.row + .row { margin-top: 0.5rem; }
.row a { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding: 2.2rem 0; text-decoration: none; }
.row__name { grid-column: 1 / 8; font-size: clamp(3.25rem, 1rem + 8.5vw, 10rem); line-height: 0.9; letter-spacing: -0.055em; font-weight: 600; transition: transform 500ms var(--ease-out), color 300ms ease; }
.row__meta { grid-column: 8 / 13; display: grid; gap: 0.5rem; }
.row__kind { font-weight: 600; font-size: var(--step-body); color: var(--sun); }
.row__text { font-size: var(--step-body); color: var(--f-soft); max-width: 34ch; }
.row__pic { position: absolute; right: 26%; top: 50%; width: min(26vw, 380px); aspect-ratio: 16 / 10; overflow: hidden; pointer-events: none; transform: translate(0, -50%) rotate(-3deg) scale(0.9); opacity: 0; transition: opacity 300ms ease, transform 500ms var(--ease-out); z-index: 2; }
.row__pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (hover: hover) and (pointer: fine) {
  .row a:hover .row__name { transform: translateX(1.5rem); }
  .row a:hover .row__pic { opacity: 1; transform: translate(0, -50%) rotate(-3deg) scale(1); }
}
@media (hover: none), (pointer: coarse) {
  .row__pic { position: static; opacity: 1; transform: none; width: 100%; grid-column: 1 / 13; margin-top: 1.25rem; }
}
@media (max-width: 47.99em) {
  .rows-sec__head { display: block; }
  .rows-sec__head p { margin-top: 1rem; }
  .row__name { grid-column: 1 / 13; font-size: 17vw; }
  .row__meta { grid-column: 1 / 13; margin-top: 1rem; }
}

/* ---------- werk: grote cases ---------- */
.work2 { padding: var(--section) var(--margin); }
.work2__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: 4rem; }
.work2__head h2 { grid-column: 1 / 8; font-size: clamp(3rem, 1rem + 7vw, 8rem); line-height: 0.92; letter-spacing: -0.05em; }
.work2__head p { grid-column: 8 / 13; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; }
.case { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: 3rem; margin-bottom: 1.5rem; background: var(--f-bg); color: var(--f-ink); align-items: start; }
.case__text { grid-column: 1 / 5; display: grid; gap: 1.25rem; align-content: start; }
.case__text h3 { font-size: var(--step-head); line-height: 0.95; }
.case__kind { color: var(--sun); font-weight: 600; font-size: var(--step-body); }
.case__text p:not(.case__kind) { font-size: var(--step-body); color: var(--f-soft); }
.case__view { grid-column: 5 / 13; }
@media (max-width: 47.99em) {
  .work2__head { display: block; }
  .work2__head h2 { font-size: 15vw; }
  .work2__head p { margin-top: 1rem; }
  .case { display: block; padding: 1.5rem 1.25rem; margin-inline: calc(var(--margin) * -1); }
  .case__view { margin-top: 2rem; }
}

/* ---------- de weg: werkwijze schuift horizontaal voorbij ---------- */
.road { position: relative; height: 320svh; }
.road__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--bar-h) + 2rem) 0 2.5rem; }
.road__title { padding-inline: var(--margin); font-size: var(--step-head); }
.road__track { display: flex; align-items: center; gap: 6vw; padding-left: var(--margin); padding-right: 30vw; will-change: transform; counter-reset: none; }
.road__step { flex: 0 0 auto; width: min(62vw, 900px); display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; }
.road__clause { font-size: clamp(2.75rem, 1rem + 5.4vw, 6.5rem); line-height: 0.95; letter-spacing: -0.05em; font-weight: 600; max-width: 10ch; }
.road__step .ticket { width: 260px; }
.road__bar { margin: 0 var(--margin); height: 3px; background: var(--f-step); }
.road__bar span { display: block; height: 100%; background: var(--sun); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (prefers-reduced-motion: reduce) {
  .road { height: auto; }
  .road__stage { position: static; height: auto; display: block; padding: var(--section) var(--margin); }
  .road__title { padding: 0; margin-bottom: 3rem; }
  .road__track { display: grid; gap: 4rem; padding: 0; transform: none !important; }
  .road__step { width: auto; grid-template-columns: 1fr; gap: 1.5rem; }
  .road__clause { font-size: 12vw; }
  .road__bar { display: none; }
}

/* ---------- het venster: de echte foto opent tot het hele scherm ---------- */
.window { position: relative; height: 320svh; margin-bottom: -45vh; } /* na het oranje ongeveer een half scherm lucht, dan de ervaringen */
.window__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; } /* lvh: oranje ook achter de inklappende balk */
.window__text { position: absolute; left: var(--margin); right: var(--margin); top: calc(var(--bar-h) + 2rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; transition: opacity 200ms linear; }
.window__text h2 { grid-column: 1 / 8; font-size: clamp(2.75rem, 1rem + 5vw, 6rem); line-height: 0.95; letter-spacing: -0.05em; }
.window__text p { grid-column: 8 / 13; font-size: var(--step-body); }
.window__pic { position: absolute; inset: 0; clip-path: inset(var(--wt, 46%) var(--wx, 30%) var(--wb, 8%) var(--wx, 30%)); }
.window__pic img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(var(--ws, 1.15)); }
@media (max-width: 47.99em) {
  .window__text { display: block; }
  .window__text p { margin-top: 1rem; }
  .window__pic { clip-path: inset(var(--wt, 52%) var(--wx, 8%) var(--wb, 6%) var(--wx, 8%)); }
}
@media (prefers-reduced-motion: reduce) {
  .window { height: auto; }
  .week__days li span { opacity: 1; }
  .window__stage { position: relative; height: auto; padding-bottom: 0; }
  .window__text { position: static; padding: var(--section) var(--margin) 3rem; }
  .window__pic { position: relative; clip-path: none; height: 80svh; }
  .window__pic img { transform: none; }
}

/* ---------- ervaringen: compact tot de echte quotes er zijn ---------- */
.voices2 { padding: 0 var(--margin) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.voices2 > h2 { grid-column: 1 / 5; font-size: var(--step-head); padding-top: var(--section); }
.voices2__list { grid-column: 5 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding-top: var(--section); }
.voice { display: grid; grid-template-columns: 7rem 1fr; gap: 1.25rem; align-items: end; padding: 1.5rem; background: var(--white); }
.voice img { width: 7rem; aspect-ratio: 9 / 16; object-fit: cover; object-position: top; }
.voice__text { font-size: var(--step-lead); font-weight: 600; line-height: 1.25; color: #5E646A; }
.voice figcaption span { display: block; margin-top: 0.75rem; font-size: var(--step-small); color: #4A5056; }
@media (max-width: 63.99em) { .voices2 > h2, .voices2__list { grid-column: 1 / 13; } .voices2__list { padding-top: 2.5rem; } }
@media (max-width: 47.99em) { .voices2 { display: block; } .voices2__list { grid-template-columns: 1fr; } }

/* offerteblok v2: geen fotostrook, kop groter */
.ask { padding: var(--section) 0; min-height: 0; }
.ask__body { margin-top: 0; }
.ask__top h2 { font-size: clamp(2.75rem, 1rem + 5vw, 6rem); line-height: 0.95; letter-spacing: -0.05em; max-width: 12ch; }

/* v2 fixes */
.js .fan:not(.is-open) .fan__card:not(:last-child) { opacity: 0; }
.fan__card { transition: transform 1100ms var(--ease-expo), opacity 500ms ease; transition-delay: calc(var(--n) * 60ms); }
@media (min-width: 48em) and (max-width: 63.99em) {
  .road__step { width: min(70vw, 640px); grid-template-columns: 1fr; gap: 1.5rem; }
  .road__clause { font-size: clamp(2.5rem, 1rem + 4vw, 3.5rem); max-width: 14ch; }
}
@media (max-width: 47.99em) { .climb__title { font-size: 13vw; } }
.viewer__switch { align-items: center; flex-wrap: wrap; }
.viewer__switch .viewer__hint { margin-left: 0.75rem; }
@media (prefers-reduced-motion: reduce) {
  .climb__phase { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .climb__phase--two { display: none; }
}
.ask__print { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; }
.road { height: 270svh; }
@media (min-width: 48em) and (max-width: 63.99em) { .window__pic { clip-path: inset(var(--wt, 56%) var(--wx, 22%) var(--wb, 6%) var(--wx, 22%)); } }

/* =====================================================================
   v3 · opening, doorlopende lucht, oranje overgang, foto's in koppen
   ===================================================================== */

/* ---------- de lucht: 3D-scène vast achter de hele homepagina ---------- */
.home { background: var(--night); }
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.sky__canvas { width: 100%; height: 100%; display: block; }
.sky__still { position: absolute; inset: 0; display: none; background: center 40% / cover url("../assets/img/hero-2560.webp"); }
.sky__still::after { content: ""; position: absolute; inset: 0; background: rgb(17 25 31 / 0.6); }
.home.no-webgl .sky__still { display: block; }
.home main, .home .foot { position: relative; z-index: 1; }
/* donkere hoofdstukken worden doorzichtig: de berg loopt erachter door */
.home .climb, .home .rows-sec, .home .road, .home .ask { background: transparent; }
.home .rows-sec, .home .road, .home .ask { background: rgb(17 25 31 / 0.62); }
/* lichte hoofdstukken worden panelen die over de lucht schuiven */
.home .fan-sec, .home .work2, .home .voices2 { margin-inline: clamp(0.75rem, 1.6vw, 1.5rem); }
.home .fan-sec { margin-top: 0; }
.home .voices2 { margin-bottom: clamp(0.75rem, 1.6vw, 1.5rem); }
.home .window { background: transparent; }
.home .window .window__text { color: var(--paper); }
.home .foot { margin: 0 clamp(0.75rem, 1.6vw, 1.5rem) clamp(0.75rem, 1.6vw, 1.5rem); }

/* ---------- de opening: het woordmerk tekent zich, de Λ's worden toppen ---------- */
.intro { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; background: var(--night); cursor: pointer; }
.js:not(.no-intro) .home .intro { display: grid; }
.intro__mark { width: min(62vw, 620px); overflow: visible; }
.intro__mark polygon { fill: var(--paper); fill-opacity: 0; stroke: var(--paper); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: 50% 100%; }
.intro.is-run .intro__mark polygon { animation: intro-draw 900ms var(--ease-in-out) forwards, intro-fill 400ms ease forwards; animation-delay: calc(var(--k) * 90ms), calc(800ms + var(--k) * 50ms); }
.intro { background: transparent; }
.intro::before { content: ""; position: absolute; inset: 0; background: var(--night); clip-path: inset(0); transition: clip-path 1000ms var(--ease-in-out); }
.intro__mark { position: relative; transform-origin: 0 50%; transition: transform 1000ms var(--ease-in-out); }
.intro.is-fly .intro__mark { transform: translate(var(--fx, 0), var(--fy, 0)) scale(var(--fk, 0.25)); }
.intro.is-fly .intro__mark polygon { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 0; }
.intro.is-out::before { clip-path: inset(0 0 100% 0); }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-fill { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes intro-peak { to { transform: scaleY(3.2) scaleX(1.25); fill-opacity: 0.25; } }
@keyframes intro-fade { to { opacity: 0; } }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
html.intro-running { overflow: hidden; }
/* de koptekst wacht op het einde van de opening */
.js:not(.no-intro) .home .climb__title .line > span { animation-delay: calc(var(--i, 0) * 120ms + 2200ms) !important; }
.js:not(.no-intro) .home .climb__lead { animation-delay: 2700ms !important; }
.js:not(.no-intro) .home .bar { opacity: 0; }
.home .bar { transition: background-color 300ms ease, color 300ms ease, transform 200ms var(--ease-out), opacity 300ms ease; }

/* ---------- oranje overgang met het woordmerk ---------- */
.wipe { position: relative; height: 340svh; z-index: 1; margin-bottom: -100vh; margin-bottom: -100lvh; } /* de volgende sectie schuift al onder het oranje door */
.wipe__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; } /* lvh: ook achter de inklappende balk van de mobiele browser oranje */
.wipe__panel { position: absolute; inset: 0; display: grid; place-items: center; background: var(--sun); clip-path: inset(var(--wt, 50%) 0 var(--wb, 50%) 0); }
.wipe__mark { width: 88vw; fill: var(--night); transform: scale(var(--ms, 0.7)); opacity: var(--mo, 0); }
@media (prefers-reduced-motion: reduce) { .wipe { display: none; } }

/* ---------- foto's in de koppen ---------- */
.inmedia { display: inline-block; width: 1.7em; height: 0.78em; vertical-align: -0.02em; overflow: hidden; margin-inline: 0.08em; border-radius: 0.12em; }
.inmedia img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: transform 1200ms var(--ease-expo); }
.is-in .inmedia img, [data-reveal].is-in .inmedia img { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .inmedia { clip-path: inset(0 50% 0 50%); transition: clip-path 900ms var(--ease-expo) 250ms; }
  .js [data-reveal].is-in .inmedia { clip-path: inset(0); }
}

/* =====================================================================
   v4 · stijlwissel, scrollende screenshots, oranje footer, levende werkwijze
   ===================================================================== */

/* ---------- Zie je eigen naam: één groot scherm, vier stijlen ---------- */
.look { padding: var(--section) var(--margin); }
.home .look { margin-inline: clamp(0.75rem, 1.6vw, 1.5rem); }
.look__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.look__head h2 { grid-column: 1 / 8; font-size: clamp(3rem, 1rem + 7vw, 8rem); line-height: 0.92; letter-spacing: -0.05em; }
.look .namefield { grid-column: 8 / 13; }
.look .namefield label { font-size: var(--step-body); font-weight: 500; }
.look .namefield input { background: var(--night); color: var(--paper); }
.look .namefield input::placeholder { color: #9AA1A8; }
.look .namefield input:focus-visible { background: #1C2731; }
.look__stage { position: relative; margin-top: 4rem; aspect-ratio: 16 / 8.2; max-height: 76svh; width: 100%; overflow: hidden; container-type: inline-size; background: var(--night); }
.look__slide { position: absolute; inset: 0; clip-path: inset(0 0 0 100%); transition: clip-path 900ms var(--ease-in-out); z-index: 1; }
.look__slide.is-on { clip-path: inset(0); z-index: 2; }
.look__slide.is-leaving { clip-path: inset(0); z-index: 1; }
.look__slide .k-name { transition: transform 900ms var(--ease-expo), opacity 600ms ease; }
.look__slide:not(.is-on) .k-name { transform: translateY(6%); }
/* de vier stijlen, groter uitgewerkt */
.look .k-site { padding: 3.2cqw 4cqw; display: flex; flex-direction: column; }
.look .k-nav { display: flex; justify-content: space-between; align-items: center; font-size: 1.2cqw; }
.look .k-nav i { display: flex; gap: 2.4cqw; font-style: normal; opacity: 0.8; }
.look .k-1 { background: #1F3A2C; color: #F1E9DA; }
.look .k-1 .k-mid { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 1.6cqw; }
.look .k-1 .k-pre { font-size: 1.3cqw; letter-spacing: 0.02em; opacity: 0.8; max-width: none; }
.look .k-1 .k-name { font-size: 7.6cqw; }
.look .k-1 .k-btn { font-size: 1.2cqw; padding: 0.9cqw 2.4cqw; }
.look .k-1 .k-foot { display: flex; justify-content: space-between; font-size: 1.1cqw; opacity: 0.75; }
.look .k-2 { display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: auto 1fr auto; gap: 2cqw 3cqw; background: #FFFFFF; color: #0B0B0B; }
.look .k-2 .k-nav { grid-column: 1 / 3; }
.look .k-2 .k-name { grid-column: 1; grid-row: 2; align-self: end; font-size: 8.4cqw; line-height: 0.88; letter-spacing: -0.06em; }
.look .k-2 .k-img { grid-column: 2; grid-row: 2 / 4; background: center 55% / cover linear-gradient(165deg, #46695A, #1F3A2C); }
.look .k-2 .k-txt { grid-column: 1; grid-row: 3; font-size: 1.3cqw; max-width: 30ch; }
.look .k-3 { background: #FFD23F; color: #121212; justify-content: space-between; }
.look .k-3 .k-name { font-size: 12.5cqw; line-height: 0.84; letter-spacing: -0.065em; text-transform: uppercase; font-weight: 600; }
.look .k-3 .k-bar { display: flex; gap: 1.2cqw; }
.look .k-3 .k-bar b { font-size: 1.3cqw; padding: 1cqw 2.2cqw; background: #121212; color: #FFD23F; }
.look .k-3 .k-sticker { position: absolute; right: 6cqw; top: 22%; width: 13cqw; height: 13cqw; border-radius: 50%; background: #121212; color: #FFD23F; display: grid; place-content: center; text-align: center; font-size: 1.25cqw; line-height: 1.15; font-weight: 600; transform: rotate(12deg); }
.look .k-4 { background: #EEF1F2; color: #1D2A33; gap: 2cqw; }
.look .k-4 .k-nav .k-name { font-size: 1.8cqw; font-weight: 500; letter-spacing: -0.01em; }
.look .k-4 .k-wide { flex: 1; background: center 50% / cover linear-gradient(165deg, #46695A, #1F3A2C); }
.look .k-4 .k-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.3cqw; }
.look .k-4 .k-row span { text-decoration: underline; text-underline-offset: 0.3em; }
/* de stijlknoppen met voortgangsbalk */
.look__tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); margin-top: 1.5rem; }
.look__tab { position: relative; display: grid; gap: 0.25rem; text-align: left; padding: 1rem 0 1.1rem; color: #6A7076; transition: color var(--t-hover) ease; }
.look__tab b { font-size: var(--step-title); font-weight: 600; letter-spacing: -0.03em; line-height: 1; }
.look__tab span { font-size: var(--step-small); }
.look__tab i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #DDD6CA; overflow: hidden; }
.look__tab i::after { content: ""; position: absolute; inset: 0; background: var(--sun); transform: scaleX(0); transform-origin: left; }
.look__tab.is-on { color: var(--night); }
.look__tab.is-on i::after { animation: tabfill var(--look-t, 3400ms) linear forwards; }
.look.is-paused .look__tab.is-on i::after { animation: none; transform: scaleX(1); }
@keyframes tabfill { to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) { .look__tab:hover { color: var(--night); } }
.look__foot { margin-top: 3.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.look__foot p { font-size: var(--step-lead); line-height: 1.35; font-weight: 500; max-width: 36ch; }
@media (max-width: 47.99em) {
  .look__head { display: block; }
  .look__head h2 { font-size: 15vw; }
  .look .namefield { margin-top: 2rem; }
  .look__stage { aspect-ratio: 4 / 5; margin-top: 2.5rem; }
  .look .k-site { padding: 6cqw; }
  .look .k-nav { font-size: 3cqw; }
  .look .k-1 .k-name { font-size: 15cqw; } .look .k-1 .k-pre, .look .k-1 .k-btn, .look .k-1 .k-foot { font-size: 3.2cqw; }
  .look .k-2 { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; } .look .k-2 .k-nav { grid-column: 1; }
  .look .k-2 .k-img { grid-column: 1; grid-row: 2; } .look .k-2 .k-name { grid-row: 3; font-size: 15cqw; } .look .k-2 .k-txt { grid-row: 4; font-size: 3.4cqw; }
  .look .k-3 .k-name { font-size: 20cqw; } .look .k-3 .k-bar b { font-size: 3.4cqw; } .look .k-3 .k-sticker { width: 28cqw; height: 28cqw; font-size: 3cqw; top: 14%; }
  .look .k-4 .k-nav .k-name { font-size: 4.4cqw; } .look .k-4 .k-row { font-size: 3.4cqw; flex-direction: column; gap: 1rem; }
  .look__tabs { grid-template-columns: 1fr 1fr; gap: 0 1rem; }
  .look__tab span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .look__slide { transition: none; } .look__tab.is-on i::after { animation: none; transform: scaleX(1); } }

/* ---------- werk: screenshots die naar de live sites linken ---------- */
.shot { position: relative; display: block; aspect-ratio: 16 / 10.5; text-decoration: none; color: var(--paper); }
.shot__desk { position: absolute; inset: 0 8% 0 0; overflow: hidden; background: var(--night); }
.shot__desk img { width: 100%; height: auto; display: block; transform: translateY(0); transition: transform 1.2s var(--ease-out); }
.shot__phone { position: absolute; right: 0; bottom: -6%; width: 24%; aspect-ratio: 9 / 19.5; overflow: hidden; border-radius: 1.1rem; border: 6px solid #0B1116; background: #0B1116; transition: transform 700ms var(--ease-out); }
.shot__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot__cta { position: absolute; left: 1.25rem; bottom: 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.1rem; background: var(--sun); color: var(--night); font-weight: 600; font-size: var(--step-body); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .shot:hover .shot__desk img { transform: translateY(calc(-100% + var(--frame-h, 500px))); transition: transform var(--scroll-t, 9s) cubic-bezier(0.45, 0, 0.55, 1); }
  .shot:hover .shot__phone { transform: translateY(-4%) rotate(-2deg); }
  .shot:hover .shot__cta { transform: translateY(-3px); }
}
.case__view .shot { margin-top: 0; }
@media (max-width: 47.99em) { .shot__phone { width: 30%; border-width: 4px; border-radius: 0.8rem; } }

/* ---------- oranje footer met het woordmerk groot ---------- */
.foot[data-field="sun"] { --f-soft: rgb(17 25 31 / 0.72); background: var(--sun); color: var(--night); padding: 5rem var(--margin) 2rem; }
.foot[data-field="sun"] .foot__cols { margin-top: 0; color: rgb(17 25 31 / 0.78); }
.foot[data-field="sun"] .foot__cols h2 { color: var(--night); }
.foot__mark { display: block; width: 100%; height: auto; margin-top: 5rem; fill: var(--night); }
.foot[data-field="sun"] .foot__last { color: rgb(17 25 31 / 0.78); }
.foot[data-field="sun"] :focus-visible { outline-color: var(--night); }
@media (prefers-reduced-motion: no-preference) {
  .js .foot__mark polygon { transform-box: fill-box; transform-origin: 50% 100%; transform: translateY(40%); opacity: 0; transition: transform 1100ms var(--ease-expo), opacity 600ms ease; }
  .js .foot__mark polygon:nth-child(2) { transition-delay: 80ms; } .js .foot__mark polygon:nth-child(3) { transition-delay: 160ms; }
  .js .foot__mark polygon:nth-child(4) { transition-delay: 240ms; } .js .foot__mark polygon:nth-child(5) { transition-delay: 320ms; }
  .js .foot__mark.is-in polygon { transform: none; opacity: 1; }
}

/* ---------- werkwijze: vier levende momenten ---------- */
.road__track { gap: 8vw; padding-right: var(--margin); }
.road__step { width: min(74vw, 1040px); grid-template-columns: 1fr minmax(0, 440px); gap: 4rem; }
.moment { position: relative; display: grid; gap: 0.9rem; padding: 1.75rem; background: var(--paper); color: var(--night); min-height: 300px; align-content: start; transform: translateY(24px) scale(0.96); opacity: 0.35; transition: transform 800ms var(--ease-expo), opacity 600ms ease; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }
.road__step.is-active .moment { transform: none; opacity: 1; }
.m-label { font-size: 0.9375rem; color: #4A5056; }
.m-field { display: flex; align-items: center; min-height: 3.5rem; padding: 0 1rem; background: var(--white); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; box-shadow: inset 0 -3px 0 var(--sun); } /* taste-skill-ignore: focus underline in a drawn form fragment */
.m-caret { width: 2px; height: 1.4em; margin-left: 2px; background: var(--night); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.m-chips { display: flex; gap: 6px; } .m-chips span { padding: 0.55rem 1rem; background: #E7E1D6; font-weight: 500; } .m-chips .is-on { background: var(--night); color: var(--paper); }
.m-send { justify-self: start; margin-top: 0.4rem; padding: 0.8rem 1.3rem; background: var(--sun); font-weight: 600; transform: scale(1); }
.road__step.is-active .m-send { animation: press 600ms var(--ease-out) 1.8s both; }
@keyframes press { 40% { transform: scale(0.94); } 100% { transform: scale(1); } }
.moment--demo { place-items: center; background: #1C2731; color: var(--paper); }
.m-phone { width: 190px; aspect-ratio: 9 / 18; padding: 8px; background: #0B1116; border-radius: 26px; container-type: inline-size; }
.m-screen { display: grid !important; place-content: center; justify-items: center; gap: 10cqw; height: 100%; border-radius: 18px; text-align: center; clip-path: inset(100% 0 0 0); transition: clip-path 1000ms var(--ease-in-out) 200ms; }
.road__step.is-active .m-screen { clip-path: inset(0 round 18px); }
.m-screen .k-name { font-size: 15cqw !important; }
.m-screen .k-btn { font-size: 6cqw !important; padding: 3cqw 7cqw !important; }
.m-note { font-weight: 600; }
.moment--decide { place-content: center; justify-items: center; text-align: center; gap: 1.5rem; }
.m-q { font-size: var(--step-title); font-weight: 600; letter-spacing: -0.03em; }
.m-btns { display: flex; gap: 10px; }
.m-btns > span { padding: 1rem 1.4rem; font-weight: 600; background: #E7E1D6; display: inline-flex; align-items: center; gap: 0.5rem; transition: background-color 300ms ease 2.1s, transform 200ms ease 2.1s; }
.road__step.is-active .m-yes { background: var(--sun); transform: scale(0.96); }
.m-check { width: 0; height: 11px; background: var(--night); clip-path: polygon(0 55%, 14% 41%, 38% 66%, 86% 0, 100% 14%, 38% 94%); transition: width 300ms var(--ease-out) 2.2s; }
.road__step.is-active .m-check { width: 13px; }
.m-cursor { position: absolute; left: 20%; top: 85%; transition: left 1.2s var(--ease-in-out) 700ms, top 1.2s var(--ease-in-out) 700ms; }
.road__step.is-active .m-cursor { left: 66%; top: 62%; }
.moment--live { padding: 0; gap: 0; background: var(--white); overflow: hidden; }
.m-url { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1.1rem; background: #E7E1D6; font-weight: 500; }
.m-dot { width: 9px; height: 9px; border-radius: 50%; background: #9AA1A8; transition: background-color 300ms ease 1.6s; }
.road__step.is-active .m-dot { background: #1F9D55; }
.m-load { height: 3px; background: #E7E1D6; } .m-load span { display: block; height: 100%; background: var(--sun); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease-in-out) 200ms; }
.road__step.is-active .m-load span { transform: scaleX(1); }
.m-site { display: grid !important; grid-template-columns: 1.2fr 1fr; gap: 10px; height: 230px; padding: 16px !important; container-type: inline-size; opacity: 0; transition: opacity 600ms ease 1.5s; }
.road__step.is-active .m-site { opacity: 1; }
.m-site .k-name { align-self: end; font-size: 9cqw !important; line-height: 0.9; letter-spacing: -0.05em; font-weight: 600; }
.m-site .k-img { background: center / cover linear-gradient(165deg, #46695A, #1F3A2C); }
.m-live { position: absolute; right: 14px; bottom: 14px; padding: 0.4rem 0.8rem; background: var(--sun); font-weight: 600; transform: scale(0); transition: transform 500ms var(--ease-out) 1.9s; }
.road__step.is-active .m-live { transform: scale(1); }
@media (max-width: 63.99em) { .road__step { width: min(80vw, 640px); grid-template-columns: 1fr; gap: 2rem; } }
@media (max-width: 47.99em), (prefers-reduced-motion: reduce) {
  .road__step { width: auto; }
  .moment { transform: none; opacity: 1; }
}

.m-screen, .m-site { position: relative !important; inset: auto !important; }

/* =====================================================================
   v5 · naar mrboost: parallax-footer, zwevende knop, regel-onthulling,
   wisselend woord, cursor-label, lopende projectnaam
   ===================================================================== */

/* ---------- footer: de pagina trekt weg van de footer eronder ---------- */
.foot-wrap { position: relative; z-index: 1; overflow: hidden; background: var(--sun); }
.foot-wrap__dark { position: absolute; inset: 0; z-index: 2; background: var(--night); opacity: var(--fd, 0); pointer-events: none; }
.foot2 { position: relative; z-index: 1; padding: clamp(3.5rem, 6vw, 6rem) var(--margin) 0; background: var(--sun); color: var(--night); transform: translate3d(0, var(--fy, 0%), 0); will-change: transform; }
.foot2 h2 { font-size: var(--step-body); font-weight: 500; letter-spacing: -0.005em; color: rgb(17 25 31 / 0.55); margin-bottom: 1.25rem; }
.foot2__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
.foot2__contact { display: grid; gap: 0.2rem; align-content: start; justify-items: start; }
.foot2__big, .foot2 ul a { position: relative; color: var(--night); text-decoration: none; }
.foot2__big { font-size: clamp(1.75rem, 1rem + 2.6vw, 3.5rem); line-height: 1.08; letter-spacing: -0.04em; font-weight: 500; padding-block: 0.1rem; }
.foot2 ul { display: grid; gap: 0; }
.foot2 ul a { display: inline-block; font-size: var(--step-body); font-weight: 500; padding-block: 0.4rem; }
.foot2__big::after, .foot2 ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.08em; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 735ms cubic-bezier(0.625, 0.05, 0, 1); }
.foot2 ul a::after { bottom: 0.45rem; height: 1.5px; }
@media (hover: hover) and (pointer: fine) { .foot2__big:hover::after, .foot2 ul a:hover::after { transform: scaleX(1); transform-origin: left; } }
.foot2__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; padding: 1.25rem 0; font-size: var(--step-small); font-weight: 500; color: rgb(17 25 31 / 0.72); background: linear-gradient(rgb(17 25 31 / 0.2), rgb(17 25 31 / 0.2)) top / 100% 1px no-repeat; } /* taste-skill-ignore: footer meta divider, as in the reference */
.foot2__meta address { font-style: normal; }
.foot2 .foot__mark { width: calc(100% + 0.6vw); margin: 1.5vw 0 -1.2vw -0.3vw; fill: var(--night); }
@media (max-width: 47.99em) { .foot2__grid { grid-template-columns: 1fr 1fr; } .foot2__contact { grid-column: 1 / -1; } }
.home .foot-wrap { margin: 0; }

/* ---------- zwevende offerteknop ---------- */
.fab { position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 60; transform: translate(-50%, 140%); opacity: 0; pointer-events: none; transition: transform 700ms cubic-bezier(0.5, 0.5, 0, 1), opacity 550ms cubic-bezier(0.5, 0.5, 0, 1); }
.fab.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .fab.is-visible:hover { transform: translate(-50%, -3px); } }

/* ---------- koppen komen per regel uit een masker ---------- */
.split-line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.split-inner { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-split]:not(.is-split) { visibility: hidden; }
  .js [data-split] .split-inner { transform: translateY(115%); transition: transform 800ms var(--ease-expo); transition-delay: calc(var(--l, 0) * 80ms); }
  .js [data-split].is-in .split-inner { transform: none; }
}

/* ---------- wisselend woord ---------- */
.rot { position: relative; display: inline-block; white-space: nowrap; color: var(--sun); }
.rot__measure { visibility: hidden; }
.rot__word { position: absolute; left: 0; top: 0; white-space: nowrap; }
.rot__word.is-in { animation: rot-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.rot__word.is-out { animation: rot-out 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rot-in { 0% { transform: translateY(0.52em); filter: blur(6px); opacity: 0; } 55% { filter: blur(0); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes rot-out { to { transform: translateY(-0.52em); filter: blur(6px); opacity: 0; } }

/* ---------- cursor-label boven het werk ---------- */
.cursor-tag { position: fixed; left: 0; top: 0; z-index: 90; pointer-events: none; transform: translate3d(var(--cx, -200px), var(--cy, -200px), 0); }
.cursor-tag__pill { display: block; overflow: hidden; translate: -50% -50%; padding: 0.7rem 1.1rem; background: var(--paper); color: var(--night); font-weight: 600; font-size: 0.9375rem; white-space: nowrap; border-radius: 99px; clip-path: inset(calc(50% - 0.2em) round 50em); opacity: 0; transition: clip-path 400ms cubic-bezier(0.75, 0, 0.25, 1), opacity 300ms ease; }
.cursor-tag.is-on .cursor-tag__pill { clip-path: inset(0 round 50em); opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-tag { display: none; } }
@media (hover: hover) and (pointer: fine) { .shot { cursor: none; } }

/* ---------- lopende projectnaam over de screenshot ---------- */
.shot__band { position: absolute; left: 0; right: 8%; top: 50%; z-index: 3; overflow: hidden; translate: 0 -50%; pointer-events: none; opacity: 0; transition: opacity 450ms ease; }
.shot__band span { display: flex; width: max-content; animation: band 26s linear infinite; }
.shot__band b { padding-right: 0.4em; font-size: clamp(3rem, 1rem + 5.5vw, 7rem); font-weight: 600; letter-spacing: -0.05em; line-height: 1.1; color: var(--paper); text-shadow: none; }
.shot__band b::after { content: "Λ"; padding-left: 0.4em; color: var(--sun); }
@keyframes band { to { transform: translateX(-50%); } }
.shot__desk::after { content: ""; position: absolute; inset: 0; background: rgb(11 17 22 / 0.42); opacity: 0; transition: opacity 450ms ease; }
@media (hover: hover) and (pointer: fine) {
  .shot:hover .shot__band, .shot:hover .shot__desk::after { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .shot__band span { animation: none; } }

/* Erbij: een getekend stukje interface in plaats van een foto */
.row__pic--ui { aspect-ratio: auto; width: min(30vw, 440px); background: var(--paper); color: var(--night); }
@media (hover: none), (pointer: coarse) { .row__pic--ui { width: 100%; } }
@media (max-width: 29.99em) { .ui-row { grid-template-columns: 5.6rem 1fr auto; gap: 0.6rem; padding-inline: 0.9rem; font-size: 0.875rem; } .ui-www { display: none; } }
.ui-mail { display: grid; padding: 0.4rem 0; }
.ui-row { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.85rem 1.1rem; font-size: 0.9375rem; }
.ui-row + .ui-row { background: linear-gradient(#E1DACE, #E1DACE) top / 100% 1px no-repeat; } /* taste-skill-ignore: rows inside an interface fragment */
.ui-row b { font-weight: 600; } .ui-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-row i { font-style: normal; font-weight: 600; font-size: 0.8125rem; padding: 0.2rem 0.6rem; background: #DDEFE3; color: #145C33; }
.window__pic img { object-position: top center; }

/* het venster: de werkweek in reuzenletters */
.week { background: var(--sun); color: var(--night); display: grid; place-items: center; }
.week__days { display: grid; grid-template-columns: repeat(7, 1fr); width: calc(100% - 2 * var(--margin)); gap: var(--gutter); }
.week__days li { display: grid; gap: 0.6rem; }
.week__days b { font-size: clamp(3rem, 0.5rem + 9vw, 12rem); line-height: 0.85; letter-spacing: -0.06em; font-weight: 600; color: rgb(17 25 31 / 0.18); transition: color 500ms ease; }
.week__days span { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; opacity: 0; transform: translateY(10px); transition: opacity 500ms ease, transform 600ms var(--ease-expo); }
.week__days li.is-on b { color: var(--night); }
.week__days li.is-on span { opacity: 1; transform: none; }
.week__days li:last-child.is-on span { color: var(--paper); background: var(--night); justify-self: start; padding: 0.15em 0.5em; }
@media (max-width: 47.99em) {
  .week__days { grid-template-columns: 1fr; gap: 0.2rem; }
  .week__days li { grid-template-columns: 6rem 1fr; align-items: baseline; }
  .week__days b { font-size: 18vw; }
}
@media (prefers-reduced-motion: reduce) { .week__days li b { color: var(--night); } .week__days li span { opacity: 1; transform: none; } .window__pic.week { height: auto; padding: 4rem 0; } }

/* week: kolommen gecentreerd, gelijk ritme */
.week__days li { justify-items: center; text-align: center; }
.week__days li:last-child.is-on span { justify-self: center; }
@media (max-width: 47.99em) { .week__days li { justify-items: start; text-align: left; } }
/* werkwijze: stappen centreren, tekst nooit tegen de rand */
.road__track { padding-left: 0; padding-right: 0; gap: 10vw; }
.road__step { width: min(84vw, 1100px); }

/* werkwijze stap 2: een echte mini-homepage die vanzelf scrollt */
.moment--demo .m-phone { width: 220px; aspect-ratio: 9 / 19; padding: 9px; border-radius: 34px; background: #05080B; box-shadow: 0 30px 60px rgb(0 0 0 / 0.45); } /* taste-skill-ignore: device mockup floats over the scene */
.m-screen2 { display: block; height: 100%; overflow: hidden; border-radius: 26px; background: #F4EFE6; color: #1F3A2C; container-type: inline-size; clip-path: inset(100% 0 0 0 round 26px); transition: clip-path 1000ms var(--ease-in-out) 200ms; }
.road__step.is-active .m-screen2 { clip-path: inset(0 round 26px); }
.m-scroll { display: grid; gap: 5cqw; padding-bottom: 6cqw; }
.road__step.is-active .m-scroll { animation: msscroll 7s var(--ease-in-out) 1.3s infinite alternate; }
@keyframes msscroll { 0%, 12% { transform: translateY(0); } 88%, 100% { transform: translateY(calc(-100% + 395px)); } }
.ms-status { display: flex; justify-content: space-between; align-items: center; padding: 3.5cqw 7cqw 0; font-size: 4.6cqw; }
.ms-status i { width: 14cqw; height: 3.4cqw; border-radius: 2cqw; background: #1F3A2C; opacity: 0.8; }
.ms-nav { display: flex; justify-content: space-between; align-items: center; padding: 0 7cqw; }
.ms-nav b { font-family: "Fraunces", Georgia, serif; font-size: 6cqw; }
.ms-nav i { width: 7cqw; height: 4cqw; background: linear-gradient(#1F3A2C, #1F3A2C) top / 100% 2px no-repeat, linear-gradient(#1F3A2C, #1F3A2C) bottom / 100% 2px no-repeat; } /* taste-skill-ignore: hamburger icon inside a drawn phone */
.ms-hero { --ms-img: radial-gradient(70% 55% at 78% 22%, rgb(233 161 90 / 0.55), transparent 70%), linear-gradient(165deg, #46695A, #1F3A2C 70%); position: relative; display: block; height: 108cqw; margin: 0 4cqw; border-radius: 4cqw; overflow: hidden; background: #1F3A2C; }
.ms-hero__img { position: absolute; inset: 0; background: var(--ms-img, none); }
.ms-hero__img::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgb(12 26 18 / 0.85)); } /* taste-skill-ignore: neutral scrim under text on a photo */
.ms-hero__txt { position: absolute; left: 6cqw; right: 6cqw; bottom: 6cqw; display: grid; gap: 2.5cqw; color: #F4EFE6; }
.ms-hero__txt b { font-family: "Fraunces", Georgia, serif; font-size: 11cqw; line-height: 0.98; font-weight: 600; }
.ms-hero__txt span { font-size: 4.4cqw; opacity: 0.85; }
.ms-hero__txt em { justify-self: start; font-style: normal; font-size: 4.2cqw; font-weight: 600; padding: 2.4cqw 5cqw; border-radius: 99px; background: #F4EFE6; color: #1F3A2C; }
.ms-h { padding: 2cqw 7cqw 0; font-family: "Fraunces", Georgia, serif; font-size: 7cqw; font-weight: 600; }
.ms-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; padding: 0 7cqw; }
.ms-cards span { display: grid; gap: 2cqw; font-size: 3.8cqw; font-weight: 600; }
.ms-cards i { aspect-ratio: 1; border-radius: 3cqw; background: #DCD3C3; }
.ms-cards span:nth-child(2) i { background: #C9D3C4; } .ms-cards span:nth-child(3) i { background: #E6C9A8; }
.ms-hours { display: grid; padding: 0 7cqw; font-size: 4.2cqw; }
.ms-hours span { display: flex; justify-content: space-between; padding: 2.2cqw 0; background: linear-gradient(#D8CFC0, #D8CFC0) bottom / 100% 1px no-repeat; } /* taste-skill-ignore: rows inside a drawn phone */
.ms-cta { margin: 2cqw 7cqw 0; padding: 4cqw; text-align: center; border-radius: 99px; background: #1F3A2C; color: #F4EFE6; font-weight: 600; font-size: 4.4cqw; }
.ms-foot { display: grid; gap: 1.5cqw; margin-top: 4cqw; padding: 7cqw; background: #1F3A2C; color: #F4EFE6; font-size: 3.8cqw; }
.ms-foot b { font-family: "Fraunces", Georgia, serif; font-size: 6cqw; }
@media (prefers-reduced-motion: reduce) { .road__step.is-active .m-scroll { animation: none; } }

/* offerteblok: een invulzin in reuzenletters */
.ask .ask__body { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.ask .ask__body .ask__big { font-size: clamp(3.5rem, 1rem + 9.5vw, 12rem); line-height: 0.88; letter-spacing: -0.055em; max-width: 9ch; }
.madlib__line { max-width: none; font-size: clamp(1.75rem, 1rem + 3vw, 4rem); line-height: 1.25; letter-spacing: -0.035em; font-weight: 500; color: rgb(243 239 232 / 0.62); }
.madlib__line input { font: inherit; letter-spacing: inherit; font-weight: 600; color: var(--paper); background: transparent; border: 0; border-radius: 0; padding: 0 0.1em; min-width: 4ch; box-shadow: inset 0 -0.08em 0 var(--sun); transition: box-shadow var(--t-hover) ease; } /* taste-skill-ignore: underline of an inline form field */
.madlib__line input::placeholder { color: rgb(243 239 232 / 0.35); }
.madlib__line input:focus-visible { outline: none; box-shadow: inset 0 -0.14em 0 var(--sun); } /* taste-skill-ignore: focus underline */
.madlib__go { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.5rem; }
.madlib__go .button { min-height: 4rem; font-size: var(--step-lead); padding: 0 2rem 0 1.75rem; }
.madlib__go p { color: var(--f-soft); font-size: var(--step-body); }
.madlib__go a { color: var(--paper); }
@media (max-width: 47.99em) { .madlib__line input { width: 100%; display: block; margin: 0.2em 0; } }

/* =====================================================================
   projectenpagina: index met preview, tegels, uitgewerkte cases
   ===================================================================== */
.proj-head { padding: calc(var(--section) * 0.7) var(--margin) 3rem; }
.proj-head__title { font-size: clamp(4rem, 1rem + 13vw, 16rem); line-height: 0.85; letter-spacing: -0.06em; }
.proj-head__lead { margin-top: 2rem; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; max-width: 36ch; color: var(--f-soft); }
.proj-index { margin-top: 4rem; }
.proj-index__row a { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2rem; padding: 1.4rem 0; text-decoration: none; background: linear-gradient(var(--f-step), var(--f-step)) top / 100% 1px no-repeat; } /* taste-skill-ignore: index rows divider, as in reference sites */
.proj-index__name { font-size: clamp(2.5rem, 1rem + 5vw, 6.5rem); line-height: 1; letter-spacing: -0.05em; font-weight: 600; transition: transform 500ms var(--ease-out), color 300ms ease; }
.proj-index__meta { font-size: var(--step-body); color: var(--f-soft); }
.proj-index__pic { position: absolute; right: 30%; top: 50%; width: min(24vw, 360px); aspect-ratio: 16 / 10; overflow: hidden; pointer-events: none; opacity: 0; transform: translateY(-50%) rotate(3deg) scale(0.92); transition: opacity 300ms ease, transform 500ms var(--ease-out); }
.proj-index__pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (hover: hover) and (pointer: fine) {
  .proj-index__row a:hover .proj-index__name { transform: translateX(1.5rem); color: var(--sun); }
  .proj-index__row a:hover .proj-index__pic { opacity: 1; transform: translateY(-50%) rotate(3deg) scale(1); }
}
@media (max-width: 47.99em) { .proj-index__row a { grid-template-columns: 1fr; gap: 0.4rem; } .proj-index__pic { display: none; } }

.proj-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); padding: 2rem var(--margin) var(--section); }
.ptile { display: grid; gap: 1.25rem; align-content: start; }
.ptile .shot { aspect-ratio: 16 / 11; }
.ptile__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; }
.ptile__meta h2 { font-size: var(--step-title); }
.ptile__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ptile__chips li { padding: 0.4rem 0.8rem; background: var(--f-step); font-size: var(--step-small); font-weight: 500; }
.ptile--next { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; padding: clamp(2rem, 4vw, 3.5rem); background: var(--sun); color: var(--night); text-decoration: none; clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); transition: transform 500ms var(--ease-out); }
.ptile--next__q { font-size: clamp(2.5rem, 1rem + 5vw, 6rem); line-height: 0.95; letter-spacing: -0.05em; font-weight: 600; }
.ptile--next__a { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--step-lead); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .ptile--next:hover { transform: translateY(-4px); } .ptile--next:hover .arrow { transform: translateX(4px); } }
@media (max-width: 47.99em) { .proj-grid { grid-template-columns: 1fr; } }

.case2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding: var(--section) var(--margin); }
.case2__text { grid-column: 1 / 6; display: grid; gap: 1.5rem; justify-items: start; }
.case2__text h2 { font-size: var(--step-head); }
.case2__text p { font-size: var(--step-body); }
.case2__pics { grid-column: 7 / 13; position: relative; margin: 0; padding-bottom: 8%; }
.case2__desk { width: 88%; height: auto; display: block; }
.case2__mob { position: absolute; right: 0; bottom: 0; width: 26%; height: auto; border-radius: 1rem; border: 6px solid var(--night); }
.case2--flip .case2__text { grid-column: 8 / 13; grid-row: 1; }
.case2--flip .case2__pics { grid-column: 1 / 7; grid-row: 1; }
@media (max-width: 47.99em) { .case2 { display: block; } .case2__pics { margin-top: 2.5rem; } }

@media (max-width: 47.99em) {
  .week__days li:last-child.is-on span { justify-self: start; }
  .week__days b { font-size: 15vw; }
}
/* footer-woordmerk: altijd zichtbaar op kleine schermen */
@media (max-width: 47.99em) { .js .foot__mark polygon { transform: none; opacity: 1; } }

/* mobiel: werkwijze-stappen en cases als swipe-kaarten */
@media (max-width: 47.99em) {
  .road__stage { padding-inline: 0; }
  .road__title { padding-inline: var(--margin); }
  .road__track { display: flex !important; gap: 12px; padding: 0 var(--margin) 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .road__track::-webkit-scrollbar { display: none; }
  .road__step { flex: 0 0 86%; scroll-snap-align: center; align-content: start; }
  .road__clause { font-size: 9vw; }
  .cases { display: flex; gap: 12px; margin: 0 calc(var(--margin) * -1); padding: 0 var(--margin) 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .cases::-webkit-scrollbar { display: none; }
  .cases .case { flex: 0 0 88%; margin: 0; scroll-snap-align: center; }
}

/* ervaringen: slider, elke 5 seconden verder */
.voices2 { display: block; padding: var(--section) var(--margin); }
.voices3__head { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 3rem; }
.voices3__head h2 { font-size: var(--step-head); }
.voices3__ctrl { display: flex; gap: 8px; }
.voices3__btn { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; background: var(--night); color: var(--paper); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.voices3__btn:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { .voices3__btn:hover { background: var(--sun); color: var(--night); } }
.voices3__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.voices3__track::-webkit-scrollbar { display: none; }
.vslide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin: 0; }
.vslide blockquote { grid-column: 1 / 9; margin: 0; }
.vslide__q { font-size: clamp(2rem, 1rem + 3.4vw, 4.5rem); line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; max-width: 18ch; color: #6A7076; }
.vslide figcaption { grid-column: 9 / 13; display: flex; align-items: end; gap: 1.25rem; justify-self: end; }
.vslide figcaption img { width: 8.5rem; aspect-ratio: 9 / 18; object-fit: cover; object-position: top; border-radius: 1rem; border: 5px solid var(--night); }
.vslide figcaption span { display: grid; gap: 0.25rem; font-size: var(--step-small); color: #4A5056; max-width: 16ch; }
.vslide figcaption b { font-size: var(--step-body); color: var(--night); }
.voices3__dots { display: flex; gap: 8px; margin-top: 2.5rem; }
.voices3__dots i { position: relative; flex: 0 0 4rem; height: 3px; background: #DDD6CA; overflow: hidden; }
.voices3__dots i::after { content: ""; position: absolute; inset: 0; background: var(--sun); transform: scaleX(0); transform-origin: left; }
.voices3__dots i.is-done::after { transform: scaleX(1); }
.voices3__dots i.is-on::after { animation: tabfill 5000ms linear forwards; }
@media (max-width: 47.99em) {
  .vslide { display: grid; grid-template-columns: 1fr; gap: 2rem; }
  .vslide blockquote, .vslide figcaption { grid-column: 1; justify-self: start; }
  .vslide__q { font-size: 9vw; }
  .voices3__btn { width: 3rem; height: 3rem; }
}

/* offerteblok v3: reuzenkop + kaart met twee vragen */
.ask2 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: center; padding-inline: var(--margin); }
.ask2__intro { grid-column: 1 / 7; display: grid; gap: 1.75rem; align-content: center; }
.ask2__big { font-size: clamp(3.5rem, 1rem + 7.4vw, 10rem); line-height: 0.88; letter-spacing: -0.055em; }
.ask2__intro p { font-size: var(--step-lead); line-height: 1.35; font-weight: 500; max-width: 30ch; color: var(--f-soft); }
.ask2__wa a { color: var(--paper); }
.ask2__card { grid-column: 8 / 13; display: grid; gap: 1.1rem; padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--paper); color: var(--night); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%); }
.ask2__q { display: block; font-size: var(--step-body); font-weight: 600; margin: 0 0 0.25rem; padding: 0; }
.ask2__name { width: 100%; min-height: 4rem; padding: 0 1.1rem; border: 0; border-radius: 0; background: var(--white); color: var(--night); font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); font-weight: 600; letter-spacing: -0.02em; box-shadow: inset 0 -3px 0 #E1DACE; transition: box-shadow var(--t-hover) ease; } /* taste-skill-ignore: field underline */
.ask2__name:focus-visible { outline: none; box-shadow: inset 0 -4px 0 var(--sun); } /* taste-skill-ignore: focus underline */
.ask2__name::placeholder { color: #8A8F94; font-weight: 500; }
.ask2__set { border: 0; margin: 0.6rem 0 0; padding: 0; }
.ask2__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ask2__chips input { position: absolute; opacity: 0; pointer-events: none; }
.ask2__chips span { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 1rem; background: #E7E1D6; font-weight: 500; cursor: pointer; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.ask2__chips label:active span { transform: scale(0.97); }
.ask2__chips input:checked + span { background: var(--night); color: var(--paper); }
.ask2__chips input:focus-visible + span { outline: 3px solid var(--sun); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ask2__chips span:hover { background: #DDD6CA; } .ask2__chips input:checked + span:hover { background: var(--night); } }
.ask2__go { margin-top: 0.75rem; display: flex; align-items: center; justify-content: space-between; min-height: 4.25rem; padding: 0 1.5rem; background: var(--sun); color: var(--night); font-weight: 600; font-size: var(--step-lead); transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.ask2__go:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .ask2__go:hover { background: var(--night); color: var(--paper); } .ask2__go:hover .arrow { transform: translateX(4px); } }
.ask2__go .arrow { transition: transform var(--t-ui) var(--ease-out); }
@media (max-width: 63.99em) { .ask2__intro, .ask2__card { grid-column: 1 / 13; } }

/* =====================================================================
   Zie je eigen naam v3: browservenster met jouw adres, vier uitgewerkte homepages
   ===================================================================== */
.look__stage { aspect-ratio: auto; max-height: none; display: grid; grid-template-rows: auto 1fr; background: #0B1116; padding: 0; border-radius: 0.9rem; overflow: hidden; box-shadow: 0 40px 80px -30px rgb(17 25 31 / 0.55); } /* taste-skill-ignore: the browser window floats over the page */
.look__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 2.6rem; padding: 0 1rem; background: #1C2731; color: #B9BEC4; }
.look__dots { display: flex; gap: 6px; } .look__dots i { width: 10px; height: 10px; border-radius: 50%; background: #3A4651; }
.look__url { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.3rem 1.1rem; border-radius: 99px; background: #11191F; font-size: 0.875rem; color: var(--paper); }
.look__view { position: relative; aspect-ratio: 16 / 8.6; container-type: inline-size; overflow: hidden; }
.look .ls { position: absolute; inset: 0; padding: 2.4cqw 3.4cqw; display: flex; flex-direction: column; gap: 2cqw; }
/* opbouw: onderdelen komen na elkaar */
.ls-a { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 900ms var(--ease-expo); transition-delay: calc(var(--a, 0) * 90ms + 250ms); }
.look__slide.is-on .ls-a, .look__slide.is-leaving .ls-a { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ls-a { opacity: 1; transform: none; transition: none; } }
.ls-nav { display: flex; align-items: center; gap: 2cqw; font-size: 1.15cqw; }
.ls-nav b { font-size: 1.6cqw; margin-right: auto; }
.ls-nav span { display: flex; gap: 2.2cqw; } .ls-nav i { font-style: normal; opacity: 0.75; }
.ls-nav em { font-style: normal; font-weight: 600; padding: 0.7cqw 1.6cqw; border-radius: 99px; }
.ls-pill { justify-self: start; display: inline-block; padding: 0.5cqw 1.1cqw; border-radius: 99px; font-size: 1cqw; font-weight: 600; }
.ls-btns { display: flex; gap: 1cqw; } .ls-btns em, .ls-btns u { font-style: normal; text-decoration: none; font-weight: 600; font-size: 1.1cqw; padding: 1cqw 2cqw; border-radius: 99px; }
/* 1 · Ambachtelijk */
.ls1 { background: #F4EFE6; color: #1F3A2C; }
.ls1 .ls-nav b, .ls1-h { font-family: "Fraunces", Georgia, serif; }
.ls1 .ls-nav em, .ls1 .ls-btns em { background: #1F3A2C; color: #F4EFE6; }
.ls1 .ls-btns u { box-shadow: inset 0 0 0 1.5px #1F3A2C; } /* taste-skill-ignore: outline button inside a sketch */
.ls1 .ls-pill { background: #E3DBC9; }
.ls1-hero { flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; gap: 3cqw; align-items: center; }
.ls1-txt { display: grid; gap: 1.6cqw; justify-items: start; }
.ls1-h { font-size: 5cqw; line-height: 0.98; font-weight: 600; letter-spacing: -0.02em; max-width: 12ch; }
.ls1-p { font-size: 1.2cqw; line-height: 1.5; max-width: 40ch; opacity: 0.85; }
.ls1-open { display: inline-flex; align-items: center; gap: 0.6cqw; font-size: 1cqw; font-weight: 600; }
.ls1-open i { width: 0.7cqw; height: 0.7cqw; border-radius: 50%; background: #3F8F55; }
.ls1-img { position: relative; height: 100%; min-height: 26cqw; border-radius: 1.4cqw; background: center / cover linear-gradient(165deg, #46695A, #1F3A2C); }
.ls1-note { position: absolute; left: -2cqw; bottom: 2.4cqw; padding: 1.2cqw 1.6cqw; background: #F4EFE6; border-radius: 1cqw; font-size: 1.05cqw; font-weight: 600; box-shadow: 0 1cqw 2.4cqw rgb(31 58 44 / 0.18); } /* taste-skill-ignore: floating card inside a sketch */
/* 2 · Strak */
.ls2 { background: #FFFFFF; color: #0B0B0B; }
.ls2-name { font-size: 10.5cqw; line-height: 0.85; letter-spacing: -0.06em; font-weight: 600; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.ls2-row { flex: 1; display: grid; grid-template-columns: 2fr 1fr; gap: 2.4cqw; min-height: 0; }
.ls2-img { background: center 55% / cover linear-gradient(165deg, #46695A, #1F3A2C); }
.ls2-side { display: grid; align-content: space-between; font-size: 1.25cqw; }
.ls2-side p { max-width: 22ch; line-height: 1.4; } .ls2-side u { font-weight: 600; text-underline-offset: 0.3em; }
.ls2-meta { display: grid; gap: 0.6cqw; } .ls2-meta b { padding-top: 0.6cqw; background: linear-gradient(#0B0B0B, #0B0B0B) top / 100% 1px no-repeat; font-weight: 500; } /* taste-skill-ignore: rule inside a sketch */
/* 3 · Kleurrijk */
.ls3 { background: #FFD23F; color: #121212; }
.ls3 .ls-nav em { background: #121212; color: #FFD23F; }
.ls3-name { font-size: 11cqw; line-height: 0.82; letter-spacing: -0.065em; font-weight: 600; text-transform: uppercase; max-width: 9ch; }
.ls3-sticker { position: absolute; right: 5cqw; top: 9cqw; width: 12cqw; height: 12cqw; border-radius: 50%; background: #121212; color: #FFD23F; display: grid; place-content: center; text-align: center; padding: 1.5cqw; font-size: 1.2cqw; line-height: 1.15; font-weight: 600; rotate: 12deg; }
.ls3-cards { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
.ls3-cards span { display: grid; grid-template-columns: 1fr auto; gap: 0.6cqw; padding: 1cqw; background: #FFF4C7; font-size: 1.15cqw; }
.ls3-cards i { grid-column: 1 / -1; height: 6.5cqw; background: var(--c); } .ls3-cards em { font-style: normal; font-weight: 600; }
/* 4 · Rustig */
.ls4 { background: #EEF1F2; color: #1D2A33; }
.ls4 .ls-nav b { font-weight: 500; }
.ls4-img { flex: 1; background: center 50% / cover linear-gradient(165deg, #46695A, #1F3A2C); border-radius: 0.6cqw; }
.ls4-book { position: absolute; right: 6cqw; bottom: 8cqw; display: grid; gap: 1cqw; padding: 1.8cqw; background: #FFFFFF; border-radius: 1cqw; font-size: 1.1cqw; box-shadow: 0 1.2cqw 3cqw rgb(29 42 51 / 0.16); } /* taste-skill-ignore: floating booking card inside a sketch */
.ls4-book b { font-size: 1.4cqw; } .ls4-book span { display: flex; gap: 0.6cqw; }
.ls4-book i { font-style: normal; padding: 0.6cqw 1cqw; background: #EEF1F2; border-radius: 0.5cqw; } .ls4-book i.is-on { background: #1D2A33; color: #fff; }
.ls4-book em { font-style: normal; text-align: center; padding: 0.9cqw; background: #1D2A33; color: #fff; border-radius: 0.5cqw; font-weight: 600; }
.ls4-cap { font-size: 1.2cqw; }
/* smal (telefoon): alles groter en gestapeld */
@container (max-width: 600px) {
  .look .ls { padding: 5cqw; gap: 4cqw; }
  .ls-nav { font-size: 3cqw; } .ls-nav b { font-size: 4.2cqw; } .ls-nav span { display: none; } .ls-nav em { padding: 1.6cqw 3.4cqw; }
  .ls1-hero { grid-template-columns: 1fr; gap: 4cqw; } .ls1-img { min-height: 40cqw; order: -1; }
  .ls1-h { font-size: 9cqw; } .ls1-p, .ls1-open { font-size: 3cqw; } .ls-pill { font-size: 2.6cqw; padding: 1.2cqw 2.4cqw; }
  .ls-btns em, .ls-btns u { font-size: 3cqw; padding: 2.4cqw 4.4cqw; } .ls1-note { display: none; }
  .ls2-name { font-size: 15cqw; white-space: normal; } .ls2-row { grid-template-columns: 1fr; } .ls2-img { min-height: 52cqw; } .ls2-side { font-size: 3.2cqw; gap: 3cqw; }
  .ls3-name { font-size: 18cqw; } .ls3-sticker { width: 26cqw; height: 26cqw; font-size: 2.8cqw; top: 26cqw; } .ls3-cards { grid-template-columns: 1fr 1fr; } .ls3-cards span { font-size: 2.8cqw; } .ls3-cards span:last-child { display: none; } .ls3-cards i { height: 16cqw; }
  .ls4-img { min-height: 50cqw; } .ls4-book { position: static; font-size: 3cqw; padding: 4cqw; gap: 2.4cqw; } .ls4-book b { font-size: 3.6cqw; } .ls4-book i { padding: 1.6cqw 2.2cqw; } .ls4-cap { font-size: 3.2cqw; }
}
@media (max-width: 47.99em) { .look__view { aspect-ratio: 4 / 6.2; } .look__url { font-size: 0.75rem; padding: 0.25rem 0.8rem; } }

/* venster v2: het oranje vlak schuift als geheel omhoog, niets half afgesneden */
.window .window__pic.week { clip-path: inset(0 0 var(--wkb, 0%) 0); transform: translate3d(0, var(--wy, 100%), 0); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .window .window__pic.week { transform: none; } }

/* ervaringen v2: kaart met wie het zegt + screenshot van hun site */
.vslide { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: stretch; }
.vslide__card { grid-column: 1 / 7; display: grid; align-content: space-between; gap: 2rem; padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--white); }
.vslide__who { display: flex; align-items: center; gap: 1rem; justify-self: start; }
.vslide__who img { width: 3.25rem; height: 3.25rem; aspect-ratio: 1; object-fit: cover; object-position: top; border-radius: 50%; border: 0; }
.vslide__who span { display: grid; gap: 0.1rem; font-size: var(--step-small); color: #4A5056; max-width: none; }
.vslide__who b { font-size: var(--step-body); color: var(--night); }
.vslide__card blockquote { margin: 0; }
.vslide__card .vslide__q { font-size: clamp(1.75rem, 1rem + 2.2vw, 3.25rem); max-width: 20ch; }
.vslide__card .link { justify-self: start; }
.vslide__shot { grid-column: 7 / 13; position: relative; overflow: hidden; min-height: 22rem; background: var(--night); }
.vslide__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* desktop: alleen pijlen en automatisch; swipen alleen op touch */
@media (hover: hover) and (pointer: fine) { .voices3__track { overflow-x: hidden; } }
@media (max-width: 47.99em) {
  .vslide { grid-template-columns: 1fr; gap: 0; }
  .vslide__card, .vslide__shot { grid-column: 1; }
  .vslide__shot { min-height: 0; aspect-ratio: 16 / 10; }
}
.vslide__card > * { grid-column: 1 !important; justify-self: start !important; }
.vslide__card .vslide__who { align-self: start; }
.vslide .vslide__who img { width: 3.25rem; height: 3.25rem; aspect-ratio: 1; border: 0; border-radius: 50%; object-fit: cover; object-position: 10% 0; }

/* werkwijze: voortgang in vier delen, één per stap */
.road__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 var(--margin); }
.road__steps span { display: grid; gap: 0.6rem; font-size: var(--step-small); font-weight: 600; color: #6A7076; transition: color 300ms ease; }
.road__steps i { position: relative; height: 3px; background: var(--f-step); overflow: hidden; }
.road__steps i::after { content: ""; position: absolute; inset: 0; background: var(--sun); transform: scaleX(var(--fill, 0)); transform-origin: left; }
.road__steps span.is-on { color: var(--paper); }
@media (max-width: 47.99em), (prefers-reduced-motion: reduce) {
  .road__steps { position: sticky; bottom: 1rem; margin: 1.25rem var(--margin) 0; }
}
.road__stage { grid-template-columns: minmax(0, 1fr); }
.road__steps { margin-bottom: 0.5rem; }

/* projectentegels: telefoon binnen het beeld, korte omschrijving */
.ptile .shot__phone { bottom: 4%; }
.ptile__desc { flex-basis: 100%; font-size: var(--step-body); color: var(--f-soft); max-width: 60ch; }
/* maatwerk: getekend beheerscherm */
.ui-admin { display: grid; background: var(--white); color: var(--night); font-size: 0.9375rem; }
.ui-admin__top { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.1rem; background: #E7E1D6; }
.ui-admin__top b { font-weight: 600; } .ui-admin__top i { font-style: normal; font-weight: 600; font-size: 0.8125rem; padding: 0.35rem 0.7rem; background: var(--night); color: var(--paper); }
.ui-admin__row { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: 0.8rem 1.1rem; background: linear-gradient(#EEE8DD, #EEE8DD) bottom / 100% 1px no-repeat; } /* taste-skill-ignore: table rows in an interface fragment */
.ui-admin__row span:nth-child(2) { color: #6A7076; }
.ui-admin__row i { font-style: normal; font-weight: 600; font-size: 0.8125rem; padding: 0.2rem 0.6rem; background: #DDEFE3; color: #145C33; }
.ui-admin__row i.is-res { background: #FDE8D3; color: #8A4A0C; } .ui-admin__row i.is-sold { background: #E7E1D6; color: #4A5056; }
.ui-admin__foot { padding: 0.8rem 1.1rem; font-size: 0.8125rem; color: #145C33; font-weight: 600; }
.ui-admin--big { font-size: 1.0625rem; box-shadow: 0 30px 60px -30px rgb(17 25 31 / 0.4); } /* taste-skill-ignore: fragment floats on the page */
.block__pic--ui { align-self: center; }
.block__note { margin-top: 1.5rem; font-size: var(--step-small); color: var(--f-soft); }

/* =====================================================================
   werkwijze v3: alleen typografie en beweging
   ===================================================================== */
.ww-open { min-height: 100svh; display: grid; align-content: center; gap: 2.5rem; padding: calc(var(--bar-h) + 2rem) var(--margin) 4rem; }
.ww-open__title { font-size: clamp(4rem, 1rem + 12vw, 15rem); line-height: 0.85; letter-spacing: -0.06em; max-width: 9ch; }
.ww-open__lead { font-size: var(--step-lead); line-height: 1.35; font-weight: 500; max-width: 40ch; color: var(--f-soft); }
.ww-open__hint { font-size: var(--step-small); color: var(--f-soft); display: flex; align-items: center; gap: 0.75rem; }
.ww-open__hint::after { content: ""; width: 3rem; height: 1px; background: currentColor; transform-origin: left; animation: hintx 2.4s var(--ease-in-out) infinite; } /* taste-skill-ignore: scroll hint line */
@keyframes hintx { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }

/* vastgezette stappen */
.ww-pin { position: relative; height: 420svh; }
.ww-pin__stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: var(--gutter); padding: calc(var(--bar-h) + 3rem) var(--margin) 2.5rem; overflow: hidden; }
.ww-pin__list { grid-column: 1 / 3; align-self: center; display: grid; gap: 0.6rem; font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; }
.ww-pin__list li { color: #4D565E; transition: color 400ms ease, transform 500ms var(--ease-out); }
.ww-pin__list li.is-on { color: var(--sun); transform: translateX(0.6rem); }
.ww-pin__steps { grid-column: 3 / 13; position: relative; align-self: center; min-height: 60svh; }
.ww-step { position: absolute; inset: 0; display: grid; align-content: center; gap: 2.5rem; pointer-events: none; }
.ww-step.is-on { pointer-events: auto; }
.ww-step__t { font-size: clamp(3rem, 1rem + 7.4vw, 9.5rem); line-height: 0.92; letter-spacing: -0.055em; }
.ww-step__t span { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.ww-step__t span::before { content: none; }
.ww-step__t > span > span { display: block; transform: translateY(105%); transition: transform 700ms var(--ease-expo); }
.ww-step__t > span:nth-child(2) > span { transition-delay: 70ms; }
.ww-step.is-on .ww-step__t > span > span { transform: none; }
.ww-step.is-out .ww-step__t > span > span { transform: translateY(-105%); transition-duration: 500ms; }
.ww-step__b { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; max-width: 72rem; opacity: 0; transform: translateY(20px); transition: opacity 500ms ease, transform 700ms var(--ease-expo); }
.ww-step.is-on .ww-step__b { opacity: 1; transform: none; transition-delay: 200ms; }
.ww-step__b p { font-size: var(--step-lead); line-height: 1.4; font-weight: 500; color: var(--f-soft); max-width: 46ch; }
.ww-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 26rem; }
.ww-chips li { padding: 0.55rem 0.95rem; background: var(--f-step); font-size: var(--step-small); font-weight: 600; color: var(--paper); }
.ww-pin__bar { grid-column: 1 / 13; height: 3px; background: var(--f-step); }
.ww-pin__bar span { display: block; height: 100%; background: var(--sun); transform-origin: left; transform: scaleX(var(--wp, 0)); }
@media (max-width: 47.99em), (prefers-reduced-motion: reduce) {
  .ww-pin { height: auto; }
  .ww-pin__stage { position: static; height: auto; display: block; padding: 2rem var(--margin) var(--section); }
  .ww-pin__list, .ww-pin__bar { display: none; }
  .ww-pin__steps { min-height: 0; display: grid; gap: 5rem; }
  .ww-step { position: static; pointer-events: auto; gap: 1.5rem; }
  .ww-step__t { font-size: 12vw; }
  .ww-step__t > span > span, .ww-step__b { transform: none !important; opacity: 1 !important; }
  .ww-step__b { grid-template-columns: 1fr; }
  .ww-chips { justify-content: flex-start; }
}

/* lopende banden in reuzenletters, gekoppeld aan scroll */
.ww-bands { overflow: hidden; padding: 4rem 0 var(--section); display: grid; gap: 0.5rem; }
.ww-band span { display: block; white-space: nowrap; font-size: clamp(3.5rem, 1rem + 9vw, 11rem); line-height: 1; letter-spacing: -0.055em; font-weight: 600; transform: translate3d(var(--bx, 0px), 0, 0); will-change: transform; }
.ww-band--out span { color: transparent; -webkit-text-stroke: 1.5px rgb(243 239 232 / 0.55); }

/* wat we allemaal doen */
.ww-can { padding: var(--section) var(--margin); }
.ww-can__title { font-size: var(--step-head); margin-bottom: 3.5rem; }
.ww-can__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; padding: 1.6rem 0; background: linear-gradient(var(--f-step), var(--f-step)) top / 100% 1px no-repeat; } /* taste-skill-ignore: list rows divider */
.ww-can__name { grid-column: 1 / 8; font-size: clamp(2.75rem, 1rem + 6vw, 7.5rem); line-height: 0.95; letter-spacing: -0.055em; font-weight: 600; transition: transform 600ms var(--ease-out), color 300ms ease; }
.ww-can__info { grid-column: 8 / 13; display: grid; gap: 0.35rem; font-size: var(--step-body); color: var(--f-soft); transition: transform 600ms var(--ease-out); }
.ww-can__info b { color: var(--night); font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .ww-can__row:hover .ww-can__name { transform: translateX(2rem); color: var(--sun); }
  .ww-can__row:hover .ww-can__info { transform: translateX(-0.5rem); }
}
@media (max-width: 47.99em) { .ww-can__name, .ww-can__info { grid-column: 1 / 13; } .ww-can__info { margin-top: 0.75rem; } }

/* vragen en afsluiter */
.ww-faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; padding: var(--section) var(--margin); }
.ww-faq__head { grid-column: 1 / 6; }
.ww-faq__head h2 { font-size: var(--step-head); }
.ww-faq__head p { margin-top: 1.5rem; color: var(--f-soft); }
.ww-faq .faq { grid-column: 7 / 13; }
@media (max-width: 47.99em) { .ww-faq__head, .ww-faq .faq { grid-column: 1 / 13; } }
.ww-end { display: grid; gap: 2.5rem; padding: var(--section) var(--margin); }
.ww-end__title { font-size: clamp(3.5rem, 1rem + 11vw, 14rem); line-height: 0.86; letter-spacing: -0.06em; }
.ww-end__act { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.ww-end__act p { font-size: var(--step-lead); color: var(--f-soft); }

/* mobiel: werkwijze staat stil en de stappen schuiven mee met het scrollen (zoals op desktop) */
@media (max-width: 47.99em) and (prefers-reduced-motion: no-preference) {
  .road { height: 340svh; }
  .road__stage { position: sticky; top: 0; height: 100svh; display: grid; grid-template-rows: auto 1fr auto; padding: calc(var(--bar-h) + 1.25rem) 0 1rem; overflow: hidden; }
  .road__title { margin: 0; }
  .road__track { overflow: visible; scroll-snap-type: none; padding: 0; gap: 5vw; align-items: center; }
  .road__step { flex: 0 0 86vw; width: 86vw; gap: 1rem; align-content: center; }
  .road__steps { position: static; margin: 0.75rem var(--margin) 0; }
  .road__step .moment { min-height: 0; }
  .road__step .moment:not(.moment--live) { padding: 1.25rem; }
  .moment--demo .m-phone { width: min(200px, calc((100svh - 440px) * 9 / 19)); }
}
@media (max-width: 47.99em) and (max-height: 760px) and (prefers-reduced-motion: no-preference) {
  .road__stage { padding-top: calc(var(--bar-h) + 0.5rem); }
  .road__title { font-size: 1.75rem; }
  .road__clause { font-size: 7vw; }
  .road__step .moment:not(.moment--live) { gap: 0.6rem; padding: 1rem; }
}
.m-url { gap: 0; } .m-url .m-dot { margin-right: 0.6rem; }

/* werkwijze, stap Live: de desktopversie van dezelfde site als in de demo-telefoon */
.m-site.md { display: block !important; height: auto; aspect-ratio: 16 / 10; padding: 0 !important; overflow: hidden; background: #F4EFE6; color: #1F3A2C; }
.md-nav { display: flex; align-items: center; gap: 4cqw; padding: 3cqw 4.5cqw; font-size: 2.4cqw; }
.md-nav b { margin-right: auto; font-family: "Fraunces", Georgia, serif; font-size: 3.6cqw; font-weight: 600; }
.md-hero { position: relative; display: block; height: 40cqw; margin: 0 3cqw; border-radius: 2cqw; overflow: hidden; background: radial-gradient(70% 55% at 78% 22%, rgb(233 161 90 / 0.55), transparent 70%), linear-gradient(165deg, #46695A, #1F3A2C 70%); }
.md-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(12 26 18 / 0.8), transparent 70%); } /* taste-skill-ignore: neutral scrim under text on a photo */
.md-hero__txt { position: absolute; z-index: 1; left: 5cqw; bottom: 5cqw; display: grid; gap: 1.4cqw; color: #F4EFE6; }
.md-hero__txt b { font-family: "Fraunces", Georgia, serif; font-size: 7cqw; line-height: 0.95; font-weight: 600; }
.md-hero__txt span { font-size: 2.4cqw; opacity: 0.85; }
.md-hero__txt em { justify-self: start; font-style: normal; font-size: 2.2cqw; font-weight: 600; padding: 1.2cqw 2.8cqw; border-radius: 99px; background: #F4EFE6; color: #1F3A2C; }
.md-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 3cqw; font-size: 2.2cqw; font-weight: 600; }
.md-cards span { display: grid; gap: 1cqw; }
.md-cards i { height: 12cqw; border-radius: 1.5cqw; background: #DCD3C3; }
.md-cards span:nth-child(2) i { background: #C9D3C4; } .md-cards span:nth-child(3) i { background: #E6C9A8; }

/* projecten op mobiel: een stapel kaarten, de volgende steekt rechts uit; swipen naar de volgende */
@media (max-width: 47.99em) {
  .proj-index { display: none; }
  .proj-head { padding-bottom: 1.5rem; }
  .proj-grid.deck { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 calc(var(--margin) + 32px) var(--section) var(--margin); overflow-x: clip; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  .deck > * { grid-area: 1 / 1; transform-origin: right center; transition: transform 550ms var(--ease-out), opacity 400ms ease, filter 400ms ease; will-change: transform; border-radius: 20px; overflow: hidden; -webkit-tap-highlight-color: transparent; }
  .deck.is-drag > .is-front { transition: none; }
  .deck > .ptile { gap: 0; align-content: start; background: #1A252E; box-shadow: 0 24px 50px -20px rgb(0 0 0 / 0.6); } /* taste-skill-ignore: stacked cards need depth */
  .deck .shot { aspect-ratio: 4 / 3; }
  .deck .ptile__meta { display: grid; justify-content: stretch; gap: 0.9rem; padding: 1.25rem 1.25rem 1.5rem; }
  .deck .ptile__meta h2 { font-size: 2rem; }
  .deck .ptile__chips li { padding: 0.3rem 0.65rem; font-size: 0.875rem; background: rgb(243 239 232 / 0.09); border-radius: 99px; }
  .deck .ptile__desc { font-size: 1rem; }
  .deck > .ptile--next { flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 1.5rem; background: var(--sun); }
  .deck .ptile--next__q { font-size: 2.75rem; }
  .deck__dots { grid-area: 2 / 1; display: flex; justify-content: center; gap: 8px; padding-top: 1.5rem; margin-right: -32px; }
  .deck__dots i { width: 8px; height: 8px; border-radius: 99px; background: rgb(243 239 232 / 0.28); transition: width 300ms var(--ease-out), background-color 300ms ease; }
  .deck__dots i.is-on { width: 24px; background: var(--sun); }
}
.fab.is-dark { --b-bg: var(--night); --b-ink: var(--paper); }
/* werkwijze: geen lege schermen tussen intro en stappen, en tussen vragen en slot */
.ww-open { align-content: end; padding-bottom: 3rem; }
.ww-faq + .ww-end { padding-top: calc(var(--section) * 0.35); }
/* ervaringen: minder lege ruimte boven de titel, het blijft een eigen kaart */
.home .voices2 { padding-top: clamp(2.5rem, 7vw, 5rem); }

/* weekblok: grote titel met het oranje accent, tekst en knop eronder (niet meer los rechts) */
.window__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 2.5vw, 2.25rem); align-items: start; }
.window__text .wk-title { grid-column: 1; font-size: clamp(3rem, 0.5rem + 7.2vw, 9.5rem); line-height: 0.9; letter-spacing: -0.055em; max-width: none; }
.wk-title > span { display: block; }
.wk-title em { font-style: normal; color: var(--sun); }
.wk-side { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; max-width: 60rem; }
.window__text .wk-side p { grid-column: auto; margin: 0; font-size: var(--step-lead); line-height: 1.35; font-weight: 500; max-width: 40ch; color: rgb(243 239 232 / 0.78); }
@media (max-width: 47.99em) {
  .window__text .wk-title { font-size: 13vw; }
  .wk-side { gap: 1.25rem; }
  .window__text .wk-side p { font-size: 1.125rem; }
}

/* het veld: dunne HUD-lijnen boven de lichtpunten */
.sky__hud { position: absolute; inset: 0; width: 100%; height: 100%; color: rgb(243 239 232 / 0.55); transition: opacity 400ms ease; overflow: visible; }
.hud-line { stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; fill: none; opacity: 0.55; }
.hud-dots { stroke-dasharray: 1 6; stroke-linecap: round; opacity: 0.6; }
.hud-ring { opacity: 0.9; }
.hud-dot { fill: var(--sun); filter: drop-shadow(0 0 6px rgb(249 131 32 / 0.9)); } /* taste-skill-ignore: glowing target dot */
.hud-cursor { fill: var(--sun); stroke: #0B0F12; stroke-width: 1; }
@media (max-width: 47.99em) { .hud-cursor { display: none; } }
/* het veld: een zacht donker verloop achter de tekst, onder de HUD */
.sky::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 15 18 / 0.78) 0%, rgb(11 15 18 / 0.5) 34%, rgb(11 15 18 / 0) 62%); } /* taste-skill-ignore: scrim for text over the particle field */
@media (max-width: 47.99em) { .sky::before { background: linear-gradient(180deg, rgb(11 15 18 / 0.85) 0%, rgb(11 15 18 / 0.6) 38%, rgb(11 15 18 / 0) 62%); } } /* taste-skill-ignore: scrim */
/* decoratieve lagen die over de volgende sectie doorlopen, mogen aanraking niet opvangen */
.wipe, .wipe * { pointer-events: none; }
.window__stage, .window__pic { pointer-events: none; }
.window__text a, .window__text button { pointer-events: auto; }
.window { pointer-events: none; }
.home .voices2 { position: relative; z-index: 2; }
/* duimvriendelijk: links in de footer en de WhatsApp-link minstens 44px hoog */
@media (hover: none), (pointer: coarse) {
  .foot2__col a, .foot2__big, .foot2__meta a { display: inline-flex; align-items: center; min-height: 44px; }
  .ask2__wa a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.15rem; }
}

/* echte reviews uit WordPress: donkere tekst, sterren, links naast elkaar; één review = geen bediening */
.vslide__card .vslide__q--real { color: var(--night); }
.vslide__stars { margin: 0 0 0.75rem; color: var(--sun); letter-spacing: 0.15em; font-size: 1.1rem; }
.vslide__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.vslide:not(:has(.vslide__shot)) .vslide__card { grid-column: 1 / -1; }
.voices2.is-single .voices3__ctrl, .voices2.is-single .voices3__dots { display: none; }

/* echte reviews: de maat schaalt mee met de lengte, zodat elke review in één scherm past */
.vslide__card .vslide__q--real { letter-spacing: -0.02em; text-wrap: pretty; }
.vslide__card .vslide__q--short { font-size: clamp(1.6rem, 1rem + 1.6vw, 2.5rem); line-height: 1.12; max-width: 22ch; letter-spacing: -0.035em; }
.vslide__card .vslide__q--mid { font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem); line-height: 1.3; max-width: 32ch; font-weight: 500; }
.vslide__card .vslide__q--long { font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.3rem); line-height: 1.5; max-width: 52ch; font-weight: 500; letter-spacing: -0.005em; }
.voices2 .vslide__shot { max-height: 34rem; }
/* review: foto in het midden naast naam en functie, functie niet onnodig afbreken */
.vslide .vslide__who { align-items: center; }
.vslide .vslide__who span { max-width: none; }

/* telefoon en tablet: de balk is altijd donker met een licht woordmerk (Filip, 2026-10-25); op desktop kleurt hij mee met het hoofdstuk */
@media (max-width: 56em) {
  /* de JS zet --bar-* inline per hoofdstuk; die waarden worden hier daarom niet gebruikt */
  .bar { background: var(--night); color: var(--paper); }
  .bar.is-open .bar__nav { background: var(--night); }
  .bar .button { --b-bg: var(--sun); --b-ink: var(--night); }
}

/* offerteformulier: valveld voor spambots, buiten beeld */
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__send .button[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* offerte verzonden: bevestiging met wat er nu gebeurt; vervangt het formulier */
.sent { grid-column: 1 / 8; align-self: start; display: grid; gap: 1.25rem; justify-items: start; outline: none; }
.sent[hidden] { display: none; }
.sent__tag { display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--step-small); font-weight: 600; color: var(--sun); }
.sent__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--sun); box-shadow: 0 0 0 0 rgb(249 131 32 / 0.5); animation: sentpulse 1.8s var(--ease-out) 3; }
@keyframes sentpulse { to { box-shadow: 0 0 0 12px rgb(249 131 32 / 0); } }
.sent__title { font-size: var(--step-head); line-height: 1; letter-spacing: -0.04em; font-weight: 600; max-width: 14ch; }
.sent__lead { font-size: var(--step-lead); color: var(--f-soft); }
.sent__h { margin-top: 1.25rem; font-size: var(--step-title); font-weight: 600; letter-spacing: -0.02em; }
.sent__steps { list-style: none; padding: 0; margin: 0; display: grid; width: 100%; counter-reset: sent; }
.sent__steps li { counter-increment: sent; display: grid; grid-template-columns: 3rem 1fr; column-gap: 1rem; row-gap: 0.35rem; padding: 1.25rem 0; border-top: 1px solid var(--f-step); }
.sent__steps li:last-child { border-bottom: 1px solid var(--f-step); }
.sent__steps li::before { content: counter(sent, decimal-leading-zero); grid-row: span 2; font-weight: 600; color: var(--sun); font-variant-numeric: tabular-nums; }
.sent__steps b { font-size: var(--step-body); font-weight: 600; }
.sent__steps span { font-size: var(--step-body); color: var(--f-soft); max-width: 48ch; }
.sent__more { font-size: var(--step-body); color: var(--f-soft); }
.sent__more a { color: var(--paper); text-decoration: underline; text-underline-offset: 0.2em; }
.sent .button { margin-top: 0.5rem; }
.sent > * { animation: sentin 600ms var(--ease-out) both; }
.sent > :nth-child(2) { animation-delay: 60ms; } .sent > :nth-child(3) { animation-delay: 120ms; }
.sent > :nth-child(4), .sent > :nth-child(5) { animation-delay: 200ms; } .sent > :nth-child(n+6) { animation-delay: 280ms; }
@keyframes sentin { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 63.99em) { .sent { grid-column: 1 / 13; } }
@media (prefers-reduced-motion: reduce) { .sent > *, .sent__dot { animation: none; } }
.form[hidden] { display: none; }
.sent { scroll-margin-top: calc(var(--bar-h) + 2rem); }

/* geen AI-beelden (2026-10-25): echt werk of in code getekend */
/* offerte: drie feiten onder de intro */
.facts { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 46rem; }
.facts li { display: grid; gap: 0.35rem; padding-top: 0.9rem; border-top: 2px solid var(--sun); }
.facts b { font-size: var(--step-title); font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.facts span { font-size: var(--step-small); color: var(--f-soft); max-width: 22ch; }
@media (max-width: 40em) { .facts { grid-template-columns: 1fr; gap: 0.75rem; } .facts li { grid-template-columns: 2.5rem 1fr; align-items: baseline; } }
/* offerte: recent opgeleverd in de zijkolom */
.recent { display: grid; gap: 1rem; }
.recent__item { display: grid; gap: 0.6rem; text-decoration: none; }
.recent__pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--f-step); }
.recent__pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 600ms var(--ease-out); }
.recent__name { font-weight: 600; font-size: var(--step-body); display: inline-flex; gap: 0.5rem; align-items: center; }
.recent__name::after { content: "→"; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .recent__item:hover .recent__pic img { transform: scale(1.03); } .recent__item:hover .recent__name { color: var(--sun); } .recent__item:hover .recent__name::after { transform: translateX(3px); } }
@media (min-width: 48em) and (max-width: 63.99em) { .recent { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } .recent h2 { grid-column: 1 / -1; } }
/* diensten: echt werk in plaats van de bureaufoto */
.opener__pic--work { background: var(--night); display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3.5rem); padding-bottom: clamp(3.5rem, 7vw, 5rem); }
.opener__pic--work img { position: static; inset: auto; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.work__desk { display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.6); }
.work__mob { position: absolute; left: clamp(0.75rem, 2vw, 1.5rem); bottom: clamp(1.25rem, 3vw, 2rem); width: 26%; aspect-ratio: 780 / 1688; overflow: hidden; border-radius: 14px; border: 5px solid #0A0F13; box-shadow: 0 24px 48px -12px rgb(0 0 0 / 0.7); }
.opener__pic--work figcaption { position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: 1rem; font-size: var(--step-small); color: #9AA1A8; }
@media (max-width: 47.99em) { .opener__pic--work { aspect-ratio: 4 / 5; } .opener__pic--work figcaption { top: 1rem; bottom: auto; } }
/* diensten: getekende inbox voor "Erbij als je wilt" */
.inbox { align-self: center; display: grid; background: var(--white); color: var(--night); box-shadow: 0 30px 60px -30px rgb(17 25 31 / 0.35); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.inbox__bar { display: flex; align-items: center; gap: 0.6rem; padding: 1rem 1.25rem; font-weight: 600; border-bottom: 1px solid #E6E1D8; }
.inbox__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--sun); }
.inbox__list { display: grid; }
.inbox__mail { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #EEE9E1; }
.inbox__mail b { font-weight: 600; }
.inbox__mail span { grid-column: 1; color: #5B6268; font-size: var(--step-small); }
.inbox__mail i { grid-column: 2; grid-row: 1; font-style: normal; font-size: var(--step-small); color: #5B6268; font-variant-numeric: tabular-nums; }
.inbox__mail.is-new { box-shadow: inset 3px 0 0 var(--sun); }
.inbox__foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; padding: 1rem 1.25rem; font-size: var(--step-small); color: #5B6268; background: #FAF8F4; }
.inbox__ok { display: inline-flex; align-items: center; gap: 0.4rem; }
.inbox__ok::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #1F9D55; }

/* ===== werkwijze-upgrade (2026-10-25) ===== */
.ww-open__facts { margin-top: 0; }
/* stappen: tekst links, beeld rechts */
.ww-step--vis { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); column-gap: clamp(2rem, 4vw, 4.5rem); row-gap: 2rem; }
.ww-step--vis .ww-step__t { grid-column: 1; font-size: clamp(3rem, 1rem + 5vw, 7.5rem); }
.ww-step--vis .ww-step__b { grid-column: 1; grid-template-columns: 1fr; gap: 1.5rem; }
.ww-step--vis .ww-chips { justify-content: flex-start; max-width: none; }
.ww-vis { grid-column: 2; grid-row: 1 / 3; align-self: center; position: relative; display: grid; place-items: center; min-height: min(62svh, 540px); opacity: 0; transform: translateY(30px) scale(0.97); transition: opacity 500ms ease, transform 800ms var(--ease-expo); }
.ww-step.is-on .ww-vis { opacity: 1; transform: none; transition-delay: 150ms; }
.ww-step.is-out .ww-vis { opacity: 0; transform: translateY(-20px) scale(0.98); transition-duration: 300ms; }
.wv-card { position: relative; width: 100%; display: grid; gap: 0.9rem; padding: 1.75rem; background: var(--paper); color: var(--night); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.wv-tag { margin-top: 1rem; font-size: var(--step-small); color: #9AA1A8; }
/* 1: aanvraag */
.wv-label { font-size: 0.9375rem; color: #4A5056; }
.wv-field { display: flex; align-items: center; min-height: 3.5rem; padding: 0 1rem; background: var(--white); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; box-shadow: inset 0 -3px 0 var(--sun); } /* taste-skill-ignore: drawn input inside an illustration */
.wv-type { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 100%; }
.ww-step.is-on .wv-type { animation: wvtype 1.1s steps(12, end) 0.5s both; }
@keyframes wvtype { from { max-width: 0; } }
.wv-caret { width: 2px; height: 1.4em; margin-left: 2px; background: var(--night); animation: caret 1s steps(1) infinite; }
.wv-chips { display: flex; gap: 6px; } .wv-chips span { padding: 0.55rem 1rem; background: #E7E1D6; font-weight: 500; } .wv-chips .is-on { background: var(--night); color: var(--paper); }
.wv-send { justify-self: start; margin-top: 0.4rem; padding: 0.8rem 1.3rem; background: var(--sun); font-weight: 600; }
.ww-step.is-on .wv-send { animation: press 600ms var(--ease-out) 1.8s both; }
.wv-bubble { position: absolute; right: -1rem; bottom: 6%; display: grid; gap: 0.2rem; max-width: 15rem; padding: 0.8rem 1rem; background: #157A41; color: var(--white); font-weight: 600; border-radius: 14px 14px 4px 14px; box-shadow: 0 18px 40px -12px rgb(0 0 0 / 0.6); opacity: 0; transform: translateY(12px) scale(0.9); transform-origin: bottom right; transition: opacity 300ms ease, transform 500ms var(--ease-out); }
.wv-bubble i { justify-self: end; font-style: normal; font-size: 0.8rem; font-weight: 500; opacity: 0.8; }
.ww-step.is-on .wv-bubble { opacity: 1; transform: none; transition-delay: 2.4s; }
/* 2: demo op de telefoon (echte site) */
.wv-phone { width: min(240px, 60%); aspect-ratio: 9 / 19; padding: 9px; border-radius: 34px; background: #05080B; box-shadow: 0 30px 70px -10px rgb(0 0 0 / 0.6); }
.wv-screen { display: block; height: 100%; overflow: hidden; border-radius: 26px; background: #111; }
.wv-screen img { display: block; width: 100%; height: auto; }
.ww-step.is-on .wv-screen img { animation: wvscroll 14s var(--ease-in-out) 1s infinite alternate; }
@keyframes wvscroll { 0%, 8% { transform: translateY(0); } 100% { transform: translateY(-30%); } }
/* 3: akkoord */
.ww-vis--decide .wv-card { gap: 1.25rem; padding: 2rem; }
.wv-q { font-size: var(--step-title); font-weight: 600; letter-spacing: -0.03em; }
.wv-lines { display: grid; gap: 0.6rem; }
.wv-lines span { display: flex; align-items: center; gap: 0.7rem; font-weight: 500; }
.wv-lines span::before { content: ""; width: 1.1rem; height: 1.1rem; flex: none; background: var(--night); clip-path: polygon(0 55%, 14% 41%, 38% 66%, 86% 0, 100% 14%, 38% 94%); transform: scale(0); transition: transform 400ms var(--ease-out); }
.ww-step.is-on .wv-lines span::before { transform: scale(0.8); }
.ww-step.is-on .wv-lines span:nth-child(1)::before { transition-delay: 0.6s; } .ww-step.is-on .wv-lines span:nth-child(2)::before { transition-delay: 0.85s; } .ww-step.is-on .wv-lines span:nth-child(3)::before { transition-delay: 1.1s; }
.wv-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0.5rem; }
.wv-btns > span { padding: 1rem 1.3rem; font-weight: 600; background: #E7E1D6; display: inline-flex; align-items: center; gap: 0.5rem; transition: background-color 300ms ease, transform 200ms ease; }
.ww-step.is-on .wv-yes { background: var(--sun); transform: scale(0.97); transition-delay: 1.7s; }
.wv-check { width: 0; height: 11px; background: var(--night); clip-path: polygon(0 55%, 14% 41%, 38% 66%, 86% 0, 100% 14%, 38% 94%); transition: width 300ms var(--ease-out); }
.ww-step.is-on .wv-check { width: 13px; transition-delay: 1.9s; }
/* 4: live (echte site) */
.wv-browser { width: 100%; display: grid; background: var(--white); color: var(--night); overflow: hidden; box-shadow: 0 30px 70px -10px rgb(0 0 0 / 0.6); }
.wv-url { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; background: #E7E1D6; font-weight: 500; font-size: var(--step-small); }
.wv-dot { width: 9px; height: 9px; border-radius: 50%; background: #9AA1A8; transition: background-color 300ms ease; }
.ww-step.is-on .wv-dot { background: #1F9D55; transition-delay: 1.5s; }
.wv-live { margin-left: auto; padding: 0.25rem 0.6rem; background: var(--sun); font-weight: 600; transform: scale(0); transition: transform 500ms var(--ease-out); }
.ww-step.is-on .wv-live { transform: scale(1); transition-delay: 1.7s; }
.wv-load { height: 3px; background: #E7E1D6; } .wv-load span { display: block; height: 100%; background: var(--sun); transform: scaleX(0); transform-origin: left; transition: transform 1.3s var(--ease-in-out); }
.ww-step.is-on .wv-load span { transform: scaleX(1); transition-delay: 0.2s; }
.wv-page { display: block; aspect-ratio: 16 / 11; overflow: hidden; }
.wv-page img { display: block; width: 100%; height: auto; }
.ww-step.is-on .wv-page img { animation: wvscroll2 16s var(--ease-in-out) 2s infinite alternate; }
@keyframes wvscroll2 { 0%, 10% { transform: translateY(0); } 100% { transform: translateY(-45%); } }
@media (max-width: 63.99em) and (min-width: 48em) { .ww-step--vis { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); } .wv-bubble { right: 0; } }
@media (max-width: 47.99em) {
  .ww-step--vis { grid-template-columns: 1fr; }
  .ww-vis { grid-column: 1; grid-row: auto; min-height: 0; margin-top: 0.5rem; }
  .ww-step.is-out .ww-vis { opacity: 1; transform: none; }
  .wv-bubble { right: 0; bottom: -1.25rem; }
  .ww-vis--ask { padding-bottom: 1.5rem; }
  .wv-phone { width: 62%; }
}
@media (prefers-reduced-motion: reduce) { .ww-vis { opacity: 1; transform: none; } .ww-step .wv-screen img, .ww-step .wv-page img, .ww-step .wv-type { animation: none !important; } }

/* van jou / van ons */
.ww-swap { padding: var(--section) var(--margin); }
.ww-swap__title { font-size: var(--step-head); margin-bottom: 3rem; max-width: 16ch; }
.ww-swap__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.ww-swap__col { display: grid; align-content: start; gap: 1.5rem; padding: clamp(1.5rem, 3vw, 2.75rem); background: var(--white); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%); }
.ww-swap__col--us { background: var(--night); color: var(--paper); }
.ww-swap__col h3 { display: grid; gap: 0.5rem; font-size: var(--step-title); font-weight: 600; letter-spacing: -0.03em; }
.ww-swap__who { font-size: var(--step-small); font-weight: 600; letter-spacing: 0; color: #A8520B; }
.ww-swap__col--us .ww-swap__who { color: var(--sun); }
.ww-swap__col ol { list-style: none; padding: 0; margin: 0; display: grid; counter-reset: sw; }
.ww-swap__col li { counter-increment: sw; display: grid; grid-template-columns: 2.5rem 1fr; padding: 0.95rem 0; border-top: 1px solid rgb(17 25 31 / 0.12); font-size: var(--step-body); font-weight: 500; } /* taste-skill-ignore: genummerde lijst, de lijn scheidt de regels */
.ww-swap__col--us li { border-top-color: rgb(243 239 232 / 0.14); } /* taste-skill-ignore: idem, op donker */
.ww-swap__col li::before { content: counter(sw, decimal-leading-zero); color: #9AA1A8; font-variant-numeric: tabular-nums; }
@media (max-width: 47.99em) { .ww-swap__cols { grid-template-columns: 1fr; } }

/* wat we allemaal doen: compact raster in plaats van zes schermbrede rijen */
.ww-can__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); }
.ww-can__row { grid-template-columns: 1fr; align-items: start; align-content: start; gap: 1rem; padding: 1.75rem 0 2.5rem; }
.ww-can__name, .ww-can__info { grid-column: 1 / -1; }
.ww-can__name { font-size: clamp(2.25rem, 1rem + 2.4vw, 3.75rem); }
.ww-can__info { margin-top: 0; max-width: 34ch; }
@media (hover: hover) and (pointer: fine) { .ww-can__row:hover .ww-can__name { transform: translateX(0.5rem); } .ww-can__row:hover .ww-can__info { transform: translateX(0.5rem); } }
@media (max-width: 63.99em) { .ww-can__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40em) { .ww-can__list { grid-template-columns: 1fr; } .ww-can__row { padding: 1.4rem 0 1.75rem; } }

/* echt werk */
.ww-proof { padding: var(--section) var(--margin) calc(var(--section) * 0.6); }
.ww-proof__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 3rem; }
.ww-proof__head h2 { font-size: var(--step-head); max-width: 14ch; }
.ww-proof__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); }
.ww-proof__item { position: relative; display: grid; gap: 1rem; text-decoration: none; }
.ww-proof__pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--f-step); }
.ww-proof__pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 700ms var(--ease-out); }
.ww-proof__mob { position: absolute; right: 1.25rem; top: calc((100% - 4.5rem) * 0.42); width: 19%; aspect-ratio: 780 / 1688; overflow: hidden; border-radius: 12px; border: 4px solid #05080B; box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.6); transition: transform 600ms var(--ease-out); }
.ww-proof__mob img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ww-proof__name { display: grid; gap: 0.25rem; font-size: var(--step-title); font-weight: 600; letter-spacing: -0.03em; }
.ww-proof__name small { font-size: var(--step-small); font-weight: 500; letter-spacing: 0; color: var(--f-soft); }
@media (hover: hover) and (pointer: fine) { .ww-proof__item:hover .ww-proof__pic img { transform: scale(1.03); } .ww-proof__item:hover .ww-proof__mob { transform: translateY(-8px); } .ww-proof__item:hover .ww-proof__name { color: var(--sun); } }
@media (max-width: 47.99em) { .ww-proof__grid { grid-template-columns: 1fr; gap: 3rem; } }
.ww-step--vis { align-content: center; }
.ww-step--vis .ww-step__t { align-self: end; }
.ww-step--vis .ww-step__b { align-self: start; }
.ww-vis { min-height: 0; }
@media (min-width: 48em) { .wv-phone { width: auto; height: min(58svh, 520px); } }
/* inspector-punten werkwijze */
.ww-pin__list li { color: #7A838B; }
.wv-bubble i { opacity: 1; }
@media (min-width: 48em) and (max-width: 63.99em) { .ww-step--vis .ww-step__t { font-size: clamp(2.5rem, 5.4vw, 3.5rem); } }
.ww-swap + .ww-can { padding-top: calc(var(--section) * 0.4); }