:root { --green:#153235; --beige:#c1906f; --sand:#f4d2b3; --cream:#f6ecdf; --light-green:#dbebd3; --ink:#282a30; --sans:"DM Sans", "General Sans", Arial, sans-serif; --serif:"Cormorant Garamond", "Ivy Mode", Georgia, serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--green); font-family:var(--sans); font-size:16px; }
a { color:inherit; text-decoration:none; }
.site-header { height:90px; padding:0 clamp(24px, 5vw, 78px); display:flex; align-items:center; justify-content:space-between; position:absolute; z-index:2; width:100%; color:#fff; }
.brand { 
    display:block; 
    width:270px; 
    overflow:hidden; 
    height:70px; 
} 
.brand img { 
        width:270px; 
        height:auto; 
        object-fit:cover; 
        object-position:left center;
}
nav { display:flex; align-items:center; gap:32px; font-size:12px; letter-spacing:.045em; } nav > a:not(.nav-cta) { opacity:.9; } nav > a:not(.nav-cta):hover { opacity:.65; }
.nav-cta,.button { border:1px solid currentColor; padding:13px 18px; display:inline-flex; align-items:center; justify-content:center; gap:20px; font-size:12px; letter-spacing:.045em; transition:.25s ease; } .nav-cta:hover { background:#fff; color:var(--green); }
.hero { min-height:720px; display:grid; grid-template-columns:1.12fr .88fr; background:var(--green); color:#fff; }
.hero-copy { padding:180px 5vw 80px max(6vw, 68px); align-self:center; max-width:790px; } .eyebrow { margin:0 0 22px; text-transform:uppercase; font-size:10px; font-weight:600; letter-spacing:.15em; line-height:1.4; }
h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); font-weight:400; letter-spacing:-.045em; line-height:.99; } h1 { margin-bottom:29px; font-size:clamp(50px, 5.2vw, 88px); } .intro { max-width:440px; color:#d5e0d7; line-height:1.65; font-size:16px; margin-bottom:36px; }
.button-light { color:#fff; } .button-light:hover { color:var(--green); background:var(--cream); border-color:var(--cream); }.button span,.nav-cta span { font-size:17px; line-height:8px; }
.hero-image-wrap { min-height:650px; position:relative; overflow:hidden; } .hero-image { width:100%; height:100%; position:absolute; object-fit:cover; object-position:center 36%; filter:saturate(.72) contrast(.96); }.hero-image-wrap::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,50,53,.1), rgba(21,50,53,.35)); }
.image-caption { position:absolute; z-index:1; bottom:42px; left:42px; margin:0; color:#fff; font-family:var(--serif); font-size:22px; line-height:1.1; }.hero-mark { position:absolute; z-index:1; right:-46px; bottom:-42px; width:195px; height:195px; border:1px solid rgba(255,255,255,.55); border-radius:50%; }.hero-mark i { position:absolute; border:1px solid rgba(255,255,255,.55); border-radius:50%; left:50%; transform:translateX(-50%); }.hero-mark i:nth-child(1){width:144px;height:144px;bottom:14px}.hero-mark i:nth-child(2){width:88px;height:88px;bottom:28px}.hero-mark i:nth-child(3){width:35px;height:35px;bottom:55px}
.statement { text-align:center; padding:138px 24px 145px; max-width:960px; margin:auto; }.statement .eyebrow { color:var(--beige); }.statement h2 { font-size:clamp(38px,4.1vw,64px); margin-bottom:28px; }.statement > p:last-child { color:#536466; max-width:650px; margin:auto; line-height:1.75; }
.specialties { background:var(--sand); padding:110px max(6vw, 52px) 120px; color:var(--green); }.section-heading { display:flex; align-items:flex-end; justify-content:space-between; padding-bottom:48px; }.section-heading h2 { margin:0; font-size:clamp(38px,4vw,62px); }.section-heading .eyebrow { margin-bottom:9px; }.specialty-list { border-top:1px solid rgba(21,50,53,.35); }.specialty-list article { padding:27px 0; display:grid; grid-template-columns:12% 37% 1fr; border-bottom:1px solid rgba(21,50,53,.35); align-items:baseline; }.specialty-list span { font-size:11px; }.specialty-list h3 { font:400 31px/1 var(--serif); letter-spacing:-.04em; margin:0; }.specialty-list p { margin:0; max-width:420px; font-size:14px; line-height:1.6; }
.experience { display:grid; grid-template-columns:1fr 1fr; background:var(--light-green); min-height:665px; }.experience-photo { overflow:hidden; }.experience-photo img { width:100%; height:100%; min-height:665px; object-fit:cover; object-position:center; filter:saturate(.75); }.experience-copy { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:90px clamp(32px,9vw,145px); }.experience-copy .eyebrow { color:#667b63; }.experience-copy h2 { font-size:clamp(43px,4.2vw,70px); margin-bottom:32px; }.experience-copy h2 em { font-style:italic; }.experience-copy > p { color:#536466; max-width:420px; line-height:1.65; }.text-link { margin-top:18px; padding-bottom:9px; border-bottom:1px solid var(--green); font-size:12px; letter-spacing:.05em; }.text-link span { margin-left:20px; font-size:18px; }
.appointment { background:var(--beige); display:grid; grid-template-columns:1fr 1fr; gap:100px; padding:115px max(6vw,52px); }.appointment h2 { font-size:clamp(44px,4.6vw,70px); margin-bottom:25px; }.appointment > div > p:last-child { max-width:390px; line-height:1.65; }.appointment-form { display:grid; align-content:start; gap:18px; }.appointment-form label { font-size:11px; letter-spacing:.07em; text-transform:uppercase; }.appointment-form input,.appointment-form select { width:100%; display:block; border:0; border-bottom:1px solid rgba(21,50,53,.65); background:transparent; padding:13px 0 12px; color:var(--green); font:14px var(--sans); outline:0; border-radius:0; }.appointment-form input::placeholder { color:rgba(21,50,53,.65); }.button-dark { background:var(--green); color:#fff; border-color:var(--green); margin-top:9px; cursor:pointer; }.button-dark:hover { background:transparent; color:var(--green); }.form-message { min-height:20px; margin:0; font-size:12px; }
footer { background:var(--green); color:#fff; padding:64px max(6vw,52px) 30px; display:grid; grid-template-columns:1.45fr 1fr 1fr; gap:40px; }.footer-brand img { width:190px; height:72px; object-fit:cover; object-position:left center; display:block; }.footer-brand p,footer address,footer a { color:#cbd8d2; font-size:13px; line-height:1.65; font-style:normal; }.footer-brand p { margin:13px 0 0; }.copyright { grid-column:1/-1; margin:42px 0 0; border-top:1px solid rgba(255,255,255,.2); padding-top:20px; color:#aabcb4; font-size:10px; letter-spacing:.08em; }
.menu-toggle { display:none; }
@media (max-width: 760px) { .site-header { height:76px; padding:0 22px; }.brand { width:132px; height:50px; }.brand img { width:132px; height:50px; } nav { display:none; position:absolute; top:76px; right:14px; left:14px; background:var(--green); padding:24px; flex-direction:column; align-items:stretch; border:1px solid rgba(255,255,255,.22); } nav.open { display:flex; }.nav-cta { text-align:center; margin-top:5px; }.menu-toggle { background:none; color:#fff; border:0; display:grid; gap:5px; padding:10px 0 10px 14px; }.menu-toggle span { width:24px; height:1px; background:currentColor; display:block; }.hero { display:flex; flex-direction:column; min-height:0; }.hero-copy { padding:134px 24px 66px; }.hero-image-wrap { min-height:500px; }.image-caption { bottom:28px; left:26px; }.statement { padding:85px 24px; }.specialties { padding:80px 24px; }.section-heading { display:block; }.section-heading .eyebrow { margin-bottom:24px; }.specialty-list article { grid-template-columns:34px 1fr; gap:14px; }.specialty-list p { grid-column:2; margin-top:5px; }.experience,.appointment { grid-template-columns:1fr; gap:0; }.experience-photo img { min-height:440px; height:440px; }.experience-copy { padding:74px 24px 82px; }.appointment { padding:78px 24px; gap:46px; } footer { padding:54px 24px 27px; grid-template-columns:1fr; gap:29px; }.copyright { margin-top:18px; } }
@media (max-width: 390px) { .site-header { padding:0 18px; }.hero-copy { padding:116px 18px 58px; }.hero h1 { font-size:45px; line-height:1.02; }.intro { font-size:15px; }.hero-image-wrap { min-height:430px; }.statement { padding:72px 18px; }.specialties,.appointment { padding-left:18px; padding-right:18px; }.experience-copy { padding-left:18px; padding-right:18px; }.experience-photo img { min-height:390px; height:390px; }.specialty-list h3 { font-size:28px; } }