/* ==========================================================================
   CustomEmployees.ai — design system
   Palette + type deliberately aligned to the Workers/Delos reference:
   warm paper ground, near-black ink, one saturated accent. Geist throughout.
   One accent colour, used consistently everywhere (the reference site
   drifts across five — we do not).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Colour ---- */
  --bg:            #F7F5F1;   /* warm paper */
  --surface:       #F0EDE8;   /* raised */
  --surface-2:     #EDEAE4;   /* deeper */
  --secondary:     #E6E1D8;
  --fg:            #1A1D23;   /* ink */
  --muted:         #5F656F;
  --accent:        #083AB7;   /* the one colour */
  --accent-ink:    #062E92;   /* hover/pressed */
  --accent-soft:   rgba(8, 58, 183, .08);
  --accent-line:   rgba(8, 58, 183, .22);
  --border:        rgba(138, 143, 153, .22);
  --border-strong: rgba(138, 143, 153, .38);
  --ink-invert:    #F7F5F1;
  --ok:            #12603D;
  --ok-soft:       rgba(23, 121, 75, .10);
  --warn:          #854A00;
  --warn-soft:     rgba(166, 91, 0, .10);
  --stop:          #8F2118;
  --stop-soft:     rgba(176, 42, 30, .10);

  /* ---- Type ----
     Three deliberate faces, not one default sans:
     Archivo (editorial grotesk) sets display, Geist carries text,
     Geist Mono handles every figure. */
  --font-display: "Archivo", "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --t--1: .8125rem;
  --t-0:  1rem;
  --t-1:  1.0625rem;
  --t-2:  1.25rem;
  --t-3:  1.5rem;
  --t-4:  clamp(1.75rem, 1.2rem + 2.2vw, 2.375rem);
  --t-5:  clamp(2.125rem, 1.3rem + 3.4vw, 3.25rem);
  --t-6:  clamp(2.625rem, 1.4rem + 5.2vw, 4.5rem);

  /* ---- Space ---- */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9: 4rem;    --s-10: 5rem;   --s-11: 7rem;   --s-12: 9rem;

  /* ---- Shape ----
     Squared, editorial. Pills are reserved for badges and chips only —
     buttons and cards are rectangles with a small, confident radius. */
  --r-sm: .25rem;
  --r:    .375rem;
  --r-lg: .5rem;
  --r-xl: .625rem;
  --r-btn: .375rem;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(26, 29, 35, .04);
  --shadow:    0 2px 8px rgba(26, 29, 35, .05), 0 1px 2px rgba(26, 29, 35, .04);
  --shadow-lg: 0 12px 40px rgba(26, 29, 35, .08), 0 2px 8px rgba(26, 29, 35, .04);

  --wrap: 1180px;
  --wrap-narrow: 820px;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv01";
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 { font-size: var(--t-6); letter-spacing: -0.045em; }
h2 { font-size: var(--t-5); letter-spacing: -0.04em; }
h3 { font-size: var(--t-3); letter-spacing: -0.03em; }
h3.h-sm { font-family: var(--font-sans); font-size: var(--t-1); font-weight: 600; letter-spacing: -0.018em; line-height: 1.3; }
h4, .h-sm {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-1);
  letter-spacing: -0.018em;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

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

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

button, input, select, textarea { font: inherit; color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0;
}

::selection { background: var(--accent); color: var(--ink-invert); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--s-5);
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--s-11); position: relative; }
.section-sm { padding-block: var(--s-9); }
.section-tight { padding-block: var(--s-8); }

/* Faint architectural grid, as on the reference site */
.gridlines { position: relative; }
.gridlines::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--border) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border) 1px, transparent 1px);
  background-size: 220px 220px;
  opacity: .5;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
.gridlines > * { position: relative; }

.band { background: var(--surface); }
.band-deep { background: var(--surface-2); }

.stack   { display: flex; flex-direction: column; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .gap-8 { gap: var(--s-8); }

.center { text-align: center; }
.center-x { margin-inline: auto; }

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

@media (max-width: 960px) {
  .g-3, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
  .section { padding-block: var(--s-9); }
}

/* ==========================================================================
   Type helpers
   ========================================================================== */

.eyebrow {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--accent);
  flex: none;
}
.eyebrow-plain::before { display: none; }

.lede {
  font-size: var(--t-2);
  line-height: 1.5;
  color: var(--muted);
  letter-spacing: -0.012em;
}
.sub { color: var(--muted); }
.accent { color: var(--accent); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.small { font-size: var(--t--1); }
.strong { font-weight: 600; color: var(--fg); }
.nowrap { white-space: nowrap; }

.measure { max-width: 62ch; }
.measure-sm { max-width: 48ch; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--ink-invert);
  --btn-bd: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: .8125rem 1.375rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-btn);
  font-size: .9375rem;
  font-weight: 560;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
  text-align: center;
}
.btn:hover { --btn-bg: var(--accent-ink); --btn-bd: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }

