/* JK7 Services — shared design system, v2 "fun" re-skin (Aug 2026)
   Restyle of the same multi-page site (talent marquee, 16-track voice bank,
   stat counters, contact form, nav tabs, .reveal) to match the colour/type/
   motion language of Joe's Claude Design company-profile deck at
   profile.jk7services.com. This is a re-skin, not a rebuild — structure,
   content and interactive JS are unchanged; almost everything below is new
   tokens + component surface treatment. See website-restyle-spec.md. */

:root {
  /* Near-black ground + light paper, per the deck — a deliberate reversal
     of the old light-ground/single-crimson Modernist system. */
  --ink: #0A0A0A;
  --ink-raised: #1C1C1C;
  --ink-raised-2: #2B2B2B;
  --paper: #F2F2F2;
  --paper-pure: #FFFFFF;

  --bg: var(--paper);
  --bg-raised: #FFFFFF;
  --bg-raised-2: #E9E9EA;
  --text: #0A0A0A;
  --text-muted: #6B6B70;
  --line: #E6E6E7;
  --line-strong: #D5D5D7;

  /* One saturated accent per practice — used as full-bleed card fills.
     Media's accent IS the sitewide primary/link colour (Joe's explicit
     choice: the deck's magenta wins over the old logo-sampled crimson). */
  --acc-talent: #FF6A00;
  --acc-training: #008C8C;
  --acc-media: #A30D4E;
  --acc-events: #D4AF37;
  --accent: var(--acc-media);
  --accent-contrast: #FFFFFF;

  /* Accent tints (~8%) for quote/testimonial cards on light ground. */
  --tint-orange: #FDE9DA;
  --tint-teal: #DDEFEF;
  --tint-magenta: #F6E3EB;
  --tint-gold: #F8EFD7;

  --font-display: 'Boldonse', 'Bricolage Grotesque', Manrope, sans-serif;
  --font-heading: 'Bricolage Grotesque', Manrope, sans-serif;
  --font-sans: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  /* Kept as an alias so label/tag rules below (still named *-mono in a few
     places) render in Manrope, not a monospace face — the deck has no
     monospace anywhere, labels are bold-uppercase Manrope. */
  --font-mono: 'Manrope', -apple-system, 'Segoe UI', sans-serif;

  /* Radius is the other half of the signature — cards/frames land on
     40–48px, pills/chips are fully round. Don't split the difference with
     the old system's 12–18px. */
  --r-card: 40px;
  --r-card-lg: 48px;
  --r-pill: 999px;

  --ease-fun: cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: light;
}

* { box-sizing: border-box; }
/* overflow-x:hidden lives on html, not body — WebKit (Safari, and every
   iOS browser under it) can break touch-drag on a horizontally-scrollable
   descendant (the talent/logo marquees) when the ancestor clipping it is
   body rather than html; Chrome/Firefox don't have this quirk either way. */
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Motion: pop / slidein / bloom, wired into the existing
   .reveal IntersectionObserver (see main.js) instead of a slide-triggered
   deck. Same easing/timings/stagger as the deck. ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pop     { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: none; } }
  @keyframes slidein { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
  @keyframes bloom   { from { opacity: 0; transform: scale(0.86); } to { opacity: 1; transform: none; } }
  @keyframes chip-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

  .reveal { opacity: 0; }
  .reveal.is-visible { animation: pop 0.55s var(--ease-fun) forwards; }
  .reveal.is-visible.reveal--slidein { animation-name: slidein; animation-duration: 0.5s; }
  .reveal.is-visible.reveal--bloom { animation-name: bloom; animation-duration: 0.6s; }
  .reveal.is-visible.reveal--pop2 { animation-delay: 0.09s; }
  .reveal.is-visible.reveal--pop3 { animation-delay: 0.18s; }

  .chip { opacity: 0; }
  .reveal.is-visible .chip {
    animation: chip-in 0.45s var(--ease-fun) forwards;
  }
  .reveal.is-visible .chip:nth-child(2) { animation-delay: 0.05s; }
  .reveal.is-visible .chip:nth-child(3) { animation-delay: 0.1s; }
  .reveal.is-visible .chip:nth-child(4) { animation-delay: 0.15s; }
  .reveal.is-visible .chip:nth-child(5) { animation-delay: 0.2s; }
  .reveal.is-visible .chip:nth-child(6) { animation-delay: 0.25s; }
  .reveal.is-visible .chip:nth-child(n+7) { animation-delay: 0.3s; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; }
  .chip { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Justified body copy, per Joe's explicit request — neat block edges
   instead of ragged line-breaks. text-wrap:pretty + hyphens:auto keep the
   word-gaps ("rivers") that justify can cause in narrow columns under
   control; single-line text (labels, tags, crumbs) is visually unaffected
   since justify only stretches wrapped lines, never a lone/last line. */
p {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}
/* Utility: keep a heading/line from wrapping on desktop, but let it wrap
   normally on narrow viewports where forcing one line would overflow.
   text-wrap is set explicitly alongside white-space - in current CSS,
   white-space is shorthand-adjacent to text-wrap, and a more specific rule
   setting text-wrap:balance elsewhere (e.g. .page-hero h1) silently wins
   over just the wrap-mode component of a plain "white-space:nowrap" rule,
   leaving the heading still wrapping despite nowrap being applied. */
.nowrap-desktop { white-space: nowrap !important; text-wrap: nowrap !important; max-width: none !important; }
@media (max-width: 760px) { .nowrap-desktop { white-space: normal !important; text-wrap: wrap !important; } }

.hero__lede, .section-head p, .testi-card p,
.together__grid p, .contact__license, .pillar__desc {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}
/* .company/.prose paragraphs sit in a wide (~54ch+) single column, the one
   context on this site where justify reads cleanly instead of creating the
   word-gap "rivers" that showed up in narrower cards — Joe asked for it
   back specifically here after the earlier sitewide justify removal. */
/* Explicit opt-in class, not a broad ".company p" selector — that also
   caught the .eyebrow heading and the short pull-quote inside the same
   section (both narrow/short text where justify creates the same bad
   word-gap "rivers" this was meant to avoid). */
.prose {
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
}

a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 64px);
}

