/* Snow Camp (/snow-camp). References: Rolex (the film becoming three cards),
   Symbol Studio (numbered cards, bars drawn to scale), White Desert (the
   sliding pair). Headings follow the homepage as measured: Inter 400,
   sentence case, tight tracking; small uppercase labels carry the structure.
   Everything that moves is a function of scroll position (snow-camp.js),
   eased like the rest of the site. The only thresholds are a one-off fade
   as blocks first appear and the + buttons, which are clicks. */

.snow-camp-page {
  --sc-ink: #17131c;
  --sc-muted: #5f5866;
  --sc-purple: #5f3c91;
  --sc-lilac: #c7b5e3;
  --sc-night: #1d1428;
  --sc-mist: #f5f3f8;
  --sc-rule: rgba(35, 25, 42, .14);
  --sc-gutter: clamp(1.25rem, 4vw, 5rem);
  --sc-gap: clamp(.6rem, 1.1vw, 1.1rem);
  margin: 0;
  background: #fff;
  color: var(--sc-ink);
}
.sc-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Type --------------------------------------------------------------- */
.sc-display {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.4vw, 5.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.sc-display--statement { font-size: clamp(2.5rem, 5.4vw, 5.8rem); line-height: 1; }
.sc-head__lede { grid-column: 1 / span 7; max-width: 36rem; margin: clamp(1.25rem, 3vh, 2rem) 0 0; color: var(--sc-muted); font-size: clamp(1.1rem, 1.5vw, 1.45rem); line-height: 1.5; letter-spacing: -.01em; }
.sc-label {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 clamp(1.5rem, 3vh, 2.25rem);
  color: var(--sc-purple);
  font-size: .7rem;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sc-label span {
  display: inline-grid;
  place-items: center;
  min-width: 2.1rem;
  height: 1.5rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
}
.sc-head__body p,
.sc-support__body p {
  margin: 0 0 1.2rem;
  color: #2d2733;
  font-size: clamp(1rem, 1.15vw, 1.2rem);
  line-height: 1.65;
}

/* Section head: label and heading on the left, the paragraph set lower on
   the right (White Desert's offset, kept). */
.sc-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  align-items: end;
}
.sc-head .sc-label { grid-column: 1 / -1; }
/* Chapters are marked by their numbered label and the space around them,
   not by rules: the page should run on, not stop and start. */
.sc-head .sc-display { grid-column: 1 / span 6; }
.sc-head__body { grid-column: 8 / span 5; max-width: 34rem; }
.sc-head__body p:last-child { margin-bottom: 0; }
.sc-head--wide .sc-display { grid-column: 1 / span 10; }

/* ---- 1 · Hero → three cards -------------------------------------------- */
/* The stage holds for the length of the section while the film closes in.
   Values (set by the script):
     --copy  0 → 1 as the logos ease away
     --m     0 → 1 as the film becomes the middle card
     --side  0 → 1 as the outer cards slide in
     --text  0 → 1 as the card titles arrive */
.sc-intro {
  --copy: 0; --m: 0; --side: 0; --text: 0;
  position: relative;
  z-index: 0;
  height: 360svh;
  background: var(--sc-night);
  color: #fff;
}
.tlh-inner main > *:not(.sc-intro, dialog) { position: relative; z-index: 1; }
.sc-intro__stage { position: sticky; top: 0; height: 100svh; min-height: 34rem; overflow: hidden; }
.sc-intro__film {
  position: absolute;
  inset: 0;
  clip-path: inset(var(--clip-t, 0px) var(--clip-r, 0px) var(--clip-b, 0px) var(--clip-l, 0px) round var(--clip-round, 0px));
  will-change: clip-path;
}
.sc-intro__film video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.08 - var(--m) * .08));
}
/* The banner's purple over the film. It thins as the film becomes a card so
   the footage carries the card, the way a photograph carries the others. */
