/* ============================================================================
   leylive — inner pages (werk, case, aanpak, contact)
   ========================================================================== */

/* shared page hero */
.page-hero { padding: 168px 6vw 48px; }
.page-hero .label { margin-bottom: var(--s5); }
.page-title {
  font-size: clamp(38px, 6.4vw, 88px);
  font-weight: 400; letter-spacing: -.03em; line-height: 1.06;
  max-width: 14em;
}
.page-sub { margin-top: var(--s5); font-size: clamp(15px, 1.2vw, 17px); color: var(--text-muted); max-width: 58ch; font-weight: 300; }

/* ---------- voor-page header: composed stage ----------
   big parallax image, then a calm two-column row: intro left, chips right */
.voor-hero { padding-bottom: 0; }
.vh-stage { position: relative; margin: var(--s6) 6vw var(--s9); }
.vh-media { position: relative; margin: 0; border-radius: var(--radius-card); overflow: hidden; height: clamp(340px, 46vw, 580px); }
/* standard absolute cover — shell.js data-parallax adds its own overscan */
.vh-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vh-media .vh-tag { position: absolute; top: 16px; right: 16px; z-index: 2; }
.vh-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: clamp(24px, 5vw, 80px); margin-top: var(--s7);
}
.vh-row .page-sub { margin-top: 0; }
.vh-chips { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: flex-end; flex: 0 1 auto; padding-top: 4px; }

/* ---------- scroll timeline (data-timeline, shell.js) ----------
   track line + progress line drawn by scroll; items ignite as it passes */
.tl { list-style: none; position: relative; max-width: 780px; display: grid; gap: clamp(30px, 3.6vw, 46px); padding: 4px 0; margin: 0; }
.tl::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.tl-line { position: absolute; left: 4.5px; top: 8px; bottom: 8px; width: 2px; background: var(--ink); transform-origin: 50% 0; transform: scaleY(0); }
.tl-item { position: relative; padding-left: clamp(36px, 4.6vw, 60px); }
.tl-item::before {
  content: ""; position: absolute; left: 1.5px; top: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--grey-soft);
  transition: background .4s var(--butter), border-color .4s var(--butter), box-shadow .4s var(--butter);
}
.tl-head { display: flex; align-items: baseline; gap: var(--s3); }
.tl-n { font-size: 10px; letter-spacing: 1px; color: var(--text-muted); flex: 0 0 auto; }
.tl-item h3 { font-size: clamp(17px, 1.9vw, 23px); font-weight: 400; letter-spacing: -.01em; }
.tl-item p { margin-top: 6px; color: var(--text-muted); font-weight: 300; max-width: 54ch; }
/* armed = JS + motion allowed: items wait dim until the line reaches them */
.tl-armed .tl-item { opacity: .32; transform: translateY(12px); transition: opacity .6s var(--butter), transform .6s var(--butter); }
.tl-armed .tl-item.on { opacity: 1; transform: none; }
.tl-armed .tl-item.on::before { background: var(--accent); border-color: var(--ink); box-shadow: 0 0 0 4px rgba(255, 214, 77, .22); }

/* ---------- werk grid ---------- */
.werk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); }
.werk-grid .tile { height: clamp(260px, 26vw, 420px); }
.werk-note { margin-top: var(--s7); color: var(--text-muted); font-size: 13px; max-width: 60ch; }

/* cross-sector proof strip — real work shown on the case-less voor pages */
.cross-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6) var(--s5); }
.cross-grid .tile { height: clamp(190px, 19vw, 280px); }
.cross-note { margin-top: var(--s5); color: var(--text-muted); font-size: 13px; max-width: 62ch; }
@media (max-width: 720px) { .cross-grid { grid-template-columns: 1fr; } }

/* risk-reversal line under the CTA in the page footer */
.foot-reassure { margin-top: var(--s5); color: var(--text-muted); font-size: 13px; letter-spacing: .2px; }

