/* =============================================================
   Best Work Culture — main stylesheet
   1. Tokens          5. Sections
   2. Base            6. Footer
   3. Layout          7. Motion / reveal states
   4. Components      8. Responsive
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-soft: rgba(37, 99, 235, 0.08);
  --primary-soft-strong: rgba(37, 99, 235, 0.12);
  --secondary: #0f172a;
  --accent: #f59e0b;
  --accent-dark: #d97706;
  --accent-deep: #b45309;
  --accent-soft: rgba(245, 158, 11, 0.12);
  --bg: #f8fafc;
  --surface: #ffffff;
  --surface-muted: rgba(255, 255, 255, 0.6);
  --text: #0f172a;
  --text-muted: #475569;
  --text-soft: #64748b;
  --text-faint: #94a3b8;
  --line: rgba(15, 23, 42, 0.08);
  --line-soft: rgba(15, 23, 42, 0.06);
  --linkedin: #0a66c2;

  --radius-sm: 12px;
  --radius: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --container: 1280px;
  --gutter: 1.5rem;
  --section-y: 7rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --shadow-card: 0 24px 48px -14px rgba(15, 23, 42, 0.16);
  --shadow-glass: 0 20px 45px -15px rgba(15, 23, 42, 0.15), 0 4px 12px -4px rgba(15, 23, 42, 0.06);
  --shadow-cta: 0 12px 24px -8px rgba(37, 99, 235, 0.45);
}

/* ---------- 2. Base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

p { margin: 0; }

/* Both list types: an unreset <ol> keeps a 40px indent that silently shifts
   any grid or flex layout built on it. */
ul, ol { margin: 0; padding: 0; list-style: none; }

a {
  color: inherit;
  text-decoration: none;
}

img, svg { display: block; max-width: 100%; }

/* Author display rules such as `svg { display: block }` and `.btn { display:
   inline-flex }` outrank the UA [hidden] style, so state it once, globally. */
[hidden] { display: none !important; }

/* Every inline icon needs an intrinsic size: an SVG with only a viewBox
   expands to fill its container otherwise. Context rules override this. */
.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--secondary);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease-std);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: 48rem; }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight { padding-block: 4rem; }
.section--surface { background: var(--surface-muted); }
.section--bordered { border-block: 1px solid rgba(226, 232, 240, 0.8); }
.section--clip { overflow: hidden; }

.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--tight { gap: 1.25rem; }

.stack > * + * { margin-top: 1rem; }

/* ---------- 4. Components ---------- */

/* Blobs: decorative background gradients */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}
.blob--primary { background: radial-gradient(circle, var(--primary) 0%, transparent 70%); }
.blob--accent { background: radial-gradient(circle, var(--accent) 0%, transparent 70%); }
.blob--xl { width: 520px; height: 520px; }
.blob--lg { width: 460px; height: 460px; }
.blob--md { width: 400px; height: 400px; }
.blob--sm { width: 300px; height: 300px; }
.blob--top-left { top: -120px; left: -160px; }
.blob--top-right { top: -100px; right: -140px; }
.blob--bottom-right { bottom: -140px; right: -120px; }
.blob--bottom-left { bottom: -120px; left: -140px; }
.blob--mid-right { top: 40%; right: 20%; }
.blob--o-30 { opacity: 0.3; }
.blob--o-18 { opacity: 0.18; }
.blob--o-15 { opacity: 0.15; }
.blob--o-12 { opacity: 0.12; }

.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-glass);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  transition: transform 0.25s var(--ease-std), box-shadow 0.25s var(--ease-std),
    background 0.25s var(--ease-std), border-color 0.25s var(--ease-std);
}
.btn--lg {
  font-size: 1rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-xl);
}
.btn--primary {
  background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -8px rgba(37, 99, 235, 0.55);
}
.btn--ghost {
  background: var(--surface);
  border: 1px solid #e2e8f0;
  color: #1e293b;
}
.btn--ghost:hover {
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.25);
}
.btn--accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 16px 32px -10px rgba(245, 158, 11, 0.5);
}
.btn--accent:hover { transform: translateY(-2px); }
.btn--block { width: 100%; }
/* Sits inside a card rather than under a section heading, so it is set down
   from the default to stop it dominating the card it lives in. */
