/* =====================================================
   Studio Kesia Santos — Vanilla CSS (converted from React/Tailwind)
   ===================================================== */

:root {
  --background: 30 30% 97%;
  --foreground: 20 20% 18%;
  --card: 30 25% 95%;
  --card-foreground: 20 20% 18%;
  --primary: 18 40% 65%;
  --primary-foreground: 30 30% 97%;
  --secondary: 30 20% 92%;
  --secondary-foreground: 20 20% 25%;
  --muted: 30 15% 93%;
  --muted-foreground: 20 10% 45%;
  --accent: 30 35% 88%;
  --accent-foreground: 20 20% 18%;
  --border: 25 20% 88%;
  --ring: 18 40% 65%;
  --radius: 0.5rem;

  --rose-nude: 18 40% 65%;
  --cream: 35 40% 95%;
  --warm-brown: 20 30% 30%;
  --gold: 38 60% 55%;
  --soft-pink: 15 30% 90%;
}

/* ------- Reset ------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; border: 0 solid hsl(var(--border)); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Raleway', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: transparent; cursor: pointer; color: inherit; }
ul { list-style: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  line-height: 1.15;
  color: hsl(var(--foreground));
}

/* ------- Layout ------- */
.container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding-left: clamp(1rem, 4vw, 2rem);
  padding-right: clamp(1rem, 4vw, 2rem);
}

.section { padding: clamp(3.5rem, 10vw, 8rem) 0; }

.text-center { text-align: center; }
.mt-12 { margin-top: 3rem; }

/* ------- Buttons ------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Raleway', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: opacity .3s ease, transform .3s ease;
  cursor: pointer;
  white-space: nowrap;
  padding: 0.625rem 1.5rem;
}
.btn-pill { border-radius: 9999px; }
.btn-lg { padding: 1rem 2.5rem; }
.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-primary:hover { opacity: .9; }
.btn-brown {
  background: hsl(var(--warm-brown));
  color: hsl(var(--cream));
  padding: 1rem 2.5rem;
}
.btn-brown:hover { opacity: .9; }

/* ------- Shared text ------- */
.eyebrow {
  font-size: 0.875rem;
  text-transform: uppercase;
  color: hsl(var(--primary));
  font-weight: 500;
  margin-bottom: 1rem;
}
.eyebrow-brown {
  color: hsl(var(--warm-brown) / .6);
  margin-bottom: 1.5rem;
}
.section-title {
  font-size: clamp(1.75rem, 5.5vw, 3rem);
  font-weight: 300;
  margin-bottom: 1.5rem;
  color: hsl(var(--foreground));
}
.section-title-sm { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.section-lead {
  color: hsl(var(--muted-foreground));
  font-weight: 300;
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  line-height: 1.6;
  max-width: 36rem;
  margin: 0 auto;
}
.section-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}

/* =====================================================
   NAVBAR
   ===================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: hsl(var(--background) / .8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border) / .5);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}
.nav-logo {
  height: 3rem;
  width: auto;
  object-fit: contain;
}
.nav-links {
  display: none;
  align-items: center;
  gap: 2rem;
}
@media (min-width: 768px) {
  .nav-links { display: flex; }
}
.nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  transition: color .3s ease;
}
.nav-link:hover { color: hsl(var(--primary)); }
.nav-cta { display: none; }
@media (min-width: 768px) {
  .nav-cta { display: inline-flex; padding: 0.625rem 1.5rem; }
}
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--foreground));
  width: 2.5rem;
  height: 2.5rem;
}
@media (min-width: 768px) {
  .nav-toggle { display: none; }
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.navbar.open .nav-toggle .icon-menu { display: none; }
.navbar.open .nav-toggle .icon-close { display: inline-block; }

.nav-mobile {
  display: none;
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
  overflow: hidden;
}
.navbar.open .nav-mobile { display: block; animation: navOpen .3s ease; }
@keyframes navOpen {
  from { opacity: 0; max-height: 0; }
  to { opacity: 1; max-height: 600px; }
}
.nav-mobile ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 0;
}
.nav-mobile .nav-link { color: hsl(var(--muted-foreground)); }
.nav-mobile .btn-pill { padding: 0.625rem 1.5rem; }

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  padding: clamp(5rem, 12vw, 10rem) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg,
    hsl(var(--cream)) 0%,
    hsl(var(--soft-pink)) 50%,
    hsl(var(--rose-nude) / .3) 100%);
}
.hero-radial {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(120,53,15,0.1), transparent);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 48rem;
}
.hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 7vw, 4.5rem);
  font-weight: 300;
  line-height: 1.1;
  color: hsl(var(--warm-brown));
  margin-bottom: 2rem;
}
.hero-lead {
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  font-weight: 300;
  color: hsl(var(--warm-brown) / .7);
  line-height: 1.6;
  margin: 0 auto 2.5rem;
  max-width: 42rem;
}
.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollBounce 2s ease-in-out infinite;
}
.hero-scroll-line {
  display: block;
  width: 1px;
  height: 4rem;
  background: hsl(var(--warm-brown) / .3);
}
@keyframes scrollBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 10px); }
}

/* =====================================================
   FEATURES
   ===================================================== */
