/* ==========================================================================
   Royaal — website
   Gebouwd op het Royaal Design System (tokens 1:1 overgenomen).
   Afwijkingen t.o.v. het design system staan onderaan dit bestand benoemd.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. Fonts */
@font-face{font-family:"Royaal Poppins";src:url("../assets/fonts/LT-PoppinsVN-200.woff2") format("woff2");font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:"Royaal Poppins";src:url("../assets/fonts/LT-Poppins-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Royaal Poppins";src:url("../assets/fonts/LT-Poppins-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Royaal Poppins";src:url("../assets/fonts/LT-Poppins-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Royaal Organetto";src:url("../assets/fonts/LT-Organetto-BoldSemiExt.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* --------------------------------------------------------------- 2. Tokens */
:root{
  /* Primitieven — Royaal Donker ÍS zwart */
  --royaal-black:#000000;
  --royaal-black-lift:#1F1F1F;
  --royaal-gold-50:#FBF8EF;--royaal-gold-100:#F5EDD6;--royaal-gold-200:#E9DCAE;
  --royaal-gold-400:#D8BF75;--royaal-gold-600:#C9A84C;--royaal-gold-700:#B0913B;--royaal-gold-800:#8C7229;
  --royaal-grey-50:#FAFAFA;--royaal-grey-100:#F5F5F5;--royaal-grey-200:#EBEBEB;
  --royaal-grey-300:#E0E0E0;--royaal-grey-400:#C4C4C4;--royaal-grey-600:#767676;--royaal-grey-800:#4A4A4A;
  --royaal-white:#FFFFFF;
  --royaal-blue-600:#38618C;--royaal-blue-800:#294864;
  --royaal-green-600:#3F7A52;

  /* Semantisch — licht vlak */
  --color-background-primary:var(--royaal-white);
  --color-background-secondary:var(--royaal-grey-100);
  --color-background-inverse:var(--royaal-black);
  --color-surface:var(--royaal-white);
  --color-surface-sunken:var(--royaal-grey-50);
  --color-border-subtle:var(--royaal-grey-300);
  --color-border-strong:var(--royaal-grey-400);
  --color-border-inverse:rgba(255,255,255,.16);
  --color-border-accent:var(--royaal-gold-600);
  --color-focus-ring:var(--royaal-gold-700);
  --color-text-primary:var(--royaal-black);
  --color-text-body:var(--royaal-black);
  --color-text-secondary:var(--royaal-grey-800);
  --color-text-muted:var(--royaal-grey-600);
  --color-text-inverse:var(--royaal-white);
  --color-text-inverse-muted:rgba(255,255,255,.66);
  --color-text-accent:var(--royaal-gold-800);
  --color-brand-accent:var(--royaal-gold-600);

  /* Typografie */
  --font-core:"Royaal Poppins",Poppins,Arial,Helvetica,sans-serif;
  --font-display:"Royaal Organetto","Royaal Poppins",Arial,sans-serif;
  --fs-hero:clamp(38px,6.2vw,68px);      /* zie afwijking A */
  --fs-display:clamp(30px,3.6vw,44px);
  --fs-h1:clamp(26px,2.6vw,32px);
  --fs-h2:clamp(21px,2vw,24px);
  --fs-h3:19px;--fs-h4:16px;
  --fs-body-lg:18px;--fs-body:15px;--fs-body-sm:13.5px;
  --fs-label:13px;--fs-caption:12px;--fs-metadata:11px;
  --measure-body:68ch;--measure-intro:56ch;

  /* Spacing — 8-punts grid */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;
  --sp-6:32px;--sp-7:48px;--sp-8:64px;--sp-9:96px;--sp-10:128px;

  /* Vorm */
  --radius-sm:2px;--radius-md:4px;--radius-lg:6px;--radius-xl:8px;
  --shadow-raised:0 1px 2px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04);
  --shadow-overlay:0 8px 24px rgba(0,0,0,.24),0 2px 6px rgba(0,0,0,.12);
  --shadow-focus:0 0 0 3px rgba(176,145,59,.28);

  /* Layout */
  --layout-max:1280px;
  --layout-prose:760px;
  --topbar-h:96px;   /* logo moet minimaal 120px breed — zie afwijking D */

  /* Motion */
  --dur-instant:80ms;--dur-fast:140ms;--dur-base:220ms;--dur-slow:320ms;
  --ease:cubic-bezier(.2,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}
}

/* ----------------------------------------------------------------- 3. Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--royaal-black);color:var(--color-text-inverse);
  font-family:var(--font-core);font-weight:400;
  font-size:var(--fs-body);line-height:24px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0}
ul{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tnum{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- 4. Layout */
.wrap{width:100%;max-width:var(--layout-max);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.prose{max-width:var(--measure-body)}
section{padding-block:clamp(var(--sp-7),8vw,var(--sp-9))}

/* Vlakken: donker is het frame, licht is de inhoud */
.panel-dark{background:var(--royaal-black);color:var(--color-text-inverse)}
.panel-light{background:var(--royaal-white);color:var(--color-text-body)}
.panel-grey{background:var(--royaal-grey-100);color:var(--color-text-body)}
.panel-light h1,.panel-light h2,.panel-light h3,.panel-light h4,
.panel-grey h1,.panel-grey h2,.panel-grey h3,.panel-grey h4{color:var(--color-text-primary)}

/* ---------------------------------------------------------- 5. Typografie */
.eyebrow{
  display:inline-block;font-size:var(--fs-metadata);line-height:16px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--royaal-gold-600);
}
.panel-light .eyebrow,.panel-grey .eyebrow{color:var(--color-text-accent)}

.hero-title{font-family:var(--font-core);font-weight:200;font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.02em}
.hero-title strong{font-weight:700}
.display{font-size:var(--fs-display);line-height:1.16;letter-spacing:-.01em;font-weight:300}
h1,.h1{font-size:var(--fs-h1);line-height:1.25;letter-spacing:-.008em;font-weight:700}
h2,.h2{font-size:var(--fs-h2);line-height:1.33;letter-spacing:-.004em;font-weight:700}
h3,.h3{font-size:var(--fs-h3);line-height:28px;font-weight:700}
h4,.h4{font-size:var(--fs-h4);line-height:24px;font-weight:700}
.lead{font-size:var(--fs-body-lg);line-height:30px;font-weight:300;max-width:var(--measure-intro)}
.body-lg{font-size:var(--fs-body-lg);line-height:30px;font-weight:300}
.body-sm{font-size:var(--fs-body-sm);line-height:21px}
.muted{color:var(--color-text-inverse-muted)}
.panel-light .muted,.panel-grey .muted{color:var(--color-text-muted)}
.label{font-size:var(--fs-label);line-height:18px;letter-spacing:.02em;font-weight:700}
.caption{font-size:var(--fs-caption);line-height:18px;color:var(--color-text-inverse-muted)}
.panel-light .caption,.panel-grey .caption{color:var(--color-text-muted)}

/* De gouden lijn — het merkdetail */
.gold-rule{width:56px;height:3px;background:var(--royaal-gold-600);border:0;margin:0}
.rule{height:1px;background:var(--color-border-inverse);border:0;margin:0}
.panel-light .rule,.panel-grey .rule{background:var(--color-border-subtle)}

/* Sectiekop */
.section-head{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-7)}
.section-head .lead{margin-top:var(--sp-1)}

/* ------------------------------------------------------------ 6. Knoppen */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:44px;padding:0 var(--sp-5);
  border-radius:var(--radius-md);border:1px solid transparent;
  font-size:var(--fs-body);font-weight:700;letter-spacing:.01em;cursor:pointer;
  transition:background-color var(--dur-instant) var(--ease),border-color var(--dur-instant) var(--ease),color var(--dur-instant) var(--ease);
}
.btn .chev{display:inline-block;transition:transform var(--dur-fast) var(--ease)}
.btn:hover .chev{transform:translateX(3px)}
/* op donker */
.btn-primary{background:var(--royaal-white);color:var(--royaal-black)}
.btn-primary:hover{background:var(--royaal-grey-200)}
.btn-secondary{background:transparent;color:var(--royaal-white);border-color:rgba(255,255,255,.32)}
.btn-secondary:hover{border-color:var(--royaal-white);background:rgba(255,255,255,.06)}
/* op licht */
.panel-light .btn-primary,.panel-grey .btn-primary{background:var(--royaal-black);color:var(--royaal-white)}
.panel-light .btn-primary:hover,.panel-grey .btn-primary:hover{background:var(--royaal-black-lift)}
.panel-light .btn-secondary,.panel-grey .btn-secondary{color:var(--royaal-black);border-color:var(--color-border-strong)}
.panel-light .btn-secondary:hover,.panel-grey .btn-secondary:hover{border-color:var(--royaal-black);background:var(--royaal-grey-50)}
/* accent — maximaal één per scherm */
.btn-accent{background:var(--royaal-gold-600);color:var(--royaal-black)}
.btn-accent:hover{background:var(--royaal-gold-700)}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-weight:700;font-size:var(--fs-body);
  padding-bottom:2px;border-bottom:1px solid var(--color-border-inverse);
  transition:border-color var(--dur-instant) var(--ease),color var(--dur-instant) var(--ease);
}
.link-arrow:hover{border-color:var(--royaal-gold-600)}
.panel-light .link-arrow,.panel-grey .link-arrow{border-color:var(--color-border-subtle);color:var(--color-text-primary)}
.panel-light .link-arrow:hover,.panel-grey .link-arrow:hover{border-color:var(--royaal-gold-600)}
.link-arrow .chev{transition:transform var(--dur-fast) var(--ease)}
.link-arrow:hover .chev{transform:translateX(3px)}

/* --------------------------------------------------------------- 7. Navigatie */
.topbar{
  position:sticky;top:0;z-index:60;
  background:transparent;border-bottom:1px solid transparent;
  transition:background-color var(--dur-base) var(--ease),border-color var(--dur-base) var(--ease);
}
/* Boven de hero staat de balk over de foto; zodra je scrolt wordt hij zwart. */
.topbar[data-stuck="true"]{
  background:var(--royaal-black);border-bottom-color:var(--color-border-inverse);
}
.topbar-inner{display:flex;align-items:center;gap:var(--sp-5);min-height:var(--topbar-h)}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:120px;height:auto}   /* minimale logobreedte uit het design system */
.nav{margin-left:auto;display:flex;align-items:center;gap:var(--sp-1)}
.nav a{
  display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-3);
  font-size:var(--fs-body-sm);font-weight:400;color:rgba(255,255,255,.78);
  border-bottom:2px solid transparent;
  transition:color var(--dur-instant) var(--ease),border-color var(--dur-instant) var(--ease);
}
.nav a:hover{color:var(--royaal-white)}
.nav a[aria-current="page"]{color:var(--royaal-white);font-weight:700;border-bottom-color:var(--royaal-gold-600)}
.nav .btn{margin-left:var(--sp-3);border-bottom:0}
.nav-toggle{
  display:none;margin-left:auto;width:44px;height:44px;
  background:transparent;border:1px solid rgba(255,255,255,.24);border-radius:var(--radius-md);
  color:var(--royaal-white);cursor:pointer;place-items:center;
}
.nav-toggle span{display:block;width:18px;height:1px;background:currentColor;margin:3px auto}

