/* ===========================================================================
   About — rebuilt 2026-10-01 on the Home page's section system.

   home.css carries the shells, the splits, the heads, the buttons and the
   reveals. This file holds only what is About's own: the opening plate, the
   thesis, the five realities, the elevation (the one composition kept from
   the previous page), the brace, the philosophy and the close.

   Blue Lily REVEALS here. There is no ambient drift: a petal arrives beside
   the thesis, the flow's stops carry their own, and the lily opens at the
   close. Everything else is type, rule and light.

   AUTHORED STILL: every composition is written in its finished form, and
   `.ab-motion` / `.ab-wide` only switch the moving version on.
   =========================================================================== */
:root {
  /* the MedhaSofts palette. home.css resolves the shared button and section
     rules against these, and each page's own stylesheet supplies them. */
  --bl-midnight: #0B1630;
  --bl-deep-navy: #10264A;
  --bl-royal: #2563EB;
  --bl-electric: #4DA8FF;
  --bl-soft: #93C5FD;
  --bl-teal: #14B8A6;
  --bl-violet: #8B5CF6;
  --bl-coral: #F28B82;
  --bl-off-white: #F8FAFC;
  --bl-dark: #0F172A;
  --bl-slate: #475569;

  --ab-ease: cubic-bezier(.22, .61, .36, 1);
  --ab-slow: cubic-bezier(.16, .84, .3, 1);

  /* ONE type scale for the page: a page this long only holds together if
     the reader keeps meeting the same intervals. */
  --ab-t-voice: var(--t-hero);      /* the claim */
  --ab-t-display: var(--t-display); /* every large moment */
  --ab-t-statement: var(--t-h2);                          /* a named step */
  --ab-t-lead: clamp(1.02rem, .98rem + .18vw, 1.16rem);   /* reading size */
  --ab-label: 11px;

  /* and one measure: no line of reading text runs past it */
  --ab-measure: 62ch;
  --ab-measure-tight: 44ch;
}

/* ============================================================== 1 open ====
   The lobby at dusk, and the claim standing on it. The photograph is the
   section's ground rather than a picture inside it, so the page opens in a
   place before it opens on an argument. */
.ab-open {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  /* flex-start, not flex-end. Bottom-pinning the container inside the 660px
     photo band put About's breadcrumb at 249px while every other page's sits
     at 95px -- the padding-top was correct and the alignment was overriding
     it. The photograph keeps its full height; only the copy moves up. */
  align-items: flex-start;
  min-height: clamp(540px, 62vh, 660px);
  padding-block: var(--v2-pad-hero) var(--v2-pad);
  color: #FFFFFF;
  background-color: #0B1630;
}
.ab-open__media { position: absolute; inset: 0; z-index: -1; }
.ab-open__media picture, .ab-open__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the scrim is the only thing between the photograph and the words: it
   rises from the lower left, where the type sits, and leaves the far side
   of the room alone */
