/*
 * About Us: the product glance, and the three things we do.
 *
 * THIS FILE GOT CUT IN HALF, on purpose.
 *
 * Its first version gave every product a 16:9 screenshot band and a full
 * paragraph, and gave every capability a full-width row with its own image.
 * That is a product page. About Us is an introduction: one line per product,
 * three lines on what the company does, and a way through to read properly.
 * The hero deck at the top already shows the software working.
 */

/* ---------------------------------------------------------------------------
   The product glance
   ------------------------------------------------------------------------ */

.srco-page .srco-tiles {
  list-style: none;
  margin: clamp(24px, 3.5vh, 40px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, 1.2vw, 14px);
}

@media (min-width: 620px) {
  .srco-page .srco-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1040px) {
  /*
   * Five across, one row. At a glance means a row you can take in at once, not
   * a grid you scan. They are narrow, which is the point: a tile with room for
   * a paragraph invites one.
   */
  .srco-page .srco-tiles { grid-template-columns: repeat(5, 1fr); }
}

.srco-page .srco-tile { margin: 0; }

/*
 * THE WHOLE TILE IS THE LINK — not a "read more" in a corner, which is a small
 * target inside a large one and is missed on touch. It also means the focus
 * ring outlines the thing being chosen.
 */
.srco-page .srco-tile-link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(10, 36, 114, 0.38);
  border: 1px solid rgba(77, 138, 255, 0.2);
  text-decoration: none;
  color: inherit;
  transition:
    transform 340ms var(--srk-ease, cubic-bezier(0.22, 1, 0.36, 1)),
    border-color 340ms var(--srk-ease, ease);
}

.srco-page .srco-tile-link:hover,
.srco-page .srco-tile-link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--srk-accent-live, var(--srh-accent));
}

/* ---------------------------------------------------------------------------
   The peek
   ------------------------------------------------------------------------ */

/*
 * The product's own screen, behind the tile, revealed on hover.
 *
 * This is what "a transition to the product" means here: the tile does not just
 * light up, it shows you what you are about to open. Holding it out of the
 * resting state is what keeps five tiles reading as a row of products rather
 * than as five screenshots — and it is the difference between a glance and a
 * catalogue.
 *
 * Two products have no screen of their own (Me Modules and ShareLedger
 * illustrate themselves with markup their templates render), so they simply
 * have no peek. Borrowing another product's interface would be a lie about
 * whose it is.
 */
.srco-page .srco-tile-peek {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 420ms var(--srk-ease, ease);
  pointer-events: none;
}

.srco-page .srco-tile-peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  /* Starts further out and settles, so the reveal is a move rather than a
     fade. Slow enough to read as deliberate at 900ms. */
  transform: scale(1.12);
  transition: transform 900ms var(--srk-ease, cubic-bezier(0.22, 1, 0.36, 1));
}

/*
 * A scrim, LIGHTENED so the screen actually reads.
 *
 * It was 0.78 to 0.92, which is atmosphere so faint that the reveal barely
 * registered: the whole point of the peek is that the tile shows you what you
 * are about to open, and it was showing a rumour of it.
 *
 * 0.66 to 0.88 is the most that can come off while the text on top stays
 * legible. Worst case is a near-white patch of screenshot under the lightest
 * part of the gradient: 0.66 of #010229 over #E8EEF8 composites to about
 * rgb(80,82,111), and --srh-ink on that is 6.46:1, comfortably past AA. The
 * gradient darkens downward because that is where the line and the CTA sit.
 */
.srco-page .srco-tile-peek::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 2, 41, 0.66) 0%, rgba(1, 2, 41, 0.88) 100%);
}

.srco-page .srco-tile-link:hover .srco-tile-peek,
.srco-page .srco-tile-link:focus-visible .srco-tile-peek {
  opacity: 1;
}

.srco-page .srco-tile-link:hover .srco-tile-peek img,
.srco-page .srco-tile-link:focus-visible .srco-tile-peek img {
  transform: scale(1);
}

/* ---------------------------------------------------------------------------
   The tile body
   ------------------------------------------------------------------------ */

.srco-page .srco-tile-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(16px, 1.4vw, 20px);
  height: 100%;
}

