/* ============================================================
   WORKTALES - Homepage stylesheet
   Canonical design tokens for the site:
   - Black background #000
   - Accent orange #EF5023
   - Secondary maroon #4A1114
   - Accent light #B3C9C6
   - Text #F1F1F2
   - Montserrat
   - Pill CTAs (999px), uppercase orange section titles
   ============================================================ */

:root {
  --primary: #000000;
  --secondary: #4A1114;
  --accent: #EF5023;
  --accent-2: #FF7A3F;
  --accent-light: #B3C9C6;
  --text: #F1F1F2;
  --text-secondary: #B3C9C6;
  --muted: #8a8d8f;
  --surface: rgba(35, 31, 32, 0.82);
  --surface-strong: rgba(74, 17, 20, 0.85);
  --surface-muted: rgba(35, 31, 32, 0.55);
  --border: rgba(241, 241, 242, 0.10);
  --border-strong: rgba(241, 241, 242, 0.18);
  --accent-soft: rgba(239, 80, 35, 0.15);
  --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Diagnostic scoring only. Additive: no brand token above changes.
     Amber diverges from the deck (#F1592A) because that value is
     indistinguishable from --accent, and most scorecard rows are amber.
     Never hardcode these hexes in markup, or the palette stops being
     revertible in one place. */
  --rag-red: #E5484D;
  --rag-amber: #FFB020;
  --rag-green: #30A46C;
  --rag-green-2: #46C08B;
  /* Ink variants: the bar colours above are tuned for black and do not carry
     enough contrast as text on the light scorecard surface. */
  --rag-red-ink: #C62A30;
  --rag-amber-ink: #8A5A00;
  --rag-green-ink: #1F7A50;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  background-color: #000;
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Keyboard focus rings for interactive elements (mouse clicks stay clean) */
.nav-link:focus-visible,
.btn:focus-visible,
.btn-link:focus-visible,
.dropdown-item:focus-visible,
.pillar-link:focus-visible,
.footer-col a:focus-visible,
.footer-social a:focus-visible,
.nav-logo a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.container {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 120px);
}

.section-padding { padding: clamp(64px, 9vw, 120px) 0; }

.section-title {
  margin: 0 0 1rem;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  font-weight: 700;
}

.section-headline {
  margin: 0 auto 3rem;
  text-align: center;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 820px;
  line-height: 1.25;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
  white-space: nowrap;
  font-family: inherit;
}
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: #ff6638; border-color: #ff6638; transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: rgba(241,241,242,0.30);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.btn-link i { transition: transform .25s ease; }
.btn-link:hover i { transform: translateX(4px); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header {
  position: fixed; top: 0; left: 0; width: 100%;
  z-index: 1000;
  background: rgba(12,10,10,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 14px 0;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.header.scrolled {
  background: rgba(20,16,16,0.85);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 30px rgba(0,0,0,0.32);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.nav-logo-img {
  height: 56px;
  width: auto;
  display: block;
}

.nav-menu {
  display: flex;
  list-style: none;
  align-items: center;
  gap: 6px;
  margin: 0; padding: 0;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  transition: color .25s ease, background .25s ease;
}
button.nav-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.nav-link:hover { color: var(--accent); }
.nav-link i.chev { font-size: 0.7rem; transition: transform .25s ease; }

/* Dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 320px;
  background: rgba(18,14,14,0.96);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.dropdown::before {
  content: '';
  position: absolute; top: -6px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: rgba(18,14,14,0.96);
  border-left: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
}
/* Invisible hover bridge across the 14px gap between trigger and dropdown,
   so the dropdown doesn't close while the cursor traverses to it. */
.dropdown::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -14px;
  height: 14px;
}
.has-dropdown.open .dropdown,
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.has-dropdown.open .nav-link i.chev,
.has-dropdown:hover .nav-link i.chev,
.has-dropdown:focus-within .nav-link i.chev { transform: rotate(180deg); }

.dropdown-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 10px;
  align-items: start;
  transition: background .2s ease;
}
.dropdown-item:hover { background: rgba(239,80,35,0.08); }
.dropdown-item .ico {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(239,80,35,0.15);
  display: grid; place-items: center;
  color: var(--accent);
  font-size: 0.95rem;
}
.dropdown-item .label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--text); }
.dropdown-item .desc { display: block; font-size: 0.78rem; color: var(--text-secondary); margin-top: 2px; line-height: 1.45; }

.dropdown-divider {
  height: 1px; background: var(--border); margin: 6px 4px;
}

/* Mobile nav */
.nav-toggle {
  display: none;
  background: transparent; border: none;
  cursor: pointer; padding: 8px;
  flex-direction: column; gap: 5px;
}
.nav-toggle span {
  width: 26px; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav-toggle { display: flex; }
  .nav-logo-img { height: 44px; }
  .nav-menu {
    position: fixed;
    top: 64px; right: 0; left: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px clamp(20px, 5vw, 60px) 32px;
    background: rgba(12,10,10,0.98);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    transform: translateY(-12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .nav-menu.open {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateY(0);
  }
  .nav-menu li { width: 100%; }
  .nav-link {
    width: 100%;
    justify-content: space-between;
    padding: 14px 4px;
    border-radius: 0;
    border-bottom: 1px solid var(--border);
  }
  .has-dropdown .dropdown {
    position: static;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 0 0;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  .dropdown::before,
  .dropdown::after { display: none; }
  .has-dropdown.open .dropdown,
  .has-dropdown:hover .dropdown,
  .has-dropdown:focus-within .dropdown { transform: none; }
  .has-dropdown.open .dropdown { max-height: 600px; }
  .dropdown-item { padding: 10px 4px; }
  .dropdown-item .ico { width: 30px; height: 30px; font-size: 0.85rem; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;          /* fallback for browsers without svh */
  min-height: 100svh;         /* small-viewport height: stable on mobile address bars */
  padding: clamp(92px, 12vh, 140px) 0 clamp(28px, 4.5vh, 52px);
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
/* Hero content sits up top with breathing room; the meta strip is pinned to
   the bottom edge via space-between, so adding padding never drops the stats. */
.hero > .container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 56px);   /* min separation to the meta strip */
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 600px at 15% 25%, rgba(239,80,35,0.18), transparent 60%),
    radial-gradient(700px 500px at 85% 70%, rgba(74,17,20,0.55), transparent 60%),
    linear-gradient(180deg, #050505 0%, #000 60%);
}
.hero-grid-bg {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(239,80,35,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,80,35,0.12) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 30%, transparent 80%);
  opacity: 0.8;
}

/* ============================================================
   SECTION GRID TEXTURE - carries the hero grid rhythm down the page
   ============================================================ */
.pillars,
.individuals,
.outcomes,
.whyb {
  position: relative;
  isolation: isolate; /* lets ::before sit above section bg, below content */
}
.pillars::before,
.individuals::before,
.outcomes::before,
.whyb::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(239,80,35,0.11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,80,35,0.11) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 85% 70% at 15% 0%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 15% 0%, #000 30%, transparent 85%);
}
/* alternate anchor corner so repeated pillars sections don't feel stamped */
.pillars:nth-child(even of .pillars)::before {
  mask-image: radial-gradient(ellipse 85% 70% at 85% 0%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 85% 0%, #000 30%, transparent 85%);
}
/* "Why" bento section sits between the two pillars - anchor center top */
.whyb::before {
  mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 85% 70% at 50% 0%, #000 30%, transparent 85%);
}
/* outcomes: fainter, tucked behind the heading - stats stay clinical */
.outcomes::before {
  background-image:
    linear-gradient(rgba(239,80,35,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,80,35,0.08) 1px, transparent 1px);
  mask-image: radial-gradient(ellipse 65% 50% at 10% 5%, #000 25%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 65% 50% at 10% 5%, #000 25%, transparent 80%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-block: auto;          /* center content vertically; meta stays pinned bottom */
}
.hero-copy { min-width: 0; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255,255,255,0.03);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 18px;
}
.hero-eyebrow .pulse {
  width: 8px; height: 8px; flex: 0 0 8px; aspect-ratio: 1; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(239,80,35,0.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(239,80,35,0.6); }
  70% { box-shadow: 0 0 0 12px rgba(239,80,35,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,80,35,0); }
}

.hero-title {
  font-size: clamp(2.1rem, 4.8vw, 4rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 22px;
}
.hero-title .accent { color: var(--accent); }
.hero-title .em {
  display: inline;
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.hero-sub {
  font-size: clamp(0.98rem, 1.15vw, 1.06rem);
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 0 24px;
  line-height: 1.6;
}
.hero-sub strong {
  color: var(--text);
  font-weight: 700;
}
.hero-tagline {
  font-size: clamp(0.88rem, 1.05vw, 0.98rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: uppercase;
  margin: 0 0 20px;
  max-width: 580px;
  line-height: 1.4;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
}
.hero-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 0;              /* spacing is owned by the hero's space-between */
  padding-top: 24px;
  border-top: 1.5px solid;
  border-image: linear-gradient(to right,
    rgba(241,241,242,0) 0%,
    rgba(241,241,242,0.28) 50%,
    rgba(241,241,242,0) 100%) 1;
}
.hero-meta-item {
  text-align: center;
  padding: 0 12px;
  position: relative;
}
.hero-meta-item + .hero-meta-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    rgba(239,80,35,0) 0%,
    rgba(239,80,35,1) 50%,
    rgba(239,80,35,0) 100%);
}
.hero-meta-item .num {
  font-size: 1.7rem; font-weight: 700; color: var(--text);
  letter-spacing: -0.02em;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 1.8rem;
}
.hero-meta-item .lbl {
  font-size: 0.74rem; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: 6px;
}

/* Hero visual - abstract three-pillar emblem
   Robust sizing: width fills column up to a max, square via padding-bottom
   trick (more reliable than aspect-ratio inside flexible grid tracks).
   All children are absolutely positioned so they're constrained to .hero-visual. */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  justify-self: center;
  min-width: 0;
}
.hero-visual::before {
  content: '';
  display: block;
  padding-bottom: 100%; /* square */
}
.hero-orbit {
  position: absolute; inset: 0;
  border: 1.5px dashed rgba(239,80,35,0.55);
  border-radius: 50%;
  animation: spin 80s linear infinite;
  pointer-events: none;
}
.hero-orbit.inner { inset: 12%; border-style: solid; border-color: rgba(179,201,198,0.35); animation-duration: 60s; animation-direction: reverse;}
.hero-orbit.outer {
  inset: -6%;
  border-style: solid;
  border-width: 2px;
  border-color: rgba(239,80,35,0.7);
  box-shadow: 0 0 26px rgba(239,80,35,0.22);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Traveling glow dots - the ring itself spins, so a marker on its edge
   orbits with it, making the (intentionally slow) rotation readable. */
.hero-orbit.outer::before,
.hero-orbit.inner::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  width: 11px; height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px 3px rgba(239,80,35,0.85);
}
.hero-orbit.inner::before {
  width: 8px; height: 8px;
  margin-left: -4px;
  top: -4px;
  background: var(--accent-light);
  box-shadow: 0 0 12px 2px rgba(179,201,198,0.7);
}

.hero-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff8b5a 0%, var(--accent) 35%, var(--secondary) 80%, #1a0707 100%);
  box-shadow: 0 0 80px rgba(239,80,35,0.45), inset 0 0 30px rgba(0,0,0,0.4);
}
.hero-core::after {
  content: '';
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
}

.hero-node {
  position: absolute;
  width: max-content;
  padding: 8px 14px 8px 22px;
  text-align: left;
  background:
    linear-gradient(155deg, rgba(32,22,20,0.94) 0%, rgba(14,10,10,0.92) 75%);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.4);
  box-sizing: border-box;
}
/* leading accent dot, aligned to the title */
.hero-node::before {
  content: '';
  position: absolute;
  top: 13px; left: 11px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 7px rgba(239,80,35,0.75);
}
.hn-word {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.2;
}
.hn-verb {
  display: block;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.25;
}
/* Anchor each node by its center so percent offsets stay inside the box. */
.hero-node.h1 { top: 10%;  left: 50%; transform: translate(-50%, 0); }
.hero-node.h2 { bottom: 8%; left: 18%; transform: translate(-50%, 0); }
.hero-node.h3 { bottom: 8%; left: 82%; transform: translate(-50%, 0); }

