/* A. Teulings Schilderwerken - demo homepage */
@font-face{font-family:"Bricolage Grotesque";src:url(../assets/fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../assets/fonts/sourcesans3.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url(../assets/fonts/sourcesans3-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --papier:#f2f2ee;
  --papier-2:#e7e7e1;
  --inkt:#151515;
  --inkt-2:#3d3d3a;
  --rood:#d7181f;
  --rood-tekst:#b8121a;
  --wit:#fbfbf8;
  --muur:#a8553f;
  --voeg:#c98a76;
  --deur:#1f4b33;
  --deur-nieuw:#1f4b33;
  --rand:rgba(21,21,21,.14);
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --tekst:"Source Sans 3",ui-sans-serif,system-ui,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --max:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;-webkit-tap-highlight-color:rgba(215,24,31,.15);background:var(--papier);color:var(--inkt);font-family:var(--tekst);font-size:1.0625rem;line-height:1.6;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
a,button,label,input,textarea{touch-action:manipulation}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.02;letter-spacing:-.025em;margin:0;font-variation-settings:"opsz" 96}
p{margin:0 0 1em}
.sr,.sr-defs{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--inkt);color:var(--wit);padding:10px 16px;text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--rood);outline-offset:3px}

.kop-xl{font-size:clamp(2.4rem,6.2vw,5.6rem)}
.kop-l{font-size:clamp(2rem,4.2vw,3.6rem)}
.lead{font-size:clamp(1.2rem,1.7vw,1.45rem);line-height:1.45;color:var(--inkt)}

/* knoppen: alles haaks, één radius-systeem (0) */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:46px;padding:.7em 1.25em;font-family:var(--tekst);font-weight:700;font-size:1rem;line-height:1;text-decoration:none;white-space:nowrap;border:2px solid transparent;cursor:pointer;transition:transform .12s ease-out,background-color .2s,color .2s,border-color .2s}
.knop:active{transform:translateY(1px) scale(.98)}
.knop--rood{background:var(--rood);color:#fff}
.knop--rood:hover{background:#b8121a}
.knop--lijn{border-color:var(--inkt);color:var(--inkt);background:transparent}
.knop--lijn:hover{background:var(--inkt);color:var(--wit)}
.knop--wit{background:var(--wit);color:var(--inkt);border-color:var(--inkt)}
.knop--groot{min-height:56px;padding:.9em 1.6em;font-size:1.08rem}
.ico{width:18px;height:18px}

/* header */
.top{position:sticky;top:0;z-index:30;background:rgba(242,242,238,.86);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);border-bottom:1px solid transparent;transition:border-color .3s}
.top.is-gescrold{border-bottom-color:var(--rand)}
.top__in{max-width:var(--max);margin:0 auto;padding:10px var(--gutter);display:flex;align-items:center;gap:28px;min-height:72px}
.top__logo{display:block;width:150px;flex:none}
.top__logo svg{width:100%;height:auto}
.top__nav{margin-left:auto}
.top__nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.top__nav a{text-decoration:none;font-weight:600;font-size:1rem;position:relative;padding:6px 0}
.top__nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--rood);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.top__nav a:hover::after{transform:scaleX(1)}
.top__menu{display:none}
.mobmenu{display:none}

