/* ================================================================
   css/pages/about.css — sections unique to /about
   her, main-info, process, value
   (menu-line, help, inner-annual, footer come from the shared partials
   + css/sections/*.css — nothing about-specific to add for those.)

   Source: research/fragments/about/{her,main-info,process,value}.html
   CSS values: extracted from the <style> blocks in
   research/raw/desktop/about.html (research/_stylesheet.css is HOME-only,
   see SHARED-NOTES.md landmine #1). Same values apply at all three raw
   captures (desktop/tablet/phone raw files carry identical <style>
   content — verified by diff).

   Reference heights (reference-heights.json):
     her         651 / 617 / 779 / 659   (desktop/laptop/tablet/phone)
     main-info   540 / 583 / 608 / 739
     process     760 / 651 / 683 / 893
     value       700 / 801 / 817 / 694

   No appear animations: the only data-framer-appear-id values on the
   about page (1uwpqhf, 1nah8ke, 1lhuxks, lkhz4) belong to the shared
   desktop-inner-annual partial and the menu-line/footer logo — none of
   them fall inside her/main-info/process/value. Verified against the
   __framer__appearAnimationsContent JSON in raw/desktop/about.html.
   ================================================================ */

/* ----------------------------------------------------------------
   Shared local primitives (page-scoped, not in base.css)
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   INNER-ANNUAL, page-scoped override (content plan §3.11 / §5.6).
   Public price tiers are gone; the annual/monthly toggle goes with them.
   The control is hidden rather than deleted so js/main.js §5's price-toggle
   handler stays inert — the group keeps its default `annual` state and the
   annual price group is now the only one in the DOM.
   ---------------------------------------------------------------- */
.annual__nav { display: none; }

/* Engagement durations are much longer words than the template's 4-character
   prices: "4–8 weeks" at the 48px preset measures ~237px, which wrapped inside
   the 228px desktop cell and butted straight into the next column's "monthly"
   at 810. 40px + a 16px right inset keeps all three on one line with air on both
   sides at every breakpoint; the numbers column is bottom-aligned, so nothing
   else in the band moves. */
.annual__price-amount p { font-size: 40px; }
.annual__price-amount { padding-right: 16px; }


/* the small "+" cross mark used as a corner accent (her/main-info/value) */
.plus-mark {
  position: absolute;
  top: -8px;
  left: -7px;
  width: 15px;
  height: 15px;
  z-index: 3;
}
.plus-mark svg { width: 100%; height: 100%; }

/* the orange "subheader" pill badge (her / process / value) —
   reference component framer-bRs8y.framer-b0u62f > framer-1foe6yk >
   framer-1xl96v2, identical everywhere it appears. */
.tag {
  display: flex;
  width: min-content;
  height: min-content;
}
.tag__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 31px;
  padding: 0 10px;
  background-color: var(--c-orange);
  white-space: pre;
}
.tag__pill .t-mono { color: var(--c-white); }

/* generic vertical gap-line column: a flex spacer that carries one or
   two decorative .vline children. Height is always 100% of its row, so
   it never affects a section's measured height — only its presence in
   the flex row matters for width distribution. */
