/* Restore Coral — Our Story
   Horizontal scroll-driven timeline on desktop, plain vertical document below
   1024px. Uses the shared design system: Poppins display, Funnel Sans body,
   Abyss Ink / Tide Paper surfaces, --ease-card motion values. */

/* The shared stylesheet sets `body{overflow-x:hidden}`. That makes the body a
   scroll container, which becomes the sticky stage's scrollport — so the
   pinned timeline silently stops pinning and scrolls away as an empty band.
   `clip` suppresses the same sideways overflow WITHOUT creating a scroll
   container, so sticky keeps working. Measured on this page: `hidden` gives
   stickyTop 0/-3427/-6854 (broken); `clip` gives 0/0/0 with scrollWidth 1440. */
html{overflow-x:clip}
body{overflow-x:clip}

/* ---------- 1. Hero — scroll-sequenced corals, then the copy ----------
   A tall section pins a 100svh stage. Scroll progress brings three corals
   through the centre one at a time; only once the last has faded out does the
   copy appear. Opacity/offset come from custom properties written by
   about.js, so nothing here animates on its own clock. */
.rc-ahero{position:relative;background:var(--rc-ink);height:var(--ah-height,360svh)}
.rc-ahero__stage{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;place-items:center;
}

/* Corals and copy share one grid cell so the composition stays centred and
   invisible items never reserve layout space. */
.rc-ahero__art,.rc-ahero__inner{grid-area:1/1}

.rc-ahero__art{
  position:relative;width:100%;height:100%;
  display:grid;place-items:center;pointer-events:none;
}
.rc-ahero__coral{
  grid-area:1/1;
  /* Dominant in the frame: these are the whole scene, not decoration. */
  width:auto;height:min(76vh,78vw);max-width:92vw;object-fit:contain;
  opacity:var(--o,0);
  transform:translate3d(0,var(--y,0px),0) scale(var(--s,1));
  filter:drop-shadow(0 34px 54px rgba(0,0,0,.5));
  will-change:opacity,transform;
}

.rc-ahero__inner{
  position:relative;z-index:2;width:100%;
  opacity:var(--copy-o,0);
  transform:translate3d(0,var(--copy-y,26px),0);
  will-change:opacity,transform;
}
.rc-ahero__eyebrow{color:var(--rc-cyan)}
.rc-ahero__title{
  font-size:clamp(40px,7vw,112px);color:var(--rc-white);
  margin:16px 0 0;max-width:15ch;
}
.rc-ahero__text{
  margin:26px 0 0;max-width:54ch;
  font-size:clamp(15px,1.25vw,19px);line-height:1.6;color:rgba(244,246,242,.86);
}
.rc-ahero__hint{
  position:absolute;z-index:3;left:50%;bottom:22px;transform:translateX(-50%);
  font-family:var(--font-ui);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(244,246,242,.7);display:flex;gap:8px;align-items:center;
  opacity:var(--hint-o,1);
}
.rc-ahero__hint span{animation:pheroNudge 2.4s var(--ease-card) infinite}
@media(max-width:899px){
  .rc-ahero__coral{height:min(58vh,86vw)}
}

/* ---------- 2. Timeline — shared ---------- */
/* Do NOT put overflow/clip on this section or its sticky child: an overflow
   value other than `visible` makes that ancestor the sticky element's
   scrollport, and because it does not itself scroll the stage silently stops
   pinning and the stage scrolls away leaving an empty band. The track's
   overhang is clipped by `html{overflow-x:clip}` plus the inner
   `.rc-tl__viewport`, neither of which is a sticky ancestor. */
.rc-tl{background:var(--rc-ink);color:var(--rc-paper);position:relative}
.rc-tl__sticky{position:relative}

/* ---------- Scrubber: the years ARE the timeline ----------
   The year row rides the SAME transform as the track and is full-bleed, so
   labels enter from the right edge and leave past the left edge. A rail of
   evenly spaced markers inside a fixed-width box reads as a widget bolted on
   top; this reads as one continuous axis the content travels along. */
.rc-tl__rail{
  position:relative;z-index:4;
  /* Clears the fixed site chrome; the year row must never sit under the nav. */
  padding:clamp(66px,6.4vw,84px) 0 0;
  /* Safe to clip: the rail is a CHILD of the sticky stage, never an ancestor
     of it, so this cannot hijack the sticky scrollport. */
  overflow-x:clip;
}
.rc-tl__years{
  position:relative;height:28px;
  transform:translate3d(var(--tl-x,0px),0,0);
  will-change:transform;
}
/* Each label is placed and sized from its own entry's measured geometry, so a
   label and its card always share a centre line whatever the module widths. */
