/* ==========================================================================
   Sparkling Concepts — redesign sample
   Hero + Projecten. Structuur volgt de template (sec-title, kaartgrid,
   padd-ritme); vormgeving volgt de huisstijl van Sparkling Concepts.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */
:root {
  --navy-900: #070d26;
  --navy-800: #0b1235;
  --navy-700: #101b4c;
  --navy-600: #18265f;
  --navy-line: rgba(255, 255, 255, .14);

  --gold: #b39a55;
  --gold-lt: #cdb478;
  --gold-dk: #8d7a41;

  --paper: #f7f8fc;
  --paper-2: #eef0f7;
  --ink: #101b4c;
  --ink-soft: #4a5478;
  --ink-mute: #7b839e;

  --display: "Aboreto", "Cormorant Garamond", Georgia, serif;
  --body: "Poppins", "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* sectie-ritme — template padd-1/padd-2 (80px), fluid opgerekt */
  --pad-y: clamp(48px, 4.6vw, 78px);
  --gut: clamp(20px, 4.5vw, 80px);
  --maxw: 1520px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --- reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.75;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto is nodig: anders wint het height-attribuut van de img zodra CSS
   alleen de breedte zet, en wordt het beeld uitgerekt */
img { max-width: 100%; height: auto; display: block; }

/* browsers zetten standaard 40px marge op blockquote — dat knijpt citaten dicht */
blockquote, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: .01em;
  margin: 0;
}

