/* ============================================================
   Secties — La Belle Beauté homepage
   Hero, visie, Over Henriette, behandelingen, Kalahari, USP's,
   reviews, locaties, CTA. Bron: homepage-ontwerp.
   Achtergrondfoto's worden per element inline gezet vanuit ACF
   (met theme-asset fallback) — niet hier hardcoded.
   ============================================================ */

/* anker-offset zodat sectiekoppen niet onder de vaste header verdwijnen */
section[id] { scroll-margin-top:96px; }

/* ============================ HERO ============================ */
.hero {
  position:    relative;
  min-height:  calc(100svh - 43px);
  display:     flex;
  align-items: flex-end;
  overflow:    hidden;
  background:  var(--black);
}
.hero__img {
  position:        absolute;
  inset:           0;
  background-size:  cover;
  background-position: center;
  transform:       scale(1.06);
  animation:       heroZoom 9s var(--ease) forwards;
}
@keyframes heroZoom { to { transform:scale(1); } }
.hero__veil {
  position:  absolute;
  inset:     0;
  background:
    linear-gradient(90deg, rgba(20,17,15,.86) 0%, rgba(20,17,15,.5) 40%, rgba(20,17,15,.08) 70%, rgba(20,17,15,0) 100%),
    linear-gradient(0deg, rgba(20,17,15,.92) 0%, rgba(20,17,15,.2) 38%, rgba(20,17,15,0) 62%);
}
.hero .container { position:relative; z-index:2; padding-bottom:clamp(70px,12vh,140px); padding-top:160px; }
.hero__inner { max-width:680px; }
.hero h1 { margin:.32em 0 .42em; color:var(--white); }
.hero h1 .it { display:block; }
.hero__sub { max-width:30em; color:rgba(246,241,234,.85); margin-bottom:2.4em; }
.hero__cta { display:flex; flex-wrap:wrap; gap:16px; }
.hero__meta {
  margin-top:      2.6em;
  display:         flex;
  align-items:     center;
  gap:             14px;
  font-size:       .74rem;
  letter-spacing:  .22em;
  text-transform:  uppercase;
  color:           var(--taupe-soft);
}
.hero__meta .dot { width:5px; height:5px; border-radius:50%; background:var(--gold); }

