/* ===========================================================================
   About — page-specific styles.
   Loaded AFTER tokens.css and shell.css, so scoped overrides here win on
   source order. Shared shell (nav, footer, buttons, .frame, .cm-h, .sec-label)
   belongs in shell.css, not here.
   =========================================================================== */
/* =======================================================================
   About — Figma 720:9321. Page-specific layout only; nav, buttons, .frame,
   .cat-eyebrow, footer and the on-light treatment all come from shell.css.
   ======================================================================= */

/* ---- Hero · light gradient -------------------------------------------
   The light rect in Figma is 1129 tall, but the dark backdrop starts at
   787 and covers the rest of it, so 788 is the height that actually shows. */
/* The hero is PINNED, not scrolled: sticky holds it at the top of the
   viewport while the dark "What we believe" panel rides up over it and
   covers the text. That is the whole transition — no JS, no scroll
   listener, so it can never desync from the scroll position.
   Requires that no ancestor has overflow:hidden, or sticky silently dies. */
.ab-hero{position:sticky;top:0;z-index:0;height:76vh;min-height:620px;box-sizing:border-box;
  background:linear-gradient(162.65deg,var(--soft) 11.86%,var(--panel) 47.54%,var(--surface) 71.71%),var(--surface)}
/* the lights-off veil: ab-arrive.js walks its colour down the brand ramp and raises its
   opacity as the dark panel climbs, so the panel's edge always crosses an already-dark room —
   no hard lavender-to-black seam (Victoria, 2026-08-14). Static (opacity 0) without JS. */
.ab-hero-dim{position:absolute;inset:0;pointer-events:none;opacity:0}
.ab-hero-in{position:relative;height:100%;max-width:880px;margin:0 auto;text-align:center;padding:168px 24px 0;box-sizing:border-box}
.ab-h1{margin:0;
  font-family:var(--display);font-weight:500;font-size:clamp(40px,7vw,68px);line-height:1.05;color:var(--ink)}   /* IDENTICAL to .uc-hero-inner h1 / the hiw+results heroes (Victoria, 2026-08-14: one hero system) */
.ab-h1 .accent{color:var(--action)}   /* same accent as .uc-hero-inner h1 .accent and .pf-h1 span */
.ab-mission{margin:24px auto 0;max-width:640px;
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:24px;color:var(--ink)}   /* same block as .uc-sub — including INK, not deep (Victoria caught the colour, 2026-08-14) */

/* ---- What we believe · dark backdrop ---------------------------------
   One flattened image: in Figma it is a generated render plus two large
   blurred ellipses, and its bottom 10% fades out to the page colour. */
/* Everything below the hero scrolls as ONE opaque sheet. It has to be opaque:
   a sticky element stays pinned for the whole height of its containing block,
   so the hero sits behind the entire page, and the Tony card is a translucent
   blur panel that would have let it show straight through. */
.ab-over{position:relative;z-index:1;background:var(--surface);border-radius:24px 24px 0 0}   /* rounded to MATCH .ab-believe's top corners (2026-08-14): the sheet's light background was peeking through the panel's corner notches; now the notch is transparent and shows the dimmed hero behind */