::selection { background: var(--gold); color: #fff; }

.sc-wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- sparkle ------------------------------------------------------------
   Eén bewust geplaatst merkteken per sectie in plaats van een strooipatroon. */
.sparkle {
  position: absolute;
  display: block;
  color: var(--gold);
  fill: currentColor;
  pointer-events: none;
}

/* --- eyebrow + sectiekop (template .sec-title, opgewaardeerd) ------------ */
.eyebrow {
  font-size: clamp(10px, .78vw, 12px);
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.eyebrow::before {
  content: "";
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: .8;
}
.eyebrow.is-centered { justify-content: center; }
.eyebrow.is-centered::after {
  content: "";
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: currentColor;
  flex: none;
  opacity: .8;
}

/* --- knoppen (template .btn-style-one, editorial gemaakt) ---------------- */
.btn {
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid currentColor;
  overflow: hidden;
  transition: color .45s var(--ease), border-color .45s var(--ease);
  isolation: isolate;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s var(--ease);
  z-index: -1;
}
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.btn:hover, .btn:focus-visible { color: #fff; border-color: var(--gold); }

.btn--solid { background: var(--gold); border-color: var(--gold); }
.btn--solid::after { background: var(--navy-700); }
.btn--solid:hover, .btn--solid:focus-visible { border-color: var(--navy-700); }

.btn--ghost-dark { --btn-fg: var(--ink); border-color: rgba(16, 27, 76, .28); }
.btn__arrow { transition: transform .45s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.sc-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding-block: clamp(16px, 2vw, 30px);
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.sc-header.is-stuck {
  background: rgba(7, 13, 38, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: 14px;
  box-shadow: 0 1px 0 var(--navy-line);
}

.sc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* logo en sluitknop blijven boven de mobiele menu-overlay staan */
.sc-logo,
.sc-burger { position: relative; z-index: 2; }

.sc-logo img {
  height: clamp(52px, 5vw, 74px);
  width: auto;
  /* zwart woordmerk → wit op donkere grond */
  filter: brightness(0) invert(1);
  transition: opacity .4s var(--ease), height .4s var(--ease);
}
.sc-logo:hover img { opacity: .8; }
.sc-header.is-stuck .sc-logo img { height: clamp(44px, 4.2vw, 60px); }

.sc-nav { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 42px); }
.sc-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 42px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sc-nav__list a {
  position: relative;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 400;
  color: rgba(255, 255, 255, .82);
  padding-block: 6px;
  transition: color .35s var(--ease);
}
.sc-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.sc-nav__list a:hover, .sc-nav__list a:focus-visible,
.sc-nav__list a[aria-current="page"] { color: #fff; }
.sc-nav__list a:hover::after,
.sc-nav__list a:focus-visible::after,
.sc-nav__list a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.sc-nav__cta { color: #fff; padding: 13px 26px; font-size: 11px; }

/* hamburger */
.sc-burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--navy-line);
}
.sc-burger span {
  display: block;
  width: 20px; height: 1px;
  background: #fff;
  transition: transform .4s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}

/* open: de drie streepjes worden een duidelijk kruis om te sluiten */
body.nav-open .sc-burger { border-color: var(--gold); }
body.nav-open .sc-burger span { background: var(--gold-lt); }
/* lijnhoogte 1px + gap 6px = 7px hart-op-hart, dus 7px om ze te laten kruisen */
body.nav-open .sc-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .sc-burger span:nth-child(2) { opacity: 0; }
body.nav-open .sc-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.sc-hero {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(112px, 11.4vh, 150px) 0;
}

/* zachte verloopgloed i.p.v. losse decoratie */
.sc-hero::before {
  content: "";
  position: absolute;
  top: -25%; left: 50%;
  width: min(1100px, 120vw);
  aspect-ratio: 1;
  transform: translateX(-58%);
  background: radial-gradient(circle, rgba(179, 154, 85, .16), transparent 62%);
  pointer-events: none;
}

.sc-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(40px, 5vw, 90px);
  flex: 1;
  padding-bottom: clamp(30px, 3.2vw, 46px);
}

.sc-hero__eyebrow { color: var(--gold-lt); }

.sc-hero h1 {
  font-size: clamp(2.3rem, 4.6vw, 4.25rem);
  text-transform: uppercase;
  letter-spacing: .005em;
  margin-bottom: clamp(20px, 2.2vw, 32px);
}
.sc-hero h1 .is-gold {
  display: block;
  color: var(--gold-lt);
}

.sc-hero__rule {
  width: clamp(90px, 12vw, 170px);
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-bottom: clamp(20px, 2.2vw, 30px);
}

.sc-hero__lead {
  max-width: 52ch;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.8;
  color: rgba(255, 255, 255, .74);
  margin: 0 0 clamp(26px, 2.8vw, 36px);
}

.sc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* beeldpaneel */
.sc-hero__media { position: relative; }
.sc-hero__frame {
  position: relative;
  aspect-ratio: 4 / 4.5;
  max-height: min(68svh, 700px);
  overflow: hidden;
}
.sc-hero__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 1.4s var(--ease);
}
.sc-hero__media:hover .sc-hero__frame img { transform: scale(1); }
.sc-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, transparent 45%, rgba(7, 13, 38, .55));
  pointer-events: none;
}
/* dunne gouden kaderlijn, verschoven — geeft diepte zonder ruis */
.sc-hero__media::before {
  content: "";
  position: absolute;
  inset: clamp(14px, 1.8vw, 26px) calc(-1 * clamp(14px, 1.8vw, 26px)) calc(-1 * clamp(14px, 1.8vw, 26px)) clamp(14px, 1.8vw, 26px);
  border: 1px solid rgba(179, 154, 85, .42);
  pointer-events: none;
}

/* de enige sterretjes in de hero — bewust op één ankerpunt */
.sc-hero__sparkle { top: -6%; left: -7%; width: clamp(64px, 8vw, 128px); aspect-ratio: 1; opacity: .95; }
.sc-hero__sparkle-sm { bottom: 9%; left: -3%; width: clamp(26px, 3vw, 46px); aspect-ratio: 1; opacity: .7; }

/* onderbalk met de positioneringszin */
.sc-hero__bar {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--navy-line);
}
.sc-hero__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding-block: clamp(20px, 2.4vw, 30px);
}
.sc-hero__claim {
  font-family: var(--display);
  font-size: clamp(13px, 1.32vw, 20px);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  margin: 0;
}
.sc-hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  transition: color .4s var(--ease);
}
.sc-hero__scroll:hover { color: var(--gold-lt); }
.sc-hero__scroll i {
  width: 1px; height: 26px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollCue 2.1s var(--ease) infinite;
}
@keyframes scrollCue {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(.45); opacity: .45; }
}

/* ==========================================================================
   PROJECTEN
   ========================================================================== */
