/* ============================================================
   THE BEAUTY LOFT — Premium Design System
   Gold + Onyx · Inspired by NYC luxury beauty
============================================================ */

:root{
  /* Palette */
  --gold: #d4af37;
  --gold-light: #f4e4ba;
  --gold-soft: #e9c46a;
  --gold-deep: #a88a2e;
  --gold-dark: #6e5a1f;

  --onyx: #050505;
  --night: #0a0a0a;
  --carbon: #111111;
  --ash: #1a1a1a;
  --charcoal: #242424;

  --pearl: #fafaf6;
  --cream: #f5f1e8;
  --linen: #e8e4d8;
  --silver: #b8b8b8;
  --mute: #7a7a7a;

  --line: rgba(212,175,55,.18);
  --line-strong: rgba(212,175,55,.4);
  --shadow-gold: 0 24px 60px -20px rgba(212,175,55,.35);

  /* Typography */
  --serif: 'Cormorant Garamond', 'Playfair Display', serif;
  --script: 'Italianno', 'Allura', cursive;
  --sans: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; background:var(--onyx); }
body{
  font-family:var(--sans);
  background:var(--onyx);
  color:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ================ Type system ================ */
.font-display{ font-family:var(--serif); font-weight:300; letter-spacing:-.01em; }
.font-script{ font-family:var(--script); font-weight:400; }
.font-mono{ font-family:var(--mono); }
.tracking-luxe{ letter-spacing:.32em; text-transform:uppercase; }
.tracking-wide-sm{ letter-spacing:.18em; text-transform:uppercase; }

.text-gold{ color:var(--gold); }
.text-gold-light{ color:var(--gold-light); }
.text-cream{ color:var(--cream); }
.text-mute{ color:var(--mute); }
.bg-gold{ background:var(--gold); }
.bg-night{ background:var(--night); }
.bg-carbon{ background:var(--carbon); }
.border-gold{ border-color:var(--gold); }
.border-line{ border-color:var(--line); }

/* ================ Effects ================ */
.gold-text-gradient{
  background:linear-gradient(135deg,#f4e4ba 0%,#d4af37 35%,#a88a2e 60%,#f4e4ba 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  background-size:200% 200%;
  animation:goldShimmer 8s ease-in-out infinite;
}
@keyframes goldShimmer{
  0%,100%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
}

.gold-shine{
  position:relative; overflow:hidden;
}
.gold-shine::before{
  content:''; position:absolute; top:0; left:-150%; width:100%; height:100%;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);
  transform:skewX(-20deg);
  transition:none;
}
.gold-shine:hover::before{ left:150%; transition:left .9s ease; }

.glow-gold{ box-shadow:0 0 40px rgba(212,175,55,.18), inset 0 1px 0 rgba(244,228,186,.1); }
.glow-text{ text-shadow:0 0 30px rgba(212,175,55,.35); }

.noise::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.83 0 0 0 0 0.69 0 0 0 0 0.22 0 0 0 .15 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  opacity:.4; mix-blend-mode:overlay;
}

/* ================ Buttons ================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem 2rem; font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
  font-weight:500; cursor:pointer; transition:all .4s cubic-bezier(.16,1,.3,1);
  border:1px solid transparent; position:relative; overflow:hidden;
}
.btn-gold{
  background:linear-gradient(135deg,#f4e4ba 0%,#d4af37 50%,#a88a2e 100%);
  color:#0a0a0a; font-weight:600;
}
.btn-gold:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px -8px rgba(212,175,55,.6);
}
.btn-outline{
  border:1px solid var(--gold); color:var(--gold); background:transparent;
}
.btn-outline:hover{
  background:var(--gold); color:#0a0a0a;
  transform:translateY(-2px);
  box-shadow:0 12px 32px -8px rgba(212,175,55,.5);
}
.btn-ghost{
  border:1px solid var(--line); color:var(--cream); background:transparent;
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold); }

/* ================ Navbar links ================ */
.nav-link{
  position:relative; font-size:.72rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--cream); transition:color .3s; padding:.5rem 0;
}
.nav-link::after{
  content:''; position:absolute; left:50%; bottom:-2px; width:0; height:1px;
  background:var(--gold); transition:all .4s cubic-bezier(.16,1,.3,1);
  transform:translateX(-50%);
}
.nav-link:hover{ color:var(--gold); }
.nav-link:hover::after{ width:100%; }
.nav-link.active{ color:var(--gold); }
.nav-link.active::after{ width:100%; }

/* ================ Cards ================ */
.card{
  background:linear-gradient(180deg,#141414 0%,#0d0d0d 100%);
  border:1px solid var(--line);
  transition:all .5s cubic-bezier(.16,1,.3,1);
  position:relative; overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(212,175,55,.08),transparent 40%);
  opacity:0; transition:opacity .5s;
}
.card:hover{
  border-color:var(--line-strong);
  transform:translateY(-6px);
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(212,175,55,.2);
}
.card:hover::before{ opacity:1; }

