/* ─────────────────────────────────────
   Makeup Exquisite — layout.css
   Structural chrome: nav, footer, preloader, curtain, containers
───────────────────────────────────── */
 
body { display:flex; flex-direction:column; min-height:100vh; }
.site-main { flex:1; position:relative; z-index:1; background:var(--c-white); }
 
/* ── Preloader ── */
.preloader {
  position:fixed; inset:0; z-index:9999;
  background:var(--c-pink-light);
  display:flex; align-items:center; justify-content:center;
}
.preloader.skip { display:none; }
.preloader.done { animation:preloaderOut .65s cubic-bezier(.16,1,.3,1) both; pointer-events:none; }
@keyframes preloaderOut { to { transform:translateY(-100%); } }

.preloader-gif {
  width:min(260px,72vw); height:min(260px,72vw);
  border-radius:200px; position:relative; overflow:hidden;
  background:var(--c-pink-light);
}
.pl-slide {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0;
}
.pl-slide:nth-child(1),
.pl-slide:nth-child(2),
.pl-slide:nth-child(3),
.pl-slide:nth-child(4) { opacity:0; }
.preloader.pl-ready .pl-slide:nth-child(1) { animation:plSlide   .5s ease both 0s;    }
.preloader.pl-ready .pl-slide:nth-child(2) { animation:plSlide   .5s ease both .38s;  }
.preloader.pl-ready .pl-slide:nth-child(3) { animation:plSlide   .5s ease both .76s;  }
.preloader.pl-ready .pl-slide:nth-child(4) { animation:plSlideIn .5s ease both 1.14s; }
@keyframes plSlide   { 0%{opacity:0} 25%{opacity:1} 80%{opacity:1} 100%{opacity:0} }
@keyframes plSlideIn { 0%{opacity:0} 25%{opacity:1} 100%{opacity:1} }

.preloader-webclip {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:3.25rem; height:3.25rem; border-radius:50%;
}
 
/* ── Page curtain ── */
.page-curtain {
  position:fixed; inset:0; z-index:9998; background:var(--c-pink-light);
  pointer-events:none; transform:translateY(-100%);
}
.page-arriving .page-curtain { transform:translateY(0); transition:none; }
.curtain-logo {
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);
  width:6rem; height:6rem; border-radius:50%;
}
 
/* ── Nav ── */
.nav {
  position:fixed; inset-block-start:0; inset-inline:0; z-index:500;
  display:flex; align-items:center; justify-content:center;
  padding:1rem 2.5rem;
  transition:padding .3s, background .3s, backdrop-filter .3s;
}
/* scrolled state and static light variant share identical chrome */
.nav.scrolled,
.nav--light {
  padding:.35rem 2.5rem;
  background:rgba(255,233,239,.6);
  backdrop-filter:blur(10px) saturate(180%);
  -webkit-backdrop-filter:blur(10px) saturate(180%);
  border-bottom:1px solid rgba(249,120,163,.15);
}
.nav-logo-link { display:block; overflow:visible; }
.nav-logo-img  { transform:scale(1.3); transform-origin:left center; }
.nav-webclip   { width:3.8rem; height:3.8rem; border-radius:50%; opacity:0; transition:opacity .35s, transform .3s; margin-block:-0.5rem; flex-shrink:0; }
.nav.scrolled .nav-webclip,
.nav--light .nav-webclip { opacity:1; transform:scale(1.3); }
 
/* Pill button */
.nav-menu-btn {
  position:absolute; right:2.5rem;
  display:flex; align-items:center; gap:.55rem;
  background:rgba(249,120,163,.25);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(249,120,163,.4);
  border-radius:100px; padding:.4rem 1rem .4rem .75rem;
  transition:background .25s; z-index:501;
}
.nav-menu-btn:hover { background:rgba(249,120,163,.4); }
 
.menu-btn-lines { position:relative; width:16px; height:8px; }
.menu-btn-lines span {
  position:absolute; left:0; right:0; height:1.5px;
  background:var(--c-white);
  transition:transform .35s cubic-bezier(.16,1,.3,1), top .35s cubic-bezier(.16,1,.3,1), bottom .35s cubic-bezier(.16,1,.3,1);
  transform-origin:center;
}
.menu-btn-lines span:first-child { top:0; }
.menu-btn-lines span:last-child  { bottom:0; }
.nav-menu-btn.menu-open .menu-btn-lines span:first-child { top:3px;    transform:rotate(45deg);  }
.nav-menu-btn.menu-open .menu-btn-lines span:last-child  { bottom:3px; transform:rotate(-45deg); }
.menu-btn-text { font-size:.65rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--c-white); white-space:nowrap; }
 
