/* ==========================================================================
   WAYFINDER NEWS — case study page styles
   Page: work/wayfinder-news.html

   Design source : Figma "PORTFOLIO_CASE-STUDY-LAYOUT"
                   frame 628:4788 "WAYFINDER NEWS"
                   1920 x 10167, reference width 1920px
                   https://www.figma.com/design/4a4AKXypAI56ESXq89ZJ1q/?node-id=628-4788

   Depends on: tokens.css, base.css, components.css, case-study.css

   WHAT LIVES WHERE
   case-study.css already owns everything a case study shares with its
   siblings — the two-bar header offset, the flat 110 band rhythm, the rail
   metadata list. This file owns only what is particular to Wayfinder: its
   yellow palette, its right-bleeding column, and its nine section
   components. Nothing here is written for a page other than this one.

   THE COLUMN
   This frame does not use the site's centred 1760 measure. The rail sits at
   80..338 and every band then runs from ~400 to the right edge of the
   artboard with no right gutter at all, exactly the way the Alaska hero
   panel does but for the whole page. So .wf-shell insets from the left only
   and lets its content bleed right, and the page rebinds --layout-rail /
   --layout-rail-gap to the frame's narrower pair so that base.css's .section
   primitive produces this geometry without being forked.

   BREAKPOINTS (the ladder declared in tokens.css, and nothing else)
     base            0     -  480px   mobile
     481px           481   -  767px   large mobile
     768px           768   - 1023px   tablet
     1024px          1024  - 1439px   desktop      <- rail returns here
     1440px          1440  +          large desktop -> approaches 1920 exactly
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PAGE
   The Wayfinder page is a .case-study first (it inherits the light ground,
   the two-bar header offset and the band rhythm from case-study.css) and a
   .wayfinder second.
   -------------------------------------------------------------------------- */

/* The frame draws a 258-wide rail with a 61 gap, putting its content column
   at x399. The Alaska page faced the same mismatch and Mike's call there was
   to follow the HOME grid (320 rail / 40 gap / content at x440) so the pages
   line up when you move between them; the same call applies here, so the
   shared --layout-rail / --layout-rail-gap are left alone and every band
   starts 41px right of where the frame draws it.

   --wf-rail / --wf-rail-gap in tokens.css record the frame's own pair. They
   are not consumed — they are kept so the measurement is not lost if the
   decision is ever revisited. */

/* Nothing on this page is capped at the home page's 1400 content column —
   the bands run to the viewport edge instead. */
.wayfinder .section__body { max-width: none; }

/* Every eyebrow on this page is #5E5852, a shade warmer than the site's
   --color-text-muted. The frame keeps the rail VALUES at #8A857F, which is
   --color-text-muted, so only the labels move. */
.wayfinder .section__eyebrow { color: var(--wf-ink-rail); }

/* --- The bleeding shell --------------------------------------------------
   .shell from base.css centres a 1760 measure and pads BOTH sides. This is
   its left half only: the same left inset, and no right one, so the yellow
   panels and photographs run off the right edge of the viewport at every
   width the way they run off the right edge of the artboard. Past 1760 the
   left inset starts centring, which keeps this page's gutter locked to the
   site header's above it.
   ------------------------------------------------------------------------ */

.wf-shell {
  width: 100%;
  padding-inline-start: max(
    var(--page-gutter),
    calc((100% - var(--layout-max)) / 2)
  );
}

/* --- Band rhythm ---------------------------------------------------------
   case-study.css puts --gap-band between every child of the <article>, which
   is this frame's rhythm too. Four joins are deliberately flush in the
   frame, though: the photograph runs straight into the DIFFERENTIATION
   panel, that into the KEY FEATURES band, and that into the ONBOARDING band.
   ------------------------------------------------------------------------ */

.wayfinder .page > article > .wf-flush { margin-top: 0; }


/* --------------------------------------------------------------------------
   2. RAIL
   The hero's metadata list is .cs-hero__meta from case-study.css and needs
   only its link colour here. The two bulleted lists under the ONBOARDING and
   ADDITIONAL FEATURES labels are new.
   -------------------------------------------------------------------------- */

.wayfinder .cs-hero__meta a {
  color: var(--wf-link);
  text-decoration: underline;
  text-underline-position: from-font;
  /* Grows the hit area past the 44px floor without moving the text. The
     value's line box is 18px here, so 14 each side clears it. */
  display: inline-block;
  padding-block: 14px;
  margin-block: -14px;
}
.wayfinder .cs-hero__meta a:hover { text-decoration-thickness: 2px; }

