/* =====================================================================
   S3 — AWARDS & RECOGNITIONS (Figma CCBP-v02, node 1141:8646)
   A white block (the press cards) scooped into a full-bleed navy panel.
   In the panel: the heading and the five award marks, the roll of awards
   on the left with one open at a time, and the trophy on its plinth on
   the right. The open award and its trophy change together.

   Every measurement below is a pixel of the 1707-wide Figma frame, taken
   through --u, so the panel keeps the file's proportions at any width.
   The type keeps the site's own sizes.
   ===================================================================== */
.rc {
  --u: calc(100vw / 1707);                   /* one Figma px of the frame */
  /* the file's content column, 1200.33 of the 1707 frame, never wider than the page's own column */
  --rc-col: min(calc(100% - 2 * var(--page-pad)), var(--page-max), calc(1200.33 * var(--u)));
  --rc-ink: #fff;
  --rc-dim: #d1d1d1;
  position: relative;
  z-index: 3;
  background: #fff;
  padding-top: clamp(24px, calc(53.8 * var(--u)), 56px);   /* logos -> cards, 53.8 in the file */
}

/* The logos row above the panel is part of the same frame in the file: it shares the awards column
   and sits centred over the cards. Its plate is flatter than the file's (24.3 : 1 against 22.2 : 1),
   so it is sized by the height of the marks — 42 of the frame — rather than by the strip's width,
   which is what makes the logos read at the size they do in the file. */
.recog-band {
  --u: calc(100vw / 1707);
  --rc-col: min(calc(100% - 2 * var(--page-pad)), var(--page-max), calc(1200.33 * var(--u)));
}
.recog-band .recog { max-width: var(--rc-col); }
.recog-band .recog img {
  height: clamp(24px, calc(44.86 * var(--u)), 48px);   /* 42 of mark + the plate's own 10 of padding */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
@media (max-width: 640px) {
  .recog-band .recog img { height: auto; width: min(100%, 360px); }
}

/* ---- the white block: three press photographs ------------------------ */
.rc-top {
  position: relative;
  z-index: 2;                                 /* over the panel it dips into */
  width: var(--rc-col);
  margin-inline: auto;
}
.rc-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, calc(32 * var(--u)), 32px);
}
.rc-cards li {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, calc(16 * var(--u)), 16px);
  text-align: center;
}
/* the corner nicks from the file: a 45deg chamfer off the top-right and the bottom-left, its legs
   76.36 of the card's 378.67 width. A mask rather than a clip, so the other two corners stay round. */