.ab-believe{position:relative;z-index:1;min-height:1422px;box-sizing:border-box;   /* +128 total (2026-08-14, two rounds): the longer believe copy needed real air before the Tony card; growing the panel moves the card down while keeping its straddle point on the panel edge */
  border-radius:24px 24px 0 0;overflow:hidden;
  background:radial-gradient(ellipse 92.7% 36.9% at 67% 46.3%,
    var(--deep) 3.9%, #19306C 57.7%, #010510 100%) var(--void)}   /* matched to .hiw-lower's backdrop (Victoria, 2026-08-14) so the two dark panels read as one system */
.ab-believe-in{position:relative;display:flex;align-items:flex-start;padding-top:130px}
.ab-believe-label{flex:0 0 692px}   /* type + square come from .sec-label in shell.css */
.ab-believe-body{flex:1 1 0;min-width:0;box-sizing:border-box;padding:0 24px 0 36px;
  display:flex;flex-direction:column;gap:29px}
.ab-believe-body h2{margin:0;font-family:var(--display);font-weight:500;font-size:40px;line-height:44px;color:var(--white)}
.ab-believe-body p{margin:0;font-family:var(--sans);font-weight:300;font-size:16px;line-height:24px;color:var(--panel)}
.ab-believe-body strong{font-weight:600}
/* text link, underlined ALWAYS per the link rule (same treatment as .cap-source-more on the
   homepage); white on the dark panel, arrow marks it external */
.ab-believe-link{align-self:flex-start;font-family:var(--sans);font-weight:400;font-size:16px;line-height:24px;
  color:var(--panel);text-decoration:underline;text-underline-offset:3px}   /* panel, matching the believe body copy (Victoria, 2026-08-14) */
.ab-believe-link:hover{color:var(--white)}

/* ---- Tony ------------------------------------------------------------
   Straddles the dark backdrop and the light page below it, so it is pulled
   up out of normal flow rather than sitting after the dark section. */
.ab-tony{position:relative;z-index:2;margin-top:-650px}
.ab-tony-card{border:1px solid var(--soft);border-bottom:0;border-radius:var(--radius-md) var(--radius-md) 0 0;padding:24px 24px 8px}   /* fused with the operator box below (Victoria, 2026-08-14): no gap, no horizontal rule at the joint — one unit */
.ab-tony-shot{position:relative;border-radius:var(--radius-sm);overflow:hidden}
.ab-tony-shot img{display:block;width:100%;height:auto}
/* Repositioned per Figma 720-9397 (2026-08-14): the quote sits on the RIGHT of the frame,
   36/42 over the dark conference room (the old bottom-left placement crossed Tony's white
   shirt in the new photo), with the name directly below it. Positions are px on the 1360
   logical frame, same convention as before. */
/* PROPORTIONAL overlay (2026-08-14): the old px coordinates assumed the full 1360-wide card
   and shoved the quote off the edge the moment the card shrank (Victoria's tablet screenshot).
   Percentages of the Figma geometry (825/1360, 270/741, 499/1360) track the image at any size,
   and the type scales with the card via clamp (36px at full width). */
.ab-tony-quote{position:absolute;left:60.7%;top:36.4%;width:36.7%;margin:0;
  font-family:var(--sans);font-weight:300;font-size:clamp(20px,2.65vw,36px);line-height:1.17;color:var(--white)}
.ab-tony-who{position:absolute;left:62.1%;top:66.8%;width:auto;text-align:left;
  font-family:var(--sans);font-weight:400;font-size:14px;line-height:22px;color:var(--white)}
.ab-tony-who b{display:block;font-weight:600}
/* the canvas-blue citation bar before the name (Figma 943-18589: 2x59 at the quote's left edge) */
.ab-tony-who::before{content:"";position:absolute;left:-18px;top:-4px;width:2px;height:59px;background:var(--canvas)}

/* backed-by strip, inside the same card under the photo */
.ab-backers{display:flex;align-items:center;justify-content:center;gap:108px;padding:26px 0 12px;flex-wrap:wrap}
/* desktop keeps the plain centred row: the track is a static flex line and the duplicate set,
   which only exists so the mobile loop can translate -50%, is not rendered. */
.ab-backers-track{display:flex;align-items:center;gap:108px}
.ab-backers-track .ab-dup{display:none}
.ab-backers .lbl{font-family:var(--sans);font-weight:500;font-size:12px;line-height:28px;
  letter-spacing:2px;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.ab-backers img{display:block}

/* ---- Built by an operator · centred ---------------------------------- */
.ab-operator{padding:0}
/* two bordered columns (2026-08-14): same 1px var(--soft) border as .ab-tony-card above,
   sharing the centre line. Headline centres in the left box; bio centres in the right. */
.ab-operator-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--soft);border-radius:0 0 var(--radius-md) var(--radius-md)}   /* continues the Tony card's frame; its top edge is the line under the logos, and the column divider splits it inside */
.ab-operator-title{display:flex;align-items:center;padding:48px 104px}   /* 96 -> 48 vertical: the boxes towered over their content (Victoria, 2026-08-14) */
.ab-operator-title h2{margin:0;
  font-family:var(--display);font-weight:500;font-size:40px;line-height:44px;color:var(--ink)}
.ab-operator-body{border-left:1px solid var(--soft);padding:48px 104px;
  display:flex;flex-direction:column;justify-content:center;gap:24px}
.ab-operator-body p{margin:0;
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:24px;color:var(--deep)}
.ab-operator-body strong{font-weight:600}
@media (max-width:900px){
  .ab-operator-grid{grid-template-columns:1fr}
  .ab-operator-title{padding:48px 32px}
  .ab-operator-body{border-left:0;border-top:1px solid var(--soft);padding:48px 32px}
}

/* ---- In the press & on air -------------------------------------------
   A horizontal rail: in Figma the third card runs off the right edge of
   the artboard, which is the design telling you it scrolls. The rail is
   full-bleed so cards can leave the frame, with the frame's own left inset
   re-applied as scroll padding so card 1 still lines up with everything
   above it. */
.ab-press{padding:200px 0 120px}   /* 120 -> 200 top (multiple of 8): more air after the fused operator unit (Victoria, 2026-08-14) */
/* the ticker: full-bleed, soft-masked edges (same fade as the backers marquee), spans carry
   their own trailing gap so the two track halves are IDENTICAL — that is what makes the -50%
   translate loop seamless. Right-to-left, with the reading direction. Reduced motion: it just sits still. */
.ab-press-ticker{overflow:hidden;margin:0 0 48px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%)}
.ab-press-track{display:flex;width:max-content;animation:abPressTicker 80s linear infinite}
.ab-press-track span{padding-right:160px;white-space:nowrap;
  font-family:var(--display);font-weight:500;font-size:40px;line-height:44px;color:var(--ink)}