/* The frame sets "Role" at 14/-0.44 and every other label at 12/+0.12 — the
   same inconsistency the Alaska frame has, so case-study.css's handling of
   it carries over unchanged. */

.wf-rail-list {
  margin-block-start: var(--space-8);
  padding-inline-start: 21px;
  list-style: disc;
  color: var(--color-text-muted);
  font-size: var(--fs-wf-bullet);
  font-weight: var(--fw-medium);
  line-height: var(--lh-wf-bullet);
  letter-spacing: var(--ls-eyebrow);
}


/* --------------------------------------------------------------------------
   3. HERO
   Frame 641:8038 — a 1521 x 1626 yellow panel starting at the content column
   and running off the right edge, with the ROLE / TEAM / SHIPPED rail beside
   it. Inside the panel, at 1920:

       120 pad | 529 copy | 109 gap | 520 devices | 123 slack | 120 pad
       then a 1276 x 718 video still, then the "We believe" statement.
   -------------------------------------------------------------------------- */

/* The vertical inset is --cs-hero-pad-top, shared with the Alaska hero so the
   copy in both lands at the same height; only the 120 horizontal inset is
   this frame's own. */
.wf-hero__panel {
  background-color: var(--wf-yellow);
  padding: var(--cs-hero-pad-top) var(--wf-hero-pad-x);
}

/* --- Top row: copy beside the device cluster ---------------------------- */

.wf-hero__copy { max-width: 529px; }

.wf-hero__kicker {
  color: var(--wf-ink);
  font-size: var(--fs-cs-kicker);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-cs-kicker);
  text-transform: uppercase;
}

.wf-hero__headline {
  margin-block-start: var(--space-8);
  color: var(--wf-ink-display);
  font-size: var(--fs-cs-display);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-cs-display);
  letter-spacing: var(--ls-cs-display);
}
/* The frame sets the second line of the headline in Regular, as a sentence
   under the shouted product name. */
.wf-hero__headline-name { display: block; }
.wf-hero__headline-sub {
  display: block;
  font-weight: var(--fw-regular);
}

