/**
 * ESLS Theme Customizer — global CSS classes.
 *
 * Source of truth: esls-brand-tokens-v1.md (type scale, buttons, cards, motion),
 * verified against esls-pattern-library-v0_2.md (P-01…P-10) and the actual
 * _css_classes emitted by esls-homepage-elementor-v1.json.
 *
 * CANONICAL NAMING (Session A gate resolution): every class is `esls-`-prefixed —
 * including the type scale (esls-display-1, esls-h2, esls-body-lg, esls-eyebrow,
 * esls-meta …). This is what the Homepage JSON and the pattern library already
 * emit, and it is required for the universal `[class*="esls-"]` heading reset to
 * fire. Bare `.h2` / `.body` / `.caption` are intentionally NOT defined — they
 * collide with Hello Elementor / Pro globals.
 *
 * Selector strategy: Elementor Pro Theme Styles apply high-specificity
 * `!important` rules to `.elementor-button` and `.elementor-heading-title`.
 * The only reliable override is to drill to those inner nodes with `!important`.
 * The class may sit on the widget wrapper (`.elementor-widget-button`) OR on an
 * inner wrapper depending on how `_css_classes` resolves, so each button rule is
 * written with both attachment points as a fallback pair.
 *
 * Depends on esls-tokens.css (:root custom properties) + esls-fonts.css (@font-face).
 *
 * @package esls-institutional-content
 * @version 0.1.1
 */

/* ═════════════════════════════════════════════════════════════════════
   §1. Universal heading-margin reset (RULE-011, made global)
   ═════════════════════════════════════════════════════════════════════ */
[class*="esls-"] .elementor-heading-title { margin: 0 !important; }
[class*="esls-"].elementor-widget-heading { margin: 0 !important; }

/* ═════════════════════════════════════════════════════════════════════
   §2. Type scale — display & headings (Fraunces)
   ═════════════════════════════════════════════════════════════════════ */
.esls-display-1 .elementor-heading-title,
.esls-display-2 .elementor-heading-title,
.esls-h1 .elementor-heading-title,
.esls-h2 .elementor-heading-title,
.esls-h3 .elementor-heading-title {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif !important;
  color: var(--esls-blue-900) !important;
  margin: 0 !important;
  letter-spacing: -0.01em;
}

.esls-display-1 .elementor-heading-title {
  font-size: 56px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
}
.esls-display-2 .elementor-heading-title {
  font-size: 44px !important;
  font-weight: 600 !important;
  line-height: 1.10 !important;
  letter-spacing: -0.02em;
}
.esls-h1 .elementor-heading-title {
  font-size: 36px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
}
.esls-h2 .elementor-heading-title {
  font-size: 28px !important;
  font-weight: 600 !important;
  line-height: 1.20 !important;
}
.esls-h3 .elementor-heading-title {
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.30 !important;
}
.esls-h4 .elementor-heading-title {
  font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif !important;
  color: var(--esls-text-primary) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.30 !important;
  margin: 0 !important;
}

/* ═════════════════════════════════════════════════════════════════════
   §3. Type scale — body / labels (Source Sans 3)
   ═════════════════════════════════════════════════════════════════════ */
.esls-body-lg .elementor-widget-container,
.esls-body-lg .elementor-widget-container p,
.esls-body-lg .elementor-heading-title,
.esls-body .elementor-widget-container,
.esls-body .elementor-widget-container p,
.esls-body .elementor-heading-title,
.esls-body-sm .elementor-widget-container,
.esls-body-sm .elementor-widget-container p,
.esls-body-sm .elementor-heading-title {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  color: var(--esls-text-secondary) !important;
  margin: 0 !important;
}
.esls-body-lg .elementor-widget-container,
.esls-body-lg .elementor-widget-container p,
.esls-body-lg .elementor-heading-title { font-size: 17px !important; line-height: 1.6 !important; }
.esls-body .elementor-widget-container,
.esls-body .elementor-widget-container p,
.esls-body .elementor-heading-title    { font-size: 16px !important; line-height: 1.6 !important; }
.esls-body-sm .elementor-widget-container,
.esls-body-sm .elementor-widget-container p,
.esls-body-sm .elementor-heading-title { font-size: 14px !important; line-height: 1.55 !important; }

.esls-eyebrow .elementor-heading-title,
.esls-eyebrow .elementor-widget-container {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--esls-orange-600) !important;
  margin: 0 !important;
}

