.hero--interior {
  /* Consolidated interior hero spacing kept in one shared class */
  padding-top: calc(var(--header-height) + 4rem) !important;
  min-height: auto;
  padding-bottom: 3.6rem;
}

.hero--interior .hero-grid {
  align-items: center;
}

/* Shared hero modifiers replacing page-level headline patches */
.hero--landing {
  min-height: min(88svh, 1120px);
  padding-bottom: 3.25rem;
}

.hero--title-wide h1 {
  max-width: 20ch;
  line-height: 1.05;
}

.hero--title-small h1 {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  margin-bottom: 1.5rem;
}

.hero--title-compact h1 {
  font-size: clamp(2.8rem, 5vw, 5.8rem);
  max-width: 12ch;
  line-height: 1.05;
}

.hero--title-reduced h1 {
  font-size: clamp(4.6rem, 5vw, 5.6rem);
  max-width: 12ch;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.hero--title-balanced h1 {
  font-size: clamp(4.6rem, 5vw, 6.2rem);
  max-width: 12ch;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

.hero--lead-narrow .hero-lead {
  max-width: 50ch;
  margin-top: 1rem;
}

.hero--lead-medium .hero-lead {
  max-width: 55ch;
  margin-top: 1rem;
}

.hero--lead-relaxed .hero-lead {
  max-width: 52ch;
  line-height: 1.7;
}

.page-summary-card {
  padding: 1.4rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(230, 222, 212, 0.12);
  background: linear-gradient(180deg, rgba(42, 46, 49, 0.82) 0%, rgba(23, 25, 28, 0.9) 100%);
  box-shadow: var(--shadow-panel);
  color: var(--color-cream);
}

.page-summary-card h2 {
  margin-top: 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(2rem, 3vw, 2.85rem);
  line-height: 0.96;
  letter-spacing: -0.02em;
  color: var(--color-cream);
}

.page-summary-list {
  display: grid;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.page-summary-list > div {
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(230, 222, 212, 0.08);
  background: rgba(243, 241, 237, 0.03);
}

.page-summary-list p {
  color: rgba(243, 241, 237, 0.78);
}

.text-link {
  display: inline-flex;
  align-items: center;
  margin-top: 1rem;
  color: var(--color-accent);
  font-weight: 700;
}

.text-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.mobile-nav a.is-active {
  color: var(--color-white);
}

.overview-grid,
.audience-grid,
.principle-grid,
.module-grid,
.process-grid,
.value-grid,
.spotlight-grid,
.support-detail-grid {
  display: grid;
  gap: 1rem;
}

.overview-grid,
.audience-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.principle-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.module-grid,
.process-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.value-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.spotlight-grid {
  grid-template-columns: 1.15fr 1fr 1fr;
}

.overview-card,
.audience-card,
.principle-card,
.module-card,
.process-step,
.spotlight-card,
.value-card,
.impact-card,
.cta-card {
  border-radius: var(--radius-md);
}

.overview-card,
.audience-card,
.principle-card,
.module-card,
.process-step,
.impact-card,
.cta-card--light {
  padding: 1.45rem;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background: rgba(255, 255, 255, 0.56);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.04);
}

.spotlight-card,
.value-card,
.cta-card {
  padding: 1.45rem;
  border: 1px solid rgba(230, 222, 212, 0.08);
  background: rgba(243, 241, 237, 0.03);
  color: var(--color-cream);
}

.spotlight-card--feature {
  background:
    linear-gradient(180deg, rgba(245, 130, 42, 0.08), rgba(243, 241, 237, 0.03)),
    rgba(243, 241, 237, 0.03);
}

.overview-card h3,
.audience-card h3,
.principle-card h3,
.module-card h3,
.process-step h3,
.spotlight-card h3,
.value-card h3,
.impact-card h3,
.cta-card h3 {
  margin: 0.9rem 0 0.65rem;
  font-family: var(--font-body);
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.spotlight-card p,
.value-card p,
.cta-card p {
  color: rgba(243, 241, 237, 0.74);
}

.impact-band,
.cta-split {
  display: grid;
  gap: 1rem;
}

.impact-band {
  grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
  align-items: start;
}

.impact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cta-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.support-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.section-grid--story {
  grid-template-columns: minmax(0, 0.96fr) minmax(320px, 1.04fr);
}

.footer-contact {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.footer-contact a {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1;
  color: var(--color-cream);
}

.footer-brand .brand {
  width: fit-content;
  max-width: 220px;
}

.brand-logo-shell--footer {
  width: 100%;
  max-width: 220px;
}

.brand-logo--footer {
  width: 100%;
  max-width: 220px;
}

/* Legacy home hero layout override replaced by .hero--landing
body[data-page="home"] .hero {
  min-height: min(88svh, 1120px);
  padding-bottom: 3.25rem;
}
*/

body[data-page="home"] .section {
  padding: clamp(3.9rem, 6vw, 5.6rem) 0;
}

.pathway-unified-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.section--pathways {
  padding-top: clamp(5.2rem, 9vw, 7.6rem);
}

.pathways-heading {
  margin-bottom: 1.8rem;
}

.pathways-heading .section-intro {
  max-width: 58ch;
  margin-top: 1rem;
}

.pathway-unified-grid {
  gap: 1.15rem;
  align-items: stretch;
}

.section--panel .impact-card {
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.45rem;
  border: 1px solid rgba(230, 222, 212, 0.08);
  background: rgba(243, 241, 237, 0.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.section--panel .impact-card h3 {
  font-size: 1.14rem;
  margin-bottom: 1.25rem;
}

.section--panel .impact-card p {
  color: rgba(243, 241, 237, 0.74);
}

.section--pathway-cta {
  padding-top: clamp(4.2rem, 7vw, 5.8rem);
}

.pathway-cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  border-radius: 28px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background:
    radial-gradient(circle at top right, rgba(245,130,42,0.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.6));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05);
}

.pathway-cta-copy h2 {
  font-size: clamp(2.3rem, 4vw, 3.5rem);
  max-width: 12ch;
  margin-top: 0.4rem;
}

.pathway-cta-copy p:last-child {
  margin-top: 1rem;
  max-width: 58ch;
  color: rgba(17, 17, 17, 0.72);
}

.pathway-cta-outline {
  color: var(--color-black);
  border-color: rgba(17, 17, 17, 0.16);
  background: transparent;
}

.pathway-cta-outline:hover {
  background: rgba(17, 17, 17, 0.04);
}

@media (max-width: 1180px) {
  .pathway-cta-band {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .section--dark .pathway-card,
  .section--panel .impact-card {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .section--dark .pathway-card {
    padding: 1.2rem;
  }
}

.section--pathways {
  padding-top: clamp(5.2rem, 9vw, 7.6rem);
}

.pathways-shell {
  position: relative;
}

.pathways-heading {
  margin-bottom: 0;
  max-width: 34rem;
}

.pathways-heading .section-intro {
  max-width: 56ch;
  margin-top: 1rem;
}

.pathways-visuals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}

.pathway-visual-card {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(230, 222, 212, 0.08);
  background: rgba(243, 241, 237, 0.03);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.pathway-visual-card .image-frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.pathway-visual-card img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pathway-unified-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  margin-top: 0;
  align-items: stretch;
}

.section--dark .pathway-card {
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.7rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025));
  border: 1px solid rgba(230, 222, 212, 0.09);
  color: var(--color-cream);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.section--dark .pathway-card .section-label {
  color: rgba(243, 241, 237, 0.72);
}

.section--dark .pathway-card h3 {
  margin-top: 1rem;
  font-size: 1.32rem;
  line-height: 1.08;
  max-width: 14ch;
}

.section--dark .pathway-card p:last-child {
  margin-top: 0.55rem;
  color: rgba(243, 241, 237, 0.74);
  max-width: 34ch;
}

@media (max-width: 1100px) {
  .pathway-unified-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .pathways-visuals,
  .pathway-unified-grid {
    grid-template-columns: 1fr;
  }

  .section--dark .pathway-card {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .section--dark .pathway-card {
    padding: 1.2rem;
  }
}

/* Responsive */
@media (max-width: 1100px) {
  .pathway-unified-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .pathway-unified-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .spotlight-grid,
  .module-grid,
  .process-grid,
  .value-grid,
  .impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .support-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .spotlight-card--feature {
    grid-column: span 2;
  }
}

@media (max-width: 1100px) {
  .impact-band,
  .section-grid--story {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .overview-grid,
  .audience-grid,
  .principle-grid,
  .module-grid,
  .process-grid,
  .value-grid,
  .spotlight-grid,
  .impact-grid,
  .cta-split,
  .support-detail-grid {
    grid-template-columns: 1fr;
  }

  .spotlight-card--feature {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .page-summary-card,
  .overview-card,
  .audience-card,
  .principle-card,
  .module-card,
  .process-step,
  .spotlight-card,
  .value-card,
  .impact-card,
  .cta-card,
  .cta-card--light {
    padding: 1.1rem;
  }
}



/* Update this in overrides.css */
.section-heading--center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Ensure the sub-text (intro) actually centers its own lines */
.section-heading--center .section-intro {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.section-heading--center .section-label {
  padding-left: 0;
}

.section-heading--center .section-label::before {
  display: none;
}

/* Standard Width (Default) */
.section-heading {
    max-width: 65ch; /* Comfortable reading width */
}

/* Utility: Wide (Targeting 2-3 lines for long headlines) */
.text-width-wide {
    max-width: 1100px !important; /* Forces it to use almost the whole 1200px container */
    width: 75% !important;
}

/* Fix for invisible Value Cards on the AI Center of Excellence page */
[data-page="ai-center"] .value-card {
    background: var(--color-white) !important; /* Pure white background */
    color: var(--color-black) !important;      /* Force dark text */
    border: 1px solid rgba(17, 17, 17, 0.05) !important;
    padding: 2rem !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important; /* Soft lift */
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

/* Ensure headings and paragraphs inside are visible */
[data-page="ai-center"] .value-card h3 {
    color: var(--color-black) !important;
    margin-top: 1rem;
}

[data-page="ai-center"] .value-card p {
    color: rgba(17, 17, 17, 0.75) !important; /* Professional softened black */
}

/* Hover effect for extra 'spice' */
[data-page="ai-center"] .value-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--color-accent) !important;
}

[data-page="ai-center"] .value-card .section-label--accent {
    color: var(--color-accent) !important;
    font-weight: 800;
}



/* Force the internal elements to respect the new wide container */
.section-heading--center.text-width-wide h2,
.section-heading--center.text-width-wide .section-intro {
    max-width: 100% !important; 
    margin-left: auto;
    margin-right: auto;
}

/* Push intro text further from the large headline */
.impact-band .content-stack .section-intro {
  margin-top: 2.5rem; /* Increased from the default */
  line-height: 1.8;
  opacity: 0.85;
}

/* Legacy Partners hero overrides replaced by .hero--title-reduced and .hero--lead-relaxed
[data-page="partners"] .hero h1 {
  font-size: clamp(4.6rem, 5vw, 5.6rem) !important;
  max-width: 12ch !important;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}

[data-page="partners"] .hero-lead {
  max-width: 52ch;
  line-height: 1.7;
}
*/
/* Center and balance the two-card layout on the Programs page */
[data-page="programs"] .audience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Change from 3 to 2 columns */
    max-width: 900px;         /* Constrains the cards so they don't get too wide */
    margin-left: auto;       /* Centers the grid container */
    margin-right: auto;      /* Centers the grid container */
    gap: 1.5rem;             /* Adds a bit more breathing room between them */
}

/* Ensure the cards look balanced on tablet/mobile */
@media (max-width: 860px) {
    [data-page="programs"] .audience-grid {
        grid-template-columns: 1fr; /* Stacks them vertically on smaller screens */
        max-width: 100%;
    }
}


/* Legacy Pathways hero override replaced by .hero--title-balanced
[data-page="pathways"] .hero h1 {
  font-size: clamp(4.6rem, 5vw, 6.2rem) !important;
  max-width: 12ch !important;
  line-height: 1.05;
  margin-bottom: 1.5rem;
}
*/


/* De-clutter the Partners mission section */
[data-page="partners"] .section-grid--mission h2 {
    max-width: 28ch !important; /* Opens up the horizontal space */
    line-height: 1.1;
    margin-bottom: 2rem; /* Pushes the intro text down */
}

[data-page="partners"] .section-grid--mission .section-intro {
    margin-bottom: 2rem; /* Separation between the two paragraphs */
    max-width: 52ch;
}
/* Update gray cards on Programs and About pages */
[data-page="programs"] .module-card,
[data-page="programs"] .process-step,
[data-page="about"] .audience-card,
[data-page="about"] .process-step-card {
    background: rgba(243, 241, 237, 0.03) !important; /* Very subtle light tint */
    border: 1px solid rgba(230, 222, 212, 0.12) !important; /* Crisp, thin light border */
    backdrop-filter: blur(8px); /* Adds the premium glass feel */
    box-shadow: none;
    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

/* Add a hover "Glow" effect */
[data-page="programs"] .module-card:hover,
[data-page="programs"] .process-step:hover,
[data-page="about"] .audience-card:hover,
[data-page="about"] .process-step-card:hover {
    background: rgba(243, 241, 237, 0.06) !important;
    border-color: var(--color-accent) !important; /* Glows orange on hover */
    transform: translateY(-5px);
}

/* Ensure text is bright and readable */
[data-page="programs"] .module-card h3,
[data-page="about"] .audience-card h3 {
    color: var(--color-white) !important;
}

[data-page="programs"] .module-card p,
[data-page="about"] .audience-card p {
    color: rgba(243, 241, 237, 0.75) !important;
}

.card-index {
    background: rgba(245, 130, 42, 0.15) !important; /* Slightly stronger orange tint */
    color: var(--color-accent) !important;
    border: 1px solid rgba(245, 130, 42, 0.2);
    backdrop-filter: blur(4px);
}

/* Fix for Process Steps in light/warm sections */
.section--warm .process-step {
    background: var(--color-white) !important; /* Pure white to pop against beige */
    border: 1px solid rgba(17, 17, 17, 0.05) !important; /* Very subtle dark border */
    padding: 2rem !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important; /* Soft 'lift' shadow */
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

/* Hover effect for the warm cards */
.section--warm .process-step:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
    border-color: var(--color-accent) !important;
}

/* Ensure text is dark and readable on white */
.section--warm .process-step h3 {
    color: var(--color-black) !important;
    font-weight: 700 !important;
}

.section--warm .process-step p {
    color: rgba(17, 17, 17, 0.75) !important;
}


/* PARTNERS PAGE: Feature Split Cleanup */

[data-page="partners"] .feature-split h2 {
  font-size: clamp(2.2rem, 4.5vw, 3rem) !important;
  max-width: 30ch !important; /* Spreads the text horizontally */
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

/* 3. Widen the gap between text and image */
[data-page="partners"] .feature-split {
  gap: 4rem !important;
  align-items: center;
}

/* Specifically for the AI Center of Excellence's problem/solution section */
[data-page="ai-center"] .feature-split .content-stack h2 {
  font-size: clamp(2.4rem, 4.5vw, 3.2rem) !important; /* Scaled down */
  max-width: 35ch !important; /* Wide enough for 2-3 lines */
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

[data-page="ai-center"] .feature-split .section-intro {
  margin-bottom: 2.5rem; /* Separation from the callout box */
  max-width: 50ch;
  line-height: 1.7;
}

/* Specific fix for that Dark Section Header */
.section--dark .section-heading h2 {
    line-height: 1.1; /* Tighter line height makes 2-3 lines look cleaner than 6 */
    margin-bottom: 1.5rem;
}
.section--pathways {
  padding-top: clamp(5rem, 8vw, 7rem);
}

.pathways-heading {
  margin-bottom: 2rem;
}

.pathways-visuals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 0 auto 1.5rem;
  max-width: 980px;
}

.pathway-visual-card {
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(230, 222, 212, 0.08);
  background: rgba(243, 241, 237, 0.03);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
}

.pathway-visual-card .image-frame {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

.pathway-visual-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.pathway-unified-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15rem;
  align-items: stretch;
}

.section--dark .pathway-card {
  min-height: 230px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.5rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025));
  border: 1px solid rgba(230, 222, 212, 0.09);
  color: var(--color-cream);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.section--dark .pathway-card .section-label {
  color: rgba(243, 241, 237, 0.72);
}

.section--dark .pathway-card h3 {
  margin-top: 0.95rem;
  font-size: 1.2rem;
  line-height: 1.08;
  max-width: 15ch;
}

.section--dark .pathway-card p:last-child {
  margin-top: 0.6rem;
  color: rgba(243, 241, 237, 0.74);
  max-width: 34ch;
}

.section--pathway-impact {
  overflow: hidden;
}

.pathway-impact-heading {
  margin-bottom: 2rem;
}

.pathway-impact-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

/* UNIFIED FEATURE CARDS: AI Center of Excellence & Partners */
[data-page="ai-center"] .feature-callout,
[data-page="ai-center"] .media-caption-card,
[data-page="partners"] .feature-callout,
[data-page="partners"] .media-caption-card {
    background: var(--color-sand) !important;
    border: none !important;
    border-left: 4px solid var(--color-accent) !important;
    
    /* Standardized sizing and alignment */
    padding: 2.5rem !important;
    border-radius: var(--radius-md) !important;
    min-height: 200px; /* Ensures the cards feel like the same 'size' */
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* Clean up visuals */
    box-shadow: none !important;
    margin-top: 2rem !important;
}

/* Sync Typography inside the unified cards */
[data-page="ai-center"] .feature-callout h3,
[data-page="ai-center"] .media-caption-card h3,
[data-page="partners"] .feature-callout h3,
[data-page="partners"] .media-caption-card h3 {
    color: var(--color-black) !important;
    font-size: 1.35rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
}

[data-page="ai-center"] .feature-callout p,
[data-page="ai-center"] .media-caption-card p,
[data-page="partners"] .feature-callout p,
[data-page="partners"] .media-caption-card p {
    color: rgba(17, 17, 17, 0.8) !important;
    margin-bottom: 0 !important;
    line-height: 1.6 !important;
}

/* Force the columns to align perfectly center */
[data-page="ai-center"] .feature-split,
[data-page="partners"] .feature-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem !important; /* Clean, wide gutter */
    align-items: center;  /* Vertically centers the left content with the right media */
}

[data-page="ai-center"] .feature-split .image-frame,
[data-page="partners"] .feature-split .image-frame {
    border: none !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
    border-radius: var(--radius-lg);
}

/* Fix for invisible text on Impact Cards in dark sections */
.section--dark .impact-grid .impact-card,
.section--panel .impact-grid .impact-card {
    background: rgba(243, 241, 237, 0.04) !important; /* Obsidian Glass */
    border: 1px solid rgba(230, 222, 212, 0.12) !important;
    backdrop-filter: blur(8px);
    padding: 2rem !important;
    box-shadow: none !important;
}

/* Force the text to be bright and visible */
.section--dark .impact-card h3,
.section--panel .impact-card h3 {
    color: var(--color-white) !important;
    margin-top: 0;
}

.section--dark .impact-card p,
.section--panel .impact-card p {
    color: rgba(243, 241, 237, 0.75) !important;
}

/* Hover effect to match the rest of the site */
.section--dark .impact-card:hover,
.section--panel .impact-card:hover {
    border-color: var(--color-accent) !important;
    background: rgba(243, 241, 237, 0.08) !important;
    transform: translateY(-8px);
}

/* Specifically target the Support page hero card */
[data-page="support"] .support-summary-card {
    padding: 2rem !important; 
    align-self: center; /* Prevents the card from stretching the full hero height */
}

[data-page="support"] .support-summary-card h2 {
    font-size: 1.85rem !important; /* Reduced from 2.85rem */
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

/* Compact the five-item list */
[data-page="support"] .support-summary-list {
    gap: 0.5rem !important; /* Tighter gap between boxes */
}

[data-page="support"] .support-summary-list > div {
    padding: 0.7rem 1rem !important; /* Reduced vertical padding */
}

[data-page="support"] .support-summary-list p {
    font-size: 0.85rem; /* Smaller description text */
    line-height: 1.4;
    color: rgba(243, 241, 237, 0.7);
}

/* Legacy Support hero alignment override replaced by .hero--support .hero-grid in main.css
[data-page="support"] .hero-grid {
    align-items: center !important;
}
*/

/* Center the 5-card layout on the Support page */
[data-page="support"] .support-detail-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* This centers the bottom row of 2 cards */
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Card Styling: Spice and Alignment */
[data-page="support"] .support-detail-card {
    flex: 1 1 320px; /* Allows cards to grow/shrink but keep a base width */
    max-width: calc(33.333% - 1.5rem);
    display: flex;
    flex-direction: column; /* Allows us to push buttons to the bottom */
    
    background: var(--color-white) !important;
    padding: 2.5rem 2rem !important;
    border-radius: 24px !important;
    border: 1px solid rgba(17, 17, 17, 0.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}

/* Push buttons to the very bottom so they align across the row */
[data-page="support"] .support-actions {
    margin-top: auto; /* This is the secret for button alignment */
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Hover Effect */
[data-page="support"] .support-detail-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
}

/* Tablet/Mobile Adjustments */
@media (max-width: 1100px) {
    [data-page="support"] .support-detail-card {
        max-width: calc(50% - 1.5rem);
    }
}

@media (max-width: 768px) {
    [data-page="support"] .support-detail-card {
        max-width: 100%;
    }
}

/* Styling for the internal elements */
[data-page="support"] .support-detail-card h3 {
    font-size: 1.25rem !important;
    line-height: 1.2;
    margin: 1rem 0 0.75rem 0 !important;
    color: var(--color-black) !important;
}

[data-page="support"] .support-detail-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(17, 17, 17, 0.7);
}

/* Make the 'Recommended for' text a bit more subtle */
[data-page="support"] .support-meta {
    font-size: 0.82rem !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-soft) !important;
    margin-top: 1rem !important;
}


/* SUPPORT PAGE: Compact, Natural Height Cards */
[data-page="support"] .support-detail-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the bottom two cards */
    gap: 1.5rem;
    align-items: flex-start; /* CRITICAL: Let cards be their own height */
}

[data-page="support"] .support-detail-card {
    flex: 1 1 300px;
    max-width: calc(33.333% - 1.5rem);
    min-height: auto !important; /* Stop forcing the length */
    padding: 1.75rem !important; /* Tighter padding for a cleaner look */
    background: var(--color-white) !important;
    border-radius: 20px !important;
}

/* Remove the forced button alignment */
[data-page="support"] .support-actions {
    margin-top: 1.5rem !important; /* Sits right under the text now */
    padding-top: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Tighter Typography for Support Cards */
[data-page="support"] .support-detail-card h3 {
    font-size: 1.15rem !important;
    margin: 0.75rem 0 0.5rem 0 !important;
}

[data-page="support"] .support-detail-card p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.75rem !important;
}

[data-page="support"] .support-meta {
    font-size: 0.75rem !important;
    margin-top: 0.5rem !important;
    opacity: 0.8;
}

/* SUPPORT PAGE: Balanced Baseline Grid */
[data-page="support"] .support-detail-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the bottom two cards */
    gap: 1.5rem;
    align-items: stretch; /* Cards in the same row will match height */
}

[data-page="support"] .support-detail-card {
    flex: 1 1 320px;
    max-width: calc(33.333% - 1.5rem);
    display: flex;
    flex-direction: column; /* Allows internal alignment */
    
    background: var(--color-white) !important;
    padding: 2rem !important;
    border-radius: 24px !important;
    border: 1px solid rgba(17, 17, 17, 0.05) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

/* Align buttons to the bottom of the card baseline */
[data-page="support"] .support-actions {
    margin-top: auto; /* Pushes buttons to the bottom regardless of text length */
    padding-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* Premium Label Pills */
[data-page="support"] .card-index {
    align-self: center; /* Centers the pill in the card */
    background: rgba(245, 130, 42, 0.08) !important;
    color: var(--color-accent) !important;
    border: 1px solid rgba(245, 130, 42, 0.15);
    padding: 0.4rem 1rem !important;
    font-size: 0.72rem !important;
    margin-bottom: 0.5rem;
}

/* Center card titles for a cleaner look since you centered the section header */
[data-page="support"] .support-detail-card h3,
[data-page="support"] .support-detail-card p {
    text-align: center;
}



/* 1. FORCE BUTTONS TO THE BOTTOM OF THE CARD */
[data-page="support"] .support-actions {
    margin-top: auto !important; /* CRITICAL: Overrides the old 1.5rem rule */
    padding-top: 1.5rem !important;
    display: flex;
    flex-direction: column;
    gap: 0.6rem !important;
    width: 100%; /* Ensures the container fills the card */
}

/* 2. SLEEK, FULL-WIDTH BUTTONS */
[data-page="support"] .support-actions .button {
    width: 100% !important; /* Makes the buttons span edge-to-edge inside the card */
    padding: 0.75rem 1rem !important; /* Slimmer vertical padding */
    font-size: 0.8rem !important;
    border-radius: 8px !important; /* A sharper, more modern corner */
    box-shadow: none !important; /* Removes the bulky 'glow' */
    justify-content: center !important;
}

/* Refine Primary Button */
[data-page="support"] .support-actions .button--primary {
    background: var(--color-accent) !important;
    color: var(--color-white) !important;
    border: 1px solid var(--color-accent) !important;
}

/* Clean hover effect instead of heavy drop shadow */
[data-page="support"] .support-actions .button--primary:hover {
    background: transparent !important;
    color: var(--color-accent) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(245, 130, 42, 0.15) !important;
}

/* Refine Secondary Button */
[data-page="support"] .support-actions .button--dark {
    background: transparent !important;
    color: var(--color-black) !important;
    border: 1px solid rgba(17, 17, 17, 0.15) !important;
}

[data-page="support"] .support-actions .button--dark:hover {
    background: var(--color-black) !important;
    color: var(--color-white) !important;
    border-color: var(--color-black) !important;
}

/* SUPPORT PAGE: Obsidian Glass fix for the Module Cards */
[data-page="support"] .module-card {
    background: rgba(243, 241, 237, 0.03) !important; /* Subtle frosted tint */
    border: 1px solid rgba(230, 222, 212, 0.12) !important; /* Crisp thin border */
    backdrop-filter: blur(8px); /* Premium glass effect */
    box-shadow: none !important;
    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease !important;
}

/* Hover glow effect */
[data-page="support"] .module-card:hover {
    background: rgba(243, 241, 237, 0.06) !important;
    border-color: var(--color-accent) !important; /* Orange edge glow */
    transform: translateY(-5px);
}

/* Ensure text stays bright on the dark background */
[data-page="support"] .module-card h3 {
    color: var(--color-white) !important;
}

[data-page="support"] .module-card p {
    color: rgba(243, 241, 237, 0.75) !important; /* Softened white for readability */
}

/* SUPPORT PAGE: Bottom CTA / Bridge Section Cleanup */

/* 1. Widen the gap between the two cards */
[data-page="support"] .support-bridge {
    gap: 2rem !important; 
}

/* 2. Upgrade both cards to Premium Obsidian Glass */
[data-page="support"] .support-bridge-copy,
[data-page="support"] .support-bridge-card {
    padding: 3rem 2.5rem !important; /* Adds much-needed breathing room */
    background: rgba(243, 241, 237, 0.03) !important;
    border: 1px solid rgba(230, 222, 212, 0.1) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
}

/* 3. Fix the Right Card (Contact Info) Collision & Layout */
[data-page="support"] .support-bridge-card {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically centers the content */
    gap: 2.5rem !important; /* Creates clear separation between the two info blocks */
}

/* Force the orange labels to sit on their own line */
[data-page="support"] .support-bridge-card .metric-kicker {
    display: block !important; 
    margin-bottom: 0.5rem !important;
    color: var(--color-accent) !important;
}

/* Fix the email link sizing and wrapping */
[data-page="support"] .contact-link {
    display: block !important; /* Drops the email safely below the label */
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important; /* Slightly scales it down to fit */
    margin-top: 0 !important;
    word-break: break-all; /* Ensures long emails don't break the box on mobile */
    color: var(--color-white) !important;
}

/* 4. Polish the Left Card */
[data-page="support"] .support-bridge-copy h2 {
    margin-bottom: 1rem;
    line-height: 1.1;
}

[data-page="support"] .support-bridge-copy .button-row {
    margin-top: 2.5rem !important; /* Pushes the sleek buttons down for better balance */
}

/* SUPPORT PAGE: Sleek Bottom CTA Section */

/* 1. Stop the cards from stretching into giant boxes */
[data-page="support"] .support-bridge {
    gap: 1.5rem !important; 
    align-items: center !important; /* Centers them vertically instead of stretching them */
}

/* 2. Sleeker, tighter padding for a refined look */
[data-page="support"] .support-bridge-copy,
[data-page="support"] .support-bridge-card {
    padding: 2rem !important; /* Scaled down from the massive 3rem */
    background: rgba(243, 241, 237, 0.03) !important;
    border: 1px solid rgba(230, 222, 212, 0.1) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border-radius: var(--radius-lg);
    min-height: auto !important; /* Kills the dead space */
}

/* 3. Tighten up the Contact Card on the right */
[data-page="support"] .support-bridge-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important; 
    gap: 1.5rem !important; /* Brings the two info sections closer together */
}

[data-page="support"] .support-bridge-card .metric-kicker {
    display: block !important; 
    margin-bottom: 0.25rem !important;
    color: var(--color-accent) !important;
}

[data-page="support"] .contact-link {
    display: block !important; 
    font-size: clamp(1.4rem, 3vw, 1.8rem) !important; /* Slightly smaller for elegance */
    margin-top: 0 !important;
    word-break: break-all; 
    color: var(--color-white) !important;
}

/* 4. Tidy the Left Card */
[data-page="support"] .support-bridge-copy h2 {
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

[data-page="support"] .support-bridge-copy .button-row {
    margin-top: 1.5rem !important; /* Brings the buttons back up to the text */
}

/* 1. Force both cards to stretch to the exact same height */
[data-page="support"] .support-bridge {
    gap: 1.5rem !important; 
    align-items: stretch !important; /* Swapped from 'center' back to 'stretch' */
}

/* 2. Keep the content inside the right card perfectly centered */
[data-page="support"] .support-bridge-card {
    display: flex;
    flex-direction: column;
    justify-content: center !important; /* Centers the text vertically inside the stretched box */
    gap: 1.5rem !important; 
}

/* Center the 5-card Spotlight Grid on Home */
[data-page="home"] .spotlight-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the bottom row */
    gap: 1.5rem;
}

[data-page="home"] .spotlight-card {
    flex: 1 1 320px; /* Base width */
    max-width: calc(33.333% - 1.5rem);
}

/* Featured card (AI Center of Excellence) takes more presence */
[data-page="home"] .spotlight-card--feature {
    flex: 1 1 400px;
    max-width: calc(40% - 1.5rem);
}

@media (max-width: 1100px) {
    [data-page="home"] .spotlight-card {
        max-width: calc(50% - 1.5rem);
    }
}

/* Premium White Card Refinement (Home Overview & Impact) */
.overview-card, 
.impact-card {
    background: var(--color-white) !important;
    border: 1px solid rgba(17, 17, 17, 0.04) !important;
    padding: 2.5rem 2rem !important;
    border-radius: 24px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease !important;
}

.overview-card:hover, 
.impact-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08) !important;
}

/* Fix the kicker line on Home */
.impact-footer-kicker {
    grid-column: 1 / -1;
    margin-top: 1.5rem;
    opacity: 0.6;
}


/* Realignment for the Impact Section */
.impact-band {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Balances the heavy text with the cards */
    gap: 4rem;
    align-items: start;
}

/* Fixes the intro text positioning */
.impact-band .content-stack .section-intro {
    margin-top: 2rem;
    max-width: 48ch;
    line-height: 1.7;
    color: rgba(17, 17, 17, 0.75);
}

/* Standardizes card heights and spacing */
.impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

/* Styles the decorative kicker at the bottom of the grid */
.impact-footer-kicker {
    grid-column: 1 / -1; /* Spans across all 3 cards */
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.impact-footer-kicker p {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
    color: var(--color-gray-soft);
    white-space: nowrap;
}

.kicker-line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(17, 17, 17, 0.15), transparent);
}

/* HOME: Impact Section Realignment */
[data-page="home"] .impact-band {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Balanced 50/50 split */
    gap: 5rem;
    align-items: center;
}

[data-page="home"] #impact h2 {
    max-width: 22ch !important; /* Spreads the headline across 2-3 lines instead of 7 */
    line-height: 1.05;
}

[data-page="home"] .impact-grid-stack {
    display: flex;
    flex-direction: column; /* Stacks cards vertically so they are wide and readable */
    gap: 1.25rem;
}

[data-page="home"] .impact-card {
    min-height: auto !important;
    padding: 1.8rem 2rem !important;
}

/* Legacy Home hero headline override replaced by .hero--title-wide
[data-page="home"] .hero h1 {
    max-width: 20ch !important;
    line-height: 1.05;
}
*/

/* HOME: Spotlight Grid Alignment */
[data-page="home"] .spotlight-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centers the bottom row of 2 cards */
    gap: 1.5rem;
}