.sc-projects {
  position: relative;
  padding-block: var(--pad-y);
  background: var(--paper);
  overflow: hidden;
  /* ankerlinks mogen niet onder de vaste header landen */
  scroll-margin-top: clamp(70px, 8vw, 96px);
}
.sc-projects__sparkle {
  top: clamp(30px, 5vw, 90px);
  right: -3%;
  width: clamp(90px, 11vw, 190px);
  aspect-ratio: 1;
  opacity: .13;
}

.sc-projects__head {
  max-width: 1080px;
  margin: 0 auto clamp(30px, 3vw, 48px);
  text-align: center;
  position: relative;
  z-index: 2;
}
/* eyebrow past op één regel op desktop; hij mag niet tussen de streepjes breken */
@media (min-width: 860px) {
  .sc-projects__head .eyebrow { white-space: nowrap; }
}
/* op smalle schermen zijn de streepjes ruis zodra de tekst breekt */
@media (max-width: 620px) {
  .eyebrow.is-centered { flex-wrap: wrap; letter-spacing: .22em; }
  .eyebrow.is-centered::before,
  .eyebrow.is-centered::after { display: none; }
}
.sc-projects__head h2 {
  font-size: clamp(1.85rem, 3.9vw, 3.6rem);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 22px;
}
.sc-projects__head p {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(14px, 1.05vw, 17px);
}

/* editoriale grid — grote opener, portret, drie gelijk, panoramische afsluiter */
.sc-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 1.7vw, 30px);
  /* niet uitrekken: de beeldverhoudingen bepalen het ritme */
  align-items: start;
}

.sc-card {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--navy-800);
  grid-column: span 4;
}
.sc-card--feature { grid-column: span 8; }
.sc-card--tall { grid-column: span 4; }
.sc-card--wide { grid-column: span 12; }

.sc-card__media { position: relative; overflow: hidden; }
.sc-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), filter .7s var(--ease);
}
.sc-card:hover .sc-card__media img,
.sc-card:focus-visible .sc-card__media img { transform: scale(1.055); }

.sc-card--feature .sc-card__media { aspect-ratio: 16 / 10.5; }
.sc-card--tall .sc-card__media { aspect-ratio: 3 / 4.62; }
.sc-card--third .sc-card__media { aspect-ratio: 4 / 3.35; }
.sc-card--wide .sc-card__media { aspect-ratio: 21 / 8; }

/* verloop moet ook op lichte foto's leesbaarheid geven */
.sc-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 13, 38, 0) 20%,
    rgba(7, 13, 38, .30) 48%,
    rgba(7, 13, 38, .72) 74%,
    rgba(7, 13, 38, .94) 100%
  );
  transition: opacity .6s var(--ease);
  opacity: .95;
}
.sc-card:hover .sc-card__media::after { opacity: 1; }

.sc-card__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: clamp(20px, 2.2vw, 38px);
  color: #fff;
}

.sc-card__index {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--gold-lt);
  margin-bottom: 14px;
}
.sc-card__index::after {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: .55;
}

.sc-card__title {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.75vw, 1.95rem);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.2;
  margin: 0 0 10px;
}
.sc-card--feature .sc-card__title,
.sc-card--wide .sc-card__title { font-size: clamp(1.3rem, 2.35vw, 2.5rem); }

.sc-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .66);
  margin: 0;
}
.sc-card__meta span { position: relative; }
.sc-card__meta span + span::before {
  content: "";
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
  margin-right: 12px;
}

/* hover-onthulling */
.sc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-lt);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .55s var(--ease), opacity .45s var(--ease), margin-top .55s var(--ease);
}
.sc-card:hover .sc-card__more,
.sc-card:focus-visible .sc-card__more {
  max-height: 44px;
  opacity: 1;
  margin-top: 16px;
}
.sc-card__more svg { transition: transform .45s var(--ease); }
.sc-card:hover .sc-card__more svg { transform: translateX(5px); }

/* gouden lijn die uitloopt bij hover */
.sc-card::after {
  content: "";
  position: absolute;
  left: clamp(20px, 2.2vw, 38px);
  bottom: 0;
  height: 2px;
  width: calc(100% - 2 * clamp(20px, 2.2vw, 38px));
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ease);
  z-index: 3;
}
.sc-card:hover::after, .sc-card:focus-visible::after { transform: scaleX(1); }

