/* ═══════════════════════════════════════════════════════════════════════
   therapeutelisabeth.be — design system
   One stylesheet for all pages. See brand_assets/brand-identity-rapport.md.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --ink:#1C5253; --deep:#14403F; --cream:#FBF4E1; --peach:#FECBA5; --mist:#90DAD9;
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px; --s-5:64px; --s-6:96px; --s-7:128px; --s-8:160px;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{ -webkit-font-smoothing:antialiased; scroll-behavior:smooth; }
body{
  background-color:var(--cream);
  color:var(--ink);
  font-family:'Instrument Sans',system-ui,sans-serif;
  font-size:17px; line-height:1.75;
  letter-spacing:.002em;
}

/* Layered ambient light — peach warmth top-right, mist coolness lower-left */
.field::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58rem 42rem at 90% -8%, rgba(254,203,165,.5), transparent 60%),
    radial-gradient(40rem 34rem at 0% 52%, rgba(144,218,217,.13), transparent 58%),
    radial-gradient(70rem 46rem at 52% 106%, rgba(254,203,165,.22), transparent 64%);
}
/* Grain */
.field::after{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.layer{ position:relative; z-index:1; }

h1,h2,h3,.display{
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'SOFT' 55,'WONK' 1,'opsz' 144;
  font-weight:300;
  letter-spacing:-.03em;
  line-height:1.05;
}
.display-sm{ font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 40; letter-spacing:-.02em; }
/* Figures are numbers, not sentiment — flatter and unwonky on purpose. */
.numeral{ font-variation-settings:'SOFT' 40,'WONK' 0,'opsz' 60; }

.eyebrow{
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.2em; line-height:1.4;
  color:rgba(28,82,83,.62);
}

.lede{ font-size:clamp(1.0625rem,1.35vw,1.25rem); line-height:1.72; color:rgba(28,82,83,.86); }
.prose-ink p{ color:rgba(28,82,83,.86); }
.prose-ink p + p{ margin-top:1.15em; }
.prose-ink strong{ font-weight:600; color:var(--ink); }

/* ── Signature motif: the arch. A threshold you step through. ───────── */
.arch{
  border-radius:999px 999px 12px 12px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
  box-shadow:
    0 1px 2px rgba(28,82,83,.07),
    0 14px 30px -12px rgba(28,82,83,.22),
    0 48px 88px -40px rgba(28,82,83,.34);
}
.arch img{ width:100%; height:100%; object-fit:cover; display:block; }
.arch .tint{ position:absolute; inset:0; background:var(--peach); opacity:.24; mix-blend-mode:multiply; }
.arch .shade{ position:absolute; inset:0; background:linear-gradient(to top, rgba(20,64,63,.42), rgba(20,64,63,.04) 46%, transparent 72%); }
.arch .ring{ position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(251,244,225,.34); }

/* ── Hero banner: a landscape plate that dissolves into the page ──────
   Home only. A plate is the page itself; sub-pages open on type. */
.hero-media{
  -webkit-mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 86%,transparent 100%);
}
.hero-media img{ outline:1px solid rgba(28,82,83,.10); outline-offset:-1px; }

/* Scrim: carries the copy on the left, releases the photo before Elisabeth (~78%) */
.hero-scrim{
  background:
    linear-gradient(to right,
      rgba(251,244,225,.97) 0%,
      rgba(251,244,225,.95) 28%,
      rgba(251,244,225,.89) 46%,
      rgba(251,244,225,.54) 60%,
      rgba(251,244,225,.12) 72%,
      rgba(251,244,225,0)   80%),
    linear-gradient(to bottom, rgba(251,244,225,.30), rgba(251,244,225,0) 26%);
}

/* Balanced wrapping — the CSS equivalent of react-wrap-balancer */
.balance{ text-wrap:balance; }
.pretty { text-wrap:pretty; }

