/* ============================================================
   urHealthcare — design tokens
   Paper #F1F4EF · Ink #14231F · Teal #1F6F5C · Amber #E2A339
   Display: Fraunces · Body: Inter · Utility: IBM Plex Mono
   ============================================================ */

:root{
  --paper:#F1F4EF;
  --paper-2:#E7ECE3;
  --ink:#14231F;
  --ink-soft:#4C5A54;
  --teal:#1F6F5C;
  --teal-dark:#164F42;
  --amber:#E2A339;
  --amber-dark:#C4842047;
  --line:#DBE3D9;
  --card:#FFFFFF;
  --radius:14px;
  --radius-lg:22px;
  --shadow: 0 20px 40px -24px rgba(20,35,31,0.25);
  --maxw:1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}


img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; margin:0 0 .5em; color:var(--ink); }
p{ margin:0 0 1em; color:var(--ink-soft); }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }

::selection{ background:var(--amber); color:var(--ink); }

:focus-visible{
  outline:2.5px solid var(--teal);
  outline-offset:3px;
  border-radius:4px;
}

/* subtle paper grain for texture, reduces "flat AI gradient" look */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:.9em;
}

/*------------- top bar ---------------------*/
.top-bar {
  padding: 10px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #164F42;
  color: #FFFFFF;
  font-size: 0.84rem;
  line-height: 1.4;
  gap: 16px;
}

.top-left {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.top-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.topbar-item {
  margin: 0;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: inherit;
  line-height: 1.4;
  transition: opacity 0.18s ease, transform 0.15s ease, background 0.15s ease;
}

.topbar-item:hover {
  text-decoration: underline;
  opacity: 0.9;
}

.topbar-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: #FFFFFF;
  display: inline-block;
}

.topbar-text {
  display: inline;
}

@media (max-width: 1024px) {
  .top-bar {
    padding: 10px 24px;
    font-size: 0.82rem;
    gap: 12px;
  }
  .top-left {
    gap: 20px;
  }
}

/* Mobile: hide text, keep icons horizontally aligned and clickable */
@media (max-width: 768px) {
  .top-bar {
    padding: 8px 16px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .top-left {
    flex-direction: row;
    gap: 20px;
    align-items: center;
    width: auto;
  }
  .top-right {
    display: flex;
    align-items: center;
    width: auto;
    justify-content: center;
  }
  .topbar-text {
    display: none;
  }
  .topbar-item {
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    padding: 0;
  }
  .topbar-item:hover,
  .topbar-item:active {
    background: rgba(255, 255, 255, 0.28);
    transform: scale(1.08);
    text-decoration: none;
  }
  .topbar-item svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 480px) {
  .top-bar {
    padding: 6px 12px;
    gap: 16px;
  }
  .top-left {
    gap: 16px;
  }
  .topbar-item {
    width: 36px;
    height: 36px;
  }
  .topbar-item svg {
    width: 18px;
    height: 18px;
  }
}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75em 1.5em;
  border-radius:100px;
  font-weight:600; font-size:.92rem;
  border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn-primary{ background:var(--teal); color:#fff; }
.btn-primary:hover{ background:var(--teal-dark); transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(31,111,92,.55); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--teal); color:var(--teal); }
.btn-lg{ padding:.95em 1.9em; font-size:1rem; }

/* ---------------- header ---------------- */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(244, 239, 239, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

.logo img {
  height: 6.2rem;
}



.main-nav{ display:flex; align-items:center; gap:6px; }
.nav-item{
  position:relative;
  font-size:.94rem; font-weight:500;
  padding:10px 14px; border-radius:8px;
  color:var(--ink-soft);
}
a.nav-item:hover{ color:var(--teal); }
.nav-trigger{
  font:inherit; color:var(--ink-soft); background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:6px; padding:10px 14px; border-radius:8px;
}
.nav-trigger:hover{ color:var(--teal); }
.chev{ transition:transform .18s ease; }
.has-menu.open .chev{ transform:rotate(180deg); }

.mega{
  position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:560px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:14px;
  display:grid; grid-template-columns:1fr 1fr; gap:2px;
  opacity:0; visibility:hidden; translate:0 6px;
  transition:opacity .18s ease, translate .18s ease, visibility .18s;
}
.has-menu.open .mega{ opacity:1; visibility:visible; translate:0 0; }
@media (hover:hover){
  .has-menu:hover .mega{ opacity:1; visibility:visible; translate:0 0; }
}
.mega a{
  display:flex; flex-direction:column; gap:2px;
  padding:11px 12px; border-radius:10px;
  font-size:.88rem; color:var(--ink-soft);
}
.mega a:hover{ background:var(--paper-2); color:var(--ink); }
.mega a strong{ font-weight:600; color:var(--ink); font-size:.9rem; }
.mega a span{ font-size:.8rem; color:var(--ink-soft); }
.mega-all{ grid-column:1/-1; color:var(--teal) !important; font-weight:600; }
.mega-all:hover{ background:var(--paper-2); }
.mega-small{ width:300px; grid-template-columns:1fr; }
.login-menu .mega{ left:auto; right:0; transform:none; }

.header-actions{ display:flex; align-items:center; gap:10px; }

.hamburger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; border-radius:9px; border:1px solid var(--line);
  background:var(--card); cursor:pointer; padding:0;
}
.hamburger span{
  height:2px; background:var(--ink); margin:0 8px; border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
  transform-origin:center;
}
.site-header.menu-open .hamburger span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.site-header.menu-open .hamburger span:nth-child(2){
  opacity:0;
}
.site-header.menu-open .hamburger span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.mobile-panel{
  display:none; flex-direction:column;
  padding:10px 28px 22px;
  border-top:1px solid var(--line);
  background:var(--paper);
  max-height:calc(100vh - 100px);
  overflow-y:auto;
}
.mobile-panel a:not(.btn){
  padding:12px 0;
  border-bottom:1px solid var(--line);
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
}
.mobile-panel a:not(.btn):hover{
  color:var(--teal);
}
.mobile-panel .btn{
  margin-top:16px;
  align-self:flex-start;
  border-bottom:none;
  text-decoration:none;
}
.mobile-panel .btn-primary{
  background:var(--teal);
  color:#ffffff !important;
}
.mobile-panel .btn-primary:hover{
  background:var(--teal-dark);
  color:#ffffff !important;
}

/* ---------------- hero ---------------- */
.hero{ padding:76px 0 92px; }
.hero-inner{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center;
}
.hero-copy{
  display:flex;
  flex-direction:column;
}
.hero h1{
  font-size:clamp(2.5rem, 4.6vw, 3.9rem);
  line-height:1.05; letter-spacing:-.01em;
}
.hero h1 em{ font-style:italic; color:var(--teal); }
.lede{ font-size:1.1rem; max-width:46ch; }
.hero-ctas{ display:flex; gap:14px; margin:28px 0 26px; flex-wrap:wrap; }
.hero-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  font-size:.8rem; font-weight:600; color:var(--teal-dark);
  background:#E4EFE9; border:1px solid #CFE3D8;
  padding:8px 14px; border-radius:100px;
}
.chip:hover{ background:#d6ebe0; }

.hero-img{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}
.hero-img img{
  width:100%;
  height:100%;
  min-height:430px;
  max-height:490px;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
  border-radius:var(--radius-lg, 18px);
  box-shadow:0 22px 48px -12px rgba(22,79,66,.22), 0 0 0 1px var(--line);
  display:block;
  transition:transform .3s ease, box-shadow .3s ease;
}
.hero-img img:hover{
  transform:translateY(-3px);
  box-shadow:0 28px 56px -10px rgba(22,79,66,.28), 0 0 0 1px var(--line);
}

.hero-signature{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.hero-photo{
  width:100%; max-width:360px; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); border:1px solid var(--line); aspect-ratio:9/10;
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; }
.ring-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:30px 34px 26px; text-align:center; width:100%; max-width:320px;
}
.ring-track{ fill:none; stroke:var(--paper-2); stroke-width:10; }
.ring-big{ font-family:'Fraunces', serif; font-size:44px; fill:var(--ink); font-weight:600; }
.ring-label{ font-family:'IBM Plex Mono', monospace; font-size:11px; fill:var(--ink-soft); letter-spacing:.08em; text-transform:uppercase; }
.tick{ fill:var(--ink-soft); }
.tick.today{ fill:var(--amber-dark); font-weight:700; }
.dot{ fill:var(--teal); }
.dot.today{ fill:var(--amber); r:5; }
.ring-caption{ margin-top:14px; font-size:.86rem; color:var(--ink-soft); }

