/* =========================================================================
       1. CORE DESIGN BRAND SYSTEM & LAYOUT VARIABLES
       ========================================================================= */
    :root {
      --bg-cream-green: #D9F9DF;
      --primary-accent: #FF61F8;
      --secondary-accent: #FF9A86;
      --white: #FFFFFF;
      --dark-ink: #0A110C;
      --font-family: 'Arimo', sans-serif;
      --transition-editorial: all 0.9s cubic-bezier(0.16, 1, 0.3, 1);
      --transition-fast: all 0.3s ease;
      --luxury-spacing: 180px;
    }

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

    html {
      scroll-behavior: smooth;
      background-color: var(--bg-cream-green);
    }

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

    /* Luxury Editorial Typography Scale */
    h1, h2, h3, h4, h5, h6 {
      color: var(--dark-ink);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: -0.03em;
    }

    p {
      font-weight: 400;
      font-size: 1.15rem;
      color: rgba(10, 17, 12, 0.8);
      margin-bottom: 25px;
    }

    .editorial-meta-lbl {
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: var(--primary-accent);
      margin-bottom: 30px;
      display: block;
    }

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

    /* Multipage Content Presentation Engine Views */
    .journal-spread-layer {
      display: none;
      width: 100%;
    }
    .journal-spread-layer.active-editorial-spread {
      display: block;
    }

    /* Scroll Triggered Intersection Animations */
    .scroll-reveal {
      opacity: 0;
      transform: translateY(60px);
      transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .scroll-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Pull Quotes & Academic Embellishments */
    .pull-quote {
      font-size: 2.2rem;
      font-weight: 700;
      color: var(--primary-accent);
      line-height: 1.2;
      border-left: 4px solid var(--secondary-accent);
      padding-left: 30px;
      margin: 40px 0;
      letter-spacing: -0.02em;
    }

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

    .luxury-header.header-scrolled {
      background-color: rgba(255, 255, 255, 0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 20px 8%;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
    }

.brand-identity-txt {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.brand-identity-txt:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}

.brand-logo-img {
  height: 216px;          /* adjust for header balance */
  width: auto;
  object-fit: contain;
  display: block;
}

/* Optional: dark-on-scroll variant support */
.luxury-header.header-scrolled .brand-logo-img {
  height: 216px;
}    .center-editorial-links {
      display: flex;
      align-items: center;
      gap: 40px;
      list-style: none;
    }

    .editorial-link-anchor {
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--dark-ink);
      text-decoration: none;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      cursor: pointer;
      transition: var(--transition-fast);
    }
    .editorial-link-anchor:hover {
      color: var(--primary-accent);
    }

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

    .apply-pill-btn {
      background-color: var(--primary-accent);
      color: var(--white);
      font-weight: 700;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      padding: 16px 36px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      transition: var(--transition-editorial);
    }
    .apply-pill-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 15px 30px rgba(255, 97, 248, 0.3);
    }

    /* Responsible Hamburger Control Configuration */
    .hamburger-icon-btn {
      display: none;
      flex-direction: column;
      gap: 7px;
      background: none;
      border: none;
      cursor: pointer;
      z-index: 3000;
    }
    .hamburger-icon-btn span {
      display: block;
      width: 30px;
      height: 2px;
      background-color: var(--dark-ink);
      transition: var(--transition-fast);
    }

    @media (max-width: 1100px) {
      .hamburger-icon-btn { display: flex; }
      .center-editorial-links {
        position: fixed;
        top: 0; left: 0; width: 100vw; height: 100vh;
        background-color: var(--white);
        flex-direction: column;
        justify-content: center;
        gap: 45px;
        transform: translateX(100%);
        transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 2500;
      }
      .center-editorial-links.drawer-open {
        transform: translateX(0);
      }
      .center-editorial-links .editorial-link-anchor {
        font-size: 1.6rem;
      }
      .right-cta-cluster { display: none; }
    }

    /* =========================================================================
       3. SECTION 1: HERO EDITORIAL STORY REVEAL
       ========================================================================= */
    .editorial-hero-viewport {
      height: 140vh;
      background-color: var(--bg-cream-green);
      display: flex;
      align-items: center;
      padding: 0 8%;
      overflow: hidden;
    }

    .hero-composition-grid {
      display: grid;
      grid-template-columns: 1.20fr 1.60fr 1.20fr;
      gap: 60px;
      align-items: center;
      width: 100%;
    }

    .hero-outbound-frame {
      position: relative;
      margin-left: -15%;
      margin-top: -10%;
      z-index: 5;
    }
    .hero-outbound-frame img {
      width: 115%;
      height: 800px;
      object-fit: cover;
      box-shadow: 0 50px 100px rgba(0,0,0,0.08);
    }

    .hero-core-headline-box {
      text-align: center;
      z-index: 10;
    }
    .hero-core-headline-box h1 {
      font-size: 7rem;
      letter-spacing: -0.04em;
    }

    .hero-right-portrait-stack {
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: flex-start;
    }
    .hero-right-portrait-stack img {
      width: 100%;
      height: 480px;
      object-fit: cover;
      box-shadow: 0 40px 80px rgba(0,0,0,0.05);
    }
    .hero-embedded-quote {
      font-size: 1.1rem;
      font-style: italic;
      line-height: 1.6;
      color: rgba(10, 17, 12, 0.7);
    }

    /* =========================================================================
       4. SECTION 2: THE SCHOLAR MANIFESTO LAYOUT BLOCK
       ========================================================================= */
    .manifesto-overlap-canvas {
      background-color: var(--white);
      margin-top: -10vh;
      z-index: 20;
      position: relative;
    }

    .manifesto-columns-grid {
      display: grid;
      grid-template-columns: 1.2fr 2fr;
      gap: 80px;
      margin-top: 40px;
    }
    .manifesto-columns-grid h2 {
      font-size: 4.5rem;
    }

    .editorial-multi-column-text {
      column-count: 2;
      column-gap: 50px;
    }
    .editorial-multi-column-text p {
      font-size: 1.2rem;
      line-height: 1.85;
      margin-bottom: 30px;
      text-align: justify;
    }

    /* =========================================================================
       5. SECTION 3: LEARNING CHAPTERS ASYMMETRICAL TRACK
       ========================================================================= */
    .chapters-section-canvas {
      background-color: var(--bg-cream-green);
    }

    .chapters-magazine-stack {
      display: flex;
      flex-direction: column;
      gap: 140px;
      margin-top: 80px;
    }

    .chapter-spread-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 100px;
    }
    .chapter-spread-row:nth-child(even) {
      flex-direction: row-reverse;
    }

    .chapter-img-mask-wrapper {
      width: 50%;
      position: relative;
    }
    .chapter-img-mask-wrapper img {
      width: 100%;
      height: 580px;
      object-fit: cover;
      box-shadow: 0 35px 70px rgba(0, 0, 0, 0.04);
    }

    .chapter-editorial-text-card {
      width: 45%;
    }
    .chapter-editorial-text-card h3 {
      font-size: 3rem;
      margin-bottom: 25px;
    }

    /* =========================================================================
       6. SECTION 4: SCHOLAR GALLERY CHRONICLES
       ========================================================================= */
    .gallery-composition-layout {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 30px;
      margin-top: 60px;
    }

    .gallery-item-node {
      position: relative;
      overflow: hidden;
      background-color: var(--dark-ink);
    }
    .gallery-item-node img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .gallery-story-overlay-caption {
      position: absolute;
      bottom: 0; left: 0; width: 100%;
      padding: 40px;
      background: linear-gradient(to top, rgba(10, 17, 12, 0.95) 0%, rgba(10, 17, 12, 0) 100%);
      color: var(--white);
      transform: translateY(101%);
      transition: var(--transition-editorial);
    }
    .gallery-story-overlay-caption h4 {
      color: var(--white);
      font-size: 1.4rem;
      margin-bottom: 10px;
    }
    .gallery-story-overlay-caption p {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.95rem;
      margin-bottom: 0;
    }

    .gallery-item-node:hover img {
      transform: scale(1.05);
    }
    .gallery-item-node:hover .gallery-story-overlay-caption {
      transform: translateY(0);
    }

    /* Asymmetrical Multi-grid Placements */
    .node-large-portrait { grid-column: span 5; height: 700px; }
    .node-small-square-1 { grid-column: span 3; height: 335px; }
    .node-small-square-2 { grid-column: span 3; height: 335px; top: 365px; position: absolute; width: calc(100% - 0px); }
    .node-right-column-container { grid-column: span 3; position: relative; height: 700px; }
    .node-large-landscape { grid-column: span 4; height: 700px; }

    /* =========================================================================
       7. SECTION 5: PARALLAX FIXED KNOWLEDGE WALL
       ========================================================================= */
    .knowledge-parallax-viewport {
      height: 90vh;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url('https://i.pinimg.com/736x/e7/fe/ed/e7feed7f8a76c8cd96990398beca9a65.jpg');
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
    }

    .parallax-floating-statement-box {
      background-color: var(--white);
      padding: 80px 120px;
      text-align: center;
      box-shadow: 0 50px 100px rgba(0,0,0,0.12);
    }
    .parallax-floating-statement-box h2 {
      font-size: 5rem;
      letter-spacing: -0.04em;
    }


