:root{color-scheme:light;--ink:#252a21;--deep:#20251d;--cream:#f5f0e6;--sage:#d9dcc9;--line:#c4c3b5;--serif:"Instrument Serif",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);line-height:1.6}a{color:inherit;text-underline-offset:4px}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #a46b37;outline-offset:5px}.skip{position:absolute;z-index:8;top:0;left:1rem;padding:.5rem;background:white;transform:translateY(-110%)}.skip:focus{transform:none}
.header,footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px clamp(22px,5vw,78px);background:var(--deep);color:var(--cream)}.wordmark{font:400 2.25rem/.9 var(--serif);letter-spacing:.15em;text-decoration:none;display:inline-grid;text-align:center}.wordmark span{font:600 .47rem/1.4 var(--sans);letter-spacing:.29em;margin-top:6px}.header nav,footer div{display:flex;align-items:center;gap:clamp(16px,3vw,48px)}.header nav a,.header-cta,footer div a{font-size:.85rem;text-decoration:none}.header nav a:hover,footer div a:hover{text-decoration:underline}.header-cta{border:1px solid #bdbfb0;padding:9px 15px;transition:background .25s,color .25s}.header-cta:hover{background:var(--cream);color:var(--deep)}.header-cta span{margin-left:10px}.menu{display:none}
.hero{position:relative;isolation:isolate;display:grid;align-items:center;overflow:hidden;min-height:min(760px,82svh);background:#2b3024;color:var(--cream)}.hero-image{position:absolute;z-index:-2;inset:-5% 0;width:100%;height:110%;object-fit:cover;object-position:60% 45%;transform:translateY(var(--drift,0px));animation:photo 1.35s ease-out both}.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,26,18,.94),rgba(22,28,19,.75) 37%,rgba(22,28,19,.09) 80%)}.hero-inner{padding:85px clamp(23px,8vw,135px) 105px}.eyebrow{font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;font-weight:700;margin:0 0 19px}.hero h1,.shell h2{font:400 clamp(4rem,8vw,8.1rem)/.91 var(--serif);letter-spacing:-.025em;margin:0}.hero em{color:#e3d9bd}.hero-description{max-width:32ch;margin:26px 0 25px;color:#eee9de;font-size:1.03rem}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;padding:13px 19px;border:1px solid transparent;text-decoration:none;font-size:.88rem;font-weight:700;transition:background .25s,color .25s,transform .25s}.button:hover{transform:translateY(-3px)}.light{background:var(--cream);color:var(--deep)}.light:hover{background:#d9dcc9}.dark{background:var(--deep);color:var(--cream)}.dark:hover{background:#434b3b}.explore{position:absolute;bottom:26px;left:clamp(23px,8vw,135px);font-size:.75rem;text-decoration:none}.explore span{display:inline-block;margin-right:8px;animation:bob 2s ease-in-out 3}
.shell{width:min(1190px,calc(100% - 2 * clamp(23px,8vw,135px)));margin-inline:auto}.services,.location{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,8vw,120px);padding-block:clamp(65px,10vw,145px)}.shell h2{font-size:clamp(3.4rem,6.6vw,6.1rem)}.shell h2 em{font-weight:400}.service-list{border-bottom:1px solid var(--line)}details{border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;font:400 clamp(1.75rem,3vw,2.6rem)/1.1 var(--serif);padding:19px 0;transition:padding .25s}.service-list summary:hover{padding-left:8px}summary::-webkit-details-marker{display:none}summary span::after{content:"+";font:400 1.35rem var(--sans)}details[open] summary span::after{content:"−"}details div{padding:0 18px 21px 0;animation:enter .35s ease both}details p{margin:0 0 9px;max-width:43ch}details a,.map-link,.reel-link{font-size:.84rem;font-weight:700}
.doctor{background:var(--deep);color:var(--cream);overflow:hidden}.doctor-grid{display:grid;grid-template-columns:1fr .85fr;gap:clamp(36px,10vw,155px);align-items:center;padding-block:clamp(62px,9vw,125px)}.doctor h2 em{color:#d8d9ba}.doctor-grid>div>p:not(.eyebrow){max-width:43ch;margin:24px 0}.reel{position:relative;padding:clamp(25px,4vw,55px);background:#394334;border:1px solid #646e58;overflow:hidden}.reel h3{font:400 clamp(2.4rem,5vw,4.4rem)/.95 var(--serif);margin:0}.reel-link{display:block;margin-top:15px}.reel iframe{margin-top:16px;width:100%;height:520px;border:0;background:white}.location{align-items:end}.location address{font-style:normal;margin-bottom:7px}.location .button{display:flex;width:fit-content;margin-top:21px}footer{min-height:110px}
.intro{animation:enter .85s cubic-bezier(.2,.7,.3,1) both}.intro:nth-child(2){animation-delay:.1s}.intro:nth-child(3){animation-delay:.2s}.intro:nth-child(4){animation-delay:.3s}.reveal.waiting{opacity:0;transform:translateY(26px)}.reveal{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}@keyframes enter{from{opacity:0;translate:0 20px}to{opacity:1;translate:0 0}}@keyframes photo{from{scale:1.07;opacity:.25}to{scale:1;opacity:1}}@keyframes bob{50%{translate:0 4px}}
@media(max-width:720px){.header{position:relative;flex-wrap:wrap;gap:12px}.header .wordmark{font-size:1.9rem}.header-cta{margin-left:auto;font-size:.72rem;padding:8px}.header-cta span{display:none}.menu{display:block;background:transparent;border:0;color:inherit;font-size:.75rem;padding:6px}.header nav{width:100%;order:1;justify-content:space-between;gap:8px;padding:9px 0 1px}.header nav a{font-size:.75rem}.js .header nav:not(.open){display:none}.hero{min-height:650px;align-items:end}.hero-image{object-position:63% 35%}.hero::after{background:linear-gradient(0deg,#191e16 0%,rgba(25,30,22,.86) 28%,rgba(25,30,22,.1) 82%)}.hero-inner{padding-top:210px;padding-bottom:84px}.hero h1{font-size:clamp(3.35rem,11vw,5.2rem)}.hero .eyebrow{font-size:.62rem}.services,.doctor-grid,.location{grid-template-columns:1fr}.reel iframe{height:490px}footer{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal.waiting{opacity:1;transform:none}.hero-image{transform:none}}
[hidden]{display:none!important}.menu{display:none}@media(max-width:720px){.js .menu{display:block}}

.doctor {
  position: relative;
  isolation: isolate;
}
.doctor-background {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% 42%;
}
.doctor::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(24,29,22,.98), rgba(24,29,22,.79) 52%, rgba(24,29,22,.49));
}
.doctor .reel {
  background: rgba(41,50,38,.9);
}
.background-toggle {
  position: absolute;
  bottom: 12px;
  right: clamp(23px,8vw,135px);
  padding: 5px 10px;
  border: 1px solid #a8ad9e;
  background: #20251d;
  color: var(--cream);
  font-size: .72rem;
}
@media (max-width:720px) {
  .doctor-background { object-position: 62% 30%; }
  .doctor::before { background: rgba(24,29,22,.81); }
}
@media (prefers-reduced-motion:reduce) {
  .doctor-background, .background-toggle { display: none; }
}

.doctor::before {
  background: linear-gradient(90deg, rgba(19,23,18,.74), rgba(19,23,18,.34) 60%, rgba(19,23,18,.28));
}
.doctor-grid {
  column-gap: clamp(36px, 7vw, 100px);
  row-gap: clamp(32px, 5vw, 65px);
}
.natalia-portraits {
  display: grid;
  grid-template-columns: 1.2fr .9fr;
  align-items: end;
  gap: clamp(8px, 1.5vw, 20px);
  margin: 0;
}
.natalia-portraits a {
  display: block;
  overflow: hidden;
  border: 1px solid #c5a77b;
}
.natalia-portraits a:last-child {
  margin-bottom: 17%;
}
.natalia-portraits img {
  display: block;
  width: 100%;
  height: auto;
  transition: scale .45s ease;
}
.natalia-portraits a:hover img {
  scale: 1.04;
}
.doctor .reel {
  grid-column: 1 / -1;
  max-width: 650px;
}
@media(max-width:720px) {
  .doctor::before { background: rgba(19,23,18,.42); }
}

.natalia-portraits > div {
  overflow: hidden;
  border: 1px solid #c5a77b;
}
.doctor .reel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, 205px);
  gap: clamp(20px, 4vw, 52px);
  align-items: center;
  max-width: 730px;
}
.reel p:not(.eyebrow) { margin-bottom: 0; }
.capilar-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: #171b16;
}
@media (max-width:520px) {
  .doctor .reel { grid-template-columns: 1fr; }
  .capilar-video { width: min(100%, 240px); }
}

