/* the rail hides under 1120px, but the zone grid kept reserving its column */
@media(max-width:1119px){.sv-zone-grid{grid-template-columns:minmax(0,1fr)}}

/* .sv-lead carries no margin of its own, which never showed on the other pages
   because each one sits alone in its section. This page stacks several. */
.sv-lead + .sv-lead{margin-top:17px}

/* ==========================================================================
   THE HERO HEADLINE
   .at-h1 is capped at 780px while the hero column it sits in is 940px, so this
   headline broke over three lines and the second one ended on "the", cutting
   the ember phrase in half and stalling the read.

   Measured at the real font: the two lines want 876px and 738px, so the cap
   was the whole problem and the words were never at fault. Widening to the
   column the headline already lives in leaves exactly one break that fits, and
   it lands on the span boundary, so the emphasis becomes the entire second
   line instead of starting mid line.

   The cap is set by `#top .at-h1`, an ID selector, so a class rule loses to it
   however late it appears. Matched on the same selector rather than fought
   with !important.
   ========================================================================== */
#top .at-h1{max-width:920px}
@media(max-width:1060px){#top .at-h1{max-width:none}}

/* ==========================================================================
   THE NAVY BAND, ACTUALLY FULL BLEED
   The inherited breakout is left:50% + translateX(-50%) + width:100vw. That
   centres the band on ITS OWN containing block, not on the viewport, because
   the translate is a percentage of the element while the left is a percentage
   of the column. The content column sits left of centre here, since the rail
   takes the right, so the navy ran off the left edge and stopped short of the
   right one.

   Measured instead: script writes the exact distance from the band's box to
   each edge of the document, and the band stretches to those. Without script
   the original rule still applies, so this degrades to what it was. The same
   bug is in the inherited stylesheet on the other pages that carry a rail.
   ========================================================================== */
.sv-sub--band.is-fit::before{
  left:var(--bl);right:var(--br);width:auto;transform:none}

/* ==========================================================================
   THE HERO'S RELATED CASE STUDIES
   The hero was carrying a large field of empty navy under the button. It now
   holds the interlink, on the homepage's own news card, so the glass, the
   glint, the rim, the corner arrow and the hover reveal all arrive with the
   component rather than being restyled here.
   ========================================================================== */
.cs-more{display:block;margin:44px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.17em;text-transform:uppercase;color:#fff;opacity:.62}
#top .nx-cards--2{margin-top:16px;max-width:760px}
@media(max-width:760px){#top .nx-cards--2{max-width:none}}

/* ==========================================================================
   MOTION
   The site had no scroll reveal, so this is new, but it is built from the
   site's own easing token and its own durations. Nothing moves far and
   nothing bounces: the page settles, it does not perform.
   ========================================================================== */
.cs-up{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i,0) * 85ms)}
.cs-up.in{opacity:1;transform:none}

/* the kicker's ember bar draws itself rather than arriving finished */
.at-head.cs-up .at-kicker::before{transform:scaleX(0);transform-origin:0 50%;
  transition:transform .75s var(--ease) .12s}
.at-head.cs-up.in .at-kicker::before{transform:scaleX(1)}

/* ---- the illustrative tag ---
   Kept in the stylesheet: the note under the snapshot was dropped, and putting
   it back is a paragraph, not a rebuild. */
.cs-tag{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;
  padding:7px 14px;border-radius:100px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#fff}
.cs-tag::before{content:"";width:6px;height:6px;border-radius:50%;
  background:var(--ember-ramp,linear-gradient(90deg,#c8102e,#e8944b));
  animation:cs-pulse 2.8s var(--ease) infinite}
@keyframes cs-pulse{0%,100%{opacity:1;transform:scale(1)}
                    50%{opacity:.5;transform:scale(.78)}}
.cs-note{margin-top:16px;padding:14px 18px;border-left:2px solid var(--warm);
  background:rgba(200,16,46,.04);font-size:13px;line-height:1.6;color:var(--muted)}

/* ==========================================================================
   THE SNAPSHOT
   ========================================================================== */
.cs-snap{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--void);box-shadow:0 20px 46px -38px rgba(0,0,0,.34)}
.cs-row{display:grid;grid-template-columns:210px 1fr;gap:20px;
  padding:15px 22px;border-top:1px solid var(--line);position:relative;
  transition:background .32s var(--ease)}
.cs-row:first-child{border-top:0}
.cs-row:hover{background:rgba(21,38,71,.03)}
/* an ember edge lights on the row under the cursor */
.cs-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--ember-ramp,linear-gradient(180deg,#c8102e,#e8944b));
  transform:scaleY(0);transform-origin:50% 50%;
  transition:transform .32s var(--ease)}
.cs-row:hover::before{transform:scaleY(1)}
.cs-row dt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--warm);padding-top:3px}
.cs-row dd{font-size:14.5px;line-height:1.6;color:var(--txt)}
@media(max-width:700px){.cs-row{grid-template-columns:1fr;gap:6px}}

/* ==========================================================================
   THE PULL QUOTE, rule drawn on arrival
   ========================================================================== */
.cs-pull{position:relative;margin:28px 0;padding-left:22px;
  font-family:var(--display);font-size:clamp(19px,1.9vw,24px);font-weight:500;
  line-height:1.34;letter-spacing:-.02em;color:var(--txt);text-wrap:balance}
.cs-pull::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--ember-ramp,linear-gradient(180deg,#c8102e,#e8944b));
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .85s var(--ease) .1s}
.cs-pull.in::before{transform:scaleY(1)}

/* ==========================================================================
   THE CHAIN
   The three seats are not three cards in a row, they are three positions on a
   value chain, and the point of the case study is that all three were covered.
   The rail draws left to right as the section arrives, each stop lights in
   turn, and the cards themselves are the inherited glass card, so the cursor
   light and the ember hairline on hover come with them unchanged.

   Order top to bottom is label, then the line and its dot, then the card, so
   the eye reads the position in the market before the person who held it.

   Timing is tied to the rail rather than guessed. The rail runs for 1.15s from
   the first stop to the last, so the middle stop is reached near its halfway
   point and the last at the end. Each dot and label waits for the line to
   arrive rather than appearing on its own clock. */
.cs-chain{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin-top:56px;padding-top:92px}
.cs-chain-rail{position:absolute;top:56px;left:calc(16.6% - 4px);right:calc(16.6% - 4px);
  height:1px;background:linear-gradient(90deg,#c8102e,#e0563b 55%,#e8944b);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.15s var(--ease) .1s}
.cs-chain.in .cs-chain-rail{transform:scaleX(1)}

.cs-stop{position:relative}
/* solid white, so it reads as a station on the line rather than an outline */
.cs-stop::before{content:"";position:absolute;top:-41px;left:50%;margin-left:-5px;
  width:10px;height:10px;border-radius:50%;background:#fff;border:0;
  box-shadow:0 0 0 4px rgba(255,255,255,.14);
  transform:scale(0);transition:transform .42s var(--ease) .18s}
.cs-chain.in .cs-stop::before{transform:scale(1)}
.cs-chain.in .cs-stop:nth-child(3)::before{transition-delay:.72s}
.cs-chain.in .cs-stop:nth-child(4)::before{transition-delay:1.26s}

/* the label sits above the line, and waits for the line to reach it */
.cs-stop-label{display:block;position:absolute;top:-74px;left:0;right:0;
  text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:#e8944b;
  opacity:0;transform:translateY(6px);
  transition:opacity .45s var(--ease) .22s,transform .45s var(--ease) .22s}
.cs-chain.in .cs-stop-label{opacity:.95;transform:none}
.cs-chain.in .cs-stop:nth-child(3) .cs-stop-label{transition-delay:.76s}
.cs-chain.in .cs-stop:nth-child(4) .cs-stop-label{transition-delay:1.3s}
.cs-stop .sv-uc{height:100%}

@media(max-width:900px){
  /* stacked: the chain turns vertical and runs down the left, label still first */
  .cs-chain{grid-template-columns:1fr;gap:34px;padding-top:0;padding-left:26px}
  .cs-chain-rail{top:8px;bottom:8px;left:4px;right:auto;width:1px;height:auto;
    background:linear-gradient(180deg,#c8102e,#e0563b 55%,#e8944b);
    transform:scaleY(0);transform-origin:50% 0;
    transition:transform 1.15s var(--ease) .1s}
  .cs-chain.in .cs-chain-rail{transform:scaleY(1)}
  .cs-stop::before{top:4px;left:-26px;margin-left:0}
  .cs-stop-label{position:static;text-align:left;margin-bottom:9px;transform:none}
}

/* ==========================================================================
   THE SPINE
   The method's closing points are a sequence, so they are drawn as one: a line
   down the margin and a node on each point, arriving in order.

   The line owns the timing. Each point waits until the line has descended past
   it, so the content pops as the line arrives rather than on its own schedule.
   The delay per point is written by script from that point's real position in
   the list, because the points are different heights and an even stagger would
   drift away from the line. The line's own speed is unchanged. */
.cs-steps{position:relative;margin:26px 0 0;padding:4px 0 4px 36px;list-style:none}
.cs-steps::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;
  background:linear-gradient(180deg,#c8102e,#e0563b 55%,#e8944b);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform 1.2s var(--ease)}
.cs-steps.in::before{transform:scaleY(1)}
.cs-steps li{position:relative;margin-bottom:17px;font-size:15px;line-height:1.68;
  color:var(--txt);
  opacity:0;transform:translateY(9px);
  transition:opacity .5s var(--ease) var(--d,0s),transform .5s var(--ease) var(--d,0s)}
.cs-steps.in li{opacity:1;transform:none}
.cs-steps li:last-child{margin-bottom:0}
/* solid red, matching the line it sits on */
.cs-steps li::before{content:"";position:absolute;left:-36px;top:8px;width:11px;height:11px;
  border-radius:50%;background:var(--warm);border:0;
  box-shadow:0 0 0 3px rgba(200,16,46,.12);
  transform:scale(0);transition:transform .42s var(--ease) var(--d,0s)}
.cs-steps.in li::before{transform:scale(1)}

@media(prefers-reduced-motion:reduce){
  .cs-up,.cs-pull::before,.cs-chain-rail,.cs-stop::before,.cs-stop-label,
  .cs-steps::before,.cs-steps li,.cs-steps li::before{
    opacity:1!important;transform:none!important;transition:none!important}
  .cs-tag::before{animation:none}
}