/* ==========================================================
   ACADEMICS PAGE — LUXURYSCHOLAR EDITORIAL SYSTEM
   ========================================================== */

.academics-hero-editorial{
  padding-top:240px;
  background:linear-gradient(
    180deg,
    var(--bg-cream-green) 0%,
    #f8fff9 100%
  );
}

.academics-hero-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:100px;
  align-items:center;
}

.hero-left-content h1{
  font-size:6.5rem;
  margin-bottom:35px;
}

.hero-left-content p{
  max-width:650px;
  font-size:1.25rem;
  line-height:2;
}

.hero-right-image{
  position:relative;
}

.hero-right-image::before{
  content:'';
  position:absolute;
  width:220px;
  height:220px;
  background:var(--primary-accent);
  opacity:.12;
  top:-40px;
  left:-40px;
  z-index:1;
}

.hero-right-image img{
  width:100%;
  height:850px;
  object-fit:cover;
  position:relative;
  z-index:2;
  box-shadow:0 60px 120px rgba(0,0,0,.08);
}

/* INTRO */

.editorial-introduction-spread{
  background:white;
}

.two-column-editorial{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:120px;
  align-items:start;
}

.two-column-editorial h2{
  font-size:4.5rem;
}

.two-column-editorial p{
  font-size:1.18rem;
  line-height:2;
}

/* DISCIPLINES */

.discipline-showcase-section{
  background:var(--bg-cream-green);
}

.center-title{
  text-align:center;
  font-size:4.5rem;
  margin-bottom:80px;
}

.discipline-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
}

.discipline-card{
  background:white;
  padding:50px;
  min-height:300px;
  transition:var(--transition-editorial);
  border-top:4px solid transparent;
}

.discipline-card:hover{
  transform:translateY(-12px);
  border-color:var(--primary-accent);
  box-shadow:0 30px 80px rgba(0,0,0,.05);
}

.discipline-card h3{
  font-size:2rem;
  margin-bottom:25px;
}

.discipline-card p{
  margin-bottom:0;
}

/* RESEARCH FEATURE */

.research-editorial-feature{
  background:white;
}

.research-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:100px;
  align-items:center;
}

.research-image img{
  width:100%;
  height:800px;
  object-fit:cover;
  box-shadow:0 50px 100px rgba(0,0,0,.08);
}

.research-content h2{
  font-size:4.5rem;
  margin-bottom:35px;
}

.research-content p{
  font-size:1.15rem;
  line-height:2;
}

/* PORTFOLIO */

.portfolio-magazine-layout{
  background:var(--secondary-accent);
  color:white;
}

.portfolio-magazine-layout h2{
  color:white;
  font-size:4rem;
  max-width:850px;
  margin-bottom:80px;
}

.portfolio-columns{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:50px;
}

.portfolio-columns div{
  border-left:2px solid rgba(255,255,255,.25);
  padding-left:25px;
}

.portfolio-columns h3{
  color:white;
  font-size:1.8rem;
  margin-bottom:20px;
}

.portfolio-columns p{
  color:rgba(255,255,255,.9);
  margin-bottom:0;
}

/* TIMELINE */

.academic-journey-timeline{
  background:white;
  text-align:center;
}