/* ---------- case study ---------- */
.case-hero { padding: 168px 6vw 40px; }
.case-tags { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s5) 0 0; }
.case-live { margin-top: var(--s5); }
.case-cover { margin: var(--s7) 6vw 0; border-radius: var(--radius-card); overflow: hidden; height: clamp(300px, 52vw, 620px); position: relative; }
.case-cover .ph, .case-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: var(--s9) 6vw; display: grid; grid-template-columns: 220px 1fr; gap: var(--s6) clamp(40px, 6vw, 96px); max-width: 1200px; }
.case-body h2.side { font-size: 11px; font-weight: 300; letter-spacing: .6px; color: var(--text-muted); padding-top: 6px; }
.case-body .blk p { font-weight: 300; max-width: 62ch; margin-bottom: var(--s4); }
.case-body .blk p:last-child { margin-bottom: 0; }
.case-body .blk ul { list-style: none; display: grid; gap: var(--s3); max-width: 62ch; }
.case-body .blk li { display: flex; gap: 12px; align-items: baseline; font-weight: 300; }
.case-body .blk li::before { content: "→"; color: var(--text-muted); flex: 0 0 auto; font-size: 13px; }
.case-figures { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); padding: 0 6vw var(--s9); }
.case-figures figure { border-radius: var(--radius-card); overflow: hidden; height: clamp(220px, 26vw, 380px); position: relative; margin: 0; }
.case-figures .ph, .case-figures img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-figures figcaption { position: absolute; left: 14px; bottom: 14px; z-index: 2; }
/* testimonial slot: renders only when filled */
.case-quote { padding: 0 6vw var(--s9); }
.case-quote blockquote {
  font-size: clamp(22px, 2.8vw, 34px); font-weight: 300; line-height: 1.3;
 letter-spacing: -.01em; max-width: 26em;
  border-left: 2px solid var(--accent); padding-left: var(--s5);
}
.case-quote cite { display: block; margin-top: var(--s4); font-style: normal; font-size: 13px; color: var(--text-muted); }
.case-next { border-top: 1px solid var(--line); padding: var(--s8) 6vw; display: flex; justify-content: space-between; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.case-next a.big-next { font-size: clamp(24px, 3vw, 40px); font-weight: 300; letter-spacing: -.015em; transition: opacity .3s var(--butter); }
.case-next a.big-next:hover { opacity: .55; }

/* case mock-render gallery: preserve each mockup's own aspect (a finished mockup must
   never be cropped), balanced 2-col masonry. Works for any mix of tall (phone) +
   landscape (desktop) shots — not just the single-tall pattern the old grid assumed. */
.case-mocks { display: block; column-count: 2; column-gap: var(--s5); grid-template-columns: none; }
.case-mocks figure { break-inside: avoid; height: auto; margin: 0 0 var(--s5); }
.case-mocks figure img { position: static; inset: auto; width: 100%; height: auto; object-fit: contain; }

/* honest demo banner */
.demo-note {
  margin: var(--s6) 6vw 0; padding: var(--s4) var(--s5);
  border: 1px solid var(--line); border-radius: var(--radius-field);
  color: var(--text-muted); font-size: 13px; max-width: 720px;
}

/* ---------- aanpak "zo werkt het" cinema (floema pinned steps) ----------
   default = static dark stack (RM / no-JS); cinema.js arms the fullscreen
   version: image-mode (aanpak) alleen ≥900px, text-mode (.sc-text, voor-
   pagina's) overal — ook mobiel, native touch-scrub */
.steps-cine { background: var(--dark); color: var(--dark-text); }
.sc-pin { position: relative; padding: var(--s9) 6vw; display: grid; gap: var(--s8); }
.sc-label { color: var(--accent); }
.sc-step { display: grid; gap: var(--s5); max-width: 900px; }
.sc-fig { position: relative; height: clamp(240px, 44vw, 460px); border-radius: var(--radius-card); overflow: hidden; margin: 0; }
.sc-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-n { font-size: 10px; letter-spacing: 1px; color: var(--accent); }
.sc-title { font-size: clamp(28px, 4.6vw, 64px); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; margin: 6px 0 10px; }
.sc-txt { color: var(--dark-muted); font-weight: 300; max-width: 54ch; }
.sc-progress { display: none; }
/* armed: fullscreen pinned cinema */
.sc-armed .sc-pin { padding: 0; display: block; height: 100vh; height: 100dvh; overflow: hidden; }
.sc-armed .sc-label { position: absolute; top: 104px; left: 6vw; z-index: 6; }
.sc-armed .sc-step { position: absolute; inset: 0; max-width: none; }
.sc-armed .sc-fig { position: absolute; inset: 0; height: auto; border-radius: 0; }
.sc-armed .sc-fig::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,13,12,.42), rgba(13,13,12,.12) 42%, rgba(13,13,12,.78) 84%); }
.sc-armed .sc-copy-block { position: absolute; left: 6vw; right: 6vw; bottom: clamp(112px, 16vh, 180px); z-index: 2; max-width: 46em; }
.sc-armed .sc-txt { color: rgba(246,245,241,.84); }
.sc-armed .sc-progress { display: flex; position: absolute; left: 6vw; right: 6vw; bottom: 44px; z-index: 6; align-items: center; gap: var(--s4); }
.sc-track { position: relative; flex: 1; height: 1px; background: rgba(246,245,241,.22); }
.sc-fill { position: absolute; left: 0; top: -1px; height: 3px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.sc-num { font-size: 11px; letter-spacing: 1.2px; color: rgba(246,245,241,.75); font-variant-numeric: tabular-nums; }

/* aanpak (2026-07-12): Maxims nieuwe stap-beelden zijn clean/wit i.p.v. donker.
   Flip de cinema naar een lichte behandeling — donkere tekst + zachte witte waas
   onderaan zodat de beelden helder blijven én de tekst leesbaar is. Scoped op de
   aanpak-pagina; de /voor/-pagina's (sc-text) blijven donker. */
body[data-page="aanpak"] .steps-cine { background: var(--bg); color: var(--ink); }
body[data-page="aanpak"] .sc-label,
body[data-page="aanpak"] .sc-n { color: var(--ink); }
body[data-page="aanpak"] .sc-txt,
body[data-page="aanpak"] .sc-armed .sc-txt { color: var(--text-muted); }
body[data-page="aanpak"] .sc-armed .sc-fig::after {
  background: linear-gradient(180deg, rgba(246,245,241,.5) 0%, rgba(246,245,241,0) 22%, rgba(246,245,241,0) 55%, rgba(246,245,241,.92) 90%);
}
body[data-page="aanpak"] .sc-track { background: rgba(16,16,16,.16); }
body[data-page="aanpak"] .sc-num { color: rgba(16,16,16,.6); }
body[data-page="aanpak"] .sc-fill { background: var(--ink); }

/* text mode (.sc-text, voor-pages "[op jouw site]"): one shared .sc-bg
   backdrop, copy blocks swap one by one; static = numbered dark list */
.sc-text .sc-bg { display: none; }
.sc-text .sc-step { border-top: 1px solid rgba(246, 245, 241, .13); padding-top: var(--s5); max-width: 760px; }
.sc-text .sc-title { font-size: clamp(26px, 4.2vw, 58px); }
.sc-armed.sc-text .sc-bg {
  display: block; position: absolute; inset: 0; margin: 0; overflow: hidden;
}
.sc-armed.sc-text .sc-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sc-armed.sc-text .sc-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,13,12,.72), rgba(13,13,12,.55) 45%, rgba(13,13,12,.88) 88%);
}
.sc-armed.sc-text .sc-step { border-top: 0; padding-top: 0; max-width: none; }
.sc-armed.sc-text .sc-title { font-size: clamp(34px, 5vw, 72px); max-width: 15em; }
.sc-armed.sc-text .sc-copy-block { bottom: clamp(130px, 20vh, 220px); }

