/* =========================================================================
   HOME v7 . POWER LIVES IN THE MIDDLE
   One continuous crossing: dark, dark, dark -- cream -- dark -- cream --
   dark -- cream -- dark. The cream chapters are the rebuilt ground; the
   dark ones are the middle. Gold is punctuation, never the sentence.
   Tokens live in app.css. Every class here is pp- prefixed so nothing in
   app.js's older section drivers can bind to this page by accident.
   ========================================================================= */

/* ---- shared grammar ---- */
.pp-eyebrow {
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);}
.pp-eyebrow--fire { color: var(--gold);}

/* Headlines run the whole room; text-wrap: balance keeps the lines even, so
   nothing is left half-empty at the right. */
.pp-h2 {
  margin-top: var(--s-sm);
  font-size: clamp(1.9rem, 4.6vw, 3.9rem);
  font-weight: 700; line-height: 1.04; letter-spacing: -0.02em;
  text-transform: uppercase; text-wrap: balance;}
.pp-h3 {
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 700; line-height: 1.08; letter-spacing: -0.015em;
  text-transform: uppercase;}
.pp-h4 {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 700; letter-spacing: -0.01em;}

.pp-lead {
  font-size: var(--t-lead); line-height: 1.5; color: var(--ink-muted);
  max-width: 34em;}
.pp-prose { max-width: 640px;}
.pp-prose p { font-size: var(--t-body); line-height: 1.75; color: var(--ink-muted);}
.pp-prose p + p { margin-top: 1.1em;}
.pp-prose em { font-style: italic; color: var(--ink);}

.pp-textlink {
  display: inline-flex; align-items: baseline; gap: 9px;
  font-size: var(--t-small); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  padding-bottom: 5px;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);}
.pp-textlink:hover { color: var(--ink); border-color: var(--ink);}
.pp-textlink span, .pp-textlink i { font-style: normal;}

/* ---- the cream ground ----
   Sections carrying .pp-cream re-point the ink tokens instead of restating
   every rule: the same grammar renders dark-on-cream. */
.pp-cream {
  background: var(--cream);
  --ink: #1B1410;
  --ink-muted: #55483C;
  --ink-faint: #6E6152;
  --line: #DCCBB4;}
.pp-cream .pp-eyebrow { color: var(--gold-deep);}
.pp-cream .pp-textlink { color: var(--gold-deep);
  border-color: color-mix(in srgb, var(--gold-deep) 45%, transparent);}
.pp-cream .pp-textlink:hover { color: var(--ink); border-color: var(--ink);}
.pp-cream .pp-h2, .pp-cream .pp-h3, .pp-cream .pp-h4 { color: var(--ink);}

/* A dark button for cream ground: the same travelling gold seam the hero's
   primary wears, on an inverted face. The conic paints the border box, the
   face paints the padding box, and a transparent 1px border becomes the
   light's path. */
.btn--dark {
  color: #F4E8DA;
  border: 1px solid transparent;
  /* The full ring, always lit: the whole border wears gold, and a brighter
     spot orbits it. */
  background:
    linear-gradient(#1B1410, #1B1410) padding-box,
    conic-gradient(from var(--pf-angle),
      rgba(154, 118, 44, 0.55),
      var(--gold) 18%,
      rgba(154, 118, 44, 0.55) 36%,
      rgba(154, 118, 44, 0.55)) border-box;
  box-shadow: 0 0 22px -6px rgba(193, 154, 75, 0.45);
  animation: pf-orbit 4.6s linear infinite;
  transition: color 220ms var(--ease), box-shadow 320ms var(--ease);}
.btn--dark:hover,
.btn--dark:focus-visible {
  color: #F3D88E;
  animation-duration: 2.2s;
  box-shadow: 0 0 32px -4px rgba(193, 154, 75, 0.55);
  background:
    linear-gradient(#33281F, #33281F) padding-box,
    conic-gradient(from var(--pf-angle),
      rgba(193, 154, 75, 0.7),
      #E7CC84 18%,
      rgba(193, 154, 75, 0.7) 36%,
      rgba(193, 154, 75, 0.7)) border-box;}
@media (prefers-reduced-motion: reduce) {
  .btn--dark { animation: none; }
}

/* =========================================================================
   00 . HERO -- the opening frame
   ========================================================================= */
.pp-hero {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; align-content: center;
  min-height: 100svh;
  /* The bottom reserves a lane for the scroll cue, which otherwise stands
     on the authority line at narrow-to-mid widths. */
  padding-block: calc(var(--s-xxl) + 60px) calc(var(--s-lg) + 72px);
  background: var(--black-0);}

/* The portrait rises from the lower right and the headline owns the top:
   the two never overlap, so the type never has to fight the photograph.
   Measured before this change: the gold line crossed the face at 1.09:1. */
.pp-hero__art {
  position: absolute; right: 0; bottom: 0; top: auto;
  width: min(46vw, 680px); height: 86%;
  z-index: -2; overflow: clip;}
.pp-hero__art img {
  width: 100%; height: 106%;
  object-fit: cover; object-position: 50% 10%;
  display: block; filter: var(--grade) brightness(0.82);}
/* The photograph dissolves into the room at its left and top edges. */
.pp-hero__art::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(to right, var(--black-0) 0%, rgba(10, 8, 7, 0.82) 28%, transparent 64%),
    linear-gradient(to bottom, var(--black-0) 0%, rgba(10, 8, 7, 0.7) 30%, transparent 56%),
    linear-gradient(to top, rgba(10, 8, 7, 0.92) 0%, transparent 32%);}
.pp-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, var(--black-0) 0%, transparent 26%);}

.pp-hero__inner { position: relative;}

.pp-hero__title {
  margin-top: var(--s-md);
  font-size: clamp(3.2rem, 11.4vw, 10.6rem);
  font-weight: 800; line-height: 0.92; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--ink);}
.pp-hero__title.reveal { opacity: 1; transform: none;}
.pp-hero__title span {
  display: block; overflow: clip;
  padding-bottom: 0.09em; margin-bottom: -0.09em;}
.pp-hero__title span i {
  display: block; font-style: normal;
  transform: translateY(108%);
  transition: transform 1000ms var(--ease);}
.pp-hero__title.is-in span i { transform: none;}
.pp-hero__title.is-in span:nth-child(2) i { transition-delay: 110ms;}
.pp-hero__title.is-in span:nth-child(3) i { transition-delay: 220ms;}
/* The middle is the one line that is not like the others. */
.pp-hero__mid i { color: var(--gold); font-weight: 300; font-style: italic !important;}

.pp-hero__say { margin-top: var(--s-lg); max-width: 600px;}
.pp-hero__name {
  font-size: var(--t-lead); font-weight: 700; color: var(--ink);
  margin-bottom: 0.7em;}
/* A step above body: this is the page's opening statement, not a caption. */
.pp-hero__say p { font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.72; color: var(--ink-muted);}
.pp-hero__say p + p { margin-top: 0.9em;}

.pp-hero__actions { margin-top: var(--s-lg); align-items: center; gap: var(--s-md);}
.pp-hero__actions .pp-textlink { border-bottom-width: 1px;}

.pp-hero__authority {
  position: relative;
  margin-top: var(--s-lg);
  padding-top: var(--s-sm);
  font-size: var(--t-caption); letter-spacing: 0.08em;
  /* Brighter than the usual caption grey: this line's right end crosses the
     photograph's lower corner, and #8F8477 measured only 2.75:1 there. */
  color: #C7BBA9; max-width: 900px;}
/* The rule starts where the text starts: the container's left edge is its
   border box, a gutter to the left of the first glyph. */
.pp-hero__authority::before {
  content: ''; position: absolute; top: 0; left: var(--gutter);
  width: 64px; height: 1px; background: var(--gold);}

/* =========================================================================
   01 . THE BODY OF WORK -- an index, not a logo wall
   ========================================================================= */
.pp-record {
  background: var(--bg);
  padding-block: var(--s-xxl);}
.pp-record__head { display: grid; justify-items: start;}
/* One breath, one line: the lead may run the full container. */
.pp-record__head .pp-lead { margin-top: var(--s-md); max-width: none;}

.pp-record__rows { margin-top: var(--s-xl); display: grid; gap: 18px;}
/* The four entries are cards that shingle over one another as the page
   scrolls: each pins a little lower than the one before, so the next slides
   up and covers it. Pure position: sticky -- no script, perfect rewind. */
.pp-row {
  position: sticky; top: calc(148px + var(--i, 0) * 18px);
  display: grid; align-items: center; align-content: center;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 4px var(--s-md);
  min-height: 188px;
  padding: clamp(24px, 3vw, 38px);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 -22px 44px -30px rgba(0, 0, 0, 0.85),
              0 26px 52px -36px rgba(0, 0, 0, 0.55);}
.pp-row__num {
  font-size: var(--t-caption); color: var(--gold);
  letter-spacing: 0.18em; font-variant-numeric: tabular-nums;}
.pp-row__name {
  grid-column: 2;
  font-size: clamp(1.35rem, 2vw, 1.95rem); font-weight: 700;
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink);
  line-height: 1.1; text-wrap: balance;}
.pp-row__note {
  grid-column: 2; margin-top: 6px;
  font-size: var(--t-body); line-height: 1.65; color: var(--ink-muted);
  max-width: 56ch; text-wrap: pretty;}

/* Lives inside the index column, right under the last row. */
.pp-record__foot { margin-top: var(--s-md);}

@media (max-width: 760px) {
  .pp-row { grid-template-columns: 44px minmax(0, 1fr); }
  .pp-row__note { grid-column: 2; }
}

/* =========================================================================
   02 . THE MIDDLE -- the philosophy
   ========================================================================= */
.pp-middle {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--surface);
  padding-block: var(--s-xl) 0;}
/* One whisper of warmth. The room stays dark and clean: the reading light
   effect below is the whole show, and it needs a quiet stage. */
.pp-middle__glow {
  position: absolute; inset: -20%; z-index: -1; pointer-events: none;
  mix-blend-mode: screen;
  background:
    radial-gradient(30% 36% at 26% 32%, rgba(142, 59, 44, 0.12) 0%, transparent 68%),
    radial-gradient(24% 30% at 74% 66%, rgba(193, 154, 75, 0.08) 0%, transparent 66%);
  animation: pf-emberdrift 28s ease-in-out infinite alternate;}

.pp-middle__inner { display: grid; justify-items: center; text-align: center;}
.pp-middle__inner .pp-index { justify-self: center;}
/* ---- plain and quiet ----
   The philosophy's essentials at reading size. No pin, no choreography --
   the standard reveals carry it, and the cream plate below does the talking. */
.pp-middle__plain {
  display: grid; justify-items: center; text-align: center;
  gap: var(--s-md);
  margin-top: var(--s-lg);
  padding-bottom: var(--s-sm);}
.pp-middle__statement {
  max-width: 640px;
  font-size: clamp(1.125rem, 1.7vw, 1.45rem);
  font-weight: 500; line-height: 1.6; color: var(--ink);
  text-wrap: balance;}
.pp-middle__seqline {
  max-width: 560px;
  font-size: var(--t-body);
  font-weight: 600; line-height: 1.8; letter-spacing: 0.02em;
  color: var(--ink-muted); text-wrap: balance;}
/* The landing line as a gold neon tube: a bright core with rings of glow
   fading to ember. It flickers alight the way real neon strikes -- uneven
   -- then settles into a slow breath, forever. */
.pp-middle__endline {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem);
  font-weight: 400; font-style: italic; letter-spacing: 0.01em;
  color: #F3D88E;
  text-shadow:
    0 0 6px rgba(243, 216, 142, 0.9),
    0 0 18px rgba(193, 154, 75, 0.7),
    0 0 44px rgba(193, 154, 75, 0.45),
    0 0 90px rgba(142, 59, 44, 0.35);}
.pp-middle__endline.is-in {
  animation:
    pp-neon-strike 1.7s var(--ease) both,
    pp-neon-breathe 3.6s ease-in-out 1.7s infinite alternate;}
@keyframes pp-neon-strike {
  0%       { opacity: 0;    text-shadow: none; }
  7%       { opacity: 0.85; }
  10%      { opacity: 0.1;  text-shadow: none; }
  14%      { opacity: 0.9; }
  21%      { opacity: 0.25; text-shadow: 0 0 6px rgba(243, 216, 142, 0.4); }
  27%      { opacity: 1; }
  34%      { opacity: 0.6; }
  44%, 100% {
    opacity: 1;
    text-shadow:
      0 0 6px rgba(243, 216, 142, 0.9),
      0 0 18px rgba(193, 154, 75, 0.7),
      0 0 44px rgba(193, 154, 75, 0.45),
      0 0 90px rgba(142, 59, 44, 0.35);
  }
}
@keyframes pp-neon-breathe {
  from {
    text-shadow:
      0 0 6px rgba(243, 216, 142, 0.9),
      0 0 18px rgba(193, 154, 75, 0.7),
      0 0 44px rgba(193, 154, 75, 0.45),
      0 0 90px rgba(142, 59, 44, 0.35);
  }
  to {
    text-shadow:
      0 0 8px rgba(243, 216, 142, 1),
      0 0 26px rgba(193, 154, 75, 0.9),
      0 0 60px rgba(193, 154, 75, 0.6),
      0 0 120px rgba(142, 59, 44, 0.5);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pp-middle__endline.is-in { animation: none; }
}

/* The documented quote: a full-bleed cream plate. Black text, one gold dash.
   The first light in the page -- the middle produces it. */
.pp-quote {
  position: relative; isolation: isolate; overflow: clip;
  margin: var(--s-xl) 0 0; padding: var(--s-xl) var(--gutter);
  background: var(--cream); color: #1B1410;
  display: grid; justify-items: center; text-align: center;}
/* Warmth moving through the paper: two soft tints drifting, larger than the
   frame so the travel never walks an edge into view. */
.pp-quote::after {
  content: ''; position: absolute; inset: -28%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 42% at 24% 30%, rgba(193, 154, 75, 0.18) 0%, transparent 66%),
    radial-gradient(26% 36% at 76% 68%, rgba(126, 43, 33, 0.1) 0%, transparent 64%);
  animation: pf-emberdrift 24s ease-in-out infinite alternate;}

/* ---- the writing effect ----
   app.js splits the quote into characters; they surface in reading order
   once the plate reveals, like the sentence being set down. */
.pp-quote blockquote .qc { opacity: 0; }
.pp-quote.is-in blockquote .qc {
  opacity: 1;
  transition: opacity 60ms linear;
  transition-delay: calc(300ms + var(--qi) * 26ms);
}

.pp-quote__cta { margin-top: var(--s-md);}
.pp-quote blockquote { max-width: 900px;}
.pp-quote blockquote p {
  font-size: clamp(1.5rem, 3.6vw, 2.9rem);
  font-weight: 600; line-height: 1.18; letter-spacing: -0.015em;
  text-wrap: balance;}
