/* =======================================================================
   FOUNDATION TOKENS
   Source of truth: design-system-foundation.md
   ======================================================================= */
/* =======================================================================
   DESIGN TOKENS — single source of truth.

   Vocabulary (mostly stable; see design-system-inventory.md for the
   harmonization plan):

     COLORS
       bg / surface / surface-alt — page surfaces, lightest → tinted gray
       surface-ink / surface-inverted — charcoal (footer, CTA cards)
       border — divider lines
       fg / fg-muted / fg-label — body text, muted text, label text
       fg-inverse / fg-on-inverted — body text on dark surfaces
       accent / accent-hover / accent-fg — saffron brand accent + on-accent fg
       signal-* — semantic status colors (rare)

     TYPE
       font-serif / font-sans / font-mono — three families
       fs-display / -h1 / -h2 / -h3 — heading scale
       fs-body-lg / -body / -small / -label — body scale

     LETTER-SPACING (mono-uppercase contexts)
       ls-tight   -0.01em  serif headline tightening
       ls-label    0.05em  small mono labels (dates, data lines)
       ls-tag      0.04em  industry tags, footer micro-type
       ls-eyebrow  0.08em  uppercase eyebrows + tag pills
       ls-nav      0.18em  site-nav items

     SPACING — `--space-1` (4px) … `--space-8` (128px) on a 1.5x rhythm
     CONTENT — reading (720) / base (880) / wide (1040) / max (1280) px
     RADIUS — none / sm (2px) / md (6px)
     SHADOW — ui (1px sub-card lift) / artefact (mockup chrome) / card
     MOTION — fast (120ms) / base (180ms) / slow (320ms) + cubic-bezier easing
     LINK   — text-decoration-thickness + offset for accent underlines
   ======================================================================= */
:root {
  /* — Color — */
  --color-bg: #EDF0F2;
  --color-surface: #EDF0F2;
  --color-surface-alt: #DFE4E7;
  --color-surface-ink: #0D1015;
  --color-surface-inverted: #0D1015;       /* alias of surface-ink, semantic */
  --color-border: #D0D5D8;
  --color-fg: #0D1015;
  --color-fg-muted: #5F666D;
  --color-fg-label: #878D93;
  --color-fg-inverse: #EDF0F2;
  --color-fg-on-inverted: #EDF0F2;         /* alias of fg-inverse, semantic */
  --color-accent: #E8A83E;
  --color-accent-hover: #C78D2A;
  --color-accent-fg: #0D1015;
  --signal-good: #627C4F;
  --signal-neutral: #4A6B79;
  --signal-bad: #8B4A4A;

  /* — Type — */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-display: clamp(2.75rem, 4.5vw + 1rem, 4rem);
  --fs-h1: clamp(2rem, 2vw + 1.25rem, 2.5rem);
  --fs-h2: 1.5rem;
  --fs-h3: 1.125rem;
  --fs-body-lg: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;

  /* — Letter-spacing — */
  --ls-tight: -0.01em;
  --ls-label: 0.05em;
  --ls-tag: 0.04em;
  --ls-eyebrow: 0.08em;
  --ls-nav: 0.18em;

  /* — Spacing — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 80px;
  --space-8: 128px;

  /* — Content widths — */
  --content-reading: 720px;
  --content-base: 880px;
  --content-wide: 1040px;
  --content-max: 1280px;

  /* — Radius — */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 6px;

  /* — Shadow — */
  --shadow-artefact: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --shadow-ui: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08);    /* alias of shadow-ui */

  /* — Motion — */
  --motion-duration-fast: 120ms;
  --motion-duration-base: 180ms;
  --motion-duration-slow: 320ms;
  --motion-easing-default: cubic-bezier(0.2, 0.0, 0.2, 1);

  /* — Link underline — */
  --link-underline-thickness: 1px;
  --link-underline-offset: 4px;
}

/* =======================================================================
   RESET / BASE
   ======================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
main:has(> .section--pause:only-child) { display: flex; flex-direction: column; justify-content: center; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
img { max-width: 100%; display: block; }
em, i { font-style: italic; }

/* =======================================================================
   SKIP LINK + FOCUS
   ======================================================================= */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: var(--space-4);
  top: var(--space-4);
  background: var(--color-bg);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-accent);
  z-index: 100;
}
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* =======================================================================
   SECTION WRAPPER
   ======================================================================= */
.section {
  padding-top: clamp(var(--space-4), 4vw, var(--space-6));
  padding-bottom: clamp(var(--space-5), 6vw, var(--space-7));
}
.section--pause {
  padding-top: clamp(var(--space-5), 5vw, var(--space-7));
  padding-bottom: clamp(var(--space-6), 9vw, var(--space-8));
}
.section__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.section--wide .section__inner { max-width: var(--content-wide); }
.section__inner--centered { max-width: var(--content-reading); text-align: center; }
.section--tinted { background: var(--color-surface-alt); }
/* Inverted surface — charcoal background with light text. Used by the
   footer and the speaker-interview CTA card; ready to drop on any
   future "dark band" section. Inverts link color too so links remain
   readable on the dark surface (each consumer can override hover). */
.section--inverted {
  background: var(--color-surface-inverted);
  color: var(--color-fg-on-inverted);
}
.section--inverted a { color: var(--color-fg-on-inverted); }

@media (min-width: 480px) { .section__inner { padding-inline: var(--space-5); } }
@media (min-width: 768px) { .section__inner { padding-inline: var(--space-6); } }
/* =======================================================================
   PROSE — universal reading-body block.
   Used by every long-form body on the site. Sans, --fs-body, 1.65
   leading, muted, max-width 36em, left-aligned. On darker surfaces
   (.section--tinted, .section--inverted, .case-block, .applications-open)
   color shifts for contrast. Sub-rules cover h2, ul/ol/li, strong,
   blockquote, hr, em — any rich content that may appear inside.
   ======================================================================= */
.prose {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-fg-muted);
  max-width: 36em;
  /* Left-aligned by default so prose lines up with the heading above
     it (h1 on article/event pages, .section-heading on section blocks).
     If a context wants a centered reading column, it can override
     margin-inline: auto on the parent. */
}
.prose em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.05em;
  color: var(--color-fg);
}
.prose p { font-size: inherit; line-height: inherit; }
.prose p + p { margin-top: var(--space-4); }
.prose strong { font-weight: 600; color: var(--color-fg); }
.prose h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  color: var(--color-fg);
  max-width: 26ch;
}
.prose ul, .prose ol {
  margin: calc(var(--space-4) * 0.7) 0;
  padding-left: var(--space-4);
}
/* Em-dash markers for unordered lists — applies to `.prose ul` and any
   list that opts in by extending it (e.g. team profile education list).
   Nested `ul` reuses the same marker. */
.prose ul { list-style-type: '— '; }
.prose ul li::marker { color: var(--color-fg-label); }
.prose li + li { margin-top: var(--space-3); }
/* Nested unordered list — tighter rhythm and slightly smaller, recessive
   text so sub-points don't compete with the parent items visually. */
.prose ul ul {
  margin: var(--space-2) 0 var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  line-height: 1.5;
}
.prose ul ul li + li { margin-top: var(--space-1); }
.prose blockquote {
  margin: var(--space-5) 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: 1.4;
  color: var(--color-fg);
}
.prose hr {
  margin: var(--space-7) 0 var(--space-5);
  border: 0;
  border-top: 1px solid var(--color-border);
}

/* On darker surfaces the muted gray loses contrast — bump the body
   text up to fg so it remains readable. The em treatment already
   uses fg, so it's fine. */
.section--tinted .prose,
.section--inverted .prose,
.case-block .prose {
  color: var(--color-fg);
}
/* The applications-open card is even darker (ink surface) and lives
   INSIDE a .section--tinted, so the rule above would paint its prose
   black-on-black. Flip back to the inverse fg for legibility. */
.applications-open .prose {
  color: var(--color-fg-inverse);
}

/* =======================================================================
   PHOTO — universal cropped-image presentation.

   Single primitive (.photo) with size + aspect modifiers. The actual
   cropping is done by _portrait.html / _natural-crop.html /
   _event-image.html — this just presents the result.

   Default treatment: grayscale + slight opacity dip; full color when a
   wrapping link is hovered. Inverted-surface contexts (.section--inverted
   or .testimonial) drop the grayscale and add a subtle dark border.
   ======================================================================= */
.photo {
  position: relative;             /* allow positioned decorations (tags) */
  display: block;
  overflow: hidden;
  background: var(--color-surface-alt);
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%) contrast(1.04);
  opacity: 0.92;
  transition: opacity var(--motion-duration-base) var(--motion-easing-default),
              filter var(--motion-duration-base) var(--motion-easing-default);
}
/* Lift grayscale when any link wrapping a .photo is hovered. */
a:hover .photo img {
  filter: grayscale(0%) contrast(1);
  opacity: 1;
}

/* — Avatar variants: circular, fixed dimensions. */
.photo--avatar-xs,
.photo--avatar-sm,
.photo--avatar-md {
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}
.photo--avatar-xs { width: 28px;  height: 28px; }
.photo--avatar-sm { width: 72px;  height: 72px; }
.photo--avatar-md { width: 120px; height: 120px; }

/* — Card variants: full container width with a fixed aspect. */
.photo--card-wide,
.photo--card-tall {
  width: 100%;
  margin-bottom: var(--space-4);
}
.photo--card-wide { aspect-ratio: 3 / 2; }
.photo--card-tall { aspect-ratio: 4 / 5; }
/* In horizontal cards the thumb sits in a grid column; the wrapper
   handles spacing, so suppress the photo's own bottom margin. */
