/* =========================================================
   PF tokens — modern stylesheet, brand-true
   Colors and Lato-family fonts sampled from existing site.

   NOTE: the Google Fonts @import from the original handoff
   has been removed deliberately. Lato is self-hosted via
   ../fonts/fonts.css so no visitor data reaches a third
   party (keeps the tool consent-banner-free).
   ========================================================= */

:root {
  /* ---------- Brand ---------- */
  --pf-sand:        #e3dfd3;   /* page bg (slightly lifted from sampled #e1ddd2) */
  --pf-sand-2:      #eceadf;
  --pf-bone:        #f4f2ec;   /* warm near-white */
  --pf-white:       #ffffff;
  --pf-teal:        #275358;   /* primary brand */
  --pf-teal-deep:   #1b3e44;
  --pf-teal-ink:    #0f2a2e;   /* darkest – headlines on light */
  --pf-coral:       #f07f56;   /* accent / CTA */
  --pf-coral-deep:  #d96838;
  --pf-ink:         #1c1b18;   /* body text on light */
  --pf-mute:        #5b605d;   /* secondary text */
  --pf-rule:        #cdc8ba;   /* hairlines on sand */
  --pf-rule-dk:     #3a6066;   /* hairlines on teal */

  /* ---------- Type ---------- */
  --pf-font:        'Lato', -apple-system, system-ui, sans-serif;
  --pf-tight:      -0.022em;
  --pf-tighter:    -0.034em;

  /* Display scale (clamped, responsive) */
  --pf-d1:  clamp(56px, 8.4vw, 128px);   /* editorial hero */
  --pf-d2:  clamp(44px, 5.6vw, 84px);    /* consulting hero */
  --pf-d3:  clamp(34px, 4vw, 56px);      /* section openers */
  --pf-h1:  40px;
  --pf-h2:  30px;
  --pf-h3:  22px;
  --pf-h4:  18px;
  --pf-body:16px;
  --pf-sm:  14px;
  --pf-xs:  12px;
  --pf-eyebrow: 11px;     /* uppercase tracked label */

  /* ---------- Spacing (8pt baseline) ---------- */
  --pf-1:   4px;
  --pf-2:   8px;
  --pf-3:  12px;
  --pf-4:  16px;
  --pf-5:  24px;
  --pf-6:  32px;
  --pf-7:  48px;
  --pf-8:  64px;
  --pf-9:  96px;
  --pf-10:128px;

  /* ---------- Radii ---------- */
  --pf-r-0: 0px;
  --pf-r-1: 2px;
  --pf-r-2: 4px;
  --pf-r-3: 8px;
  --pf-r-pill: 999px;

  /* ---------- Other ---------- */
  --pf-hair: 1px solid var(--pf-rule);
  --pf-hair-dk: 1px solid var(--pf-rule-dk);
  --pf-ease: cubic-bezier(.2,.7,.2,1);

  /* =========================================================
     DATA-VIZ EXTENSION — not part of the original handoff.
     The handoff defines brand colours only; the diagnostic
     needs chart + classification colours. These are added
     here, clearly separated, and tuned to the muted
     "modern consulting" register (desaturated, earthy) so
     they sit beside teal and coral rather than fight them.
     Pending sign-off from the design-system owner.
     ========================================================= */

  /* Maturity-stage colours — semantic low -> high, echoing
     the Maturity Model poster (rust / ochre / forest). */
  --pf-immature: #a8483c;   /* deep brick rust */
  --pf-managed:  #bf8b3c;   /* muted ochre */
  --pf-leading:  #41785a;   /* teal-leaning forest */

  /* Dimension accent strokes — a muted five-hue family built
     around the brand teal. Used only as quiet left-border /
     top-border accents; the radar itself stays single-teal. */
  --pf-dim-leadership:   #3a6b72;   /* lifted teal */
  --pf-dim-organization: #a98545;   /* warm sand-brown */
  --pf-dim-people:       #4f6582;   /* muted slate-blue */
  --pf-dim-tools:        #9c5e4a;   /* terracotta-brown */
  --pf-dim-processes:    #5f7d56;   /* sage green */

  /* Radar dataset — brand teal, translucent fill. */
  --pf-radar-fill:   rgba(39, 83, 88, 0.16);
  --pf-radar-stroke: #275358;
}

/* ---------- Base helpers (scoped via .pf-root so the canvas chrome
   isn't affected) ---------- */
