/* Refinement 05: reference-led pixel system and final Hero weight convergence. */
:root {
  --pixel-canvas: 24px;
  --pixel-unit: 4px;
  --pixel-size-16: 16px;
  --pixel-size-24: 24px;
  --pixel-size-32: 32px;
  --pixel-size-48: 48px;
  --pixel-step-duration: 240ms;
  --pixel-step-count: 4;
  --pixel-node: #1d1d1a;
  --pixel-idle: #aaa9a2;
  --pixel-active: #f45724;
  --pixel-path: var(--pixel-active);
  --pixel-surface: #f1f1ee;
}

/* Public identity contains only the selected C symbol, wordmark and sub-identity. */
.brand-copy { gap: 3px; }
.brand-logo-c,
.route-layer,
.pixel-diagram svg { shape-rendering: crispEdges; }
.brand-logo-c { image-rendering: pixelated; }

/* Keep the key phrase intact without changing the locked Hero copy. */
.hero h1 > span { display: block; }
.hero h1 .hero-no-break { display: inline; white-space: nowrap; }

/* One finite four-step connection language; no decorative loop. */
.hero-stage[data-active-route="resume-flow"] [data-route-path="resume-flow"],
.hero-stage[data-active-route="work-console"] [data-route-path="work-console"],
.hero-stage[data-active-route="job-tracker"] [data-route-path="job-tracker"] {
  animation-duration: var(--pixel-step-duration);
  animation-timing-function: steps(var(--pixel-step-count), end);
  animation-iteration-count: 1;
}

/* Normalize small state marks to the same 4px grid. */
.work-tabs button::before,
.mobile-menu a::before,
.footer-live i {
  width: var(--pixel-unit);
  height: var(--pixel-unit);
}
.capability-grid button[aria-selected="true"]::before { width: var(--pixel-unit); }
.capability-grid button > i { width: calc(var(--pixel-unit) * 2); height: calc(var(--pixel-unit) * 2); }
.process-board li > i {
  width: var(--pixel-size-24);
  height: var(--pixel-size-24);
  border-width: var(--pixel-unit);
  outline-width: 2px;
}

/* Desktop and landscape-tablet Hero: quieter title, smaller stage, more air. */
@media (min-width: 901px) {
  .hero {
    min-height: clamp(653px, 85svh, 918px);
    padding-top: calc(var(--v2-header) + 24px);
    padding-bottom: 32px;
  }

  .hero-inner {
    width: min(90%, var(--v2-max));
    grid-template-columns: minmax(0, 40fr) minmax(0, 48fr);
    gap: clamp(64px, 6vw, 116px);
  }

  .hero h1 {
    max-width: 8.3em;
    font-size: clamp(2.83rem, 3.9vw, 4.44rem);
    line-height: 1.04;
  }

  .hero-lede { margin-top: 32px; }

  .hero-stage { min-height: clamp(372px, 39.8vw, 430px); }
}

@media (min-width: 1200px) {
  .hero h1 > span:nth-child(2) { white-space: nowrap; }
}

@media (max-width: 1024px) {
  .brand-copy { gap: 3px; }
}

@media (max-width: 760px) {
  .process-board li > i {
    width: calc(var(--pixel-unit) * 4);
    height: calc(var(--pixel-unit) * 4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-stage[data-active-route] .route-segment {
    animation: none;
    stroke-dashoffset: 0;
  }
}