*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Type, vastgelegd 12 sep 2026: Source Serif 4 voor koppen, Source Sans 3 voor lopende tekst. */
  --font-display:"Source Serif 4",Georgia,serif;
  --font-body:"Source Sans 3",system-ui,-apple-system,sans-serif;
  /* Colin's palette (feedback 2026-06-22): navy #122C4D, cream #F6F1E2, gold #E8C77A, light-blue #C9DCEA, charcoal #2E2A1E */
  --navy:#122C4D;
  --navy-mid:#1D3A63;
  /* ponytail: two golds. --gold-light = Colin's #E8C77A, used on navy (high contrast, matches his hero mockup). --gold = deeper antique gold for accents/text on cream where #E8C77A would be unreadable. */
  --gold:#A8843F;
  /* ponytail: derde goud. --gold-deep haalt 4.5:1 op cream, cream-dark en wit,
     dus alle kleine goudtekst en de primaire knop. Zelfde tint (hue 39), alleen donkerder. */
  --gold-deep:#7D622F;
  --gold-light:#E8C77A;
  --cream:#F6F1E2;
  --cream-dark:#EDE5D0;
  --lightblue:#C9DCEA;
  --text:#2E2A1E;
  --text-muted:#6B6457;
  --white:#FFFFFF;
  --border:rgba(18,44,77,0.12);
  /* Vorm: bijna scherpe hoeken lezen als autoritair. Cirkels en pillen zijn de uitzondering. */
  --ease:cubic-bezier(.25,.46,.45,.94);
  --radius:2px;
  --radius-pill:999px;
  /* Elevatie: drie stappen, alle in navy zodat schaduw nooit als vuil grijs leest. */
  --shadow-sm:0 2px 8px rgba(18,44,77,0.06);
  --shadow-md:0 8px 24px rgba(18,44,77,0.10);
  --shadow-lg:0 18px 44px rgba(18,44,77,0.18);
  /* Type: modulaire schaal, ratio 1.25, ondergrens 11.5px voor functionele tekst. */
  --t-xs:0.72rem;
  --t-sm:0.8rem;
  --t-md:0.875rem;
  --t-base:1rem;
  --t-lg:1.125rem;
  --t-xl:1.25rem;
  --t-2xl:1.5rem;
  --t-3xl:1.875rem;
  --t-4xl:2.5rem;
  --t-5xl:3rem;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--cream);color:var(--text);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:0 48px;height:72px;display:flex;align-items:center;justify-content:space-between;background:rgba(248,246,241,0.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.nav-logo{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;color:var(--navy);letter-spacing:0.08em;text-transform:uppercase;text-decoration:none}
.nav-logo span{color:var(--gold-deep)}
.nav-logo-img{height:44px;width:auto;display:block}
.nav-links{display:flex;gap:40px;list-style:none;align-items:center}
.nav-links a{font-family:var(--font-body);font-size:var(--t-sm);letter-spacing:0.12em;text-transform:uppercase;color:var(--navy);text-decoration:none;transition:color 0.2s}
.nav-links a:hover{color:var(--gold-deep)}
/* Toont op welke pagina je bent. Scope op .nav-links, want een kale .active-regel zou ook
   Een onderstreping en geen
   kleur, omdat .nav-cta hieronder met !important werkt en een kleurregel daar stil van verliest. */
.nav-links a.active{border-bottom:2px solid var(--gold);padding-bottom:5px}
.nav-links a.nav-cta.active{border-bottom:none;background:var(--gold)!important}
.nav-cta{background:var(--navy)!important;color:var(--white)!important;padding:10px 22px!important;transition:background 0.2s!important}
.nav-cta:hover{background:var(--gold)!important}
.nav-menu-toggle{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px}
.nav-menu-toggle span{display:block;width:24px;height:1.5px;background:var(--navy);transition:transform 0.25s var(--ease),opacity 0.25s ease}

/* ── HERO ── */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding-top:120px}
.hero-bg{position:absolute;inset:0;background-image:url('../img/hero/hero-2026-09b.webp');background-size:cover;background-position:center 40%}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(10,16,30,0.92) 0%,rgba(10,16,30,0.78) 55%,rgba(10,16,30,0.45) 100%)}
.hero-overlay::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,16,30,0.20) 0%,rgba(10,16,30,0.05) 35%,rgba(10,16,30,0.55) 80%,rgba(10,16,30,0.75) 100%)}
.hero-content{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 64px 72px}
.hero-eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:var(--t-xs);letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-light);margin-bottom:28px;opacity:0;animation:fadeUp 0.8s ease 0.3s forwards}
.hero-eyebrow::before{content:"";display:block;width:36px;height:1px;background:var(--gold-light)}
.hero-badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:var(--t-xs);letter-spacing:0.1em;color:var(--gold-light);border:1px solid rgba(232,199,122,0.38);border-radius:var(--radius-pill);padding:8px 18px;margin-bottom:30px;opacity:0;animation:fadeUp 0.8s ease 0.3s forwards}
.hero-badge svg{width:15px;height:15px;flex-shrink:0}
.hero-established{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.9rem);font-style:italic;color:var(--gold-light);margin:14px 0 0;opacity:0;animation:fadeUp 0.9s ease 0.65s forwards}
.hero-headline{font-family:var(--font-display);font-size:clamp(3.4rem,7.5vw,6.8rem);font-weight:300;line-height:1.0;color:var(--white);letter-spacing:-0.01em;max-width:860px;margin-bottom:0;opacity:0;animation:fadeUp 0.9s ease 0.5s forwards}
.hero-headline-gold{display:block;font-family:var(--font-display);font-size:clamp(3.4rem,7.5vw,6.8rem);font-weight:300;font-style:italic;line-height:1.05;color:var(--gold-light);letter-spacing:-0.01em;max-width:860px;margin-bottom:36px;opacity:0;animation:fadeUp 0.9s ease 0.65s forwards}
.hero-sub{font-size:var(--t-base);color:rgba(255,255,255,0.72);max-width:560px;line-height:1.85;margin-bottom:44px;opacity:0;animation:fadeUp 0.9s ease 0.8s forwards}
.hero-actions{display:flex;align-items:center;gap:16px;opacity:0;animation:fadeUp 0.9s ease 0.95s forwards;flex-wrap:wrap;margin-bottom:56px}
.btn-primary{display:inline-block;background:var(--gold-deep);color:var(--white);font-family:var(--font-body);font-size:var(--t-xs);font-weight:500;letter-spacing:0.2em;text-transform:uppercase;text-decoration:none;padding:17px 40px;transition:background 0.25s var(--ease),transform 0.2s ease}
.btn-primary:hover{background:var(--navy);transform:translateY(-1px)}
.btn-outline{display:inline-block;background:transparent;color:var(--white);font-family:var(--font-body);font-size:var(--t-xs);font-weight:400;letter-spacing:0.2em;text-transform:uppercase;text-decoration:none;padding:16px 36px;border:1px solid rgba(255,255,255,0.45);transition:border-color 0.25s var(--ease),color 0.25s ease}
.btn-outline:hover{border-color:var(--gold-light);color:var(--gold-light)}
.hero-stats{display:flex;gap:0;border-top:1px solid rgba(255,255,255,0.34);padding-top:36px;opacity:0;animation:fadeUp 0.9s ease 1.1s forwards}
.hero-stat{flex:1;padding-right:48px;border-right:1px solid rgba(255,255,255,0.34);margin-right:48px}
.hero-stat:last-child{border-right:none;margin-right:0;padding-right:0}
.hero-stat-number{font-family:var(--font-display);font-size:var(--t-4xl);font-weight:300;color:var(--gold-light);line-height:1;display:block;margin-bottom:6px}
/* Punt 2 (Kuan): scheidingslijnen en onderschriften duidelijker maken */
.hero-stat-label{font-size:var(--t-sm);letter-spacing:0.16em;text-transform:uppercase;color:rgba(255,255,255,0.82)}

/* ── LFSA SEALS (Kuan feedback Sep 2026: licence LT0030 + company LL03835 as two seals) ── */
.hero-seals{position:absolute;top:96px;right:48px;z-index:3;display:flex;gap:14px;
  opacity:0;animation:fadeUp 0.9s ease 1s forwards}
.hero-seals img{display:block;width:116px;height:auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.45))}
@media(max-width:900px){
  .hero-seals{position:static;align-self:center;justify-content:center;margin:0 0 28px;animation:none;opacity:1}
  .hero-seals img{width:92px}
}

