/* ==========================================================================
   COLOUR SALON — design tokens
   ========================================================================== */
:root{
  --void: #0a0908;
  --void-2: #15120f;
  --void-3: #1d1915;
  --ivory: #f2ece0;
  --ivory-2: #e8ded0;
  --ink: #17130f;
  --off-white: #f6f2ea;
  --off-white-dim: rgba(246,242,234,.68);
  --gold: #c8a45e;
  --gold-soft: #e0c793;
  --gold-dim: rgba(200,164,94,.5);
  --line-dark: rgba(246,242,234,.14);
  --line-light: rgba(23,19,15,.14);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Manrope", -apple-system, "Segoe UI", sans-serif;

  --container: 1400px;
  --gutter: clamp(24px, 5vw, 96px);
  --section-y: clamp(88px, 11vw, 168px);

  --ease: cubic-bezier(.16,.8,.24,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; overflow-x: hidden; }
body{
  margin:0;
  background: var(--void);
  color: var(--off-white);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img{ display:block; max-width:100%; height:auto; }
a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; }
ul,ol{ list-style: none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
address{ font-style: normal; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:999;
  background: var(--gold); color:var(--ink); padding:12px 20px;
}
.skip-link:focus{ left: 16px; top: 16px; }

:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Type
   ========================================================================== */
.display-heading{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: .01em;
  color: var(--off-white);
}
.display-heading--dark{ color: var(--ink); }
.display-heading--huge{ font-size: clamp(3rem, 7vw, 6.4rem); }

.gold-highlight{ color: var(--gold); font-style: italic; }

.label{
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.label--gold{ color: var(--gold); }
.label--dark{ color: var(--ink); opacity:.62; }
.label.center{ text-align:center; }

.text-link{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12.5px; font-weight:600; letter-spacing:.14em;
  text-transform: uppercase; color: var(--off-white);
  padding-bottom: 4px; border-bottom: 1px solid var(--line-dark);
  transition: color .3s var(--ease), border-color .3s var(--ease), gap .3s var(--ease);
}
.text-link:hover{ color: var(--gold); border-color: var(--gold-dim); gap: 12px; }
.text-link--dark{ color: var(--ink); border-color: var(--line-light); }
.text-link--dark:hover{ color:#8a6a2f; }
.text-link--sm{ font-size: 11px; }

/* Reveal rule — signature drawn line */
.reveal-rule{
  display:block; width: 56px; height: 1px; background: var(--gold);
  transform-origin: left center; transform: scaleX(0);
  transition: transform .9s var(--ease);
  margin-bottom: 28px;
}
.reveal-rule--center{ margin-left:auto; margin-right:auto; transform-origin:center; }
.reveal-rule--dark{ background: var(--ink); opacity:.5; }
.reveal.is-visible .reveal-rule{ transform: scaleX(1); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 16px 30px;
  font-size: 12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  border: 1px solid transparent; border-radius: 2px;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: scale(.98); }
.btn--gold{ background: var(--gold); color: var(--ink); }
.btn--gold:hover{ background: var(--gold-soft); }
.btn--outline-gold{ border-color: var(--gold-dim); color: var(--off-white); }
.btn--outline-gold:hover{ border-color: var(--gold); background: rgba(200,164,94,.08); }
.btn--ghost{ border-color: var(--line-dark); color: var(--off-white); }
.btn--ghost:hover{ border-color: var(--off-white); }
.btn--outline-light{ border-color: var(--line-dark); color: var(--off-white); }
.btn--outline-light:hover{ border-color: var(--off-white); }
.btn[disabled]{ opacity:.35; pointer-events:none; }
.btn--block{ width:100%; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 200;
  padding: 22px var(--gutter);
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: rgba(10,9,8,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding: 14px var(--gutter);
  border-color: var(--line-dark);
}
.header-inner{
  max-width: var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.logo{ display:flex; flex-direction:column; line-height:1.05; font-family: var(--serif); }
.logo-line{ font-size: 19px; letter-spacing: .2em; font-weight:500; color: var(--off-white); }
.logo-line--accent{ color: var(--gold); font-size: 12px; letter-spacing: .5em; margin-top: 2px; }

.main-nav{ display:flex; gap: 38px; }
.main-nav a{
  font-size: 11.5px; font-weight:600; letter-spacing:.16em;
  position: relative; padding-bottom: 4px;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform .35s var(--ease);
}
.main-nav a:hover::after{ transform: scaleX(1); transform-origin: left; }

.header-cta{ padding: 12px 24px; }

.nav-toggle{
  display:none; position:relative;
  width: 42px; height: 42px; background:none; border:none; padding:0;
}
.nav-toggle span{
  position:absolute; left:50%; top:50%; display:block; width: 22px; height:1px; background: var(--off-white);
  transform: translate(-50%,-50%) translateY(-6px);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(2){ transform: translate(-50%,-50%); }
.nav-toggle span:nth-child(3){ transform: translate(-50%,-50%) translateY(6px); }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translate(-50%,-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translate(-50%,-50%) rotate(-45deg); }

.mobile-nav{
  display:none; flex-direction:column; gap: 22px;
  padding: 28px var(--gutter) 34px;
  background: rgba(10,9,8,.97); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.mobile-nav a{ font-size: 14px; font-weight:600; letter-spacing:.14em; }
.mobile-nav .btn{ margin-top: 8px; width: max-content; }
.site-header.nav-open .mobile-nav{ display:flex; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative; height: 100svh; min-height: 560px;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; background: var(--void); }
.hero-video{ width:100%; height:100%; object-fit: cover; display:block; }
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(8,7,6,.72) 0%, rgba(8,7,6,.42) 42%, rgba(8,7,6,.18) 65%, rgba(8,7,6,.38) 100%),
    linear-gradient(0deg, rgba(8,7,6,.55) 0%, rgba(8,7,6,0) 26%, rgba(8,7,6,0) 74%, rgba(8,7,6,.5) 100%);
}
.hero-content{
  position:relative; z-index:1;
  max-width: var(--container); width:100%; margin: 0 auto;
  padding: 0 var(--gutter);
}
.eyebrow{
  font-size: 11.5px; font-weight:700; letter-spacing:.24em; text-transform:uppercase;
  color: var(--gold-soft); margin-bottom: 22px;
}
.hero-title{
  font-family: var(--serif); font-weight:500; color: var(--off-white);
  font-size: clamp(2.8rem, 7.2vw, 6.4rem);
  line-height: 1.02; letter-spacing: .01em;
  margin-bottom: 34px;
}
.line-wrap{ display:block; overflow:hidden; }
.line{ display:block; }

.hero-cta{ display:flex; gap: 18px; flex-wrap: wrap; margin-bottom: 46px; }
.hero-meta{ display:flex; align-items:center; gap: 14px; font-size: 13px; color: var(--off-white-dim); }
.hero-rating{ display:flex; align-items:center; gap:8px; }
.stars{ color: var(--gold); letter-spacing: 2px; font-size: 13px; }
.stars--dark{ color: var(--gold); font-size: 22px; letter-spacing: 4px; display:block; margin: 14px 0; }
.hero-meta-divider{ opacity:.5; }

.scroll-cue{
  position:absolute; left: var(--gutter); bottom: 34px; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-size: 10px; font-weight:600; letter-spacing:.22em; color: var(--off-white-dim);
  writing-mode: vertical-rl;
}
.scroll-cue-line{ width:1px; height: 44px; background: linear-gradient(var(--gold), transparent); animation: cueMove 2.2s ease-in-out infinite; }
@keyframes cueMove{ 0%,100%{ transform: scaleY(1); opacity:1;} 50%{ transform: scaleY(.6); opacity:.4;} }

/* hero load-in reveal */
.reveal-item, .reveal-line{
  opacity:0; transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.hero.is-ready .reveal-item,
.hero.is-ready .reveal-line{ opacity:1; transform: translateY(0); }
.hero.is-ready .reveal-item[data-delay="1"]{ transition-delay: .1s; }
.hero.is-ready .reveal-line[data-delay="2"]{ transition-delay: .28s; }
.hero.is-ready .reveal-line[data-delay="3"]{ transition-delay: .44s; }
.hero.is-ready .reveal-item[data-delay="4"]{ transition-delay: .64s; }
.hero.is-ready .reveal-item[data-delay="5"]{ transition-delay: .8s; }
.hero.is-ready .reveal-item[data-delay="6"]{ transition-delay: 1s; }
.logo, .main-nav, .header-cta{ opacity:0; transform: translateY(-8px); transition: opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s; }
body.loaded .logo, body.loaded .main-nav, body.loaded .header-cta{ opacity:1; transform:none; }

/* ==========================================================================
   Generic scroll reveal
   ========================================================================== */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-media{ opacity:0; clip-path: inset(0 0 100% 0); transition: opacity 1s var(--ease), clip-path 1.1s var(--ease); }
.reveal-media.is-visible{ opacity:1; clip-path: inset(0 0 0% 0); }

/* ==========================================================================
   Experience / About
   ========================================================================== */
.experience{
  display:grid; grid-template-columns: 1fr 1fr;
  background: var(--void);
}
.experience-text{ display:flex; align-items:center; padding: var(--section-y) var(--gutter); }
.experience-copy{
  font-size: 16px; line-height:1.75; color: var(--off-white-dim);
  max-width: 42ch; margin: 28px 0 34px;
}
.experience-media{ position:relative; min-height: 420px; }
.experience-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   Services
   ========================================================================== */
.services{ background: var(--void); padding: var(--section-y) var(--gutter); }
.section-head{ max-width: var(--container); margin: 0 auto 64px; text-align:center; }
.services-grid{
  max-width: 1100px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line-dark);
}
.service-card{ background: var(--void); position:relative; overflow:hidden; }
.service-card-media{ aspect-ratio: 1/1; overflow:hidden; }
.service-card-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease); }
.service-card:hover .service-card-media img{ transform: scale(1.055); }
.service-card-body{ padding: 24px 24px 28px; }
.service-index{ font-family: var(--serif); font-size: 13px; color: var(--gold); letter-spacing:.1em; }
.service-card-body h3{
  font-family: var(--serif); font-size: 24px; font-weight:500; letter-spacing:.02em;
  margin: 8px 0 10px; color: var(--off-white);
}
.service-card-body p{ font-size: 13.5px; line-height:1.55; color: var(--off-white-dim); margin-bottom: 18px; min-height: 40px; }

/* ==========================================================================
   Before / After
   ========================================================================== */
.transformations{
  background: var(--ivory); color: var(--ink);
  display:grid; grid-template-columns: .82fr 1.18fr; align-items:center;
  gap: clamp(32px, 5vw, 80px);
  padding: var(--section-y) var(--gutter);
}
.transformations-hint{ font-size:13px; letter-spacing:.08em; color: rgba(23,19,15,.6); margin-top: 6px; }

.ba-slider{ width:100%; }
.ba-slider-frame{
  position:relative; width:100%; aspect-ratio: 1/1; overflow:hidden;
  border-radius: 2px; user-select:none; -webkit-user-select:none;
  cursor: ew-resize; background: var(--void-2);
}
.ba-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.ba-clip{ position:absolute; inset:0; width:50%; overflow:hidden; will-change: width; }
.ba-clip .ba-img{ max-width:none; }

.ba-tag{
  position:absolute; top: 20px; font-size: 10.5px; font-weight:700; letter-spacing:.18em;
  color: var(--off-white); background: rgba(10,9,8,.55); padding: 7px 14px;
  backdrop-filter: blur(6px);
}
.ba-tag--before{ left: 20px; }
.ba-tag--after{ right: 20px; }

.ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width: 2px; background: var(--gold);
  transform: translateX(-1px); cursor: ew-resize;
}
.ba-handle-grip{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width: 44px; height:44px; border-radius:50%;
  background: var(--gold); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* ==========================================================================
   Lookbook
   ========================================================================== */
.lookbook{ background: var(--void); padding: var(--section-y) var(--gutter); }
.lookbook-grid{
  max-width: 1100px; margin: 0 auto;
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.lookbook-item{
  position:relative; overflow:hidden; margin:0; background: var(--void-2);
  aspect-ratio: 6/5;
}
.lookbook-item--tall{ aspect-ratio: 4/5.4; }
.lookbook-item--wide{ grid-column: 1 / -1; aspect-ratio: 12/5; }
.lookbook-item img{ width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease); }
.lookbook-item::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(8,7,6,.65) 0%, rgba(8,7,6,0) 46%);
  opacity:0; transition: opacity .5s var(--ease);
}
.lookbook-item figcaption{
  position:absolute; left: 18px; bottom: 18px; z-index:1;
  font-size: 11px; font-weight:700; letter-spacing:.2em; color: var(--off-white);
  opacity:0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.lookbook-item:hover img{ transform: scale(1.06); }
.lookbook-item:hover::after, .lookbook-item:hover figcaption{ opacity:1; transform:none; }
.lookbook-cta{ max-width: var(--container); margin: 56px auto 0; text-align:center; }

/* ==========================================================================
   Booking
   ========================================================================== */
.booking{ background: var(--void-2); padding: var(--section-y) var(--gutter); }
.booking-intro{ max-width: var(--container); margin: 0 auto 56px; }
.booking-subtitle{ font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--off-white-dim); margin-top: 18px; }

.booking-panel{ max-width: var(--container); margin: 0 auto; }

.booking-steps{
  display:flex; gap: 0; margin-bottom: 48px; border-bottom: 1px solid var(--line-dark);
  overflow-x:auto;
}
.booking-steps li{
  flex: 1 1 0; min-width: 140px; padding: 0 0 18px; position:relative;
  display:flex; align-items:center; gap:10px; opacity:.4; transition: opacity .3s var(--ease);
}
.booking-steps li.is-active,.booking-steps li.is-done{ opacity:1; }
.booking-steps li::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background: var(--gold); transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease);
}
.booking-steps li.is-active::after,.booking-steps li.is-done::after{ transform: scaleX(1); }
.step-num{
  width: 26px; height:26px; border-radius:50%; border: 1px solid var(--line-dark);
  display:flex; align-items:center; justify-content:center; font-size:12px; flex:none;
}
.booking-steps li.is-active .step-num, .booking-steps li.is-done .step-num{ border-color: var(--gold); color: var(--gold); }
.step-label{ font-size: 10.5px; font-weight:700; letter-spacing:.12em; white-space:nowrap; }