.btn .arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(3px); }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--border-strong);
}
.btn-ghost:hover { --btn-bg: var(--surface); --btn-fg: var(--fg); --btn-bd: var(--fg); }

/* Ghost button on a dark surface. This used to be patched in with an inline
   --btn-fg, which :hover could not override: hovering filled the button with the
   light surface colour and left the label cream on cream, invisible. */
.btn-ghost-invert {
  --btn-bg: transparent;
  --btn-fg: var(--ink-invert);
  --btn-bd: rgba(247, 245, 241, .32);
}
.btn-ghost-invert:hover {
  --btn-bg: var(--ink-invert);
  --btn-fg: var(--fg);
  --btn-bd: var(--ink-invert);
}

.btn-solid-ink {
  --btn-bg: var(--fg);
  --btn-fg: var(--ink-invert);
  --btn-bd: var(--fg);
}
.btn-solid-ink:hover { --btn-bg: #000; --btn-bd: #000; }

.btn-lg { padding: .9375rem 1.75rem; font-size: 1rem; }
.btn-sm { padding: .5rem 1rem; font-size: var(--t--1); }
.btn-block { width: 100%; }

.btn:disabled {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--muted);
  opacity: 1;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn:disabled .arw { transform: none; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}
.cta-row.center-x { justify-content: center; }

/* ==========================================================================
   Pills / badges / tags
   ========================================================================== */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: .4375rem .8125rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: .78125rem;
  font-weight: 520;
  color: var(--muted);
  white-space: nowrap;
}
.pill svg { flex: none; opacity: .85; }
.pill-accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.tag {
  display: inline-flex;
  align-items: center;
  padding: .1875rem .5rem;
  border-radius: var(--r-sm);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--secondary);
  color: var(--muted);
}
.tag-accent { background: var(--accent-soft); color: var(--accent); }
.stack > .tag, .price-card > .tag { align-self: flex-start; }
.tag-ok     { background: var(--ok-soft);   color: var(--ok); }
.tag-warn   { background: var(--warn-soft); color: var(--warn); }
.tag-stop   { background: var(--stop-soft); color: var(--stop); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card-pad-sm { padding: var(--s-5); }
.card-hover:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.card-quiet { background: var(--surface); border-color: transparent; }
.card-ink {
  background: var(--fg);
  color: var(--ink-invert);
  border-color: var(--fg);
}
.card-ink .sub, .card-ink .muted { color: rgba(247, 245, 241, .62); }
.card-accent { border-color: var(--accent-line); background: var(--accent-soft); }

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(247, 245, 241, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.nav.is-stuck { border-bottom-color: var(--border); }

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5625rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  font-size: 1.0625rem;
  flex: none;
}
.brand-mark {
  width: 28px; height: 28px;
  padding: 4px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--ink-invert);
  display: grid;
  place-items: center;
  flex: none;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.brand-tld { color: var(--muted); font-weight: 500; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-1);
}
.nav-links a {
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--fg);
  transition: background .16s ease, color .16s ease;
}
.nav-links a:hover { background: var(--surface-2); }
.nav-links a[aria-current="page"] { color: var(--accent); font-weight: 580; }
.nav-links a.btn { color: var(--btn-fg); }
.nav-links a.btn:hover { color: var(--btn-fg); }
/* The in-drawer CTA is for mobile only; desktop uses the one in .nav-actions */
.nav-links .btn { display: none; }

.nav-actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  cursor: pointer;
}

@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-actions .btn-nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.is-open .nav-links {
    display: flex;
    position: absolute;
    inset: 68px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-4) var(--s-5) var(--s-6);
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .nav.is-open .nav-links a { padding: .875rem .25rem; border-radius: 0; font-size: 1.0625rem; }
  .nav.is-open .nav-links .btn {
    display: inline-flex;
    margin-top: var(--s-4);
    padding: .875rem 1.375rem;
    font-size: 1rem;
    justify-content: center;
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding-block: clamp(2.25rem, 4vw, 3.75rem) clamp(2rem, 3vw, 3rem);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -30%;
  width: min(1100px, 120vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(8, 58, 183, .055), transparent 62%);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero h1 { max-width: 17ch; }
.hero-centered h1 { margin-inline: auto; }

.hero-claim {
  border-left: 2px solid var(--accent);
  padding-left: var(--s-5);
  font-size: var(--t-1);
  line-height: 1.55;
  max-width: 58ch;
}

/* ==========================================================================
   Employee cards
   ========================================================================== */

.emp-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  height: 100%;
  overflow: hidden;
}
.emp-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-lg); transform: translateY(-2px); }

