/* =========================================================
   Chamayres Touch — Kapsalon Weesp
   Vanilla CSS — design system
   Merkkleur: #e4dcd1 (warm beige) · tekst: #595959 · accent: #3e2020
   ========================================================= */

:root {
  /* Senna's Hair Lounge — palet "Nude Cashmere" */
  --cream:        #F4ECE3;   /* Cream — rustige basis (60%) */
  --beige:        #C9A88B;   /* Camel — warme drager (30%) */
  --beige-soft:   #EFE3D4;   /* zachte sand */
  --beige-tint:   #F8F1E8;   /* cream tint voor secties */
  --brown:        #2A2320;   /* Espresso — koppen, tekst & details (10%) */
  --brown-soft:   #8A6A52;   /* Mocha */
  --text:         #43352E;   /* warme donkere body-tekst */
  --text-soft:    #736354;   /* getemperd taupe, haalt 4.5:1 op alle tinten */
  --white:        #FBF6EF;   /* warm off-white voor kaarten/header */
  --line:         #E4D3C0;   /* Sand — randen & lijnen */
  --shadow:       0 10px 40px rgba(42, 35, 32, .10);
  --shadow-sm:    0 4px 18px rgba(42, 35, 32, .08);
  --radius:       14px;
  --radius-sm:    9px;
  --maxw:         1180px;
  --serif:        'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:         'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --head:         'Jost', var(--sans);
  --script:       'Allura', 'Cormorant Garamond', cursive;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--cream);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
/* picture mag geen eigen box vormen, anders breekt height:100% op de img erin */
picture { display: contents; }
a { color: var(--brown); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--brown-soft); }
h1, h2, h3, h4, h5, h6 { font-family: var(--serif); color: var(--brown); font-weight: 500; line-height: 1.18; margin: 0 0 .5em; letter-spacing: .2px; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.25em; }
li { margin-bottom: .45em; }
strong { color: var(--brown); font-weight: 700; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; }

/* display serif for the big editorial lines */
.display { font-family: var(--serif); font-weight: 500; letter-spacing: .3px; line-height: 1.08; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--head); font-weight: 600; font-size: .95rem; letter-spacing: .3px;
  padding: 14px 30px; border-radius: 50px; cursor: pointer; border: 1.5px solid transparent;
  text-align: center; transition: all .22s ease;
}
.btn-primary { background: var(--brown); color: var(--white); }
.btn-primary:hover { background: var(--brown-soft); color: var(--white); transform: translateY(-2px); }
.btn-beige { background: var(--beige); color: var(--brown); }
.btn-beige:hover { background: #b99372; color: var(--brown); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--brown); border-color: var(--brown); }
.btn-outline:hover { background: var(--brown); color: var(--white); }
.btn-light { background: var(--white); color: var(--brown); }
.btn-light:hover { background: var(--beige); color: var(--brown); }
.btn-ghost-light { background: transparent; color: var(--white); border-color: rgba(255,255,255,.7); }
.btn-ghost-light:hover { background: var(--white); color: var(--brown); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248,241,232,.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
/* rij 1: telefoon | logo | afspraak-link */
.nav-top-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 84px; }
.nav-tel { justify-self: start; padding: 3px 0; font-family: var(--head); font-size: .78rem; letter-spacing: 2.2px; color: var(--text-soft); transition: color .2s; }
.nav-tel:hover { color: var(--brown); }
.brand { justify-self: center; }
.brand img { height: 48px; width: auto; }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav-book {
  font-family: var(--head); font-size: .78rem; font-weight: 500; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--brown); border-bottom: 1px solid var(--beige);
  padding-bottom: 3px; transition: all .2s;
}
.nav-book:hover { color: var(--brown-soft); border-color: var(--brown-soft); }
/* rij 2: serif-links gecentreerd tussen hairlines */
.nav-links { border-top: 1px solid var(--line); }
.nav-menu { display: flex; align-items: center; justify-content: center; gap: 46px; list-style: none; margin: 0; padding: 0; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: block; padding: 13px 2px; font-family: var(--serif); font-weight: 500;
  font-size: 1.12rem; color: var(--text); letter-spacing: .4px; position: relative;
}
.nav-menu > li > a:hover { color: var(--brown-soft); }
.nav-menu > li.current > a { color: var(--brown); }
.nav-menu > li.current > a::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 6px; width: 4px; height: 4px; border-radius: 50%; background: var(--beige);
}
.nav-menu .has-children > a::after { content: "⌄"; margin-left: 6px; font-size: .85em; position: relative; top: -2px; }