.card--horizontal .photo { margin-bottom: 0; }

/* — Inverted-context cascade: photos inside .testimonial (legacy
   inverted card) or any .section--inverted get a subtle border + drop
   the grayscale to keep the face legible on the dark surface. */
.testimonial .photo,
.section--inverted .photo {
  background: #2A2F36;
  border: 1px solid #3A4049;
}
.testimonial .photo img,
.section--inverted .photo img {
  filter: none;
  opacity: 1;
}

/* — Team-list photos opt out of grayscale: recognising the person
   matters more than visual cohesion on the team list. */
.team-list .photo img {
  filter: none;
  opacity: 1;
}

/* — Events list page (/events/) opts out of grayscale: full colour,
   no hover swap. Scoped to .events-list-page only — the home-page
   recent-events strip and the event-detail hero keep the
   grayscale-with-hover treatment. */
.events-list-page .photo img,
.events-list-page a:hover .photo img {
  filter: none;
  opacity: 1;
}

/* =======================================================================
   HERO IMAGE — full-bleed figure at the top of detail pages.
   Used by every page that opens with a wide photo.
   ======================================================================= */
/* Flex + align-items: center so when the img's natural height
   exceeds max-height, the parent clamps and the overflow is split
   equally above and below — i.e. a true center crop. (`object-fit:
   cover` doesn't help here because the img itself isn't given a
   definite height to crop against — it keeps its intrinsic aspect.) */
.hero-image {
  margin: 0;
  width: 100%;
  max-height: 60vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-image img {
  width: 100%;
  height: auto;
  flex-shrink: 0;
  display: block;
}
/* Event hero variant — used by events/single + event-interviews/single,
   both fed by .Fill "1800x680 Center" (face band guaranteed inside
   source y[290,920], so Center crop preserves it with 30/20px buffer).
   Locking the figure aspect to 1800/680 and dropping max-height means
   the displayed image always matches the pre-crop aspect, so
   object-fit: cover is a no-op and no further CSS cropping ever
   trims into the face band. Across common viewports the hero lands at
   roughly 50–67vh — close to the original 60vh design intent — purely
   from the aspect ratio. */
.hero-image--event {
  aspect-ratio: 1800 / 680;
  max-height: none;
}
.hero-image--article {
  max-width: var(--content-base);
  margin-inline: auto;
}

/* =======================================================================
   CARD + CARD-GRID — universal card primitives.

   .card is a vertical flex stack by default. The --horizontal modifier
   turns it into a 2-column grid (photo on left, body on right) for
   list rows + the contact block.

   Sub-elements (used as needed per consumer):
     .card__media     wrapper for .photo, anchors absolute overlays
     .card__eyebrow   small mono label (date, status, industry)
     .card__title     sans-bold heading (event/article/team)
     .card__quote     italic serif pull-quote (interview/testimonial)
     .card__body      muted secondary text (speakers, standfirst, role)
     .card__byline    bottom attribution (name + role/title/company),
                      can host a .photo--avatar-* avatar inline
     (For nav arrow links use the universal .cta-link primitive
      defined just below — no card sub-element for that role.)

   Hover behavior is driven by the wrapping <a>, same pattern as .photo:
     a:hover .card__title  → accent underline
     a:hover .card__quote  → accent underline (quote-led cards)
   ======================================================================= */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  text-decoration: none;
  color: var(--color-fg);
}
.card:hover { text-decoration: none; }

/* Horizontal layout — photo on left, body stack on right. Used by the
   events-list rows and the contact block. */
.card--horizontal {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 720px) {
  .card--horizontal {
    grid-template-columns: 280px 1fr;
    gap: var(--space-6);
    align-items: start;
  }
}
.card__body-stack {
  /* The right-hand column inside .card--horizontal — its own vertical
     flex so the eyebrow/title/body line up with consistent rhythm. */
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Inverted block CTA card — eyebrow + title link on a dark surface.
   Used by the speaker-interview CTA on event detail pages. Surface
   colors come from .section--inverted (added to the same element).
   Box-only properties live here. */
.card--inverted-block {
  display: block;
  padding: var(--space-5) var(--space-6);
  text-decoration: none;
  max-width: var(--content-reading);
  margin: var(--space-6) 0;
  gap: 0;
}
.card--inverted-block:hover { text-decoration: none; }
.card--inverted-block .card__eyebrow {
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  margin: 0 0 var(--space-2);
  opacity: 0.7;
}
.card--inverted-block .card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1vw + 0.85rem, 1.5rem);
  line-height: 1.25;
  margin: 0;
}

/* — Sub-elements — */
.card__media { position: relative; }   /* anchors absolute badges */

.card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--color-fg-muted);
  margin: 0;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
  color: var(--color-fg);
}

.card__quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-body-lg);
  line-height: 1.35;
  margin: 0;
  color: var(--color-fg);
}
/* Wrap quotes in “ ” via pseudo-elements (matches the legacy
   .interview-card__quote / .testimonial-card__quote behavior). */
.card__quote::before { content: "\201C"; }
.card__quote::after  { content: "\201D"; }

.card__body {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  line-height: 1.45;
  margin: 0;
}
/* Event-grid speakers — sans, not italic. Speaker names with
   affiliations are a list, not editorial copy, so serif italic
   makes them harder to scan. Scoped to .event-grid only —
   articles standfirst and team-list role keep the italic treatment. */
.event-grid .card__body {
  font-family: var(--font-sans);
  font-style: normal;
}

.card__byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  line-height: 1.45;
  margin: 0;
}
/* Inner <p> wrapper (testimonials use one beside the photo) inherits
   .card__byline typography — without this, the global p { font-size:
   var(--fs-body); line-height: 1.65 } takes over and testimonial
   bylines render bigger than interview bylines (which sit on a <p>
   that already wears the .card__byline class). */
.card__byline > p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.card__byline span { display: block; }
/* Name span gets the canonical .byline__name treatment (sans medium fg)
   so testimonial cards and team-interview cards read with the same
   attribution rhythm: bold name on top, muted secondary lines below. */
.card__byline .byline__name {
  font-weight: 500;
  color: var(--color-fg);
}

/* Universal navigational arrow link — sans, uppercase, --ls-tag,
   muted; on hover lights up to fg + accent underline.
   Used wherever a tertiary "go to related" link belongs:
     - inside cards ("Full profile →" on team list)
     - in long-form bodies ("Press →" on team profile)
     - beneath section headings ("All events →" on home grid)
     - at the bottom of an interview ("← Back to event details") */
.cta-link {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin: 0;
}
.cta-link a {
  color: inherit;
  text-decoration: none;
  letter-spacing: inherit;
  text-transform: inherit;
}
.cta-link a:hover {
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
}

/* Hover affordance: title (or quote, on quote-led cards) gets the
   accent underline when any wrapping link is hovered. */
a:hover .card__title,
a:hover .card__quote {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
}

/* — Page-level overrides for the .card primitive — */

/* Events list page: horizontal-card titles are larger serif (the
   event title is the visual anchor of each row). */
.events-list-page .card__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.375rem, 1vw + 1rem, 1.75rem);
  line-height: 1.2;
  max-width: 32ch;
}

/* Team list: card titles are larger serif (the person's name), and
   the byline / email / phone use mono.
   Spacing rhythm differs from the default .card uniform gap — text
   block sits flush under the portrait (the photo's own bottom
   background provides breathing room), name → role tight (4px),
   role → byline a touch looser (16px), byline → cta tight (8px).
   Override via per-element margins, and neutralise the global
   `p + p { margin-top: var(--space-4) }` rule which would otherwise
   add 24px between the byline and the Full-profile cta. */
.team-list .card { gap: 0; }
.team-list .card p + p { margin-top: 0; }
.team-list .card__media  { margin-bottom: 0; }
.team-list .card__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: var(--space-1);   /* tight name → role */
}
.team-list .card__body { margin-bottom: var(--space-3); }
.team-list .card__byline {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0;
  line-height: 1.6;                /* roomy spacing between phone lines */
  display: block;                  /* override the avatar+text flex from default */
  margin-bottom: var(--space-2);
}
.team-list .card__byline a { word-break: break-word; }
/* .cta-link inherits the universal nav-arrow style — no overrides. */

/* =======================================================================
   CARD GRID — universal responsive grid for laying out cards.
   ======================================================================= */
.card-grid {
  margin-top: var(--space-2);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
}
@media (min-width: 720px) {
  .card-grid--2 {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7) var(--space-6);
  }
  .card-grid--3 {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-5);
  }
  .card-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }
}

/* =======================================================================
   BYLINE — universal person attribution primitive.

   Used for: event speakers, interview attribution, service-list person
   row. (In-card attribution stays on the card primitive's .card__byline
   sub-element. The .testimonial block on case pages keeps its own
   bespoke dark-surface attribution.)

   Anatomy:
     .byline                          flex row container
       .photo.photo--avatar-xs        optional avatar (left)
       .byline__person                stack of name + title (right)
         .byline__name                sans-medium, fg
         .byline__title               serif italic, muted

   Multi-byline layouts use .byline-row (default flex-wrap) or
   .byline-row.byline-row--quad (2x2 grid for 4-panelist events).
   ======================================================================= */
.byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  min-width: 0;
}
.byline__person {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.35;
  min-width: 0;
}
.byline__name {
  display: block;
  font-weight: 500;
  color: var(--color-fg);
}
/* Inline icons (social icons, badges) appended after the name text
   sit on the SAME LINE as the name, anchored on the text's x-height
   so the icon visually centers on the cap-line of the name —
   `vertical-align: middle` alone lands too low because it aligns to
   the line-box centre, which sits below the visual midpoint of the
   text. Negative ex offset lifts the icon onto the text's eye-line.
   Page-independent: any byline that puts a `.social-icons` (or
   similar inline block) inside `.byline__name` gets this for free. */
