/* ===== Zine Laser & Cosmetic — shared styles ===== */
:root{
  --canvas:#F7F2EA; --sand:#ECE3D5; --sand-deep:#E1D4C0;
  --espresso:#2C241D; --espresso-soft:#3A2F26; --taupe:#73624E;
  --gold:#B8975A; --gold-lite:#D9BE86;
  --shadow-soft:0 1px 2px rgba(44,36,29,.04), 0 12px 40px -12px rgba(44,36,29,.14);
  --shadow-float:0 2px 6px rgba(44,36,29,.06), 0 30px 70px -28px rgba(44,36,29,.22);
  /* Motion system — one hand, three curves, three durations */
  --ease:cubic-bezier(.22,.61,.30,1);        /* primary settle — gentle, no whip */
  --ease-soft:cubic-bezier(.40,0,.20,1);     /* symmetric two-way state toggles */
  --ease-hero:cubic-bezier(.16,.84,.24,1);   /* reserved for the hero moment */
  --dur-state:.55s; --dur-reveal:1.1s; --dur-hero:1.4s;
}
*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:auto; }            /* Lenis owns scrolling */
body{ background:var(--canvas); color:var(--espresso); font-family:"Jost",sans-serif;
  font-weight:300; line-height:1.7; overflow-x:hidden; }
.font-display{ font-family:"Cormorant Garamond",serif; }
::selection{ background:var(--gold); color:#fff; }

/* Warm radial ambience + film grain */
.ambient{ position:relative; }
.ambient::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(60% 50% at 18% 12%, rgba(217,190,134,.16), transparent 60%),
    radial-gradient(50% 45% at 85% 25%, rgba(184,151,90,.10), transparent 60%); }
.grain::after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply; }

/* Eyebrow / labels */
.eyebrow{ font-family:"Jost"; font-weight:400; font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); }

/* Display heading helpers */
.h-display{ font-family:"Cormorant Garamond",serif; font-weight:300; line-height:1.06;
  letter-spacing:-.02em; }

/* Gold hairline divider */
.hairline{ height:1px; background:linear-gradient(90deg,transparent,var(--sand-deep),transparent); border:0; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.6em; font-family:"Jost"; font-weight:400;
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; padding:1.05rem 2rem;
  border-radius:999px; cursor:pointer; transition:transform var(--dur-state) var(--ease), background-color var(--dur-state) var(--ease-soft), color var(--dur-state) var(--ease-soft), border-color var(--dur-state) var(--ease-soft); will-change:transform; }
.btn:active{ transform:scale(.97); }
.btn-gold{ background:var(--espresso); color:var(--canvas); border:1px solid var(--espresso); }
.btn-gold:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn-gold:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.btn-ghost{ background:transparent; color:var(--espresso); border:1px solid var(--sand-deep); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn-ghost:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.on-dark .btn-ghost{ color:var(--canvas); border-color:rgba(247,242,234,.32); }
.on-dark .btn-ghost:hover{ color:var(--gold-lite); border-color:var(--gold-lite); }
/* On dark backgrounds the filled primary inverts to cream */
.on-dark .btn-gold{ background:var(--canvas); color:var(--espresso); border-color:var(--canvas); }
.on-dark .btn-gold:hover{ background:var(--gold-lite); color:var(--espresso); border-color:var(--gold-lite); }
/* Nav CTA reads on any background */
.btn-nav{ background:var(--gold); color:#fff; border:1px solid var(--gold); }
.btn-nav:hover{ background:var(--espresso); border-color:var(--espresso); color:var(--canvas); }
.btn-nav:focus-visible{ outline:2px solid var(--espresso); outline-offset:3px; }

/* Animated underline link */
.link-underline{ position:relative; display:inline-block; }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .6s var(--ease-soft); }
.link-underline:hover::after,.link-underline:focus-visible::after{ transform:scaleX(1); transform-origin:left; }

/* Organic image frame */
.organic{ border-radius:48px 48px 120px 48px; overflow:hidden; box-shadow:var(--shadow-float); }
.organic-alt{ border-radius:120px 48px 48px 48px; overflow:hidden; box-shadow:var(--shadow-float); }
.organic-soft{ border-radius:140px 140px 24px 24px; overflow:hidden; box-shadow:var(--shadow-float); }
.img-cover{ width:100%; height:100%; object-fit:cover; display:block; }
.img-zoom{ transition:transform 1.4s var(--ease); will-change:transform; }
.group:hover .img-zoom{ transform:scale(1.05); }
/* Photo color treatment for cohesion */
.img-treat{ position:relative; }
.img-treat::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(44,36,29,.35), transparent 55%);
  mix-blend-mode:multiply; pointer-events:none; }

