/* ============================================================
   NICEWALL — gedeelde stylesheet (tokens + componenten)
   1:1 met Figma. Wordt door elke pagina gelinkt.
   ============================================================ */

/* ---------- RESET ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- FONTS (plaats .woff2 in /fonts) ---------- */
@font-face { font-family:"Phonk";   font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/Phonk-Regular.woff2")  format("woff2"); }
@font-face { font-family:"Ezra";    font-style:normal; font-weight:300; font-display:swap; src:url("../fonts/Ezra-Light.woff2")    format("woff2"); }
@font-face { font-family:"Ezra";    font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/Ezra-Regular.woff2")  format("woff2"); }
@font-face { font-family:"Ezra";    font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/Ezra-Medium.woff2")   format("woff2"); }
@font-face { font-family:"Ezra";    font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/Ezra-Bold.woff2")     format("woff2"); }
@font-face { font-family:"Ezra";    font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/Ezra-ExtraBold.woff2") format("woff2"); }
@font-face { font-family:"Korolev"; font-style:normal; font-weight:300; font-display:swap; src:url("../fonts/Korolev-Light.woff2")  format("woff2"); }
@font-face { font-family:"Korolev"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/Korolev-Medium.woff2") format("woff2"); }
@font-face { font-family:"Prolinea"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/Prolinea-Bold.woff2") format("woff2"); }

/* ---------- TOKENS ---------- */
:root {
  --c-orange:#e85216; --c-orange-light:#f06b30; --c-ink:#171717; --c-black:#000000;
  --c-white:#ffffff; --c-border-dark:#343539; --c-beige:#d8d6c8; --c-beige-2:#d1cfbb;
  --font-display:"Phonk","Poppins","Arial Black",sans-serif;
  --font-heading:"Ezra","Jost","Helvetica Neue",Arial,sans-serif;
  --font-body:"Korolev","Work Sans","Segoe UI",Arial,sans-serif;
  --font-alt:"Prolinea","Archivo","Jost",sans-serif;
  --input-fill:#f3f3f3;
  /* Figma: 1728px kader, marge 179px -> content 1370px */
  --container-max:1728px; --container-pad:clamp(20px,10.36vw,179px);
  --section-gap:clamp(56px,7.5vw,119px);
}

/* ---------- BASE ---------- */
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { font-family:var(--font-body); font-weight:500; color:var(--c-ink); background:var(--c-beige); line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
h1,h2,h3 { font-weight:400; line-height:1.1; }

.container { max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); width:100%; }

/* full-bleed section met inner container */
.section { width:100%; }
.section__inner { max-width:var(--container-max); margin-inline:auto; padding-inline:var(--container-pad); }

/* ---------- ICONS ---------- */
.icon { width:16px; height:16px; flex:none; display:inline-block; }
.icon--arrow { fill:none; stroke:currentColor; stroke-width:2.9375; }
.icon--40 { width:40px; height:40px; }
.icon--29 { width:29px; height:29px; }
.icon--24 { width:24px; height:24px; }

/* ---------- CHIP / SECTION HEAD / LINK ---------- */
.chip { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:500; font-size:20px; line-height:30px; color:var(--c-black); }
.chip__icon { color:var(--c-orange); }
.chip--light { color:var(--c-white); }

.section-title { font-family:var(--font-display); font-size:35px; line-height:1; color:var(--c-orange); margin-top:12px; }

.link-all { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-heading); font-weight:700; font-size:18px; line-height:1.2; color:var(--c-ink); white-space:nowrap; }
.link-all:hover { color:var(--c-orange); }
.link-all .arrow-swap { color:var(--c-orange); }  /* Figma: pijl bij 'Bekijk alles' is oranje */

.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:40px; }

/* ---------- BUTTONS ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; height:60px; padding:0 22px; font-family:var(--font-heading); font-weight:700; font-size:18px; line-height:1; border:0; border-radius:0; cursor:pointer; white-space:nowrap; transition:opacity .2s, background .2s; }
.btn:hover { opacity:.88; }
.btn--orange        { background:var(--c-orange); color:var(--c-ink); }
.btn--black         { background:var(--c-black);  color:var(--c-white); }
.btn--black .arrow-swap { color:var(--c-orange); }  /* oranje pijl op zwarte button */
.btn--outline-light { background:transparent; color:var(--c-white); border:2px solid var(--c-white); }
.btn--outline-dark  { background:transparent; color:var(--c-ink);   border:2px solid var(--c-border-dark); }

/* ---------- HATCH DIVIDER ---------- */
.hatch { height:13px; width:100%; background-image:repeating-linear-gradient(115deg, currentColor 0 1.5px, transparent 1.5px 11px); }
.hatch--dark  { color:var(--c-ink); }
.hatch--light { color:var(--c-white); opacity:.5; }
/* Pijltjes-variant (o.a. footer): rij brand-pijltjes naast elkaar via mask */
.hatch--arrows { background-image:none; background:currentColor;
  -webkit-mask:url("../images/hatch-arrow.svg") repeat-x left center; mask:url("../images/hatch-arrow.svg") repeat-x left center;
  -webkit-mask-size:16px 13px; mask-size:16px 13px; }

/* ---------- HEADER ---------- */
.header { position:absolute; inset:0 0 auto 0; z-index:60; height:175px; display:flex; align-items:center; }
.header--solid { position:relative; background:var(--c-ink); }
.header__inner { position:relative; z-index:51; display:flex; align-items:center; justify-content:space-between; }

.logo { display:inline-flex; align-items:center; gap:10px; }
.logo__img { width:clamp(150px,19.44vw,336px); height:auto; display:block; }
.logo__word { font-family:var(--font-display); font-size:34px; line-height:1; letter-spacing:.5px; color:var(--c-white); }
.logo__word b { font-weight:400; }
.logo__mark { width:34px; height:34px; position:relative; flex:none; border:4px solid var(--c-orange); }
.logo__mark::after { content:""; position:absolute; inset:6px; border-top:4px solid var(--c-orange); border-right:4px solid var(--c-orange); }

.nav-toggle { position:fixed; top:clamp(16px,3.32vw,57px); right:var(--container-pad); z-index:70; width:60px; height:60px; flex:none; border:0; cursor:pointer; background:var(--c-orange); display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; }
.nav-toggle span { display:block; width:26px; height:3px; background:var(--c-white); }

/* ---------- OVERLAY MENU ---------- */
.nav-menu { position:fixed; inset:0 0 0 auto; z-index:50; width:min(942px,100%); height:100dvh; overflow-y:auto; background:var(--c-ink); box-shadow:0 4px 100px rgba(0,0,0,.8); transform:translateX(100%); visibility:hidden; transition:transform .35s ease, visibility .35s ease; }
.nav-menu[data-open="true"] { transform:translateX(0); visibility:visible; }
.nav-menu__inner { min-height:100%; display:flex; flex-direction:column; padding:clamp(72px,11vh,122px) 0 clamp(24px,4vh,40px); }
.nav-menu__list { padding-inline:clamp(24px,4.8vw,69px); }
.nav-menu__link { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(10px,2.2vh,27px) clamp(20px,4.2vw,42px); background:linear-gradient(to top, var(--c-ink), var(--c-border-dark)); }
/* Menu-item hover: zelfde label-swap als catalogus (rust omhoog weg, bold-oranje van onder in) */
.nav-menu__label { position:relative; display:inline-block; overflow:hidden; vertical-align:top; font-family:var(--font-heading); font-size:clamp(26px,min(7.2vw,4.6vh),50px); line-height:1.18; }
.nav-menu__label::after { content:attr(data-label); display:block; font-weight:800; visibility:hidden; white-space:nowrap; }
.nav-menu__face { position:absolute; left:0; top:0; width:100%; white-space:nowrap; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.nav-menu__face--rest  { color:var(--c-white); font-weight:300; }
.nav-menu__face--hover { top:100%; color:var(--c-orange); font-weight:800; }
.nav-menu__link:hover .nav-menu__face { transform:translateY(-100%); }
.nav-menu__link .icon { color:var(--c-orange); flex:none; }
.nav-menu__foot { margin-top:auto; padding:clamp(20px,4vh,48px) clamp(24px,4.8vw,69px) 0; }
.nav-menu__brand { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:28px; }
.nav-menu__contact { display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; font-family:var(--font-heading); font-weight:500; font-size:18px; line-height:27px; color:var(--c-white); }
.nav-menu__contact .pair { display:inline-flex; align-items:center; gap:10px; }
.nav-menu__contact b { color:var(--c-orange); font-weight:700; }

/* ---------- HERO ---------- */
.hero { position:relative; width:100%; min-height:min(1036px,60vw); display:grid; grid-template-columns:minmax(0,1fr); align-items:center; overflow:hidden; background:var(--c-ink); }
.hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.hero__overlay { position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 34%, rgba(0,0,0,0) 62%); }
.hero__inner { position:relative; z-index:3; min-width:0; padding-block:175px 60px; }
.hero__title { font-size:55px; line-height:65px; color:var(--c-white); max-width:620px; margin:12px 0 12px; overflow-wrap:break-word; }
.hero__title .hl { display:block; overflow:hidden; }
.hero__title .ln { display:inline-block; }
.hero__title .is-light   { font-family:var(--font-heading); font-weight:300; }
.hero__title .is-display { font-family:var(--font-display); font-weight:400; }
.hero__actions { display:flex; flex-wrap:wrap; gap:29px; }
/* Expliciete hoogte: de <svg> heeft zelf geen viewBox, dus height:auto zou
   150px worden en de vorm verticaal centreren (= 6px verschuiving). */
.hero__flag { --w:clamp(84px,7.75vw,134px); position:absolute; z-index:3; width:var(--w); height:calc(var(--w) * 134 / 131); color:var(--c-orange); }
/* Figma: pijl staat tegen de linkerrand (tip 3px buiten beeld) met de onderkant
   161px boven de hero-onderrand (= 1.2x de pijlbreedte). */
.hero__flag--bl { left:-3px; bottom:calc(1.2 * var(--w)); }

/* ---------- PAGE HEAD (subpagina titel, licht/beige) ---------- */
.header--light .logo__word { color:var(--c-ink); }
.page-head { padding-block:220px 0; }
.page-head__grid { display:grid; grid-template-columns:minmax(0,595px) minmax(0,1fr); gap:clamp(32px,4vw,72px); align-items:center; }
/* Productkop (Figma 785-2434): beeld loopt door tot de linkerrand (x 0..845),
   tekstkolom start op x=996. Kolommen 666/553 binnen de container + gap 151. */
.page-head__grid--bleed { grid-template-columns:minmax(0,1.204fr) minmax(0,1fr); gap:clamp(28px,8.74vw,151px); align-items:start; }
.page-head__grid--bleed > .page-head__media,
.page-head__grid--bleed > div:first-child { margin-left:calc(-1 * var(--container-pad)); }
.page-head__grid--bleed .carousel__slide img { aspect-ratio:845/780; }
.page-head__col { display:flex; flex-direction:column; align-items:flex-start; gap:15px; }
.page-head__title { font-family:var(--font-display); font-weight:400; font-size:clamp(40px,4.5vw,50px); line-height:1.1; color:var(--c-orange); }
.page-head__title .is-ink { color:var(--c-ink); }
.page-head__text { max-width:640px; font-family:var(--font-body); font-weight:500; font-size:20px; line-height:30px; color:var(--c-ink); }
.page-head { position:relative; }
.page-head__deco { position:absolute; z-index:-1; pointer-events:none;
  top:clamp(14px,2.02vw,35px); right:clamp(14px,2.26vw,39px);
  width:clamp(280px,41.8vw,722px); aspect-ratio:1/1; background:var(--c-beige-2);
  clip-path:polygon(100% 50%, 50% 100%, 50% 50%, 0 50%, 50% 0, 100% 0); }
.page-head__media { position:relative; }
.page-head__media img { width:100%; object-fit:cover; }
.page-head__actions { display:flex; flex-wrap:wrap; gap:29px; margin-top:12px; }

/* ---------- PAGE TITLE HEADER (variant, donker) ---------- */
.page-hero { position:relative; background:var(--c-ink); color:var(--c-white); overflow:hidden; padding-block:220px 72px; }
.page-hero--image { min-height:560px; display:grid; grid-template-columns:minmax(0,1fr); align-items:end; }
.page-hero__bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.page-hero__overlay { position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,0) 70%); }
.page-hero__inner { position:relative; z-index:3; min-width:0; }
.page-hero__title { font-family:var(--font-display); font-size:clamp(40px,5vw,70px); line-height:1.02; color:var(--c-orange); margin-top:12px; }
.page-hero__title .is-white { color:var(--c-white); }
.page-hero__text { max-width:640px; margin-top:20px; font-size:18px; line-height:28px; color:var(--c-white); }
.page-hero__flag { position:absolute; z-index:3; width:120px; height:120px; color:var(--c-orange); left:0; bottom:-1px; }

/* ---------- CATALOGUS LIST ---------- */
.catalog { position:relative; background:var(--c-beige); padding-block:var(--section-gap) clamp(24px,3vw,48px); }
.catalog .section-head { margin-bottom:clamp(24px,2.7vw,39px); }
.catalog__panel { background:var(--c-beige-2); padding:clamp(36px,3.6vw,62px) clamp(40px,4vw,70px) clamp(36px,3.6vw,62px) clamp(32px,3.3vw,57px); }
/* ---------- Deco-pijlenpaar (twee losse vormen die naar elkaar toe schuiven) ---------- */
.deco-pair { --dw:clamp(84px,7.75vw,134px); position:absolute; display:block; width:var(--dw); height:calc(2 * var(--dw)); overflow:hidden; pointer-events:none; }
.deco-pair__top, .deco-pair__bot { position:absolute; left:0; width:100%; height:50%; }
.deco-pair__top { top:0;    clip-path:polygon(0 50%, 50% 0, 50% 50%, 100% 50%, 50% 100%, 0 100%); }
.deco-pair__bot { bottom:0; clip-path:polygon(0 50%, 50% 100%, 50% 50%, 100% 50%, 50% 0, 0 0); }
.deco-pair--hero   .deco-pair__top { background:var(--c-beige-2); }
.deco-pair--hero   .deco-pair__bot { background:var(--c-orange); }
.deco-pair--footer .deco-pair__top { background:var(--c-orange); }
.deco-pair--footer .deco-pair__bot { background:var(--c-beige-2); }
.deco-pair--cta    .deco-pair__top { background:var(--c-orange);  clip-path:polygon(50% 100%, 0 50%, 50% 50%, 50% 0, 100% 50%, 100% 100%); }
.deco-pair--cta    .deco-pair__bot { background:var(--c-beige-2); clip-path:polygon(100% 50%, 50% 100%, 50% 50%, 0 50%, 50% 0, 100% 0); }
/* zelfde vormen als 'cta', maar met omgekeerde kleuren (o.a. projecten-archief) */
.deco-pair--cta-alt .deco-pair__top { background:var(--c-beige-2); clip-path:polygon(50% 100%, 0 50%, 50% 50%, 50% 0, 100% 50%, 100% 100%); }
.deco-pair--cta-alt .deco-pair__bot { background:var(--c-orange);  clip-path:polygon(100% 50%, 50% 100%, 50% 50%, 0 50%, 50% 0, 100% 0); }

.catalog__deco { top:calc(-1 * var(--dw)); right:0; z-index:5; }
.catalog__body { display:grid; grid-template-columns:minmax(0,725px) minmax(0,453px); justify-content:space-between; gap:32px; align-items:start; }
.catalog__list { border-top:1px solid var(--c-ink); }
.catalog__item { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--c-ink); }
/* Hover: label-swap — rust (Ezra Regular, ink) schuift omhoog weg terwijl dezelfde tekst
   (font-weight 800, oranje) van onderaf omhoog inschuift. Twee lagen, smooth 0.5s. */
.catalog__label { position:relative; display:inline-block; overflow:hidden; vertical-align:top; font-family:var(--font-heading); font-size:clamp(24px,2.2vw,38px); line-height:1.1; }
.catalog__label::after { content:attr(data-label); display:block; font-weight:800; visibility:hidden; white-space:nowrap; } /* sizer op de dikste (800) breedte */
.catalog__face { position:absolute; left:0; top:0; width:100%; white-space:nowrap; color:var(--c-ink); font-weight:400; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.catalog__face--hover { top:100%; font-weight:800; color:var(--c-orange); }
.catalog__item:hover .catalog__face { transform:translateY(-100%); }
.catalog__item .icon { color:var(--c-orange); }
/* Pijl-swap: rust-pijl schuift weg in de pijlrichting (rechtsboven), nieuwe schuift van linksonder in */
.arrow-swap { position:relative; display:inline-block; width:40px; height:40px; flex:none; overflow:hidden; }
.arrow-swap--sm { width:16px; height:16px; }
.arrow-swap .icon { position:absolute; left:0; top:0; transition:transform .4s cubic-bezier(.4,0,.2,1); }
.arrow-swap__hover { transform:translate(-125%,125%); }
.catalog__item:hover .arrow-swap__rest, .nav-menu__link:hover .arrow-swap__rest, .btn:hover .arrow-swap__rest,
.link-all:hover .arrow-swap__rest, .cat-card:hover .arrow-swap__rest, .project-card:hover .arrow-swap__rest, .faq__q:hover .arrow-swap__rest { transform:translate(125%,-125%); }
.catalog__item:hover .arrow-swap__hover, .nav-menu__link:hover .arrow-swap__hover, .btn:hover .arrow-swap__hover,
.link-all:hover .arrow-swap__hover, .cat-card:hover .arrow-swap__hover, .project-card:hover .arrow-swap__hover, .faq__q:hover .arrow-swap__hover { transform:translate(0,0); }
@media (prefers-reduced-motion:reduce) { .arrow-swap .icon { transition:none; } }
.catalog__media { position:relative; }
.catalog__media img { width:100%; aspect-ratio:1/1; object-fit:cover; }
/* Beeld-swap bij hover (overgenomen uit de referentie): gestapelde lagen die
   vanuit het midden in-/uitschalen. 480ms, uitgaande direct weg, inkomende met
   45% overlap (216ms delay) — dat zit in main.js. */
.catalog__stack { position:relative; aspect-ratio:1/1; overflow:hidden; }
.catalog__layer { position:absolute; inset:0; overflow:hidden; z-index:0;
  transform:scale(0); transform-origin:50% 50%;
  transition:transform 480ms cubic-bezier(.65,0,.35,1); will-change:transform; }
.catalog__layer.is-active { z-index:2; transform:scale(1); }
.catalog__layer img { width:100%; height:100%; aspect-ratio:auto; object-fit:cover; }
@media (prefers-reduced-motion:reduce) { .catalog__layer { transition:none; } }
/* Hoek-brackets: wrappen om de hoeken, armen op de beeldrand (licht overlappend) */
.catalog__bracket { position:absolute; width:72px; height:72px; }
.catalog__bracket--tl { top:-4px; left:-4px;  border-top:11px solid var(--c-orange); border-left:11px solid var(--c-orange); }
.catalog__bracket--tr { top:-4px; right:-4px; border-top:11px solid var(--c-orange); border-right:11px solid var(--c-orange); }
.catalog__bracket--bl { bottom:-4px; left:-4px;  border-bottom:11px solid var(--c-orange); border-left:11px solid var(--c-orange); }
.catalog__bracket--br { bottom:-4px; right:-4px; border-bottom:11px solid var(--c-orange); border-right:11px solid var(--c-orange); }

/* ---------- CTA (beige sectie met ingezet oranje blok + watermerk-pijl) ---------- */
/* Figma: de CTA-sectie start op y=1815 terwijl het catalogus-paneel pas op 1864
   eindigt — de sectie (en dus de deco-pijl linksboven) overlapt de vorige sectie.
   Zonder deze negatieve marge staat alles vanaf de CTA 82px te laag. */
.cta { position:relative; max-width:1920px; margin-inline:auto; margin-top:calc(-1 * clamp(0px,4.75vw,82px)); background:transparent; overflow:hidden; padding-top:clamp(64px,7.75vw,134px); }
.cta__block { position:relative; margin-right:clamp(0px,9.7vw,178px); background:linear-gradient(115deg, rgba(240,107,48,.2) 41%, rgba(23,23,23,.2) 98%), var(--c-orange); }
.cta__watermark { position:absolute; left:9%; top:15%; width:min(42%,668px); height:auto; z-index:1; }
.cta__deco { top:calc(clamp(64px,7.75vw,134px) - var(--dw)); left:0; z-index:4; }  /* splitsing exact op de bovenrand van het oranje blok */
/* Figma: oranje blok is 768px hoog (y 2050..2818). */
.cta__inner { position:relative; z-index:3; padding-block:clamp(40px,4.5vw,64px) clamp(96px,15vw,259px); }
.cta__content { display:flex; flex-direction:column; align-items:flex-start; gap:21px; max-width:680px; } /* Figma 805:6683 */
.cta__avatar { width:135px; height:135px; border-radius:50%; object-fit:cover; }
/* Chip-pijltje op het oranje blok is beige (#D1CFBB), niet oranje — anders valt hij weg. */
.cta__content .chip__icon { color:var(--c-beige-2); }
.cta__title { font-size:65px; line-height:70px; overflow-wrap:break-word; }
.cta__title .is-light   { display:block; font-family:var(--font-heading); font-weight:300; color:var(--c-ink); }
.cta__title .is-display { display:block; font-family:var(--font-display); font-weight:400; color:var(--c-white); }
.cta__text { font-size:20px; line-height:30px; color:var(--c-black); max-width:595px; }
.cta__actions { display:flex; flex-wrap:wrap; gap:29px; margin-top:8px; }
/* Marquee-carousel: doorlopende band beelden op de rechterhelft, tot de sectierand (max 1920px) */
.cta__media { position:absolute; z-index:2; top:clamp(48px,11%,120px); bottom:clamp(40px,9%,72px); left:clamp(340px,56%,900px); right:calc(-1 * clamp(0px,9.7vw,178px)); overflow:hidden; }
.cta__marquee { display:flex; gap:23px; height:100%; width:max-content; will-change:transform; animation:cta-marquee 28s linear infinite; }
.cta__marquee img { height:100%; width:auto; flex:none; object-fit:cover; display:block; }
.cta__media:hover .cta__marquee { animation-play-state:paused; }
/* Gradient blijft aan de uiterste rechterrand: band vloeit uit naar de beige rand */
.cta__media::after { content:""; position:absolute; inset:0 0 0 auto; width:clamp(80px,12%,200px); background:linear-gradient(to right, rgba(216,214,200,0), var(--c-beige)); z-index:3; pointer-events:none; }
@keyframes cta-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) { .cta__marquee { animation:none; } }

/* ---------- USP BAR ---------- */
/* USP-balk + grote deco-watermark rechts (Figma: vector 722x723 op x=943/y=2776,
   kleur beige-2, loopt door tot over de projecten-sectie). Achtergrond is
   transparant zodat de watermark doorloopt (body is al beige). */
.usp { position:relative; background:transparent; padding-top:clamp(48px,4.7vw,75px); }
.usp > .container { position:relative; z-index:1; }
.usp__deco {
  /* z-index:-1 => onder alle in-flow content, dus ook achter het oranje
     CTA-blok (Figma), maar nog wel boven de pagina-achtergrond. */
  position:absolute; z-index:-1; pointer-events:none;
  top:calc(-1 * clamp(18px,2.5vw,43px));
  right:clamp(14px,3.65vw,63px);
  width:clamp(280px,41.8vw,722px); aspect-ratio:1/1;
  background:var(--c-beige-2);
  clip-path:polygon(100% 50%, 50% 100%, 50% 50%, 0 50%, 50% 0, 100% 0);
}
/* Figma: USP-blok is 102px hoog (items 2894 -> hatch 2983). */
.usp__list { display:grid; grid-template-columns:repeat(4,auto); justify-content:space-between; align-items:center; gap:24px 40px; padding-bottom:clamp(30px,3.5vw,60px); }
.usp__item { display:inline-flex; align-items:center; gap:20px; }
.usp__item .icon { color:var(--c-orange); }
.usp__label { font-family:var(--font-heading); font-weight:700; font-size:18px; color:var(--c-ink); white-space:nowrap; }

/* ---------- PROJECT CARDS ---------- */
/* Transparant zodat de deco-watermark uit .usp hier doorheen zichtbaar blijft
   (kaarten en tekst worden er als normale content overheen getekend). */
.projects { position:relative; background:transparent; padding-block:clamp(44px,3.9vw,63px) clamp(48px,6.7vw,116px); }
/* Projecten-archief: deco-paar tegen de linkerrand ter hoogte van de grid-start
   (Figma 805-2163: y 614..882). USP-balk als laatste sectie krijgt onderruimte. */
.projects--archive { position:relative; }
.projects__deco { left:0; top:181px; z-index:2; }
main > .usp:last-child { padding-bottom:clamp(40px,4.8vw,83px); }
.projects__grid { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:34px 43px; }
.projects__grid--flat { grid-template-rows:none; grid-auto-rows:1fr; }
.project-card { position:relative; overflow:hidden; display:block; min-height:0; }
.project-card--large { grid-row:1 / span 2; }
.project-card--large img { aspect-ratio:664/784; }
.project-card--small img { aspect-ratio:664/375; }
.project-card--tall img { aspect-ratio:452/560; }
.project-card img { width:100%; height:100%; object-fit:cover; }
.project-card__overlay { position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:35px; background:linear-gradient(180deg, rgba(35,38,43,0) 55%, rgba(23,23,23,.7) 100%); }
.project-card__cat { font-family:var(--font-body); font-weight:500; font-size:14px; line-height:27px; letter-spacing:2.8px; text-transform:uppercase; color:var(--c-white); }
.project-card__row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.project-card__title { font-family:var(--font-display); font-weight:400; font-size:20px; line-height:30px; color:var(--c-white); }
.project-card__row .icon { color:var(--c-orange); }
.project-card__bar { position:absolute; left:0; right:0; bottom:0; z-index:3; height:5px; background:var(--c-orange); }

/* ---------- TEXT / SEO BLOCK ---------- */
.textblock { padding-block:var(--section-gap); }
.textblock__title { font-family:var(--font-display); font-size:clamp(26px,3vw,35px); line-height:1.1; color:var(--c-orange); margin-bottom:16px; }
.textblock__title--ink { color:var(--c-ink); }
.prose { font-family:var(--font-body); font-weight:500; font-size:18px; line-height:30px; color:var(--c-ink); max-width:820px; }
.prose p + p { margin-top:18px; }
.text-2col { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:start; }

/* ---------- PROCESS STEPS (01 / 02 / 03) ---------- */
.steps { padding-block:var(--section-gap); }
.steps__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,56px); margin-top:44px; }
.step { display:flex; flex-direction:column; }
.step__num { font-family:var(--font-display); font-weight:400; font-size:50px; line-height:60px; color:var(--c-orange); position:relative; }
.step__num::after { content:""; position:absolute; top:30px; left:64px; right:-56px; height:1px; background:var(--c-border-dark); }
.step:last-child .step__num::after { display:none; }
.step__card { background:var(--c-beige-2); padding:35px; margin-top:8px; display:flex; flex-direction:column; gap:5px; }
.step__title { font-family:var(--font-display); font-weight:400; font-size:20px; line-height:30px; color:var(--c-orange); }
.step__text { font-family:var(--font-body); font-weight:500; font-size:18px; line-height:27px; color:var(--c-ink); }