/*
 * The wordmark is the tile's heading, sized by HEIGHT: the five brand files
 * have very different aspect ratios and matching their widths would set them at
 * five different optical sizes.
 */
/*
 * Sized off the optical registry, so all five share a CAP HEIGHT.
 *
 * They were all forced to height: 18px, which is the mistake the registry
 * exists to prevent — five files with five different proportions set to one box
 * height come out at five different optical sizes, and DigitalMe read as half
 * the size of Me Modules beside it. --sr-logo-m is the per-product ratio and
 * the cap is set here.
 */
.srco-page .srco-tile-mark {
  --sr-logo-cap: 0.62rem;
  height: calc(var(--sr-logo-cap) * var(--sr-logo-m));
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  display: block;
}

.srco-page .srco-tile-text {
  color: var(--srh-ink);
  font-size: 0.9375rem;
  line-height: 1.5;
  flex: 1;
}

.srco-page .srco-tile-go {
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: 1.125rem;
  line-height: 1;
  transition: transform 340ms var(--srk-ease, ease);
}

.srco-page .srco-tile-link:hover .srco-tile-go,
.srco-page .srco-tile-link:focus-visible .srco-tile-go {
  transform: translateX(5px);
}

/* ---------------------------------------------------------------------------
   The four reasons
   ------------------------------------------------------------------------ */

/*
 * Kept verbatim from the page as it was, and set as a definition list, which is
 * what four term-and-explanation pairs are.
 */
/*
 * NO RULE ABOVE THEM ANY MORE.
 *
 * The hairline was there to separate these four from the product showcase
 * they used to sit under. The showcase has its own scene now, so the rule
 * would be a line drawn under the sentence above it for no reason.
 */
.srco-page .srco-reasons {
  display: grid;
  gap: clamp(20px, 3vw, 34px);
  margin: clamp(30px, 5vh, 54px) 0 0;
  padding: 0;
}

@media (min-width: 760px) {
  .srco-page .srco-reasons { grid-template-columns: repeat(2, 1fr); }
}

.srco-page .srco-reason dt {
  color: var(--srk-accent-live, var(--srh-accent));
  font-weight: 600;
  font-size: var(--srk-body);
  margin-bottom: 0.35em;
}

.srco-page .srco-reason dd {
  margin: 0;
  color: var(--srh-ink);
  max-width: var(--srk-measure);
}

/* ---------------------------------------------------------------------------
   What we do
   ------------------------------------------------------------------------ */

.srco-page .srco-whatwedo {
  list-style: none;
  margin: clamp(24px, 4vh, 44px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(28px, 4vw, 52px);
}

@media (min-width: 860px) {
  .srco-page .srco-whatwedo { grid-template-columns: repeat(3, 1fr); }
}

.srco-page .srco-what {
  margin: 0;
}

.srco-page .srco-what-icon {
  width: 30px;
  height: 30px;
  color: var(--srk-accent-live, var(--srh-accent));
  margin-bottom: 16px;
  display: block;
}

/*
 * A step down from --srk-display-s.
 *
 * At 1280 the section h2 is 58.9px and these were 40px, so "What we do" barely
 * outranked "Verify once, reuse everywhere" and the scene read as four peer
 * headings rather than one heading over three items. 2.3vw puts them at ~29px
 * against the same 59px, which is a real two-step hierarchy.
 *
 * A local clamp rather than --srk-display-xs, because no such token exists and
 * inventing one in a page stylesheet would put a fake kit token in the
 * namespace for the next page to inherit by accident.
 */
.srco-page .srco-what h3 {
  font-size: clamp(21px, 2.3vw, 30px);
  color: var(--srh-pale);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.srco-page .srco-what p {
  margin: 0;
  color: var(--srh-ink);
  max-width: 42ch;
}

/* ---------------------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .srco-page .srco-tile-link,
  .srco-page .srco-tile-peek,
  .srco-page .srco-tile-peek img,
  .srco-page .srco-tile-go {
    transition: none;
  }

  .srco-page .srco-tile-link:hover,
  .srco-page .srco-tile-link:focus-visible,
  .srco-page .srco-tile-link:hover .srco-tile-go,
  .srco-page .srco-tile-link:focus-visible .srco-tile-go {
    transform: none;
  }

  .srco-page .srco-tile-peek img { transform: none; }
}

/* ---------------------------------------------------------------------------
   The typed call to action
   ------------------------------------------------------------------------ */

/*
 * A tile at rest is a waiting terminal: a prompt and a caret. Hover or focus it
 * and the call to action types itself out, then the arrow arrives.
 *
 * The row reserves its height at rest, so a tile does not grow by a line the
 * moment it is hovered and shove the four tiles beside it down the page. The
 * behaviour is in assets/js/company-about.js.
 */
.srco-page .srco-tile-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 1.5em;
  margin-top: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--srk-accent-live, var(--srh-accent));
}

