/* Closeout 06: process state, mobile menu containment, contact and footer only. */

.process-board { --process-progress: 1; }
.process-line { background: var(--pixel-idle); }
.process-line i {
  background: var(--pixel-active);
  opacity: 1;
  transform: scaleX(var(--process-progress));
  transition: transform 160ms steps(4, end);
  animation: none;
}
.process-board li > i {
  background: var(--pixel-idle);
  transition: background-color 120ms steps(2, end);
}
.process-board li[data-state="ACTIVE"] > i { background: var(--pixel-active); }
.process-board li:focus-visible { outline: 3px solid var(--pixel-active); outline-offset: 6px; }
.mobile-menu-backdrop[hidden] { display: none; }

.contact-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 1040px; margin-top: 32px; border: 1px solid var(--revision-line); background: var(--revision-line); }
.contact-links a { min-height: 76px; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 4px 12px; padding: 14px 18px; background: #fbfbf8; font-size: .86rem; font-weight: 700; }
.contact-links a:hover { background: #efefeb; }
.contact-links a:focus-visible { position: relative; z-index: 1; outline-color: var(--pixel-active); outline-offset: -3px; }
.contact-links span { grid-column: 1 / -1; color: #6c6c65; font: 700 .56rem/1 var(--mono); letter-spacing: .08em; }
.contact-links b { font-weight: 400; }
.contact-links i { color: var(--pixel-active); font-style: normal; }

.site-footer { min-height: 0; position: relative; display: block; padding: clamp(48px, 5vw, 72px) var(--v2-gutter) 0; overflow: hidden; background: #f4f4f1; }
.footer-main { width: min(100%, var(--v2-max)); display: grid; grid-template-columns: minmax(250px, .7fr) minmax(520px, 1.3fr); gap: clamp(48px, 8vw, 140px); margin: 0 auto; }
.footer-brand { display: grid; gap: 12px; }
.footer-brand strong { font-size: 1.15rem; }
.footer-brand p { margin: 0; color: #55554f; font-size: .92rem; line-height: 1.55; }
.footer-brand p span { display: block; color: inherit; font-size: inherit; }
.footer-brand small, .footer-meta small { color: #6f6f68; font: 700 .56rem/1.4 var(--mono); letter-spacing: .1em; }
.footer-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #cecec8; }
.footer-links a { min-height: 70px; display: grid; align-content: center; gap: 5px; border-bottom: 1px solid #cecec8; font: 700 .65rem/1.2 var(--mono); letter-spacing: .08em; }
.footer-links a:hover { color: var(--pixel-active); }
.footer-links a:focus-visible { outline-color: var(--pixel-active); outline-offset: -3px; }
.footer-links span { overflow-wrap: anywhere; color: #66665f; font: 400 .72rem/1.35 var(--v2-sans); letter-spacing: 0; }
.footer-meta { width: min(100%, var(--v2-max)); margin: 42px auto 24px; }
.footer-wordmark { width: min(100%, var(--v2-max)); margin: 0 auto -0.17em; color: #e7e7e2; font-size: clamp(4.8rem, 13vw, 12rem); font-weight: 900; line-height: .82; letter-spacing: -.075em; white-space: nowrap; }

@media (max-width: 1024px) {
  .site-header { z-index: 100; }
  .header-inner { position: relative; z-index: 30; }
  .mobile-menu { z-index: 20; right: var(--v2-gutter); bottom: auto; left: var(--v2-gutter); max-height: calc(100dvh - var(--v2-header) - 20px); overflow-y: auto; border: 1px solid var(--v2-black); background: #f7f7f4; overscroll-behavior: contain; }
  .mobile-menu-backdrop { position: fixed; z-index: 10; inset: var(--v2-header) 0 0; width: 100%; min-height: calc(100dvh - var(--v2-header)); padding: 0; border: 0; background: rgb(17 17 15 / 42%); cursor: pointer; }
}
@media (max-width: 760px) {
  .process-line i { transform: scaleY(var(--process-progress)); }
  .contact-links { grid-template-columns: 1fr; }
  .contact-links a { min-height: 64px; }
  .site-footer { padding: 40px var(--v2-gutter) 0; }
  .footer-main { grid-template-columns: 1fr; gap: 32px; }
  .footer-links { grid-template-columns: 1fr; }
  .footer-links a { min-height: 56px; }
  .footer-meta { margin-block: 32px 22px; }
  .footer-wordmark { max-width: 100%; margin-bottom: -0.1em; font-size: clamp(3.2rem, 18vw, 5rem); overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .process-line i, .process-board li > i { transition: none; }
}