*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#123e4c;background:#f6fafb;padding-bottom:72px}
.hero{background:linear-gradient(180deg,#fff 0%,#eef9fb 100%);padding:14px 18px 30px;overflow:hidden;position:relative}
nav{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:10}
.menu-btn{border:0;background:none;font-size:30px;color:#13566a;padding:8px 4px}
.book{text-decoration:none;color:#0d5268;font-weight:700;display:flex;gap:7px;align-items:center;text-align:center;font-size:15px;padding:8px 2px}
.calendar{font-size:18px}
.brand{text-align:center;position:relative;z-index:3}
.brand img{width:min(280px,72vw);mix-blend-mode:multiply;display:block;margin:0 auto}
.brand h1{font-size:17px;letter-spacing:3.5px;margin:-16px 0 5px}
.brand p{font-style:italic;margin:0 0 10px;font-size:16px}
.slogan{display:inline-block;background:#cfeaf1;padding:11px 18px;border-radius:19px;font-weight:700;max-width:96%}
.hero-photo-wrap{position:relative;margin:16px -18px 0;overflow:hidden}
.hero-photo{display:block;width:100%;height:auto;aspect-ratio:1.87/1;object-fit:cover}
.hero-photo-wrap:after{content:"";position:absolute;left:0;right:0;bottom:0;height:28%;background:linear-gradient(0deg,#eef9fb 8%,rgba(238,249,251,.82) 38%,rgba(238,249,251,0) 100%);pointer-events:none}
.hero-copy{position:relative;z-index:4;margin-top:-4px;padding:0 4px}
.hero-copy h2{font-size:34px;line-height:1.03;margin:0;text-align:center}
.hero-copy strong{font-size:38px}
.hero-line{width:145px;height:4px;background:#d76f58;margin:12px auto}
.hero-copy p{font-size:18px;margin:0;text-align:center}
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.quick-card{min-height:142px;border-radius:20px;background:#fff;box-shadow:0 8px 24px #244f5f16;border:1px solid #e3eef1;color:#123e4c;text-decoration:none}
.appointment-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:16px 13px}
.appointment-card .quick-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;font-size:21px}
.appointment-card strong{display:block;font-size:16px;line-height:1.15}
.appointment-card span{display:block;font-size:14px;margin-top:3px}
.appointment-card b{font-size:24px}
.location-card{display:grid;grid-template-columns:auto 1fr;gap:9px;padding:14px 12px}
.pin{width:28px;height:38px;color:#df3940;font-size:28px;line-height:1}
.location-copy strong{display:block;font-size:16px;margin-bottom:5px}
.location-copy>span{display:block;font-size:12px;line-height:1.28}
.maps-btn{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:8px;padding:9px 10px;border-radius:14px;background:#1f7b8e;color:#fff;text-decoration:none;font-size:12px;font-weight:700}
main{max-width:920px;margin:auto}
.intro{text-align:center;padding:34px 20px 12px}
.intro span,.info span,.modal-card>span{font-size:12px;letter-spacing:2px;font-weight:800;color:#257d90}
.intro h2{margin:7px 0;font-size:25px}
.info p,.contact p,.modal-card p{color:#60757d;line-height:1.5}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:10px 14px 30px}
.card{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 8px 24px #244f5f18;border:1px solid #e4eef1}
.service-img{display:block;width:100%;height:128px;object-fit:cover}
.card-body{padding:12px}
.card h3{font-size:18px;line-height:1.05;margin:0 0 7px}
.card p{font-size:13px;line-height:1.35;color:#61737a;margin:0 0 10px;min-height:53px}
.service-btn{width:100%;border:0;border-radius:18px;background:linear-gradient(90deg,#2d8293,#3d83b2);color:#fff;padding:10px 8px;font-size:14px}
.service-btn b,.wa b,.contact-map b{float:right;font-size:19px}
.info,.contact{margin:0 14px 24px;background:#fff;border-radius:22px;padding:24px;box-shadow:0 7px 22px #244f5f12}
.info{background:linear-gradient(135deg,#eaf7f9,#fff)}
.info h2,.contact h2{margin:7px 0}
.contact{text-align:center}
.wa,.contact-map{display:block;text-decoration:none;font-weight:800;padding:15px;border-radius:16px;margin-top:14px}
.wa{background:#95d4e1;color:#0d4254}
.contact-map{background:#1f7b8e;color:#fff}
footer{position:fixed;z-index:30;bottom:0;left:0;right:0;height:68px;background:#ffffffef;border-top:1px solid #dce8eb;display:flex;justify-content:space-around;align-items:center}
footer a{text-decoration:none;color:#42616d;text-align:center;font-size:23px}
footer small{display:block;font-size:11px;margin-top:3px}
footer a:first-child{color:#14728a}
.drawer{position:fixed;z-index:60;inset:0 25% 0 0;background:#fff;padding:24px;transform:translateX(-110%);transition:.22s;box-shadow:20px 0 50px #183d4d33}
.drawer.open{transform:translateX(0)}
.drawer button{float:right;border:0;background:none;font-size:31px}
.drawer a{display:block;clear:both;text-decoration:none;color:#163f4d;font-size:20px;padding:18px 5px;border-bottom:1px solid #e7eef0}
.modal{display:none;position:fixed;z-index:70;inset:0;background:#0c2d3a99;place-items:center;padding:20px}
.modal.show{display:grid}
.modal-card{position:relative;background:#fff;border-radius:24px;padding:28px;width:100%;max-width:460px}
.modal-card h2{font-size:27px;margin:8px 0}
.close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:30px}
@media(max-width:360px){
  .brand h1{font-size:15px;letter-spacing:2.7px}
  .hero-copy h2{font-size:31px}
  .hero-copy strong{font-size:34px}
  .quick-actions{gap:8px}
  .appointment-card,.location-card{padding:12px 9px}
  .location-copy>span{font-size:11px}
}
@media(min-width:700px){
  .service-img{height:190px}
  .grid{gap:20px;padding:18px 24px 34px}
  .hero-photo-wrap{margin-left:auto;margin-right:auto;max-width:900px;border-radius:24px}
  .hero-copy h2{font-size:42px}
  .hero-copy strong{font-size:47px}
  .quick-actions{max-width:900px;margin:24px auto 0}
}