.byline__name .social-icons {
  margin-left: var(--space-3);
}
.byline__name .social-icons__link {
  /* vertical-align: middle lands a touch below the visual cap-line of
     the name. translateY lifts the icon up onto it without affecting
     line-box height or wrap behaviour. */
  vertical-align: middle;
  transform: translateY(-2px);
}
.byline__title {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--color-fg-muted);
  margin: 4px 0 0;
}
/* Affiliation links inside the title keep italic; underline subtly. */
.byline__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
}
.byline__title a:hover { text-decoration-color: var(--color-accent); }

/* Bio variant — extends .byline with a body block beneath the
   name + title. Used for speaker bios on event detail pages. The
   layout flips to block (vs the default flex row) since the body
   prose needs to stack below, not next to, the name. Name becomes
   bigger serif (h2-ish), title slightly larger italic serif. */
.byline--bio {
  display: block;
  max-width: var(--content-reading);
}
.byline--bio + .byline--bio {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
.byline--bio .byline__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
}
.byline--bio .byline__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem;
  margin: 0 0 var(--space-3);
}
.byline--bio .byline__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
}
.byline__body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-fg);
}
.byline__body p + p { margin-top: var(--space-3); }

/* Multi-byline list — default flex wrap, with --quad lifting to a
   2-column grid for 4-panelist events so the panel reads as a
   balanced quartet rather than a one-row queue. */
.byline-row {
  list-style: none;
  margin: calc(var(--space-2) * -1) 0 var(--space-6);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-6);
}
.byline-row .byline { flex: 0 1 auto; max-width: 32ch; }
@media (min-width: 560px) {
  .byline-row--quad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-6);
  }
  .byline-row--quad .byline { max-width: none; }
}

/* =======================================================================
   META — small mono datestamp / kicker line above a page title.
   Replaces the duplicate .article__meta + .event-detail__meta rules.
   ======================================================================= */
.meta {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-fg-label);
  letter-spacing: var(--ls-label);
  margin-bottom: var(--space-3);
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* =======================================================================
   TYPOGRAPHY
   ======================================================================= */
p { font-size: var(--fs-body); line-height: 1.65; }
p + p { margin-top: var(--space-4); }

a {
  color: var(--color-fg);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-decoration-thickness: var(--link-underline-thickness);
  text-underline-offset: var(--link-underline-offset);
  transition: text-decoration-color var(--motion-duration-base) var(--motion-easing-default),
              text-decoration-thickness var(--motion-duration-base) var(--motion-easing-default);
}
a:hover {
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

/* Muted link — gray underline at rest, saffron underline on hover.
   Use anywhere a context might otherwise paint a stronger underline
   (e.g. inside a `.prose-lead` or any block whose default link style
   you want to override). Inside body `.prose` the default `a` rule
   already matches this look, so the class is mostly useful as an
   explicit, context-proof opt-in. */
.muted-link,
.muted-link:link,
.muted-link:visited {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-decoration-thickness: var(--link-underline-thickness);
  text-underline-offset: var(--link-underline-offset);
  transition: text-decoration-color var(--motion-duration-base) var(--motion-easing-default);
}
.muted-link:hover { text-decoration-color: var(--color-accent); }
/* =======================================================================
   SITE HEADER  (global chrome)

   Layout responds to viewport:
     < 640px  — centred masthead. Logo on top, nav row beneath (both
                static, both visible). Editorial / journal-masthead
                register; no interaction required.
     ≥ 640px  — horizontal split. Logo left, nav right (the original
                layout).
   The 640px breakpoint sits between the existing 480 / 768 tokens
   because the four-item nav, at this letter-spacing, needs at least
   ~540px of intrinsic width before it can sit comfortably right of
   the logo. Below 640 the row would collapse or wrap untidily; at
   640+ the horizontal layout breathes.
   ======================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.site-header[data-surface="inverted"] {
  background: var(--color-surface-inverted);
  border-bottom-color: rgba(237, 240, 242, 0.1);
}
.site-header[data-surface="warm"] {
  background: #1A1209;
  border-bottom-color: rgba(237, 240, 242, 0.1);
}
.site-header[data-surface="tinted"] {
  background: var(--color-surface-alt);
  border-bottom-color: var(--color-border);
}
.site-header[data-surface="inverted"] .site-header__logo img,
.site-header[data-surface="warm"] .site-header__logo img {
  filter: brightness(0) invert(1);
}
.site-header[data-surface="inverted"] .site-nav__link,
.site-header[data-surface="warm"] .site-nav__link {
  color: rgba(237, 240, 242, 0.6);
}
.site-header[data-surface="inverted"] .site-nav__link:hover,
.site-header[data-surface="warm"] .site-nav__link:hover {
  color: var(--color-accent);
}
.site-header[data-surface="inverted"] .site-nav__sep,
.site-header[data-surface="warm"] .site-nav__sep {
  color: rgba(237, 240, 242, 0.2);
}
.site-header__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
@media (min-width: 480px) { .site-header__inner { padding-inline: var(--space-5); } }
@media (min-width: 768px) { .site-header__inner { padding-inline: var(--space-6); } }
.site-header__logo { display: block; flex-shrink: 0; }
.site-header__logo img {
  height: 44px;
  width: auto;
  display: block;
}
.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--space-3);
  /* Mobile: centred beneath the masthead. Desktop: right-aligned. */
  justify-content: center;
}
@media (min-width: 640px) {
  .site-nav { justify-content: flex-end; }
}
.site-nav__link {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.5vw, 12px);
  font-weight: 600;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-fg-label);
  text-decoration: none;
  transition: color var(--motion-duration-base) var(--motion-easing-default);
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--color-accent); }
.site-nav__sep {
  color: var(--color-border);
  font-size: 11px;
  user-select: none;
}

/* =======================================================================
   EYEBROW / SECTION LABEL  (V3 baseline)
   ======================================================================= */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-fg-label);
  margin-bottom: var(--space-4);
}
.eyebrow__kicker {
  width: 96px;
  height: 4px;
  background: var(--color-accent);
  flex-shrink: 0;
}

/* =======================================================================
   MARQUEE (letterbox Haeckel — homepage top)
   ======================================================================= */
.marquee {
  width: 100%;
  aspect-ratio: 4 / 1;
  overflow: hidden;
  background: var(--color-bg);
}
@media (min-width: 768px) {
  .marquee { aspect-ratio: 5 / 1; }
}
.marquee__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.4);
  transform-origin: 50% 50%;
  display: block;
}

/* =======================================================================
   HERO
   Sweet-spot variant: typographic, hand-broken headline, italic emphasis.
   Homepage variant uses .hero--home for slightly tighter top padding.
   ======================================================================= */
.hero {
  padding-top: clamp(var(--space-7), 10vw, var(--space-8));
  padding-bottom: clamp(var(--space-7), 10vw, calc(var(--space-8) + var(--space-4)));
}
.hero--home {
  padding-block: clamp(var(--space-6), 8vw, var(--space-8));
}
/* Home-hero h1. Sized to keep "Artificial Intelligence" on one line
   at every viewport width within .section__inner. Now scoped to the
   home hero only — no other consumers, so no shared primitive. */
.hero__headline {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.75rem, 4.5vw + 1rem, 4.25rem);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  max-width: 22ch;
}
.hero__headline em,
.hero__headline i { font-style: italic; }
/* .hero__subhead is now home-only — service heroes use .prose-lead--display.
   Combined home base + home-specific tweaks into a single rule. */
.hero--home .hero__subhead {
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-body-lg);
  line-height: 1.55;
  color: var(--color-fg);
  max-width: 600px;
}
.hero--home .hero__subhead em { font-style: italic; }
/* Unclassed paragraphs inherit the subhead's size/leading (so the
   generic `p { font-size }` rule doesn't shrink them). Paragraphs
   that opt-in with a class — e.g. `.hero__social-proof` for the
   "Strategy Design Implementation Change" line — keep their own
   typography. */
.hero--home .hero__subhead p:not([class]) { font-size: inherit; line-height: inherit; }

/* Industry-word emphasis in the hero subhead — accent underline.
   Thickness + offset match the link underlines on /events. */
.hero__emph-underline {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
}

/* Optional social-proof line beneath the subhead. Sized small + muted
   so it reads as a credibility footnote, not a third headline. */
.hero__social-proof {
  margin-top: var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-fg-muted);
  max-width: 40em;
}

/* Optional scan-aid row — small, muted, matched to the social-proof
   line in weight so the two stack as a single quiet block of "below
   the headline, here's some texture". The links pick up the global
   `a` underline so they read as clickable without shouting. */
.hero__scan-aid {
  margin-top: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
}
.hero__scan-aid-cue {
  font-feature-settings: "tnum" 1, "lnum" 1;
  margin-right: var(--space-1);
}
.hero__scan-aid-sep { color: var(--color-fg-label); }
.hero__scan-aid a {
  color: inherit;
  text-decoration-color: var(--color-border);
}
.hero__scan-aid a:hover {
  color: var(--color-fg);
  text-decoration-color: var(--color-accent);
}

/* Smart line break — toggled by the inline script in home-hero.html.
   Hidden by default; the script shows it only when the parent
   paragraph would otherwise sit on a single line, so we never end
   up with three lines. The .smart-break class is a generic hook so
   the same trick can be reused on any element. */
.smart-break { display: none; }

/* =======================================================================
   PROBLEM PORTFOLIO
   ======================================================================= */
