:root {
  --cream: #f2ece0;
  --cream-2: #e9e0cf;
  --sand: #c9bfa8;
  --ink: #1b2a4a;
  --muted: #5c5a56;
  --white: #ffffff;
  --border: #ddd4bf;
  --accent: #1b2a4a;
  --accent-dark: #14213a;
  --accent-light: #dde3ee;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  color: var(--ink);
  background: #f7f2e6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.site-header {
  height: 84px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 4vw;
  background: rgba(247, 242, 230, .96);
  position: sticky;
  top: 0;
  z-index: 20;
  border-top: 4px solid var(--accent);
  box-shadow: 0 3px 20px rgba(0,0,0,.05);
}
.brand { min-width: 220px; display: flex; flex-direction: column; line-height: 1; }
.brand-main { font-family: "Cormorant Garamond", serif; font-size: 31px; letter-spacing: .08em; font-weight: 700; }
.brand-sub { font-size: 9px; letter-spacing: .42em; margin-top: 5px; padding-left: 15px; }
.main-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.main-nav a { font-size: 12px; text-transform: uppercase; font-weight: 700; padding: 32px 0 18px; position: relative; }
.main-nav a.active::after, .main-nav a:hover::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; background: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 13px; }
.header-actions select { border: 0; background: transparent; font-weight: 700; }
.menu-toggle { display: none; border: 0; background: transparent; font-size: 24px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 3px; text-transform: uppercase; letter-spacing: .02em; font-weight: 700; font-size: 12px; border: 1px solid transparent; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,.12); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-light { background: var(--accent-light); color: var(--accent-dark); }
.btn-small { min-height: 42px; padding: 0 18px; font-size: 11px; }

