/* =====================================================================
   About page. Builds on style.css. Mobile first.
   One centred column (--ab-w) shared by every block; one corner radius,
   one shadow, one section gap, and two text sizes (lead and body).
   ===================================================================== */
.page-about{
  --bgc:#f3f2ed;
  --ab-w:820px;
  --ab-r:22px;
  --ab-gap:72px;
  --ab-shadow:0 34px 70px -42px rgba(2,0,60,.5);
  --ab-h:clamp(1.55rem,6.4vw,2.6rem);   /* section headline */
  --ab-lead:clamp(1rem,3.9vw,1.15rem);  /* lead text */
  --ab-body:.98rem;                     /* body text */
}
@media (min-width:760px){.page-about{--ab-r:28px;--ab-gap:112px}}

.page-about main{background:var(--paper);color:var(--blue);--g:var(--paper);--i:var(--blue);--mute:#4744c8;--faint:#cdccec;--line:#d2d1e6;--raise:#fbfaf7}
.page-about .nav-in{animation:fade 1.2s .2s var(--ease) both}
.ab-sec>*{max-width:var(--ab-w);margin-inline:auto}
.ab-sec+.ab-sec{padding-top:var(--ab-gap)}
.ab-crew{padding-bottom:var(--ab-gap)}

/* section heading */
.ab-head{display:flex;flex-direction:column;gap:12px;margin-bottom:24px}
.ab-head h2{font-size:var(--ab-h);line-height:1.02}

/* ---------- intro: video card with the headline on it ---------- */
.ab-intro{padding-top:96px}
.ab-reel{position:relative;aspect-ratio:4/5;border-radius:var(--ab-r);overflow:hidden;background:#000;box-shadow:var(--ab-shadow);animation:fade 1.3s .1s var(--ease) both}
.ab-reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.ab-reel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1) 15%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.85))}
.ab-reel-copy{position:absolute;inset:auto 0 0;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:0 20px 32px;color:var(--paper)}
.ab-reel-copy h1{font-size:var(--ab-h);line-height:1.02;text-wrap:balance}
.ab-reel-copy h1 span{display:block;overflow:hidden;padding-block:.12em .06em;margin-block:-.12em 0}
.ab-reel-copy h1 span>b{display:block;font-weight:inherit;animation:up 1.2s var(--ease) both;animation-delay:.25s}
.ab-reel-copy h1 span:nth-child(2)>b{animation-delay:.34s}
.ab-reel-copy p{max-width:34ch;font-size:var(--ab-lead);line-height:1.45;color:rgba(243,242,237,.82);animation:fade 1.2s .55s var(--ease) both}

