/*
  Verelle Med Spa (H12)
  Harmony: COMPLEMENTARY. Cool violet neutrals (lavender mist, heather haze, dusk, deep plum are one violet hue at
  different values) against its complement, a warm copper that appears only where the visitor should act. The
  violets come from the photo shoot (a bright white studio with lilac shadows, a lavender top, black uniforms);
  copper is the color of skin in warm light, the glow the studio is about. Calm and cool with one warm spark.
  60%  --mist     #F7F5F9  page background
  30%  --plum     #241C2B  headings, body ink, the dark band
       --haze     #E8E3EC  hairlines, tints, panel backgrounds
       --dusk     #655B6D  secondary text
  10%  --copper   #A3461D  buttons, selected chips, links
       --apricot  #FBE5D6  tint behind the first result and the success message
  Contrast (WCAG): plum on mist 15.19, dusk on mist 5.93, copper on mist 5.62, white on copper 6.08,
  plum on haze 13.03, copper on haze 4.82, dusk on haze 5.08, haze on plum 13.03, apricot on plum 13.54,
  copper on apricot 5.01, dusk on apricot 5.28, white on copper-deep 8.27, pill outline #8E8497 on plum 4.62.
  Shapes: everything square (2px), no pills, no shadows; hairlines carry the structure.
*/
:root {
  --mist: #F7F5F9; --plum: #241C2B; --haze: #E8E3EC; --dusk: #655B6D; --copper: #A3461D; --apricot: #FBE5D6;
  --copper-deep: #843715; --dusk-light: #8E8497; --white: #FFFFFF;
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Hanken Grotesk", system-ui, sans-serif;
  --pad: clamp(1.1rem, 5vw, 5rem); --max: 1320px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--mist); color: var(--plum); font: 400 1.0625rem/1.65 var(--sans); overflow-x: hidden; font-feature-settings: "kern" 1; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.02; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: clamp(3rem, 6.6vw, 5.8rem); }
h2 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
p { margin: 0; }
p + p { margin-top: .9em; }
.muted { color: var(--dusk); }
.lede { font-size: 1.15rem; max-width: 32em; color: var(--dusk); }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide { display: none !important; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--plum); color: var(--mist); padding: .6rem 1rem; z-index: 60; }
.skip:focus { top: 1rem; }
.wrap { width: min(100% - 2 * var(--pad), var(--max)); margin-inline: auto; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .8rem 1.6rem; font: 600 .95rem/1 var(--sans); letter-spacing: .01em; text-decoration: none; border: 1.5px solid transparent; border-radius: 2px; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn--accent { background: var(--copper); color: var(--white); }
.btn--accent:hover { background: var(--copper-deep); }
.btn--line { border-color: var(--plum); color: var(--plum); }
.btn--line:hover { background: var(--plum); color: var(--mist); }
.btn--light { background: var(--mist); color: var(--plum); }
.btn--light:hover { background: var(--haze); }
.btn--wide { width: 100%; }
.link { color: var(--copper); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.link:hover { color: var(--copper-deep); }

/* Header */
.top { position: sticky; top: 0; z-index: 30; background: var(--mist); border-bottom: 1px solid var(--haze); }
.top__in { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.logo { display: flex; align-items: baseline; gap: .5rem; text-decoration: none; font: 500 1.5rem/1 var(--serif); letter-spacing: .01em; margin-right: auto; }
.logo small { font: 500 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dusk); }
.nav { display: flex; gap: clamp(1rem, 2.6vw, 2.4rem); font-weight: 500; font-size: .95rem; }
.nav a { text-decoration: none; padding: .4rem 0; border-bottom: 1.5px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--copper); }
.top .btn { min-height: 44px; padding-inline: 1.2rem; }
.burger { display: none; min-height: 44px; padding: .5rem .9rem; border: 1.5px solid var(--plum); border-radius: 2px; background: transparent; font: 600 .9rem var(--sans); color: var(--plum); cursor: pointer; }

/* Hero: photo left, text right, magazine spread */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: min(calc(100vh - 76px), 820px); }
.hero__media { position: relative; overflow: hidden; background: var(--haze); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; min-height: 520px; }
.hero__copy { display: grid; align-content: center; gap: 1.6rem; padding: clamp(2rem, 6vw, 6rem) var(--pad) clamp(2rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem); }
.hero h1 { max-width: 8.5em; }
.hero h1 em { font-style: italic; font-weight: 400; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__note { font-size: .9rem; color: var(--dusk); border-top: 1px solid var(--haze); padding-top: 1rem; max-width: 30em; }

/* Two sides */
.sides { padding: clamp(3rem, 7vw, 6rem) 0; }
.sides__head { max-width: 30em; margin-bottom: 2.5rem; display: grid; gap: .8rem; }
.sides__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 3rem); }
.side { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: start; border-top: 1px solid var(--plum); padding-top: 1.4rem; }
.side img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.side h3 { margin-bottom: .6rem; }
.side ul { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; font-size: .95rem; }
.side li { padding-left: 1rem; position: relative; }
.side li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; height: 5px; background: var(--copper); }
.side .link { display: inline-block; margin-top: 1rem; }