.gapline {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  place-content: center flex-start;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* The reference draws every "Vert line" on a `flex:none; width:1px` box. That
   1px is load-bearing, not cosmetic: with box-sizing:border-box the 3px left +
   3px right borders below get clamped down into that 1px, which is what makes
   the rule render as a hairline. base.css leaves .vline width:auto, so as a
   flex item it collapses to 0 and the borders escape clamping and paint the
   full 6px — every dashed rule on the page came out ~6x too heavy.

   `overflow:clip` is the other half: a border-box element can never render
   narrower than its own left+right borders (6px), so the reference clips that
   6px box down to the 1px host. Same rule contacts.css already applies to
   `.her .vline, .form .vline`. */
.vline {
  width: 1px;
  overflow: var(--overflow-clip-fallback, clip);
}

/* vline colour/weight presets (see tokens.css for the aliases) */
.vline--faint  { --border-top-width:1px; --border-right-width:1px; --border-bottom-width:1px; --border-left-width:1px; --border-style:solid; --border-color: var(--c-stone-cool-50); }
.vline--faint2 { --border-top-width:1px; --border-right-width:1px; --border-bottom-width:1px; --border-left-width:1px; --border-style:solid; --border-color: var(--c-stone-40); }
.vline--dash   { --border-top-width:3px; --border-right-width:3px; --border-bottom-width:3px; --border-left-width:3px; --border-style:dashed; --border-color: var(--c-stone-85); }
.vline--orange { --border-top-width:3px; --border-right-width:3px; --border-bottom-width:3px; --border-left-width:3px; --border-style:dashed; --border-color: var(--c-peach); }
.vline--orange95 { --border-top-width:3px; --border-right-width:3px; --border-bottom-width:3px; --border-left-width:3px; --border-style:dashed; --border-color: var(--c-peach-95); }
.vline--faint65 { --border-top-width:3px; --border-right-width:3px; --border-bottom-width:3px; --border-left-width:3px; --border-style:dashed; --border-color: var(--c-stone-65); }
.vline--orange75 { --border-top-width:3px; --border-right-width:3px; --border-bottom-width:3px; --border-left-width:3px; --border-style:dashed; --border-color: var(--c-peach-75); }
.vline--full { height: 100%; }

@media (max-width: 809.98px) {
  .vline--dash,
  .vline--orange,
  .vline--orange95,
  .vline--orange75,
  .vline--faint65 { --border-top-width:2px; --border-right-width:2px; --border-bottom-width:2px; --border-left-width:2px; }
}

/* ================================================================
   HER — hero header. data-section="her", id="home"
   Height math (desktop, 900 tall): main 50vh(min 400)=450 + hr 1px +
   desc 20vh(min 200)=200 -> 651. Matches reference exactly.
   ================================================================ */
.her {
  background-color: var(--c-cream);
  z-index: 1;
  display: flex;
  flex-flow: column;
  place-content: center flex-start;
  align-items: center;
  width: 100%;
  height: min-content;
  position: relative;
  overflow: visible;
}

.her__gradient {
  z-index: 3;
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 449px;
  background: linear-gradient(var(--c-cream) 39%, transparent 100%);
}

.her__main {
  z-index: 4;
  display: flex;
  width: 100%;
  height: 50vh;
  min-height: 400px;
  padding: 0 32px;
  position: relative;
}
@media (max-width: 809.98px) {
  .her__main { height: 40vh; min-height: 300px; padding: 0 26px; }
}

.her__inner {
  /* z-index:1 is load-bearing: .her__bgimg is a later sibling with z-index:0,
     so without this the hero background image paints OVER the subheader badge
     and washes it out to ~10% alpha. (.her__title only escaped because it
     carries its own z-index:1.) Matches reference .framer-13vacy6. */
  z-index: 1;
  display: flex;
  flex: 1 0 0;
  place-content: center;
  align-items: center;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  position: relative;
}

.her__gaps { display: flex; flex: 1 0 0; width: 1px; height: 100%; }

.her__header {
  display: flex;
  flex: 2 0 0;
  width: 1px;
  height: 100%;
  position: relative;
}

.her__subheader {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  align-items: center;
  position: relative;
}
.her__subheader-inner {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  align-items: center;
  /* reference .framer-1xn1ncq is `place-content:center flex-start` — the badge
     is flush with the orange rule, not centred in the column. */
  justify-content: flex-start;
  gap: 10px;
  padding: 62px 0 0;
  position: relative;
}

/* The `bottom:-8px` anchor is the reference's optical baseline trick, tuned on
   "Who we are" — a headline with no descenders, whose glyphs stop at the band's
   hairline. "Know where AI belongs" has a `g`: at lh 96% the glyph box overflows
   the line box by ~0.125em (≈9px at 75px) and the -8px anchor pushes it another
   8px down, so the tail landed ~17px past the rule and the cream desc band that
   follows painted straight over it. padding-bottom lifts the text inside the box
   while leaving the box's own bottom anchor (and therefore the reference
   geometry) exactly where it was; the band is absolutely positioned, so no
   section height moves. Values are ~0.3em per tier + 3px of air. */
.her__title {
  --framer-paragraph-spacing: 0px;
  z-index: 1;
  width: 100%;
  max-width: 540px;
  position: absolute;
  bottom: -8px;
  left: -1px;
  padding-bottom: 22px;
}
@media (min-width: 810px) and (max-width: 1439.98px) {
  .her__title { max-width: 440px; bottom: -6px; padding-bottom: 18px; }
}
@media (max-width: 809.98px) {
  .her__title { width: 90%; max-width: 440px; bottom: -6px; left: 0; padding-bottom: 14px; }
}

/* The reference splits this across THREE levels, and the split matters:
   the scale sits on a 100%x100% inner box (scaling about the *container's*
   centre), while the strip is translated in unscaled child coordinates.
   Composing them on one element as `scale() translateX()` scaled the strip
   about its own centre instead — the strip is far wider than the container,
   so the image landed well left of where it belongs and the ridge on the
   right half of the hero fell outside the frame entirely.
   Mirrors contacts.css `.her__bg` / `.her__bg-scale`. */
.her__bgimg {
  opacity: .9;
  z-index: 0;
  position: absolute;
  inset: -216px -759px -59px -758px;
}
.her__bgimg-scale {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--c-cream);
  transform: scale(1.05638);
}
/* The strip is a marquee, not a still: the reference translates it left at
   the site-wide ~30px/s rate (measured live 2026-08-18 on /about — a steady
   15px per 500ms, wrapping on the 1605px tile width). Positioning, the loop
   and the reduced-motion opt-out all come from `.marquee` in
   sections/footer.css (always loaded); js/main.js `sizeMarquee` measures the
   tile and sets --marquee-shift / --marquee-duration. The strip is absolute
   inside the overflow:hidden `.her__bgimg-scale`, so it stays height-neutral.
   The old hand-baked `translateX(-88.98px)` was one frame of that loop. */
.her__bgimg-strip img { height: 100%; width: auto; display: block; }

.her__hr {
  z-index: 4;
  width: 100%;
  height: 1px;
  position: relative;
}
.her__hr::after { content:""; position:absolute; inset:0; border:1px solid var(--c-stone); }

.her__desc {
  background-color: var(--c-cream);
  z-index: 4;
  display: flex;
  place-content: center;
  align-items: center;
  width: 100%;
  height: 20vh;
  min-height: 200px;
  padding: 0 32px;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1439.98px) {
  .her__desc { height: 22vh; }
}
@media (max-width: 809.98px) {
  .her__desc { height: min-content; min-height: unset; padding: 0 26px; }
}

.her__desc-inner {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  position: relative;
}
@media (max-width: 809.98px) {
  .her__desc-inner { flex: none; width: 100%; height: min-content; }
}

.her__desc-gaps { display: flex; flex: 1 0 0; width: 1px; height: 100%; }

.her__info {
  display: flex;
  flex: 2 0 0;
  width: 1px;
  height: 100%;
  position: relative;
}
@media (max-width: 809.98px) {
  .her__info { flex: 1 0 0; justify-content: space-between; height: min-content; }
}