@media (max-width:1000px){
  .nav-toggle{display:grid}
  .nav{
    position:fixed;inset:var(--topbar-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--royaal-black);border-bottom:1px solid var(--color-border-inverse);
    padding:var(--sp-3) clamp(20px,5vw,48px) var(--sp-6);
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease);
  }
  .nav[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .topbar:has(.nav[data-open="true"]){background:var(--royaal-black)}
  .nav a{min-height:52px;font-size:var(--fs-body-lg);font-weight:300;border-bottom:1px solid var(--color-border-inverse);padding-inline:0}
  .nav a[aria-current="page"]{border-bottom-color:var(--royaal-gold-600)}
  .nav .btn{margin:var(--sp-4) 0 0;justify-content:center}
}

/* ------------------------------------------------------------------ 8. Hero */
.hero{
  position:relative;background:var(--royaal-black);overflow:hidden;
  margin-top:calc(-1 * var(--topbar-h));      /* beeld loopt door achter de balk */
}
.hero-inner{
  position:relative;z-index:2;
  padding-block:calc(var(--topbar-h) + clamp(var(--sp-7),8vw,120px)) clamp(var(--sp-7),9vw,var(--sp-9))
}
.hero-inner>*+*{margin-top:var(--sp-5)}
.hero-inner .gold-rule{margin-top:var(--sp-6)}
.hero .lead{max-width:60ch;color:rgba(255,255,255,.88)}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.hero-media{
  position:absolute;inset:0;z-index:1;
  background-position:center right;background-size:cover;
  opacity:.85;
}
/* Vlakke scrim: houdt de foto leesbaar zonder gradient. Zie afwijking F. */
.hero-mask{position:absolute;inset:0;z-index:1;background:var(--royaal-black);opacity:.56}
.hero-compact .hero-inner{
  padding-block:calc(var(--topbar-h) + clamp(var(--sp-6),5vw,var(--sp-8))) clamp(var(--sp-6),5vw,var(--sp-8))
}