.location { align-items: center; }
.location-copy address { margin-top: 26px; }
.location-visual {
  width: min(100%, 526px);
  margin: 0;
  justify-self: end;
  border: 1px solid #c4c3b5;
  box-shadow: 0 20px 45px rgba(32,37,29,.12);
}
.location-visual img { display: block; width: 100%; height: auto; }
@media (max-width:720px) {
  .location-visual { justify-self: start; }
}

.products {
  padding-block: clamp(44px, 7vw, 100px) clamp(62px, 9vw, 125px);
  border-top: 1px solid var(--line);
}
.products-heading {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  gap: clamp(20px, 5vw, 70px);
  margin-bottom: clamp(28px, 4vw, 55px);
}
.products-heading > p { max-width: 32ch; margin: 0; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.product-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid var(--line);
  background: #e9e6d7;
}
.product-card:nth-child(2) { background: #efe4d5; }
.product-card:nth-child(3) { background: #dfe2d2; }
.product-card h3 { font: 400 clamp(2rem, 3.2vw, 3rem)/1 var(--serif); margin: 0; }
.product-card p { font-size: .93rem; margin: 14px 0 22px; }
.product-card a { font-size: .83rem; font-weight: 700; margin-top: auto; }
.product-card a:hover, .routine-link:hover { color: #624c2d; }
.routine-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0 0;
  margin-top: 16px;
  text-decoration: none;
}
.routine-link strong { font: 400 clamp(1.6rem, 3vw, 2.15rem)/1.05 var(--serif); display: block; }
.routine-link small { display: block; margin-top: 6px; text-decoration: underline; }
@media (max-width:720px) {
  .products-heading, .product-grid { grid-template-columns: 1fr; }
}