/* dropdown */
.dropdown {
  position: absolute; top: calc(100% + 1px); left: 50%; min-width: 270px;
  background: var(--beige-tint); border: 1px solid var(--line); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow); padding: 10px 6px; list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: all .2s ease;
}
.nav-menu > li.has-children:hover .dropdown,
.nav-menu > li.has-children:focus-within .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dropdown li { margin: 0; }
.dropdown a { display: block; padding: 9px 18px; font-family: var(--serif); font-size: 1.05rem; color: var(--text); letter-spacing: .4px; text-align: center; }
.dropdown a:hover { color: var(--brown-soft); }

.nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: 9px; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--brown); margin: 5px 0; transition: .25s; }

/* ---------- hero (home): 50/50 split-paneel ---------- */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 82vh; }
/* Het mochavlak zit in een ::before, zodat het dezelfde uitvloeiende randen kan
   krijgen als de video ernaast zonder dat de tekst erop mee vervaagt. */
.hero-panel { background: linear-gradient(135deg, #8A6A52, #75543F); display: flex; align-items: center; }
.hero-panel-in { width: 100%; max-width: 590px; margin-left: auto; padding: 70px 56px 70px 24px; }
.hero h1 { color: var(--white); font-size: clamp(2.1rem, 3.6vw, 3.4rem); max-width: 14ch; margin: 0 0 .35em; }
.hero .lead { font-size: clamp(1rem, 1.5vw, 1.15rem); max-width: 46ch; margin: 0 0 2.2em; color: var(--white); }
.hero .btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* cream, zodat de uitvloeiende randen van de video in de paginakleur oplossen
   in plaats van tegen een afwijkende tint te eindigen */
.hero-foto { position: relative; overflow: hidden; background: var(--cream); }
.hero-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Verticaal bronmateriaal in een bijna vierkante kolom: bovenkant vasthouden,
   daar zitten de gezichten en de spiegel. */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 28%;
  display: block;
}
/* Boven- en onderrand laten uitvloeien, zoals op de oude site: het beeld eindigt
   niet met een harde kant maar lost op in de paginakleur, waardoor het filmpje
   in de header en in het blok eronder lijkt door te lopen. De zijkanten blijven
   bewust strak; daar staat de kop met de knoppen naast. */
.hero-video,
.hero-foto::after {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.5) 5%, #000 16%, #000 84%, rgba(0,0,0,.5) 95%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgba(0,0,0,.5) 5%, #000 16%, #000 84%, rgba(0,0,0,.5) 95%, transparent 100%);
}
/* Wie beweging heeft uitgezet, krijgt het posterbeeld in plaats van de loop.
   Als ::after met dezelfde mask, anders zou de fade daar wegvallen. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-foto::after {
    content: ""; position: absolute; inset: 0;
    background-image: url('/assets/img/hero-video-poster.jpg');
    background-image: image-set(url('/assets/img/hero-video-poster.webp') type('image/webp'),
                                url('/assets/img/hero-video-poster.jpg') type('image/jpeg'));
    background-size: cover; background-position: center 28%;
  }
}

/* ---------- sections ---------- */
.section { padding: 86px 0; }
.section.tight { padding: 60px 0; }
.section.beige { background: var(--beige-tint); }
.section.beige-strong { background: var(--beige-soft); }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 54px; }
.section-head .eyebrow { font-family: var(--head); text-transform: uppercase; letter-spacing: 3px; font-size: .72rem; color: var(--text-soft); display: block; margin-bottom: 14px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
.section-head p { color: var(--text-soft); font-size: 1.05rem; }

/* split (image + text) */
/* Foto en tekst vormen één blok: de foto is absoluut gepositioneerd, dus hij bepaalt
   de rijhoogte niet maar vult die. Rijhoogte volgt de tekst (of de min-height). */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; }
