:root { --ink:#25322b; --green:#365143; --pale:#e7e8dc; --cream:#f7f4eb; --pink:#d98978; --yellow:#e9d76e; --muted:#6d766e; --serif:"Fraunces",Georgia,serif; --sans:"DM Sans",Arial,sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font-family:var(--sans); line-height:1.5; } a { color:inherit; text-decoration:none; } .shell { width:min(1120px,calc(100% - 64px)); margin:auto; } .demo-banner { padding:8px 20px; background:var(--yellow); color:var(--ink); text-align:center; font:10px var(--mono); letter-spacing:.05em; text-transform:uppercase; }
.site-header { width:min(1120px,calc(100% - 64px)); min-height:102px; margin:auto; display:flex; justify-content:space-between; align-items:center; } .brand { display:flex; align-items:center; gap:11px; font-size:13px; line-height:.95; letter-spacing:.02em; } .brand i { color:var(--pink); font-family:var(--serif); font-size:16px; font-style:italic; } .brand-symbol { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--pink); color:var(--cream); font-family:var(--serif); font-size:22px; } nav { display:flex; align-items:center; gap:30px; font-size:12px; color:#59645c; } nav a:hover,.arrow-link:hover { color:var(--pink); } .nav-button { padding:12px 17px; border:1px solid #c9c9bc; border-radius:30px; color:var(--ink); } .menu-toggle { display:none; border:0; background:none; font:inherit; }
.eyebrow { margin:0 0 22px; color:var(--green); font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; } h1,h2 { margin:0 0 25px; letter-spacing:-.06em; line-height:.98; font-weight:500; } h1 { max-width:560px; font-size:clamp(50px,6.8vw,82px); } h2 { font-size:clamp(39px,4.7vw,62px); } em { color:var(--pink); font-family:var(--serif); font-style:italic; letter-spacing:-.08em; } .lede { max-width:390px; margin-bottom:35px; color:var(--muted); font-size:17px; } .button { display:inline-flex; align-items:center; gap:8px; padding:15px 21px; border-radius:30px; background:var(--green); color:var(--cream); font-size:12px; font-weight:600; transition:transform .2s; }.button:hover { transform:translateY(-2px); } .button span { color:var(--yellow); font-size:17px; }
.hero { min-height:620px; display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; padding:60px 0 105px; } .hero-art { position:relative; height:490px; overflow:hidden; background:var(--pale); } .hero-art img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; filter:saturate(.82); }.hero-art:after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,#36514322,transparent 55%,#e9d76e22); pointer-events:none; }.art-note { position:absolute; z-index:4; color:var(--green); font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; text-shadow:0 1px 12px #f7f4ebaa; }.note-top { top:25px; left:25px; }.note-bottom { bottom:22px; right:25px; }
.intro-section { padding:110px 0; background:var(--green); color:var(--cream); }.intro-grid { display:grid; grid-template-columns:.7fr 1fr; gap:14%; }.intro-section .eyebrow { color:var(--yellow); }.intro-section h2 { max-width:600px; }.intro-section p:not(.eyebrow) { max-width:510px; color:#d6ded5; font-size:16px; }.arrow-link { display:inline-block; margin-top:18px; border-bottom:1px solid var(--pink); padding-bottom:4px; font-size:12px; font-weight:600; }.arrow-link span { margin-left:6px; color:var(--pink); font-size:16px; }
.treatments { padding:125px 0; }.section-top { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:60px; }.section-top > p { max-width:300px; margin:0 0 6px; color:var(--muted); font-size:14px; }.treatment-list { border-top:1px solid #d6d5c9; }.treatment { display:grid; grid-template-columns:60px 1fr 145px 20px; gap:18px; align-items:center; padding:23px 0; border-bottom:1px solid #d6d5c9; }.treatment:hover strong { color:var(--pink); }.treatment-no { color:var(--pink); font:10px var(--mono); }.treatment strong { display:block; font-family:var(--serif); font-size:25px; font-weight:500; }.treatment small { display:block; max-width:440px; margin-top:4px; color:var(--muted); font-size:12px; }.treatment-time { color:var(--muted); font:10px var(--mono); text-transform:uppercase; }.arrow { color:var(--pink); font-size:22px; }
.quote-section { padding:120px 0; background:var(--pale); text-align:center; }.quote-inner { display:flex; flex-direction:column; align-items:center; }.quote-section .eyebrow { color:var(--green); }.quote-section blockquote { max-width:720px; margin:0 auto 25px; color:var(--green); font-family:var(--serif); font-size:clamp(31px,4vw,52px); line-height:1.02; letter-spacing:-.05em; }.quote-by { color:var(--muted); font:10px var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.visit-section { display:grid; grid-template-columns:1fr 1fr; gap:11%; align-items:center; padding:130px 0; }.visit-image { position:relative; height:460px; overflow:hidden; background:#d1c4a9; }.visit-image img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; filter:saturate(.72); }.visit-image:after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,#e9d76e22,transparent 65%); pointer-events:none; }.image-label { position:absolute; z-index:2; top:20px; left:20px; color:var(--green); font:10px var(--mono); text-transform:uppercase; text-shadow:0 1px 12px #f7f4ebaa; }.visit-copy > p:not(.eyebrow) { max-width:430px; color:var(--muted); font-size:15px; }.address { display:flex; flex-direction:column; gap:3px; margin-top:28px; color:var(--green); font-size:13px; }.address span { color:var(--muted); font-size:12px; }
.book-section { padding:120px 0; background:var(--green); color:var(--cream); text-align:center; }.book-inner { display:flex; flex-direction:column; align-items:center; }.book-section .eyebrow { color:var(--yellow); }.book-section h2 { max-width:600px; }.book-section h2 em { color:var(--pink); }.book-section p:not(.eyebrow) { max-width:390px; color:#d6ded5; font-size:14px; }.button-light { margin-top:18px; background:var(--pink); color:var(--ink); }.button-light span { color:var(--ink); }.book-section small { margin-top:25px; color:#aab8aa; font:10px var(--mono); }.footer { display:flex; align-items:center; justify-content:space-between; min-height:100px; color:var(--muted); font-size:10px; }.footer .brand { color:var(--ink); }
@media (max-width:760px) { .shell,.site-header { width:min(100% - 40px,570px); }.site-header { min-height:77px; }.menu-toggle { display:block; cursor:pointer; }.site-header nav { display:none; position:absolute; z-index:10; top:70px; left:20px; right:20px; padding:20px; flex-direction:column; align-items:stretch; gap:20px; background:var(--cream); border:1px solid #d1d1c6; box-shadow:5px 5px var(--yellow); }.site-header nav.is-open { display:flex; }.nav-button { text-align:center; }.hero { display:block; padding:55px 0 80px; }.hero-copy { margin-bottom:55px; }.hero-art { height:410px; }.sun { width:220px; height:220px; }.face-back,.face-front { transform:scale(.8) rotate(8deg); transform-origin:top left; }.face-front { left:38%; transform:scale(.8) rotate(-8deg); }.intro-section,.treatments,.visit-section,.book-section { padding:80px 0; }.intro-grid,.visit-section { display:block; }.intro-grid > div { margin-top:38px; }.section-top { display:block; }.section-top > p { margin-top:25px; }.treatment { grid-template-columns:35px 1fr 20px; gap:8px; }.treatment-time { grid-column:2; }.treatment .arrow { grid-column:3; grid-row:1; }.visit-image { height:360px; margin-bottom:55px; }.footer { flex-wrap:wrap; gap:15px; padding:25px 0; }.footer > span:nth-last-child(2) { width:100%; order:3; } }