:root {
  color-scheme: dark;
  --ink: #f4f6fb;
  --muted: #aab3c5;
  --soft: #d5dbe8;
  --line: rgba(255, 255, 255, 0.14);
  --panel: rgba(13, 17, 28, 0.84);
  --panel-solid: #111623;
  --steel: #8a94ab;
  --accent: #ffb224;        /* safety amber — replaces --orange #ff6a21 */
  --accent-deep: #d18a06;   /* replaces --orange-deep */
  --accent-glint: #ffe3ad;  /* lightened amber for shimmer highlights */
  --route: #4fa3ff;         /* azure — replaces --teal #38d6bd */
  --green: #5fe39c;
  --page: #0a0d14;
  --band: #0e1220;
  --radius: 8px;
  --content-max: 2560px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  overflow-x: clip;
}

body::selection {
  background: rgba(255, 178, 36, 0.35);
}

img {
  display: block;
  max-width: 100%;
}

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

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

.site-shell {
  min-height: 100vh;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 13, 20, 0.22), var(--page) 720px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 120px);
}

.page-pad {
  width: min(var(--content-max), calc(100% - 80px));
  margin-inline: auto;
}

.topbar {
  position: fixed;
  z-index: 30;
  top: 18px;
  left: 50%;
  width: min(var(--content-max), calc(100% - 80px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 68px;
  padding: 12px 14px 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(10, 13, 20, 0.68);
  backdrop-filter: blur(18px);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.topbar.is-elevated {
  background: rgba(10, 13, 20, 0.92);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.35);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 800;
  font-size: 1.04rem;
  white-space: nowrap;
}

/* Brand mark — route line between two stops (origin square → destination
   diamond), twin of favicon.svg. */
.brand-mark {
  position: relative;
  flex: none;
  width: 31px;
  height: 31px;
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  border-radius: 7px;
  background: var(--page);
}

.brand-mark::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: var(--route);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.brand-mark span {
  display: none;
}

.brand-mark span:first-child,
.brand-mark span:last-child {
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

.brand-mark span:first-child {
  left: 4px;
  bottom: 4px;
  border-radius: 2px;
}

.brand-mark span:last-child {
  right: 4px;
  top: 4px;
  border-radius: 1px;
  transform: rotate(45deg);
}

.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2.4vw, 34px);
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 600;
}

.nav-links a,
.nav-login {
  transition: color 180ms ease;
}

.nav-links a:hover,
.nav-login:hover {
  color: var(--ink);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-login {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.94rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 800;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--accent);
  color: #161003;
  border-color: rgba(255, 255, 255, 0.08);
}

.button-primary:hover {
  background: #ffc14d;
}

.button-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  border-color: rgba(255, 255, 255, 0.22);
}

.button-secondary:hover {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.1);
}

.button-small {
  min-height: 42px;
  padding-inline: 16px;
  font-size: 0.9rem;
}

.full-width {
  width: 100%;
}

.hero {
  position: relative;
  min-height: calc(100svh - 58px);
  isolation: isolate;
  display: grid;
  align-items: center;
  padding: 124px 0 54px;
}

.hero-photo,
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 13, 20, 0.96) 0%, rgba(10, 13, 20, 0.9) 34%, rgba(10, 13, 20, 0.56) 64%, rgba(10, 13, 20, 0.36) 100%),
    linear-gradient(180deg, rgba(10, 13, 20, 0.18), rgba(10, 13, 20, 0.94) 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(520px, 0.9fr) minmax(380px, 480px);
  align-items: center;
  justify-content: space-between;
  gap: clamp(48px, 6vw, 120px);
}

.hero-copy {
  max-width: 820px;
}