/* ── Menu overlay ── */
.menu-overlay {
  position:fixed; inset:0; z-index:400;
  display:flex; flex-direction:column;
  background:rgba(255,235,241,.65);
  backdrop-filter:blur(12px) saturate(180%);
  -webkit-backdrop-filter:blur(12px) saturate(180%);
  transform:translateY(-100%);
  transition:transform .82s cubic-bezier(.4,0,.2,1);
  pointer-events:none; overflow:hidden;
}
.menu-overlay.open { transform:translateY(0); pointer-events:all; }
.menu-split { flex:1; display:grid; grid-template-columns:1fr 1fr; min-height:0; }
.menu-left  { display:flex; flex-direction:column; justify-content:center; padding:4rem 4rem 3rem 3.5rem; overflow:hidden; }
.menu-nav   { display:flex; flex-direction:column; }
 
.menu-item {
  display:flex; align-items:baseline; gap:1rem; padding:.875rem 0;
  border-bottom:1px solid rgba(0,0,0,.07); text-decoration:none; color:var(--c-black);
  position:relative; transform:translateX(-3rem); opacity:0;
  transition:transform .55s ease, opacity .55s ease, color .2s;
}
.menu-item:first-child { border-top:1px solid rgba(0,0,0,.07); }
.menu-overlay.open .menu-item { transform:none; opacity:1; }
.menu-overlay.open .menu-item:nth-child(1) { transition-delay:.62s; }
.menu-overlay.open .menu-item:nth-child(2) { transition-delay:.67s; }
.menu-overlay.open .menu-item:nth-child(3) { transition-delay:.72s; }
.menu-overlay.open .menu-item:nth-child(4) { transition-delay:.77s; }
.menu-overlay.open .menu-item:nth-child(5) { transition-delay:.82s; }
.menu-overlay.open .menu-item:nth-child(6) { transition-delay:.87s; }
.menu-overlay.open .menu-item:nth-child(7) { transition-delay:.92s; }
.menu-item::after {
  content:''; position:absolute; bottom:-1px; left:0; right:0;
  height:1.5px; background:var(--c-pink);
  transform:scaleX(0); transform-origin:left; transition:transform .35s;
}
.menu-item:hover::after,
.menu-item.active::after { transform:scaleX(1); }
.menu-item:hover,
.menu-item.active { color:var(--c-pink); }
.menu-item:hover .menu-item-name,
.menu-item.active .menu-item-name { font-style:italic; }
.menu-item-num  { font-size:.7rem; font-weight:500; letter-spacing:.08em; color:var(--c-pink); min-width:1.75rem; }
.menu-item-name { font-family:var(--f-head); font-weight:300; font-size:clamp(1.75rem,3.8vw,3.25rem); letter-spacing:-.03em; line-height:1; }
 
/* Right panel — image slides */
.menu-right { position:relative; overflow:hidden; background:#c07888; flex-shrink:0; }
.menu-slide { position:absolute; inset:0; opacity:0; transition:opacity 1s; background-size:cover; background-position:center top; }
.menu-slide.active { opacity:1; }
.menu-slide-overlay { position:absolute; inset:0; background:rgba(0,0,0,.22); }
.menu-contact-cta {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; align-items:center; justify-content:center;
  width:17rem; height:4.5rem;
  background:rgba(249,120,163,.18); backdrop-filter:blur(8px);
  border-radius:100px; transition:background .3s;
}
.menu-contact-cta:hover { background:rgba(249,120,163,.32); }
.menu-contact-cta-text { font-family:var(--f-head); font-style:italic; font-weight:300; font-size:clamp(1.4rem,2.5vw,2rem); letter-spacing:-.02em; color:white; }
.menu-slide-dots  { position:absolute; bottom:1.75rem; right:1.75rem; display:flex; gap:.5rem; }
.menu-slide-dot   { width:1.25rem; height:1px; background:rgba(255,255,255,.4); border:none; transition:background .3s, width .3s; }
.menu-slide-dot.active { background:white; width:2.25rem; }
 
/* Image strip — desktop default off; tablet gets it via 900px block */
.menu-mobile-slider { display:none; }
 
/* Bottom bar */
.menu-bar {
  background:rgba(255,255,255,.55); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; gap:2rem; flex-wrap:wrap;
  padding:.8rem 2rem; border-top:1px solid rgba(0,0,0,.07);
  transform:translateY(100%); transition:transform .5s .18s;
}
.menu-overlay.open .menu-bar { transform:none; }
.menu-bar-text      { font-size:.72rem; color:var(--c-grey-mid); }
.menu-bar-text a    { color:var(--c-grey-mid); transition:color .2s; }
.menu-bar-text a:hover { color:var(--c-pink); }
.menu-bar-socials   { display:flex; gap:1.25rem; }
.menu-bar-social    { font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--c-grey-mid); text-decoration:none; transition:color .2s; }
.menu-bar-social:hover { color:var(--c-pink); }
 