/* Character portrait, flush to the top edge of the card */
.emp-photo {
  margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) 0;
  aspect-ratio: 3 / 4;
  background: var(--surface-2);
  overflow: hidden;
  position: relative;
}
.emp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.emp-card:hover .emp-photo img { transform: scale(1.035); }
/* soften the join between the render's backdrop and the card */
.emp-photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 9%;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

.emp-head { display: flex; align-items: flex-start; gap: var(--s-4); min-height: 4.7rem; }
.emp-head h3 { font-size: 1.3125rem; }
.emp-icon {
  width: 42px; height: 42px;
  border-radius: var(--r);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex: none;
}
.emp-role { font-size: .75rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

.emp-duties { display: flex; flex-direction: column; gap: .5rem; }
/* Deliberately NOT flex. A flex li turns every inline <em>/<strong> into a
   flex item, which blockifies it into its own column and shatters the
   sentence. The bullet is positioned instead so the text stays inline. */
.emp-duties li {
  position: relative;
  padding-left: .875rem;
  font-size: .9375rem;
  color: var(--muted);
  line-height: 1.45;
}
.emp-duties li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5rem;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .6;
}

/* The dark band that says the six above it are examples, not a menu.
   Deliberately NOT the icon-badge + heading + eyebrow + lede stack: that
   arrangement is the signature of a generated page, and this project's own
   rule is to reach for a statement before reaching for another boxed header.
   It also names no example roles: a list of jobs reads as a menu of
   specialities however it is captioned, which is the opposite of the point. */
.emp-card-custom {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--ink-invert);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-6);
  text-align: left;
  padding: clamp(1.75rem, 3.5vw, 3.25rem);
}
.emp-card-custom:hover { border-color: var(--fg); }
.emp-card-custom p { color: rgba(247, 245, 241, .72); }

.custom-statement {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.034em;
  max-width: 22ch;
  color: rgba(247, 245, 241, .5);
  text-wrap: balance;
}
/* the eye should land on the distinctive half of the line, not away from it */
.custom-statement em { font-style: normal; color: var(--ink-invert); }

/* The product in one line: a job title with the title left blank. It states
   "any role" without naming one, which a list of example roles cannot do. */
.custom-slotline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .625rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, .95rem + 1.25vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--ink-invert) !important;
  margin-top: calc(var(--s-3) * -1);
}
.slot {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: .74em;
  letter-spacing: 0;
  color: rgba(247, 245, 241, .66);
  border: 1px dashed rgba(247, 245, 241, .4);
  border-radius: var(--r);
  padding: .34em .72em;
}
.custom-slotnote {
  font-size: .875rem;
  line-height: 1.5;
  color: rgba(247, 245, 241, .55) !important;
  /* a caption belongs to the line above it, but not jammed against it */
  margin-top: calc(var(--s-6) * -1 + .8rem);
  max-width: 60ch;
}

/* body and CTA share the closing row, so the band is composed across its full
   width instead of stacking everything into the left two thirds */
.custom-close {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-5) var(--s-7);
  width: 100%;
}
.custom-close .btn { flex: none; }
.custom-body {
  font-size: var(--t-1);
  line-height: 1.6;
  color: rgba(247, 245, 241, .72);
  max-width: 58ch;
  flex: 1 1 34ch;
}

/* Dark statement panel */
.ink-panel { padding: clamp(1.75rem, 4vw, 3.5rem); }
.ink-panel-h { font-size: var(--t-4); max-width: 24ch; }
.ink-panel-p { color: rgba(247, 245, 241, .72); max-width: 62ch; }

/* ==========================================================================
   Method / steps
   ========================================================================== */

.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-top: 1px solid var(--border);
  align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--border); }
.step-num {
  font-family: var(--font-mono);
  font-size: .8125rem;
  color: var(--accent);
  padding-top: .3125rem;
  font-feature-settings: "tnum";
}
.step-body { display: flex; flex-direction: column; gap: var(--s-2); }
@media (max-width: 640px) {
  .step { grid-template-columns: 1fr; gap: var(--s-2); }
  .step-num { padding-top: 0; }
}

/* Probation ladder */
.ladder { display: grid; gap: var(--s-3); }
.rung {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  position: relative;
}
.rung-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.rung:nth-child(1) .rung-dot { opacity: .3; }
.rung:nth-child(2) .rung-dot { opacity: .5; }
.rung:nth-child(3) .rung-dot { opacity: .75; }
.rung:nth-child(4) .rung-dot { opacity: 1; box-shadow: 0 0 0 4px var(--accent-soft); }
.rung-when { font-family: var(--font-mono); font-size: var(--t--1); color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) {
  .rung { grid-template-columns: auto 1fr; }
  .rung-when { grid-column: 2; }
}

