/* ============================================================
   SKYLINE DIGITAL — "awards" stijllaag
   Groot, ruimtelijk, typografie als beeld. Alle effecten draaien
   op transform/opacity (geen blur, geen scroll-koppeling), zodat
   het snel blijft. Laadt na styles.css en pages.css.
   ============================================================ */

/* ---------- Ruimte & typografie ---------- */
.wrap { padding: clamp(110px, 12vw, 170px) 44px; }
.wrap-sm { padding: clamp(100px, 10vw, 140px) 44px; }
h2 { font-size: clamp(2.4rem, 5.6vw, 5rem); letter-spacing: -0.045em; line-height: .98; }
h3 { letter-spacing: -0.02em; }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.28rem); line-height: 1.6; }
.section-head { max-width: 1100px; margin-bottom: clamp(56px, 7vw, 96px); }
.section-head .lead { max-width: 60ch; }

/* ---------- Korrel over de hele pagina (één vaste laag, geen repaint) ---------- */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 9990; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* ---------- Woord-voor-woord onthulling van koppen ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .08em 0; margin: 0 -.04em -.08em 0; }
.split .w > span { display: inline-block; transform: translateY(112%); transition: transform .9s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 55ms); will-change: transform; }
.split.in .w > span, .split.in-now .w > span { transform: none; }
@media (prefers-reduced-motion: reduce) { .split .w > span { transform: none; transition: none; } }

/* ---------- Paginahero: enorme kop, spookwoord, lijn die intekent ---------- */
.page-hero { min-height: 92vh; padding: 190px 44px 120px; }
.page-hero h1 { font-size: clamp(3rem, 8.6vw, 8rem); letter-spacing: -0.05em; line-height: .96; max-width: 14ch; }
.page-hero.center h1 { max-width: 16ch; }
.page-hero .lead { margin-top: 30px; font-size: clamp(1.1rem, 1.7vw, 1.4rem); max-width: 54ch; }
.page-hero .hero-actions { margin-top: 46px; }
.page-hero .ghost {
  position: absolute; left: -2vw; bottom: -0.18em; z-index: 1; pointer-events: none; user-select: none;
  font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: clamp(7rem, 24vw, 24rem); line-height: 1;
  letter-spacing: -0.06em; white-space: nowrap; color: transparent;
  -webkit-text-stroke: 1px rgba(244,241,233,.13); text-stroke: 1px rgba(244,241,233,.13);
  opacity: 0; transform: translateY(.15em); transition: opacity 1.2s ease .2s, transform 1.4s cubic-bezier(.16,1,.3,1) .2s;
}
.page-hero.in-now .ghost { opacity: 1; transform: none; }
.page-hero .crumbs { font-size: .74rem; letter-spacing: .3em; }
.page-hero .crumbs::before { content: "—"; margin-right: 12px; color: var(--gold); }

/* ---------- Sectienummers als spooktekst ---------- */
body { counter-reset: sec; }
/* overflow: clip (niet hidden) — hidden maakt de sectie een scrollcontainer en breekt position: sticky van de stapelkaarten */
section.full { position: relative; counter-increment: sec; overflow: clip; }
section.full::before {
  content: "0" counter(sec); position: absolute; right: 24px; top: 28px; z-index: 0; pointer-events: none; user-select: none;
  background: none; width: auto; height: auto; border-radius: 0; left: auto; bottom: auto;
  font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: clamp(6rem, 17vw, 16rem); line-height: 1; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(20,20,26,.09); text-stroke: 1px rgba(20,20,26,.09);
}
section.full.bg-dark::before { -webkit-text-stroke-color: rgba(244,241,233,.09); }
section.full > .wrap { position: relative; z-index: 1; }

/* ---------- Schuine overgangen naar donkere secties ---------- */
section.full.bg-dark { clip-path: polygon(0 0, 100% 3.5vw, 100% 100%, 0 calc(100% - 3.5vw)); margin: -3.5vw 0; padding: 3.5vw 0; z-index: 2; }
section.full.bg-dark + .cta-band { margin-top: 0; }

