:root {
  --ink: #0c3149;
  --deep: #06273d;
  --blue: #1a729d;
  --sky: #7ec8e8;
  --gold: #d6ad6c;
  --mist: #e9f5fa;
  --ice: #f5fbfd;
  --white: #fff;
  --sand: #f2eee8;
  --muted: #607787;
  --line: rgba(12, 49, 73, .15);
  --shadow: 0 24px 70px rgba(3, 35, 55, .15);
  --display: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--ice); font-family: var(--sans); line-height: 1.6; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 1000; background: white; color: var(--deep); padding: 10px 16px; border-radius: 0 0 8px 8px; transition: top .2s; }
.skip-link:focus { top: 0; }

.site-header { height: 88px; padding: 0 clamp(24px, 5vw, 80px); display: flex; align-items: center; justify-content: space-between; position: absolute; inset: 0 0 auto; z-index: 20; color: white; border-bottom: 1px solid rgba(255,255,255,.25); }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.58); border-radius: 50%; font-family: var(--display); letter-spacing: -.05em; font-size: 17px; }
.brand-text { display: grid; line-height: 1.12; }
.brand-name { font-family: var(--display); font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: .02em; color: #e4f7ff; text-shadow: 0 2px 14px rgba(0,20,34,.5); }
.brand-caption { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; opacity: .88; margin-top: 4px; }
.navigation { display: flex; align-items: center; gap: clamp(22px, 3vw, 46px); }
.navigation > a { color: inherit; text-decoration: none; font-size: 13px; letter-spacing: .08em; position: relative; }
.navigation > a::after { content: ""; position: absolute; height: 1px; left: 0; right: 100%; bottom: -7px; background: currentColor; transition: right .25s; }
.navigation > a:hover::after, .navigation > a:focus-visible::after { right: 0; }
.menu-toggle { display: none; background: none; border: 0; padding: 8px; }
.menu-toggle > span:not(.sr-only) { width: 26px; height: 1px; background: white; margin: 5px; display: block; }

.button { border: 0; border-radius: 0; background: var(--deep); color: white; min-height: 52px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; cursor: pointer; text-decoration: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-2px); background: #124b6b; }
.button:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #f1bc66; outline-offset: 3px; }
.button-small { min-height: 42px; padding: 0 18px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.55); }

