/* =====================================================================
   MVUKE TV, about.php
   Dark, cinematic: full-bleed hero with stats on its lower edge, a
   sticky-heading timeline, typographic belief rows, credits list.
===================================================================== */
body.about-page{background:#07040d;color:#fff;}
.about-page{--pad:clamp(20px,5vw,72px);}
.about-page h2{font-family:'Montserrat',sans-serif;font-weight:900;letter-spacing:-.045em;line-height:1.02;}

/* ============================ HERO ================================ */
.ab-hero{position:relative;overflow:hidden;min-height:clamp(560px,92svh,820px);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--mv-nav-h) + 40px) var(--pad) 0;background:#05040a;}
.ab-hero-bg{position:absolute;inset:0;}
.ab-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%;transform:scale(1.06);animation:mvAbSettle 2.6s var(--mv-ease) forwards;}
@keyframes mvAbSettle{to{transform:scale(1);}}
.ab-hero-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(7,4,13,.92) 0%,rgba(7,4,13,.62) 42%,rgba(7,4,13,.2) 100%),
  linear-gradient(0deg,#07040d 0%,rgba(7,4,13,.4) 34%,rgba(7,4,13,0) 60%),
  linear-gradient(180deg,rgba(7,4,13,.7) 0%,rgba(7,4,13,0) 20%);}
.ab-hero-copy{position:relative;z-index:1;max-width:760px;padding-bottom:clamp(36px,7vh,64px);}
.ab-hero-copy h1{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(2.8rem,8vw,7rem);line-height:.92;letter-spacing:-.055em;text-wrap:balance;text-shadow:0 6px 40px rgba(0,0,0,.5);}
.ab-hero-copy p{margin-top:20px;max-width:50ch;font-size:1.05rem;line-height:1.6;color:rgba(248,245,252,.82);}
.ab-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;}
.ab-hero-actions .btn{padding:14px 28px;font-size:.9rem;}

.ab-stats{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:22px 0 28px;border-top:1px solid rgba(255,255,255,.18);}
.ab-stats li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.ab-stats strong{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.04em;color:var(--mv-ember-400);}
.ab-stats span{font-size:.86rem;font-weight:600;color:rgba(248,245,252,.7);}

/* One orchestrated entrance for the hero copy. */
.ab-hero-copy>*{opacity:0;animation:mvAbIn .8s var(--mv-ease) forwards;}
.ab-hero-copy>*:nth-child(1){animation-delay:.1s;}
.ab-hero-copy>*:nth-child(2){animation-delay:.22s;}
.ab-hero-copy>*:nth-child(3){animation-delay:.34s;}
@keyframes mvAbIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}

/* ============================ STORY =============================== */
.ab-story{display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:clamp(32px,6vw,96px);padding:clamp(72px,12vh,130px) var(--pad);max-width:1480px;margin:0 auto;}
.ab-story-lead{position:sticky;top:calc(var(--mv-nav-h) + 32px);align-self:start;}
.ab-story-lead h2{font-size:clamp(2rem,4.4vw,3.6rem);text-wrap:balance;}
.ab-story-lead p{margin-top:16px;max-width:30ch;font-size:1rem;line-height:1.6;color:rgba(248,245,252,.65);}