.academic-journey-timeline h2{
  font-size:4rem;
  margin-bottom:80px;
}

.timeline-row{
  display:flex;
  justify-content:space-between;
  gap:25px;
}

.timeline-card{
  flex:1;
  background:var(--bg-cream-green);
  padding:60px 30px;
  position:relative;
}

.timeline-card span{
  font-size:5rem;
  font-weight:700;
  color:rgba(255,97,248,.25);
  display:block;
  line-height:1;
  margin-bottom:20px;
}

.timeline-card h3{
  font-size:1.5rem;
}

/* METRICS */

.academic-metrics-banner{
  background:var(--dark-ink);
  color:white;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  text-align:center;
}

.metric-block h3{
  color:var(--primary-accent);
  font-size:5rem;
  line-height:1;
  margin-bottom:15px;
}

.metric-block p{
  color:rgba(255,255,255,.8);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:0;
}

/* FINAL PARALLAX */

.knowledge-banner-parallax{
  padding:0;
  height:90vh;
  background-image:url('https://i.pinimg.com/736x/26/09/11/2609117af4025670015cb8df6ab00ef6.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.knowledge-banner-parallax::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(10,17,12,.55);
}

.knowledge-overlay{
  position:relative;
  z-index:2;
  background:white;
  padding:100px;
  max-width:900px;
  text-align:center;
  box-shadow:0 50px 100px rgba(0,0,0,.15);
}

.knowledge-overlay h2{
  font-size:4.8rem;
}

/* RESPONSIVE */

@media(max-width:1200px){

  .academics-hero-grid,
  .research-grid,
  .two-column-editorial{
    grid-template-columns:1fr;
    gap:60px;
  }

  .discipline-grid{
    grid-template-columns:1fr;
  }

  .portfolio-columns{
    grid-template-columns:1fr;
  }

  .timeline-row{
    flex-direction:column;
  }

  .academic-metrics-banner{
    grid-template-columns:1fr;
  }

  .hero-left-content h1{
    font-size:4rem;
  }

  .research-content h2,
  .two-column-editorial h2,
  .knowledge-overlay h2,
  .center-title{
    font-size:3rem;
  }

  .hero-right-image img,
  .research-image img{
    height:500px;
  }

  .knowledge-overlay{
    padding:50px 30px;
  }
}

    /* =========================================================================
       8. SECTION 6: ACADEMIC PATHWAYS IN ALTERNATING DECORATIVE OVERSIZE
       ========================================================================= */
    .pathways-section-canvas {
      background-color: var(--secondary-accent);
      color: var(--white);
    }
    .pathways-section-canvas h2 {
      color: var(--white);
      font-size: 4rem;
      margin-bottom: 80px;
    }

    .pathways-alternating-stack {
      display: flex;
      flex-direction: column;
      gap: 50px;
    }

    .pathway-editorial-block {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      border-top: 1px solid rgba(255, 255, 255, 0.3);
      padding-top: 40px;
      padding-bottom: 40px;
    }

    .pathway-oversize-index {
      font-size: 4.5rem;
      font-weight: 700;
      color: rgba(255, 255, 255, 0.4);
      line-height: 1;
    }
    .pathway-core-content {
      width: 75%;
      display: flex;
      justify-content: space-between;
    }
    .pathway-core-content h3 {
      font-size: 2.2rem;
      color: var(--white);
      width: 40%;
    }
    .pathway-core-content p {
      color: rgba(255, 255, 255, 0.9);
      width: 50%;
      font-size: 1.15rem;
    }

    /* =========================================================================
       9. SECTION 7: SCHOLAR STORIES LUXURY INTERVIEWS
       ========================================================================= */
    .interviews-stack-container {
      display: flex;
      flex-direction: column;
      gap: 160px;
      margin-top: 60px;
    }

    .interview-feature-spread {
      display: grid;
      grid-template-columns: 1.2fr 1.8fr;
      gap: 80px;
      align-items: center;
    }
    .interview-feature-spread:nth-child(even) {
      grid-template-columns: 1.8fr 1.2fr;
    }

    .interview-outbound-frame {
      position: relative;
    }
    .interview-outbound-frame img {
      width: 100%;
      height: 620px;
      object-fit: cover;
      box-shadow: 0 40px 80px rgba(0,0,0,0.06);
    }

    .interview-text-profile-block h3 {
      font-size: 1.6rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--secondary-accent);
      margin-top: 30px;
    }

    /* =========================================================================
       10. SECTION 8: JOURNAL PRINT MAGAZINE RECONSTRUCTION
       ========================================================================= */
    .journal-print-canvas {
      background-color: var(--bg-cream-green);
    }
    
    .journal-print-wrapper {
      max-width: 1100px;
      margin: 0 auto;
      background-color: var(--white);
      padding: 100px;
      box-shadow: 0 60px 120px rgba(0,0,0,0.04);
    }

    .journal-header-centerpiece {
      text-align: center;
      margin-bottom: 60px;
      border-bottom: 2px solid var(--dark-ink);
      padding-bottom: 40px;
    }
    .journal-header-centerpiece h2 {
      font-size: 4.2rem;
      letter-spacing: -0.03em;
      margin-top: 15px;
    }

    .journal-embedded-hero-img {
      width: 100%;
      height: 550px;
      object-fit: cover;
      margin-bottom: 60px;
    }

    /* =========================================================================
       11. SECTION 9: LEARNING METRICS MINIMALIST PANEL
       ========================================================================= */
    .metrics-minimalist-row {
      display: flex;
      justify-content: space-between;
      gap: 40px;
      text-align: center;
    }
    .metric-data-node h3 {
      font-size: 5.5rem;
      font-weight: 700;
      color: var(--primary-accent);
      line-height: 1;
      margin-bottom: 10px;
    }
    .metric-data-node p {
      font-size: 1rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: rgba(10, 17, 12, 0.6);
    }

    /* =========================================================================
       12. SECTION 10: PINNED OVERSIZE HORIZONTAL SCROLL EXPEDITION
       ========================================================================= */
    .horizontal-scroll-container {
      background-color: var(--primary-accent);
      color: var(--white);
      overflow-x: auto;
      display: flex;
      gap: 60px;
      padding: 120px 8%;
    }
    .horizontal-scroll-container::-webkit-scrollbar {
      height: 6px;
    }
    .horizontal-scroll-container::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.3);
      border-radius: 4px;
    }

    .horizontal-panel-slide {
      min-width: 450px;
      background-color: rgba(255, 255, 255, 0.1);
      padding: 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 500px;
      border-left: 2px solid var(--white);
    }
    .horizontal-panel-slide h3 {
      color: var(--white);
      font-size: 3rem;
    }
    .horizontal-panel-slide p {
      color: var(--white);
      margin-bottom: 0;
    }

    /* =========================================================================
       13. SECTION 11: THE FUTURE SCHOLAR INTERLACE
       ========================================================================= */
    .future-scholar-flex-spread {
      display: flex;
      align-items: center;
      gap: 8%;
    }
    .future-scholar-left-img {
      width: 45%;
      height: 750px;
      object-fit: cover;
      box-shadow: 0 50px 100px rgba(0,0,0,0.08);
    }
    .future-scholar-right-editorial {
      width: 47%;
    }
    .future-scholar-right-editorial h2 {
      font-size: 4rem;
      margin-bottom: 40px;
    }

    /* =========================================================================
       14. SECTION 12: SUBSCRIPTION CONCIERGE PLATFORM (LOCALSTORAGE)
       ========================================================================= */
    .subscribe-concierge-canvas {
      background-color: var(--bg-cream-green);
      text-align: center;
    }
    .subscribe-concierge-canvas h2 {
      font-size: 4rem;
      margin-bottom: 50px;
    }

    .luxury-forms-wrapper-center {
      max-width: 700px;
      margin: 0 auto;
      background-color: var(--white);
      padding: 60px;
      box-shadow: 0 40px 90px rgba(0,0,0,0.04);
    }

    .form-segment-block {
      margin-bottom: 50px;
    }
    .form-segment-block:last-child {
      margin-bottom: 0;
      border-top: 1px solid rgba(10, 17, 12, 0.1);
      padding-top: 40px;
    }
    .form-segment-block h3 {
      font-size: 1.4rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 25px;
    }

    .luxury-input-element {
      width: 100%;
      padding: 18px 24px;
      border: 1px solid rgba(10, 17, 12, 0.12);
      font-family: var(--font-family);
      font-size: 1.05rem;
      margin-bottom: 20px;
      outline: none;
      background-color: transparent;
    }
    .luxury-input-element:focus {
      border-color: var(--primary-accent);
    }

    .luxury-action-submit-btn {
      width: 100%;
      background-color: var(--dark-ink);
      color: var(--white);
      padding: 20px;
      border: none;
      font-family: var(--font-family);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      cursor: pointer;
      transition: var(--transition-fast);
    }
    .luxury-action-submit-btn:hover {
      background-color: var(--primary-accent);
    }

    /* =========================================================================
       15. SECTION 13: FINAL EDITORIAL COVER SPREAD
       ========================================================================= */
    .final-cover-parallax-viewport {
      height: 100vh;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url('https://i.pinimg.com/736x/ef/ec/ba/efecba3af4a93aeccd55dea4bc1457b8.jpg');
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    .final-cover-parallax-viewport::before {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background-color: rgba(10, 17, 12, 0.65);
    }

    .cover-headline-overlay-box {
      position: relative;
      z-index: 5;
      text-align: center;
      color: var(--white);
      max-width: 1000px;
      padding: 0 8%;
    }
    .cover-headline-overlay-box h2 {
      color: var(--white);
      font-size: 5.5rem;
      letter-spacing: -0.03em;
    }

    /* =========================================================================
       16. MULTIPAGE LAYOUT EXTENSIONS (SPA INTERNAL ARTICLE INSERTS)
       ========================================================================= */
    .internal-editorial-hero {
      background-color: var(--bg-cream-green);
      padding: 220px 8% 100px 8%;
      text-align: center;
    }
    .internal-editorial-hero h1 {
      font-size: 5rem;
      margin-bottom: 20px;
    }

    .narrow-reading-container {
      max-width: 850px;
      margin: 0 auto;
      padding: 100px 0;
    }
    .narrow-reading-container h2 {
      font-size: 2.6rem;
      margin: 45px 0 25px 0;
    }
    .narrow-reading-container p {
      font-size: 1.2rem;
      line-height: 1.9;
      margin-bottom: 35px;
    }

    /* =========================================================================
       17. FOOTER STRUCTURE CORE MATRIX
       ========================================================================= */
    .editorial-footer {
      background-color: var(--primary-accent);
      color: var(--white);
      padding: 120px 8% 0 8%;
    }
    .footer-jumbo-identity-row {
      font-size: 3.5rem;
      font-weight: 700;
      text-align: center;
      border-bottom: 2px solid rgba(255, 255, 255, 0.2);
      padding-bottom: 60px;
      margin-bottom: 80px;
    }

    .footer-columns-grid-box {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 50px;
      padding-bottom: 80px;
    }

    .footer-column-node h4 {
      color: var(--white);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 30px;
    }
    .footer-column-node ul {
      list-style: none;
    }
    .footer-column-node ul li {
      margin-bottom: 18px;
    }
    .footer-column-node ul li a {
      color: rgba(255, 255, 255, 0.85);
      text-decoration: none;
      cursor: pointer;
      transition: var(--transition-fast);
    }
    .footer-column-node ul li a:hover {
      color: var(--dark-ink);
      padding-left: 6px;
    }

    .footer-mini-newsletter-form h4 {
      color: var(--white);
      font-size: 1.1rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      margin-bottom: 25px;
    }

    .footer-strip-secondary-bar {
      background-color: var(--secondary-accent);
      padding: 35px 8%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.95rem;
      color: var(--white);
    }
    .footer-strip-secondary-bar a {
      color: var(--white);
      text-decoration: none;
      margin-left: 30px;
      cursor: pointer;
    }
    .footer-strip-secondary-bar a:hover {
      color: var(--dark-ink);
    }

    /* =========================================================================
       18. RESPONSIVE COMPOSITION RETENTION QUERY PROTOCOLS
       ========================================================================= */
    @media (max-width: 1200px) {
      .hero-composition-grid { grid-template-columns: 1fr; }
      .hero-outbound-frame { margin-left: 0; margin-top: 0; }
      .hero-outbound-frame img { width: 100%; height: 500px; }
      .hero-core-headline-box h1 { font-size: 4.5rem; }
      .manifesto-columns-grid, .chapter-spread-row, .interview-feature-spread, .interview-feature-spread:nth-child(even), .future-scholar-flex-spread {
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 50px;
      }
      .chapter-img-mask-wrapper, .chapter-editorial-text-card, .future-scholar-left-img, .future-scholar-right-editorial { width: 100%; }
      .editorial-multi-column-text { column-count: 1; }
      .gallery-composition-layout { grid-template-columns: 1fr; }
      .node-large-portrait, .node-large-landscape, .node-right-column-container { grid-column: span 12; height: 500px; }
      .node-small-square-2 { position: static; width: 100%; margin-top: 30px; }
      .pathway-core-content { flex-direction: column; width: 100%; gap: 20px; }
      .pathway-core-content h3, .pathway-core-content p { width: 100%; }
      .metrics-minimalist-row { flex-direction: column; gap: 40px; }
      .footer-columns-grid-box { grid-template-columns: 1fr; }
      .journal-print-wrapper { padding: 40px 20px; }
    }

    /* ==========================================================
   STORIES PAGE — SCHOLAR SUCCESS EDITORIAL SYSTEM
   ========================================================== */

.stories-editorial-hero{
  padding-top:240px;
  background:linear-gradient(
    180deg,
    #fff 0%,
    var(--bg-cream-green) 100%
  );
}

.stories-hero-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:100px;
  align-items:center;
}