[data-page="home"] .spotlight-card {
    flex: 1 1 320px;
    max-width: calc(33.333% - 1.5rem);
}

/* Give the AI Center of Excellence flagship card a bit more horizontal 'weight' */
[data-page="home"] .spotlight-card--feature {
    flex: 1 1 420px;
    max-width: calc(40% - 1.5rem);
}

/* Legacy About hero overrides replaced by .hero--title-wide, .hero--title-small, and .hero--lead-narrow
[data-page="about"] .hero h1 {
    font-size: clamp(2.8rem, 6vw, 4.5rem) !important;
    max-width: 20ch !important;
    line-height: 1.05;
    margin-bottom: 1.5rem;
}

[data-page="about"] .hero-grid {
    align-items: center !important;
}

[data-page="about"] .hero-lead {
    max-width: 50ch;
    margin-top: 1rem;
}
*/

/* ABOUT PAGE: Mission Section Polish */

/* Fix the headline 'tower' */
[data-page="about"] .feature-split h2 {
    max-width: 20ch !important;
    line-height: 1.05;
    margin-bottom: 1.5rem;
}

/* Standardize the Mission Focus card */
[data-page="about"] .media-caption-card {
    background: var(--color-sand) !important;
    border: none !important;
    border-left: 4px solid var(--color-accent) !important;
    padding: 2rem !important;
    border-radius: 24px !important;
    box-shadow: none !important;
    margin-top: 1rem;
}