.card-image{
  background:linear-gradient(180deg,#141414 0%,#0a0a0a 100%);
  border:1px solid var(--line);
  overflow:hidden; position:relative;
}
.card-image img{ transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.card-image:hover img{ transform:scale(1.06); }
.card-image video{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.card-image:hover video{ transform:scale(1.04); }
.home-play-badge{ position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; background:rgba(212,175,55,.92); color:#000; display:flex; align-items:center; justify-content:center; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.4); z-index:2; }
.home-play-badge svg{ width:14px; height:14px; }

/* ================ Instagram embed grid ================ */
.ig-grid{ align-items:start; }
.ig-cell{ display:flex; justify-content:center; min-height:540px; }
.ig-cell .instagram-media{ margin:0 !important; max-width:100% !important; min-width:0 !important; width:100% !important; box-shadow:0 20px 60px -20px rgba(212,175,55,.25), 0 8px 24px rgba(0,0,0,.6) !important; border-radius:12px !important; overflow:hidden; }
.ig-cell iframe{ max-width:100% !important; }
@media(max-width:639px){ .ig-cell{ min-height:auto; } }

/* ================ Service icon (gold ring like Instagram) ================ */
.service-orb{
  width:96px; height:96px; border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#1a1a1a,#000);
  border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  position:relative; transition:all .5s cubic-bezier(.16,1,.3,1);
  box-shadow:0 0 0 6px #0a0a0a, 0 0 0 7px var(--gold-deep);
}
.service-orb::after{
  content:''; position:absolute; inset:-14px; border-radius:50%;
  border:1px dashed var(--line); opacity:0; transition:opacity .4s;
}
.service-orb:hover{
  transform:scale(1.06) rotate(-4deg);
  box-shadow:0 0 0 6px #0a0a0a, 0 0 0 7px var(--gold), 0 16px 40px -10px rgba(212,175,55,.5);
}
.service-orb:hover::after{ opacity:1; }
.service-orb svg{ width:46px; height:46px; stroke:var(--gold); fill:none; stroke-width:1.4; }

/* ================ Reveal animations ================ */
.reveal{
  opacity:0; transform:translateY(40px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1);
}
.reveal.in{ opacity:1; transform:translateY(0); }

.reveal-left{ transform:translateX(-40px); }
.reveal-left.in{ transform:translateX(0); }
.reveal-right{ transform:translateX(40px); }
.reveal-right.in{ transform:translateX(0); }
.reveal-scale{ transform:scale(.95); }
.reveal-scale.in{ transform:scale(1); }

.reveal-stagger>*{
  opacity:0; transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal-stagger.in>*{ opacity:1; transform:translateY(0); }
.reveal-stagger.in>*:nth-child(1){ transition-delay:0s; }
.reveal-stagger.in>*:nth-child(2){ transition-delay:.08s; }
.reveal-stagger.in>*:nth-child(3){ transition-delay:.16s; }
.reveal-stagger.in>*:nth-child(4){ transition-delay:.24s; }
.reveal-stagger.in>*:nth-child(5){ transition-delay:.32s; }
.reveal-stagger.in>*:nth-child(6){ transition-delay:.4s; }
.reveal-stagger.in>*:nth-child(7){ transition-delay:.48s; }
.reveal-stagger.in>*:nth-child(8){ transition-delay:.56s; }
.reveal-stagger.in>*:nth-child(9){ transition-delay:.64s; }
.reveal-stagger.in>*:nth-child(10){ transition-delay:.72s; }
.reveal-stagger.in>*:nth-child(11){ transition-delay:.8s; }
.reveal-stagger.in>*:nth-child(12){ transition-delay:.88s; }

/* ================ Ornament line ================ */
.ornament{
  display:flex; align-items:center; justify-content:center; gap:1.2rem;
  color:var(--gold); font-size:.7rem; letter-spacing:.4em; text-transform:uppercase;
}
.ornament::before, .ornament::after{
  content:''; flex:1; max-width:80px; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.ornament-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--gold); margin:0 .5rem;
}

/* ================ Section headers ================ */
.eyebrow{
  font-size:.7rem; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:.8rem;
}
.eyebrow::before{
  content:''; width:24px; height:1px; background:var(--gold); display:inline-block;
}

/* ================ Marquee ================ */
.marquee{
  display:flex; gap:3rem; animation:marquee 32s linear infinite;
  white-space:nowrap;
}
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ================ Light leaks ================ */
.light-leak{
  position:absolute; pointer-events:none;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,.08),transparent 65%);
  filter:blur(40px);
}

/* ================ Scrollbar ================ */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:#0a0a0a; }
::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--gold-deep),var(--gold)); border-radius:4px; }

