:root{
      --brand:#106db3;
      --brand-2:#16a085;
      --ink:#0b1320;
      --muted:#5b6b7a;
      --bg:#f7fafc;
      --card:#ffffff;
      --radius-lg:20px; --radius-md:14px; --radius-sm:10px;
      --shadow:0 10px 30px rgba(2,12,27,.08);
    }
    *,*::before,*::after{box-sizing:border-box}
    html,body{height:100%}
    body{margin:0; font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial; color:var(--ink); background:var(--bg)}
    a{color:var(--brand); text-underline-offset:2px}
    img{max-width:100%; height:auto}
    .container{width:min(1100px,92vw); margin:0 auto}
    .muted{color:var(--muted)}

    header{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.85); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid rgba(11,19,32,.06)}
    .nav{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.8rem 0}
    .brand{display:flex; align-items:center; gap:.75rem}
    .brand img.avatar{width:38px; height:38px; border-radius:12px; object-fit:contain; background:#fff}
    .brand-title{font-weight:800; letter-spacing:.2px}
    .nav-links a{display:inline-block; text-decoration:none; font-weight:600; color:var(--ink); padding:.45rem .65rem; border-radius:10px}
    .nav-links a:hover{background:rgba(16,109,179,.08)}
    .menu-toggle{display:none; align-items:center; gap:.5rem; padding:.5rem .65rem; border:1px solid rgba(11,19,32,.10); border-radius:10px; background:#fff; color:var(--ink)}
    .mobile-panel{display:none; position:absolute; right:0; top:calc(100% + 8px); background:#fff; border:1px solid rgba(11,19,32,.12); border-radius:14px; box-shadow:0 12px 26px rgba(2,12,27,.12); width:min(92vw,320px); padding:.5rem}
    .mobile-panel a{display:block; text-decoration:none; font-weight:600; color:var(--ink); padding:.7rem .8rem; border-radius:10px}
    .mobile-panel a:hover{background:rgba(16,109,179,.08)}
    .mobile-panel.open{display:flex; flex-direction:column; gap:.25rem}
    @media (max-width: 860px){ .nav-links{display:none} .menu-toggle{display:inline-flex} }

    /* Hero */
    section.hero{padding: clamp(2.4rem, 4vw, 4rem) 0; background: linear-gradient(180deg, rgba(16,109,179,.08) 0%, var(--bg) 100%);}
    .card{background:var(--card); border-radius:var(--radius-lg); border:1px solid rgba(11,19,32,.06); box-shadow:var(--shadow)}
    .card-pad{padding: clamp(1rem, 2.2vw, 1.75rem)}
    h1{font-size: clamp(1.8rem, 1.1rem + 2.6vw, 3rem); line-height:1.1; margin:.2rem 0 .75rem}
    .subtitle{color:var(--muted); font-size:clamp(1rem, .9rem + .4vw, 1.15rem); margin:0 0 1.2rem}
    .cta{display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-weight:800; border-radius:14px; padding:.9rem 1.1rem; border:2px solid var(--brand); background:#fff; color:var(--ink); box-shadow:0 8px 20px rgba(16,109,179,.15)}
    .cta:hover{transform:translateY(-1px); box-shadow:0 12px 26px rgba(16,109,179,.25)}
    .cta.alt{border-color:var(--brand-2)}
    .hero-sep{ margin: clamp(1rem, 2.5vw, 1.5rem) 0; border: 0; height: 1px; background: rgba(11,19,32,.08); }
    .sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px;}

    /* Quick Info tiles inside hero */
    .info-strip{ display:grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: .9rem; align-items: stretch; }
    .info-item{ display:grid; grid-template-columns: 36px 1fr; align-items:start; gap:.75rem; padding:1rem 1.1rem; border:1px solid rgba(11,19,32,.08); border-radius:12px; background:#fff; min-height:72px;}
    .info-item .ico{width:36px;height:36px;display:grid;place-items:center;border-radius:9999px;background:rgba(16,109,179,.10);color:var(--brand)}
    .info-item > div { min-width: 0; }
    .info-item > div > div { overflow-wrap: anywhere; }
    .nowrap{ white-space:nowrap; }
    @media (max-width: 900px){ .info-strip { grid-template-columns:1fr 1fr; } }
    
    /* Stacked info style */
    .info-stack{
      display:flex;
      flex-direction:column;
      gap:.5rem;
      margin-top:.5rem;
      font-size:.95rem;
      
    }
    .info-piece{
      display:flex;
      align-items:baseline;
      gap:.4rem;
    }
    .info-piece strong{ font-weight:600; }
    .info-piece .ico{ font-size:1.05rem; line-height:1; }
    
    
    
    /* Optional: neutralize any old .info-strip styles if still present */
    

    /* About/Physicians grid */
    section{padding: clamp(2rem, 5vw, 3rem) 0}
    .grid{display:grid; gap:1rem}
    .grid-2{grid-template-columns: repeat(2, 1fr)}
    @media (max-width: 900px){ .grid-2{grid-template-columns:1fr} }
    h2{font-size: clamp(1.3rem, 1rem + 1.2vw, 2rem); margin:0 0 .75rem}
    p{line-height:1.65}
    .phys{display:grid; gap:.75rem}
    .phys .doc{border:1px solid rgba(11,19,32,.07); border-radius:14px; padding:1rem}
    .contact-line{ display:flex; align-items:center; gap:.4rem; margin-left:1rem; margin-top:.25rem; font-size:.95rem; color:var(--muted) }
    .contact-line .ico{ color:var(--brand); flex-shrink:0; }

    /* Contact & Hours with icons */
    .contact-row{display:grid;grid-template-columns:28px 1fr;gap:.6rem;margin:.5rem 0;padding:.4rem .2rem;border-radius:10px}
    .contact-row .ico{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:rgba(16,109,179,.10);color:var(--brand)}
    .contact-row .contact-body > .mono{white-space:nowrap; overflow-wrap:anywhere;}

    /* Open/Closed badge */
    
    

    footer{padding:1.2rem 0 2rem; color:var(--muted)}
    .footer-row{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}

/* ---- site patches ---- */
.status-pill { margin-left: .5rem; white-space: nowrap; }

/* --- Header logo override: ensure full-size SVG --- */
@media (max-width: 767px){
  }

/* --- Status bubble styling --- */

.status-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: currentColor;
}


/* --- Physician credentials (muted) --- */
.creds { color: rgba(0,0,0,.55); font-weight: 500; font-size: 0.95em; }
.creds.muted { opacity: .9; }

/* --- Status bubble (stateful) --- */





/* --- Logo sizing hard override --- */
@media (max-width: 767px){
  }


/* === Status bubble (single definition) === */
.status-bubble{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.25rem .6rem; border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  font-weight:600; line-height:1;
}
.status-bubble .status-dot{ width:.55rem; height:.55rem; border-radius:50%; background:currentColor; }
.status-bubble.open{   color:#0a7a2a; background:rgba(10,122,42,.10); }
.status-bubble.closed{ color:#8a1f1f; background:rgba(138,31,31,.10); }

/* Pin the logo so Safari/WebKit can't shrink it inside flex */
.brand img.brand-logo {
  display: block;
  flex: 0 0 auto;           /* <— critical: prevents flex-shrink on iOS Safari */
  height: 88px;             /* desktop */
  width: auto;              /* keep natural aspect */
  max-width: none;
  max-height: none;
}

/* Mobile size */
@media (max-width: 860px){
  .brand img.brand-logo { height: 68px; }
}

/* Make sure any avatar rule doesn't hit the logo */
.brand img.avatar {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
}

/* Fallback just for Safari: force width from height × ratio (900:250 = 3.6) */
@supports (-webkit-touch-callout: none) {
  .brand img.brand-logo {
    width: calc(88px * 3.6);
  }
  @media (max-width: 860px){
    .brand img.brand-logo {
      width: calc(68px * 3.6);
    }
  }
}


/* === Responsive nav & hamburger (single approach @ 860px) === */
.nav-links{ display:none; }
.menu-toggle{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .65rem; border:1px solid rgba(11,19,32,.10); border-radius:10px; background:#fff; color:var(--ink); }

#mobileMenu{
  display:none; position:absolute; top:100%; right:0;
  background:#fff; border:1px solid rgba(11,19,32,.12);
  border-radius:14px; box-shadow:0 12px 26px rgba(2,12,27,.12);
  width:min(92vw,320px); padding:.5rem; z-index:1000;
}
#mobileMenu.open{ display:flex; flex-direction:column; gap:.25rem; }
#mobileMenu a{ display:block; text-decoration:none; font-weight:600; color:var(--ink); padding:.7rem .8rem; border-radius:10px; }
#mobileMenu a:hover{ background:rgba(16,109,179,.08); }
header .container.nav{ position:relative; }

@media (min-width: 860px){
  .nav-links{ display:flex; gap:.25rem; }
  #menuToggle{ display:none; }
  #mobileMenu{ display:none !important; }
}

/* --- Physician credential bubbles --- */
.badges{ display:inline-flex; gap:.35rem; align-items:center; flex-wrap:wrap; }
.badge-cred{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.1rem .45rem; border-radius:999px;
  font-size:.82rem; font-weight:600; letter-spacing:.2px;
  color:#56616f; background:rgba(11,19,32,.06); border:1px solid rgba(11,19,32,.08);
}

/* enforce visible menu button by default; hidden only at >=860px */
.menu-toggle{display:inline-flex}


/* --- Physician credential layout: stacked bubbles under name --- */
.badges.stack {
  display: flex;              /* becomes block-level flex container */
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .25rem;         /* space below the name */
  justify-content: flex-start;
  text-align: left;
}

/* --- Plain (no bubble) variant --- */
.badges.plain .badge-cred {
  background: transparent;
  border: none;
  padding: 0;
  color: #6b7280;             /* muted grey */
  font-weight: 600;
  letter-spacing: .2px;
}