/* ============================================================
   PILLARS - Three-pillar overview
   ============================================================ */
.pillars {
  position: relative;
  background: linear-gradient(180deg, #000 0%, #060404 50%, #000 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pillars-intro {
  margin-bottom: clamp(40px, 5vw, 64px);
}
.pillars-intro h2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 500;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.pillars-intro h2 .accent { color: var(--accent); }
.pillars-intro h2 .nowrap { white-space: nowrap; }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pillar-card {
  position: relative;
  padding: 32px 28px 28px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(35,31,32,0.4) 0%, rgba(0,0,0,0.6) 100%);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.pillar-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 0% 0%, rgba(239,80,35,0.12), transparent 60%);
  opacity: 0; transition: opacity .35s ease;
  pointer-events: none;
}
.pillar-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239,80,35,0.55);
}
.pillar-card:hover::before { opacity: 1; }

.pillar-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(239, 80, 35, 0.25);
  color: var(--accent);
  font-size: 1.15rem;
  margin-bottom: 20px;
  transition: background .35s ease, border-color .35s ease, transform .35s ease;
}
.pillar-card:hover .pillar-icon {
  background: rgba(239, 80, 35, 0.22);
  border-color: rgba(239, 80, 35, 0.5);
  transform: translateY(-2px);
}

.pillar-num {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 18px;
}
.pillar-name {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.pillar-subtitle {
  font-size: 0.78rem;
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 18px;
}
/* Homepage pillar cards: icon left, single title + subtitle stacked beside it */
.pillar-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}
.pillar-head .pillar-icon {
  margin-bottom: 0;
  flex-shrink: 0;
}
.pillar-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pillar-head .pillar-name {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0;
}
.pillar-head .pillar-num {
  display: inline;
  margin: 0;
  font-size: inherit;
  letter-spacing: 0.02em;
}
.pillar-head .pillar-subtitle {
  margin-bottom: 0;
}
/* Subtle accent subtitle (train program cards). If kept, promote to base
   .pillar-subtitle and apply on the homepage too. */
.pillar-subtitle--accent {
  color: var(--accent);
}
.pillar-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 24px;
  min-height: 120px;
}
.pillar-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 8px;
}
.pillar-features li {
  font-size: 0.82rem;
  color: var(--text);
  padding-left: 22px;
  position: relative;
}
.pillar-features li::before {
  content: '';
  position: absolute; left: 0; top: 8px;
  width: 12px; height: 1.5px;
  background: var(--accent);
}
.pillar-link {
  display: inline-flex;
  align-items: center; gap: 8px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border);
  padding-top: 18px;
  width: 100%;
  transition: color .25s ease;
}
.pillar-link i { transition: transform .25s ease; color: var(--accent); }
.pillar-card:hover .pillar-link { color: var(--accent); }
.pillar-card:hover .pillar-link i { transform: translateX(4px); }

/* ============================================================
   OUTCOMES BAND
   ============================================================ */
.outcomes { position: relative; }
.outcomes-inner { position: relative; }

.outcomes-head { text-align: left; margin-bottom: clamp(36px, 4vw, 56px); }
.outcomes-head h2 {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 500;
  margin: 8px 0 0;
  color: var(--text);
  letter-spacing: -0.015em;
}

.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
}
.outcome {
  padding: clamp(28px, 4vw, 44px) 24px;
  text-align: center;
  border-right: 1px solid var(--border-strong);
  position: relative;
}
.outcome:last-child { border-right: none; }
.outcome .big {
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--text);
}
.outcome .rule {
  width: 32px;
  height: 2px;
  background: var(--accent);
  margin: 16px auto 0;
}
.outcome .lbl {
  margin-top: 12px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
}
.acc-addon {
  margin-top: clamp(20px, 2.4vw, 32px);
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 22px 26px;
  border: 1px dashed rgba(239,80,35,0.38);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(239,80,35,0.06) 0%, rgba(0,0,0,0.4) 100%);
}
.acc-addon-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(239,80,35,0.25);
  color: var(--accent);
  font-size: 1.15rem;
}
.acc-addon-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.acc-addon-head h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--text);
}
.acc-addon-tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(239,80,35,0.25);
  border-radius: 100px;
  padding: 4px 10px;
}
.acc-addon-body p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-orbit,
  .hero-eyebrow .pulse { animation: none; }
  .pillar-card:hover { transform: none; }
}

/* ============================================================
   FOR INDIVIDUALS - talent pool + webinars
   ============================================================ */