/* ── TRUST BAR ── */
.trust-bar{background:var(--navy);padding:18px 48px;display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px;padding:0 36px;border-right:1px solid rgba(255,255,255,0.15)}
.trust-item:last-child{border-right:none}
.trust-icon{width:16px;height:16px;opacity:0.7;flex-shrink:0}
.trust-text{font-family:var(--font-body);font-size:var(--t-xs);letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,0.72)}
.trust-text strong{color:var(--gold-light);font-weight:500}

/* ── INTRO ── */
.section-intro{padding:96px 48px;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.intro-label{display:inline-flex;align-items:center;gap:12px;font-size:var(--t-xs);letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:20px}
.intro-label::before{content:"";display:block;width:28px;height:1px;background:var(--gold)}
.intro-headline{font-family:var(--font-display);font-size:clamp(2rem,3.5vw,3rem);font-weight:400;line-height:1.2;color:var(--navy);margin-bottom:28px}
.intro-text{font-size:var(--t-base);color:var(--text-muted);line-height:1.9;margin-bottom:16px}
.intro-pull{font-family:var(--font-display);font-style:italic;font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.4;color:var(--navy);border-left:2px solid var(--gold);padding-left:22px;margin:28px 0 30px}
/* Punt 3 (Kuan): de herhaalde cijferblokken zijn hier vervangen door een foto */
.intro-media{display:block;width:100%;height:100%;min-height:340px;object-fit:cover;border-radius:2px}


/* ── SERVICES ── */
.section-services{background:var(--navy);padding:96px 48px}
.section-services-inner{max-width:1200px;margin:0 auto}
.section-header{text-align:center;margin-bottom:64px}
.section-header .label{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-size:var(--t-xs);letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-light);margin-bottom:16px}
.section-header .label::before,.section-header .label::after{content:"";display:block;width:24px;height:1px;background:var(--gold-light)}
.section-header h2{font-family:var(--font-display);font-size:clamp(2rem,3vw,2.8rem);font-weight:300;color:var(--white);line-height:1.2}
.section-header p{font-size:var(--t-base);color:rgba(255,255,255,0.55);margin-top:14px;max-width:480px;margin-left:auto;margin-right:auto}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border)}
.service-card{background:var(--navy);padding:44px 36px;position:relative;overflow:hidden;transition:background 0.3s var(--ease)}
.service-card::before{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 0.35s var(--ease)}
/* Punt 31 (Kuan): grotere nummers en letters op de dienstenpagina */
.service-number{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:300;line-height:1;letter-spacing:0.05em;color:var(--gold-deep);margin-bottom:18px;display:block}
.service-title{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:500;color:var(--white);margin-bottom:14px;line-height:1.25}
.service-desc{font-size:var(--t-md);color:rgba(255,255,255,0.52);line-height:1.75}

/* ── WHY ITMC ── */
.section-why{padding:96px 48px;max-width:1200px;margin:0 auto}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:64px}
.why-line{width:40px;height:2px;background:var(--gold);margin-bottom:28px}
/* Vergelijkingstabel trust/foundation: past op een telefoon zonder half afgekapte kolom. */
@media(max-width:600px){
  .compare-table{font-size:0.82rem!important}
  .compare-table th,.compare-table td{padding:10px 6px!important;min-width:0!important}
}
/* Punt 8 (Kuan): nummering bij de blokken (vier sinds 3 okt 2026). Decoratief, dus aria-hidden in de HTML. */
.why-number{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:300;color:var(--gold-deep);line-height:1;margin-bottom:14px}
.why-title{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:500;color:var(--navy);margin-bottom:14px;line-height:1.2}
.why-text{font-size:var(--t-md);color:var(--text-muted);line-height:1.85}

/* ── NETWORK ── */
.section-network{background:var(--cream-dark);padding:80px 48px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
/* Punt 6 en 7 (Kuan): één kolom, de kaart vult de sectie van links naar rechts */
.section-network-inner{max-width:1200px;margin:0 auto}
.network-map-wrap{position:relative;margin:40px 0 0}
.network-map{display:block;width:100%;height:auto}
/* Labuan op de wereldkaart: x 1257, y 477 in een beeld van 1600 bij 824, net in zee voor de kust */
.map-pin{position:absolute;left:78.56%;top:57.89%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #fff,0 1px 4px rgba(18,44,77,.35)}
.map-pin-label{position:absolute;left:calc(78.56% + 12px);top:57.89%;transform:translateY(-50%);padding:2px 8px;border-radius:2px;background:#fff;color:var(--navy);font-family:var(--font-body);font-size:.8125rem;font-weight:600;line-height:1.4;white-space:nowrap}
@media (max-width:600px){.map-pin{width:10px;height:10px;margin:-5px 0 0 -5px}.map-pin-label{left:calc(78.56% + 8px);padding:1px 5px;font-size:.6875rem}}
.network-heading{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);font-weight:400;color:var(--navy);line-height:1.2;margin-bottom:20px}
.network-text{font-size:var(--t-base);color:var(--text-muted);line-height:1.9}

/* Country list: elegant inline */



/* ── CTA ── */
.section-cta{padding:96px 48px;text-align:center;background:var(--cream)}
.section-cta h2{font-family:var(--font-display);font-size:clamp(2rem,4vw,3.4rem);font-weight:300;color:var(--navy);max-width:680px;margin:0 auto 16px;line-height:1.2}
.section-cta p{font-size:var(--t-base);color:var(--text-muted);max-width:440px;margin:0 auto 40px;line-height:1.8}
.cta-contact{display:flex;align-items:center;justify-content:center;gap:48px;margin-top:52px;flex-wrap:wrap}
.cta-contact-item{text-align:left}

/* CTA image variant: atmospheric sea band + navy overlay (screenshot-style) */
.section-cta--image{position:relative;background-size:cover;background-position:center;overflow:hidden}
.section-cta--image .cta-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,44,77,0.60),rgba(18,44,77,0.86))}
.section-cta--image .cta-inner{position:relative;z-index:1}
.section-cta--image h2{color:var(--white);margin-bottom:36px}
.section-cta--image p{color:rgba(255,255,255,0.72)}

/* ── FOOTER ── */
.footer{background:var(--navy);padding:56px 48px 32px}
.footer-inner{max-width:1200px;margin:0 auto}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:64px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.1)}
.footer-brand-name{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;color:var(--white);letter-spacing:0.08em;text-transform:uppercase;margin-bottom:16px}
.footer-brand-name span{color:var(--gold-light)}
.footer-tagline{font-style:italic;font-size:var(--t-md);color:rgba(255,255,255,0.45);line-height:1.7;margin-bottom:20px}
.footer-licence{display:inline-block;font-size:var(--t-xs);letter-spacing:0.12em;line-height:1.9;text-transform:uppercase;color:var(--gold-light);border:1px solid rgba(184,150,90,0.35);padding:6px 12px}
.footer-licence svg{vertical-align:-1px;margin-right:8px}
.footer-licence a{color:var(--gold-light);text-decoration:none;border-bottom:1px solid rgba(184,150,90,0.4);transition:border-color 0.2s}
.footer-licence a:hover{border-bottom-color:var(--gold-light)}
/* Kuan: de kopjes Services en Contact vielen weg tegen de links eronder. Wit en zwaarder. */
.footer-col-title{font-size:var(--t-xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--white);font-weight:600;margin-bottom:20px}
.footer-col a,.footer-col p{display:block;font-size:var(--t-md);color:rgba(255,255,255,0.6);text-decoration:none;line-height:1.5;margin-bottom:10px;transition:color 0.2s}
.footer-col a:hover{color:var(--gold-light)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:24px;flex-wrap:wrap;gap:12px}
.footer-copy{font-size:var(--t-xs);color:rgba(255,255,255,0.28)}
.footer-legal{display:flex;gap:24px}
.footer-legal a{font-size:var(--t-xs);color:rgba(255,255,255,0.28);text-decoration:none;transition:color 0.2s}
.footer-legal a:hover{color:rgba(255,255,255,0.6)}