/* Hairline rules */
.rule{ height:1px; background:rgba(28,82,83,.16); }
.rule-soft{ height:1px; background:rgba(28,82,83,.10); }

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  padding:.85rem 1.4rem; border-radius:999px;
  transition:transform .35s var(--ease), background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .35s var(--ease);
  will-change:transform;
}
.btn-primary{
  background:var(--ink); color:var(--cream); border:1px solid var(--ink);
  box-shadow:0 1px 2px rgba(28,82,83,.18), 0 10px 22px -12px rgba(28,82,83,.55);
}
.btn-primary:hover{ transform:translateY(-2px); background:var(--deep); box-shadow:0 2px 4px rgba(28,82,83,.2), 0 18px 34px -14px rgba(28,82,83,.6); }
.btn-primary:active{ transform:translateY(0); }
.btn-ghost{ border:1px solid rgba(28,82,83,.28); color:var(--ink); background:transparent; }
.btn-ghost:hover{ transform:translateY(-2px); border-color:rgba(28,82,83,.55); background:rgba(255,255,255,.55); }
.btn-ghost:active{ transform:translateY(0); }
/* Ghost button on a dark field — cream hairline instead of teal. */
.btn-ghost-cream{ border:1px solid rgba(251,244,225,.32); color:var(--cream); background:transparent; }
.btn-ghost-cream:hover{ transform:translateY(-2px); border-color:rgba(251,244,225,.7); background:rgba(251,244,225,.08); }
.btn-ghost-cream:active{ transform:translateY(0); }
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(3px); }

/* Secondary CTA, link variant — underline only on hover */
.cta-link{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:14px; font-weight:600; color:var(--ink);
  text-decoration:none; text-underline-offset:4px;
}
.cta-link:hover{ text-decoration:underline; }
.cta-link .arw{ transition:transform .35s var(--ease); }
.cta-link:hover .arw{ transform:translateX(3px); }

a:focus-visible, button:focus-visible, .btn:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px; border-radius:4px;
}
/* On dark fields the teal ring disappears — switch the ring, not the rule. */
.on-dark a:focus-visible, .on-dark button:focus-visible, .on-dark .btn:focus-visible{
  outline-color:var(--cream);
}

/* ── Brandmark: large at rest, compact once you scroll ─────────────── */
/* Ceilings are set by the space the nav and CTA leave — the wordmark is 3.5:1,
   so every extra pixel of height costs 3.5 of width. */
/* The header is FIXED, not sticky, and a constant-height spacer holds its place.
   If it stayed in flow, shrinking it would move the content below, Chrome's scroll
   anchoring would correct the scroll position, that would re-cross the threshold,
   and the bar would oscillate forever. Out of flow, nothing can move. */
.site-header{ position:fixed; top:0; left:0; right:0; }
.bar-spacer{ height:var(--bar-h); }

:root{ --bar-h:74px; }                                     /* 46 logo + 2×14 padding */
@media (min-width:640px){  :root{ --bar-h:100px; } }       /* 72 + 28 */
@media (min-width:1024px){ :root{ --bar-h:84px;  } }       /* 56 + 28 */
@media (min-width:1280px){ :root{ --bar-h:124px; } }       /* 96 + 28 */

.bar{ padding-top:14px; padding-bottom:14px; transition:padding .38s var(--ease); }
.brandmark{ height:46px; width:auto; transition:height .38s var(--ease); }

@media (min-width:640px){  .brandmark{ height:72px; } }
@media (min-width:1024px){ .brandmark{ height:56px; } }   /* nav, language switch and CTA claim the room here */
@media (min-width:1280px){ .brandmark{ height:96px; } }

/* The French labels run wider than the Dutch ones — "Enseignement" alone
   costs three characters over "Onderwijs", and the CTA two more. The bar buys
   that room back from the brandmark: the same trade it already makes at lg. */
/* The scrolled heights are restated because these selectors outrank the plain
   .is-scrolled rule below — without them the French mark would keep its resting
   height on the way down, and at lg it would grow past it. */
@media (min-width:1024px){
  html[lang="fr"] .brandmark{ height:44px; }
  html[lang="fr"] .is-scrolled .brandmark{ height:40px; }
}
@media (min-width:1280px){
  html[lang="fr"] .brandmark{ height:82px; }
  html[lang="fr"] .is-scrolled .brandmark{ height:52px; }
}