.individuals {
  position: relative;
  background: linear-gradient(180deg, #000 0%, #060404 50%, #000 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── Audience chapters ─────────────────────────────────────────────
   The two audience-pivot sections ("For organizations" / "For
   salespeople") read as distinct rooms: a warm-dark zone tint with
   accent-sealed edges, plus a pill eyebrow. Topic sections keep the
   plain near-black bg and the plain .section-title eyebrow, so the
   page reads as audience chapters punctuated by topic content.
   Placed after .pillars/.individuals so the tint wins on source order. */
.audience-zone {
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(239, 80, 35, 0.10), transparent 70%),
    linear-gradient(180deg, #100806 0%, #0a0504 50%, #080403 100%);
  border-top: 1px solid rgba(239, 80, 35, 0.28);
  border-bottom: 1px solid rgba(239, 80, 35, 0.28);
}

/* Pill eyebrow: same small size as .section-title (uppercase/accent/
   spacing inherited) - promoted from floating label to an object so the
   crossing registers, without ever outranking the headline. */
.audience-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  margin: 0 0 1.4rem;
  padding: 0.45em 0.95em;
  border: 1px solid rgba(239, 80, 35, 0.45);
  border-radius: 999px;
  background: rgba(239, 80, 35, 0.10);
}
.audience-eyebrow::before {
  content: "\25B8"; /* ▸ */
  color: var(--accent);
  font-size: 0.95em;
  line-height: 1;
}
.indiv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-bottom: clamp(48px, 6vw, 72px);
}
.indiv-card {
  padding: 36px 32px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(35,31,32,0.4) 0%, rgba(0,0,0,0.6) 100%);
  display: flex;
  flex-direction: column;
  transition: transform .35s ease, border-color .35s ease;
}
.indiv-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239,80,35,0.45);
}
.indiv-card:hover .pillar-icon {
  background: rgba(239,80,35,0.22);
  border-color: rgba(239,80,35,0.5);
  transform: translateY(-2px);
}
.indiv-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.indiv-head .pillar-icon { margin-bottom: 0; flex-shrink: 0; }
.indiv-head .indiv-title { margin: 0; }
.indiv-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.indiv-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 24px;
  flex: 1;
}
.indiv-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* Bullet list inside an indiv card */
.indiv-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.indiv-list li {
  position: relative;
  padding-left: 26px;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.indiv-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(239,80,35,0.15);
}
.indiv-list--cols { grid-template-columns: repeat(2, 1fr); column-gap: 32px; }

/* Pill chips inside an indiv card */
.indiv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.indiv-pills span {
  padding: 9px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(35,31,32,0.5);
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.3;
}
.indiv-note {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 18px 0 0;
}
.indiv-card--wide { grid-column: 1 / -1; }

/* Webinar registration CTA (external Microsoft Teams event page) */
.webinar-cta {
  max-width: 620px;
  margin: 0 auto;
  padding: 40px 36px;
  text-align: center;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(35,31,32,0.4) 0%, rgba(0,0,0,0.6) 100%);
}
.webinar-cta-meta {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
  justify-items: center;
}
.webinar-cta-meta li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.webinar-cta-meta i { color: var(--accent); width: 18px; text-align: center; }
.webinar-cta-note {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 20px 0 0;
}

/* Webinars */
.webinars-head {
  margin-bottom: clamp(28px, 3.5vw, 44px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
}
.webinars-head .btn-link { margin-bottom: 4px; }
.webinars-head h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 500;
  margin: 8px 0 0;
  letter-spacing: -0.015em;
}
.webinar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.webinar-card {
  position: relative;
  padding: 28px 26px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: rgba(35,31,32,0.35);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.webinar-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(239,80,35,0.25);
  color: var(--accent);
  line-height: 1;
}
.webinar-month { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.webinar-day { font-size: 1.3rem; font-weight: 700; margin-top: 3px; }
.webinar-tag {
  align-self: flex-start;
  font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-light);
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}
.webinar-title {
  font-size: 1.05rem; font-weight: 600;
  margin: 0; line-height: 1.35; color: var(--text);
}
.webinar-meta { font-size: 0.84rem; color: var(--text-secondary); margin: 0; }
.webinar-register {
  margin-top: auto;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
}
.webinar-register.is-disabled { color: var(--muted); cursor: default; }

/* Next-live-webinar banner (homepage) */
.webinar-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(35,31,32,0.4) 0%, rgba(0,0,0,0.6) 100%);
  transition: border-color .35s ease;
}
.webinar-banner:hover { border-color: rgba(239,80,35,0.45); }
.webinar-banner-date {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  flex-shrink: 0;
  border-radius: 14px;
  background: var(--accent-soft);
  border: 1px solid rgba(239,80,35,0.25);
  color: var(--accent);
  line-height: 1;
}
.webinar-banner-date .webinar-day { font-size: 1.6rem; }
.webinar-banner-body { min-width: 0; }
.webinar-banner-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 10px 0 6px;
}
.webinar-banner-meta { font-size: 0.9rem; color: var(--text-secondary); margin: 0; }
.webinar-banner-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}

/* Featured webinar card (webinars.html hero aside) */
.webinar-feature .webinar-facts {
  list-style: none;
  margin: 4px 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.webinar-feature .webinar-facts li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.92rem;
  color: var(--text-secondary);
}
.webinar-feature .webinar-facts li i {
  color: var(--accent);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* Video library (webinars.html past sessions) */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}
.video-card {
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: rgba(35,31,32,0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 50%, rgba(35,31,32,0.7) 0%, rgba(0,0,0,0.9) 100%);
  color: var(--muted);
  font-size: 2.6rem;
}
.video-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.video-title {
  font-size: 1rem; font-weight: 600;
  margin: 0; line-height: 1.35; color: var(--text);
}
.video-meta { font-size: 0.82rem; color: var(--text-secondary); margin: 0; }
@media (max-width: 900px) { .video-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .video-grid { grid-template-columns: 1fr; } }

/* Contact card - two-pane (info + message form) */
.contact-card {
  position: relative;
  max-width: 1080px;
  margin: 8px auto 0;
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  text-align: left;
  border: 1px solid var(--border-strong);
  border-radius: clamp(22px, 2.6vw, 34px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(74,17,20,0.55), transparent 60%),
    linear-gradient(180deg, rgba(35,31,32,0.55), rgba(10,8,8,0.65));
  box-shadow: 0 40px 90px -50px rgba(0,0,0,0.9), inset 0 1px 0 rgba(241,241,242,0.06);
  overflow: hidden;
  backdrop-filter: blur(6px);
}
/* faint accent hairline along the divider */
.contact-card::before {
  content: "";
  position: absolute;
  top: 12%; bottom: 12%;
  left: 41%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--border-strong) 18%, var(--border-strong) 82%, transparent);
  pointer-events: none;
}