/* Phone-only decorative dividers inside her__info. cta/mission stay
   position:absolute at every breakpoint (the reference never changes
   that), so at phone the row would otherwise collapse to zero height —
   these two normal-flow "Vert line" children are what actually drive
   her__info's height:min-content there. Reference classes 117x2bu
   (order:0, phone-only) and jcp0zp (order:6, visible tablet+phone,
   height:320px only at phone). Found via raw/phone/about.html — absent
   from the desktop fragment entirely. */
.her__gap-phone-a {
  display: none;
  align-self: stretch;
  height: auto;
  width: 1px;
  order: 0;
  overflow: var(--overflow-clip-fallback, clip);
}
.her__gap-phone-a::after { content:""; position:absolute; inset:0; border:2px dashed var(--c-peach); }
.her__gap-tablet-phone {
  display: none;
  width: 1px;
  height: 100%;
  order: 6;
  position: relative;
}
.her__gap-tablet-phone::after { content:""; position:absolute; inset:0; border-left:1px solid var(--c-stone-40); }
@media (min-width: 810px) and (max-width: 1439.98px) {
  .her__gap-tablet-phone { display: block; }
}
@media (max-width: 809.98px) {
  .her__gap-phone-a { display: block; position: relative; }
  .her__gap-tablet-phone { display: block; height: 320px; }
}

.her__cta {
  display: flex;
  align-items: center;
  height: min-content;
  position: absolute;
  bottom: 0; left: 1px; right: 0;
}
@media (max-width: 809.98px) {
  .her__cta { left: 0; right: unset; flex-direction: column; order: 1; gap: 20px; width: 100%; }
}

.her__num-wrap {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  align-items: center;
  padding: 0 0 4px;
}
@media (max-width: 809.98px) {
  .her__num-wrap { flex-direction: column; flex: none; gap: 10px; width: 100%; padding: 0; }
}
.her__num-inner {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  align-items: center;
}
@media (max-width: 809.98px) {
  .her__num-inner { flex: none; width: 100%; }
}
.her__num {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40.8px;
  line-height: 48px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 48px;
  letter-spacing: -.05em;
  color: var(--c-graphite);
}
.her__num-text {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  align-items: center;
  gap: 10px;
}
@media (max-width: 809.98px) {
  .her__num-text { flex: none; width: 100%; }
}
.her__num-text p { max-width: 180px; color: var(--c-black); }

.her__num-hr {
  height: 1px;
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 50%;
  overflow: var(--overflow-clip-fallback, clip);
}
.her__num-hr::after { content:""; position:absolute; inset:0; border:3px dashed var(--c-stone-85); }

.her__how { display: flex; flex: 1 0 0; width: 1px; height: 57px; }
@media (max-width: 809.98px) { .her__how { flex: none; width: 100%; height: auto; } }
/* Reference splits the row unevenly at tablet/laptop (~55/45, text side
   wider) instead of the 50/50 desktop split — confirmed by pixel-scanning
   the button's solid-fill edges in the reference screenshots. */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .her__num-wrap { flex: 5 0 0; }
  .her__how { flex: 4 0 0; }
}

.her__mission {
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 340px;
  height: min-content;
  padding: 36px 0 0;
  position: absolute;
  top: 0; left: 0;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .her__mission { max-width: 420px; } }
@media (max-width: 809.98px) { .her__mission { max-width: unset; order: 7; } }
/* reference .framer-6ng23m sets --framer-text-wrap-override:balance, applied
   via `text-wrap: var(--framer-text-wrap-override, …)`. Metrics here already
   matched exactly (Geist Mono 15px/500/135%/uppercase in a 340px box); it was
   greedy vs balanced line-breaking that pushed one word up onto line 1. */
.her__mission p { --framer-paragraph-spacing: 0px; width: 100%; color: var(--c-black); text-wrap: balance; }
@media (max-width: 809.98px) { .her__mission p { width: 338px; } }

/* ================================================================
   MAIN-INFO. data-section="main-info", id="areas"
   Height math (desktop, 900 tall): gap 10vh=90 + main 50vh(min400)=450
   -> 540. Matches reference exactly.
   ================================================================ */
.main-info {
  background-color: var(--c-cream);
  z-index: 1;
  display: flex;
  flex-flow: column;
  place-content: center flex-start;
  align-items: center;
  width: 100%;
  height: min-content;
  overflow: hidden;
  position: relative;
}

.main-info__gap {
  z-index: 4;
  display: flex;
  width: 100%;
  height: 10vh;
  padding: 0 32px;
  position: relative;
}
@media (max-width: 809.98px) { .main-info__gap { padding: 0 26px; } }

.main-info__gap-inner {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  place-content: center;
  align-items: center;
}

.main-info__main {
  z-index: 4;
  display: flex;
  width: 100%;
  height: 50vh;
  min-height: 400px;
  padding: 0 32px;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .main-info__main { height: min-content; } }
@media (max-width: 809.98px) { .main-info__main { height: min-content; min-height: unset; flex-direction: column; padding: 0 26px; } }

.main-info__main-inner {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  place-content: center;
  align-items: center;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .main-info__main-inner { height: 500px; } }
@media (max-width: 809.98px) { .main-info__main-inner { flex-direction: column; flex: none; justify-content: flex-start; width: 100%; height: min-content; } }

.main-info__logo-info {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  place-content: center;
  align-items: center;
  position: relative;
}
@media (max-width: 809.98px) { .main-info__logo-info { flex: none; width: 100%; height: min-content; } }

.main-info__info {
  display: flex;
  flex: 1 0 0;
  width: 100%;
  height: 1px;
  align-items: flex-start;
}
@media (max-width: 809.98px) { .main-info__info { flex: none; width: 100%; gap: unset; justify-content: space-between; height: min-content; min-height: 110px; } }

.main-info__right {
  display: flex;
  flex-direction: column;
  flex: 2 0 0;
  width: 1px;
  height: 100%;
  place-content: center;
  align-items: flex-start;
  position: relative;
}
@media (max-width: 809.98px) { .main-info__right { flex: 1 0 0; height: min-content; } }