.is-scrolled .bar{ padding-top:10px; padding-bottom:10px; }
.is-scrolled .brandmark{ height:40px; }
@media (min-width:640px){ .is-scrolled .brandmark{ height:52px; } }

.navlink{ position:relative; font-size:14.5px; color:rgba(28,82,83,.78); transition:color .25s ease; }
.navlink::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.navlink:hover{ color:var(--ink); }
.navlink:hover::after{ transform:scaleX(1); }
/* Where you are now: the underline is already drawn. */
.navlink[aria-current="page"]{ color:var(--ink); }
.navlink[aria-current="page"]::after{ transform:scaleX(1); background:rgba(28,82,83,.4); }

/* ── Language switch ───────────────────────────────────────────────────
   Two two-letter states with a hairline between them — the same 1px
   vocabulary as the rules across the page. The language you are already
   reading is stated, not linked: there is nowhere for it to go. */
.langswitch{ display:inline-flex; align-items:center; gap:.375rem; }
.langswitch .vrule{ width:1px; height:11px; background:rgba(28,82,83,.26); }
.lang{
  font-size:12px; font-weight:600; line-height:1;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(28,82,83,.5);
  transition:color .25s ease;
}
.lang[aria-current]{ color:var(--ink); }
@media (hover:hover){ a.lang:hover{ color:var(--ink); } }
/* Same control on the dark footer field. */
.on-dark .langswitch .vrule{ background:rgba(251,244,225,.3); }
.on-dark .lang{ color:rgba(251,244,225,.5); }
.on-dark .lang[aria-current]{ color:rgba(251,244,225,.9); }
@media (hover:hover){ .on-dark a.lang:hover{ color:var(--cream); } }

/* ── Mobile navigation ─────────────────────────────────────────────────
   The toggle is the arch motif at control scale: a doorway you tap to step
   through. Two hairlines inside it — the same 1px vocabulary as the rules
   across the page — fold into a cross when the sheet is open. */
.navtoggle{
  position:relative; flex:0 0 auto;
  width:42px; height:38px;
  border:1px solid rgba(28,82,83,.28);
  border-radius:999px 999px 6px 6px;
  background:transparent; color:var(--ink);
  transition:transform .35s var(--ease), background-color .25s ease, border-color .25s ease;
}
/* Hover is guarded: on a touch screen a tapped state would otherwise stick. */
@media (hover:hover){
  .navtoggle:hover{ border-color:rgba(28,82,83,.55); background:rgba(255,255,255,.55); }
}
.navtoggle:active{ transform:translateY(1px); }
/* The arc removes mass from the top, so the lines sit a hair below the
   geometric centre to read as centred. */
.navtoggle .ln{
  position:absolute; left:50%; top:calc(50% + 1px); width:16px; height:1.5px;
  border-radius:2px; background:currentColor;
  transition:transform .42s var(--ease);
}
.navtoggle .ln:nth-child(1){ transform:translate(-50%,calc(-50% - 3.5px)); }
.navtoggle .ln:nth-child(2){ transform:translate(-50%,calc(-50% + 3.5px)); }
.nav-open .navtoggle .ln:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.nav-open .navtoggle .ln:nth-child(2){ transform:translate(-50%,-50%) rotate(-45deg); }
/* The drawn arch is 42×38; the tap target it carries is 50×48. */
.navtoggle::after{ content:''; position:absolute; left:-4px; right:-4px; top:-5px; bottom:-5px; }

/* The sheet sits under the fixed header (z-40) so the brandmark and the
   toggle never leave the screen. Its own top padding clears the bar. */
.navsheet{
  position:fixed; inset:0; z-index:30;
  display:flex; flex-direction:column;
  padding-top:var(--bar-h);
  background:var(--cream);
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden;
  transition:opacity .3s var(--ease), visibility 0s linear .3s;
}
.nav-open .navsheet{
  opacity:1; visibility:visible;
  transition:opacity .3s var(--ease), visibility 0s;
}
.navsheet[hidden]{ display:none; }   /* the class sets display:flex, so say it explicitly */
.navsheet::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(34rem 26rem at 88% 2%, rgba(254,203,165,.44), transparent 62%),
    radial-gradient(28rem 24rem at 2% 80%, rgba(144,218,217,.16), transparent 60%);
}
.navsheet::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.05;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.navsheet-inner{ position:relative; z-index:1; display:flex; flex:1 1 auto; flex-direction:column; }