.problem-intro {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 0.5vw + 0.95rem, 1.25rem);
  line-height: 1.4;
  color: var(--color-fg-muted);
  max-width: 32em;
  margin-bottom: var(--space-5);
}
.problem-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5) var(--space-6);
  list-style: none;
  padding: 0;
}
@media (min-width: 720px) {
  .problem-list {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-6);
  }
}
.problem-list__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
}
.problem-list__num {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-fg-label);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--ls-label);
}
.problem-list__text {
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-fg);
  margin: 0;
}

/* =======================================================================
   SPECIMEN (mid-page Haeckel pause)
   ======================================================================= */
/* =======================================================================
   HAECKEL — unified block for any Haeckel insertion (specimen at top
   of market-access, divider between cases, divider on career, etc.).
   Centered square frame with italic-serif caption beneath.
   ======================================================================= */
.haeckel {
  /* 20% larger than the previous clamp on each side. The preceding
     section's bottom-padding is reset to 0 (see selector below) so
     the visible gap above and below the Haeckel is purely this
     padding — and therefore symmetric. */
  padding-block: clamp(58px, 11vw, 154px);
  background: var(--color-bg);
}
/* Reset the bottom padding of any section that immediately precedes
   a Haeckel block — the gap above is now controlled exclusively by
   .haeckel's own padding-top. !important needed to win against
   section modifiers like .section--pause and .section--tinted that
   set padding-block via higher-specificity selectors. */
.section:has(+ .haeckel),
.career-pitch-section:has(+ .haeckel) {
  padding-bottom: 0 !important;
}
.haeckel__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
.haeckel-figure {
  margin: 0 auto;
  max-width: 520px;
}
@media (min-width: 900px) {
  .haeckel-figure { max-width: 560px; }
}
.haeckel__frame {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--color-surface-alt);
}
.haeckel__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* transform + object-position are set inline from zoom/focal params. */
}
.haeckel__caption {
  margin-top: var(--space-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  line-height: 1.5;
  max-width: 36em;
}
.haeckel__caption em { font-style: normal; font-weight: 500; color: var(--color-fg); }
.haeckel__caption p { margin: 0; }

/* =======================================================================
   THESIS section — extra bottom breathing room so the centerpiece
   doesn't crowd into the case stack below. Headline uses
   .section-heading (canonical h2 — actual rule lives in the
   section-head primitive block).
   ======================================================================= */
.section--pause.section__thesis,
.section.section__thesis {
  padding-bottom: clamp(var(--space-7), 14vw, calc(var(--space-8) + var(--space-5)));
}
.section-heading em { font-style: italic; }

/* =======================================================================
   CASE  (multi-case, Direction #2: tinted band per case + H2)
   ======================================================================= */
.case-stack > .section + .section {
  margin-top: var(--space-7);
}
/* Reset margin-top between sections when a Haeckel divider sits
   between them. */
.case-stack > .haeckel + .section {
  margin-top: 0 !important;
}
/* Establish a block formatting context so the .testimonial child's
   bottom margin stays inside the tinted case section. Without this,
   the margin collapses out of .case-block (which has no padding/border
   at its bottom edge) and — when the section's own bottom padding is
   reset to 0 by an immediately-following Haeckel block — the
   testimonial ends up flush with the bottom edge of the gray band. */
.case-block {
  display: flow-root;
}
/* Header (eyebrow + h2 + prose) sits at the regular base content width
   inside the wider .section--wide container, so its left edge aligns
   with every other section heading on the page. The artefact below
   keeps the full --content-wide width and intentionally breaks out
   left + right.
   The padding-inline values below MUST track .section__inner's. The
   parent .section__inner has already eaten padding off both sides;
   without matching the same padding here, the head's content would
   sit one padding unit to the LEFT of all other section content on
   the page (because the head's centred-within-a-wider-container
   position only aligns with regular content's centre, not its
   padded inner edge). box-sizing: border-box so max-width includes
   our own padding. */
.case-block__head,
.case__impact-grid {
  max-width: var(--content-base);
  margin-inline: auto;
  padding-inline: var(--space-4);
  box-sizing: border-box;
}
@media (min-width: 480px) {
  .case-block__head,
  .case__impact-grid {
    padding-inline: var(--space-5);
  }
}
@media (min-width: 768px) {
  .case-block__head,
  .case__impact-grid {
    padding-inline: var(--space-6);
  }
}
/* .prose normally centers itself (margin-inline: auto) inside its
   parent. Inside the case head we want the prose to share the h2's
   left edge, not sit centered (which would push it ~32px right of
   the h2 since prose is narrower). */
.case-block__head .prose { margin-inline: 0; }
/* Impact pillars — 2–4 column grid below the case artefact. No card
   chrome (no background, no border). Each pillar leads with a saffron
   2-digit number, then a serif statement. Horizontal width + indent
   come from the shared .case-block__head, .case__impact-grid rule
   above; this block adds the grid layout, top divider, and breakpoints. */
.case__impact-grid {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(13, 16, 21, 0.12);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 600px) {
  .case__impact-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .case__impact-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}
.case__impact-pillar { padding: 0; }
.case__impact-pillar-num {
  font-family: var(--font-mono);
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-accent);
  font-feature-settings: "tnum" 1, "lnum" 1;
  margin: 0 0 var(--space-2);
}
.case__impact-pillar-text {
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-fg);
  margin: 0;
  max-width: 24ch;
}

/* =======================================================================
   ARTEFACT REGISTER (illustrative product mockups)
   ======================================================================= */
.artefact {
  margin-top: var(--space-6);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-artefact);
  overflow: hidden;
  line-height: 1.3;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.artefact__chrome {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.artefact__dots { display: inline-flex; gap: 6px; flex-shrink: 0; }
.artefact__dot {
  width: 10px; height: 10px;
  background: var(--color-surface-alt);
  border-radius: 50%;
}
.artefact__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.artefact__tabs {
  display: flex;
  gap: var(--space-5);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  overflow-x: auto;
}
.artefact__tab {
  padding: var(--space-3) 0;
  color: var(--color-fg-muted);
  white-space: nowrap;
  font-weight: 400;
  cursor: pointer;
  transition: color var(--motion-duration-base) var(--motion-easing-default);
}
.artefact__tab:hover { color: var(--color-fg); }
.artefact__tab--active {
  color: var(--color-fg);
  font-weight: 600;
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: -1px;
}
.artefact__body { padding: var(--space-5); }
/* Video variant of the artefact body — no padding, no background,
   no inline whitespace. Video fills the artefact frame edge-to-edge. */
.artefact__body--video {
  padding: 0;
  background: transparent;
  line-height: 0;
  font-size: 0;
}
.artefact__video-wrap {
  position: relative;
  line-height: 0;
}
.artefact__video {
  display: block;
  width: 100%;
  height: auto;
}
/* Time-coded cues overlay (driven by the JS in the artefact partial).
   Centered horizontally near the bottom of the video. Memo register —
   page sans, modest size, semi-transparent ink-dark fill so the text
   stays legible over any video frame. Fades in/out via .is-visible. */
.artefact__cues {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - var(--space-6));
  padding: var(--space-2) var(--space-4);
  background: rgba(13, 16, 21, 0.85);
  color: var(--color-fg-inverse);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
  text-align: center;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity var(--motion-duration-base) var(--motion-easing-default);
  pointer-events: none;
  white-space: pre-wrap;
}
.artefact__cues.is-visible { opacity: 1; }
@media (max-width: 600px) {
  .artefact__cues { font-size: var(--fs-small); padding: var(--space-2) var(--space-3); }
}
/* Stat grid + bar chart — both used by partials/artefact.html for the
   mockup chrome on service-detail cases. Keep. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}
.stat__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--color-fg-label);
  letter-spacing: 0.12em;
  font-feature-settings: "smcp" 1;
  margin-bottom: var(--space-2);
}
.stat__value {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-fg);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}
.stat__value small {
  color: var(--color-fg-label);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
}
.stat__delta {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--color-fg-muted);
}
.bar-chart { display: grid; gap: var(--space-3); }
.bar-chart__title {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 500;
  color: var(--color-fg-label);
  letter-spacing: 0.12em;
  font-feature-settings: "smcp" 1;
  margin-bottom: var(--space-2);
}
.bar-row {
  display: grid;
  grid-template-columns: minmax(140px, 35%) 1fr auto;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--fs-small);
  line-height: 1.3;
}
.bar-row__label { color: var(--color-fg); }
.bar-row__bar {
  height: 8px;
  background: var(--color-surface-alt);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.bar-row__bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width var(--motion-duration-slow) var(--motion-easing-default);
}
.bar-row__value {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-fg);
  min-width: 2ch;
  text-align: right;
}
.artefact__caption {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--color-fg-muted);
  max-width: 55em;
  line-height: 1.55;
}

/* =======================================================================
   TESTIMONIAL
   ======================================================================= */
.testimonial {
  /* Top + bottom margin so the testimonial sits with equal gray
     breathing room within the tinted case band — independent of
     the section's own padding (which gets reset to 0 when followed
     by a Haeckel block). */
  margin: var(--space-6) auto var(--space-7);
  background: var(--color-surface-ink);
  color: var(--color-fg-inverse);
  padding: var(--space-5) var(--space-5);
  max-width: var(--content-reading);
}
@media (min-width: 720px) {
  .testimonial { padding: var(--space-6); }
}
.testimonial__quote {
  font-family: var(--font-serif);
  font-style: normal;
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  color: var(--color-fg-inverse);
}
.testimonial__quote p { margin: 0; }
.testimonial__quote p + p { margin-top: var(--space-4); }
.testimonial__attribution {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
}
.testimonial__person {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.4;
}
.testimonial__name { font-weight: 500; color: var(--color-fg-inverse); }
.testimonial__title {
  display: block;
  color: var(--color-fg-inverse);
  opacity: 0.7;
  font-size: var(--fs-small);
}
.testimonial__logo {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-fg-inverse);
  opacity: 0.6;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
}
.testimonial__logo--image {
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  opacity: 1;
}
.testimonial__logo--image img {
  max-height: 28px;
  width: auto;
  /* Render as a clean white silhouette on the ink-dark testimonial bg.
     grayscale → strip colour; brightness(0) → all dark; invert(1) → all light. */
  filter: grayscale(100%) brightness(0) invert(1);
  opacity: 0.7;
}