/* ── Footer ── */
.footer {
  position:fixed; bottom:0; left:0; right:0; z-index:0;
  min-height:52vh; background:var(--c-pink-light);
  padding:3rem 2.5rem 2rem;
  display:flex; flex-direction:column; overflow:visible;
}
.footer-wordmark-wrap {
  position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:100vw; pointer-events:none; overflow:hidden;
}
.footer-wordmark-wrap svg { width:100%; display:block; }
.footer-content  { position:relative; z-index:1; display:flex; flex-direction:column; gap:1.75rem; flex:1; }
.footer-main     { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; flex-wrap:wrap; flex:1; }
.footer-col-label { font-size:.65rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:rgba(0,0,0,.3); margin-bottom:.75rem; }
.footer-links    { display:flex; flex-direction:column; gap:.02rem; }
.footer-link     { font-size:.875rem; color:rgba(0,0,0,.5); text-decoration:none; transition:color .2s; }
.footer-link:hover,
.footer-link.active { color:var(--c-pink); }
.footer-contact-val { font-size:.875rem; color:rgba(0,0,0,.5); text-decoration:none; display:block; margin-bottom:.45rem; transition:color .2s; }
a.footer-contact-val:hover { color:var(--c-pink); }
.footer-socials  { display:flex; flex-direction:column; gap:.4rem; }
.footer-social   { font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:rgba(0,0,0,.4); text-decoration:none; transition:color .2s; }
.footer-social:hover { color:var(--c-pink); }
.footer-bottom   { border-top:1px solid rgba(0,0,0,.1); padding-top:1rem; display:flex; justify-content:space-between; }
.footer-legal    { font-size:.72rem; color:rgba(0,0,0,.28); }
.footer-legal a  { color:rgba(0,0,0,.28); transition:color .2s; }
.footer-legal a:hover { color:var(--c-pink); }
.footer-spacer   { height:52vh; pointer-events:none; display:block; }
 
/* ── Global layout helpers ── */
.container { width:92%; max-width:1400px; margin:0 auto; }
.eyebrow   { display:block; font-size:.65rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--c-pink); margin-bottom:.75rem; }
h1 { font-family:var(--f-head); font-weight:300; font-size:clamp(2rem,4vw,3.5rem); letter-spacing:-.04em; line-height:1.1; }
h2 { font-family:var(--f-head); font-weight:300; font-size:clamp(1.75rem,3.5vw,3rem); letter-spacing:-.03em; line-height:1.15; }
h3 { font-family:var(--f-head); font-weight:300; font-size:clamp(1.25rem,2.5vw,2rem); letter-spacing:-.02em; }
p  { font-size:.975rem; line-height:1.75; color:var(--c-grey-dark); }
 
/* pad-xl also provides spacing — base.css owns shape/shadow/z-index */
.pad-xl { padding-block:7.5em; }
.pad-lg { padding-block:5.5em; }
.pad-md { padding-block:4em; }
 
/* ── Responsive ── */
@media(max-width:900px) {
  .menu-split { grid-template-columns:1fr; display:flex; flex-direction:column; }
  .menu-right { display:none; }
  .menu-left  { flex:1; display:flex; flex-direction:column; padding:4rem 2rem 0; overflow:hidden; }
  .menu-nav   { flex:1; display:flex; flex-direction:column; justify-content:center; }
 
  /* Tablet — image strip at base of menu */
  .menu-mobile-slider {
    display:block;
    width:calc(100% + 4rem);
    margin-left:-2rem;
    height:28vw; max-height:130px; min-height:80px;
    position:relative; flex-shrink:0; overflow:hidden;
    opacity:0; transition:opacity .4s .9s;
  }
  .menu-overlay.open .menu-mobile-slider { opacity:1; }
  .menu-mobile-slide { position:absolute; inset:0; background-size:cover; background-position:center 20%; opacity:0; transition:opacity .8s; }
  .menu-mobile-slide.active { opacity:1; }
 
  .menu-bar { padding:.75rem 1.5rem; gap:1rem; }
  .menu-bar-location { display:none; }
  .footer { min-height:65vh; padding-bottom:8rem; }
.footer-spacer { height:80vh; }
}
 
@media(max-width:768px) {
  .nav,
  .nav--light    { padding-inline:1.25rem; }
  .nav-menu-btn  { right:1.25rem; }
  .footer-main   { flex-direction:column; gap:1.5rem; }
  .footer-bottom { flex-direction:column; gap:.5rem; text-align:center; }
  .pad-xl { padding-block:4.5em; }
  .pad-lg { padding-block:3.5em; }
}
 
/* Phone — hide the tablet image strip, keep menu clean */
@media(max-width:600px) {
  .menu-mobile-slider { display:none; }
}