.pf-root {
  font-family: var(--pf-font);
  color: var(--pf-ink);
  background: var(--pf-sand);
  font-size: var(--pf-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pf-root *,
.pf-root *::before,
.pf-root *::after { box-sizing: border-box; }

.pf-eyebrow {
  font-size: var(--pf-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--pf-mute);
}
.pf-eyebrow--teal { color: var(--pf-teal); }
.pf-eyebrow--coral { color: var(--pf-coral-deep); }

.pf-h1 { font-size: var(--pf-h1); font-weight: 900; letter-spacing: var(--pf-tight); line-height: 1.05; color: var(--pf-teal-ink); }
.pf-h2 { font-size: var(--pf-h2); font-weight: 900; letter-spacing: var(--pf-tight); line-height: 1.1; color: var(--pf-teal-ink); }
.pf-h3 { font-size: var(--pf-h3); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; color: var(--pf-teal-ink); }
.pf-h4 { font-size: var(--pf-h4); font-weight: 700; line-height: 1.3; color: var(--pf-teal-ink); }
.pf-body { font-size: var(--pf-body); line-height: 1.6; color: var(--pf-ink); }
.pf-sm { font-size: var(--pf-sm); color: var(--pf-mute); }
.pf-num { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; font-weight: 900; }

/* ---------- Buttons ---------- */
.pf-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: inherit;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 22px;
  border: 0; border-radius: var(--pf-r-2);
  cursor: pointer; user-select: none;
  transition: background .18s var(--pf-ease), color .18s var(--pf-ease), transform .18s var(--pf-ease);
  text-decoration: none;
}
.pf-btn:hover { transform: translateY(-1px); }
.pf-btn:disabled { opacity: .45; cursor: not-allowed; }
.pf-btn:disabled:hover { transform: none; }
.pf-btn--coral { background: var(--pf-coral); color: #fff; }
.pf-btn--coral:hover { background: var(--pf-coral-deep); }
.pf-btn--teal  { background: var(--pf-teal); color: #fff; }
.pf-btn--teal:hover { background: var(--pf-teal-deep); }
.pf-btn--ghost { background: transparent; color: var(--pf-teal-ink); box-shadow: inset 0 0 0 1px currentColor; }
.pf-btn--ghost:hover { background: var(--pf-teal-ink); color: #fff; }
.pf-btn--ghost-light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.pf-btn--ghost-light:hover { background: #fff; color: var(--pf-teal-ink); }
.pf-btn--link {
  background: transparent; color: var(--pf-teal-ink);
  padding: 6px 0;
  border-radius: 0;
  text-transform: none; letter-spacing: 0; font-size: 15px;
  box-shadow: inset 0 -1px 0 var(--pf-teal-ink);
}
.pf-btn--link:hover { background: transparent; box-shadow: inset 0 -2px 0 var(--pf-coral); color: var(--pf-coral-deep); transform: none; }

/* ---------- Form fields ---------- */
.pf-field {
  width: 100%;
  font-family: inherit; font-size: 15px;
  padding: 14px 16px;
  background: var(--pf-white);
  border: 1px solid var(--pf-rule);
  border-radius: var(--pf-r-2);
  color: var(--pf-ink);
  transition: border-color .15s var(--pf-ease), box-shadow .15s var(--pf-ease);
}
.pf-field:focus { outline: none; border-color: var(--pf-teal); box-shadow: 0 0 0 3px rgba(39,83,88,.12); }
.pf-field::placeholder { color: #9aa09c; }

/* ---------- Badges / chips ---------- */
.pf-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--pf-r-pill);
  background: rgba(39,83,88,.10); color: var(--pf-teal);
}
.pf-badge--coral { background: rgba(240,127,86,.14); color: var(--pf-coral-deep); }
.pf-badge--solid { background: var(--pf-teal); color: #fff; }
.pf-badge--new { background: var(--pf-coral); color: #fff; }

/* ---------- Tags / pill rule ---------- */
.pf-tag {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 700;
  padding: 6px 12px;
  border: 1px solid var(--pf-rule); border-radius: var(--pf-r-pill);
  color: var(--pf-teal-ink); background: transparent;
}

/* ---------- Card primitives ---------- */
.pf-card {
  background: var(--pf-white);
  border-radius: var(--pf-r-2);
  border: 1px solid transparent;
  transition: border-color .15s var(--pf-ease), transform .2s var(--pf-ease);
}
.pf-card--lined {
  background: transparent;
  border-color: var(--pf-rule);
}
.pf-card:hover { border-color: var(--pf-teal); }

/* ---------- Hairlines & rules ---------- */
.pf-hr   { height: 1px; background: var(--pf-rule); border: 0; }
.pf-hr-dk{ height: 1px; background: var(--pf-rule-dk); border: 0; }

/* ---------- Sections ---------- */
.pf-section-light { background: var(--pf-sand); }
.pf-section-bone  { background: var(--pf-bone); }
.pf-section-white { background: var(--pf-white); }
.pf-section-teal  { background: var(--pf-teal); color: #fff; }
.pf-section-teal .pf-h1,
.pf-section-teal .pf-h2,
.pf-section-teal .pf-h3,
.pf-section-teal .pf-h4 { color: #fff; }
.pf-section-teal .pf-eyebrow { color: rgba(255,255,255,.65); }
.pf-section-teal .pf-sm,
.pf-section-teal .pf-body { color: rgba(255,255,255,.85); }

/* ---------- Marquee (logos / training cities) ---------- */
@keyframes pf-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.pf-marquee { overflow: hidden; }
.pf-marquee__track {
  display: flex; gap: 64px;
  width: max-content;
  animation: pf-marquee 28s linear infinite;
}

/* ---------- Reveal helper ---------- */
.pf-reveal { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--pf-ease), transform .7s var(--pf-ease); }
.pf-reveal--in { opacity: 1; transform: none; }

/* ---------- Logo lockup (recreated faithfully from existing brand) ---------- */
.pf-logo { display: inline-flex; align-items: flex-end; line-height: 1; gap: 4px; }
.pf-logo__product {
  font-weight: 700; color: var(--pf-teal-ink);
  font-size: 22px; letter-spacing: -0.02em;
}
.pf-logo__focus {
  font-weight: 700; color: #fff; background: var(--pf-teal);
  font-size: 22px; padding: 8px 12px;
  letter-spacing: -0.02em;
}
.pf-logo--light .pf-logo__product { color: #fff; }
.pf-logo--light .pf-logo__focus { background: var(--pf-coral); }