/* ==========================================================================
   NNP RAISINS — ABOUT PAGE, v5 (2026-09-21). Loaded by about-us/index.html
   only, after site.css.

   A dark, layered, glossy page in the register of the current award winners
   (`design/refs-2026-09-20/`): enormous type, hard colour blocks, full-bleed
   photography, objects on distinct planes, a resolved finish. v3 is his
   review applied — see the note at the top of the page's <main>.

   Keeps from the site: the palette (every colour is a token or a tint of
   one), Bricolage 800 for display, IBM Plex Mono for eyebrows, `.btn`, the
   1280 spine via `.wrap`. Adds on purpose: glass panels at 14px (home.css
   runs 12px on its glass), gradient-filled numerals (his to veto), soft
   violet glows, and a masthead that is transparent over the dark opening.

   ⚠ EVERY PINNED OR PARALLAX RULE IS `.js`-GATED AND DESKTOP-ONLY, as in
   home.css. The stacked flow layout is the default and the truth on a
   phone, under reduced motion, without a script.

   ⚠ HIS LAPTOP IS 1270×680 (site.css, the short-viewport block). Every
   one-screen scene here is sized in vh with a floor, and checked there.
   ========================================================================== */

/* ------------------------------------------------------------- page ---- */
.ab { --ab-bg: #07050d; --ab-line: rgba(242,237,248,.14); --ab-glass: rgba(242,237,248,.06); --ab-r: 14px;
      background: var(--ab-bg); color: var(--chalk); overflow-x: clip; }
/* ⚠ THE PAPER BAR WAS NOT THE MASTHEAD. site.css reserves the masthead's
   height as `body { padding-top: 90px }` on a paper body, so a transparent
   masthead showed 90px of paper behind it. The page owns the body ground
   and drops the reserve, as home.css does. */