/* ==========================================================================
   Tables (authority matrix, workforce plan)
   ========================================================================== */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); border: 1px solid var(--border); }
table.tbl {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg);
  font-size: .9375rem;
  min-width: 560px;
}
table.tbl th, table.tbl td {
  padding: .875rem 1.125rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.tbl thead th {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  white-space: nowrap;
}
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td.num, table.tbl th.num { text-align: right; font-family: var(--font-mono); font-feature-settings: "tnum"; white-space: nowrap; }
table.tbl td.mark { text-align: center; width: 8.5rem; }

.mk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .75rem; font-weight: 700; }
.mk-yes  { background: var(--ok-soft);   color: var(--ok); }
.mk-appr { background: var(--warn-soft); color: var(--warn); }
.mk-no   { background: var(--stop-soft); color: var(--stop); }

/* ==========================================================================
   Spec sheet (job description)
   ========================================================================== */

.spec {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  overflow: hidden;
}
.spec-head {
  padding: var(--s-6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.spec-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--border);
}
.spec-row:last-child { border-bottom: 0; }
.spec-key {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .1875rem;
}
.spec-val { display: flex; flex-direction: column; gap: var(--s-2); }
.spec-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
@media (max-width: 640px) {
  .spec-row { grid-template-columns: 1fr; gap: var(--s-2); }
}

/* Mission receipt / log */
.receipt {
  font-family: var(--font-mono);
  font-size: .8125rem;
  line-height: 1.85;
  background: var(--fg);
  color: rgba(247,245,241,.9);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  overflow-x: auto;
}
.receipt .t { color: rgba(247,245,241,.58); }
.receipt .ok { color: #6FD79B; }
.receipt .hl { color: #9FB8FF; }

/* ==========================================================================
   Comparison (demos vs employees)
   ========================================================================== */

.vs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg);
}
.vs-col { padding: var(--s-6); }
.vs-col + .vs-col { border-left: 1px solid var(--border); }
.vs-head {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.vs-a .vs-head { color: var(--muted); }
.vs-b .vs-head { color: var(--accent); }
.vs-col li {
  display: flex;
  gap: var(--s-3);
  padding-block: .6875rem;
  border-top: 1px solid var(--border);
  font-size: .9375rem;
  line-height: 1.45;
}
.vs-col li:first-of-type { border-top: 0; }
.vs-a li { color: var(--muted); }
.vs-ico { flex: none; margin-top: .1875rem; }
@media (max-width: 700px) {
  .vs { grid-template-columns: 1fr; }
  .vs-col + .vs-col { border-left: 0; border-top: 1px solid var(--border); }
}

/* ==========================================================================
   ROI calculator
   ========================================================================== */

.roi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg);
}
.roi-inputs { padding: clamp(1.5rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: var(--s-6); }
.roi-out {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--fg);
  color: var(--ink-invert);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
@media (max-width: 860px) { .roi { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--s-3); }
.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.field label { font-size: .875rem; font-weight: 560; }
.field-val {
  font-family: var(--font-mono);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--accent);
  font-feature-settings: "tnum";
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--secondary);
  cursor: pointer;
}
/* A blanket outline:none used to live here, which left keyboard users with no
   idea which slider they were on. The ring goes on the thumb, where it reads. */
input[type="range"]:focus { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(8, 58, 183, .32), 0 1px 4px rgba(26, 29, 35, .25);
}
input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(8, 58, 183, .32), 0 1px 4px rgba(26, 29, 35, .25);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 1px 4px rgba(26,29,35,.25);
  cursor: grab;
}
input[type="range"]::-webkit-slider-thumb:active { cursor: grabbing; }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--bg);
  box-shadow: 0 1px 4px rgba(26,29,35,.25);
  cursor: grab;
}

.roi-figure { display: flex; flex-direction: column; gap: .1875rem; }
.roi-figure dt { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,245,241,.5); }
.roi-figure dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.roi-hero dd { font-size: clamp(2.25rem, 5vw, 3rem); color: #9FB8FF; }
.roi-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }

/* ==========================================================================
   Pricing
   ========================================================================== */

.price-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); align-items: stretch; }
@media (max-width: 960px) { .price-grid { grid-template-columns: 1fr; } }

