/* ══════════════════════════════════════════════════════════════
   Layout   : aurora.framer.media homepage — section for section
   Palette  : Schipperen navy/red — context/COLOR-SYSTEM.md
   Content  : client-confirmed copy/figures — context/CLIENT-REQUIREMENTS.md
   Dropped from Aurora: blog, newsletter, monthly/yearly toggle, case studies
   Added   : uurtje-factuurtje vergelijking (client requirement)
   ══════════════════════════════════════════════════════════════ */
:root{
  --navy-900:#111025; --navy-800:#191734; --navy-700:#23214A; --navy-600:#2E2B5E;
  --blue-700:#2E4A7D; --blue-600:#39517C; --blue-500:#4C6699;
  --blue-200:#C3CEE2; --blue-100:#E1E7F2; --blue-50:#EEF2F8;
  --red-600:#C40D1B; --red-500:#E61020; --red-100:#FCE0E3;
  --white:#fff; --grey-50:#F6F7FA; --grey-100:#EDEEF2; --grey-200:#DFE1E8;
  --grey-300:#C9CBD4; --grey-500:#656477; --grey-600:#5B5A6E;

  --ff-head:'Inter',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,sans-serif;
  --ff-accent:'STIX Two Text',Georgia,serif;   /* cursieve accentwoorden */

  --pad:clamp(1.25rem,4vw,2.5rem);
  --max:1240px;
  --sec:clamp(4.5rem,8vw,7.5rem);
  --r-shell:30px;   /* inset dark canvas */
  --r-card:20px;
  --r-in:14px;
  --r-pill:999px;
  --bd:1px solid var(--grey-200);
  --bd-d:1px solid rgba(255,255,255,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; font-family:var(--ff-body); font-size:1rem; line-height:1.65; color:var(--grey-600); background:var(--white); -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--ff-head); color:var(--navy-800); margin:0; line-height:1.08; letter-spacing:-.035em; font-weight:700}
p,figure,blockquote{margin:0}
a{color:inherit; text-decoration:none}
img,svg{display:block}
ul,ol{margin:0; padding:0; list-style:none}

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
.sec--tint{background:var(--grey-50)}
:focus-visible{outline:3px solid var(--navy-800); outline-offset:3px; border-radius:6px}
.onDark :focus-visible{outline-color:#fff}
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:1rem; z-index:99; background:#fff; padding:.75rem 1rem; border-radius:var(--r-in)}

/* ── eyebrow: dot + label (Aurora) ───────────────────────── */
.pill{display:inline-flex; align-items:center; gap:.5rem; font-size:1rem; color:var(--grey-500)}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--red-500); flex:none}
.pill--dark{color:var(--blue-200)}

/* ── section heads ───────────────────────────────────────── */
.head{text-align:center; max-width:46rem; margin:0 auto clamp(3rem,5vw,4.5rem)}
.head h2{margin-top:1.25rem; font-size:clamp(2rem,4.4vw,3.375rem); line-height:1.1; text-wrap:balance}
.head p{margin-top:1.5rem; font-size:1.0625rem; text-wrap:pretty}
.head--dark h2{color:var(--white)}
.head--dark p{color:var(--blue-200)}
/* STIX heeft een lagere x-hoogte dan Inter — 1.05em trekt het optisch recht */
em.ser{font-family:var(--ff-accent); font-style:italic; font-weight:400; font-size:1.05em; color:var(--red-500); letter-spacing:-.005em; padding-right:.06em}
.head--dark em.ser{color:#FF6B76}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.625rem;
  font-family:var(--ff-head); font-weight:700; font-size:.9375rem;
  padding:.9375rem 1.5rem; border-radius:var(--r-pill); border:1.5px solid transparent;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.btn--primary{background:var(--red-500); color:var(--white)}
.btn--primary:hover{background:var(--red-600)}
.btn--navy{background:var(--navy-800); color:var(--white)}
.btn--navy:hover{background:var(--navy-700)}
.btn--ghost{background:var(--white); border-color:var(--grey-200); color:var(--navy-800)}
.btn--ghost:hover{border-color:var(--navy-800)}
.btn--light{background:var(--white); color:var(--navy-800)}
.btn--light:hover{background:var(--blue-50)}
.btn--lg{padding:1.0625rem 1.875rem; font-size:1rem}
.btn .arw{transition:transform .18s ease}
.btn:hover .arw{transform:translateX(3px)}

/* split-pill CTA (label + arrow segment) */
.splitbtn{display:inline-flex; align-items:stretch; border-radius:var(--r-pill); overflow:hidden}
.splitbtn span{
  display:grid; place-items:center; background:var(--red-500); color:var(--white);
  font-family:var(--ff-head); font-weight:700; font-size:1rem; padding:1rem 1.75rem;
  transition:background-color .18s ease;
}
.splitbtn i{
  display:grid; place-items:center; width:56px; background:var(--red-600); color:var(--white);
  border-left:1px solid rgba(255,255,255,.22); transition:background-color .18s ease;
}
.splitbtn:hover span,.splitbtn:hover i{background:var(--navy-900)}
.splitbtn i svg{transition:transform .18s ease}
.splitbtn:hover i svg{transform:translateX(3px)}

/* ══ 1. SHELL + NAV ═════════════════════════════════════════
   Aurora: dark hero sits in an inset rounded canvas, nav floats
   inside it as a translucent pill row. */
.shell{background:var(--navy-800); position:relative; overflow:hidden; color:var(--blue-200)}
.shell::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:88px 88px; -webkit-mask-image:radial-gradient(120% 90% at 50% 25%,#000 28%,transparent 76%);
          mask-image:radial-gradient(120% 90% at 50% 25%,#000 28%,transparent 76%);
}
.shell::after{
  content:""; position:absolute; width:58rem; height:58rem; right:-16rem; top:-26rem; pointer-events:none;
  background:radial-gradient(circle,rgba(76,102,153,.38),transparent 62%);
}
.hdr{position:relative; z-index:20; padding-block:1.375rem}
.hdr__in{display:flex; align-items:center; gap:1.5rem}
.logo{display:flex; align-items:center; gap:.5625rem; font-family:var(--ff-head); font-weight:800; font-size:1.1875rem; color:var(--white); letter-spacing:-.03em; white-space:nowrap; flex:none}
.logo small{display:block; font-size:.4375rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue-200); font-weight:700; margin-top:-1px}
.nav{
  display:flex; gap:.125rem; margin-inline:auto;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-pill); padding:.3125rem;
}
.nav a{font-family:var(--ff-head); font-weight:600; font-size:.875rem; color:rgba(255,255,255,.82); padding:.5rem .9375rem; border-radius:var(--r-pill); white-space:nowrap; transition:color .18s,background-color .18s}
.nav a:hover,.nav a[aria-current]{color:var(--navy-800); background:var(--white)}
.hdr__cta{display:flex; align-items:center; gap:1.125rem; flex:none}
.hdr__tel{font-family:var(--ff-head); font-weight:700; font-size:.875rem; color:var(--white); white-space:nowrap}
.hdr .splitbtn span{background:var(--white); color:var(--navy-800); padding:.625rem 1.125rem; font-size:.875rem}
.hdr .splitbtn i{background:var(--white); color:var(--navy-800); width:42px; border-left:1px solid var(--grey-200)}
.hdr .splitbtn:hover span,.hdr .splitbtn:hover i{background:var(--red-500); color:var(--white)}
.burger{display:none; background:none; border:1px solid rgba(255,255,255,.28); border-radius:var(--r-pill); padding:.625rem .75rem; cursor:pointer}
.burger span{display:block; width:18px; height:2px; background:var(--white); margin:3.5px 0}

