/* ==========================================================================
   ABOUT / OUR JOURNEY  ·  page-local layer
   Everything above this block is the inherited Nextyn stylesheet, unchanged.
   Only three things are new here: the foreword split, the journey timeline,
   and the floating Nexy dock. Nothing else is touched.
   ========================================================================== */

/* ---- 1. hero -------------------------------------------------------------
   No CTA, no graphic on the right, so the copy is allowed the full measure
   the other pages give up to the product surface. 20ch rather than 18ch:
   the headline is two sentences and 18ch broke it across four lines. */
#top .at-hero-in{max-width:1000px}
/* 17ch, measured: it breaks after "someone's head." and drops "We know whose."
   onto its own line, which is where the ember belongs. 16ch to 19ch all give
   that break; above 20ch the second sentence climbs up beside the first. */
#top .at-h1{max-width:17ch}
#top .at-lede{max-width:56ch;margin-top:26px}
@media(min-width:1120px){ #top .at-hero-in{max-width:1000px} }

/* The legend replaces the CTA row: same vertical position, same weight in the
   composition, but it states a fact rather than asking for a click. */
.ab-legend{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:44px;
  padding-top:22px;border-top:1px solid rgba(255,255,255,.22)}
.ab-legend span{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:#fff;opacity:.8}
.ab-legend i{width:26px;height:1px;background:rgba(255,255,255,.4);display:block}
.ab-legend b{font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  background:linear-gradient(90deg,#e0563b,#e8944b);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- 2. foreword ---------------------------------------------------------
   Copy right, portrait left, so the reader meets the person before the voice.
   .top alignment because the portrait is shorter than four paragraphs and a
   centred column would have floated it in the middle of nothing. */
.fw{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:64px;align-items:start}
.fw-side{position:sticky;top:110px}
.fw-por{position:relative;width:100%;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:#1a1c20;border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(16,20,28,.05),0 30px 55px -28px rgba(16,20,28,.28)}
.fw-por img{width:100%;height:100%;object-fit:cover;display:block}
.fw-sig{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.fw-sig b{display:block;font-size:17px;font-weight:500;letter-spacing:-.018em;color:#000}
.fw-sig em{display:block;font-style:normal;font-size:13px;font-weight:300;
  color:rgba(0,0,0,.58);margin-top:3px}
.fw-body p{font-size:17px;font-weight:300;line-height:1.74;color:rgba(0,0,0,.78);
  max-width:60ch}
.fw-body p + p{margin-top:20px}
.fw-body p strong{font-weight:500;color:#000}
/* The opening line is set larger so the foreword reads as a letter rather than
   as another body block. 20px was measured against .at-lede at this width. */
.fw-body p.fw-open{font-size:20px;line-height:1.62;color:#000;letter-spacing:-.012em}
@media(max-width:1000px){
  .fw{grid-template-columns:1fr;gap:40px}
  .fw-side{position:static;max-width:340px}
}

/* ---- 3. the journey timeline --------------------------------------------
   Free scroll. There is no pin, no scroll hijack and no wheel handler: the
   rows sit in normal flow, and the only thing scroll drives is one custom
   property (--jp, 0 to 1) that scales the ember fill on the centre rail.
   That is a compositor-only transform, so the page scrolls at native speed. */
.jr{position:relative;max-width:1160px;margin:0 auto;padding:8px 0 0}

/* the rail. 1px hairline the whole height, ember fill scaled from the top. */
.jr-rail{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;
  background:var(--line);z-index:0;pointer-events:none}
.jr-fill{position:absolute;inset:0;transform-origin:50% 0;
  transform:scaleY(var(--jp,0));
  background:linear-gradient(180deg,#c8102e 0%,#e0563b 55%,#e8944b 100%)}
/* The head rides the tip of the fill. `top` as a percentage of the same
   containing block the rail uses, rather than a translate off a measured
   height: the rail's height is not stable until the swapped webfont lands, and
   a px offset written by script drifted ~95px behind it. A percentage is
   always right and costs one absolutely positioned 9px dot per frame. */
.jr-head{position:absolute;left:50%;top:calc(var(--jp,0) * 100%);
  width:9px;height:9px;margin-left:-4.5px;margin-top:-4.5px;
  border-radius:50%;background:#e8944b;
  box-shadow:0 0 0 4px rgba(232,148,75,.16);
  opacity:0;transition:opacity .4s var(--ease)}
.jr.is-live .jr-head{opacity:1}

/* rows. Three columns: copy, node, artwork. .alt swaps the two outer cells so
   the eye zig-zags down the rail. */
.jr-row{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) 108px minmax(0,1fr);
  align-items:center;padding:52px 0}
.jr-row:first-child{padding-top:0}
.jr-row:last-child{padding-bottom:0}
/* grid-row:1 is load-bearing, not tidiness. Auto-placement never moves the
   cursor backwards: on a .alt row the copy takes column 3 first, and the
   artwork — asking for column 1, which is now behind the cursor — was pushed
   into a second implicit row. Every alternate entry rendered with its collage
   dumped below the copy and the row 280px taller than its neighbours. Pinning
   both to row 1 puts them back on one line. */
.jr-txt{grid-column:1;grid-row:1;padding-right:8px}
.jr-art{grid-column:3;grid-row:1;padding-left:8px}
.jr-row.alt .jr-txt{grid-column:3;padding-right:0;padding-left:8px}
.jr-row.alt .jr-art{grid-column:1;padding-left:0;padding-right:8px}

/* the node. Sits in the middle column, so it is centred on the rail without
   any absolute positioning to keep in sync. */
.jr-node{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:2}
.jr-dot{width:13px;height:13px;border-radius:50%;background:#fff;
  border:1px solid var(--line-2);display:block;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),
             background .45s var(--ease),transform .45s var(--ease)}
.jr-row.on .jr-dot{border-color:transparent;transform:scale(1.15);
  background:linear-gradient(140deg,#c8102e,#e8944b);
  box-shadow:0 0 0 5px rgba(200,16,46,.09)}

/* copy side */
/* The year is the anchor of the entry and it takes the ember when the rail
   reaches it. Both states are painted as a background clipped to the glyphs —
   the resting one a flat grey gradient — so switching between them swaps one
   background rather than moving between `color` and `transparent`, which
   would flash the text out for a frame on the way past. */
.jr-yr{display:block;font-family:var(--mono);font-size:clamp(30px,3.4vw,44px);
  font-weight:400;line-height:1;letter-spacing:.01em;
  background:linear-gradient(0deg,rgba(0,0,0,.24),rgba(0,0,0,.24));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:background .55s var(--ease)}
.jr-row.on .jr-yr{background:var(--ember-ramp);
  -webkit-background-clip:text;background-clip:text}
.jr-t{font-family:var(--display);font-size:clamp(21px,2vw,27px);font-weight:500;
  line-height:1.18;letter-spacing:-.028em;color:#000;margin:14px 0 12px}
.jr-d{font-size:15px;font-weight:300;line-height:1.68;color:rgba(0,0,0,.68);max-width:44ch}
.jr-row.alt .jr-d,.jr-row.alt .jr-chips{margin-left:auto}
.jr-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;max-width:44ch}
.jr-chip{font-family:var(--ui);font-size:10.5px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(0,0,0,.62);
  border:1px solid var(--line-2);border-radius:100px;padding:6px 13px;white-space:nowrap}
/* sub-milestones. The register list from the design system, tightened: 2025
   and 2026 each carry three separate events and a paragraph flattened them. */
.jr-sub{margin-top:20px;border-top:1px solid var(--line);max-width:44ch}
.jr-row.alt .jr-sub{margin-left:auto}
.jr-sub li{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:13px 0;
  border-bottom:1px solid var(--line)}
.jr-sub .lb{font-family:var(--ui);font-size:10px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(0,0,0,.42);padding-top:3px}
.jr-sub .vl b{display:block;font-size:15px;font-weight:500;letter-spacing:-.014em;color:#000}
.jr-sub .vl span{display:block;font-size:13px;font-weight:300;line-height:1.5;
  color:rgba(0,0,0,.58);margin-top:2px}

/* ---- 4. the collage --------------------------------------------------------
   The homepage's client-service collage, reduced to fit a timeline column:
   two photo plates plus one floating record card, at the same 16px radius and
   the same two shadows. Three plates at this width would have landed at about
   150px each, which is below the size at which a photograph reads as one. */
.jc{position:relative;width:100%;aspect-ratio:5/4}
.jc-ph{position:absolute;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#eef0f3;
  box-shadow:0 2px 4px rgba(16,20,28,.05),0 30px 55px -28px rgba(16,20,28,.28)}
.jc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.jc-ph--a{left:0;top:0;width:60%;aspect-ratio:4/3}
.jc-ph--b{left:64%;top:22%;width:36%;aspect-ratio:4/5}
.jc-card{position:absolute;left:6%;top:63%;width:56%;background:#fff;
  border-radius:16px;padding:14px 16px;z-index:3;
  box-shadow:0 0 0 1px rgba(16,20,28,.055),0 0 28px -4px rgba(16,20,28,.15),
             0 12px 26px -8px rgba(16,20,28,.20),0 34px 56px -26px rgba(16,20,28,.30)}
/* mirrored composition on the alternate side, written out rather than flipped
   with scaleX, because scaleX would reverse the text inside the card */
.jr-row.alt .jc-ph--a{left:auto;right:0}
.jr-row.alt .jc-ph--b{left:0}
.jr-row.alt .jc-card{left:auto;right:6%}

.jc-card-h{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.jc-av{width:26px;height:26px;border-radius:50%;flex:none;display:flex;
  align-items:center;justify-content:center;font-family:var(--mono);font-size:9px;
  letter-spacing:.02em;color:#fff;background:#3a3d44}
.jc-av--warm{background:#c8102e}
.jc-nm{font-size:12px;font-weight:600;letter-spacing:-.005em;color:#1a1a1a}
.jc-tm{font-family:var(--mono);font-size:8.5px;letter-spacing:.02em;
  color:rgba(0,0,0,.35);margin-left:2px}
.jc-live{display:inline-flex;align-items:center;gap:4px;margin-left:auto;
  font-family:var(--mono);font-size:8px;letter-spacing:.06em;text-transform:uppercase;
  color:#c8102e}
.jc-live i{width:5px;height:5px;border-radius:50%;background:#c8102e;display:block;
  animation:cg-pulse 2.3s ease-out infinite}
.jc-card p{font-size:13.5px;font-weight:400;letter-spacing:-.01em;line-height:1.38;
  color:#1a1a1a}

/* ---- 5. reveal -----------------------------------------------------------
   Staggered, not flashed: copy first, artwork 120ms behind it, which is the
   same interval the homepage collage uses between its own plates.

   Every hidden start state is behind .jr.js, which the script adds to itself
   before it does anything else. Without that gate, a script that failed to
   load — or a browser that never delivered the observer callback — would leave
   seven rows of copy at opacity 0 and the section would simply be blank. The
   whole timeline degrades to a static, fully readable list. */
.jr.js .jr-txt,.jr.js .jr-art{opacity:0;transform:translateY(20px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.jr.js .jr-row.on .jr-txt{opacity:1;transform:none}
.jr.js .jr-row.on .jr-art{opacity:1;transform:none;transition-delay:.12s}
.jr-row.on .jc-card{animation:cg-drift 4.6s ease-in-out 1.6s infinite alternate}

/* ---- 6. narrow -----------------------------------------------------------
   Below 900px the rail moves to the left margin and the row becomes one
   column, so nothing has to be read across a centre line on a phone. */
@media(max-width:1080px){
  .jr-row{grid-template-columns:minmax(0,1fr) 84px minmax(0,1fr);padding:44px 0}
  .jr-d,.jr-chips,.jr-sub{max-width:38ch}
}
@media(max-width:900px){
  /* The 38px indent moves from .jr to .jr-row, so the node can be positioned
     against the row's own left edge — which is the same x as the rail — rather
     than against an indented content box it would have to subtract back out.
     .jr-dot is 13px, so -6px lands its centre on the 1px rail exactly. */
  .jr{max-width:none;padding-left:0}
  .jr-rail{left:0;margin-left:0}
  .jr-head{left:0;margin-left:-4px}
  .jr-row,.jr-row.alt{grid-template-columns:1fr;padding:34px 0 34px 38px;align-items:start}
  /* grid-row goes back to auto so the two stack. Held at row 1 they would
     share one cell and print on top of each other. */
  .jr-txt,.jr-art,.jr-row.alt .jr-txt,.jr-row.alt .jr-art{
    grid-column:1;grid-row:auto;padding:0}
  .jr-art{margin-top:26px}
  /* grid-area MUST go back to auto here. An absolutely positioned grid item
     with a definite grid placement is positioned against its grid area, which
     starts at the row's content box — 38px in — and the dot landed 38px right
     of the rail. With auto placement the containing block is the grid
     container's padding box, which is the same x as the rail. */
  .jr-node{grid-area:auto;position:absolute;left:0;margin-left:-6px;top:40px}
  .jr-row:first-child .jr-node{top:6px}
  .jr-d,.jr-chips,.jr-sub{max-width:none}
  .jr-row.alt .jr-d,.jr-row.alt .jr-chips,.jr-row.alt .jr-sub{margin-left:0}
  /* the mirrored composition is pointless in one column */
  .jr-row.alt .jc-ph--a{left:0;right:auto}
  .jr-row.alt .jc-ph--b{left:64%}
  .jr-row.alt .jc-card{left:4%;right:auto}
  /* The card is absolutely positioned, so it adds nothing to .jc's height and
     any part of it below the box lands on the next row. At 56% of a phone
     column it was 166px wide, the line inside wrapped to four, and it hung
     66px past the bottom. Widening it to 78% takes it back to two lines, and
     a square box gives those two lines somewhere to sit. */
  .jc{max-width:460px;aspect-ratio:1/1}
  .jc-card{left:4%;top:57%;width:78%}
}
@media(max-width:560px){
  .jr-sub li{grid-template-columns:1fr;gap:4px}
  .jr-sub .lb{padding-top:0}
}
@media(prefers-reduced-motion:reduce){
  .jr.js .jr-txt,.jr.js .jr-art{opacity:1;transform:none;transition:none}
  .jr-row.on .jc-card{animation:none}
  .jc-live i{animation:none}
  .jr-fill{transform:scaleY(1)}
  .jr-head{display:none}
}

/* ---- 7. the closing band, on the mesh ------------------------------------
   Reuses the service pages' navy band verbatim: same #152647 base, same
   photograph, same scrim. Centred, because it is addressed to a reader who
   arrived for the services rather than the history. */
.ab-band{position:relative;z-index:0;padding:132px 0;border-top:0;isolation:isolate;
  overflow:hidden;background-color:#152647}
.ab-band::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    radial-gradient(70% 60% at 50% 46%,
      rgba(4,10,20,.44) 0%, rgba(4,10,20,.24) 56%, rgba(4,10,20,.06) 88%),
    linear-gradient(180deg,
      rgba(4,10,20,.34) 0%, rgba(4,10,20,.18) 50%, rgba(4,10,20,.34) 100%),
    var(--nx-mesh,linear-gradient(#152647,#152647));
  background-size:auto,auto,cover;
  background-position:center,center,50% 50%}
.ab-band .at-head{margin-left:auto;margin-right:auto;text-align:center;margin-bottom:0}
.ab-band .at-kicker{color:#fff;opacity:.92}
.ab-band .at-kicker::before{background:linear-gradient(90deg,#c8102e 0%,#e8944b 100%);
  background-color:transparent;height:2px;opacity:1}
.ab-band .at-h2{color:#fff;max-width:20ch;margin:24px auto 0}
.ab-band .at-lede{color:#fff;opacity:.84;max-width:58ch;margin:22px auto 0}
.ab-band .at-cta{justify-content:center;margin-top:38px}
.ab-band .at-btn.at-btn--solid{background:#c8102e;border:1px solid #c8102e;color:#fff;
  font-size:16px;font-weight:500;padding:10px 24px;letter-spacing:.004em;
  text-transform:none}
.ab-band .at-btn.at-btn--solid:hover{background:#fff;border-color:#fff;color:#c8102e}
.ab-band .ab-under{margin-top:26px;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.6;text-align:center}
@media(max-width:700px){ .ab-band{padding:82px 0} }

/* ---- 8. Nexy ---------------------------------------------------------------
   The dock is the homepage's, lifted whole: its stylesheet, its pill, its
   floating window and the E-5 orb layer are all above this block. Two things
   only are set here.

   One: the in-hero panel never appears on this page. .nxdP is built against
   the homepage's .nxa hero composition, and this hero is copy on the mesh with
   nothing in the right channel, so the panel has no seat to sit in. The pill
   and the float window are the whole of Nexy here.

   Two: the float window is 344px wide and the component hides itself under
   1120px, so the pill goes with it rather than opening onto nothing. */
.nxdP{display:none !important}
@media(max-width:1119px){ .nxd-pill,.nxd-float{display:none !important} }