/* TPG2025 — homepage section styles. One block per Figma section; each section's markup lives in a Text/HTML module. */

/* ---------- shared ---------- */
.tpg-section { position: relative; }
.tpg-container { max-width: var(--tpg-content-width); margin: 0 auto; padding: 0 var(--tpg-page-gutter); }
.tpg-section--pending { padding: 48px 0; border-top: 1px dashed var(--tpg-gray-300); color: var(--tpg-gray-muted); font: 400 var(--tpg-p-sm)/1.4 var(--tpg-font-sans); }

/* ---------- 01 hero (Figma 3813:18377, 1728 x 1215) ---------- */
.tpg-hero { position: relative; overflow: hidden; background: var(--tpg-white); }
.tpg-hero__jungle { position: absolute; left: 50%; top: 50%; width: 1790px; max-width: none; height: auto; transform: translate(-50%, calc(-50% - 17px)); pointer-events: none; z-index: 0; }
.tpg-hero__stage { position: relative; max-width: 1728px; min-height: 1215px; margin: 0 auto; padding: 132px 216px 128px; box-sizing: border-box; }
.tpg-hero__gorilla { position: absolute; left: 24.77%; top: 293px; width: 52.6%; height: auto; z-index: 2; }
.tpg-hero__headings { position: relative; z-index: 1; height: 284px; }
.tpg-hero__eyebrow { margin: 0 0 -21px; padding-left: 25.46%; font: 600 45px/1.1 var(--tpg-font-sans); color: var(--tpg-primary); }
.tpg-hero__display { margin: 0 0 -21px; padding-left: 16.98%; font: 400 140px/1 var(--tpg-font-sans); color: var(--tpg-white); -webkit-text-stroke: 2px var(--tpg-gray-outline); paint-order: stroke fill; letter-spacing: 0; }
.tpg-hero__script { margin: 0; padding: 18px 0 0 50.9%; height: 79px; font: 400 var(--tpg-h3-script)/1.2 var(--tpg-font-script); color: var(--tpg-primary); }
.tpg-hero__copy { position: relative; z-index: 1; padding: 501px 220px 0; text-align: center; }
.tpg-hero__copy p { margin: 0; font: 400 var(--tpg-p-lg)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-hero__ctas { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding-top: 24px; }

@media (max-width: 1200px) {
  .tpg-hero__stage { min-height: 0; padding: 64px var(--tpg-page-gutter) 64px; }
  .tpg-hero__gorilla { position: static; display: block; width: min(100%, 909px); margin: 16px auto 0; }
  .tpg-hero__headings { height: auto; text-align: center; }
  .tpg-hero__eyebrow, .tpg-hero__display, .tpg-hero__script { padding-left: 0; margin: 0; height: auto; }
  .tpg-hero__eyebrow { font-size: clamp(26px, 3.5vw, 45px); }
  .tpg-hero__display { font-size: clamp(56px, 11vw, 140px); }
  .tpg-hero__script { font-size: clamp(26px, 3.5vw, 40px); padding-top: 8px; }
  .tpg-hero__copy { padding: 32px 0 0; }
  .tpg-hero__jungle { width: 160%; top: 55%; }
}

/* ---------- shared type helpers ---------- */
.tpg-script { display: block; font: 400 var(--tpg-h3-script)/1.2 var(--tpg-font-script); color: var(--tpg-primary); }
.tpg-script--sm { font-size: var(--tpg-h4-script); }

/* ---------- 02 "you can't grow" (Figma 3813:18401, 1728 x 834) ---------- */
.tpg-s02 { position: relative; overflow: hidden; padding: 180px 216px 40px; background: linear-gradient(180deg, rgba(249,194,46,0.30) 0%, rgba(249,194,46,0) 100%), var(--tpg-white); }
.tpg-s02__canopy { position: absolute; left: calc(50% + 18.5px); top: 27px; width: 1983px; max-width: none; height: auto; transform: translateX(-50%); pointer-events: none; }
.tpg-s02__band { position: absolute; left: -67px; top: -55px; width: 1862px; max-width: none; height: auto; pointer-events: none; }
.tpg-s02__row { position: relative; width: 1076px; max-width: 100%; margin: 0 auto; display: flex; align-items: center; gap: 48px; }
.tpg-s02__art { flex: 0 0 440px; }
.tpg-s02__art img { display: block; width: 440px; height: auto; }
.tpg-s02__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.tpg-s02__heading { margin: 0; max-width: 526px; }
.tpg-s02__headline { display: block; font: 600 var(--tpg-h2)/1.2 var(--tpg-font-sans); color: var(--tpg-primary); }
.tpg-s02__copy p { margin: 0 0 25.6px; font: 400 var(--tpg-p)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-s02__copy p:last-child { margin-bottom: 0; }
@media (max-width: 1100px) {
  .tpg-s02 { padding: 96px var(--tpg-page-gutter) 40px; }
  .tpg-s02__row { flex-direction: column; align-items: center; text-align: left; }
  .tpg-s02__art { flex-basis: auto; }
  .tpg-s02__art img { width: min(100%, 440px); margin: 0 auto; }
  .tpg-s02__headline { font-size: clamp(28px, 4vw, 40px); }
}

/* ---------- 03 why organizations choose 10PG (Figma 3813:18467, 1728 x 843) ---------- */
.tpg-s03 { background: var(--tpg-white); padding: 36px 216px 40px; }
.tpg-s03__inner { max-width: var(--tpg-content-width); margin: 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tpg-space-5); }
.tpg-s03__left { flex: 0 0 522px; align-self: stretch; }
.tpg-s03__sticky { position: sticky; top: 0; padding-top: 24px; display: flex; flex-direction: column; gap: 24px; }
.tpg-s03__heading { margin: 0; }
.tpg-s03__headline { display: block; font: 600 var(--tpg-h2)/1.2 var(--tpg-font-sans); color: var(--tpg-primary); }
.tpg-s03__copy { display: flex; flex-direction: column; gap: 12px; }
.tpg-s03__copy p { margin: 0; font: 400 var(--tpg-p)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-s03__right { flex: 0 0 632px; margin: 0; padding: 24px 0 0; list-style: none; display: flex; flex-direction: column; gap: 48px; }
.tpg-s03__item { display: flex; align-items: flex-start; gap: 16px; }
.tpg-s03__icon { flex: 0 0 100px; width: 100px; height: 100px; box-sizing: border-box; padding: 20px; display: flex; align-items: center; justify-content: center; }
.tpg-s03__icon img { display: block; max-width: 100%; height: auto; }
.tpg-s03__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tpg-s03__body h3 { margin: 0 0 -4px; font: 600 var(--tpg-h4)/1.45 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-s03__body p { margin: 0; max-width: 424px; font: 400 var(--tpg-p)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
@media (max-width: 1100px) {
  .tpg-s03 { padding: 36px var(--tpg-page-gutter) 40px; }
  .tpg-s03__inner { flex-direction: column; gap: 32px; }
  .tpg-s03__left, .tpg-s03__right { flex-basis: auto; width: 100%; }
  .tpg-s03__sticky { position: static; }
  .tpg-s03__headline { font-size: clamp(28px, 4vw, 40px); }
  .tpg-s03__body p { max-width: none; }
}

/* ---------- 04 how we build in 3 steps (Figma 3813:18578, 1728 x 538) ---------- */
.tpg-s04 { position: relative; overflow: hidden; background: var(--tpg-white); padding: 40px var(--tpg-page-gutter); display: flex; flex-direction: column; align-items: center; gap: 40px; }
.tpg-s04__header { position: relative; z-index: 1; text-align: center; max-width: 854px; }
.tpg-s04__heading { margin: 0; padding-bottom: 24px; }
.tpg-s04__headline { display: block; font: 600 var(--tpg-h2)/1.2 var(--tpg-font-sans); color: var(--tpg-primary); }
.tpg-s04__sub { margin: 0; font: 400 var(--tpg-p)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-s04__grid { position: relative; width: 1076px; max-width: 100%; }
.tpg-s04__leaf { position: absolute; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 0; }
.tpg-s04__leaf img { display: block; }
.tpg-s04__leaf--1 { left: -105.75px; top: -372px; width: 304px; height: 505px; }  .tpg-s04__leaf--1 img { width: 261px; height: 483px; transform: rotate(-5.3deg); }
.tpg-s04__leaf--2 { left: -180px; top: -146px; width: 330px; height: 335px; }     .tpg-s04__leaf--2 img { width: 251px; height: 238px; transform: rotate(-61.31deg); }
.tpg-s04__leaf--3 { left: -185px; top: 108px; width: 417px; height: 164px; }      .tpg-s04__leaf--3 img { width: 409px; height: 137px; transform: rotate(-3.89deg); }
.tpg-s04__leaf--4 { left: 953px; top: 215px; width: 215px; height: 229px; }       .tpg-s04__leaf--4 img { width: 205px; height: 189px; transform: rotate(82.15deg); }
.tpg-s04__leaf--5 { left: 840px; top: -163px; width: 346px; height: 362px; }      .tpg-s04__leaf--5 img { width: 346px; height: 362px; }
.tpg-s04__leaf--6 { left: 981px; top: 75px; width: 218px; height: 193px; }        .tpg-s04__leaf--6 img { width: 191px; height: 159px; transform: rotate(-11.1deg); }
.tpg-s04__cards { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.tpg-card { width: 337px; box-sizing: border-box; background: var(--tpg-white); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.tpg-card:first-child { min-height: 286px; }
.tpg-card__step { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; box-sizing: border-box; border: 3px solid var(--tpg-tertiary); border-radius: 30px; background: linear-gradient(85deg, #ad1f24 4.7%, #eea120 96%); color: var(--tpg-white); font: 600 var(--tpg-h4)/1 var(--tpg-font-sans); margin: 1px; }
.tpg-card__title { position: relative; margin: 0; padding-bottom: 11px; font: 600 var(--tpg-h4)/1.45 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-card__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 2px; background: var(--tpg-primary); }
.tpg-card p { margin: 0; font: 400 var(--tpg-p)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
@media (max-width: 1100px) {
  .tpg-s04__leaf { display: none; }
  .tpg-s04__cards { justify-content: center; }
  .tpg-s04__headline { font-size: clamp(28px, 4vw, 40px); }
}

/* ---------- 05 the hidden cost (Figma 3813:18859, 1728 x 552) ---------- */
.tpg-s05 { padding: 40px 216px 0; background: linear-gradient(180deg, rgba(249,194,46,0) 0%, rgba(249,194,46,0.30) 100%), var(--tpg-white); }
.tpg-s05__row { width: 1076px; max-width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tpg-s05__text { flex: 0 0 526px; display: flex; flex-direction: column; gap: 32px; }
.tpg-s05__heading { margin: 0; }
.tpg-s05__headline { display: block; font: 600 52px/1.2 var(--tpg-font-sans); color: var(--tpg-primary); }
.tpg-s05__copy { display: flex; flex-direction: column; gap: 10px; }
.tpg-s05__copy p { margin: 0; font: 400 var(--tpg-p)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-s05__art { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; }
.tpg-s05__art img { display: block; width: 100%; max-width: 550px; height: auto; }
@media (max-width: 1100px) {
  .tpg-s05 { padding: 40px var(--tpg-page-gutter) 0; }
  .tpg-s05__row { flex-direction: column; }
  .tpg-s05__text { flex-basis: auto; }
  .tpg-s05__headline { font-size: clamp(30px, 4.5vw, 52px); }
}

/* ---------- 06 before / after (Figma 3813:18905, 1728 x 586) ---------- */
.tpg-s06 { padding: 40px var(--tpg-page-gutter) 28px; background: linear-gradient(180deg, rgba(249,194,46,0.30) 0%, rgba(249,194,46,0) 100%), var(--tpg-white); display: flex; flex-direction: column; align-items: center; gap: 40px; }
.tpg-s06__header { text-align: center; max-width: 854px; }
.tpg-s06__heading { margin: 0; padding-bottom: 24px; }
.tpg-s06__headline { display: block; font: 600 var(--tpg-h2)/1.2 var(--tpg-font-sans); color: var(--tpg-primary); }
.tpg-s06__sub { margin: 0; font: 400 var(--tpg-p-lg)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-s06__cards { width: var(--tpg-content-width); max-width: 100%; display: flex; justify-content: center; align-items: flex-start; gap: 32px; }
.tpg-card--wide { width: 491px; }
.tpg-checklist { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tpg-checklist li { display: flex; align-items: center; gap: 8px; min-height: 26px; font: 400 var(--tpg-p)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-checklist--after li { align-items: flex-start; }
.tpg-checklist i { flex: 0 0 auto; font-size: 16px; line-height: 26px; }
.tpg-checklist--before i { color: #c00008; }
.tpg-checklist--after i { color: var(--tpg-jungle-light); }
.tpg-s06__outro { margin: 0; max-width: 854px; text-align: center; font: 400 var(--tpg-p)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
@media (max-width: 1100px) { .tpg-s06__cards { flex-direction: column; align-items: center; } .tpg-card--wide { width: min(100%, 491px); } .tpg-s06__headline { font-size: clamp(28px, 4vw, 40px); } }

/* ---------- 07 by the numbers (Figma 3813:19065, 1728 x 476) ---------- */
.tpg-s07 { padding: 40px var(--tpg-page-gutter); background: var(--tpg-white); display: flex; flex-direction: column; align-items: center; gap: 48px; }
.tpg-s07__header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tpg-s07__heading { margin: 0; max-width: 660px; }
.tpg-s07__headline { display: block; font: 600 var(--tpg-h2)/1.2 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-s07__sub { margin: 0; font: 400 var(--tpg-p)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-stats { width: 856px; max-width: 100%; margin: 0; display: flex; align-items: center; gap: 45px; }
.tpg-stat { width: 180px; display: flex; flex-direction: column; gap: 40px; }
.tpg-stat__value { position: relative; order: 1; margin: 0; padding-bottom: 20px; font: 400 var(--tpg-display-3)/1 var(--tpg-font-sans); color: var(--tpg-white); -webkit-text-stroke: 2px var(--tpg-gray-outline); paint-order: stroke fill; white-space: nowrap; }
.tpg-stat__value::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 4px; background: var(--tpg-primary); }
.tpg-stat__label { order: 2; margin: 0; font: 600 var(--tpg-h4)/1 var(--tpg-font-sans); color: #575757; letter-spacing: 0.24px; text-transform: uppercase; white-space: nowrap; }
@media (max-width: 900px) { .tpg-stats { flex-wrap: wrap; justify-content: center; gap: 32px; } .tpg-stat { width: 45%; min-width: 150px; } .tpg-stat__value { font-size: clamp(56px, 10vw, 96px); } .tpg-s07__headline { font-size: clamp(28px, 4vw, 40px); } }

/* ---------- 08 testimonials (Figma 3813:19096, 1728 x 1080) ---------- */
.tpg-s08 { padding: 0 var(--tpg-page-gutter) 80px; background: var(--tpg-white); display: flex; flex-direction: column; align-items: center; gap: 40px; }
.tpg-rule-v { display: block; width: 2px; height: 128px; border-radius: 2px; background: var(--tpg-secondary); }
.tpg-s08__carousel { position: relative; width: var(--tpg-content-width); max-width: 100%; padding-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.tpg-s08__track { position: relative; width: 854px; max-width: 100%; }
.tpg-s08__slide { display: none; flex-direction: column; align-items: center; gap: 40px; }
.tpg-s08__slide.is-active { display: flex; }
.tpg-s08__person { display: block; width: 339px; max-width: 100%; height: auto; }
.tpg-s08__person--plain { width: 284px; border-radius: 50% / 40%; }
.tpg-s08__text { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 24px; width: 100%; }
.tpg-s08__quote { margin: 0; text-align: center; font: 400 var(--tpg-p-lg)/1.6 var(--tpg-font-sans); color: var(--tpg-gray-500); }
.tpg-decor { display: block; width: 32px; height: 3px; border-radius: 2px; background: var(--tpg-primary); }
.tpg-s08__who { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tpg-s08__name { margin: 0; font: 600 var(--tpg-p)/1.6 var(--tpg-font-sans); color: #000; }
.tpg-s08__title { margin: 0; font: 400 var(--tpg-p-sm)/1.4 var(--tpg-font-sans); color: #000; }
.tpg-s08__logo { display: block; height: 29px; width: auto; max-width: 240px; }
.tpg-s08__arrow { position: absolute; top: 50%; width: 25px; height: 59px; padding: 0; border: 0; background: transparent; cursor: pointer; transform: translateY(-50%); }
.tpg-s08__arrow img { display: block; width: 25px; height: 59px; }
.tpg-s08__arrow--prev { left: 0; } .tpg-s08__arrow--prev img { transform: rotate(180deg); }
.tpg-s08__arrow--next { right: 0; }
.tpg-s08__dots { margin: 0; padding: 0; list-style: none; display: flex; gap: 16px; }
.tpg-s08__dot { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: var(--tpg-yellow-light); cursor: pointer; }
.tpg-s08__dot[aria-selected="true"] { background: var(--tpg-primary); }
@media (max-width: 1100px) { .tpg-s08__arrow { display: none; } }

/* ---------- 09 industries we serve (Figma 3813:19176, 1728 x 730) ---------- */
.tpg-s09 { position: relative; overflow: hidden; padding: 160px var(--tpg-page-gutter) 32px; background: var(--tpg-white); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tpg-s09__vines { position: absolute; left: 50%; top: 0; width: 1986px; max-width: none; height: auto; transform: translateX(-50%); pointer-events: none; }
.tpg-s09__intro { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tpg-s09__heading { margin: 0; }
.tpg-s09__headline { display: block; font: 600 var(--tpg-h2)/1.2 var(--tpg-font-sans); color: var(--tpg-primary); }
.tpg-s09__sub { margin: 0; font: 400 var(--tpg-p-lg)/1.8 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-s09__tabs { position: relative; margin: 0; padding: 24px 0 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }
.tpg-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 12px 24px; border: 2px solid var(--tpg-primary); border-radius: 24px; background: var(--tpg-white); color: var(--tpg-primary); font: 700 16px/1 var(--tpg-font-sans); cursor: pointer; }
.tpg-pill[aria-pressed="true"] { background: var(--tpg-primary); color: var(--tpg-white); }
.tpg-s09__toggle { width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: #efa322; font-size: 16px; cursor: pointer; }
.tpg-s09__logos { position: relative; margin: 0; padding: 16px 0 32px; list-style: none; width: var(--tpg-content-width); max-width: 100%; display: flex; justify-content: center; align-items: center; gap: 40px; }
.tpg-s09__logo { width: 227px; height: 228px; box-sizing: border-box; padding: 48px 40px; border-radius: 8px; background: rgba(255,255,255,0.8); box-shadow: var(--tpg-shadow-card); display: flex; align-items: center; justify-content: center; }
.tpg-s09__logo img { display: block; max-width: 183px; max-height: 164px; width: auto; height: auto; object-fit: contain; }
.tpg-s09__more { position: relative; display: inline-flex; align-items: center; gap: 8px; font: 700 16px/1 var(--tpg-font-sans); color: var(--tpg-primary); text-decoration: none; }
.tpg-s09__more:hover, .tpg-s09__more:focus-visible { text-decoration: underline; }
@media (max-width: 1100px) { .tpg-s09 { padding-top: 96px; } .tpg-s09__logos { flex-wrap: wrap; gap: 24px; } .tpg-s09__logo { width: 180px; height: 180px; padding: 32px; } .tpg-s09__headline { font-size: clamp(28px, 4vw, 40px); } .tpg-s09__sub { white-space: normal; } }

/* ---------- 10 closing CTA (Figma 3813:19224, 1728 x 304) ---------- */
.tpg-s10 { padding: 40px var(--tpg-page-gutter) 60px; background: var(--tpg-white); display: flex; flex-direction: column; align-items: center; gap: 48px; }
.tpg-s10__inner { width: 856px; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.tpg-s10__headline { margin: 0; font: 600 var(--tpg-h2)/1.2 var(--tpg-font-sans); color: var(--tpg-secondary); }
.tpg-s10__copy { margin: 0; font: 400 var(--tpg-p)/1.6 var(--tpg-font-sans); color: var(--tpg-secondary); }
@media (max-width: 900px) { .tpg-s10__headline { font-size: clamp(28px, 4vw, 40px); } }

/* ---------- edit-mode hardening: DNN/2sxc editing chrome must not restyle the testimonial figure ---------- */
.tpg-s08 .tpg-s08__slide, .tpg-s08 .tpg-s08__slide.is-active { position: static; margin: 0; padding: 0; background: none; box-shadow: none; }
.tpg-s08 .tpg-s08__slide.is-active { display: flex; }
.tpg-s08 .tpg-s08__person { position: static; float: none; margin: 0; max-width: 100%; }
.tpg-s08 .tpg-s08__text { position: static; inset: auto; margin: 0; padding-top: 24px; background: none; box-shadow: none; color: inherit; }
.tpg-s08 .tpg-s08__quote { background: none; padding: 0; border: 0; }