/* ---- left pane ---- */
.contact-info {
  position: relative;
  padding: clamp(30px, 3.4vw, 48px);
  background:
    radial-gradient(130% 90% at 0% 100%, rgba(239,80,35,0.10), transparent 55%),
    linear-gradient(155deg, rgba(74,17,20,0.45), rgba(10,8,8,0.2));
  overflow: hidden;
}
.contact-eyebrow {
  display: inline-block;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.contact-info-title {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 600; margin: 0 0 26px;
  color: var(--text);
}
.contact-list { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.contact-item { display: flex; align-items: flex-start; gap: 14px; }
.contact-ico {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 0.92rem;
  background: linear-gradient(145deg, var(--accent), #c63c18);
  box-shadow: 0 8px 20px -8px rgba(239,80,35,0.7);
  transition: transform .25s ease;
}
.contact-item:hover .contact-ico { transform: translateY(-2px) scale(1.04); }
.contact-item-body { display: flex; flex-direction: column; gap: 2px; padding-top: 2px; }
.contact-item-label {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary);
}
.contact-item-body a {
  color: var(--text);
  font-size: 0.95rem; line-height: 1.45;
  font-weight: 500;
  transition: color .2s ease;
}
.contact-item-body a:hover { color: var(--accent); }
.contact-deco {
  position: absolute;
  left: clamp(16px, 2.4vw, 36px); bottom: -6px;
  width: clamp(150px, 18vw, 210px); height: auto;
  color: var(--accent-light);
  opacity: 0.13;
  pointer-events: none;
}

/* ---- right pane (form) ---- */
.contact-panel { padding: clamp(30px, 3.4vw, 48px); }
.contact-panel-title {
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  font-weight: 600; margin: 0 0 4px;
  color: var(--text);
}
.contact-panel-title .accent { color: var(--accent); }
.contact-panel-sub { font-size: 0.86rem; color: var(--text-secondary); margin: 0 0 22px; }

.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form .form-group { margin: 0; position: relative; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 15px 22px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-form textarea {
  border-radius: 22px;
  resize: vertical;
  min-height: 150px;
  line-height: 1.55;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-secondary); opacity: 0.65; }
.contact-form select { appearance: none; cursor: pointer; padding-right: 44px; }
.contact-form select:invalid { color: var(--text-secondary); }
.contact-form select option { color: #111; }
.form-select-chev {
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  color: var(--accent);
  pointer-events: none;
}
.contact-form input:hover,
.contact-form select:hover,
.contact-form textarea:hover { border-color: rgba(241,241,242,0.3); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(0,0,0,0.5);
  box-shadow: 0 0 0 3px rgba(239,80,35,0.18);
}
.contact-submit { align-self: flex-start; margin-top: 6px; }
.contact-submit i { font-size: 0.8rem; }

/* ============================================================
   CLOSING CTA
   ============================================================ */
.cta-band {
  background:
    radial-gradient(600px 320px at 50% 0%, rgba(239,80,35,0.06), transparent 70%),
    #000;
  border-top: 1px solid var(--border);
  padding: clamp(64px, 8vw, 100px) 0;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 500;
  margin: 0 0 16px;
  letter-spacing: -0.015em;
}
.cta-band h2 .accent { color: var(--accent); }
.cta-band p {
  color: var(--text-secondary);
  max-width: 580px;
  margin: 0 auto 32px;
  font-size: 1.02rem;
}
.cta-band .btns {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #050303;
  border-top: 1px solid var(--border);
  padding: 64px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-brand .logo-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.footer-logo-img { height: 40px; width: auto; display: block; }

/* Small utilities replacing former inline styles */
.hero-meta-cert { color: var(--accent); font-size: 1.2rem; }
.footer-contact-ico { color: var(--accent); margin-right: 6px; }
.footer-brand .tagline {
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 16px;
}
.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.92rem;
  max-width: 320px;
  margin: 0 0 18px;
  line-height: 1.65;
}
.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.footer-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.footer-col h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 18px;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a,
.footer-col li > span {
  font-size: 0.92rem;
  color: var(--text-secondary);
  transition: color .2s ease;
}
.footer-col a:hover { color: var(--accent); }

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero,
  .page-hero { min-height: auto; padding: 116px 0 56px; }
  .hero > .container,
  .page-hero > .container { display: block; }   /* drop space-between; stack + scroll */
  .hero-meta { margin-top: 40px; }
  .hero-inner { grid-template-columns: 1fr; gap: 48px; }
  /* stacked hero: orbit + meta are centered, so center the CTAs to match */
  .hero-ctas { justify-content: center; }
  .hero-visual { max-width: 360px; margin: 0 auto; }
  .pillar-grid { grid-template-columns: 1fr; }
  .pillar-desc { min-height: 0; }
  .outcomes-grid { grid-template-columns: repeat(2, 1fr); }
  .outcome:nth-child(2) { border-right: none; }
  .outcome:nth-child(1), .outcome:nth-child(2) { border-bottom: 1px solid var(--border-strong); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .indiv-grid { grid-template-columns: 1fr; }
  .indiv-list--cols { grid-template-columns: 1fr; }
  .webinar-grid { grid-template-columns: 1fr; }
  .webinar-banner { grid-template-columns: auto 1fr; gap: 20px 22px; padding: 24px; }
  .webinar-banner-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .contact-card { grid-template-columns: 1fr; }
  .contact-card::before { display: none; }
  .contact-info { border-bottom: 1px solid var(--border-strong); }
}
@media (max-width: 560px) {
  .contact-row { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pillars-intro h2 .nowrap { white-space: normal; }
  .outcomes-grid { grid-template-columns: 1fr; }
  .outcome { border-right: none; border-bottom: 1px solid var(--border-strong); }
  .outcome:last-child { border-bottom: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-meta { grid-template-columns: 1fr; gap: 18px; }
  .hero-meta-item + .hero-meta-item::before { display: none; }
  .hero-node { padding: 7px 12px 7px 20px; }
  .hero-node::before { top: 12px; left: 10px; }
  .hero-node .hn-word { font-size: 0.6rem; letter-spacing: 0.04em; }
  .hero-node .hn-verb { font-size: 0.52rem; }
  /* Phones: the outer ring sits at inset:-6% and, when the visual is near
     full-width, that ring + its glow get clipped flat by the screen edge.
     Cap the visual smaller so the whole orbit (rings, glow, nodes) has side
     margin, and soften the outer glow so the smaller circle doesn't read heavy.
     Words stay intact; desktop is untouched. */
  .hero-visual { max-width: 280px; }
  .hero-orbit.outer { box-shadow: 0 0 16px rgba(239,80,35,0.18); }
  /* Phones: stack the hero CTAs full-width so their left edge aligns with the
     left-aligned headline and they read as deliberate bars, not floating pills.
     justify-content centers the label once the button is full-width. */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .indiv-card { padding: 28px 22px; }
  .indiv-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .indiv-card, .indiv-card .pillar-icon { transition: none; }
}

/* ============================================================
   DETAIL PAGE (recruitment.html) - header + advantage grid
   ============================================================ */
.page-hero {
  position: relative;
  min-height: 100vh;          /* fallback for browsers without svh */
  min-height: 100svh;
  padding: clamp(92px, 12vh, 140px) 0 clamp(28px, 4.5vh, 52px);
  display: flex; flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--border);
}
/* Same vertical model as the homepage hero: content up top, proof strip pinned bottom. */
.page-hero > .container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vh, 56px);   /* min separation to the meta strip */
}
/* About intro: full viewport, content vertically centered under the fixed header. */
.page-hero.about-intro {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(92px, 12vh, 140px) 0 clamp(28px, 4.5vh, 52px);
}
.page-hero.about-intro > .container { display: block; }
.page-hero-inner { max-width: 760px; }
.page-hero .back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-secondary);
  margin-bottom: 20px;
  transition: color .25s ease;
}
.page-hero .back:hover { color: var(--accent); }
.page-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.page-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  font-weight: 500; line-height: 1.12; letter-spacing: -0.025em;
  margin: 0 0 20px;
}
.page-hero h1 .accent { color: var(--accent); }
.page-hero .lede {
  font-size: clamp(1rem, 1.2vw, 1.12rem);
  color: var(--text-secondary); line-height: 1.65;
  max-width: 640px; margin: 0 0 28px;
}

.adv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.adv-item {
  padding: 26px 24px;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: rgba(35,31,32,0.35);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 12px;
  align-items: center;
}
.adv-item .adv-ico {
  grid-column: 1; grid-row: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid rgba(239,80,35,0.25);
  color: var(--accent); font-size: 1.05rem;
}
.adv-item h3 {
  grid-column: 2; grid-row: 1;
  font-size: 1.05rem; font-weight: 600; margin: 0; letter-spacing: -0.01em;
}
.adv-item p {
  grid-column: 1 / -1; grid-row: 2;
  font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; margin: 0;
}

/* ---- Detail-page hero: split layout + visual card + proof strip ---- */
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
  margin-block: auto;          /* center content vertically; meta stays pinned bottom */
}
.page-hero-copy { min-width: 0; max-width: 640px; }
.page-hero .hero-ctas { margin-top: 28px; }

/* Detail-page heroes read less "flat black" than the shared defaults:
   warmer multi-point accent wash (with a glow behind the right-side figure)
   and a brighter, wider grid. Homepage hero (.hero) keeps its subtler look. */