/* Kerncijfers onder de hero */
.figure-strip{border-top:1px solid var(--color-border-inverse);border-bottom:1px solid var(--color-border-inverse)}
.figure-strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0}
.figure{padding:var(--sp-6) var(--sp-5) var(--sp-6) 0;border-left:1px solid var(--color-border-inverse);padding-left:var(--sp-5)}
.figure:first-child{border-left:0;padding-left:0}
.figure .num{font-size:clamp(28px,3.4vw,40px);line-height:1.1;font-weight:200;font-variant-numeric:tabular-nums}
.figure .num em{font-style:normal;color:var(--royaal-gold-600);font-weight:300}
.figure .label{margin-top:var(--sp-2);color:var(--color-text-inverse-muted);font-weight:400;font-size:var(--fs-body-sm)}
@media (max-width:640px){.figure{border-left:0;border-top:1px solid var(--color-border-inverse);padding-left:0}.figure:first-child{border-top:0}}

/* ------------------------------------------------------------- 9. Grids */
.grid{display:grid;gap:var(--sp-5)}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(var(--sp-6),5vw,var(--sp-8));align-items:start}
.split-wide{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:900px){.split,.split-wide{grid-template-columns:1fr}}

/* ------------------------------------------------------------ 10. Kaarten */
.card{
  background:transparent;border:1px solid var(--color-border-inverse);
  border-radius:var(--radius-lg);padding:var(--sp-5);
  transition:border-color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease);
}
.card>*+*{margin-top:var(--sp-3)}
.card:hover{border-color:rgba(255,255,255,.34)}
.panel-light .card,.panel-grey .card{background:var(--royaal-white);border-color:var(--color-border-subtle)}
.panel-light .card:hover,.panel-grey .card:hover{border-color:var(--color-border-strong)}
a.card:hover{border-color:var(--royaal-gold-600)}
.card .card-num{font-size:var(--fs-metadata);letter-spacing:.08em;font-weight:700;color:var(--royaal-gold-600)}
.panel-light .card .card-num,.panel-grey .card .card-num{color:var(--color-text-accent)}