/* ── WHATSAPP STICKY BUTTON ── */
.whatsapp-btn{
  position:fixed;
  bottom:32px;
  right:32px;
  z-index:200;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--navy);
  color:var(--white);
  text-decoration:none;
  padding:12px 20px 12px 14px;
  border:1px solid rgba(184,150,90,0.4);
  box-shadow:var(--shadow-md);
  transition:background 0.25s var(--ease),transform 0.2s ease,box-shadow 0.2s ease;
  font-family:var(--font-body);
  font-size:var(--t-xs);
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.whatsapp-btn:hover{
  background:var(--navy-mid);
  transform:translateY(-2px);
  box-shadow:var(--shadow-lg);
  border-color:var(--gold);
}
.whatsapp-btn svg{
  width:20px;
  height:20px;
  flex-shrink:0;
}
.whatsapp-label{white-space:nowrap}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fade-up{opacity:0;transform:translateY(14px);transition:opacity 0.45s var(--var(--ease)),transform 0.45s var(--ease)}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ── */

/* De navigatiebalk schakelt eerder om dan de rest van de pagina. Tussen 900 en 1150 pixels
   past de volledige balk niet meer (het merk plakt tegen Home aan en de knop breekt in
   tweeen), terwijl de inhoud daar nog prima in kolommen staat. Dit breekpunt hoort gelijk
   te lopen met de blokken HAMBURGER MENU OPEN STATE en NAV DROPDOWN MOBILE verderop.
   js/main.js herhaalt dit getal bewust niet, maar leest af of de hamburgerknop zichtbaar
   is; anders lopen CSS en JavaScript uit de pas zonder dat je een foutmelding krijgt. */
@media(max-width:1150px){
  .nav-links{display:none}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .nav-menu-toggle{display:flex}
}

@media(max-width:900px){
  .nav{padding:0 24px}
  .hero-content{padding:0 24px 48px}
  .hero-stats{flex-direction:column;gap:24px;text-align:center}
  .hero-stat{border-right:none;padding-right:0;margin-right:0;border-bottom:1px solid rgba(255,255,255,0.1);padding-bottom:24px}
  .hero-stat:last-child{border-bottom:none;padding-bottom:0}
  .section-intro{grid-template-columns:1fr;gap:48px;padding:64px 24px}
  .section-services{padding:64px 24px}
  .services-grid{grid-template-columns:1fr}
  .section-why{padding:64px 24px}
  .why-grid{grid-template-columns:1fr;gap:36px}
  .section-network{padding:64px 24px}
  .section-cta{padding:64px 24px}
  .footer{padding:48px 24px 24px}
  .footer-top{grid-template-columns:1fr;gap:36px}
  .trust-bar{padding:14px 24px}
  .trust-item{padding:8px 16px;border-right:none;border-bottom:1px solid rgba(255,255,255,0.1)}
  .trust-item:last-child{border-bottom:none}
  .whatsapp-btn .whatsapp-label{display:none}
  .whatsapp-btn{padding:13px}
}

/* ── SERVICE LINK (toegevoegd voor "Learn more →" links op service cards) ── */
.service-link{
  display:inline-block;
  margin-top:16px;
  font-size:var(--t-sm);
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gold-deep);
  text-decoration:none;
  transition:color 0.2s var(--ease);
}
.service-link::after,.service-card-link::after{content:"";position:absolute;inset:0}
.service-link:hover{color:var(--gold-light)}

/* ── HAMBURGER MENU OPEN STATE ── */
/* Zelfde breekpunt als het blok dat de hamburgerknop toont. Loopt dit uit de pas, dan
   verschijnt de knop wel maar blijft het menu display:none: je klikt en er gebeurt niets. */
@media(max-width:1150px){
  .nav.nav-open .nav-links{
    display:flex;
    flex-direction:column;
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:var(--cream);
    padding:8px 0 20px;
    box-shadow:var(--shadow-md);
    gap:0;
  }
  .nav.nav-open .nav-links li{
    border-bottom:1px solid var(--cream-dark);
  }
  .nav.nav-open .nav-links li:last-child{
    border-bottom:none;
  }
  .nav.nav-open .nav-links a{
    display:block;
    padding:14px 24px;
  }
  /* Streepjes worden een ✕ */
  .nav.nav-open .nav-menu-toggle span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .nav.nav-open .nav-menu-toggle span:nth-child(2){opacity:0}
  .nav.nav-open .nav-menu-toggle span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
}

/* ══════════════════════════════════════════════════
   INNER PAGES: SHARED STYLES
   ══════════════════════════════════════════════════ */

/* PAGE HERO */
.page-hero{background:var(--navy);padding:152px 48px 80px;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(184,150,90,0.07) 0%,transparent 70%)}
.page-hero-inner{max-width:1200px;margin:0 auto;position:relative;z-index:1}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:var(--t-xs);letter-spacing:0.28em;text-transform:uppercase;color:var(--gold-light);margin-bottom:20px}
.eyebrow::before{content:"";display:block;width:28px;height:1px;background:var(--gold-light)}
.page-hero h1{font-family:var(--font-display);font-size:clamp(2.6rem,5vw,4.4rem);font-weight:300;color:var(--white);line-height:1.1;max-width:700px;margin-bottom:20px}
.page-hero-sub{font-size:var(--t-base);color:rgba(255,255,255,0.6);max-width:560px;line-height:1.85}

/* STANDARD SECTIONS */
.section{padding:88px 48px;background:var(--white)} /* bare .section = white; .section.bg-cream stays cream -> visible alternation on subpages (Colin feedback) */
.section-inner{max-width:1200px;margin:0 auto}
.section-label{display:inline-flex;align-items:center;gap:10px;font-size:var(--t-xs);letter-spacing:0.24em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px}
.section-label::before{content:"";display:block;width:24px;height:1px;background:var(--gold)}

/* Eyebrows removed sitewide (user request 2026-06-22): the label with a gold dash above
   every section read as AI-generated. Still in the markup but hidden. The page rail that
   used to source its labels from them was removed on 2026-09-12. */
.hero-eyebrow,.eyebrow,.section-label,.intro-label,.trackrecord-label,.section-header .label{display:none!important}
.section-headline{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.8rem);font-weight:300;color:var(--navy);line-height:1.2;margin-bottom:32px}
/* Leesbreedte. Boven ongeveer 75 tekens per regel verliest het oog bij het
   terugspringen de volgende regel, en dan leest een pagina als een boek.
   Alleen op lopende tekst: koppen en kaarten mogen breder. */
.body-text{font-size:var(--t-base);color:var(--text-muted);line-height:1.75;margin-bottom:20px;max-width:68ch}
.section-dark .body-text{color:rgba(255,255,255,0.82)}

/* GRID HELPERS */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.three-col{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border)}

/* CARDS */
.card{background:var(--white);padding:40px 32px;position:relative;overflow:hidden;transition:background 0.3s;border:1px solid var(--border);box-shadow:var(--shadow-sm)} /* border+shadow so white cards read on white sections too */
.card::before{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 0.35s var(--ease)}
.card-number{font-family:var(--font-display);font-size:var(--t-xs);letter-spacing:0.2em;color:var(--gold-deep);display:block;margin-bottom:16px}
.card-title{font-family:var(--font-display);font-size:var(--t-xl);font-weight:500;color:var(--navy);margin-bottom:12px;line-height:1.25}
.card-text{font-size:var(--t-md);color:var(--text-muted);line-height:1.75}
.card-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-deep);text-decoration:none;margin-top:16px;transition:gap 0.2s}
.card-link:hover{gap:10px}
/* Wide data tables scroll horizontally on narrow screens instead of overflowing the viewport */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.use-cases-grid .card{display:flex;flex-direction:column}
.use-cases-grid .card-link{margin-top:auto}
@media(max-width:1024px){.use-cases-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.use-cases-grid{grid-template-columns:1fr}}

/* DARK SECTION */
.section-dark{background:var(--navy);padding:88px 48px}
/* Punt 37 (Kuan): zijn regiokaart is grotendeels doorzichtig en het landvlak is licht,
   dus hij hoort op een donkere ondergrond. Op creme zou het contrast wegvallen. */
.region-map{display:block;width:100%;max-width:900px;height:auto;margin:36px auto 0}
.section-dark .section-label{color:var(--gold-light)}
.section-dark .section-label::before{background:var(--gold-light)}
.section-dark .section-headline{color:var(--white)}

/* CTA BAND */
.cta-band{background:var(--cream-dark);padding:72px 48px;text-align:center;border-top:1px solid var(--border)}
/* Punt 35 (Kuan): de kop erfde regelafstand 1.75 van body en liep daardoor uit elkaar */
.cta-band h2{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.8rem);font-weight:300;line-height:1.25;color:var(--navy);margin-bottom:12px}
.cta-band p{font-size:var(--t-base);color:var(--text-muted);max-width:440px;margin:0 auto 32px;line-height:1.8}
.cta-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}