.stories-hero-content h1{
  font-size:6.5rem;
  margin-bottom:35px;
}

.stories-hero-content p{
  font-size:1.25rem;
  line-height:2;
  max-width:650px;
}

.stories-hero-image{
  position:relative;
}

.stories-hero-image::after{
  content:'';
  position:absolute;
  width:250px;
  height:250px;
  background:var(--secondary-accent);
  opacity:.15;
  right:-40px;
  bottom:-40px;
}

.stories-hero-image img{
  width:100%;
  height:850px;
  object-fit:cover;
  position:relative;
  z-index:2;
  box-shadow:0 60px 120px rgba(0,0,0,.08);
}

/* INTRO */

.editorial-story-introduction{
  background:white;
}

.editorial-story-introduction h2{
  font-size:4.5rem;
}

/* FEATURE STORY */

.feature-story-spread{
  background:var(--bg-cream-green);
}

.feature-story-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:100px;
  align-items:center;
}

.feature-story-image img{
  width:100%;
  height:850px;
  object-fit:cover;
  box-shadow:0 50px 100px rgba(0,0,0,.08);
}

.feature-story-content h2{
  font-size:5rem;
  margin-bottom:15px;
}

.feature-story-content h4{
  font-size:1.2rem;
  text-transform:uppercase;
  letter-spacing:.25em;
  color:var(--primary-accent);
  margin-bottom:35px;
}

