/* ==========================================================================
   JOSEPH VILLA MORRA — Luxury Hair Atelier
   Design system: silent luxury, editorial typography, generous negative space
   ========================================================================== */

:root{
  --cream:  #F8F6F3;
  --warm:   #EDE8E1;
  --sand:   #D8D1C7;
  --charcoal: #151515;
  --black:  #000000;
  --accent: #B89562;
  --accent-soft: #cbb08a;
  --white: #ffffff;

  --ink: var(--charcoal);
  --surface: var(--cream);
  --surface-alt: var(--warm);
  --line: rgba(21,21,21,0.12);

  --font-display: 'Bodoni MT', 'Didot', 'Big Caslon', Georgia, 'Times New Roman', serif;
  --font-display-black: 'Bodoni MT Black', 'Bodoni MT', 'Didot', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --container: 1280px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.22,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-fast: .35s;
  --dur: .6s;
  --dur-slow: 1.1s;

  --nav-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: auto; }
body{
  margin:0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background:none; border:none; cursor:pointer; padding:0; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,dl,dd,figure,blockquote{ margin:0; }
input, textarea{ font: inherit; color: inherit; background: none; }
::selection{ background: var(--accent); color: var(--white); }

.container{ max-width: var(--container); margin-inline:auto; padding-inline: var(--gutter); }
.container--narrow{ max-width: var(--container-narrow); }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:999;
  background: var(--charcoal); color:var(--cream); padding: .75rem 1.25rem;
}
.skip-link:focus{ left: var(--gutter); top: var(--gutter); }