.rc-tl__yearMark{
  position:absolute;top:0;left:var(--at,0px);width:var(--w,auto);
  display:flex;justify-content:center;
  font-family:var(--font-ui);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,246,242,.4);white-space:nowrap;
  transition:color var(--dur-card) var(--ease-card);
}
.rc-tl__yearMark.is-current{color:var(--rc-cyan)}
.rc-tl__yearMark::after{
  content:"";position:absolute;top:calc(100% + 6px);left:50%;
  width:1px;height:10px;background:currentColor;opacity:.55;
}
.rc-tl__railLine{
  display:block;margin-top:15px;height:1px;
  background:rgba(244,246,242,.18);
}

/* Per-item year. The rail carries the years on desktop, so this is hidden
   there and revealed only when the rail is not shown (narrow / reduced
   motion), where each entry has to label itself. */
.rc-tl__itemYear{
  display:none;margin:0 0 2px;
  font-family:var(--font-ui);font-size:13px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rc-cyan);
}
@media(max-width:1023px){.rc-tl__itemYear{display:block}}
@media(prefers-reduced-motion:reduce){.rc-tl__itemYear{display:block}}
.rc-tl__metric{
  margin:16px 0 0;font-family:var(--font-display);font-weight:800;
  font-size:clamp(40px,4.4vw,72px);line-height:.92;letter-spacing:-.05em;color:var(--rc-white);
}
.rc-tl__metric span{
  display:block;margin-top:8px;
  font-family:var(--font-ui);font-weight:400;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(244,246,242,.66);
}
.rc-tl__title{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.05em;line-height:1.0;
  font-size:clamp(21px,2.1vw,38px);margin:16px 0 10px;color:var(--rc-white);
}
.rc-tl__title--feature{font-size:clamp(30px,4.6vw,76px);line-height:.96}
.rc-tl__text{
  margin:0;font-size:clamp(15px,1.05vw,17px);line-height:1.6;
  color:rgba(244,246,242,.78);max-width:46ch;
}
.rc-tl__fig{margin:16px 0 0;overflow:hidden;background:rgba(244,246,242,.06)}
.rc-tl__fig img{width:100%;height:100%;object-fit:cover;display:block}
.rc-tl__fig--tall{aspect-ratio:4/3}
.rc-tl__fig--wide{aspect-ratio:16/10}
.rc-tl__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.rc-tl__pair .rc-tl__fig{margin:0;aspect-ratio:1/1}

/* Full-bleed chapters */
.rc-tl__bleed{position:absolute;inset:0;margin:0;overflow:hidden}
.rc-tl__bleed img{width:100%;height:100%;object-fit:cover;display:block}
.rc-tl__bleed::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,21,43,.42) 0%,rgba(7,21,43,.46) 44%,rgba(7,21,43,.88) 100%);
}
.rc-tl__bleedCopy{position:relative;z-index:2}