.pp-quote figcaption {
  margin-top: var(--s-md);
  font-size: var(--t-caption); letter-spacing: 0.14em; text-transform: uppercase;
  color: #6E6152;}
.pp-quote figcaption::before {
  content: ''; display: block; width: 44px; height: 2px;
  margin: 0 auto var(--s-sm); background: var(--gold-deep);}

.pp-middle__foot {
  padding-block: var(--s-lg) var(--s-xl); background: var(--surface);
  display: grid; justify-items: center;}

/* ---- transitions between chapters ----
   The sentence is held by two gold threads instead of floating alone. */
.pp-transition {
  margin: 0; padding: var(--s-xl) var(--gutter);
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(14px, 2.4vw, 26px);
  text-align: center;
  font-size: clamp(1.35rem, 2.5vw, 2.1rem);
  font-weight: 300; font-style: italic; letter-spacing: 0.01em;
  line-height: 1.3;
  color: var(--ink);
  max-width: 1100px; margin-inline: auto;}
.pp-transition::before,
.pp-transition::after {
  content: ''; flex: none;
  width: clamp(36px, 7vw, 96px); height: 1px;}
.pp-transition::before { background: linear-gradient(to right, transparent, var(--gold));}
.pp-transition::after { background: linear-gradient(to left, transparent, var(--gold));}
/* =========================================================================
   03 . THE STORY -- the Porteo composition, whole
   The page inverts to cream; the crimson portrait stands solid on the
   left; the story reads as one tall statement on the right, filling from
   faint to ink with the scroll (initStoryFill).
   ========================================================================= */
.pp-story {
  /* A warmer white than the quote plate directly above, so the two light
     grounds read as different rooms; a hairline marks the doorway. */
  background: #FBF4E9;
  border-top: 1px solid #E4D5BF;
  padding-block: var(--s-xxl);}
.pp-story__grid {
  display: grid; gap: var(--s-xl);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;}
@media (min-width: 960px) {
  .pp-story__grid { grid-template-columns: minmax(280px, 0.62fr) minmax(0, 1fr); }
}

/* the portrait: a solid crimson block, pinned while the statement scrolls */
.pp-story__portrait {
  margin: 0; position: sticky; top: 140px;
  overflow: clip; border-radius: 6px;
  box-shadow: 0 40px 80px -44px rgba(27, 20, 16, 0.55);}
.pp-story__portrait img {
  width: 100%; height: auto; display: block;}

.pp-story__content { display: grid; justify-items: start;}
.pp-story__title { font-size: clamp(1.7rem, 3vw, 2.7rem);}

/* the statement: big continuous reading, Porteo scale */
.pp-story__body { margin-top: var(--s-lg); max-width: 60ch;}
.pp-story__body p {
  font-size: clamp(1.2rem, 1.85vw, 1.65rem);
  font-weight: 600; line-height: 1.55; letter-spacing: -0.008em;
  color: var(--ink); text-wrap: pretty;}
.pp-story__body p + p { margin-top: 1.05em;}
.pp-story__break {
  font-size: clamp(1.45rem, 2.4vw, 2.05rem) !important; font-weight: 800 !important;}
.pp-story .btn-row { margin-top: var(--s-lg);}

@media (max-width: 900px) {
  /* 100vw ignora a largura da barra e vazava alguns px no celular. */
  .pp-hero__art { width: 100%; height: 46%; opacity: 0.55; }
  /* O retrato desce e enquadra o rosto, em vez de passar atras do texto. */
  .pp-hero__art img { height: 100%; object-position: 50% 16%; }
  .pp-hero__art::after {
    background:
      linear-gradient(to bottom, var(--black-0) 0%, rgba(10, 8, 7, 0.82) 20%, transparent 56%),
      linear-gradient(to top, rgba(10, 8, 7, 0.9) 0%, transparent 34%);
  }
  .pp-story__portrait { position: static; max-width: 380px; }
}
/* =========================================================================
   04 . FAITH. DISCIPLINE. SIMPLICITY. -- sticky panels
   Each pillar is a full room. They stack: the next slides over the last,
   so the reader holds one word at a time. No scroll-jacking -- position:
   sticky does all of it, and with reduced motion it reads as plain flow.
   ========================================================================= */
.pp-pillars { background: var(--bg);}
.pp-pillars__head {
  padding-block: var(--s-xxl) var(--s-xl);
  display: grid; justify-items: start;}
.pp-pillars__head .pp-lead { margin-top: var(--s-md);}

.pp-pillar {
  position: sticky; top: 0;
  min-height: 100svh;
  display: grid; align-items: center;
  border-top: 1px solid var(--line);
  /* Three blacks, one per pillar: the same room getting lighter. */
  background: var(--black-0);}
.pp-pillar:nth-child(2) { background: var(--surface);}
.pp-pillar:nth-child(3) { background: var(--surface-raised);}

.pp-pillar__inner {
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-md) var(--s-xl);
  padding-block: var(--s-xl);}
.pp-pillar__num {
  font-size: var(--t-caption); color: var(--gold); letter-spacing: 0.2em;}
.pp-pillar__word {
  font-size: clamp(3.4rem, 12.5vw, 11.5rem);
  font-weight: 800; line-height: 0.9; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--ink);}
.pp-pillar__body { max-width: 660px;}
.pp-pillar__lead {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.45; color: var(--ink); font-weight: 600;}
.pp-pillar__body p { font-size: clamp(1.0625rem, 1.45vw, 1.3rem); line-height: 1.7; color: var(--ink-muted);}
.pp-pillar__body p + p { margin-top: 1em;}
.pp-pillar__lead { color: var(--ink);}
.pp-pillar__close { font-style: italic; color: var(--gold) !important;}

/* One column always: the giant word owns its full row (SIMPLICITY at
   display size overflows any half-column and lands on the copy), and the
   body reads beneath it. */
.pp-pillar__inner { gap: clamp(18px, 3vh, 34px); }
.pp-pillar__word { max-width: 100%; overflow: clip; }

.pp-pillars__foot { padding-block: var(--s-xl); background: var(--surface-raised);}

@media (prefers-reduced-motion: reduce) {
  .pp-pillar { position: static; min-height: 0; }
}

/* =========================================================================
   05 . WHAT I BELIEVE -- one subject, twelve predicates
   The subject is set once, large, and pinned; the twelve lines pass beside
   it and take the ink as the reader reaches each one (--rp from the ride
   engine, desktop only). A gold rule under the subject fills with the
   progress. Below 900px nothing is pinned and every line is simply read.
   ========================================================================= */
.pp-believe { padding-block: var(--s-xxl); overflow: clip; }
.pp-believe__inner {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--s-lg) clamp(40px, 6vw, 110px);
  align-items: start;
}
@media (min-width: 901px) {
  .pp-believe__inner { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); }
  .pp-creed__rail { position: sticky; top: 140px; }
}
.pp-creed__rail { display: grid; justify-items: start; }
.pp-creed__subject {
  font-size: clamp(3.2rem, 7.4vw, 7rem) !important;
  line-height: 0.9; letter-spacing: -0.03em;
}
.pp-creed__meter {
  display: block; width: min(100%, 320px); height: 2px;
  margin-top: clamp(18px, 2.6vh, 28px);
  background: var(--line);
}
.pp-creed__meter i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transform: scaleX(var(--m, 1)); transform-origin: left;
}
.pp-believe.is-ride .pp-creed__meter i { --m: clamp(0, calc((var(--rp, 0) - 0.02) * 1.15), 1); }
.pp-creed__foot { margin-top: var(--s-lg); }

.pp-creed {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0;
}
.pp-creed__line {
  position: relative;
  padding: clamp(18px, 2.6vh, 28px) 0 clamp(18px, 2.6vh, 28px) clamp(22px, 2.4vw, 34px);
  border-top: 1px solid var(--line);
  font-size: clamp(1.25rem, 1.9vw, 1.85rem); line-height: 1.35; font-weight: 500;
  letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty;
  transition: opacity 320ms var(--ease), color 320ms var(--ease);
}
.pp-creed__line:last-child { border-bottom: 1px solid var(--line); }
/* the tick: a short gold dash that grows as the line takes the ink */
.pp-creed__line::before {
  content: ''; position: absolute; left: 0; top: calc(clamp(18px, 2.6vh, 28px) + 0.62em);
  width: 12px; height: 2px; background: var(--gold);
  transform: scaleX(var(--k, 1)); transform-origin: left;
}
.pp-creed__line--last { font-weight: 700; color: var(--gold-deep); }
/* the subject is said once, large; each line still carries it for assistive
   tech only -- the theme has no global sr-only rule, so it is stated here */
.pp-creed .screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap; clip-path: inset(50%);
}

/* scroll grammar, desktop only: a line is faint until the reader reaches it */
.pp-believe.is-ride .pp-creed__line {
  --p: clamp(0, calc((var(--rp, 0) - var(--t, 0)) * 9), 1);
  --k: var(--p);
  opacity: calc(0.22 + 0.78 * var(--p));
  transform: translateX(calc((1 - var(--p)) * 10px));
}

/* the pointer lifts one line; the others step back -- after the ride rule */
.pp-creed:has(.pp-creed__line:hover) .pp-creed__line:not(:hover) { opacity: 0.35; }
.pp-creed__line:hover { color: var(--gold-deep); }

@media (prefers-reduced-motion: reduce) {
  .pp-believe.is-ride .pp-creed__line { opacity: 1; transform: none; --k: 1; }
  .pp-believe.is-ride .pp-creed__meter i { --m: 1; }
}

/* =========================================================================
   06 . COACHING -- the decision
   ========================================================================= */
.pp-coach {
  background: var(--black-0);
  padding-block: var(--s-xxl);}
.pp-coach__inner { display: grid; justify-items: start;}
.pp-coach__q {
  margin-top: var(--s-lg);
  font-size: clamp(1.7rem, 3.8vw, 3rem);
  font-weight: 300; font-style: italic; letter-spacing: -0.01em;
  color: var(--gold); line-height: 1.1;}
.pp-coach .pp-prose { margin-top: var(--s-md);}
.pp-coach__honest { font-weight: 600; color: var(--ink) !important;}
.pp-coach .btn-row { margin-top: var(--s-lg);}

/* =========================================================================
   07 . CONVERSATIONS -- the editorial index
   ========================================================================= */
/* The card train, after the Noktis reference: a pinned cream screen where
   the statement holds the middle and the three conversations -- oversized
   playing cards in the three brand grounds -- ride across it on scroll.
   Base CSS is the static state (statement, then the fanned row); initTalks
   adds .is-live, the pin, and the travel. Nothing here can fail blank. */
.pp-talks {
  background: var(--cream);
  padding-block: var(--s-xxl) 0;
  overflow: clip;
}
.pp-talks__head { display: grid; justify-items: start; }
.pp-talks__head .pp-prose { margin-top: var(--s-lg); }
/* the head prose runs bigger here: it shares the row with the photo and
   has the room to speak up */
.pp-talks__head .pp-prose p {
  font-size: clamp(1.1rem, 1.55vw, 1.4rem);
  line-height: 1.6;
}

/* ---- the candid beside the words ----
   A tilted card in the train's own language: warm-white mat, the buttons'
   orbiting gold ring as the border, a slow float, and the sheen walking
   the frame. Hover stands the card up and warms the grade. */
@media (min-width: 1020px) {
  .pp-talks__head {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: var(--s-xl);
    align-items: center;
  }
  .pp-talks__head .pp-index,
  .pp-talks__head .pp-eyebrow { grid-column: 1 / -1; }
  .pp-talks__head .pp-prose { grid-column: 1; }
  .pp-talks__topics { grid-column: 1; }
  .pp-talks__photo { grid-column: 2; grid-row: 3 / span 2; justify-self: center; margin-top: var(--s-lg); }
}

/* ---- the topic index ----
   The nouns from the paragraph, standing in a row: gold-dotted pills that
   arrive one by one and answer the pointer. */
.pp-talks__topics {
  list-style: none; margin: var(--s-lg) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 560px;
}
.pp-talks__topics li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--t-small); letter-spacing: 0.04em; color: var(--ink-muted);
  transition: border-color var(--dur-std) var(--ease),
              color var(--dur-std) var(--ease),
              translate var(--dur-std) var(--ease);
}
.pp-talks__topics li::before {
  content: ''; width: 6px; height: 6px; flex: none;
  border-radius: 50%; background: var(--gold-deep);
}
.pp-talks__topics li:hover {
  border-color: var(--gold-deep); color: var(--ink); translate: 0 -2px;
}
/* the pills stagger in behind the block's own reveal */
.js .pp-talks__topics li {
  opacity: 0; translate: 0 12px;
  transition: opacity 500ms var(--ease), translate 500ms var(--ease),
              border-color var(--dur-std) var(--ease), color var(--dur-std) var(--ease);
}
.js .pp-talks__topics.is-in li { opacity: 1; translate: 0 0; }
.js .pp-talks__topics.is-in li:nth-child(2) { transition-delay: 60ms; }
.js .pp-talks__topics.is-in li:nth-child(3) { transition-delay: 120ms; }
.js .pp-talks__topics.is-in li:nth-child(4) { transition-delay: 180ms; }
.js .pp-talks__topics.is-in li:nth-child(5) { transition-delay: 240ms; }
.js .pp-talks__topics.is-in li:nth-child(6) { transition-delay: 300ms; }
.js .pp-talks__topics.is-in li:nth-child(7) { transition-delay: 360ms; }

.pp-talks__photo {
  position: relative;
  margin: var(--s-lg) auto 0;
  width: min(100%, 480px);
  rotate: 3.2deg;
  transition: rotate 600ms var(--ease);
  animation: pp-photo-float 7.5s ease-in-out infinite;
}
.pp-talks__photo:hover { rotate: 0.5deg; }
/* the echo: an empty gold frame drifting behind the card */
.pp-talks__photo::before {
  content: ''; position: absolute;
  inset: 16px -16px -16px 16px;
  border: 1px solid rgba(154, 118, 44, 0.45);
  border-radius: clamp(18px, 2vw, 26px);
  rotate: -2.6deg;
  pointer-events: none;
}
@keyframes pp-photo-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -12px; }
}
.pp-talks__photo-frame {
  display: block; position: relative; z-index: 1; overflow: clip;
  padding: clamp(10px, 1.2vw, 14px);
  /* the polaroid strip: the mat grows a floor for the caption */
  padding-bottom: clamp(54px, 5vw, 66px);
  border-radius: clamp(18px, 2vw, 26px);
  border: 1.5px solid transparent;
  background:
    linear-gradient(#FFFCF6, #FFFCF6) padding-box,
    conic-gradient(from var(--pf-angle),
      rgba(154, 118, 44, 0.5), var(--gold) 20%,
      rgba(154, 118, 44, 0.5) 38%, rgba(154, 118, 44, 0.5)) border-box;
  animation: pf-orbit 6.5s linear infinite;
  box-shadow: 0 46px 84px -42px rgba(27, 20, 16, 0.55);
}
.pp-talks__photo-frame img {
  width: 100%; height: auto; display: block;
  /* a tighter cut: favour the face and the book, drop the sidewalk */
  aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 24%;
  border-radius: clamp(10px, 1.2vw, 16px);
  filter: saturate(0.92) contrast(1.05) brightness(0.99);
  transition: filter 600ms var(--ease), scale 600ms var(--ease);
}
.pp-talks__photo:hover .pp-talks__photo-frame img {
  filter: saturate(1.04) contrast(1.02);
  scale: 1.03;
}
/* the sheen walks the mat too */
.pp-talks__photo-frame::after {
  content: ''; position: absolute; top: -25%; left: -80%;
  width: 36%; height: 150%;
  background: linear-gradient(105deg,
    transparent 0%, rgba(255, 250, 240, 0.2) 50%, transparent 100%);
  transform: skewX(-16deg);
  animation: pp-sheen 6.8s ease-in-out 0.8s infinite;
  pointer-events: none;
}

/* the caption on the polaroid floor */
.pp-talks__photo-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  height: clamp(54px, 5vw, 66px);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-inline: clamp(18px, 2.2vw, 28px);
  pointer-events: none;
}
.pp-talks__photo-cap b {
  font-size: 1rem; font-weight: 800; letter-spacing: 0.02em;
  color: #1B1410; white-space: nowrap;
}
.pp-talks__photo-cap span {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6E6152;
  display: inline-flex; align-items: center; gap: 8px;
  text-align: right;
}
.pp-talks__photo-cap span i {
  font-style: normal; color: var(--gold-deep); letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pp-talks__photo { rotate: 0deg; animation: none; transition: none; }
  .pp-talks__photo::before { rotate: 0deg; }
  .pp-talks__photo-frame { animation: none; }
  .pp-talks__photo-frame::after { display: none; }
  .pp-talks__photo-frame img,
  .pp-talks__photo:hover .pp-talks__photo-frame img { scale: none; transition: none; }
  .js .pp-talks__topics li, .js .pp-talks__topics.is-in li {
    opacity: 1; translate: none; transition: none;
  }
  .pp-talks__topics li:hover { translate: none; }
}

.pp-talks__scene { margin-top: 0; }
.pp-talks__scene.is-live { height: 320svh; }
.pp-talks__stage {
  position: relative;
  padding-block: var(--s-md) var(--s-xxl);
  display: grid; place-items: center;
}
/* the pinned screen centres the statement; a small upward bias keeps the
   air above it from reading as a hole */
.is-live .pp-talks__giant { translate: 0 -4svh; }
.is-live .pp-talks__stage {
  position: sticky; top: 0;
  height: 100svh; padding-block: 0;
  overflow: clip;
}
.pp-talks__giant {
  text-align: center;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: 1.04; letter-spacing: -0.02em;
  max-width: 24ch; margin-inline: auto;
  padding-inline: var(--s-md);
}

/* static = a fanned row under the statement; live = an absolute layer the
   scroll drags across the stage. --tp comes from initTalks (0..1). */
.pp-talks__train {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 40px);
  margin-top: var(--s-xl);
  padding-inline: var(--s-md);
}
.is-live .pp-talks__train {
  position: absolute; inset: 0;
  margin-top: 0; padding-inline: 0;
  flex-wrap: nowrap; justify-content: flex-start;
  will-change: transform;
  transform: translateX(calc((1 - var(--tp, 0)) * 112vw - var(--tp, 0) * 112%));
}

