/* ============================================================================================
   CREATIVE · lichte proef op de gedeelde basis (ronde 1, 05-10-2026). Voortgangsproef, geen kandidaat.
   Laadt NA nx-basis.css. Alleen wat van deze pagina is: hero "Het watergordijn" met de film, de pakketkiezer,
   de drie pakketten, de vier fasen, de afspraken, het slot. Teksten staan in creative.html en zijn niet gewijzigd.
   ER IS GEEN LICHT BEELD: de plaat is een schema uit de vakken van het compositievoorstel (§10, zonder pauw). Plaatprocenten:
     L liggend, of breder dan 1100 px   tekstzone x 5-40; watergordijn x 46-74, y 13-72; film (laag van de pagina) x 50-70, y 19-66,4
     S staand tot 1100 px breed         tekst boven; watergordijn x 30-88, y 44-74; film x 42,4-75,6, y 46,5-71,4
   De film is 3:4 en laat rondom water vrij: liggend 4 % van de plaatbreedte links en rechts, 6 % van de hoogte boven en onder.
   L: de plaat staat op de volle breedte in haar eigen verhouding (16:9); de hero is zo hoog als de plaat, of hoger als de
      tekst dat vraagt; de pakketkiezer staat eronder.
   S: kop, zin, knop en prijsregel in de stroom boven de plaat; de plaat begint 34 % van haar hoogte boven de onderkant van
      de prijsregel (boomkruin op 36 %, gordijn op 44 %).
   Beweging: de film speelt alleen met script en met beweging aan (creative-licht.js; pauzeknop van de basis). Anders de poster.
   ============================================================================================ */

