/* Beauty & Style Clinic — shared inner-page design system */
:root {
  --concrete: #d6cfc4;
  --concrete-dim: #a09786;
  --charcoal: #1b1712;
  --ink: #0d0b08;
  --warm-white: #f6f1e8;
  --warm-white-dim: #d4cabb;
  --gold: #c9a24b;
  --gold-glow: rgba(201, 162, 75, 0.35);
  --gold-soft: rgba(201, 162, 75, 0.08);
  --rose: #dab2a1;
  --rose-glow: rgba(218, 178, 161, 0.30);
  --heading: 'Playfair Display', 'Georgia', serif;
  --body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--ink); color: var(--warm-white);
  font-family: var(--body); font-weight: 300; overflow-x: hidden;
}
::selection { background: var(--gold); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Ambient */
.grain {
  position: fixed; inset: 0; z-index: 100; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}
.vignette {
  position: fixed; inset: 0; z-index: 99; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(13,11,8,0.4) 100%);
}
.frame {
  position: fixed; inset: 14px; z-index: 90; pointer-events: none;
  border: 1px solid rgba(201,162,75,0.13);
}
@media (max-width: 900px) { .frame { display: none; } }
#progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 95;
  background: linear-gradient(90deg, var(--gold), var(--rose));
  box-shadow: 0 0 12px rgba(201,162,75,0.5);
}
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold), #8a6c2e); border-radius: 5px; border: 2px solid var(--ink); }

/* ---------- Top navigation ---------- */
.topnav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 34px;
  background: linear-gradient(180deg, rgba(13,11,8,0.85), rgba(13,11,8,0.4) 70%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(246,241,232,0.05);
}
.topnav .n-logo img { width: 74px; height: auto; }
.topnav .n-links { display: flex; gap: 26px; align-items: center; }
.topnav .n-links a {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--warm-white-dim); text-decoration: none; padding: 8px 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.3s, border-color 0.3s;
  white-space: nowrap;
}
.topnav .n-links a:hover { color: var(--gold); }
.topnav .n-links a.active { color: var(--gold); border-bottom-color: var(--gold); }
.topnav .n-right { display: flex; align-items: center; gap: 12px; }
.lang-switch {
  display: flex; border: 1px solid rgba(246,241,232,0.18);
  background: rgba(13,11,8,0.35);
}
.lang-switch button {
  font-family: var(--body); font-size: 10px; letter-spacing: 0.2em;
  padding: 10px 13px; background: none; border: none; color: var(--concrete-dim);
  cursor: pointer; transition: color 0.3s, background 0.3s; min-width: 40px;
}
.lang-switch button.active { color: var(--ink); background: var(--gold); }
.n-book {
  font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--warm-white); text-decoration: none;
  border: 1px solid rgba(246,241,232,0.22); padding: 12px 18px;
  transition: border-color 0.4s, color 0.4s;
  white-space: nowrap;
}
.n-book:hover { border-color: var(--gold); color: var(--gold); }
.n-burger { display: none; background: none; border: 1px solid rgba(246,241,232,0.22); color: var(--warm-white); width: 44px; height: 44px; font-size: 16px; cursor: pointer; }
@media (max-width: 1100px) {
  .topnav { padding: 12px 16px; }
  .topnav .n-links {
    position: fixed; inset: 0; z-index: 85; flex-direction: column; justify-content: center; gap: 20px;
    background: #0d0b08; display: none;
  }
  /* While the menu is open, drop the nav's backdrop-filter: a filtered ancestor
     becomes the containing block for position:fixed children, which pinned the
     fullscreen menu to the nav strip and left its links floating with no
     background over the page text. Solid nav background keeps it readable. */
  .topnav.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: #0d0b08; }
  .topnav .n-links.open { display: flex; }
  .topnav .n-links a { font-size: 14px; letter-spacing: 0.3em; }
  .n-burger { display: block; z-index: 86; position: relative; }
  .n-book .nb-long { display: none; }
}
@media (min-width: 1101px) { .n-book .nb-short { display: none; } }