/* ---------------- section shell ---------------- */
.section{ padding:88px 0; }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head h2{ font-size:clamp(1.9rem,3vw,2.6rem); }
.section-sub{ font-size:1.03rem; }

/* ---------------- why choose ---------------- */
.why{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.why-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; overflow:hidden;
}
.why-photo{
  margin:-30px -26px 20px; height:150px; overflow:hidden;
}
.why-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.why-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:50%;
  background:#E4EFE9; color:var(--teal); margin-bottom:18px;
}
.why-card h3{ font-size:1.2rem; margin-bottom:.4em; }
.why-card p{ font-size:.94rem; margin:0; }

/* ---------------- symptom cards / conditions ---------------- */
.symptom-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:24px;
}
.symptom-card{
  background:#ffffff;
  border:1px solid #e2e8e4;
  border-radius:12px;
  box-shadow:0 12px 32px -16px rgba(20,35,31,0.12);
  padding:28px;
  display:flex;
  flex-direction:column;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.symptom-card:hover{
  border-color:var(--teal);
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.symptom-card h3{
  font-size:1.25rem;
  font-weight:700;
  color:var(--teal);
  margin-bottom:18px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.symptom-card ul{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
  list-style:none;
}
.symptom-card ul li{
  position:relative;
  padding-left:26px;
  font-size:0.95rem;
  color:var(--ink-soft);
  line-height:1.6;
  margin-bottom:10px;
}
.symptom-card ul li:last-child{
  margin-bottom:0;
}
.symptom-card ul li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color:var(--teal);
  font-weight:700;
  font-size:1rem;
}
.symptom-note{
  margin-top:24px;
  font-size:0.88rem;
  font-style:italic;
  color:var(--ink-soft);
}

.emergency-note {
  margin-top: 36px;
  padding: 18px 24px;
  background: #FFF9F0;
  border: 1px solid #F5DEB8;
  border-left: 4px solid var(--amber);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(20, 35, 31, 0.04);
}
.emergency-note strong {
  color: #8C5700;
  font-weight: 700;
}

/* ---------------- services ---------------- */
.services-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.service-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px; transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{ border-color:var(--teal); transform:translateY(-3px); box-shadow:var(--shadow); }
.s-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:11px;
  background:var(--paper-2); color:var(--teal); margin-bottom:16px;
}
.service-card h3{ font-size:1.06rem; margin-bottom:.35em; }
.service-card h3 a:hover{ color:var(--teal); }
.service-card p{ font-size:.88rem; margin-bottom:.6em; }
.service-card p a{ color:var(--teal); font-weight:600; }
.card-link{ font-size:.85rem; font-weight:600; color:var(--teal); }

/* ---------------- steps / how it works ---------------- */
.steps-grid, .steps-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
}
.step-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  padding:24px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.step-card:hover{
  border-color:var(--teal);
  transform:translateY(-2px);
}
.step-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#E4EFE9;
  color:var(--teal);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.95rem;
  font-weight:700;
  margin-bottom:16px;
}
.step-card h3{
  font-size:1.15rem;
  margin-bottom:0.4em;
  color:var(--ink);
}
.step-card p{
  font-size:0.92rem;
  color:var(--ink-soft);
  margin:0;
  line-height:1.55;
}
.step-note{
  text-align:center;
  max-width:680px;
  margin:32px auto 0;
}

.provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.provider-card {
  background: #ffffff;
  border: 1px solid #e2e8e4;
  border-radius: 12px;
  box-shadow: 0 4px 20px -2px rgba(20, 35, 31, 0.06), 0 2px 6px -1px rgba(20, 35, 31, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.provider-card:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
  box-shadow: var(--shadow);
}

.provider-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--paper-2);
}

.provider-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: block;
  transition: transform 0.3s ease;
}

.provider-card:hover .provider-photo img {
  transform: scale(1.03);
}

.provider-info {
  padding: 22px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.provider-info h3 {
  font-size: 1.22rem;
  margin-bottom: 6px;
  color: var(--ink);
}

.provider-role {
  display: block;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--teal);
  margin-bottom: 12px;
  line-height: 1.4;
}

.provider-bio {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.provider-lang {
  margin-top: auto;
  margin-bottom: 0;
  padding: 6px 12px;
  background: #E4EFE9;
  border: 1px solid #CFE3D8;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--teal-dark);
  display: inline-block;
  align-self: flex-start;
}

.rocklin-primary-care {
  background: var(--card);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 80px 0;
}

.primary-care-intro-block {
  display: flex;
  flex-direction: column;
}

.rocklin-primary-care .section-head {
  max-width: 820px;
  margin-bottom: 20px;
}

.primary-care-body-text {
  max-width: 900px;
  margin-bottom: 38px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.primary-care-highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

.highlight-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.highlight-card:hover {
  transform: translateY(-3px);
  border-color: var(--teal);
  box-shadow: var(--shadow);
}

.highlight-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #E4EFE9;
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.highlight-icon svg {
  stroke: currentColor;
}

.highlight-content h3 {
  font-size: 1.18rem;
  margin-bottom: 8px;
  color: var(--ink);
}

.highlight-content p {
  font-size: 0.94rem;
  line-height: 1.6;
  margin: 0;
  color: var(--ink-soft);
}

.primary-care-cta-banner {
  margin-top: 12px;
  padding: 28px 34px;
  background: linear-gradient(135deg, #EBF3EE 0%, #E2ECE6 100%);
  border: 1px solid #CFE3D8;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.banner-content h4 {
  font-family: 'Fraunces', serif;
  font-size: 1.28rem;
  margin: 0 0 6px 0;
  color: var(--teal-dark);
}

.banner-content p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink);
}

.banner-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ---------------- insurance / marquee ---------------- */
.insurance{ padding-bottom:0; }
.insurance-inner{ max-width:720px; margin-bottom:44px; }
.insurance h2{ font-size:clamp(1.8rem,3vw,2.4rem); }
.insurance-note{ font-size:.9rem; }
.insurance-alt{
  margin-top:22px; padding:16px 20px; background:var(--paper-2); border-radius:var(--radius);
  font-size:.94rem;
}
.text-link{ color:var(--teal); font-weight:600; }

.marquee{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--ink); padding:22px 0;
}
.marquee-track{
  display:flex; gap:52px; white-space:nowrap;
  animation:scroll 26s linear infinite;
  width:max-content;
}
.marquee-track span{
  font-family:'IBM Plex Mono', monospace; font-size:.85rem; letter-spacing:.04em;
  color:#C9D6CE; text-transform:uppercase;
}
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------------- membership / pricing ---------------- */
.membership{ background:var(--paper-2); }
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:64px; }
.pricing-grid.single-plan{ grid-template-columns:minmax(0,380px); justify-content:center; margin-bottom:20px; }
.pricing-note{ text-align:center; font-size:.92rem; color:var(--ink-soft); max-width:520px; margin:0 auto 64px; }
.price-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 28px; display:flex; flex-direction:column;
}
.price-card.featured{ border-color:var(--teal); box-shadow:var(--shadow); position:relative; }
.price-card.featured::before{
  content:"Available now"; position:absolute; top:-13px; left:28px;
  background:var(--amber); color:var(--ink); font-family:'IBM Plex Mono',monospace;
  font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 12px; border-radius:100px; font-weight:600;
}
.price-tag{ font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal); margin-bottom:.6em; }
.price{ font-family:'Fraunces', serif; font-size:1rem; color:var(--ink-soft); margin-bottom:1.4em; }
.price span{ font-size:2.6rem; color:var(--ink); font-weight:600; }
.price-card ul{ display:flex; flex-direction:column; gap:11px; margin-bottom:26px; flex:1; }
.price-card ul li{
  font-size:.9rem; color:var(--ink-soft); padding-left:22px; position:relative;
}
.price-card ul li::before{
  content:""; position:absolute; left:0; top:7px; width:11px; height:11px;
  border-left:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:rotate(-45deg); translate:0 -2px;
}
.price-card .btn{ width:100%; }

