*,*::before,*::after{box-sizing:border-box}
:root{
  /* Elke kleur komt van iets dat in hun zaak hangt of staat. */
  --spiegellijst:#1B1A18;
  --wand:#EDECE9;
  --leren-bank:#7A5245;
  --messing:#CAA65B;
  --barberpaal:#C4362B;
  --paal-blauw:#2C3A5B;
  --lijn:rgba(27,26,24,.15);
  --grijze-tekst:#5A534E;
  --kop:"Bricolage Grotesque",system-ui,sans-serif;
  --leesletter:"Newsreader",Georgia,serif;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wand);color:var(--spiegellijst);
  font-family:var(--leesletter);font-size:1.0625rem;line-height:1.62;font-optical-sizing:auto}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--kop);font-weight:800;line-height:1.04;letter-spacing:-.022em;margin:0}
p{margin:0 0 1rem}
.binnen{width:100%;max-width:70rem;margin:0 auto;padding:0 1.25rem}
.overslaan{position:absolute;left:-9999px}
.overslaan:focus{left:1rem;top:1rem;z-index:99;background:var(--spiegellijst);color:var(--wand);padding:.7rem 1rem}
:focus-visible{outline:3px solid var(--barberpaal);outline-offset:3px}

.balk{background:var(--spiegellijst);color:#E4E0DA}
.balk .binnen{display:flex;align-items:center;gap:1rem 1.25rem;flex-wrap:wrap;padding-top:.85rem;padding-bottom:.85rem}
.merk{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.merk svg{display:block;flex:none}
.merk-tekst{font-family:var(--kop);font-weight:800;font-size:.94rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.2}
.merk-onder{display:block;font-family:var(--leesletter);font-weight:400;font-size:.68rem;letter-spacing:.12em;color:var(--messing);text-transform:uppercase}
.menu{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.9rem;font-family:var(--kop);font-weight:600}
.menu a{text-decoration:none;opacity:.85;padding:.2rem 0;border-bottom:2px solid transparent}
.menu a:hover{opacity:1;border-bottom-color:var(--barberpaal)}
.knop{display:inline-block;font-family:var(--kop);font-weight:800;font-size:.95rem;
  background:var(--barberpaal);color:#fff;text-decoration:none;padding:.72rem 1.15rem;
  border-radius:2px;border:2px solid var(--barberpaal)}
.knop:hover{background:#a92c22;border-color:#a92c22}
.knop-licht{background:transparent;color:var(--spiegellijst);border-color:var(--spiegellijst)}
.knop-licht:hover{background:var(--spiegellijst);color:var(--wand)}

.hero{background:var(--spiegellijst);color:#F4F1EC;padding:clamp(2.5rem,7vw,4.25rem) 0 clamp(3rem,8vw,4.75rem)}
.hero .binnen{display:grid;gap:clamp(1.75rem,4vw,3rem);grid-template-columns:1fr}
.hero h1{font-size:clamp(2.25rem,7vw,4rem);color:#F7F4EF}
.hero h1 em{font-style:normal;color:var(--messing)}
.lood{font-size:clamp(1.05rem,2.2vw,1.26rem);color:#DCD6CD;max-width:34ch;margin-top:1.15rem}
.hero-knoppen{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
.hero .knop-licht{color:#F4F1EC;border-color:#8A8279}
.hero .knop-licht:hover{background:#F4F1EC;color:var(--spiegellijst);border-color:#F4F1EC}
.hero-foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 58%;border-radius:2px}
.hero-foto figcaption{font-size:.82rem;color:#A79E93;margin-top:.5rem}
.strook{display:inline-block;font-family:var(--kop);font-weight:600;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--messing);margin:0 0 .55rem}

/* signatuur: de week zoals in het afsprakenboek */
.week{background:#E2DFD8;border-top:3px solid var(--spiegellijst);border-bottom:3px solid var(--spiegellijst)}
.week .binnen{padding-top:clamp(1.7rem,4vw,2.4rem);padding-bottom:clamp(1.7rem,4vw,2.4rem)}
.week h2{font-size:clamp(1.2rem,2.7vw,1.5rem);margin-bottom:.2rem}
.toelicht{font-size:.95rem;margin-bottom:1.15rem;color:var(--grijze-tekst);max-width:54ch}
.dagen{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.dag{background:#E2DFD8;padding:.85rem .75rem;display:flex;flex-direction:column;gap:.12rem;min-height:5.5rem}
.dag .naam{font-family:var(--kop);font-weight:800;font-size:.8rem;letter-spacing:.13em;text-transform:uppercase}
.dag .tijd{font-variant-numeric:tabular-nums;font-size:1.05rem}
.dag.dicht{color:#8B837C}
.dag.dicht .tijd{text-decoration:line-through;text-decoration-thickness:1px}
.dag .vroeg{font-size:.74rem;color:var(--barberpaal);font-family:var(--kop);font-weight:600;letter-spacing:.06em;text-transform:uppercase}

.tarieven{padding:clamp(3rem,7vw,4.5rem) 0}
.sectiekop{max-width:48ch;margin-bottom:clamp(1.5rem,3vw,2.1rem)}
.sectiekop h2{font-size:clamp(1.75rem,4.4vw,2.55rem)}
.sectiekop p{margin-top:.7rem;color:var(--grijze-tekst)}
.label{font-family:var(--kop);font-weight:600;font-size:.76rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--leren-bank);margin:0 0 .55rem}
.prijslijst{border-top:2px solid var(--spiegellijst);max-width:44rem}
.prijsregel{display:flex;align-items:baseline;gap:.9rem;padding:.95rem 0;border-bottom:1px solid var(--lijn)}
.prijsregel .wat{font-family:var(--kop);font-weight:600;font-size:1.07rem}
.prijsregel .stippel{flex:1;border-bottom:1px dotted var(--lijn);transform:translateY(-.28em)}
.prijsregel .bedrag{font-family:var(--kop);font-weight:800;font-size:1.16rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.inbegrepen{margin-top:1.5rem;padding:1.05rem 1.15rem;border-left:4px solid var(--barberpaal);
  max-width:44rem;background:#E4E1DA}
.inbegrepen p{margin:0}
.inbegrepen strong{font-family:var(--kop);font-weight:800}

.boeken{background:var(--spiegellijst);color:#F4F1EC;padding:clamp(3rem,7vw,4.5rem) 0}
.boeken h2{color:#F7F4EF;font-size:clamp(1.75rem,4.4vw,2.55rem)}
.boeken .label{color:var(--messing)}
.boeken .sectiekop p{color:#DCD6CD}
.stappen{display:grid;gap:1px;background:#3A3733;border:1px solid #3A3733;grid-template-columns:1fr}
.stap{background:var(--spiegellijst);padding:1.2rem 1.15rem}
.stap .nr{font-family:var(--kop);font-weight:800;font-size:.76rem;letter-spacing:.16em;color:var(--barberpaal);display:block;margin-bottom:.5rem;text-transform:uppercase}
.stap h3{font-size:1.1rem;color:#F7F4EF;margin-bottom:.45rem}
.stap p{color:#D3CCC3;font-size:.96rem;margin:0}
.stap ul{margin:.55rem 0 0;padding-left:1.05rem;color:#D3CCC3;font-size:.95rem}
.stap li{margin-bottom:.18rem}

.over{background:var(--leren-bank);color:#F7F1EA;padding:clamp(3rem,7vw,4.5rem) 0}
.over .binnen{display:grid;gap:clamp(1.6rem,4vw,2.8rem);grid-template-columns:1fr}
.over h2{font-size:clamp(1.75rem,4.4vw,2.45rem);color:#FBF7F2}
.over .label{color:#E8CE97}
.over p{color:#F2E8DE}
.mensen{display:flex;gap:.55rem;flex-wrap:wrap;margin:1.2rem 0 0;padding:0;list-style:none}
.mensen li{font-family:var(--kop);font-weight:600;font-size:.86rem;
  border:1px solid rgba(247,241,234,.5);padding:.35rem .7rem;border-radius:2px}
.over-fotos{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.over-fotos img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:50% 45%;border-radius:2px}
.over-fotos figcaption{font-size:.8rem;color:#EBDDD0;margin-top:.45rem}
figure{margin:0}

.contact{background:#E2DFD8;padding:clamp(3rem,7vw,4.25rem) 0;border-top:3px solid var(--spiegellijst)}
.contact h2{font-size:clamp(1.75rem,4.4vw,2.45rem)}
.gegevens{display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:1.6rem}
.kopje{font-family:var(--kop);font-weight:600;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--leren-bank);margin:0 0 .25rem}
.groot{font-size:1.14rem;font-family:var(--kop);font-weight:600;margin:0}
.voet{background:#141311;color:#948C84;font-size:.86rem;padding:1.4rem 0}
.voet .binnen{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between}

@media (min-width:46em){
  .dagen{grid-template-columns:repeat(6,1fr)}
  .raster{grid-template-columns:repeat(2,1fr)}
  .gegevens{grid-template-columns:repeat(3,1fr)}
  .stappen{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:60em){
  .hero .binnen{grid-template-columns:1.15fr .85fr;align-items:center}
  .over .binnen{grid-template-columns:.8fr 1.2fr;align-items:center}
  
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ---- wat klanten zeggen ---------------------------------------------------
   Echte reviews van hun Google-profiel, met naam erbij. Geen verzonnen lof:
   4,4 uit 223 is sterker dan welke slogan ook, juist omdat het niet van hen komt. */
.oordeel{background:#E2DFD8;padding:clamp(3rem,7vw,4.25rem) 0;border-top:3px solid var(--spiegellijst)}
.cijfer{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap;margin-bottom:1.4rem}
.cijfer .punt{font-family:var(--kop);font-weight:800;font-size:clamp(2.6rem,7vw,3.6rem);line-height:1}
.cijfer .uit{font-size:1rem;color:var(--grijze-tekst)}
.sterren{color:var(--barberpaal);letter-spacing:.1em;font-size:1.05rem}
.citaten{display:grid;gap:1rem;grid-template-columns:1fr}
.citaat{background:var(--wand);border-left:4px solid var(--messing);padding:1.1rem 1.2rem}
.citaat blockquote{margin:0;font-size:1.02rem}
.citaat .wie{display:block;margin-top:.7rem;font-family:var(--kop);font-weight:600;font-size:.84rem;
  letter-spacing:.04em;color:var(--leren-bank)}
.bron{margin-top:1.2rem;font-size:.88rem;color:var(--grijze-tekst)}

/* ---- kiezen bij wie je gaat ---------------------------------------------- */
.kappers{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.6rem}
.kapper{background:var(--wand);border:1px solid var(--lijn);padding:1.3rem 1.25rem;display:flex;flex-direction:column}
.kapper h3{font-size:1.3rem;margin-bottom:.25rem}
.kapper .rol{font-family:var(--kop);font-weight:600;font-size:.76rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leren-bank);margin-bottom:.8rem}
.kapper p{font-size:.98rem}
.kapper .knop{margin-top:auto;align-self:flex-start}
.kapper blockquote{margin:0 0 1rem;padding-left:.9rem;border-left:3px solid var(--messing);
  font-size:.95rem;color:var(--grijze-tekst)}
.terug{display:inline-block;margin-bottom:1.2rem;font-family:var(--kop);font-weight:600;font-size:.9rem}

@media (min-width:46em){
  .citaten{grid-template-columns:repeat(3,1fr)}
  .kappers{grid-template-columns:repeat(3,1fr)}
}

/* ---- de echte agenda in de pagina ----------------------------------------
   Hun boekingsformulier komt van onlineafspraken.nl en mag op elk domein staan
   (X-Frame-Options: ALLOWALL, nagemeten). Voorselecteren op kapper kan niet: de
   widget houdt die keuze intern bij en zet niets in het adres. Drie knoppen die
   "afspraak bij Tjeu" beloven zouden dus doen alsof, en dan liever één eerlijk
   formulier met de kappers ernaast. */
.agenda{background:var(--wand);padding:clamp(3rem,7vw,4.5rem) 0}
.agendakader{border:1px solid var(--lijn);background:#fff;border-radius:2px;overflow:hidden}
.agendakader iframe{display:block;width:100%;height:760px;border:0}
@media (max-width:46em){ .agendakader iframe{height:680px} }