.booking-step{ display:none; animation: stepIn .5s var(--ease); }
.booking-step.is-active{ display:block; }
@keyframes stepIn{ from{ opacity:0; transform: translateY(10px);} to{ opacity:1; transform:none; } }
.step-title{ font-family: var(--serif); font-size: 24px; font-weight:500; margin-bottom: 28px; }

.option-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.option-grid--staff{ grid-template-columns: repeat(4, 1fr); }
.option-card{
  border: 1px solid var(--line-dark); padding: 20px 18px; text-align:left;
  background: transparent; color: var(--off-white); transition: border-color .3s var(--ease), background .3s var(--ease);
}
.option-card:hover{ border-color: var(--gold-dim); }
.option-card.is-selected{ border-color: var(--gold); background: rgba(200,164,94,.08); }
.option-card .o-name{ display:block; font-family: var(--serif); font-size: 18px; margin-bottom: 6px; }
.option-card .o-meta{ display:block; font-size: 12px; color: var(--off-white-dim); }

.date-picker{ display:flex; gap: 12px; overflow-x:auto; padding-bottom: 8px; }
.date-chip{
  flex: 0 0 auto; width: 84px; padding: 16px 0; text-align:center;
  border: 1px solid var(--line-dark); background: transparent; color: var(--off-white);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.date-chip .d-dow{ display:block; font-size: 10.5px; letter-spacing:.1em; color: var(--off-white-dim); margin-bottom:8px; }
.date-chip .d-num{ display:block; font-family: var(--serif); font-size: 24px; }
.date-chip .d-mon{ display:block; font-size: 10px; color: var(--off-white-dim); margin-top:4px; }
.date-chip:hover{ border-color: var(--gold-dim); }
.date-chip.is-selected{ border-color: var(--gold); background: rgba(200,164,94,.08); }

.time-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.time-chip{
  padding: 16px 0; text-align:center; border: 1px solid var(--line-dark); background: transparent;
  color: var(--off-white); font-size: 14px; letter-spacing:.04em;
  transition: border-color .3s var(--ease), background .3s var(--ease), opacity .3s var(--ease);
}
.time-chip:hover:not([disabled]){ border-color: var(--gold-dim); }
.time-chip.is-selected{ border-color: var(--gold); background: rgba(200,164,94,.08); }
.time-chip[disabled]{ opacity:.3; text-decoration: line-through; cursor:not-allowed; }

.field-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column: 1 / -1; }
.field span{ font-size: 11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--off-white-dim); }
.field span em{ font-style: normal; text-transform:none; letter-spacing:0; opacity:.7; }
.field input, .field textarea{
  background: transparent; border: none; border-bottom: 1px solid var(--line-dark);
  color: var(--off-white); font-family: var(--sans); font-size: 15px; padding: 10px 2px;
  transition: border-color .3s var(--ease);
}
.field input:focus, .field textarea:focus{ border-color: var(--gold); outline:none; }
.field-error{ color:#e08a6e; font-size: 13px; margin-top: 18px; }

.booking-nav{
  display:flex; align-items:center; justify-content:space-between; gap: 20px;
  margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-dark);
}
.booking-summary{ font-size: 12.5px; color: var(--off-white-dim); flex:1; text-align:center; }