.hero { min-height: 100svh; position: relative; overflow: hidden; color: white; background: var(--deep); }
.hero-media { position: absolute; inset: 0; background-image: url("assets/hero-premium.webp"); background-size: cover; background-position: center center; transform: scale(1.005); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,30,49,.86) 0%, rgba(3,40,63,.58) 40%, rgba(6,42,63,.04) 72%), linear-gradient(0deg, rgba(5,35,52,.38), transparent 42%); }
.hero-content { position: relative; z-index: 2; min-height: 100svh; max-width: 760px; display: flex; flex-direction: column; justify-content: center; padding: 150px 5vw 126px; margin-left: clamp(0px, 4vw, 64px); }
.eyebrow, .section-index { margin: 0 0 24px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; font-weight: 650; }
.eyebrow { color: #bfe7f6; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.045em; line-height: .94; }
h1 { font-size: clamp(64px, 8vw, 124px); margin-bottom: 32px; max-width: 830px; }
h1 em, h2 em { font-weight: 400; color: var(--sky); }
.hero-copy { max-width: 570px; font-size: clamp(17px, 1.4vw, 21px); color: rgba(255,255,255,.85); line-height: 1.6; }
.hero-actions { display: flex; align-items: center; gap: 32px; margin-top: 26px; }
.hero-actions .button { background: white; color: var(--deep); }
.hero-actions .button:hover { background: var(--sky); }
.text-link { color: white; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.45); padding: 14px 0 8px; }
.hero-credential { position: absolute; z-index: 2; right: 5vw; bottom: 40px; display: flex; gap: 18px; align-items: center; padding: 15px 18px; border-left: 2px solid #8cd4ef; background: rgba(3,38,59,.42); backdrop-filter: blur(7px); }
.credential-line { height: 1px; width: 70px; background: rgba(255,255,255,.55); }
.hero-credential div:last-child { display: grid; line-height: 1.3; text-align: right; }
.hero-credential strong { font-family: var(--display); font-size: clamp(25px, 2.4vw, 34px); font-weight: 500; color: #dff5ff; letter-spacing: .015em; text-shadow: 0 2px 14px rgba(0,20,34,.46); }
.hero-credential span { font-size: 10px; text-transform: uppercase; letter-spacing: .15em; opacity: .88; margin-top: 5px; }

.section-shell { width: min(1320px, calc(100% - 10vw)); margin: 0 auto; }
.expertise { padding-top: clamp(88px, 10vw, 160px); padding-bottom: clamp(88px, 10vw, 160px); display: grid; grid-template-columns: 1.05fr .72fr; gap: clamp(60px, 10vw, 150px); align-items: center; }
.section-index { color: var(--blue); }
h2 { font-size: clamp(48px, 6vw, 86px); margin-bottom: 38px; }
.expertise-copy .lead { font-family: var(--display); font-size: clamp(22px, 2.2vw, 31px); line-height: 1.45; color: var(--ink); }
.expertise-copy > p:not(.section-index):not(.lead) { max-width: 660px; color: var(--muted); font-size: 16px; }
.principles { display: flex; flex-wrap: wrap; margin-top: 38px; gap: 10px; }
.principles span, .result-tags span { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 9px 13px; border: 1px solid var(--line); border-radius: 99px; }
.care-path { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 38px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.care-path > div { padding: 18px 12px 17px 0; display: grid; border-right: 1px solid var(--line); }
.care-path > div + div { padding-left: 14px; }
.care-path > div:last-child { border-right: 0; }
.care-path b { color: var(--gold); font-size: 9px; letter-spacing: .14em; margin-bottom: 6px; }
.care-path strong { font-family: var(--display); font-size: 18px; font-weight: 400; }
.care-path span { color: var(--muted); font-size: 9px; line-height: 1.35; margin-top: 4px; }
.expertise-image { margin: 0; position: relative; }
.expertise-image::before { content: ""; position: absolute; inset: 18px -18px -18px 18px; border: 1px solid #9ccce0; z-index: -1; }
.expertise-image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.expertise-image figcaption { display: flex; justify-content: space-between; padding-top: 18px; color: var(--muted); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }

.services { background: var(--deep); color: white; padding: clamp(90px, 10vw, 150px) 0 80px; }
.services-inner { width: min(1420px, calc(100% - 8vw)); }
.section-heading { display: grid; grid-template-columns: 1.4fr .6fr; gap: 8vw; align-items: end; margin-bottom: 64px; }
.section-heading h2 { margin: 0; }
.section-index.light { color: #9dd6ef; }
.section-heading > p { color: rgba(255,255,255,.66); max-width: 500px; margin: 0 0 8px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.17); border-bottom: 1px solid rgba(255,255,255,.17); }
.service-card { min-height: 570px; padding: 36px clamp(26px, 3vw, 48px) 42px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.17); position: relative; transition: background .3s, transform .3s; }
.service-card:last-child { border-right: 0; }
.service-card:hover { background: rgba(255,255,255,.045); transform: translateY(-4px); }
.service-card.featured { background: linear-gradient(160deg, rgba(49,138,179,.22), rgba(255,255,255,.025)); }
.service-number { color: #90cce7; font-size: 10px; letter-spacing: .18em; }
.service-icon { width: 72px; height: 72px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: grid; place-items: center; margin: 38px 0 32px; }
.service-icon svg { width: 38px; height: 38px; fill: none; stroke: #a8daed; stroke-width: 1.3; }
.service-card h3 { font-family: var(--display); font-size: clamp(32px, 3vw, 45px); font-weight: 400; margin-bottom: 16px; }
.service-card p { color: rgba(255,255,255,.66); font-size: 14px; }
.service-card ul { margin: 16px 0 30px; padding: 0; list-style: none; color: rgba(255,255,255,.82); font-size: 13px; }
.service-card li { padding: 7px 0 7px 16px; position: relative; border-bottom: 1px solid rgba(255,255,255,.08); }
.service-card li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--sky); position: absolute; left: 0; top: 16px; }
.botox-map-link { width: 100%; min-height: 72px; margin: 4px 0 18px; padding: 8px 12px 8px 8px; color: white; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.035); cursor: pointer; display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px; text-align: left; text-decoration: none; font: inherit; transition: background .2s, border-color .2s, transform .2s; }
.botox-map-link:hover { background: rgba(126,200,232,.13); border-color: rgba(126,200,232,.55); transform: translateY(-2px); }
.map-thumb { width: 54px; height: 54px; overflow: hidden; background: var(--mist); }
.map-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 34%; }
.botox-map-link > span:nth-child(2) { display: grid; }
.botox-map-link strong { font-family: var(--display); font-size: 18px; font-weight: 400; }
.botox-map-link small { color: rgba(255,255,255,.55); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; margin-top: 3px; }
.botox-map-link b { color: var(--sky); font-weight: 400; }
.treatment-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 18px; }
.treatment-link { min-height: 70px; padding: 12px 12px; border: 1px solid rgba(255,255,255,.2); color: white; background: rgba(255,255,255,.035); cursor: pointer; display: grid; grid-template-columns: 1fr auto; text-align: left; transition: background .2s, border-color .2s, transform .2s; }
.treatment-link span { font-family: var(--display); font-size: 19px; line-height: 1.1; }
.treatment-link small { grid-column: 1; color: rgba(255,255,255,.55); font-size: 8px; letter-spacing: .12em; text-transform: uppercase; margin-top: 5px; }
.treatment-link b { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--sky); font-weight: 400; }
.treatment-link:hover { background: rgba(126,200,232,.13); border-color: rgba(126,200,232,.55); transform: translateY(-2px); }
.card-link { margin-top: auto; color: white; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); padding: 12px 0; text-align: left; display: flex; justify-content: space-between; cursor: pointer; font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.medical-note { margin: 24px 0 0; text-align: right; color: rgba(255,255,255,.48); font-size: 11px; }