/* ---------- Page hero ---------- */
.page-hero { position: relative; min-height: 72vh; display: flex; align-items: flex-end; overflow: hidden; }
.page-hero .ph-bg {
  position: absolute; inset: -8% 0; background-size: cover; background-position: center;
  filter: saturate(1.05) sepia(0.05); will-change: transform;
}
.page-hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(13,11,8,0.62) 0%, rgba(13,11,8,0.25) 45%, rgba(13,11,8,0.94) 100%);
}
.ph-content { position: relative; z-index: 2; padding: 0 7% 70px; max-width: 900px; }
.overline {
  font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 20px; font-weight: 500;
}
.overline::after {
  content: ''; display: inline-block; width: 44px; height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-left: 14px; vertical-align: middle;
}
.ph-title { font-family: var(--heading); font-weight: 300; font-size: clamp(42px, 6vw, 84px); line-height: 1.05; }
.ph-title em { color: var(--rose); }
.ph-sub { margin-top: 20px; font-size: 15.5px; line-height: 1.75; color: var(--warm-white-dim); max-width: 560px; }

/* ---------- Sections ---------- */
.section { position: relative; padding: 110px 7%; }
.section.tight { padding: 80px 7%; }
.section-head { max-width: 720px; margin-bottom: 56px; }
.serif-title { font-family: var(--heading); font-weight: 300; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.15; }
.serif-title em { color: var(--rose); }
.body-copy { margin-top: 18px; font-size: 15px; line-height: 1.8; color: var(--warm-white-dim); max-width: 560px; }
.warmband {
  background:
    radial-gradient(ellipse 70% 120% at 15% 0%, rgba(201,162,75,0.06), transparent 60%),
    radial-gradient(ellipse 60% 100% at 90% 100%, rgba(218,178,161,0.05), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, #17120d 50%, var(--ink) 100%);
}

/* ---------- Treatment cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.t-card {
  position: relative; background: rgba(246,241,232,0.025);
  border: 1px solid rgba(246,241,232,0.08); overflow: hidden;
  transition: border-color 0.5s, transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s;
}
.t-card:hover { border-color: rgba(201,162,75,0.45); transform: translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.t-card .tc-img { height: 230px; overflow: hidden; }
.t-card .tc-img > div {
  width: 100%; height: 100%; background-size: cover; background-position: center;
  transition: transform 1.2s cubic-bezier(0.22,1,0.36,1);
  filter: saturate(1.02);
}
.t-card:hover .tc-img > div { transform: scale(1.06); }
.t-card .tc-body { padding: 24px 24px 26px; }
.t-card .tc-num { font-family: var(--heading); font-style: italic; font-size: 13px; color: var(--gold); }
.t-card h3 { font-family: var(--heading); font-weight: 400; font-size: 21px; margin-top: 8px; }
.t-card p { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--concrete-dim); }
.t-card .tc-price { margin-top: 14px; font-size: 12px; letter-spacing: 0.12em; color: var(--gold); text-transform: uppercase; }
.t-card .tc-price s { color: var(--concrete-dim); margin-right: 8px; }

/* ---------- Price table ---------- */
.price-list { max-width: 680px; }
.price-item {
  display: flex; align-items: baseline; font-size: 14.5px; color: var(--concrete); padding: 15px 0;
  border-bottom: 1px solid rgba(246,241,232,0.08);
}
.price-item:first-child { border-top: 1px solid rgba(246,241,232,0.08); }
.price-item .dots { flex: 1; margin: 0 14px; border-bottom: 1px dotted rgba(246,241,232,0.22); transform: translateY(-4px); }
.price-item .val { color: var(--gold); white-space: nowrap; font-weight: 400; }
.price-item .val s { color: var(--concrete-dim); margin-right: 8px; font-weight: 300; }
.price-note { margin-top: 18px; font-size: 11px; letter-spacing: 0.1em; color: var(--concrete-dim); }

/* ---------- Feature list ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.f-cell {
  padding: 26px; background: rgba(13,11,8,0.4); border: 1px solid rgba(246,241,232,0.09);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color 0.4s;
}
.f-cell:hover { border-color: rgba(201,162,75,0.4); }
.f-cell .f-ico { color: var(--gold); font-size: 16px; }
.f-cell h4 { font-family: var(--heading); font-weight: 400; font-size: 17px; margin-top: 12px; }
.f-cell p { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--concrete-dim); }

/* ---------- Quote / testimonials ---------- */
.tst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tst-cell {
  padding: 30px 28px; background: rgba(246,241,232,0.025); border: 1px solid rgba(246,241,232,0.08);
  position: relative;
}
.tst-cell::before { content: '\201C'; font-family: var(--heading); font-size: 60px; line-height: 0.4; color: var(--gold); opacity: 0.55; display: block; margin-bottom: 14px; }
.tst-cell p { font-family: var(--heading); font-style: italic; font-size: 16.5px; line-height: 1.6; }
.tst-cell cite { display: block; margin-top: 16px; font-style: normal; font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--concrete-dim); }
.stars { color: var(--gold); font-size: 13px; letter-spacing: 0.35em; margin-bottom: 12px; }