/* ---------- Typography ---------- */
.eyebrow{
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
h1,h2,h3{ font-family: var(--font-display); font-weight:400; color: var(--charcoal); }
h1{ font-size: clamp(2.4rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -.01em; }
h1 em{ font-style: italic; color: var(--accent); }
h2{ font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.1; }
h3{ font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.25; }

.section-head{ max-width: 640px; margin-bottom: var(--space-5); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head__lead{ margin-top: var(--space-2); color: rgba(21,21,21,.68); font-size:1.05rem; max-width: 46ch; }
.section-head--center .section-head__lead{ margin-inline:auto; }

section{ padding-block: var(--space-7); position:relative; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding: .95em 2em;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: var(--radius);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
}
.btn--primary{ background: var(--charcoal); color: var(--cream); }
.btn--primary:hover{ background: var(--accent); }
.btn--outline{ border-color: var(--charcoal); color: var(--charcoal); }
.btn--outline:hover{ background: var(--charcoal); color: var(--cream); }
.btn--ghost{ border-color: var(--line); color: var(--charcoal); }
.btn--text{ text-transform:none; letter-spacing:0; font-size:.92rem; padding:0; color: var(--accent); border-bottom: 1px solid transparent; }
.btn--text:hover{ border-color: var(--accent); }
.btn--lg{ padding: 1.15em 2.6em; font-size:.82rem; }
.btn--sm{ padding:.7em 1.3em; font-size:.7rem; }
.btn--full{ width:100%; }
.btn:active{ transform: scale(.97); }

/* ---------- Cursor (desktop only) ---------- */
.cursor-dot, .cursor-ring{
  position: fixed; left:0; top:0; pointer-events:none; z-index: 999;
  border-radius:50%; transform: translate(-50%,-50%);
  transition: opacity .3s;
  display:none;
}
.cursor-dot{ width:6px; height:6px; background: var(--accent); }
.cursor-ring{ width:34px; height:34px; border:1px solid var(--accent); transition: width .25s var(--ease), height .25s var(--ease), opacity .3s, background .25s; }
@media (hover:hover) and (pointer:fine){
  .cursor-dot, .cursor-ring{ display:block; }
}
.cursor-ring.is-active{ width:56px; height:56px; background: rgba(184,149,98,.12); }

/* ---------- Scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; width:100%; height:2px; z-index:900; background:transparent; }
.scroll-progress span{ display:block; height:100%; width:0%; background: var(--accent); transition: width .1s linear; }

/* ---------- Navbar ---------- */
.navbar{
  position: fixed; top:0; left:0; width:100%; z-index: 500;
  transition: background var(--dur) var(--ease), box-shadow var(--dur), padding var(--dur);
}
.navbar__inner{
  display:flex; align-items:center; justify-content:space-between; gap: var(--space-3);
  padding: 1.6rem var(--gutter);
  transition: padding var(--dur) var(--ease);
}
.navbar.is-scrolled{ background: rgba(248,246,243,.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line); }
.navbar.is-scrolled .navbar__inner{ padding-block: 1rem; }
.navbar.is-hero-dark:not(.is-scrolled) .navbar__wordmark,
.navbar.is-hero-dark:not(.is-scrolled) .navbar__nav a{ color: var(--cream); }
.navbar.is-hero-dark:not(.is-scrolled) .navbar__burger span{ background: var(--cream); }
/* Logo artwork is black-on-transparent: invert to white while it sits over the
   dark, transparent hero navbar; drop the filter once the bar turns light/cream. */
.navbar.is-hero-dark:not(.is-scrolled) .navbar__logo-mark{ filter: invert(1) brightness(1.4); }

.navbar__brand{ display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.navbar__logo-mark{ height: 34px; width:auto; transition: filter var(--dur); }
.navbar__wordmark{
  font-family: var(--font-body); font-size:.58rem; letter-spacing:.24em;
  text-transform:uppercase; color: var(--accent); transition: color var(--dur);
}
.navbar__wordmark--tag{ padding-top:0; }
.navbar__wordmark em{ font-style:normal; font-family: var(--font-body); font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color: var(--accent); }

.navbar__nav{ display:none; gap: clamp(1rem,2vw,2.2rem); }
.navbar__nav a{
  font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color: var(--charcoal);
  position:relative; padding-bottom:4px; transition: color var(--dur);
}
.navbar__nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--accent);
  transition: width var(--dur-fast) var(--ease);
}
.navbar__nav a:hover::after{ width:100%; }

.navbar__actions{ display:none; align-items:center; gap:.75rem; }
.navbar__actions [data-open-cart] span{ color: var(--accent); margin-left:.2em; }

.navbar__burger{ display:flex; flex-direction:column; gap:5px; width:26px; }
.navbar__burger span{ display:block; height:1px; background: var(--charcoal); transition: background var(--dur); }

.navbar__mobile{
  display:flex; flex-direction:column; gap:0;
  max-height:0; overflow:hidden; background: var(--cream);
  transition: max-height var(--dur) var(--ease);
}
.navbar__mobile a{ padding: 1rem var(--gutter); border-top:1px solid var(--line); font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; }
.navbar.is-menu-open .navbar__mobile{ max-height: 600px; }
.navbar.is-menu-open .navbar__burger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.navbar.is-menu-open .navbar__burger span:nth-child(2){ opacity:0; }
.navbar.is-menu-open .navbar__burger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 980px){
  .navbar__nav{ display:flex; }
  .navbar__actions{ display:flex; }
  .navbar__burger{ display:none; }
  .navbar__mobile{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height: 100svh;
  background: linear-gradient(180deg, #1c1a17 0%, var(--charcoal) 60%);
  color: var(--cream); overflow:hidden;
}
.hero__grain{
  position:absolute; inset:0; opacity:.5; pointer-events:none; z-index:1;
  background-image: radial-gradient(rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 3px 3px;
}

/* -- Media: top band on mobile, full-bleed right panel on desktop -- */
.hero__media{ position:relative; width:100%; height:44vh; min-height:280px; overflow:hidden; }
.hero__media-tilt{ position:absolute; inset:0; transform-style:preserve-3d; transition: transform .5s var(--ease); }
.hero__media-img{
  width:100%; height:100%; object-fit:cover; display:block; transform-origin:center;
  animation: heroKenBurns 22s ease-in-out infinite alternate;
}
@keyframes heroKenBurns{ from{ transform:scale(1); } to{ transform:scale(1.09); } }
.hero__media-fade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(0deg, var(--charcoal) 2%, rgba(21,21,21,.15) 42%, transparent 70%);
}
.hero__media-caption{
  position:absolute; left: var(--gutter); bottom: 1.25rem; z-index:2;
  display:flex; flex-direction:column; gap:.15rem;
  font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color: var(--cream);
}
.hero__media-caption span:last-child{ color: var(--accent-soft); }

/* -- Content -- */
.hero__content{ position:relative; z-index:2; padding: var(--space-5) var(--gutter) var(--space-5); }
.hero__monogram{
  position:absolute; z-index:0; top:-2.4rem; left:-1.2rem; pointer-events:none;
  font-family: var(--font-display); font-size: clamp(9rem, 32vw, 20rem); line-height:1;
  color: rgba(248,246,243,.05); user-select:none;
}
.hero__content > *:not(.hero__monogram){ position:relative; z-index:1; }

.hero__eyebrow{ position:relative; color: var(--accent-soft); padding-bottom:.9rem; }
.hero__eyebrow::after{
  content:''; display:block; margin-top:.6rem; height:1px; width:0; background: var(--accent);
  transition: width 1.1s var(--ease) .25s;
}
.hero__eyebrow.is-visible::after{ width:64px; }
.hero__eyebrow::before{
  content:''; position:absolute; left:61px; bottom:-3px; width:6px; height:6px; background: var(--accent);
  transform: rotate(45deg) scale(0); transition: transform .45s var(--ease) 1.3s;
}
.hero__eyebrow.is-visible::before{ transform: rotate(45deg) scale(1); }

.hero__title{ color: var(--cream); margin-bottom: var(--space-2); font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height:1.1; }
.hero__title-line{ display:block; }
.hero__title .word-mask{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.16em; margin-bottom:-.16em; }
.hero__title .word{
  display:inline-block; transform: translateY(112%);
  transition: transform 1.05s cubic-bezier(.16,1,.3,1);
}
.hero__title .word.is-in{ transform:translateY(0); }

/* Accent line: heavier display cut + slow gold sheen sweep once revealed */
.hero__title-line--accent .word{
  font-family: var(--font-display-black);
  background: linear-gradient(100deg, var(--accent) 28%, #f4e3bd 50%, var(--accent) 72%);
  background-size: 260% 100%; background-position: 200% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.hero__title-line--accent .word.is-in{
  animation: heroShimmer 7s ease-in-out .9s infinite;
}
@keyframes heroShimmer{
  0%{ background-position: 200% 0; }
  45%, 100%{ background-position: -160% 0; }
}

.hero__subtitle{ max-width: 46ch; font-size: 1.08rem; color: rgba(248,246,243,.78); margin-bottom: var(--space-3); }
.hero__actions{ display:flex; flex-wrap:wrap; gap: 1rem; margin-bottom: var(--space-2); }
.hero__actions .btn--outline{ border-color: rgba(248,246,243,.5); color: var(--cream); }
.hero__actions .btn--outline:hover{ background: var(--cream); color: var(--charcoal); }
.hero__meta{ display:flex; flex-wrap:wrap; gap: 1.5rem; font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color: rgba(248,246,243,.55); }

/* -- Rotating brand seal (desktop only, signature flourish) -- */
.hero__seal{ display:none; }
@media (min-width: 980px){
  .hero__seal{
    display:block; position:absolute; z-index:3; right:44.5%; bottom:16%;
    width:128px; height:128px; transform: translateX(50%);
  }
}
.hero__seal-ring{ position:absolute; inset:0; display:block; animation: sealSpin 26s linear infinite; }
.hero__seal-ring svg{ width:100%; height:100%; }
.hero__seal-ring circle{ fill: rgba(21,21,21,.55); }
.hero__seal-ring text{ font-family: var(--font-body); font-size:10px; letter-spacing:2.5px; }
.hero__seal-ring textPath{ fill: rgba(248,246,243,.85); }
.hero__seal-dot{
  position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:50%;
  background: var(--charcoal); border:1px solid rgba(248,246,243,.3);
}
@keyframes sealSpin{ to{ transform: rotate(360deg); } }

/* -- Ticker marquee -- */
.hero__marquee{
  position:relative; z-index:4; height:42px; overflow:hidden; display:flex; align-items:center;
  background: rgba(15,14,12,.6); border-top:1px solid rgba(248,246,243,.12);
}
.hero__marquee-track{
  display:flex; align-items:center; gap:1.4rem; white-space:nowrap;
  animation: heroMarquee 40s linear infinite;
}
.hero__marquee-track span{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color: rgba(248,246,243,.7); }
.hero__marquee-track i{ width:4px; height:4px; border-radius:50%; background: var(--accent); flex-shrink:0; }
@keyframes heroMarquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.hero__scroll-cue{
  position:absolute; bottom: 62px; left:50%; transform: translateX(-50%);
  width:1px; height:40px; background: rgba(248,246,243,.3); z-index:5;
}
.hero__scroll-cue span{
  position:absolute; top:0; left:-2px; width:5px; height:14px; background: var(--accent);
  animation: scrollCue 2.2s var(--ease) infinite;
}
@keyframes scrollCue{ 0%{ top:0; opacity:1;} 80%{ opacity:0; } 100%{ top:32px; opacity:0; } }

@media (min-width: 980px){
  .hero{ display:block; }
  .hero__media{ position:absolute; inset:0; left:46%; width:54%; height:100%; }
  .hero__media-fade{ background: linear-gradient(90deg, var(--charcoal) 0%, rgba(21,21,21,.2) 34%, transparent 62%); }
  .hero__content{
    position:absolute; top:50%; left:0; transform: translateY(-50%);
    max-width:620px; width:100%; box-sizing:border-box;
    padding: 0 var(--gutter);
  }
  .hero__marquee{ position:absolute; left:0; right:0; bottom:0; }
  .hero__media-caption{ bottom: calc(42px + 1.5rem); }
}

/* ---------- Reveal-on-scroll ---------- */
[data-reveal]{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); }
[data-reveal].is-visible{ opacity:1; transform:none; }

/* ---------- Services ---------- */
.services__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 1rem;
}
.service-card{ background: var(--white); border:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; transition: box-shadow var(--dur), transform var(--dur); }
.service-card:hover{ box-shadow: 0 24px 48px -24px rgba(21,21,21,.25); transform: translateY(-6px); }
.service-card__media{ aspect-ratio: 4/5; overflow:hidden; background: var(--warm); }
.service-card__media--wide{ aspect-ratio: 16/8; }
.service-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform 1.2s var(--ease-soft); }
.service-card:hover .service-card__media img{ transform: scale(1.06); }
.service-card__body{ padding: var(--space-3); flex:1; display:flex; flex-direction:column; gap:.65rem; }
.service-card__body p{ color: rgba(21,21,21,.65); font-size:.94rem; flex:1; }
.service-card__meta{ display:flex; justify-content:space-between; font-size:.78rem; letter-spacing:.05em; color: var(--accent); border-top:1px solid var(--line); padding-top:.65rem; }

.services__chips{ margin-top: var(--space-5); display:flex; flex-wrap:wrap; align-items:center; gap: .75rem 1rem; }
.services__chips p{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: rgba(21,21,21,.5); }
.services__chips ul{ display:flex; flex-wrap:wrap; gap:.6rem; }
.services__chips li{ font-size:.82rem; padding:.5em 1.1em; border:1px solid var(--line); border-radius:999px; }

/* ---------- Transformations ---------- */
.transform-gallery{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-6);
}
.transform-gallery__item{ position:relative; overflow:hidden; background: var(--warm); }
.transform-gallery__item img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease-soft); }
.transform-gallery__item:hover img{ transform: scale(1.05); }
.transform-gallery__item--tall{ aspect-ratio: 4/5.6; }
.transform-gallery__item:not(.transform-gallery__item--tall){ aspect-ratio: 4/5; }
.transform-gallery__item figcaption{
  position:absolute; left:0; right:0; bottom:0; padding: 1.4rem 1.1rem .9rem;
  background: linear-gradient(0deg, rgba(0,0,0,.6), transparent);
  color: var(--cream); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase;
}
@media (min-width: 720px){
  .transform-gallery{ grid-template-columns: repeat(4, 1fr); }
}

