/* =============================================================================
   modern.css — Modern content layer (SCOPED)
   -----------------------------------------------------------------------------
   EVERY rule is namespaced under `.ne-modern` (applied to the <main> content
   area). This is the isolation boundary from DISCOVERY.md §6:

     - Nothing here leaks UP into the institutional header/footer chrome
       (Bootstrap + assets/vendor/northeast.css style those).
     - Class-scoped selectors (`.ne-modern .x`) outrank northeast.css's global
       element rules by specificity, so our content wins inside the box without
       cascade layers — compatible with SRI-pinned CDN <link>s.

   Bootstrap class collisions are removed by renaming the colliding component
   roots with an `ne-` prefix:
       .container → .ne-container   .btn → .ne-btn   .card → .ne-card
       .grid      → .ne-grid        .lead → .ne-lead
   (The `.grid` collision is the important one — Bootstrap's `.grid` forces
   grid-template-rows, which would crush our multi-row card grids.)

   Design tokens come from assets/css/tokens.css.
   ============================================================================= */

/* ---- Content-area base ---------------------------------------------------- */
.ne-modern {
  color: var(--color-text-primary);
  /* Transparent: the white surface comes from the centered .container.bg-white
     box (the live site's layout), so #ddd body shows as gray side gutters. */
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  overflow-wrap: break-word;   /* break long tokens (e.g. emails) on narrow screens */
}
.ne-modern *,
.ne-modern *::before,
.ne-modern *::after { box-sizing: border-box; }

.ne-modern img,
.ne-modern svg { max-width: 100%; display: block; }

/* ---- Typography ----------------------------------------------------------- */
.ne-modern h1, .ne-modern h2, .ne-modern h3,
.ne-modern h4, .ne-modern h5, .ne-modern h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: inherit;
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-md);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  overflow-wrap: normal;   /* headings wrap on spaces, never mid-word */
}
.ne-modern h1 { font-size: var(--text-5xl); line-height: var(--lh-tight); }
.ne-modern h2 { font-size: var(--text-4xl); font-weight: var(--fw-medium); }
.ne-modern h3 { font-size: var(--text-3xl); font-weight: var(--fw-medium); }
.ne-modern h4 { font-size: var(--text-2xl); font-weight: var(--fw-medium); }
.ne-modern h5 { font-size: var(--text-xl);  font-weight: var(--fw-medium); }
.ne-modern h6 { font-size: var(--text-lg);  font-weight: var(--fw-medium); }

.ne-modern p { font-family: var(--font-body); margin: 0 0 var(--space-md); line-height: var(--lh-relaxed); }

.ne-modern .ne-lead {
  font-size: var(--text-md);
  font-weight: var(--fw-regular);   /* override Bootstrap .lead's 300 weight */
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  /* No max-width: lead text fills its column width, matching the live site. */
}

.ne-modern a {
  color: var(--color-link);
  font-weight: var(--fw-regular);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--duration-base) var(--ease-out);
}
.ne-modern a:hover { color: var(--color-link-hover); }

/* ---- Focus visibility (a11y) --------------------------------------------- */
.ne-modern a:focus-visible,
.ne-modern .impact__play:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.ne-modern .accordion__summary:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;   /* inset — the accordion item clips overflow */
}
/* Navy focus ring is too low-contrast on dark/teal bands — switch to white. */
.ne-modern .section--deep a:focus-visible,
.ne-modern .section--dark a:focus-visible,
.ne-modern .section--accent a:focus-visible,
.ne-modern .section--deep .ne-btn:focus-visible,
.ne-modern .section--dark .ne-btn:focus-visible { outline-color: var(--neutral-0); }

.ne-modern .eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.ne-modern ul.list, .ne-modern ol.list { padding-left: var(--space-xl); margin: 0 0 var(--space-md); list-style-position: outside; }
.ne-modern ul.list { list-style-type: disc; }
.ne-modern ul.list li, .ne-modern ol.list li { margin-bottom: var(--space-xs); }

/* ---- Layout primitives ---------------------------------------------------- */
/* Content container — mirrors Bootstrap's .container breakpoints so content
   aligns with the header/footer, while each section's background goes full-bleed
   (per the client's container restructure: full-width bands, centered content). */