.ab-dark-page, .ab-dark-page body { background: #07050d; }
.ab-dark-page body { padding-top: 0; }
/* THE BAR FOLLOWS THE HOME PAGE'S RULE, his note 2026-09-21: glass over
   anything dark, packaging violet over paper. Every band on this page is
   dark, so the scrolled bar is glass here, always; at the very top, over the
   founder, it stays transparent. The glass values are home.css's
   `[data-tone="dark"]`, copied rather than shared because home.css is not
   loaded here. `.ab-dark-page .masthead.is-stuck` outranks site.css's flat
   violet `.masthead.is-stuck` by one class. */
.ab-dark-page .masthead:not(.is-stuck) { background: transparent; border-bottom-color: transparent; }
.ab-dark-page .masthead.is-stuck { background: rgba(14,7,28,.42); border-bottom-color: rgba(242,237,248,.12);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ab-dark-page .masthead.is-stuck { background: rgba(14,7,28,.86); }
}
.ab-dark-page .masthead .brand { color: #fff; }
.ab-dark-page .masthead .navtoggle { color: #fff; border-color: rgba(255,255,255,.35); }
/* 1001px, not 901: below the nav collapse point the links live in a paper
   dropdown and must keep their ink colours (site.css and home.css guard the
   same line). These rules used to apply at every width. */
@media (min-width: 1001px) {
  .ab-dark-page .masthead .mainnav a:not(.btn) { color: var(--chalk-dim); }
  .ab-dark-page .masthead .mainnav a:not(.btn):hover,
  .ab-dark-page .masthead .mainnav a:not(.btn)[aria-current="page"] { color: #fff; }
  /* The button inverts to chalk on the dark bar, so its hover fill has to be
     re-pointed to white as well. It was not: the default ink fill arrived
     under violet type and his screenshot showed an unreadable button. */
  .ab-dark-page .masthead .btn-primary { background: var(--chalk); color: var(--violet-dp); }
  .ab-dark-page .masthead .btn-primary::before { background: #fff; }
  .ab-dark-page .masthead :focus-visible { outline-color: #fff; }
}

/* ------------------------------------------------------------- type ---- */
.ab-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-lt); margin: 0 0 18px; }
.ab-label { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-lt); margin: 0 0 14px; }
.ab-h1 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(42px, 6vw, 92px);
  line-height: .94; letter-spacing: -.04em; margin: 0 0 22px; max-width: 12ch; }
.ab-h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(36px, 5.2vw, 76px);
  line-height: .96; letter-spacing: -.035em; margin: 0 0 20px; max-width: 14ch; }
.ab-h2-xl { font-size: clamp(42px, 6.4vw, 100px); max-width: 11ch; }
.ab-sub, .ab-lead { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--chalk-dim); max-width: 54ch; margin: 0; }
.ab-giant { font-family: var(--display); font-weight: 800; line-height: .88; letter-spacing: -.055em; margin: 0 0 16px;
  font-size: clamp(72px, 11vw, 168px);
  background: linear-gradient(135deg, #ffffff 0%, #e2b7ff 55%, #b784ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-word { display: inline-block; overflow: hidden; vertical-align: top; }
.ab-word > span { display: inline-block; will-change: transform; }

/* ------------------------------------------------------------ glass ---- */
.ab-glass { background: var(--ab-glass); border: 1px solid var(--ab-line); border-radius: var(--ab-r);
  box-shadow: 0 1px 0 rgba(242,237,248,.06) inset, 0 30px 60px -30px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.btn-ghost-light { background: transparent; color: var(--chalk); border: 1px solid rgba(242,237,248,.38); }
.btn-ghost-light:hover { border-color: var(--chalk); background: rgba(242,237,248,.08); }
.ab-ico { width: 26px; height: 26px; fill: none; stroke: var(--violet-lt); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Reveal: hidden only once the script is confirmed present. */
.js .ab [data-rv] { opacity: 0; transform: translateY(26px); }
.js .ab [data-rv].is-rv { opacity: 1; transform: none; transition: opacity .8s var(--ease-out), transform .9s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .js .ab [data-rv] { opacity: 1; transform: none; } }

/* ============================================================== HERO ====
   EXACTLY ONE SCREEN, and the founder stands in it whole — his note on v2:
   "i dont like how founder is cut in half". No buttons (his note), so the
   headline, the sub and the quote fit beside him even at 680px tall. */
.ab-hero { position: relative; height: 100svh; min-height: 620px; max-height: 1100px; overflow: hidden;
  display: grid; align-items: center; padding: 90px 0 60px;
  background: radial-gradient(120% 80% at 82% 100%, #2a1149 0%, rgba(42,17,73,0) 60%), linear-gradient(180deg, #07050d 0%, #0c0716 100%); }
.ab-hero-glow { position: absolute; right: 4%; bottom: -14%; width: 64vh; height: 64vh; border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(123,61,196,.55) 0%, rgba(75,30,120,.25) 40%, rgba(7,5,13,0) 70%); filter: blur(20px); }
.ab-hero-word { position: absolute; left: -1vw; top: 9%; z-index: 0; pointer-events: none; white-space: nowrap; will-change: transform;
  font-family: var(--display); font-weight: 800; font-size: 19vw; line-height: 1; letter-spacing: -.06em; color: rgba(226,183,255,.075); }
.ab-hero-grid { position: relative; z-index: 3; width: 100%; display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
.ab-hero-copy .ab-kick { margin-bottom: 14px; }
.ab-quote { margin: 26px 0 0; padding: 18px 22px; max-width: 560px; }
.ab-quote p { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(14.5px, 1.15vw, 16.5px); line-height: 1.45; color: var(--chalk); }
.ab-quote footer { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.ab-quote footer b { font-size: 14px; color: #fff; }
.ab-quote footer span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-dim); }
/* The founder: bottom-anchored, sized by the screen's height so his head
   clears the masthead and his hands clear the floor on any laptop. */
.ab-founder { position: absolute; right: 6%; bottom: 0; z-index: 2; margin: 0; height: min(84vh, 880px); will-change: transform;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); }
.ab-founder img { height: 100%; width: auto; display: block; }
.ab-cue { position: absolute; left: var(--spine); bottom: 78px; z-index: 5; display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--chalk-dim); }
.ab-cue i { display: block; width: 1px; height: 40px; background: linear-gradient(180deg, var(--violet-lt), transparent); }
/* The cue stood on the numbers bar (his screenshot, 2026-09-21): the bar
   rides 46px up over the seam, so the cue sits above it now, and it fades
   the moment the page moves, keyed off the masthead's own scroll class so
   there is no second scroll handler.
   FADED WITH `filter: opacity()`, NOT `opacity`, and not by taste: the intro
   tweens the cue's opacity with GSAP, and a CSS transition on that same
   property made GSAP's from() record 0 as its end value, so the cue never
   appeared at all (probed 2026-09-21). GSAP never touches filter on the
   cue, so the two do not meet. */
.ab-cue { transition: filter .35s ease; }
.masthead.is-stuck ~ .ab .ab-cue { filter: opacity(0); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .ab-cue i { animation: ab-cue 1.8s ease-in-out infinite; transform-origin: top; }
  @keyframes ab-cue { 0% { transform: scaleY(.2); opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
}

/* ============================================================= ROOTS ====
   One screen. The numbers bar rides the seam: pulled up over the hero by
   half its own height, so half sits on the hero's dark ground and half on
   the photograph. No gap, because nothing is between them. */
.ab-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ab-bg img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; transform: scale(1.12); }
.ab-bg-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,5,13,.85) 0%, rgba(7,5,13,.55) 30%, rgba(7,5,13,.5) 60%, rgba(7,5,13,.96) 100%); }
.ab-bg-veil-deep { background: linear-gradient(180deg, rgba(7,5,13,.9) 0%, rgba(7,5,13,.45) 35%, rgba(7,5,13,.9) 70%, #07050d 100%); }
/* Centred in its screen (his question, 2026-09-21: "is the text aligned to
   center?"). The numbers bar takes its own row at the top; the heading and
   the four cards share the rest and sit in the middle of it. */
.ab-roots { position: relative; min-height: 100vh; display: grid; align-items: stretch; padding: 0 0 clamp(32px, 5vh, 72px); }
.ab-roots-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 72px); align-items: center; align-self: center; }
.ab-roots-copy { position: relative; z-index: 2; display: grid; grid-template-rows: auto 1fr; }
.ab-stats { list-style: none; margin: -46px 0 clamp(28px, 5vh, 64px); padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(12,8,22,.72); }
.ab-stats li { padding: clamp(14px, 2.6vh, 24px) 28px; }
.ab-stats li + li { border-left: 1px solid var(--ab-line); }
.ab-stats b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4.6vh, 44px); letter-spacing: -.05em; line-height: 1; color: #fff; }
.ab-stats > li > span { display: block; margin-top: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim); }
.ab-roots .ab-h2 { font-size: clamp(34px, 8vh, 72px); }
.ab-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ab-tl { padding: clamp(16px, 2.6vh, 24px) 22px; display: flex; flex-direction: column; }
.ab-tl b { font-family: var(--display); font-weight: 800; font-size: clamp(32px, 5.6vh, 54px); letter-spacing: -.05em; line-height: .9;
  background: linear-gradient(135deg, #ffffff 0%, #e2b7ff 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-tl em { display: block; font-style: normal; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-lt); margin: 10px 0 0; }
.ab-tl p { margin: 10px 0 0; font-size: clamp(13px, 1.9vh, 14.5px); line-height: 1.45; color: var(--chalk-dim); }

/* ============================================================== LINE ====
   Full-screen photographs, one per step, wiping in from the right. */
.ab-line { position: relative; background: var(--ab-bg); }
.ab-steps { display: grid; }
.ab-step { position: relative; min-height: 100vh; display: grid; align-items: center; overflow: hidden; }
.ab-step-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* transform and opacity only; the clip-path wipe was the lag (2026-09-21). */
.ab-step-bg img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform, opacity; }
.ab-step-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(7,5,13,.96) 0%, rgba(7,5,13,.82) 34%, rgba(7,5,13,.35) 62%, rgba(7,5,13,.15) 100%),
              linear-gradient(180deg, rgba(7,5,13,.55) 0%, rgba(7,5,13,0) 30%, rgba(7,5,13,0) 70%, rgba(7,5,13,.8) 100%),
              linear-gradient(270deg, rgba(7,5,13,.72) 0%, rgba(7,5,13,.35) 16%, rgba(7,5,13,0) 34%); }
