/* ph-extra.css — additional component styles layered on top of kit.css
   (comparison block, quote block, intro band, 4-up pillars, copy-led hero,
   founding-plan highlight, dark-CTA eyebrow, 4-column footer). */

/* ---- Heading wrap: avoid balance (capture-renderer mis-sizes balanced boxes) ---- */
.ph-hero-copy h1, .ph-sechead h2, .ph-dpc-lead h2, .ph-cta h2, .ph-intro-lead, .ph-quote blockquote {
  text-wrap: pretty;
}
.ph-hero-copy h1 { line-height: 1.16; }
.ph-sechead h2 { line-height: 1.14; }
.ph-sechead .lead { margin-top: var(--space-2); }
.ph-hero-copy .lead { margin-top: var(--space-2); }

/* ---- Header logo: larger, tight-cropped lockup fills the bar ---- */
.ph-nav-inner { padding-block: 0.95rem; }
.ph-nav-logo img { height: 184px; }
.ph-nav.is-scrolled .ph-nav-logo img { height: 132px; }
@media (max-width: 900px) {
  /* Center the logo; float the menu button to the right edge. */
  .ph-nav-inner { padding-block: 0.7rem; justify-content: center; position: relative; }
  .ph-nav-logo img { height: 99px; }
  .ph-nav.is-scrolled .ph-nav-logo img { height: 84px; }
  .ph-nav-burger { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); margin: 0; z-index: 1; }
}

/* ---- Nav active state + utility bar layout ---- */
.ph-nav-links a.is-active { color: var(--green-700); position: relative; }
.ph-nav-links a.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--green-500); border-radius: 2px;
}
.ph-nav-mobile a.is-active { color: var(--green-700); }
.ph-nav-util-loc { margin-right: auto; }

/* ---- Emergency notice strip ---- */
.ph-emergency {
  display: flex; align-items: flex-start; gap: 10px; max-width: var(--container-max);
  margin: 0 auto; padding: var(--space-4) var(--space-5);
  background: var(--danger-bg); border: 1px solid #F0CFCF; border-radius: var(--radius-md);
  color: var(--neutral-800); font-size: var(--text-sm); line-height: var(--leading-normal);
}
.ph-emergency svg { flex: none; margin-top: 2px; }
.ph-emergency strong { color: var(--danger); }

/* ---- Slim reassurance band ---- */
.ph-reassure {
  display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
  font-family: var(--font-heading); font-weight: 500; font-size: var(--text-lg);
  color: var(--navy-800); padding: var(--space-5) var(--gutter);
}

/* ---- Real photo inside .ph-photo container ---- */
.ph-photo-real { background: var(--neutral-100); }
.ph-photo-real::after { display: none; }
.ph-photo-real img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- 4-up value-pillar grid ---- */
.ph-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
/* Subtle palette tints on the "Why patients choose us" cards (home only). */
#services .ph-grid-4 > .ph-feature:nth-child(1) { background: var(--green-50); }
#services .ph-grid-4 > .ph-feature:nth-child(2) { background: var(--navy-50); }
#services .ph-grid-4 > .ph-feature:nth-child(3) { background: var(--sand-100); }
#services .ph-grid-4 > .ph-feature:nth-child(4) { background: #EDEEF0; }

/* ---- Calm intro band ---- */
.ph-intro { text-align: center; }
.ph-intro-lead {
  max-width: 46rem; margin: 0 auto; font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(1.45rem, 2.6vw, 2rem); line-height: var(--leading-snug);
  color: var(--fg1); letter-spacing: var(--tracking-tight); text-wrap: balance;
}

