/* ==========================================================================
   4 ГРАНИ ЛАБ — design tokens & base
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Unbounded:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root{
  /* --- surfaces (grounded in the salon's own loft-dark interior) --- */
  --bg-void:      #0b0a0f;
  --bg-surface:   #15131b;
  --bg-elevated:  #1d1a25;
  --bg-card:      #1a1721;
  --bg-card-hi:   #221e2c;

  /* --- lines --- */
  --line:         rgba(244,241,236,0.09);
  --line-strong:  rgba(244,241,236,0.16);
  --line-violet:  rgba(181,101,240,0.35);

  /* --- text --- */
  --text-hi:      #f5f1ea;
  --text-body:    #cdc5d6;
  --text-muted:   #8d8496;
  --text-faint:   #8d8496; /* kept >= 4.5:1 on every surface token — do not darken without re-checking contrast */

  /* --- accents (from the photographed neon sign + marble/floral tones) --- */
  --violet:       #b565f0;
  --violet-glow:  #dba6ff;
  --violet-deep:  #5c2a94;
  --violet-ink:   #2a1640;
  --gold:         #cca875;
  --gold-soft:    #e4cda3;
  --rose:         #e3a7c2;

  /* --- semantic --- */
  --ok:           var(--violet-glow);
  --ring:         var(--violet);

  /* --- type --- */
  --f-display: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-accent:  'Unbounded', 'Manrope', sans-serif;
  --f-body:    'Manrope', 'Segoe UI', sans-serif;

  /* --- scale --- */
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.9rem);
  --step-3: clamp(1.9rem, 1.55rem + 1.6vw, 2.8rem);
  --step-4: clamp(2.6rem, 2rem + 2.8vw, 4.2rem);
  --step-5: clamp(3.4rem, 2.4rem + 4.6vw, 6.4rem);

  /* --- spacing rhythm (spacious, per editorial density) --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.75rem;
  --sp-4: 2.75rem;
  --sp-5: 4.5rem;
  --sp-6: 7rem;
  --sp-7: 10rem;

  --container: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --dur-fast: 180ms;
  --dur-med: 420ms;
  --dur-slow: 800ms;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
  --ease-in-out: cubic-bezier(0.65,0,0.35,1);

  --radius-s: 2px;
  --radius-m: 4px;
  color-scheme: dark;
}

/* facet clip-paths — the recurring "cut corner" motif standing in for border-radius */
:root{
  --facet-card:  polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  --facet-lg:    polygon(0 28px, 28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%);
  --facet-sm:    polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}

*, *::before, *::after{ box-sizing: border-box; }
html{
  background: var(--bg-void);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin:0;
  min-height: 100dvh;
  background: var(--bg-void);
  color: var(--text-body);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p,figure{ margin:0; }
svg{ display:block; }

::selection{ background: var(--violet-deep); color: var(--text-hi); }

:focus-visible{
  outline: 2px solid var(--violet-glow);
  outline-offset: 3px;
  border-radius: 2px;
}

/* subtle grain + vignette on the whole page for a filmic loft feel */
body::before{
  content:"";
  position: fixed; inset:0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/></svg>");
  mix-blend-mode: overlay;
  opacity: .5;
}

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

.eyebrow{
  font-family: var(--f-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--violet-glow);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width: 22px; height:1px;
  background: linear-gradient(90deg, var(--violet), transparent);
}
.eyebrow.center{ justify-content:center; }
.eyebrow.center::before{ display:none; }

.section-head{
  max-width: 46rem;
  margin-bottom: var(--sp-5);
}
.section-head.center{ margin-inline:auto; text-align:center; }
.section-title{
  font-family: var(--f-display);
  font-weight: 500;
  font-size: var(--step-4);
  line-height: 1.05;
  color: var(--text-hi);
  margin-top: var(--sp-2);
  letter-spacing: -0.01em;
}
.section-title em{
  font-style: italic;
  color: var(--violet-glow);
  font-weight: 500;
}
.section-sub{
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--step-1);
  max-width: 38rem;
}
.section-head.center .section-sub{ margin-inline:auto; }

section{ position: relative; }
.pad-section{ padding-block: var(--sp-6); }
@media (max-width:720px){
  .pad-section{ padding-block: var(--sp-5); }
}

