/* Scroll version — image-scroll layout (pinned 3 columns, cards wipe up),
   one text colour (Myton navy) on off-white. */

:root {
  --green: #182342;   /* Myton navy — the only text colour (var name kept) */
  --beige: #FFFFFF;   /* white background (var name kept) */
  --blue: #169CD8;    /* Watch story pill (white text, 5.6:1) — matches scroll.css */
  --white: #ffffff;

  --font-sans: "azo-sans-web", system-ui, sans-serif;
  --pad: 40px;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--beige);
  color: var(--green);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}


/* ---------- Section intro (inside the pinned frame) ----------
   The heading and a small window of the first photo sit centred together.
   On scroll the heading scrolls away while the window glides to the centre of
   the screen, then opens out to fill the frame (positions set by scroll-image.js). */
.isc-intro {
  position: absolute;
  top: 0; /* set by scroll-image.js so heading + window are centred together */
  left: 0;
  right: 0;
  z-index: 0; /* under the photo */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 var(--pad);
  color: var(--green);
  pointer-events: none;
}
.isc-intro__eyebrow {
  margin: 0 0 16px;
  font-size: 16px;
}
.isc-intro__heading {
  margin: 0;
  max-width: 14em;
  font-size: clamp(40px, 5.2vw, 88px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -.03em;
}

/* ---------- Block ---------- */
.isc { position: relative; } /* height set by scroll.js */

.isc__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--beige); /* around the small photo window at the start */
  color: var(--white); /* all UI in the block is white over the photos */
}

/* ---------- Background photos ----------
   Same wipe as the cards: each slides up from 100% while its inner layer
   counter-slides, so the edge sweeps bottom → top over the previous photo.
   --reveal / --cover come from scroll-image.js. */
/* own stacking context, so the overlay stays under the UI */
.isc__bgs {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #121A33; /* behind the photos while they load */
  /* clip-path (the window) is set by scroll-image.js */
}
.bgimg {
  --reveal: 0;
  --cover: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateY(calc((1 - var(--reveal)) * 100%));
}
.bgimg__inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateY(calc((var(--reveal) - 1) * 100%));
}
.bgimg__media {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat;
  transform: translateY(calc((1 - var(--reveal)) * 9% - var(--cover) * 9%)) scale(1.2);
}
/* overlay: darker at the sides where the text sits, plus an overall tint */
.isc__bgs::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  opacity: clamp(0, (var(--x, 1) - .35) / .5, 1); /* none on the small window, fades in as it fills */
  background:
    linear-gradient(90deg, rgba(18, 26, 51, .72) 0%, rgba(18, 26, 51, .28) 50%, rgba(18, 26, 51, .72) 100%),
    linear-gradient(rgba(18, 26, 51, .22), rgba(18, 26, 51, .22));
}
.isc__grid { z-index: 1; }

.isc__grid {
  --pad-y: 280px; /* vertical room the card leaves: keeps it 24px+ below the 80px nav logo */
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr minmax(350px, 1fr) 1fr;
  column-gap: clamp(32px, 5vw, 96px);
  align-items: center;
  padding: 0 var(--pad);
}

/* stack children on top of each other in one cell, so the block sizes to the tallest */
.layers { display: grid; }
.layers > * { grid-area: 1 / 1; }

/* ---------- Left ---------- */
.isc__intro {
  justify-self: start; /* hugs the left edge (page padding) */
  width: 100%;
  max-width: 26em;
}
.isc__heading {
  margin: 0;
  font-size: clamp(36px, 4.2vw, 68px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -.025em;
}
/* stat: big figure with its label underneath */
.isc__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(10px, 1vw, 16px);
  margin: clamp(32px, 3.5vw, 56px) 0 0;
}
.isc__stat-num {
  flex: none;
  font-size: clamp(38px, 3.6vw, 62px);
  line-height: .82;
  font-weight: 400;
  font-variant-numeric: tabular-nums; /* digits don't jiggle while counting */
  letter-spacing: -.035em;
}
.isc__stat-label {
  white-space: nowrap; /* keep the supporting line on one line */
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.25;
  color: rgba(255, 255, 255, .85);
}
.isc__head .line {
  display: block;
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

/* ---------- Right ---------- */
.isc__aside {
  justify-self: end;   /* mirrors the heading: same distance from the right edge */
  width: 100%;
  max-width: 26em;
}
.isc__quote { margin: 0; }
.quote-mark {
  display: block;
  height: 16px;
  aspect-ratio: 55.76 / 36.88;
  margin-bottom: 20px;
  background: currentColor;
  -webkit-mask: url("assets/quote.svg") center / contain no-repeat;
          mask: url("assets/quote.svg") center / contain no-repeat;
}
.isc__quote blockquote {
  margin: 0;
  font-size: clamp(20px, 1.8vw, 30px);
  line-height: 1.3;
  letter-spacing: -.015em;
}
.isc__cite {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 28px 0 0;
}
.name { font-weight: 700; font-size: 17px; }
.role { font-size: 15px; }

/* ---------- Centre: cards ---------- */
.isc__media { justify-self: center; width: 100%; }
.cards {
  position: relative;
  margin: 0 auto;
  width: min(100%, calc((100svh - var(--pad-y)) * 350 / 530));
  aspect-ratio: 350 / 530;
  overflow: hidden;
  /* grows into place as the block scrolls up (--grow 0→1 from scroll.js) */
  clip-path: inset(calc((1 - var(--grow, 1)) * 16%) calc((1 - var(--grow, 1)) * 22%));
  opacity: clamp(0, var(--grow, 1) * 3, 1);
  background: rgba(255, 255, 255, .08);
}

/* Each card is revealed bottom → top: the card slides up from 100% while its
   inner layer counter-slides, so the picture stays put and the edge wipes over it.
   --reveal (0→1) and --cover (0→1, the next card arriving) come from scroll.js */
.card {
  --reveal: 0;
  --cover: 0;
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateY(calc((1 - var(--reveal)) * 100%));
}
.card__inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateY(calc((var(--reveal) - 1) * 100%));
}
.card__media {
  position: absolute;
  inset: 0;
  transform: translateY(calc((1 - var(--reveal)) * 9% - var(--cover) * 9%)) scale(calc(1.2 + (1 - var(--grow, 1)) * .15));
}
.card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.card.is-playing .card__media { transform: none; } /* full frame when watching */

