/* ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   NAGELKAMERTJE — wellness studio (LOFF-stijl)
   crème · petrol-groen · perzik · scherpe hoeken
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ */

:root{
  --bg:        #fff5ef;   /* warm crème */
  --bg-2:      #fbe9de;   /* zacht perzik-crème */
  --ink:       #082e2f;   /* diep petrol-groen */
  --ink-2:     #4f6a6a;   /* zachter petrol */
  --line:      #e9d8cc;
  --peach:     #ffa372;   /* accent perzik */
  --peach-2:   #fbd8c6;   /* licht perzik */
  --peach-dp:  #f08646;   /* dieper perzik (hover) */
  --cream:     #fff5ef;
  --pill:      100px;
  --shadow:    0 30px 70px -36px rgba(8,46,47,.4);
  --ease:      cubic-bezier(.2,.7,.2,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  font-family:"Source Sans 3","Source Sans Pro",Helvetica,Arial,sans-serif;
  font-size:19px; font-weight:400; line-height:1.7;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ display:block; max-width:100%; }

h1,h2,h3{ font-family:"Cormorant Garamond",Georgia,serif; font-weight:500; line-height:1.05; letter-spacing:.002em; }

.eyebrow{
  font-family:"Source Sans 3",sans-serif;
  font-size:.74rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--peach-dp); font-weight:600; margin-bottom:1.2rem;
}

/* ── Buttons ── */
.btn{
  --pad:.85rem 1.8rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:var(--pad);
  background:var(--ink); color:var(--cream);
  border:1.5px solid var(--ink); border-radius:var(--pill); cursor:pointer;
  font-family:inherit; font-weight:600; font-size:.98rem; text-decoration:none;
  letter-spacing:.01em; position:relative; overflow:hidden;
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s, border-color .4s, box-shadow .4s var(--ease);
}
.btn:hover{ transform:translateY(-2px); background:transparent; color:var(--ink); }
.btn__arrow{ transition:transform .4s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn--accent{ background:var(--peach); border-color:var(--peach); color:var(--ink); }
.btn--accent:hover{ background:var(--peach-dp); border-color:var(--peach-dp); color:var(--ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ background:var(--ink); color:var(--cream); }
.btn--small{ --pad:.6rem 1.3rem; font-size:.88rem; }
.btn--full{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; color:var(--ink); font-weight:600; font-size:1rem;
  border-bottom:1.5px solid var(--peach); padding-bottom:.25rem; width:max-content;
  transition:gap .35s var(--ease), color .35s, border-color .35s;
}
.link-arrow span{ transition:transform .35s var(--ease); }
.link-arrow:hover{ color:var(--peach-dp); gap:.85rem; }

/* ── Topbar (intro sweep) ── */
.topbar{
  position:fixed; top:0; left:0; height:3px; width:100%; z-index:200;
  background:linear-gradient(90deg,var(--peach),var(--peach-dp),var(--ink));
  transform:scaleX(0); transform-origin:left;
  animation:introbar 1.1s var(--ease-out) forwards;
}
@keyframes introbar{ 0%{transform:scaleX(0);opacity:1} 70%{transform:scaleX(1);opacity:1} 100%{transform:scaleX(1);opacity:0} }

/* ── Nav ── */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.1rem clamp(1.25rem,5vw,4.5rem);
  background:rgba(255,245,239,0); border-bottom:1px solid transparent;
  transition:background .5s var(--ease), border-color .5s, padding .5s, backdrop-filter .5s;
}
.nav--scrolled{
  background:rgba(255,245,239,.82); backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line); padding-block:.85rem;
}
.brand{
  font-family:"Cormorant Garamond",serif; font-size:1.7rem; font-weight:600;
  text-decoration:none; color:var(--ink);
  display:flex; align-items:center; gap:.45rem; letter-spacing:.01em;
}
.brand__mark{ color:var(--peach-dp); font-size:1.5rem; transform:translateY(1px); }
.nav__links{ display:flex; gap:2.3rem; }
.nav__links a{
  text-decoration:none; color:var(--ink-2); font-size:.95rem; font-weight:600; position:relative;
  transition:color .3s; letter-spacing:.01em;
}
.nav__links a::after{
  content:''; position:absolute; left:0; bottom:-5px; width:0; height:1.5px;
  background:var(--peach); transition:width .35s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ width:100%; }