.scrollcue {
  position:        absolute;
  left:            50%;
  bottom:          26px;
  z-index:         2;
  transform:       translateX(-50%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             10px;
  color:           var(--taupe-soft);
  font-size:       .62rem;
  letter-spacing:  .3em;
  text-transform:  uppercase;
}
.scrollcue .ln { width:1px; height:46px; background:linear-gradient(var(--gold),transparent); animation:cue 2.2s var(--ease) infinite; }
@keyframes cue { 0%{transform:scaleY(.3);transform-origin:top;opacity:0} 40%{opacity:1} 100%{transform:scaleY(1);transform-origin:top;opacity:0} }
@media(max-width:680px){ .scrollcue{display:none} }

/* hero stagger */
.hero [data-h] { opacity:0; transform:translateY(20px); animation:heroUp 1s var(--ease) forwards; }
.hero [data-h="1"]{ animation-delay:.35s; }
.hero [data-h="2"]{ animation-delay:.5s; }
.hero [data-h="3"]{ animation-delay:.68s; }
.hero [data-h="4"]{ animation-delay:.86s; }
.hero [data-h="5"]{ animation-delay:1.04s; }
@keyframes heroUp { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .hero__img { animation:none; transform:none; }
  .hero [data-h] { animation:none; opacity:1; transform:none; }
}

/* ============================ VISIE / FILOSOFIE ============================ */
.philo { position:relative; }
.philo__grid { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(34px,6vw,90px); align-items:start; }
.philo__q { font-family:var(--ff-display); font-weight:400; font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.12; color:var(--white); }
.philo__q .it { color:var(--gold); }
.philo__body { padding-top:.5em; }
.philo__body p+p { margin-top:1.3em; }
.philo__rule { width:46px; height:1px; background:var(--gold); margin-bottom:2em; opacity:.7; }
@media(max-width:820px){ .philo__grid{grid-template-columns:1fr;gap:28px} }

/* ============================ OVER HENRIETTE ============================ */
.hen__grid { display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(34px,6vw,80px); align-items:center; }
.hen__ph { position:relative; aspect-ratio:4/5; border:1px solid var(--gold); border-radius:4px; overflow:hidden; background:#2c241e; }
.hen__ph img { width:100%; height:100%; object-fit:cover; display:block; }
.hen__ph::after { content:""; position:absolute; inset:10px; border:1px solid rgba(246,241,234,.28); border-radius:3px; pointer-events:none; }
.hen__txt p { margin:1.3em 0; max-width:42ch; }
.hen__txt .btn { margin-top:.6em; }
@media(max-width:820px){ .hen__grid{grid-template-columns:1fr;gap:34px} .hen__fig{max-width:360px} }

/* ============================ BEHANDELINGEN ============================ */
.sec-head { display:flex; justify-content:space-between; align-items:flex-end; gap:clamp(24px,4vw,56px); margin-bottom:clamp(40px,5vw,68px); }
.sec-head__t { flex:1 1 auto; min-width:0; }
.sec-head>p { flex:0 0 clamp(220px,30%,340px); }
.sec-head h2 { margin-top:.3em; }
@media(max-width:760px){ .sec-head{flex-direction:column;align-items:flex-start} .sec-head>p{flex:none} }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); }
.card {
  position:         relative;
  display:          flex;
  flex-direction:   column;
  justify-content:  flex-end;
  min-height:       380px;
  padding:          34px 30px;
  border-radius:    3px;
  overflow:         hidden;
  color:            var(--cream);
  isolation:        isolate;
  transition:       transform .6s var(--ease);
}
.card__bg { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; transition:transform .8s var(--ease); }
.card::after {
  content:    "";
  position:   absolute;
  inset:      0;
  z-index:    -1;
  background:
    linear-gradient(0deg, rgba(18,14,12,.92) 0%, rgba(18,14,12,.32) 52%, rgba(18,14,12,.14) 100%),
    linear-gradient(0deg, rgba(119,92,75,.42), rgba(119,92,75,.42));
}
.card:hover { transform:translateY(-6px); }
.card:hover .card__bg { transform:scale(1.07); }
.card__no { font-family:var(--ff-display); font-size:1.1rem; color:var(--gold); letter-spacing:.1em; margin-bottom:auto; }
.card h3 { font-size:1.85rem; margin:0 0 .4em; }
.card p { font-size:.95rem; color:rgba(246,241,234,.82); margin-bottom:1.3em; max-width:26ch; }
.card .txtlink { color:var(--gold-soft); }
.cards-foot { margin-top:clamp(40px,5vw,64px); text-align:center; }
@media(max-width:860px){ .cards{grid-template-columns:1fr;gap:16px} .card{min-height:300px} }

/* ============================ KALAHARI ============================ */
.kala { position:relative; overflow:hidden; background:var(--ink-2); isolation:isolate; }
.kala__bg { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; filter:blur(3px) saturate(.9); transform:scale(1.08); opacity:.6; }
.kala::after {
  content:    "";
  position:   absolute;
  inset:      0;
  z-index:    -1;
  background:
    linear-gradient(90deg, rgba(17,13,11,.93) 0%, rgba(17,13,11,.62) 40%, rgba(17,13,11,.3) 76%, rgba(17,13,11,.14) 100%),
    linear-gradient(0deg, rgba(17,13,11,.55), rgba(17,13,11,0) 40%);
}
.kala .container { position:relative; z-index:1; }
.kala__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px); align-items:center; }
.kala__txt p { margin:1.4em 0 2.2em; max-width:40ch; }
.kala__art { position:relative; border-radius:4px; overflow:hidden; border:1px solid var(--line-dark); box-shadow:0 30px 70px -30px rgba(0,0,0,.7); }
.kala__art img { display:block; width:100%; height:auto; }
.kala__badge { position:absolute; left:24px; bottom:22px; font-family:var(--ff-display); font-style:italic; font-size:1.5rem; color:var(--cream); }
.kala__badge small { display:block; font-family:var(--ff-sans); font-style:normal; font-size:.62rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin-top:.5em; }
@media(max-width:820px){ .kala__grid{grid-template-columns:1fr;gap:34px} .kala__art{order:-1} }

/* ============================ USP ============================ */
.usps { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,40px); }
.usp { border-top:1px solid var(--line-cream); padding-top:26px; }
.usp__ic { color:var(--copper); margin-bottom:18px; }
.usp h3 { font-size:1.4rem; margin-bottom:.5em; }
.usp p { font-size:.92rem; color:var(--taupe); }
@media(max-width:900px){ .usps{grid-template-columns:1fr 1fr;gap:30px} }
@media(max-width:520px){ .usps{grid-template-columns:1fr} }