.sc-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* afsluitende regel onder de grid */
.sc-projects__foot {
  position: relative;
  z-index: 2;
  margin-top: clamp(40px, 4.5vw, 70px);
  padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid rgba(16, 27, 76, .12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
}
.sc-projects__foot p {
  margin: 0;
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: clamp(14px, 1vw, 16px);
}
.sc-projects__foot strong { color: var(--ink); font-weight: 500; }

/* ==========================================================================
   SCROLL-REVEAL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* lage laptopschermen: hero moet binnen één beeld blijven passen */
@media (min-width: 993px) and (max-height: 880px) {
  .sc-hero { padding-block: clamp(110px, 12vh, 140px) 0; }
  .sc-hero h1 { font-size: clamp(2rem, 3.8vw, 3.35rem); margin-bottom: 20px; }
  .sc-hero__rule { margin-bottom: 20px; }
  .sc-hero__lead { font-size: 15px; line-height: 1.72; margin-bottom: 26px; }
  .sc-hero__grid { padding-bottom: 30px; }
  .sc-hero__frame { max-height: 56svh; }
  .btn { padding: 14px 28px; }
}

/* zeer lage schermen (1024x768 e.d.): verder inhouden zodat de claimbalk
   nog binnen het eerste beeld valt */
@media (min-width: 993px) and (max-height: 740px) {
  .sc-hero { padding-block: 96px 0; }
  .sc-hero h1 { font-size: clamp(1.8rem, 3.1vw, 2.5rem); margin-bottom: 16px; }
  .sc-hero__eyebrow { margin-bottom: 14px; }
  .sc-hero__rule { margin-bottom: 16px; }
  .sc-hero__lead { font-size: 14px; line-height: 1.62; margin-bottom: 20px; }
  .sc-hero__grid { padding-bottom: 20px; gap: clamp(28px, 3vw, 48px); }
  .sc-hero__frame { max-height: 44svh; }
  .sc-hero__bar-inner { padding-block: 14px; }
  .sc-hero__claim { font-size: 13px; }
  .btn { padding: 11px 22px; font-size: 11px; }
}

/* laptop */
@media (max-width: 1200px) {
  .sc-card--feature { grid-column: span 7; }
  .sc-card--tall { grid-column: span 5; }
  .sc-card--tall .sc-card__media { aspect-ratio: 3 / 3.9; }

  /* smallere kaarten: meta onder elkaar, anders belandt het scheidingsbolletje
     aan het begin van de tweede regel */
  .sc-card__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sc-card__meta span + span::before { display: none; }
}

/* tablet */
@media (max-width: 992px) {
  .sc-hero { min-height: 0; padding-block: clamp(120px, 18vh, 170px) 0; }
  .sc-hero__grid {
    grid-template-columns: 1fr;
    gap: clamp(38px, 6vw, 60px);
  }
  .sc-hero__media { order: -1; max-width: 560px; }
  .sc-hero__frame { aspect-ratio: 16 / 11; }
  .sc-hero__media::before { inset: clamp(10px, 1.6vw, 18px) calc(-1 * clamp(10px, 1.6vw, 18px)) calc(-1 * clamp(10px, 1.6vw, 18px)) clamp(10px, 1.6vw, 18px); }
  .sc-hero__sparkle { top: -8%; left: auto; right: -4%; width: clamp(56px, 9vw, 96px); }
  .sc-hero__sparkle-sm { bottom: auto; top: 12%; left: auto; right: 6%; }

  .sc-card--feature,
  .sc-card--tall,
  .sc-card--third { grid-column: span 6; }
  .sc-card--feature .sc-card__media,
  .sc-card--tall .sc-card__media,
  .sc-card--third .sc-card__media { aspect-ratio: 4 / 3.2; }
  .sc-card--wide .sc-card__media { aspect-ratio: 16 / 8.5; }

  /* nav → overlay */
  .sc-burger { display: flex; }

  /* Geen backdrop-filter zodra het menu een overlay is.
     Een element met backdrop-filter (net als filter/transform) wordt het
     containing block voor zijn position:fixed kinderen. .sc-nav zit in de
     header, dus met blur kromp het menu mee tot de hoogte van de headerbalk
     (158px i.p.v. het hele scherm) zodra die sticky werd. Op desktop is
     .sc-nav niet fixed, daar mag de blur blijven. */
  .sc-header.is-stuck {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--navy-900);
  }

  /* de sticky header is lager, dus mag het menu hoger beginnen */
  .sc-header.is-stuck .sc-nav { padding-top: 94px; }
  .sc-nav {
    position: fixed;
    inset: 0;
    z-index: 1; /* onder logo + sluitknop */
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    /* dekkend: een half doorzichtige overlay laat de beelden erdoorheen
       spoken en dat leest als een storing */
    background: var(--navy-900);
    padding: 118px var(--gut) 40px;
    transform: translateX(100%);
    transition: transform .55s var(--ease);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.nav-open .sc-nav { transform: none; }
  body.nav-open { overflow: hidden; }

  /* lijst met scheidingslijnen in plaats van zwevende regels */
  .sc-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, .1);
  }
  .sc-nav__list li { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .sc-nav__list a {
    display: block;
    padding: clamp(15px, 2.4vw, 20px) 0;
    font-size: clamp(16px, 2.2vw, 20px);
    letter-spacing: .12em;
    color: rgba(255, 255, 255, .78);
  }
  /* de onderstreping is hier ruis; de actieve regel krijgt een gouden streepje */
  .sc-nav__list a::after { display: none; }
  .sc-nav__list a[aria-current="page"] {
    color: #fff;
    padding-left: 22px;
    position: relative;
  }
  .sc-nav__list a[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    width: 12px; height: 1px;
    background: var(--gold);
  }

  .sc-nav__cta {
    margin-top: clamp(26px, 4vw, 38px);
    align-self: flex-start;
    font-size: 12px;
    padding: 15px 30px;
  }
}