.esls-meta .elementor-heading-title,
.esls-meta .elementor-widget-container,
.esls-meta .elementor-widget-container p {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--esls-text-tertiary) !important;
  margin: 0 !important;
}

.esls-caption .elementor-heading-title,
.esls-caption .elementor-widget-container,
.esls-caption .elementor-widget-container p {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: var(--esls-text-tertiary) !important;
  margin: 0 !important;
}

/* ═════════════════════════════════════════════════════════════════════
   §4. Type scale — responsive overrides
   Homepage hero H1 locks to 64px at lg (≥1025px), 46 at md, 40 at mobile.
   ═════════════════════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .esls-display-1 .elementor-heading-title { font-size: 64px !important; }
}
@media (max-width: 1024px) {
  .esls-display-1 .elementor-heading-title { font-size: 46px !important; }
  .esls-display-2 .elementor-heading-title { font-size: 40px !important; }
}
@media (max-width: 767px) {
  .esls-display-1 .elementor-heading-title { font-size: 40px !important; }
  .esls-display-2 .elementor-heading-title { font-size: 32px !important; }
  .esls-h2 .elementor-heading-title        { font-size: 22px !important; }
  .esls-h3 .elementor-heading-title        { font-size: 19px !important; }
  .esls-body-lg .elementor-widget-container,
  .esls-body-lg .elementor-widget-container p { font-size: 16px !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   §5. Button system — 5 variants (drill to .elementor-button, !important)
   ═════════════════════════════════════════════════════════════════════ */
.elementor-widget-button.esls-button-primary .elementor-button,
.elementor-widget-button .esls-button-primary .elementor-button,
.elementor-widget-button.esls-button-secondary .elementor-button,
.elementor-widget-button .esls-button-secondary .elementor-button,
.elementor-widget-button.esls-button-outline-blue .elementor-button,
.elementor-widget-button .esls-button-outline-blue .elementor-button,
.elementor-widget-button.esls-button-outline-orange .elementor-button,
.elementor-widget-button .esls-button-outline-orange .elementor-button,
.elementor-widget-button.esls-button-on-dark-outline .elementor-button,
.elementor-widget-button .esls-button-on-dark-outline .elementor-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 11px 20px !important;
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  border-radius: var(--radius-md) !important;
  text-decoration: none !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
}

/* primary-solid */
.elementor-widget-button.esls-button-primary .elementor-button,
.elementor-widget-button .esls-button-primary .elementor-button {
  background-color: var(--esls-orange-400) !important;
  color: #FFFFFF !important;
  border: none !important;
}
.elementor-widget-button.esls-button-primary .elementor-button:hover,
.elementor-widget-button .esls-button-primary .elementor-button:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
}

/* secondary-solid */
.elementor-widget-button.esls-button-secondary .elementor-button,
.elementor-widget-button .esls-button-secondary .elementor-button {
  background-color: var(--esls-blue-400) !important;
  color: #FFFFFF !important;
  border: none !important;
}
.elementor-widget-button.esls-button-secondary .elementor-button:hover,
.elementor-widget-button .esls-button-secondary .elementor-button:hover {
  opacity: 0.88 !important;
  transform: translateY(-1px) !important;
}

/* outline-blue */
.elementor-widget-button.esls-button-outline-blue .elementor-button,
.elementor-widget-button .esls-button-outline-blue .elementor-button {
  background-color: transparent !important;
  color: var(--esls-blue-400) !important;
  border: 1.5px solid var(--esls-blue-400) !important;
}
.elementor-widget-button.esls-button-outline-blue .elementor-button:hover,
.elementor-widget-button .esls-button-outline-blue .elementor-button:hover {
  background-color: var(--esls-blue-50) !important;
}

/* outline-orange */
.elementor-widget-button.esls-button-outline-orange .elementor-button,
.elementor-widget-button .esls-button-outline-orange .elementor-button {
  background-color: transparent !important;
  color: var(--esls-orange-400) !important;
  border: 1.5px solid var(--esls-orange-400) !important;
}
.elementor-widget-button.esls-button-outline-orange .elementor-button:hover,
.elementor-widget-button .esls-button-outline-orange .elementor-button:hover {
  background-color: var(--esls-orange-50) !important;
}

