/* ============================================================================
   OMNI Recruit · styles-4c.css
   Used-rules extraction from styles.css for index-4c.html (Tailwind handles
   layout; this carries only what 4c consumes): tokens, base reset, element
   typography, .btn family, and the 4-step apply form.
   Deliberately dropped vs styles.css:
   - .btn shimmer animation (banned: animated-gradient buttons)
   - h1/h2 em serif rule (Fraunces never loaded; em now inherits Inter Tight)
   - all sections dead in 4c (old hero/nav, browser mock, chips, CSS phone,
     .faq-item accordion, carousel, sticky CTA, placeholder sections)
   Changed: .apply-step-h em serif -> var(--font-display), same weight/red.
   ============================================================================ */
/* ============================================================================
   1. Tokens
   ============================================================================ */
:root {
  /* Color */
  --omni-red: #FF0F00;
  --omni-red-hover: #E50E00;
  --omni-red-soft: rgba(255, 15, 0, 0.12);

  /* Neutrals tinted toward OMNI red hue (~28deg) per impeccable: never pure black/white. */
  --ink:     oklch(14% 0.012 28);
  --ink-2:   oklch(19% 0.012 28);
  --ink-3:   oklch(24% 0.012 28);

  --navy:   #0B1B3A;
  --navy-2: #0F2347;

  --paper:   oklch(99% 0.004 28);
  --paper-2: oklch(98% 0.006 28);
  --paper-3: oklch(96% 0.008 28);

  --gray-1: #D9D9DC;
  --gray-2: #A3A3A8;
  --gray-3: #6E6E74;
  --gray-4: #3F3F44;

  --line: rgba(10, 10, 11, 0.08);
  --line-strong: rgba(10, 10, 11, 0.16);
  --line-on-dark: rgba(255, 255, 255, 0.10);

  /* Typography (Bricolage Grotesque display + Geist body, matches research synthesis) */
  --font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Label voice unified to Inter (Geist Mono retired sitewide); kept as --font-mono for existing refs */
  --font-mono: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-eyebrow: clamp(12px, 0.85vw, 14px);
  --fs-body:    clamp(18px, 1.2vw, 20px);
  --fs-lead:    clamp(22px, 1.7vw, 30px);
  --fs-h3:      clamp(28px, 2.6vw, 40px);
  --fs-h2:      clamp(40px, 5vw, 80px);
  --fs-h1:      clamp(56px, 6.5vw, 104px);
  --fs-fine:    clamp(13px, 0.85vw, 15px);

  --lh-tight: 0.98;
  --lh-snug:  1.12;
  --lh-base:  1.6;
  --lh-loose: 1.8;

  --tracking-display: -0.035em;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-eyebrow: 0.12em;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --space-11: 160px;

  /* Layout */
  --container-w: 1280px;
  --container-pad: clamp(20px, 4vw, 56px);
  --section-pad-y: clamp(80px, 9vw, 160px);

  --nav-h: 64px;
  --sticky-cta-h: 80px;

  /* Radius / shadow */
  --r-1: 6px;
  --r-2: 10px;
  --r-3: 16px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(10, 10, 11, 0.06), 0 2px 8px rgba(10, 10, 11, 0.04);
  --shadow-2: 0 8px 24px rgba(10, 10, 11, 0.08), 0 2px 6px rgba(10, 10, 11, 0.04);
  --shadow-3: 0 24px 64px rgba(10, 10, 11, 0.16), 0 4px 12px rgba(10, 10, 11, 0.06);
  --shadow-red: 0 12px 36px rgba(255, 15, 0, 0.32);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-base: 280ms;
  --t-slow: 600ms;
}


/* ---- Base reset (verbatim carryover) ---- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video, canvas, svg { display: block; max-width: 100%; height: auto; }
video { object-fit: cover; }

a { color: inherit; text-decoration: none; }

button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--omni-red); color: var(--paper); }

/* ---- Element typography (verbatim carryover, minus the serif em rule) ---- */
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  font-variation-settings: "wdth" 100, "opsz" 96;
}

h1 {
  font-size: var(--fs-h1);
  font-weight: 800;
  font-variation-settings: "wdth" 100, "opsz" 96;
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "wdth" 100, "opsz" 36;
}

p { margin: 0 0 var(--space-5); max-width: 65ch; }
p.lead {
  font-size: var(--fs-lead);
  line-height: 1.35;
  max-width: 56ch;
  color: var(--gray-4);
  font-weight: 400;
}
p.fine { font-size: var(--fs-fine); color: var(--gray-3); line-height: 1.55; }

/* ---- Buttons (verbatim carryover, shimmer + unused .btn-lg dropped) ---- */
.btn {
  --btn-bg: var(--omni-red);
  --btn-fg: var(--paper);
  --btn-bg-hover: var(--omni-red-hover);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: 16px 28px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-base) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-red); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--omni-red); outline-offset: 3px; }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bg-hover: var(--paper-2);
  border-color: var(--line-strong);
  box-shadow: none;
}
.btn-ghost:hover { box-shadow: var(--shadow-1); }

.btn-ghost.on-dark {
  --btn-fg: var(--paper);
  --btn-bg-hover: rgba(255, 255, 255, 0.08);
  border-color: var(--line-on-dark);
}

.btn-arrow svg { transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .btn-arrow svg { transform: translateX(3px); }
/* Text CTAs share the button arrow voice: arrow nudges, layout never shifts */
.link-arrow svg { transition: transform var(--t-fast) var(--ease-out); }
.link-arrow:hover svg { transform: translateX(3px); }
/* Footer tel/mailto links get a >=24px touch target without visual change */
.tap-target { display: inline-block; padding: 6px 0; }

/* ============================================================================
   Section 9 — Apply form (4-step Fathom-style)
   ============================================================================ */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.apply-wrap {
  max-width: 720px;
  margin: 32px auto 0;
}

.apply-form {
  position: relative;
  display: grid;
  gap: 48px;
}

.apply-honeypot { display: none; }

/* ---- Stepper ---- */
.apply-stepper {
  display: grid;
  gap: 18px;
}
.apply-step-labels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.apply-step-labels li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.apply-step-labels li.is-active { color: var(--paper); }
.apply-step-labels li.is-done   { color: var(--omni-red); }
.apply-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
  transition:
    background var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}
.apply-step-labels li.is-active .apply-step-num {
  background: var(--omni-red);
  color: var(--paper);
}
.apply-step-labels li.is-done .apply-step-num {
  background: var(--omni-red);
  color: var(--paper);
  position: relative;
}
@media (max-width: 640px) {
  .apply-step-labels li > span:not(.apply-step-num) { display: none; }
  .apply-step-labels { gap: 12px; }
}

.apply-progress {
  position: relative;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: visible;
}
.apply-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  background: var(--omni-red);
  border-radius: 999px;
  transition: width 360ms var(--ease-out);
}
.apply-progress-pct {
  position: absolute;
  top: -22px;
  right: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--omni-red);
}

/* ---- Stage + slide transitions ---- */
.apply-stage {
  position: relative;
  min-height: 480px;
  overflow: hidden;
}

