/* ==========================================================================
   Doris Beauty Salon - demo stylesheet (v3)
   Concept: Koreaans seladon. Eén accent, warme papier-grond, editorial serif.
   Breedte: vloeiend (hcwecare-referentie) - 1342px op een 1440-venster.

   v4: voet in vijf kolommen, beeld uit assets/ (stock), geen prijzen in de kaarten.

   v3 kernregel - BEELDVERHOUDING:
   In elke tweekolomssectie strekt het beeld exact mee met de tekstkolom
   (`align-items:stretch` + `height:100%` + `object-fit:cover`). Een beeld
   loopt dus nooit door onder of naast de laatste tekstregel. Losse banden
   krijgen een expliciete max-hoogte.
   ========================================================================== */

:root{
  --paper:     #F7F4F0;
  --paper-2:   #EFE9E3;
  --paper-3:   #E4DBD2;
  --ink:       #241F1C;
  --ink-soft:  #4A423D;
  --ink-faint: #7C736C;
  --accent:    #5F7D6E;
  --accent-d:  #43594E;
  --accent-s:  rgba(95,125,110,.10);
  --line:      rgba(36,31,28,.11);
  --line-2:    rgba(36,31,28,.20);
  --max-w:     1600px;
  /* +22px t.o.v. v3: content staat verder van de paginarand, nav lijnt mee (zelfde .wrap) */
  --gutter:    clamp(28px, calc(3.4vw + 22px), 78px);
  --ease:      cubic-bezier(.16,1,.3,1);
  --fs-eyebrow: 11px;
  --fs-meta:    13px;
  --fs-small:   15px;
  --fs-body:    17px;
  --fs-lead:    clamp(1.125rem, 1.45vw, 1.375rem);
  --fs-h3:      clamp(1.25rem, 1.9vw, 1.625rem);
  --fs-h2:      clamp(1.875rem, 3.4vw, 2.875rem);
  --fs-h1:      clamp(2.5rem, 5.6vw, 4.5rem);
  --fs-display: clamp(2rem, 4.2vw, 3.25rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink-soft);
  font:400 var(--fs-body)/1.65 "Outfit",system-ui,sans-serif;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{
  font-family:"Newsreader",Georgia,serif;font-weight:300;color:var(--ink);
  line-height:1.14;letter-spacing:-.015em;text-wrap:balance;margin:0;
}
h1{font-size:var(--fs-h1);line-height:1.06}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0}
:focus-visible{outline:2px solid var(--accent-d);outline-offset:3px;border-radius:2px}

/* ---------- shell ---------- */
.wrap{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:var(--gutter)}
section{padding-block:var(--pad,88px)}
.sec-tight{--pad:64px}
.sec-wide{--pad:112px}
.bg-2{background:var(--paper-2)}
.bg-3{background:var(--paper-3)}
.bg-accent-s{background:var(--accent-s)}

.eyebrow{
  font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;margin:0 0 18px;
}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-soft);max-width:62ch}
.prose{max-width:66ch}
.meta{font-size:var(--fs-meta);color:var(--ink-faint);letter-spacing:.02em}

/* sectiekop naast elkaar (titel links, intro rechts) */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:clamp(28px,4vw,72px);align-items:end}
.sec-head .lead{margin:0}
/* sectiekop gestapeld (intro ónder de titel) */
.sec-head-stack{max-width:70ch}
.sec-head-stack .lead{margin-top:20px}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 28px;
  font:500 var(--fs-small)/1.2 "Outfit",sans-serif;letter-spacing:.01em;
  text-decoration:none;border-radius:2px;border:1px solid transparent;cursor:pointer;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.btn:hover{opacity:.82}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--accent);color:var(--paper)}
.btn-ghost{border-color:var(--line-2);color:var(--ink)}
.btn-light{background:var(--paper);color:var(--accent-d)}
.btn-on-img{border:1px solid rgba(247,244,240,.5);color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ---------- nav + mega ---------- */
.nav{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:1px solid var(--line)}
.nav-in{display:flex;align-items:center;gap:40px;min-height:74px}
.brand{font:400 22px/1.1 "Newsreader",Georgia,serif;color:var(--ink);text-decoration:none}
.nav-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-left:auto;justify-content:flex-end;min-width:0}
.nav-link{
  font:400 var(--fs-small)/1.2 "Outfit",sans-serif;color:var(--ink-soft);
  text-decoration:none;background:none;border:0;padding:8px 0;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:opacity .22s var(--ease);
}
.nav-link:hover{opacity:.62}
.nav-link[aria-current="page"]{color:var(--ink)}
.nav-caret{width:9px;height:9px;transition:transform .3s var(--ease)}
.nav-link[aria-expanded="true"] .nav-caret{transform:rotate(180deg)}

