@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --terracotta: #7A3E3E;
    --burnt-orange: #C47B5A;
    --off-white: #F2EAD8;
    --white: #FFFFFF;
    --cream: #FAF6ED;
    --border-light: rgba(122,62,62,0.08);
    --border-mid: rgba(122,62,62,0.15);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--off-white);color:var(--terracotta);font-family:'Inter',sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'DM Serif Display',serif;font-weight:400}
a{color:inherit}
img{max-width:100%;display:block}

/* ── Nav ── */
nav{padding:28px 5%;display:flex;justify-content:space-between;align-items:center;background:var(--off-white);border-bottom:1px solid var(--border-light);position:sticky;top:0;z-index:100}
.nav-logo{font-family:'DM Serif Display',serif;font-size:32px;text-decoration:none;color:var(--terracotta);letter-spacing:-1px}
.nav-links{display:flex;gap:38px;align-items:center}
.nav-links a{text-decoration:none;color:var(--terracotta);font-weight:500;font-size:.95rem;letter-spacing:.3px;position:relative;padding-bottom:4px;transition:color .3s}
.nav-links a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--burnt-orange);transition:width .3s}
.nav-links a:hover{color:var(--burnt-orange)}
.nav-links a:hover::after{width:100%}
.nav-links a.active{color:var(--burnt-orange);font-weight:600}
.nav-links a.active::after{width:100%}
.city-badge{font-size:.72rem;font-weight:600;letter-spacing:1.5px;color:var(--burnt-orange);border:1.5px solid var(--burnt-orange);padding:5px 16px;border-radius:30px;text-transform:uppercase;white-space:nowrap;display:inline-block}
.nav-hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px;flex-direction:column;gap:5px}
.nav-hamburger span{width:22px;height:2px;background:var(--terracotta);display:block;transition:.3s}

/* ── Buttons ── */
.btn{background:var(--burnt-orange);color:var(--white);padding:22px 50px;text-decoration:none;font-weight:600;display:inline-block;border:none;cursor:pointer;transition:all .3s}
.btn:hover{background:var(--terracotta);transform:translateY(-2px)}

/* ── Hero ── */
.hero{display:flex;min-height:85vh;align-items:stretch}
.hero-content{flex:1;padding:80px 8% 80px 5%;display:flex;flex-direction:column;justify-content:center}
.hero h1{font-size:clamp(2.8rem,5vw,4.2rem);line-height:1.05;margin-bottom:28px;letter-spacing:-.5px}
.hero p{font-size:1.25rem;margin-bottom:40px;max-width:520px;opacity:.9}
.hero-image{flex:1.2;background-size:cover;background-position:center;mask-image:linear-gradient(to right,transparent,black 25%);-webkit-mask-image:linear-gradient(to right,transparent,black 25%);background-color:#e5dec9}

/* ── Pricing ── */
.pricing{background:var(--white);padding:120px 5%;text-align:center}
.pricing h2{font-size:2.8rem;margin-bottom:20px}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:30px;max-width:1200px;margin:60px auto 0}
.price-card{padding:60px 40px;background:var(--off-white);border:1px solid transparent;transition:all .4s}
.price-card:hover{border-color:var(--burnt-orange);transform:translateY(-8px);background:var(--white)}
.price-label{color:var(--burnt-orange);font-weight:600;text-transform:uppercase;letter-spacing:2px;font-size:.8rem}
.price-amount{font-family:'DM Serif Display',serif;font-size:4rem;color:var(--terracotta);margin:15px 0}

/* ── FAQ ── */
.faq-section{padding:120px 5%}
.faq-container{max-width:900px;margin:0 auto}
.faq-container>h2{font-size:2.8rem;margin-bottom:60px;text-align:center}
.faq-item{border-bottom:1px solid var(--border-light);padding-bottom:25px;margin-bottom:25px}
.faq-question{font-family:'DM Serif Display',serif;font-size:1.5rem;margin-bottom:15px;color:var(--terracotta)}
.faq-answer{line-height:1.8;opacity:.85}
.faq-answer ul{list-style:none;margin-top:10px}
.faq-answer li{margin-bottom:8px;position:relative;padding-left:20px}
.faq-answer li::before{content:"→";position:absolute;left:0;color:var(--burnt-orange)}

/* ── Page Content (About, Clinic) ── */
.page-content{max-width:780px;margin:0 auto;padding:70px 5% 120px}
.page-content h1{font-size:3rem;margin-bottom:20px}
.page-content .lead{font-size:1.15rem;line-height:1.75;opacity:.75;margin-bottom:50px}
.page-content h2{font-size:2rem;margin:50px 0 18px}
.page-content p{font-size:1.05rem;line-height:1.8;opacity:.8;margin-bottom:1.1em}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:40px 0}
.info-box{background:var(--white);padding:36px;border:1px solid var(--border-light)}
.info-box .label{color:var(--burnt-orange);font-weight:600;text-transform:uppercase;letter-spacing:2px;font-size:.72rem;margin-bottom:10px}
.info-box p{font-size:1rem;opacity:.85;margin:0}

/* ── Footer ── */
footer{background:var(--terracotta);color:var(--off-white);padding:100px 5% 60px}
footer a{color:var(--off-white);text-decoration:none}
.footer-wrap{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:50px}
.footer-brand{font-family:'DM Serif Display',serif;font-size:3rem;margin-bottom:10px}
.footer-tagline{font-weight:600;color:var(--burnt-orange)}
.neighborhood-list{font-size:.9rem;opacity:.7;margin-top:15px;max-width:500px;line-height:1.8}
.footer-right{text-align:right}
.address-block{margin-top:25px;line-height:1.4}
.address-label{font-weight:600;color:var(--burnt-orange);text-transform:uppercase;font-size:.75rem;letter-spacing:1px;margin-bottom:5px;display:block}
.footer-copy{font-size:.75rem;margin-top:40px;opacity:.5}

/* ── Responsive ── */
@media(max-width:992px){
    .hero{flex-direction:column;min-height:auto}
    .hero-image{height:45vh;mask-image:none;-webkit-mask-image:none}
    .hero-content{padding:60px 5%;text-align:center;align-items:center}
}
@media(max-width:768px){
    .nav-hamburger{display:flex}
    .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--off-white);flex-direction:column;padding:20px 5%;gap:14px;border-bottom:1px solid var(--border-light)}
    .nav-links.open{display:flex}
    .city-badge{display:none}
    .footer-wrap{flex-direction:column;gap:30px}
    .footer-right{text-align:left}
    .info-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
    .hero h1{font-size:2rem}
    .price-amount{font-size:3rem}
    .btn{padding:18px 35px}
    .pricing{padding:80px 5%}
    .faq-section{padding:80px 5%}
}