.feature-story-content p{
  font-size:1.18rem;
  line-height:2;
}

/* OUTCOMES */

.outcomes-grid-section{
  background:white;
  text-align:center;
}

.outcomes-grid-section h2{
  font-size:4.5rem;
  margin-bottom:70px;
}

.outcomes-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

.outcome-card{
  padding:50px;
  background:#fafafa;
  border-top:4px solid transparent;
  transition:var(--transition-editorial);
  text-align:left;
}

.outcome-card:hover{
  transform:translateY(-12px);
  border-color:var(--primary-accent);
  box-shadow:0 30px 70px rgba(0,0,0,.05);
}

.outcome-card span{
  display:block;
  font-size:.85rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--primary-accent);
  margin-bottom:15px;
  font-weight:700;
}

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

/* INTERVIEW */

.interview-editorial-section{
  background:var(--secondary-accent);
}

.interview-layout{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:120px;
  align-items:center;
}

.interview-left h2{
  color:white;
  font-size:4rem;
  margin-bottom:40px;
}

.interview-left blockquote{
  font-size:2rem;
  color:white;
  line-height:1.5;
  font-weight:700;
  border-left:4px solid white;
  padding-left:30px;
}

.interview-right p{
  color:rgba(255,255,255,.9);
  font-size:1.15rem;
  line-height:2;
}

.interview-editorial-section .editorial-meta-lbl{
  color:white;
}

/* TIMELINE */

.journey-timeline-section{
  background:white;
  text-align:center;
}

.journey-timeline-section h2{
  font-size:4rem;
  margin-bottom:80px;
}

/* GALLERY */

.success-gallery-section{
  background:var(--bg-cream-green);
}

.success-gallery-section h2{
  font-size:4rem;
  margin-bottom:70px;
}

.gallery-editorial-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:30px;
}

.gallery-large img{
  width:100%;
  height:800px;
  object-fit:cover;
}

.gallery-small{
  display:flex;
  flex-direction:column;
  gap:30px;
}

.gallery-small img{
  width:100%;
  height:385px;
  object-fit:cover;
}

/* METRICS */

.success-metrics-banner{
  background:var(--dark-ink);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px;
  text-align:center;
}

.success-metrics-banner .metric-card{
  padding:40px 10px;
}

.success-metrics-banner h3{
  color:var(--primary-accent);
  font-size:5rem;
  margin-bottom:15px;
}

.success-metrics-banner p{
  color:rgba(255,255,255,.8);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin-bottom:0;
}

/* FINAL SECTION */

.stories-closing-parallax{
  height:100vh;
  padding:0;
  position:relative;
  background-image:url('https://i.pinimg.com/736x/99/a8/f1/99a8f1d8a227c06f9e79063ca29b04c6.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  display:flex;
  align-items:center;
  justify-content:center;
}

.stories-closing-parallax::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(10,17,12,.65);
}

.closing-overlay{
  position:relative;
  z-index:2;
  background:white;
  max-width:950px;
  padding:100px;
  text-align:center;
  box-shadow:0 50px 100px rgba(0,0,0,.15);
}

.closing-overlay h2{
  font-size:4.8rem;
}

/* RESPONSIVE */