.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: 0.79rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  max-width: 850px;
  margin-bottom: 20px;
  font-size: clamp(3.15rem, 5vw, 6rem);
  line-height: 0.94;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h2 {
  margin-bottom: 18px;
  font-size: clamp(2.2rem, 4.2vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h3 {
  margin-bottom: 8px;
  font-size: 1rem;
  line-height: 1.18;
}

.hero-lede,
.section-heading p,
.split-copy > p,
.reputation-copy p,
.contact-copy p {
  color: var(--soft);
  font-size: clamp(1.04rem, 1.7vw, 1.32rem);
  line-height: 1.55;
}

.hero-lede {
  max-width: 760px;
  margin-bottom: 28px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 30px;
}

.proof-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 760px;
}

.proof-strip div {
  min-height: 92px;
  padding: 17px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(10, 13, 20, 0.62);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
}

.proof-strip strong {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: clamp(1.45rem, 2.3vw, 2rem);
  line-height: 1;
}

.proof-strip span {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.28;
}

.match-console,
.search-panel,
.results-panel,
.booking-panel,
.profile-card,
.pricing-card,
.comparison-card,
.access-form {
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.match-console {
  position: relative;
  overflow: hidden;
  padding: 18px;
  animation: consoleFloat 6s ease-in-out infinite;
}

.match-console::before {
  position: absolute;
  content: "";
  inset: 0;
  pointer-events: none;
  border-top: 3px solid rgba(255, 178, 36, 0.85);
}

.console-top,
.panel-header,
.profile-top,
.console-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.console-label,
.panel-header span {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.console-top h2 {
  margin: 0;
  font-size: 1.36rem;
  line-height: 1.12;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(79, 163, 255, 0.36);
  border-radius: 999px;
  color: var(--route);
  background: rgba(79, 163, 255, 0.09);
  font-size: 0.77rem;
  font-weight: 900;
  white-space: nowrap;
}

.request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.request-meta span,
.credential-grid span {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  color: var(--soft);
  background: rgba(255, 255, 255, 0.055);
  font-size: 0.82rem;
  font-weight: 700;
}

.match-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.11);
}

.match-meter span {
  display: block;
  height: 100%;
  width: 78%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--green), var(--route));
  animation: fillMeter 2.4s ease both;
}

.worker-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.worker-row,
.candidate-row {
  display: grid;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.045);
}

.worker-row {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  min-height: 74px;
  padding: 11px;
  border-radius: var(--radius);
}

.worker-row.active {
  border-color: rgba(255, 178, 36, 0.46);
  background: rgba(255, 178, 36, 0.11);
}

.avatar,
.large-avatar {
  display: inline-grid;
  place-items: center;
  background: #1f2638;
  color: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-weight: 900;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 0.82rem;
}

.large-avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius);
  color: #071322;
  background: var(--route);
}

.worker-row h3,
.candidate-row h3,
.profile-top h3 {
  margin: 0 0 4px;
}

.worker-row p,
.candidate-row p,
.profile-top p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.worker-row strong,
.candidate-row span {
  color: var(--green);
  font-weight: 900;
}

.console-footer {
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--muted);
  font-size: 0.86rem;
}

.console-footer strong {
  color: var(--ink);
  text-align: right;
}

.ticker-section {
  position: relative;
  height: 58px;
  border-block: 1px solid rgba(255, 255, 255, 0.12);
  background: #0c101a;
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ticker-section:hover .ticker-track,
.ticker-section:focus-within .ticker-track {
  animation-play-state: paused;
}

.ticker-track {
  position: absolute;
  inset: 0 auto auto 0;
  display: flex;
  width: max-content;
  gap: 64px;
  padding: 18px 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  animation: ticker 35s linear infinite;
}

.ticker-track span {
  white-space: nowrap;
}

.section {
  padding-block: clamp(78px, 9vw, 128px);
}

.anchor-target {
  display: block;
  position: relative;
  top: -92px;
  visibility: hidden;
}

.intro-section,
.platform-section,
.pricing-section {
  background: var(--page);
}

.section-heading {
  max-width: 850px;
  margin-bottom: 38px;
}

.section-heading.center {
  margin-inline: auto;
  text-align: center;
}

.loop-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid rgba(255, 255, 255, 0.14);
}

.loop-step {
  min-height: 270px;
  padding: clamp(24px, 3vw, 36px);
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
}

.loop-step:last-child {
  border-right: 0;
}

.loop-step span {
  display: block;
  margin-bottom: 50px;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.14em;
}

.loop-step h3 {
  font-size: 1.45rem;
}

.loop-step p,
.feature-stack p,
.verification-rail p,
.pricing-card p,
.comparison-card li,
.profile-note,
.replacement-note {
  color: var(--muted);
  line-height: 1.55;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  min-height: 720px;
  padding-block: 0;
  border-block: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--band);
}

.split-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(28px, 4vw, 56px);
}

.split-media img {
  width: 100%;
  height: auto;
  max-height: 720px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow);
}

.split-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 90px);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.feature-stack {
  display: grid;
  gap: 22px;
  margin-top: 30px;
}

.feature-stack article {
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.feature-stack h3 {
  font-size: 1.25rem;
}

.product-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.25fr 0.9fr;
  gap: 16px;
  align-items: stretch;
}

.search-panel,
.results-panel,
.booking-panel,
.profile-card,
.pricing-card,
.comparison-card,
.access-form {
  padding: 22px;
}

.panel-header {
  min-height: 38px;
  margin-bottom: 18px;
}

