/* ============================================================
   FIXED — Foundation stylesheet
   Phase 1: tokens, reset, typography, layout primitives,
   surface utilities, shell (header / footer), landings hub.
   ============================================================ */

/* ---------- 1. Fonts ---------- */
@font-face{
  font-family:"ID Grotesk";font-style:normal;font-weight:300;font-display:swap;
  src:url("../fonts/IDGrotesk-Light.ttf") format("truetype");
}
@font-face{
  font-family:"ID Grotesk";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/IDGrotesk-Regular.ttf") format("truetype");
}
@font-face{
  font-family:"ID Grotesk";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/IDGrotesk-Medium.ttf") format("truetype");
}
@font-face{
  font-family:"ID Grotesk";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/IDGrotesk-Semibold.ttf") format("truetype");
}
@font-face{
  font-family:"ID Grotesk";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/IDGrotesk-Bold.ttf") format("truetype");
}
@font-face{
  font-family:"ID Grotesk";font-style:italic;font-weight:200;font-display:swap;
  src:url("../fonts/IDGrotesk-ThinItalic.otf") format("opentype");
}
@font-face{
  font-family:"ID Grotesk";font-style:italic;font-weight:300;font-display:swap;
  src:url("../fonts/IDGrotesk-LightItalic.otf") format("opentype");
}

/* ---------- 2. Tokens ---------- */
:root{
  /* Palette */
  --ink:#080808;
  --ink-2:#141414;
  --ink-3:#1c1c1c;
  --cream:#f4f1ec;
  --cream-2:#efe9de;
  --gold:#c9a96e;
  --gold-2:#b0863f;
  --gold-3:#a8854a;
  --mute:rgba(244,241,236,.55);
  --mute-ink:rgba(28,28,28,.62);
  --hair:rgba(244,241,236,.10);
  --hair-ink:rgba(28,28,28,.12);

  /* Typography */
  --ff:"ID Grotesk","Helvetica Neue",Arial,sans-serif;
  --fw-light:300;
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  --fs-eyebrow:.6875rem;     /* 11px */
  --fs-micro:.75rem;         /* 12px */
  --fs-body:1rem;            /* 16px */
  --fs-lead:1.125rem;        /* 18px */
  --fs-h6:1.25rem;
  --fs-h5:1.5rem;
  --fs-h4:2rem;
  --fs-h3:2.75rem;
  --fs-h2:clamp(2.5rem, 5vw, 4.5rem);
  --fs-h1:clamp(3.5rem, 9vw, 8rem);

  --lh-tight:.95;
  --lh-snug:1.15;
  --lh-body:1.55;
  --lh-loose:1.8;

  --ls-eyebrow:.32em;
  --ls-display:-.02em;

  /* Spacing scale (4-pt) */
  --sp-1:.25rem;
  --sp-2:.5rem;
  --sp-3:.75rem;
  --sp-4:1rem;
  --sp-5:1.5rem;
  --sp-6:2rem;
  --sp-7:3rem;
  --sp-8:4rem;
  --sp-9:6rem;
  --sp-10:8rem;
  --sp-11:12rem;

  /* Layout */
  --container:1280px;
  --container-wide:1480px;
  --gutter:clamp(1.25rem, 4vw, 3rem);
  --radius-sm:2px;
  --radius:4px;
  --radius-lg:8px;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur-1:160ms;
  --dur-2:280ms;
  --dur-3:520ms;
  --dur-4:900ms;

  /* Z */
  --z-base:1;
  --z-overlay:10;
  --z-header:50;
  --z-modal:80;

  color-scheme:dark;
}

/* ---------- 3. Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0;}
body{scrollbar-width:none;-ms-overflow-style:none;}
body{
  font-family:var(--ff);
  font-weight:var(--fw-regular);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--cream);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  min-height:100dvh;
  overflow-x:hidden;
}
img,svg,video,canvas{display:block;max-width:100%;height:auto;}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0;}
button{cursor:pointer;}
a{color:inherit;text-decoration:none;}
ul,ol{list-style:none;}
::selection{background:var(--gold);color:var(--ink);}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ---------- 4. Typography ---------- */
.display{
  font-weight:var(--fw-bold);
  font-size:var(--fs-h1);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-display);
}
.display em{font-style:italic;font-weight:var(--fw-light);color:var(--gold);}

h1,.h1{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);font-weight:var(--fw-bold);}
h2,.h2{font-size:var(--fs-h2);line-height:var(--lh-snug);letter-spacing:-.015em;font-weight:var(--fw-semibold);}
h3,.h3{font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:-.01em;font-weight:var(--fw-semibold);}
h4,.h4{font-size:var(--fs-h4);line-height:var(--lh-snug);font-weight:var(--fw-medium);}
h5,.h5{font-size:var(--fs-h5);line-height:var(--lh-snug);font-weight:var(--fw-medium);}
h6,.h6{font-size:var(--fs-h6);line-height:var(--lh-snug);font-weight:var(--fw-medium);}
p{max-width:60ch;}
.lead{font-size:var(--fs-lead);color:var(--mute);font-weight:var(--fw-light);}

em{font-style:italic;color:var(--gold);font-weight:var(--fw-light);}

.eyebrow{
  display:inline-block;
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-medium);
  text-transform:uppercase;
  letter-spacing:var(--ls-eyebrow);
  color:var(--gold);
}
.micro{font-size:var(--fs-micro);color:var(--mute);}
.mono-num{font-feature-settings:"tnum" 1,"lnum" 1;}

/* ---------- 5. Layout primitives ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.container.wide{max-width:var(--container-wide);}
.container.tight{max-width:960px;}

.stack > * + *{margin-top:var(--stack, var(--sp-5));}
.stack-sm{--stack:var(--sp-3);}
.stack-md{--stack:var(--sp-5);}
.stack-lg{--stack:var(--sp-7);}

.row{display:flex;flex-wrap:wrap;gap:var(--gap, var(--sp-4));align-items:center;}
.row.between{justify-content:space-between;}
.row.end{justify-content:flex-end;}

.grid{display:grid;gap:var(--gap, var(--sp-5));}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}

@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr);}
}

.section{padding-block:clamp(4rem, 10vw, 9rem);position:relative;}
.section-tight{padding-block:clamp(3rem, 6vw, 5rem);}

.rule{display:block;width:48px;height:1px;background:var(--gold);}
.rule.full{width:100%;background:var(--hair);}

/* ---------- 6. Surface utilities ---------- */
.surface-ink{background:var(--ink);color:var(--cream);}
.surface-cream{background:var(--cream);color:var(--ink-3);}
.surface-cream .eyebrow{color:var(--gold-3);}
.surface-cream em{color:var(--gold-2);}
.surface-cream .lead{color:var(--mute-ink);}

.grain{position:absolute;inset:0;pointer-events:none;z-index:1;mix-blend-mode:overlay;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ---------- 7. Buttons & links ---------- */
.btn{
  --btn-bg:transparent;
  --btn-fg:var(--cream);
  --btn-bd:var(--cream);
  display:inline-flex;align-items:center;gap:var(--sp-3);
  padding:.95rem 1.6rem;
  font-size:var(--fs-micro);font-weight:var(--fw-medium);
  letter-spacing:.18em;text-transform:uppercase;
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  border-radius:var(--radius-sm);
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:hover{--btn-bg:var(--cream);--btn-fg:var(--ink);--btn-bd:var(--cream);transform:translateY(-1px);}
.btn.gold{--btn-bg:var(--gold);--btn-fg:var(--ink);--btn-bd:var(--gold);}
.btn.gold:hover{--btn-bg:transparent;--btn-fg:var(--gold);--btn-bd:var(--gold);}
.btn.ghost{--btn-bg:transparent;--btn-fg:var(--cream);--btn-bd:rgba(244,241,236,.3);}
.btn .arrow{display:inline-block;transition:transform var(--dur-2) var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}

.link-inline{position:relative;color:var(--gold);font-weight:var(--fw-medium);}
.link-inline::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(.4);transform-origin:left;transition:transform var(--dur-2) var(--ease);}
.link-inline:hover::after{transform:scaleX(1);}

/* ---------- 8. Shell — header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:var(--z-header);
  padding:var(--sp-4) var(--gutter);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(to bottom, rgba(8,8,8,.85), rgba(8,8,8,0));
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
}
.site-header.is-scrolled{background:rgba(8,8,8,.92);border-bottom:1px solid var(--hair);}

.brand{display:inline-flex;align-items:center;gap:var(--sp-3);font-weight:var(--fw-bold);letter-spacing:.32em;font-size:.875rem;}
.brand-dot{width:6px;height:6px;background:var(--gold);border-radius:50%;}

.site-nav{display:flex;gap:var(--sp-6);align-items:center;}
.site-nav a{font-size:var(--fs-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);transition:color var(--dur-1) var(--ease);}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:var(--cream);}

.nav-toggle{display:none;width:42px;height:42px;border:none;background:transparent;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.nav-close{display:none;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:18px;height:1px;background:var(--cream);position:relative;
}
.nav-toggle span::before{position:absolute;top:-5px;}
.nav-toggle span::after{position:absolute;top:5px;}

@media (max-width:760px){
  .site-nav{display:none;}
  .nav-toggle{display:inline-flex;}
}

/* ---------- 9. Hero ---------- */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex;align-items:flex-end;
  padding:var(--sp-9) var(--gutter) var(--sp-8);
  overflow:hidden;
  isolation:isolate;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(120% 80% at 50% 30%, #181818 0%, #080808 60%);
}
.hero.has-bg::before{
  background:var(--hero-bg) center/cover no-repeat, #080808;
  filter:saturate(.92) contrast(1.05);
}
.hero.has-bg::after{
  background:
    linear-gradient(to top, rgba(8,8,8,.96) 0%, rgba(8,8,8,.55) 45%, rgba(8,8,8,.25) 100%),
    linear-gradient(to right, rgba(8,8,8,.55) 0%, transparent 60%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(8,8,8,.9) 0%, rgba(8,8,8,.3) 50%, transparent 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--container-wide);margin-inline:auto;}
.hero-meta{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--sp-6);}
.hero-title{font-size:var(--fs-h1);line-height:var(--lh-tight);letter-spacing:var(--ls-display);font-weight:var(--fw-bold);}
.hero-title em{display:block;font-weight:var(--fw-light);color:var(--gold);}
.hero-sub{max-width:42ch;color:var(--mute);font-weight:var(--fw-light);}
.hero-scroll{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--mute);}
.hero-scroll .bar{width:36px;height:1px;background:var(--gold);}