/* ── Hero ── */
.hero{ position:relative; overflow:hidden; padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,5vw,4.5rem) clamp(2rem,5vw,3rem); }
.hero__glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(closest-side at 84% 24%, rgba(255,163,114,.28), transparent 70%),
    radial-gradient(closest-side at 6% 80%, rgba(251,216,198,.5), transparent 72%);
  filter:blur(12px); animation:floaty 16s ease-in-out infinite alternate;
}
@keyframes floaty{ to{ transform:translate3d(0,-22px,0) scale(1.05); } }

.hero__grid{
  position:relative; z-index:1; max-width:1240px; margin-inline:auto;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center;
  min-height:clamp(480px,72vh,720px);
}
.hero__copy{ padding-block:1rem; }
.hero__title{ font-size:clamp(3rem,6.4vw,5.8rem); font-weight:500; margin:.3rem 0 1.6rem; max-width:13ch; }
.hero__title em{ font-style:italic; color:var(--peach-dp); }
.hero__lead{ font-size:clamp(1.1rem,1.5vw,1.3rem); color:var(--ink-2); max-width:46ch; margin-bottom:2.2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-bottom:2.6rem; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:1.6rem; color:var(--ink-2); font-size:.92rem; font-weight:600; }

.hero__visual{ position:relative; }
.hero__img{ position:relative; aspect-ratio:4/5; overflow:hidden; box-shadow:var(--shadow); background:var(--bg-2); }
.hero__img img{
  width:100%; height:100%; object-fit:cover;
  clip-path:inset(100% 0 0 0); transform:scale(1.18);
  transition:clip-path 1.3s var(--ease-out), transform 1.8s var(--ease-out);
}
body.ready .hero__img img{ clip-path:inset(0 0 0 0); transform:scale(1); }
.hero__chip{
  position:absolute; top:1.1rem; left:-1.1rem; z-index:3;
  background:var(--cream); color:var(--ink); font-size:.84rem; font-weight:600;
  padding:.6rem 1.1rem; border-radius:var(--pill); box-shadow:0 14px 30px -16px rgba(8,46,47,.4);
  display:flex; align-items:center; gap:.5rem;
  opacity:0; transform:translateY(10px); transition:opacity .7s .9s var(--ease), transform .7s .9s var(--ease);
}
body.ready .hero__chip{ opacity:1; transform:none; }
.hero__chip-dot{ width:.55rem; height:.55rem; border-radius:50%; background:var(--peach); box-shadow:0 0 0 0 rgba(255,163,114,.6); animation:pulse 2.2s infinite; }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(255,163,114,0); } 100%{ box-shadow:0 0 0 0 rgba(255,163,114,0); } }
.hero__badge{
  position:absolute; bottom:-1.2rem; right:-1rem; z-index:3;
  width:122px; height:122px; border-radius:50%;
  background:var(--ink); color:var(--cream); display:grid; place-content:center; text-align:center;
  box-shadow:var(--shadow);
  opacity:0; transform:scale(.7) rotate(-12deg); transition:opacity .8s 1.05s var(--ease-out), transform .8s 1.05s var(--ease-out);
}
body.ready .hero__badge{ opacity:1; transform:scale(1) rotate(-8deg); }
.hero__badge em{ font-family:"Cormorant Garamond",serif; font-style:italic; color:var(--peach); font-size:1.2rem; display:block; }
.hero__badge strong{ font-size:.66rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; margin-top:.15rem; display:block; }

/* ── Marquee ── */
.marquee{ overflow:hidden; border-block:1px solid var(--line); background:var(--bg-2); padding:.95rem 0; }
.marquee__track{
  display:flex; align-items:center; gap:1.7rem; width:max-content;
  animation:scroll 30s linear infinite;
  font-family:"Cormorant Garamond",serif; font-size:1.5rem; font-weight:500; font-style:italic; color:var(--ink); white-space:nowrap;
}
.marquee__track i{ color:var(--peach-dp); font-size:.7rem; font-style:normal; }
@keyframes scroll{ to{ transform:translateX(-50%); } }

/* ── Stats ── */
.stats{
  max-width:1140px; margin:clamp(2.5rem,6vw,4.5rem) auto; padding-inline:clamp(1.25rem,5vw,4.5rem);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
}
.stat{ text-align:center; position:relative; }
.stat + .stat::before{ content:''; position:absolute; left:-.75rem; top:12%; height:76%; width:1px; background:var(--line); }
.stat b{ font-family:"Cormorant Garamond",serif; font-weight:600; font-size:clamp(2.6rem,4.4vw,3.7rem); display:block; color:var(--ink); }
.stat span{ font-size:.86rem; color:var(--ink-2); letter-spacing:.04em; }