img { max-width: 100%; }

/* ---------- Nav (real multi-page nav: active state + mobile menu) ---------- */
.nav-wrap {
  position: sticky;
  top: 12px;
  z-index: 30;
  max-width: 900px;
  margin: 0 auto;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: background-color 0.6s var(--ease-fun), border-color 0.6s var(--ease-fun),
              box-shadow 0.6s var(--ease-fun), backdrop-filter 0.6s var(--ease-fun);
}
/* Scroll-away nav: the FRAME recedes, the links do not.
   This used to be `opacity: 0.2` on .nav-wrap, but opacity on a parent applies
   to every child, which dropped the mobile tab strip to 1.28:1 contrast - a
   hard WCAG AA failure (PageSpeed audit, 3 Sep 2026). No text colour can pass
   AA at 0.2 opacity; even near-black needs >= 0.74. So the fade is now applied
   to the background, border and shadow only, and the links keep full contrast.
   Same visual intent, readable at every scroll position. */
.nav-wrap.is-faded {
  background: color-mix(in srgb, var(--bg) 18%, transparent);
  border-color: color-mix(in srgb, var(--line) 22%, transparent);
  box-shadow: none;
  backdrop-filter: blur(3px);
}
.nav-wrap.is-faded:hover,
.nav-wrap.is-faded:focus-within {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-color: var(--line);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  backdrop-filter: blur(10px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px;
}
.nav__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: none;
}
.nav__mark-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
  flex: none;
}
.nav__mark img { height: 14px; width: auto; display: block; }
.nav__mark-by {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 480px) {
  .nav__mark-icon { width: 28px; height: 28px; }
  .nav__mark img { height: 12px; }
  .nav__mark-by { display: none; }
}
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 26px);
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}
.nav__links a {
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.15s ease;
  white-space: nowrap;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--accent); }
.nav__cta {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 16px;
  font-size: 0.78rem;
  color: var(--text) !important;
}
.nav__cta:hover { border-color: var(--accent); color: var(--accent) !important; }

/* Mobile: no hamburger, no hidden dropdown — every page link sits in a
   permanently visible, horizontally scrollable tab strip directly under
   the logo bar, and both stay stuck to the top together while scrolling.
   Joe's explicit ask after the hamburger version tested poorly: people
   were scrolling past without ever discovering the other pages. */
