/* Steenwerf Verbouw, voorbeeldsite van Opgeleverd
   Bewust anders dan Groenhof, Waterlinie en Buitenwerk: geen fotosite maar een
   tekeningsite. Een verbouwer verkoopt geen plaatje maar zekerheid over wat er
   de komende zes weken in je huis gebeurt. Dus: papierwit, grafiet, potloodrood,
   en cijfers in mono zoals op een bouwtekening.

   Archivo als display, een stevige grotesk die op formaat blijft staan.
   Libre Franklin eronder voor lopende tekst, IBM Plex Mono voor alles wat een
   maat, week of bedrag is. */

@font-face{font-family:'Archivo';src:url('../fonts/archivo-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Archivo';src:url('../fonts/archivo-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Libre Franklin';src:url('../fonts/librefranklin-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Libre Franklin';src:url('../fonts/librefranklin-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --papier:#F6F4F0;
  --papier-2:#EDEAE3;
  --grafiet:#15171A;
  --grafiet-2:#22262B;
  --tekst:#4A4F55;
  --zacht:#82888F;
  --lijn:#D6D2C8;
  --lijn-hard:#B9B4A8;
  --potlood:#B23A17;      /* de rode potloodlijn op een bouwtekening */
  --potlood-diep:#8A2C11;
  --op-donker:#D9D5CC;

  --display:'Archivo',Helvetica,Arial,sans-serif;
  --sans:'Libre Franklin',Helvetica,Arial,sans-serif;
  --mono:'Plex Mono',ui-monospace,Menlo,monospace;
  --binnen:1200px;
  --marge:clamp(20px,5vw,64px);
  --ease:cubic-bezier(0.22,1,0.36,1);
  --radius:0px;           /* niets afgerond: dit is een tekening, geen app */
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--papier);color:var(--tekst);font-family:var(--sans);
  font-size:clamp(15.5px,1vw,16.5px);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);color:var(--grafiet);margin:0;font-weight:700;
  letter-spacing:-0.028em;line-height:1.04}
h1 em,h2 em,h3 em{font-style:normal;color:var(--potlood)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font-family:inherit}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

.binnen{max-width:var(--binnen);margin:0 auto;padding-inline:var(--marge)}
.smal{max-width:760px}

/* ---- reveals, zelfde systeem als de andere voorbeeldsites ---- */
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1.1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.12s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.24s}
[data-reveal][data-reveal-delay="3"]{transition-delay:.36s}
[data-reveal="lijn"]{opacity:1;transform:none;clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
[data-reveal="lijn"].in{clip-path:inset(0 0 0 0)}
[data-stagger]>*{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
[data-stagger].in>*:nth-child(1){transition-delay:0s}
[data-stagger].in>*:nth-child(2){transition-delay:.07s}
[data-stagger].in>*:nth-child(3){transition-delay:.14s}
[data-stagger].in>*:nth-child(4){transition-delay:.21s}
[data-stagger].in>*:nth-child(5){transition-delay:.28s}
[data-stagger].in>*:nth-child(6){transition-delay:.35s}

:where(a,button,input,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--potlood);outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-stagger]>*{opacity:1;transform:none;transition:none}
  [data-reveal="lijn"]{clip-path:none}
}

/* ---- demobalk ---- */
.demobar{position:relative;z-index:60;background:var(--grafiet);color:#B8BEC6;font-size:12.5px;
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 18px;text-align:center}
.demobar strong{color:#fff;font-weight:500}
.demobar a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);white-space:nowrap}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease)}
.nav.vast{background:rgba(246,244,240,.95);backdrop-filter:blur(8px);border-color:var(--lijn)}
.nav-in{max-width:var(--binnen);margin:0 auto;padding:16px var(--marge);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{text-decoration:none;display:inline-flex;gap:9px;align-items:baseline}
.logo-g{font-family:var(--display);font-weight:700;font-size:20px;color:var(--grafiet);letter-spacing:-0.03em}
.logo-s{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--zacht)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
.nav-links a:not(.knop){text-decoration:none;font-size:14px;color:var(--tekst);transition:color .3s}
.nav-links a:not(.knop):hover{color:var(--potlood)}
@media (max-width:880px){.nav-links a:not(.knop){display:none}}
.nav-bel{text-decoration:none;display:flex;flex-direction:column;line-height:1.15;text-align:right}
.nav-bel span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht)}
.nav-bel b{font-family:var(--mono);font-size:15px;color:var(--grafiet);font-weight:500}

