/* Shared sizing and typography for the four service-page system diagrams. */
:is(.consulting-hero-visual, .google-hero-visual, .social-hero-visual, .analytics-hero-visual, .seo-hero-visual, .ai-hero-visual, .recruiting-hero-visual, .fractional-hero-visual, .audit-hero-visual) {
  min-height: 600px;
}

:is(.cs-scene, .ga-scene, .ps-scene, .an-scene, .seo-scene, .ai-scene, .rec-scene, .fcmo-scene, .aud-scene) {
  width: 620px;
  height: 600px;
  transform: translate(-50%, -50%) scale(.88);
}

@media (max-width: 1100px) {
  :is(.consulting-hero-visual, .google-hero-visual, .social-hero-visual, .analytics-hero-visual, .seo-hero-visual, .ai-hero-visual, .recruiting-hero-visual, .fractional-hero-visual, .audit-hero-visual) {
    min-height: 580px;
  }

  :is(.cs-scene, .ga-scene, .ps-scene, .an-scene, .seo-scene, .ai-scene, .rec-scene, .fcmo-scene, .aud-scene) {
    transform: translate(-50%, -50%) scale(.94);
  }
}

@media (max-width: 720px) {
  :is(.consulting-hero-visual, .google-hero-visual, .social-hero-visual, .analytics-hero-visual, .seo-hero-visual, .ai-hero-visual, .recruiting-hero-visual, .fractional-hero-visual, .audit-hero-visual) {
    width: calc(100% + 32px);
    min-height: 520px;
    margin-left: -16px;
  }

  :is(.cs-scene, .ga-scene, .ps-scene, .an-scene, .seo-scene, .ai-scene, .rec-scene, .fcmo-scene, .aud-scene) {
    width: 640px;
    height: 600px;
    transform: translate(-50%, -50%) scale(.62);
  }

  /* A wider coordinate plane creates visible gutters even while the cards drift. */
  :is(.cs-area-1, .ga-area-1, .ps-area-1, .an-area-1, .seo-area-1, .ai-area-1, .rec-area-1, .fcmo-area-1, .aud-area-1) {
    left: 0;
  }

  :is(.cs-area-3, .ga-area-3, .ps-area-3, .an-area-3, .seo-area-3, .ai-area-3, .rec-area-3, .fcmo-area-3, .aud-area-3) {
    right: 0;
  }

  :is(.cs-area-2, .ga-area-2) {
    left: 221px;
  }

  :is(.ps-area-2, .an-area-2, .seo-area-2, .ai-area-2, .rec-area-2, .fcmo-area-2, .aud-area-2) {
    left: 223px;
  }

  :is(.cs-activation, .ga-activation, .ps-activation) {
    top: 365px;
  }

  :is(.cs-outcomes, .ga-outcomes, .ps-outcomes) {
    top: 530px;
  }

  .an-outcomes {
    top: 400px;
  }

  :is(.seo-visibility, .ai-impact, .rec-decision, .fcmo-leadership, .aud-plan) {
    top: 400px;
  }

  :is(.cs-flow-1, .cs-flow-2, .cs-flow-3, .ga-flow-1, .ga-flow-2, .ga-flow-3, .ps-flow-1, .ps-flow-2, .ps-flow-3) {
    top: 340px;
  }

  :is(.cs-flow-2, .cs-flow-4, .ga-flow-2, .ga-flow-4, .ps-flow-2, .ps-flow-4) {
    left: 320px;
  }

  :is(.cs-flow-4, .ga-flow-4, .ps-flow-4) {
    top: 460px;
    width: 70px;
  }

  :is(.an-flow-1, .an-flow-3) {
    top: 280px;
    width: 165px;
  }

  .an-flow-1 {
    transform: rotate(44deg);
  }

  .an-flow-2 {
    top: 280px;
    left: 320px;
    width: 120px;
  }

  .an-flow-3 {
    transform: rotate(136deg);
  }

  :is(.seo-flow-1, .seo-flow-3, .ai-flow-1, .ai-flow-3, .rec-flow-1, .rec-flow-3, .fcmo-flow-1, .fcmo-flow-3, .aud-flow-1, .aud-flow-3) {
    top: 280px;
    width: 165px;
  }

  :is(.seo-flow-1, .ai-flow-1, .rec-flow-1, .fcmo-flow-1, .aud-flow-1) {
    transform: rotate(44deg);
  }

  :is(.seo-flow-2, .ai-flow-2, .rec-flow-2, .fcmo-flow-2, .aud-flow-2) {
    top: 280px;
    left: 320px;
    width: 120px;
  }

  :is(.seo-flow-3, .ai-flow-3, .rec-flow-3, .fcmo-flow-3, .aud-flow-3) {
    transform: rotate(136deg);
  }

  :is(.cs-card, .ga-card, .ps-card, .an-card, .seo-card, .ai-card, .rec-card, .fcmo-card, .aud-card) p {
    font-size: 18px;
    letter-spacing: .04em;
  }

  :is(.cs-card, .ga-card, .ps-card, .an-card, .seo-card, .ai-card, .rec-card, .fcmo-card, .aud-card) p span {
    font-size: 15px;
    line-height: 1.42;
  }

  :is(
    .cs-funnel i::after, .cs-ops-node, .cs-activation-label, .cs-metric small, .cs-metric em,
    .ga-query, .ga-measure-node, .ga-input-node, .ga-google-brand small, .ga-formats span, .ga-metric small, .ga-metric em,
    .ps-funnel i::after, .ps-measure-node, .ps-activation-label, .ps-metric small, .ps-metric em,
    .an-strategy-node, .an-track-node, .an-report-pill, .an-dashboard-title, .an-primary small, .an-stat small, .an-primary em,
    .seo-discovery-node, .seo-content-chip, .seo-authority-node, .seo-destinations span, .seo-visibility-heading small,
    .ai-strategy-node, .ai-ops-node, .ai-auto-node, .ai-impact-title,
    .rec-role-sheet::before, .rec-role-badge, .rec-score, .rec-score b, .rec-decision-title, .rec-candidate small, .rec-decision-notes span,
    .fcmo-road-node, .fcmo-donut::after, .fcmo-invest-label, .fcmo-team-node, .fcmo-leadership-title,
    .aud-track-node, .aud-funnel i::after, .aud-plan-title, .aud-priority small, .aud-priority-head b
  ) {
    font-size: 14px;
  }

  :is(.cs-platform strong, .ga-google-brand strong, .ps-platform strong) {
    font-size: 19px;
  }

  :is(.cs-metric strong, .ga-metric strong, .ps-metric strong, .an-primary strong) {
    font-size: 34px;
  }

  .an-stat b {
    font-size: 17px;
  }

  .seo-visibility-heading strong {
    font-size: 20px;
  }

  :is(.ai-impact-card strong, .fcmo-outcome strong, .aud-priority strong) {
    font-size: 15px;
  }

  .rec-candidate em {
    font-size: 13px;
  }

  .rec-candidate strong {
    font-size: 17px;
  }

  /* The first funnel label is long; preserve the full words at the shared type size. */
  .cs-funnel .cs-f1 {
    width: 184px;
  }

  .cs-funnel .cs-f2 {
    width: 132px;
  }

  .cs-funnel .cs-f3 {
    width: 82px;
  }

  .cs-funnel i {
    height: 16px;
  }
}

@media (max-width: 380px) {
  :is(.cs-scene, .ga-scene, .ps-scene, .an-scene, .seo-scene, .ai-scene, .rec-scene, .fcmo-scene, .aud-scene) {
    transform: translate(-50%, -50%) scale(.55);
  }
}

@media (max-width: 340px) {
  :is(.cs-scene, .ga-scene, .ps-scene, .an-scene, .seo-scene, .ai-scene, .rec-scene, .fcmo-scene, .aud-scene) {
    transform: translate(-50%, -50%) scale(.51);
  }
}