.price-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: var(--s-7);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg);
  position: relative;
}
.price-card.is-featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-lg); }
.price-flag {
  position: absolute;
  top: var(--s-5); right: var(--s-5);
}
.price-num {
  font-family: var(--font-mono);
  font-size: clamp(1.75rem, 3vw, 2.125rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.price-then { font-size: .9375rem; color: var(--muted); }
.price-feats { display: flex; flex-direction: column; gap: .625rem; margin-top: auto; }
.price-feats li { display: flex; gap: .625rem; font-size: .9375rem; line-height: 1.45; align-items: flex-start; }
.price-feats svg { flex: none; margin-top: .3125rem; color: var(--accent); }

/* ==========================================================================
   Accordion (FAQ)
   ========================================================================== */

.acc { border-top: 1px solid var(--border); }
.acc-item { border-bottom: 1px solid var(--border); }
.acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-size: var(--t-1);
  font-weight: 560;
  letter-spacing: -0.015em;
}
.acc-btn:hover { color: var(--accent); }
.acc-ico { flex: none; transition: transform .22s ease; color: var(--muted); }
.acc-item.is-open .acc-ico { transform: rotate(45deg); color: var(--accent); }
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.acc-item.is-open .acc-panel { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { padding-bottom: var(--s-5); color: var(--muted); max-width: 68ch; }

/* ==========================================================================
   Intake form (build.html)
   ========================================================================== */

.form-card {
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--bg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.form-progress { height: 3px; background: var(--secondary); }
.form-progress span { display: block; height: 100%; background: var(--accent); width: 0%; transition: width .35s cubic-bezier(.4,0,.2,1); }

.form-body { padding: clamp(1.5rem, 4vw, 3rem); }
.form-step { display: none; flex-direction: column; gap: var(--s-6); }
.form-step.is-active { display: flex; animation: stepIn .32s ease both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.form-count { font-family: var(--font-mono); font-size: var(--t--1); color: var(--muted); }

.inp, .ta, .sel {
  width: 100%;
  padding: .8125rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  font-size: 1rem;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.inp[aria-invalid="true"], .ta[aria-invalid="true"] {
  border-color: var(--stop);
  box-shadow: 0 0 0 3px rgba(143, 33, 24, .12);
}
.field-err {
  display: block;
  margin-top: .375rem;
  font-size: .8125rem;
  color: var(--stop);
}
.inp:focus, .ta:focus, .sel:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(8, 58, 183, .22);
}
.ta { min-height: 128px; resize: vertical; line-height: 1.55; }
.inp::placeholder, .ta::placeholder { color: var(--muted); }

.field-label { font-size: .875rem; font-weight: 600; margin-bottom: var(--s-2); display: block; }
.field-hint { font-size: var(--t--1); color: var(--muted); margin-top: var(--s-2); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  padding: .5625rem .9375rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  font-size: .9375rem;
  cursor: pointer;
  user-select: none;
  transition: all .16s ease;
}
.chip span:hover { border-color: var(--fg); }
.chip input:checked + span {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--ink-invert);
}
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.chip input:focus + span { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(8, 58, 183, .18); }

.form-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) clamp(1.5rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.form-done, .form-fallback { display: none; flex-direction: column; gap: var(--s-5); text-align: center; align-items: center; }
.form-done.is-active, .form-fallback.is-active { display: flex; animation: stepIn .32s ease both; }
.done-mark {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  display: grid; place-items: center;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--surface); border-top: 1px solid var(--border); padding-block: var(--s-9) var(--s-6); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--s-7);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

.footer .h-sm {
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: var(--s-4);
}
.footer-links { display: flex; flex-direction: column; gap: .6875rem; }
.footer-links a { font-size: .9375rem; color: var(--fg); transition: color .16s ease; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-4);
  font-size: var(--t--1);
  color: var(--muted);
}

/* ==========================================================================
   Reveal on scroll — progressive enhancement only.
   Content is fully visible without JS; the class is added by JS.
   ========================================================================== */

.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.js .reveal-d1.is-in { transition-delay: .07s; }
.js .reveal-d2.is-in { transition-delay: .14s; }
.js .reveal-d3.is-in { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   Utility
   ========================================================================== */

.divider { height: 1px; background: var(--border); }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--ink-invert);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--r) 0;
}
.skip:focus { left: 0; }

/* ==========================================================================
   The Marker — our faceted gem.
   An homage to the floating status-crystal convention used in life-sim games,
   drawn from scratch in our own brand blue with our own facet geometry and
   proportions. No third-party mark is reproduced.
   ========================================================================== */

.gem { display: block; }
.gem-wrap { display: inline-block; line-height: 0; }

/* Brand lockup: the gem replaces the boxed monogram */
.brand-mark {
  width: 22px; height: 29px;
  padding: 0;
  background: none;
  border-radius: 0;
  display: grid;
  place-items: center;
  flex: none;
}
.brand-mark .gem { width: 100%; height: 100%; }
.emp-marker .gem,
.cast-marker .gem { width: 100%; height: 100%; display: block; }
.brand:hover .brand-mark .gem { animation: gemSpin 1.4s ease-in-out; }