.ab-church-link{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:.95rem;font-weight:800;color:#fff;border-bottom:2px solid var(--mv-ember-500);padding-bottom:3px;transition:color .25s var(--mv-ease);}
.ab-church-link svg{width:16px;height:16px;transition:transform .3s var(--mv-ease);}
.ab-church-link:hover{color:var(--mv-ember-400);}
.ab-church-link:hover svg{transform:translate(2px,-2px);}

.ab-timeline{display:flex;flex-direction:column;}
.ab-timeline li{display:grid;grid-template-columns:clamp(90px,12vw,150px) 1fr;gap:20px;padding:34px 0;border-top:1px solid rgba(255,255,255,.14);}
.ab-timeline li:last-child{border-bottom:1px solid rgba(255,255,255,.14);}
.ab-year{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.04em;color:var(--mv-ember-400);line-height:1;}
.ab-timeline h3{font-size:1.25rem;font-weight:800;line-height:1.25;margin-bottom:10px;}
.ab-timeline p{max-width:58ch;font-size:.95rem;line-height:1.65;color:rgba(248,245,252,.72);}

/* ============================ MOMENTS: expanding strip ============ */
.ab-moments{padding:clamp(24px,5vh,56px) var(--pad) clamp(40px,8vh,90px);max-width:1480px;margin:0 auto;}
.ab-moments>h2,.ab-ways>h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-bottom:30px;}
.ab-slats{display:flex;gap:10px;height:clamp(380px,60vh,560px);}
.slat{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--mv-radius-md);background:#151120;color:#fff;text-align:left;transition:flex-grow .7s var(--mv-ease);}
.slat.is-active{flex-grow:5;}
.slat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.9);transition:filter .6s var(--mv-ease),transform 1.2s var(--mv-ease);transform:scale(1.08);}
.slat.is-active img{filter:none;transform:scale(1);}
.slat::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,3,10,.85),rgba(5,3,10,0) 55%);pointer-events:none;}
.slat-cap{position:absolute;z-index:1;left:22px;bottom:20px;right:22px;font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(1.1rem,2.2vw,1.8rem);letter-spacing:-.04em;line-height:1.05;opacity:0;transform:translateY(10px);transition:opacity .4s var(--mv-ease),transform .5s var(--mv-ease);}
.slat.is-active .slat-cap{opacity:1;transform:none;transition-delay:.25s;}
.slat:focus-visible{outline:2px solid var(--mv-ember-400);outline-offset:3px;}

/* ============================ WAYS: list + following photo ======== */
.ab-ways{padding:clamp(24px,5vh,56px) var(--pad) clamp(40px,8vh,90px);max-width:1480px;margin:0 auto;}
.ab-ways-wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(28px,5vw,80px);align-items:center;}
.ab-way-row{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:center;padding:clamp(22px,3.4vw,34px) 0;border-top:1px solid rgba(255,255,255,.14);color:rgba(248,245,252,.55);transition:color .3s var(--mv-ease),padding-left .35s var(--mv-ease);}
.ab-ways-list li:last-child .ab-way-row{border-bottom:1px solid rgba(255,255,255,.14);}
.ab-way-row h3{grid-column:1;font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(1.6rem,3.4vw,2.8rem);letter-spacing:-.045em;line-height:1.04;color:inherit;}
.ab-way-row p{grid-column:1;max-width:44ch;font-size:.96rem;line-height:1.6;color:inherit;}
.ab-way-row svg{grid-column:2;grid-row:1 / 3;width:30px;height:30px;color:var(--mv-ember-400);opacity:0;transform:translateX(-10px);transition:opacity .3s var(--mv-ease),transform .35s var(--mv-ease);}
.ab-way-row.is-active{color:#fff;padding-left:clamp(0px,1.6vw,22px);}
.ab-way-row.is-active svg{opacity:1;transform:none;}
.ab-way-row:focus-visible{outline:2px solid var(--mv-ember-400);outline-offset:3px;}
.ab-ways-stage{position:relative;aspect-ratio:4/5;border-radius:var(--mv-radius-lg);overflow:hidden;background:#151120;box-shadow:0 40px 90px -30px rgba(0,0,0,.8);}
.ab-ways-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s var(--mv-ease),transform 1.2s var(--mv-ease);}
.ab-ways-stage img.is-active{opacity:1;transform:scale(1);}

/* ============================ BELIEFS ============================= */
.ab-beliefs{padding:clamp(40px,8vh,90px) var(--pad);max-width:1480px;margin:0 auto;}
.ab-beliefs>h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-bottom:34px;}
.ab-belief{display:grid;grid-template-columns:1.1fr 1fr;gap:24px 48px;align-items:center;padding:clamp(24px,4vw,40px) clamp(0px,1vw,16px);border-top:1px solid rgba(255,255,255,.14);transition:background .35s var(--mv-ease),padding-left .35s var(--mv-ease);}
.ab-belief:last-child{border-bottom:1px solid rgba(255,255,255,.14);}
.ab-belief h3{font-family:'Montserrat',sans-serif;font-weight:900;font-size:clamp(1.5rem,3.2vw,2.7rem);line-height:1.05;letter-spacing:-.045em;transition:color .3s var(--mv-ease);}
.ab-belief p{max-width:46ch;font-size:.98rem;line-height:1.65;color:rgba(248,245,252,.72);}
@media(hover:hover){
  .ab-belief:hover{background:linear-gradient(90deg,rgba(124,63,201,.22),transparent);padding-left:clamp(0px,2vw,28px);}
  .ab-belief:hover h3{color:var(--mv-ember-400);}
}