.pp-tcard {
  flex: none;
  width: clamp(240px, 26vw, 380px);
  aspect-ratio: 0.72;
  border-radius: clamp(18px, 2vw, 26px);
  padding: clamp(22px, 2.4vw, 34px);
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; text-align: center;
  text-decoration: none;
  box-shadow: 0 40px 70px -34px rgba(27, 20, 16, 0.5);
  transition: translate var(--dur-std) var(--ease),
              box-shadow var(--dur-std) var(--ease);
}
.pp-tcard:hover {
  translate: 0 -10px;
  box-shadow: 0 54px 84px -36px rgba(27, 20, 16, 0.55);
}
.pp-tcard:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 4px; }
/* one card per brand ground; each holds its own ink */
.pp-tcard:nth-child(1) { rotate: -7deg;  background: var(--gold); color: #1B1410; }
.pp-tcard:nth-child(2) { rotate: 4.5deg; background: #1B1410; color: var(--cream); margin-top: clamp(12px, 2.4vw, 40px); }
.pp-tcard:nth-child(3) { rotate: -5deg;  background: #5F241C; color: var(--cream); }
.pp-tcard__show {
  font-size: var(--t-eyebrow); font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; line-height: 1.4;
}
.pp-tcard__num {
  font-size: clamp(4.6rem, 9.5vw, 8.5rem); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pp-tcard__foot { display: grid; gap: 8px; }
.pp-tcard__foot b {
  font-size: clamp(0.85rem, 1.1vw, 1rem); font-weight: 700; line-height: 1.4;
  text-wrap: balance;
}
.pp-tcard__foot i {
  font-style: normal; font-size: var(--t-caption);
  letter-spacing: 0.08em; opacity: 0.78;
}

@media (prefers-reduced-motion: reduce) {
  .pp-tcard, .pp-tcard:hover { translate: none; transition: none; }
}

/* =========================================================================
   08 . IDEAS -- cream again
   ========================================================================= */
.pp-ideas { padding-block: var(--s-xxl);}
.pp-ideas__inner { display: grid; justify-items: start;}
.pp-ideas .pp-prose { margin-top: var(--s-lg);}
.pp-ideas__pivot {
  font-size: clamp(1.25rem, 2.4vw, 1.8rem); font-weight: 600;
  line-height: 1.3; color: var(--ink) !important;}
.pp-ideas .btn-row { margin-top: var(--s-lg);}

/* ---- the graphic bento beside the words (v9.5) ----
   Three dark tiles on the cream: the real count of Forbes bylines with a
   rising bar rhythm, the section's own sentence drawn as a curve (the
   habit climbing into the consequence), and the four nouns the paragraph
   names. Everything enters on the block's reveal; without JS it all just
   stands there, finished. */
@media (min-width: 1020px) {
  .pp-ideas__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: var(--s-xl);
  }
  .pp-ideas__inner .pp-index,
  .pp-ideas__inner .pp-eyebrow,
  .pp-ideas__inner .pp-h2 { grid-column: 1 / -1; }
  .pp-ideas__inner .pp-prose,
  .pp-ideas__inner .btn-row { grid-column: 1; }
  .pp-ibento { grid-column: 2; grid-row: 4 / span 2; align-self: center; }
}
.pp-ibento {
  width: 100%; justify-self: stretch;
  margin-top: var(--s-lg);
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
}
.pp-ibento__tile {
  position: relative; overflow: clip;
  background: #1B1410;
  border: 1px solid rgba(193, 154, 75, 0.24);
  border-radius: 12px;
  padding: clamp(18px, 2vw, 26px);
}
/* the same sheen the other bentos wear */
.pp-ibento__tile::after {
  content: ''; position: absolute; top: -20%; left: -70%;
  width: 34%; height: 140%;
  background: linear-gradient(105deg,
    transparent 0%, rgba(244, 232, 218, 0.07) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: pp-sheen 6.6s ease-in-out infinite;
  pointer-events: none;
}
.pp-ibento__tile:nth-child(2)::after { animation-delay: 2.2s; }
.pp-ibento__tile:nth-child(3)::after { animation-delay: 4.4s; }

/* tile 1: the count and the rising bars */
.pp-ibento__tile--count {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto 1fr; align-items: end;
  column-gap: 22px; row-gap: 12px;
}
.pp-ibento__big b {
  font-size: clamp(3.2rem, 4.6vw, 4.6rem); font-weight: 800;
  line-height: 0.9; color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.pp-ibento__bars {
  display: flex; align-items: flex-end; gap: clamp(6px, 0.8vw, 10px);
  height: clamp(58px, 6vw, 84px); justify-self: end;
}
.pp-ibento__bars i {
  width: clamp(9px, 1.1vw, 15px);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--gold), #7A5E20);
  transform-origin: bottom;
  transition: transform 700ms var(--ease);
}
.pp-ibento__bars i:nth-child(1) { height: 22%; --bi: 0; }
.pp-ibento__bars i:nth-child(2) { height: 31%; --bi: 1; }
.pp-ibento__bars i:nth-child(3) { height: 40%; --bi: 2; }
.pp-ibento__bars i:nth-child(4) { height: 50%; --bi: 3; }
.pp-ibento__bars i:nth-child(5) { height: 60%; --bi: 4; }
.pp-ibento__bars i:nth-child(6) { height: 71%; --bi: 5; }
.pp-ibento__bars i:nth-child(7) { height: 84%; --bi: 6; }
.pp-ibento__bars i:nth-child(8) { height: 100%; --bi: 7; }
.js .pp-ibento .pp-ibento__bars i {
  transform: scaleY(0);
  transition-delay: calc(var(--bi) * 70ms + 200ms);
}
.js .pp-ibento.is-in .pp-ibento__bars i { transform: scaleY(1); }
.pp-ibento.is-in .pp-ibento__bars i {
  animation: pp-ibar 3.4s ease-in-out calc(var(--bi) * 0.22s + 1.4s) infinite;
}
@keyframes pp-ibar {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.45); }
}
.pp-ibento__label {
  grid-column: 1 / -1;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: #A79B8C;
}

/* tile 2: the sentence as a curve */
.pp-ibento__tile--curve svg { width: 100%; height: auto; display: block; }
.pp-ibento__gridline { stroke: rgba(244, 232, 218, 0.08); stroke-width: 1; fill: none; }
.pp-ibento__line {
  stroke: var(--gold); stroke-width: 2.5; fill: none; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
}
.js .pp-ibento .pp-ibento__line {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1600ms var(--ease) 300ms;
}
.js .pp-ibento.is-in .pp-ibento__line { stroke-dashoffset: 0; }
.pp-ibento__dot { fill: var(--gold); }
.js .pp-ibento .pp-ibento__dot { opacity: 0; transition: opacity 400ms var(--ease) 1800ms; }
.js .pp-ibento.is-in .pp-ibento__dot { opacity: 1; }
.pp-ibento.is-in .pp-ibento__dot { animation: pp-idot 2.6s ease-in-out 2.2s infinite; }
@keyframes pp-idot {
  0%, 100% { opacity: 1; filter: none; }
  50%      { opacity: 0.55; filter: drop-shadow(0 0 6px rgba(193, 154, 75, 0.9)); }
}
.pp-ibento__axis {
  margin-top: 12px;
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: #A79B8C;
}
.pp-ibento__axis em { font-style: normal; }
.pp-ibento__axis em:last-child { color: var(--gold); }

/* tile 3: the four nouns */
.pp-ibento__tile--words { display: grid; align-content: center; gap: 12px; }
.pp-ibento__tile--words span {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9375rem; font-weight: 700; color: #EFE5D6;
  transition: color var(--dur-std) var(--ease);
}
.pp-ibento__tile--words span::before {
  content: ''; width: 6px; height: 6px; flex: none;
  border-radius: 50%; background: var(--gold); opacity: 0.7;
}
.pp-ibento__tile--words span:hover { color: var(--gold); }
.js .pp-ibento .pp-ibento__tile--words span {
  opacity: 0; translate: 0 10px;
  transition: opacity 500ms var(--ease), translate 500ms var(--ease), color var(--dur-std) var(--ease);
}
.js .pp-ibento.is-in .pp-ibento__tile--words span { opacity: 1; translate: 0 0; }
.js .pp-ibento.is-in .pp-ibento__tile--words span:nth-child(2) { transition-delay: 90ms; }
.js .pp-ibento.is-in .pp-ibento__tile--words span:nth-child(3) { transition-delay: 180ms; }
.js .pp-ibento.is-in .pp-ibento__tile--words span:nth-child(4) { transition-delay: 270ms; }

@media (max-width: 560px) {
  .pp-ibento { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-ibento__tile::after { display: none; }
  .js .pp-ibento .pp-ibento__bars i,
  .js .pp-ibento.is-in .pp-ibento__bars i,
  .pp-ibento.is-in .pp-ibento__bars i { transform: none; transition: none; animation: none; }
  .js .pp-ibento .pp-ibento__line,
  .js .pp-ibento.is-in .pp-ibento__line { stroke-dashoffset: 0; transition: none; }
  .js .pp-ibento .pp-ibento__dot,
  .pp-ibento.is-in .pp-ibento__dot { opacity: 1; transition: none; animation: none; }
  .js .pp-ibento .pp-ibento__tile--words span,
  .js .pp-ibento.is-in .pp-ibento__tile--words span { opacity: 1; translate: none; transition: none; }
}

/* =========================================================================
   09 . LEGACY -- the mark
   ========================================================================= */
.pp-legacy {
  position: relative;
  background: var(--bg);
  padding-block: var(--s-xxl);
  overflow: clip;}
.pp-legacy__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center;}

/* ---- the aurora (v9.8): flowing ribbons of the brand's light ----
   aurora.js paints the whole thing in one WebGL pass (fbm ribbons on a
   -18deg current, travelling highlight, grain, vignette, luminance
   ceiling). This CSS is only the still fallback: the same palette as a
   quiet pool for no-JS, no-WebGL, and reduced motion. */
.pp-aurora {
  position: absolute; inset: 0;
  overflow: clip; pointer-events: none;
  background:
    radial-gradient(64% 84% at 16% 18%, rgba(95, 36, 28, 0.42), transparent 70%),
    radial-gradient(52% 72% at 84% 80%, rgba(193, 154, 75, 0.22), transparent 70%),
    radial-gradient(46% 60% at 64% 6%, rgba(122, 94, 32, 0.28), transparent 70%);
}
.pp-aurora canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%; display: block;
}
/* the veil over the light: the aurora reads as an undercurrent, not a show */
.pp-aurora::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(10, 8, 7, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  /* aurora.js never boots under reduced motion; hide the dead canvas so
     the still pool shows through */
  .pp-aurora canvas { display: none; }
}
.pp-legacy__inner .pp-h2 { max-width: 18ch;}
.pp-legacy .pp-prose { margin-top: var(--s-lg); text-align: center;}
/* the words carry the section: they run bigger here, and never strand a
   last word alone on its line */
.pp-legacy .pp-prose p {
  font-size: clamp(1.1rem, 1.55vw, 1.4rem);
  line-height: 1.6;
  text-wrap: pretty;
  /* near-white over the aurora: the muted ink reads dim against the light */
  color: #FFF9F0;
}
.pp-legacy .pp-prose p.pp-legacy__close {
  font-weight: 600; color: var(--gold) !important; font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.5;}

/* ---- the stage (v9.6): duality flanks the mark ----
   The three pairs from the first paragraph stand on the two shores and the
   strokes meet in the middle between them. Decorative duplicates of the
   prose, so they are aria-hidden and vanish below 700px. */
.pp-legacy__stage {
  position: relative;
  margin-top: var(--s-lg);
  width: min(900px, 100%);
  display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: clamp(18px, 4vw, 64px);
}
.pp-legacy__halo {
  position: absolute; inset: -14% -4%;
  background: radial-gradient(closest-side, rgba(193, 154, 75, 0.13), transparent 72%);
  animation: pp-halo-breathe 6.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pp-halo-breathe {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}
.pp-legacy__side {
  display: grid; gap: clamp(18px, 3.4vh, 36px);
  position: relative; z-index: 1;
}
.pp-legacy__side--l { justify-items: end; text-align: right; }
.pp-legacy__side--r { justify-items: start; text-align: left; }
.pp-legacy__side em {
  font-style: italic; font-weight: 300;
  font-size: clamp(1rem, 1.7vw, 1.4rem); letter-spacing: 0.02em;
  color: var(--ink-muted);
}
/* the words arrive from their own shores as the strokes draw */
.js .pp-legacy__stage .pp-legacy__side em {
  opacity: 0;
  transition: opacity 700ms var(--ease), translate 700ms var(--ease);
}
.js .pp-legacy__stage .pp-legacy__side--l em { translate: -16px 0; }
.js .pp-legacy__stage .pp-legacy__side--r em { translate: 16px 0; }
.js .pp-legacy__stage.is-in .pp-legacy__side em { opacity: 1; translate: 0 0; }
.js .pp-legacy__stage.is-in .pp-legacy__side em:nth-child(1) { transition-delay: 400ms; }
.js .pp-legacy__stage.is-in .pp-legacy__side em:nth-child(2) { transition-delay: 650ms; }
.js .pp-legacy__stage.is-in .pp-legacy__side em:nth-child(3) { transition-delay: 900ms; }

/* two mirrored strokes that meet at the center: drawn, not decorated */
.pp-legacy__mark { margin: 0; width: min(340px, 52vw); position: relative; z-index: 1;}
.pp-legacy__mark svg { display: block; width: 100%; height: auto;
  fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round;}
.pp-legacy__mark svg path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1500ms var(--ease) 200ms;}
.is-in .pp-legacy__mark svg path,
.pp-legacy__mark.is-in svg path { stroke-dashoffset: 0;}
.pp-legacy__mark svg circle {
  fill: var(--gold); stroke: none; opacity: 0;
  transition: opacity 500ms var(--ease) 1500ms;}
.is-in .pp-legacy__mark svg circle,
.pp-legacy__mark.is-in svg circle { opacity: 1;}
/* the spark at the meeting point keeps breathing once it lands */
.is-in .pp-legacy__mark svg circle {
  animation: pp-mark-spark 3s ease-in-out 2.2s infinite;
}
@keyframes pp-mark-spark {
  0%, 100% { filter: none; }
  50%      { filter: drop-shadow(0 0 7px rgba(193, 154, 75, 0.95)); }
}

/* the daughters hold the two legs */
.pp-legacy__names {
  grid-column: 2; margin: 10px 0 0;
  width: 100%;
  display: flex; justify-content: space-between;
  padding-inline: 15%;
}
.pp-legacy__names span {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold);
}
.js .pp-legacy__stage .pp-legacy__names span {
  opacity: 0; translate: 0 8px;
  transition: opacity 600ms var(--ease), translate 600ms var(--ease);
}
.js .pp-legacy__stage.is-in .pp-legacy__names span { opacity: 1; translate: 0 0; }
.js .pp-legacy__stage.is-in .pp-legacy__names span:nth-child(1) { transition-delay: 1500ms; }
.js .pp-legacy__stage.is-in .pp-legacy__names span:nth-child(2) { transition-delay: 1650ms; }

@media (max-width: 700px) {
  .pp-legacy__side { display: none; }
  .pp-legacy__stage { grid-template-columns: 1fr; justify-items: center; }
  .pp-legacy__names { grid-column: 1; width: min(340px, 62vw); }
  .pp-legacy__mark { width: min(340px, 62vw); }
}

/* ---- the three questions as three standing tiles ----
   Numbered, framed, and flipping up from the floor one by one -- three
   doors instead of three lines. */