.ne-container { width: 100%; margin-inline: auto; padding-inline: 0.75rem; }
@media (min-width: 576px)  { .ne-modern .ne-container { max-width: 540px; } }
@media (min-width: 768px)  { .ne-modern .ne-container { max-width: 720px; } }
@media (min-width: 992px)  { .ne-modern .ne-container { max-width: 960px; } }
@media (min-width: 1200px) { .ne-modern .ne-container { max-width: 1140px; } }
@media (min-width: 1400px) { .ne-modern .ne-container { max-width: 1320px; } }

/* Full-bleed white content area with a teal top accent (client's "green border to the top"). */
.ne-modern .ne-content { border-top: 5px solid var(--brand-teal-600); }

/* ---- In-page sub-nav (jump links) ---------------------------------------- */
.ne-modern .ne-subnav { position: sticky; top: 0; z-index: 50; background: var(--color-surface); border-bottom: var(--border-hairline); box-shadow: var(--shadow-xs); }
.ne-modern .ne-subnav__inner { display: flex; align-items: center; }
.ne-modern .ne-subnav__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; margin: 0; padding: var(--space-xs) 0; }
.ne-modern .ne-subnav__list a {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.ne-modern .ne-subnav__list a:hover { color: var(--brand-teal-700); }
.ne-modern .ne-subnav__list a.is-active { color: var(--brand-teal-700); box-shadow: inset 0 -3px 0 var(--brand-teal-600); border-radius: 0; }
.ne-modern .ne-subnav__toggle { display: none; }

/* Collapse to the "In This Section" menu below 992px. The 8 links need ~720px
   on one line, but Bootstrap's container is only 720px wide in the 768–991px
   band — so they'd wrap there. Breaking to the mobile menu at the lg breakpoint
   (where the container steps up to 960px) keeps the desktop nav on one line. */
@media (max-width: 991.98px) {
  .ne-modern .ne-subnav__inner { display: block; }
  .ne-modern .ne-subnav__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
    width: 100%; min-height: 44px; padding: var(--space-sm) 0;
    background: transparent; border: 0; cursor: pointer;
    font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-navy-900);
  }
  .ne-modern .ne-subnav__toggle i { transition: transform var(--duration-base) var(--ease-out); }
  .ne-modern .ne-subnav__toggle[aria-expanded="true"] i { transform: rotate(180deg); }
  .ne-modern .ne-subnav__list { display: none; flex-direction: column; gap: 0; padding: 0 0 var(--space-sm); }
  .ne-modern .ne-subnav.is-open .ne-subnav__list { display: flex; }
  .ne-modern .ne-subnav__list a { display: block; padding: var(--space-sm) var(--space-md); }
  /* No active-section highlight in the mobile "Jump to Section" menu (per Dave). */
  .ne-modern .ne-subnav__list a.is-active { color: var(--color-text-secondary); box-shadow: none; }
}

/* Sections clear the sticky sub-nav when jumped to. */
.ne-modern .section[id] { scroll-margin-top: 4.5rem; }

.ne-modern .section { padding-block: var(--space-3xl); }
.ne-modern .section--tight { padding-block: var(--space-2xl); }
.ne-modern .section--alt   { background: var(--color-surface-alt); }
.ne-modern .section--dark  { background: var(--color-surface-dark); color: var(--color-text-inverse); }
.ne-modern .section--deep  { background: var(--color-surface-deep); color: var(--color-text-inverse); }
/* Subtle, on-brand texture for the dark bands: a teal corner glow plus faint
   diagonal lines. Pure CSS (no extra request), responsive, decorative only.
   isolation + z-index:-1 keeps it behind the content without per-child z-index. */
.ne-modern .section--deep,
.ne-modern .section--dark { position: relative; overflow: hidden; isolation: isolate; }
.ne-modern .section--deep::before,
.ne-modern .section--dark::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(140% 90% at 100% 0%, rgba(13, 113, 114, 0.45), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 24px);
}
.ne-modern .section--accent { background: var(--color-accent); color: var(--color-text-inverse); }

.ne-modern .text-center { text-align: center; }