.ab-step-copy { position: relative; z-index: 2; width: 100%; padding-top: 70px; }
.ab-step-copy > * { max-width: 560px; }
.ab-step-num { display: block; font-family: var(--display); font-weight: 800; line-height: .8; letter-spacing: -.06em; margin: 0 0 6px; font-size: clamp(96px, 26vh, 240px);
  background: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(226,183,255,.9) 50%, rgba(183,132,255,.35) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-step h3 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(32px, 7vh, 64px); letter-spacing: -.035em; line-height: 1; margin: 0 0 14px; }
.ab-step p { margin: 0; color: var(--chalk); font-size: clamp(15px, 2.4vh, 19px); line-height: 1.5; max-width: 44ch; }
.ab-tags { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
/* No backdrop-filter on the pills: three small blurs re-sampled over a
   photograph that is itself animating cost frames on his laptop. */
.ab-tags li { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk); padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(242,237,248,.3); background: rgba(7,5,13,.55); }
/* The makers' marks instead of their names, his note 2026-09-21 ("equipment
   companies' logos could have been used"): white plates at pill height, the
   mark contained in pixels, the same rule as every other plate on the page. */
.ab-tags .ab-tag-logo { display: grid; place-items: center; height: 34px; padding: 0 12px; background: #fff; border-color: #fff; border-radius: 8px; }
.ab-tags .ab-tag-logo img { display: block; width: auto; height: auto; max-height: 20px; max-width: 96px; object-fit: contain; }
.ab-rail { display: none; }
.ab-progress { display: none; }
.ab-line-more { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 0 var(--spine); padding: 24px 0 48px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--violet-lt); text-decoration: none; }

