:root {
  --frame-w:clamp(4px, 0.45vw, 9px); /* one fluid thickness for every coloured frame (screenshots, report pages, gallery cards, lightbox) */
  --navy:#2d2e83;
  --orange:#EF7D00;
  --cyan:#00A6D1;
  --green:#AFCA0B;
  --yellow:#FFCC00;

  --tint-cyan:#def3f9;
  --tint-green:#f5f8df;
  --tint-yellow:#fff8de;
  --tint-orange:#fdeede;

  --paper:#FBFAF7;

  --bar-h:48px; /* sticky bar height */
}

@media (max-width:700px) {
  :root { --bar-h:56px; } /* room for the 44px logo */
}

* {
  box-sizing:border-box;
}

/* Lenis smooth scroll (see scroll-engine.js) */
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-stopped { overflow:clip; }

html, body {
  margin:0;
  padding:0;
  /* overflow-x:clip (not hidden) — hidden makes html/body a scroll
     container, which breaks position:sticky for every sticky element
     on the page (their sticky positioning ends up computed relative to
     that new container instead of the viewport). clip suppresses the
     same horizontal overflow (100vw includes the scrollbar gutter in
     most browsers) without creating a scroll container. */
  overflow-x:clip;
}

body {
  font-family:'Montserrat', sans-serif;
  color:var(--navy);
  background:var(--paper);
  line-height:1.65;
  font-size:1.05rem;
}

img {
  max-width:100%;
  display:block;
}

.wrap {
  max-width:1080px;
  margin:0 auto;
  padding:0 24px;
}

h1, h2, h3 {
  color:var(--navy);
  line-height:1.2;
  margin:0 0 0.5em;
}

h1 {
  font-size:clamp(2rem, 5vw, 2.75rem);
  font-weight:800;
}

h2 {
  font-size:clamp(1.5rem, 3.5vw, 2rem);
  font-weight:800;
  margin-bottom:0.7em;
}

h3 {
  font-size:1.15rem;
  font-weight:700;
}

p {
  margin:0 0 1.1em;
}

ol, ul {
  margin:0 0 1.1em;
  padding-left:1.3em;
}

li {
  margin-bottom:0.4em;
}

.accent {
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  color:var(--orange);
}

.logo {
  width:clamp(120px, 16vw, 170px);
  height:auto;
}

.eyebrow {
  font-weight:700;
  font-size:0.85rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--cyan);
  margin:0 0 0.4em;
}

/* ---------- classroom hero (scroll-driven coloring page) ----------
   coloring.js forces every .color-item to grayscale, builds a white
   "cover" clone + scribble mask per item, and drops the real logo +
   intro text in as native SVG content inside #mkg-classroom (fitted to
   #mkg-logo-slot/#tekst-slot once, in the same coordinate space as
   everything else — no per-frame screen-position tracking needed).
   This file sets up the static scaffold plus the on-load text/arrow
   reveal — the scroll-driven coloring/zoom itself has no CSS
   transitions to fight, coloring.js sets exact values every frame. */
.classroom-hero {
  position:relative;
  height:420vh;
  background:#fff; /* white fallback — the room's own wall/floor art now extends far enough that this should never actually show */
  /* No overflow-x here — this is .classroom-sticky's containing-block
     ancestor, and overflow other than visible on a sticky ancestor
     breaks position:sticky (it becomes the nearest scroll container,
     so sticky positioning computes relative to it instead of the
     viewport). html/body's overflow-x:clip already suppresses the
     page-level horizontal overflow this would have addressed. */
}

.classroom-sticky {
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden; /* fine here — this is the sticky element itself, not an ancestor, so it doesn't affect its own stickiness */
  z-index:1;
  background:#fff; /* was a white->yellow gradient standing in for the floor; the SVG's own floor rect now covers this at any width, so any sliver that peeks through reads as white, never yellow */
}

#mkg-classroom {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}

/* text write-in reveal (SVG <text>, built by coloring.js) */
#tekst-embed {
  clip-path:inset(0 100% 0 0);
  animation:classroomTextReveal 1s 0.4s cubic-bezier(.2,.7,.3,1) forwards;
}

@keyframes classroomTextReveal {
  to { clip-path:inset(0 0% 0 0); }
}

/* DOWN ARROW CSS - switched off together with the arrow (see index.html), kept
   here in case it is wanted again. The arrow sat inside the digibord screen
   under the line of text: the shaft drew itself in right after the text
   reveal above (ends at 1.4s), then the head, then the group bobbed gently
   (3.6 svg units is about 6px on screen); coloring.js faded it with the text.

#arrowDown .arrow-shaft {
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:classroomArrowDraw 0.5s 1.4s ease-out forwards;
}

#arrowDown .arrow-head {
  stroke-dasharray:1;
  stroke-dashoffset:1;
  animation:classroomArrowDraw 0.25s 1.85s ease-out forwards;
}

@keyframes classroomArrowDraw {
  to { stroke-dashoffset:0; }
}

#arrowDown {
  animation:classroomArrowBob 1.6s 2.3s ease-in-out infinite;
}

@keyframes classroomArrowBob {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(3.6px); }
}
*//* Defensive default — coloring.js sets the real value every frame from
   its very first synchronous render() call, but this covers the
   instant before that (or if JS is slow), same pattern used for
   .screen2-sticky's own opacity:0 default. */
#disney-licht {
  opacity:0;
}

/* Finale sparkles (#disney-licht) gently twinkle — always running via
   CSS (cheap/harmless while invisible), each <use> given its own
   animation-delay/duration inline in the markup for variety. The
   parent's own opacity (driven by coloring.js, see that file's finale
   phase) is what actually makes them visible or not. transform-box:
   fill-box is needed so scale() pivots around each sparkle's own
   center rather than the SVG viewport's origin. */
#disney-licht use {
  transform-box:fill-box;
  transform-origin:50% 50%;
  animation-name:classroomSparkle;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
}

@keyframes classroomSparkle {
  0%, 100% { transform:scale(0.8); opacity:0.4; }
  50% { transform:scale(1.1); opacity:1; }
}

@media (prefers-reduced-motion:reduce) {
  #disney-licht use { animation:none; }
}

/* prefers-reduced-motion: fully colored classroom shown statically,
   no scroll-jack, next section flows normally below */
@media (prefers-reduced-motion:reduce) {
  .classroom-hero { height:100vh; }
  .classroom-sticky { position:static; height:100vh; }
  #tekst-embed { animation:none; clip-path:none; }
  /* #arrowDown { display:none; }  (the arrow is switched off) */
}

/* ---------- screen 2 (premium cinematic reveal, sticky stage) ----------
   .deco-icon positioning/rotation convention copied from I-tje/
   article_1's own hero (now just 2, small and soft — ambient texture,
   not competing with the headline/tablet). .screen2-wrap is tall (130vh
   pinned range) and follows the intro directly in the flow (no overlap):
   when the intro's pin releases, the white intro view scrolls up and away
   while this stage rises from below at the same speed — both are solid
   white at that moment, so the push has no visible seam (the same plain
   push as screen 2 -> 3 -> 4). Unlike the intro and screen 3, screen 2 is
   NOT scrubbed by scroll: screen2.js plays the whole sequence on its own
   clock (~2.7s) once ~25% of it is in view. This height only has to hold
   the stage still while that runs and leave a short beat to look at the
   result - scroll speed doesn't change the animation. */
.screen2-wrap {
  position:relative;
  /* Overlaps the end of the intro: -106.4vh puts the top of this wrap (where
     its sticky pin engages) at 98% of the intro's scroll range = 90% of its
     zoom (the zoom is the last 20%: 0.80 + 0.2 * 0.9), when the view is
     already plain #def3f9. screen2.js keeps the stage hidden until then.
     Only this transition overlaps; 2 -> 3 and 3 -> 4 stay plain pushes. */
  margin-top:-106.4vh;
  height:230vh; /* wrapperHeight - 100vh viewport = 130vh pinned scroll range */
  z-index:5;
}

/* Explicit 100vw/100vh. Solid MKG pale blue from the very first pixel, so it sits seamlessly on top of the intro's zoom, which is already plain #def3f9 by then. */
.screen2-sticky {
  position:sticky;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  overflow-x:clip; /* cuts off the back page's deliberate right-edge bleed with no scrollbar — clip (not hidden) since this is the sticky element itself */
  overflow-y:hidden;
  background:#def3f9;
  z-index:5;
}

.deco-icon {
  position:absolute;
  z-index:0;
  height:auto;
  pointer-events:none;
  opacity:0;
  transform:rotate(var(--rot, 0deg)) scale(0.7);
}

.screen2-inner {
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
  max-width:1600px; /* overrides .wrap's 1080px for this section only */
  margin:0 auto;
}

.screen2-cols {
  display:flex;
  align-items:flex-start; /* was center — .screen2-text now anchors itself via margin-top below; .screen2-collage re-centers itself independently via align-self */
  gap:2vw;
  width:100%;
  height:100%;
}

.screen2-text {
  position:relative; /* anchors .s2-arrow, which reaches into the gap */
  z-index:5; /* above the pages (1-3); .s2-confetti (z-index:6) now sits above this */
  flex:0 0 40%;
  max-width:40%;
  text-align:left;
  margin-top:38vh; /* ~38% from the top of the viewport, instead of vertically centered — vh is viewport-relative regardless of nesting, so this lands correctly */
}

/* Crisp reveal: a fixed-height overflow:hidden mask per word/line, with
   the real content sliding up from translateY(100%) to 0 inside it —
   always full color/opacity, never a fade. */
.s2-mask {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}

/* Overrides .s2-mask's overflow:hidden: with two forced-nowrap lines
   (one of them auto-fit down from JS, see screen2.js), a hard clip
   here risked cutting the subline off mid-line — including the logo
   on line 2 — whenever the fit landed a hair too wide. #s2Subline
   pairs its own opacity with the translateY reveal below so the
   pre-reveal state still reads as hidden without relying on a clip. */
#s2SublineMask {
  display:block;
  overflow:visible;
}

.s2-slide,
.s2-word {
  display:inline-block;
  transform:translateY(100%);
}

/* #s2Subline (.s2-slide) is no longer clipped by its mask (see
   #s2SublineMask) — opacity:0 here is what hides its pre-reveal state
   instead; screen2.js drives both opacity and transform together. */
#s2Subline {
  opacity:0;
}

/* .screen2-text (the shared ancestor) already carries position:relative
   + z-index:5, above the collage's pages (1-3) — that alone is enough
   for correct stacking. Headline/subline each also get their own
   position:relative + z-index as a second, redundant safety net, so
   text can never end up hidden behind a page even if the ancestor
   rule ever changes. */
#s2Headline,
#s2Subline {
  position:relative;
  z-index:1;
}

#s2Headline {
  font-family:'Montserrat', sans-serif;
  font-size:clamp(2.8rem, 4.5vw, 5rem); /* "Kleur" — "buiten de lijntjes." overrides this larger, see .s2-accent-outer */
  font-weight:800;
  color:var(--navy);
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 0.4em;
}

/* Each sentence is its own block/line, forced to stay on one line so
   the widened text column is what keeps them from wrapping — never a
   mid-sentence line break. */
.s2-line {
  display:block;
  white-space:nowrap;
}

/* "buiten de lijntjes." keeps .s2-word's JS-driven translateY reveal;
   its own permanent styling (font/color/size/rotation) lives one level
   deeper on .s2-accent so screen2.js never overwrites it. The
   underline SVG sits here, as a sibling of .s2-mask rather than inside
   it — .s2-mask needs overflow:hidden to clip the word before it
   slides up, and an underline overshooting past the text would get
   clipped too if it lived inside that same box. The much bigger
   font-size lives on THIS wrapper (not just .s2-accent) so .s2-underline
   — an em-sized sibling, not a descendant of .s2-accent — scales up
   to match it instead of inheriting #s2Headline's smaller base size. */
.s2-accent-outer {
  position:relative;
  display:inline-block;
  vertical-align:top;
  font-size:clamp(4rem, 8vw, 8.5rem);
}

.s2-accent {
  display:inline-block;
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  color:#EF7D00;
  transform:rotate(-3deg);
  transform-origin:left bottom;
}

/* Playful scribble under "buiten de lijntjes." — a touch wider than
   the text box on the right (toward the pages) so it overshoots
   slightly, like coloring outside the lines, without reaching as far
   as the gap to the collage. Drawn in via stroke-dashoffset right
   after the word finishes sliding up (see screen2.js). */