/* Treatment finder teaser */
.finder-teaser { background: var(--plum); color: var(--mist); padding: clamp(3rem, 7vw, 6rem) 0; }
.finder-teaser h2 { color: var(--mist); max-width: 14em; }
.finder-teaser p { color: var(--haze); max-width: 32em; margin-top: 1rem; }
.pills { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0 0; padding: 0; list-style: none; }
.pill { display: inline-flex; align-items: center; min-height: 46px; padding: .6rem 1.1rem; border: 1px solid var(--dusk-light); color: var(--mist); text-decoration: none; font-size: .95rem; font-weight: 500; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.pill:hover { background: var(--mist); color: var(--plum); border-color: var(--mist); }

/* Providers */
.docs { padding: clamp(3rem, 7vw, 6rem) 0; }
.docs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 3vw, 3rem); margin-top: 2.5rem; }
.dr { display: grid; grid-template-columns: 1fr 1.1fr; gap: 1.5rem; align-items: end; }
.dr img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.dr__body { display: grid; gap: .5rem; padding-bottom: .4rem; }
.dr__role { font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--copper); font-weight: 600; }
.dr p.muted { font-size: .97rem; }

/* Visit timeline (a real sequence) */
.visit { border-top: 1px solid var(--haze); padding: clamp(3rem, 7vw, 6rem) 0; }
.visit__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.visit__step { display: grid; gap: .5rem; border-top: 1px solid var(--plum); padding-top: 1rem; }
.visit__n { font: 400 2rem/1 var(--serif); color: var(--copper); }
.visit__step h3 { font-size: 1.4rem; }
.visit__step p { color: var(--dusk); font-size: .95rem; }

/* Practical */
.practical { background: var(--haze); padding: clamp(2.5rem, 6vw, 5rem) 0; }
.practical__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
.practical h2 { font-size: 1.8rem; }
.hours { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .3rem; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; border-bottom: 1px solid rgba(36, 28, 43, .15); font-size: .95rem; }

/* Footer */
.foot { padding: 2rem 0; border-top: 1px solid var(--haze); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--dusk); }

/* Page head */
.page-head { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1.5rem, 4vw, 3rem); display: grid; gap: 1rem; }
.page-head > * { max-width: 30em; }
.page-head h1 { max-width: 9em; }

/* Treatments page */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--plum); margin-bottom: 2rem; }
.tabs a { text-decoration: none; padding: .9rem 1.4rem; font: 400 1.35rem/1 var(--serif); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a[aria-current="true"] { border-bottom-color: var(--copper); }
.tlist { display: grid; gap: 0; padding-bottom: clamp(2rem, 5vw, 4rem); }
.tgroup { display: grid; grid-template-columns: .8fr 1.6fr; gap: clamp(1.2rem, 3vw, 3rem); padding: clamp(1.6rem, 3vw, 2.6rem) 0; border-top: 1px solid var(--haze); }
.tgroup:first-child { border-top: 0; padding-top: 0; }
.tgroup h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.tgroup > div > p { color: var(--dusk); margin-top: .8rem; max-width: 24em; }
.tgroup img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-top: 1.4rem; max-width: 320px; }
.trow { display: grid; grid-template-columns: 1.1fr 1.6fr 200px; gap: 1.2rem; padding: 1.1rem 0; border-top: 1px solid var(--haze); align-items: baseline; }
.trow:first-child { border-top: 0; padding-top: 0; }
.trow h3 { font-size: 1.45rem; }
.trow p { color: var(--dusk); font-size: .95rem; }
.trow__meta { text-align: right; font-size: .9rem; white-space: nowrap; display: grid; gap: .1rem; }
.trow__meta b { font-weight: 600; }
.trow__meta span { color: var(--dusk); }