.apply-step {
  position: absolute;
  inset: 0 0 auto 0;
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 24px;
  opacity: 0;
  transform: translateX(40px);
  transition:
    opacity 240ms var(--ease-out),
    transform 240ms var(--ease-out),
    visibility 0s linear 240ms;
  visibility: hidden;
  pointer-events: none;
}
.apply-step.is-active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s, 0s, 0s;
}
.apply-step.is-prev {
  transform: translateX(-40px);
}

.apply-step-head { display: grid; gap: 8px; margin-bottom: 8px; }
.apply-duration {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--omni-red);
}
.apply-step-h {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0;
  text-wrap: balance;
}
.apply-step-h em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--omni-red);
}

/* ---- Fields, inputs, errors ---- */
.apply-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .apply-grid { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
  .apply-field--wide { grid-column: span 2; }
}

.apply-field { display: grid; gap: 8px; }
.apply-field[hidden] { display: none; }
.apply-field label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.apply-optional {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 8px;
}

.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="tel"],
.apply-form textarea {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-2);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  transition:
    border-color var(--t-fast) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
}
.apply-form input:hover,
.apply-form textarea:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
}
.apply-form input:focus,
.apply-form textarea:focus {
  outline: none;
  border-color: var(--omni-red);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 4px rgba(255, 15, 0, 0.18);
}
.apply-form input.has-error,
.apply-form textarea.has-error {
  border-color: var(--omni-red);
  background: rgba(255, 15, 0, 0.06);
}
.apply-form textarea { resize: vertical; min-height: 96px; }
.apply-form ::placeholder { color: rgba(255, 255, 255, 0.5); }

.apply-error {
  display: block;
  min-height: 16px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--omni-red);
  font-weight: 500;
  line-height: 1.3;
}
.apply-error:empty { display: none; }
.apply-error--global {
  background: rgba(255, 15, 0, 0.08);
  border: 1px solid rgba(255, 15, 0, 0.32);
  border-radius: var(--r-2);
  padding: 12px 16px;
  margin: 0;
  font-size: 14px;
  text-align: center;
}
.apply-error--global[hidden] { display: none; }


/* ---- Pill radio groups ---- */
.apply-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.apply-pill {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.apply-pill input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.apply-pill span {
  display: inline-flex;
  align-items: center;
  padding: 11px 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out);
}
.apply-pill:hover span {
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--paper);
  background: rgba(255, 255, 255, 0.06);
}
.apply-pill input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(255, 15, 0, 0.32);
}
.apply-pill input:checked + span {
  background: var(--omni-red);
  border-color: var(--omni-red);
  color: var(--paper);
  box-shadow: 0 6px 18px rgba(255, 15, 0, 0.32);
}


/* ---- Chip multi-select ---- */
.apply-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.apply-chip {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.apply-chip input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
}
.apply-chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}
.apply-chip span::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}
.apply-chip:hover span { color: var(--paper); border-color: rgba(255, 255, 255, 0.32); }
.apply-chip input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(255, 15, 0, 0.32);
}
.apply-chip input:checked + span {
  background: rgba(255, 15, 0, 0.12);
  border-color: var(--omni-red);
  color: var(--paper);
}
.apply-chip input:checked + span::before {
  content: "\2713";
  background: var(--omni-red);
  border-color: var(--omni-red);
  color: var(--paper);
}
.apply-chip.is-disabled span { opacity: 0.4; cursor: not-allowed; }


.apply-fine {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin: 8px 0 0;
  max-width: none;
}


/* ---- Footer ---- */
.apply-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.apply-back { padding: 12px 20px; font-size: 14px; }
.apply-back svg { transition: transform var(--t-fast) var(--ease-out); }
.apply-back:hover svg { transform: translateX(-3px); }
.apply-next, .apply-submit { padding: 14px 26px; font-size: 15px; margin-left: auto; }
.apply-back[hidden] { display: none; }
.apply-next[hidden], .apply-submit[hidden] { display: none; }


/* ---- Thank-you state ---- */
.apply-thanks {
  display: grid;
  gap: 24px;
  text-align: center;
  padding: 64px 24px;
}
.apply-thanks[hidden] { display: none; }
.apply-thanks-mark {
  width: 72px;
  height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--omni-red);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--paper);
  box-shadow: 0 12px 36px rgba(255, 15, 0, 0.4);
  animation: thanks-pop 480ms var(--ease-out);
}
@keyframes thanks-pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
.apply-thanks h3 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin: 0;
}
.apply-thanks h3 .accent {
  display: block;
  color: var(--omni-red);
}
.apply-thanks p {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto;
  max-width: 48ch;
}
.apply-thanks-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}


@media (prefers-reduced-motion: reduce) {
  .apply-step,
  .apply-progress-fill,
  .apply-thanks-mark { transition-duration: 0.01ms !important; animation: none !important; }
}

/* Reduced-motion FAQ parity with the carryover sheet */
@media (prefers-reduced-motion: reduce) {
  .faq-body, .faq-icon { transition: none !important; }
}

/* FAQ icon base (carryover parity; the 4c accordion reuses this class) */
.faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  transition:
    transform var(--t-base) var(--ease-out),
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
  flex-shrink: 0;
  margin-top: -2px;
}

/* ============================================================================
   Section menu (mobile), signature row, leadership CTA alignment, phrase-keeps
   ============================================================================ */

/* Phrase-keep: SHORT place names / titles only (never releases at any
   width, unlike sm:whitespace-nowrap) - do not use on phrases over ~20ch */
.nwk { white-space: nowrap; }

/* Letter: signature caption. The broker headshot was removed 2026-08-06 (Justin's
   call); the old .sig-row flex indented this caption 64px (48px photo + 16px gap)
   so it never lined up with the script signature or the body copy above it. It is
   now a plain block starting at the letter's left margin. Do not reintroduce a
   leading element here without re-checking that alignment. */
.sig-caption { margin-bottom: 0; }

/* Leadership: both cards flex so the two CTAs share one bottom edge.
   Gap rides on the dl (not link padding) so the CTA hit area stays honest. */
#leadership article.lift {
  display: flex;
  flex-direction: column;
}
#leadership article.lift > div:last-child {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
#leadership article.lift > div:last-child dl {
  margin-bottom: 24px;
}
#leadership article.lift > div:last-child > a[href="#apply"] {
  margin-top: auto;
}

/* Mobile section menu (button hidden at md+, matches nav voice).
   --ease-quart is defined in the folded inline-block section later in this file. */
.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: background-color 0.25s var(--ease-quart), color 0.25s var(--ease-quart);
}
.menu-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.menu-btn .menu-ic-close { display: none; }
header.menu-open .menu-btn .menu-ic-open { display: none; }
header.menu-open .menu-btn .menu-ic-close { display: block; }