/* ---------- Kaarten: spotlight die de muis volgt + gouden rand ---------- */
.fcard, .price, .quote, .gitem, .svc, .tl-item { position: relative; }
.fcard, .price, .quote { border-radius: 22px; overflow: hidden; }
.fcard::before, .price::before, .quote::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(217,178,90,.16), transparent 60%);
}
.fcard:hover::before, .price:hover::before, .quote:hover::before { opacity: 1; }
.fcard > *, .price > *, .quote > * { position: relative; z-index: 1; }
.fcard:hover, .price:hover, .quote:hover { transform: translateY(-10px); border-color: rgba(214,170,70,.55); }
.fcard { padding: 40px 36px; }
.fcard h3 { font-size: 1.5rem; }
.fcard-ico { transition: transform .5s cubic-bezier(.16,1,.3,1); }
.fcard:hover .fcard-ico { transform: translateY(-4px) rotate(-6deg); }
.fcard-num { font-size: 3.2rem; top: 10px; right: 22px; -webkit-text-stroke: 1px var(--line-gold); color: transparent; }

/* ---------- Tijdlijn, prijzen, cijfers: groter ---------- */
.tl-item { padding: 40px 0; grid-template-columns: 130px 1fr; }
.tl-num { font-size: 4rem; }
.price-amt { font-size: clamp(3rem, 4.4vw, 4rem); letter-spacing: -0.04em; }
.statband { gap: 32px; }
.statband .stat-num, .stat-num { font-size: clamp(3.4rem, 7.5vw, 7rem); letter-spacing: -0.05em; line-height: 1; }
.stat-label { font-size: 1rem; margin-top: 8px; display: block; }
.quote p { font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.45; }
.quote::after { content: "\201C"; position: absolute; right: 26px; top: -14px; font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 9rem; line-height: 1; color: rgba(217,178,90,.16); pointer-events: none; }

/* ---------- Beeldkaders: zoom + gouden waas ---------- */
.media-frame, .gitem { overflow: hidden; }
.media-frame::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s; background: linear-gradient(135deg, rgba(217,178,90,.25), transparent 60%); }
.media-frame:hover::before { opacity: 1; }
.media-frame:hover img, .frow-media:hover .media-frame img { transform: scale(1.06); }

/* ---------- Knoppen: gouden veeg bij hover ---------- */
.btn { overflow: hidden; isolation: isolate; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--gold-hi); transform: translateX(-102%) skewX(-12deg); transition: transform .45s cubic-bezier(.16,1,.3,1); }
.btn-gold::before { background: #fff3c4; }
.btn-ghost-light::before, .btn-dark::before { background: var(--gold); }
.btn:hover::before { transform: translateX(0) skewX(0); }
.btn-ghost-light:hover, .btn-dark:hover { color: #1a1407; border-color: var(--gold); }
.btn-gold:hover { background: var(--gold); }

/* ---------- Navigatie: lijntje dat groeit ---------- */
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Trefwoordenband: enorm, afwisselend gevuld en omlijnd ---------- */
.marquee { padding: 34px 0; }
.marquee-group span { font-size: clamp(2.6rem, 6vw, 5.4rem); font-weight: 900; letter-spacing: -0.04em; padding: 0 18px; }
.marquee-group span:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(214,170,70,.7); text-stroke: 1.5px rgba(214,170,70,.7); }
.marquee-group span::after { font-size: 1.1rem; margin-left: 36px; }

/* ---------- CTA-band en footer ---------- */
.cta-band { padding: clamp(120px, 14vw, 200px) 44px; }
.cta-band h2 { font-size: clamp(2.6rem, 6.5vw, 6rem); letter-spacing: -0.05em; }
.cta-band .inner { max-width: 900px; }
.footer-big {
  max-width: var(--maxw); margin: 0 auto; padding: 60px 44px 0; overflow: hidden;
  font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: clamp(3.4rem, 12.5vw, 13.5rem); line-height: .9; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px rgba(244,241,233,.18); text-stroke: 1px rgba(244,241,233,.18); white-space: nowrap;
  transition: color .6s, -webkit-text-stroke-color .6s;
}
.footer-big:hover { color: rgba(217,178,90,.9); -webkit-text-stroke-color: transparent; }

/* ---------- Paginaopbouw bij laden ---------- */
html.is-entering .nav { opacity: 0; transform: translateY(-10px); }
.nav { transition: background .4s, padding .4s, border-color .4s, box-shadow .4s, opacity .8s ease .15s, transform .9s cubic-bezier(.16,1,.3,1) .15s; }

/* ---------- Mobiel ---------- */
@media (max-width: 940px) {
  .wrap, .wrap-sm { padding-left: 22px; padding-right: 22px; }
  .page-hero { min-height: 80vh; padding: 150px 22px 90px; }
  .page-hero h1 { font-size: clamp(2.6rem, 11.5vw, 4.2rem); }
  section.full::before { font-size: 6.5rem; top: 14px; right: 10px; }
  section.full.bg-dark { clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw)); margin: -6vw 0; padding: 6vw 0; }
  .tl-item { grid-template-columns: 70px 1fr; }
  .tl-num { font-size: 2.6rem; }
  .footer-big { padding: 40px 22px 0; }
  .fcard { padding: 32px 26px; }
}