.panel-header strong {
  color: var(--route);
  font-size: 0.86rem;
}

label {
  display: grid;
  gap: 8px;
  margin-bottom: 16px;
  color: var(--soft);
  font-size: 0.88rem;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  outline: 0;
  min-height: 48px;
  padding: 0 13px;
}

textarea {
  min-height: 112px;
  padding-top: 13px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(255, 178, 36, 0.7);
  box-shadow: 0 0 0 3px rgba(255, 178, 36, 0.16);
}

select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 13px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
}

.chip {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.chip.is-active {
  color: #071322;
  border-color: transparent;
  background: var(--route);
}

.candidate-table {
  display: grid;
  gap: 10px;
}

.candidate-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 80px;
  padding: 16px;
  border-radius: var(--radius);
}

.candidate-row:first-child {
  background: rgba(79, 163, 255, 0.11);
  border-color: rgba(79, 163, 255, 0.32);
}

.booking-timeline {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 8px 0 22px;
}

.booking-timeline div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--soft);
  font-weight: 800;
}

.booking-timeline span {
  width: 13px;
  height: 13px;
  border: 3px solid rgba(10, 13, 20, 0.9);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 1px rgba(95, 227, 156, 0.55);
}

.replacement-note,
.profile-note {
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.92rem;
}

.verify-section {
  background:
    linear-gradient(180deg, rgba(14, 18, 32, 1), rgba(10, 13, 20, 1));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.verification-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.verification-rail article {
  min-height: 270px;
  padding: 28px;
  background: #101626;
}

.verification-rail span {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 42px;
  border: 1px solid rgba(255, 178, 36, 0.48);
  color: var(--accent);
  font-weight: 900;
}

.verification-rail h3 {
  font-size: 1.28rem;
}

.reputation-section {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(340px, 520px);
  align-items: center;
  gap: clamp(28px, 5vw, 86px);
}

.reputation-copy {
  max-width: 680px;
}

.profile-card {
  background:
    linear-gradient(180deg, rgba(79, 163, 255, 0.1), rgba(255, 255, 255, 0.035)),
    var(--panel-solid);
}

.profile-top {
  justify-content: flex-start;
  margin-bottom: 24px;
}

.credential-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.reliability-score {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.reliability-score div {
  min-height: 96px;
  padding: 16px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
}

.reliability-score strong {
  display: block;
  margin-bottom: 7px;
  color: var(--green);
  font-size: 1.58rem;
  line-height: 1;
}

.reliability-score span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.24;
}

.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 16px;
}

.pricing-card,
.comparison-card {
  min-height: 345px;
}

.pricing-card {
  background: linear-gradient(180deg, rgba(255, 178, 36, 0.13), rgba(255, 255, 255, 0.04)), var(--panel-solid);
}

.price {
  margin: 16px 0;
  color: var(--ink);
  font-size: clamp(2.3rem, 5vw, 4.8rem);
  font-weight: 900;
  line-height: 0.95;
}

.comparison-card ul {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.comparison-card li {
  position: relative;
  padding-left: 24px;
}

.comparison-card li::before {
  position: absolute;
  content: "";
  left: 0;
  top: 0.66em;
  width: 9px;
  height: 9px;
  background: var(--accent);
}

.contact-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(360px, 540px);
  gap: clamp(26px, 5vw, 78px);
  align-items: start;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: #0c101a;
}

.access-form {
  box-shadow: none;
}

.bot-field {
  position: absolute;
  left: -100vw;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  min-height: 22px;
  margin: 14px 0 0;
  color: var(--green);
  font-weight: 800;
}

.form-status.is-error {
  color: #ffc98f;
}

.form-status a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.48);
  text-underline-offset: 3px;
}

.button:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.footer {
  display: grid;
  gap: 20px;
  padding-block: 34px;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
}

.footer p {
  margin: 0;
  max-width: 460px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  font-weight: 800;
}

.footer-disclaimer {
  max-width: none;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* Scroll motion v2 — reveal-up (default, blur-to-sharp), reveal-fade,
   reveal-scale, plus per-child stagger. Every hidden state is gated on the
   .js class so all content stays visible when scripts don't run (the
   noscript rule in each page covers the same ground twice over). */
.reveal {
  opacity: 1;
  transform: none;
}

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  transition: opacity 700ms ease, transform 700ms ease, filter 700ms ease;
}

.js .reveal-fade {
  transform: none;
  filter: none;
}

.js .reveal-scale {
  transform: scale(0.96);
  filter: none;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms ease, transform 600ms ease;
  transition-delay: calc(var(--stagger-i, 0) * 70ms);
}