/* Finder page */
.finder { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1.5rem, 4vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); align-items: start; }
.finder__controls { display: grid; gap: 2rem; position: sticky; top: 96px; }
.finder fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .8rem; }
.finder legend { font: 400 1.5rem/1.1 var(--serif); margin-bottom: .6rem; }
.choice { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice label { display: inline-flex; align-items: center; min-height: 46px; padding: .6rem 1.05rem; border: 1px solid var(--dusk); font-size: .95rem; font-weight: 500; cursor: pointer; background: transparent; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.choice input:checked + label { background: var(--copper); border-color: var(--copper); color: var(--white); }
.choice input:focus-visible + label { outline: 3px solid var(--copper); outline-offset: 3px; }
.finder__note { font-size: .88rem; color: var(--dusk); border-top: 1px solid var(--haze); padding-top: 1rem; }
.results { display: grid; gap: 0; }
.results__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--plum); padding-bottom: .8rem; margin-bottom: .4rem; }
.results__head h2 { font-size: 1.8rem; }
.results__count { color: var(--dusk); font-size: .95rem; }
.result { display: grid; grid-template-columns: 1fr auto; gap: 1rem 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--haze); align-items: start; }
.result h3 { font-size: 1.6rem; }
.result__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 .6rem; padding: 0; list-style: none; }
.result__tags li { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--copper); font-weight: 600; }
.result__tags li + li::before { content: "/"; margin-right: .4rem; color: var(--dusk); }
.result p { color: var(--dusk); font-size: .97rem; max-width: 34em; }
.result__side { text-align: right; display: grid; gap: .6rem; justify-items: end; }
.result__side b { font-weight: 600; white-space: nowrap; }
.result__side small { color: var(--dusk); }
.result--fit { background: var(--apricot); margin-inline: -1rem; padding-inline: 1rem; }
.results__empty { padding: 2rem 0; color: var(--dusk); }
.results__foot { padding-top: 1.4rem; display: grid; gap: .6rem; }

/* Book page */
.book { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.5rem, 4vw, 4rem); padding-bottom: clamp(2rem, 5vw, 4rem); align-items: start; }
.form { display: grid; gap: 1.1rem; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .35rem; }
.field label, .field > span { font-weight: 600; font-size: .92rem; }
.field input, .field select, .field textarea { font: 400 1rem/1.4 var(--sans); color: var(--plum); padding: .8rem .9rem; border: 1px solid var(--dusk); border-radius: 2px; background: var(--white); width: 100%; min-height: 50px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--copper); outline-offset: 1px; border-color: var(--copper); }
.field textarea { min-height: 110px; resize: vertical; }
.field small { color: var(--dusk); font-size: .85rem; }
.note { font-size: .88rem; color: var(--dusk); }
.success { display: grid; gap: .8rem; background: var(--apricot); padding: 2rem; }
.success[hidden] { display: none; }
.success h2 { font-size: 2rem; }
.aside { display: grid; gap: 1.5rem; }
.aside__box { border-top: 1px solid var(--plum); padding-top: 1.2rem; display: grid; gap: .5rem; }
.aside__box h2 { font-size: 1.6rem; }
.aside__box a.tel { font: 400 1.9rem/1.1 var(--serif); text-decoration: none; }
.aside img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pay { display: grid; gap: .6rem; }

/* One reveal: the hero photo uncovers and the copy settles, then nothing else moves */
@media (prefers-reduced-motion: no-preference) {
  .hero__media img { clip-path: inset(0 0 0 100%); animation: uncover 1.1s cubic-bezier(.7, 0, .2, 1) .1s forwards; }
  .hero__copy > * { opacity: 0; transform: translateY(10px); animation: settle .7s cubic-bezier(.2, .7, .2, 1) forwards; }
  .hero__copy > :nth-child(2) { animation-delay: .15s; } .hero__copy > :nth-child(3) { animation-delay: .3s; } .hero__copy > :nth-child(4) { animation-delay: .45s; }
  @keyframes uncover { to { clip-path: inset(0 0 0 0); } }
  @keyframes settle { to { opacity: 1; transform: none; } }
}

@media (max-width: 1000px) {
  .visit__grid { grid-template-columns: 1fr 1fr; }
  .practical__grid { grid-template-columns: 1fr; }
  .finder, .book { grid-template-columns: 1fr; }
  .finder__controls { position: static; }
  .side { grid-template-columns: 150px 1fr; }
}
@media (max-width: 800px) {
  .nav, .top .btn--accent { display: none; }
  .burger { display: inline-flex; }
  .top.is-open .nav { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--mist); border-bottom: 1px solid var(--haze); padding: 1rem var(--pad) 1.4rem; gap: .3rem; font-size: 1.1rem; }
  .top.is-open .nav a { padding: .7rem 0; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__media img { min-height: 0; aspect-ratio: 4 / 3.6; }
  .hero__copy { padding: 2rem var(--pad) 2.5rem; }
  .sides__grid, .docs__grid, .dr, .tgroup, .row { grid-template-columns: 1fr; }
  .side { grid-template-columns: 1fr; }
  .side img { max-width: 220px; }
  .dr img { max-width: 300px; }
  .trow { grid-template-columns: 1fr; gap: .4rem; }
  .trow__meta { text-align: left; }
  .result { grid-template-columns: 1fr; }
  .result__side { text-align: left; justify-items: start; }
  .visit__grid { grid-template-columns: 1fr; }
  .tabs a { padding: .8rem .9rem; font-size: 1.15rem; }
  .tgroup img { display: none; }
}