.mobile-menu {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  padding: 8px 2px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  padding: 12px 8px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.80);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color 0.2s var(--ease-quart);
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a:hover { color: #fff; }

/* Panel entrance matches the page's motion language (quart, small travel) */
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu:not([hidden]) { animation: menuIn 0.16s var(--ease-quart); }
  @keyframes menuIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Menu open forces a truly opaque nav surface, instantly (no fade beat),
   so the panel never floats on the hero video or lets the H1 ghost through */
header.menu-open {
  background: #0A0A0B;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: none;
}

@media (min-width: 768px) {
  .menu-btn, .mobile-menu { display: none; }
}

/* ============================================================================
   System section — figure family (approved 2026-07-18 lab fold)
   One hardware frame language: ink browser windows for the two webp shots,
   shared figure shadow, warm section drift, hover lift matching .lift voice.
   ============================================================================ */
:root {
  /* One shadow voice for every System figure (phone, funnel card, windows) */
  --fig-shadow:
    0 1px 2px rgba(10, 10, 11, 0.06),
    0 24px 48px -12px rgba(10, 10, 11, 0.22),
    0 64px 120px -48px rgba(10, 10, 11, 0.34);
}

/* Warm paper drift so the white canvas doesn't read flat; starts at the tone
   the letter section above sits on (letter #FAF9F7 -> compensation #FAF9F7) */
#system {
  background: linear-gradient(180deg, #fdfcfb 0%, #fcfbfa 55%, #faf9f7 100%);
}

/* Funnel card + any lifted figure adopts the shared shadow (phone keeps its
   own deeper device shadow) */
#system [data-fig-visual] .shadow-lift {
  box-shadow: var(--fig-shadow);
}

/* Browser window frame (Marketing, Agent Websites): ink chassis echoes the
   phone's black bezel; dots stay neutral so red remains punctuation */
.fig-browser {
  border-radius: 16px;
  background: #1a1a1d;
  padding: 0;
  box-shadow:
    var(--fig-shadow),
    0 0 0 1px rgba(10, 10, 11, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  overflow: hidden;
  transition: transform .4s var(--ease-quart), box-shadow .4s var(--ease-quart);
}
/* Same hover voice as the site's .lift cards (pointer-only) */
@media (hover: hover) and (pointer: fine) {
  .fig-browser:hover {
    transform: translateY(-4px);
    box-shadow:
      0 1px 2px rgba(10, 10, 11, 0.06),
      0 30px 56px -12px rgba(10, 10, 11, 0.26),
      0 72px 130px -48px rgba(10, 10, 11, 0.38),
      0 0 0 1px rgba(10, 10, 11, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.09);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fig-browser { transition: none; }
}
.fig-browser-bar {
  position: relative; /* anchors the centered URL pill */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  background: linear-gradient(180deg, #232327 0%, #1a1a1d 100%);
}
.fig-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3c3c42;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10);
}
.fig-url {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 20px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* exact center regardless of dots block width */
  width: min(260px, 46%);
}
.fig-url svg { width: 9px; height: 9px; color: rgba(255, 255, 255, 0.38); }
.fig-browser-body {
  position: relative;
  background: #fff;
  border-radius: 5px 5px 13px 13px;
  margin: 0 3px 3px;
  overflow: hidden;
}
.fig-browser-body img { border-radius: 0; }
/* Inset hairline holds the light screenshot edges against the white body */
.fig-browser-body::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 11, 0.08);
  pointer-events: none;
}
/* Dark captures invert the frame relationship: 8% ink is invisible on a
   near-black screen, and the white body would fringe at the rounded corners.
   14% white lands the same subtle edge the ink line gives light screenshots. */
.fig-body-dark { background: #0a0a0b; }
.fig-body-dark::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }

/* Marketing collage bakes in gray margins + dark corner swooshes; crop them
   asymmetrically (logo hugs the file's top-left) so the flyers/postcards
   render larger at the same footprint. Visible region x 3-95%, y 0-96%. */
.fig-crop-inset { aspect-ratio: 1459 / 952; }
.fig-crop-inset img {
  width: 108.7%;
  max-width: none;
  margin: 0 0 0 -3.3%;
}

/* Cap the windows so all four figures carry comparable visual mass
   (phone ~290px, funnel 430px, windows 600px) */
.fig-shot {
  position: relative;
  max-width: 600px;
  margin-inline: auto;
}