.rc-cards figure {
  --cut: 14.26cqw;                            /* 76.36 / sqrt(2) / 378.67 */
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 16 / 9;        /* taller than the file's 378.667 x 174.906; the width is unchanged */
  border-radius: 16px;
  overflow: hidden;
  background: #eef2f9;
  -webkit-mask-image:
    linear-gradient(to bottom left, #0000 0 var(--cut), #000 var(--cut)),
    linear-gradient(to top right,   #0000 0 var(--cut), #000 var(--cut));
          mask-image:
    linear-gradient(to bottom left, #0000 0 var(--cut), #000 var(--cut)),
    linear-gradient(to top right,   #0000 0 var(--cut), #000 var(--cut));
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.rc-cards img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-cards p {
  /* 16/24 on a 378.67 card in the file: scaled with the card so the captions break on the same words */
  margin: 0;
  font: 500 clamp(12px, calc(16 * var(--u)), 16px)/1.5 "Inter Display", "InterVariable", "Inter", sans-serif;
  color: #818181;
}
.rc-cards b { font-weight: 600; color: #0f0f0f; }

/* ---- the navy panel -------------------------------------------------- */
.rc-panel {
  position: relative;
  margin-top: calc(-40 * var(--u));           /* the captions end inside the scoop */
  padding-bottom: clamp(44px, calc(125.6 * var(--u)), 150px);
  background: linear-gradient(149deg, #163b88 0%, #060f22 100%);
  overflow: hidden;
  isolation: isolate;
}
/* The scoop. Its path is drawn in the panel's own space, which is 2102.62 wide and starts 197.48
   left of the frame, so the shoulders land at 0.9% and 96.6% of the page - not at the panel's edges. */
.rc-notch {
  position: absolute;
  top: -1px;
  left: calc(-197.48 * var(--u));
  width: calc(2102.62 * var(--u));
  height: clamp(52px, calc(183.726 * var(--u)), 220px);
  display: block;
  z-index: 3;
  pointer-events: none;
}
.rc-in {
  position: relative;
  z-index: 4;
  width: var(--rc-col);
  margin-inline: auto;
  padding-top: clamp(96px, calc(261.76 * var(--u)), 300px);   /* panel top -> title, 261.76 in the file */
}

/* heading row: the title, and the five awards as small marks beside it */
.rc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, calc(141 * var(--u)), 150px);
  flex-wrap: nowrap;
}
.rc-title {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(28px, calc(56 * var(--u)), 56px);   /* 56 in the file, so it holds one line beside the marks */
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--rc-ink);
  white-space: nowrap;
}
/* each mark at the size the file gives it, so the row keeps its own rhythm */
.rc-badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex: none;
  gap: clamp(20px, calc(47 * var(--u)), 52px);
  margin-right: calc(-58 * var(--u));     /* the row runs past the column's right edge, as in the file */
}
.rc-badges li { display: flex; }
.rc-badges img {
  display: block;
  width: auto;
  opacity: .9;
  transition: opacity .4s ease, filter .4s ease;
}
.rc-badges li:nth-child(1) img { height: clamp(34px, calc(65 * var(--u)), 72px); }
.rc-badges li:nth-child(2) img { height: clamp(35px, calc(66 * var(--u)), 73px); }
.rc-badges li:nth-child(3) img { height: clamp(44px, calc(85 * var(--u)), 94px); }
.rc-badges li:nth-child(4) img { height: clamp(46px, calc(89 * var(--u)), 98px); }
.rc-badges li:nth-child(5) img { height: clamp(27px, calc(52 * var(--u)), 58px); }
.rc-badges li[aria-current="true"] img { opacity: 1; filter: drop-shadow(0 0 14px rgba(150,190,255,.55)); }

/* ---- the body: the roll of awards, and the trophy -------------------- */
.rc-body {
  position: relative;
  margin-top: clamp(28px, calc(78.6 * var(--u)), 88px);      /* title -> roll, 78.6 in the file */
}

.rc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(10px, calc(20 * var(--u)), 22px);
  width: min(100%, 47%);
}
.rc-item {
  position: relative;
  display: grid;
  grid-template-columns: 2px 1fr;
  gap: clamp(10px, calc(20 * var(--u)), 22px);
  align-items: center;
  padding-block: clamp(14px, 1.7vw, 24px);
  cursor: pointer;
  color: var(--rc-dim);
  transition: color .45s ease;
}
.rc-item::before {                            /* the rule down the left of each award */
  content: "";
  grid-area: 1 / 1;
  align-self: stretch;
  width: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: .55;
  transition: opacity .45s ease;
}
.rc-item[aria-current="true"] { color: var(--rc-ink); }
.rc-item[aria-current="true"]::before { opacity: 1; }
.rc-item:hover { color: #eaf1ff; }
.rc-item:focus-visible { outline: 2px solid #82bdff; outline-offset: 6px; border-radius: 4px; }

.rc-txt { grid-area: 1 / 2; min-width: 0; }
.rc-name {
  margin: 0;
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(15px, 1.35vw, 20px);
  line-height: 1.2;
  color: inherit;
  text-wrap: balance;
}
/* the eyebrow and the by-line belong to the open award only: they open and close with it */
.rc-sub {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin: 0;
  transition: grid-template-rows .5s cubic-bezier(.22,.61,.36,1), opacity .35s ease, margin .5s cubic-bezier(.22,.61,.36,1);
}
.rc-sub > span { overflow: hidden; display: block; min-height: 0; }
.rc-item[aria-current="true"] .rc-sub { grid-template-rows: 1fr; opacity: 1; }
.rc-item[aria-current="true"] .rc-kicker { margin-bottom: clamp(8px, .9vw, 14px); }
.rc-item[aria-current="true"] .rc-by { margin-top: clamp(8px, .9vw, 14px); }
.rc-kicker > span,
.rc-by > span {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(14px, 1.25vw, 19px);
  line-height: 1.2;
  color: var(--rc-ink);
}
.rc-kicker > span { text-transform: uppercase; letter-spacing: .02em; }
/* the open award's name is a step larger than the rest */
.rc-item[aria-current="true"] .rc-name { font-size: clamp(18px, 1.65vw, 24px); }

/* ---- the trophy on its plinth --------------------------------------- */
/* 871.7 wide in the file, its right edge on the frame's, its foot 36.6 below the panel's. It sits
   under the scoop, so a tall trophy is cut by the panel's top edge rather than crossing into white. */
.rc-stage {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: calc(-36.63 * var(--u));
  width: calc(871.7 * var(--u));
  aspect-ratio: 871.7 / 1082.97;
  pointer-events: none;
}
.rc-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
}
/* The trophies cross-fade behind a fixed plinth. The plinth is the part every supplied plate has
   in common, lifted out once (plinth.webp) and laid on top, so it hides each trophy's foot as the
   file does and stays perfectly still while the awards change. The outgoing trophy leaves a beat
   before the incoming one arrives, so the two are never seen standing in the plinth together. */
.rc-trophy {
  z-index: 1;
  opacity: 0;
  transition: opacity .22s ease;
  will-change: opacity;
}
.rc-trophy[data-on] { z-index: 2; opacity: 1; transition: opacity .32s ease .12s; }
.rc-plinth { z-index: 3; }

@media (max-width: 900px) {
  .rc { --rc-col: calc(100% - 2 * var(--page-pad)); }   /* stacked: the page's own column */
  .rc-cards { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
  .rc-head { justify-content: center; text-align: center; }
  .rc-head { flex-wrap: wrap; }
  .rc-badges { justify-content: center; flex-wrap: wrap; gap: 20px; margin-right: 0; }
  .rc-list { width: 100%; max-width: 520px; margin-inline: auto; }
  /* the plinth flows under the roll here. Both plates are transparent across their top third, so
     the stage is pulled up by that much to close the gap the empty pixels would leave */
  .rc-stage {
    position: relative;
    right: auto;
    bottom: auto;
    width: min(100%, 420px);
    margin: clamp(-190px, -34vw, -40px) auto clamp(-30px, -3.2vw, -12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rc-trophy, .rc-sub, .rc-item, .rc-badges img { transition-duration: .01ms; }
}