/* ---------- 10. Landings Hub ---------- */
.hub{position:relative;}
.hub-head{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);
  align-items:end;margin-bottom:var(--sp-8);
}
.hub-head h2{max-width:14ch;}
.hub-head p{justify-self:end;max-width:48ch;color:var(--mute);}
@media (max-width:780px){.hub-head{grid-template-columns:1fr;}.hub-head p{justify-self:start;}}

.hub-grid{display:grid;grid-template-columns:repeat(12, minmax(0,1fr));gap:var(--sp-4);}
@media (max-width:980px){.hub-grid{grid-template-columns:repeat(6, minmax(0,1fr));}}
@media (max-width:560px){.hub-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--sp-3);}}

.hub-card{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  grid-column:span 4;
  min-height:360px;
  padding:var(--sp-6);
  background:var(--ink-2);
  border:1px solid var(--hair);
  overflow:hidden;isolation:isolate;
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.hub-card.feature{grid-column:span 8;min-height:520px;}
.hub-card.tall{grid-column:span 4;min-height:520px;}
.hub-card.wide{grid-column:span 8;}

@media (max-width:980px){
  .hub-card{grid-column:span 3;}
  .hub-card.feature,.hub-card.tall,.hub-card.wide{grid-column:span 6;}
}
@media (max-width:560px){
  .hub-card,
  .hub-card.feature,.hub-card.tall,.hub-card.wide{grid-column:span 2;min-height:300px;}
}

.hub-card .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform var(--dur-4) var(--ease-out);}
.hub-card .bg-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(to top, rgba(8,8,8,.92) 0%, rgba(8,8,8,.55) 55%, rgba(8,8,8,.25) 100%);}
.hub-card:hover{border-color:rgba(201,169,110,.35);}
.hub-card:hover .bg{transform:scale(1.04);}
.hub-card:hover .hub-card-cta .arrow{transform:translateX(6px);}

.hub-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);position:relative;z-index:2;}
.hub-card-idx{font-size:var(--fs-eyebrow);letter-spacing:.3em;color:var(--mute);}
.hub-card-tag{font-size:var(--fs-eyebrow);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);}
.hub-card-body{position:relative;z-index:2;display:flex;flex-direction:column;gap:var(--sp-3);}
.hub-card-title{font-size:clamp(1.5rem, 2.6vw, 2.25rem);line-height:1.05;font-weight:var(--fw-semibold);letter-spacing:-.01em;}
.hub-card-title em{color:var(--gold);font-weight:var(--fw-light);}
.hub-card-desc{color:var(--mute);font-size:.95rem;max-width:36ch;}
.hub-card-cta{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--cream);margin-top:var(--sp-4);}
.hub-card-cta .arrow{display:inline-block;transition:transform var(--dur-2) var(--ease);}

/* ---------- 11. Footer ---------- */
.site-footer{
  position:relative;
  padding:var(--sp-9) var(--gutter) var(--sp-5);
  background:var(--ink);
  border-top:1px solid var(--hair);
  overflow:hidden;
}
.site-footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
  opacity:.5;
}
.footer-inner{
  display:grid;gap:var(--sp-6);
  grid-template-columns:1.3fr 1fr 1fr 1fr;
  align-items:start;
  max-width:var(--container-wide);margin-inline:auto;
}
@media (max-width:1024px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:var(--sp-6);display:flex;flex-wrap:wrap;}
  .footer-inner > *{flex:1 1 calc(50% - var(--sp-6));min-width:0;}
  .footer-inner > :nth-child(1){order:1;} /* FIXED */
  .footer-inner > :nth-child(4){order:2;} /* Volg */
  .footer-inner > :nth-child(3){order:3;} /* Michelle */
  .footer-inner > :nth-child(2){order:4;} /* Eser */
}
@media (max-width:560px){
  .footer-inner{grid-template-columns:1fr;display:grid;}
  .footer-inner > *{flex:none;}
  .footer-eyebrow{font-size:.7rem;letter-spacing:.28em;margin-bottom:10px;}
  .footer-contact-link.primary{font-size:1rem;word-break:break-word;}
  .footer-contact-link,.footer-social-link{font-size:.92rem;}
  .footer-social-link{display:inline-flex !important;align-items:center !important;gap:8px !important;flex-wrap:nowrap;}
  .footer-social-link .arrow{display:inline-block !important;font-size:.95rem !important;color:var(--gold) !important;flex-shrink:0;}
  .footer-tag{font-size:.85rem;}
  .footer-logo-img{height:56px;}
}

.footer-mark{display:flex;flex-direction:column;gap:var(--sp-3);align-items:flex-start;text-align:left;}
.footer-logo-img{height:72px;width:auto;display:block;filter:brightness(0) invert(1);opacity:.95;}
.footer-tag{color:var(--gold);font-size:.95rem;line-height:1.5;max-width:30ch;font-weight:var(--fw-light);letter-spacing:.02em;}

.footer-eyebrow{
  display:block;font-size:var(--fs-eyebrow);letter-spacing:.32em;
  text-transform:uppercase;color:var(--gold);margin-bottom:var(--sp-3);
}

.footer-contact,.footer-social{display:flex;flex-direction:column;gap:10px;}
.footer-contact-link,.footer-social-link{
  color:var(--mute);font-size:1rem;line-height:1.4;
  transition:color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
  display:inline-block;width:fit-content;
}
.footer-contact-link:hover,.footer-social-link:hover{color:var(--cream);}
.footer-contact-link.primary{color:var(--cream);font-size:1.15rem;font-weight:var(--fw-semibold);letter-spacing:.01em;}
.footer-contact-link.primary:hover{color:var(--gold);}
.footer-contact-link.muted{color:var(--mute);cursor:default;}
.footer-social-link{display:inline-flex;align-items:center;gap:8px;}
.footer-social-link .arrow{font-size:.85rem;color:var(--gold);transition:transform var(--dur-1) var(--ease);}
.footer-social-link:hover .arrow{transform:translate(2px,-2px);}

.footer-meta{
  max-width:var(--container-wide);margin:var(--sp-8) auto 0;
  padding-top:var(--sp-5);border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-4);
  font-size:var(--fs-micro);color:var(--mute);
  letter-spacing:.06em;
}

/* ---------- 12. Motion — scroll reveals ---------- */
[data-reveal]{
  opacity:0;
  transform:translate3d(0, 28px, 0);
  transition:
    opacity var(--dur-4) var(--ease-out) var(--reveal-delay, 0ms),
    transform var(--dur-4) var(--ease-out) var(--reveal-delay, 0ms);
  will-change:opacity, transform;
}
[data-reveal="fade"]{transform:none;}
[data-reveal="left"]{transform:translate3d(-32px, 0, 0);}
[data-reveal="right"]{transform:translate3d(32px, 0, 0);}
[data-reveal="scale"]{transform:scale(.96);}
.is-revealed{opacity:1 !important;transform:none !important;}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important;}
}

/* Hub-card tilt — set via JS as --rx / --ry */
.hub-card{
  transform:perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  transform-style:preserve-3d;
}

/* ---------- 13. Mobile nav drawer ---------- */
body.nav-locked{overflow:hidden;}

@media (max-width:760px){
  .site-nav{
    position:fixed !important;
    top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    inset:0 !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:100vh !important;
    min-height:100dvh !important;
    width:100vw !important;
    display:flex !important;flex-direction:column !important;
    align-items:stretch !important;justify-content:flex-start !important;
    gap:0 !important;
    padding:calc(var(--header-h) + 16px) 24px 24px !important;
    background:#000 !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    z-index:9000 !important;
    opacity:0;pointer-events:none;
    transform:none !important;
    transition:opacity .25s ease;
    overflow-y:auto !important;
    visibility:hidden;
  }
  .site-nav.is-open{opacity:1 !important;pointer-events:auto !important;visibility:visible !important;}
  .nav-close{
    display:flex !important;
    position:absolute !important;top:16px;right:20px;
    background:transparent;border:none;color:#f4f1ec;
    font-size:2.2rem;line-height:1;width:48px;height:48px;
    align-items:center;justify-content:center;
    cursor:pointer;padding:0;z-index:10;
  }
  .nav-close:hover,.nav-close:focus-visible{color:var(--gold);}
  .site-nav a{
    position:relative;
    font-size:clamp(1.4rem, 5.5vw, 1.9rem) !important;
    line-height:1.1 !important;
    letter-spacing:-.01em !important;text-transform:none !important;
    color:#f4f1ec !important;font-weight:600 !important;
    padding:14px 0 !important;
    border-bottom:1px solid rgba(201,169,110,.22) !important;
    display:flex !important;align-items:center !important;justify-content:space-between !important;
    width:100% !important;
    background:transparent !important;
    transition:color .2s ease, padding-left .25s ease;
  }
  .site-nav a::after{
    content:"→";font-size:1.1rem;color:var(--gold);opacity:.6;
    transition:opacity .2s ease, transform .2s ease;
  }
  .site-nav a:hover,.site-nav a:focus-visible{color:var(--gold) !important;padding-left:16px !important;}
  .site-nav a:hover::after,.site-nav a:focus-visible::after{opacity:1;transform:translateX(4px);}
  body.nav-locked{overflow:hidden;}
  body.nav-locked .site-header{background:#000 !important;border-bottom-color:transparent !important;box-shadow:none !important;}
  body.nav-locked .brand-logo{filter:brightness(0) invert(1) !important;}
  body.nav-locked .nav-toggle span,
  body.nav-locked .nav-toggle span::before,
  body.nav-locked .nav-toggle span::after{background:#f4f1ec !important;}
}

.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg);}
.nav-toggle span::before,.nav-toggle span::after{transition:transform var(--dur-2) var(--ease);}