.pp-legacy__qs {
  list-style: none; margin: var(--s-lg) auto 0; padding: 0;
  counter-reset: pq;
  display: grid; gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%; max-width: 1020px;
  perspective: 1100px;
}
.pp-legacy__qs li {
  position: relative; overflow: clip;
  padding: clamp(22px, 2.4vw, 34px);
  background: #FBF4E9;
  border: 1px solid #E8DAC4;
  border-radius: 12px;
  font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem); line-height: 1.5;
  color: #1B1410;
  text-wrap: balance;
  box-shadow: 0 30px 56px -34px rgba(0, 0, 0, 0.6);
  transition: translate var(--dur-std) var(--ease),
              border-color var(--dur-std) var(--ease);
}
.pp-legacy__qs li::before {
  counter-increment: pq;
  content: '0' counter(pq);
  display: block; margin-bottom: 14px;
  font-style: normal; font-weight: 800;
  font-size: 0.75rem; letter-spacing: 0.22em;
  color: var(--gold-deep);
  font-variant-numeric: tabular-nums;
}
.pp-legacy__qs li:hover {
  translate: 0 -5px;
  border-color: rgba(122, 94, 32, 0.6);
}
/* the sheen crosses each door on its own clock -- a gold gleam on cream */
.pp-legacy__qs li::after {
  content: ''; position: absolute; top: -20%; left: -70%;
  width: 34%; height: 140%;
  background: linear-gradient(105deg,
    transparent 0%, rgba(193, 154, 75, 0.12) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: pp-sheen 7s ease-in-out infinite;
  pointer-events: none;
}
.pp-legacy__qs li:nth-child(2)::after { animation-delay: 2.3s; }
.pp-legacy__qs li:nth-child(3)::after { animation-delay: 4.6s; }
/* the flip-up entrance */
.js .pp-legacy__qs li {
  opacity: 0;
  transform: rotateX(-26deg) translateY(26px);
  transform-origin: 50% 100%;
  transition: opacity 700ms var(--ease), transform 700ms var(--ease),
              translate var(--dur-std) var(--ease),
              border-color var(--dur-std) var(--ease);
}
.js .pp-legacy__qs.is-in li { opacity: 1; transform: none; }
.js .pp-legacy__qs.is-in li:nth-child(2) { transition-delay: 170ms; }
.js .pp-legacy__qs.is-in li:nth-child(3) { transition-delay: 340ms; }
@media (max-width: 900px) {
  .pp-legacy__qs { grid-template-columns: 1fr; max-width: 560px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-legacy__halo { animation: none; }
  .is-in .pp-legacy__mark svg circle { animation: none; }
  .js .pp-legacy__stage .pp-legacy__side em,
  .js .pp-legacy__stage.is-in .pp-legacy__side em,
  .js .pp-legacy__stage .pp-legacy__names span,
  .js .pp-legacy__stage.is-in .pp-legacy__names span,
  .js .pp-legacy__qs li, .js .pp-legacy__qs.is-in li {
    opacity: 1; translate: none; transform: none; transition: none;
  }
  .pp-legacy__qs li::after { display: none; }
  .pp-legacy__qs li:hover { translate: none; }
}

/* =========================================================================
   10 . IMPACT
   ========================================================================= */
/* The section pins while the cream chapter after it rises and covers it.
   initImpactPin measures the overshoot and writes --pin-top (negative when
   the section is taller than the screen, so it finishes reading before it
   sticks). Without JS top stays auto and sticky never engages -- the page
   just stacks. */
.pp-impact {
  position: sticky; top: var(--pin-top, auto); z-index: 0;
  background: var(--surface);
  padding-block: var(--s-xxl) 0;}
/* Everything after the pinned impact section must be positioned above it,
   or the held section bleeds through non-positioned siblings (the ticker
   showed the pinned photographs through its own ground). The general
   sibling rule catches ticks and anything added later. */
.pp-tools, .pp-note, .pp-close,
.pp-impact ~ * { position: relative; z-index: 1; }
.pp-rebuild { box-shadow: 0 -34px 70px -30px rgba(0, 0, 0, 0.5); }
.pp-impact__inner { display: grid; justify-items: start;}
.pp-impact .pp-prose { margin-top: var(--s-lg);}
.pp-impact .pp-prose p {
  font-size: clamp(1.1rem, 1.55vw, 1.4rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.pp-impact .pp-quote { margin-top: var(--s-xl);}

/* ---- the moment under the words ----
   Two frames laid over each other like the cards beside them: the wide
   one leans left, the tall one leans right over its corner, both on slow
   counter-phase floats, and the verified line burns in neon low left. */
.pp-impact__moment {
  position: relative; z-index: 0;
  margin: var(--s-xl) 0 0;
  width: 100%; max-width: 560px;
}
.pp-impact__ph {
  display: block; overflow: clip;
  border-radius: 10px;
  border: 1px solid rgba(193, 154, 75, 0.3);
  box-shadow: 0 36px 66px -36px rgba(0, 0, 0, 0.75);
}
.pp-impact__ph img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.9) contrast(1.04);
}
.pp-impact__ph--wide {
  position: relative;
  aspect-ratio: 16 / 9;
  rotate: -2deg;
  animation: pp-photo-float 8.5s ease-in-out infinite;
}
.pp-impact__ph--tall {
  position: absolute; right: -5%; bottom: -16%;
  width: 40%; aspect-ratio: 3 / 4;
  rotate: 5deg; z-index: 1;
  animation: pp-photo-float 10.5s ease-in-out -4s infinite reverse;
}
/* the photographs close the column; the tall frame's overhang needs floor
   room before the section ends */
.pp-impact__moment { margin-bottom: clamp(56px, 7vw, 96px); }

/* ---- the circled word ----
   "rebuilding", in the paragraph, wears a scribbled gold ring: two
   ellipses at slightly different angles arriving one after the other when
   the prose reveals. Base state (no JS) is the finished ring. */
.pp-circled {
  position: relative;
  font-style: italic; font-weight: 600; color: var(--gold);
  padding-inline: 0.06em;
  white-space: nowrap;
}
.pp-circled::before,
.pp-circled::after {
  content: ''; position: absolute;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  pointer-events: none;
}
.pp-circled::before {
  inset: -0.22em -0.34em -0.26em;
  rotate: -3deg;
}
.pp-circled::after {
  inset: -0.14em -0.48em -0.34em;
  rotate: 2.4deg;
  border-color: rgba(193, 154, 75, 0.5);
}
.js .pp-prose .pp-circled::before,
.js .pp-prose .pp-circled::after { opacity: 0; }
.js .pp-prose.is-in .pp-circled::before {
  animation: pp-ring-in 640ms var(--ease) 700ms both;
}
.js .pp-prose.is-in .pp-circled::after {
  animation: pp-ring-in 640ms var(--ease) 950ms both;
}
@keyframes pp-ring-in {
  from { opacity: 0; scale: 0.8; }
  to   { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pp-prose .pp-circled::before, .js .pp-prose.is-in .pp-circled::before,
  .js .pp-prose .pp-circled::after, .js .pp-prose.is-in .pp-circled::after {
    animation: none; opacity: 1;
  }
}

/* ---- the two organizations as two doors (v9.9) ----
   Whole-card links in the dark-tile grammar: number, name, the four nouns
   from the paragraph beside them as quiet chips, and the blueprint's own
   CTA riding the floor. Beside the prose on wide screens. */
@media (min-width: 1020px) {
  .pp-impact__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: var(--s-xl);
  }
  .pp-impact__inner .pp-index,
  .pp-impact__inner .pp-eyebrow,
  .pp-impact__inner .pp-h2 { grid-column: 1 / -1; }
  .pp-impact__inner .pp-prose,
  .pp-impact__inner .pp-impact__moment { grid-column: 1; }
  .pp-impact__orgs { grid-column: 2; grid-row: 4 / span 3; align-self: start; }
}
.pp-impact__orgs {
  width: 100%; justify-self: stretch;
  margin-top: var(--s-lg);
  display: grid; gap: 0;
}
/* the scatter: each card leans its own way, the second rides up over the
   first's corner, and both sway on slow clocks. Hover drops the sway,
   stands the card up and brings it to the front. */
.pp-org {
  position: relative; overflow: clip;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--surface-raised);
  border: 1px solid rgba(193, 154, 75, 0.24);
  border-radius: 12px;
  text-decoration: none; color: var(--ink);
  --tilt: -2.4deg;
  rotate: var(--tilt);
  animation: pp-org-sway 9s ease-in-out infinite;
  box-shadow: 0 30px 56px -34px rgba(0, 0, 0, 0.65);
  transition: translate var(--dur-std) var(--ease),
              rotate 500ms var(--ease),
              border-color var(--dur-std) var(--ease),
              box-shadow var(--dur-std) var(--ease);
}
/* one card per brand ground, like the talk train: gold, espresso, ember */
.pp-org:nth-child(1) {
  width: 92%; z-index: 0;
  background: var(--gold); color: #1B1410;
  border-color: rgba(27, 20, 16, 0.3);
}
.pp-org:nth-child(1) .pp-org__num { color: rgba(27, 20, 16, 0.55); }
.pp-org:nth-child(1) .pp-org__tags i {
  color: rgba(27, 20, 16, 0.78);
  border-color: rgba(27, 20, 16, 0.32);
}
.pp-org:nth-child(1) .pp-org__cta { color: #1B1410; }
.pp-org:nth-child(1):hover { border-color: rgba(27, 20, 16, 0.6); }
.pp-org:nth-child(2) {
  --tilt: 2.2deg;
  width: 92%; justify-self: end;
  margin-top: -26px; z-index: 1;
  animation-duration: 11s; animation-delay: -3.5s;
  background: #1B1410;
}
.pp-org:nth-child(3) {
  --tilt: -1.8deg;
  width: 92%;
  margin-top: -26px; z-index: 2;
  animation-duration: 10s; animation-delay: -6.5s;
  background: #5F241C;
  border-color: rgba(244, 232, 218, 0.22);
}
.pp-org:nth-child(3) .pp-org__num { color: rgba(244, 232, 218, 0.6); }
.pp-org:nth-child(3):hover { border-color: rgba(244, 232, 218, 0.45); }
@keyframes pp-org-sway {
  0%, 100% { rotate: var(--tilt); translate: 0 0; }
  50%      { rotate: calc(var(--tilt) * 0.35); translate: 0 -6px; }
}
.pp-org:hover {
  animation: none;
  rotate: 0deg;
  translate: 0 -6px;
  z-index: 3;
  border-color: rgba(193, 154, 75, 0.55);
  box-shadow: 0 38px 66px -38px rgba(0, 0, 0, 0.8);
}
/* the oversized door under the stack: straight and steady where the cards
   lean -- the one thing in the column that holds still */
.pp-impact__cta {
  margin-top: clamp(28px, 3.4vw, 46px);
  justify-self: stretch;
  justify-content: center;
  padding: clamp(20px, 2.4vw, 30px) 32px;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  letter-spacing: 0.15em;
}

/* the quote card: the documented line, riding the same stack */
.pp-org--quote { margin: -26px 0 0; }
.pp-org__q { margin: 0; padding-right: 40px; }
.pp-org__q p {
  margin: 0;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
  font-weight: 300; font-style: italic; line-height: 1.45;
  color: #F4E8DA;
  text-wrap: balance;
}
.pp-org__attr {
  font-size: var(--t-caption); letter-spacing: 0.06em;
  color: rgba(244, 232, 218, 0.72);
}
.pp-org:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.pp-org__num {
  position: absolute; top: 18px; right: 20px;
  font-size: 0.6875rem; letter-spacing: 0.16em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.pp-org__name {
  font-size: clamp(1.35rem, 2vw, 1.8rem); font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.15;
  text-wrap: balance;
  padding-right: 40px;
}
.pp-org__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-org__tags i {
  font-style: normal;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-muted);
  padding: 5px 11px;
  border: 1px solid rgba(244, 232, 218, 0.14); border-radius: 999px;
}
.pp-org__cta {
  margin-top: auto;
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold);
}
.pp-org__cta i {
  font-style: normal; display: inline-block;
  transition: translate var(--dur-std) var(--ease);
}
.pp-org:hover .pp-org__cta i { translate: 5px 0; }
/* the house sheen, one clock apart */
.pp-org::after {
  content: ''; position: absolute; top: -20%; left: -70%;
  width: 34%; height: 140%;
  background: linear-gradient(105deg,
    transparent 0%, rgba(244, 232, 218, 0.07) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: pp-sheen 6.8s ease-in-out infinite;
  pointer-events: none;
}
.pp-org:nth-child(2)::after { animation-delay: 3.4s; }

@media (prefers-reduced-motion: reduce) {
  .pp-org, .pp-org:hover {
    translate: none; rotate: none; animation: none; transition: none;
  }
  .pp-org::after { display: none; }
  .pp-org__cta i, .pp-org:hover .pp-org__cta i { translate: none; transition: none; }
  .pp-impact { position: static; }
  .pp-impact__ph--wide, .pp-impact__ph--tall { animation: none; rotate: none; }
}

/* =========================================================================
   11 . THE REBUILD WAS REPETITION -- the last cream chapter
   A sequence board: eight steps in order, ghost numerals that fill as each
   lands. Then three lessons as three open columns -- rules between them,
   nothing around them -- and the line about the number, pulled out.
   ========================================================================= */
.pp-rebuild { padding-block: var(--s-xxl); }
.pp-rebuild__head { display: grid; justify-items: start; }
.pp-rebuild__head .pp-h2 { max-width: 26ch; }
.pp-rebuild__head .pp-lead {
  margin-top: var(--s-md);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem); line-height: 1.55;
}

/* ---- the sequence board ---- */
.pp-steps {
  list-style: none; margin: var(--s-xl) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(20px, 2.6vw, 40px);
  border-top: 1px solid var(--ink);
}
.pp-step {
  position: relative;
  display: grid; align-content: start; gap: 10px;
  padding: clamp(18px, 2.4vh, 28px) 0 clamp(22px, 3vh, 34px);
  border-bottom: 1px solid var(--line);
}
.pp-step__n {
  font-family: var(--display, inherit);
  font-size: clamp(2.6rem, 4.6vw, 4.2rem); font-weight: 800; line-height: 0.9;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1px var(--gold-deep);
  transition: color 600ms var(--ease);
}
.pp-step__t {
  font-size: clamp(1.02rem, 1.3vw, 1.2rem); font-weight: 700; line-height: 1.3;
  letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink);
  text-wrap: pretty;
}
/* each step lands on its own count, and its numeral fills when it does */
.js .pp-step.reveal {
  transition: opacity 700ms var(--ease) calc(var(--i, 0) * 110ms),
              transform 700ms var(--ease) calc(var(--i, 0) * 110ms);
}
.js .pp-step.reveal.is-in .pp-step__n { color: var(--gold-deep); transition-delay: calc(var(--i, 0) * 110ms + 350ms); }
.no-js .pp-step__n { color: var(--gold-deep); }
/* the last step is the standard itself; it holds the whole last row */
.pp-step:last-child { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: clamp(16px, 2vw, 28px); }
.pp-step:last-child .pp-step__t { font-size: clamp(1.15rem, 1.7vw, 1.55rem); max-width: 34ch; }
.pp-step:hover .pp-step__n { color: var(--gold); -webkit-text-stroke-color: var(--gold); }

/* ---- the three lessons, open columns ---- */
.pp-lessons {
  margin-top: var(--s-xl);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.pp-lesson {
  display: grid; align-content: start; gap: 12px;
  padding: 0 clamp(20px, 2.6vw, 40px);
  border-left: 1px solid var(--line);
}
.pp-lesson:first-child { padding-left: 0; border-left: 0; }
.pp-lesson:last-child { padding-right: 0; }
.pp-lesson__icon { color: var(--gold-deep); margin-bottom: 6px; }
.pp-lesson__icon svg { width: 26px; height: 26px; display: block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pp-lesson__icon rect { fill: currentColor; stroke: none; transform-box: fill-box; transform-origin: bottom; }
.js .pp-lesson .pp-lesson__icon rect { transform: scaleY(0); transition: transform 600ms var(--ease); }
.js .pp-lesson.is-in .pp-lesson__icon rect { transform: scaleY(1); }
.js .pp-lesson.is-in .pp-lesson__icon rect:nth-child(1) { transition-delay: 500ms; }
.js .pp-lesson.is-in .pp-lesson__icon rect:nth-child(2) { transition-delay: 620ms; }
.js .pp-lesson.is-in .pp-lesson__icon rect:nth-child(3) { transition-delay: 740ms; }
.js .pp-lesson.is-in .pp-lesson__icon rect:nth-child(4) { transition-delay: 860ms; }
.pp-lesson__kicker {
  margin: 0;
  font-size: var(--t-eyebrow); font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-deep);
}
.pp-lesson__name {
  margin: 0;
  font-size: clamp(1.25rem, 1.8vw, 1.65rem); font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--ink); text-wrap: balance;
}
.pp-lesson__a, .pp-lesson__b { margin: 0; font-size: var(--t-body); line-height: 1.6; text-wrap: pretty; }
.pp-lesson__a { color: var(--ink-3, var(--ink-muted)); }
.pp-lesson__b { color: var(--ink); }
.pp-lesson__a { margin-top: 6px; }

/* ---- what the number can't show ---- */
.pp-rebuild__after {
  margin-top: var(--s-xl); padding-top: var(--s-lg);
  border-top: 1px solid var(--ink);
  display: grid; justify-items: start; gap: var(--s-md);
}
.pp-rebuild__pull {
  margin: 0; max-width: 30ch;
  font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.3; font-weight: 500;
  color: var(--ink); text-wrap: pretty;
}
.pp-rebuild__pull em { font-style: italic; font-weight: 500; color: var(--gold-deep); }
.pp-rebuild__after > p:not(.pp-rebuild__pull) {
  margin: 0; max-width: 60ch;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.65;
  color: var(--ink-muted); text-wrap: pretty;
}
@media (min-width: 1020px) {
  .pp-rebuild__after { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-xl); align-items: start; }
  .pp-rebuild__after .pp-textlink { grid-column: 2; }
}

