/* New Site — extracted from stuff/new templates. Base = homepage. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:      #08243A;
  --navy-mid:  #0D3354;
  --navy-lite: #134267;
  --blue:      #1A7EC8;
  --blue-lite: #3D9EE8;
  --blue-pale: #E8F4FD;
  --teal:      #0E7C6A;
  --teal-pale: #E5F5F2;
  --coral:     #C04A25;
  --coral-pale:#FBF0EB;
  --gold:      #C8960A;
  --gold-pale: #FEF8E8;
  --text-dark: #0D1E2B;
  --text-mid:  #3D5263;
  --text-lite: #6E8799;
  --border:    #D8E4EC;
  --surface:   #F4F8FB;
  --white:     #FFFFFF;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--text-dark);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── STICKY NAV ── */
.nav-wrapper {
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 16px rgba(8,36,58,.18);
}
nav {
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  height: 60px;
  gap: 16px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-mark {
  width: 32px; height: 32px;
  background: var(--blue);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #fff;
}
.nav-logo-text {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.btn-appt {
  background: var(--blue);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
  border: none;
  cursor: pointer;
}
.btn-appt:hover { background: var(--blue-lite); }

/* ── HERO ── */
.hero {
  background: linear-gradient(125deg, var(--navy) 0%, var(--navy-mid) 55%, #0F4E72 100%);
  padding: 60px 32px 52px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  right: -80px; top: -80px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,126,200,.14) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  left: 30%; bottom: -120px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14,124,106,.10) 0%, transparent 70%);
  pointer-events: none;
}
.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(126,200,240,.12);
  border: 1px solid rgba(126,200,240,.25);
  color: #7EC8F0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 20px;
}
.hero-eyebrow svg { width: 10px; height: 10px; fill: #7EC8F0; }
.hero h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 46px;
  font-weight: 500;
  color: #fff;
  line-height: 1.18;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.hero h1 em { font-style: normal; color: #7EC8F0; }
.hero-sub {
  color: rgba(255,255,255,.65);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 480px;
}
.hero-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-hero-primary {
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background .15s;
}
.btn-hero-primary:hover { background: var(--blue-lite); }
.btn-hero-ghost {
  color: #7EC8F0;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 20px;
  border: 1px solid rgba(126,200,240,.35);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color .15s, background .15s;
  display: flex; align-items: center; gap: 6px;
}
.btn-hero-ghost:hover { background: rgba(126,200,240,.08); border-color: rgba(126,200,240,.6); }
.hero-photo { position: relative; }
.hero-photo-frame {
  background: rgba(255,255,255,.06);
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: var(--radius-xl);
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.hero-photo-frame svg { width: 48px; height: 48px; opacity: .25; fill: #fff; }
.hero-photo-frame span { color: rgba(255,255,255,.3); font-size: 12px; text-align: center; }
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 32px;
}
.hero-stat { background: rgba(8,36,58,.4); padding: 14px 16px; text-align: center; }
.hero-stat-num { font-size: 22px; font-weight: 600; color: #fff; line-height: 1; margin-bottom: 3px; }
.hero-stat-label { font-size: 10px; color: rgba(255,255,255,.5); letter-spacing: .04em; }

/* ── TRUST BAR ── */
.trust-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 0 32px; }
.trust-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0;
  height: 64px;
}
.doctify-block {
  background: var(--navy);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  height: 100%;
  margin-right: 24px;
  flex-shrink: 0;
}
.doctify-stars { color: #F5C518; font-size: 14px; letter-spacing: 1px; }
.doctify-score { color: #fff; font-size: 18px; font-weight: 600; }
.doctify-label { color: rgba(255,255,255,.5); font-size: 10px; line-height: 1.3; }
.doctify-count { color: rgba(255,255,255,.7); font-size: 11px; }
.trust-divider { width: 1px; background: var(--border); height: 36px; margin: 0 20px; flex-shrink: 0; }
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-mid);
  white-space: nowrap;
  padding-right: 20px;
}
.trust-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.trust-item strong { color: var(--text-dark); font-weight: 500; }

/* ── SHARED SECTION STYLES ── */
.section { padding: 56px 32px; }
.section-inner { max-width: 1120px; margin: 0 auto; }
.section-alt { background: var(--white); }
.section-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.section-eyebrow.light { color: #7EC8F0; }
.section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--text-dark);
  line-height: 1.25;
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.section-title.light { color: #fff; }
.section-sub { font-size: 14px; color: var(--text-mid); line-height: 1.65; max-width: 560px; }
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
}
.see-all {
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.see-all:hover { text-decoration: underline; }
.arrow-right::after { content: ' →'; }

/* ── TREATMENTS ── */
.treatments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.treatment-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.treatment-card:hover { box-shadow: 0 8px 32px rgba(8,36,58,.10); transform: translateY(-2px); }
.treatment-accent { height: 4px; }
.acc-blue  { background: var(--blue); }
.acc-teal  { background: var(--teal); }
.acc-coral { background: var(--coral); }
.treatment-body { padding: 22px 20px; flex: 1; display: flex; flex-direction: column; }
.treatment-tag { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 10px; }
.tag-blue  { color: var(--blue); }
.tag-teal  { color: var(--teal); }
.tag-coral { color: var(--coral); }
.treatment-name {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 10px;
  line-height: 1.2;
}
.treatment-desc { font-size: 13px; color: var(--text-mid); line-height: 1.6; flex: 1; margin-bottom: 18px; }
.treatment-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.treatment-meta { font-size: 11px; color: var(--text-lite); }
.treatment-link { font-size: 12.5px; color: var(--blue); text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.treatment-link:hover { text-decoration: underline; }

/* ── CONDITIONS ── */
.conditions-section { background: var(--navy); }
.conditions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.condition-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  text-decoration: none;
}
.condition-card:hover { background: rgba(255,255,255,.1); border-color: rgba(126,200,240,.4); }
/* Sizes bumped from the template's 13/11px — client feedback: too small to read on navy */
.condition-name { font-size: 16px; font-weight: 500; color: #fff; margin-bottom: 6px; }
.condition-sub { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.55; }
.conditions-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.conditions-note { font-size: 13px; color: rgba(255,255,255,.5); }
.btn-conditions-all {
  background: rgba(26,126,200,.2);
  color: #7EC8F0;
  border: 1px solid rgba(26,126,200,.4);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .15s;
}
.btn-conditions-all:hover { background: rgba(26,126,200,.35); }

/* ── PATIENT STORY ── */
.story-grid { display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: center; }
.story-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
}
.story-kicker::before { content: ''; display: inline-block; width: 20px; height: 2px; background: var(--teal); }
.story-quote {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  color: var(--text-dark);
  line-height: 1.45;
  font-style: italic;
  margin-bottom: 18px;
  position: relative;
}
.story-quote::before {
  content: '\201C';
  font-size: 72px;
  color: var(--teal-pale);
  position: absolute;
  top: -16px; left: -12px;
  line-height: 1;
  z-index: 0;
  font-style: normal;
}
.story-quote span { position: relative; z-index: 1; }
.story-attribution { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.story-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--teal-pale);
  color: var(--teal);
  font-size: 14px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.story-name { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.story-detail { font-size: 12px; color: var(--text-lite); }
.story-actions { display: flex; gap: 12px; align-items: center; }
.btn-story {
  background: var(--teal);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background .15s;
}
.btn-story:hover { background: #0A6056; }
.link-story { font-size: 13px; color: var(--teal); text-decoration: none; font-weight: 500; }
.link-story:hover { text-decoration: underline; }

/* ── VIDEOS ── */
.videos-section { background: var(--surface); }

/* ── FOOTER ── */
footer { background: var(--navy); padding: 52px 32px 24px; }
.footer-inner { max-width: 1120px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 280px 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-logo-text { font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 8px; }
.footer-tagline { font-size: 12.5px; color: rgba(255,255,255,.45); line-height: 1.6; margin-bottom: 16px; }
.footer-col-title { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 14px; }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { font-size: 13px; color: rgba(255,255,255,.55); text-decoration: none; transition: color .15s; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-copy { font-size: 11.5px; color: rgba(255,255,255,.3); }
.footer-legal { display: flex; gap: 16px; }
.footer-legal a { font-size: 11.5px; color: rgba(255,255,255,.3); text-decoration: none; }
.footer-legal a:hover { color: rgba(255,255,255,.6); }
.footer-credit { font-size: 11px; color: rgba(255,255,255,.2); }

/* ── NAV TOGGLE (mobile menu button) ── */
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: #fff; margin: 4px 0; border-radius: 2px; transition: transform .2s, opacity .2s; }

@media (max-width: 860px) {
  .nav-toggle { display: flex; flex-direction: column; }
  .nav-links {
    display: none;
    position: fixed;
    top: 60px; left: 0; right: 0; bottom: 0;
    background: var(--navy);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 16px 24px 32px;
    overflow-y: auto;
    z-index: 800;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { font-size: 1rem; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); width: 100%; }
  .nav-right .btn-appt { display: none; }

  .hero-inner { grid-template-columns: 1fr; }
  .treatments-grid, .conditions-grid { grid-template-columns: repeat(2, 1fr); }
  .story-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .treatments-grid, .conditions-grid, .footer-top { grid-template-columns: 1fr; }
  .section, .hero { padding-left: 20px; padding-right: 20px; }
  nav { padding: 0 20px; }
}

/* ── VIDEO MODAL (shared) ── */
.ns-video-modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; background: rgba(8,36,58,.85); padding: 24px; }
.ns-video-modal.is-open { display: flex; }
.ns-video-modal__frame { width: min(960px, 100%); aspect-ratio: 16 / 9; }
.ns-video-modal__frame iframe { width: 100%; height: 100%; border: 0; border-radius: 12px; }
.ns-video-modal__close { position: absolute; top: 16px; right: 20px; background: none; border: 0; color: #fff; font-size: 40px; line-height: 1; cursor: pointer; }

/* ══ PAGE: conditions ══ */
.ns-conditions .section { padding: 52px 32px; }

/* PAGE HERO */
.page-hero { background: linear-gradient(125deg, var(--navy) 0%, var(--navy-mid) 100%); padding: 52px 32px 44px; }
.page-hero-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 360px; gap: 48px; align-items: end; }
.breadcrumb { display: flex; align-items: center; gap: 6px; margin-bottom: 20px; }
.breadcrumb a { color: rgba(255,255,255,.5); font-size: 12px; text-decoration: none; }
.breadcrumb span { color: rgba(255,255,255,.3); font-size: 12px; }
.breadcrumb-current { color: rgba(255,255,255,.7); font-size: 12px; }
.page-hero h1 { font-family: 'Playfair Display', Georgia, serif; font-size: 40px; font-weight: 500; color: #fff; line-height: 1.2; margin-bottom: 14px; }
.page-hero h1 em { font-style: italic; color: #7EC8F0; }
.page-hero-sub { color: rgba(255,255,255,.6); font-size: 15px; line-height: 1.65; }
.hero-symptom-box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 20px 22px; }
.hsb-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7EC8F0; margin-bottom: 12px; }
.hsb-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.hsb-list li { font-size: 13px; color: rgba(255,255,255,.7); display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.hsb-list li::before { content: '→'; color: #7EC8F0; flex-shrink: 0; font-weight: 600; }
.hsb-note { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 12px; }

/* CONDITIONS GRID (white cards — distinct from the navy homepage condition-card) */
.ns-conditions .conditions-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 0; }
.ns-conditions .condition-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
}
.ns-conditions .condition-card:hover { background: var(--white); border-color: var(--border); box-shadow: 0 6px 28px rgba(8,36,58,.10); transform: translateY(-2px); }
.ns-conditions .condition-name { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 500; color: var(--text-dark); margin-bottom: 8px; line-height: 1.2; }
.condition-card-accent { height: 4px; }
.acc-gold { background: var(--gold); }
.acc-navy { background: var(--navy); }
.condition-card-body { padding: 20px 20px 16px; flex: 1; display: flex; flex-direction: column; }
.condition-desc { font-size: 13px; color: var(--text-mid); line-height: 1.6; flex: 1; margin-bottom: 14px; }
.condition-card-footer { padding: 12px 20px; border-top: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: space-between; }
.condition-link { font-size: 12px; color: var(--blue); font-weight: 500; display: flex; align-items: center; gap: 4px; }
.condition-link::after { content: '→'; }

/* TRUST STRIP */
.trust-strip { background: var(--navy); padding: 36px 32px; }
.ns-conditions .trust-inner { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 24px; height: auto; }
.ns-conditions .trust-item { align-items: flex-start; gap: 12px; padding-right: 0; white-space: normal; }
.trust-icon { width: 40px; height: 40px; background: rgba(255,255,255,.08); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-icon svg { width: 20px; height: 20px; color: #7EC8F0; }
.trust-text-title { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 3px; }
.trust-text-sub { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.4; }

/* NOT SURE SECTION */
.not-sure { background: var(--blue-pale); border: 1px solid rgba(26,126,200,.15); border-radius: var(--radius-xl); padding: 36px 40px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-top: 32px; }
.not-sure-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 500; color: var(--text-dark); margin-bottom: 8px; }
.not-sure-sub { font-size: 14px; color: var(--text-mid); line-height: 1.6; }
.btn-ns { display: inline-block; background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; padding: 13px 24px; border-radius: var(--radius-md); text-decoration: none; white-space: nowrap; }
.btn-ns:hover { background: var(--blue-lite); }

@media (max-width: 860px) {
  .page-hero-inner { grid-template-columns: 1fr; }
  .ns-conditions .conditions-grid { grid-template-columns: repeat(2, 1fr); }
  .ns-conditions .trust-inner { grid-template-columns: 1fr 1fr; }
  .not-sure { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ns-conditions .conditions-grid, .ns-conditions .trust-inner { grid-template-columns: 1fr; }
}

/* ══ PAGE: condition ══ */

/* BREADCRUMB */
.breadcrumb-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 12px 32px; }
.breadcrumb-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 6px; }
.breadcrumb-bar a { color: var(--text-lite); font-size: 12px; text-decoration: none; }
.breadcrumb-bar a:hover { color: var(--blue); }
.breadcrumb-bar .sep { color: var(--border); font-size: 12px; }
.breadcrumb-bar .current { color: var(--text-mid); font-size: 12px; }

/* CONDITION HERO */
.condition-hero { background: var(--white); border-bottom: 1px solid var(--border); padding: 48px 32px; }
.condition-hero-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 320px; gap: 48px; align-items: start; }
.condition-h1 { font-family: 'Playfair Display', serif; font-size: 42px; font-weight: 500; color: var(--text-dark); line-height: 1.1; margin-bottom: 6px; letter-spacing: -.02em; }
.condition-intro { font-size: 15px; color: var(--text-mid); line-height: 1.7; margin-bottom: 24px; }

/* SIDEBAR CTA */
.appt-card { background: var(--navy); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 16px; }
.appt-card-title { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 6px; }
.appt-card-sub { font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 18px; line-height: 1.5; }
.btn-book { display: block; background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; padding: 13px 20px; border-radius: var(--radius-md); text-decoration: none; text-align: center; margin-bottom: 10px; }
.btn-book:hover { background: var(--blue-lite); }

/* BODY CONTENT */
.condition-body { padding: 0 32px 64px; }
.condition-body-inner { max-width: 1120px; margin: 0 auto; padding-top: 48px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-mid); text-decoration: none; margin-bottom: 32px; }
.back-link:hover { color: var(--blue); }
.back-link::before { content: '←'; }

/* CONTENT SECTIONS */
.content-block { margin-bottom: 36px; }
.content-block h2 { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 500; color: var(--text-dark); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.content-block p { font-size: 14.5px; color: var(--text-mid); line-height: 1.75; margin-bottom: 12px; }
.content-block p:last-child { margin-bottom: 0; }
.content-block ul { margin: 8px 0 12px 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.content-block ul li { font-size: 14px; color: var(--text-mid); display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.content-block ul li::before { content: '→'; color: var(--blue); font-weight: 600; flex-shrink: 0; margin-top: 2px; }

/* RELATED TREATMENTS (2-col — distinct from the 3-col homepage treatments-grid) */
.ns-condition .treatments-grid { grid-template-columns: repeat(2,1fr); gap: 10px; margin-top: 16px; }
.treatment-link-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; text-decoration: none; display: flex; align-items: center; justify-content: space-between; transition: all .15s; }
.treatment-link-card:hover { border-color: var(--teal); background: var(--teal-pale); }
.tlc-name { font-size: 13px; font-weight: 500; color: var(--text-dark); }
.tlc-arrow { font-size: 14px; color: var(--teal); }

/* PATIENT STORY (single-column — no video thumbnail data on patient-story records) */
.story-pull { background: var(--navy); border-radius: var(--radius-xl); padding: 28px; margin: 32px 0; }
.ns-condition .story-kicker { display: block; font-size: 10px; color: #7EC8F0; margin-bottom: 10px; }
.ns-condition .story-kicker::before { content: none; }
.ns-condition .story-quote { font-size: 17px; color: rgba(255,255,255,.85); line-height: 1.5; margin-bottom: 10px; }
.ns-condition .story-quote::before { content: none; }
.story-attr { font-size: 12px; color: rgba(255,255,255,.45); margin-bottom: 14px; }
.story-link { font-size: 12px; color: #7EC8F0; font-weight: 500; text-decoration: none; }

@media (max-width: 860px) {
  .condition-hero-inner { grid-template-columns: 1fr; }
  .ns-condition .treatments-grid { grid-template-columns: 1fr; }
}

/* ══ PAGE: treatments ══ */

/* HERO — collides with the conditions-page hero (single column here, no side box) */
.ns-treatments .page-hero-inner { display: block; }
.ns-treatments .page-hero-sub { max-width: 640px; margin-bottom: 28px; }
.hero-approach { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.ha-item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); padding: 14px 16px; }
.ha-num { font-size: 22px; font-weight: 600; color: #7EC8F0; line-height: 1; margin-bottom: 4px; }
.ha-label { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.4; }

/* FILTER BAR */
.filter-bar { background: var(--white); border-bottom: 1px solid var(--border); padding: 16px 32px; }
.filter-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-label { font-size: 12px; font-weight: 500; color: var(--text-lite); margin-right: 4px; white-space: nowrap; }
.filter-pill { font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border); color: var(--text-mid); background: var(--white); cursor: pointer; white-space: nowrap; transition: all .15s; }
.filter-pill:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-pale); }
.filter-pill.active { border-color: var(--blue); color: var(--blue); background: var(--blue-pale); font-weight: 600; }

/* SECTION — collides with the base .section/.section-title/.section-sub (tighter spacing here) */
.ns-treatments .section { padding: 52px 32px; }
.ns-treatments .section-title { font-size: 26px; margin-bottom: 6px; }
.ns-treatments .section-sub { line-height: 1.6; margin-bottom: 28px; }

/* FEATURED TREATMENTS (top 3 — Rezum, Aquablation, Medication) */
.featured-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-bottom: 48px; }
.featured-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.featured-card:hover { box-shadow: 0 8px 32px rgba(8,36,58,.12); transform: translateY(-2px); }
.featured-accent { height: 5px; }
.featured-body { padding: 24px 22px 20px; flex: 1; display: flex; flex-direction: column; }
.featured-tag { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.tag-gold { color: var(--gold); }
.tag-navy { color: var(--navy); }
.featured-name { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 500; color: var(--text-dark); margin-bottom: 10px; line-height: 1.1; }
.featured-desc { font-size: 13.5px; color: var(--text-mid); line-height: 1.65; flex: 1; margin-bottom: 16px; }
.featured-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; }
.fpill { font-size: 10px; font-weight: 500; padding: 3px 9px; border-radius: 20px; background: var(--surface); border: 0.5px solid var(--border); color: var(--text-mid); }
.featured-footer { padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: space-between; }
.featured-link { font-size: 12.5px; color: var(--blue); font-weight: 500; }
.featured-link::after { content: ' →'; }
.popular-badge { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 20px; background: var(--blue-pale); color: var(--blue); }

/* TREATMENT GROUP SECTIONS */
.treatment-group { margin-bottom: 40px; }
.tg-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.tg-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.tg-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 500; color: var(--text-dark); }
.tg-count { font-size: 12px; color: var(--text-lite); }
.tg-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.treatment-row { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; text-decoration: none; display: flex; align-items: center; gap: 14px; transition: all .15s; }
.treatment-row:hover { border-color: var(--blue); background: var(--blue-pale); }
.treatment-row:hover .tr-arrow { color: var(--blue); }
.tr-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 16px; }
.tr-body { flex: 1; }
.tr-name { font-size: 13.5px; font-weight: 500; color: var(--text-dark); margin-bottom: 2px; }
.tr-desc { font-size: 11.5px; color: var(--text-lite); line-height: 1.4; }
.tr-tag { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 20px; margin-left: 6px; }
.tag-minimally { background: var(--teal-pale); color: var(--teal); }
.tag-surgical { background: var(--coral-pale); color: var(--coral); }
.tag-diagnostic { background: var(--gold-pale); color: var(--gold); }
.tag-nonsurgical { background: var(--blue-pale); color: var(--blue); }
.tr-arrow { font-size: 16px; color: var(--text-lite); flex-shrink: 0; }

/* NOT SURE CTA — collides with the conditions-page .not-sure (navy here, not blue-pale) */
.ns-treatments .not-sure { background: var(--navy); border: none; margin-top: 48px; }
.ns-title { font-family: 'Playfair Display', serif; font-size: 22px; color: #fff; font-weight: 500; margin-bottom: 8px; }
.ns-sub { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.6; }
.btn-white { background: #fff; color: var(--navy); font-size: 14px; font-weight: 600; padding: 13px 24px; border-radius: var(--radius-md); text-decoration: none; white-space: nowrap; display: inline-block; }
.btn-white:hover { background: var(--surface); }

@media (max-width: 860px) {
  .featured-grid { grid-template-columns: 1fr; }
  .tg-grid { grid-template-columns: 1fr; }
  .hero-approach { grid-template-columns: repeat(2,1fr); }
  .ns-treatments .not-sure { grid-template-columns: 1fr; }
}

/* ══ PAGE: treatment ══ */

/* TREATMENT HERO */
.treatment-hero { background: var(--white); border-bottom: 1px solid var(--border); padding: 48px 32px; }
.treatment-hero-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.treatment-tag-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.treatment-badge { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; }
.badge-condition { background: var(--blue-pale); color: var(--blue); }
.badge-type { background: var(--teal-pale); color: var(--teal); }
.badge-nice { background: var(--gold-pale); color: var(--gold); }
.treatment-h1 { font-family: 'Playfair Display', serif; font-size: 48px; font-weight: 500; color: var(--text-dark); line-height: 1; margin-bottom: 6px; letter-spacing: -.02em; }
.treatment-h1-sub { font-size: 17px; color: var(--text-lite); margin-bottom: 20px; font-weight: 400; }
.treatment-intro { font-size: 15px; color: var(--text-mid); line-height: 1.7; margin-bottom: 24px; }

/* AT A GLANCE (unused — no per-treatment stats in the DB; CSS kept for design-fidelity/reuse) */
.at-a-glance { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-bottom: 24px; }
.aag-item { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.aag-icon { font-size: 16px; flex-shrink: 0; }
.aag-label { font-size: 11px; color: var(--text-lite); }
.aag-value { font-size: 13px; font-weight: 500; color: var(--text-dark); }

/* SIDEBAR CTA */
.cost-card { background: var(--gold-pale); border: 1px solid rgba(200,150,10,.2); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 16px; }
.cost-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.cost-range { font-size: 22px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.cost-note { font-size: 11.5px; color: var(--text-mid); line-height: 1.5; }
.insurance-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.insurance-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-lite); margin-bottom: 10px; }
.insurance-text { font-size: 13px; color: var(--text-mid); line-height: 1.55; }

/* BODY — .treatment-body collides with the homepage .treatment-card__body (unrelated component) */
.ns-treatment .treatment-body { padding: 0 32px 64px; display: block; }
/* Sidebar omitted (template's specialists card has no DB relation; hero carries the CTA) — single column */
.treatment-body-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 48px; padding-top: 48px; }

/* CONTENT BODY — extends the shared .content-block typography (defined on the condition page)
   with tags that appear in treatment-item rich text but not in condition copy: h3, ol, img, iframe. */
.content-block h3 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 500; color: var(--text-dark); margin: 20px 0 10px; }
.content-block ol { margin: 8px 0 12px 22px; padding: 0; color: var(--text-mid); }
.content-block ol li { font-size: 14px; line-height: 1.6; margin-bottom: 6px; }
.content-block img { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 12px 0; }
.content-block iframe { max-width: 100%; margin: 12px 0; }
.content-block a { color: var(--blue); }

/* ADVANTAGES / VIDEO / HIGHLIGHT (unused — Rezum-specific stat blocks with no DB equivalent; CSS kept for design-fidelity/reuse) */
.advantages-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 16px 0; }
.advantage-item { background: var(--teal-pale); border: 1px solid rgba(14,124,106,.15); border-radius: var(--radius-md); padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px; }
.advantage-check { color: var(--teal); font-size: 16px; flex-shrink: 0; font-weight: 700; margin-top: 1px; }
.advantage-text { font-size: 13px; color: var(--text-dark); font-weight: 500; line-height: 1.4; }
.video-embed { background: var(--navy); border-radius: var(--radius-lg); overflow: hidden; margin: 20px 0; }
.video-thumb { position: relative; aspect-ratio: 16/9; cursor: pointer; }
.video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-thumb-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,36,58,.7) 30%, rgba(8,36,58,.1) 100%); }
.video-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 56px; height: 56px; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.video-play-btn svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.video-caption { padding: 12px 16px; }
.video-caption-title { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 2px; }
.video-caption-sub { font-size: 11px; color: rgba(255,255,255,.5); }
.highlight-box { background: var(--blue-pale); border: 1px solid rgba(26,126,200,.2); border-radius: var(--radius-md); padding: 18px 20px; margin: 20px 0; }
.highlight-box-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.highlight-box p { font-size: 13px; color: var(--text-dark); line-height: 1.6; }
.highlight-box ul { margin: 6px 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.highlight-box ul li { font-size: 13px; color: var(--text-dark); display: flex; align-items: flex-start; gap: 8px; }
.highlight-box ul li::before { content: '→'; color: var(--blue); font-weight: 600; flex-shrink: 0; }

/* PATIENT STORY — .story-pull is already single-column (see PAGE: condition); scope the
   navy-appropriate kicker/quote styling to this page too since the base versions are tuned
   for the two-column homepage .story-grid. */
.ns-treatment .story-kicker { display: block; font-size: 10px; color: #7EC8F0; margin-bottom: 10px; }
.ns-treatment .story-kicker::before { content: none; }
.ns-treatment .story-quote { font-size: 17px; color: rgba(255,255,255,.85); line-height: 1.5; margin-bottom: 10px; }
.ns-treatment .story-quote::before { content: none; }

/* SPECIALISTS / RELATED SIDEBAR (unused — no per-treatment specialist or sibling-treatment
   data is exposed to this view; CSS kept for design-fidelity/reuse) */
.body-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
.specialists-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.specialists-card-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-lite); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.specialist-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.spec-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; flex-shrink: 0; }
.spec-name { font-size: 12.5px; font-weight: 500; color: var(--text-dark); }
.spec-role { font-size: 11px; color: var(--text-lite); }
.related-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; }
.related-card-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-lite); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.related-card a { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-mid); text-decoration: none; padding: 6px 0; border-bottom: 0.5px solid var(--border); }
.related-card a:last-child { border-bottom: none; }
.related-card a:hover { color: var(--blue); }
.related-card a::before { content: '→'; color: var(--blue); font-size: 11px; flex-shrink: 0; }
.condition-card-link { background: var(--blue-pale); border: 1px solid rgba(26,126,200,.2); border-radius: var(--radius-lg); padding: 16px 18px; text-decoration: none; display: block; }
.ccl-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.ccl-title { font-size: 14px; font-weight: 500; color: var(--text-dark); margin-bottom: 4px; }
.ccl-link { font-size: 12px; color: var(--blue); font-weight: 500; }
.story-video-thumb { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; }
.story-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-play { position: absolute; inset: 0; background: rgba(8,36,58,.4); display: flex; align-items: center; justify-content: center; }
.story-play svg { width: 28px; height: 28px; fill: #fff; }

@media (max-width: 860px) {
  .treatment-hero-inner { grid-template-columns: 1fr; }
  .treatment-body-inner { grid-template-columns: 1fr; }
  .body-sidebar { position: static; }
}

/* ══ PAGE: team ══ */

/* PAGE HERO — collides with the shared .page-hero-inner/.hero-stats (single-column layout here,
   flex hero-stats vs the homepage's grid hero-stats) */
.ns-team .page-hero-inner { display: block; }
.breadcrumb a:hover { color: rgba(255,255,255,.8); }
.ns-team .page-hero h1 { letter-spacing: -.01em; }
.ns-team .page-hero-sub { max-width: 580px; margin-bottom: 28px; }
.ns-team .hero-stats { display: flex; gap: 32px; background: none; border-radius: 0; overflow: visible; margin-top: 0; }
.ns-team .hero-stat { background: none; padding: 0; text-align: left; } /* base .hero-stat carries the homepage grid-cell background */
.ns-team .hero-stat-num { font-size: 24px; font-weight: 600; color: #fff; line-height: 1; }
.ns-team .hero-stat-label { font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: .04em; margin-top: 2px; }

/* SECTION — collides with the shared .section/.section-title/.section-sub (tighter spacing) */
.ns-team .section { padding: 52px 32px; }
.ns-team .section-title { font-size: 28px; margin-bottom: 6px; }
.ns-team .section-sub { line-height: 1.6; margin-bottom: 32px; max-width: 640px; }

/* CONSULTANT GRID — a single flat grid over all 22 active team members (see report: the
   template's 3 separate sections [consultant surgeons / nursing / support] have no reliable
   DB field to split on, and the nursing-card/support-card designs below have no link at all) */
.consultant-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.consultant-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
  text-decoration: none;
}
.consultant-card:hover { box-shadow: 0 8px 32px rgba(8,36,58,.12); transform: translateY(-2px); }
.consultant-card-img { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.consultant-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform .3s; }
.consultant-card:hover .consultant-card-img img { transform: scale(1.03); }
/* .consultant-card-location (unused — no per-member hospital-location field in the DB) */
.consultant-card-location {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(8,36,58,.75);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.85);
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 20px;
}
.consultant-card-body { padding: 16px 16px 14px; flex: 1; display: flex; flex-direction: column; }
/* .consultant-prefix, .consultant-specialism, .consultant-tags/.ctag (unused — no DB fields for
   title-prefix, free-text specialism or specialism tags per team member) */