/* ---------- 14. Clients marquee ---------- */
.clients{
  position:relative;
  padding-block:var(--sp-7);
  border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair);
  overflow:hidden;
  background:linear-gradient(to bottom, #0a0a0a, #080808);
}
.clients-head{
  display:flex;align-items:center;gap:var(--sp-4);
  max-width:var(--container-wide);margin:0 auto var(--sp-5);
  padding-inline:var(--gutter);
}
.clients-head .eyebrow{flex-shrink:0;}
.clients-head .rule{flex:1;height:1px;background:var(--hair);}

.marquee{
  display:flex;width:100%;overflow:hidden;
  mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image:linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track{
  display:flex;gap:var(--sp-8);flex-shrink:0;
  padding-right:var(--sp-8);
  animation:marquee 38s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marquee-item{
  font-family:var(--ff);font-weight:var(--fw-medium);
  font-size:clamp(1.25rem, 2.2vw, 1.75rem);
  color:rgba(244,241,236,.42);
  letter-spacing:.02em;white-space:nowrap;
  transition:color var(--dur-2) var(--ease);
}
.marquee-item .dot{color:var(--gold);margin-inline:var(--sp-5);font-weight:var(--fw-light);}
.marquee-item:hover{color:var(--cream);}

@keyframes marquee{
  from{transform:translate3d(0,0,0);}
  to{transform:translate3d(-100%,0,0);}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
  .marquee{mask-image:none;-webkit-mask-image:none;}
}

/* ---------- 15. Cases rail ---------- */
.cases-head{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);
  align-items:end;margin-bottom:var(--sp-7);
}
.cases-head h2{max-width:14ch;}
.cases-head .meta{justify-self:end;text-align:right;}
.cases-head .meta a{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold);}
@media (max-width:780px){.cases-head{grid-template-columns:1fr;} .cases-head .meta{justify-self:start;text-align:left;}}

.cases-rail{display:grid;gap:var(--sp-5);grid-template-columns:repeat(3, minmax(0,1fr));}
@media (max-width:900px){
  .cases-rail{
    grid-template-columns:repeat(3, 78vw);
    overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:var(--sp-4);margin-inline:calc(var(--gutter) * -1);
    padding-inline:var(--gutter);
    scrollbar-width:thin;
  }
  .case-card{scroll-snap-align:start;}
}

.case-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--ink-2);border:1px solid var(--hair);
  overflow:hidden;isolation:isolate;
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.case-card:hover{border-color:rgba(201,169,110,.35);transform:translateY(-3px);}
.case-card-media{position:relative;aspect-ratio:4/5;overflow:hidden;}
.case-card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(8,8,8,.85), rgba(8,8,8,.15) 60%, transparent);
}
.case-card-media .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform var(--dur-4) var(--ease-out);}
.case-card:hover .case-card-media .bg{transform:scale(1.06);}
.case-card-meta{position:absolute;left:var(--sp-5);right:var(--sp-5);bottom:var(--sp-5);z-index:2;display:flex;flex-direction:column;gap:var(--sp-2);}
.case-card-tag{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold);}
.case-card-title{font-size:1.5rem;font-weight:var(--fw-semibold);line-height:1.1;letter-spacing:-.01em;}
.case-card-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);}
.case-card-body p{color:var(--mute);font-size:.92rem;}
.case-card-stats{display:flex;gap:var(--sp-5);}
.case-card-stat{display:flex;flex-direction:column;gap:2px;}
.case-card-stat strong{font-size:1.5rem;font-weight:var(--fw-bold);color:var(--cream);font-feature-settings:"tnum" 1;line-height:1;}
.case-card-stat span{font-size:var(--fs-eyebrow);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);}

/* ---------- 16. Process / Aanpak ---------- */
.process{position:relative;}
.process-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:end;margin-bottom:var(--sp-8);}
.process-head .lead{justify-self:end;max-width:48ch;}
@media (max-width:780px){.process-head{grid-template-columns:1fr;}.process-head .lead{justify-self:start;}}

.process-list{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:var(--sp-5);}
@media (max-width:980px){.process-list{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:520px){.process-list{grid-template-columns:1fr;}}

.process-step{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-5);border-top:1px solid var(--gold);}
.process-step .num{font-size:var(--fs-eyebrow);letter-spacing:.3em;color:var(--gold);}
.process-step h3{font-size:1.5rem;font-weight:var(--fw-semibold);letter-spacing:-.01em;line-height:1.1;}
.process-step p{color:var(--mute);font-size:.95rem;}
.process-step .step-tag{margin-top:var(--sp-3);font-size:var(--fs-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:var(--mute);}

/* ---------- 17. CTA block ---------- */
.cta{
  position:relative;
  padding:clamp(4rem, 9vw, 8rem) var(--gutter);
  background:linear-gradient(135deg, #0a0a0a 0%, #16120a 100%);
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  overflow:hidden;isolation:isolate;
}
.cta::before{
  content:"";position:absolute;inset:-20% -10% auto auto;width:60vw;height:60vw;
  background:radial-gradient(closest-side, rgba(201,169,110,.18), transparent 70%);
  z-index:-1;filter:blur(8px);
}
.cta-inner{
  max-width:var(--container);margin-inline:auto;
  display:grid;grid-template-columns:1.4fr 1fr;gap:var(--sp-7);align-items:center;
}
@media (max-width:860px){.cta-inner{grid-template-columns:1fr;}}
.cta h2{font-size:clamp(2.25rem, 5vw, 4rem);line-height:1.02;letter-spacing:-.02em;}
.cta h2 em{color:var(--gold);font-weight:var(--fw-light);}
.cta-side{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start;}
.cta-side .micro{color:var(--mute);max-width:36ch;}
.cta-side .cta-lead{color:var(--mute);font-size:clamp(1.1rem, 1.6vw, 1.35rem);line-height:1.5;font-weight:var(--fw-light);max-width:none;width:100%;}
.cta-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;}

/* ---------- 18. Case detail — brief block ---------- */
.brief{
  display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-8);
  align-items:start;
}
.brief dl{display:grid;grid-template-columns:max-content 1fr;column-gap:var(--sp-6);row-gap:var(--sp-3);}
.brief dt{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gold);padding-top:var(--sp-1);}
.brief dd{color:var(--cream);font-size:.95rem;line-height:1.6;border-bottom:1px solid var(--hair);padding-bottom:var(--sp-3);}
.brief dt:last-of-type + dd, .brief dt:last-of-type{padding-bottom:0;border-bottom:0;}
@media (max-width:780px){.brief{grid-template-columns:1fr;gap:var(--sp-6);}}

/* ---------- 19. Photo strip (full-bleed editorial row) ---------- */
.photo-strip{
  display:grid;gap:3px;
  grid-template-columns:repeat(var(--cols, 3), minmax(0,1fr));
  width:100%;
}
.photo-strip .ps{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--ink-2);}
.photo-strip .ps .bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform var(--dur-4) var(--ease-out);}
.photo-strip .ps:hover .bg{transform:scale(1.05);}
.photo-strip .ps-label{position:absolute;left:var(--sp-4);bottom:var(--sp-4);z-index:2;font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:rgba(244,241,236,.7);}
.photo-strip .ps::after{content:"";position:absolute;inset:0;background:linear-gradient(to top, rgba(8,8,8,.6), transparent 40%);z-index:1;}
@media (max-width:780px){.photo-strip{grid-template-columns:repeat(2, minmax(0,1fr));}}

/* ---------- 20. Pull quote ---------- */
.quote{
  position:relative;
  max-width:64ch;margin-inline:auto;
  text-align:center;
  padding:var(--sp-7) var(--gutter);
}
.quote-mark{
  display:block;font-size:6rem;line-height:.4;color:var(--gold);
  margin-bottom:var(--sp-4);font-style:italic;font-weight:var(--fw-light);
}
.quote p{
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  font-weight:var(--fw-light);line-height:1.25;color:var(--cream);
  letter-spacing:-.005em;margin-inline:auto;
}
.quote p em{color:var(--gold);}
.quote cite{
  display:flex;flex-direction:column;gap:var(--sp-1);
  margin-top:var(--sp-5);font-style:normal;
}
.quote cite strong{font-weight:var(--fw-semibold);color:var(--cream);}
.quote cite span{font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--mute);}