/* mobiel */
@media (max-width: 700px) {
  .sc-hero h1 { font-size: clamp(2rem, 8.4vw, 2.9rem); }
  .sc-hero__actions { flex-direction: column; align-items: stretch; }
  .sc-hero__actions .btn { justify-content: center; }
  .sc-hero__bar-inner { justify-content: center; text-align: center; }
  .sc-hero__claim { font-size: 12px; letter-spacing: .1em; }
  .sc-hero__scroll { display: none; }

  .sc-card--feature,
  .sc-card--tall,
  .sc-card--third,
  .sc-card--wide { grid-column: span 12; }
  .sc-card--feature .sc-card__media,
  .sc-card--tall .sc-card__media,
  .sc-card--third .sc-card__media,
  .sc-card--wide .sc-card__media { aspect-ratio: 4 / 3.4; }

  /* op touch is er geen hover — meta en link staan meteen open */
  .sc-card__more { max-height: 44px; opacity: 1; margin-top: 14px; }
  .sc-card::after { transform: scaleX(1); }

  .sc-projects__foot { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 380px) {
  .sc-hero h1 { font-size: 1.75rem; }
  .sc-card__body { padding: 18px; }
}

/* --- toegankelijkheid --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   GEDEELDE SECTIE-ONDERDELEN (rest van de site)
   ========================================================================== */

.sec { position: relative; padding-block: var(--pad-y); overflow: hidden; }
.sec--paper { background: var(--paper); }
.sec--paper2 { background: var(--paper-2); }
.sec--navy { background: var(--navy-900); color: #fff; }
.sec--tight { padding-block: clamp(56px, 6vw, 96px); }
.sec[id] { scroll-margin-top: clamp(70px, 8vw, 96px); }

.sec__head {
  max-width: 1080px;
  margin: 0 auto clamp(28px, 2.9vw, 46px);
  text-align: center;
  position: relative;
  z-index: 2;
}
.sec__head--left { margin-inline: 0; text-align: left; }
.sec__head h2 {
  font-size: clamp(1.75rem, 3.6vw, 3.25rem);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 20px;
}
.sec--navy .sec__head h2 { color: #fff; }
.sec__head p {
  max-width: 64ch;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: clamp(14px, 1.05vw, 17px);
}
.sec__head--left p { margin-inline: 0; }
.sec--navy .sec__head p { color: rgba(255, 255, 255, .72); }
@media (min-width: 860px) { .sec__head .eyebrow { white-space: nowrap; } }

/* --- intro: tekst naast beeld ------------------------------------------- */
.intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 86px);
}
.intro__media { position: relative; }
.intro__media img { width: 100%; aspect-ratio: 4 / 3.1; object-fit: cover; }
.intro__media::before {
  content: "";
  position: absolute;
  inset: clamp(12px, 1.6vw, 24px) calc(-1 * clamp(12px, 1.6vw, 24px)) calc(-1 * clamp(12px, 1.6vw, 24px)) clamp(12px, 1.6vw, 24px);
  border: 1px solid rgba(179, 154, 85, .5);
  pointer-events: none;
}
.intro__body h2 {
  font-size: clamp(1.6rem, 3.1vw, 2.75rem);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 24px;
}
.intro__body p {
  color: var(--ink-soft);
  margin: 0 0 18px;
  font-size: clamp(14px, 1.02vw, 16.5px);
}
.intro__body p:last-of-type { margin-bottom: 30px; }
.intro__sparkle { top: -4%; right: -2%; width: clamp(70px, 8vw, 130px); aspect-ratio: 1; opacity: .16; }

/* --- diensten: twee pijlers --------------------------------------------- */
.pillars { display: grid; gap: clamp(30px, 3.6vw, 58px); position: relative; z-index: 2; }
.pillar {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 3.4vw, 60px);
  align-items: center;
  padding-top: clamp(28px, 3.4vw, 52px);
  border-top: 1px solid rgba(16, 27, 76, .14);
}
.pillar:first-child { border-top: 0; padding-top: 0; }
.pillar--flip .pillar__media { order: -1; }