.nav__tabs { display: none; }
@media (max-width: 860px) {
  /* Logo and the page-tab strip share one row - they used to stack (logo
     row, then a second row of tabs below), which read as two disconnected
     bars. Making .nav-wrap itself a flex row puts .nav (shrunk to just the
     logo, since .nav__links is hidden below) and .nav__tabs side by side. */
  .nav-wrap { display: flex; align-items: center; }
  .nav { padding: 6px 0 6px 14px; flex: none; }
  .nav .nav__links { display: none; }
  .nav__tabs {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    gap: 4px;
    overflow-x: auto;
    padding: 6px 18px 6px 5px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav__tabs::-webkit-scrollbar { display: none; }
  .nav__tabs a {
    flex: none;
    display: flex;
    align-items: center;
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 0.56rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    /* Darker than --text-muted (#6B6B70, 4.73:1) for headroom: 6.72:1 on the
       page ground, so the tabs stay legible over any hero backdrop. */
    color: #54545A;
  }
  /* Home trades its label for an icon - square-ish pill instead of a wide
     text one, so it takes noticeably less of the row than "HOME" did. */
  .nav__tabs a[aria-label="Home"] { padding: 7px 9px; }
  /* Small phones (the common case): tighten further so more of the strip
     is visible before it needs scrolling. */
  @media (max-width: 400px) {
    .nav { padding-left: 10px; }
    .nav__tabs { gap: 3px; padding-right: 14px; }
    .nav__tabs a { font-size: 0.52rem; padding: 5px 6px; }
    .nav__tabs a[aria-label="Home"] { padding: 6px 7px; }
  }
  .nav__tabs a[aria-current="page"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
  }
}

/* ---------- Waveform ---------- */
.wave { display: flex; align-items: center; gap: 3px; height: 46px; width: 100%; max-width: 420px; margin-inline: auto; }
.wave--full { max-width: none; margin-inline: 0; }
.wave i {
  display: block;
  flex: 1 1 0;
  min-width: 1px;
  max-width: 3px;
  height: var(--h);
  min-height: 3px;
  background: var(--text-muted);
  opacity: 0.6;
  border-radius: 2px;
  transition: height 0.15s ease;
}
.wave--dim i { opacity: 0.28; }
.wave--live i { animation: wave-pulse 1.1s ease-in-out infinite; animation-play-state: paused; }
.wave--live.is-playing i { animation-play-state: running; }
.wave--live i:nth-child(3n) { animation-delay: -0.15s; }
.wave--live i:nth-child(4n) { animation-delay: -0.3s; }
.wave--live i:nth-child(5n) { animation-delay: -0.45s; }
@keyframes wave-pulse {
  0%, 100% { transform: scaleY(0.55); }
  50% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wave--live i { animation: none; }
}

/* ---------- Hero (home) — dark ground, matching the deck's cover slide ---------- */
.hero {
  background: var(--ink);
  color: #fff;
  padding: clamp(32px, 5vw, 64px) 0 clamp(32px, 5vw, 56px);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  right: -8%; bottom: -30%;
  width: 46%; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--acc-events);
  opacity: 0.12;
  pointer-events: none;
}
.hero__grid { display: grid; gap: clamp(32px, 5vw, 56px); }
.hero__grid > * { min-width: 0; }
@media (min-width: 900px) {
  /* Text column carries most of the width; the photo is a smaller, capped
     accent rather than a co-equal column — it was overpowering the fold
     at 1.15fr/0.85fr with no max-width, especially on wide desktops. */
  .hero__grid { grid-template-columns: 1.7fr 1fr; align-items: center; }
}
/* Both co-founders as hero photos — side by side on desktop ("horizontal"
   per Joe), stacked with Joe first on mobile. Replaces the earlier single-
   photo hero + separate small avatar row, which read as "Kejal's image
   isn't showing" since her only photo was a 34px icon next to her name. */
.hero-photos {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .hero-photos { flex-direction: row; max-width: 420px; margin-left: auto; gap: 16px; }
}
.hero-photos__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.hero-photos__caption { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.hero-photos__caption .hero-founders__name {
  white-space: nowrap;
  text-align: center;
  font-size: 0.64rem;
  letter-spacing: 0.01em;
}
.hero-photos__caption .social-row { justify-content: center; }
.hero-photos__img {
  width: 100%;
  height: auto;
  /* Square, deck-radius corners — object-position is set per-photo inline
     since Joe marked opposite crop directions: trim off the top of Joe's,
     the bottom of Kejal's. */
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), 0 16px 32px -10px rgba(0,0,0,0.4);
}
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}
/* Gold reads fine against the dark hero ground but is too low-contrast on
   light paper — only override to gold inside dark sections. */
.hero .eyebrow { color: var(--acc-events); }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  text-wrap: balance;
  max-width: 15ch;
}
/* Hero is above the fold on every load, not scroll-triggered — plays the
   same pop/slidein/bloom entrance directly on load instead of waiting on
   the .reveal IntersectionObserver. */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: slidein 0.6s var(--ease-fun) both; }
  .hero .eyebrow { animation: pop 0.5s var(--ease-fun) both; }
  .hero__lede { animation: pop 0.55s var(--ease-fun) 0.08s both; }
  .hero .wave { animation: pop 0.55s var(--ease-fun) 0.14s both; }
  .hero__meta { animation: pop 0.55s var(--ease-fun) 0.2s both; }
  .hero-photos { animation: bloom 0.7s var(--ease-fun) 0.1s both; }
}
.hero h1 em { font-style: normal; color: var(--acc-events); }
.hero__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  color: #C7C7CA;
  max-width: 46ch;
  margin: 0 0 22px;
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero__meta span {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink-raised-2);
  padding: 8px 16px;
  border-radius: var(--r-pill);
}
.hero__meta span:first-child { background: var(--acc-events); color: var(--ink); }

