/* ==========================================================================
   Components. Each one is content-agnostic: drop any copy in, it holds up.
   ========================================================================== */

/* --- Eyebrow: small caps label above a heading -------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.eyebrow--bare::before { display: none; }

/* --- Lede: the oversized intro paragraph under an h1/h2 ----------------- */
.lede {
  font-size: var(--step-1);
  line-height: var(--leading-loose);
  color: var(--text-muted);
  max-width: var(--measure);
  text-wrap: pretty;
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  --btn-border: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.75rem 1.5rem;
  min-height: 2.875rem; /* comfortable 46px touch target */
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step-0);
  font-weight: 550;
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover {
  --btn-bg: var(--accent-hover);
  --btn-border: var(--accent-hover);
  color: var(--btn-fg);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.6);
}
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-border: var(--line-strong);
}
.btn--secondary:hover {
  --btn-bg: var(--accent-soft);
  --btn-fg: var(--accent-hover);
  --btn-border: var(--accent);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--accent);
  --btn-border: transparent;
  padding-inline: var(--sp-3);
}
.btn--ghost:hover { --btn-bg: var(--accent-soft); box-shadow: none; }

.btn--on-dark {
  --btn-bg: #fff;
  --btn-fg: var(--navy-900);
  --btn-border: #fff;
}
.btn--on-dark:hover { --btn-bg: var(--navy-100); --btn-border: var(--navy-100); }

.btn--lg { padding: 0.95rem 2rem; font-size: var(--step-1); min-height: 3.25rem; }
.btn--sm { padding: 0.5rem 1rem; font-size: var(--step--1); min-height: 2.25rem; }

/* Arrow that eases forward on hover — the one flourish on a CTA. */
.btn__arrow { transition: transform var(--dur) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --- Inline "read more" link with a moving rule ------------------------- */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 550;
  text-decoration: none;
}
.link-arrow::after {
  content: "\2192";
  transition: transform var(--dur) var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(4px); }

/* --- Header / navigation ------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in oklab, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
/* .is-stuck is toggled by nav.js once the page scrolls past the hero. */
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 4.5rem;
}

.brand {
  /* Deliberately NOT flex: flex items would split "TribecaOutcomes" into two
     words, both visually and for innerText / copy-paste. */
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  text-decoration: none;
}
.brand__accent { color: var(--accent); }

.nav { display: none; }
@media (min-width: 56rem) {
  .nav { display: flex; align-items: center; gap: var(--sp-2); }
}
.nav__link {
  position: relative;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: var(--step-0);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--text); }
/* Underline grows from the centre rather than snapping in. */
.nav__link::after {
  content: "";
  position: absolute;
  left: var(--sp-3); right: var(--sp-3);
  bottom: 0.3rem;
  height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--text); }

/* --- Mobile menu -------------------------------------------------------- */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}
@media (min-width: 56rem) { .nav-toggle { display: none; } }

.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  content: "";
  display: block;
  width: 1.125rem; height: 1.5px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle__bars { position: relative; }
.nav-toggle__bars::before { position: absolute; top: -5px; }
.nav-toggle__bars::after  { position: absolute; top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  display: grid;
  grid-template-rows: 0fr;
  border-top: 1px solid transparent;
  transition: grid-template-rows var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.mobile-nav[data-open="true"] {
  grid-template-rows: 1fr;
  border-top-color: var(--line);
}
.mobile-nav__inner { overflow: hidden; }
@media (min-width: 56rem) { .mobile-nav { display: none; } }

.mobile-nav__link {
  display: block;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: var(--step-1);
  font-family: var(--font-display);
  text-decoration: none;
}
.mobile-nav__link:last-of-type { border-bottom: 0; }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(4rem, 2rem + 10vw, 9.5rem) var(--section-y);
  overflow: hidden;
  isolation: isolate;
}
/* Soft brand-tinted wash behind the hero — depth without a stock photo. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(60% 55% at 22% 18%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(50% 45% at 82% 8%,  color-mix(in oklab, var(--highlight) 11%, transparent), transparent 72%);
  pointer-events: none;
}
.hero__title { font-size: var(--step-6); }
.hero__actions { margin-top: var(--sp-6); }

/* --- Card --------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
}
.card__title { font-size: var(--step-2); }
.card__body { color: var(--text-muted); }
.card__foot { margin-top: auto; padding-top: var(--sp-4); }

/* Numbered card, for process / method steps. */
.card--numbered { counter-increment: step; position: relative; }
.card--numbered::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--accent);
  opacity: 0.65;
}
.steps { counter-reset: step; }

/* Flat card for dense lists — no shadow, just a rule. */
.card--flat {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}

