/* ══════════════════════════════════════
   DESIGN SYSTEM , Warm Slate + Teal + Amber
   Resilience Mental Health & Men's Wellness LLC
   ══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Outfit:wght@300;400;500;600&display=swap');

:root {
  --deep:   #0f3d52;
  --teal:   #0e8fa8;
  --teal2:  #1aafcc;
  --aqua:   #4dd8f0;
  --amber:  #f0832a;
  --amber2: #ffd199;
  --cream:  #ffffff;
  --ivory:  #f0f8fc;
  --stone:  #cce8f0;
  --bark:   #3d6575;
  --ink:    #0d2d3d;
  --mist:   #5bbdd6;
  --border: rgba(14,143,168,0.15);
  --shadow: 0 8px 40px rgba(14,143,168,0.18);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  overflow-x: hidden;
  font-size: 17px;
}

h1,h2,h3,h4 {
  font-family: 'Playfair Display', Georgia, serif;
  line-height: 1.2;
}

/* ══════════ GLOBAL 17px BODY TEXT ══════════ */
p, li, a, label, input, select, textarea, blockquote,
.lead, .hero-body, .sc-body, .pillar-body, .svc-body, .step-body,
.test-text, .faq-a, .res-excerpt, .age-desc, .about-cred,
.cond-tile-name, .tele-sub, .tele-label, .mens-quote-attr,
.trust-label, .info-val, .c-val,
.booking-why-body, .emergency-note, .af-val,
.svc-dur, .test-name, .test-role, .test-stars,
.booking-form-wrap p, .footer-emer, .about-pullquote,
.booking-why-title, .mens-quote-text, .banner,
.spectrum-card p, .pillar p {
  font-size: 17px !important;
}

a { text-decoration: none; color: inherit; }
button { font-family: 'Outfit', sans-serif; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--ivory); }
::-webkit-scrollbar-thumb { background: var(--teal); border-radius: 3px; }

/* ══════════ NAV ══════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-wrap {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2rem; height: 76px;
}
.nav-brand {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
}
.nav-brand-logo {
  width: auto;
  height: 70px;
  max-width: 220px;
  max-height: 70px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
  display: block;
}
.nav-brand-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.nav-brand-main {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; font-weight: 700;
  color: #0a3d52; letter-spacing: 0.01em;
  line-height: 1.15;
}
.nav-brand-main span {
  color: var(--teal);
}
.nav-brand-sub {
  font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--teal);
  opacity: 0.8;
}
.nav-menu {
  display: flex; align-items: center; gap: 0.25rem;
  list-style: none;
}
.nav-menu li a {
  display: block;
  padding: 0.45rem 0.85rem;
  font-size: 16px; font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--bark);
  border-radius: 100px;
  transition: background 0.2s, color 0.2s;
  cursor: pointer;
}
.nav-menu li a:hover,
.nav-menu li a.active { background: var(--ivory); color: var(--deep); }
.nav-book {
  background: #0ea8c4 !important;
  color: white !important;
  padding: 0.5rem 1.3rem !important;
  border-radius: 100px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  transition: background 0.2s, transform 0.2s !important;
}

.nav-menu li a.active {
    background: var(--ivory) !important;
    color: var(--deep) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--deep) !important; /* Matches the text color */
    text-underline-offset: 6px; /* Adds a nice gap between text and line */
    font-weight: 600;
}

.nav-book:hover { background: var(--deep) !important; transform: translateY(-1px) !important; }
.burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; }
.burger span { width: 22px; height: 2px; background: linear-gradient(135deg,#062535,#0e3d52); display: block; border-radius: 2px; transition: 0.3s; }



/* ══════════ UTILITY ══════════ */
.container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }
.section { padding: 5.5rem 2rem; }
.section-sm { padding: 3.5rem 2rem; }
.pt-nav { padding-top: 76px; }

.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #0ea8c4; margin-bottom: 1rem;
}
.chip::before {
  content: ''; display: block;
  width: 28px; height: 2px;
  background: #f0832a; border-radius: 1px;
}

.headline {
  font-size: clamp(2.2rem, 4vw, 3.6rem);
  font-weight: 700; color: #062535;
  line-height: 1.15; margin-bottom: 1.25rem;
}
.headline em { font-style: italic; color: #0ea8c4; }
.headline-light { color: white; }
.headline-light em { color: var(--aqua); }

.lead {
  font-size: 17px; color: #2a5a70;
  line-height: 1.85; max-width: 560px;
}
.lead-white { color: rgba(255,255,255,0.88); }

/* ══════════ BUTTONS ══════════ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 2rem;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: none; border-radius: 100px;
  cursor: pointer; transition: all 0.25s;
  text-decoration: none;
}
.btn-teal { background: #0ea8c4; color: white; }
.btn-teal:hover { background: #0a3d52; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(42,111,127,0.35); }
.btn-amber { background: #f0832a; color: white; }
.btn-amber:hover { background: #be7d48; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(212,145,90,0.35); }
.btn-outline {
  background: transparent; color: var(--teal);
  border: 1.5px solid var(--teal);
}
.btn-outline:hover { border-color: var(--deep); background: var(--ivory); color: var(--deep); }
.btn-outline-dark {
  background: transparent; color: var(--teal);
  border: 1.5px solid var(--teal);
}
.btn-outline-dark:hover { background: var(--teal); color: white; }

/* ══════════ ACCEPTING BANNER ══════════ */
.banner {
  background: #0a7d96;
  color: white; text-align: center;
  padding: 0.75rem 2rem;
  font-size: 14px; font-weight: 350;
  letter-spacing: 0.02em;
}
.banner strong { color: var(--amber2); }
.banner a { color: #ffd199; text-decoration: underline; text-underline-offset: 3px; margin-left: 0.75rem; font-weight: 600; cursor: pointer; }

/* ══════════ HERO SLIDESHOW ══════════ */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* Slideshow layers */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}
.hero-slide.active {
  opacity: 1;
}

/* Dark overlay for text legibility */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 30, 45, 0.62) 0%,
    rgba(8, 30, 45, 0.50) 60%,
    rgba(8, 30, 45, 0.70) 100%
  );
  z-index: 1;
}

/* Content sits above slides + overlay */
.hero-left {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 8rem 3.5rem 5rem;
  position: relative; z-index: 2;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}
.hero-left::before { display: none; }

/* Eyebrow — white on dark bg */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.75rem;
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.80); margin-bottom: 2rem;
  justify-content: center;
}
.hero-eyebrow span {
  display: inline-block;
  background: var(--amber); color: white;
  padding: 0.2rem 0.7rem; border-radius: 100px;
  font-size: 0.6rem; letter-spacing: 0.12em;
}