/* ================ Selection ================ */
::selection{ background:var(--gold); color:#000; }

/* ================ Form inputs ================ */
.input{
  background:rgba(255,255,255,.02);
  border:1px solid var(--line);
  color:var(--cream);
  padding:.95rem 1.1rem;
  font-family:var(--sans); font-size:.9rem;
  width:100%;
  transition:all .3s;
  border-radius:0;
}
.input:focus{
  outline:none; border-color:var(--gold);
  background:rgba(212,175,55,.04);
  box-shadow:0 0 0 3px rgba(212,175,55,.1);
}
.input::placeholder{ color:var(--mute); }

label.input-label{
  display:block; font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.5rem;
}

/* ================ Loader ================ */
.page-loader{
  position:fixed; inset:0; z-index:9999;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s, visibility .8s;
}
.page-loader.done{ opacity:0; visibility:hidden; }
.page-loader-inner{
  display:flex; flex-direction:column; align-items:center; gap:1.5rem;
}
.page-loader-logo{
  font-family:var(--script); font-size:3rem; color:var(--gold);
  letter-spacing:.04em;
  animation:loaderPulse 1.4s ease-in-out infinite;
}
.page-loader-logo-img{
  width:160px; height:auto;
  filter:drop-shadow(0 0 30px rgba(212,175,55,.4));
  animation:loaderPulse 1.6s ease-in-out infinite;
}
.brand-logo{
  height:52px; width:auto;
  filter:drop-shadow(0 2px 8px rgba(212,175,55,.2));
  transition:filter .3s, transform .3s;
}
.brand-logo:hover{ filter:drop-shadow(0 2px 16px rgba(212,175,55,.5)); transform:scale(1.02); }
.brand-logo-sm{ height:44px; }
.brand-logo-lg{ height:80px; }
@keyframes loaderPulse{
  0%,100%{ opacity:.5; transform:scale(.96); }
  50%{ opacity:1; transform:scale(1); }
}
.page-loader-bar{
  width:200px; height:1px; background:rgba(212,175,55,.2); position:relative; overflow:hidden;
}
.page-loader-bar::after{
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  animation:loaderBar 1.6s ease-in-out infinite;
}
@keyframes loaderBar{ to{ left:200%; } }

/* Custom cursor removed */

/* ================ Lang toggle ================ */
.lang-toggle{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.65rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--cream); cursor:pointer;
  border:1px solid var(--line); padding:.5rem .8rem; transition:all .3s;
}
.lang-toggle:hover{ border-color:var(--gold); color:var(--gold); }
.lang-toggle .active-lang{ color:var(--gold); }