/* Contents rise in sequence once the sheet is up. */
.stagger > *{ opacity:0; transform:translateY(10px); }
.nav-open .stagger > *{
  opacity:1; transform:none;
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay:var(--d,0ms);
}

.msheet-link{
  display:block; padding:.72rem 0;
  border-top:1px solid rgba(28,82,83,.14);
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 40;
  font-weight:300; letter-spacing:-.02em; line-height:1.15;
  font-size:1.65rem; color:var(--ink);
  transition:transform .35s var(--ease), color .25s ease;
}
@media (hover:hover){ .msheet-link:hover{ transform:translateX(5px); color:var(--deep); } }
.msheet-link:active{ transform:translateX(5px); color:var(--deep); }

.msheet-sub{
  display:block; padding:.6rem 0;
  border-top:1px solid rgba(28,82,83,.14);
  font-size:15.5px; color:rgba(28,82,83,.82);
  transition:transform .35s var(--ease), color .25s ease;
}
@media (hover:hover){ .msheet-sub:hover{ transform:translateX(5px); color:var(--ink); } }
.msheet-sub:active{ transform:translateX(5px); color:var(--ink); }

/* Current page in the sheet: the arch tick fills in. */
.msheet-link[aria-current="page"], .msheet-sub[aria-current="page"]{ color:var(--deep); }
.msheet-sub[aria-current="page"].tick::before{ background:rgba(28,82,83,.5); border-color:rgba(28,82,83,.5); }

/* Short phones (SE, landscape): pull the scale in so the sheet fits. */
@media (max-height:700px){
  .msheet-link{ font-size:1.4rem; padding:.55rem 0; }
  .msheet-sub{ padding:.48rem 0; }
}

/* Inline links inside copy */
.link{ color:var(--ink); text-decoration:none; box-shadow:inset 0 -1px 0 0 rgba(28,82,83,.4); transition:box-shadow .25s ease, background-color .25s ease; }
.link:hover{ box-shadow:inset 0 -2px 0 0 var(--ink); background:rgba(144,218,217,.22); }
/* Same link on a dark field. */
.link-cream{ color:var(--cream); text-decoration:none; box-shadow:inset 0 -1px 0 0 rgba(251,244,225,.45); transition:box-shadow .25s ease, background-color .25s ease; }
.link-cream:hover{ box-shadow:inset 0 -2px 0 0 var(--cream); background:rgba(144,218,217,.16); }

/* ── Practical panel: crisp, tabular, deliberately unsoft ──────────── */
.spec{ border-top:1px solid rgba(28,82,83,.22); }
.spec:last-child{ border-bottom:1px solid rgba(28,82,83,.22); }
/* In a two-column spec grid the bottom row is the last TWO cells, not just the
   last one — otherwise the left column ends on an open hairline. */
@media (min-width:1024px){
  .spec-grid > .spec:nth-last-child(-n+2){ border-bottom:1px solid rgba(28,82,83,.22); }
}

/* ── Taalregel ─────────────────────────────────────────────────────────
   Sessies gaan in het Nederlands of in het Frans door. Die zin staat los van
   de lede, met het taalpaar als eigen merkteken vooraan: wie scant ziet
   NL · FR staan voor ze de zin leest. */