/* Style the internal callout box */
[data-page="about"] .feature-callout {
    background: rgba(17, 17, 17, 0.03) !important; /* Subtle tint */
    padding: 1.75rem !important;
    border-radius: var(--radius-md) !important;
    border-left: 4px solid var(--color-accent) !important;
    margin: 2rem 0 !important;
}

[data-page="about"] .feature-callout h3 {
    font-size: 1.2rem !important;
    margin-top: 0 !important;
    color: var(--color-black) !important;
}

[data-page="about"] .feature-callout p {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
    color: rgba(17, 17, 17, 0.8) !important;
}
.section--panel .impact-card {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1.35rem;
  border: 1px solid rgba(230, 222, 212, 0.08);
  background: rgba(243, 241, 237, 0.05);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}



.section--panel .impact-card h3 {
  font-size: 1.08rem;
  margin-bottom: 0.9rem;
}

.section--panel .impact-card p {
  color: rgba(243, 241, 237, 0.74);
}

.section--pathway-cta {
  padding-top: clamp(4rem, 7vw, 5.5rem);
}


[data-page="home"] .credibility-band {
    /* Push it further down from the Hero content */
    margin-top: .5rem !important; 
    margin-bottom: -4rem !important;
    position: relative;
    z-index: 10;
}

[data-page="home"] .credibility-grid {
    background: rgba(23, 25, 28, 0.98) !important; /* Keep your dark design */
    border: 1px solid rgba(230, 222, 212, 0.12) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4) !important; /* Deeper shadow for the 'float' */
}
.pathway-cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  border-radius: 28px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  background:
    radial-gradient(circle at top right, rgba(245,130,42,0.07), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.76), rgba(255,255,255,0.62));
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.05);
}