/* Kaderloze ingang (FeatureLink-patroon) */
.feature{display:grid;gap:var(--sp-3);padding-top:var(--sp-4);border-top:3px solid var(--royaal-gold-600)}
.feature p{color:var(--color-text-inverse-muted)}
.panel-light .feature p,.panel-grey .feature p{color:var(--color-text-secondary)}

/* Lijst met haakjes */
.list-rule{display:grid}
.list-rule>li{padding-block:var(--sp-4);border-top:1px solid var(--color-border-inverse);display:grid;gap:var(--sp-2)}
.list-rule>li:last-child{border-bottom:1px solid var(--color-border-inverse)}
.panel-light .list-rule>li,.panel-grey .list-rule>li{border-color:var(--color-border-subtle)}
.list-check>li{position:relative;padding-left:var(--sp-6);margin-top:var(--sp-3)}
.list-check>li::before{
  content:"";position:absolute;left:0;top:10px;width:14px;height:3px;background:var(--royaal-gold-600);
}

/* ------------------------------------------------------------- 11. Citaat */
.quote{border-left:3px solid var(--royaal-gold-600);padding-left:var(--sp-5);max-width:64ch}
.quote blockquote{font-size:var(--fs-body-lg);line-height:30px;font-weight:300}
.quote .who{margin-top:var(--sp-4);display:flex;align-items:center;gap:var(--sp-3)}
.quote .who img{width:48px;height:48px;border-radius:999px;object-fit:cover;object-position:center top}
.quote .who .name{font-weight:700;font-size:var(--fs-body-sm)}
.quote .who .role{font-size:var(--fs-caption);color:var(--color-text-inverse-muted)}
.panel-light .quote .who .role,.panel-grey .quote .who .role{color:var(--color-text-muted)}