/* ================ Toast ================ */
.toast{
  position:fixed; top:90px; right:24px; z-index:200;
  background:linear-gradient(180deg,#1a1a1a,#0d0d0d);
  border:1px solid var(--gold); padding:1rem 1.4rem;
  color:var(--cream); font-size:.85rem;
  transform:translateX(120%); transition:transform .5s cubic-bezier(.16,1,.3,1);
  box-shadow:0 16px 40px -10px rgba(0,0,0,.7);
}
.toast.show{ transform:translateX(0); }

/* ================ Mobile menu ================ */
.mobile-menu{
  position:fixed; inset:0; z-index:90;
  background:rgba(5,5,5,.97); backdrop-filter:blur(20px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .5s, visibility .5s;
}
.mobile-menu.open{ opacity:1; visibility:visible; }
.mobile-menu nav{ display:flex; flex-direction:column; gap:1.6rem; align-items:center; }
.mobile-menu nav a{
  font-family:var(--serif); font-size:2rem; color:var(--cream);
  transition:all .3s;
}
.mobile-menu nav a:hover{ color:var(--gold); transform:scale(1.05); }

/* ================ Utility ================ */
.divider-gold{
  height:1px; background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.glass{
  background:rgba(20,20,20,.7); backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--line);
}

/* ================ Hero slot ================ */
.hero-bg{
  position:absolute; inset:0; overflow:hidden;
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  filter:brightness(.42) saturate(1.1) sepia(.18);
  animation:heroZoom 20s ease-in-out infinite alternate;
}
@keyframes heroZoom{
  from{ transform:scale(1); }
  to{ transform:scale(1.08); }
}

/* ================ Hide scrollbar (utility) ================ */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ scrollbar-width:none; }

/* ================ Booking step indicators ================ */
.step-dot{
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:.8rem; color:var(--mute);
  transition:all .4s;
}
.step-dot.active{ border-color:var(--gold); color:var(--gold); box-shadow:0 0 0 4px rgba(212,175,55,.1); }
.step-dot.done{ background:var(--gold); border-color:var(--gold); color:#000; }
.step-line{ flex:1; height:1px; background:var(--line); transition:background .4s; }
.step-line.done{ background:var(--gold); }

/* ================ Time slot pills ================ */
.slot{
  padding:.6rem .9rem; border:1px solid var(--line); cursor:pointer;
  font-family:var(--mono); font-size:.75rem; letter-spacing:.1em;
  transition:all .3s; color:var(--cream); text-align:center;
}
.slot:hover{ border-color:var(--gold); color:var(--gold); background:rgba(212,175,55,.04); }
.slot.selected{ background:var(--gold); color:#000; border-color:var(--gold); }
.slot.disabled{ opacity:.3; cursor:not-allowed; text-decoration:line-through; }

/* ================ Responsive helpers ================ */
@media (max-width:768px){
  .hide-mobile{ display:none !important; }
}
@media (min-width:769px){
  .show-mobile{ display:none !important; }
}

/* ================ Mobile optimizations ================ */
@media (max-width:640px){
  /* Tighter container paddings */
  .px-6{ padding-left:1rem !important; padding-right:1rem !important; }

  /* Brand logo smaller on mobile */
  .brand-logo{ height:42px; }
  .brand-logo-lg{ height:64px; }
  .page-loader-logo-img{ width:130px; }

  /* Service orbs */
  .service-orb{ width:74px; height:74px; box-shadow:0 0 0 4px #0a0a0a, 0 0 0 5px var(--gold-deep); }
  .service-orb svg{ width:34px; height:34px; }

  /* Booking step dots */
  .step-dot{ width:28px; height:28px; font-size:.7rem; }

  /* Buttons — bigger tap target, slightly less wide */
  .btn{
    padding:.95rem 1.4rem; font-size:.62rem; letter-spacing:.22em;
    min-height:44px;
  }
  .btn-gold, .btn-outline, .btn-ghost{ width:auto; }

  /* Card padding */
  .card{ /* allow tailwind p-* to work, just trim margins */ }

  /* Inputs */
  .input{ padding:.85rem .95rem; font-size:16px; /* prevents iOS zoom */ }

  /* Hero spacing */
  .hero-bg img{ filter:brightness(.5) saturate(1.05); }

  /* Marquee speed up & wrap */
  .marquee{ gap:1.6rem; animation-duration:24s; }
  .marquee span{ font-size:.62rem !important; letter-spacing:.28em !important; }

  /* Ornament shorter on mobile */
  .ornament::before, .ornament::after{ max-width:36px; }

  /* Mobile menu nav links */
  .mobile-menu nav{ gap:1.2rem; }
  .mobile-menu nav a{ font-size:1.6rem; }

  /* Lang toggle compact */
  .lang-toggle{ padding:.45rem .55rem; font-size:.6rem; letter-spacing:.18em; gap:.25rem; }

  /* Stylist / service cards */
  .stylist-card .p-5{ padding:1rem !important; }

  /* Hide font-mono inline mins on tight breakpoints to avoid wrap */
  .step-line{ flex:1; min-width:8px; }

  /* Mobile menu overlay button */
  #mobile-menu-trigger{ width:42px; height:42px; }

  /* Time slot grid */
  #time-slots{ gap:.4rem; }
  .slot{ padding:.55rem .4rem; font-size:.7rem; }

  /* Calendar day cells */
  .day-cell{ font-size:.72rem !important; }

  /* Hero giant text — slight breathing room */
  h1.font-display{ line-height:.92 !important; }

  /* Section vertical spacing tighter */
  section.py-24, section.py-28, section.py-32{ padding-top:3.5rem !important; padding-bottom:3.5rem !important; }
  section.md\:py-32, section.md\:py-28{ padding-top:3.5rem !important; padding-bottom:3.5rem !important; }

  /* Top bar text smaller so doesn't wrap awkwardly */
  .bg-\[\#0a0a0a\].text-\[\#d4af37\] > div{ font-size:.6rem !important; letter-spacing:.22em !important; }

  /* Lightbox close/prev/next buttons smaller */
  .lb-close, .lb-prev, .lb-next{ width:40px !important; height:40px !important; font-size:20px !important; }
}

@media (max-width:380px){
  .brand-logo{ height:36px; }
  .service-orb{ width:64px; height:64px; }
  .service-orb svg{ width:28px; height:28px; }
  .btn{ padding:.85rem 1.1rem; }
}

/* Touch devices — remove hover-dependent effects */
@media (hover:none){
  .nav-link::after{ display:none; }
  .card:hover{ transform:none; }
  .gold-shine:hover::before{ left:-150%; }
  *{ -webkit-tap-highlight-color:rgba(212,175,55,.18); }
}

/* Avoid horizontal scroll from oversized headings */
html, body{ overflow-x:hidden; max-width:100vw; }

/* ================ Print ================ */
@media print{
  body{ background:white; color:black; }
}