.features { background: hsl(var(--secondary)); }
.features-head {
  text-align: center;
  max-width: 56rem;
  margin: 0 auto 3rem;
}
.features-head .section-lead {
  margin-bottom: 3rem;
}
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 56rem;
  margin: 0 auto;
}
@media (min-width: 560px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .features-grid { grid-template-columns: repeat(4, 1fr); }
}
.feature-pill {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: hsl(var(--background));
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}
.feature-pill span:last-child {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.feature-check {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ba8f7d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* =====================================================
   BEFORE / AFTER
   ===================================================== */
.before-after { background: hsl(var(--background)); }
.ba-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 2rem);
}
@media (min-width: 560px) {
  .ba-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .ba-grid { grid-template-columns: repeat(3, 1fr); }
}
.ba-card {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 1rem;
  background: hsl(var(--muted));
}
.ba-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s ease;
}
.ba-card:hover img { transform: scale(1.05); }

/* =====================================================
   VIDEO TESTIMONIALS
   ===================================================== */
.video-section {
  background: linear-gradient(to bottom,
    hsl(var(--background)) 0%,
    hsl(var(--secondary) / .4) 50%,
    hsl(var(--background)) 100%);
}
.video-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
  max-width: 64rem;
  margin: 0 auto;
}
@media (min-width: 560px) {
  .video-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .video-grid { grid-template-columns: repeat(3, 1fr); }
}
.video-card {
  border-radius: 1rem;
  overflow: hidden;
  background: hsl(var(--background));
  aspect-ratio: 9 / 16;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =====================================================
   TREATMENTS
   ===================================================== */
.treatments { background: hsl(var(--secondary)); }
.treatments .section-head { margin-bottom: 3.5rem; }
.tabs { max-width: 64rem; margin: 0 auto; }
.tabs-list {
  display: inline-flex;
  margin: 0 auto 3rem;
  background: hsl(var(--background) / .7);
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  padding: 0.25rem;
  gap: 0.25rem;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
}
.tab-trigger {
  padding: 0.625rem clamp(1rem, 4vw, 2rem);
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  transition: all .3s ease;
  min-height: 44px;
}
.tab-trigger.active {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);
}
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn .4s ease; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.treat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
}
@media (min-width: 560px) {
  .treat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .treat-grid { grid-template-columns: repeat(3, 1fr); }
}
.treat-card {
  background: hsl(var(--background));
  border-radius: 1rem;
  padding: clamp(1.25rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
  transition: box-shadow .5s ease;
}
.treat-card:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}
.treat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.treat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: hsl(var(--accent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: hsl(var(--primary));
}
.treat-icon svg { width: 1.25rem; height: 1.25rem; }
.treat-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--primary));
  background: hsl(var(--accent) / .6);
  border: 1px solid hsl(var(--primary) / .2);
  padding: 0.375rem 0.75rem;
  border-radius: 9999px;
}
.treat-badge svg { width: 0.75rem; height: 0.75rem; }
.treat-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  margin-bottom: 0.75rem;
}
.treat-desc {
  color: hsl(var(--muted-foreground));
  font-weight: 300;
  line-height: 1.6;
  font-size: 0.875rem;
}

/* =====================================================
   WHY CHOOSE
   ===================================================== */
.why-choose { background: hsl(var(--background)); }
.why-wrap {
  max-width: 64rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3rem);
  align-items: center;
}
@media (min-width: 880px) {
  .why-wrap { grid-template-columns: repeat(2, 1fr); }
}
.why-portrait {
  display: flex;
  justify-content: center;
  position: relative;
}
.why-portrait-frame {
  width: clamp(14rem, 60vw, 24rem);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 9999px;
  overflow: hidden;
  border: 4px solid hsl(var(--accent));
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}
.why-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.why-tag {
  display: none;
  position: absolute;
  bottom: -1.5rem;
  right: -1.5rem;
  background: #fff;
  padding: 1.5rem;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
  border-radius: 0.75rem;
  max-width: 200px;
}
@media (min-width: 880px) {
  .why-tag { display: block; }
}
.why-tag-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: hsl(var(--primary));
  margin-bottom: 0.25rem;
}
.why-tag-role {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.why-content {}
.why-quote {
  color: hsl(var(--muted-foreground));
  font-weight: 300;
  font-size: 1.125rem;
  font-style: italic;
  margin-bottom: 2rem;
}
.why-list { display: flex; flex-direction: column; gap: 0.75rem; }
.why-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: hsl(var(--soft-pink));
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
}
.why-item span {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
}
.why-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: hsl(var(--primary));
  flex-shrink: 0;
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer {
  padding: 1.5rem 0;
  background: hsl(var(--warm-brown));
  color: hsl(var(--cream) / .8);
}
.footer-inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.footer-copy {
  font-size: 0.75rem;
  color: hsl(var(--cream) / .6);
}
.footer-credit {
  font-size: 0.75rem;
  color: hsl(var(--cream) / .4);
}
.footer-credit a {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .2s ease;
}
.footer-credit a:hover { color: hsl(var(--cream)); }

/* =====================================================
   REVEAL ANIMATIONS (replicates framer-motion)
   ===================================================== */
.reveal { opacity: 0; transition: opacity .8s ease, transform .8s ease; will-change: transform, opacity; }
.reveal[data-reveal="fade-up"]    { transform: translateY(30px); }
.reveal[data-reveal="fade"]       {}
.reveal[data-reveal="zoom-in"]    { transform: scale(0.9); }
.reveal[data-reveal="slide-left"] { transform: translateX(-30px); }
.reveal[data-reveal="slide-right"]{ transform: translateX(30px); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
}