@media(max-width:1200px){

  .stories-hero-grid,
  .feature-story-grid,
  .interview-layout{
    grid-template-columns:1fr;
    gap:60px;
  }

  .outcomes-grid{
    grid-template-columns:1fr;
  }

  .gallery-editorial-grid{
    grid-template-columns:1fr;
  }

  .success-metrics-banner{
    grid-template-columns:1fr;
  }

  .stories-hero-content h1{
    font-size:4rem;
  }

  .feature-story-content h2,
  .editorial-story-introduction h2,
  .closing-overlay h2{
    font-size:3rem;
  }

  .stories-hero-image img,
  .feature-story-image img{
    height:500px;
  }

  .gallery-large img{
    height:500px;
  }

  .gallery-small img{
    height:250px;
  }

  .closing-overlay{
    padding:50px 30px;
  }

  .interview-left blockquote{
    font-size:1.5rem;
  }
}
/* ==========================================================
   PROGRAMS PAGE — CURRICULUM CATALOG SYSTEM
   ========================================================== */

.programs-editorial-hero{
  padding-top:240px;
  background:linear-gradient(
    135deg,
    var(--bg-cream-green) 0%,
    #ffffff 100%
  );
}

.programs-hero-layout{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:100px;
  align-items:center;
}

.programs-hero-content h1{
  font-size:6.5rem;
  line-height:.95;
  margin-bottom:35px;
}

.programs-hero-content p{
  max-width:650px;
  font-size:1.2rem;
  line-height:2;
}

.programs-hero-image{
  position:relative;
}

.programs-hero-image::before{
  content:'';
  position:absolute;
  top:-40px;
  right:-40px;
  width:220px;
  height:220px;
  background:var(--primary-accent);
  opacity:.1;
}

.programs-hero-image img{
  width:100%;
  height:850px;
  object-fit:cover;
  position:relative;
  z-index:2;
  box-shadow:0 60px 120px rgba(0,0,0,.08);
}

/* INTRO */

.programs-introduction-spread{
  background:white;
}

.editorial-split-layout{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:120px;
}

.editorial-split-layout h2{
  font-size:4.5rem;
}

.editorial-split-layout p{
  font-size:1.18rem;
  line-height:2;
}

/* FLAGSHIP PROGRAMS */

.flagship-programs-section{
  background:var(--bg-cream-green);
  text-align:center;
}

.flagship-programs-section h2{
  font-size:4.5rem;
  margin-bottom:80px;
}

.flagship-program-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:35px;
}

.flagship-program-card{
  background:white;
  padding:60px 40px;
  text-align:left;
  transition:var(--transition-editorial);
  border-top:4px solid transparent;
}

.flagship-program-card:hover{
  transform:translateY(-12px);
  border-color:var(--primary-accent);
  box-shadow:0 35px 80px rgba(0,0,0,.06);
}

.flagship-program-card span{
  display:block;
  font-size:4rem;
  font-weight:700;
  color:rgba(255,97,248,.2);
  margin-bottom:25px;
}

.flagship-program-card h3{
  font-size:2rem;
  margin-bottom:20px;
}

/* FEATURED PROGRAM */

.featured-program-editorial{
  background:white;
}

.featured-program-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:100px;
  align-items:center;
}

.featured-program-image img{
  width:100%;
  height:850px;
  object-fit:cover;
  box-shadow:0 50px 100px rgba(0,0,0,.08);
}

.featured-program-content h2{
  font-size:4.8rem;
  margin-bottom:35px;
}

.featured-program-content p{
  font-size:1.18rem;
  line-height:2;
}

/* ROADMAP */

.program-roadmap-section{
  background:var(--secondary-accent);
  text-align:center;
}

.program-roadmap-section .editorial-meta-lbl{
  color:white;
}

.program-roadmap-section h2{
  color:white;
  font-size:4rem;
  margin-bottom:80px;
}

.roadmap-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:25px;
}

.roadmap-card{
  background:rgba(255,255,255,.12);
  padding:50px 25px;
  backdrop-filter:blur(10px);
}

.roadmap-card span{
  display:block;
  font-size:4rem;
  color:rgba(255,255,255,.35);
  font-weight:700;
  margin-bottom:15px;
}

.roadmap-card h3{
  color:white;
  margin-bottom:15px;
}

.roadmap-card p{
  color:rgba(255,255,255,.9);
  margin-bottom:0;
}

/* WORKSHOPS */

.workshops-editorial-spread{
  background:white;
}

.workshops-editorial-spread h2{
  font-size:4rem;
  margin-bottom:70px;
}

.workshop-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:35px;
}

.workshop-grid article{
  padding:50px;
  background:#fafafa;
  transition:var(--transition-editorial);
}

.workshop-grid article:hover{
  transform:translateY(-8px);
  box-shadow:0 25px 60px rgba(0,0,0,.05);
}

.workshop-grid h3{
  font-size:1.9rem;
  margin-bottom:15px;
}

/* COMPARISON */

.program-comparison-layout{
  background:var(--bg-cream-green);
  text-align:center;
}

.program-comparison-layout h2{
  font-size:4rem;
  margin-bottom:80px;
}

.comparison-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:40px;
}

.comparison-card{
  background:white;
  padding:70px 50px;
}

.comparison-card h3{
  font-size:2rem;
  margin-bottom:40px;
}

.comparison-card ul{
  list-style:none;
}

