/*
  Shared consulting-page design system.

  Page styles own backgrounds, illustrations, and page-specific media. This file
  owns the visual contract shared by consulting pages: type, rhythm, surfaces,
  cards, actions, and responsive grids.
*/

:root {
  --af-consulting-font: "Inter", sans-serif;
  --af-consulting-text: #ffffff;
  --af-consulting-text-muted: rgba(255, 255, 255, 0.78);
  --af-consulting-text-faint: rgba(255, 255, 255, 0.62);
  --af-consulting-surface: rgba(255, 255, 255, 0.055);
  --af-consulting-surface-strong: rgba(255, 255, 255, 0.08);
  --af-consulting-border: rgba(255, 255, 255, 0.14);
  --af-consulting-accent: rgba(184, 255, 129, 0.88);
  --af-consulting-warm-accent: rgba(255, 146, 72, 0.95);
  --af-consulting-radius: 8px;
  --af-consulting-content-width: 76rem;
  --af-consulting-gutter: 1rem;
  --af-consulting-section-gap: clamp(3rem, 7vw, 6rem);
  --af-consulting-content-gap: 1.25rem;
  --af-consulting-card-gap: 1rem;
  --af-consulting-card-padding: 1.1rem;
  --af-consulting-feature-padding: clamp(1.5rem, 3vw, 2.25rem);
  --af-consulting-page-top: 0;
  --af-consulting-page-bottom: 1rem;
}

.af-consulting-page--performance {
  --af-consulting-page-top: 8.25rem;
  --af-consulting-page-bottom: 5rem;
}

body.af-consulting-template .g-load-transition__container {
  animation: none;
  opacity: 1;
}

body.af-consulting-template .g-load-transition__overlay {
  display: none;
}

.g-core-content .af-consulting-page {
  color: var(--af-consulting-text);
  display: grid;
  font-family: var(--af-consulting-font);
  gap: var(--af-consulting-section-gap);
  margin: 0 auto;
  max-width: var(--af-consulting-content-width);
  padding: var(--af-consulting-page-top) var(--af-consulting-gutter) var(--af-consulting-page-bottom);
  width: 100%;
}

.g-core-content .af-consulting-page,
.g-core-content .af-consulting-page *,
.g-core-content .af-consulting-page *::before,
.g-core-content .af-consulting-page *::after {
  box-sizing: border-box;
}

.g-core-content .af-consulting-page :where(h1, h2, h3, p, ul, ol, figure) {
  margin: 0;
}

.g-core-content .af-consulting-page :where(
  .af-ai-section,
  .af-perf-section,
  .af-perf-video-section,
  .af-perf-final-cta
) {
  display: grid;
  gap: var(--af-consulting-content-gap);
}

.g-core-content .af-consulting-page :is(.af-ai-kicker, .af-perf-kicker) {
  color: var(--af-consulting-text-muted) !important;
  font-family: var(--af-consulting-font) !important;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.625;
  text-transform: uppercase;
}

.g-core-content .af-consulting-page :is(
  .af-ai-headline,
  .af-perf-title,
  .af-perf-heading
) {
  color: var(--af-consulting-text) !important;
  font-family: var(--af-consulting-font) !important;
  font-size: 2rem;
  font-weight: 600 !important;
  letter-spacing: 0;
  line-height: 1.3;
  max-width: 14ch;
}

.g-core-content .af-consulting-page :is(.af-ai-lede, .af-perf-lede) {
  color: var(--af-consulting-text-muted) !important;
  font-family: var(--af-consulting-font) !important;
  font-size: 1.2rem;
  line-height: 1.625;
  max-width: 48rem;
}

.g-core-content .af-consulting-page :is(.af-ai-note, .af-perf-note) {
  color: var(--af-consulting-text-faint) !important;
  font-family: var(--af-consulting-font) !important;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 48rem;
}

