:root { --ink:#20333b; --muted:#597077; --cream:#faf7f0; --sand:#e8ddc8; --olive:#b7be9b; --coral:#d77f65; --line:rgba(32,51,59,.18); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans",sans-serif; font-size:16px; line-height:1.55; } a { color:inherit; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; background:white; padding:.5rem; z-index:10; }
.site-header { min-height:96px; display:flex; align-items:center; justify-content:space-between; padding:20px clamp(24px,5vw,80px); border-bottom:1px solid var(--line); } .wordmark { text-decoration:none; line-height:1.1; font-family:Fraunces,serif; font-size:1.1rem; } .wordmark small { display:block; margin-top:4px; color:var(--muted); font:500 .61rem "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; } nav { display:flex; align-items:center; gap:28px; } nav a { text-decoration:none; font-size:.88rem; } .nav-contact,.button { background:var(--ink); color:var(--cream); padding:12px 18px; border-radius:2px; } .menu-button { display:none; }
.hero { min-height:calc(100vh - 96px); display:grid; grid-template-columns:1.13fr .87fr; } .hero-copy { padding:clamp(70px,12vw,180px) clamp(24px,8vw,130px); align-self:center; } .eyebrow,.section-label { color:var(--muted); font:500 .69rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.09em; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:Fraunces,serif; font-weight:500; letter-spacing:-.035em; line-height:1.04; } h1 { max-width:760px; font-size:clamp(3.1rem,6.4vw,6.8rem); margin:18px 0 30px; } h2 { font-size:clamp(2.4rem,4.4vw,4.5rem); margin-bottom:32px; } .intro { max-width:560px; font-size:1.12rem; color:var(--muted); margin-bottom:35px; } .button { display:inline-flex; gap:22px; text-decoration:none; transition:transform .2s; } .button:hover { transform:translateY(-3px); }
.hero-art { min-height:560px; position:relative; overflow:hidden; background:var(--sand); } .sun { position:absolute; width:220px; height:220px; border-radius:50%; background:var(--coral); top:17%; right:20%; } .arch { position:absolute; border:2px solid var(--ink); border-bottom:0; border-radius:300px 300px 0 0; bottom:0; } .arch-one { width:77%; height:64%; right:-8%; } .arch-two { width:56%; height:46%; right:18%; } .hero-art p { position:absolute; bottom:7%; left:11%; font:500 clamp(1.4rem,2.2vw,2.4rem)/1.1 Fraunces,serif; } .stem { position:absolute; width:2px; background:var(--ink); transform-origin:bottom; bottom:0; } .stem-one { height:50%; left:20%; transform:rotate(-20deg); } .stem-two { height:42%; left:31%; transform:rotate(20deg); } .leaf { position:absolute; width:65px; height:28px; background:var(--olive); border-radius:100% 0 100% 0; } .leaf-one { bottom:38%; left:7%; transform:rotate(22deg); } .leaf-two { bottom:48%; left:33%; transform:rotate(205deg); }
.statement { padding:clamp(70px,11vw,160px) 8vw; background:var(--olive); } .statement p { max-width:1040px; font:500 clamp(2rem,4vw,4rem)/1.16 Fraunces,serif; letter-spacing:-.03em; margin:0; }
.section-wrap { max-width:1400px; margin:auto; padding:clamp(75px,11vw,150px) clamp(24px,8vw,120px); display:grid; grid-template-columns:22% 1fr; gap:clamp(25px,6vw,100px); } .section-label span { margin-right:11px; color:var(--coral); } .two-column-copy { display:grid; grid-template-columns:1fr 1fr; gap:38px; max-width:900px; color:var(--muted); font-size:1.05rem; } .credentials { max-width:900px; margin-top:55px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); } .credentials summary { padding:19px 0; list-style:none; cursor:pointer; color:var(--ink); display:flex; justify-content:space-between; } .credentials summary::-webkit-details-marker { display:none; } .credentials[open] summary span { transform:rotate(45deg); } .credentials p { max-width:760px; padding:4px 0 22px; }
.approach { color:var(--cream); background:var(--ink); } .light { color:#d6ddd7; } .pillars { display:grid; grid-template-columns:repeat(3,1fr); margin-top:64px; border-top:1px solid rgba(255,255,255,.25); } .pillars article { padding:27px 28px 10px 0; border-right:1px solid rgba(255,255,255,.25); margin-right:28px; } .pillars article:last-child { border:0; } .number,.detail-label { color:var(--coral); font:500 .68rem "DM Mono",monospace; letter-spacing:.08em; } h3 { font:500 1.4rem Fraunces,serif; margin-bottom:9px; } .pillars article>p:last-child,.approach-lede { color:#d6ddd7; }
.focus { padding-bottom:clamp(75px,11vw,150px); } .focus-list { list-style:none; padding:0; margin:0; border-top:1px solid var(--line); } .focus-list li { display:flex; justify-content:space-between; align-items:center; padding:19px 0; border-bottom:1px solid var(--line); font:500 clamp(1.25rem,2vw,1.8rem) Fraunces,serif; } .focus-list span { color:var(--coral); font-family:"DM Sans"; } .fine-print { font-size:.8rem; color:var(--muted); margin-top:25px; }
.fees { background:#e4ebe8; padding:clamp(75px,10vw,140px) 8vw; } .fees-inner { max-width:1160px; margin:auto; } .detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .detail-grid div { padding:27px 25px; background:var(--cream); min-height:145px; } .detail-grid p:last-child { margin-bottom:0; font-size:1.1rem; }
.contact { padding-top:clamp(90px,13vw,180px); } .contact-copy { max-width:570px; color:var(--muted); font-size:1.08rem; } .contact-links { display:flex; flex-direction:column; gap:9px; margin:38px 0; } .contact-links a { font:500 clamp(1.45rem,3.1vw,3rem) Fraunces,serif; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:12px; display:flex; justify-content:space-between; } .contact-links a:hover { color:var(--coral); } .emergency-note { max-width:660px; color:var(--muted); font-size:.8rem; }
footer { padding:28px clamp(24px,5vw,80px); background:var(--ink); color:#d6ddd7; display:flex; justify-content:space-between; gap:20px; font-size:.73rem; } footer p { margin:0; }.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; }
@media (max-width:760px) { .site-header { min-height:75px; padding:15px 24px; position:relative; } nav { display:none; position:absolute; z-index:2; background:var(--cream); border-bottom:1px solid var(--line); top:74px; left:0; right:0; padding:20px 24px 25px; flex-direction:column; align-items:flex-start; gap:20px; } nav.open { display:flex; } .menu-button { border:0; background:none; display:flex; flex-direction:column; gap:5px; padding:10px 0 10px 12px; } .menu-button span:not(.sr-only) { height:1px; width:24px; display:block; background:var(--ink); } .hero { grid-template-columns:1fr; } .hero-copy { padding:85px 24px 70px; } .hero-art { min-height:410px; } .section-wrap { grid-template-columns:1fr; gap:25px; padding:80px 24px; } .two-column-copy,.pillars,.detail-grid { grid-template-columns:1fr; gap:0; } .pillars article { border-right:0; border-bottom:1px solid rgba(255,255,255,.25); padding:24px 0; margin:0; } .pillars article:last-child { border-bottom:0; } .fees { padding:80px 24px; } footer { flex-direction:column; } }