/* Each render is composed with the figure centred on its bounding box, and that
   box includes outstretched arms and props. Anyone gesturing therefore has their
   head off the frame's axis, so the marker is nudged onto the head. Measured
   from the composites: head centre minus frame centre, as a share of width. */
[data-cast="receptionist"] { --head-dx:  3.8%; }   /* Maya gestures left  */
[data-cast="support"]      { --head-dx: -4.1%; }   /* Alex holds a laptop right */
[data-cast="recruiting"]   { --head-dx: -5.5%; }   /* Sophia gestures right */
[data-cast="sales"],
[data-cast="receivable"],
[data-cast="operations"]   { --head-dx: 0%; }      /* already within 0.5% */

/* Floating marker above an employee's head */
.emp-marker {
  position: absolute;
  /* Sized and placed as a share of the frame, never in pixels. Every render is
     composed with the crown of the head at 20-23% of frame height; the marker
     occupies the empty band above that and so can never land on a face. */
  top: 2.5%;
  left: calc(50% + var(--head-dx, 0%));
  right: auto;
  translate: -50% 0;
  width: 15%;
  height: auto;
  aspect-ratio: 34 / 45;
  z-index: 3;
  opacity: 0;
  transform: translateY(6px) scale(.86);
  transition: opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
  filter: drop-shadow(0 6px 12px rgba(8, 58, 183, .32));
}
.emp-card:hover .emp-marker,
.emp-card:focus-within .emp-marker,
.emp-card.is-selected .emp-marker {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.emp-card:hover .emp-marker .gem,
.emp-card:focus-within .emp-marker .gem,
.emp-card.is-selected .emp-marker .gem {
  animation: gemSpin 3.2s linear infinite;
}
.emp-card:hover .emp-marker,
.emp-card.is-selected .emp-marker { animation: gemBob 2.6s ease-in-out infinite; }

/* A selected employee reads as "on the roster" */
.emp-card.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

@keyframes gemBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-7px) scale(1); }
}
/* scaleX oscillation reads as a slow rotation of a faceted solid */
@keyframes gemSpin {
  0%   { transform: scaleX(1); }
  25%  { transform: scaleX(.12); }
  50%  { transform: scaleX(-1); }
  75%  { transform: scaleX(.12); }
  100% { transform: scaleX(1); }
}

/* ==========================================================================
   Idle life — the cast should never look like stock photography.
   A slow, staggered breathing drift so each character moves independently.
   ========================================================================== */

@keyframes breathe {
  0%, 100% { transform: translateY(0) scale(1.02); }
  50%      { transform: translateY(-6px) scale(1.035); }
}
.emp-photo img {
  animation: breathe 7s ease-in-out infinite;
  will-change: transform;
}
.emp-card:nth-child(2) .emp-photo img { animation-duration: 8.2s; animation-delay: -1.4s; }
.emp-card:nth-child(3) .emp-photo img { animation-duration: 6.4s; animation-delay: -3.1s; }
.emp-card:nth-child(4) .emp-photo img { animation-duration: 7.6s; animation-delay: -2.2s; }
.emp-card:nth-child(5) .emp-photo img { animation-duration: 9s;   animation-delay: -4.6s; }
.emp-card:nth-child(6) .emp-photo img { animation-duration: 6.9s; animation-delay: -0.8s; }
/* hover takes over from the idle drift */
.emp-card:hover .emp-photo img { animation-play-state: paused; transform: scale(1.06) translateY(-4px); }

@media (prefers-reduced-motion: reduce) {
  .emp-photo img,
  .emp-marker,
  .emp-marker .gem,
  .brand:hover .brand-mark .gem { animation: none !important; }
  .emp-card:hover .emp-photo img { transform: none; }
}

/* Role portrait inside the detail cards on the AI Employees page */
.role-card { position: relative; overflow: hidden; }
.role-photo {
  position: relative;
  margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-5);
  aspect-ratio: 3 / 4;
  background: var(--surface-2);
  overflow: hidden;
}
.role-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  animation: breathe 7.5s ease-in-out infinite;
}
.role-photo::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 18%;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}
.role-photo .emp-marker { top: 2.5%; }
.role-card:hover .emp-marker,
.role-card:focus-within .emp-marker { opacity: 1; transform: translateY(0) scale(1); animation: gemBob 2.6s ease-in-out infinite; }
.role-card:hover .emp-marker .gem { animation: gemSpin 3.2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .role-photo img, .role-card:hover .emp-marker, .role-card:hover .emp-marker .gem { animation: none !important; }
}

/* ==========================================================================
   HERO CAST — a lineup of the workforce, alive and cycling.
   ========================================================================== */

.cast {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  margin-top: var(--s-5);
  perspective: 1400px;
}