/* Punt 36 (Kuan): de tweede knop krijgt een omlijning in plaats van kale tekst.
   Eigen klasse en niet .btn-text aanpassen: die staat ook op 404 en thanks,
   buiten een CTA-band, en die twee moeten ongemoeid blijven. */
.btn-secondary{display:inline-block;background:transparent;color:var(--navy);font-family:var(--font-body);font-size:var(--t-xs);font-weight:400;letter-spacing:0.2em;text-transform:uppercase;text-decoration:none;padding:16px 36px;border:1px solid var(--navy);transition:background 0.25s var(--ease),color 0.25s ease}
.btn-secondary:hover{background:var(--navy);color:var(--white)}

/* Punt 34 (Kuan): onderaan elke dienstenpagina een grotere kop met de knop
   eronder en een horizontaal beeld rechts. */
section.cta-band--media{text-align:left;padding:0}
.cta-media-inner{display:grid;grid-template-columns:1fr 42%;gap:0;align-items:stretch}
.cta-media-body{padding:clamp(56px,6vw,88px) clamp(24px,5vw,64px);display:flex;flex-direction:column;justify-content:center}
.cta-band--media h2{font-size:clamp(2.1rem,3.6vw,3.2rem);margin-bottom:16px}
.cta-band--media p{margin:0 0 32px;max-width:520px}
.cta-band--media .cta-actions{justify-content:flex-start}
.cta-band--media .gold-divider{margin-left:0}
.cta-media-img{display:block;width:100%;height:100%;min-height:340px;object-fit:cover}
@media(max-width:700px){
  .cta-media-inner{grid-template-columns:1fr}
  .cta-media-img{min-height:220px}
}

/* BTN VARIATIONS */
.btn-text{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:var(--t-sm);letter-spacing:0.12em;text-transform:uppercase;color:var(--navy);text-decoration:none;margin-left:28px;transition:color 0.2s}
.btn-text:hover{color:var(--gold-deep)}

/* FOOTER COL */
.footer-col{display:flex;flex-direction:column}
.footer-col a,.footer-col p{display:block;font-size:var(--t-md);color:rgba(255,255,255,0.6);text-decoration:none;line-height:1.5;margin-bottom:8px;transition:color 0.2s}
.footer-col a:hover{color:var(--gold-light)}

/* ══════════════════════════════════════════════════
   LABUAN PAGE: SPECIFIC STYLES
   ══════════════════════════════════════════════════ */

.facts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--border);margin-bottom:2px}
.facts-grid--steps{grid-template-columns:repeat(5,1fr)}
.facts-grid--quad{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.facts-grid--quad{grid-template-columns:repeat(2,1fr)}}
.facts-grid--no-gap{margin-top:0}
.fact-card{background:var(--white);padding:44px 36px;position:relative}
.fact-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 0.35s var(--ease)}
.fact-number{font-family:var(--font-display);font-size:var(--t-5xl);font-weight:300;color:var(--navy);line-height:1;display:block;margin-bottom:8px}
.fact-title{display:block;font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;color:var(--navy);margin-bottom:10px}
.fact-desc{font-size:var(--t-md);color:var(--text-muted);line-height:1.75}

.advantages-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border)}
.advantage-item{background:var(--cream-dark);padding:36px 40px;display:flex;gap:20px;align-items:flex-start}
.advantage-number{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:300;color:var(--gold-deep);line-height:1;flex-shrink:0;min-width:36px}
.advantage-title{font-family:var(--font-display);font-size:var(--t-lg);font-weight:500;color:var(--navy);margin-bottom:8px;line-height:1.25}
.advantage-desc{font-size:var(--t-md);color:var(--text-muted);line-height:1.75}

.tax-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,0.08)}
.tax-card{background:var(--navy);padding:44px 32px;position:relative;transition:background 0.3s}
.tax-card::before{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 0.35s var(--ease)}
.tax-rate{font-family:var(--font-display);font-size:var(--t-5xl);font-weight:300;color:var(--gold-light);line-height:1;display:block;margin-bottom:12px}
.tax-title{font-family:var(--font-display);font-size:var(--t-lg);font-weight:500;color:var(--white);margin-bottom:10px}
.tax-desc{font-size:var(--t-md);color:rgba(255,255,255,0.5);line-height:1.75}

.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.location-text p{font-size:var(--t-base);color:var(--text-muted);line-height:1.9;margin-bottom:16px}
.location-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border)}
.location-stat{background:var(--cream-dark);padding:32px 24px;text-align:center}
.location-stat-number{font-family:var(--font-display);font-size:var(--t-4xl);font-weight:300;color:var(--navy);line-height:1;display:block;margin-bottom:6px}
.location-stat-label{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted)}

/* ══════════════════════════════════════════════════
   CONTACT PAGE: SPECIFIC STYLES
   ══════════════════════════════════════════════════ */

