/* Project Page Styles */

.project-page-root {
  background-color: #F8F7F7;
}

.project-page-main {
  padding-top: 220px;
}

/* ============================================
   HERO SECTION
   ============================================ */

.project-hero-wrap {
  padding: 0 var(--grid-margin, 24px);
  margin-bottom: 64px;
}

.project-hero {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0;
  --project-hero-title-color: #F8F7F7;
  --project-hero-desc-color: #F8F7F7;
  --project-hero-pill-bg: #E1E1E1;
  --project-hero-pill-text: #0F1513;
  border-radius: 38px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.project-hero.is-light-bg {
  --project-hero-title-color: #0F1513;
  --project-hero-desc-color: #0F1513;
  --project-hero-pill-bg: #0F1513;
  --project-hero-pill-text: #F8F7F7;
}


.project-hero-media {
  position: absolute;
  inset: 0;
}

.project-hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project-hero-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 21, 19, 0.5);
  pointer-events: none;
}

.project-hero-content {
  position: absolute;
  inset: 0;
  padding: 32px 64px 96px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  will-change: transform;
}

.project-hero-title {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-size: 96px;
  line-height: 1.1;
  color: var(--project-hero-title-color);
  margin: 0;
}

.project-hero-pill {
  margin-top: 90px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  width: fit-content;
  background-color: var(--project-hero-pill-bg);
  color: var(--project-hero-pill-text);
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 16px;
  font-weight: 400;
  border-radius: 999px;
  white-space: nowrap;
}

.project-hero-desc {
  margin-top: 32px;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.2;
  color: var(--project-hero-desc-color);
  margin-bottom: 0;
  max-width: 65ch;
}

/* ============================================
   BODY SECTIONS
   ============================================ */

.project-body {
  padding: 64px var(--grid-margin, 24px) 128px;
}

.project-up-next-wrap {
  margin: 0 var(--grid-margin, 24px) 32px;
}

.project-up-next-inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--grid-gutter, 24px);
}

.project-up-next-btn {
  grid-column: 10 / span 3;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 84px;
  padding: 4px;
  border-radius: 999px;
  text-decoration: none;
  color: #0F1513;
  --up-next-fg: #0F1513;
  --up-next-border-color: #0F1513;
  --up-next-chip-bg: #F8F7F7;
  --up-next-chip-line: #CF5541;
  background-color: #DFA39A;
  background-image: var(--up-next-bg-image, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 0;
  overflow: hidden;
  --up-next-progress: 0;
}

.project-up-next-btn.is-dark-theme {
  color: #F8F7F7;
  --up-next-fg: #F8F7F7;
  --up-next-border-color: #F8F7F7;
  --up-next-chip-bg: #0F1513;
  --up-next-chip-line: #F8F7F7;
}

.project-up-next-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(207, 85, 65, 0.5);
  pointer-events: none;
  z-index: 1;
}

.project-up-next-progress-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.project-up-next-progress-ring {
  fill: none;
  stroke: var(--up-next-border-color);
  stroke-width: 3px;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

.project-up-next-arrow {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  z-index: 3;
}

.project-up-next-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.project-up-next-arrow-disc {
  fill: var(--up-next-chip-bg);
}

.project-up-next-arrow-line {
  stroke: var(--up-next-chip-line);
}

.project-up-next-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  z-index: 3;
}

.project-up-next-kicker {
  display: block;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--up-next-fg);
}

.project-up-next-title {
  display: block;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--up-next-fg);
}

.project-body-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 24px);
  row-gap: 0;
  margin-bottom: 64px;
}

/* Section 1 order: number -> divider -> challenge -> project focus */
.project-challenge-number {
  grid-column: 1 / span 6;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  color: rgba(15, 21, 19, 0.6);
  margin: 0 0 24px 0;
  order: 1;
}

.project-focus {
  grid-column: 8 / -1;
  order: 1;
  align-self: end;
}

.project-focus-label {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(15, 21, 19, 0.6);
  margin: 0 0 16px 0;
}

