/* Noa Dental — redesign 2026 · palette tied to 4-C logo (deep teal #10617e / sky #3aa8d8) */
:root{
  --cream:#faf6ef; --cream2:#f3ecdf; --navy:#16324f; --ink:#26374a; --sub:#68788c;
  --teal:#2b9fd4; --teal-d:#10617e; --sky:#3aa8d8; --line:#e8e0d2; --white:#fff;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif; background:var(--cream); color:var(--ink); line-height:1.65; font-size:16px;}
.serif{font-family:"Palatino Linotype","Book Antiqua",Georgia,serif;}
img{max-width:100%;}
a{color:var(--teal-d);}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px;}

/* header */
header{background:var(--cream); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.hdr{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; max-width:1280px; margin:0 auto;}
.logo{display:flex; align-items:center; text-decoration:none;}
.logo svg{height:44px; width:auto; overflow:visible;}
.logo .wm{font-size:21px; letter-spacing:.22em; color:var(--navy); margin-left:11px; white-space:nowrap;}
.logo .wm b{font-weight:800;} .logo .wm span{font-weight:300;}
nav.main{display:flex; gap:24px; font-size:14.5px; font-weight:600; align-items:center;}
nav.main a{color:var(--navy); text-decoration:none; padding:6px 0;}
nav.main a:hover{color:var(--teal-d);}
.drop{position:relative;}
.drop > a::after{content:" ▾"; font-size:10px;}
.drop-menu{display:none; position:absolute; top:100%; left:-12px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 30px rgba(22,50,79,.12); padding:10px 0; min-width:230px;}
.drop:hover .drop-menu{display:block;}
.drop-menu a{display:block; padding:8px 18px; font-weight:500;}
.drop-menu a:hover{background:var(--cream);}
.hdr-right{display:flex; align-items:center; gap:16px;}
.phone{font-size:14.5px; font-weight:700; color:var(--navy); text-decoration:none; white-space:nowrap;}
.btn{display:inline-block; background:var(--teal); color:#fff !important; border:none; border-radius:30px; padding:12px 26px; font-size:15px; font-weight:700; cursor:pointer; text-decoration:none; text-align:center;}
.btn:hover{background:var(--teal-d);}
.btn.big{padding:15px 34px; font-size:16px;}
.btn.ghost{background:transparent; color:var(--navy) !important; border:2px solid var(--navy);}
.btn.ghost:hover{background:var(--navy); color:#fff !important;}
#navtoggle{display:none;}
.burger{display:none; font-size:26px; color:var(--navy); cursor:pointer; user-select:none;}

/* hero (home) */
.hero{display:flex; gap:40px; padding:60px 24px 66px; max-width:1200px; margin:0 auto; align-items:center;}
.hero-l{flex:1.1;}
.eyebrow{font-size:13px; letter-spacing:.28em; color:var(--teal-d); font-weight:700; margin-bottom:14px;}
h1{font-size:44px; line-height:1.22; color:var(--navy); font-weight:600; margin-bottom:18px;}
.hero-sub{font-size:17px; color:var(--sub); margin-bottom:26px; max-width:500px;}
.trust{display:flex; gap:22px; margin-top:26px; font-size:13.5px; color:var(--sub); flex-wrap:wrap;}
.trust b{color:var(--navy);}
.hero-r{flex:1; position:relative;}
.photo-ph{border-radius:200px 200px 18px 18px; background:linear-gradient(160deg,#dcebf3,#c3d9e8 60%,#e8d5c4); border:1px solid var(--line); height:430px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:#5b7286; font-size:14px; text-align:center; padding:0 30px;}
.review-chip{position:absolute; bottom:22px; left:-26px; background:#fff; border-radius:14px; box-shadow:0 8px 24px rgba(22,50,79,.14); padding:12px 18px; font-size:13.5px;}
.review-chip b{color:var(--navy);}
.stars{color:#f5a623; letter-spacing:2px;}

/* page hero (inner pages) */
.page-hero{background:var(--cream2); border-bottom:1px solid var(--line); padding:44px 24px;}
.page-hero .crumb{font-size:13px; color:var(--sub); margin-bottom:10px;}
.page-hero .crumb a{color:var(--sub); text-decoration:none;}
.page-hero h1{font-size:36px; margin-bottom:8px;}
.page-hero .lede{font-size:16.5px; color:var(--sub); max-width:640px;}

/* sections */
section.band{padding:56px 0;}
section.band.alt{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
h2{font-size:30px; color:var(--navy); font-weight:600; margin-bottom:14px;}
h3{font-size:20px; color:var(--navy); margin:22px 0 8px;}
.cols{display:flex; gap:44px; align-items:flex-start;}
.cols > div{flex:1;}
p{margin-bottom:14px;}
ul.checks{list-style:none; margin:12px 0 18px;}
ul.checks li{padding:6px 0 6px 30px; position:relative;}
ul.checks li::before{content:"✓"; position:absolute; left:2px; color:var(--teal-d); font-weight:800;}

/* services grid */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:26px;}
.svc{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; text-decoration:none; color:var(--ink); display:block; transition:box-shadow .15s, transform .15s;}
.svc:hover{box-shadow:0 10px 26px rgba(22,50,79,.12); transform:translateY(-2px);}
.svc .ico{font-size:26px;}
.svc b{display:block; color:var(--navy); font-size:16.5px; margin:8px 0 4px;}
.svc span{font-size:13.5px; color:var(--sub);}

/* booking */
.booking{background:#fff; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:54px 24px;}
.booking-in{max-width:1200px; margin:0 auto; display:flex; gap:46px; align-items:flex-start;}
.booking-l{flex:1;}
.booking-l p{color:var(--sub); font-size:15.5px; max-width:430px;}
.steps{margin-top:22px; font-size:14.5px;}
.steps div{margin-bottom:10px;}
.stepn{display:inline-block; width:24px; height:24px; border-radius:50%; background:var(--cream2); color:var(--navy); font-weight:700; font-size:13px; text-align:center; line-height:24px; margin-right:9px;}
form.book{flex:1; background:var(--cream); border:1px solid var(--line); border-radius:18px; padding:28px;}
.frow{display:flex; gap:12px; margin-bottom:12px;}
.frow > *{flex:1;}
input,select,textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-size:14.5px; background:#fff; font-family:inherit; color:var(--ink);}
textarea{height:80px; resize:vertical;}
.fsub{font-size:12px; color:var(--sub); margin:10px 0 14px;}

/* doctor band */
.doctor{background:var(--cream2);}
.doc-photo{flex:0 0 320px !important; height:380px; border-radius:18px 160px 18px 18px; background:linear-gradient(160deg,#e5d8c8,#cfdde8); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:#5b7286; font-size:14px; text-align:center; padding:0 24px;}
.cred{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.cred span{background:#fff; border:1px solid var(--line); border-radius:20px; padding:5px 14px; font-size:12.5px; color:var(--navy); font-weight:600;}

/* faq */
.faq{max-width:820px;}
.faq details{background:#fff; border:1px solid var(--line); border-radius:12px; padding:16px 20px; margin-bottom:10px;}
.faq summary{font-weight:700; color:var(--navy); cursor:pointer; font-size:15.5px;}
.faq details p{margin:10px 0 0; color:var(--ink); font-size:14.5px;}

/* CTA banner */
.cta-banner{background:linear-gradient(120deg,var(--teal-d),#1b7ca3); color:#fff; border-radius:18px; padding:34px 38px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin:10px 0;}
.cta-banner h2{color:#fff; margin:0 0 6px;}
.cta-banner p{margin:0; opacity:.9;}
.cta-banner .btn{background:#fff; color:var(--teal-d) !important;}

/* review cards */
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:22px;}
.rev{background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px;}
.rev .stars{font-size:14px;}
.rev p{font-size:14px; margin:10px 0 6px;}
.rev b{font-size:13px; color:var(--sub); font-weight:600;}

/* team cards */
.team-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:22px;}
.team-card{background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; text-align:center;}
.team-ph{height:200px; border-radius:12px; background:linear-gradient(160deg,#e5d8c8,#cfdde8); display:flex; align-items:center; justify-content:center; color:#5b7286; font-size:13px; margin-bottom:14px;}
.team-card b{color:var(--navy); font-size:17px;}
.team-card i{display:block; color:var(--teal-d); font-size:13px; font-style:normal; font-weight:700; letter-spacing:.06em; margin:2px 0 8px;}
.team-card p{font-size:13.5px; color:var(--sub); margin:0;}

/* photos */
.photo-img{width:100%; height:430px; object-fit:cover; object-position:top; border-radius:200px 200px 18px 18px; border:1px solid var(--line); display:block;}
.side-img{width:100%; max-width:460px; height:580px; object-fit:cover; object-position:center 18%; border-radius:18px; border:1px solid var(--line); display:block; margin:0 auto;}
.side-img.wide{max-width:none; height:420px;}
.doc-img{flex:0 0 320px; width:320px; height:380px; object-fit:cover; object-position:top; border-radius:18px 160px 18px 18px; border:1px solid var(--line);}
.team-img{width:100%; height:200px; object-fit:cover; object-position:center 20%; border-radius:12px; margin-bottom:14px; display:block;}
@media(max-width:1220px){
  .hdr-right .phone{display:none;}
  nav.main{gap:17px; font-size:13.5px;}
}
@media(max-width:960px){ .doc-img{width:100%; flex:none;} }

/* before-after gallery */
.ba-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:20px;}
.ba-pair{background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px;}
.ba-imgs{display:flex; gap:10px;}
.ba-imgs figure{flex:1; margin:0; position:relative;}
.ba-imgs img{width:100%; height:190px; object-fit:cover; border-radius:10px; display:block;}
.ba-tag{position:absolute; top:8px; left:8px; background:rgba(22,50,79,.85); color:#fff; font-size:11px; font-weight:700; letter-spacing:.08em; border-radius:6px; padding:2px 9px;}
.ba-tag.aft{background:rgba(16,97,126,.9);}
.ba-pair b{display:block; color:var(--navy); font-size:14.5px; margin-top:10px;}
@media(max-width:700px){ .ba-grid{grid-template-columns:1fr;} .ba-imgs img{height:150px;} }

/* instructions */
.ins-note{background:#fdf3e8; border-left:4px solid #d99a55; border-radius:0 10px 10px 0; padding:14px 18px; font-size:14px; margin:14px 0 22px;}

/* footer */
footer{background:var(--navy); color:#c9d8e6; padding:46px 24px 30px; font-size:14px; margin-top:0;}
.foot-in{max-width:1200px; margin:0 auto; display:flex; gap:40px; flex-wrap:wrap;}
.foot-col{flex:1; min-width:220px;}
.foot-col b{color:#fff; display:block; margin-bottom:10px; font-size:15px;}
.foot-col a{color:#c9d8e6; text-decoration:none; display:block; padding:3px 0;}
.foot-col a:hover{color:#fff;}
.map-frame{border:0; border-radius:12px; width:100%; height:170px;}
.copy{max-width:1200px; margin:26px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.15); font-size:12.5px; color:#8fa8c0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* responsive */
@media(max-width:1220px){
  .hdr-right .phone{display:none;}
  nav.main{gap:17px; font-size:13.5px;}
}
@media(max-width:960px){
  .hero,.booking-in,.cols{flex-direction:column;}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .rev-grid,.team-grid{grid-template-columns:1fr;}
  nav.main{display:none; position:absolute; top:100%; left:0; right:0; background:var(--cream); border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:10px 24px 16px; align-items:flex-start;}
  nav.main a{padding:10px 0; font-size:16px;}
  .drop-menu{display:block; position:static; border:none; box-shadow:none; background:transparent; padding:0 0 0 16px; min-width:0;}
  #navtoggle:checked ~ nav.main{display:flex;}
  .burger{display:block;}
  .hdr-right .phone{display:none;}
  h1{font-size:32px;}
  .page-hero h1{font-size:28px;}
  .review-chip{left:0;}
}
@media(max-width:560px){
  .svc-grid{grid-template-columns:1fr;}
  .frow{flex-direction:column;}
  .logo svg{height:36px;}
  .logo .wm{font-size:16px; letter-spacing:.15em; margin-left:8px;}
  .hdr{padding:12px 14px;}
  .hdr-right .btn{padding:10px 16px; font-size:13.5px;}
  body{overflow-x:clip;}
}