.sc-intro__film::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(29, 20, 40, .35), rgba(29, 20, 40, 0) 30%, rgba(29, 20, 40, .45)),
    rgba(95, 60, 145, calc(.62 - var(--m) * .3));
  mix-blend-mode: multiply;
}
.sc-hero__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1.25rem, 3vh, 2.25rem);
  padding: 0 var(--sc-gutter);
  text-align: center;
  opacity: calc(1 - var(--copy));
  transform: translate3d(0, calc(var(--copy) * -6vh), 0) scale(calc(1 - var(--copy) * .1));
  pointer-events: none;
}
.sc-hero__kicker { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; }
.sc-hero__title { margin: 0; font-size: clamp(2rem, 5vw, 4.5rem); font-weight: 400; letter-spacing: -.04em; }
.sc-hero__title img { display: block; width: min(52rem, 82vw); height: auto; }
.sc-hero__cue {
  position: absolute;
  left: 50%;
  bottom: clamp(1.5rem, 5vh, 3rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transform: translateX(-50%);
  opacity: calc(1 - var(--copy) * 3);
}

/* The three cards, Rolex: tall, side by side, a small label over a title at
   the foot of each. The middle card is a window: the film behind it is
   clipped to exactly its shape. */
.sc-cards {
  position: absolute;
  inset: clamp(5.5rem, 13vh, 8rem) var(--sc-gutter) clamp(2.5rem, 7vh, 4.5rem);
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-card { position: relative; min-width: 0; }
.sc-card a {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
}
.sc-card--0 a, .sc-card--2 a { background: #2a1f37; }
.sc-card--0 { transform: translate3d(calc((1 - var(--side)) * -70vw), 0, 0) rotate(calc((1 - var(--side)) * -4deg)); }
.sc-card--2 { transform: translate3d(calc((1 - var(--side)) * 70vw), 0, 0) rotate(calc((1 - var(--side)) * 4deg)); }
.sc-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc(1.15 - var(--side) * .15));
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1);
}
.sc-card a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 19, 28, 0) 50%, rgba(23, 19, 28, .62));
  pointer-events: none;
}
/* The film card has nothing of its own to shade until its title arrives. */
.sc-card--1 a::after { opacity: var(--text); }
.sc-card__text {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: .55rem;
  padding: clamp(1.25rem, 3vw, 2.75rem) 1.25rem;
  text-align: center;
  opacity: var(--text);
  transform: translate3d(0, calc((1 - var(--text)) * 1.5rem), 0);
}
.sc-card__label { font-size: .7rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; }
.sc-card__title { font-size: clamp(1.35rem, 2.6vw, 2.75rem); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
/* Hover: a purple screen rises behind the card with a light that follows
   the pointer, the picture dims, the title lifts and the detail slides up
   under it, ending in a Read more button down to the section. */
.sc-card__screen {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(28rem circle at var(--mx, 50%) var(--my, 70%), rgba(199, 181, 227, .38), transparent 60%),
    linear-gradient(180deg, rgba(40, 24, 62, .25), rgba(58, 34, 92, .92) 72%);
  opacity: 0;
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
.sc-card img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), filter .8s ease; }
.sc-card__more {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows .7s cubic-bezier(.16, 1, .3, 1);
}
.sc-card__more-inner {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
}
.sc-card__teaser {
  max-width: 26rem;
  margin-top: .9rem;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(.88rem, 1vw, 1rem);
  line-height: 1.55;
}
.sc-card__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 24rem);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.sc-card__points > span {
  display: grid;
  gap: .3rem;
  padding: .9rem .6rem 0;
  color: rgba(255, 255, 255, .72);
  font-size: .72rem;
  line-height: 1.35;
}
.sc-card__points > span + span { border-left: 1px solid rgba(255, 255, 255, .22); }
.sc-card__points strong { color: #fff; font-size: clamp(1.5rem, 2.2vw, 2.2rem); font-weight: 400; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.sc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: .3rem;
  padding: .75rem 1.2rem;
  border-radius: 999px;
  background: #fff;
  color: var(--sc-purple);
  font-size: .7rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: background-color .3s ease, color .3s ease;
}
.sc-card__cta span { transition: transform .4s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) {
  .sc-intro.is-cards .sc-card a:is(:hover, :focus-visible) .sc-card__screen { opacity: 1; }
  .sc-intro.is-cards .sc-card a:is(:hover, :focus-visible) img { transform: scale(1.07); filter: saturate(.7) brightness(.72); }
  .sc-intro.is-cards .sc-card a:is(:hover, :focus-visible) .sc-card__more { grid-template-rows: 1fr; }
  .sc-intro.is-cards .sc-card a:is(:hover, :focus-visible) .sc-card__more-inner { opacity: 1; transform: none; transition-delay: .08s; }
  .sc-intro.is-cards .sc-card a:hover .sc-card__cta { background: var(--sc-purple); color: #fff; }
  .sc-intro.is-cards .sc-card a:hover .sc-card__cta span { transform: translateY(3px); }
}
/* Touch has no hover: each card keeps just its Read more button. */
@media (hover: none) {
  .sc-card__more { grid-template-rows: 1fr; }
  .sc-card__more-inner { opacity: 1; transform: none; }
  .sc-card__teaser, .sc-card__points { display: none; }
  .sc-card__cta { padding: .5rem .8rem; font-size: .56rem; letter-spacing: .1em; }
}

/* Clickable once the cards have arrived. */
.sc-intro.is-cards .sc-card a { pointer-events: auto; }
.sc-card a { pointer-events: none; }
.sc-intro.is-cards .sc-card a:hover img { transform: scale(1.04); }
.sc-card a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ---- 2 · The charity ---------------------------------------------------- */
.sc-charity { padding: clamp(8rem, 20vh, 14rem) var(--sc-gutter) clamp(6rem, 14vh, 10rem); background: #fff; }
/* The page arrives over the cards as a sheet: it rises with rounded top
   corners, a little narrower than the screen, and widens to full as it
   comes up (--sheet, from scroll), while the cards dim behind it. */
.sc-intro + .sc-charity {
  --sheet: 1;
  isolation: isolate;
  margin-top: -55svh;
  background: transparent;
}
/* Only the white ground changes shape; the content is never clipped. */
.sc-intro + .sc-charity::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: calc((1 - var(--sheet)) * 2.5rem) calc((1 - var(--sheet)) * 2.5rem) 0 0;
  background: #fff;
  box-shadow: 0 -2rem 4rem rgba(17, 12, 22, calc((1 - var(--sheet)) * .45));
  transform: scaleX(calc(1 - (1 - var(--sheet)) * .06));
  transform-origin: 50% 0;
}
.sc-intro__stage { filter: brightness(calc(1 - var(--cover, 0) * .45)); transform: scale(calc(1 - var(--cover, 0) * .04)); transform-origin: 50% 100%; }

/* Lauchie's three numbers. Each counts up and its rule draws with the scroll. */
.sc-stats {
  --p: 0;
  display: grid;
  grid-template-columns: repeat(var(--count, 3), minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin: clamp(5rem, 12vh, 8rem) 0 0;
  padding: 0;
  list-style: none;
}
.sc-stat { position: relative; display: grid; align-content: start; gap: 1.1rem; padding-top: clamp(1.75rem, 4vh, 2.75rem); }
.sc-stat__rule { position: absolute; inset: 0 0 auto; height: 1px; background: var(--sc-rule); overflow: hidden; }
.sc-stat__rule::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sc-purple);
  transform: scaleX(var(--p));
  transform-origin: left;
}
.sc-stat strong {
  color: var(--sc-purple);
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 6.6vw, 7.2rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sc-stat > span:last-child { max-width: 18rem; color: var(--sc-muted); font-size: .95rem; line-height: 1.5; }

/* "What Snow Camp do": its own rounded panel on a lilac ground, inset from
   the page edges, so it reads as a new part sitting on the page rather
   than a band cutting across it. */
.sc-facts {
  --p: 0;
  margin: clamp(7rem, 16vh, 11rem) calc(var(--sc-gutter) * -.5) 0;
  padding: clamp(4rem, 10vh, 6.5rem) calc(var(--sc-gutter) * .5 + clamp(1rem, 2vw, 2rem)) clamp(4rem, 10vh, 6.5rem);
  border-radius: clamp(1.25rem, 2.2vw, 2rem);
  background: #f1edf6;
}
.sc-facts__head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vh, 4rem);
}
.sc-display--sub { grid-column: 1 / span 7; font-size: clamp(2.2rem, 4.2vw, 4.4rem); }
.sc-facts__head p { grid-column: 9 / span 4; margin: 0; color: var(--sc-muted); font-size: 1rem; line-height: 1.6; }