.pathway-cta-copy h2 {
  font-size: clamp(2.2rem, 4vw, 3.3rem);
  max-width: 11ch;
  margin-top: 0.45rem;
}

.pathway-cta-copy p:last-child {
  margin-top: 1rem;
  max-width: 58ch;
  color: rgba(17, 17, 17, 0.72);
}

.pathway-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.85rem;
}

.pathway-cta-outline {
  color: var(--color-black);
  border-color: rgba(17, 17, 17, 0.16);
  background: transparent;
}

.pathway-cta-outline:hover {
  background: rgba(17, 17, 17, 0.04);
}


/* ==========================================================================
   FINAL INTERACTIVE ECOSYSTEM ROADMAP
   ========================================================================== */

#ecosystem-discovery {
    background: var(--color-obsidian) !important;
    padding: 8rem 0 !important;
}

/* 1. HEADLINE BALANCE */
#ecosystem-discovery .section-heading {
    max-width: 1100px !important; /* Spreads text across 2 lines perfectly */
    margin-bottom: 4rem;
}

#ecosystem-discovery h2 {
    font-size: clamp(2.6rem, 5vw, 3.8rem) !important;
    line-height: 1.1 !important;
    margin-bottom: 1.25rem;
}

#ecosystem-discovery .section-intro {
    max-width: 55ch !important;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    opacity: 0.85;
}