.srco-page .srco-tile-cta-prompt {
  opacity: 0.65;
  font-weight: 700;
}

.srco-page .srco-tile-cta-text {
  white-space: nowrap;
}

/*
 * The caret. It blinks only while the tile is resting or typing, and stops once
 * the string is complete, which is what a real prompt does.
 */
.srco-page .srco-tile-cta-caret {
  display: inline-block;
  width: 7px;
  height: 1.05em;
  background: currentColor;
  opacity: 0.85;
  animation: srco-caret 1.05s steps(1, end) infinite;
}

@keyframes srco-caret {
  0%, 45%   { opacity: 0.85; }
  46%, 100% { opacity: 0; }
}

/* The arrow is the reward at the end of the line, so it waits its turn. */
.srco-page .srco-tile-cta .srco-tile-go {
  margin-left: auto;
  opacity: 0;
  transition: opacity 200ms var(--srk-ease, ease), transform 340ms var(--srk-ease, ease);
}

.srco-page .srco-tile-link:hover .srco-tile-cta .srco-tile-go,
.srco-page .srco-tile-link:focus-visible .srco-tile-cta .srco-tile-go {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  /*
   * No blink and no typing. The script hands over the whole string at once
   * under reduce; this stops the caret pulsing beside it.
   *
   * Note this is the OPPOSITE call to the hero deck, which keeps advancing
   * under reduce because an instant cut is not vestibular motion. A caret
   * blinking forever in the corner of five tiles is motion, it is decorative,
   * and nothing is lost by stopping it.
   */
  .srco-page .srco-tile-cta-caret {
    animation: none;
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------------
   The journey: vault, then counter
   ------------------------------------------------------------------------ */

.srco-page .srco-journey {
  list-style: none;
  margin: clamp(20px, 3vh, 38px) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

@media (min-width: 900px) {
  /*
   * Two equal columns with a narrow connector between them. The connector is a
   * grid item rather than a pseudo-element so it can sit in its own track and
   * never overlap either shot.
   */
  .srco-page .srco-journey {
    grid-template-columns: 1fr auto 1fr;
  }
}

.srco-page .srco-journey-step {
  margin: 0;
  position: relative;
}

.srco-page .srco-journey-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
  border: 1px solid var(--srh-hairline);
  border-radius: 999px;
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: 0.875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/*
 * The shot. Both are real captures at different aspect ratios, so the frame
 * fixes the ratio and the image covers it: without that the phone screenshot
 * and the kiosk photograph would set two different heights and the two steps
 * would stop reading as a pair.
 */
.srco-page .srco-journey-shot {
  position: relative;
  aspect-ratio: 16 / 10;
  /*
   * Capped by VIEWPORT HEIGHT as well as by ratio, so the scene stays inside
   * one screen. Two shots at a fixed 16:10 pushed this scene to 1025px against
   * a 900px band, and a mission that runs off the bottom of its own screen is
   * the exact failure the flow work exists to prevent. object-fit:cover on the
   * image means the crop absorbs the difference rather than the layout.
   */
  max-height: min(27vh, 280px);
  border-radius: var(--srh-radius, 16px);
  overflow: hidden;
  border: 1px solid var(--srh-hairline);
  background: #050d2c;
  margin-bottom: clamp(10px, 1.6vh, 16px);
}

.srco-page .srco-journey-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* The vault is a tall phone screen, so it is anchored to its own top rather
   than being cropped through the middle of the card list. */
.srco-page .srco-journey-shot--phone img {
  object-position: top center;
}

.srco-page .srco-journey-step h3 {
  font-size: clamp(19px, 1.7vw, 24px);
  color: var(--srh-pale);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
}

.srco-page .srco-journey-step p {
  margin: 0;
  color: var(--srh-ink-soft);
  max-width: 46ch;
}

/*
 * The connector. On desktop it is a horizontal dashed run with an arrowhead,
 * centred against the shots above the captions; below 900px the columns stack
 * and it turns a quarter turn so it still points from one step to the next.
 */
.srco-page .srco-journey-link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--srk-accent-live, var(--srh-accent));
  opacity: 0.7;
}

.srco-page .srco-journey-link svg {
  width: 64px;
  height: 24px;
}

@media (max-width: 899px) {
  .srco-page .srco-journey-link svg {
    transform: rotate(90deg);
    width: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Mission: where the product turns up
   ------------------------------------------------------------------------ */

/*
 * Six real deployments, turning over in one frame.
 *
 * It replaced a two-step journey. The journey was right about the argument and
 * wrong about the number: two stills say "here is an example", and the question
 * at this point in the page is "where does this actually turn up?".
 *
 * The frame holds ONE aspect ratio for all six, so the scene never changes
 * height as it turns over. The captures are different shapes, and letting each
 * set its own height would make the whole section jump every 2.6 seconds.
 */
/*
 * grid-template-columns: minmax(0, 1fr) IS LOAD-BEARING on both of these.
 *
 * A grid with no declared column creates ONE IMPLICIT column sized to its
 * content, not to its container. The stack panel came out 338px wide inside a
 * 1180px section, its slide's 1.15fr 1fr resolved against that 338, and the
 * image column collapsed to a width of ZERO — a showcase with no picture in it.
 *
 * minmax(0, 1fr) rather than plain 1fr, because 1fr has an automatic minimum of
 * min-content, which would let a long word or a wide image push the column back
 * out again.
 */
.srco-page .srco-uses {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(20px, 3vh, 36px);
  aspect-ratio: 4 / 3;
  max-height: min(52vh, 460px);
  border-radius: var(--srh-radius, 16px);
  overflow: hidden;
  border: 1px solid var(--srh-hairline);
  background: #050d2c;
}

.srco-page .srco-use {
  grid-row: 1;
  grid-column: 1;
  margin: 0;
  position: relative;
  opacity: 0;
  transition: opacity 620ms var(--srk-ease, ease);
}

.srco-page .srco-use.is-current { opacity: 1; }

.srco-page .srco-use img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * The caption sits on a scrim rather than on the photograph.
 *
 * Six captures with six different exposures cannot all carry white text: the
 * kiosk shot is bright at the bottom and the vault is dark. A gradient under
 * the caption makes one rule work for all six, which is the only way this stays
 * legible when a seventh picture is added.
 */
.srco-page .srco-use figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(28px, 5vh, 44px) clamp(16px, 2.4vw, 24px) clamp(14px, 2vh, 18px);
  background: linear-gradient(180deg, rgba(1, 2, 41, 0) 0%, rgba(1, 2, 41, 0.86) 60%);
  color: var(--srh-pale);
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.srco-page .srco-mission-claim {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--srh-pale);
  margin-top: 0.45em;
}

.srco-page .srco-mission-sub {
  margin: 1.1em 0 0;
  color: var(--srh-ink-soft);
  max-width: 46ch;
}

/* ---------------------------------------------------------------------------
   The whole stack, as a showcase
   ------------------------------------------------------------------------ */

.srco-page .srco-suite {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: clamp(22px, 3.4vh, 40px);
  border-radius: var(--srh-radius, 16px);
  overflow: hidden;
  border: 1px solid var(--srh-hairline);
  background: var(--srh-surface);
  /*
   * A fixed height, because five slides of different copy lengths sharing one
   * grid cell would otherwise resize the section on every turn.
   */
  min-height: clamp(320px, 46vh, 420px);
}

.srco-page .srco-suite-slide {
  grid-row: 1;
  grid-column: 1;
  display: grid;
  opacity: 0;
  pointer-events: none;
  transition: opacity 520ms var(--srk-ease, ease);
}

.srco-page .srco-suite-slide.is-current {
  opacity: 1;
  pointer-events: auto;
}

@media (min-width: 820px) {
  /* minmax(0, …) on both tracks so the screenshot column can shrink below the
     image's intrinsic width instead of forcing the panel wider. */
  .srco-page .srco-suite-slide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.srco-page .srco-suite-shot {
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

/*
 * USE THE ROOM WHEN THERE IS ROOM.
 *
 * Giving the five products their own scene left about 90px of the band unused
 * on a full-height desktop window, and a contained phone is height-driven: the
 * only way to make the device bigger is to make the panel taller. Gated on the
 * viewport actually being tall enough, because at 720px high the same growth
 * pushes the scene back over its band, which is the thing the split fixed.
 */
@media (min-width: 1024px) and (min-height: 860px) {
  .srco-page .srco-suite-slide {
    min-height: 470px;
  }
}

/*
 * CENTRE THE CROP, do not anchor it to the top.
 *
 * Four of these five captures are tall phone screens going into a landscape
 * panel, so something is always cropped. Anchored to the top, what survived was
 * the status bar and the app chrome — a clock, a wifi icon and a blurred
 * avatar — which is the least informative part of any screenshot. Centred, the
 * crop lands on the content: the card list, the consent rows, the workflow.
 */
.srco-page .srco-suite-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

/*
 * The screen fades into the copy rather than meeting it at a hard edge, so the
 * panel reads as one object instead of two boxes that happen to touch.
 */
.srco-page .srco-suite-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(5, 13, 44, 0.28) 0%, rgba(5, 13, 44, 0.72) 100%);
}

@media (max-width: 819px) {
  .srco-page .srco-suite-shot::after {
    background: linear-gradient(180deg, rgba(5, 13, 44, 0.2) 0%, rgba(5, 13, 44, 0.86) 100%);
  }
}

.srco-page .srco-suite-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  padding: clamp(22px, 3vw, 38px);
}

.srco-page .srco-suite-mark {
  --sr-logo-cap: clamp(1rem, 1.6vw, 1.4rem);
  height: calc(var(--sr-logo-cap) * var(--sr-logo-m, 1.7));
  width: auto;
  display: block;
}

.srco-page .srco-suite-copy p {
  margin: 0;
  color: var(--srh-ink);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
  max-width: 34ch;
}

/* ---------------------------------------------------------------------------
   Deck dots
   ------------------------------------------------------------------------ */

/*
 * Through .srco-suite, not bare, for the reason this project has now written
 * down three times: Elementor Global Kit styles every button at (0,1,1) and a
 * one-class selector loses the tie and renders as a blue Elementor button.
 */
.srco-page .srco-suite .srco-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 4;
}