/* ---------- 2a. Desktop: pinned horizontal track ---------- */
@media(min-width:1024px){
  /* Height is set by script from the real track width, so the scroll distance
     always matches the content instead of a guessed multiplier. */
  .rc-tl{height:var(--tl-height,400svh)}
  .rc-tl__sticky{
    position:sticky;top:0;height:100svh;
    display:flex;flex-direction:column;
  }
  /* The rail OVERLAYS the stage rather than taking a band off the top of it.
     As a flex row it stole its own height from the viewport, so a full-bleed
     chapter could only ever cover ~81% of the screen. Floating it keeps the
     viewport a true 100svh and lets those images fill the whole frame. */
  .rc-tl__rail{
    position:absolute;inset:0 0 auto 0;z-index:5;pointer-events:none;
    padding-bottom:0;
  }
  /* Safe to clip here: this sits INSIDE the sticky element, so it is not an
     ancestor of it and cannot hijack its scrollport. */
  .rc-tl__viewport{flex:1 1 auto;position:relative;overflow:clip;min-height:0}
  .rc-tl__track{
    position:absolute;inset:0;margin:0;padding:0 8vw;list-style:none;
    display:flex;align-items:stretch;gap:4vw;
    width:max-content;
    transform:translate3d(var(--tl-x,0px),0,0);
    will-change:transform;
  }
  .rc-tl__item{
    position:relative;flex:none;display:flex;flex-direction:column;justify-content:center;
    /* Clear the floating rail. Padding keeps the item exactly stage-height,
       unlike a margin, which would make it taller and push copy off screen. */
    padding-top:var(--tl-railH,0px);
    /* Off-focus items stay legible: this is editorial de-emphasis, not a
       disabled state, and any item fully on screen must still be readable. */
    opacity:.62;transform:translateY(10px);
    transition:opacity var(--dur-card) var(--ease-card),transform var(--dur-card) var(--ease-card);
  }
  .rc-tl__item.is-near{opacity:1;transform:none}
  .rc-tl__item--compact{width:24vw}
  .rc-tl__item--std{width:38vw}
  /* Feature chapters are genuinely full-screen: the image covers the entire
     stage, including behind the floating rail, so no band of background shows
     above it. They opt out of the rail padding for that reason, and their copy
     is bottom-anchored so it never collides with the year row.
     Do NOT use a negative `margin-block` to achieve the bleed — the track is a
     stretch flex row, so vertical margins make the item TALLER than the stage
     and push its bottom-anchored copy off screen. */
  .rc-tl__item--feature{
    width:100vw;justify-content:flex-end;
    padding:0 0 clamp(40px,4.6vw,72px);
  }
  .rc-tl__item--feature:first-child{margin-left:-8vw}
  .rc-tl__item--feature:last-child{margin-right:-8vw}
  .rc-tl__item--feature .rc-tl__bleedCopy{
    padding:0 clamp(40px,6vw,96px);max-width:52ch;
  }
  /* A deeper top stop keeps the year labels readable where they now sit over
     the photograph rather than over the page background. */
  .rc-tl__item--feature .rc-tl__bleed::after{
    background:linear-gradient(180deg,
      rgba(7,21,43,.72) 0%, rgba(7,21,43,.42) 22%,
      rgba(7,21,43,.46) 52%, rgba(7,21,43,.88) 100%);
  }
  /* The stage is short, and a feature headline is the largest type on the
     page, so it must be sized against the stage height rather than width
     alone or the last line falls off the bottom edge. */
  .rc-tl__item--feature .rc-tl__title--feature{
    font-size:min(clamp(30px,4.2vw,68px),9vh);
  }
  .rc-tl__item--std .rc-tl__fig--tall{max-height:34vh}
  .rc-tl__item--std .rc-tl__fig--wide{max-height:30vh}
  .rc-tl__item--std .rc-tl__pair{max-height:26vh}
  .rc-tl__item--std .rc-tl__pair .rc-tl__fig{height:100%}
}

/* ---------- 2b. Below 1024px: plain vertical document ---------- */
@media(max-width:1023px){
  .rc-tl__viewport{overflow:visible}
  .rc-tl__track{
    margin:0;padding:0 20px clamp(56px,9vw,88px);list-style:none;
    display:grid;gap:clamp(48px,9vw,76px);
  }
  .rc-tl__item{position:relative}
  /* The fixed Adopt card sits bottom-right and would otherwise cover the
     measure of every stacked entry. Narrow the text column instead of letting
     it run underneath. */
  .rc-tl__title,.rc-tl__text,.rc-tl__metric,.rc-tl__itemYear{padding-right:124px}
  .rc-tl__item--feature{
    margin-inline:-20px;padding:clamp(56px,11vw,86px) 20px;
    min-height:70svh;display:flex;flex-direction:column;justify-content:flex-end;
  }
  /* The scrubbing rail only means something against a horizontal track. */
  .rc-tl__rail{display:none}
  .rc-tl__fig--tall,.rc-tl__fig--wide{aspect-ratio:16/10}
}
@media(max-width:520px){
  /* The card shrinks at this width, so the reserve shrinks with it. */
  .rc-tl__title,.rc-tl__text,.rc-tl__metric,.rc-tl__itemYear{padding-right:112px}
}