.langnote{
  display:flex; align-items:baseline; gap:.85rem;
  max-width:44ch;
  font-size:15px; line-height:1.6;
  color:rgba(28,82,83,.82);
}
/* Geen los woord op de laatste regel. */
.langnote > span:last-child{ text-wrap:pretty; }
.langnote-tag{
  flex:0 0 auto;
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.16em;
  padding:.34rem .6rem; border-radius:999px;
  border:1px solid rgba(28,82,83,.22);
  background:rgba(144,218,217,.28);
  color:rgba(28,82,83,.88);
  white-space:nowrap;
}
/* Op een donker veld draait het paar mee. */
.on-dark .langnote{ color:rgba(251,244,225,.82); }
.on-dark .langnote-tag{
  border-color:rgba(251,244,225,.26); background:rgba(144,218,217,.18); color:rgba(251,244,225,.9);
}

/* Arch tick — the motif at list scale */
.tick{ display:flex; align-items:flex-start; gap:.95rem; }
.tick::before{
  content:''; flex:0 0 auto; width:13px; height:9px; margin-top:.62em;
  border-radius:999px 999px 1px 1px;
  background:transparent; border:1px solid rgba(28,82,83,.45);
}
.tick-peach::before{ margin-top:.5em; border-color:rgba(28,82,83,.5); background:rgba(255,255,255,.4); }
.tick-cream::before{ border-color:rgba(251,244,225,.5); }

/* Segment tiles — hairline grid, no boxes.
   Every tile carries real padding, and the row it lives in is pulled outward by
   the page gutter (.tile-row). Net effect: the text still lines up with the rest
   of the page, but the hover panel and the hairlines keep room around it. */
.tile-row{ margin-left:-1.25rem; margin-right:-1.25rem; }
@media (min-width:640px){ .tile-row{ margin-left:-2rem; margin-right:-2rem; } }

.tile{
  display:flex; flex-direction:column;
  padding:1.75rem 1.25rem 1.9rem;
  border-top:1px solid rgba(28,82,83,.18);
  transition:transform .4s var(--ease), background-color .35s ease;
}
.tile:hover{ transform:translateY(-3px); background:rgba(255,255,255,.6); }
.tile .go{
  display:inline-block; margin-top:auto; padding-top:1rem; opacity:.45;
  transition:transform .4s var(--ease), opacity .3s ease;
}
.tile:hover .go{ transform:translateX(4px); opacity:1; }

@media (min-width:640px){
  .tile{ padding-left:2rem; padding-right:2rem; }
}
@media (min-width:640px) and (max-width:1023px){
  .tile:nth-child(odd){ padding-right:1.5rem; }
  .tile:nth-child(even){ padding-left:1.5rem; border-left:1px solid rgba(28,82,83,.18); }
}
@media (min-width:1024px){
  .tile{ padding-left:1.5rem; padding-right:1.5rem; }
  .tile:first-child{ padding-left:2rem; }
  .tile:last-child{ padding-right:2rem; }
  .tile + .tile{ border-left:1px solid rgba(28,82,83,.18); }
}

.signature{ font-family:'Great Vibes',cursive; font-weight:400; line-height:1; }

/* ── Sub-page contents rail ────────────────────────────────────────────
   Sub-pages are long-form reading. The rail states what is actually on the
   page and jumps to it — structure carrying information, not ornament. */
.toc-link{
  display:block; padding:.6rem 0;
  border-top:1px solid rgba(28,82,83,.16);
  font-size:14.5px; line-height:1.5; color:rgba(28,82,83,.78);
  transition:transform .35s var(--ease), color .25s ease;
}
.toc-link:last-child{ border-bottom:1px solid rgba(28,82,83,.16); }
@media (hover:hover){ .toc-link:hover{ transform:translateX(4px); color:var(--ink); } }
.toc-link:active{ transform:translateX(4px); color:var(--ink); }

/* Breadcrumb back to the level above — small, never competing with the h1. */
.crumb{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:13px; color:rgba(28,82,83,.6);
  transition:color .25s ease;
}
.crumb:hover{ color:var(--ink); }
.crumb .arw{ transition:transform .35s var(--ease); }
.crumb:hover .arw{ transform:translateX(-3px); }

/* ── Reveal ────────────────────────────────────────────────────────── */
[data-reveal]{ opacity:0; transform:translateY(14px); }
.revealed[data-reveal]{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay:var(--d,0ms);
}