/* --- Stat ---------------------------------------------------------------- */
.stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  font-variant-numeric: tabular-nums lining-nums;
}
.stat__label {
  font-size: var(--step--1);
  font-weight: 550;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--sp-6);
}
/* Hairline dividers between stats on wide screens only. */
@media (min-width: 48rem) {
  .stat-row--ruled .stat + .stat {
    border-left: 1px solid var(--line);
    padding-left: var(--sp-6);
  }
  .section--inverse .stat-row--ruled .stat + .stat { border-left-color: var(--line-inverse); }
}
.section--inverse .stat__value { color: var(--text-on-inverse); }
.section--inverse .stat__label { color: var(--text-on-inverse-muted); }

/* --- Pill / tag ---------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--bg-raised);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
}
.pill--accent {
  background: var(--accent-soft);
  border-color: color-mix(in oklab, var(--accent) 30%, transparent);
  color: var(--accent);
}

/* --- Pull quote ---------------------------------------------------------- */
.quote {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: balance;
}
.quote__cite {
  display: block;
  margin-top: var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Media / figure ------------------------------------------------------ */
.figure { margin: 0; }
.figure__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-sunk);
  box-shadow: var(--shadow);
}
.figure__media img { width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.figure__caption {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--text-faint);
}

/* --- Forms --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--text);
}
.field__hint { font-size: var(--step--1); color: var(--text-faint); }

.input, .textarea, .select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}
.textarea { min-height: 9rem; resize: vertical; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  background: var(--bg-inverse);
  color: var(--text-on-inverse-muted);
  padding-block: var(--sp-8) var(--sp-6);
}
.site-footer h2, .site-footer h3, .site-footer .brand { color: var(--text-on-inverse); }
.site-footer a {
  color: var(--text-on-inverse-muted);
  text-decoration: none;
}
.site-footer a:hover { color: var(--text-on-inverse); text-decoration: underline; }

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: var(--sp-7);
}
.footer__heading {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-on-inverse);
  margin-bottom: var(--sp-3);
}
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li + li { margin-top: var(--sp-2); }
.footer__bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line-inverse);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  justify-content: space-between;
  font-size: var(--step--1);
}

/* --- Scroll reveal (progressive enhancement; see reveal.js) -------------- */
/* Scoped to .js, which reveal.js sets on <html> before paint. If scripting is
   off or the bundle fails to load, the class is never added and every element
   renders at full opacity — content is never hidden behind JS. */
@media (prefers-reduced-motion: no-preference) {
  /* A plain reveal animates the element itself. */
  .js [data-reveal]:not([data-reveal-group]) {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
  .js [data-reveal]:not([data-reveal-group]).is-visible { opacity: 1; transform: none; }

  /* A group reveal animates its CHILDREN in sequence. The container itself is
     left alone — hiding both would double the fade, and a stagger delay on a
     child that has no transition of its own does nothing at all. */
  .js [data-reveal][data-reveal-group] > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
  .js [data-reveal][data-reveal-group].is-visible > * { opacity: 1; transform: none; }
}

/* --- Lead list: the oversized, ruled service list in the hero ------------ */
.list-lead {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}
.list-lead li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text);
}
.list-lead li:last-child { border-bottom: 1px solid var(--line); }
.list-lead li::before {
  content: counter(lead, decimal-leading-zero);
  counter-increment: lead;
  flex: none;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--accent);
}
.list-lead { counter-reset: lead; }

/* --- Plain ruled list: dense capability lists inside cards --------------- */
.list-rule {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-rule li {
  padding-block: var(--sp-3);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  text-wrap: pretty;
}
.list-rule li:first-child { border-top: 0; padding-top: 0; }
.section--inverse .list-rule li { border-color: var(--line-inverse); color: var(--text-on-inverse-muted); }

/* --- Check list: the "why work with us" reasons -------------------------- */
.list-check {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-5);
}
.list-check li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--sp-4);
  align-items: start;
  max-width: var(--measure);
  text-wrap: pretty;
}
.list-check li::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15em;
  border-radius: var(--radius-pill);
  background: var(--accent-soft) center / 0.85rem no-repeat;
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  /* Inline tick, so there is no icon request and nothing to 404. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231c6e7e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E");
}

/* --- Question stack: the four "Need …?" lines --------------------------- */
.question-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}
.question-list li {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  padding-left: var(--sp-5);
  border-left: 2px solid var(--highlight);
}

/* --- Team ---------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--sp-6);
}
.team-card { display: flex; flex-direction: column; gap: var(--sp-4); }
/* Monogram stands in until real portraits are supplied; swap .team-card__avatar
   for an <img> with the same class and nothing else changes. */