.srco-page .srco-suite .srco-dot {
  width: 30px;
  height: 4px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--srh-hairline);
  cursor: pointer;
  transition: background 200ms var(--srk-ease, ease);
}

.srco-page .srco-suite .srco-dot.is-current {
  background: var(--srk-accent-live, var(--srh-accent));
}

.srco-page .srco-suite .srco-dot:hover { background: var(--srh-ink-fade); }

.srco-page .srco-suite .srco-dot:focus-visible {
  outline: 2px solid var(--srk-accent-live, var(--srh-accent));
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   The crew
   ------------------------------------------------------------------------ */

/*
 * Tightened until the whole team fits one screen at 1440 and 1280.
 *
 * Seventeen people, a heading, a line of copy and a button came to 952px in a
 * 900px band, and every pixel of the overflow was spacing rather than content.
 * Nothing was removed to get there.
 */
.srco-page .srco-crew {
  margin-top: clamp(18px, 2.6vh, 32px);
}

.srco-page .srco-crew-run {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(6px, 0.8vw, 10px);
}

.srco-page .srco-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--srh-hairline);
  border-radius: 999px;
  background: var(--srh-surface);
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms var(--srk-ease, ease),
    opacity 220ms var(--srk-ease, ease);
}

.srco-page .srco-card.is-in {
  opacity: 1;
  transform: none;
}

