:root { --ink:#35252a; --mauve:#875964; --wine:#70434d; --rose:#b77980; --mist:#f6eeea; --cream:#fffaf7; --line:#e8d8d3; --blush:#f1dedd; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",Arial,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; text-decoration:none; }
.skip { position:fixed; top:-4rem; left:1rem; z-index:10; background:var(--wine); color:white; padding:.65rem .9rem; border-radius:.35rem; }
.skip:focus { top:1rem; }
.announcement { background:var(--wine); color:#fff9f8; font-size:.76rem; letter-spacing:.12em; text-align:center; text-transform:uppercase; padding:.56rem 1rem; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:2rem; max-width:1400px; margin:0 auto; padding:1.25rem 4.5vw; }
.brand { display:inline-flex; align-items:center; gap:.55rem; color:var(--wine); font-family:"Playfair Display",Georgia,serif; font-size:1.2rem; letter-spacing:.2em; line-height:.9; }
.brand img { width:36px; height:36px; object-fit:contain; }
.brand small { display:block; font-family:"DM Sans",Arial,sans-serif; font-size:.43rem; letter-spacing:.42em; line-height:1.8; text-align:center; }
nav { display:flex; gap:2rem; font-size:.88rem; }
nav a { border-bottom:1px solid transparent; transition:border-color .2s; }
nav a:hover, nav a:focus-visible { border-color:var(--rose); }
.portal-link { color:var(--wine); font-size:.84rem; font-weight:600; }
.portal-link span { margin-left:.35rem; }
.hero { min-height:670px; display:grid; grid-template-columns:minmax(0,1fr) minmax(460px,1.08fr); background:linear-gradient(115deg,#fffaf6 25%,#f6e6e1); overflow:hidden; }
.hero-copy { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:5.4rem max(4.5vw,calc((100vw - 1260px)/2)); padding-right:3rem; text-align:center; }
.hero-lockup { width:min(230px,58%); margin:0 0 1.45rem; text-align:center; }
.hero-lockup img { display:block; width:100%; height:auto; }
.hero-lockup p { margin:.1rem 0 0; color:#a8797f; font-size:.57rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.eyebrow { margin:0 0 1rem; color:var(--rose); font-size:.71rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; }
h1,h2,h3 { margin:0; font-weight:500; line-height:1.06; }
h1,h2 { font-family:"Playfair Display",Georgia,serif; }
h1 { font-size:clamp(3.3rem,5.4vw,5.4rem); letter-spacing:-.045em; }
h2 { font-size:clamp(2.4rem,4vw,4.1rem); letter-spacing:-.04em; }
em { color:var(--mauve); font-weight:500; }
.hero-text { max-width:29rem; margin:1.7rem auto 1.9rem; color:#655157; font-size:1.08rem; }
.hero-actions,.visit-actions { display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; }
.button { display:inline-block; border:1px solid transparent; border-radius:2px; padding:.86rem 1.25rem; font-size:.86rem; font-weight:600; transition:transform .2s, background .2s; }
.button:hover { transform:translateY(-2px); }
.button-solid { background:var(--wine); color:#fffaf8; }
.button-light { background:#fffaf9; color:var(--wine); }
.text-link { color:var(--wine); font-size:.88rem; font-weight:600; }
.text-link span { margin-left:.4rem; }
.hero-note { margin:4rem 0 0; color:#ad8081; font-size:.67rem; letter-spacing:.18em; text-transform:uppercase; }
.hero-art { position:relative; min-height:560px; background:#f7eeea; }
.hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(247,232,225,.38),transparent 36%); pointer-events:none; }
.hero-art img { width:100%; height:100%; object-fit:cover; object-position:right center; display:block; }
.halo { position:absolute; width:180px; height:180px; border:1px solid rgba(137,84,94,.28); border-radius:50%; left:5%; bottom:8%; }
.section { max-width:1260px; margin:0 auto; padding:8rem 4.5vw; }
.intro { display:grid; grid-template-columns:1fr 2.1fr; gap:5rem; border-bottom:1px solid var(--line); }
.section-label { color:var(--rose); font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding-top:.8rem; }
.intro-content { display:grid; grid-template-columns:1.25fr .75fr; gap:3.5rem; }
.intro-content p { margin:0 0 1.6rem; color:#66545a; }
.ritual { display:grid; grid-template-columns:.78fr .95fr 1.22fr; align-items:center; gap:2.1rem; padding-top:6.2rem; padding-bottom:2.1rem; }
.ritual figure { margin:0; overflow:hidden; background:#f1e4df; }
.ritual img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .5s ease; }
.ritual figure:hover img { transform:scale(1.025); }
.ritual-portrait { height:410px; }
.ritual-portrait img { object-position:center; }
.ritual-copy { padding:1rem 0; }
.ritual-copy h2 { font-size:clamp(2.15rem,3.15vw,3.35rem); }
.ritual-copy > p:not(.eyebrow) { margin:1.35rem 0 1.55rem; color:#66545a; }
.ritual-treatment { height:330px; }
.ritual-treatment img { object-position:center; }
.treatments { padding-top:7.5rem; }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:3rem; margin-bottom:3rem; }
.section-head > p { max-width:24rem; margin:0; color:#66545a; }
.treatment-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.treatment-grid article { min-height:270px; background:var(--cream); padding:2rem; display:flex; flex-direction:column; }
.treatment-grid article:nth-child(2) { background:#fbf2ee; }
.card-number { color:var(--rose); font-family:"Playfair Display",Georgia,serif; font-size:1.15rem; }
.treatment-grid h3 { margin:3rem 0 .75rem; font-family:"Playfair Display",Georgia,serif; font-size:1.75rem; }
.treatment-grid p { color:#6a565c; margin:0; }
.treatment-grid a { color:var(--wine); margin-top:auto; padding-top:1.5rem; font-size:.83rem; font-weight:600; }
.telehealth { display:grid; grid-template-columns:.45fr 1.35fr 1fr; align-items:center; gap:2.3rem; padding:7rem max(4.5vw,calc((100vw - 1260px)/2)); background:var(--wine); color:#fff9f7; }
.telehealth .eyebrow { color:#e8b9b9; }
.telehealth em { color:#f1cfd0; }
.telehealth-mark { color:#f0cacc; font-family:Georgia,serif; font-size:5rem; text-align:center; }
.telehealth-copy { color:#f9eae8; }
.telehealth-copy p { margin:0 0 1.6rem; }
.visit { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
.visit-quote { font-family:"Playfair Display",Georgia,serif; font-size:clamp(2.1rem,3.5vw,3.5rem); line-height:1.18; letter-spacing:-.035em; }
.visit-quote span { display:block; color:var(--rose); font-size:5rem; height:3.2rem; line-height:1; }
.visit-card { background:var(--blush); padding:3.2rem; }
.visit-card h2 { font-size:3rem; }
.visit-card > p:not(.eyebrow) { color:#685157; max-width:28rem; margin:1.1rem 0 1.8rem; }
footer { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:2.2rem 4.5vw; border-top:1px solid var(--line); color:#7c6268; font-size:.78rem; }
.footer-brand { font-size:.92rem; }
.footer-brand img { width:30px; height:30px; }
footer p { letter-spacing:.12em; text-transform:uppercase; font-size:.65rem; }
footer > a:last-child { color:var(--wine); font-weight:600; }
@media (max-width:850px) { .site-header { padding-inline:1.5rem; } nav { display:none; } .hero { grid-template-columns:1fr; } .hero-copy { min-height:560px; padding:4.5rem 1.5rem; } .hero-art { min-height:460px; } .intro,.intro-content,.visit { grid-template-columns:1fr; gap:2rem; } .ritual { grid-template-columns:1fr 1fr; padding-top:4.5rem; padding-bottom:1rem; gap:1.2rem; } .ritual-copy { grid-column:1 / -1; grid-row:1; } .ritual-portrait { height:360px; } .ritual-treatment { height:300px; } .section { padding:5.5rem 1.5rem; } .section-head { display:block; } .section-head > p { margin-top:1.4rem; } .treatment-grid { grid-template-columns:1fr; } .treatment-grid article { min-height:220px; } .telehealth { grid-template-columns:1fr; gap:1.3rem; padding:4.5rem 1.5rem; } .telehealth-mark { display:none; } .visit-card { padding:2.2rem; } footer { align-items:flex-start; flex-direction:column; padding:2rem 1.5rem; } footer p { margin:.2rem 0; } }
@media (max-width:460px) { .announcement { font-size:.64rem; } .portal-link { font-size:.73rem; } .brand { font-size:1rem; } .brand img { width:31px; height:31px; } h1 { font-size:3rem; } .hero { min-height:0; } .hero-copy { min-height:510px; } .hero-text { font-size:1rem; } .hero-actions { align-items:flex-start; flex-direction:column; gap:1rem; } .visit-card h2 { font-size:2.5rem; } }
@media (max-width:850px) { .ritual { padding-top:4.5rem; padding-bottom:1rem; } }