.consultant-prefix { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 2px; }
.consultant-name { font-size: 16px; font-weight: 500; color: var(--text-dark); margin-bottom: 2px; }
.consultant-title { font-size: 11px; color: var(--text-lite); margin-bottom: 10px; }
.consultant-specialism { font-size: 12.5px; color: var(--text-mid); line-height: 1.5; margin-bottom: 12px; flex: 1; }
.consultant-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.ctag { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: var(--surface); border: 0.5px solid var(--border); color: var(--text-mid); white-space: nowrap; }
.consultant-card-footer { padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: space-between; }
.view-profile { font-size: 12px; color: var(--blue); font-weight: 500; text-decoration: none; display: flex; align-items: center; gap: 4px; }
.view-profile::after { content: '→'; }
/* .doctify-mini (unused — no per-member review score in the DB; see the team-member page for
   the live Doctify widget embed on the 11 members that have one) */
.doctify-mini { display: flex; align-items: center; gap: 4px; }
.doctify-mini .stars { color: #F5C518; font-size: 11px; letter-spacing: 1px; }
.doctify-mini .score { font-size: 11px; font-weight: 600; color: var(--text-dark); }

/* Photo placeholder (added — not in the source template, which assumes every member has a real
   photo; used only when $m->thumbnail is empty, per brief) */
.consultant-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--blue-pale); color: var(--blue); font-family: 'Playfair Display', Georgia, serif; font-size: 28px; font-weight: 500; }