.prices { background: white; padding: clamp(90px, 10vw, 150px) 0; }
.prices-shell { width: min(1380px, calc(100% - 8vw)); }
.prices-heading { display: grid; grid-template-columns: 1.35fr .65fr; gap: 8vw; align-items: end; margin-bottom: 62px; }
.prices-heading h2 { margin: 0; }
.prices-heading > p { max-width: 510px; margin: 0 0 8px; color: var(--muted); }
.price-groups { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); box-shadow: 0 26px 70px rgba(9,53,79,.08); }
.price-group { padding: clamp(32px, 4vw, 58px); }
.price-group + .price-group { border-left: 1px solid var(--line); }
.price-group-accent { background: linear-gradient(145deg, #f0f9fc, #e1f1f7); }
.price-group-head { display: flex; align-items: baseline; gap: 20px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.price-group-head span { color: var(--gold); font-size: 9px; letter-spacing: .16em; }
.price-group-head h3 { margin: 0; font-family: var(--display); font-size: clamp(30px, 3vw, 43px); font-weight: 400; line-height: 1.08; }
.price-list { margin: 0; }
.price-list > div { min-height: 76px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center; border-bottom: 1px solid var(--line); }
.price-list dt { color: var(--ink); font-size: 15px; }
.price-list dt small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.price-list dd { margin: 0; color: var(--blue); font-family: var(--display); font-size: clamp(25px, 2.4vw, 34px); white-space: nowrap; }
.price-list .price-on-request { font-family: var(--sans); font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.price-note { display: flex; align-items: center; justify-content: space-between; gap: 34px; margin-top: 30px; padding: 24px 0; border-top: 1px solid var(--line); }
.price-note p { max-width: 850px; margin: 0; color: var(--muted); font-size: 12px; }
.price-note .button { flex: 0 0 auto; }

.guide { background: #eef8fb; padding: clamp(90px, 10vw, 150px) 0 0; }
.guide-shell { width: min(1380px, calc(100% - 8vw)); }
.guide-intro { display: grid; grid-template-columns: 1fr 1.3fr .8fr; gap: 5vw; align-items: end; margin-bottom: 62px; }
.guide-intro .section-index { align-self: start; margin-top: 13px; }
.guide-intro h2 { margin: 0; }
.guide-intro > p:last-child { color: var(--muted); margin: 0 0 8px; }
.guide-panel { display: grid; grid-template-columns: .72fr 1.28fr; background: white; box-shadow: var(--shadow); min-height: 560px; }
.concern-list { padding: 28px 0; background: #dff0f7; }
.concern { width: 100%; min-height: 92px; border: 0; border-bottom: 1px solid rgba(12,49,73,.12); background: transparent; color: var(--ink); padding: 0 38px; text-align: left; display: flex; align-items: center; gap: 25px; cursor: pointer; font-family: var(--display); font-size: 23px; transition: background .2s, color .2s, padding .2s; }
.concern span { font-family: var(--sans); font-size: 9px; letter-spacing: .16em; color: var(--blue); }
.concern:hover, .concern.active { background: var(--deep); color: white; padding-left: 48px; }
.concern.active span, .concern:hover span { color: var(--sky); }
.guide-result { padding: clamp(42px, 5vw, 76px); display: flex; flex-direction: column; }
.result-kicker { color: var(--blue); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 22px; }
.guide-result h3 { font-family: var(--display); font-size: clamp(46px, 5vw, 72px); font-weight: 400; line-height: 1; margin-bottom: 26px; }
.guide-result > p { font-family: var(--display); font-size: clamp(19px, 2vw, 25px); line-height: 1.5; max-width: 760px; }
.result-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 30px; }
.result-footer { border-top: 1px solid var(--line); padding-top: 26px; margin-top: auto; display: flex; justify-content: space-between; gap: 30px; align-items: center; }
.result-footer p { color: var(--muted); font-size: 12px; max-width: 530px; margin: 0; }
.result-footer .button { flex: 0 0 auto; }
.contact-strip { margin-top: clamp(80px, 9vw, 130px); background: var(--blue); color: white; padding: 52px clamp(28px, 5vw, 72px); display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.contact-strip span { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: #c8eaf7; }
.contact-strip h3 { font-family: var(--display); font-size: clamp(28px, 3.2vw, 46px); font-weight: 400; line-height: 1.15; margin: 8px 0 0; }
.button-light { background: white; color: var(--deep); }

.site-footer { background: var(--deep); color: white; padding: 70px 5vw 34px; display: grid; grid-template-columns: 1.3fr 1fr auto; align-items: center; gap: 30px; }
.footer-brand { display: flex; gap: 14px; align-items: center; }
.footer-brand > div { display: grid; line-height: 1.2; }
.footer-brand strong { font-family: var(--display); font-size: 22px; font-weight: 400; }
.footer-brand span:last-child { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.58); margin-top: 4px; }
.light-mark { border-color: rgba(255,255,255,.35); }
.site-footer > p { margin: 0; color: rgba(255,255,255,.6); font-size: 12px; }
.footer-links { display: flex; gap: 20px; }
.footer-links button { background: none; border: 0; color: rgba(255,255,255,.72); padding: 4px 0; cursor: pointer; font-size: 11px; }
.site-footer small { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; margin-top: 24px; color: rgba(255,255,255,.42); font-size: 10px; letter-spacing: .08em; }

dialog { width: min(680px, calc(100% - 32px)); border: 0; padding: clamp(30px, 5vw, 58px); color: var(--ink); box-shadow: 0 30px 100px rgba(0,20,35,.32); }
dialog::backdrop { background: rgba(3,30,47,.72); backdrop-filter: blur(6px); }
.dialog-close { position: absolute; right: 18px; top: 14px; border: 0; background: none; color: var(--ink); font-size: 30px; font-weight: 200; cursor: pointer; }
.dialog-heading h2, .legal-dialog h2 { font-size: clamp(42px, 7vw, 66px); margin-bottom: 20px; }
.dialog-heading > p:last-child, .legal-dialog > p:last-child { color: var(--muted); }
form { display: grid; gap: 18px; margin-top: 32px; }
label { display: grid; gap: 7px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.optional { color: var(--muted); font-size: 9px; font-weight: 400; letter-spacing: .08em; text-transform: none; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 0; background: #f7fbfc; color: var(--ink); padding: 13px 14px; font-size: 15px; letter-spacing: 0; text-transform: none; }
textarea { resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.checkbox { grid-template-columns: 18px 1fr; align-items: center; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 12px; }
.checkbox input { width: 16px; height: 16px; }
.form-privacy { margin: -7px 0 0 33px; color: var(--muted); font-size: 12px; }
.inline-legal { border: 0; border-bottom: 1px solid currentColor; padding: 0; background: none; color: var(--blue); cursor: pointer; font: inherit; }
.form-status { min-height: 24px; font-size: 12px; color: var(--blue); margin: 0; }
.form-status.success { position: relative; min-height: 62px; padding: 18px 18px 18px 58px; border: 1px solid #9fd7c3; border-left: 5px solid #23805f; background: #eaf8f2; color: #13553f; font-size: 15px; font-weight: 700; box-shadow: 0 12px 28px rgba(23,107,82,.12); }
.form-status.success::before { content: "✓"; position: absolute; left: 18px; top: 50%; width: 26px; height: 26px; display: grid; place-items: center; transform: translateY(-50%); border-radius: 50%; background: #23805f; color: white; font-size: 17px; }
.form-status.error { color: #a33232; }
.form-submit:disabled { cursor: wait; opacity: .65; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.legal-dialog { width: min(760px, calc(100% - 32px)); max-height: 88vh; overflow: auto; }
.legal-content { display: grid; gap: 0; }
.legal-content section { padding: 22px 0; border-top: 1px solid var(--line); }
.legal-content h3 { margin: 0 0 9px; font-family: var(--display); font-size: 24px; font-weight: 500; line-height: 1.2; }
.legal-content p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.legal-content p:last-child { margin-bottom: 0; }
.legal-content a { color: var(--blue); }
.legal-note { padding: 15px 17px !important; border: 1px solid #bfdae7 !important; background: var(--mist); }
.botulinum-dialog { width: min(1040px, calc(100% - 32px)); max-height: 90vh; overflow: auto; padding: clamp(34px, 5vw, 64px); }
.botulinum-dialog-head { max-width: 760px; padding-right: 48px; }
.botulinum-dialog-head h2 { font-size: clamp(46px, 7vw, 78px); margin: 4px 0 14px; }
.botulinum-dialog-head > p:last-child { color: var(--muted); max-width: 720px; }
.botulinum-dialog-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: clamp(28px, 5vw, 62px); align-items: center; margin-top: 34px; }
.botulinum-visual { margin: 0; background: var(--mist); border: 1px solid var(--line); }
.botulinum-face-map { position: relative; overflow: hidden; background: #e5f4fb; }
.botulinum-face-map > img { display: block; width: 100%; height: auto; }
.face-point { position: absolute; left: var(--x); top: var(--y); width: clamp(5px, .7vw, 8px); aspect-ratio: 1; border: 1px solid white; border-radius: 50%; background: var(--area-color); box-shadow: 0 1px 4px rgba(6,35,52,.24); transform: translate(-50%, -50%); }
.area-forehead { --area-color: #287db5; }
.area-glabella { --area-color: #bd4f68; }
.area-crows-feet { --area-color: #7655b6; }
.area-brow { --area-color: #d39a29; }
.area-bunny { --area-color: #26988d; }
.area-lip-flip { --area-color: #df6d4c; }
.area-gummy { --area-color: #6d9f3f; }
.area-smoker { --area-color: #bd7422; }
.area-mouth { --area-color: #ad4b96; }
.area-chin { --area-color: #5267b1; }
.area-masseter { --area-color: #345b75; }
.botulinum-visual figcaption { padding: 12px 16px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.botulinum-area-list h3 { font-family: var(--display); font-size: clamp(27px, 3vw, 38px); font-weight: 400; margin: 7px 0 20px; }
.botulinum-area-list ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.botulinum-area-list li { padding: 11px 0 11px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 14px; position: relative; }
.botulinum-area-list li::before { content: ""; width: 8px; height: 8px; border: 2px solid white; border-radius: 50%; background: var(--area-color); box-shadow: 0 0 0 1px color-mix(in srgb, var(--area-color), transparent 35%); position: absolute; left: 0; top: 15px; }
.botulinum-dialog-note { margin: 22px 0 0; padding: 18px 20px; background: var(--mist); border-left: 3px solid var(--sky); color: var(--muted); font-size: 11px; line-height: 1.55; }
.treatment-dialog { width: min(980px, calc(100% - 32px)); max-height: 90vh; overflow: auto; padding: clamp(34px, 5vw, 68px); }
.treatment-dialog-head { padding-right: clamp(0px, 8vw, 90px); }
.treatment-dialog-head h2 { font-size: clamp(48px, 7vw, 82px); margin-bottom: 8px; }
.treatment-subtitle { color: var(--blue); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 22px; }
.treatment-intro { font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); line-height: 1.45; }
.treatment-badge { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; padding: 8px 13px; color: var(--blue); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.treatment-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 42px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.treatment-detail-grid article { padding: 34px 34px 34px 0; }
.treatment-detail-grid article + article { border-left: 1px solid var(--line); padding-left: 34px; }
.detail-number, .treatment-section-title > span { color: var(--gold); font-size: 9px; letter-spacing: .16em; }
.treatment-detail-grid h3, .treatment-section-title h3 { font-family: var(--display); font-size: 27px; font-weight: 400; margin: 8px 0 14px; }
.treatment-detail-grid p, .treatment-detail-grid li { color: var(--muted); font-size: 13px; }
.treatment-detail-grid ul { list-style: none; margin: 0; padding: 0; }
.treatment-detail-grid li { padding: 7px 0 7px 14px; border-bottom: 1px solid var(--line); position: relative; }
.treatment-detail-grid li::before { content: ""; width: 4px; height: 4px; background: var(--sky); border-radius: 50%; position: absolute; left: 0; top: 16px; }
.treatment-process, .treatment-areas { padding-top: 36px; }
.treatment-section-title { display: flex; align-items: baseline; gap: 16px; }
.treatment-process ol { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: 10px 0 0; counter-reset: treatment-step; }
.treatment-process li { min-height: 126px; padding: 20px 18px; border: 1px solid var(--line); border-right: 0; counter-increment: treatment-step; display: grid; align-content: start; gap: 5px; }
.treatment-process li:last-child { border-right: 1px solid var(--line); }
.treatment-process li::before { content: "0" counter(treatment-step); color: var(--gold); font-size: 9px; letter-spacing: .14em; }
.treatment-process li strong { font-family: var(--display); font-size: 18px; font-weight: 400; }
.treatment-process li span { color: var(--muted); font-size: 11px; line-height: 1.4; }
.area-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.area-tags span { border: 1px solid var(--line); padding: 9px 13px; border-radius: 99px; color: var(--muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.treatment-caution { margin-top: 38px; padding: 24px 26px; background: var(--mist); border-left: 3px solid var(--sky); }
.treatment-caution strong { font-family: var(--display); font-size: 20px; font-weight: 400; }
.treatment-caution p { color: var(--muted); font-size: 12px; margin: 7px 0 0; }
.treatment-dialog-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 32px; }
.treatment-dialog-footer p { color: var(--muted); font-size: 11px; max-width: 520px; margin: 0; }

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

@media (max-width: 960px) {
  .site-header { height: 76px; }
  .menu-toggle { display: block; z-index: 3; }
  .navigation { display: none; position: absolute; top: 76px; left: 0; right: 0; padding: 28px; background: var(--deep); flex-direction: column; align-items: stretch; gap: 20px; }
  .navigation.open { display: flex; }
  .navigation > a { font-size: 15px; }
  .hero-content { margin-left: 0; padding-left: 7vw; padding-right: 7vw; }
  .hero-credential { right: 7vw; }
  .expertise { grid-template-columns: 1fr .7fr; gap: 60px; }
  .section-heading { grid-template-columns: 1fr; }
  .service-card { padding-left: 24px; padding-right: 24px; }
  .prices-heading { grid-template-columns: 1fr; }
  .guide-intro { grid-template-columns: 1fr 1fr; }
  .guide-intro .section-index { grid-column: 1 / -1; }
  .guide-panel { grid-template-columns: .85fr 1.15fr; }
  .result-footer { align-items: stretch; flex-direction: column; }
  .result-footer .button { align-self: flex-start; }
}

@media (max-width: 720px) {
  .site-header { padding: 0 20px; }
  .brand-name { font-size: 20px; }
  .hero { min-height: 820px; }
  .hero-media { background-position: 63% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(3,33,52,.83), rgba(3,33,52,.3)), linear-gradient(0deg, rgba(3,33,52,.68), transparent 55%); }
  .hero-content { min-height: 820px; justify-content: flex-end; padding: 130px 22px 160px; }
  h1 { font-size: clamp(54px, 18vw, 78px); }
  .hero-copy { font-size: 16px; }
  .hero-actions { align-items: stretch; flex-direction: column; gap: 9px; }
  .hero-actions .button { align-self: flex-start; }
  .text-link { align-self: flex-start; }
  .hero-credential { left: 22px; right: 22px; bottom: 32px; }
  .hero-credential .credential-line { width: 30px; }
  .hero-credential div:last-child { text-align: left; }
  .hero-credential span { font-size: 8px; }
  .section-shell, .services-inner, .prices-shell, .guide-shell { width: calc(100% - 40px); }
  .expertise { grid-template-columns: 1fr; }
  .care-path { grid-template-columns: 1fr 1fr; }
  .care-path > div { border-bottom: 1px solid var(--line); }
  .care-path > div:nth-child(2) { border-right: 0; }
  .care-path > div:nth-child(3), .care-path > div:nth-child(4) { border-bottom: 0; }
  h2 { font-size: clamp(46px, 14vw, 65px); }
  .expertise-image { width: calc(100% - 14px); }
  .section-heading { gap: 25px; margin-bottom: 44px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: auto; padding: 34px 24px 40px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.17); }
  .service-card:last-child { border-bottom: 0; }
  .service-icon { margin: 26px 0 22px; }
  .card-link { margin-top: 18px; }
  .medical-note { text-align: left; }
  .prices-heading { gap: 24px; margin-bottom: 42px; }
  .price-groups { grid-template-columns: 1fr; }
  .price-group { padding: 30px 22px; }
  .price-group + .price-group { border-left: 0; border-top: 1px solid var(--line); }
  .price-list > div { min-height: 70px; }
  .price-list dt { font-size: 14px; }
  .price-note { align-items: flex-start; flex-direction: column; }
  .guide-intro { grid-template-columns: 1fr; }
  .guide-intro .section-index { grid-column: auto; }
  .guide-panel { grid-template-columns: 1fr; }
  .concern-list { display: flex; overflow-x: auto; padding: 0; scroll-snap-type: x mandatory; }
  .concern { flex: 0 0 74%; min-height: 72px; border-bottom: 0; border-right: 1px solid rgba(12,49,73,.12); padding: 0 22px; font-size: 18px; scroll-snap-align: start; }
  .concern:hover, .concern.active { padding-left: 22px; }
  .guide-result { min-height: 550px; padding: 38px 24px; }
  .guide-result h3 { font-size: 48px; }
  .contact-strip { flex-direction: column; align-items: flex-start; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer small { grid-column: auto; }
  .form-row { grid-template-columns: 1fr; }
  .treatment-links { grid-template-columns: 1fr; }
  .botulinum-dialog-grid { grid-template-columns: 1fr; }
  .botulinum-dialog-head { padding-right: 28px; }
  .botulinum-face-map > img { max-height: none; }
  .treatment-detail-grid { grid-template-columns: 1fr; }
  .treatment-detail-grid article { padding: 28px 0; }
  .treatment-detail-grid article + article { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; }
  .treatment-process ol { grid-template-columns: 1fr 1fr; }
  .treatment-process li:nth-child(2) { border-right: 1px solid var(--line); }
  .treatment-process li:nth-child(3), .treatment-process li:nth-child(4) { border-top: 0; }
  .treatment-dialog-footer { align-items: stretch; flex-direction: column; }
  .treatment-dialog-footer .button { align-self: flex-start; }
}

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