.ne-modern .ne-grid { display: grid; gap: var(--space-lg); grid-template-rows: auto; }
.ne-modern .ne-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ne-modern .ne-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ne-modern .ne-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 991.98px) {
  /* Drop 3-/4-col grids to 2 columns below the lg breakpoint — the md container
     is only 720px, so 4 columns leave the program cards ~150px and cramped. */
  .ne-modern .ne-grid--3, .ne-modern .ne-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .ne-modern .ne-grid--2, .ne-modern .ne-grid--3, .ne-modern .ne-grid--4 { grid-template-columns: 1fr; }
}

.ne-modern .flow > * + * { margin-top: var(--space-lg); }
.ne-modern .flow--tight > * + * { margin-top: var(--space-md); }

.ne-modern .section-head { margin-bottom: var(--space-xl); }
.ne-modern .section-head h2 { margin-bottom: var(--space-sm); }
/* Centered section heads: balance line breaks on the lead/sub-lines too
   (headings already get text-wrap: balance globally). */
.ne-modern .section-head.text-center .ne-lead,
.ne-modern .section-head.text-center > p { text-wrap: balance; }

/* ---- Buttons -------------------------------------------------------------- */
.ne-modern .ne-btn {
  --_btn-bg:           var(--color-accent);
  --_btn-bg-hover:     var(--color-accent-hover);
  --_btn-fg:           var(--color-text-inverse);
  --_btn-fg-hover:     var(--_btn-fg);
  --_btn-border:       transparent;
  --_btn-border-hover: var(--_btn-border);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--btn-py-md) var(--btn-px-md);
  min-height: 44px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-wide);
  color: var(--_btn-fg);
  background: var(--_btn-bg);
  border: 1px solid var(--_btn-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.ne-modern .ne-btn:hover,
.ne-modern .ne-btn:active {
  background: var(--_btn-bg-hover);
  color: var(--_btn-fg-hover);
  border-color: var(--_btn-border-hover);
  text-decoration: none;
}
.ne-modern .ne-btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.ne-modern .ne-btn--sm { padding: var(--btn-py-sm) var(--btn-px-sm); font-size: var(--text-xs); min-height: 36px; }
.ne-modern .ne-btn--lg { padding: var(--btn-py-lg) var(--btn-px-lg); font-size: var(--text-base); min-height: 52px; }

.ne-modern .ne-btn--secondary { --_btn-bg: var(--brand-navy-700); --_btn-bg-hover: var(--brand-navy-800); }
.ne-modern .ne-btn--inverse {
  --_btn-bg: var(--neutral-0); --_btn-bg-hover: var(--neutral-100);
  --_btn-fg: var(--brand-navy-900); --_btn-fg-hover: var(--brand-navy-900);
}
.ne-modern .ne-btn--outline {
  --_btn-bg: transparent; --_btn-bg-hover: var(--brand-teal-600);
  --_btn-fg: var(--brand-teal-700); --_btn-fg-hover: var(--neutral-0);
  --_btn-border: var(--brand-teal-600); --_btn-border-hover: var(--brand-teal-600);
}
.ne-modern .ne-btn--on-dark {
  --_btn-fg: var(--neutral-0); --_btn-fg-hover: var(--brand-navy-900);
  --_btn-bg: transparent; --_btn-bg-hover: var(--neutral-0);
  --_btn-border: var(--neutral-0); --_btn-border-hover: var(--neutral-0);
}
.ne-modern .ne-btn-group { display: inline-flex; gap: var(--space-sm); flex-wrap: wrap; }

/* ---- Cards ---------------------------------------------------------------- */
.ne-modern .ne-card {
  position: relative;
  background: var(--color-surface);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.ne-modern .ne-card:hover { box-shadow: var(--shadow-lg); border-color: var(--brand-teal-600); transform: translateY(-4px); }
/* Whole card is the click target (stretched-link pattern on the title link). */
.ne-modern .ne-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ne-modern .ne-card__media { aspect-ratio: 1.618 / 1; background: var(--color-surface-alt); overflow: hidden; }
.ne-modern .ne-card__media img { width: 100%; height: 100%; object-fit: cover; }
.ne-modern .ne-card__body { padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; }
.ne-modern .ne-card__title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--fw-bold); color: var(--brand-navy-900); margin: 0; }

