/* =========================================================================
       1. CORE BRAND DESIGN SYSTEM & GLOBAL CONSTANTS
       ========================================================================= */
    :root {
      --soft-bg: #C5C7BC;
      --deep-green: #0A400C;
      --golden-accent: #E9A319;
      --white: #FFFFFF;
      --charcoal: #1C231D;
      
      --font-family: 'Mulish', sans-serif;
      --transition-editorial: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
      --transition-fast: all 0.3s ease;
      --spacing-magazine: 160px;
    }

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

    html {
      scroll-behavior: smooth;
    }

    body {
      background-color: var(--white);
      color: var(--charcoal);
      font-family: var(--font-family);
      font-weight: 400;
      line-height: 1.8;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* Editorial Type System Scale */
    h1, h2, h3, h4 {
      color: var(--deep-green);
      font-weight: 900;
      line-height: 1.15;
      letter-spacing: -0.02em;
    }

    p {
      font-weight: 300;
      font-size: 1.1rem;
      color: rgba(28, 35, 29, 0.85);
    }

    .editorial-label {
      font-size: 0.85rem;
      font-weight: 800;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--golden-accent);
      margin-bottom: 20px;
      display: block;
    }

    section {
      position: relative;
      width: 100%;
      padding: var(--spacing-magazine) 8%;
    }

    /* Multipage Content Presentation Router Layout */
    .magazine-view-spread {
      display: none;
      width: 100%;
    }
    .magazine-view-spread.active-spread-layer {
      display: block;
    }

    /* Scroll Triggered Intersection Animations */
    .reveal-item {
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .reveal-item.manifested {
      opacity: 1;
      transform: translateY(0);
    }

    /* =========================================================================
       2. TRANSFORMING STICKY STAGED HEADER & HAMBURGER MODULE
       ========================================================================= */
    .premium-header {
      position: fixed;
      height: 120px;
      top: 0; left: 0; width: 100%;
      padding: 30px 8%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 2000;
      transition: var(--transition-editorial);
    }

    /* Scrolled Sticky Header Alterations */
    .premium-header.header-scrolled {
      background-color: var(--white);
      padding: 18px 8%;
      box-shadow: 0 15px 40px rgba(10, 64, 12, 0.06);
    }

.brand-logo-txt {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.brand-logo-txt img {
  display: block;
  margin-top: 2rem;
  height: 250px; /* adjust as needed */
  width: auto;
  object-fit: contain;
}    .premium-header.header-scrolled .brand-logo-txt {
      color: var(--deep-green);
    }

    .nav-links-manifest {
      display: flex;
      margin-top: -1rem;
      align-items: center;
      gap: 35px;
      list-style: none;
    }

    .nav-anchor {
      font-size: 1rem;
      margin-top: -1rem;

      font-weight: 700;
      color: var(--white);
      text-decoration: none;
      cursor: pointer;
      transition: var(--transition-fast);
    }
    .premium-header.header-scrolled .nav-anchor {
      color: var(--deep-green);
    }
    .nav-anchor:hover, .premium-header.header-scrolled .nav-anchor:hover {
      color: var(--golden-accent);
    }

    .right-action-cluster {
      display: flex;
      align-items: center;
      gap: 30px;
    }

    .enroll-pill-button {
      background-color: var(--golden-accent);
      color: var(--deep-green);
            margin-top: -1rem;

      font-weight: 800;
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 14px 32px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      transition: var(--transition-editorial);
    }
    .enroll-pill-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(233, 163, 25, 0.3);
    }

    /* Responsible Hamburger Control Rig */
    .hamburger-trigger-icon {
      display: none;
            margin-top: -1rem;

      flex-direction: column;
      gap: 6px;
      background: none;
      border: none;
      cursor: pointer;
      z-index: 3000;
    }
    .hamburger-trigger-icon span {
      display: block;
      width: 28px;
      height: 3px;
      background-color: var(--white);
      border-radius: 2px;
      transition: var(--transition-fast);
    }
    .premium-header.header-scrolled .hamburger-trigger-icon span {
      background-color: var(--deep-green);
    }

    /* Mobile Expandable Overlay Box */
    @media (max-width: 1024px) {
      .hamburger-trigger-icon { display: flex; }
      .nav-links-manifest {
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        background-color: var(--deep-green);
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        transform: translateY(-100%);
        transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 2500;
      }
      .nav-links-manifest.expanded-navigation {
        transform: translateY(0);
      }
      .nav-links-manifest .nav-anchor {
        font-size: 1.5rem;
        color: var(--white);
      }
      .right-action-cluster .nav-anchor { display: none; }
    }

    /* =========================================================================
       3. SECTION 1: ASYMMETRICAL THREE-COLUMN EDITORIAL HERO
       ========================================================================= */
    .magazine-hero-backdrop {
      height: 120vh;
      padding: 0;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
    }

    .hero-img-element-layer {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background-image: url('https://i.pinimg.com/736x/68/16/e8/6816e8acc1428b1f70e327bfa0d8e6ee.jpg');
      background-size: cover;
      background-position: center;
      z-index: 1;
    }

    .hero-warm-tint-overlay {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: linear-gradient(135deg, rgba(10, 64, 12, 0.85) 0%, rgba(28, 35, 29, 0.7) 100%);
      z-index: 2;
    }

    .hero-three-column-grid {
      position: relative;
      z-index: 3;
      width: 100%;
      padding: 0 8%;
      display: grid;
      grid-template-columns: 0.8fr 2fr 1.2fr;
      gap: 40px;
      align-items: center;
    }

    .hero-left-vertical-lbl {
      writing-mode: vertical-rl;
      transform: rotate(180deg);
      font-size: 0.9rem;
      font-weight: 900;
      letter-spacing: 0.4em;
      color: var(--golden-accent);
      text-transform: uppercase;
      justify-self: start;
    }

    .hero-center-headline h1 {
      font-size: 5.5rem;
      color: var(--white);
      line-height: 1.05;
    }

    .hero-right-floating-quote-card {
      background-color: var(--white);
      padding: 40px;
      box-shadow: 0 30px 60px rgba(0,0,0,0.15);
      border-left: 6px solid var(--golden-accent);
    }
    .hero-right-floating-quote-card p {
      font-style: italic;
      color: var(--deep-green);
      font-size: 1.15rem;
      font-weight: 500;
      line-height: 1.6;
      margin-bottom: 15px;
    }
    .hero-right-floating-quote-card span {
      font-size: 0.85rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--charcoal);
    }

    .hero-bottom-golden-line {
      position: absolute;
      bottom: 0; left: 8%; width: 84%;
      height: 8px;
      background-color: var(--golden-accent);
      z-index: 4;
    }

    /* =========================================================================
       4. SECTION 2: THE HOME LEARNING STORY OVERLAPPING SCHEME
       ========================================================================= */
    .story-overlapping-matrix {
      display: flex;
      align-items: center;
      gap: 8%;
    }

    .story-left-frame {
      width: 45%;
      position: relative;
    }
    
    /* Intentionally extending out bounds */
    .story-outbound-img {
      width: 110%;
      height: 680px;
      object-fit: cover;
      box-shadow: 0 40px 80px rgba(10, 64, 12, 0.1);
    }

    .story-right-text-block {
      width: 50%;
    }

    .story-right-text-block h2 {
      font-size: 3.5rem;
      margin-bottom: 30px;
    }
    .story-right-text-block p {
      margin-bottom: 25px;
    }

    /* Floating Stats Block Overlay Config */
    .floating-stats-flex-row {
      display: flex;
      gap: 20px;
      margin-top: 60px;
      position: relative;
      z-index: 10;
    }

    .stat-overlay-card {
      background-color: var(--deep-green);
      color: var(--white);
      padding: 30px 25px;
      flex: 1;
      box-shadow: 0 20px 45px rgba(10, 64, 12, 0.15);
      border-bottom: 4px solid var(--golden-accent);
    }
    .stat-overlay-card h3 {
      color: var(--golden-accent);
      font-size: 2.2rem;
      margin-bottom: 5px;
    }
    .stat-overlay-card p {
      color: var(--white);
      font-size: 0.85rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      opacity: 0.9;
    }

    /* =========================================================================
       5. SECTION 3: PROGRAM EXPLORER OVERSIZED GRID
       ========================================================================= */
    .program-explorer-canvas {
      background-color: var(--soft-bg);
    }

    .program-grid-matrix {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 50px;
      margin-top: 60px;
    }

    .oversized-program-card {
      background-color: var(--white);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 15px 35px rgba(0,0,0,0.04);
      transition: var(--transition-editorial);
    }

    .card-img-wrapper {
      width: 100%;
      height: 300px;
      overflow: hidden;
    }
    .card-img-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: var(--transition-editorial);
    }

    .card-interior-content {
      padding: 40px;
      transition: var(--transition-editorial);
      flex-grow: 1;
    }
    .card-interior-content h3 {
      font-size: 1.8rem;
      margin-bottom: 15px;
      transition: var(--transition-editorial);
    }

    /* Dynamic Target Hover Implementations */
    .oversized-program-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 30px 60px rgba(10, 64, 12, 0.15);
    }
    .oversized-program-card:hover .card-img-wrapper img {
      transform: scale(1.06);
    }
    .oversized-program-card:hover .card-interior-content {
      background-color: var(--golden-accent);
    }
    .oversized-program-card:hover .card-interior-content h3 {
      color: var(--deep-green);
    }

    /* =========================================================================
       6. SECTION 4: DEEP GREEN PROGRESS TIMELINE
       ========================================================================= */
    .timeline-split-section {
      background-color: var(--deep-green);
      color: var(--white);
      display: flex;
      gap: 10%;
    }

    .timeline-left-sticky {
      width: 40%;
    }
    .timeline-left-sticky h2 {
      color: var(--white);
      font-size: 4rem;
    }

    .timeline-right-vertical-track {
      width: 50%;
      position: relative;
      padding-left: 60px;
    }
    /* Vector Center Line Component */
    .timeline-right-vertical-track::before {
      content: '';
      position: absolute;
      top: 0; left: 20px;
      width: 2px; height: 100%;
      background-color: var(--golden-accent);
    }

    .timeline-story-node {
      position: relative;
      margin-bottom: 60px;
    }
    .timeline-story-node::before {
      content: '';
      position: absolute;
      left: -49px; top: 8px;
      width: 18px; height: 18px;
      border-radius: 50%;
      background-color: var(--golden-accent);
      border: 4px solid var(--deep-green);
    }

    .timeline-node-index {
      font-size: 2.2rem;
      font-weight: 900;
      color: var(--golden-accent);
      line-height: 1;
      margin-bottom: 5px;
    }
    .timeline-story-node h3 {
      color: var(--white);
      font-size: 1.5rem;
      margin-bottom: 15px;
    }
    .timeline-story-node p {
      color: rgba(255, 255, 255, 0.8);
    }

    /* =========================================================================
       7. SECTION 5: PARALLAX FIXED SCROLL LEARNING CANVAS
       ========================================================================= */
    .parallax-fixed-viewport {
      height: 80vh;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url('https://i.pinimg.com/736x/ff/9a/1f/ff9a1f4f5cb464b3eb9d1dea9cbc6455.jpg');
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
    }

    .parallax-floating-center-box {
      background-color: var(--white);
      padding: 60px;
      max-width: 800px;
      text-align: center;
      box-shadow: 0 40px 90px rgba(0,0,0,0.15);
      border-top: 6px solid var(--deep-green);
    }
    .parallax-floating-center-box h2 {
      font-size: 2.8rem;
      margin-bottom: 20px;
    }

    /* =========================================================================
       8. SECTION 6: TUTOR SPOTLIGHTS ELEVATED MATRIX
       ========================================================================= */
    .tutor-spotlight-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 60px 40px;
      margin-top: 60px;
    }

    .elevated-tutor-card {
      background-color: var(--white);
      border: 1px solid rgba(10, 64, 12, 0.08);
      padding: 30px;
      display: flex;
      gap: 30px;
      transition: var(--transition-editorial);
    }
    .elevated-tutor-card img {
      width: 180px;
      height: 240px;
      object-fit: cover;
      border-radius: 4px;
    }
    .tutor-info-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .tutor-info-box h3 {
      font-size: 1.6rem;
      margin-bottom: 5px;
    }
    .tutor-subject-lbl {
      font-size: 0.85rem;
      font-weight: 800;
      text-transform: uppercase;
      color: var(--golden-accent);
      margin-bottom: 15px;
      letter-spacing: 0.05em;
    }
    .elevated-tutor-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 25px 50px rgba(10, 64, 12, 0.08);
      border-color: var(--golden-accent);
    }

    /* =========================================================================
       9. SECTION 7: LEARNING JOURNAL OVERLAPPING MAGAZINE ARTICLES
       ========================================================================= */
    .magazine-journal-canvas {
      background-color: var(--soft-bg);
    }

    .magazine-layout-stack {
      display: flex;
      flex-direction: column;
      gap: 120px;
      margin-top: 60px;
    }

    .magazine-article-spread {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 60px;
    }
    /* Alternating Pattern Shifts */
    .magazine-article-spread:nth-child(even) {
      flex-direction: row-reverse;
    }

    .article-img-frame-layered {
      width: 45%;
      position: relative;
    }
    .article-img-frame-layered img {
      width: 100%;
      height: 480px;
      object-fit: cover;
      box-shadow: 0 30px 60px rgba(0,0,0,0.1);
    }
    
    .article-text-card-overlay {
      width: 50%;
      background-color: var(--white);
      padding: 50px;
      box-shadow: 0 20px 45px rgba(0,0,0,0.05);
      position: relative;
      /* Pulling across image */
      margin-left: -5%;
      z-index: 5;
    }
    .magazine-article-spread:nth-child(even) .article-text-card-overlay {
      margin-left: 0;
      margin-right: -5%;
    }

    .article-text-card-overlay h3 {
      font-size: 2rem;
      margin-bottom: 20px;
    }

    /* =========================================================================
       10. SECTION 8: SUCCESS STORIES TESTIMONIAL MATRIX
       ========================================================================= */
    .testimonials-staggered-columns {
      display: flex;
      gap: 30px;
      margin-top: 60px;
    }

    .staggered-testimonial-node {
      flex: 1;
      background-color: var(--white);
      padding: 40px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.03);
      border-top: 4px solid var(--soft-bg);
    }
    /* Height Offset Stagger Configurations */
    .staggered-testimonial-node:nth-child(2) { margin-top: 40px; }
    .staggered-testimonial-node:nth-child(3) { margin-top: 20px; }
    .staggered-testimonial-node:nth-child(4) { margin-top: 60px; }

    .testimonial-quote-txt {
      font-style: italic;
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 30px;
      color: var(--charcoal);
    }

    .parent-meta-profile {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    .parent-meta-profile img {
      width: 55px;
      height: 55px;
      border-radius: 50%;
      object-fit: cover;
    }
    .parent-name {
      font-weight: 800;
      font-size: 0.95rem;
      color: var(--deep-green);
    }
    .student-achievement-lbl {
      font-size: 0.8rem;
      color: var(--golden-accent);
      font-weight: 700;
      text-transform: uppercase;
    }

    /* =========================================================================
       11. SECTION 9: FEATURED RESOURCE GOLDEN BORDERED GRID
       ========================================================================= */
    .resources-dark-section {
      background-color: var(--deep-green);
      color: var(--white);
    }
    .resources-dark-section h2 {
      color: var(--white);
      font-size: 3rem;
      margin-bottom: 60px;
    }

    .resources-wireframe-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

    .resource-wire-card {
      border: 1px solid var(--golden-accent);
      padding: 40px;
      background-color: transparent;
      transition: var(--transition-editorial);
    }
    .resource-wire-card h3 {
      color: var(--white);
      font-size: 1.5rem;
      margin-bottom: 15px;
    }
    .resource-wire-card p {
      color: rgba(255, 255, 255, 0.8);
      font-size: 1rem;
    }
    .resource-wire-card:hover {
      background-color: rgba(233, 163, 25, 0.1);
      transform: scale(1.02);
    }

    /* =========================================================================
       12. SECTION 10: GOLDEN ENROLLMENT INTERFACE TIMELINE FLOW
       ========================================================================= */
    .enrollment-flow-section {
      background-color: var(--golden-accent);
      color: var(--deep-green);
      text-align: center;
    }
    .enrollment-flow-section h2 {
      font-size: 3.5rem;
      color: var(--deep-green);
      margin-bottom: 70px;
    }

    .flow-connected-row {
      display: flex;
      justify-content: space-between;
      position: relative;
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    /* Linked Vector Horizontal Line rule */
    .flow-connected-row::before {
      content: '';
      position: absolute;
      top: 40px; left: 10%; width: 80%;
      height: 2px;
      background-color: rgba(10, 64, 12, 0.2);
      z-index: 1;
    }

    .flow-step-node-card {
      position: relative;
      z-index: 2;
      flex: 1;
      background-color: var(--white);
      padding: 40px 25px;
      box-shadow: 0 20px 45px rgba(10, 64, 12, 0.08);
    }

    .flow-circle-indicator {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--deep-green);
      color: var(--white);
      font-weight: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 20px auto;
    }
    .flow-step-node-card h3 {
      font-size: 1.3rem;
      margin-bottom: 10px;
    }

    /* =========================================================================
       13. SECTION 11: NEWSLETTER DISTRIBUTION MANAGEMENT ENGINE (LOCALSTORAGE)
       ========================================================================= */
    .newsletter-split-box {
      display: flex;
      gap: 8%;
      align-items: center;
    }

    .news-left-pane {
      width: 45%;
    }
    .news-left-pane h2 {
      font-size: 3.2rem;
      margin-bottom: 25px;
    }

    .benefits-bullet-list {
      list-style: none;
      margin-top: 30px;
    }
    .benefits-bullet-list li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 15px;
      font-weight: 500;
      font-size: 1.1rem;
    }
    .benefits-bullet-list li::before {
      content: '✓';
      position: absolute;
      left: 0; top: 0;
      color: var(--golden-accent);
      font-weight: 900;
    }

    .news-right-forms-container {
      width: 50%;
      background-color: var(--soft-bg);
      padding: 50px;
      box-shadow: 0 30px 60px rgba(0,0,0,0.05);
    }

    .studio-form-wrapper {
      margin-bottom: 40px;
    }
    .studio-form-wrapper:last-child { margin-bottom: 0; border-top: 1px solid rgba(10, 64, 12, 0.15); padding-top: 35px; }

    .studio-form-wrapper h4 {
      font-size: 1.25rem;
      margin-bottom: 20px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .magazine-input-field {
      width: 100%;
      padding: 15px 20px;
      border: 1px solid rgba(10, 64, 12, 0.15);
      background-color: var(--white);
      font-family: var(--font-family);
      font-size: 1rem;
      margin-bottom: 20px;
      outline: none;
    }

    .action-submit-btn-green {
      width: 100%;
      background-color: var(--deep-green);
      color: var(--white);
      border: none;
      padding: 16px;
      font-family: var(--font-family);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
      transition: var(--transition-fast);
    }
    .action-submit-btn-green:hover {
      background-color: var(--charcoal);
    }

    .action-submit-btn-white {
      width: 100%;
      background-color: var(--white);
      color: var(--deep-green);
      border: 1px solid rgba(10, 64, 12, 0.15);
      padding: 16px;
      font-family: var(--font-family);
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      cursor: pointer;
      transition: var(--transition-fast);
    }
    .action-submit-btn-white:hover {
      background-color: var(--deep-green);
      color: var(--white);
    }

    /* =========================================================================
       14. SECTION 12: FINAL PARALLAX STATEMENT SPREAD
       ========================================================================= */
    .final-parallax-viewport {
      height: 100vh;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url('https://i.pinimg.com/736x/fe/8a/e2/fe8ae2e01d79a0607d8402a786d58f9b.jpg');
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .final-parallax-viewport::before {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background-color: rgba(10, 64, 12, 0.75);
    }

    .final-parallax-content-box {
      position: relative;
      z-index: 5;
      text-align: center;
      color: var(--white);
      padding: 0 8%;
    }
    .final-parallax-content-box h2 {
      color: var(--white);
      font-size: 5rem;
      line-height: 1.1;
      margin-bottom: 20px;
    }
    .final-parallax-content-box p {
      color: var(--golden-accent);
      font-size: 1.4rem;
      font-style: italic;
    }

    /* =========================================================================
       15. MULTIPAGE LAYOUT EXTENSIONS (INTERNAL ARCHIVE SPREADS)
       ========================================================================= */
    .internal-jumbo-hero {
      background-color: var(--soft-bg);
      padding: 180px 8% 80px 8%;
      text-align: center;
    }
    .internal-jumbo-hero h1 {
      font-size: 4.5rem;
      margin-bottom: 15px;
    }

    .editorial-narrow-reader-frame {
      max-width: 900px;
      margin: 0 auto;
      padding: 80px 0;
    }
    .editorial-narrow-reader-frame h2 {
      font-size: 2.4rem;
      margin: 50px 0 20px 0;
    }
    .editorial-narrow-reader-frame p {
      font-size: 1.2rem;
      line-height: 1.9;
      margin-bottom: 30px;
    }

    .programs-detailed-showcase {
      display: flex;
      flex-direction: column;
      gap: 80px;
      margin-top: 50px;
    }
    .program-showcase-row {
      display: flex;
      gap: 50px;
      align-items: center;
      background-color: var(--white);
      padding: 40px;
      box-shadow: 0 15px 40px rgba(0,0,0,0.02);
    }
    .program-showcase-row img {
      width: 300px;
      height: 220px;
      object-fit: cover;
    }

    /* =========================================================================
       16. FOOTER CORE LAYOUT MATRIX
       ========================================================================= */
    .magazine-footer {
      background-color: var(--deep-green);
      color: var(--white);
      padding: 100px 8% 50px 8%;
    }

    .footer-logo-row {
      font-size: 2.2rem;
      font-weight: 900;
      color: var(--white);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 40px;
      margin-bottom: 60px;
    }

    .footer-columns-matrix {
      display: flex;
      justify-content: space-between;
      gap: 40px;
      margin-bottom: 60px;
    }

    .footer-column-block h4 {
      color: var(--golden-accent);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 25px;
    }
    .footer-column-block ul {
      list-style: none;
    }
    .footer-column-block ul li {
      margin-bottom: 15px;
    }
    .footer-column-block ul li a {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      cursor: pointer;
      transition: var(--transition-fast);
    }
    .footer-column-block ul li a:hover {
      color: var(--golden-accent);
      padding-left: 5px;
    }

    .footer-bottom-bar {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.6);
    }

    .footer-legal-links-cluster a {
      color: rgba(255, 255, 255, 0.6);
      text-decoration: none;
      margin-left: 25px;
      cursor: pointer;
      transition: var(--transition-fast);
    }
    .footer-legal-links-cluster a:hover {
      color: var(--golden-accent);
    }

    /* =========================================================================
       17. RESPONSIVE COMPOSITION MEDIA RETENTION QUERIES
       ========================================================================= */
    @media (max-width: 1200px) {
      .hero-center-headline h1 { font-size: 4rem; }
      .story-overlapping-matrix, .timeline-split-section, .elevated-tutor-card, .magazine-article-spread, .newsletter-split-box {
        flex-direction: column;
      }
      .story-left-frame, .story-right-text-block, .timeline-left-sticky, .timeline-right-vertical-track, .article-img-frame-layered, .article-text-card-overlay, .news-left-pane, .news-right-forms-container {
        width: 100%;
      }
      .story-outbound-img { width: 100%; height: 450px; }
      .article-text-card-overlay, .magazine-article-spread:nth-child(even) .article-text-card-overlay { margin-left: 0; margin-right: 0; margin-top: -40px; }
      .resources-wireframe-grid, .flow-connected-row, .testimonials-staggered-columns { grid-template-columns: 1fr; flex-direction: column; }
      .flow-connected-row::before { display: none; }
      .staggered-testimonial-node { margin-top: 0 !important; }
    }

    @media (max-width: 768px) {
      .hero-three-column-grid { grid-template-columns: 1fr; }
      .hero-left-vertical-lbl { display: none; }
      .hero-center-headline h1 { font-size: 2.8rem; }
      .program-grid-matrix { grid-template-columns: 1fr; }
      .footer-columns-matrix { flex-direction: column; gap: 40px; }
      .footer-bottom-bar { flex-direction: column; gap: 20px; text-align: center; }
      .footer-legal-links-cluster a { margin: 0 10px; }
      .program-showcase-row { flex-direction: column; }
      .program-showcase-row img { width: 100%; }
    }