.split .media { position: relative; min-height: 300px; }
.split .media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.split > div:not(.media) { display: flex; flex-direction: column; justify-content: center; }
.split h2 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); }
.split.reverse .media { order: 2; }

/* ---------- review cards ---------- */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.review-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
}
.review-card .stars { color: var(--brown-soft); letter-spacing: 2px; margin-bottom: 12px; font-size: .95rem; }
.review-card p { font-style: italic; color: var(--text); flex: 1; }
.review-card .who { font-family: var(--head); font-weight: 700; color: var(--brown); margin-top: 14px; }

/* ---------- treatment overview tiles ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.tile {
  display: block; background: var(--white); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
}
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.tile .thumb { aspect-ratio: 4/3; overflow: hidden; }
.tile .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.tile:hover .thumb img { transform: scale(1.05); }
.tile .tile-body { padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tile h3 { font-size: 1.12rem; margin: 0; color: var(--brown); }
.tile .arrow { color: var(--beige); font-size: 1.4rem; transition: transform .25s ease; }
.tile:hover .arrow { transform: translateX(4px); color: var(--brown); }

/* ---------- page banner (inner pages) ---------- */
.page-banner {
  position: relative; padding: 78px 0; text-align: center; color: var(--white);
  background: linear-gradient(rgba(42,35,32,.62), rgba(42,35,32,.72)) center/cover no-repeat;
  background-color: var(--brown);
}
.page-banner.plain {
  background: var(--beige-soft); color: var(--brown); padding: 64px 0 56px;
}
.page-banner h1 { color: inherit; font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: .15em; }
.page-banner.plain h1 { color: var(--brown); }
.breadcrumb { font-size: .82rem; font-family: var(--head); letter-spacing: .4px; }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; }
.breadcrumb li { margin: 0; }
.breadcrumb li + li::before { content: "\00BB"; margin-right: 6px; }
.breadcrumb a { color: inherit; }
.page-banner.plain .breadcrumb { color: var(--text-soft); }

/* ---------- content / prose ---------- */
.prose { max-width: 860px; margin: 0 auto; }
.prose h2 { font-size: 1.7rem; margin-top: 1.6em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.4em; color: var(--brown); }
.prose h4 { font-size: 1.05rem; color: var(--brown-soft); }
.prose .lead-intro { font-size: 1.15rem; color: var(--text); }
.prose img { border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 1.5em 0; }