.ne-modern .ne-card--inverse { background: transparent; border: 2px solid var(--neutral-0); border-radius: var(--radius-sm); }
.ne-modern .ne-card--inverse:hover { background: rgba(255, 255, 255, 0.06); border-color: var(--brand-teal-300); }
.ne-modern .ne-card--inverse .ne-card__body { text-align: center; }
.ne-modern .ne-card--inverse .ne-card__title {
  color: var(--neutral-0);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
/* Card title links inherit the title color (dark navy on white cards, white on
   inverse cards) instead of the default link blue. */
.ne-modern .ne-card__title a { color: inherit; text-decoration: none; }
.ne-modern .ne-card__title a:hover { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 0.15em; }
/* Inverse cards (light text on dark) keep a light hover that reads on navy. */
.ne-modern .ne-card--inverse .ne-card__title a:hover,
.ne-modern .ne-card--inverse:hover .ne-card__title a { color: var(--brand-teal-300); text-decoration: none; }

/* Program card supporting text + minimal dot-separated credentials line. */
.ne-modern .ne-card__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
}
.ne-modern .ne-card__credentials {
  margin: auto 0 0;            /* pin to the card bottom so the lines align across cards */
  padding-top: var(--space-md);
  border-top: var(--border-hairline);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-accent);
}
/* "Learn more" cue so the card visibly reads as clickable (the whole card is the
   single link; this is a decorative affordance, not a separate control). */
.ne-modern .ne-card__body::after {
  content: "Learn more \2192";   /* → */
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  transition: color var(--duration-fast) var(--ease-out);
}
.ne-modern .ne-card:hover .ne-card__body::after { color: var(--color-accent-hover); }

/* ---- Overview ------------------------------------------------------------- */
.ne-modern .overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.618fr); gap: var(--space-2xl); align-items: start; }
@media (max-width: 900px) { .ne-modern .overview { grid-template-columns: 1fr; gap: var(--space-xl); } }
.ne-modern .overview__media { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 1 / 1.2; position: sticky; top: var(--space-xl); }
.ne-modern .overview__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) { .ne-modern .overview__media { aspect-ratio: 1.618 / 1; position: static; } }
.ne-modern .overview__content { display: flex; flex-direction: column; gap: var(--space-xl); }
.ne-modern .overview__intro h2 { margin-top: 0; }
.ne-modern .overview__intro p:last-child { margin-bottom: 0; }
.ne-modern .overview__facts {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-md);
  padding: var(--space-xl); background: var(--color-surface);
  border: var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm); margin: 0;
}
@media (max-width: 480px) { .ne-modern .overview__facts { grid-template-columns: 1fr; } }
.ne-modern .overview__fact { padding: var(--space-md); background: var(--color-surface-alt); border-radius: var(--radius-sm); }
.ne-modern .overview__fact dt { font-size: var(--text-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-secondary); margin: 0 0 var(--space-2xs); }
.ne-modern .overview__fact dd { margin: 0; font-size: var(--text-base); color: var(--color-text-primary); font-weight: var(--fw-semibold); font-family: var(--font-display); }

/* ---- Stats band ----------------------------------------------------------- */
.ne-modern .section--accent .section-head h2,
.ne-modern .section--accent .section-head .eyebrow { color: var(--color-text-inverse); }
.ne-modern .section--accent .section-head .ne-lead { color: var(--brand-teal-100); }
.ne-modern .stats-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); text-align: center; }
@media (max-width: 700px) { .ne-modern .stats-band { grid-template-columns: 1fr; gap: var(--space-2xl); } }
.ne-modern .stat__number { font-family: var(--font-display); font-size: clamp(var(--text-3xl), 7vw, var(--text-5xl)); line-height: var(--lh-tight); font-weight: var(--fw-bold); color: var(--color-text-inverse); letter-spacing: var(--tracking-tight); font-variant-numeric: tabular-nums; display: block; margin-bottom: var(--space-xs); }
.ne-modern .stat__label { font-size: var(--text-md); color: var(--brand-teal-100); line-height: var(--lh-snug); }

/* ---- Feature tiles -------------------------------------------------------- */
.ne-modern .feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xl); }
/* Collapse to one column below the lg breakpoint (992px). Between 768–991px the
   Bootstrap container is only 720px, and two tiles — each spending width on the
   number circle — leave the headings too narrow (they broke mid-word). */