.page-hero .hero-bg {
  background:
    radial-gradient(760px 540px at 14% 16%, rgba(239,80,35,0.24), transparent 60%),
    radial-gradient(680px 620px at 86% 64%, rgba(140,38,16,0.60), transparent 62%),
    radial-gradient(440px 380px at 74% 30%, rgba(239,80,35,0.18), transparent 60%),
    linear-gradient(180deg, #0b0807 0%, #000 64%);
}
.page-hero .hero-grid-bg {
  background-image:
    linear-gradient(rgba(239,80,35,0.17) 1px, transparent 1px),
    linear-gradient(90deg, rgba(239,80,35,0.17) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(ellipse 94% 80% at 50% 30%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 94% 80% at 50% 30%, #000 40%, transparent 90%);
  opacity: 1;
}

.hire-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 28px 26px;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(35,31,32,0.66) 0%, rgba(10,8,8,0.72) 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  overflow: hidden;
  isolation: isolate;
}
.hire-card-glow {
  position: absolute; z-index: -1;
  top: -45%; right: -35%;
  width: 90%; aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(239,80,35,0.38), transparent 62%);
  pointer-events: none;
}
.hire-card-head { margin-bottom: 20px; }
.hire-card-eyebrow {
  display: block;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 6px;
}
.hire-card-title { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }

.hire-steps { list-style: none; margin: 0 0 20px; padding: 0; }
.hire-steps li {
  position: relative;
  display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start;
  padding: 11px 0;
}
.hire-steps li:not(:last-child)::before {
  content: ''; position: absolute; left: 16px; top: 34px; bottom: -5px;
  width: 2px; background: var(--border-strong);
}
.hire-steps li.is-done:not(:last-child)::before { background: rgba(239,80,35,0.5); }
.step-dot {
  position: relative; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.7rem; color: var(--muted);
  border: 1px solid var(--border-strong); background: rgba(255,255,255,0.03);
}
.is-done .step-dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.is-active .step-dot { color: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(239,80,35,0.12); }
.step-body { display: flex; flex-direction: column; }
.step-name { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.is-active .step-name { color: var(--accent); }
.step-note { font-size: 0.76rem; color: var(--text-secondary); margin-top: 2px; }

.hero-proof { grid-template-columns: repeat(3, 1fr); }
.hero-proof .num { font-size: 1.35rem; }

/* ---- "The Worktales Way" hire-hero flow (PDF page 5: Align/Source/Assess/Hire) ----
   Icon nodes on a vertical rail; a glowing comet travels the rail and each node
   pings as it passes, so the process reads as in-motion without any JS. */
.wtway { position: relative; margin-top: 4px; }
.wtway-steps { list-style: none; margin: 0; padding: 0; }
.wtway-step {
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
}
.wtway-rail {
  position: absolute; z-index: 0;
  left: 20px; transform: translateX(-50%);
  top: 30px; bottom: 30px;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg,
    transparent 0%, rgba(239,80,35,0.35) 14%,
    rgba(239,80,35,0.35) 86%, transparent 100%);
}
.wtway-node {
  position: relative; z-index: 1;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--accent); font-size: 0.95rem;
  background: linear-gradient(rgba(239,80,35,0.10), rgba(239,80,35,0.10)), #120d0e;
  border: 1px solid rgba(239,80,35,0.30);
  animation: wtwayPing 4.4s ease-in-out infinite;
}
.wtway-step:nth-child(1) .wtway-node { animation-delay: 0.15s; }
.wtway-step:nth-child(2) .wtway-node { animation-delay: 1.25s; }
.wtway-step:nth-child(3) .wtway-node { animation-delay: 2.35s; }
.wtway-step:nth-child(4) .wtway-node { animation-delay: 3.45s; }
/* 3-node variant (train hero): re-time pings to the comet's slower passes */
.wtway-3 .wtway-step:nth-child(1) .wtway-node { animation-delay: 0.3s; }
.wtway-3 .wtway-step:nth-child(2) .wtway-node { animation-delay: 2.2s; }
.wtway-3 .wtway-step:nth-child(3) .wtway-node { animation-delay: 4.0s; }
.wtway-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wtway-name { font-size: 0.98rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.wtway-num { color: var(--accent); font-weight: 700; }
.wtway-note { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; }
.wtway-comet {
  position: absolute; z-index: 2;
  left: 20px; transform: translateX(-50%);
  top: 0; width: 9px; height: 9px; border-radius: 50%;
  background: #ff8159;
  box-shadow: 0 0 12px 4px rgba(239,80,35,0.65);
  animation: wtwayComet 4.4s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes wtwayComet {
  0%   { top: 12%; opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { top: 88%; opacity: 0; }
}
@keyframes wtwayPing {
  0%, 12%, 100% {
    border-color: rgba(239,80,35,0.30);
    box-shadow: 0 0 0 0 rgba(239,80,35,0);
    transform: scale(1); color: var(--accent);
  }
  4% {
    border-color: var(--accent);
    box-shadow: 0 0 0 5px rgba(239,80,35,0.12);
    transform: scale(1.09); color: #ff8159;
  }
}
@media (prefers-reduced-motion: reduce) {
  .wtway-comet { display: none; }
  .wtway-node { animation: none; }
}

/* ---- Horizontal outcome flow (hire: same 4 steps as the hero, framed as
   what each step delivers). A single rail behind the nodes connects them. ---- */
.flowsteps {
  list-style: none; margin: 0; padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.flowsteps::before {            /* connecting rail, sits behind the opaque nodes */
  content: '';
  position: absolute; z-index: 0;
  top: 32px;                    /* vertical centre of the 64px nodes */
  left: 13%; right: 13%;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(239,80,35,0.45) 0%, rgba(239,80,35,0.22) 100%);
}
/* Multi-row flows (8 steps on Diagnose) wrap to two rows, so the single-row
   rail would only connect the first row. Drop it and let the rows stand alone. */
.flowsteps-wrapped::before { display: none; }
.flowsteps-wrapped { row-gap: 44px; }
.flowstep { position: relative; text-align: center; padding: 0 6px; }
.flowstep-node {
  position: relative; z-index: 1;
  width: 64px; height: 64px; border-radius: 50%;
  margin: 0 auto 18px;
  display: grid; place-items: center;
  font-size: 1.3rem; color: var(--accent);
  background: linear-gradient(rgba(239,80,35,0.10), rgba(239,80,35,0.10)), #120d0e;
  border: 1px solid rgba(239,80,35,0.32);
}
.flowstep-num {
  position: absolute; top: -7px; right: -7px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700;
  color: #fff; background: var(--accent);
  border: 2px solid #000;
}
.flowstep-name {
  font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.flowstep-out {
  font-size: 0.95rem; color: var(--text-secondary); line-height: 1.6;
  margin: 0 auto; max-width: 26ch;
}
@media (max-width: 820px) {
  .flowsteps { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .flowsteps::before { display: none; }   /* rail only makes sense in one row */
}
@media (max-width: 440px) {
  .flowsteps { grid-template-columns: 1fr; }
}
/* Lede + glowing "stage" panel so the flow reads as a deliberate diagram,
   not text floating on black. Distinct texture from the hero (grid+gradient). */
.pillars-lede {
  margin: 16px 0 0;
  max-width: 62ch;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.15vw, 1.08rem);
  line-height: 1.7;
}
.flow-stage {
  position: relative;
  margin-top: clamp(36px, 5vw, 56px);
  padding: clamp(34px, 5vw, 60px) clamp(22px, 4vw, 48px);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(35,31,32,0.55) 0%, rgba(10,8,8,0.62) 100%);
  overflow: hidden;
  isolation: isolate;
}
.flow-stage::before {                /* soft interior glow - keeps it off "flat box" */
  content: '';
  position: absolute; z-index: -1; inset: 0;
  background: radial-gradient(58% 85% at 50% -5%, rgba(239,80,35,0.14), transparent 70%);
  pointer-events: none;
}
.flow-close {
  margin: clamp(30px, 4vw, 46px) auto 0;
  max-width: 34ch;
  text-align: center;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 500; line-height: 1.45;
  color: var(--text);
}
.flow-close .accent { color: var(--accent); }

/* ---- Guarantee banner (why-hire) ---- */
.guarantee {
  margin-top: 22px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(18px, 3vw, 32px);
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3.5vw, 40px);
  border-radius: 18px;
  border: 1px solid rgba(239,80,35,0.35);
  background:
    radial-gradient(600px 220px at 0% 0%, rgba(239,80,35,0.20), transparent 70%),
    linear-gradient(120deg, var(--secondary) 0%, #190707 100%);
}
.guarantee-ico {
  flex: none;
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 1.3rem;
  box-shadow: 0 12px 30px rgba(239,80,35,0.4);
}
.guarantee-body h3 { margin: 0 0 4px; font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 700; letter-spacing: -0.01em; }
.guarantee-body p { margin: 0; color: var(--text-secondary); font-size: 0.92rem; max-width: 60ch; }
.guarantee .btn { white-space: nowrap; }

/* ---- Detail-page responsive ---- */
@media (max-width: 980px) {
  .page-hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .page-hero-copy { max-width: none; }
  .hire-card { max-width: 420px; }
}
@media (max-width: 720px) {
  .guarantee { grid-template-columns: auto 1fr; }
  .guarantee .btn { grid-column: 1 / -1; justify-content: center; }
}
@media (max-width: 560px) {
  .guarantee { grid-template-columns: 1fr; text-align: left; }
  .guarantee-ico { width: 48px; height: 48px; font-size: 1.1rem; }
}

/* ============================================================
   TRAINING & DEVELOPMENT (02 / Build) - detail page
   ============================================================ */

/* ============================================================
   CULTURE & LEADERSHIP (03 / Connect) - detail page
   ============================================================ */

/* ---- Hero headline: longer than other detail pages, so cap a touch
   smaller and track the viewport to hold ~3 lines in the 2-col hero ---- */
.page-hero h1.connect-hero-title { font-size: clamp(1.9rem, 3.7vw, 3rem); }

/* ---- Insights Discovery - copy + four colour energies ---- */
.insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(40px, 5vw, 76px);
  align-items: start;
}
.insights-copy p {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0 0 18px;
  max-width: 46ch;
}
.insights-copy .insights-lead { margin-bottom: 0; }
.insights-copy .lead-strong { color: var(--text); font-weight: 700; }

.insights-wheel-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---- Four colour-energies compass (pure-CSS figure) ---- */
.compass {
  /* neutral trait colour preserved from the figure's design; --border and
     --text inherit the site tokens. */
  --text-secondary: rgba(245, 243, 240, 0.62);

  position: relative;
  width: 100%;
  max-width: 480px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 7px;
  isolation: isolate;
}
.energy-quad {
  --e: #ffffff;          /* energy colour, set inline per quadrant */
  --gx: 0%; --gy: 0%;    /* glow origin, set per corner class */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 196px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(125% 125% at var(--gx) var(--gy),
      color-mix(in srgb, var(--e) 42%, transparent) 0%,
      color-mix(in srgb, var(--e) 11%, transparent) 32%,
      transparent 62%),
    rgba(255, 255, 255, 0.018);
  overflow: hidden;
  transition: background .4s ease, border-color .4s ease;
}
/* coloured edge highlight, masked to the glowing corner */
.energy-quad::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--e) 28%, transparent);
  opacity: .5;
  pointer-events: none;
  -webkit-mask: radial-gradient(120% 120% at var(--gx) var(--gy), #000 0%, transparent 60%);
  mask: radial-gradient(120% 120% at var(--gx) var(--gy), #000 0%, transparent 60%);
}
.energy-quad:hover {
  background:
    radial-gradient(125% 125% at var(--gx) var(--gy),
      color-mix(in srgb, var(--e) 56%, transparent) 0%,
      color-mix(in srgb, var(--e) 15%, transparent) 34%,
      transparent 64%),
    rgba(255, 255, 255, 0.018);
}
/* Glow origin = outer corner; content centred vertically and pushed to the
   OUTER side so the central hub stays clear. */
.q-tl { --gx: 0%;   --gy: 0%;   border-top-left-radius: 64px;
  align-items: flex-start; text-align: left;  padding-right: 96px; }
.q-tr { --gx: 100%; --gy: 0%;   border-top-right-radius: 64px;
  align-items: flex-end;   text-align: right; padding-left: 96px; }
.q-bl { --gx: 0%;   --gy: 100%; border-bottom-left-radius: 64px;
  align-items: flex-start; text-align: left;  padding-right: 96px; }
.q-br { --gx: 100%; --gy: 100%; border-bottom-right-radius: 64px;
  align-items: flex-end;   text-align: right; padding-left: 96px; }

.energy-head {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 10px;
}
.energy-name {
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--text);
  position: relative; padding-left: 18px;
}
.energy-name::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 9px; height: 9px; border-radius: 50%;
  transform: translateY(-50%);
  background: var(--e);
  box-shadow: 0 0 14px var(--e);
}
.q-tr .energy-name, .q-br .energy-name { padding-left: 0; padding-right: 18px; }
.q-tr .energy-name::before, .q-br .energy-name::before { left: auto; right: 0; }