/* ---------- FAQ ACCORDION (Veelgestelde vragen) ---------- */
.faq { padding-block:var(--section-gap); }
/* Figma: het FAQ-vlak loopt niet tot de schermrand maar staat binnen de
   container (x 180..1548). Achtergrond daarom via een ingesprongen laag. */
.faq--panel { position:relative; background:transparent; }
.faq--panel::before { content:""; position:absolute; inset:0 var(--container-pad); background:var(--c-beige-2); }
.faq--panel > .container { position:relative; }
.faq__head { text-align:center; margin-bottom:40px; }
.faq__head .chip { justify-content:center; }
.faq__head .section-title { text-align:center; }
.faq__list { border-top:1px solid var(--c-ink); max-width:960px; }
.faq__list--grid { border-top:0; max-width:1207px; margin-inline:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 39px; }
.faq__list--grid .faq__item { border-bottom:0; }
.faq__list--grid .faq__q { border-bottom:0; }
.faq__list--grid .faq__item { position:relative; padding-bottom:13px; margin-bottom:12px; }
.faq__list--grid .faq__item::after { content:""; position:absolute; left:0; right:0; bottom:0; height:13px; background-image:repeating-linear-gradient(115deg, var(--c-ink) 0 1.5px, transparent 1.5px 11px); }
.faq__item { border-bottom:1px solid var(--c-ink); }
.faq__q { width:100%; background:none; border:0; cursor:pointer; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:24px 0; text-align:left; font-family:var(--font-alt); font-weight:700; font-size:25px; line-height:30px; color:var(--c-ink); }
.faq__q:hover { color:var(--c-orange); }
.faq__icon { position:relative; width:24px; height:24px; flex:none; }
.faq__icon::before, .faq__icon::after { content:""; position:absolute; background:var(--c-orange); transition:transform .25s ease, opacity .25s ease; }
.faq__icon::before { top:11px; left:0; width:24px; height:2px; }
.faq__icon::after  { left:11px; top:0; width:2px; height:24px; }
.faq__item[data-open="true"] .faq__icon::after { transform:scaleY(0); opacity:0; }
.faq__a { overflow:hidden; max-height:0; transition:max-height .3s ease; }
.faq__item[data-open="true"] .faq__a { max-height:600px; }
.faq__a-inner { padding:0 0 24px; font-family:var(--font-body); font-size:17px; line-height:28px; color:var(--c-ink); max-width:820px; }