/* on-dark-outline */
.elementor-widget-button.esls-button-on-dark-outline .elementor-button,
.elementor-widget-button .esls-button-on-dark-outline .elementor-button {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 1.5px solid #FFFFFF !important;
}
.elementor-widget-button.esls-button-on-dark-outline .elementor-button:hover,
.elementor-widget-button .esls-button-on-dark-outline .elementor-button:hover {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

/* Hero override — larger buttons inside a hero section wrapper. */
.esls-hero-home .elementor-widget-button .elementor-button,
.esls-hero-pathway .elementor-widget-button .elementor-button,
.esls-hero-bba .elementor-widget-button .elementor-button {
  padding: 14px 28px !important;
  font-size: 15px !important;
}

/* ═════════════════════════════════════════════════════════════════════
   §6. Card system  (card-feature / -info / -chip-pad deferred to Sessions 3–5)
   ═════════════════════════════════════════════════════════════════════ */
.esls-card-default {
  background: #FFFFFF;
  border: 1px solid var(--esls-border-warm);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  height: 100%;
  transition: all var(--duration-base) var(--ease-out);
}
.esls-card-default:hover {
  transform: translateY(-2px);
  border-color: var(--esls-text-tertiary);
  box-shadow: var(--shadow-lg);
}
.esls-card-default .esls-card-cta { margin-top: auto; width: 100%; }
.esls-card-cta { margin-top: auto; }
.esls-card-default .esls-card-cta .elementor-button,
.esls-card-default .esls-button-outline-blue .elementor-button,
.esls-card-default .esls-button-primary .elementor-button { width: 100%; }

/* ═════════════════════════════════════════════════════════════════════
   §7. Chip
   ═════════════════════════════════════════════════════════════════════ */
.esls-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--esls-cream-warm);
  border: 1px solid var(--esls-border-warm);
  border-radius: var(--radius-md);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--esls-text-primary);
}

/* ═════════════════════════════════════════════════════════════════════
   §8. Generic grids
   ═════════════════════════════════════════════════════════════════════ */
.esls-card-grid-2,
.esls-card-grid-3,
.esls-card-grid-4 {
  display: grid;
  gap: 24px;
}
.esls-card-grid-2 { grid-template-columns: repeat(2, 1fr); }
.esls-card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.esls-card-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .esls-card-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .esls-card-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .esls-card-grid-2,
  .esls-card-grid-3,
  .esls-card-grid-4 { grid-template-columns: 1fr; gap: 16px; }
}

/* ═════════════════════════════════════════════════════════════════════
   §9. Section helper patterns (P-01 … P-09)
   ═════════════════════════════════════════════════════════════════════ */
.esls-section-intro {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.esls-eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.esls-eyebrow-row::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--esls-orange-400);
}

.esls-trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.esls-trust-strip .esls-trust-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--esls-orange-400);
  box-shadow: var(--shadow-glow-orange);
}

.esls-cta-col {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.esls-cta-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
@media (max-width: 767px) {
  .esls-cta-btn-row { flex-direction: column; align-items: stretch; }
}

.esls-step { display: flex; flex-direction: column; gap: 8px; }
.esls-step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .esls-step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .esls-step-grid { grid-template-columns: 1fr; gap: 16px; } }

.esls-persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .esls-persona-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .esls-persona-grid { grid-template-columns: 1fr; gap: 16px; } }
.esls-persona-avatar {
  width: 180px;
  max-width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--esls-cream-alt);
  box-shadow: var(--shadow-sm);
  background: var(--esls-border-warm);
  flex: 0 0 auto;
}
.esls-persona-avatar .elementor-widget-container,
.esls-persona-avatar figure { margin: 0; height: 100%; line-height: 0; }
.esls-persona-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
  .esls-persona-avatar { width: 120px; max-width: 120px; height: 120px; }
}

/* ── Hero showcase (P-09) — native container tree ──────────────────────
   .esls-hero-showcase is the 440px positioning context (right-aligned in
   the column). The image frame is in flow; the two float cards are absolute
   children of the showcase, anchored to its corners. No HTML widgets. */
.esls-hero-showcase {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin-left: auto;
}

/* Portrait frame — fixed 4/5 aspect. Holds a native Image widget; the photo
   is a real <img> (media-library backed, carries alt text). Duotone comes from
   mix-blend-mode: overlay on the img over the blue-900 frame base. */