/* NURSING SECTION / SUPPORT SECTION (unused — merged into the single .consultant-grid above;
   CSS kept for design-fidelity/reuse) */
.nursing-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.nursing-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.nursing-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: top; display: block; }
.nursing-card-body { padding: 12px 14px; }
.nursing-name { font-size: 13px; font-weight: 500; color: var(--text-dark); margin-bottom: 2px; }
.nursing-role { font-size: 11px; color: var(--text-lite); line-height: 1.4; }
.support-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.support-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.support-card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; object-position: top; display: block; }
.support-card-body { padding: 12px 14px; }
.support-name { font-size: 13px; font-weight: 500; color: var(--text-dark); margin-bottom: 2px; }
.support-role { font-size: 11px; color: var(--text-lite); line-height: 1.4; }

/* HOSPITAL STRIP */
.hospital-strip { background: var(--navy); padding: 36px 32px; }
.hospital-inner { max-width: 1120px; margin: 0 auto; }
.hospital-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #7EC8F0; margin-bottom: 8px; }
.hospital-title { font-family: 'Playfair Display', serif; font-size: 22px; color: #fff; font-weight: 500; margin-bottom: 24px; }
.hospital-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hospital-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); padding: 14px 16px; }
.hospital-name { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 4px; }
.hospital-locations { display: flex; gap: 6px; flex-wrap: wrap; }
.hloc { font-size: 10px; color: rgba(255,255,255,.5); background: rgba(255,255,255,.07); padding: 2px 8px; border-radius: 20px; }