.team-card__avatar {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  max-width: 9rem;
  border-radius: var(--radius-pill);
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    var(--bg-sunk);
  border: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  object-fit: cover;
}
.team-card__name { font-size: var(--step-1); }
/* No text-transform here: these are supplied copy, and uppercasing them would
   change how the words actually render. Weight and colour carry the hierarchy. */
.team-card__role {
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: var(--tracking-snug);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* --- Contact detail block ------------------------------------------------ */
.detail { display: flex; flex-direction: column; gap: var(--sp-1); }
/* Not uppercased: one of these labels is the brand name itself. */
.detail__label {
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--text-on-inverse);
}
.detail__value { font-style: normal; line-height: var(--leading-normal); }

/* --- Form layout --------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  max-width: 44rem;
}
.form__full { grid-column: 1 / -1; }

.field__label .req {
  color: var(--highlight);
  margin-left: 0.15em;
}

/* Honeypot: a real person never sees or tabs into this. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Contact detail card ------------------------------------------------- */
.contact-detail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 2px solid var(--accent);
}
/* Not uppercased: one of these labels is the brand name, and uppercasing it
   would change how the supplied word actually renders. Same reason as
   .detail__label and .team-card__role. */
.contact-detail__label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: var(--tracking-snug);
  color: var(--text-muted);
}
.contact-detail__value {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-style: normal;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--text);
}
.contact-detail__value a { color: inherit; text-decoration-color: color-mix(in oklab, var(--accent) 45%, transparent); }
.contact-detail__value a:hover { color: var(--accent); }

/* ==========================================================================
   Matching the live site's structure
   ========================================================================== */


/* --- Hero over a photograph --------------------------------------------- */
.hero--image {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(26rem, 20rem + 34vw, 44rem);
  padding-block: var(--sp-9) var(--sp-8);
  color: #fff;
  overflow: hidden;
}
.hero--image::before { content: none; } /* drop the abstract wash */

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
/* Scrim: dark enough at the bottom-left for white text to clear AAA, while
   the top of the photograph stays open. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(6, 8, 24, 0.92) 0%, rgba(6, 8, 24, 0.66) 34%, rgba(6, 8, 24, 0.22) 68%, rgba(6, 8, 24, 0.30) 100%),
    linear-gradient(to right, rgba(6, 8, 24, 0.60), rgba(6, 8, 24, 0) 65%);
}

.hero--image h1,
.hero--image .hero__title { color: #fff; font-weight: var(--weight-bold); }
.hero--image .lede { color: rgba(255, 255, 255, 0.88); }
.hero--image .list-lead li { color: #fff; border-color: rgba(255, 255, 255, 0.22); }
.hero--image .list-lead li:last-child { border-bottom-color: rgba(255, 255, 255, 0.22); }
.hero--image .list-lead li::before { color: var(--orange-400); }
.hero--image .eyebrow { color: var(--orange-400); }

/* --- Bulleted list, as the live site uses ------------------------------- */
.list-bullet {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-bullet li {
  position: relative;
  padding-left: 1.4em;
  padding-block: var(--sp-2);
  text-wrap: pretty;
}
.list-bullet li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.95em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--highlight);
}

/* Column headings in the "who we work with" / "what we do" grids ---------- */
.col-heading {
  font-size: var(--step-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-snug);
  margin-bottom: var(--sp-3);
}

/* Airier, borderless columns — the live site uses no card chrome. */
.card--plain {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}
.card--plain .list-rule li { border-top-color: transparent; padding-block: var(--sp-2); }

/* --- Theme control: one button cycling System / Light / Dark ------------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out);
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.theme-toggle svg {
  width: 1.125rem;
  height: 1.125rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Show only the icon for the active mode. Defaults to the system icon so the
   button is never blank in the moment before JS sets data-mode. */
.theme-toggle__icon { display: none; }
.theme-toggle__icon--system { display: block; }
.theme-toggle[data-mode="system"] .theme-toggle__icon { display: none; }
.theme-toggle[data-mode="system"] .theme-toggle__icon--system { display: block; }
.theme-toggle[data-mode="light"]  .theme-toggle__icon { display: none; }
.theme-toggle[data-mode="light"]  .theme-toggle__icon--light { display: block; }
.theme-toggle[data-mode="dark"]   .theme-toggle__icon { display: none; }
.theme-toggle[data-mode="dark"]   .theme-toggle__icon--dark { display: block; }

/* ==========================================================================
   Revision pass
   ========================================================================== */