.esls-hero-image-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  background-color: var(--esls-blue-900);
}
.esls-hero-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 43, 61, 0.45), transparent 55%);
  pointer-events: none;
  z-index: 1;
}
/* Make the native Image widget fill the frame edge-to-edge. */
.esls-hero-media,
.esls-hero-media .elementor-widget-container,
.esls-hero-media figure,
.esls-hero-media a { position: absolute; inset: 0; height: 100%; width: 100%; margin: 0; }
.esls-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: overlay;
  opacity: 0.9;
  display: block;
  transition: transform var(--duration-image) var(--ease-out);
}
.esls-hero-image-frame:hover .esls-hero-media img { transform: scale(1.03); }

/* Float · Global Cohorts — bottom-left, bleeding past the frame edge. */
.esls-hero-overlay-trust {
  position: absolute;
  bottom: 32px;
  left: -28px;
  z-index: 20;
  max-width: 260px;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
.esls-hero-trust-row { align-items: center; gap: 10px; }
.esls-hero-trust-label .elementor-heading-title {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: var(--esls-blue-900) !important;
  margin: 0 !important;
}
.esls-hero-trust-caption .elementor-widget-container,
.esls-hero-trust-caption .elementor-widget-container p {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: var(--esls-text-tertiary) !important;
  margin: 0 !important;
}

/* Overlapping avatar stack — native Image widgets, pulled together. */
.esls-avatar-stack { flex-wrap: nowrap; align-items: center; }
.esls-avatar + .esls-avatar { margin-left: -10px; }
.esls-avatar .elementor-widget-container,
.esls-avatar figure { margin: 0; line-height: 0; }
.esls-avatar img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  display: block;
}

/* Float · No paperwork — top-right, slight tilt, rights itself on hover. */
.esls-hero-overlay-sticker {
  position: absolute;
  top: 28px;
  right: -18px;
  z-index: 20;
  gap: 2px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  transform: rotate(2deg);
  transition: transform var(--duration-slow) var(--ease-out);
}
.esls-hero-overlay-sticker:hover { transform: rotate(0deg); }
.esls-hero-sticker-eyebrow .elementor-heading-title {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--esls-orange-600) !important;
  margin: 0 !important;
}
.esls-hero-sticker-title .elementor-heading-title {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--esls-blue-900) !important;
  margin: 0 !important;
}

/* Left-column eyebrow row + trust strip (native). */
.esls-eyebrow-row { align-items: center; gap: 12px; }
.esls-eyebrow-row::before {
  content: "";
  flex: 0 0 auto;
  width: 28px;
  height: 2px;
  background: var(--esls-orange-400);
}
.esls-eyebrow-row .esls-eyebrow .elementor-heading-title {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--esls-orange-600) !important;
  margin: 0 !important;
}
.esls-trust-strip { flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.esls-trust-item .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  color: var(--esls-blue-900) !important;
  margin: 0 !important;
}
.esls-trust-item .elementor-heading-title::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--esls-orange-400);
  box-shadow: var(--shadow-glow-orange);
  flex: 0 0 auto;
}