.ab-open__scrim {
  position: absolute;
  inset: 0;
  background:
    /* The upper stops were raised after the hero was shortened: the copy now
       sits over a brighter part of the photograph, and the pixel probe caught
       one 80px run of the lead at 2.74:1 where it needs 3.0. */
    linear-gradient(to top, rgba(7, 14, 33, .95) 0%, rgba(7, 14, 33, .82) 30%,
                    rgba(7, 14, 33, .46) 62%, rgba(7, 14, 33, .24) 100%),
    linear-gradient(to right, rgba(7, 14, 33, .78), rgba(7, 14, 33, 0) 68%);
}
.ab-open__inner { position: relative; width: 100%; }
.ab-open__copy { max-width: 54rem; }
.ab-open .v2-head h1 {
  margin: 0;
  font-size: var(--ab-t-voice);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #FFFFFF;
}
.ab-open .v2-head h1 em { font-style: normal; color: #BFDBFE; }
.ab-open .v2-eyebrow { color: #BFDBFE; }
.ab-open .v2-lead {
  max-width: var(--ab-measure);
  margin-top: clamp(18px, 2vw, 28px);
  font-size: var(--ab-t-lead);
  color: #D7E3F7;
}
.ab-open .crumbs, .ab-open .crumbs a { color: #BFDBFE; }

/* ============================================================ 2 belief ====
   The page's thesis, alone on white, at the largest size the page uses.
   One petal arrives beside it: on this page the lily marks where a thought
   lands, and this is the first. */
.ab-belief { padding-block: var(--v2-pad); }
.ab-belief__inner { position: relative; max-width: 52rem; margin-inline: auto; }
.ab-belief .v2-eyebrow { text-align: center; }
.ab-belief__claim {
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  font-family: var(--font-display);
  font-size: var(--ab-t-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.034em;
  text-align: center;
  text-wrap: balance;
  color: var(--bl-midnight);
}
/* the petal lands directly under the claim, not at the foot of the block:
   on this page the lily marks where a thought arrives */
.ab-belief__petal {
  display: block;
  width: 18px;
  height: 40px;
  margin: clamp(26px, 3vw, 40px) auto 0;
  color: var(--bl-soft);
  opacity: .55;
  pointer-events: none;
}
.ab-belief__petal svg { width: 100%; height: 100%; }
.ab-belief__body, .ab-belief__turn {
  max-width: var(--ab-measure);
  margin-inline: auto;
  font-size: var(--ab-t-lead);
  line-height: 1.68;
  text-align: center;
  color: var(--bl-slate);
}
.ab-belief__body { margin-top: clamp(68px, 7vw, 104px); }
/* the turn: the same thought, said as a commitment */
.ab-belief__turn {
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid rgba(37, 99, 235, .16);
  font-family: var(--font-display);
  font-size: clamp(1.14rem, 1rem + .6vw, 1.5rem);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.02em;
  color: var(--bl-midnight);
}

/* ============================================================== 3 work ====
   The people, and beneath them the five realities any business has, set on
   one rule. "Every business has its own reality", made countable. */
.ab-realities {
  position: relative;
  margin-top: clamp(54px, 6vw, 86px);
}
.ab-realities__rule {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(37, 99, 235, .42),
              rgba(37, 99, 235, .14) 72%, transparent);
}
.ab-rls {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3.4vw, 54px);
  margin: 0;
  padding: clamp(20px, 2.4vw, 32px) 0 0;
  list-style: none;
}
.ab-rl {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .92rem + .5vw, 1.34rem);
  font-weight: 600;
  letter-spacing: -.022em;
  color: var(--bl-midnight);
}
.ab-realities__note {
  margin: clamp(22px, 2.6vw, 34px) 0 0;
  font-size: var(--text-sm);
  color: var(--bl-slate);
}

/* ====================================================== 4 architecture ====
   Understanding, constructed. Six strata rise from the ground of the
   business, each narrower and further in than the one below, so the whole
   reads as a structure in elevation rather than a chart. Kept from the
   previous page: nothing else on the site draws this, and the page needs
   one composition that is only here. */
.ab-arch { padding-block: var(--v2-pad-loose); }
.ab-arch__head { max-width: 46rem; }
/* the left pane carried a heading and one closing line against a 6fr diagram,
   which read as an empty column rather than as negative space */
.ab-arch__body {
  margin: var(--space-5) 0 0;
  max-width: 58ch;
  font-size: var(--ab-t-lead);
  line-height: 1.7;
  color: var(--bl-slate);
}
.ab-arch__end {
  margin: clamp(40px, 4.6vw, 68px) 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem);
  font-weight: 600;
  letter-spacing: -.026em;
  color: #FFFFFF;
}
.ab-elev {
  position: relative;
  width: 100%;
  max-width: 1080px;
  aspect-ratio: 1 / .56;
  margin: clamp(52px, 6vw, 96px) 0 0;
}
.ab-elev__ground {
  position: absolute;
  left: 0; right: 0; bottom: 3%;
  height: 1px;
  background: linear-gradient(90deg, rgba(147, 197, 253, .5), rgba(147, 197, 253, .06) 88%, transparent);
}
.ab-strata { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.ab-st {
  position: absolute;
  left: calc(var(--x) * 1%);
  bottom: calc(3% + var(--i) * 15.4%);
  width: calc(var(--w) * 1%);
  height: 0;
}
.ab-st__rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  transform-origin: 0 50%;
  background: linear-gradient(90deg, #93C5FD, rgba(147, 197, 253, .55) 62%, rgba(147, 197, 253, .12));
}
/* the band of light the stratum carries */
.ab-st__glow {
  position: absolute;
  left: 0; right: 0; bottom: 1px;
  height: clamp(10px, 1.5vw, 22px);
  transform-origin: 0 100%;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0), rgba(59, 130, 246, .3));
}
/* a thin face under the rule: the stratum has thickness */
.ab-st__face {
  position: absolute;
  left: .8%; right: -.8%; top: 0;
  height: clamp(4px, .55vw, 9px);
  transform-origin: 0 0;
  background: linear-gradient(180deg, rgba(11, 22, 48, .85), rgba(11, 22, 48, 0));
  border-top: 1px solid rgba(96, 165, 250, .22);
}
.ab-st__name {
  position: absolute;
  right: 0; bottom: calc(100% + 10px);
  font-family: var(--font-label, var(--font-display));
  font-size: clamp(11px, .78vw, 13px);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #CFE0F8;
}
.ab-elev__cols { position: absolute; inset: 0; }
.ab-col {
  position: absolute;
  left: calc(var(--x) * 1%);
  bottom: calc(3% + var(--a) * 15.4%);
  height: calc((var(--b) - var(--a)) * 15.4%);
  width: 1px;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg, rgba(147, 197, 253, .05), rgba(147, 197, 253, .3));
}
.ab-elev__light {
  position: absolute;
  left: -6%; right: -6%; bottom: 0;
  height: 62%;
  pointer-events: none;
  background: radial-gradient(60% 100% at 32% 100%, rgba(37, 99, 235, .3), transparent 72%);
}