/* ======================================================== LABORATORY ====
   One screen: copy on the left, three compact cards stacked on the right,
   the certification belt along the foot. */
.ab-lab { position: relative; overflow: hidden; min-height: 100vh; display: grid; grid-template-rows: 1fr auto; background: var(--ab-bg); padding-top: clamp(64px, 10vh, 110px); }
.ab-lab-glow { position: absolute; left: 65%; top: 40%; width: 70vw; height: 70vh; transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse, rgba(123,61,196,.32) 0%, rgba(7,5,13,0) 65%); filter: blur(30px); }
.ab-lab-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ab-lab .ab-h2 { font-size: clamp(34px, 8vh, 72px); }
.ab-lab .ab-lead { font-size: clamp(15px, 2.2vh, 18px); }
.ab-labs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ab-labcard { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; padding: 14px 20px 14px 14px; }
.ab-labmark { height: clamp(64px, 10vh, 84px); display: grid; place-items: center; background: #fff; border-radius: 10px; padding: 12px 16px; }
/* PIXELS, NOT PERCENTAGES. `max-height: 100%` did not hold the TLR mark
   inside its plate on his machine, and `height: 100%; object-fit: contain`
   did not either (both 2026-09-21, two screenshots). A percentage against a
   centred grid item is not a control he can see. The belt plates below have
   always used px maxima and have never overflowed; this is the same rule,
   sized to the plate's content box (its clamp minus the padding). */
.ab-labmark img { max-width: 100px; max-height: clamp(40px, calc(10vh - 24px), 60px); width: auto; height: auto; object-fit: contain; display: block; }
.ab-labmark-own { background: linear-gradient(135deg, #4b1e78 0%, #37125e 100%); }
.ab-ico-big { width: 34px; height: 34px; stroke: var(--violet-lt); }
.ab-labcard h3 { margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: clamp(16px, 2.4vh, 19px); letter-spacing: -.02em; color: #fff; }
.ab-labcard p { margin: 0; font-size: clamp(13px, 1.9vh, 14.5px); line-height: 1.45; color: var(--chalk-dim); }

/* ---- the belt: ONE tile size, ONE plate size ---- */
.ab-belt { position: relative; z-index: 1; padding: clamp(20px, 4vh, 40px) 0 clamp(20px, 4vh, 36px); overflow: hidden; }
.ab-belt-head { margin-bottom: 14px; }
.ab-belt-track { display: flex; width: max-content; gap: 14px; will-change: transform; }
.ab-belt-row { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
.ab-belt-row a { display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 18px; width: 340px; height: 92px; padding: 0 18px 0 12px; text-decoration: none; color: #fff;
  transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.ab-belt-row a:hover { background: rgba(242,237,248,.12); border-color: rgba(242,237,248,.4); }
.ab-plate { display: grid; place-items: center; width: 124px; height: 64px; background: #fff; border-radius: 8px; padding: 8px 12px; }
.ab-plate img { max-width: 100px; max-height: 44px; width: auto; height: auto; display: block; }
.ab-belt-row a > span:last-child { display: grid; gap: 3px; min-width: 0; }
.ab-belt-row b { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.ab-belt-row em { font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: no-preference) {
  .ab-belt-track { animation: ab-belt 30s linear infinite; }
  .ab-belt-track:hover, .ab-belt-track:focus-within { animation-play-state: paused; }
  @keyframes ab-belt { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
}

/* ============================================================ PEOPLE ==== */
.ab-people { position: relative; min-height: 100vh; display: grid; align-items: end; overflow: hidden; padding: clamp(90px, 16vh, 180px) 0 clamp(48px, 8vh, 100px); }
.ab-people-copy { position: relative; z-index: 2; width: 100%; }
.ab-people-copy > * { max-width: 640px; }
.ab-people .ab-giant { font-size: clamp(56px, 12vh, 120px); margin-bottom: 8px; }
.ab-people .ab-h2 { font-size: clamp(34px, 8vh, 72px); }
.ab-ticks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; color: var(--chalk-dim); font-size: clamp(14px, 2.1vh, 15.5px); line-height: 1.5; }
.ab-ticks li { position: relative; padding-left: 22px; }
.ab-ticks li::before { content: ''; position: absolute; left: 0; top: .72em; width: 11px; height: 2px; background: var(--violet-lt); }

/* ============================================================= WORLD ====
   One screen: the ask on the left, the manifest on the right. */
.ab-world { position: relative; overflow: hidden; min-height: 100vh; display: grid; align-items: center; padding: clamp(72px, 11vh, 120px) 0 clamp(40px, 7vh, 90px);
  background: linear-gradient(180deg, #07050d 0%, #22103d 45%, #4b1e78 100%); }
.ab-world-glow { position: absolute; left: 50%; top: 40%; width: 90vw; height: 60vh; transform: translateX(-50%); border-radius: 50%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse, rgba(123,61,196,.35) 0%, rgba(7,5,13,0) 65%); filter: blur(30px); }
.ab-world-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ab-world .ab-h2 { font-size: clamp(38px, 9vh, 84px); }
.ab-close-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.ab-manifest { padding: 8px 0 6px; }
.ab-mf-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 22px 14px; border-bottom: 1px solid var(--ab-line);
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--chalk-dim); }
.ab-mf-origin { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
/* The origin flag is larger than the rows: at 36px the crescent is four
   pixels tall and reads as a dot, and he saw "no moon" twice. */
/* object-position LEFT: the flag file is 2:1 and this box is 3:2, so cover
   crops an eighth off each side, and the crescent lives in the left eighth.
   Cropping the right side only keeps the moon and all twelve stars. */
.ab-mf-origin img { width: 54px; height: 36px; object-fit: cover; object-position: left center; border-radius: 5px; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.ab-mf-group { margin: 0; padding: clamp(8px, 1.6vh, 14px) 22px 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-lt); }
.ab-mf-rows { list-style: none; margin: 0; padding: 0 12px; }
.ab-mf-rows li { display: grid; grid-template-columns: 36px auto 1fr auto; align-items: center; gap: 16px; padding: clamp(5px, 1vh, 9px) 10px; border-radius: 8px;
  transition: background-color var(--t-hover) ease; }
.ab-mf-rows li:hover { background: rgba(242,237,248,.07); }
.ab-mf-rows img { width: 36px; height: 24px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.4); display: block; }
.ab-mf-rows b { font-family: var(--display); font-weight: 700; font-size: clamp(16px, 2.4vh, 19px); letter-spacing: -.015em; color: #fff; white-space: nowrap; }
.ab-mf-rows i { height: 1px; background: repeating-linear-gradient(90deg, rgba(226,183,255,.55) 0 6px, transparent 6px 12px); }
.ab-mf-rows span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim); white-space: nowrap; }

/* ====================================================== pinned scene ==== */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .js .ab-line-scene { height: 520vh; }
  .js .ab-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
  .js .ab-steps { position: absolute; inset: 0; display: block; }
  .js .ab-step { position: absolute; inset: 0; min-height: 0; opacity: 0; visibility: hidden; }
  /* The incoming step is always ON TOP, whichever direction the scroll
     came from, so the wipe reads the same both ways. Without this a step
     earlier in the DOM wiped in UNDER the one leaving. */
  .js .ab-step.is-on { opacity: 1; visibility: visible; z-index: 2; }
  .js .ab-rail { display: grid; gap: 2px; position: absolute; right: var(--spine); top: 50%; transform: translateY(-50%); z-index: 3; text-align: right;
    text-shadow: 0 1px 2px rgba(7,5,13,.9), 0 4px 24px rgba(7,5,13,.8); }
  /* No plate behind the rail: the first fix was a dark radial blob and he
     called it terrible. The photograph's right edge carries a dark gradient
     in the veil instead, and the type carries a shadow. */
  .js .ab-rail a { display: grid; justify-items: end; text-decoration: none; padding: 4px 0; color: rgba(242,237,248,.45); transition: color var(--t-hover) ease; }
  .js .ab-rail a .num { font-family: var(--display); font-weight: 800; font-size: clamp(28px, 6vh, 52px); letter-spacing: -.05em; line-height: 1; }
  .js .ab-rail a em { font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; opacity: 0; margin-top: 6px; line-height: 1; transition: opacity var(--t-hover) ease; }
  .js .ab-rail a.on { color: #fff; }
  .js .ab-rail a.on em, .js .ab-rail a:hover em { opacity: 1; color: #fff; }
  .js .ab-rail a:hover { color: var(--chalk); }
  .js .ab-progress { display: block; position: absolute; left: var(--spine); right: var(--spine); bottom: 34px; height: 2px; background: rgba(242,237,248,.16); z-index: 3; }
  .js .ab-progress i { display: block; height: 100%; width: 20%; background: var(--violet-lt); transition: width .5s var(--ease-out); }
  .js .ab-line-more { position: absolute; right: var(--spine); bottom: 40px; z-index: 3; margin: 0; padding: 0 0 4px; }
}
/* Short laptops: his is 1270×680. */
@media (min-width: 901px) and (max-height: 760px) {
  .ab-hero { padding-top: 76px; }
  .ab-h1 { font-size: clamp(40px, 5.2vw, 72px); margin-bottom: 16px; }
  .ab-sub { font-size: 15.5px; }
  .ab-quote { margin-top: 18px; padding: 14px 18px; }
  .ab-quote p { font-size: 14px; }
  .ab-founder { height: 82vh; }
  .ab-lead { font-size: 15.5px; }
  .ab-kick { margin-bottom: 12px; }
}

/* ------------------------------------------------------------- phone ---- */
@media (max-width: 900px) {
  .ab-h1, .ab-h2 { max-width: none; }
  .ab-hero { height: auto; min-height: 0; max-height: none; padding: 104px 0 0; display: block; }
  .ab-hero-word { font-size: 34vw; top: 60px; }
  .ab-hero-grid { grid-template-columns: 1fr; }
  .ab-founder { position: relative; right: auto; bottom: auto; height: auto; margin: 32px auto 0; width: 72%; max-width: 360px; }
  .ab-founder img { width: 100%; height: auto; }
  .ab-cue { display: none; }
  .ab-hero-glow { right: 10%; bottom: 0; width: 80vw; height: 80vw; }
  .ab-roots { min-height: 0; padding-bottom: 56px; }
  .ab-stats { margin-top: -40px; grid-template-columns: 1fr 1fr; }
  .ab-stats li { padding: 18px 20px; }
  .ab-stats li + li { border-left: 0; }
  .ab-stats li:nth-child(2n) { border-left: 1px solid var(--ab-line); }
  .ab-stats li:nth-child(n+3) { border-top: 1px solid var(--ab-line); }
  .ab-roots-grid { grid-template-columns: 1fr; }
  .ab-timeline { grid-template-columns: 1fr; }
  .ab-step { min-height: 0; padding: 40vw 0 48px; }
  .ab-step-bg::after { background: linear-gradient(180deg, rgba(7,5,13,.2) 0%, rgba(7,5,13,.85) 45%, rgba(7,5,13,.96) 100%); }
  .ab-step-copy { padding-top: 0; }
  .ab-lab { min-height: 0; display: block; }
  .ab-lab-grid { grid-template-columns: 1fr; }
  /* The plate column is 112px here, so the mark maxima are 84x44 in PIXELS,
     the plate content box (his phone screenshot, 2026-09-21: TLR and Eurofins
     spilled past the plate because the desktop 100px maximum was wider than
     the plate itself). */
  .ab-labcard { grid-template-columns: 112px 1fr; gap: 14px; padding: 12px 16px 12px 12px; }
  .ab-labmark { height: 64px; padding: 10px 14px; }
  .ab-labmark img { max-width: 84px; max-height: 44px; }
  .ab-belt { padding-top: 32px; }
  .ab-people { min-height: 0; padding-top: 64vw; }
  .ab-world { min-height: 0; display: block; }
  .ab-world-grid { grid-template-columns: 1fr; }
  .ab-mf-rows li { grid-template-columns: 36px 1fr auto; }
  .ab-mf-rows i { display: none; }
  .ab-kick, .ab-label, .ab-stats > li > span, .ab-tl em, .ab-tags li, .ab-quote footer span, .ab-belt-row em, .ab-mf-head, .ab-mf-group, .ab-mf-rows span { font-size: 12px; }
}

/* The laboratory head and cards moved to the Certification page 2026-09-22;
   the section is the belt alone now. */
.ab-lab.is-belt-only { min-height: 0; display: block; padding-top: clamp(40px, 6vh, 64px); }
.ab-lab.is-belt-only .ab-lab-glow { display: none; }