.srco-page .srco-card img,
.srco-page .srco-card-initials {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--srh-surface-lift);
  color: var(--srk-accent-live, var(--srh-accent));
  font-size: 0.75rem;
  font-weight: 600;
}

.srco-page .srco-card-name {
  color: var(--srh-pale);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}

.srco-page .srco-card-role {
  color: var(--srh-ink-fade);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/*
 * The founders, which is where the run lands.
 *
 * Bigger, in a row of their own, arriving together once the fourteen have
 * finished. Until then they are already in the document — a screen reader and a
 * reader with no script get the whole list — they simply have not been given
 * the arrival treatment yet.
 */
.srco-page .srco-crew-lead {
  list-style: none;
  /* The rule sits UNDER the founders, because they are above the team now. */
  margin: 0 0 clamp(16px, 2.2vh, 26px);
  padding: 0 0 clamp(14px, 2vh, 20px);
  border-bottom: 1px solid var(--srh-hairline);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.6vw, 20px);
  /*
   * VISIBLE BY DEFAULT. This used to start at opacity 0 and be revealed by the
   * .is-done class, which meant that with script blocked the run never
   * finished, .is-done was never added, and the three founders were invisible
   * on a page whose team section is about ending on them.
   *
   * Caught by the no-JS check, not by looking. The hidden start state now lives
   * under .js, which the script only adds once it is genuinely running, so the
   * base state is always the finished one.
   */
  opacity: 1;
  transform: none;
  transition:
    opacity 460ms var(--srk-ease, ease) 120ms,
    transform 460ms var(--srk-ease, ease) 120ms,
    border-color 500ms var(--srk-ease, ease);
}