/* ── Compact, polished mobile hero (≤767px) ──────────────────────────── */
@media (max-width: 767px) {
  .esls-hero-home .esls-eyebrow-row { justify-content: flex-start; }
  .esls-hero-showcase {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  .esls-hero-image-frame { aspect-ratio: 3 / 4; border-radius: 20px; }
  /* Tuck the trust card flush to the frame's bottom edge, no bleed. */
  .esls-hero-overlay-trust {
    left: 12px;
    right: 12px;
    bottom: -18px;
    max-width: none;
    padding: 12px 14px;
  }
  /* Hide the tilted sticker on mobile to keep it clean (React parity). */
  .esls-hero-overlay-sticker { display: none; }
  /* Give the tucked card room below the image so it doesn't collide. */
  .esls-hero-showcase { margin-bottom: 26px; }
}

/* ═════════════════════════════════════════════════════════════════════
   §10. On-dark sections — recolor esls-* text over blue-800/900 surfaces.
   Apply `esls-section-dark` to any section container with a dark background.
   Eyebrows stay orange (legible on dark); headings/body flip to on-dark tints.
   ═════════════════════════════════════════════════════════════════════ */
.esls-section-dark .esls-display-1 .elementor-heading-title,
.esls-section-dark .esls-display-2 .elementor-heading-title,
.esls-section-dark .esls-h1 .elementor-heading-title,
.esls-section-dark .esls-h2 .elementor-heading-title,
.esls-section-dark .esls-h3 .elementor-heading-title,
.esls-section-dark .esls-h4 .elementor-heading-title {
  color: var(--esls-text-on-dark) !important;
}
.esls-section-dark .esls-body-lg .elementor-widget-container,
.esls-section-dark .esls-body-lg .elementor-widget-container p,
.esls-section-dark .esls-body .elementor-widget-container,
.esls-section-dark .esls-body .elementor-widget-container p,
.esls-section-dark .esls-body-sm .elementor-widget-container,
.esls-section-dark .esls-body-sm .elementor-widget-container p {
  color: rgba(250, 248, 243, 0.82) !important;
}
.esls-section-dark .esls-meta .elementor-heading-title,
.esls-section-dark .esls-meta .elementor-widget-container,
.esls-section-dark .esls-caption .elementor-heading-title,
.esls-section-dark .esls-caption .elementor-widget-container {
  color: rgba(250, 248, 243, 0.65) !important;
}

/* ═════════════════════════════════════════════════════════════════════
   §11. Optimized-markup compatibility + mobile hero tightening (v0.1.6)
   This Elementor build runs `e_optimized_markup`, which STRIPS the
   `.elementor-widget-container` wrapper from widget output. Every text rule
   in §3/§10 reached <p> content *through* that wrapper, so text-editor copy
   lost its colour/size (headings survived via `.elementor-heading-title`).
   Below re-targets text-editor content DIRECTLY (`.esls-body p`), which works
   with or without the wrapper. Fixes dark-on-dark body copy in
   `.esls-section-dark` ("How ESLS works") and restores body type site-wide.
   ═════════════════════════════════════════════════════════════════════ */

/* Body copy (text-editor <p>) — base colour + font, wrapper-independent. */
.esls-body-lg p,
.esls-body p,
.esls-body-sm p {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  color: var(--esls-text-secondary) !important;
  margin: 0 !important;
}
.esls-body-lg p { font-size: 17px !important; line-height: 1.6 !important; }
.esls-body p    { font-size: 16px !important; line-height: 1.6 !important; }
.esls-body-sm p { font-size: 14px !important; line-height: 1.55 !important; }
@media (max-width: 767px) {
  .esls-body-lg p { font-size: 16px !important; }
}

/* Meta / caption on text-editor <p> (heading-based meta already works). */
.esls-meta p,
.esls-caption p {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  color: var(--esls-text-tertiary) !important;
  margin: 0 !important;
}
.esls-hero-trust-caption p {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: var(--esls-text-tertiary) !important;
  margin: 0 !important;
}

/* On-dark recolour for text-editor <p> — the "How ESLS works" body fix.
   Higher specificity than the base rule above + later in source → wins. */
.esls-section-dark .esls-body-lg p,
.esls-section-dark .esls-body p,
.esls-section-dark .esls-body-sm p {
  color: rgba(250, 248, 243, 0.82) !important;
}
.esls-section-dark .esls-meta p,
.esls-section-dark .esls-caption p {
  color: rgba(250, 248, 243, 0.65) !important;
}

/* ── Mobile hero tightening (≤767px) — align to React source ───────────
   React: showcase max-w-[280px] centred; hero buttons w-full stacked. */
@media (max-width: 767px) {
  /* Narrower, centred showcase (React max-w-[280px]; was 300). */
  .esls-hero-home .esls-hero-showcase {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Full-width stacked CTAs (React `w-full` on both hero buttons). */
  .esls-hero-home .elementor-widget-button { width: 100% !important; }
  .esls-hero-home .elementor-widget-button .elementor-button {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   §12. P-26 Fact band · P-27 Capstone plate (v0.3.8, P2)
   Two reusable presentation patterns introduced for the MBA page and
   shared verbatim by the DBA page (P3). Plugin-owned per layer discipline:
   both recur across pages, so neither may live in page custom_css.

   P-26 — .esls-fact-band: a row of display-numeral facts (Fraunces numeral
   over a small-caps label). Light grounds only; numerals are blue-900.
   P-27 — .esls-capstone-plate: a self-contained dark (blue-900) plate for
   the thesis/dissertation block, sitting INSIDE a light section — not a
   dark section. Eyebrow is orange-300, not orange-600: 5.93:1 vs 3.20:1
   on blue-900 (WCAG AA). Descendant text is recoloured here because the
   §10/§11 on-dark rules key on `esls-section-dark`, which this is not.
   Wrapper-level selectors throughout (F-P1-4 / G16): no rule below may
   reference the Elementor widget-container wrapper node.
   ═════════════════════════════════════════════════════════════════════ */

/* ---- P-26 fact band -------------------------------------------------- */
.esls-fact-band {
  display: flex;
  /* Wrap at base, not behind a breakpoint: the three facts' min-content is
     ~370px, which overflows 360–430px viewports. Wrap only fires when needed,
     so desktop is always one line and a narrow phone gets a tidy 2+1. */
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--esls-border-warm);
  width: 100%;
  max-width: 720px;
  margin: 8px auto 0;
}
.esls-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  /* v0.3.9 — the facts are Elementor containers, which default to width:100%.
     A full-width, wrap-enabled flex child takes a line of its own, so the band
     rendered as a stack. Shrink-to-fit restores the row. */
  width: auto;
  flex: 0 1 auto;
  min-width: 0;
}
.esls-fact-num .elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 44px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--esls-blue-900) !important;
  font-variant-numeric: lining-nums;
}
.esls-fact-label .elementor-heading-title {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--esls-text-tertiary) !important;
  max-width: 150px;
}
@media (max-width: 767px) {
  .esls-fact-band { gap: 16px 24px; }
  .esls-fact-num .elementor-heading-title { font-size: 32px !important; }
}

