/* Huisstijl 2026 — laag bovenop de renovatiesimulator (alleen variabelen + componentregels; app-logica ongemoeid).
   Wordt ALLEEN onder de merkschakelaar ingevoegd door inc/apps-b26.php. Basis = mockup-laag (15/10) +
   stap 16 (19/10): de actie-/offerteknop is overal groen vlak met navy tekst. */
@font-face{font-family:"Atyp";src:url(../assets/fonts/b26/atyp-display-medium.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/b26/inter-latin-400-normal.woff2) format("woff2");font-weight:100 450;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/b26/inter-latin-500-normal.woff2) format("woff2");font-weight:451 550;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/b26/inter-latin-600-normal.woff2) format("woff2");font-weight:551 900;font-display:swap}
:root{
  --navy:#102049;--navy-700:#0B1838;--navy-300:#5B6683;
  --terracotta:#102049;--terracotta-700:#0B1838;
  --sage:#00C864;--sage-100:#E6F9EF;
  --ink:#102049;--ink-soft:#3A4664;
  --line:#E3E6EC;--line-soft:#E3E6EC;
  --wiggly-red:#E20000;--link-blue:#102049;
  --ff-display:"Atyp","Inter",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
  --r-lg:0;--r-xl:0;--r-3xl:0;
  --sh-button:none;
}
body{font-family:var(--ff-body)}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:500;letter-spacing:-.02em}
a{text-decoration-color:#00C864;text-underline-offset:3px}
.eyebrow{color:var(--navy);display:inline-flex;gap:10px;align-items:center;letter-spacing:.1em}
.eyebrow::before{content:"";width:10px;height:10px;background:#00C864}
/* knoppen: primair = groen vlak + navy Atyp (één actiekleur); secundair = omlijnd */
.btn{font-family:"Atyp","Inter",sans-serif;font-weight:500;letter-spacing:0;border-radius:0}
.btn--primary{background:#00C864;color:#102049}
.btn--primary:hover{background:#00B159;color:#102049}
.btn--ghost{border:1px solid #7F889E}
.linkbtn{color:#102049;text-decoration:underline;text-decoration-color:#00C864;text-decoration-thickness:2px;text-underline-offset:4px}
/* kop zoals de site (27/10): desktop rechte balk over de volle breedte, gsm zwevende kaart met rechte hoeken; offerteknop groen en recht.
   28/10: geen glas meer (zoals de site): wit vlak zonder blur, anders oogden logo en tekst wazig boven het navy.
   Gsm: de pill scrolt mee weg, zoals op de site (_header-v2.scss: scroll-away); de offerteknop blijft onderaan in de v2-balk */
.hdr{position:sticky;top:0;margin:0;border:0!important;border-bottom:1px solid rgba(16,32,73,.08)!important;border-radius:0;background:#fff!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:0 8px 24px rgba(16,32,73,.14)}
@media (max-width:768px){.hdr{position:relative;top:auto;margin:12px 12px 0;border:1px solid rgba(255,255,255,.6)!important;box-shadow:0 12px 34px rgba(16,32,73,.2)}}
.hdr__in{padding:8px 24px!important} /* desktop: logo en knop op de inhoudskolom van de simulator (max 1280, marge 24) */
@media (max-width:768px){.hdr__in{height:auto!important;min-height:0;padding:8px 12px 8px 24px!important}.hdr__brand img{width:auto;height:24px}} /* gsm: zelfde maat als de site-pill (logo 24, knop 40, marge 8) */
.hdr__title{font-family:"Atyp",sans-serif;color:#102049}
.hdr .btn--primary.btn--sm{border-radius:0!important;height:40px;padding:0 18px}
.hdr__sub{display:none!important}
/* hero = merkvlak: tekst op navy, artwork onderaan, adreskaart wit */
.herobg{height:400px!important;background:#112049;z-index:-1}
.herobg::before{inset:auto 0 0 0!important;height:200px;background:url(../assets/images/b26/merkvlak.jpg) 70% 100%/cover no-repeat!important;filter:none!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
.herobg::after{display:none}
.hdr{margin-bottom:0}
.hero{position:relative}
.hero .eyebrow{color:#C9D1E6}
.hero h1{color:#fff;font-size:clamp(34px,4.6vw,56px);line-height:1.04}
.hero__lead{color:#D7DDEB!important}
.startveld{background:#fff;box-shadow:0 24px 60px rgba(16,32,73,.18)!important;border:0!important;border-radius:0!important}
.startveld input{border:1px solid #7F889E!important;border-radius:0!important}
.v2stappen div{background:#fff!important;color:#102049!important;border:0!important;box-shadow:0 6px 18px rgba(16,32,73,.12)}
.v2stappen b{background:#00C864!important;color:#102049!important;border-radius:999px}
/* stappenbalk */
.steps{margin-top:72px!important}
.step-tab.is-active{border-bottom-color:#00C864!important;color:#102049}
.step-tab b{color:#5B6683}
/* kaarten en panelen hoekig, accenten zonder terracotta-kleurvlakken */
.upscard{background:#F3F4F6!important;border-color:#102049!important}
.benefit__num{background:#00C864!important;color:#102049!important}
@media(max-width:680px){
  .hdr{margin:12px 12px 0}
  .hdr__in{padding:8px 12px 8px 24px!important}
  .herobg{height:470px!important}
  .herobg::before{height:170px}
}
/* foutmelding = merkpunt 4: navy tekst, rode rand #E20000 + rood icoon (geen roze vlak) */
.err{position:relative;background:#fff!important;border:1px solid #E20000!important;border-left-width:4px!important;border-radius:0!important;color:#102049!important;padding:12px 16px 12px 46px!important}
.err::before{content:"!";position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:999px;background:#E20000;color:#fff;font:600 13px/20px Inter,sans-serif;text-align:center}
/* impressie-badge: officieel logo (on light) op een wit vlak, rechte hoeken */
.ba__logo{background:#fff!important;padding:8px 12px!important;border-radius:0!important;box-shadow:0 4px 14px rgba(16,32,73,.18)!important}
/* cookiebanner (Complianz) zoals op de site */
.cmplz-cookiebanner{border-radius:0!important;font-family:"Inter",system-ui,sans-serif!important;color:#102049!important;box-shadow:0 16px 48px rgba(16,32,73,.22)!important}
.cmplz-cookiebanner .cmplz-title{font-family:"Atyp","Inter",system-ui,sans-serif!important;font-weight:500!important;color:#102049!important}
.cmplz-cookiebanner .cmplz-btn{border-radius:0!important;font-family:"Atyp","Inter",system-ui,sans-serif!important;font-weight:500!important;background:#fff!important;color:#102049!important;border:1px solid #102049!important;font-size:14px!important;padding:10px 12px!important;white-space:normal!important;line-height:1.2!important;height:auto!important;min-height:44px}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept{background:#00C864!important;color:#102049!important;border-color:#00C864!important}
.cmplz-cookiebanner .cmplz-links a,.cmplz-cookiebanner .cmplz-link{color:#102049!important;text-decoration-color:#00C864!important}
.voorna__lbl{padding:4px 10px!important;border-radius:0!important}
/* rechte hoeken overal (22/10): optieknoppen, EPC-schaal + labelkeuze, tips, opbrengst-/prijskaders, voor/na-labels, genummerde markers. Bewust rond: de kop-pil + zijn knop en de info-icoontjes. */
.pill,.tipbox,.epc__seg,.brug__rendement,.brug__prijs,.brug__kern,.brug__lijn,.ba__fs,.ba__label,.benefit__num,button:not(.hdr *):not(.hdr){border-radius:0!important}
.benefit__num{background:#00C864!important;color:#102049!important}
/* accent in rgba() (schaduwen/gloed): navy i.p.v. de oude terracotta (22/10) */
body[data-cx-b26]{--cx-accent-rgb:16,32,73}
/* Eerste scherm (22/10, Kristof: "2 adresvelden & 2 visualisatievelden — onduidelijk"). Vóór de start: alleen het
   hero-adresveld + één voorbeeld (voor/na), geen stappenbalk en geen leeg beeldvlak. Na de start (is-gestart): het
   hero-veld verdwijnt meteen → één adresveld (stap 1, om te wijzigen) en één beeld (rechts). */
body.is-stap1:not(.is-gestart):not(.has-photo) .steps,
body.is-stap1:not(.is-gestart):not(.has-photo) .preview{display:none!important}
body.is-stap1:not(.is-gestart):not(.has-photo) .layout{grid-template-columns:minmax(0,1fr)!important;max-width:980px;margin-inline:auto;margin-top:72px}
body.is-stap1:not(.is-gestart):not(.has-photo) .panel[data-panel="0"] .card{display:flex;flex-direction:column;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
body.is-stap1:not(.is-gestart):not(.has-photo) .panel[data-panel="0"] .adviseur{order:2;align-self:center;margin-top:20px}
body.is-stap1:not(.is-gestart):not(.has-photo) .voorna__cap{text-align:center;max-width:62ch;margin-inline:auto}
body.is-gestart .hero,body.is-gestart .herobg{display:none!important}
/* Tekst op het merkvlak: het gradient begint pas ónder de hero-tekst (contrast — de lead stond deels op het groen) */
.herobg::before{height:120px!important;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 70%)!important;mask-image:linear-gradient(to bottom,transparent 0,#000 70%)!important}
@media(max-width:680px){.herobg::before{height:96px!important}}
/* Na de start: het voorbeeld (voor/na) maakt plaats — rechts staat het enige beeld (jouw woning). */
body.is-gestart .v2demo{display:none!important}
/* gsm: adresveld kromp in de kolom-flex (flex-basis 0) tot ±30 px hoog; stappenkaartjes vierkant; kleiner gat boven het voorbeeld */
@media(max-width:680px){
  .startveld__rij input{flex:0 0 auto!important;height:52px!important}
  .v2stappen div,.v2stappen b{border-radius:0!important}
  body.is-stap1:not(.is-gestart):not(.has-photo) .layout{margin-top:28px}
}
/* gsm: lange stapknoppen ("Naar stap 3 — Ramen & deuren →") braken de pijl af naar een tweede regel */
@media(max-width:680px){[data-v2verder],.pnav .btn{font-size:15px!important;white-space:nowrap;letter-spacing:-.005em}}
/* gsm: de vier stappenkaartjes onder het adresveld weg (23/10, Kristof: "wat doen die stappen hier?" — op desktop stonden ze er al niet) */
.v2stappen{display:none!important}

/* Wegwijzer bij de impressie-gate (23/10): neutraal tot de bezoeker iets doet — geen rode rand of rood icoon */
.err.is-hint{background:#F3F4F6!important;border:0!important;border-left:4px solid #102049!important;color:#3A4664!important}
.err.is-hint::before{content:"i"!important;background:#102049!important;font-family:Georgia,serif!important;font-style:italic}

/* ── Wachtscherm vóór de render (23/10, "zo premium mogelijk"): navy sluier over de geblurde foto, merkvierkant +
      eyebrow, witte Atyp-tekst, een zachte lichtstrook die over het beeld schuift en het merkelement in de hoek. ── */
.veil{background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.09) 48%,rgba(0,200,100,.14) 52%,transparent 65%) 120% 0/250% 100% no-repeat,
  linear-gradient(160deg,rgba(16,32,73,.80) 0%,rgba(16,32,73,.64) 55%,rgba(16,32,73,.84) 100%)!important;color:#fff!important;gap:12px!important;overflow:hidden;
  animation:cxVeilSheen 3.6s cubic-bezier(.45,0,.2,1) infinite}
.veil::before{content:"AI-impressie";display:inline-block;padding-left:20px;background:linear-gradient(#00C864,#00C864) 0 50%/10px 10px no-repeat;font:600 12px/1.2 "Inter",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#C9D1E6;order:-1}
html[lang^="fr"] .veil::before{content:"Impression IA"}
.veil span{font-family:"Atyp","Inter",sans-serif;font-weight:500;font-size:clamp(20px,2.1vw,26px);line-height:1.2;color:#fff;max-width:92%}
/* merklijn: dunne strook onderaan in de kleuren van het merkelement */
.veil::after,.renderov::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;pointer-events:none;background:linear-gradient(90deg,#102049 0%,#0B6B52 35%,#00C864 65%,#8CC63F 100%)}
@keyframes cxVeilSheen{0%{background-position:120% 0,0 0}60%,100%{background-position:-60% 0,0 0}}

/* ── Render-animatie (tijdens de ±1 min render): navy vlak met het merkvlak onderaan, huisje in lijnwerk dat fase per
      fase opbouwt in wit en groen, fasetekst die zacht wisselt, dunne vierkante voortgangsbalk met lichtstrook. ── */
.renderov{background:radial-gradient(120% 90% at 50% 35%,rgba(16,32,73,.86) 0%,rgba(16,32,73,.95) 70%)!important;backdrop-filter:blur(10px) saturate(1.2)!important;gap:16px!important;overflow:hidden;isolation:isolate}
.renderov svg{filter:drop-shadow(0 18px 28px rgba(0,0,0,.35))}
.rh-lijn{stroke:#fff!important;stroke-width:2!important}
.rh-dak-paint{fill:rgba(255,255,255,.16)!important}
.rh-gevel-paint{fill:#00C864!important;opacity:.92}
.rh-raam{fill:rgba(255,255,255,.14)!important;stroke:#fff!important;stroke-width:1.6!important}
@keyframes rovRaam{0%,54%{fill:rgba(255,255,255,.14)}62%,88%{fill:#fff}96%,100%{fill:rgba(255,255,255,.14)}}
.rh-deur{fill:#102049!important;stroke:#fff!important;stroke-width:1.6!important}
.renderov__txt{color:#fff!important;font-size:clamp(18px,1.9vw,22px)!important;min-height:30px!important;max-width:28ch}
.renderov__txt.is-wissel{animation:cxFase .6s cubic-bezier(.22,1,.36,1)}
@keyframes cxFase{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.renderov__bar{width:min(300px,80%)!important;height:4px!important;border-radius:0!important;background:rgba(255,255,255,.18)!important;position:relative}
.renderov__bar span{border-radius:0!important;background:#00C864!important;position:relative;overflow:hidden}
.renderov__bar span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);transform:translateX(-100%);animation:cxBar 1.6s ease-in-out infinite}
@keyframes cxBar{to{transform:translateX(100%)}}
.renderov__pct{font-family:"Atyp","Inter",sans-serif!important;font-weight:500!important;font-size:15px!important;color:#00C864!important;letter-spacing:.02em!important}
.renderov__sub{color:rgba(255,255,255,.72)!important;margin-top:-6px!important}
@media(prefers-reduced-motion:reduce){.veil,.renderov__bar span::after,.renderov__txt.is-wissel{animation:none!important}}
/* Street View-pad (23/10): uploaden = één ingeklapte, duidelijke secundaire CTA onderaan — geen open uploadveld en geen
   tweede verwijzing in de tekst. */
#optBSect{display:flex;flex-direction:column}
#optBSect .fkterug[data-fk="upload"]{display:inline-flex!important;order:20;align-self:flex-start;align-items:center;gap:8px;margin:18px 0 0!important;padding:12px 18px!important;
  background:#fff!important;border:1px solid #102049!important;border-radius:0!important;color:#102049!important;font:500 15px/1.2 "Atyp","Inter",sans-serif!important;text-decoration:none!important;cursor:pointer}
#optBSect .fkterug[data-fk="upload"]:hover{background:#F3F4F6!important}
#svStappen > span.hint:has(.v2upload){display:none!important}
#optBSect:has(#svErr.is-on) .fkterug[data-fk="upload"]{display:none!important} /* de foutmelding draagt dan zelf de uitweg */
/* Flow (23/10, Kristof): startscherm = alleen het adres → stap 1 = Street View. Uploaden pas via de link in stap 1. */
.startveld__alt .v2upload{display:none!important}
.startveld__alt{justify-content:center!important}
/* Upload-pad met een gekend adres: adresblok ingeklapt tot de bevestigingsregel + "Wijzig" */
#uploadAdresSect.is-bekend > h3,#uploadAdresSect.is-bekend > .hint:not(#uploadAdresStatus),#uploadAdresSect.is-bekend > .fieldrow{display:none!important}
#uploadAdresSect.is-bekend{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
#uploadAdresSect.is-bekend #uploadAdresStatus{display:block!important;margin:0!important;color:#102049;font-weight:500}
#uploadAdresSect:not(.is-bekend) .adres-wijzig{display:none}
#optASect .fkterug[data-fk="sv"]{font-weight:500}
/* A-Z-check 27/10: keuzevenster "welke woning is de jouwe" had afgeronde hoeken; zwevende "Toestemming beheren" zoals op de site weg
   (de site toont de knop na toestemming niet meer; cookie-instellingen staan in de footer van elke pagina) */
#woningPositieSect,#woningPositieSect button{border-radius:0!important}
#cmplz-manage-consent{display:none!important}
/* CTA-regel (22/10): groen = offerte; "Bekijk onze realisaties" na de aanvraag is secundair → navy */
#leadRealisaties{background:#102049!important;color:#fff!important}
#leadRealisaties:hover{background:#0B1838!important}
/* 27/10 (gsm-check): samenvattingslabels, fotobadge en voor/na-labels recht zoals de rest van de huisstijl */
.tag,.preview__badge,.ba__label{border-radius:0!important}