.energy-traits {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--text-secondary);
  max-width: 22ch;
}

/* Centre hub - dark medallion with a quiet label; a thin conic ring of all
   four energies floats just outside it, separated by a small gap. */
.compass-hub {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 110px; height: 110px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  padding: 18px;
  background: radial-gradient(circle at 50% 38%, #1b1b1b 0%, #0b0b0b 100%);
  /* the solid-spread shadow paints the dark gap the ring floats in; matched
     to the .pillars section background (#000→#060404→#000). */
  box-shadow: 0 0 0 10px #050404, 0 16px 40px rgba(0, 0, 0, 0.65);
}
.compass-hub::before {
  content: '';
  position: absolute; inset: -6px; border-radius: 50%;
  /* clockwise from top: blue → red → yellow → green, matching quadrants */
  background: conic-gradient(from -90deg,
    #E04438 0 25%, #F0B429 0 50%, #5BA13C 0 75%, #4A90D9 0 100%);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1px));
  opacity: .85;
}
.compass-hub-lbl {
  font-size: 0.58rem; font-weight: 600; line-height: 1.5;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---- How it works - 5 numbered steps (accent-rule ledger) ---- */
.howit-head { margin-top: clamp(52px, 6vw, 80px); margin-bottom: clamp(28px, 3.2vw, 40px); }
.howit-title {
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 500; margin: 8px 0 0;
  line-height: 1.2; letter-spacing: -0.015em;
}
.howit-title .accent { color: var(--accent); }
.howit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
  list-style: none; margin: 0; padding: 0;
}
.howit-step {
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(35,31,32,0.4) 0%, rgba(0,0,0,0.55) 100%);
  transition: transform .35s ease, border-color .35s ease;
}
.howit-step:hover {
  transform: translateY(-4px);
  border-color: rgba(239,80,35,0.45);
}
.howit-num {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(239,80,35,0.2);
  color: var(--accent); font-size: 0.95rem; font-weight: 700;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
  transition: background .35s ease, border-color .35s ease;
}
.howit-step:hover .howit-num {
  background: rgba(239,80,35,0.2);
  border-color: rgba(239,80,35,0.42);
}
.howit-step p {
  margin: 0;
  font-size: 0.92rem; color: var(--text-secondary); line-height: 1.6;
}

@media (max-width: 980px) {
  .insights-grid { grid-template-columns: 1fr; gap: 40px; }
  .insights-wheel-wrap { order: -1; }
  .howit-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
}
@media (max-width: 520px) {
  .howit-grid { grid-template-columns: 1fr; }
  .compass { gap: 6px; }
  .energy-quad { min-height: 138px; padding: 18px; }
  .q-tl, .q-bl { padding-right: 64px; }
  .q-tr, .q-br { padding-left: 64px; }
  .compass-hub { width: 88px; height: 88px; padding: 12px; }
}

/* ============================================================
   ABOUT PAGE - hero visual, welcome message, FAQ
   ============================================================ */

/* ---- About Us: editorial intro split (image + narrative) ---- */
.about-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}
.about-intro-media {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.about-intro-glow {
  position: absolute; z-index: -1;
  inset: 8% -6% -10% 8%;
  background: radial-gradient(closest-side, rgba(239,80,35,0.28), transparent 78%);
  filter: blur(6px);
  pointer-events: none;
}
.about-intro-media img {
  width: 100%;
  display: block;
  border-radius: 18px;
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  filter: contrast(1.02);
}
.about-intro-copy { min-width: 0; max-width: 600px; }
.about-intro-copy h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  font-weight: 500; line-height: 1.1; letter-spacing: -0.025em;
  margin: 0 0 22px;
}
.about-intro-copy h1 .accent { color: var(--accent); }
.about-intro-copy p {
  font-size: clamp(0.96rem, 1.15vw, 1.05rem);
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0 0 16px;
}
.about-intro-copy .hero-ctas { margin-top: 28px; }

/* ---- Message from leadership (maroon band) ---- */
.welcome {
  position: relative;
  background:
    radial-gradient(900px 420px at 100% 0%, rgba(239,80,35,0.12), transparent 60%),
    linear-gradient(160deg, var(--secondary) 0%, #190707 55%, #0a0404 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.welcome-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}
.welcome-portrait {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.welcome-portrait::before {
  content: '';
  position: absolute; z-index: -1;
  inset: auto 0 0 0;
  height: 78%;
  border-radius: 24px;
  background:
    radial-gradient(420px 280px at 30% 20%, rgba(239,80,35,0.18), transparent 70%),
    linear-gradient(160deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.8) 100%);
  border: 1px solid rgba(241,241,242,0.14);
}
.welcome-portrait img {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5));
}
.welcome-body { min-width: 0; position: relative; }
.welcome-quote-mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 5rem; line-height: 0.6;
  color: var(--accent);
  margin: 8px 0 4px;
  height: 40px;
}
.welcome-quote { margin: 0; padding: 0; border: 0; }
.welcome-quote p {
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 18px;
  font-weight: 400;
}
.welcome-quote p:last-child { margin-bottom: 0; }
.welcome-attribution {
  display: flex; flex-direction: column; gap: 2px;
  margin: 26px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border-strong);
}
.welcome-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; color: var(--accent); }
.welcome-role { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.welcome-cred {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  font-size: 0.85rem; color: var(--text-secondary);
}
.welcome-cred i { color: var(--accent); }

/* ---- Our brand principles (row of icon values) ---- */
.principles {
  position: relative;
  background: linear-gradient(180deg, #000 0%, #060404 50%, #000 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.principles-intro { text-align: center; }
.principles-intro .section-title { text-align: center; }
.principles-intro h2 { max-width: none; }
.principles-grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
.principle {
  text-align: center;
  padding: 8px 6px;
}
.principle-ico {
  display: inline-grid; place-items: center;
  width: 76px; height: 76px;
  margin: 0 auto 20px;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1.5px solid rgba(239,80,35,0.4);
  box-shadow: 0 10px 30px rgba(239,80,35,0.12);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.principle:hover .principle-ico {
  transform: translateY(-4px);
  background: rgba(239,80,35,0.22);
  border-color: var(--accent);
}
.principle h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
  text-transform: uppercase;
}
.principle p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 22ch;
}

/* ---- FAQ accordion (native details/summary, no JS) ---- */
.faq .pillars-intro { text-align: center; }
.faq .pillars-intro .section-title { text-align: center; }
.faq .pillars-intro h2 { margin-left: auto; margin-right: auto; }
.faq-list {
  max-width: 860px;
  margin: 0 auto;
  border-top: 1px solid var(--border-strong);
}
.faq-item {
  border-bottom: 1px solid var(--border-strong);
}
.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 18px;
  padding: 22px 44px 22px 0;
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color .25s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '\f067'; /* fa plus */
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
  position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.72rem;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(239,80,35,0.25);
  transition: transform .3s ease, background .25s ease, color .25s ease;
}
.faq-item[open] summary::after {
  content: '\f068'; /* fa minus */
  background: var(--accent);
  color: #fff;
  transform: translateY(-50%) rotate(180deg);
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}
.faq-answer {
  padding: 0 44px 24px 0;
  animation: faqReveal .35s ease;
}
.faq-answer p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-secondary);
  max-width: 70ch;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-group-title {
  margin: 3rem 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  font-weight: 700;
}
.faq-list .faq-group-title:first-child { margin-top: 0; }