/* GMC STATEMENT */
.gmc-bar { background: var(--white); border-top: 1px solid var(--border); padding: 20px 32px; }
.gmc-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.gmc-icon { width: 36px; height: 36px; background: var(--blue-pale); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gmc-icon svg { width: 18px; height: 18px; color: var(--blue); }
.gmc-text { font-size: 13px; color: var(--text-mid); line-height: 1.6; }
.gmc-text strong { color: var(--text-dark); }

@media (max-width: 860px) {
  .consultant-grid { grid-template-columns: repeat(2, 1fr); }
  .hospital-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .consultant-grid, .hospital-grid { grid-template-columns: 1fr; }
}

/* ══ PAGE: team-member ══ */

/* PROFILE HERO */
.profile-hero { background: var(--white); border-bottom: 1px solid var(--border); padding: 48px 32px; }
.profile-hero-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr 300px; gap: 48px; align-items: start; }

.profile-photo { position: relative; }
.profile-photo img { width: 100%; border-radius: var(--radius-xl); display: block; aspect-ratio: 3/4; object-fit: cover; object-position: top; }
/* .profile-photo-badges — award badge images uploaded via profile_data.badges.
   The real assets are full banner cards (e.g. Doctify Outstanding Patient Experience),
   so they render two per row under the photo (a lone badge centers itself) — NOT the
   source template's 44px logo strip, which made them illegible. */
.profile-photo-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px; }
/* aspect-ratio/object-fit reset the portrait crop the .profile-photo img rule above applies */
.profile-photo-badges img { width: calc(50% - 6px); height: auto; display: block; border-radius: var(--radius-md); aspect-ratio: auto; object-fit: contain; }
/* Photo placeholder (added — see PAGE: team; used only when $member->thumbnail is empty) */
.profile-photo-placeholder { width: 100%; aspect-ratio: 3/4; border-radius: var(--radius-xl); display: flex; align-items: center; justify-content: center; background: var(--blue-pale); color: var(--blue); font-family: 'Playfair Display', Georgia, serif; font-size: 64px; font-weight: 500; }

.profile-info {}
/* .profile-prefix, .profile-hospital, .profile-specialism-tags/.spec-tag, .profile-credentials/
   .cred-item/.cred-label/.cred-value — driven by the profile_data JSON field group
   (admin > Team > Profile page details); each renders only when its key is filled. */
.profile-prefix { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 6px; }
.profile-name { font-family: 'Playfair Display', Georgia, serif; font-size: 44px; font-weight: 500; color: var(--text-dark); line-height: 1.1; margin-bottom: 8px; letter-spacing: -.02em; }
.profile-title { font-size: 16px; color: var(--text-mid); margin-bottom: 6px; font-weight: 400; }
.profile-hospital { font-size: 14px; color: var(--text-lite); margin-bottom: 24px; display: flex; align-items: center; gap: 6px; }
.profile-hospital svg { width: 14px; height: 14px; color: var(--blue); flex-shrink: 0; }
.profile-specialism-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.spec-tag { font-size: 12px; font-weight: 500; padding: 5px 12px; border-radius: 20px; background: var(--blue-pale); color: var(--blue); border: 1px solid rgba(26,126,200,.2); }
.profile-credentials { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cred-item { background: var(--surface); border: 0.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.cred-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-lite); margin-bottom: 3px; }
.cred-value { font-size: 12.5px; font-weight: 500; color: var(--text-dark); line-height: 1.3; }

/* PROFILE SIDEBAR CTA — .btn-book/.btn-call collide with the shared versions (adds a hover
   transition / font-weight not present on the condition/treatment pages) */
.ns-team-member .btn-book { transition: background .15s; }
.doctify-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.doctify-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.doctify-card-logo { background: var(--navy); border-radius: 6px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.doctify-card-logo svg { width: 14px; height: 14px; fill: #fff; }
.doctify-card-name { font-size: 13px; font-weight: 500; color: var(--text-dark); }
/* Static Doctify card — driven by profile_data.doctify_* keys; the live iframe widget
   ($member->embed) is intentionally no longer rendered (kept in the CMS for later use).
   The template's .doctify-stars/.doctify-score/.doctify-count selectors exist unscoped in
   the base (homepage trust-bar) section above with different colors, so the team-member
   variants are scoped under .ns-team-member below. */
.doctify-rating-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.doctify-sample { font-size: 12px; color: var(--text-mid); line-height: 1.55; font-style: italic; border-left: 2px solid var(--blue); padding-left: 10px; margin-bottom: 10px; }
.doctify-link { font-size: 12px; color: var(--blue); text-decoration: none; font-weight: 500; }
.ns-team-member .doctify-stars { font-size: 16px; }
.ns-team-member .doctify-score { font-size: 22px; color: var(--text-dark); }
.ns-team-member .doctify-count { font-size: 11px; color: var(--text-lite); margin-bottom: 12px; }

/* MAIN CONTENT AREA — two-column when the member has sticky-sidebar data
   (profile_data story/conditions/treatments/locations), single column otherwise */
.profile-body { padding: 0 32px 64px; }
.profile-body-inner { max-width: 1120px; margin: 0 auto; padding-top: 48px; }
.profile-body-inner.has-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 48px; }
.bio-section { max-width: 760px; }

/* BIO — .bio-intro is profile_data.bio_intro; the biography body renders through the shared
   .content-block typography (see PAGE: condition), including h2 section titles and the
   shared .highlight-box/.highlight-box-title rules (see PAGE: treatment). */
.bio-intro { font-size: 16px; color: var(--text-mid); line-height: 1.75; margin-bottom: 32px; border-left: 3px solid var(--blue); padding-left: 20px; font-style: italic; }
.bio-block { margin-bottom: 32px; }
.bio-block-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 500; color: var(--text-dark); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.bio-block p { font-size: 14.5px; color: var(--text-mid); line-height: 1.75; margin-bottom: 12px; }
.bio-block p:last-child { margin-bottom: 0; }
.highlight-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.highlight-list li { font-size: 13px; color: var(--text-dark); display: flex; align-items: flex-start; gap: 8px; }
.highlight-list li::before { content: '→'; color: var(--blue); font-weight: 600; flex-shrink: 0; margin-top: 1px; }

/* STICKY SIDEBAR — profile_data conditions/treatments/locations lists */
.profile-sidebar-sticky { position: sticky; top: 80px; }
.side-section { margin-bottom: 20px; }
.side-section-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-lite); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.conditions-list { display: flex; flex-direction: column; gap: 4px; }
.conditions-list a { font-size: 13px; color: var(--blue); text-decoration: none; padding: 6px 10px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; transition: background .15s; }
.conditions-list a:hover { background: var(--blue-pale); }
.conditions-list a::after { content: '→'; font-size: 11px; opacity: .5; }
.treatments-list { display: flex; flex-direction: column; gap: 4px; }
.treatments-list a { font-size: 13px; color: var(--teal); text-decoration: none; padding: 6px 10px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: space-between; transition: background .15s; }
.treatments-list a:hover { background: var(--teal-pale); }
.treatments-list a::after { content: '→'; font-size: 11px; opacity: .5; }
.locations-list { display: flex; flex-direction: column; gap: 6px; }
.location-item { font-size: 12.5px; color: var(--text-mid); display: flex; align-items: center; gap: 8px; }
.location-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

