/* Parallax-sectie (JS zet de foto als laag en verschuift hem bij scrollen) */
.lv-parallax { position: relative; overflow: hidden; }
.lv-parallax-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; z-index: 0; pointer-events: none; will-change: transform; }

/* L'Hair Atelier — mobiele laag bovenop de Claude Design-handoff (inline styles). Alleen actief onder 820px. */
.lv-burger { display: none; }
.lv-drawer { display: none; }

@media (max-width: 820px) {
  html, body { overflow-x: hidden; }
  img, video { max-width: 100%; }

  /* header: compacter logo, eigen nav verbergen, hamburger tonen */
  header > div:first-child { padding: 10px 18px !important; gap: 12px !important; flex-wrap: nowrap !important; }
  header > div:first-child img { height: 58px !important; }
  header > div:first-child nav { display: none !important; }
  .lv-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 46px; height: 46px; margin-left: auto;
    background: transparent; border: 1px solid rgba(246,242,233,.45); border-radius: 0; cursor: pointer; padding: 0 12px;
  }
  .lv-burger span { display: block; height: 1.5px; background: #F6F2E9; transition: transform .2s ease, opacity .2s ease; }
  .lv-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .lv-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .lv-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
  /* mega-menu-paneel van de desktop uit: op mobiel nooit tonen (de lade neemt het over) */
  header > div:nth-child(2) { display: none !important; }

  /* mobiele lade */
  .lv-drawer {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; overflow-y: auto; background: #0D2B1D; color: #F6F2E9;
    font-family: Jost, system-ui, sans-serif; padding: 10px 22px 40px; flex-direction: column;
  }
  .lv-drawer.open { display: flex; }
  .lv-drawer a { display: block; padding: 16px 0; border-bottom: 1px solid rgba(246,242,233,.14); color: #F6F2E9; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; text-decoration: none; }
  .lv-drawer a.on { color: #C79B6D; }
  .lv-drawer .lv-sub { padding: 6px 0 4px 16px; border-bottom: 1px solid rgba(246,242,233,.14); }
  .lv-drawer .lv-sub a { border: 0; padding: 9px 0; font-size: 14px; letter-spacing: .02em; text-transform: none; display: flex; justify-content: space-between; gap: 14px; color: rgba(246,242,233,.85); }
  .lv-drawer .lv-sub a span:last-child { color: #A9C4A4; }
  .lv-drawer .lv-kicker { margin: 22px 0 6px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #8FAE94; }
  .lv-drawer .lv-cta { margin-top: 24px; padding: 16px; text-align: center; background: #C79B6D; color: #0D2B1D; border: 0; font-weight: 500; }
  body.lv-drawer-open { overflow: hidden; }

  /* hero: foto boven, tekst eronder in plaats van over de foto */
  .lv-hero { display: grid !important; padding: 0 !important; }
  .lv-hero > img { height: 46vh !important; min-height: 260px; object-position: 62% center !important; }
  .lv-hero > img + div { display: none !important; }
  .lv-hero > img + div + div { position: static !important; display: block !important; padding: 26px 18px 34px; pointer-events: auto !important; }
  .lv-hero > img + div + div > div { width: auto !important; padding: 0 !important; }
  .lv-hero h1 { font-size: 40px !important; }

  /* secties: minder zijruimte, vaste achtergrond uit (iOS) */
  section, footer > div, header > div { padding-left: 18px !important; padding-right: 18px !important; }
  section[style*="background-attachment"] { background-attachment: scroll !important; }
  footer > div { padding-top: 40px !important; padding-bottom: 40px !important; }
  footer img { height: 72px !important; }

  /* formulieren: velden en knoppen op volle breedte */
  form input, form select, form textarea { width: 100% !important; box-sizing: border-box; font-size: 16px !important; }
  form button, form a[style*="background:#0D2B1D"] { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  .lv-hero h1 { font-size: 34px !important; }
  header > div:first-child img { height: 50px !important; }
}