/* ============================================================
   TRIBECA LISBOA — ABOUT (responsive editorial)
   Reuses --gut/--maxw/.r-wrap/.r-band/header/footer (responsive.css).
   Cinematic pacing: alternating black / indigo / white bands,
   Druk display, restrained imagery, one big visual moment per beat.
   ============================================================ */
.ab{ position:relative; background:#000; color:#fff; font-family:var(--font-text); -webkit-font-smoothing:antialiased; }
.ab img, .ab video{ display:block; }

/* reveal */
.ab-rev{ opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.ab-rev.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .ab-rev{ opacity:1; transform:none; transition:none; } }

/* shared editorial bits */
.ab-eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.ab-eyebrow .n{ font-family:var(--font-text); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.ab-eyebrow .ln{ height:1px; width:40px; background:currentColor; opacity:.5; }
.ab-h{ margin:0; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(40px,5.6vw,86px); line-height:.92; letter-spacing:-.01em; text-wrap:balance; }
.ab-sub{ margin:18px 0 0; font-family:var(--font-text); font-weight:700; font-size:clamp(20px,2.3vw,26px); line-height:1.2; }
.ab-body{ margin:20px 0 0; font-family:var(--font-text); font-weight:400; font-size:18px; line-height:1.6; max-width:54ch; }
@media (min-width:1024px){ .ab-body{ font-size:19px; line-height:1.7; } }

/* ===================== HERO (video) ===================== */
.ab-hero{ position:relative; min-height:100svh; overflow:hidden; background:#111; display:flex; }
.ab-hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ab-hero-scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 30%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.85) 90%, #000 100%); }
.ab-hero-in{ position:relative; align-self:flex-end; width:100%; padding-bottom:56px; }
.ab-hero-eyebrow{ color:var(--pink); }
.ab-hero h1{ margin:0; color:#fff; font-family:var(--font-display-cond); font-weight:900; text-transform:uppercase;
  font-size:clamp(52px,9vw,140px); line-height:.84; letter-spacing:.005em; max-width:18ch; }
.ab-hero .ab-hero-sub{ margin:16px 0 0; font-family:var(--font-text); font-weight:700; font-size:clamp(20px,2.6vw,30px); color:#fff; }
.ab-hero .ab-hero-intro{ margin:22px 0 0; font-family:var(--font-text); font-size:clamp(16px,1.5vw,19px); line-height:1.6; color:rgba(255,255,255,.86); max-width:60ch; }
.ab-scrollcue{ position:absolute; left:0; bottom:22px; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.7);
  font-family:var(--font-text); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.ab-scrollcue .bar{ width:34px; height:1px; background:rgba(255,255,255,.6); position:relative; overflow:hidden; }
.ab-scrollcue .bar::after{ content:''; position:absolute; inset:0; background:#fff; transform:translateX(-100%); animation:abcue 1.8s ease-in-out infinite; }
@keyframes abcue{ 50%{ transform:translateX(0);} 100%{ transform:translateX(100%);} }

/* ===================== SPLIT (text + image) ===================== */
.ab-band{ padding-top:var(--band-y); padding-bottom:var(--band-y); }
.ab-split{ display:flex; flex-direction:column; gap:32px; }
.ab-split-media{ width:100%; aspect-ratio:4/3; overflow:hidden; background:#222; }
.ab-split-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.16,1,.3,1); }
.ab-split:hover .ab-split-media img{ transform:scale(1.04); }
@media (min-width:900px){
  .ab-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .ab-split.reverse .ab-split-text{ order:2; }
  .ab-split-media{ aspect-ratio:3/4; max-height:78vh; }
}
@media (min-width:1280px){ .ab-split{ gap:80px; } }

/* ===================== 25 YEARS (indigo statement) ===================== */
.ab-years{ position:relative; overflow:hidden; }
.ab-years .big{ font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(140px,34vw,460px); line-height:.8; letter-spacing:-.02em; color:#fff;
  display:flex; align-items:baseline; gap:.04em; }
.ab-years .big .u{ font-size:.16em; font-weight:800; letter-spacing:.02em; align-self:flex-start; margin-top:.5em; }
.ab-years-grid{ display:grid; gap:32px; margin-top:8px; }
@media (min-width:900px){ .ab-years-grid{ grid-template-columns:1.1fr 1fr; align-items:end; gap:56px; } }

/* ===================== IMPACT (visual stats) ===================== */
.ab-impact{ position:relative; }
.ab-stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-dark); border:1px solid var(--line-dark); margin-top:8px; }
@media (min-width:760px){ .ab-stats{ grid-template-columns:repeat(4,1fr); } }
.ab-stat{ background:#000; padding:28px 20px; }
.ab-stat .v{ font-family:var(--font-display); font-weight:800; font-size:clamp(40px,5vw,64px); line-height:.9; letter-spacing:-.01em; }
.ab-stat .k{ margin-top:12px; font-family:var(--font-text); font-weight:700; font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-3); }
.ab-callouts{ display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.ab-chip{ border:1px solid rgba(255,255,255,.28); padding:10px 16px; font-family:var(--font-text); font-weight:700;
  font-size:14px; text-transform:uppercase; letter-spacing:.03em; color:#fff; }
.ab-impact-media{ width:100%; aspect-ratio:21/9; overflow:hidden; background:#222; margin-top:40px; }
.ab-impact-media img{ width:100%; height:100%; object-fit:cover; }

/* ===================== BRIDGE MOMENT (NY ↔ Lisbon) ===================== */
.ab-bridge{ display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:760px){ .ab-bridge{ grid-template-columns:1fr 1fr; } }
.ab-bridge figure{ position:relative; margin:0; aspect-ratio:3/4; overflow:hidden; background:#222; }
.ab-bridge img{ width:100%; height:100%; object-fit:cover; }
.ab-bridge figcaption{ position:absolute; left:0; bottom:0; padding:18px 20px; font-family:var(--font-display);
  font-weight:800; text-transform:uppercase; font-size:clamp(22px,3vw,40px); line-height:.95; color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.6); }
.ab-bridge .tag{ display:block; font-family:var(--font-text); font-weight:700; font-size:12px; letter-spacing:.12em; opacity:.85; margin-bottom:8px; }
.ab-bridge-grad{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.78)); }

/* ===================== CLOSING MANIFESTO ===================== */
.ab-close{ position:relative; overflow:hidden; }
.ab-close-media{ position:absolute; inset:0; }
.ab-close-media img{ width:100%; height:100%; object-fit:cover; }
.ab-close-scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.55) 50%, rgba(0,0,0,.85)); }
.ab-close-in{ position:relative; padding-top:var(--band-y); padding-bottom:var(--band-y); }
.ab-manifesto{ margin:0; font-family:var(--font-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(34px,5vw,76px); line-height:.96; letter-spacing:-.01em; text-wrap:balance; max-width:18ch; }
.ab-manifesto .hl{ color:var(--pink); }
.ab-tfl{ max-width:56ch; }
.ab-tfl .lab{ font-family:var(--font-text); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--pink); margin-bottom:14px; }