@media (max-width: 991.98px) { .ne-modern .feature-grid { grid-template-columns: 1fr; } }
.ne-modern .feature-tile {
  --_tile-bg: var(--brand-teal-100); --_tile-num-bg: var(--brand-navy-700); --_tile-num-fg: var(--neutral-0);
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-lg); align-items: start;
  padding: var(--space-xl); background: var(--_tile-bg); border-radius: var(--radius-md);
}
/* Larger, offset number badge — pulled up/left over the tile corner with a lift. */
.ne-modern .feature-tile__num { width: 72px; height: 72px; border-radius: var(--radius-pill); background: var(--_tile-num-bg); color: var(--_tile-num-fg); display: grid; place-items: center; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; flex-shrink: 0; margin-left: calc(-1 * var(--space-lg)); box-shadow: var(--shadow-md); }
.ne-modern .feature-tile__body h3 { margin: 0 0 var(--space-sm); font-size: var(--text-xl); color: var(--brand-navy-900); }
/* Larger, blue body copy per client. */
.ne-modern .feature-tile__body p { margin: 0; font-size: var(--text-md); color: var(--brand-navy-700); }

/* ---- Two-column content --------------------------------------------------- */
.ne-modern .two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
@media (max-width: 900px) { .ne-modern .two-col { grid-template-columns: 1fr; gap: var(--space-xl); } }
.ne-modern .two-col__panel h3 { margin-top: 0; font-size: var(--text-2xl); }
.ne-modern .two-col__panel ul.list { margin: var(--space-md) 0 0; }

/* ---- Impact / testimonial ------------------------------------------------- */
.ne-modern .impact { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
@media (max-width: 900px) { .ne-modern .impact { grid-template-columns: 1fr; } }
.ne-modern .impact__media { position: relative; aspect-ratio: 1.618 / 1; border-radius: var(--radius-md); overflow: hidden; background: var(--brand-navy-800); }
.ne-modern .impact__media img, .ne-modern .impact__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Embedded video: 16:9 so the YouTube player fills the slot without distortion. */
.ne-modern .impact__media--video { aspect-ratio: 16 / 9; background: #000; }
.ne-modern .impact__media iframe { width: 100%; height: 100%; border: 0; display: block; }
.ne-modern .impact__play { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: var(--space-3xl); height: var(--space-3xl); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-text-inverse); border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-lg); transition: transform var(--duration-fast) var(--ease-out); }
.ne-modern .impact__play:hover { transform: translate(-50%, -50%) scale(1.06); }
.ne-modern .impact__play svg { width: var(--space-lg); height: var(--space-lg); }
/* Hanging opening quote. Instead of pulling the mark into negative space (which
   would clip off-screen once the layout stacks on mobile), we reserve room with
   padding-left and pin the mark at left:0 inside it. This keeps the mark close
   to the text, the text on a clean flush-left edge, and stays safe at any width. */
.ne-modern .impact__quote { position: relative; font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--lh-relaxed); color: var(--color-text-primary); margin: 0; padding-left: 2.6rem; }
.ne-modern .impact__quote-mark { font-family: var(--font-display); color: var(--color-accent); }
.ne-modern .impact__quote-mark--open { position: absolute; top: -0.02em; left: 0; font-size: 6rem; line-height: 1; }
.ne-modern .impact__quote-mark--close { font-size: 6rem; line-height: 0; vertical-align: -0.30em; margin-left: 0.02em; }
/* Narrow phones: scale the marks and reserved space down so they stay in
   proportion and never crowd or overflow the text. */
@media (max-width: 575.98px) {
  .ne-modern .impact__quote { padding-left: 1.9rem; }
  .ne-modern .impact__quote-mark--open,
  .ne-modern .impact__quote-mark--close { font-size: 4.25rem; }
}
.ne-modern .impact__quote cite { display: block; margin-top: var(--space-md); font-family: var(--font-body); font-size: var(--text-sm); font-style: normal; color: var(--color-text-secondary); }