/* video mode (.sc-vid, voor-pages "[op uw site]" since 11-10): every step carries the
   real loop from the sector's case (.sc-vfig). Armed: copy left, one screen panel right,
   loops crossfade with the copy and only the visible one plays (cinema.js).
   Static / no JS / reduced motion: a dark stack of loop + copy, poster only. */
.sc-vid .sc-step { border-top: 1px solid rgba(246, 245, 241, .13); padding-top: var(--s5); }
.sc-vid .sc-title { font-size: clamp(26px, 4.2vw, 52px); }
.sc-vfig { margin: 0; padding: var(--s5); display: grid; place-items: center; background: rgba(246,245,241,.06); border-radius: var(--radius-panel); }
.sc-vfig video { display: block; max-width: 100%; max-height: 56vh; width: auto; height: auto; border-radius: var(--radius-field); box-shadow: 0 10px 40px rgba(0,0,0,.45); }
.sc-armed.sc-vid .sc-step { border-top: 0; padding-top: 0; }
.sc-armed.sc-vid .sc-vfig {
  position: absolute; right: 6vw; top: 50%; translate: 0 -46%;
  width: 52vw; height: min(68vh, 620px); padding: clamp(24px, 2.6vw, 40px);
}
.sc-armed.sc-vid .sc-vfig video { max-height: calc(min(68vh, 620px) - 2 * clamp(24px, 2.6vw, 40px)); }
.sc-armed.sc-vid .sc-copy-block { top: 50%; bottom: auto; right: auto; width: 24vw; max-width: 30em; translate: 0 -40%; }
.sc-armed.sc-vid .sc-title { font-size: clamp(30px, 3.2vw, 52px); }
@media (max-width: 899px) {
  .sc-armed.sc-vid .sc-label { top: 88px; left: 20px; }
  .sc-armed.sc-vid .sc-vfig { left: 20px; right: 20px; width: auto; top: 124px; translate: none; height: min(40dvh, 340px); padding: var(--s4); }
  .sc-armed.sc-vid .sc-vfig video { max-height: calc(min(40dvh, 340px) - 2 * var(--s4)); }
  .sc-armed.sc-vid .sc-copy-block { top: calc(124px + min(40dvh, 340px) + var(--s6)); left: 20px; right: 20px; width: auto; translate: none; }
  .sc-armed.sc-vid .sc-title { font-size: clamp(26px, 7.4vw, 36px); }
}

.zorgen { background: var(--dark); color: var(--dark-text); padding: var(--s10) 6vw; }
.zorgen .label { color: var(--dark-muted); margin-bottom: var(--s6); display: inline-block; }
/* wide enough for the first sentence to sit on ONE line from tablet up (Maxim 11-11) */
.zorgen .edu-stmt { max-width: 26em; }
/* ============================================================================
   /aanpak/ 11-11 (Maxim: zelfde als aanbod met de services, op zwart maar met kleur,
   vakjes en animaties + "het verschil ... iconen ofz?"). Scene styles come from
   aanbod.css (.pk-*); this block adds the dark variant and the three "why" scenes.
   The old 4 text columns (.zorgen-grid) are gone; markup in git before 11-11.
   ========================================================================== */
