/* /about-us/ */
.ab-logo{width:min(100%,300px);height:auto;margin:0 0 26px}
.ab-prose p{font-size:16.5px;line-height:1.7;color:var(--se-text-secondary);
  margin:0 0 18px;max-width:70ch}
/* Founder portraits (round-4 stakeholder edit): 500x500 webp from
   static.source-elements.com, floated into the prose at a fixed size so the
   bio wraps beside it on desktop and stacks above it on phones. */
.ab-founder-photo{width:132px;height:132px;border-radius:10px;object-fit:cover;
  float:left;margin:4px 18px 10px 0}
@media (max-width:700px){.ab-founder-photo{float:none;display:block;margin:0 0 12px}}
.ab-prose p:last-child{margin-bottom:0}
.ab-prose a{color:var(--accent)}
.ab-prose strong,.ab-prose b{color:var(--se-text-white);font-weight:600}
.panel-body.ab-prose p{font-size:15px}

/* Our Story claim cards — the "Claim" line quoted from the stakeholder
   copy, set apart from the "Copy" paragraph below it in the same card. */
.ab-claim{font-style:italic;font-weight:600;color:var(--se-text-white);
  margin:0 0 10px;line-height:1.4}
/* Since 2005 audience panels — the headline sentence inside panel-body,
   sized like a card title rather than run in with the prose below it. */
.ab-panel-h{margin:0 0 10px;font-size:16.5px;font-weight:700;line-height:1.35;
  color:var(--se-text-white)}

/* Anniversary timeline — CANDIDATE (gap-ledger item 6, Delight & Creation).
   Sits here because it sits there on the page: between the Our Story claim
   cards above and the Since 2005 panels below.

   Mobile-first, and that is the whole trick: the base rules are a plain
   vertical milestone list with a left rail, which is exactly what the spec
   asks a phone to show. The @media (min-width:768px) block below turns the
   SAME markup sideways into a scrubbable track. One DOM, two readings.

   Nothing in this block hides anything. The reveal/count states are the
   engine's, and every one of them is gated behind html.mo-armed in
   styles.css — so no-JS, phone and reduced-motion readers get all twelve
   milestones at full opacity, and this file never zeroes an opacity of its
   own to forget about. */
.ab-tl-track{position:relative;border-radius:var(--r-xl)}
.ab-tl-track:focus-visible{outline:2px solid var(--se-focus);outline-offset:6px}
.ab-tl{position:relative;list-style:none;margin:0;padding:0 0 0 26px;
  display:grid;gap:14px}
/* The rail: vertical on a phone, turned horizontal in the desktop block.
   Flat rather than a gradient, because on desktop it is drawn across the whole
   3.6k px scroll width and a gradient would have been a different colour at
   2005 than at 2025. */
.ab-tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;
  background:rgba(var(--se-border-teal-rgb),.38)}
.ab-tl-item{position:relative;min-width:0}
.ab-tl-item::before{content:"";position:absolute;left:-25px;top:20px;
  width:9px;height:9px;border-radius:50%;
  background:var(--se-bg);border:2px solid var(--accent)}
.ab-tl-card{display:flex;flex-direction:column;gap:5px;height:100%;
  padding:16px 18px;text-decoration:none;
  background:var(--se-inner);border:1px solid rgba(var(--se-border-teal-rgb),.16);
  border-radius:var(--r-xl);
  transition:background .2s ease,border-color .2s ease}
.ab-tl-card:hover,.ab-tl-card:focus-visible{background:var(--se-frame);
  border-color:rgba(var(--accent-rgb),.45)}
/* a year is number data — the one place the mono face is earned here */
.ab-tl-year{font-family:var(--font-mono);font-size:13px;font-weight:600;
  letter-spacing:.06em;color:var(--accent)}
.ab-tl-date{font-family:var(--font-secondary);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--se-text-caption)}
.ab-tl-title{margin-top:3px;font-size:16px;font-weight:700;line-height:1.35;
  color:var(--se-text-white)}
.ab-tl-note{font-size:13.5px;line-height:1.6;color:var(--se-text-secondary)}
/* An affordance note for a track that only scrolls sideways at >=768px.
   Hidden on a phone because there it would describe something that is not
   there — the list runs straight down. It is chrome, not content: every
   milestone is present and readable at both sizes. */
.ab-tl-hint{display:none}
/* The payoff: 2005 -> 2026. The count element's static text IS 2026, so a
   reader with no JS, on a phone, or with reduced motion sees the true year
   and never a zero. */
.ab-tl-payoff{margin:26px 0 0;padding:22px 24px;border-radius:var(--r-2xl);
  background:var(--se-inner);border:1px solid rgba(var(--accent-rgb),.22)}
.ab-tl-era{margin:0 0 10px;font-family:var(--font-secondary);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--se-text-caption)}
.ab-tl-figure{margin:0;display:flex;align-items:baseline;gap:12px;
  font-family:var(--font-mono);font-weight:600;line-height:1;
  font-size:clamp(40px,7vw,76px);color:var(--accent)}