.main-info__logo {
  display: flex;
  flex: 1 0 0;
  width: 100%;
  height: 1px;
}
@media (max-width: 809.98px) { .main-info__logo { flex: none; order: 0; height: min-content; max-height: 200px; padding: 0 0 42px; } }
.main-info__logo-box {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  max-width: 230px;
  height: min-content;
  align-items: flex-start;
  gap: 10px;
}
.main-info__logo-box img {
  filter: grayscale(1);
  width: 180px;
  height: 70px;
  object-fit: contain;
  object-position: left center;
}

.main-info__year {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  width: 100%;
  height: 1px;
  justify-content: space-between;
}
@media (max-width: 809.98px) { .main-info__year { flex: none; order: 2; gap: 24px; height: min-content; max-height: 200px; } }

.main-info__belief {
  display: flex;
  width: 100%;
  max-width: 330px;
  padding: 0;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .main-info__belief { max-width: 230px; } }
/* same balanced wrap — reference .framer-d2n0vt also carries
   --framer-text-wrap-override:balance. */
.main-info__belief p { flex: 1 0 0; width: 1px; color: var(--c-body); text-wrap: balance; }

.main-info__est {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 0 0 26px;
}
.main-info__est p { width: 100%; }

.main-info__image {
  display: flex;
  flex-direction: column;
  flex: 2 0 0;
  width: 1px;
  height: 100%;
  place-content: center;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
}
@media (max-width: 809.98px) { .main-info__image { flex: none; width: 100%; height: min-content; } }
.main-info__image-frame {
  display: flex;
  flex: 1 0 0;
  width: 100%;
  height: 1px;
  place-content: center;
  align-items: center;
  overflow: hidden;
}
@media (max-width: 809.98px) { .main-info__image-frame { flex: none; width: 100%; height: min-content; } }
.main-info__image-link {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  overflow: hidden;
  position: relative;
}
@media (max-width: 809.98px) { .main-info__image-link { flex: none; width: 100%; height: min-content; } }
.main-info__image-link img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  opacity: 1;
}
@media (min-width: 810px) { .main-info__image-link img { height: 100%; } }
/* Texture stand-in for the removed stock team photo: the dune asset is a wide
   2880x1374 strip, so it is cropped to the frame rather than letterboxed, and
   dimmed to the same 90% the hero uses so it reads as a texture, not a photo. */
.main-info__image-link--texture { background-color: var(--c-cream); }
.main-info__image-link--texture img { object-fit: cover; object-position: center 70%; opacity: .9; }

/* help.css's quote avatar, same [CONFIRM] founder-photo stand-in as above.
   Page-scoped so the shared section stylesheet is untouched. */
.quote__ava-img--mark {
  display: flex; align-items: center; justify-content: center;
  background-color: var(--c-stone-light);
}
.quote__ava-img--mark img { width: 18px; height: 18px; object-fit: contain; }

/* ================================================================
   PROCESS. data-section="process", id="process"
   Height math (desktop, 900 tall): header 20vh(min200)=200 + hr1px +
   team 36vh(min360)=360 + button 20vh(min200)=200 -> 761 (~760 ref).
   ================================================================ */
.process {
  background-color: var(--c-cream);
  z-index: 1;
  display: flex;
  flex-flow: column;
  place-content: center flex-start;
  align-items: center;
  width: 100%;
  height: 70vh;
  min-height: 760px;
  overflow: hidden;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .process { height: min-content; min-height: unset; } }
@media (max-width: 809.98px) { .process { height: min-content; min-height: unset; } }

.process__header,
.process__button {
  z-index: 4;
  display: flex;
  width: 100%;
  height: 20vh;
  min-height: 200px;
  padding: 0 32px;
  position: relative;
}
@media (max-width: 809.98px) {
  .process__header { max-height: 140px; min-height: unset; order: 1; padding: 0 26px; height: min-content; }
  .process__button { max-height: 160px; min-height: unset; order: 3; padding: 0 26px; height: min-content; }
}

.process__header-inner,
.process__button-inner {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  place-content: center;
  align-items: center;
}
@media (max-width: 809.98px) { .process__header-inner { height: min-content; max-width: unset; } }