@media (max-width: 1019px) {
  .pp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pp-lessons { grid-template-columns: minmax(0, 1fr); gap: var(--s-lg); }
  .pp-lesson { padding: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: var(--s-md); }
  .pp-lesson:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 560px) {
  .pp-steps { grid-template-columns: minmax(0, 1fr); }
  .pp-step { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 16px; padding-block: 14px; }
  .pp-step__n { font-size: 1.9rem; }
  .pp-step__t { font-size: 1rem; }
  .pp-step:last-child .pp-step__t { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .pp-step.reveal, .js .pp-step.reveal.is-in { transition: none; }
  .pp-step__n, .js .pp-step.reveal.is-in .pp-step__n { color: var(--gold-deep); transition: none; }
  .js .pp-lesson .pp-lesson__icon rect, .js .pp-lesson.is-in .pp-lesson__icon rect { transform: none; transition: none; }
}
/* The shared form on cream ground. */
.pp-cream .subscribe input[type='email'] { color: var(--ink); border-bottom-color: var(--line);}
.pp-cream .subscribe input[type='email']::placeholder { color: var(--ink-faint);}
.pp-cream .subscribe input[type='email']:focus { border-bottom-color: var(--gold-deep);}
.pp-cream .subscribe__note { color: var(--ink-faint);}
/* The form button on cream keeps the primary's travelling seam; the dark
   face it already wears reads correctly on this ground, so only the label
   colour needs stating. */
.pp-cream .subscribe .btn--primary { color: #F4E8DA;}

/* =========================================================================
   12 . NEWSLETTER
   ========================================================================= */
.pp-note {
  background: var(--bg);
  padding-block: var(--s-xxl);
  overflow: clip;}
/* the static (v9.14): a whisper of no-signal fuzz over the whole section.
   One turbulence tile jumping position in hard steps -- the TV hiss --
   held quiet at 5% so it reads as texture, never as noise over the type. */
.pp-note::after {
  content: ''; position: absolute; inset: -60% -30%;
  z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='0.85'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  mix-blend-mode: screen;
  opacity: 0.18;
  animation: pp-static 0.85s steps(1) infinite;
}
@keyframes pp-static {
  0%    { transform: translate(0, 0); }
  12.5% { transform: translate(-6%, 4%); }
  25%   { transform: translate(4%, -7%); }
  37.5% { transform: translate(-8%, -3%); }
  50%   { transform: translate(6%, 6%); }
  62.5% { transform: translate(-3%, 8%); }
  75%   { transform: translate(8%, -5%); }
  87.5% { transform: translate(-5%, -8%); }
  100%  { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-note::after { animation: none; opacity: 0.035; }
}

/* ---- two shores (v9.13.1): the words left, the form framed right ---- */
.pp-note__inner {
  display: grid; justify-items: start;
  gap: var(--s-lg) var(--s-xl);
}
@media (min-width: 1020px) {
  .pp-note__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
  .pp-note__copy { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .pp-note__media { grid-column: 2; grid-row: 1; }
  .pp-note__nos { grid-column: 2; grid-row: 2; }
}
.pp-note__copy { display: grid; justify-items: start; }
.pp-note__copy .pp-h2 { max-width: 18ch; }
.pp-note__copy .pp-prose { margin-top: var(--s-md); }
.pp-note__copy .pp-prose p {
  font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.6;
  text-wrap: pretty; max-width: 50ch;
}
/* ---- the title in focus-pull ----
   A different arrival for the three Ones: instead of rising from a mask,
   each word starts soft -- blurred, slightly large, transparent -- and
   snaps into focus one after another. The three "One"s land in gold. */
.pp-note .pp-h2 .w { overflow: visible; padding-bottom: 0; margin-bottom: 0; }
.pp-note .pp-h2 .w i {
  transform: none;
  opacity: 0;
  filter: blur(9px);
  scale: 1.08;
  transition:
    opacity 700ms var(--ease),
    filter 700ms var(--ease),
    scale 700ms var(--ease);
  transition-delay: calc(var(--wi) * 85ms);
}
.pp-note .pp-h2.is-in .w i {
  transform: none;
  opacity: 1;
  filter: blur(0);
  scale: 1;
}
.pp-note .pp-h2 .w:nth-child(1) i,
.pp-note .pp-h2 .w:nth-child(4) i,
.pp-note .pp-h2 .w:nth-child(7) i { color: var(--gold); }

/* ---- the footer rides over the last chapter ----
   initFooterCover pins .pp-close (negative top so it finishes reading
   first), opens a spacer at the end of main, and pulls the footer up over
   it. Without JS the class never lands and the page just stacks. */
html.pp-fcover .pp-close {
  position: sticky; top: var(--pin-top, auto); z-index: 1;
}
html.pp-fcover main::after {
  content: ''; display: block;
  height: var(--fcover, 60vh);
}
html.pp-fcover .footer {
  position: relative; z-index: 2;
  margin-top: calc(-1 * var(--fcover, 60vh));
  box-shadow: 0 -34px 70px -30px rgba(0, 0, 0, 0.6);
}

/* the anti-checklist: three cream strips under the film, one line each.
   The ✕ sits in its own gold chip and quarter-turns under the pointer,
   a gold gleam walks each strip on its own clock, and they slide in from
   the left one after another. */
.pp-note__nos {
  list-style: none; margin: 0; padding: 0;
  width: 100%; justify-self: stretch;
  display: grid; gap: 10px;
}
.pp-note__nos li {
  position: relative; overflow: clip;
  display: flex; align-items: center; gap: 13px;
  padding: 12px 18px;
  background: #FBF4E9;
  border: 1px solid #E8DAC4;
  border-radius: 10px;
  font-size: var(--t-small); font-style: italic; letter-spacing: 0.04em;
  color: #3A2F24;
  white-space: nowrap;
  transition: translate var(--dur-std) var(--ease),
              border-color var(--dur-std) var(--ease);
}
.pp-note__nos li:hover {
  translate: 5px 0;
  border-color: rgba(122, 94, 32, 0.55);
}
.pp-note__nos li::before {
  content: '\2715';
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px;
  background: rgba(122, 94, 32, 0.13);
  border-radius: 7px;
  font-style: normal; font-size: 0.72rem;
  color: var(--gold-deep);
  transition: rotate 420ms var(--ease);
}
.pp-note__nos li:hover::before { rotate: 90deg; }
/* the gold gleam, one clock apart */
.pp-note__nos li::after {
  content: ''; position: absolute; top: -30%; left: -60%;
  width: 30%; height: 160%;
  background: linear-gradient(105deg,
    transparent 0%, rgba(193, 154, 75, 0.14) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: pp-sheen 5.6s ease-in-out infinite;
  pointer-events: none;
}
.pp-note__nos li:nth-child(2)::after { animation-delay: 1.4s; }
.pp-note__nos li:nth-child(3)::after { animation-delay: 2.8s; }
/* the strips slide in from the left, one after another */
.js .pp-note__nos li {
  opacity: 0; translate: -18px 0;
  transition: opacity 550ms var(--ease), translate 550ms var(--ease),
              border-color var(--dur-std) var(--ease);
}
.js .pp-note__nos.is-in li { opacity: 1; translate: 0 0; }
.js .pp-note__nos.is-in li:nth-child(2) { transition-delay: 130ms; }
.js .pp-note__nos.is-in li:nth-child(3) { transition-delay: 260ms; }
/* JJ in motion where the form was: the buttons' orbiting gold ring frames
   the film, leaning and floating like the page's other cards */
.pp-note__media {
  width: 100%; justify-self: stretch;
  margin: 0;
  rotate: 2.2deg;
  transition: rotate 600ms var(--ease);
  animation: pp-photo-float 8.5s ease-in-out infinite;
}
.pp-note__media:hover { rotate: 0.4deg; }
.pp-note__media-frame {
  display: block; position: relative; overflow: clip;
  padding: clamp(8px, 1vw, 12px);
  border-radius: 16px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#16120F, #16120F) padding-box,
    conic-gradient(from var(--pf-angle),
      rgba(154, 118, 44, 0.5), var(--gold) 20%,
      rgba(154, 118, 44, 0.5) 38%, rgba(154, 118, 44, 0.5)) border-box;
  animation: pf-orbit 6.5s linear infinite;
  box-shadow: 0 48px 88px -44px rgba(0, 0, 0, 0.85);
}
.pp-note__media-frame video {
  width: 100%; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 10px;
  filter: saturate(0.92) contrast(1.04);
  transition: filter 600ms var(--ease);
}
.pp-note__media:hover .pp-note__media-frame video {
  filter: saturate(1.02) contrast(1.02);
}

@media (prefers-reduced-motion: reduce) {
  .pp-note__media { rotate: 0deg; animation: none; transition: none; }
  .pp-note__media-frame { animation: none; }
  .pp-note__nos li:hover { translate: none; }
  .pp-note__nos li::after { display: none; }
  .pp-note__nos li:hover::before { rotate: none; }
  .js .pp-note__nos li, .js .pp-note__nos.is-in li {
    opacity: 1; translate: none; transition: none;
  }
}

/* =========================================================================
   13 . THE NEXT STEP -- meet me in the middle
   ========================================================================= */
.pp-close {
  position: relative; isolation: isolate; overflow: clip;
  background: var(--black-0);
  padding-block: var(--s-xxl);
  display: grid;}
/* The last warmth in the page: an ember low in the ground, the red the
   palette is allowed -- discovered, not announced. */
.pp-close::before {
  content: ''; position: absolute; inset: auto -20% -40%; height: 90%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(126, 43, 33, 0.34) 0%, transparent 70%);}
.pp-close__inner { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center;}

.pp-close__title {
  margin-top: var(--s-md);
  /* Measured: the longer line runs 1427px at 92px in a 1142px column. 5.5vw
     keeps it inside the column across the whole band, container cap included. */
  font-size: clamp(2.1rem, 5.5vw, 4.9rem);
  font-weight: 800; line-height: 0.95; letter-spacing: -0.025em;
  text-transform: uppercase; color: var(--ink); text-wrap: balance;}
.pp-close__title.reveal { opacity: 1; transform: none;}
.pp-close__title span { display: block; overflow: clip; padding-bottom: 0.09em; margin-bottom: -0.09em;}
.pp-close__title span i {
  display: block; font-style: normal;
  transform: translateY(108%); transition: transform 900ms var(--ease);}
.pp-close__title.is-in span i { transform: none;}
.pp-close__title.is-in span:nth-child(2) i { transition-delay: 110ms;}

/* ---- the drifting tickets (v9.25, Studio reference) ----
   Three long angled cards, one per brand ground, orbiting slowly in the
   margins around the finale. */
.pp-close__tickets { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.pp-tkt {
  position: absolute;
  display: grid; gap: 4px;
  padding: 14px 22px;
  border-radius: 14px;
  box-shadow: 0 24px 46px -24px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}
.pp-tkt i {
  font-style: normal; font-size: 0.625rem; font-weight: 800;
  letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.7;
}
.pp-tkt b { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.02em; }
.pp-tkt--1 {
  left: 3%; top: 16%;
  background: var(--gold); color: #1B1410;
  rotate: -13deg;
  animation: pp-tkt-a 9s ease-in-out infinite;
}
.pp-tkt--2 {
  right: 3%; top: 12%;
  background: #1B1410; color: var(--cream);
  border: 1px solid rgba(193, 154, 75, 0.35);
  rotate: 10deg;
  animation: pp-tkt-b 11s ease-in-out -3s infinite;
}
.pp-tkt--2 i { color: var(--gold); opacity: 1; }
.pp-tkt--3 {
  right: 5%; bottom: 22%;
  background: #5F241C; color: var(--cream);
  rotate: -8deg;
  animation: pp-tkt-a 10s ease-in-out -6s infinite;
}
.pp-tkt--3 i { color: #F3D88E; opacity: 1; }
@keyframes pp-tkt-a {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}
@keyframes pp-tkt-b {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 14px; }
}
@media (max-width: 1279px) { .pp-close__tickets { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pp-tkt { animation: none; }
}

.pp-close__body { margin-top: var(--s-lg); text-align: center;}

/* ---- the creed, three beats (v9.16) ---- */
.pp-close__creed {
  margin-top: var(--s-lg);
  display: grid; gap: 12px;
  text-align: center;
}
.pp-close__creed p {
  margin: 0;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem); line-height: 1.5;
  color: var(--ink-muted);
  text-wrap: balance;
}
.pp-close__creed em {
  font-style: italic; font-weight: 600; color: var(--gold);
}
.js .pp-close__creed p {
  opacity: 0; translate: 0 14px;
  transition: opacity 650ms var(--ease), translate 650ms var(--ease);
}
.js .pp-close__creed.is-in p { opacity: 1; translate: 0 0; }
.js .pp-close__creed.is-in p:nth-child(2) { transition-delay: 220ms; }
.js .pp-close__creed.is-in p:nth-child(3) { transition-delay: 440ms; }

/* ---- the veil's gesture closes the page ----
   Two gold lines grow from the shores and meet at the sentence; the glow
   breathes once they arrive. Full-bleed on purpose: the lines come from
   the very edges of the screen, exactly as the preloader's did. */
.pp-close__meetrow {
  margin-top: var(--s-lg);
  width: 100%; justify-self: stretch;
  display: flex; align-items: center;
  gap: clamp(16px, 2.6vw, 40px);
}
.pp-close__line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg,
    rgba(193, 154, 75, 0) 0%, rgba(193, 154, 75, 0.85) 100%);
}
.pp-close__line--r {
  background: linear-gradient(270deg,
    rgba(193, 154, 75, 0) 0%, rgba(193, 154, 75, 0.85) 100%);
}
.js .pp-close__line {
  transform: scaleX(0);
  transition: transform 1200ms var(--ease) 250ms;
}
.js .pp-close__line--l { transform-origin: left center; }
.js .pp-close__line--r { transform-origin: right center; }
.js .pp-close__meetrow.is-in .pp-close__line { transform: scaleX(1); }
.pp-close__meet {
  margin: 0; flex: none;
  max-width: min(86vw, 20ch);
  font-size: clamp(1.8rem, 4.2vw, 3.4rem);
  font-weight: 300; font-style: italic; color: var(--gold); line-height: 1.15;
  text-wrap: balance;
}
.pp-close__meetrow.is-in .pp-close__meet {
  animation: pp-meet-breathe 4s ease-in-out 1.5s infinite alternate;
}
@keyframes pp-meet-breathe {
  from { text-shadow: 0 0 0 rgba(193, 154, 75, 0); }
  to   { text-shadow: 0 0 26px rgba(193, 154, 75, 0.45); }
}
/* the ember in the ground breathes with it */
.pp-close::before {
  animation: pp-halo-breathe 7.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .js .pp-close__creed p, .js .pp-close__creed.is-in p {
    opacity: 1; translate: none; transition: none;
  }
  .js .pp-close__line, .js .pp-close__meetrow.is-in .pp-close__line {
    transform: none; transition: none;
  }
  .pp-close__meetrow.is-in .pp-close__meet { animation: none; }
  .pp-close::before { animation: none; }
}
.pp-close__actions { margin-top: var(--s-lg); justify-content: center;}

/* =========================================================================
   motion, withdrawn on request
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .pp-hero__title span i, .pp-hero__title.is-in span i,
  .pp-close__title span i, .pp-close__title.is-in span i { transform: none; transition: none;}
  .pp-legacy__mark svg path { stroke-dashoffset: 0; transition: none;}
  .pp-legacy__mark svg circle { opacity: 1; transition: none;}
  .pp-book__cover { transform: none; transition: none;}
  .pp-talk, .pp-talk__cta i { transition: none;}
}

/* The blueprint's CTA labels run long ("Explore Perseverance Principles"),
   and the shared .btn is nowrap: at 375px that is a 410px object in a 335px
   column, and the mobile layout viewport stretches to fit it. On small
   screens the pill wraps instead. */
@media (max-width: 640px) {
  .pp-hero .btn, .pp-books .btn, .pp-coach .btn, .pp-ideas .btn,
  .pp-impact .btn, .pp-close .btn, .pp-story .btn {
    white-space: normal; text-align: center; line-height: 1.35;
    justify-content: center; max-width: 100%;
  }
}

/* =========================================================================
   THE VEIL . the preloader
   Two dark banks. A gold line grows from each edge; where they meet -- the
   middle -- a spark ignites, and the banks part along that seam to reveal
   the page. The brand's whole idea, played once, in about two seconds.
   States: [data-veil] > .is-lit (lines met) > .is-done (banks part).
   ========================================================================= */
html.pp-loading { overflow: clip; }

.veil {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
}
.veil__bank {
  position: absolute; left: 0; right: 0; height: 50.15%;
  background: var(--black-0);
  transition: transform 980ms cubic-bezier(0.77, 0, 0.18, 1) 240ms;
}
.veil__bank--top { top: 0; }
.veil__bank--bottom { bottom: 0; }

/* The two halves of the line, one from each shore. */
.veil__line {
  position: absolute; top: 50%; width: 50%; height: 1px;
  transform: scaleX(0);
  transition: transform 1150ms var(--ease) 250ms, opacity 300ms var(--ease);
}
.veil__line--l {
  left: 0; transform-origin: left center;
  background: linear-gradient(to right, transparent 4%, var(--gold));
}
.veil__line--r {
  right: 0; transform-origin: right center;
  background: linear-gradient(to left, transparent 4%, var(--gold));
}
.veil.is-lit .veil__line { transform: scaleX(1); }

/* Ignition at the meeting point. */
.veil__spark {
  position: absolute; top: 50%; left: 50%;
  width: 8px; height: 8px; border-radius: 50%;
  translate: -50% -50%; scale: 0.2; opacity: 0;
  background: var(--gold);
  box-shadow: 0 0 26px 7px rgba(193, 154, 75, 0.5);
  transition: opacity 420ms var(--ease) 1350ms, scale 520ms var(--ease) 1350ms;
}
.veil.is-lit .veil__spark { opacity: 1; scale: 1; animation: pf-orb 2.4s ease-in-out 1900ms infinite; }

.veil__core {
  position: relative; z-index: 2;
  display: grid; justify-items: center;
  transition: opacity 420ms var(--ease), translate 420ms var(--ease);
}
.veil__gap { height: clamp(72px, 12vh, 120px); }
.veil__mark {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem); font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  opacity: 0; translate: 0 16px;
  transition: opacity 750ms var(--ease) 150ms, translate 750ms var(--ease) 150ms;
}
.veil__mark img.veil__logo {
  display: block; width: clamp(190px, 26vw, 320px); height: auto;
}
.veil__tag {
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold);
  opacity: 0; translate: 0 -12px;
  transition: opacity 750ms var(--ease) 650ms, translate 750ms var(--ease) 650ms,
              letter-spacing 1400ms var(--ease) 650ms;
}
.veil.is-lit .veil__mark { opacity: 1; translate: 0 0; }
.veil.is-lit .veil__tag { opacity: 1; translate: 0 0; letter-spacing: 0.42em; }

/* The count: a ghost numeral, outlined in gold, low in the corner. */
.veil__count {
  position: absolute; z-index: 2;
  right: clamp(20px, 4vw, 60px); bottom: clamp(14px, 3vh, 38px);
  font-size: clamp(3.4rem, 9vw, 7rem); font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: transparent; -webkit-text-stroke: 1px rgba(193, 154, 75, 0.55);
  transition: opacity 360ms var(--ease);
}

/* Departure: everything quiets, then the banks part along the seam. */
.veil.is-done .veil__core,
.veil.is-done .veil__count { opacity: 0; }
.veil.is-done .veil__core { translate: 0 -18px; }
.veil.is-done .veil__line { opacity: 0; transition-delay: 0ms; }
.veil.is-done .veil__spark { opacity: 0; scale: 2.4; animation: none;
  transition: opacity 300ms var(--ease), scale 300ms var(--ease); }
.veil.is-done .veil__bank--top { transform: translateY(-101%); }
.veil.is-done .veil__bank--bottom { transform: translateY(101%); }

/* =========================================================================
   HERO ENTRANCE . held shut until the veil parts
   The gates only exist while html.pp-loading is set by the inline script, so
   with JavaScript off nothing below applies and the page renders plainly.
   ========================================================================= */
html.pp-loading .pp-hero .reveal.is-in { opacity: 0; transform: translateY(28px); }

/* The portrait: unmasked upward from the waterline, settling from a slight
   enlargement. Scale is its own property, so the parallax transform GSAP
   writes never collides with it. */
.pp-hero__art {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1250ms var(--ease) 350ms;
}
.pp-hero__art img { scale: 1; transition: scale 1500ms var(--ease) 350ms; }
html.pp-loading .pp-hero__art { clip-path: inset(100% 0 0 0); }
html.pp-loading .pp-hero__art img { scale: 1.07; }

/* The gold rule before the authority line draws itself. */
.pp-hero__authority::before {
  transform: scaleX(1); transform-origin: left center;
  transition: transform 900ms var(--ease) 1500ms;
}
html.pp-loading .pp-hero__authority::before { transform: scaleX(0); }

/* ---- the title, letter by letter ----
   app.js splits each line into .c spans. Once split, the line-level mask
   stands down and each character rises through the clip with its own delay.
   Without JS the split never happens and the old line reveal still runs. */
.pp-hero__title.is-chars span i { transform: none; transition: none; }
.pp-hero__title .c {
  display: inline-block; font-style: inherit;
  transform: translateY(118%) rotate(8deg);
  transform-origin: 0 100%;
  transition: transform 820ms var(--ease);
  transition-delay: calc(180ms + var(--ci) * 26ms);
}
html.pp-ready .pp-hero__title .c { transform: none; }

/* The bridge stroke: once the letters land, a gold line crosses under the
   one line that matters. It hangs on the inner <i>, which shrinks to the
   ink -- on the block span it ran the full column and overhung the words. */
/* Outranks the base `.pp-hero__title span i` block rule. */
.pp-hero__title .pp-hero__mid i { display: inline-block; position: relative; }
.pp-hero__mid i::after {
  content: ''; position: absolute;
  left: 0.05em; right: 0.16em; bottom: 0.03em; height: 0.04em;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 950ms var(--ease) 1250ms;
}
html.pp-ready .pp-hero__mid i::after { transform: scaleX(1); }

/* ---- atmosphere: a warmth drifting behind the type ---- */
.pp-hero__glow {
  position: absolute; inset: -22%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(30% 36% at 22% 30%, rgba(193, 154, 75, 0.1) 0%, transparent 68%),
    radial-gradient(24% 30% at 64% 72%, rgba(126, 43, 33, 0.14) 0%, transparent 66%);
  animation: pf-emberdrift 30s ease-in-out infinite alternate;
}

/* ---- a mark that there is more below ---- */
.pp-hero__cue {
  position: absolute; left: 50%; bottom: clamp(18px, 3vh, 36px);
  width: 1px; height: clamp(38px, 6vh, 60px);
  background: rgba(239, 229, 214, 0.16);
  overflow: clip;
  opacity: 1; transition: opacity 800ms var(--ease) 2100ms;
}
.pp-hero__cue i {
  position: absolute; inset: 0; display: block;
  background: var(--gold);
  animation: pf-cue 2.6s ease-in-out infinite;
}
html.pp-loading .pp-hero__cue { opacity: 0; transition: none; }

/* ---- motion, withdrawn on request ---- */
@media (prefers-reduced-motion: reduce) {
  .veil { display: none; }
  html.pp-loading .pp-hero .reveal.is-in { opacity: 1; transform: none; }
  html.pp-loading .pp-hero__art { clip-path: inset(0 0 0 0); }
  html.pp-loading .pp-hero__art img { scale: 1; }
  html.pp-loading .pp-hero__authority::before { transform: scaleX(1); }
  .pp-hero__title .c, html.pp-ready .pp-hero__title .c { transform: none; transition: none; }
  .pp-hero__mid i::after, html.pp-ready .pp-hero__mid i::after { transform: scaleX(1); transition: none; }
  .pp-hero__glow { animation: none; }
  .pp-hero__cue i { animation: none; }
  html.pp-loading .pp-hero__cue { opacity: 1; }
}

/* =========================================================================
   TITLE HOVER . a ripple under the pointer
   Only after html.pp-settled (2.2s past the entrance): until then the .c
   spans still carry their staggered entrance delays, and a hover that
   answers half a second late reads as broken. The hovered letter lifts and
   turns gold; its neighbours follow at half strength.
   ========================================================================= */
html.pp-settled .pp-hero__title .c {
  transition: transform 240ms var(--ease), color 300ms var(--ease),
              text-shadow 300ms var(--ease);
  transition-delay: 0ms;
}
html.pp-settled .pp-hero__title .c:hover {
  transform: translateY(-0.07em) rotate(-2.5deg);
  color: var(--gold);
  text-shadow: 0 0 34px rgba(193, 154, 75, 0.45);
}
/* The ripple: one letter each side, half the lift. :has() carries it
   backward; browsers without it simply ripple forward only. */
html.pp-settled .pp-hero__title .c:hover + .c,
html.pp-settled .pp-hero__title .c:has(+ .c:hover) {
  transform: translateY(-0.035em);
}
/* The middle line is already gold: its letters brighten instead. */
html.pp-settled .pp-hero__mid .c:hover {
  color: #E9CE85;
  text-shadow: 0 0 34px rgba(233, 206, 133, 0.5);
}

/* =========================================================================
   HEADER ENTRANCE . it descends once the veil parts
   Gated on pp-loading like the hero, so without JS it just sits in place.
   ========================================================================= */
.header { will-change: transform; }
html.pp-loading .header { transform: translateY(-100%); transition: none; }
html.pp-ready .header { transition-delay: 500ms; }
html.pp-settled .header { transition-delay: 0ms; }

@media (prefers-reduced-motion: reduce) {
  html.pp-settled .pp-hero__title .c,
  html.pp-settled .pp-hero__title .c:hover,
  html.pp-settled .pp-hero__title .c:hover + .c,
  html.pp-settled .pp-hero__title .c:has(+ .c:hover) {
    transform: none; transition: none; text-shadow: none;
  }
  html.pp-loading .header { transform: none; transition: none; }
  html.pp-ready .header, html.pp-settled .header { transition-delay: 0ms; }
}

/* =========================================================================
   THE DEVICE FAMILY . graphics across the whole page
   Ticker, ledger panel, year chart, metric chips, sealed checklist, halo
   CTA, chapter index. Every number rendered by these is transcribed from
   the blueprint -- the devices are ours, the figures are not.
   ========================================================================= */

/* ---- ticker: words in orbit ----
   Two copies of the sequence inside one rail; -50% loops seamlessly. */
/* A cream band, like the quote plates: the ticker cuts the dark page
   instead of dissolving into it. */
.pp-tick {
  overflow: clip;
  background: var(--cream);
  border-block: 1px solid #DCCBB4;
  padding-block: clamp(14px, 2vw, 22px);
}
.pp-tick__rail {
  display: flex; align-items: center;
  gap: clamp(26px, 3.4vw, 46px);
  width: max-content;
  padding-right: clamp(26px, 3.4vw, 46px);
  animation: pp-tick 30s linear infinite;
}
.pp-tick:hover .pp-tick__rail { animation-play-state: paused; }
.pp-tick__rail span {
  font-size: clamp(1rem, 1.9vw, 1.5rem);
  font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase;
  color: #1B1410; white-space: nowrap;
}
.pp-tick__rail .pp-tick__gold { color: var(--gold-deep); font-weight: 300; font-style: italic; }
.pp-tick__rail i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-deep); flex: none;
}
@keyframes pp-tick { to { transform: translateX(-50%); } }

