:root {
  --ink: #18352e;
  --forest: #244c40;
  --moss: #6e8068;
  --sage: #a9b4a0;
  --paper: #f4f1e9;
  --cream: #ece7db;
  --sand: #d8cbb8;
  --white: #fbfaf6;
  --line: rgba(24, 53, 46, .18);
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 1000;
  padding: 10px 14px; background: var(--ink); color: white;
}
.skip-link:focus { top: 12px; }

.site-header {
  position: absolute; z-index: 10; inset: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  height: 84px; padding: 0 20px;
}
.brand { display: grid; grid-template-columns: 34px auto; grid-template-rows: 20px 14px; text-decoration: none; line-height: 1; }
.brand-mark { grid-row: 1 / 3; width: 28px; height: 34px; margin-right: 6px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.brand span { font-family: var(--serif); font-size: 24px; letter-spacing: -.03em; text-transform: lowercase; }
.brand small { font-size: 8px; letter-spacing: .23em; text-transform: uppercase; }
.header-book { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; text-underline-offset: 5px; }
.header-book span { display: none; }

.hero {
  position: relative; min-height: 790px; height: 100svh; max-height: 900px;
  overflow: hidden; display: grid; align-content: start;
  padding: 150px 22px 48px;
  background:
    radial-gradient(circle at 76% 39%, rgba(169,180,160,.28), transparent 26%),
    linear-gradient(145deg, #f7f4ec 0%, #eee9dd 100%);
}
.hero::after {
  content: ""; position: absolute; right: -90px; top: 115px; width: 280px; height: 520px;
  border: 1px solid rgba(36,76,64,.11); border-radius: 50%; transform: rotate(17deg);
}
.hero-copy { position: relative; z-index: 2; max-width: 620px; }
.eyebrow { margin: 0 0 20px; font-size: 10px; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; }
.hero h1 { margin: 0; max-width: 530px; font: 400 clamp(44px, 13.8vw, 74px)/.98 var(--serif); letter-spacing: -.045em; }
.hero h1 em { color: var(--moss); font-weight: 400; }
.hero-intro { max-width: 330px; margin: 26px 0 28px; font-size: 14px; line-height: 1.7; }
.text-link { display: inline-flex; gap: 18px; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.text-link span { animation: nudge 2s var(--ease) infinite; }

.botanical-orbit { position: absolute; z-index: 1; width: 310px; height: 390px; right: -76px; bottom: 44px; transition: transform .3s ease-out; }
.botanical-orbit svg { width: 100%; height: 100%; overflow: visible; fill: rgba(169,180,160,.12); stroke: var(--forest); stroke-width: 1.05; }
.botanical-orbit .stem { fill: none; stroke-dasharray: 650; stroke-dashoffset: 650; animation: draw 2.2s .35s var(--ease) forwards; }
.botanical-orbit .leaf { transform-box: fill-box; transform-origin: center bottom; opacity: 0; animation: bloom 1s var(--delay, .8s) var(--ease) forwards; }
.botanical-orbit .leaf:nth-child(3) { --delay: 1s; }
.botanical-orbit .leaf:nth-child(4) { --delay: 1.2s; }
.botanical-orbit .leaf:nth-child(5) { --delay: 1.4s; }
.botanical-orbit .leaf:nth-child(6) { --delay: 1.6s; }
.botanical-orbit circle { fill: none; opacity: .13; animation: orbit 22s linear infinite; transform-origin: 176px 295px; stroke-dasharray: 2 9; }
.botanical-orbit circle:last-child { animation-direction: reverse; animation-duration: 16s; }
.orb-label { position: absolute; left: 30px; top: 195px; z-index: 2; font: 400 18px/1.1 var(--serif); }
.orb-label span { display: block; margin-bottom: 8px; font: 500 9px/1 var(--sans); letter-spacing: .15em; }
.hero-note { position: absolute; z-index: 3; bottom: 46px; left: 22px; display: flex; align-items: flex-start; gap: 12px; }
.hero-note p { margin: 0; font: 400 13px/1.45 var(--serif); }
.note-line { width: 36px; height: 1px; margin-top: 7px; background: var(--ink); }

.concern-finder { padding: 88px 0 64px; overflow: hidden; }
.section-heading, .menu-intro { padding: 0 22px; }
.section-heading h2, .menu-intro h2 { margin: 0; font: 400 38px/1.03 var(--serif); letter-spacing: -.035em; }
.section-heading > p:last-child { margin: 18px 0 0; max-width: 480px; color: rgba(24,53,46,.74); font-size: 13px; }
.concern-scroll { display: flex; gap: 8px; overflow-x: auto; margin-top: 32px; padding: 0 22px 10px; scrollbar-width: none; scroll-snap-type: x proximity; }
.concern-scroll::-webkit-scrollbar { display: none; }
.concern-chip {
  flex: 0 0 auto; scroll-snap-align: start; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 100px; background: transparent;
  font-size: 11px; font-weight: 500; cursor: pointer; transition: .3s var(--ease);
}
.concern-chip:is(:hover,:focus-visible), .concern-chip.is-active { color: var(--paper); background: var(--ink); border-color: var(--ink); outline: none; }
.filter-status { margin: 8px 22px 0; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }

.treatment-menu { padding: 30px 0 76px; }
.menu-intro h2 { max-width: 540px; }
.treatment-list { display: grid; gap: 12px; margin-top: 32px; padding: 0 14px; }
.treatment-card { position: relative; min-height: 480px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 20px; color: var(--white); background: var(--forest); transition: opacity .35s, transform .5s var(--ease); }
.treatment-card[hidden] { display: none; }
.treatment-card:nth-child(2) { color: var(--ink); background: var(--sand); }
.treatment-card:nth-child(3) { background: #697965; }
.card-number { position: absolute; z-index: 2; top: 20px; left: 20px; font-size: 10px; letter-spacing: .17em; }
.card-body { position: relative; z-index: 2; }
.card-kicker { margin: 0 0 8px; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.card-body h3 { margin: 0 0 12px; font: 400 42px/1 var(--serif); letter-spacing: -.04em; }
.card-body > p:not(.card-kicker) { max-width: 460px; margin: 0 0 20px; font-size: 12px; line-height: 1.65; }
.card-meta { display: flex; gap: 10px; margin-bottom: 22px; }
.card-meta span { padding: 7px 10px; border: 1px solid currentColor; border-radius: 100px; font-size: 9px; opacity: .85; }
.view-treatment { width: 100%; display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0; border: 0; border-top: 1px solid currentColor; background: transparent; font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; cursor: pointer; }
.view-treatment span { font-size: 17px; transition: transform .3s var(--ease); }
.view-treatment:hover span { transform: translate(3px,-3px); }

.card-art { position: absolute; inset: 0; opacity: .75; pointer-events: none; }
.art-needle { background: radial-gradient(circle at 72% 24%, rgba(255,255,255,.11), transparent 32%); }
.art-needle span { position: absolute; right: 18%; top: 6%; width: 1px; height: 48%; background: rgba(255,255,255,.62); transform: rotate(32deg); transform-origin: bottom; }
.art-needle span:nth-child(2) { right: 37%; top: 13%; height: 38%; opacity: .45; }
.art-needle span:nth-child(3) { right: 5%; top: 14%; height: 34%; opacity: .28; }
.art-needle::after { content:""; position:absolute; width:220px; height:220px; border:1px solid rgba(255,255,255,.2); border-radius:50%; right:-70px; top:70px; }
.art-ripple span { position: absolute; width: 230px; height: 230px; border: 1px solid rgba(24,53,46,.25); border-radius: 50%; top: 15px; right: -32px; }
.art-ripple span:nth-child(2) { width: 175px; height: 175px; top: 43px; right: -4px; }
.art-ripple span:nth-child(3) { width: 115px; height: 115px; top: 73px; right: 26px; }
.art-drop span { position: absolute; width: 180px; height: 230px; right: 14px; top: 25px; border: 1px solid rgba(255,255,255,.35); border-radius: 68% 32% 61% 39% / 72% 45% 55% 28%; transform: rotate(18deg); }
.art-drop::after { content:""; position:absolute; width:120px; height:160px; right:45px; top:60px; border:1px solid rgba(255,255,255,.16); border-radius:68% 32% 61% 39% / 72% 45% 55% 28%; transform:rotate(18deg); }

.detail-shell { position: relative; min-height: 220px; margin: 0 14px 88px; background: var(--white); }
.detail-placeholder { min-height: 260px; display: grid; place-items: center; align-content: center; padding: 38px; text-align: center; }
.detail-placeholder svg { width: 72px; fill: none; stroke: var(--moss); stroke-width: 1; }
.detail-placeholder p { max-width: 330px; margin: 12px auto 0; font: 400 20px/1.3 var(--serif); }
.treatment-detail { position: relative; padding: 52px 20px 28px; }
.detail-close { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 8px; border: 0; background: transparent; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.detail-close span { font-size: 22px; font-weight: 300; }
.detail-header h2 { margin: 0 0 18px; font: 400 49px/1 var(--serif); letter-spacing: -.045em; }
.detail-lead { margin: 0; font-size: 14px; line-height: 1.75; }
.benefit-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.benefit-tags span { padding: 7px 10px; border-radius: 100px; background: var(--cream); font-size: 9px; }
.key-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 34px 0 20px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.key-facts div { min-height: 82px; padding: 13px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.key-facts dt { margin-bottom: 6px; font-size: 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .62; }
.key-facts dd { margin: 0; font: 400 16px/1.25 var(--serif); }
.primary-cta { display: flex; align-items: center; justify-content: space-between; min-height: 54px; padding: 0 17px; color: var(--white); background: var(--ink); text-decoration: none; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.primary-cta span { font-size: 18px; }

.accordion-group { margin-top: 34px; border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { position: relative; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 62px; cursor: pointer; font: 500 16px/1.2 var(--serif); }
summary::-webkit-details-marker { display: none; }
summary i { position: relative; width: 18px; height: 18px; }
summary i::before, summary i::after { content:""; position:absolute; left:2px; top:8px; width:14px; height:1px; background:var(--ink); transition:transform .35s var(--ease); }
summary i::after { transform: rotate(90deg); }
details[open] summary i::after { transform: rotate(0); }
.accordion-content { padding: 0 0 24px; color: rgba(24,53,46,.79); font-size: 12px; line-height: 1.75; }
.accordion-content p:first-child { margin-top: 0; }
.accordion-content p:last-child { margin-bottom: 0; }
.accordion-content ul { padding-left: 18px; }
.accordion-content strong { color: var(--ink); }
.product-compare > div { padding: 18px 0; border-top: 1px solid var(--line); }
.product-compare > div:first-child { padding-top: 0; border-top: 0; }
.product-compare h3, .pricing-list h3 { margin: 0 0 5px; color: var(--ink); font: 500 18px/1.2 var(--serif); }
.pricing-list > p { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 11px 0; border-bottom: 1px dotted var(--line); }
.pricing-list > p strong { flex: 0 0 auto; text-align: right; font-size: 11px; }
.pricing-list h3 { margin-top: 22px; }
.pricing-list h3:first-child { margin-top: 0; }
.pricing-list small { display: block; margin-top: 14px; }
.disclaimer summary { font-size: 14px; }
.disclaimer .accordion-content { font-size: 10px; }

.consultation-banner { position: relative; overflow: hidden; margin: 0 14px 20px; padding: 46px 22px; color: var(--paper); background: var(--ink); }
.consultation-banner h2 { max-width: 560px; margin: 0; font: 400 38px/1.04 var(--serif); letter-spacing: -.035em; }
.consultation-banner > p { position: relative; z-index: 2; max-width: 520px; margin: 24px 0; font-size: 12px; opacity: .82; }
.primary-cta.light { position: relative; z-index: 2; color: var(--ink); background: var(--paper); }
.banner-leaf { position: absolute; width: 200px; right: -80px; top: -18px; fill: none; stroke: rgba(244,241,233,.13); stroke-width: 1.2; }

footer { padding: 58px 22px 110px; }
.footer-brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.footer-brand strong { font: 400 32px/1 var(--serif); }
.footer-brand span { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; }
footer > p { max-width: 420px; font-size: 12px; }
.footer-links { display: flex; gap: 20px; margin: 28px 0; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
footer small { display: block; max-width: 620px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 9px; line-height: 1.6; opacity: .65; }
.mobile-book { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; justify-content: space-between; align-items: center; min-height: 54px; padding: 0 18px; color: var(--paper); background: var(--ink); box-shadow: 0 10px 30px rgba(13,34,29,.28); text-decoration: none; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; transition: transform .35s var(--ease); }
.mobile-book.is-hidden { transform: translateY(calc(100% + 20px)); }
.mobile-book span { font-size: 17px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes bloom { from { opacity: 0; transform: scale(.55) rotate(-8deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes nudge { 50% { transform: translateY(4px); } }

@media (min-width: 720px) {
  .site-header { position: fixed; height: 94px; padding: 0 42px; background: rgba(244,241,233,.78); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(24,53,46,.08); }
  .header-book span { display: inline; }
  .hero { min-height: 760px; padding: 185px 8vw 70px; grid-template-columns: 58% 42%; }
  .hero h1 { font-size: 72px; }
  .botanical-orbit { width: 520px; height: 650px; right: -50px; bottom: -35px; }
  .orb-label { left: 95px; top: 320px; font-size: 23px; }
  .hero-note { left: 8vw; bottom: 68px; }
  .section-heading, .menu-intro { padding: 0 7vw; }
  .concern-finder { padding-top: 120px; }
  .concern-scroll { padding-left: 7vw; padding-right: 7vw; }
  .filter-status { margin-left: 7vw; }
  .section-heading h2, .menu-intro h2 { font-size: 54px; }
  .treatment-menu { padding-top: 50px; }
  .treatment-list { grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 3vw; }
  .treatment-card { min-height: 570px; }
  .treatment-card[data-treatment="microneedling"] { margin-top: 70px; }
  .treatment-card[data-treatment="boosters"] { margin-top: 125px; }
  .card-body h3 { font-size: clamp(34px, 4vw, 53px); }
  .detail-shell { max-width: 1060px; margin: 40px auto 120px; }
  .treatment-detail { padding: 72px 7vw 64px; }
  .detail-header { max-width: 720px; }
  .detail-header h2 { font-size: 68px; }
  .detail-lead { font-size: 16px; }
  .key-facts { grid-template-columns: repeat(4, 1fr); }
  .key-facts div { min-height: 100px; padding: 20px; }
  .primary-cta { max-width: 420px; }
  .accordion-group { margin-top: 50px; }
  summary { min-height: 76px; font-size: 20px; }
  .accordion-content { max-width: 800px; font-size: 14px; }
  .consultation-banner { margin: 0 3vw 28px; padding: 80px 7vw; }
  .consultation-banner h2 { font-size: 55px; }
  .consultation-banner > p { font-size: 14px; }
  footer { padding: 74px 7vw 60px; }
  .mobile-book { display: none; }
}

@media (min-width: 1180px) {
  .hero h1 { font-size: 86px; max-width: 670px; }
  .hero-intro { font-size: 15px; }
  .treatment-list { padding: 0 6vw; }
  .treatment-card { padding: 28px; }
}

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