.pillar__label {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.3vw, 2.15rem);
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 26px;
}
.pillar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.pillar__list h3 {
  font-family: var(--body);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ink);
  margin: 0 0 6px;
  display: flex;
  gap: 12px;
}
.pillar__list h3::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--gold);
  margin-top: 12px;
  flex: none;
}
.pillar__list p { margin: 0 0 0 26px; color: var(--ink-soft); font-size: clamp(13.5px, .98vw, 15.5px); }
.pillar__media img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }

/* --- aanpak: genummerde stappen ----------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 2.6vw, 48px);
  position: relative;
  z-index: 2;
}
.step { padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .18); }
.sec--paper .step, .sec--paper2 .step { border-top-color: rgba(16, 27, 76, .14); }
.step__n {
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  color: var(--gold);
  display: block;
  margin-bottom: 14px;
  line-height: 1;
}
.step h3 {
  font-family: var(--body);
  font-size: clamp(12px, .95vw, 13.5px);
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.sec--navy .step h3 { color: #fff; }
.step p { margin: 0; font-size: clamp(13.5px, .98vw, 15.5px); color: var(--ink-soft); }
.sec--navy .step p { color: rgba(255, 255, 255, .7); }

/* --- voor wie: segmentkaarten ------------------------------------------- */
.segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 32px);
  position: relative;
  z-index: 2;
}
.segment { position: relative; overflow: hidden; background: var(--navy-800); }
.segment__media { position: relative; overflow: hidden; }
.segment__media img {
  width: 100%;
  aspect-ratio: 4 / 3.9;
  object-fit: cover;
  /* interieurfoto's zijn liggend: iets lager uitsnijden houdt de ruimte in
     beeld in plaats van het plafond */
  object-position: center 58%;
  transition: transform 1.1s var(--ease);
}
.segment:hover .segment__media img { transform: scale(1.055); }
.segment__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 13, 38, 0) 18%, rgba(7, 13, 38, .35) 46%, rgba(7, 13, 38, .88) 100%);
}
.segment__body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: clamp(20px, 2.1vw, 34px);
  color: #fff;
  z-index: 2;
}
.segment__body h3 { font-size: clamp(1.05rem, 1.55vw, 1.6rem); text-transform: uppercase; margin: 0 0 10px; }
.segment__body p { margin: 0; font-size: clamp(13px, .95vw, 14.5px); color: rgba(255, 255, 255, .76); }