/* ---------- Page hero (subpages) — full-bleed practice-accent card, per
   the deck's per-practice slide treatment (§ Talent/Training/Media/Events
   each get their own accent-fill "card" as the page's opening band). ---------- */
.page-hero {
  padding: clamp(28px, 4.5vw, 48px) 0;
  border-bottom: none;
}
.page-hero--talent, .page-hero--training, .page-hero--media, .page-hero--events {
  color: #fff;
  border-radius: 0 0 var(--r-card-lg) var(--r-card-lg);
}
.page-hero--talent { background: var(--acc-talent); }
.page-hero--training { background: var(--acc-training); }
.page-hero--media { background: var(--acc-media); }
.page-hero--events { background: var(--acc-events); color: var(--ink); }
.page-hero__crumb {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.page-hero--talent .page-hero__crumb, .page-hero--training .page-hero__crumb,
.page-hero--media .page-hero__crumb, .page-hero--events .page-hero__crumb { color: inherit; opacity: 0.75; }
.page-hero__crumb a { text-decoration: none; color: inherit; }
.page-hero__crumb a:hover { opacity: 0.7; }
.page-hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  max-width: 18ch;
  text-wrap: balance;
}
.page-hero h1 em { font-style: normal; font-weight: 800; }
.page-hero--events h1 em { color: var(--acc-media); }
.page-hero--training h1 em, .page-hero--media h1 em { color: var(--acc-events); }
.page-hero--talent h1 em { color: #3D3D3F; }
.page-hero__lede {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  max-width: 58ch;
  text-align: justify;
  text-wrap: pretty;
  hyphens: auto;
  margin: 0;
}
.page-hero--talent .page-hero__lede, .page-hero--training .page-hero__lede,
.page-hero--media .page-hero__lede { color: rgba(255,255,255,0.85); }
.page-hero--events .page-hero__lede { color: rgba(10,10,10,0.75); }

/* ---------- Section scaffolding ---------- */
section { padding-block: clamp(28px, 5vw, 56px); }
.section-head {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 18px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
@media (min-width: 860px) {
  .section-head { grid-template-columns: 1fr 1.4fr; align-items: end; }
}
.section-head h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--text);
}
.section-head h2 em { font-style: normal; color: var(--accent); }
.section-head p { color: var(--text-muted); margin: 0; max-width: 52ch; font-size: 1.02rem; }
.section-head--center { text-align: center; grid-template-columns: 1fr; justify-items: center; }
.section-head--center p { max-width: 60ch; }

/* ---------- Company / quote ---------- */
.company { border-top: 1px solid var(--line); }
.company__grid { display: grid; gap: 40px; }
.company__grid > * { min-width: 0; }
@media (min-width: 860px) { .company__grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; } }
.company p { font-size: 1.05rem; max-width: 54ch; }
.company p + p { margin-top: 1.1em; }
blockquote.pull { margin: 0; padding: 0; }
blockquote.pull p {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.4;
  margin: 0 0 18px;
  color: var(--text);
  max-width: 34ch;
}
blockquote.pull cite {
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Pillars ---------- */
.pillars { border-top: 1px solid var(--line); }
.pillar-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pillar {
  scroll-margin-top: 90px;
  background: var(--bg);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  gap: 24px;
  text-decoration: none;
  color: inherit;
}
.pillar > * { min-width: 0; }
@media (min-width: 860px) { .pillar { grid-template-columns: 0.85fr 1.6fr 0.9fr; gap: 40px; align-items: start; } }
.pillar__id { display: flex; align-items: center; gap: 14px; }
.pillar__icon { width: 40px; height: 40px; flex: none; color: var(--accent); }
.pillar__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.pillar h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  margin: 6px 0 0;
  color: var(--accent);
}
.pillar__desc { color: var(--text-muted); margin: 10px 0 0; max-width: 40ch; font-size: 0.98rem; }
.pillar__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 0.96rem; }
.pillar__list li { padding-left: 18px; position: relative; }
.pillar__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 1px;
  background: var(--line-strong);
}
.pillar__stat { border-left: 1px solid var(--line); padding-left: 24px; }
@media (max-width: 859px) {
  .pillar__stat { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 18px; }
}
.pillar__num {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  display: block;
}
.pillar__num-label { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--text-muted); max-width: 20ch; }

/* ---------- Stat counters (scroll-triggered count-up) ---------- */
.stats { border-top: none; }
.stat-row {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  padding-inline: 0;
}
@media (min-width: 700px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat-cell {
  background: var(--bg-raised);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 36px) clamp(18px, 2.5vw, 28px);
  text-align: center;
}
.stat-cell__num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-variant-numeric: tabular-nums;
  color: var(--acc-events);
  display: block;
}
.stat-cell__label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ---------- Scroll reveal: keyframes + stagger classes defined in the
   token layer at the top of this file, alongside the other motion tokens. */