/* the ON-AIR dot: a pulsing "recording" indicator ahead of each pass of the title (Victoria,
   2026-08-14). Action blue, not broadcast red — red is off the palette; blue still reads
   as "live". The heartbeat is a soft two-beat fade-and-shrink. */
.ab-press-track span::before{content:"";display:inline-block;width:14px;height:14px;border-radius:50%;
  background:var(--action);margin-right:24px;vertical-align:4px;
  animation:abRecPulse 1.6s ease-in-out infinite}
@keyframes abRecPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
@media (prefers-reduced-motion:reduce){ .ab-press-track span::before{animation:none} }
@keyframes abPressTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}   /* right-to-left, reading direction (Victoria reversed the call after seeing it, 2026-08-14) */
@media (prefers-reduced-motion:reduce){ .ab-press-track{animation:none} }
.ab-rail{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:0 max(24px,calc((100vw - 1360px) / 2));scrollbar-width:none;
  /* scroll-padding is the REAL alignment fix (2026-08-13): with mandatory snap and no
     scroll-padding, the first card snapped to the scrollport edge — the viewport — ignoring
     the visual padding above. Snap points now sit on the frame line; scrolled content still
     slides through the padding zone to the true edge. */
  scroll-padding-left:max(24px,calc((100vw - 1360px) / 2))}
.ab-rail::-webkit-scrollbar{display:none}
.ab-card{flex:0 0 668px;width:668px;height:446px;box-sizing:border-box;position:relative;
  border-radius:var(--radius-md);overflow:hidden;scroll-snap-align:start;background:var(--white)}
.ab-card img{display:block;width:100%;height:100%;object-fit:cover}
.ab-card > a{display:block;width:100%;height:100%}   /* the whole card is the link target */

/* percentages, not the raw Figma px: these sit on top of a card that resizes,
   and 126px/186px would drift off the artwork the moment the card is not 668 wide. */
.ab-card-pod .ab-pod-txt{position:absolute;left:18.26%;top:38.4%;width:65.87%;margin:0;text-align:center;
  font-family:var(--display);font-weight:500;font-size:40px;line-height:44px;color:var(--white);pointer-events:none}   /* 40/44 = the site pairing; Figma says 48 */
.ab-play{position:absolute;right:22px;bottom:17px;width:58px;height:58px;border:0;padding:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.86);transition:opacity .25s ease, transform .35s cubic-bezier(.34,1.28,.64,1)}
.ab-play svg{width:20px;height:20px;fill:var(--ink);margin-left:3px}
/* the play button only appears on hover, so the still reads as an image until you reach for it.
   :focus-within keeps it reachable by keyboard, and a coarse pointer has no hover at all — on
   touch it stays visible, otherwise it would be invisible and untappable. */