.js .reveal-stagger > *:nth-child(2) {
  --stagger-i: 1;
}

.js .reveal-stagger > *:nth-child(3) {
  --stagger-i: 2;
}

.js .reveal-stagger > *:nth-child(4) {
  --stagger-i: 3;
}

.js .reveal-stagger > *:nth-child(5) {
  --stagger-i: 4;
}

.js .reveal-stagger > *:nth-child(n + 6) {
  --stagger-i: 5;
}

.js .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.delay-1 {
  transition-delay: 110ms;
}

.delay-2 {
  transition-delay: 190ms;
}

.delay-3 {
  transition-delay: 270ms;
}

.delay-4 {
  transition-delay: 350ms;
}

@keyframes consoleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes fillMeter {
  from {
    width: 22%;
  }
  to {
    width: 78%;
  }
}

@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }

  /* Decorative motion is removed outright; settled states stay on screen. */
  .hero-overlay::after,
  .hero-aurora::before,
  .hero-aurora::after,
  .h1-shimmer,
  .border-beam::after,
  .rb-pulse,
  .rb-ring,
  .rb-glow-outer,
  .rb-chip,
  .match-console {
    animation: none !important;
  }

  /* Reveal system: jump straight to fully visible, no waiting on observers. */
  .js .reveal,
  .js .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .js .trace-line {
    transform: none !important;
  }
}

/* Wide displays (>=1800px): one coherent type scale so the stretched layout
   fills the canvas instead of leaving small text marooned in whitespace.
   Two tiers — EDITORIAL copy (headlines/ledes) goes large; DASHBOARD/CARD/FORM
   UI gets a proportional, smaller bump so product mockups stay UI-scale but
   never look tiny next to the headlines. Laptop/tablet/mobile are unchanged. */
@media (min-width: 1800px) {
  /* --- Editorial: headings, ledes, section body --- */
  h1 {
    max-width: 16ch;
    font-size: clamp(9rem, 9.6vw, 12.9rem);
  }

  h2 {
    max-width: 22ch;
    font-size: clamp(6rem, 6.9vw, 9.3rem);
  }

  .eyebrow {
    margin-bottom: 22px;
    font-size: 1.05rem;
  }

  .hero-lede,
  .section-heading p,
  .split-copy > p,
  .reputation-copy p,
  .contact-copy p {
    font-size: clamp(1.98rem, 2.25vw, 2.58rem);
  }

  .hero-copy {
    max-width: 1040px;
  }

  .hero-lede {
    max-width: 940px;
  }

  .section-heading {
    max-width: 1180px;
    margin-bottom: 52px;
  }

  .loop-step p,
  .feature-stack p,
  .verification-rail p {
    font-size: 1.7rem;
  }

  .loop-step h3 {
    font-size: 2.5rem;
  }

  .verification-rail h3 {
    font-size: 2.2rem;
  }

  .feature-stack h3 {
    font-size: 2.1rem;
  }

  .proof-strip {
    max-width: 1040px;
  }

  .proof-strip strong {
    font-size: clamp(3rem, 3.45vw, 3.75rem);
    white-space: nowrap;
  }

  .proof-strip span {
    font-size: 1.12rem;
  }

  /* --- Nav, ticker, footer --- */
  .brand {
    font-size: 1.28rem;
  }

  .nav-links,
  .nav-login {
    font-size: 1.14rem;
  }

  .topbar {
    min-height: 84px;
  }

  .ticker-section {
    height: 74px;
  }

  .ticker-track {
    font-size: 1.16rem;
  }

  .footer {
    font-size: 1.18rem;
  }

  .footer-links {
    font-size: 1.18rem;
  }

  /* --- Buttons --- */
  .button {
    min-height: 60px;
    font-size: 1.18rem;
  }

  .button-small {
    min-height: 52px;
    font-size: 1.05rem;
  }

  /* --- Dashboard / card UI: proportional medium bump --- */
  .console-label,
  .panel-header span {
    font-size: 1.02rem;
  }

  .panel-header strong {
    font-size: 1.12rem;
  }

  .console-top h2 {
    font-size: 1.95rem;
  }

  .status-pill {
    min-height: 40px;
    font-size: 1rem;
  }

  .request-meta span,
  .credential-grid span {
    font-size: 1.05rem;
  }

  .worker-row h3,
  .candidate-row h3,
  .profile-top h3 {
    font-size: 1.4rem;
  }

  .worker-row p,
  .candidate-row p,
  .profile-top p {
    font-size: 1.12rem;
  }

  .worker-row strong,
  .candidate-row span {
    font-size: 1.34rem;
  }

  .avatar {
    font-size: 1.05rem;
  }

  .booking-timeline div {
    font-size: 1.14rem;
  }

  .console-footer {
    font-size: 1.12rem;
  }

  .replacement-note,
  .profile-note {
    font-size: 1.14rem;
  }

  .reliability-score strong {
    font-size: 2.4rem;
  }

  .reliability-score span {
    font-size: 1.04rem;
  }

  /* --- Pricing cards --- */
  .pricing-card h3,
  .comparison-card h3 {
    font-size: 2.2rem;
  }

  .pricing-card p,
  .comparison-card li {
    font-size: 1.5rem;
  }

  .price {
    font-size: clamp(3.4rem, 5vw, 6rem);
  }

  /* --- Access form --- */
  label {
    font-size: 1.18rem;
  }

  input,
  select,
  textarea {
    min-height: 62px;
    font-size: 1.2rem;
  }

  textarea {
    min-height: 168px;
  }

  .chip {
    min-height: 46px;
    font-size: 1.06rem;
  }

  .form-status {
    font-size: 1.14rem;
  }
}