.process__header-part {
  display: flex;
  flex: 2 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-end;
  justify-content: flex-end;
  position: relative;
}
@media (max-width: 809.98px) { .process__header-part { flex: 1 0 0; height: min-content; align-items: center; } }
.process__header-body {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  width: 1px;
  align-items: flex-start;
  gap: 18px;
  padding: 0 0 42px;
}
@media (max-width: 809.98px) { .process__header-body { min-height: 133px; } }
.process__subheader { display: flex; width: 100%; align-items: center; }
.process__title-wrap {
  display: flex;
  width: 100%;
  max-width: 360px;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media (max-width: 809.98px) { .process__title-wrap { max-width: 250px; min-height: 32px; position: absolute; top: 50%; left: -2px; transform: translateY(-50%); } }
.process__title {
  --framer-paragraph-spacing: 0px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: -2px;
  transform: translateY(-50%);
}
@media (max-width: 809.98px) { .process__title { left: unset; right: -2px; position: relative; top: auto; transform: none; } }

.process__hr { width: 100%; height: 1px; position: relative; z-index: 3; }
.process__hr::after { content:""; position:absolute; inset:0; border:1px solid var(--c-stone); }

.process__team {
  z-index: 4;
  display: flex;
  width: 100%;
  height: 36%;
  min-height: 360px;
  padding: 0 32px;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .process__team { height: min-content; min-height: unset; } }
@media (max-width: 809.98px) { .process__team { height: min-content; min-height: unset; order: 2; padding: 0 26px; } }

.process__team-inner {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  place-content: center;
  align-items: center;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .process__team-inner { height: 250px; } }
@media (max-width: 809.98px) { .process__team-inner { height: min-content; min-height: 200px; } }

.process__message {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-start;
}
.process__message p {
  --framer-paragraph-spacing: 0px;
  max-width: 230px;
  padding: 72px 0 0;
  color: var(--c-graphite);
}
@media (min-width: 810px) and (max-width: 1439.98px) { .process__message p { max-width: 200px; padding: 72px 0 25px; } }

.process__persons {
  display: flex;
  flex-direction: column;
  flex: 2 0 0;
  width: 1px;
  height: 100%;
}
@media (max-width: 809.98px) { .process__persons { height: min-content; min-height: 200px; } }

.process__row {
  display: flex;
  flex: 1 0 0;
  width: 100%;
  height: 1px;
  align-items: center;
  justify-content: center;
}
@media (max-width: 809.98px) { .process__row { height: min-content; } }
/* Desktop keeps the name/role labels (unlike the <1440 grid above) but the
   reference still staggers rows 1 and 3's photo further right within its
   own half — confirmed by pixel-scanning the reference: Mia/Alicia's photo
   sits near the ava/info boundary, Milosh's stays flush left. */
@media (min-width: 1440px) {
  .process__row:nth-child(1) .process__ava,
  .process__row:nth-child(5) .process__ava { justify-content: flex-end; }
}

/* same border-box clamp as .vline: a 1px-tall box whose ::after carries 3px
   top+bottom borders can never paint shorter than 6px, so it needs clipping
   back to 1px or the dashed rule renders ~6x too heavy. */
.process__row-hr { width: 100%; height: 1px; position: relative; z-index: 3; overflow: var(--overflow-clip-fallback, clip); }
.process__row-hr::after { content:""; position:absolute; inset:0; border:3px dashed var(--c-stone-85); }

.process__person {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-end;
}
@media (max-width: 809.98px) { .process__person { justify-content: space-between; height: min-content; } }

.process__ava {
  display: flex;
  flex: 1 0 0;
  width: 50%;
  height: 100%;
  align-items: center;
  justify-content: flex-start;
}
@media (max-width: 809.98px) { .process__ava { width: 100%; } }
.process__ava-inner {
  flex: none;
  width: auto;
  height: 100%;
  max-height: 200px;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
}
@media (max-width: 809.98px) { .process__ava-inner { height: 200px; } }
.process__ava img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: var(--c-stone-light);
}

.process__person-info {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-end;
  justify-content: space-between;
}
@media (max-width: 809.98px) { .process__person-info { height: 200px; } }
.process__person-name {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  width: 1px;
  align-items: flex-start;
  padding: 0 0 26px;
}
/* reference renders team names in full caps (its source text is already
   mixed-case "Milosh Barkovitz" and still paints uppercase); our source copy
   is lowercase, so `capitalize` was rendering "Mia Connor" instead of
   "MIA CONNOR". */
.process__person-name p:first-child { text-transform: uppercase; color: var(--c-black); }

.process__button-part { display: flex; flex: 2 0 0; width: 1px; height: 100%; align-items: flex-start; }
@media (max-width: 809.98px) { .process__button-part { flex: 1 0 0; height: min-content; } }
.process__question {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-start;
}
.process__question-text {
  --framer-paragraph-spacing: 0px;
  max-width: 180px;
  height: 50%;
  align-items: flex-end;
  padding: 0 0 10px;
  display: flex;
}
.process__button-slot { display: flex; flex: 1 0 0; width: 1px; height: 57px; align-items: flex-end; justify-content: flex-end; }
@media (max-width: 809.98px) { .process__button-slot { height: min-content; padding: 40px 0 60px; } }

/* Team photo grid, tablet/laptop/phone (<1440). Reference drops the
   name/role labels entirely below desktop and instead staggers the
   3 photos left/right in alternating half-height rows (confirmed via
   pixel inspection of reference screenshots: each photo is ~1/3 of
   the row-stack height, alternating flex-end/flex-start/flex-end).
   Desktop keeps the original name+photo row layout untouched. */
@media (max-width: 1439.98px) {
  .process__person-info { display: none; }
  .process__ava { width: 25%; flex: none; }
  .process__ava-inner { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; opacity: 1; }
  /* The stagger is NOT alternating justify-content (all three of the
     reference's ava wrappers share one rule). It comes from DOM order: rows 1
     and 3 have a leading `-gap+line1` column (flex:1) before the ava (flex:1),
     so their photo sits in the RIGHT half and is left-aligned within it; row
     2's ava has no such preceding column, so it starts at the row's left edge.
     Reproduced here with margin-left:50% rather than an extra spacer node. */
  .process__row { justify-content: flex-start; }
  .process__row:nth-child(1) .process__ava,
  .process__row:nth-child(5) .process__ava { margin-left: 50%; }

  /* The button is bottom-aligned inside the TOP HALF of .process__button-part,
     exactly like .process__question-text beside it — not pinned to the top of
     the full-height column. Derived: part 216px/200px tall at tablet/laptop,
     slot 57px, so top+50%-57 = 2938 / 2695, matching the reference to the
     pixel at both breakpoints (a fixed 57px height put it 51px/43px high). */
  .process__button-slot { height: 50%; }
}
@media (max-width: 809.98px) {
  .process__ava { width: 50%; }
  .process__team-inner { height: 603px; min-height: 603px; }
  .process__persons { height: 100%; }
}