.included-block h3{ font-size:1.4rem; margin-bottom:24px; text-align:center; }
.included-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-bottom:64px; }
.included-item{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; display:flex; gap:12px; align-items:flex-start;
}
.included-item .s-icon{ margin-bottom:0; flex-shrink:0; width:38px; height:38px; }
.included-item strong{ display:block; font-size:.92rem; margin-bottom:3px; }
.included-item span{ font-size:.82rem; color:var(--ink-soft); }
.included-item a{ color:var(--teal); font-weight:600; }

.procedure-pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
}

.procedure-price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e2e8e4;
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 2px 6px rgba(20, 35, 31, 0.03);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.procedure-price-item:hover {
  border-color: var(--teal);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -4px rgba(20, 35, 31, 0.08);
}

.procedure-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}

.procedure-cost {
  font-size: 1.05rem;
  font-weight: 700;
  color: #123329;
  font-family: 'Fraunces', serif;
  white-space: nowrap;
}

.pricing-disclaimer-card {
  margin-top: 28px;
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid #e2e8e4;
  border-left: 4px solid var(--teal);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(20, 35, 31, 0.03);
}

.pricing-disclaimer-card p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.pricing-disclaimer-card p strong {
  color: var(--ink);
}

.pricing-disclaimer-card a {
  color: var(--teal);
  font-weight: 600;
  text-decoration: underline;
}

.med-directory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.med-category-card {
  background: #ffffff;
  border: 1px solid #e2e8e4;
  border-radius: 12px;
  box-shadow: 0 4px 16px -2px rgba(20, 35, 31, 0.05), 0 2px 6px -1px rgba(20, 35, 31, 0.03);
  padding: 24px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.med-category-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: var(--shadow);
}

.med-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8e4;
}

.med-cat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #E4EFE9;
  color: var(--teal);
  flex-shrink: 0;
}

.med-card-header h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

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

.med-pill {
  background: #f0f5f2;
  color: #1a4d3e;
  border: 1px solid #dce8e0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.35;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.med-category-card:hover .med-pill {
  background: #e7f1eb;
}

.med-disclaimer-card {
  margin-top: 36px;
  margin-bottom: 48px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid #e2e8e4;
  border-left: 4px solid var(--teal);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(20, 35, 31, 0.04);
}

.med-disclaimer-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.med-disclaimer-card p strong {
  color: var(--ink);
}

/* ---------------- accordion ---------------- */
.mem-faq h3{ font-size:1.4rem; margin-bottom:20px; text-align:center; }
.accordion{ max-width:760px; margin:0 auto; border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 4px; background:none; border:none; cursor:pointer;
  font-family:'Fraunces', serif; font-size:1.05rem; font-weight:500; color:var(--ink);
  text-align:left;
}
.acc-plus{ flex-shrink:0; color:var(--teal); transition:transform .2s ease; }
.acc-item.open .acc-plus{ transform:rotate(45deg); }
.acc-panel{
  max-height:0; overflow:hidden; transition:max-height .25s ease;
}
.acc-item.open .acc-panel{ max-height:220px; }
.acc-panel p{ padding:0 4px 20px; font-size:.94rem; }
.acc-panel a{ color:var(--teal); font-weight:600; }

/* ---------------- locations ---------------- */
.now-accepting{
  font-size:.94rem; margin-bottom:30px; padding:12px 18px;
  background:#E4EFE9; border-radius:var(--radius); display:inline-block; color:var(--teal-dark);
}
.now-accepting a{ font-weight:700; text-decoration:underline; }
.location-card{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:var(--card); box-shadow:var(--shadow);
}
.location-info{ padding:38px; }
.star{ font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--amber-dark); margin-bottom:14px; }
.location-info h3{ font-size:1.5rem; margin-bottom:.5em; }
.location-info h3 a:hover{ color:var(--teal); }
.location-ctas{ display:flex; gap:12px; margin-top:20px; flex-wrap:wrap; }
.location-media{ display:flex; flex-direction:column; }
.location-photo{ width:100%; height:180px; object-fit:cover; display:block; }
.location-map{ min-height:200px; flex:1; }
.location-map iframe{ width:100%; height:100%; border:0; display:block; min-height:200px; }