/* ============================================================================
   Folded from the former index.html inline <head> block (perfection pass,
   2026-07-25). Order matters: these rules must stay AFTER the 4c base.
   ============================================================================ */
  html { scroll-behavior: smooth; }
  :root { --ease-quart: cubic-bezier(.25,1,.5,1); --ease-quint: cubic-bezier(.22,1,.36,1); }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    color: #1A1A1D;
    background: #fff;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4, h5, .font-display {
    font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
  }
  .h-display { font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; }

  /* Header second-line accent: italic medium, inherits color (replaces the old gradient fill) */
  .accent-em { font-style: italic; font-weight: 500; }
  .accent-red { color: #FF0F00; }

  /* Section-label eyebrow — Inter uppercase (replaces the Geist Mono label voice sitewide) */
  .eyebrow-mono {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase;
  }
  /* Retarget the Tailwind mono utility to Inter too, so every label/numeral/dt matches */
  .font-mono { font-family: 'Inter', system-ui, sans-serif !important; }
  /* Let font-bold win over the eyebrow's own 600 (both are single-class; this 2-class rule outranks it) */
  .eyebrow-mono.font-bold { font-weight: 700; }
  /* Centered sections: center the paragraph BOX so styles-4c's `p{max-width:65ch}` doesn't left-pin
     it (a block box isn't centered by text-align, so the eyebrow drifted left of its h2 header). */
  .text-center > p, p.text-center { margin-inline: auto; }

  /* card lift on hover — contact hairline + soft ambient (one shadow voice sitewide) */
  .lift { transition: transform .4s var(--ease-quart), box-shadow .4s var(--ease-quart); }
  .lift:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(10,10,11,.05), 0 24px 56px -16px rgba(10,10,11,.22); }

  /* Broker letter — paper surface + handwritten signature */
  .letter-body p + p { margin-top: 1.35em; }
  .signature {
    font-family: 'Caveat', cursive;
    font-size: 46px; line-height: 1; font-weight: 600;
    transform: rotate(-2deg); display: inline-block;
  }

  /* entrance reveals — 3 variants + stagger delays (quint deceleration, <=16px travel) */
  .reveal       { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-quint), transform .7s var(--ease-quint); }
  .reveal-up    { opacity: 0; transform: translateY(16px); transition: opacity .75s var(--ease-quint), transform .75s var(--ease-quint); }
  .reveal-scale { opacity: 0; transform: scale(.97);       transition: opacity .6s var(--ease-quint), transform .6s var(--ease-quint); }
  .reveal.in, .reveal-up.in, .reveal-scale.in { opacity: 1; transform: none; }
  .d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }

  /* nav link underline */
  .nav-link { position: relative; }
  .nav-link::after {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: -2px; height: 2px;
    background: #FF0F00; border-radius: 2px; transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease-quart);
  }
  .nav-link:hover::after { transform: scaleX(1); }

  /* Primary button — solid brand red, no animated gradient; red-tinted depth on hover, press on active */
  .btn-primary {
    background: #D60D00;
    transition: background-color .25s var(--ease-quart), transform .25s var(--ease-quart), box-shadow .35s var(--ease-quart);
  }
  .btn-primary:hover { background: #B80B00; transform: translateY(-1px); box-shadow: 0 14px 32px -14px rgba(214,13,0,.55); }
  .btn-primary:active { background: #B80B00; box-shadow: 0 6px 14px -10px rgba(214,13,0,.5); }

  /* Branded keyboard focus, page-wide (outline follows each element's own radius) */
  a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 3px solid #FF0F00; outline-offset: 3px;
  }

  /* FAQ accordion — hover/open card states, icon goes brand-red, silky height + fade */
  details > summary { list-style: none; cursor: pointer; }
  details > summary::-webkit-details-marker { display: none; }
  #faq details { transition: border-color .3s var(--ease-quart), box-shadow .3s var(--ease-quart); }
  #faq details:hover { border-color: #D8D8DC; box-shadow: 0 1px 2px rgba(10,10,11,.04), 0 12px 28px -14px rgba(10,10,11,.12); }
  #faq details[open] { border-color: #D8D8DC; }
  #faq details:hover .faq-icon, #faq details[open] .faq-icon { border-color: #FF0F00; color: #FF0F00; }
  details[open] .faq-icon { transform: rotate(45deg); }
  .faq-body { overflow: hidden; opacity: 0; font-size: 18px; transition: max-height .45s var(--ease-quart), opacity .35s var(--ease-quart) .06s; }
  details[open] .faq-body { opacity: 1; }

  /* iPhone-style device frame: titanium chassis, tilt, ambient float */
  @keyframes phoneFloat {
    0%, 100% { transform: rotate(-2.5deg) translateY(0); }
    50%      { transform: rotate(-2.5deg) translateY(-10px); }
  }
  .phone-float { animation: phoneFloat 7s ease-in-out infinite; }
  @keyframes shadowBreath {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
    50%      { transform: translateX(-50%) scale(.93); opacity: .7; }
  }
  .phone-shadow { animation: shadowBreath 7s ease-in-out infinite; }
  .phone-tilt { transition: transform .5s var(--ease-quart); }
  .phone-chassis {
    background: linear-gradient(140deg, #6b6b76 0%, #3a3a42 18%, #1f1f25 45%, #1f1f25 65%, #3a3a42 85%, #5a5a64 100%);
  }
  .phone-glare {
    background: linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 22%, transparent 45%, transparent 70%, rgba(255,255,255,0.04) 100%);
  }

  /* Reduced motion */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .phone-float, .phone-shadow,
    .animate-pulse { animation: none !important; }
    .mask > span, .fade-load { animation: none !important; opacity: 1 !important; transform: none !important; }
    .wr { color: #fff !important; }
    /* retired */
    .scrolly-panel { transition: none !important; }
    .reveal, .reveal-up, .reveal-scale { opacity: 1 !important; transform: none !important; }
    .phone-tilt, #leadership article img, .lift { transition: none !important; }
    .faq-body { transition: none !important; opacity: 1 !important; }
  }

  /* v4 — hero masked line reveal (padding keeps descenders like the "g" in agent from clipping) */
  .mask { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.14em; }
  .mask > span { display: block; transform: translateY(112%); animation: lineUp 1.1s var(--ease-quint) forwards; }
  .mask.m2 > span { animation-delay: .14s; }
  @keyframes lineUp { to { transform: translateY(0); } }

  /* v4 — load-in fades */
  .fade-load { opacity: 0; transform: translateY(14px); animation: fadeLoad .9s var(--ease-quint) forwards; }
  .fl-1 { animation-delay: .45s; } .fl-2 { animation-delay: .62s; }
  .fl-3 { animation-delay: .80s; } .fl-4 { animation-delay: 1.05s; }
  @keyframes fadeLoad { to { opacity: 1; transform: none; } }

  /* v4 — statement word reveal */
  .wr { color: rgba(255,255,255,.38); transition: color .35s ease; }
  .wr.on { color: #fff; }

  /* v4 — scrollytelling stage */
  .scrolly-panel {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transform: translateY(26px) scale(.985);
    transition: opacity .55s var(--ease-quint), transform .55s var(--ease-quint);
    pointer-events: none;
  }
  .scrolly-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
  .scrolly-panel > div { width: 100%; }
  @media (min-width: 1024px) and (max-height: 840px) {
    .scrolly-panel > div:has(.phone-float) { scale: .85; }
  }
  @media (min-width: 1024px) {
    /* scrolly dimming retired 2026-07-26 (inline rows) */
  }

  /* v4 — fixed nav states + scroll progress */
  header.nav-solid { background: rgba(10,10,11,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.08); }

  /* The hero's bottom bar (Selectively recruiting / Scroll cue / 13 counties) was
     removed 2026-08-06 (Justin), taking the cueDrop animation with it. */

  /* Skip link */
  .skip { position:absolute; left:-9999px; top:0; }
  .skip:focus { left: 16px; top: 16px; background:#FF0F00; color:#fff; padding:8px 16px; border-radius:8px; z-index:100; }

  /* Fig. 03 phone — fit the full app UI inside the 19.5:9 screen; the timeline
     spacing was clipping the tab bar + home indicator past overflow-hidden. */
  .phone-chassis ol.space-y-4 { padding-top: 14px !important; padding-bottom: 10px !important; }
  .phone-chassis ol.space-y-4 > li + li { margin-top: 11px !important; }
  .phone-chassis .grid-cols-3 > button { padding-top: 9px !important; padding-bottom: 9px !important; }
  .phone-chassis .border-t.border-omni-gray2.flex { padding-top: 6px !important; padding-bottom: 6px !important; }

  /* Operating principles — ledger rows with mono indices (echoes the Fig. labels + card numerals) */
  .pr-list { border-top: 1px solid #EFEFF1; counter-reset: pr; }
  .pr-row  {
    padding: 28px 0; border-bottom: 1px solid #EFEFF1;
    display: grid; grid-template-columns: 56px 1fr;
    counter-increment: pr;
  }
  .pr-row::before {
    content: "0" counter(pr);
    grid-row: 1 / span 2;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px; font-weight: 500; letter-spacing: .1em;
    color: #D60D00; padding-top: 7px;
  }
  .pr-h    { grid-column: 2; font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; color: #0A0A0B; margin: 0; }
  .pr-b    { grid-column: 2; margin-top: 8px; color: #5C5C66; font-size: 18px; line-height: 1.55; max-width: 66ch; }
  @media (max-width: 639px) { .pr-row { grid-template-columns: 40px 1fr; } }

  /* Supporting copy floor: 16px for real content, 15px for spec lists */
  #compensation dl dd { font-size: 16px; }
  #system .sys-row ul { font-size: 15px; line-height: 1.5; }
  .bio-copy { font-size: 16px; }

  /* Photo-card finish: inner hairline holds the image edge on dark corners */
  .card-hairline { box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  article.lift img { transition-timing-function: var(--ease-quart); }

  /* Stats captions are section content: 16px floor */
  section[aria-label="OMNI roster track record"] .text-sm { font-size: 16px; line-height: 1.5; }

/* ============================================================================
   Perfection-pass overlay, folded 2026-07-25 (formerly styles-perfect.css).
   Must stay AFTER the inline-block section above — equal-specificity
   overrides depend on this order.
   ============================================================================ */

/* ---- 1 · Tokens (one regime; Tailwind + 4c values reconciled) ---- */
:root {
  /* red roles */
  --red: #FF0F00;            /* accent marks + focus rings only */
  --red-cta: #D60D00;        /* primary fills + text links (AA 5.36:1 on white) */
  --red-cta-hover: #B80B00;  /* formalized shipped hover (6.8:1) */
  --red-soft: #FFE9E7;

  /* surface ladders */
  --ink: #0A0A0B;
  --ink-2: #141416;          /* elevated on ink (inputs) */
  --char: #1A1A1D;           /* cards on ink */
  --paper: #FAF9F7;          /* the editorial paper (was markup-only) */
  --line-ink-card: #2A2A2C;

  /* motion (single home; --ease-quart/quint stay as aliases for 4c refs) */
  --t-fast: 180ms;
  --t-base: 280ms;
  --t-reveal: 600ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* (display-line-gap shim retired with the .94 hero stack, 2026-07-25) */
}

/* ---- 2 · Type scale (14 steps; census 59 → ~16 combos) ---- */

/* display-1 — hero H1: ORIGINAL metrics restored per Justin (2026-07-25,
   "I like the way [the hero] was spaced and sized in original") — the markup's
   own sizes + .h-display 1.12/-.035em apply untouched. The tighter .94 stack
   from the direction mock is retired; at 1.12 leading the g/OMNI ink
   clearance is ~13px at desktop, no shim needed. */

/* h2 — one step for every section title (60px drift retired, fork 2) */
main section h2.h-display {
  font-size: clamp(34px, 4.2vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.accent-em { letter-spacing: -0.025em; }

/* statement — promise word-reveal (holds ~6 lines 1024-1920) */
[data-word-reveal] {
  font-size: clamp(28px, 3.6vw, 50px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em !important;
}

/* figure — stat numerals (locked type; red-role + hairlines land in Wave 3) */
section[aria-label="OMNI roster track record"] .font-display.font-extrabold {
  font-size: clamp(44px, 5.2vw, 68px);
  line-height: 0.94;
  letter-spacing: -0.038em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* h3 — scrolly step titles + apply step/thanks headings */
#system .sys-row h3 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.06;
  letter-spacing: -0.028em;
}
.apply-step-h, .apply-thanks h3 {
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.06;
}

/* h4 — ledger rows + leadership names + commission card titles */
.pr-h { font-size: 26px; line-height: 1.2; font-weight: 700; }
#leadership article h3 { font-size: 26px; }

/* title-sm — FAQ questions, compensation dt */
#faq summary .font-display { font-size: 19px; line-height: 1.35; letter-spacing: -0.015em; }
#compensation dt { font-size: 19px; }

/* lead — hero lede + every section subhead (one spec, kills 19/20/21 drift).
   !important: element selectors cannot outweigh the mt-6 / lg:text-xl utility
   classes still in the markup; the utilities themselves get normalized at fold
   time and these flags come off then. */
main h2 + p {
  font-size: clamp(19px, 1.55vw, 21px) !important;
  line-height: 1.5 !important;
}
/* hero lede: original spacing/sizing restored per Justin (text-lg lg:text-[21px],
   leading-relaxed, max-w-xl from the markup apply untouched) */

/* body-lg — the letter + compensation editorial */
.letter-body, #compensation div.text-omni-char {
  font-size: clamp(19px, 1.5vw, 21px);
  line-height: 1.65;
}

/* body-sm — checklists rise 15 → 16 */
#system .sys-row ul { font-size: 16px; line-height: 1.55; }

/* caption — card subs + footer fine print rise to 14 */
section[aria-label="Service lines"] article .text-xs { font-size: 14px; }
footer .text-xs { font-size: 14px; }

/* label — THE eyebrow: 13px / +.1em / 600 (from 11px/.18em) */
.eyebrow-mono { font-size: 13px; letter-spacing: 0.1em; font-weight: 600; }

/* label-sm — 12px floor: indices, durations, license lines, fine print.
   (Figure-internal mock-UI text — phone screen, funnel SVG — is exempt:
   it is artwork of a product screen, not page text.) */
p[class~="text-[10px]"], .eyebrow-mono[class~="text-[10px]"] { font-size: 12px; letter-spacing: 0.08em; }
section[aria-label="Service lines"] article div.font-mono { font-size: 12px; letter-spacing: 0.08em; }
#leadership dt.font-mono, #leadership div.font-mono { font-size: 12px; }
.apply-duration { font-size: 12px; letter-spacing: 0.08em; }
#office .bg-omni-redSoft { font-size: 12px; }

/* ---- 3 · Spacing tiers + stack rule ---- */

/* band 64 — short numeric/utility bands */
section[aria-label="OMNI roster track record"], #commission {
  padding-block: clamp(48px, 6vw, 64px);
}
/* standard 96 — comprehension sections */
section[aria-label="Service lines"], #why-omni, #leadership, #office, #faq {
  padding-block: clamp(64px, 8vw, 96px);
}
#letter { padding-block: clamp(64px, 8vw, 96px) clamp(56px, 7vw, 80px); }
/* system's last scrolly step already carries ~78vh of centered air — short tail */
#system { padding-block: clamp(64px, 8vw, 96px) clamp(40px, 5vw, 56px); }
/* display 128 — conversion / statement moments */
section[aria-label="The OMNI promise"], section#apply {
  padding-block: clamp(80px, 10vw, 128px);
}
/* compensation: display tier below, standard above — the airy scrolly tail
   sits directly over it (Justin: "too much space above compensation") */
#compensation { padding-block: clamp(64px, 8vw, 96px) clamp(80px, 10vw, 128px); }
footer[role="contentinfo"] { padding-block: 64px 56px; }

/* stack: eyebrow binds tight to its title (16 → 10) */
main p.eyebrow-mono, #system .sys-row div.eyebrow-mono { margin-bottom: 10px; }
/* stack: title → subhead one value (20; !important beats mt-6, off at fold) */
main h2 + p { margin-top: 20px !important; }
/* letter heading block joins the 48px head-gap standard (visible eyebrow is a
   p since Wave 3; the real h2 is visually-hidden for the SR outline) */
#letter p.eyebrow-mono { margin-bottom: 48px; }

/* ---- 4 · Surface ladder (Wave-1 slice: apply inputs go solid ink-2) ---- */
.apply-form input[type="text"],
.apply-form input[type="email"],
.apply-form input[type="tel"],
.apply-form textarea {
  background: var(--ink-2);
}
.apply-form input:hover, .apply-form textarea:hover { background: #17171A; }
.apply-form input:focus, .apply-form textarea:focus { background: #17171A; }

/* ---- 5 · State sheet, Wave-1 slice ---- */

/* C1: the AA fix — every filled control on the money path moves to the CTA red
   (white on #FF0F00 = 3.95:1 fails; #D60D00 = 5.36:1).
   Scoped :not(.btn-ghost): re-declaring the custom props on bare .btn in this
   later sheet would hijack the ghost Back button into a solid primary. */
.btn:not(.btn-ghost) {
  --btn-bg: var(--red-cta);
  --btn-bg-hover: var(--red-cta-hover);
}
.btn:not(.btn-ghost):hover { box-shadow: 0 14px 32px -14px rgba(214, 13, 0, 0.55); }
.apply-pill input:checked + span {
  background: var(--red-cta);
  border-color: var(--red-cta);
  box-shadow: 0 6px 18px rgba(214, 13, 0, 0.32);
}
.apply-step-labels li.is-active .apply-step-num,
.apply-step-labels li.is-done .apply-step-num { background: var(--red-cta); }
.apply-chip input:checked + span::before { background: var(--red-cta); border-color: var(--red-cta); }
.apply-chip input:checked + span { border-color: var(--red-cta); }

/* C8: thanks badge — CTA red fill, neutral depth (red glow retired) */
.apply-thanks-mark {
  background: var(--red-cta);
  box-shadow: 0 1px 2px rgba(10, 10, 11, 0.2), 0 24px 48px -12px rgba(10, 10, 11, 0.5);
}

/* ST7: keyboard ring on pills/chips — solid ring (alpha ring read 1.5:1 on ink),
   instant (no fade riding the span's box-shadow transition) */
.apply-pill input:focus-visible + span,
.apply-chip input:focus-visible + span {
  box-shadow: 0 0 0 3px var(--red);
  transition-duration: 0s;
}

/* radii snap to the {6,10,16,pill} scale */
.apply-chip span { border-radius: 10px; }
.skip:focus { border-radius: 10px; }

/* ---- Wave 3: stats — the locked refined treatment ----
   Hairline anchors the row, cells divide, red narrows to the + only,
   units go small-cap gray. Figure type set in §type above. */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.stat-cell { border-top: 1px solid rgba(10, 10, 11, 0.14); padding: 22px 0 18px; }
@media (min-width: 768px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-cell { padding: 26px 34px 4px 0; }
  .stat-cell + .stat-cell { padding-left: 34px; border-left: 1px solid rgba(10, 10, 11, 0.08); }
}
.stat-u {
  color: var(--red);
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: -0.01em;
  transform: translateY(-0.62em);
  display: inline-block;
}
.stat-unit {
  font-size: 0.36em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #5C5C66;
  text-transform: uppercase;
  transform: translateY(-0.15em);
  display: inline-block;
  margin-left: 0.42em;
}
.stat-cap { max-width: 26ch; }

/* ---- Wave 3: scrolly step rhythm ---- */
@media (min-width: 1024px) {
}
/* one figure gap (was mt-4 / mt-6 drift; utilities normalize at fold) */
#system .sys-row [data-fig-visual] { margin-top: 20px !important; }
/* at lg the build script reparents figures into flex-centered stage panels,
   where residual mt utilities offset the visual ~4px between steps — zero it */
.scrolly-panel [data-fig-visual] { margin-top: 0 !important; }

/* ---- Wave 3: footer column balance (lg+ only: at 768 the ratios starve
   the Services column into mid-phrase breaks; equal md columns hold) ---- */
@media (min-width: 1024px) {
  footer[role="contentinfo"] .grid { grid-template-columns: 1.35fr 0.9fr 0.85fr 1.4fr; }
}

/* ---- Wave 4: hero Echo framing (locked at the 2026-07-25 direction gate) ----
   The video is a near-black logo animation: at .38 it was invisible. Raised to
   .72; at lg+ the mark is pushed right of the type column so the video's own
   wordmark ghosts the headline (Echo). The scrim protects only the left type
   column instead of banding the full height. Poster is now the t=14s frame of
   the same video, so pre-load, reduced-motion, and playing states match. */
/* Echo is a ≥1024 treatment: below it there is no transform to move the mark
   off the type, and .72 put the ghost wordmark behind the headline (measured
   1.39:1 on the red OMNI at 768). Sub-lg runs ambient .30 — with the dark
   video-frame poster, .38 left a ghost sliver at 2.88:1 behind OMNI; .30
   clears the 3:1 large-text floor (measured 3.2:1 worst-pixel). */
.hero-media { opacity: 0.30; }
@media (min-width: 1024px) {
  .hero-media { opacity: 0.72; transform: translateX(34%) scale(1.24); }
}
.hero-scrim { background:
  linear-gradient(95deg, rgba(10,10,11,.93) 0%, rgba(10,10,11,.86) 26%, rgba(10,10,11,.34) 58%, rgba(10,10,11,.10) 78%, rgba(10,10,11,.34) 100%),
  linear-gradient(to bottom, rgba(10,10,11,.62) 0%, rgba(10,10,11,0) 24%, rgba(10,10,11,.72) 86%, var(--ink) 100%); }

/* ---- Wave 4: marketing figure — bare plate (browser chrome retired) ----
   Static finish (non-clickable figures don't promise navigation). */
.fig-plate {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--fig-shadow);
}
.fig-plate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(10, 10, 11, 0.10);
  pointer-events: none;
}

/* ---- Wave 6: selection scope (C7 — red-on-red selection made text vanish) ---- */
.text-omni-red::selection, .stat-u::selection, .accent-red::selection { color: #fff; }
.text-omni-red::-moz-selection, .stat-u::-moz-selection, .accent-red::-moz-selection { color: #fff; }

/* ---- Wave 5: motion + micro-interaction ---- */

/* M3: the phone keeps its pointer tilt; the infinite bob + shadow breath retire */
.phone-float, .phone-shadow { animation: none !important; }

/* M4: unrevealed statement words rise from .38 to .55 (still read as "unlit") */
.wr { color: rgba(255, 255, 255, 0.55); }

/* ST2: text links carry a visible affordance (30% underline at rest, full on hover) */
main a.link-arrow {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(214, 13, 0, 0.3);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-fast) var(--ease-out);
}
main a.link-arrow:hover { text-decoration-color: var(--red-cta); }
/* The hero's secondary "Read the letter from our broker" link was removed 2026-08-06
   (Justin), so its underline treatment is gone with it. The nav still links to
   #letter; that is styled by .nav-link, not here. */

/* Hero vertical rhythm on phones (2026-08-06, Justin: "it's crowded, space it out
   so the last thing at the bottom of the screen is start the conversation").
   .hero-copy takes auto block margins so the leftover height splits evenly above and
   below the headline instead of pooling into one dead gap, which pushes .hero-cta to
   the bottom edge on its own. From 640px up both revert and the hero returns to the
   centred rhythm it had before (the CTA's old mt-9, 36px). */
.hero-copy { margin-block: auto; }
@media (min-width: 640px) {
  .hero-copy { margin-block: 0; }
  .hero-cta  { margin-top: 2.25rem; }
}

/* ST5: keyboard focus mirrors hover on the FAQ icon */
#faq details summary:focus-visible .faq-icon { border-color: var(--red); color: var(--red); }

/* ST6: scrollspy — the current section's nav link holds its underline */
.nav-link[aria-current="location"] { color: #fff; }
.nav-link[aria-current="location"]::after { transform: scaleX(1); }

/* ST8: non-clickable photo cards stop promising navigation */
section[aria-label="Service lines"] article.lift,
#office figure.lift { transition: none; }
section[aria-label="Service lines"] article.lift:hover,
#office figure.lift:hover { transform: none; box-shadow: none; }
section[aria-label="Service lines"] article img,
#office figure img { transition: none !important; }
section[aria-label="Service lines"] article:hover img,
#office figure:hover img { transform: none !important; }

/* A2: stepper is real buttons now (was aria-hidden li text) */
.apply-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.apply-step-btn:disabled { cursor: default; }
.apply-step-btn:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 4px; }
/* script.js sets cursor:pointer on the whole li; only the button is the control */
.apply-step-labels li { cursor: default !important; }
@media (max-width: 640px) {
  .apply-step-btn > span:not(.apply-step-num) { display: none; }
  /* 22px numerals alone fail the 24px tap floor — pad the hit area, no visual shift */
  .apply-step-btn { padding: 4px 2px; margin: -4px -2px; }
}

/* ST3: submit shows a working state (class set by script-perfect.js) */
.apply-submit.is-submitting { opacity: 0.75; }
.apply-submit.is-submitting svg { display: none; }
.apply-submit.is-submitting::after {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: submit-spin 0.7s linear infinite;
}
@keyframes submit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .apply-submit.is-submitting::after { animation: none; border-top-color: rgba(255, 255, 255, 0.35); }
}

/* ---- Wave 2: "what happens next" strip above the apply form ---- */
/* Label for the trust strip. Added 2026-08-06: the three "what happens next" rows sat
   straight under the "Four short steps" line and were being read as the form's four
   steps. This names them so the two counts stop competing. */
.apply-proc-label {
  max-width: 560px;
  margin: 40px auto -6px;
}
.apply-proc {
  list-style: none;
  margin: 14px auto 0;
  padding: 0;
  max-width: 560px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.apply-proc li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.apply-proc-n {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--red);
}
.apply-proc-t {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #fff;
}
.apply-proc-d {
  margin-left: auto;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 480px) {
  .apply-proc-d { margin-left: 26px; flex-basis: 100%; }
}

/* ============ 5r · redesign pass (2026-07-26): hover-lift rewire, rhythm fixes,
   accent-lt variant, 3-cell stats, 62vh scrolly, grouped FAQ list, artwork type floor ============ */
/* 1 · Re-wire the card hover lift (was permanently defeated by `.reveal-*.in { transform:none }`) */
.reveal.in.lift:hover, .reveal-up.in.lift:hover, .reveal-scale.in.lift:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .reveal.in.lift:hover, .reveal-up.in.lift:hover, .reveal-scale.in.lift:hover { transform: none; }
}
/* 2 · Operating-principles rows: kill the paragraph margin leak, restore 28/28 rhythm */
.pr-b { margin-bottom: 0; }
/* 3 · Service cards: reserve two caption lines so all four titles share a baseline */
.svc-cap { min-height: 2.7em; }
/* 4 · Photo hover zoom retired sitewide; the (fixed) lift is the one hover voice */
article.lift img, figure.lift img, #leadership article img { transition: none; }
.group:hover img.no-zoom { transform: none !important; }
/* 5 · Browser figure no longer hover-lifts (matches the static marketing plate) */
.fig-shot .fig-browser { transition: none; }
.fig-shot .fig-browser:hover { transform: none; }
/* 6 · URL pill gets a domain */
.fig-url-text { font: 500 10px/1 Inter, sans-serif; letter-spacing: .02em; color: rgba(255,255,255,.55); margin-left: 6px; }
/* 7 · Footer "Reach us" column: compensate .tap-target padding so first rows align */
.footer-reach { margin-top: -6px; }
/* 8 · Header accent variant: weight/tone shift (rotation partner to accent-em / accent-red) */
.accent-lt { font-weight: 600; color: #5C5C66; }
/* 9 · Stats: three cells on desktop */
@media (min-width: 1024px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 10 · Scrolly pacing: 62vh steps instead of 78vh; slightly tighter mobile stack */
/* 2026-07-26: pinned scrolly stage retired. A stickied figure only aligns with its
   scrolling text for one instant; Justin wants figure and text parallel at every
   scroll position. Each system row is now an inline two-column grid on lg:
   text left, figure right, tops aligned, scrolling together. */
@media (min-width: 1024px) {
  #system .sys-row > .reveal-up {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    column-gap: clamp(3rem, 5vw, 5.5rem);
    align-items: start;
  }
  #system .sys-row > .reveal-up > * { grid-column: 1; }
  #system .sys-row > .reveal-up > [data-fig-visual] {
    grid-column: 2;
    grid-row: 1 / span 12;
    align-self: start;
    margin-top: 0;
  }
}
@media (max-width: 1023px) { #system .sys-row + .sys-row { margin-top: 3.5rem; } }
/* 11 · FAQ: grouped hairline list replaces the card wall */
.faq-group { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #D60D00; margin: 40px 0 4px; }
.faq-group:first-child { margin-top: 0; }
.faq-list details { border-bottom: 1px solid #EFEFF1; padding: 19px 2px; border-radius: 0; }
.faq-list details summary { cursor: pointer; list-style: none; }
.faq-list details summary::-webkit-details-marker { display: none; }
.faq-plus { color: #9A9AA3; font-weight: 400; flex: none; margin-left: 16px; transition: transform .3s var(--ease-quart, ease-out); }
.faq-list details[open] .faq-plus { transform: rotate(45deg); }
/* 12 · Phone artwork: legibility floor on chrome text */
.ph-9 { font-size: 9px; }
.ph-10 { font-size: 10px; }

/* ============ 5s · service deck + track record (2026-07-26, approved:
   candidate 1 treated hero panels + ink counter band) ============ */
.sdk { max-width: 88rem; margin: 0 auto; padding: 0 20px 9vh; }
.sdk-panel {
  position: sticky; min-height: 74vh; border-radius: 22px; overflow: hidden;
  display: flex; align-items: flex-end; color: #fff;
  box-shadow: 0 -18px 44px -28px rgba(10,10,11,.45);
}
.sdk-panel + .sdk-panel { margin-top: 9vh; }
.sdk-panel:nth-child(1) { top: 76px; }
.sdk-panel:nth-child(2) { top: 118px; }
.sdk-panel:nth-child(3) { top: 160px; }
.sdk-panel:nth-child(4) { top: 202px; }
.sdk-bg { position: absolute; inset: 0; }
.sdk-bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06) brightness(.72); }
.sdk-bg::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(75deg, rgba(10,10,11,.94) 0%, rgba(10,10,11,.72) 42%, rgba(10,10,11,.28) 100%); }
.sdk-ghost { position: absolute; top: 24px; right: 34px; font-family: 'Inter Tight', Inter, sans-serif;
  font-weight: 800; font-size: clamp(80px, 10vw, 170px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.22); }
.sdk-inner { position: relative; padding: clamp(28px, 4.5vw, 60px); max-width: 60rem; }
.sdk-pn { font-size: 13px; font-weight: 700; letter-spacing: .14em; color: #FF0F00; text-transform: uppercase; margin-bottom: 12px; }
.sdk-h { font-family: 'Inter Tight', Inter, sans-serif; font-weight: 800;
  font-size: clamp(34px, 4.6vw, 66px); letter-spacing: -.025em; line-height: 1.04; color: #fff; }
.sdk-body { margin-top: 14px; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: rgba(255,255,255,.78); max-width: 52ch; }
.sdk-meta { margin-top: 20px; font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
@media (max-width: 900px) {
  .sdk-panel { min-height: 64vh; }
  .sdk-panel:nth-child(n) { top: 70px; }
  .sdk-panel + .sdk-panel { margin-top: 5vh; }
  .sdk-ghost { top: 16px; right: 18px; font-size: 72px; }
}

.trk-grid { margin-top: 10px; display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) { .trk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trk-cell { padding: 30px 36px 6px 0; border-top: 1px solid rgba(255,255,255,.16); }
@media (min-width: 820px) { .trk-cell + .trk-cell { padding-left: 36px; border-left: 1px solid rgba(255,255,255,.09); } }
@media (max-width: 819px) { .trk-cell { padding-right: 0; } }
.trk-num { font-family: 'Inter Tight', Inter, sans-serif; font-weight: 800; letter-spacing: -.035em;
  font-size: clamp(58px, 6.8vw, 116px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.trk-u { color: #FF0F00; }
.trk-unit { font-size: .36em; font-weight: 700; color: rgba(255,255,255,.6); margin-left: .12em; }
.trk-cap { margin-top: 12px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,.6); }
.trk-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 12.5px; color: rgba(255,255,255,.42); max-width: 70ch; }

/* ============================================================================
   Hero H1 mobile line-lock (2026-07-27).
   Below sm the two .mask spans lose sm:whitespace-nowrap and wrap freely, so
   the second line broke to a 3rd line at 402px (iPhone 16 Pro) and the H1
   went to 4 lines at 375-393px. Headline must hold exactly 2 lines on every phone.
   46px is kept wherever it fits (>=428px); below that the size tracks the viewport.
   Divisor 8.3 must be >= the intrinsic width of the WIDER line at 1px font-size.
   40px = the px-5 gutters. Must stay after tailwind.css in the <head> to beat
   the text-[46px] utility.

   HARD REQUIREMENT (Justin, 2026-08-06): the H1 holds EXACTLY 2 lines at EVERY
   screen width. That is what this divisor exists to guarantee.

   2026-08-06: headline became "Built around the agent." / "Backed by OMNI."
   Line 1 governs, so the divisor moved 8.3 -> 9.85 (~2% margin over a measured
   9.649).

   MEASURE BY RENDERING, NOT BY PROBE. A hidden-span probe of line 1 reports
   10.16-10.28 because it applies the h1's weight 800 to the whole string. The
   real line is narrower: <em>agent</em> renders at weight 500 italic, and the
   true rendered ratio is 9.649 units per 1px of font-size. Sizing off the probe
   would have made the mobile H1 ~7% smaller than necessary. Take the ratio from
   an actual rendered .mask > span (width / computed font-size).

   Accepted cost: the mobile H1 is ~15% smaller than under the old headline
   (375px: 40.4px -> 34.0px). Justin was shown the tradeoff side by side and
   chose the longer line deliberately. Desktop is unaffected - this block is
   <640px only, and the >=640 regime was render-checked at 645px (60px font,
   line 1 = 579px against 605px available, holds).

   History: line 2 went "Powered by OMNI." (8.36) -> "This is OMNI." (5.97) ->
   "Backed by OMNI." (7.65). Line 1 was "Built for the agent." (8.2-8.3) until
   this change; note it always sat a hair over its own 8.3 divisor and still
   held, because the divisor already reserves the 40px gutters.

   If either line is reworded: measure BOTH, take the WIDER, add ~1% safety, and
   RENDER-CHECK at 320 / 360 / 375 / 393 / 402 / 430 / 639 rather than trusting
   the arithmetic. Line 1 and line 2 are each mirrored in the section aria-label
   and in a querySelector keyed to that exact aria-label (index.html ~line 1501)
   - change all three together or the hero scroll-spy stops finding its section.
   ============================================================================ */
@media (max-width: 639.98px) {
  .hero-copy h1.h-display { font-size: min(46px, calc((100vw - 40px) / 9.85)); }
  .hero-copy h1.h-display .mask > span { white-space: nowrap; }
}

/* ============================================================================
   Hero subhead line-lock (2026-08-06).
   Justin: "Licensed in New Jersey and Pennsylvania." on one line, "Rooted in
   South Jersey." on the next, full state names, at EVERY width. The <br> in the
   markup sets the split; these rules stop either line re-wrapping.

   Line 1 is the governing line at 20.141 units per 1px of font-size, so at the
   base 18px it renders 363px wide and needs a 403px viewport to fit inside the
   40px gutters. Below that the size has to track the viewport or line 1 wraps
   and the subhead becomes 3 lines. Divisor 20.54 = 20.141 + ~2% safety.

   Deliberately NOT using .nwk here: that class is documented for phrases under
   ~20ch and line 1 is 40ch. .nwk pins width with no size guarantee, which is
   exactly what caused the footer overflow fixed earlier today. This pairs the
   nowrap with a font-size that is guaranteed to fit instead.

   Cost: 13.6px at 320px, 16.3px at 375px, full 18px from ~403px up. That is
   below the usual 19-21px body floor, and is the accepted price of holding the
   two lines with full state names.
   ============================================================================ */
.hero-copy p.hero-sub > span { white-space: nowrap; }
@media (max-width: 639.98px) {
  .hero-copy p.hero-sub { font-size: min(18px, calc((100vw - 40px) / 20.54)); }
}

/* ============================================================================
   Header phrase-keep (2026-07-27). Companion to the hero lock above.
   Section headers keep their 34px/32px size on phones, so their longer lines
   legitimately wrap. The defect was WHERE they wrapped: the browser breaks at
   the last space that fits, which orphaned a single word on its own line
   ("Designed around your / business.", "We are not for every / agent.").
   .nwk pins the trailing phrase so the break lands one word-group earlier.
   Unlike Tailwind's sm:whitespace-nowrap this never releases, and unlike
   text-wrap: balance / pretty it is deterministic — those two fixed different
   subsets of these headers in Blink and would differ again in WebKit, which is
   what the phones actually run.
   Splits verified to hold down to a 295px viewport; see the header-audit skill.
   Reuses the existing .nwk defined above (~line 731) — no new class. Every
   phrase pinned here is under that rule's ~20ch ceiling; the longest is
   "your business." at 14.
   ============================================================================ */

/* Narrow-phone taper for the section headers, same idea as the hero lock.
   A phrase-keep cannot save a unit that has to stay whole: "One South Jersey
   roof." needs 322px and a 360px phone gives it 320px, and "South Jersey" is a
   proper noun that must not split. Two pixels, one orphan. So the size tapers
   below the width where the longest must-stay-whole unit stops fitting.
   Divisors are that unit's ratio +3%: h2 = "One South Jersey roof." (9.476),
   h3 = "Every listing goes live" (9.540). Both caps are the current sizes, so
   this is a no-op at 375px and above and only tapers on narrower phones.
   Selector must match "main section h2.h-display" above (0,1,3) or the clamp()
   floor there wins on specificity and the taper silently does nothing. */
@media (max-width: 639.98px) {
  main section h2.h-display { font-size: min(34px, calc((100vw - 40px) / 9.76)); }
  #system h3                { font-size: min(32px, calc((100vw - 40px) / 9.83)); }
}