.s2-underline {
  position:absolute;
  left:-3%;
  bottom:-0.3em;
  width:106%;
  height:0.6em;
  overflow:visible;
  pointer-events:none;
}

/* Loose arrow curving from the end of the scribble toward the front
   report page — same shaft+head technique as the intro's #arrowDown.
   Anchored to .screen2-text (position:relative) so it reaches into
   the gap between the two columns regardless of exact text width. */
.s2-arrow {
  position:absolute;
  right:-15vw;
  bottom:6%;
  width:18vw;
  max-width:220px;
  height:auto;
  pointer-events:none;
  display:none; /* hidden for now — markup/JS drawing kept intact to bring back later */
}

#s2Subline {
  font-family:'Montserrat', sans-serif;
  font-size:1.6rem;
  font-weight:600;
  color:#2d2e83;
  line-height:1.4;
}

.s2-subline-strong {
  font-weight:800;
}

/* Each sentence forced onto its own single line — sentence 1 was
   wrapping with "bent." stranded alone on a second line. */
.s2-subline-line1 {
  white-space:nowrap;
}

/* Line 2 ("De gegevens komen vanzelf uit" + logo) forced onto one
   line: inline-flex row-aligns the text baseline with the (much
   taller) logo, white-space:nowrap plus the flex container's own
   default nowrap wrapping guarantee it can never break mid-line
   regardless of available width. */
.s2-subline-line2 {
  display:inline-flex;
  align-items:center;
  gap:0.4em;
  white-space:nowrap;
}

/* Inline MKG logo standing in for the word "MijnKleutergroep". */
.s2-subline-logo {
  height:2.6em;
  width:auto;
  flex:none;
}

/* ---- report page collage: two pages "on a table", overlapping.
   Square corners throughout; each page carries its own soft shadow
   (decorative, non-interactive, so exempt from the no-shadow rule). ---- */
.screen2-collage {
  position:relative;
  flex:1 1 60%;
  align-self:center; /* stays vertically centered independently of .screen2-text's own top-anchored position */
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Frame (border/shadow/position/transform) lives on the wrapper; the
   <img> inside is pure content at width:100%;height:auto. All three
   pages share the same height — width:auto + aspect-ratio derives the
   width from the images' own real 1406x1988 (A4) proportions, rather
   than capping width directly the way the old min(320px,42vh,34vw)
   rule did. Sized via WIDTH only — calc(72vh * 1406/1988) is the width
   that yields the same ~72vh-tall image as before — because a fixed
   height/aspect-ratio on the wrapper ITSELF (with a border eating into
   it via box-sizing:border-box) let the image and the frame disagree
   on the exact box, leaving a gap on one edge. With height left auto,
   the wrapper's own box is always exactly image-size + frame padding,
   so a gap is structurally impossible. With the pages' own +/-8vh
   Y-offset and ~4-5deg rotation (both set in screen2.js), all three
   stay within a >=3vh margin top and bottom, and the leftmost page
   (back2/"Ik-tekening", offset -8vw) stays clear of the 2vw gap into
   the text column. The back page (see screen2.js's own BACK_OFFSET_X)
   is still deliberately allowed to slide part of its own width off the
   right edge of the viewport — see .screen2-sticky's overflow-x:clip
   for how that gets cut off cleanly, without a horizontal scrollbar. */
.collage-page-wrap {
  position:absolute;
  top:50%;
  left:50%;
  width:calc(72vh * 1406 / 1988 - 28px + 2 * var(--frame-w)); /* the picture keeps its size; only the coloured frame got thinner */
  box-sizing:border-box;
  border-radius:0;
  opacity:0; /* shown by screen2.js just before each page starts moving */
  /* rest transform (translate + rotate) set every frame by screen2.js;
     both start stacked/straight and animate to their own offset */
}

/* The shadow is a static box-shadow on a layer behind the page (not a
   drop-shadow filter on the page itself), so moving the page never
   re-computes a blurred shadow. */
.collage-page-wrap::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  box-shadow:0 12px 24px rgba(45,46,131,0.12);
}

.collage-page {
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
}

/* Frame = padding + background color, not a border — a border's own
   box-sizing:border-box math could make the frame and the (separately
   height:auto-sized) image disagree by a pixel or two, leaving a
   sliver gap on one edge. Padding can't: the frame's box is always
   exactly the image's own rendered size plus this padding, on every
   edge, by construction. */
.collage-front-wrap {
  padding:var(--frame-w);
  background:#00A6D1;
  z-index:3;
}

.collage-back-wrap {
  padding:var(--frame-w);
  background:#AFCA0B;
  z-index:2;
}

/* No frame: rapport-pagina-3.jpg (the "Ik-tekening") already has its
   own striped border baked into the image. */
.collage-back2-wrap {
  z-index:1;
}

/* Confetti burst canvas — a sibling of .screen2-cols, sized to all of
   .screen2-inner (effectively the full stage width, up to the 1400px
   content cap) rather than boxed into the collage's small rect, so
   particles can fly freely. z-index:6 sits above both the pages (1-3)
   and .screen2-text (z-index:5) — the burst now originates top-left,
   above the headline, and is allowed to drift in front of the text as
   it falls; pointer-events:none keeps it from blocking clicks/taps on
   anything underneath. Drawn/driven by burstConfetti()'s own
   time-based loop, not scroll progress. */
.s2-confetti {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:6;
}

/* Niveauhandje stamp icons "stamped" onto page 2 — children of its
   own .collage-page-wrap (already position:absolute), so they inherit
   that wrapper's scroll-driven position/rotation for free. Hidden by
   default; screen2.js pops them in with a scale bounce, staggered. */
.s2-niveau-group {
  position:absolute;
  inset:0;
  pointer-events:none;
}

.s2-niveau {
  position:absolute;
  width:11%;
  height:auto;
  transform:scale(0);
  opacity:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.18));
}

/* Idle float, applied to the settled page's own <img> (never the
   .collage-page-wrap, which screen2.js keeps setting transform on
   every scroll frame — animating the same property on that element
   would fight the scroll-driven value). The niveau group gets the
   same class so it drifts together with page 2's image. Each class
   uses the same keyframes with a different duration/offset so the
   three pages don't move in lockstep. */
@keyframes s2Float {
  0%, 100% { transform:translate(0, 0) rotate(0deg); }
  25% { transform:translate(2.4px, -1.8px) rotate(0.4deg); }
  50% { transform:translate(-2px, 2.4px) rotate(-0.5deg); }
  75% { transform:translate(-2.6px, -1px) rotate(0.3deg); }
}

.s2-float-1 { animation:s2Float 6.5s ease-in-out infinite; }
.s2-float-2 { animation:s2Float 7.5s ease-in-out infinite; animation-delay:-2s; }
.s2-float-3 { animation:s2Float 8s ease-in-out infinite; animation-delay:-4.5s; }

/* prefers-reduced-motion: collapse the sticky-pin stage entirely, show
   the final state as a normal static section. screen2.js's own
   applyReducedMotionFinalState() sets the pages' final transform
   inline — this block only covers what JS clears back to CSS resting
   values (bg/doodle opacity, word/subline reveal transform). Confetti,
   the doodle bump and the niveauhandje stamp are all triggered from
   inside render(), which never runs under reduced motion, so none of
   them fire; this block just also belts-and-braces the idle float and
   guarantees the niveauhandjes stay hidden rather than stuck mid-bounce. */
@media (prefers-reduced-motion:reduce) {
  .screen2-wrap { height:100vh; margin-top:0; }
  .screen2-sticky { position:static; height:100vh; opacity:1; pointer-events:auto; }
  .deco-icon { opacity:0.6; transform:rotate(var(--rot, 0deg)) scale(1); }
  .s2-slide,
  .s2-word { transform:none; }
  #s2Subline { opacity:1; }
  .s2-underline path,
  .s2-arrow path { stroke-dashoffset:0 !important; }
  .s2-float-1,
  .s2-float-2,
  .s2-float-3 { animation:none !important; }
  .s2-niveau { opacity:0 !important; transform:scale(0) !important; }
}

/* ---- screen 2, single column (phones and tablet portrait, up to 900px):
   the text block on top below the sticky bar, the three report pages below it
   as a small fan (the cover in front, the other two peeking out left and right;
   offsets/rotations are set in screen2.js). The balloon doodle sits small in the
   top right corner, the star bottom left. ---- */
@media (max-width:900px), (orientation:portrait) and (max-width:1100px) {
  .screen2-cols {
    flex-direction:column;
    align-items:stretch;
    gap:0;
  }
  .screen2-text {
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    padding:0 16px;
    text-align:center;
    margin-top:calc(var(--bar-h) + 40px);
  }
  .s2-arrow { display:none; }

  /* the subline may wrap here; the logo stays at the end of line 2 */
  #s2Subline { font-size:1.4rem; }
  .s2-subline-line1 { white-space:normal; }
  .s2-subline-line2 {
    white-space:normal;
    flex-wrap:wrap;
    justify-content:center;
    row-gap:0.2em;
  }

  .screen2-collage {
    flex:1 1 0;
    height:auto;
    min-height:0;
    width:100%;
    align-self:stretch;
  }
  .collage-page-wrap {
    width:min(50vw, 320px, calc(var(--s2-room, 300px) / 1.55));
    min-width:110px;
  }

  #s2Deco0 {
    width:min(56px, 14vw) !important;
    top:calc(var(--bar-h) + 6px) !important;
    right:3% !important;
  }
  #s2Deco1 {
    width:min(64px, 16vw) !important;
    bottom:2% !important;
    left:3% !important;
  }
}

@media (max-width:700px) {
  #s2Subline { font-size:1.15rem; }
}

/* the subline wraps when even its smallest size is wider than the column (set by screen2.js) */
.s2-subline-wrap .s2-subline-line1 { white-space:normal; }
.s2-subline-wrap .s2-subline-line2 { white-space:normal; flex-wrap:wrap; }

/* ---------- screen 3 ("In vier pennenstreken.", sticky stage) ----------
   .screen3-wrap is tall (450vh = 350vh pinned range + 100vh). It follows
   the feature explorer (screen 4) directly in the flow (no overlap), so when
   the explorer scrolls away, screen 3 pushes in from below - the same plain push as screen 3 -> screen 4. Its pin engages once
   it has filled the viewport. All motion is screen3.js reading
   .screen3-wrap's own scroll progress. */
.screen3-wrap {
  position:relative;
  /* 400vh pinned range for 5 segments (4 steps + the finale) — raised
     from 320vh/4 segments so each segment keeps roughly the same
     physical scroll length as before. */
  height:450vh; /* wrapperHeight - 100vh viewport = 350vh pinned scroll range = 5 segments of 70vh */
  z-index:6;
}

.screen3-sticky {
  position:sticky;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  overflow-x:clip;
  overflow-y:hidden;
  background:#def3f9; /* step 1's colour; screen3.js crossfades the other steps' colours in as stacked .s3-color-layer divs (opacity only) */
  z-index:6;
}

.screen3-inner {
  position:relative;
  width:100%;
  height:100%;
  max-width:1650px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.screen3-title {
  text-align:center;
  padding-top:max(4vh, calc(var(--bar-h) + 12px)); /* clear of the sticky bar */
  margin-bottom:2.5vh; /* reduced to make room for the bigger frame below */
}

#s3Headline {
  font-family:'Montserrat', sans-serif;
  font-size:clamp(2rem, 4vw, 3.2rem);
  font-weight:800;
  color:var(--navy);
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 0.3em;
}

.s3-accent {
  display:inline-block;
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  color:#EF7D00;
  font-size:1.25em;
  transform:rotate(-2deg);
  transform-origin:left bottom;
}

.s3-mask {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}

#s3SublineMask {
  display:block;
  overflow:visible; /* see screen2's own #s2SublineMask — same reasoning, pre-reveal hiding is opacity-driven below, not clip-driven */
}

.s3-word {
  display:inline-block;
  transform:translateY(100%);
}

/* Matches screen 2's own #s2Subline treatment: weight 600, full navy
   (the old rgba(...,0.8) read as a lighter, slightly purple navy
   against the tinted stage background), 1.6rem. */
#s3Subline {
  display:inline-block;
  font-family:'Montserrat', sans-serif;
  font-size:1.6rem;
  font-weight:600;
  color:#2d2e83;
  line-height:1.4;
  opacity:0;
}