/* ---------- FILTER PILLS ---------- */
.filters { display:flex; flex-wrap:wrap; gap:20px; margin-bottom:40px; }
.filter-pill { display:inline-flex; align-items:center; gap:10px; height:60px; padding:0 22px; border:1px solid rgba(23,23,23,.5); background:var(--c-beige-2); color:var(--c-ink); font-family:var(--font-heading); font-weight:700; font-size:18px; line-height:1; cursor:pointer; border-radius:0; white-space:nowrap; transition:border-color .2s, background .2s, color .2s; }
.filter-pill:hover { border-color:var(--c-orange); }
.filter-pill[aria-pressed="true"], .filter-pill.is-active { border:2px solid var(--c-orange); }

/* ---------- FORM ---------- */
.form { display:grid; gap:24px; }
.form__group-title { font-family:var(--font-display); font-weight:400; font-size:20px; line-height:30px; color:var(--c-ink); margin-top:8px; }
.form__row { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.field { display:flex; flex-direction:column; gap:2px; }
.field label { font-family:var(--font-body); font-weight:500; font-size:18px; line-height:27px; color:var(--c-ink); }
.field input, .field textarea, .field select { font-family:var(--font-body); font-weight:500; font-size:18px; color:var(--c-ink); background:var(--input-fill); border:0; border-radius:0; padding:12px 14px; height:50px; width:100%; appearance:none; }
.field textarea { height:auto; min-height:186px; resize:vertical; }
.field input::placeholder, .field textarea::placeholder { color:var(--c-ink); opacity:.5; }
.field input:focus, .field textarea:focus, .field select:focus { outline:2px solid var(--c-orange); outline-offset:-2px; }
.field--full { grid-column:1 / -1; }
.field--select { position:relative; }
.field--select::after { content:""; position:absolute; right:16px; bottom:19px; width:9px; height:9px; border-right:2px solid var(--c-ink); border-bottom:2px solid var(--c-ink); transform:rotate(45deg); pointer-events:none; }

/* ---------- BRANCH / PRODUCT TILE ---------- */
.tile-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.tile { display:flex; align-items:center; justify-content:center; text-align:center; min-height:120px; padding:24px; background:var(--c-beige-2); color:var(--c-ink); font-family:var(--font-heading); font-weight:700; font-size:18px; transition:background .2s, color .2s; }
.tile:hover { background:var(--c-orange); color:var(--c-ink); }

/* ---------- MEDIA / GALLERY ---------- */
.media-full { width:100%; }
.media-full img { width:100%; object-fit:cover; }
.gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.gallery img { width:100%; aspect-ratio:3/2; object-fit:cover; }

/* ---------- SPECS SIDEBAR ---------- */
.specs { display:flex; flex-direction:column; gap:0; border-top:1px solid var(--c-ink); }
.specs__row { display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid var(--c-ink); }
.specs__key { font-family:var(--font-heading); font-weight:700; font-size:15px; color:var(--c-ink); }
.specs__val { font-family:var(--font-body); font-size:15px; color:var(--c-ink); text-align:right; }

/* ---------- BREADCRUMB ---------- */
.breadcrumb { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:500; font-size:20px; line-height:30px; color:var(--c-ink); }
.breadcrumb .icon { color:var(--c-orange); }
.breadcrumb--light { color:var(--c-white); }

/* ---------- QUOTE ---------- */
.quote { font-family:var(--font-heading); font-weight:400; font-size:30px; line-height:34px; color:var(--c-ink); max-width:520px; }
.quote em { font-style:normal; font-family:var(--font-alt); font-weight:700; color:var(--c-orange); }

/* ---------- WORK-TAG CHIP ---------- */
.tags { display:flex; flex-wrap:wrap; gap:12px; }
.tag { display:inline-flex; align-items:center; background:var(--c-beige-2); border:1px solid rgba(23,23,23,.35); padding:5px 10px; font-family:var(--font-body); font-weight:500; font-size:18px; line-height:27px; color:var(--c-ink); }

/* ---------- CHECK LIST (hero USP rows) ---------- */
.check-list { display:flex; flex-direction:column; gap:15px; }
.check-list li { display:flex; align-items:center; gap:18px; font-family:var(--font-body); font-weight:500; font-size:18px; line-height:27px; }
.check-list .icon { color:var(--c-orange); width:24px; height:24px; }

/* ---------- CATEGORY CARD GRID ---------- */
.cat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:41px; }
.cat-card { display:flex; flex-direction:column; gap:16px; }
.cat-card__media { position:relative; }
.cat-card__media img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.cat-card__row { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.cat-card__title { font-family:var(--font-display); font-weight:400; font-size:20px; line-height:30px; color:var(--c-ink); }
.cat-card__row .icon { color:var(--c-orange); flex:none; margin-top:4px; }
.cat-card:hover .cat-card__title { color:var(--c-orange); }

/* ---------- PROMO CARD (orange) ---------- */
.promo-card { position:relative; overflow:hidden; padding:36px 40px; min-height:344px;
  background:linear-gradient(115deg, rgba(240,107,48,.2) 41%, rgba(23,23,23,.2) 98%), var(--c-orange); }
.promo-card__wm { position:absolute; left:-6%; bottom:-8%; width:min(52%,340px); height:auto; z-index:0; }
.promo-card > *:not(.promo-card__wm) { position:relative; z-index:1; }
.promo-card__avatar { float:right; width:135px; height:135px; border-radius:50%; object-fit:cover; margin:0 0 18px 28px; }
.promo-card__title { color:var(--c-white); font-size:35px; line-height:45px; }
.promo-card__title .is-light { font-family:var(--font-heading); font-weight:300; }
.promo-card__title .is-display { font-family:var(--font-display); font-weight:400; }
.promo-card__text { clear:right; color:var(--c-white); font-family:var(--font-body); font-weight:500; font-size:20px; line-height:30px; margin-top:16px; }
.promo-card .btn { clear:both; margin-top:22px; }

/* ---------- LOGO GRID (opdrachtgevers) ---------- */
.logo-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:40px; }
.logo-grid__cell { display:flex; align-items:center; justify-content:center; min-height:117px; background:var(--c-beige-2); padding:24px; }
.logo-grid__cell img { max-height:48px; width:auto; opacity:.85; }