/* facts */
.ab-facts{list-style:none;padding:0;margin-top:28px!important;display:grid;grid-template-columns:minmax(0,1fr)}
.ab-facts li{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"ic h" "ic p";column-gap:14px;row-gap:2px;align-items:center;padding:16px 4px;border-top:1px solid var(--line)}
.ab-facts li:last-child{border-bottom:1px solid var(--line)}
.ab-facts svg{grid-area:ic;width:44px;height:44px;padding:11px;border-radius:50%;background:rgba(4,0,221,.07);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ab-facts h2{grid-area:h;margin:0;font-family:var(--wide);font-stretch:110%;font-weight:760;font-size:1.1rem;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
.ab-facts p{grid-area:p;color:var(--mute);font-size:var(--ab-body);line-height:1.4}
@media (min-width:760px){
  .ab-intro{padding-top:132px}
  .ab-reel{aspect-ratio:16/11}
  .ab-reel-copy{padding:0 48px 52px;gap:18px}
  .ab-facts{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px!important}
  .ab-facts li{grid-template-columns:minmax(0,1fr);grid-template-areas:"ic" "h" "p";justify-items:center;text-align:center;row-gap:10px;padding:4px 24px;border:0}
  .ab-facts li:last-child{border-bottom:0}
  .ab-facts li+li{border-left:1px solid var(--line)}
  .ab-facts h2{font-size:1.2rem}
  .ab-facts p{max-width:22ch}
}

/* ---------- mission note ---------- */
.ab-note{background:var(--blue);color:var(--paper);border-radius:var(--ab-r);box-shadow:var(--ab-shadow);text-align:center;
  padding:40px 22px;display:flex;flex-direction:column;align-items:center;gap:18px}
.ab-note-label{color:rgba(243,242,237,.72);padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(243,242,237,.28)}
.ab-note-head{font-size:var(--ab-h);line-height:1.04;max-width:20ch;text-wrap:balance}
.ab-note-body{max-width:46ch;font-size:var(--ab-lead);line-height:1.6;color:rgba(243,242,237,.8);text-wrap:pretty}
.ab-note-sign{margin-top:4px;font-family:var(--serif);font-style:italic;font-size:1.2rem;color:rgba(243,242,237,.72)}
@media (min-width:760px){.ab-note{padding:72px 72px 64px;gap:22px}.ab-note-sign{font-size:1.35rem}}

/* video owns the first screen; the facts start below the fold */
.ab-intro{padding-top:0}
.ab-stage{min-height:100svh;display:grid;place-items:center;padding:84px 0 28px}
.ab-reel{width:min(100%, calc((100svh - 128px) * .8))}
@media (min-width:760px){.ab-stage{padding:100px 0 40px}.ab-reel{width:min(100%, calc((100svh - 156px) * 16 / 11))}}
.ab-facts{margin-top:clamp(40px,6vw,72px)!important}


@media (prefers-reduced-motion:reduce){.ab-reel video{transform:none}}


/* crew photos run to the card's edges and fade into it */
.ab-member{padding:0 0 20px;overflow:hidden}
.ab-face{border-radius:0;aspect-ratio:1/1.05;filter:saturate(.8) contrast(.98);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.35) 80%,transparent);mask-image:linear-gradient(180deg,#000 55%,rgba(0,0,0,.35) 80%,transparent)}
.ab-member-text{margin-top:-56px;position:relative;padding:0 20px}
.ab-links{padding:0 20px}
@media (min-width:760px){.ab-member{padding:0 0 24px}.ab-member-text,.ab-links{padding:0 24px}.ab-member-text{margin-top:-64px}}

/* =====================================================================
   crew: tall portrait cards in the same language as the video card.
   scroll  - each card is unveiled by a curtain rising from the bottom while the photo settles from a zoom
   hover   - the photo eases back, the dark wash deepens and the bio and links slide up under the name
   phones  - bio and links are always shown
   ===================================================================== */
.ab-crew-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.cw{--v:1;position:relative;display:flex;flex-direction:column;padding:8px;border-radius:var(--ab-r);background:rgba(255,255,255,.55);color:#0b0b18;outline-offset:4px;
  opacity:clamp(0,calc(var(--v) * 2),1);transform:perspective(1100px) translateY(calc((1 - var(--v)) * 70px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  clip-path:inset(calc((1 - var(--v)) * 22%) 0 0 0 round var(--ab-r));transition:background .6s var(--ease)}
.cw-head,.cw-bio{opacity:clamp(0,calc((var(--v) - .45) * 2.4),1);transform:translateY(calc(clamp(0,1 - (var(--v) - .45) * 2.2,1) * 22px))}
.cw-bio{opacity:clamp(0,calc((var(--v) - .6) * 2.6),1);transform:translateY(calc(clamp(0,1 - (var(--v) - .6) * 2.5,1) * 22px))}
.cw-banner{position:relative;height:auto;aspect-ratio:1/1;border-radius:calc(var(--ab-r) - 6px);overflow:hidden}
.cw-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:saturate(.9);
    transform:scale(calc(1.02 + (1 - var(--v)) * .18));transform-origin:50% 30%;transition:transform 1.4s var(--ease),filter 1s var(--ease)}
.cw:first-child .cw-photo{object-position:50% 8%}
.cw-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 18px;margin-top:20px;position:relative;z-index:2}
.cw-name{font-family:var(--wide);font-weight:800;font-size:1.6rem;line-height:1;letter-spacing:-.03em;text-transform:lowercase;margin:0;white-space:nowrap}
.cw-role{margin-top:9px;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);white-space:nowrap}
.cw-links{display:flex;gap:2px;flex:none}
.cw-links a{width:34px;height:34px;display:grid;place-items:center;color:var(--blue);opacity:.55;transition:opacity .35s,transform .5s var(--ease)}
.cw-links svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cw-links a:hover{opacity:1;transform:translateY(-2px)}
.cw-bio{position:relative;z-index:2;padding:16px 18px 22px;font-family:var(--wide);font-weight:700;font-size:1.02rem;line-height:1.55;letter-spacing:-.01em;color:#4a4966}
@media (min-width:640px){.ab-crew-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:760px){.ab-head{margin-bottom:32px}.ab-crew-grid{gap:20px}.cw-banner{aspect-ratio:6/5}.cw-head{padding:0 22px}.cw-bio{padding:18px 22px 26px}}
@media (hover:hover){
  .cw-banner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .6s var(--ease);
    background:radial-gradient(420px circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.32),rgba(255,255,255,0) 60%)}
  .cw-photo{translate:var(--px,0px) var(--py,0px)}
  .cw:hover{background:rgba(255,255,255,.82)}
  .cw:hover .cw-banner::after{opacity:1}
  .cw:hover .cw-photo{transform:scale(1.07)}
  .cw-links a{transition:opacity .35s,transform .6s var(--ease)}
  .cw:hover .cw-links a{opacity:.9;transform:translateY(-3px)}
  .cw:hover .cw-links a:nth-child(2){transition-delay:.05s}.cw:hover .cw-links a:nth-child(3){transition-delay:.1s}
}
.ab-join{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:16px!important;padding:12px 12px 12px 26px;border-radius:999px;background:rgba(255,255,255,.55);color:#0b0b18;font-size:var(--ab-lead);letter-spacing:-.01em;transition:background .6s var(--ease),color .6s var(--ease)}
.ab-join span{min-width:0}
.ab-join b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.2em;color:var(--blue);transition:color .6s var(--ease)}
.ab-join i{flex:none;width:48px;height:48px;border-radius:50%;background:var(--blue);color:var(--paper);display:grid;place-items:center;font-style:normal;font-size:1.1rem;line-height:1;transition:transform .7s var(--ease),background .6s var(--ease),color .6s var(--ease)}
@media (hover:hover){.ab-join:hover{background:var(--blue);color:var(--paper)}.ab-join:hover b{color:var(--paper)}.ab-join:hover i{background:var(--paper);color:var(--blue);transform:rotate(45deg)}}
@media (min-width:760px){.ab-join{margin-top:20px!important;padding:14px 14px 14px 30px}.ab-join i{width:54px;height:54px}}
@media (prefers-reduced-motion:reduce){.cw{opacity:1;transform:none;clip-path:none}.cw-head,.cw-bio{opacity:1;transform:none}}

@media (max-width:639px){.cw-name{font-size:1.4rem}}