.zorgen .pk-grid--dark { margin-top: var(--s7); grid-template-columns: repeat(3, 1fr); }
.pk-grid--dark .pk { background: #1A1A18; }
.pk-grid--dark .pk-h { color: var(--dark-text); }
.pk-grid--dark .pk-p { color: var(--dark-muted); }               /* 8.9:1 on #1A1A18 */
.pk-grid--dark .pk--edit, .pk-grid--dark .pk--call { grid-column: span 2; }

/* "why" scenes on paper, v2 (11-11, Maxim: kleuren te prominent; template vs op maat;
   snel = een loader; zoekbalk opent, uw praktijk komt boven de concurrenten).
   Stage = soft tint of the chip colour, full colour on hover (same rule as /aanbod/).
   Without JS or with reduced motion every scene shows its end state. */
.pk-grid--why { --wy-io: cubic-bezier(.77, 0, .175, 1); --step: 40px; }
.pk-grid--why .pk-vis {
  gap: var(--s3);
  background: color-mix(in srgb, var(--hue) 20%, var(--surface));
  transition: background-color .25s ease-out;
}
@media (hover: hover) {
  .pk-grid--why .pk:hover .pk-vis { background: var(--hue); }
}
.wy .wy-ln { display: block; height: 5px; width: var(--w, 100%); border-radius: 3px; background: #E3E0D8; }
.wy .wy-ln--h { height: 7px; background: #101010; }
.wy img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wy-card {
  display: flex; flex-direction: column; width: 88%; max-width: 300px; padding: 10px;
  border-radius: 12px; background: #fff; color: #101010;
  box-shadow: 0 1px 2px rgba(16,16,16,.06), 0 4px 12px rgba(16,16,16,.08);
}

/* 1. template → op maat: a switch flips, the custom page wipes over the template */
.wy-seg {
  position: relative; display: block; align-self: flex-start; margin-bottom: 10px;
  border-radius: 9999px; background: #F1F0EC; font-size: 12px; line-height: 1;
}
.wy-seg-row { display: grid; grid-template-columns: 1fr 1fr; }
.wy-seg-row > span { padding: 7px 12px; text-align: center; white-space: nowrap; }
.wy-seg-row:first-child { color: #66635D; }                        /* 5.3:1 on #F1F0EC */
.wy-seg-on {
  position: absolute; inset: 0; border-radius: 9999px; background: #101010; color: #F6F5F1;
  clip-path: inset(0 0 0 50% round 9999px);
}
.wy-site { position: relative; display: block; }
.wy-lay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: center; background: #fff; }
.wy-lay--own { position: absolute; inset: 0; clip-path: inset(0 0 0 0); }
.wy-ph {
  display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 8px;
  overflow: hidden; background: #ECEAE4; color: #A9A59C;
}
.wy-ph .ic { width: 22px; height: 22px; }
.wy-tx { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.wy-tx .wy-ln { width: var(--w, 100%); }
.wy-t { font-size: 13px; line-height: 1.2; font-weight: 500; }
.wy-lay--tpl .wy-t { color: #8A877F; font-weight: 400; }
.wy-s { font-size: 11px; line-height: 1.3; color: #66635D; }
.wy-b {
  margin-top: 2px; padding: 5px 10px; border-radius: 9999px; font-size: 11px; line-height: 1;
  background: #ECEAE4; color: #8A877F; white-space: nowrap;
}
.wy-lay--own .wy-b { background: var(--hue); color: #101010; }      /* 14:1 on the yellow */

/* 2. a phone: spinner, then the page; the pill counts the seconds */
.wy--speed .pk-vis { gap: var(--s4); }
.wy-phone {
  display: flex; flex-direction: column; gap: 6px; width: 112px; height: 180px; flex: 0 0 auto;
  padding: 8px 8px 10px; border-radius: 18px; background: #fff; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,16,16,.06), 0 4px 12px rgba(16,16,16,.1);
}
.wy-status { display: flex; justify-content: space-between; align-items: center; font-size: 10px; line-height: 1; color: #101010; padding: 0 2px; }
.wy-4g { display: inline-flex; align-items: center; gap: 2px; }
.wy-4g .ic { width: 11px; height: 11px; }
.wy-screen { position: relative; display: block; flex: 1; }
.wy-load { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; }
.wy-spin {
  display: block; width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid #ECEAE4; border-top-color: var(--hue);
}
.wy-pg { display: flex; flex-direction: column; gap: 7px; }
.wy-hero { display: block; height: 72px; border-radius: 8px; overflow: hidden; background: #ECEAE4; }
.wy-pill { display: block; width: 46%; height: 12px; margin-top: 2px; border-radius: 9999px; background: var(--hue); }
.wy-done {
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; border-radius: 14px;
  background: #101010; color: #F6F5F1; line-height: 1.15;
}
.wy-ico { position: relative; display: block; width: 18px; height: 18px; flex: 0 0 auto; }
.wy-ico .ic { position: absolute; inset: 0; width: 18px; height: 18px; }
.wy-i-t { opacity: 0; }
.wy-i-c { color: var(--hue); }
.wy-dt { display: flex; flex-direction: column; gap: 2px; }
.wy-time { font-size: 19px; font-weight: 400; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.wy-dt small { font-size: 12px; font-weight: 300; color: #BDB9B0; }   /* 9.4:1 on #101010 */

/* 3. a search: the list opens, the practice climbs past two others to the top */
.wy--find .pk-vis { padding: var(--s4); }
.wy-search { gap: 6px; }
.wy-q { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9999px; background: #F1F0EC; font-size: 13px; line-height: 1.2; }
.wy-q .ic { width: 14px; height: 14px; flex: 0 0 auto; }
.wy-qt { display: inline-block; white-space: nowrap; overflow: hidden; }
.wy-list { position: relative; display: flex; flex-direction: column; gap: 4px; transform-origin: top center; }
.wy-r {
  position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px;
  border-radius: 10px; background: #fff;
}
.wy-r .ic { width: 18px; height: 18px; flex: 0 0 auto; color: #B5B1A8; }
.wy-rt { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.15; }
.wy-rt b { font-weight: 500; }
.wy-rt > span { font-size: 11px; color: #66635D; }                 /* 5.0:1 on #F4ECFC */
.wy-r--o .wy-rt { gap: 5px; }
.wy-r--o { translate: 0 var(--step); }
.wy-r--you {
  z-index: 1; translate: 0 calc(var(--step) * -2); background: #F4ECFC;
  box-shadow: 0 2px 8px rgba(16,16,16,.08);
}
.wy-r--you .ic { color: var(--hue); }

/* scenes loop while on screen: the inline script adds .is-live (+ .is-done), holds, then
   removes them, so every transition below also runs backwards as the rewind
   (armed by the inline script; reduced motion never arms) */
.pk-armed .wy-seg-on { clip-path: inset(0 50% 0 0 round 9999px); transition: clip-path .55s var(--wy-io); }
.pk-armed .wy-lay--own { clip-path: inset(0 100% 0 0); transition: clip-path .7s var(--wy-io); }
.pk-armed .wy-lay--own img { scale: 1.08; transition: scale 1.2s var(--pk-ease); }
.pk-armed .is-live .wy-seg-on { clip-path: inset(0 0 0 50% round 9999px); transition-delay: .8s; }
.pk-armed .is-live .wy-lay--own { clip-path: inset(0 0 0 0); transition-delay: .85s; }
.pk-armed .is-live .wy-lay--own img { scale: 1; transition-delay: .85s; }

.pk-armed .wy-load { opacity: 1; transition: opacity .2s ease-out; }
.pk-armed .wy-spin { animation: wy-spin .6s linear infinite; }      /* also between loops: never a frozen spinner */
.pk-armed .wy-pg > * { opacity: 0; translate: 0 6px; transition: opacity .3s var(--pk-ease), translate .3s var(--pk-ease); }
.pk-armed .wy-i-t { opacity: 1; }
.pk-armed .wy-i-c { opacity: 0; scale: .6; }
.pk-armed .wy-i-t, .pk-armed .wy-i-c { transition: opacity .2s ease-out, scale .25s var(--pk-ease); }
.pk-armed .is-done .wy-load { opacity: 0; }
.pk-armed .is-done .wy-spin { animation: none; }
.pk-armed .is-done .wy-pg > * { opacity: 1; translate: 0 0; }
.pk-armed .is-done .wy-pg > :nth-child(2) { transition-delay: .05s; }
.pk-armed .is-done .wy-pg > :nth-child(3) { transition-delay: .1s; }
.pk-armed .is-done .wy-pg > :nth-child(4) { transition-delay: .15s; }
.pk-armed .is-done .wy-pg > :nth-child(5) { transition-delay: .2s; }
.pk-armed .is-done .wy-i-t { opacity: 0; }
.pk-armed .is-done .wy-i-c { opacity: 1; scale: 1; }
@keyframes wy-spin { to { rotate: 360deg; } }

.pk-armed .wy-qt { clip-path: inset(0 100% 0 0); transition: clip-path .9s steps(20); }
.pk-armed .wy-list { opacity: 0; scale: .97; translate: 0 -4px; transition: opacity .2s ease-out, scale .25s var(--pk-ease), translate .25s var(--pk-ease); }
.pk-armed .wy-r--o, .pk-armed .wy-r--you { translate: 0 0; box-shadow: none; transition: translate .7s var(--wy-io), background-color .3s ease-out, box-shadow .3s ease-out; }
.pk-armed .wy-r--you { background: #fff; }
.pk-armed .is-live .wy-qt { clip-path: inset(0 0 0 0); transition-delay: .2s; }
.pk-armed .is-live .wy-list { opacity: 1; scale: 1; translate: 0 0; transition-delay: 1.2s; }
.pk-armed .is-live .wy-r--o { translate: 0 var(--step); transition-delay: 2s; }
.pk-armed .is-live .wy-r--you {
  translate: 0 calc(var(--step) * -2); background: #F4ECFC; box-shadow: 0 2px 8px rgba(16,16,16,.08);
  transition-delay: 2s, 1.8s, 2s;
}

@media (max-width: 1100px) {
  .zorgen .pk-grid--dark { grid-template-columns: repeat(2, 1fr); }
  .pk-grid--why { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 701px) and (max-width: 1100px) {
  /* the edit tile spans the full row here, so its scene stays side by side */
  .pk-grid--dark .pk--edit .pk-vis { height: 216px; flex-direction: row; align-items: center; }
  .pk-grid--dark .pk-chat { width: 52%; max-width: 340px; }
  .pk-grid--dark .pk-hours { width: 38%; max-width: 250px; }
}
@media (max-width: 700px) {
  .zorgen .pk-grid--dark, .pk-grid--why { grid-template-columns: 1fr; }
  .pk-grid--dark .pk--edit, .pk-grid--dark .pk--call { grid-column: auto; }
  .pk-grid--why .pk-vis { height: 216px; } /* phone 180 / search card 174 + padding */
}
.vakwerk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.vakwerk-grid .v { border-top: 1px solid var(--line); padding-top: var(--s5); }
.vakwerk-grid h3 { font-size: 18px; font-weight: 400; margin-bottom: var(--s2); }
.vakwerk-grid p { color: var(--text-muted); font-weight: 300; }

/* ---------- contact ---------- */
.contact-wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 96px); padding: var(--s7) 6vw var(--s10); max-width: 1200px; }
.cform { display: grid; grid-template-columns: 1fr 1fr; row-gap: var(--s5); column-gap: var(--s4); }
.ctopic { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; min-width: 0; }
.ctopic legend { font-size: 14px; font-weight: 400; color: var(--ink); margin-bottom: var(--s3); padding: 0; }
.ctopic-opts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.ctopic-opt { position: relative; cursor: pointer; }
.ctopic-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.ctopic-opt span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--bg);
  font-size: 15px; font-weight: 300; color: var(--ink);
  transition: background .25s var(--butter), border-color .25s var(--butter), color .25s var(--butter);
}
.ctopic-opt:hover span { border-color: var(--ink); }
.ctopic-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ctopic-opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 3px; }
.cfield { display: grid; gap: 8px; align-content: start; }
.cfield.full { grid-column: 1 / -1; }
.cfield label { font-size: 14px; font-weight: 400; color: var(--ink); }
.cfield .req { color: var(--text-muted); }
.cfield .opt { color: var(--text-muted); font-weight: 300; margin-left: 6px; }
.cfield input, .cfield textarea {
  font-family: inherit; font-size: 17px; font-weight: 300; color: var(--ink); /* ≥16px: geen iOS zoom-on-focus */
  background: #fff; border: 1px solid #D4D1C9; border-radius: var(--radius-field);
  padding: 15px 16px; transition: border-color .25s var(--butter), box-shadow .25s var(--butter);
}
.cfield input { min-height: 54px; }
.cfield textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.cfield input::placeholder, .cfield textarea::placeholder { color: #8A8780; }
.cfield input:hover, .cfield textarea:hover { border-color: #B5B2AA; }
.cfield input:focus, .cfield textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,16,.08); }
.cform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cform-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap; margin-top: var(--s2); }
.cform button.pill { border: 0; }
.cform .cform-send { background: var(--accent); color: var(--accent-ink); padding: 18px 30px; font-size: 16px; }
.cform .cform-send:hover { background: var(--ink); color: var(--bg); }
.cform .cform-send[disabled] { opacity: .6; cursor: progress; }
.cform-fine { font-size: 13.5px; color: var(--text-muted); font-weight: 300; flex: 1 1 18em; }   /* grows beside the button, wraps there instead of dropping under it */
.cform-fine a {   /* privacy link (opens a new tab: a half-filled form stays filled) */
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: var(--grey-soft); transition: text-decoration-color .2s var(--butter), color .2s var(--butter);
}
.cform-fine a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.cform-done { grid-column: 1 / -1; padding: var(--s6) 0; }
.cform-done .label { display: block; margin-bottom: var(--s3); }
.cform-done-h { font-size: clamp(26px, 3vw, 38px); font-weight: 300; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); outline: none; max-width: 18ch; }
.cform-done-p { margin-top: var(--s4); color: var(--text-muted); font-weight: 300; }
.cform-done-p a { color: var(--ink); }
.cform.is-sent > :not(.cform-done) { display: none; }
.c-status { font-size: 13.5px; color: var(--text-muted); }
.c-status.ok { color: #3E6B3C; }
.c-status.err { color: #A33A36; }
.contact-side h2 { font-size: 12px; font-weight: 400; letter-spacing: .5px; color: var(--text-muted); margin-bottom: var(--s4); }
.contact-side .direct { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; margin-bottom: var(--s7); }
.next-steps { list-style: none; display: grid; gap: var(--s4); }
.next-steps li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s3); font-weight: 300; color: var(--text-muted); }
.next-steps .n { font-size: 10px; color: var(--grey-soft); letter-spacing: 1px; padding-top: 5px; } /* op dark-card: contrast ok */

.showcase-note { margin-top: var(--s7); display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }

/* showcase render (own staged mockup image instead of CSS device frames) */
.showcase-render {
  display: block; max-width: 1040px; border-radius: var(--radius-stage); overflow: hidden;
  box-shadow: var(--shadow-stage);
}
.showcase-render img { display: block; width: 100%; height: auto; transition: scale .8s var(--butter); }
.showcase-render:hover img { scale: 1.03; }
@media (prefers-reduced-motion: reduce) { .showcase-render:hover img { scale: 1; } }


/* ---------- "herken je dit?" picker — dark CTA band ---------- */
.herken { background: var(--dark); color: var(--dark-text); padding-top: var(--s10); padding-bottom: var(--s10); }
.herken .section-head .label { color: var(--accent); }
.herken .section-head { margin-bottom: var(--s6); }
.herken-hint { color: var(--dark-muted); font-size: 14px; margin: calc(-1 * var(--s5)) 0 var(--s6); }
.herken-hint .arr { display: inline-block; color: var(--accent); margin-right: 8px; animation: hintNudge 1.6s var(--butter) infinite; }
@keyframes hintNudge { 0%, 100% { translate: 0 0; } 50% { translate: 6px 0; } }
.herken-pills { display: flex; flex-wrap: wrap; gap: var(--s3); max-width: 900px; }
.herken .hp-pill {
  background: rgba(246,245,241,.08); color: var(--dark-text);
  border: 1px solid rgba(246,245,241,.16);
  padding: 13px 22px; font-size: 14px;
}
.herken .hp-pill .dot { background: var(--accent); }
.herken .hp-pill:hover { background: rgba(246,245,241,.16); }
.herken .hp-pill[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.herken .hp-pill[aria-pressed="true"] .dot { background: var(--accent-ink); }
.herken-panel {
  min-height: 170px; max-width: 860px;
  border-top: 1px solid var(--dark-line);
  margin-top: var(--s7); padding-top: var(--s5);
}
.hp-linemask { display: block; overflow: hidden; padding-bottom: .18em; margin-bottom: -.18em; }
.hp-line { font-size: clamp(18px, 1.8vw, 24px); font-weight: 400; letter-spacing: -.01em; max-width: 32em; }
.hp-fixes { list-style: none; display: grid; gap: var(--s3); margin-top: var(--s4); }
.hp-fixes li { display: flex; gap: 12px; align-items: baseline; font-weight: 300; color: var(--dark-muted); max-width: 62ch; }
.hp-fixes li::before { content: "→"; color: var(--accent); flex: 0 0 auto; font-size: 13px; }
.hp-cta { margin-top: var(--s5); }
.herken .hp-cta .pill.solid { background: var(--accent); color: var(--accent-ink); }
@media (prefers-reduced-motion: reduce) { .herken-hint .arr { animation: none; } }

/* ---------- before/after slider (case page) ---------- */
.ba {
  position: relative; border-radius: var(--radius-card); overflow: hidden;
  height: clamp(220px, 26vw, 380px); margin: 0;
  --pos: 50%;
}
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* na reveals RIGHT of the divider (convention: voor links, na rechts) */
.ba .ba-na { clip-path: inset(0 0 0 var(--pos)); }
.ba .ba-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px;
  background: var(--bg); transform: translateX(-1px); pointer-events: none; z-index: 2;
}
.ba .ba-divider::after {
  content: "◂ ▸"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--ink); color: var(--bg); border-radius: 999px;
  font-size: 11px; letter-spacing: 1px; padding: 8px 12px; white-space: nowrap;
}
.ba .ba-tag { position: absolute; bottom: 14px; z-index: 2; }
.ba .ba-tag.voor { left: 14px; }
.ba .ba-tag.na { right: 14px; }
.ba input[type="range"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: ew-resize; margin: 0; z-index: 3;
  -webkit-appearance: none; appearance: none;
}
.ba input[type="range"]:focus-visible ~ .ba-divider::after { outline: 2px solid var(--bg); outline-offset: 2px; }

@media (max-width: 900px) {
  .werk-grid { grid-template-columns: 1fr; }
  .case-body { grid-template-columns: 1fr; gap: var(--s3); }
  .case-body h2.side { padding-top: var(--s5); }
  .case-figures { grid-template-columns: 1fr; }
  .case-mocks { column-count: 1; }

  .vakwerk-grid { grid-template-columns: 1fr; }
  .contact-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .page-hero, .case-hero { padding: 128px 20px 32px; }
  .voor-hero { padding-bottom: 0; }
  .vh-stage { margin: var(--s5) 20px var(--s8); }
  .vh-media { height: clamp(260px, 62vw, 400px); }
  .vh-row { flex-direction: column; gap: var(--s5); margin-top: var(--s6); }
  .vh-chips { justify-content: flex-start; }
  .case-cover { margin: var(--s6) 20px 0; }
  .case-body, .case-figures, .case-quote { padding-left: 20px; padding-right: 20px; }
  .case-next, .zorgen { padding-left: 20px; padding-right: 20px; }
  .contact-wrap { padding-left: 20px; padding-right: 20px; }
  .cform { grid-template-columns: 1fr; }
  .demo-note { margin-left: 20px; margin-right: 20px; }
  /* cinema on mobile: lift the progress bar clear of the floating chat button,
     and pull the copy up a touch so it never crowds the raised bar */
  .sc-armed .sc-progress { bottom: 84px; right: 20px; left: 20px; }
  .sc-armed .sc-label { top: 88px; left: 20px; }
  .sc-armed.sc-text .sc-copy-block { left: 20px; right: 20px; bottom: clamp(150px, 24vh, 260px); }
}

/* ---------- aanbod: website / film / huisstijl, text + image pairs ---------- */
.ab { display: grid; gap: var(--s10); padding-top: var(--s8); }
.ab-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.ab-row--flip .ab-copy { order: 2; }
.ab-copy .label { margin-bottom: var(--s4); }
.ab-txt { margin-top: var(--s5); color: var(--text-muted); font-weight: 300; max-width: 52ch; }
.ab-list { list-style: none; margin: var(--s5) 0 0; padding: 0; max-width: 52ch; }
.ab-list li { border-top: 1px solid var(--line); padding: var(--s3) 0; font-weight: 300; }
.ab-list li:last-child { border-bottom: 1px solid var(--line); }
.ab-links { margin-top: var(--s6); display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.ab-media { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; background: var(--surface); }
.ab-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ab-board { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: var(--s2); padding: var(--s2); }
.ab-b { border-radius: var(--radius-field); display: grid; place-items: center; overflow: hidden; }
.ab-b--mark { background: var(--dark); }
.ab-b--mark img { width: 46%; height: auto; }
.ab-b--word { background: var(--accent); color: var(--accent-ink); font-size: clamp(28px, 4vw, 56px); font-weight: 500; letter-spacing: -.03em; }
.ab-b--type { background: var(--bg); align-content: center; padding-bottom: var(--s7); }
.ab-b--type .aa { font-size: clamp(48px, 7vw, 104px); font-weight: 200; line-height: 1; letter-spacing: -.04em; }
.ab-b--type .nm { font-size: 13px; color: var(--text-muted); }
.ab-b--sw { background: var(--bg); grid-template-columns: repeat(4, 1fr); gap: var(--s2); padding: var(--s4); place-items: stretch; }
.ab-b--sw i { border-radius: var(--radius-btn); min-height: 24px; }
.ab-board figcaption { position: absolute; left: var(--s4); bottom: var(--s4); }
.ab-note { margin-top: var(--s7); color: var(--text-muted); font-weight: 300; }
@media (max-width: 860px) {
  .ab { gap: var(--s9); padding-top: var(--s6); }
  .ab-row { grid-template-columns: 1fr; gap: var(--s6); }
  .ab-row--flip .ab-copy { order: 0; }
}

/* ---------- aanbod: three packages side by side ---------- */
.of { padding-top: var(--s7); padding-bottom: var(--s9); }
.of-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); align-items: stretch; }
.of-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border-radius: var(--radius-card); padding: var(--s7) var(--s6) var(--s6); }
.of-name { font-size: clamp(24px, 2.2vw, 32px); font-weight: 300; line-height: 1.2; letter-spacing: -.02em; }
.of-for { margin-top: var(--s3); color: var(--text-muted); font-weight: 300; min-height: 3.2em; }
.of-card .ab-list { margin-top: var(--s5); }
.of-foot { margin-top: auto; padding-top: var(--s6); }
.of-flag { position: absolute; top: var(--s5); right: var(--s5); }
.of-card--pick { background: var(--dark); color: var(--dark-text); }
.of-card--pick .of-for { color: var(--dark-muted); }
.of-card--pick .ab-list li { border-color: var(--dark-line); }
.of-in { margin-top: var(--s9); }
.of-in .label { margin-bottom: var(--s6); }
.of-in-grid { grid-template-columns: repeat(4, 1fr); }
.ab-row { scroll-margin-top: var(--s10); }
@media (max-width: 1000px) {
  .of-in-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .of-grid { grid-template-columns: 1fr; }
  .of-for { min-height: 0; }
  .of-in { margin-top: var(--s8); }
  .of-in-grid { grid-template-columns: 1fr; }
}

/* ---------- aanbod: four packages, each with its own image ---------- */
.of-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.of-card { padding: var(--s2) var(--s2) var(--s5); }
.of-card > :not(.of-media) { margin-left: var(--s4); margin-right: var(--s4); }
.of-media { position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--pill); margin-bottom: var(--s5); }
.of-media > img, .of-media > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.of-flag { top: var(--s3); right: var(--s3); }
.of-name { font-size: clamp(22px, 1.8vw, 28px); }
.of-card--pick .of-media { background: var(--dark-line); }
.of-board { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 6px; height: 100%; background: var(--bg); }
.of-board > span { border-radius: var(--radius-btn); display: grid; place-items: center; overflow: hidden; }
.of-board .b1 { grid-row: span 2; background: var(--dark); }
.of-board .b1 img { width: 44%; height: auto; }
.of-board .b2 { background: var(--accent); color: var(--accent-ink); font-size: 44px; font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.of-board .b3 { grid-template-columns: repeat(4, 1fr); gap: 4px; padding: var(--s2); place-items: stretch; background: var(--surface); }
.of-board .b3 i { border-radius: 4px; }
@media (max-width: 1180px) { .of-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .of-grid { grid-template-columns: 1fr; } }

/* ---------- aanbod: price on every card (agency audit 2026-11-11) ---------- */
.of-price { margin-top: var(--s3); display: flex; flex-direction: column; gap: 2px; }
.of-eur { font-size: clamp(30px, 2.6vw, 40px); font-weight: 300; line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.of-per { font-size: 13.5px; font-weight: 300; color: var(--ink); }
.of-card--pick .of-per { color: var(--dark-text); }
/* phase 2 item 6: the huisstijl cards carry one price line more ("Huisstijl: prijs op aanvraag");
   in the 4-column row the other two cards keep that line's space so their text lines up */
@media (min-width: 1181px) {
  .of-price:not(:has(> :nth-child(4))) > :last-child { margin-bottom: calc(1lh + 2px); }
}
.of-foot .tag { margin-left: var(--s2); }
.of-card--pick .of-foot .tag { background: var(--dark-line); color: var(--dark-muted); }
.of-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.of-foot .tag { margin-left: 0; }
.of-card:not(.of-card--pick) .of-for { color: #64615B; } /* 5.27:1 on --surface (was 4.47) */

/* ---------- mobile audit 11-10 ---------- */
@media (max-width: 760px) {
  /* long "herkent u dit?" pills wrapped instead of running off-screen */
  .herken .hp-pill { white-space: normal; text-align: left; max-width: 100%; border-radius: 18px; padding: 12px 18px; line-height: 1.35; min-height: 44px; }
  .herken .hp-pill .dot { flex: 0 0 auto; }
  .sc-n { font-size: 12px; }
}