.mega{
  position:absolute;left:0;right:0;top:100%;background:var(--paper);
  border-bottom:1px solid var(--line);opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
}
.mega.is-open{opacity:1;visibility:visible;transform:none}
.mega-grid{display:grid;grid-template-columns:1fr 1fr 1fr .82fr;gap:48px;padding-block:44px 52px}
.mega-head{
  font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;padding-bottom:12px;margin-bottom:20px;
  border-bottom:1px solid var(--line);
}
.mega-list{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.mega-list a{font-size:16px;color:var(--ink-soft);text-decoration:none;transition:opacity .2s var(--ease)}
.mega-list a:hover{opacity:.58}
.mega-feat{text-decoration:none;display:block}
.mega-feat img{aspect-ratio:4/5;object-fit:cover;border-radius:2px}
.mega-feat h3{font-size:20px;margin-top:14px}
.mega-feat .meta{margin-top:5px;color:var(--accent-d)}

/* ---------- HERO - full-bleed beeld met tekst eroverheen (Reshape-model) ---------- */
.hero-full{
  position:relative;min-height:min(88vh,860px);display:flex;flex-direction:column;
  justify-content:flex-end;overflow:hidden;padding-block:0 clamp(56px,5.5vw,92px);
}
/* ruimere aanloop boven de eyebrow in de hero */
.hero-full .eyebrow{margin-top:20px;margin-bottom:22px}
.hero-full img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(28,24,21,.82) 0%,rgba(28,24,21,.55) 42%,rgba(28,24,21,.18) 78%,rgba(28,24,21,.05) 100%);
}
.hero-in{position:relative;z-index:2;width:100%}
.hero-full h1{color:#fff;max-width:17ch}
.hero-full .eyebrow{color:rgba(255,255,255,.78)}
.hero-full .lead{color:rgba(255,255,255,.92);margin-top:24px;max-width:56ch}
.hero-full .btn-row{margin-top:30px}
.hero-proof{
  display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;margin-top:34px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.28);
}
.hero-proof{list-style:none;margin:34px 0 0;padding:22px 0 0}
.hero-proof li,.hero-proof span{font-size:var(--fs-small);color:rgba(255,255,255,.88);display:inline-flex;align-items:center;gap:9px}
.hero-proof li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

/* feitenrail (behandelpagina) */
.factrail{
  display:flex;flex-wrap:wrap;gap:0 clamp(24px,3.2vw,56px);
  border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);
  margin-top:32px;padding-block:20px;
}
.factrail div{display:grid;gap:5px;padding-right:clamp(18px,2.2vw,36px)}
.factrail .k{font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-weight:500}
.factrail .v{font-size:var(--fs-h3);font-family:"Newsreader",Georgia,serif;font-weight:300;color:var(--ink);font-variant-numeric:tabular-nums}
.factrail .btn{margin-left:auto;align-self:center}
.factrail-on-img{border-color:rgba(255,255,255,.3)}
.factrail-on-img .k{color:rgba(255,255,255,.72)}
.factrail-on-img .v{color:#fff}

/* ---------- tweekolomssectie: beeld strekt mee met de tekst ---------- */
.duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);
  gap:clamp(32px,4.5vw,72px);align-items:stretch;
}
.duo > .duo-text{min-width:0;align-self:center}
/* WHY: het beeld staat absoluut zodat het NIET meetelt voor de rijhoogte. Anders bepaalt
   de beeldverhouding hoe hoog de sectie wordt en loopt het beeld door onder de laatste
   tekstregel. Nu volgt het beeld exact de hoogte van de tekstkolom. */
.duo > .duo-media{min-width:0;position:relative}
.duo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:2px}
.duo-narrow{grid-template-columns:minmax(0,1fr) minmax(0,34%)}

/* ---------- signatuur-feature: beeld begrensd, kaart ernaast ---------- */
.feature{display:grid;grid-template-columns:minmax(0,46%) minmax(0,1fr);gap:0;align-items:stretch;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:var(--paper)}
.feature-media{min-width:0;position:relative}
.feature-media img{width:100%;height:100%;object-fit:cover;max-height:520px}
.feature-body{min-width:0;padding:clamp(28px,3.2vw,52px);align-self:center}
.feature-body h2{margin-bottom:18px}
.feature-body .prose{display:grid;gap:14px}

/* ---------- statement ---------- */
.statement{
  font-family:"Newsreader",Georgia,serif;font-weight:300;font-style:italic;
  font-size:var(--fs-display);line-height:1.24;color:var(--ink);letter-spacing:-.02em;max-width:18ch;
}
.statement-sub{margin-top:24px;max-width:52ch}