.compare{ max-width: 520px; margin-inline:auto; text-align:center; }
.compare__label{ font-size:.85rem; color: rgba(21,21,21,.6); margin-bottom: var(--space-3); }
.compare__frame{ position:relative; aspect-ratio: 4/5; overflow:hidden; user-select:none; background:var(--warm); }
.compare__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.compare__before-wrap{ position:absolute; inset:0; width:50%; overflow:hidden; }
.compare__before-wrap img{ width: var(--frame-w, 520px); max-width:none; }
.compare__before--muted{ filter: grayscale(.85) brightness(.92) contrast(.92) saturate(.4); }
.compare__handle{
  position:absolute; top:0; bottom:0; left:50%; width:2px; background: var(--cream);
  transform: translateX(-50%); display:flex; align-items:center; justify-content:center;
}
.compare__handle span{
  width:38px; height:38px; border-radius:50%; background: var(--cream);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.compare__handle span::before{ content:'◂ ▸'; font-size:.7rem; letter-spacing:2px; color: var(--charcoal); }
.compare__tag{ position:absolute; top:1rem; font-size:.65rem; letter-spacing:.14em; text-transform:uppercase; color: var(--cream); background: rgba(21,21,21,.55); padding:.4em .9em; }
.compare__tag--before{ left:1rem; }
.compare__tag--after{ right:1rem; }
.compare__range{ width:100%; margin-top: var(--space-3); accent-color: var(--accent); }

/* ---------- Experience ---------- */
.experience__grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 1rem; margin-bottom: var(--space-6); }
.experience__item{ border-top: 1px solid var(--line); padding-top: var(--space-2); }
.experience__index{ font-family: var(--font-display); font-size:1.6rem; color: var(--accent); display:block; margin-bottom:.4rem; }
.experience__item p{ color: rgba(21,21,21,.65); margin-top:.4rem; font-size:.95rem; }

