:root {
  --ink:#17343b;
  --muted:#668087;
  --accent:#31a98e;
  --mint:#dff5ef;
  --paper:#f7fbfa;
  --line:#dbe9e6;
  --dark:#123238
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.55
}

a {
  color:inherit;
  text-decoration:none
}
.container {
  width: min(1180px, calc(100% - 32px));
  margin: auto;
}

.topbar {
  background: var(--dark, #222);
  color: #fff;
  font-size: 14px;
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center; 
  padding: 9px 0;
}

.topbar-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.schedule-row {
  display: flex;
  gap: 12px;
}

.schedule-row .days {
  min-width: 120px;
}

.topbar-center {
  flex: 1;
  text-align: center;
}

.topbar-right {
  flex: 1;
  text-align: right;
  font-size: 16px;
  font-weight: 500;
}



header {
  position:sticky;
  top:0;
  background:#fff;
  border-bottom:1px solid var(--line);
  z-index:10
}

.nav {
  min-height:74px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap
}

.logo {
  font-size:26px;
  font-weight:900
}

.logo span {
  color:var(--accent)
}

nav {
  display:flex;
  gap:16px;
  flex:1;
  justify-content:center;
  flex-wrap:wrap;
  font-weight:bold;
  font-size:14px
}

.cta, .btn, .vis {
  box-sizing: border-box;
}

.cta, .btn {
  display: inline-block;
  border-radius: 999px;
  padding: 11px 16px;
  font-weight: bold;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
}

.cta {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.vis {
  display: inline-block;
  padding: 11px 16px;
  font-size: 14px;
  line-height: 1.2;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: bold;
  cursor: pointer;
}

.hero {
  padding:58px 0 24px
}

.eyebrow {
  display:inline-block;
  background:var(--mint);
  color:#176c5c;
  border-radius:999px;
  padding:7px 11px;
  font-size:13px;
  font-weight:bold
}

.hero h1 {
  font-size: clamp(28px, 4.5vw, 46px);
  line-height: 1.1;
  margin: 18px 0;
}

.hero p,.muted {
  color:var(--muted)
}

.section {
  padding:26px 0 64px
}

.grid2 {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  justify-content: center; 
}


.card,.doc,.doctor {
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  padding:22px
}

.doc-list {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px
}

.pdf {
  width:42px;
  height:42px;
  background:var(--mint);
  display:grid;
  place-items:center;
  border-radius:12px;
  font-weight:bold
}

.actions {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.section-title {
  font-size:32px;
  margin:0 0 16px
}

.notice {
  background:#fff8e8;
  border:1px solid #efd17b;
  border-radius:16px;
  padding:16px
}

.map {
  min-height:360px;
  border:1px solid var(--line);
  border-radius:22px;
  overflow:hidden
}

.map iframe {
  width:100%;
  height:360px;
  border:0
}

table {
  width:100%;
  border-collapse:collapse
}
.card-wide {
  max-width: 700px;
  width: 100%;  
  margin: 0 auto;
}

th,td {
  padding:11px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top
}

th {
  width:42%;
  background:#f6fbf9
}

footer {
  background:#0f2b31;
  color:#c6d9d7;
  padding:42px 0 22px
}

.footer-grid {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:28px
}

.footer-grid h3 {
  color:#fff
}

.footer-grid a {
  display:block;
  margin:7px 0
}

.legal {
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:24px;
  padding-top:18px;
  font-size:13px
}

.legal-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:14px 0
}

.legal-links a {
  text-decoration:underline;
  color:#fff
}

.modal {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  padding:18px;
  z-index:20
}

.modal.open {
  display:grid;
  place-items:center
}

.modal-box {
  background:#fff;
  border-radius:22px;
  padding:26px;
  width:min(520px,100%);
  position:relative
}

.close {
  position:absolute;
  right:14px;
  top:8px;
  border:0;
  background:none;
  font-size:28px
}

.modal input {
  width:100%;
  padding:12px;
  margin:6px 0;
  border:1px solid var(--line);
  border-radius:12px
}

.consent {
  display:flex;
  gap:8px;
  font-size:13px;
  color:var(--muted);
  margin-top:10px
}

.consent input {
  width:auto;
  margin-top:3px
}

.search {
  display:flex;
  gap:8px
}

.search input {
  flex:1;
  padding:12px;
  border:1px solid var(--line);
  border-radius:12px
}

.result {
  padding:14px;
  border-bottom:1px solid var(--line)
}

body.accessible {
  font-size:20px;
  background:#fff;
  color:#000
}

body.accessible * {
  font-family:Arial,sans-serif!important;
  color:#000!important;
  background-image:none!important;
  box-shadow:none!important
}

body.accessible .topbar,body.accessible header,body.accessible footer {
  background:#fff!important;
  border:2px solid #000
}

body.accessible .cta {
  background:#000!important;
  color:#fff!important;
  border-color:#000!important
}

body.accessible .card,body.accessible .doc,body.accessible .doctor {
  border:2px solid #000!important
}

@media(max-width:800px) {
  .grid2,.grid3,.doc-list,.footer-grid {
  grid-template-columns:1fr
}

.topbar .container div:last-child {
  display:none
}

.nav nav {
  order:3;
  flex-basis:100%
}

}

/* Accessibility/layout fix: allow all textual content to wrap normally. */
html, body {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

p, li, td, th, label, a, span, div, section, article, header, footer, main, aside,
h1, h2, h3, h4, h5, h6, button {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

table {
  width: 100%;
  max-width: 100%;
}

img, svg {
  max-width: 100%;
}

.schedule-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.schedule-row .days {
  flex: 1;
}

.schedule-row .time {
  white-space: nowrap;
  text-align: right;
}