/* ---------- Trusted strip (CSS-only marquee) ---------- */
.trusted { border-top: 1px solid var(--line); padding-block: clamp(28px, 4vw, 40px); }
.trusted__inner { display: flex; flex-direction: column; gap: 22px; }
.trusted__row { display: flex; align-items: center; gap: 24px; }
@media (max-width: 700px) {
  .trusted__row { flex-direction: column; align-items: stretch; gap: 12px; }
  .trusted__scroll { width: 100%; flex: none; }
}
.trusted__label {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--acc-talent);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  flex: none;
  white-space: nowrap;
}
.trusted__row:nth-child(2) .trusted__label { background: var(--acc-media); }
.trusted__row:nth-child(3) .trusted__label { background: var(--acc-media); }
.trusted__row:nth-child(4) .trusted__label { background: var(--acc-events); color: var(--ink); }
.trusted__row:nth-child(5) .trusted__label { background: var(--acc-training); }
/* Auto-scroll is now JS-driven (main.js autoScroller) rather than a CSS
   transform animation — that made the strip un-drag-gable, since a
   transformed track inside overflow:hidden isn't a real scroll container.
   overflow-x:auto here means native touch/trackpad/wheel drag works for
   free; main.js just nudges scrollLeft when the user isn't touching it. */
.trusted__scroll {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
}
.trusted__scroll::-webkit-scrollbar { display: none; }
.trusted__scroll:active { cursor: grabbing; }
.trusted__track { display: flex; width: max-content; }
.trusted__names { display: flex; align-items: center; flex: none; gap: 44px; padding-right: 44px; }
.trusted__names span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--text-muted);
  opacity: 0.8;
  white-space: nowrap;
}
.trusted__logo {
  height: 40px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
  background: #FFFFFF;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  -webkit-user-drag: none;
  user-select: none;
}
@media (max-width: 600px) {
  .trusted__logo { height: 32px; max-width: 130px; }
  .trusted__names span { font-size: 1.15rem; }
}

/* ---------- Testimonials — tinted pastel cards, per the deck's "What
   clients say" slide (each card a ~8% accent tint, no shared border grid). */
.testimonials { border-top: none; }
.testi-grid { display: grid; gap: 14px; padding-inline: 0; }
@media (min-width: 640px) { .testi-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .testi-grid { grid-template-columns: 0.7fr 1fr 1fr; }
  .testi-grid .testi-badge { grid-row: span 2; }
}
.testi-grid > * { background: var(--paper-pure); border-radius: var(--r-card); padding: clamp(24px, 3vw, 32px); margin: 0; }
.testi-grid > :nth-child(1) { background: var(--tint-gold); }
.testi-grid > :nth-child(2) { background: var(--tint-magenta); }
.testi-grid > :nth-child(3) { background: var(--tint-teal); }
.testi-grid > :nth-child(4) { background: var(--paper-pure); }
.testi-badge { display: flex; flex-direction: column; justify-content: center; gap: 6px; text-decoration: none; transition: opacity 0.15s ease; }
.testi-badge:hover { opacity: 0.75; }
.testi-stars { color: var(--acc-media); font-size: 1.1rem; letter-spacing: 0.1em; }
.testi-score { font-family: var(--font-heading); font-weight: 800; font-size: 2rem; font-variant-numeric: tabular-nums; }
.testi-count { font-size: 0.82rem; font-weight: 700; color: var(--text-muted); }
.testi-card p {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.5;
  margin: 0 0 14px;
}
.testi-card cite {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-style: normal;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.testi-card cite::before {
  content: "";
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--acc-media);
  flex: none;
}

/* ---------- Together / process ---------- */
.together { border-top: none; }
.together__grid { display: grid; gap: 14px; }
@media (min-width: 860px) {
  .together__grid { grid-template-columns: repeat(3, 1fr); gap: 14px; padding-inline: 0; }
  .together__grid > div { background: var(--bg-raised); border-radius: var(--r-card); padding: 28px; }
}
.together__grid > div { background: var(--bg-raised); border-radius: var(--r-card); padding: 24px; }
.together__grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .together__grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.together__icon { width: 30px; height: 30px; color: var(--accent); margin-bottom: 14px; }
.together__grid h4 { font-family: var(--font-sans); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.together__grid p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.together__grid--center h4, .together__grid--center p { text-align: center; }
.together__step {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--accent);
  margin: 0 0 8px;
}