/* 2. CANVAS CONTAINER */
.discovery-canvas {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4); /* Deep drop shadow behind image */
    overflow: visible; /* CRITICAL: Tooltips must break the container bounds */
}

.canvas-bg {
    display: block;
    width: 100%;
    border-radius: calc(var(--radius-lg) - 10px);
    filter: brightness(0.85); /* Dims the background so the orange nodes pop */
}

/* 3. UNIFIED 'OBSIDIAN & ACCENT' NODES */
.hotspot {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.hotspot-trigger {
    width: 18px !important;
    height: 18px !important;
    background: var(--color-obsidian) !important; /* Dark center grounds the dot */
    border: 2px solid var(--color-accent) !important; /* Unified orange ring */
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(245, 130, 42, 0.4);
    position: relative;
    transition: transform 0.3s ease, background 0.3s ease;
    padding: 0;
    display: block;
}

.hotspot-trigger--hub {
    width: 28px !important;
    height: 28px !important;
    border-width: 3px !important;
}

.hotspot-trigger:hover,
.hotspot-trigger:focus-visible {
    background: var(--color-accent) !important;
    transform: scale(1.2);
    outline: none;
}

/* Unified Soft Pulse */
.hotspot-trigger::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 1px solid var(--color-accent);
    animation: node-pulse 2.5s infinite cubic-bezier(0.215, 0.610, 0.355, 1);
    pointer-events: none;
}

@keyframes node-pulse {
    0% { transform: scale(0.5); opacity: 0.8; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* 4. OBSIDIAN GLASS TOOLTIPS */
.hotspot-content {
    position: absolute;
    width: 320px;
    background: rgba(23, 25, 28, 0.96) !important; /* Solid obsidian glass */
    backdrop-filter: blur(12px);
    border: 1px solid rgba(245, 130, 42, 0.3) !important; /* Unified orange glow edge */
    padding: 1.75rem !important;
    border-radius: 16px !important;
    color: var(--color-white) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6) !important;
    z-index: 50;
    text-align: left;
    pointer-events: none; /* Prevents cursor flicker */
}

.hotspot:hover .hotspot-content,
.hotspot-trigger:focus-visible + .hotspot-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Typography inside Tooltips */
.hotspot-content .metric-kicker {
    display: block;
    font-size: 0.65rem !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 0.6rem !important;
    color: var(--color-accent) !important;
    text-transform: uppercase;
    font-weight: 800;
}

.hotspot-content h3 {
    color: var(--color-white) !important;
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
    margin: 0 0 0.6rem 0 !important;
    font-weight: 700 !important;
}

.hotspot-content p {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
    color: rgba(243, 241, 237, 0.75) !important;
    margin: 0 !important;
}

/* Home Hero Polish */
[data-page="index"] .hero-grid {
    /* Fixes 'misaligned': Vertically centers the text with the side card */
    align-items: center; 
    gap: 4rem;
}

[data-page="index"] .hero h1 {
    font-size: clamp(3.2rem, 7vw, 5.2rem); 
    max-width: 12ch; /* Tighter width forces a more vertical, powerful stack */
    line-height: 0.92; /* Tightened from 1.1 - this is the "prestige" look */
    letter-spacing: -0.04em; /* Aggressive squeeze makes the serif look custom */
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-wrap: balance; /* Prevents awkward single words on the last line */
}

[data-page="index"] .hero-lead {
    max-width: 46ch;
    opacity: 0.85; /* Makes the main heading feel "whiter" and more urgent */
    font-weight: 500;
}




/* =========================================
   1. FORCE UNIFORM HERO HEADINGS
   ========================================= */
.hero h1 {
    /* Caps the maximum size so it's never "super big" */
    font-size: clamp(2.8rem, 5vw, 4rem) !important; 
    
    /* Forces the text to wrap nicely instead of stretching too wide */
    max-width: 16ch !important; 
    
    /* Tightens the vertical spacing between lines */
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1.5rem !important;
}

.hero-lead {
    max-width: 48ch !important; /* Keeps the paragraph under the heading tidy */
    font-size: 1.1rem !important;
}

/* =========================================
   2. FORCE UNIFORM HERO PANELS (SIDEBARS)
   ========================================= */
.hero-panel,
.page-summary-card {
    padding: 2.5rem 2rem !important;
    background: var(--color-obsidian) !important;
    border: 1px solid rgba(245, 130, 42, 0.2) !important; /* Subtle orange border */
    border-radius: 24px !important;
    max-width: 420px !important; /* Stops the panel from stretching too wide */
}

/* Fix the headings inside the panels */
.hero-panel h2,
.page-summary-card h2 {
    font-size: 1.7rem !important;
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
    max-width: 100% !important;
}

/* =========================================
   FIX HERO ALIGNMENT & PULL CONTENT UP
   ========================================= */
.hero-grid {
    /* Aligns the top of the heading exactly with the top of the panel */
    align-items: flex-start !important; 
    gap: 4rem;
}

.hero-copy {
    /* Kills the hidden 2rem padding that was pushing the text down */
    padding-top: 0 !important; 
    /* Bumps the text down just a hair so the H1 aligns perfectly with the text inside the panel */
    margin-top: 2.5rem !important; 
}

/* Pulls the entire Home Page hero block higher up the screen */
[data-page="home"] .hero {
    padding-top: calc(var(--header-height) + 4rem) !important;
}

/* =========================================
   FORMS & INTAKE PAGES
   ========================================= */
.intake-section {
    padding-top: calc(var(--header-height) + 4rem);
    padding-bottom: 6rem;
    min-height: 100svh;
    background: var(--color-cream);
}

.form-card {
    background: var(--color-white);
    padding: 3rem;
    border-radius: 24px;
    border: 1px solid rgba(17, 17, 17, 0.05);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
    max-width: 640px;
    margin: 3rem auto 0;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-black);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-control {
    width: 100%;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(17, 17, 17, 0.15);
    background: #faf9f7;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-black);
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-accent);
    background: var(--color-white);
    box-shadow: 0 0 0 4px rgba(245, 130, 42, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}
/* =========================================
   FIX INTAKE PAGE HEADER VISIBILITY
   ========================================= */
/* Forces the header to be dark immediately on form pages */
body[data-page="intake"] .site-header {
    background: rgba(17, 17, 17, 0.98) !important; 
    border-bottom: 1px solid rgba(230, 222, 212, 0.1) !important;
}
/* Tooltip Positioning */
.tooltip-right { left: 45px; top: 50%; transform: translateY(-50%) translateX(-15px); }
.hotspot:hover .tooltip-right { transform: translateY(-50%) translateX(0); }

.tooltip-left { right: 45px; left: auto; top: 50%; transform: translateY(-50%) translateX(15px); }
.hotspot:hover .tooltip-left { transform: translateY(-50%) translateX(0); }

.tooltip-center { bottom: 45px; left: 50%; transform: translateX(-50%) translateY(15px); }
.hotspot:hover .tooltip-center { transform: translateX(-50%) translateY(0); }



@media (max-width: 1180px) {
  .pathway-unified-grid,
  .pathway-impact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pathway-cta-band {
    grid-template-columns: 1fr;
  }

  .pathway-cta-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 860px) {
  .pathways-visuals,
  .pathway-unified-grid,
  .pathway-impact-grid {
    grid-template-columns: 1fr;
  }

  .section--dark .pathway-card,
  .section--panel .impact-card {
    min-height: auto;
  }

  .pathway-cta-band {
    padding: 1.4rem;
  }

  .pathway-cta-copy h2 {
    max-width: none;
  }
}

@media (max-width: 640px) {
  .section--dark .pathway-card {
    padding: 1.2rem;
  }

  .pathway-cta-actions {
    align-items: stretch;
  }

  .pathway-cta-actions .button {
    width: 100%;
  }
}

[data-page="pathways"] .pathway-cta-copy h2 {
  max-width: 25ch; 
}

[data-page="pathways"] .section-heading h2 {
  max-width: 35ch;
  margin-left: auto;
  margin-right: auto;
}

/* Fix the alignment of the career pathways section */
[data-page="pathways"] .section-heading {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Align buttons to the left */
[data-page="pathways"] .pathway-cta-actions {
  justify-content: flex-start; /* Change to flex-end for right-alignment */
  margin-top: 1.5rem;
}

[data-page="pathways"] .pathway-visual-card img {
  width: 100%;
  aspect-ratio: 3 / 2; /* Maintains a consistent "photographic" shape */
  object-fit: cover;   /* Crops the image to fill the space without stretching */
  display: block;
  transition: filter 0.4s ease;
}

/* Subtle darkening makes the white text nearby easier to read */
[data-page="pathways"] .pathway-visual-card img {
  filter: brightness(0.85);
}

[data-page="pathways"] .pathway-visual-card:hover img {
  filter: brightness(1);
}

[data-page="pathways"] .pathway-visual-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(230, 222, 212, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); /* Soft, deep shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

[data-page="pathways"] .pathway-visual-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
}

[data-page="pathways"] .pathways-visuals {
  max-width: 1000px; /* Constrain this to match the visual width of your heading */
  margin: 0 auto 4rem auto; /* Centers the whole photo group */
  gap: 2rem; /* Give the two photos more breathing room */
}

/* Legacy duplicate .hero--interior block consolidated at the top of this file
.hero--interior {
  padding-top: calc(var(--header-height) + 4rem) !important;
  min-height: auto;
  padding-bottom: 3.6rem;
}
*/

/* Specifically targets the Mission section on the About page */
[data-page="about"] .section-grid--mission {
  padding-top: 5rem; /* Adds a significant buffer at the top of the grid */
  margin-top: 2rem;
}

/* Increases spacing for the heading within that section */
[data-page="about"] .section-grid--mission .content-stack h2 {
  margin-bottom: 2.5rem; /* Pushes the paragraphs further down from the headline */
}

/* Container for the 4 boxes */
[data-page="about"] .process-step-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2x2 grid for better readability */
    gap: 1.25rem;
    margin-top: 2.5rem;
}

