/* GENERATED by tools/build-responsive-v2.js. Do not edit directly.
   Reuses the reviewed mobile module layouts for tablet preview widths. */


/* Missing tablet band on clusters and late dataroom modules. The second
   branch also covers touch iPads in landscape without changing small laptops. */
@media (min-width: 640px) and (max-width: 1023.98px),
       (min-width: 1024px) and (max-width: 1366.98px) and (any-pointer: coarse) {
  /* cluster-1/sections/01-hero/01-hero.css */
  /* .nav is position:absolute/top:0 over de hero (bewust, scrolt mee weg) — op mobiel
  
       staan alle stage-kinderen static (zie hieronder) dus zonder eigen top-ruimte zou
  
       de foto recht onder de nav-balk beginnen. Figma-mobiel (node 2743:7293) start de
  
       hero pas op y=75. */
  
    /* Mobiele hero-achtergrond (assets/img/cluster-1/cluster-1-mobile-bg.svg,
  
       402x305 — het mobiele ontwerpformaat). Die zit op de stage zelf en niet
  
       op .ch__bg: dat element is een kind van .ch__stage en wordt hieronder op
  
       `position: static !important` gezet, dus als achtergrondlaag zou het als
  
       blok in de kolom meestapelen in plaats van erachter te liggen.
  
       background-size 100% auto laat 'm meelopen met de schermbreedte; op 402
  
       is dat exact 305px hoog, daarboven schaalt hij mee in verhouding. */
  
    .ch__stage {
  
      width: 100%; height: auto; padding: 75px 0 0; display: flex; flex-direction: column;
  
      background: url("https://7196611.fs1.hubspotusercontent-na1.net/hubfs/7196611/raw_assets/public/ormit-nextgen-2026-08-02/images/cluster-1/cluster-1-hero-bg.jpg") no-repeat center top;
      background-size: 100% auto;
  
    }
  
    .ch__stage > * { position: static !important; }
  
    .ch__bg { display: none; }   /* desktopbeeld (1920 breed) */
  
    /* grid + doodle-icoon: uit de flex-flow gehaald en absoluut t.o.v. .ch__stage
  
       over de foto gelegd (zelfde idee als desktop), i.p.v. mee te stapelen.
  
       Figma-mobiel (node 2743:7293): foto is maar 76% breed (flush links), de
  
       resterende 24% rechts toont het blauwe grid met een harde rand (geen
  
       diagonale fade); het grid loopt door tot in de kaart-goot rechts. */
  
    .ch__stage > .ch__grid { display: block; position: absolute !important; left: auto; right: 0; top: 145px; opacity: 1;
  
      -webkit-mask: none; mask: none; z-index: 1; }
  
    .ch__stage > .ch__icon { display: block; position: absolute !important; left: 64%; top: 166px;
  
      width: 114px; height: 80px; z-index: 4; }
  
    .ch__photo { width: 76%; height: 230px; }
  
    /* kaart: Figma toont ~10px goot links/rechts (node 2743:7319, 382px binnen 402px),
  
       niet edge-to-edge zoals voorheen. */
  
    .ch__card { width: calc(100% - 20px); margin: 0 10px; padding: 40px 20px 24px 20px; box-shadow: none; border: 1.5px solid var(--ink); z-index: 3; }
  
    .ch__tag { font-size: 11px; }
  
    .ch__focus { margin-top: 36px; }
  
    .ch__title { font-size: 44px; }
  
    .ch__strap { font-size: 24px; }
  
    .ch__meta { flex-wrap: wrap; white-space: normal; gap: 34px; row-gap: 16px; }
  
    .ch__share { margin-left: 0;margin-top: 16px; }

  /* cluster-1/sections/02-intro/02-intro.css */
  .cin { padding: 40px 0 60px; }
  
    /* Figma-mobiel (node 2743:7357): grid-patch zit t.h.v. de 2e/3e alinea
  
       (~62%-88% van de sectiehoogte), niet vlak onder de hero-kaart. */
  
    .cin__grid { right: 0; left: auto; top: 62%; opacity: .45; }
  
    /* foto: Figma-bounding (node 2743:7382) komt overeen met ~181x222 ongeroteerd,
  
       rotate(-8deg) (zelfde hoek als desktop), vrijwel flush tegen de linkerrand. */
  
    .cin__photo { position: relative; left: auto; top: auto; width: 181px; height: 222px;
  
      margin: 49px 0 65px 0; display: block; transform: rotate(-8deg); }
  
    .cin__text { margin-left: 0; margin-top: 0; padding-inline: 32px; }
  
    .cin__title { font-size: 34px; }
  
    /* mobiele bounding van de roze blur-band (Rectangle 45438, node 2743:7378) */
  
    .cin_bg { top: 272.5px; height: 467px; }

  /* cluster-1/sections/03-stakes/03-stakes.css */
  /* Figma-mobiel (node 2743:7383): eyebrow zit op y=40 (dus padding-top ~40px,
       niet desktop's 100px), body eindigt ruim voor de sectiehoogte (1058) dus
       padding-bottom ook fors kleiner dan desktop's 240px. */
    .cst { padding: 40px 20px 80px; }
    /* .cst__wrap draagt nog padding-inline: var(--gutter) (40px) van de desktop-regel;
       zonder reset hier bleef de tekst op x=60 staan i.p.v. x=20, uit lijn met de
       linkerkolom van 02-intro/01-hero erboven. */
    .cst__wrap { padding-inline: 0; }
    .cst__over, .cst__title, .cst__body { margin-left: 0; padding-inline: 0;          }
    /* gap eyebrow -> titel: Figma toont maar 16px (y=68 - (y=40+12)), niet desktop's 40px */
    .cst__over { margin-bottom: 16px; }
    .cst__title { position: relative; font-size: 28px; }
    /* De twee <br>'s in de kop zetten de regelval van het desktopontwerp vast.
       Op 402px valt de tekst daardoor veel te vroeg af en houd je halfvolle
       regels over. Uitzetten in plaats van uit de markup halen: dan blijft de
       desktopregelval staan (die is bevroren) en breekt de tekst hier gewoon
       op de beschikbare breedte. */
    .cst__title br { display: none; }
    .cst__body { margin-top: 16px; }
    /* ogen-icoon blijft zichtbaar op mobiel, naast de titel (Figma node 2743:7384:
       x=321.8 y=92.7 w/h=96.6, t.o.v. de volle 402px-sectie -> omgerekend
       t.o.v. .cst__wrap, die zonder eigen padding binnen cst's 20px-inzet valt;
       20px i.p.v. 10px gekozen omdat dat de exacte <br>-regelbreuken in de
       titel matcht die in de Figma-referentie te zien zijn). */
    .cst__eyes { right: 0px; top: 50px; width: 97px; height: 97px; z-index: 3; }

  /* cluster-1/sections/04-tension/04-tension.css */
  /* Figma mobile (2743:7394) heeft de sectie edge-to-edge; desktop se calc(100% - 80px)
       liet 40px witruimte aan weerszijden zien op mobiel — hersteld naar volle breedte. */
    .cte { width: 100%; margin: 0; padding: 70px 0 90px;         overflow: visible; }
    .cte__wrap { padding-inline: 20px;         z-index: 9; }
  
    /* mobiele swig-decoratie: zelfde asset als desktop, herpositioneerd naar de
       Figma-mobile dev-code bounds (get_design_context, niet de rauwe metadata-
       bbox die hier misleidend was door de rotate-180 wrapper): top-exemplaar
       links-van-midden, 180°-gedraaid, bleedend boven de sectie; bottom-
       exemplaar rechts-van-midden, net binnen de sectie onderaan. */
    .cte__bg-top {  
      left: 20px;
          right: auto;
          top: -120px;
          width: 280px;
          transform: rotate(180deg);
     }
    .cte__bg-bottom {         left: auto;
      right: 10px;
      bottom: 4px;
      width: 250px; }
  
    .cte__vs { flex-direction: column; align-items: center; gap: 22px; margin-bottom: 50px; }
    .cte__x { font-size: 26px; }
    .cte__bubble { font-size: 18px; }
    .cte__body { margin-left: 0; }

  /* cluster-1/sections/05-coach/05-coach.css */
  .cco__grid { display: none; }
  
    .cco__wrap { margin-left: 0; padding-inline: 20px; }
  
    .cco__over { margin-bottom: 14px; }
  
    .cco__title { font-size: 30px; }
  
    .cco__cards { flex-direction: column; align-items: center; gap: 50px; }
  
    .cco__gauge { width: 100%; max-width: 340px; }
  
    .cco__pct { font-size: 52px; }
  
    .cco__ring { width: 320px; height: 160px; }
  
    .cco__ring::before { width: 320px; height: 320px; }
  
    .cco__face { width: 108px; height: 114px; top: 128px; }
  
    .cco__gauge figcaption { font-size: 18px; margin-top: 30px; }

  /* cluster-1/sections/06-feedback/06-feedback.css */
  .cfb__wrap { padding: 0 20px; }
  
    .cfb__title { font-size: 28px; }
  
    .cfb__row { grid-template-columns: 1fr; gap: 18px; }
  
    /* 5 fixed-width building icons + fixed gap overflowed the narrower mobile
  
       column (384px needed vs 362px available) — shrink to fit */
  
    .cfb__bld { width: 55px; height: 65px; }
  
    .cfb__viz--buildings { gap: 20px; }

  /* cluster-1/sections/07-numbers/07-numbers.css */
  .cnu { padding-inline: 0; }
  
    .cnu__grid { display: none; }
  
    .cnu__wrap { margin-left: 0; padding-inline: 32px; }
  
    .cnu__title { font-size: 26px; }
  
    .cnu__title .serif { font-size: 22px; }
  
    .cnu__lead { font-size: 16px; }
  
  
  
    .cnu__quote { margin: 100px -22px 0; padding: 56px 32px; max-width: none; }
  
    .cnu__sticker { display: block; position: absolute; left: auto; right: 4px; top: -55px; width: 125px; height: auto; }
  
  
  
    .cnu__body { margin: 48px 0 0; }
  
  
  
    /* Het roze verloop stond op de hele kaart, en omdat de foto op mobiel het
  
       eerste flex-item ís lag hij er middenin. Verloop hier verplaatst naar het
  
       tekstblok, zodat de foto er los boven staat. Het blijft hetzelfde verloop,
  
       alleen over een kortere hoogte — het loopt nu binnen de tekst van roze
  
       naar transparant in plaats van over foto én tekst samen. */
  
    .cnu__expert { display: flex; flex-direction: column; margin: 48px -22px 0; padding: 0 0 40px; max-width: none;
  
      background: none; }
  
    .cnu__photo { order: 1; position: relative; left: auto; top: auto; width: 100%; max-width: none; height: auto; margin: 0; }
  
    .cnu__badge { order: 2;
  
      position: relative;
  
      left: auto;
  
      top: auto;
  
      align-self: flex-start;
  
      margin: -50px 0 -124px 24px;
  
      transform: rotate(-36deg);
  
      right: 9px; }
  
    .cnu__expert-text {
  
      order: 3;
  
      padding: 132px 32px 32px 32px;
  
      background: linear-gradient(180deg, #FFDEFD 0.07%, rgba(255, 222, 253, 0) 100.07%);
  
    }
  
    .cnu__arrow { display: none; }

  /* cluster-1/sections/08-heard/08-heard.css */
  .chr {
  
      padding: 60px 0 60px;
  
      width: calc(100% - 20px);
  
      margin: 0 auto;
  
  }
  
  .chr__grid-tl {
  
    --tg-left: -10px;
  
    --tg-top: -48px;
  
  }
  
    .chr__wrap { padding-inline: 20px; }
  
    .chr__title { font-size: 26px; }
  
    .chr__title .serif { font-size: 22px; }
  
    .chr__cards { min-height: 0; display: flex; flex-direction: column; gap: 24px;         margin: 32px 0 32px; }
  
    .chr__watch { position: relative; left: auto; top: auto; align-self: flex-start; }
  
    .chr__arrow { display: none; }
  
    .chr__card {         position: relative;
  
      left: auto !important;
  
      top: auto !important;
  
      width: 90% !important;
  
      margin-inline: auto;
  
      rotate: 0deg;
  
      padding: 20px !important; }
  
    .chr__close { flex-direction: column; gap: 16px; margin-top: 40px; }
  
    .chr__ear { position: relative;
  
      width: 90px;
  
      height: auto;
  
      top: auto;
  
      left: -6px;
  
      margin: -80px 0 0;
  
      z-index: 9;}
  
    .chr__card--org {rotate: -3deg;}
  
    .chr__card--genz{rotate: 8deg;}
  
    .chr__grid-br {
  
      --tg-bottom: -40px;
  
  }

  /* cluster-1/sections/09-door/09-door.css */
  .cdr__grid { display: none; }
  
    .cdr__wrap { margin-left: 0; padding-inline: 12px;     margin: 0px auto 0 auto;}
  
    .cdr__container { padding: 60px 0 0; }
  
    .cdr__title { font-size: 26px; }
  
    .cdr__title .serif { font-size: 22px; }
  
    .cdr__quote, .cdr__quote--white { margin-left: 0; max-width: 100%; }

  /* cluster-1/sections/10-capacity/10-capacity.css */
  .cca__wrap { margin-left: 0; padding-inline: 20px; }
    .cca__expert { margin-left: 0; padding-top: 283px; }
    .cca__photo { left: 50%; top: 25px; width: 223px; height: 273px; transform: translateX(-50%) rotate(-15.79deg); }
    .cca__badge { left: 16px; right: auto; top: 276px; width: 120px; height: 85px; }
    .cca__card { padding: 80px 32px 60px; }
    .cca__expert::after { display: none; }
    .cca__body { margin-left: 0; margin-top: 40px; }

  /* cluster-1/sections/11-notvillain/11-notvillain.css */
  .cnv__grid { display: none; }
  
    .cnv::before, .cnv__wrap { margin-left: 0; padding-inline: 20px; }
  
    .cnv__title { font-size: 32px; }
  
    .cnv__quote__container { min-height: 0; margin-top: 0; padding: 24px 0; }
  
    .cnv__quote { max-width: 87%; box-shadow: 0 20px 40px rgba(0,0,0,.12); }

  /* cluster-1/sections/12-challenges/12-challenges.css */
  .cch {
  
      padding: 30px 0 30px;
  
  }
  
    .cch__grid { display: none; }   /* desktop-decoratie */
  
    .cch__wrap { margin: 0; max-width: 100%; padding: 0 20px; }
  
    .cch__title { font-size: 32px; margin-bottom: 40px; }
  
    .cch__rows { gap: 20px; }
  
    .cch__row { grid-template-columns: 1fr; grid-template-areas: "num" "label" "viz"; gap: 0; align-items: start; }
  
    .cch__num { grid-area: num; font-size: 36px; }
  
    .cch__num em { font-size: 40px; }
  
    .cch__label { grid-area: label; max-width: 100%; }
  
    .cch__viz { grid-area: viz; margin-top: 16px; }

  /* cluster-1/sections/13-genzpanel/13-genzpanel.css */
  .cgz { padding: 40px 0 50px; min-height: 0; }
    .cgz__wrap { min-height: 0; display: flex; flex-direction: column-reverse; gap: 20px; }
    .cgz__lead { position: relative; left: auto; bottom: auto; font-size: 22px; max-width: none; }
    .cgz__video { position: relative; right: auto; top: auto; width: calc(100% + 40px); aspect-ratio: 402 / 582; margin: 0 -20px; }
    .cgz__video-stroke--back { left: -5%; top: 4%; width: 108%; height: 68%; }
    .cgz__video-card { left: 24.5%; top: 14%; width: 53%; border-radius: 8px; }
    .cgz__video-stroke--front { left: -7%; top: 45%; width: 105%; height: 40%; }
    .cgz__video-cta { left: 14%; top: 60%; width: 60%; }
    .cgz__video-play { width: 28%; }
    .cgz__video-label { margin-top: -2px; font-size: 16px; }

  /* cluster-1/sections/14-means/14-means.css */
  .cme__wrap { margin: 0; max-width: 100%; padding: 0 20px; }
  
    .cme__title, .cme__lead { padding-inline: 0; }
  
    .cme__title { font-size: 28px; }
  
    .cme__recap { padding: 30px 24px; }
  
    .cme__badge { left: auto; right: 6px; top: -32px; width: 119px; height: 57px; transform: rotate(15deg); }
  
    .cme__tabs { flex-direction: column; align-items: stretch; gap: 8px; }
    .cme__tab { text-align: center; }
    .cme__quote { max-width: calc(100% - 30px); font-size: 16px; }

  /* cluster-1/sections/15-readnext/15-readnext.css */
  /* mobiel: één kaart tegelijk in beeld; met de pijlen ga je naar de
  
       volgende. Op desktop staan er twee (zie de n + 3 hierboven). */
  
    .crn__card:nth-child(n + 2) { display: none; }
  
  
  
    .crn__wrap { padding-inline: 20px; }
  
    /* Figma mobiel (2743:8317) toont maar 1 kaart tegelijk (swipeable carrousel,
  
       frame is maar ~480px hoog — geen ruimte voor 2 gestapelde kaarten).
  
       .crn__nav-pijlen scrollen de rail (js/interact.js, module 4) één
  
       kaartbreedte + gap op — op desktop staan beide kaarten al naast elkaar
  
       (2-koloms grid hierboven) dus is scrollBy daar een onschuldige no-op. */
  
    .crn__grid { grid-template-columns: unset; display: flex; gap: 20px;
  
      overflow-x: auto; scroll-snap-type: x mandatory;
  
      -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  
    .crn__grid::-webkit-scrollbar { display: none; }
  
    .crn__card { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }

  /* cluster-2/sections/01-hero/01-hero.css */
  .gh__stage { width: 100%; height: auto; padding: 75px 0 0; display: flex; flex-direction: column; }
  
    .gh__stage > * { position: static !important; }
  
    .gh__bg {         position: absolute !important;
  
      height: 340px;
  
      background-size: contain;
  
      right: 0px;
  
      bottom: 0px;
  
      top: 100px; }
  
    /* Figma: grid lokaal x146 y106 w256 h252 t.o.v. de fototegel (36%-inzet, vlak tegen de rechterrand) */
  
    .gh__grid {         position: absolute !important;
  
      left: auto !important;
  
      top: 185px !important;
  
      opacity:1;
  
      -webkit-mask: none;
  
      mask: none;
  
      z-index: 1;
  
      right: 0;
  
    }
  
    /* Uitzondering op het pagina-brede raster in css/cluster-2-responsive.css:
  
       dat zet elk raster op 3x3 tegels, maar dit hero-raster hield zijn oude
  
       aantal (de .tgrid-standaard van 4 + 2 = 6 tegels) — alleen de tegelmaat
  
       ging van 40 naar 32.
  
  
  
       Twee klassen in de selector omdat cluster-2-responsive.css ná dit bestand
  
       geladen wordt; met alleen .gh__grid zou die algemene .tgrid-regel winnen
  
       op gelijke specificiteit. */
  
    .tgrid.gh__grid { --tg-cols-m: 4; --tg-rows-m: 4; }
  
    /* Figma: foto is 76% breed (306/402), niet edge-to-edge */
  
    .gh__photo { width: 76%; height: 230px; }
  
    /* Figma: icoon bbox center lokaal (298, 245.9 t.o.v. stage-top; geverifieerd via get_design_context
  
       op node 2743:9846 t.o.v. kaart 2743:9811, straddlet de foto/kaart-naad), intrinsic ~92x81, zelfde rotatie als desktop.
  
       Correctie 2026-07-24: top was 164px (te hoog, badge zat volledig in het midden van de foto i.p.v. op de naad) */
  
    .gh__plant { display: block; position: absolute !important; left: 283px; top: 205px; width: 92px; height: 81px; z-index: 4;
  
      transform: rotate(-20.66deg); }
  
    /* Figma: kaart met 10px goot links/rechts (node 2743:9811, 382px binnen 402px) */
  
    .gh__card { width: calc(100% - 20px); margin: 0 10px; padding: 40px 20px 24px 20px; box-shadow: none; border: 1.5px solid var(--ink); z-index: 3; }
    .gh__tag { font-size: 11px; }
    .gh__focus { margin-top: 36px; }
    .gh__title { font-size: 44px; }
  
    .gh__title em, .gh__title .serif { font-size: inherit; }
    .gh__meta { flex-wrap: wrap; white-space: normal; gap: 34px; row-gap: 16px; }
    .gh__share { margin-left: 0; margin-top: 16px; }

  /* cluster-2/sections/02-intro/02-intro.css */
  .gin { padding: 40px 0 60px; }
  
    .gin::before { top: 272.5px; height: 150px; }
    /* Figma (node 2743:9850, t.o.v. sectie-top): x274 y527 w256 h252 — vaste px i.p.v. %,
  
       want % van .gin's eigen hoogte drift met de werkelijke (langere) bodytekst t.o.v. de Figma-mockup-tekst. */
  
    .gin__grid { display: block; right: -128px; left: auto; top: 527px; opacity: .45; }
  
    /* Figma (node 2743:9874, rotated bbox center ≈ x88 y940 t.o.v. sectie-top): center lag te ver links/hoog,
  
       left -17→-1 en top toegevoegd om ~16px rechts / ~84px omlaag te schuiven. */
  
    .gin__photo { position: relative; left: -1px; top: 84px; width: 179px; height: 219px;
  
      margin: 0 0 150px 0; display: block; transform: rotate(-8.9deg);
  
      box-shadow: -11px 18px 39px rgba(141,173,238,.45); }
  
    /* Figma: swof-swoosh (node 2743:9871) heeft eigen mobiel-positie (links -207 top 107), niet de
  
       ongeconverteerde desktop-waarden (213/-63) die hier zonder override doorlekten. */
  
    .gin__swof { left: -207px; top: 107px; }
  
    /* Figma: 40px gap tussen foto (margin-bottom 40) en tekstblok volstaat — desktop's margin-top:220px
  
       (bedoeld voor de losstaande/overlappende desktop-layout) is op mobiel een enorme onbedoelde extra gap. */
  
    .gin__text { margin-left: 0; margin-top: 0; padding-inline: 32px; }
  
    .gin__title { font-size: 32px; }

  /* cluster-2/sections/03-clocks/03-clocks.css */
  /* Figma (root 2743:9875 px-[10px]): 10px gutter i.p.v. de geërfde desktop var(--gutter) (40px) */
  
    .gcl__title { margin: 0 0 56px; padding-left: 10px; padding-right: 10px; font-size: 32px; }
  
    /* Figma: kaarten blijven individueel gekanteld (org -3deg, genz 8deg) en overlappen 20px i.p.v. een rechte stapel met 20px gap */
  
    .gcl__cards { min-height: 0; display: flex; flex-direction: column; gap: 0; margin-bottom: 30px; }
  
    /* Figma (node 2743:9890 t.o.v. cards-analoog 2743:9879): 94x94, right -30px (steekt in de gutter uit).
  
       Top rekenkundig ≈ -15.5px, maar empirisch bijgesteld naar -46px: bij -15.5px overlapte de klok
  
       de "the organisation half:" kop-tekst (in Figma's eigen render blijft die vrij, vermoedelijk doordat
  
       de -3deg kantel de rechterbovenhoek van de kaart optilt — dat effect is hier niet apart gemodelleerd). */
  
    .gcl__clock { position: absolute; right: -30px; top: -46px; width: 94px; height: 94px; }
  
    .gcl__arrow { display: none; }
  
    .gcl__card {
  
      position: relative; left: auto !important; top: auto !important; width: 100% !important;
  
      padding: 20px;
  
      box-shadow: 0 4px 4px rgba(0,0,0,.3), 0 8px 12px 6px rgba(0,0,0,.15);
  
    }
  
    .gcl__card--org { rotate: -3deg !important; margin-bottom: 20px; }
  
    .gcl__card--genz { rotate: 8deg !important; }
  
    .gcl__ctitle, .gcl__card--org .gcl__ctitle { font-size: 32px; }
  
    /* Figma: quote-tekst is not-italic (alleen de kaart zelf is gekanteld, niet het lettertype) */
  
    .gcl__quote { font-style: normal; }
  
    .gcl__body { margin-left: 0; padding-left: 10px; padding-right: 10px;    margin: 60px auto 0 auto; }

  /* cluster-2/sections/04-growth/04-growth.css */
  .ggr { padding: 40px 0 50px;     background-size: cover; }
  
    .ggr__wrap { margin-left: 0; padding: 0 10px; }
  
    .ggr__title { font-size: 32px; }
  
    .ggr__row { grid-template-columns: 1fr; gap: 18px; }
  
    .ggr__num { font-size: 36px; line-height: 1.2; }
  
    .ggr__num em { font-size: 40px; font-style: italic; font-family: var(--font-serif); font-weight: 400; }
  
    .ggr__viz { gap: 10px; }
  
    /* geen scale(1.3) meer: de gegenereerde balk is 312px i.p.v. 108px breed en
  
       zou opgeschaald buiten het scherm lopen */
  
    .ggr__face { width: auto; height: 106px; }
  
    .ggr__viz--people { gap: 14px; justify-content: space-between; }
  
    .ggr__ppl { width: 52px; height: 76px; }
  
    .ggr__share { font-size: 10px; padding: 8px; gap: 4px; letter-spacing: 1.32px; }

  /* cluster-2/sections/05-careermax/05-careermax.css */
  .gcm { padding: 24px 0 40px; }
    .gcm__wrap { min-height: 0; padding-inline: 40px; }
    .gcm__mock { position: relative;
      right: auto;
      top: auto;
      width: 100%;
      max-width: 212px;
      margin: 50px auto;
      height: auto; }
    .gcm__intro { max-width: none; }
    .gcm__title { font-size: 28px; }
    .gcm__serif { font-size: 32px; }
    .gcm__share { font-size: 10px; padding: 8px; gap: 4px; letter-spacing: 1.32px; }
    .gcm__close { margin: 40px 0 0; }
  
    .gcm__swoof {
      position: absolute;
      right: 0px;
      top: -30px;
  }
  .gcm__tag {
   right: 38px;
  }

  /* cluster-2/sections/06-map/06-map.css */
  .gmp { width: calc(100% - 20px); margin: 30px auto 0 auto; padding: 40px 0 50px; }
    .gmp__icon { position: relative; right: auto; top: auto; width: 150px; height: 150px; margin: -120px 20px 0px auto; }
    .gmp__wrap { margin-left: 0; padding: 0 32px; }
    .gmp__title { font-size: 28px; }
    .gmp__quote { margin-top: 270px; padding: 60px 32px; }
    .gmp__quote blockquote { font-size: 16px; }
    .gmp__quote figcaption { font-size: 10px; letter-spacing: 1.32px; }
    /* right was -10px: het element bleef dan net binnen de sectie, maar door de
       rotatie van 16.94° is de gedraaide bounding box 144px breed in plaats van
       110 — ruim 17px extra aan elke kant. De foto liep daardoor tot x=429 in een
       sectie van 402 en werd rechts afgekapt. Met 24px staat de gedraaide hoek
       er met een paar pixels speling binnen. */
    .gmp__quote__image { right: 24px; top: 773px; width: 184.924px;
      height: 225.948px; }

  /* cluster-2/sections/07-phantom/07-phantom.css */
  .gph { padding: 40px 0 50px; }
    .gph__container {
      display: block;
      width: 100%;
      padding: 0;
      margin: 0;
    }
    .gph__grid { display: none; }   /* desktop-decoratie */
    .gph__map_svg { width: 123px; height: 124px; top: 100px; right: -1px; left: auto; }
    .gph__icon { position: relative; right: auto; top: auto; width: 110px; height: 110px; margin: 0 0 6px 20px; }
    .gph__wrap { margin-left: 0; padding: 0 10px; }
    /* Hangende inspring: het nummer steekt links uit, alle volgende regels
       lijnen op het eerste woord van de titel. text-indent geldt alleen voor de
       eerste regel, dus die schuift met de negatieve waarde weer terug naar 0 —
       precies de breedte van "1." plus een spatie.
  
       De max-width is nodig om de titel te laten breken zoals in het ontwerp:
       bij de volle 382px paste "Where the map breaks" nét niet meer naast het
       nummer, waardoor "1." alleen op een regel achterbleef.
  
       285px is gekozen op gemeten breedtes, niet op gevoel:
         "1. Where the"      221px  -> moet passen
         "1. Where the map"  310px  -> mag NIET passen, anders breekt hij te laat
         "— Phantom paths."  238px  -> plus de inspring van 34px = 272px nodig
       Alles tussen 272 en 310 voldoet; 285 ligt daar comfortabel tussenin. */
    .gph__head {
      font-size: 32px;
      max-width: 285px;
      padding-left: 1.05em;
      text-indent: -1.05em;
    }
    .gph__sub { font-size: 36px; }
    .gph__bold { font-size: 24px; margin-top: 16px; max-width: 80%;}
    .gph__body { margin-top: 40px; }
    .gph__body p { margin: 0 0 40px; }
    .gph__body strong { font-weight: var(--w-semibold); }
    .gph__body--after { margin-top: 40px; }
    .gph__stat { margin: 40px 0; padding: 60px 32px; }
    .gph__stat-txt { font-size: 16px; }
    .gph__stat figcaption { font-size: 10px; letter-spacing: 1.32px; }
    .gph__figure { height: 239px; }
    .gph__share { font-size: 10px; letter-spacing: 1.32px; padding: 8px; gap: 4px; }

  /* cluster-2/sections/08-innovation/08-innovation.css */
  .giv { padding: 40px 0 10px; width: calc(100% - 20px); margin: 0 auto 40px auto; }
    .giv__grid_top { left: -6px; top: -48px; }
    .giv__grid { display: block; right: -2px;         bottom: -48px; }
    .giv__wrap { margin-left: 0;         padding: 20px 32px; 0px 32px; }
      /* Hangende inspring, zelfde recept als .gph__head in 07-phantom: het nummer
       steekt links uit en alle volgende regels lijnen op het eerste woord van de
       titel. text-indent geldt alleen voor de eerste regel, dus die schuift met
       de negatieve waarde terug naar 0 — precies de breedte van "N." plus een
       spatie. */
    .giv__head {
      font-size: 32px; margin-bottom: 20px;
      padding-left: 1.05em;
      text-indent: -1.05em;
    }
    .giv__sub { font-size: 32px; }
    .giv__bold { font-size: 16px; font-weight: var(--w-semibold); line-height: 1.2; }
    .giv__bold--mt { font-size: 24px; font-weight: var(--w-bold); line-height: 1.2; margin-top: 16px; }
    .giv__body { margin-top: 16px; }
    .giv__body strong { font-weight: var(--w-semibold); }
    .giv__card { margin: 16px 0 40px; padding: 60px 32px; }
    .giv__card--white { margin-top: 40px; }
    .giv__card p { font-size: 16px; }

  /* cluster-2/sections/09-slow/09-slow.css */
  .gsl { padding: 40px 0 50px; }
    .gsl__grid, .gsl__grid-h { display: none; }
    .gsl__wrap { margin-left: 0; padding: 0 10px; }
      /* Hangende inspring, zelfde recept als .gph__head in 07-phantom: het nummer
       steekt links uit en alle volgende regels lijnen op het eerste woord van de
       titel. text-indent geldt alleen voor de eerste regel, dus die schuift met
       de negatieve waarde terug naar 0 — precies de breedte van "N." plus een
       spatie. */
    .gsl__head {
      font-size: 32px; margin-bottom: 20px;
      /* max-width dwingt dezelfde regelval af als bij .gph__head: zonder deze
         grens past "N. Where the map" nog op regel 1 (320px) en breekt de titel
         pas na "map". Met 285px breekt hij na "the", zoals in het ontwerp.
         Gemeten: ondertitel 206 px + 34px inspring = 240 px nodig, dus 285 past. */
      max-width: 285px;
      padding-left: 1.05em;
      text-indent: -1.05em;
    }
    .gsl__sub { font-size: 32px; }
    .gsl__bold { font-size: 16px; font-weight: var(--w-semibold); }
    .gsl__body { margin-top: 20px; }
    .gsl__body strong { font-weight: var(--w-semibold); }
    .gsl__list { margin-top: 20px; }
    .gsl__list strong { font-weight: var(--w-semibold); }
    .gsl__card { padding: 60px 32px; }
    .gsl__card-title { font-size: 24px; }

  /* cluster-2/sections/10-feltgap/10-feltgap.css */
  .gfg { padding: 40px 0 50px; }
    .gfg__wrap { margin-left: 0; padding: 0 20px; }
      /* Hangende inspring, zelfde recept als .gph__head in 07-phantom: het nummer
       steekt links uit en alle volgende regels lijnen op het eerste woord van de
       titel. text-indent geldt alleen voor de eerste regel, dus die schuift met
       de negatieve waarde terug naar 0 — precies de breedte van "N." plus een
       spatie. */
    .gfg__head {
      font-size: 32px;
      /* max-width dwingt dezelfde regelval af als bij .gph__head: zonder deze
         grens past "N. Where the map" nog op regel 1 (320px) en breekt de titel
         pas na "map". Met 285px breekt hij na "the", zoals in het ontwerp.
         Gemeten: ondertitel 204 px + 34px inspring = 238 px nodig, dus 285 past. */
      max-width: 285px;
      padding-left: 1.05em;
      text-indent: -1.05em;
    }
    .gfg__sub { font-size: 26px; }
    .gfg__gauges { flex-direction: column; align-items: center; gap: 44px; }
    .gfg__gauge { width: 100%; max-width: 340px; }
    .gfg__pct { font-size: 52px; }
    .gfg__pct em { font-size: 58px; font-style: italic; font-family: var(--font-serif); }
    .gfg__ring { width: 100%; height: auto; aspect-ratio: 2 / 1; }
    .gfg__ring::before { width: 100%; height: auto; aspect-ratio: 1 / 1; }
    .gfg__face { width: 118px; height: 118px; top: 187px; }
    .gfg__gauge figcaption { font-size: 16px; margin-top: 70px; }
    .gfg__row { grid-template-columns: 1fr; gap: 16px; }
    /* De oude handgetekende balk stond hier nog: vaste 120x48 in donkergroen,
       die achter de gegenereerde limekleurige cellen doorschijnt en de breedte
       tegenwerkt die chart-blocks.js inline zet. Verwijderd — op mobiel geldt nu
       hetzelfde recept als op desktop. */
    .gfg__vface { width: auto; height: 104px; }
    .gfg__quote { margin: 50px 0 30px; rotate: 0deg; padding: 20px; }
    .gfg__quote blockquote { font-size: 20px; }
    .gfg__nl { font-size: 10px; letter-spacing: 1.32px; }

  /* cluster-2/sections/11-ownership/11-ownership.css */
  .gow__grid { display: none; }   /* desktop-decoratie */
    .gow__wrap { margin-left: 0; padding: 0 20px; }
    .gow__expert { margin-top: 60px; padding-top: 40px; }
    .gow__qmark { top: 9px; }
    .gow__photo { right: 10px; top: -30px; width: 100px; height: 130px; }
    .gow__arrow { display: none; }
    .gow__card { padding: 56px 24px 26px; }
    /* the EXPERT sticker sits in the card's own bottom-right corner and was overlapping the last
       line of the attribution figcaption (visually covering "Gen" in "NextGen") — Figma's mobile
       reference keeps a clear gap between the two, so the figcaption gets right-side breathing
       room sized to clear the sticker's footprint instead of moving/shrinking the sticker itself. */
    .gow__card figcaption { padding-right: 110px; }
    .gow__sticker { left: auto; right: 10px; bottom: -30px; width: 120px; }

  /* cluster-2/sections/12-panel/12-panel.css */
  .cgz { padding: 40px 0 50px; min-height: 0; }
       .cgz__wrap { min-height: 0; display: flex; flex-direction: column-reverse; gap: 20px; }
       .cgz__lead { position: relative; left: auto; bottom: auto; font-size: 32px; max-width: none; }
       .cgz__video { position: relative; right: auto; top: auto; width: calc(100% + 12px); aspect-ratio: 402 / 582; margin: 0 -6px; }
       .cgz__video-stroke--back { left: -5%; top: 4%; width: 108%; height: 68%; }
       .cgz__video-card { left: 24.5%; top: 14%; width: 53%; border-radius: 8px; }
       .cgz__video-stroke--front { left: -7%; top: 45%; width: 105%; height: 40%; }
       .cgz__video-cta { left: 14%; top: 60%; width: 60%; }
       .cgz__video-play { width: 28%; }
       .cgz__video-label { margin-top: -2px; font-size: 16px; }

  /* cluster-2/sections/13-means/13-means.css */
  .cme__wrap { margin: 0; max-width: 100%; padding: 0 20px; }
  
       .cme__title, .cme__lead { padding-inline: 0; }
  
       /* Figma mobile (2743:10393) keeps h2 at 36px, same as desktop — do not shrink to 28px */
  
       .cme__lead { margin-top: 16px; }
  
       /* Figma mobile (2743:10395): card bleeds 10px from viewport edge (wider than the 20px
  
          title/lead column), with only 10px of its own internal padding — confirmed via badge
  
          offset math (right:6px/top:-32px lines up with a 382px-wide card). margin-top 60px
  
          (not desktop's 100px) confirmed via header-to-card gap in the mobile frame. */
  
       .cme__recap { padding: 10px; margin-inline: -10px; margin-top: 60px; }
  
       .cme__badge { left: auto; right: 6px; top: -32px; width: 119px; height: 57px; transform: rotate(15deg); }
  
       .cme__tabs { flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 0; margin-bottom: 20px; }
  
       /* Figma mobile (2743:10411/2743:10413): both tab rows are full-width sharp rectangles,
  
          no pill radius (unlike desktop's 24px pill) */
  
       .cme__tab { text-align: center; border-radius: 0; }

  /* cluster-2/sections/14-readnext/14-readnext.css */
  /* mobiel: één kaart tegelijk in beeld; met de pijlen ga je naar de
  
       volgende. Op desktop staan er twee (zie de n + 3 hierboven). */
  
    .crn__card:nth-child(n + 2) { display: none; }
  
  
  
       /* Figma mobiel (2743:10476/2743:10477): zowel het "Read next"-label als de kaart
  
          bleeden tot 10px vanaf de viewport-rand (niet de gebruikelijke 20px tekstgutter) —
  
          bevestigd via get_metadata (beide frames: x=10 van 402px breed root). */
  
       .crn__wrap { padding-inline: 10px; }
  
       /* Figma mobiel (2743:10474/2743:10475): "Read next" label is 10px/medium met
  
          letter-spacing 1.32px, niet de desktop 16px. */
  
       .crn__over { font-size: var(--fs-overline); letter-spacing: 1.32px; line-height: 1.7;
  
         padding: 0 0 10px; margin: 0 0 16px; }
  
       /* Figma mobiel (2743:10487, "read-on-card"): pt 0 / px 16 / pb 16, niet de desktop 24px/28px. */
  
       .crn__body { padding: 0 16px 16px; }
  
       /* Figma mobiel (2743:8317) toont maar 1 kaart tegelijk (swipeable carrousel,
  
          frame is maar ~480px hoog — geen ruimte voor 2 gestapelde kaarten).
  
          .crn__nav-pijlen hebben nog geen JS-koppeling (ook niet op desktop), dus
  
          hier CSS-only horizontale scroll-snap i.p.v. nieuwe JS-interactie. */
  
       .crn__grid { grid-template-columns: unset; display: flex; gap: 20px;
  
         overflow-x: auto; scroll-snap-type: x mandatory;
  
         -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  
       .crn__grid::-webkit-scrollbar { display: none; }
  
       .crn__card { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }

  /* cluster-3/sections/01-hero/01-hero.css */
  .gh__stage { width: 100%; height: auto; padding: 75px 0 0; display: flex; flex-direction: column; }
  
    .gh__stage > * { position: static !important; }
  
    .gh__bg {         position: absolute !important;
  
      height: 340px;
  
      background-size: contain;
  
      right: 0px;
  
      bottom: 0px;
  
      top: 100px; }
  
    /* Figma: grid lokaal x146 y106 w256 h252 t.o.v. de fototegel (36%-inzet, vlak tegen de rechterrand) */
  
    .gh__grid {         position: absolute !important;
  
      left: 53.3% !important;
  
      top: 106px !important;
  
      opacity: .6;
  
      -webkit-mask: none;
  
      mask: none;
  
      z-index: 1; }
  
    /* Figma: foto is 76% breed (306/402), niet edge-to-edge */
  
    .gh__photo { width: 76%; height: 230px; }
  
    /* Figma: icoon bbox center lokaal (298, 245.9 t.o.v. stage-top; geverifieerd via get_design_context
  
       op node 2743:9846 t.o.v. kaart 2743:9811, straddlet de foto/kaart-naad), intrinsic ~92x81, zelfde rotatie als desktop.
  
       Correctie 2026-07-24: top was 164px (te hoog, badge zat volledig in het midden van de foto i.p.v. op de naad) */
  
    .gh__plant { display: block; position: absolute !important; left: 283px; top: 205px; width: 92px; height: 81px; z-index: 4;
  
      transform: rotate(-20.66deg); }
  
    /* Figma: kaart met 10px goot links/rechts (node 2743:9811, 382px binnen 402px) */
  
    .gh__card { width: calc(100% - 20px); margin: 0 10px; padding: 40px 20px 24px 20px; box-shadow: none; border: 1.5px solid var(--ink); z-index: 3; }
    .gh__tag { font-size: 11px; }
    .gh__focus { margin-top: 36px; }
    .gh__title { font-size: 44px; }
  
    .gh__title em, .gh__title .serif { font-size: inherit; }
    .gh__meta { flex-wrap: wrap; white-space: normal; gap: 34px; row-gap: 16px; }
    .gh__share { margin-left: 0; margin-top: 16px; }

  /* cluster-3/sections/02-intro/02-intro.css */
  .gin { padding: 40px 0 60px; }
  
    .gin::before { top: 272.5px; height: 150px; }
    /* Figma (node 2743:9850, t.o.v. sectie-top): x274 y527 w256 h252 — vaste px i.p.v. %,
  
       want % van .gin's eigen hoogte drift met de werkelijke (langere) bodytekst t.o.v. de Figma-mockup-tekst. */
  
    .gin__grid { display: block; right: -128px; left: auto; top: 527px; opacity: .45; }
  
    /* Figma (node 2743:9874, rotated bbox center ≈ x88 y940 t.o.v. sectie-top): center lag te ver links/hoog,
  
       left -17→-1 en top toegevoegd om ~16px rechts / ~84px omlaag te schuiven. */
  
    .gin__photo { position: relative; left: -1px; top: 84px; width: 179px; height: 219px;
  
      margin: 0 0 150px 0; display: block; transform: rotate(-8.9deg);
  
      box-shadow: -11px 18px 39px rgba(141,173,238,.45); }
  
    /* Figma: swof-swoosh (node 2743:9871) heeft eigen mobiel-positie (links -207 top 107), niet de
  
       ongeconverteerde desktop-waarden (213/-63) die hier zonder override doorlekten. */
  
    .gin__swof { left: -207px; top: 107px; }
  
    /* Figma: 40px gap tussen foto (margin-bottom 40) en tekstblok volstaat — desktop's margin-top:220px
  
       (bedoeld voor de losstaande/overlappende desktop-layout) is op mobiel een enorme onbedoelde extra gap. */
  
    .gin__text { margin-left: 0; margin-top: 0; padding-inline: 32px; }
  
    .gin__title { font-size: 32px; }

  /* cluster-3/sections/03-contradiction/03-contradiction.css */
  .bcd { padding: 60px 0 60px; }
  
    .bcd__glow { top: 264px; }
  
    .bcd__wrap { padding-inline: 20px; }
  
    .bcd__title { font-size: 32px; margin-bottom: 30px; }
    .bcd__title--has-intro { margin-bottom: 0; }
    .bcd__intro { margin: 16px 0 30px; }
    .bcd__cards { grid-template-columns: 1fr; gap: 20px; }
  
    .bcd__card { padding: 10px; gap: 20px; }
  
    .bcd__vizbox { padding: 10px; }
  
    .bcd__row { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 30px; }
  
    .bcd__stat { width: auto; }
  
    .bcd__num2 { font-size: 36px; }
  
    .bcd__share { margin-top: 30px; }
  
    .bcd__how { margin-top: 20px; }

  /* cluster-3/sections/04-twochairs/04-twochairs.css */
  /* Figma-ref (cluster3-m.png): lime band is inset ~10px each side on mobile,
  
       not the desktop 80px/40px-each-side inset — leftover desktop value bled
  
       through as an unwanted ~40px white margin on both edges. */
  
    .btc { padding: 44px 0 50px; width: calc(100% - 20px); }
  
    .btc__title, .btc__lead, .btc__h3, .btc__body { margin-left: 0; }
  
    .btc__title { font-size: 34px; }
  
    .btc__title .serif { font-size: 32px; }
  
    /* geen padding-top meer: die was er om ruimte te maken voor .btc__chairs als
  
       los flex-item boven de kaarten — nu de stoelen weer (net als in Figma)
  
       over de hoek van de eerste kaart heen liggen, is die ruimte dubbelop met
  
       .btc__lead's eigen margin-bottom:70px. */
  
    .btc__cards { min-height: 0; display: flex; flex-direction: column; gap: 20px; margin-bottom: 40px; }
  
    /* Figma mobile: stoelen-doodle overlapt de rechterbovenhoek van de witte kaart
  
       i.p.v. los erboven te zweven — position:absolute i.p.v. flex-flow item. */
  
    .btc__chairs { position: absolute; top: -32px; right: -6px; width: 130px; z-index: 4; }
  
    .btc__arrow { display: none; }
  
    .btc--arrow { display: none; }
  
    /* Figma mobile: kaarten blijven individueel gekanteld (net als desktop),
  
       alleen platgeslagen naar rotate(0) was de bug — hoeken gemeten op de ref:
  
       org ≈ -3deg, genz ≈ 8deg (steiler dan desktop's -2/3deg). */
  
    .btc__card { position: relative; left: auto !important; top: auto !important; width: 100% !important; padding: 24px 22px; }
  
    .btc__card--org { rotate: -3deg; }
  
    .btc__card--genz { rotate: 8deg; }
  
    .btc__ctitle, .btc__card--org .btc__ctitle { font-size: 24px; }
  
    .btc__h3 { font-size: 24px; }
  
    .btc__wrap {
  
      z-index: 1;
  
      position: relative;
  
  }

  /* cluster-3/sections/05-belonging/05-belonging.css */
  .bbe { padding: 60px 0 40px; }
    .bbe__wrap { max-width: 100%; padding-inline: 20px; }
    .bbe__title { margin-bottom: 40px; }
    /* desktop's line-height:1.9 werkt alleen omdat de zin daar op 1 regel blijft;
       op mobiel breekt "Belonging isn't a programme. It's four people." naar 2
       regels en laat de 1.9 dan een veel te grote sprong tussen die 2 regels
       zien t.o.v. de ref (normale, krappe regelafstand). */
    .bbe__strong { line-height: 1.35; }

  /* cluster-3/sections/06-signal1/06-signal1.css */
  .bs1 { padding: 60px 0 40px; }
  
    /* mark als opgeschoven blok (Figma mobiel): roze achter de bovenkant van de
  
       letters, de onderkant steekt eruit — i.p.v. de standaard onderstreep-marker */
  
    .bs1__title .mark {
  
      background-image: linear-gradient(180deg, var(--pink-marker) 0 70%, transparent 70%);
  
    }
  
    /* "Signal 1 ·" mét punt in de marker, dan een harde regelval */
  
    .bs1__dot-m, .bs1__br-m { display: inline; }
  
    .bs1__dot-d { display: none; }
  
    .bs1__wrap { max-width: 100%; padding-inline: 20px; }
  
    .bs1__rows { gap: 60px; }
  
    .bs1__row { flex-direction: column; align-items: stretch; gap: 20px; }
  
    .bs1__stat { width: auto; }
  
    .bs1__num { font-size: 34px; }
  
    .bs1__share { margin-top: 30px; }
  
    .bs1__closerow { min-height: 0; display: flex; flex-direction: column; gap: 24px; margin-top: 40px; }
  
    .bs1__photo { position: relative; right: auto; top: auto; width: 260px; margin: 0 auto; }
  
    .bs1__caption { position: relative; left: auto; top: auto; width: 100%; font-size: 22px; }
  
    /* Bug: .bs1__px's breedte komt van chart-blocks.js (gedeeld over cluster-1/2/3,
  
       niet hier aan te passen) als vaste (n+2)*24px — voor de --n:8 rij (26%) is
  
       dat 240px, wat op de smalle mobiele rij nagenoeg de hele .bs1__viz opeet en
  
       .bs1__tally naar 0 breedte duwt (onzichtbaar, tegen de ref die een duidelijk
  
       kleinere blokgroep + zichtbare tally-lijn toont). Puur visuele verkleining
  
       via transform (geen JS/shared-bestand nodig) + een negatieve margin-right zodat
  
       de flex-rij ook echt minder ruimte reserveert: de layout houdt (n+2)*24px
  
       aan terwijl er na het schalen maar 60% van zichtbaar is, dus de rest moet
  
       eraf. Rekende eerder vanaf een margin-right: 40px op de desktopregel; die is
  
       weggehaald toen het hoofd over de balk ging vallen, dus die 40px is hier ook
  
       verdwenen. */
  
    .bs1__px { transform: scale(0.6); transform-origin: top left;
  
      margin-right: calc((var(--n) + 2) * -9.6px); }

  /* cluster-3/sections/07-signal2/07-signal2.css */
  .bs2 { padding: 44px 0 50px; }
    /* mark-lime als opgeschoven blok + "Signal 2 ·" met regelval (zoals bs1) */
    .bs2__title .mark-lime {
      background-image: linear-gradient(180deg, var(--lime) 0 70%, transparent 70%);
    }
    .bs2__dot-m, .bs2__br-m { display: inline; }
    .bs2__dot-d { display: none; }
    .bs2__wrap { max-width: 100%; padding-inline: 20px; }
    /* reference shows the photo sitting ABOVE the card (overlapping its top-left
       corner along with the quote mark), not below it — reorder via flex instead
       of touching source order/desktop rules */
    .bs2__quotewrap { min-height: 0; display: flex; flex-direction: column; }
    .bs2__photo { position: relative; right: auto; top: 80px; width: 170px; display: block; order: -1; margin: 0 20px 20px auto; }
    .bs2__qm { position: relative; left: auto; top: auto; margin: 0 0 -20px; }
    .bs2__card { padding: 56px 24px 24px; }

  /* cluster-3/sections/08-signal3/08-signal3.css */
  .bs3 { padding: 40px 0 40px; }
    /* mark als opgeschoven blok + "Signal 3 ·" met regelval (zoals bs1) */
    .bs3__title .mark {
      background-image: linear-gradient(180deg, var(--pink-marker) 0 70%, transparent 70%);
    }
    .bs3__dot-m, .bs3__br-m { display: inline; }
    .bs3__dot-d { display: none; }
    .bs3__container { width: 100%; padding: 0; margin: 0; }
    .bs3__wrap { max-width: 100%; padding-inline: 20px; }
  
    /* q1: mobile reference shows the light-blue quote card first, then the
       group photo as its own standalone rotated image below (no overlap) */
    .bs3__q1 { min-height: 0; display: flex; flex-direction: column; }
    .bs3__q1card { margin: 0; padding: 34px 22px; }
    .bs3__q1photo { position: relative; left: auto; top: auto; width: 220px; display: block; order: 1; margin: 30px auto 0; }
  
    /* expert card: qm doodle had no mobile position at all (still using the
       desktop absolute top:-46px, which floats disconnected above the photo
       instead of sitting beside it) — align it with the photo's band */
    .bs3__qm { position: absolute; left: 6px; top: 50px; }
    .bs3__photo { position: relative; right: auto; top: auto; width: 120px; height: 150px; display: block; margin: 0 -20px -16px auto; }
    .bs3__arrow { display: none; }
    .bs3__card { padding: 42px 22px 26px; }
    /* reference moves the EXPERT sticker to the bottom-RIGHT on mobile (desktop
       has it bottom-left) — keeping it left collided with the figcaption text */
    .bs3__sticker { left: auto; right: 0; bottom: -26px; width: 110px; }
    /* the reused cluster-2 figcaption ("Yvette Ammerlaan, Expert in NextGen from
       Ormit Talent NL") wraps to 2 lines at this width, and its 2nd line sat
       under the sticker's footprint — same fix cluster-2's own mobile pass used
       for this exact collision: give the figcaption breathing room instead of
       moving/shrinking the sticker. */
    .bs3__card figcaption { padding-right: 110px; }

  /* cluster-3/sections/09-signal4/09-signal4.css */
  .bs4 { padding: 60px 0 50px; }
  
    /* mark als opgeschoven blok + "Signal 4 ·" met regelval (zoals bs1) */
  
    .bs4__title .mark {
  
      background-image: linear-gradient(180deg, var(--pink-marker) 0 70%, transparent 70%);
  
    }
  
    .bs4__dot-m, .bs4__br-m { display: inline; }
  
    .bs4__dot-d { display: none; }
  
    /* 3x3 tegels van 32px (1 + 2 = 3, zoals het standaard mobiele raster op de
  
       zusterpagina's). De -160px-randoffsets van desktop horen bij de grote
  
       240/320-box; het 96px-blok zou daarmee helemaal buiten de sectie vallen
  
       (en overflow-clip maakt 'm dan onzichtbaar) — half over de rand, net als
  
       desktop, is hier -48px. */
  
    .bs4__grid { --tg-cols-m: 1; --tg-rows-m: 1; --tg-cell-m: 32px; }
  
    .bs4__grid--tl { top: -48px; }
  
    .bs4__grid--br { bottom: -48px; }
  
    .bs4__wrap { max-width: 100%; padding-inline: 20px; }
  
    .bs4__h3 { font-size: 24px; }
  
    .bs4__card { padding: 36px 24px 24px; }
  
    /* reference has the eyes doodle overlapping the card's BOTTOM-right corner
  
       (near the divider above the attribution line), not the top — desktop
  
       positions it with `bottom`, the mobile override had flipped it to `top` */
  
    .bs4__eyes {         bottom: 0px;
  
          right: -18px;
  
          top: auto;
  
          width: 90px; }

  /* cluster-3/sections/10-chart/10-chart.css */
  .bch { padding: 60px 0 60px; }
  
    .bch__wrap { max-width: 100%; padding-inline: 20px; }
  
    .bch__sub { font-size: 22px; }
  
    .bch__head { font-size: 20px; }
  
    .bch__cards { grid-template-columns: 1fr; gap: 16px; }
  
    .bch__card { padding: 10px; gap: 20px; }
  
    .bch__vizbox { padding: 10px; }
  
    .bch__row { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 30px; }
  
    .bch__stat { width: auto; }

  /* cluster-3/sections/11-pov/11-pov.css */
  .bpv { padding: 60px 0 50px; }
  
    .bpv__wrap { max-width: 100%; padding-inline: 20px; }
  
    .bpv__h3 { font-size: 24px; }
  
    /* Figma mobile (cluster3-m.png): cards stay individually tilted and stacked in normal flow
  
       (not flattened), true card width measured ~336px via rotated-AABB regression against the
  
       ref export (336*cos+H*sin fit for all 3 cards); bumped to 345px so "The work itself." still
  
       fits on one line at our actual font metrics (Chrome vs Figma text-measurement differs
  
       slightly) — resulting AABB gutter (~14-17px) is close to the ref's ~20px. Centered,
  
       text-align:center, nearly touching (~0 gap — rotated corners overlap by a few px on their
  
       own in the ref). Rotation direction differs from desktop for "context" (flips to match the
  
       CCW/CW/CCW zigzag rhythm the mobile stack uses; angles re-measured from the ref, not reused
  
       from desktop's -4/2/5deg). */
  
    .bpv__cards { position: static; height: auto; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 28px; }
  
    .bpv__card { position: relative; left: auto !important; top: auto !important; width: 345px; max-width: 88%; text-align: center; }
  
    .bpv__card--market  { rotate: -6deg; }
  
    .bpv__card--work    { rotate: 8deg; }
  
    .bpv__card--context { rotate: -6deg; }

  /* cluster-3/sections/12-means/12-means.css */
  .cme__wrap { margin: 0; max-width: 100%; padding: 0 20px; }
  
       .cme__title, .cme__lead { padding-inline: 0; }
  
       /* Figma mobile (2743:10393) keeps h2 at 36px, same as desktop — do not shrink to 28px */
  
       .cme__lead { margin-top: 16px; }
  
       /* Figma mobile (2743:10395): card bleeds 10px from viewport edge (wider than the 20px
  
          title/lead column), with only 10px of its own internal padding — confirmed via badge
  
          offset math (right:6px/top:-32px lines up with a 382px-wide card). margin-top 60px
  
          (not desktop's 100px) confirmed via header-to-card gap in the mobile frame. */
  
       .cme__recap { padding: 10px; margin-inline: -10px; margin-top: 60px; }
  
       .cme__badge { left: auto; right: 6px; top: -32px; width: 119px; height: 57px; transform: rotate(15deg); }
  
       .cme__tabs { flex-direction: column; align-items: stretch; gap: 10px; padding-bottom: 0; margin-bottom: 20px; }
  
       /* Figma mobile (2743:10411/2743:10413): both tab rows are full-width sharp rectangles,
  
          no pill radius (unlike desktop's 24px pill) */
  
       .cme__tab { text-align: center; border-radius: 0; }

  /* cluster-3/sections/13-readnext/13-readnext.css */
  /* mobiel: één kaart tegelijk in beeld; met de pijlen ga je naar de
  
       volgende. Op desktop staan er twee (zie de n + 3 hierboven). */
  
    .crn__card:nth-child(n + 2) { display: none; }
  
  
  
       /* Figma mobiel (2743:10476/2743:10477): zowel het "Read next"-label als de kaart
  
          bleeden tot 10px vanaf de viewport-rand (niet de gebruikelijke 20px tekstgutter) —
  
          bevestigd via get_metadata (beide frames: x=10 van 402px breed root). */
  
       .crn__wrap { padding-inline: 10px; }
  
       /* Figma mobiel (2743:10474/2743:10475): "Read next" label is 10px/medium met
  
          letter-spacing 1.32px, niet de desktop 16px. */
  
       .crn__over { font-size: var(--fs-overline); letter-spacing: 1.32px; line-height: 1.7;
  
         padding: 0 0 10px; margin: 0 0 16px; }
  
       /* Figma mobiel (2743:10487, "read-on-card"): pt 0 / px 16 / pb 16, niet de desktop 24px/28px. */
  
       .crn__body { padding: 0 16px 16px; }
  
       /* Figma mobiel (2743:8317) toont maar 1 kaart tegelijk (swipeable carrousel,
  
          frame is maar ~480px hoog — geen ruimte voor 2 gestapelde kaarten).
  
          .crn__nav-pijlen hebben nog geen JS-koppeling (ook niet op desktop), dus
  
          hier CSS-only horizontale scroll-snap i.p.v. nieuwe JS-interactie. */
  
       .crn__grid { grid-template-columns: unset; display: flex; gap: 20px;
  
         overflow-x: auto; scroll-snap-type: x mandatory;
  
         -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  
       .crn__grid::-webkit-scrollbar { display: none; }
  
       .crn__card { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }

  /* cluster-3/sections/14-panel/14-panel.css */
  .cgz { padding: 40px 0 50px; min-height: 0; }
       .cgz__wrap { min-height: 0; display: flex; flex-direction: column-reverse; gap: 20px; }
       .cgz__lead { position: relative; left: auto; bottom: auto; font-size: 32px; max-width: none; }
       .cgz__video { position: relative; right: auto; top: auto; width: calc(100% + 12px);
         aspect-ratio: 402 / 582; margin: 0 -6px; }
       .cgz__video-stroke--back { left: -5%; top: 4%; width: 108%; height: 68%; }
       .cgz__video-card { left: 24.5%; top: 14%; width: 53%; border-radius: 8px; }
       .cgz__video-stroke--front { left: -7%; top: 45%; width: 105%; height: 40%; }
       .cgz__video-cta { left: 14%; top: 60%; width: 60%; }
       .cgz__video-play { width: 28%; }
       .cgz__video-label { margin-top: -2px; font-size: 16px; }

  /* dataroom/sections/04-different/04-different.css */
  .drd { padding: 335px 32px 60px; display: flex; flex-direction: column;    background-size: cover; }
  
    .drd__wrap { padding-inline: 0; }
  
    .drd__title { font-size: 36px; margin: 0 0 10px; }
  
    .drd__body strong { font-size: 24px; }
  
    .drd__glow { left: 50%; top: 270px; width: 1920px; height: 592px; transform: translateX(-50%); }
  
    .drd__photo {
  
            position: absolute;
  
          right: -13.144px;
  
          top: -274.804px;
  
          left: auto;
  
          width: 100%;
  
          max-width: 179px;
  
          margin: 0 auto 51px;
  
          order: -1;
  
          transform: rotate(9deg);
  
    }
  
    .drd__photo img { box-shadow: -11px 18px 39.1px 0 #8dadee; }

  /* dataroom/sections/05-behind/05-behind.css */
  /* het vierkante Ormit-logo staat niet in het mobiele ontwerp */
  
    .drb__logo { display: none; }
  
    .drb__topstrip {
  
     
  
      background: url("https://7196611.fs1.hubspotusercontent-na1.net/hubfs/7196611/raw_assets/public/ormit-nextgen-2026-08-02/images/dataroom/dr-behind-topstrip-mobile.svg") left top / 100% 100% no-repeat;
      top: 50px; 
  
      height: 32px;
  
  }
  
    .drb__photo img{
  
      width: 100%; height: auto;
  
      aspect-ratio: 203.95 / 249.19;
  
      transform: none;
  
      margin-left: 0;
  
    }
  
    /* Re-verified against Figma mobile node 2989:8854: .drb__band's DESKTOP width
  
       (calc(100% - 80px), for topstrip/notch clearance) and margin:auto were leaking into
  
       mobile unchanged, double-inset with this rule's own 20px padding. Two real bugs from
  
       that: (1) the #cedeff fill (painted via ::before, which is left:0/right:0 relative to
  
       THIS element) only covered the inset 322px band, leaving a 40px white strip down each
  
       edge instead of true full-bleed; (2) content (title/body/links/photo) sat 60px in from
  
       the edge instead of Figma's actual 32px gutter (confirmed exactly: Figma's content
  
       frame is x=32, width=338, on the 402-wide mobile frame — 32+338+32=402). Fixed by
  
       resetting width/margin here so the band is full-bleed and padding alone sets the gutter. */
  
    .drb__band { width: 100%; margin: 0; padding:150px 0px 0; padding-bottom: 48px !important;  }
  
    /* Mobiel ontwerp heeft bovenaan wél de pixelovergang gekregen (nieuwere versie dan
  
       de eerdere check op 2989:8854): 50px wit, dan de 32px-strip (.drb__topstrip op
  
       top:50 hierboven), en pas daaronder de blauwe vulling — dezelfde opbouw als
  
       03-methods mobiel, in dit bandblauw. De onderband houdt z'n volledige vulling
  
       (de botstrip hangt daar onderaan). */
  
    /* de ticker staat op wit tussen de twee blauwe banden (mobiel ontwerp):
  
       de bovenband stopt 24px vóór z'n onderrand, de onderband begint 16px
  
       ná z'n bovenrand — de sectie-achtergrond (wit) vult de kieren. */
  
    .drb__band.drb__band__top::before { top: 82px; bottom: 0px; background: #cedeff; }
  
    .drb__band.drb__band__bottom::before { top: 0px; bottom: 32px; background: #cedeff; }
  
    .drb__band.drb__band__bottom { padding-top: 30px; }
  
    /* witte notches aan de blauwe bovenrand: zelfde groep als .drm__notch mobiel
  
       (2989:8818), alleen 82px omlaag omdat de vulling hier op y82 begint */
  
    .drb__notch--1 { right: 48.61px;  top: 94.79px; width: 14.5px;  height: 14.5px; }
  
    .drb__notch--2 { right: 115.68px; top: 82px;    width: 15.93px; height: 15.57px; }
  
    .drb__notch--3 { right: 63.11px;  top: 82px;    width: 36.61px; height: 27.29px; }
  
    /* Figma still shows a grid crosshatch sliver bleeding off the right edge, behind the
  
       logo/photo block — small and mostly cropped, but not fully hidden like before.
  
       Recomputed right/top/size from Figma's real grid node (x=361, y=740 section-relative,
  
       320x320) now that .drb__band above is full-bleed (402px) instead of the old buggy
  
       322px — the old -110px/720px/200x200 values were tuned against that narrower,
  
       incorrect containing block and would land in the wrong place now. */
  
    /* groen raster achter het fotoblok (mobiel ontwerp): 6x8 tegels van 32px,
  
       rechtsonder in de band, niet meer geroteerd — de foto valt eroverheen. */
  
    .drb__grid {
  
      display: block;
  
      --tg-cols-m: 8; --tg-rows-m: 8; --tg-cell-m: 32px;
  
      transform: none;
  
      right: 12px;
  
      top: 870px;
  
      opacity: 1;
  
      z-index: 0;
  
    }
  
    /* .drb__wrap is display:flex zonder richting, dus een RIJ. De regel hier zette
  
       grid-template-columns, en dat doet op een flexbox helemaal niets — daardoor
  
       stonden titel, tekst, logo en foto naast elkaar geperst op 402px breed.
  
       flex-direction: column is wat hier nodig is. */
  
    .drb__wrap { flex-direction: column; text-align: left; gap: 40px; padding-bottom: 60px; }
  
  
  
    /* Figma mobile keeps the heading at the SAME 36px as desktop (confirmed by the pink
  
       mark under "Who's" being the identical 144px width on both breakpoints) — it just
  
       wraps to 2 lines ("Who's behind" / "this") in the narrower column. No size override. */
  
  
  
    /* Figma mobile order (top to bottom): title+body+links, THEN the logo grouped directly
  
       on top of the team photo (logo overlapping the photo's top-left corner) at the very
  
       bottom of the section — NOT logo-first like the current DOM-order rendering. Pure
  
       CSS reorder via `order` (DOM/reading order in dataroom.html is unchanged). */
  
    .drb__col { order: 1; }
  
    /* left/top moeten mee terug: op desktop staat dit logo absoluut op
  
       left: 200px; top: 300px. Alleen position omzetten naar relative laat die
  
       twee gewoon gelden, en dan schuift het logo 200px naar rechts — midden
  
       in de lopende tekst. Zelfde soort restant als bij .drb__photo. */
  
    /* .drb__band is een gewoon blok, geen flexbox — order deed hier dus nooit
  
       iets. Het logo, de wrap en de foto zijn broers en volgen gewoon de
  
       documentvolgorde. De -78px trok de kop over het logo heen; op desktop is
  
       dat een subtiele overlap, maar op 402px is de kop twee regels en verdwijnt
  
       het logo er volledig onder. Hier dus gewoon ruimte ertussen. */
  
    .drb__logo {
  
      position: relative; left: auto; top: auto;
  
      z-index: 2; width: 104px;
  
      margin: 0 0 12px; pointer-events: none;
  
    }
  
    /* position terug naar relative: op desktop staat deze foto absoluut
  
       (right: 80px; top: 290px), en zonder reset blijft dat op mobiel gelden.
  
       Dan valt hij over de lopende tekst heen en is die onleesbaar — order: 3
  
       doet daar niets aan, want dat werkt alleen op elementen in de flow. */
  
    .drb__photo {
  
      position: relative; right: auto; top: auto;
  
      order: 3; transform: rotate(7deg);
  
      width: 204px; max-width: none;
  
      margin: 40px 26px 40px auto;
  
    }
  
    /* wordmerk "ormit talent" linksboven overlappend op de foto (mobiel ontwerp).
  
       Als ::before van de foto zodat hij met de flow-positie van de foto meegaat;
  
       tegenrotatie zodat het merk recht staat terwijl de foto 7 graden helt. */
  
    .drb__photo::before {
  
      content: ""; position: absolute; z-index: 2;
  
      left: -118px; top: -12px; width: 104px; height: 104px;
  
      background: url("https://7196611.fs1.hubspotusercontent-na1.net/hubfs/7196611/raw_assets/public/ormit-nextgen-2026-08-02/images/dataroom/square-logo-black-transparant.png") center / contain no-repeat;
      transform: rotate(-7deg);
  
    }
  
    /* Re-verified size against Figma mobile node 2989:8944 (the sticker artwork's own
  
       rotated bounding box): back-solving the unrotated box from that bbox at this section's
  
       actual mobile photo-rotation (7deg, since .drb__sticker has no rotate of its own and
  
       only inherits .drb__photo's) lands within ~2% of the desktop-inherited 220.086x121.602
  
       already in force here — i.e. Figma keeps this sticker the same absolute pixel size at
  
       both breakpoints, just repositioned. No width/height override needed, left/bottom only. */
  
    .drb__sticker { left: -136px; bottom: -82px; margin-left: 0px !important;}
  
  
  
    /* Figma mobile swaps chip order to BE, then NL (desktop is NL, then BE). The chips are
  
       too wide to sit side by side at this width and wrap onto their own line each, so
  
       row-reverse has no visible effect (only 1 item per line) — use column-reverse instead,
  
       which actually flips DOM-first(NL)/DOM-second(BE) into the desired BE-on-top stack. */
  
    .drb__links {        flex-wrap: wrap;
  
      flex-direction: column-reverse;
  
      align-items: flex-start;
  
      gap: 50px;
  
      margin-left: 30px;
  
      margin-top: 60px; }
  
    .drb__ticker span { font-size: 13px; }
  
  
  
    .drb__botstrip {
  
      position: absolute;
  
      transform: rotate(0deg);
  
      bottom: 0;
  
      left: 0;
  
      right: 0;
  
      height: 32px;
  
      z-index: 0;
  
      background: url("https://7196611.fs1.hubspotusercontent-na1.net/hubfs/7196611/raw_assets/public/ormit-nextgen-2026-08-02/images/dataroom/dr-behind-botstrip-mobile.svg") top left / 100% 100% no-repeat;
  }

  /* dataroom/sections/06-cite/06-cite.css */
  /* Re-verified gutter against Figma mobile node 2989:9333 (get_metadata): the title/body
  
       text frame sits at x=32, width=338 on the 402-wide mobile frame (32+338+32=402) — a
  
       32px gutter, not the 20px this rule had. Same 32px pattern independently confirmed on
  
       05-behind's mobile frame, so this isn't a one-off. */
  
    .drc { padding: 60px 32px 80px;         background-size: cover;}
  
    /* Mobiel grid per Figma-node 2989:9335 (6+2 tegels van 32px, rechts over
  
       de rand gebleed). Het ontwerp: de bovenste horizontaal en de eerste
  
       verticaal zijn meteen de rand (geen losse lijneinden erbovenuit of
  
       erlinksuit), rechts lopen de lijnen tegen de schermrand aan en alleen
  
       onder hangen de verticalen open onder de laatste horizontaal uit.
  
       De tgrid heeft boven en links altijd een open tegel vóór de eerste
  
       lijn — die zones knipt de clip-path weg (inset = tegelmaat - lijndikte),
  
       en top/right zijn een tegel gecompenseerd zodat de zichtbare lijnen op
  
       de ontwerppositie blijven: eerste verticaal ~306, laatste exact op de
  
       402-rand, bovenlijn op ~y50. transform: none i.p.v. de desktop-180°,
  
       zodat boven/onder niet spiegelen. */
  
    .drc__grid { display: block;
  
      --tg-cols-m: 6; --tg-rows-m: 6; --tg-cell-m: 32px;
  
      right: -128px;
  
      top: 19px;
  
      transform: none;
  
      
  
      opacity: 1; }
  
    .drc__wrap { padding-inline: 0; }
  
    /* Figma mobile title stays 36px too (mark widths are pixel-identical to desktop) */
  
    /* Re-verified against Figma mobile node 2989:9333: the photo sits left-bled (bbox
  
       x=-17, i.e. nearly flush with the true left edge, slightly cropped), NOT centered —
  
       confirmed live-rendered .drc__photo was landing dead-center (its midpoint matched the
  
       viewport's midpoint exactly), a real, visible mismatch. Swapped auto-centering for a
  
       left-bleed margin instead. */
  
    .drc__photo {
  
      position: relative;
  
      left: auto;
  
      top: auto;
  
      width: 100%;
  
      max-width: 210px;
  
      margin: 0 0 80px -30px;
  
      display: block;
  
    }
  
    /* Figma-only: photo carries its own pink glow shadow at mobile (desktop relies on
  
       the ambient .drc__glow blob instead). Also: the desktop rule's explicit
  
       width:250.79px/height:306.426px/margin-top:130px on the <img> were leaking into
  
       mobile unreset — global `img{max-width:100%}` (css/base.css) was already capping the
  
       rendered width to the 210px container, but the explicit height stayed at the desktop
  
       306.426px (ignoring aspect-ratio, since an explicit height beats aspect-ratio) and the
  
       130px top margin was still pushing the photo down inside its own box — confirmed live
  
       via computed styles (marginTop:130px, height:306.4px despite a 210px-wide box). Reset
  
       both here so the image actually fills its mobile box at the correct aspect ratio. */
  
    .drc__photo img {
  
      width: 100%; height: auto; margin-top: 0;
  
      box-shadow: -11px 18px 39px 0 var(--pink-marker);
  
    }
}

/* Homepage, loyalty and early dataroom modules already cover portrait tablet.
   Reuse those same rules only for landscape touch devices. */
@media (min-width: 1024px) and (max-width: 1366.98px) and (any-pointer: coarse) {
  /* sections/01-hero/01-hero.css */
  .hero { overflow-x: clip; overflow-y: visible; }
  
    .hero__bg {
  
      /* roze glow rond de titel, alleen de bovenste helft: onder ~y790 zuiver wit,
  
         zodat grid + pixel-golf op wit staan (Figma 2743:5416). Laatste stop is
  
         echt #fff — buiten de ellips blijft het wit op élke schermbreedte. */
  
      background: radial-gradient(100% 50% at 50% 40%,
  
                  #ffc2fb 0%, #ffc9fa 35%, #ffd9f9 60%, #ffeafd 80%, #ffffff 96%);
  
      background-size: auto;
  
    }
  
    /* vaste 402-stage, gecentreerd — schaalt als één geheel vanuit het midden
  
       (js/main.js zet zoom = breedte/402 onder 402px; daarboven 402 gecentreerd),
  
       net als de 1920-desktopstage. Zonder JS: 402 gecentreerd, hero clipt de randen. */
  
    .hero__stage {
  
      width: 402px; height: 900px;
  
      margin-inline: auto;
  
      padding: 0 20px;
  
    }
  
    .hero__grid, .hero__photo--cluster, .hero__sticker--recline, .hero__px--br, .hero__accents-d { display: none; }
  
    /* grid + groene golf als één complete SVG op Figma-positie (0,782), 402x252 */
  
    .hero__gridwave { display: block; left: -23px; top: 782px; width: 402px; height: 252px; z-index: 2; }
  
  
  
    /* kern — titel staat ~40% naar beneden (Figma 2743:5416), niet bovenaan geplakt */
  
    .hero__tag   { left: 21px; top: 359px; }
  
    .hero__title { left: 21px; top: 380px; right: 20px; white-space: normal;
  
                   font-size: 68px; line-height: 1.0; }  /* vast: schaalt mee met de stage-zoom */
  
    .hero__l2 { margin-top: -2px; }
  
  
  
    /* decoraties herplaatst voor smal scherm (Figma-volgorde: handshake boven titel) */
  
    .hero__ribbon { left: auto; right: 84px; top: 26px; width: 110px; height: 32px; transform: rotate(-45deg); }
  
    .hero__emoji--hand  { left: 161px; right: auto; top: 262px; width: 82px; }
  
    .hero__photo--tr    {         height: 111px;
  
      left: auto;
  
      right: -52px;
  
      top: 214px;
  
      width: 110px; }
  
    /* op dezelfde hoogte als --tr, aan de andere rand; het lime-paar --px--gtl
  
       staat op (49,147) en de handdruk op (161,262), dus hier is het vrij */
  
    .hero__photo--tl    { left: 8px; right: auto; top: 214px; width: 46px; height: 51px; }
  
    .hero__emoji--glass { left: auto; right: 74px;  top: 604px; width: 93px; }
  
    .hero__photo--bc    { display: none; }
  
    .hero__photo--cap   {         height: 180px;
  
      left: 20px;
  
      top: 566px;
  
      transform: rotate(26.57deg);
  
      width: 162px;}
  
    /* mobiel: 2 lime-paren (16x16), exact op Figma 2743:5416 */
  
    .hero__px--tr  { left: auto; right: 8px; top: 64px; }     /* paar rechtsboven (379,64) */
  
    .hero__px--gtl { left: 49px; top: 147px; }               /* paar links-midden (49,147) */

  /* sections/02-lime/02-lime.css */
  .lime { margin-top: -60px; overflow: visible; }  /* man-foto/sticker hangen onder de rand uit; .page clipt horizontaal */
  
    .lime__px { display: none; }          /* desktop-blokjes uit op mobiel */
  
    /* zwarte crosshatch linksboven + het losse blokje erin: desktop-decoratie.
  
       Op mobiel is er geen ruimte links van de kop en botst het met de golf die
  
       uit de hero doorloopt. */
  
    .lime__gridh--tl,
  
    .lime__gridv--tl,
  
    .lime__grid-blk { display: none; }
  
    /* pixel-golf: uniform 0.4x (viewBox 1760x80 -> 704x32) zodat de blokken vierkant 16px
  
       blijven i.p.v. uitgerekt. Loopt rechts buiten beeld (geклipt), links verankerd. */
  
    .lime__medge { display: block; position: absolute; left: 0; width: 704px; height: 32px; z-index: 1; }
  
    /* top-golf komt uit de hero__gridwave-SVG (Figma-exact); de 0.4x-desktopgolf
  
       tekende er dwars doorheen — uit dus */
  
    .lime__medge--top { display: none; }
  
    /* onderrand-golf komt van .lime__band::before/::after (volle breedte op elke
  
       maat); de 0.4x-desktopgolf dekte maar 704px en matcht het patroon niet */
  
    .lime__medge--bottom { display: none; }
  
    /* witte happen ín de bandonderkant (2 rijen van 16px) */
  
    .lime__band::before {
  
      content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px;
  
      background:
  
        linear-gradient(90deg, #fff 0 16px, transparent 16px 100%) 24px 0 / 128px 16px repeat-x,
  
        linear-gradient(90deg, #fff 0 16px, transparent 16px 100%) 0 16px / 64px 16px repeat-x;
  
    }
  
    /* lime trapjes ónder de band op wit (3 rijen, aflopend dichter -> los) */
  
    .lime__band::after {
  
      content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 48px;
  
      background:
  
        linear-gradient(90deg, var(--lime) 0 16px, transparent 16px 100%) 8px 0 / 32px 16px repeat-x,
  
        linear-gradient(90deg, var(--lime) 0 16px, transparent 16px 100%) 0 16px / 48px 16px repeat-x,
  
        linear-gradient(90deg, var(--lime) 0 16px, transparent 16px 100%) 16px 32px / 96px 16px repeat-x;
  
    }
  
    /* band start op de solid-rand van de gridwave (page y938 = lime y98):
  
       zo blijven de dichte golf-rijen (y906-938) écht gepixeld met witte gaten
  
       i.p.v. dichtgegoten door de band */
  
    .lime__band { top: 98px; height: calc(100% - 158px); }
  
    /* breder dan 402: golf-taal doorzetten naast de gecentreerde 402-stage
  
       (zelfde rij-hoogtes als de gridwave; op 402 zijn de stroken 0px breed) */
  
    /* z-index 0: ::after komt ná de stage in paint-volgorde — bij z 1 zou hij
  
       over de telefoonfoto (stage, z 1) heen tekenen */
  
    .lime::before, .lime::after {
  
      content: ""; position: absolute; top: 28px; height: 70px; z-index: 0;
  
      width: calc((100% - 402px) / 2);
  
      background:
  
        linear-gradient(90deg, var(--lime) 0 16px, transparent 16px 100%) 0 6px / 48px 16px repeat-x,
  
        linear-gradient(90deg, var(--lime) 0 16px, transparent 16px 100%) 8px 22px / 32px 16px repeat-x,
  
        linear-gradient(90deg, transparent 0 16px, var(--lime) 16px 100%) 0 38px / 80px 16px repeat-x,
  
        linear-gradient(90deg, transparent 0 16px, var(--lime) 16px 100%) 24px 54px / 128px 16px repeat-x;
  
    }
  
    .lime::before { left: 0; }
  
    .lime::after { right: 0; }
  
    .lime__edge--top { left: 0; width: 100%; height: 60px; }
  
    .lime__edge--bottom { top: auto; bottom: 0; width: 100%; height: 60px; }
  
  
  
    /* stage = kolom-flow; decoraties absoluut. Top-ruimte laat de telefoon vrij boven de kop. */
  
    .lime__stage {
  
      position: relative; width: 100%; height: auto;
  
      display: flex; flex-direction: column; align-items: stretch;
  
      padding: 210px 32px 90px;   /* Figma content-block px-[32px] */
  
    }
  
    .lime__grid, .lime__blk { display: none; }
  
  
  
    /* volgorde: kop -> anchors -> credo -> man */
  
    .lime__head    { position: static; width: 100%; order: 1; }
  
    .lime__anchors { position: static; width: 100%; order: 2; margin-top: 28px; }
  
    .lime__credo   {         
  
      position: static;
  
      left: auto;
  
      top: auto;
  
      width: 290px;
  
      order: 3;
  
      margin-top: 70px;
  
      margin-left: -30px;
  
      transform: rotate(-10deg);
  
      padding: 20px;
  
      gap: 9px;
  
      border-radius: 12px;
  
      margin-bottom: 40px;}
  
    .lime__credo-row { padding: 10px; }
  
    /* man-foto straddlet de onderrand (Figma: top op lime, rest op wit) —
  
       negatieve marge trekt de sectierand omhoog, foto hangt eronderuit */
  
    .lime__manwrap { position: relative; left: auto; top: auto; order: 5;
  
                     width: 168px; margin: 0 0 -190px 35%; transform: rotate(12.53deg); }
  
    /* dambord-trapjes naast de foto (Figma 2743:5455); tegen-rotatie houdt ze recht */
  
    .lime__manwrap::before, .lime__manwrap::after {
  
      display: none;
  
    }
  
    .lime__manwrap::before { display: none; }
  
    /* rechtsboven staat hij óp de lime-band -> witte cellen (Figma), anders lime-op-lime */
  
    .lime__manwrap::after  { right: -48px; top: -36px; width: 64px; height: 48px; z-index: -1;
  
      background: conic-gradient(#fff 25%, transparent 0 50%, #fff 0 75%, transparent 0);
  
      background-size: 32px 32px; }
  
    .lime__photo--man, .lime__photo--phone { border-radius: 10px; }  /* Figma mobiel radius 10 */
  
  
  
    .lime__title { font-size: clamp(24px, 7vw, 28px); letter-spacing: -0.01em; }
  
    .lime__text  { width: auto; }
  
    .lime__label { width: 60px; }          /* Figma mobiel: label-kolom 60px */
  
    /* mobiele divider: dunner (0.75px) en start ná het kleinere 28px-icoon (Figma) */
  
    .lime__anchor:first-child { padding-bottom: 8px; }
  
    .lime__anchor:first-child::after { left: 44px; border-bottom-width: 1px; }
  
    .lime__icon  { width: 28px; height: 28px; }  /* kleinere iconen op mobiel */
  
    .lime__photo--man { width: 168px; height: 182px; }
  
    /* FEEL GOOD volgt de kanteling van de foto (Figma mobiel ~+13°).
  
       left/top expliciet op auto: de desktop-regel (left 262/top 262) maakte
  
       de pill anders over-constrained -> 0 breed -> onzichtbaar op mobiel */
  
    .lime__feelgood {         left: auto;
  
      top: auto;
  
      right: -98px;
  
      bottom: 46px;
  
      transform: rotate(0.7deg);
  
      padding: 6px 12px; }
  
  
  
    /* telefoon rechtsboven, volledig zichtbaar BOVEN de kop (geen overlap, als Figma) */
  
    .lime__phone {
  
      position: absolute;
  
      right: 6px;
  
      top: -46px;
  
      left: auto;
  
      width: 132px;
  
      height: 228px;
  
      transform: rotate(-8.59deg);
  
      z-index: 5;
  
    }
  
    .lime__phone-shutter { width: 24px; height: 24px; bottom: 14px; }
  
    .lime__phone-shutter::after { width: 17px; height: 17px; }
  
    .lime__phone-dot { width: 7px; height: 7px; right: 11px; top: 9px; }
  
  
  
    /* gebogen pijl naar de credo-kaart (Figma mobiel 2743:5563: rechtsboven de kaart, wijst links-omlaag) */
  
    .lime__arrow {
  
      display: block;
  
      position: absolute;
  
      left: auto;
  
      right: 4px;
  
      top: 696px;
  
      width: 117px;
  
      transform: rotate(-36.01deg);
  
      z-index: 6;
  
      height: 90px;
  
    }
  
  
  
    /* handshake-sticker linksonder, NAAST de man-foto (Figma mobiel 2743:5566: rotate +15.95°, hangt over linkerrand) */
  
    .lime__sticker {         position: static;
  
      order: 4;
  
      width: 130px;
  
      align-self: flex-start;
  
      margin: 40px 0 -150px -59px;
  
      transform: rotate(15.95deg);
  
      z-index: 5;
  
      height: 100.354px;
  
      transform: rotate(15.953deg); }

  /* sections/03-stats/03-stats.css */
  .stats__stage {
  
      /* top 160: witruimte onder de lime-golf; de man-foto van 02-lime hangt
  
         ~100px de sectie in (Figma-m: 180px tussen golf en eyebrow) */
  
      width: 100%; height: auto; padding: 160px 20px 80px;
  
      display: flex; flex-direction: column; align-items: stretch;
  
    }
  
    .stats__stage > * { position: static; }
  
    .stats__grid { display: none; }   /* desktop-stage decoratie */
  
    .stats__intro { width: 100%; }
  
    .stats__title, .stats__title .serif { font-size: 44px; }
  
  
  
    /* Kaarten: eigen mobiele maten/rotaties in schermunits (Figma 2743:5570 —
  
       gemeten in ref: 70 = 296x306 op +13°, rechts; 43 = 340x330 op -13°, links) */
  
    .stats__card { position: relative; left: auto; top: auto; max-width: none; }
  
    .stats__card--70 {
  
      width: 90%;
  
      height: 330px;
  
      align-self: flex-end;
  
      transform: rotate(13deg);
  
      margin: 110px 10px 140px 0;
  
    }
  
    .stats__card--43 {
  
      width: 87%;
  
      height: 330px;
  
      align-self: flex-start;
  
      order: 1;
  
      transform: rotate(-13deg);
  
      margin: 24px 0 40px 30px;
  
    }
  
  
  
    /* 70-kaart: foto ÍN de kaart (linksboven), nummer ernaast,
  
       koffer rechtsonder op de rand (Figma) */
  
    .stats__photo {         left: 16px;
  
      top: 16px;
  
      width: 170px;
  
      height: 165px;
  
      transform: none;
  
      border-radius: 10px; }
  
    .stats__num--lime {              right: 12px;
  
      top: 30px;
  
      padding: 41px 24px;
  
      height: 144px;
  
      border-radius: 26px; }
  
    .stats__card--70 .stats__big { font-size: 74px; }
  
    .stats__num--lime .stats__pct { font-size: 30px; }
  
    .stats__card--70 .stats__cap { left: 24px; right: 78px; bottom: 60px; font-size: 24px; }
  
    .stats__badge { left: 24px; bottom: 18px; }
  
    .stats__briefcase {         
  
      right: -49px;
  
      bottom: 17px;
  
      width: 116px;
  
      transform: rotate(-28deg);
  
     }
  
  
  
    /* 43-kaart: nummer-box centraal, caption rechtsonder, ogen half over de
  
       linkerrand, roze px-paar op de rand */
  
    .stats__card--43 .stats__num { left: 86px; top: 26px; width: 208px; height: 170px; border-radius: 44px; }
  
    .stats__card--43 .stats__big { font-size: 76px; }
  
    .stats__card--43 .stats__pct { right: 20px; bottom: 42px; font-size: 36px; }
  
    .stats__card--43 .stats__cap { left: 120px; right: 22px; bottom: 20px; text-align: right; font-size: 28px; }
  
    .stats__eyes { left: -74px;
  
      top: auto;
  
      bottom: 16px;
  
      width: 160px; }
  
    .stats__px--a { left: -10px; top: 96px; }
  
    .stats__px--b { left: 6px; top: 112px; }
  
  
  
    /* mini-crosshatch in de tussenruimte, verankerd aan de 43-kaart
  
       (tegen-gedraaid zodat hij recht staat) */
  
    /* tabelraster 5x5 van 32px, alleen mobiel. Zelfde recept als .tgrid in
  
       css/page.css: de lijn wordt aan het EIND van elke tegel getekend en de box
  
       is precies één lijndikte kleiner dan 5 tegels, waardoor die vijfde lijn net
  
       buiten de box valt. Wat overblijft zijn vier binnenlijnen per richting —
  
       dus vijf vakjes en nergens een buitenrand, net als de hero-gridwave.
  
  
  
       Verving een raster van 96x72 met tegels van 24px, dat de randen openhield
  
       met background-position/-size. Die truc is hier niet meer nodig. */
  
    .stats__card--43::before {
  
      content: ""; position: absolute; left: 250px; top: -140px;
  
      --cel: 32px;
  
      --lijn: 1.2px;
  
      width: calc(5 * var(--cel) - var(--lijn));
  
      height: calc(5 * var(--cel) - var(--lijn));
  
      background-repeat: no-repeat;
  
      background-image:
  
        repeating-linear-gradient(to right,
  
          transparent 0 calc(var(--cel) - var(--lijn)),
  
          rgba(244,166,228,.75) calc(var(--cel) - var(--lijn)) var(--cel)),
  
        repeating-linear-gradient(to bottom,
  
          transparent 0 calc(var(--cel) - var(--lijn)),
  
          rgba(244,166,228,.75) calc(var(--cel) - var(--lijn)) var(--cel));
  
      transform: rotate(13deg); pointer-events: none;
  
    }
  
  
  
    /* CIAO / GOODBYE zweven in de tussenruimte: GOODBYE rechtsboven, CIAO linksonder */
  
    .stats__ciao, .stats__goodbye { position: relative; top: auto; right: auto; align-self: center; z-index: 3; }
  
    .stats__ciao { left: 0; margin: 28px 0 0;   font-size: 12px;  top: -30px;}
  
    .stats__goodbye {         left: 120px;
  
      font-size: 12px;
  
      margin: -44px 0 0;
  
      color: #000;
  
      top: -30px;}
  
  
  
    /* pijl van de 70- naar de 43-kaart, gedraaid de tussenruimte in
  
       (order: kaart-43 komt ná de pijl in de flow) */
  
    .stats__arrow {
  
  align-self: flex-start;
  
          display: block;
  
          height: 80px;
  
          left: 0;
  
          margin: -84px 0 -20px 30px;
  
          position: absolute;
  
          top: 1030px;
  
          transform: rotate(-315deg) scaleX(-1);
  
          width: 190px;
  
          z-index: 2;
  
    }

  /* sections/04-note/04-note.css */
  .note { margin-top: 0; }
    .note__stage {
      width: 100%; height: auto; padding: 20px 20px 48px;
      display: flex; flex-direction: column; align-items: center;
    }
    .note__stage > * { position: static; }
    /* Figma 2743:5645: geen foto op mobiel — de roze doodle is de achtergrond */
    .note__photowrap { display: none; }
    .note__px { display: none; }
    /* de twee papiervormen links en rechts naast het briefje: die liggen op de
       desktop-stage naast de kolom en vallen op mobiel buiten beeld of onder de
       tekst. De doodle hierboven doet de achtergrond al. */
    .note__note-left-bg,
    .note__note-right-bg { display: none; }
  
    /* roze pixel-doodle rechtsboven als achtergrond (loopt rechts uit beeld) */
    .note__squiggle {
      display: block;
      position: absolute;
      left: auto;
      right: -99px;
      top: -77px;
      width: 500px;
      z-index: 1;
    }
    /* bleek gelijnd papier achter de note, bijna vol-breed (alleen de flanken
       steken naast de note uit) */
    .note__strip {
      display: block; position: absolute;
      left: -30px; right: -30px; width: auto; top: 240px; height: 260px;
      transform: rotate(-1.5deg); z-index: 0;
    }
  
    .note__paper {
      position: relative;
      left: auto;
      top: auto;
      z-index: 1;
      width: 100%;
      max-width: 380px;
      height: 460px;
      margin-top: 200px;
      transform: rotate(-11deg);
    }
    .note__body { padding: 90px 35px 35px; }
    .note__title, .note__title .serif { font-size: 34px; }
    .note__btn { right: 14px; bottom: 32px; }
    /* folder rechts van de eyebrow houden: de png heeft een dekkend blokje
       dat de tekstregel anders afsnijdt */
    .note__folder { right: 18px; top: 50px; width: 90px; }
  
    /* pijl wél op mobiel: linksonder om de note heen, kop stopt vóór de knop */
    .note__arrow {
      display: block;
      left: -29px;
      top: auto;
      bottom: 76px;
      width: 145px;
      height: 85px;
    }
    .note__shape {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  /* sections/05-index/05-index.css */
  /* mobiel: één kaart tegelijk in beeld; met de pijlen ga je naar de
  
       volgende. Op desktop staan er twee (zie de n + 3 hierboven). */
  
    .idx-card:nth-child(n + 2) { display: none; }
  
  
  
    .index__grid { grid-template-columns: 1fr; gap: 44px; }
  
    .index__doodle { width: 130px; right: 16px; top: -30px; }
  
    .index__title, .index__title .serif { font-size: 32px; }
  
    .idx-card__media img { height: 280px; }
  
    .index__nav { justify-content: center; }
  
    .index__header {
  
      flex-direction: column;
  
  }
  
  .index__wrap {
  
    margin-inline: auto;
  
    padding-inline: 0;
  
  }
  
  
  
  .index {
  
    width: calc(100% - 20px);
  
    margin: auto;
  
  }

  /* sections/06-dark/06-dark.css */
  .dark { 
  
      width: calc(100% - 20px);
  
      margin: auto;
  
  }
  
    /* ---- gepixelde bovenrand + raster, ook op mobiel ----
  
       Stonden allebei op display:none. De desktop-posities zijn stuk voor stuk
  
       veelvouden van de blokmaat, gerekend vanaf de rand van de zwarte band
  
       (die op desktop 40px inspringt, hier 0 omdat .dark zelf al smaller is).
  
       Daardoor is het hele trapje één variabele: zet --dpx en de vorm klopt.
  
       16px is de mobiele --px-unit uit css/tokens.css, dezelfde maat als de
  
       blokjes in de hero-golf. */
  
    .dark { --dpx: 16px; }
  
    .dark__px {
  
      display: block;
  
      width: var(--dpx); height: var(--dpx);
  
    }
  
    .dark__px--tl1 { left: var(--dpx);                top: 0; }
  
    .dark__px--tl2 { left: 0;                         top: var(--dpx); }
  
    .dark__px--tr1 { right: 0;                        top: 0; }
  
    .dark__px--tr2 { right: calc(2 * var(--dpx));     top: 0; }
  
    .dark__px--tr3 { right: calc(3 * var(--dpx));     top: 0; }
  
    .dark__px--tr4 { right: var(--dpx);               top: var(--dpx); }
  
    .dark__px--tr5 { right: calc(4 * var(--dpx));     top: 0; }
  
    .dark__px--tr6 { right: calc(3 * var(--dpx));     top: var(--dpx); }
  
    .dark__px--tr7 { right: calc(4 * var(--dpx));     top: calc(2 * var(--dpx)); }
  
    .dark__px--tr8 { right: calc(5 * var(--dpx));     top: var(--dpx); }
  
  
  
    /* het raster erboven: smaller en met dezelfde tegelmaat als de blokjes.
  
       Zowel --tg-cols als --tg-cols-m, want de -m-varianten van .tgrid gelden
  
       pas onder 640px en deze query loopt tot 1024. */
  
    .dark__grid {
  
      display: block;
  
      --tg-cols: 4;   --tg-cols-m: 4;
  
      --tg-rows: 0;   --tg-rows-m: 0;
  
      --tg-cell: var(--dpx); --tg-cell-m: var(--dpx);
  
      --tg-left: 0;   --tg-left-m: 0;
  
      --tg-top: calc(-2 * var(--dpx)); --tg-top-m: calc(-2 * var(--dpx));
  
    }
  
    .dark__wrap { padding: 60px 20px 70px 20px;  }
  
    .dark__title,
    .dark__body { font-size: 26px; }
    /* foto zakt naar de overgang kop→body (rechts), zodat de heading leesbaar blijft */
  
    .dark__photowrap { right: 6px; top: 300px; width: 118px; height: 148px; }
  
    .dark::before { inset: 0; }
  
    /* (.dark__px stond hier op display:none — de blokjes zijn nu juist gewenst,
  
       zie het trapje hierboven) */
  
    .dark__photo--group { display: none; }
  
    .dark__target { left: auto;
  
      right: 22px;
  
      bottom: -54px;
  
      width: 136px;
  
      transform: rotate(4deg);}

  /* sections/07-follow/07-follow.css */
  .follow__grid { grid-template-columns: 1fr; gap: 32px; max-width: 400px; margin-inline: auto; }
  
    .follow__title, .follow__title .serif { font-size: 28px; }
  
    .follow__pill--start { right: -18px;
  
      top: auto;
  
      bottom: 20px;
  
      transform: rotate(-35deg);
  
      border-radius: 16px; }
  
    .follow { 
  
      width: calc(100% - 20px);
  
      margin: auto;
  
  }
  
  .follow__pill--likes {
  
    left: -35px;
  
    bottom: 150px;
  
    transform: rotate(-50deg);
  
  }
  
  .follow::after {
  
   display: none;
  
  }

  /* sections/08-cta/08-cta.css */
  .cta__px { display: none; }   /* desktop-decoratie */
  
  
  
    /* ---- hoekdecoratie rechtsonder, ook op mobiel ----
  
       Stond op display:none. Net als bij 06-dark is de hele tekening een
  
       veelvoud van één maat: op desktop 40px, hier 16px (de mobiele --px-unit).
  
       De rasters kunnen dat gewoon via --tg-cell, dus die blijven scherp — een
  
       transform: scale() over het geheel zou de lijnen juist onscherp maken en
  
       de pixelafronding in js/main.js omzeilen.
  
  
  
       De vier blokjes hebben hun maat en positie als INLINE style in de markup
  
       staan (homepage.html). Inline wint van een stylesheet, dus daar is
  
       !important de enige weg zonder de HTML te verbouwen. Vandaar dat het hier
  
       lelijker staat dan de rest. */
  
    .cta__deco {
  
      --u: 16px;
  
      right: 0px; bottom: 0;
  
      width: calc(5 * var(--u)); height: calc(5 * var(--u));
  
    }
  
    /* óók de -m-varianten van kolommen/rijen zetten: onder 640px valt .tgrid
  
       terug op zijn eigen standaard van 4x4 zodra je die niet opgeeft, en dan
  
       steekt het raster buiten deze doos uit. Zelfde aantallen als desktop,
  
       alleen een kleinere tegel. */
  
    .cta__deco-gridv {
  
      --tg-cell: var(--u); --tg-cell-m: var(--u);
  
      --tg-cols-m: 2; --tg-rows-m: 3;
  
    }
  
    .cta__deco-gridh {
  
      --tg-cell: var(--u); --tg-cell-m: var(--u);
  
      --tg-cols-m: 2; --tg-rows-m: 2;
  
    }
  
    /* b1 rechtsonder-boven, b2/b3 de trap, b4 de brede balk eronder */
  
    .cta__deco-b:nth-of-type(1) {
  
      right: 0 !important; bottom: calc(2 * var(--u)) !important;
  
      width: var(--u) !important; height: var(--u) !important;
  
    }
  
    .cta__deco-b:nth-of-type(2) {
  
      right: var(--u) !important; bottom: var(--u) !important;
  
      width: var(--u) !important; height: var(--u) !important;
  
    }
  
    .cta__deco-b:nth-of-type(3) {
  
      right: calc(2 * var(--u)) !important; bottom: var(--u) !important;
  
      width: var(--u) !important; height: var(--u) !important;
  
    }
  
    .cta__deco-b:nth-of-type(4) {
  
      right: calc(2 * var(--u)) !important; bottom: 0 !important;
  
      width: calc(3 * var(--u)) !important; height: var(--u) !important;
  
    }
  
    .cta::before { inset: 0; }
  
    .cta__btn { margin-right: 0; }
  
    .cta__wrap { flex-direction: column; align-items: flex-start; gap: 24px; padding: 40px 20px 56px; }
  
    .cta__title, .cta__title .serif { font-size: 32px; }
  
    /* pijl wél op mobiel: rechts naast de tekst, wijzend naar de knop
  
       linksonder. Dit is ook de pijl uit punt 10 van de motion-feedback ("enkel
  
       de pijl komt on scroll binnen") — met display:none deed die animatie op
  
       mobiel niets. */
  
    .cta__arrow {
  
      display: block;
  
      right: 16px; left: auto;
  
      top: auto; bottom: 64px;
  
      width: 120px; height: 96px;
  
      z-index: 1;
  
    }
  
    .cta__eyebrow { font-weight: 400;  } 
  
    .cta {  margin: 0 auto;   width: calc(100% - 20px); }

  /* loyalty/sections/01-hero/01-hero.css */
  .lh__stage { width: 402px; height: 2135px; }
  
  
  
    /* lime paneel vol-breed, y 660-2100 met fade */
  
    .lh__bg { left: 0; top: 660px; width: 402px; height: 1440px;
  
      background:
  
        radial-gradient(60% 30% at 55% 55%, rgba(255,255,255,.5), transparent 75%),
  
        linear-gradient(180deg, var(--lime) 0%, var(--lime) 88%, rgba(221,255,91,0) 100%); }
  
    .lh__wash { left: 0; top: 0; width: 402px; height: 700px;
  
      -webkit-mask: radial-gradient(60% 45% at 55% 38%, #000 45%, transparent 78%);
  
              mask: radial-gradient(60% 45% at 55% 38%, #000 45%, transparent 78%);
  
      background-image:
  
        repeating-linear-gradient(90deg, rgba(255,255,255,.65) 0 1.2px, transparent 1.2px 24px),
  
        repeating-linear-gradient(0deg,  rgba(255,255,255,.65) 0 1.2px, transparent 1.2px 24px),
  
        radial-gradient(60% 45% at 55% 38%, #ffdffe 0%, rgba(255,223,254,.75) 45%, rgba(255,223,254,0) 78%); }
  
  
  
    .lh__group { left: 10px; top: 76px; width: 382px; height: 230px; object-position: center 24%;     max-width: 70%;}
  
    /* native SVG-fill is roze (#FFB1FA); referentie-mobiel toont 'm donkergroen —
  
       zwart-silhouet-truc (brightness(0) saturate(100%)) + hex-gerichte recolor,
  
       empirisch getest tot ~#2a7f62 (41,131,109 vs doel 42,127,98) */
  
    .lh__puzzle { left: 232px; top: 192px; width: 115px; height: 80px;
  
       }
  
  
  
    .lh__card { left: 10px; top: 304px; width: 382px; padding: 30px 24px 40px; }
  
    .lh__card-title, .lh__card-title .serif { font-size: 44px; }
  
    .lh__card-sub { font-size: 15.5px; line-height: 1.5; max-width: none; margin-top: 20px; }
  
    .lh__card-meta { flex-wrap: wrap; white-space: normal; gap: 14px 24px; margin-top: 24px; font-size: 11px; }
  
    .lh__share { margin-left: 0; margin-top: 10px; }
  
  
  
    .lh__intro { left: 20px; top: 800px; width: 362px; }
  
    .lh__head, .lh__head .serif { font-size: 32px; }
  
    .lh__head .serif { display: block; }
  
    .lh__head br { display: none; }
  
  
  
    .lh__tabs { left: 20px; top: 1020px; width: 362px; padding-left: 0; display: block; text-align: center; }
  
    .lh__tab { display: block; width: 340px; margin: 0 auto; padding: 18px 26px; }
  
    /* actief-status volgt de klasse (JS wisselt die), niet de volgorde */
  
    .lh__tab:not(.lh__tab--on) { background: none; color: var(--ink); }
  
  
  
    .lh__stage-photo { left: 225px; top: 1250px; width: 340px; height: 230px; }
  
    .lh__pgrid { left: 5px; top: 50px; }  /* hele cellen; alle randen open, geen rand-lijn */
  
    .lh__photo { width: 190px; clip-path: none; }
  
    .lh__bubble { left: -195px; top: 240px; width: 340px; font-size: 15px; }
  
  
  
    .lh__module-bg {     width: 350px;     left: -215px;
  
      height: 220px; }
  
  
  
    .lh__carousel { left: 20px; top: 1580px; width: 362px; border-top: 0; }
  
  
  
    .lh__photo { width: 210px;     left: -130px; }
  
  
  
    .lh__outro { left: 20px; top: 1795px; width: 362px; }
  
    .lh__outro, .lh__outro .serif { font-size: 28px; }
  
    .lh__outro .serif { display: block; }
  
    .lh__outro br { display: none; }
  
  
  
    .lh__grid-bl { left: -10px; top: 2028px; }  /* hele cellen; alle randen open, geen rand-lijn */
  
    .lh__swoosh { display: none; }

  /* loyalty/sections/03-paradox/03-paradox.css */
  /* stage-achtergrond uit op mobiel; het 10px-ingesprongen paneel komt
  
       van een eigen ::before (desktop gebruikt geen ::before meer) */
  
    .lpar__stage { width: 402px; height: 1950px; background: none; }
  
    .lpar__stage::before { content: ""; position: absolute; left: 10px; top: 0;
  
      width: 382px; height: 100%; z-index: 0;
  
      background:
  
        radial-gradient(320px 300px at 40% 22%, rgba(255,170,248,.5), transparent 70%),
  
        linear-gradient(180deg, #ffdefd 0%, #ffdefd 62%, #fff0fe 84%, #fff8ff 100%); }
  
    .lpar__bg-top { left: -20px; top: -90px; width: 320px; }
  
    .lpar__bg-bottom { position: absolute;
  
      left: 60px;
  
      top: auto;
  
      width: 320px;
  
      height: auto;
  
      max-width: none;
  
      z-index: 1;
  
      pointer-events: none;
  
      bottom: 40px;}
  
    .lpar__wgrid { display: none; }
  
    /* consistent met alle andere grid-blokken: heldere, goed zichtbare
  
       lijnen (niet te vaag), hele cellen, alle randen open */
  
    .lpar__gridl {
  
      left: 300px; top: 555px;
  
    }
  
  
  
    .lpar__over { left: 16px; top: 60px; width: 370px; font-size: 12px; padding-bottom: 12px; }
  
  
  
    /* kleine tegen-tilt, zoals referentie — kaart en foto tikken licht schuin
  
       tegen elkaar in i.p.v. foto kaarsrecht naast de geroteerde kaart */
  
    .lpar__photo65 { left: 16px;
  
      top: 155px;
  
      width: 144px;
  
      height: 144px;
  
      transform: rotate(12deg); }
  
    .lpar__brief65 { left: 26px;
  
      top: 255px;
  
      width: 69px;
  
      transform: rotate(-5deg);}
  
  
  
    .lpar__card65 {        
  
      left: 32px;
  
      top: 240px;
  
      width: 334px;
  
      height: 310px;
  
      rotate: 12deg; }
  
    /* was font-size:72 + padding 10/20 — te breed, liep over de kaartrand */
  
    .lpar__num65 {        right: 20px;
  
      top: -6px;
  
      padding: 8px 16px;
  
      border-radius: 26.63px;
  
      width: 198px;
  
      height: 153px;
  
      font-size: 80px;
  
      transform: rotate(-13deg);
  
      align-items: center;
  
      justify-content: center;}
  
    .lpar__big65 { font-size: 80px; }
  
    .lpar__pct65 { font-size: 40px; margin-left: 3px; }
  
    .lpar__cap65 { left: 26px; top: 202px; width: 270px; font-size: 28px; }
  
    .lpar__badge65 { display: none; }
  
  
  
    /* was top:555 (helemaal bij CIAO/GOODBYE) — referentie toont 'm juist
  
       op de rechter-onderhoek van de groene kaart (kaart eindigt op y550) */
  
    .lpar__puzzle { left: 272px;
  
      top: 500px;
  
      width: 112px; }
  
    .lpar__arrow {     left: 0;
  
      top: 630px;
  
      width: 190px;
  
      height: 216px;
  
      margin: -84px 0 -20px 30px;
  
      transform: rotate(-315deg) scaleX(-1);}
  
  
  
    .lpar__goodbye {         left: 282px;
  
      top: 680px;
  
      font-size: 12px;
  
      padding: 8px 13px;
  
      transform: rotate(15deg); }
  
    .lpar__ciao {         left: 200px;
  
      top: 692px;
  
      font-size: 12px;
  
      padding: 8px 13px; }
  
  
  
    .lpar__card { left: 28px; top: 760px; width: 350px; height: 310px; rotate: -6deg; }
  
    .lpar__num { left: 71px; top: 30px; width: 208px; height: 170px; border-radius: 44px; }
  
    .lpar__big { font-size: 70px; }
  
    .lpar__pct { right: 26px; bottom: 40px; font-size: 36px; }
  
    /* referentie: bijschrift rechts uitgelijnd onder het cijferblok, niet
  
       gecentreerd over de volle kaartbreedte */
  
    .lpar__cap { left: 24px; right: 24px; bottom: 24px; font-size: 28px; text-align: right; }
  
    .lpar__eyes {         left: -40px;
  
      top: 170px;
  
      width: 83px; }
  
    .lpar__px--1 { left: 20px; top: 765px; }
  
    .lpar__px--2 { left: 36px; top: 781px; }
  
  
  
    .lpar__source { left: 0; top: 1135px; width: 402px; font-size: 12px; padding-inline: 40px; }
  
    .lpar__body {         left: 32px;
  
      top: 1200px;
  
      width: 340px;
  
      font-size: 14px;
  
      line-height: 1.35; }
  
    .lpar__body p { margin-bottom: 18px; }

  /* loyalty/sections/04-twosides/04-twosides.css */
  .lts__wrap { width: 402px; height: 1030px; }
  
    .lts__wrap::before { left: 0; width: 402px; }
  
    .lts__over { left: 16px; top: 16px; font-size: 10px; }
  
    .lts__title { left: 16px; top: 50px; width: 380px; font-size: 26px; }
  
    .lts__arrow { display: none; }
  
    /* was beide -4deg zonder overlap — referentie kantelt tegengesteld en
  
       laat de kaarten net in elkaar schuiven */
  
    .lts__card--org {        
  
       left: 32px;
  
      top: 205px;
  
      width: 318px;
  
      height: 390px;
  
      rotate: -4deg;
  
      padding: 34px 30px; }
  
    .lts__card--genz { 
  
      left: 35px;
  
      top: 572px;
  
      width: 318px;
  
      height: 390px;
  
      rotate: 8deg;
  
      padding: 30px 30px;
  
  
  
  
  
     }
  
    .lts__card-title { font-size: 24px; margin-bottom: 14px; }
  
    .lts__card--org .lts__card-title { font-size: 26px; }
  
    .lts__card-lead, .lts__card-stat { font-size: 15px; line-height: 1.3; }
  
    .lts__card-body { font-size: 15px; }

  /* loyalty/sections/05-companies/05-companies.css */
  .lco__stage { width: 402px; height: 3730px; }
    .lco__stage::before { left: 0; width: 402px; }
    .lco__text { left: 16px; top: 10px; width: 370px; }
    .lco__title { font-size: 26px; }
    .lco__body { font-size: 15px; line-height: 1.28; margin-top: 16px; }
  
    .lco__sequence { top: 500px; height: 3230px; }
    .lco__sticky { height: max(500px, var(--lco-screen-h, 100vh)); }
    .lco__grid { left: 310px; top: 5px; }
    .lco__bg-swouf { right: -40px; bottom: -90px; width: 440px; height: 440px; filter: blur(150px); }
  
    .lco__module-bg { left: 20px; top: 50%; width: 360px; transform: translateY(-50%); }
    .lco__photo {
      left: 74px; top: 50%; width: 254px; height: 360px;
      transform: translateY(-50%) rotate(-7deg); border-radius: 16px;
    }
  
    .lco__bubble { top: 0; width: 310px; min-height: 92px; padding: 17px 20px; }
    .lco__bubble strong { font-size: 17px; line-height: 1.15; }
    .lco__bubble em { margin-top: 7px; font-size: 10px; }
    .lco__bubble--blue { left: 10px; border-radius: 22px 22px 4px 22px; }
    .lco__bubble--white { right: 10px; border-radius: 22px 22px 22px 4px; }
    .lco__b1, .lco__b3, .lco__b5, .lco__b7, .lco__b9 { left: 10px; }
    .lco__b2, .lco__b4, .lco__b6, .lco__b8, .lco__b10 { right: 10px; }
  
    .lco__scroll {
      left: 154px; top: auto; bottom: 9px; writing-mode: horizontal-tb;
      transform: none; font-size: 10px;
    }
    .lco__scroll-arrow { left: 238px; top: auto; bottom: 5px; font-size: 16px; }

  /* loyalty/sections/06-quotes/06-quotes.css */
  .lqt__wrap { width: 402px; height: 60px; }
  
    .lqt__bubble { display: none; }
  
    .lqt__source { top: 10px; font-size: 12px; padding-inline: 40px; }

  /* loyalty/sections/07-expert/07-expert.css */
  .lex__wrap { width: 402px; height: 460px; }
  
    .lex__wrap::before { left: 0; width: 402px; }
  
    /* hele cellen; boven/onder open */
  
    /* rechtse grid — zelfde mirror-positie als de linker, ook op mobiel getoond */
  
    .lex__grid-br { left: 312px; top: 555px; }
  
    .lex__card { left: 10px; top: 55px; width: 382px; height: 470px; padding: 55px 30px 0; }
  
    .lex__quote { font-size: 16px; line-height: 1.3; }
  
    .lex__attr { margin-top: 24px; font-size: 10px; text-align: left; }
  
    .lex__photo {         
  
      left: 284px;
  
      top: -50px;
  
      width: 84px;
  
      height: 104px;
  
      border-radius: 10px; }
  
    .lex__arrow { display: none; }
  
    .lex__99 { left: 20px; top: -40px; width: 76px; height: 62px; }
  
    /* was width:60/hoogte-erfenis 61px (bijna vierkant, dus uitgerekt t.o.v.
  
       de 162:61-verhouding) — vergroot + hoogte proportioneel meegegeven,
  
       overlappend op de kaartrand-rechtsonder zoals referentie */
  
    .lex__sticker {         
  
      left: 226px;
  
      top: 308px;
  
      width: 149px;
  
      height: 56px;
  
      transform: rotate(18deg); }

  /* loyalty/sections/08-retention/08-retention.css */
  .lre__stage { width: 402px; height: 1025px; }
  
    .lre__stage::before { left: 10px; width: 382px; }
  
    .lre__stage::after { display: none; }
  
    /* was display:none — alle grid-blokken moeten ook op mobiel zichtbaar
  
       zijn, zelfde 24px-cellen-recept als elders */
  
    /* .lre__grid verwijderd: dat element bestaat niet in loyalty.html */
  
  .lre__module-bg {         left: -130px;
  
      top: 440px;
  
      width: 740px; }
  
    .lre__wrap {        left: 0;
  
      transform: none;
  
      top: 45px;
  
      width: 402px;
  
      padding-inline: 35px;
  
      text-align: left;}
  
    .lre__title, .lre__title .serif { font-size: 26px; }
  
    .lre__title .serif { display: block; }
  
    /* was margin:18px (top-only) — de basisregel "margin:28px auto 0" bleef
  
       links/rechts auto-centreren, vandaar de ongewenste inspringing */
  
    .lre__body { margin: 18px 0 0; max-width: 340px; }
  
    .lre__body > p,
    .lre__paragraph { font-size: 15px; line-height: 1.28; margin-bottom: 14px; }
    .lre__money { left: 255px; top: 445px; width: 100px; height: 100px; font-size: 0; }
  
    /* was width:178/font-size:15 — veel te klein t.o.v. referentie */
  
    .lre__card { left: 40px;
  
      top: 475px;
  
      width: 300px;
  
      height: auto;
  
      transform: rotate(3deg);
  
      padding: 24px 22px;}
  
    .lre__quote { font-size: 26px; line-height: 1.12; }
  
    .lre__trans { font-size: 12px; margin-top: 12px; }
  
    .lre__attr { font-size: 11px; margin-top: 12px; padding-top: 10px; }

  /* loyalty/sections/09-note/09-note.css */
  .lno__wrap { width: 402px; min-height: 1450px; padding: 55px 16px 90px; }
    .lno__wrap::before { content: ""; position: absolute; left: 330px; top: 10px; width: 74px; height: 130px;
      background-image:
        repeating-linear-gradient(90deg,  rgba(221,255,91,.95) 0 1.2px, transparent 1.2px 24px),
        repeating-linear-gradient(180deg, rgba(221,255,91,.95) 0 1.2px, transparent 1.2px 24px);
      background-repeat: no-repeat;
      background-position: 24px 24px;
      background-size: calc(100% - 48px) calc(100% - 48px); }  /* hele cellen; alle randen open, geen rand-lijn */
    .lno__h { width: 360px; margin: 0 0 64px; font-size: 26px; }
    .lno__band { width: 370px; min-height: 180px; padding: 38px 26px 28px; }
    .lno__band-quote { font-size: 16px; }
    .lno__band-attr { margin-top: 20px; font-size: 11px; }
    .lno__h2 { width: 370px; margin-top: 40px; font-size: 26px; }
    .lno__body { width: 370px; margin-top: 48px; }
    .lno__body > p,
    .lno__body-item { font-size: 15.5px; line-height: 1.28; margin-bottom: 16px; }

  /* loyalty/sections/10-contract/10-contract.css */
  .lct { z-index: 3; }
  
    .lct__stage { width: 402px; height: 1610px; }
  
    .lct__arrow { display: none; }
  
    .lct__card--org { left: 30px; top: 40px; width: 340px; height: auto; rotate: -3deg;
  
      padding: 30px 26px; z-index: 8;}
  
    .lct__card--org .lct__card-title { font-size: 24px; margin-bottom: 14px; }
  
    .lct__card--genz { left: 55px; top: 475px; width: 350px; height: auto; rotate: 8deg;
  
      padding: 34px 30px; }
  
    .lct__card--genz .lct__card-title { font-size: 28px; margin-bottom: 12px; }
  
    .lct__card-body { font-size: 16px; line-height: 1.3; }
  
    .lct__card--genz .lct__card-body { font-size: 16px; line-height: 1.28; }
  
    .lct__photo {         left: 55px;
  
      top: 1055px;
  
      width: 227px;
  
      height: 272px;
  
      border-radius: 20px;
  
      transform: rotate(-15deg);
  
  }
  
    .lct__close { left: 42px; top: 1380px; width: 340px; font-size: 16px; line-height: 1.25; }
  
    .lct__grid { display: none; }   /* desktop-decoratie; stond op left 330 / top 1525 */

  /* loyalty/sections/11-drivers/11-drivers.css */
  .ldr {
  
      position: relative;
  
      background: var(--white);
  
      overflow: visible;
  
      z-index: 9;
  
  }
  
    .ldr__stage { width: 402px; height: 1790px; }
  
    .ldr__stage::before { left: 10px; width: 382px;
  
      background: linear-gradient(161.34deg, #DDFF5B 64.56%, rgba(221, 255, 91, 0) 100%);
  
    }
  
    .ldr__arrow { display: none; }
  
    .ldr__wswoosh { width: 130px; bottom: -20px; }
  
  
  
    /* pixel-trapje op de kaartrand — mobiel-only toevoeging (desktop
  
       heeft dit niet meer, dus hier los opgebouwd i.p.v. via ::before/::after
  
       op de gedeelde .ldr__card-basisregel, om desktop niet te raken) */
  
    .ldr__card { overflow: visible; }
  
    
  
    .ldr__grid { left: 330px;         top: -40px;
  
      z-index: 9; }  /* hele cellen; alle randen open, geen rand-lijn */
  
    .ldr__title { left: 42px; top: 65px; width: 340px; text-align: left; font-size: 26px; }
  
    .ldr__intro { left: 42px; top: 108px; width: 330px; text-align: left; font-size: 16px; line-height: 1.22; }
  
    /* was top:650/920 — kaarten stonden los onder elkaar; referentie toont
  
       ze net in elkaar geschoven (lichte overlap), dichter op elkaar gezet */
  
    .ldr__card--manager  { left: 30px; top: 360px; width: 330px; height: auto; rotate: -6deg; }
  
    .ldr__card--growth   { left: 25px; top: 615px; width: 350px; height: auto; rotate: 6deg; }
  
    .ldr__card--belonging{ left: 25px;
  
      top: 848px;
  
      width: 350px;
  
      height: auto;
  
      rotate: -3deg; }
  
    .ldr__focus, .ldr__card--manager .ldr__focus { top: 45px; }
  
    .ldr__card--growth .ldr__focus { top: 55px; }
  
    .ldr__card--belonging .ldr__focus { top: 50px; }
  
    .ldr__ct, .ldr__card--manager .ldr__ct { top: 70px; font-size: 26px; }
  
    .ldr__card--growth .ldr__ct { top: 80px; font-size: 28px; }
  
    .ldr__card--belonging .ldr__ct { top: 75px; font-size: 28px; }
  
    .ldr__foot { padding-bottom: 0; }
  
    .ldr__icon--manager   {         left: 155px;
  
      top: 337px;
  
      width: 90px;
  
      transform: none;
  
      height: 64px;
  
      transform: rotate(-4deg);}
  
    .ldr__icon--growth    { left: 185px; top: 587px; width: 78px;         transform: rotate(10deg)}
  
    .ldr__icon--belonging { left: 150px; top: 838px; width: 80px; transform: none; }
  
    .ldr__close { left: 42px; top: 1180px; width: 330px; text-align: left; font-size: 16px; line-height: 1.25; }

  /* loyalty/sections/12-nuance/12-nuance.css */
  .lnu { 
  
      z-index: 10;
  
  }
  
    .lnu__wrap { width: 402px; height: 555px; }
  
    /* hele cellen; alle randen open, geen rand-lijn */
  
    .lnu__text { left: 38px; top: 440px; width: 310px; }
  
    .lnu__title { font-size: 16px; display: inline; }
  
    .lnu__sub { font-size: 16px; display: inline; margin: 0; }
  
    /* was media 345/foto 235 breed — veel kleiner dan referentie, die de
  
       foto/graphic bijna beeldvullend toont; fors vergroot */
  
    .lnu__media { left: 15px; top: 10px; width: 430px; height: 380px; }
  
    .lnu__stroke1 { left: -10px; top: 30px; width: 420px; }
  
    .lnu__stroke2 { left: 175px; top: 255px; width: 235px; }
  
    .lnu__photo { left: 15px; top: -10px; width: 305px; }
  
    .lnu__tgrid {
  
      --tg-top: -43px;
  
  }

  /* loyalty/sections/13-readon/13-readon.css */
  .lrd { 
  
      overflow: hidden;
  
  }
  
    .lrd__wrap { width: 402px; height: 740px; }
  
    .lrd__module-bg {         left: -30px;
  
      top: auto;
  
      width: 340px;
  
      bottom: -100px; }
  
    .lrd__head { left: 10px; top: 45px; width: 350px; padding-bottom: 12px; }
  
    .lrd__over { font-size: 14px; }
  
    /* carousel: één kaart tegelijk op hetzelfde slot; JS zet .is-front
  
       op de actieve kaart (zonder JS blijft de witte kaart staan) */
  
    .lrd__card { top: 85px; }
  
    .lrd__card--white, .lrd__card--pink, .lrd__card--green { left: 10px; width: 380px; }
  
    .lrd__card--pink, .lrd__card--green { display: none; }
  
    .js .lrd__card { display: none; }
  
    .js .lrd__card.is-front { display: flex; }
  
    .lrd__photo { width: 342px; height: 258px; margin: 2px 20px 0 22px; }
  
    .lrd__body { height: 242px; padding: 20px 20px 24px; }
  
    .lrd__tag { font-size: 11px; }
  
    .lrd__ct { font-size: 26px; margin-top: 12px; }
  
    .lrd__desc { font-size: 16px; margin-top: 14px; }
  
    .lrd__foot { padding-top: 12px; font-size: 10px; }
  
    /* was top:600 — te dicht op de kaartfooter, "READ NOW"-link werd
  
       gedeeltelijk overlapt door de pijlknoppen; meer lucht gegeven */
  
    .lrd__nav { left: auto; right: 14px; top: 660px; gap: 9px; }
  
    .index__arrow { width: 44px; height: 40px; border-radius: 10px; }

  /* dataroom/sections/01-hero/01-hero.css */
  .drh {
  
  
  
      background-size: cover;
  
  
  
  }
  
    .drh__stage { width: 100%; padding: 0 0 40px; }
  
    .drh__panel {
  
      width: 100%; min-height: 0; border-radius: 0; padding: 20px 20px 40px;
  
      text-align: left;
  
    }
  
    /* roze rasters zitten niet in het mobiele ontwerp; daar staan losse lime
  
       pixel-paren (zelfde motief als sections/01-hero .hero__px op de homepage) */
  
    .drh__grid { display: none; }
  
    .drh__px {
  
      display: block; position: absolute; z-index: 2;
  
      width: var(--px-unit); height: var(--px-unit); background: var(--lime);
  
    }
  
    .drh__px::before {
  
      content: ""; position: absolute; left: var(--px-unit); top: var(--px-unit);
  
      width: var(--px-unit); height: var(--px-unit); background: inherit;
  
    }
  
    .drh__px--tr { right: 21px; top: 57px; }
  
    .drh__px--ml { left: 18px; top: 107px; }
  
  
  
    .drh__emoji {
  
      left: 55%;
  
      top: 159px;
  
      font-size: 46px;
  
      transform: translate(-50%, -50%) rotate(20deg);
  
      height: 66px;
  
      width: 66px;
  
  }
  
  
  
    /* "Get the data"-lint: romp over de (transparante) nav, alleen de punt
  
       steekt het roze paneel in — zoals WORK SMART op de homepage-mobiel. */
  
    .drh__hero__ribbon {
  
      left: auto;
  
      right: 125px;
  
      top: 30px;
  
      width: 110px;
  
      height: 36px;
  
      transform: rotate(-53.7deg);
  
    }
  
  
  
    .drh__crumb { margin: 185px 0 14px; }
  
    .drh__title { font-size: 44px; letter-spacing: -.88px; max-width: 100%; }
  
    .drh__subtitle { font-size: 32px; margin-top: 16px; max-width: 100%; }
  
    /* meta: 2 regels tussen de lijnen, share-knop ONDER de onderlijn (Figma
  
       2989:8576). De onderlijn is het ::after-grid-item; border-bottom van de
  
       container zelf gaat uit, anders zou de lijn ook onder de knop lopen. */
  
    .drh__meta {
  
      /* vaste eerste kolom: "May 2026" op de kolompositie uit het ontwerp;
  
         de 1fr-restkolom laat de ::after-onderlijn de volle breedte pakken */
  
      display: grid; grid-template-columns: 150px 1fr; align-items: start;
  
      row-gap: 14px; max-width: 100%;
  
      margin-top: 26px; padding: 14px 0 0; border-bottom: 0;
  
      white-space: normal; text-align: left;
  
    }
  
    .drh__meta > span:nth-child(1) { grid-column: 1; grid-row: 1; }
  
    .drh__meta > span:nth-child(2) { grid-column: 2; grid-row: 1; }
  
    .drh__meta > span:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  
    .drh__meta::after {
  
      content: ""; grid-column: 1 / -1; grid-row: 3;
  
      border-top: 1px solid rgba(15,15,15,.12); margin-top: 6px;
  
    }
  
    .drh__share { grid-column: 1 / -1; grid-row: 4; justify-self: start; margin: 2px 0 0; }
  
  
  
    .drh__photo--cap { position: relative; left: auto; top: auto; width: 58px; height: 62px; margin: 48px 0 0 8%; display: block; transform: rotate(-9deg); border-radius: 10px; }
  
    .drh__photo--peek {
  
      width: 58px;
  
      height: 64px;
  
      transform: rotate(25.744deg);
  
      position: absolute;
  
      right: -20px;
  
      top: 157px;
  
      display: block;
  
      left: auto;
  
      border-radius: 8px;
  
    }
  
    .drh__photo--team { position: relative; right: auto; top: auto; left: auto; width: 205px; max-width: none; height: 163px; margin: -140px -40px 0 auto; transform: rotate(-11deg); }
  
    .drh__photo--team::after { left: -30px;
  
      top: 106px;
  
      width: 74px;
  
      height: 66px; }
  
    .drh__arrow { display: none; }
  
  
  
    .drh__note { position: relative; left: auto; top: auto; width: 100%; max-width: 380px; margin: 40px auto 0; transform: rotate(-6deg); }
  
    .drh__note-shape { height: 10px; }
  
    .drh__note-body { padding: 35px 18px; }
  
    .drh__note-title, .drh__note-title .serif { font-size: 36px; }
  
    .drh__note-lead { font-size: 20px; }

  /* dataroom/sections/02-context/02-context.css */
  .drw { padding: 38px 32px 60px; display: flex; flex-direction: column; background-size: cover; }
  
    .drw__grid { display: none; }
  
    .drw__glow { left: 50%; top: 260px; width: 1920px; height: 500px; transform: translateX(-50%); }
  
    .drw__wrap { margin: 0; max-width: none; }
  
    .drw__title { font-size: 32px; margin: 0 0 10px; }
  
    .drw__title .serif { font-size: 32px; }
  
    /* foto boven, tekst eronder: de foto-container zit in .drw__content_container,
  
       dus díe moet de flex-kolom zijn waarin order:-1 de foto vóór titel+body tilt
  
       (order werkt alleen tussen siblings in dezelfde flex-container). */
  
    .drw__content_container { display: flex; flex-direction: column; max-width: none; }
  
    .drw__photo__container {
  
      position: relative; left: auto; top: auto; width: 100%; max-width: 290px;
  
      margin: 0 auto 26px; order: -1; transform: none;
  
    }
  
    .drw__photo {
  
      /* desktop's fixed 405.305/451.037px box (plus the now-unused mobile 290px cap)
  
         forced a 290×451 crop (object-fit:cover) — much taller/narrower than Figma's
  
         actual mobile crop (283×315, same ~0.9 ratio as desktop). aspect-ratio keeps
  
         the correct crop framing at any mobile width instead of stretching/over-cropping. */
  
      width: 100%; height: auto; aspect-ratio: 283.087 / 315.029; transform: rotate(4.55deg);
  
    }
  
    .drw__sticker {
  
      /* was still desktop's 161×141px (~2x too big) at right:-24/bottom:18 — Figma's
  
         mobile sticker is far smaller and sits higher on the photo's corner. */
  
      right: -26px; bottom: 48px; width: 80px; height: 70px; transform: rotate(2.57deg);
  
    }

  /* dataroom/sections/03-methods/03-methods.css */
  /* .drm is the <section> itself, so the un-overridden desktop `width: calc(100% - 80px);
  
       margin: 0 auto` (see top of file) was insetting the WHOLE section 40px off each edge on
  
       mobile too — a real bug, confirmed both by rendering (white gutters flanking the pink
  
       panel where Figma shows edge-to-edge pink) and by the mobile root's own Dev Mode code
  
       (2989:8751 → 2989:8764, the pink container is `w-full` with no side margin, just its own
  
       32px inner padding). Reset to full-bleed here; the 32px side breathing room now comes
  
       entirely from padding, matching Figma's px-[32px]. Padding-top is 92 = 32px strip
  
       + dezelfde 60px roze lucht boven de titel als vóór de strip erbij kwam. */
  
    .drm { width: 100%; margin: 0; padding: 92px 32px 92px; }
  
    /* Mobiel ontwerp heeft boven én onder wél een pixelstrip gekregen (nieuwe versie
  
       t.o.v. de eerdere check op 2989:8751): dezelfde 402x32-strips met 16px-blokken als
  
       05-behind mobiel (dr-behind-top/botstrip-mobile.svg), maar dan in het sectieroze
  
       #FFDEFD. Het roze vlak begint daarom 32px lager en stopt 32px eerder; de drie witte
  
       notches schuiven 32px mee omlaag zodat ze aan de roze bovenrand blijven hangen.
  
       Het groene grid (bottom:-16px) steekt door de kortere vulling nu ~48px onder de
  
       roze onderrand uit — precies zoals het mobiele ontwerp toont. */
  
    .drm::before { top: 32px; bottom: 32px; }
  
    .drm__topstrip {
  
      top: 0; height: 32px;
  
      background: url("https://7196611.fs1.hubspotusercontent-na1.net/hubfs/7196611/raw_assets/public/ormit-nextgen-2026-08-02/images/dataroom/dr-methods-topstrip-mobile.svg") left top / 100% 100% no-repeat;
    }
  
    .drm__botstrip {
  
      bottom: 0; height: 32px;
  
      background: url("https://7196611.fs1.hubspotusercontent-na1.net/hubfs/7196611/raw_assets/public/ormit-nextgen-2026-08-02/images/dataroom/dr-methods-botstrip-mobile.svg") left top / 100% 100% no-repeat;
    }
  
    .drm__notch--1 { right: 48.61px; top: 44.79px; width: 14.5px;  height: 14.5px; }
  
    .drm__notch--2 { right: 115.68px; top: 32px;    width: 15.93px; height: 15.57px; }
  
    .drm__notch--3 { right: 63.11px;  top: 32px;    width: 36.61px; height: 27.29px; }
  
  
  
    /* The real element only ever carries the base `.drm__grid` class (see markup — there is no
  
       `--br` modifier anywhere in the HTML); this rule used to target a nonexistent
  
       `.drm__grid--br`, so mobile silently fell through to the raw DESKTOP `.drm__grid` rule
  
       above (320x440, right:-201px) — a huge crosshatch bleeding across the whole accordion
  
       panel, confirmed by rendering. Fixed to target the real selector. The desktop asset
  
       (green-grid.svg, a tall 241x440 portrait hatch) is also the wrong shape for Figma's small
  
       96x96 mobile square grid, so `content: url()` swaps in a purpose-built mobile SVG (4 lines:
  
       verticals at x=32.5/64.5, horizontals at y=32.5/64.5, same #2A7F62 stroke — traced from the
  
       mobile root's own two grid-line sub-assets, 2989:8841 + 2989:8845) instead of squashing the
  
       desktop asset into the wrong aspect ratio. Position re-measured against the full mobile root
  
       (Group 1000004761, 2989:8839, absolute in the 402x1870.39 section box): right:0 (flush with
  
       the section's own right edge, not the old -20px bleed) and bottom:-16px (the shape pokes
  
       16px below .drm's own bottom edge, not the old -10px) — opacity/z-index unchanged from the
  
       base rule above. */
  
    /* Diezelfde 96x96 uit Figma, maar nu in het tegelsysteem uitgedrukt i.p.v.
  
       als losse maat: 3 tegels van 32px = 96px, met binnenlijnen op 32 en 64 —
  
       precies de twee verticalen en twee horizontalen die in het mobiele
  
       ontwerp staan. Kleur groen zoals het mobiele asset had; desktop houdt
  
       var(--ink) uit de basisregel. */
  
    .drm__grid {
  
      --tg-cols-m: 1; --tg-rows-m: 1; --tg-cell-m: 32px; --tg-color: #2a7f62;
  
    --tg-right: 0;
  
    --tg-bottom: -16px;
  
  }
  
    /* Desktop's 80px top margin (see base rule) was stacking on top of .drm's own 60px top
  
       padding, leaving ~140px of dead pink space above the title — Figma's mobile container
  
       (2989:8764) has no separate top margin on the title at all, just its own ~60px padding
  
       (py-[62px], already matched above) with a flex `gap-[60px]` to the panel below (that part
  
       was already correct via margin-bottom). Zeroed the top margin to match. */
  
    .drm__title { font-size: 44px; margin-top: 0; margin-bottom: 60px; }
  
    .drm__panel { padding: 10px; }
  
    /* summary label stays 24px on mobile per Figma — it wraps to 2-3 lines instead of shrinking */
  
    .drm__swipe-hint {
      display: flex; align-items: center; justify-content: flex-end; gap: 8px;
      margin: 20px 0 0; font-size: 12px; font-weight: var(--w-semibold); color: var(--ink);
    }
    .drm__swipe-hint span { font-size: 18px; line-height: 1; }
    .drm__swipe-hint + .drm__cards { margin-top: 12px; }
  
    /* Method 01's two info-cards become a one-card-at-a-time horizontal swipe carousel on mobile —
       Figma shows only the blue card, full width, with paging arrows below it (see .drm__nav). */
  
    .drm__cards {
  
      display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  
      -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0; margin-top: 20px; gap: 16px;
  
    }
  
    .drm__cards::-webkit-scrollbar { display: none; }
  
    /* 16px gap (not 0) is deliberate: the ±2deg rotation makes each card's rotated corners bulge
  
       ~9px past its own flex box, and with 0 gap that bulge from the next/prev card peeks into the
  
       currently-snapped card's view — the gap keeps the bulge safely outside the visible viewport. */
  
    .drm__card { flex: 0 0 100%; width: 100%; padding: 12px; gap: 12px; scroll-snap-align: start; }
  
    /* De rotaties hangen sinds de derde kaart aan nth-child en niet meer aan de
  
       kleur; op mobiel staat alles recht en onder elkaar, dus hier gaan ze eraf. */
  
    .drm__card:nth-child(1),
  
    .drm__card:nth-child(2),
  
    .drm__card:nth-child(3) { transform: none; margin: 0; }
  
  
  
    .drm__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
}