.comparison-card li{
  padding:15px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.featured-tier{
  background:var(--primary-accent);
  transform:scale(1.05);
}

.featured-tier h3,
.featured-tier li{
  color:white;
}

.featured-tier li{
  border-color:rgba(255,255,255,.2);
}

/* METRICS */

.program-metrics-banner{
  background:var(--dark-ink);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
  gap:30px;
}

.program-metrics-banner .metric-card{
  padding:30px;
}

.program-metrics-banner h3{
  font-size:5rem;
  color:var(--primary-accent);
  margin-bottom:15px;
}

.program-metrics-banner p{
  color:rgba(255,255,255,.8);
  margin-bottom:0;
  text-transform:uppercase;
  letter-spacing:.15em;
}

/* FINAL PARALLAX */

.programs-parallax-banner{
  height:100vh;
  padding:0;
  position:relative;
  background-image:url('https://i.pinimg.com/736x/9c/f5/84/9cf5847652717d2e5c20a43b78dee704.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  display:flex;
  align-items:center;
  justify-content:center;
}

.programs-parallax-banner::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(10,17,12,.6);
}

.program-banner-overlay{
  position:relative;
  z-index:2;
  background:white;
  padding:100px;
  max-width:900px;
  text-align:center;
  box-shadow:0 50px 120px rgba(0,0,0,.15);
}

.program-banner-overlay h2{
  font-size:4.8rem;
}

/* RESPONSIVE */

@media(max-width:1200px){

  .programs-hero-layout,
  .editorial-split-layout,
  .featured-program-grid{
    grid-template-columns:1fr;
    gap:60px;
  }

  .flagship-program-grid,
  .workshop-grid,
  .comparison-columns,
  .roadmap-grid,
  .program-metrics-banner{
    grid-template-columns:1fr;
  }

  .programs-hero-content h1{
    font-size:4rem;
  }

  .editorial-split-layout h2,
  .featured-program-content h2,
  .program-roadmap-section h2,
  .program-comparison-layout h2,
  .program-banner-overlay h2{
    font-size:3rem;
  }

  .programs-hero-image img,
  .featured-program-image img{
    height:500px;
  }

  .featured-tier{
    transform:none;
  }

  .program-banner-overlay{
    padding:50px 30px;
  }
}
/* =========================================================================
   19. JOURNAL SYSTEM CORE SPREAD FOUNDATION (NEW PAGES SUPPORT)
   ========================================================================= */

.journal-spread-layer {
  display: none;
  width: 100%;
  min-height: 100vh;
}

.journal-spread-layer.active-editorial-spread {
  display: block;
}

/* Universal spacing refinement for all spreads */
.journal-spread-layer section {
  position: relative;
  width: 100%;
  padding: var(--luxury-spacing) 8%;
}

/* =========================================================================
   20. HERO SYSTEM VARIANTS (PROGRAMS / STORIES / JOURNAL / ABOUT)
   ========================================================================= */

.programs-editorial-hero,
.stories-editorial-hero,
.journal-publication-hero,
.about-editorial-hero,
.journal-publication-hero {
  background: linear-gradient(180deg, var(--bg-cream-green), var(--white));
  text-align: left;
  padding: 220px 8% 120px 8%;
}

.programs-hero-layout,
.stories-hero-grid,
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: center;
}

.programs-hero-image img,
.stories-hero-image img,
.about-hero-grid img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  box-shadow: 0 50px 120px rgba(0,0,0,0.08);
}

/* Typography in hero spreads */
.programs-hero-content h1,
.stories-hero-content h1,
.about-editorial-hero h1,
.journal-publication-hero h1 {
  font-size: 4.8rem;
  letter-spacing: -0.04em;
  margin-bottom: 20px;
}

/* =========================================================================
   21. SPLIT INTRO LAYOUT (REUSED ACROSS PAGES)
   ========================================================================= */

.editorial-split-layout,
.two-column-editorial {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}

.editorial-split-layout h2,
.two-column-editorial h2 {
  font-size: 3.2rem;
}

.editorial-split-layout p,
.two-column-editorial p {
  font-size: 1.2rem;
  line-height: 1.9;
}

/* =========================================================================
   22. FLAGSHIP / GRID CARDS SYSTEM
   ========================================================================= */

.flagship-program-grid,
.outcomes-grid,
.workshop-grid,
.publication-grid,
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 80px;
}

.flagship-program-card,
.outcome-card,
.workshop-grid article,
.publication-card,
.values-grid article {
  background: var(--white);
  border: 1px solid rgba(10,17,12,0.08);
  padding: 40px;
  transition: var(--transition-fast);
  box-shadow: 0 10px 40px rgba(0,0,0,0.03);
}

.flagship-program-card:hover,
.outcome-card:hover,
.workshop-grid article:hover,
.publication-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.08);
}

/* card numbers */
.flagship-program-card span,
.outcome-card span,
.timeline-card span,
.roadmap-card span {
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--primary-accent);
  font-weight: 700;
}

/* =========================================================================
   23. FEATURE GRID SYSTEM (IMAGE + TEXT)
   ========================================================================= */

.featured-program-grid,
.featured-article-grid,
.feature-story-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.featured-program-image img,
.article-image img,
.feature-story-image img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  box-shadow: 0 40px 100px rgba(0,0,0,0.08);
}

.featured-program-content h2,
.article-content h2,
.feature-story-content h2 {
  font-size: 3.8rem;
  margin-bottom: 25px;
}

/* =========================================================================
   24. ROADMAP / TIMELINE SYSTEM
   ========================================================================= */

.timeline-row,
.roadmap-grid {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-top: 80px;
  flex-wrap: wrap;
}

.timeline-card,
.roadmap-card {
  flex: 1;
  min-width: 160px;
  background: var(--white);
  padding: 30px;
  border-left: 3px solid var(--primary-accent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.03);
}

.timeline-card h3,
.roadmap-card h3 {
  font-size: 1.3rem;
  margin-top: 10px;
}

/* =========================================================================
   25. PARALLAX SECTION SYSTEM
   ========================================================================= */

.stories-closing-parallax,
.programs-parallax-banner,
.journal-closing-banner,
.about-final-banner {
  height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  position: relative;
  background-attachment: fixed;
}

.stories-closing-parallax::before,
.programs-parallax-banner::before,
.journal-closing-banner::before,
.about-final-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,17,12,0.65);
}

.closing-overlay,
.program-banner-overlay,
.journal-overlay,
.about-overlay {
  position: relative;
  color: var(--white);
  text-align: center;
  max-width: 900px;
}

.closing-overlay h2,
.program-banner-overlay h2,
.journal-overlay h2,
.about-overlay h2 {
  font-size: 4.5rem;
  letter-spacing: -0.03em;
}

/* =========================================================================
   26. METRICS SYSTEM UNIFIED
   ========================================================================= */

.success-metrics-banner,
.program-metrics-banner,
.journal-metrics-banner,
.institution-metrics-banner,
.academic-metrics-banner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--primary-accent);
  color: var(--white);
  padding: 120px 8%;
  text-align: center;
}

.metric-card h3,
.metric-block h3,
.metric-data-node h3 {
  font-size: 4.5rem;
  margin-bottom: 10px;
  color: var(--white);
}

.metric-card p,
.metric-block p {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* =========================================================================
   27. GALLERY SYSTEM
   ========================================================================= */

.gallery-editorial-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 30px;
  margin-top: 80px;
}