.btn--sm { font-size: 0.8125rem; padding: 0.5rem 0.9375rem; border-radius: var(--radius-sm); }

/* Pills / badges */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pill .icon { width: 1rem; height: 1rem; color: var(--accent); }
.pill--primary { background: var(--primary-soft); color: var(--primary-dark); }
.pill--accent { background: var(--accent-soft); color: var(--accent-deep); }
.pill--glass { color: var(--primary-dark); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--primary-soft);
  color: var(--primary-dark);
}
.tag .icon { width: 11px; height: 11px; color: var(--accent); }

/* Cards */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  transition: transform 0.35s var(--ease-std), box-shadow 0.35s ease, border-color 0.35s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-card);
  border-color: rgba(37, 99, 235, 0.2);
}
.card--pad-lg { padding: 2rem; }
.card--center { text-align: center; }
.card--flex { display: flex; flex-direction: column; justify-content: center; }
.card--invert {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  align-items: center;
  text-align: center;
}
.card--soft { background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(245, 158, 11, 0.06)); }
.card--flex .btn { margin-top: 1rem; }
.card--highlight { border-color: rgba(245, 158, 11, 0.3); }

/* Icon tiles */
.icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}
.icon-tile .icon { width: 20px; height: 20px; }
.icon-tile--primary { background: var(--primary-soft-strong); color: var(--primary); }
.icon-tile--accent { background: var(--accent-soft); color: var(--accent); }
.icon-tile--linkedin { background: rgba(10, 102, 194, 0.1); color: var(--linkedin); }
.icon-tile--lg { width: 3rem; height: 3rem; border-radius: var(--radius); }
.icon-tile--lg .icon { width: 22px; height: 22px; }
.icon-tile--sm { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); margin-inline: auto; }
.icon-tile--sm .icon { width: 18px; height: 18px; }
.icon-tile--center { margin-inline: auto; }
.icon-tile--gradient {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(37, 99, 235, 0.1));
  color: var(--accent);
}

/* Avatars */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.avatar--sm { width: 2.75rem; height: 2.75rem; font-size: 0.875rem; }
.avatar--md { width: 3rem; height: 3rem; font-size: 0.875rem; }
.avatar--lg { width: 4rem; height: 4rem; font-size: 1.125rem; }
.avatar--blue { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.avatar--amber { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.avatar--slate { background: linear-gradient(135deg, var(--secondary), #334155); }

/* Text helpers */
.eyebrow { margin-bottom: 1.5rem; }
.section-head { max-width: 42rem; margin-inline: auto; text-align: center; margin-bottom: 4rem; }
.section-head--wide { max-width: 48rem; margin-bottom: 5rem; }
/* A section head with nothing after it. The gap it normally opens for the
   content below becomes dead space at the foot of the page. */
.section-head--last { margin-bottom: 0; }
.section-title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.25rem; }
.section-lede { font-size: 1.125rem; color: var(--text-muted); }
.text-muted { color: var(--text-muted); }
.text-soft { color: var(--text-soft); }
.text-faint { color: var(--text-faint); }
.link-arrow { font-size: 0.875rem; font-weight: 600; color: var(--primary); }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
}
.header-shell {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-glass);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled .header-shell {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.22);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 5rem;
  transition: height 0.3s var(--ease-std);
}
.site-header.is-scrolled .header-inner { height: 4rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}
/* One lockup image rather than a mark plus live text: the wordmark is part
   of the supplied artwork, so the alt text carries the name for search and
   screen readers. Height drives the size; width follows the aspect ratio. */
.brand__logo {
  height: 2.5rem;
  width: auto;
  max-width: none;
}
.brand__logo--dark {
  position: relative;
  width: calc(2.5rem * 440 / 120);
}
.brand__logo--dark { display: none; }
.brand__logo-art {
  display: block;
  width: 100%;
  height: 100%;
}
.brand__logo-mark-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 27.27%;
  height: 100%;
  object-fit: contain;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .brand__logo--light { display: none; }
  html:not([data-theme="light"]) .brand__logo--dark { display: block; }
}
html[data-theme="dark"] .brand__logo--light { display: none; }
html[data-theme="dark"] .brand__logo--dark { display: block; }
html[data-theme="light"] .brand__logo--light { display: block; }
html[data-theme="light"] .brand__logo--dark { display: none; }
.site-header.is-scrolled .brand__logo { height: 2.125rem; }
.site-header.is-scrolled .brand__logo--dark { width: calc(2.125rem * 440 / 120); }
.brand__logo { transition: height 0.3s var(--ease-std); }
.site-footer .brand__logo { height: 2.75rem; }
.site-footer .brand__logo--dark { width: calc(2.75rem * 440 / 120); }