/* ---------- Image mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 240px; gap: 14px; }
.mosaic .m-item { position: relative; overflow: hidden; background: var(--charcoal); }
.mosaic .m-item.tall { grid-row: span 2; }
.mosaic .m-item.wide { grid-column: span 2; }
.mosaic .m-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.mosaic .m-item:hover img { transform: scale(1.05); }
.mosaic .m-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 16px 12px;
  background: linear-gradient(to top, rgba(13,11,8,0.85), transparent);
  font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--warm-white);
}
@media (max-width: 900px) { .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 170px; } .mosaic .m-item.wide { grid-column: span 2; } }

/* ---------- Before / After ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.ba-item { border: 1px solid rgba(246,241,232,0.09); background: #fff; }
.ba-item img { width: 100%; height: auto; }
.ba-item .ba-cap { padding: 14px 16px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); background: var(--warm-white); }

/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden; text-align: center; padding: 130px 7%;
}
.cta-band .cb-bg { position: absolute; inset: -10% 0; background-size: cover; background-position: center; }
.cta-band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(13,11,8,0.6), rgba(13,11,8,0.92)); }
.cta-band > .cb-in { position: relative; z-index: 2; }
.cta-band .serif-title { margin-bottom: 10px; }
.cta-buttons { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.btn {
  font-family: var(--body); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  padding: 18px 34px; text-decoration: none; transition: all 0.4s ease; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  position: relative; overflow: hidden;
}
.btn-primary { background: var(--gold); color: var(--ink); }
.btn-primary:hover { background: var(--rose); box-shadow: 0 8px 34px var(--rose-glow); }
.btn-ghost { border: 1px solid rgba(246,241,232,0.3); color: var(--warm-white); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 900px) { .cta-buttons { flex-direction: column; align-items: stretch; } }

/* ---------- Footer ---------- */
footer { background: #121009; padding: 70px 6% 46px; text-align: center; position: relative; }
footer img { width: 110px; height: auto; opacity: 0.9; margin: 0 auto; }
footer .f-tag { margin-top: 18px; font-family: var(--heading); font-style: italic; font-size: 15px; color: var(--warm-white-dim); }
footer .f-info { margin-top: 22px; font-size: 12px; letter-spacing: 0.12em; color: var(--concrete-dim); line-height: 2.1; }
footer .f-info a { color: var(--gold); text-decoration: none; }
footer .f-nav { margin-top: 24px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
footer .f-nav a { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--concrete-dim); text-decoration: none; }
footer .f-nav a:hover { color: var(--gold); }
footer .f-legal { margin-top: 30px; font-size: 9.5px; letter-spacing: 0.2em; color: rgba(160,151,134,0.55); text-transform: uppercase; }

/* ---------- Reveals ---------- */
.rv { opacity: 0; transform: translateY(34px); transition: opacity 1s ease, transform 1.1s cubic-bezier(0.22,1,0.36,1); }
.rv.in { opacity: 1; transform: translateY(0); }
.rv.d1 { transition-delay: 0.1s; } .rv.d2 { transition-delay: 0.2s; } .rv.d3 { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}