/* ============================ CREDITS ============================= */
.ab-credits{display:grid;grid-template-columns:minmax(260px,.8fr) 1.4fr;gap:clamp(32px,6vw,96px);padding:clamp(56px,10vh,110px) var(--pad);max-width:1480px;margin:0 auto;}
.ab-credits-lead h2{font-size:clamp(1.8rem,3.6vw,2.8rem);}
.ab-credits-lead p{margin-top:14px;max-width:30ch;color:rgba(248,245,252,.65);line-height:1.6;}
.ab-credit-list{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;align-content:start;margin:0;}
.ab-credit-list>div{padding:20px 0;border-top:1px solid rgba(255,255,255,.14);}
.ab-credit-list dt{font-size:.84rem;font-weight:700;color:var(--mv-violet-300);}
.ab-credit-list dd{margin:4px 0 0;font-size:1.12rem;font-weight:800;}

/* ============================ CLOSING BAND ======================== */
.ab-tune{padding:20px var(--pad) 80px;max-width:1480px;margin:0 auto;}
.ab-tune-panel{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:clamp(28px,5vw,56px);border-radius:var(--mv-radius-lg);background:radial-gradient(120% 160% at 0% 0%,var(--mv-violet-600),#12091f 70%);border:1px solid rgba(255,255,255,.1);}
.ab-tune-panel h2{font-size:clamp(1.6rem,3.2vw,2.3rem);max-width:20ch;}
.ab-tune-panel p{margin-top:12px;color:rgba(248,245,252,.75);font-size:.95rem;line-height:1.6;}
.ab-tune-actions{display:flex;flex-wrap:wrap;gap:12px;}

/* ============================ RESPONSIVE ========================== */
@media(max-width:900px){
  .ab-stats{grid-template-columns:1fr 1fr;row-gap:16px;}
  .ab-stats li{flex-direction:column;align-items:flex-start;gap:2px;}
  .ab-story,.ab-credits{grid-template-columns:1fr;}
  .ab-story-lead{position:static;}
  .ab-belief{grid-template-columns:1fr;gap:10px;}
}
@media(max-width:900px){
  .ab-ways-wrap{grid-template-columns:1fr;}
  .ab-ways-stage{display:none;}
  .ab-way-row{color:#fff;}
  .ab-way-row svg{opacity:1;transform:none;}
}
@media(max-width:760px){
  .ab-slats{flex-direction:column;height:auto;gap:8px;}
  .slat{flex:none;height:76px;transition:height .6s var(--mv-ease);}
  .slat.is-active{height:260px;}
  .ab-hero-bg img{object-position:center 25%;}
  .ab-hero-shade{background:
    linear-gradient(0deg,#07040d 0%,rgba(7,4,13,.9) 40%,rgba(7,4,13,.25) 75%,rgba(7,4,13,.55) 100%),
    linear-gradient(180deg,rgba(7,4,13,.7) 0%,rgba(7,4,13,0) 20%);}
  .ab-hero-copy p{font-size:.95rem;}
  .ab-hero-actions .btn{padding:12px 22px;font-size:.84rem;}
  .ab-timeline li{grid-template-columns:1fr;gap:8px;}
  .ab-credit-list{grid-template-columns:1fr;}
  .ab-tune{padding-bottom:56px;}
  .ab-tune-actions .btn{flex:1 1 auto;}
}
@media(prefers-reduced-motion:reduce){
  .ab-hero-bg img{animation:none;transform:none;}
  .ab-hero-copy>*{animation:none;opacity:1;}
  .ab-belief,.slat,.slat img,.slat-cap,.ab-way-row,.ab-ways-stage img{transition:none;}
}