/* ============================================================ 7 people ====
   The human principle, and the philosophy that follows from it: three
   numbered lines, read as one sentence each. */
.ab-people { padding-block: var(--v2-pad); }
.ab-people__inner { display: grid; gap: clamp(44px, 5vw, 76px); }
.ab-people__head { max-width: 46rem; }
.ab-phil { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ab-ph {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 40px);
  align-items: baseline;
  padding: clamp(22px, 2.6vw, 34px) 0;
  border-top: 1px solid rgba(37, 99, 235, .14);
}
.ab-ph:last-child { border-bottom: 1px solid rgba(37, 99, 235, .14); }
.ab-ph__n {
  font-family: var(--font-display);
  font-size: var(--ab-label);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--bl-royal);
}
.ab-ph p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.3rem);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.03em;
  color: var(--bl-slate);
}
.ab-ph strong { font-weight: 700; color: var(--bl-midnight); }

/* ============================================================== 7 next ====
   The close is the site's own finale (home.css): the sky, the bloom and the
   rising petals are shared with every other content page. About adds only
   the line and the three routes beneath the buttons. */
.ab-next__also {
  margin: clamp(44px, 5vw, 70px) 0 0;
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid rgba(147, 197, 253, .18);
  font-size: var(--text-sm);
  color: #A8BCDC;
}
.ab-routes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px clamp(20px, 3vw, 36px);
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  padding: 0;
  list-style: none;
}
.ab-routes .v2-link { color: #BFDBFE; }

/* ======================================================= moving: reveals ==
   Everything above is the finished state. These rules only hold a piece
   back until it has been seen, and let it arrive. */
.ab-motion [data-ab-reveal] { opacity: 0; transform: translate3d(0, 16px, 0); }
.ab-motion [data-ab-reveal].is-shown {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ab-ease), transform .8s var(--ab-ease);
}
/* the strata draw from the ground of the business upward, one after another */
.ab-motion .ab-st__rule, .ab-motion .ab-st__glow, .ab-motion .ab-st__face,
.ab-motion .ab-col { transform: scaleX(0); }
.ab-motion .ab-st__glow, .ab-motion .ab-col { transform: scaleY(0); }
.ab-motion .ab-st__name { opacity: 0; }
.ab-motion .ab-elev.is-shown .ab-st__rule,
.ab-motion .ab-elev.is-shown .ab-st__face {
  transform: none;
  transition: transform .9s var(--ab-slow) calc(.08s + var(--i) * .11s);
}
.ab-motion .ab-elev.is-shown .ab-st__glow,
.ab-motion .ab-elev.is-shown .ab-col {
  transform: none;
  transition: transform .8s var(--ab-slow) calc(.18s + var(--i) * .11s);
}
.ab-motion .ab-elev.is-shown .ab-st__name {
  opacity: 1;
  transition: opacity .6s var(--ab-ease) calc(.34s + var(--i) * .11s);
}
/* the five realities arrive along their rule */
.ab-motion .ab-realities__rule { transform: scaleX(0); }
.ab-motion .ab-realities.is-shown .ab-realities__rule {
  transform: none;
  transition: transform 1s var(--ab-slow);
}
.ab-motion .ab-rl { opacity: 0; transform: translate3d(0, 10px, 0); }
.ab-motion .ab-realities.is-shown .ab-rl {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ab-ease) calc(.22s + var(--i) * .08s),
              transform .6s var(--ab-ease) calc(.22s + var(--i) * .08s);
}
/* the philosophy, line by line */
.ab-motion .ab-ph { opacity: 0; transform: translate3d(0, 14px, 0); }
.ab-motion .ab-phil.is-shown .ab-ph {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ab-ease) calc(var(--i) * .11s),
              transform .7s var(--ab-ease) calc(var(--i) * .11s);
}
/* ============================================================= responsive */
@media (max-width: 1023px) {
  .ab-open { min-height: min(720px, calc(100vh - 72px)); }
}
@media (max-width: 767px) {
  /* the elevation is redrawn upright: the strata keep their order and their
     widths, but stack as a column so the names stay readable */
  .ab-elev { aspect-ratio: auto; display: grid; gap: 10px; }
  .ab-strata { position: static; display: grid; gap: 10px; }
  .ab-st {
    position: static;
    width: calc(var(--w) * 1%);
    min-width: 54%;
    height: auto;
    padding: 10px 0 0;
  }
  .ab-st__name { position: static; display: block; text-align: left; }
  .ab-st__glow { position: static; display: block; height: 6px; }
  .ab-st__rule { position: static; display: block; }
  .ab-st__face, .ab-elev__cols, .ab-elev__ground { display: none; }
  .ab-rls { gap: 12px 22px; }
}