@media (max-width: 1050px) {
  .topbar {
    position: absolute;
  }

  .nav-links {
    display: none;
  }

  .hero-grid,
  .split-section,
  .product-grid,
  .reputation-section,
  .pricing-grid,
  .contact-section {
    grid-template-columns: 1fr;
  }

  .hero-grid {
    align-items: center;
  }

  .match-console {
    display: none;
  }

  .loop-grid,
  .verification-rail {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .split-media {
    padding-bottom: 0;
  }

  .split-copy {
    border-left: 0;
  }

  .product-grid {
    align-items: stretch;
  }
}

@media (max-width: 720px) {
  .page-pad {
    width: min(1180px, calc(100% - 28px));
  }

  .topbar {
    top: 10px;
    width: calc(100% - 20px);
    min-height: 62px;
    padding-left: 12px;
    gap: 8px;
  }

  .topbar-actions {
    gap: 8px;
  }

  .brand {
    gap: 8px;
    font-size: 0.98rem;
  }

  .brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 6px;
  }

  .brand-mark::before {
    width: 21px;
  }

  .brand-mark span:first-child,
  .brand-mark span:last-child {
    width: 5px;
    height: 5px;
  }

  .nav-login {
    display: none;
  }

  .button-small {
    min-height: 40px;
    padding-inline: 10px;
    font-size: 0.78rem;
  }

  .hero {
    min-height: calc(100svh - 58px);
    padding: 104px 0 32px;
  }

  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(10, 13, 20, 0.72) 0%, rgba(10, 13, 20, 0.86) 44%, rgba(10, 13, 20, 0.98) 100%),
      linear-gradient(90deg, rgba(10, 13, 20, 0.75), rgba(10, 13, 20, 0.4));
  }

  h1 {
    font-size: clamp(2.4rem, 10.5vw, 3rem);
    line-height: 1.02;
    text-wrap: auto;
  }

  h2 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .proof-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .hero-actions .button {
    width: 100%;
  }

  .proof-strip div {
    min-height: 78px;
    padding: 12px 10px;
  }

  .proof-strip strong {
    font-size: clamp(1.12rem, 5vw, 1.35rem);
  }

  .proof-strip span {
    font-size: 0.72rem;
  }

  .worker-row {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .worker-row strong {
    grid-column: 2;
  }

  .console-top,
  .console-footer,
  .panel-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .console-footer strong {
    text-align: left;
  }

  .loop-grid,
  .verification-rail,
  .reliability-score {
    grid-template-columns: 1fr;
  }

  .loop-step {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  .loop-step:last-child {
    border-bottom: 0;
  }

  .split-media {
    padding: 20px 20px 0;
  }

  .split-copy {
    padding: 42px 20px;
  }

  .candidate-row {
    grid-template-columns: 1fr;
  }

  .footer {
    align-items: flex-start;
    flex-direction: column;
    padding-block: 32px;
  }
}

@media (max-width: 360px) {
  .topbar {
    min-height: 58px;
  }

  .button-small {
    min-height: 38px;
    padding-inline: 9px;
    font-size: 0.74rem;
  }

  .hero {
    padding: 96px 0 26px;
  }

  .eyebrow {
    margin-bottom: 14px;
    font-size: 0.72rem;
  }

  h1 {
    font-size: clamp(2.12rem, 10vw, 2.35rem);
  }

  .hero-lede {
    margin-bottom: 22px;
    font-size: 0.96rem;
    line-height: 1.48;
  }

  .hero-actions {
    margin-bottom: 0;
  }

  .proof-strip {
    display: none;
  }
}

/* Path chooser (split layout) — replaces the marketplace mockup in the hero */
.hero-chooser {
  display: grid;
  gap: 14px;
  align-content: center;
}

.path-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 178, 36, 0.13), rgba(255, 255, 255, 0.04)), var(--panel-solid);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.path-card .eyebrow {
  margin-bottom: 4px;
}