/* Hero reveal — rises with a short blur-off, per the hero-07 spec */
[data-reveal-blur]{ opacity:0; transform:translateY(12px); filter:blur(6px); }
.revealed[data-reveal-blur]{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .5s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
  transition-delay:var(--d,0ms);
}
/* The plate settles downward while the copy rises — they meet in the middle */
[data-reveal-media]{ opacity:0; transform:translateY(-20px); filter:blur(8px); }
.revealed[data-reveal-media]{
  opacity:1; transform:none; filter:blur(0);
  transition:opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease);
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  [data-reveal],[data-reveal-blur],[data-reveal-media]{
    opacity:1 !important; transform:none !important; filter:none !important; transition:none !important;
  }
  .btn,.tile,.navlink::after,.btn .arw,.cta-link .arw,.bar,.brandmark,
  .navtoggle,.navtoggle .ln,.msheet-link,.msheet-sub,.toc-link,.crumb .arw{ transition:none !important; }
  .navsheet{ transition:none !important; }
  .stagger > *{ opacity:1; transform:none; }
  .nav-open .stagger > *{ transition:none !important; transition-delay:0ms !important; }
}

/* ── Cookietoestemming ─────────────────────────────────────────────────
   Een drempelmoment: de site vraagt of ze binnen mag. Het paneel spreekt
   dezelfde taal als de rest — boogradius bovenaan, gelaagde schaduw, één
   hairline. Aanvaarden en weigeren zijn even groot: dat is wettelijk
   verplicht én het past bij een praktijk die niet duwt. */
.consent{
  position:fixed; z-index:60;
  left:1rem; right:1rem; bottom:1rem;
  max-width:29rem;
  background:#FFFCF4;
  border:1px solid rgba(28,82,83,.16);
  border-radius:18px 18px 10px 10px;
  box-shadow:
    0 1px 2px rgba(28,82,83,.07),
    0 14px 30px -12px rgba(28,82,83,.22),
    0 48px 88px -40px rgba(28,82,83,.34);
  opacity:0; transform:translateY(16px);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.consent[hidden]{ display:none; }
.consent.is-open{ opacity:1; transform:none; }
@media (min-width:640px){ .consent{ left:1.5rem; bottom:1.5rem; right:auto; width:calc(100% - 3rem); } }

/* De keuzelijst scrollt, de knoppen niet: aanvaarden en weigeren moeten
   altijd in beeld staan, ook op een korte telefoon. */
.consent-inner{ display:flex; flex-direction:column; max-height:min(80vh,46rem); padding:1.5rem 1.4rem 1.4rem; }
@media (min-width:640px){ .consent-inner{ padding:1.7rem 1.65rem 1.55rem; } }
.consent-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
/* Valt er nog iets onder de rand, dan lost de tekst op in plaats van af te
   breken — hetzelfde masker als de hero. De klasse gaat weg zodra je beneden
   bent, zodat de laatste regel wél scherp staat. */
.consent-scroll.has-more{
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 2.4rem),transparent 100%);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 2.4rem),transparent 100%);
}
.consent-foot{ flex:0 0 auto; margin-top:1.25rem; }
.consent.is-detailed .consent-foot{ border-top:1px solid rgba(28,82,83,.14); padding-top:1.15rem; }

.consent-title{
  font-family:'Fraunces',Georgia,serif;
  font-variation-settings:'SOFT' 45,'WONK' 1,'opsz' 40;
  font-weight:300; letter-spacing:-.02em; line-height:1.1;
  font-size:1.45rem; color:var(--ink);
}
.consent-title:focus{ outline:none; }
.consent-body{ margin-top:.7rem; font-size:14.5px; line-height:1.65; color:rgba(28,82,83,.86); text-wrap:pretty; }

.consent-policy{ margin-top:.7rem; font-size:13.5px; }