/* ---------- price / treatment tables ---------- */
.treat-group { margin: 0 0 40px; }
.treat-group__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px;
  border-bottom: 2px solid var(--beige); padding-bottom: 12px; margin-bottom: 8px;
}
.treat-group__head h2 { font-size: 1.45rem; margin: 0; }
.treat-group__from { font-family: var(--head); font-weight: 700; color: var(--brown); white-space: nowrap; }
.treat-note { font-size: .92rem; color: var(--text-soft); margin: 12px 0 16px; }
.treat-row {
  display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line);
}
.treat-row:last-child { border-bottom: 0; }
.treat-row .t-name { font-family: var(--head); font-weight: 600; color: var(--brown); }
.treat-row .t-desc { display: block; font-family: var(--sans); font-weight: 400; font-size: .88rem; color: var(--text-soft); margin-top: 3px; }
.treat-row .t-dots { flex: 1; border-bottom: 1px dotted #cdbfae; transform: translateY(-4px); min-width: 18px; }
.treat-row .t-price { font-family: var(--head); font-weight: 700; color: var(--brown); white-space: nowrap; }
.treat-row .t-dur { display: block; font-size: .78rem; color: var(--text-soft); font-weight: 400; text-align: right; }

/* info callout */
.callout { background: var(--beige-tint); border-left: 4px solid var(--beige); border-radius: var(--radius-sm); padding: 18px 22px; margin: 0 0 28px; font-size: .95rem; }
.callout strong { color: var(--brown); }

/* ---------- FAQ accordion ---------- */
.faq-cat { margin-bottom: 44px; }
.faq-cat > h2 { font-size: 1.6rem; padding-bottom: 10px; border-bottom: 2px solid var(--beige); margin-bottom: 18px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; background: var(--white); }
.faq-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: var(--head); font-weight: 600; font-size: 1.02rem; color: var(--brown);
  padding: 18px 54px 18px 22px; position: relative;
}
.faq-q::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--beige); font-weight: 400; transition: transform .25s ease; }
.faq-item.open .faq-q::after { content: "\2212"; }
.faq-a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .3s ease, visibility 0s linear .3s; }
.faq-item.open .faq-a { visibility: visible; transition: max-height .3s ease, visibility 0s; }
.faq-a__inner { padding: 0 22px 20px; }
.faq-a p:last-child, .faq-a ul:last-child { margin-bottom: 0; }

/* ---------- contact ---------- */
/* Twee gelijke kolommen; de kaart rekt mee zodat beide kaarten op dezelfde lijn eindigen. */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
.contact-card, .contact-side {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 34px; box-shadow: var(--shadow-sm);
}
.ct-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.3rem; margin: 0 0 4px; padding-bottom: 15px; border-bottom: 1px solid var(--line);
}
.ct-head svg { width: 19px; height: 19px; flex: none; color: var(--brown-soft); }
.ct-head--sub { margin-top: 30px; }

.ct-list { list-style: none; margin: 0; padding: 0; }
.ct-list li { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 15px 0; border-bottom: 1px solid var(--beige-soft); }
.ct-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.ct-ico {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--beige-tint); border: 1px solid var(--line); color: var(--brown);
}
.ct-ico svg { width: 19px; height: 19px; }
.ct-lbl {
  display: block; font-family: var(--head); font-size: .68rem; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-soft); margin-bottom: 2px;
}
.ct-list a { font-weight: 500; }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 9px 0; border-bottom: 1px solid var(--beige-soft); font-size: .95rem; }
.hours-table tr:last-child td { border-bottom: 0; }
.hours-table td:last-child { text-align: right; font-family: var(--head); font-weight: 600; color: var(--brown); }
.hours-table tr.closed td:last-child { color: var(--text-soft); font-weight: 500; }

.map-embed { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.contact-side .map-embed { flex: 1 1 auto; min-height: 320px; margin-top: 22px; }
.map-embed iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }
.ct-note { margin: 22px 0 0; font-size: .95rem; color: var(--text-soft); }
.ct-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.ct-actions .btn { padding: 13px 26px; }
#booking { scroll-margin-top: 150px; }
.booking-frame { background: var(--beige-tint); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; min-height: 720px; }

/* ---------- TikTok-galerij ---------- */
.tt-rij { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.tt-tegel {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 9 / 16; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  background: var(--beige-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}
.tt-tegel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.tt-tegel:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.tt-tegel:hover img { transform: scale(1.05); }
.tt-overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(42,35,32,0) 45%, rgba(42,35,32,.42) 100%);
  transition: background .25s ease;
}
.tt-tegel:hover .tt-overlay { background: linear-gradient(180deg, rgba(42,35,32,.10) 40%, rgba(42,35,32,.55) 100%); }
.tt-play {
  width: 46px; height: 46px; fill: var(--white); opacity: .92;
  filter: drop-shadow(0 2px 10px rgba(42,35,32,.45));
  transition: transform .25s ease;
}
.tt-tegel:hover .tt-play { transform: scale(1.12); }