/* ---------- Cards (services / curriculum) ---------- */
.card-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  border: none;
  background: var(--bg-raised);
  border-radius: var(--r-card);
  padding: clamp(22px, 3vw, 30px);
}
.card--photo { padding: 0; overflow: hidden; background: none; }
.card--photo .card__photo { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.card--photo .card__body { padding: clamp(18px, 2.4vw, 24px); background: var(--bg-raised); border-radius: 0 0 var(--r-card) var(--r-card); }
.card .card__tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--accent);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin: 0 0 12px;
}
.card h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.25rem;
  margin: 0 0 10px;
}
.card__title--classy {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 800;
  font-size: 1.3rem;
  margin: 0 0 10px;
  color: var(--accent);
}
.card p { margin: 0; color: var(--text-muted); font-size: 0.96rem; }
.card ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.86rem; }
.card ul li {
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--bg-raised-2);
  color: var(--text);
  font-weight: 700;
}
.card--photo ul li { background: var(--paper); }


/* ---------- Talent gallery ---------- */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 34px); }
.gallery-filter {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.gallery-filter:hover { border-color: var(--accent); color: var(--accent); }
.gallery-filter.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 560px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(5, 1fr); } }
/* Photo-forward casting-grid card (Backstage/casting-network style): the
   headshot fills the card, name/role sit in a caption strip below it —
   photo does the work, not an avatar-initial placeholder. */
.gallery-card {
  border: none;
  background: var(--bg-raised);
  border-radius: var(--r-card);
  overflow: hidden;
  display: block;
}
.gallery-card__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.gallery-card__caption { padding: 14px 16px; }
.gallery-card__cat {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 4px;
}
.gallery-card__name { font-size: 0.92rem; margin: 0; color: var(--text); font-weight: 600; }
.gallery-note {
  margin-top: 22px;
  font-size: 0.86rem;
  color: var(--text-muted);
  max-width: 60ch;
}

/* ---------- Contact form ---------- */
.contact-layout { display: grid; gap: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.contact-layout > * { min-width: 0; }
.form-field { display: grid; gap: 7px; margin-bottom: 18px; }
/* Honeypot - off-screen, not display:none (some bots specifically skip
   display:none/visibility:hidden fields and still fill everything else). */
.form-field--hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.form-field label {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-field input, .form-field select, .form-field textarea {
  font: inherit;
  font-size: 0.98rem;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 12px 18px;
  width: 100%;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--accent);
  outline: none;
}
.form-row { display: grid; gap: 16px; }
@media (min-width: 560px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  text-decoration: none;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  width: fit-content;
}
.form-submit:hover { opacity: 0.88; }
.form-submit:disabled { opacity: 0.5; cursor: default; }
.form-status { font-size: 0.88rem; margin-top: 12px; min-height: 1.4em; }
.form-status[data-state="ok"] { color: var(--accent); }
.form-status[data-state="error"] { color: var(--accent); }
.contact-side__block { margin-bottom: 28px; }
.contact-side__block h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
}
.contact-side__block a { text-decoration: none; }
.contact-side__block a:hover { color: var(--accent); }
.contact-side__block p { margin: 0 0 6px; color: var(--text-muted); font-size: 0.98rem; }

/* ---------- CTA band ---------- */
.cta-band { border-top: none; }
.cta-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(28px, 4vw, 40px);
  border: none;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-card-lg);
}
.cta-band h2 { font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.4rem); margin: 0; max-width: 40ch; white-space: nowrap; }
@media (max-width: 560px) { .cta-band h2 { white-space: normal; } }
.cta-band .btn { background: var(--acc-events); color: var(--ink) !important; }

/* ---------- Contact / footer CTA section — dark ground, matching the
   deck's closing slide, wraps the site footer into the same dark band. ---------- */