/* ══ 2. HERO ════════════════════════════════════════════════ */
.hero{position:relative; z-index:10; padding-block:clamp(3rem,6vw,5rem) clamp(3rem,5vw,4.5rem)}
.hero__in{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,4vw,3.5rem); align-items:center}
.rate{display:inline-flex; align-items:center; gap:.75rem; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-pill); padding:.375rem .9375rem .375rem .375rem}
.avs{display:flex}
.avs span{
  width:28px; height:28px; border-radius:50%; background:var(--blue-500); color:var(--white);
  display:grid; place-items:center; font-family:var(--ff-head); font-weight:700; font-size:.5625rem;
  border:2px solid var(--navy-800); margin-left:-9px;
}
.avs span:first-child{margin-left:0}
.rate p{font-size:.875rem; color:var(--white); display:flex; align-items:center; gap:.375rem}
.rate .star{color:var(--red-500)}
.hero h1{margin-top:1.75rem; color:var(--white); font-size:clamp(2.25rem,4.4vw,3.625rem); line-height:1.06; font-weight:700}
.hero h1 em{font-family:var(--ff-accent); font-style:italic; font-weight:400; font-size:1.05em; color:#FF6B76; letter-spacing:-.005em; padding-right:.06em}
.hero__lede{margin-top:1.625rem; max-width:33rem; font-size:1.0625rem; color:var(--blue-200); text-wrap:pretty}
.hero__acts{display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-top:2.25rem}
.hero__acts .txtlink{font-family:var(--ff-head); font-weight:700; font-size:.9375rem; color:var(--white); display:inline-flex; align-items:center; gap:.5rem; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:2px}
.hero__acts .txtlink:hover{border-color:var(--white)}

/* hero portrait + floating cards */
.shot{position:relative; border:1px solid rgba(255,255,255,.16); border-radius:24px; padding:12px}
.shot__img{position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:linear-gradient(155deg,var(--blue-500),var(--navy-900) 72%)}
.shot__img img{width:100%; height:100%; object-fit:cover; object-position:50% 55%}
.glass{
  position:absolute; z-index:3; background:rgba(25,23,52,.78); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:.9375rem 1.0625rem;
}
.glass__t{display:flex; align-items:center; gap:.5625rem; font-family:var(--ff-head); font-weight:700; font-size:.8125rem; color:var(--white)}
.glass__bar{display:flex; align-items:center; gap:.75rem; margin-top:.75rem}
.glass__bar>div{flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,.18); overflow:hidden}
.glass__bar div i{display:block; height:100%; width:100%; background:var(--red-500); border-radius:3px}
.glass__bar small{font-size:.75rem; color:var(--blue-200)}
.shot .glass--a{left:-1.5rem; bottom:2.75rem; width:15.5rem}
.shot .glass--b{right:1.5rem; top:1.75rem; text-align:right}
.shot .glass--b b{display:block; font-family:var(--ff-head); font-weight:800; font-size:1.5rem; color:var(--white); letter-spacing:-.04em; line-height:1}
.shot .glass--b small{display:block; margin-top:.3125rem; font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-200)}

/* hero stat strip along the bottom of the dark canvas */
.herostats{
  position:relative; z-index:10; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:var(--bd-d);
}
.herostats li{padding:clamp(1.5rem,2.6vw,2rem) clamp(1rem,2vw,1.75rem); border-left:var(--bd-d)}
.herostats li:first-child{border-left:0}
.herostats b{display:block; font-family:var(--ff-head); font-weight:700; font-size:clamp(1.5rem,2.6vw,2.125rem); color:var(--white); letter-spacing:-.04em; line-height:1}
.herostats span{display:block; margin-top:.5rem; font-size:.8125rem; color:var(--blue-200)}

/* ══ 3. LOGO STRIP ══════════════════════════════════════════ */
.trust{text-align:center; padding-block:clamp(3rem,5vw,4.5rem)}
.trust__lbl{font-family:var(--ff-head); font-weight:700; font-size:1rem; color:var(--navy-800)}
.rail{margin-top:clamp(2rem,3.4vw,3rem); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(2rem,5vw,4.5rem); opacity:.78}
.rail li{height:34px; display:grid; place-items:center}
.rail li span{font-family:var(--ff-head); font-weight:700; font-size:1.0625rem; color:var(--navy-800); letter-spacing:-.025em; white-space:nowrap}
.rail li img{max-height:100%; max-width:150px; object-fit:contain; filter:grayscale(1)}

/* gedeelde naam/avatar-regel (reviews) */
.av{width:38px; height:38px; border-radius:50%; background:var(--blue-100); color:var(--navy-800); display:grid; place-items:center; font-family:var(--ff-head); font-weight:700; font-size:.75rem; flex:none}
.who__n b{display:block; font-family:var(--ff-head); font-size:.9375rem; color:var(--navy-800)}
.who__n small{font-size:.8125rem; color:var(--grey-500)}