/* ---------- 3. Team ---------- */
.rc-team{
  display:grid;gap:18px;margin:0;padding:0;list-style:none;
}
@media(min-width:760px){.rc-team{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.rc-team{grid-template-columns:repeat(3,1fr)}}
.rc-team__card{
  position:relative;overflow:hidden;border-radius:24px;
  aspect-ratio:3/4;background:var(--rc-ink);
  isolation:isolate;cursor:default;
}
.rc-team__img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  transition:transform var(--dur-media) var(--ease-card);
}
/* Overlay over the image, revealed with the name on hover/focus. */
.rc-team__scrim{
  position:absolute;inset:0;z-index:1;opacity:0;
  background:linear-gradient(180deg,rgba(0,2,145,.18) 0%,rgba(7,21,43,.52) 46%,rgba(7,21,43,.9) 100%);
  transition:opacity var(--dur-card) var(--ease-card);
}
.rc-team__body{
  position:absolute;z-index:2;left:0;right:0;bottom:0;
  display:grid;gap:6px;padding:0 22px 24px;
  opacity:0;transform:translateY(12px);
  transition:opacity var(--dur-card) var(--ease-card),transform var(--dur-card) var(--ease-card);
}
.rc-team__name{
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  letter-spacing:-.04em;line-height:1.02;
  font-size:clamp(18px,1.7vw,26px);color:var(--rc-white);
}
.rc-team__role{
  font-family:var(--font-ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--rc-cyan);line-height:1.4;
}
.rc-team__card:hover .rc-team__scrim,
.rc-team__card:focus-visible .rc-team__scrim,
.rc-team__card:hover .rc-team__body,
.rc-team__card:focus-visible .rc-team__body{opacity:1}
.rc-team__card:hover .rc-team__body,
.rc-team__card:focus-visible .rc-team__body{transform:none}
.rc-team__card:hover .rc-team__img,
.rc-team__card:focus-visible .rc-team__img{transform:scale(1.045)}
.rc-team__card:focus-visible{outline:2px solid var(--rc-cyan);outline-offset:3px}

/* Touch and narrow screens have no hover, so the name must always be shown
   rather than hidden behind an interaction that cannot happen there. */
@media(hover:none),(max-width:759px){
  .rc-team__scrim,.rc-team__body{opacity:1}
  .rc-team__body{transform:none}
}

/* ---------- 3b. Partners — auto-advancing category carousel ---------- */
.rc-partners{background:var(--rc-white);color:var(--rc-ink)}

/* Slides stack in one grid cell so only the active one is visible. Left to
   itself the cell would reserve the TALLEST category's height, leaving a large
   void under the short ones, so the controller sets --stage-h to the active
   slide and the height eases between categories. */
.rc-partners__stage{
  display:grid;margin-top:clamp(26px,3.4vw,40px);
  height:var(--stage-h,auto);
  transition:height .62s var(--ease-card);
}
.rc-partners__slide{
  grid-area:1/1;
  /* Without this every stacked slide stretches to the row height — i.e. to the
     TALLEST category — so measuring a slide would just report that maximum and
     the stage could never shrink for a small category. */
  align-self:start;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(14px);
  transition:opacity .62s var(--ease-card),transform .62s var(--ease-card),visibility 0s linear .62s;
}
.rc-partners__slide.is-active{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:none;transition-delay:0s,0s,0s;
}
.rc-partners__groupTitle{
  margin:0 0 clamp(20px,2.6vw,30px);text-align:center;
  font-family:var(--font-ui);font-weight:600;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rc-blue);
}
/* Centred rows: auto-fit with a max track would stretch a three-logo row across
   the full measure, so lay the items out as a centred flex line instead. */
.rc-partners__grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(18px,2.4vw,34px);margin:0;padding:0;list-style:none;
}
.rc-partners__item{
  display:grid;gap:14px;justify-items:center;align-content:start;
  /* Fixed slot for the mark: logos differ in height by shape, and without a
     reserved row the captions below would sit at ragged baselines. */
  grid-template-rows:104px auto;
  flex:0 0 auto;width:188px;
  padding:22px 16px 18px;text-align:center;
}
/* A long horizontal lockup is constrained by the cell width, so at the same
   declared height it letterboxes and renders far smaller than its neighbours.
   Give it room along the axis that actually limits it, and let the per-mark
   --logo-scale drive that axis too — a height multiplier alone cannot enlarge
   a width-constrained lockup. */
.rc-partners__item--wide{width:calc(272px * var(--logo-scale,1))}
.rc-partners__logo{
  /* No local --logo-scale reset here: it would shadow the per-mark value set
     on the item and the emphasis would silently do nothing. */
  display:block;width:auto;max-width:100%;
  height:calc(56px * var(--logo-scale,1));object-fit:contain;
  align-self:center;
  opacity:.84;transition:opacity .3s var(--ease-card),transform .3s var(--ease-card);
}
/* One fixed height makes a square shield read half the size of a wide
   wordmark. Size by shape so every mark carries similar optical weight. */