/* A bento grid: two wide cards, then four. */
.sc-facts__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sc-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.sc-fact:nth-child(1), .sc-fact:nth-child(2) { grid-column: span 2; }
.sc-fact {
  --v-p: 0;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto 1fr auto auto auto;
  min-height: clamp(24rem, 54vh, 32rem);
  padding: clamp(1.25rem, 2vw, 1.85rem);
  overflow: hidden;
  border: 1px solid rgba(95, 60, 145, .1);
  border-radius: 8px;
  background: #fff;
  color: var(--sc-ink);
  transition: border-color .5s ease, box-shadow .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1);
}
.sc-fact:hover { border-color: rgba(95, 60, 145, .35); box-shadow: 0 1.5rem 3rem -1.5rem rgba(58, 34, 92, .35); transform: translateY(-4px); }
/* The light that follows the pointer. */
.sc-fact__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(22rem circle at var(--mx, 50%) var(--my, 0%), rgba(95, 60, 145, .12), transparent 65%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}
.sc-fact:hover .sc-fact__glow { opacity: 1; }

/* Dark card (the first) and the photo card. */
.sc-fact--timeline { background: var(--sc-night); border-color: transparent; color: #fff; }
.sc-fact--timeline .sc-fact__glow { background: radial-gradient(26rem circle at var(--mx, 50%) var(--my, 0%), rgba(199, 181, 227, .22), transparent 65%); }
.sc-fact--photo { border-color: transparent; color: #fff; background: var(--sc-night); }
.sc-fact__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.12 - var(--v-p) * .12)); transition: filter .6s ease; }
.sc-fact--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(29, 20, 40, .2), rgba(29, 20, 40, .88) 75%); }
.sc-fact--photo:hover .sc-fact__photo { filter: saturate(.75); }
.sc-fact--photo .sc-fact__photo { object-position: 30% 35%; }