.cr{background:#f7f3ec;color:var(--nx-inkt)}
.cr .kw{font:inherit;color:inherit}
.cr .tekstlink{flex-wrap:wrap;max-width:100%;overflow-wrap:anywhere}
.cr .eyebrow{flex-wrap:wrap;row-gap:6px;overflow-wrap:anywhere}
.site-footer .legal a{overflow-wrap:anywhere}
/* één linkerlijn voor logo, vloersecties en footer (in de basis drie lijnen; hier per pagina opgelost, zoals Investering) */
.cr .nx-vloer{--nx-rand:max(20px,calc(var(--edge) - 12px))}
.site-footer{padding-inline:max(20px,calc(var(--edge) - 12px))}

/* ---------------------------------------------------------------- hero, gedeeld */
.cr-hero{position:relative;isolation:isolate;overflow:clip;background:#f7f3ec}
.cr-stage{position:relative;z-index:0;width:100%}
.cr-stage picture{position:absolute;inset:0;display:block}
.cr-plaat{display:block;width:100%;height:100%;max-width:none;object-fit:fill}
.cr-stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(64px,7%);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(247,243,236,0),#f7f3ec)}
.cr-schema,.cr-maquette{position:absolute;z-index:4;margin:0;padding:3px 9px;border-radius:999px;white-space:nowrap;pointer-events:none;
  font:400 10px/1.3 var(--sans);letter-spacing:.04em;color:var(--nx-inkt);background:rgba(255,253,248,.9);box-shadow:inset 0 0 0 1px rgba(176,138,69,.4)}
.cr-schema b{margin-right:6px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}

/* tekst van de hero: op lucht en zee, met de gevederde leessteun van de basis erachter */
.cr-kopblok{--steun:.42;--steun-veer:20px;--steun-uit:-16px -22px}
.cr-kopblok .eyebrow{margin:0 0 12px;font-size:.8125rem;letter-spacing:.3em;color:var(--nx-inkt-diep)}
.cr-kopblok .eyebrow::after{width:48px;background:#b18243}
.cr-titel{font:400 clamp(1.5rem,3.7vw,4.125rem)/1.04 var(--serif);letter-spacing:-.006em;color:var(--nx-inkt-diep);overflow-wrap:anywhere}
.cr-sub{margin-top:14px;font:500 .8125rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--nx-inkt)}
.cr-lead{margin-top:14px;max-width:34em;font-size:1.0625rem;line-height:1.5;color:var(--nx-inkt);text-wrap:pretty}
.cr-primair{margin-top:20px}
.cr-cta-primair{text-align:left}
.cr-cta-txt{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 .35em}
.cr-cta-nm{font-weight:700}
.cr-cta-pr{font-weight:500;white-space:nowrap}
.cr-hero-note{margin-top:10px;max-width:32em;font-size:.875rem;line-height:1.45;color:var(--nx-inkt)}
.cr-secundair{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px}

/* het podium: de film in het watergordijn, het bijschrift met de drie formaten eronder */
.cr-podium{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center}
.cr-vitrine{position:relative;width:100%;aspect-ratio:3 / 4;overflow:hidden;border-radius:10px;background:#0c1416;
  box-shadow:0 0 0 1px rgba(255,253,248,.7),0 0 0 2px rgba(11,44,41,.18),0 22px 34px -22px rgba(11,44,41,.6)}
.cr-film{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* bijschrift naast de film: op een eigen lichte ondergrond, zodat het ook boven vallend water leest */
.cr-formaten{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 8px;width:max-content;max-width:150%;margin:8px 0 0;padding:4px 12px;border-radius:999px;
  font:500 .75rem/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--nx-inkt);background:rgba(255,253,248,.86);box-shadow:inset 0 0 0 1px rgba(11,44,41,.16)}
.cr-formaten .is-nu{color:var(--nx-inkt-diep);font-weight:700}
.cr-f-dot{color:#735416}
.cr-maquette{position:static;margin-top:6px}

/* pakketkiezer: drie rustige links op het marmer onder de plaat; de gekozen draagt een lijn */
.cr-tabs{position:relative;z-index:1;padding:18px max(20px,calc(var(--edge) - 12px)) 6px;background:#f7f3ec}
.cr-tabs-kop{margin:0 0 8px;font:500 .78125rem/1.35 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--nx-goud-tekst)}
.cr-tablist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(16px,2.6vw,48px)}
.cr-tab{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 4px;border-top:1px solid var(--nx-goud-lijn);border-radius:0;color:var(--nx-navy);text-decoration:none}
.cr-tab-ic{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;color:#735416}
.cr-tab-ic svg{width:30px;height:30px}
.cr-tab-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cr-tab-nm{font:400 1.375rem/1.15 var(--serif);overflow-wrap:anywhere}
.cr-tab-pr{font:400 .9375rem/1.3 var(--sans);color:var(--nx-tekst)}
.cr-tab-arr{flex:0 0 auto;width:18px;height:18px;margin-left:auto;transition:transform var(--t-hover) var(--ease)}
.cr-tab[aria-current]{border-top:2px solid #8a6a2b;padding-top:9px}
.cr-tab[aria-current] .cr-tab-nm{text-decoration:underline;text-decoration-color:#8a6a2b;text-decoration-thickness:1px;text-underline-offset:6px}
.cr-tab:focus-visible{border-radius:8px}
@media (hover:hover) and (pointer:fine){
  .cr-tab:hover{background-color:rgba(176,138,69,.07)}
  .cr-tab:hover .cr-tab-arr{transform:translateX(3px)}
}
.cr-tab:active{background-color:rgba(176,138,69,.16)}

/* ---------------------------------------------------------------- L · liggend, of breder dan 1100 px */
@media (min-width:1101px),(orientation:landscape){
  .cr-hero{display:grid;grid-template-columns:minmax(0,1fr)}
  .cr-stage{grid-area:1 / 1;align-self:start;aspect-ratio:16 / 9}
  /* tekstzone van de schets: plaat x 5-40 %, bovenkant 14 % (7,875 % van de breedte); links nooit vóór de lijn van het logo */
  .cr-inhoud{--kl:max(5%,calc(var(--edge) - 12px));grid-area:1 / 1;align-self:start;position:relative;z-index:1;width:40%;
    padding:max(calc(var(--header-h) + 24px),7.875%) 0 28px var(--kl)}
  .cr-na{margin-top:10px}
  .cr-podium{left:50%;width:20%;top:19%}
  .cr-schema{right:2%;top:88.5%}
  .cr-tabs{grid-area:2 / 1}
}
@media (min-width:861px) and (max-width:1300px) and (orientation:landscape){
  .cr-sub{margin-top:10px;font-size:.75rem;letter-spacing:.12em}
  .cr-lead{margin-top:10px;font-size:1rem;line-height:1.45}
  .cr-primair{margin-top:14px}
  .cr-hero-note{margin-top:8px;font-size:.8125rem}
  .cr-formaten{font-size:.6875rem;letter-spacing:.08em;padding:3px 9px}
}
/* liggend en smal of laag (telefoon liggend, desktop op zoom 200 %) */
@media (orientation:landscape) and (max-width:860px),(orientation:landscape) and (max-height:520px){
  .cr-inhoud{padding-top:calc(var(--header-h) + 10px);padding-bottom:14px}
  .cr-kopblok .eyebrow{margin-bottom:4px;font-size:.6875rem;letter-spacing:.2em}
  .cr-titel{font-size:1.5rem;line-height:1.08}
  .cr-titel br{display:none}
  .cr-sub{margin-top:5px;font-size:.625rem;letter-spacing:.08em}
  .cr-lead{margin-top:5px;font-size:.8125rem;line-height:1.35}
  .cr-primair{margin-top:8px}
  .cr-cta-primair{min-height:44px;padding:.35em 14px .35em 18px;gap:10px;font-size:.9375rem}
  .cr-hero-note{margin-top:5px;font-size:.75rem;line-height:1.3}
  .cr-formaten{margin-top:5px;font-size:.5625rem;letter-spacing:.04em;padding:2px 7px;gap:0 5px}
  .cr-maquette,.cr-schema{font-size:8px}
  .cr-tab{min-height:56px;gap:8px}
  .cr-tab-nm{font-size:1.125rem}
  .cr-tab-pr{font-size:.8125rem}
  .cr-tab-ic{display:none}
}

/* ---------------------------------------------------------------- S · staand tot 1100 px breed */
@media (max-width:1100px) and (orientation:portrait){
  .cr-hero{display:flex;flex-direction:column;background:#dbe7ee}       /* boven de plaat loopt de lucht door (bovenkleur van het schema) */
  .cr-inhoud{display:contents}
  .cr-kopblok{order:1;position:relative;z-index:1;padding:calc(var(--header-h) + 18px) 20px 0}
  .cr-kopblok .eyebrow{margin-bottom:8px;letter-spacing:.24em}
  .cr-titel{font-size:2.125rem;line-height:1.06}
  .cr-sub{margin-top:10px;font-size:.6875rem;letter-spacing:.1em}
  .cr-lead{margin-top:10px;font-size:1rem;line-height:1.45}
  .cr-primair{margin-top:14px}
  .cr-hero-note{margin-top:8px}
  /* de plaat begint 34 % van haar hoogte (60,44 % van de breedte) boven de onderkant van de prijsregel */
  .cr-stage{order:2;flex:0 0 auto;aspect-ratio:9 / 16;margin-top:-60.44%}
  .cr-podium{left:42.4%;width:33.2%;top:46.5%}
  .cr-formaten{max-width:170%;font-size:.625rem;letter-spacing:.06em;padding:3px 8px;gap:0 6px}
  .cr-schema{left:4%;top:91%}
  .cr-schema__lang{display:none}
  .cr-na{order:3;position:relative;z-index:1;padding:10px 20px 0;background:#f7f3ec}
  .cr-tabs{order:4;padding:14px 20px 4px}
  .cr-tablist{grid-template-columns:minmax(0,1fr)}
  .cr-tab{min-height:60px}
}
@media (min-width:601px) and (max-width:1100px) and (orientation:portrait){
  .cr-kopblok{padding:calc(var(--header-h) + 32px) 8% 0}
  .cr-titel{font-size:3.25rem}
  .cr-sub{font-size:.8125rem;letter-spacing:.16em}
  .cr-lead{font-size:1.125rem;max-width:32em}
  .cr-formaten{font-size:.8125rem;letter-spacing:.12em;padding:4px 12px}
  .cr-na{padding:14px 8% 0}
  .cr-tabs{padding:16px 8% 4px}
  .cr-tablist{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cr-tab-ic{display:none}
}
@media (min-width:861px) and (max-width:1100px) and (orientation:portrait){.cr-titel{font-size:4rem}}
@media (max-width:375px) and (orientation:portrait){.cr-titel{font-size:1.9375rem}}
@media (max-width:339px) and (orientation:portrait){.cr-titel{font-size:1.6875rem}.cr-kopblok{padding-inline:16px}.cr-sub{letter-spacing:.04em}.cr-formaten{font-size:.5625rem}}

/* ---------------------------------------------------------------- vervolgsecties op de vloer */
.cr .nx-vloer p{text-wrap:pretty}
.cr-sectiekop{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px clamp(32px,4.4vw,96px);align-items:end;margin-bottom:clamp(28px,3.2vw,48px)}
.cr-pakketten{padding-top:clamp(48px,5vw,88px)}

/* een pakket: naam en prijs op één regel, de lijst in twee kolommen, rechts de voorwaarden; dunne lijnen, geen glas */
.cr-pakket{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px clamp(32px,4.4vw,96px);padding:26px 0 30px;border-top:1px solid var(--nx-goud-lijn);scroll-margin-top:calc(var(--header-h) + 20px)}
.cr-pakket:last-of-type{border-bottom:1px solid var(--nx-goud-lijn)}
html.cr-js .cr-pakket:not(.is-actief){display:none}
html.cr-js .cr-pakket.is-actief{border-bottom:1px solid var(--nx-goud-lijn)}
@media (prefers-reduced-motion:no-preference){
  html.cr-js:not(.beweging-uit) .cr-pakket.is-actief.cr-wissel{animation:nx-op var(--t-op) ease-out}
}
.cr-pk-kop{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 28px}
.cr-pk-kop h3{font-size:clamp(1.875rem,2.6vw,2.625rem);line-height:1.08}
.cr-pk-tag{margin-top:6px;font-size:1.0625rem;color:var(--nx-tekst)}
.cr-pk-prijs,.cr-ob-prijs{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;margin:0;color:var(--nx-navy)}
.cr-pk-prijs .vanaf,.cr-ob-prijs .vanaf{font:400 .9375rem/1.2 var(--sans);color:var(--nx-tekst)}
.cr-pk-prijs .bedrag{font:400 clamp(2rem,2.8vw,2.875rem)/1 var(--serif);white-space:nowrap}
.cr-pk-prijs .per{font:400 1rem/1.2 var(--sans);color:var(--nx-tekst)}
.cr-pk-prijs .btw{flex-basis:100%;font:400 .875rem/1.4 var(--sans);color:var(--nx-tekst)}
.cr-pk-sub,.cr-uitsluiting h4{margin:24px 0 0;font:500 .78125rem/1.35 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--nx-goud-tekst)}
.cr-lijst{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin:14px 0 0;padding:0}
.cr-lijst li{position:relative;padding-left:22px;font-size:1.0625rem;line-height:1.4;color:var(--nx-navy);overflow-wrap:anywhere}
.cr-lijst li::before{content:"";position:absolute;left:1px;top:.5em;width:8px;height:8px;transform:rotate(45deg);border:1px solid #8a6a2b}
.cr-pk-zij{display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding-left:clamp(20px,2.4vw,40px);border-left:1px solid var(--nx-goud-lijn)}
.cr-onboarding h4{font:400 1.375rem/1.2 var(--serif);color:var(--nx-navy)}
.cr-ob-prijs{margin-top:8px}
.cr-ob-prijs .bedrag{font:400 1.75rem/1 var(--serif);white-space:nowrap}
.cr-ob-prijs .per{font:400 .875rem/1.3 var(--sans);color:var(--nx-tekst)}
.cr-onboarding > p:not(.cr-ob-prijs){margin-top:10px;font-size:1rem;line-height:1.55;color:var(--nx-tekst)}
.cr-pakket .cta-mail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.cr-uitsluiting{grid-column:1 / -1;padding-top:16px;border-top:1px solid var(--nx-goud-zacht)}
.cr-uitsluiting h4{margin-top:0}
.cr-uitsluiting p{margin-top:8px;max-width:60em;font-size:.9375rem;line-height:1.55;color:var(--nx-tekst)}
.cr .nx-vloer .cta-note{color:var(--nx-navy)}          /* de tekstkleur haalde op 390 breed op een marmerader 4,1 (gemeten); donkerder gezet */

/* de vier fasen: naast elkaar op één lijn */
.cr-fasen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px clamp(20px,2.6vw,48px)}
.cr-fasen li{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--nx-goud-lijn)}
.cr-fasen .nr{font:400 clamp(2rem,2.6vw,2.75rem)/1 var(--serif);color:var(--nx-goud-tekst)}
.cr-fasen h3{font-size:clamp(1.5rem,1.9vw,1.875rem)}
.cr-fasen p{max-width:30em;font-size:1.0625rem;line-height:1.55;color:var(--nx-tekst)}
.cr-fasen-hint{display:none}

/* goed om te weten: vijf afspraken in een rustig raster */
.cr-feiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px clamp(20px,2.6vw,48px);margin:0}
.cr-feiten > div{padding-top:18px;border-top:1px solid var(--nx-goud-lijn)}
.cr-feiten dt{font:400 1.4375rem/1.2 var(--serif);color:var(--nx-navy)}
.cr-feiten dd{margin:8px 0 0;font-size:1.0625rem;line-height:1.55;color:var(--nx-tekst)}

/* slot */
.cr-slot{padding-bottom:clamp(72px,7.5vw,128px)}
.cr-slot__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px clamp(32px,4.4vw,96px);align-items:start;padding-top:clamp(36px,4vw,56px);border-top:1px solid var(--nx-goud-lijn)}
.cr-slot-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:26px}
.cr-slot-cta .cta-note{overflow-wrap:anywhere}

/* ---------------------------------------------------------------- 861-1100 px */
@media (min-width:861px) and (max-width:1100px){
  .cr-fasen,.cr-feiten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-pakket{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .cr-lijst{grid-template-columns:minmax(0,1fr)}
}
/* ---------------------------------------------------------------- tot 860 px */
@media (max-width:860px){
  .cr-sectiekop,.cr-slot__grid,.cr-pakket,.cr-feiten{grid-template-columns:minmax(0,1fr)}
  .cr-sectiekop{align-items:start;margin-bottom:24px}
  .cr-lijst{grid-template-columns:minmax(0,1fr)}
  .cr-lijst li,.cr-pk-tag,.cr-fasen p,.cr-feiten dd{font-size:1rem}
  .cr-pk-zij{padding:20px 0 0;border-left:0;border-top:1px solid var(--nx-goud-lijn)}
  .cr-feiten{gap:20px}
  .cr-slot{padding-bottom:88px}
  /* de fasen als strook die horizontaal veegt; elke fase klikt vast. De strook loopt tot de schermranden. */
  .cr-fasen-strip{margin-inline:calc(var(--nx-rand) * -1);padding-inline:var(--nx-rand);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--nx-rand);scrollbar-width:thin}
  .cr-fasen{grid-template-columns:repeat(4,min(78vw,20rem));gap:0 18px;width:max-content}
  .cr-fasen li{scroll-snap-align:start}
  .cr-fasen-strip:focus-visible{outline-offset:-2px;box-shadow:none}
  .cr-fasen-hint{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:.875rem;color:var(--nx-tekst)}
  .cr-fasen-hint svg{width:16px;height:16px}
}
@media (prefers-contrast:more){
  .cr-pakket,.cr-fasen li,.cr-feiten > div,.cr-tab{border-color:#131d33}
  .cr-formaten,.cr-schema,.cr-maquette{background:#fffdf8;box-shadow:inset 0 0 0 1px #0b2c29}
  .cr-vitrine{box-shadow:0 0 0 2px #0b2c29}
}
@media (prefers-reduced-transparency:reduce){.cr-formaten{background:#fffdf8}}
@media (forced-colors:active){
  .cr-vitrine{border:1px solid CanvasText}
  .cr-tab[aria-current]{border-top:3px solid Highlight}
}

/* na de eerste meting (05-10): 28 px vrij onder een element dat de focus krijgt; op zeer smalle vensters (zoom 200 % op een telefoon) breken de prijs in de knop en het maquettelabel af */
html{scroll-padding-bottom:28px}
@media (max-width:339px){.cr-cta-pr,.cr-maquette,.cr-schema{white-space:normal}.cr-cta-txt{min-width:0}.cr-cta-primair{overflow-wrap:anywhere}}