/* ---------- 21. Choice screen ---------- */
body.choice-page{overflow:hidden;background:#050505;height:100dvh;color:var(--cream);}
.choice-page h1,.choice-page h2,.choice-page h3,.choice-page p,.choice-page span{color:inherit;}
.choice-page em{color:var(--gold);font-weight:var(--fw-light);}
.choice-page .eyebrow{color:var(--gold);}
.choice-page .choice-sub{color:var(--mute);}
.choice-page .choice-idx{color:rgba(244,241,236,.55);}
.choice-page .choice-foot{color:rgba(244,241,236,.45);}
.choice-page .choice-title em{color:var(--gold);}

/* Tekstvakken + CTA strekken edge-to-edge, helemaal onderaan de helft */
.choice-page .choice-content{padding-inline:0;padding-bottom:0;}
.choice-page .choice-text{
  width:100%;
  max-width:none;
  align-self:stretch;
  margin-top:auto;
}
.choice-page .choice-cta{
  width:100%;
  align-self:stretch;
}
.choice-page .choice-half[data-side="left"] .choice-cta{justify-content:flex-end;flex-direction:row;}
.choice-page .choice-half[data-side="right"] .choice-cta{justify-content:flex-end;flex-direction:row;}
.choice-page .choice-idx,
.choice-page .choice-foot{display:none;}

/* Click-effect simpel: alleen curtain fade, geen grid-collapse of bg-zoom */
@media (min-width:721px){
  .choice-page .is-choosing.choice{grid-template-columns:1fr 1fr !important;}
}
@media (max-width:720px){
  .choice-page .is-choosing.choice{grid-template-columns:1fr !important;grid-template-rows:1fr 1fr !important;}
}
.choice-page .is-choosing .choice-half.is-chosen .choice-bg,
.choice-page .is-choosing .choice-half:not(.is-chosen) .choice-bg{
  transform:none !important;filter:none !important;
}
.choice-page .is-choosing .choice-half:not(.is-chosen) .choice-content{opacity:1 !important;}
.choice-page .is-choosing .choice-divider,
.choice-page .is-choosing .choice-mark{
  opacity:0 !important;
  transition:opacity 200ms var(--ease) !important;
}

/* Nudge-animatie op de buttons — vervangt de pijltjes-hint */
.choice-half[data-side="left"] .choice-cta{
  animation:ctaNudgeL 1.8s ease-in-out infinite;
}
.choice-half[data-side="right"] .choice-cta{
  animation:ctaNudgeR 1.8s ease-in-out infinite;
}
@keyframes ctaNudgeL{
  0%,100%{transform:translateX(0);opacity:.78;}
  50%{transform:translateX(-10px);opacity:1;}
}
@keyframes ctaNudgeR{
  0%,100%{transform:translateX(0);opacity:.78;}
  50%{transform:translateX(10px);opacity:1;}
}
.choice-half:hover .choice-cta{animation:none;opacity:1;transform:none;}
/* Op mobiel altijd animeren, ook bij prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) and (min-width:721px){
  .choice-half .choice-cta{animation:none;}
}

/* Geen hover-zoom op .choice-bg, maar grayscale behouden */
.choice-page .choice-half:hover .choice-bg,
.choice-page .choice-half:focus-visible .choice-bg{
  transform:scale(1.02) !important;
  filter:grayscale(1) saturate(0) !important;
}

/* Rechter half: image vult de ruimte boven het tekstvak, stopt exact daarboven */
.choice-page .choice-half{
  display:flex;
  flex-direction:column;
}
.choice-page .choice-half .choice-bg{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  flex:0 1 auto;
  min-height:0;
  max-height:100%;
  transform:none !important;
  object-fit:cover;
  object-position:center top;
}
video.choice-bg{display:block;}

/* ===========================================================
   BRANDHOUSE — sections geïnspireerd op pitch-deck
   =========================================================== */

/* Hero met grid-bg foto + gecentreerd tekst-paneel (Het Probleem) */
:root{--header-h:68px;}
@media (max-width:760px){:root{--header-h:52px;}}
.hero-problem{
  position:relative;
  margin-top:var(--header-h);
  min-height:calc(100vh - var(--header-h));
  min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  isolation:isolate;
  transform:translateZ(0);
  backface-visibility:hidden;
  padding:var(--sp-7) var(--gutter);
  background:#080808;
}
.hero-problem::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("../img/background.jpg") center/cover no-repeat;
  filter:saturate(.85) contrast(1.05);
}
.hero-problem::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(60% 50% at 50% 50%, rgba(8,8,8,.85) 0%, rgba(8,8,8,.55) 55%, rgba(8,8,8,.25) 100%);
}
.hero-problem-inner{
  position:relative;z-index:2;
  max-width:42rem;
  text-align:center;
  color:var(--cream);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);
}
.hero-problem-inner .eyebrow{
  color:var(--cream);
  font-size:var(--fs-eyebrow);
  letter-spacing:.34em;
  text-transform:uppercase;
  opacity:.85;
}
.hero-problem-inner h1{
  font-size:clamp(2.2rem, 5vw, 4rem);
  line-height:1.05;
  letter-spacing:-.015em;
  font-weight:var(--fw-semibold);
  color:var(--cream);
}
.hero-problem-inner h1 em{
  display:block;
  color:var(--gold);
  font-style:italic;
  font-weight:var(--fw-light);
  margin-top:var(--sp-2);
}
.hero-problem-inner .rule-c{
  width:48px;height:1px;background:var(--gold);
  margin:var(--sp-3) auto;
}
.hero-problem-inner p{
  font-size:var(--fs-lead);
  color:var(--cream);
  font-weight:var(--fw-light);
  line-height:1.55;
  max-width:36ch;
  opacity:.9;
}
.hero-problem-inner p .muted{display:block;opacity:.65;margin-top:var(--sp-2);}
.hero-problem-inner .eyebrow.gold{color:var(--gold);opacity:1;}
.hero-problem-inner p .gold{display:block;color:var(--gold);margin-top:var(--sp-2);font-weight:var(--fw-light);font-style:italic;}

/* Menu altijd zichtbaar (zwarte tekst + lichte subtiele bg op fixed header) */
.site-header{background:var(--cream) !important;backdrop-filter:saturate(160%) blur(10px) !important;-webkit-backdrop-filter:saturate(160%) blur(10px) !important;border-bottom:1px solid rgba(28,28,28,.08) !important;box-shadow:0 1px 4px rgba(0,0,0,.04) !important;}

.brand-section{padding:clamp(4rem, 8vw, 7rem) var(--gutter);}
.brand-section .container{max-width:var(--container-wide);margin-inline:auto;}

/* Het probleem — bold statement op cream */
.section-problem{background:var(--cream);color:var(--ink);}
.section-problem .lead-big{
  font-size:clamp(2rem, 5vw, 4rem);
  line-height:1.1;letter-spacing:-.015em;font-weight:var(--fw-semibold);
  max-width:24ch;
}
.section-problem .lead-big em{color:var(--bronze);font-weight:var(--fw-light);}
.section-problem .lead-sub{
  font-size:var(--fs-lead);color:var(--mute-ink);
  max-width:60ch;margin-top:var(--sp-5);
}

/* Wie zijn wij — founders */
.section-who{background:var(--ink);color:var(--cream);}
.who-head{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-7);align-items:end;margin-bottom:var(--sp-8);}
.who-head h2{color:var(--cream);font-size:var(--fs-h2);line-height:1.05;}
.who-head h2 em{color:var(--gold);font-style:italic;font-weight:var(--fw-light);}
.who-head p{justify-self:end;max-width:42ch;color:var(--mute);}
@media (max-width:780px){.who-head{grid-template-columns:1fr;}.who-head p{justify-self:start;}}
.founders{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6);}
@media (max-width:780px){.founders{grid-template-columns:1fr;}}
.founder{display:flex;flex-direction:column;gap:var(--sp-4);}
.founder-img{aspect-ratio:1/1;overflow:hidden;background:transparent;max-width:clamp(180px, 32vw, 320px);border-radius:50%;}
.founder-img img{width:100%;height:100%;object-fit:cover;display:block;}
.founder-name{font-size:var(--fs-h4);color:var(--cream);font-weight:var(--fw-semibold);}
.founder-name em{color:var(--gold);font-weight:var(--fw-light);}
.founder-role{font-size:var(--fs-eyebrow);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);}
.founder-bio{color:var(--mute);font-size:.95rem;max-width:46ch;}

