/* Floor & Wall Interior Design – stijl-laag bovenop de Site Machine (v2, strak en modern).
   Idee: een galerie voor oppervlakken. Veel wit-papier, grote titels in Julius Sans One, beelden die tot de rand doorlopen,
   en verder alleen haarlijnen. Geen kaders, geen schaduwen, geen afgeronde hoeken.
   Kleuren: papier #FBF9F5, steen #F2EDE4 (wisselvlak), taupe #ADA19E (lijnen), klei #A26F52 (knoppen), klei-donker #8A5A40
   (kleine tekst en links, haalt AA), inkt #2B2622. */
:root{--fw-paper:#FBF9F5;--fw-stone:#F2EDE4;--fw-white:#FFFFFF;--fw-taupe:#ADA19E;--fw-line:#E3DCD2;--fw-clay:#A26F52;--fw-clay-d:#8A5A40;
  --fw-ink:#2B2622;--fw-text:#433B36;--fw-muted:#6E6460;--fw-head:var(--sm-head),"Julius Sans One","Montserrat",Arial,sans-serif;
  --fw-gap:clamp(64px,9vw,136px);--fw-edge:max(20px,calc((100vw - 1380px) / 2 + 15px))}

/* ---------- basis, ook header en footer ---------- */
html{font-synthesis:none}
body{background:var(--fw-paper)}
body,.sm{color:var(--fw-text)}
.sm{overflow-x:clip}
h1,h2,h3,h4,.heading-font,.sm h1,.sm h2,.sm h3{font-family:var(--fw-head)!important;font-weight:400!important;letter-spacing:.01em;color:var(--fw-ink);text-transform:none}