/* Full-width divider under section number */
.project-divider {
  grid-column: 1 / -1;
  height: 2px;
  background-color: #E2E2E2;
  margin: 0 0 24px 0;
  order: 2;
}

/* Challenge content */
.project-challenge {
  grid-column: 1 / span 6;
  order: 3;
}

.project-challenge-title {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.2;
  color: #0F1513;
  margin: 0 0 16px 0;
}

.project-challenge-text {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(15, 21, 19, 0.6);
  margin: 0;
  white-space: pre-line;
}

/* Project Focus pills after challenge */
.project-focus-tags {
  grid-column: 8 / -1;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-content: flex-start;
  justify-content: flex-start;
  order: 3;
}

.project-focus-tags-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
}

.project-focus-tag {
  padding: 12px 16px;
  background-color: #FFFFFF;
  color: #0F1513;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  border: 2px solid #E2E2E2;
  border-radius: 999px;
  white-space: nowrap;
  width: fit-content;
}

/* Cards: project-page only (pp- = project page) – no conflict with index .project-card */
.pp-cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter, 24px);
  align-items: start;
}

.pp-card {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  width: 100%;
  min-height: 140px;
}

/* Row 1: 16:9 card, full width */
.pp-card--16-9 {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 9;
}

/* Row 2: Two 4:5 cards, 6 cols each */
.pp-card--4-3 {
  grid-column: span 6;
  aspect-ratio: 4 / 3;
}

/* Two-up square cards, 6 cols each */
.pp-card--square-6 {
  grid-column: span 6;
  aspect-ratio: 1 / 1;
}

/* Two-up landscape cards, 6 cols each */
.pp-card--landscape-6 {
  grid-column: span 6;
  aspect-ratio: 4 / 3;
}

/* Two-up portrait cards, 6 cols each */
.pp-card--portrait-6 {
  grid-column: span 6;
  aspect-ratio: 3 / 4;
}

/* 4:5 portrait cards, 6 cols each (used in pp-cards--2 row 1) */
.pp-card--5-7 {
  grid-column: span 6;
  aspect-ratio: 4 / 5;
}

/* Single full-width 4:5 card, 12 cols */
.pp-card--4-5 {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
}

/* Row 3: Wide card */
.pp-card--wide {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 6;
}

/* 5-col and 7-col cards (aspect ratios match for same row height) */
.pp-card--5col {
  grid-column: span 5;
  aspect-ratio: 5 / 4;
}

.pp-card--7col {
  grid-column: span 7;
  aspect-ratio: 7 / 4;
}