/*
 * NO RULE UNDER AN EMPTY ROW.
 *
 * The founders are dealt last, so for the two seconds the hand is going out
 * their row is empty — and a horizontal rule under nothing looks like a
 * mistake in the page rather than a space being held. It draws itself once
 * they land.
 */
.js .srco-page .srco-crew:not(.is-done) .srco-crew-lead {
  border-bottom-color: transparent;
}

.srco-page .srco-crew.is-done .srco-crew-lead {
  opacity: 1;
  transform: none;
}

.srco-page .srco-card--lead {
  opacity: 1;
  transform: none;
  padding: 8px 18px 8px 8px;
  background: var(--srh-surface-lift);
}

.srco-page .srco-card--lead img {
  width: 46px;
  height: 46px;
}

.srco-page .srco-card--lead .srco-card-name { font-size: 1.0625rem; }

/*
 * WITH NO SCRIPT THE RUN NEVER STARTS, so nothing would ever be dealt in and
 * the whole crew would be invisible. The base state is therefore "present", and
 * the hidden start state is applied only once the script has proved it is
 * running by putting .js on the root.
 */
.srco-page .srco-crew .srco-card {
  opacity: 1;
  transform: none;
}

/*
 * THE DECK.
 *
 * Rohan, 2026-08-30: "I think this should be a stack of card that is dealt as
 * an animation." It was not one. Seventeen cards faded up ten pixels where they
 * already sat, which is a reveal, not a deal.
 *
 * A deal needs a deck: one place all the cards are, before any of them are
 * anywhere else. --srco-dx and --srco-dy are the measured vector from each
 * card's resting slot back to that place, written by company-about.js, so this
 * rule stacks every card on the same spot no matter how the rows wrapped. The
 * rotation fans the pile so it reads as a stack of separate cards rather than
 * one thick card, and the shadow lifts it off the page the way a real pile
 * sits above the table.
 *
 * .is-stacked is added only once the vectors exist. Without it the fallback
 * translate of 0 would leave every card in its own slot, and the deal would
 * start from a deck that was never there.
 */
.js .srco-page .srco-crew.is-stacked:not(.is-done) .srco-card:not(.is-in) {
  transform:
    translate(var(--srco-dx, 0px), var(--srco-dy, 0px))
    rotate(var(--srco-rot, 0deg))
    scale(0.9);
  z-index: var(--srco-z, 1);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  /*
   * Below about the fourth card down only the edges show, and seventeen
   * stacked pills of different widths read as a smudge rather than as a deck.
   * So --srco-fade draws the pile four deep and fading, and carries everything
   * under it at zero until it is dealt. The script writes it in DEAL order,
   * which spans both lists.
   */
  opacity: var(--srco-fade, 0);
}

/*
 * The card being dealt travels over the ones already down, not under them.
 */
.srco-page .srco-crew.is-running .srco-card.is-in {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  /* The script skips straight to the end state and never stacks the deck; this
     stops anything animating on the way there. */
  .srco-page .srco-card,
  .srco-page .srco-crew-lead {
    transition: none;
  }
}