.path-card h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.05;
}

.path-card p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

.path-card .button {
  margin-top: 4px;
}

/* Legal pages */
.legal-main {
  max-width: 820px;
  margin: 0 auto;
  padding-top: 132px;
  padding-bottom: 72px;
}

.legal-doc h1 {
  font-size: clamp(2rem, 4vw, 2.6rem);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.legal-updated {
  color: var(--steel);
  font-size: 0.9rem;
  margin: 0 0 28px;
}

.legal-doc h2 {
  font-size: 1.15rem;
  margin: 34px 0 10px;
}

.legal-doc p,
.legal-doc li {
  color: var(--soft);
  line-height: 1.65;
  font-size: 0.97rem;
}

.legal-doc ul {
  padding-left: 22px;
  margin: 10px 0 18px;
}

.legal-doc li {
  margin-bottom: 8px;
}

.legal-doc a {
  color: var(--route);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.form-legal {
  color: var(--steel);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 10px 0 0;
}

.form-legal a {
  color: var(--soft);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.demo-disclaimer {
  color: var(--steel);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 18px 0 0;
}

.price-note {
  color: var(--steel);
  font-size: 0.85rem;
  margin-top: -10px;
}

/* FAQ section */
.faq-list {
  max-width: 880px;
  display: grid;
  gap: 10px;
}

.faq-list details {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: var(--panel);
  padding: 0 18px;
}

.faq-list summary {
  cursor: pointer;
  padding: 16px 0;
  font-weight: 800;
  font-size: 1.02rem;
  list-style: none;
  position: relative;
  padding-right: 30px;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.3rem;
  font-weight: 800;
}

.faq-list details[open] summary::after {
  content: "–";
}

.faq-list details p {
  margin: 0 0 16px;
  color: var(--soft);
  line-height: 1.6;
}

.faq-list details a {
  color: var(--route);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Pricing tiers */
.pricing-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.pricing-featured {
  border-color: rgba(255, 178, 36, 0.55);
  box-shadow: 0 24px 70px rgba(255, 178, 36, 0.08);
}

.price-period {
  color: var(--steel);
  font-size: 1rem;
  font-weight: 700;
}

@media (max-width: 980px) {
  .pricing-tiers {
    grid-template-columns: 1fr;
  }
}

/* Routing lines — home base → market, per candidate */
p.routing-line {
  margin: 0 0 4px;
  color: var(--route);
  font-size: 0.85rem;
  font-weight: 800;
}

/* Locked-terms state */
.panel-header strong.is-locked {
  color: var(--green);
}

.status-pill.is-locked {
  align-self: flex-start;
  border-color: rgba(95, 227, 156, 0.4);
  color: var(--green);
  background: rgba(95, 227, 156, 0.08);
}

/* Problem band — slack books, open calls, the bait-and-switch */
.problem-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--band);
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.problem-card {
  min-height: 190px;
  padding: 26px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.035);
}

.problem-card strong {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  line-height: 1.08;
  text-wrap: balance;
}

.problem-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

/* Site-readiness badge callout (verification section) */
.readiness-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 16px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: var(--panel);
}

.readiness-callout p {
  margin: 0;
  max-width: 820px;
  color: var(--soft);
  line-height: 1.55;
}

.readiness-badge {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(95, 227, 156, 0.4);
  border-radius: 999px;
  color: var(--green);
  background: rgba(95, 227, 156, 0.08);
  font-size: 0.84rem;
  font-weight: 900;
  white-space: nowrap;
}

/* Centered CTA band (travelers page) */
.cta-section {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cta-section .section-heading {
  margin-bottom: 0;
}

.cta-section .demo-disclaimer {
  text-align: center;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.section-heading.center .cta-actions {
  justify-content: center;
}

@media (min-width: 1800px) {
  p.routing-line {
    font-size: 1.08rem;
  }

  .problem-card strong {
    font-size: 2.9rem;
  }

  .problem-card p {
    font-size: 1.5rem;
  }

  .readiness-callout p {
    font-size: 1.6rem;
    max-width: 1100px;
  }

  .readiness-badge {
    min-height: 52px;
    font-size: 1.08rem;
  }
}

@media (max-width: 1050px) {
  .problem-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .problem-grid {
    grid-template-columns: 1fr;
  }

  .problem-card {
    min-height: 0;
  }

  .readiness-callout {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   Motion & finish v2 — hero atmosphere, route board, card glow, border beam,
   section depth, photo treatment. Animations are transform/opacity/filter
   only (plus SVG dash travel on the route board); the reduced-motion block
   above neutralizes all of it.
   ========================================================================== */

/* --- Hero atmosphere: breathing spotlight + drifting aurora --- */
.hero-overlay {
  overflow: hidden;
}

.hero-overlay::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -22%;
  width: min(920px, 92vw);
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(255, 178, 36, 0.09), transparent 62%);
  transform: translateX(-50%) scale(1);
  animation: heroBreathe 14s ease-in-out infinite;
  pointer-events: none;
}

@keyframes heroBreathe {
  0%,
  100% {
    opacity: 0.55;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.16);
  }
}

.hero-aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.hero-aurora::before,
.hero-aurora::after {
  content: "";
  position: absolute;
  width: clamp(420px, 44vw, 980px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.hero-aurora::before {
  left: -10%;
  top: -16%;
  background: radial-gradient(circle, rgba(255, 178, 36, 0.85), transparent 64%);
  opacity: 0.12;
  animation: auroraDriftA 26s ease-in-out infinite alternate;
}

.hero-aurora::after {
  right: -8%;
  bottom: -22%;
  background: radial-gradient(circle, rgba(79, 163, 255, 0.85), transparent 64%);
  opacity: 0.1;
  animation: auroraDriftB 31s ease-in-out infinite alternate;
}

@keyframes auroraDriftA {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(9vw, 7vh, 0) scale(1.12);
  }
}

@keyframes auroraDriftB {
  from {
    transform: translate3d(0, 0, 0) scale(1.06);
  }
  to {
    transform: translate3d(-8vw, -6vh, 0) scale(0.94);
  }
}

@media (max-width: 720px) {
  .hero-aurora {
    display: none;
  }
}

/* --- H1 shimmer: one gradient sweep on load, settles to solid ink.
       Outside @supports the span is plain --ink, so unsupported engines
       never see transparent text. --- */
.h1-shimmer {
  color: var(--ink);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .h1-shimmer {
    background: linear-gradient(100deg, var(--ink) 42%, var(--accent-glint) 50%, var(--ink) 58%) 100% 0 / 250% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: h1Shimmer 1.8s ease-out 0.3s 1 both;
  }
}

@keyframes h1Shimmer {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: 0% 0;
  }
}

/* --- Cursor card glow (spotlight follows the pointer; pointer devices only,
       JS feeds --mx/--my per hovered card) --- */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pricing-card,
  .path-card,
  .feature-stack article,
  .loop-step {
    position: relative;
  }

  .pricing-card::before,
  .path-card::before,
  .feature-stack article::before,
  .loop-step::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(closest-side at var(--mx, 50%) var(--my, 50%), rgba(255, 178, 36, 0.1), transparent);
    opacity: 0;
    transition: opacity 260ms ease;
    pointer-events: none;
  }

  .pricing-card:hover::before,
  .path-card:hover::before,
  .feature-stack article:hover::before,
  .loop-step:hover::before {
    opacity: 1;
  }
}