/* Individual Card Styling */
[data-page="about"] .process-step-card {
    background: rgba(243, 241, 237, 0.04);
    border: 1px solid rgba(230, 222, 212, 0.08);
    padding: 1.5rem;
    border-radius: 18px;
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

[data-page="about"] .process-step-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
}

/* The Step Number (01, 02, etc) */
[data-page="about"] .step-number {
    font-family: var(--font-body);
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--color-accent);
    background: rgba(245, 130, 42, 0.1);
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    line-height: 1;
}

/* Card Typography */
[data-page="about"] .process-step-card h3 {
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
    color: var(--color-cream);
}

[data-page="about"] .process-step-card p {
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(243, 241, 237, 0.7);
    margin: 0;
}

/* Mobile: Stack them vertically */
@media (max-width: 640px) {
    [data-page="about"] .process-step-track {
        grid-template-columns: 1fr;
    }
}
/* Force visibility for all elements inside light CTA cards */
.cta-card--light, 
.cta-card--light h3, 
.cta-card--light p,
.cta-card--light .section-label {
  color: var(--color-black) !important;
}

.cta-card--light {
  background: var(--color-white) !important;
  border: 1px solid rgba(17, 17, 17, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* Ensure the accent label stays orange but is readable */
.cta-card--light .section-label--accent {
  color: var(--color-accent) !important;
}

/* Secondary text fix for better readability */
.cta-card--light p {
  color: rgba(17, 17, 17, 0.8) !important;
}

/* ==========================================================================
   Responsive Hardening Pass
   ========================================================================== */

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

body,
p,
h1,
h2,
h3,
a,
span {
  overflow-wrap: break-word;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

.hero h1,
.section h2,
.hero-panel h2,
.page-summary-card h2,
.support-summary-card h2,
.pathway-cta-copy h2,
#ecosystem-discovery h2,
.support-detail-card h3,
.module-card h3,
.spotlight-card h3,
.process-step h3 {
  text-wrap: balance;
}

.hero-panel,
.page-summary-card,
.support-summary-card,
.support-detail-card,
.form-card,
.pathway-cta-band {
  width: 100%;
  max-width: 100% !important;
  min-width: 0;
}

.hero-copy,
.content-stack,
.media-column,
.section-heading,
.support-bridge-copy,
.support-bridge-card,
.editorial-copy,
.support-copy,
.overview-card,
.audience-card,
.principle-card,
.module-card,
.process-step,
.spotlight-card,
.value-card,
.impact-card,
.cta-card,
.cta-card--light,
.pathway-card,
.support-detail-card,
.footer-grid > * {
  min-width: 0;
}

.hero-copy,
.content-stack,
.section-heading {
  max-width: 100% !important;
}

.hero-copy > *,
.content-stack > *,
.section-heading > *,
.support-detail-card > *,
.support-summary-list > *,
.hero-panel-grid > article {
  max-width: 100%;
}

.button,
.mobile-nav a,
.footer-links a {
  min-width: 0;
}

.mobile-menu {
  max-height: calc(100svh - var(--header-height));
  overflow-y: auto;
}

.footer-contact a,
.contact-link {
  overflow-wrap: anywhere;
}

@media (max-width: 1024px) {
  .hero-grid,
  .hero--support .hero-grid {
    gap: 1.5rem !important;
  }

  .hero-copy {
    margin-top: 0 !important;
  }

  .hero-panel,
  .page-summary-card,
  .support-summary-card {
    padding: 1.8rem 1.5rem !important;
  }

  [data-page="home"] .impact-band {
    gap: 2.5rem !important;
  }

  [data-page="home"] .spotlight-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }

  [data-page="home"] .spotlight-card,
  [data-page="home"] .spotlight-card--feature {
    flex: initial !important;
    max-width: none !important;
  }

  [data-page="home"] .spotlight-card--feature {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  :root {
    --header-height: 76px;
  }

  .container {
    width: min(var(--container), calc(100% - 2.5rem));
  }

  .header-row {
    gap: 0.75rem;
  }

  .brand-logo--header {
    width: clamp(132px, 38vw, 168px);
  }

  .hero {
    padding-top: calc(var(--header-height) + 2.2rem) !important;
    padding-bottom: 2.75rem !important;
  }

  .hero h1 {
    font-size: clamp(2.55rem, 8vw, 3.85rem) !important;
    max-width: 12ch !important;
    line-height: 1.02 !important;
  }

  .section h2,
  #ecosystem-discovery h2 {
    font-size: clamp(2.1rem, 9vw, 3rem) !important;
    line-height: 1.05 !important;
    max-width: 14ch !important;
  }

  .hero-panel h2,
  .page-summary-card h2,
  .support-summary-card h2,
  .pathway-cta-copy h2 {
    font-size: clamp(1.7rem, 7vw, 2.3rem) !important;
    line-height: 1.08 !important;
  }

  .hero-lead,
  .section-intro,
  .support-meta,
  .pathway-cta-copy p:last-child {
    font-size: 1rem !important;
    line-height: 1.65 !important;
    max-width: 34rem !important;
  }

  .section {
    padding: clamp(3.8rem, 10vw, 5rem) 0;
  }

  .section-heading {
    margin-bottom: 1.8rem;
  }

  .overview-grid,
  .audience-grid,
  .principle-grid,
  .module-grid,
  .process-grid,
  .value-grid,
  .cta-split,
  .support-detail-grid,
  .program-grid,
  .pathway-grid,
  .pathway-unified-grid,
  .pathway-impact-grid,
  .action-grid,
  .feature-grid,
  .partner-card-grid,
  .timeline-grid,
  .impact-grid,
  .impact-grid--compact,
  .pathways-visuals {
    grid-template-columns: 1fr !important;
  }

  .credibility-grid {
    grid-template-columns: 1fr !important;
    padding: 1rem;
  }

  [data-page="home"] .credibility-band {
    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
  }

  [data-page="home"] .impact-band {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    align-items: start !important;
  }

  [data-page="home"] #impact h2 {
    max-width: 13ch !important;
  }

  [data-page="home"] .impact-grid-stack {
    gap: 1rem;
  }

  [data-page="home"] .spotlight-grid {
    grid-template-columns: 1fr !important;
  }

  [data-page="home"] .spotlight-card--feature {
    grid-column: auto;
  }

  .spotlight-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .spotlight-card,
  .spotlight-card--feature {
    max-width: none !important;
  }

  .hero-panel,
  .page-summary-card,
  .support-summary-card,
  .support-detail-card,
  .timeline-block,
  .editorial-panel,
  .support-panel,
  .support-bridge-copy,
  .support-bridge-card,
  .contact-card,
  .form-card,
  .pathway-cta-band {
    padding: 1.35rem !important;
  }

  .button-row,
  .support-actions,
  .pathway-cta-actions {
    align-items: stretch;
    gap: 0.75rem;
  }

  .button-row .button,
  .support-actions .button,
  .pathway-cta-actions .button {
    width: 100%;
  }

  .hero-notes {
    gap: 0.65rem;
  }

  .hero-notes span {
    width: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 1.4rem;
  }

  .footer-links,
  .footer-meta {
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .footer-links {
    gap: 0.75rem 1rem;
  }

  .footer-contact a,
  .contact-link {
    font-size: clamp(1.45rem, 7vw, 1.9rem);
    line-height: 1.05;
  }

  .pathway-cta-actions {
    justify-content: flex-start !important;
  }

  #ecosystem-discovery {
    padding: clamp(4rem, 12vw, 5rem) 0 !important;
  }

  .discovery-canvas {
    display: grid;
    gap: 0.9rem;
    padding: 0 !important;
    box-shadow: none;
    overflow: hidden !important;
  }

  .canvas-bg {
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin-bottom: 0.2rem;
  }

  .hotspot {
    position: static !important;
    transform: none !important;
  }

  .hotspot-trigger {
    display: none !important;
  }

  .hotspot-content,
  .tooltip-right,
  .tooltip-left,
  .tooltip-center {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    padding: 1.2rem !important;
  }

  .hotspot:hover .hotspot-content,
  .hotspot-trigger:focus-visible + .hotspot-content {
    transform: none !important;
  }
}

@media (max-width: 430px) {
  .container {
    width: min(var(--container), calc(100% - 3rem));
  }

  .hero h1 {
    font-size: clamp(2rem, 9.6vw, 2.45rem) !important;
    max-width: 8.5ch !important;
  }

  .section h2,
  #ecosystem-discovery h2 {
    font-size: clamp(1.9rem, 9.5vw, 2.35rem) !important;
    max-width: 11ch !important;
  }

  .hero-panel,
  .page-summary-card,
  .support-summary-card,
  .support-detail-card,
  .overview-card,
  .audience-card,
  .principle-card,
  .module-card,
  .process-step,
  .spotlight-card,
  .value-card,
  .impact-card,
  .cta-card,
  .cta-card--light,
  .support-bridge-copy,
  .support-bridge-card,
  .form-card,
  .pathway-cta-band {
    padding: 1.15rem !important;
    border-radius: 20px !important;
  }

  .button {
    padding-inline: 1rem;
    line-height: 1.3;
  }

  .impact-footer-kicker {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }

  .impact-footer-kicker p {
    white-space: normal;
  }

  .form-card {
    margin-top: 2rem;
  }

  [data-page="about"] .process-step-card {
    flex-direction: column;
    gap: 0.85rem;
  }
}