.contact { border-top: none; background: var(--ink); color: #fff; border-radius: var(--r-card-lg) var(--r-card-lg) 0 0; margin-top: 0; padding-top: clamp(10px, 1.6vw, 18px); }
.contact__grid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.contact h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  margin: 0;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
@media (max-width: 480px) { .contact h2 { white-space: normal; } }
.contact__links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; font-size: 1.02rem; }
.contact__links a { text-decoration: none; color: #C7C7CA; }
.contact__links a:hover { color: var(--acc-events); }
.contact__links-sep { color: #5A5A5D; }
.contact__license { margin-top: 22px; font-size: 0.82rem; color: #8E8E93; max-width: 60ch; text-align: center; white-space: nowrap; }
@media (max-width: 640px) { .contact__license { white-space: normal; } }
.contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--accent);
  color: var(--accent-contrast) !important;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  width: fit-content;
}
.btn:hover { opacity: 0.88; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ghost { background: none; color: #fff !important; border: 1px solid rgba(255,255,255,0.3); }
.btn--ghost:hover { border-color: var(--acc-events); color: var(--acc-events) !important; }

footer {
  border-top: 1px solid rgba(255,255,255,0.12);
  background: var(--ink);
  color: #8E8E93;
  padding: 32px clamp(20px, 5vw, 64px) 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
}
footer .foot__row { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: center; }
footer .foot__mark { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #FFFFFF; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.08); flex: none; }
footer .foot__mark img { height: 14px; width: auto; display: block; }
footer .foot__links { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }
footer .foot__links a { text-decoration: none; color: var(--acc-events); }
footer .foot__links a:hover { color: #fff; }
footer .foot__legal { font-size: 0.66rem; opacity: 0.6; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 14px; width: 100%; white-space: nowrap; }
@media (max-width: 640px) { footer .foot__legal { white-space: normal; } }

/* ---------- Scrollable voice-bank list variant (large language roster —
   capped height so it doesn't dominate the whole page) ---------- */
.voice-list--scroll {
  max-height: 560px;
  overflow-y: auto;
}

/* ---------- Talent / actor photo marquee (left-scrolling, category label
   only — JS-driven auto-scroll on a real scroll container, see main.js
   autoScroller; overflow-x:auto so touch/trackpad drag works natively) ---------- */
.talent-marquee {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 40px, black calc(100% - 40px), transparent);
}
.talent-marquee::-webkit-scrollbar { display: none; }
.talent-marquee:active { cursor: grabbing; }
.talent-marquee__track { display: flex; width: max-content; gap: 18px; }
.talent-marquee__item { flex: none; width: 190px; }
.talent-marquee__photo { width: 190px; height: 237px; object-fit: cover; border-radius: 28px; border: none; display: block; -webkit-user-drag: none; user-select: none; }
.talent-marquee__cat {
  display: inline-block;
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.64rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--acc-media);
  padding: 4px 12px;
  border-radius: var(--r-pill);
}

/* ---------- Testimonial highlight (home page — a slim 2-up strip, not
   the full multi-quote grid used elsewhere, so it stays "condensed" ---------- */
.testi-highlight { display: flex; flex-wrap: wrap; gap: 14px; padding-inline: 0; }
.testi-highlight > * { flex: 1 1 260px; background: var(--tint-magenta); border-radius: var(--r-card); padding: clamp(24px, 3vw, 32px); margin: 0; }
.testi-highlight > :nth-child(even) { background: var(--tint-teal); }

/* ---------- Voice Bank (marketplace-style rows — Voices.com/Voice123
   pattern: compact list, play button, language tags, no big client-name
   headline dominating the card) ---------- */
.voice-list {
  border: none;
  background: var(--bg-raised);
  border-radius: var(--r-card);
  overflow: hidden;
}
.voice-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.voice-row:last-child { border-bottom: none; }
.voice-row__btn {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-contrast);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.voice-row__btn svg { width: 15px; height: 15px; }
.voice-row__btn:hover { opacity: 0.88; }
.voice-row__meta { flex: none; width: 168px; min-width: 0; }
.voice-row__title { font-family: var(--font-heading); font-weight: 700; font-size: 0.98rem; margin: 0 0 5px; }
.voice-row__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.voice-tag {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: none;
  background: var(--bg-raised-2);
  color: var(--text-muted);
  white-space: nowrap;
}
.voice-row__wave { flex: 1; min-width: 0; }
.voice-row__time {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.7rem;
  color: var(--text-muted);
  flex: none;
  min-width: 4ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.voice-row .player__scrub { display: none; }
@media (max-width: 700px) {
  .voice-row { flex-wrap: wrap; }
  .voice-row__meta { width: auto; order: 1; }
  .voice-row__btn { order: 0; }
  .voice-row__wave { order: 2; flex-basis: 100%; margin-top: 4px; }
  .voice-row__time { order: 3; }
}

/* ---------- Compact practice tiles (home page — link out instead of
   repeating full pillar detail). Always filled with the practice's accent
   colour, matching the deck's per-practice cards — not a hover-only
   invert like the old Modernist system. ---------- */
.tile-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 700px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }
.tile {
  --tile-color: var(--accent);
  --tile-text: #fff;
  position: relative;
  background: var(--tile-color);
  color: var(--tile-text);
  border-radius: var(--r-card);
  padding: clamp(22px, 3vw, 30px) clamp(18px, 2.4vw, 24px);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.25s var(--ease-fun);
}
.tile--talent   { --tile-color: var(--acc-talent); }
.tile--training { --tile-color: var(--acc-training); }
.tile--media    { --tile-color: var(--acc-media); }
.tile--events   { --tile-color: var(--acc-events); --tile-text: var(--ink); }
.tile__icon { width: 30px; height: 30px; color: var(--tile-text); opacity: 0.9; }
.tile__tag {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tile-text);
  opacity: 0.8;
}
.tile h3 { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; margin: 2px 0 0; color: var(--tile-text); }
.tile p { margin: 0; color: var(--tile-text); opacity: 0.85; font-size: 0.88rem; }
.tile__link { margin-top: auto; padding-top: 10px; font-family: var(--font-sans); font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tile-text); }
.tile:hover { transform: translateY(-4px); }
/* Visible "tap here" cue — a click/tap prompt on each practice tile,
   nudging people to actually click through instead of just reading.
   A plain cursor-arrow glyph in the accent color, not an emoji — the
   hand emoji read as an off-brand WhatsApp-sticker look. */
.tile__tap {
  position: absolute;
  top: 16px; right: 16px;
  width: 16px; height: 16px;
  color: var(--tile-text);
  opacity: 0.5;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.tile:hover .tile__tap { opacity: 1; transform: scale(1.15); }

/* ---------- Founders (side-by-side cards, not stacked rows) — circle
   photos, per the deck's "Two people behind every brief" slide. ---------- */
.founders-grid { display: grid; gap: 40px; }
@media (min-width: 700px) { .founders-grid { grid-template-columns: 1fr 1fr; } }
.founder-card { display: flex; flex-direction: column; gap: 16px; }
.founder-card .avatar-placeholder { width: 100%; max-width: 180px; aspect-ratio: 1/1; border-radius: 50%; }
.founder-card__photo {
  width: 100%;
  max-width: 180px;
  height: auto;
  aspect-ratio: 1/1;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  background: var(--bg-raised);
}

/* ---------- Placeholder avatar (initials) for a bio not yet backed by a
   real photo — e.g. a co-founder photo still pending from Joe ---------- */
.avatar-placeholder {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  background: var(--bg-raised);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3rem;
}

/* ---------- Highlighted inline phrase (per Joe's request to draw the eye
   to the 4 named practices in running prose) */
.hl { color: var(--accent); font-weight: 800; text-decoration: none; }

/* ---------- Hero founder photo captions (name grouped with its own icons,
   directly under each photo — a separate row disconnected from the photos
   left it unclear whose icons were whose) ---------- */
.hero-founders__name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #C7C7CA;
  white-space: nowrap;
}

/* ---------- Social icon row (founder / co-founder links) ---------- */
.social-row { display: flex; gap: 10px; align-items: center; }
.social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--text-muted);
}
.social-row a:hover { border-color: var(--accent); color: var(--accent); }
.social-row svg { width: 15px; height: 15px; }
.hero-photos__caption .social-row a { border-color: rgba(255,255,255,0.25); color: #C7C7CA; }
.hero-photos__caption .social-row a:hover { border-color: var(--acc-events); color: var(--acc-events); }

/* Contextual cross-links between practice pages. Added Sep 2026 after the SEO
   audit found every page carried nav links only, with zero in-body links. */
.cross-links{padding:0 0 8px}
.cross-links__body{
  max-width:78ch;margin:0;padding:18px 22px;
  border-left:3px solid rgba(127,127,127,.28);
  font-size:.95rem;line-height:1.65;opacity:.88;
}
.cross-links__body a{text-decoration:underline;text-underline-offset:2px}

/* ------------------------------------------------------------------
   Contrast fixes | PageSpeed accessibility audit, 3 Sep 2026
   Lighthouse flagged three elements below the 4.5:1 WCAG AA threshold.
   Brand accent variables are deliberately left untouched: they are darkened
   here only where they sit behind white text, so the palette is unchanged
   everywhere else on the site.
   ------------------------------------------------------------------ */

/* Was: white on --acc-talent #FF6A00 = 2.87:1. Now 5.50:1. */
.trusted__label { background: #B34700; }

/* Was: white on --acc-training #008C8C = 4.09:1, just under AA. Now 5.92:1. */
.trusted__row:nth-child(5) .trusted__label { background: #00706F; }

/* --acc-media (7.71:1) and --acc-events with --ink (9.42:1) already pass. */

/* Was: 0.6 opacity resolving to #59595c on #0a0a0a = 2.83:1. Now 6.07:1.
   Explicit colour instead of opacity, so the value is auditable. */
footer .foot__legal { opacity: 1; color: #8E8E93; }

/* Justify reads fine in the wide columns it was designed for, but the same
   rule was inherited into narrow mobile cards, where justify has far fewer
   words per line to stretch and produces ugly "rivers" of whitespace
   between words. Left-align everywhere below the width where cards get
   that narrow - headings (h1-h4 etc.) aren't <p> tags so are untouched.
   Placed last in the file so it beats every earlier same-specificity
   justify rule at this viewport, regardless of source order above. */
@media (max-width: 640px) {
  p,
  .hero__lede, .section-head p, .testi-card p,
  .together__grid p, .contact__license, .pillar__desc,
  .page-hero__lede, .prose {
    text-align: left;
    hyphens: none;
  }
}