.experience__feature{ display:grid; gap: var(--space-4); align-items:center; }
.experience__feature-media{ aspect-ratio: 4/5; overflow:hidden; max-width:420px; }
.experience__feature-media img{ width:100%; height:100%; object-fit:cover; }
.experience__feature-copy p:not(.eyebrow){ color: rgba(21,21,21,.68); margin: var(--space-2) 0 var(--space-3); max-width:42ch; }
@media (min-width: 860px){
  .experience__feature{ grid-template-columns: .8fr 1fr; }
}

/* ---------- Team / Especialidades ---------- */
.team__grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 1rem; }
.team-card{ text-align:left; }
.team-card__media{ aspect-ratio: 4/5; overflow:hidden; margin-bottom: var(--space-2); background: var(--warm); }
.team-card__media img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease-soft), filter .6s; filter: grayscale(.15); }
.team-card:hover .team-card__media img{ transform: scale(1.05); filter: grayscale(0); }
.team-card p{ color: rgba(21,21,21,.65); font-size:.92rem; margin: .35rem 0 .75rem; }

/* ---------- Shop ---------- */
.shop__filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: var(--space-4); }
.chip{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; padding:.6em 1.3em; border:1px solid var(--line); border-radius:999px; transition: background var(--dur-fast), color var(--dur-fast); }
.chip.is-active, .chip:hover{ background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

.shop__grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); gap: 1rem; }
.product-card{ background: var(--white); border:1px solid var(--line); padding: var(--space-3); transition: box-shadow var(--dur), transform var(--dur); }
.product-card:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(21,21,21,.25); }
.product-card.is-hidden{ display:none; }
.product-card__media{ aspect-ratio: 1/1; display:flex; align-items:center; justify-content:center; background: var(--warm); margin-bottom: var(--space-2); }
.product-card__bottle{ position:relative; width:56px; height:96px; background: linear-gradient(160deg, var(--sand), var(--accent-soft)); border-radius: 6px 6px 3px 3px; }
.product-card__bottle::before{ content:''; position:absolute; top:-14px; left:50%; transform:translateX(-50%); width:20px; height:16px; background: var(--charcoal); border-radius:2px; }
.product-card__bottle--jar{ width:78px; height:64px; border-radius: 10px; }
.product-card__bottle--jar::before{ width:40px; height:8px; top:-6px; border-radius:2px; }
.product-card__bottle--drop{ width:44px; height:88px; border-radius: 50% 50% 8px 8px; }
.product-card h3{ font-size:1.05rem; margin-bottom:.35rem; }
.product-card p{ color: rgba(21,21,21,.6); font-size:.88rem; margin-bottom:.75rem; }
.product-card__meta{ font-size:.85rem; color: var(--accent); margin-bottom:.75rem; display:block; }
.shop__note{ margin-top: var(--space-4); font-size:.8rem; color: rgba(21,21,21,.5); text-align:center; }