/* --- Border beam: 1px conic glint orbiting exactly two surfaces. Without
       @property support the angle never interpolates and the beam falls back
       to a static gradient border segment. --- */
@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.border-beam {
  position: relative;
  border-radius: var(--radius);
}

.border-beam::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg 296deg,
    rgba(255, 178, 36, 0.85) 326deg,
    transparent 356deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: beamSpin 8s linear infinite;
}

@keyframes beamSpin {
  to {
    --beam-angle: 360deg;
  }
}

/* --- Section depth: dot-grid texture + thin gradient top rule on alternate
       bands --- */
.band-depth {
  position: relative;
  isolation: isolate;
  border-top-color: transparent;
}

.band-depth::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 88%);
  pointer-events: none;
}

.band-depth::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 28% 72%, transparent);
  pointer-events: none;
}

/* --- Tracing line: vertical accent that grows alongside the how-it-works
       heading once its reveal fires --- */
.section-heading {
  position: relative;
}

.trace-line {
  position: absolute;
  left: -28px;
  top: 6px;
  width: 2px;
  height: calc(100% + 96px);
  background: linear-gradient(180deg, var(--accent), rgba(255, 178, 36, 0.5) 40%, transparent);
  transform-origin: top;
  pointer-events: none;
}

.js .trace-line {
  transform: scaleY(0);
  transition: transform 1300ms cubic-bezier(0.22, 1, 0.36, 1) 180ms;
}