/* --------------------------------------------------------------- 12. Team */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-5)}
.team-card{text-align:left;background:transparent;border:0;padding:0;cursor:pointer;color:inherit;display:grid;gap:var(--sp-3)}
.team-photo{
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--royaal-grey-100);
}
.team-photo .initials{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:34px;font-weight:200;color:var(--royaal-grey-600);
  background:var(--royaal-grey-100);letter-spacing:.04em
}
.team-photo img{position:relative;width:100%;height:100%;object-fit:cover;object-position:center 18%;
  transition:transform var(--dur-slow) var(--ease-out)}
.team-card:hover .team-photo img{transform:scale(1.02)}
.team-photo::after{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--royaal-gold-600);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-base) var(--ease)
}
.team-card:hover .team-photo::after{transform:scaleX(1)}
.team-name{font-size:var(--fs-h4);font-weight:700}
.team-role{font-size:var(--fs-body-sm);color:var(--color-text-inverse-muted)}
.panel-light .team-role,.panel-grey .team-role{color:var(--color-text-muted)}
.team-more{font-size:var(--fs-caption);font-weight:700;color:var(--royaal-gold-600)}
.panel-light .team-more,.panel-grey .team-more{color:var(--color-text-accent)}

/* -------------------------------------------------------------- 13. Modal */
.modal[hidden]{display:none!important}
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--sp-5)}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62)}
.modal-card{
  position:relative;background:var(--royaal-white);color:var(--color-text-body);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-overlay);
  max-width:660px;width:100%;max-height:86vh;overflow:auto;padding:var(--sp-6)
}
.modal-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--royaal-gold-600);border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.modal-card h3{color:var(--color-text-primary)}
.modal-card .role{font-size:var(--fs-body-sm);color:var(--color-text-muted);margin-top:var(--sp-1)}
.modal-body{margin-top:var(--sp-5);display:grid;gap:var(--sp-4);max-width:var(--measure-body)}
.modal-body p{color:var(--color-text-body)}
.modal-close{
  position:absolute;top:var(--sp-4);right:var(--sp-4);width:40px;height:40px;
  border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);
  background:var(--royaal-white);color:var(--color-text-primary);cursor:pointer;
  display:grid;place-items:center
}
.modal-close:hover{background:var(--royaal-grey-50)}