/* ---- the ledger panel ---- */
.pp-record__split {
  margin-top: var(--s-xl);
  display: grid; gap: var(--s-lg);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1020px) {
  .pp-record__split { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.8fr); }
}
.pp-record__split .pp-record__rows { margin-top: 0; }

.pp-panel {
  /* The index column grew taller than the ledger; the ledger rides along,
     pinned under the header while the rows scroll past. */
  position: sticky; top: 140px;
  display: grid; justify-items: start; gap: 10px;
  padding: clamp(24px, 2.8vw, 38px);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}
/* a whisper of warmth in the panel's upper corner */
.pp-panel::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(46% 36% at 18% 0%, rgba(193, 154, 75, 0.07) 0%, transparent 70%);
}
.pp-panel__kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-eyebrow); font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-muted);
}
.pp-panel__kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.pp-panel__big {
  font-size: clamp(4rem, 7vw, 6.2rem); font-weight: 800; line-height: 0.9;
  letter-spacing: -0.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.pp-panel__label {
  font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold);
}

/* ---- the year chart ----
   Faint gridlines behind; bars in layered gold with a lit crest and a soft
   halo. Entrance and the perpetual glow are driven by anime.js
   (initLedger); the CSS transition below is only the no-anime fallback,
   and .pp-panel--anime stands it down so the two never fight. */