.cta-band{
  text-align:center;
  padding:72px 20px;
}
.cta-band h2{
  font-size:clamp(1.9rem, 3.2vw, 2.6rem);
  margin-bottom:0.45em;
}
.cta-band p, .cta-band .section-sub{
  max-width:540px;
  margin:0 auto 30px auto;
  font-size:1.05rem;
  line-height:1.6;
  color:var(--ink-soft);
}
.cta-band .btns{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

/* ---------------- employers page ---------------- */
.emp-hero .hero-photo{ aspect-ratio:9/10; }
.mini-list{ display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.mini-list li{ font-size:.86rem; color:var(--ink-soft); padding-left:20px; position:relative; }
.mini-list li::before{
  content:""; position:absolute; left:0; top:6px; width:10px; height:10px;
  border-left:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);
}
.plan-design{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.split-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:34px; }
.split-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px 30px;
}
.split-card h3{ font-size:1.2rem; margin-bottom:1em; }
.check-list{ display:flex; flex-direction:column; gap:13px; }
.check-list li{ font-size:.94rem; color:var(--ink-soft); padding-left:26px; position:relative; }
.check-list li::before{
  content:""; position:absolute; left:0; top:3px; width:14px; height:9px;
  border-left:2px solid var(--teal); border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);
}
.check-list li strong{ color:var(--ink); }
.plan-ctas{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.emp-footnote{ text-align:center; max-width:640px; margin:0 auto; font-size:.85rem; }

.employer-form{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:38px; max-width:760px; margin:0 auto;
}
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.employer-form label{
  display:flex; flex-direction:column; gap:7px; font-size:.86rem; font-weight:600; color:var(--ink);
}
.form-full{ margin-bottom:22px; }
.employer-form input, .employer-form select, .employer-form textarea{
  font:inherit; font-size:.94rem; padding:11px 13px; border:1.5px solid var(--line);
  border-radius:10px; background:var(--paper); color:var(--ink); font-weight:400;
}
.employer-form input:focus, .employer-form select:focus, .employer-form textarea:focus{
  outline:none; border-color:var(--teal);
}
.form-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.form-note{ font-size:.8rem; color:var(--ink-soft); margin-top:16px; margin-bottom:0; }

/* ---------------- faq page ---------------- */
.faq-hero{ padding:70px 0 50px; }
.faq-hero .lede{ max-width:52ch; }
.faq-hero .hero-inner{ align-items:center; }
.faq-page{ padding-top:20px; }
.faq-jump{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom:56px;
  padding-bottom:36px; border-bottom:1px solid var(--line);
}
.faq-jump a{
  font-size:.84rem; font-weight:600; color:var(--teal-dark);
  background:#E4EFE9; border:1px solid #CFE3D8;
  padding:9px 16px; border-radius:100px;
}
.faq-jump a:hover{ background:#d6ebe0; }
.faq-page .mem-faq{ margin-bottom:52px; scroll-margin-top:100px; }
.faq-cta{
  text-align:center; max-width:520px; margin:0 auto; padding:40px 30px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.faq-cta h3{ font-size:1.3rem; margin-bottom:.4em; }
.faq-cta p{ font-size:.94rem; margin-bottom:1.4em; }

/* ---------------- responsive ---------------- */
@media (max-width:980px){
  .main-nav, .login-menu, .btn.btn-primary.header-cta{ display:none; }
  .header-actions .btn-primary{ display:none; }
  .hamburger{ display:flex; }
  .hero-inner{ grid-template-columns:1fr; }
  .hero-signature{ order:-1; }
  .why-grid{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns:repeat(2,1fr); }
  .pricing-grid{ grid-template-columns:1fr; }
  .included-grid{ grid-template-columns:repeat(2,1fr); }
  .location-card{ grid-template-columns:1fr; }
  .location-map{ min-height:260px; }
  .split-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .hero-img img{ min-height:unset; max-height:400px; aspect-ratio:16/10; }
  .primary-care-highlights-grid{ grid-template-columns:1fr; }
  .primary-care-cta-banner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:980px){
  .site-header.menu-open .mobile-panel{ display:flex; }
}
@media (max-width:768px){
  .procedure-pricing-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .services-grid{ grid-template-columns:1fr; }
  .included-grid{ grid-template-columns:1fr; }
  .provider-grid{ grid-template-columns:1fr; }
  .med-directory-grid{ grid-template-columns:1fr; }
  .highlight-card{ flex-direction:column; gap:14px; padding:20px; }
  .banner-actions{ width:100%; flex-direction:column; }
  .banner-actions .btn{ width:100%; }
  .hero{ padding:48px 0 60px; }
  .section{ padding:60px 0; }
  .wrap{ padding:0 20px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .marquee-track{ animation:none; }
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
}



/*-- ------======== footer css ============------- */
.footer {
  display: grid;
  grid-template-columns:0.9fr 0.5fr 0.5fr 1fr;
  column-gap: 60px; 
  justify-content: center;
  padding: 25px;
  margin-left: 170px;

}

.footer em{
  font-size: 1.5rem;
  font-weight: bold;
  color:#c9c8c8;
}

.footer-icons{
  display: flex;
  gap:15px;
  color: #FFFFFF;
}

.footer-sec1 p{
  color: #c9c8c8; 
  margin-top: 20px;
  width: 80%;
}

.footer-icons li i{
  font-size: 25px;
  text-align: center;
  width: 48px;
  height: 48px;
  border:solid 1px #C9D6CE;
  border-radius: 100%;
  padding:11px;
  background-color:#75aea1;
  transition: 0.3s ease;
}

.footer-icons li i:hover{
  background-color: #1F6F5C;
  transform:translateY(-6px);
}

.site-footer {
  background: #161515;
  padding: 60px 60px 20px;
}

.site-footer img {
  height: 9.2rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  list-style-type:square;
  gap: 8px;
  font-size: 1.1rem;
  color: #c9c8c8;
  margin-left: 20px;
}

.footer-links li:hover{
  color: #FFFFFF;
  text-decoration: underline;
}

.footer-disclaimer {
  width: 100%;
  display: flex;
  justify-content: center;

}

.footer-disclaimer p {
  font-size: 1.0rem;
  color: #c9c8c8;
  max-width: 800px;
  margin: auto;
  text-align: center;
}

.footer-copy {
  font-size: .85rem;
  color: #a8a8a8;
  margin-top: 32px;
  text-align: center;
}

.footer-line {
  width: 80%;
  border: none;
  height: 2px;
  background-color: #5d5c5c;
}

.footer-meta p {
  font-size: .88rem;
  color: #9FB2A8;
  margin-bottom: .4em;
}

.footer-meta a {
  color: #DCE8E2;
}

.footer-contact p {
  font-size: 1.0rem;
  display:flex;
  gap:10px;
  margin-top:10px;
  color: #c9c8c8;
}

.footer-contact p:hover{
  color:#FFFFFF;
}

.footer-services{
  color: #c9c8c8;
}

.services-list li{
  line-height: 32px;
   transition: 0.3s ease;
}

.services-list li:hover{
   color:#f9f6f6;
   transform: translateX(5px);

}

/* =========================
   FOOTER RESPONSIVE
   ========================= */

/* ---------- Tablet ---------- */
@media (max-width: 992px) {

  .site-footer {
    padding: 50px 35px 20px;
  }

  .footer {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 40px;
    margin-left: 0;
    padding: 20px 0;
  }

  .footer-sec1 p {
    width: 90%;
  }

  .site-footer img {
    height: 8rem;
  }

  .footer-links {
    font-size: 1rem;
  }

  .footer-contact p {
    font-size: 0.95rem;
  }
}


/* ---------- Mobile ---------- */
@media (max-width: 768px) {

  .site-footer {
    padding: 40px 25px 20px;
  }

  .footer {
    grid-template-columns: 1fr;
    gap: 35px;
    margin-left: 0;
    padding: 15px 0;
  }

  .footer-sec1 p {
    width: 100%;
  }

  .site-footer img {
    height: 7rem;
  }

  .footer-icons {
    gap: 10px;
  }

  .footer-icons li i {
    font-size: 22px;
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  .footer-links {
    margin-left: 18px;
    font-size: 1rem;
  }

  .services-list li {
    line-height: 28px;
  }

  .footer-contact p {
    font-size: 0.95rem;
  }

  .footer-disclaimer p {
    font-size: 0.9rem;
  }

  .footer-copy {
    font-size: 0.8rem;
  }

  .footer-line {
    width: 100%;
  }
}


/* ---------- Small Mobile ---------- */
@media (max-width: 480px) {

  .site-footer {
    padding: 35px 18px 15px;
  }

  .footer {
    gap: 30px;
  }

  .footer em {
    font-size: 1.3rem;
  }

  .site-footer img {
    height: 6rem;
  }

  .footer-icons li i {
    width: 40px;
    height: 40px;
    font-size: 20px;
    padding: 9px;
  }

  .footer-contact p {
    font-size: 0.9rem;
    gap: 7px;
  }

  .footer-disclaimer p {
    font-size: 0.85rem;
  }

  .footer-copy {
    font-size: 0.75rem;
  }
}

.appointment-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px 80px;
}
.appointment-page {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: 28px;
  align-items: stretch;  
}

.appointment-page > .page-info {
  grid-column: 1 / -1;
}
.appointment-page > .page-heading {
  grid-column: 1 / -1;
}


.appointment-page > div:not(.page-info):not(.page-heading) {
  grid-column: 1;
  grid-row: 3;
  align-self: stretch;
}

.appointment-page > .booking-card {
  grid-column: 2;
  grid-row: 3;
  align-self: stretch;
}


.appointment-page > .review-card {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: 24px;
}


.page-info {
  display: block;
  padding: 20px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.page-info a {
  color: var(--teal);
  font-weight: 500;
  text-decoration: none;
}
.page-info a:hover { text-decoration: underline; }
.page-info span { color: var(--ink-soft); margin: 0 4px; }

/* ── Page heading ── */
.page-heading { padding: 22px 0 28px; }
.page-heading h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 6px;
}
.page-heading p {
  font-size: 1rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ══════════════════════════════════════
   PATIENT DETAILS 
══════════════════════════════════════ */
.appointment-page > div:not(.page-info):not(.page-heading) {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.appointment-page > div:not(.page-info):not(.page-heading) > div:first-child {
  display: block;
  padding: 20px 26px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.appointment-page > div:not(.page-info):not(.page-heading) > div:first-child em {
  font-style: normal;
  color: var(--teal);
  margin-right: 10px;
  font-size: 1rem;
}
.appointment-page > div:not(.page-info):not(.page-heading) > div:first-child span {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

/* ── Form ── */
form {
  display: block;
  padding: 24px 26px 26px;
  flex: 1;        
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group,
.formm-group {
  display: block;
  margin-bottom: 16px;
}

.form-group label,
.formm-group label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
}
.form-group label span,
.formm-group label span { color: #c0392b; }

.form-group input,
.form-group select,
.form-group textarea,
.formm-group input {
  display: block;
  width: 100%;
  font: inherit;
  font-size: 0.93rem;
  padding: 10px 13px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  transition: border-color 0.16s, box-shadow 0.16s;
  appearance: none;
  -webkit-appearance: none;
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%234C5A54' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 12px;
  padding-right: 36px;
  cursor: pointer;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.formm-group input:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(31,111,92,.11);
}
.form-group input::placeholder,
.formm-group input::placeholder,
.form-group textarea::placeholder { color: #adb8b2; }
.form-group textarea { resize: vertical; min-height: 96px; }

/* Continue button */
.continue {
  display: block;
  width: 100%;
  padding: 13px 20px;
  margin-top: 6px;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: 100px;
  font: inherit;
  font-size: 0.97rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background .16s, transform .13s, box-shadow .13s;
}
.continue:hover {
  background: var(--teal-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -8px rgba(31,111,92,.45);
}


.booking-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 0;
}

.section-heading {
  display: block;
  padding: 20px 26px 16px;
  border-bottom: 1px solid var(--line);
}
.section-heading i {
  color: var(--teal);
  font-size: 1rem;
  margin-right: 8px;
}
.section-heading h2 {
  display: inline;
  font-family: 'Fraunces', serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  vertical-align: middle;
}
.section-heading p {
  display: block;
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 5px 0 0;
}

/* ── Card body wrapper ── */
.booking-card > div {
  display: block;
  padding: 24px 26px;
}

/* ── "Next 3 Days" label ── */
.date-section { margin-bottom: 24px; }

.date-section h3,
.time-section h3 {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
  letter-spacing: 0;
  text-transform: none;
}

/* ── DATE CARDS GRID ── */
.date-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  min-height: 110px; 

}

.date-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 16px 12px 18px;
  background: var(--card);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: border-color .16s, box-shadow .16s;
}
.date-card:hover {
  border-color: var(--teal);
}


.date-card.selected {
  border-color: var(--teal);
  box-shadow: 0 0 0 1px var(--teal);
}


.date-card .day-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}


.date-card .date-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
}


.date-card .day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  /* Default: light grey circle */
  background: #EAEEEB;
  color: var(--ink);
  margin-top: 4px;
  transition: background .16s, color .16s;
}


.date-card.selected .day-num {
  background: var(--teal);
  color: #fff;
}


.time-section { margin-bottom: 20px; }

/* ── TIME SLOTS GRID ── */
.time-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.time-slot {
  display: block;
  padding: 11px 6px;
  background: var(--card);
  border: 1.5px solid #D8E0DA;
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: border-color .14s, background .14s, color .14s, box-shadow .14s;
}
.time-slot:hover {
  border-color: var(--teal);
  background: #f2f8f5;
}


.time-slot:first-child,
.time-slot.selected {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  font-weight: 600;
  box-shadow: 0 3px 10px -3px rgba(31,111,92,.4);
}


.booking-card > div > div:nth-child(3) {
}
.booking-card > div > div:last-child {
  display: block;
  background: #f7f9f6;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 16px;
}
.booking-card > div > div:last-child i {
  color: var(--teal);
  font-size: 1rem;
  margin-right: 8px;
}
.booking-card > div > div:last-child strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
}
.booking-card > div > div:last-child p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin: 0;
}


.review-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Header row: checkmark icon + title + subtitle */
.review-card .review-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--line);
}

.review-card .review-check {
  color: var(--teal);
  font-size: 1.1rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.review-card .review-header-text h3 {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}

.review-card .review-header-text p {
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 0;
}

/* Body: centred summary box */
.review-card .review-body {
  padding: 28px 32px;
  display: flex;
  justify-content: center;
}

.review-summary {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 32px;
  width: 100%;
  max-width: 560px;
}

.review-summary .review-cal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #E4EFE9;
  color: var(--teal);
  font-size: 1.35rem;
  flex-shrink: 0;
}

.review-summary .review-text p.review-pre {
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 0 0 4px;
}

.review-summary .review-text p.review-datetime {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 4px;
}

.review-summary .review-text p.review-sub {
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

/* Tablet: stack vertically */
@media (max-width: 860px) {
  .appointment-page {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding: 0 20px 60px;
  }
  .appointment-page > div:not(.page-info):not(.page-heading) {
    grid-column: 1;
    grid-row: auto;
  }
  .appointment-page > .booking-card {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 580px) {
  .appointment-page { padding: 0 16px 60px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  form { padding: 18px 18px 20px; }
  .booking-card > div { padding: 18px 18px; }
  .time-options { grid-template-columns: repeat(3, 1fr); }
  .review-card .review-body { padding: 20px 18px; }
  .review-summary { flex-direction: column; align-items: flex-start; padding: 18px 20px; }
}

@media (max-width: 360px) {
  .time-options { grid-template-columns: repeat(2, 1fr); }
  .date-options { grid-template-columns: repeat(3, 1fr); }
}


/* ============================================================
   BOOKING PAGE — extra styles
   ============================================================ */

/* ── Hero banner ── */
.booking-hero {
  background: linear-gradient(135deg, #EBF3EE 0%, #E2ECE6 100%);
  border-bottom: 1px solid var(--line);
  padding: 52px 0 48px;
}

.booking-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.booking-hero-copy h1 {
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin: 0 0 10px;
  color: var(--ink);
}

.booking-hero-copy .lede {
  max-width: 44ch;
  font-size: 1.04rem;
  margin-bottom: 20px;
}

.booking-trust-chips {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.booking-trust-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ── Step progress indicator ── */
.booking-hero-steps {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.bstep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.bstep-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 2px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-soft);
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.bstep.active .bstep-num {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

.bstep-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.bstep.active .bstep-label {
  color: var(--teal);
}

.bstep-connector {
  width: 48px;
  height: 2px;
  background: var(--line);
  margin: 0 6px;
  margin-bottom: 24px;
  flex-shrink: 0;
}

/* ── Section wrapper ── */
.booking-section {
  padding: 0 0 72px;
}

/* ── Patient details card overrides (more explicit than appointment-page generic) ── */
.patient-details-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.card-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 26px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.card-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #E4EFE9;
  color: var(--teal);
  font-size: 0.95rem;
  flex-shrink: 0;
}

.card-header-title {
  font-family: 'Fraunces', serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--ink);
}

/* ── Radio group ── */
.radio-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.radio-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
}

.radio-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-custom {
  display: inline-flex;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--line);
  flex-shrink: 0;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}

.radio-custom::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0;
  transition: opacity 0.15s;
}

.radio-option input[type="radio"]:checked ~ .radio-custom {
  border-color: var(--teal);
}

.radio-option input[type="radio"]:checked ~ .radio-custom::after {
  opacity: 1;
}

.radio-option:hover .radio-custom {
  border-color: var(--teal);
}

/* ── Privacy note ── */
.form-privacy-note {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ── Selection summary box (inside booking-card) ── */
.selection-summary-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f7f9f6;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 18px;
}

.selection-summary-box > i {
  color: var(--teal);
  font-size: 1.05rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.selection-summary-box strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.selection-summary-box p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
}

/* ── Info strip ── */
.booking-info-strip {
  background: var(--ink);
  padding: 48px 0;
}

.info-strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.info-strip-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: #C9D6CE;
}

.info-strip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(31, 111, 92, 0.25);
  color: #6EC9AD;
  font-size: 1rem;
  flex-shrink: 0;
}

