/* =============================================
       ABOUT — AWARD-LEVEL DESIGN
       ============================================= */

    /* ---- CINEMATIC OPENING ---- */
    .about-opening {
      position: relative;
      height: 100vh; min-height: 560px;
      overflow: hidden;
      display: flex; align-items: center;
      background: var(--green-900); /* solid fallback so text is never on white */
    }
    .opening-bg {
      position: absolute; inset: 0; z-index: 0;
      background: url('https://joinmetoday.org/storm/2026/01/photo_2023-07-20_15-47-33.jpg') center/cover no-repeat;
    }
    .opening-overlay {
      position: absolute; inset: 0; z-index: 1;
      background: linear-gradient(to right, rgba(4,47,30,.92) 45%, rgba(4,47,30,.55) 100%);
    }
    .opening-content {
      position: relative; z-index: 10; /* well above the overlay */
      max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
      width: 100%;
    }
    .opening-tag {
      display: inline-flex; align-items: center; gap: .5rem;
      font-size: .7rem; font-weight: 800; letter-spacing: .18em;
      text-transform: uppercase; color: #6ee7b7;
      margin-bottom: 1.5rem;
    }
    .opening-tag::before {
      content: '';
      width: 32px; height: 1.5px; background: #6ee7b7;
    }
    .opening-h1 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(3rem, 7vw, 5.5rem);
      font-weight: 800; color: #fff;
      line-height: 1.1; max-width: 620px;
      margin-bottom: 1.5rem;
    }
    .opening-h1 em { font-style: italic; color: #6ee7b7; }
    .opening-pull {
      font-size: 1.1rem; color: rgba(255,255,255,.72);
      max-width: 480px; line-height: 1.8; margin-bottom: 2.5rem;
    }
    .opening-stats {
      display: flex; gap: 2.5rem; flex-wrap: wrap;
      padding-top: 2rem;
      border-top: 1px solid rgba(255,255,255,.12);
    }
    .opening-stat .n { font-size: 2.25rem; font-weight: 800; color: #fff; line-height: 1; }
    .opening-stat .n em { color: #6ee7b7; font-style: normal; }
    .opening-stat .l { font-size: .72rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .1em; margin-top: .25rem; }

    /* Scroll indicator */
    .scroll-ind {
      position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
      display: flex; flex-direction: column; align-items: center; gap: .5rem;
      color: rgba(255,255,255,.55); font-size: .68rem; letter-spacing: .12em;
      text-transform: uppercase; z-index: 10;
    }
    .scroll-ind i { font-size: 1.1rem; animation: bounceY 1.5s ease infinite; }
    @keyframes bounceY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

    /* Make opening tag readable */
    .opening-tag {
      font-size: .75rem !important;
      color: #6ee7b7 !important;
      opacity: 1 !important;
    }
    .opening-h1, .opening-pull {
      opacity: 1 !important;
      visibility: visible !important;
    }

    /* ---- MANIFESTO BAND ---- */
    .manifesto {
      background: var(--green-900);
      padding: 5rem 0;
      overflow: hidden;
    }
    .manifesto-inner {
      max-width: 1200px; margin: 0 auto; padding: 0 1.5rem;
      display: grid; grid-template-columns: 1fr 1.6fr; gap: 5rem; align-items: center;
    }
    .manifesto-label {
      font-size: .72rem; font-weight: 800; letter-spacing: .18em;
      text-transform: uppercase; color: var(--green-400);
      margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem;
    }
    .manifesto-label::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.1); }
    .manifesto h2 {
      font-family: 'Playfair Display', serif;
      font-size: clamp(2rem, 4vw, 3rem);
      color: #fff; line-height: 1.2;
    }
    .manifesto h2 em { color: #6ee7b7; font-style: italic; }
    .manifesto-body { color: rgba(255,255,255,.7); }
    .manifesto-body p { line-height: 1.85; margin-bottom: 1.25rem; font-size: 1.02rem; }
    .manifesto-body strong { color: #fff; }
    .mvf-row {
      display: grid; grid-template-columns: 1fr 1fr 1fr;
      gap: 1px; background: rgba(255,255,255,.08);
      border-radius: 14px; overflow: hidden; margin-top: 2.5rem;
    }
    .mvf-cell {
      background: rgba(255,255,255,.04);
      padding: 1.5rem;
      transition: background .3s ease;
    }
    .mvf-cell:hover { background: rgba(255,255,255,.09); }
    .mvf-cell .ico { font-size: 1.5rem; margin-bottom: .75rem; }
    .mvf-cell h4 { color: #fff; font-size: .9rem; margin-bottom: .4rem; }
    .mvf-cell p  { color: rgba(255,255,255,.55); font-size: .82rem; line-height: 1.6; }

    /* ---- HISTORY — COMPACT RAIL ---- */
    .history-section { background: var(--gray-100); padding: 5rem 0; }
    .history-head { text-align: center; margin-bottom: 3.5rem; }
    .history-head .chapter-num {
      font-size: 7rem; font-weight: 800;
      color: var(--green-100); line-height: 1;
      font-family: 'Playfair Display', serif;
      margin-bottom: -.5rem; display: block;
    }
    .history-head h2 { font-family: 'Playfair Display', serif; position: relative; z-index: 1; }

    /* Horizontal timeline rail */
    .tl-rail-wrap {
      position: relative;
      overflow-x: auto;
      padding-bottom: 1rem;
      scrollbar-width: thin;
      scrollbar-color: var(--green-400) var(--gray-200);
    }
    .tl-rail {
      display: flex;
      gap: 0;
      min-width: max-content;
      position: relative;
      padding: 0 2rem 2rem;
    }
    /* Horizontal line */
    .tl-rail::before {
      content: '';
      position: absolute;
      top: 28px; left: 2rem; right: 2rem;
      height: 2px;
      background: linear-gradient(to right, var(--green-400), var(--green-200), var(--green-400));
    }

    .tl-node {
      display: flex; flex-direction: column; align-items: center;
      width: 240px; flex-shrink: 0;
      padding-top: 0;
    }
    .tl-node-dot {
      width: 16px; height: 16px;
      background: var(--green-500); border-radius: 50%;
      border: 3px solid var(--white);
      box-shadow: 0 0 0 4px rgba(16,185,129,.2);
      flex-shrink: 0; z-index: 1;
      transition: transform .3s ease;
    }
    .tl-node:hover .tl-node-dot { transform: scale(1.4); }
    .tl-node-card {
      margin-top: 1.25rem;
      background: var(--white);
      border-radius: 12px;
      padding: 1.25rem;
      width: 100%;
      box-shadow: 0 2px 10px rgba(0,0,0,.07);
      border: 1px solid var(--gray-200);
      transition: transform .3s ease, box-shadow .3s ease;
      cursor: default;
    }
    .tl-node:hover .tl-node-card { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
    .tl-year {
      font-size: .68rem; font-weight: 800;
      text-transform: uppercase; letter-spacing: .1em;
      color: var(--green-600); margin-bottom: .4rem;
    }
    .tl-node-card h4 { font-size: .92rem; margin-bottom: .35rem; color: var(--gray-900); }
    .tl-node-card p  { font-size: .78rem; color: var(--gray-500); line-height: 1.6; }
    .tl-node-card img { width: 100%; border-radius: 8px; margin-top: .75rem; height: 90px; object-fit: cover; }
    .tl-milestone {
      display: inline-flex; align-items: center; gap: .3rem;
      margin-top: .65rem;
      font-size: .7rem; font-weight: 700;
      color: var(--green-700); background: var(--green-50);
      border-radius: 50px; padding: .15rem .6rem;
    }

    /* ---- CAMPUSES — TWO-UP FEATURE ---- */
    .campuses-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      max-width: 900px; margin: 3rem auto 0;
    }
    .campus-feat {
      border-radius: 18px; overflow: hidden;
      position: relative; min-height: 340px;
      display: flex; flex-direction: column; justify-content: flex-end;
      cursor: default;
    }
    .campus-feat-bg {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      transition: transform .5s ease;
    }
    .campus-feat:hover .campus-feat-bg { transform: scale(1.05); }
    .campus-feat-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(4,30,20,.92) 30%, rgba(0,0,0,.1) 100%);
    }
    .campus-feat-body { position: relative; z-index: 1; padding: 1.75rem; }
    .campus-num {
      display: inline-block;
      font-size: .62rem; font-weight: 800; letter-spacing: .12em;
      text-transform: uppercase; color: #6ee7b7;
      background: rgba(110,231,183,.12);
      border: 1px solid rgba(110,231,183,.25);
      border-radius: 50px; padding: .2rem .7rem;
      margin-bottom: .75rem;
    }
    .campus-feat-body h3 { color: #fff; font-size: 1.15rem; margin-bottom: .25rem; }
    .campus-feat-body p  { color: rgba(255,255,255,.65); font-size: .82rem; margin-bottom: .85rem; }
    .campus-active {
      display: inline-flex; align-items: center; gap: .4rem;
      font-size: .72rem; font-weight: 700; color: #6ee7b7;
    }
    .campus-active .dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #6ee7b7; animation: cpulse 2s ease infinite;
    }
    @keyframes cpulse { 0%,100%{opacity:1} 50%{opacity:.4} }
    .campus-details-list {
      display: flex; flex-direction: column; gap: .3rem; margin-top: .75rem;
    }
    .campus-details-list span {
      font-size: .75rem; color: rgba(255,255,255,.6);
      display: flex; align-items: center; gap: .4rem;
    }
    .campus-details-list i { color: #6ee7b7; width: 14px; }

    /* ---- VALUES — DIAGONAL GRID ---- */
    .values-section { padding: 5rem 0; }
    .values-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--gray-200);
      border-radius: 16px; overflow: hidden;
      max-width: 980px; margin: 3rem auto 0;
    }
    .val-cell {
      background: var(--white);
      padding: 2rem 1.75rem;
      transition: background .25s ease;
      position: relative;
    }
    .val-cell:hover { background: var(--green-50); }
    .val-cell::after {
      content: attr(data-n);
      position: absolute; top: 1rem; right: 1.25rem;
      font-size: 3.5rem; font-weight: 800;
      color: var(--green-50); line-height: 1;
      font-family: 'Playfair Display', serif;
      pointer-events: none;
      transition: color .25s ease;
    }
    .val-cell:hover::after { color: var(--green-100); }
    .val-cell h4 { font-size: .95rem; margin-bottom: .4rem; position: relative; z-index: 1; }
    .val-cell p  { font-size: .83rem; color: var(--gray-500); line-height: 1.7; position: relative; z-index: 1; }
    .val-icon { font-size: 1.4rem; margin-bottom: .65rem; }

    /* ---- TEAM — EDITORIAL STRIP ---- */
    .team-section {
      background: var(--green-900);
      padding: 5rem 0;
    }
    .team-strip {
      display: flex; gap: 1px;
      background: rgba(255,255,255,.06);
      border-radius: 16px; overflow: hidden;
      margin-top: 3rem;
    }
    .team-member {
      flex: 1;
      position: relative;
      min-height: 380px;
      overflow: hidden;
      cursor: default;
    }
    .team-member img {
      width: 100%; height: 100%;
      object-fit: cover; display: block;
      filter: grayscale(30%);
      transition: filter .4s ease, transform .5s ease;
    }
    .team-member:hover img { filter: grayscale(0%); transform: scale(1.04); }
    .team-overlay {
      position: absolute; inset: 0;
      background: linear-gradient(to top, rgba(4,30,20,.9) 30%, transparent 70%);
      transition: background .3s ease;
    }
    .team-member:hover .team-overlay {
      background: linear-gradient(to top, rgba(4,30,20,.95) 40%, rgba(4,30,20,.2) 100%);
    }
    .team-info {
      position: absolute; bottom: 0; left: 0; right: 0;
      padding: 1.25rem;
    }
    .team-info h3 { color: #fff; font-size: .95rem; margin-bottom: .1rem; }
    .team-info .role { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #6ee7b7; }
    .team-bio {
      font-size: .78rem; color: rgba(255,255,255,.7); margin-top: .5rem;
      max-height: 0; overflow: hidden;
      transition: max-height .4s ease;
      line-height: 1.6;
    }
    .team-member:hover .team-bio { max-height: 80px; }

    /* ---- RESPONSIVE ---- */
    @media (max-width: 1024px) {
      .manifesto-inner { grid-template-columns: 1fr; gap: 3rem; }
      .mvf-row { grid-template-columns: 1fr; }
      .team-strip { flex-wrap: wrap; }
      .team-member { flex: 1 1 calc(50% - 1px); }
    }
    @media (max-width: 768px) {
      .opening-h1 { font-size: 2.5rem; }
      .opening-overlay { background: linear-gradient(to bottom, rgba(4,47,30,.97) 60%, rgba(4,47,30,.7) 100%); }
      .campuses-grid { grid-template-columns: 1fr; }
      .values-grid { grid-template-columns: 1fr 1fr; }
      .team-strip { flex-direction: column; }
      .team-member { min-height: 280px; }
      .manifesto-inner { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .opening-stats { gap: 1.5rem; }
      .values-grid { grid-template-columns: 1fr; }
      .tl-node { width: 200px; }
      .opening-h1 { font-size: 2rem; }
      .manifesto-inner { padding: 0 1rem; }
      .mvf-row { grid-template-columns: 1fr; }
      .campuses-grid { margin: 1.5rem 0 0; }
    }

    /* ---- Touch: kill hover effects on about page ---- */
    @media (hover: none), (pointer: coarse) {
      .campus-feat:hover .campus-feat-bg { transform: none !important; }
      .tl-node:hover .tl-node-dot { transform: none !important; }
      .tl-node:hover .tl-node-card { transform: none !important; box-shadow: 0 2px 10px rgba(0,0,0,.07) !important; }
      .team-member:hover img { transform: none !important; filter: grayscale(30%); }
      .team-member:hover .team-bio { max-height: 0; }
      .mvf-cell:hover { background: rgba(255,255,255,.04); }
      .val-cell:hover { background: var(--white); }
    }