/* The proportions, imagery and section rhythm follow the supplied page design. */
:root { --deep:#05284b; --electric:#0056ac; --line:#d7e7f6; }
html { scroll-padding-top: 72px; }
.brand img, .footer-top img { display:block; }
.nav a:hover, .footer-top a:hover { color:#0062ba; }
.nav a:focus-visible, a:focus-visible, button:focus-visible { outline:3px solid #5bb8ff; outline-offset:3px; }
.btn { justify-content:center; }
.btn span { font-size:1.25em; line-height:.7; }
.hero-aside, .tech-signature, .family-caption, .smile-quote { display:none; }
.tech-art img, .family-photo img, .portrait img { display:block; width:100%; height:100%; object-fit:cover; }
.smile-visual { background:url('assets/smile-illustration.png') center / cover no-repeat; }
.service-grid .ico { width:31px; height:31px; fill:none; stroke:#0052a9; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

@media (min-width:1081px) {
  html { scroll-padding-top:clamp(58px,5.2vw,76px); }
  .site-header { height:clamp(58px,5.2vw,76px); padding:0 4.5%; background:rgba(255,255,255,.97); box-shadow:0 1px 0 #e8eff7; }
  .brand { width:20%; height:100%; display:flex; align-items:center; overflow:visible; }
  .brand img { width:205px; height:88px; max-height:none; object-fit:fill; transform:scaleY(.56); transform-origin:center; }
  .nav { gap:clamp(18px,2.05vw,31px); margin-left:1.5%; white-space:nowrap; }
  .nav a { font-size:clamp(10px,.9vw,13px); font-weight:700; }
  .header-actions { margin-left:auto; gap:clamp(18px,2.35vw,34px); }
  .header-actions .phone { font-size:clamp(13px,1.18vw,17px); white-space:nowrap; }
  .header-actions .btn { min-width:clamp(174px,16.7vw,235px); height:clamp(38px,3.6vw,50px); padding:0 17px; font-size:clamp(11px,.95vw,14px); }
  .btn { border-radius:8px; padding:10px 19px; font-size:clamp(10px,.95vw,14px); }
  .btn-primary { background:linear-gradient(135deg,#0060b9,#00396d); box-shadow:0 3px 7px rgba(0,62,133,.23); border:1px solid #2ca8ed; }
  .btn-outline { border-color:#1170d5; color:#0055a8; }
  .hero { display:block; height:clamp(355px,32.25vw,465px); min-height:0; background:#f8fcff; overflow:hidden; }
  .hero-copy { position:relative; z-index:4; width:43%; height:100%; padding:clamp(17px,2.1vw,28px) 0 12px 4.5%; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; transform:translateY(-11px); }
  .hero .eyebrow { margin:0 0 8px; white-space:nowrap; font-size:clamp(8px,.82vw,11px); letter-spacing:.3em; color:#526d8e; }
  .hero h1 { margin:0 0 10px; font-size:clamp(48px,5.12vw,75px); line-height:.86; letter-spacing:-.035em; color:#071f3c; font-weight:500; }
  .hero h1 span { color:#004ead; }
  .hero .lead { margin:0; max-width:370px; font-size:clamp(12px,1.18vw,17px); line-height:1.32; font-weight:500; color:#102945; }
  .hero .cta-row { margin:13px 0 17px; gap:9px; }
  .hero .cta-row .btn { min-width:133px; min-height:36px; }
  .hero .cta-row .btn-outline { min-width:137px; }
  .hero .mini-points { gap:16px; align-items:center; flex-wrap:nowrap; color:#183a62; }
  .hero .mini-points span { display:flex; align-items:center; gap:5px; line-height:1.04; white-space:nowrap; font-size:clamp(9px,.83vw,12px); font-weight:500; }
  .hero .mini-points span::first-letter { font-size:26px; color:#0056ad; }
  .hero-image { position:absolute; left:13%; right:0; top:0; bottom:0; height:auto; clip-path:none; }
  .hero-image img { width:100%; height:100%; object-fit:cover; object-position:50% 48%; filter:none; }
  .hero-image:after { display:none; }
  .hero-aside { display:flex; position:absolute; right:0; top:38%; bottom:4%; width:14%; background:rgba(1,21,47,.88); color:#fff; flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; padding:15px 8px 15px 15px; font-size:clamp(10px,.95vw,13px); letter-spacing:.22em; line-height:1.6; text-transform:uppercase; }
  .hero-aside strong { font-weight:600; }
  .hero-aside i { height:1px; width:38px; background:#fff; }
  .hero-aside span { font-size:.87em; }
  .orbital { display:none; }
  .hero:after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:25px; background:#fff; clip-path:polygon(0 0,37% 100%,70% 33%,100% 0,100% 100%,0 100%); z-index:5; pointer-events:none; }

  .harbor { grid-template-columns:41% 26% 33%; height:clamp(242px,21.6vw,310px); min-height:0; }
  .harbor-photo { border-radius:0 0 110px 0; }
  .harbor-photo img { object-position:center; }
  .harbor-photo:after { background:linear-gradient(0deg,rgba(0,29,62,.82),transparent 65%); }
  .harbor-label { left:10%; bottom:9%; display:flex; align-items:end; gap:13px; }
  .harbor-label strong { font:italic 500 clamp(37px,3.5vw,52px) 'Brush Script MT',cursive; letter-spacing:.02em; white-space:nowrap; }
  .harbor-label small { font-size:clamp(8px,.75vw,11px); letter-spacing:.22em; line-height:1.45; text-transform:uppercase; }
  .harbor-copy { padding:14px 8% 15px 8%; }
  .harbor-copy .eyebrow { font-size:clamp(7px,.66vw,10px); letter-spacing:.18em; margin:0 0 4px; white-space:nowrap; }
  .harbor-copy h2 { font-size:clamp(28px,2.7vw,39px); line-height:.93; margin:0 0 5px; font-weight:500; }
  .harbor-copy p:not(.eyebrow) { font-size:clamp(10px,.95vw,13px); line-height:1.22; margin:0 0 7px; color:#253f59; }
  .harbor-copy .btn { align-self:flex-start; min-width:125px; min-height:28px; padding:5px 10px; }
  .harbor-building { display:block; clip-path:none; }
  .harbor-building img { object-position:60% 0%; }
  .harbor-building:after { content:"Great smiles\A Stronger communities\A Brighter tomorrows"; white-space:pre; display:flex; align-items:center; justify-content:center; text-align:left; position:absolute; right:0; top:0; bottom:0; width:25%; padding:15px; background:rgba(2,20,44,.82); color:#fff; font-size:clamp(8px,.76vw,11px); letter-spacing:.2em; line-height:2.3; text-transform:uppercase; }

  .technology { grid-template-columns:27% 31% 24% 18%; height:clamp(218px,19.8vw,290px); min-height:0; padding:0 4.5%; background:linear-gradient(112deg,#061e3a,#003a75 43%,#062448 80%,#063a6c); }
  .technology:before { opacity:.35; }
  .tech-copy { display:flex; flex-direction:column; justify-content:center; padding:10px 0; }
  .technology .eyebrow { margin:0 0 4px; font-size:clamp(7px,.68vw,10px); letter-spacing:.2em; }
  .technology h2 { margin:0 0 6px; font-size:clamp(29px,2.7vw,39px); line-height:.94; font-weight:500; }
  .tech-copy p:not(.eyebrow) { margin:0 0 7px; max-width:265px; font-size:clamp(10px,.95vw,13px); line-height:1.22; }
  .tech-copy .btn { align-self:flex-start; min-height:32px; padding:5px 13px; }
  .tech-art { overflow:hidden; }
  .tech-art img { width:130%; height:100%; max-width:none; object-fit:cover; object-position:50%; transform:translateX(-9%); mix-blend-mode:screen; }
  .tech-list { display:flex; flex-direction:column; justify-content:center; gap:clamp(8px,1vw,15px); padding:10px 5%; }
  .tech-list div { border:0; padding:0; display:flex; flex-direction:column; }
  .tech-list b { font-size:clamp(10px,.86vw,13px); font-weight:700; }
  .tech-list b::first-letter { color:#8cbdff; }
  .tech-list span { font-size:clamp(9px,.8vw,12px); margin-top:1px; }
  .tech-signature { display:flex; align-items:center; justify-content:center; color:#fff; font:italic 500 clamp(27px,3.1vw,45px)/.92 'Brush Script MT',cursive; transform:rotate(-8deg); text-shadow:0 2px 12px #00172d; }

  .services { grid-template-columns:27% 38% 35%; height:clamp(164px,14.6vw,215px); min-height:0; }
  .services-intro { padding:16px 8% 12px 15%; }
  .services-intro .eyebrow { font-size:clamp(7px,.65vw,10px); letter-spacing:.17em; margin:0 0 4px; white-space:nowrap; }
  .services-intro h2 { margin:0 0 5px; font-size:clamp(24px,2.25vw,34px); line-height:.92; font-weight:500; }
  .services-intro p:not(.eyebrow) { margin:0 0 6px; font-size:clamp(9px,.87vw,12px); line-height:1.2; color:#314b65; }
  .services-intro .btn { min-height:28px; padding:5px 11px; }
  .service-grid { display:grid; grid-template-columns:repeat(4,1fr); align-items:stretch; gap:0; background:#f4f9ff; border-radius:90px 0 0 0; overflow:hidden; }
  .service-grid article { background:transparent; border-right:1px solid #d8e9f9; padding:clamp(23px,2.9vw,42px) 6px 6px; }
  .service-grid article:last-child { border:0; }
  .service-grid .ico { width:clamp(25px,2.5vw,36px); height:clamp(25px,2.5vw,36px); }
  .service-grid h3 { margin:5px 0 3px; font-size:clamp(9px,.88vw,13px); line-height:1.06; }
  .service-grid p { margin:0; font-size:clamp(8px,.73vw,11px); line-height:1.14; }
  .family-photo { position:relative; min-height:0; overflow:hidden; border-radius:100px 0 0 0; }
  .family-photo img { position:absolute; inset:0; object-position:center 45%; }
  .family-caption { display:block; position:absolute; right:8%; top:19%; font:italic 500 clamp(20px,2vw,30px)/.9 'Brush Script MT',cursive; color:#0b2a4d; text-align:right; transform:rotate(-7deg); text-shadow:0 1px 5px #fff; }

  .doctors-gallery { grid-template-columns:27% 29% 44%; height:clamp(176px,15.7vw,230px); min-height:0; }
  .doctor-copy { padding:15px 7% 10px 16%; background:linear-gradient(145deg,#edf7ff,#fff 70%); }
  .doctor-copy .eyebrow { margin:0 0 4px; font-size:clamp(7px,.65vw,10px); letter-spacing:.17em; white-space:nowrap; }
  .doctor-copy h2 { font-size:clamp(27px,2.35vw,36px); line-height:1; margin:0 0 5px; font-weight:500; }
  .doctor-copy p:not(.eyebrow) { margin:0 0 7px; font-size:clamp(9px,.81vw,12px); line-height:1.17; }
  .doctor-copy .btn { min-height:27px; padding:5px 10px; }
  .doctor-card { display:block; position:relative; overflow:hidden; background:#203a56; }
  .portrait { height:100%; width:100%; }
  .portrait img { object-position:30% 35%; }
  .doctor-card:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 25%,rgba(1,23,49,.83) 100%); }
  .quote { position:absolute; z-index:2; right:4%; top:17%; width:46%; padding:0; color:#fff; font-size:clamp(17px,1.65vw,24px); line-height:1.08; text-shadow:0 2px 5px rgba(0,0,0,.25); }
  .quote small { color:#d4eaff; font-size:clamp(7px,.65vw,10px); margin-top:14px; }
  .smile-card { position:relative; padding:18px 3% 10px 4%; display:grid; grid-template-columns:36% 40% 24%; align-items:start; gap:0; }
  .smile-card .eyebrow { grid-column:1/-1; margin:0 0 3px; font-size:clamp(7px,.65vw,10px); letter-spacing:.17em; white-space:nowrap; }
  .smile-card h2 { grid-column:1; grid-row:2; font-size:clamp(27px,2.4vw,36px); font-weight:500; line-height:.9; margin:0; }
  .smile-visual { grid-column:2; grid-row:2 / span 2; height:clamp(94px,9vw,130px); width:100%; border-radius:8px; box-shadow:0 2px 12px rgba(8,34,64,.1); }
  .smile-quote { display:block; grid-column:3; grid-row:2; padding:6px 0 0 8px; margin:0; font:italic 500 clamp(15px,1.4vw,21px)/1.02 'Playfair Display',serif; color:#0b3157; }
  .smile-card .btn { grid-column:1; grid-row:3; align-self:end; justify-self:start; padding:5px 9px; min-height:27px; white-space:nowrap; }

  .new-patient { grid-template-columns:31% 42% 27%; height:clamp(106px,9.5vw,138px); min-height:0; background:linear-gradient(106deg,#031c37,#0b4278 31%,#f5fbff 31.4%,#fff 100%); }
  .new-copy { padding:7px 6% 9px 15%; }
  .new-copy .eyebrow { margin:0 0 1px; font-size:clamp(7px,.65vw,10px); }
  .new-copy h2 { font-size:clamp(22px,2.2vw,33px); line-height:.95; font-weight:500; margin:0 0 2px; }
  .new-copy p:not(.eyebrow) { margin:0; line-height:1.15; font-size:clamp(8px,.75vw,11px); }
  .steps div { padding:7px 6px; }
  .steps div:before { content:"♡"; display:block; height:29px; color:#0060b4; font:26px/1 Georgia,serif; }
  .steps div:nth-child(1):before { content:"▤"; }
  .steps div:nth-child(2):before { content:"▦"; }
  .steps div:nth-child(4):before { content:"☻"; }
  .steps span { display:inline; border:0; width:auto; height:auto; font-size:clamp(10px,.9vw,13px); margin-right:3px; font-weight:700; }
  .steps span:after { content:"."; }
  .steps b { font-size:clamp(10px,.9vw,13px); line-height:1.05; }
  .book-box { gap:5px; }
  .book-box .btn { min-width:80%; min-height:39px; padding:5px 12px; border-radius:25px; }
  .book-box small { font-size:clamp(9px,.8vw,12px); }

  .footer-top { grid-template-columns:19% 26% 39% 16%; height:clamp(50px,4.5vw,66px); gap:0; padding:3px 4.5%; }
  .footer-top img { width:150px; height:65px; max-height:none; object-fit:fill; transform:scaleY(.52); }
  .footer-tag { margin:0; padding-left:22px; border-left:1px solid #a7c2de; font-size:clamp(9px,.82vw,12px); line-height:1.35; letter-spacing:.16em; }
  .footer-top nav { gap:clamp(10px,1vw,16px); flex-wrap:nowrap; white-space:nowrap; }
  .footer-top a { font-size:clamp(9px,.78vw,12px); }
  .footer-top > a:last-child { border-left:1px solid #a7c2de; padding-left:17px; justify-self:end; font-weight:700; white-space:nowrap; }
  .footer-bottom { min-height:clamp(35px,3.4vw,47px); padding:8px 4.5%; align-items:center; font-size:clamp(8px,.78vw,11px); }
}

@media (max-width:1080px) {
  .site-header { z-index:100; }
  .brand img { width:155px; height:63px; max-height:none; object-fit:fill; transform:scaleY(.7); }
  .menu-toggle { width:38px; height:38px; color:#064779; cursor:pointer; }
  .nav.is-open { display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; padding:12px 20px; background:#fff; box-shadow:0 14px 25px rgba(3,33,65,.17); }
  .nav.is-open a { padding:11px 8px; border-bottom:1px solid #e4eff9; }
  .hero { background:#f3f9ff; }
  .hero-image { clip-path:none; }
  .hero-image:after { display:none; }
  .hero-image img { filter:none; object-position:55%; }
  .hero-aside { display:none; }
  .orbital { display:none; }
  .harbor-photo img { object-position:center; }
  .harbor-building img { object-position:60%; }
  .tech-art img { width:100%; height:100%; object-fit:cover; border-radius:30px; }
  .tech-signature { display:none; }
  .tech-list div { padding-left:10px; }
  .family-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .family-caption { display:block; position:absolute; bottom:12%; right:7%; color:#fff; text-shadow:0 2px 7px #09213b; font:italic 30px/1 'Brush Script MT',cursive; text-align:right; }
  .portrait { height:100%; }
  .portrait img { object-position:center 28%; }
  .smile-card { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .smile-card .eyebrow, .smile-card h2, .smile-card .btn { grid-column:1; }
  .smile-visual { grid-column:2; grid-row:1 / 4; height:100%; min-height:210px; }
  .smile-quote { display:none; }
}

@media (max-width:720px) {
  html { scroll-padding-top:76px; }
  .site-header { padding:8px 14px; }
  .brand img { width:125px; height:58px; }
  .header-actions { margin-left:3px; }
  .header-actions .btn { padding:8px 9px; font-size:11px; }
  .hero-copy { padding:39px 22px; }
  .hero h1 { font-size:clamp(43px,12vw,58px); }
  .hero-image { height:305px; }
  .hero .mini-points { font-size:11px; gap:12px; }
  .harbor-photo { min-height:235px; }
  .harbor-label strong { font-size:40px; }
  .harbor-copy h2 { font-size:37px; }
  .technology h2 { font-size:44px; }
  .tech-art { height:250px; }
  .service-grid article { padding:28px 12px; }
  .service-grid h3 { font-size:14px; }
  .family-photo { min-height:250px; }
  .doctor-card { grid-template-columns:1fr 1fr; min-height:260px; }
  .portrait { min-height:260px; }
  .quote { padding:24px 15px; font-size:23px; }
  .smile-card { grid-template-columns:1fr; }
  .smile-card .eyebrow, .smile-card h2, .smile-card .btn, .smile-visual { grid-column:1; grid-row:auto; }
  .smile-visual { min-height:180px; }
  .footer-top img { width:165px; }
}

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .btn { transition:none; } }