/* ============================ REVIEWS ============================ */
.reviews-head { text-align:center; margin-bottom:clamp(40px,5vw,64px); }
.quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,30px); }
.quote { border:1px solid var(--line-cream); border-radius:3px; padding:38px 32px; background:var(--white); display:flex; flex-direction:column; }
.quote .mark { font-family:var(--ff-display); font-size:3.4rem; line-height:.5; color:var(--gold); height:.5em; }
.quote p { font-family:var(--ff-display); font-size:1.22rem; line-height:1.4; color:var(--black); margin:.4em 0 1.4em; flex:1; }
.quote .who { font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--taupe); }
.quote .stars { color:var(--gold); letter-spacing:.18em; margin-bottom:1.1em; font-size:.85rem; }
@media(max-width:860px){ .quotes{grid-template-columns:1fr} }

/* ============================ LOCATIES ============================ */
.locs { display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.5vw,30px); }
.loc { border:1px solid var(--line-dark); border-radius:3px; padding:clamp(28px,3.4vw,46px); background:linear-gradient(160deg,rgba(255,255,255,.03),transparent); transition:.5s var(--ease); }
.loc:hover { border-color:var(--gold); background:linear-gradient(160deg,rgba(213,169,64,.07),transparent); }
.loc__tag { font-size:.7rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); margin-bottom:1em; }
.loc h3 { font-size:1.9rem; margin-bottom:.5em; }
.loc__rows { margin:1.4em 0 1.8em; display:flex; flex-direction:column; gap:.55em; font-size:.95rem; color:var(--taupe-soft); }
.loc__rows b { color:var(--cream); font-weight:400; }
.loc__rows .row { display:flex; gap:.8em; }
.loc__rows .row span:first-child { color:var(--gold); min-width:1.4em; }
.loc__links { display:flex; gap:24px; flex-wrap:wrap; }
.loc--soon { display:flex; flex-direction:column; justify-content:center; text-align:left; }
.loc--soon .small { font-size:.95rem; color:var(--taupe-soft); max-width:34ch; }
@media(max-width:760px){ .locs{grid-template-columns:1fr} }
/* locatiekaarten op lichte secties */
.section--cream .loc, .section--sand .loc { border-color:var(--line-cream); background:linear-gradient(160deg,rgba(0,0,0,.025),transparent); }
.section--cream .loc:hover, .section--sand .loc:hover { border-color:var(--gold); background:linear-gradient(160deg,rgba(213,169,64,.09),transparent); }
.section--cream .loc h3, .section--sand .loc h3 { color:var(--black); }
.section--cream .loc__rows, .section--sand .loc__rows { color:var(--taupe); }
.section--cream .loc__rows b, .section--sand .loc__rows b { color:var(--black); }

/* ============================ CTA ============================ */
.cta { background:radial-gradient(120% 120% at 0% 0%, #2d2520, var(--ink) 55%); }
.cta__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,6vw,80px); align-items:center; }
.cta__fig { position:relative; }
.cta__fig img { width:100%; border-radius:4px; filter:saturate(.96); }
.cta__fig::before { content:""; position:absolute; inset:14px; border:1px solid var(--gold); border-radius:4px; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.55; }
.cta__txt h2 { margin:.3em 0 .5em; }
.cta__txt p { max-width:38ch; margin-bottom:2.2em; }
.cta__btns { display:flex; flex-wrap:wrap; gap:14px; }
@media(max-width:820px){ .cta__grid{grid-template-columns:1fr;gap:36px} .cta__fig{order:-1;max-width:420px} }

/* ============================ STAGGER per groep ============================ */
.cards .reveal:nth-child(2){ transition-delay:.12s; }
.cards .reveal:nth-child(3){ transition-delay:.24s; }
.usps .reveal:nth-child(2){ transition-delay:.1s; }
.usps .reveal:nth-child(3){ transition-delay:.2s; }
.usps .reveal:nth-child(4){ transition-delay:.3s; }
.quotes .reveal:nth-child(2){ transition-delay:.12s; }
.quotes .reveal:nth-child(3){ transition-delay:.24s; }