.g-core-content .af-consulting-page :is(.af-ai-split, .af-perf-hero) {
  align-items: start;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.g-core-content .af-consulting-page :is(
  .af-ai-proof-strip,
  .af-tier-grid,
  .af-opportunity-grid,
  .af-deliverable-grid,
  .af-capability-grid,
  .af-perf-proof-strip,
  .af-perf-outcome-grid,
  .af-perf-work-grid,
  .af-perf-proof-grid,
  .af-perf-deliverable-grid
) {
  display: grid;
  gap: var(--af-consulting-card-gap);
}

.g-core-content .af-consulting-page :is(
  .af-ai-proof,
  .af-tier-card,
  .af-opportunity-card,
  .af-deliverable-card,
  .af-capability-card,
  .af-perf-proof-metric,
  .af-perf-outcome-card,
  .af-perf-work-card,
  .af-perf-proof-card,
  .af-perf-deliverable,
  .af-perf-stack,
  .af-perf-video-section,
  .af-perf-final-cta,
  .af-inline-cta
) {
  background: var(--af-consulting-surface);
  border: 1px solid var(--af-consulting-border);
  border-radius: var(--af-consulting-radius);
  box-shadow: none;
}

.g-core-content .af-consulting-page :is(
  .af-ai-proof,
  .af-tier-card,
  .af-deliverable-card,
  .af-capability-card,
  .af-perf-proof-metric,
  .af-perf-outcome-card,
  .af-perf-work-card,
  .af-perf-proof-card,
  .af-perf-deliverable
) {
  padding: var(--af-consulting-card-padding);
}

.g-core-content .af-consulting-page :is(
  .af-perf-stack,
  .af-perf-video-section,
  .af-perf-final-cta,
  .af-inline-cta
) {
  padding: var(--af-consulting-feature-padding);
}

.g-core-content .af-consulting-page :is(
  .af-tier-card,
  .af-capability-card,
  .af-perf-outcome-card,
  .af-perf-work-card,
  .af-perf-proof-card,
  .af-perf-deliverable
) {
  display: grid;
  gap: var(--af-consulting-card-gap);
}

.g-core-content .af-consulting-page :is(
  .af-tier-card h3,
  .af-opportunity-card h3,
  .af-deliverable-card h3,
  .af-capability-card h3,
  .af-perf-outcome-card h3,
  .af-perf-work-card h3,
  .af-perf-proof-card h3,
  .af-perf-deliverable h3
) {
  color: var(--af-consulting-text) !important;
  font-family: var(--af-consulting-font) !important;
  font-size: 1.12rem;
  font-weight: 600 !important;
  line-height: 1.15;
}

.g-core-content .af-consulting-page :is(
  .af-tier-card p,
  .af-opportunity-card p,
  .af-deliverable-card p,
  .af-capability-card p,
  .af-perf-outcome-card p,
  .af-perf-work-card p,
  .af-perf-proof-card p,
  .af-perf-deliverable p,
  .af-ai-proof span,
  .af-perf-proof-metric span
) {
  color: rgba(255, 255, 255, 0.72) !important;
  font-family: var(--af-consulting-font) !important;
  font-size: 0.97rem;
  line-height: 1.5;
}

.g-core-content .af-consulting-page :is(.af-tier-card ul, .af-capability-card ul) {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: var(--af-consulting-font) !important;
  font-size: 0.92rem;
  line-height: 1.48;
  margin: 0;
  padding-left: 1.15rem;
}

.g-core-content .af-consulting-page :is(.af-ai-proof strong, .af-perf-proof-metric strong) {
  color: var(--af-consulting-text) !important;
  display: block;
  font-family: var(--af-consulting-font) !important;
  font-size: 1.45rem;
  font-weight: 850;
  line-height: 1;
  margin-bottom: 0.65rem;
}

.g-core-content .af-consulting-page :is(.af-tier-card__meta, .af-perf-proof-card__tag) {
  color: var(--af-consulting-accent) !important;
  font-family: var(--af-consulting-font) !important;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.g-core-content .af-consulting-page :is(
  .af-deliverable-card__number,
  .af-perf-deliverable__number
) {
  color: var(--af-consulting-warm-accent) !important;
  font-family: var(--af-consulting-font) !important;
  font-size: 1.25rem;
  font-weight: 850;
  line-height: 1.05;
}

.g-core-content .af-consulting-page :is(
  .core-title-overlay__cta,
  .af-perf-button,
  .af-perf-link-button
) {
  align-items: center;
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: #000000 !important;
  display: inline-flex;
  font-family: var(--af-consulting-font) !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  justify-content: center;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  min-height: 3.05rem;
  padding: 0.9rem 1.4rem !important;
  text-align: center;
  text-decoration: none !important;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.g-core-content .af-consulting-page :is(
  .core-title-overlay__cta,
  .af-perf-button,
  .af-perf-link-button
):is(:hover, :focus-visible) {
  background: transparent !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.g-core-content .af-consulting-page :is(
  .core-title-overlay__cta,
  .af-perf-button,
  .af-perf-link-button
):focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}

.g-core-content .af-consulting-page :is(.af-ai-visual, .af-perf-hero__graphic) {
  border: 1px solid var(--af-consulting-border);
  border-radius: var(--af-consulting-radius);
  box-shadow: none;
  overflow: hidden;
}

.g-core-content .af-consulting-page .af-perf-video {
  aspect-ratio: 16 / 9;
  background: transparent;
  border: 0;
  border-radius: var(--af-consulting-radius);
  box-shadow: none;
  margin: 0;
  max-width: 100%;
  overflow: hidden;
  width: 100%;
}

.g-core-content .af-consulting-page .af-perf-video wistia-player {
  border-radius: var(--af-consulting-radius);
  display: block;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 45rem) {
  :root {
    --af-consulting-gutter: 2rem;
  }

  .g-core-content .af-consulting-page :is(.af-ai-kicker, .af-perf-kicker) {
    font-size: 1.3rem;
    line-height: 1.6;
  }

  .g-core-content .af-consulting-page :is(
    .af-ai-headline,
    .af-perf-title,
    .af-perf-heading
  ) {
    font-size: 2.45rem;
    line-height: 1.2;
  }

  .g-core-content .af-consulting-page :is(.af-ai-lede, .af-perf-lede) {
    font-size: 1.3rem;
    line-height: 1.6;
  }

  .g-core-content .af-consulting-page :is(
    .af-tier-card h3,
    .af-opportunity-card h3,
    .af-deliverable-card h3,
    .af-capability-card h3,
    .af-perf-outcome-card h3,
    .af-perf-work-card h3,
    .af-perf-proof-card h3,
    .af-perf-deliverable h3
  ) {
    font-size: 1.35rem;
  }

  .g-core-content .af-consulting-page :is(.af-ai-proof strong, .af-perf-proof-metric strong) {
    font-size: 2.25rem;
  }

  .g-core-content .af-consulting-page :is(
    .af-ai-proof-strip,
    .af-tier-grid,
    .af-opportunity-grid,
    .af-capability-grid,
    .af-perf-proof-strip,
    .af-perf-outcome-grid,
    .af-perf-work-grid,
    .af-perf-proof-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .g-core-content .af-consulting-page :is(.af-deliverable-grid, .af-perf-deliverable-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .g-core-content .af-consulting-page :is(.af-inline-cta, .af-perf-final-cta) {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .g-core-content .af-consulting-page .af-perf-video-section {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
  }
}

@media (min-width: 64rem) {
  .g-core-content .af-consulting-page :is(.af-ai-split, .af-perf-hero) {
    grid-template-columns: minmax(0, 1.1fr) minmax(21rem, 0.9fr);
  }

  .g-core-content .af-consulting-page :is(.af-opportunity-grid, .af-perf-outcome-grid, .af-perf-work-grid) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .g-core-content .af-consulting-page :is(.af-deliverable-grid, .af-perf-deliverable-grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .g-core-content .af-consulting-page :is(
    .af-deliverable-card:first-child,
    .af-deliverable-card:nth-child(4),
    .af-perf-deliverable:first-child,
    .af-perf-deliverable:nth-child(4)
  ) {
    grid-column: span 2;
  }
}

@media (max-width: 44.99rem) {
  .af-consulting-page--performance {
    --af-consulting-page-top: 7.25rem;
    --af-consulting-page-bottom: 4rem;
  }

  .g-core-content .af-consulting-page :is(.af-perf-actions, .af-perf-button, .af-perf-link-button) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .g-core-content .af-consulting-page :is(
    .core-title-overlay__cta,
    .af-perf-button,
    .af-perf-link-button
  ) {
    transition: none;
  }
}