.screen3-cols {
  position:relative;
  display:flex;
  align-items:center; /* frame and text vertically centered relative to each other */
  gap:4vw;
  width:100%;
  flex:0 0 auto; /* was 1 1 auto — stretching to fill all remaining space below the title left a lot of internal centering slack above the content; sitting at its own natural (~72vh) height instead is what moves the columns up */
}

/* 65/35 split, minus half the row's 4vw gap each — flex-shrink is 0
   here, so a plain 65%+35% would overflow the row by the full gap
   width and push the text column past the right edge. */
.screen3-frame-col {
  flex:0 0 calc(65% - 2vw);
  max-width:calc(65% - 2vw);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Frame = padding + background on this wrapper (never a border, never
   an aspect-ratio/height on this element) so it always hugs the image
   with no gap — the same lesson as .collage-page-wrap in the screen2
   rules. Sized by width only, capped by a height budget (76vh,
   matching .screen3-text-col's own height) so it stays fully visible
   below the title regardless of viewport shape; background-color
   transitions smoothly between steps (screen3.js just sets it every
   frame — an unchanged value doesn't restart or interrupt an
   in-progress transition, and it reverses the same way scrolling
   back). Always fully in place (no rise-in) — see screen3.js's own
   "no empty state" notes. */
/* The width cap lives on the stage, not the frame, so the stage's box
   matches the frame's exactly and step 4's report page can be
   positioned against it. */
.s3-frame-stage {
  position:relative;
  width:min(100%, calc(76vh * 2872 / 1524));
}

/* Full-size colour layer, stacked above the element's own background.
   screen3.js builds these per step and crossfades them with opacity
   alone — background-color is never animated. */
.s3-color-layer {
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
}

/* The group is what fades out in the finale. The shadow is a static
   box-shadow on its own ::before layer behind the frame, so nothing
   ever re-computes a blurred drop-shadow while the frame animates. */
.s3-frame-group {
  position:relative;
  isolation:isolate;
  width:100%;
}

.s3-frame-group::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  box-shadow:0 12px 24px rgba(45,46,131,0.12);
}

.s3-frame-wrap {
  position:relative;
  width:100%;
  padding:var(--frame-w);
  background:#00A6D1; /* step 1; the other steps' colours are .s3-color-layer children */
}

/* The finale's report page: takes the frame's place in the 5th
   segment (the frame itself fades out), in its own yellow 16px frame,
   rotated -2deg. Right-aligned to the stage rather than centred in it:
   the stage is as wide as the landscape screenshot frame, so centring
   a portrait page in it would strand it far from "Klaar!". Sitting on
   the stage's right edge puts it exactly where the frame's right edge
   was, so the gap to the text column is the same 4vw the steps have.
   98% of the stage height — the -2deg rotation makes the rendered box
   ~2.4% taller than the page itself, so that margin keeps it fully
   visible at ~76vh. opacity/transform are set every frame by
   screen3.js; these are the resting (hidden, tucked down) values. */
.s3-finale-report {
  position:absolute;
  right:0;
  top:50%;
  height:98%;
  z-index:2;
  padding:var(--frame-w);
  background:#FFCC00;
  opacity:0;
  transform:translateY(-50%) translateY(40px) rotate(-2deg);
  pointer-events:none;
}

/* Static shadow layer behind the report (see .s3-frame-group). */
.s3-finale-report::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  box-shadow:0 16px 32px rgba(45,46,131,0.18);
}

.s3-finale-report img {
  display:block;
  height:100%;
  width:auto;
}

/* "Klaar!" takes the step number's place — same Caveat Brush size via
   .s3-step-number, in navy. */
#s3Step5 .s3-step-number {
  color:#2d2e83;
}

/* No bold title line in the finale, so the body text would otherwise
   sit tight under that very large word. */
#s3Step5 .s3-step-text { margin-top:0.6rem; }

/* Pops in at the route's end when the finale appears. Positioned by
   screen3.js (it knows where the route's bottom lands). */
.s3-route-star {
  position:absolute;
  left:12px; /* the route path's own centre line */
  width:30px;
  height:30px;
  opacity:0;
  transform:translate(-50%, -50%) scale(0);
  pointer-events:none;
}

/* aspect-ratio lives here instead (a separate element from the padded
   wrapper above), so the two never fight over the same box the way a
   fixed height + border once did. */
.s3-frame-inner {
  position:relative;
  width:100%;
  aspect-ratio:2872 / 1524;
  overflow:hidden;
  background:#000;
}

.s3-frame-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  transform:translateX(100%); /* off-screen right by default; screen3.js slides each one in on its own step */
}

/* Arrow "d" is built by screen3.js from each svg's own
   data-x1/y1/x2/y2 (percent of the screenshot) — the viewBox matches
   the screenshot's real 2872:1524 ratio exactly, so those percentages
   map directly with no distortion. */