.form-group{margin-bottom:20px}
.form-label{display:block;font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.form-input{width:100%;padding:12px 16px;border:1px solid var(--border);background:var(--white);font-family:var(--font-body);font-size:var(--t-base);color:var(--text);outline:none;transition:border-color 0.2s;-webkit-appearance:none}
.form-input:focus{border-color:var(--gold)}
.form-textarea{width:100%;padding:12px 16px;border:1px solid var(--border);background:var(--white);font-family:var(--font-body);font-size:var(--t-base);color:var(--text);outline:none;resize:vertical;transition:border-color 0.2s;-webkit-appearance:none}
.form-textarea:focus{border-color:var(--gold)}
.form-submit{cursor:pointer;border:none;width:100%;display:block}
.form-group--last{margin-bottom:28px}
.contact-form{margin-top:8px}
.contact-detail{margin-bottom:32px}
.contact-detail-label{font-size:var(--t-xs);letter-spacing:0.18em;text-transform:uppercase;color:var(--text-muted);display:block;margin-bottom:6px}
.contact-detail-value{font-family:var(--font-display);font-size:var(--t-lg);color:var(--navy);text-decoration:none;display:block;line-height:1.4}
a.contact-detail-value:hover{color:var(--gold-deep)}
/* Punt 15 tot 18 (Kuan): formulier over de volle breedte, gegevens naar de kaartsectie,
   het blauwe kader weg en de tekst cursief onder het formulier. */
.contact-form-block .body-text{max-width:720px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.contact-form .form-submit{width:auto;min-width:280px;margin:0 auto}
.contact-response-note{margin-top:24px;font-style:italic;font-size:var(--t-md);color:var(--text-muted);line-height:1.8;max-width:720px}
.map-split{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start}
.map-details{padding-top:4px}
@media(max-width:900px){
  .form-row{grid-template-columns:1fr;gap:0}
  .map-split{grid-template-columns:1fr;gap:32px}
  .contact-form .form-submit{width:100%}
}

/* ══════════════════════════════════════════════════
   RESPONSIVE: INNER PAGES
   ══════════════════════════════════════════════════ */
@media(max-width:900px){
  .page-hero{padding:120px 24px 64px}
  .section{padding:64px 24px}
  .section-dark{padding:64px 24px}
  .cta-band{padding:56px 24px}
  .two-col{grid-template-columns:1fr;gap:40px}
  .three-col{grid-template-columns:1fr}
  .facts-grid{grid-template-columns:1fr}
  .advantages-grid{grid-template-columns:1fr}
  .tax-grid{grid-template-columns:1fr}
  .location-grid{grid-template-columns:1fr;gap:48px}
  .team-grid{grid-template-columns:1fr}
  .mini-stat-grid{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════
   UTILITY: SECTION BACKGROUNDS
   ══════════════════════════════════════════════════ */
.bg-cream{background:var(--cream)}
.bg-cream-dark{background:var(--cream-dark)}

/* ══════════════════════════════════════════════════
   QUOTE BLOCK (index.html, about.html)
   ══════════════════════════════════════════════════ */
.quote-block{background:var(--navy);padding:44px 36px}
.section-inner > .quote-block{width:94%;margin-left:auto;margin-right:auto}
.quote-accent{width:28px;height:2px;background:var(--gold);margin-bottom:20px}
.quote-text{font-family:var(--font-display);font-size:var(--t-xl);font-weight:300;font-style:italic;color:var(--white);line-height:1.6;margin-bottom:20px}
.quote-caption{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-light)}

/* ══════════════════════════════════════════════════
   MINI STATS GRID (about.html)
   ══════════════════════════════════════════════════ */
.mini-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin-top:2px;background:var(--border)}
.mini-stat-cell{background:var(--cream-dark);padding:28px 20px;text-align:center}
.mini-stat-number{font-family:var(--font-display);font-size:var(--t-4xl);font-weight:300;color:var(--navy);display:block;line-height:1}
.mini-stat-label{font-size:var(--t-xs);letter-spacing:0.14em;text-transform:uppercase;color:var(--text-muted)}

/* ══════════════════════════════════════════════════
   TEAM GRID & CARD ELEMENTS (about.html)
   ══════════════════════════════════════════════════ */
/* Punt 27 en 29 (Kuan): alle vijf de kaarten dezelfde brede uitlijning, onder elkaar.
   De 2px gap was een haarlijn, niet ruimte: de rasterachtergrond scheen door de kier.
   Die achtergrond is nu weg en de rand zit op de kaart zelf, dus gap is echte ruimte. */
.team-grid{display:grid;grid-template-columns:1fr;gap:20px;background:transparent}
.card-avatar{width:72px;height:72px;background:var(--navy);margin-bottom:20px;display:flex;align-items:center;justify-content:center}
.card-avatar-initials{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:300;color:var(--gold-light);letter-spacing:0.05em}
.card-role{font-size:var(--t-xs);letter-spacing:0.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:16px}
.card-text--mt{margin-top:12px}
.body-text--dark{color:rgba(255,255,255,0.65)}

/* ══════════════════════════════════════════════════
   LICENCE HIGHLIGHT (about.html)
   ══════════════════════════════════════════════════ */
.licence-highlight{margin-top:24px;padding:24px;border:1px solid rgba(184,150,90,0.3)}
.licence-highlight-label{font-size:var(--t-xs);letter-spacing:0.18em;text-transform:uppercase;color:var(--gold-light);display:block;margin-bottom:8px}
.licence-highlight-number{font-family:var(--font-display);font-size:var(--t-2xl);color:var(--white)}

/* ══════════════════════════════════════════════════
   GOLD DIVIDER (index.html, about.html, labuan.html)
   ══════════════════════════════════════════════════ */
.gold-divider{width:40px;height:2px;background:var(--gold);margin:0 auto 28px}
.gold-divider--sm{width:36px;margin-bottom:24px}

/* ══════════════════════════════════════════════════
   INDEX PAGE: SPECIFIC ELEMENTS
   ══════════════════════════════════════════════════ */
.intro-link{color:var(--navy);font-size:var(--t-sm);letter-spacing:0.12em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:8px;margin-top:8px;transition:color 0.2s}
.intro-link:hover{color:var(--gold-deep)}
.intro-label--left{justify-content:flex-start}
.why-headline{font-family:var(--font-display);font-size:clamp(2rem,3vw,2.8rem);font-weight:300;color:var(--navy);line-height:1.2}
.services-cta{text-align:center;margin-top:48px}
.cta-inner{max-width:800px;margin:0 auto}
.footer-credits{margin-top:4px;font-size:var(--t-sm);color:rgba(255,255,255,0.3)}
.section-headline--spaced{margin-bottom:40px}
.section-headline--mb{margin-bottom:24px}

/* ══════════════════════════════════════════════════
   LABUAN PAGE: LOCATION STAT VARIANTS
   ══════════════════════════════════════════════════ */
.location-stat--dark{background:var(--navy)}
.location-stat-number--highlight{color:var(--gold-light);font-size:var(--t-3xl)}
.location-stat-label--light{color:rgba(255,255,255,0.5)}

/* =============================================
   SERVICE OVERVIEW GRID: services.html
   ============================================= */

.service-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border);margin-top:40px}
.service-overview-grid .service-card{background:var(--white);padding:40px 36px;display:flex;flex-direction:column;position:relative}
.service-overview-grid .service-card:hover{background:var(--cream)}
.service-card-number{font-family:var(--font-display);font-size:var(--t-3xl);font-weight:300;line-height:1;letter-spacing:0.05em;color:var(--gold-deep);margin-bottom:16px}
.service-card-title{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--navy);margin-bottom:14px;line-height:1.25}
.service-card-text{font-size:15px;line-height:1.75;color:var(--text-muted);flex:1;margin-bottom:24px}
.service-card-link{font-family:var(--font-body);font-size:var(--t-xs);letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-deep);text-decoration:none;font-weight:500;align-self:flex-start;transition:color 0.2s}
.service-card-link:hover{color:var(--navy)}

/* =============================================
   SERVICE SUBPAGES
   ============================================= */

.feature-list{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-direction:column;gap:14px}
.feature-list li{padding-left:22px;position:relative;font-size:16px;line-height:1.65;color:var(--text)}
.feature-list li::before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;background:var(--gold);border-radius:50%}
.feature-list--mb{margin-bottom:24px}

.service-crosslink{border-top:1px solid var(--border);padding:40px 0 0;margin-top:0;display:flex;align-items:flex-start;justify-content:space-between;gap:40px}
.service-crosslink-inner{flex:1}
.service-crosslink-label{font-family:var(--font-body);font-size:var(--t-xs);letter-spacing:0.2em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px;display:block}
.service-crosslink-title{font-family:var(--font-display);font-size:24px;font-weight:500;color:var(--navy);margin-bottom:10px;line-height:1.2}
.service-crosslink-desc{font-size:15px;color:var(--text-muted);line-height:1.65;max-width:480px}

@media(max-width:768px){
  .service-overview-grid{grid-template-columns:1fr}
  .service-crosslink{flex-direction:column;gap:24px}
}

/* licence-highlight op lichte achtergronden (bg-cream) */
.bg-cream .licence-highlight-label{color:var(--gold-deep)}
.bg-cream .licence-highlight-number{color:var(--navy)}

/* Tablet: twee kolommen. Ondergrens is nodig, anders geldt deze regel ook op een
   telefoon en verliest de eenkolomsregel hierboven, want die staat eerder in het
   bestand en heeft dezelfde specificiteit. */
@media(min-width:601px) and (max-width:1024px){.services-grid{grid-template-columns:repeat(2,1fr)}}

/* ── WHATSAPP ROUND BUTTON ── */
.whatsapp-btn-round{position:fixed;bottom:32px;right:32px;z-index:50;width:56px;height:56px;border-radius:50%;background:var(--navy);border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;text-decoration:none;color:var(--gold);box-shadow:var(--shadow-md);transition:background 0.2s var(--ease),transform 0.2s ease,color 0.2s ease}
.whatsapp-btn-round:hover{background:var(--gold);color:var(--navy);transform:translateY(-2px)}
.whatsapp-btn-round svg{width:30px;height:30px}

/* ── LFSA LINKS ── */
.lfsa-links{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:700px){.lfsa-links{grid-template-columns:1fr}}
.lfsa-link-item{display:block;padding:24px 28px;border-left:3px solid var(--gold);background:var(--white);text-decoration:none;transition:border-color 0.2s,box-shadow 0.2s}
.lfsa-link-item:hover{border-left-color:var(--navy);box-shadow:var(--shadow-sm)}
.lfsa-link-title{font-family:var(--font-display);font-size:var(--t-lg);font-weight:600;color:var(--navy);margin-bottom:8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lfsa-link-desc{font-size:var(--t-md);color:var(--text-secondary);line-height:1.65;margin-bottom:12px}
.lfsa-link-ext{font-size:var(--t-xs);letter-spacing:0.08em;color:var(--gold-deep);text-transform:uppercase}
.lfsa-intro{max-width:640px;margin-bottom:40px;color:var(--text-secondary)}
.lfsa-note a{color:var(--gold-deep);text-decoration:none}
.lfsa-note a:hover{text-decoration:underline}

/* ── LEGAL PAGES (disclaimer / privacy) ── */
.legal-content{max-width:760px}
.legal-heading{font-family:var(--font-display);font-size:var(--t-xl);font-weight:500;color:var(--navy);margin:40px 0 12px;letter-spacing:0.01em}
.legal-date{color:var(--text-muted);font-size:var(--t-md);margin-top:48px;border-top:1px solid var(--border);padding-top:24px}

/* ── FAQ ACCORDION ── */
.faq-list{margin-top:2.5rem;max-width:780px;border-top:1px solid var(--border)}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.25rem;text-align:left;font-family:var(--font-display);font-size:var(--t-xl);font-weight:600;color:var(--navy);line-height:1.35;padding:1.1rem 0;margin:0;transition:color 0.2s}
.faq-q:hover{color:var(--gold-deep)}
/* De knop zit sinds september binnen de h3 in plaats van erop, zodat de vraag een kop
   blijft voor een schermlezer. Hij neemt de rijopmaak over, anders schuift het plusje
   tegen de tekst aan in plaats van naar de rechterrand. */