/* Title — white on dark bg */
.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.8rem, 4.5vw, 4.5rem);
  font-weight: 700; color: #ffffff;
  line-height: 1.1; margin-bottom: 1.75rem;
  position: relative;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.hero-title em { font-style: italic; color: var(--aqua); }
.hero-title .amber-word { color: var(--amber2); }

/* Body text — white on dark bg */
.hero-body {
  font-size: 17px; color: rgba(255,255,255,0.88);
  line-height: 1.85; max-width: 580px;
  margin-bottom: 2.5rem; position: relative;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25);
}

.hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; position: relative; justify-content: center; z-index: 2; }

/* Outline button variant for light-on-dark */
.btn-outline-light {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.65);
  padding: 0.8rem 1.75rem;
  border-radius: 100px;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s;
  cursor: pointer;
  display: inline-flex; align-items: center;
}
.btn-outline-light:hover {
  background: rgba(255,255,255,0.15);
  border-color: #ffffff;
}

/* Slide navigation dots */
.hero-dots {
  position: absolute;
  bottom: 2rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.6rem;
  z-index: 3;
}
.hero-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  border: none;
}
.hero-dot.active {
  background: #ffffff;
  transform: scale(1.25);
}

/* Keep old trust/right styles intact in case used elsewhere */
.hero-trust {
  display: flex; align-items: center; gap: 1.5rem;
  margin-top: 3rem; position: relative;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.trust-item { text-align: center; }
.trust-num {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem; font-weight: 700;
  color: #ffd199; line-height: 1;
}
.trust-label { font-size: 0.68rem; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; margin-top: 0.2rem; }
.trust-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.12); }
.hero-right {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 5rem 3rem 5rem 2rem;
  position: relative; z-index: 1;
  gap: 1.5rem;
}
.age-card {
  width: 100%; max-width: 340px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(77,216,240,0.25);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1.25rem;
  backdrop-filter: blur(8px);
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
  cursor: default;
}
.age-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(109,189,208,0.4);
  transform: translateX(-4px);
}
.age-card.featured {
  background: rgba(14,168,196,0.3);
  border-color: rgba(77,216,240,0.6);
}
.age-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.age-icon-child { background: rgba(234,188,150,0.25); }
.age-icon-teen  { background: rgba(109,189,208,0.2); }
.age-icon-adult { background: rgba(42,111,127,0.35); }
.age-icon-older { background: rgba(212,145,90,0.25); }
.age-label {
  font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #4dd8f0; margin-bottom: 0.15rem;
}
.age-desc { font-size: 17px; color: rgba(255,255,255,0.92); line-height: 1.4; }
.age-mens-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--amber); color: white;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.6rem; border-radius: 100px;
  margin-top: 0.3rem;
}