/* ---- P-27 capstone plate --------------------------------------------- */
.esls-capstone-plate {
  background: var(--esls-blue-900);
  border-left: 4px solid var(--esls-orange-400);
  border-radius: var(--radius-xl);
  padding: 48px 56px;
  max-width: 880px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: var(--shadow-xl);
}
.esls-capstone-plate .esls-eyebrow .elementor-heading-title {
  color: var(--esls-orange-300) !important;
}
.esls-capstone-plate .esls-h2 .elementor-heading-title,
.esls-capstone-plate .esls-h3 .elementor-heading-title {
  color: var(--esls-text-on-dark) !important;
}
.esls-capstone-plate .esls-body-lg p,
.esls-capstone-plate .esls-body p,
.esls-capstone-plate .esls-body-sm p {
  color: rgba(250, 248, 243, 0.82) !important;
}
.esls-capstone-plate .esls-meta .elementor-heading-title,
.esls-capstone-plate .esls-meta p {
  color: rgba(250, 248, 243, 0.65) !important;
}
@media (max-width: 767px) {
  .esls-capstone-plate { padding: 28px 20px; border-radius: var(--radius-lg); }
}

/* ---- P-28 hero programme card (v0.3.10, P2.1) -------------------------
   Navy at-a-glance card for the split programme hero — the P-27 surface
   (blue-900, orange rule) carrying vertically stacked display facts and a
   meta foot. Construction contract: the card is ONE container whose children
   are plain heading widgets — no nested containers, no horizontal flex —
   so Elementor's generated per-element layout CSS has nothing to fight
   (the failure mode that stacked P-26 on first render). Dividers/spacing sit
   on the WIDGET WRAPPERS, not the heading titles, so RULE-011's margin reset
   never needs out-specifying. P-26 remains valid for standalone light-ground
   strips but is superseded on programme-page heroes by this card. */
.esls-hero-card {
  background: var(--esls-blue-900);
  border-left: 4px solid var(--esls-orange-400);
  border-radius: var(--radius-xl);
  padding: 40px 44px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
}
.esls-hero-card .esls-eyebrow { margin-bottom: 24px; }
.esls-hero-card .esls-eyebrow .elementor-heading-title {
  color: var(--esls-orange-300) !important;
}
.esls-hero-card .esls-fact-num { margin-bottom: 4px; }
.esls-hero-card .esls-fact-num .elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 40px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--esls-text-on-dark) !important;
}
.esls-hero-card .esls-fact-label {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(250, 248, 243, 0.14);
}
.esls-hero-card .esls-fact-label .elementor-heading-title {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(250, 248, 243, 0.65) !important;
  max-width: none;
}
.esls-hero-card .esls-caption .elementor-heading-title {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  line-height: 1.6 !important;
  color: rgba(250, 248, 243, 0.65) !important;
}
@media (max-width: 767px) {
  .esls-hero-card { padding: 28px 24px; border-radius: var(--radius-lg); }
  .esls-hero-card .esls-fact-num .elementor-heading-title { font-size: 32px !important; }
}