.header-wrapper,.header-main,#header .header-bg-color{background:var(--fw-paper)!important}
.header-main{box-shadow:none;border-bottom:1px solid var(--fw-line)}
.header-top,.top-bar{background:var(--fw-ink)!important}
html body .header-nav-main.nav>li>a{font-family:var(--fw-head)!important;font-weight:400;font-size:14.5px;letter-spacing:.05em;text-transform:none;color:var(--fw-ink)!important;padding:8px 0!important;text-decoration:none!important;border-bottom:1px solid transparent;transition:border-color .2s,color .2s}
html body .header-nav-main.nav>li{margin:0 14px}
html body .header-nav-main.nav>li.has-dropdown>a .icon-angle-down,html body .header-nav-main.nav>li>a i{font-size:11px;opacity:.6;margin-left:4px}
html body .header-nav-main.nav>li>a:hover,html body .header-nav-main.nav>li.active>a,html body .header-nav-main.nav>li.current-menu-ancestor>a{color:var(--fw-ink)!important;border-bottom-color:var(--fw-clay)}
html body .header-nav-main.nav>li.sm-menu-cta,html body .header-nav-main.nav>li.sm-menu-calc{margin:0 0 0 10px}
html body .header-nav-main.nav>li.sm-menu-calc{margin-left:22px}
html body .nav li.sm-menu-cta>a,html body .nav li.sm-menu-calc>a{font-family:var(--sm-font)!important;font-size:14px!important;font-weight:600!important;letter-spacing:.01em!important;line-height:1!important;height:44px;display:inline-flex!important;align-items:center;padding:0 18px!important;border-radius:0!important;border:1px solid var(--fw-clay-d)!important;text-decoration:none!important}
html body .nav li.sm-menu-cta>a{background:var(--fw-clay-d)!important;color:#fff!important}
html body .nav li.sm-menu-cta>a:hover{background:#74492F!important;border-color:#74492F!important;color:#fff!important}
html body .nav li.sm-menu-calc>a{background:transparent!important;color:var(--fw-clay-d)!important}
html body .nav li.sm-menu-calc>a:hover{background:var(--fw-stone)!important;color:var(--fw-clay-d)!important}
.nav-dropdown{background:var(--fw-paper)!important;border:1px solid var(--fw-line)!important;border-radius:0!important;box-shadow:0 24px 48px rgba(43,38,34,.06)!important;padding:10px 0!important}
.nav-dropdown li a{color:var(--fw-text)!important;font-family:var(--sm-font)!important;font-size:14.5px;letter-spacing:0;text-transform:none;padding:9px 24px!important;text-decoration:none!important;border:0!important}
.nav-dropdown li a:hover{color:var(--fw-clay-d)!important;background:transparent!important}

/* ---------- typografie en ritme ---------- */
.sm{font-size:16px;line-height:1.72;background:var(--fw-paper)}
html body .sm h1,html body .sm .sm-hero h1{font-size:clamp(34px,4.2vw,58px)!important;line-height:1.08;letter-spacing:0;margin:0 0 .45em;max-width:18ch}
.sm h2{font-size:clamp(28px,3vw,40px);line-height:1.14;margin:0 0 .55em;max-width:22ch}
.sm h3{font-size:clamp(18px,1.4vw,21px);line-height:1.3;margin:0 0 .5em;letter-spacing:.02em}
.sm p,.sm li{max-width:68ch}
.sm b,.sm strong{font-weight:600;color:var(--fw-ink)}
.sm a{color:var(--fw-clay-d);text-decoration:none}
.sm a:hover{color:var(--fw-clay)}
/* alleen links in lopende tekst krijgen een dunne lijn, zodat ze herkenbaar blijven */
.sm .sm-sec p a:not(.sm-btn):not(.sm-more),.sm .sm-hero p a:not(.sm-btn),.sm .sm-prose li a,.sm .sm-faq a{text-decoration:underline;text-decoration-color:rgba(138,90,64,.35);text-decoration-thickness:1px;text-underline-offset:4px}
.sm .sm-sec p a:not(.sm-btn):hover,.sm .sm-prose li a:hover,.sm .sm-faq a:hover{text-decoration-color:currentColor}
.sm .sm-sec{padding:var(--fw-gap) 0}
.sm .sm-sec--tight{padding:calc(var(--fw-gap)*.5) 0}
.sm .sm-sec--soft{background:var(--fw-stone)}
.sm .sm-lead{font-size:clamp(17px,1.3vw,19px);line-height:1.65;color:var(--fw-text);max-width:56ch}
.sm .sm-note{color:var(--fw-muted);font-size:14px}
.sm .sm-split{gap:clamp(40px,7vw,120px);align-items:center}

/* ---------- knoppen: rechthoekig, rustig ---------- */
.sm .sm-btns{gap:14px}
.sm .sm-btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:14px 28px;border-radius:0;font-family:var(--sm-font);font-size:19px;font-weight:700;letter-spacing:0;text-decoration:none;border:1px solid transparent;box-shadow:none;transition:background .2s,color .2s,border-color .2s}
.sm .sm-btn--primary{background:var(--fw-clay);color:#fff;border-color:var(--fw-clay)}
.sm .sm-btn--primary:hover{background:var(--fw-clay-d);border-color:var(--fw-clay-d);color:#fff}
.sm .sm-btn--ghost{background:transparent;color:var(--fw-ink);border-color:var(--fw-ink)}
.sm .sm-btn--ghost:hover{background:var(--fw-stone);color:var(--fw-ink);border-color:var(--fw-ink)}
.sm .sm-btn::after{content:none!important}
.sm .sm-btn:focus-visible,.sm a:focus-visible,.sm summary:focus-visible{outline:2px solid var(--fw-clay-d);outline-offset:3px}
.sm a.sm-more{font-weight:600;font-size:15px;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}

/* ---------- hero: tekst links, beeld tot de rand ---------- */
.sm .sm-hero{background:var(--fw-paper);padding:0;border-bottom:1px solid var(--fw-line)}
.sm .sm-hero__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center}
.sm .sm-hero__grid>div:first-child{padding:clamp(48px,6vw,96px) 0}
.sm .sm-hero__solo{padding:clamp(56px,7vw,104px) 0}
.sm .sm-hero .sm-checks{margin:26px 0 0;padding:0;border-top:1px solid var(--fw-line)}
.sm .sm-hero .sm-checks li{padding:11px 0 11px 26px;margin:0;border-bottom:1px solid var(--fw-line);font-size:15px;font-weight:500;color:var(--fw-ink)}
.sm .sm-hero .sm-checks li::before{content:"";top:21px;left:0;width:12px;height:1px;border-radius:0;background:var(--fw-clay)}
.sm .sm-hero .sm-btns{margin-top:30px}
.sm .sm-trust{margin-top:22px;font-size:13.5px;gap:8px 24px}
.fw-hero-aside{position:relative;padding:clamp(32px,4vw,64px) 0}
.fw-ph{margin:0;overflow:hidden;background:var(--fw-line)}
.fw-ph img{display:block;width:100%;height:100%;object-fit:cover}
.sm .sm-hero .fw-ph--hero{aspect-ratio:4/5;max-height:560px;width:100%}
.sm .sm-split .fw-ph{aspect-ratio:4/3;max-height:460px;width:100%}

/* ---------- index van diensten: lijnen in plaats van kaarten ---------- */
.fw-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--fw-ink)}
.sm a.fw-card{display:flex;flex-direction:column;gap:8px;padding:28px 28px 30px 0;margin-right:28px;border-bottom:1px solid var(--fw-line);text-decoration:none;color:var(--fw-text);background:transparent}
.fw-card h3{margin:0!important;font-size:20px!important;transition:color .2s}
.sm a.fw-card:hover h3{color:var(--fw-clay-d)}
.fw-card p{margin:0;font-size:14.5px;line-height:1.6;color:var(--fw-muted)}
.fw-card .sm-more{margin-top:auto;padding-top:14px;color:var(--fw-clay-d);font-weight:600;font-size:14px;align-self:flex-start;border-bottom:1px solid currentColor}