.brand__mark { width: 2.25rem; height: 2.25rem; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  color: var(--secondary);
  white-space: nowrap;
}
.brand__name em { font-style: normal; color: var(--primary); }
.brand__tagline {
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
}

.main-nav ul { display: flex; align-items: center; gap: 1.75rem; }

.nav-tag {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--radius-pill);
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.nav-link--feature { white-space: nowrap; }
.nav-link {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.2s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}
.nav-link:hover { color: var(--secondary); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--secondary);
}
.nav-toggle .icon { width: 22px; height: 22px; }
.nav-toggle .icon--close { display: none; }
.nav-toggle[aria-expanded="true"] .icon--menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon--close { display: block; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1rem var(--gutter) 1.5rem;
}
.mobile-nav.is-open { display: block; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 0.25rem; }
/* Nav links only. The panel also holds a call to action, and that is a button
   that happens to be an anchor: matching it here stripped its display, padding
   and colour, leaving the label left-aligned in muted grey on a blue fill. */
.mobile-nav a:not(.btn) {
  display: block;
  padding: 0.75rem 0.5rem;
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
}
.mobile-nav a:not(.btn):hover { background: var(--primary-soft); color: var(--primary-dark); }
.mobile-nav .btn { margin-top: 0.75rem; width: 100%; }

/* ---------- 5. Sections ---------- */

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem;
  align-items: center;
  padding-block: 6rem 7rem;
}
.hero__title {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.08;
  margin-bottom: 1.5rem;
}
.hero__lede {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 36rem;
  margin-bottom: 2.5rem;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3.5rem;
}
/* Inside a centred section head the same button row has to centre itself:
   text-align does not move flex items, so it would otherwise sit hard left
   under copy that is centred. The trailing space belongs to the section. */
.section-head .hero__actions {
  justify-content: center;
  margin-bottom: 0;
}
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}
.hero__stats dt { font-size: 0.875rem; color: var(--text-soft); margin-top: 0.125rem; }
.hero__stats dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--secondary);
}

.hero__visual { position: relative; height: 460px; }
.hero-glow {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
}
.hero-glow--primary {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18) 0%, transparent 70%);
  top: 130px; left: 40px;
}
.hero-glow--accent {
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.25) 0%, transparent 70%);
  bottom: 40px; right: 30px;
}

/* ---- Orbit composition ----
   The verification mark sits at the centre; the five cards sit on the ring
   around it, which is why they are placed at the corners rather than stacked. */
.orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
}
.orbit__ring {
  stroke: rgba(37, 99, 235, 0.28);
  stroke-width: 1.5;
  stroke-dasharray: 5 11;
  fill: none;
}
.orbit__ring--inner { stroke: rgba(245, 158, 11, 0.25); stroke-dasharray: 3 13; }

.hero-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  z-index: 10;
}
.hero-core__glow {
  position: absolute;
  inset: -46px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.42) 0%, rgba(245, 158, 11, 0.12) 45%, transparent 68%);
  filter: blur(14px);
  animation: pulseGlow 4.5s ease-in-out infinite;
}
.hero-core__rays {
  position: absolute;
  inset: -50px;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  /* The base `svg { max-width: 100% }` rule would clamp this back to the
     disc width and pull the rays in behind it. */
  max-width: none;
  animation: spin 48s linear infinite;
}
.hero-core__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 12px rgba(245, 158, 11, 0.10),
    0 0 0 24px rgba(245, 158, 11, 0.05),
    0 22px 45px -14px rgba(245, 158, 11, 0.5);
}
.hero-core__disc .icon { width: 62px; height: 62px; color: var(--accent); }

@keyframes spin { to { transform: rotate(360deg); } }

