/* Exvanda — prototypesysteem "De Showroom".
   Zelfde huisstijl (warm zwart, crème, koper), nieuwe rustige opbouw:
   grote fotografie, één primaire actie en veel witruimte.
   Alle maten en kleuren staan als token bovenaan. */

:root{
  --bg:#0b0a09;
  --surface:#141110;
  --surface2:#1c1817;
  --paper:#f4efe9;
  --paper-soft:#ece4da;
  --text:#f7f2ed;
  --muted:#c3b9b1;
  --dark:#171312;
  --darkmuted:#5f5852;
  --copper:#b87343;
  --copper2:#d19a70;
  --copper-ink:#8f5426;
  --copper-deep:#8d5326;
  --whatsapp:#25d366;
  --line:#2e2826;
  --line-soft:rgba(255,255,255,.10);
  --line-control:#6b6360;

  --field:#2b2522;
  --field-line:#938881;
  --field-line-hover:#b0a39b;
  --field-placeholder:#a89e97;

  --max:1240px;
  --radius:2px;
  --shadow:0 30px 80px rgba(0,0,0,.45);
  --font-serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --focus:var(--copper2);
}
.light{--focus:var(--copper-ink)}

*{box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth;scroll-padding-top:96px}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16.5px/1.72 var(--font-sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
picture{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{font-family:var(--font-serif);font-weight:400;line-height:1.08;margin:0 0 18px;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(40px,5.2vw,74px);line-height:1.01;letter-spacing:-.03em;margin-bottom:18px}
h2{font-size:clamp(30px,3.5vw,48px);line-height:1.06;letter-spacing:-.024em}
h3{font-size:clamp(20px,1.7vw,24px);line-height:1.22;letter-spacing:-.012em}
p{margin:0 0 18px;color:var(--muted);max-width:66ch;text-wrap:pretty}
p:last-child{margin-bottom:0}

.container{width:min(var(--max),92%);margin-inline:auto}
section{padding:clamp(64px,7.5vw,112px) 0}
.light{background:var(--paper);color:var(--dark)}
.light h1,.light h2,.light h3{color:var(--dark)}
.light p{color:var(--darkmuted)}
.light + .light{border-top:1px solid rgba(23,19,18,.12)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:16px;top:-64px;z-index:120;background:var(--copper);color:var(--bg);padding:14px 22px;font-weight:700;border-radius:0 0 var(--radius) var(--radius);transition:top .2s}
.skip-link:focus{top:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:1px}

.eyebrow{color:var(--copper2);text-transform:uppercase;letter-spacing:.22em;font-size:11.5px;font-weight:700;margin:0 0 18px;font-family:var(--font-sans)}
.light .eyebrow{color:var(--copper-ink)}

.section-head{max-width:680px;margin-bottom:clamp(34px,4.5vw,58px)}
.section-head p{font-size:17px}
.section-head--sm{max-width:560px}

/* Knoppen: koper met donkere tekst (5,3:1). Eén primaire actie per pagina. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 28px;border:1px solid transparent;border-radius:var(--radius);
  font:700 15px/1 var(--font-sans);letter-spacing:.005em;cursor:pointer;touch-action:manipulation;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .18s ease}
.btn-primary{background:var(--copper);color:var(--bg)}
.btn-primary:hover{background:#ca8554}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{border-color:rgba(244,239,233,.42);background:rgba(11,10,9,.28);color:var(--text)}
.btn-ghost:hover{border-color:var(--paper);background:rgba(11,10,9,.55)}
.btn-ghost:active{transform:translateY(1px)}
.btn-whatsapp{background:var(--whatsapp);color:var(--bg);border-color:var(--whatsapp)}
.btn-whatsapp:hover{background:#3ee07c;border-color:#3ee07c}
.btn-whatsapp:active{transform:translateY(1px)}
.btn-whatsapp svg{width:19px;height:19px;flex:none;fill:currentColor}

/* ------------------------------------------------------------------ header */

.site-header{position:sticky;top:0;z-index:60;background:var(--bg);border-bottom:1px solid var(--line)}
.nav{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:block;flex:none}
/* Het logo heeft een zwarte achtergrond; screen laat dat wegvallen. */
.brand img{width:196px;height:auto;mix-blend-mode:screen}
.navlinks{display:flex;align-items:center;gap:27px;font-size:14px;font-weight:600;letter-spacing:.01em}
.navlinks a{position:relative;padding:7px 0;color:#e8dfd8;white-space:nowrap}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--copper2);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.navlinks a:hover{color:var(--copper2)}
.navlinks a:hover::after{transform:scaleX(1)}
.navlinks a[aria-current="page"]{color:var(--copper2)}
.navlinks a[aria-current="page"]::after{transform:scaleX(1)}

.header-actions{display:flex;align-items:center;gap:12px;flex:none}
.header-actions .btn{min-height:46px;padding:0 21px;font-size:14px;border-radius:999px}
.header-actions .header-whatsapp svg{width:20px;height:20px}

.nav-menu{display:none;position:relative}
.nav-menu>summary{list-style:none;cursor:pointer;touch-action:manipulation;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line-control);border-radius:var(--radius);transition:border-color .2s}
.nav-menu>summary::-webkit-details-marker{display:none}
.nav-menu>summary:hover{border-color:var(--copper2)}
.nav-bars,.nav-bars::before,.nav-bars::after{display:block;width:20px;height:2px;background:#f2e9e2;transition:transform .22s ease,background-color .22s ease}
.nav-bars{position:relative}
.nav-bars::before,.nav-bars::after{content:"";position:absolute;left:0}
.nav-bars::before{top:-6px}
.nav-bars::after{top:6px}
.nav-menu[open] .nav-bars{background:transparent}
.nav-menu[open] .nav-bars::before{transform:translateY(6px) rotate(45deg)}
.nav-menu[open] .nav-bars::after{transform:translateY(-6px) rotate(-45deg)}
.nav-menu-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(340px,calc(100vw - 28px));background:var(--surface);border:1px solid var(--line-control);box-shadow:var(--shadow);padding:10px 22px 22px;max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}
.nav-menu-panel nav{display:grid}
.nav-menu-panel nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;font-weight:600}
.nav-menu-panel nav a:hover,.nav-menu-panel nav a[aria-current="page"]{color:var(--copper2)}
.nav-menu-panel .btn{width:100%;margin-top:14px}

/* -------------------------------------------------------------------- hero */

/* Eén beeld, één boodschap. Geen kaart over de foto: alleen een sterke
   gradient onderin, zodat de veranda het eerste is dat u ziet. */
.hero{position:relative;isolation:isolate;padding:0;min-height:min(88svh,780px);display:flex;align-items:flex-end;overflow:hidden;background:#0d0c0b}
@supports not (min-height:100svh){.hero{min-height:min(88vh,780px)}}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,10,9,.58) 0%,rgba(11,10,9,.10) 24%,rgba(11,10,9,0) 44%),
    linear-gradient(8deg,rgba(11,10,9,.82) 0%,rgba(11,10,9,.50) 30%,rgba(11,10,9,.08) 68%,rgba(11,10,9,0) 100%)}
.hero-inner{position:relative;z-index:2;width:100%;padding:clamp(40px,6vw,76px) 0 clamp(38px,5.5vw,66px)}
.hero-copy{max-width:820px}
.hero h1{color:var(--text);max-width:16ch;margin-bottom:20px}
.hero-sub{font-size:clamp(16.5px,1.3vw,19px);line-height:1.62;max-width:52ch;color:#e7ddd4;margin-bottom:0}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:28px}
.hero-note{margin:22px 0 0;font-size:13px;line-height:1.55;letter-spacing:.02em;color:var(--copper2)}
.hero-note span{color:#cfc3b8}
.hero-facts{list-style:none;margin:26px 0 0;padding:0;display:flex;gap:34px;flex-wrap:wrap}
.hero-facts li{display:flex;flex-direction:column;gap:1px;padding-left:14px;border-left:1px solid rgba(209,154,112,.55)}
.hero-facts strong{font-family:var(--font-serif);font-size:23px;font-weight:400;line-height:1.1;color:var(--text)}
.hero-facts span{font-size:13px;line-height:1.35;color:var(--muted)}

/* Bestaande heroopbouw: één foto met een compact tekstvlak linksonder.
   De fotografie blijft leidend, het vlak is rustiger en heeft minder rand. */
.hero-panel{max-width:640px;padding:30px 32px 32px;border:1px solid rgba(209,154,112,.24);border-radius:var(--radius);background:rgba(11,10,9,.92);box-shadow:0 30px 80px rgba(0,0,0,.52)}
@supports (backdrop-filter:blur(8px)){
  .hero-panel{background:rgba(11,10,9,.85);backdrop-filter:blur(12px) saturate(1.1)}
}
.hero-panel h1{font-size:clamp(36px,3.7vw,52px);line-height:1.06;letter-spacing:-.026em;max-width:none}
.hero-panel h1 span{color:var(--copper2)}
.hero-panel .hero-sub{font-size:17px;line-height:1.62;max-width:52ch;margin-bottom:0}
.hero-panel .hero-facts{margin-top:22px}
.hero-panel .hero-actions{margin-top:24px}

/* --------------------------------------------------------------- vertrouwen */

.trust-strip{padding:0;border-bottom:1px solid var(--line)}
.trust-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.trust-list li{padding:28px 34px 30px;border-left:1px solid var(--line)}
.trust-list li:first-child{padding-left:0;border-left:0}
.trust-list li:last-child{padding-right:0}
.trust-kop{display:block;font-family:var(--font-serif);font-size:21px;line-height:1.2;color:var(--text);margin-bottom:5px}
.trust-list p{margin:0;font-size:14px;line-height:1.55;color:var(--muted);max-width:34ch}

/* --------------------------------------------------------------- showroom */

.showroom-band{padding:clamp(72px,8vw,118px) 0}
.showroom-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(34px,5vw,78px);align-items:center}
.showroom-figure{margin:0;position:relative}
.showroom-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 55%}
.showroom-copy h2{max-width:14ch}
.showroom-copy > p{max-width:46ch}
.showroom-details{margin:26px 0 0;padding:18px 0 0;border-top:1px solid rgba(23,19,18,.18);display:grid;grid-template-columns:1fr auto;gap:7px 20px;font-size:14.5px}
.showroom-details dt{color:var(--darkmuted)}
.showroom-details dd{margin:0;color:var(--dark);font-variant-numeric:tabular-nums}
.showroom-copy .btn{margin-top:26px}
.showroom-copy .showroom-noot{margin-top:14px;font-size:13.5px;color:var(--darkmuted);max-width:46ch}
.showroom-details--dark{border-top-color:var(--line)}
.showroom-details--dark dt{color:var(--muted)}
.showroom-details--dark dd{color:var(--text)}
.showroom-details--dark a{color:var(--copper2)}

/* --------------------------------------------------------------- werkwijze */