/* =======================================================================
   APPROACH (numbered principles list)
   ======================================================================= */
.approach__principles {
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
  counter-reset: principle;
  max-width: 40em;
}
.approach__principles li {
  counter-increment: principle;
  padding: var(--space-3) 0;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--space-3);
  align-items: baseline;
}
.approach__principles li + li {
  margin-top: var(--space-2);
}
.approach__principles li::before {
  content: counter(principle, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-accent);
  font-feature-settings: "tnum" 1, "lnum" 1;
  letter-spacing: var(--ls-label);
}
.approach__principles b {
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--color-fg);
}
.approach__principles span {
  color: var(--color-fg-muted);
}

/* =======================================================================
   CAPABILITIES — "What we work on" sectioned tag-cluster block.
   Used between the case stack and the approach section on service pages
   that need to signal breadth of analysis experience.
   ======================================================================= */
.capabilities__intro {
  font-size: var(--fs-body-lg);
  color: var(--color-fg-muted);
  max-width: 36em;
  margin: 0 0 var(--space-6);
  line-height: 1.5;
}
.cap-clusters {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  counter-reset: cluster;
}
.cap-cluster {
  counter-increment: cluster;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.cap-cluster:last-child {
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 720px) {
  .cap-cluster {
    grid-template-columns: 14rem 1fr;
    gap: var(--space-5);
  }
}
.cap-cluster__head {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  color: var(--color-fg-label);
  padding-top: var(--space-1);
}
.cap-cluster__head::before {
  content: counter(cluster, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--color-accent);
  letter-spacing: var(--ls-label);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cap-cluster__head strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
  margin-top: var(--space-2);
}
.cap-cluster__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  margin: 0;
  list-style: none;
}
.cap-pill {
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-small);
  color: var(--color-fg);
  background: var(--color-bg);
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  line-height: 1.4;
}
.cap-pill__tools {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-fg-label);
  letter-spacing: var(--ls-label);
}

/* =======================================================================
   SERVICE LIST (homepage primary navigation)
   ======================================================================= */
.service-list {
  list-style: none;
  padding: 0;
  margin: var(--space-5) 0 0;
}
.service-list__link {
  display: grid;
  /* content | arrow */
  grid-template-columns: 1fr auto;
  gap: var(--space-5);
  align-items: center;
  padding-block: var(--space-4);
  text-decoration: none;
  color: var(--color-fg);
}
.service-list__main { min-width: 0; }

/* Byline — hide the circular avatar so the person's name doesn't
   read as article-author attribution; name alone in mono/label style
   reads as "expert / contact" instead. */
.service-list__byline {
  display: inline-flex;
  gap: 8px;
  margin-bottom: var(--space-2);
  font-size: 0.8125rem;
}
.service-list__byline .photo { display: block; }
.service-list__byline .byline__name {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--color-fg-muted);
  line-height: 1.4;
}
.service-list__link:hover { text-decoration: none; }
.service-list__industry {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-fg-label);
  margin: 0 0 var(--space-2) 0;
}
.service-list__industry-tag { color: var(--color-fg-muted); }
.service-list__title {
  font-family: var(--font-serif);
  font-size: clamp(1.375rem, 1.4vw + 0.7rem, 1.75rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-2) 0;
  max-width: 30ch;
  color: var(--color-fg);
  transition: color var(--motion-duration-base) var(--motion-easing-default);
}
.service-list__link:hover .service-list__title {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.service-list__desc {
  font-size: var(--fs-body);
  color: var(--color-fg-muted);
  line-height: 1.55;
  max-width: 56ch;
  margin: 0;
}
.service-list__arrow {
  font-family: var(--font-mono);
  font-size: 1.625rem;
  font-weight: 400;
  color: var(--color-fg-label);
  flex-shrink: 0;
  transition: color var(--motion-duration-base) var(--motion-easing-default),
              transform var(--motion-duration-base) var(--motion-easing-default);
}
.service-list__link:hover .service-list__arrow {
  color: var(--color-accent);
  transform: translateX(6px);
}

/* =======================================================================
   LOGO GRID (homepage clients)
   ======================================================================= */
/* Logo wall — pre-thresholded silhouettes.

   Source logos in assets/images/clients/<slug>/* are processed by
   scripts/process-client-logos.py into transparent-bg charcoal
   silhouette PNGs. The partial reads only those silhouettes — no
   blend-mode or filter trickery at render time.

   Per-logo `scale` (percentage, default 100, range ~50–150) on each
   data/clients.yaml item controls visible height. The image takes
   its natural width from the silhouette's aspect ratio, giving each
   logo a tight bounding box.
*/
#clients { padding-top: clamp(var(--space-4), 4vw, var(--space-6)); }

.logo-grid {
  /* +50% gap on top of the .section-heading's own bottom margin. */
  margin-top: 12px;
  display: grid;
  align-items: center;
  /* Each logo centered within its own cell. The grid block as a
     whole sits flush-left with the heading above (default
     section__inner alignment) — no per-cell justify-items needed. */
  grid-template-columns: repeat(2, 1fr);
  /* Row + column gaps configurable from YAML via custom properties. */
  gap: var(--logo-row-gap, 48px) var(--logo-col-gap, 32px);
}
@media (min-width: 600px) { .logo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }

.logo-grid__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.logo-grid__item:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Image bounding box = base 50px × scale%. Width auto-derives from
   the silhouette's aspect ratio. When the natural width would
   exceed the cell, max-width clamps it AND height scales down
   proportionally — preserving aspect in all cases.

   --logo-color (0..100): scales the silhouette's charcoal (#282828)
   from black (100) through grey to white (0). Charcoal luminance is
   ~40/255; brightness factor (1 - color/100) × 6.375 maps charcoal
   to (255 × (1 - color/100)) — i.e. white when color=0, black when
   color=100. Default 100 (no visible filter change). */
.logo-grid__img {
  max-height: calc(50px * var(--logo-scale-pct, 100) / 100);
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  filter: brightness(calc(6.375 * (100 - var(--logo-color, 100)) / 100));
}

/* Text fallback used when a slug has no silhouette yet (e.g. the
   preprocessing script hasn't been run). Keeps the wall holding its
   shape during rollout. */
.logo-grid__placeholder {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-fg-label);
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}

/* =======================================================================
   EVENT GRID (homepage recent events)
   ======================================================================= */
/* "All events →" — typography from .cta-link; this rule just owns
   the positional bits (right-align beneath the heading). */
.event-grid__all-link {
  margin: 0 0 var(--space-1);
  text-align: right;
}

/* Horizontal scroll strip for the event cards.
   Cards are fixed-width so they peek on smaller viewports. */
.event-grid .card-grid {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: var(--space-5);
  padding-bottom: var(--space-3);
  scrollbar-width: none;
}
.event-grid .card-grid::-webkit-scrollbar { display: none; }
.event-grid .card-grid .card {
  flex: 0 0 clamp(260px, 72vw, 360px);
  scroll-snap-align: start;
}

/* "Upcoming" badge — sits on the photo for upcoming-event cards. */
.event-card__tag {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 1;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-fg);
  background: var(--color-accent);
  padding: 4px 10px;
  border-radius: 2px;
}

/* =======================================================================
   WEBINAR CTA — soft conversion block (services pages). Reuses the
   .event-card__tag pill for the date, but standalone (no card corner
   to absolute-position to). Centers the Register button below the
   bullet body via .cta-row--centered.
   ======================================================================= */
/* Standalone date pill — drop the absolute positioning, center under
   the heading. */
.webinar-cta__date {
  margin: var(--space-3) 0 var(--space-4);
}
.webinar-cta__date .event-card__tag {
  position: static;
}
/* Tighten bullet rhythm inside the webinar body so the topic list
   reads as a compact stack rather than a paragraph-spaced list. */
#webinar .prose li + li {
  margin-top: 3px;
}
#webinar .prose ul ul li + li {
  margin-top: 3px;
}
/* Align the CTA row with the .prose block above it: match prose's
   max-width (36em) AND its font-size (so `em` resolves identically;
   otherwise the wrapper's --fs-body-lg blows up to ~45em / 720px).
   Left-anchor inside .section__inner rather than centering on the
   section, then the base text-align: center on .cta-row--centered
   places the .btn-pill at the horizontal center of the prose column. */
#webinar .cta-row--centered {
  font-size: var(--fs-body);
  max-width: 36em;
  margin-inline: 0;
}

/* =======================================================================
   FAQ
   ======================================================================= */