/* --- klantbeoordelingen -------------------------------------------------- */
.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 36px);
  position: relative;
  z-index: 2;
}
.quote {
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 42px);
  background: #fff;
  border: 1px solid rgba(16, 27, 76, .09);
  border-top: 2px solid var(--gold);
}
.sec--navy .quote { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .1); }
.quote__mark { font-family: var(--display); font-size: 2.6rem; line-height: .8; color: var(--gold); margin-bottom: 18px; }
.quote p { margin: 0 0 24px; color: var(--ink-soft); font-size: clamp(13.5px, 1vw, 15.5px); flex: 1; }
.sec--navy .quote p { color: rgba(255, 255, 255, .76); }
.quote__who { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(16, 27, 76, .1); }
.sec--navy .quote__who { border-top-color: rgba(255, 255, 255, .12); }
.quote__who strong {
  display: block;
  font-family: var(--display);
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--ink);
  letter-spacing: .03em;
}
.sec--navy .quote__who strong { color: #fff; }
.quote__who span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.sec--navy .quote__who span { color: rgba(255, 255, 255, .5); }

/* --- CTA-band ------------------------------------------------------------ */
.cta {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  padding-block: clamp(46px, 4.6vw, 74px);
  overflow: hidden;
  text-align: center;
}
.cta::before {
  content: "";
  position: absolute;
  top: -40%; left: 50%;
  width: min(900px, 120vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(179, 154, 85, .17), transparent 62%);
  pointer-events: none;
}
.cta__inner { position: relative; z-index: 2; max-width: 880px; margin-inline: auto; }
.cta h2 { font-size: clamp(1.55rem, 3.2vw, 2.9rem); text-transform: uppercase; margin-bottom: 20px; }
.cta p { color: rgba(255, 255, 255, .72); margin: 0 auto clamp(28px, 3vw, 40px); max-width: 56ch; }
.cta__sparkle { bottom: -22%; right: 4%; width: clamp(80px, 9vw, 150px); aspect-ratio: 1; opacity: .3; }

/* --- contact + footer ---------------------------------------------------- */
.sc-footer { background: var(--paper); padding-top: clamp(42px, 4.4vw, 68px); }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(34px, 5vw, 80px);
  align-items: center;
  padding-bottom: clamp(44px, 5vw, 76px);
}
.footer__brand { text-align: center; }
.footer__brand img {
  width: clamp(190px, 21vw, 300px);
  margin-inline: auto;
  /* woordmerk hard op zwart trekken — footer staat op een lichte grond */
  filter: brightness(0);
}
.footer__brand p {
  margin: 22px 0 0;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.contact-list { display: grid; gap: 0; }
.contact-row {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  padding-block: clamp(16px, 1.7vw, 24px);
  border-bottom: 1px solid rgba(16, 27, 76, .12);
}
.contact-row:first-child { padding-top: 0; }
.contact-row__icon {
  flex: none;
  width: clamp(44px, 4vw, 58px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: var(--navy-700);
  color: #fff;
  transition: background .4s var(--ease);
}
.contact-row:hover .contact-row__icon { background: var(--gold); }
.contact-row__icon svg { width: 44%; height: auto; }
.contact-row__txt span {
  display: block;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 3px;
}
.contact-row__txt a, .contact-row__txt strong {
  font-size: clamp(14px, 1.05vw, 16.5px);
  font-weight: 500;
  color: var(--ink);
  transition: color .35s var(--ease);
}
.contact-row__txt a:hover { color: var(--gold-dk); }

.hours { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(18px, 2vw, 28px); }
.hours div { text-align: center; padding: 6px 10px; border-left: 1px solid rgba(16, 27, 76, .12); }
.hours div:first-child { border-left: 0; }
.hours dt {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 4px;
}
.hours dd { margin: 0; font-size: 13px; color: var(--ink-mute); }

.footer__bar { background: var(--navy-700); color: rgba(255, 255, 255, .7); }
.footer__bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-block: 18px;
  font-size: 12.5px;
}
.footer__social { display: flex; gap: 16px; }
.footer__social a {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  color: rgba(255, 255, 255, .75);
  transition: color .35s var(--ease), transform .35s var(--ease);
}
.footer__social a:hover { color: var(--gold-lt); transform: translateY(-2px); }
.footer__social svg { width: 17px; height: 17px; }

/* --- paginakop voor de subpaginas ---------------------------------------- */
.page-hero {
  position: relative;
  background: var(--navy-900);
  color: #fff;
  padding-block: clamp(150px, 18vh, 230px) clamp(60px, 7vw, 110px);
  overflow: hidden;
  text-align: center;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -45%; left: 50%;
  width: min(1000px, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(179, 154, 85, .15), transparent 62%);
}
.page-hero__inner { position: relative; z-index: 2; max-width: 940px; margin-inline: auto; }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.9rem); text-transform: uppercase; margin-bottom: 22px; }
.page-hero p { color: rgba(255, 255, 255, .74); margin: 0 auto; max-width: 60ch; font-size: clamp(14px, 1.05vw, 17px); }
.page-hero__sparkle { top: 16%; right: 5%; width: clamp(60px, 7vw, 120px); aspect-ratio: 1; opacity: .5; }