/* ---------- Hair test ---------- */
.hairtest__widget{ background: var(--white); border:1px solid var(--line); padding: var(--space-4); }
.hairtest__progress{ height:2px; background: var(--line); margin-bottom: var(--space-4); }
.hairtest__progress span{ display:block; height:100%; width:20%; background: var(--accent); transition: width var(--dur) var(--ease); }
.hairtest__step{ display:none; }
.hairtest__step.is-active{ display:block; animation: fadeUp .5s var(--ease); }
.hairtest__step h3{ margin-bottom: var(--space-3); }
.hairtest__options{ display:grid; gap:.75rem; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.hairtest__options button{ text-align:left; padding: 1em 1.2em; border:1px solid var(--line); transition: border-color var(--dur-fast), background var(--dur-fast); }
.hairtest__options button:hover, .hairtest__options button.is-selected{ border-color: var(--accent); background: var(--warm); }
.hairtest__result{ display:none; }
.hairtest__result.is-active{ display:block; animation: fadeUp .5s var(--ease); }
.hairtest__result h3{ margin: .5rem 0 1rem; }
.hairtest__result p:not(.eyebrow){ color: rgba(21,21,21,.68); max-width:60ch; margin-bottom: var(--space-3); }
.hairtest__result-actions{ display:flex; gap:1rem; flex-wrap:wrap; }
@keyframes fadeUp{ from{ opacity:0; transform: translateY(14px);} to{ opacity:1; transform:none; } }

/* ---------- Testimonials ---------- */
.testimonials__track{
  display:flex; gap: var(--space-3); overflow-x:auto; padding-bottom: var(--space-3); margin-bottom: var(--space-4);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.testimonial-card{
  scroll-snap-align:start; flex: 0 0 min(340px,80vw); background: var(--white); border:1px solid var(--line);
  padding: var(--space-4); display:flex; flex-direction:column; gap: var(--space-3);
}
.testimonial-card p{ font-family: var(--font-display); font-size:1.2rem; line-height:1.4; }
.testimonial-card footer{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: var(--accent); }

/* ---------- Memberships ---------- */
.memberships__grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: var(--space-4); align-items:stretch; }
.membership-card{ background: var(--white); border:1px solid var(--line); padding: var(--space-4); text-align:center; display:flex; flex-direction:column; }
.membership-card--featured{ background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); transform: scale(1.02); }
.membership-card__badge{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color: var(--accent-soft); margin-bottom:.75rem; }
.membership-card__price{ font-family: var(--font-display); font-size:1.6rem; margin: .75rem 0 var(--space-3); }
.membership-card__price span{ font-family: var(--font-body); font-size:.75rem; color: rgba(21,21,21,.5); }
.membership-card--featured .membership-card__price span{ color: rgba(248,246,243,.55); }
.membership-card ul{ display:flex; flex-direction:column; gap:.6rem; margin-bottom: var(--space-4); text-align:left; flex:1; }
.membership-card li{ font-size:.9rem; padding-left:1.2em; position:relative; }
.membership-card li::before{ content:'—'; position:absolute; left:0; color: var(--accent); }
.membership-card--featured .btn--primary{ background: var(--accent); }