.cast-item {
  position: relative;
  flex: 0 0 auto;
  /* Taller than the source's 3:4 on purpose: cover trims empty backdrop from the
     sides, so the figure fills more of the tile. Nothing vertical is lost. */
  width: clamp(100px, 15.5vw, 196px);
  aspect-ratio: 2 / 3;
  transform-origin: 50% 100%;
  box-shadow: 0 18px 40px -22px rgba(26,29,35,.42);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  isolation: isolate;
  transform: translateY(calc(var(--d) * var(--d) * 5px)) scale(calc(1 - var(--d) * .06));
  filter: saturate(calc(1 - var(--d) * .07));
  opacity: calc(1 - var(--d) * .09);
  transition:
    transform .75s cubic-bezier(.16,1,.3,1),
    filter .6s ease,
    opacity .6s ease,
    box-shadow .6s ease,
    border-color .4s ease;
}
.cast-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}

.cast-item.is-active {
  transform: translateY(calc(var(--d) * var(--d) * 5px - 10px)) scale(calc(1 - var(--d) * .06 + .05));
  filter: none;
  opacity: 1;
  border-color: var(--accent-line);
  /* the ring in page colour separates the raised tile from the one behind it,
     so its dark label plate reads as overlap rather than a stray bar */
  box-shadow: 0 0 0 3px var(--bg),
              0 26px 60px -18px rgba(8,58,183,.34), 0 6px 18px rgba(26,29,35,.08);
  z-index: 2;
}
.cast-item.is-active img { transform: scale(1.05); }
.cast-item:hover { opacity: .92; filter: saturate(.95); }

/* label plate slides up on the active member */
.cast-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.75rem .625rem .6875rem;
  text-align: left;
  /* Measured on rendered pixels, not computed from tokens: the old ramp left the
     name at 3.24:1 over a light render. This holds both lines above 4.5:1. */
  background: linear-gradient(to top,
              rgba(11,13,17,.98) 0%, rgba(11,13,17,.97) 80%,
              rgba(11,13,17,.30) 93%, transparent 100%);
  color: #fff;
  transform: translateY(102%);
  opacity: 0;
  transition: transform .55s cubic-bezier(.16,1,.3,1), opacity .4s ease;
}
.cast-item.is-active .cast-label { transform: translateY(0); opacity: 1; }
.cast-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.75rem, 1.05vw, .9375rem);
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.cast-meta {
  display: block;
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  margin-top: .1875rem;
}

/* the marker floats over whoever is on duty */
.cast-marker {
  position: absolute;
  top: 2%;
  left: calc(50% + var(--head-dx, 0%));
  right: auto;
  translate: -50% 0;
  width: 15%;
  height: auto;
  aspect-ratio: 34 / 45;
  transform: translateY(8px) scale(.7);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 5px 10px rgba(8,58,183,.4));
  transition: opacity .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.cast-item.is-active .cast-marker {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: castBob 2.8s ease-in-out infinite;
}
.cast-item.is-active .cast-marker .gem { animation: gemSpin 3.4s linear infinite; }
@keyframes castBob {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-7px) scale(1); }
}

/* distance from the centre of the lineup, in tile widths, plus the stacking
   order that lets the middle of the arc sit in front of its neighbours */
.cast-item:nth-child(1), .cast-item:nth-child(6) { --d: 2.5; z-index: 1; }
.cast-item:nth-child(2), .cast-item:nth-child(5) { --d: 1.5; z-index: 2; }
.cast-item:nth-child(3), .cast-item:nth-child(4) { --d: .5;  z-index: 3; }
.cast-item + .cast-item { margin-left: calc(clamp(8px, 1.3vw, 24px) * -1); }
.cast-item.is-active { z-index: 5; }

/* the whole lineup breathes gently, out of phase */
.cast-item:nth-child(1) { animation: castFloat 7.2s ease-in-out -0.0s infinite; }
.cast-item:nth-child(2) { animation: castFloat 8.1s ease-in-out -1.3s infinite; }
.cast-item:nth-child(3) { animation: castFloat 6.6s ease-in-out -2.7s infinite; }
.cast-item:nth-child(4) { animation: castFloat 7.8s ease-in-out -0.9s infinite; }
.cast-item:nth-child(5) { animation: castFloat 8.6s ease-in-out -3.4s infinite; }
.cast-item:nth-child(6) { animation: castFloat 7.0s ease-in-out -2.0s infinite; }
@keyframes castFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}

@media (max-width: 680px) {
  .cast {
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--s-5);
    margin-inline: calc(var(--s-5) * -1);
    scrollbar-width: none;
    perspective: none;
  }
  .cast::-webkit-scrollbar { display: none; }
  .cast-item { width: 132px; scroll-snap-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cast-item, .cast-item.is-active .cast-marker, .cast-item.is-active .cast-marker .gem { animation: none !important; }
}

