@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/cormorant.woff2") format("woff2");
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("assets/cormorant-italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("assets/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
:root {
  --paper: #faf6ee;
  --linen: #eee9da;
  --ink: #242b1d;
  --muted: #51564a;
  --olive: #36412b;
  --accent: #85552f;
  --rule: #dbd4c4;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.65 var(--sans); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: .99; }
h2 { font-size: clamp(2.85rem, 5.6vw, 5.15rem); letter-spacing: -.045em; }
h3 { font-size: 2rem; letter-spacing: -.022em; }
h1 em, h2 em { font-weight: 500; color: var(--accent); }
a { color: inherit; }
img { display: block; width: 100%; }
:focus-visible { outline: 2px solid #a46335; outline-offset: 5px; }
.wrap { width: min(100% - 5rem, 76rem); margin-inline: auto; }
.skip { position: absolute; z-index: 2; top: .75rem; left: .75rem; padding: .7rem 1rem; background: var(--paper); transform: translateY(-180%); }
.skip:focus { transform: translateY(0); }

.site-header { border-bottom: 1px solid var(--rule); }
.masthead { min-height: 5.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1.4rem; }
.brand { display: inline-flex; align-items: center; gap: .85rem; text-decoration: none; font: 600 1.75rem/.88 var(--serif); white-space: nowrap; }
.brand small { display: block; margin-top: .37rem; font: 600 .57rem/1.15 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
.lotus { position: relative; display: inline-block; flex: none; width: 2.15rem; height: 2.1rem; color: var(--accent); }
.lotus i, .lotus b, .lotus em {
  position: absolute;
  bottom: .45rem;
  width: .86rem;
  height: 1.3rem;
  border: 1px solid currentColor;
  border-radius: 78% 0 78% 0;
}
.lotus i { left: .65rem; transform: rotate(-45deg); }
.lotus b { left: .23rem; bottom: .21rem; transform: rotate(-72deg); }
.lotus em { left: 1.07rem; bottom: .21rem; transform: rotate(-18deg); }
.masthead nav { display: flex; gap: clamp(1.1rem, 3vw, 2.75rem); align-items: center; }
.masthead nav a { text-decoration: none; font-size: .87rem; font-weight: 600; }
.masthead nav a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .3em; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  min-height: 2.9rem;
  padding: .75rem 1.15rem;
  border: 1px solid var(--olive);
  text-decoration: none;
  font-weight: 700;
  font-size: .83rem;
  line-height: 1.3;
}
.button span, .text-link span { font-size: 1.05rem; line-height: 1; }
.button:hover { background: var(--linen); }
.button.primary { background: var(--olive); color: white; padding: .98rem 1.22rem; min-height: 3.3rem; }
.button.primary:hover { background: #4a583b; }
.text-link { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: .87rem; text-underline-offset: .28em; }
.text-link:hover { text-decoration-thickness: 2px; }

.hero { overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; min-height: clamp(33rem, 44vw, 42rem); }
.hero-copy { position: relative; z-index: 1; padding: 4rem 1.5rem 4rem 0; }
.eyebrow { display: flex; align-items: center; gap: .65rem; font-size: .7rem; font-weight: 700; line-height: 1.4; letter-spacing: .19em; text-transform: uppercase; color: var(--accent); }
.eyebrow span { width: 1.65rem; height: 1px; background: currentColor; }
.hero h1 { margin-top: 1.15rem; font-size: clamp(3.75rem, 6.65vw, 7.25rem); line-height: .87; letter-spacing: -.06em; }
.hero-description { max-width: 29rem; margin-top: 1.65rem; color: var(--muted); font-size: 1.04rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.55rem; margin-top: 1.85rem; }
.hero-photo { position: relative; align-self: stretch; }
.hero-photo img { position: absolute; inset: 0; width: calc(100% + max(2.5rem, (100vw - 76rem) / 2)); height: 100%; object-fit: cover; object-position: 61% 50%; }

.visit-strip { background: var(--linen); border-bottom: 1px solid var(--rule); }
.visit-strip-inner { min-height: 6.75rem; display: grid; grid-template-columns: 1fr 1.25fr auto; align-items: center; gap: 1.25rem; padding-block: 1rem; }
.visit-strip-inner > div { display: flex; align-items: center; gap: .85rem; }
.visit-strip p { line-height: 1.35; }
.visit-strip strong { font-weight: 700; font-size: .9rem; }
.visit-strip small { display: block; margin-top: .18rem; font-size: .82rem; color: var(--muted); }
.tiny-icon { color: var(--accent); width: 1.4rem; flex: none; text-align: center; font-size: 1.7rem; line-height: 1; }
.pin { position: relative; width: .92rem; height: .92rem; margin-inline: .2rem .27rem; border: 1.4px solid; border-radius: 50% 50% 50% 0; transform: translateY(-.15rem) rotate(-45deg); }
.pin::after { content: ""; position: absolute; inset: .22rem; border: 1px solid; border-radius: 50%; }

.treatments { padding-block: clamp(4.6rem, 8vw, 7.7rem); }
.section-heading .eyebrow, .about .eyebrow, .contact .eyebrow, .faq .eyebrow { margin-bottom: 1rem; }
.treatment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); margin-top: 2.75rem; }
.treatment { border-top: 1px solid #a39278; padding: 1.65rem clamp(.25rem, 2vw, 1.4rem) .3rem 0; }
.treatment-icon { display: block; color: var(--accent); width: 2rem; height: 2rem; margin-bottom: 1.25rem; position: relative; }
.leaf { width: 1.15rem; height: 1.65rem; margin-left: .25rem; margin-bottom: 1.6rem; border: 1px solid; border-radius: 85% 0; transform: rotate(19deg); }
.leaf::before { content: ""; position: absolute; top: .22rem; bottom: -.25rem; width: 1px; background: currentColor; left: 47%; transform: rotate(22deg); }
.rings::before, .rings::after { content: ""; position: absolute; width: 1.25rem; height: 1.25rem; border: 1px solid; border-radius: 50%; left: .12rem; top: .17rem; }
.rings::after { left: .65rem; top: .6rem; }
.sparkle { font: 400 2.5rem/.75 Georgia, serif; }
.treatment p { color: var(--muted); margin-top: .6rem; max-width: 22rem; }

.about { background: var(--linen); }
.about-grid { display: grid; grid-template-columns: .82fr 1fr; align-items: center; gap: clamp(2.5rem, 8vw, 8rem); padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.about-photo { height: clamp(22rem, 38vw, 33rem); }
.about-photo img { height: 100%; object-fit: cover; object-position: center 49%; }
.about-copy p:not(.eyebrow) { max-width: 29rem; margin-top: 1.25rem; color: var(--muted); }
.about-copy .text-link { margin-top: 1.5rem; }

.contact { background: var(--olive); color: var(--paper); padding-block: clamp(4rem, 7vw, 6.5rem); }
.contact .eyebrow { color: #f1cd9f; }
.contact-heading { display: grid; grid-template-columns: 1.35fr 1fr; align-items: end; gap: 1.25rem; }
.contact-heading > p { color: #f1eadb; max-width: 22rem; padding-bottom: .18rem; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr .95fr; gap: 1.5rem; border-block: 1px solid #79806c; padding-block: 1.9rem; margin-top: 2.4rem; }
.contact-grid h3 { font: 700 .77rem/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #f1cd9f; margin-bottom: .7rem; }
.contact-phone {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-height: 3.25rem;
  padding: .6rem .9rem;
  border-radius: .25rem;
  background: #f1e5cf;
  color: var(--ink);
  font: 700 clamp(1.22rem, 2.4vw, 1.45rem)/1.2 var(--sans);
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: none;
  white-space: nowrap;
}
.contact-phone:hover { background: #fff2db; }
.contact-phone:focus-visible { outline-color: #f1cd9f; }
.contact-phone-arrow { font-size: 1.1rem; }
.contact-phone + p { margin-top: .55rem; font-size: .87rem; color: #f1eadb; }
.contact-grid address { font-style: normal; }
.contact-grid .text-link { margin-top: .5rem; }
.service-area { margin-top: 1.2rem; display: flex; gap: .45rem 1rem; flex-wrap: wrap; color: #f1eadb; font-size: .83rem; }
.service-area strong { color: #f1cd9f; }

.faq { display: grid; grid-template-columns: 1fr 1.2fr; gap: 2.5rem; padding-block: clamp(3.8rem, 7vw, 6.3rem); }
.faq h2 { font-size: clamp(2.65rem, 4.2vw, 4.1rem); }
.faq-list { border-top: 1px solid var(--rule); }
.faq-list details { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; }
.faq-list summary { list-style: none; position: relative; padding: .95rem 2rem .95rem 0; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: .15rem; color: var(--accent); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { color: var(--muted); padding: 0 1.5rem 1rem 0; }

.site-footer { background: var(--linen); padding-block: 1.9rem 1.5rem; border-top: 1px solid var(--rule); }
.footer-row { display: flex; align-items: center; gap: 1rem 1.65rem; flex-wrap: wrap; }
.footer-row .brand { margin-right: auto; }
.privacy { margin-top: 1.35rem; border-top: 1px solid var(--rule); padding-top: .8rem; font-size: .8rem; }
.privacy p, .image-note { color: var(--muted); font-size: .76rem; margin-top: .35rem; }

@media (max-width: 820px) {
  .wrap { width: calc(100% - 3rem); }
  .hero-grid { min-height: 29rem; grid-template-columns: 1.06fr .94fr; }
  .hero-photo img { width: calc(100% + 1.5rem); }
  .about-grid { gap: 2.25rem; }
}
@media (max-width: 650px) {
  .wrap { width: calc(100% - 2.25rem); }
  .masthead { min-height: auto; flex-wrap: wrap; gap: .65rem .4rem; padding-top: .9rem; }
  .masthead .brand { font-size: 1.5rem; gap: .55rem; }
  .masthead .brand small { font-size: .49rem; letter-spacing: .12em; }
  .masthead nav { flex-basis: 100%; order: 3; justify-content: space-between; border-top: 1px solid var(--rule); }
  .masthead nav a { padding-block: .66rem; }
  .header-book { min-height: 2.4rem; padding: .55rem .6rem; font-size: .74rem; gap: .4rem; }
  .hero-grid, .about-grid, .contact-heading, .faq { grid-template-columns: 1fr; }
  .hero-grid { width: 100%; }
  .hero-copy { padding: 2.85rem 1.125rem 2.45rem; }
  .hero h1 { font-size: clamp(3.5rem, 12.5vw, 5.45rem); }
  .hero-description { margin-top: 1.2rem; }
  .hero-photo { min-height: clamp(16.5rem, 69vw, 25rem); }
  .hero-photo img { width: 100%; object-position: center 57%; }
  .visit-strip-inner { grid-template-columns: 1fr 1fr; gap: .9rem .65rem; }
  .visit-strip-inner > div { gap: .45rem; align-items: flex-start; }
  .visit-strip-inner > a { grid-column: 1 / -1; }
  .treatment-grid { grid-template-columns: 1fr; gap: 1.2rem; margin-top: 1.6rem; }
  .treatment { padding-top: 1.1rem; }
  .treatment-icon { margin-bottom: .65rem; }
  .leaf { margin-bottom: 1rem; }
  .about-photo { height: clamp(18rem, 85vw, 26rem); }
  .contact-grid { grid-template-columns: 1fr; padding-block: 0; gap: 0; }
  .contact-grid > div { padding-block: 1.15rem; }
  .contact-grid > div + div { border-top: 1px solid #79806c; }
  .faq { gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}