.gallery-editorial-grid img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-editorial-grid div:hover img {
  transform: scale(1.04);
}

/* =========================================================================
   28. WORKSHOP GRID ENHANCEMENT
   ========================================================================= */

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

.workshop-grid article {
  text-align: center;
  padding: 50px 30px;
}

/* =========================================================================
   29. COMPARISON SYSTEM (PROGRAMS PAGE)
   ========================================================================= */

.comparison-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 80px;
}

.comparison-card {
  background: var(--white);
  padding: 50px;
  border: 1px solid rgba(0,0,0,0.08);
}

.comparison-card.featured-tier {
  border: 2px solid var(--primary-accent);
  transform: scale(1.03);
}

.comparison-card ul {
  list-style: none;
  margin-top: 25px;
}

.comparison-card ul li {
  margin-bottom: 12px;
  font-size: 1.05rem;
}

/* =========================================================================
   30. RESPONSIVE FINAL PATCH
   ========================================================================= */

@media (max-width: 1000px) {

  .programs-hero-layout,
  .stories-hero-grid,
  .featured-program-grid,
  .featured-article-grid,
  .feature-story-grid,
  .about-hero-grid {
    grid-template-columns: 1fr;
  }

  .flagship-program-grid,
  .outcomes-grid,
  .workshop-grid,
  .publication-grid,
  .values-grid,
  .comparison-columns {
    grid-template-columns: 1fr;
  }

  .timeline-row,
  .roadmap-grid {
    flex-direction: column;
  }

  .gallery-editorial-grid {
    grid-template-columns: 1fr;
  }

  .metric-card h3 {
    font-size: 3rem;
  }

  .closing-overlay h2,
  .program-banner-overlay h2,
  .journal-overlay h2,
  .about-overlay h2 {
    font-size: 2.8rem;
  }
}


/* ================================
   ABOUT SPREAD — LUXURY EDITORIAL STYLE
   ================================ */

#spread-about {
  width: 100%;
  background: var(--white);
  color: var(--dark-ink);
}

/* HERO */
.about-editorial-hero {
  padding: 220px 8% 120px;
  background: linear-gradient(135deg, var(--bg-cream-green), #ffffff);
}

.about-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}

.about-hero-grid h1 {
  font-size: 5.5rem;
  letter-spacing: -0.04em;
  margin: 25px 0;
}

.about-hero-grid p {
  font-size: 1.25rem;
  max-width: 520px;
  opacity: 0.85;
}

.about-hero-grid img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  box-shadow: 0 60px 120px rgba(0,0,0,0.08);
}

/* FOUNDER LETTER */
.founder-letter-section {
  padding: 140px 8%;
  background: var(--white);
}

.founder-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;
  align-items: center;
}

.founder-image img {
  width: 100%;
  height: 650px;
  object-fit: cover;
  box-shadow: 0 50px 100px rgba(0,0,0,0.06);
}

.founder-content h2 {
  font-size: 3.5rem;
  margin: 20px 0 30px;
}

.founder-content p {
  font-size: 1.2rem;
  line-height: 1.9;
  opacity: 0.85;
}

/* VALUES */
.values-editorial-grid {
  padding: 140px 8%;
  background: var(--bg-cream-green);
}

.values-editorial-grid h2 {
  font-size: 3.8rem;
  margin: 20px 0 60px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}

.values-grid article {
  background: var(--white);
  padding: 40px;
  box-shadow: 0 40px 90px rgba(0,0,0,0.05);
  transition: transform 0.5s ease;
}

.values-grid article:hover {
  transform: translateY(-8px);
}

.values-grid h3 {
  font-size: 1.6rem;
  margin-bottom: 10px;
}

.values-grid p {
  font-size: 1.05rem;
  opacity: 0.75;
}

/* TIMELINE */
.institution-timeline {
  padding: 140px 8%;
  background: var(--white);
}

.institution-timeline h2 {
  font-size: 3.6rem;
  margin: 20px 0 80px;
}

.timeline-track {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  position: relative;
}

.timeline-track::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(0,0,0,0.08);
}

.timeline-node {
  text-align: center;
  position: relative;
  flex: 1;
}

.timeline-node span {
  display: inline-block;
  font-weight: 700;
  color: var(--primary-accent);
  margin-bottom: 15px;
}

.timeline-node h3 {
  font-size: 1.3rem;
}

/* CULTURE */
.culture-showcase-section {
  padding: 140px 8%;
  background: var(--bg-cream-green);
}

.culture-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: center;
}

.culture-grid img {
  width: 100%;
  height: 600px;
  object-fit: cover;
  box-shadow: 0 60px 120px rgba(0,0,0,0.08);
}

.culture-content h2 {
  font-size: 3.5rem;
  margin: 20px 0 30px;
}

.culture-content p {
  font-size: 1.2rem;
  opacity: 0.85;
  line-height: 1.9;
}

/* METRICS */
.institution-metrics-banner {
  padding: 120px 8%;
  background: var(--primary-accent);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  text-align: center;
  color: var(--white);
}

.institution-metrics-banner h3 {
  font-size: 4.5rem;
  margin-bottom: 10px;
}

.institution-metrics-banner p {
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* FINAL BANNER */
.about-final-banner {
  padding: 180px 8%;
  background: linear-gradient(rgba(10,17,12,0.6), rgba(10,17,12,0.6)),
              url('https://i.pinimg.com/736x/9c/61/8d/9c618dd49c436def6697c15d8eb73786.jpg');
  background-size: cover;
  background-position: center;
  text-align: center;
  color: var(--white);
}

.about-overlay h2 {
  font-size: 4.8rem;
  letter-spacing: -0.03em;
  margin-top: 20px;
}

/* RESPONSIVE */
@media (max-width: 1100px) {

  .about-hero-grid,
  .founder-layout,
  .culture-grid {
    grid-template-columns: 1fr;
  }

  .values-grid {
    grid-template-columns: 1fr 1fr;
  }

  .institution-metrics-banner {
    grid-template-columns: 1fr 1fr;
  }

  .timeline-track {
    flex-direction: column;
    align-items: center;
  }

  .about-hero-grid h1,
  .culture-content h2,
  .about-overlay h2 {
    font-size: 3rem;
  }
}