.faq-q > [role="button"]{display:flex;width:100%;justify-content:space-between;align-items:center;gap:1.25rem;cursor:pointer}
.faq-icon{position:relative;flex-shrink:0;width:15px;height:15px}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--gold);transition:transform 0.25s var(--ease)}
.faq-icon::before{top:6.5px;left:0;width:15px;height:2px}
.faq-icon::after{top:0;left:6.5px;width:2px;height:15px}
.faq-item.faq-open .faq-icon::after{transform:scaleY(0)}
.faq-a{overflow:hidden;max-height:0;transition:max-height 0.3s var(--ease)}
.faq-a .body-text,.faq-a p{font-size:var(--t-base);line-height:1.7;color:var(--text-muted);margin:0;padding-bottom:1.2rem}
/* Inline content-links: gold accent i.p.v. browser-blauw */
.body-text a,.faq-a a,.card-text a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color 0.2s}
.body-text a:hover,.faq-a a:hover,.card-text a:hover{color:var(--navy)}
/* FAQ gecentreerd op de pagina (label + kop gecentreerd, accordion-kolom in het midden) */
.section-inner:has(.faq-list){text-align:center}
.section-inner:has(.faq-list) .faq-list{margin-left:auto;margin-right:auto;text-align:left}

/* ── NAV DROPDOWN (Services) ── */
.nav-dropdown{position:relative}
.nav-dropdown-toggle{display:inline-flex;align-items:center}
.nav-dropdown-caret{display:inline-block;margin-left:7px;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform 0.2s}
.nav-dropdown:hover .nav-dropdown-caret{transform:translateY(0) rotate(225deg)}
.nav-dropdown-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:265px;background:var(--white);border:1px solid var(--border);box-shadow:var(--shadow-md);list-style:none;padding:12px 0;opacity:0;visibility:hidden;transition:opacity 0.2s var(--ease),transform 0.2s ease;z-index:101}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-dropdown-menu li{display:block}
.nav-dropdown-menu a{display:block;padding:10px 26px;font-family:var(--font-body);font-size:var(--t-sm);letter-spacing:0.04em;text-transform:none;color:var(--navy);white-space:nowrap;transition:background 0.18s,color 0.18s}
.nav-dropdown-menu a:hover{background:var(--cream);color:var(--gold-deep)}
.nav-dropdown-all{color:var(--gold-deep) !important;font-style:italic}
.nav-dropdown-divider{height:1px;background:var(--border);margin:8px 0;list-style:none}

/* ── MAP EMBED (contact) ── */
.map-embed{display:block;width:100%;height:460px;border:0;filter:grayscale(0.15)}

/* ── NAV DROPDOWN MOBILE ── */
/* Zelfde breekpunt als hierboven. */
@media(max-width:1150px){
  .nav.nav-open .nav-dropdown-menu{position:static;transform:none;opacity:1;visibility:visible;display:none;min-width:0;background:var(--cream-dark);border:none;box-shadow:none;padding:0}
  .nav.nav-open .nav-dropdown.open .nav-dropdown-menu{display:block}
  .nav.nav-open .nav-dropdown-menu a{padding:13px 24px 13px 44px;white-space:normal}
  .nav.nav-open .nav-dropdown-divider{display:none}
  .nav-dropdown-caret{margin-left:auto}
}

/* ═══════════════════════════════════════════════════════════
   REDESIGN 2026-06 (Colin feedback) - new homepage components
   ═══════════════════════════════════════════════════════════ */

/* ── TRACK RECORD (navy band, inset split: rounded image left + text right) ── */
/* Punt 4 (Kuan): de foto vult de hele linkerhelft in plaats van te zweven */
.section-trackrecord{background:var(--navy);padding:0}
.trackrecord-split{display:grid;grid-template-columns:38% 1fr;gap:0;align-items:stretch}
.trackrecord-media{background-size:cover;background-position:center;min-height:680px}
.trackrecord-body{display:flex;flex-direction:column;justify-content:center;padding:clamp(52px,7vw,92px) clamp(24px,5vw,64px)}
.trackrecord-headline{font-family:var(--font-display);font-size:clamp(1.7rem,2.6vw,2.5rem);font-weight:400;line-height:1.32;color:var(--white);max-width:680px;margin:0 0 40px}
.trackrecord-stats{display:flex;gap:0;flex-wrap:wrap}
.tr-stat{flex:1;min-width:140px;padding:0 28px;border-right:1px solid rgba(255,255,255,0.14)}
.tr-stat:first-child{padding-left:0}
.tr-stat:last-child{border-right:none}
.tr-number{font-family:var(--font-display);font-size:clamp(2.6rem,4vw,3.6rem);font-weight:300;color:var(--gold-light);line-height:1;display:block;margin-bottom:10px}
.tr-label{font-size:var(--t-xs);letter-spacing:0.2em;text-transform:uppercase;color:rgba(255,255,255,0.5)}
.trackrecord-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:40px}
@media(max-width:900px){
  .trackrecord-split{grid-template-columns:1fr;gap:28px}
  .trackrecord-media{min-height:260px;background-position:center 18%}
  .trackrecord-stats{display:grid;grid-template-columns:repeat(3,1fr)}
  .tr-stat{min-width:0;padding:0 8px;text-align:center}
  .tr-stat:first-child{padding-left:8px}
  .tr-number{font-size:clamp(1.6rem,7vw,2.2rem)}
  .tr-label{letter-spacing:0.1em;display:block}
}

/* ── SERVICES restyle: light section + light cards + icons (3-col grid set on .services-grid above) ── */
.section-services{background:var(--white)}
.section-header h2{color:var(--navy)}
.section-header p{color:var(--text-muted)}
.section-header .label{color:var(--gold)}
.section-header .label::before,.section-header .label::after{background:var(--gold)}
.service-card{background:var(--white)}
.service-card:hover{background:var(--cream)}
.service-card:hover::before{transform:scaleX(1)}
.service-icon{display:inline-flex;color:var(--gold);margin-bottom:22px}
.service-icon svg{width:30px;height:30px}
.service-title{color:var(--navy)}
.service-desc{color:var(--text-muted)}

/* ── NETWORK ratio + CTA credential line ── */
.cta-credential{font-size:var(--t-xs);color:var(--text-muted);letter-spacing:0.04em;margin-top:44px;line-height:1.7}
/* Lighter, less-beige light sections (user feedback): alternate white / warm near-white */
.bg-cream:has(.section-why){background:var(--white)}
.section-network{background:#FBFAF6}
.faq-centered{background:#FBFAF6}
/* WhatsApp button in original WhatsApp green */
.whatsapp-btn-round{background:#25D366;border:none;color:#fff}
.whatsapp-btn-round:hover{background:#1EBE57;color:#fff;transform:translateY(-2px)}

/* ── Multi-column layouts + EVEN-ROWS quantity queries: tablet/desktop only (>=901px), so mobile keeps single-column collapse ── */
@media(min-width:901px){
  .facts-grid:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}   /* 2 -> 1 row of 2 */
  .facts-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}   /* 4 -> 2 + 2 */
  .facts-grid:has(> :nth-child(7):last-child){grid-template-columns:repeat(4,1fr)}   /* 7 -> 4 + 3 */
  .services-grid:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
  .tax-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── ON-PAGE NAVIGATION RAIL (scrollspy): cream card (Signature-style), service pages, wide screens only ── */
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s ease;
  background:var(--cream);border:1px solid var(--border);border-top:3px solid var(--navy);border-radius:12px;
  box-shadow:var(--shadow-md);padding:16px 14px}

/* ── MILESTONES TIMELINE (About) ── */
.bg-white{background:var(--white)}
.timeline{max-width:720px;margin:52px auto 0}
.timeline-item{display:grid;grid-template-columns:64px 1fr}
.timeline-year{font-family:var(--font-display);font-size:var(--t-2xl);font-weight:500;color:var(--gold-deep);text-align:right;padding-right:22px;line-height:1.35}
.timeline-body{border-left:1px solid var(--border);padding:0 0 40px 34px;position:relative}
.timeline-item:last-child .timeline-body{padding-bottom:0}
.timeline-body::before{content:"";position:absolute;left:-6px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--white);border:2px solid var(--gold)}
.timeline-title{font-family:var(--font-display);font-size:var(--t-xl);font-weight:500;color:var(--navy);margin-bottom:6px;line-height:1.25}
.timeline-text{font-size:var(--t-base);color:var(--text-muted);line-height:1.7}
/* team: feature the first person (Colin) full-width on the top row, rest in 2+2 */
.team-grid > .card{display:grid;grid-template-columns:auto 1fr;column-gap:40px;align-items:start}
.team-grid > .card > .card-avatar{grid-column:1;grid-row:1 / -1}
.team-grid > .card > :not(.card-avatar){grid-column:2}
/* team credential bullets */
/* Punt 28 (Kuan): meer lucht tussen de credentials en de beschrijving */
.card-creds{list-style:none;margin:14px 0 26px;padding:0;display:flex;flex-direction:column;gap:6px}
.card-creds li{position:relative;padding-left:18px;font-size:var(--t-sm);color:var(--navy);line-height:1.45}
.card-creds li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;background:var(--gold);border-radius:50%}