/* ══ 4. OVER ONS — beeld + quote + accordeon ════════════════ */
.abt__head{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,5vw,4rem); align-items:end; margin-bottom:clamp(2.5rem,4.5vw,4rem)}
.abt__head h2{margin-top:1.25rem; font-size:clamp(2rem,4.4vw,3.375rem); line-height:1.1; text-wrap:balance}
.abt__head>p{font-size:1.0625rem; text-wrap:pretty}
.abt{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}
/* ruimte onder het beeld waar de navy kaart in hangt */
.abt__media{position:relative; padding-bottom:clamp(2.5rem,5vw,4rem)}
.abt__img{position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--grey-50); aspect-ratio:4/4.2}
.abt__img img{width:100%; height:100%; object-fit:cover; object-position:50% 24%}
.abt__img::after{content:""; position:absolute; inset:auto 0 0 0; height:58%; background:linear-gradient(to top,rgba(17,16,37,.85),transparent)}
/* right blijft links van de navy kaart (kaart = max 60% breed) */
.abt__quote{position:absolute; z-index:2; left:clamp(1.25rem,2.4vw,2rem); right:54%; bottom:clamp(1.5rem,3vw,2.5rem); color:var(--white)}
.abt__quote q{display:block; quotes:none; font-family:var(--ff-accent); font-style:italic; font-size:clamp(1.125rem,1.9vw,1.5rem); line-height:1.35}
.abt__quote small{display:block; margin-top:.875rem; font-family:var(--ff-head); font-weight:700; font-size:.6875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-200)}
.abt__card{position:absolute; right:0; bottom:0; width:min(60%,17.5rem); background:var(--navy-800); color:var(--blue-200); border-radius:var(--r-card); padding:clamp(1.25rem,2vw,1.625rem)}
.abt__card h3{color:var(--white); font-size:1.0625rem; margin-bottom:1rem}
.abt__card ul{display:grid; gap:.6875rem; margin-bottom:1.375rem}
.abt__card li{display:grid; grid-template-columns:auto 1fr; gap:.625rem; align-items:start; font-size:.875rem}
.abt__card li svg{margin-top:.3125rem}
.abt__card .btn{width:100%}
/* accordeon als één omkaderde lijst (hairlines i.p.v. losse boxen).
   Dubbele klasse: de basis-.acc staat verderop in dit blad en zou
   deze regels anders op bronvolgorde winnen. */
.acc.acc--card{gap:0; background:var(--white); border:var(--bd); border-radius:var(--r-card); padding-inline:clamp(1.125rem,2vw,1.75rem)}
.acc.acc--card details{border:0; border-bottom:var(--bd); border-radius:0; background:none}
.acc.acc--card details:last-child{border-bottom:0}
.acc.acc--card summary{padding:clamp(1.25rem,2vw,1.625rem) 0; font-size:clamp(1.0625rem,1.5vw,1.25rem); letter-spacing:-.02em}
.acc.acc--card .acc__body{padding:0 0 clamp(1.5rem,2.2vw,1.875rem)}
.acc.acc--card .acc__body p + p{margin-top:1rem}

/* ══ 5. WAAROM — 2×2 + portrait ═════════════════════════════ */
.why{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.6vw,1.25rem)}
.feat{
  display:flex; flex-direction:column; min-height:clamp(14rem,19vw,18rem);
  background:var(--white); border:var(--bd); border-radius:var(--r-card);
  padding:clamp(1.5rem,2.2vw,2rem); transition:border-color .18s,box-shadow .18s;
}
.feat:hover{border-color:var(--grey-300); box-shadow:0 18px 40px -30px rgba(17,16,37,.35)}
.ico{width:44px; height:44px; border-radius:50%; background:var(--navy-800); display:grid; place-items:center; flex:none; margin-bottom:auto}
.feat h3{font-size:1.1875rem; margin-bottom:.625rem}
.feat p{font-size:.9375rem; max-width:26ch; text-wrap:pretty}
.why__shot{grid-column:3; grid-row:1/span 2; position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--grey-50); min-height:100%}
.why__shot img{width:100%; height:100%; object-fit:cover; object-position:50% 55%}
.why__shot .glass{left:1rem; right:1rem; bottom:1rem; background:rgba(255,255,255,.92); border-color:rgba(17,16,37,.08)}
.why__shot .glass__t{color:var(--navy-800)}
.why__shot .glass__bar>div{background:var(--grey-100)}
.why__shot .glass__bar div i{width:98%}
.why__shot .glass__bar small{color:var(--grey-500)}

/* ══ 5. DIENSTEN — lichte kaart: beeld · titel · checklist ═══
   Subgrid houdt de grijze onderpanelen van alle vier de kaarten
   op één lijn, hoe de titels ook afbreken. */
.dark{background:var(--navy-800); color:var(--blue-200)}
.dark--round{border-radius:var(--r-shell); margin-inline:14px}
.svc{display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:auto auto; gap:clamp(.875rem,1.4vw,1.125rem)}
.svc__c{
  display:grid; grid-row:span 2; grid-template-rows:subgrid;
  background:var(--white); border:var(--bd); border-radius:var(--r-card); overflow:hidden;
  transition:border-color .18s,box-shadow .18s;
}
.svc__c:hover{border-color:var(--grey-300); box-shadow:0 20px 44px -32px rgba(17,16,37,.4)}
.svc__top{display:flex; flex-direction:column}
.svc__img{aspect-ratio:4/2.6; overflow:hidden; background:var(--grey-50); margin:14px 14px 0; border-radius:12px}
.svc__img img{width:100%; height:100%; object-fit:cover; object-position:50% 58%}
.svc__c h3{
  margin-top:auto; padding:clamp(1.75rem,3vw,2.75rem) clamp(1.25rem,1.8vw,1.625rem) clamp(1.25rem,1.8vw,1.625rem);
  font-size:clamp(1.125rem,1.6vw,1.4375rem); line-height:1.16; text-wrap:balance;
}
/* onderpaneel iets dieper dan de sectie-tint, zodat de twee-tint
   kaart ook op grijze achtergrond leesbaar blijft */
.svc__btm{display:flex; flex-direction:column; background:var(--grey-100); border-top:var(--bd); padding:clamp(1.375rem,1.9vw,1.625rem)}
.svc__btm ul{display:grid; gap:.75rem; margin-bottom:auto}
.svc__btm li{display:grid; grid-template-columns:auto 1fr; gap:.6875rem; align-items:start; font-size:.875rem; color:var(--grey-600); text-wrap:pretty}
.svc__btm li svg{margin-top:.3125rem}
.learn{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.75rem;
  background:var(--white); border:var(--bd); border-radius:12px;
  padding:.9375rem 1.125rem; font-family:var(--ff-head); font-weight:700; font-size:.9375rem; color:var(--navy-800);
  transition:background-color .18s,color .18s,border-color .18s;
}
.learn svg{transition:transform .18s}
.learn:hover{background:var(--navy-800); border-color:var(--navy-800); color:var(--white)}
.learn:hover svg{transform:translateX(3px)}
.svcnote{display:flex; align-items:center; gap:.625rem; justify-content:center; margin-top:clamp(2.5rem,3.5vw,3.25rem); font-size:.9375rem; color:var(--grey-500)}
.svcnote b{font-family:var(--ff-head); color:var(--navy-800)}

