/* Shared page layout: full-width bands and centered 1280px content. */
:root { --gutter: 65px; --teal: #008e99; --green: #009e84; }
body { background: #f8fdfd; }
.container { width: 100%; max-width: 1280px; margin-inline: auto; }
.site-header { background: #fff; }
.header-inner { min-height: 70px; padding-inline: 46px; gap: 22px; }
nav { gap: 20px; }
nav a { font-size: 15px; font-weight: 600; padding-block: 22px; }
nav a.active::after { bottom: 13px; }
.header-inner > .btn { font-size: 12px; padding: 10px 16px; min-height: 40px; border-radius: 22px; }
.brand strong { font-size: 21px; }
.btn { border-radius: 13px; background: linear-gradient(110deg,#00a691,#009d88); }
.hero-band, .cta-band { width: 100%; }
.hero { width: 100%; margin: 0; border-radius: 0; }
.hero-inner { width: 100%; max-width: 1280px; margin: auto; min-height: 460px; padding: 48px var(--gutter); gap: 45px; }
.hero h1 { font-size: clamp(36px,3.5vw,50px); }
.hero-inner > img { width: 100%; height: auto; max-width: 500px; max-height: none; aspect-ratio: auto; object-fit: contain; }
.hero.dark { background: linear-gradient(115deg,#003f3b,#006254); }
.split > img { width: 100%; height: auto; max-height: none; object-fit: contain; }
.card img { height: auto; aspect-ratio: auto; object-fit: contain; }
.clinic-card { grid-template-columns: 160px minmax(0,1fr); }
.clinic-card img { height: auto; max-height: none; align-self: start; }
.treatment-card .treatment-top img { width: 75px; height: auto; }
.cta { margin: 0; border-radius: 0; display: block; padding: 0; background: linear-gradient(110deg,#08797c,#004047); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 44px; }
.cta h2 { font-size: 30px; }
.cta .actions { flex-shrink: 1; justify-content: flex-end; }
.site-footer { background: #002738; padding-top: 42px; }
.section { padding-block: 55px; }
.section-heading h2 { font-size: 32px; }
.card { border-radius: 15px; }
.tag, .eyebrow { border-radius: 20px; }
@media(max-width:1200px) {
  .header-inner > .btn { display: none; }
  .cta-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cta .actions { justify-content: flex-start; }
}
@media(max-width:1050px) {
  :root { --gutter: 40px; }
  .clinic-card { grid-template-columns: 1fr; }
  .clinic-card img { width: 100%; max-width: 250px; justify-self: center; }
}
@media(max-width:950px) {
  .header-inner { min-height: 72px; padding-inline: 25px; flex-wrap: wrap; }
  .menu-toggle { display: block; margin-left: auto; }
  nav { display: none; width: 100%; margin: 0; padding-bottom: 16px; flex-wrap: wrap; gap: 12px 22px; }
  nav.open { display: flex; }
  nav a { padding-block: 8px; font-size: 15px; }
  nav a.active::after { bottom: 2px; }
}
@media(max-width:760px) {
  :root { --gutter: 24px; }
  .container { padding-inline: var(--gutter); }
  .header-inner { padding-inline: 24px; }
  .hero-inner { grid-template-columns: 1fr; min-height: auto; padding: 35px var(--gutter); gap: 28px; }
  .hero h1 { font-size: clamp(34px,8vw,44px); }
  .hero-inner > img { width: 100%; height: auto; max-width: 420px; border-radius: 14px; }
  .split > img { max-height: none; max-width: 420px; justify-self: center; }
  .section { padding-block: 40px; }
  .section-heading h2 { font-size: 28px; }
  .cta-inner { padding-block: 35px; }
  .cta h2 { font-size: 28px; }
  .clinic-card img { max-width: 300px; }
}