/* ---------- behandelkaarten met per-behandeling links ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px}
.card{
  background:var(--paper-2);border:1px solid var(--line);border-radius:25px;padding:34px 32px;
  min-width:0;display:flex;flex-direction:column;gap:14px;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.card:hover,.card:focus-within{transform:translateY(-3px);border-color:var(--line-2)}
.card svg.ico{width:28px;height:28px;stroke:var(--accent);fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.card > p{font-size:var(--fs-small);color:var(--ink-soft)}
.card ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.card li{border-bottom:1px solid var(--line)}
.card li:last-child{border-bottom:0}
.tlink{
  display:flex;align-items:baseline;gap:12px;
  padding:11px 0;text-decoration:none;font-size:var(--fs-small);color:var(--ink-soft);
  transition:transform .25s var(--ease),color .25s var(--ease);
}
.tlink .t{min-width:0}
.tlink .ar{opacity:0;transition:opacity .25s var(--ease),transform .25s var(--ease);color:var(--accent-d)}
.tlink:hover,.tlink:focus-visible{color:var(--ink);transform:translateX(5px)}
.tlink:hover .ar,.tlink:focus-visible .ar{opacity:1}
.card .foot-note{margin-top:auto;padding-top:14px;font-size:var(--fs-meta);color:var(--ink-faint)}

/* ---------- stappen met uitleg ---------- */
.track-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:34px}
.track-count{font-size:var(--fs-meta);color:var(--ink-faint);font-variant-numeric:tabular-nums}
.track-nav{display:flex;gap:10px;flex:none}
.track-btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);background:transparent;
  cursor:pointer;display:grid;place-items:center;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.track-btn:hover{opacity:.6}
.track-btn:active{transform:scale(.94)}
.track-btn[disabled]{opacity:.28;cursor:default}
.track-btn svg{width:17px;height:17px;stroke:var(--ink);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.track{
  display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  margin-top:20px;padding:0 0 6px;list-style:none;scrollbar-width:none;
}
.track::-webkit-scrollbar{display:none}
.stepcell{
  scroll-snap-align:start;background:var(--paper);border:1px solid var(--line);border-radius:25px;
  padding:30px 28px;min-width:0;display:grid;gap:9px;align-content:start;
}
.bg-2 .stepcell{background:var(--paper-2)}
.stepcell .n{font-size:var(--fs-meta);color:var(--accent-d);font-variant-numeric:tabular-nums;letter-spacing:.06em}
.stepcell h3{font-size:var(--fs-h3)}
.stepcell p{font-size:var(--fs-small);color:var(--ink-soft)}

/* ---------- ingrediëntenkaarten met interactie ---------- */
.ing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:36px;background:var(--line)}
.ing-cell{
  background:var(--paper);padding:28px 26px;min-width:0;display:grid;gap:11px;align-content:start;
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.bg-2 .ing-cell{background:var(--paper-2)}
.ing-cell:hover,.ing-cell:focus-within{background:var(--accent-s);transform:translateY(-2px)}
.ing-cell h3{font-size:var(--fs-h3);display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.ing-cell .num{font-family:"Outfit",sans-serif;font-size:var(--fs-meta);color:var(--accent-d);font-variant-numeric:tabular-nums}
.ing-cell p{font-size:var(--fs-small);color:var(--ink-soft)}

/* ---------- uitleg-rijen: label links, antwoord rechts ---------- */
.explain{margin:40px 0 0;border-top:1px solid var(--line)}
.explain > div{
  display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);
  gap:clamp(16px,3vw,56px);padding-block:26px;border-bottom:1px solid var(--line);align-items:start;
}
.explain dt{
  font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;padding-top:6px;
}
.explain dd{margin:0;max-width:720px;display:grid;gap:12px}
.explain dd p{font-size:var(--fs-body);color:var(--ink-soft)}
.explain a{background:none;color:var(--accent-d);text-decoration:underline;text-underline-offset:3px}

/* ---------- twee-koloms vragen ---------- */
.faq-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,4vw,72px);margin-top:40px}
.faq-col{border-top:1px solid var(--line)}
.faq-col details{border-bottom:1px solid var(--line)}
.faq-col summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:20px;font:300 var(--fs-h3)/1.25 "Newsreader",Georgia,serif;color:var(--ink);
}
.faq-col summary::-webkit-details-marker{display:none}
.acc-sign{flex:none;width:22px;height:22px;position:relative}
.acc-sign::before,.acc-sign::after{content:"";position:absolute;left:50%;top:50%;background:var(--accent-d);transition:transform .3s var(--ease)}
.acc-sign::before{width:14px;height:1px;transform:translate(-50%,-50%)}
.acc-sign::after{width:1px;height:14px;transform:translate(-50%,-50%)}
details[open] .acc-sign::after{transform:translate(-50%,-50%) scaleY(0)}
.acc-body{padding-bottom:24px;display:grid;gap:10px}
.acc-body p{font-size:var(--fs-body);color:var(--ink-soft)}