.steps-section{padding:clamp(64px,7.5vw,110px) 0}
.steps-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:clamp(30px,4vw,48px)}
.steps-head .section-head{margin-bottom:0}
.steps-head .link-more{flex:none;margin-bottom:6px}
.steps-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.steps-grid:focus-visible{outline:2px solid var(--copper2);outline-offset:6px}
.step-card{display:flex;flex-direction:column;min-width:0}
.step-card figure{margin:0;overflow:hidden;background:#0f0d0c}
.step-card img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.step-card:hover img{transform:scale(1.025)}
.step-card-body{padding:22px 0 0;display:flex;flex-direction:column;gap:4px}
.step-card-num{font:700 11.5px/1 var(--font-mono);letter-spacing:.18em;color:var(--copper2)}
.step-card h3{margin:0;font-size:23px;color:var(--text)}
.step-card p{margin:3px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ----------------------------------------------------------------- bewijs */

.proof-section{padding:clamp(72px,8vw,120px) 0}
.proof-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,80px);align-items:center}
.proof-figure{margin:0}
.proof-figure img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 58%}
.proof-copy h2{max-width:13ch}
.proof-copy > p{max-width:48ch}
.proof-copy .link-more{margin-top:6px}
.review{position:relative;margin:32px 0 0;padding:28px 30px 30px;background:var(--paper-soft);border-left:2px solid var(--copper)}
.review-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.review-logo{flex:none;width:26px;height:26px;display:grid;place-items:center;background:#fff;border-radius:50%}
.review-logo svg{width:16px;height:16px;display:block}
.review-bron{font:700 10.5px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--darkmuted)}
.review-auteur{font-size:13.5px;font-weight:700;color:var(--copper-ink)}
.review-auteur::before{content:"·";margin-right:8px;color:#9b918a}
.review blockquote{margin:0}
.review blockquote p{margin:0;font-family:var(--font-serif);font-size:clamp(19px,1.7vw,23px);line-height:1.5;color:var(--dark);max-width:46ch}

/* --------------------------------------------------------- exalto / vakmanschap */

/* Compacte Exalto-sectie: klein logo, korte uitleg en de reviews eronder. */
.exalto-section{padding:clamp(52px,5.5vw,78px) 0}
.exalto-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(34px,5vw,78px);align-items:center}
.exalto-grid--logo{grid-template-columns:minmax(0,.36fr) minmax(0,1.64fr);gap:clamp(26px,4vw,56px)}
.exalto-logo{display:flex;align-items:center;justify-content:flex-start}
.exalto-logo img{width:min(180px,100%);height:auto}
.exalto-hero-logo{margin:0 0 26px}
.exalto-hero-logo img{width:min(220px,52%);height:auto}

/* Google-reviewkaarten Exalto Houtbouw: 3 desktop, 2 tablet, 1 mobiel.
   Zonder onbevestigde scores of datums en zonder externe carrouselbibliotheek. */