/* ------------------------------------------------------- 14. Logostrook */
.logo-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--sp-5);align-items:center}
.logo-strip img{max-height:44px;width:auto;margin-inline:auto;filter:grayscale(1) brightness(0) invert(1);opacity:.62;transition:opacity var(--dur-fast) var(--ease)}
.logo-strip img:hover{opacity:1}
.panel-light .logo-strip img,.panel-grey .logo-strip img{filter:grayscale(1);opacity:.72}

/* ------------------------------------------------------------ 15. Beeld */
.figure-img{margin:0;display:grid;gap:var(--sp-3)}
.figure-img img{border-radius:var(--radius-lg);width:100%;object-fit:cover}
.figure-img figcaption{font-size:var(--fs-caption);color:var(--color-text-inverse-muted)}
.panel-light .figure-img figcaption,.panel-grey .figure-img figcaption{color:var(--color-text-muted)}
.img-tall{aspect-ratio:4/5}
.img-wide{aspect-ratio:16/9}

/* -------------------------------------------------------------- 16. CTA */
.cta{border-top:3px solid var(--royaal-gold-600);padding-top:var(--sp-7)}
.cta .h1{max-width:26ch}

/* ------------------------------------------------------------ 17. Footer */
footer.site{background:var(--royaal-black);border-top:1px solid var(--color-border-inverse);padding-block:var(--sp-8) var(--sp-6)}
.footer-grid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--sp-6)}
@media (max-width:820px){.footer-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}
footer.site h4{font-size:var(--fs-metadata);letter-spacing:.08em;text-transform:uppercase;color:var(--royaal-gold-600);margin-bottom:var(--sp-4)}
footer.site li+li{margin-top:var(--sp-2)}
footer.site a:hover{color:var(--royaal-gold-400)}
footer.site .muted{font-size:var(--fs-body-sm)}
.footer-bottom{
  margin-top:var(--sp-7);padding-top:var(--sp-4);border-top:1px solid var(--color-border-inverse);
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);justify-content:space-between;
  font-size:var(--fs-caption);color:var(--color-text-inverse-muted)
}

/* ------------------------------------------------------- 18. Formulieren */
.form{display:grid;gap:var(--sp-5);max-width:620px}
.field{display:grid;gap:var(--sp-2)}
.field label{font-size:var(--fs-label);font-weight:700;letter-spacing:.02em}
.field input,.field textarea,.field select{
  font:inherit;font-size:var(--fs-body);color:var(--color-text-body);
  background:var(--royaal-white);
  border:1px solid var(--color-border-strong);border-radius:var(--radius-md);
  padding:11px var(--sp-3);min-height:44px;width:100%
}
.field textarea{min-height:140px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{
  outline:2px solid var(--color-focus-ring);outline-offset:2px;box-shadow:var(--shadow-focus)
}
.field .hint{font-size:var(--fs-caption);color:var(--color-text-muted)}
.panel-dark .field .hint{color:var(--color-text-inverse-muted)}

/* ------------------------------------------------------------ 19. Motion */
.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:70ms}
.reveal[data-d="2"]{transition-delay:140ms}
.reveal[data-d="3"]{transition-delay:210ms}
.reveal[data-d="4"]{transition-delay:280ms}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* =========================================================================
   Bewuste afwijkingen van het design system, met reden:

   A. --fs-hero gaat tot 68px, boven de Display-schaal van 44px. Een
      websitehero is geen rapportkop; 44px leest op een 1440px-scherm als
      een tussenkop. Gewicht 200 houdt het rustig in plaats van schreeuwend.
   B. Donker is hier meer dan een anker: navigatie, hero, showcases,
      tussensecties en footer zijn zwart. Lange leesteksten, cases en
      formulieren staan op wit. Zo blijft de regel "hoogstens twee
      achtergrondkleuren per vlak" overeind (zwart + wit, grijs als derde
      alleen voor tussenvlakken op de lichte pagina's).
   C. Foto's in de logostrook worden ontkleurd. Partnerlogo's in eigen
      kleur op zwart geven vijf vloekende kleurvlakken; het design system
      staat geen kleurenfeest toe. Fotografie zelf blijft onbewerkt.
   ========================================================================= */