.info-strip-card strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.info-strip-card p {
  font-size: 0.86rem;
  color: #A8C4BA;
  margin: 0;
  line-height: 1.55;
}

.info-strip-card a {
  color: #6EC9AD;
  font-weight: 600;
}

/* ── Online scheduler iframe ── */
.online-scheduler {
  background: var(--card);
  border-top: 1px solid var(--line);
}

.scheduler-section-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 40px;
}

.scheduler-section-head h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 12px;
}

.scheduler-section-sub {
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin: 0 0 28px;
  line-height: 1.6;
}

/* 3-step row */
.scheduler-steps-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sched-step {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 100px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.sched-step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #E4EFE9;
  color: var(--teal);
  font-size: 0.88rem;
  flex-shrink: 0;
}

.sched-step-arrow {
  color: var(--ink-soft);
  font-size: 0.8rem;
  opacity: 0.5;
}

/* note below iframe */
.scheduler-note {
  text-align: center;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 20px 0 0;
}

.scheduler-note a {
  color: var(--teal);
  font-weight: 600;
}

@media (max-width: 580px) {
  .sched-step-arrow { display: none; }
  .scheduler-steps-row { gap: 8px; }
  .sched-step { padding: 9px 16px; font-size: 0.84rem; }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .booking-hero-inner {
    flex-direction: column;
    gap: 28px;
  }

  .booking-hero-steps {
    order: -1;
    align-self: flex-start;
  }

  .info-strip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .booking-hero {
    padding: 36px 0 32px;
  }

  .bstep-connector {
    width: 28px;
  }

  .info-strip-grid {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   APPOINTMENT CONFIRMATION — Redesigned success state
   ============================================================ */

/* ── Overlay backdrop ── */
.appt-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 35, 31, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: overlayFadeIn .3s ease forwards;
}
.appt-confirm-overlay.show {
  display: flex;
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal card ── */
.appt-confirm-modal {
  background: var(--card);
  border-radius: 24px;
  box-shadow: 0 32px 80px -16px rgba(20,35,31,0.38), 0 0 0 1px rgba(20,35,31,0.06);
  width: 100%;
  max-width: 520px;
  overflow: hidden;
  animation: modalSlideUp .35s cubic-bezier(.34,1.56,.64,1) forwards;
  position: relative;
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(32px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Top accent band ── */
.appt-confirm-band {
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--teal) 100%);
  padding: 36px 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Decorative circles */
.appt-confirm-band::before,
.appt-confirm-band::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.07);
  pointer-events: none;
}
.appt-confirm-band::before { width: 200px; height: 200px; top: -80px; right: -60px; }
.appt-confirm-band::after  { width: 140px; height: 140px; bottom: -60px; left: -40px; }

/* ── Animated check icon ── */
.appt-confirm-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.appt-confirm-icon svg {
  width: 38px;
  height: 38px;
  color: #fff;
}
.appt-confirm-icon .check-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: drawCircle .5s .2s ease forwards;
}
.appt-confirm-icon .check-mark {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: drawCheck .35s .65s ease forwards;
}
@keyframes drawCircle {
  to { stroke-dashoffset: 0; }
}
@keyframes drawCheck {
  to { stroke-dashoffset: 0; }
}