.js .reveal.is-visible .trace-line {
  transform: scaleY(1);
}

@media (max-width: 1180px) {
  .trace-line {
    display: none;
  }
}

/* --- Animated route board: stylized dispatch board (not a map). Pulses are
       SVG dash travel on pathLength=100 paths, staggered per route. --- */
.route-board {
  position: relative;
  margin-top: clamp(36px, 5vw, 64px);
  padding: clamp(10px, 2vw, 24px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(10, 13, 20, 0.55);
  overflow: hidden;
}

.route-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 78% at 50% 50%, #000 35%, transparent 100%);
  pointer-events: none;
}

.route-board svg {
  display: block;
  width: 100%;
  height: auto;
}

.rb-base {
  fill: none;
  stroke: rgba(79, 163, 255, 0.22);
  stroke-width: 1.5;
}

.rb-pulse {
  fill: none;
  stroke: var(--route);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 12 88;
  stroke-dashoffset: 100;
  opacity: 0.95;
  animation: rbPulse 4.8s linear infinite;
}

.rb-pulse-2 {
  animation-duration: 5.9s;
  animation-delay: -2.3s;
}

.rb-pulse-3 {
  animation-duration: 5.3s;
  animation-delay: -1.1s;
}

.rb-pulse-4 {
  animation-duration: 6.4s;
  animation-delay: -3.4s;
}

@keyframes rbPulse {
  to {
    stroke-dashoffset: 0;
  }
}

.rb-origin {
  fill: var(--accent);
}

.rb-label {
  fill: var(--muted);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.rb-label-dest {
  fill: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.22em;
}

/* SVG text scales with the board; bump viewBox-unit sizes at narrower
   widths so rendered labels stay legible (~10px+). */
@media (max-width: 1050px) {
  .rb-label {
    font-size: 15px;
  }

  .rb-label-dest {
    font-size: 17px;
  }
}

.rb-glow-outer {
  fill: rgba(255, 178, 36, 0.08);
  transform-box: fill-box;
  transform-origin: center;
  animation: rbGlow 6s ease-in-out infinite;
}

.rb-glow-inner {
  fill: rgba(255, 178, 36, 0.16);
}

.rb-dest {
  fill: var(--accent);
}

.rb-ring {
  fill: none;
  stroke: rgba(255, 178, 36, 0.55);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: rbRing 3.4s ease-out infinite;
}

@keyframes rbGlow {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.18);
    opacity: 1;
  }
}

@keyframes rbRing {
  0% {
    transform: scale(0.5);
    opacity: 0.9;
  }
  75%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.rb-chip {
  position: absolute;
  left: 44%;
  top: 38%;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border: 1px solid rgba(95, 227, 156, 0.4);
  border-radius: 999px;
  color: var(--green);
  background: rgba(10, 13, 20, 0.88);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  animation: rbChipFloat 5.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes rbChipFloat {
  0%,
  100% {
    transform: translate(-50%, -56%);
  }
  50% {
    transform: translate(-50%, -44%);
  }
}

.route-board-mini {
  margin-top: 0;
}

@media (max-width: 1050px) {
  .route-board-mini {
    display: none;
  }
}

@media (max-width: 720px) {
  .route-board {
    display: none;
  }
}

/* --- Photo treatment: duotone tint + faint amber edge light so photography
       sits in-palette (no re-encoding) --- */
.hero-photo::before,
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-photo::before {
  background: linear-gradient(180deg, rgba(10, 13, 20, 0.5), transparent 52%);
  mix-blend-mode: multiply;
}

.hero-photo::after {
  background: linear-gradient(160deg, rgba(255, 178, 36, 0.18), transparent 38%);
  mix-blend-mode: soft-light;
}

.media-frame {
  position: relative;
  width: 100%;
}

.media-frame::before,
.media-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events: none;
}

.media-frame::before {
  background: linear-gradient(175deg, rgba(10, 13, 20, 0.62), transparent 46%, rgba(10, 13, 20, 0.55));
  mix-blend-mode: multiply;
}

.media-frame::after {
  background: linear-gradient(205deg, rgba(255, 178, 36, 0.2), transparent 42%);
  mix-blend-mode: soft-light;
}

.ticker-section:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Print: IntersectionObserver never fires in print rendering — force every
   reveal-hidden state visible so the page prints completely. */
@media print {
  .js .reveal,
  .js .reveal-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .js .trace-line {
    transform: none !important;
  }
}