@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,500&display=swap');

:root { --green:#4e6755; --deep:#31463a; --sage:#819681; --beige:#ece5d8; --cream:#faf8f3; --ink:#2e342e; --line:#d8d1c4; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:"DM Sans", Arial, sans-serif; font-size:17px; line-height:1.65; }
h1,h2,p { margin-top:0; } h1,h2 { font-family:Fraunces, Georgia, serif; font-weight:400; line-height:1.08; }
h1 { max-width:850px; font-size:clamp(3.15rem,8vw,6.7rem); letter-spacing:-.045em; }
h2 { font-size:clamp(2.3rem,4.2vw,4.2rem); letter-spacing:-.04em; }
a { color:inherit; } .skip-link { position:absolute; left:-9999px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; background:white; padding:.5rem 1rem; }
.hero { position:relative; min-height:720px; color:#fff; display:flex; flex-direction:column; overflow:hidden; background:linear-gradient(135deg,#71876f,#aeb490 55%,#d1c5ac); }
.hero-photo,.hero-overlay { position:absolute; inset:0; width:100%; height:100%; } .hero-photo { object-fit:cover; } .hero-overlay { background:linear-gradient(90deg,rgba(24,43,31,.75),rgba(25,38,27,.3) 63%,rgba(20,25,17,.18)); }
.hero.sans-photo .hero-overlay { background:linear-gradient(135deg,rgba(45,73,56,.95),rgba(112,139,105,.82) 60%,rgba(198,183,147,.8)); }
nav,.hero-content { position:relative; z-index:1; width:min(1200px,calc(100% - 3rem)); margin-inline:auto; }
nav { display:flex; justify-content:space-between; align-items:center; padding-top:28px; } .wordmark { display:flex; align-items:center; gap:.55rem; text-decoration:none; font-family:Fraunces,serif; font-size:1.38rem; } .brand-mark { position:relative; display:block; width:42px; height:38px; overflow:hidden; border-radius:50%; background:#fff; } .brand-mark img { position:absolute; width:58px; height:58px; max-width:none; top:-10px; left:-8px; } .brand-name { display:block; } .wordmark .brand-name small { display:block; font:500 .7rem/1.3 "DM Sans",sans-serif; text-transform:uppercase; letter-spacing:.12em; margin-top:2px; }
.nav-contact { text-decoration:none; border-bottom:1px solid currentColor; font-size:.9rem; } .hero-content { margin:auto; padding:7rem 0 5.5rem; } .eyebrow { font-size:.71rem; font-weight:600; text-transform:uppercase; letter-spacing:.16em; } .eyebrow.green { color:var(--green); } .eyebrow.light { color:#d9e7d1; }
.intro { max-width:530px; font-size:1.16rem; margin-bottom:2rem; } .button { display:inline-block; padding:.82rem 1.3rem; border-radius:100px; text-decoration:none; font-size:.92rem; font-weight:600; } .button-light { color:var(--deep); background:#fff; }
.section { width:min(1200px,calc(100% - 3rem)); margin-inline:auto; padding:8rem 0; } .intro-section { display:grid; grid-template-columns:1fr 1fr; gap:10%; } .prose { max-width:510px; padding-top:.35rem; } .prose p { margin-bottom:1.3rem; }
.photo-split { display:grid; grid-template-columns:1.12fr .88fr; align-items:stretch; padding-top:2rem; padding-bottom:5rem; } .image-frame { position:relative; overflow:hidden; background:var(--beige); min-height:330px; } .image-frame img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; } .photo-placeholder { display:none; align-items:center; justify-content:center; width:100%; height:100%; color:var(--green); font-size:.9rem; } .image-frame.sans-photo .photo-placeholder { display:flex; }
.approach-card { background:var(--beige); padding:clamp(2rem,6vw,5rem); display:flex; flex-direction:column; justify-content:center; } .tags { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1rem; } .tags span { border:1px solid var(--sage); border-radius:99px; padding:.35rem .7rem; font-size:.8rem; color:var(--deep); }
.portrait-section { display:grid; grid-template-columns:1fr 1fr; gap:10%; align-items:center; } .portrait-copy { max-width:500px; } .text-link { color:var(--green); font-weight:600; text-decoration:none; border-bottom:1px solid var(--sage); padding-bottom:.2rem; } .portrait-photo { aspect-ratio:4/5; max-height:620px; }
.practical { width:min(1200px,calc(100% - 3rem)); margin:0 auto 8rem; padding:clamp(2.5rem,6vw,5rem); background:#e8e0d2; } .practical-heading { max-width:610px; margin-bottom:2.8rem; } .practical-heading h2 { margin-bottom:0; } .practical-content { display:grid; grid-template-columns:.76fr 1.24fr; gap:1.2rem; align-items:stretch; } .practical-photo { margin:0; min-height:100%; background:var(--deep); color:#fff; } .practical-photo img { display:block; width:100%; height:calc(100% - 2.6rem); min-height:360px; object-fit:cover; } .practical-photo figcaption { padding:.6rem .8rem; font-size:.78rem; line-height:1.4; } .practical-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem; } .practical-grid article { padding:1.6rem; background:rgba(255,255,255,.48); } .practical-grid h3 { margin:0 0 .8rem; color:var(--green); font-family:Fraunces,Georgia,serif; font-size:1.35rem; font-weight:500; } .practical-grid p { margin:0 0 .85rem; } .practical-grid p:last-child { margin-bottom:0; } .cgs-callout { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-top:1.2rem; padding:1.3rem 1.6rem; background:rgba(255,255,255,.7); } .cgs-callout span { font-size:.88rem; }
.contact { color:#fff; background:var(--deep); display:grid; grid-template-columns:1.35fr .65fr; gap:10%; padding:clamp(3.5rem,8vw,7rem) max(1.5rem,calc((100% - 1200px)/2)); } .contact h2 { margin-bottom:.6rem; } address { font-style:normal; display:flex; flex-direction:column; gap:.55rem; } address a { font-family:Fraunces,serif; font-size:1.4rem; text-underline-offset:.2em; } address p { margin-top:1rem; }
.contact .appointment-button { align-self:flex-start; margin-top:.65rem; font-family:"DM Sans",Arial,sans-serif; font-size:.92rem; text-decoration:none; }
footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.5rem max(1.5rem,calc((100% - 1200px)/2)); font-size:.8rem; background:#e8e0d2; } footer p { margin:0; } footer a { text-underline-offset:.2em; } .social-links { display:flex; gap:1rem; }
.legal-header { display:flex; justify-content:space-between; align-items:center; padding:1.4rem max(1.5rem,calc((100% - 1000px)/2)); background:var(--deep); color:#fff; } .legal-header > a:last-child { font-size:.9rem; text-underline-offset:.2em; } .legal-brand { text-decoration:none; font-family:Fraunces,Georgia,serif; font-size:1.25rem; } .legal-brand span { display:block; font:500 .65rem/1.3 "DM Sans",sans-serif; text-transform:uppercase; letter-spacing:.12em; } .legal-page { width:min(900px,calc(100% - 3rem)); margin:0 auto; padding:clamp(3rem,8vw,6rem) 0; } .legal-page h1 { color:var(--deep); margin-bottom:.7rem; } .legal-lead { color:#5b6559; margin-bottom:4rem; } .legal-page section { padding:1.6rem 0; border-top:1px solid var(--line); } .legal-page h2 { color:var(--green); font-size:1.55rem; letter-spacing:-.025em; margin-bottom:.8rem; } .legal-page p { max-width:760px; }
@media (max-width:720px) { body { font-size:16px; } .hero { min-height:650px; } nav,.hero-content,.section,.practical { width:min(100% - 2rem,1200px); } .intro-section,.photo-split,.portrait-section,.practical-content,.practical-grid,.contact { grid-template-columns:1fr; gap:2.2rem; } .section { padding:5rem 0; } .photo-split { padding-top:0; } .portrait-section { gap:2rem; } .portrait-photo { width:82%; } .practical { margin-bottom:5rem; padding:2.3rem 1.5rem; } .practical-photo img { min-height:250px; } .cgs-callout { align-items:flex-start; flex-direction:column; } .contact { padding:4rem 1.5rem; } .legal-header { padding:1.2rem 1rem; } .legal-page { width:min(100% - 2rem,900px); } footer { align-items:flex-start; flex-direction:column; padding:1.25rem 1rem; } }