/* ── Sections ── */
.section{ padding:clamp(3.5rem,8vw,7rem) clamp(1.25rem,5vw,4.5rem); max-width:1240px; margin-inline:auto; }
.section__head{ max-width:680px; margin-bottom:3rem; }
.section__head h2{ font-size:clamp(2.4rem,5vw,3.8rem); }

/* ── Studio ── */
.studio{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.studio__img{ position:relative; overflow:hidden; box-shadow:var(--shadow); aspect-ratio:5/4; }
.studio__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease-out); }
.studio__img:hover img{ transform:scale(1.05); }
.studio__img figcaption{
  position:absolute; left:1rem; bottom:1rem; background:var(--cream); color:var(--ink);
  font-size:.8rem; font-weight:600; letter-spacing:.05em; padding:.5rem 1.1rem; border-radius:var(--pill);
}
.studio__text h2{ font-size:clamp(2.2rem,4.4vw,3.4rem); margin-bottom:1.3rem; }
.studio__text > p{ color:var(--ink-2); margin-bottom:1.5rem; }
.ticks{ list-style:none; display:grid; gap:.8rem; margin-bottom:2rem; }
.ticks li{ position:relative; padding-left:2.1rem; font-weight:500; }
.ticks li::before{
  content:'✓'; position:absolute; left:0; top:.1rem; width:1.4rem; height:1.4rem; border-radius:50%;
  background:var(--peach); color:var(--ink); font-size:.72rem; font-weight:700; display:grid; place-items:center;
}

/* ── Services ── */
.services__head{ max-width:680px; margin-bottom:2.8rem; }
.services__head h2{ font-size:clamp(2.4rem,5vw,3.8rem); margin-bottom:.5rem; }
.services__head > p{ color:var(--ink-2); }
.services__body{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:start; }
.services__preview{ position:sticky; top:7rem; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow); background:var(--bg-2); }
.services__preview img{ width:100%; height:100%; object-fit:cover; transition:opacity .5s var(--ease), transform 1.2s var(--ease-out); }
.services__preview.is-swapping img{ opacity:0; }
.services__preview-label{
  position:absolute; bottom:1rem; left:1rem; background:var(--cream); color:var(--ink);
  font-family:"Cormorant Garamond",serif; font-size:1.05rem; font-weight:600; padding:.3rem 1rem; border-radius:var(--pill);
}
.services__list{ list-style:none; }
.svc{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.2rem; align-items:center;
  padding:1.6rem .4rem; border-top:1px solid var(--line); cursor:default;
  transition:padding-left .4s var(--ease), background .4s var(--ease);
}
.svc:last-child{ border-bottom:1px solid var(--line); }
.svc__num{ font-family:"Cormorant Garamond",serif; font-size:1.05rem; font-weight:600; color:var(--peach-dp); }
.svc__main h3{ font-size:1.85rem; font-weight:500; transition:color .35s var(--ease); }
.svc__main p{ color:var(--ink-2); font-size:.98rem; margin-top:.1rem; max-width:44ch;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .45s var(--ease), opacity .45s var(--ease), margin-top .45s var(--ease); }
.svc__meta{ text-align:right; white-space:nowrap; }
.svc__meta .price{ font-family:"Cormorant Garamond",serif; font-size:1.6rem; font-weight:600; display:block; }
.svc__meta .time{ font-size:.8rem; color:var(--ink-2); letter-spacing:.04em; }
.svc.is-active{ padding-left:1.4rem; background:linear-gradient(90deg,rgba(255,163,114,.12),transparent 60%); }
.svc.is-active .svc__main h3{ color:var(--peach-dp); }
.svc.is-active .svc__main p{ max-height:6rem; opacity:1; margin-top:.5rem; }
.services__note{ text-align:center; color:var(--ink-2); font-size:.88rem; margin-top:2rem; }