.booking-success{ display:none; text-align:center; padding: 20px 0 10px; }
.booking-success.is-active{ display:block; }
.success-check{
  width: 68px; height:68px; border-radius:50%; border: 1px solid var(--gold); color: var(--gold);
  display:flex; align-items:center; justify-content:center; font-size: 28px; margin: 0 auto 28px;
}
.booking-success h3{ font-family: var(--serif); font-size: 30px; font-weight:500; margin-bottom: 30px; }
.success-summary{
  display:inline-grid; grid-template-columns: auto auto; gap: 10px 28px; text-align:left;
  margin: 0 auto 30px; font-size: 14px;
}
.success-summary dt{ color: var(--off-white-dim); text-transform:uppercase; letter-spacing:.1em; font-size:11px; }
.success-summary dd{ margin:0; font-family: var(--serif); font-size: 17px; }
.success-note{ font-style: italic; font-family: var(--serif); color: var(--off-white-dim); margin-bottom: 30px; font-size:16px; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews{ background: var(--ivory); color: var(--ink); padding: var(--section-y) var(--gutter); text-align:center; }
.reviews-rating{ margin-bottom: 60px; }
.reviews-score{ display:block; font-family: var(--serif); font-size: clamp(64px,9vw,96px); font-weight:500; line-height:1; }
.reviews-caption{ font-size: 13px; letter-spacing:.1em; color: rgba(23,19,15,.6); }
.reviews-grid{
  max-width: var(--container); margin: 0 auto; display:grid;
  grid-template-columns: repeat(3,1fr); gap: 40px;
}
.review-card p{
  font-family: var(--serif); font-style: italic; font-size: 21px; line-height:1.5;
  margin-bottom: 18px;
}
.review-card cite{ font-size: 12px; letter-spacing:.1em; color: rgba(23,19,15,.55); font-style:normal; }
.reviews-cta{ margin-top: 56px; }

/* ==========================================================================
   Salon / Contact
   ========================================================================== */
.salon{ background: var(--void); display:grid; grid-template-columns: 1fr 1fr; }
.salon-info{ display:flex; flex-direction:column; justify-content:center; padding: var(--section-y) var(--gutter); }
.salon-address{ font-family: var(--serif); font-size: 26px; margin-bottom: 22px; line-height:1.4; }
.salon-hours{ font-size: 14px; color: var(--off-white-dim); line-height:1.7; margin-bottom: 14px; }
address a{ font-size: 15px; color: var(--off-white); border-bottom: 1px solid var(--line-dark); }
address a:hover{ color: var(--gold); }
.salon-info > address{ margin-bottom: 30px; }
.salon-social{ margin-top: 56px; }
.social-links{ display:flex; gap: 14px; margin-bottom: 12px; }
.social-links a{
  width: 42px; height:42px; border: 1px solid var(--line-dark); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.social-links a:hover{ border-color: var(--gold); color: var(--gold); }
.social-handle{ font-size: 13px; color: var(--off-white-dim); }
.salon-media{ position:relative; min-height: 420px; }
.salon-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta{ position:relative; padding: clamp(120px,18vw,220px) var(--gutter); text-align:center; overflow:hidden; }
.final-cta-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.final-cta-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,7,6,.88) 0%, rgba(8,7,6,.72) 40%, rgba(8,7,6,.92) 100%); z-index:0; }
.final-cta-content{ position:relative; z-index:1; max-width: 900px; margin:0 auto; }
.final-cta-content .btn{ margin-top: 40px; }
.final-cta-logo{
  margin-top: 70px; font-family: var(--serif); letter-spacing:.3em; font-size:14px;
  display:flex; gap:10px; justify-content:center; color: var(--off-white-dim);
}
.final-cta-logo .gold-highlight{ font-style:normal; color: var(--gold); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--void); border-top: 1px solid var(--line-dark); padding: 26px var(--gutter); }
.footer-inner{
  max-width: var(--container); margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-size: 12px; color: var(--off-white-dim); letter-spacing:.04em;
}