.sc-fact__top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.sc-fact__num { color: #9a93a2; font-size: .85rem; font-variant-numeric: tabular-nums; transition: color .4s ease; }
.sc-fact:hover .sc-fact__num, .sc-fact.is-open .sc-fact__num { color: var(--sc-purple); }
.sc-fact__source { color: #9a93a2; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sc-fact--timeline .sc-fact__num, .sc-fact--photo .sc-fact__num,
.sc-fact--timeline .sc-fact__source, .sc-fact--photo .sc-fact__source { color: rgba(255, 255, 255, .6); }
.sc-fact--timeline:hover .sc-fact__num, .sc-fact--photo:hover .sc-fact__num { color: var(--sc-lilac); }
.sc-fact__title { margin: .7rem 0 0; font-size: clamp(1.25rem, 1.7vw, 1.65rem); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.sc-fact__key { align-self: end; margin-top: 1.5rem; }
.sc-fact__key strong {
  display: block;
  color: var(--sc-purple);
  font-size: clamp(2.6rem, 4.2vw, 4.6rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.sc-fact--timeline .sc-fact__key strong, .sc-fact--photo .sc-fact__key strong { color: #fff; }
.sc-fact__key p { max-width: 24rem; margin: .8rem 0 0; color: #3b3541; font-size: .98rem; line-height: 1.5; }
.sc-fact--timeline .sc-fact__key p, .sc-fact--photo .sc-fact__key p,
.sc-fact--timeline .sc-fact__more p, .sc-fact--photo .sc-fact__more p { color: rgba(255, 255, 255, .78); }
.sc-fact__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.16, 1, .3, 1); }
.sc-fact__more > div { min-height: 0; overflow: hidden; }
.sc-fact.is-open .sc-fact__more { grid-template-rows: 1fr; }
.sc-fact__more p { margin: 1.1rem 0 0; color: var(--sc-muted); font-size: .95rem; line-height: 1.6; }
.sc-fact__toggle {
  position: relative;
  justify-self: start;
  width: 2.6rem;
  height: 2.6rem;
  margin-top: 1.3rem;
  border: 1px solid rgba(95, 60, 145, .2);
  border-radius: 50%;
  background: #fff;
  color: var(--sc-purple);
  cursor: pointer;
  transition: background-color .3s ease, color .3s ease, transform .5s cubic-bezier(.16, 1, .3, 1);
}
.sc-fact:hover .sc-fact__toggle { background: var(--sc-purple); color: #fff; }
.sc-fact.is-open .sc-fact__toggle { background: var(--sc-purple); color: #fff; transform: rotate(45deg); }
.sc-fact__toggle::before, .sc-fact__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .9rem;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.sc-fact__toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.sc-fact__toggle:focus-visible { outline: 2px solid var(--sc-purple); outline-offset: 3px; }

/* ---- The graphics, each drawn by --v-p (the card's own scroll pass) ---- */
.sc-viz { margin: 1.75rem 0 0; }
/* Timeline: a line from the founding year to today, a tick per year. */
.sc-viz--timeline { position: relative; align-self: center; padding: 2.2rem 0 0; }
.sc-viz__line { position: absolute; left: 0; right: 0; top: 2.2rem; height: 1px; background: rgba(255, 255, 255, .16); }
.sc-viz__line::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--sc-lilac), #fff); transform: scaleX(var(--v-p)); transform-origin: left; }
.sc-viz__ticks { position: relative; display: block; height: 1.1rem; margin-top: -.55rem; }
.sc-viz__ticks i {
  position: absolute;
  left: calc(var(--t) * 100%);
  width: 1px;
  height: 100%;
  background: #fff;
  opacity: clamp(.12, calc((var(--v-p) - var(--t)) * 12 + .12), .7);
}
.sc-viz__ticks i:first-child, .sc-viz__ticks i:last-child { width: 7px; height: 7px; margin: calc(.55rem - 3px) 0 0 -3px; border-radius: 50%; opacity: 1; background: var(--sc-lilac); }
.sc-viz__ends { display: flex; justify-content: space-between; margin-top: .9rem; color: rgba(255, 255, 255, .6); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sc-viz__ends b { font-weight: 600; }
.sc-viz__ends b:nth-child(2) { color: var(--sc-lilac); opacity: var(--v-p); }

/* Comparison: two bars against the same 0–100 scale. */
.sc-viz--compare { display: grid; gap: 1.1rem; align-self: center; }
.sc-viz--compare div { display: grid; gap: .5rem; }
.sc-viz--compare dt { color: var(--sc-muted); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.sc-viz--compare dd { position: relative; display: flex; align-items: center; gap: .8rem; height: 2.4rem; margin: 0; border-radius: 4px; background: #f1edf6; }
.sc-viz--compare i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #7a56b0, var(--sc-purple)); width: calc(var(--a) * 1% * var(--v-p)); }
.sc-viz--compare div + div i { background: #cfc6dc; width: calc(var(--b) * 1% * var(--v-p)); }
.sc-viz--compare span { font-size: .9rem; font-weight: 600; font-variant-numeric: tabular-nums; opacity: var(--v-p); }

/* Ring: the key figure as a share of a circle. */
.sc-viz--ring { justify-self: start; width: clamp(7rem, 9vw, 9.5rem); height: auto; transform: rotate(-90deg); }
.sc-ring__track, .sc-ring__fill { fill: none; stroke-width: 9; }
.sc-ring__track { stroke: #efeaf4; }
.sc-ring__fill { stroke: var(--sc-purple); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--v) * var(--v-p)); }

/* Dots: one per person, lighting up in turn. */
.sc-viz--dots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-self: center; }
.sc-viz--dots.is-few { grid-template-columns: repeat(8, 1fr); gap: 8px; }
.sc-viz--dots i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sc-purple);
  opacity: clamp(.12, calc((var(--v-p) - var(--d)) * 14 + .12), 1);
  transform: scale(clamp(.6, calc((var(--v-p) - var(--d)) * 14 + .6), 1));
}

/* ---- 3 · The journey ---------------------------------------------------- */
/* A route, not a chart: the photo frame holds on the left and crossfades to
   each stage (--show-N, set by the script from scroll position); the line on
   the right draws down (--route) and each stop lights as it is reached. */
.sc-journey { --route: 0; padding: clamp(6rem, 14vh, 10rem) var(--sc-gutter) clamp(6rem, 14vh, 10rem); background: #fff; }
.sc-route {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  margin-top: clamp(7rem, 18vh, 12rem);
}
.sc-route__frame {
  grid-column: 1 / span 6;
  position: sticky;
  top: clamp(5.5rem, 12vh, 7.5rem);
  height: calc(100svh - clamp(8rem, 20vh, 12rem));
  overflow: hidden;
  border-radius: 8px;
  background: var(--sc-night);
}
.sc-route__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--show, 0);
  transform: scale(calc(1.08 - var(--show, 0) * .08));
  will-change: opacity, transform;
}
.sc-route__frame img:first-child { --show: 1; }
.sc-route__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 19, 28, 0) 60%, rgba(23, 19, 28, .55));
  pointer-events: none;
}
.sc-route__tag {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 1;
  display: grid;
  color: #fff;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.sc-route__tag span { grid-area: 1 / 1; opacity: var(--show, 0); transform: translate3d(0, calc((1 - var(--show, 0)) * .6rem), 0); }
.sc-route__tag span:first-child { --show: 1; }

.sc-route__steps {
  position: relative;
  grid-column: 8 / span 5;
  margin: 0;
  padding: 0 0 0 clamp(2.5rem, 4vw, 3.5rem);
  list-style: none;
}
.sc-route__line { position: absolute; left: .45rem; top: .6rem; bottom: 40svh; width: 1px; background: var(--sc-rule); }
.sc-route__line::after { content: ""; position: absolute; inset: 0; background: var(--sc-purple); transform: scaleY(var(--route)); transform-origin: top; }
.sc-route__step { position: relative; display: grid; align-content: center; min-height: 82svh; }
.sc-route__step:last-child { min-height: 70svh; }
.sc-route__node {
  position: absolute;
  left: calc(clamp(2.5rem, 4vw, 3.5rem) * -1);
  top: 50%;
  width: .95rem;
  height: .95rem;
  margin-top: -.475rem;
  border: 1px solid var(--sc-purple);
  border-radius: 50%;
  background: #fff;
  transition: background-color .4s ease, box-shadow .4s ease;
}
.sc-route__step.is-reached .sc-route__node { background: var(--sc-purple); box-shadow: 0 0 0 .45rem rgba(95, 60, 145, .14); }
.sc-route__meta { display: flex; align-items: center; gap: .9rem; margin: 0; color: var(--sc-purple); font-size: .7rem; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }
.sc-route__meta span { padding: .3rem .7rem; border: 1px solid currentColor; border-radius: 999px; letter-spacing: .12em; }
.sc-route__step h3 { margin: 1.4rem 0 1.4rem; font-size: clamp(2.4rem, 4.4vw, 4.6rem); font-weight: 400; line-height: 1; letter-spacing: -.045em; }
.sc-route__body { max-width: 28rem; margin: 0; color: var(--sc-muted); font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.65; }
.sc-route__inline { display: none; }

/* ---- 4 · Photo pair ----------------------------------------------------- */
.sc-pair {
  --pair-travel: 120px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding: 0 0 clamp(6rem, 14vh, 11rem);
  background: #fff;
  overflow: clip;
}
.sc-pair__col { min-width: 0; }
.sc-pair__col--trail { padding-top: clamp(4rem, 12vh, 9rem); }
.sc-pair__figure {
  margin: 0;
  height: min(112svh, 64vw);
  overflow: hidden;
  background: #eceaf0;
  transform: translate3d(0, var(--drift, 0px), 0);
  will-change: transform;
}
.sc-pair__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08) translate3d(0, var(--push, 0px), 0);
  will-change: transform;
}
.sc-pair__col--lead img { object-position: 50% 22%; }
.sc-pair__col--trail img { object-position: 50% 30%; }
.sc-pair__caption {
  max-width: 22ch;
  margin: clamp(3rem, 8vh, 6rem) 0 0;
  padding: 0 var(--sc-gutter);
  font-size: clamp(1.5rem, 2.6vw, 2.8rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.035em;
}

/* ---- 5 · The partnership ------------------------------------------------ */
/* One continuous move, all from scroll position:
     the film plays in a small slot between the heading's words,
     grows out of the sentence to fill the screen (--open),
     "TLH × The 3 Valley Rally" slides together over it (--title),
     then the film settles into a panel on the right (--settle) and the
     rally copy arrives beside it on the white page (--side).
   The script works the film's clip out from the slot and the panel's
   measured positions, so the CSS below decides where both sit. */
.sc-rally { --open: 0; --full: 0; --title: 0; --settle: 0; --side: 0; height: 420svh; background: #fff; }
.sc-rally__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #fff; }

.sc-rally__intro {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 var(--sc-gutter);
  text-align: center;
  opacity: calc(1 - var(--open) * 1.6);
}
.sc-rally__intro .sc-display { max-width: none; }
.sc-rally__intro .sc-head__lede { max-width: none; margin-top: clamp(1.25rem, 3vh, 2rem); }
/* The slot the film starts in: a rounded pill set into the line. */
.sc-rally__slot {
  display: inline-block;
  width: 2.1em;
  height: .76em;
  border-radius: .38em;
  vertical-align: -.05em;
}
.sc-rally__panel {
  position: absolute;
  top: 13svh;
  bottom: 13svh;
  left: 46%;
  right: var(--sc-gutter);
  visibility: hidden;
  pointer-events: none;
}

.sc-rally__film {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(var(--ct, 0px) var(--cr, 0px) var(--cb, 0px) var(--cl, 0px) round var(--cround, 0px));
  will-change: clip-path;
}
.sc-rally__film video,
.sc-rally__film img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Set by the script: shrunk to fit the slot at first, so the whole frame
     plays inside the pill, growing to full size as the film opens. */
  transform: var(--vt, none);
  transform-origin: 50% 50%;
}
.sc-rally__film::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(29, 20, 40, .25), rgba(29, 20, 40, .1) 35%, rgba(29, 20, 40, .55)),
    rgba(95, 60, 145, .5);
  mix-blend-mode: multiply;
  opacity: var(--full);
}