.s3-arrow {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.screen3-text-col {
  position:relative;
  flex:0 0 calc(35% - 2vw); /* see .screen3-frame-col — the other half of the gap */
  max-width:calc(35% - 2vw);
  /* Explicit vh value (matching the frame's own height budget below),
     not 100% — .screen3-cols is no longer a definite-height flex box
     (flex:0 0 auto), and a percentage height on a child of an
     auto-sized flex parent resolves to auto too (a circular dependency
     CSS just ignores), which would break the top:50% positioning that
     .s3-step and .s3-route rely on. vh sidesteps that chain entirely.
     screen3.js's own fitStepText() shrinks the body text if a step's
     content would otherwise overflow this budget. */
  height:76vh;
}

/* Route + step text form one combined block: both centered the exact
   same way (top:50%, translateY(-50%) — a plain -50%, since the route
   is the same height as the (tallest) step, so they share one
   vertical midpoint). Route height = the step block's own height
   (number-top to body-bottom) — screen3.js's sizeRoute() sets it and
   repositions dot 1 to the number's own vertical middle accordingly.
   #s3RouteDotted is the faint always-visible guide; #s3RouteSolid
   shares its exact "d" and fills in 3 discrete dot-to-dot stages (not
   a smooth continuous reveal) as the user scrolls through the steps,
   finishing by the time the finale appears. */
.s3-route {
  position:absolute;
  left:0;
  top:0;
  width:24px;
  /* top + height both set by screen3.js — it top-anchors the route
     and every step block at one shared pixel position, so the step
     number never moves between steps and dot 1 can line up with it
     exactly for all four. */
}

/* Step text: all four stacked in the same spot, centered; screen3.js
   drives each one's own opacity + translateY (entering/active/exiting)
   as a pure function of scroll progress. */
.s3-step {
  position:absolute;
  left:calc(24px + 1.5rem); /* route's own 24px width + a fixed 1.5rem gap to it */
  top:0; /* real value set by screen3.js — all four share one top anchor */
  right:0;
  opacity:0;
}

.s3-step-number {
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  font-size:clamp(5rem, 9vw, 10rem);
  line-height:1;
  margin:0 0 0.1em;
}

/* Matches each step's own frame/arrow color (the dotted route stays
   orange regardless — see #s3RouteDotted/#s3RouteSolid). */
#s3Step1 .s3-step-number { color:#00A6D1; }
#s3Step2 .s3-step-number { color:#AFCA0B; }
#s3Step3 .s3-step-number { color:#EF7D00; }
#s3Step4 .s3-step-number { color:#2d2e83; }

.s3-step-title {
  font-family:'Montserrat', sans-serif;
  font-weight:800;
  color:var(--navy);
  font-size:2.6rem;
  margin:0 0 0.4em;
}

.s3-step-text {
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  color:rgba(45,46,131,0.85);
  font-size:1.45rem;
  line-height:1.55;
  max-width:32rem;
  margin:0;
}

/* Button/menu names in the step copy — full navy so they lift off the
   85%-opacity body text around them. */
.s3-step-text strong,
.s3m-step p strong {
  font-weight:700;
  color:#2d2e83;
}

@media (prefers-reduced-motion:reduce) {
  .screen3-wrap { display:none; }
}

/* No intermediate "stack these two columns but keep the pin" state:
   .screen3-text-col's step text relies on position:absolute children
   positioned against its own explicit height (see .screen3-text-col's
   own comment), which reads oddly once .screen3-cols switches to
   flex-direction:column — so the switch to the fully static
   .screen3-mobile fallback happens at this same 900px breakpoint,
   before that combination can ever occur. */
@media (max-width:900px) {
  .screen3-wrap { display:none; }
}

/* ---------- screen 3 mobile / reduced-motion fallback ----------
   Fully static: every step stacked normally, no pin, no scroll-jack,
   each with its own screenshot above its text. Shown instead of the
   pinned .screen3-wrap stage on narrow viewports AND under
   prefers-reduced-motion — same content covers both, so screen3.js
   skips its own init entirely in either case. */
.screen3-mobile {
  display:none;
  background:var(--tint-orange);
  padding:64px 0;
}

.s3m-title {
  text-align:center;
  margin-bottom:40px;
}

.s3m-title h2 {
  font-size:clamp(1.8rem, 6vw, 2.6rem);
  line-height:1.2;
  margin:0 0 0.3em;
}

.s3m-navy {
  font-family:'Montserrat', sans-serif;
  font-weight:800;
  color:var(--navy);
}

.s3m-accent {
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  color:#EF7D00;
  font-size:1.25em;
  display:inline-block;
  transform:rotate(-2deg);
}

/* Same weight/color treatment as the desktop #s3Subline, just at the
   smaller mobile size. */
.s3m-subline {
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  color:#2d2e83;
  font-size:1.2rem;
  line-height:1.4;
  margin:0;
}

.s3m-step {
  position:relative;
  max-width:420px;
  margin:0 auto 56px;
  text-align:center;
}

/* Same frame technique as desktop's .s3-frame-wrap: padding + solid
   background (color set inline per step), image at plain
   width:100%;height:auto so it always hugs with no gap. */
.s3m-frame {
  position:relative;
  padding:var(--frame-w);
  margin:0 0 20px;
  filter:drop-shadow(0 12px 24px rgba(45,46,131,0.12));
}

.s3m-shot {
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
}

/* Arrows are fully drawn here (no scroll-tied reveal on mobile) —
   screen3.js still builds each "d" from the same data-x1/y1/x2/y2 as
   the desktop version, then sets stroke-dashoffset:0 directly. */
.s3m-arrow {
  position:absolute;
  inset:var(--frame-w); /* matches .s3m-frame's own padding, so it overlays exactly the image below it */
  pointer-events:none;
}

/* Navy, matching the desktop "Klaar!". */
.s3m-finale-word {
  color:#2d2e83;
}

/* The finale's report page on mobile — same yellow frame and -2deg
   tilt as the desktop version, just sitting in the stack. */
.s3m-report {
  position:relative;
  width:72%;
  margin:0 auto 24px;
  padding:var(--frame-w);
  background:#FFCC00;
  transform:rotate(-2deg);
  filter:drop-shadow(0 16px 32px rgba(45,46,131,0.18));
}

.s3m-report img {
  display:block;
  width:100%;
  height:auto;
}

.s3m-number {
  font-family:'Caveat Brush', cursive;
  color:#EF7D00;
  font-size:4rem;
  line-height:1;
  margin:0 0 0.1em;
}

.s3m-step h3 {
  font-family:'Montserrat', sans-serif;
  font-weight:800;
  color:var(--navy);
  font-size:1.6rem;
  margin:0 0 0.3em;
}

.s3m-step p {
  font-family:'Montserrat', sans-serif;
  color:rgba(45,46,131,0.85);
  font-size:1.05rem;
  line-height:1.6;
  margin:0;
}

@media (max-width:900px) {
  .screen3-mobile { display:block; }
}

@media (prefers-reduced-motion:reduce) {
  .screen3-mobile { display:block; }
}

/* ---------- "Werkt met Canva" intro panel ---------- */
.panel-white {
  background:#fff;
}

.canva-kicker {
  font-family:'Montserrat', sans-serif;
  color:var(--navy);
  font-weight:800;
  font-size:1.1rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin:0 0 0.6em;
}

.video-wrapper {
  margin-top:8px;
  border-radius:0;
  overflow:hidden;
  background:#000;
  max-width:900px;
}

.video-wrapper video {
  display:block;
  width:100%;
  height:auto;
  border-radius:0;
}

/* ---------- section panels ---------- */
.panel {
  padding:56px 0;
  background:var(--paper);
}

.panel.tint-cyan   { background:var(--tint-cyan); }
.panel.tint-green  { background:var(--tint-green); }
.panel.tint-yellow { background:var(--tint-yellow); }
.panel.tint-orange { background:var(--tint-orange); }

/* ---------- cards ---------- */
.card-grid {
  display:grid;
  gap:24px;
  margin-top:24px;
}

.card-grid.two-col {
  grid-template-columns:repeat(2, 1fr);
}

.card-grid.three-col {
  grid-template-columns:repeat(3, 1fr);
}

.card {
  background:#fff;
  border-radius:0;
  padding:28px;
}

.card ol, .card ul {
  padding-left:1.2em;
}

.card p:last-child,
.card ol:last-child,
.card ul:last-child {
  margin-bottom:0;
}

.card.tint-cyan   { background:var(--tint-cyan); }
.card.tint-green  { background:var(--tint-green); }
.card.tint-orange { background:var(--tint-orange); }

.card-number {
  display:inline-block;
  width:36px;
  height:36px;
  line-height:36px;
  text-align:center;
  border-radius:0;
  color:#fff;
  font-weight:800;
  margin-bottom:12px;
}

.c-orange { background:var(--orange); }
.c-cyan   { background:var(--cyan); }
.c-green  { background:var(--green); color:var(--navy); }

/* ---------- step list ---------- */
.step-list {
  list-style:none;
  margin:24px 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.step-list li {
  display:flex;
  gap:16px;
  align-items:flex-start;
  margin-bottom:0;
  background:#fff;
  padding:20px 24px;
}

.step-number {
  flex:0 0 auto;
  width:32px;
  height:32px;
  line-height:32px;
  text-align:center;
  border-radius:0;
  color:#fff;
  font-weight:800;
  font-size:0.95rem;
}

.step-list li div p,
.step-list li div {
  margin:0;
}

/* ---------- plain list (printing) ---------- */
.plain-list {
  list-style:none;
  padding:0;
  margin:24px 0 0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.plain-list li {
  background:#fff;
  padding:18px 22px;
  margin:0;
}

/* ---------- benefits ---------- */
.benefits-grid {
  grid-template-columns:repeat(3, 1fr);
}

.benefit-card {
  padding:24px;
  border-radius:0;
}

.benefit-card p {
  margin:0;
  font-weight:500;
}

.benefit-card.tint-cyan   { background:var(--tint-cyan); }
.benefit-card.tint-green  { background:var(--tint-green); }
.benefit-card.tint-yellow { background:var(--tint-yellow); }
.benefit-card.tint-orange { background:var(--tint-orange); }

/* ---------- CTA ---------- */
.cta {
  padding:64px 0;
  background:var(--tint-yellow);
  text-align:center;
}

.cta h2 {
  max-width:40ch;
  margin-left:auto;
  margin-right:auto;
}

.text-link {
  color:var(--navy);
  font-weight:700;
}

.btn {
  display:inline-block;
  margin-top:12px;
  background:var(--orange);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  padding:14px 32px;
  border-radius:0;
  border:none;
  box-shadow:none;
  transition:background 0.15s ease;
}

.btn:hover {
  background:#d66f00;
  box-shadow:none;
}

.btn:focus-visible {
  outline:2px solid var(--navy);
  outline-offset:2px;
}

/* ---------- footer ---------- */
.site-footer {
  padding:32px 0 40px;
  background:var(--paper);
  text-align:center;
}

.logo-small {
  width:110px;
  margin:0 auto 12px;
}

.site-footer p {
  margin:0;
  font-size:0.85rem;
  color:#6b6b96;
}

/* ---------- responsive ---------- */
@media (max-width:800px) {
  .card-grid.two-col,
  .card-grid.three-col,
  .benefits-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width:600px) {
  .logo {
    width:110px;
  }

  .panel {
    padding:40px 0;
  }

  .step-list li {
    padding:16px 18px;
  }

  .cta {
    padding:44px 0;
  }

  .btn {
    width:100%;
    text-align:center;
  }
}

/* ---------- sticky bar (sitebar.js) ----------
   position:fixed on the bar itself; no ancestor is touched, so the pinned
   sticky screens are unaffected. Screen titles are padded to clear it. */
.site-bar {
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--bar-h);
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 24px;
  background:rgba(251,250,247,0.55); /* #FBFAF7, translucent: screen colours show through */
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  backdrop-filter:blur(16px) saturate(1.4);
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform 0.3s ease, visibility 0s linear 0.3s;
}

.site-bar.is-visible {
  transform:translateY(0);
  visibility:visible;
  transition:transform 0.3s ease, visibility 0s;
}

.site-bar-brand {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.site-bar-logo {
  height:26px;
  width:auto;
  flex:none;
}

.site-bar-title {
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:0.85rem;
  color:#2d2e83;
  white-space:nowrap;
}

.site-bar-cta {
  flex:none;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:0.85rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 14px;
  color:#2d2e83;
  background:transparent;
  border:1.5px solid #2d2e83;
  border-radius:0;
  text-decoration:none;
  transition:background-color 0.15s ease, color 0.15s ease;
}

.site-bar-cta:hover,
.site-bar-cta:focus-visible {
  background:#2d2e83;
  color:#fff;
}

@media (max-width:700px) {
  .site-bar { padding:0 16px; }
  .site-bar-title { display:none; }
}

@media (prefers-reduced-motion:reduce) {
  .site-bar,
  .site-bar.is-visible { transition:none; }
}

/* ---------- screen 4 ("Maak het van jou.", feature explorer) ----------
   A normal full-viewport section, not pinned. screen4.js adds .s4-js (only
   when motion is allowed) to hide the pieces until the section scrolls
   into view, then .is-built to play the arrival. Square corners and no
   shadows/glow on anything clickable; the one soft shadow is under the
   (non-interactive) report frame. */
.screen4 {
  position:relative;
  z-index:7;
  background:#def3f9; /* same blue as screen 2, so the push from screen 2 is seamless */
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  padding:calc(var(--bar-h) + 5vh) 0 3vh; /* ~5vh of air above the title, below the bar */
}

.s4-inner {
  width:100%;
  max-width:1700px;
  margin:0 auto;
  padding:0 3vw;
}

.s4-title {
  text-align:center;
  margin-bottom:3vh;
}

#s4Headline {
  font-family:'Montserrat', sans-serif;
  font-size:clamp(2rem, 4vw, 3.2rem);
  font-weight:700;
  color:var(--navy);
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 0.3em;
}

.s4-accent {
  display:inline-block;
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  color:#EF7D00;
  font-size:1.25em;
  transform:rotate(-2deg);
  transform-origin:left bottom;
}

.s4-mask {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}

.s4-subline-mask {
  display:block;
  overflow:visible;
}

.s4-word { display:inline-block; }

.s4-subline {
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.4rem;
  line-height:1.4;
  color:#2d2e83;
}

.s4-row {
  display:flex;
  align-items:center;
  gap:3vw;
}

.s4-left {
  flex:0 0 31%;
  max-width:31%;
  display:flex;
  align-items:flex-start;
  gap:14px;
}

.s4-right {
  flex:1 1 0;
  min-width:0;
}

.s4-arrows {
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:none;
}

.s4-arrow {
  width:40px;
  height:40px;
  padding:0;
  display:grid;
  place-items:center;
  color:#2d2e83;
  background:transparent;
  border:1.5px solid #2d2e83;
  border-radius:0;
  cursor:pointer;
  transition:background-color 0.15s ease, color 0.15s ease;
}

.s4-arrow svg { width:20px; height:20px; }

.s4-arrow:hover {
  background:#2d2e83;
  color:#fff;
}

.s4-arrow:focus-visible,
.s4-btn:focus-visible {
  outline:2px solid #2d2e83;
  outline-offset:3px;
}

.s4-list {
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.s4-item { position:relative; }

.s4-btn {
  display:block;
  width:100%;
  text-align:left;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.2rem;
  line-height:1.35;
  color:#2d2e83;
  background:transparent;
  border:1.5px solid #2d2e83;
  border-radius:0;
  padding:14px 16px;
  cursor:pointer;
  transition:background-color 0.3s ease;
}

.s4-btn[aria-expanded="true"] { background:#fff8de; }
.s4-btn[aria-expanded="true"] .s4-label { font-weight:800; }

.s4-head {
  display:flex;
  align-items:center;
  gap:12px;
}

/* "+" drawn with two bars; turns into a close-style cross when open */
.s4-plus {
  position:relative;
  flex:none;
  width:14px;
  height:14px;
  transition:transform 0.3s ease;
}

.s4-plus::before,
.s4-plus::after {
  content:'';
  position:absolute;
  left:0;
  top:6px;
  width:14px;
  height:2px;
  background:#2d2e83;
}

.s4-plus::after { transform:rotate(90deg); }
.s4-btn[aria-expanded="true"] .s4-plus { transform:rotate(45deg); }

.s4-body {
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.s4-btn[aria-expanded="true"] .s4-body { grid-template-rows:1fr; }

.s4-body-inner {
  display:block;
  min-height:0;
  overflow:hidden;
  font-weight:400;
  font-size:1.1rem;
  line-height:1.55;
  color:rgba(45, 46, 131, 0.92);
}

.s4-body-inner::before {
  content:'';
  display:block;
  height:0.6rem;
}

/* thin orange line under the open button; fills over the 5s auto-play */
.s4-progress {
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background:#EF7D00;
  transform:scaleX(0);
  transform-origin:left center;
  opacity:0;
  pointer-events:none;
}

.s4-progress.is-running {
  opacity:1;
  animation:s4Fill 5s linear forwards;
}

@keyframes s4Fill {
  from { transform:scaleX(0); }
  to { transform:scaleX(1); }
}

.s4-manual .s4-progress { display:none; }

/* viewer */
.s4-viewer {
  /* as large as fits below the title: the frame's outer height budget is the viewport minus the bar, the 5vh above the title, the title block (measured by screen4.js into --s4-title-h) and the gaps; the width follows from the 2872:1524 stage (+ the 2 x frame border) */
  width:min(100%, calc((100vh - var(--bar-h) - 11vh - var(--s4-title-h, 170px) - 2 * var(--frame-w)) * 2872 / 1524 + 2 * var(--frame-w)));
  margin:0 auto;
}

.s4-frame {
  position:relative;
  border:var(--frame-w) solid #00A6D1;
  border-radius:0;
  overflow:clip;
  background:#fff8de; /* shows around the portrait report page (features 4 and 5) */
  box-shadow:0 16px 30px -10px rgba(45, 46, 131, 0.2);
  transition:border-color 0.6s ease;
}

.s4-stage {
  position:relative;
  width:100%;
  aspect-ratio:2872 / 1524; /* the Canva screens' own ratio */
}

/* size/position are set by screen4.js: Canva screens fill the stage, the portrait report page is as tall as the stage and centred */
.s4-img {
  position:absolute;
  top:0;
  left:0;
  max-width:none;
  transform-origin:0 0;
  opacity:0;
  transition:transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

.s4-instant .s4-img { transition:none; }

.s4-mark {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.15s ease;
}

.s4-mark.is-on { opacity:1; }

#s4MarkLine {
  stroke-dasharray:var(--len, 0);
  stroke-dashoffset:var(--len, 0);
}

#s4MarkDot {
  transform-box:fill-box;
  transform-origin:center;
  transform:scale(0);
}

.s4-mark.is-on #s4MarkLine {
  stroke-dashoffset:0;
  transition:stroke-dashoffset 0.45s ease 0.1s;
}

.s4-mark.is-on #s4MarkDot {
  transform:scale(1);
  transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.s4-instant .s4-mark.is-on #s4MarkLine,
.s4-instant .s4-mark.is-on #s4MarkDot { transition:none; }

.s4-mcard { display:none; }

/* arrival (only while .s4-js is set, i.e. motion allowed) */
.s4-js .s4-word {
  transform:translateY(105%);
  transition:transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.s4-js .s4-subline { opacity:0; transition:transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, opacity 0.6s ease 0.15s; }
.s4-js.is-built .s4-word { transform:none; }
.s4-js.is-built .s4-subline { opacity:1; }
.s4-js .s4-accent-word { transition-delay:0.1s; }

.s4-js .s4-viewer {
  opacity:0;
  transform:translateY(48px);
  transition:opacity 0.8s ease 0.3s, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.s4-js.is-built .s4-viewer { opacity:1; transform:none; }

.s4-js .s4-arrows,
.s4-js .s4-item {
  opacity:0;
  transform:translateX(-28px);
  transition:opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.s4-js.is-built .s4-arrows,
.s4-js.is-built .s4-item { opacity:1; transform:none; }
.s4-js.is-built .s4-arrows { transition-delay:0.3s; }
.s4-js.is-built .s4-item:nth-child(1) { transition-delay:0.45s; }
.s4-js.is-built .s4-item:nth-child(2) { transition-delay:0.53s; }
.s4-js.is-built .s4-item:nth-child(3) { transition-delay:0.61s; }
.s4-js.is-built .s4-item:nth-child(4) { transition-delay:0.69s; }
.s4-js.is-built .s4-item:nth-child(5) { transition-delay:0.77s; }

/* mobile: list on top, viewer below, the open card's text under the viewer */
@media (max-width:900px) {
  .screen4 { padding-bottom:40px; }
  .s4-subline { font-size:1.15rem; }
  .s4-row { flex-direction:column; align-items:stretch; gap:24px; }
  .s4-left { flex:0 0 auto; max-width:100%; width:100%; }
  .s4-body { display:none; }
  .s4-viewer { width:100%; }
  .s4-mcard {
    display:block;
    margin-top:16px;
    padding:14px 16px;
    background:#fff8de;
    font-family:'Montserrat', sans-serif;
    font-size:1rem;
    line-height:1.55;
    color:rgba(45, 46, 131, 0.92);
  }
  .s4-mcard strong { display:block; font-weight:800; color:#2d2e83; margin-bottom:0.3rem; }
}

/* ---------- screen 4: printing scene ("Printen en opslaan") ----------
   A hand-drawn printer on the frame's #fff8de; the three report pages slide
   out of its slot and land in a messy stack in front of it. The svg is
   drawn in the stage's 1000 x 530.6 units; screen4.js adds .is-on (fade in)
   and then .s4-printing (wobble, pages, blinking light), and takes them
   off again when another feature opens. */
.s4-print {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}

.s4-print.is-on { opacity:1; }

.s4-wob {
  transform-box:fill-box;
  transform-origin:50% 100%;
}

.s4-printing .s4-wob { animation:s4Wobble 0.45s ease-in-out; }

@keyframes s4Wobble {
  0%, 100% { transform:rotate(0deg); }
  25% { transform:rotate(-1.8deg); }
  50% { transform:rotate(1.6deg); }
  75% { transform:rotate(-0.8deg); }
}

/* The printer is inline vector art: strokes keep a constant on-screen width
   (non-scaling-stroke) however the viewBox is scaled, and shapes are
   rendered geometrically exact. */
.s4-printer {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  shape-rendering:geometricPrecision;
}

.s4-printer * {
  vector-effect:non-scaling-stroke;
  shape-rendering:geometricPrecision;
}

/* The pages are real <img>s whose width/height/left/top are set in whole
   pixels by screen4.js (their final displayed size); they only ever move
   with translate + rotate, never scale. The clip starts at the printer's
   slot, so a page appears to come out of it. No will-change anywhere here:
   everything is re-rendered crisply at rest. */
.s4-pages-clip {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  overflow:clip;
  pointer-events:none;
}

.s4-pg {
  position:absolute;
  display:block;
  max-width:none;
  border:2px solid #2a2b5e;
  object-fit:cover;
  image-rendering:auto;
  backface-visibility:hidden; /* rendered as a flat, pixel-aligned layer */
  transform:translateY(var(--dy, 0px)) rotate(0deg); /* tucked above the slot, hidden by the clip */
}

.s4-print.is-on .s4-pg {
  transition:transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}

.s4-printing .s4-pg { transform:translateY(0) rotate(var(--r)); }

.s4-printing .s4-light { animation:s4Blink 0.4s steps(1, end) 4; }

@keyframes s4Blink {
  0% { opacity:1; }
  50% { opacity:0.2; }
}

/* reduced motion / re-measuring: no animation, the finished scene directly */
.s4-instant .s4-print,
.s4-instant .s4-pg,
.s4-instant .s4-wob,
.s4-instant .s4-light {
  transition:none !important;
  animation:none !important;
}

/* ---------- screen 5 ("Elk rapport een kunstwerk.", example gallery) ----------
   A normal full-viewport section after the steps screen, entered with the
   same plain push as the others. The row of covers drifts left forever
   (screen5.js clones the set and moves the track with a transform).
   Square corners; the soft shadow is static and nothing changes on hover
   except that the drift pauses. overflow-x:clip (never hidden) on the row. */
.screen5 {
  position:relative;
  z-index:8;
  background:#fdeede;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  padding:calc(var(--bar-h) + 5vh) 0 3vh;
}

.s5-inner { width:100%; }

.s5-title {
  text-align:center;
  margin-bottom:3vh;
  padding:0 3vw;
}

#s5Headline {
  font-family:'Montserrat', sans-serif;
  font-size:clamp(2rem, 4vw, 3.2rem);
  font-weight:700;
  color:var(--navy);
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 0.3em;
}

.s5-accent {
  display:inline-block;
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  color:#EF7D00;
  font-size:1.25em;
  transform:rotate(-2deg);
  transform-origin:left bottom;
}

.s5-mask {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}

.s5-subline-mask {
  display:block;
  overflow:visible;
}

.s5-word { display:inline-block; }

.s5-subline {
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.4rem;
  line-height:1.4;
  color:#2d2e83;
}

/* the row: full width, clips the drift sideways only */
.s5-row {
  overflow-x:clip;
  padding:2vh 0 1vh;
}

.s5-track {
  display:flex;
  width:max-content;
}

.s5-set { display:flex; }

.s5-item { padding:0 1.8vw; }

/* The track holds three identical sets and is moved by screen5.js (drift, drag, swipe, inertia; the position wraps by one set). Hovering does not pause it. */
.s5-row {
  cursor:grab;
  touch-action:pan-y; /* vertical swipes still scroll the page, horizontal ones move the row */
  user-select:none;
  -webkit-user-select:none;
}

.s5-row.is-dragging { cursor:grabbing; }
.s5-row.is-dragging .s5-card { cursor:grabbing; }

.s5-row img { -webkit-user-drag:none; user-drag:none; }

.s5-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.2vh;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:none;
  font:inherit;
  color:inherit;
  cursor:inherit;
}

.s5-card:focus-visible {
  outline:3px solid #2d2e83;
  outline-offset:8px;
}

.s5-frame {
  display:block;
  height:58vh;
  aspect-ratio:1240 / 1754; /* A4 */
  border:var(--frame-w) solid var(--frame, #00A6D1);
  border-radius:0;
  background:#fff;
  box-shadow:0 14px 26px -8px rgba(45, 46, 131, 0.22);
  transform:rotate(-1.5deg);
  transition:transform 0.3s ease;
}

.s5-item:nth-child(even) .s5-frame { transform:rotate(1.5deg); }

/* the card under the mouse (or with keyboard focus) grows a little and straightens; the shadow does not change */
@media (hover:hover) {
  .s5-card:hover .s5-frame,
  .s5-item:nth-child(even) .s5-card:hover .s5-frame { transform:rotate(0deg) scale(1.04); }
}
.s5-card:focus-visible .s5-frame,
.s5-item:nth-child(even) .s5-card:focus-visible .s5-frame { transform:rotate(0deg) scale(1.04); }

.s5-frame img {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  max-width:none;
}

.s5-label {
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  font-size:2rem;
  line-height:1.1;
  color:#2d2e83;
  transform:rotate(-2deg);
}

.s5-item:nth-child(even) .s5-label { transform:rotate(2deg); }

/* arrival (only while .s5-js is set, i.e. motion is allowed) */
.s5-js .s5-word {
  transform:translateY(105%);
  transition:transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.s5-js .s5-subline { opacity:0; transition:transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s, opacity 0.6s ease 0.15s; }
.s5-js.is-built .s5-word { transform:none; }
.s5-js.is-built .s5-subline { opacity:1; }

.s5-js .s5-row {
  opacity:0;
  transform:translateX(80px);
  transition:opacity 0.9s ease 0.3s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.s5-js.is-built .s5-row { opacity:1; transform:none; }

/* lightbox */
.s5-lightbox {
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vh 5vw;
  background:rgba(45, 46, 131, 0.85);
  opacity:0;
  transition:opacity 0.25s ease;
}

.s5-lightbox[hidden] { display:none; }
.s5-lightbox.is-open { opacity:1; }

.s5-lb-frame {
  border:var(--frame-w) solid var(--frame, #00A6D1);
  border-radius:0;
  background:#fff;
}

.s5-lb-frame img {
  display:block;
  height:calc(90vh - 2 * var(--frame-w));
  width:auto;
  max-width:calc(90vw - 2 * var(--frame-w));
  object-fit:contain;
}

.s5-lb-close {
  position:absolute;
  top:16px;
  right:16px;
  width:44px;
  height:44px;
  padding:0;
  display:grid;
  place-items:center;
  color:#fff;
  background:transparent;
  border:1.5px solid #fff;
  border-radius:0;
  cursor:pointer;
  transition:background-color 0.15s ease, color 0.15s ease;
}

.s5-lb-close svg { width:20px; height:20px; }
.s5-lb-close:hover { background:#fff; color:#2d2e83; }
.s5-lb-close:focus-visible { outline:2px solid #fff; outline-offset:3px; }

/* previous / next */
.s5-lb-nav {
  position:absolute;
  top:50%;
  width:44px;
  height:44px;
  margin-top:-22px;
  padding:0;
  display:grid;
  place-items:center;
  color:#fff;
  background:transparent;
  border:1.5px solid #fff;
  border-radius:0;
  cursor:pointer;
  transition:background-color 0.15s ease, color 0.15s ease;
}
.s5-lb-nav svg { width:20px; height:20px; }
.s5-lb-nav:hover { background:#fff; color:#2d2e83; }
.s5-lb-nav:focus-visible { outline:2px solid #fff; outline-offset:3px; }
/* the arrows sit right beside the enlarged cover, 24px from its frame edges, vertically centred */
.s5-lb-stage { position:relative; }
.s5-lb-prev { right:calc(100% + 24px); }
.s5-lb-next { left:calc(100% + 24px); }

/* narrow screens: no room beside the cover, so the arrows overlap its edges */
@media (max-width:700px) {
  .s5-lb-prev { right:auto; left:8px; }
  .s5-lb-next { left:auto; right:8px; }
  .s5-lb-nav { background:rgba(45, 46, 131, 0.75); }
  .s5-lb-nav:hover { background:#fff; }
}

@media (max-width:900px) {
  .s5-frame { height:45vh; }
  .s5-subline { font-size:1.15rem; }
  .s5-label { font-size:1.7rem; }
}

/* reduced motion: no drift, no clones - a plain horizontally scrollable row */
@media (prefers-reduced-motion:reduce) {
  .s5-row { overflow-x:auto; cursor:auto; touch-action:auto; }
  .s5-lightbox { transition:none; }
}

/* ---------- screen 6 ("Dit zit er in je etui.", what you need) ----------
   A normal full-viewport section after the gallery, entered with the same
   plain push (same #fdeede, so the push is seamless). Without JS or under
   reduced motion the FINAL state is what the CSS describes (zipper open,
   icons in their cards, ticks drawn). screen6.js adds .s6-js to set up the
   start state and .s6-play to run the arrival. Only transform/opacity (and
   the small stroke draw-in of the ticks) are animated; nothing scales. */
.screen6 {
  position:relative;
  z-index:9;
  background:#fdeede;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  padding:calc(var(--bar-h) + 5vh) 0 4vh;
}

.s6-inner {
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 3vw;
}

.s6-title {
  text-align:center;
  margin-bottom:2vh;
}

#s6Headline {
  font-family:'Montserrat', sans-serif;
  font-size:clamp(2rem, 4vw, 3.2rem);
  font-weight:700;
  color:var(--navy);
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 0.3em;
}

.s6-accent {
  display:inline-block;
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  color:#EF7D00;
  font-size:1.25em;
  transform:rotate(-2deg);
  transform-origin:left bottom;
}

.s6-mask {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}

.s6-subline-mask {
  display:block;
  overflow:visible;
}

.s6-word { display:inline-block; }

.s6-subline {
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.4rem;
  line-height:1.4;
  color:#2d2e83;
}

/* the pencil case: inline vector art, constant 3px strokes, nothing scaled */
.s6-etui-wrap {
  width:clamp(240px, 30vw, 560px);
  margin:0 auto 3vh;
}

.s6-etui {
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  shape-rendering:geometricPrecision;
}

.s6-etui * {
  vector-effect:non-scaling-stroke;
  shape-rendering:geometricPrecision;
}

.s6-pull { transform:translateX(520px); }   /* final: pulled all the way open */
.s6-lid { transform:translateY(-7px); }     /* final: lid lifted a little */

/* the two cards */
.s6-cards {
  display:flex;
  gap:3vw;
  justify-content:center;
  align-items:stretch;
}

.s6-card {
  flex:1 1 0;
  max-width:640px;
  padding:clamp(20px, 2.2vw, 34px);
  background:#fff8de;
  border:2px solid #2d2e83;
  border-radius:0;
  box-shadow:none;
}

.s6-card-head {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:0.9rem;
}

.s6-slot {
  display:block;
  flex:none;
  width:64px;
  height:64px;
}

.s6-icon {
  display:block;
  width:64px;
  height:64px;
  overflow:visible;
}

.s6-icon * { vector-effect:non-scaling-stroke; }
/* if the icons are ever swapped for image files (e.g. assets/67.svg, assets/152.svg), they keep their own colour and proportions */
.s6-icon { object-fit:contain; }

.s6-card-title {
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:1.5rem;
  line-height:1.2;
  color:#2d2e83;
  margin:0;
}

.s6-card-text {
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  font-size:1.1rem;
  line-height:1.55;
  color:rgba(45, 46, 131, 0.85);
  margin:0 0 0.8rem;
}

.s6-checks {
  list-style:none;
  margin:0 0 0.9rem;
  padding:0;
  display:grid;
  gap:0.55rem;
}

.s6-checks li {
  display:flex;
  align-items:flex-start;
  gap:0.7rem;
  margin:0;
  font-family:'Montserrat', sans-serif;
  font-size:1.1rem;
  line-height:1.4;
  color:rgba(45, 46, 131, 0.85);
}

.s6-box {
  flex:none;
  width:26px;
  height:26px;
  margin-top:1px;
  overflow:visible;
}

.s6-tick {
  stroke-dasharray:1;
  stroke-dashoffset:0; /* final: drawn */
}

.s6-card-note {
  font-family:'Montserrat', sans-serif;
  font-size:1rem;
  line-height:1.5;
  color:rgba(45, 46, 131, 0.85);
  margin:0;
}

/* measuring the icons' start offsets must see everything at rest */
.s6-measuring .s6-etui-wrap,
.s6-measuring .s6-card { transform:none !important; transition:none !important; }

/* ---- arrival: start state (only while .s6-js is set) ---- */
.s6-js .s6-word { transform:translateY(105%); }
.s6-js .s6-subline { opacity:0; }
.s6-js .s6-etui-wrap { opacity:0; transform:translateY(60px); }
.s6-js .s6-pull { transform:translateX(0); }
.s6-js .s6-lid { transform:translateY(0); }
.s6-js .s6-icon { opacity:0; }
.s6-js .s6-card { opacity:0; transform:translateY(44px); }
.s6-js .s6-tick { stroke-dashoffset:1; }

/* ---- arrival: playing (title 0s, etui .35s, zipper 1.25s, lid 1.95s,
   icons fly from 2.1s, cards rise from 2.3s, ticks from 3.4s) ---- */
.s6-js.s6-play .s6-word {
  transform:none;
  transition:transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.s6-js.s6-play .s6-subline {
  opacity:1;
  transition:opacity 0.6s ease 0.15s;
}
.s6-js.s6-play .s6-etui-wrap {
  opacity:1;
  transform:none;
  transition:opacity 0.6s ease 0.35s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.35s;
}
.s6-js.s6-play .s6-pull {
  transform:translateX(520px);
  transition:transform 0.7s ease-in-out 1.25s;
}
.s6-js.s6-play .s6-lid {
  transform:translateY(-7px);
  transition:transform 0.35s ease-out 1.95s;
}
.s6-js.s6-play .s6-card {
  opacity:1;
  transform:none;
  transition:opacity 0.7s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.s6-js.s6-play #s6Card1 { transition-delay:2.3s; }
.s6-js.s6-play #s6Card2 { transition-delay:2.45s; }

/* the pencil and the box glide out of the etui into their cards: played by
   screen6.js (Web Animations, a gentle arc, ~900ms, no bounce) */

.s6-js.s6-play .s6-tick {
  stroke-dashoffset:0;
  transition:stroke-dashoffset 0.3s ease calc(3.4s + var(--i, 0) * 0.25s);
}

@media (max-width:900px) {
  .s6-etui-wrap { width:min(78vw, 420px); }
  .s6-cards { flex-direction:column; align-items:stretch; gap:16px; }
  .s6-card { max-width:none; }
  .s6-subline { font-size:1.15rem; }
}

/* ---------- screen 7 ("Hink, stap, sprong!", prices) ----------
   A normal full-viewport section after the etui, entered with the same plain
   push (own #def3f9). The three cards share one bottom line and step up like
   a jump: Hink lowest, Stap ~4vh higher, Sprong ~8vh higher. Without JS or
   under reduced motion the FINAL state is what the CSS describes (cards in
   place, "Meest gekozen" shown); screen7.js adds .s7-js for the start state
   and .s7-play (+ .s7-tagged) for the arrival. Square corners; no shadow or
   glow on anything interactive. */
.screen7 {
  position:relative;
  z-index:10;
  background:#def3f9;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  padding:calc(var(--bar-h) + 5vh) 0 4vh;
}

.s7-inner {
  width:100%;
  max-width:1400px;
  margin:0 auto;
  padding:0 3vw;
}

.s7-title {
  text-align:center;
  margin-bottom:2vh;
}

#s7Headline {
  font-family:'Montserrat', sans-serif;
  font-size:clamp(2rem, 4vw, 3.2rem);
  font-weight:700;
  color:var(--navy);
  letter-spacing:-0.02em;
  line-height:1.15;
  margin:0 0 0.3em;
}

.s7-accent {
  display:inline-block;
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  color:#EF7D00;
  font-size:1.25em;
  transform:rotate(-2deg);
  transform-origin:left bottom;
}

.s7-mask {
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
}

.s7-subline-mask {
  display:block;
  overflow:visible;
}

.s7-word { display:inline-block; }

.s7-subline {
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.4rem;
  line-height:1.4;
  color:#2d2e83;
}

/* room above the cards for the pebble sitting on / hopping over Sprong */
.s7-stage {
  position:relative;
  padding-top:7vh;
}

.s7-cards {
  display:flex;
  align-items:stretch;      /* shared bottom line; the margins below make the steps */
  justify-content:center;
  gap:2vw;
}

.s7-card {
  flex:1 1 0;
  max-width:440px;
  display:flex;
  flex-direction:column;
  padding:clamp(18px, 2vw, 30px);
  border:2px solid #2d2e83;
  border-radius:0;
  box-shadow:none;
  background:#fff8de;
  color:#2d2e83;
}

.s7-hink { margin-top:8vh; }
.s7-stap { margin-top:4vh; }
.s7-sprong {
  margin-top:0;
  background:#2d2e83;
  color:#fff;
}

.s7-head {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0.6rem 0.9rem;
  margin-bottom:0.7rem;
}

.s7-name {
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  font-size:2.2rem;
  line-height:1.05;
  margin:0;
  color:#2d2e83;
}

.s7-sprong .s7-name { color:#fff; }

/* "Meest gekozen" */
.s7-tag {
  font-family:'Caveat Brush', cursive;
  font-size:1.2rem;
  line-height:1;
  padding:0.28rem 0.6rem 0.2rem;
  background:#FFCC00;
  color:#2d2e83;
  border-radius:0;
  transform:rotate(-3deg);
}

.s7-feats {
  list-style:none;
  margin:0 0 1.1rem;
  padding:0;
  display:grid;
  gap:0.55rem;
}

.s7-feats li {
  display:flex;
  align-items:flex-start;
  gap:0.6rem;
  margin:0;
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  font-size:1.1rem;
  line-height:1.4;
}

.s7-sprong .s7-feats li { color:#fff; }
.s7-feats strong { font-weight:700; }

.s7-check {
  flex:none;
  width:22px;
  height:22px;
  margin-top:2px;
  overflow:visible;
}

.s7-price {
  margin-top:auto;       /* price + button sit at the bottom of every card */
  padding-top:0.6rem;
  margin-bottom:1rem;
  font-family:'Montserrat', sans-serif;
}

.s7-price-main {
  font-weight:700;
  font-size:2.4rem;
  line-height:1.1;
}

.s7-price-text { font-size:2rem; } /* "Eerste keer gratis": a phrase, a bit smaller than a number */

.s7-price-small {
  font-weight:400;
  font-size:0.9rem;
  line-height:1.4;
  opacity:0.85;
}

.s7-price-old {
  font-weight:400;
  font-size:1.1rem;
  line-height:1.2;
  text-decoration:line-through;
  opacity:0.8;
}

.s7-offer {
  display:inline-block;
  margin-top:0.7rem;
  padding:0.4rem 0.7rem;
  background:#EF7D00;
  color:#fff;
  font-weight:600;
  font-size:0.95rem;
  line-height:1.25;
  border-radius:0;
}

.s7-btn {
  display:block;
  text-align:center;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.05rem;
  line-height:1.2;
  padding:0.9rem 1rem;
  background:#2d2e83;
  color:#fff;
  text-decoration:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  transition:background-color 0.15s ease, color 0.15s ease;
}

.s7-sprong .s7-btn {
  background:#FFCC00;
  color:#2d2e83;
}

.s7-btn:hover,
.s7-btn:focus-visible,
.s7-sprong .s7-btn:hover,
.s7-sprong .s7-btn:focus-visible {
  background:#EF7D00;
  color:#fff;
}

.s7-btn:focus-visible { outline:2px solid #2d2e83; outline-offset:3px; }
.s7-sprong .s7-btn:focus-visible { outline-color:#fff; }

/* the pebble: placed by screen7.js (translate only); hidden until it is */
.s7-pebble {
  position:absolute;
  left:0;
  top:0;
  width:64px;
  height:48px;
  overflow:visible;
  pointer-events:none;
  opacity:0;
  z-index:2;
}

.s7-pebble * { vector-effect:non-scaling-stroke; shape-rendering:geometricPrecision; }

/* ---- arrival: start state (only while .s7-js is set) ---- */
.s7-js .s7-word { transform:translateY(105%); }
.s7-js .s7-subline { opacity:0; }
.s7-js .s7-card { opacity:0; transform:translateY(60px); }
.s7-js .s7-tag { opacity:0; transform:translateY(-10px) rotate(-3deg); }

/* ---- arrival: playing ---- */
.s7-js.s7-play .s7-word {
  transform:none;
  transition:transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.s7-js.s7-play .s7-subline {
  opacity:1;
  transition:opacity 0.6s ease 0.15s;
}
.s7-js.s7-play .s7-card {
  opacity:1;
  transform:none;
  transition:opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.s7-js.s7-play #s7Hink { transition-delay:0.5s; }
.s7-js.s7-play #s7Stap { transition-delay:0.65s; }
.s7-js.s7-play #s7Sprong { transition-delay:0.8s; }

/* the label pops in when the pebble lands on Sprong (translate + fade, slight overshoot) */
.s7-js.s7-tagged .s7-tag {
  opacity:1;
  transform:rotate(-3deg);
  transition:opacity 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* mobile: stacked, Sprong first, no height steps, no pebble */
@media (max-width:900px) {
  .s7-stage { padding-top:0; }
  .s7-cards { flex-direction:column; align-items:stretch; gap:16px; }
  .s7-card { max-width:none; }
  .s7-hink, .s7-stap, .s7-sprong { margin-top:0; }
  .s7-sprong { order:-1; }
  .s7-stap { order:0; }
  .s7-hink { order:1; }
  .s7-pebble { display:none; }
  .s7-subline { font-size:1.15rem; }
}

/* ---------- screen 8 (finale + contact) ----------
   A normal full-height section after the prices, entered with the same plain
   push. Solid yellow. The envelope is inline vector art (constant 3px strokes,
   no scale animations, so it stays sharp). Without JS or under reduced motion
   the FINAL state is what the CSS describes (flap open, letter peeking out, no
   float); screen8.js adds .f8-js (start state) and .f8-play (the arrival). */
.screen8 {
  position:relative;
  z-index:11;
  background:#fff8de;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-top:var(--bar-h);
  overflow-x:clip;
}

.f8-main {
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:3vh 4vw;
}

.f8-env-wrap {
  width:clamp(110px, 14vw, 260px);
  margin-bottom:1vh;
}

.f8-float { width:100%; }

.f8-env {
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  shape-rendering:geometricPrecision;
  transform-origin:50% 90%;
}

.f8-env * {
  vector-effect:non-scaling-stroke;
  shape-rendering:geometricPrecision;
}

/* final state: the flap has swung open (the closed copy is gone), the letter peeks out */
.f8-flap-closed {
  transform-origin:200px 100px;
  transform:rotate(180deg);
  opacity:0;
}
.f8-flap-open {
  transform-origin:200px 100px;
  transform:rotate(180deg);
  opacity:1;
}
.f8-letter { transform:translateY(-95px); }

.f8-title {
  margin:0 0 3rem; /* room for the descenders (the "j" in "bij") before the next line */
  font-weight:400;
  line-height:1;
}

.f8-title-text {
  display:inline-block;
  font-family:'Caveat Brush', cursive;
  font-weight:400;
  font-size:clamp(4rem, 9vw, 9rem);
  line-height:1.05;
  color:#2d2e83;
  transform:rotate(-2deg);
  text-wrap:balance;
}

.f8-contact > * { margin:0; }

.f8-ask {
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.5rem;
  line-height:1.35;
  color:#2d2e83;
  max-width:34ch;
  margin:0 auto 1.4rem !important;
}

.f8-btn {
  display:inline-block;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.1rem;
  line-height:1.2;
  padding:0.95rem 2.2rem;
  background:#2d2e83;
  color:#fff;
  text-decoration:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  transition:background-color 0.15s ease, color 0.15s ease;
}

.f8-btn:hover,
.f8-btn:focus-visible {
  background:#EF7D00;
  color:#fff;
}
.f8-btn:focus-visible { outline:2px solid #2d2e83; outline-offset:3px; }
.f8-btn { cursor:pointer; }

/* ---- "Mail ons" form dialog ---- */
.f8-modal {
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:5vh 5vw;
  background:rgba(45, 46, 131, 0.85);
  opacity:0;
  transition:opacity 0.2s ease;
}
.f8-modal[hidden] { display:none; }
.f8-modal.is-open { opacity:1; }

.f8-modal-card {
  position:relative;
  width:100%;
  max-width:440px;
  max-height:90vh;
  overflow-y:auto;
  background:#fffdf5;
  border:var(--frame-w) solid #00A6D1;
  padding:2.2rem 2rem;
}

.f8-modal-close {
  position:absolute;
  top:12px;
  right:12px;
  width:36px;
  height:36px;
  padding:0;
  display:grid;
  place-items:center;
  color:#2d2e83;
  background:transparent;
  border:1.5px solid #2d2e83;
  border-radius:0;
  cursor:pointer;
  transition:background-color 0.15s ease, color 0.15s ease;
}
.f8-modal-close svg { width:16px; height:16px; }
.f8-modal-close:hover { background:#2d2e83; color:#fff; }
.f8-modal-close:focus-visible { outline:2px solid #EF7D00; outline-offset:2px; }

.f8-modal-title {
  margin:0 0 0.5rem;
  font-family:'Montserrat', sans-serif;
  font-weight:700;
  font-size:1.4rem;
  color:#2d2e83;
}

.f8-modal-intro {
  margin:0 0 1.4rem;
  font-family:'Montserrat', sans-serif;
  font-size:0.95rem;
  color:#2d2e83;
}

.f8-form { display:flex; flex-direction:column; gap:1rem; }

.f8-field {
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:0.9rem;
  color:#2d2e83;
}

.f8-field input {
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  font-size:1rem;
  color:#2d2e83;
  background:#fff;
  border:1.5px solid #2d2e83;
  border-radius:0;
  padding:0.6rem 0.7rem;
}

.f8-field input:focus-visible {
  outline:2px solid #EF7D00;
  outline-offset:1px;
}

.f8-form-submit {
  margin-top:0.4rem;
  display:inline-block;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:1.05rem;
  padding:0.85rem 1.5rem;
  background:#2d2e83;
  color:#fff;
  border:0;
  border-radius:0;
  cursor:pointer;
  transition:background-color 0.15s ease, color 0.15s ease;
}
.f8-form-submit:hover,
.f8-form-submit:focus-visible {
  background:#EF7D00;
  color:#fff;
}
.f8-form-submit:focus-visible { outline:2px solid #2d2e83; outline-offset:3px; }

@media (prefers-reduced-motion:reduce) {
  .f8-modal { transition:none; }
}

.f8-mail {
  margin-top:0.9rem !important;
  font-family:'Montserrat', sans-serif;
  font-weight:400;
  font-size:1.05rem;
  color:#2d2e83;
  user-select:text;
  -webkit-user-select:text;
}

.f8-bottom {
  text-align:center;
  padding:0 3vw;
}

.f8-footer {
  padding:0 0 1.2rem;
  font-family:'Montserrat', sans-serif;
  font-size:0.8rem;
  color:rgba(45, 46, 131, 0.85);
}

/* ---- arrival: start state (only while .f8-js is set) ---- */
.f8-js .f8-env-wrap { opacity:0; }
.f8-js .f8-flap-closed { transform:rotate(0deg); opacity:1; }
.f8-js .f8-flap-open { transform:rotate(0deg); opacity:0; }
.f8-js .f8-letter { transform:translateY(0); }
.f8-js .f8-title,
.f8-js .f8-contact > * { opacity:0; transform:translateY(34px); }

/* ---- arrival: playing. Everything uses cubic-bezier(0.22, 1, 0.36, 1) and only
   translate / rotate / opacity - nothing scales, so the envelope stays sharp.
   0s     the envelope glides down ~40px while fading in (900ms, no bounce)
   0.9s   the flap swings open (700ms)
   1.25s  the letter slides out (800ms), when the flap is about half way through
          its time; the flap is swapped for its identical back copy at this
          moment, so the letter rises in front of it
   2.0s+  the headline and the contact text slide up ---- */
.f8-js.f8-play .f8-env-wrap { opacity:1; animation:s8Glide 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes s8Glide {
  from { transform:translateY(-40px); opacity:0; }
  to { transform:translateY(0); opacity:1; }
}

.f8-js.f8-play .f8-flap-closed {
  transform:rotate(180deg);
  opacity:0;
  transition:transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.9s, opacity 0.01s linear 1.25s;
}
.f8-js.f8-play .f8-flap-open {
  transform:rotate(180deg);
  opacity:1;
  transition:transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.9s, opacity 0.01s linear 1.25s;
}
.f8-js.f8-play .f8-letter {
  transform:translateY(-95px);
  transition:transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.25s;
}

.f8-js.f8-play .f8-title,
.f8-js.f8-play .f8-contact > * {
  opacity:1;
  transform:none;
  transition:opacity 0.6s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.f8-js.f8-play .f8-title { transition-delay:2s; }
.f8-js.f8-play .f8-ask { transition-delay:2.15s; }
.f8-js.f8-play .f8-btn { transition-delay:2.3s; }
.f8-js.f8-play .f8-mail { transition-delay:2.4s; }

/* idle: the envelope floats very gently (±3px over a 5s loop, sine-like ease) once it has opened */
.f8-js.f8-play .f8-float { animation:s8Float 5s ease-in-out 2.1s infinite; }

@keyframes s8Float {
  0%, 100% { transform:translateY(0); }
  50% { transform:translateY(-3px); }
}

/* a soft, happy wiggle while hovering the button (screen8.js adds .f8-wiggle) */
.f8-env.f8-wiggle { animation:s8Wiggle 0.7s ease-in-out; }

@keyframes s8Wiggle {
  0% { transform:rotate(0deg); }
  30% { transform:rotate(-3deg); }
  70% { transform:rotate(3deg); }
  100% { transform:rotate(0deg); }
}
@media (max-width:900px) {
  .f8-env-wrap { width:30vw; }
  .f8-ask { font-size:1.25rem; }
}

@media (prefers-reduced-motion:reduce) {
  .f8-float, .f8-env { animation:none !important; }
}

/* the sticky bar slides up and away while screen 8 is mostly in view
   (screen8.js sets .is-away), and back down when it is not */
.site-bar.is-visible.is-away {
  transform:translateY(-100%);
  visibility:hidden;
  transition:transform 0.3s ease, visibility 0s linear 0.3s;
}

/* ---------- sticky bar: navigation ---------- */
.site-bar-logo-link { display:flex; align-items:center; flex:none; }

.site-nav {
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.7rem;
}

.site-nav a,
.site-menu-panel a {
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:0.85rem;
  line-height:1.2;
  color:#2d2e83;
  text-decoration:none;
  white-space:nowrap;
  padding:0.3rem 0;
  border-bottom:2px solid transparent; /* the thin orange underline marks the screen in view */
}

.site-nav a:hover,
.site-menu-panel a:hover { border-bottom-color:rgba(239, 125, 0, 0.45); }

.site-nav a.is-active,
.site-menu-panel a.is-active { border-bottom-color:#EF7D00; }

.site-nav a:focus-visible,
.site-menu-panel a:focus-visible,
.site-bar-logo-link:focus-visible,
.site-menu-btn:focus-visible { outline:2px solid #2d2e83; outline-offset:3px; }

.site-bar-right { display:flex; align-items:center; gap:0.7rem; flex:none; }

/* "Menu" (small screens only) */
.site-menu-btn {
  display:none;
  align-items:center;
  height:32px;
  padding:0 14px;
  font-family:'Montserrat', sans-serif;
  font-weight:600;
  font-size:0.85rem;
  color:#2d2e83;
  background:transparent;
  border:1.5px solid #2d2e83;
  border-radius:0;
  box-shadow:none;
  cursor:pointer;
  transition:background-color 0.15s ease, color 0.15s ease;
}

.site-menu-btn:hover,
.site-menu-btn[aria-expanded="true"] { background:#2d2e83; color:#fff; }

.site-menu-panel {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 16px 14px;
  background:#fff8de;
  border-radius:0;
}

.site-menu-panel[hidden] { display:none; }
.site-menu-panel a { font-size:1rem; padding:0.55rem 0; align-self:flex-start; }

/* not enough room for the title next to the links */
@media (max-width:1200px) {
  .site-bar-title { display:none; }
}

/* small screens: the links live behind the Menu button; the contact button stays */
@media (max-width:900px) {
  .site-nav { display:none; }
  .site-menu-btn { display:inline-flex; }
  .site-bar { gap:10px; }
  .site-bar-right { margin-left:auto; }
}

/* ---------- laptop heights (short desktop screens) ----------
   Nothing here applies on tall screens (the viewport must be 880px high or
   less, and wider than 900px, i.e. not the phone/tablet layouts). Spacing and
   headline sizes shrink first, then images; body text never goes below 1rem.
   Every size follows the available height (vh) as well as the width. */
@media (max-height:880px) and (min-width:901px) {

  /* screen 2: the report pages a little smaller, so they sit fully on screen */
  .collage-page-wrap { width:calc(66vh * 1406 / 1988 - 28px + 2 * var(--frame-w)); }

  /* screens 4-7: less air above the title and between the blocks */
  .screen4, .screen5, .screen6, .screen7 { padding-top:calc(var(--bar-h) + 2.6vh); }
  #s4Headline, #s5Headline, #s6Headline, #s7Headline { font-size:clamp(1.9rem, min(4vw, 6.2vh), 3.2rem); margin-bottom:0.2em; }
  .s4-subline, .s5-subline, .s6-subline, .s7-subline { font-size:clamp(1.1rem, 2.7vh, 1.4rem); }
  .s4-title, .s5-title, .s6-title, .s7-title { margin-bottom:1.6vh; }

  /* screen 3 (the pinned steps): content starts below the bar; the columns get
     exactly the height that is left (--s3-avail, measured by screen3.js) */
  .screen3-title { padding-top:calc(var(--bar-h) + 14px); margin-bottom:1.2vh; }
  #s3Headline { font-size:clamp(1.9rem, min(4vw, 6.2vh), 3.2rem); margin-bottom:0.15em; }
  #s3Subline { font-size:clamp(1.1rem, 2.7vh, 1.6rem); }
  .screen3-text-col { height:var(--s3-avail, 76vh); }
  .s3-frame-stage { width:min(100%, calc((var(--s3-avail, 76vh) - 2 * var(--frame-w)) * 2872 / 1524)); }
  .s3-step-number { font-size:clamp(3.5rem, min(9vw, 11vh), 10rem); }
  .s3-step-title { font-size:clamp(1.6rem, 3.6vh, 2.6rem); }

  /* screen 5 */
  .screen5 { padding-bottom:1vh; }
  .s5-row { padding:1vh 0 0; }

  /* screen 6 */
  .screen6 { padding-bottom:1.5vh; }
  .s6-etui-wrap { width:clamp(220px, min(30vw, 42vh), 560px); margin-bottom:2.2vh; }
  .s6-card { padding:clamp(16px, 3vh, 30px) clamp(18px, 2vw, 30px); }
  .s6-card-head { margin-bottom:0.5rem; }
  .s6-slot, .s6-icon { width:clamp(44px, 7vh, 64px); height:clamp(44px, 7vh, 64px); }
  .s6-card-title { font-size:clamp(1.2rem, 2.8vh, 1.5rem); }
  .s6-card-text, .s6-checks li { font-size:clamp(1rem, 2.2vh, 1.1rem); line-height:1.4; }
  .s6-card-text { margin-bottom:0.5rem; }
  .s6-checks { gap:0.3rem; margin-bottom:0.6rem; }
  .s6-card-note { font-size:1rem; line-height:1.4; }

  /* screen 7 (prices): all three cards, with prices and buttons, in view */
  .screen7 { padding-bottom:1.5vh; }
  .s7-stage { padding-top:6.2vh; }
  .s7-hink { margin-top:6.5vh; }
  .s7-stap { margin-top:3.2vh; }
  .s7-card { padding:clamp(16px, 2.8vh, 26px) clamp(18px, 1.8vw, 28px); }
  .s7-head { margin-bottom:0.3rem; }
  .s7-name { font-size:clamp(1.7rem, 3.8vh, 2.2rem); }
  .s7-tag { font-size:clamp(1rem, 2.2vh, 1.2rem); }
  .s7-feats { gap:0.42rem; margin-bottom:0.7rem; }
  .s7-feats li { font-size:clamp(1rem, 2.2vh, 1.1rem); line-height:1.35; }
  .s7-check { width:20px; height:20px; margin-top:1px; }
  .s7-price { padding-top:0.2rem; margin-bottom:0.6rem; }
  .s7-price-main { font-size:clamp(2rem, 5vh, 2.4rem); line-height:1.08; }
  .s7-price-text { font-size:clamp(1.6rem, 4.2vh, 2rem); }
  .s7-price-old { font-size:1rem; }
  .s7-price-small { font-size:0.9rem; line-height:1.3; }
  .s7-offer { margin-top:0.35rem; padding:0.3rem 0.6rem; font-size:0.9rem; }
  .s7-btn { padding:clamp(0.6rem, 1.8vh, 0.9rem) 1rem; }
}

/* ---------- intro: wall / floor bands behind the drawing ---------- */
.classroom-bands { position:absolute; inset:0; z-index:0; pointer-events:none; }
.classroom-band { position:absolute; left:0; right:0; background:#fff; }
#classroomBandTop { top:0; height:0; }
#classroomBandBottom { bottom:0; height:0; }
#mkg-classroom { z-index:1; }

/* ---------- prices: swipe dots (phones only) ---------- */
.s7-nav { display:none; }

/* ---------- phones and small tablets (up to 900px) ---------- */
@media (max-width:900px) {

  /* screen 2: frames scale with the pages, balanced subline, the star out of the way */
  .collage-front-wrap, .collage-back-wrap { padding:var(--frame-w); }
  .s2-subline-line1 { display:block; text-wrap:balance; }
  .s2-subline-line2 { text-wrap:balance; }
  .screen2-collage { margin-bottom:56px; }
  #s2Deco1 { width:min(44px, 11vw) !important; bottom:1.5% !important; left:2% !important; }

  /* the explorer: viewer first, the four features as a row of tabs, the open card last */
  .screen4 { padding-top:calc(var(--bar-h) + 14px); padding-bottom:28px; }
  .s4-inner { padding:0 16px; }
  .s4-title { margin-bottom:12px; }
  #s4Headline { font-size:clamp(1.8rem, 8vw, 2.6rem); }
  .s4-subline { font-size:1.05rem; }
  .s4-row { display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .s4-right { display:contents; }
  .s4-viewer { order:1; width:100%; }
  .s4-left { order:2; display:block; flex:none; width:100%; max-width:100%; }
  .s4-mcard { order:3; display:block; margin-top:0; }
  .s4-arrows { display:none; }
  .s4-frame { transition:none; }
  .s4-list { flex-direction:row; gap:8px; overflow-x:auto; scroll-snap-type:x proximity; padding:0 0 9px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .s4-list::-webkit-scrollbar { display:none; }
  .s4-item { flex:0 0 auto; scroll-snap-align:center; }
  .s4-btn { width:auto; padding:10px 14px; font-size:0.95rem; line-height:1.2; white-space:nowrap; transition:none; }
  .s4-head { gap:0; }
  .s4-plus, .s4-body { display:none; }
  .s4-btn[data-color="#00A6D1"] { --tab:#00A6D1; }
  .s4-btn[data-color="#AFCA0B"] { --tab:#AFCA0B; }
  .s4-btn[data-color="#EF7D00"] { --tab:#EF7D00; }
  .s4-btn[data-color="#2d2e83"] { --tab:#2d2e83; }
  .s4-btn[data-color="#FFCC00"] { --tab:#FFCC00; }
  .s4-btn[aria-expanded="true"] { background:var(--tab, #fff8de); border-color:var(--tab, #2d2e83); color:#fff; }
  .s4-btn[aria-expanded="true"][data-color="#AFCA0B"],
  .s4-btn[aria-expanded="true"][data-color="#FFCC00"] { color:#2d2e83; }
  .s4-btn[aria-expanded="true"] .s4-label { font-weight:700; }

  /* the steps (static): no big gap after "Klaar!", navy "Klaar!", the usual soft shadow */
  .screen3-mobile { padding-bottom:16px; }
  .s3m-finale { margin-bottom:0; }
  .s3m-number.s3m-finale-word { color:#2d2e83; }
  .s3m-report { filter:drop-shadow(0 12px 24px rgba(45,46,131,0.12)); }
  .screen5 { padding-top:calc(var(--bar-h) + 14px); }

  /* prices: a swipe row, Sprong first, the next card peeking in */
  .s7-stage { padding-top:0; }
  .s7-cards { flex-direction:row; align-items:stretch; justify-content:flex-start; gap:12px; margin:0 -3vw; padding:0 11vw 4px; position:relative; cursor:grab; user-select:none; -webkit-user-select:none; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .s7-cards::-webkit-scrollbar { display:none; }
  .s7-card { flex:0 0 78vw; max-width:none; scroll-snap-align:center; padding:16px; }
  .s7-name { font-size:1.8rem; }
  .s7-feats { gap:0.35rem; margin-bottom:0.7rem; }
  .s7-feats li { font-size:0.95rem; line-height:1.3; }
  .s7-check { width:20px; height:20px; }
  .s7-price-main { font-size:2rem; }
  .s7-price-text { font-size:1.6rem; }
  .s7-price-old { font-size:1rem; }
  .s7-offer { font-size:0.85rem; }
  .s7-btn { padding:0.7rem 1rem; }
}

/* ---------- phones (up to 700px) ---------- */
@media (max-width:700px) {
  /* sticky bar: a bigger logo, more compact buttons */
  .site-bar-logo { height:44px; }
  .site-bar-right { gap:0.45rem; }
  .site-bar-cta, .site-menu-btn { height:30px; padding:0 10px; font-size:0.85rem; }

  /* etui: smaller, and compact cards */
  .s6-etui-wrap { width:60vw; }
  .s6-card { padding:16px; }
  .s6-card-head { gap:12px; margin-bottom:0.6rem; }
  .s6-slot, .s6-icon { width:48px; height:48px; }
  .s6-card-title { font-size:1.25rem; }
  .s6-card-text, .s6-checks li { font-size:1rem; }
}

/* screen 2 single column also for tablets held upright wider than 900px */
@media (orientation:portrait) and (max-width:1100px) {
  .s2-subline-line1 { display:block; text-wrap:balance; }
  .s2-subline-line2 { text-wrap:balance; }
  .screen2-collage { margin-bottom:56px; }
  #s2Deco1 { width:min(44px, 11vw) !important; bottom:1.5% !important; left:2% !important; }
}

/* ---------- round: responsive polish (phones / portrait tablets) ---------- */
@media (max-width:900px) {

  /* prices: dragging with the mouse, tappable dots and square arrows */
  .s7-cards.is-dragging { cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
  .s7-nav { display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; }
  .s7-dots { display:flex; align-items:center; gap:4px; }
  .s7-dot { width:24px; height:24px; padding:0; border:0; background:none; cursor:pointer; position:relative; }
  .s7-dot::after { content:''; position:absolute; left:8px; top:8px; width:8px; height:8px; border-radius:50%; background:rgba(45, 46, 131, 0.25); }
  .s7-dot.is-on::after { background:#2d2e83; }
  .s7-dot:focus-visible { outline:2px solid #2d2e83; outline-offset:0; }
  .s7-arrow { width:36px; height:36px; padding:0; display:grid; place-items:center; color:#2d2e83; background:transparent; border:1.5px solid #2d2e83; border-radius:0; box-shadow:none; cursor:pointer; }
  .s7-arrow svg { width:18px; height:18px; }
  .s7-arrow:disabled { opacity:0.35; cursor:default; }
  .s7-arrow:not(:disabled):active { background:#2d2e83; color:#fff; }

  /* explorer tabs: a soft fade only on the side where more tabs are hidden */
  .s4-list.fade-r { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .s4-list.fade-l { -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to left, #000 calc(100% - 36px), transparent); }
  .s4-list.fade-l.fade-r { -webkit-mask-image:linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }

  /* gallery lightbox: the overlay hides the bar; the close button above the cover,
     the arrows below it, nothing on top of the cover */
  .s5-lightbox { flex-direction:column; justify-content:center; align-items:center; gap:10px; padding:10px 12px; background:rgba(45, 46, 131, 0.97); }
  .s5-lb-close { position:static; align-self:flex-end; flex:none; }
  .s5-lb-stage { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; justify-items:center; }
  .s5-lb-frame { grid-column:1 / -1; grid-row:1; }
  .s5-lb-prev, .s5-lb-next { position:static; margin:0; }
  .s5-lb-prev { grid-column:1; grid-row:2; justify-self:end; }
  .s5-lb-next { grid-column:2; grid-row:2; justify-self:start; }
  .s5-lb-frame img { height:calc(100vh - 44px - 44px - 2 * var(--frame-w) - 44px); max-width:calc(100vw - 24px - 2 * var(--frame-w)); }
}
.s5-lb-open .site-bar { visibility:hidden; }

/* ---------- explorer: the Canva AI video ---------- */
.s4-video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.5s ease;
}
.s4-video.is-on { opacity:1; }
.s4-instant .s4-video { transition:none; }

/* while the video plays, the progress line follows the video (screen4.js sets --p) */
.s4-progress.is-video { opacity:1; animation:none; transform:scaleX(var(--p, 0)); }

/* ---------- screen 2, single column: one tidy paragraph, even spacing ---------- */
@media (max-width:900px), (orientation:portrait) and (max-width:1100px) {
  #s2Headline { margin-bottom:0; }
  #s2SublineMask { margin-top:19px; }          /* about 16px of air between the scribble and the first line */
  #s2Subline br { display:none; }              /* the lines are one paragraph: the same spacing everywhere */
  .s2-subline-line1,
  .s2-subline-line2 { display:block; white-space:normal; text-wrap:balance; }
  .s2-subline-logo {
    display:inline-block;
    height:1.9em;
    width:auto;
    vertical-align:middle;
    margin-block:-0.45em;                      /* the logo must not make its line taller */
    margin-left:0.3em;
  }
  .collage-page-wrap {
    width:min(51.5vw, 420px, calc(var(--s2-room, 300px) / 1.55));
    top:var(--s2-top, 50%);
  }
}

/* printing scene: while it is reset to its start state nothing may animate */
.s4-print.s4-reset,
.s4-print.s4-reset * { transition:none !important; animation:none !important; }