/* ----------------------------------------------------------------
   "Who you work with" — single founder card (content plan §5.5).
   The template's 3-row stack becomes 1 row. Three things have to be
   undone for that to read as deliberate rather than as a broken grid:

   1. The row must NOT stretch to the full column height — one 200px
      card pinned to the top of the stack, with the stack's own dashed
      rule under it, is the plan's "left-aligned, not stretched".
   2. The >=1440 stagger rule (`:nth-child(1) .process__ava {
      justify-content:flex-end }`) exists to offset rows 1 and 3 of a
      three-row column; with one row it just pushes the only card to
      the middle of the section, so it is reverted here — as is the
      <1440 `margin-left:50%` half of the same stagger.
   3. Below 1440 the reference hides the name/role labels because the
      photos alone carry a 3-person grid. A single unnamed tile says
      nothing, so the label column comes back at every width and the
      photo keeps its desktop 200px square instead of the stretched
      quarter-width crop.
   Row heights are unchanged (200px), so the section still measures the
   same at every breakpoint minus the two removed rows.
   ---------------------------------------------------------------- */
/* One 200px card centred in the 360px desktop team band puts its top edge at
   y+80 against the section message's 72px top padding — i.e. it still lines up
   with the copy beside it, and the leftover height reads as the band's own
   breathing room instead of a hole under the card. */
.process__persons--solo { justify-content: center; }
.process__row--solo { flex: none; height: 200px; }
/* 0,3,0 to match `.process__row:nth-child(1) .process__ava` in the >=1440 stagger
   block above — a plain `.process__row--solo .process__ava` (0,2,0) lost to it and
   the single card ended up right-aligned in the middle of the section. */
.process__persons--solo .process__row--solo .process__ava {
  flex: 1 0 0;
  width: 50%;
  margin-left: 0;
  justify-content: flex-start;
}
.process__row--solo .process__ava-inner {
  width: auto;
  height: 100%;
  max-height: 200px;
  aspect-ratio: 1;
}
.process__row--solo .process__person-info { display: flex; height: 100%; }
/* [CONFIRM] founder portrait — neutral mark tile until a real photo exists. */
.process__ava-inner--mark {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--c-stone-light);
}
.process__ava-inner--mark img { width: 48px; height: 48px; object-fit: contain; }
@media (max-width: 809.98px) {
  /* the phone column is pinned to 603px for three 200px rows; with one card
     that would leave 400px of dead space, so it collapses to the card. */
  .process__team-inner--solo { height: min-content; min-height: 201px; }
  .process__persons--solo .process__row--solo .process__ava { width: 50%; }
  /* the base phone rule pins the tile to a 200px square, which is wider than the
     50% column at 390 and pushed the tile straight over the name beside it. */
  .process__persons--solo .process__row--solo .process__ava-inner {
    width: 100%;
    height: auto;
    max-height: 200px;
    aspect-ratio: 1;
  }
}

/* ================================================================
   VALUE. data-section="value", id="value"
   Height math (desktop, 900 tall): header 20vh(min200)=200 + hr1px +
   items 40vh(min400)=400 + gap 13vh(max100)=100 -> 701 (~700 ref).
   ================================================================ */
.value {
  background-color: var(--c-white);
  z-index: 1;
  display: flex;
  flex-flow: column;
  place-content: center flex-start;
  align-items: center;
  width: 100%;
  height: 69vh;
  min-height: 700px;
  overflow: hidden;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .value { height: min-content; } }
@media (max-width: 809.98px) { .value { height: min-content; min-height: 693px; } }

.value__header {
  z-index: 4;
  display: flex;
  width: 100%;
  height: 20vh;
  min-height: 200px;
  padding: 0 32px;
  position: relative;
}
@media (max-width: 809.98px) { .value__header { align-items: center; height: min-content; min-height: 140px; padding: 0 26px; } }

.value__header-inner {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  place-content: center;
  align-items: center;
}
@media (max-width: 809.98px) { .value__header-inner { height: min-content; max-width: unset; } }

.value__header-part {
  display: flex;
  flex: 2 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-end;
  justify-content: flex-end;
}
@media (max-width: 809.98px) { .value__header-part { flex: 1 0 0; align-items: center; height: min-content; } }
.value__header-body {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  width: 1px;
  align-items: flex-start;
  gap: 18px;
  padding: 0 0 42px;
}
/* position:relative so the absolutely-parked phone .value__title-wrap
   (left:-3px below) anchors HERE — inside the 26px page padding — and not
   to the full-width .value__header, which put "Why us" flush against the
   viewport edge. Same anchor pattern as .help__header-body / .help__title. */
@media (max-width: 809.98px) { .value__header-body { min-height: 133px; padding: 0; position: relative; } }
.value__subheader { display: flex; width: 100%; align-items: center; }
.value__title-wrap {
  display: flex;
  width: 100%;
  max-width: 370px;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  position: relative;
}
@media (max-width: 809.98px) { .value__title-wrap { width: 336px; position: absolute; top: 50%; left: -3px; transform: translateY(-50%); } }
.value__title {
  --framer-paragraph-spacing: 0px;
  width: 100%;
  position: absolute;
  top: 50%;
  left: -1px;
  transform: translateY(-50%);
}
@media (max-width: 809.98px) { .value__title { left: unset; right: -2px; } }

.value__hr { width: 100%; height: 1px; position: relative; z-index: 3; }
.value__hr::after { content:""; position:absolute; inset:0; border:1px solid var(--c-stone-75); }

.value__body {
  z-index: 4;
  display: flex;
  width: 100%;
  height: 40vh;
  min-height: 400px;
  padding: 0 32px;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .value__body { height: 500px; } }
@media (max-width: 809.98px) { .value__body { height: min-content; min-height: unset; padding: 0 26px; } }

.value__body-inner {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  place-content: center;
  align-items: center;
}
@media (max-width: 809.98px) { .value__body-inner { height: min-content; max-width: unset; flex-direction: column; } }