.rc-partners__logo--squat{height:calc(68px * var(--logo-scale,1))}
.rc-partners__logo--square{height:calc(78px * var(--logo-scale,1))}
/* An 8:1 lockup cannot be 84px tall without being ~670px wide, so a height
   rule just letterboxes it inside a tall box. Drive these by WIDTH instead:
   the element box then equals the painted artwork, with no dead space. */
.rc-partners__logo--wide{width:100%;height:auto}
.rc-partners__item:hover .rc-partners__logo{opacity:1;transform:translateY(-2px)}
.rc-partners__name{
  font-family:var(--font-ui);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;line-height:1.35;color:var(--rc-subdued);
}

/* Progress dots: each fills over the dwell time, so the carousel reads as
   deliberate rather than as content disappearing on its own. */
.rc-partners__nav{
  display:flex;justify-content:center;gap:10px;
  margin-top:clamp(26px,3.4vw,40px);
}
.rc-partners__dot{
  position:relative;overflow:hidden;
  width:34px;height:4px;padding:0;border:0;border-radius:999px;
  background:rgba(7,21,43,.14);cursor:pointer;
  transition:background .3s var(--ease-card);
}
.rc-partners__dot:hover{background:rgba(7,21,43,.26)}
.rc-partners__dot:focus-visible{outline:2px solid var(--rc-cyan);outline-offset:3px}
.rc-partners__dotFill{
  position:absolute;inset:0;transform-origin:left center;transform:scaleX(0);
  background:var(--rc-blue);
}
.rc-partners__dot.is-active .rc-partners__dotFill{
  animation:rcPartnerDot var(--partner-dwell,5200ms) linear forwards;
}
/* Paused by the controller on hover/focus so a reader can finish a row. */
.rc-partners.is-paused .rc-partners__dot.is-active .rc-partners__dotFill{
  animation-play-state:paused;
}
@keyframes rcPartnerDot{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media(max-width:520px){
  .rc-partners__item{grid-template-rows:84px auto;width:142px;padding:16px 10px 14px}
  /* Capped at the text column so a scaled lockup cannot overflow a 390px screen. */
  .rc-partners__item--wide{width:min(calc(200px * var(--logo-scale,1)),100%)}
  .rc-partners__logo{height:calc(46px * var(--logo-scale,1))}
  .rc-partners__logo--squat{height:calc(56px * var(--logo-scale,1))}
  .rc-partners__logo--square{height:calc(64px * var(--logo-scale,1))}
}

@media(prefers-reduced-motion:reduce){
  /* No auto-advance and no cross-fade: show every category as one stacked,
     fully readable list, and drop the now-meaningless progress dots. */
  .rc-partners__stage{display:block;height:auto!important;transition:none}
  .rc-partners__slide{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:none;transition:none;
    margin-top:clamp(38px,5vw,62px);
  }
  .rc-partners__slide:first-child{margin-top:0}
  .rc-partners__nav{display:none}
  .rc-partners__logo{transition:none}
  .rc-partners__item:hover .rc-partners__logo{transform:none}
}

/* ---------- 4. Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .rc-ahero__hint span{animation:none}
  /* Collapse the sequenced hero to one static frame: the copy, legible
     immediately, with a single coral behind it. */
  .rc-ahero{height:auto!important}
  .rc-ahero__stage{position:static;height:auto;min-height:88svh;padding:120px 0 90px}
  .rc-ahero__inner{opacity:1!important;transform:none!important}
  .rc-ahero__coral{opacity:0!important}
  .rc-ahero__coral:first-child{opacity:.26!important;transform:none!important}
  .rc-ahero__hint{display:none}

  .rc-tl{height:auto!important}
  .rc-tl__sticky{position:static;height:auto;overflow:visible}
  .rc-tl__viewport{overflow:visible}
  .rc-tl__track{
    position:static;width:auto;transform:none;
    display:grid;gap:clamp(48px,9vw,76px);padding:0 20px clamp(56px,9vw,88px);
  }
  .rc-tl__item{width:auto!important;opacity:1;transform:none;transition:none}
  .rc-tl__item--feature{
    width:auto!important;min-height:66svh;
    margin:0 -20px!important;padding:clamp(56px,8vw,86px) 20px;
  }
  .rc-tl__item--feature .rc-tl__bleed{top:0}
  .rc-tl__rail{display:none}

  /* No hover under reduced motion either: show the names outright. */
  .rc-team__scrim,.rc-team__body{opacity:1;transform:none;transition:none}
  .rc-team__img{transition:none}
  .rc-team__card:hover .rc-team__img{transform:none}
}