.appt-confirm-band h2 {
  font-family: 'Fraunces', serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}
.appt-confirm-band p {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.80);
  margin: 0;
  max-width: 34ch;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

/* ── Details body ── */
.appt-confirm-body {
  padding: 28px 32px 24px;
}

.appt-confirm-summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 22px;
}

.appt-confirm-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.appt-confirm-row:last-child { border-bottom: none; }

.appt-confirm-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #E4EFE9;
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
}

.appt-confirm-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.appt-confirm-row-text span:first-child {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
  font-family: 'IBM Plex Mono', monospace;
}
.appt-confirm-row-text span:last-child {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
}

/* ── Notice box ── */
.appt-confirm-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #FDF4DF;
  border: 1px solid #f5dfa0;
  border-left: 3px solid var(--amber);
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 22px;
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.appt-confirm-notice i {
  color: var(--amber);
  margin-top: 1px;
  flex-shrink: 0;
}
.appt-confirm-notice strong { color: var(--ink); }

/* ── Actions ── */
.appt-confirm-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.appt-confirm-actions .btn {
  width: 100%;
  justify-content: center;
  padding: 12px 20px;
  font-size: 0.95rem;
}

/* ── Close button (top-right) ── */
.appt-confirm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.20);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  transition: background .15s;
  z-index: 2;
}
.appt-confirm-close:hover { background: rgba(255,255,255,0.35); }

/* ── Responsive ── */
@media (max-width: 560px) {
  .appt-confirm-band { padding: 28px 24px 22px; }
  .appt-confirm-body { padding: 22px 20px 20px; }
  .appt-confirm-modal { border-radius: 18px; }
  .appt-confirm-band h2 { font-size: 1.3rem; }
}