/* ---------- INFO CARDS (image + text) ---------- */
.info-cards { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,48px); margin-top:40px; }
.info-card { display:grid; grid-template-columns:242px 1fr; gap:0; background:var(--c-beige-2); }
.info-card__img { width:100%; height:100%; object-fit:cover; }
.info-card__body { padding:40px; display:flex; flex-direction:column; gap:12px; }
.info-card__title { font-family:var(--font-display); font-weight:400; font-size:20px; line-height:30px; color:var(--c-orange); }
.info-card__text { font-family:var(--font-body); font-weight:500; font-size:18px; line-height:27px; color:var(--c-ink); }

/* ---------- CAROUSEL ---------- */
.carousel { position:relative; }
.carousel__viewport { overflow:hidden; }
.carousel__track { display:flex; transition:transform .4s ease; }
.carousel__slide { flex:0 0 100%; }
.carousel__slide img { width:100%; aspect-ratio:1368/770; object-fit:cover; }
.carousel__btn { position:absolute; top:50%; transform:translateY(-50%); width:60px; height:60px; border:0; cursor:pointer; background:var(--c-ink); color:var(--c-white); display:inline-flex; align-items:center; justify-content:center; }
.carousel__btn--prev { left:38px; }
.carousel__btn--next { right:38px; }
.carousel__btn .icon { width:18px; height:18px; }
.carousel__dots { display:flex; justify-content:center; gap:15px; margin-top:24px; }
.carousel__dot { width:10px; height:10px; border-radius:50%; border:0; padding:0; cursor:pointer; background:rgba(23,23,23,.35); }
.carousel__dot[aria-current="true"] { background:var(--c-orange); }