/* ==========================================================================
   03 THE SHAPING
   --------------------------------------------------------------------------
   A new radial light system, and deliberately none of the ones the site
   already has. Thirty-six rays leave a fixed core, each a different length;
   their tips trace an irregular outline (three harmonics summed in the
   builder, so it is organic but deterministic and never a circle). The core
   is the business. The light takes the shape the core gives it rather than
   imposing one — which is the sentence this section carries.

   AUTHORED STILL: every ray stands at full length and the core is lit.
   ========================================================================== */
.ab-shaping { padding-block: var(--v2-pad); }
.ab-shaping__inner {
  display: grid;
  gap: clamp(40px, 5vw, 76px);
  align-items: center;
}
@media (min-width: 1024px) {
  .ab-shaping__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .ab-shaping__inner .v2-eyebrow, .ab-shaping__claim { grid-column: 1; }
  .ab-shaping__claim { margin-bottom: 0; }
  .ab-lat { grid-column: 2; grid-row: 1 / span 2; }
}

/* ---- THE LATTICE -------------------------------------------------------
   Base sizing lives OUTSIDE the media query. It was inside it, which left
   the structure 0px tall below 1024 and collapsed the whole section. */
.ab-lat {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 1;
  margin-inline: auto;
}
/* one segment: placed at its start point, as long as the span it covers and
   turned to its bearing. Straight lines only — this is a structure. */
.ab-lat__edge, .ab-lat__tie {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--l);
  height: 1.5px;
  margin-top: -.75px;
  transform-origin: 0 50%;
  transform: rotate(var(--r));
  border-radius: 2px;
}
.ab-lat__edge { background: rgba(147, 197, 253, .62); }
.ab-lat__edge--r0 { background: rgba(219, 234, 254, .85); height: 2px; }
.ab-lat__edge--r1 { background: rgba(96, 178, 255, .55); }
.ab-lat__edge--r2 { background: rgba(167, 139, 250, .45); }
.ab-lat__tie { background: linear-gradient(90deg, rgba(147,197,253,.5), rgba(139,92,246,.16)); height: 1px; }
.ab-lat__node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 7px; height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: var(--petal-soft);
  box-shadow: 0 0 10px rgba(147, 197, 253, .8);
}
.ab-lat__core {
  position: absolute;
  left: 50%; top: 50%;
  width: 58px; height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #DBEAFE, #93C5FD 56%, rgba(37, 99, 235, .3));
  box-shadow: 0 0 36px rgba(147, 197, 253, .7);
}
.ab-lat__glow {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77, 168, 255, .18), transparent 72%);
}

/* ---------------------------------------------------------------- motion -- */
/* The rays draw outward from the core, going round the circle once. Nothing
   loops: the outline arrives and then stands. */
/* the structure builds itself: every segment draws out from its own start
   point, in the order it was generated — rings first, then the ties. */