/* ══ 7. FEATURES — photo left / copy right ══════════════════ */
.fx{display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,4.5vw,4rem); align-items:center}
.fx__img{position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--grey-50); aspect-ratio:4/3.2}
.fx__img img{width:100%; height:100%; object-fit:cover; object-position:50% 55%}
.fx h2{font-size:clamp(1.875rem,3.6vw,2.875rem); margin-top:1.25rem; text-wrap:balance}
.fx>div>p{margin-top:1.375rem; font-size:1.0625rem; text-wrap:pretty}
.ticks{margin-top:2rem; display:grid; gap:1rem}
.ticks li{display:grid; grid-template-columns:auto 1fr; gap:.875rem; align-items:start}
.ticks b{display:block; font-family:var(--ff-head); font-weight:700; font-size:.9375rem; color:var(--navy-800)}
.ticks p{font-size:.875rem; margin-top:.125rem}
.tick{width:22px; height:22px; border-radius:50%; background:var(--red-100); display:grid; place-items:center; flex:none; margin-top:.125rem}
.fx .splitbtn{margin-top:2.25rem}

/* dark trio under the split */
.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.375rem); margin-top:clamp(2.5rem,4vw,3.5rem)}
.tcard{background:var(--navy-800); border-radius:var(--r-card); padding:clamp(1.5rem,2.4vw,2rem); min-height:13rem; display:flex; flex-direction:column}
.tcard .ico{background:rgba(255,255,255,.1)}
.tcard h3{color:var(--white); font-size:1.125rem; margin:1.5rem 0 .5rem}
.tcard p{font-size:.9375rem; color:var(--blue-200); text-wrap:pretty}

/* ══ 8. FUNDAMENT — accordion left / photo right ════════════ */
.fnd{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,4.5vw,4rem); align-items:center}
.acc{display:grid; gap:.75rem}
.acc details{background:var(--white); border:var(--bd); border-radius:var(--r-in); transition:border-color .18s}
.acc details[open]{border-color:var(--navy-800)}
.acc summary{display:flex; align-items:center; gap:1rem; cursor:pointer; list-style:none; padding:1.25rem 1.375rem; font-family:var(--ff-head); font-weight:700; font-size:.9375rem; color:var(--navy-800)}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+"; margin-left:auto; font-family:var(--ff-head); font-weight:700; font-size:1.25rem; color:var(--red-500); line-height:1}
.acc details[open] summary::after{content:"–"}
.acc__body{padding:0 1.375rem 1.375rem}
.acc__body p{font-size:.9375rem}
.acc__body ul{margin-top:1rem; display:grid; gap:.625rem}
.acc__body li{display:grid; grid-template-columns:auto 1fr; gap:.75rem; align-items:center; font-family:var(--ff-head); font-weight:600; font-size:.875rem; color:var(--navy-800)}
.fnd__img{position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--grey-50); aspect-ratio:4/3.4}
.fnd__img img{width:100%; height:100%; object-fit:cover; object-position:50% 60%}
.fnd__stat{
  position:absolute; left:1rem; bottom:1rem; right:1rem; background:var(--white);
  border-radius:var(--r-in); padding:1.125rem 1.25rem; display:flex; align-items:center; gap:1rem;
}
.fnd__stat b{font-family:var(--ff-head); font-weight:800; font-size:2rem; color:var(--navy-800); letter-spacing:-.05em; line-height:1}
.fnd__stat span{font-size:.8125rem; color:var(--grey-500); max-width:18ch}

/* ══ 9. AANPAK — dark band, 4 cards + photo ═════════════════ */
/* 2×2 kaarten met de foto als middenkolom — expliciet geplaatst,
   zodat de DOM-volgorde 01 · 02 · foto · 03 · 04 blijft kloppen */
.flow{display:grid; grid-template-columns:1fr 1fr 1fr; gap:clamp(1rem,1.6vw,1.25rem)}
.flow>li:nth-child(1){grid-area:1/1}
.flow>li:nth-child(2){grid-area:1/3}
.flow>li:nth-child(4){grid-area:2/1}
.flow>li:nth-child(5){grid-area:2/3}
.step{background:rgba(255,255,255,.05); border:var(--bd-d); border-radius:var(--r-card); padding:clamp(1.5rem,2.4vw,1.875rem); display:flex; flex-direction:column; min-height:12.5rem}
.step__n{display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--red-500); color:var(--white); font-family:var(--ff-head); font-weight:700; font-size:.75rem; margin-bottom:auto}
.step h3{color:var(--white); font-size:1.0625rem; margin:1.5rem 0 .5rem}
.step p{font-size:.9375rem; color:var(--blue-200); text-wrap:pretty}
.flow__img{grid-area:1/2/3/3; border-radius:var(--r-card); overflow:hidden; background:var(--navy-700); min-height:100%; margin:0}
.flow__img img{width:100%; height:100%; object-fit:cover; object-position:50% 55%}

/* ══ 10. VERGELIJKING ═══════════════════════════════════════ */
.cmp{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1rem,2vw,1.5rem); align-items:stretch}
.cmp__c{background:var(--white); border:var(--bd); border-radius:var(--r-card); padding:clamp(1.75rem,2.6vw,2.25rem)}
.cmp__c--own{border:1.5px solid var(--navy-800); position:relative}
.tagline{position:absolute; top:-13px; left:clamp(1.75rem,2.6vw,2.25rem); background:var(--red-500); color:var(--white); font-family:var(--ff-head); font-weight:700; font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; padding:.4375rem .8125rem; border-radius:var(--r-pill)}
.cmp__h{display:flex; align-items:center; gap:1rem; padding-bottom:1.5rem; border-bottom:var(--bd)}
.cmp__h .m{width:46px; height:46px; border-radius:var(--r-in); display:grid; place-items:center; flex:none; background:var(--grey-50)}
.cmp__c--own .m{background:var(--navy-800)}
.cmp__h small{display:block; font-family:var(--ff-head); font-weight:700; font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-500)}
.cmp__h h3{font-size:1.1875rem; margin-top:.25rem}
.cmp__c li{display:grid; grid-template-columns:auto 1fr; gap:.875rem; padding-block:1.125rem; border-bottom:var(--bd)}
.cmp__c li:last-child{border-bottom:0; padding-bottom:0}
.cmp__c li b{display:block; font-family:var(--ff-head); font-size:.9375rem; color:var(--navy-800)}
.cmp__c li p{font-size:.875rem; margin-top:.125rem}
.dash{width:22px; height:22px; border-radius:50%; background:var(--grey-100); display:grid; place-items:center; flex:none; margin-top:.125rem}