/* PATIENT STORY TEASER — profile_data story_quote/story_meta/story_link */
.story-teaser { background: var(--navy); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 20px; }
.story-teaser-kicker { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7EC8F0; margin-bottom: 8px; }
.story-teaser-quote { font-size: 13px; color: rgba(255,255,255,.75); line-height: 1.6; font-style: italic; margin-bottom: 10px; }
.story-teaser-meta { font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 12px; }
.story-teaser-link { font-size: 12px; color: #7EC8F0; text-decoration: none; font-weight: 500; }

/* BACK LINK — collides with the shared .back-link (adds vertical padding) */
.ns-team-member .back-link { padding: 8px 0; }

@media (max-width: 860px) {
  .profile-hero-inner { grid-template-columns: 1fr; }
  .profile-body-inner.has-sidebar { grid-template-columns: 1fr; }
  .profile-sidebar-sticky { position: static; }
}

/* ══ PAGE: news ══ */

/* PAGE HERO — collides with the shared .page-hero-inner (single-column here, no side box)
   and .page-hero-sub (adds a max-width the base rule doesn't have) */
.ns-news .page-hero-inner { display: block; }
.ns-news .page-hero-sub { max-width: 580px; }

/* SEARCH / FILTER — the template's filter-bar/filter-inner container is reused verbatim, but
   its contents (static "All/News/Press/Research/Events" <button> pills) have no href or data
   attribute wired to anything; replaced with a working GET search+filter form per the brief, so
   these input/select/submit styles are new (not in the source template). */
.filter-search { flex: 1; min-width: 160px; font: inherit; font-size: 13px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 20px; color: var(--text-dark); }
.filter-search:focus { outline: none; border-color: var(--blue); }
.filter-select { font: inherit; font-size: 12.5px; font-weight: 500; padding: 7px 12px; border: 1px solid var(--border); border-radius: 20px; color: var(--text-mid); background: var(--white); }
.filter-submit { font-size: 12.5px; font-weight: 600; color: #fff; background: var(--blue); border: none; padding: 8px 18px; border-radius: 20px; cursor: pointer; transition: background .15s; }
.filter-submit:hover { background: var(--blue-lite); }

/* FEATURED ARTICLE — .fa-consultants/.fa-avatars/.fa-avatar/.fa-consultant-names (unused — no
   DB relation from a news article to specific consultant records; dropped rather than left
   empty, per the detail-page/no-DB-equivalent rule) */
.featured-article { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: grid; grid-template-columns: 1fr 460px; text-decoration: none; transition: box-shadow .2s; margin-bottom: 32px; }
.featured-article:hover { box-shadow: 0 8px 32px rgba(8,36,58,.10); }
.fa-body { padding: 36px 36px 32px; display: flex; flex-direction: column; }
.fa-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.fa-badge { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.badge-news { background: var(--blue-pale); color: var(--blue); }
.badge-event { background: var(--coral-pale); color: var(--coral); }
.fa-date { font-size: 12px; color: var(--text-lite); }
.fa-title { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 500; color: var(--text-dark); line-height: 1.3; margin-bottom: 12px; }
.fa-excerpt { font-size: 14px; color: var(--text-mid); line-height: 1.7; flex: 1; margin-bottom: 20px; }
.fa-link { font-size: 13px; color: var(--blue); font-weight: 500; text-decoration: none; }
.fa-link::after { content: ' →'; }
.fa-image { position: relative; }
.fa-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder (added — not in the source template, which assumes the featured article always
   has an image; mirrors .ac-thumb-placeholder for the 8/84 articles without a thumbnail) */
.fa-image-placeholder { display: flex; align-items: center; justify-content: center; background: var(--surface); min-height: 240px; }
.fa-image-placeholder svg { width: 48px; height: 48px; opacity: .2; }

/* ARTICLES GRID — .ac-consultant/.ac-consultant img/.ac-consultant-name (unused — same no-DB-
   relation reason as .fa-consultants above; the ac-footer keeps just the "Read more" link) */
.articles-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.article-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.article-card:hover { box-shadow: 0 6px 24px rgba(8,36,58,.10); transform: translateY(-2px); }
.ac-thumb { aspect-ratio: 16/9; overflow: hidden; background: var(--surface); }
.ac-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.article-card:hover .ac-thumb img { transform: scale(1.04); }
.ac-thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ac-thumb-placeholder svg { width: 32px; height: 32px; opacity: .2; }
.ac-body { padding: 18px 18px 16px; flex: 1; display: flex; flex-direction: column; }
.ac-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ac-date { font-size: 11px; color: var(--text-lite); }
.ac-title { font-size: 15px; font-weight: 500; color: var(--text-dark); line-height: 1.4; margin-bottom: 8px; flex: 1; }
.ac-excerpt { font-size: 12.5px; color: var(--text-mid); line-height: 1.6; margin-bottom: 14px; }
.ac-footer { display: flex; align-items: center; justify-content: flex-end; padding-top: 12px; border-top: 0.5px solid var(--border); margin-top: auto; }
.ac-read { font-size: 12px; color: var(--blue); font-weight: 500; }
.ac-read::after { content: ' →'; }

/* PRESS COVERAGE STRIP — kept as static marketing copy (client-approved editorial highlights,
   no matching DB fields for outlet/headline); href="#" placeholders point at the news listing */
.press-strip { background: var(--navy); border-radius: var(--radius-xl); padding: 28px 32px; margin-top: 48px; }
.ps-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7EC8F0; margin-bottom: 16px; }
.ps-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.ps-item { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); padding: 14px 16px; }
.ps-outlet { font-size: 13px; font-weight: 500; color: #fff; margin-bottom: 4px; }
.ps-headline { font-size: 11.5px; color: rgba(255,255,255,.55); line-height: 1.4; margin-bottom: 8px; }
.ps-link { font-size: 11px; color: #7EC8F0; text-decoration: none; font-weight: 500; }

/* PAGINATION — the default `$paginator->links()` view ('pagination::tailwind') ships Tailwind
   utility classes with no matching stylesheet loaded on this site, so the blade explicitly
   requests the bootstrap-style `vendor.pagination.default` view (ul.pagination > li > a/span)
   and this mirrors option-1's .pagination-wrap styling, adapted to the new-site palette. */
.pagination-wrap { margin-top: 32px; }
.pagination-wrap nav { display: flex; justify-content: center; }
.pagination-wrap .pagination { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0; list-style: none; }
.pagination-wrap .pagination li { list-style: none; }
.pagination-wrap .pagination li a,
.pagination-wrap .pagination li span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; color: var(--text-mid); transition: background .15s, color .15s, border-color .15s; text-decoration: none; }
.pagination-wrap .pagination li a:hover { background: var(--blue-pale); border-color: var(--blue); color: var(--blue); }
.pagination-wrap .pagination li.active span { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.pagination-wrap .pagination li.disabled span, .pagination-wrap .pagination li.disabled a { color: var(--border); border-color: var(--border); pointer-events: none; }

@media (max-width: 860px) {
  .featured-article { grid-template-columns: 1fr; }
  .fa-image { aspect-ratio: 16/9; }
  .articles-grid { grid-template-columns: repeat(2,1fr); }
  .ps-grid { grid-template-columns: repeat(2,1fr); }
  .filter-inner { flex-direction: column; align-items: stretch; }
  .filter-search { min-width: 0; }
}
@media (max-width: 560px) {
  .articles-grid, .ps-grid { grid-template-columns: 1fr; }
}

/* ══ PAGE: news-item ══ */

/* BREADCRUMB — .breadcrumb-bar/.breadcrumb-inner/.breadcrumb-bar a/.sep/.current already exist
   verbatim (see PAGE: condition) */

/* ARTICLE HERO — .article-intro and .article-consultants/.ac-avatars/.ac-av/.ac-label/.ac-names
   (unused — $item->intro is always empty across every active news row and there is no DB
   relation from a news article to specific consultant records; both were EAU-specific copy in
   the source template, dropped per the detail-page/no-DB-equivalent rule) */
.article-hero { background: var(--white); border-bottom: 1px solid var(--border); padding: 48px 32px; }
.article-hero-inner { max-width: 800px; margin: 0 auto; }
.article-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.a-badge { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; }
.a-date { font-size: 12px; color: var(--text-lite); }
.article-h1 { font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 500; color: var(--text-dark); line-height: 1.2; margin-bottom: 0; }

/* ARTICLE BODY */
.article-body { padding: 48px 32px 64px; }
.article-body-inner { max-width: 800px; margin: 0 auto; }

/* BACK LINK — collides with the shared .back-link (36px bottom margin here vs 32px) */
.ns-news-item .back-link { margin-bottom: 36px; }

.article-hero-img { width: 100%; border-radius: var(--radius-xl); margin-bottom: 36px; display: block; }

/* .article-text — the template only styles h2/p/strong; live news `content` fields also carry
   a/ul/ol/img/iframe/table/video/h1/h3 (surveyed across all active rows), so those are added
   here for legibility on every article, mirroring how PAGE: treatment extends .content-block */
.article-text { font-size: 15.5px; color: var(--text-mid); line-height: 1.8; }
.article-text h1, .article-text h2 { font-family: 'Playfair Display', serif; font-weight: 500; color: var(--text-dark); margin: 36px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.article-text h1 { font-size: 26px; }
.article-text h2 { font-size: 24px; }
.article-text h3 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 500; color: var(--text-dark); margin: 24px 0 10px; }
.article-text p { margin-bottom: 18px; }
.article-text p:last-child { margin-bottom: 0; }
.article-text strong { color: var(--text-dark); font-weight: 500; }
.article-text a { color: var(--blue); }
.article-text ul, .article-text ol { margin: 8px 0 18px 22px; color: var(--text-mid); }
.article-text li { margin-bottom: 6px; }
.article-text img, .article-text video { max-width: 100%; height: auto; border-radius: var(--radius-md); margin: 12px 0; display: block; }
.article-text iframe { max-width: 100%; margin: 12px 0; }
.article-text table { max-width: 100%; border-collapse: collapse; margin: 16px 0; }
.article-text table td, .article-text table th { border: 1px solid var(--border); padding: 8px 10px; font-size: 13.5px; }

/* RELATED — .related-card collides with the sidebar "related" card on PAGE: treatment (padded
   block of text links there vs a horizontal thumb+body card here), so it's fully scoped */
.related { border-top: 1px solid var(--border); padding-top: 36px; margin-top: 48px; }
.related-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 500; color: var(--text-dark); margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.ns-news-item .related-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; display: flex; padding: 0; transition: box-shadow .2s; }
.ns-news-item .related-card:hover { box-shadow: 0 4px 16px rgba(8,36,58,.08); }
.rc-img { width: 100px; flex-shrink: 0; }
.rc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-body { padding: 14px 16px; }
.rc-badge { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; margin-bottom: 6px; display: inline-block; }
.rc-title { font-size: 13px; font-weight: 500; color: var(--text-dark); line-height: 1.4; margin-bottom: 4px; }
.rc-date { font-size: 11px; color: var(--text-lite); }

@media (max-width: 860px) {
  .related-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .article-hero, .article-body { padding-left: 20px; padding-right: 20px; }
}

/* ══ PAGE: patient-stories ══ */

/* PAGE HERO — collides with the shared .page-hero-inner (340px side column here vs 360px) and
   .page-hero-sub (adds a margin-bottom the base rule doesn't have) */
.ns-stories .page-hero-inner { grid-template-columns: 1fr 340px; }
.ns-stories .page-hero-sub { margin-bottom: 28px; }

/* HERO STATS — flex layout (3 stats, no boxes), same treatment as PAGE: team's override */
.ns-stories .hero-stats { display: flex; gap: 32px; background: none; border-radius: 0; overflow: visible; margin-top: 0; }
.ns-stories .hero-stat-num { font-size: 24px; font-weight: 600; color: #fff; line-height: 1; }
.ns-stories .hero-stat-label { font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: .04em; margin-top: 2px; }

/* HERO FEATURED STORY WIDGET — kept as static marketing copy per the brief's "listing hero
   verbatim" rule (hardcodes the Mr O / Rezum video, same as the homepage's featured-story
   constants); not wired to $stories */
.hero-featured-story { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); overflow: hidden; }
.hfs-video { position: relative; aspect-ratio: 16/9; }
.hfs-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hfs-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,36,58,.8) 30%, rgba(8,36,58,.1) 100%); }
.hfs-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); width: 48px; height: 48px; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.hfs-play svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.hfs-body { padding: 14px 16px; }
.hfs-kicker { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7EC8F0; margin-bottom: 6px; }
.hfs-title { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 4px; line-height: 1.4; }
.hfs-meta { font-size: 11px; color: rgba(255,255,255,.45); }

/* DOCTIFY BANNER — static marketing copy (verbatim); .db-* classes are distinct from the
   homepage trust-bar's .doctify-* classes, so nothing here collides with the base section */