/* ═════════════════════════════════════════════════════════════════════
   §13. Monograph suite — P-29…P-33 (v0.3.11, P3)
   The DBA page's editorial register: gravitas from hairline rules,
   whitespace and serif scale — same tokens, no new colours, no photography,
   no new claims. Plugin-owned because each treatment is reusable
   presentation; page CSS keeps only per-page layout. Wrapper-level
   selectors throughout (F-P1-4 / G16): no rule below references the
   Elementor widget-container node.

   P-29 — .esls-mono-hero / .esls-mono-factline / .esls-mono-fact:
          monograph hero type tightening plus the hairline-ruled horizontal
          fact line. The fact line is a GRID row of flat fact cells — grid
          tracks impose width on their items (the esls-two-col-60-40
          mechanism, F-P2-7), and each cell is ONE container of plain
          heading widgets (the P-28 construction contract).
   P-30 — .esls-mono-open / .esls-section-index: hairline section opener
          with a JetBrains Mono small-caps index (`01 — Overview`). The
          DBA-only signature; replaces the centered .esls-section-intro.
   P-31 — .esls-dissert-band (+ .esls-dissert-pull / .esls-dissert-status):
          full-width blue-900 dissertation band — P-27's navy/orange
          material language in a different form. Index text is orange-300,
          not orange-600: 5.93:1 vs 3.20:1 on blue-900 (the P-27
          measurement, WCAG AA).
   P-32 — .esls-ledger-list: left-ruled ledger list for dark tuition
          surfaces — orange-300 spine, hairline row separators, no bullets.
   P-33 — .esls-mono-lines / .esls-mono-line: hairline-separated oversized
          serif line list (the DBA candidacy block). Rules and spacing sit
          on the WIDGET WRAPPERS, never on heading titles (RULE-011).
   ═════════════════════════════════════════════════════════════════════ */

/* ---- P-29 monograph hero + fact line --------------------------------- */
.esls-mono-hero .esls-display-1 .elementor-heading-title {
  line-height: 1.02 !important;
  letter-spacing: -0.025em !important;
}
/* v0.3.13 — self-doubled selector (the X-10 shim idiom, 0,2,0): the lone
   place §13 must CHANGE a container's display type. At 0,1,0 it lost to
   Elementor's generated container CSS exactly as the fact cells did (X-8);
   the candidacy rows survive because their selector is already two classes. */
.esls-mono-factline.esls-mono-factline {
  display: grid;
  /* v0.3.12 (H2): three equal tracks — the facts own the full hairline width
     instead of clustering left under full-width rules. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;
  row-gap: 20px;
  width: 100%;
  border-top: 1px solid var(--esls-border-warm);
  border-bottom: 1px solid var(--esls-border-warm);
  padding: 32px 0;
}
/* X-8 — two classes (0,2,0): Elementor writes each container's flex settings
   as `.elementor-element.elementor-element-{id}` at 0,2,0, which out-specified
   the v0.3.11 single-class rules (the mobile baseline row never applied). The
   pattern owns direction at BOTH widths; page v1.1 drops the per-cell
   flex_direction setting so there is nothing to fight. */
.esls-mono-factline .esls-mono-fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: auto;
  min-width: 0;
}
/* Numerals/labels reuse the P-26 type tokens; only size is scoped here. */
.esls-mono-fact .esls-fact-num .elementor-heading-title { font-size: 40px !important; }
.esls-mono-fact .esls-fact-label .elementor-heading-title { max-width: none; }
@media (max-width: 1024px) {
  .esls-mono-factline.esls-mono-factline { column-gap: 32px; }
}
@media (max-width: 767px) {
  /* One fact per row: numeral and label share a baseline — an index list
     between the hairlines, no three-across squeeze at 320px. */
  .esls-mono-factline.esls-mono-factline { grid-template-columns: 1fr; row-gap: 18px; padding: 24px 0; }
  .esls-mono-factline .esls-mono-fact { flex-direction: row; align-items: baseline; gap: 12px; }
  .esls-mono-fact .esls-fact-num .elementor-heading-title { font-size: 28px !important; }
}