.hero { min-height: 650px; display: grid; grid-template-columns: 43% 57%; background: var(--cream); overflow: hidden; }
.hero-copy { padding: 80px 4vw 55px; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { margin: 0 0 13px; color: var(--accent-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 18px; }
.hero h1 { font-family: "Cormorant Garamond", serif; font-size: clamp(55px, 7vw, 88px); line-height: .84; margin: 0; letter-spacing: .01em; }
.hero h1 span { display: block; font-size: .44em; line-height: 1.5; text-transform: uppercase; }
.rule { width: 52px; height: 1px; background: var(--accent); margin: 24px 0 22px; }
.hero-text { font-size: 19px; line-height: 1.55; margin: 0 0 34px; }
.hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-image {
  position: relative;
  min-height: 650px;
  background: linear-gradient(135deg, var(--cream-2), var(--border));
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%, 0 58%);
  overflow: hidden;
}
.fill-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.building-sign { position: absolute; z-index: 1; top: 17%; left: 27%; transform: rotate(-23deg); text-shadow: 0 4px 4px rgba(255,255,255,.65); }
.building-sign strong { display:block; font-family:"Cormorant Garamond",serif; font-size: clamp(45px,6vw,95px); letter-spacing:.08em; }
.building-sign span { display:block; text-align:center; font-size: clamp(12px,1.6vw,24px); letter-spacing:.32em; }

.benefits { display: grid; grid-template-columns: repeat(4, 1fr); background: #ece3d0; padding: 28px 4vw; }
.benefits article { text-align: center; padding: 8px 28px; border-right: 1px solid var(--border); }
.benefits article:last-child { border-right: 0; }
.line-icon { color: var(--accent); font-size: 43px; height: 50px; }
.benefits h3 { text-transform: uppercase; font-size: 13px; margin: 10px 0 8px; }
.benefits p { font-size: 13px; color: #373532; margin: 0; line-height: 1.4; }

.about { display: grid; grid-template-columns: 48% 52%; min-height: 420px; }
.about-image { position: relative; background: linear-gradient(rgba(0,0,0,.02),rgba(0,0,0,.02)), var(--cream); overflow: hidden; }
.reception-logo { position:absolute; z-index: 1; top:25%; left:32%; color:var(--ink); text-align:center; }
.reception-logo strong { display:block; font-family:"Cormorant Garamond",serif; font-size:40px; }
.reception-logo span { letter-spacing:.26em; font-size:10px; }
.about-copy { padding: 58px 7vw 50px 4vw; background: #f7f2e6; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; }
.about-copy .eyebrow { font-size: 15px; }
h2 { font-family:"Cormorant Garamond",serif; font-size: clamp(38px,4vw,52px); line-height:1; margin: 0 0 18px; }
.about-copy p { max-width: 610px; line-height: 1.6; font-size: 16px; }
.about-copy .btn { margin-top: 12px; }

.services { text-align: center; padding: 48px 3vw 54px; background: #f0e9d8; }
.services .eyebrow { font-size: 15px; margin-bottom: 6px; }
.services h2 { margin-bottom: 34px; }
.family-practice-card {
  display:grid;
  grid-template-columns: 34% 66%;
  align-items: stretch;
  text-align:left;
  max-width: 1450px;
  margin: 0 auto 30px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(27,42,74,.12);
}
.fp-intro {
  background: var(--ink);
  color: #fff;
  padding: 44px 38px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap: 6px;
}
.fp-intro .eyebrow { color: #b9c3d8; font-size: 13px; margin: 0 0 4px; }
.fp-intro h3 { font-family:"Cormorant Garamond",serif; font-size: 34px; margin: 0 0 14px; color: #fff; }
.fp-intro p { font-size: 14px; line-height: 1.65; color: #d7deea; margin: 0 0 22px; max-width: 320px; }
.fp-intro .btn-light { align-self: flex-start; }

.family-practice-list {
  list-style:none;
  margin:0;
  padding: 30px 34px;
  background: #fbf7ee;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 24px;
  align-content: center;
}
.family-practice-list li { display:flex; align-items:center; gap: 12px; font-size: 15px; line-height: 1.5; padding: 10px 0; border-bottom: 1px solid #e6ddc9; }
.family-practice-list li:last-child, .family-practice-list li:nth-last-child(2) { border-bottom: 0; }
.fp-check { flex-shrink:0; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 11px; font-weight: 700; display:grid; place-items:center; }

.service-grid { display:grid; grid-template-columns: repeat(3, 1fr); max-width: 1450px; margin: 0 auto 28px; }
.service-card { min-height: 230px; padding: 22px 14px; background:#fbf7ee; border:1px solid #e2d8c0; display:flex; flex-direction:column; align-items:center; }
.service-icon { width:54px; height:54px; border-radius:50%; background:var(--accent-light); display:grid; place-items:center; font-size:29px; margin-bottom:16px; }
.service-card h3 { font-size:15px; line-height:1.25; margin:0 0 10px; }
.service-card p { font-size:13px; line-height:1.45; margin:0; }

.patient-info { display:grid; grid-template-columns: repeat(4,1fr); padding: 28px 4vw; background:#e9e0cc; }
.patient-info > div { display:flex; gap:18px; padding:0 30px; border-right:1px solid #d8cbae; }
.patient-info > div:last-child { border-right:0; }
.info-icon { color:var(--accent); font-size:40px; line-height:1; }
.patient-info h3 { text-transform:uppercase; font-size:13px; margin:0 0 8px; }
.patient-info p { font-size:13px; line-height:1.55; margin:0; }

.contact { max-width: 1100px; margin: 0 auto; padding:70px 8vw; background:#fff; }
.contact > div:first-child { margin-bottom: 36px; max-width: 620px; }
.booking-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact input, .contact select, .contact textarea { width:100%; border:1px solid #d8cbae; background:#f7f2e6; padding:15px; font:inherit; }
.contact input:focus, .contact select:focus, .contact textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-light); }
.contact textarea, .contact button, .form-message { grid-column:1 / -1; }

.form-message { margin:0; font-size:14px; }

footer { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:28px 5vw; background:var(--ink); color:#fff; }
footer div { display:flex; flex-direction:column; }
footer strong { font-family:"Cormorant Garamond",serif; font-size:28px; letter-spacing:.08em; }
footer span { font-size:10px; letter-spacing:.24em; }
footer p { font-size:12px; opacity:.8; }

@media (max-width: 1100px) {
  .main-nav { display:none; position:absolute; top:80px; left:0; right:0; background:#f7f2e6; padding:20px 5vw; flex-direction:column; align-items:flex-start; box-shadow:0 10px 20px rgba(0,0,0,.08); }
  .main-nav.open { display:flex; }
  .main-nav a { padding:8px 0; }
  .menu-toggle { display:block; margin-left:auto; }
  .header-actions .btn { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-image { min-height:480px; clip-path:none; }
  .benefits { grid-template-columns:repeat(2,1fr); gap:25px 0; }
  .benefits article:nth-child(2) { border-right:0; }
  .service-grid { grid-template-columns:repeat(3,1fr); }
  .family-practice-card { grid-template-columns: 40% 60%; }
  .patient-info { grid-template-columns:repeat(2,1fr); gap:28px 0; }
  .patient-info > div:nth-child(2) { border-right:0; }
}

@media (max-width: 720px) {
  .family-practice-card { grid-template-columns: 1fr; }
  .fp-intro { padding: 32px 26px; }
  .fp-intro p { max-width: none; }
  .family-practice-list { grid-template-columns: 1fr; padding: 24px 26px; }
  .family-practice-list li:nth-last-child(2) { border-bottom: 1px solid #e6ddc9; }
  .family-practice-list li:last-child { border-bottom: 0; }
  .site-header { height:74px; padding:0 18px; }
  .brand { min-width:auto; }
  .brand-main { font-size:25px; }
  .brand-sub { font-size:7px; }
  .hero-copy { padding:58px 24px; }
  .hero { min-height:auto; }
  .hero-image { min-height:360px; }
  .building-sign { left:18%; top:24%; }
  .hero-buttons { flex-direction:column; align-items:stretch; }
  .benefits { grid-template-columns:1fr; }
  .benefits article { border-right:0; border-bottom:1px solid var(--border); padding:20px; }
  .about { grid-template-columns:1fr; }
  .about-image { min-height:330px; }
  .about-copy { padding:45px 24px; }
  .service-grid { grid-template-columns:1fr; gap:12px; }
  .patient-info { grid-template-columns:1fr; }
  .patient-info > div { border-right:0; border-bottom:1px solid #d8cbae; padding:18px 8px; }
  .contact { padding:55px 24px; }
  .booking-form { grid-template-columns:1fr; }
  .contact textarea, .contact button, .form-message { grid-column:1; }
  footer { flex-direction:column; align-items:flex-start; }
}