/*
 * Challenge progress: landing (/progress/), the home page entries (hero status,
 * progress teaser, stage statuses) and the "Progress" menu item.
 *
 * Built on the theme's own patterns and values — vw-scaled rem (1rem = 1px at
 * 1920, 100vw/392 below 479px), #111 sections, IBM Plex Mono labels with a
 * small square, sticky left heading + ruled rows on the right, FAQ-style
 * accordion — so the new blocks read as part of the existing site.
 */

:root {
  --pg-header: 125px;
  --pg-subnav: 60px;
}

/* The solid header backdrop on scroll was declared only in front-page.php;
   other templates need it too, or content shows through the fixed header. */
.header.scrolled {
  background: rgba(17, 17, 17, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Keyboard focus for the new elements and the header */
.pg a:focus-visible,
.pg button:focus-visible,
.pg-dialog a:focus-visible,
.pg-dialog button:focus-visible,
.pg-teaser a:focus-visible,
.hero a:focus-visible,
.header a:focus-visible,
.stages a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- shared pieces ---------- */
.pg-label {
  display: flex;
  align-items: center;
  gap: 16rem;
}
.pg-label img { width: 4rem; height: 4rem; flex: none; }
.pg .label-style-6,
.pg-teaser .label-style-6,
.stage-status .label-style-6 { margin: 0; }

.pg-btn { border: 0; cursor: pointer; text-decoration: none; }
button.button-style-3 { color: #fff; }

.pg-link {
  color: #fff;
  font-family: Manrope, sans-serif;
  font-size: 16rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: #ffffff59;
  text-underline-offset: 4rem;
  transition: text-decoration-color .2s;
}
.pg-link:hover { text-decoration-color: #fff; }

.pg-text {
  margin: 0;
  color: #f4f0eabf;
  font-family: Manrope, sans-serif;
  font-size: 18rem;
  line-height: 155%;
}

/* =====================================================================
   Progress landing
   ===================================================================== */
.pg { background: #111; }

/* ---------- B01 — the home hero composition over a still ---------- */
.pg-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 1080rem;
  padding: 160rem 40rem 40rem;
  overflow: hidden;
  background: #111;
}
.pg-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The home hero's top/bottom fades, plus a left shade under the text. */
.pg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, #111 0, #11111100 320rem),
    linear-gradient(to top, #111 0, #11111100 320rem),
    linear-gradient(90deg, #111111b3 0, #11111100 900rem);
}
.pg-hero__inner {
  position: relative;
  z-index: 2;
}
.pg-hero__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 650rem;
}
.pg-hero .hero-status { margin-bottom: 8rem; }
.pg-hero__desc {
  max-width: 520rem;
  margin: 40rem 0 0;
  color: #c3c3c3;
  font-family: Manrope, sans-serif;
  font-size: 18rem;
  letter-spacing: -.01em;
  line-height: 155%;
}
.pg-hero__buttons { flex-wrap: wrap; margin-top: 40rem; }
.pg-hero__buttons .button-style-3 { display: flex; }
.pg-hero .pg-figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32rem;
  max-width: 650rem;
  margin-top: 96rem;
}
.pg-hero .pg-figure,
.pg-hero .pg-figure:first-child {
  flex-direction: column;
  align-items: flex-start;
  gap: 16rem;
  padding-top: 24rem;
  border-top: 1rem solid #ffffff26;
}
.pg-hero .pg-figure .text-7 { font-size: 14rem; text-align: left; }
.pg-hero__card {
  position: absolute;
  right: 0;
  bottom: 0;
}
.pg-hero__card .untitled-13 { font-size: 24rem; }
.pg-hero__caption {
  position: relative;
  z-index: 2;
  margin-top: 24rem;
}

/* Glass card of the Problem band (.problem-card), without its absolute spots */
.pg-glass {
  display: flex;
  flex-direction: column;
  gap: 48rem;
  width: 445rem;
  padding: 32rem;
  border: 1rem solid #ffffff1a;
  border-radius: 16rem;
  background-color: #ffffff08;
  -webkit-backdrop-filter: blur(20rem);
  backdrop-filter: blur(20rem);
  overflow: hidden;
}
.pg-glass p { margin: 0; }
.pg-glass .body-style-6 { gap: 12rem; }

/* Key figures — the home hero's metric style (square, serif number, mono caps) */
.pg-figures {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  width: 100%;
  max-width: 600rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-figure {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12rem;
  padding-top: 32rem;
  border-top: 1rem solid #ffffff26;
}
.pg-figure:first-child { padding-top: 0; border-top: 0; }
.pg-figure__num {
  display: flex;
  align-items: center;
  gap: 24rem;
}
.pg-figure__num img { width: 6rem; height: 6rem; }
.pg-figure .text-6 { margin: 0; }
.pg-figure .text-7 { margin: 0; }

/* ---------- in-page navigation: the header menu, pinned ---------- */
.pg-subnav-sentinel { height: 0; }
.pg-subnav {
  position: sticky;
  top: var(--pg-header);
  z-index: 9;
  padding: 0 40rem;
  border-bottom: 1rem solid #ffffff26;
  background: #111;
  transition: background .2s;
}
.pg-subnav.is-pinned {
  background: rgba(17, 17, 17, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.pg-subnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 46rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-subnav__link {
  display: inline-flex;
  align-items: center;
  min-height: 64rem;
  color: #ffffffbf;
  font-family: Manrope, sans-serif;
  font-size: 16rem;
  font-weight: 500;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: color .2s;
}
.pg-subnav__link:hover,
.pg-subnav__link[aria-current] { color: #fff; }
.pg-subnav__link[aria-current] {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* ---------- sections: sticky heading left, content right ---------- */
.pg-sec {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20rem;
  width: 100%;
  padding: 120rem 40rem 80rem;
  background: #111;
  scroll-margin-top: calc(var(--pg-header) + var(--pg-subnav));
}
.pg-sec__head {
  position: sticky;
  top: calc(var(--pg-header) + var(--pg-subnav) + 24rem);
  display: flex;
  flex-direction: column;
  gap: 48rem;
  width: 100%;
  max-width: 600rem;
  padding-top: 56rem;
  border-top: 1rem solid #ffffff26;
}
.pg-teaser .pg-sec__head { top: 120rem; }
.pg-sec__head-body {
  display: flex;
  flex-direction: column;
  gap: 32rem;
  max-width: 510rem;
}
.pg-sec .text-17,
.pg-sec .text-18 { margin: 0; }
.pg-sec__note { max-width: 380rem; }
.pg-sec__buttons { display: flex; flex-wrap: wrap; gap: 8rem; }
.pg-sec__body,
.pg-rows,
.pg-teams,
.pg-media,
.pg-reels {
  width: 100%;
  max-width: 1220rem;
}
.pg-team,
#top { scroll-margin-top: calc(var(--pg-header) + var(--pg-subnav) + 16px); }

/* ---------- B02 — the Phases list, rows stack while scrolling ---------- */
.pg-stages {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1220rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* footer.php makes every .stage sticky at 120rem + i·30rem; here the pinned
   in-page nav sits under the header, so the stack starts below it. */
.pg-stage { top: calc(var(--pg-header) + var(--pg-subnav) + var(--i, 0) * 30rem) !important; }
.pg-stage .stage-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8rem 24rem;
  margin: 0;
}
.pg-stage .untitled-2,
.pg-stage .untitled-5 { margin: 0; }
.pg-stage--planned .untitled-2 { color: #f4f0eabf; }
.pg-status::before { content: '✓  '; }
.pg-status--planned::before,
.stage-status .pg-status--planned::before { content: '○  '; }

/* ---------- B03 — the Benefits grid ---------- */
.pg-work {
  width: 100%;
  max-width: 1220rem;
  margin: 0;
  padding-left: 0;
  list-style: none;
}
.pg-work__item {
  display: flex;
  align-items: center;
  gap: 48rem;
  width: 100%;
  max-width: 600rem;
}
.pg-work__item .icon-wrap { flex: none; }
.pg-work__item .untitled-7,
.pg-work__item .proof-of-concept { margin: 0; }

/* ---------- B03/B05 — the Problem band: footage or still, glass cards ---------- */
.pg-band {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 96rem;
  min-height: 860rem;
  padding: 120rem 40rem 80rem;
  overflow: hidden;
  background: #111;
  scroll-margin-top: calc(var(--pg-header) + var(--pg-subnav));
}
.pg-band .section-video-bg,
.pg-band__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pg-band::before,
.pg-band::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 320rem;
  z-index: 1;
  pointer-events: none;
}
.pg-band::before { top: 0; background: linear-gradient(to bottom, #111 0%, #11111100 100%); }
.pg-band::after { bottom: 0; background: linear-gradient(to top, #111 0%, #11111100 100%); }
.pg-band__heading {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 40rem;
  width: 600rem;
  padding-top: 56rem;
  border-top: 1rem solid #ffffff26;
}
.pg-band__cards {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 20rem;
}
/* Scattered like the home Problem cards, not a tidy row. */
.pg-band--site { min-height: 720rem; }
.pg-band--review .pg-band__card:first-child { margin-bottom: 200rem; }
.pg-band--review .pg-band__cards { padding-right: 155rem; }
.pg-band .untitled-5 { margin: 0; }
.pg-band .pg-reel__body .untitled-2 { color: #fff; }

/* ---------- vertical reels in the Kick-Off player frame ---------- */
.pg-reels {
  display: flex;
  flex-wrap: wrap;
  gap: 40rem 64rem;
  width: 100%;
  max-width: 1220rem;
}
.pg-reel {
  display: flex;
  flex-direction: column;
  gap: 24rem;
  width: clamp(280px, 340rem, 340px);
  max-width: 100%;
  flex: none;
}
.pg-reel__poster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  border: 0;
  border-radius: 16rem;
  background: #ffffff08;
  overflow: hidden;
  cursor: pointer;
}
.pg-reel__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pg-reel__play { position: relative; z-index: 1; display: flex; }
.pg-reel__play img { width: 80rem; height: 80rem; }
.pg-reel__body {
  display: flex;
  flex-direction: column;
  gap: 12rem;
}
.pg-reel__body .untitled-2,
.pg-reel__body .untitled-5 { margin: 0; }
.pg-reel .untitled-2 { font-size: 24rem; }
.pg-reel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12rem 24rem;
  margin-top: 12rem;
}

/* ---------- B04 finalists — the FAQ accordion ---------- */
.pg-teams { width: 100%; max-width: 1220rem; border-top: 3rem solid #fff; }
.pg-team { border-bottom: 1rem solid #ffffff26; }
.pg-team__row {
  display: grid;
  grid-template-columns: 30rem 150rem minmax(0, 1fr) auto;
  gap: 0 48rem;
  align-items: start;
  padding: 48rem 0;
  cursor: pointer;
}
.pg-team__row .label-style-7 { margin-top: 10rem; }
.pg-team__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84rem;
  padding: 10rem 14rem;
  border-radius: 12rem;
  background: #fff;
}
.pg-team__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.pg-team__main {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  min-width: 0;
}
.pg-team__main .untitled-2 { overflow-wrap: anywhere; }
.pg-team__main p { margin: 0; }
.pg-team__summary { max-width: 720rem; margin-top: 4rem !important; }
.pg-team__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.pg-team__toggle img { width: 32rem; height: 32rem; transition: transform .3s ease; }
.pg-team.is-open .pg-team__toggle img { transform: rotate(180deg); }
.pg-team__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 64rem;
  padding: 0 0 56rem 276rem;
}
.pg-team__panel[hidden] { display: none; }
.pg-team__col {
  display: flex;
  flex-direction: column;
  gap: 16rem;
}
.pg-team__col p,
.pg-team__col ul { margin: 0; }
.pg-team__col .label-style-6 + .text-7-ma { margin-top: -4rem; }
.pg-team__col .text-7-ma + .label-style-6 { margin-top: 16rem; }
.pg-list { padding-left: 1.1em; }
.pg-facts {
  display: flex;
  flex-direction: column;
  gap: 18rem;
  margin: 0;
}
.pg-facts dd { margin: 4rem 0 0; }
.pg-photos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pg-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: 8rem;
  overflow: hidden;
  background: #ffffff05;
  cursor: zoom-in;
}
.pg-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- B07 media — ruled list like Criteria ---------- */
.pg-articles {
  width: 100%;
  max-width: 1220rem;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 3rem solid #fff;
}
.pg-article {
  position: relative;
  display: grid;
  grid-template-columns: 276rem minmax(0, 1fr) auto;
  gap: 0 48rem;
  align-items: start;
  padding: 48rem 0;
  border-bottom: 1rem solid #ffffff26;
}
.pg-article__meta { padding-top: 10rem; }
.pg-article__body {
  display: flex;
  flex-direction: column;
  gap: 12rem;
  max-width: 640rem;
}
.pg-article__body p { margin: 0; }
.pg-article .untitled-2 a { color: inherit; text-decoration: none; }
/* The title link covers the row. */
.pg-article .untitled-2 a::after { content: ''; position: absolute; inset: 0; }
.pg-article .untitled-2 a:focus-visible { outline: none; }
.pg-article:has(a:focus-visible) { outline: 2px solid #fff; outline-offset: 3px; }
.pg-article__arrow { display: flex; padding-top: 6rem; }
.pg-article__arrow img { width: 32rem; height: 32rem; transform: rotate(-90deg); transition: transform .3s ease; }
.pg-article:hover .pg-article__arrow img { transform: rotate(-135deg); }
.pg-article:hover .untitled-2 { text-decoration: underline; text-decoration-color: #ffffff59; text-underline-offset: 6rem; }

/* ---------- B08 — closing band ---------- */
.pg-next {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 120rem;
  padding: 160rem 40rem 40rem;
  overflow: hidden;
  background: #111;
  scroll-margin-top: calc(var(--pg-header) + var(--pg-subnav));
}
.pg-next::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 320rem;
  z-index: 1;
  background: linear-gradient(to bottom, #111 0%, #11111100 100%);
  pointer-events: none;
}
.pg-next > *:not(.pg-band__bg) { position: relative; z-index: 2; }
.pg-next__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40rem;
  max-width: 600rem;
  padding-top: 56rem;
  border-top: 1rem solid #ffffff26;
}
.pg-next__title { width: auto; }
.pg-next__top .text-18 { max-width: 460rem; }
.pg-next__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20rem;
  margin: 0;
  padding: 56rem 0 0;
  list-style: none;
  border-top: 3rem solid #fff;
}
.pg-next__step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rem;
  max-width: 440rem;
}
.pg-next__step .metric-hero { margin-bottom: 24rem; }
.pg-next__step .untitled-7,
.pg-next__step .proof-of-concept { margin: 0; }
.pg-endlinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16rem 32rem;
  padding-top: 32rem;
  border-top: 1rem solid #ffffff26;
}
.pg-endlinks .pg-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- dialogs (popup styling of the site) ---------- */
.pg-dialog {
  width: min(92vw, 520px);
  max-height: 90dvh;
  padding: 0;
  border: 1px solid #ffffff1a;
  border-radius: 16px;
  background: #111;
  color: #fff;
  overflow: auto;
  overscroll-behavior: contain;
}
.pg-dialog::backdrop { background: rgba(0, 0, 0, .8); }
.pg-dialog__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 12px 12px 20px;
  background: #111;
  border-bottom: 1px solid #ffffff26;
}
.pg-dialog__title {
  margin: 0;
  font-family: Manrope, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 130%;
}
.pg-dialog__close {
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 40px;
  background: #ffffff1a;
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.pg-dialog__close:hover { background: #ffffff26; }
.pg-dialog__stage { padding: 16px; }
.pg-dialog__stage video {
  display: block;
  width: 100%;
  max-height: 72dvh;
  aspect-ratio: 9 / 16;
  object-fit: contain;
  background: #000;
  border-radius: 12px;
}
/* A social post's own frame is taller than the video (author, caption,
   buttons) — give it room instead of cropping it to 9:16. */
.pg-dialog__stage iframe {
  display: block;
  width: 100%;
  min-height: 75dvh;
  border: 0;
  border-radius: 12px;
  background: #fff;
}
.pg-dialog__status,
.pg-dialog__help {
  margin: 0;
  padding: 0 20px 16px;
  color: #ffffffbf;
  font-family: Manrope, sans-serif;
  font-size: 15px;
  line-height: 150%;
}
.pg-dialog__status:empty { display: none; }
.pg-dialog--gallery { width: min(94vw, 1200px); }
.pg-gallery__figure { margin: 0; padding: 16px; }
.pg-gallery__figure img {
  display: block;
  max-width: 100%;
  max-height: 72dvh;
  margin: 0 auto;
  object-fit: contain;
}
.pg-gallery__caption {
  margin-top: 12px;
  color: #f4f0eabf;
  font-family: Manrope, sans-serif;
  font-size: 15px;
  text-align: center;
}
.pg-gallery__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 0 16px 16px;
}
.pg-gallery__btn {
  width: 48px;
  height: 48px;
  border: 1px solid #ffffff33;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}
.pg-gallery__btn[hidden] { display: none; }
.pg-gallery__count {
  min-width: 120px;
  color: #ffffff99;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-align: center;
}

/* =====================================================================
   Home page entries
   ===================================================================== */
.untitled.is-progress[aria-current="page"],
.untitled-6.is-progress[aria-current="page"] {
  text-decoration: underline !important;
  text-underline-offset: 6px;
}

/* Hero status in the site's label style. The second hero button is shown
   again (it was hidden while it led to the closed form). */
.hero-status {
  display: inline-flex;
  align-items: center;
  gap: 16rem;
  margin: 0;
  color: #ffffffbf;
  font-family: 'IBM Plex Mono', sans-serif;
  font-size: 14rem;
  letter-spacing: .03em;
  line-height: 130%;
  text-transform: uppercase;
}
.hero-status img { width: 6rem; height: 6rem; }
/* Home: the status sits over the bottom-left description, like a section label. */
.text-5 .hero-status { gap: 16rem; margin-bottom: 20rem; color: #fff9; }
.text-5 .hero-status img { width: 4rem; height: 4rem; }
.frame-24 .buttons { flex-wrap: wrap; }
.frame-24 .button-style-3 { display: flex; }

/* Progress teaser right after the hero */
.pg-teaser { padding: 200rem 40rem 160rem; }
.pg-teaser .pg-figures--rows {
  max-width: 600rem;
  padding-top: 56rem;
  border-top: 1rem solid #ffffff26;
}
.pg-teaser .pg-figures--rows .pg-figure:first-child { padding-top: 0; border-top: 0; }

/* Existing "Phases" list: manual status per stage + link to the timeline */
.stage-status { margin: 0; }
.stages-progress-link { display: inline-flex; align-items: center; min-height: 44px; }

/* =====================================================================
   Phones (the theme's single breakpoint)
   ===================================================================== */
@media screen and (max-width: 479px) {
  .pg-hero {
    min-height: 0;
    padding: 120rem 16rem 48rem;
  }
  .pg-hero::before {
    background:
      linear-gradient(to bottom, #111 0, #11111100 160rem),
      linear-gradient(180deg, #11111166 0%, #111111cc 55%, #111 100%);
  }
  .pg-hero__main { max-width: none; }
  .pg-hero .text-4 { font-size: 44rem; }
  .pg-hero .hero-status { font-size: 11rem; gap: 10rem; }
  .pg-hero__card { position: static; width: 100%; gap: 24rem; padding: 20rem; margin-top: 32rem; }
  .pg-hero__card .untitled-13 { font-size: 17rem; line-height: 135%; }
  .pg-hero__desc { margin-top: 24rem; font-size: 15rem; }
  .pg-hero__buttons { flex-direction: column; align-items: stretch; gap: 8rem; width: 100%; margin-top: 32rem; }
  .pg-hero__buttons a { min-height: 44px; justify-content: center; }
  .pg-hero .pg-figures { gap: 12rem; margin-top: 40rem; max-width: none; }
  .pg-hero .pg-figure,
  .pg-hero .pg-figure:first-child { gap: 10rem; padding-top: 16rem; }
  .pg-hero .metric-hero { grid-column-gap: 10rem; }
  .pg-hero .pg-figure .text-7 { font-size: 10rem; letter-spacing: .02em; }

  .pg-subnav { padding: 2rem 16rem; }
  .pg-subnav ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8rem; }
  .pg-subnav__link { justify-content: center; min-height: 34px; font-size: 13rem; text-align: center; }

  .pg-sec { flex-direction: column; gap: 40rem; padding: 72rem 16rem; }
  .pg-sec__head { position: static; max-width: none; gap: 32rem; padding-top: 32rem; }
  .pg-sec__head-body { gap: 24rem; }

  .pg-stages { padding-bottom: 0; }
  .pg-stage { top: calc(var(--pg-header) + var(--pg-subnav) + var(--i, 0) * 16rem) !important; }

  .pg-work__item { gap: 32rem; align-items: flex-start; }

  .pg-band { min-height: 0; gap: 40rem; padding: 96rem 16rem 72rem; }
  .pg-band__heading { width: 100%; gap: 24rem; padding-top: 32rem; }
  .pg-band__cards { flex-direction: column; align-items: stretch; padding-right: 0 !important; gap: 16rem; }
  .pg-band--review .pg-band__card:first-child { margin-bottom: 0; }
  .pg-glass { width: 100%; gap: 32rem; padding: 24rem; }
  .pg-band .untitled-5 { font-size: 13rem; }
  .pg-reel { width: min(100%, 320px); }
  .pg-reels { gap: 48rem; }

  .pg-team__row { grid-template-columns: 24rem 88rem minmax(0, 1fr) auto; gap: 16rem 14rem; padding: 28rem 0; }
  .pg-team__row .label-style-7 { margin-top: 0; }
  .pg-team__logo { height: 56rem; padding: 6rem 8rem; border-radius: 8rem; }
  .pg-team__main { grid-column: 2 / -1; grid-row: 2; }
  .pg-team__toggle { grid-column: 4; grid-row: 1; }
  .pg-team__panel { grid-template-columns: minmax(0, 1fr); gap: 28rem; padding: 0 0 32rem; }

  .pg-article { grid-template-columns: minmax(0, 1fr); gap: 12rem; padding: 28rem 0; }
  .pg-article__meta { padding-top: 0; }
  .pg-article__arrow { display: none; }

  .pg-next { min-height: 0; gap: 72rem; padding: 96rem 16rem 32rem; }
  .pg-next__top { gap: 24rem; padding-top: 32rem; }
  .pg-next__buttons { flex-direction: column; align-items: stretch; gap: 8rem; width: 100%; }
  .pg-next__buttons a { min-height: 44px; justify-content: center; }
  .pg-next__steps { grid-template-columns: minmax(0, 1fr); gap: 32rem; padding-top: 32rem; }
  .pg-next__step .metric-hero { margin-bottom: 8rem; }

  .hero-status { font-size: 11rem; gap: 10rem; }
  .frame-24 .buttons a { min-height: 44px; }
  .pg-teaser { padding: 72rem 16rem; }
  .pg-teaser .pg-figures--rows { max-width: none; padding-top: 32rem; }

  /* The footer socials had no grid area on phones and landed in an implicit
     third column past the screen edge; pin them to the right of the menu row. */
  .footer .frame-35 { grid-area: 2 / 1 / 3 / 4; justify-self: end; width: auto; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pg *, .pg-teaser * { transition: none !important; }
}