/* ---- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { font-size: 106.25%; /* 17px root — the scale is authored against this */
       -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
::selection { background: var(--emerald); color: #fff; }

/* ---- 3. Typography ------------------------------------------------------ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.h-display { font-size: clamp(2.7rem, 5.1vw, 4.4rem); line-height: 1.0; letter-spacing: -0.042em; font-weight: 800; }
.h1        { font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.04; letter-spacing: -0.036em; }
.h2        { font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.08; letter-spacing: -0.034em; }
.h3        { font-size: clamp(1.5rem, 2.1vw, 2.05rem); line-height: 1.16; letter-spacing: -0.024em; }
.h4        { font-size: 1.16rem; line-height: 1.3; letter-spacing: -0.015em; font-weight: 600; }

.lede { font-size: clamp(1.06rem, 1.35vw, 1.26rem); line-height: 1.6; color: var(--ink-3); }
.small { font-size: .92rem; line-height: 1.55; }
.tiny  { font-size: .8rem; line-height: 1.5; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .715rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  /* Gold, not emerald: the eyebrow appears once per section on every page, so
     it is the cheapest place to make the third brand colour present. The ink
     step is used because gold itself is 3.06:1 on white — fine for a rule,
     not for 11px type. */
  color: var(--gold-ink);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before {
  content: '';
  width: 22px; height: 2px;
  background: var(--gold);
  opacity: 1;
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--emerald { color: var(--emerald-700); }

.on-dark .eyebrow { color: var(--gold-lt); }
.on-dark .eyebrow::before { background: var(--gold-lt); }
.eyebrow--emerald::before { background: var(--emerald); }
.on-dark .eyebrow--emerald::before { background: var(--emerald-300); }
.on-dark .eyebrow--gold { color: var(--gold); }
.eyebrow--mg { color: var(--magenta); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark .lede { color: rgba(255,255,255,.72); }
.on-dark { color: rgba(255,255,255,.76); }

/* accents inside headlines */
.acc-em { color: var(--emerald); }
.on-dark .acc-em { color: var(--emerald-300); }
.acc-mg { color: var(--magenta); }
.on-dark .acc-mg { color: var(--magenta-lt); }
.acc-gd { color: var(--gold); }
.on-dark .acc-gd { color: var(--gold); }

.num {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

/* ---- 4. Layout ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--sec-y); position: relative; }
.section--tight { padding-block: clamp(52px, 6vw, 88px); }
.grid { display: grid; gap: clamp(20px, 2.4vw, 34px); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1000px) { .g3, .g4, .g6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .g2, .g3, .g4, .g6 { grid-template-columns: 1fr; } }

.stack-sm > * + * { margin-top: .6rem; }
.stack    > * + * { margin-top: 1.1rem; }
.stack-lg > * + * { margin-top: 2rem; }

.sec-head { max-width: 820px; }
.sec-head .h2 { margin-top: 1.1rem; }
.sec-head .lede { margin-top: 1.1rem; }

/* Surfaces */
.bg-paper2 { background: var(--paper-2); }
.bg-mist   { background: var(--mist); }
/* The dark grounds are COLOURS, not near-black. Each carries light from the
   other two brand hues across it, so a dark section still reads as part of a
   colourful identity rather than as a hole in the page. */
.bg-ink {
  background:
    radial-gradient(1100px 560px at 78% 10%, rgba(19,185,129,.30), transparent 64%),
    radial-gradient(820px 460px at 20% -6%, rgba(63,50,141,.34), transparent 64%),
    radial-gradient(640px 380px at 96% 92%, rgba(153,42,144,.16), transparent 64%),
    linear-gradient(168deg, #084536 0%, var(--ground) 54%, #052A22 100%);
  color: rgba(255,255,255,.80);
}
.bg-plum {
  background:
    radial-gradient(980px 480px at 84% 0%,  rgba(19,185,129,.26), transparent 62%),
    radial-gradient(720px 400px at 6% 96%,  rgba(153,42,144,.26), transparent 64%),
    linear-gradient(160deg, #24215A 0%, var(--ground-indigo) 58%, #15133A 100%);
  color: rgba(255,255,255,.80);
}
/* A third dark, for the one section that should read purple. */
.bg-purple {
  background:
    radial-gradient(900px 460px at 80% 4%,  rgba(63,50,141,.34), transparent 62%),
    radial-gradient(700px 400px at 8% 96%,  rgba(19,185,129,.18), transparent 64%),
    linear-gradient(160deg, #481752 0%, var(--ground-purple) 58%, #2C0E31 100%);
  color: rgba(255,255,255,.80);
}
/* Light grounds that carry the other brand colours, so indigo and purple
   appear on the page without costing a single dark pixel. */
.bg-lilac { background: var(--lilac); }
.bg-blush { background: var(--blush); }
/* faint technical grid — used on dark sections */
.bg-grid::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(1000px 640px at 50% 20%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(1000px 640px at 50% 20%, #000, transparent 78%);
}

.hairline { height: 1px; background: var(--line); border: 0; }
.on-dark .hairline { background: rgba(255,255,255,.12); }

/* ---- 5. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--font-sans);
  font-size: .95rem; font-weight: 560; letter-spacing: -.005em;
  padding: .86em 1.5em;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), color .22s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1.5px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.05em; height: 1.05em; }

.btn--primary { background: var(--emerald); color: #fff; box-shadow: 0 1px 2px rgba(7,131,92,.28), 0 10px 26px rgba(19,185,129,.30); }
.btn--primary:hover { background: var(--emerald-700); box-shadow: 0 2px 4px rgba(7,131,92,.26), 0 16px 34px rgba(19,185,129,.36); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-3); background: rgba(11,26,22,.03); }

.on-dark .btn--ghost, .btn--ghost-d { background: rgba(255,255,255,.04); color: #fff; border-color: rgba(255,255,255,.58); }
.on-dark .btn--ghost:hover, .btn--ghost-d:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.58); }

.btn--gold { background: var(--gold); color: var(--plum-900); }
.btn--gold:hover { background: #EDCE7B; }

.btn--sm { font-size: .875rem; padding: .66em 1.15em; }
.btn--lg { font-size: 1.02rem; padding: .98em 1.85em; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 540; font-size: .93rem; color: var(--emerald-700);
  border-bottom: 1px solid transparent; padding-bottom: 1px;
  transition: gap .22s var(--ease), border-color .22s var(--ease);
}
.link-arrow:hover { gap: .75em; border-color: currentColor; }
.on-dark .link-arrow { color: var(--emerald-300); }

/* ---- 6. Chips, pills, badges ------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .82rem; font-weight: 500;
  padding: .48em .95em;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: all .22s var(--ease);
}
.on-dark .chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.58); color: rgba(255,255,255,.88); }

.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 500;
  padding: .42em .78em;
  border-radius: 5px;
  background: var(--mist);
  color: var(--ink-3);
}
.tag--em { background: var(--emerald-tint); color: var(--emerald-700); }
.tag--gd { background: var(--st-warning-bg); color: var(--st-warning-ink); }
.tag--mg { background: #FAEDF7; color: var(--magenta); }
.on-dark .tag { background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); }
.on-dark .tag--em { background: rgba(34,190,139,.16); color: var(--emerald-300); }
.on-dark .tag--gd { background: rgba(224,188,94,.16); color: var(--gold); }

/* ---- 7. Cards ----------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(22px, 2.3vw, 32px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line); }
.on-dark .card { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.58); }
.on-dark .card--hover:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.58); box-shadow: none; }

.card-num {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
  color: var(--muted-2);
}

/* ---- 8. Reveal on scroll ----------------------------------------------- */
/* Scoped to .js: without JavaScript nothing ever adds .in, so an unscoped
   opacity:0 would hide the content permanently. */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .07s } .rv-d2 { transition-delay: .14s }
.rv-d3 { transition-delay: .21s } .rv-d4 { transition-delay: .28s }
.rv-d5 { transition-delay: .35s } .rv-d6 { transition-delay: .42s }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; } }

/* ---- 9. Utilities ------------------------------------------------------- */
.mono { font-family: var(--font-mono); }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: .6rem } .gap { gap: 1rem } .gap-lg { gap: 1.8rem }
.wrap-flex { flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* ==========================================================================
   2. EXTENDED TOKENS — spacing, motion, containers, status, category accents
   ========================================================================== */

/* Container utilities */
.c-wide  { width: 100%; max-width: var(--c-wide); margin-inline: auto; padding-inline: var(--gutter); }
.c-read  { width: 100%; max-width: var(--c-read); margin-inline: auto; padding-inline: var(--gutter); }
.sec-compact { padding-block: var(--sec-compact); }
.sec-std     { padding-block: var(--sec-std); }
.sec-major   { padding-block: var(--sec-major); }

/* Focus — visible, consistent, never removed */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.on-dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.bg-ink :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--emerald-300);
}

/* Section background tokens */
.bg-white  { background: #FFFFFF; }
.bg-cloud  { background: var(--paper); }
.bg-mistg  { background: var(--paper-2); }
.bg-surface{ background: var(--ink-soft); color: rgba(255,255,255,.76); }

/* Brand motif — connected workforce nodes. Meaningful, not decorative. */
.motif { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.motif-dots::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(19,185,129,.22) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(520px 320px at var(--mx, 70%) var(--my, 40%), #000, transparent 72%);
  -webkit-mask-image: radial-gradient(520px 320px at var(--mx, 70%) var(--my, 40%), #000, transparent 72%);
}

/* Long CTA labels must not force horizontal page scroll on narrow screens.
   Below 640px buttons wrap their text and go full-width in a .ctas row. */
@media (max-width: 640px) {
  .btn { white-space: normal; text-align: center; }
  .ctas { width: 100%; }
  .ctas > .btn { width: 100%; }
}

/* Skip link — visible only on keyboard focus */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--emerald); color: #fff; font-size: .9rem; font-weight: 600;
  padding: .7em 1.1em; border-radius: var(--r-btn); text-decoration: none;
  transition: top var(--t-fast) var(--e-out);
}
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }


/* ── Contrast corrections (WCAG AA) ──────────────────────────────────────
   Measured against the surface each element actually sits on. */
.on-dark .eyebrow { color: var(--gold-lt); }
.on-dark .eyebrow::before { background: var(--gold-lt); }
.eyebrow--emerald::before { background: var(--emerald); }
.on-dark .eyebrow--emerald::before { background: var(--emerald-300); }

/* Small text on dark surfaces needs at least .55 alpha to clear 4.5:1
   against var(--ground) / #0B1A16. */
.on-dark .tiny,
.ftr h5, .ftr .ftr__k,
.ftr__legal, .ftr__legal span, .ftr__legal p,
.wstrip__lead,
.chart__sub, .chart__h span, .chart__ax span, .chart__ax,
.fpanel__h span, .fsurf__h p,
.frow.hd,
.cvloop p,
.exec__filters .spacer,
.ftr__bot, .ftr__bot > span,
.ccols span { color: rgba(255,255,255,.62) !important; }

/* The closing section is dark but is not flagged .on-dark, because it carries a
   light form card. Its eyebrow needs the dark-surface emerald. */
.cv .eyebrow { color: var(--emerald-300); }

/* Every interactive element gets a visible focus ring, including those whose
   own rules set outline: none. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-dark a:focus-visible, .on-dark button:focus-visible,
.nav-root a:focus-visible, .nav-root button:focus-visible,
.drawer a:focus-visible, .drawer button:focus-visible {
  outline-color: var(--emerald-300);
}

/* ── Touch targets: every control reaches 44x44 on a phone ──────────────── */
.announce__x { min-width: 44px; min-height: 44px; }
.ftr__social a { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; }
/* WCAG 2.2 target size: at least 24x24 everywhere, 44x44 on touch */
.ftr__legal a { display: inline-flex; align-items: center; min-height: 24px; }
@media (max-width: 760px) {
  .ftr__legal a { min-height: 44px; padding-block: .5rem; }
  .ftr__legal { gap: .2rem 1.3rem; }
}

/* Inline links inside running text: WCAG 2.2 exempts them (2.5.8 "inline"),
   but the announcement bar link and the standalone demo/policy links are
   controls, so they get a real target. */
.announce a,
.implclose .demo a,
.dform__priv a,
.ftr__note a,
.nf__contact a,
.ftr__by a { display: inline-flex; align-items: center; min-height: 24px; }

/* At 320px the header's demo button plus burger overran by 2px once the type
   scale moved to a 17px root. */
@media (max-width: 400px) {
  .hdr__actions { gap: .3rem; }
  .hdr__actions .btn--sm { font-size: .8rem; padding: .6em .8em; }
  .hdr__login { display: none; }
}


/* ── Section 6 · the brand hairline ──────────────────────────────────────
   One decorative line carrying emerald -> teal -> violet -> magenta. Used as
   a section transition, never as a fill. */
.brand-rule {
  height: 1px; border: 0; margin: 0;
  background: var(--grad-rule); opacity: .7;
}
.on-dark .brand-rule { opacity: .55; }

/* ── PiPO Gold — usage rules enforced in CSS ─────────────────────────────
   Measured contrast for #B08F45:
     midnight 6.14:1 · dark surface 5.73:1   → text of any size is safe
     white 3.06:1                            → large or bold text only
     warm cloud 2.85:1 · mist 2.71:1         → border, icon, rule, graphic only
   Gold is never a button. The primary CTA is emerald, always. */

/* The gold metric: an executive number that deserves visual importance.
   On dark it carries the number itself; on light it carries the rule above it
   while the number stays in ink. */
.gold-metric { color: var(--gold-ink); }
.on-dark .gold-metric,
.bg-ink .gold-metric,
.bg-plum .gold-metric,
.bg-purple .gold-metric { color: var(--gold-lt); }
:not(.on-dark) > .gold-metric,
.gold-metric--light {
  color: var(--ink);
  border-top: 2px solid var(--gold);
  padding-top: .5rem;
}

/* The gold label: a selected eyebrow where gold adds hierarchy. Uppercase
   mono at this weight clears the large-text threshold on dark; on light it is
   paired with a gold rule and ink text instead. */
.eyebrow--gold { color: var(--gold); }
:not(.on-dark) .eyebrow--gold { color: var(--st-warning-ink); }

/* The gold rule: a fine premium separator. Graphic, so contrast does not bind. */
.gold-rule {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-line) 62%, transparent);
}
.gold-rule--center {
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}

/* The gold hairline border: one executive card, one premium callout. */
.gold-edge { border: 1px solid var(--gold-line); }
.on-dark .gold-edge { border-color: var(--gold-lt); }

/* Gold is not a button colour. This makes that a build error rather than a
   judgement call. */
.btn--gold { background: var(--gold); color: var(--ink); }