/* ============================================================
   VOLUIT: cursor, parallax, kanteling, kinetische kop
   ============================================================ */
/* Eigen cursor (alleen muis) */
@media (hover: hover) and (pointer: fine) {
  #cursor { position: fixed; left: 0; top: 0; z-index: 9995; pointer-events: none; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--gold); }
  #cursor-ring { position: fixed; left: 0; top: 0; z-index: 9994; pointer-events: none; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 1.5px solid rgba(217,178,90,.9); transition: width .35s, height .35s, margin .35s, background-color .35s, border-color .35s, opacity .3s; opacity: 0; }
  html.has-cursor #cursor-ring, html.has-cursor #cursor { opacity: 1; }
  html.cur-link #cursor-ring { width: 72px; height: 72px; margin: -36px 0 0 -36px; background: rgba(217,178,90,.14); border-color: transparent; }
  html.cur-media #cursor-ring { width: 110px; height: 110px; margin: -55px 0 0 -55px; background: rgba(7,8,11,.55); border-color: transparent; }
  html.cur-media #cursor-ring::after { content: "Bekijk"; position: absolute; inset: 0; display: grid; place-items: center; font-family: "Inter Tight", sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-hi); }
  html.has-cursor body, html.has-cursor a, html.has-cursor button { cursor: none; }
}

/* Kinetische hero-kop: gewicht en spatiëring bewegen mee met het scrollen */
.page-hero h1 { font-variation-settings: "wght" var(--wght, 800); transition: none; }

/* Beeld dat openveegt bij het verschijnen */
.media-frame.reveal, .gitem.reveal, .hero-card.reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.16,1,.3,1), opacity .4s, transform .6s; }
.media-frame.reveal.in, .gitem.reveal.in, .hero-card.reveal.in { clip-path: inset(0 0 0 0); }
.frow-media.reveal .media-frame { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.16,1,.3,1); }
.frow-media.reveal.in .media-frame { clip-path: inset(0 0 0 0); }

/* 3D-kanteling op kaarten */
.fcard, .price, .quote, .gitem { transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s; }

/* Zwevende lichtbollen in de hero */
.page-hero .orb { animation: drift 14s ease-in-out infinite alternate; }
.page-hero .orb-gold ~ .orb-gold { animation-duration: 19s; animation-direction: alternate-reverse; }
@keyframes drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(6vw,-5vh,0) scale(1.18); } }

/* ============================================================
   Achtergronden: overal strak wit (geen crème, stippen of vlekken)
   ============================================================ */