/* ══════════════════════════════════════════════════
   MOBILE OPTIMISATION (consolidated, small screens)
   ══════════════════════════════════════════════════ */
@media(max-width:600px){
  /* Hero: clean image-agnostic dark overlay (fixes "image cut off on the right" on small screens) + smaller headline */
  .hero-overlay{background:linear-gradient(180deg,rgba(10,16,30,0.80),rgba(10,16,30,0.88))}
  .hero-overlay::after{display:none}
  .hero-bg{background-position:center}
  .hero-headline,.hero-headline-gold{font-size:clamp(2.5rem,11vw,3.4rem)}
  .hero-sub{font-size:var(--t-base)}
  /* Page hero (service + labuan + about pages): less top/side padding */
  .page-hero{padding:120px 22px 56px}
  .cta-band{padding:56px 22px}
  /* Intro stat-cards: stack so big numbers (1,300+) do not overflow narrow cards */
  /* Team featured card (Colin): stack avatar above text on small screens */
  .team-grid > .card{display:block}
  /* Service cross-link: stack instead of side by side */
  .service-crosslink{flex-direction:column;gap:18px}
  /* iOS zooms in on focus when input font-size < 16px; force 16px on mobile */
  .form-input,.form-textarea{font-size:16px}
}

/* ── REVIEW FEEDBACK WIDGET (alleen ?review-modus) ── */

/* Respecteer systeeminstelling: geen beweging voor wie dat uitzet. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .fade-up{opacity:1!important;transform:none!important}
}

/* Links binnen donkere vlakken: Colins goud haalt daar 8.6:1, het donkere goud niet.
   .page-hero-sub had helemaal geen linkstijl, waardoor links browserblauw werden. */
.page-hero-sub a,.section-dark a:not(.btn-primary):not(.btn-outline):not(.btn-text-dark){
  color:var(--gold-light);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color 0.2s}
.page-hero-sub a:hover,.section-dark a:not(.btn-primary):not(.btn-outline):not(.btn-text-dark):hover{
  color:var(--white)}


/* Schaduw in donkere context. Navy-op-navy leest als een gekleurde gloed, het
   herkenbaarste "AI-UI"-effect er is. Zelfde tokennamen, neutrale waarden. */
.section-dark,.hero,.footer,.section-trackrecord,.page-hero,.cta-band{
  --shadow-sm:0 2px 8px rgba(0,0,0,0.22);
  --shadow-md:0 8px 24px rgba(0,0,0,0.30);
  --shadow-lg:0 18px 44px rgba(0,0,0,0.38);
}
.whatsapp-btn-round{box-shadow:0 6px 20px rgba(0,0,0,0.24)}

/* Cookie-toestemming. Alleen zichtbaar voor bezoekers in Europa, zie main.js. */
.consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:9500;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;padding:18px 48px;background:var(--navy);border-top:1px solid rgba(232,199,122,0.28)}
.consent-text{margin:0;flex:1 1 340px;font-family:var(--font-body);font-size:var(--t-md);line-height:1.55;color:rgba(255,255,255,0.86)}
.consent-text a{color:var(--gold-light);text-decoration:underline;text-underline-offset:3px}
.consent-actions{display:flex;gap:10px;flex-shrink:0}
.consent-actions button{font-family:var(--font-body);font-size:var(--t-sm);letter-spacing:.04em;padding:10px 22px;border-radius:var(--radius);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.consent-decline{background:transparent;color:rgba(255,255,255,0.86);border:1px solid rgba(255,255,255,0.32)}
.consent-decline:hover{background:rgba(255,255,255,0.08)}
.consent-accept{background:var(--gold-light);color:var(--navy);border:1px solid var(--gold-light)}
.consent-accept:hover{background:#F0D89B;border-color:#F0D89B}
@media (max-width:600px){
  .consent-bar{padding:16px 20px;gap:14px}
  .consent-actions{width:100%}
  .consent-actions button{flex:1}
}

/* ════════════════════════════════════════════════════════════════════════
   DIENSTENPAGINA'S, LAYOUT V2 (12 sep 2026)
   Referentie: Integrated Biosciences, vastgelegd in
   data/review/designstand-2026-09-12.md. Elke keuze hieronder komt daaruit:
   hierarchie alleen uit grootte en letterspatiering (nooit uit gewicht),
   kop 75-158px tegen tekst 18px, max 1200px, 80-120px tussen secties,
   geen schaduw maar 1px haarlijnen, een accent op kleine vlakken.
   Afwijking, bewust: hoekradius blijft 2px ipv 8px, want dat is de
   merkconventie over 21 pagina's en die weegt hier zwaarder dan het detail.
   Geen fade-up en geen gouden cursieve woordwissel in koppen: dat waren
   twee van de zeven AI-signalen uit de diagnose van 8 september.
   ════════════════════════════════════════════════════════════════════════ */

.sv-band{padding:clamp(56px,7vw,104px) 48px;background:var(--white)}
.sv-band.bg-cream{background:var(--cream)}
/* Twee witte banden onder elkaar lezen als een band. De doorverwijzing krijgt
   daarom geen eigen bovenruimte, anders staat er 200px wit tussen de FAQ en
   de rij eronder. */
.sv-band--tight{padding-top:0}
.sv-inner{max-width:1200px;margin:0 auto}

/* Hero. De donkere grond van het systeem; het grootteverschil doet de rest. */
.sv-hero{background:var(--navy);padding:132px 48px 76px;position:relative}
.sv-hero-inner{max-width:1200px;margin:0 auto}
.sv-crumb{font-size:13px;letter-spacing:0.02em;color:rgba(255,255,255,0.5);
  padding-bottom:clamp(40px,6vw,72px)}
.sv-crumb a{color:rgba(255,255,255,0.5);text-decoration:none}
.sv-crumb a:hover{color:var(--gold-light)}
.sv-crumb span{padding:0 8px;color:rgba(255,255,255,0.3)}
.sv-hero h1{font-family:var(--font-display);font-weight:400;color:var(--white);
  font-size:clamp(2.7rem,6vw,5rem);line-height:1.02;letter-spacing:-0.03em;
  max-width:19ch;margin:0;text-wrap:balance}
.sv-hero-lead{font-family:var(--font-body);font-size:clamp(1.05rem,1.5vw,1.25rem);
  line-height:1.6;letter-spacing:-0.002em;color:rgba(255,255,255,0.68);
  max-width:52ch;margin:clamp(24px,3vw,36px) 0 0}

/* Tweekolommen: kop links, tekst rechts. Zo staat een kop van 46px naast
   tekst van 18px en is het verschil zichtbaar in plaats van alleen gemeten. */
.sv-split{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(28px,5vw,88px);align-items:start}
.sv-h2{font-family:var(--font-display);font-weight:400;color:var(--navy);
  font-size:clamp(1.85rem,3.4vw,2.9rem);line-height:1.1;letter-spacing:-0.022em;
  margin:0;max-width:20ch;text-wrap:balance}
.sv-text{font-family:var(--font-body);font-size:18px;line-height:1.7;
  letter-spacing:-0.001em;color:var(--text-muted);max-width:68ch;margin:0 0 18px}
.sv-text:last-child{margin-bottom:0}
.sv-text strong{color:var(--navy);font-weight:600}

/* De drie rollen in een trust. Haarlijnen als enige structuur, goud alleen
   op de nummers, dat is het enige accentvlak op deze pagina. */
.sv-steps{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border);margin-top:clamp(40px,5vw,64px)}
.sv-step{padding:28px 32px 4px 0}
.sv-step + .sv-step{border-left:1px solid var(--border);padding-left:32px}
.sv-step-num{font-family:var(--font-display);font-size:15px;color:var(--gold-deep);
  letter-spacing:0.1em;display:block;margin-bottom:14px}
.sv-step-role{font-family:var(--font-body);font-size:14px;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--navy);margin-bottom:10px}
.sv-step-text{font-family:var(--font-body);font-size:17px;line-height:1.6;
  color:var(--text-muted);margin:0}