/* ==========================================================================
   Follow-up Mobile Composition Fixes
   ========================================================================== */

@media (max-width: 768px) {
  .section-heading--center h2 {
    max-width: 18ch !important;
  }

  .section-heading--center .section-intro {
    max-width: 40ch !important;
  }

  [data-page="ai-center"] .feature-split,
  [data-page="partners"] .feature-split,
  [data-page="about"] .feature-split {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    align-items: start !important;
  }

  [data-page="ai-center"] .feature-split .content-stack h2,
  [data-page="partners"] .feature-split h2,
  [data-page="about"] .feature-split h2 {
    max-width: none !important;
    font-size: clamp(2.2rem, 7vw, 2.9rem) !important;
    line-height: 1.08 !important;
  }

  [data-page="ai-center"] .feature-split .section-intro,
  [data-page="partners"] .feature-split .section-intro,
  [data-page="about"] .feature-split .section-intro {
    max-width: none !important;
  }

  [data-page="ai-center"] .feature-callout,
  [data-page="ai-center"] .media-caption-card,
  [data-page="partners"] .feature-callout,
  [data-page="partners"] .media-caption-card,
  [data-page="about"] .feature-callout,
  [data-page="about"] .media-caption-card {
    min-height: 0 !important;
    padding: 1.5rem !important;
    margin-top: 1rem !important;
  }

  .editorial-panel {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
    align-items: start !important;
  }

  .editorial-copy {
    padding: 0.25rem 0 0 !important;
  }

  .editorial-copy h3,
  .support-copy h3,
  .timeline-heading h3 {
    font-size: clamp(1.9rem, 6vw, 2.35rem) !important;
    line-height: 1.08 !important;
    max-width: none !important;
  }

  .solo {
    width: 100%;
  }
}

@media (max-width: 430px) {
  [data-page="home"] .hero--landing {
    padding-top: calc(var(--header-height) + 1.1rem) !important;
    padding-bottom: 1.9rem !important;
  }

  [data-page="home"] .hero--landing .hero-grid,
  .hero--interior .hero-grid,
  .hero--support .hero-grid {
    justify-items: center !important;
    gap: 1.15rem !important;
  }

  [data-page="home"] .hero-copy,
  .hero--interior .hero-copy,
  .hero--support .hero-copy {
    text-align: center !important;
    align-items: center !important;
    margin-inline: auto !important;
  }

  [data-page="home"] .hero-copy h1 {
    font-size: clamp(2.1rem, 9vw, 2.55rem) !important;
    max-width: 13ch !important;
    line-height: 1.02 !important;
  }

  [data-page="home"] .hero-lead,
  [data-page="home"] .hero-copy,
  [data-page="home"] .hero-panel {
    max-width: none !important;
  }

  [data-page="home"] .hero-lead {
    margin-top: 0.85rem !important;
    max-width: 34ch !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  [data-page="home"] .button-row,
  .hero--interior .button-row,
  .hero--support .button-row {
    margin-top: 1.15rem !important;
    justify-content: center !important;
  }

  [data-page="home"] .hero-notes,
  .hero--interior .hero-notes,
  .hero--support .hero-notes {
    margin-top: 0.9rem !important;
    gap: 0.55rem !important;
    justify-content: center !important;
  }

  [data-page="home"] .hero-notes span,
  .hero--interior .hero-notes span,
  .hero--support .hero-notes span {
    text-align: center !important;
  }

  [data-page="home"] .hero-panel {
    margin-top: 0.05rem;
    padding: 1rem !important;
    text-align: center !important;
    margin-inline: auto !important;
  }

  [data-page="home"] .hero-panel-grid {
    gap: 0.7rem;
    margin-top: 0.9rem;
  }

  [data-page="home"] .hero-panel-grid article {
    padding: 0.9rem !important;
  }

  [data-page="programs"] .hero-copy h1 {
    max-width: 12.5ch !important;
  }

  [data-page="programs"] .section-heading--center h2 {
    font-size: clamp(1.8rem, 7.4vw, 2.1rem) !important;
    max-width: none !important;
    width: 100%;
  }

  [data-page="programs"] .section-heading--center .section-intro {
    max-width: 30ch !important;
  }

  .hero--interior .hero-copy h1,
  .hero--support .hero-copy h1 {
    font-size: clamp(2.15rem, 9.4vw, 2.7rem) !important;
    max-width: 13ch !important;
    line-height: 1.04 !important;
  }

  .hero--interior .hero-lead,
  .hero--support .hero-lead {
    max-width: 34ch !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .section-heading--center h2 {
    font-size: clamp(2rem, 8.4vw, 2.55rem) !important;
    max-width: 18ch !important;
    line-height: 1.08 !important;
  }

  .section-heading--center .section-intro {
    max-width: 34ch !important;
  }

  .section-heading--center.text-width-wide {
    width: 100% !important;
  }

  [data-page="ai-center"] .feature-split .content-stack h2,
  [data-page="partners"] .feature-split h2,
  [data-page="about"] .feature-split h2 {
    font-size: clamp(2rem, 8.8vw, 2.45rem) !important;
    max-width: none !important;
    text-align: center !important;
    margin-inline: auto !important;
  }

  [data-page="ai-center"] .feature-split .section-label,
  [data-page="partners"] .feature-split .section-label,
  [data-page="about"] .feature-split .section-label,
  .editorial-copy .section-label,
  .editorial-copy h3,
  .editorial-copy .section-intro {
    text-align: center !important;
    margin-inline: auto !important;
  }

  [data-page="ai-center"] .feature-split .section-label,
  [data-page="partners"] .feature-split .section-label,
  [data-page="about"] .feature-split .section-label,
  .editorial-copy .section-label {
    padding-left: 0 !important;
  }

  [data-page="ai-center"] .feature-split .section-label::before,
  [data-page="partners"] .feature-split .section-label::before,
  [data-page="about"] .feature-split .section-label::before,
  .editorial-copy .section-label::before {
    display: none !important;
  }

  [data-page="ai-center"] .feature-split .section-intro,
  [data-page="partners"] .feature-split .section-intro,
  [data-page="about"] .feature-split .section-intro {
    max-width: 34ch !important;
    text-align: center !important;
    margin-inline: auto !important;
  }

  .editorial-copy {
    align-items: center !important;
  }

  [data-page="ai-center"] .feature-callout,
  [data-page="ai-center"] .media-caption-card,
  [data-page="partners"] .feature-callout,
  [data-page="partners"] .media-caption-card,
  [data-page="about"] .feature-callout,
  [data-page="about"] .media-caption-card {
    padding: 1.25rem !important;
    border-radius: 18px !important;
  }

  .editorial-copy h3,
  .support-copy h3,
  .timeline-heading h3 {
    font-size: clamp(1.75rem, 8vw, 2.1rem) !important;
  }
}

@media (max-width: 390px) {
  [data-page="home"] .hero--landing {
    padding-top: calc(var(--header-height) + 0.95rem) !important;
  }

  [data-page="home"] .hero-copy h1 {
    font-size: clamp(2rem, 8.7vw, 2.35rem) !important;
    max-width: 12.4ch !important;
  }

  [data-page="programs"] .section-heading--center h2 {
    font-size: clamp(1.72rem, 7vw, 1.95rem) !important;
  }
}

/* Bulletproof fix to widen and center ALL hero headings on mobile */
@media (max-width: 768px) {
  /* Adding 'body' bumps the priority so it beats the old 8.5ch rules */
  body .hero h1,
  body .hero-copy h1 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important; /* Kills the narrow character limit entirely */
    width: 90% !important;      /* Lets it breathe slightly off the screen edges */
  }
  
  body .hero-lead {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 95% !important; 
  }
  
  /* Ensures the buttons and labels center nicely under the text */
  body .hero-copy {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  
  body .button-row {
    justify-content: center !important;
  }
}

/* Bulletproof fix to widen and center all section H2s and content stacks on mobile */
@media (max-width: 768px) {
  /* Center the container */
  body .content-stack,
  body .section-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Widen and center the H2 */
  body .content-stack h2,
  body .section-heading h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important; /* Kills the 11ch/14ch limits */
    width: 95% !important;      /* Gives it a nice breathing margin */
  }

  /* Center the intro paragraph */
  body .content-stack .section-intro,
  body .section-heading .section-intro {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 95% !important;
  }

  /* Center the orange kicker labels */
  body .content-stack .section-label,
  body .section-heading .section-label {
    padding-left: 0 !important; /* Removes the space meant for the side-line */
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hide the small decorative line next to the label since it's centered now */
  body .content-stack .section-label::before,
  body .section-heading .section-label::before {
    display: none !important; 
  }
}

/* Un-squeeze the Impact Cards on the Partners Page */
[data-page="partners"] .impact-band {
    display: flex !important;
    flex-direction: column !important; /* Stacks the heading on top, cards below */
    gap: 3.5rem !important; /* Adds nice breathing room between text and cards */
}

/* Center the heading block for a premium, balanced look */
[data-page="partners"] .impact-band .content-stack {
    text-align: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    max-width: 800px !important;
}

[data-page="partners"] .impact-band .content-stack h2 {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 25ch !important; /* Allows the headline to spread nicely across 2 lines */
}

/* Clean up the little orange line on the centered label */
[data-page="partners"] .impact-band .section-label {
    padding-left: 0 !important;
}

[data-page="partners"] .impact-band .section-label::before {
    display: none !important;
}

/* Let the 3 cards stretch across the entire width of the page */
[data-page="partners"] .impact-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.5rem !important;
    width: 100% !important;
}

/* Give the text inside the cards more breathing room */
[data-page="partners"] .impact-card {
    padding: 2.5rem 2rem !important; 
    border-radius: 20px !important;
}

/* Fix the squeezed Impact Cards on mobile for the Partners page */
@media (max-width: 860px) {
    [data-page="partners"] .impact-grid {
        grid-template-columns: 1fr !important; /* Forces the cards to stack vertically */
    }
    
    [data-page="partners"] .impact-card {
        padding: 1.75rem 1.5rem !important; /* Scales down the massive padding for smaller screens */
    }
}
/* Fix the ultra-narrow Impact heading on the Home page mobile view */
@media (max-width: 768px) {
  body[data-page="home"] #impact h2 {
    max-width: 100% !important; /* Overrides the 13ch limit */
    width: 95% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Premium Obsidian Glass Card for 'Access Grows' on the About Page */
[data-page="about"] .section--panel .media-caption-card--dark {
    background: rgba(23, 25, 28, 0.85) !important; /* Deep obsidian tint */
    backdrop-filter: blur(16px) !important; /* Smooth frosted glass effect */
    border: 1px solid rgba(230, 222, 212, 0.1) !important; /* Crisp, thin outer edge */
    border-left: 4px solid var(--color-accent) !important; /* Strong orange brand line */
    padding: 2.5rem !important;
    border-radius: 24px !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5) !important; /* Heavy shadow for floating depth */
    position: relative;
    z-index: 5;
}

/* Force the heading to be bright white */
[data-page="about"] .section--panel .media-caption-card--dark h3 {
    color: var(--color-white) !important;
    font-size: 1.35rem !important;
    margin: 0.5rem 0 0.75rem 0 !important;
    line-height: 1.25 !important;
}

/* Force the paragraph to be a soft, readable off-white */
[data-page="about"] .section--panel .media-caption-card--dark p {
    color: rgba(243, 241, 237, 0.8) !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
}

/* Keep the small kicker label bright orange */
[data-page="about"] .section--panel .media-caption-card--dark .section-label {
    color: var(--color-accent) !important;
}

/* Mobile scaling so it looks perfect on phones */
@media (max-width: 768px) {
    [data-page="about"] .section--panel .media-caption-card--dark {
        padding: 1.75rem 1.5rem !important; /* Tighter padding for small screens */
        border-radius: 18px !important;
        margin-top: 1.5rem !important; /* Creates a clean gap under the image */
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4) !important;
    }
    
    [data-page="about"] .section--panel .media-caption-card--dark h3 {
        font-size: 1.25rem !important;
    }
}