.faq { margin-top: var(--space-5); }
.faq__item {
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-3);
}
.faq__item:last-child {
  border-bottom: 1px solid var(--color-border);
}
.faq__item:last-child { border-bottom: 1px solid var(--color-border); }
.faq__q {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--color-fg);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--color-fg-label);
  flex-shrink: 0;
  font-size: var(--fs-h3);
  line-height: 1;
  transition: color var(--motion-duration-base) var(--motion-easing-default);
}
details[open] .faq__q::after { content: "−"; color: var(--color-accent); }
.faq__q:hover { color: var(--color-fg); }
.faq__a {
  margin-top: var(--space-3);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-fg);
  max-width: 40em;
}
.faq__a p { margin: 0; font-size: inherit; line-height: inherit; }
.faq__a p + p { margin-top: var(--space-3); }
.faq__a ul, .faq__a ol { margin: var(--space-2) 0; padding-left: 1.4em; }
.faq__a li { margin: 2px 0; }

/* Sectioned FAQ — small section headings between groups of questions.
   Tighter overall than the flat layout to fit longer FAQ pages. */
.faq__section + .faq__section { margin-top: var(--space-5); }
.faq__section-h {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-fg-label);
  margin: 0 0 var(--space-2);
}
.faq-section .faq__section .faq { margin-top: var(--space-2); }
.faq-section .faq__item { padding-block: var(--space-2); }
.faq-section .faq__q { font-size: 1rem; }
.faq-section .faq__a { font-size: var(--fs-small); line-height: 1.6; }

/* =======================================================================
   CONTACT
   ======================================================================= */
.section--contact {
  background: var(--color-surface-alt);
  /* -25% on the section--pause top padding so the section-label
     sits closer to the previous section. */
  padding-top: clamp(36px, 7vw, 96px);
}
/* Contact uses .card.card--horizontal as its scaffold; override the
   default 280px photo column with a slightly wider, fluid one and
   a roomier gap. */
@media (min-width: 720px) {
  .card.card--horizontal.contact {
    grid-template-columns: minmax(260px, 340px) 1fr;
    gap: var(--space-7);
  }
}
/* Contact photo slot: tall 4:5 portrait with the page background as
   the surround colour (the section sits on --color-surface-alt). */
.photo--contact {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--color-bg);
  overflow: hidden;
}
.photo--contact img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
  opacity: 1;
}
/* Contact body uses its own bespoke per-element margins (tight name→role,
   looser role→flow, etc.), so neutralise the body-stack default gap. */
.contact .card__body-stack { gap: 0; }
.contact__name {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 3vw + 0.8rem, 3rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-3);
  max-width: 18ch;
}
.contact__role {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--color-fg-label);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.contact__flow {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-fg);
  max-width: 38em;
}
.contact__flow p + p { margin-top: var(--space-4); }
.contact__flow em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.125em;
  color: var(--color-fg);
}
/* CTA sentence — sits below the bio paragraph as the page's
   non-button conversion ask. Subtle highlight via italic serif at
   1.0625em plus a saffron accent underline (same treatment as the
   "biotech / pharma" emphasis in the home hero subhead). */
.contact__cta {
  margin: var(--space-4) 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.0625em;
  line-height: 1.5;
  color: var(--color-fg);
  max-width: 38em;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
}
.contact__cta p { margin: 0; font-size: inherit; line-height: inherit; }
.contact__lines {
  margin: var(--space-5) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.contact__line {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--color-fg);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.contact__line-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-fg-label);
  flex-shrink: 0;
  min-width: 4.5em;
}
/* Email + phone links read as standard global-anchor underline (border
   color, lifts to accent on hover) so they don't compete visually
   with the .contact__cta sentence above, which carries the saffron
   accent underline as the page's conversion ask. */
.contact__email {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-fg);
}
.contact__phone {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--color-fg);
  text-decoration: none;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.contact__phone:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.contact__name a {
  color: inherit;
  text-decoration: none;
  transition: color var(--motion-duration-base) var(--motion-easing-default);
}
.contact__name a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 6px;
  text-decoration-thickness: var(--link-underline-thickness);
}
/* Standalone "Full profile →" CTA sits below the contact lines.
   Picks up typography from .cta-link; just needs a top margin. */
.contact .cta-link { margin-top: var(--space-4); }

/* =======================================================================
   ARTICLE SINGLE PAGE
   ======================================================================= */
.article {
  max-width: var(--content-reading);
}
/* Embedded interactive content (Miro, Loom, etc.) inside an article.
   Breaks out of the reading column by 25% on each side (= 50% wider
   total) so the embed stretches beyond the prose. Falls back to
   container width on narrow viewports. */
.article__embed {
  position: relative;
  margin: var(--space-6) 0;
  aspect-ratio: 16 / 9;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
@media (min-width: 1100px) {
  .article__embed {
    width: 150%;
    margin-left: -25%;
    margin-right: -25%;
  }
}
.article__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* In-article figure embedded via the `{{< figure >}}` shortcode (see
   layouts/shortcodes/figure.html). Sits in the reading column at full
   width with a muted italic caption matched to .artefact__caption. */
.article-figure {
  margin: var(--space-5) 0;
}
.article-figure img {
  display: block;
  width: 100%;
  height: auto;
}
.article-figure__caption {
  margin-top: var(--space-2);
  font-size: var(--fs-small);
  font-style: italic;
  color: var(--color-fg-muted);
  line-height: 1.55;
}

/* Collapsible prompt disclosure embedded via the `{{< prompt >}}`
   shortcode (see layouts/shortcodes/prompt.html). Click the summary
   to expand; body is monospace verbatim text with horizontal scroll
   as a fallback for genuinely long lines. */
.article-prompt {
  margin: var(--space-5) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
}
.article-prompt__summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-label);
  color: var(--color-fg);
  user-select: none;
  list-style: none;
  position: relative;
}
.article-prompt__summary::-webkit-details-marker { display: none; }
.article-prompt__summary::before {
  content: "▸";
  position: absolute;
  left: var(--space-3);
  color: var(--color-fg-muted);
  transition: transform var(--motion-duration-base) var(--motion-easing-default);
  display: inline-block;
}
.article-prompt[open] > .article-prompt__summary::before {
  transform: rotate(90deg);
}
.article-prompt__body {
  margin: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--color-fg);
  background: var(--color-bg);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* =======================================================================
   FOOTER  (recessive — small, muted, no top rule)
   ======================================================================= */
/* =======================================================================
   INTERVIEW PAGE — magazine-style hero + pull-quote + body.
   ======================================================================= */
.interview { max-width: var(--content-reading); }
.interview__pull-quote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: var(--space-2) 0 var(--space-4);
  color: var(--color-fg);
  max-width: 26ch;
}
.interview__pull-quote::before { content: "“"; }
.interview__pull-quote::after  { content: "”"; }
/* Attribution row uses the universal .byline primitive. The
   .interview__byline modifier elsewhere in the file owns just
   the bottom margin. */

/* Data line — single line beneath the byline. Tenure · current role
   (alumni only) · LinkedIn icon. No labels, no rules. */
.interview__data {
  margin: 0 0 var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  line-height: 1.5;
}
/* Body typography comes from .prose; this override turns markdown
   <strong> into a Q/A heading between question + answer pairs. */
.interview__body strong {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--color-fg);
}

/* =======================================================================
   CAREER PAGE
   ======================================================================= */
/* Career pitch section uses the unified after-hero spacing. */
.career-pitch-section { padding-top: var(--space-7); }

/* Pitch sections — eyebrow + display H1 + sans-serif lead, exactly
   the same treatment as the market-access hero block. */
.career-pitch {
  /* No left indent — flush with the section gutter. */
  margin-left: 0;
}
/* Inter-pitch gap lives on margin-top of subsequent siblings, NOT
   margin-bottom of every pitch — otherwise the last pitch leaves a
   ~128 px bottom margin inside the article, asymmetrically inflating
   the gap above the Haeckel that follows. */
.career-pitch + .career-pitch {
  margin-top: var(--space-8);
}
.career-pitch .eyebrow { margin-bottom: var(--space-4); }

/* Inline links inside any .prose-lead get the standard accent
   underline + accent-on-hover treatment. */
.prose-lead a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
}
.prose-lead a:hover { color: var(--color-accent); }

/* Inline "More" toggle — sits at the end of the last paragraph,
   on the same line, in the same font/weight as the prose. An accent
   underline marks it as clickable. */
.career-pitch__more-toggle {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 0.8em;       /* ≈ 2 spaces of breathing room */
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-thickness: var(--link-underline-thickness);
  transition: color var(--motion-duration-base) var(--motion-easing-default),
              text-decoration-color var(--motion-duration-base) var(--motion-easing-default);
}
.career-pitch__more-toggle:hover {
  color: var(--color-fg);
  text-decoration-color: var(--color-accent-hover);
}
.career-pitch__more-toggle[aria-expanded="true"]::after { content: " ▴"; }
.career-pitch__more-toggle[aria-expanded="false"]::after { content: " ▾"; }
.career-pitch__more-body {
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-fg-muted);
  max-width: 36em;
}
.career-pitch__more-body p { margin: 0; font-size: inherit; line-height: inherit; }
.career-pitch__more-body p + p { margin-top: var(--space-3); }

/* The career page's Haeckel divider uses the unified .haeckel block. */

/* Internship timelines — collapsible folds inside Join Us.
   Width matches the join-us body paragraph (56ch). Summary rows
   render at a consistent line-height so collapsed Spring/Summer
   titles align horizontally. */
.career-timelines {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* Match the preceding body paragraph's pixel width: 56ch budget
     evaluated in --fs-body-lg context (the size the join-us prose
     used to render at) so the two blocks line up exactly. The
     font-size only sets the ch context; inner content (summary,
     labels, values) sets its own size. */
  font-size: var(--fs-body-lg);
  max-width: 56ch;
}
.career-timeline {
  border-top: 1px solid var(--color-border);
  padding: 0;                /* padding lives on the summary row */
}
.career-timeline:last-child { border-bottom: 1px solid var(--color-border); }
.career-timeline__summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  font-weight: 400;
  /* Fixed height — both Spring and Summer summaries render at the
     exact same row height so they align across the stack. */
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-fg);
}
.career-timeline__summary::-webkit-details-marker { display: none; }
.career-timeline__summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--color-accent);
  margin-left: var(--space-3);
  flex-shrink: 0;
}
.career-timeline[open] .career-timeline__summary::after { content: "−"; }