.pp-panel__chart {
  position: relative;
  align-self: stretch; justify-self: stretch;
  margin-top: var(--s-sm);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  align-items: end; height: 148px;
  padding-bottom: 0;
}
.pp-panel__chart::before {
  content: ''; position: absolute; inset: 18px 0 22px; pointer-events: none;
  background: repeating-linear-gradient(to top,
    rgba(239, 229, 214, 0.06) 0 1px, transparent 1px 27px);
}
.pp-panel__chart::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 21px; height: 1px;
  background: linear-gradient(to right,
    transparent, rgba(193, 154, 75, 0.55), transparent);
}
.pp-bar {
  position: relative; display: grid; align-content: end; justify-items: center;
  gap: 7px; height: 100%; z-index: 1;
}
.pp-bar i {
  position: relative;
  width: 100%; height: calc(88px * var(--h));
  background: linear-gradient(to top,
    #5C451B 0%, #A9863F 46%, var(--gold) 78%, #E7CC84 100%);
  border-radius: 5px 5px 2px 2px;
  box-shadow: 0 0 22px -6px rgba(193, 154, 75, 0.5),
              inset 0 1px 0 rgba(255, 244, 214, 0.55),
              inset 0 -10px 18px -12px rgba(0, 0, 0, 0.5);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 900ms var(--ease) calc(200ms + var(--d) * 110ms);
}
/* the lit crest */
.pp-bar i::after {
  content: ''; position: absolute; left: 12%; right: 12%; top: 2px; height: 2px;
  border-radius: 2px;
  background: rgba(255, 246, 220, 0.75);
  filter: blur(0.5px);
}
.pp-panel.is-in .pp-bar i { transform: scaleY(1); }
.pp-panel--anime .pp-bar i { transition: none; }
.pp-bar b {
  position: absolute; top: 0; font-size: var(--t-caption); font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity 500ms var(--ease) calc(700ms + var(--d) * 110ms);
}
.pp-panel.is-in .pp-bar b { opacity: 1; }
.pp-panel--anime .pp-bar b { transition: none; }
.pp-bar span {
  font-size: 0.6875rem; letter-spacing: 0.12em; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

.pp-panel__row {
  align-self: stretch; justify-self: stretch;
  margin-top: var(--s-sm);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-sm);
}
.pp-panel__row strong {
  display: block;
  font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.pp-panel__row em {
  display: block; margin-top: 4px; font-style: normal;
  font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---- the odometer (v9.24) ----
   initCounters rebuilds every [data-count] as wheels of twenty numerals;
   .is-odm sends each reel to its landing spot, one beat apart, on a long
   decelerating ease. Sizing is all in em, so the wheels inherit whatever
   type they stand in. */
.odm { display: inline-flex; align-items: baseline; }
.odm__w {
  display: inline-block; overflow: clip;
  height: 1em; line-height: 1;
}
.odm__r {
  display: block;
  transform: translateY(0);
  transition: transform 1600ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--odd, 0ms);
}
.odm__r i {
  display: block; font-style: normal;
  height: 1em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.is-odm .odm__r { transform: var(--odt, none); }

/* ---- the sealed checklist (coaching) ---- */
.pp-checks {
  list-style: none; margin: var(--s-md) 0 0; padding: 0;
  display: grid; gap: 14px; max-width: 640px;
}
.pp-checks li {
  display: flex; align-items: baseline; gap: 14px;
  font-size: var(--t-body); line-height: 1.6; color: var(--ink-muted);
}
.pp-checks__seal {
  flex: none; align-self: center;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(193, 154, 75, 0.5);
  color: var(--gold);
  background: rgba(193, 154, 75, 0.07);
}
.pp-checks__seal svg { width: 13px; height: 13px; display: block; }
/* seals stamp themselves in as the list reveals */
.pp-checks li .pp-checks__seal { scale: 0; transition: scale 500ms var(--ease); }
.pp-checks.is-in li .pp-checks__seal { scale: 1; }
.pp-checks.is-in li:nth-child(1) .pp-checks__seal { transition-delay: 120ms; }
.pp-checks.is-in li:nth-child(2) .pp-checks__seal { transition-delay: 240ms; }
.pp-checks.is-in li:nth-child(3) .pp-checks__seal { transition-delay: 360ms; }
.pp-checks.is-in li:nth-child(4) .pp-checks__seal { transition-delay: 480ms; }
.pp-checks.is-in li:nth-child(5) .pp-checks__seal { transition-delay: 600ms; }

/* ---- halo on the two preorder CTAs ---- */
.btn--halo { animation: pf-orbit 5.2s linear infinite, pp-halo 3.4s ease-in-out infinite; }
@keyframes pp-halo {
  0%, 100% { box-shadow: 0 0 18px -8px rgba(193, 154, 75, 0.45); }
  50%      { box-shadow: 0 0 40px -6px rgba(193, 154, 75, 0.7); }
}

/* ---- chapter index, injected by initIndex ---- */
.pp-index {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--s-sm);
  font-size: 0.6875rem; letter-spacing: 0.2em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.pp-index b { font-weight: 700; color: var(--gold); }
.pp-index i { width: 26px; height: 1px; background: var(--line); }
.pp-cream .pp-index b { color: var(--gold-deep); }

/* ---- motion, withdrawn on request ---- */
@media (prefers-reduced-motion: reduce) {
  .pp-tick__rail { animation: none; }
  .pp-bar i, .pp-panel.is-in .pp-bar i { transform: scaleY(1); transition: none; animation: none; }
  .pp-bar b, .pp-panel.is-in .pp-bar b { opacity: 1; transition: none; }
  .pp-checks li .pp-checks__seal, .pp-checks.is-in li .pp-checks__seal { scale: 1; transition: none; }
  .btn--halo { animation: none; }
}

   TITLES . every chapter headline rises word by word
   app.js splits each .pp-h2 into masked word spans; the reveal engine's
   is-in fires the stagger. Without JS the split never happens and the
   plain fade-up still runs.
   ========================================================================= */
.pp-h2.is-words.reveal { opacity: 1; transform: none; }
.pp-h2 .w {
  display: inline-block; overflow: clip; vertical-align: top;
  padding-bottom: 0.08em; margin-bottom: -0.08em;
}
.pp-h2 .w i {
  display: inline-block; font-style: inherit;
  transform: translateY(112%);
  transition: transform 700ms var(--ease);
  transition-delay: calc(var(--wi) * 55ms);
}
.pp-h2.is-in .w i { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pp-h2 .w i, .pp-h2.is-in .w i { transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-quote::after { animation: none; }
  .pp-quote blockquote .qc, .pp-quote.is-in blockquote .qc { opacity: 1; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-middle__art img { animation: none; scale: 1; }
}

/* ---- smoke over the philosophy ----
   Two vast, heavily blurred plumes in the site's own warmth, drifting and
   turning in opposite directions on long, uneven clocks -- the layers slide
   against each other and read as smoke, never as a repeating loop. */
.pp-middle__smoke {
  position: absolute; z-index: -1; pointer-events: none;
  width: 58vw; height: 58vw; border-radius: 50%;
  filter: blur(64px);
  mix-blend-mode: screen;
}
.pp-middle__smoke--a {
  top: -12%; left: -16%;
  background: radial-gradient(circle at 42% 44%, rgba(196, 174, 148, 0.13) 0%, rgba(142, 59, 44, 0.05) 44%, transparent 66%);
  animation: pp-smoke-a 47s ease-in-out infinite alternate;
}
.pp-middle__smoke--b {
  bottom: -16%; right: -14%;
  background: radial-gradient(circle at 58% 56%, rgba(174, 150, 120, 0.11) 0%, rgba(193, 154, 75, 0.05) 46%, transparent 66%);
  animation: pp-smoke-b 61s ease-in-out infinite alternate;
}
@keyframes pp-smoke-a {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to   { transform: translate(16vw, 9vh) rotate(48deg) scale(1.3); }
}
@keyframes pp-smoke-b {
  from { transform: translate(0, 0) rotate(0deg) scale(1.15); }
  to   { transform: translate(-14vw, -11vh) rotate(-42deg) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .pp-middle__smoke { animation: none; }
}

/* The bridge line: the philosophy's last thought opens the story, a gold
   thread leading into it. */
.pp-story__bridge {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: var(--s-lg);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 300; font-style: italic; line-height: 1.4;
  color: var(--ink-muted); max-width: 720px;
}
.pp-story__bridge::before {
  content: ''; flex: none; width: clamp(30px, 4vw, 56px); height: 1px;
  background: linear-gradient(to right, transparent, var(--gold));
}

/* ---- liquid ether behind the philosophy ----
   The canvas paints wisps on black; `screen` blending makes the black
   vanish into the section ground, and the shader caps every channel so
   the text's contrast floor holds no matter where the liquid drifts. */
.pp-ether {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
.pp-ether canvas {
  width: 100%; height: 100%; display: block;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* ---- the story fill (Porteo treatment) ----
   Words carry full ink; the scrub drives only their opacity, so the fill
   line reads as ink arriving, not grey brightening. Without JS the split
   never happens and the prose reads plainly. */
.pp-story__body .fw { color: var(--ink); }

/* The bridge thread on cream ground reads in the deep gold. */
.pp-cream .pp-story__bridge::before {
  background: linear-gradient(to right, transparent, var(--gold-deep));
}

/* ---- the statement in caps, as the reference sets it ---- */
.pp-story__body p {
  text-transform: uppercase;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  letter-spacing: 0.004em; line-height: 1.55; font-weight: 700;
}
.pp-story__break { font-size: clamp(1.3rem, 2.1vw, 1.8rem) !important; }

/* ---- the story's landing: a small bento of dark cards on the light ---- */
.pp-sbento {
  margin-top: var(--s-lg);
  display: grid; gap: 14px;
  grid-template-columns: 1fr 1fr;
  max-width: 720px;
}
.pp-sbento__tile {
  display: grid; align-content: center; gap: 10px;
  padding: clamp(22px, 2.6vw, 32px);
  background: #1B1410; border-radius: 6px;
  box-shadow: 0 26px 52px -34px rgba(27, 20, 16, 0.6);
}
.pp-sbento__tile b {
  font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 800; line-height: 0.9;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.pp-sbento__tile p {
  font-size: var(--t-body); line-height: 1.6; color: #D9CFC0;
  text-wrap: pretty;
}
.pp-sbento__tile--wide { grid-column: 1 / -1; }
.pp-sbento__tile--wide p { color: #EFE5D6; font-weight: 600; }
@media (max-width: 640px) {
  .pp-sbento { grid-template-columns: 1fr; }
}

/* ---- life in the story bento ----
   A sheen of light crosses each card on its own clock; on hover the card
   lifts and a gold edge answers. The numeral counts up via [data-count]. */
.pp-sbento__tile {
  position: relative; overflow: clip;
  border: 1px solid transparent;
  transition: translate var(--dur-std) var(--ease),
              border-color var(--dur-std) var(--ease),
              box-shadow var(--dur-std) var(--ease);
}
.pp-sbento__tile:hover {
  translate: 0 -5px;
  border-color: rgba(193, 154, 75, 0.5);
  box-shadow: 0 34px 64px -34px rgba(27, 20, 16, 0.75);
}
.pp-sbento__tile::after {
  content: ''; position: absolute; top: -40%; left: -70%;
  width: 46%; height: 180%;
  background: linear-gradient(105deg,
    transparent 0%, rgba(244, 232, 218, 0.09) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: pp-sheen 5.8s ease-in-out infinite;
  pointer-events: none;
}
.pp-sbento__tile:nth-child(2)::after { animation-delay: 1.5s; }
.pp-sbento__tile:nth-child(3)::after { animation-delay: 3s; }
@keyframes pp-sheen {
  0%, 52%   { left: -70%; }
  78%, 100% { left: 140%; }
}

/* ---- light crossing the portrait ----
   The same sheen, wider and slower, walks the photograph; on hover the
   grade warms. The image's transform belongs to the scroll scrub, so the
   hover answers with filter alone -- no property is contested. */
.pp-story__portrait::after {
  content: ''; position: absolute; top: -30%; left: -80%;
  width: 40%; height: 160%;
  background: linear-gradient(105deg,
    transparent 0%, rgba(255, 250, 240, 0.14) 50%, transparent 100%);
  transform: skewX(-16deg);
  animation: pp-sheen 7.4s ease-in-out 1.2s infinite;
  pointer-events: none;
}
.pp-story__portrait img {
  transition: filter 500ms var(--ease);
  filter: saturate(1) contrast(1);
}
.pp-story__portrait:hover img {
  filter: saturate(1.12) contrast(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .pp-sbento__tile, .pp-sbento__tile:hover { transition: none; translate: none; }
  .pp-sbento__tile::after, .pp-story__portrait::after { animation: none; }
}

/* Primary buttons standing on light ground wear the same fully lit ring as
   the dark pills: the whole border in gold with the bright spot orbiting. */
.pp-quote .btn--primary,
.pp-cream .subscribe .btn--primary {
  background:
    linear-gradient(#1B1410, #1B1410) padding-box,
    conic-gradient(from var(--pf-angle),
      rgba(154, 118, 44, 0.55),
      var(--gold) 18%,
      rgba(154, 118, 44, 0.55) 36%,
      rgba(154, 118, 44, 0.55)) border-box;
  box-shadow: 0 0 22px -6px rgba(193, 154, 75, 0.45);
  animation-duration: 4.6s;
}
.pp-quote .btn--primary:hover,
.pp-quote .btn--primary:focus-visible,
.pp-cream .subscribe .btn--primary:hover,
.pp-cream .subscribe .btn--primary:focus-visible {
  color: #F3D88E;
  animation-duration: 2.2s;
  box-shadow: 0 0 32px -4px rgba(193, 154, 75, 0.55);
  background:
    linear-gradient(#33281F, #33281F) padding-box,
    conic-gradient(from var(--pf-angle),
      rgba(193, 154, 75, 0.7),
      #E7CC84 18%,
      rgba(193, 154, 75, 0.7) 36%,
      rgba(193, 154, 75, 0.7)) border-box;
}

/* =========================================================================
   PILLARS, CONDUCTED
   The giant word lives twice: an outlined ghost and a solid fill clipped
   from the bottom, rising with --fillp as the panel arrives. --cover
   recedes a panel while the next slides over it. Defaults keep the words
   filled and the panels flat, so no JS means a plain readable stack.
   ========================================================================= */
.pp-pillar { --fillp: 1; --cover: 0; }
.pp-pillar__word { position: relative; display: inline-block; }
.pp-pillar__word .wg {
  -webkit-text-stroke: 1.5px rgba(239, 229, 214, 0.38);
  color: transparent;
}
.pp-pillar__word .wf {
  position: absolute; inset: 0;
  color: var(--ink);
  clip-path: inset(calc((1 - var(--fillp)) * 100%) 0 0 0);
  transition: color 400ms var(--ease);
}
.pp-pillar__word:hover .wf { color: var(--gold); }

/* the covered panel recedes: smaller, darker, further away */
.is-conducted .pp-pillar .pp-pillar__inner {
  transform: scale(calc(1 - var(--cover) * 0.05));
  transform-origin: center 42%;
}
.pp-pillar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: #050403;
  opacity: calc(var(--cover) * 0.5);
}

/* ---- one atmosphere per pillar ----
   Faith breathes a warm aura; Discipline stands on a ghost grid;
   Simplicity is the absence -- the panel practises the word. */
.pp-pillar:nth-child(1)::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(44% 54% at 30% 52%,
    rgba(193, 154, 75, 0.16) 0%, rgba(142, 59, 44, 0.06) 48%, transparent 72%);
  animation: pp-aura 6.5s ease-in-out infinite alternate;
}
@keyframes pp-aura {
  from { opacity: 0.5;  transform: scale(1); }
  to   { opacity: 1;    transform: scale(1.14); }
}
.pp-pillar:nth-child(2)::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(to right,
      rgba(239, 229, 214, 0.05) 0 1px, transparent 1px 110px),
    repeating-linear-gradient(to bottom,
      rgba(239, 229, 214, 0.04) 0 1px, transparent 1px 110px),
    linear-gradient(to right, rgba(193, 154, 75, 0.22), transparent 2px);
}

/* the ghost numeral, high in the corner */
.pp-pillar .pp-pillar__num {
  position: absolute; top: clamp(72px, 11vh, 130px); right: var(--gutter);
  font-size: clamp(4.6rem, 11vw, 9.5rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(193, 154, 75, 0.32);
  z-index: 0; pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pp-pillar:nth-child(1)::before { animation: none; }
  .is-conducted .pp-pillar .pp-pillar__inner { transform: none; }
  .pp-pillar::after { opacity: 0; }
  .pp-pillar__word .wf { transition: none; }
}

/* ---- one ground per pillar ----
   Faith burns dark-warm, Discipline stands on cold charcoal, and
   Simplicity strips all the way to cream -- the palette performing each
   word. The cream panel re-points the ink tokens like every light ground. */
.pp-pillar:nth-child(1) { background: #1A1512; }
.pp-pillar:nth-child(2) { background: #131110; }
.pp-pillar:nth-child(3) {
  background: var(--cream);
  --ink: #1B1410;
  --ink-muted: #55483C;
  --ink-faint: #6E6152;
  --line: #DCCBB4;
}
.pp-pillar:nth-child(3) .wg {
  -webkit-text-stroke-color: rgba(27, 20, 16, 0.32);
}
.pp-pillar:nth-child(3) .pp-pillar__close { color: var(--gold-deep) !important; }
.pp-pillar:nth-child(3) .pp-pillar__num {
  -webkit-text-stroke-color: rgba(122, 94, 32, 0.4);
}
.pp-pillar:nth-child(3) .pp-pillar__word:hover .wf { color: var(--gold-deep); }

.pp-pillar__cta { margin-top: var(--s-md); }
/* The framework button stands on the cream pillar: full lit ring. */
.pp-pillar:nth-child(3) .btn--primary {
  background:
    linear-gradient(#1B1410, #1B1410) padding-box,
    conic-gradient(from var(--pf-angle),
      rgba(154, 118, 44, 0.55),
      var(--gold) 18%,
      rgba(154, 118, 44, 0.55) 36%,
      rgba(154, 118, 44, 0.55)) border-box;
  box-shadow: 0 0 22px -6px rgba(193, 154, 75, 0.45);
  color: #F4E8DA;
}
.pp-pillar:nth-child(3) .btn--primary:hover,
.pp-pillar:nth-child(3) .btn--primary:focus-visible {
  color: #F3D88E;
  background:
    linear-gradient(#33281F, #33281F) padding-box,
    conic-gradient(from var(--pf-angle),
      rgba(193, 154, 75, 0.7),
      #E7CC84 18%,
      rgba(193, 154, 75, 0.7) 36%,
      rgba(193, 154, 75, 0.7)) border-box;
}

/* The second and third slide numerals stand low, bottom-right. */
.pp-pillar:nth-child(2) .pp-pillar__num,
.pp-pillar:nth-child(3) .pp-pillar__num {
  top: auto;
  bottom: clamp(90px, 14vh, 170px);
}

/* ---- the transition, alive ----
   One line on wide screens; the gold threads draw themselves toward the
   words, and a warm shimmer crosses the sentence forever. */
@media (min-width: 820px) {
  .pp-transition { white-space: nowrap; }
}
.pp-transition::before,
.pp-transition::after {
  transform: scaleX(0);
  transition: transform 900ms var(--ease) 250ms;
}
.pp-transition::before { transform-origin: left center; }
.pp-transition::after { transform-origin: right center; }
.pp-transition.is-in::before,
.pp-transition.is-in::after { transform: scaleX(1); }

.pp-transition {
  color: transparent;
  background: linear-gradient(100deg,
    var(--ink) 42%, #F3D88E 50%, var(--ink) 58%);
  background-size: 240% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: pp-shimmer 5.2s ease-in-out 1.2s infinite;
}
@keyframes pp-shimmer {
  0%        { background-position: 120% 0; }
  55%, 100% { background-position: -80% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pp-transition {
    color: var(--ink); background: none; animation: none;
    -webkit-background-clip: initial; background-clip: initial;
  }
  .pp-transition::before, .pp-transition::after,
  .pp-transition.is-in::before, .pp-transition.is-in::after {
    transform: scaleX(1); transition: none;
  }
}

/* ---- the grand ticker: a sentence passing through the dark ----
   The transition line as a marquee -- big, italic, unhurried. Overrides
   the cream ticker's material for this one instance. */
.pp-tick--grand {
  background: var(--bg);
  border-block: 1px solid var(--line);
  padding-block: clamp(20px, 3vw, 34px);
}
.pp-tick--grand .pp-tick__rail {
  animation-duration: 38s;
  gap: clamp(40px, 5vw, 80px);
  padding-right: clamp(40px, 5vw, 80px);
}
.pp-tick--grand .pp-tick__rail span {
  font-size: clamp(1.7rem, 3.4vw, 3rem);
  font-weight: 300; font-style: italic; letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}
.pp-tick--grand .pp-tick__rail span em {
  font-style: italic; color: var(--gold); font-weight: 400;
}
.pp-tick--grand .pp-tick__rail i { background: var(--gold); width: 8px; height: 8px; }

/* =========================================================================
   v9.19 . Forged by fire rides over the philosophy
   The middle pins (initImpactPin writes the negative top so it finishes
   reading first) and every later chapter is positioned above it. The
   impact section is excluded: it runs its own pin with its own z-order.
   ========================================================================= */
.pp-middle { position: sticky; top: var(--pin-top, auto); z-index: 0; }
.pp-middle ~ *:not(.pp-impact) { position: relative; z-index: 1; }
.pp-story { box-shadow: 0 -34px 70px -30px rgba(0, 0, 0, 0.45); }
@media (prefers-reduced-motion: reduce) {
  .pp-middle { position: static; }
}

/* =========================================================================
   v9.19 . entrances for the media
   Frames open from the floor while the picture settles out of a slight
   zoom. Base (no JS) is the finished frame; the reveal engine's timeout
   failsafe still applies through .is-in.
   ========================================================================= */
.js .pp-mcard.reveal .pp-mcard__frame,
.js .pp-impact__moment.reveal .pp-impact__ph,
.js .pp-note__media.reveal .pp-note__media-frame,
.js .pp-talks__photo.reveal .pp-talks__photo-frame {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 950ms var(--ease);
}
.js .pp-mcard.reveal.is-in .pp-mcard__frame,
.js .pp-impact__moment.reveal.is-in .pp-impact__ph,
.js .pp-note__media.reveal.is-in .pp-note__media-frame,
.js .pp-talks__photo.reveal.is-in .pp-talks__photo-frame {
  clip-path: inset(0 0 0 0);
}
/* the stagger follows the reveal's own beat */
.js .pp-mcard.reveal[data-delay='1'] .pp-mcard__frame { transition-delay: 90ms; }
.js .pp-mcard.reveal[data-delay='2'] .pp-mcard__frame { transition-delay: 180ms; }
.js .pp-mcard.reveal[data-delay='3'] .pp-mcard__frame { transition-delay: 270ms; }
.js .pp-impact__moment.reveal .pp-impact__ph--tall { transition-delay: 220ms; }
/* the picture settles out of a zoom while the frame opens */
.js .pp-mcard.reveal .pp-mcard__frame img,
.js .pp-mcard.reveal .pp-mcard__frame video {
  scale: 1.14;
  transition: transform 700ms var(--ease), filter 700ms var(--ease),
              scale 1250ms var(--ease);
}
.js .pp-mcard.reveal.is-in .pp-mcard__frame img,
.js .pp-mcard.reveal.is-in .pp-mcard__frame video { scale: 1; }
.js .pp-impact__moment.reveal .pp-impact__ph img {
  scale: 1.14;
  transition: scale 1250ms var(--ease);
}
.js .pp-impact__moment.reveal.is-in .pp-impact__ph img { scale: 1; }
.js .pp-note__media.reveal .pp-note__media-frame video {
  scale: 1.1;
  transition: filter 600ms var(--ease), scale 1250ms var(--ease);
}
.js .pp-note__media.reveal.is-in .pp-note__media-frame video { scale: 1; }
/* the organization cards rise one after another (opacity and scale only:
   translate and rotate belong to the sway) */
.js .pp-impact__orgs.reveal .pp-org {
  opacity: 0; scale: 0.95;
  transition: opacity 700ms var(--ease), scale 700ms var(--ease),
              translate var(--dur-std) var(--ease),
              rotate 500ms var(--ease),
              border-color var(--dur-std) var(--ease),
              box-shadow var(--dur-std) var(--ease);
}
.js .pp-impact__orgs.reveal.is-in .pp-org { opacity: 1; scale: 1; }
.js .pp-impact__orgs.reveal.is-in .pp-org:nth-child(2) { transition-delay: 180ms; }
.js .pp-impact__orgs.reveal.is-in .pp-org:nth-child(3) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .js .pp-mcard.reveal .pp-mcard__frame,
  .js .pp-impact__moment.reveal .pp-impact__ph,
  .js .pp-note__media.reveal .pp-note__media-frame,
  .js .pp-talks__photo.reveal .pp-talks__photo-frame {
    clip-path: none; transition: none;
  }
  .js .pp-mcard.reveal .pp-mcard__frame img,
  .js .pp-mcard.reveal .pp-mcard__frame video,
  .js .pp-impact__moment.reveal .pp-impact__ph img,
  .js .pp-note__media.reveal .pp-note__media-frame video {
    scale: none; transition: none;
  }
  .js .pp-impact__orgs.reveal .pp-org,
  .js .pp-impact__orgs.reveal.is-in .pp-org {
    opacity: 1; scale: none; transition: none;
  }
}

/* =========================================================================
   COACH v9.2 . the Alura treatment
   Eyebrow, headline, then an indented statement that fills with ink
   (initStoryFill drives .pp-coach__fill), a staircase of four frames from
   the client's own feed, and the checklist recast as a bento grid whose
   last tile carries the closing line and the door.
   ========================================================================= */

/* ---- the indented statement ---- */
.pp-coach__fill { margin-top: var(--s-lg); }
@media (min-width: 900px) {
  .pp-coach__fill { margin-left: 31%; }
}
.pp-coach__fill p {
  margin: 0;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  font-weight: 500; line-height: 1.5;
  color: var(--ink); max-width: 44ch;
}
.pp-coach__fill p + p { margin-top: 1em; }
/* unread ink stays a ghost only while the engine is painting; base = read */
.pp-coach__fill .fw { display: inline; }

/* ---- who this work is for: the seven signs, two columns ---- */
.pp-fit__lead {
  margin-top: var(--s-lg);
  font-size: clamp(1.15rem, 1.9vw, 1.6rem); font-weight: 500;
  color: var(--ink);
}
.pp-fit {
  justify-self: stretch; width: 100%;
  margin: var(--s-sm) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(24px, 3.4vw, 56px);
}
.pp-fit li {
  position: relative; padding-left: 28px;
  font-size: var(--t-body); line-height: 1.6; color: var(--ink-muted);
  text-wrap: pretty;
}
.pp-fit li::before {
  content: ''; position: absolute; left: 0; top: 0.74em;
  width: 15px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 600ms var(--ease) calc(var(--i, 0) * 90ms);
}
.pp-fit.is-in li::before { transform: scaleX(1); }
.no-js .pp-fit li::before { transform: none; }
@media (max-width: 700px) {
  .pp-fit { grid-template-columns: minmax(0, 1fr); }
}

/* ---- the staircase of frames ---- */
/* .pp-coach__inner is a start-justified grid: full-width children must
   say so, or they shrink to content */
.pp-coach__media, .pp-bento { justify-self: stretch; width: 100%; }
.pp-coach__media {
  margin-top: var(--s-xl);
  display: grid; gap: clamp(14px, 1.9vw, 26px);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
}
.pp-mcard { margin: 0; position: relative; }
.pp-mcard:nth-child(2) { margin-top: clamp(26px, 4vw, 64px); }
.pp-mcard:nth-child(3) { margin-top: clamp(52px, 8vw, 128px); }
.pp-mcard:nth-child(4) { margin-top: clamp(78px, 12vw, 192px); }
.pp-mcard__glyph {
  position: absolute; top: -1.7em; left: 2px;
  color: var(--gold); font-size: 0.95rem; line-height: 1; font-weight: 400;
}
.pp-mcard:nth-child(even) .pp-mcard__glyph { left: auto; right: 2px; }
.pp-mcard__frame {
  display: block; aspect-ratio: 4 / 5;
  overflow: hidden; border-radius: 6px;
  background: var(--surface);
}
.pp-mcard__frame img,
.pp-mcard__frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.86) contrast(1.05) brightness(0.93);
  transition: transform 700ms var(--ease), filter 700ms var(--ease);
}
.pp-mcard:hover .pp-mcard__frame img,
.pp-mcard:hover .pp-mcard__frame video {
  transform: scale(1.045);
  filter: saturate(1) contrast(1.02) brightness(1);
}
.pp-mcard__cap {
  margin-top: 14px;
  display: flex; align-items: baseline; gap: 10px;
}
.pp-mcard__name {
  font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.01em;
  color: var(--ink);
}
.pp-mcard__role {
  font-size: var(--t-caption); letter-spacing: 0.16em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .pp-coach__media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-mcard:nth-child(3) { margin-top: 0; }
  .pp-mcard:nth-child(2), .pp-mcard:nth-child(4) { margin-top: clamp(26px, 6vw, 48px); }
}

/* ---- the checklist as a bento ---- */
.pp-bento__lead {
  margin-top: var(--s-xl);
  font-size: clamp(1.2rem, 1.9vw, 1.65rem); line-height: 1.45;
  font-weight: 500; color: var(--ink);
}
.pp-bento {
  margin-top: var(--s-md);
  display: grid; gap: clamp(12px, 1.4vw, 18px);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.pp-bento__tile {
  position: relative; overflow: clip;
  padding: clamp(20px, 2.2vw, 30px);
  background: var(--surface);
  border: 1px solid rgba(244, 232, 218, 0.09);
  border-radius: 10px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  transition: translate var(--dur-std) var(--ease),
              border-color var(--dur-std) var(--ease);
}
/* the irregular rhythm: 5-4-3 over 4-3-5 */
.pp-bento__tile:nth-child(1) { grid-column: span 5; }
.pp-bento__tile:nth-child(2) { grid-column: span 4; }
.pp-bento__tile:nth-child(3) { grid-column: span 3; }
.pp-bento__tile:nth-child(4) { grid-column: span 4; }
.pp-bento__tile:nth-child(5) { grid-column: span 3; }
.pp-bento__tile:nth-child(6) { grid-column: span 5; }
.pp-bento__tile:hover {
  translate: 0 -5px;
  border-color: rgba(193, 154, 75, 0.38);
}
/* the same sheen that lives in the story bento, on its own clock */
.pp-bento__tile::after {
  content: ''; position: absolute; top: -20%; left: -70%;
  width: 34%; height: 140%;
  background: linear-gradient(105deg,
    transparent 0%, rgba(244, 232, 218, 0.07) 50%, transparent 100%);
  transform: skewX(-18deg);
  animation: pp-sheen 6.4s ease-in-out infinite;
  pointer-events: none;
}
.pp-bento__tile:nth-child(2)::after { animation-delay: 1.1s; }
.pp-bento__tile:nth-child(3)::after { animation-delay: 2.2s; }
.pp-bento__tile:nth-child(4)::after { animation-delay: 3.3s; }
.pp-bento__tile:nth-child(5)::after { animation-delay: 4.4s; }
.pp-bento__tile:nth-child(6)::after { animation-delay: 5.5s; }
.pp-bento__num {
  position: absolute; top: 16px; right: 18px;
  font-size: 0.6875rem; letter-spacing: 0.16em;
  color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.pp-bento__seal {
  width: 30px; height: 30px; flex: none;
  border: 1px solid rgba(193, 154, 75, 0.5); border-radius: 50%;
  color: var(--gold);
  display: grid; place-items: center;
}
.pp-bento__seal svg { width: 14px; height: 14px; }
.pp-bento__tile > p {
  margin: 0;
  font-size: var(--t-body); line-height: 1.55; color: var(--ink);
}
.pp-bento__tile--cta {
  background: var(--surface-raised);
  border-color: rgba(193, 154, 75, 0.28);
}
.pp-bento__honest {
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  font-weight: 300; font-style: italic; line-height: 1.45;
  color: var(--gold);
}
.pp-bento__tile--cta .btn { margin-top: auto; }
@media (max-width: 980px) {
  .pp-bento__tile,
  .pp-bento__tile:nth-child(n) { grid-column: span 6; }
  .pp-bento__tile--cta { grid-column: span 12; }
}
@media (max-width: 620px) {
  .pp-bento__tile,
  .pp-bento__tile:nth-child(n) { grid-column: span 12; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-bento__tile::after { animation: none; display: none; }
  .pp-bento__tile, .pp-bento__tile:hover { translate: none; transition: none; }
  .pp-mcard__frame img, .pp-mcard__frame video,
  .pp-mcard:hover .pp-mcard__frame img, .pp-mcard:hover .pp-mcard__frame video {
    transform: none; transition: none;
  }
  .pp-coach__fill .fw { opacity: 1 !important; }
}


/* =========================================================================
   PCV ON HOME v9.59.1 . the coaching diagrams' grammar, used sparingly:
   the walk under the philosophy's sequence, the climb in the coach CTA tile
   ========================================================================= */
.pcv-line { stroke: rgba(244, 232, 218, 0.18); stroke-width: 1; }
.pcv-spark { stroke: rgba(244, 232, 218, 0.22); stroke-width: 1.2; stroke-linecap: round; }
.pcv-spark--pulse {
  stroke: var(--gold, #C19A4B); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 16 84;
  animation: pcv-dash 3.2s linear infinite;
}
.pcv-node { fill: var(--gold, #C19A4B); animation: pcv-blip 2.8s ease-in-out infinite; }
@keyframes pcv-dash { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes pcv-blip { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }

.pp-middle__walk { display: block; width: min(420px, 72%); height: auto; margin-top: -6px; }
.pp-bento__climb { display: block; width: min(190px, 72%); height: auto; margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
  .pcv-spark--pulse, .pcv-node { animation: none; }
  .pcv-node { opacity: 1; }
}

/* pf-tall-inside: right:-5% + rotate colocavam a moldura alta para fora da
   tela em telas estreitas. No celular ela fica dentro do proprio bloco. */
@media (max-width: 720px) {
  .pp-impact__ph--tall { right: 0; bottom: -10%; width: 38%; }
}

/* pp-hero-actions-mobile: on phones the portrait rises to 46% and sits right
   behind the action row, where the primary has no fill and the ghost's border
   is #2C2624. Both dissolved into the photograph. Each button now carries its
   own ground, so the row reads on any frame of the picture. */
@media (max-width: 900px) {
  .pp-hero__actions .btn {
    background-color: rgba(10, 8, 7, 0.66);
    -webkit-backdrop-filter: blur(7px);
            backdrop-filter: blur(7px);
    border-color: rgba(244, 232, 218, 0.26);
  }
  .pp-hero__actions .btn--primary { border-color: rgba(193, 154, 75, 0.55); }
  .pp-hero__actions .pp-textlink { text-shadow: 0 1px 12px rgba(10, 8, 7, 0.95); }
}

/* pp-talks-mobile-fix: the statement carried max-width 24ch (626px) inside a
   341px column, so CONVERSATIONS and STOPS ran off the screen. The fanned
   rotations belong to the desktop train; stacked on a phone they only read
   as crooked. Both settle here. */
@media (max-width: 700px) {
  .pp-talks__giant {
    max-width: 100%; padding-inline: 0;
    font-size: clamp(1.6rem, 7.4vw, 2.5rem);
    line-height: 1.1; text-wrap: balance;
  }
  .pp-talks__train {
    flex-direction: column; align-items: center;
    gap: clamp(20px, 3.4vh, 32px); padding-inline: 0;
  }
  .pp-tcard { width: min(300px, 100%); }
  .pp-tcard:nth-child(1),
  .pp-tcard:nth-child(2),
  .pp-tcard:nth-child(3) { rotate: 0deg; margin-top: 0; }
}

/* pp-legacy-names-mobile: the two names sat inside a 15% inset of a 242px
   block, leaving 170px for 165px of type. BROOKLYN and LONDON touched. */
@media (max-width: 700px) {
  .pp-legacy__names { padding-inline: 6%; }
  .pp-legacy__names span { font-size: 0.66rem; letter-spacing: 0.12em; }
}

/* Phones (client review 2026-10-07): a one-column grid with justify-items:start
   sizes its implicit column to the longest word of the title, so headings
   and the prose beside them ran past the edge. Pin the column to the
   container and let titles scale with the viewport. v12.9.2 */
@media (max-width: 640px) {
  main .container:where([class*="__inner"], [class*="__head"]) { grid-template-columns: minmax(0, 1fr); }
  main .container:where([class*="__inner"], [class*="__head"]) > * { max-width: 100%; min-width: 0; }
  .pp-h2 { font-size: clamp(1.6rem, 7.4vw, 2.3rem); letter-spacing: -0.025em; max-width: 100%; }
  .pp-h2 .w { max-width: 100%; }
  .pp-prose, .pp-prose p { max-width: 100%; }
}

/* v12.9.3: the three leftovers from the phone scan. About's faith title
   had its own 2.3rem floor; the coaching question wall ran two columns on
   narrow phones; the podcast topic rows had a third column with no width. */
@media (max-width: 640px) {
  .pa-faith.pp-cream .pp-h2, main .pp-h2 { font-size: clamp(1.6rem, 7.4vw, 2.3rem) !important; overflow-wrap: anywhere; }
  .pm-deck__row { grid-template-columns: 3.2em minmax(0, 1fr); }
  .pm-deck__row > :nth-child(3) { grid-column: 2; }
}
@media (max-width: 420px) {
  .pc-wall { grid-template-columns: minmax(0, 1fr); }
}

/* v12.10.1: the record's card stack is a desktop gesture; on phones the cards covered each other's text, so they stand in a plain column. */
@media (max-width: 900px) {
  .pp-row { position: static; min-height: 0; }
}