/* ---------- Contact ---------- */
.contact__grid{ display:grid; gap: var(--space-4); }
.contact__info dl{ display:flex; flex-direction:column; gap: var(--space-3); margin-bottom: var(--space-4); }
.contact__info dt{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); margin-bottom:.35rem; }
.contact__info dd{ margin:0; font-size:1rem; }
.contact__info a:hover{ color: var(--accent); }
.contact__actions{ display:flex; flex-wrap:wrap; gap:1rem; }
.contact__map-visual{
  position:relative; aspect-ratio: 4/3; background:
    linear-gradient(135deg, var(--warm), var(--sand));
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.contact__map-visual::before{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 32px 32px;
}
.contact__map-pin{ position:relative; width:14px; height:14px; border-radius:50% 50% 50% 0; background: var(--accent); transform: rotate(-45deg); }
.contact__map-label{ position:absolute; bottom: var(--space-3); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; background: var(--white); padding:.5em 1em; }
@media (min-width: 900px){
  .contact__grid{ grid-template-columns: 1fr 1fr; }
}

/* ---------- Footer ---------- */
.footer{ background: var(--charcoal); color: rgba(248,246,243,.75); padding-block: var(--space-5) var(--space-3); }
.footer__inner{ display:grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.footer__brand p{ margin-top:.75rem; font-size:.88rem; max-width:32ch; color: rgba(248,246,243,.55); }
.footer__brand .navbar__wordmark{ color: var(--accent-soft); }
.footer__logo-mark{ height:44px; width:auto; filter: invert(1) brightness(1.4); }
.footer__nav, .footer__social{ display:flex; flex-direction:column; gap:.65rem; font-size:.85rem; }
.footer__nav a:hover, .footer__social a:hover{ color: var(--accent); }
.footer__bottom{ border-top:1px solid rgba(248,246,243,.12); padding-top: var(--space-3); font-size:.75rem; color: rgba(248,246,243,.4); }
@media (min-width: 720px){
  .footer__inner{ grid-template-columns: 2fr 1fr 1fr; }
}

/* ---------- Mobile floating bar ---------- */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:400;
  display:flex; background: var(--white); border-top:1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(0,0,0,.06);
}
.mobile-bar a, .mobile-bar button{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.25rem;
  padding: .75rem 0 .9rem; font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
}
.mobile-bar__icon{ color: var(--accent); font-size:1rem; }
@media (min-width: 980px){ .mobile-bar{ display:none; } }

/* ---------- Modals (booking / cart) ---------- */
.modal{ position:fixed; inset:0; z-index:800; visibility:hidden; }
.modal[data-state="open"]{ visibility:visible; }
.modal__overlay{
  position:absolute; inset:0; background: rgba(21,21,21,.55); opacity:0; transition: opacity var(--dur) var(--ease);
  backdrop-filter: blur(2px);
}
.modal[data-state="open"] .modal__overlay{ opacity:1; }
.modal__panel{
  position:absolute; right:0; top:0; height:100%; width:min(520px,100%);
  background: var(--surface); overflow-y:auto; overflow-x:hidden; padding: var(--space-4);
  transform: translateX(100%); transition: transform var(--dur) var(--ease);
  box-sizing:border-box;
}
.modal[data-state="open"] .modal__panel{ transform: translateX(0); }
.modal__close{ position:sticky; top:0; float:right; font-size:1rem; margin-bottom:1rem; }

.booking__title{ margin-bottom: var(--space-4); clear:both; }
.booking__progress{ height:2px; background: var(--line); margin-bottom: var(--space-4); }
.booking__progress span{ display:block; height:100%; width:calc(100%/6); background: var(--accent); transition: width var(--dur) var(--ease); }
.booking__step{ display:none; }
.booking__step.is-active{ display:block; animation: fadeUp .4s var(--ease); }
.booking__step-label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: var(--accent); margin-bottom: var(--space-3); }
.booking__grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin-bottom: var(--space-3); min-width:0; }
.booking__grid button{ min-width:0; }
.booking__grid--times{ grid-template-columns: repeat(3,1fr); }
.booking__grid button{ padding: .9em 1em; border:1px solid var(--line); text-align:center; font-size:.88rem; transition: border-color var(--dur-fast), background var(--dur-fast); }
.booking__grid button:hover, .booking__grid button.is-selected{ border-color: var(--accent); background: var(--warm); }
.booking__fields{ display:grid; gap: var(--space-2); grid-template-columns: 1fr 1fr; min-width:0; }
.field{ display:flex; flex-direction:column; gap:.4rem; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color: rgba(21,21,21,.55); min-width:0; }
.field--full{ grid-column: 1/-1; }
.field input, .field textarea{ width:100%; min-width:0; box-sizing:border-box; border:1px solid var(--line); padding:.8em 1em; font-size:.95rem; text-transform:none; letter-spacing:normal; color: var(--ink); background: var(--white); }
.field input:focus, .field textarea:focus{ outline: 1px solid var(--accent); }
.booking__summary{ background: var(--white); border:1px solid var(--line); padding: var(--space-3); font-size:.9rem; display:flex; flex-direction:column; gap:.5rem; margin-bottom: var(--space-3); }
.booking__summary div{ display:flex; justify-content:space-between; gap:1rem; border-bottom:1px dashed var(--line); padding-bottom:.4rem; }
.booking__hint{ font-size:.8rem; color: rgba(21,21,21,.55); }
.booking__nav{ display:flex; gap:1rem; margin-top: var(--space-4); position:sticky; bottom:0; background: var(--surface); padding-top: var(--space-2); }
.booking__nav [data-booking-back]{ flex:0 0 auto; }
.booking__nav [data-booking-next], .booking__nav [data-booking-submit]{ flex:1; }

.cart__items{ display:flex; flex-direction:column; gap: var(--space-3); margin-bottom: var(--space-3); }
.cart__item{ display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); padding-bottom: var(--space-2); }
.cart__item-remove{ color: var(--accent); font-size:.78rem; text-decoration:underline; }
.cart__total{ display:flex; justify-content:space-between; align-items:center; padding-block: var(--space-3); border-top:1px solid var(--line); margin-bottom: var(--space-3); }
.cart__empty{ color: rgba(21,21,21,.5); }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom: 96px; transform: translate(-50%, 20px);
  background: var(--charcoal); color: var(--cream); padding: .9em 1.6em; font-size:.85rem;
  opacity:0; pointer-events:none; transition: opacity var(--dur-fast), transform var(--dur-fast); z-index:950;
}
.toast.is-visible{ opacity:1; transform: translate(-50%, 0); }
@media (min-width: 980px){ .toast{ bottom: 32px; } }

/* ---------- Magnetic buttons ---------- */
.magnetic{ will-change: transform; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1; transform:none; }
}