/* Online zichtbaarheid — devices showcase */
.section-online{background:var(--cream);color:var(--ink);text-align:center;}
.section-online h2{font-size:clamp(2rem, 5vw, 4rem);line-height:1.05;letter-spacing:-.015em;font-weight:var(--fw-semibold);}
.section-online h2 em{color:var(--bronze);font-style:italic;font-weight:var(--fw-light);}
.section-online .eyebrow{color:var(--bronze);letter-spacing:.34em;text-transform:uppercase;font-size:var(--fs-eyebrow);}
.section-online .lead{color:var(--mute-ink);font-size:var(--fs-lead);font-weight:var(--fw-light);max-width:48ch;margin:var(--sp-7) auto 0;}
.nowrap-desktop{white-space:nowrap;}
@media (max-width:900px){.nowrap-desktop{white-space:normal;}}
.devices{display:grid;grid-template-columns:1fr 1.4fr 1.4fr;gap:var(--sp-5);align-items:end;margin-top:var(--sp-9);}
@media (max-width:780px){.devices{grid-template-columns:1fr;gap:var(--sp-6);}}
.device{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);}
.device .frame{background:#1c1c1c;padding:8px;overflow:hidden;width:100%;display:block;position:relative;}
.device.phone .frame{border-radius:24px;max-width:200px;aspect-ratio:9/19;padding:6px;}
.device.tv .frame{border-radius:6px;aspect-ratio:16/10;max-width:480px;}
.device.laptop .frame{border-radius:8px 8px 2px 2px;aspect-ratio:16/10;max-width:520px;position:relative;}
.device.laptop .frame::after{content:"";position:absolute;left:-8%;right:-8%;bottom:-10px;height:6px;background:#1c1c1c;border-radius:0 0 8px 8px;}
.device .frame img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit;}
.device .label{font-size:var(--fs-eyebrow);letter-spacing:.3em;text-transform:uppercase;color:var(--mute-ink);}
.brand-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-7);}
.badge{display:inline-flex;align-items:center;gap:var(--sp-2);padding:8px 16px;background:var(--paper);border:1px solid var(--hair-ink);border-radius:999px;font-size:.85rem;color:var(--ink-3);}
.badge .dot{width:8px;height:8px;border-radius:50%;}
.badge .dot.red{background:#ff3b3b;}
.badge .dot.pink{background:#e1306c;}
.badge .dot.blue{background:#1877f2;}
.badge .dot.yred{background:#ff0000;}
.badge .dot.gold{background:var(--gold);}

/* Gouden divider tussen secties — gecentreerd in de witruimte */
.section-rule-wrap{background:var(--cream);text-align:center;padding:0;}
.section-divider{display:block;width:clamp(220px, 40vw, 480px);height:2px;background:var(--gold);margin:0 auto;}

/* Offline aanwezigheid — 4 portrait cards */
.section-offline{background:var(--cream);color:var(--ink);text-align:center;}
.section-offline .eyebrow{color:var(--bronze);letter-spacing:.34em;text-transform:uppercase;font-size:var(--fs-eyebrow);}
.section-offline h2{font-size:clamp(2rem, 5vw, 4rem);line-height:1.05;letter-spacing:-.015em;font-weight:var(--fw-semibold);margin-top:var(--sp-3);}
.section-offline h2 em{color:var(--bronze);font-style:italic;font-weight:var(--fw-light);}
.offline-grid{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-8);text-align:left;}
@media (max-width:980px){.offline-grid{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:520px){.offline-grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:var(--sp-3);}}
.offline-card{display:flex;flex-direction:column;gap:var(--sp-3);}
.offline-card .photo{aspect-ratio:3/4;overflow:hidden;background:var(--ink-2);position:relative;}
.offline-card .photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-4) var(--ease-out);}
.offline-card:hover .photo img{transform:scale(1.04);}
.offline-card h3{font-size:1.25rem;font-weight:var(--fw-semibold);color:var(--ink-3);margin-top:var(--sp-3);}
.offline-card .tag{font-size:var(--fs-eyebrow);letter-spacing:.28em;text-transform:uppercase;color:var(--bronze);}

/* Visibility (online/offline) — 2-koloms tiles */
.section-visibility{background:var(--cream);color:var(--ink);}
.vis-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}
@media (max-width:780px){.vis-grid{grid-template-columns:1fr;}}
.vis-card{
  background:var(--ink);color:var(--cream);
  padding:clamp(2rem, 4vw, 3.5rem);
  display:flex;flex-direction:column;gap:var(--sp-4);
  min-height:clamp(360px, 50vh, 520px);
  position:relative;overflow:hidden;
}
.vis-card.light{background:var(--sand);color:var(--ink);}
.vis-card .eyebrow{color:var(--gold);}
.vis-card.light .eyebrow{color:var(--bronze);}
.vis-card h3{font-size:clamp(1.75rem, 3.5vw, 2.75rem);line-height:1.05;letter-spacing:-.01em;font-weight:var(--fw-semibold);}
.vis-card h3 em{color:var(--gold);font-weight:var(--fw-light);}
.vis-card.light h3 em{color:var(--bronze);}
.vis-card ul{list-style:none;margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-3);}
.vis-card li{font-size:.92rem;color:var(--mute);padding-left:var(--sp-4);position:relative;}
.vis-card.light li{color:var(--mute-ink);}
.vis-card li::before{content:"";position:absolute;left:0;top:.7em;width:14px;height:1px;background:var(--gold);}
.vis-card.light li::before{background:var(--bronze);}

/* Werkwijze — horizontal flow */
.section-werkwijze{background:var(--ink);color:var(--cream);}
.werkwijze-head h2{color:var(--cream);}
.werkwijze-head h2 em{color:var(--gold);}
.werkwijze-phases{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-8);}
.werkwijze-phase{display:flex;flex-direction:column;gap:var(--sp-4);}
.werkwijze-phase-label{font-size:var(--fs-eyebrow);letter-spacing:.34em;text-transform:uppercase;color:var(--gold);}
.werkwijze-steps{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:var(--sp-4);}
.werkwijze-steps-3{grid-template-columns:repeat(3, minmax(0,1fr));}
@media (max-width:980px){.werkwijze-steps,.werkwijze-steps-3{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:560px){.werkwijze-steps,.werkwijze-steps-3{grid-template-columns:1fr;}}
.werkwijze-step{display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--gold);}
.werkwijze-step .num{font-size:var(--fs-eyebrow);letter-spacing:.3em;color:var(--gold);font-feature-settings:"tnum" 1;}
.werkwijze-step h3{font-size:1.05rem;line-height:1.2;font-weight:var(--fw-semibold);color:var(--cream);}
.werkwijze-step p{font-size:.85rem;color:var(--mute);}

/* Cases 4-grid */
.section-cases{background:var(--cream);color:var(--ink);}
.section-cases .who-head h2{color:var(--ink-3);}
.section-cases .who-head h2 em{color:var(--bronze);}
.section-cases .who-head p{color:var(--mute-ink);}

/* ===== Cases slider ===== */
.cases-slider{margin-top:var(--sp-8);position:relative;}
.cases-track{
  display:flex;
  gap:var(--sp-3);
  overflow-x:auto;overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:0 2px var(--sp-4);
  scrollbar-width:none;
}
.cases-track::-webkit-scrollbar{display:none;}
.cases-track > .case-slide{
  flex:0 0 calc((100% - var(--sp-3) * 3) / 4);
  min-width:0;
}
@media (max-width:1200px){
  .cases-track{gap:var(--sp-4);}
  .cases-track > .case-slide{flex-basis:calc((100% - var(--sp-4) * 2) / 3);}
}
@media (max-width:780px){
  .cases-track > .case-slide{flex-basis:calc((100% - var(--sp-4)) / 2);}
}
@media (max-width:520px){
  .cases-track > .case-slide{flex-basis:88%;}
}

.case-slide{
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--hair-ink);
  overflow:hidden;
  cursor:pointer;
  transition:transform var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.case-slide:focus-visible{outline:2px solid var(--bronze);outline-offset:3px;}
.case-slide:hover{transform:translateY(-6px);border-color:rgba(168,133,74,.5);box-shadow:0 24px 60px -28px rgba(28,28,28,.25);}
.case-slide-media{aspect-ratio:4/5;overflow:hidden;background:var(--ink-2);position:relative;}
.case-slide-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-4) var(--ease-out);}
.case-slide:hover .case-slide-media img{transform:scale(1.06);}
.case-slide-num{
  position:absolute;top:16px;left:16px;
  font-size:var(--fs-eyebrow);letter-spacing:.34em;text-transform:uppercase;
  color:var(--cream);background:rgba(8,8,8,.55);padding:6px 12px;backdrop-filter:blur(6px);
}
.case-slide-body{padding:clamp(1.5rem, 3vw, 2rem);display:flex;flex-direction:column;gap:var(--sp-3);flex:1;}
.case-slide-tag{font-size:var(--fs-eyebrow);letter-spacing:.28em;text-transform:uppercase;color:var(--bronze);line-height:1.4;min-height:calc(1.4em * 2);display:block;}
.case-slide-title{font-size:clamp(1.25rem, 2.4vw, 1.65rem);line-height:1.15;font-weight:var(--fw-semibold);color:var(--ink-3);min-height:calc(1.15em * 3);}
.case-slide-body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.55em * 3);}
.case-slide-title em{color:var(--bronze);font-weight:var(--fw-light);font-style:italic;}
.case-slide-body p{color:var(--mute-ink);font-size:.92rem;line-height:1.55;flex:1;}
.case-slide-cta{
  align-self:flex-start;margin-top:var(--sp-3);
  background:none;border:none;cursor:pointer;
  font-size:var(--fs-eyebrow);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3);
  padding:10px 0;border-bottom:1px solid var(--bronze);
  display:inline-flex;align-items:center;gap:10px;
  transition:color var(--dur-1) var(--ease), gap var(--dur-1) var(--ease);
}
.case-slide-cta:hover{color:var(--bronze);gap:14px;}
.case-slide-cta .arrow{font-size:1rem;letter-spacing:0;}

.cases-controls{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-top:var(--sp-5);}
.cases-arrow{
  width:48px;height:48px;border-radius:50%;
  background:var(--paper);border:1px solid var(--hair-ink);color:var(--ink-3);
  font-size:1.1rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cases-arrow:hover{background:var(--bronze);color:var(--cream);border-color:var(--bronze);}
.cases-dots{display:flex;gap:10px;align-items:center;}
.cases-dot{width:8px;height:8px;border-radius:50%;background:rgba(28,28,28,.18);border:none;cursor:pointer;padding:0;transition:background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);}
.cases-dot.is-active{background:var(--bronze);transform:scale(1.4);}