/* ---- P-30 hairline section opener + mono index ------------------------ */
.esls-mono-open {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  border-top: 1px solid var(--esls-border-warm);
  padding-top: 28px;
  margin-bottom: 56px;
}
.esls-section-index .elementor-heading-title {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--esls-text-tertiary) !important;
}
.esls-mono-open .esls-h2 .elementor-heading-title {
  font-size: 36px !important;
  line-height: 1.15 !important;
}
.esls-mono-open .esls-body-lg { max-width: 640px; }
/* On-dark variant — §10/§11 recolor headings/body; the hairline and index
   are handled here. */
.esls-section-dark .esls-mono-open { border-top-color: rgba(250, 248, 243, 0.18); }
.esls-section-dark .esls-section-index .elementor-heading-title {
  color: rgba(250, 248, 243, 0.65) !important;
}
@media (max-width: 767px) {
  .esls-mono-open { margin-bottom: 36px; padding-top: 22px; }
  .esls-mono-open .esls-h2 .elementor-heading-title { font-size: 27px !important; }
}

/* ---- P-31 dissertation band ------------------------------------------- */
/* Surface (blue-900) is set on the Elementor container, like the dark
   tuition sections; the band pattern owns the interior. */
.esls-dissert-band .esls-mono-open {
  border-top: 2px solid var(--esls-orange-400);
  margin-bottom: 28px;
}
.esls-dissert-band .esls-section-index .elementor-heading-title {
  color: var(--esls-orange-300) !important;
}
.esls-dissert-pull .elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 46px !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
  color: var(--esls-text-on-dark) !important;
  max-width: 20ch;
}
.esls-dissert-band .esls-body-lg { margin-top: 22px; }
.esls-dissert-band .esls-body-lg p {
  font-size: 19px !important;
  max-width: 56ch;
}
.esls-dissert-status {
  width: 100%;
  border-top: 1px solid rgba(250, 248, 243, 0.18);
  padding-top: 20px;
  margin-top: 32px;
}
@media (max-width: 767px) {
  .esls-dissert-pull .elementor-heading-title { font-size: 30px !important; }
  .esls-dissert-band .esls-body-lg p { font-size: 17px !important; }
  .esls-dissert-status { margin-top: 24px; }
}

/* ---- P-32 ledger list (dark grounds) ---------------------------------- */
.esls-ledger-list {
  border-left: 2px solid var(--esls-orange-300);
  padding-left: 24px;
}
.esls-ledger-list .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
}
.esls-ledger-list .elementor-icon-list-item {
  margin: 0;
  padding: 14px 0;
  display: flex;
  align-items: flex-start;
  border-bottom: 1px solid rgba(250, 248, 243, 0.14);
}
.esls-ledger-list .elementor-icon-list-item:first-child { padding-top: 0; }
.esls-ledger-list .elementor-icon-list-item:last-child { border-bottom: 0; padding-bottom: 0; }
.esls-ledger-list .elementor-icon-list-item:after { display: none; }
.esls-ledger-list .elementor-icon-list-icon { display: none; }
.esls-ledger-list .elementor-icon-list-text {
  font-family: 'Source Sans 3', system-ui, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85) !important;
  padding-inline-start: 0;
}

/* ---- P-33 monograph line list (v0.3.12: numbered-row form, W1) --------- */
/* Each line is a ROW container (grid: index column + line) — hairlines and
   spacing sit on the row, the two children are plain heading widgets. Grid
   wins over Elementor's flex defaults the same way the fact line does
   (two-class selector + load order). */
.esls-mono-lines { display: flex; flex-direction: column; width: 100%; }
.esls-mono-lines .esls-mono-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  column-gap: 24px;
  align-items: baseline;
  padding: 32px 0;
  margin: 0;
  border-bottom: 1px solid var(--esls-border-warm);
}
.esls-mono-lines .esls-mono-row:first-child { border-top: 1px solid var(--esls-border-warm); }
.esls-line-index .elementor-heading-title {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  /* orange-800, not -600: 600 on cream is 4.36:1 (AA fail at 12px). The
     site-wide eyebrow ships the failing combo — logged, not P3's to fix. */
  color: var(--esls-orange-800) !important;
}
.esls-mono-line .elementor-heading-title {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 34px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.01em !important;
  color: var(--esls-blue-900) !important;
}
@media (max-width: 767px) {
  .esls-mono-lines .esls-mono-row { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; }
  .esls-line-index .elementor-heading-title { font-size: 11px !important; }
  .esls-mono-line .elementor-heading-title { font-size: 23px !important; }
}