.doctify-banner { background: var(--navy); padding: 20px 32px; }
.doctify-banner-inner { max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.db-left { display: flex; align-items: center; gap: 16px; }
.db-stars { color: #F5C518; font-size: 18px; letter-spacing: 2px; }
.db-score { font-size: 28px; font-weight: 600; color: #fff; }
.db-label { font-size: 13px; color: rgba(255,255,255,.7); }
.db-count { font-size: 11px; color: rgba(255,255,255,.4); }
.db-note { font-size: 13px; color: rgba(255,255,255,.5); max-width: 400px; line-height: 1.5; }
.db-link { font-size: 13px; color: #7EC8F0; font-weight: 500; text-decoration: none; white-space: nowrap; }

/* FILTER BAR — .filter-bar/.filter-inner/.filter-label/.filter-pill(+:hover/.active) already
   exist verbatim (see PAGE: treatments); .filter-group/.filter-divider are new. The pills are
   <a> links here (real condition/treatment filters) rather than the treatments page's inert
   <button>s, so text-decoration/display need a small scoped addition. */
.filter-group { display: flex; align-items: center; gap: 8px; }
.filter-divider { width: 1px; height: 24px; background: var(--border); margin: 0 4px; }
.ns-stories .filter-pill { text-decoration: none; display: inline-block; }

/* FEATURED STORY (first story by sort_order — mirrors the news listing's "first = featured
   card, rest = grid" convention, see news.blade.php) */
.story-featured { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 20px; text-decoration: none; transition: box-shadow .2s; }
.story-featured:hover { box-shadow: 0 6px 28px rgba(8,36,58,.10); }
.sf-left { padding: 36px 36px 32px; display: flex; flex-direction: column; }
.sf-kicker { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; display: flex; align-items: center; gap: 6px; }
.sf-kicker::before { content: ''; display: inline-block; width: 20px; height: 2px; background: var(--teal); }
.sf-quote { font-family: 'Playfair Display', serif; font-size: 22px; color: var(--text-dark); line-height: 1.45; font-style: italic; margin-bottom: 16px; position: relative; }
.sf-quote::before { content: '\201C'; font-size: 64px; color: var(--teal-pale); position: absolute; top: -14px; left: -10px; line-height: 1; z-index: 0; }
.sf-quote span { position: relative; z-index: 1; }
.sf-tags { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.sf-patient { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.sf-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sf-name { font-size: 14px; font-weight: 600; color: var(--text-dark); }
.sf-link { font-size: 13px; color: var(--teal); font-weight: 500; text-decoration: none; margin-top: auto; }
.sf-link::after { content: ' →'; }
.sf-right { background: var(--navy); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; position: relative; }
.sf-right img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; opacity: .4; }
.sf-play { position: relative; z-index: 1; width: 56px; height: 56px; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sf-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; }
.sf-video-label { position: relative; z-index: 1; font-size: 12px; color: rgba(255,255,255,.65); text-align: center; padding: 0 20px; }

/* STORY GRID — two card designs, switched per-story on whether $s->embed is set (0/52 active
   stories have one today, so the video-card design below is currently unused live but kept
   ready — same "kept for design-fidelity/reuse" convention used elsewhere in this file) */
.all-stories-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

.story-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.story-card:hover { box-shadow: 0 8px 32px rgba(8,36,58,.12); transform: translateY(-2px); }
.story-card-video { position: relative; aspect-ratio: 16/9; }
.story-card-video img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-card-video-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,36,58,.8) 35%, rgba(8,36,58,.1) 100%); }
.story-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); width: 44px; height: 44px; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.55); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.story-card-play svg { width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
.story-type-badge { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; }
.badge-video { background: rgba(26,126,200,.85); color: #fff; }
.story-card-body { padding: 18px 20px; flex: 1; display: flex; flex-direction: column; }
.story-card-tags { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.stag { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 20px; }
.stag-condition { background: var(--blue-pale); color: var(--blue); }
.stag-treatment { background: var(--teal-pale); color: var(--teal); }
.story-card-title { font-size: 15px; font-weight: 500; color: var(--text-dark); line-height: 1.4; margin-bottom: 8px; }
.story-card-excerpt { font-size: 13px; color: var(--text-mid); line-height: 1.6; flex: 1; margin-bottom: 14px; }
.story-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 0.5px solid var(--border); }
.story-card-patient { font-size: 12px; color: var(--text-lite); }
.story-card-patient strong { color: var(--text-dark); display: block; font-size: 13px; }
.story-card-link { font-size: 12px; color: var(--blue); font-weight: 500; display: flex; align-items: center; gap: 3px; }
.story-card-link::after { content: '→'; }

.story-written { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 28px 28px 24px; display: flex; flex-direction: column; text-decoration: none; transition: box-shadow .2s, transform .2s; }
.story-written:hover { box-shadow: 0 6px 28px rgba(8,36,58,.10); transform: translateY(-2px); }
.sw-kicker { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.sw-title { font-size: 17px; font-weight: 500; color: var(--text-dark); line-height: 1.35; margin-bottom: 12px; font-family: 'Playfair Display', serif; }
.sw-excerpt { font-size: 13.5px; color: var(--text-mid); line-height: 1.7; flex: 1; margin-bottom: 18px; }
.sw-excerpt em { font-style: italic; }
.sw-tags { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.sw-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 0.5px solid var(--border); }
.sw-patient strong { font-size: 13px; font-weight: 500; color: var(--text-dark); display: block; }
.sw-link { font-size: 13px; color: var(--blue); font-weight: 500; text-decoration: none; }
.sw-link::after { content: ' →'; }

/* CTA — .btn-white already exists verbatim (see PAGE: treatments) */
.cta-bar { background: var(--navy); border-radius: var(--radius-xl); padding: 36px 40px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-top: 48px; }
.cta-title { font-family: 'Playfair Display', serif; font-size: 22px; color: #fff; font-weight: 500; margin-bottom: 8px; }
.cta-sub { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.6; }

/* RESPONSIVE (added — the source template has no @media rules at all; breakpoints mirror the
   pattern already used on every other new-site page) */
@media (max-width: 860px) {
  .ns-stories .page-hero-inner { grid-template-columns: 1fr; }
  .story-featured { grid-template-columns: 1fr; }
  .sf-right { min-height: 200px; }
  .all-stories-grid { grid-template-columns: repeat(2,1fr); }
  .cta-bar { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .all-stories-grid { grid-template-columns: 1fr; }
  .doctify-banner-inner { flex-direction: column; align-items: flex-start; }
}

/* ══ PAGE: patient-story ══ */

/* BREADCRUMB — .breadcrumb-bar/.breadcrumb-inner/.breadcrumb-bar a/.sep/.current already exist
   verbatim (see PAGE: condition) */

/* STORY HERO */
.story-hero { background: var(--white); border-bottom: 1px solid var(--border); padding: 48px 32px; }
.story-hero-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }

/* KICKER — collides with the shared .story-kicker (wider gap/before-bar, different letter
   spacing on this page); only the differing properties are overridden */
.ns-story .story-kicker { letter-spacing: .08em; gap: 8px; }
.ns-story .story-kicker::before { width: 24px; }

.story-h1 { font-family: 'Playfair Display', serif; font-size: 38px; font-weight: 500; color: var(--text-dark); line-height: 1.2; margin-bottom: 20px; }
.story-tags { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.stag-video { background: var(--navy); color: rgba(255,255,255,.8); }
/* .stag — collides with the listing page's smaller pill (10px/3px 8px); this page's tags are
   slightly larger (11px/4px 12px) */
.ns-story .stag { font-size: 11px; padding: 4px 12px; }
.story-patient { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 24px; }
.patient-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--teal-pale); color: var(--teal); font-size: 16px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.patient-name { font-size: 16px; font-weight: 500; color: var(--text-dark); }
/* .story-intro-quote (unused — was Rezum-specific summary prose in the template; the DB
   content field has no separate "intro" text distinct from the story body itself, so this is
   dropped per the detail-page rule rather than fabricated) */

/* VIDEO EMBED — .video-thumb/.video-thumb img already exist verbatim (see PAGE: treatment,
   currently unused there); .video-overlay/.video-play/.video-cap-title/.video-cap-sub are new
   names (distinct from that page's .video-thumb-overlay/.video-play-btn/.video-caption-title/
   .video-caption-sub). .video-caption collides on padding only. */
.story-video { border-radius: var(--radius-xl); overflow: hidden; background: var(--navy); }
.video-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,36,58,.75) 30%, rgba(8,36,58,.1) 100%); }
.video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 64px; height: 64px; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.6); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.video-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; }
.ns-story .video-caption { padding: 16px 20px; }
.video-cap-title { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 3px; }
.video-cap-sub { font-size: 12px; color: rgba(255,255,255,.5); }

/* SIDEBAR CTA — .appt-card/.appt-card-sub/.btn-book collide on small spacing values only;
   .appt-card-title already matches verbatim (see PAGE: condition). .btn-call (phone link) is
   dropped, same as on the condition/treatment pages. */
.ns-story .appt-card { padding: 22px; }
.appt-card-kicker { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7EC8F0; margin-bottom: 8px; }
.ns-story .appt-card-sub { margin-bottom: 16px; }
.ns-story .btn-book { padding: 12px 20px; margin-bottom: 8px; }

/* TREATMENT / CONDITION SIDEBAR CARDS — .treatment-card-link/.tcl-* are new. .condition-card-link
   /.ccl-* already exist (see PAGE: treatment, unused there) but with the opposite colour: this
   template pairs treatment=blue with condition=teal, so the existing blue .condition-card-link
   is overridden here rather than reused. */
.treatment-card-link { background: var(--blue-pale); border: 1px solid rgba(26,126,200,.2); border-radius: var(--radius-lg); padding: 16px 18px; text-decoration: none; display: block; margin-bottom: 16px; }
.tcl-label { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin-bottom: 5px; }
.tcl-title { font-size: 14px; font-weight: 500; color: var(--text-dark); margin-bottom: 3px; }
.tcl-link { font-size: 12px; color: var(--blue); font-weight: 500; }
.ns-story .condition-card-link { background: var(--teal-pale); border-color: rgba(14,124,106,.2); }
.ns-story .ccl-label { color: var(--teal); margin-bottom: 5px; }
.ns-story .ccl-title { margin-bottom: 3px; }
.ns-story .ccl-link { color: var(--teal); }

/* STORY BODY */
.story-body { padding: 0 32px 64px; }
.story-body-inner { max-width: 1120px; margin: 0 auto; padding-top: 48px; max-width: 740px; }
/* .back-link collides with the shared version (36px bottom margin here, same override already
   used on PAGE: news-item) */
.ns-story .back-link { margin-bottom: 36px; }

/* .story-text — the template only styles p; live story `content` fields also carry strong/br/a/
   iframe (surveyed across all active rows — 3 of 52 embed a YouTube iframe directly in the rich
   text), so those are added here for legibility, mirroring how PAGE: news-item extends
   .article-text */
.story-text { font-size: 16px; color: var(--text-mid); line-height: 1.8; }
.story-text p { margin-bottom: 20px; }
.story-text p:last-child { margin-bottom: 0; }
.story-text strong { color: var(--text-dark); font-weight: 600; }
.story-text a { color: var(--blue); }
.story-text iframe { max-width: 100%; margin: 12px 0; }

/* .pull-quote (unused — the template's mid-article pull-quote was Rezum-specific copy lifted
   verbatim from the story text; since $story->content is rendered in full via {!! !!}, that
   sentence already appears as a normal paragraph, so a separate pulled-out quote block isn't
   reconstructable from the DB for the other 51 stories and is dropped per the detail-page rule) */

/* MORE STORIES — the template's 3-card "related stories" grid used hardcoded example content;
   patientStory() only supplies $story (no related-stories collection) and the controller is
   off-limits to modify, so this is a single link back to the listing instead (see report) */
.related-section { max-width: 1120px; margin: 0 auto; padding: 48px 32px; }

@media (max-width: 860px) {
  .story-hero-inner { grid-template-columns: 1fr; }
}

/* ══ PAGE: faqs ══ */

/* PAGE HERO — collides with the shared .page-hero-inner (single-column here: the template's
   own .quick-links-box sidebar assumed FAQ topic sections with #anchor jump-links, but the faq
   WebsiteContent rows carry no section/topic field — verified against the admin form and DB
   schema, title/content/sort_order only — so the accordion renders as one flat list in
   sort_order and the section-jump sidebar has nothing left to link to; dropped rather than left
   broken, see report) */
.ns-faqs .page-hero-inner { display: block; }
.ns-faqs .page-hero-sub { max-width: 640px; }