body { background: #fff; }
.bg-cream, .bg-white, section.over, section.diensten, section.portfolio, section.reviews { background: #fff; background-image: none; }
.bg-white::after, .bg-cream::after, section.over::after, section.diensten::after, section.reviews::after { display: none; }
.bg-white .fcard, .bg-cream .fcard, .quote, .price, .faq details { background: #fff; }
.case-hero.bg-cream { background: #fff; }

/* ============================================================
   Genummerde rijen (vervangt de kaartgrids)
   ============================================================ */
.rows { border-top: 1px solid var(--line); margin-top: 8px; }
.row {
  display: grid; grid-template-columns: 130px 1fr 64px; gap: 36px; align-items: center;
  padding: 40px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit;
  position: relative; isolation: isolate; transition: padding .45s cubic-bezier(.16,1,.3,1);
}
.row::before { content: ""; position: absolute; inset: 0 -44px; z-index: -1; background: linear-gradient(90deg, rgba(217,178,90,.14), rgba(217,178,90,0) 70%); transform: translateX(-100%); transition: transform .55s cubic-bezier(.16,1,.3,1); }
.row:hover::before { transform: none; }
.row:hover { padding-left: 22px; }
.row-num { font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: clamp(2.8rem, 5.5vw, 5rem); line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1.5px var(--gold); text-stroke: 1.5px var(--gold); transition: color .4s; }
.row:hover .row-num { color: var(--gold); }
.row-body h3 { font-size: clamp(1.5rem, 2.6vw, 2.5rem); letter-spacing: -0.035em; margin-bottom: 8px; line-height: 1.05; }
.row-body p { color: var(--ink-dim); font-size: clamp(1rem, 1.3vw, 1.12rem); max-width: 62ch; }
.row-arrow { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid var(--line-gold); display: grid; place-items: center; color: var(--gold-deep); transition: transform .45s cubic-bezier(.16,1,.3,1), background-color .3s, color .3s, border-color .3s; }
.row-arrow svg { width: 22px; height: 22px; }
.row:hover .row-arrow { transform: rotate(-45deg); background: var(--gold); border-color: var(--gold); color: #1a1407; }
div.row .row-arrow { opacity: .55; }
.bg-dark .rows { border-color: rgba(255,255,255,.1); }
.bg-dark .row { border-color: rgba(255,255,255,.1); }
.bg-dark .row-body p { color: var(--on-dark-dim); }

/* ============================================================
   Stapelkaarten: elke kaart blijft plakken en de volgende schuift eroverheen
   ============================================================ */
.stack { margin-top: 20px; padding-bottom: 8vh; }
.stack-stage { position: sticky; top: 100px; height: 76vh; min-height: 600px; margin-bottom: 6vh; }
.stack-stage:nth-child(2) { top: 116px; } .stack-stage:nth-child(3) { top: 132px; } .stack-stage:nth-child(4) { top: 148px; } .stack-stage:nth-child(5) { top: 164px; }
.stack-stage:last-child { margin-bottom: 0; }
.stack-card {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 48px; height: 100%; padding: 48px; border-radius: 34px;
  background: #0d0e14; color: var(--on-dark); border: 1px solid rgba(255,255,255,.1); text-decoration: none; overflow: hidden; transform-origin: 50% 0;
  box-shadow: 0 -30px 80px rgba(0,0,0,.35), 0 30px 60px rgba(0,0,0,.25);
}
.stack-text { display: flex; flex-direction: column; justify-content: center; }
.stack-num { font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: clamp(4rem, 8vw, 7.5rem); line-height: .9; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--gold); text-stroke: 1.5px var(--gold); margin-bottom: 22px; }
.stack-card h3 { color: #fff; font-size: clamp(2rem, 3.8vw, 3.6rem); letter-spacing: -0.045em; line-height: .98; margin-bottom: 18px; }
.stack-card p { color: rgba(244,241,233,.72); font-size: clamp(1.05rem, 1.4vw, 1.25rem); max-width: 40ch; }
.stack-more { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; color: var(--gold-hi); font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.stack-more svg { width: 18px; height: 18px; transition: transform .35s; }
.stack-card:hover .stack-more svg { transform: translateX(6px); }
.stack-img { border-radius: 22px; overflow: hidden; height: 100%; min-height: 0; }
.stack-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.stack-card:hover .stack-img img { transform: scale(1.05); }

/* ============================================================
   Tekst + beeld: groter, met verschoven gouden kader
   ============================================================ */
.frow, .over-grid { gap: clamp(48px, 7vw, 110px); }
.frow-media .media-frame, .over-media .media-frame { border-radius: 28px; box-shadow: 0 50px 110px rgba(20,20,30,.22); }
.frow-media::after, .over-media::after { content: ""; position: absolute; inset: 24px -24px -24px 24px; border: 1.5px solid var(--line-gold); border-radius: 28px; z-index: 0; pointer-events: none; }
.frow.flip .frow-media::after { inset: 24px 24px -24px -24px; }
.frow-copy h2, .over-copy h2 { margin-bottom: 24px; }
.checks, .ticks { gap: 18px; margin: 34px 0; }
.checks li, .ticks li { font-size: 1.08rem; }

@media (max-width: 940px) {
  .row { grid-template-columns: 70px 1fr; gap: 18px; padding: 30px 0; }
  .row-arrow { display: none; }
  .row:hover { padding-left: 0; }
  .stack-stage { top: 90px; height: auto; min-height: 0; margin-bottom: 18px; position: relative; }
  .stack-card { grid-template-columns: 1fr; padding: 28px; gap: 22px; border-radius: 24px; }
  .stack-img { height: 220px; }
  .frow-media::after, .over-media::after { inset: 14px -12px -12px 14px; }
}

/* ============================================================
   TWEEDE RONDE: elke sectie dezelfde ruime, strakke opbouw
   ============================================================ */
/* Sectiekop als editorial-grid: kop links, inleiding rechtsonder */
.section-head { max-width: none; margin: 0 0 clamp(56px, 7vw, 96px); text-align: left; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 28px 64px; align-items: end; }
.section-head .gold-rule { grid-column: 1; margin: 0 0 18px !important; }
.section-head.center .gold-rule, .cta-band .gold-rule { margin: 0 auto 18px !important; }
.section-head .eyebrow { grid-column: 1; justify-content: flex-start; }
.section-head h2 { grid-column: 1; max-width: 12ch; }
.section-head .lead { grid-column: 2; grid-row: 1 / span 3; align-self: end; margin: 0; max-width: 44ch; }
.section-head .lead::before { content: ""; display: block; width: 48px; height: 1px; background: var(--gold); margin-bottom: 18px; }
.cta-band .section-head, .section-head.center { display: block; text-align: center; }
.section-head.center h2 { max-width: none; }

/* FAQ: grote vragen, dunne lijnen, draaiend plusje */
.faq { max-width: 960px; margin: 0; gap: 0; border-top: 1px solid var(--line); }
.faq details { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; box-shadow: none; }
.faq details[open] { box-shadow: none; border-color: var(--line); }
.faq summary { padding: 30px 0; font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: clamp(1.2rem, 1.9vw, 1.6rem); letter-spacing: -0.02em; display: flex; justify-content: space-between; align-items: center; gap: 28px; cursor: pointer; list-style: none; }
.faq summary::after { content: ""; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; border: 1.5px solid var(--line-gold); background: linear-gradient(var(--gold-deep), var(--gold-deep)) center/14px 1.5px no-repeat, linear-gradient(var(--gold-deep), var(--gold-deep)) center/1.5px 14px no-repeat; transition: transform .4s cubic-bezier(.16,1,.3,1), background-color .3s; }
.faq details[open] summary::after { transform: rotate(135deg); background-color: rgba(217,178,90,.12); }
.faq details p { font-size: 1.08rem; max-width: 66ch; padding: 0 0 32px; margin-top: 0; }
.bg-dark .faq, .bg-dark .faq details { border-color: rgba(255,255,255,.1); }

/* Prijskaarten: groter, uitgelichte kaart donker met goud */
.price-grid { gap: 28px; }
.price { padding: 44px 40px 40px; border-radius: 26px; border: 1px solid var(--line); }
.price-name { font-size: .82rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }
.price-amt { margin: 22px 0 8px; }
.price-amt small { font-size: 1rem; letter-spacing: 0; text-transform: none; }
.price-desc { font-size: 1.05rem; margin-bottom: 30px; }
.price li { font-size: 1.02rem; padding-left: 32px; }
.price.featured { background: #0d0e14; color: #fff; border-color: #0d0e14; box-shadow: 0 50px 100px rgba(7,8,11,.35); transform: translateY(-14px); }
.price.featured:hover { transform: translateY(-22px); }
.price.featured .price-name, .price.featured .price-desc, .price.featured .price-amt small { color: rgba(244,241,233,.65); }
.price.featured .price-amt { color: #fff; }
.price.featured li { color: rgba(244,241,233,.85); }
.price.featured::before { display: none; }
.price.featured::after { content: "Populair"; position: absolute; top: 22px; right: 22px; font-family: "Inter Tight", sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #1a1407; background: var(--gold); padding: 6px 12px; border-radius: 6px; }

/* Galerij: twee grote beelden met bijschrift */
.gallery { gap: 28px; }
.gallery:not(.cols-3) { grid-template-columns: repeat(2, 1fr); }
.gallery > *:nth-child(2) { margin-top: 0 !important; }
.gitem { border-radius: 26px; aspect-ratio: 4 / 3; border: 0; box-shadow: 0 40px 90px rgba(20,20,30,.16); }
.gitem .gcap { padding: 48px 30px 26px; font-size: 1.25rem; }
.gitem .gcap span { font-size: .72rem; letter-spacing: .2em; }

/* Cijfers: enorme nummers met dunne scheidingslijnen */
.statband { gap: 0; }
.statband .stat { text-align: left; padding: 10px 36px; border-left: 1px solid rgba(255,255,255,.12); }
.statband .stat:first-child { border-left: 0; padding-left: 0; }
.bg-white .statband .stat, .bg-cream .statband .stat { border-color: var(--line); }
.stat-label { color: inherit; opacity: .6; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; font-family: "Inter Tight", sans-serif; font-weight: 600; }

/* Tijdlijn en stappen in dezelfde taal als de rijen */
.tl-item { grid-template-columns: 150px 1fr; padding: 44px 0; }
.tl-num { font-size: clamp(2.8rem, 5vw, 4.8rem); letter-spacing: -0.05em; -webkit-text-stroke: 1.5px var(--gold); }
.tl-body h3 { font-size: clamp(1.4rem, 2.2vw, 2rem); letter-spacing: -0.03em; margin-bottom: 8px; }
.tl-body p { font-size: 1.05rem; color: var(--ink-dim); max-width: 60ch; }
.steps { gap: 28px; }
.step { padding: 44px 36px; border-radius: 26px; }
.step-num { font-size: 4rem; letter-spacing: -0.05em; }
.step h3 { font-size: 1.5rem; }

/* Tekst-plus-beeld: zwevend label groter */
.badge-float { font-family: "Inter Tight", sans-serif; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .74rem; padding: 12px 18px; border-radius: 10px; }

/* Quotes: groot en luchtig */
.quote-grid { gap: 32px; }
.quote { padding: 52px 48px; border-radius: 26px; }

/* CTA-band: compact maar enorm van letter */
.cta-band .lead { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }

@media (max-width: 940px) {
  .section-head { grid-template-columns: 1fr; gap: 18px; }
  .section-head .lead { grid-column: 1; grid-row: auto; }
  .section-head h2 { max-width: none; }
  .gallery:not(.cols-3) { grid-template-columns: 1fr; }
  .statband { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .statband .stat { padding: 0 18px; }
  .statband .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .price.featured, .price.featured:hover { transform: none; }
  .tl-item { grid-template-columns: 80px 1fr; }
}

/* ============================================================
   Foto naast de rijenlijsten (blijft plakken tijdens scrollen)
   ============================================================ */
.rows-split { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.rows-img { position: sticky; top: 120px; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; box-shadow: 0 50px 110px rgba(20,20,30,.22); }
.rows-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.16,1,.3,1); }
.rows-img:hover img { transform: scale(1.04); }
.rows-img.reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(.16,1,.3,1), opacity .4s; }
.rows-img.reveal.in { clip-path: inset(0); }
.rows-split .rows { margin-top: 0; }
.gallery:has(> :nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.gallery:has(> :nth-child(3)) .gitem { aspect-ratio: 4 / 5; }
@media (max-width: 940px) {
  .rows-split { grid-template-columns: 1fr; gap: 28px; }
  .rows-img { position: relative; top: auto; aspect-ratio: 16 / 10; }
  .gallery:has(> :nth-child(3)) { grid-template-columns: 1fr; }
  .gallery:has(> :nth-child(3)) .gitem { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Home — dienstensectie als stapelkaarten (opbouw gelijk aan Palmyra "In balans")
   ============================================================ */
.home-services { position: relative; background: #07080b; color: var(--on-dark); padding: clamp(100px, 11vw, 150px) 44px 0; }
.hs-wrap { max-width: var(--maxw); margin: 0 auto; }
.home-services .section-head { margin-bottom: 0; }
.home-services .section-head h2 { color: #fff; }
.home-services .section-head .lead { color: rgba(244,241,233,.7); max-width: 600px; margin-top: 22px; }
.hs-stack { margin-top: clamp(60px, 7vw, 100px); }
.hs-stage { position: sticky; top: 100px; min-height: 780px; }
.hs-card {
  display: block; position: relative; padding: 32px; border-radius: 60px; text-decoration: none; color: var(--on-dark);
  background: #07080b; border: 2px solid rgba(244,241,233,.92); transform-origin: 50% 0;
}
.hs-top { display: flex; align-items: center; gap: 32px; margin-bottom: 20px; }
.hs-num { font-family: "Inter Tight", sans-serif; font-weight: 900; font-size: 110px; line-height: 1; letter-spacing: -0.04em; color: var(--gold); }
.hs-top .eyebrow { display: block; margin: 0 0 6px; }
.hs-top .eyebrow::before { display: none; }
.hs-top .eyebrow { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: rgba(244,241,233,.8); }
.hs-top h3 { color: #fff; font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; text-transform: uppercase; margin: 0; }
.hs-desc { max-width: 760px; font-size: 18px; line-height: 1.6; color: rgba(244,241,233,.85); margin: 0 0 28px; }
.hs-images { display: grid; grid-template-columns: 2fr 3fr; gap: 20px; height: 440px; }
.hs-images > div { display: grid; grid-template-rows: 1fr 1fr; gap: 20px; min-height: 0; }
.hs-images img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 40px; transition: transform 1.2s cubic-bezier(.16,1,.3,1); }
.hs-card:hover .hs-images img { transform: scale(1.03); }
.hs-cta { display: flex; justify-content: center; padding: 90px 0; }
@media (max-width: 940px) {
  .home-services { padding-left: 22px; padding-right: 22px; }
  .hs-stage { position: relative; top: auto; min-height: 0; margin-bottom: 20px; }
  .hs-card { padding: 22px; border-radius: 32px; }
  .hs-top { gap: 18px; }
  .hs-num { font-size: 64px; }
  .hs-top h3 { font-size: 24px; }
  .hs-desc { font-size: 16px; }
  .hs-images { grid-template-columns: 1fr; height: auto; }
  .hs-images > div { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .hs-images img { border-radius: 20px; aspect-ratio: 4 / 3; height: auto; }
  .hs-images > img { aspect-ratio: 16 / 10; }
  .hs-cta { padding: 50px 0 70px; }
}

/* ============================================================
   Kennisbank-artikelen
   ============================================================ */
.article { font-size: 1.12rem; line-height: 1.75; color: var(--ink-soft); }
.article .lead { font-size: 1.3rem; line-height: 1.55; color: var(--ink); margin-bottom: 40px; }
.article h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); letter-spacing: -0.035em; line-height: 1.08; margin: 56px 0 18px; color: var(--ink); }
.article h3 { font-size: 1.25rem; margin: 30px 0 10px; color: var(--ink); }
.article p { margin: 0 0 20px; }
.article ul, .article ol { margin: 0 0 24px; padding-left: 26px; display: grid; gap: 10px; }
.article li::marker { color: var(--gold-deep); font-weight: 700; }
.article a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; }
.article strong { color: var(--ink); }
.article-more { margin-top: 90px; padding-top: 50px; border-top: 1px solid var(--line); }
.article-more h2 { font-size: 1.6rem; margin-bottom: 10px; }
.page-hero h1 { max-width: 16ch; }
.page-hero.center h1 { margin-inline: auto; }