/* bottom gradient for the Watch story label */
.card__inner::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
  pointer-events: none;
  transition: opacity .3s;
}

/* ---------- Watch story pill (centred over the video) ---------- */
.stat {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
  transition: opacity .3s;
}
/* Watch story: the blue pill in the middle of the video */
.stat__pill {
  grid-area: 1 / 1;
  display: inline-flex;
  padding: .7em 1.15em;
  border: 0;
  border-radius: 999px;
  background: var(--blue);
  color: var(--white);
  font: 700 clamp(13px, 1vw, 16px)/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto; /* the overlay around it ignores the pointer */
  /* scale, opacity and the circle → pill clip are driven by scroll.js */
  transition: scale .25s var(--ease);
}
.stat__pill-label { display: inline-flex; align-items: center; gap: 8px; }
.stat__pill svg { width: .8em; height: .8em; fill: currentColor; flex: none; }
.stat__pill:hover, .stat__pill:focus-visible { scale: 1.06; }
.stat__pill:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.card.is-playing .stat,
.card.is-playing .card__inner::after { opacity: 0; pointer-events: none; }
.card.is-playing .stat__pill { pointer-events: none; }

/* ---------- Controls ---------- */
.isc__controls {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  justify-content: space-between; /* counter bottom-left, pause bottom-right */
  pointer-events: none;
  z-index: 10; /* above every card */
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  transition: opacity .3s;
}
.isc__count {
  font-size: 13px;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}
.isc__count [data-count] { font-weight: 700; }
.isc__motion {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5);
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: border-color .2s;
}
.isc__motion:hover { border-color: var(--white); }
.isc__motion:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.isc__motion svg { width: 14px; height: 14px; fill: currentColor; }
/* out of the way of the native controls while a story plays with sound */
.isc__controls { opacity: clamp(0, var(--grow, 1) * 3 - 2, 1); } /* once the container has grown */
.isc.is-watching .isc__controls { opacity: 0; pointer-events: none; }
.isc__motion .when-paused,
.isc__motion[aria-pressed="true"] .when-playing { display: none; }
.isc__motion[aria-pressed="true"] .when-paused { display: block; }


/* ---------- Text in / out (scroll-scrubbed) ----------
   scroll.js sets --in (0→1) and --out (0→1) on each heading / quote; --i staggers lines */
.isc__head, .isc__quote { --in: 0; --out: 0; }
.isc__head .line > span {
  display: block;
  transform: translateY(calc(
    (1 - clamp(0, var(--in) * 1.4 - var(--i) * .2, 1)) * 110%
    - clamp(0, var(--out) * 1.4 - var(--i) * .2, 1) * 110%));
}
.isc__quote .rise, .isc__head .rise {
  opacity: calc(clamp(0, var(--in) * 1.4 - var(--i) * .2, 1) - clamp(0, var(--out) * 1.4 - var(--i) * .2, 1));
  transform: translateY(calc(
    (1 - clamp(0, var(--in) * 1.4 - var(--i) * .2, 1)) * 32px
    - clamp(0, var(--out) * 1.4 - var(--i) * .2, 1) * 32px));
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  :root { --pad: 20px; }
  .isc__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: 20px;
    align-items: stretch;
    padding: 76px var(--pad) 84px; /* room for the demo nav and the controls */
  }
  .isc__intro, .isc__aside { max-width: none; }
    .isc__heading { font-size: 34px; }
  .isc__stat { margin-top: 16px; }
  .isc__stat-num { font-size: 32px; }
  .isc__stat-label { font-size: 14px; }
  .isc__media { display: flex; justify-content: center; min-height: 0; }
  .cards { width: auto; height: 100%; max-width: 100%; }
  .quote-mark { display: none; }
  .isc__quote blockquote { font-size: 17px; max-width: none; }
  .isc__cite { margin-top: 12px; }
  .name { font-size: 15px; }
  .role { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
}

/* ---------- Team link under each quote (site build) ---------- */
.isc__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: .85em 1.3em;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .6);
  color: var(--white);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: background-color .2s, color .2s, border-color .2s;
}
.isc__link span { transition: transform .2s var(--ease); }
.isc__link:hover { background: var(--white); border-color: var(--white); color: var(--green); }
.isc__link:hover span { transform: translateX(3px); }
.isc__link:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
@media (max-width: 960px) {
  .isc__link { margin-top: 14px; font-size: 14px; }
}