/* ---------- SPLIT (text + image blocks) ---------- */
.split { padding-block:clamp(36px,4.5vw,72px); }
.split + .split { padding-top:0; }  /* opeenvolgende USP-rijen compact onder elkaar */
.split__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,4vw,64px); align-items:center; }
.split__media img { width:100%; object-fit:cover; }
/* Contact: deco-paar aan de paginarand, net boven het route-beeld (Figma 805:6488).
   Figma: beige y610-744, oranje y750-874, beeld start y889 -> paar eindigt 15px erboven.
   De pijlen wijzen naar rechts: gespiegeld t.o.v. de standaard hero-variant. */
[data-layout="routebeschrijving"] .split__media { position:relative; }
.route__deco { left:calc(-1 * var(--container-pad)); bottom:calc(100% + 15px); z-index:2; transform:scaleX(-1); }
.split__col { display:flex; flex-direction:column; gap:16px; align-items:flex-start; }
.split--image-left .split__media { order:-1; }
/* SEO-split met beeld dat tot de schermrand doorloopt (max 1920px) + gedraaide deco */
.split--bleed-right { position:relative; max-width:1920px; margin-inline:auto; padding-block:clamp(40px,5vw,80px); }
.split--bleed-right .split__inner { position:relative; z-index:1; }
.split--bleed-right .split__col { max-width:595px; }
.split--bleed-right .split__media { position:absolute; z-index:0; top:clamp(40px,7%,80px); bottom:clamp(40px,7%,80px); left:clamp(340px,50%,920px); right:0; overflow:hidden; }
.split--bleed-right .split__media img { width:100%; height:100%; object-fit:cover; }
.split__deco { position:absolute; z-index:2; right:0; bottom:clamp(-46px,-3.5vw,-24px); width:clamp(80px,7vw,134px); height:auto; transform:rotate(180deg); }