/* Over the full-screen film: the title only. */
.sc-rally__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(1rem, 2.5vh, 1.75rem);
  padding: 0 var(--sc-gutter);
  color: #fff;
  text-align: center;
  pointer-events: none;
}
.sc-rally__kicker { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .26em; text-transform: uppercase; opacity: var(--title); }
.sc-rally__title {
  display: grid;
  margin: 0;
  font-size: clamp(2.8rem, 7.4vw, 8rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.05em;
}
/* The two halves travel in from either side and meet in the middle. */
.sc-rally__line { display: block; opacity: calc(var(--title) * 1.4 - .2); }
.sc-rally__line--0 { transform: translate3d(calc((1 - var(--title)) * -38vw), 0, 0); }
.sc-rally__line--1 { transform: translate3d(calc((1 - var(--title)) * 38vw), 0, 0); }

/* Beside the settled film, on white: the rally copy and the button. */
.sc-rally__side {
  position: absolute;
  top: 50%;
  left: var(--sc-gutter);
  z-index: 2;
  width: min(36rem, 36%);
  transform: translate3d(0, -50%, 0);
  pointer-events: none;
}
/* The copy arrives with the settle; the button has its own path. */
.sc-rally__side > :not(.sc-rally__watch) { opacity: var(--side); transform: translate3d(0, calc((1 - var(--side)) * 2.5rem), 0); }
.sc-rally__spot { display: block; width: 1px; height: 3.3rem; margin-top: clamp(.5rem, 2vh, 1.5rem); }
/* One button the whole way: it appears under the title over the full-screen
   film, then travels with the settle to its place under the rally copy
   (--wx/--wy, from the script, run to zero). */
.sc-rally__watch {
  position: relative;
  z-index: 3;
  opacity: var(--watch, 0);
  transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0);
  pointer-events: none;
}
.sc-rally.is-watchable .sc-rally__watch { pointer-events: auto; }
.sc-rally__side h3 { margin: 0 0 1.6rem; font-size: clamp(2rem, 3.6vw, 3.8rem); font-weight: 400; line-height: 1; letter-spacing: -.045em; }
.sc-rally__body { margin: 0 0 1.2rem; color: #2d2733; font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.65; }
.sc-rally__watch {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: .8rem;
  padding: .55rem 1.3rem .55rem .55rem;
  border: 0;
  border-radius: 999px;
  background: var(--sc-purple);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: background-color .3s ease;
}
.sc-rally__watch .sc-film__icon { border-color: rgba(255, 255, 255, .55); }
.sc-rally__watch:hover { background: #4c3074; }
.sc-rally__watch:focus-visible { outline: 2px solid var(--sc-purple); outline-offset: 4px; }

/* Film cards: a still with a quiet play label; the film opens over the page. */
.sc-film {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--sc-night);
  color: #fff;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.sc-film img,
.sc-film video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), opacity .5s ease;
}
.sc-film video { opacity: 0; }
.sc-film.is-looping video { opacity: 1; }
.sc-film::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(23, 19, 28, 0) 55%, rgba(23, 19, 28, .55));
  pointer-events: none;
}
.sc-film--wide { aspect-ratio: 16 / 9; margin-top: clamp(4rem, 10vh, 7rem); }
.sc-film--tall { aspect-ratio: 9 / 16; }
.sc-film:hover img,
.sc-film:hover video,
.sc-film:focus-visible img { transform: scale(1.035); }
.sc-film:focus-visible { outline: 2px solid var(--sc-purple); outline-offset: 4px; }
.sc-film__play {
  position: absolute;
  left: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sc-film__icon {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  transition: background-color .3s ease, border-color .3s ease;
}
.sc-film__icon::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-left: .55rem solid #fff;
  border-top: .35rem solid transparent;
  border-bottom: .35rem solid transparent;
  transform: translate(-50%, -50%);
}
.sc-film:hover .sc-film__icon { background: var(--sc-purple); border-color: var(--sc-purple); }