.reviews-section .section-head{max-width:720px}
.reviews-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.review-carousel{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);--review-gap:20px}
.review-carousel--compact{max-width:none;margin-top:36px}
.reviews-section .review-carousel{max-width:none}
.review-carousel-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.review-source{display:flex;align-items:center;gap:12px;min-width:0}
.review-google-logo{display:inline-flex;align-items:center;justify-content:center;flex:none}
.review-google-logo svg{width:23px;height:23px;display:block}
.review-source-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.review-carousel-label{margin:0;font:700 12px/1.25 var(--font-sans);color:var(--text);letter-spacing:.02em}
.review-source-copy>span{font-size:12px;line-height:1.4;color:var(--muted)}
.review-carousel-head-actions{display:flex;align-items:center;gap:20px;flex:none}
.review-google-link{font-size:13px;font-weight:700;color:var(--copper2);white-space:nowrap}
.review-google-link:hover{text-decoration:underline}
.review-carousel-controls{display:flex;gap:8px;flex:none}
.carousel-btn{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-control);border-radius:50%;background:transparent;color:var(--text);cursor:pointer;touch-action:manipulation;transition:border-color .2s ease,color .2s ease,opacity .2s ease}
.carousel-btn:hover:not(:disabled){border-color:var(--copper2);color:var(--copper2)}
.carousel-btn:disabled{opacity:.32;cursor:default}
.carousel-btn:focus-visible{outline:2px solid var(--copper2);outline-offset:3px}
.carousel-arrow{display:block;width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor}
.carousel-arrow--prev{transform:rotate(-135deg)}
.carousel-arrow--next{transform:rotate(45deg)}
.review-carousel-viewport{min-width:0}
.review-carousel-track{display:flex;align-items:stretch;gap:var(--review-gap);margin:0;padding:0 0 8px;list-style:none;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.review-carousel-track::-webkit-scrollbar{display:none}
.review-carousel-track:focus-visible{outline:2px solid var(--copper2);outline-offset:4px}
.review-slide{flex:0 0 calc((100% - 2 * var(--review-gap))/3);min-width:0;scroll-snap-align:start;display:flex}
.review-card{width:100%;min-height:250px;margin:0;padding:24px 24px 20px;display:flex;flex-direction:column;background:#fbf8f5;border:1px solid rgba(23,19,18,.14);border-radius:var(--radius)}
.review-card-brand{display:flex;align-items:center;gap:7px;margin-bottom:14px;color:#555;font:700 12px/1 var(--font-sans)}
.review-card-brand .review-google-logo svg{width:17px;height:17px}
.review-card blockquote{margin:0;flex:1}
.review-card blockquote p{margin:0 0 12px;font-family:var(--font-serif);font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--dark);max-width:none}
.review-card blockquote p:last-child{margin-bottom:0}
.review-card figcaption{margin-top:20px;padding-top:16px;border-top:1px solid rgba(23,19,18,.12);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:700;letter-spacing:.01em;color:var(--copper-ink)}
.review-google-mark svg{width:19px;height:19px;display:block}
.review-expand{margin-top:10px}
.review-expand summary{cursor:pointer;color:var(--copper-ink);font-size:13px;font-weight:700;list-style-position:inside}
.review-expand summary:hover{text-decoration:underline}
.review-expand .review-extra{padding:14px 0 2px}
.review-carousel-status{max-width:none;width:100%;margin:12px 0 0;font:700 11px/1.2 var(--font-mono);letter-spacing:.10em;color:var(--muted);text-align:right}
.light .review-carousel{border-top-color:rgba(23,19,18,.16)}
.light .review-carousel-label{color:var(--dark)}
.light .review-source-copy>span{color:var(--darkmuted)}
.light .review-google-link{color:var(--copper-ink)}
.light .carousel-btn{border-color:rgba(23,19,18,.24);color:var(--dark)}
.light .carousel-btn:hover:not(:disabled){border-color:var(--copper-ink);color:var(--copper-ink)}
.light .review-carousel-status{color:var(--darkmuted)}
@media(max-width:1000px){
  .review-slide{flex-basis:calc((100% - var(--review-gap))/2)}
}
@media(max-width:700px){
  .review-slide{flex-basis:100%}
  .review-carousel-head{align-items:flex-start;gap:12px}
  .review-carousel-head-actions{gap:10px}
  .review-google-link{font-size:12px}
}
@media(max-width:560px){
  .review-carousel{margin-top:26px;padding-top:20px}
  .review-carousel-head{flex-wrap:wrap}
  .review-carousel-head-actions{width:100%;justify-content:space-between}
  .review-card{padding:22px;min-height:220px}
}
@media(prefers-reduced-motion:reduce){.review-carousel-track{scroll-behavior:auto}}
.exalto-figure{margin:0}
.exalto-figure img{width:100%;aspect-ratio:4/3;object-fit:cover}
.exalto-copy .eyebrow{margin-bottom:12px}
.exalto-copy h2{max-width:20ch;font-size:clamp(26px,2.7vw,38px);margin-bottom:14px}
.exalto-copy p{max-width:58ch;margin-bottom:0}
.exalto-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:18px}
.exalto-links .link-more{margin-top:0}
.review-carousel--compact{margin-top:28px;padding-top:22px}

/* --------------------------------------------------------------------- faq */

.faq-wrap{width:min(900px,92%)}
.faq-list{border-top:1px solid var(--line-soft)}
.faq-list details{border-bottom:1px solid var(--line-soft)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:18px;padding:22px 0;
  font-family:var(--font-serif);font-size:clamp(18px,1.6vw,20px);line-height:1.35;color:var(--text);transition:color .2s}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:hover{color:var(--copper2)}
.faq-list summary::after{content:"";flex:none;width:9px;height:9px;margin:8px 5px 0 auto;border-right:1.5px solid var(--copper2);border-bottom:1.5px solid var(--copper2);transform:rotate(45deg);transition:transform .25s ease}
.faq-list details[open] summary::after{transform:rotate(-135deg)}
.faq-list details p{margin:0 0 24px;max-width:72ch;font-size:16px}
.faq-list a{color:var(--copper2);text-decoration:underline;text-underline-offset:3px}
.faq-list a:hover{color:var(--text)}
.faq-cta{margin-top:34px;display:flex;align-items:center;gap:16px 26px;flex-wrap:wrap}
.faq-cta p{margin:0;font-size:15px}

.light .faq-list{border-top-color:rgba(23,19,18,.16)}
.light .faq-list details{border-bottom-color:rgba(23,19,18,.16)}
.light .faq-list summary{color:var(--dark)}
.light .faq-list summary:hover{color:var(--copper-ink)}
.light .faq-list summary::after{border-right-color:var(--copper-ink);border-bottom-color:var(--copper-ink)}
.light .faq-list a{color:var(--copper-ink)}
.light .faq-list a:hover{color:var(--dark)}

/* ----------------------------------------------------------------- contact */

.contact-section{padding:clamp(48px,6vw,82px) 0;background:linear-gradient(170deg,#151210 0%,var(--bg) 62%)}
.contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,4.5vw,64px);align-items:start}
.contact-grid .contact-aside{order:1}
.contact-grid .contact-form-col{order:2}
.contact-form-col h2{max-width:16ch}
.contact-form-col > p{max-width:48ch}
.contact-form{display:grid;gap:14px;margin-top:24px}
.form-row{display:grid;gap:6px}
.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:17px}
.contact-form label{font-size:13.5px;font-weight:600;color:#ded4cc}
.req{color:var(--copper2)}
.opt{color:var(--muted);font-weight:400}
input,textarea{width:100%;background:var(--field);border:1px solid var(--field-line);color:var(--text);padding:15px 16px;border-radius:var(--radius);
  font:inherit;font-size:15.5px;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
input::placeholder,textarea::placeholder{color:var(--field-placeholder)}
input:hover,textarea:hover{border-color:var(--field-line-hover)}
input:focus,textarea:focus{outline:none;border-color:var(--copper);background:#2c2625;box-shadow:0 0 0 3px rgba(209,154,112,.18)}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--copper2);outline-offset:2px}
input:user-invalid,textarea:user-invalid{border-color:#a85c52}
textarea{min-height:104px;resize:vertical}
.form-note{font-size:12.5px;color:#9b918a;margin:0}
.form-note--verder{margin-top:18px;font-size:13.5px;color:var(--muted)}
.form-note--verder a{color:var(--copper2);text-decoration:underline;text-underline-offset:3px}
.contact-form .btn{justify-self:start;min-width:240px;margin-top:4px}
.hp-field{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.contact-aside{display:grid;gap:16px;align-content:start}
.aside-title{font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--copper2);margin:0 0 2px}
.contact-lines{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.contact-lines a{display:flex;align-items:center;gap:14px;padding:15px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  transition:border-color .22s ease,background-color .22s ease}
.contact-lines a:hover{border-color:rgba(209,154,112,.45);background:var(--surface2)}
.contact-lines small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}
.contact-ico{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(209,154,112,.3);border-radius:50%}
.contact-ico svg{width:18px;height:18px;fill:none;stroke:var(--copper2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.contact-ico--wa{background:var(--whatsapp);border-color:var(--whatsapp)}
.contact-ico--wa svg{fill:var(--bg);stroke:none}

/* Contactpagina: formulier direct in beeld, teamfoto en contactmogelijkheden ernaast.
   Scope apart houden van het contactformulier op de homepage. */
.contact-page{padding:clamp(32px,4vw,58px) 0 clamp(58px,6vw,90px)}
.contact-page-layout{display:grid;grid-template-columns:minmax(0,1.13fr) minmax(0,.87fr);align-items:start;gap:clamp(30px,4.5vw,76px)}
.contact-page-form .eyebrow{margin-bottom:14px}
.contact-page-form h1{font-size:clamp(38px,4.2vw,58px);line-height:1.08;max-width:15ch;margin:0 0 16px}
.contact-page-form .contact-page-intro{font-size:clamp(16px,1.25vw,18px);line-height:1.65;max-width:52ch;margin:0}
.contact-page-form .contact-form{margin-top:24px}
.contact-page-aside{min-width:0;gap:15px}
.contact-page-photo{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.contact-page-photo img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 45%}
.contact-page-caption{font-size:14px;line-height:1.5;color:var(--muted);margin:0 0 14px}
.contact-page-aside .showroom-card{margin-top:13px}
@media(max-width:900px){
  .contact-page-layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .contact-page-form{max-width:760px}
  .contact-page-aside{max-width:760px}
}
@media(max-width:560px){
  .contact-page{padding:26px 0 54px}
  .contact-page-form h1{font-size:clamp(34px,9vw,43px)}
  .contact-page-form .contact-form{margin-top:22px}
  .contact-page-aside{gap:14px}
}


.showroom-card{padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.showroom-card .eyebrow{font-size:10.5px;margin-bottom:12px}
.showroom-card h3{font-size:21px;margin-bottom:8px;color:var(--text)}
.showroom-card p{font-size:14.5px;color:var(--muted)}
.showroom-card address{font-style:normal;font-size:15px;line-height:1.55;color:var(--text)}
.showroom-hours{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px}
.showroom-hours dt{color:var(--muted)}
.showroom-hours dd{margin:0;color:var(--text);font-variant-numeric:tabular-nums}
.showroom-noot{margin:16px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}

/* ----------------------- compacte, gekleurde socialiconen in de footer */

/* Transparant: Exvanda's zwarte achtergrond blijft zichtbaar.
   Klikdoelen bewust ruimer dan de logo's voor gebruik op mobiel. */
.footer-social-links{display:flex;align-items:center;gap:7px;margin:8px 0 2px}
.footer-social-links a{display:grid;place-items:center;width:40px;height:40px;flex:none;border:0;border-radius:5px;background:transparent;color:#fff;transition:transform .18s ease,filter .18s ease}
.footer-social-links svg{display:block;width:29px;height:29px;overflow:visible}
.footer-social-links a:hover{transform:translateY(-2px);filter:brightness(1.16)}
.footer-social-links a:focus-visible{outline:2px solid var(--copper2);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.footer-social-links a{transition:none}.footer-social-links a:hover{transform:none}}

/* ------------------------------------------------------------------ footer */

footer{padding:clamp(24px,3vw,34px) 0 18px;background:#080706;border-top:1px solid var(--line);line-height:1.45}
.footer-inner{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.9fr) minmax(0,1fr);column-gap:clamp(24px,4vw,64px);row-gap:0;align-items:start}
.footer-brand{display:inline-block}
.footer-logo{width:185px;height:auto;mix-blend-mode:screen}
.footer-tag{margin:12px 0 0;font-size:13.5px;color:var(--muted);max-width:33ch;line-height:1.55}
.footer-moeder{margin:8px 0 0;font-size:13px;color:#9b918a;line-height:1.55}
.footer-moeder a{color:#c9beb5;text-decoration:underline;text-underline-offset:3px}
.footer-moeder a:hover{color:var(--copper2)}
.footer-kop{margin:0 0 10px;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.09em;color:#e3d5ca}
.footer-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.footer-nav a{font-size:13.5px;color:#bdb4ac}
.footer-nav a:hover{color:var(--copper2);text-decoration:underline;text-underline-offset:3px}
.footer-contact-place{font-size:13.5px;line-height:1.55;color:#bdb4ac;margin:0}
.footer-contact p:last-child{margin:14px 0 0;font-size:13.5px;line-height:1.85}
.footer-contact a:hover{color:var(--copper2)}
.footer-bottom{grid-column:1/-1;display:flex;align-items:baseline;justify-content:flex-start;gap:6px 9px;flex-wrap:wrap;margin-top:22px;padding-top:12px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:#a99f97}
.footer-bottom nav{display:flex;align-items:baseline;gap:5px 14px;flex-wrap:wrap}
.footer-bottom nav > *{white-space:nowrap}
.footer-bottom a,.footer-bottom button{color:#c9beb5;text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover,.footer-bottom button:hover{color:var(--copper2)}
.cookie-settings{padding:0;border:0;background:transparent;font:inherit;cursor:pointer;text-align:left}
.cookie-settings:focus-visible{outline:2px solid var(--copper2);outline-offset:3px}

/* ------------------------------------------------------- pagina's en secties */

.page-hero{position:relative;isolation:isolate;padding:clamp(56px,7vw,104px) 0 clamp(44px,5vw,76px);background:linear-gradient(180deg,#131110,var(--bg) 92%);border-bottom:1px solid var(--line);overflow:hidden}
.page-hero .container{position:relative;z-index:2}
.page-hero h1{max-width:20ch;font-size:clamp(38px,4.8vw,64px)}
.page-hero-sub{font-size:clamp(16.5px,1.35vw,19px);line-height:1.65;max-width:66ch;color:var(--muted)}
.page-hero--beeld{min-height:clamp(360px,42vw,520px);display:flex;align-items:flex-end}
.page-hero-media{position:absolute;inset:0;z-index:0}
.page-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.page-hero--beeld::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(8deg,rgba(11,10,9,.92) 0%,rgba(11,10,9,.62) 42%,rgba(11,10,9,.20) 78%,rgba(11,10,9,.38) 100%)}
.kruimelpad{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);margin-bottom:24px;flex-wrap:wrap}
.kruimelpad a{color:var(--copper2)}
.kruimelpad a:hover{text-decoration:underline;text-underline-offset:3px}

/* Tekstlink met pijl. */
.link-more{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-weight:700;font-size:14.5px;color:var(--copper2);transition:gap .2s ease,color .2s ease}
.light .link-more{color:var(--copper-ink)}
.link-more::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg) translateY(-2px);transition:transform .2s ease}
.link-more:hover{gap:12px}
.link-more:hover::after{transform:rotate(-45deg) translateY(-2px) translateX(2px)}

/* Tweekoloms tekst/beeld, zoals op de bestaande onderliggende pagina's. */
.split{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(34px,5vw,80px);align-items:center}
.split-photo{margin:0}
.split-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.split-photo--portret{max-width:430px;margin-inline:auto}
.split-photo--portret img{aspect-ratio:3/4;object-position:center 18%}
.split--omgekeerd .split-photo{order:-1}

/* Beeldkader voor foto's met verschillende verhoudingen. */
.beeldkader{margin:0;position:relative;aspect-ratio:1/1;overflow:hidden;background:#0f0d0c;border:1px solid var(--line);border-radius:var(--radius)}
.beeldkader--staand{aspect-ratio:4/5}
.beeldkader img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* De procesfoto's hebben verschillende verhoudingen. Contain voorkomt dat er
   een stuk van de kraan of veranda wordt weggesneden; de ruimte eromheen valt
   in de donkere achtergrond van het kader. */
.beeldkader--staand img{object-fit:contain}
.light .beeldkader{background:#e9e1d8;border-color:rgba(23,19,18,.14)}

/* Kaarten op bestaande pagina's: rustiger, zonder til-effect. */
.fotokaarten{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.fotokaart{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.fotokaart .beeldkader{border:0;border-bottom:1px solid var(--line);border-radius:0}
.fotokaart-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.fotokaart-body h3{font-size:21px;margin-bottom:8px;color:var(--text)}
.fotokaart-body p{margin:0;font-size:15px;color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.step{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.step-photo{aspect-ratio:3/2;background:#0f0d0c;overflow:hidden}
.step-photo img{width:100%;height:100%;object-fit:cover}
.step-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.step-num,.stap-eyebrow,.voordeel-num{display:block;font:700 11.5px/1 var(--font-mono);letter-spacing:.18em;color:var(--copper2);margin-bottom:12px}
.light .stap-eyebrow{color:var(--copper-ink)}
.step-body h3{margin-bottom:9px;color:var(--text)}
.step-body p{font-size:15px;margin:0;color:var(--muted)}

.voordelen{padding:clamp(42px,5vw,64px) 0;border-bottom:1px solid var(--line)}
.voordelen-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.voordelen-list li{padding:0 34px;border-left:1px solid var(--line)}
.voordelen-list li:first-child{padding-left:0;border-left:0}
.voordelen-list li:last-child{padding-right:0}
.voordelen-list h2{font-size:21px;margin-bottom:8px}
.voordelen-list p{font-size:15px;margin:0}

.pluspunten{list-style:none;margin:clamp(34px,4vw,52px) 0 0;padding:clamp(26px,3vw,36px) 0 0;
  border-top:1px solid rgba(23,19,18,.16);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.pluspunten li{padding-left:16px;border-left:2px solid var(--copper)}
.pluspunten h3{font-size:18px;margin-bottom:6px;line-height:1.25}
.pluspunten p{margin:0;font-size:15px;color:var(--darkmuted)}

.sectie-actie{margin-top:clamp(28px,3.5vw,40px);display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.sectie-actie .link-more{margin-top:0}

.punten{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.punten--twee{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.punt{padding-top:18px;border-top:2px solid var(--copper)}
.punt h3{font-size:19px;margin-bottom:8px;line-height:1.25}
.punt p{margin:0;font-size:15px;color:var(--darkmuted)}
section:not(.light) .punt p{color:var(--muted)}
.punt ul{margin:10px 0 0;padding-left:18px;display:grid;gap:6px;font-size:15px}
section:not(.light) .punt ul{color:var(--muted)}
.light .punt ul{color:var(--darkmuted)}

.opties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.optie{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.optie img{width:100%;aspect-ratio:3/2;object-fit:cover}
.optie-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.optie-body h3{font-size:22px;margin-bottom:8px;color:var(--text)}
.optie-body p{margin:0;font-size:15px;color:var(--muted)}
.optie--tekst .optie-body{padding-top:26px}

.plaatsen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 34px;margin:0;padding:0;list-style:none}
.plaatsen li{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.plaatsen strong{color:var(--text);font-weight:700;white-space:nowrap}
.plaatsen span{color:var(--muted)}
.light .plaatsen li{border-bottom-color:rgba(23,19,18,.14)}
.light .plaatsen strong{color:var(--dark)}
.light .plaatsen span{color:var(--darkmuted)}

.bezoek{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.bezoek-kaart{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text)}
.bezoek-kaart h3{font-size:20px;margin-bottom:10px;color:var(--text)}
.bezoek-kaart address{font-style:normal;font-size:16px;line-height:1.6;color:var(--text)}
.bezoek-kaart p{margin:0 0 14px;font-size:15px;color:var(--muted)}
.bezoek-kaart a:not(.btn){color:var(--copper2)}
.bezoek-kaart > *:last-child{margin-bottom:0}

.lijst{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px}
.lijst li{position:relative;padding-left:22px;font-size:16px;line-height:1.6}
.lijst li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1.5px;background:var(--copper)}
section:not(.light) .lijst li{color:var(--muted)}
.light .lijst li{color:var(--darkmuted)}
.lijst strong{color:var(--text);font-weight:700}
.light .lijst strong{color:var(--dark)}

.doorlooptijd{margin:clamp(26px,3vw,36px) 0 0;padding-top:20px;border-top:1px solid var(--line);
  max-width:70ch;font-size:15px;color:var(--muted)}
.doorlooptijd strong{color:var(--text)}
.persoon-rol{margin:-8px 0 16px;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--copper-ink)}
section:not(.light) .persoon-rol{color:var(--copper2)}

.projecten-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
/* Eén project: een liggende kaart, zodat de titel en de link meteen naast de
   foto staan. Komt er een tweede project bij, dan geldt weer het tweekoloms
   raster hierboven. */
.projecten-grid--een{grid-template-columns:1fr;max-width:1080px;margin-inline:auto}
.projecten-grid--een .project-kaart{display:grid;grid-template-columns:minmax(0,.70fr) minmax(0,1.30fr);align-items:stretch}
.projecten-grid--een .beeldkader{aspect-ratio:auto;height:340px;min-height:0;border:0;border-right:1px solid var(--line);border-radius:0}
.projecten-grid--een .project-kaart-body{justify-content:center;padding:clamp(20px,2.6vw,32px)}
.projecten-grid--een .project-kaart .link-more{margin-top:0;padding-top:4px}
.project-kaart{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .25s ease}
a.project-kaart:hover{border-color:rgba(209,154,112,.45)}
.project-kaart .beeldkader{border:0;border-bottom:1px solid var(--line);border-radius:0}
.project-kaart-body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1}
.project-kaart p{margin:0;font-size:15px;color:var(--muted)}
.project-kaart .project-kaart-label{font:700 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--copper2);margin-bottom:12px}
.project-kaart h2{font-size:clamp(21px,2.2vw,27px);margin-bottom:10px;color:var(--text)}
.project-kaart .link-more{margin-top:auto;padding-top:18px;align-self:flex-start}

.fotogalerij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.fotogalerij .beeldkader{aspect-ratio:3/2}
/* Staande procesfoto's in een galerij houden hun eigen 4:5-kader; anders
   wint de landschapsregel hierboven en worden de foto's klein en smal. */
.fotogalerij .beeldkader--staand{aspect-ratio:4/5}
.fotogalerij .beeldkader img{object-position:center}
.fotogalerij figure{margin:0}
.fotogalerij figcaption{margin-top:12px;font-size:13.5px;color:var(--muted)}
.fotogalerij figcaption span{display:block;font:700 10.5px/1 var(--font-mono);letter-spacing:.16em;color:var(--copper2);margin-bottom:5px}
/* Op crème achtergrond zijn de lichte koper- en grijstinten te zwak. */
.light .fotogalerij figcaption{color:var(--darkmuted)}
.light .fotogalerij figcaption span{color:var(--copper-ink)}

.google-review{margin:clamp(26px,3.5vw,38px) 0 0;padding:22px 24px;max-width:760px;background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--copper);border-radius:var(--radius);color:var(--text)}
.google-review-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.google-review-logo{flex:none;width:28px;height:28px;display:grid;place-items:center;background:#fff;border-radius:50%}
.google-review-logo svg{width:17px;height:17px;display:block}
.google-review-bron{font:700 11px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.google-review-auteur{font-size:14px;font-weight:700;color:var(--copper2)}
.google-review-auteur::before{content:"·";margin-right:10px;color:var(--line-control)}
.google-review-tekst{margin:0}
.google-review-tekst p{margin:0;max-width:62ch;font-family:var(--font-serif);font-size:18px;line-height:1.55;color:var(--text)}
.light .google-review .google-review-tekst p{color:var(--text)}
.light .google-review .google-review-bron{color:var(--muted)}
.light .google-review .google-review-auteur{color:var(--copper2)}
.project-review .google-review{margin-top:0}

/* CTA-band: effen donkerkoper, crèmetekst haalt 5,65:1. */
.cta-band{padding:clamp(48px,5.5vw,72px) 0;background:var(--copper-deep);color:var(--paper)}
.cta-band .container{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-band h2{color:var(--paper);font-size:clamp(26px,2.8vw,38px);margin-bottom:8px}
.cta-band p{color:#fdf3ea;margin:0;max-width:52ch}
.cta-band-actions{display:flex;gap:12px;flex-wrap:wrap}
.cta-band .btn-primary{background:var(--paper);color:#4a2a12}
.cta-band .btn-primary:hover{background:#fff}

.legal{max-width:74ch;margin-inline:auto}
.legal h2{font-size:clamp(21px,2.2vw,27px);margin:40px 0 12px}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--darkmuted);font-size:16px}
.legal ul{margin:0 0 18px;padding-left:20px;display:grid;gap:7px}
.legal a{color:var(--copper-ink);text-decoration:underline;text-underline-offset:3px}
.legal-adres{font-style:normal;line-height:1.7;color:var(--dark);margin:0 0 18px}
.legal-noot{margin-top:22px;font-size:14.5px;color:var(--muted)}
.light .legal-noot{color:var(--darkmuted)}
.legal-noot a{color:var(--copper-ink);text-decoration:underline;text-underline-offset:3px}

.kaarten-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.kaart-link{display:block;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);color:var(--text)}
a.kaart-link:hover{border-color:rgba(209,154,112,.45)}
.kaart-link h3{font-size:19px;margin-bottom:8px;color:var(--text)}
.kaart-link p{margin:0;font-size:15px;color:var(--muted)}
.kaart-link--statisch{background:#fbf8f5;border-color:rgba(23,19,18,.14);color:var(--dark)}
.kaart-link--statisch h3{color:var(--dark)}
.kaart-link--statisch p{color:var(--darkmuted)}

/* --------------------------------------------------------------- FAQ-pagina */

.faq-groups{display:grid;grid-template-columns:250px minmax(0,1fr);gap:clamp(34px,5vw,80px);align-items:start}
.faq-index{position:sticky;top:104px;padding-top:2px}
.faq-index h2{font-family:var(--font-sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-ink);margin:0 0 16px}
.faq-index ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.faq-index a{display:block;padding:8px 0;font-size:14px;color:var(--darkmuted);border-bottom:1px solid rgba(23,19,18,.10)}
.faq-index a:hover{color:var(--copper-ink)}
.faq-groep{padding-bottom:clamp(32px,4vw,52px);margin-bottom:clamp(32px,4vw,52px);border-bottom:1px solid rgba(23,19,18,.14)}
.faq-groep:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.faq-groep h2{font-size:clamp(26px,2.6vw,34px);margin-bottom:18px;scroll-margin-top:104px}
.faq-groep > p{max-width:66ch;margin-bottom:22px}

/* ---------------------------------------------------------- WhatsApp-knop */

.whatsapp-float{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:var(--whatsapp);color:var(--bg);
  box-shadow:0 14px 34px rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.28);
  transition:transform .2s ease,background-color .2s ease}
.whatsapp-float:hover{background:#3ee07c;transform:translateY(-2px)}
.whatsapp-float:active{transform:translateY(0)}
.whatsapp-float svg{width:27px;height:27px;fill:currentColor}
.whatsapp-float:focus-visible{outline:2px solid var(--paper);outline-offset:3px}
footer{padding-bottom:18px}

/* ------------------------------------------------------------------ motion */

/* Alleen een kleine verticale beweging, geen opacity: tekst blijft altijd
   leesbaar en de contrastmeting ziet geen half doorzichtige secties. */
.reveal-init{transform:translateY(14px)}
.reveal-in{transform:none;transition:transform .7s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal-init{transform:none}
}

/* ------------------------------------------------------------- breekpunten */

@media(max-width:1120px){
  .navlinks{display:none}
  .nav-menu{display:block}
}

@media(max-width:900px){
  html{scroll-padding-top:84px}
  .nav{min-height:68px}
  .brand img{width:158px;height:auto}

  /* Op tablet en mobiel staat de foto boven de tekst, zoals op de huidige
     site. De foto krijgt een vaste breedte, zodat er geen lege strook rechts
     ontstaat; de hoogte blijft beperkt zodat de CTA in beeld komt. */
  .hero{display:block;min-height:0}
  .hero-media{position:relative;inset:auto;width:100%;aspect-ratio:4/5;max-height:44vh;overflow:hidden}
  .hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 36%}
  .hero::before{background:linear-gradient(180deg,rgba(11,10,9,.52) 0%,rgba(11,10,9,0) 24%,rgba(11,10,9,0) 100%)}
  .hero-inner{padding:28px 0 0}
  .hero-panel{max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
  .hero-panel h1{font-size:clamp(30px,5.6vw,44px);max-width:none}
  .hero-sub{font-size:16px;max-width:46ch}
  .hero-actions{gap:10px}
  .hero-facts{gap:26px}

  .trust-list{grid-template-columns:1fr}
  .trust-list li{padding:20px 0;border-left:0;border-top:1px solid var(--line)}
  .trust-list li:first-child{padding-top:0;border-top:0}
  .trust-list li:last-child{padding-bottom:0}

  .showroom-grid,.proof-grid,.exalto-grid,.split,.contact-grid,.footer-inner{grid-template-columns:1fr}
  .showroom-grid,.proof-grid,.exalto-grid{gap:30px}
  .contact-grid .contact-form-col{order:-1}
  .showroom-figure img,.proof-figure img{aspect-ratio:4/3}
  .steps-head{display:block}
  .steps-head .link-more{margin-top:14px}
  .steps-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .step-card h3{font-size:20px}
  .step-card p{font-size:13.5px}
  .contact-grid{gap:42px}
  .footer-inner{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;row-gap:18px}
  .footer-about{grid-column:1/-1}
  .footer-bottom{grid-column:1/-1}

  .fotokaarten,.steps,.opties,.bezoek,.plaatsen,.pluspunten,.punten{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
  /* De drie proceskaarten blijven op tablet naast elkaar staan; zo blijft de
     homepage compact en houdt de volgorde bouw, transport, plaatsing. */
  .fotokaarten{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}

  .faq-groups{grid-template-columns:1fr}
  .faq-index{position:static;padding:0 0 22px;border-bottom:1px solid rgba(23,19,18,.14);margin-bottom:28px}
  .faq-index ul{grid-template-columns:1fr 1fr;gap:0 22px}
}

@media(max-width:700px){
  /* De liggende projectkaart wordt op smalle schermen weer een stapel. */
  .projecten-grid--een .project-kaart{display:flex;flex-direction:column}
  .projecten-grid--een .beeldkader{aspect-ratio:4/5;height:auto;min-height:0;border-right:0;border-bottom:1px solid var(--line)}
  .header-actions > .btn-primary{display:none}
  .header-actions .header-whatsapp{width:46px;min-width:46px;padding:0;border-radius:50%}
  .header-whatsapp-label{display:none}
  .steps-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;padding-bottom:6px;margin-right:-4vw;padding-right:4vw;-webkit-overflow-scrolling:touch}
  .step-card{flex:0 0 76vw;scroll-snap-align:start}
  .step-card img{aspect-ratio:4/5}
}

@media(max-width:560px){
  h1{font-size:clamp(34px,9.4vw,44px)}
  h2{font-size:clamp(27px,7.2vw,36px)}
  .form-pair{grid-template-columns:1fr}
  .hero-media{max-height:40vh}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  /* De tweede actie is op de telefoon een rustige tekstlink, zodat de primaire
     CTA zonder scrollen zichtbaar blijft. */
  .hero-actions .btn-ghost{width:auto;min-height:0;padding:9px 0;border:0;background:none;justify-content:flex-start;color:var(--copper2)}
  .hero-actions .btn-ghost:hover{background:none;color:var(--paper)}
  .hero-note{font-size:12.5px}
  .contact-form .btn{width:100%;justify-self:stretch}
  .faq-list summary{font-size:17.5px}
  .contact-lines a{padding:13px 14px}
  .showroom-card{padding:20px}
  .kaart-link{padding:22px}
  .cta-band .container{display:block}
  .cta-band-actions{margin-top:20px}
  .cta-band-actions .btn{width:100%}
  .pluspunten,.punten,.opties,.bezoek,.plaatsen,.fotokaarten,.steps{grid-template-columns:1fr;gap:18px}
  .punten--twee{grid-template-columns:1fr}
  .sectie-actie .btn{width:100%}
  .fotogalerij{grid-template-columns:1fr}
  .projecten-grid{grid-template-columns:1fr}
  /* De drie proceskaarten worden op de telefoon een compacte rij: foto links,
     uitleg rechts. Zo blijft de homepage overzichtelijk. */
  .fotokaarten{grid-template-columns:1fr;gap:14px}
  .fotokaart{display:grid;grid-template-columns:132px minmax(0,1fr);align-items:center}
  .fotokaart .beeldkader{width:112px;height:150px;margin:12px}
  .fotokaart-body{padding:14px 16px 16px}
  .fotokaart-body h3{font-size:20px;margin-bottom:5px}
  .fotokaart-body p{font-size:14px;line-height:1.5}
  .faq-index ul{grid-template-columns:1fr}
  .review{padding:22px}
  .whatsapp-float{right:16px;bottom:16px;width:54px;height:54px}
  footer{padding:26px 0 20px}
  .footer-inner{grid-template-columns:1fr;column-gap:0;row-gap:18px}
  .footer-about,.footer-bottom{grid-column:auto}
  .footer-nav ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .footer-bottom{margin-top:4px}
  .footer-bottom nav{gap:4px 12px}
  .footer-social-links a{width:40px;height:40px}
  section{padding:56px 0}
}

@media(min-width:901px){
  .voordelen-list h2{min-height:2.2em}
  .punt h3,.optie-body h3{min-height:2.5em}
  .project-kaart h2{min-height:2.3em}
}

/* Inline links in lopende tekst en details. */
.page-hero-sub a,.split-copy a:not(.btn):not(.link-more),.showroom-copy a:not(.btn):not(.link-more),
.exalto-copy a:not(.btn):not(.link-more),.cta-band p a,.showroom-details a{
  color:var(--copper2);text-decoration:underline;text-underline-offset:3px}
.page-hero-sub a:hover,.split-copy a:not(.btn):not(.link-more):hover,.showroom-copy a:not(.btn):not(.link-more):hover,
.exalto-copy a:not(.btn):not(.link-more):hover,.cta-band p a:hover,.showroom-details a:hover{color:var(--paper)}
.light .split-copy a:not(.btn):not(.link-more),.light .showroom-copy a:not(.btn):not(.link-more),
.showroom-details a{color:var(--copper-ink)}
.light .split-copy a:not(.btn):not(.link-more):hover,.light .showroom-copy a:not(.btn):not(.link-more):hover{color:var(--dark)}

/* ----------------------------------------------------------- cookietoestemming */
.cookie-banner{position:fixed;z-index:100;left:18px;right:18px;bottom:88px;width:min(760px,calc(100% - 36px));margin:auto;display:flex;align-items:center;gap:22px;padding:23px 26px;background:#201b18;color:var(--text);border:1px solid var(--line-control);border-radius:var(--radius);box-shadow:0 18px 65px rgba(0,0,0,.65)}
.cookie-banner[hidden]{display:none}
.cookie-banner__inhoud{flex:1;min-width:0}
.cookie-banner__inhoud strong{font-size:16px;color:var(--text)}
.cookie-banner__inhoud p{margin:5px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}
.cookie-banner__inhoud a{color:var(--copper2);text-decoration:underline;text-underline-offset:2px}
.cookie-banner__acties{display:flex;flex:none;gap:9px}
.cookie-banner__acties .btn{min-height:44px;padding:0 17px;font-size:14px}
@media(max-width:650px){
  .cookie-banner{display:block;padding:18px;max-height:calc(100dvh - 160px);overflow-y:auto}
  .cookie-banner__acties{margin-top:15px;display:grid;grid-template-columns:1fr 1fr}
  .cookie-banner__acties .btn{padding:0 12px}
}


/* Homepage-hero: avondfoto van de naturel veranda naast de tekst.
   De foto houdt een eigen kolom, zodat de veranda volledig in beeld blijft en
   geen belangrijk deel achter tekst verdwijnt. Onder de hero volgt een donkere
   strook met de kernpunten; pas daarna begint het crème deel. Zo is er geen
   harde overgang van zwart naar een groot wit vlak. */
.hero{
  display:grid;
  grid-template-columns:minmax(0,44%) minmax(0,56%);
  min-height:clamp(560px,74svh,760px);
  align-items:stretch;
  background:var(--bg);
}
.hero::before{display:none}
.hero-media{
  position:relative;inset:auto;z-index:0;
  grid-column:2;grid-row:1;
  min-width:0;overflow:hidden;background:#0e0c0b;
}
.hero-media picture{display:block;width:100%;height:100%}
.hero-media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 56%;
}
/* Alleen een zachte rand links en onder, zodat het beeld aansluit op het
   zwarte tekstvlak zonder de veranda te bedekken. */
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(11,10,9,.40) 0%,rgba(11,10,9,0) 20%),
    linear-gradient(0deg,rgba(11,10,9,.28) 0%,rgba(11,10,9,0) 24%);
}
.hero-inner{
  grid-column:1;grid-row:1;z-index:2;
  width:100%;min-width:0;display:flex;align-items:center;
  padding:clamp(46px,4.8vw,84px) clamp(22px,4.4vw,76px);
}
.hero-inner .container{width:100%;margin:0}
.hero-panel{
  max-width:600px;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;backdrop-filter:none;
}
.hero-eyebrow{
  display:flex;align-items:center;gap:12px;margin:0 0 20px;
  font:700 11.5px/1.2 var(--font-sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--copper2);
}
.hero-eyebrow::before{content:"";flex:none;width:30px;height:1px;background:var(--copper2)}
.hero-panel h1{
  font-size:clamp(36px,3.15vw,57px);
  line-height:1.07;letter-spacing:-.028em;max-width:none;
}
.hero-panel .hero-sub{font-size:17px;line-height:1.65;max-width:50ch}
.hero-panel .hero-actions{margin-top:30px}
.hero-actions{gap:12px}

/* Donkere overgangsstrook onder de hero. De kernpunten staan op het zwarte
   vlak, zodat het crème deel eronder rustig kan beginnen. */
.hero-onder{background:#0f0d0c;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:22px 0}
.hero-onder-inner{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0}
.hero-onder-feit{display:flex;flex-direction:column;gap:3px;padding:2px 28px;border-left:1px solid var(--line)}
.hero-onder-feit:first-child{padding-left:0;border-left:0}
.hero-onder-feit strong{font-family:var(--font-serif);font-size:clamp(18px,1.5vw,21px);font-weight:400;line-height:1.2;color:var(--text)}
.hero-onder-feit span{font-size:13px;line-height:1.45;color:var(--muted)}
/* De crème sectie onder de hero begint met een zachte schaduw, zodat de rand
   tussen het donkere vlak en het crème deel niet als een hard wit vlak voelt. */
.hero-onder + .light{position:relative}
.hero-onder + .light::before{
  content:"";position:absolute;left:0;right:0;top:0;height:56px;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,9,.26) 0%,rgba(11,10,9,0) 100%);
}

@media(max-width:1100px){
  .hero{display:flex;flex-direction:column;min-height:0}
  .hero-media{
    order:0;width:100%;aspect-ratio:4/3;
    max-height:46vh;flex:none;
  }
  .hero-media img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:center 54%;
  }
  .hero-media::after{background:linear-gradient(0deg,rgba(11,10,9,.34) 0%,rgba(11,10,9,0) 30%)}
  .hero-inner{
    order:1;display:block;width:100%;
    padding:38px 0 30px;
  }
  .hero-inner .container{width:min(var(--max),92%);margin-inline:auto}
  .hero-panel{max-width:700px}
  .hero-panel h1{font-size:clamp(33px,6vw,46px)}
  .hero-onder-feit{padding:2px 20px}
}
@media(max-width:560px){
  .hero-media{aspect-ratio:4/3;max-height:42vh}
  .hero-inner{padding:30px 0 26px}
  .hero-eyebrow{margin-bottom:15px;font-size:10.5px}
  .hero-panel h1{font-size:clamp(33px,8.6vw,42px);line-height:1.06}
  .hero-panel .hero-sub{font-size:16px;line-height:1.58}
  .hero-panel .hero-actions{margin-top:24px}
  .hero-onder{padding:16px 0}
  .hero-onder-inner{grid-template-columns:1fr}
  .hero-onder-feit{
    flex-direction:row;align-items:baseline;gap:10px;
    padding:11px 0;border-left:0;border-top:1px solid var(--line);
  }
  .hero-onder-feit:first-child{padding-top:0;border-top:0}
  .hero-onder-feit:last-child{padding-bottom:0}
  .hero-onder-feit strong{flex:none;font-size:17px}
  .hero-onder-feit span{font-size:13px}
}

/* Exalto Houtbouw: teamfoto vult de lege helft van de oude introductie. */
.exalto-intro-hero{padding:clamp(36px,5vw,72px) 0;min-height:0}
.exalto-intro-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.exalto-intro-copy{min-width:0}
.exalto-intro-hero .exalto-hero-logo{margin:0 0 20px}
.exalto-intro-hero .exalto-hero-logo img{width:min(156px,46%);height:auto}
.exalto-intro-hero h1{font-size:clamp(38px,4.15vw,62px);line-height:1.07;max-width:14ch;margin:0 0 24px}
.exalto-intro-hero .page-hero-sub{font-size:clamp(16px,1.25vw,19px);line-height:1.62;max-width:48ch}
.exalto-intro-photo{margin:0;overflow:hidden;border:1px solid var(--line)}
.exalto-intro-photo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center}
@media(max-width:900px){
  .exalto-intro-grid{grid-template-columns:1fr;gap:28px}
  .exalto-intro-hero{padding:32px 0 48px}
  .exalto-intro-hero .exalto-hero-logo img{width:120px}
  .exalto-intro-hero h1{font-size:clamp(34px,7vw,49px);margin-bottom:18px}
}
@media(max-width:560px){
  .exalto-intro-hero{padding:26px 0 40px}
  .exalto-intro-grid{gap:24px}
}

/* Twee echte uitvoeringen naast elkaar: naturel Douglas en zwart hout.
   De kaders zijn 3:4, gelijk aan de foto's, zodat de hele veranda zichtbaar
   blijft en er niets belangrijks wordt weggesneden. */
.uitvoeringen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.uitvoering{margin:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.uitvoering-beeld{position:relative;aspect-ratio:3/4;overflow:hidden;background:#ded4c8;border:1px solid rgba(23,19,18,.16)}
.uitvoering-beeld img{width:100%;height:100%;object-fit:cover;object-position:center 50%;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.uitvoering:hover .uitvoering-beeld img{transform:scale(1.02)}
.uitvoering-label{display:block;font:700 10.5px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--copper-ink);margin-bottom:4px}
.uitvoering-naam{display:block;font-family:var(--font-serif);font-size:clamp(17px,1.5vw,20px);line-height:1.2;color:var(--dark)}
.uitvoeringen-noot{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--darkmuted);max-width:60ch}
.uitvoeringen-noot a{color:var(--copper-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.uitvoeringen-noot a:hover{color:var(--dark)}
.uitvoeringen--donker .uitvoering-beeld{border-color:var(--line);background:#1a1614}
.uitvoeringen--donker .uitvoering-label{color:var(--copper2)}
.uitvoeringen--donker .uitvoering-naam{color:var(--text)}
.uitvoeringen-noot--donker{color:var(--muted)}
.uitvoeringen-noot--donker a{color:var(--copper2)}
.uitvoeringen-noot--donker a:hover{color:var(--paper)}
@media(max-width:560px){
  .uitvoeringen{gap:10px}
  .uitvoering{gap:8px}
  .uitvoering-naam{font-size:16px}
  .uitvoering-label{font-size:9.5px;letter-spacing:.11em}
}
@media(prefers-reduced-motion:reduce){
  .uitvoering-beeld img{transition:none}
  .uitvoering:hover .uitvoering-beeld img{transform:none}
}

/* Intro met foto, gebruikt op /werkwijze/. */
.page-hero--met-beeld .page-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,4.5vw,70px);align-items:center}
.page-hero--met-beeld h1{max-width:16ch}
.page-hero-foto{margin:0;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.page-hero-foto img{width:100%;height:100%;aspect-ratio:3/2;object-fit:cover;object-position:center}
@media(max-width:900px){
  .page-hero--met-beeld .page-hero-grid{grid-template-columns:1fr;gap:26px}
  .page-hero-foto img{aspect-ratio:16/9}
}

/* Zonder zichtbare kruimelpaden beginnen de overige pagina's compacter.
   JSON-LD-breadcrumbs voor zoekmachines blijven behouden. */
.page-hero:not(.exalto-intro-hero){padding:clamp(36px,4.5vw,64px) 0 clamp(38px,4.8vw,68px)}
@media(max-width:560px){
  .page-hero:not(.exalto-intro-hero){padding:32px 0 42px}
}


/* Onze veranda's: echte voorbeeldbeelden van naturel en zwarte prefab. */
.veranda-voorbeelden{padding:70px 0}
.veranda-voorbeelden .section-head{max-width:800px}
.veranda-voorbeelden-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;max-width:980px;margin-inline:auto}
.veranda-voorbeeld{min-width:0;background:var(--surface);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.veranda-voorbeeld figure{margin:0;overflow:hidden;aspect-ratio:4/5;background:#ccc4b8}
.veranda-voorbeeld figure img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 50%;transition:transform .3s}
.veranda-voorbeeld:hover figure img{transform:scale(1.025)}
.veranda-voorbeeld-body{padding:26px 28px 28px;display:flex;flex-direction:column;gap:9px;flex:1}
.veranda-voorbeeld-label{font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--copper2)}
.veranda-voorbeeld-body h3{margin:0;color:var(--text);font-size:clamp(24px,2.7vw,32px)}
.veranda-voorbeeld-body p{margin:0;line-height:1.6;color:var(--muted)}
.veranda-voorbeelden-ondertekst{font-size:13px;line-height:1.6;margin:20px 0 8px;color:var(--muted);max-width:980px;margin-inline:auto}
@media(max-width:780px){.veranda-voorbeelden{padding:42px 0}.veranda-voorbeelden-grid{grid-template-columns:1fr;gap:18px}.veranda-voorbeeld figure{aspect-ratio:4/5}.veranda-voorbeeld-body{padding:19px 20px 23px}}
@media(prefers-reduced-motion:reduce){.veranda-voorbeeld figure img{transition:none}.veranda-voorbeeld:hover figure img{transform:none}}


/* Kennisbank: eenvoudige redactionele lay-out zonder nieuwe dependencies. */
.kennis-hero{padding-block:clamp(64px,8vw,110px)}
.kennis-hero h1{max-width:17ch}
.kennis-hero .page-hero-sub{max-width:74ch}
.kennis-crumbs{font-size:13px;color:var(--muted);margin-bottom:32px;line-height:1.5}
.kennis-crumbs a{color:var(--copper2);text-decoration:underline;text-underline-offset:3px}
.kennis-crumbs span{margin-left:6px}
.kennis-content{padding-block:clamp(48px,6vw,90px)}
.kennis-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.kennis-card{min-width:0;display:flex;flex-direction:column;align-items:start;padding:clamp(24px,3vw,38px);background:#fffaf5;border:1px solid #dfd1c5}
.kennis-card-label{color:var(--copper-ink);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.kennis-card h2{font-size:clamp(25px,2.5vw,34px);line-height:1.16;margin-bottom:16px}
.kennis-card h2 a:hover,.kennis-card-link:hover{color:var(--copper-ink)}
.kennis-card p{font-size:15.5px;line-height:1.7;max-width:72ch;margin-bottom:22px}
.kennis-card-link{font-size:14px;color:var(--copper-ink);font-weight:750;text-decoration:underline;text-underline-offset:4px;margin-top:auto}
.kennis-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);align-items:start;gap:clamp(30px,6vw,92px)}
.kennis-article{min-width:0}
.kennis-figure{margin:0 0 48px}
.kennis-figure img{width:100%;aspect-ratio:3/2;object-fit:cover;max-height:560px}
.kennis-figure figcaption{font-size:12px;line-height:1.6;color:var(--darkmuted);margin-top:10px}
.kennis-article-section{padding:0 0 27px;margin:0 0 28px;border-bottom:1px solid #dbcfc4}
.kennis-article-section h2{font-size:clamp(27px,2.5vw,36px);line-height:1.15;margin-bottom:20px}
.kennis-article-section p{max-width:74ch;font-size:16px;line-height:1.85;margin-bottom:18px}
.kennis-article-section a,.kennis-bron a{color:#7b4621;text-decoration:underline;text-underline-offset:3px}
.kennis-checklist{padding-left:22px;color:#3e352d;line-height:1.8}
.kennis-checklist li{padding-left:5px;margin-bottom:6px}
.kennis-tip{padding:22px 26px;border-left:4px solid var(--copper);background:#eee3d7;margin:34px 0}
.kennis-tip strong{color:var(--dark);font-size:14px}
.kennis-tip p{font-size:15px;margin-top:5px}
.kennis-bron,.kennis-verantwoording{font-size:13px;line-height:1.75;max-width:78ch}
.kennis-aside{position:sticky;top:115px;background:#fffaf5;border:1px solid #dfd1c5;padding:28px}
.kennis-aside h2{font-size:27px}
.kennis-aside p{font-size:14px;line-height:1.65}
.kennis-aside ul{padding-left:18px;font-size:14px;line-height:1.7;margin:18px 0 28px}
.kennis-aside li{margin-bottom:10px}
.kennis-aside li a{text-decoration:underline;text-underline-offset:3px}
.kennis-aside .btn{width:100%;padding-inline:14px;text-align:center;white-space:normal;line-height:1.4}
@media(max-width:880px){.kennis-layout{grid-template-columns:1fr}.kennis-aside{position:static}}
@media(max-width:700px){.kennis-grid{grid-template-columns:1fr}.kennis-card{padding:25px}.kennis-figure{margin-bottom:34px}.kennis-article-section p{font-size:15.5px}.kennis-aside{padding:24px}}

/* Exvanda video's – lichte klik-om-te-laden presentatie op de werkwijze-pagina. */
.exv-video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1100px;margin-inline:auto;gap:24px}
.exv-video-card{min-width:0;background:var(--surface);border:1px solid var(--line)}
.exv-video-frame{aspect-ratio:9/16;position:relative;background:#211b17;overflow:hidden}
.exv-video-trigger{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;cursor:pointer;display:block;background:transparent;color:#fff}
.exv-video-trigger img{width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.exv-video-trigger:hover img{transform:scale(1.025)}
.exv-video-trigger:focus-visible{outline:3px solid var(--copper2);outline-offset:-3px}
.exv-video-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:rgba(11,10,9,.85);border:2px solid var(--copper2);font:24px var(--font-sans);box-shadow:0 5px 25px #0008}
.exv-video-trigger[hidden],.exv-video-player[hidden]{display:none}
.exv-video-player{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.exv-video-copy{padding:24px}
.exv-video-copy h3{color:var(--text);font-size:clamp(20px,1.7vw,25px);margin-bottom:12px}
.exv-video-copy p{color:var(--muted);font-size:14.5px;line-height:1.7}
@media(max-width:800px){.exv-video-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:520px){.exv-video-grid{grid-template-columns:1fr;max-width:410px}.exv-video-copy{padding:22px}}
@media(prefers-reduced-motion:reduce){.exv-video-trigger img{transition:none}}

/* Homevideo – uitgelichte transportvideo tussen prefab-uitleg en stappen. */
.exv-home-video-inner{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.9fr);align-items:center;gap:clamp(28px,7vw,100px)}
.exv-home-video .split-copy{max-width:650px}
.exv-home-video-media{width:min(100%,350px);margin-inline:auto}
.exv-home-video .exv-video-frame{border:1px solid #d3c3b5;box-shadow:0 18px 54px rgba(23,19,18,.14)}
.exv-home-video-caption{font-size:13px;line-height:1.6;margin-top:12px;text-align:center}
@media(max-width:760px){.exv-home-video-inner{grid-template-columns:1fr}.exv-home-video-media{width:min(100%,320px)}}

/* Google Ads landing, scoped to this page. */
.ads-landing{--bg:#0b0a09;--surface:#171312;--paper:#f4efe9;--ink:#171312;--text:#f7f2ed;--muted:#c3b9b1;--copper:#b87343;--copper-light:#d19a70;--line:#352e2a;--serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;--sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.ads-landing *{box-sizing:border-box}
html:has(.ads-landing){scroll-behavior:smooth;scroll-padding-top:110px;color-scheme:dark}
.ads-landing{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 var(--sans);-webkit-font-smoothing:antialiased}
.ads-landing img{display:block;max-width:100%;height:auto}
.ads-landing a{color:inherit;text-decoration:none}
.ads-landing button,.ads-landing input,.ads-landing textarea{font:inherit}
.ads-landing button,.ads-landing a,.ads-landing input,.ads-landing textarea,.ads-landing summary{-webkit-tap-highlight-color:transparent}
.ads-landing button,.ads-landing a,.ads-landing summary{touch-action:manipulation}
.ads-landing a:focus-visible,.ads-landing button:focus-visible,.ads-landing summary:focus-visible{outline:3px solid var(--copper-light);outline-offset:5px}
.ads-landing input:focus,.ads-landing textarea:focus{outline:2px solid var(--copper-light);outline-offset:2px}
.ads-landing h1,.ads-landing h2,.ads-landing h3,.ads-landing p,.ads-landing figure{margin:0}
.ads-landing h1,.ads-landing h2,.ads-landing h3{font-family:var(--serif);font-weight:400;letter-spacing:-.035em;line-height:1.08;text-wrap:balance}
.ads-landing h1{font-size:clamp(43px,4.4vw,65px)}
.ads-landing h2{font-size:clamp(34px,3.45vw,49px)}
.ads-landing h3{font-size:27px}
.ads-landing h1 em,.ads-landing h2 em{font-style:normal;color:var(--copper-light)}
.ads-landing p{color:var(--muted)}
.ads-landing .lp-wrap{width:min(1280px,92%);margin:auto}
.ads-landing .lp-eyebrow,.ads-landing .lp-small-label{font:650 10.5px/1.5 var(--sans);text-transform:uppercase;letter-spacing:.18em;color:var(--copper-light)}
.ads-landing .lp-eyebrow{margin-bottom:18px}
.ads-landing .lp-button{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:52px;padding:14px 24px;border:1px solid transparent;background:var(--copper);color:#0b0a09;font-size:14px;font-weight:750;line-height:1.4;cursor:pointer;border-radius:2px;text-align:center;transition:background .15s}
.ads-landing .lp-button:hover{background:#cc8d5e}
.ads-landing .lp-button span{font-size:19px}
.ads-landing .lp-skip{position:absolute;top:-90px;left:20px;z-index:200;background:var(--paper);color:var(--ink);padding:12px}
.ads-landing .lp-skip:focus{top:5px}
.ads-landing .preview-bar{padding:7px 4%;background:#25201b;color:#e0c6b0;text-align:center;font-size:11px;letter-spacing:.035em;border-bottom:1px solid var(--line)}
.ads-landing .preview-bar span{color:#c7bcb3}
.ads-landing .lp-header{position:sticky;top:0;z-index:20;background:rgba(11,10,9,.97);border-bottom:1px solid var(--line)}
.ads-landing .lp-header-inner{min-height:88px;display:flex;align-items:center;gap:28px}
.ads-landing .lp-brand{margin-right:auto}
.ads-landing .lp-brand img{width:185px;mix-blend-mode:screen}
.ads-landing .lp-header-caption{font-size:12px;color:#bfb4ab;line-height:1.6;border-left:1px solid var(--line);padding-left:25px;margin-right:auto}
.ads-landing .lp-header-caption span{display:block}
.ads-landing .lp-header-phone{display:flex;gap:10px;align-items:center;font-size:14px}
.ads-landing .lp-header-phone svg{width:21px;height:21px;color:var(--copper-light)}
.ads-landing .lp-header-cta{font-size:13px;min-height:46px;padding:10px 19px}
.ads-landing .lp-hero{padding:55px 0 24px;background:radial-gradient(ellipse at 95% 25%,#30211955,transparent 65%)}
.ads-landing .lp-hero-grid{display:grid;grid-template-columns:minmax(0,1.38fr) minmax(350px,.9fr);gap:58px;align-items:start}
.ads-landing .lp-hero-copy .lp-eyebrow{margin-bottom:18px}
.ads-landing .lp-hero-lead{max-width:620px;margin-top:23px;font-size:17px;line-height:1.7}
.ads-landing .lp-hero-checks{list-style:none;padding:0;margin:21px 0 28px;font-size:13px;display:grid;gap:6px;color:#ded4cc}
.ads-landing .lp-hero-checks li{padding-left:23px;position:relative}
.ads-landing .lp-hero-checks li:before{content:'✓';color:var(--copper-light);position:absolute;left:0}
.ads-landing .lp-hero-photo{position:relative}
.ads-landing .lp-hero-photo>img{width:100%;aspect-ratio:1.91;object-fit:cover;object-position:50% 60%;border-radius:2px}
.ads-landing .lp-hero-photo figcaption{display:flex;align-items:center;gap:11px;color:#a99b90;font-size:10px;letter-spacing:.02em;padding-top:11px}
.ads-landing .lp-photo-line{height:1px;width:22px;background:var(--copper)}
.ads-landing .lp-request-card{background:var(--paper);color:var(--ink);padding:29px 32px 23px;border-top:3px solid var(--copper);box-shadow:0 12px 55px #0003;border-radius:2px;scroll-margin-top:25px;color-scheme:light}
.ads-landing .lp-request-card .lp-eyebrow{font-size:9px;color:#8f5426;margin-bottom:13px;letter-spacing:.14em}
.ads-landing .lp-request-card h2{font-size:39px;line-height:1.02}
.ads-landing .lp-request-card>p:not(.lp-eyebrow){color:#645950;font-size:12px;line-height:1.65;margin:15px 0 18px}
.ads-landing .lp-field{margin-bottom:11px}
.ads-landing .lp-field label{display:block;font-size:11px;font-weight:650;margin-bottom:5px;color:#4c4038}
.ads-landing .lp-field label>span:not(.lp-optional){color:#87502b}
.ads-landing .lp-optional{float:right;color:#76695f;font-size:10px;font-weight:400}
.ads-landing .lp-field input,.ads-landing .lp-field textarea{display:block;width:100%;border:1px solid #c8b9aa;border-radius:2px;background:#fffdf9;color:#211a16;min-height:42px;padding:8px 11px;font-size:14px}
.ads-landing .lp-field textarea{resize:vertical;min-height:71px;line-height:1.5;font-size:12px}
.ads-landing .lp-field input:hover,.ads-landing .lp-field textarea:hover{border-color:#9b7e65}
.ads-landing .lp-field textarea::placeholder{color:#817369;opacity:1}
.ads-landing .lp-submit{width:100%;font-size:12px;padding:12px 12px;min-height:48px;gap:12px}
.ads-landing .lp-form-reassurance{font-size:10px;text-align:center;color:#655446;margin:9px 0}
.ads-landing .lp-form-reassurance span{color:#755027}
.ads-landing .lp-privacy{font-size:9px;line-height:1.6;color:#71675f;margin-top:10px}
.ads-landing .lp-privacy a{text-decoration:underline;text-underline-offset:2px}
.ads-landing .preview-note{font-size:9px;color:#7c644e;padding:7px 0 0;margin-top:8px;border-top:1px solid #d9cec3;line-height:1.5}
.ads-landing .lp-form-contact{display:flex;flex-wrap:wrap;gap:5px 9px;justify-content:center;border-top:1px solid #d5c7b8;margin-top:15px;padding-top:13px;font-size:10px;color:#706055}
.ads-landing .lp-form-contact>span:first-child{width:100%;text-align:center;margin-bottom:2px}
.ads-landing .lp-form-contact a{font-weight:650;color:#503823;text-decoration:underline;text-underline-offset:3px}
.ads-landing .form-result{font-size:13px;background:#e6ebdf;color:#30432e;border-left:3px solid #587947;padding:13px;margin-top:13px;line-height:1.6}
.ads-landing .lp-hero-footnote{font-size:9px;color:#a99a8e;padding-top:22px}
.ads-landing .lp-mobile-jump{display:none}
.ads-landing .lp-trust-strip{border-block:1px solid var(--line);margin-top:8px}
.ads-landing .lp-trust-inner{display:grid;grid-template-columns:repeat(3,1fr);padding:24px 0;gap:20px;text-align:center;font-size:11px;color:#b9aa9f}
.ads-landing .lp-trust-inner>span+span{border-left:1px solid var(--line)}
.ads-landing .lp-trust-inner b{display:block;font-size:13px;letter-spacing:.01em;font-weight:550;color:#f0e5dc;margin-bottom:1px}
.ads-landing .lp-section{padding:90px 0}
.ads-landing .lp-light{background:var(--paper);color:var(--ink);color-scheme:light}
.ads-landing .lp-light p{color:#6a6058}
.ads-landing .lp-light .lp-eyebrow,.ads-landing .lp-light .lp-small-label{color:#8c542f}
.ads-landing .lp-section-heading{display:flex;justify-content:space-between;align-items:end;gap:70px;margin-bottom:37px}
.ads-landing .lp-section-heading>p{max-width:420px;font-size:14px;line-height:1.8}
.ads-landing .lp-options-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:27px}
.ads-landing .lp-image-frame{overflow:hidden}
.ads-landing .lp-image-frame img{width:100%;aspect-ratio:1.24;object-fit:cover;transition:transform .6s}
.ads-landing .lp-option:hover img{transform:scale(1.025)}
.ads-landing .lp-option:first-child .lp-image-frame img{object-position:center 54%}
.ads-landing .lp-option figcaption{padding:22px 0 0}
.ads-landing .lp-option h3{margin:10px 0}
.ads-landing .lp-option p{font-size:13px;max-width:330px;line-height:1.8}
.ads-landing .lp-small-label{font-size:9px}
.ads-landing .lp-inline-cta{border-top:1px solid #d8ccc0;margin-top:32px;padding-top:23px;display:flex;justify-content:space-between;gap:20px}
.ads-landing .lp-inline-cta p{font-size:12px}
.ads-landing .lp-text-link{color:var(--copper-light);display:inline-flex;gap:25px;align-items:center;font-weight:600;font-size:13px;text-decoration:underline;text-underline-offset:5px}
.ads-landing .lp-light .lp-text-link{color:#824c27}
.ads-landing .lp-project{background:#171311}
.ads-landing .lp-project-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.ads-landing .lp-project-photo{position:relative;padding-left:25px}
.ads-landing .lp-project-photo:before{content:'';position:absolute;left:0;top:25px;bottom:-25px;width:75%;border:1px solid #7e5b3c}
.ads-landing .lp-project-photo img{width:100%;height:520px;object-fit:cover;position:relative}
.ads-landing .lp-project-photo figcaption{position:absolute;bottom:20px;left:45px;right:20px;background:#100c08cc;padding:11px 15px;font-size:11px;border-left:2px solid var(--copper)}
.ads-landing .lp-project-copy>p:not(.lp-eyebrow){margin:25px 0;font-size:14px;line-height:1.9}
.ads-landing .lp-review{padding:24px 0;border-block:1px solid #44352b;margin:28px 0 22px}
.ads-landing .lp-review figcaption{display:flex;align-items:center;gap:12px;font-size:10px;color:#bca797;line-height:1.8}
.ads-landing .lp-review figcaption b{color:#e7d7c9;font-weight:500;font-size:11px}
.ads-landing .lp-google-mark{font:600 28px/1 var(--sans);color:#e3b38e}
.ads-landing .lp-review blockquote{margin:18px 0 0;font-family:var(--serif);font-size:27px;line-height:1.3;letter-spacing:-.015em}
.ads-landing .lp-project-cta{display:flex;width:fit-content;margin-top:28px}
.ads-landing .lp-process-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}
.ads-landing .lp-process-visual{position:relative}
.ads-landing .lp-process-visual img{width:100%;height:440px;object-fit:cover;object-position:center 58%}
.ads-landing .lp-process-visual>span{position:absolute;bottom:0;background:linear-gradient(transparent,#100b06ee);padding:60px 25px 20px;color:#fff0e4;width:100%;font-size:11px}
.ads-landing .lp-steps{list-style:none;padding:0;margin:0;display:grid;gap:28px}
.ads-landing .lp-steps li{display:flex;gap:22px;padding-bottom:27px;border-bottom:1px solid #d7c9bb}
.ads-landing .lp-steps li:last-child{border-bottom:0;padding-bottom:0}
.ads-landing .lp-step-number{font:14px var(--serif);color:#94613b;padding-top:8px}
.ads-landing .lp-steps h3{font-size:25px;margin-bottom:10px}
.ads-landing .lp-steps p{font-size:13px;line-height:1.85}
.ads-landing .lp-pricing{border-top:1px solid var(--line)}
.ads-landing .lp-pricing-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:110px;align-items:center}
.ads-landing .lp-pricing-grid>div>p:not(.lp-eyebrow){margin:24px 0 26px;font-size:14px;max-width:550px}
.ads-landing .lp-price-factors>div{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.ads-landing .lp-price-factors>div:first-child{border-top:1px solid var(--line)}
.ads-landing .lp-price-factors>div>span{font:13px var(--serif);padding-top:4px;color:var(--copper-light)}
.ads-landing .lp-price-factors p{font-size:12px;color:#b6a79c}
.ads-landing .lp-price-factors b{display:block;color:#f0e5db;font-size:14px;font-weight:500;margin-bottom:6px}
.ads-landing .lp-faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}
.ads-landing .lp-faq-grid>div>p:not(.lp-eyebrow){font-size:14px;margin:25px 0}
.ads-landing .lp-questions{border-top:1px solid #cabbac}
.ads-landing .lp-questions details{border-bottom:1px solid #cabbac}
.ads-landing .lp-questions summary{list-style:none;position:relative;cursor:pointer;padding:24px 40px 24px 0;font-size:14px;font-weight:550;line-height:1.55}
.ads-landing .lp-questions summary::-webkit-details-marker{display:none}
.ads-landing .lp-questions summary:after{content:'+';position:absolute;right:2px;top:20px;font-size:23px;color:#8b5b36;font-weight:400}
.ads-landing .lp-questions details[open] summary:after{content:'−'}
.ads-landing .lp-questions details p{font-size:13px;padding:0 30px 24px 0;line-height:1.85}
.ads-landing .lp-team-grid{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.ads-landing .lp-team-grid>img{width:100%;height:410px;object-fit:cover}
.ads-landing .lp-team-grid>div>p:not(.lp-eyebrow){font-size:14px;margin-top:23px}
.ads-landing .lp-team-grid .lp-button{margin-top:26px}
.ads-landing .lp-final-cta{background:#211910;padding:75px 0;text-align:center;border-block:1px solid #4a3424}
.ads-landing .lp-final-cta h2{font-size:clamp(34px,3.8vw,53px)}
.ads-landing .lp-final-cta p:not(.lp-eyebrow){margin:23px auto;color:#c4b09e;font-size:14px}
.ads-landing .lp-final-cta .lp-button{margin-top:6px}
.ads-landing footer{padding:50px 0 20px}
.ads-landing .lp-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}
.ads-landing .lp-footer-grid img{width:180px;mix-blend-mode:screen;margin-bottom:16px}
.ads-landing .lp-footer-grid p,.ads-landing .lp-footer-grid a{font-size:11px;line-height:1.9;color:#ac9c90}
.ads-landing .lp-footer-grid b{display:block;font-size:11px;letter-spacing:.03em;font-weight:500;color:#e1cdbb;margin-bottom:15px}
.ads-landing .lp-footer-grid a{display:block;width:fit-content;margin-bottom:5px}
.ads-landing .lp-footer-grid a:hover{text-decoration:underline}
.ads-landing .lp-footer-grid>div:last-child a{margin-top:12px}
.ads-landing .lp-footer-bottom{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:35px;padding-top:18px;font-size:9px;color:#9c8979}
.ads-landing .lp-mobile-bar{display:none}
.ads-landing [hidden]{display:none!important}
@media(min-width:1500px){.ads-landing .lp-hero{padding-top:65px}
.ads-landing .lp-hero-grid{gap:80px}
.ads-landing .lp-hero-lead{font-size:18px}
.ads-landing .lp-hero-photo>img{aspect-ratio:1.85}
.ads-landing .lp-request-card{padding:34px 35px 26px}
.ads-landing .lp-field{margin-bottom:14px}
.ads-landing .lp-field input{min-height:46px}
.ads-landing .lp-request-card>p:not(.lp-eyebrow){font-size:13px}
.ads-landing .lp-request-card h2{font-size:43px}
.ads-landing .lp-submit{font-size:13px}
}
@media(max-width:1100px){.ads-landing .lp-header-caption{display:none}
.ads-landing .lp-hero-grid{gap:30px;grid-template-columns:minmax(0,1.15fr) minmax(330px,.9fr)}
.ads-landing h1{font-size:46px}
.ads-landing .lp-hero-lead{font-size:15px}
.ads-landing .lp-hero-checks{font-size:11px}
.ads-landing .lp-hero-photo>img{aspect-ratio:1.32}
.ads-landing .lp-request-card{padding:25px}
.ads-landing .lp-request-card h2{font-size:35px}
.ads-landing .lp-section{padding:70px 0}
.ads-landing .lp-section-heading{gap:45px}
.ads-landing .lp-project-grid,.ads-landing .lp-process-grid,.ads-landing .lp-team-grid{gap:45px}
.ads-landing .lp-pricing-grid,.ads-landing .lp-faq-grid{gap:55px}
.ads-landing .lp-project-photo img{height:490px}
.ads-landing .lp-section-heading>p{max-width:350px}
.ads-landing .lp-options-grid{gap:20px}
.ads-landing .lp-header-phone{font-size:12px}
}
@media(max-width:760px){html:has(.ads-landing){scroll-padding-top:84px}
.ads-landing .lp-wrap{width:90%}
.ads-landing .preview-bar{font-size:9px;padding:5px 3%}
.ads-landing .preview-bar span{display:block;font-size:8px}
.ads-landing .lp-header-inner{min-height:67px;gap:16px}
.ads-landing .lp-brand img{width:137px}
.ads-landing .lp-header-cta{display:none}
.ads-landing .lp-header-phone{font-size:12px;gap:8px}
.ads-landing .lp-header-phone svg{width:17px;height:17px}
.ads-landing .lp-hero{padding:29px 0 22px}
.ads-landing .lp-hero-grid{display:flex;flex-direction:column;gap:27px}
.ads-landing .lp-hero-copy{width:100%}
.ads-landing .lp-hero-copy .lp-eyebrow{font-size:9px;letter-spacing:.13em;margin-bottom:17px}
.ads-landing h1{font-size:clamp(36px,8.2vw,55px);line-height:1.05}
.ads-landing .lp-hero-lead{font-size:14px;margin-top:18px;line-height:1.8}
.ads-landing .lp-hero-checks{font-size:11px;gap:6px;margin:17px 0 16px}
.ads-landing .lp-mobile-jump{display:flex;align-items:center;justify-content:space-between;color:var(--copper-light);font-size:12px;font-weight:600;border-bottom:1px solid #64452e;width:fit-content;gap:36px;padding:4px 0;margin:20px 0}
.ads-landing .lp-hero-photo>img{aspect-ratio:1.95;object-position:center 58%}
.ads-landing .lp-hero-photo figcaption{font-size:8px;gap:8px;padding-top:9px}
.ads-landing .lp-request-card{width:100%;padding:25px 24px 21px;scroll-margin-top:12px}
.ads-landing .lp-request-card .lp-eyebrow{font-size:8px}
.ads-landing .lp-request-card h2{font-size:35px}
.ads-landing .lp-request-card h2 br{display:none}
.ads-landing .lp-request-card>p:not(.lp-eyebrow){font-size:12px}
.ads-landing .lp-field label{font-size:12px}
.ads-landing .lp-field input{min-height:45px;font-size:16px}
.ads-landing .lp-field textarea{font-size:14px}
.ads-landing .lp-field{margin-bottom:14px}
.ads-landing .lp-submit{font-size:12px;min-height:52px;padding:12px}
.ads-landing .lp-form-reassurance{font-size:10px}
.ads-landing .lp-privacy,.ads-landing .preview-note{font-size:10px}
.ads-landing .lp-form-contact{font-size:11px}
.ads-landing .lp-hero-footnote{font-size:9px;line-height:1.7;padding-top:18px}
.ads-landing .lp-trust-inner{grid-template-columns:1fr;gap:13px;padding:22px 0;text-align:left;font-size:10px}
.ads-landing .lp-trust-inner>span{display:flex;align-items:center;justify-content:space-between;gap:15px}
.ads-landing .lp-trust-inner>span+span{border:0;border-top:1px solid #31271f;padding-top:13px}
.ads-landing .lp-trust-inner b{display:inline;font-size:11px;margin:0}
.ads-landing .lp-section{padding:54px 0}
.ads-landing h2{font-size:35px}
.ads-landing .lp-section-heading{display:block;margin-bottom:28px}
.ads-landing .lp-section-heading>p{font-size:13px;margin-top:21px;max-width:none}
.ads-landing .lp-options-grid{grid-template-columns:1fr;gap:30px}
.ads-landing .lp-image-frame img{aspect-ratio:1.42}
.ads-landing .lp-option:first-child .lp-image-frame img{object-position:center 55%}
.ads-landing .lp-option figcaption{padding-top:16px}
.ads-landing .lp-option h3{font-size:27px;margin:7px 0}
.ads-landing .lp-option p{font-size:13px;max-width:none}
.ads-landing .lp-inline-cta{display:block;margin-top:27px;padding-top:20px}
.ads-landing .lp-inline-cta p{font-size:12px}
.ads-landing .lp-inline-cta .lp-text-link{margin-top:15px}
.ads-landing .lp-project-grid,.ads-landing .lp-process-grid,.ads-landing .lp-pricing-grid,.ads-landing .lp-faq-grid,.ads-landing .lp-team-grid{grid-template-columns:1fr;gap:33px}
.ads-landing .lp-project-photo{padding-left:15px}
.ads-landing .lp-project-photo:before{top:15px;bottom:-15px}
.ads-landing .lp-project-photo img{height:400px}
.ads-landing .lp-project-photo figcaption{left:30px;bottom:15px;font-size:9px}
.ads-landing .lp-project-copy{padding-top:17px}
.ads-landing .lp-project-copy>p:not(.lp-eyebrow){font-size:13px;margin:20px 0}
.ads-landing .lp-review{margin:23px 0}
.ads-landing .lp-review blockquote{font-size:26px}
.ads-landing .lp-project-cta{font-size:12px}
.ads-landing .lp-process-visual img{height:330px}
.ads-landing .lp-process-visual span{font-size:10px}
.ads-landing .lp-steps{gap:23px}
.ads-landing .lp-steps li{gap:18px;padding-bottom:23px}
.ads-landing .lp-steps h3{font-size:25px}
.ads-landing .lp-steps p{font-size:13px}
.ads-landing .lp-pricing-grid>div>p:not(.lp-eyebrow){font-size:13px}
.ads-landing .lp-pricing .lp-button{font-size:12px}
.ads-landing .lp-faq-grid{gap:28px}
.ads-landing .lp-faq-grid>div>p:not(.lp-eyebrow){font-size:13px;margin:21px 0}
.ads-landing .lp-questions summary{font-size:13px;padding-block:21px}
.ads-landing .lp-questions details p{font-size:12px}
.ads-landing .lp-team-grid>img{height:280px}
.ads-landing .lp-team-grid>div>p:not(.lp-eyebrow){font-size:13px}
.ads-landing .lp-team .lp-button{font-size:12px}
.ads-landing .lp-final-cta{padding:55px 0}
.ads-landing .lp-final-cta h2{font-size:34px}
.ads-landing .lp-final-cta p:not(.lp-eyebrow){font-size:13px}
.ads-landing .lp-final-cta .lp-button{font-size:12px;gap:12px}
.ads-landing footer{padding-bottom:100px}
.ads-landing .lp-footer-grid{grid-template-columns:1fr 1fr;gap:25px}
.ads-landing .lp-footer-grid>div:first-child{grid-column:1/-1}
.ads-landing .lp-footer-grid img{width:150px}
.ads-landing .lp-footer-bottom{display:block;font-size:9px}
.ads-landing .lp-footer-bottom>span{display:block;margin-top:6px}
.ads-landing .lp-mobile-bar{display:flex;position:fixed;bottom:0;left:0;right:0;background:#15110ff5;border-top:1px solid #5f4330;z-index:30;gap:13px;align-items:center;padding:9px 5% calc(9px + env(safe-area-inset-bottom));box-shadow:0 -4px 24px #0004}
.ads-landing .lp-mobile-bar>a:first-child{font-size:12px;white-space:nowrap;padding:10px 8px 10px 0}
.ads-landing .lp-mobile-bar .lp-button{flex:1;min-height:45px;font-size:11px;gap:18px;padding:10px}
.ads-landing .lp-mobile-bar.is-hidden{transform:translateY(110%);pointer-events:none}
.ads-landing .lp-mobile-bar{transition:transform .2s}
}
@media(prefers-reduced-motion:reduce){html:has(.ads-landing){scroll-behavior:auto}
.ads-landing *,.ads-landing *:before,.ads-landing *:after{transition:none!important}
}
.ads-landing .lp-configurator-callout{display:flex;align-items:center;justify-content:space-between;gap:35px;border:1px solid #cbb8a5;padding:27px 30px;margin-top:35px;background:#eee4d8}
.ads-landing .lp-configurator-callout .lp-eyebrow{margin-bottom:7px}
.ads-landing .lp-configurator-callout h3{font-size:29px;margin-bottom:10px}
.ads-landing .lp-configurator-callout p:not(.lp-eyebrow){font-size:13px;max-width:620px}
.ads-landing .lp-configurator-callout .lp-button{flex-shrink:0;font-size:12px}
@media(max-width:760px){.ads-landing .lp-configurator-callout{display:block;padding:23px}
.ads-landing .lp-configurator-callout h3{font-size:27px}
.ads-landing .lp-configurator-callout .lp-button{margin-top:21px;width:100%}
}


.ads-landing .lp-footer-bottom .cookie-settings{font-size:11px;color:#c3b9b1}.ads-landing .lp-header{margin:0}.ads-landing .lp-request-card form.contact-form{display:block}.ads-landing .whatsapp-float{z-index:18}