/* Cohort sub-sections inside the timeline fold-out. Each cohort gets
   its own heading + list of milestones, with a thin rule between
   cohorts for separation. */
.career-timeline__cohorts {
  margin: var(--space-3) 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.career-timeline__cohort + .career-timeline__cohort {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
}
.career-timeline__cohort-title {
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--color-fg);
  margin: 0 0 var(--space-2);
}

.career-timeline__list {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
}
.career-timeline__list li {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-3);
  padding: 6px 0;
  font-size: var(--fs-body);
  color: var(--color-fg);
}
.career-timeline__label {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: var(--ls-tag);
  color: var(--color-fg-label);
}
.career-timeline__value { color: var(--color-fg); }

/* =======================================================================
   CAREER TIMELINE — past/current/next visualisation.
   Status is computed in the template (career/list.html) and exposed
   via `data-status="past|current|next|future"` on each <li>.

   Vertical rail with status dots. Past dots are filled muted; future
   dots are outlined; the chronologically-earliest future dot ("next")
   and any in-range ("current") get a saffron fill with a soft halo.
   ======================================================================= */
.career-timeline__list--rail {
  position: relative;
  padding-left: var(--space-4);
}
.career-timeline__list--rail::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: var(--color-border);
}
.career-timeline__list--rail li { position: relative; }
.career-timeline__list--rail li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-4) + 2px);
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-sizing: border-box;
}
.career-timeline__list--rail li[data-status="past"]::before {
  background: var(--color-fg-muted);
  border-color: var(--color-fg-muted);
}
.career-timeline__list--rail li[data-status="current"]::before,
.career-timeline__list--rail li[data-status="next"]::before {
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(232, 168, 62, 0.22);
}
.career-timeline__list--rail li[data-status="current"] .career-timeline__value,
.career-timeline__list--rail li[data-status="next"] .career-timeline__value {
  font-weight: 600;
}

/* Join us — tinted band wrapper. */
.career-joinus {
  background: var(--color-surface-alt);
}

/* Applications-open call-out — date-gated highlighted card inside
   the Join us tinted band. Same dark inverted treatment as the EPRI
   case testimonial: this is THE thing to read on the page when
   applications are open. */
.applications-open {
  margin: var(--space-6) auto;
  background: var(--color-surface-ink);
  color: var(--color-fg-inverse);
  padding: clamp(var(--space-5), 5vw, var(--space-7));
  max-width: var(--content-reading);
}
.applications-open__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(1.625rem, 1.5vw + 1rem, 2rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  margin: 0 0 var(--space-4);
  color: var(--color-fg-inverse);
}
.applications-open__body {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-fg-inverse);
  margin: 0 0 var(--space-5);
}
.applications-open__body p { margin: 0; color: inherit; opacity: 0.92; }
.applications-open__body p + p { margin-top: var(--space-3); }
.applications-open__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 600px) {
  .applications-open__perks { grid-template-columns: 1fr 1fr; }
}
.applications-open__perk {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  gap: var(--space-3);
  align-items: start;
}
.applications-open__perk-icon {
  font-size: var(--fs-h3);
  line-height: 1.4;
}
.applications-open__perk-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  margin: 0 0 2px;
  color: var(--color-fg-inverse);
}
.applications-open__perk-text {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-fg-inverse);
  opacity: 0.78;
  margin: 0;
}

/* Sub-section headings (h4) within the applications-open card.
   Used for "What you will work on", "What's in it for you",
   "Who we are looking for", etc. */
.applications-open__h {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.005em;
  color: var(--color-fg-inverse);
  margin: var(--space-6) 0 var(--space-3);
}
.applications-open__h:first-of-type { margin-top: var(--space-5); }

/* Fold-out (details) elements inside the dark card. Mirrors the
   career-timeline pattern but inverted for dark surface. */
.applications-open__fold {
  margin: var(--space-3) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding: 0;
}
.applications-open__fold + .applications-open__fold {
  border-top: 0;
}
.applications-open__fold-summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.005em;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-fg-inverse);
}
.applications-open__fold-summary::-webkit-details-marker { display: none; }
.applications-open__fold-summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--color-accent);
  margin-left: var(--space-3);
  flex-shrink: 0;
}
.applications-open__fold[open] .applications-open__fold-summary::after { content: "−"; }
.applications-open__fold[open] {
  padding-bottom: var(--space-4);
}

/* Project topics list inside the work fold-out. */
.applications-open__projects {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.applications-open__project {
  padding: 0;
}
.applications-open__project + .applications-open__project {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: var(--space-4);
}
.applications-open__project-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.35;
  color: var(--color-fg-inverse);
  margin: 0 0 var(--space-2);
}
.applications-open__project-meta {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-fg-inverse);
  opacity: 0.85;
  margin: 2px 0;
}
.applications-open__project-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  opacity: 0.6;
  margin-right: 0.5em;
}

/* Profile bullets — "Who we are looking for". */
.applications-open__bullets {
  margin: var(--space-3) 0 0;
  padding-left: 1.25em;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--color-fg-inverse);
}
.applications-open__bullets li {
  opacity: 0.92;
}
.applications-open__bullets li::marker {
  color: var(--color-accent);
}
.applications-open__bullets p { margin: 0; }

/* Deadline call-out — small but emphatic. */
.applications-open__deadline {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: var(--space-4) 0 0;
}

/* Process steps inside the process fold-out. */
.applications-open__steps {
  list-style: none;
  counter-reset: appstep;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.applications-open__step {
  counter-increment: appstep;
  position: relative;
  padding-left: 2.25em;
}
.applications-open__step::before {
  content: counter(appstep);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  letter-spacing: var(--ls-tag);
  color: var(--color-accent);
  width: 1.75em;
}
.applications-open__step-title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-small);
  margin: 0 0 4px;
  color: var(--color-fg-inverse);
}
.applications-open__step-body {
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--color-fg-inverse);
  opacity: 0.82;
  margin: 0;
}

/* Closing note — italic, small, slightly muted. */
.applications-open__closing {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--color-fg-inverse);
  opacity: 0.78;
  margin: var(--space-6) 0 0;
}

/* Apply CTA — accent pill (always highlight, no hover change). */
.applications-open__cta {
  margin: var(--space-5) 0 0;
  text-align: center;
}

/* =======================================================================
   TEAM — list page and deep profile page.
   ======================================================================= */

/* Tighten the gap between intro paragraph and the people grid. */
.team-intro { padding-bottom: var(--space-3); }
.team-list  { padding-top: 0; }

/* Cap the team-list grid at 2 columns even on wide viewports — 4-up
   made the contact strings (long emails) break awkwardly. */