/* ══ 11. ERVARINGEN ═════════════════════════════════════════ */
.revs{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.375rem)}
.rev{display:flex; flex-direction:column; background:var(--white); border:var(--bd); border-radius:var(--r-card); padding:clamp(1.5rem,2.4vw,2rem)}
.rev__top{display:flex; align-items:center; gap:.875rem; padding-bottom:1.25rem; border-bottom:var(--bd)}
.score{margin-left:auto; display:inline-flex; align-items:center; gap:.3125rem; background:var(--grey-50); border-radius:var(--r-pill); padding:.3125rem .625rem; font-family:var(--ff-head); font-weight:700; font-size:.75rem; color:var(--navy-800)}
.score i{font-style:normal; color:var(--red-500)}
.rev blockquote{margin:1.25rem 0 0; font-size:.9375rem; flex:1; text-wrap:pretty}
.revs__act{display:flex; justify-content:center; margin-top:clamp(2rem,3vw,2.75rem)}

/* ══ 12. PAKKETTEN ══════════════════════════════════════════ */
.price{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,2vw,1.5rem); align-items:stretch}
.tier{display:flex; flex-direction:column; background:var(--white); border:var(--bd); border-radius:var(--r-card); padding:clamp(1.75rem,2.6vw,2.25rem)}
.tier--hi{border:1.5px solid var(--navy-800); position:relative; box-shadow:0 30px 70px -45px rgba(17,16,37,.5)}
.tier h3{font-size:1.25rem}
.tier>p{font-size:.875rem; margin-top:.375rem}
.tier__p{margin:1.75rem 0; display:flex; align-items:baseline; gap:.4375rem}
.tier__p b{font-family:var(--ff-head); font-weight:800; font-size:3rem; color:var(--navy-800); letter-spacing:-.05em; line-height:1}
.tier__p span{font-size:.875rem; color:var(--grey-500)}
.tier h4{font-family:var(--ff-head); font-weight:700; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-500); padding-top:1.5rem; border-top:var(--bd); margin-bottom:1.125rem}
.tier ul{flex:1; display:grid; gap:.8125rem; align-content:start}
.tier ul li{display:grid; grid-template-columns:auto 1fr; gap:.75rem; font-size:.9375rem}
.tier .btn{margin-top:2rem}
.price__note{margin-top:2rem; text-align:center; font-size:.875rem; color:var(--grey-500); max-width:52rem; margin-inline:auto; text-wrap:pretty}

/* ══ 13. CIJFERS — beeld links, statregels rechts ═══════════ */
.stats{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(2rem,4vw,3.5rem); align-items:start}
.stats__img{position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--grey-50); aspect-ratio:4/3.4}
.stats__img img{width:100%; height:100%; object-fit:cover; object-position:50% 55%}
.stats__img .btn{position:absolute; left:clamp(1rem,2vw,1.5rem); bottom:clamp(1rem,2vw,1.5rem)}
.stats ol{display:grid; gap:.25rem}
.srow{display:grid; grid-template-columns:minmax(5.5rem,7.5rem) 1fr; gap:clamp(1rem,2.4vw,2rem); align-items:start; padding:clamp(1.25rem,2.2vw,1.75rem); border-radius:var(--r-in)}
.srow:nth-child(odd){background:var(--grey-50)}
.srow b{font-family:var(--ff-head); font-weight:700; font-size:clamp(1.875rem,3.4vw,2.75rem); color:var(--navy-800); letter-spacing:-.05em; line-height:1.05}
.srow b i{font-style:normal; color:var(--red-500)}
.srow h3{font-size:1.125rem}
.srow p{margin-top:.5rem; font-size:.9375rem; text-wrap:pretty}

/* ══ 14. FAQ ════════════════════════════════════════════════ */
.faq{max-width:52rem; margin-inline:auto; display:grid; gap:.75rem}
.faq details{background:var(--white); border:var(--bd); border-radius:var(--r-in); transition:border-color .18s}
.faq details[open]{border-color:var(--navy-800)}
.faq summary{display:flex; align-items:center; gap:1rem; cursor:pointer; list-style:none; padding:1.375rem 1.5rem; font-family:var(--ff-head); font-weight:700; font-size:1rem; color:var(--navy-800)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; font-family:var(--ff-head); font-weight:700; font-size:1.375rem; color:var(--red-500); line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details>p{padding:0 1.5rem 1.5rem; font-size:.9375rem; max-width:46rem}

/* ══ 15. CONTACT — beeld + leadformulier ════════════════════
   Formulierkaart schuift over het beeld heen (negatieve marge),
   klapt terug naar 0 onder 1100px. */
.ctc__head{max-width:34rem; margin-bottom:clamp(2.5rem,4vw,3.5rem)}
.ctc__head h2{margin-top:1.25rem; font-size:clamp(2rem,4.4vw,3.25rem); line-height:1.1; text-wrap:balance}
.ctc__head p{margin-top:1.375rem; font-size:1.0625rem; text-wrap:pretty}
.ctc{display:grid; grid-template-columns:1.02fr .98fr; align-items:start}
.ctc__media{position:relative; z-index:1}
.ctc__img{position:relative; border-radius:var(--r-card); overflow:hidden; background:var(--grey-50); aspect-ratio:16/7.5}
.ctc__img img{width:100%; height:100%; object-fit:cover; object-position:50% 62%}
/* sociale bewijskracht pal naast het formulier */
.ctc__proof{
  position:absolute; z-index:2; left:clamp(.75rem,1.4vw,1rem); bottom:clamp(.75rem,1.4vw,1rem);
  right:clamp(2.5rem,6vw,5rem); display:flex; align-items:center; gap:.875rem; color:var(--white);
  background:rgba(25,23,52,.74); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-in); padding:.75rem .9375rem;
}
.ctc__proof b{display:block; font-family:var(--ff-head); font-size:.9375rem}
.ctc__proof small{display:block; font-size:.8125rem; color:var(--blue-200)}
.ctc__proof .star{color:var(--red-500)}

/* "zo gaat het verder" — haalt de drempel voor het invullen weg */
.ctc__next{margin:clamp(.875rem,1.4vw,1.125rem) clamp(2rem,4.5vw,4rem) 0 0; background:var(--white); border:var(--bd); border-radius:var(--r-card); padding:clamp(1.375rem,2.2vw,1.75rem)}
.ctc__next h3{font-size:1.0625rem; margin-bottom:1.25rem}
.ctc__next ol{display:grid; gap:1.125rem}
.ctc__next li{position:relative; display:grid; grid-template-columns:auto 1fr; gap:.875rem}
.ctc__next li:not(:last-child)::before{content:""; position:absolute; left:13px; top:32px; bottom:-1.125rem; width:1px; background:var(--grey-200)}
.ctc__next .n{position:relative; z-index:1; width:27px; height:27px; border-radius:50%; background:var(--navy-800); color:var(--white); display:grid; place-items:center; font-family:var(--ff-head); font-weight:700; font-size:.75rem}
.ctc__next b{display:block; font-family:var(--ff-head); font-size:.9375rem; color:var(--navy-800)}
.ctc__next p{font-size:.875rem; margin-top:.125rem; text-wrap:pretty}

