/* Tektome — Leadership page. Light mode, brand tokens only. */
.lead-page { flex: 1; background: var(--color-draft-white); font-family: var(--font-sans); color: var(--fg-primary); }
.lead-hero {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--purple-50) 0%, rgba(236, 236, 252, 0) 60%),
    var(--color-draft-white);
  padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 5vw, 64px);
}
.lead-inner { max-width: 1080px; margin: 0 auto; padding: 0 40px; }
.lead-eyebrow { font-family: var(--font-mono); font-size: 13px; font-weight: var(--fw-semibold); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-arch-purple); margin: 0 0 20px; }
.lead-title { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(36px, 5.2vw, 64px); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-data-black); margin: 0; max-width: 16ch; text-wrap: balance; }
.lead-title .accent { color: var(--color-arch-purple); }
.lead-lede { font-size: 17px; line-height: 1.65; color: var(--fg-secondary); margin: 22px 0 0; max-width: 52ch; text-wrap: pretty; }

/* ============================================================
   Page design proposals (data-lead-design on .lead-page):
   cards (default · the blueprint look) · editorial · feature.
   Selectors include .co-page for specificity over company.css's
   blueprint variant (which is linked after leadership.css).
   ============================================================ */

/* ---- B · Editorial split — each founder a wide row: portrait left,
        name/role/bio right; hairline divider between them; ruled hero. ---- */
.lead-page[data-lead-design="editorial"] .lead-hero { padding-bottom: clamp(32px, 4vw, 52px); }
.lead-page[data-lead-design="editorial"] .co-page .co-founders__grid { grid-template-columns: 1fr; gap: 0; max-width: 1000px; }
.lead-page[data-lead-design="editorial"] .co-page .co-founder {
  background: transparent; border: none; border-radius: 0;
  display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 4vw, 52px); align-items: start;
  padding: clamp(36px, 4.5vw, 56px) 0; border-bottom: 1px solid var(--border-subtle);
}
.lead-page[data-lead-design="editorial"] .co-page .co-founder:first-child { padding-top: 0; }
.lead-page[data-lead-design="editorial"] .co-page .co-founder:last-child { padding-bottom: 0; border-bottom: none; }
.lead-page[data-lead-design="editorial"] .co-page .co-founder__photo { margin: 0; border-radius: var(--radius-md); aspect-ratio: 4 / 5; grid-column: 1; grid-row: 1 / span 2; align-self: start; }
.lead-page[data-lead-design="editorial"] .co-page .co-founder__name { grid-column: 2; grid-row: 1; }
.lead-page[data-lead-design="editorial"] .co-page .co-founder__bio { grid-column: 2; grid-row: 2; }
.lead-page[data-lead-design="editorial"] .co-page .co-founder__name,
.lead-page[data-lead-design="editorial"] .co-page .co-founder__bio { padding-left: 0; padding-right: 0; }

/* ---- C · Feature — lavender hero wash; founders as large elevated,
        soft-cornered cards (no border) with a wider portrait. ---- */
.lead-page[data-lead-design="feature"] .lead-hero {
  background: radial-gradient(110% 90% at 50% -10%, var(--purple-50) 0%, rgba(236, 236, 252, 0) 62%), var(--color-draft-white);
  text-align: center;
}
.lead-page[data-lead-design="feature"] .lead-inner { display: flex; flex-direction: column; align-items: center; }
.lead-page[data-lead-design="feature"] .co-page .co-founder {
  background: var(--bg-surface); border-color: transparent; box-shadow: var(--shadow-sm); border-radius: var(--radius-xl);
}
.lead-page[data-lead-design="feature"] .co-page .co-founder__photo { aspect-ratio: 16 / 10; }

/* Align the founders block with the hero/team headings: same 1080px
   inner width and left-aligned title (overrides company.css centering). */
.lead-page .co-founders .co-inner { max-width: 1080px; }
.lead-page .co-founders__title { text-align: left; }

/* ---- Merged team section heading ---- */
.lead-team { padding: clamp(48px, 6vw, 80px) 0 0; background: transparent; }
.lead-team .lead-inner { text-align: left; }
.lead-team .lead-eyebrow { display: block; white-space: nowrap; }
.lead-team__title { font-family: var(--font-sans); font-weight: var(--fw-light); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.08; letter-spacing: -0.02em; color: var(--color-data-black); margin: 0; text-wrap: balance; }
.lead-team__title .accent { color: var(--color-arch-purple); }
.lead-team .lead-lede { margin-left: 0; margin-right: 0; }
/* The merged roster sits flush under its heading; trim its top padding.
   Background is carried once by the .lead-team-band wrapper so it never
   doubles between the heading and the roster. */
.lead-page .tm-roster { padding-top: clamp(32px, 4vw, 56px); background: transparent; }
/* Align the roster grid to the team heading's 1080px lead-inner so the
   borderless cards' names/roles line up under the heading, not wider. */
.lead-page .tm-grid { max-width: 1080px; }

/* Per-design team-roster treatment (cards = default our-team.css look). */
.lead-page[data-lead-design="editorial"] .tm-roster { background: transparent; }
.lead-page[data-lead-design="editorial"] .tm-card { background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 0 0 20px; border-bottom: 1px solid var(--border-subtle); }

/* ---- Card hover (data-team-hover on .tm-roster): make the team cards
   read as clickable. 4 effects: lift · zoom · ring · name. ---- */