/* ---------- kleurenlijst ---------- */
.fw-colors{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--fw-ink)}
.fw-colors li{margin:0;padding:18px 18px 18px 0;border-bottom:1px solid var(--fw-line);display:flex;align-items:baseline;gap:14px;max-width:none}
.fw-colors b{font-family:var(--fw-head);font-weight:400!important;letter-spacing:.04em;color:var(--fw-clay-d);min-width:44px;font-size:14px}
.fw-colors span{color:var(--fw-ink);font-size:16px}

/* ---------- stappen: genummerd, want het is een volgorde ---------- */
.sm .sm-steps{gap:0;border-top:1px solid var(--fw-ink)}
.sm .sm-step{background:transparent;border:0;border-radius:0;padding:28px 32px 8px 0}
.sm .sm-step::before{width:auto;height:auto;border-radius:0;background:none!important;color:var(--fw-clay-d)!important;font-family:var(--fw-head);font-weight:400;font-size:44px;line-height:1;display:block;margin-bottom:18px;place-items:initial}
.sm .sm-step h3{font-size:19px!important}
.sm .sm-step p{font-size:14.5px;color:var(--fw-muted)}

/* ---------- engine-onderdelen ---------- */
.sm .sm-card{background:var(--fw-white);border:1px solid var(--fw-line);border-radius:0;box-shadow:none;padding:clamp(24px,3vw,40px)}
.sm .sm-table-wrap{border:0;border-radius:0}
.sm .sm-table{border-collapse:collapse;background:transparent}
.sm .sm-table th{background:transparent;color:var(--fw-ink);font-weight:600;font-size:13.5px;border-bottom:1px solid var(--fw-ink);padding:12px 14px 12px 0}
.sm .sm-table td{border-bottom:1px solid var(--fw-line);background:transparent;padding:14px 14px 14px 0}
.sm .sm-table tr:nth-child(even) td{background:transparent}
.sm .sm-faq{border-top:1px solid var(--fw-ink)}
.sm .sm-faq details{background:transparent;border:0;border-bottom:1px solid var(--fw-line);border-radius:0;padding:22px 0}
.sm .sm-faq details:first-child{padding-top:22px}
.sm .sm-faq summary{font-weight:600;font-size:17px;color:var(--fw-ink)}
.sm .sm-faq summary::after{color:var(--fw-clay-d);font-weight:300}
.sm .sm-quick,.sm .sm-calc{border-radius:0;border:1px solid var(--fw-line);box-shadow:none;background:var(--fw-white)}
.sm input,.sm select,.sm textarea{border-radius:0!important;border:1px solid var(--fw-taupe)!important;background:var(--fw-white)!important;box-shadow:none!important}
.sm input:focus,.sm select:focus,.sm textarea:focus{border-color:var(--fw-ink)!important;outline:none}
.sm .sm-expert{background:transparent;border:0;border-top:1px solid var(--fw-ink);border-radius:0;padding:24px 0 0}
.sm .sm-nap{border-radius:0}
.sm .sm-olist li::marker{color:var(--fw-clay-d);font-weight:600}
.sm .sm-checks li::before{background:transparent;color:var(--fw-clay-d)}

