/* ===========================================================
   Centre Dream PH — editorial spa (inspired by botabota.ca)
   =========================================================== */
:root{
  --bg:#FAF6F0; --bg-pure:#FFFFFF; --ink:#1F1A16; --ink-soft:#6B625A;
  --line:#E4DACE; --dark:#241F1B; --on-dark:#F3ECE2;
  --gold:#A9854A; --gold-soft:#C7A973;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --container:1280px;
  --pad:clamp(1.25rem,5vw,5rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); background:var(--bg); color:var(--ink);
  font-size:1.0625rem; line-height:1.7; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.section{padding:clamp(5rem,12vh,9rem) var(--pad)}

/* ---------- shared type ---------- */
.eyebrow{
  font-size:.78rem; font-weight:500; text-transform:uppercase;
  letter-spacing:.22em; color:var(--ink-soft); margin-bottom:1.4rem;
}
.eyebrow--light{color:rgba(255,255,255,.82)}
.section-title{
  font-family:var(--serif); font-weight:500; line-height:1.05;
  font-size:clamp(2.25rem,5vw,4rem); letter-spacing:-.01em; color:var(--ink);
}

/* ---------- buttons / CTAs ---------- */
.cta{
  display:inline-block; font-size:.8rem; text-transform:uppercase;
  letter-spacing:.18em; font-weight:500; padding-bottom:.55rem;
  border-bottom:1px solid currentColor; transition:opacity .3s, letter-spacing .4s;
}
.cta:hover{letter-spacing:.26em}
.cta--light{color:#fff}
.btn{
  display:inline-block; font-size:.8rem; text-transform:uppercase; letter-spacing:.18em;
  font-weight:500; padding:1rem 2rem; border:1px solid var(--ink);
  transition:background .35s,color .35s,border-color .35s;
}
.btn--pill{border-radius:2px; background:var(--ink); color:var(--bg)}
.btn--pill:hover{background:var(--gold); border-color:var(--gold); color:#fff}
.btn--ghost{border-color:rgba(255,255,255,.5); color:#fff}
.btn--ghost:hover{background:#fff; color:var(--dark); border-color:#fff}

/* thin gold accent line across the very top of the page */
body::before{
  content:""; position:fixed; top:0; left:0; right:0; height:3px; z-index:300;
  background:linear-gradient(90deg,var(--gold),var(--gold-soft),var(--gold));
}

/* ---------- NAV ---------- */
.nav{
  position:fixed; inset:3px 0 auto 0; z-index:100;
  transition:background .4s, box-shadow .4s, padding .4s;
  padding:.4rem 0;
}
.nav__inner{
  max-width:var(--container); margin:0 auto; padding:.9rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav__logo{height:46px; width:auto; transition:filter .4s; filter:brightness(0) invert(1)}
.nav.is-solid .nav__logo{filter:none}
.nav__links{display:flex; gap:2.2rem}
.nav__links a{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.16em; color:#fff;
  position:relative; padding:.2rem 0; transition:color .35s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-2px; width:0; height:1px;
  background:currentColor; transition:width .35s;
}
.nav__links a:hover::after{width:100%}
.nav__actions{display:flex; align-items:center; gap:1.2rem}
.nav .btn--pill{padding:.7rem 1.5rem; background:transparent; color:#fff; border-color:rgba(255,255,255,.6)}
.nav .btn--pill:hover{background:#fff;color:var(--ink);border-color:#fff}

/* scrolled state: solid ivory bar with dark text */
.nav.is-solid{background:var(--bg); box-shadow:0 1px 0 var(--line)}
.nav.is-solid .nav__links a{color:var(--ink)}
.nav.is-solid .btn--pill{color:var(--ink); border-color:var(--ink)}
.nav.is-solid .btn--pill:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.nav.is-solid .nav__burger span{background:var(--ink)}

/* burger */
.nav__burger{display:none; flex-direction:column; gap:6px; background:none; border:0; cursor:pointer; padding:6px}
.nav__burger span{display:block; width:26px; height:1.5px; background:#fff; transition:.35s}

/* ---------- HERO ---------- */
.hero{position:relative; height:100svh; min-height:600px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff}
.hero__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.hero__scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,16,12,.45),rgba(20,16,12,.2) 40%,rgba(20,16,12,.55))}
.hero__content{position:relative; z-index:2; padding:0 1.25rem}
.hero__title{
  font-family:var(--serif); font-weight:500; line-height:1.0; letter-spacing:-.01em;
  font-size:clamp(3.25rem,9vw,8rem); margin:.4rem 0 2rem;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}

/* ---------- INTRO ---------- */
.intro{background:var(--bg); text-align:center}
.intro__inner{max-width:780px; margin:0 auto}
.intro__lead{font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.15rem); line-height:1.4; color:var(--ink); font-weight:400}

/* ---------- IMAGE BANDS ---------- */
.band{position:relative; height:70vh; min-height:460px; display:flex; align-items:center; color:#fff; overflow:hidden}
.band--tall{height:84vh}
.band__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.band__scrim{position:absolute; inset:0; background:linear-gradient(90deg,rgba(20,16,12,.6),rgba(20,16,12,.15))}
.band__content{position:relative; z-index:2; max-width:var(--container); width:100%; margin:0 auto; padding:0 var(--pad)}
.band__title{font-family:var(--serif); font-weight:500; line-height:1.02; font-size:clamp(2.5rem,6vw,5rem); margin:.3rem 0 1.8rem; letter-spacing:-.01em}

/* ---------- SERVICES ---------- */
.services{max-width:var(--container); margin:0 auto}
.services__head{text-align:center; margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem)}
.card__media{overflow:hidden; margin-bottom:1.6rem; aspect-ratio:4/5}
.card__media img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.card:hover .card__media img{transform:scale(1.05)}
.card__title{font-family:var(--serif); font-weight:500; font-size:1.9rem; margin-bottom:.6rem}
.card__text{color:var(--ink-soft); font-size:.98rem; margin-bottom:1rem}
.card__price{font-size:.8rem; text-transform:uppercase; letter-spacing:.16em; color:var(--gold)}

/* ---------- EXPERIENCE ---------- */
.exp{max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:center}
.exp__media{aspect-ratio:4/3; overflow:hidden}
.exp__media img{width:100%;height:100%;object-fit:cover}
.exp__list{list-style:none; margin-top:2.4rem; display:flex; flex-direction:column; gap:1.8rem}
.exp__list li{display:flex; gap:1.4rem; align-items:flex-start}
.exp__num{font-family:var(--serif); font-size:1.5rem; color:var(--gold); line-height:1; min-width:2rem}
.exp__list h4{font-family:var(--serif); font-weight:600; font-size:1.35rem; margin-bottom:.2rem}
.exp__list p{color:var(--ink-soft); font-size:.98rem}

/* ---------- TARIFS ---------- */
.tarifs{max-width:880px; margin:0 auto; text-align:center; background:var(--bg)}
.tarifs__head{margin-bottom:3rem}
.tarifs__list{text-align:left; display:flex; flex-direction:column; gap:1.3rem}
.tarif{display:flex; align-items:baseline; gap:1rem}
.tarif__name{font-family:var(--serif); font-size:1.4rem}
.tarif__dot{flex:1; border-bottom:1px dotted var(--line); transform:translateY(-.3rem)}
.tarif__price{font-size:.95rem; letter-spacing:.1em; color:var(--gold); white-space:nowrap}
.tarifs__note{margin-top:2.4rem; font-size:.85rem; color:var(--ink-soft); letter-spacing:.04em}

/* ---------- LA CARTE (menu posters) ---------- */
.carte{max-width:var(--container); margin:0 auto; background:var(--bg); text-align:center}
.carte__head{margin-bottom:clamp(2.5rem,6vw,4.5rem)}
.carte__sub{margin-top:1rem; font-size:.85rem; color:var(--ink-soft); letter-spacing:.04em}
/* horizontal scroll-snap carousel (21st.dev style scroll area) */
.carte__carousel{position:relative}
.carte__track{
  display:flex; gap:clamp(1.25rem,2.4vw,2.2rem);
  overflow-x:scroll; scroll-snap-type:x proximity; scroll-behavior:smooth;
  padding:1rem .25rem 1.5rem; margin:0 -.25rem;
  -ms-overflow-style:none; scrollbar-width:none; cursor:grab;
}
.carte__track::-webkit-scrollbar{display:none}
.carte__track.is-dragging{cursor:grabbing; scroll-behavior:auto}
.carte__track.is-dragging img{pointer-events:none}
.carte__card{
  flex:0 0 clamp(240px,26vw,330px); scroll-snap-align:center; margin:0; cursor:zoom-in;
}
.carte__card img{
  width:100%; height:auto; display:block; border-radius:3px;
  border:1px solid var(--line);
  box-shadow:0 18px 50px -22px rgba(31,26,22,.45);
  transition:transform .6s cubic-bezier(.22,.61,.36,1), box-shadow .6s;
}
.carte__card:hover img{transform:translateY(-6px); box-shadow:0 30px 70px -26px rgba(31,26,22,.6)}
.carte__card figcaption{
  margin-top:1rem; text-align:center; font-size:.74rem; text-transform:uppercase;
  letter-spacing:.18em; color:var(--ink-soft);
}
/* arrows */
.carte__arrow{
  position:absolute; top:calc(50% - 1.2rem); transform:translateY(-50%); z-index:5;
  width:54px; height:54px; border-radius:50%; cursor:pointer;
  background:var(--bg); border:1px solid var(--line); color:var(--ink);
  font-family:var(--serif); font-size:1.8rem; line-height:1; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px -12px rgba(31,26,22,.4); transition:background .3s,color .3s,border-color .3s,opacity .3s;
}
.carte__arrow:hover{background:var(--gold); color:#fff; border-color:var(--gold)}
.carte__arrow--prev{left:-12px}
.carte__arrow--next{right:-12px}
.carte__arrow[disabled]{opacity:.25; pointer-events:none}
.carte__hint{margin-top:.4rem; font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft)}
@media (hover:none){ .carte__arrow{display:none} }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(20,16,12,.92); padding:5vh 5vw; opacity:0; visibility:hidden;
  transition:opacity .4s ease, visibility .4s; backdrop-filter:blur(4px);
}
.lightbox.open{opacity:1; visibility:visible}
.lightbox__img{max-width:min(680px,92vw); max-height:90vh; width:auto; height:auto; border-radius:4px; box-shadow:0 40px 120px rgba(0,0,0,.6)}
.lightbox__close{
  position:absolute; top:max(1.2rem,3vh); right:max(1.2rem,3vw); background:none; border:0; cursor:pointer;
  color:#fff; font-size:2.6rem; line-height:1; opacity:.8; transition:opacity .3s, transform .3s;
}
.lightbox__close:hover{opacity:1; transform:rotate(90deg)}

/* ---------- CONTACT ---------- */
.contact{background:var(--dark); color:var(--on-dark)}
.contact__inner{max-width:var(--container); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,6rem); align-items:start}
.contact__title{font-family:var(--serif); font-weight:500; font-size:clamp(2.5rem,5vw,4rem); line-height:1.05; margin-bottom:1.4rem}
.contact__lead{color:rgba(243,236,226,.75); max-width:30rem; margin-bottom:2.2rem}
.contact__grid{display:grid; grid-template-columns:1fr 1fr; gap:2.4rem 2rem}
.contact__item p{margin-top:.5rem; color:var(--on-dark); font-size:1.05rem; line-height:1.5}
.contact__item .eyebrow{color:var(--gold-soft); margin-bottom:0}

/* ---------- FOOTER ---------- */
.footer{background:var(--dark); color:var(--on-dark); border-top:1px solid rgba(255,255,255,.08); padding:3.5rem var(--pad)}
.footer__inner{max-width:var(--container); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap}
.footer__logo{height:54px; width:auto; opacity:.92}
.footer__nav{display:flex; gap:1.8rem}
.footer__nav a{font-size:.78rem; text-transform:uppercase; letter-spacing:.16em; color:rgba(243,236,226,.7); transition:color .3s}
.footer__nav a:hover{color:var(--gold-soft)}
.footer__copy{font-size:.78rem; color:rgba(243,236,226,.5); letter-spacing:.04em; width:100%; text-align:center; padding-top:1.5rem; margin-top:.5rem; border-top:1px solid rgba(255,255,255,.07)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0; transform:translateY(38px); transition:opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .cards{grid-template-columns:1fr; max-width:460px; margin:0 auto}
  .exp{grid-template-columns:1fr}
  .exp__media{order:-1}
  .contact__inner{grid-template-columns:1fr}
}
@media (max-width:520px){ .carte__card{flex-basis:78vw} }
@media (max-width:760px){
  .nav__links{
    position:fixed; inset:0; background:var(--bg); flex-direction:column;
    align-items:center; justify-content:center; gap:2rem;
    transform:translateX(100%); transition:transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .nav__links.open{transform:none}
  .nav__links a{color:var(--ink); font-size:1.4rem; letter-spacing:.12em}
  .nav__burger{display:flex; z-index:120}
  .nav__burger.open span{background:var(--ink)}
  .nav__burger.open span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
  .nav__burger.open span:nth-child(2){transform:translateY(-3.75px) rotate(-45deg)}
  .nav .btn--pill{display:none}
  .contact__grid{grid-template-columns:1fr}
  .band__scrim{background:linear-gradient(180deg,rgba(20,16,12,.35),rgba(20,16,12,.6))}
}