/* ===== Case modal ===== */
.case-modal-root{position:fixed;inset:0;z-index:1000;display:none;}
.case-modal-root.is-open{display:block;}
.case-modal-backdrop{position:absolute;inset:0;background:rgba(8,8,8,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;animation:caseFadeIn .28s var(--ease) forwards;}
.case-modal{
  position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% + 16px));
  width:min(960px, 92vw);max-height:90vh;max-height:90dvh;
  background:var(--paper);color:var(--ink-3);
  overflow:hidden;
  display:none;flex-direction:column;
  border:1px solid var(--hair-ink);
  box-shadow:0 40px 100px -30px rgba(8,8,8,.55);
  opacity:0;
}
@media (max-width:720px){
  .case-modal-root.is-open{display:flex;align-items:stretch;justify-content:stretch;}
  .case-modal{
    position:fixed !important;
    top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;
    width:100% !important;max-width:100% !important;
    height:100vh !important;height:100dvh !important;max-height:100dvh !important;
    margin:0 !important;border:none !important;border-radius:0 !important;
    transform:none !important;
  }
  .case-modal.is-open{animation:caseSlideUp .3s var(--ease-out) forwards;}
  .case-modal-hero{height:180px !important;flex:none !important;}
  .case-modal-close{
    position:fixed !important;
    top:12px !important;right:12px !important;
    width:44px !important;height:44px !important;border-radius:50% !important;
    font-size:1.6rem !important;font-weight:300 !important;
    background:#000 !important;color:#fff !important;
    border:2px solid #fff !important;
    z-index:100 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
  }
  .case-modal-body{
    padding:1.5rem 1.25rem 3rem !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    flex:1 1 auto !important;
    overflow-y:auto !important;
  }
  .case-modal-title{font-size:1.5rem !important;line-height:1.15 !important;}
  .case-modal-lead{font-size:.95rem !important;}
}
@keyframes caseSlideUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
.case-modal.is-open{display:flex;animation:caseSlideIn .34s var(--ease-out) forwards;}
.case-modal-close{
  position:absolute;top:14px;right:14px;z-index:3;
  width:40px;height:40px;border-radius:50%;
  background:rgba(8,8,8,.55);color:var(--cream);border:none;cursor:pointer;
  font-size:1.5rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-1) var(--ease);
}
.case-modal-close:hover{background:var(--ink);}
.case-modal-hero{
  height:clamp(180px, 28vh, 280px);
  background-size:cover;background-position:center;
  position:relative;flex:none;
}
.case-modal-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, rgba(8,8,8,0) 40%, rgba(8,8,8,.18));}
.case-modal-body{padding:clamp(1.75rem, 3.5vw, 2.75rem);overflow-y:auto;display:flex;flex-direction:column;gap:var(--sp-4);}
.case-modal-badge{font-size:var(--fs-eyebrow);letter-spacing:.32em;text-transform:uppercase;color:var(--bronze);}
.case-modal-title{font-size:clamp(1.6rem, 3.4vw, 2.6rem);line-height:1.1;font-weight:var(--fw-semibold);color:var(--ink-3);}
.case-modal-title em{color:var(--bronze);font-style:italic;font-weight:var(--fw-light);}
.case-modal-lead{font-size:1rem;line-height:1.6;color:var(--mute-ink);max-width:62ch;}
.case-modal-rows{display:flex;flex-direction:column;border-top:1px solid var(--hair-ink);margin-top:var(--sp-2);}
.case-modal-rows > div{display:grid;grid-template-columns:160px 1fr;gap:var(--sp-4);padding:var(--sp-3) 0;border-bottom:1px solid var(--hair-ink);}
.case-modal-rows dt{font-size:var(--fs-eyebrow);letter-spacing:.24em;text-transform:uppercase;color:var(--bronze);}
.case-modal-rows dd{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-3);}
@media (max-width:600px){.case-modal-rows > div{grid-template-columns:1fr;gap:6px;}}
.case-modal-stats{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-3);padding-top:var(--sp-4);border-top:1px solid var(--hair-ink);}
.case-modal-stats > div{text-align:center;display:flex;flex-direction:column;gap:8px;}
.case-modal-stats .num{font-family:'Playfair Display', Georgia, serif;font-size:clamp(1.4rem, 2.6vw, 2rem);color:var(--bronze);line-height:1;}
.case-modal-stats .lbl{font-size:var(--fs-eyebrow);letter-spacing:.24em;text-transform:uppercase;color:var(--mute-ink);}
@media (max-width:600px){.case-modal-stats{grid-template-columns:repeat(2, minmax(0,1fr));}}

body.case-modal-open{overflow:hidden;}

@keyframes caseFadeIn{to{opacity:1;}}
@keyframes caseSlideIn{from{opacity:0;transform:translate(-50%,calc(-50% + 24px));}to{opacity:1;transform:translate(-50%,-50%);}}

/* ===========================================================
   EDITORIAL HERO — 2 alternerende rijen titel + foto
   =========================================================== */
.hero-editorial{
  position:relative;
  padding:clamp(4rem, 8vw, 7rem) var(--gutter);
  background:var(--ink);
  color:var(--cream);
}
.editorial-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
  max-width:var(--container-wide);
  margin-inline:auto;
}
.editorial-row + .editorial-row{margin-top:clamp(3rem, 6vw, 5rem);}
.editorial-text{
  display:flex;flex-direction:column;
  gap:var(--sp-5);
  max-width:48ch;
}
.editorial-row.reverse .editorial-text{
  text-align:right;
  justify-self:stretch;
  align-items:stretch;
  max-width:none;
  margin-left:0;
}
.editorial-row.reverse .editorial-text h1,
.editorial-row.reverse .editorial-text .hero-sub,
.editorial-row.reverse .editorial-text .eyebrow{
  width:100%;
  text-align:right;
}
.editorial-row.reverse .editorial-text .hero-sub{margin-left:auto;}
.editorial-text .eyebrow{color:var(--gold);}
.editorial-text h1{
  color:var(--cream);
  font-size:clamp(2rem, 7vw, 6rem);
  line-height:1.05;
  letter-spacing:var(--ls-display);
  font-weight:var(--fw-bold);
  white-space:nowrap;
}
.editorial-text h1 em{color:var(--gold);font-style:italic;font-weight:var(--fw-light);}
.editorial-text .hero-sub{
  color:var(--mute);
  font-size:var(--fs-lead);
  font-weight:var(--fw-light);
  max-width:42ch;
}
.editorial-row.reverse .hero-sub{margin-left:auto;}
.editorial-image{position:relative;overflow:hidden;}
.editorial-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4/5;
  object-fit:cover;
}
@media (max-width:720px){
  .editorial-row{
    grid-template-columns:1fr;
    gap:var(--sp-5);
  }
  .editorial-row.reverse .editorial-image{order:-1;}
  .editorial-row.reverse .editorial-text{text-align:left;justify-self:start;margin-left:0;}
  .editorial-row.reverse .hero-sub{margin-left:0;}
}

/* Tablet + desktop: video-hoogtes gelijk over beide halves */
@media (min-width:721px){
  .choice-page .choice-half .choice-bg{
    aspect-ratio:auto;
    flex:1 1 auto;
    width:100%;
    height:auto;
    max-height:none;
    min-height:0;
    object-fit:cover;
  }
  /* Gouden em-dash divider — echte tekst, wrapt natuurlijk mee */
.choice-page .sub-divider{
  color:var(--gold);
  margin:0 4px;
}

/* Reserveer altijd ruimte voor 3 regels sub-tekst zodat tekstpanelen gelijk hoog zijn */
  .choice-page .choice-sub{
    min-height:calc(1.55em * 3);
    display:flex;
    align-items:flex-start;
  }
}

/* Mobiel: volledige video-hoogte zichtbaar, tekst kleiner zodat alles op 1 page past */
@media (max-width:720px){
  .choice-page .choice-half .choice-bg{
    aspect-ratio:auto;
    flex:1 1 auto;
    object-fit:cover;
    object-position:center top;
    max-height:none;
  }
  .choice-page .choice-half .choice-bg-video{
    object-fit:cover;
    object-position:center top;
  }
  /* Rechter helft = onderste op mobiel — toon onderkant van de video */
  .choice-page .choice-half[data-side="right"] .choice-bg,
  .choice-page .choice-half[data-side="right"] .choice-bg-video{
    object-position:center bottom;
  }
  .choice-page .choice-text{
    padding:14px 18px;
  }
  .choice-page .choice-text .eyebrow{
    font-size:.65rem;
    letter-spacing:.22em;
  }
  .choice-page .choice-title{
    font-size:clamp(1.8rem, 9vw, 3rem) !important;
    gap:var(--sp-2) !important;
  }
  .choice-page .choice-sub{
    font-size:.78rem;
    line-height:1.4;
  }
  .choice-page .choice-cta{
    font-size:.6rem;
    letter-spacing:.2em;
    padding:8px 0;
  }
  .choice-page .choice-mark-logo{
    width:160px;
  }
}

/* Zwart-wit filter op alle keuze-poort videos */
.choice-page video,
.choice-page video.choice-bg,
.choice-page .choice-bg-video{
  filter:grayscale(1) saturate(0) !important;
}

/* Dual-video bg-container — beide videos stack, JS swapt visibility */
.choice-bg[data-hover-pair]{position:relative;overflow:hidden;}
.choice-bg-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:opacity 220ms ease;
}
.choice-bg-video[data-dir="reverse"]{opacity:0;}
.choice-bg-video.is-active{opacity:1;}
.choice-page .choice-half .choice-content{flex:0 0 auto;}
.choice-page .choice-half .choice-overlay{display:none;}
.choice-page .choice-half .choice-content{
  position:relative;
  flex:0 0 auto;
  height:auto;
  padding-block:0;
}
.choice-page .choice-half .choice-text{margin-top:0;}
.choice-page .choice-half .choice-cta{
  flex-direction:row;
}

/* FIXED-mark bovenaan blijft altijd zichtbaar (geen difference-blend over video) */
.choice-page .choice-mark{
  mix-blend-mode:normal;
}
.choice-page .choice-mark-logo{
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.65));
}

/* Divider + mark schuiven mee met de hover-shift van de halves */
.choice-page .choice-divider,
.choice-page .choice-mark{
  transition:left 700ms var(--ease), opacity 600ms var(--ease);
}
@media (min-width:721px){
  .choice-page .choice:has(.choice-half[data-side="left"]:hover) .choice-divider,
  .choice-page .choice:has(.choice-half[data-side="left"]:hover) .choice-mark{
    left:53.5%;
  }
  .choice-page .choice:has(.choice-half[data-side="right"]:hover) .choice-divider,
  .choice-page .choice:has(.choice-half[data-side="right"]:hover) .choice-mark{
    left:46.5%;
  }
}
.choice{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  height:100dvh;width:100vw;isolation:isolate;
  transition:grid-template-columns 700ms var(--ease);
}
@media (max-width:720px){
  .choice{grid-template-columns:1fr;grid-template-rows:1fr 1fr;}
}