/* ---- Affordability cards -------------------------------------------------- */
.ne-modern .afford-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
@media (max-width: 900px) { .ne-modern .afford-grid { grid-template-columns: 1fr; } }
.ne-modern .afford-card { position: relative; display: flex; flex-direction: column; text-align: left; padding: var(--space-xl); background: var(--color-surface); border: var(--border-hairline); border-radius: var(--radius-md); transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); }
.ne-modern .afford-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--brand-teal-600); }
/* Whole affordability card clickable via its title link. */
.ne-modern .afford-card__title a { color: inherit; text-decoration: none; }
.ne-modern .afford-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ne-modern .afford-card:hover .afford-card__title a { color: var(--color-accent-hover); }
/* No background circle — just the teal icon, left-aligned to match the logo cards. */
.ne-modern .afford-card__icon { height: var(--space-3xl); color: var(--brand-teal-700); display: grid; place-items: center start; margin-bottom: var(--space-md); }
.ne-modern .afford-card__icon svg { width: var(--space-2xl); height: var(--space-2xl); }
/* Logo media slot — same height as the icon circle so card titles stay aligned. */
.ne-modern .afford-card__media { height: var(--space-3xl); display: grid; place-items: center start; margin-bottom: var(--space-md); }
/* Explicit max-height (percentage max-height won't resolve reliably against a
   grid cell). 64px logo balances the 89px icon circle on the third card. */
.ne-modern .afford-card__logo { max-height: 64px; max-width: 100%; width: auto; display: block; }
.ne-modern .afford-card__title { font-size: var(--text-lg); margin: 0 0 var(--space-xs); }
.ne-modern .afford-card__text { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-md); }
.ne-modern .afford-card__link { margin-top: auto; font-weight: var(--fw-semibold); text-decoration: none; }
.ne-modern .afford-card__link::after { content: " →"; }

/* ---- Section image + split layout ----------------------------------------- */
.ne-modern .section-image { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: var(--_section-image-ratio, 1.2 / 1); }
.ne-modern .section-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ne-modern .split-layout { display: grid; grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
@media (max-width: 900px) { .ne-modern .split-layout { grid-template-columns: 1fr; gap: var(--space-xl); } }

/* ---- Accordion (native <details>) ----------------------------------------- */
.ne-modern .accordion { display: flex; flex-direction: column; gap: var(--space-sm); }
.ne-modern .accordion__item { background: var(--color-surface); border: var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.ne-modern .accordion__summary { list-style: none; cursor: pointer; padding: var(--space-lg) var(--space-xl); font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--color-text-primary); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); transition: background var(--duration-fast) var(--ease-out); }
.ne-modern .accordion__summary::-webkit-details-marker { display: none; }
.ne-modern .accordion__summary:hover { background: var(--color-surface-alt); }
/* Open accordion keeps the hover background on the toggle for contrast with the body. */
.ne-modern .accordion__item[open] > .accordion__summary { background: var(--color-surface-alt); }
.ne-modern .accordion__summary::after { content: "+"; font-family: var(--font-body); font-size: var(--text-xl); font-weight: var(--fw-regular); color: var(--color-accent); transition: transform var(--duration-base) var(--ease-out); line-height: 1; }
.ne-modern .accordion__item[open] .accordion__summary::after { transform: rotate(45deg); }
.ne-modern .accordion__body { padding: var(--space-lg) var(--space-xl); color: var(--color-text-secondary); line-height: var(--lh-relaxed); }
.ne-modern .accordion__body p:first-child { margin-top: 0; }
.ne-modern .accordion__body p:last-child { margin-bottom: 0; }

/* ---- Reveal / motion utilities -------------------------------------------- */
.js-enabled .ne-modern [data-reveal] {
  opacity: 0;
  transform: translateY(var(--space-md));
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
  will-change: opacity, transform;
}
/* Slower, gentler fade-in for the "4 reasons" cards (per client). */
.js-enabled .ne-modern .feature-tile[data-reveal] { transition-duration: 1200ms; }
.js-enabled .ne-modern [data-reveal].is-revealed { opacity: 1; transform: translateY(0); }
.js-enabled .ne-modern [data-reveal-stagger] > [data-reveal]:nth-child(1) { transition-delay: 0ms; }
.js-enabled .ne-modern [data-reveal-stagger] > [data-reveal]:nth-child(2) { transition-delay: 80ms; }
.js-enabled .ne-modern [data-reveal-stagger] > [data-reveal]:nth-child(3) { transition-delay: 160ms; }
.js-enabled .ne-modern [data-reveal-stagger] > [data-reveal]:nth-child(4) { transition-delay: 240ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ne-modern *, .js-enabled .ne-modern [data-reveal] { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; }
}