.divider-facet{
  height: 34px;
  margin-inline:auto;
  max-width: var(--container);
  padding-inline: var(--gutter);
}
.divider-facet svg{ width:100%; height:100%; overflow:visible; }
.divider-facet path{
  stroke: var(--line-strong);
  stroke-width:1;
  fill:none;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
}
.divider-facet.in-view path{
  transition: stroke-dashoffset 1.1s var(--ease-out);
  stroke-dashoffset:0;
}

/* ---------- buttons ---------- */
.btn{
  --btn-fg: var(--bg-void);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family: var(--f-accent);
  font-size: 0.78rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform: uppercase;
  padding: 1em 1.9em;
  clip-path: var(--facet-sm);
  cursor:pointer;
  border:none;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), background var(--dur-fast);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-primary{
  background: linear-gradient(135deg, var(--violet-glow), var(--violet));
  color:#140a1e;
  box-shadow: 0 0 0 rgba(181,101,240,0);
}
.btn-primary:hover{
  box-shadow: 0 8px 30px -6px rgba(181,101,240,.65);
  transform: translateY(-2px);
}
.btn-ghost{
  background: transparent;
  color: var(--text-hi);
  border:1px solid var(--line-strong);
}
.btn-ghost:hover{ border-color: var(--violet); color: var(--violet-glow); }
.btn-sm{ padding:.75em 1.4em; font-size:.68rem; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family: var(--f-accent);
  font-size:.75rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color: var(--text-hi);
  border-bottom:1px solid var(--line-strong);
  padding-bottom:.3em;
  transition: color var(--dur-fast), border-color var(--dur-fast), gap var(--dur-fast);
}
.link-arrow svg{ width:14px; height:14px; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover{ color: var(--violet-glow); border-color: var(--violet); gap:.75em; }
.link-arrow:hover svg{ transform: translateX(3px); }

/* ==========================================================================
   Header
   ========================================================================== */
.header{
  position: fixed; inset-inline:0; top:0; z-index:100;
  padding-block: 1.35rem;
  transition: padding var(--dur-med) var(--ease-out), background var(--dur-med), border-color var(--dur-med);
  border-bottom: 1px solid transparent;
}
.header.scrolled{
  padding-block: .8rem;
  background: rgba(11,10,15,.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--line);
}
.header .container{ display:flex; align-items:center; justify-content:space-between; gap: var(--sp-3); }

.brand{ display:flex; align-items:center; gap:.7rem; flex-shrink:0; }
.brand-mark{
  font-family: var(--f-accent);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.02em;
  color: var(--text-hi);
  line-height:1;
  white-space: nowrap;
}
.brand-mark .num{
  color: var(--violet-glow);
  text-shadow: 0 0 14px rgba(219,166,255,.55);
}
.brand-sub{
  display:block;
  font-family: var(--f-body);
  font-size:.58rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color: var(--text-muted);
  margin-top:.15rem;
}

.nav-desktop{ display:flex; align-items:center; gap: clamp(1rem, 1.6vw, 1.7rem); }
.nav-desktop a{
  font-family: var(--f-accent);
  font-size:.72rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-body);
  position:relative; padding-block:.3rem;
}
.nav-desktop a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background: var(--violet-glow); transition: right var(--dur-med) var(--ease-out);
}
.nav-desktop a:hover{ color: var(--text-hi); }
.nav-desktop a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap: var(--sp-2); }
.header-phone{
  display:flex; flex-direction:column; align-items:flex-end;
  font-family: var(--f-accent); font-size:.82rem; color: var(--text-hi);
  white-space: nowrap;
}
.header-phone small{ font-family: var(--f-body); font-size:.6rem; letter-spacing:.15em; color: var(--text-muted); text-transform:uppercase; }