@media (min-width: 720px) {
  .team-list .card-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Email + phone links inside the team-list byline keep their own hover
   underline (they aren't card-wide hover candidates). */
.team-list .card__byline a {
  color: var(--color-fg);
  text-decoration: none;
}
.team-list .card__byline a:hover {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
}

/* Deep profile page — article-style hero + flowing body */
/* Team profile uses the wider content-base width so the article
   grid + service list match the service-detail pages exactly. The
   reading-width constraint moves to the bio + head blocks below,
   left-aligned so every block on this page shares the same left
   edge — no horizontal break-out between bio and the wider grids. */
.team-profile { max-width: var(--content-base); }
.team-profile__head,
/* (Bio body uses the universal .prose primitive — no team-specific
   override.) */

.team-profile__head { margin-bottom: var(--space-5); }
/* The h1 inside the team-profile head block uses .section-head--page;
   only the margin needs to be tighter here so the name sits close to
   the role line beneath. */
.team-profile__head .section-head__h { margin: var(--space-2) 0 var(--space-1); }
.team-profile__role {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  color: var(--color-fg-muted);
  margin: 0 0 var(--space-4);
}
.team-profile__edu-h {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-fg-muted);
  margin: var(--space-5) 0 var(--space-2);
}
/* Education list — sized + colored to match the rest of the bio
   supporting copy. Em-dash markers + marker color are inherited from
   `.prose ul` (this list lives inside the bio's `.prose` wrapper). */
.team-profile__edu-list {
  margin: 0;
  padding-left: 1.25em;
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  line-height: 1.55;
}
.team-profile__edu-list li + li { margin-top: 4px; }
.team-profile__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  /* Stack vertically: each li (email / office phone / mobile phone)
     sits on its own line, mirroring the team-list card layout. */
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.team-profile__contact a { color: var(--color-fg); text-decoration: none; }
.team-profile__contact a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.team-profile__phone-label {
  color: var(--color-fg-muted);
  margin-right: 2px;
}

/* Phone-number digits use tabular figures so multiple numbers stacked
   in the contact list line up cleanly. */
.team-profile__contact a {
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Small "Press" link at the end of the bio. */
/* (Press link uses the universal .cta-link primitive — no team-specific
   margin override; .prose's p+p rule handles the spacing.) */

/* Social icons row — LinkedIn / Google Scholar / ORCID. Always
   grayscale; lift on hover. Inline-friendly markup (a <span>
   wrapping <a>s) so it works both as a standalone block (team
   profile head) and inline within an attribution paragraph. */
.social-icons {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
  vertical-align: middle;
}
/* Standalone (block) usage: leave a small gap above when the icons
   appear on their own line — currently only on the team profile. */
.team-profile__head .social-icons {
  display: inline-flex;
  margin-top: var(--space-3);
}
/* The interview byline only needs spacing below it now — icon
   placement is handled generically inside .byline__name (see the
   .byline primitive section earlier in the file). */
.interview__byline { margin-bottom: var(--space-4); }
.social-icons__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  color: var(--color-fg-muted);
  text-decoration: none;
  filter: grayscale(100%);
  transition: color var(--motion-duration-base) var(--motion-easing-default),
              background var(--motion-duration-base) var(--motion-easing-default);
}
.social-icons__link:hover {
  color: var(--color-fg);
  background: var(--color-surface-alt);
}

.team-profile__block { margin-top: var(--space-7); }
/* =======================================================================
   TESTIMONIAL LIST — uses .card.card__quote + .card__byline. Tweaks:
   bigger quote (testimonial quotes are longer), tighter line-height
   to fit, and disable quote pseudo-quotes (markdown body already
   includes them). */
/* Suppress the auto pseudo-quotes — the testimonial markdown body
   already includes its own curly quotes. (Sizing inherits from
   .card__quote default.) */
/* Quote grows to fill card height so the byline aligns at the bottom
   of every card in the row, regardless of quote length. */
.testimonial-list {
  gap: var(--space-6);
}

.testimonial-list .card {
  border-top: 1px solid rgba(208, 213, 216, 0.4);
  padding-top: var(--space-4);
}

.testimonial-list .card__quote { flex: 1; }
.testimonial-list .card__quote::before,
.testimonial-list .card__quote::after { content: none; }
.testimonial-list .card__quote p { margin: 0; font-size: inherit; line-height: inherit; }
.testimonial-list .card__quote p + p { margin-top: var(--space-2); }

/* Testimonial byline: avatar (.photo--avatar-sm) + a <p> with three
   stacked spans (name / title / company). The name stands out as fg +
   medium weight, while title + company stay muted. Spans get
   display: block from the global .card__byline rule, so they stack
   one per line. */
/* Name styling now lives generically on .card__byline .byline__name —
   testimonial cards mark up the name span with that class so they get
   it for free, alongside the team-interview cards on /career/. */

/* =======================================================================
   NEWSLETTER — minimal signup, sits flush against the next section
   (no background tint, no additional band).
   ======================================================================= */
.newsletter {
  background: var(--color-surface-alt);
  padding-block: clamp(var(--space-5), 6vw, var(--space-7));
}
.newsletter__inner {
  max-width: 600px;
  margin-inline: auto;
  padding-inline: var(--space-4);
  text-align: center;
}
@media (min-width: 480px) { .newsletter__inner { padding-inline: var(--space-5); } }
@media (min-width: 768px) { .newsletter__inner { padding-inline: var(--space-6); } }
.newsletter__pitch {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 var(--space-1);
  color: var(--color-fg);
}
.newsletter__sub {
  font-family: var(--font-serif);
  font-size: var(--fs-small);
  color: var(--color-fg-muted);
  margin: 0 0 var(--space-3);
}
.newsletter__form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.newsletter__form input[type="email"] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 11px 18px;
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
}
.newsletter__form input[type="email"]:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 0;
  border-color: var(--color-fg);
}
/* GDPR consent — small recessive line beneath the email + button.
   Forced full-width inside the flex row so it wraps to its own line. */
.newsletter__consent {
  flex: 1 0 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-fg-muted);
  text-align: left;
  cursor: pointer;
}
.newsletter__consent input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
  accent-color: var(--color-accent);
}
.newsletter__error {
  width: 100%;
  margin-top: var(--space-2);
  font-size: 0.875rem;
  color: var(--color-accent);
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* =======================================================================
   FOOTER — charcoal panel on every page. Two flat levels:
   1) address + contact at the same visual weight (top row)
   2) copyright + imprint/privacy + VAT (bottom row, recessed)
   ======================================================================= */
/* Footer background + text colors come from .section--inverted (same
   convention as any other charcoal-surface band). Padding, font, and
   sizing remain footer-specific. */
.footer {
  padding-block: var(--space-6) var(--space-5);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.6;
}
.footer__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 480px) { .footer__inner { padding-inline: var(--space-5); } }
@media (min-width: 768px) { .footer__inner { padding-inline: var(--space-6); } }

/* Uniform muted text colour throughout the footer — same recessed
   tone as the bottom legal/VAT line. Uses rgba on color (rather
   than opacity on the paragraph) so links retain their own alpha
   for the underline. */
.footer p { margin: 0; color: rgba(237, 240, 242, 0.55); }

.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
}
@media (min-width: 600px) {
  .footer__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .footer__col:last-child { text-align: right; }
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--space-4);
  align-items: baseline;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(237, 240, 242, 0.12);
  font-family: var(--font-sans);
  font-size: 0.6875rem;        /* 11px — recessed but legible */
  letter-spacing: 0.02em;
}
/* Copyright sits flush-left; legal + VAT are pushed to the right by
   giving the first item as much right margin as the row can spare. */
.footer__bottom p:first-child { margin-right: auto; }
.footer a {
  /* Match the muted paragraph color so links don't pop brighter
     than surrounding text. Hover lifts to full accent. */
  color: rgba(237, 240, 242, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(237, 240, 242, 0.25);
  transition: color var(--motion-duration-base) var(--motion-easing-default),
              border-color var(--motion-duration-base) var(--motion-easing-default);
}
.footer a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* =======================================================================
   SECTION-HEAD + PROSE-LEAD primitives.

   Typographic vocabulary for page intros and section headings:
       <h1 class="section-head__h section-head--page">…</h1>
       <p  class="prose-lead prose-lead--display">…</p>
   ======================================================================= */

/* PAGE — page intro h1 on services hero, team list, events list. */
.section-head__h.section-head--page {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2.25rem, 2.5vw + 1.25rem, 3.25rem);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  margin: var(--space-3) 0 var(--space-4);
  max-width: 22ch;
}

/* Canonical h2. Used by every section heading on the site. */
.section-heading {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 2.5vw + 1rem, 2.875rem);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  max-width: 24ch;
  margin: 0 0 var(--space-5);
  color: var(--color-fg);
}

/* QUIET — small section heading. Same family + weight as
   .section-heading (canonical h2) but at a smaller scale, so it
   reads as a heading in the same vocabulary, just dialed down.
   Used for section labels like "Contact" and "Clients" that don't
   need to compete with the main page content. */
.section-head__h.section-head--quiet {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
  margin: 0 0 var(--space-3);
}

/* PROSE-LEAD — large sans lead beneath a page intro h1.
   Used by services hero, team list lead, events list lead. */
.prose-lead.prose-lead--display {
  margin-top: var(--space-6);
  font-family: var(--font-sans);
  font-size: 1.375rem;
  line-height: 1.5;
  color: var(--color-fg);
  max-width: 30em;
}
.prose-lead.prose-lead--display em { font-style: italic; }
.prose-lead.prose-lead--display p { font-size: inherit; line-height: inherit; }

/* =======================================================================
   EVENTS — DETAIL PAGE (positional bits only)
   ======================================================================= */
.event-detail { max-width: var(--content-reading); }

/* Inline "Upcoming" badge on the detail-page meta strip. */
.event-detail__upcoming {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-fg);
  background: var(--color-accent);
  padding: 3px 9px;
  border-radius: 2px;
  vertical-align: middle;
}

/* =======================================================================
   PILL BUTTON — universal CTA style. Used for event register, career
   webinar CTA, newsletter subscribe, anywhere a high-stakes click sits.
   ======================================================================= */
.btn-pill {
  display: inline-block;
  background: var(--color-fg);
  color: var(--color-fg-inverse);
  padding: 12px 28px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--motion-duration-base) var(--motion-easing-default),
              color var(--motion-duration-base) var(--motion-easing-default);
}
.btn-pill:hover {
  background: var(--color-accent);
  color: var(--color-fg);
  text-decoration: none;
}
/* Accent variant — always saffron, no hover swap. Used by the
   apply CTA inside the applications-open card. */
.btn-pill--accent,
.btn-pill--accent:hover,
.btn-pill--accent:focus,
.btn-pill--accent:active {
  background: var(--color-accent);
  color: var(--color-fg);
}

/* CTA row — generic vertical-rhythm wrapper around a .btn-pill.
   Replaces the bespoke .event-detail__register and .career-cta
   wrappers. The --centered variant horizontally centers the button
   within a 56ch reading column (matches the body it follows on the
   career page) and matches that body's font-size context. */
.cta-row {
  margin: var(--space-2) 0 var(--space-6);
}
.cta-row--centered {
  margin: var(--space-6) 0;
  text-align: center;
  font-size: var(--fs-body-lg);
  max-width: 56ch;
}

/* Interview detail page. Reuses .event-detail layout but adds
   navigation back to the parent event. */
.event-detail__interview-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-accent);
}
.event-interview__body {
  margin-top: var(--space-6);
  max-width: var(--content-reading);
}
/* Lift the References heading away from the body of the interview so
   the bibliographical list reads as a distinct section, not the next
   answer. The interview body uses ## for References. */
.event-interview__body h2 {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
/* "← Back to event details" — typography from .cta-link; this rule
   just owns the framing (top border + padding + max-width) at the
   bottom of an interview. */
.event-interview__back {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  max-width: var(--content-reading);
}

/* Speaker bio cards. One per speaker; rendered below the abstract with
   an eyebrow heading. */
.event-detail__bios {
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  max-width: var(--content-reading);
}
.event-detail__bios .eyebrow { margin-bottom: var(--space-5); }