/* rechtermarge houdt de kaartjes vrij van de overlappende formulierkaart */
/* e-mailadres krijgt de bredere kolom zodat het op één regel past */
.ctc__rows{margin:clamp(.875rem,1.4vw,1.125rem) clamp(2rem,4.5vw,4rem) 0 0; display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(.875rem,1.4vw,1.125rem)}
.ctc__rows li{background:var(--grey-50); border:var(--bd); border-radius:var(--r-card); transition:border-color .18s,background-color .18s}
.ctc__rows li:hover{border-color:var(--navy-800); background:var(--white)}
.ctc__rows li>a{display:grid; grid-template-columns:auto 1fr; gap:.875rem; align-items:center; padding:clamp(1rem,1.6vw,1.25rem)}
.ctc__ic{width:42px; height:42px; border-radius:50%; background:var(--white); border:var(--bd); display:grid; place-items:center; flex:none}
.ctc__rows small{display:block; font-size:.8125rem; color:var(--grey-500)}
.ctc__rows b{display:block; font-family:var(--ff-head); font-size:.875rem; letter-spacing:-.015em; color:var(--navy-800); margin-top:.125rem; overflow-wrap:anywhere}
.ctc__addr{display:flex; align-items:center; gap:.625rem; margin-top:1rem; font-size:.8125rem; color:var(--grey-500)}

.ctc__form{position:relative; z-index:3; margin:clamp(2rem,4vw,3.5rem) 0 0 clamp(-3.5rem,-2.5vw,0rem)}
.form{background:var(--white); border:var(--bd); border-radius:var(--r-card); overflow:hidden; box-shadow:0 40px 90px -55px rgba(17,16,37,.6)}
.form__hd{display:flex; align-items:center; gap:1rem; background:var(--navy-800); color:var(--white); padding:1.125rem clamp(1.25rem,2vw,1.625rem)}
.form__hd .logo{font-size:1.0625rem}
.form__hd p{font-family:var(--ff-head); font-weight:700; font-size:.9375rem; border-left:1px solid rgba(255,255,255,.26); padding-left:1rem}
.form__hd .send{margin-left:auto; color:var(--red-500); flex:none}
.form__bd{padding:clamp(1.375rem,2.2vw,1.875rem); display:grid; gap:1.125rem}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:1.125rem}
.fld label{display:block; font-family:var(--ff-head); font-weight:600; font-size:.8125rem; color:var(--navy-800); margin-bottom:.5rem}
.fld input,.fld textarea{
  width:100%; font-family:var(--ff-body); font-size:.9375rem; color:var(--navy-800);
  background:var(--white); border:var(--bd); border-radius:12px; padding:.8125rem 1rem;
  transition:border-color .18s,box-shadow .18s;
}
.fld textarea{min-height:7.5rem; resize:vertical}
.fld input:focus,.fld textarea:focus{outline:none; border-color:var(--navy-800); box-shadow:0 0 0 3px rgba(25,23,52,.14)}
.fld input::placeholder,.fld textarea::placeholder{color:var(--grey-300)}
/* spamval — verborgen voor mensen, ingevuld door bots */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form__foot{display:flex; align-items:center; justify-content:space-between; gap:1rem 1.5rem; flex-wrap:wrap; padding-top:.25rem}
.form__note{font-size:.8125rem; color:var(--grey-500); max-width:28ch}
.form__note a{text-decoration:underline; text-underline-offset:2px}

/* ══ 16. FOOTER ═════════════════════════════════════════════ */
.ftr{background:var(--navy-900); color:var(--blue-200); padding-block:clamp(3.5rem,6vw,5rem) 1.5rem; overflow:hidden}
.ftr__in{display:grid; grid-template-columns:1.5fr repeat(4,.92fr); gap:clamp(1.5rem,3vw,2.5rem)}
.ftr .logo{color:var(--white)}
.ftr .logo small{color:var(--blue-200)}
.ftr__in>div>p{margin-top:1.5rem; font-size:.875rem; max-width:28ch}
.ftr h4{font-family:var(--ff-head); font-weight:700; font-size:.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--white); margin-bottom:1.25rem}
.ftr li{margin-bottom:.6875rem; font-size:.875rem}
.ftr a{transition:color .18s}
.ftr a:hover{color:var(--white)}
/* oversized wordmark, Aurora's footer signature */
.ftr__mark{
  margin-top:clamp(2.5rem,5vw,4rem); font-family:var(--ff-head); font-weight:800;
  font-size:clamp(3rem,14.2vw,11.5rem); line-height:.86; letter-spacing:-.055em;
  color:rgba(255,255,255,.1); text-align:center; user-select:none;
}
.ftr__bot{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:clamp(1.5rem,3vw,2.5rem); padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.12); font-size:.8125rem}

