/* About — "Our story" as a three-act feature: white opening spread, brand-blue
   field for the human middle, white close. The four life figures sit beside the
   retention claim they prove rather than trailing the section as a coda, which
   is why this page no longer includes the shared `stats` band.

   The opening photo runs the full depth of the act: the act's own padding lives
   on the text cells so the media column can bleed top to bottom, and the media
   opts back into stretching because the grid aligns its text cells to start. */

Three acts on the page: a white opening spread (heading, italic deck,
   opening picture, lede), the brand blue field for the human middle, then
   white again for the close and the pill. The colour changes give the
   reader visible act breaks, so a long paragraph reads as a section with
   an end in sight rather than an unbounded wall.

   Every device here is one the site already runs — the story lockup
   (never-italic heading over an italic blue subline), the intro band's
   639/559 row on a full-bleed blue field, the stats figures, the
   ruled lists from the services board, and the deep-blue pill. */

.story-feature {
  background-color: var(--pure-white);
}

/* ---- Act one: the opening spread --------------------------------- */

.story-feature__open {
  padding-block: var(--space-60);
}

.story-feature__grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-40);
}

.story-feature__head,
.story-feature__lede-cell {
  padding-inline: var(--container-padding);
}

.story-feature__heading {
  font-size: var(--h1-size);
  line-height: 1.2;
  font-style: normal;
  color: var(--dozen-dark);
}

.story-feature__deck {
  margin-top: 13.06px;
  max-width: 22ch;
  font-size: clamp(1.5rem, 1.1127rem + 1.5414vw, 2.5rem);
  line-height: 1.2;
  font-style: italic;
  color: var(--dozen-blue);
  text-wrap: balance;
}

/* Opening picture runs to the board edge — the same full-bleed half the
   live split story uses, kept edge-to-edge on a phone. */
.story-feature__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 402 / 352;
  object-fit: cover;
}

/* A phone crop held at tablet width would run nearly 700px deep and push
   the lede off the first screen; the picture widens instead. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .story-feature__photo {
    aspect-ratio: 16 / 10;
  }
}

.story-feature__lede {
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--dozen-dark);
  text-wrap: pretty;
}

/* Two-line drop cap: the feature's entry point, in the heading face and
   brand blue. Purely a ::first-letter treatment, so the paragraph text is
   untouched in the DOM. */
.story-feature__lede::first-letter {
  float: left;
  padding-right: 0.08em;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 3.4em;
  line-height: 0.8;
  color: var(--dozen-blue);
}

/* Narrow phone measures leave large holes at the right rag on a paragraph
   this long. Hyphenation closes them, limited to genuinely long words so
   the rag stays quiet rather than turning into a ladder of hyphens. */
@media (max-width: 639.98px) {
  .story-feature__lede {
    hyphens: auto;
    hyphenate-limit-chars: 10 5 4;
  }

  .story-feature__lede::first-letter {
    font-size: 3em;
  }
}

@media (min-width: 1024px) {
  .story-feature__open {
    /* The padding moves onto the text columns so the photo can run the full
       depth of the act. Left here it inset the image 120px from the top and
       100px from the bottom, which is the whitespace above and below it. */
    padding-block: 0;
  }

  .story-feature__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
    grid-template-areas:
      "head media"
      "lede media";
    column-gap: var(--space-80);
    row-gap: var(--space-60);
    align-items: start;
  }

  .story-feature__head {
    grid-area: head;
    padding-top: var(--space-120);
  }

  .story-feature__lede-cell {
    grid-area: lede;
    padding-bottom: var(--space-100);
  }

  .story-feature__media {
    grid-area: media;
    position: relative;
    /* The grid sets align-items: start so the text columns sit at the top of
       their rows; the media has to opt back into stretching or it collapses
       to its content and the absolute photo has nothing to fill. */
    align-self: stretch;
  }

  /* Out of flow so the picture takes its depth from the text column rather
     than imposing its own portrait ratio on the row. */
  .story-feature__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* Hold the reading column on the shared 1280 grid line even when the
     board runs wider than the photo bleed. */
  .story-feature__head,
  .story-feature__lede-cell {
    padding-left: max(
      var(--container-padding),
      (100vw - var(--content-max)) / 2
    );
    padding-right: 0;
  }

  .story-feature__heading {
    line-height: var(--h1-leading);
  }

  .story-feature__deck {
    line-height: 1.40625;
  }

  .story-feature__lede {
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

/* ---- Act two: the blue field ------------------------------------- */

.story-feature__field {
  background-color: var(--dozen-blue);
  padding-block: var(--space-60);
}

.story-feature__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}

