/* People Purpose design system — Jul 17, 2026
   ONE card, ONE FAQ bubble, ONE numeral, ONE stat. Golden ratio (phi = 1.618) throughout.
   Load AFTER styles.css and site-components.css. Retires the competing lp-*, crs-*, hf-* treatments.
   Brand: purple #330033, gold #947D59, gold-ink #6E5A37, linen #F7F3F1, linen-2 #efe8e2, ink #241a1f.
   Display: Kaisei Decol. Body: Raleway. */

:root{
  /* ---- Golden-ratio type scale (base 1rem) ---- */
  --pp-fine:0.764rem;
  --pp-body:1rem;
  --pp-sub:1.236rem;
  --pp-head:1.618rem;
  --pp-title:2.618rem;
  --pp-hero:4.236rem;

  /* ---- Golden-ratio spacing scale ---- */
  --pp-s1:0.618rem;
  --pp-s2:1rem;
  --pp-s3:1.618rem;
  --pp-s4:2.618rem;
  --pp-s5:4.236rem;
  --pp-s6:6.854rem;

  /* ---- Two radii. Not six. ---- */
  --pp-r:10px;
  --pp-r-lg:18px;

  /* ---- Measure: ~65 characters ---- */
  --pp-measure:38rem;

  /* ---- Motion ---- */
  --pp-ease:cubic-bezier(.2,.8,.3,1);
  --pp-ease-pop:cubic-bezier(.2,.8,.25,1.25);
  --pp-dur:.55s;
}

/* ============ SECTION RHYTHM ============ */
.pp-sec{padding:var(--pp-s5) 1.25rem}
.pp-sec--tight{padding:var(--pp-s4) 1.25rem}
.pp-sec--band{background:var(--linen-2)}
.pp-sec--deep{background:var(--purple)}
.pp-sec--deep h2,.pp-sec--deep h3{color:var(--linen)}
.pp-sec--deep p{color:rgba(247,243,241,.88)}
.pp-wrap{max-width:66rem;margin-inline:auto}
.pp-head{max-width:44rem;margin:0 auto var(--pp-s3);text-align:center}
.pp-head h2{font-family:var(--display);color:var(--purple);font-size:clamp(1.7rem,3.4vw,var(--pp-title));line-height:1.16;text-wrap:balance;margin-bottom:var(--pp-s1)}
.pp-head p{font-size:var(--pp-body);line-height:1.6;max-width:var(--pp-measure);margin-inline:auto}
.pp-eyebrow{font-family:var(--body);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-ink);font-size:var(--pp-fine);display:block;margin-bottom:var(--pp-s1)}
.pp-sec--deep .pp-eyebrow{color:var(--gold-bright)}
.pp-prose{max-width:var(--pp-measure)}

/* ============ THE CARD (one component, sitewide) ============ */
.pp-card{
  background:#fff;
  border:2px solid rgba(148,125,89,.35);
  border-radius:var(--pp-r-lg);
  padding:var(--pp-s3);
  box-shadow:0 4px 14px rgba(51,0,51,.05);
  transition:transform .35s var(--pp-ease),box-shadow .35s var(--pp-ease),border-color .3s ease;
}
.pp-card--flat{box-shadow:none}
.pp-card--rule{border-left-width:6px;border-left-color:var(--gold);border-radius:0 var(--pp-r-lg) var(--pp-r-lg) 0}
a.pp-card,button.pp-card,.pp-card--click{cursor:pointer;display:block;text-align:left;text-decoration:none;color:inherit;font:inherit;width:100%}
.pp-card:is(a,button,.pp-card--click):hover,.pp-card--hover:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 36px rgba(51,0,51,.12);
  border-color:var(--gold);
}
.pp-card.is-on{border-color:var(--gold);box-shadow:0 16px 36px rgba(51,0,51,.12)}
.pp-card h3{font-family:var(--display);color:var(--purple);font-size:var(--pp-sub);line-height:1.2;margin-bottom:var(--pp-s1)}
.pp-card p{font-size:var(--pp-body);line-height:1.55}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--pp-s2)}
.pp-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* Card arrow affordance */
.pp-go{color:var(--gold-ink);font-weight:700;display:inline-block;margin-top:var(--pp-s2)}
.pp-go::after{content:"\2192";margin-left:.4rem;display:inline-block;transition:transform .3s var(--pp-ease)}
.pp-card:hover .pp-go::after,a:hover .pp-go::after{transform:translateX(6px)}

/* ============ THE NUMERAL (one treatment, sitewide) ============ */
.pp-num{
  font-family:var(--display);font-weight:700;line-height:1;
  font-size:clamp(2.6rem,4.6vw,3.6rem);
  position:relative;display:inline-grid;place-items:center;
  min-width:2.618rem;padding:0 4px;color:var(--gold);
}
@supports (-webkit-text-stroke:2px #000){
  .pp-num{color:transparent;-webkit-text-stroke:2.2px var(--gold)}
  .pp-num::before{content:attr(data-n);position:absolute;left:calc(50% + 4px);top:calc(50% + 4px);transform:translate(-50%,-50%);color:var(--purple);-webkit-text-stroke:0;opacity:.16;z-index:-1}
}
.pp-sec--deep .pp-num{color:var(--gold)}
@supports (-webkit-text-stroke:2px #000){
  .pp-sec--deep .pp-num{color:transparent;-webkit-text-stroke:2px var(--gold)}
  .pp-sec--deep .pp-num::before{color:var(--linen);opacity:.14}
}