/* Card colors (from portfolio palette) */
.pp-card--1 { background-color: #EAE6E5; }
.pp-card--2 { background-color: #E8EEF9; }
.pp-card--3 { background-color: #E6F1E6; }
.pp-card--4 { background-color: #F6E2EE; }
.pp-card--5 { background-color: #E8EEF9; }
.pp-card--6 { background-color: #E6F1E6; }
.pp-card--7 { background-color: #EAE6E5; }
.pp-card--8 { background-color: #F6E2EE; }
.pp-card--9 { background-color: #E8EEF9; }
.pp-card--10 { background-color: #EAE6E5; }
.pp-card--11 { background-color: #EAE6E5; }
.pp-card--12 { background-color: #E8EEF9; }
.pp-card--13 { background-color: #E6F1E6; }

.pp-card-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pp-card-media img,
.pp-card-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 21, 19, 0.08) 0%, rgba(15, 21, 19, 0.62) 100%);
}

.pp-card-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  color: #f8f7f7;
  z-index: 2;
}

.pp-card-heading {
  margin: 0 0 8px;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 500;
}

.pp-card-text {
  margin: 0;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  max-width: 58ch;
}

.pp-cards--custom {
  margin-top: 64px;
}

/* Section 2: 128px gap, same layout, text in last 6 cols */
.project-section-2 {
  margin-top: 128px;
}

.pp-cards--2 {
  margin-top: 64px;
}

.project-section-2-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 24px);
  row-gap: 0;
}

.project-section-2 .project-challenge-number {
  grid-column: 7 / span 6;
}

.project-section-2-spacer--right {
  grid-column: 7 / span 6;
  display: none; /* 02 now occupies this area */
}

.project-section-2 .project-divider {
  grid-column: 7 / span 6;
}

.project-section-2-spacer--left {
  grid-column: 1 / span 6;
  display: none; /* Section 2 content is right-aligned */
}

.project-challenge--right {
  grid-column: 7 / span 6;
}

.project-challenge--center {
  grid-column: 1 / -1;
}

/* Section 3: same as section 2 but content in first 6 cols (left-aligned) */
.project-section-3 {
  margin-top: 128px;
}

.project-section-3-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 24px);
  row-gap: 0;
}

.project-section-3 .project-challenge-number {
  grid-column: 1 / span 6;
}

.project-section-3 .project-divider {
  grid-column: 1 / span 6;
}

.pp-cards--3 {
  margin-top: 64px;
}

.project-challenge--left {
  grid-column: 1 / span 6;
}

/* Section 4: same as section 2 (right-aligned), 3× 16:9 cards below */
.project-section-4 {
  margin-top: 128px;
}

.project-section-4-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 24px);
  row-gap: 0;
}

.project-section-4 .project-challenge-number {
  grid-column: 7 / span 6;
}

.project-section-4 .project-divider {
  grid-column: 7 / span 6;
}

.project-section-4 .project-challenge--right {
  grid-column: 7 / span 6;
}

.project-section-2.is-info-left .project-challenge-number,
.project-section-2.is-info-left .project-divider,
.project-section-2.is-info-left .project-challenge {
  grid-column: 1 / span 6;
}

.project-section-2.is-info-right .project-challenge-number,
.project-section-2.is-info-right .project-divider,
.project-section-2.is-info-right .project-challenge {
  grid-column: 7 / span 6;
}

.project-section-3.is-info-right .project-challenge-number,
.project-section-3.is-info-right .project-divider,
.project-section-3.is-info-right .project-challenge {
  grid-column: 7 / span 6;
}

.project-section-3.is-info-left .project-challenge-number,
.project-section-3.is-info-left .project-divider,
.project-section-3.is-info-left .project-challenge {
  grid-column: 1 / span 6;
}

.project-section-4.is-info-left .project-challenge-number,
.project-section-4.is-info-left .project-divider,
.project-section-4.is-info-left .project-challenge {
  grid-column: 1 / span 6;
}

.project-section-4.is-info-right .project-challenge-number,
.project-section-4.is-info-right .project-divider,
.project-section-4.is-info-right .project-challenge {
  grid-column: 7 / span 6;
}

.project-section-2.is-info-center .project-challenge-number,
.project-section-3.is-info-center .project-challenge-number,
.project-section-4.is-info-center .project-challenge-number {
  grid-column: 1 / span 6;
}

.project-section-2.is-info-center .project-divider,
.project-section-3.is-info-center .project-divider,
.project-section-4.is-info-center .project-divider {
  grid-column: 1 / -1;
}

.project-section-2.is-info-center .project-challenge,
.project-section-3.is-info-center .project-challenge,
.project-section-4.is-info-center .project-challenge {
  grid-column: 1 / -1;
}

.pp-cards--4 {
  margin-top: 64px;
}

/* Extra/custom ladder sections should follow the same rhythm as sections 2-4 */
.project-extra-section-head {
  margin-top: 128px;
}

.pp-cards--extra-section {
  margin-top: 64px;
}

/* Testimonial (above What We Did, same style as home) */
.project-testimonial-grid {
  margin-top: 128px;
  --pricing-testimonial-mt: 128px;
  --pricing-testimonial-col-gap: var(--grid-gutter, 24px);
  --pricing-testimonial-avatar: 90px;
  --pricing-testimonial-name-size: 28px;
  --pricing-testimonial-role-size: 20px;
  --pricing-testimonial-quote-mt: 32px;
  --pricing-testimonial-quote-size: 36px;
  --pricing-testimonial-pill-mt: 32px;
  --pricing-testimonial-pill-w: 252px;
  --pricing-testimonial-pill-h: 56px;
  --pricing-dots-size: 16px;
  --pricing-dots-offset: 16px;
  --pricing-dots-gap: 16px;
}

/* Section 5: What We Did – 4 big cols (3×4 = 12) */
.project-section-5 {
  margin-top: 128px;
}

.project-section-5-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 24px);
  row-gap: 0;
}

.project-section-5 .project-challenge-number {
  grid-column: 1 / span 3;
  order: 1;
}

.project-section-5 .project-divider {
  grid-column: 1 / -1;
  margin-bottom: 24px;
  order: 2;
}

.project-what-title {
  grid-column: 1 / span 3;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1.2;
  color: #0F1513;
  margin: 0;
  align-self: start;
  order: 3;
}

.project-what-col {
  grid-column: span 3;
  margin-top: 8px; /* 32px from divider (24px + 8px) */
  order: 4;
}

.project-what-col--1 { grid-column: 4 / span 3; }
.project-what-col--2 { grid-column: 7 / span 3; }
.project-what-col--3 { grid-column: 10 / span 3; }

.project-what-heading {
  font-family: neue-haas-grotesk-text, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0;
  color: rgba(15, 21, 19, 0.6);
  margin: 0 0 32px 0;
}

.project-what-pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.project-what-pills--grid {
  flex-direction: row;
  flex-wrap: wrap;
}

.project-what-pill {
  padding: 12px 16px;
  background-color: #FFFFFF;
  color: #0F1513;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  border: 2px solid #E2E2E2;
  border-radius: 999px;
  white-space: nowrap;
  width: fit-content;
}

/* Section 6: Results – metric cards */
.project-section-6 {
  margin-top: 128px;
}

.project-section-6-inner {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--grid-gutter, 24px);
  row-gap: 0;
}

