:root{
--navy:#173962;
--navy-2:#1e4a7a;
--teal:#4fb3a8;
--ink:#173962;
--muted:#5a7aa0;
--line:#e6eef6;
--soft:#f7f9fb;
--mint:#f0f7f6;
--white:#fff;
--shadow:0 12px 40px rgba(23,57,98,.08)
}
*{
box-sizing:border-box
}
html{
scroll-behavior:smooth
}
body{
margin:0;
background:var(--soft);
color:var(--ink);
font-family:Inter,system-ui,sans-serif;
line-height:1.5
}
a{
color:inherit;
text-decoration:none
}
img{
display:block;
max-width:100%
}
button,input,select,textarea{
font:inherit
}
.container{
width:min(1240px,calc(100% - 32px));
margin-inline:auto
}
.contact-bar{
background:var(--navy);
color:white;
font-size:13px
}
.contact-bar__content,.contact-bar__group,.header-content,.header-actions,.button-row,.quick-card__header,.mini-card,.doctor-strip,.footer-brand{
display:flex;
align-items:center
}
.contact-bar__content{
min-height:40px;
justify-content:space-between
}
.contact-bar__group{
gap:18px
}
.status{
display:inline-flex;
align-items:center;
gap:8px
}
.status i,.quick-card__header i{
width:7px;
height:7px;
border-radius:50%;
background:var(--teal)
}
.pill{
padding:4px 10px;
border-radius:999px;
background:#ffffff18;
font-size:11px
}
.mobile-only{
display:none
}
.site-header{
position:sticky;
top:0;
z-index:20;
background:#fffffff0;
border-bottom:1px solid var(--line);
backdrop-filter:blur(14px)
}
.header-content{
height:72px;
justify-content:space-between
}
.brand img{
width:270px;
max-height:48px;
object-fit:contain
}
.desktop-nav{
display:flex;
gap:30px;
font-size:14px;
font-weight:600
}
.desktop-nav a:hover{
color:var(--navy-2)
}
.header-actions{
gap:10px
}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid var(--navy);
border-radius:999px;
background:var(--navy);
color:white;
padding:10px 20px;
font-size:14px;
font-weight:700;
cursor:pointer
}
.button:hover{
background:#122e4f
}
.button--outline{
background:white;
color:var(--navy);
border-color:#dbe6f0
}
.button--outline:hover{
background:var(--mint)
}
.button--large{
padding:13px 26px;
font-size:15px
}
.button--wide{
width:100%
}
.button--light{
background:white;
color:var(--navy);
border-color:white
}
.button--ghost{
background:#ffffff12;
border-color:#ffffff33
}
.menu-button{
display:none;
width:42px;
height:42px;
border:1px solid #dbe6f0;
border-radius:50%;
background:white;
padding:12px
}
.menu-button span{
display:block;
height:2px;
background:var(--navy);
margin:4px 0
}
.mobile-nav{
padding:16px;
display:grid;
gap:8px;
background:white;
border-top:1px solid var(--line)
}
.mobile-nav[hidden]{
display:none
}
.mobile-nav>a:not(.button){
padding:10px
}
.hero{
position:relative;
overflow:hidden
}
.hero:before,.hero:after{
content:"";
position:absolute;
border-radius:50%;
filter:blur(70px);
pointer-events:none
}
.hero:before{
width:600px;
height:600px;
background:#4fb3a81f;
right:-180px;
top:-220px
}
.hero:after{
width:500px;
height:500px;
background:#1739620d;
left:-180px;
top:100px
}
.two-column{
display:grid;
grid-template-columns:1fr 1fr;
gap:48px
}
.hero-grid{
position:relative;
padding-block:76px 92px;
align-items:start
}
.eyebrow,.tag{
display:inline-flex;
align-items:center;
gap:8px;
border:1px solid #dbe6f0;
background:white;
border-radius:999px;
padding:5px 12px;
font-size:11px;
font-weight:700;
letter-spacing:.04em
}
.eyebrow img{
width:20px;
height:20px;
object-fit:contain
}
.tag{
background:var(--soft)
}
h1,h2{
font-family:"Plus Jakarta Sans",Inter,sans-serif;
letter-spacing:-.04em;
line-height:1
}
h1{
font-size:clamp(40px,5vw,58px);
margin:24px 0
}
h1 span,h2 span{
color:var(--navy-2)
}
h2{
font-size:clamp(32px,4vw,44px);
margin:16px 0 20px
}
.lead{
color:#4a6788;
font-size:16px;
line-height:1.75
}
.button-row{
gap:12px;
flex-wrap:wrap
}
.feature-row{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin-top:36px
}
.mini-card{
gap:10px;
padding:13px;
background:white;
border:1px solid var(--line);
border-radius:16px;
box-shadow:0 4px 18px #1739620a
}
.mini-card>b{
display:grid;
place-items:center;
width:36px;
height:36px;
border-radius:11px;
background:var(--mint);
color:#3a9a8e
}
.mini-card span,.quick-card__header span,.rating span,.doctor-strip span,.footer-brand span{
display:grid
}
.mini-card strong{
font-size:12px
}
.mini-card small,.quick-card small,.quick-card span,.rating small,.doctor-strip small,.footer-brand small{
color:var(--muted);
font-size:11px
}
.trust-line{
margin-top:28px;
color:var(--muted);
font-size:13px
}
.avatars{
display:inline-block;
background:white;
border-radius:999px;
padding:7px;
letter-spacing:5px;
font-weight:700
}
.quick-card{
position:relative;
background:white;
border:1px solid var(--line);
border-radius:28px;
box-shadow:0 20px 60px #1739621f;
overflow:visible
}
.quick-card__header{
padding:22px;
background:linear-gradient(135deg,var(--navy),var(--navy-2));
color:white;
gap:12px;
border-radius:28px 28px 0 0
}
.quick-card__header img{
width:44px;
height:44px;
padding:8px;
object-fit:contain;
background:white;
border-radius:14px
}
.quick-card__header strong{
font-size:15px
}
.quick-card__header small{
color:#ffffffb3
}
.quick-card__header i{
margin-left:auto;
box-shadow:0 0 0 6px #4fb3a833
}
.quick-card__body{
padding:24px
}
.stat-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:16px
}
.stat-grid>div{
display:grid;
padding:14px;
background:var(--soft);
border:1px solid var(--line);
border-radius:16px
}
.stat-grid .tint{
background:var(--mint);
border-color:#d6ebe8
}
.stat-grid small{
font-weight:700;
letter-spacing:.04em
}
.stat-grid strong{
font-size:14px
}
.split-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-top:12px
}
.fine-print{
font-size:11px;
color:var(--muted);
line-height:1.6
}
.rating{
position:absolute;
display:flex;
gap:10px;
align-items:center;
left:-28px;
bottom:-26px;
padding:11px 16px;
background:white;
border:1px solid var(--line);
border-radius:16px;
box-shadow:var(--shadow)
}
.rating>strong{
display:grid;
place-items:center;
width:42px;
height:42px;
background:var(--navy);
color:white;
border-radius:12px
}
.section{
padding-block:80px
}
.section--white{
background:white;
border-block:1px solid var(--line)
}
.about-card{
padding:40px;
background:white;
border:1px solid var(--line);
border-radius:32px;
box-shadow:var(--shadow);
align-items:start
}
.portrait-placeholder{
position:relative;
min-height:500px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#e8f3f1,var(--soft));
border:1px solid #d6ebe8;
border-radius:24px
}
.portrait-icon{
display:grid;
place-items:center;
width:80px;
height:80px;
border-radius:50%;
background:var(--navy);
color:white;
font-size:36px;
margin-bottom:16px
}
.portrait-placeholder>b{
position:absolute;
right:-12px;
bottom:-18px;
background:var(--navy);
color:white;
border-radius:16px;
padding:13px 18px;
font-size:11px
}
.portrait-placeholder>b small{
font-size:13px
}
.detail-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:28px;
margin-top:28px
}
.detail-grid h3{
font-size:13px
}
.detail-grid ul{
padding-left:18px;
color:#4a6788;
font-size:14px
}
.detail-grid li{
margin-bottom:10px
}
.checks{
list-style:"✓  "
}
.checks li::marker{
color:var(--teal)
}
blockquote{
margin:28px 0 0;
padding:16px;
background:var(--soft);
border:1px solid var(--line);
border-radius:16px;
color:#4a6788;
font-style:italic
}
.section-heading{
display:flex;
align-items:end;
justify-content:space-between;
gap:40px
}
.section-heading>p{
max-width:450px;
color:#4a6788
}
.service-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:40px
}
.service-grid article,.info-card{
background:white;
border:1px solid var(--line);
border-radius:24px;
padding:24px
}
.service-grid article>b{
font-size:28px
}
.service-grid h3{
font-size:16px
}
.service-grid p,.info-card p{
font-size:14px;
color:#4a6788
}
.patient-grid{
display:grid;
grid-template-columns:1.15fr .85fr;
gap:24px
}
.portal-panel{
padding:36px;
background:linear-gradient(135deg,var(--navy),var(--navy-2));
color:white;
border-radius:28px
}
.portal-panel p{
color:#ffffffc7
}
.tag--dark{
background:#ffffff12;
border-color:#ffffff30
}
.hours-panel{
padding:28px;
background:linear-gradient(135deg,#e8f3f1,var(--soft));
border:1px solid #d6ebe8;
border-radius:24px
}
.hours-panel h3{
display:flex;
justify-content:space-between
}
.hours-panel h3 span{
font-size:10px;
color:#3a9a8e;
background:white;
border:1px solid #d6ebe8;
border-radius:999px;
padding:5px 8px
}
.hours-row{
display:flex;
justify-content:space-between;
gap:20px;
margin-top:10px;
padding:12px;
background:white;
border:1px solid var(--line);
border-radius:14px;
font-size:13px
}
.hours-row.muted{
color:var(--muted);
background:#ffffff80
}
.help-box{
margin-top:20px;
padding:16px;
background:white;
border:1px solid var(--line);
border-radius:16px
}
.help-box p{
font-size:13px;
color:#4a6788
}
.booking-grid{
display:grid;
grid-template-columns:.95fr 1.05fr;
gap:48px
}
.doctor-strip{
gap:12px;
margin-top:28px;
padding:15px;
background:var(--mint);
border:1px solid #d6ebe8;
border-radius:16px
}
.doctor-strip img{
width:42px;
height:42px;
object-fit:contain;
background:white;
border-radius:12px
}
.privacy{
margin-top:20px;
padding:16px;
background:var(--soft);
border:1px solid var(--line);
border-radius:16px;
color:var(--muted);
font-size:12px
}
.appointment-form{
display:grid;
gap:18px;
padding:30px;
background:#fcfdfe;
border:1px solid var(--line);
border-radius:28px;
box-shadow:var(--shadow)
}
.field-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px
}
.appointment-form label{
display:grid;
gap:7px;
font-size:12px;
font-weight:700
}
.appointment-form input,.appointment-form select,.appointment-form textarea{
width:100%;
padding:12px 15px;
background:white;
border:1px solid #dbe6f0;
border-radius:20px;
color:var(--ink)
}
.appointment-form textarea{
resize:vertical
}
.form-message{
padding:12px 15px;
background:#e8f6f4;
border:1px solid #bde3de;
border-radius:14px;
color:#165a53;
font-size:13px
}
.form-consent{
text-align:center;
color:var(--muted);
font-size:11px;
margin:0
}
.location-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:24px
}
.map-card{
position:relative;
overflow:hidden;
background:white;
border:1px solid var(--line);
border-radius:24px;
box-shadow:var(--shadow)
}
.map-card iframe{
width:100%;
height:420px;
border:0
}
.map-link{
position:absolute;
top:374px;
left:14px;
background:white;
border:1px solid #dbe6f0;
border-radius:999px;
padding:7px 12px;
font-size:12px;
font-weight:700
}
.map-caption{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:18px
}
.map-caption span{
display:grid
}
.map-caption small{
color:var(--muted)
}
.location-sidebar{
display:grid;
gap:16px
}
.info-card h3{
margin-top:0
}
.info-card a{
color:var(--navy);
font-weight:600
}
.access-card{
padding:24px;
background:var(--navy);
color:white;
border-radius:24px
}
.access-card p{
color:#ffffffc7;
font-size:13px
}
footer{
padding-block:40px;
background:white;
border-top:1px solid var(--line)
}
.footer-grid{
display:grid;
grid-template-columns:1.3fr .9fr 1fr;
gap:30px;
align-items:start
}
.footer-brand{
gap:14px
}
.footer-brand img{
width:42px;
height:42px;
object-fit:contain
}
.footer-hours{
padding:16px;
background:var(--soft);
border:1px solid var(--line);
border-radius:16px;
font-size:12px
}
.footer-hours p{
display:flex;
justify-content:space-between;
margin:8px 0
}
.developer-note{
margin-top:28px;
padding:16px;
background:var(--soft);
border:1px solid var(--line);
border-radius:16px;
font-size:12px
}
.developer-note summary{
cursor:pointer;
font-weight:700
}
.developer-note pre{
overflow:auto;
padding:14px;
background:white;
border:1px solid var(--line);
border-radius:12px
}
.mobile-book{
display:none
}
.mobile-nav a[href^="http"],a[href^="https"]{
 
}
@media(max-width:1024px){
.desktop-nav{
display:none
}
.menu-button{
display:block
}
.two-column,.booking-grid,.location-grid,.patient-grid{
grid-template-columns:1fr
}
.hero-grid{
padding-top:48px
}
.portrait-placeholder{
min-height:420px
}
.desktop-action{
display:none
}
.footer-grid{
grid-template-columns:1fr 1fr
}
.service-grid{
grid-template-columns:repeat(2,1fr)
}
}
@media(max-width:700px){
.container{
width:min(100% - 24px,1240px)
}
.desktop-only{
display:none!important
}
.mobile-only{
display:inline-flex
}
.contact-bar__content{
justify-content:center
}
.brand img{
width:210px
}
.hero-grid{
padding-block:40px 70px
}
.feature-row,.service-grid,.detail-grid,.field-grid,.stat-grid,.footer-grid{
grid-template-columns:1fr
}
.section{
padding-block:56px
}
.about-card{
padding:20px
}
.section-heading{
display:block
}
.portrait-placeholder{
min-height:360px
}
.rating{
left:14px
}
.map-caption{
align-items:flex-start;
flex-direction:column
}
.mobile-book{
display:flex;
position:fixed;
z-index:19;
bottom:14px;
left:14px;
right:14px;
box-shadow:0 10px 30px #17396259
}
.contact-bar{
font-size:12px
}
.appointment-form{
padding:20px
}
}