/* ══════════ SPECTRUM SECTION ══════════ */
.spectrum-section {
  background: linear-gradient(180deg,#f0fbff 0%,#e0f5fc 100%);
  padding: 5rem 2rem;
}
.spectrum-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}
.spectrum-card {
  background: #fafdff;
  border-radius: 20px;
  padding: 2.5rem 1.75rem;
  border: 1px solid rgba(14,143,168,0.18);
  position: relative; overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
  cursor: default;
}
.spectrum-card:hover {
  box-shadow: 0 20px 50px rgba(27,43,53,0.1);
  transform: translateY(-5px);
}
.spectrum-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 4px;
}
.sc-child::before  { background: linear-gradient(to right, #ff8c42, #ff5733); }
.sc-teen::before   { background: linear-gradient(to right, #00d4f5, #0096c7); }
.sc-adult::before  { background: linear-gradient(to right, #0ea8c4, #2dd6a0); }
.sc-senior::before { background: linear-gradient(to right, #b09cba, #d4b8d0); }
.sc-emoji { font-size: 2.2rem; margin-bottom: 1rem; }
.sc-age {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.sc-child .sc-age  { color: #ff5733; }
.sc-teen .sc-age   { color: #00a8d8; }
.sc-adult .sc-age  { color: var(--teal); }
.sc-senior .sc-age { color: #9d8189; }
.sc-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; font-weight: 700;
  color: #062535; margin-bottom: 0.75rem; line-height: 1.2;
}
.sc-body { font-size: 17px; color: #2a5a70; line-height: 1.75; margin-bottom: 1.25rem; }
.sc-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sc-tag {
  font-size: 14px; font-weight: 600;
  padding: 0.25rem 0.65rem; border-radius: 100px;
  letter-spacing: 0.06em;
}
.sc-child .sc-tag  { background: #fff0e8; color: #ff5733; }
.sc-teen .sc-tag   { background: #d6f4ff; color: #0096c7; }
.sc-adult .sc-tag  { background: #d6f4f9; color: var(--teal); }
.sc-senior .sc-tag { background: #f5f0f3; color: #9d8189; }

/* ══════════ MENS FEATURE ══════════ */
.mens-feature {
  background: linear-gradient(135deg, #062535 0%, #0e3d52 100%);
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
}
.mens-feature::before {
  content: '';
  position: absolute; top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(42,111,127,0.35) 0%, transparent 70%);
  pointer-events: none;
}
.mens-feature::after {
  content: '';
  position: absolute; bottom: -80px; left: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(212,145,90,0.2) 0%, transparent 70%);
  pointer-events: none;
}
.mens-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
  position: relative; z-index: 1;
}
.mens-pillars {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem; margin-top: 2.5rem;
}
.pillar {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(77,216,240,0.2);
  border-radius: 16px; padding: 1.5rem;
  transition: background 0.3s, border-color 0.3s;
}
.pillar:hover { background: rgba(109,189,208,0.1); border-color: rgba(109,189,208,0.3); }
.pillar-icon { font-size: 1.6rem; margin-bottom: 0.6rem; }
.pillar-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700;
  color: #e8fbff; margin-bottom: 0.3rem;
}
.pillar-body { font-size: 17px; color: rgba(255,255,255,0.78); line-height: 1.6; }

.mens-quote {
  position: relative;
  padding: 2.5rem;
  background: rgba(14,168,196,0.2);
  border-left: 4px solid #1aafcc;
  border-radius: 0 16px 16px 0;
  margin-top: 2rem;
}
.mens-quote-text {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem; font-style: italic;
  color: white; line-height: 1.55;
  margin-bottom: 0.75rem;
}
.mens-quote-attr { font-size: 17px; color: var(--aqua); font-weight: 500; letter-spacing: 0.06em; }

/* ══════════ SERVICES ══════════ */
.services-section { background: #ffffff; padding: 5.5rem 2rem; }
.services-intro {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: center; margin-bottom: 4rem;
}
.services-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.svc-card {
  background: #ffffff;
  border: 1px solid rgba(14,143,168,0.18);
  border-radius: 20px; padding: 2rem;
  transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
  position: relative; overflow: hidden;
  cursor: default;
}
.svc-card:hover {
  box-shadow: 0 16px 48px rgba(27,43,53,0.09);
  transform: translateY(-4px); border-color: var(--mist);
}
.svc-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.5rem; font-weight: 700;
  color: var(--stone); line-height: 1;
  position: absolute; top: 1.5rem; right: 1.5rem;
}
.svc-icon { font-size: 1.8rem; margin-bottom: 1rem; }
.svc-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; font-weight: 700;
  color: var(--deep); margin-bottom: 0.5rem; line-height: 1.25;
}
.svc-body { font-size: 16px; color: #2a5a70; line-height: 1.75; }
.svc-dur {
  display: inline-block; margin-top: 0.5rem;
  font-size: 12px; font-weight: 400;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #0ea8c4; background: rgba(14,168,196,0.1);
  padding: 0.25rem 0.75rem; border-radius: 100px;
}
.svc-card.featured-svc {
  background: linear-gradient(135deg,#062535,#0e3d52); border-color: var(--deep);
}
.svc-card.featured-svc .svc-name { color: white; }
.svc-card.featured-svc .svc-body { color: rgba(255,255,255,0.65); }
.svc-card.featured-svc .svc-num { color: rgba(255,255,255,0.08); }
.svc-card.featured-svc .svc-dur { background: rgba(109,189,208,0.2); color: var(--aqua); }

/* ══════════ CONDITIONS ══════════ */
.conditions-section { background: #e8f7fc; padding: 5.5rem 2rem; }
.conditions-layout {
  display: grid; grid-template-columns: 1fr 2fr;
  gap: 4rem; align-items: start;
}
.conditions-sticky { position: sticky; top: 96px; }
.conditions-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.cond-tile {
  background: #f5fbfd;
  border: 1px solid rgba(14,143,168,0.18);
  border-radius: 12px; padding: 1.1rem;
  display: flex; align-items: center; gap: 0.75rem;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  cursor: default;
}
.cond-tile:hover {
  background: #e8f7fc; border-color: var(--teal);
  transform: scale(1.02);
}
.cond-tile-icon { font-size: 1.2rem; flex-shrink: 0; }
.cond-tile-name { font-size: 17px; font-weight: 500; color: #062535; line-height: 1.3; }

/* ══════════ ABOUT ══════════ */
.about-section { background: #ffffff; padding: 5.5rem 2rem; }
.about-layout {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: 5rem; align-items: center;
}
.about-photo-wrap { position: relative; }
.about-photo {
  background: linear-gradient(160deg, #0ea8c4 0%, #062535 100%);
  border-radius: 28px; aspect-ratio: 3/4;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.75rem; color: rgba(255,255,255,0.4);
  font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.about-photo svg { width: 72px; height: 72px; opacity: 0.35; }
.about-floating {
  position: absolute;
  bottom: -1.5rem; right: -1.5rem;
  background: white; border-radius: 16px;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 12px 40px rgba(27,43,53,0.12);
  min-width: 180px;
}
.af-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.3rem; }
.af-val { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--deep); line-height: 1.3; }
.about-creds {
  display: flex; flex-direction: column; gap: 0.65rem;
  margin: 2rem 0;
}
.about-cred {
  display: flex; align-items: flex-start; gap: 0.75rem;
  font-size: 17px; color: #2a5a70; line-height: 1.5;
}
.about-cred::before {
  content: ''; display: block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #0ea8c4; flex-shrink: 0;
  margin-top: 0.45em;
}
.about-pullquote {
  border-left: 3px solid #f0832a;
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  background: var(--ivory); border-radius: 0 12px 12px 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; font-style: italic;
  color: var(--deep); line-height: 1.55;
}

/* ══════════ NEW PATIENTS ══════════ */
.patients-section { background: #ffffff; padding: 5.5rem 2rem; }
.patients-layout {
  display: grid; grid-template-columns: 1.3fr 1fr;
  gap: 4rem; align-items: start;
}
.steps { display: flex; flex-direction: column; gap: 0; margin-top: 2rem; }
.step-row {
  display: flex; gap: 1.5rem;
  padding-bottom: 2rem;
  position: relative;
}
.step-row:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 19px; top: 40px; bottom: 0;
  width: 2px; background: var(--stone); border-radius: 1px;
}
.step-circle {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #0ea8c4, #0a7d96); color: white;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700;
  flex-shrink: 0; position: relative; z-index: 1;
}
.step-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; font-weight: 700;
  color: var(--deep); margin-bottom: 0.3rem; margin-top: 0.45rem;
}
.step-body { font-size: 17px; color: #2a5a70; line-height: 1.75; }
.info-panel {
  background: linear-gradient(160deg, #062535, #0e3d52); border-radius: 24px;
  padding: 2.5rem; color: white;
  position: sticky; top: 96px;
}
.info-panel h3 { font-size: 1.4rem; font-weight: 500; color: white; margin-bottom: 0.25rem; }
.info-divider { width: 40px; height: 2px; background: #f0832a; margin: 1.25rem 0; border-radius: 1px; }
.info-row { padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.info-row:last-of-type { border-bottom: none; }
.info-lbl { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aqua); margin-bottom: 0.2rem; }
.info-val { font-size: 17px; color: rgba(255,255,255,0.95); line-height: 1.5; }
.emergency-note {
  margin-top: 1.5rem;
  background: rgba(212,145,90,0.18);
  border: 1px solid rgba(212,145,90,0.3);
  border-radius: 10px; padding: 0.9rem 1.1rem;
  font-size: 17px; color: var(--amber2);
  line-height: 1.6;
}

/* ══════════ TELEHEALTH ══════════ */
.telehealth-section {
  background: linear-gradient(135deg, #0a7d96 0%, #062535 100%);
  padding: 5.5rem 2rem; text-align: center;
  position: relative; overflow: hidden;
}
.telehealth-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 30px 30px;
}
.telehealth-inner { max-width: 820px; margin: 0 auto; position: relative; z-index: 1; }
.tele-features {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin: 3rem 0;
}
.tele-feat {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 16px; padding: 1.75rem 1rem;
  backdrop-filter: blur(8px);
  transition: background 0.3s;
}
.tele-feat:hover { background: rgba(255,255,255,0.16); }
.tele-icon { font-size: 1.8rem; margin-bottom: 0.75rem; }
.tele-label { font-size: 17px; color: white; font-weight: 500; margin-bottom: 0.25rem; }
.tele-sub { font-size: 17px; color: rgba(255,255,255,0.55); }

/* ══════════ TESTIMONIALS ══════════ */
.testimonials-section { background: #e8f7fc; padding: 5.5rem 2rem; }
.test-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 3.5rem;
}
.test-card {
  background: #fafdff; border-radius: 20px;
  padding: 2rem; border: 1px solid rgba(14,143,168,0.18);
  transition: box-shadow 0.3s, transform 0.3s;
}
.test-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.test-stars { color: var(--amber); font-size: 0.75rem; letter-spacing: 0.15em; margin-bottom: 1rem; }
.test-mark {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem; color: var(--stone);
  line-height: 0.5; margin-bottom: 1rem;
}
.test-text { font-size: 17px; color: #2a5a70; line-height: 1.8; font-style: italic; margin-bottom: 1.25rem; }
.test-author { display: flex; align-items: center; gap: 0.75rem; }
.test-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, #0ea8c4, #0a7d96); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
}
.test-name { font-size: 17px; font-weight: 600; color: var(--deep); }
.test-role { font-size: 17px; color: var(--bark); }

/* ══════════ FAQ ══════════ */
.faq-section { background: #ffffff; padding: 5.5rem 2rem; }
.faq-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; }
.faq-sticky { position: sticky; top: 96px; }
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-bottom: 1px solid rgba(14,143,168,0.15);
  cursor: pointer; transition: background 0.2s;
}
.faq-item:first-child { border-top: 1px solid var(--stone); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 0; gap: 1rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--deep); line-height: 1.3;
}
.faq-q:hover { color: var(--teal); }
.faq-toggle {
  width: 28px; height: 28px; border-radius: 50%;
  background: #e0f5fc;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--teal); flex-shrink: 0;
  font-weight: 300; transition: background 0.2s, transform 0.3s;
}
.faq-item.open .faq-toggle { background: #0ea8c4; color: white; transform: rotate(45deg); }
.faq-a {
  font-size: 17px; color: #2a5a70; line-height: 1.85;
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s;
}
.faq-item.open .faq-a { max-height: 500px; padding-bottom: 1.4rem; }

/* ══════════ CONTACT ══════════ */
/* ══════════ CONTACT ══════════ */
.contact-section { background: #fffffa; padding: 5.5rem 2rem; }
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.contact-section .chip { color: var(--teal); }
.contact-section .chip::before { background: var(--amber); }

/* Headings override for light background */
.contact-section .headline-light { color: #062535; }
.contact-section .headline-light em { color: var(--teal); }

/* Lead text override for light background */
.contact-section .lead-white { color: #2a5a70; }

.c-details { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; }
.c-detail { display: flex; gap: 1rem; align-items: flex-start; }
.c-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(14,143,168,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.c-lbl { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin-bottom: 0.2rem; }
.c-val { font-size: 17px; color: #062535; line-height: 1.55; }
.c-val a { color: var(--amber); }

.contact-form-wrap {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(14,143,168,0.25);
  border-radius: 24px; padding: 2.5rem;
}
.contact-form-wrap h3 { font-size: 1.4rem; font-weight: 500; color: #062535; margin-bottom: 1.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.fg { margin-bottom: 1rem; }
.fg label {
  display: block; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--teal); margin-bottom: 0.4rem;
}
.fg input, .fg select, .fg textarea {
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(14,143,168,0.3);
  border-radius: 10px; padding: 0.8rem 1rem;
  font-family: 'Outfit', sans-serif;
  font-size: 17px; color: #062535; outline: none;
  transition: border-color 0.2s;
}
.fg input::placeholder, .fg textarea::placeholder { color: rgba(6,37,53,0.35); }
.fg select option { background: #ffffff; color: #062535; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--teal); }
.fg textarea { resize: vertical; min-height: 90px; }
/* ══════════ RESOURCES ══════════ */
.resources-section { background: #ffffff; padding: 5.5rem 2rem; }
.resources-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; margin-top: 3.5rem;
}
.res-card {
  background: #fafdff; border-radius: 20px;
  overflow: hidden; border: 1px solid rgba(14,143,168,0.18);
  transition: box-shadow 0.3s, transform 0.3s;
  cursor: pointer;
}
.res-card:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.res-header {
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem; position: relative; overflow: hidden;
}
.res-header.rc1 { background: linear-gradient(135deg, #0ea8c4, #0a3d52); }
.res-header.rc2 { background: linear-gradient(135deg, #f0832a, #c05a10); }
.res-header.rc3 { background: linear-gradient(135deg, #00d4f5, #0ea8c4); }
.res-header.rc4 { background: linear-gradient(135deg, #2dd6a0, #0ea8c4); }
.res-header.rc5 { background: linear-gradient(135deg, #b09cba, #7a5a8a); }
.res-header.rc6 { background: linear-gradient(135deg, #ff5733, #f0832a); }
.res-body { padding: 1.5rem; }
.res-tag { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #0ea8c4; margin-bottom: 0.4rem; }
.res-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--deep); margin-bottom: 0.5rem; line-height: 1.3;
}
.res-excerpt { font-size: 17px; color: #2a5a70; line-height: 1.7; }
.res-more {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 0.75rem; font-size: 0.75rem;
  font-weight: 600; color: var(--teal); text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ══════════ FOOTER ══════════ */
footer { background: #005f70; padding: 4rem 2rem 2rem; }
.footer-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem; margin-bottom: 3rem;
}
.footer-brand-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; font-weight: 700; color: #ffffff; line-height: 1.2;
}
.footer-brand-sub { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: #fdfffe; margin-bottom: 1rem; }
.footer-desc { font-size: 15px; color: #ffffff; line-height: 1.8; margin-bottom: 1rem; }
.footer-emer {
  background: #a2fcc014;
  border: 1px solid #ffffff15;
  border-radius: 10px; padding: 0.75rem 1rem;
  font-size: 15px; color: #ffffff; line-height: 1.6;
}
.footer-col h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #ffffff; margin-bottom: 1.25rem;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a {
  font-size: 15px; color: #eaffc9;
  transition: color 0.2s; cursor: pointer;
}
.footer-links a:hover { color: hsl(78, 100%, 90%); }
.footer-bottom {
  max-width: 1280px; margin: 0 auto;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.952);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.75rem; color: #ffffff;
}
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: #ffffff; transition: color 0.2s; }
.footer-legal a:hover { color: #0f3d20; }

/* ══════════ PAGE HERO (inner pages) ══════════ */
.page-hero {
  background: linear-gradient(135deg, #062535 0%, #0f4d6a 100%);
  padding: 7rem 2rem 4rem;
  position: relative; overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(to right, #0ea8c4, #f0832a);
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ══════════ BOOKING PAGE ══════════ */
.booking-section { background: linear-gradient(160deg, #062535 0%, #0e3d52 100%); padding: 5.5rem 2rem; }
.booking-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; }
.booking-form-wrap {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(77,216,240,0.2);
  border-radius: 24px; padding: 2.5rem;
}
.booking-form-wrap h3 { font-size: 1.4rem; font-weight: 500; color: white; margin-bottom: 0.5rem; }
.booking-form-wrap p { font-size: 13px; color: #2a5a70; margin-bottom: 1.75rem; }
.booking-section .fg label { color: var(--aqua); }
.booking-section .fg input,
.booking-section .fg select,
.booking-section .fg textarea {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(77,216,240,0.25);
  color: white;
}
.booking-section .fg input::placeholder,
.booking-section .fg textarea::placeholder { color: rgba(255,255,255,0.3); }
.booking-section .fg select option { background: #062535; color: white; }
.booking-section .fg input:focus,
.booking-section .fg select:focus,
.booking-section .fg textarea:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(77,216,240,0.12); }
.booking-side { color: white; }
.booking-why { display: flex; flex-direction: column; gap: 1.25rem; margin: 2rem 0; }
.booking-why-item {
  display: flex; gap: 1rem; align-items: flex-start;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(77,216,240,0.12);
  border-radius: 14px; padding: 1.1rem 1.25rem;
}
.booking-why-icon { font-size: 1.5rem; flex-shrink: 0; }
.booking-why-title { font-size: 17px; font-weight: 600; color: white; margin-bottom: 0.15rem; }
.booking-why-body { font-size: 17px; color: rgba(255,255,255,0.65); line-height: 1.6; }
.form-success {
  display: none;
  background: rgba(45,214,160,0.15);
  border: 1px solid rgba(45,214,160,0.35);
  border-radius: 16px; padding: 2rem;
  text-align: center; color: white;
}
.form-success .success-icon { font-size: 2.5rem; margin-bottom: 0.75rem; }
.form-success h4 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; }
.form-success p { font-size: 17px; color: rgba(255,255,255,0.7); line-height: 1.7; }

/* ══════════ ANIMATIONS ══════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fade-up { animation: fadeUp 0.8s ease both; }
.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.24s; }
.delay-3 { animation-delay: 0.36s; }

/* ══════════ RESPONSIVE BASE (≤ 900px) ══════════
   Shared rules for both tablet and mobile.
   More specific overrides live in the 601–900px
   and ≤600px blocks further below.
   ════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .nav-menu { display: none; }
  .burger { display: flex; }
  .hero-right { display: none; }
  .mens-inner { grid-template-columns: 1fr; }
  .services-intro { grid-template-columns: 1fr; }
  .conditions-layout { grid-template-columns: 1fr; }
  .conditions-sticky { position: static; }
  .about-layout { grid-template-columns: 1fr; }
  .about-floating { display: none; }
  .patients-layout { grid-template-columns: 1fr; }
  .info-panel { position: static; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-sticky { position: static; }
  .contact-layout { grid-template-columns: 1fr; }
  .booking-layout { grid-template-columns: 1fr; }
  .footer-bottom { flex-wrap: wrap; gap: 0.75rem; }
}

/* ══════════════════════════════════════
   GLOBAL 17px OVERRIDE , ALL PAGES
   Overrides inline style="font-size:..."
   on all body/paragraph/description text.
   Headings (h1–h4, .headline) are excluded.
   ══════════════════════════════════════ */

/* All paragraphs site-wide */
p { font-size: 17px !important; }

/* All plain divs used as body text (services, about, contact, policy pages) */
.page div[style*="font-size:1rem"],
.page div[style*="font-size: 1rem"],
.page div[style*="font-size:0.9rem"],
.page div[style*="font-size: 0.9rem"],
.page div[style*="font-size:0.85rem"],
.page div[style*="font-size: 0.85rem"],
.page div[style*="font-size:0.82rem"],
.page div[style*="font-size: 0.82rem"],
.page div[style*="font-size:0.8rem"],
.page div[style*="font-size: 0.8rem"],
.page div[style*="font-size:0.88rem"],
.page div[style*="font-size: 0.88rem"],
.page div[style*="font-size:0.95rem"],
.page div[style*="font-size: 0.95rem"] {
  font-size: 17px !important;
}

/* Policy pages , inline <style> block classes */
.doc-body, .doc-section p, .doc-section li,
.doc-section td, .doc-section th,
.doc-p, .doc-li, .doc-text,
.policy-body p, .policy-body li,
.policy-section p, .policy-section li { font-size: 17px !important; }

/* Table cells on contact/policy pages */
table td, table th { font-size: 17px !important; }

/* Inline-styled spans used as body copy (not badges/chips/labels) */
.page p span[style*="font-size:0.9rem"],
.page p span[style*="font-size:0.85rem"],
.page p span[style*="font-size:0.82rem"],
.page p span[style*="font-size:0.8rem"] { font-size: 17px !important; }

/* About page value cards */
.af-val { font-size: 17px !important; }

/* Services page checklist items */
.page div[style*="font-size:0.85rem"][style*="display:flex"] { font-size: 17px !important; }

/* Booking & contact info blocks */
.page div[style*="font-size:0.8rem"],
.page div[style*="font-size:0.85rem"],
.page div[style*="font-size:0.88rem"] { font-size: 17px !important; }

/* Policy pages , their own <style> block declarations are inline;
   target the text containers directly */
.hipaa-content p, .hipaa-content li,
.privacy-content p, .privacy-content li,
.nondiscrimination-content p, .nondiscrimination-content li,
.accessibility-content p, .accessibility-content li { font-size: 17px !important; }


/* ══════════════════════════════════════
   POLICY PAGES , Override internal <style> blocks
   (hipaa-notice, privacy-policy, nondiscrimination, accessibility)
   ══════════════════════════════════════ */
.legal-container p,
.legal-container li,
.legal-highlight,
.legal-quote,
.right-card p,
.policy-meta,
.effective-date,
.contact-policy,
.acknowledgment-line,
.policy-footer-note p { font-size: 17px !important; }

/* Services page , checklist items and body paragraphs */
.page section p[style],
.page div[style*="font-size:1rem"] p,
.page div[style*="font-size: 1rem"] p { font-size: 17px !important; }

/* About page , values card paragraphs */
.page div[style*="grid-template-columns"] p { font-size: 17px !important; }

/* Contact page , address/hours text blocks */
.page div[style*="font-size:0.9rem"]:not([style*="letter-spacing"]),
.page div[style*="font-size:0.82rem"]:not([style*="letter-spacing"]) { font-size: 17px !important; }

/* Booking page , info/body text */
.booking-section p,
.booking-section div[style*="font-size:0.88rem"],
.booking-section div[style*="font-size:0.85rem"],
.booking-section div[style*="font-size:0.8rem"] { font-size: 17px !important; }


/* ══════════ FOOTER & HEADER , 16px override ══════════ */
footer p, footer li, footer a, footer span,
footer .footer-desc, footer .footer-emer,
footer .footer-links a, footer .footer-bottom,
footer .footer-legal a { font-size: 15px !important; color: #ffffff; }
footer .footer-brand-name { color: #ffffff !important; }
footer .footer-brand-sub { color: #ffffff !important; }
footer .footer-emer { color: #cfffbd !important; }
footer .footer-col h4 { color: #ffffff !important; }
footer .footer-legal a { color: #ffffff !important; }

nav .nav-menu li a,
nav .nav-book { font-size: 15px !important; }

/* ══════════════════════════════════════════════════════════════
   COMPREHENSIVE RESPONSIVE SYSTEM
   Resilience Mental Health & Men's Wellness LLC
   Breakpoints:
     • Large desktop  > 1280px
     • Desktop        901px – 1280px  (base styles)
     • Tablet         601px – 900px
     • Mobile         320px – 600px
   ══════════════════════════════════════════════════════════════ */

/* ── TABLET (601–900px) ─────────────────────────────────────── */
@media (min-width: 601px) and (max-width: 900px) {

  /* ── Base ── */
  .container { padding: 0 1.5rem; }
  body { font-size: 16px; }

  /* ── Nav ── */
  .nav-wrap { padding: 0 1.5rem; height: 70px; }
  .nav-brand-logo { height: 56px; }
  .nav-menu { display: none; }
  .burger { display: flex; }

  /* ── Banner ── */
  .banner { font-size: 13px; padding: 0.6rem 1rem; margin-top: 70px; }

  /* ── Locations bar ── */
  #page-index > div[style*="background:#e0f5fb"],
  body > div[style*="background:#e0f5fb"] {
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.72rem;
    padding: 0.5rem 1rem;
    justify-content: center;
  }

  /* ── Hero ── */
  .hero { min-height: 90vh; }
  .hero-left { padding: 6rem 2rem 4rem; }
  .hero-title { font-size: clamp(2.2rem, 5vw, 3rem); }
  .hero-body { font-size: 15px !important; }
  .hero-btns { gap: 0.75rem; }
  .hero-btns .btn { padding: 0.75rem 1.5rem; font-size: 0.75rem; }

  /* ── Spectrum ── */
  .spectrum-section { padding: 3.5rem 1.5rem; }
  .spectrum-grid { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
  .spectrum-card { padding: 2rem 1.5rem; }

  /* ── Men's Feature ── */
  .mens-feature { padding: 4rem 1.5rem; }
  .mens-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .mens-pillars { grid-template-columns: 1fr 1fr; gap: 0.85rem; margin-top: 2rem; }
  .pillar { padding: 1.25rem; }
  .mens-quote { padding: 1.75rem; }
  .mens-quote-text { font-size: 1.15rem; }

  /* ── Services ── */
  .services-section { padding: 3.5rem 1.5rem; }
  .services-intro { grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 2.5rem; }
  .services-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .svc-card { padding: 1.75rem 1.5rem; }

  /* ── Conditions ── */
  .conditions-section { padding: 3.5rem 1.5rem; }
  .conditions-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .conditions-sticky { position: static; }
  .conditions-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .cond-tile { padding: 0.85rem 1rem; }
  .cond-tile-name { font-size: 14px !important; }

  /* ── Telehealth ── */
  .telehealth-section { padding: 4rem 1.5rem; }
  .tele-features { grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
  .tele-feat { padding: 1.5rem 0.85rem; }

  /* ── Testimonials ── */
  .testimonials-section { padding: 3.5rem 1.5rem; }
  .test-grid { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
  .test-card { padding: 1.5rem; }

  /* ── About ── */
  .about-section { padding: 4rem 1.5rem; }
  .about-layout { grid-template-columns: 1fr; gap: 3rem; }
  .about-photo-wrap { max-width: 400px; margin: 0 auto; }
  .about-floating { display: none; }

  /* ── FAQ ── */
  .faq-section { padding: 4rem 1.5rem; }
  .faq-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .faq-sticky { position: static; margin-bottom: 0; }

  /* ── Resources ── */
  .resources-section { padding: 3.5rem 1.5rem; }
  .resources-grid { grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }

  /* ── New Patients ── */
  .patients-section { padding: 4rem 1.5rem; }
  .patients-layout { grid-template-columns: 1fr; gap: 3rem; }
  .info-panel { position: static; }

  /* ── Contact ── */
  .contact-section { padding: 4rem 1.5rem; }
  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  .contact-form-wrap { padding: 2rem; }

  /* ── Booking ── */
  .booking-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .booking-form-wrap { padding: 2rem; }
  .form-row { grid-template-columns: 1fr 1fr; }

  /* ── Footer ── */
  footer { padding: 3rem 1.5rem 1.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.75rem; font-size: 0.72rem; }
  .footer-legal { flex-wrap: wrap; gap: 1rem; }

  /* ── Services page cards ── */
  #page-services section > .container > div > div[style*="grid-template-columns:240px"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Page hero ── */
  .page-hero { padding: 5.5rem 1.5rem 3rem; }
  .page-hero .headline { font-size: clamp(2rem, 5vw, 3rem); }

  /* ── Contact location cards ── */
  div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── MOBILE (≤ 600px) ────────────────────────────────────────── */
@media (max-width: 600px) {

  /* ── Base ── */
  html { font-size: 15px; }
  .container { padding: 0 1rem; }
  body { font-size: 15px; }

  /* ── Nav ── */
  nav { position: fixed; top: 0; left: 0; right: 0; z-index: 2000; }
  .nav-wrap { padding: 0 1rem; height: 64px; }
  .nav-brand-logo { height: 48px; max-width: 160px; }
  .nav-menu { display: none; }
  .burger { display: flex; }
  .pt-nav { padding-top: 64px; }

  /* ── Banner ── */
  .banner {
    margin-top: 64px;
    font-size: 12px;
    padding: 0.55rem 1rem;
    line-height: 1.5;
  }
  .banner br { display: none; }

  /* ── Locations bar ── */
  body > div[style*="background:#e0f5fb"],
  .banner + div[style*="background:#e0f5fb"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.3rem !important;
    padding: 0.6rem 1rem !important;
    font-size: 0.75rem !important;
  }
  body > div[style*="background:#e0f5fb"] > div[style*="width:1px"] {
    display: none !important;
  }

  /* ── Hero ── */
  .hero { min-height: 100svh; min-height: 100vh; }
  .hero-left {
    padding: 5rem 1.25rem 4rem;
    text-align: center;
    align-items: center;
  }
  .hero-eyebrow {
    font-size: 0.6rem;
    flex-direction: column;
    gap: 0.4rem;
    text-align: center;
    margin-bottom: 1.25rem;
  }
  .hero-title {
    font-size: clamp(2rem, 8vw, 2.8rem);
    margin-bottom: 1.25rem;
    text-align: center;
  }
  .hero-body {
    font-size: 14px !important;
    text-align: center;
    margin-bottom: 2rem;
    max-width: 100%;
  }
  .hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
  }
  .hero-btns .btn,
  .hero-btns .btn-outline-light {
    width: 100%;
    max-width: 320px;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    font-size: 0.78rem;
  }
  .hero-dots { bottom: 1.25rem; }

  /* ── Headline sizes ── */
  .headline {
    font-size: clamp(1.75rem, 7vw, 2.4rem);
    margin-bottom: 1rem;
  }
  .page-hero .headline { font-size: clamp(1.85rem, 7.5vw, 2.6rem); }
  h1.headline { font-size: clamp(2rem, 8vw, 2.8rem); }

  /* ── Lead text ── */
  .lead { font-size: 15px !important; line-height: 1.75; max-width: 100%; }

  /* ── Chip ── */
  .chip { font-size: 0.6rem; letter-spacing: 0.14em; }

  /* ── Buttons ── */
  .btn { padding: 0.8rem 1.6rem; font-size: 0.75rem; }

  /* ── Spectrum ── */
  .spectrum-section { padding: 3rem 1rem; }
  .spectrum-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 2rem;
  }
  .spectrum-card { padding: 1.75rem 1.25rem; }
  .sc-emoji { font-size: 1.8rem; }
  .sc-name { font-size: 1.15rem; }
  .sc-body { font-size: 14px !important; }
  .sc-tag { font-size: 12px !important; }

  /* ── Men's Feature ── */
  .mens-feature { padding: 3rem 1rem; }
  .mens-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .mens-pillars { grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1.5rem; }
  .pillar { padding: 1rem; }
  .pillar-icon { font-size: 1.3rem; }
  .pillar-title { font-size: 0.9rem; }
  .pillar-body { font-size: 13px !important; }
  .mens-quote { padding: 1.5rem; margin-top: 1.5rem; }
  .mens-quote-text { font-size: 1.05rem; }
  .mens-quote-attr { font-size: 13px !important; }

  /* ── Services section (home) ── */
  .services-section { padding: 3rem 1rem; }
  .services-intro {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .services-grid { grid-template-columns: 1fr; gap: 1rem; }
  .svc-card { padding: 1.5rem; }
  .svc-num { font-size: 2rem; }
  .svc-name { font-size: 1.1rem; }
  .svc-body { font-size: 14px !important; }

  /* ── Conditions ── */
  .conditions-section { padding: 3rem 1rem; }
  .conditions-layout { grid-template-columns: 1fr; gap: 2rem; }
  .conditions-sticky { position: static; }
  .conditions-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .cond-tile { padding: 0.75rem; gap: 0.5rem; }
  .cond-tile-icon { font-size: 1rem; }
  .cond-tile-name { font-size: 13px !important; line-height: 1.2; }

  /* ── Telehealth ── */
  .telehealth-section { padding: 3rem 1rem; }
  .telehealth-inner { max-width: 100%; }
  .tele-features {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    margin: 2rem 0;
  }
  .tele-feat { padding: 1.25rem 1rem; display: flex; align-items: center; gap: 1rem; text-align: left; }
  .tele-icon { font-size: 1.5rem; flex-shrink: 0; margin-bottom: 0; }
  .tele-label { font-size: 15px !important; }
  .tele-sub { font-size: 13px !important; }

  /* ── Testimonials ── */
  .testimonials-section { padding: 3rem 1rem; }
  .test-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  .test-card { padding: 1.5rem; }
  .test-mark { font-size: 2.8rem; }
  .test-text { font-size: 14px !important; }
  .test-name { font-size: 15px !important; }
  .test-role { font-size: 13px !important; }

  /* ── About ── */
  .about-section { padding: 3rem 1rem; }
  .about-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-photo-wrap { max-width: 320px; margin: 0 auto; }
  .about-floating { display: none; }
  .about-pullquote { font-size: 1.05rem; padding: 1rem 1.25rem; margin: 1.5rem 0; }
  .about-cred { font-size: 14px !important; }
  .about-creds { gap: 0.5rem; margin: 1.5rem 0; }
  /* Mission grid (3-col → 1-col) */
  .about-section div[style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ── Services page (detail cards 240px → stacked) ── */
  #page-services section > .container > div > div[style*="grid-template-columns:240px"],
  div[style*="grid-template-columns:240px 1fr"] {
    grid-template-columns: 1fr !important;
    padding: 1.5rem !important;
  }
  div[style*="grid-template-columns:240px 1fr"] > div:first-child {
    text-align: left !important;
  }
  /* checklist 2-col → 1-col inside service cards */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:0.4rem"] {
    grid-template-columns: 1fr !important;
  }

  /* ── FAQ ── */
  .faq-section { padding: 3rem 1rem; }
  .faq-layout { grid-template-columns: 1fr; gap: 2rem; }
  .faq-sticky { position: static; }
  .faq-q { font-size: 0.95rem; padding: 1.1rem 0; }
  .faq-a { font-size: 14px !important; }

  /* ── Resources ── */
  .resources-section { padding: 3rem 1rem; }
  .resources-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
  /* resources intro 2-col → 1-col */
  .resources-section > .container > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  .res-header { height: 120px; font-size: 2rem; }
  .res-title { font-size: 0.95rem; }
  .res-excerpt { font-size: 13px !important; }

  /* ── New Patients ── */
  .patients-section { padding: 3rem 1rem; }
  .patients-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .info-panel { position: static; padding: 2rem 1.5rem; border-radius: 20px; }
  .info-panel h3 { font-size: 1.2rem; }
  .info-lbl { font-size: 0.58rem; }
  .info-val { font-size: 14px !important; }
  .step-circle { width: 36px; height: 36px; font-size: 0.9rem; }
  .step-title { font-size: 1rem; }
  .step-body { font-size: 14px !important; }
  .step-row { gap: 1rem; }
  .step-row:not(:last-child)::after { left: 17px; top: 36px; }
  .emergency-note { font-size: 13px !important; }

  /* New patients accepting banner */
  div[style*="Now Accepting New Patients"] {
    font-size: 13px !important;
    padding: 0.85rem 1rem !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  /* ── Contact ── */
  .contact-section { padding: 3rem 1rem; }
  .contact-layout { grid-template-columns: 1fr; gap: 2rem; }
  .contact-form-wrap { padding: 1.5rem; border-radius: 20px; }
  .contact-form-wrap h3 { font-size: 1.2rem; }
  .c-details { gap: 1rem; margin-top: 1.5rem; }
  .c-icon { width: 38px; height: 38px; font-size: 1rem; }
  .c-lbl { font-size: 0.56rem; }
  .c-val { font-size: 14px !important; }
  .form-row { grid-template-columns: 1fr !important; }
  .fg input, .fg select, .fg textarea { font-size: 15px !important; padding: 0.75rem; }
  /* Contact location cards */
  .contact-section div[style*="grid-template-columns:1fr 1fr"],
  #page-contact div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  /* Hours summary bar */
  div[style*="justify-content:center"][style*="gap:3rem"] {
    flex-direction: column !important;
    gap: 0.75rem !important;
    align-items: flex-start !important;
    padding: 1.25rem !important;
  }
  div[style*="justify-content:center"][style*="gap:3rem"] > div[style*="width:1px"] {
    display: none !important;
  }

  /* ── Booking ── */
  .booking-layout { grid-template-columns: 1fr; gap: 2rem; }
  .booking-form-wrap { padding: 1.5rem; border-radius: 20px; }
  .booking-form-wrap h3 { font-size: 1.2rem; }
  .booking-why { gap: 0.75rem; margin: 1.5rem 0; }
  .booking-why-item { padding: 1rem; gap: 0.75rem; }
  .booking-why-icon { font-size: 1.2rem; }
  .booking-why-title { font-size: 14px !important; }
  .booking-why-body { font-size: 13px !important; }
  .stat-row { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .stat-num { font-size: 1.4rem; }
  .stat-lbl { font-size: 0.62rem; }
  .section-divider { font-size: 0.58rem; }
  .submit-btn { padding: 0.9rem 1.5rem; font-size: 0.8rem; }
  /* booking contact strip */
  .booking-layout + section > .container,
  section[style*="background:#052030"] .container {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }

  /* ── Page hero (inner pages) ── */
  .page-hero { padding: 4.5rem 1rem 2.5rem; }
  .page-hero .chip { font-size: 0.58rem; }
  .page-hero .headline { font-size: clamp(1.85rem, 7.5vw, 2.4rem); line-height: 1.15; }

  /* ── Testimonials page 2-col → 1-col ── */
  #page-testimonials div[style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* ── Footer ── */
  footer { padding: 2.5rem 1rem 1.5rem; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
    margin-bottom: 2rem;
  }
  .footer-brand-name { font-size: 1rem; }
  .footer-desc { font-size: 13px !important; }
  .footer-emer { font-size: 12px !important; padding: 0.65rem 0.85rem; }
  .footer-col h4 { font-size: 0.6rem; margin-bottom: 0.85rem; }
  .footer-links a { font-size: 13px !important; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.68rem;
    padding-top: 1.5rem;
  }
  .footer-legal { flex-wrap: wrap; gap: 0.75rem; }
  .footer-legal a { font-size: 0.68rem !important; }

  /* ── Policy / legal pages ── */
  .legal-container { padding: 1.5rem 1rem; border-radius: 16px; }
  .legal-container h1 { font-size: 1.5rem; }
  .legal-container h2 { font-size: 1.25rem; padding-left: 0.75rem; }
  .legal-container h3 { font-size: 1rem; }
  .legal-container p, .legal-container li { font-size: 14px !important; }
  .legal-highlight { padding: 1rem 1.25rem; font-size: 14px !important; }
  .privacy-hero, .policy-hero { padding: 5.5rem 1rem 3rem; }
  .privacy-footer-note { padding: 1.5rem 1rem; }

  /* ── Services page detail (checklist items label) ── */
  div[style*="grid-template-columns:1fr 1fr"][style*="gap:0.4rem"] > div {
    font-size: 13px !important;
  }

  /* ── GeneSight cost note ── */
  div[style*="background:var(--ivory)"][style*="border-radius:12px"] {
    font-size: 14px !important;
  }

  /* ── About page mission value cards ── */
  .about-section div[style*="grid-template-columns:repeat(3,1fr)"] > div {
    padding: 1.75rem 1.25rem !important;
  }

  /* ── Prevent horizontal overflow ── */
  img { max-width: 100%; height: auto; }
  table { width: 100%; }
  iframe { max-width: 100%; }

  /* ── Overflow scroll for tables ── */
  .rights-table, .nondiscrimination-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
  }
}

/* ── Small mobile (≤ 380px) ────────────────────────────────── */
@media (max-width: 380px) {
  .nav-brand-logo { height: 42px; max-width: 130px; }
  .hero-title { font-size: 1.85rem; }
  .headline { font-size: 1.65rem; }
  .mens-pillars { grid-template-columns: 1fr; }
  .conditions-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .btn { font-size: 0.72rem; padding: 0.75rem 1.2rem; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── Large desktop (> 1280px) ───────────────────────────────── */
@media (min-width: 1281px) {
  .container { padding: 0 3rem; }
  .hero-title { font-size: 4.5rem; }
  .headline { font-size: 3.6rem; }
  .spectrum-grid { grid-template-columns: repeat(4, 1fr); }
  .mens-pillars { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}

/* ── Touch device accessibility ─────────────────────────────── */
@media (hover: none) {
  .svc-card:hover,
  .spectrum-card:hover,
  .test-card:hover,
  .res-card:hover,
  .cond-tile:hover,
  .pillar:hover,
  .booking-why-item:hover {
    transform: none;
    box-shadow: none;
  }
  .btn:hover { transform: none; }
  .nav-book:hover { transform: none !important; }
}

/* ── Reduce motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero-slide { transition: none; }
}

/* ── Safe area insets (notched phones) ──────────────────────── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  footer {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
  }
  nav {
    padding-top: env(safe-area-inset-top);
  }
}

/* ── Mobile nav menu (burger open state) ────────────────────── */
@media (max-width: 900px) {
  /* When JS sets inline display:flex on mobile nav */
  #navMenu[style*="display:flex"] {
    top: 64px;
    padding: 1.25rem 1.25rem 1.5rem;
    gap: 0.25rem;
    box-shadow: 0 12px 40px rgba(6,37,53,0.12);
    border-bottom: 2px solid var(--stone);
  }
  #navMenu[style*="display:flex"] li a {
    font-size: 1rem !important;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    color: var(--deep);
  }
  #navMenu[style*="display:flex"] li a.nav-book {
    background: var(--teal) !important;
    color: white !important;
    text-align: center;
    margin-top: 0.25rem;
    display: block;
    border-radius: 100px !important;
    font-size: 0.9rem !important;
  }
  #navMenu[style*="display:flex"] li a:hover {
    background: var(--ivory) !important;
    color: var(--deep) !important;
  }
}