.project-section-6 .project-challenge-number {
  grid-column: 1 / span 6;
}

.project-section-6 .project-divider {
  grid-column: 1 / span 6;
}

.project-section-6 .project-challenge--left {
  grid-column: 1 / span 6;
}

.pp-metric-cards {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter, 24px);
  margin-top: 64px;
}

.pp-metric-card {
  grid-column: span 4;
  aspect-ratio: 16 / 6;
  background-color: #CF5541;
  border-radius: 38px;
  padding: 32px 38px 32px 38px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.pp-metric-value {
  font-family: ohno-blazeface, sans-serif;
  font-size: clamp(42px, 7vw, 96px);
  font-weight: 100;
  line-height: 0.95;
  color: #FFFFFF;
}

.pp-metric-label {
  margin-top: 12px;
  font-family: neue-haas-grotesk-text, sans-serif;
  font-size: clamp(14px, 1.25vw, 16px);
  font-weight: 400;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.8);
}

.pp-metric-value:empty,
.pp-metric-label:empty {
  display: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .project-page-main {
    padding-top: 156px;
  }

  .project-hero-wrap {
    margin-bottom: 48px;
  }

  .project-hero {
    border-radius: 24px;
  }

  .project-hero-content {
    padding: 72px 32px 48px;
  }

  .project-hero-title {
    font-size: clamp(52px, 7vw, 72px);
    line-height: 1.04;
  }

  .project-hero-pill {
    margin-top: 36px;
    padding: 6px 10px;
    font-size: 14px;
  }

  .project-hero-desc {
    margin-top: 20px;
    font-size: clamp(22px, 3.2vw, 28px);
    line-height: 1.25;
    max-width: none;
  }

  .project-body {
    padding: 48px var(--grid-margin, 24px) 96px;
  }

  .project-up-next-btn {
    grid-column: 8 / span 5;
    min-height: 80px;
    gap: 12px;
    padding: 4px;
  }

  .project-up-next-arrow {
    width: 72px;
    height: 72px;
  }

  .project-up-next-kicker {
    font-size: 15px;
  }

  .project-up-next-title {
    font-size: 24px;
  }

  .project-body-inner {
    grid-template-columns: 1fr;
    margin-bottom: 48px;
  }

  .project-challenge-number {
    grid-column: 1 / -1;
    font-size: 16px;
    margin: 0 0 16px 0;
  }

  .project-challenge {
    grid-column: 1 / -1;
  }

  .project-focus {
    grid-column: 1 / -1;
  }

  .project-focus-label {
    font-size: 16px;
    margin: 0 0 16px 0;
  }

  /* Section 1 mobile order: number -> divider -> challenge -> Project Focus label -> focus pills */
  .project-body-inner .project-challenge-number {
    order: 1;
  }

  .project-body-inner .project-divider {
    order: 2;
  }

  .project-body-inner .project-challenge {
    order: 3;
  }

  .project-body-inner .project-focus {
    order: 4;
    margin-top: 32px;
  }

  .project-body-inner .project-focus-tags {
    order: 5;
  }

  .project-divider {
    margin: 0 0 16px 0;
  }

  .project-challenge-title {
    font-size: 28px;
    margin: 0 0 12px 0;
  }

  .project-challenge-text {
    font-size: 18px;
    line-height: 1.45;
  }

  .project-focus-tags {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .project-focus-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .project-focus-tag {
    padding: 10px 14px;
    font-size: 14px;
  }

  .pp-cards {
    gap: 8px;
  }

  /* Backend card layouts are desktop-oriented; force single-column flow on mobile */
  .pp-cards > .pp-card {
    grid-column: 1 / -1 !important;
  }

  .pp-card {
    border-radius: 24px;
  }

  .pp-card--4-3,
  .pp-card--square-6,
  .pp-card--landscape-6,
  .pp-card--portrait-6,
  .pp-card--5-7,
  .pp-card--4-5,
  .pp-card--5col,
  .pp-card--7col {
    grid-column: 1 / -1;
  }

  .pp-cards--custom,
  .pp-cards--2,
  .pp-cards--3,
  .pp-cards--4 {
    margin-top: 48px;
  }

  .project-section-2,
  .project-section-3,
  .project-section-4,
  .project-section-5,
  .project-section-6,
  .project-testimonial-grid {
    margin-top: 96px;
  }

  .project-testimonial-grid {
    --pricing-testimonial-mt: 88px;
    --pricing-testimonial-avatar: 80px;
    --pricing-testimonial-name-size: 24px;
    --pricing-testimonial-role-size: 18px;
    --pricing-testimonial-quote-size: clamp(28px, 4.2vw, 34px);
    --pricing-testimonial-pill-w: 220px;
    --pricing-testimonial-pill-h: 52px;
    --pricing-dots-offset: 12px;
  }

  .project-section-2-inner,
  .project-section-3-inner,
  .project-section-4-inner,
  .project-section-5-inner,
  .project-section-6-inner {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .project-section-2 .project-challenge-number {
    grid-column: 1 / -1;
  }

  .project-section-2 .project-divider {
    grid-column: 1 / -1;
  }

  .project-section-2-spacer--right {
    display: none;
  }

  .project-section-2-spacer--left {
    display: none;
  }

  .project-challenge--right,
  .project-challenge--left {
    grid-column: 1 / -1;
  }

  .project-section-3 .project-challenge-number,
  .project-section-3 .project-divider {
    grid-column: 1 / -1;
  }

  .project-section-4 .project-challenge-number,
  .project-section-4 .project-divider {
    grid-column: 1 / -1;
  }

  .project-section-4 .project-challenge--right {
    grid-column: 1 / -1;
  }

  .project-section-5 .project-challenge-number,
  .project-section-5 .project-divider {
    grid-column: 1 / -1;
  }

  /* Section 05 mobile flow: number -> divider -> title -> columns */
  .project-section-5 .project-challenge-number {
    order: 1;
  }

  .project-section-5 .project-divider {
    order: 2;
  }

  .project-what-title {
    order: 3;
  }

  .project-what-col--1 {
    order: 4;
  }

  .project-what-col--2 {
    order: 5;
  }

  .project-what-col--3 {
    order: 6;
  }

  .project-what-title,
  .project-what-col,
  .project-what-col--1,
  .project-what-col--2,
  .project-what-col--3 {
    grid-column: 1 / -1;
  }

  .project-what-title {
    font-size: 30px;
    line-height: 1.15;
  }

  .project-what-col {
    margin-top: 24px;
  }

  .project-what-heading {
    font-size: 14px;
    margin: 0 0 16px 0;
  }

  .project-what-pills {
    gap: 10px;
  }

  .project-what-pill {
    padding: 10px 14px;
    font-size: 14px;
  }

  .project-section-6 .project-challenge-number,
  .project-section-6 .project-divider,
  .project-section-6 .project-challenge--left {
    grid-column: 1 / -1;
  }

  .pp-metric-cards {
    gap: 20px;
    margin-top: 48px;
  }

  .pp-metric-card {
    grid-column: 1 / -1;
    border-radius: 24px;
    padding: 24px;
    aspect-ratio: 4 / 3;
  }

  .pp-metric-value {
    font-size: clamp(40px, 10vw, 64px);
  }

  .pp-metric-label {
    font-size: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .project-page-main {
    padding-top: 0;
  }

  .project-hero-wrap {
    padding: 0;
    margin-bottom: 48px;
  }

  .project-hero {
    margin: 0;
    border-radius: 0;
    aspect-ratio: 4 / 5;
    width: 100%;
    max-width: none;
  }

  .project-hero-content {
    padding: 72px 32px 48px;
  }

  .project-hero-title {
    font-size: clamp(52px, 7vw, 72px);
    line-height: 1.04;
  }

  .project-hero-pill {
    margin-top: 36px;
    padding: 6px 10px;
    font-size: 14px;
  }

  .project-hero-desc {
    margin-top: 20px;
    font-size: clamp(22px, 3.2vw, 28px);
    line-height: 1.25;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .project-page-main {
    padding-top: 0;
  }

  .project-hero-wrap {
    padding: 0;
    margin-bottom: 40px;
  }

  .project-hero {
    margin: 0;
    border-radius: 0;
    aspect-ratio: 9 / 16;
  }

  .project-hero-content {
    padding: 84px 20px 52px;
  }

  .project-hero-title {
    font-size: clamp(42px, 11vw, 52px);
    line-height: 1.03;
  }

  .project-hero-pill {
    margin-top: 24px;
  }

  .project-hero-desc {
    margin-top: 16px;
    font-size: 24px;
    line-height: 1.3;
  }

  .project-body {
    padding: 40px var(--grid-margin, 24px) 72px;
  }

  .project-up-next-wrap {
    margin: 0 var(--grid-margin, 24px) 32px;
  }

  .project-up-next-btn {
    grid-column: 1 / -1;
    min-height: 76px;
    gap: 10px;
    padding: 4px;
  }

  .project-up-next-progress-ring {
    stroke-width: 2px;
  }

  .project-up-next-arrow {
    width: 68px;
    height: 68px;
  }

  .project-up-next-kicker {
    font-size: 14px;
  }

  .project-up-next-title {
    font-size: 22px;
  }

  .project-body-inner {
    margin-bottom: 40px;
  }

  .project-challenge-title {
    font-size: 24px;
  }

  .project-challenge-text {
    font-size: 16px;
    line-height: 1.42;
  }

  .pp-cards {
    gap: 8px;
  }

  .pp-card {
    border-radius: 20px;
  }

  .pp-cards--custom,
  .pp-cards--2,
  .pp-cards--3,
  .pp-cards--4 {
    margin-top: 40px;
  }

  .project-section-2,
  .project-section-3,
  .project-section-4,
  .project-section-5,
  .project-section-6,
  .project-testimonial-grid {
    margin-top: 72px;
  }

  .project-testimonial-grid {
    --pricing-testimonial-mt: 64px;
    --pricing-testimonial-avatar: 72px;
    --pricing-testimonial-name-size: 22px;
    --pricing-testimonial-role-size: 16px;
    --pricing-testimonial-quote-mt: 24px;
    --pricing-testimonial-quote-size: clamp(24px, 7vw, 30px);
    --pricing-testimonial-pill-mt: 24px;
    --pricing-testimonial-pill-w: 200px;
    --pricing-testimonial-pill-h: 48px;
    --pricing-dots-size: 13px;
    --pricing-dots-gap: 12px;
    --pricing-dots-offset: 8px;
  }

  .project-what-title {
    font-size: 28px;
  }

  .project-what-col {
    margin-top: 20px;
  }

  .pp-metric-cards {
    gap: 16px;
    margin-top: 40px;
  }

  .pp-metric-card {
    border-radius: 20px;
    padding: 20px;
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .project-hero {
    border-radius: 0;
    aspect-ratio: 9 / 16;
  }

  .project-hero-content {
    padding: 76px 16px 44px;
  }

  .project-hero-title {
    font-size: 38px;
    line-height: 1.02;
  }

  .project-hero-pill {
    margin-top: 20px;
    padding: 6px 10px;
    font-size: 13px;
  }

  .project-hero-desc {
    margin-top: 14px;
    font-size: 24px;
    line-height: 1.25;
  }

  .project-body {
    padding: 32px var(--grid-margin, 16px) 56px;
  }

  .project-up-next-wrap {
    margin: 0 var(--grid-margin, 16px) 32px;
  }

  .project-up-next-btn {
    min-height: 68px;
    gap: 8px;
    padding: 4px;
  }

  .project-up-next-arrow {
    width: 60px;
    height: 60px;
  }

  .project-up-next-kicker {
    font-size: 13px;
  }

  .project-up-next-title {
    font-size: 18px;
  }

  .project-body-inner {
    margin-bottom: 32px;
  }

  .project-body-inner .project-focus {
    margin-top: 32px;
  }

  .project-challenge-number,
  .project-focus-label {
    font-size: 16px;
  }

  .project-challenge-title {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .project-challenge-text {
    font-size: 15px;
  }

  .project-focus-tags {
    gap: 6px;
  }

  .project-focus-tag,
  .project-what-pill {
    padding: 9px 12px;
    font-size: 13px;
  }

  .pp-cards {
    gap: 8px;
  }

  .pp-card {
    border-radius: 18px;
  }

  .project-section-2,
  .project-section-3,
  .project-section-4,
  .project-section-5,
  .project-section-6,
  .project-testimonial-grid {
    margin-top: 56px;
  }

  .project-testimonial-grid {
    --pricing-testimonial-mt: 56px;
    --pricing-testimonial-avatar: 64px;
    --pricing-testimonial-name-size: 20px;
    --pricing-testimonial-role-size: 15px;
    --pricing-testimonial-quote-size: clamp(21px, 8vw, 26px);
    --pricing-testimonial-pill-w: 180px;
    --pricing-testimonial-pill-h: 44px;
    --pricing-dots-size: 12px;
    --pricing-dots-gap: 10px;
    --pricing-dots-offset: 6px;
  }

  .project-what-title {
    font-size: 24px;
  }

  .project-what-heading {
    font-size: 13px;
    margin-bottom: 12px;
  }

  .pp-metric-cards {
    gap: 14px;
    margin-top: 32px;
  }

  .pp-metric-card {
    border-radius: 18px;
    padding: 16px;
    aspect-ratio: 5 / 4;
  }

  .pp-metric-value {
    font-size: clamp(34px, 13vw, 48px);
  }

  .pp-metric-label {
    margin-top: 10px;
    font-size: 13px;
  }
}