.burger{
  display:none;
  width:42px; height:42px;
  align-items:center; justify-content:center;
  background: var(--bg-card); border:1px solid var(--line-strong);
  clip-path: var(--facet-sm);
  cursor:pointer;
}
.burger span, .burger span::before, .burger span::after{
  content:""; display:block; width:18px; height:1.5px; background: var(--text-hi);
  position:relative; transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.burger span::before{ position:absolute; top:-6px; }
.burger span::after{ position:absolute; top:6px; }
.burger.active span{ background:transparent; }
.burger.active span::before{ transform: rotate(45deg) translate(-1px,0); top:0; }
.burger.active span::after{ transform: rotate(-45deg) translate(-1px,0); top:0; }

.nav-mobile{
  position: fixed; inset:0; z-index:99;
  background: var(--bg-void);
  display:flex; flex-direction:column; justify-content:center;
  padding: 6rem var(--gutter) var(--sp-5);
  transform: translateY(-8px);
  opacity:0; visibility:hidden;
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility 0s var(--dur-med);
}
.nav-mobile.open{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.nav-mobile ul{ display:flex; flex-direction:column; gap:1.1rem; }
.nav-mobile a{ font-family: var(--f-display); font-size:2.1rem; color: var(--text-hi); }
.nav-mobile .nav-mobile-foot{ margin-top: var(--sp-5); display:flex; flex-direction:column; gap:1rem; }

@media (max-width: 900px){
  .nav-desktop{ display:none; }
  .header-phone{ display:none; }
  .burger{ display:flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height: 100dvh;
  display:flex; align-items:flex-end;
  overflow:hidden;
  background: var(--bg-void);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position: 60% 30%;
  transform: scale(1.08);
  animation: hero-kb 22s var(--ease-in-out) infinite alternate;
  filter: saturate(1.05);
}
@keyframes hero-kb{ to{ transform: scale(1); } }
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(11,10,15,.35) 0%, rgba(11,10,15,.55) 45%, rgba(11,10,15,.96) 100%),
    linear-gradient(90deg, rgba(11,10,15,.75) 0%, rgba(11,10,15,.15) 55%);
}
.hero-glow{
  position:absolute; z-index:1; border-radius:50%;
  width:60vw; height:60vw; right:-16vw; top:-10vw;
  background: radial-gradient(circle, rgba(181,101,240,.28), transparent 65%);
  filter: blur(10px);
  pointer-events:none;
  animation: glow-pulse 6s ease-in-out infinite;
}
@keyframes glow-pulse{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

.hero-inner{ position:relative; z-index:2; width:100%; padding-block: 9rem var(--sp-6); }
.hero-badge{
  display:inline-flex; align-items:center; gap:.9rem;
  background: rgba(21,19,27,.6);
  border:1px solid var(--line-strong);
  backdrop-filter: blur(6px);
  padding:.55rem 1.1rem;
  clip-path: var(--facet-sm);
  margin-bottom: var(--sp-3);
  opacity:0; transform: translateY(14px);
}
.hero-badge .stars{ color: var(--gold-soft); font-size:.85rem; letter-spacing:.1em; }
.hero-badge b{ font-family: var(--f-accent); color: var(--text-hi); font-size:.85rem; }
.hero-badge span{ font-size:.78rem; color: var(--text-muted); }

.hero-title{
  font-family: var(--f-display);
  font-weight:500;
  font-size: var(--step-5);
  line-height:.98;
  color: var(--text-hi);
  max-width: 18ch;
}
.hero-title em{
  font-style:italic; font-weight:500;
  background: linear-gradient(100deg, var(--violet-glow), var(--rose) 60%, var(--gold-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* word-by-word reveal — each word slides up out of its own mask */
.hero-title .word-mask{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.1em; margin-bottom:-.1em; }
.hero-title .word{
  display:inline-block;
  transform: translateY(115%);
  opacity:0;
  filter: blur(6px);
}
.hero.is-ready .hero-title .word{
  animation: hero-word-in 900ms var(--ease-out) forwards;
  animation-delay: calc(200ms + var(--wi, 0) * 90ms);
}
@keyframes hero-word-in{
  to{ transform: translateY(0); opacity:1; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-title .word{ transform:none; opacity:1; filter:none; animation:none; }
}
.hero-sub{
  margin-top: var(--sp-3);
  max-width: 34rem;
  font-size: var(--step-1);
  color: var(--text-body);
  opacity:0; transform: translateY(18px);
}
.hero-cta{ margin-top: var(--sp-4); display:flex; flex-wrap:wrap; gap:1rem; align-items:center; opacity:0; transform: translateY(16px); }
.hero-facets{
  margin-top: var(--sp-5);
  display:grid; grid-template-columns: repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
  opacity:0; transform: translateY(16px);
}
.hero-facets a{
  padding: 1.1rem 1.2rem .3rem 0;
  display:flex; flex-direction:column; gap:.35rem;
  border-right:1px solid var(--line);
}
.hero-facets a:last-child{ border-right:none; padding-right:0; }
.hero-facets .fnum{ font-family: var(--f-accent); font-size:.68rem; color: var(--violet-glow); letter-spacing:.1em; }
.hero-facets .flabel{ font-family: var(--f-display); font-size:1.15rem; color: var(--text-hi); font-style:italic; }
.hero-facets a:hover .flabel{ color: var(--violet-glow); }

.hero.is-ready .hero-badge,
.hero.is-ready .hero-sub,
.hero.is-ready .hero-cta,
.hero.is-ready .hero-facets{
  opacity:1; transform:none;
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.hero.is-ready .hero-badge{ transition-delay:.05s; }
.hero.is-ready .hero-sub{ transition-delay:.6s; }
.hero.is-ready .hero-cta{ transition-delay:.74s; }
.hero.is-ready .hero-facets{ transition-delay:.86s; }

.scroll-cue{
  position:absolute; right: var(--gutter); bottom: var(--sp-3); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-family: var(--f-accent); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color: var(--text-muted);
}
.scroll-cue .line{ width:1px; height:38px; background: linear-gradient(var(--violet-glow), transparent); animation: scrollline 2.2s ease-in-out infinite; }
@keyframes scrollline{ 0%{ transform-origin:top; transform:scaleY(0);} 50%{transform-origin:top; transform:scaleY(1);} 51%{transform-origin:bottom; transform:scaleY(1);} 100%{transform-origin:bottom; transform:scaleY(0);} }

@media (max-width:900px){
  .hero-facets{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hero-facets a:nth-child(2){ border-right:none; }
  .scroll-cue{ display:none; }
}

/* ==========================================================================
   Reveal utility (JS adds .in-view)
   ========================================================================== */
[data-reveal]{
  opacity:0; transform: translateY(34px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), clip-path .9s var(--ease-out);
}
[data-reveal].in-view{ opacity:1; transform:none; }
[data-reveal-stagger] > *{ transition-delay: calc(var(--i,0) * 90ms); }
[data-reveal="facet"]{ clip-path: inset(0 0 100% 0); }
[data-reveal="facet"].in-view{ clip-path: inset(0 0 0% 0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
  .hero-media img{ animation:none; transform:none; }
  .hero-glow{ animation:none; }
  .scroll-cue .line{ animation:none; }
}

/* ==========================================================================
   About / Space
   ========================================================================== */
.about{ background: var(--bg-void); }
.about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items:center; }
.about-copy p{ margin-top: var(--sp-3); color: var(--text-body); }
.about-copy p:first-of-type{ margin-top: var(--sp-4); }
.about-stats{ display:flex; gap: var(--sp-4); margin-top: var(--sp-5); flex-wrap:wrap; }
.about-stats .stat b{ font-family: var(--f-display); font-style:italic; font-size: var(--step-3); color: var(--text-hi); display:block; }
.about-stats .stat span{ font-size:.75rem; color: var(--text-muted); letter-spacing:.03em; }

.about-collage{ position:relative; height: clamp(360px, 44vw, 620px); }
.about-collage .ph{
  position:absolute; overflow:hidden;
  clip-path: var(--facet-lg);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
}
.about-collage .ph img{ width:100%; height:100%; object-fit:cover; }
.about-collage .ph-a{ width:64%; height:70%; left:0; top:0; z-index:2; }
.about-collage .ph-b{ width:52%; height:52%; right:0; bottom:0; z-index:3; border:1px solid var(--line-violet); }
.about-collage .ph-c{ width:38%; height:34%; right:6%; top:4%; z-index:1; opacity:.9; }
.about-collage .glow{ position:absolute; inset: -10% -10% auto auto; width:50%; height:50%; background: radial-gradient(circle, rgba(181,101,240,.35), transparent 70%); filter: blur(20px); z-index:0; }

@media (max-width: 900px){
  .about-grid{ grid-template-columns:1fr; gap: var(--sp-4); }
  .about-collage{ order:-1; height: 62vh; }
}

/* ==========================================================================
   Facets — signature 4-grani section
   ========================================================================== */
.facets-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap:1px; background: var(--line);
  border:1px solid var(--line);
}
.facet-card{
  background: var(--bg-surface);
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  position:relative;
  min-height: 340px;
  display:flex; flex-direction:column;
  transition: background var(--dur-med);
}
.facet-card:hover{ background: var(--bg-elevated); }
.facet-index{
  font-family: var(--f-accent);
  font-size:.7rem; color: var(--violet-glow); letter-spacing:.18em;
}
.facet-num-big{
  font-family: var(--f-display); font-style:italic; font-weight:500;
  font-size: 3.6rem; color: var(--line-strong);
  position:absolute; top: 1.2rem; right:1.4rem; line-height:1;
  transition: color var(--dur-med);
}
.facet-card:hover .facet-num-big{ color: var(--violet-deep); }
.facet-name{ font-family: var(--f-display); font-style:italic; font-size: var(--step-2); color: var(--text-hi); margin-top: var(--sp-3); }
.facet-desc{ margin-top:.9rem; color: var(--text-muted); font-size:.9rem; flex:1; }
.facet-list{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.4rem; }
.facet-list li{ font-size:.78rem; color: var(--text-body); padding-left:1rem; position:relative; }
.facet-list li::before{ content:""; position:absolute; left:0; top:.55em; width:5px; height:1px; background: var(--violet-glow); }
.facet-card .link-arrow{ margin-top: var(--sp-3); align-self:flex-start; }

@media (max-width:1080px){ .facets-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .facets-grid{ grid-template-columns: 1fr; } }

/* ==========================================================================
   Services / price
   ========================================================================== */
.services{ background: var(--bg-surface); }
.svc-tabs{
  display:flex; flex-wrap:wrap; gap:.6rem;
  margin-bottom: var(--sp-4);
}
.svc-tab{
  font-family: var(--f-accent); font-size:.72rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color: var(--text-muted);
  background: var(--bg-card);
  border:1px solid var(--line);
  padding:.85rem 1.3rem;
  clip-path: var(--facet-sm);
  cursor:pointer;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.svc-tab:hover{ color: var(--text-hi); border-color: var(--line-strong); }
.svc-tab.active{ color:#140a1e; background: linear-gradient(135deg, var(--violet-glow), var(--violet)); border-color:transparent; }

.svc-panel{ display:none; }
.svc-panel.active{ display:block; animation: fade-in var(--dur-med) var(--ease-out); }
@keyframes fade-in{ from{ opacity:0; transform: translateY(10px);} to{opacity:1; transform:none;} }

.svc-note{ color: var(--text-muted); font-size:.85rem; margin-bottom: var(--sp-4); max-width:44rem; border-left:2px solid var(--violet-deep); padding-left:1rem; }

.svc-groups{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-4) var(--sp-5); }
@media (max-width:820px){ .svc-groups{ grid-template-columns:1fr; } }

.svc-group h3{
  font-family: var(--f-display); font-style:italic; font-size:1.3rem; color: var(--gold-soft);
  padding-bottom:.6rem; border-bottom:1px solid var(--line);
  margin-bottom:.9rem;
}
.svc-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.62rem 0;
  border-bottom:1px dashed var(--line);
}
.svc-row:last-child{ border-bottom:none; }
.svc-row .nm{ color: var(--text-body); font-size:.92rem; }
.svc-row .nm small{ display:block; color: var(--text-faint); font-size:.74rem; margin-top:.15rem; }
.svc-row .pr{ font-family: var(--f-accent); font-size:.86rem; color: var(--text-hi); white-space:nowrap; }
.svc-row .pr small{ color: var(--text-muted); font-weight:400; }

.svc-tiers{ margin-top: var(--sp-4); }
.svc-tiers-head{ font-family: var(--f-accent); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-muted); margin-bottom:1rem; }
.tier-table{ width:100%; min-width:640px; border-collapse:collapse; font-size:.86rem; }
.tier-table th{ text-align:left; font-family: var(--f-accent); font-weight:500; font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color: var(--text-muted); padding-bottom:.7rem; border-bottom:1px solid var(--line-strong); }
.tier-table td{ padding:.6rem 0; border-bottom:1px solid var(--line); color: var(--text-body); }
.tier-table td:not(:first-child), .tier-table th:not(:first-child){ text-align:right; font-family: var(--f-accent); color: var(--text-hi); white-space:nowrap; padding-left:1.2rem; }
.tier-table tr:last-child td{ border-bottom:none; }
.tier-scroll{ overflow-x:auto; padding-bottom:.4rem; }

.svc-cta{ margin-top: var(--sp-5); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; padding-top: var(--sp-4); border-top:1px solid var(--line); }
.svc-cta p{ color: var(--text-muted); max-width:32rem; font-size:.88rem; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery{ background: var(--bg-void); }
.gal-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom: var(--sp-4); }
.gal-filters button{
  font-family: var(--f-accent); font-size:.7rem; letter-spacing:.05em; text-transform:uppercase;
  color: var(--text-muted); background:transparent; border:1px solid var(--line); padding:.7rem 1.1rem;
  clip-path: var(--facet-sm); cursor:pointer; transition: all var(--dur-fast);
}
.gal-filters button:hover{ color: var(--text-hi); }
.gal-filters button.active{ color: var(--violet-glow); border-color: var(--violet-deep); background: rgba(181,101,240,.08); }

.gal-grid{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
  grid-auto-flow: dense;
  grid-auto-rows: 12px;
  gap: 10px;
}
.gal-item{
  position:relative; overflow:hidden;
  clip-path: var(--facet-card);
  cursor: zoom-in;
  background: var(--bg-card);
}
/* landscape tiles: every cell is wider than it is tall — "big" ones
   double their width (2 columns) rather than stretching taller.
   Row-span lives here (not as a JS inline style) so it can be
   re-tuned per breakpoint — a fixed pixel span would turn landscape
   into portrait again once columns get narrower on smaller screens. */
.gal-item{ grid-row: span 9; }
.gal-item.is-big{ grid-column: span 2; grid-row: span 12; }
.gal-item img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease-out), filter .5s; }
.gal-item:hover img{ transform: scale(1.08) rotate(-0.6deg); }
.gal-cap{
  position:absolute; inset:auto 0 0 0; padding: 1.6rem .9rem .8rem;
  background: linear-gradient(0deg, rgba(11,10,15,.92), transparent);
  opacity:0; transform: translateY(8px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  font-family: var(--f-accent); font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; color: var(--text-hi);
}
.gal-item:hover .gal-cap{ opacity:1; transform:none; }
.gal-item[data-hidden]{ display:none; }

@media (max-width:920px){
  .gal-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .gal-item{ grid-row: span 6; }
  .gal-item.is-big{ grid-row: span 8; }
}

.gal-lightbox{
  position:fixed; inset:0; z-index:200; background: rgba(6,5,9,.94);
  display:flex; align-items:center; justify-content:center; padding: 5vh 4vw;
  opacity:0; visibility:hidden; transition: opacity var(--dur-med), visibility 0s var(--dur-med);
}
.gal-lightbox.open{ opacity:1; visibility:visible; transition-delay:0s; }
.gal-lightbox img{ max-width:100%; max-height:88vh; clip-path: var(--facet-lg); box-shadow:0 40px 90px -20px rgba(0,0,0,.7); }
.gal-lightbox .lb-close, .gal-lightbox .lb-prev, .gal-lightbox .lb-next{
  position:absolute; background: var(--bg-card); border:1px solid var(--line-strong); color: var(--text-hi);
  width:46px; height:46px; display:flex; align-items:center; justify-content:center; cursor:pointer; clip-path: var(--facet-sm);
}
.gal-lightbox .lb-close{ top:24px; right: clamp(1rem,4vw,3rem); }
.gal-lightbox .lb-prev{ left: clamp(.5rem,3vw,2rem); top:50%; transform: translateY(-50%); }
.gal-lightbox .lb-next{ right: clamp(.5rem,3vw,2rem); top:50%; transform: translateY(-50%); }
.gal-lightbox .lb-cap{ position:absolute; bottom:26px; left:0; right:0; text-align:center; font-family: var(--f-accent); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color: var(--text-muted); }

/* ==========================================================================
   Team
   ========================================================================== */
.team{ background: var(--bg-surface); }
.team-grid{ display:grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap:1px; background: var(--line); border:1px solid var(--line); }
.team-card{ background: var(--bg-card); padding: var(--sp-4) var(--sp-2) var(--sp-3); text-align:center; transition: background var(--dur-med); }
.team-card:hover{ background: var(--bg-elevated); }
.team-mono{
  width:74px; height:74px; margin-inline:auto; margin-bottom:1.1rem;
  clip-path: var(--facet-sm);
  background: linear-gradient(150deg, var(--violet-ink), var(--bg-elevated));
  border:1px solid var(--line-violet);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-style:italic; font-size:1.7rem; color: var(--violet-glow);
}
.team-card h3{ font-family: var(--f-display); font-style:italic; font-size:1.15rem; color: var(--text-hi); }
.team-card p{ font-size:.72rem; color: var(--text-muted); margin-top:.4rem; line-height:1.5; }
@media (max-width:980px){ .team-grid{ grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:560px){ .team-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews{ background: var(--bg-void); }
.rv-layout{ display:grid; grid-template-columns: 0.85fr 1.6fr; gap: var(--sp-5); }
@media (max-width:980px){ .rv-layout{ grid-template-columns:1fr; } }

.rv-score{ position:sticky; top:7rem; align-self:start; }
.rv-score .big{ font-family: var(--f-display); font-style:italic; font-size: 5.2rem; color: var(--text-hi); line-height:1; }
.rv-score .stars{ color: var(--gold-soft); margin-top:.6rem; font-size:1.1rem; letter-spacing:.14em; }
.rv-score .count{ margin-top:.5rem; color: var(--text-muted); font-size:.85rem; }
.rv-bars{ margin-top: var(--sp-4); display:flex; flex-direction:column; gap:.85rem; }
.rv-bar-row{ display:grid; grid-template-columns: 8rem 1fr 2.2rem; align-items:center; gap:.8rem; font-size:.76rem; }
.rv-bar-row .lbl{ color: var(--text-muted); }
.rv-bar-track{ height:3px; background: var(--line); position:relative; }
.rv-bar-fill{ position:absolute; inset:0 100% 0 0; background: linear-gradient(90deg, var(--violet-deep), var(--violet-glow)); transition: inset 1.1s var(--ease-out); }
.rv-bar-row.in-view .rv-bar-fill{ inset-inline-end: var(--pct); }
.rv-bar-row .val{ text-align:right; color: var(--text-body); font-family: var(--f-accent); font-size:.7rem; }

.rv-grid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--sp-3); }
@media (max-width:640px){ .rv-grid{ grid-template-columns:1fr; } }
.rv-card{ background: var(--bg-card); border:1px solid var(--line); clip-path: var(--facet-card); padding: var(--sp-3); display:flex; flex-direction:column; height:100%; }
.rv-card .stars{ color: var(--gold-soft); font-size:.82rem; letter-spacing:.12em; }
.rv-card p{ margin-top:.9rem; color: var(--text-body); font-size:.9rem; flex:1; }
.rv-card footer{ margin-top:1.1rem; display:flex; justify-content:space-between; align-items:baseline; border-top:1px solid var(--line); padding-top:.8rem; }
.rv-card .who{ font-family: var(--f-accent); font-size:.75rem; color: var(--text-hi); }
.rv-card .when{ font-size:.7rem; color: var(--text-faint); }
.rv-more{ text-align:center; margin-top: var(--sp-4); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ background: var(--bg-surface); }
.faq-list{ max-width:52rem; }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; color: var(--text-hi);
  font-family: var(--f-display); font-style:italic; font-size: var(--step-2);
  padding: 1.6rem 3rem 1.6rem 0; position:relative; cursor:pointer;
}
.faq-q::after{
  content:"+"; position:absolute; right:0; top:1.5rem; font-family: var(--f-accent); font-style:normal;
  font-size:1.3rem; color: var(--violet-glow); transition: transform var(--dur-med) var(--ease-out);
}
.faq-item.open .faq-q::after{ transform: rotate(135deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height var(--dur-med) var(--ease-out); }
.faq-a p{ color: var(--text-muted); padding-bottom:1.6rem; max-width:42rem; font-size:.94rem; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ background: var(--bg-void); }
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width:940px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-list{ margin-top: var(--sp-4); display:flex; flex-direction:column; gap:1.4rem; }
.contact-row{ display:flex; gap:1.1rem; align-items:flex-start; padding-bottom:1.3rem; border-bottom:1px solid var(--line); }
.contact-row .ic{ width:20px; height:20px; color: var(--violet-glow); flex-shrink:0; margin-top:.15rem; }
.contact-row h3{ font-family: var(--f-accent); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color: var(--text-muted); margin-bottom:.4rem; }
.contact-row div{ color: var(--text-hi); font-size:1rem; }
.contact-row .hours-table{ display:grid; grid-template-columns: auto auto; gap: .25rem 1.2rem; font-size:.86rem; color: var(--text-body); }
.contact-msgs{ display:flex; gap:.8rem; margin-top:1.6rem; flex-wrap:wrap; }

.map-frame{ position:relative; height: 100%; min-height:420px; clip-path: var(--facet-lg); border:1px solid var(--line-strong); overflow:hidden; }
.map-frame iframe{ width:100%; height:100%; border:0; filter: grayscale(.25) contrast(1.05) brightness(.9); }
.map-frame::after{ content:""; position:absolute; inset:0; box-shadow: inset 0 0 60px rgba(11,10,15,.5); pointer-events:none; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--bg-elevated); border-top:1px solid var(--line); padding-block: var(--sp-5) var(--sp-3); }
.footer-top{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-4); padding-bottom: var(--sp-4); border-bottom:1px solid var(--line); }
@media (max-width:860px){ .footer-top{ grid-template-columns: 1fr 1fr; } }
.footer-brand .brand-mark{ font-size:1.3rem; }
.footer-brand p{ margin-top:1rem; color: var(--text-muted); font-size:.86rem; max-width:22rem; }
.footer-col h3{ font-family: var(--f-accent); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: var(--text-muted); margin-bottom:1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.65rem; }
.footer-col a, .footer-col span{ color: var(--text-body); font-size:.88rem; }
.footer-col a:hover{ color: var(--violet-glow); }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top: var(--sp-3); font-size:.76rem; color: var(--text-faint); }
.footer-bottom .legal{ max-width:46rem; }

/* ==========================================================================
   Floating CTA
   ========================================================================== */
.float-cta{
  position:fixed; right: 1.4rem; bottom: 1.4rem; z-index:90;
  display:flex; flex-direction:column; gap:.7rem; align-items:flex-end;
}
.float-cta a{
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  background: var(--bg-card); border:1px solid var(--line-strong); color: var(--text-hi);
  clip-path: var(--facet-sm);
  transition: transform var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.float-cta a svg{ width:20px; height:20px; }
.float-cta a:hover{ transform: translateY(-3px); border-color: var(--violet); background: var(--bg-elevated); }
.float-cta a.primary{ background: linear-gradient(135deg, var(--violet-glow), var(--violet)); color:#140a1e; border-color:transparent; }
.float-mobile-bar{ display:none; }
@media (max-width:720px){
  /* the bottom bar already covers both call + booking actions on mobile —
     keeping the round floating buttons too just doubles up and hovers
     over page content (review cards, price tables) as the user scrolls */
  .float-cta{ display:none; }
  .float-mobile-bar{
    display:flex; position:fixed; inset-inline:0; bottom:0; z-index:95;
    background: rgba(21,19,27,.92); backdrop-filter: blur(10px);
    border-top:1px solid var(--line-strong);
    padding: .7rem var(--gutter);
    gap:.7rem;
  }
  .float-mobile-bar a{ flex:1; }
  .float-mobile-bar .btn{ width:100%; }
}

/* ==========================================================================
   Misc components
   ========================================================================== */
.kicker-line{ display:flex; align-items:center; gap:1rem; color: var(--text-faint); font-family: var(--f-accent); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; }
.kicker-line::before, .kicker-line::after{ content:""; height:1px; flex:1; background: var(--line); }

.marquee{ overflow:hidden; border-block:1px solid var(--line); padding-block: 1.1rem; background: var(--bg-surface); }
.marquee-track{ display:flex; gap:3rem; width:max-content; animation: marquee 34s linear infinite; }
.marquee span{ font-family: var(--f-accent); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--text-muted); white-space:nowrap; }
.marquee span b{ color: var(--violet-glow); }
@keyframes marquee{ to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

.skip-link{
  position:fixed; left:1rem; top:-60px; z-index:1000;
  background: var(--violet-glow); color:#140a1e; padding:.8rem 1.2rem; font-family: var(--f-accent); font-size:.8rem;
  transition: top var(--dur-fast);
}
.skip-link:focus{ top:1rem; }

.promo-strip{
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between;
  background: linear-gradient(135deg, var(--violet-ink), var(--bg-elevated));
  border:1px solid var(--line-violet);
  clip-path: var(--facet-lg);
  padding: var(--sp-4);
}
.promo-strip .txt{ max-width:36rem; }
.promo-strip h4{ font-family: var(--f-display); font-style:italic; font-size: var(--step-2); color: var(--text-hi); }
.promo-strip p{ margin-top:.6rem; color: var(--text-muted); font-size:.9rem; }