.ab-pod-link:hover .ab-play,
.ab-pod-link:focus-visible .ab-play,
.ab-card-pod:focus-within .ab-play{opacity:1;transform:scale(1)}
@media (hover:none){ .ab-play{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce){ .ab-play{transition:none} }
.ab-play:hover{background:var(--white)}

@media (max-width:1200px){
  /* the hero is absolutely composed at 1512; below that it becomes ordinary flow */
  .ab-hero{position:relative;height:auto;padding:0 0 120px}   /* no pin once the hero is auto-height; top spacing comes from .ab-hero-in's 168, SAME as the sibling heroes (the old 180 here stacked on top of it and sank the title — Victoria, 2026-08-14) */
  .ab-hero-in{height:auto}
  .ab-believe{min-height:0;padding:0 0 276px}   /* 276 - the 212 pull = a 64px gap under the copy */
  .ab-believe-in{flex-direction:column;gap:48px;padding-top:96px}
  .ab-believe-label{flex:none}
  .ab-believe-body{padding:0}
  .ab-tony{position:relative;z-index:2;margin-top:-212px}   /* panel edge lands on the image midpoint: 17px offset + half of its 389px portrait height */
  /* phones: the label sits on its own line and the logos run as a marquee under it, right to
     left. The track holds two identical sets so a -50% translate loops with no seam; the mask
     fades both ends so logos do not pop in and out at the edges. */
  .ab-backers{flex-direction:column;align-items:flex-start;gap:24px;padding:26px 0 12px}
  .ab-backers-marquee{width:100%;overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%)}
  .ab-backers-track{width:max-content;gap:56px;animation:abBackersSlide 22s linear infinite}
  .ab-backers-track .ab-dup{display:block}
  @keyframes abBackersSlide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  @media (prefers-reduced-motion:reduce){ .ab-backers-track{animation:none} }
}
@media (max-width:900px){
  .ab-hero{padding:0 0 96px}
  .ab-believe-body h2,.ab-operator h2,.ab-press-track span{font-size:28px;line-height:36px}
  /* the quote and credit are burned onto the photo at desktop; on a small
     photo they would cover the face, so they drop underneath it */
  .ab-tony-shot{overflow:visible}
  .ab-tony-shot img{aspect-ratio:4 / 5;height:auto;object-fit:cover;object-position:20% 30%;
    border-radius:var(--radius-sm)}   /* 20% x (nudged from 28): centres Tony in the phone crop — he stands left-of-frame in the new photo */
  .ab-tony-quote,.ab-tony-who{position:static;width:auto;color:var(--deep);text-align:left}
  .ab-tony-quote{margin-top:24px;font-size:24px;line-height:32px}   /* the 36px desktop size read as a wall of text on phones */
  .ab-tony-who::before{content:none}   /* the citation bar anchors to the card once the name leaves the photo — off on phones */
  .ab-tony-who{margin-top:12px}
  .ab-tony-card{padding:16px 16px 8px}
  .ab-operator{padding-top:0}
  .ab-press{padding:96px 0}
  .ab-press h2{margin-bottom:48px}
  .ab-card{flex-basis:86vw;width:86vw;height:auto;aspect-ratio:668 / 446}
      .ab-card-pod .ab-pod-txt{font-size:24px;line-height:30px}
  .ab-play{width:48px;height:48px;right:12px;bottom:12px}
}

/* entrance cascade (2026-08-13, Victoria): everything after the panel arrival uses the
   site-standard reveal (shell.css .reveal + reveal.js). Delays stagger blocks that share
   a viewport so each section reads label -> content, photo -> logos. */
.ab-believe-body.reveal{transition-delay:.15s}
.ab-backers.reveal{transition-delay:.15s}

.ab-rail.reveal{transition-delay:.15s}

/* Tony's quote types itself (ab-quote-type.js): same char blur-sharpen as the closer headline.
   .quote-anim is armed by the script, so with no JS the quote just renders. */
.quote-anim .ab-tony-quote .w{white-space:nowrap}
.quote-anim .ab-tony-quote .c{opacity:0;filter:blur(10px);transition:opacity .3s ease, filter .35s ease}
.quote-anim .ab-tony-quote .c.on{opacity:1;filter:blur(0)}
.quote-anim .ab-tony-who{opacity:0;transform:translateY(-12px);transition:opacity .5s ease, transform .6s cubic-bezier(.22,.61,.36,1)}
.quote-anim .ab-tony-who.on{opacity:1;transform:none}