.choice-half{
  position:relative;display:flex;overflow:hidden;color:var(--cream);
  text-decoration:none;
  cursor:pointer;
  transition:filter 600ms var(--ease);
}
/* CLEAN REWRITE — foto's natuurlijk, tekst altijd leesbaar */
.choice-bg{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center;
  filter:saturate(1.1) contrast(1.04);
  transform:scale(1.02);
  transition:transform 1400ms var(--ease-out);
}
.choice-half:hover .choice-video-canvas,
.choice-half:focus-visible .choice-video-canvas{transform:scale(1.04);}
.choice-video-canvas{transition:opacity 600ms var(--ease), transform 1400ms var(--ease-out);}

.choice-overlay{display:none;}

.choice-video-canvas{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;display:block;
  pointer-events:none;
  opacity:0;
  transition:opacity 600ms var(--ease);
}
.choice-video-canvas.is-ready{opacity:1;}

.choice-source-video{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;
  opacity:0;pointer-events:none;
}

.choice-content{position:relative;z-index:2;}

.choice-text{
  position:relative;
  padding:clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 2.5vw, 2.5rem);
  background:rgba(5,5,5,.62);
  border:1px solid rgba(244,241,236,.12);
  border-radius:2px;
  width:max-content;
  max-width:100%;
}
.choice-page .choice-sub{max-width:none;width:100%;}

.choice-page .choice-idx{color:rgba(244,241,236,.85) !important;text-shadow:0 1px 8px rgba(0,0,0,.7);}
.choice-page .choice-foot,.choice-page .choice-mark{text-shadow:0 1px 8px rgba(0,0,0,.7);}
.choice-page .choice-text .eyebrow{color:var(--gold) !important;}
.choice-page .choice-title{color:#ffffff !important;}
.choice-page .choice-title em{color:var(--gold) !important;}
.choice-page .choice-sub{color:rgba(244,241,236,.85) !important;}
.choice-page .choice-cta{color:#ffffff !important;text-shadow:0 1px 8px rgba(0,0,0,.7);}

.choice-content{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(2rem, 6vw, 5rem);
  width:100%;gap:var(--sp-7);
}
.choice-half[data-side="left"] .choice-content{align-items:flex-start;text-align:left;}
.choice-half[data-side="right"] .choice-content{align-items:flex-end;text-align:right;}

.choice-idx{
  font-size:var(--fs-eyebrow);letter-spacing:.32em;
  color:rgba(244,241,236,.55);text-transform:uppercase;
  font-feature-settings:"tnum" 1;
}
.choice-text{display:flex;flex-direction:column;gap:var(--sp-4);}
.choice-half[data-side="right"] .choice-text{align-items:flex-end;}
.choice-title{
  font-size:clamp(3rem, 7vw, 6.5rem);
  line-height:.94;letter-spacing:-.025em;font-weight:var(--fw-bold);
}
.choice-title em{color:var(--gold);font-weight:var(--fw-light);}
.choice-sub{
  color:var(--mute);font-size:1rem;font-weight:var(--fw-light);
  max-width:34ch;line-height:1.55;
}
.choice-cta{
  display:inline-flex;align-items:center;gap:var(--sp-4);
  font-size:var(--fs-micro);letter-spacing:.24em;text-transform:uppercase;
  color:var(--cream);padding:var(--sp-3) 0;
  border-top:1px solid var(--gold);
  transition:gap var(--dur-2) var(--ease), letter-spacing var(--dur-2) var(--ease);
}
.choice-half[data-side="right"] .choice-cta{flex-direction:row-reverse;}
.choice-half:hover .choice-cta,
.choice-half:focus-visible .choice-cta{gap:var(--sp-6);letter-spacing:.3em;}
.choice-cta .arrow{transition:transform var(--dur-2) var(--ease);}
.choice-half[data-side="left"]:hover .choice-cta .arrow{transform:translateX(8px);}
.choice-half[data-side="right"]:hover .choice-cta .arrow{transform:translateX(-8px);}

@media (min-width:721px){
  .choice:has(.choice-half[data-side="left"]:hover){grid-template-columns:1.07fr 0.93fr;}
  .choice:has(.choice-half[data-side="right"]:hover){grid-template-columns:0.93fr 1.07fr;}
}

.choice-divider{
  position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:1px;
  background:linear-gradient(to bottom, transparent 0%, var(--gold) 18%, var(--gold) 82%, transparent 100%);
  opacity:.45;z-index:3;pointer-events:none;
  transition:opacity 600ms var(--ease);
}
.choice:hover .choice-divider{opacity:.75;}
@media (max-width:720px){
  .choice-divider{
    left:0;right:0;top:50%;bottom:auto;width:auto;height:1px;
    background:linear-gradient(to right, transparent, var(--gold) 18%, var(--gold) 82%, transparent);
    transform:translateY(-50%);
  }
}

.choice-mark{
  position:absolute;top:var(--sp-6);left:50%;transform:translateX(-41%);
  display:inline-flex;align-items:center;gap:var(--sp-3);
  font-weight:var(--fw-bold);letter-spacing:.42em;font-size:.875rem;
  z-index:4;color:var(--cream);
  mix-blend-mode:difference;
}
@media (max-width:720px){.choice-mark{display:none !important;}}

/* Mobile homepage: CTA pulse + 2e video centered */
@media (max-width:720px){
  @keyframes ctaPulseGap{0%,100%{gap:var(--sp-4);letter-spacing:.24em;}50%{gap:var(--sp-6);letter-spacing:.3em;}}
  @keyframes arrowPulseLeft{0%,100%{transform:translateX(0);}50%{transform:translateX(8px);}}
  @keyframes arrowPulseRight{0%,100%{transform:translateX(0);}50%{transform:translateX(-8px);}}
  .choice-page .choice-cta{animation:ctaPulseGap 2.4s ease-in-out infinite;}
  .choice-page .choice-half[data-side="left"] .choice-cta .arrow{animation:arrowPulseLeft 2.4s ease-in-out infinite;}
  .choice-page .choice-half[data-side="right"] .choice-cta .arrow{animation:arrowPulseRight 2.4s ease-in-out infinite;}
  .choice-page .choice-half[data-side="right"] .choice-bg-video{object-position:center center !important;}
}
.choice-mark .dot{width:6px;height:6px;background:var(--gold);border-radius:50%;}

.choice-foot{
  position:absolute;bottom:var(--sp-5);left:50%;transform:translateX(-50%);
  z-index:4;font-size:var(--fs-eyebrow);letter-spacing:.32em;text-transform:uppercase;
  color:rgba(244,241,236,.45);
  animation:choice-pulse 3.2s ease-in-out infinite;
  display:inline-flex;align-items:center;gap:var(--sp-3);
}
.choice-foot::before,.choice-foot::after{
  content:"";width:24px;height:1px;background:var(--gold);opacity:.5;display:block;
}
@keyframes choice-pulse{0%,100%{opacity:.45;}50%{opacity:.95;}}

/* Chosen state — collapse non-selected side */
.is-choosing.choice{transition:grid-template-columns 800ms var(--ease);}
@media (min-width:721px){
  .is-choosing.choice:has(.choice-half.is-chosen[data-side="left"]){grid-template-columns:1fr 0fr;}
  .is-choosing.choice:has(.choice-half.is-chosen[data-side="right"]){grid-template-columns:0fr 1fr;}
}
@media (max-width:720px){
  .is-choosing.choice:has(.choice-half.is-chosen:first-child){grid-template-rows:1fr 0fr;}
  .is-choosing.choice:has(.choice-half.is-chosen:last-child){grid-template-rows:0fr 1fr;}
}
.choice-half.is-chosen .choice-bg{
  transform:scale(1.18);
  filter:saturate(1.15) contrast(1) brightness(1);
  transition:transform 1100ms var(--ease-out), filter 800ms var(--ease);
}
.is-choosing .choice-half:not(.is-chosen) .choice-content{opacity:0;transition:opacity 350ms var(--ease);}
.is-choosing .choice-half:not(.is-chosen) .choice-bg{filter:blur(10px) brightness(.3);transition:filter 600ms var(--ease);}
.is-choosing .choice-mark,
.is-choosing .choice-foot,
.is-choosing .choice-divider{opacity:0;transition:opacity 300ms var(--ease);}

/* ---------- 22. Cinematic curtain ---------- */
.curtain{
  position:fixed;inset:0;z-index:999;pointer-events:none;
  background:#050505;
  opacity:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-5);
  transition:opacity 500ms var(--ease);
}
.curtain.is-active{opacity:1;transition:opacity 600ms 350ms var(--ease);}
.curtain-mark{
  font-weight:var(--fw-bold);letter-spacing:.5em;
  font-size:clamp(1.5rem, 3vw, 2.25rem);color:var(--cream);
  opacity:0;transform:translateY(8px) scale(.96);
  transition:opacity 500ms 500ms var(--ease-out), transform 600ms 500ms var(--ease-out);
}
.curtain-dot{color:var(--gold);}
.curtain-line{
  width:0;height:1px;background:var(--gold);
  transition:width 700ms 600ms var(--ease-out);
}
.curtain.is-active .curtain-mark{opacity:1;transform:none;}
.curtain.is-active .curtain-line{width:120px;}

@media (prefers-reduced-motion: reduce) and (min-width:721px){
  .choice,.choice-bg,.choice-cta,.curtain,.curtain-mark,.curtain-line{transition:none !important;animation:none !important;}
  .curtain.is-active{opacity:1;}
}
/* Op mobiel: forceer choice-cta animatie ook bij reduce-motion */
@media (max-width:720px){
  .choice-half[data-side="left"] .choice-cta{animation:ctaNudgeL 1.8s ease-in-out infinite !important;}
  .choice-half[data-side="right"] .choice-cta{animation:ctaNudgeR 1.8s ease-in-out infinite !important;}
}

/* ---------- 23. Logo (SVG) sizing per surface ---------- */
.brand-logo{
  height:44px;width:auto;display:block;
  transition:opacity var(--dur-2) var(--ease);
  filter:brightness(0);
}
.brand:hover .brand-logo{opacity:.85;}

/* Footer brand — logo zit links boven de lead, ruim formaat */
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;}
.footer-brand h3.footer-logo{
  display:inline-block;line-height:0;font-size:0;letter-spacing:0;
  margin:0 0 var(--sp-4) 0;
}
.footer-brand h3.footer-logo img{
  height:56px;width:auto;display:block;
}
.footer-brand p{margin-top:0;}