/* ============ THE STAT (count-up target) ============ */
.pp-stat{text-align:center}
.pp-stat .v{font-family:var(--display);font-size:clamp(2rem,3.4vw,var(--pp-title));color:var(--purple);line-height:1}
.pp-sec--deep .pp-stat .v{color:var(--gold-bright)}
.pp-stat .l{font-size:var(--pp-fine);color:var(--text-muted);margin-top:var(--pp-s1);line-height:1.45}
.pp-sec--deep .pp-stat .l{color:rgba(247,243,241,.75)}

/* ============ THE FAQ BUBBLE (one treatment, sitewide) ============ */
.pp-faq,.hf-list,.fcp-faq,.crs-bubbles{display:grid;gap:var(--pp-s2);max-width:46rem;margin-inline:auto}
.pp-faq details,.hf-list details,.fcp-faq details,.crs-bubbles details{
  background:#fff;border:2px solid rgba(148,125,89,.35);border-radius:var(--pp-r-lg);
  box-shadow:0 4px 14px rgba(51,0,51,.05);overflow:hidden;
  transition:box-shadow .3s ease,border-color .3s ease;
}
.pp-faq details:hover,.hf-list details:hover,.fcp-faq details:hover,.crs-bubbles details:hover{box-shadow:0 10px 26px rgba(51,0,51,.10);border-color:var(--gold)}
.pp-faq details[open],.hf-list details[open],.fcp-faq details[open],.crs-bubbles details[open]{border-color:var(--gold)}
.pp-faq summary,.hf-list summary,.fcp-faq summary,.crs-bubbles summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--pp-s2);
  padding:var(--pp-s2) var(--pp-s3);
  font-family:var(--display);font-weight:700;font-size:clamp(1.02rem,1.5vw,var(--pp-sub));
  color:var(--purple);line-height:1.25;
}
.pp-faq summary::-webkit-details-marker,.hf-list summary::-webkit-details-marker,.fcp-faq summary::-webkit-details-marker,.crs-bubbles summary::-webkit-details-marker{display:none}
.pp-faq summary::marker,.hf-list summary::marker,.fcp-faq summary::marker,.crs-bubbles summary::marker{content:""}
.pp-faq summary::after,.hf-list summary::after,.fcp-faq summary::after,.crs-bubbles summary::after{
  content:"";width:11px;height:11px;flex:none;margin:-4px .3rem 0 0;
  border-right:2.5px solid var(--gold-ink);border-bottom:2.5px solid var(--gold-ink);
  transform:rotate(45deg);transition:transform .35s var(--pp-ease);
}
.pp-faq details[open] summary::after,.hf-list details[open] summary::after,.fcp-faq details[open] summary::after,.crs-bubbles details[open] summary::after{transform:rotate(225deg);margin-top:4px}
.pp-faq details p,.hf-list details p,.fcp-faq details p,.crs-bubbles details p{padding:0 var(--pp-s3) var(--pp-s2);margin:0;line-height:1.6}
.pp-faq details p a,.hf-list details p a,.fcp-faq details p a,.crs-bubbles details p a{color:var(--gold-ink);font-weight:700}

/* ============ CTA ROW ============ */
.pp-cta{display:flex;gap:var(--pp-s1);flex-wrap:wrap}
.pp-cta--center{justify-content:center}

/* ============ MOTION (Stage 2 hooks) ============ */
.pp-rise{opacity:0;transform:translateY(20px)}
.pp-rise.in{opacity:1;transform:none;transition:opacity var(--pp-dur) ease,transform .6s var(--pp-ease-pop)}
.pp-stagger>*{opacity:0;transform:translateY(20px)}
.pp-stagger.in>*{opacity:1;transform:none;transition:opacity var(--pp-dur) ease,transform .6s var(--pp-ease-pop)}
.pp-stagger.in>*:nth-child(1){transition-delay:.05s}
.pp-stagger.in>*:nth-child(2){transition-delay:.16s}
.pp-stagger.in>*:nth-child(3){transition-delay:.27s}
.pp-stagger.in>*:nth-child(4){transition-delay:.38s}
.pp-stagger.in>*:nth-child(5){transition-delay:.49s}
.pp-stagger.in>*:nth-child(6){transition-delay:.60s}
.pp-pop{animation:ppPop .5s var(--pp-ease-pop)}
@keyframes ppPop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

/* Blueprint construction lines (Stage 2) — injected by pp-motion.js */

/* ============ ACCESSIBILITY ============ */
.pp-card:focus-visible,.pp-faq summary:focus-visible,a:focus-visible,button:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .pp-rise,.pp-stagger>*{opacity:1 !important;transform:none !important}
  .pp-card:hover{transform:none !important}
}

/* ============ RESPONSIVE ============ */
@media(max-width:640px){
  .pp-sec{padding:var(--pp-s4) 1.1rem}
  .pp-card{padding:var(--pp-s2)}
}