/* ── Quote ── */
.quote{ background:var(--ink); color:var(--cream); padding:clamp(4.5rem,9vw,7.5rem) clamp(1.25rem,5vw,4.5rem); position:relative; overflow:hidden; }
.quote::before{ content:''; position:absolute; inset:0; background:radial-gradient(closest-side at 50% 0%, rgba(255,163,114,.28), transparent 70%); }
.quote__inner{ position:relative; max-width:920px; margin-inline:auto; text-align:center; }
.quote__mark{ font-family:"Cormorant Garamond",serif; font-size:7rem; color:var(--peach); line-height:.4; display:block; }
.quote__rotator{ position:relative; min-height:10rem; margin-top:1rem; }
.quote__item{ position:absolute; inset:0; opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.quote__item.is-active{ opacity:1; transform:none; position:relative; }
.quote__item p{ font-family:"Cormorant Garamond",serif; font-style:italic; font-weight:500; font-size:clamp(1.6rem,3.4vw,2.7rem); line-height:1.3; color:#fdeee5; }
.quote__item cite{ display:block; margin-top:1.5rem; font-style:normal; font-size:.82rem; letter-spacing:.18em; text-transform:uppercase; color:var(--peach); font-family:"Source Sans 3",sans-serif; font-weight:600; }

/* ── Gallery ── */
.gallery{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:230px; gap:1rem; }
.g{ position:relative; overflow:hidden; box-shadow:0 18px 40px -30px rgba(8,46,47,.5); }
.g--tall{ grid-row:span 2; }
.g img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-out); }
.g::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,rgba(8,46,47,.6),transparent 45%); opacity:0; transition:opacity .5s var(--ease); }
.g figcaption{
  position:absolute; left:1rem; bottom:.9rem; z-index:2; color:var(--cream); font-family:"Cormorant Garamond",serif; font-weight:600; font-size:1.15rem;
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.g:hover img{ transform:scale(1.07); }
.g:hover::after{ opacity:1; }
.g:hover figcaption{ opacity:1; transform:none; }

/* ── Contact ── */
.contact{ max-width:1140px; }
.contact__card{
  display:grid; grid-template-columns:1fr; max-width:640px; margin:0 auto;
  background:var(--cream); border:1px solid var(--line);
  padding:clamp(2rem,5vw,4rem); box-shadow:var(--shadow);
}
.contact__left h2{ font-size:clamp(2.2rem,4.4vw,3.2rem); margin-bottom:1rem; }
.contact__left > p{ color:var(--ink-2); margin-bottom:1.8rem; }
.contact__list{ list-style:none; display:grid; gap:1rem; margin-bottom:2rem; }
.contact__list li{ display:grid; gap:.15rem; padding-bottom:1rem; border-bottom:1px solid var(--line); font-weight:500; }
.contact__list span{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--peach-dp); font-weight:600; }
.contact__actions{ display:flex; gap:.8rem; flex-wrap:wrap; }

/* ── Footer ── */
.footer{ border-top:1px solid var(--line); background:var(--bg-2); padding:clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,5vw,4.5rem) 2rem; }
.footer__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:center; max-width:1240px; margin:0 auto 2rem; }
.footer__brand{ font-family:"Cormorant Garamond",serif; font-size:1.8rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:.4rem; }
.footer__brand .brand__mark{ color:var(--peach-dp); }
.footer__tag{ color:var(--ink-2); }
.footer__bot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; max-width:1240px; margin-inline:auto; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--ink-2); font-size:.84rem; }

/* ── Animations: reveal & split ── */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:var(--d,0s); }
.reveal.is-in{ opacity:1; transform:none; }

.split .w{ display:inline-block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; vertical-align:top; }
.split .w-i{ display:inline-block; transform:translateY(115%) rotate(4deg); transition:transform .95s var(--ease-out); transition-delay:var(--wd,0s); }
.split.is-in .w-i{ transform:none; }

@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; gap:2.5rem; min-height:0; }
  .hero__visual{ max-width:460px; margin-inline:auto; width:100%; }
  .hero__title{ max-width:100%; }
  .studio{ grid-template-columns:1fr; }
  .studio__img{ max-width:520px; }
  .services__body{ grid-template-columns:1fr; }
  .services__preview{ display:none; }
  .svc__main p{ max-height:6rem; opacity:1; margin-top:.5rem; }
  .contact__card{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .nav__links{ display:none; }
  body{ font-size:18px; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .stat:nth-child(3)::before,.stat + .stat::before{ display:none; }
  .gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:180px; }
  .svc{ grid-template-columns:auto 1fr; }
  .svc__meta{ grid-column:2; text-align:left; margin-top:.3rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .reveal,.split .w-i,.hero__img img,.hero__chip,.hero__badge{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
}