/* QUICK LINKS BOX (unused — see PAGE HERO note above; kept for design-fidelity/reuse) */
.quick-links-box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 20px 22px; }
.qlb-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7EC8F0; margin-bottom: 12px; }
.qlb-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.qlb-list a { color: rgba(255,255,255,.7); font-size: 13px; text-decoration: none; display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.qlb-list a:hover { color: #fff; }
.qlb-list a::before { content: '↓'; color: #7EC8F0; font-size: 11px; flex-shrink: 0; }

/* FAQ CONTENT */
.faq-page { padding: 56px 32px 64px; }
.faq-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 48px; }

/* CATEGORIES (unused — see PAGE HERO note above; kept for design-fidelity/reuse) */
.faq-section { margin-bottom: 48px; }
.faq-section:last-child { margin-bottom: 0; }
.faq-section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.faq-section-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.faq-section-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 500; color: var(--text-dark); }

/* ACCORDION */
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 8px; background: var(--white); }
.faq-question { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: 'Inter', sans-serif; }
.faq-question:hover { background: var(--surface); }
.fq-text { font-size: 14.5px; font-weight: 500; color: var(--text-dark); line-height: 1.4; text-align: left; }
.fq-icon { width: 24px; height: 24px; background: var(--blue-pale); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; color: var(--blue); font-weight: 600; transition: transform .2s; }
.faq-answer { padding: 0 20px 18px; font-size: 14px; color: var(--text-mid); line-height: 1.75; }
.faq-answer p { margin-bottom: 10px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: var(--blue); text-decoration: none; font-weight: 500; }
.faq-answer a:hover { text-decoration: underline; }
.faq-answer ul { margin: 8px 0 8px 16px; }
.faq-answer ul li { margin-bottom: 4px; font-size: 14px; color: var(--text-mid); }

/* SIDEBAR */
.faq-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
.contact-card { background: var(--navy); border-radius: var(--radius-lg); padding: 24px; }
.cc-title { font-size: 14px; font-weight: 500; color: #fff; margin-bottom: 6px; }
.cc-sub { font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 18px; line-height: 1.5; }
/* .btn-book/.btn-call collide with the shared versions (see PAGE: condition / PAGE: treatment) —
   this page uses slightly tighter spacing */
.ns-faqs .btn-book { padding: 12px 20px; margin-bottom: 8px; }
/* .insurance-card already exists verbatim (see PAGE: treatment) */
.ic-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-lite); margin-bottom: 10px; }
.ic-logos { display: flex; flex-wrap: wrap; gap: 6px; }
.ic-logo { font-size: 12px; font-weight: 500; color: var(--text-mid); background: var(--surface); border: 0.5px solid var(--border); padding: 4px 10px; border-radius: 20px; }
.still-q { background: var(--gold-pale); border: 1px solid rgba(200,150,10,.2); border-radius: var(--radius-lg); padding: 18px; }
.sq-title { font-size: 13px; font-weight: 500; color: var(--text-dark); margin-bottom: 6px; }
.sq-text { font-size: 12px; color: var(--text-mid); line-height: 1.5; margin-bottom: 12px; }
.sq-link { font-size: 13px; color: var(--gold); font-weight: 500; text-decoration: none; }

@media (max-width: 860px) {
  .faq-inner { grid-template-columns: 1fr; }
  .faq-sidebar { position: static; }
}

/* ══ PAGE: info-sheets ══ */

/* new custom properties (added — the source template's own :root defines --purple/--purple-pale
   for the "Research" tag/icon variant; the shared :root above has no purple, so it's added here
   rather than touching that block) */
:root { --purple: #5B4DB5; --purple-pale: #EEEDFE; }

/* PAGE HERO — collides with the shared .page-hero-inner (centered items here vs the base's
   end-aligned) and .page-hero-sub (adds a margin-bottom the base rule doesn't have) */
.ns-info-sheets .page-hero-inner { align-items: center; }
.ns-info-sheets .page-hero-sub { margin-bottom: 24px; }

/* HERO STATS — collides with the base .hero-stats (homepage: a boxed 3-col grid with
   background/border-radius/overflow/margin-top). This page's template rule is just
   `display:flex; gap:28px;`, so the base's box properties must be explicitly reset here or they
   cascade in and wrap the stats in an unintended translucent rounded box. The child .hs-num/
   .hs-label are new class names (distinct from the shared .hero-stat-num/.hero-stat-label),
   so they need no override. */
.ns-info-sheets .hero-stats { display: flex; gap: 28px; background: none; border-radius: 0; overflow: visible; margin-top: 0; }
.hs-num { font-size: 24px; font-weight: 600; color: #fff; line-height: 1; }
.hs-label { font-size: 11px; color: rgba(255,255,255,.45); letter-spacing: .04em; margin-top: 2px; }

.hero-note-box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 22px 24px; }
.hnb-title { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7EC8F0; margin-bottom: 10px; }
.hnb-text { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.65; margin-bottom: 14px; }
.hnb-link { font-size: 13px; color: #7EC8F0; font-weight: 500; text-decoration: none; }
.hnb-link::after { content: ' →'; }

/* SEARCH — .filter-bar/.filter-inner/.filter-label/.filter-search already exist verbatim (see
   PAGE: treatments / PAGE: news). The source template's category pills (onclick="filterSheets()")
   have no live-data equivalent — info-sheet rows carry no category/type field (verified against
   the admin form and DB schema: title/content/asset_id/sort_order/is_active only) — so instead of
   faking categories, the pill row is replaced with a working client-side keyword search over the
   rendered .sheet-name text (see the page's @push('scripts')); this needed only the sticky
   positioning the template added on top of the shared .filter-bar. */
.ns-info-sheets .filter-bar { position: sticky; top: 60px; z-index: 90; }

/* SECTION — collides with the shared .section (tighter padding here, same override already used
   on PAGE: conditions / PAGE: treatments) */
.ns-info-sheets .section { padding: 52px 32px; }

/* CATEGORY GROUPS (unused — all 44 active info-sheets render as one flat list in sort_order per
   the brief, for the same no-category-field reason as the search note above; kept for
   design-fidelity/reuse) */
.category-group { margin-bottom: 52px; }
.category-group:last-child { margin-bottom: 0; }
.category-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.cat-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.cat-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 500; color: var(--text-dark); }
.cat-count { font-size: 12px; color: var(--text-lite); background: var(--surface); border: 0.5px solid var(--border); padding: 2px 10px; border-radius: 20px; }

/* SHEET GRID */
.sheets-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.sheet-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; display: flex; align-items: center; gap: 16px; transition: all .15s; }
.sheet-card:hover { border-color: var(--blue); box-shadow: 0 2px 12px rgba(26,126,200,.08); }
.sheet-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* every sheet renders with .si-blue (see SEARCH note — no per-sheet category to pick an icon
   colour); the other 5 variants are kept for design-fidelity/reuse */