/* hero: typografische poster */
.hero{position:relative;min-height:calc(100dvh - 72px);display:flex;align-items:center;overflow:hidden}
.hero__in{position:relative;max-width:var(--max);width:100%;margin:0 auto;padding:clamp(40px,7vh,88px) var(--gutter) clamp(48px,8vh,96px)}
.hero__kop{font-size:clamp(2.9rem,7.3vw,8rem);line-height:.98;letter-spacing:-.035em;max-width:none;position:relative;z-index:2}
.hero__regel{display:block}
.hero__verf{position:relative;display:inline-block;white-space:nowrap;z-index:0}
.hero__streek{position:absolute;left:-2%;width:104%;top:46%;height:64%;z-index:-1;overflow:visible;filter:url(#ruw)}
.hero__streek-pad{fill:none;stroke:var(--rood);stroke-width:78;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:0}
.hero__kwast{position:absolute;z-index:3;width:clamp(70px,9vw,132px);pointer-events:none;opacity:0;left:0;top:0;transform-origin:70% 96%}
.hero__sub{max-width:44ch;font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.5;color:var(--inkt-2);margin:clamp(24px,4vh,40px) 0 28px}
.hero__knoppen{display:flex;flex-wrap:wrap;gap:12px}

/* band */
.band{background:var(--inkt);color:var(--wit);overflow:hidden;border-block:0}
.band__spoor{display:flex;width:max-content;animation:band 38s linear infinite}
.band__rij{display:flex;list-style:none;margin:0;padding:0}
.band__rij li{font-family:var(--display);font-weight:700;font-size:clamp(1.25rem,2.4vw,2rem);letter-spacing:-.01em;padding:18px 0;white-space:nowrap;display:flex;align-items:center}
.band__rij li::after{content:"";display:inline-block;width:46px;height:12px;margin:0 28px;background:var(--rood);clip-path:polygon(0 35%,100% 0,94% 70%,4% 100%)}
@keyframes band{to{transform:translateX(-50%)}}
.band:hover .band__spoor{animation-play-state:paused}

/* basis */
.basis{padding:clamp(80px,12vw,160px) 0}
.basis__in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(12,1fr);gap:28px 32px}
.basis__kop{grid-column:1 / span 10}
.basis__tekst{grid-column:1 / span 7;max-width:62ch;margin-top:12px}
.basis__tekst p:not(.lead){color:var(--inkt-2)}
.basis__feiten{grid-column:9 / span 4;margin:12px 0 0;display:grid;gap:0;align-self:start;border-top:3px solid var(--inkt)}
.basis__feiten div{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--rand)}
.basis__feiten dt{color:var(--inkt-2)}
.basis__feiten dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.2rem;text-align:right}