.lead-page .tm-roster .tm-card { cursor: pointer; }
.lead-page .tm-roster .tm-card__photo { transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out); }
.lead-page .tm-roster .tm-card__name { transition: color var(--duration-base) var(--ease-out); }
@media (prefers-reduced-motion: no-preference) {
  .tm-roster[data-team-hover="lift"] .tm-card:hover .tm-card__photo { transform: translateY(-4px); box-shadow: var(--shadow-md); }
  .tm-roster[data-team-hover="zoom"] .tm-card:hover .tm-card__photo { transform: scale(1.03); box-shadow: var(--shadow-sm); }
}
.tm-roster[data-team-hover="lift"] .tm-card:hover .tm-card__photo { box-shadow: var(--shadow-md); }
.tm-roster[data-team-hover="zoom"] .tm-card:hover .tm-card__photo { box-shadow: var(--shadow-sm); }
.tm-roster[data-team-hover="ring"] .tm-card:hover .tm-card__photo { box-shadow: 0 0 0 2px var(--color-arch-purple); }
.tm-roster[data-team-hover="name"] .tm-card:hover .tm-card__name { color: var(--color-arch-purple); }
.tm-roster[data-team-hover="name"] .tm-card:hover .tm-card__photo { box-shadow: var(--shadow-sm); }
.lead-page[data-lead-design="editorial"] .tm-card:hover { box-shadow: none; }
.lead-page[data-lead-design="feature"] .tm-roster { background: transparent; }
.lead-page[data-lead-design="feature"] .tm-card { border-color: transparent; box-shadow: var(--shadow-sm); border-radius: var(--radius-xl); }

/* ============================================================
   Careers CTA — 3 designs via data-cta-design on .lead-cta:
   card (default) · band (lavender) · purple (bold gradient).
   ============================================================ */
/* Background is driven by --cta-bg (Background tweak); falls back to the
   lavender wash. On bold purple bands the section gets .is-dark, flipping
   copy to white. */
.lead-cta { padding: clamp(56px, 7vw, 96px) 0; background: var(--cta-bg, radial-gradient(100% 120% at 50% 0%, var(--purple-50) 0%, var(--color-draft-white) 70%)); }
.lead-cta__panel { text-align: center; padding: clamp(8px, 2vw, 20px) 0; }
.lead-cta__head { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.lead-cta__icon { display: inline-flex; align-items: center; justify-content: center; color: var(--color-arch-purple); }
.lead-cta__icon svg { width: clamp(34px, 4vw, 46px); height: clamp(34px, 4vw, 46px); }
.lead-cta__title { font-family: var(--font-display); font-weight: var(--fw-light); font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -0.02em; color: var(--color-arch-purple); margin: 0; }
.lead-cta__body { font-size: 17px; line-height: 1.65; color: var(--fg-secondary); margin: 18px auto 0; max-width: 52ch; text-wrap: pretty; }
.lead-cta__body a { color: var(--color-arch-purple); font-weight: var(--fw-semibold); text-decoration: none; border-bottom: 1px solid var(--purple-200); }
.lead-cta__body a:hover { border-bottom-color: var(--color-arch-purple); }

/* Bold purple bands flip copy to white. */
.lead-cta.is-dark .lead-cta__icon,
.lead-cta.is-dark .lead-cta__title { color: var(--color-draft-white); }
.lead-cta.is-dark .lead-cta__body { color: rgba(255, 255, 255, 0.92); }
.lead-cta.is-dark .lead-cta__body a { color: var(--color-draft-white); border-bottom-color: rgba(255, 255, 255, 0.6); }
.lead-cta.is-dark .lead-cta__body a:hover { border-bottom-color: var(--color-draft-white); }

/* ---- Scroll reveal (fade + rise) — the SINGLE animation workflow on this
   page. [data-reveal] is added by JS, so without JS / on failure elements
   stay visible. Reduced motion shows everything immediately. The old
   load-time tm-card-in fade from our-team.css is fully neutralised here so
   only this reveal runs. ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Kill the inherited load-fade (keyframe + its staggered delays). */
  .lead-page .tm-card { animation: none !important; animation-delay: 0s !important; }
  .lead-page[data-lead-design] [data-reveal] {
    opacity: 0;
    transform: translate(var(--reveal-x, 0px), var(--reveal-y, 12px));
    transition-property: opacity, transform;
    transition-duration: var(--reveal-dur, 320ms);
    transition-timing-function: var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1));
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  .lead-page[data-lead-design] [data-reveal].is-revealed { opacity: 1; transform: none; }
  /* Team grid cascades left-to-right within each 4-up row instead of the
     whole row popping in at once. Stagger composes with the tweakable
     --reveal-delay. */
  .lead-page[data-lead-design] .tm-roster .tm-card:nth-child(4n + 1) { transition-delay: calc(var(--reveal-delay, 0ms) + 0ms); }
  .lead-page[data-lead-design] .tm-roster .tm-card:nth-child(4n + 2) { transition-delay: calc(var(--reveal-delay, 0ms) + 70ms); }
  .lead-page[data-lead-design] .tm-roster .tm-card:nth-child(4n + 3) { transition-delay: calc(var(--reveal-delay, 0ms) + 140ms); }
  .lead-page[data-lead-design] .tm-roster .tm-card:nth-child(4n) { transition-delay: calc(var(--reveal-delay, 0ms) + 210ms); }
}