/* Hero readability — tame bright photo so light copy stays legible (no font-size change) */
.hero-tint{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--espresso); mix-blend-mode:multiply; opacity:.28; }
.hero-scrim{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(26,20,15,.40) 0%, rgba(26,20,15,.16) 22%, rgba(26,20,15,.46) 52%, rgba(26,20,15,.72) 80%, rgba(26,20,15,.90) 100%),
    linear-gradient(100deg, rgba(26,20,15,.42) 0%, transparent 60%); }
.hero h1{ text-shadow:0 2px 26px rgba(18,13,9,.48), 0 1px 3px rgba(18,13,9,.30); }
.hero p{ text-shadow:0 1px 16px rgba(18,13,9,.5); }
/* Mobile: copy fills more of the frame -> a touch more scrim */
@media (max-width:767px){
  .hero-tint{ opacity:.34; }
  .hero-scrim{ background:
    linear-gradient(180deg, rgba(26,20,15,.46) 0%, rgba(26,20,15,.24) 20%, rgba(26,20,15,.54) 48%, rgba(26,20,15,.78) 78%, rgba(26,20,15,.93) 100%),
    linear-gradient(100deg, rgba(26,20,15,.40) 0%, transparent 64%); }
}

/* Nav */
.nav{ transition:background-color .8s var(--ease), border-color .8s var(--ease), padding .8s var(--ease); }
.nav--solid{ background:rgba(247,242,234,.82); backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--sand-deep); }
.nav__link{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--espresso);
  transition:color .5s var(--ease-soft); }
.nav__link:hover{ color:var(--gold); }
/* Nav over hero (light text) before scroll */
.nav--over .nav__link, .nav--over .nav__brand{ color:var(--canvas); }
.nav--over.nav--solid .nav__link, .nav--over.nav--solid .nav__brand{ color:var(--espresso); }
/* Logo image swap — gold on dark backgrounds, dark on light */
.nav__brand .logo{ width:auto; }
.nav__brand .logo-gold{ display:none; }
.nav__brand .logo-dark{ display:block; }
.nav--over .nav__brand .logo-gold{ display:block; }
.nav--over .nav__brand .logo-dark{ display:none; }
.nav--over.nav--solid .nav__brand .logo-gold{ display:none; }
.nav--over.nav--solid .nav__brand .logo-dark{ display:block; }
body.menu-open .nav__brand .logo-gold{ display:none; }
body.menu-open .nav__brand .logo-dark{ display:block; }

/* Burger */
.burger{ width:30px; height:16px; position:relative; color:var(--espresso); z-index:2; }
.burger::before{ content:""; position:absolute; inset:-14px -12px; }
.nav--over .burger{ color:var(--canvas); }
.nav--over.nav--solid .burger{ color:var(--espresso); }
.burger span{ position:absolute; left:0; height:1.5px; width:100%; background:currentColor;
  transition:transform .5s var(--ease-soft), opacity .35s var(--ease-soft), top .5s var(--ease-soft); }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:7px; } .burger span:nth-child(3){ top:14px; }
.burger.is-open span:nth-child(1){ top:7px; transform:rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ top:7px; transform:rotate(-45deg); }

/* Mobile menu overlay */
.menu{ position:fixed; inset:0; z-index:40; background:var(--canvas);
  clip-path:circle(0% at calc(100% - 40px) 40px); transition:clip-path .95s var(--ease);
  pointer-events:none; }