.orbit-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  z-index: 5;
  animation: floatSoft 6s ease-in-out infinite;
}
.orbit-dot--1 { top: 44px;  left: 296px; background: var(--accent); }
.orbit-dot--2 { top: 196px; left: 96px;  background: var(--primary); animation-delay: 0.6s; }
.orbit-dot--3 { top: 214px; left: 168px; background: var(--accent); width: 7px; height: 7px; animation-delay: 1.2s; }
.orbit-dot--4 { top: 200px; right: 62px; background: var(--accent); animation-delay: 1.8s; }
.orbit-dot--5 { top: 244px; right: 6px;  background: #a78bfa; width: 7px; height: 7px; animation-delay: 2.4s; }
.orbit-dot--6 { bottom: 84px; right: 84px; background: var(--accent); width: 7px; height: 7px; animation-delay: 3s; }

.float-card {
  position: absolute;
  border-radius: var(--radius-lg);
  padding: 1rem;
  z-index: 20;
}
/* Positions are tuned as a cluster: each card overlaps the vertical band of
   its neighbour so the composition reads as a stack, not a ring with a hole
   in the middle. */
.float-card--profile { width: 16rem; padding: 1.25rem; top: 0; left: -12px; z-index: 20; }
.float-card--certificate { width: 13.5rem; top: 0; right: -12px; z-index: 20; }
.float-card--linkedin { width: 15rem; bottom: 88px; left: -28px; z-index: 20; }
.float-card--linkedin .icon { width: 16px; height: 16px; color: var(--linkedin); }
.float-card .asset-card__label { font-size: 0.75rem; color: var(--text-muted); }
.float-card .leader__name { font-size: 0.875rem; margin-block: 0.25rem; }
.float-card .benefit__body { font-size: 0.75rem; margin-top: 0.5rem; }
.float-card .text-faint,
.float-card .text-soft { font-size: 0.6875rem; }
.float-card .leader__role { font-size: 0.75rem; margin-bottom: 0; }
.float-card--city { bottom: 100px; right: -18px; z-index: 22; padding: 0.75rem 1rem; }
.float-card--company { width: 13rem; bottom: -39px; left: 50%; margin-left: -104px; z-index: 22; }
.float-badge {
  position: absolute;
  top: 176px; right: 116px;
  z-index: 25;
  width: 4rem; height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.08), 0 0 0 8px rgba(37, 99, 235, 0.05),
    var(--shadow-glass);
}
.float-badge .icon { width: 28px; height: 28px; }

.mini-row { display: flex; align-items: center; gap: 0.75rem; }
.mini-row--between { justify-content: space-between; }
.mini-name { display: flex; align-items: center; gap: 0.375rem; }
.mini-name .icon { width: 15px; height: 15px; color: var(--accent); }
.divider { height: 1px; width: 100%; background: rgba(226, 232, 240, 0.8); margin-block: 0.75rem; }
.meter { width: 100%; height: 0.375rem; border-radius: var(--radius-pill); background: #f1f5f9; overflow: hidden; }
.meter__fill {
  height: 100%;
  width: 70%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), #fbbf24);
}

/* Stats band */
.stats-grid { text-align: center; }
.stats-grid dd {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 2.25rem);
}
.stats-grid dt { font-size: 0.875rem; color: var(--text-soft); font-weight: 500; }
.stat--primary dd { color: var(--primary); }
.stat--secondary dd { color: var(--secondary); }
.stat--accent dd { color: var(--accent); }

/* Steps */
.steps-grid { position: relative; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; }
.connector-line {
  position: absolute;
  top: 42px;
  /* Start and end on the dot centres: half a column in from each edge.
     Column width is (100% - 4 gaps) / 5, so half of that is (100% - 5rem) / 10.
     Derived rather than a fixed percentage, so it holds at any container width. */
  left: calc((100% - 5rem) / 10);
  right: calc((100% - 5rem) / 10);
  height: 2px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.06) 0%, rgba(37, 99, 235, 0.35) 50%, rgba(37, 99, 235, 0.06) 100%);
}
.step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.step__dot {
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
  position: relative;
  z-index: 1;
  margin: 34px auto 24px;
}
.step__card {
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  width: 100%;
}
.step__index { font-size: 0.75rem; font-weight: 600; color: var(--primary-dark); margin-bottom: 0.25rem; }
.step__title { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; line-height: 1.35; }

.steps-list { display: none; position: relative; padding-left: 2rem; }
.steps-list__rail {
  position: absolute;
  top: 0.5rem; bottom: 0.5rem; left: 15px;
  width: 2px;
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.3), rgba(245, 158, 11, 0.3));
}
.steps-list ol { display: flex; flex-direction: column; gap: 1.5rem; }
.steps-list li { position: relative; }
.steps-list li::before {
  content: "";
  position: absolute;
  left: -2rem; top: 1.5rem;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}
