/* Fluid page edges keep the clinic layout proportionate to the screen. */
:root{
  --content-width:100%;
  --page-gutter:clamp(20px,3vw,64px);
  --section-space:clamp(56px,5.4vw,104px);
}

.container,.nav-container{
  width:100%;
  max-width:none;
  margin-inline:auto;
  padding-inline:var(--page-gutter);
}

.section-pad{padding-block:var(--section-space)}
.page-content-section{padding-top:clamp(40px,3.6vw,64px)}
.page-hero{padding:calc(var(--nav-height) + clamp(40px,4vw,76px)) 0 clamp(36px,3.5vw,64px)}
.page-title{font-size:clamp(36px,4.2vw,72px)}
.page-hero .lead{max-width:760px}
.h2{font-size:clamp(32px,3.5vw,58px)}
.lead{max-width:760px}

/* The navigation follows the full page width at every desktop size. */
.nav-inner{padding-inline:var(--page-gutter)}
.nav-links{min-width:0}
.nav-links a{flex-shrink:0}
.nav-actions{min-width:0}

/* Let the main clinic photograph and heading fill the larger hero. */
.hero{
  min-height:min(100svh,1080px);
  padding:calc(var(--nav-height) + clamp(40px,3.8vw,72px)) 0 clamp(44px,4vw,72px);
}
.hero-grid{gap:clamp(32px,4vw,80px)}
.hero-title{
  font-size:clamp(44px,5.4vw,104px);
  max-width:780px;
  line-height:1.04;
}
.hero-lead{max-width:660px;font-size:clamp(16px,1.15vw,19px);line-height:1.8}
.hero-ctas{gap:14px;margin-top:28px}
.mini-meta{gap:14px;font-size:13px}
.badges{max-width:680px;gap:12px 22px;font-size:13px}
.video-card{transform:none;border-radius:24px}
.video-card:hover{transform:translateY(-3px)}
.video-card img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center}
.video-foot{padding:15px 20px;font-size:13px}
.hero-chip{padding:12px 16px}
.hero-chip .hc-num{font-size:20px}
.hero-chip .hc-lbl{font-size:12px}
.hc-tr{right:16px;top:16px}
.hc-bl{left:16px;bottom:66px}
.stats-row{gap:clamp(14px,1.5vw,28px)}
.stat-box{padding:clamp(18px,1.6vw,28px);border-radius:18px}
.stat-box .num{font-size:clamp(30px,2.5vw,44px)}
.stat-box .lbl{font-size:clamp(12px,.9vw,15px)}
.stat-box .sub{font-size:clamp(11px,.8vw,13px)}

/* Scale the existing grids with the available width rather than a fixed page. */
.page-card-grid,.manual-photo-grid,.doctors-team-grid{gap:clamp(20px,2vw,36px)}
.page-card{padding:clamp(24px,2vw,40px)}
.page-card h2,.page-card h3{font-size:clamp(25px,1.8vw,32px)}
.page-card p{max-width:480px;line-height:1.8}
.feat p{max-width:600px}
.prog-scroll{gap:clamp(20px,2vw,36px)}
.prog ul{max-width:540px}
.doctor-info{padding:clamp(30px,3vw,56px)}
.doctor-quote{max-width:740px}
.doctor-card-bio{max-width:620px}
.team-photo-card{padding:clamp(24px,2.5vw,48px);gap:clamp(28px,3vw,56px)}
.team-photo-content p{max-width:620px}
.review-box{padding:clamp(28px,3vw,52px)}
.review-text{max-width:1080px;font-size:clamp(22px,2vw,32px)}
.review-mini{gap:clamp(16px,1.5vw,28px)}
.rm{padding:clamp(20px,1.8vw,32px)}
.admit-band{padding:clamp(56px,5vw,96px) 0}
.admit-card{padding:clamp(28px,3vw,56px);gap:clamp(24px,3vw,56px)}
.admit-card h3{max-width:880px;font-size:clamp(32px,3.4vw,56px)}
.admit-card p{max-width:640px}
#visit .visit-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,76px)}
#visit .info-card{padding:clamp(24px,2.3vw,44px)}
.map-card iframe{height:clamp(360px,30vw,580px)}
.footer-grid{gap:clamp(28px,3vw,56px)}
.footer-grid > div:first-child{max-width:480px}

@media(min-width:900px){
  .hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}
}