.story-feature__prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  /* Holds the reading measure before the row splits into two columns. */
  max-width: 38rem;
}

.story-feature__body {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--pure-white);
  text-wrap: pretty;
}

/* Lead-in caps open each act of the middle: the site's eyebrow treatment
   set inline, so the topic sentence is scannable without adding a word. */
.story-feature__leadin {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 0.9em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dozen-teal);
}

.story-feature__ledger {
  max-width: 32rem;
}

.story-feature__ledger-eyebrow {
  margin-bottom: var(--space-20);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--dozen-teal);
}

.story-feature__ledger-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.story-feature__ledger-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-20);
  padding-block: 0.6875rem;
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.story-feature__ledger-item:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.story-feature__ledger-figure {
  flex: none;
  min-width: 2ch;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--pure-white);
}

.story-feature__ledger-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--p-size);
  line-height: var(--p-leading);
  color: #cdc9ec;
}

@media (min-width: 1024px) {
  .story-feature__field {
    padding-block: var(--space-100);
  }

  .story-feature__row {
    flex-direction: row;
    align-items: flex-start;
    gap: 82px;
  }

  .story-feature__prose {
    flex: 0 1 639px;
    max-width: none;
    gap: var(--space-40);
  }

  .story-feature__body {
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  .story-feature__ledger {
    flex: 0 1 559px;
    max-width: none;
  }

  .story-feature__ledger-eyebrow {
    margin-bottom: var(--space-40);
    font-style: normal;
    font-size: var(--h4-size);
    line-height: var(--h4-leading);
  }

  /* The sidebar earns the room for the stats band's stacked figures once
     the row splits in two. */
  .story-feature__ledger-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-40);
  }

  .story-feature__ledger-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-10);
    padding-block: var(--space-20);
  }

  .story-feature__ledger-item:nth-child(-n + 2) {
    border-top: 1px solid rgba(255, 255, 255, 0.24);
  }

  .story-feature__ledger-item:last-child {
    border-bottom: 0;
  }

  .story-feature__ledger-figure {
    font-size: 3.5rem;
  }

  .story-feature__ledger-label {
    font-size: var(--h4-size);
    line-height: var(--h4-leading);
  }
}

/* ---- Act three: the close ---------------------------------------- */

.story-feature__close {
  padding-block: var(--space-60);
}

.story-feature__close-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
}

.story-feature__close-copy {
  max-width: 40rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--h4-size);
  line-height: var(--h4-leading);
  letter-spacing: -0.02em;
  color: var(--dozen-dark);
  text-wrap: pretty;
}

.story-feature__close-link {
  color: var(--dozen-blue);
  text-underline-offset: 0.15em;
}

.story-feature__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 19px var(--space-20);
  border-radius: 95px;
  background: var(--gradient-blue-deep);
  font-family: var(--font-body);
  font-weight: var(--weight-heading);
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: -0.7px;
  color: var(--pure-white);
  text-decoration: none;
  transition:
    filter 0.2s ease,
    transform 0.2s ease;
}

.story-feature__cta:hover,
.story-feature__cta:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

@media (min-width: 1024px) {
  .story-feature__close {
    padding-block: var(--space-100) var(--space-120);
  }

  .story-feature__close-copy {
    font-size: clamp(1.25rem, 0.9595rem + 1.1561vw, 2rem);
    line-height: var(--p-leading);
    max-width: 44rem;
  }

  .story-feature__cta {
    width: auto;
    padding: 19px 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-feature__cta,
  .story-feature__cta:hover,
  .story-feature__cta:focus-visible {
    transition: none;
    transform: none;
  }
}

/* ---- Mock identity label ----------------------------------------- */

.mock-flag {
  position: fixed;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 50;
  padding: 0.375rem 0.625rem;
  border-radius: 4px;
  background-color: rgba(51, 51, 51, 0.82);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--pure-white);
  pointer-events: none;
}