/* ---------------------------------------------------------------------------
   Two shapes, and neither of them gets cropped
   ------------------------------------------------------------------------ */

/*
 * A PHOTOGRAPH CAN BE CROPPED. A SCREENSHOT CANNOT.
 *
 * Both showcases held a mix, and both cover-cropped everything into one
 * landscape box. On the landscape photographs that was invisible. On the phone
 * captures it sliced the interface off mid-line: half a row of "Any ID Country
 * / Australia Passport" at the top edge, half a button at the bottom. That is
 * what "the stills are broken" was.
 *
 * So a portrait asset is drawn inside a phone silhouette and CONTAINED, and a
 * landscape asset fills its frame. The silhouette is the same object the hero
 * uses, at the same radius and on the same ground, so a phone screen looks like
 * a phone screen wherever it appears on this page.
 */

/* --- the mission tile ---------------------------------------------------- */

.srco-page .srco-use--wide img {
  object-fit: cover;
  object-position: center;
}

.srco-page .srco-use--phone {
  background: #050d2c;
}

/*
 * The phone stays ABSOLUTE, and that is the whole trick.
 *
 * The first attempt put it back in flow to centre it, which quietly handed the
 * tile's height to the image: an 1763px-tall capture at 86% of an indefinite
 * height resolves to auto, the figure grew to 1007px inside a 460px tile, and
 * overflow:hidden showed a slice of a phone the size of a poster. It looked
 * far more broken than the crop it was meant to fix.
 *
 * Absolute and centred on the midpoint, the image is outside layout entirely,
 * so 86% resolves against the tile's own definite height and the tile keeps the
 * 4:3 it was designed to. Height-driven because height is the fixed dimension
 * here; the width follows from the picture's own proportions and is therefore
 * never wrong.
 */
.srco-page .srco-use--phone img {
  inset: 50% auto auto 50%;
  width: auto;
  height: 86%;
  max-width: 76%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(234, 240, 255, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  background: #050d2c;
}

/* --- the product showcase ------------------------------------------------ */

.srco-page .srco-suite-shot--wide img {
  object-fit: cover;
  object-position: center;
}

.srco-page .srco-suite-shot--phone {
  background: #050d2c;
}

.srco-page .srco-suite-shot--phone img {
  inset: 50% auto auto 50%;
  width: auto;
  height: 88%;
  max-width: 64%;
  transform: translate(-50%, -50%);
  object-fit: contain;
  border-radius: 16px;
  border: 1px solid rgba(234, 240, 255, 0.22);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  background: #050d2c;
}

/*
 * The scrim only belongs over a photograph. Across a contained phone it would
 * darken the device and the empty ground around it equally, which reads as a
 * dirty pane rather than as a gradient.
 */
.srco-page .srco-suite-shot--phone::after {
  display: none;
}

/*
 * A CONTAINED PHONE LEAVES GROUND AROUND IT, so light the ground.
 *
 * Not cropping a 0.43 screen into a 1.53 box is correct, but it buys the
 * correctness with empty navy on both sides, and an image floating in a flat
 * rectangle looks like a mistake even when it is the right size. A soft pool of
 * the live accent behind the device does what a product photographer does with
 * a light: it says the emptiness is a set, not a gap.
 *
 * ::before, so it is behind the image; ::after is the scrim and paints over it.
 */
.srco-page .srco-use--phone::before,
.srco-page .srco-suite-shot--phone::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      58% 62% at 50% 46%,
      color-mix(in srgb, var(--srk-accent-live, var(--srh-accent)) 24%, transparent) 0%,
      transparent 72%
    );
  pointer-events: none;
}

/*
 * color-mix is recent enough to need a floor. Without this the glow simply does
 * not paint on an older engine, which is a graceful loss rather than a break,
 * but a flat wash costs nothing and keeps the set lit.
 */
@supports not (background: color-mix(in srgb, red 20%, transparent)) {
  .srco-page .srco-use--phone::before,
  .srco-page .srco-suite-shot--phone::before {
    background: radial-gradient(58% 62% at 50% 46%, rgba(60, 120, 255, 0.2) 0%, transparent 72%);
  }
}