/* --- 1. Header logo (the real asset) ---------------------------------- */
.site-header__inner { min-height: 5.25rem; }

/* --- 2. Home / Contact and the theme control together on the right ------ */
.header-right {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-left: auto;
}
.header-right .nav { gap: var(--sp-4); }
.nav__link { font-size: var(--step-0); }

/* --- 3. Hero headline on a single line ---------------------------------- */
/* 20.15 is the measured width of the string in Inter 700 (19.74em) plus a 2%
   safety margin, so the size is derived from the text, not guessed. Below the
   breakpoint it wraps normally rather than shrinking to nothing. */
.hero--image .hero__title { font-size: var(--step-5); }
@media (min-width: 48rem) {
  .hero--image .hero__title {
    white-space: nowrap;
    /* 70rem, not 75rem: .container is border-box, so its 2.5rem gutters sit
       INSIDE the 75rem cap and the usable content width is 70rem. */
    font-size: min(calc((100vw - 5rem) / 20.15), calc(70rem / 20.15));
  }
}
/* The headline now needs the full container, so the hero copy block does too. */
.hero__body { max-width: none; }
.hero__body .lede,
.hero__body .list-lead { max-width: 52rem; }

/* --- 4. Equal, top-aligned capability columns --------------------------- */
.cols {
  display: grid;
  gap: var(--sp-6) var(--sp-7);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Hairline between columns, drawn INSIDE the gap by a pseudo-element.
   A border plus padding-left on the item would shrink columns 2 and 3 by the
   padding, leaving the text columns unequal (341 / 292 / 292 at 1440px). */
@media (min-width: 62rem) {
  .cols--ruled > * + * { position: relative; }
  .cols--ruled > * + *::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--sp-7) / -2);
    border-left: 1px solid var(--line);
  }
}
/* Column headings set on ONE line. The size is derived from the widest
   heading in each grid and the width its column actually gets, so nothing
   wraps at any viewport:
     .cols--3  widest is "Clinical Development"     11.77em  -> 11.9 with margin
     .cols--2  widest is "Outcomes and Commercial"  14.88em  -> 15.0 with margin
   --col-w mirrors the real track width: the container is 94vw - 12.8px while
   the gutter is still fluid, capped at 70rem of content, less the gaps. */
.cols { --head-em: 12; --col-w: calc(94vw - 12.8px); }
.cols--3 { --head-em: 11.9; }
.cols--2 { --head-em: 15.0; }

@media (min-width: 40rem) {
  .cols { --col-w: calc((94vw - 60.8px) / 2); }
}
@media (min-width: 62rem) {
  .cols--3 { --col-w: min(calc((94vw - 108.8px) / 3), calc((70rem - 96px) / 3)); }
  .cols--2 { --col-w: min(calc((94vw - 60.8px) / 2), calc((70rem - 48px) / 2)); }
}

.cols .col-heading {
  display: flex;
  align-items: flex-end;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--highlight);
  white-space: nowrap;
  font-size: min(var(--step-2), calc(var(--col-w) / var(--head-em)));
  /* Fallback for browsers without subgrid: approximates the heading box so the
     rules land close together even if not pixel-identical. */
  min-height: 1.4em;
}

/* With subgrid, every column's heading occupies the SAME parent grid row, so
   the rules align exactly however the text wraps — no magic height needed. */
@media (min-width: 62rem) {
  .cols--3, .cols--2 { grid-template-rows: auto auto; }
  .cols--3 > *, .cols--2 > * {
    display: grid;
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
    align-content: start;
  }
  @supports (grid-template-rows: subgrid) {
    .cols .col-heading { min-height: 0; }
  }
}

/* --- 5. "Why work with" as spaced numbered rows ------------------------- */
.reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: reason;
}
.reasons li {
  counter-increment: reason;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
  padding-block: var(--sp-6);
  border-top: 1px solid var(--line);
}
.reasons li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 48rem) {
  .reasons li { gap: var(--sp-7); padding-block: var(--sp-7); }
}
.reasons li::before {
  content: counter(reason, decimal-leading-zero);
  font-size: var(--step-3);
  font-weight: var(--weight-bold);
  line-height: 1;
  color: var(--highlight);
  font-variant-numeric: tabular-nums;
}
.reasons__text {
  font-size: var(--step-1);
  line-height: var(--leading-normal);
  max-width: 52ch;
  text-wrap: pretty;
}
/* The row tints on hover, so the list feels alive without moving. */
.reasons li {
  transition: background-color var(--dur) var(--ease-out);
  margin-inline: calc(var(--sp-4) * -1);
  padding-inline: var(--sp-4);
}
.reasons li:hover { background: var(--accent-soft); }