/* ondergronden: kleurvlak-tegels (ref Lift Type) */
.grond{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) clamp(80px,12vw,150px)}
.grond__kopblok{max-width:60ch;margin-bottom:36px}
.grond__kopblok h2{margin-bottom:16px;max-width:20ch}
.grond__kopblok p{color:var(--inkt-2);font-size:1.15rem}
.grond__raster{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.tegel{position:relative;min-height:clamp(240px,26vw,360px);padding:22px 24px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;isolation:isolate;background:var(--t-bg);color:var(--t-fg)}
.tegel::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--t-hover);clip-path:inset(0 100% 0 0);transition:clip-path .7s var(--ease)}
.tegel:hover::before{clip-path:inset(0 0 0 0)}
.tegel__woord{font-family:var(--display);font-weight:800;font-size:clamp(2.8rem,6.2vw,7rem);max-width:100%;line-height:.9;letter-spacing:-.04em;align-self:center;margin:auto 0;transition:transform .7s var(--ease)}
.tegel:hover .tegel__woord{transform:translateX(10px)}
.tegel__label{font-weight:600;font-size:1rem;max-width:30ch}
.tegel--hout{--t-bg:#1f4b33;--t-fg:#f3ecd8;--t-hover:#2a5c40}
.tegel--staal{--t-bg:#26384f;--t-fg:#e4ebf2;--t-hover:#30455f}
.tegel--kunststof{--t-bg:#f1ead6;--t-fg:#b8121a;--t-hover:#ebe2ca}
.tegel--mineraal{--t-bg:#d7181f;--t-fg:#fff;--t-hover:#c3141b}
.grond__raster{grid-template-columns:repeat(12,1fr)}
.tegel--hout{grid-column:span 7}
.tegel--staal{grid-column:span 5}
.tegel--kunststof{grid-column:span 5}
.tegel--mineraal{grid-column:span 7}

/* kleur: deur + stalen (ref Berger kleurcatalogus) */
.kleur{background:var(--papier-2);padding:clamp(80px,11vw,150px) 0}
.kleur__in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:center}
.kleur__deur{position:relative}
.deur{width:100%;height:auto;max-height:78vh;margin:0 auto;box-shadow:0 30px 60px -30px rgba(60,40,30,.35)}
.kleur__tekst h2{max-width:14ch;margin-bottom:28px}
.citaat{margin:0 0 32px;padding:0}
.citaat::before{content:"";display:block;width:64px;height:10px;margin-bottom:16px;background:var(--rood);clip-path:polygon(0 30%,100% 0,96% 75%,3% 100%)}
.citaat p{font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.4;font-style:italic;margin-bottom:8px}
.citaat footer{font-weight:600;color:var(--inkt-2)}
.stalen{border:0;margin:0 0 28px;padding:0}
.stalen legend{font-weight:700;margin-bottom:14px;padding:0}
.stalen__rij{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.staal{appearance:none;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit;color:inherit}
.staal__chip{display:block;aspect-ratio:1;background:var(--s);border:1px solid rgba(0,0,0,.12);transition:transform .25s var(--ease),box-shadow .25s}
.staal:hover .staal__chip{transform:translateY(-4px)}
.staal:active .staal__chip{transform:translateY(-1px) scale(.97)}
.staal[aria-checked="true"] .staal__chip{box-shadow:0 0 0 3px var(--papier-2),0 0 0 6px var(--inkt)}
.staal__naam{display:block;font-size:.88rem;font-weight:600;line-height:1.25;margin-top:10px}
.stalen__status{margin:16px 0 0;color:var(--inkt-2);font-size:.95rem}
.kleur__advies{color:var(--inkt-2);max-width:56ch}

/* werkzaamheden: gegroepeerd */
.werk{padding:clamp(80px,12vw,160px) 0}
.werk__in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.werk__kop{margin-bottom:48px;max-width:14ch}
.werk__groepen{display:grid;grid-template-columns:6fr 3fr 3fr;gap:clamp(24px,3vw,44px);align-items:start}
.groep{border-top:3px solid var(--inkt);padding-top:18px}
.groep h3{font-size:clamp(1.6rem,2.4vw,2.2rem);margin-bottom:18px}
.groep ul{list-style:none;margin:0;padding:0}
.groep li{font-size:1.15rem;padding:7px 0}
.groep--groot li{font-family:var(--display);font-weight:600;font-size:clamp(1.35rem,2.2vw,1.9rem);letter-spacing:-.015em;padding:10px 0}
.groep--rood{border-top-color:var(--rood)}

/* review */
.review{background:var(--inkt);color:var(--wit);padding:clamp(80px,11vw,150px) 0}
.review__in{max-width:1000px;margin:0 auto;padding:0 var(--gutter);position:relative}
.review__streek{width:min(320px,60%);height:30px;overflow:visible;margin-bottom:28px;filter:url(#ruw)}
.review__streek path{fill:none;stroke:var(--rood);stroke-width:22;stroke-dasharray:1;stroke-dashoffset:0}
.review blockquote{margin:0}
.review blockquote p{font-family:var(--display);font-weight:600;font-size:clamp(1.8rem,4vw,3.3rem);line-height:1.12;letter-spacing:-.02em;margin-bottom:28px}
.review footer{font-size:1.05rem;color:#d6d6d0}
.review footer strong{color:var(--wit)}
.review footer span{display:inline-block;margin-top:6px;color:#b9b9b2}

/* contact */
.contact{padding:clamp(80px,11vw,150px) 0}
.contact__in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px,6vw,96px);align-items:start}
.contact__info h2{max-width:13ch;margin-bottom:20px}
.contact__info>p{color:var(--inkt-2);max-width:42ch;font-size:1.15rem}
.contact__tel{display:inline-block;font-family:var(--display);font-weight:800;font-size:clamp(2.3rem,5vw,4.2rem);letter-spacing:-.03em;text-decoration:none;margin:12px 0 6px;background:linear-gradient(var(--rood),var(--rood)) 0 92%/0 .16em no-repeat;transition:background-size .5s var(--ease)}
.contact__tel:hover{background-size:100% .16em}
.contact__mail{display:block;font-size:1.2rem;font-weight:600;margin-bottom:24px;word-break:break-word}
address{font-style:normal;color:var(--inkt-2);line-height:1.6}
.formulier{background:var(--wit);border:1px solid var(--rand);padding:clamp(22px,3vw,36px)}
.formulier__kop{font-size:1.6rem;margin-bottom:20px}
.veld{display:grid;gap:8px;margin:0 0 18px;border:0;padding:0}
.veld label,.veld legend{font-weight:700;font-size:.98rem;padding:0}
.veld input[type=text],.veld textarea{width:100%;font:inherit;font-size:1.05rem;color:var(--inkt);background:#fff;border:1.5px solid #8d8d86;padding:12px 14px;border-radius:0}
.veld input:focus,.veld textarea:focus{outline:3px solid var(--rood);outline-offset:0;border-color:var(--inkt)}
.veld input[aria-invalid=true]{border-color:var(--rood-tekst)}
.veld__fout{color:var(--rood-tekst);font-weight:600;font-size:.95rem;margin:0}
.veld__hulp{color:#5a5a55;font-size:.92rem;margin:0}
.keuzes{display:flex;flex-wrap:wrap;gap:10px}
.keuzes label{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #8d8d86;padding:9px 14px;font-weight:600;cursor:pointer}
.keuzes label:has(input:checked){border-color:var(--inkt);background:var(--inkt);color:var(--wit)}
.keuzes input{accent-color:var(--rood)}
.formulier__knop{width:100%}
.formulier__melding{margin:16px 0 0;padding:14px 16px;background:var(--papier);font-weight:600}

/* footer */
.voet{border-top:1px solid var(--rand);padding:48px 0 110px}
.voet__in{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:auto 1fr 1fr;gap:24px 48px;align-items:start}
.voet__logo{width:170px;height:auto}
.voet p{margin:0;color:var(--inkt-2)}
.voet a{text-decoration:none;font-weight:600;color:var(--inkt)}
.voet a:hover{text-decoration:underline}
.voet__klein{grid-column:1 / -1;font-size:.9rem}

/* vaste belbalk mobiel */
.belbalk{display:none}

/* reveal basis: alleen verbergen als JS en motion actief zijn */
.js-motion [data-reveal]{opacity:0;transform:translateY(28px)}

@media (max-width:899px){
  .top__nav,.top__bel{display:none}
  .top__in{min-height:64px;justify-content:space-between}
  .top__logo{width:128px}
  .top__menu{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:2px solid var(--inkt);cursor:pointer}
  .top__menu-streep,.top__menu-streep::before{display:block;width:20px;height:2px;background:var(--inkt);position:relative;transition:transform .3s var(--ease)}
  .top__menu-streep::before{content:"";position:absolute;top:6px;left:0}
  .top__menu-streep{transform:translateY(-3px)}
  .top__menu[aria-expanded=true] .top__menu-streep{transform:rotate(45deg)}
  .top__menu[aria-expanded=true] .top__menu-streep::before{transform:translateY(-6px) rotate(-90deg)}
  .mobmenu:not([hidden]){display:block;border-top:1px solid var(--rand);background:var(--papier)}
  .mobmenu ul{list-style:none;margin:0;padding:8px var(--gutter) 20px}
  .mobmenu a{display:block;padding:14px 0;font-family:var(--display);font-weight:700;font-size:1.6rem;text-decoration:none;border-bottom:1px solid var(--rand)}
  html{scroll-padding-bottom:90px}
  .hero{min-height:0;align-items:flex-start}
  .hero__in{padding-top:48px;padding-bottom:64px}
  .hero__kop{font-size:clamp(2.6rem,11.6vw,5rem)}
  .hero__verf{white-space:normal}
  .basis__kop,.basis__tekst,.basis__feiten{grid-column:1 / -1}
  .grond__raster{grid-template-columns:1fr}
  .grond__raster .tegel{grid-column:1 / -1}
  .tegel{min-height:200px}
  .kleur__in{grid-template-columns:1fr}
  .kleur__deur{max-width:320px;width:72%;margin:0 auto}
  .stalen__rij{grid-template-columns:repeat(3,1fr)}
  .werk__groepen{grid-template-columns:1fr}
  .contact__in{grid-template-columns:1fr}
  .voet__in{grid-template-columns:1fr}
  .belbalk{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(242,242,238,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--rand);transform:translateY(110%);transition:transform .45s var(--ease)}
  .belbalk.is-zichtbaar{transform:none}
  .belbalk .knop{min-height:50px;padding:.7em .6em}
}
@media (max-width:420px){
  .hero__knoppen .knop{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .band__spoor{animation:none}
  .tegel::before,.tegel__woord,.staal__chip,.contact__tel,.belbalk{transition:none}
  .js-motion [data-reveal]{opacity:1;transform:none}
}

/* hero: kleurwaaier met de kleuren uit Armans citaat */
.waaier{display:none}
@media (min-width:1100px){
  .waaier{--open:1;display:block;position:absolute;right:calc(var(--gutter) + 10px);bottom:5%;width:90px;height:min(390px,48vh);z-index:1}
  .waaier__strook{position:absolute;inset:0;background:var(--c);color:var(--f);transform-origin:50% 92%;transform:rotate(calc((-30deg + var(--i) * 8deg) * var(--open)));box-shadow:0 1px 0 rgba(0,0,0,.08),0 18px 30px -22px rgba(30,30,30,.5);border:1px solid rgba(0,0,0,.08);transition:transform .6s var(--ease)}
  .waaier__strook::after{content:"";position:absolute;left:50%;bottom:6%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--papier);box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
  .waaier__strook span{position:absolute;left:10px;right:8px;top:12px;font-size:.78rem;font-weight:700;line-height:1.15}
  .waaier:hover .waaier__strook{transform:rotate(calc(-36deg + var(--i) * 10deg))}
  .waaier:focus-visible{outline-offset:12px}
}