/* ---------- cta-band: donker vlak over de volle breedte van de wrap ---------- */
.sm .sm-ctaband{background:var(--fw-ink)!important;color:#D9D1C7;border-radius:0;padding:clamp(36px,5vw,72px)}
.sm .sm-ctaband h2{color:#FBF9F5!important;font-size:clamp(28px,3vw,40px)}
.sm .sm-ctaband p{color:#D9D1C7}
.sm .sm-ctaband .sm-btn--ghost{color:#FBF9F5;border-color:#FBF9F5}
.sm .sm-ctaband .sm-btn--ghost:hover{background:#FBF9F5;color:var(--fw-ink)}

/* ---------- footer ---------- */
.sm.sm-footer{background:var(--fw-ink);color:#CFC6BC}
.sm-footer h4{font-family:var(--fw-head)!important;font-size:15px!important;letter-spacing:.08em;text-transform:uppercase;color:#FBF9F5!important}
.sm-footer a{color:#E9E3DA!important;text-decoration:none!important}
.sm-footer a:hover{color:#D9B39C!important}
.sm-footer .sm-btn--primary{background:var(--fw-clay)!important;border-radius:0!important;color:#fff!important}

/* ---------- mobiele header van de engine ---------- */
.sm-mh{background:var(--fw-paper)!important;border-bottom:1px solid var(--fw-line)}
.sm-mh .sm-mh__cta{background:var(--fw-clay-d)!important;border-radius:0!important;text-decoration:none!important}.sm-mh .sm-mh__cta span{text-decoration:none!important}
.sm-mh .sm-mh__ic,.sm-mh .sm-mh__burger{border-radius:0!important}
.sm-mh .sm-mh__name{font-family:var(--fw-head);font-size:14px;line-height:1.15;letter-spacing:.04em;max-width:34vw;display:block;white-space:normal}
.sm-mh .sm-mh__logo img{max-height:40px;width:auto}

@media (prefers-reduced-motion:reduce){.sm *{transition:none!important}}
@media (max-width:1099px){.fw-cards,.fw-colors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:849px){
  .sm .sm-hero__grid{grid-template-columns:1fr;min-height:0;gap:0}
  .sm .sm-hero__grid>div:first-child{padding:44px 0 36px}
  .fw-hero-aside{padding:0 0 40px}
  .sm .sm-hero .fw-ph--hero{aspect-ratio:3/2;max-height:none}
  .sm .sm-split .fw-ph{aspect-ratio:3/2;max-height:none}
  .sm .sm-btn{width:100%}
  .sm .sm-step{padding-right:0}
}
@media (max-width:549px){.fw-cards,.fw-colors{grid-template-columns:1fr}.sm a.fw-card{margin-right:0;padding-right:0}}
.sm-sticky{background:var(--fw-paper)!important;border-top:1px solid var(--fw-line)!important;box-shadow:none!important}
.sm-sticky a,.sm-sticky .sm-btn{border-radius:0!important}
.sm-sticky a[class*="primary"],.sm-sticky .sm-btn--primary{background:var(--fw-clay-d)!important;border-color:var(--fw-clay-d)!important}
.sm-mh .sm-mh__cta,.sm-mh .sm-mh__ic,.sm-mh .sm-mh__burger{border-radius:0!important}
.sm .sm-quick__out b,.sm .sm-calc [data-tot] b,.sm .sm-calc__sum b{color:#fff}
.sm .sm-hero__grid>div:last-child:not(:has(.fw-hero-aside)){align-self:center;padding:clamp(40px,5vw,80px) 0}
.sm .sm-calc__sum b,.sm .sm-calc__sum strong,.sm .sm-calc__tot,.sm .sm-calc__tot b{color:#fff}
.sm .sm-quick__out,.sm .sm-calc__sum,.sm .sm-calc__bar{border-radius:0!important}

/* ---------- mobiele header en menu (v3) ---------- */
.sm.sm-mh a{text-decoration:none!important}
.sm-mh .sm-mh__bar{height:62px;padding:0 12px 0 16px;gap:10px;border-bottom:1px solid var(--fw-line)}
.sm-mh .sm-mh__logo{flex:1 1 auto;min-width:0;overflow:hidden}
.sm-mh .sm-mh__logo img{height:auto;max-height:34px;max-width:100%;width:auto}
.sm-mh .sm-mh__name{font-family:var(--fw-head);font-size:15px;line-height:1.1;letter-spacing:.03em;color:var(--fw-ink);white-space:normal;max-width:none;display:block;overflow:hidden;text-overflow:ellipsis}
.sm-mh .sm-mh__act{gap:6px;flex:0 0 auto}
.sm-mh .sm-mh__cta,.sm-mh .sm-mh__ic,.sm-mh .sm-mh__burger{height:40px;min-width:40px;border-radius:0!important}
.sm-mh .sm-mh__cta{width:40px;padding:0!important;justify-content:center}
.sm-mh .sm-mh__cta .sm-mh__s,.sm-mh .sm-mh__cta .sm-mh__l{display:none!important}
.sm-mh .sm-mh__ic{width:40px;background:transparent;border:1px solid var(--fw-line)}
.sm-mh .sm-mh__burger{background:var(--fw-ink);padding:0 12px}
.sm-mh .sm-mh__lines i{background:#FBF9F5}
.sm-mh .sm-mh__usp{background:var(--fw-stone);color:var(--fw-ink);justify-content:center;gap:14px;padding:6px 12px;font-size:12px;font-weight:500}
.sm-mh .sm-mh__usp span:nth-child(n+2){display:none}
.sm-mh .sm-mh__usp svg{color:var(--fw-clay-d)}
.sm-mh .sm-mh__nav{background:var(--fw-paper)}
.sm-mh .sm-mh__list>li{border-bottom:1px solid var(--fw-line)}
.sm-mh .sm-mh__list a,.sm-mh .sm-mh__list summary{font-family:var(--fw-head);font-weight:400;font-size:19px;letter-spacing:.03em;color:var(--fw-ink)!important;padding:16px 2px}
.sm-mh .sm-mh__list details ul{background:transparent;border-radius:0;padding:0 0 10px 2px;margin:0}
.sm-mh .sm-mh__list details a{font-family:var(--sm-font);font-size:15.5px;font-weight:500;letter-spacing:0;padding:9px 0;border-radius:0;color:var(--fw-text)!important}
.sm-mh .sm-mh__list details .sm-mh__all a{color:var(--fw-clay-d)!important;font-weight:600}
.sm-mh .sm-mh__line{border-radius:0;border-color:var(--fw-line)}
.sm-mh .sm-mh__foot .sm-btn{border-radius:0}
@media (min-width:400px){.sm-mh .sm-mh__usp span:nth-child(2){display:inline-flex}}
.nav-dropdown,.header-nav-main li ul,.header-nav-main .sub-menu{border-radius:0!important;box-shadow:0 18px 40px rgba(43,38,34,.07)!important;border:1px solid var(--fw-line)!important;background:var(--fw-paper)!important}
.sm-mh .sm-mh__foot .sm-btn--ghost{background:transparent;color:var(--fw-ink);border:1px solid var(--fw-ink)}
@media (max-width:849px){.sm .sm-btn{padding:14px 16px;font-size:18.7px}}

/* regio-navigatie onder regiopagina's */
.sm .fw-regio{border-top:1px solid var(--fw-line);padding-top:20px;font-size:14.5px;line-height:1.8;color:var(--fw-ink)}
.sm .fw-regio p{margin:0 0 6px}
.sm .fw-regio a{text-decoration:underline;text-decoration-color:rgba(138,90,64,.35);text-underline-offset:3px}

/* ---------- desktopmenu passend maken (1.1.5) ---------- */
html body #top-bar,html body .header-top{font-size:13px}
html body .header-top .sm-tb{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
html body .header-top .html,html body .header-top .header-contact a{font-size:13px!important}
html body .header-nav-main.nav{flex-wrap:nowrap!important;white-space:nowrap}
html body .header-nav-main.nav>li>a{white-space:nowrap}
@media (max-width:1439px){
  html body .header-nav-main.nav>li{margin:0 10px}
  html body .header-nav-main.nav>li>a{font-size:14px;letter-spacing:.04em}
  html body .header-nav-main.nav>li.sm-menu-calc{margin-left:14px}
  html body .nav li.sm-menu-cta>a,html body .nav li.sm-menu-calc>a{padding:0 14px!important;height:42px}
  .header-top .sm-tb>span:nth-child(3){display:none}
}
@media (max-width:1279px){
  html body .header-nav-main.nav>li{margin:0 8px}
  html body .header-nav-main.nav>li>a{font-size:13.5px;letter-spacing:.03em}
  html body .header-nav-main.nav>li.sm-menu-calc{display:none}
  html body #logo img{max-width:170px;height:auto}
}
@media (max-width:1099px){
  html body .header-nav-main.nav>li{margin:0 6px}
  html body .header-nav-main.nav>li>a{font-size:13px;letter-spacing:.02em}
  html body .nav li.sm-menu-cta>a{padding:0 12px!important;font-size:13px!important}
  html body #logo img{max-width:140px}
  .header-top .sm-tb>span:nth-child(2){display:none}
}
@media (min-width:850px) and (max-width:959px){
  html body .header-nav-main.nav>li.sm-menu-cta{display:none}
}

/* ---------- menu-items met submenu op één lijn (1.1.6) ---------- */
html body .header-nav-main.nav{align-items:center!important}
/* li zelf geen flex: anders klapt het Flatsome-dropdownmenu naar boven uit (1.1.7) */
html body .header-nav-main.nav>li>a{display:inline-flex!important;align-items:center;flex-wrap:nowrap;gap:5px;line-height:1.2!important}
html body .header-nav-main.nav>li>a>i,html body .header-nav-main.nav>li>a .icon-angle-down{display:inline-block!important;position:static!important;margin:0 0 0 2px!important;font-size:10px!important;line-height:1!important;top:auto!important}
/* Flatsome-streepje boven het actieve item weg; wij gebruiken de lijn onder de tekst */
html body .header-nav-main.nav>li>a:before{display:none!important}