/* ---------- FOOTER ---------- */
/* Footer: donker vlak met subtiele deco-watermerken (Figma: 4x vector 454x454
   in #232325, getegeld vanaf x=-93 over de volledige breedte). */
.footer { position:relative; color:var(--c-white);
  background-color:var(--c-ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 134 134'%3E%3Cpath d='M134 67L67 134L67 67L0 67L67 0L134 0Z' fill='%23232325'/%3E%3C/svg%3E");
  background-repeat:repeat-x; background-position:-93px top; background-size:454px 454px; }
.footer__inner, .footer__accent { position:relative; z-index:1; }
/* Deco-pijlenpaar rechtsboven: oranje boven de footer, beige-2 erin (Figma:
   X-frames op x=1594/y=footertop-134 en x=1728/y=footertop). */
.footer__deco { top:calc(-1 * var(--dw)); right:0; z-index:3; }
/* Figma: donker vlak is 452px hoog met 118px padding boven en 117px onder. */
.footer__inner { padding-block:clamp(48px,6.83vw,118px) clamp(44px,6.77vw,117px); display:flex; flex-direction:column; gap:clamp(28px,2.4vw,42px); }
.footer__top { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer__nav { display:flex; align-items:center; gap:35px; flex-wrap:wrap; margin-left:auto; }
.footer__nav a { font-family:var(--font-body); font-weight:500; font-size:20px; line-height:30px; color:var(--c-white); }
.footer__nav a:hover { color:var(--c-orange); }
.footer__bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.footer__contact { display:flex; align-items:center; flex-wrap:wrap; gap:12px; font-family:var(--font-body); font-weight:500; font-size:20px; line-height:30px; color:var(--c-white); }
.footer__contact .sep { width:6px; height:6px; background:var(--c-orange); flex:none; }
.footer__social { color:var(--c-orange); }
/* Figma: oranje balk loopt over de volle breedte (Rectangle 43, x=0 w=1728). */
.footer__accent { display:block; height:5px; background:var(--c-orange); }

/* ============================================================
   RESPONSIVE — Tablet (<=1024px)
   ============================================================ */
@media (max-width:1024px) {
  .hero__title { font-size:44px; line-height:52px; }
  .cta__title { font-size:48px; line-height:54px; }
  .cta__block { margin-right:0; }
  .cta__inner { padding-bottom:clamp(48px,7vw,72px); }
  .cta__media { position:static; left:auto; right:auto; top:auto; bottom:auto; height:clamp(220px,40vw,360px); margin-top:8px; }
  .cta__watermark { width:70%; }
  .catalog__body { grid-template-columns:1fr; gap:40px; }
  .catalog__media { max-width:520px; }
  .catalog__label { font-size:30px; }
  .section-title { font-size:30px; }
  .usp__list { grid-template-columns:repeat(2,auto); justify-content:start; gap:22px 48px; }
  .steps__grid { grid-template-columns:1fr; }
  .step__num::after { display:none; }
  .tile-grid { grid-template-columns:repeat(2,1fr); }
  .text-2col { grid-template-columns:1fr; }
  .page-hero { padding-block:180px 56px; }
  .page-head { padding-block:180px 0; }
  .page-head__grid { grid-template-columns:1fr; }
  .cat-grid { grid-template-columns:repeat(2,1fr); }
  .logo-grid { grid-template-columns:repeat(3,1fr); }
  .info-cards { grid-template-columns:1fr; }
  .split__grid { grid-template-columns:1fr; }
  .split--bleed-right .split__col { max-width:none; }
  .split--bleed-right .split__media { position:static; left:auto; right:auto; top:auto; bottom:auto; height:clamp(240px,45vw,400px); margin-top:24px; }
  .split__deco { display:none; }
  .split--image-left .split__media { order:0; }
  .faq__list--grid { grid-template-columns:1fr; }
}

/* ============================================================
   RESPONSIVE — Mobile (<=768px)
   ============================================================ */
@media (max-width:768px) {
  .header { height:110px; }
  .logo__word { font-size:26px; }
  .nav-toggle { width:48px; height:48px; }
  .nav-menu__list { padding-inline:20px; }
  .nav-menu__foot { padding-inline:20px; }
  .nav-menu__link .icon { width:28px; height:28px; }

  .hero { min-height:560px; align-items:flex-end; }
  .hero__inner { padding-block:130px 56px; }
  .hero__title { font-size:32px; line-height:38px; margin:16px 0 26px; }
  .usp__list { grid-template-columns:1fr; }
  .hero__actions { gap:16px; }
  .hero__flag { width:90px; height:90px; }

  .section-head { flex-direction:column; align-items:flex-start; gap:8px; }
  .catalog__label { font-size:24px; }
  .catalog__item { padding:16px 0; }
  .catalog__item .icon { width:28px; height:28px; }
  .catalog__item .arrow-swap { width:28px; height:28px; }

  .cta__title { font-size:38px; line-height:44px; }
  .cta__avatar { width:96px; height:96px; }
  .cta__media { height:clamp(180px,52vw,260px); }
  .cta__text, .footer__nav a, .footer__contact, .chip { font-size:16px; }

  .projects__grid { grid-template-columns:1fr; }
  .project-card--large { grid-row:auto; }
  .project-card--large img, .project-card--small img { aspect-ratio:664/420; }

  .btn { flex:1 1 auto; }
  .footer__nav { gap:16px 22px; }
  .footer__nav a { font-size:16px; }

  .page-hero { padding-block:140px 48px; }
  .form__row { grid-template-columns:1fr; }
  .tile-grid { grid-template-columns:1fr 1fr; }
  .gallery { grid-template-columns:1fr; }
  .faq__q { font-size:20px; }
  .step__num { font-size:44px; }
  .cat-grid { grid-template-columns:1fr 1fr; }
  .logo-grid { grid-template-columns:1fr 1fr; }
  .info-card { grid-template-columns:1fr; }
  .info-card__img { aspect-ratio:3/2; }
  .promo-card__avatar { float:none; margin:0 0 16px; }
  .promo-card { padding:28px; }
  .carousel__btn { width:48px; height:48px; }
}

/* ============================================================
   MICRO-ANIMATIES  (uit Figma states; timing = nette defaults)
   Alles achter prefers-reduced-motion guard.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* Reveal on scroll/load: Default -> End (fade + slide-up) */
  .reveal { opacity:0; transform:translateY(26px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
  .reveal.is-in { opacity:1; transform:none; }

  /* Hero background: subtiele ken-burns zoom (Rectangle 14 scale 1 -> 1.06) */
  /* Hero-foto: onload inzoomen op scale(1.3) en in 0.5s terug naar 100% (parent = overflow hidden, geen layoutshift) */
  .hero__bg { transform:scale(1.3); transform-origin:center; animation: nw-hero-zoom .7s cubic-bezier(.22,.61,.36,1) forwards; }
  @keyframes nw-hero-zoom { from { transform:scale(1.3); } to { transform:scale(1); } }

  /* HERO ENTREE (uit prototype-opname): masked line-reveal + diagonale deco slide-in */
  /* Chip schuift ná de zinnen (regel 3 klaar ~1.65s) van onder naar boven in */
  .hero__inner .chip { opacity:0; animation: nw-rise .6s cubic-bezier(.22,.61,.36,1) 1.65s forwards; }
  /* Kop: elke regel veegt van links naar rechts in (mask vanaf linkerrand), relatieve delay per regel */
  .hero__title .ln { clip-path: inset(0 100% 0 0); animation: nw-line-lr .85s cubic-bezier(.33,0,.67,1) forwards; }
  .hero__title .hl:nth-child(1) .ln { animation-delay:0s; }
  .hero__title .hl:nth-child(2) .ln { animation-delay:.4s; }
  .hero__title .hl:nth-child(3) .ln { animation-delay:.8s; }
  @keyframes nw-line-lr { to { clip-path: inset(0 0 0 0); } }
  .hero__actions { opacity:0; animation: nw-rise .7s cubic-bezier(.22,.61,.36,1) .62s forwards; }
  @keyframes nw-rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:none; } }
  /* Deco-pijlen schuiven diagonaal in (Frame 5876 slide-through: rechtsboven -> rust) */
  /* Deco-pijlenpaar: de twee vormen schuiven vanuit tegengestelde richting naar
     elkaar toe en komen samen op de naad in het midden. `is-armed` wordt door JS
     gezet (zonder JS staat het paar gewoon stil op zijn plek). */
  .deco-pair__top, .deco-pair__bot {
    -webkit-mask-image:linear-gradient(#000,#000); mask-image:linear-gradient(#000,#000);
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%; mask-size:100% 100%;
    transition:-webkit-mask-size .7s cubic-bezier(.16,1,.3,1), mask-size .7s cubic-bezier(.16,1,.3,1);
  }
  /* masker groeit vanaf de buitenrand naar de naad toe */
  .deco-pair__top { -webkit-mask-position:top;    mask-position:top; }
  .deco-pair__bot { -webkit-mask-position:bottom; mask-position:bottom; }
  .deco-pair.is-armed .deco-pair__top,
  .deco-pair.is-armed .deco-pair__bot { -webkit-mask-size:100% 0%; mask-size:100% 0%; }
  .deco-pair.is-armed.is-in .deco-pair__top,
  .deco-pair.is-armed.is-in .deco-pair__bot { -webkit-mask-size:100% 100%; mask-size:100% 100%; }

  /* Deco-pijl: 45° diagonale reveal die van LINKSONDER naar RECHTSBOVEN veegt
     (in de richting waar de pijl wijst) via mask-sweep. De reveal-front is de
     hoofddiagonaal; de mask schuift van rechtsboven (100% 0%, verborgen) naar
     linksonder (0% 100%, volledig zichtbaar). Ease-out dempt uit op het eindpunt. */
  .hero__flag {
    -webkit-mask-image: linear-gradient(45deg, #000 50%, transparent 50%);
            mask-image: linear-gradient(45deg, #000 50%, transparent 50%);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-size: 200% 200%; mask-size: 200% 200%;
    -webkit-mask-position: 100% 0%; mask-position: 100% 0%;
    animation: nw-deco-diag .85s cubic-bezier(.16,1,.3,1) .7s forwards;
  }
  .hero__flag--br { animation-delay:.78s; }
  @keyframes nw-deco-diag { to { -webkit-mask-position: 0% 100%; mask-position: 0% 100%; } }

  /* Hatch: marquee scroll (Marque scroll translateX loop) */

  /* Hover: pijl ↗ schuift up-right (Button/Arrow Variant2) */


  /* Card hover zoom (Card big/small hover: image scale 1 -> 1.05) */
  .project-card img, .cat-card__media img, .catalog__media img {
    transition: transform .55s cubic-bezier(.22,.61,.36,1); }
  .project-card:hover img, .cat-card:hover .cat-card__media img { transform: scale(1.05); }

  /* Knoppen: lichte lift on hover */
  .btn { transition: opacity .2s, background .2s, transform .2s ease; }
  .btn:hover { transform: translateY(-2px); }
}

/* Projectkaart: pijl is in Figma ~17px zichtbaar (bbox 17x17) tegen 14px hier.
   Grotere box => ook een navenant dikkere streek, want de streek schaalt mee. */
.project-card .arrow-swap--sm { width:20px; height:20px; }
.project-card .arrow-swap--sm .icon { width:20px; height:20px; }

/* Pagina-kop: deco-paar aan de linker paginarand, onderaan de kop.
   Figma (over-ons 799:367): pijlen op x 0..134, ontmoetingspunt y=744. */
.page-head__pair { left:0; top:clamp(300px,35.3vw,610px); bottom:auto; z-index:2; }

/* Hamburger blijft in beeld tijdens scrollen (boven het overlay-menu). */

/* ---------- GRAVITY FORMS in Nicewall-stijl ----------
   Zelfde vormgeving als de statische .form: labels in body-font, velden zonder
   rand op lichte vulling, en de verzendknop als oranje .btn. */
.gform_wrapper { --gf-gap:24px; }
.gform_wrapper form { display:flex; flex-direction:column; gap:var(--gf-gap); }
.gform_wrapper .gform_fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--gf-gap) 40px; }
.gform_wrapper .gfield--width-full,
.gform_wrapper .gfield[class*="gfield--width-full"] { grid-column:1 / -1; }
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label { display:block; font-family:var(--font-body); font-weight:500;
  font-size:18px; line-height:27px; color:var(--c-ink); margin-bottom:8px; }
.gform_wrapper .gfield_required { color:var(--c-orange); }
.gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel],
.gform_wrapper input[type=url], .gform_wrapper input[type=number], .gform_wrapper select,
.gform_wrapper textarea {
  font-family:var(--font-body); font-weight:500; font-size:18px; color:var(--c-ink);
  background:var(--input-fill); border:0; border-radius:0; padding:12px 14px; width:100%; appearance:none; }
.gform_wrapper input[type=text], .gform_wrapper input[type=email], .gform_wrapper input[type=tel],
.gform_wrapper select { height:50px; }
.gform_wrapper textarea { min-height:186px; resize:vertical; }
.gform_wrapper .ginput_container_phone select { max-width:110px; }
.gform_wrapper .gform_footer { display:flex; justify-content:flex-start; margin:0; padding:0; }
.gform_wrapper .gform_button {
  display:inline-flex; align-items:center; justify-content:center; gap:10px; height:60px; padding:0 22px;
  font-family:var(--font-heading); font-weight:700; font-size:18px; line-height:1;
  background:var(--c-orange); color:var(--c-ink); border:0; border-radius:0; cursor:pointer;
  transition:opacity .2s; }
.gform_wrapper .gform_button:hover { opacity:.88; }
.gform_wrapper .gfield_description, .gform_wrapper .validation_message {
  font-family:var(--font-body); font-size:15px; line-height:22px; color:var(--c-orange); margin-top:6px; }
.gform_wrapper .gform_validation_errors { background:var(--c-beige-2); border:0; border-left:4px solid var(--c-orange); padding:14px 18px; }
@media (max-width:768px) { .gform_wrapper .gform_fields { grid-template-columns:1fr; } }

/* GF laadt zijn eigen stylesheet ná de thema-CSS; deze overrides winnen daarvan. */
.gform_wrapper.gravity-theme .gform_fields input[type=text],
.gform_wrapper.gravity-theme .gform_fields input[type=email],
.gform_wrapper.gravity-theme .gform_fields input[type=tel],
.gform_wrapper.gravity-theme .gform_fields input[type=url],
.gform_wrapper.gravity-theme .gform_fields input[type=number],
.gform_wrapper.gravity-theme .gform_fields select,
.gform_wrapper.gravity-theme .gform_fields textarea {
  background:var(--input-fill) !important; border:0 !important; border-radius:0 !important;
  font-family:var(--font-body) !important; font-weight:500; font-size:18px !important; color:var(--c-ink) !important;
  padding:12px 14px !important; }
.gform_wrapper.gravity-theme .gform_fields textarea { min-height:186px !important; }
.gform_wrapper.gravity-theme .gfield_label { font-family:var(--font-body) !important; font-weight:500 !important;
  font-size:18px !important; line-height:27px !important; color:var(--c-ink) !important; }
.gform_wrapper.gravity-theme .gform_footer input[type=submit],
.gform_wrapper.gravity-theme .gform_button {
  background:var(--c-orange) !important; color:var(--c-ink) !important; border:0 !important; border-radius:0 !important;
  font-family:var(--font-heading) !important; font-weight:700 !important; font-size:18px !important;
  height:60px !important; padding:0 22px !important; cursor:pointer; }
.gform_wrapper.gravity-theme .gform_footer input[type=submit]:hover { opacity:.88; }
/* Telefoonveld: landkiezer smal houden naast het nummer */
.gform_wrapper.gravity-theme .ginput_container_phone select { max-width:120px !important; }

/* GF 2.9 gebruikt het Orbital-thema (niet .gravity-theme). Deze overrides zijn
   klasse-onafhankelijk en winnen via !important, ook al laadt GF-CSS later. */
.gform_wrapper input[type=text], .gform_wrapper input[type=email],
.gform_wrapper input[type=tel],  .gform_wrapper input[type=url],
.gform_wrapper input[type=number], .gform_wrapper select, .gform_wrapper textarea {
  background-color:var(--input-fill) !important; border:0 !important; box-shadow:none !important;
  border-radius:0 !important; font-family:var(--font-body) !important; font-size:18px !important;
  color:var(--c-ink) !important; padding:12px 14px !important; }
.gform_wrapper textarea { min-height:186px !important; }
.gform_wrapper label, .gform_wrapper legend {
  font-family:var(--font-body) !important; font-weight:500 !important;
  font-size:18px !important; color:var(--c-ink) !important; }
.gform_wrapper button[type=submit], .gform_wrapper input[type=submit], .gform_wrapper .gform_button {
  background:var(--c-orange) !important; background-color:var(--c-orange) !important;
  color:var(--c-ink) !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
  font-family:var(--font-heading) !important; font-weight:700 !important; font-size:18px !important;
  height:60px !important; padding:0 22px !important; cursor:pointer !important; }
/* Orbital stuurt veel via variabelen; zet die ook goed voor consistente states. */
.gform_wrapper { --gf-color-primary:var(--c-orange); --gf-ctrl-bg-color:var(--input-fill);
  --gf-ctrl-border-color:transparent; --gf-ctrl-radius:0; --gf-ctrl-btn-radius:0;
  --gf-ctrl-btn-bg-color-primary:var(--c-orange); --gf-ctrl-btn-color-primary:var(--c-ink); }

/* Verzendknop rechts uitgelijnd, zoals in het ontwerp. */
.gform_wrapper .gform_footer { justify-content:flex-end !important; }
.gform_wrapper .gform_footer .btn { width:auto; }
.gform_wrapper .gform_footer .arrow-swap { color:var(--c-ink); }

/* Contact-kop: kolommen en uitlijning exact volgens Figma (805:6483).
   Tekstkolom 179..746, formulier 652..1546 (894 breed), velden starten op y=312
   terwijl de tekst op 225 begint -> formulier krijgt een eigen bovenmarge.
   Boven uitlijnen i.p.v. verticaal centreren. */
[data-layout="contact-head"] .page-head__grid,
[data-layout="offerte-head"] .page-head__grid {
  align-items:start;
  grid-template-columns:minmax(0,473px) minmax(0,894px);
  gap:0 3px; }
[data-layout="contact-head"] .page-head__grid > *:last-child { padding-top:87px; }
@media (max-width:1024px) {
  [data-layout="contact-head"] .page-head__grid,
  [data-layout="offerte-head"] .page-head__grid { grid-template-columns:1fr; gap:32px; }
  [data-layout="contact-head"] .page-head__grid > *:last-child { padding-top:0; }
}

/* Figma: 42px tussen de twee formulierkolommen (velden 427/426 breed). */
.gform_wrapper .gform_fields { gap:24px 42px !important; }

/* GF's reset nivelleert svg-afmetingen; pijl in de verzendknop expliciet terugzetten. */
.gform_wrapper .gform_footer .btn { display:inline-flex !important; align-items:center !important;
  justify-content:center !important; gap:10px !important; }
.gform_wrapper .gform_footer .arrow-swap { display:inline-block !important; position:relative !important;
  width:16px !important; height:16px !important; flex:none !important; overflow:hidden !important;
  color:var(--c-ink) !important; }
.gform_wrapper .gform_footer .arrow-swap .icon { display:block !important; position:absolute !important;
  left:0 !important; top:0 !important; width:16px !important; height:16px !important; max-width:none !important; }
/* Contact: tekstkolom-breedte volgens Figma (tekstblok 429px, frame 567px). */
[data-layout="contact-head"] .page-head__text { max-width:429px; }
[data-layout="contact-head"] .page-head__col .prose { max-width:429px; }

/* Offerte: formulier begint in Figma op y=380 tegen y=312 bij ons (805:7346). */
[data-layout="offerte-head"] .page-head__grid > *:last-child { padding-top:68px; }