/* ---- "What is DPC" teaser (two-column intro) ---- */
.ph-dpc-intro { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.ph-dpc-lead h2 { margin: 0.5rem 0 0; }
.ph-dpc-body p:last-of-type { margin-bottom: var(--space-5); }

.ph-about-actions { margin-top: var(--space-6); }
.ph-center-cta { text-align: center; margin-top: var(--space-6); }

/* ---- Comparison: TABLE variant ---- */
.ph-cmp-table {
  display: grid; grid-template-columns: 0.85fr 1fr 1fr; max-width: 1000px; margin: 0 auto;
  background: #fff; border: 1px solid var(--border-subtle); border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.ph-cmp-row { display: contents; }
.ph-cmp-cell {
  display: flex; align-items: flex-start; gap: 9px; padding: var(--space-4);
  border-bottom: 1px solid var(--border-subtle); font-size: var(--text-base); color: var(--fg2);
}
.ph-cmp-cell svg { flex: none; margin-top: 2px; }
.ph-cmp-headrow .ph-cmp-cell {
  border-bottom: 1.5px solid var(--border-default); font-family: var(--font-heading);
  font-weight: 600; color: var(--fg1); font-size: var(--text-md); padding-block: var(--space-5);
}
.ph-cmp-rowlabel { font-weight: 700; color: var(--fg1); }
.ph-cmp-col-trad { color: var(--fg3); }
.ph-cmp-col-ph { background: var(--green-50); color: var(--navy-900); font-weight: 600; }
.ph-cmp-headrow .ph-cmp-col-ph { background: var(--green-100); }
.ph-cmp-col-ph-tag { font-family: var(--font-body); font-weight: 800; letter-spacing: 0.04em; color: var(--green-800); }
.ph-cmp-row:last-child .ph-cmp-cell { border-bottom: none; }

/* ---- Comparison: CARDS variant ---- */
.ph-cmp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); max-width: 940px; margin: 0 auto; align-items: stretch; }
.ph-cmp-card { border-radius: var(--radius-xl); padding: var(--space-6); border: 1px solid var(--border-subtle); }
.ph-cmp-card.is-trad { background: #fff; }
.ph-cmp-card.is-ph { background: linear-gradient(160deg, var(--navy-800), var(--navy-900)); color: var(--fg-on-dark); border-color: var(--navy-800); box-shadow: var(--shadow-lg); }
.ph-cmp-card-head { margin-bottom: var(--space-5); }
.ph-cmp-tag { display: inline-block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; color: var(--fg3); margin-bottom: 8px; }
.ph-cmp-card.is-ph .ph-cmp-tag { color: var(--green-300); }
.ph-cmp-card.is-ph h3 { color: #fff; }
.ph-cmp-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.ph-cmp-card li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--text-base); }
.ph-cmp-card li svg { flex: none; margin-top: 2px; }
.ph-cmp-card.is-trad li { color: var(--fg2); }
.ph-cmp-card.is-trad li strong { color: var(--fg1); }
.ph-cmp-card.is-ph li { color: var(--navy-100); }
.ph-cmp-card.is-ph li strong { color: #fff; }

/* ---- Quote block ---- */
.ph-quote { max-width: 760px; margin: 0 auto; text-align: center; }
.ph-quote-mark { width: 64px; height: 64px; border-radius: 50%; background: var(--green-50); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-5); }
.ph-quote blockquote {
  font-family: var(--font-heading); font-weight: 500; font-size: clamp(1.5rem, 2.8vw, 2.15rem);
  line-height: var(--leading-snug); color: var(--fg1); margin: 0 0 var(--space-5);
  letter-spacing: var(--tracking-tight); text-wrap: balance;
}
.ph-quote figcaption { display: flex; flex-direction: column; gap: 2px; }
.ph-quote-name { font-weight: 700; color: var(--navy-800); }
.ph-quote-detail { font-size: var(--text-sm); color: var(--fg3); }

/* ---- Founding-plan highlight line ---- */
.ph-plan-highlight {
  display: inline-flex; align-items: center; gap: 7px; margin: var(--space-3) 0 0;
  font-size: var(--text-sm); font-weight: 700; color: var(--green-800);
  background: var(--green-50); border-radius: var(--radius-pill); padding: 7px 14px;
}

/* ---- Eyebrow on the dark CTA band ---- */
.ph-cta-eyebrow { color: var(--green-300); display: block; margin-bottom: var(--space-3); }

/* ---- Copy-led hero variant ---- */
.ph-hero.is-copyled { padding-bottom: 0; }
.ph-hero-centered { max-width: 48rem; margin: 0 auto; text-align: center; }
.ph-hero-centered .lead { margin-left: auto; margin-right: auto; }
.ph-hero-centered .ph-hero-actions,
.ph-hero-centered .ph-hero-trust { justify-content: center; }
.ph-hero-band { position: relative; max-width: var(--container-max); margin: clamp(2rem, 5vw, 3.5rem) auto 0; padding-inline: var(--gutter); }

/* ---- 4-column footer ---- */
.ph-footer-grid { grid-template-columns: 1.7fr 1.2fr 1fr 1fr; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .ph-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ph-dpc-intro { grid-template-columns: 1fr; gap: var(--space-5); }
  .ph-cmp-cards { grid-template-columns: 1fr; }
  .ph-footer-grid { grid-template-columns: 1fr 1fr; }
  .ph-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .ph-grid-4 { grid-template-columns: 1fr; }
  .ph-footer-grid { grid-template-columns: 1fr; }
  .ph-cmp-table { grid-template-columns: 0.8fr 1fr 1fr; }
  .ph-cmp-cell { padding: 11px 7px; font-size: var(--text-xs); gap: 4px; }
  .ph-cmp-headrow .ph-cmp-cell { font-size: var(--text-sm); padding-block: 13px; }
  .ph-cmp-cell svg { width: 13px; height: 13px; margin-top: 1px; }
}