.ab-tl-from{font-size:.42em;color:var(--se-text-caption)}
.ab-tl-arrow{font-size:.36em;color:var(--se-text-dim)}
.ab-tl-caption{margin:12px 0 0;font-size:15px;color:var(--se-text-secondary)}

@media (min-width:768px){
  /* Sideways. The scroll is the browser's own — native overflow plus
     scroll-snap, no drag JS — which is why it keeps keyboard, trackpad,
     shift-wheel and a real scrollbar for free. tabindex on the track makes
     the region reachable by keyboard, as a scrollable region must be. */
  .ab-tl-track{overflow-x:auto;overflow-y:hidden;padding:34px 0 20px;
    scroll-snap-type:x proximity;
    scrollbar-color:rgba(var(--accent-rgb),.5) rgba(var(--se-border-teal-rgb),.14)}
  .ab-tl-track::-webkit-scrollbar{height:8px}
  .ab-tl-track::-webkit-scrollbar-track{border-radius:var(--r-pill);
    background:rgba(var(--se-border-teal-rgb),.14)}
  .ab-tl-track::-webkit-scrollbar-thumb{border-radius:var(--r-pill);
    background:rgba(var(--accent-rgb),.5)}
  .ab-tl-track:hover::-webkit-scrollbar-thumb{background:rgba(var(--accent-rgb),.75)}
  /* width:max-content is load-bearing, and a mid-scrub frame is what proved
     it. A flex container inside an overflow-x parent is sized to the PARENT
     (measured: 1032px) while its items overflow it — so the rail, which is
     absolutely positioned against the list, was 1028px long, pinned at the
     scroll origin, and slid out of view the moment the reader scrubbed. Sized
     to its content the list is the full 3.6k px and the rail runs the years. */
  .ab-tl{display:flex;align-items:stretch;gap:20px;padding:0 2px;width:max-content}
  .ab-tl::before{left:2px;right:2px;top:-18px;bottom:auto;width:auto;height:1px}
  .ab-tl-item{flex:0 0 clamp(232px,24vw,282px);display:flex;scroll-snap-align:start}
  .ab-tl-item::before{left:0;top:-24px}
  .ab-tl-hint{display:block;margin:0 0 2px;font-size:13px;
    color:var(--se-text-caption)}
  .ab-tl-payoff{margin-top:30px}
}
/* Measured, not assumed. A card that never crosses the viewport never gets its
   entrance — the engine's observer sees this track's overflow as a clip, so a
   milestone scrubbed PAST rather than THROUGH would sit at opacity 0 until
   something scrolled back over it. A probe run proved it: scrollLeft jumped
   straight to the end and 2011-2016 stayed blank.

   scroll-behavior turns every instantaneous jump the track can receive — the
   End key, a click on the scrollbar trough, a snap — into an animation, so
   every card in between passes through view and takes its entrance on the way.
   Held out of the reduced-motion branch, where none of this matters: that
   reader is never armed, so every card is already at full opacity and a hard
   jump costs them nothing. */
@media (min-width:768px) and (prefers-reduced-motion:no-preference){
  .ab-tl-track{scroll-behavior:smooth}
}

/* the team, introduced by the music they make */
.ab-team{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:22px}
.ab-member{display:flex;flex-direction:column;gap:12px;min-width:0;padding:22px;
  background:var(--se-inner);border:1px solid rgba(var(--se-border-teal-rgb),.16);
  border-radius:var(--r-xl)}
/* These are not portraits — they are the "Artist of the Month" cards the team
   made. A 84px circle cropped them to an illegible smudge, so they are set as
   the small artwork they are. */
.ab-face{display:block;width:118px;height:118px;border-radius:var(--r-lg);overflow:hidden;
  background:var(--se-bg);border:1px solid rgba(var(--se-border-teal-rgb),.24)}
.ab-face img{width:100%;height:100%;object-fit:contain;display:block}
.ab-initial{display:grid;place-items:center;width:100%;height:100%;
  font-family:var(--font-secondary);font-size:30px;font-weight:700;color:var(--accent)}
.ab-member h3{margin:0;font-size:17px;font-weight:700;color:var(--se-text-white)}
.ab-bio p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--se-text-dim)}
.ab-bio p:last-child{margin-bottom:0}
.ab-bio a{color:var(--accent)}
.ab-note{margin:26px 0 0;font-size:13.5px;color:var(--se-text-caption);max-width:70ch}

.ab-terms{font-size:13px;color:var(--se-text-caption);margin:14px auto 0;max-width:46ch}
.ab-terms a{color:var(--se-text-secondary);text-decoration:underline}
#trials .se-form{max-width:520px;margin:26px auto 0;text-align:left}
#trials .lf-submit{justify-content:center}
/* the button above them is centred, so the hint and the status line under it
   are too — left-aligned, a hint that wraps on a phone hugged the left edge
   under a centred button */
#trials .lf-hint,#trials .lf-status{text-align:center}