.si-blue   { background: var(--blue-pale); }
.si-teal   { background: var(--teal-pale); }
.si-coral  { background: var(--coral-pale); }
.si-gold   { background: var(--gold-pale); }
.si-navy   { background: #E8EEF3; }
.si-purple { background: var(--purple-pale); }
.sheet-icon svg { width: 22px; height: 22px; }
.sheet-body { flex: 1; }
.sheet-name { font-size: 14px; font-weight: 500; color: var(--text-dark); line-height: 1.35; margin-bottom: 3px; }
.sheet-desc { font-size: 12px; color: var(--text-lite); line-height: 1.45; }
/* .sheet-tag and its colour variants (unused — same no-category-field reason as above;
   .tag-diagnostic already exists verbatim, see PAGE: treatments); kept for design-fidelity/reuse */
.sheet-tag { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 20px; margin-top: 5px; }
.tag-conditions { background: var(--blue-pale); color: var(--blue); }
.tag-treatment { background: var(--teal-pale); color: var(--teal); }
.tag-procedure { background: var(--coral-pale); color: var(--coral); }
.tag-research  { background: var(--purple-pale); color: var(--purple); }
.tag-general   { background: var(--surface); color: var(--text-lite); border: 0.5px solid var(--border); }
.sheet-download { flex-shrink: 0; }
.dl-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--blue); text-decoration: none; background: var(--blue-pale); padding: 8px 14px; border-radius: var(--radius-sm); transition: all .15s; white-space: nowrap; cursor: pointer; list-style: none; }
.dl-btn::-webkit-details-marker { display: none; }
.dl-btn:hover { background: var(--blue); color: #fff; }
.dl-btn svg { width: 14px; height: 14px; }

/* DOWNLOAD FORM (added — not in the source template, which links straight to a hardcoded
   urologypartners.co.uk PDF URL; mirrors the live front/info-sheets.blade.php modal's fields
   [@csrf, hidden file_id, email capture, skip-to-direct-link] via route('download'), adapted to a
   small popover anchored under the PDF pill rather than a Bootstrap modal, since new-site pages
   don't load Bootstrap JS) */
.dl-details { position: relative; }
.dl-form { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 260px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; box-shadow: 0 8px 24px rgba(8,36,58,.15); display: flex; flex-direction: column; gap: 8px; }
.dl-form-label { font-size: 11px; color: var(--text-mid); line-height: 1.4; }
.dl-form-input { font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dark); }
.dl-form-input:focus { outline: none; border-color: var(--blue); }
.dl-form-submit { font-size: 12.5px; font-weight: 600; color: #fff; background: var(--blue); border: none; padding: 8px 12px; border-radius: var(--radius-sm); cursor: pointer; transition: background .15s; }
.dl-form-submit:hover { background: var(--blue-lite); }
.dl-form-skip { font-size: 11px; color: var(--text-lite); text-decoration: underline; text-align: center; }
.dl-form-skip:hover { color: var(--blue); }

/* CTA BANNER — .cta-title/.cta-sub already exist verbatim (see PAGE: patient-stories);
   .btn-white already exists verbatim (see PAGE: treatments); .cta-banner is a new container name
   (distinct from that page's .cta-bar) */
.cta-banner { background: var(--navy); border-radius: var(--radius-xl); padding: 32px 40px; display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-top: 48px; }

/* RESPONSIVE (added — the source template has no @media rules at all, same convention used on
   every other new-site page) */
@media (max-width: 860px) {
  .sheets-grid { grid-template-columns: 1fr; }
  .cta-banner { grid-template-columns: 1fr; text-align: center; }
}

/* ══ PAGE: contact ══ */

/* PAGE HERO — .page-hero/.breadcrumb/.page-hero h1/.page-hero-sub already exist verbatim (see
   PAGE: conditions). .page-hero-inner collides: this page uses a 1fr/1fr split with items
   centered, vs the shared 1fr/360px split end-aligned */
.ns-contact .page-hero-inner { grid-template-columns: 1fr 1fr; align-items: center; }

/* BOOK CARD (hero CTA panel) — new, not used on any other page */
.book-card { background: var(--blue); border-radius: var(--radius-xl); padding: 32px 28px; }
.bc-title { font-size: 18px; font-weight: 500; color: #fff; margin-bottom: 8px; }
.bc-sub { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.55; margin-bottom: 20px; }
.btn-book-hero { display: block; background: #fff; color: var(--navy); font-size: 15px; font-weight: 600; padding: 14px 20px; border-radius: var(--radius-md); text-decoration: none; text-align: center; margin-bottom: 10px; }
.btn-book-hero:hover { background: var(--surface); }

/* SECTION — collides with the shared .section/.section-title/.section-sub (tighter spacing;
   the base rules also carry a line-height/letter-spacing/max-width this page's version doesn't
   set, so those are reset explicitly rather than left to leak through) */
.ns-contact .section { padding: 52px 32px; }
.ns-contact .section-title { font-size: 28px; margin-bottom: 6px; line-height: 1.6; letter-spacing: normal; }
.ns-contact .section-sub { line-height: 1.6; margin-bottom: 32px; max-width: none; }

/* SECRETARY GRID (secretarial-team contact cards) — new. .sc-avatar-placeholder replaces the
   template's <img> (which hardcoded live urologypartners.co.uk production URLs — disallowed by
   the "no hardcoded production URLs" rule); doctor rows have no thumbnail field to fall back to */
.secretary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.secretary-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px 20px 18px; }
.sc-consultant { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 0.5px solid var(--border); }
.sc-avatar-placeholder { width: 44px; height: 44px; border-radius: 50%; background: var(--blue-pale); color: var(--blue); font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sc-con-name { font-size: 14px; font-weight: 500; color: var(--text-dark); }
.sc-con-title { font-size: 11px; color: var(--text-lite); }
.sc-label { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-lite); margin-bottom: 8px; }
.sc-name { font-size: 13px; font-weight: 500; color: var(--text-dark); margin-bottom: 8px; }
.sc-contact { display: flex; flex-direction: column; gap: 5px; }
.sc-link { font-size: 13px; color: var(--blue); text-decoration: none; display: flex; align-items: center; gap: 6px; }
.sc-link:hover { text-decoration: underline; }
.sc-link-icon { font-size: 13px; flex-shrink: 0; }

/* GENERAL CONTACT FORM — new */
.contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: start; }
.form-group { margin-bottom: 18px; }
.form-label { font-size: 13px; font-weight: 500; color: var(--text-dark); display: block; margin-bottom: 6px; }
.form-input { width: 100%; padding: 10px 14px; font-size: 14px; font-family: 'Inter', sans-serif; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-dark); background: var(--white); transition: border-color .15s; }
.form-input:focus { outline: none; border-color: var(--blue); }
textarea.form-input { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-input.has-error { border-color: var(--coral); }
.field-error { display: block; font-size: 12px; color: var(--coral); margin-top: 5px; }
.form-alert { border-radius: var(--radius-md); padding: 14px 18px; font-size: 13px; margin-bottom: 20px; }
.form-alert-success { background: var(--teal-pale); color: var(--teal); border: 1px solid rgba(14,124,106,.25); }
.btn-submit { background: var(--blue); color: #fff; font-size: 14px; font-weight: 600; padding: 13px 28px; border-radius: var(--radius-md); border: none; cursor: pointer; width: 100%; font-family: 'Inter', sans-serif; }
.btn-submit:hover { background: var(--blue-lite); }
.form-note { font-size: 12px; color: var(--text-lite); margin-top: 10px; line-height: 1.5; }
.contact-info-card { background: var(--navy); border-radius: var(--radius-xl); padding: 28px; }
.cic-title { font-size: 16px; font-weight: 500; color: #fff; margin-bottom: 20px; }
.cic-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.cic-icon { width: 36px; height: 36px; background: rgba(255,255,255,.08); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.cic-label { font-size: 11px; color: rgba(255,255,255,.4); margin-bottom: 3px; }
.cic-value { font-size: 14px; color: #fff; font-weight: 400; }
.cic-value a { color: #7EC8F0; text-decoration: none; }

/* HOSPITAL LOCATIONS — .hospitals-grid is new (distinct from the team page's singular
   .hospital-grid). .hospital-card collides with the team page's unscoped version (rgba
   background/tighter radius/smaller padding there vs white/larger radius/padding here) — every
   differing property is overridden. .hc-region/.region-* from the source template are NOT
   ported: there is no county/region field on the clinic model to group by, so this page never
   renders that markup */
.hospitals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ns-contact .hospital-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; }
.hc-name { font-size: 14px; font-weight: 500; color: var(--text-dark); margin-bottom: 4px; }
.hc-address { font-size: 12px; color: var(--text-lite); line-height: 1.5; }

/* RESPONSIVE (added — the source template has no @media rules at all, same convention used on
   every other new-site page) */
@media (max-width: 860px) {
  .ns-contact .page-hero-inner { grid-template-columns: 1fr; }
  .secretary-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .hospitals-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .secretary-grid, .hospitals-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ══ FIX WAVE 2: homepage aligned with option-1 (real logo, live Doctify widget, consultants photo) ══ */
.nav-logo-img { height: 34px; width: auto; display: block; }
.footer-logo-img { height: 40px; width: auto; display: block; margin-bottom: 14px; }
/* Hero frame switches from dashed placeholder to a real photo */
.hero-photo-frame--img { background: none; border: 1px solid rgba(255,255,255,.15); padding: 0; overflow: hidden; }
.hero-photo-frame--img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Doctify third-party widget containers — the script controls its own inner layout */
.trust-inner--doctify { display: block; height: auto; padding: 14px 0; }
.doctify-embed { margin-top: 8px; }
.doctify-see-all { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--blue); text-decoration: none; font-weight: 500; }
.doctify-see-all:hover { text-decoration: underline; }

/* ══ FIX WAVE 3: client feedback (2026 re-design, round 1) ══════════════════════ */

/* HOMEPAGE — treatment cards are now CMS-picked, so the grid has to cope with 3 or 4
   cards (auto-fit collapses the unused track, keeping 3 cards full-width). */
.ns-home .treatments-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Featured patient story with no video id: the media panel is omitted entirely. */
.story-grid--no-media { grid-template-columns: 1fr; }

/* CONDITIONS — symptom prompts link through to the condition they point to */
.hsb-list a { color: rgba(255,255,255,.85); text-decoration: none; border-bottom: 1px solid rgba(126,200,240,.35); }
.hsb-list a:hover { color: #fff; border-bottom-color: #7EC8F0; }

/* TEAM — "Find by specialism". .consultant-card sets display:flex, which beats the
   browser's [hidden] rule, so the filtered-out cards need it spelled out. */
.consultant-card[hidden] { display: none; }
.filter-empty { font-size: 14px; color: var(--text-mid); margin-top: 8px; }
.filter-reset { font-size: 14px; color: var(--blue); font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }

/* TEAM — nursing / secretarial cards carry contact details instead of a profile link */
.consultant-card--static { cursor: default; }
.consultant-card--static:hover { box-shadow: none; transform: none; }
.consultant-card-contact { padding: 10px 16px 12px; border-top: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 5px; }
.ccc-link { font-size: 12px; color: var(--blue); text-decoration: none; display: flex; align-items: center; gap: 6px; word-break: break-word; }
.ccc-link:hover { text-decoration: underline; }
.ccc-icon { color: var(--text-lite); flex-shrink: 0; }

/* TEAM — hospital locations are clickable where the clinic has a website */
a.hloc { text-decoration: none; transition: background .15s, color .15s; }
a.hloc:hover { background: rgba(126,200,240,.2); color: #fff; }

/* CONSULTANT PROFILE — secretary contact card under the booking CTA */
.secretary-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; margin-top: 14px; }
.secretary-box-title { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.secretary-box-sub { font-size: 12px; color: var(--text-lite); line-height: 1.5; margin-bottom: 10px; }
.secretary-box-name { font-size: 13px; font-weight: 500; color: var(--text-dark); margin-bottom: 8px; }
.secretary-box-links { display: flex; flex-direction: column; gap: 6px; }
.secretary-box-links a { font-size: 12.5px; color: var(--blue); text-decoration: none; display: flex; align-items: center; gap: 6px; word-break: break-word; }
.secretary-box-links a:hover { text-decoration: underline; }
.sb-icon { color: var(--text-lite); flex-shrink: 0; }

/* CONSULTANT PROFILE — news / blog posts the consultant features in */
.profile-news-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.profile-news-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px; text-decoration: none; display: flex; flex-direction: column; transition: all .15s; }
.profile-news-item:hover { border-color: var(--blue); box-shadow: 0 6px 22px rgba(8,36,58,.08); }
.pni-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pni-type { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: var(--blue-pale); padding: 2px 8px; border-radius: 20px; }
.pni-date { font-size: 11px; color: var(--text-lite); }
.pni-title { font-size: 14px; font-weight: 500; color: var(--text-dark); line-height: 1.4; margin-bottom: 6px; }
.pni-excerpt { font-size: 12.5px; color: var(--text-mid); line-height: 1.55; flex: 1; margin-bottom: 10px; }
.pni-link { font-size: 12px; color: var(--blue); font-weight: 500; }

/* CONTACT — hospital cards link out to the hospital's own website */
.ns-contact .hospital-card--link { display: block; text-decoration: none; transition: all .15s; }
.ns-contact .hospital-card--link:hover { border-color: var(--blue); box-shadow: 0 6px 22px rgba(8,36,58,.08); }
.hc-link { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--blue); font-weight: 500; }

/* NEWS — "Blog Post" type badge (slugified, so .badge-blog-post) */
.badge-blog-post { background: var(--teal-pale); color: var(--teal); }

/* ══ PAGE: page (privacy policy, terms & conditions) ══ */
/* Plain CMS copy in the article layout (see PAGE: news-item); nothing page-specific needed. */

/* ══ PAGE: appointment ══ */
.appointment-sub { font-size: 15px; color: var(--text-mid); line-height: 1.65; margin-top: 14px; }
.appointment-body { padding: 40px 32px 64px; }
.appointment-inner { max-width: 1120px; margin: 0 auto; }
.appointment-frame { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: 28px; }
.appointment-frame iframe { display: block; width: 100%; height: 720px; border: 0; }
.ns-appointment .back-link { margin-bottom: 0; }
@media (max-width: 560px) {
  .appointment-body { padding: 24px 16px 48px; }
  .appointment-frame iframe { height: 640px; }
}

/* ══ PAGE: videos-library ══ */
/* PAGE HERO — collides with the shared .page-hero-inner (single-column here, no side box) */
.ns-videos .page-hero-inner { display: block; }
.ns-videos .page-hero-sub { max-width: 640px; }
.ns-videos .page-hero-sub p { margin-bottom: 10px; }
.ns-videos .page-hero-sub p:last-child { margin-bottom: 0; }
.videos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.video-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.video-card:hover, .video-card:focus-visible { box-shadow: 0 6px 24px rgba(8,36,58,.10); transform: translateY(-2px); outline: none; }
.video-card-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy); }
.video-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-card-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,36,58,.55) 0%, rgba(8,36,58,.05) 60%); }
.video-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 52px; height: 52px; background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.7); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.video-card-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.video-card-body { padding: 16px 18px 18px; }
.video-card-title { font-size: 15px; font-weight: 500; color: var(--text-dark); line-height: 1.4; }
.video-card-desc { font-size: 13px; color: var(--text-mid); line-height: 1.6; margin-top: 8px; }
@media (max-width: 860px) { .videos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .videos-grid { grid-template-columns: 1fr; } }