/* ---------- CTA band ---------- */
.cta-band { background: linear-gradient(135deg, #8A6A52, #75543F); color: var(--white); padding: 24px 0; }
.cta-band-inner { display: flex; align-items: center; justify-content: center; gap: 16px 40px; flex-wrap: wrap; text-align: center; }
.cta-band h2 { color: var(--white); font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 500; margin: 0; }
.cta-band .btn { padding: 11px 26px; }

/* ---------- CTA strip (dienstpagina's: slanke balk tussen blokken en tarieven) ---------- */
.cta-strip { background: var(--beige); padding: 20px 0; }
.cta-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; }
.cta-strip .stats { display: grid; grid-template-columns: repeat(4, 1fr); flex: 1 1 520px; max-width: 760px; text-align: center; }
.cta-strip .stat { padding: 0 14px; border-left: 1px solid rgba(42,35,32,.22); }
.cta-strip .stat:first-child { border-left: 0; }
.cta-strip .stat b { display: block; font-family: var(--head); font-size: 1.25rem; font-weight: 700; color: var(--brown); line-height: 1.2; }
.cta-strip .stat span { font-size: .66rem; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(42,35,32,.9); white-space: nowrap; }
.cta-strip .strip-cta { display: flex; align-items: center; gap: 18px; margin: 0 auto; }
.cta-strip .strip-cta .btn { padding: 11px 24px; }
.cta-strip .strip-tel { color: var(--brown); font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) {
  .cta-strip .stats { grid-template-columns: 1fr 1fr; gap: 12px 0; }
  .cta-strip .stat:nth-child(3) { border-left: 0; }
  .cta-strip .strip-cta { width: 100%; justify-content: center; }
}

/* ---------- footer ---------- */
.site-footer {
  /* Deze foto staat op alle 28 pagina's. Oude browsers pakken de jpg (524KB),
     nieuwe overschrijven met de image-set en halen de avif (71KB). */
  background: linear-gradient(rgba(36,30,27,.75), rgba(36,30,27,.85)), #241E1B url('/assets/img/hero-wassen.jpg') center/cover no-repeat;
  background-image: linear-gradient(rgba(36,30,27,.75), rgba(36,30,27,.85)),
    image-set(url('/assets/img/hero-wassen.avif') type('image/avif'),
              url('/assets/img/hero-wassen.webp') type('image/webp'),
              url('/assets/img/hero-wassen.jpg') type('image/jpeg'));
  color: rgba(248,241,232,.85); padding: 70px 0 0; font-size: .92rem;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; }
.site-footer h3 { color: var(--white); font-size: 1rem; letter-spacing: .5px; margin-bottom: 18px; }
.site-footer a { color: rgba(255,255,255,.75); }
.site-footer a:hover { color: var(--beige); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer .footer-grid li a { display: block; }
.footer-brand img { height: 60px; width: auto; margin-bottom: 18px; opacity: .96; }
.footer-brand p { max-width: 34ch; }
.footer-hours td { padding: 3px 0; }
.footer-hours td:last-child { text-align: right; padding-left: 18px; color: rgba(255,255,255,.9); }
.social-row { display: flex; gap: 12px; margin-top: 6px; }
.social-row a {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.social-row a:hover { background: var(--beige); color: var(--brown); border-color: var(--beige); }
.social-row svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 56px; padding: 22px 0; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .82rem; color: rgba(255,255,255,.7); }
.footer-bottom a { color: rgba(255,255,255,.75); }

/* ---------- utilities ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.btn-row-c { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }

/* script-accent (Allura) — spaarzaam gebruiken */
.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 2.1rem; color: var(--brown-soft); }
.section-head .eyebrow.script { font-size: 2rem; letter-spacing: 0; }

/* ---------- skip link + screenreader-tekst ---------- */
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--brown); color: var(--white); padding: 10px 18px;
  border-radius: var(--radius-sm); font-family: var(--head); font-size: .9rem;
  transition: top .2s ease;
}
.skip-link:focus { top: 8px; color: var(--white); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- zichtbare toetsenbord-focus ---------- */
/* --brown haalt 12.2:1 tot 14.4:1 op alle lichte tinten; op de donkere vlakken
   zou hij wegvallen, vandaar de witte variant daar. */
:focus-visible { outline: 2px solid var(--brown); outline-offset: 2px; }
.site-footer :focus-visible,
.hero-panel :focus-visible,
.cta-band :focus-visible,
.page-banner:not(.plain) :focus-visible { outline-color: var(--white); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 30px; }
  .split.reverse .media { order: 0; }
  .split .media { min-height: 0; aspect-ratio: 4 / 3; }
  .review-grid, .tile-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  /* Blijft één rij, maar dan swipend: 5 tegels naast elkaar is hier onleesbaar. */
  .tt-rij {
    display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: 6px;
    scrollbar-width: none;
  }
  .tt-rij::-webkit-scrollbar { display: none; }
  .tt-tegel { flex: 0 0 46%; scroll-snap-align: start; }
}
@media (max-width: 760px) {
  .nav-toggle { display: block; }
  /* .nav-tel valt hieronder weg uit het grid, waardoor het logo van de auto-kolom
     naar de geknelde 1fr-kolom schoof en in elkaar werd gedrukt (70x42 op 2.86). */
  .nav-top-inner { height: 70px; grid-template-columns: auto 1fr; }
  .brand { justify-self: start; }
  .brand img { height: 42px; }
  .nav-tel { display: none; }
  .nav-links { border-top: 0; }
  .nav-menu {
    position: fixed; inset: 70px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line); padding: 12px 18px 22px;
    box-shadow: var(--shadow); transform: translateY(-130%);
    /* alleen wegschuiven laat de links focusbaar: je tabt door een onzichtbaar menu */
    visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s;
    max-height: calc(100vh - 70px); overflow-y: auto;
  }
  .nav.open .nav-menu { transform: translateY(0); visibility: visible; transition: transform .3s ease, visibility 0s; }
  .nav-menu > li > a { padding: 13px 6px; border-bottom: 1px solid var(--beige-soft); font-size: 1.15rem; }
  .nav-menu > li.current > a::before { display: none; }
  .nav-menu .has-children > a::after { float: right; }
  .dropdown {
    position: static; opacity: 1; visibility: inherit; transform: none; box-shadow: none;
    border: 0; border-radius: 0; padding: 0 0 6px 14px; min-width: 0; background: none;
    display: none;
  }
  .dropdown a { text-align: left; }
  .nav-menu > li.has-children.open-sub .dropdown { display: block; }
  .section { padding: 60px 0; }
  .review-grid, .tile-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-panel-in { max-width: none; padding: 54px 24px; }
  /* Ruimer dan de oude fotostrook van 320px: het bronmateriaal is verticaal,
     in een lage strook wordt er zoveel weggesneden dat de actie niet meer leesbaar is. */
  .hero-foto { min-height: 0; aspect-ratio: 4 / 5; }
  .contact-card, .contact-side { padding: 24px 20px; }
  .ct-list li { gap: 13px; }
  .ct-actions .btn { width: 100%; }
}

/* ---------- respecteer de beweging-voorkeur ---------- */
/* Bewust chirurgisch: alleen de decoratieve hover-transforms uit. De functionele
   transforms (mobiel menu, dropdown-centrering, FAQ-plusje) blijven staan. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .tile:hover, .tt-tegel:hover { transform: none; }
  .tile:hover .thumb img, .tt-tegel:hover img,
  .tile:hover .arrow, .tt-tegel:hover .tt-play { transform: none; }
}