/* ============================================================
   ACCELERATE - Why Accelerate (waw) feature section
   ============================================================ */
.waw-wrap { display: flex; flex-direction: column; gap: 20px; }

.waw-banner {
  display: grid;
  grid-template-columns: 1fr 260px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(135deg, #ef5023 0%, #c53a15 55%, #8c2610 100%);
  position: relative;
  min-height: 220px;
}
.waw-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(700px 350px at 10% 60%, rgba(255,255,255,0.09), transparent 55%);
  pointer-events: none;
}
.waw-banner-body {
  padding: 40px 44px;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
.waw-banner-num {
  display: block;
  font-size: 4.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(255,255,255,0.11);
  margin-bottom: 12px;
}
.waw-banner-ico {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 50px; height: 50px;
  border-radius: 13px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
  color: #fff;
  font-size: 1.2rem;
  margin-bottom: 18px;
}
.waw-banner-body h3 {
  font-size: 1.55rem;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
}
.waw-banner-body p {
  font-size: 0.96rem;
  color: rgba(255,255,255,0.86);
  line-height: 1.7;
  max-width: 52ch;
  margin: 0;
}
.waw-banner-graphic {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: rgba(0,0,0,0.15);
  border-left: 1px solid rgba(255,255,255,0.08);
}
.waw-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
}
.waw-ring.r1 { width: 210px; height: 210px; }
.waw-ring.r2 { width: 136px; height: 136px; border-color: rgba(255,255,255,0.18); }
.waw-ring.r3 { width: 66px; height: 66px; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.26); }
.waw-ring-ico { position: relative; z-index: 1; font-size: 2.4rem; color: rgba(255,255,255,0.45); }

.waw-four {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.waw-feat {
  position: relative;
  padding: 32px 28px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(35,31,32,0.5) 0%, rgba(0,0,0,0.7) 100%);
  overflow: hidden;
  transition: transform .35s ease, border-color .35s ease;
}
.waw-feat::after {
  content: attr(data-num);
  position: absolute;
  right: 20px; top: 16px;
  font-size: 4rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--accent);
  opacity: 0.18;
  line-height: 1;
  pointer-events: none;
  transition: opacity .35s ease;
}
.waw-feat:hover {
  transform: translateY(-4px);
  border-color: rgba(239,80,35,0.45);
}
.waw-feat:hover::after { opacity: 0.30; }
.waw-feat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(239,80,35,0.2);
  color: var(--accent);
  font-size: 1.05rem;
  margin-bottom: 16px;
  transition: background .35s ease, border-color .35s ease;
}
.waw-feat:hover .waw-feat-ico {
  background: rgba(239,80,35,0.2);
  border-color: rgba(239,80,35,0.42);
}
.waw-feat h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  color: var(--text);
}
.waw-feat p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}
/* Train bento: icon beside the title + larger text. Scoped to .waw-feat-head
   so accelerate's stacked .waw-feat cards stay as they are. */
.waw-feat-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding-right: 52px; /* clear the corner number watermark */
}
.waw-feat-head .waw-feat-ico {
  margin-bottom: 0;
  flex-shrink: 0;
}
.waw-feat-head h3 {
  margin: 0;
  font-size: 1.25rem;
}
.waw-feat-head + p {
  font-size: 1rem;
}
/* Accelerate's "Why" grid: no corner number watermark. */
.waw-four--nonum .waw-feat::after { content: none; }
.waw-four--nonum .waw-feat-head { padding-right: 0; }

@media (max-width: 820px) {
  .waw-banner { grid-template-columns: 1fr; min-height: auto; }
  .waw-banner-graphic { display: none; }
  .waw-four { grid-template-columns: 1fr; }
  .waw-feat:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .waw-feat, .waw-feat-ico { transition: none; }
}

/* ============================================================
   ACCELERATE - 100-day timeline
   ============================================================ */
.acc-timeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 0 20px;
  align-items: stretch;
}

.acc-phase {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(35,31,32,0.5) 0%, rgba(0,0,0,0.7) 100%);
  transition: transform .35s ease, border-color .35s ease;
  display: flex;
  flex-direction: column;
}
.acc-phase:hover {
  transform: translateY(-4px);
  border-color: rgba(239,80,35,0.5);
}

.acc-phase-marker {
  padding: 24px 28px 0;
}

.acc-phase-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.acc-phase-headtext {
  min-width: 0;
}

.acc-phase-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(239,80,35,0.25);
  border-radius: 100px;
  padding: 5px 12px;
  white-space: nowrap;
}

.acc-phase-body {
  padding: 18px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.acc-phase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid rgba(239,80,35,0.2);
  color: var(--accent);
  font-size: 1.05rem;
  transition: background .35s ease, border-color .35s ease;
}
.acc-phase:hover .acc-phase-icon {
  background: rgba(239,80,35,0.2);
  border-color: rgba(239,80,35,0.45);
}

.acc-phase-body h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.acc-phase-sub {
  font-size: 0.72rem;
  color: var(--accent-light);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0;
}

.acc-phase-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acc-phase-list li {
  font-size: 0.84rem;
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.acc-phase-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 10px; height: 1.5px;
  background: var(--accent);
}

.acc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 56px;
  color: var(--accent);
  font-size: 1rem;
  opacity: 0.35;
}

@media (max-width: 860px) {
  .acc-timeline {
    grid-template-columns: 1fr;
    gap: 16px 0;
  }
  .acc-arrow { display: none; }
  .acc-phase:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .acc-phase { transition: none; }
  .acc-phase-icon { transition: none; }
  .howit-step, .howit-num { transition: none; }
  .howit-step:hover { transform: none; }
}

/* ---- About-page responsive ---- */
@media (max-width: 980px) {
  .page-hero.about-intro { min-height: auto; padding: 116px 0 56px; }
  .about-intro-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-intro-media { max-width: 460px; margin: 0 auto; order: -1; }
  .about-intro-copy { max-width: none; }
  .welcome-grid { grid-template-columns: 1fr; gap: 36px; }
  .welcome-portrait { max-width: 420px; margin: 0 auto; }
  .principles-grid { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
}
@media (max-width: 620px) {
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .principles-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-answer { animation: none; }
  .faq-item[open] summary::after { transition: none; }
  .principle:hover .principle-ico { transform: none; }
}

/* ============================================================
   OPEN ROLES (talent.html) — rendered from /jobs.json by homepage.js
   ============================================================ */
.roles-list { margin-top: 40px; }
.roles-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}
.role-card {
  display: flex;
  flex-direction: column;
  padding: 32px 30px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(35,31,32,0.4) 0%, rgba(0,0,0,0.6) 100%);
  transition: transform .35s ease, border-color .35s ease;
}
.role-card:hover {
  transform: translateY(-4px);
  border-color: rgba(239,80,35,0.45);
}
.role-card-title {
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
.role-card-meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 16px;
  padding: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.role-card-meta i { color: rgba(239,80,35,0.9); margin-right: 6px; }
.role-card-desc {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 24px;
  flex: 1;
}
.role-card-cta { align-self: flex-start; margin-top: auto; }
.roles-embed-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 72px 32px;
  text-align: center;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(35,31,32,0.4) 0%, rgba(0,0,0,0.6) 100%);
}
@media (max-width: 860px) {
  .roles-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .roles-embed-placeholder { padding: 48px 22px; }
  .role-card { padding: 28px 24px; }
}