.step-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
}
.step-row .icon-tile { margin-bottom: 0; }

/* Leader cards */
.leader__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.leader__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: 0.125rem; }
.leader__role { font-size: 0.875rem; color: var(--text-soft); margin-bottom: 0.75rem; }
.leader__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-bottom: 1.25rem;
}

.section-head--split {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
  text-align: left;
  margin-bottom: 3.5rem;
}

/* City / benefit cards */
/* Carries the full gap down to the link, because the "N HR leaders" line that
   used to sit between them has been removed from the card. */
.city__name { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; margin-bottom: 1rem; }

/* Verified leader cards. Centred, because a photograph reads as the subject of
   the card and everything under it is a caption on that photograph. */
.leader { text-align: center; display: flex; flex-direction: column; align-items: center; }
.leader__photo {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 0.875rem;
  background: var(--primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.leader__photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* A real photograph fills the circle; the placeholder is a glyph and is left
   to sit inside it at its own size. */
.leader__photo img.is-photo { object-fit: cover; }
.leader__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; }
.leader__role {
  font-size: 0.875rem;
  color: var(--text-soft);
  line-height: 1.5;
  /* Pushes the button to the bottom edge whatever the length of the role, so a
     row of cards has its buttons on one line. */
  margin: 0 0 1.125rem;
  flex-grow: 1;
}
.leader__at { color: var(--text-faint); }
/* Wraps to two lines on a narrow card rather than letting either button shrink
   below its label. */
.leader__actions {
  margin: auto 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.section-foot {
  margin: 2.5rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
  color: var(--text-soft);
}
/* Sits where the link-arrow sits on a city that has an event, so cards with and
   without one keep the same height and the grid rows stay level. */
.city__soon {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-faint);
  margin: 0;
}
.benefit__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; }
.benefit__body { font-size: 0.875rem; color: var(--text-soft); line-height: 1.6; }
.asset-card__label { font-size: 0.875rem; font-weight: 600; }

/* Testimonials */
.rating { display: flex; gap: 0.125rem; color: var(--accent); margin-bottom: 1rem; }
.rating .icon { width: 16px; height: 16px; }
blockquote { margin: 0 0 1.5rem; color: var(--text-muted); line-height: 1.7; }
.testimonial cite { font-style: normal; }
.testimonial__name { font-weight: 600; font-size: 0.875rem; }
.testimonial__role { font-size: 0.75rem; color: var(--text-soft); }

/* FAQ */
.faq-list { display: flex; flex-direction: column; gap: 1rem; }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__icon {
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--primary);
  transition: transform 0.3s ease;
}
.faq-item[open] .faq-item__icon { transform: rotate(45deg); }
.faq-item__answer { font-size: 0.875rem; color: var(--text-soft); line-height: 1.7; margin-top: 1rem; }

/* Final CTA */
.cta-final { position: relative; overflow: hidden; text-align: center; }
.cta-final__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 55%, var(--primary-dark) 130%);
}
.cta-final .container { position: relative; z-index: 1; }
.cta-final__title { font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin-bottom: 1.25rem; }
.cta-final__lede { font-size: 1.125rem; color: #cbd5e1; max-width: 34rem; margin: 0 auto 2.5rem; }

/* ---------- 6. Footer ---------- */
.site-footer {
  background: var(--surface);
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  padding-block: 4rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.footer-about { max-width: 22rem; }
.footer-about .brand { margin-bottom: 1rem; }
.footer-about p { font-size: 0.875rem; color: var(--text-soft); line-height: 1.7; }
.footer-contact { margin-top: 1rem; font-size: 0.875rem; }
.footer-contact a { color: var(--primary); font-weight: 500; }
.footer-contact a:hover { text-decoration: underline; }
.footer-col h2 { font-family: var(--font-display); font-weight: 700; font-size: 0.875rem; margin-bottom: 1rem; }
.footer-col li + li { margin-top: 0.75rem; }
.footer-col a { font-size: 0.875rem; color: var(--text-soft); }
.footer-col a:hover { color: var(--secondary); text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
}
.footer-bottom p { font-size: 0.875rem; color: var(--text-faint); }
.social-links { display: flex; gap: 0.75rem; }
.social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  color: var(--text-muted);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.social-links a:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-2px); }
.social-links .icon { width: 15px; height: 15px; }