.value__message {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-start;
}
@media (max-width: 809.98px) { .value__message { flex: none; justify-content: space-between; width: 100%; height: min-content; } }
.value__quote {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  width: 1px;
  align-items: flex-start;
  gap: 10px;
  padding: 72px 0 0;
}
@media (max-width: 809.98px) { .value__quote { justify-content: flex-start; padding: 0 0 42px; } }
.value__quote-person { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.value__quote-ava-row { display: flex; align-items: center; gap: 10px; width: 100%; }
/* the reference Ava box is 32px and clips the 34px source image (identical at
   every breakpoint); a 34px box pushed the quote text 2px down, and the 12px
   quote gap added another 2. */
.value__quote-ava { width: 32px; height: 32px; flex: none; border-radius: 50%; overflow: hidden; }
.value__quote-ava img { width: 100%; height: 100%; object-fit: cover; }
/* [CONFIRM] founder photo. The template's stock portrait is not reused under a
   real name; the slot keeps its 32px box and holds the Autnex mark instead, so
   nothing in the quote block moves. */
.value__quote-ava--mark {
  display: flex; align-items: center; justify-content: center;
  background-color: var(--c-stone-light);
}
.value__quote-ava--mark img { width: 17px; height: 17px; object-fit: contain; }
/* reference renders this caps like every other mono label; our source copy is
   lowercase so `none` left it as "mia connor, ceo". */
.value__quote-name p { text-transform: uppercase; }
.value__quote-text p { --framer-paragraph-spacing: 0px; color: var(--c-black); text-wrap: balance; }

.value__items {
  display: flex;
  flex-direction: column;
  flex: 2 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-start;
}
/* NB: the reference's phone rule for the Items column is only
   "flex:none;width:100%;height:min-content".  The order:1 / max-height:200px
   belong to the individual blocks ROWS (see .value__blocks-row below); capping
   the whole column at 200px collapsed both rows into one 200px box and made
   card 03 overlap "+ much more". */
@media (max-width: 809.98px) { .value__items { flex: none; width: 100%; height: min-content; } }

.value__blocks-row {
  display: flex;
  flex: 1 0 0;
  width: 100%;
  height: 1px;
  align-items: center;
}
@media (max-width: 809.98px) {
  .value__blocks-row       { flex: none; order: 1; height: min-content; max-height: 200px; }
  .value__blocks-row--more { flex: none; order: 4; height: min-content; max-height: 200px; }

  /* What actually gives each card row its 200px on phone is the vertical rule
     inside every block: the reference switches those from height:100% to a
     fixed 200px (and thins their dashed borders 3px -> 2px).  The row's own
     height:min-content then resolves to 200 and max-height:200px pins it.
     Without this the rows collapse to ~110px and the card titles sit directly
     under the number tile instead of at the bottom of the cell. */
  .value__items .vline--full { height: 200px; }
  .value__items .vline--orange,
  .value__items .vline--orange95,
  .value__items .vline--faint2 {
    --border-top-width: 2px;  --border-right-width: 2px;
    --border-bottom-width: 2px; --border-left-width: 2px;
  }

  /* "+ much more" is an equal-width column on phone (flex:2 -> flex:1), and its
     text container carries the same 200px cell height. */
}
.value__blocks-row--more { position: relative; }

.value__hr-row { width: 100%; height: 1px; position: relative; z-index: 3; overflow: var(--overflow-clip-fallback, clip); }
.value__hr-row::after { content:""; position:absolute; inset:0; border:3px dashed var(--c-stone-65); }
/* Both hor lines are visible on phone and are re-ordered around the two card
   rows: the trailing one moves to the top (order:0) and the middle one stays
   between the rows (order:3).  Border thins from 3px to 2px on phone. */
@media (max-width: 809.98px) {
  .value__hr-row { order: 3; }
  .value__hr-row::after { border-width: 2px; }
  .value__hr-row--top { order: 0; }
}
.value__hr-row--top::after { border-width: 2px; }

.value__block {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-end;
}
@media (max-width: 809.98px) { .value__block { height: min-content; } }
.value__block-inner {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
}
@media (max-width: 809.98px) { .value__block-inner { align-self: stretch; height: auto; } }
/* the reference "Number" box is a fixed 57x57 cream tile (background-color set
   inline on the element, so it applies at every breakpoint), not a shrink-wrapped
   run of text. */
.value__block-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  height: 57px;
  width: 57px;
  padding: 0 10px 0 0;
  background-color: var(--c-cream);
  overflow: var(--overflow-clip-fallback, clip);
}
.value__block-num-dot { color: var(--c-orange); white-space: pre; }
.value__block-num-val { color: var(--c-black); white-space: pre; }
.value__block-title {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 170px;
  padding: 0 0 26px;
}
.value__block-title h3 { flex: 1 0 0; width: 1px; }
.value__block-desc {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  max-width: 180px;
  align-items: center;
  padding: 0 0 26px;
}
.value__block-desc p { flex: 1 0 0; width: 1px; color: var(--c-body); }

.value__more {
  display: flex;
  flex: 2 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-end;
  position: relative;
}
.value__more-text {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-end;
  gap: 10px;
  padding: 0 0 24px;
}
.value__more-text h3 { flex: 1 0 0; width: 1px; }
.value__more-text .t-orange { color: var(--c-orange); }

/* Phone: "+ much more" becomes an equal-width column (flex:2 -> flex:1) so it
   starts at the same 50% gridline as ".02" in the row above, and its text
   container carries the same 200px cell height as the cards.
   These must sit AFTER the base rules above — same specificity, later wins. */
@media (max-width: 809.98px) {
  .value__more      { flex: 1 0 0; height: min-content; }
  .value__more-text { height: 200px; padding: 0 0 26px; justify-content: center; }
}