.knop{display:inline-flex;align-items:center;justify-content:center;background:var(--potlood);color:#fff;
  text-decoration:none;font-family:var(--sans);font-weight:500;font-size:14.5px;padding:14px 26px;
  border:0;border-radius:var(--radius);cursor:pointer;transition:background .35s var(--ease),transform .35s var(--ease)}
.knop:hover{background:var(--potlood-diep);transform:translateY(-1px)}
.knop-lijn{background:transparent;color:var(--grafiet);border:1px solid var(--lijn-hard)}
.knop-lijn:hover{background:var(--grafiet);color:#fff;border-color:var(--grafiet)}

/* ---- hero: een tekening, geen foto ---- */
.hero{position:relative;background:var(--grafiet);color:#E8E5DE;overflow:hidden}
.hero-in{max-width:var(--binnen);margin:0 auto;padding:clamp(52px,8vw,96px) var(--marge) clamp(40px,6vw,72px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:960px){.hero-in{grid-template-columns:1fr;gap:36px}}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#9AA2AB}
.hero h1{margin-top:18px;color:#fff;font-size:clamp(36px,5.6vw,68px);max-width:15ch}
.hero h1 em{color:#E8825C}
.hero-sub{margin-top:22px;color:#B9BFC6;max-width:46ch;font-size:clamp(16px,1.15vw,18px)}
.hero-acties{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.hero .knop-lijn{color:#fff;border-color:rgba(255,255,255,.32)}
.hero .knop-lijn:hover{background:#fff;color:var(--grafiet);border-color:#fff}
.hero-tek{position:relative}
.hero-tek svg{width:100%;height:auto}
/* de tekening wordt lijn voor lijn getekend, in de volgorde waarin je
   ook echt zou tekenen: eerst het maaiveld, dan het huis, dan de uitbouw.
   De vertraging per lijn zet main.js, want die kent de volgorde. */
.tek-lijn{stroke-dasharray:var(--len,1200);stroke-dashoffset:var(--len,1200);
  animation:teken 1.1s var(--ease) forwards;animation-delay:var(--vt,0s)}
@keyframes teken{to{stroke-dashoffset:0}}
/* arcering, maatvoering en stempel horen er niet bij getekend te worden,
   die verschijnen als het casco er staat */
.tek-arc,.tek-nr,.tek-tekst{opacity:0;animation:tekIn .7s var(--ease) forwards;
  animation-delay:var(--vt,1.9s)}
@keyframes tekIn{to{opacity:1}}
/* de nieuwe ruimte ademt heel traag licht, anders staat de tekening stil */
.tek-warmte{opacity:0;animation:warmte 9s 2.6s ease-in-out infinite}
@keyframes warmte{0%,100%{opacity:.16}50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){
  .tek-lijn{animation:none;stroke-dashoffset:0}
  .tek-arc,.tek-nr,.tek-tekst{animation:none;opacity:1}
  .tek-warmte{animation:none;opacity:.22}}

/* ---- secties ---- */
.sectie{padding:clamp(56px,8vw,112px) 0}
.sec-lijn{border-top:1px solid var(--lijn)}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--potlood)}
.kop-rij{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:end;
  margin-bottom:clamp(32px,5vw,56px)}
@media (max-width:860px){.kop-rij{grid-template-columns:1fr;gap:18px}}
.kop-rij h2{font-size:clamp(28px,3.6vw,46px);margin-top:14px;max-width:18ch}
.kop-note{color:var(--zacht);font-size:15px;max-width:38ch}
.groot{font-size:clamp(18px,1.7vw,23px);line-height:1.6;color:var(--grafiet-2)}

/* ---- WEEKPLANNING: de signature interactie ---- */
.planner{display:grid;grid-template-columns:200px 1fr;gap:clamp(20px,3vw,44px)}
@media (max-width:860px){.planner{grid-template-columns:1fr}}
.weken{display:flex;flex-direction:column;border-top:1px solid var(--lijn)}
@media (max-width:860px){.weken{flex-direction:row;overflow-x:auto;border-top:0;border-bottom:1px solid var(--lijn);
  scrollbar-width:none} .weken::-webkit-scrollbar{display:none}}
.weken button{appearance:none;background:none;border:0;border-bottom:1px solid var(--lijn);
  padding:15px 4px;text-align:left;cursor:pointer;display:flex;align-items:baseline;gap:12px;
  color:var(--tekst);transition:color .3s,border-color .3s;position:relative;white-space:nowrap}
@media (max-width:860px){.weken button{border-bottom:0;padding:12px 16px 12px 0}}
.weken button .wk{font-family:var(--mono);font-size:12px;color:var(--zacht);transition:color .3s}
.weken button .wt{font-family:var(--display);font-weight:500;font-size:15.5px}
.weken button:hover{color:var(--grafiet)}
.weken button[aria-selected="true"]{color:var(--grafiet);border-color:var(--potlood)}
.weken button[aria-selected="true"] .wk{color:var(--potlood)}
.weken button[aria-selected="true"]::before{content:"";position:absolute;left:-14px;top:50%;
  width:6px;height:1px;background:var(--potlood)}
@media (max-width:860px){.weken button[aria-selected="true"]::before{display:none}}

.week-paneel{border:1px solid var(--lijn);background:#FCFBF8;padding:clamp(22px,3.2vw,40px);min-height:340px}
.week-kop{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:1px solid var(--lijn)}
.week-kop h3{font-size:clamp(21px,2.4vw,28px)}
.week-dagen{font-family:var(--mono);font-size:12.5px;color:var(--zacht)}
.week-tekst{margin-top:20px;max-width:56ch}
.week-meters{margin-top:26px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
@media (max-width:640px){.week-meters{grid-template-columns:1fr;gap:14px}}
.meter{border-top:1px solid var(--lijn);padding-top:12px}
.meter dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--zacht)}
.meter dd{margin:6px 0 0;font-family:var(--display);font-weight:500;font-size:16px;color:var(--grafiet)}
.balk{margin-top:9px;height:3px;background:var(--papier-2);position:relative;overflow:hidden}
.balk i{position:absolute;inset:0 auto 0 0;background:var(--potlood);width:0;transition:width .6s var(--ease)}
.week-wie{margin-top:24px;padding-top:16px;border-top:1px solid var(--lijn);
  font-size:14.5px;color:var(--zacht)}
.week-wie b{color:var(--grafiet);font-weight:500}

/* ---- werk: strakke regels, geen tegels ---- */
.regels{border-top:1px solid var(--lijn-hard)}
.regel{display:grid;grid-template-columns:78px 1fr 190px 120px;gap:clamp(12px,2vw,28px);
  align-items:baseline;padding:20px 0;border-bottom:1px solid var(--lijn);text-decoration:none;color:inherit;
  transition:background .3s var(--ease),padding .3s var(--ease)}
@media (max-width:860px){.regel{grid-template-columns:64px 1fr;row-gap:6px}
  .regel .r-plaats{grid-column:2} .regel .r-bedrag{grid-column:2;font-size:13.5px}}
.regel:hover{background:#FCFBF8;padding-inline:10px}
.r-jaar{font-family:var(--mono);font-size:12.5px;color:var(--zacht)}
.r-wat{font-family:var(--display);font-weight:500;font-size:clamp(16px,1.5vw,19px);color:var(--grafiet)}
.r-plaats{font-size:14.5px;color:var(--tekst)}
.r-bedrag{font-family:var(--mono);font-size:13.5px;color:var(--zacht);text-align:right}
@media (max-width:860px){.r-bedrag{text-align:left}}

/* ---- prijs ---- */
.prijs-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
@media (max-width:820px){.prijs-grid{grid-template-columns:1fr}}
.prijs-kaart{border:1px solid var(--lijn);padding:clamp(24px,3vw,38px);background:#FCFBF8}
.prijs-kaart h3{font-size:20px}
.prijs-groot{font-family:var(--mono);font-size:clamp(30px,4vw,44px);color:var(--grafiet);margin-top:14px;font-weight:500}
.prijs-groot small{font-size:15px;color:var(--zacht)}
.prijs-lijst{margin-top:22px}
.prijs-lijst li{display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--lijn);font-size:14.5px}
.prijs-lijst li::before{content:"—";color:var(--potlood);flex:none}

/* ---- contact ---- */
.contact{background:var(--grafiet);color:#C8CDD3}
.contact h2{color:#fff}
.contact .binnen{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:860px){.contact .binnen{grid-template-columns:1fr}}
.veld{display:block;margin-bottom:16px}
.veld span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8F969E;margin-bottom:7px}
.veld input,.veld textarea{width:100%;background:transparent;border:0;border-bottom:1px solid #3A4048;
  color:#fff;font-family:var(--sans);font-size:16px;padding:9px 0;transition:border-color .3s}
.veld input:focus,.veld textarea:focus{outline:0;border-color:var(--potlood)}
.veld textarea{resize:vertical;min-height:90px}
.contact-gegevens li{padding:12px 0;border-top:1px solid #2C3138;font-size:15px}
.contact-gegevens b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8F969E;font-weight:500;margin-bottom:4px}
.contact-gegevens a{color:#fff;text-decoration:none;border-bottom:1px solid #3A4048}

footer{background:var(--grafiet);color:#767D85;font-size:13px;padding:26px 0 40px;border-top:1px solid #262B31}
footer .binnen{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---- projectpagina ---- */
.proj-hero{padding:clamp(40px,6vw,72px) 0 0}
.proj-hero h1{font-size:clamp(30px,4.4vw,54px);max-width:20ch}
.proj-meta{margin-top:26px;display:flex;gap:clamp(18px,3vw,44px);flex-wrap:wrap;
  padding-top:18px;border-top:1px solid var(--lijn)}
.proj-meta div b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--zacht);font-weight:500;margin-bottom:3px}
.proj-meta div span{font-family:var(--display);font-weight:500;font-size:16px;color:var(--grafiet)}
.fotoplek{border:1px dashed var(--lijn-hard);background:repeating-linear-gradient(
  -45deg,transparent,transparent 9px,rgba(178,58,23,.045) 9px,rgba(178,58,23,.045) 18px);
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px}
.fotoplek p{font-family:var(--mono);font-size:12px;color:var(--zacht);max-width:32ch;line-height:1.6}

/* ---------- klus kiezen boven de planning ---------- */
.klus{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);flex-wrap:wrap;
  margin-top:clamp(20px,2.6vh,32px);padding-bottom:clamp(20px,2.6vh,30px);
  border-bottom:1px solid var(--lijn)}
.klus-soort{display:flex;gap:7px;flex-wrap:wrap}
.klus-soort button{background:none;border:1px solid var(--lijn);border-radius:var(--radius);
  padding:9px 15px;font:inherit;font-size:14px;color:var(--tekst);cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease)}
.klus-soort button:hover{border-color:var(--potlood);color:var(--grafiet)}
.klus-soort button[aria-pressed="true"]{background:var(--grafiet);border-color:var(--grafiet);color:#fff}

.klus-maat{display:flex;align-items:center;gap:12px;flex:1 1 260px;min-width:220px}
.klus-maat>span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--zacht);flex:none}
.klus-maat input[type=range]{flex:1 1 auto;accent-color:var(--potlood);min-width:110px}
.klus-maat b{flex:none;font-size:15px;color:var(--grafiet);min-width:74px;text-align:right}

.klus-uit{margin-left:auto;text-align:right;flex:none}
.klus-uit span{display:block;font-family:var(--disp);font-size:clamp(20px,2.4vw,28px);
  letter-spacing:-0.03em;color:var(--grafiet)}
.klus-uit em{display:block;font-style:normal;margin-top:3px;font-size:13px;color:var(--zacht)}
@media (max-width:760px){
  .klus{gap:18px}
  .klus-uit{margin-left:0;text-align:left}
  .klus-maat{flex-basis:100%}
}