/* --- 6. All five people on one row -------------------------------------- */
@media (min-width: 62rem) {
  .team-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-5); }
}
@media (min-width: 40rem) and (max-width: 61.99rem) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.team-card__avatar {
  max-width: clamp(4.5rem, 3rem + 5vw, 7rem);
  font-size: var(--step-2);
}
.team-card__name { font-size: var(--step-1); }

/* --- 7. Animation ------------------------------------------------------- */
/* Hero copy rises in on load. Not observer-driven: it is above the fold. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__body > * {
    animation: rise-in 720ms var(--ease-out) both;
  }
  .js .hero__body > *:nth-child(1) { animation-delay: 60ms; }
  .js .hero__body > *:nth-child(2) { animation-delay: 170ms; }
  .js .hero__body > *:nth-child(3) { animation-delay: 280ms; }
  .js .hero__body > *:nth-child(4) { animation-delay: 390ms; }

  /* Each row of a revealed list comes in behind the one above it. */
  .js [data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 80ms); }

  /* The rule under a column heading draws itself in. */
  .js [data-reveal] .col-heading { border-bottom-color: transparent; }
  .js [data-reveal].is-visible .col-heading {
    border-bottom-color: var(--highlight);
    transition: border-bottom-color 600ms var(--ease-out) 260ms;
  }
}
@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 18px, 0); }
  to   { opacity: 1; transform: none; }
}

/* Cards and people lift slightly on hover. */
.team-card { transition: transform var(--dur) var(--ease-out); }
.team-card:hover { transform: translateY(-4px); }
.team-card__avatar { transition: box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
.team-card:hover .team-card__avatar {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

/* --- Logo -------------------------------------------------------------- */
.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
  flex: none;
}
.brand__img {
  display: block;
  width: auto;
  height: clamp(2.1rem, 1.55rem + 2vw, 3.15rem);
}
/* Two files rather than a CSS filter: the navy has to become white while the
   orange stays orange, which no single filter does cleanly. */
.brand__img--dark { display: none; }

:root[data-theme="dark"] .brand__img--light { display: none; }
:root[data-theme="dark"] .brand__img--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__img--light { display: none; }
  :root:not([data-theme="light"]) .brand__img--dark { display: block; }
}

/* The footer is dark in every theme, so it always takes the light-ink mark. */
.site-footer .brand__img--light,
.section--inverse .brand__img--light { display: none; }
.site-footer .brand__img--dark,
.section--inverse .brand__img--dark { display: block; }

/* ==========================================================================
   Hero rework: copy block up top, services as tiles across the bottom
   ========================================================================== */

.hero--image {
  align-items: stretch;
  min-height: clamp(34rem, 26rem + 26vw, 50rem);
  padding-block: clamp(5rem, 3.5rem + 7vw, 9rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.hero__body .lede { max-width: 46rem; font-size: var(--step-1); }

/* A deeper, more even scrim: the old one left the upper right of the
   photograph bright while the copy sat over the dark lower left. */
.hero__scrim {
  background:
    linear-gradient(to top, rgba(6, 8, 24, 0.94) 0%, rgba(6, 8, 24, 0.78) 30%, rgba(6, 8, 24, 0.52) 62%, rgba(6, 8, 24, 0.44) 100%),
    linear-gradient(to right, rgba(6, 8, 24, 0.66), rgba(6, 8, 24, 0.12) 72%);
}

/* --- Service tiles ------------------------------------------------------- */
.hero-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: tile;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 40rem) {
  .hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Only once tiles sit side by side do they need a shared floor; on a
     single column it just pads short items with dead space. */
  .hero-tiles li { min-height: 8.5rem; }
}
@media (min-width: 64rem) { .hero-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); } }

.hero-tiles li {
  counter-increment: tile;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  color: #fff;
  font-size: var(--step-1);
  font-weight: 500;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-wrap: pretty;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--radius-lg);
  background: rgba(8, 10, 30, 0.46);
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
  overflow: hidden;
}
.hero-tiles li::before {
  content: counter(tile, decimal-leading-zero);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  color: var(--orange-400);
  font-variant-numeric: tabular-nums;
}
/* Accent bar across the top, drawn in on hover. */
.hero-tiles li::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--orange-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-tiles li {
    transition: transform var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
  }
  .hero-tiles li::after { transition: transform 460ms var(--ease-out); }
}
.hero-tiles li:hover {
  transform: translateY(-5px);
  background: rgba(8, 10, 30, 0.66);
  border-color: rgba(255, 255, 255, 0.34);
}
.hero-tiles li:hover::after { transform: none; }