/* Restore the Interactive Ecosystem Roadmap on Mobile */
@media (max-width: 768px) {
    /* 1. Un-stack the container so the image can hold the dots again */
    body #ecosystem-discovery .discovery-canvas {
        display: block !important;
        position: relative !important;
        overflow: visible !important;
    }

    /* 2. Bring back the pulsing dots */
    body #ecosystem-discovery .hotspot {
        position: absolute !important;
        transform: translate(-50%, -50%) !important;
    }
    
    body #ecosystem-discovery .hotspot-trigger {
        display: block !important; /* Un-hides the dots */
    }

    /* 3. Turn the text blocks back into floating tooltips, scaled for phones */
    body #ecosystem-discovery .hotspot-content {
        position: absolute !important;
        width: 240px !important; /* Scaled down heavily for mobile width */
        padding: 1rem !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: 50 !important;
    }

    /* 4. Allow tapping a dot to reveal the tooltip */
    body #ecosystem-discovery .hotspot:hover .hotspot-content,
    body #ecosystem-discovery .hotspot-trigger:focus-visible + .hotspot-content {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* 5. Tighten the pop-up positions so they don't break off the screen */
    body #ecosystem-discovery .tooltip-right {
        left: 20px !important; 
        top: 50% !important; 
        transform: translateY(-50%) !important;
    }
    
    body #ecosystem-discovery .tooltip-left {
        right: 20px !important; 
        left: auto !important; 
        top: 50% !important; 
        transform: translateY(-50%) !important;
    }
    
    body #ecosystem-discovery .tooltip-center {
        bottom: 25px !important; 
        left: 50% !important; 
        transform: translateX(-50%) !important;
    }
    
    /* 6. Adjust text sizing so it fits comfortably in the smaller mobile box */
    body #ecosystem-discovery .hotspot-content h3 {
        font-size: 1.05rem !important;
        margin-bottom: 0.4rem !important;
    }
    
    body #ecosystem-discovery .hotspot-content p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
}

/* Elevate the active hotspot so its tooltip covers all other circles */
body #ecosystem-discovery .hotspot:hover,
body #ecosystem-discovery .hotspot:focus-within {
    z-index: 999 !important; /* Forces the active group to the very front */
}

/* Ensure mobile taps reliably open the tooltip */
body #ecosystem-discovery .hotspot:focus-within .hotspot-content {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Center the 'Next Step' CTA band and heading on mobile */
@media (max-width: 768px) {
    body .pathway-cta-band {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 2.5rem 1.5rem !important; /* Gives the whole card more breathing room */
    }

    body .pathway-cta-copy h2 {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 20ch !important; /* Widens it so it doesn't stack too tall */
        line-height: 1.1 !important;
    }

    /* Center the 'Next Step' label and hide the side-line */
    body .pathway-cta-copy .section-label {
        padding-left: 0 !important;
        margin-inline: auto !important;
    }

    body .pathway-cta-copy .section-label::before {
        display: none !important;
    }

    /* Center the buttons below the text */
    body .pathway-cta-actions {
        width: 100% !important;
        justify-content: center !important;
        margin-top: 1.5rem !important;
    }
}

/* Final polish for the Home Page H1 to make it wide and bold */
@media (max-width: 480px) {
  body[data-page="home"] .hero h1 {
    max-width: 100% !important; /* Overrides the character limit entirely */
    width: 92% !important;      /* Centers it with a nice breathing margin */
    font-size: clamp(2.4rem, 10vw, 2.8rem) !important; /* Bumps the size for impact */
    line-height: 1.05 !important;
    margin-bottom: 1.5rem !important;
  }

  body[data-page="home"] .hero-lead {
    max-width: 90% !important;
    margin-inline: auto !important;
    font-size: 0.95rem !important; /* Slightly smaller to let the heading pop */
  }
}


/* 1. Force the columns to align and stretch */
[data-page="ai-center"] .feature-split,
[data-page="partners"] .feature-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem !important;
    align-items: stretch !important;
}

/* 2. Turn the columns into bulletproof flexboxes */
[data-page="ai-center"] .feature-split .content-stack,
[data-page="ai-center"] .feature-split .media-column,
[data-page="partners"] .feature-split .content-stack,
[data-page="partners"] .feature-split .media-column {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 100% !important; /* Fixes grid stretch bugs in Safari/Webkit */
}

/* 3. Keep the image from stretching awkwardly */
[data-page="ai-center"] .feature-split .image-frame,
[data-page="partners"] .feature-split .image-frame {
    border: none !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
    border-radius: var(--radius-lg);
}

/* 4. UNIFIED FEATURE CARDS: Lock Size & Bottom Alignment */
[data-page="ai-center"] .feature-callout,
[data-page="ai-center"] .media-caption-card,
[data-page="partners"] .feature-callout,
[data-page="partners"] .media-caption-card {
    background: var(--color-sand) !important;
    border: none !important;
    border-left: 4px solid var(--color-accent) !important;
    padding: 2.5rem !important;
    border-radius: var(--radius-md) !important;
    
    /* Sizing and Layout */
    height: 180px !important; /* Reduced from 280px to tighten the box */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    box-shadow: none !important;
    
    /* THE ALIGNMENT FIX */
    margin-top: auto !important; 
    margin-bottom: 0 !important; 
}

/* 5. Mobile Responsiveness Safety Net */
@media (max-width: 1024px) {
    [data-page="ai-center"] .feature-callout,
    [data-page="ai-center"] .media-caption-card,
    [data-page="partners"] .feature-callout,
    [data-page="partners"] .media-caption-card {
        height: auto !important; 
        min-height: 220px;
        margin-top: 2rem !important; 
    }
}

/* TIMELINE STEPS: Improve Heading Separation and Visual Hierarchy */
[data-page="ai-center"] .timeline-step h4 {
    font-size: 1.25rem !important; /* Bumps up the size */
    font-weight: 800 !important; /* Makes it noticeably bolder */
    margin-top: 1.2rem !important; /* Adds breathing room from the Step pill */
    margin-bottom: 0.8rem !important; /* Forces a clear gap above the paragraph */
    color: var(--color-white) !important; /* Ensures it is the brightest element */
    line-height: 1.2 !important;
}

[data-page="ai-center"] .timeline-step p {
    color: rgba(243, 241, 237, 0.75) !important; /* Softens paragraph text to create contrast */
    font-size: 0.95rem !important; /* Slightly scales down the paragraph */
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}