.sv-steps--duo{grid-template-columns:repeat(2,1fr)}


/* Slotband. Vervangt de foto-CTA op de korte dienstenpagina's: die pagina's
   krijgen hun beeld halverwege, en op het beslismoment werkt een vol donker
   vlak beter dan een stockfoto. Navy is de donkere grond van het systeem. */
.sv-cta{background:var(--navy);padding:clamp(64px,7vw,104px) 48px}
.sv-cta-inner{max-width:1200px;margin:0 auto}
.sv-cta h2{font-family:var(--font-display);font-weight:400;color:var(--white);
  font-size:clamp(1.9rem,3.4vw,2.9rem);line-height:1.1;letter-spacing:-0.022em;
  margin:0 0 16px;max-width:20ch;text-wrap:balance}
.sv-cta p{font-family:var(--font-body);font-size:18px;line-height:1.65;
  color:rgba(255,255,255,0.72);max-width:54ch;margin:0 0 32px}
.sv-cta-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.sv-cta-wa{font-family:var(--font-body);font-size:15px;color:var(--gold-light);
  text-decoration:none;border-bottom:1px solid rgba(232,199,122,0.45);padding-bottom:3px;
  transition:color .2s,border-color .2s}
.sv-cta-wa:hover{color:var(--white);border-color:var(--white)}

/* Een uitspraak op kopgrootte tussen twee haarlijnen. Vervangt het citaatblok
   met gouden rand links, dat als AI-opmaak las. */
.sv-pull{font-family:var(--font-display);font-weight:400;color:var(--navy);
  font-size:clamp(1.5rem,2.7vw,2.2rem);line-height:1.25;letter-spacing:-0.02em;
  max-width:30ch;margin:clamp(40px,5vw,64px) 0 0;padding:clamp(28px,3vw,40px) 0;
  border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* Rijen met een label links. Het label valt op door kapitalen en spatiering,
   niet door vet: gewicht mag de hierarchie niet dragen. */
.sv-rows{margin-top:clamp(36px,4vw,56px)}
.sv-row{display:grid;grid-template-columns:minmax(0,24%) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);padding:24px 0;border-top:1px solid var(--border)}
.sv-row:last-child{border-bottom:1px solid var(--border)}
.sv-row-label{font-family:var(--font-body);font-size:14px;text-transform:uppercase;
  letter-spacing:0.1em;color:var(--navy);line-height:1.5}
.sv-row-text{font-family:var(--font-body);font-size:18px;line-height:1.65;
  color:var(--text-muted);margin:0}

/* Drie cellen naast elkaar, alleen door haarlijnen gescheiden. Geen kaarten,
   want kaarten vragen schaduw en radius en die horen niet in dit systeem. */
.sv-trio{display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border);margin-top:clamp(36px,4vw,56px)}
.sv-cell{padding:28px 32px 0 0}
.sv-cell + .sv-cell{border-left:1px solid var(--border);padding-left:32px}
.sv-cell h3{font-family:var(--font-display);font-weight:400;color:var(--navy);
  font-size:1.4rem;line-height:1.2;letter-spacing:-0.015em;margin:0 0 12px}
.sv-cell p{font-family:var(--font-body);font-size:17px;line-height:1.6;
  color:var(--text-muted);margin:0}

/* FAQ. Zelfde accordeon-markup als de rest van de site, maar links uitgelijnd
   en de vraag op 22px in de schreefletter, zodat hij bij de koppen hoort. */
.sv-faq .faq-list{max-width:820px;margin:clamp(32px,4vw,48px) 0 0}
.sv-faq .faq-q{font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.35rem);letter-spacing:-0.015em;padding:20px 0}
.sv-faq .faq-a .body-text,.sv-faq .faq-a p{font-size:18px;line-height:1.7}

/* Doorverwijzing naar de volgende dienst: een rij, geen kaart. */
.sv-next{display:flex;align-items:flex-end;justify-content:space-between;
  gap:40px;border-top:1px solid var(--border);padding-top:32px}
.sv-next-title{font-family:var(--font-display);font-weight:400;color:var(--navy);
  font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.15;letter-spacing:-0.02em;
  margin:0 0 10px}
.sv-next-desc{font-family:var(--font-body);font-size:17px;line-height:1.6;
  color:var(--text-muted);margin:0;max-width:52ch}
.sv-next-link{font-family:var(--font-body);font-size:15px;letter-spacing:0.02em;
  color:var(--gold-deep);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid var(--gold);padding-bottom:3px;transition:color .2s,border-color .2s}
.sv-next-link:hover{color:var(--navy);border-color:var(--navy)}

@media(max-width:900px){
  .sv-band{padding:56px 22px}
  .sv-hero{padding:112px 22px 56px}
  .sv-split{grid-template-columns:1fr;gap:22px}
  .sv-h2{max-width:26ch}
  .sv-cta{padding:56px 22px}
  .sv-steps,.sv-trio,.sv-steps--duo{grid-template-columns:1fr;border-top:none}
  .sv-step,.sv-cell{padding:24px 0 0;border-top:1px solid var(--border)}
  .sv-step + .sv-step,.sv-cell + .sv-cell{border-left:none;padding-left:0}
  .sv-row{grid-template-columns:1fr;gap:8px}
  .sv-next{flex-direction:column;align-items:flex-start;gap:20px}
}

/* PDPA-notitie en toestemmingsvakje, ronde oktober 2026 */
.pdpa-list{margin:16px 0 0;padding-left:1.25rem;display:flex;flex-direction:column;gap:12px;color:var(--text);line-height:1.65}
.pdpa-list strong{color:var(--navy);font-weight:600}
.form-consent{margin:-8px 0 28px}
.form-consent-label{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-md);color:var(--text);line-height:1.5;cursor:pointer}
.form-consent-label input{margin:3px 0 0;width:18px;height:18px;flex:none;accent-color:var(--navy)}
.form-consent-label a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px}
.pdpa-list a[href^="tel:"]{white-space:nowrap}
#pdpa{scroll-margin-top:80px}

/* Mobiele ronde, 9 oktober 2026. Alles onder 900px; desktop verandert niet.
   Gemeten op 390px: geen horizontale overflow, wel te dikke kaartranden, tekst van 11,5px,
   tikdoelen van 21px (footer) en 32x23 (hamburger), en blokken zonder ruimte onderaan. */
@media(max-width:900px){
  :root{--t-xs:0.8rem}
  /* Twee knoppen blijven naast elkaar: samen de breedte delen in plaats van elk op eigen maat */
  .hero-actions,.trackrecord-actions,.cta-actions{flex-wrap:nowrap;gap:12px}
  .hero-actions>a,.trackrecord-actions>a,.cta-actions>a{flex:1 1 0;min-width:0;padding-left:10px;padding-right:10px;text-align:center;letter-spacing:0.1em;line-height:1.4}
  .location-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .location-stat{padding:28px 12px}
  .location-stat-number{font-size:clamp(1.4rem,6.6vw,2.2rem)}
  .service-card-link,.intro-link,.sv-crumb a{display:inline-block;padding-top:10px;padding-bottom:10px}
  /* Links met een streep eronder: de streep blijft waar hij is, het tikvlak wordt groter */
  .sv-next-link,.sv-cta-wa{position:relative}
  .sv-next-link::after,.sv-cta-wa::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
  .card,.fact-card{padding:28px 22px}
  .service-card,.tax-card{padding:32px 22px}
  .advantage-item{padding:28px 22px}
  .sv-step,.sv-cell{padding:24px 0 28px}
  .location-stat-label,.mini-stat-label{display:block;line-height:1.5;letter-spacing:0.1em}
  .nav-menu-toggle{min-width:44px;min-height:44px;align-items:center;justify-content:center;margin-right:-10px}
  .footer-col a{padding:10px 0;margin-bottom:0}
  .footer-legal a{display:inline-block;padding:10px 0}
  .footer-copy,.footer-legal a{color:rgba(255,255,255,0.5)}
}