@media(min-width:1024px) and (max-width:1239px){
  .nav-inner{gap:12px}
  .brand{gap:8px}
  .brand-badge{width:44px;height:44px}
  .brand .brand-name{font-size:18px}
  .nav-links{gap:clamp(10px,1vw,14px);font-size:11px;letter-spacing:.015em}
  .nav-cta{padding-inline:14px;font-size:11px;letter-spacing:.02em}
}

@media(min-width:1240px){
  .nav-inner{gap:24px}
  .brand .brand-name{font-size:clamp(20px,1.4vw,25px)}
  .nav-links{gap:clamp(16px,1.4vw,32px);font-size:clamp(11.5px,.85vw,14px)}
  .nav-cta{padding:13px 22px;font-size:clamp(11.5px,.8vw,13px)}
  .hero-ctas .btn{padding:15px 28px;font-size:14px}
  .prog{flex-basis:calc((100% - clamp(40px,4vw,72px)) / 3);padding:clamp(24px,2vw,40px)}
}

@media(min-width:1440px){
  .video-card img{aspect-ratio:auto;height:clamp(480px,32vw,640px)}
  .video-tag{top:22px;left:22px;font-size:12px}
  .hero-chip{padding:14px 18px}
  .doctor-photo{max-width:440px;max-height:540px}
  .doctor-card-photo-wrap{max-height:420px}
}

@media(min-width:1100px){
  .blog-article-layout{grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(36px,4vw,80px)}
  .blog-article-content{max-width:900px;margin-inline:auto}
  .blog-article-body{margin-inline:auto}
}

@media(min-width:768px) and (max-width:1023px){
  :root{--nav-height:112px}
  .nav-inner{gap:0 18px}
  .nav-links{gap:12px;font-size:11.5px}
  .hero{min-height:0}
}

@media(max-width:979px){
  #visit .visit-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .map-card iframe{height:420px}
}

@media(max-width:899px){
  .hero{min-height:0}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero-grid > div:last-child{max-width:none;width:100%;margin:8px 0 0}
  .hero-title{max-width:780px;font-size:clamp(44px,7vw,66px)}
  .hero-lead{max-width:720px}
  .video-card img{aspect-ratio:16/11}
  .doctor-info{padding:30px}
}

@media(max-width:767px){
  :root{--page-gutter:clamp(20px,4vw,28px);--section-space:60px}
  .nav-inner{gap:12px}
  .hero{padding:calc(var(--nav-height) + 34px) 0 48px}
  .hero-title{font-size:clamp(44px,9vw,60px)}
  .hero-lead{font-size:16px;line-height:1.75}
  .page-hero{padding:calc(var(--nav-height) + 34px) 0 36px}
  .page-title{font-size:clamp(36px,6vw,48px)}
  .page-card-grid{gap:20px}
  .page-card{padding:26px}
  .video-foot{padding:13px 16px;font-size:12px}
  .hero-chip .hc-num{font-size:17px}
  .hero-chip .hc-lbl{font-size:11px}
  .hero-chip{padding:10px 12px}
  .stats-row{gap:14px}
  .stat-box{padding:18px 16px}
  .stat-box .num{font-size:30px}
  .stat-box .lbl{font-size:12px}
  .stat-box .sub{font-size:11px}
  .map-card iframe{height:360px}
  .admit-card h3{font-size:36px}
  .review-text{font-size:24px}
}

@media(max-width:579px){
  :root{--nav-height:72px;--section-space:48px}
  .nav-inner{height:72px;min-height:72px}
  .brand .brand-name{font-size:18px}
  .hero-title{font-size:clamp(42px,11vw,58px);margin-top:20px}
  .hero-grid{gap:28px}
  .hero-ctas{gap:10px;margin-top:24px}
  .hero-ctas .btn{width:100%;padding:14px 18px;font-size:12.5px}
  .mini-meta{font-size:12px;gap:10px}
  .badges{font-size:12px;gap:10px 16px}
  .video-card{border-radius:20px}
  .video-card img{aspect-ratio:4/3}
  .hero-chip{display:none}
  .stat-box{padding:16px 12px;border-radius:14px}
  .stat-box .num{font-size:26px}
  .page-title{font-size:36px}
  .h2{font-size:32px}
  .page-card{padding:24px}
  .page-card h2,.page-card h3{font-size:25px}
  .doctor-info{padding:26px 22px}
  .review-box{padding:24px}
  .review-text{font-size:22px}
  .rm{padding:20px}
  .admit-band{padding:52px 0}
  .admit-card{padding:28px 22px}
  .admit-card h3{font-size:32px}
  #visit .info-card{padding:22px}
  .map-card iframe{height:320px}
}

@media(prefers-reduced-motion:reduce){
  .video-card:hover{transform:none}
}