/* Employee name — the cast are colleagues, not categories */
.emp-name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  font-size: 1.375rem;
  line-height: 1.1;
  display: block;
}
.emp-position {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--accent);
  margin-top: .1875rem;
  letter-spacing: -0.008em;
}
.emp-head-named { display: block; min-height: 0 !important; }
/* .emp-head-named is for the six character cards, which lead with a portrait and
   carry no icon. The custom role card reuses it but does have one, so restore the
   row there and keep the badge beside the title rather than stranded above it. */
.emp-card-custom .emp-head-named {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}
.emp-head-named .emp-role { margin-top: .3125rem; }

/* ==========================================================================
   Scroll-linked method rail — the process fills in as you read it
   ========================================================================== */
.steps { position: relative; }
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  top: 0; bottom: 0;
  width: 2px;
  border-radius: 2px;
}
.steps::before { background: var(--border); }
.steps::after {
  background: var(--accent);
  bottom: auto;
  height: var(--rail, 0%);
  transition: height .18s linear;
}
.step { position: relative; }
.step-num {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem; height: 2.1rem;
  margin-left: 0;
  background: var(--bg);
  border-radius: 50%;
  color: var(--muted);
  transition: color .35s ease, background .35s ease, box-shadow .35s ease;
}
.band .step-num { background: var(--surface); }
.step.is-reached .step-num {
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line);
}
@media (max-width: 640px) {
  .steps::before, .steps::after { display: none; }
  .step-num { width: auto; height: auto; background: none !important; box-shadow: none !important; }
}

/* nav link underline draw */
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: "";
  position: absolute;
  left: .75rem; right: .75rem; bottom: .3125rem;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s cubic-bezier(.16,1,.3,1);
}
.nav-links a:not(.btn):hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 900px) { .nav-links a:not(.btn)::after { display: none; } }

/* figures roll rather than snap */
.roi-figure dd { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Touch ergonomics — comfortable targets on small screens
   ========================================================================== */
@media (max-width: 900px) {
  .footer-links { gap: .25rem; }
  .footer-links a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: .25rem;
  }
  .brand { min-height: 44px; }
  .cta-row .btn { min-height: 48px; }
  .acc-btn { min-height: 56px; }
  .chip span { min-height: 44px; }
}

/* ==========================================================================
   Editorial devices — alternatives to putting everything in a bordered box.
   ========================================================================== */

/* Definition list: hanging title, body alongside, hairline between.
   Used where a set of ideas would otherwise become card soup. */
.deflist { border-top: 1px solid var(--border); }
.def {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  gap: var(--s-6);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.def dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
  letter-spacing: -0.028em;
  line-height: 1.18;
  text-wrap: balance;
}
.def dd { margin: 0; color: var(--muted); line-height: 1.62; }
.def:hover dt { color: var(--accent); transition: color .2s ease; }
@media (max-width: 760px) {
  .def { grid-template-columns: 1fr; gap: var(--s-3); padding-block: var(--s-5); }
}

/* A borderless three-up: rule on top, no box. */
.cols3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-7);
}
.cols3 > * { border-top: 2px solid var(--fg); padding-top: var(--s-4); }
.cols3 h3 { font-size: var(--t-1); margin-bottom: var(--s-2); }
.cols3 p { color: var(--muted); font-size: .9375rem; line-height: 1.55; }
@media (max-width: 820px) { .cols3 { grid-template-columns: 1fr; gap: var(--s-5); } }

/* A statement set larger than body copy, indented from the heading column.
   Replaces the reflex "grey lede under every h2". */
.statement {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.375rem, 1.05rem + 1.4vw, 2rem);
  line-height: 1.24;
  letter-spacing: -0.032em;
  max-width: 24ch;
  text-wrap: balance;
}
.statement em { font-style: normal; color: var(--accent); }

/* Offset a block from the section's left edge, so not every row starts flush. */
@media (min-width: 900px) {
  .indent { margin-left: 8.5rem; }
  .indent-lg { margin-left: 16rem; }
}

/* ==========================================================================
   Living cast — looping video with the still as poster.
   The <video> sits exactly where the <img> did; if it can't play, the poster
   shows and nothing is lost.
   ========================================================================== */
.emp-photo video,
.cast-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--surface-2);
}
.emp-photo video {
  object-position: 50% 50%;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.cast-item video { object-position: 50% 50%; }

/* the CSS "breathing" was a stand-in for real motion — the clips do it now */
.emp-photo video { animation: none; }
.emp-card:hover .emp-photo video { transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .emp-card:hover .emp-photo video { transform: none; }
}