.value__gap {
  z-index: 4;
  display: flex;
  width: 100%;
  height: 13vh;
  max-height: 100px;
  padding: 0 32px;
  position: relative;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .value__gap { height: 100px; } }
@media (max-width: 809.98px) { .value__gap { height: min-content; } }

/* ---------------------------------------------------------------
   Shared image treatment: process/team member and value ceo avatars.
   ---------------------------------------------------------------- */
/* NB: the fill belongs on the image box, not on .process__ava — that is the
   50%-width flex *cell* (458px at desktop) holding a 119px portrait, so
   filling it painted a wide beige slab across each team row. `.process__ava
   img` above already carries the placeholder fill for the portraits. */
.value__quote-ava { background-color: var(--c-stone-light); }

/* ================================================================
   NUMBERS — "Result numbers" stat band. Untracked in
   reference-heights.json (no fragment file, no data-section key was
   captured for it) but it IS a real in-flow section in the live
   reference — sits between `value` and `process` in document order
   (raw/desktop/about.html: id="value" @283514, id="numbers" @303721,
   id="process" @309287). Confirmed by the ~200px gap between our
   summed section heights and the reference's own `_page` total, and
   by the reference screenshot's actual pixel height (1440x5356).
   Kept as its own data-section="numbers" for debugging; compare.mjs
   ignores keys that aren't in the oracle, so this never fails QA.
   ================================================================ */
.numbers {
  background-color: var(--c-graphite);
  z-index: 4;
  display: flex;
  width: 100%;
  height: 20vh;
  min-height: 200px;
  padding: 0 32px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 809.98px) {
  .numbers { height: min-content; min-height: unset; flex-direction: column; padding: 0 26px; }
}

.numbers__inner {
  z-index: 10;
  display: flex;
  flex: 1 0 0;
  width: 1px;
  max-width: var(--page-max);
  height: 100%;
  position: relative;
}
@media (max-width: 809.98px) {
  .numbers__inner { height: min-content; max-width: unset; flex-direction: column; justify-content: flex-start; width: 100%; }
}

.numbers__item {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  height: 100%;
  align-items: flex-start;
}
@media (max-width: 809.98px) { .numbers__item { flex: none; width: 100%; height: min-content; } }

.numbers__group {
  display: flex;
  flex: 2 0 0;
  width: 1px;
  height: 100%;
  justify-content: space-between;
}
@media (max-width: 809.98px) { .numbers__group { flex-direction: column; flex: none; justify-content: flex-start; gap: 0; width: 100%; height: min-content; } }

.numbers__info {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  width: 1px;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 0 26px;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .numbers__info-row { flex-direction: column; } }
@media (max-width: 809.98px) { .numbers__info { justify-content: center; gap: 24px; height: min-content; padding: 32px 0; } }

/* the two items inside .numbers__group (98% / 60%) only get bottom
   padding at phone, not top+bottom — reference framer-1wyliqg /
   framer-1c6mmvx use `padding:0 0 32px` vs. the first item's
   framer-963d6n `padding:32px 0`. */
@media (max-width: 809.98px) { .numbers__info--group { padding: 0 0 32px; } }

.numbers__info-row {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 12px;
}
@media (min-width: 810px) and (max-width: 1439.98px) { .numbers__info-row { flex-direction: column; } }
@media (max-width: 809.98px) { .numbers__info-row { flex-direction: column; } }

.numbers__value {
  display: flex;
  align-items: center;
  width: min-content;
}
.numbers__value p { white-space: pre; color: var(--c-white); }

.numbers__label {
  display: flex;
  flex: 1 0 0;
  width: 1px;
  max-width: 180px;
  align-items: flex-start;
}
@media (min-width: 810px) and (max-width: 1439.98px),
       (max-width: 809.98px) {
  .numbers__label { flex: none; width: 100%; }
}
.numbers__label p { color: var(--c-white); }

.numbers__noise {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}
.numbers__noise-img {
  position: absolute;
  inset: -200%;
  width: 400%;
  height: 400%;
  opacity: .05;
  background-image: url('/assets/images/rR6HYXBrMmX4cRpXfXUOvpvpB0.png');
  transform: translateX(-5%) translateY(25%);
}

/* ================================================================
   WORD-REVEAL STAGGER OVERRIDES  (measured live 2026-08-19)
   ----------------------------------------------------------------
   The reference word-fades ~every mono caption AND the Inter body
   paragraphs on this page (opacity only, translateX residue is 0 —
   verified by sampling armed spans: o=0.001, t=matrix(1,0,0,1,0,0)).
   The reveal itself comes from data-split-text="words" in the HTML +
   the shared js/text-reveal.js runtime; nothing else is needed here.

   The one parameter the shared preset (0.12s/word) gets wrong on this
   page: the live effect spreads its stagger over a roughly FIXED
   ~0.87s window regardless of word count (measured: 29-word belief
   ~30ms/word ending at ~870ms; 16-word hero mission ~55ms/word ending
   ~880ms; 10-word value descs ~96ms/word ending ~865ms; short 2-4
   word captions land at the 120-150ms/word the preset already has).
   So long paragraphs get a per-element --sr-stagger override; the
   var is defined by text-reveal.css on [data-split-text], overriding
   it here is the supported hook. Opacity-only => height-invariant.
   No reduced-motion guard needed: text-reveal.js never arms (never
   adds html.js-split) under reduced motion, and these are vars only.
   ================================================================ */
.her__mission p[data-split-text]      { --sr-stagger: .055s; } /* 16 words / ~880ms */
.main-info__belief p[data-split-text] { --sr-stagger: .03s;  } /* 29 words / ~870ms */
.value__block-desc p[data-split-text] { --sr-stagger: .095s; } /* ~10 words / ~865ms */