/* ══ RESPONSIVE ═════════════════════════════════════════════ */
@media(max-width:1100px){
  .nav,.hdr__tel{display:none}
  .burger{display:block; margin-left:auto}
  .hero__in{grid-template-columns:1fr}
  .shot{max-width:34rem}
  .shot__img{aspect-ratio:5/4}
  .herostats{grid-template-columns:1fr 1fr}
  .herostats li:nth-child(3){border-left:0}
  .herostats li:nth-child(n+3){border-top:var(--bd-d)}
  .abt__head,.abt,.stats,.ctc{grid-template-columns:1fr}
  .ctc__form{margin-left:0}
  .ctc__rows,.ctc__next{margin-right:0}
  .ctc__img{aspect-ratio:16/9}
  .abt__img,.stats__img{aspect-ratio:16/11; max-height:28rem}
  .abt__quote{right:46%}
  .why{grid-template-columns:1fr 1fr}
  .why__shot{grid-column:1/-1; grid-row:auto; min-height:20rem}
  .svc{grid-template-columns:1fr 1fr}
  .fx,.fnd{grid-template-columns:1fr}
  .fx__img,.fnd__img{aspect-ratio:16/10; max-height:26rem}
  .flow{grid-template-columns:1fr 1fr}
  .flow>li{grid-area:auto!important}
  .flow__img{grid-column:1/-1; min-height:18rem}
  .trio,.revs,.price{grid-template-columns:1fr 1fr}
  .ftr__in{grid-template-columns:1fr 1fr 1fr}
  .ftr__in>div:first-child{grid-column:1/-1}
}
@media(max-width:720px){
  .dark--round{margin-inline:8px; border-radius:22px}
  .final{border-radius:22px}
  .hdr__cta{display:none}
  .herostats{grid-template-columns:1fr}
  .herostats li{border-left:0; border-top:var(--bd-d)}
  .herostats li:first-child{border-top:0}
  .shot .glass--a{position:static; width:auto; margin-top:12px; backdrop-filter:none}
  .why,.svc,.trio,.flow,.revs,.price,.cmp{grid-template-columns:1fr}
  .ftr__in{grid-template-columns:1fr 1fr}
  .ctc__rows{grid-template-columns:1fr}
  .abt__media{padding-bottom:0}
  .abt__card{position:static; width:auto; margin-top:.875rem}
  .abt__quote{right:clamp(1.25rem,2.4vw,2rem)}
  .srow{grid-template-columns:1fr; gap:.5rem}
  .f2{grid-template-columns:1fr}
  .ctc__over{right:0; border-radius:0}
  .form__hd{flex-wrap:wrap; gap:.625rem}
  .form__hd p{border-left:0; padding-left:0; flex-basis:100%}
  .final__acts .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto}}

/* ══ SUBPAGINA'S ════════════════════════════════════════════
   Compacte navy header-hero + archiefcomponenten. Gedeeld door
   diensten.html en locaties.html. */
.phero{position:relative; z-index:10; padding-block:clamp(2.5rem,5vw,4rem) clamp(3rem,5vw,4.5rem)}
.phero__in{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:end}
.phero h1{margin-top:1.25rem; color:var(--white); font-size:clamp(2.125rem,4.4vw,3.5rem); line-height:1.06; letter-spacing:-.035em; text-wrap:balance}
.phero h1 em{font-family:var(--ff-accent); font-style:italic; font-weight:400; font-size:1.05em; color:#FF6B76; letter-spacing:-.005em; padding-right:.06em}
.phero__lede{font-size:1.0625rem; color:var(--blue-200); text-wrap:pretty}
.phero__acts{display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-top:2rem}
.phero__acts .txtlink{font-family:var(--ff-head); font-weight:700; font-size:.9375rem; color:var(--white); display:inline-flex; align-items:center; gap:.5rem; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:2px}
.phero__acts .txtlink:hover{border-color:var(--white)}

/* kruimelpad */
.crumb{display:flex; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--blue-200); flex-wrap:wrap}
.crumb a:hover{color:var(--white)}
.crumb span{opacity:.5}
.crumb b{font-weight:400; color:var(--white)}

/* ── LOCATIEKAARTEN ───────────────────────────────────────── */
.loc{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.375rem)}
.loccard{
  display:flex; flex-direction:column; background:var(--white); border:var(--bd);
  border-radius:var(--r-card); padding:clamp(1.5rem,2.4vw,1.875rem);
  transition:border-color .18s,box-shadow .18s;
}
.loccard:hover{border-color:var(--navy-800); box-shadow:0 20px 44px -34px rgba(17,16,37,.45)}
.loccard__t{display:flex; align-items:center; gap:.875rem}
.loccard .pin{width:40px; height:40px; border-radius:50%; background:var(--blue-100); display:grid; place-items:center; flex:none}
.loccard h3{font-size:1.1875rem}
.loccard>p{margin-top:1.125rem; font-size:.9375rem; flex:1; text-wrap:pretty}
.loccard__m{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.5rem; padding-top:1.25rem; border-top:var(--bd)}
.loccard__m small{font-size:.8125rem; color:var(--grey-500)}
.loccard__m .arw{color:var(--navy-800); transition:transform .18s}
.loccard:hover .arw{transform:translateX(3px)}
/* hoofdvestiging springt eruit */
.loccard--hq{background:var(--navy-800); border-color:var(--navy-800)}
.loccard--hq h3,.loccard--hq .loccard__m span{color:var(--white)}
.loccard--hq>p{color:var(--blue-200)}
.loccard--hq .pin{background:rgba(255,255,255,.12)}
.loccard--hq .loccard__m{border-top-color:rgba(255,255,255,.16)}
.loccard--hq .loccard__m small{color:var(--blue-200)}
.loccard--hq .arw{color:var(--white)}

/* ── FEITENKAART (split intro) ────────────────────────────── */
.facts{display:grid; gap:.25rem}
.facts li{display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; padding:clamp(1rem,1.8vw,1.375rem); border-radius:var(--r-in)}
.facts li:nth-child(odd){background:var(--grey-50)}
.facts b{display:block; font-family:var(--ff-head); font-size:.9375rem; color:var(--navy-800)}
.facts p{font-size:.875rem; margin-top:.125rem; text-wrap:pretty}

@media(max-width:1100px){
  .phero__in{grid-template-columns:1fr; align-items:start; gap:1.5rem}
  .loc{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .loc{grid-template-columns:1fr}
}

/* ── REGIOKAART (schematisch, geen echte geografie) ───────── */
.regmap{background:var(--white); border:var(--bd); border-radius:var(--r-card); padding:clamp(1.25rem,2vw,1.75rem)}
.regmap svg{width:100%; height:auto; display:block}
.regmap .ring{fill:none; stroke:var(--grey-200); stroke-dasharray:4 6}
.regmap .rlbl{fill:var(--grey-300); font-family:var(--ff-head); font-size:11px; font-weight:600}
.regmap .plbl{fill:var(--navy-800); font-family:var(--ff-head); font-size:14px; font-weight:700}
.regmap .plbl--hq{fill:var(--red-500)}
.regmap figcaption{margin-top:1.25rem; padding-top:1.125rem; border-top:var(--bd); font-size:.8125rem; color:var(--grey-500)}

/* ── LOCATIEKAART: afstand + kernen ───────────────────────── */
.loccard__km{margin-left:auto; font-family:var(--ff-head); font-weight:700; font-size:.75rem; color:var(--grey-500); background:var(--grey-50); border-radius:var(--r-pill); padding:.3125rem .625rem; white-space:nowrap}
.loccard--hq .loccard__km{background:rgba(255,255,255,.12); color:var(--blue-200)}
.loccard__kernen{margin-top:1rem; font-size:.8125rem; color:var(--grey-500); text-wrap:pretty}
.loccard__kernen b{font-family:var(--ff-head); font-weight:700; color:var(--navy-800)}
.loccard--hq .loccard__kernen{color:var(--blue-200)}
.loccard--hq .loccard__kernen b{color:var(--white)}

/* ── CHIPS ────────────────────────────────────────────────── */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.75rem}
.chips li{font-size:.875rem; color:var(--navy-800); background:var(--white); border:var(--bd); border-radius:var(--r-pill); padding:.5rem .875rem}