.ab-motion .ab-lat__edge, .ab-motion .ab-lat__tie {
  transform: rotate(var(--r)) scaleX(0);
  transition: transform .8s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .012s);
}
.ab-motion .ab-lat.is-shown .ab-lat__edge,
.ab-motion .ab-lat.is-shown .ab-lat__tie { transform: rotate(var(--r)) scaleX(1); }
.ab-motion .ab-lat__node {
  opacity: 0; transform: scale(.3);
  transition: opacity .5s ease calc(.5s + var(--i) * .012s),
              transform .6s cubic-bezier(.34, 1.26, .64, 1) calc(.5s + var(--i) * .012s);
}
.ab-motion .ab-lat.is-shown .ab-lat__node { opacity: 1; transform: none; }
.ab-motion .ab-lat__core {
  opacity: 0;
  transform: scale(.3);
  transition: opacity .7s ease .15s, transform .9s cubic-bezier(.34, 1.26, .64, 1) .15s;
}
.ab-motion .ab-lat.is-shown .ab-lat__core { opacity: 1; transform: none; }
.ab-motion .ab-lat__glow { opacity: 0; transition: opacity 1.6s ease .5s; }
.ab-motion .ab-lat.is-shown .ab-lat__glow { opacity: 1; }

/* ==========================================================================
   Rebuilt 2026-10-02: Who we are / Vision / Mission / Experience / How we work
   ========================================================================== */
.ab-who__inner, .ab-mission__head { max-width: 74ch; }
.ab-who__turn, .ab-vision__claim {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
  padding-left: clamp(18px, 2.6vw, 34px);
  border-left: 2px solid rgba(37, 99, 235, .22);
}
.ab-who__petal {
  position: absolute;
  left: clamp(-18px, -2.2vw, -12px);
  top: -12px;
  width: 24px; height: 52px;
  color: var(--petal-electric);
  opacity: .5;
  transform: rotate(14deg);
  transform-origin: 50% 100%;
}
.ab-who__petal svg { width: 100%; height: 100%; }
.ab-who__claim {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 650;
  line-height: 1.14;
  letter-spacing: -.024em;
  color: var(--bl-midnight);
  max-width: 24ch;
  text-wrap: balance;
}
.ab-who__body {
  margin: var(--space-4) 0 0;
  max-width: 58ch;
  font-size: var(--ab-t-lead);
  line-height: 1.68;
  color: var(--bl-slate);
}