.menu:not(.open){ transition:clip-path .6s var(--ease); }
.menu::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(78% 55% at 100% 0%, rgba(217,190,134,.20), transparent 62%),
            radial-gradient(62% 45% at 0% 100%, rgba(184,151,90,.10), transparent 60%); }
.menu.open{ clip-path:circle(150% at calc(100% - 40px) 40px); pointer-events:auto; }
.menu a{ opacity:0; transform:translateY(10px); transition:opacity .55s var(--ease-soft), transform .55s var(--ease-soft), color .45s var(--ease-soft); }
.menu.open a{ opacity:1; transform:none; }
.menu-inner{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; padding:4.75rem 1.9rem 2rem; overflow-y:auto; }
.menu-links{ flex:1; display:flex; flex-direction:column; justify-content:center; }

/* Section label */
.menu-eyebrow{ font-family:"Jost"; font-weight:400; font-size:.66rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); margin:0 0 .55rem; }
.menu .menu-eyebrow{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease) .08s, transform .5s var(--ease) .08s; }
.menu.open .menu-eyebrow{ opacity:1; transform:none; }

/* Treatments — the hero list */
.menu-treatments{ display:flex; flex-direction:column; }
.menu-item{ display:grid; grid-template-columns:1.75rem 1fr auto; align-items:center; column-gap:.9rem;
  padding:.92rem 0; border-bottom:1px solid var(--sand-deep); }
.menu-item:first-child{ border-top:1px solid var(--sand-deep); }
.menu-item__no{ align-self:center; font-family:"Jost"; font-size:.68rem; letter-spacing:.05em; color:var(--gold); font-variant-numeric:tabular-nums; }
.menu-item__text{ display:flex; flex-direction:column; gap:.16rem; }
.menu-item__name{ font-family:"Cormorant Garamond",serif; font-weight:400; font-size:1.5rem; line-height:1.06; color:var(--espresso); transition:color .45s var(--ease); }
.menu-item__desc{ font-family:"Jost"; font-weight:300; font-size:.715rem; letter-spacing:.025em; line-height:1.4; color:var(--taupe); }
.menu-item__arrow{ align-self:center; font-size:1.05rem; color:var(--gold); opacity:.45; transform:translateX(0); transition:opacity .45s var(--ease), transform .45s var(--ease); }
.menu-item:hover .menu-item__name,.menu-item:focus-visible .menu-item__name,.menu-item:active .menu-item__name{ color:var(--gold); }
.menu-item:hover .menu-item__arrow,.menu-item:focus-visible .menu-item__arrow{ opacity:1; transform:translateX(4px); }
.menu-item.active .menu-item__name{ color:var(--gold); }
.menu-item.active .menu-item__arrow{ opacity:1; }

/* Secondary nav — quiet row */
.menu-secondary{ display:flex; align-items:center; gap:1.7rem; margin-top:1.7rem; }
.menu-link2{ position:relative; font-family:"Cormorant Garamond",serif; font-weight:400; font-size:1.2rem; color:var(--espresso); transition:color .4s var(--ease); }
.menu-link2:hover,.menu-link2:focus-visible{ color:var(--gold); }
.menu-link2 + .menu-link2::before{ content:""; position:absolute; left:-.9rem; top:50%; width:3px; height:3px; border-radius:50%; background:var(--sand-deep); transform:translateY(-50%); }

.menu-cta{ align-self:stretch; text-align:center; margin-top:2.1rem; }

/* Footer */
.menu-foot{ padding-top:1.5rem; border-top:1px solid var(--sand-deep); }
.menu-foot p{ font-family:"Jost"; font-size:.8rem; color:var(--taupe); line-height:1.65; }
.menu-ig{ display:inline-block; margin-top:.9rem; font-size:.8rem; letter-spacing:.04em; color:var(--gold); }
/* nav sits above the open menu → force its brand + burger dark on the cream overlay */
body.menu-open .nav__brand,body.menu-open .burger{ color:var(--espresso); }

/* Reveal (JS adds .is-in). Hidden until GSAP/IO triggers. */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
/* Hero copy — hidden until the JS four-beat timeline rises it (reduced-motion + no-GSAP make it visible) */
[data-hero-line]{ opacity:0; transform:translateY(14px); will-change:transform,opacity; }