/* ---------- 7. Motion ---------- */
@keyframes floatA { 0%, 100% { transform: translate(0, 0) rotate(-3deg); } 50% { transform: translate(0, -16px) rotate(-3deg); } }
@keyframes floatB { 0%, 100% { transform: translate(0, 0) rotate(2deg); } 50% { transform: translate(0, -20px) rotate(2deg); } }
@keyframes floatC { 0%, 100% { transform: translate(0, 0) rotate(-1deg); } 50% { transform: translate(0, -12px) rotate(-1deg); } }
@keyframes floatSoft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.06); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes drift { 0% { transform: translate(0, 0); } 50% { transform: translate(14px, -10px); } 100% { transform: translate(0, 0); } }

.float-a { animation: floatA 7s ease-in-out infinite; }
.float-b { animation: floatB 8.5s ease-in-out infinite; }
.float-c { animation: floatC 6s ease-in-out infinite; }
.float-soft { animation: floatSoft 5s ease-in-out infinite; }
.glow-pulse { animation: pulseGlow 4.5s ease-in-out infinite; }
.drift { animation: drift 12s ease-in-out infinite; }
.delay-1 { animation-delay: 0.5s; }
.delay-2 { animation-delay: 1s; }
.delay-3 { animation-delay: 1.5s; }
.delay-4 { animation-delay: 2s; }
.delay-5 { animation-delay: 3s; }

.shimmer-text {
  background: linear-gradient(90deg, var(--secondary) 0%, var(--secondary) 40%, var(--primary) 50%, var(--secondary) 60%, var(--secondary) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}

.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* Pre-hide reveal targets only when JS-driven motion is active. */
.motion-ready .card,
.motion-ready [data-m],
.motion-ready .hero-copy > *,
.motion-ready .hero__visual > *,
.motion-ready .steps-grid > *,
.motion-ready .steps-list li,
.motion-ready .stats-grid > *,
.motion-ready .cta-final__content > * { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 8. Responsive ---------- */
@media (max-width: 1023px) {
  :root { --section-y: 4.5rem; }

  .main-nav { display: none; }
  .nav-toggle { display: flex; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 3.5rem 4rem; }
  .hero__visual { display: none; }

  .steps-grid { display: none; }
  .steps-list { display: block; }

  .grid--4, .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: minmax(0, 1fr); }

  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 639px) {
  :root { --gutter: 1.25rem; }

  .grid--4, .grid--5, .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__actions .btn { width: 100%; }
  .section-head--split { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  /* Brand, CTA and toggle share the bar at this width, so the CTA gives up the
     padding it does not need rather than disappearing into the panel. The label
     stays short: it is "Nominate" here, not the full sentence. */
  .header-actions .btn {
    padding: 0.55rem 0.85rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
  .brand__tagline { display: none; }
  .brand__logo { height: 2.125rem; }
  .brand__logo--dark { width: calc(2.125rem * 440 / 120); }
}

/* Narrow phones. Below about 360px the three items stop fitting on their own
   terms, so the logo and the button each give up a little more. */
@media (max-width: 380px) {
  .header-inner { gap: 0.5rem; }
  .header-actions { gap: 0.375rem; }
  .header-actions .btn { padding: 0.5rem 0.7rem; font-size: 0.75rem; }
  .brand__logo { height: 1.875rem; }
  .brand__logo--dark { width: calc(1.875rem * 440 / 120); }
}

@media print {
  .site-header, .scroll-progress, .blob, .hero__visual { display: none !important; }
  body { background: #fff; }
}

/* Honeypot: off-screen rather than display:none, which some bots detect.
   Global rather than in forms.css, because forms appear on pages that do not
   load that sheet. */
.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- reCAPTCHA v3 ---------- */
/* v3 renders no widget, so Google's floating badge is the only visible sign
   that verification is running. It is kept visible, and the newsroom's theme
   toggle moves to the opposite corner so the two do not overlap. */
.grecaptcha-badge { z-index: 40; }

.recaptcha-note {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-3, #64748b);
}
.recaptcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.recaptcha-note a:hover { color: var(--primary); }