/* Native webinar registration form (replaces the RecruitCRM iframe) */
.webinar-feature .webinar-facts li[hidden],
.webinar-form[hidden],
.webinar-form [hidden],
.webinar-register-empty[hidden] { display: none; }
.webinar-register {
  max-width: 640px;
  margin: 40px auto 0;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(35,31,32,0.4) 0%, rgba(0,0,0,0.6) 100%);
}
.webinar-form .hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-status {
  margin: 4px 0 0;
  font-size: 0.94rem;
  line-height: 1.5;
}
.form-status.success { color: #7ed492; }
.form-status.error { color: #f0908f; }
.form-status a { color: inherit; text-decoration: underline; }
.webinar-register-empty {
  margin: 0;
  text-align: center;
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.6;
}

/* ============================================================
   P3 · DIAGNOSTIC COMPONENTS
   Scorecard, 3P framework matrix, 0-4 maturity scale, RAG bands.
   RAG colour is always paired with a text label: colour alone is
   not an accessible encoding and does not survive a palette revert.
   ============================================================ */

/* --- Shared RAG modifiers -------------------------------------------- */
.is-red   { --rag: var(--rag-red);   --rag-ink: var(--rag-red-ink); }
.is-amber { --rag: var(--rag-amber); --rag-ink: var(--rag-amber-ink); }
.is-green { --rag: var(--rag-green); --rag-ink: var(--rag-green-ink); }

/* --- 1. Sales Excellence Scorecard ----------------------------------- */
/* Deliberately a light block on a dark site: this is a sample of a real
   client deliverable, not a page section. The inversion is the point. */
.scorecard {
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  overflow: hidden;
  background: #EFEFEF;
  color: #111;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.scorecard-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 3vw, 34px);
  background: #000;
}
.scorecard-eyebrow {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.scorecard-note {
  margin: 4px 0 0;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.scorecard-overall {
  padding: 8px 18px;
  border-radius: 100px;
  background: var(--accent);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.scorecard-body {
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 34px);
}
.scorecard-group + .scorecard-group {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(239, 80, 35, 0.35);
}
.scorecard-group {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 12px;
}
.scorecard-dim {
  margin: 0;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.scorecard-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.scorecard-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.1fr) minmax(120px, 1.6fr) 44px 42px;
  align-items: center;
  gap: 14px;
}
.scorecard-label {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 600;
}
.scorecard-bar {
  height: 14px;
  border-radius: 3px;
  background: #111;
  overflow: hidden;
}
/* --score is a percentage set inline per row: score / 4 * 100 */
.scorecard-fill {
  display: block;
  height: 100%;
  width: var(--score, 0%);
  background: var(--rag, var(--accent));
}
.scorecard-score {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.scorecard-rag {
  margin: 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: right;
  color: var(--rag-ink, #111);
}

@media (max-width: 720px) {
  .scorecard-group { grid-template-columns: 1fr; gap: 10px; }
  .scorecard-row {
    grid-template-columns: 1fr 44px 42px;
    grid-template-areas:
      "label label label"
      "bar   score rag";
    gap: 6px 12px;
  }
  .scorecard-label { grid-area: label; }
  .scorecard-bar   { grid-area: bar; }
  .scorecard-score { grid-area: score; }
  .scorecard-rag   { grid-area: rag; }
}

/* --- 2. 3P framework matrix ------------------------------------------ */
.framework-3p {
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(35,31,32,0.5) 0%, rgba(0,0,0,0.7) 100%);
}
.f3p-head,
.f3p-row {
  display: grid;
  grid-template-columns: 0.7fr 1fr 1.3fr 1.2fr;
  gap: clamp(16px, 2vw, 32px);
  padding: clamp(18px, 2.2vw, 26px) clamp(20px, 2.6vw, 32px);
}
.f3p-head {
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.f3p-head p { margin: 0; }
.f3p-row + .f3p-row { border-top: 1px solid var(--border); }
.f3p-dim {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}
.f3p-measures,
.f3p-question {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.94rem;
}
.f3p-question { font-style: italic; }
.f3p-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 0.94rem;
}
.f3p-count {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
}
/* Four columns of prose do not fit narrow: become stacked cards. */
@media (max-width: 900px) {
  .f3p-head { display: none; }
  .f3p-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .f3p-measures::before,
  .f3p-question::before,
  .f3p-areas::before {
    display: block;
    margin-bottom: 4px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    font-style: normal;
  }
  .f3p-measures::before { content: "What it measures"; }
  .f3p-question::before { content: "Executive question"; }
  .f3p-areas::before    { content: "Assessment areas"; }
}

/* --- 3. Maturity scale (0-4) ----------------------------------------- */
.maturity-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.maturity-step {
  padding: 20px 18px 22px;
  background: var(--rag, var(--accent));
  color: #fff;
  text-align: center;
}
.maturity-step:first-child { border-radius: 14px 0 0 14px; }
.maturity-step:last-child  { border-radius: 0 14px 14px 0; }
/* Filled blocks carry body text, so they need 4.5:1 against it. The vivid bar
   tokens only clear the 3:1 graphics threshold, so blocks use the deeper ink
   values or flip to dark text. */
.maturity-step--0 { --rag: var(--rag-red-ink); }
.maturity-step--1 { --rag: var(--accent); color: #2A0E03; }
.maturity-step--2 { --rag: var(--rag-amber); color: #2b1a00; }
.maturity-step--3 { --rag: var(--rag-green-ink); }
.maturity-step--4 { --rag: var(--rag-green-2); color: #04291a; }
.maturity-num {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  line-height: 1;
}
.maturity-name {
  margin: 8px 0 4px;
  font-size: 0.95rem;
  font-weight: 700;
}
.maturity-desc {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.9;
}
@media (max-width: 760px) {
  .maturity-scale { grid-template-columns: 1fr; gap: 3px; }
  .maturity-step:first-child { border-radius: 14px 14px 0 0; }
  .maturity-step:last-child  { border-radius: 0 0 14px 14px; }
  .maturity-step {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: baseline;
    gap: 4px 14px;
    text-align: left;
    padding: 14px 18px;
  }
  .maturity-num  { grid-row: span 2; }
  .maturity-name { margin: 0; }
}

/* --- 4. RAG bands ---------------------------------------------------- */
.rag-bands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.rag-band {
  padding: 22px 24px 24px;
  background: var(--rag, var(--accent));
  color: #fff;
}
.rag-band:first-child { border-radius: 14px 0 0 14px; }
.rag-band:last-child  { border-radius: 0 14px 14px 0; }
/* Same contrast rule as .maturity-step: blocks use ink, amber flips to dark text. */
.rag-band.is-red   { --rag: var(--rag-red-ink); }
.rag-band.is-green { --rag: var(--rag-green-ink); }
.rag-band.is-amber { color: #2b1a00; }
.rag-band-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.rag-band-range {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1;
}
.rag-band-tag {
  padding: 5px 14px;
  border-radius: 100px;
  background: #fff;
  color: #111;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.rag-band-desc {
  margin: 12px 0 0;
  font-size: 0.86rem;
  opacity: 0.92;
}
@media (max-width: 760px) {
  .rag-bands { grid-template-columns: 1fr; gap: 3px; }
  .rag-band:first-child { border-radius: 14px 14px 0 0; }
  .rag-band:last-child  { border-radius: 0 0 14px 14px; }
}

/* Six-item variant: 3x2 as in the deck. The base 5-up grid leaves an orphan. */
.principles-grid--3up { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 620px) {
  .principles-grid--3up { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .principles-grid--3up { grid-template-columns: 1fr; }
}

/* .hero-proof pins 3 columns outside any media query, which beats the 560px
   stack rule. Restore the stack, and add a 4-stat variant. */
.hero-proof--4up { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .hero-proof--4up { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
  .hero-proof--4up .hero-meta-item + .hero-meta-item::before { display: none; }
}
@media (max-width: 560px) {
  .hero-proof,
  .hero-proof--4up { grid-template-columns: 1fr; }
}

/* The decorative glow is positioned outside its card and widens the document
   on narrow screens. Clip it to the card instead of letting the page scroll. */
.hire-card { overflow: hidden; }

/* Section-scoped stat tiles (deck slide 11). Unlike .hero-meta, which is a
   page-summary band, these are cards owned by the section they sit in. */
.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}
.stat-tile {
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(35,31,32,0.5) 0%, rgba(0,0,0,0.7) 100%);
  padding: 26px 26px 24px;
  transition: transform .35s ease, border-color .35s ease;
}
.stat-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(239,80,35,0.5);
}
.stat-tile .num {
  font-size: clamp(1.8rem, 2.6vw, 2.4rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.stat-tile .lbl {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--text-secondary);
}
@media (max-width: 900px) {
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .stat-tiles { grid-template-columns: 1fr; }
}

/* Six-stage variant of the accelerate timeline: plain 3x2 card grid, no
   arrow connectors. */
.acc-timeline--grid6 {
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}
@media (max-width: 900px) {
  .acc-timeline--grid6 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .acc-timeline--grid6 { grid-template-columns: 1fr; }
}

/* Prose variant of the phase card body (6-stage framework uses a paragraph
   where the accelerate timeline used a bullet list). */
.acc-phase-copy {
  margin: 0;
  padding: 0 28px 26px;
  color: var(--text-secondary);
  font-size: 0.94rem;
}