.choice-mark{font-size:0;line-height:0;letter-spacing:0;gap:0;}
.choice-mark-logo{
  height:auto;width:350px;display:block;max-width:80vw;
}

.curtain-mark{font-size:0;line-height:0;letter-spacing:0;}
.curtain-logo{
  height:clamp(28px, 4vw, 42px);width:auto;display:block;
}

.choice-title{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-start;width:max-content;max-width:100%;}
.choice-half[data-side="right"] .choice-title{align-items:flex-end;}
.choice-title em{display:inline-block;width:max-content;}
.choice-title-logo{
  height:clamp(32px, 5vw, 56px);width:auto;display:block;
}

/* ============================================================
   25. LIGHT-FIRST THEME (palette uit stylesheet)
   Body, header, hubs, marquee, cases, process → cream/zand met
   bronze accent. Heroes, CTA en footer blijven cinematic donker.
   ============================================================ */

:root{
  /* Nieuwe tokens uit officiële palette */
  --bronze:#a8854a;        /* Brons / donker goud */
  --sand:#d9d2c4;          /* Zand — subtiele vlakken/cards */
  --grey:#666666;          /* Grijs — bijschriften */
  --paper:#ffffff;         /* Wit — kaarten op licht */
  --cream-2:#efe9de;       /* (al eerder) lichte secondaire */
}
html{color-scheme:light;}

/* --- Body switch --- */
body{
  background:var(--cream);
  color:var(--ink-3);
}
::selection{background:var(--gold);color:var(--ink);}
:focus-visible{outline:1px solid var(--bronze);outline-offset:3px;}

/* --- Default copy colors on light --- */
h1,h2,h3,h4,h5,h6{color:var(--ink-3);}
em{color:var(--bronze);font-weight:var(--fw-light);}
.lead{color:var(--mute-ink);}
.eyebrow{color:var(--bronze);}
.micro{color:var(--grey);}

/* --- Header — light glass --- */
.site-header{
  background:var(--cream) !important;
  backdrop-filter:saturate(160%) blur(10px) !important;
  -webkit-backdrop-filter:saturate(160%) blur(10px) !important;
  border-bottom:1px solid rgba(28,28,28,.08) !important;
  box-shadow:0 1px 4px rgba(0,0,0,.04) !important;
  padding-block:var(--sp-2);
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  inset:0 0 auto 0 !important;
  z-index:var(--z-header);
}
@media (max-width:760px){
  .site-header{
    position:fixed;
    top:0;left:0;right:0;
    padding-block:4px;
  }
  .brand-logo{height:40px;}
}
.site-header.is-scrolled{
  background:var(--cream) !important;
  border-bottom:1px solid rgba(28,28,28,.08) !important;
  backdrop-filter:saturate(160%) blur(10px) !important;
  -webkit-backdrop-filter:saturate(160%) blur(10px) !important;
}
.site-nav a{color:#000;}
.site-nav a:hover,.site-nav a[aria-current="page"]{color:#000;}
.nav-toggle{border:none;background:transparent;}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{background:var(--ink-3);}

/* Mobile drawer — blijft donker als overlay-moment */
@media (max-width:760px){
  .site-nav{background:rgba(8,8,8,.96);}
  .site-nav a{color:var(--cream);}
}

/* --- Buttons op licht --- */
.btn{--btn-fg:var(--ink-3);--btn-bd:var(--ink-3);}
.btn:hover{--btn-bg:var(--ink-3);--btn-fg:var(--cream);--btn-bd:var(--ink-3);}
.btn.ghost{--btn-fg:var(--ink-3);--btn-bd:rgba(28,28,28,.3);}
.btn.ghost:hover{--btn-bg:var(--ink-3);--btn-fg:var(--cream);}

/* --- Clients marquee — licht --- */
.clients{
  background:linear-gradient(to bottom, #f7f4ef, var(--cream));
  border-top:1px solid var(--hair-ink);
  border-bottom:1px solid var(--hair-ink);
}
.clients-head .rule{background:var(--hair-ink);}
.marquee-item{color:rgba(28,28,28,.4);}
.marquee-item:hover{color:var(--ink-3);}
.marquee-item .dot{color:var(--bronze);}

/* --- Hub cards — zand met paper-overlay over foto --- */
.hub-card{
  background:var(--sand);
  border:1px solid var(--hair-ink);
}
.hub-card .bg-overlay{
  background:linear-gradient(to top, rgba(244,241,236,.92) 0%, rgba(244,241,236,.6) 50%, rgba(244,241,236,.25) 100%);
}
.hub-card:hover{border-color:rgba(168,133,74,.45);}
.hub-card-idx{color:var(--mute-ink);}
.hub-card-tag{color:var(--bronze);}
.hub-card-title{color:var(--ink-3);}
.hub-card-title em{color:var(--bronze);}
.hub-card-desc{color:var(--mute-ink);}
.hub-card-cta{color:var(--ink-3);}

/* --- Case cards (homepage rail) — paper/cream-2 --- */
.case-card{
  background:var(--cream-2);
  border:1px solid var(--hair-ink);
}
.case-card:hover{border-color:rgba(168,133,74,.45);}
.case-card-media::after{
  background:linear-gradient(to top, rgba(244,241,236,.9), rgba(244,241,236,.15) 55%, transparent);
}
.case-card-tag{color:var(--bronze);}
.case-card-title{color:var(--ink-3);}
.case-card-title em{color:var(--bronze);}
.case-card-body p{color:var(--mute-ink);}
.case-card-stat strong{color:var(--ink-3);}
.case-card-stat span{color:var(--mute-ink);}

/* --- Hub head / cases head meta --- */
.hub-head p,.cases-head .meta a,.process-head a,.cases-head a{color:var(--bronze);}

/* --- Process steps --- */
.process-step{border-top:1px solid var(--gold);}
.process-step h3{color:var(--ink-3);}
.process-step p{color:var(--mute-ink);}
.process-step .step-tag{color:var(--grey);}
.process-step .num{color:var(--bronze);}

/* --- Brief block (case detail) --- */
.brief dt{color:var(--bronze);}
.brief dd{color:var(--ink-3);border-bottom:1px solid var(--hair-ink);}

/* --- Pull quote --- */
.quote-mark{color:var(--bronze);}
.quote p{color:var(--ink-3);}
.quote p em{color:var(--bronze);}
.quote cite strong{color:var(--ink-3);}
.quote cite span{color:var(--grey);}

/* --- Stat blocks (sub-page intro grids) --- */
.stack strong.h3{color:var(--ink-3);}

/* --- Grain op licht subtieler --- */
.grain{opacity:.35;mix-blend-mode:multiply;}

/* ============================================================
   26. DARK ISLANDS — Hero / CTA / Footer behouden cinematic feel
   ============================================================ */

/* Hero — text expliciet licht houden ondanks light body */
.hero{color:var(--cream);}
.hero h1,.hero h2,.hero h3{color:var(--cream);}
.hero .lead,.hero .hero-sub{color:var(--mute);}
.hero em{color:var(--gold);}
.hero .eyebrow{color:var(--gold);}
.hero .eyebrow a{color:inherit;}
.hero .hero-scroll{color:var(--mute);}
.hero .hero-scroll .bar{background:var(--gold);}

/* CTA blok — cream-on-dark */
.cta{color:var(--cream);}
.cta h2{color:var(--cream);}
.cta h2 em{color:var(--gold);}
.cta .eyebrow{color:var(--gold);}
.cta-side .micro{color:var(--mute);}
.cta .btn{--btn-fg:var(--cream);--btn-bd:var(--cream);}
.cta .btn:hover{--btn-bg:var(--cream);--btn-fg:var(--ink);--btn-bd:var(--cream);}
.cta .btn.gold{--btn-bg:var(--gold);--btn-fg:var(--ink);--btn-bd:var(--gold);}
.cta .btn.gold:hover{--btn-bg:transparent;--btn-fg:var(--gold);--btn-bd:var(--gold);}
.cta .btn.ghost{--btn-fg:var(--cream);--btn-bd:rgba(244,241,236,.3);}

/* Footer — cream-on-dark (was al donker, expliciet maken) */
.site-footer{color:var(--cream);}
.site-footer h3,.site-footer h4{color:var(--cream);}
.site-footer h4{color:var(--gold);}
.site-footer p,.site-footer .lead{color:var(--mute);}
.site-footer a{color:var(--mute);}
.site-footer a:hover{color:var(--cream);}
.footer-meta{color:var(--mute);}
.footer-meta .uppercase{color:var(--mute);}

/* Photo-strip (case detail) — donkere captie blijft over foto */
.photo-strip .ps-label{color:rgba(244,241,236,.85);}
.photo-strip .ps::after{background:linear-gradient(to top, rgba(8,8,8,.55), transparent 40%);}

/* ---------- 27. Helpers ---------- */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.no-wrap{white-space:nowrap;}
.text-center{text-align:center;}
.text-gold{color:var(--gold);}
.text-mute{color:var(--mute);}
.italic{font-style:italic;}
.uppercase{text-transform:uppercase;letter-spacing:var(--ls-eyebrow);}