/* ---------- nazorg / geschiktheid ---------- */
.numlist{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.numlist li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;padding-block:15px;border-bottom:1px solid var(--line);align-items:baseline}
.numlist .n{font-size:var(--fs-meta);color:var(--accent-d);font-variant-numeric:tabular-nums}
.numlist p{font-size:var(--fs-body);color:var(--ink)}
.chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:30px;background:var(--line)}
.chip{background:var(--paper);padding:18px 20px;font-size:var(--fs-body);color:var(--ink)}
.bg-2 .chip{background:var(--paper-2)}

/* ---------- cta ---------- */
.cta{background:var(--accent);color:var(--paper)}
.cta h2{color:var(--paper)}
.cta .eyebrow{color:rgba(247,244,240,.72)}
.cta .duo img{border-radius:2px}
.cta p{color:rgba(247,244,240,.9);max-width:50ch;margin-top:18px}
.cta-ways{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;border-top:1px solid rgba(247,244,240,.3)}
.cta-ways li{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding-block:13px;border-bottom:1px solid rgba(247,244,240,.3)}
.cta-ways .k{font-size:var(--fs-eyebrow);letter-spacing:.14em;text-transform:uppercase;color:rgba(247,244,240,.72);font-weight:500;min-width:96px}
.cta-ways .v{font-size:var(--fs-body);color:var(--paper)}

/* ---------- footer met volledig behandeloverzicht ---------- */
.foot{border-top:1px solid var(--line);padding-block:76px 30px;background:var(--paper-2)}
.foot-top{display:grid;grid-template-columns:1.15fr 1.15fr .82fr 1.05fr .83fr;gap:clamp(24px,2.4vw,44px)}
.foot-brand{font:400 26px/1.2 "Newsreader",Georgia,serif;color:var(--ink)}
.foot-nap{margin-top:18px;display:grid;gap:7px;font-size:var(--fs-small);color:var(--ink-faint)}
.foot-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.foot-list li{border-bottom:1px solid var(--line)}
.foot-list li:last-child{border-bottom:0}
.foot-list a{
  display:block;padding:9px 0;font-size:var(--fs-small);color:var(--ink-soft);text-decoration:none;
  transition:color .22s var(--ease),transform .22s var(--ease);
}
.foot-list a:hover{color:var(--ink);transform:translateX(4px)}
.foot-mid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,52px);
  margin-top:52px;padding-top:36px;border-top:1px solid var(--line)}
.foot-mid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot-mid a,.foot-mid li{font-size:16px;color:var(--ink-soft);text-decoration:none}
.foot-mid a:hover{opacity:.62}
.foot-bar{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;
  border-top:1px solid var(--line);margin-top:44px;padding-top:22px}
.foot-bar,.foot-bar a{font-size:var(--fs-meta);color:var(--ink-faint);text-decoration:none}
.foot-bar nav{display:flex;gap:26px}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .mega-grid{grid-template-columns:1fr 1fr;gap:36px}
  .cards,.ing-grid{grid-template-columns:1fr 1fr}
  .track{grid-auto-columns:calc((100% - 24px)/2)}
  .foot-top{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chips{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .nav-in{flex-wrap:wrap;row-gap:6px;padding-block:12px}
  .nav-links{margin-left:0;width:100%;justify-content:flex-start}
}
@media (max-width:860px){
  .sec-head,.duo,.duo-narrow,.faq-2col,.feature{grid-template-columns:minmax(0,1fr)}
  .explain > div{grid-template-columns:minmax(0,1fr);gap:10px;padding-block:22px}
  .explain dt{padding-top:0}
  .faq-2col{gap:0}
  .faq-col + .faq-col{border-top:0}
  .statement{max-width:none}
  .duo{align-items:start}
  .duo > .duo-media{position:static}
  .duo img{position:static;height:auto;aspect-ratio:4/3;max-width:520px}
  .feature-media img{max-height:340px}
  .factrail .btn{margin-left:0;width:100%;justify-content:center;margin-top:12px}
  .hero-full{min-height:min(78vh,720px)}
  section{--pad:64px}
  .sec-wide{--pad:76px}
}
@media (max-width:600px){
  .cards,.ing-grid,.chips,.foot-top,.foot-mid{grid-template-columns:minmax(0,1fr)}
  .track{grid-auto-columns:86%}
}
@media (max-width:520px){
  .mega-grid{grid-template-columns:1fr}
}
@media (max-width:440px){
  /* WHY: op 320px passen merk + drie navlinks niet op één regel; verkleinen zou onder
     het 16px-minimum duiken, dus wrapt de navigatie naar een tweede rij. */
  .nav-in{flex-wrap:wrap;row-gap:6px;padding-block:10px;min-height:0}
  .nav-links{margin-left:0;width:100%;gap:10px 16px;justify-content:flex-start}
  .nav-links .btn{min-height:44px;padding:0 20px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .track{scroll-behavior:auto}
}