/* ---- vision: the lattice sits beside the words ------------------------- */
.ab-vision__inner { display: grid; gap: clamp(36px, 4.6vw, 70px); align-items: center; }
@media (min-width: 1024px) {
  .ab-vision__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
.ab-vision__claim {
  margin-top: clamp(26px, 3vw, 40px);
  border-left-color: rgba(147, 197, 253, .4);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.4;
  color: #E8F0FE;
  max-width: 42ch;
}
.ab-vision__claim em {
  font-style: normal;
  background: linear-gradient(100deg, var(--bl-soft), var(--bl-electric) 46%, var(--bl-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- mission: four held practices -------------------------------------- */
.ab-mission__list {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
  margin: clamp(32px, 4vw, 56px) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .ab-mission__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ab-mi {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
  padding: clamp(18px, 2.2vw, 26px) 0 0;
  border-top: 1px solid rgba(37, 99, 235, .18);
}
.ab-mi__n {
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  color: #1D4ED8;
  padding-top: 4px;
}
.ab-mi h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 650;
  letter-spacing: -.015em;
  color: var(--bl-midnight);
}
.ab-mi p {
  margin: 6px 0 0;
  font-size: var(--ab-t-lead);
  line-height: 1.62;
  color: var(--bl-slate);
}
.ab-motion .ab-mi {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .6s var(--ab-ease, cubic-bezier(.22,.61,.36,1)) calc(var(--i) * .08s),
              transform .6s var(--ab-ease, cubic-bezier(.22,.61,.36,1)) calc(var(--i) * .08s);
}
.ab-motion .ab-mission__list.is-shown .ab-mi { opacity: 1; transform: none; }

/* ---- experience now sits on the dark ----------------------------------- */
.ab-exp .ab-realities__note, .ab-exp .ab-rl { color: #C9D8EE; }
.ab-exp .ab-realities__rule { background: linear-gradient(90deg,
  rgba(77,168,255,0), var(--bl-electric) 18%, var(--bl-violet) 86%, rgba(139,92,246,0)); }
/* how-we-work moved to the light, so its strata take ink colours */
.ab-arch .ab-st__name { color: var(--bl-midnight); }
.ab-arch .ab-arch__end { color: #1D4ED8; }

/* ==========================================================================
   02 THE ORIGIN — why the software exists
   ========================================================================== */
.ab-origin__inner { display: grid; gap: clamp(32px, 4vw, 60px); }
@media (min-width: 1024px) {
  .ab-origin__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.ab-origin__copy { max-width: 64ch; }
.ab-origin__body {
  margin: var(--space-5) 0 0;
  max-width: 60ch;
  font-size: var(--ab-t-lead);
  line-height: 1.7;
  color: var(--bl-slate);
}
.ab-origin__turn {
  margin: clamp(20px, 2.4vw, 30px) 0 0;
  max-width: 46ch;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -.012em;
  color: var(--bl-midnight);
}
.ab-origin__marks { display: grid; gap: clamp(16px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.ab-origin__mark {
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid rgba(37, 99, 235, .18);
}
.ab-origin__k {
  display: block;
  font-family: var(--font-label);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #1D4ED8;
}
.ab-origin__mark p {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--bl-slate);
}
.ab-motion .ab-origin__mark {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1) calc(var(--i) * .1s),
              transform .6s cubic-bezier(.22,.61,.36,1) calc(var(--i) * .1s);
}
.ab-motion .ab-origin__marks.is-shown .ab-origin__mark { opacity: 1; transform: none; }

/* ==========================================================================
   03 THE APERTURE — vision is seeing clearly
   Eight petals set as iris blades around a focal point, each overlapping the
   next the way an aperture's blades do. The brand's own mark doing the work
   of a blade: the same petal, a different job.
   ========================================================================== */
.ab-ap { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin-inline: auto; }
.ab-ap__blades, .ab-ap__rays { position: absolute; inset: 0; }
.ab-ap__blade {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 208px;
  margin: -168px 0 0 -46px;          /* base at the centre, tip outward */
  transform-origin: 50% 80.8%;
  transform: rotate(var(--a));
  color: var(--petal-electric);
  opacity: .5;
  mix-blend-mode: screen;
}
.ab-ap__blade:nth-child(2n) { color: var(--petal-violet); }
.ab-ap__blade:nth-child(4n+1) { color: var(--petal-soft); }
.ab-ap__blade svg { width: 100%; height: 100%; }
/* light arriving through the blades */
.ab-ap__ray {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 46%;
  margin-left: -.5px;
  transform-origin: 50% 0;
  transform: rotate(var(--a));
  background: linear-gradient(180deg, rgba(147, 197, 253, .5), rgba(147, 197, 253, 0));
}
.ab-ap__focus {
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #FFFFFF, #93C5FD 54%, rgba(37, 99, 235, .25));
  box-shadow: 0 0 40px rgba(147, 197, 253, .85);
}
.ab-ap__glow {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77, 168, 255, .2), transparent 70%);
}

/* the aperture opens: blades turn into place, then the focus resolves */
.ab-motion .ab-ap__blade {
  transform: rotate(calc(var(--a) - 42deg)) scale(.72);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .07s),
              opacity .8s ease calc(var(--i) * .07s);
}
.ab-motion .ab-ap.is-shown .ab-ap__blade { transform: rotate(var(--a)); opacity: .5; }
.ab-motion .ab-ap__ray {
  transform: rotate(var(--a)) scaleY(0);
  transition: transform .9s cubic-bezier(.16, 1, .3, 1) calc(.5s + var(--i) * .035s);
}
.ab-motion .ab-ap.is-shown .ab-ap__ray { transform: rotate(var(--a)) scaleY(1); }
.ab-motion .ab-ap__focus {
  opacity: 0; transform: scale(.2);
  transition: opacity .7s ease 1.05s, transform .9s cubic-bezier(.34, 1.26, .64, 1) 1.05s;
}
.ab-motion .ab-ap.is-shown .ab-ap__focus { opacity: 1; transform: none; }
.ab-motion .ab-ap__glow { opacity: 0; transition: opacity 1.6s ease .8s; }
.ab-motion .ab-ap.is-shown .ab-ap__glow { opacity: 1; }

/* ==========================================================================
   HOW WE WORK: words left, the elevation right and inside the screen
   The six strata ran the full container width below their heading, which
   made the section the tallest on the page and pushed the structure out of
   view. Beside the words it stays within one screen and reads as one idea.
   ========================================================================== */
@media (min-width: 1024px) {
  .ab-arch .container {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
  .ab-arch__head { grid-column: 1; }
  .ab-elev { grid-column: 2; margin-top: 0; max-height: 68vh; }
  .ab-arch__end { grid-column: 1; margin-top: clamp(18px, 2vw, 28px); }
}