.wf-hero__lede {
  margin-block-start: var(--space-8);
  color: var(--wf-ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* The cluster is one flattened export of Figma's iPad + iPhone composition
   (group 648:8388): a masked device chrome with four screenshots layered and
   shadowed inside it. Reproducing that stack as markup would be a dozen
   absolutely-positioned images with alpha masks, so it ships as the single
   image the frame renders. Its background is the frame's own #F0C952, which
   is why it sits flush on the panel with no seam. */
.wf-hero__devices {
  margin-block-start: var(--space-32);
  aspect-ratio: 520 / 655;
}

/* --- Hero clip + statement ----------------------------------------------- */

.wf-hero__figure { margin-block-start: var(--wf-hero-gap); }
/* The frame's slot is 1276 x 718; the source is 1280 x 720. A 0.03%
   difference, so the frame's ratio is kept and object-fit: cover on
   .video__el absorbs it. */
.wf-hero__still  { aspect-ratio: 1276 / 718; }

.wf-hero__belief {
  margin-block-start: var(--wf-belief-gap);
  max-width: 989px;
  color: var(--wf-ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.wf-hero__belief strong { font-weight: var(--fw-bold); }

@media (min-width: 1024px) {
  .wf-hero__inner {
    display: grid;
    grid-template-columns: var(--layout-rail) minmax(0, 1fr);
    column-gap: var(--layout-rail-gap);
    align-items: start;
  }
  /* The panel carries the <h1>, so it leads in the DOM and the rail is put
     back into the first column here rather than being written first. */
  .wf-hero__panel { grid-column: 2; grid-row: 1; }
  /* padding-block-start comes from case-study.css, which now zeroes it for
     both pages. */
  .wf-hero__meta  { grid-column: 1; grid-row: 1; }

  /* Between 1024 and 1440 the panel is only ~660-960 wide, and the frame's
     41.3% share would leave the headline setting 14 characters to the line.
     The copy takes a larger share of the panel through that range and gives
     it back at 1440, where the frame's own proportions start to fit. */
  .wf-hero__top {
    display: grid;
    /* The copy track is floored at min-content, which with the nowrap below
       is the width of "WAYFINDER NEWS". Breaking the product name across two
       lines reads as a mistake, so the device cluster gives up the width
       instead — the same move the Alaska hero makes with its title. */
    grid-template-columns: minmax(min-content, 48fr) minmax(0, 40fr);
    column-gap: 6%;
    align-items: start;
  }
  .wf-hero__headline-name { white-space: nowrap; }
  /* The frame drops the copy 212px below the top of the device cluster.
     Shared with the Alaska hero — see the note on the token. */
  .wf-hero__copy    { margin-block-start: var(--cs-hero-copy-offset); }
  .wf-hero__devices { margin-block-start: 0; }
}

@media (min-width: 1440px) {
  /* The frame's own split, as percentages of the panel's padded box (1281 at
     1920), so the composition holds its proportions rather than only landing
     at the reference width. */
  .wf-hero__top {
    grid-template-columns: minmax(min-content, 41.3fr) minmax(0, 40.6fr);
    column-gap: 8.5%;                     /* 529 : 109 : 520 */
  }
}

/* Below the two-column breakpoint the panel bleeds left as well, so the hero
   reads edge to edge on a phone instead of as a floating slab — the same
   move the Alaska hero makes. */
@media (max-width: 1023px) {
  .wf-hero__panel { margin-inline-start: calc(-1 * var(--page-gutter)); }
  .wf-hero__meta  { padding-block-start: var(--space-32); }
}


/* --------------------------------------------------------------------------
   4. OVERVIEW
   Frame 641:8022 — a full-bleed 1920 x 460 yellow band carrying one
   paragraph of 40/56 copy, 1379 wide, vertically centred.
   -------------------------------------------------------------------------- */

.wf-band--overview {
  background-color: var(--wf-yellow);
  padding-block: var(--wf-band-pad-y);
}

/* The frame drops this label 105px below the top of the band's copy rather
   than aligning the two tops. Fluid so it does not swallow a short column on
   a 1024 screen. */
.wf-overview { --eyebrow-offset: clamp(0px, 5.47vw, 105px); }

.wf-overview__copy {
  max-width: 1379px;
  color: var(--wf-ink-display);
  font-size: var(--fs-cs-situation);
  line-height: var(--lh-cs-situation);
  letter-spacing: var(--ls-cs-situation);
}


/* --------------------------------------------------------------------------
   5. APPROACH
   Frame 656:9979 — three ~418-wide steps 72 apart, each with a 1px vertical
   rule down its left edge. The rule starts 53px down (just under the step
   title) and runs to the foot of the copy.
   -------------------------------------------------------------------------- */

.wf-approach { --eyebrow-offset: clamp(0px, 3.85vw, 74px); }

.wf-steps {
  display: grid;
  gap: var(--wf-step-gap);
}

.wf-step {
  position: relative;
  padding-inline-start: 14px;
}
.wf-step::before {
  content: "";
  position: absolute;
  inset-block: 3.3125rem 0;     /* the frame's 53px drop */
  inset-inline-start: 0;
  width: var(--border-thin);
  background-color: var(--wf-rule-step);
}

.wf-step__title {
  color: var(--wf-ink-title);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-wf-step);
  letter-spacing: var(--ls-title);
}

.wf-step__body {
  margin-block-start: var(--space-8);
  color: var(--wf-ink-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (min-width: 768px) {
  /* Two up through tablet: three 418s do not fit a 768 viewport, and a
     single 676-wide column would run these paragraphs to ~90 characters. */
  .wf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .wf-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   6. DIFFERENTIATION
   Frame 635:7895 — a 1521 x 581 photograph running straight into a 1521 x
   421 panel that fades out of the yellow into the cream the KEY FEATURES
   band below it continues. Both sit in the content column and bleed right.
   -------------------------------------------------------------------------- */

.wf-photo { aspect-ratio: 1521 / 581; }

/* The label sits beside the "DISCOVER MORE" headline, 109px into the panel,
   not beside the photograph above it. */
.wf-differentiation { --eyebrow-offset: clamp(0px, 5.68vw, 109px); }

.wf-discover {
  background-image: var(--wf-gradient-band);
  padding: var(--space-32) var(--wf-band-pad-x);
}

.wf-discover__headline {
  padding-block: var(--space-16);
  color: var(--wf-ink-marker);
  font-family: var(--font-marker);
  font-size: var(--fs-wf-marker-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-wf-marker);
}

/* --- The three value blocks --------------------------------------------- */

.wf-values {
  display: grid;
  gap: var(--wf-icon-gap);
}

.wf-value {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding-block-start: var(--space-24);
  border-block-start: var(--border-thin) solid var(--wf-rule-icon);
}

.wf-value__icon {
  width: 40px;
  height: 40px;
}

.wf-value__title {
  color: var(--wf-ink-marker);
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-wf-icon);
}
/* The frame sets "Trust" a hair off black and the other two pure black. Kept
   as drawn rather than levelled — worth a look on review. */
.wf-value__title--soft { color: var(--wf-ink-icon-title); }

.wf-value__body {
  color: var(--wf-ink-icon-body);
  font-size: var(--fs-ui);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-wf-icon-body);
}

@media (min-width: 1024px) {
  /* The frame's own widths: 442 : 466 : 379, gaps 55. Three columns need
     roughly 970px of content; below 1024 the column cannot offer it, so the
     blocks stack and the measure is capped instead of the type shrinking. */
  .wf-values { grid-template-columns: 442fr 466fr 379fr; }
}
@media (max-width: 1023px) {
  .wf-value__body { max-width: 60ch; }
}


/* --------------------------------------------------------------------------
   7. KEY FEATURES
   Frame 662:10275 — a 1516 x 3012 cream band holding four rows that
   alternate copy and device shot. The rows do not share one grid in the
   frame: each shot is a different render at a different size, so each row
   carries its own track pair, taken from the frame and expressed as
   percentages of the band's padded box.
   -------------------------------------------------------------------------- */

.wf-features {
  background-color: var(--wf-cream);
  padding-block: clamp(2rem, 3.02083vw, 3.625rem)      /* 32 ->  58 */
                 clamp(2.5rem, 4.84375vw, 5.8125rem);  /* 40 ->  93 */
}

.wf-features > * + * { margin-top: var(--wf-feature-gap); }

/* The label sits 171px into the band in the frame — level with the gap above
   the first headline rather than with the band's top edge. */
.wf-key-features { --eyebrow-offset: clamp(0px, 8.91vw, 171px); }

.wf-feature {
  display: grid;
  gap: var(--wf-icon-gap);
  align-items: center;
  /* 226 left / 73 right of the 1516 band. */
  padding-inline: 14.91% 4.82%;
}

/* Rows 2-4 stop 228 short of the band's right edge instead of 73. */
.wf-feature--inset { padding-inline-end: 15.04%; }

.wf-feature__copy { max-width: 564px; }

/* --- Marker headline + rule + copy --------------------------------------- */

.wf-feature__title {
  color: var(--wf-ink-marker);
  font-family: var(--font-marker);
  font-size: var(--fs-wf-marker);
  font-weight: var(--fw-regular);
  line-height: var(--lh-wf-marker);
  letter-spacing: var(--ls-wf-marker);
}
/* Row 1 alone is drawn at 1.1 rather than 1.2. */
.wf-feature__title--tight { line-height: var(--lh-wf-marker-tight); }

/* The frame draws a 1px black rule the full width of the copy column between
   the headline and the paragraph. */
.wf-feature__body {
  margin-block-start: var(--wf-marker-gap);
  padding-block-start: var(--wf-marker-gap);
  border-block-start: var(--border-thin) solid var(--wf-rule-marker);
  color: var(--wf-ink-feature);
  font-family: var(--font-feature);
  font-size: var(--fs-wf-feature);
  line-height: var(--lh-wf-feature);
  letter-spacing: var(--ls-wf-feature);
}
/* Row 1's paragraph is set at 0.85 alpha; the rest at 0.55. */
.wf-feature__body--lead { color: var(--wf-ink-feature-lead); }
.wf-feature__body strong { font-weight: var(--fw-bold); }

/* --- Shots --------------------------------------------------------------- */

.wf-feature__media { width: 100%; }

.wf-shot--trust    { aspect-ratio: 637 / 594; border-radius: var(--wf-feature-radius); }
.wf-shot--balanced { aspect-ratio: 438 / 646; }
.wf-shot--bias     { aspect-ratio: 298 / 646; }
.wf-shot--compare  { aspect-ratio: 298 / 645; border-radius: clamp(1rem, 1.71875vw, 2.0625rem); }

@media (min-width: 1024px) {
  /* Each row's own tracks, as shares of the band's padded box. Row 4 is row
     3 mirrored, so the pair is reversed rather than reused — otherwise the
     copy lands in the 298-wide shot track and the headline sets four words
     deep. */
  .wf-feature            { grid-template-columns: 46.34% 52.34%; column-gap: 1.32%; }
  .wf-feature--balanced  { grid-template-columns: 41.24% 53.11%; column-gap: 5.65%; }
  .wf-feature--split     { grid-template-columns: 53.11% 28.06%; column-gap: 18.83%; }
  .wf-feature--split.wf-feature--flip {
                           grid-template-columns: 28.06% 53.11%; }

  /* Rows 2 and 4 lead with the shot. Placing rather than reordering keeps
     the copy first in the DOM, so a screen reader always meets the headline
     before the picture it belongs to. */
  .wf-feature--flip > .wf-feature__copy  { grid-column: 2; grid-row: 1; }
  .wf-feature--flip > .wf-feature__media { grid-column: 1; grid-row: 1; }

  .wf-shot--trust    { justify-self: end;   max-width: 637px; }
  .wf-shot--balanced { justify-self: start; max-width: 438px; }
  .wf-shot--bias,
  .wf-shot--compare  { justify-self: center; max-width: 298px; }
}

/* Stacked, a 646-tall phone render at full column width is a tower. Each
   shot keeps its own natural width instead. */
@media (max-width: 1023px) {
  .wf-feature__media { max-width: 340px; }
  .wf-shot--trust    { max-width: 100%; }
}


/* --------------------------------------------------------------------------
   8. ONBOARDING — CUSTOMER VALUES
   Frame 662:10748 — a full-bleed 1922 x 1249 yellow band with four 353 x 763
   onboarding screens laid across it, every other one dropped 181px.
   -------------------------------------------------------------------------- */

.wf-band--onboarding {
  background-color: var(--wf-yellow);
  padding-block: clamp(2.5rem, 10.15625vw, 12.1875rem)  /*  40 -> 195 */
                 clamp(2.5rem, 5.72917vw, 6.875rem);    /*  40 -> 110 */
}

/* This band is the one place the frame does NOT run a rail beside its
   content: the screen row starts at x=213, which is inside the rail column,
   and the label sits above it rather than next to it. So the label keeps the
   page's left gutter and the row is centred in the full-bleed band beneath
   it, instead of being squeezed into the content column. */
.wf-onboarding__label { padding-block-end: var(--space-32); }

.wf-onboarding__row {
  padding-inline: var(--page-gutter);
}
@media (min-width: 1024px) {
  /* The frame insets the row 213 of 1922 on each side rather than running it
     to the page gutter. */
  .wf-onboarding__row { padding-inline: 11.09%; }
}

.wf-screens {
  display: grid;
  gap: var(--wf-icon-gap);
  /* The row is 1515 of the 1922 band, near enough centred. */
  max-width: 1515px;
  margin-inline: auto;
}

.wf-screen {
  aspect-ratio: 353 / 763;
  border-radius: var(--wf-screen-radius);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

@media (min-width: 481px) {
  .wf-screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .wf-screens {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2.31%;                     /* the frame's 35 of 1515 */
    align-items: start;
  }
  /* The frame staggers the row: screens 1 and 3 sit 181px lower than 2 and
     4. See the note on --wf-stagger — the offset is a share of the card's
     width, because that is what a percentage margin resolves against here.
     The stagger is dropped below 1024, where two columns would make it read
     as a mistake rather than a rhythm. */
  .wf-screen--low { margin-block-start: var(--wf-stagger); }
}


/* --------------------------------------------------------------------------
   9. ADDITIONAL FEATURES
   Frame 662:10725 — five ~257 x 556 screens across the content column, again
   staggered, this time by 182.6 (32.85% of a card).
   -------------------------------------------------------------------------- */

.wf-extras {
  display: grid;
  gap: var(--wf-icon-gap);
  /* The row is 1441 of the 1521 content column, so it stops 80 short of the
     right edge rather than bleeding off it the way the bands above do. */
  max-width: 1441px;
  padding-inline-end: 5.26%;
}

.wf-extra { aspect-ratio: 257 / 556; }

/* Two of the five are drawn with a hairline white stroke and a radius; the
   other three carry their own device shape in the render. */
.wf-extra--framed {
  border: var(--border-hairline) solid #FFFFFF;
  border-radius: clamp(0.75rem, 1.875vw, 2.25rem);   /* 12 -> 36 */
}

@media (min-width: 481px) {
  .wf-extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
  .wf-extras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .wf-extras {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: 2.71%;                     /* the frame's 39 of 1441 */
    align-items: start;
  }
  /* 182.6 of a 257-wide card — a share of the width, as above. */
  .wf-extra--low { margin-block-start: 71.05%; }
}


/* --------------------------------------------------------------------------
   10. CLOSING PHOTOGRAPH + IMPACT
   Frame 662:10749 / 628:4850 — a full-bleed 1922 x 1109 photograph with a
   312-tall yellow band dropped over its bottom edge. Structurally identical
   to the Alaska closing, so .cs-closing's behaviour is repeated here with
   this frame's numbers rather than the classes being shared across two
   different crops.
   -------------------------------------------------------------------------- */

.wf-closing { position: relative; }

/* On a phone the frame's 1.73:1 crop is barely 200px tall and the band would
   cover all of it, so the photograph is given a taller crop and the band
   drops beneath it instead of over it. */
.wf-closing__media { aspect-ratio: 4 / 3; }

.wf-impact {
  background-color: var(--wf-yellow-92);
  /* The frame's band is 312 tall: lockup at 64, paragraph ending at 251. */
  padding-block: clamp(1.5rem, 3.33333vw, 4rem)          /* 24 ->  64 */
                 clamp(1.5rem, 3.17708vw, 3.8125rem);    /* 24 ->  61 */
}

/* The one eyebrow that sits on the yellow band, and the only one on the page
   that is not a rail label: the frame sets it in Semi Bold at #1E1E1E rather
   than Medium at #5E5852.

   The frame puts it at y78 measured from the top of the BAND, and the band
   already carries 64 of padding, so the offset here is the remaining 14 -
   which is also the amount it sits below the top of the lockup beside it. */
.wf-impact__inner { --eyebrow-offset: clamp(0px, 0.72917vw, 0.875rem); }  /* 0 -> 14 */

.wayfinder .wf-impact .section__eyebrow {
  color: var(--wf-ink-impact);
  font-weight: var(--fw-semibold);
}

/* The lockup is components.css's .brand-lockup — the same mark plus live
   text the home page's start-up row uses — at this frame's size and in its
   dark ink rather than the site's yellow. */
.wf-impact .brand-lockup {
  --logo-scale: 1.267;                     /* the frame's 55.76 of 44 */
  gap: 3px;
  align-items: flex-end;
}
.wf-impact .brand-lockup__name {
  color: var(--wf-ink-wordmark);
  font-size: var(--fs-wf-wordmark);
}

.wf-impact__body {
  /* The frame leaves 16 between the foot of the lockup and the cap line of
     the paragraph (lockup 64..121, paragraph from 137). */
  margin-block-start: var(--space-16);
  /* 1441 wide in the frame, running from the content column to 80 short of
     the artboard's right edge. Everything else on this page bleeds right, so
     this is the one place the page gutter is put back rather than a fixed
     measure being used - it lands in the same place and holds at any width. */
  padding-inline-end: var(--page-gutter);
  color: var(--wf-ink-display);
  font-size: var(--fs-cs-impact-body);
  line-height: var(--lh-cs-impact-body);
  letter-spacing: var(--ls-cs-impact-body);
}

@media (min-width: 1024px) {
  .wf-closing__media { aspect-ratio: 1922 / 1109; }
  .wf-impact {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
  }
}


/* --------------------------------------------------------------------------
   11. RAIL GROUPS
   Two sections put a bulleted list under their eyebrow. base.css places the
   eyebrow itself into column 1, so when there is a list as well the pair is
   wrapped and the wrapper takes the column.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .wayfinder .wf-rail-group {
    grid-column: 1;
    grid-row: 1;
    margin-top: var(--eyebrow-offset, 0px);
  }
  /* The offset belongs to the group now, not to the label inside it. */
  .wayfinder .wf-rail-group .section__eyebrow { margin-top: 0; }
}

/* ADDITIONAL FEATURES is the one section whose label sits flush with the top
   of its content, so it declares no offset. */