/* Sticky mobile CTA */
.sticky-cta{
  position: fixed; left:0; right:0; bottom:0; z-index: 150;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10,9,8,.9); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line-dark);
  display:none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .main-nav, .header-cta{ display:none; }
  .nav-toggle{ display:flex; }

  .experience{ grid-template-columns: 1fr; }
  .experience-media{ min-height: 320px; order:-1; }

  .services-grid{ grid-template-columns: 1fr; }

  .transformations{ grid-template-columns: 1fr; }

  .lookbook-grid{ grid-template-columns: 1fr 1fr; }
  .lookbook-item, .lookbook-item--tall{ aspect-ratio: 6/5; }

  .option-grid{ grid-template-columns: repeat(2,1fr); }
  .option-grid--staff{ grid-template-columns: repeat(2,1fr); }
  .time-grid{ grid-template-columns: repeat(3,1fr); }
  .field-grid{ grid-template-columns: 1fr; }

  .reviews-grid{ grid-template-columns: 1fr; gap: 44px; }

  .salon{ grid-template-columns: 1fr; }
  .salon-media{ min-height: 320px; order:-1; }

  .sticky-cta{ display:block; }
  .site-footer{ padding-bottom: 90px; }
  .scroll-cue{ bottom: 96px; }
}

@media (max-width: 620px){
  .hero-cta{ flex-direction:column; align-items: stretch; }
  .hero-cta .btn{ text-align:center; }
  .booking-steps{ gap: 0; }
  .step-label{ display:none; }
  .booking-steps li{ min-width:auto; justify-content:center; flex:1; }
  .booking-nav{ flex-wrap:wrap; }
  .booking-summary{ order:3; width:100%; text-align:center; }
  .lookbook-grid{ grid-template-columns: 1fr; }
  .option-grid, .option-grid--staff{ grid-template-columns: repeat(2,1fr); }
  .time-grid{ grid-template-columns: repeat(2,1fr); }
}