:root { --bg:#ffffff; --text:#24323f; --accent:#1e6aa6; --soft:#e6f1f7; }
*{box-sizing:border-box} body{margin:0;font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial;color:var(--text);background:var(--bg)}
.container{max-width:1100px;margin:0 auto;padding:1.25rem}
.site-header{border-bottom:1px solid #eee;background:#172863;position:sticky;top:0;z-index:10;background-image: url("Prestige_Derm-headerlogo.png");background-size: cover}
.logo{font-weight:700;text-decoration:none;color:var(--text)}
nav a{margin-right:.75rem;text-decoration:none;color:var(--text)}
.btn{display:inline-block;padding:.7rem 1rem;border:1px solid var(--accent);border-radius:.5rem}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--accent)}
.hero{background:var(--soft);padding:-15px 5px}
.page-hero.small{background:var(--soft);padding:1rem 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.columns{columns:2}
.site-footer{background:#172863;background-image: url("assets/Prestige_Derm-footerbackground.png");color:#dbe7ef;margin-top:2rem}
.site-footer .container{padding:-45px 5px}
main{color:#172636}
form label{display:block;margin:.5rem 0}
input,textarea{width:100%;padding:.6rem;border:1px solid #cdd9e3;border-radius:.35rem}
.map iframe{width:100%;height:300px;border:0}
@media (max-width:900px){
  .two-col{grid-template-columns:1fr}
  .columns{columns:1}
}