/* ---- 6 · An Evening at Altitude ---------------------------------------- */
.sc-altitude {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(7rem, 18vh, 13rem) var(--sc-gutter);
  background: var(--sc-night);
  color: #fff;
}
.sc-altitude .sc-label { color: var(--sc-lilac); }
.sc-altitude__head { grid-column: 1 / span 5; align-self: start; position: sticky; top: clamp(6rem, 18vh, 10rem); }
.sc-altitude__meta {
  margin: 1.8rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: var(--sc-lilac);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sc-altitude__intro { max-width: 28rem; margin: 1.3rem 0 0; color: rgba(255, 255, 255, .76); font-size: clamp(1rem, 1.1vw, 1.15rem); line-height: 1.65; }
.sc-altitude__films {
  grid-column: 7 / span 6;
  display: grid;
  grid-template-columns: repeat(var(--count, 2), minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
}
.sc-reel { margin: 0; }
.sc-reel:nth-child(2) { margin-top: clamp(4rem, 14vh, 10rem); }
.sc-reel figcaption {
  display: flex;
  gap: .9rem;
  margin-top: 1rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.sc-reel figcaption span { color: var(--sc-lilac); font-variant-numeric: tabular-nums; }

/* ---- 7 · Photo strip ---------------------------------------------------- */
.sc-strip { padding: clamp(6rem, 14vh, 10rem) 0; background: #fff; overflow: clip; }
.sc-strip__track {
  display: flex;
  gap: clamp(.75rem, 1.4vw, 1.5rem);
  width: max-content;
  margin: 0;
  padding: 0 var(--sc-gutter);
  list-style: none;
  transform: translate3d(var(--shift, 0px), 0, 0);
  will-change: transform;
}
.sc-strip__track li { flex: none; width: clamp(14rem, 24vw, 26rem); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 6px; background: #eceaf0; }
.sc-strip__track li:nth-child(even) { margin-top: clamp(2rem, 6vh, 4.5rem); }
.sc-strip__track img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---- 8 · Support -------------------------------------------------------- */
.sc-support {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(4rem, 10vh, 7rem) var(--sc-gutter) clamp(8rem, 20vh, 14rem);
  background: #fff;
}
.sc-support::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sc-gutter);
  right: var(--sc-gutter);
  border-top: 1px solid var(--sc-rule);
}
.sc-support > .sc-display { grid-column: 1 / span 7; }
.sc-support__body { grid-column: 8 / span 5; align-self: end; max-width: 30rem; }
.sc-support__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin-top: 2.2rem; }
.sc-button {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 3.2rem;
  padding: 0 1.6rem;
  border-radius: 4px;
  background: var(--sc-purple);
  color: #fff;
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .3s ease;
}
.sc-button:hover { background: #4c3074; }
.sc-link {
  color: var(--sc-ink);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: .45em;
  text-decoration-thickness: 1px;
}
.sc-button:focus-visible, .sc-link:focus-visible { outline: 2px solid var(--sc-purple); outline-offset: 4px; }

/* ---- Lightbox ----------------------------------------------------------- */
.sc-lightbox {
  box-sizing: border-box;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: clamp(1rem, 4vw, 3rem);
  border: 0;
  background: rgba(17, 12, 22, .94);
  color: #fff;
}
.sc-lightbox[open] { display: grid; place-items: center; }
.sc-lightbox::backdrop { background: transparent; }
.sc-lightbox__frame { width: min(100%, calc((100svh - 8rem) * 16 / 9)); }
.sc-lightbox.is-tall .sc-lightbox__frame { width: min(100%, calc((100svh - 8rem) * 9 / 16)); }
.sc-lightbox video { display: block; width: 100%; height: auto; max-height: calc(100svh - 8rem); background: #000; }
.sc-lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  padding: .6rem 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.sc-lightbox__close span { margin-left: .4rem; font-size: 1.2rem; letter-spacing: 0; vertical-align: -.1em; }

/* ---- Reveal: a one-off rise as each block first comes into view -------- */
.js-sc [data-sc-reveal] {
  opacity: 0;
  transform: translate3d(0, 2.5rem, 0);
  transition: opacity 1s cubic-bezier(.16, 1, .3, 1), transform 1.2s cubic-bezier(.16, 1, .3, 1), background-color .5s ease, border-color .5s ease;
  transition-delay: calc(var(--i, 0) * 110ms);
}
.js-sc [data-sc-reveal].is-in { opacity: 1; transform: none; }
.js-sc .sc-fact.is-in { transition-delay: 0s; }

/* ---- Tablet ------------------------------------------------------------- */
@media (max-width: 900px) {
  .sc-head, .sc-support, .sc-altitude { grid-template-columns: minmax(0, 1fr); }
  .sc-rally__panel { top: 54svh; bottom: 5svh; left: var(--sc-gutter); }
  .sc-rally__side { top: 8svh; width: auto; right: var(--sc-gutter); transform: translate3d(0, calc((1 - var(--side)) * 2rem), 0); }
  .sc-rally__side h3 { margin-bottom: 1rem; }
  .sc-rally__body { font-size: .92rem; line-height: 1.55; }
  .sc-head .sc-display, .sc-head--wide .sc-display, .sc-head__body,
  .sc-support > .sc-display, .sc-support__body,
  .sc-altitude__head, .sc-altitude__films { grid-column: 1; }
  .sc-head__body, .sc-support__body { margin-top: 2.25rem; }
  .sc-stats { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .sc-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-facts__head { grid-template-columns: minmax(0, 1fr); }
  .sc-display--sub, .sc-facts__head p { grid-column: 1; }
  .sc-facts__head p { margin-top: 1.25rem; max-width: 30rem; }
  .sc-altitude__head { position: static; margin-bottom: 3.5rem; }
  .sc-route { grid-template-columns: minmax(0, 1fr); margin-top: 5rem; }
  .sc-route__frame { display: none; }
  .sc-route__steps { grid-column: 1; }
  .sc-route__step, .sc-route__step:last-child { min-height: 0; padding: 0 0 4.5rem; }
  .sc-route__node { top: .35rem; margin-top: 0; }
  .sc-route__line { bottom: 4.5rem; }
  .sc-route__inline { display: block; width: 100%; aspect-ratio: 4 / 3; margin-top: 2rem; border-radius: 6px; object-fit: cover; }
  .sc-reel:nth-child(2) { margin-top: 3rem; }
}

/* ---- Phone: same motion, refitted ------------------------------------- */
@media (max-width: 600px) {
  .sc-intro { height: 260svh; }
  .sc-cards { inset: 5rem .75rem 2rem; gap: .4rem; }
  .sc-card a { border-radius: 4px; }
  .sc-card__text { padding: 1rem .35rem; gap: .35rem; }
  .sc-card__label { font-size: .5rem; letter-spacing: .16em; }
  .sc-card__title { font-size: .95rem; }
  .sc-facts__grid { grid-template-columns: minmax(0, 1fr); }
  .sc-fact:nth-child(1), .sc-fact:nth-child(2) { grid-column: auto; }
  .sc-fact { min-height: 24rem; }
  .sc-fact__key { margin-top: 2rem; }
  .sc-pair { --pair-travel: 50px; }
  .sc-pair__figure { height: 72vw; }
  .sc-pair__col--lead { display: contents; }
  .sc-pair__col--lead .sc-pair__figure { grid-column: 1; grid-row: 1; }
  .sc-pair__col--trail { grid-column: 2; grid-row: 1; padding-top: 3rem; }
  .sc-pair__caption { grid-column: 1 / -1; grid-row: 2; max-width: 20ch; font-size: 1.5rem; margin-top: 3.5rem; }
  .sc-strip__track li { width: 62vw; }
  .sc-film__play { font-size: .66rem; }
  .sc-film--tall .sc-film__play { gap: .5rem; }
  .sc-film--tall .sc-film__icon { width: 2.1rem; height: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-intro + .sc-charity { margin-top: 0; }
  .sc-rally { height: auto; }
  .sc-rally__stage { position: relative; }
  .sc-intro { height: auto; }
  .sc-intro__stage { position: relative; }
  .sc-pair__figure, .sc-pair__figure img, .sc-strip__track { transform: none !important; }
  .js-sc [data-sc-reveal] { opacity: 1; transform: none; transition: none; }
  .sc-fact__more, .sc-compare i { transition: none; }
}