/* Accordion (FAQ) */
.acc-item{ border-bottom:1px solid var(--sand-deep); }
.acc-q{ display:flex; justify-content:space-between; align-items:center; gap:2rem; width:100%;
  padding:1.6rem 0; text-align:left; cursor:pointer; background:none; border:0;
  font-family:"Cormorant Garamond",serif; font-weight:400; font-size:1.5rem; color:var(--espresso);
  transition:color .4s var(--ease); }
.acc-q:hover{ color:var(--gold); }
.acc-q .plus{ flex:none; transition:transform .6s var(--ease-soft); color:var(--gold); font-size:1.4rem; line-height:1; }
.acc-item.open .plus{ transform:rotate(45deg); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .7s var(--ease-soft); }
.acc-a-inner{ padding:0 0 1.6rem; color:var(--taupe); max-width:62ch; }

/* Price menu rows */
.price-row{ display:grid; grid-template-columns:1fr auto; gap:.5rem 1.5rem; align-items:baseline;
  padding:1.05rem 0; border-bottom:1px solid var(--sand-deep); }
.price-row .name{ grid-column:1; grid-row:1; font-size:1rem; color:var(--espresso); }
.price-row .meta{ grid-column:1; grid-row:2; color:var(--taupe); font-size:.76rem; letter-spacing:.05em; }
.price-row .amount{ grid-row:1; grid-column:2; font-family:"Cormorant Garamond",serif; font-weight:500; font-size:1.45rem; white-space:nowrap; }
.price-row .was{ color:var(--taupe); text-decoration:line-through; font-size:.95rem; margin-left:.5rem; font-family:"Cormorant Garamond",serif; }
.price-pkg{ background:var(--canvas); border:1px solid var(--sand-deep); border-radius:22px;
  padding:1.5rem 1.75rem; box-shadow:var(--shadow-soft); }
.price-pkg .price-row:last-child{ border-bottom:0; }

/* Dark sections */
.section-dark{ background:var(--espresso); color:var(--canvas); }
.section-dark .eyebrow{ color:var(--gold-lite); }
.section-dark .h-display, .section-dark .acc-q{ color:var(--canvas); }
.section-dark .price-row, .section-dark .acc-item{ border-color:rgba(247,242,234,.14); }
.section-dark .price-row .name{ color:var(--canvas); }

/* Monogram watermark */
.watermark{ position:absolute; font-family:"Cormorant Garamond",serif; font-weight:300;
  color:var(--sand-deep); opacity:.5; pointer-events:none; user-select:none; line-height:1; z-index:0; }

/* Stars */
.stars{ color:var(--gold); letter-spacing:.18em; font-size:.9rem; }

/* Scroll cue */
.scroll-cue{ width:1px; height:54px; background:linear-gradient(var(--canvas),transparent); position:relative; overflow:hidden; }
.scroll-cue::after{ content:""; position:absolute; top:0; left:0; width:100%; height:40%;
  background:var(--gold-lite); animation:cue 3.6s var(--ease) infinite; }
@keyframes cue{
  0%   { transform:translateY(-100%); opacity:0; }
  12%  { opacity:1; }
  46%  { opacity:1; }
  50%  { transform:translateY(260%); opacity:0; }
  50.01%,100%{ transform:translateY(260%); opacity:0; }
}

/* Page transition */
.page-in{ animation:fadeUp .9s var(--ease) both; }
.page-out{ opacity:0; transform:translateY(-6px); transition:opacity .55s var(--ease), transform .55s var(--ease); }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

/* Compact buttons on small screens */
@media (max-width:640px){
  .btn{ padding:.8rem 1.5rem; font-size:.73rem; letter-spacing:.1em; }
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal,[data-hero-line]{ opacity:1 !important; transform:none !important; }
  .img-zoom,.btn{ transition:none !important; }
  .menu a{ transition:opacity .2s ease !important; transform:none !important; }
  .acc-a{ transition:none !important; }
  .scroll-cue::after{ animation:none; }
  .page-in{ animation:none; } .page-out{ transition:none !important; }
}