/* ── NAP-KAART ────────────────────────────────────────────── */
.nap{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1rem,2vw,1.5rem); align-items:start}
.nap__c{background:var(--white); border:var(--bd); border-radius:var(--r-card); padding:clamp(1.5rem,2.4vw,2rem)}
.nap__c--dark{background:var(--navy-800); border-color:var(--navy-800); color:var(--blue-200)}
.nap__c h3{font-size:1.125rem; margin-bottom:1.5rem}
.nap__c--dark h3{color:var(--white)}
.nap dl{display:grid; grid-template-columns:auto 1fr; gap:.875rem 1.5rem; font-size:.9375rem; margin:0}
.nap dt{color:var(--grey-500)}
.nap__c--dark dt{color:var(--blue-200)}
.nap dd{margin:0; font-family:var(--ff-head); font-weight:600; color:var(--navy-800)}
.nap__c--dark dd{color:var(--white)}
.nap__c .btn{margin-top:1.75rem}

/* ── DOELGROEPKAARTEN ─────────────────────────────────────── */
.aud{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1rem,1.8vw,1.375rem)}
.audcard{display:flex; flex-direction:column; background:var(--white); border:var(--bd); border-radius:var(--r-card); padding:clamp(1.5rem,2.4vw,2rem); transition:border-color .18s,box-shadow .18s}
.audcard:hover{border-color:var(--grey-300); box-shadow:0 18px 40px -30px rgba(17,16,37,.35)}
.audcard h3{font-size:1.1875rem; margin:1.25rem 0 .5rem}
.audcard>p{font-size:.9375rem; text-wrap:pretty}
.audcard ul{display:grid; gap:.6875rem; margin-top:1.5rem; flex:1; align-content:start}
.audcard li{display:grid; grid-template-columns:auto 1fr; gap:.625rem; font-size:.875rem}
.audcard__p{display:flex; align-items:baseline; gap:.4375rem; margin-top:1.5rem; padding-top:1.25rem; border-top:var(--bd)}
.audcard__p b{font-family:var(--ff-head); font-weight:800; font-size:1.625rem; color:var(--navy-800); letter-spacing:-.04em; line-height:1}
.audcard__p span{font-size:.8125rem; color:var(--grey-500)}
.audcard .btn{margin-top:1.25rem}

/* ── ANKER-CHIPS ──────────────────────────────────────────── */
.jump{display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:2rem}
.jump a{font-family:var(--ff-head); font-weight:600; font-size:.875rem; color:var(--navy-800); background:var(--white); border:var(--bd); border-radius:var(--r-pill); padding:.5625rem 1rem; transition:border-color .18s}
.jump a:hover{border-color:var(--navy-800)}
/* ankers vrijhouden van de vaste header */
[id]{scroll-margin-top:6rem}

@media(max-width:1100px){
  .nap{grid-template-columns:1fr}
  .aud{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .aud{grid-template-columns:1fr}
}

/* "voor wie"-regel boven de checklist in de dienstkaart */
.svc__who{font-size:.8125rem; color:var(--grey-500); padding-bottom:1rem; margin-bottom:1rem; border-bottom:var(--bd); text-wrap:pretty}

/* foto in de kantoorkaart op de locatiepagina */
.nap__img{border-radius:var(--r-in); overflow:hidden; aspect-ratio:16/9; margin-bottom:1.75rem; background:var(--navy-700)}
.nap__img img{width:100%; height:100%; object-fit:cover; object-position:50% 55%}

/* ── HOOFDMENU MET SUBMENU (CSS-only) ─────────────────────────
   Geen JS: openen op hover én focus-within, zodat toetsenbord­
   gebruikers erbij kunnen. Op touch navigeert de oudertap naar
   de archiefpagina — die bestaat, dus dat is geen doodlopend pad.
   Valt binnen .shell (overflow:hidden) omdat de hero hoog genoeg is. */
.nav__i{position:relative; display:flex}
.nav__sub{
  position:absolute; top:calc(100% + .625rem); left:0; z-index:40;
  min-width:15.5rem; display:grid; gap:.125rem;
  background:var(--white); border:var(--bd); border-radius:var(--r-in);
  padding:.5rem; box-shadow:0 24px 50px -30px rgba(17,16,37,.55);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav__i:hover>.nav__sub,.nav__i:focus-within>.nav__sub{opacity:1; visibility:visible; transform:none}
.nav__sub a{
  color:var(--navy-800); font-family:var(--ff-head); font-weight:600; font-size:.875rem;
  padding:.5625rem .75rem; border-radius:9px; white-space:nowrap; background:none;
}
.nav__sub a:hover,.nav__sub a:focus-visible{background:var(--grey-50); color:var(--navy-800)}
.nav__sub--2{grid-template-columns:1fr 1fr; min-width:26rem}
/* caret op ouderitems met submenu */
.nav__i>a[data-sub]::after{
  content:""; display:inline-block; width:5px; height:5px; margin-left:.4375rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg); opacity:.7;
}

/* ── SELECT-VELD (samengevoegd uit contact.html) ──────────── */
.fld select{
  width:100%; font-family:var(--ff-body); font-size:.9375rem; color:var(--navy-800);
  background:var(--white); border:var(--bd); border-radius:12px; padding:.8125rem 2.25rem .8125rem 1rem;
  appearance:none; -webkit-appearance:none; line-height:1.4;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23191734' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M1.5 1.5L6 6l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
  transition:border-color .18s, box-shadow .18s;
}
.fld select:focus{outline:none; border-color:var(--navy-800); box-shadow:0 0 0 3px rgba(25,23,52,.14)}

/* ── VARIANTEN uit de subpagina's ─────────────────────────── */
.ctc--lead .ctc__head{max-width:38rem}        /* contactpagina: formulier is het zwaartepunt */
.fnd .splitbtn{margin-top:2.25rem}            /* splitknop binnen een .fnd-blok */
.audcard--hi{position:relative; border:1.5px solid var(--navy-800)}
/* koptekst binnen .fnd — vervangt de inline styles op home/locaties */
.fnd h2{margin-top:1.25rem; font-size:clamp(1.875rem,3.6vw,2.875rem); text-wrap:balance}
.fnd>div>p{margin-top:1.375rem; font-size:1.0625rem; text-wrap:pretty}