/* Twee gelijkwaardige knoppen naast elkaar — zelfde maat, zelfde gewicht. */
.consent-actions{ display:grid; gap:.6rem; grid-template-columns:1fr 1fr; }
.consent-save{ width:100%; margin-top:.6rem; }
.consent-save[hidden]{ display:none; }
.consent-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:.7rem 1rem; border-radius:999px;
  font-size:14px; font-weight:600; letter-spacing:.01em; text-align:center;
  transition:transform .35s var(--ease), background-color .25s ease, border-color .25s ease, box-shadow .35s var(--ease);
}
.consent-btn-yes{
  background:var(--ink); color:var(--cream); border:1.5px solid var(--ink);
  box-shadow:0 1px 2px rgba(28,82,83,.18), 0 10px 22px -12px rgba(28,82,83,.55);
}
.consent-btn-no{ background:#fff; color:var(--ink); border:1.5px solid var(--ink); }
@media (hover:hover){
  .consent-btn-yes:hover{ transform:translateY(-2px); background:var(--deep); border-color:var(--deep); }
  .consent-btn-no:hover{ transform:translateY(-2px); background:rgba(144,218,217,.18); }
}
.consent-btn:active{ transform:translateY(0); }

.consent-more{
  display:block; width:100%; margin-top:.85rem; padding:.35rem 0;
  font-size:13.5px; font-weight:600; color:rgba(28,82,83,.72);
  text-underline-offset:4px; transition:color .25s ease;
}
@media (hover:hover){ .consent-more:hover{ color:var(--ink); text-decoration:underline; } }

/* ── Tweede laag: per soort kiezen ──────────────────────────────────── */
.consent-details{ margin-top:1.3rem; border-top:1px solid rgba(28,82,83,.16); padding-top:1.1rem; }
.consent-details[hidden]{ display:none; }

.consent-cat{ padding:.95rem 0; border-bottom:1px solid rgba(28,82,83,.12); }
.consent-cat:last-of-type{ border-bottom:0; padding-bottom:.9rem; }
.consent-cat-head{ display:flex; align-items:center; justify-content:space-between; gap:1rem; width:100%; text-align:left; }
.consent-cat-name{ font-size:14.5px; font-weight:600; color:var(--ink); }
.consent-cat-note{ margin-top:.4rem; font-size:13px; line-height:1.6; color:rgba(28,82,83,.72); padding-right:3.4rem; text-wrap:pretty; }

/* Noodzakelijk kan niet uit: de boog staat al open, ingevuld. */
.consent-locked{ display:inline-flex; align-items:center; gap:.55rem; font-size:12px; font-weight:600; letter-spacing:.02em; color:rgba(28,82,83,.6); white-space:nowrap; }
.consent-locked::before{
  content:''; flex:0 0 auto; width:13px; height:9px;
  border-radius:999px 999px 1px 1px;
  background:rgba(28,82,83,.42); border:1px solid rgba(28,82,83,.42);
}

.consent-sw{
  flex:0 0 auto; position:relative; width:44px; height:26px; border-radius:999px;
  background:rgba(28,82,83,.24); border:1px solid transparent;
  transition:background-color .3s ease;
}
.consent-sw::after{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:999px; background:#FFFCF4;
  box-shadow:0 1px 2px rgba(28,82,83,.35);
  transition:transform .35s var(--ease);
}
[role="switch"][aria-checked="true"] .consent-sw{ background:var(--ink); }
[role="switch"][aria-checked="true"] .consent-sw::after{ transform:translateX(18px); }
[role="switch"]:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:6px; }

.consent-close{
  position:absolute; top:.75rem; right:.75rem;
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:999px; color:rgba(28,82,83,.6);
  transition:background-color .25s ease, color .25s ease;
}
.consent-close[hidden]{ display:none; }
@media (hover:hover){ .consent-close:hover{ background:rgba(28,82,83,.08); color:var(--ink); } }

/* Voorkeurenknop in de voetregel — leest als de links ernaast. */
.consent-reopen{ font:inherit; color:inherit; cursor:pointer; transition:color .2s ease; }
.on-dark .consent-reopen:hover{ color:rgba(251,244,225,.85); }

@media (prefers-reduced-motion:reduce){
  .consent{ transition:opacity .2s linear; transform:none; }
  .consent-btn, .consent-sw, .consent-sw::after{ transition:none; }
  .consent-btn:hover{ transform:none; }
}