/* --- lege staat (blog) ---------------------------------------------------- */
.empty { text-align: center; max-width: 620px; margin-inline: auto; padding-block: clamp(30px, 4vw, 60px); }
.empty .sparkle { position: static; width: clamp(40px, 5vw, 64px); margin: 0 auto 26px; opacity: .85; }
.empty h2 { font-size: clamp(1.4rem, 2.6vw, 2.2rem); text-transform: uppercase; color: var(--ink); margin-bottom: 16px; }
.empty p { color: var(--ink-soft); margin: 0 0 30px; }

/* ==========================================================================
   RESPONSIVE — gedeelde onderdelen
   ========================================================================== */
@media (max-width: 992px) {
  .intro__grid { grid-template-columns: 1fr; gap: clamp(32px, 5vw, 50px); }
  .intro__media { order: -1; }
  .intro__media img { aspect-ratio: 16 / 10; }

  .pillar { grid-template-columns: 1fr; gap: 28px; }
  .pillar--flip .pillar__media { order: 0; }
  .pillar__media { order: -1; }
  .pillar__media img { aspect-ratio: 16 / 9; }

  .steps { grid-template-columns: 1fr; gap: 26px; }

  .segments { grid-template-columns: repeat(2, 1fr); }
  .segments > :last-child:nth-child(odd) { grid-column: span 2; }
  .segments > :last-child:nth-child(odd) .segment__media img { aspect-ratio: 16 / 7.5; }

  .quotes { grid-template-columns: 1fr; }

  .footer__grid { grid-template-columns: 1fr; gap: 38px; }
  .footer__brand { text-align: left; }
  .footer__brand img { margin-inline: 0; }
}

@media (max-width: 700px) {
  .segments { grid-template-columns: 1fr; }
  .segments > :last-child:nth-child(odd) { grid-column: span 1; }
  .segments > :last-child:nth-child(odd) .segment__media img { aspect-ratio: 4 / 3.9; }

  .hours { grid-template-columns: 1fr; }
  .hours div {
    border-left: 0;
    border-top: 1px solid rgba(16, 27, 76, .12);
    text-align: left;
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
  }
  .hours div:first-child { border-top: 0; padding-top: 0; }
  .hours dt, .hours dd { margin: 0; }

  .footer__bar-inner { justify-content: center; text-align: center; }
  .contact-row { gap: 14px; }
}

/* ==========================================================================
   VARIANTEN VOOR DE SUBPAGINAS
   ========================================================================== */

/* twee kolommen in plaats van drie */
.quotes--2 { grid-template-columns: repeat(2, 1fr); max-width: 1100px; margin-inline: auto; }
.steps--2 { grid-template-columns: repeat(2, 1fr); }

/* waardeblokken zonder eigen kop: alleen een gouden streep als markering */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.2vw, 38px);
  position: relative;
  z-index: 2;
}
.value { padding-top: 22px; border-top: 1px solid rgba(16, 27, 76, .14); position: relative; }
.value::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 34px; height: 1px;
  background: var(--gold);
}
.value p { margin: 0; color: var(--ink-soft); font-size: clamp(13.5px, .98vw, 15.5px); }

@media (max-width: 992px) {
  .quotes--2 { grid-template-columns: 1fr; }
  .steps--2 { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .values { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MENU OP TABLET: zijpaneel in plaats van volledig scherm
   ========================================================================== */
@media (min-width: 600px) and (max-width: 992px) {
  .sc-nav {
    left: auto;
    width: min(430px, 78vw);
    box-shadow: -34px 0 70px rgba(0, 0, 0, .45);
  }
  /* de rest van de pagina dimmen zodat het paneel leest als een laag erboven */
  body.nav-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(7, 13, 38, .58);
    animation: scrimIn .45s cubic-bezier(.22, .61, .36, 1) both;
  }
}

@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  body.nav-open::before { animation: none; }
}