/* ================================================================
   SKILLFLO HIRE
   A recruiter evidence desk: many applicants resolve into one shortlist.
   ================================================================ */

/* Native smooth scrolling offsets ScrollTrigger refresh geometry when a
   deferred image settles mid-scroll. Hire keeps the document scroller
   synchronous so refreshes and direct fragment loads use exact positions. */
html.hire-page { scroll-behavior: auto !important; }

body.product-page[data-product="hire"] {
  --hire-blue: #1E48C2;
  --hire-blue-deep: #16368F;
  --hire-paper: #FBFAF6;
  --hire-cream: #F8F4E7;
  --hire-ink: #1A1611;
  --hire-line: rgba(26, 22, 17, .12);
  background: var(--hire-paper);
}

.hire-hero,
.hire-route,
.hire-evidence,
.hire-responsibility,
.hire-crm,
.hire-proof,
.hire-controls,
.hire-finale { scroll-margin-top: 76px; }

/* ---------- Recruiter desk hero ---------- */
.hire-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(78px + clamp(3rem, 7vh, 5.8rem)) 0 clamp(6.5rem, 10vw, 9rem);
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 0 41.95%, rgba(26, 22, 17, .08) 41.95% 42.02%, transparent 42.02%),
    var(--hire-paper);
}

.hire-hero::before {
  content: '';
  position: absolute;
  top: 13%;
  right: -7%;
  width: min(68vw, 980px);
  height: 70%;
  background: var(--hire-blue);
  opacity: .08;
}

.hire-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .76fr) minmax(550px, 1.24fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.hire-hero__copy { padding-top: 1.5rem; }
.hire-hero__copy .product-kicker { margin-bottom: clamp(1.5rem, 2.8vw, 2.3rem); }

.hire-hero__title {
  max-width: 11.5ch;
  font-size: clamp(3.4rem, 5.2vw, 5.5rem);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.061em;
  text-wrap: balance;
}

.hire-hero__title strong { color: var(--hire-blue); font-weight: inherit; }

.hire-hero__lede {
  max-width: 34em;
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--ink-55);
  font-size: clamp(1.07rem, 1.45vw, 1.23rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.hire-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.3rem; }

.hire-hero__proof {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .75rem;
  max-width: 34rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--hire-line);
  color: var(--ink-55);
  font-size: .82rem;
}

.hire-hero__proof strong {
  color: var(--hire-ink);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.hire-hero__scene {
  position: relative;
  margin-right: calc(var(--gutter) * -.6);
  min-width: 0;
  overflow: visible;
}

.hire-hero__scene picture { display: block; overflow: hidden; aspect-ratio: 3 / 2; background: var(--paper-2); }
.hire-hero__scene img { width: 100%; height: 100%; object-fit: cover; }

.hire-hero__scene::before {
  content: '';
  position: absolute;
  inset: -13px 18px 18px -13px;
  z-index: -1;
  border: 1px solid rgba(30, 72, 194, .3);
}

.hire-hero__scene figcaption {
  max-width: 42em;
  margin-top: .85rem;
  color: var(--ink-38);
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .035em;
}

.hire-hero__ticket {
  position: absolute;
  left: clamp(-2.4rem, -3vw, -1rem);
  bottom: 2.5rem;
  width: min(250px, 44%);
  display: grid;
  gap: .35rem;
  padding: 1rem 1.05rem 1.1rem;
  border: 1px solid rgba(26, 22, 17, .14);
  background: rgba(251, 250, 246, .96);
  box-shadow: 0 22px 44px -30px rgba(26, 22, 17, .62);
}

.hire-hero__ticket span,
.hire-hero__ticket small {
  color: var(--ink-38);
  font-family: var(--font-mono);
  font-size: .59rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hire-hero__ticket strong { font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; }

.hire-hero__index {
  position: absolute;
  inset: auto 0 0;
  min-height: 54px;
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding-inline: var(--gutter);
  border-top: 1px solid var(--hire-line);
  color: var(--ink-38);
  font-family: var(--font-mono);
  font-size: .61rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.hire-hero__index i { height: 1px; background: var(--hire-line); }

/* ---------- The shortlist line ---------- */
.hire-route {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 9.5vw, 8.5rem);
  background: var(--hire-blue-deep);
  color: var(--hire-paper);
}

.hire-route::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .13;
  background:
    linear-gradient(rgba(251, 250, 246, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(251, 250, 246, .14) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}

.hire-route__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(270px, .5fr);
  gap: 2rem clamp(3rem, 9vw, 9rem);
  align-items: end;
}

.hire-route__head .product-kicker { grid-column: 1 / -1; color: rgba(251, 250, 246, .62); }
.hire-route__head .product-kicker::before { background: var(--yellow); box-shadow: 0 0 0 5px rgba(254, 221, 0, .12); }

.hire-route__head h2 {
  max-width: 15ch;
  font-size: clamp(2.7rem, 4.2vw, 4.4rem);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.hire-route__head > p:last-child {
  max-width: 31em;
  color: rgba(251, 250, 246, .7);
  font-size: 1.05rem;
  line-height: 1.65;
}

.hire-route__board {
  position: relative;
  min-height: 530px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 180px;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: stretch;
  margin-top: clamp(5rem, 9vw, 8rem);
  border-top: 1px solid rgba(251, 250, 246, .18);
  border-bottom: 1px solid rgba(251, 250, 246, .18);
}

.hire-route__crowd {
  display: grid;
  grid-template-columns: repeat(4, 8px);
  grid-auto-rows: 8px;
  justify-content: start;
  align-content: center;
  gap: 13px 17px;
  padding-left: .25rem;
}

.hire-route__crowd i {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hire-paper);
  opacity: .3;
  will-change: transform, opacity;
}

.hire-route__crowd i:nth-child(3n) { background: var(--yellow); opacity: .9; }
.hire-route__crowd i:nth-child(4n) { transform: translateX(8px); }
.hire-route__crowd i:nth-child(5n) { transform: translateY(-8px); }

.hire-route__crowd span {
  grid-column: 1 / -1;
  margin-top: .65rem;
  color: rgba(251, 250, 246, .48);
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.hire-route__track {
  position: absolute;
  top: 43%;
  left: 120px;
  right: 152px;
  height: 1px;
}

.hire-route__track-base,
.hire-route__track-fill { position: absolute; inset: 0; transform-origin: left; }
.hire-route__track-base { background: rgba(251, 250, 246, .2); }
.hire-route__track-fill { background: var(--yellow); transform: scaleX(0); }

.hire-route__gates {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hire-route__gate {
  position: relative;
  display: grid;
  align-content: end;
  padding: 0 clamp(.8rem, 2vw, 1.5rem) 2.25rem 0;
  color: rgba(251, 250, 246, .48);
  transition: color .45s var(--ease-soft), opacity .45s var(--ease-soft);
}

.hire-route__gate::before {
  content: '';
  position: absolute;
  top: calc(43% - 6px);
  left: 0;
  width: 13px;
  height: 13px;
  border: 3px solid var(--hire-blue-deep);
  border-radius: 50%;
  background: rgba(251, 250, 246, .38);
  box-shadow: 0 0 0 1px rgba(251, 250, 246, .25);
  transition: transform .45s var(--ease-out), background .45s, box-shadow .45s;
}

.hire-route__gate.is-active { color: var(--hire-paper); }
.hire-route__gate.is-active::before { transform: scale(1.12); background: var(--yellow); box-shadow: 0 0 0 7px rgba(254, 221, 0, .12); }

.hire-route__gate > span {
  margin-bottom: .75rem;
  color: var(--yellow);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .13em;
}

.hire-route__gate h3 { max-width: 11ch; font-size: clamp(1.25rem, 2.15vw, 1.9rem); font-weight: 600; line-height: 1.05; letter-spacing: -.03em; }
.hire-route__gate p { max-width: 22em; margin-top: .8rem; color: inherit; font-size: .86rem; line-height: 1.55; }

.hire-route__result {
  grid-column: 3;
  align-self: center;
  display: grid;
  gap: .45rem;
  padding: 1.2rem;
  border: 1px solid rgba(254, 221, 0, .55);
  background: rgba(254, 221, 0, .08);
  opacity: .45;
}

.hire-route__result span,
.hire-route__result small { color: rgba(251, 250, 246, .58); font-family: var(--font-mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; }
.hire-route__result strong { color: var(--hire-paper); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }

/* ---------- Paired evidence chapters ---------- */
.hire-evidence { padding-block: clamp(6rem, 9.5vw, 8.5rem); background: var(--white); }

.hire-evidence__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr);
  gap: 2rem clamp(3rem, 9vw, 9rem);
  align-items: end;
  margin-bottom: clamp(5rem, 9vw, 8rem);
}

.hire-evidence__head .eyebrow { grid-column: 1 / -1; }
.hire-evidence__head h2 { max-width: 17ch; font-size: clamp(2.4rem, 3.8vw, 3.8rem); font-weight: 600; line-height: .98; letter-spacing: -.05em; text-wrap: balance; }

.hire-stage {
  display: grid;
  grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: center;
  padding-block: clamp(4.5rem, 9vw, 8rem);
  border-top: 1px solid var(--hire-line);
}

.hire-stage--reverse { grid-template-columns: minmax(0, 1.38fr) minmax(280px, .62fr); }
.hire-stage--reverse .hire-stage__copy { order: 2; }
.hire-stage--reverse .hire-screen { order: 1; }

.hire-stage__number { display: block; margin-bottom: 1.2rem; color: var(--hire-blue); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; }
.hire-stage__copy h3 { max-width: 13ch; font-size: clamp(2rem, 3.1vw, 3rem); font-weight: 600; line-height: .99; letter-spacing: -.047em; }
.hire-stage__copy > p { max-width: 34em; margin-top: 1.35rem; color: var(--ink-55); font-size: 1.05rem; line-height: 1.65; }
.hire-stage__copy ul { display: grid; gap: .65rem; margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--hire-line); }
.hire-stage__copy li { position: relative; padding-left: 1.15rem; color: var(--ink-70); font-size: .92rem; }
.hire-stage__copy li::before { content: ''; position: absolute; top: .65em; left: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--hire-blue); }

.hire-screen {
  position: relative;
  overflow: hidden;
  min-width: 0;
  border: 1px solid rgba(26, 22, 17, .12);
  border-radius: 3px;
  background: var(--paper-2);
  box-shadow: 0 38px 80px -54px rgba(26, 22, 17, .62), 0 12px 28px -22px rgba(26, 22, 17, .3);
}

.hire-screen img { width: 100%; height: auto; object-fit: contain; background: #F3F6FA; }
.hire-screen figcaption { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: baseline; padding: .9rem 1rem 1rem; border-top: 1px solid var(--hire-line); color: var(--ink-55); font-size: .8rem; }
.hire-screen figcaption b { color: var(--hire-blue); font-family: var(--font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- Human handoff ---------- */
.hire-responsibility { padding-block: clamp(5.5rem, 9vw, 8rem); background: var(--hire-cream); }

.hire-responsibility__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr);
  gap: 2rem 7rem;
  align-items: end;
  margin-bottom: clamp(4rem, 7vw, 6rem);
}

.hire-responsibility__head .product-kicker { grid-column: 1 / -1; }
.hire-responsibility__head h2 { max-width: 18ch; font-size: clamp(2.4rem, 3.8vw, 3.8rem); font-weight: 600; line-height: 1; letter-spacing: -.048em; }

.hire-responsibility__table { border-top: 1px solid rgba(26, 22, 17, .2); }
.hire-responsibility__row { display: grid; grid-template-columns: minmax(155px, .35fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 5vw, 5rem); padding: 1.55rem 0; border-bottom: 1px solid var(--hire-line); }
.hire-responsibility__row--head { padding-block: .85rem; color: var(--ink-38); font-family: var(--font-mono); font-size: .63rem; letter-spacing: .12em; text-transform: uppercase; }
.hire-responsibility__row strong { font-size: 1.02rem; font-weight: 600; }
.hire-responsibility__row p { max-width: 32em; color: var(--ink-55); font-size: .93rem; line-height: 1.6; }
.hire-responsibility__row p:last-child { position: relative; padding-left: 1.3rem; }
.hire-responsibility__row p:last-child::before { content: ''; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }

/* ---------- Self-writing CRM ---------- */
.hire-crm { padding-block: clamp(6rem, 9.5vw, 8.5rem); background: var(--hire-paper); }
.hire-crm__grid { display: grid; grid-template-columns: minmax(300px, .62fr) minmax(0, 1.38fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.hire-crm__copy h2 { max-width: 11ch; font-size: clamp(2.5rem, 4vw, 3.8rem); font-weight: 600; line-height: .96; letter-spacing: -.054em; }
.hire-crm__copy > p:last-of-type { max-width: 34em; margin-top: 1.5rem; color: var(--ink-55); font-size: 1.06rem; line-height: 1.65; }

.hire-crm__events { position: relative; display: grid; margin-top: 2.2rem; border-top: 1px solid var(--hire-line); }
.hire-crm__events::before { content: ''; position: absolute; top: 0; bottom: 0; left: 18px; width: 1px; background: rgba(30, 72, 194, .2); }
.hire-crm__events span { position: relative; display: grid; grid-template-columns: 37px 1fr; gap: .85rem; align-items: center; min-height: 54px; border-bottom: 1px solid var(--hire-line); color: var(--ink-70); font-size: .9rem; }
.hire-crm__events i { z-index: 1; width: 36px; height: 20px; display: grid; place-items: center; border: 1px solid rgba(30, 72, 194, .3); border-radius: 99px; background: var(--hire-paper); color: var(--hire-blue); font-family: var(--font-mono); font-size: .56rem; font-style: normal; }
.hire-crm__screen { align-self: center; }

/* ---------- Evidence-led proof ---------- */
.hire-proof {
  position: relative;
  overflow: hidden;
  padding-block: clamp(6rem, 9.5vw, 8.5rem);
  background: var(--hire-ink);
  color: var(--hire-paper);
}

.hire-proof__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(280px, .48fr); gap: clamp(3.5rem, 7vw, 7rem); align-items: end; }
.hire-proof .product-kicker { color: rgba(251, 250, 246, .55); }
.hire-proof .product-kicker::before { background: var(--yellow); box-shadow: 0 0 0 5px rgba(254, 221, 0, .1); }
.hire-proof__claim h2 { display: grid; margin-top: 1.6rem; }
.hire-proof__claim h2 strong { color: var(--yellow); font-size: clamp(6rem, 10.5vw, 10rem); font-weight: 600; line-height: .66; letter-spacing: -.075em; }
.hire-proof__claim h2 span { max-width: 16ch; margin-top: 1.4rem; font-size: clamp(2rem, 3.3vw, 3.2rem); font-weight: 600; line-height: .96; letter-spacing: -.05em; }
.hire-proof__claim > p { max-width: 37em; margin-top: 2rem; color: rgba(251, 250, 246, .66); font-size: 1.04rem; line-height: 1.65; }
.hire-proof__notes { border-top: 1px solid rgba(251, 250, 246, .18); }
.hire-proof__notes > div { padding: 1.3rem 0 1.5rem; border-bottom: 1px solid rgba(251, 250, 246, .18); }
.hire-proof__notes dt { color: var(--yellow); font-family: var(--font-mono); font-size: .61rem; letter-spacing: .12em; text-transform: uppercase; }
.hire-proof__notes dd { display: grid; gap: .35rem; margin-top: .65rem; color: rgba(251, 250, 246, .64); font-size: .88rem; }
.hire-proof__notes dd strong { color: var(--hire-paper); font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 600; letter-spacing: -.035em; }

.hire-proof__stream { position: absolute; right: -5%; bottom: 4%; width: 38%; height: 20%; display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.5rem); opacity: .22; }
.hire-proof__stream::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(254, 221, 0, .48); }
.hire-proof__stream i { position: relative; z-index: 1; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: var(--hire-paper); }
.hire-proof__stream i:nth-child(3n) { transform: translateY(-24px); }
.hire-proof__stream i:nth-child(4n) { transform: translateY(21px); }
.hire-proof__stream span { position: relative; z-index: 1; width: 20px; height: 20px; margin-left: auto; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 12px rgba(254, 221, 0, .08); }

/* ---------- Trust controls ---------- */
.hire-controls { padding-block: clamp(5.5rem, 9vw, 8rem); background: var(--white); }
.hire-controls__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .5fr); gap: 2rem clamp(3rem, 8vw, 8rem); align-items: end; margin-bottom: clamp(4rem, 7vw, 6rem); }
.hire-controls__head .eyebrow { grid-column: 1 / -1; }
.hire-controls__head h2 { max-width: 15ch; font-size: clamp(2.4rem, 3.8vw, 3.8rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.hire-controls__head > p:last-child { max-width: 32em; color: var(--ink-55); font-size: 1.04rem; line-height: 1.65; }
.hire-controls__list { border-top: 1px solid var(--hire-line); }
.hire-controls__list > div { display: grid; grid-template-columns: minmax(150px, .35fr) minmax(0, 1fr); gap: clamp(2rem, 7vw, 8rem); padding: 1.55rem 0; border-bottom: 1px solid var(--hire-line); }
.hire-controls__list dt { color: var(--hire-blue); font-family: var(--font-mono); font-size: .65rem; letter-spacing: .13em; text-transform: uppercase; }
.hire-controls__list dd { max-width: 48em; color: var(--ink-70); font-size: 1rem; line-height: 1.6; }

/* ---------- A Hire-specific close ---------- */
.hire-finale { position: relative; overflow: hidden; padding-block: clamp(6rem, 9.5vw, 8.5rem); background: var(--hire-blue); color: var(--hire-paper); }
.hire-finale::before { content: ''; position: absolute; right: -10%; bottom: -52%; width: min(64vw, 900px); aspect-ratio: 1; border: 1px solid rgba(251, 250, 246, .14); border-radius: 50%; box-shadow: inset 0 0 0 80px rgba(251, 250, 246, .018), inset 0 0 0 160px rgba(251, 250, 246, .015); }
.hire-finale__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .55fr); gap: clamp(3rem, 10vw, 10rem); align-items: end; }
.hire-finale .product-kicker { color: rgba(251, 250, 246, .6); }
.hire-finale .product-kicker::before { background: var(--yellow); box-shadow: 0 0 0 5px rgba(254, 221, 0, .12); }
.hire-finale h2 { max-width: 11ch; font-size: clamp(2.8rem, 5vw, 5.2rem); font-weight: 600; line-height: .93; letter-spacing: -.058em; }
.hire-finale__action > p { max-width: 31em; color: rgba(251, 250, 246, .72); font-size: 1.05rem; line-height: 1.65; }
.hire-finale__action > div { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hire-finale .btn--primary { background: var(--hire-paper); color: var(--hire-ink); }
.hire-finale .btn--ghost { border-color: rgba(251, 250, 246, .35); background: transparent; color: var(--hire-paper); }

/* ---------- Responsive reading order ---------- */
@media (max-width: 1080px) {
  .hire-hero__grid { grid-template-columns: minmax(0, .82fr) minmax(470px, 1.18fr); gap: 3rem; }
  .hire-hero__title { font-size: clamp(3.1rem, 6.3vw, 4.7rem); }
  .hire-route__board { grid-template-columns: 110px minmax(0, 1fr) 150px; }
  .hire-route__track { left: 90px; right: 125px; }
  .hire-route__gate p { font-size: .78rem; }
}

/* Keep the opening proposition coherent on short desktop displays instead of
   letting the first viewport cut through the headline. */
@media (min-width: 921px) and (max-height: 700px) {
  .hire-hero {
    min-height: auto;
    padding-top: calc(72px + 1rem);
    padding-bottom: 3.25rem;
  }
  .hire-hero__grid { gap: clamp(2.5rem, 5vw, 4.5rem); }
  .hire-hero__title {
    max-width: 10.5ch;
    font-size: clamp(3.2rem, 4.4vw, 3.9rem);
    line-height: .92;
  }
  .hire-hero__lede { margin-top: 1rem; font-size: 1rem; line-height: 1.5; }
  .hire-hero__actions { margin-top: 1.2rem; }
  .hire-hero__proof { margin-top: 1.1rem; }
  .hire-hero__index { min-height: 46px; }
}

@media (max-width: 920px) {
  body.product-page[data-product="hire"] .nav__brand,
  body.product-page[data-product="hire"] .nav__actions .btn { min-height: 44px; }
  body.product-page[data-product="hire"] .nav__brand { min-width: 44px; }

  .hire-hero { min-height: auto; padding-top: calc(74px + 4rem); background: var(--hire-paper); }
  .hire-hero__grid,
  .hire-route__head,
  .hire-evidence__head,
  .hire-stage,
  .hire-stage--reverse,
  .hire-responsibility__head,
  .hire-crm__grid,
  .hire-proof__grid,
  .hire-controls__head,
  .hire-finale__grid { grid-template-columns: 1fr; }
  .hire-hero__copy { padding-top: 0; }
  .hire-hero__title { max-width: 10.5ch; font-size: clamp(3.1rem, 8.8vw, 4.7rem); }
  .hire-hero__scene { width: min(100%, 800px); margin: 2rem 0 0; }
  .hire-hero__scene::before { inset: -10px 14px 14px -10px; }
  .hire-hero__ticket { left: 1rem; }
  .hire-route__head .product-kicker,
  .hire-evidence__head .eyebrow,
  .hire-responsibility__head .product-kicker,
  .hire-controls__head .eyebrow { grid-column: auto; }
  .hire-route__head > p:last-child,
  .hire-controls__head > p:last-child { max-width: 42em; }

  .hire-route__board { min-height: 0; grid-template-columns: 1fr; gap: 0; padding-block: 2rem; }
  .hire-route__crowd { grid-template-columns: repeat(10, 7px); grid-auto-rows: 7px; justify-content: start; gap: 10px 16px; min-height: 115px; padding-left: 2rem; }
  .hire-route__crowd span { grid-column: 1 / -1; }
  .hire-route__track { top: 137px; bottom: 116px; left: 10px; right: auto; width: 1px; height: auto; }
  .hire-route__track-fill { transform: scaleY(0); transform-origin: top; }
  .hire-route__gates { grid-column: 1; grid-template-columns: 1fr; }
  .hire-route__gate { min-height: 190px; align-content: center; padding: 2rem 1rem 2rem 2.2rem; border-top: 1px solid rgba(251, 250, 246, .13); }
  .hire-route__gate::before { top: 2.4rem; left: 4px; }
  .hire-route__gate h3 { max-width: 18ch; }
  .hire-route__gate p { max-width: 34em; font-size: .9rem; }
  .hire-route__result { grid-column: 1; width: min(100%, 340px); margin: 2rem 0 0 2rem; }

  .hire-stage--reverse .hire-stage__copy,
  .hire-stage--reverse .hire-screen { order: initial; }
  .hire-stage__copy { max-width: 42rem; }
  .hire-screen { width: 100%; }
  .hire-responsibility__row { grid-template-columns: minmax(140px, .35fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
  .hire-crm__copy { max-width: 44rem; }
  .hire-proof__notes { max-width: 640px; margin-top: 1rem; }
  .hire-proof__stream { width: 68%; opacity: .16; }
  .hire-finale__action { max-width: 42rem; }
}

@media (max-width: 720px) {
  .hire-hero { padding-top: calc(70px + 3rem); padding-bottom: 6.4rem; }
  .hire-hero__title { font-size: clamp(2.8rem, 12.4vw, 3.9rem); line-height: .91; }
  .hire-hero__actions,
  .hire-finale__action > div { width: min(100%, 340px); flex-direction: column; align-items: stretch; }
  .hire-hero__actions .btn,
  .hire-finale__action .btn { justify-content: center; white-space: normal; text-align: center; }
  .hire-hero__proof { grid-template-columns: 1fr; gap: .25rem; }
  .hire-hero__scene { margin-top: 2.5rem; }
  .hire-hero__ticket { position: relative; left: auto; bottom: auto; width: 100%; margin-top: 0; box-shadow: none; }
  .hire-hero__scene figcaption { margin-top: .7rem; }
  .hire-hero__index { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: .5rem; font-size: .54rem; }
  .hire-hero__index i { display: none; }

  .hire-route__head h2,
  .hire-proof__claim h2 span,
  .hire-finale h2 { line-height: .98; }
  .hire-route,
  .hire-responsibility,
  .hire-crm,
  .hire-proof,
  .hire-controls,
  .hire-finale { padding-block: clamp(5.25rem, 18vw, 6rem); }
  .hire-evidence { padding-block: clamp(5.25rem, 18vw, 6rem); }
  .hire-route__board { margin-top: 3.5rem; }
  .hire-route__gate { min-height: 168px; }
  .hire-evidence__head { margin-bottom: 1.75rem; }
  .hire-stage { gap: 2.4rem; padding-block: 3.5rem; }
  .hire-stage__copy h3 { font-size: clamp(2.1rem, 9.4vw, 3rem); }
  .hire-screen figcaption { grid-template-columns: 1fr; gap: .35rem; }

  .hire-responsibility__row,
  .hire-controls__list > div { grid-template-columns: 1fr; gap: .55rem; }
  .hire-responsibility__row--head { display: none; }
  .hire-responsibility__row { padding-block: 1.5rem; }
  .hire-responsibility__row strong { margin-bottom: .4rem; color: var(--hire-blue); }
  .hire-responsibility__row p:last-child { margin-top: .45rem; }
  .hire-controls__list dd { max-width: 36em; }
  .hire-proof__claim h2 strong { font-size: clamp(5.5rem, 27vw, 7.6rem); line-height: .8; }
  .hire-proof__stream { display: none; }
}

/* Short landscape phones have tablet width but very little vertical room.
   Restore useful two-column compositions instead of forcing a long portrait
   stack, while keeping the compact vertical workflow sequence. */
@media (min-width: 721px) and (max-width: 920px) and (max-height: 500px) {
  .hire-hero {
    padding-top: calc(62px + 2.25rem);
    padding-bottom: 4.75rem;
  }
  .hire-hero__grid {
    grid-template-columns: minmax(0, .86fr) minmax(360px, 1.14fr);
    gap: 2.25rem;
  }
  .hire-hero__title { font-size: clamp(2.9rem, 6vw, 3.6rem); }
  .hire-hero__lede { font-size: 1rem; line-height: 1.5; }
  .hire-hero__scene { margin-top: 0; }
  .hire-hero__ticket { bottom: 1.25rem; }

  .hire-route,
  .hire-evidence,
  .hire-responsibility,
  .hire-crm,
  .hire-proof,
  .hire-controls,
  .hire-finale { padding-block: 5.5rem; }

  .hire-evidence__head,
  .hire-responsibility__head,
  .hire-controls__head { grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr); }
  .hire-evidence__head .eyebrow,
  .hire-responsibility__head .product-kicker,
  .hire-controls__head .eyebrow { grid-column: 1 / -1; }
  .hire-evidence__head { margin-bottom: 3rem; }
  .hire-stage,
  .hire-stage--reverse {
    grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr);
    gap: 2.5rem;
    padding-block: 4.5rem;
  }
  .hire-stage--reverse { grid-template-columns: minmax(0, 1.28fr) minmax(250px, .72fr); }
  .hire-stage--reverse .hire-stage__copy { order: 2; }
  .hire-stage--reverse .hire-screen { order: 1; }
  .hire-stage__copy h3 { font-size: clamp(2.1rem, 4.4vw, 2.9rem); }
  .hire-stage__copy > p { font-size: .97rem; }

  .hire-crm__grid { grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr); gap: 3rem; }
  .hire-proof__grid { grid-template-columns: minmax(0, 1.25fr) minmax(250px, .55fr); gap: 3.5rem; }
  .hire-proof__claim h2 strong { line-height: .8; }
  .hire-proof__notes { margin-top: 0; }
  .hire-finale__grid { grid-template-columns: minmax(0, 1.2fr) minmax(280px, .65fr); gap: 3rem; }
}

@media (max-width: 420px) {
  .hire-hero__title { font-size: clamp(2.6rem, 12.8vw, 3.2rem); }
  .hire-hero__index span:nth-of-type(2) { display: none; }
  .hire-hero__index { grid-template-columns: repeat(3, auto); }
  .hire-route__crowd { grid-template-columns: repeat(8, 7px); }
  .hire-route__result { width: calc(100% - 2rem); margin-left: 2rem; }
}

/* No motion must remain a complete, naturally ordered page. */
.no-js [data-hire-hero-media],
.no-js [data-hire-stage],
.no-js [data-hire-media],
.no-js [data-hire-row],
.no-js [data-hire-event],
.no-motion [data-hire-hero-media],
.no-motion [data-hire-stage],
.no-motion [data-hire-media],
.no-motion [data-hire-row],
.no-motion [data-hire-event] { opacity: 1 !important; transform: none !important; visibility: visible !important; }

.no-js .hire-route__track-fill,
.no-motion .hire-route__track-fill { transform: none !important; }
.no-js .hire-route__gate,
.no-motion .hire-route__gate { color: var(--hire-paper); }
.no-js .hire-route__gate::before,
.no-motion .hire-route__gate::before { background: var(--yellow); }
.no-js .hire-route__result,
.no-motion .hire-route__result { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .hire-route__gate,
  .hire-route__gate::before { transition: none; }
  .hire-route__track-fill { transform: none !important; }
  [data-hire-hero-media],
  [data-hire-stage],
  [data-hire-media],
  [data-hire-row],
  [data-hire-event] { opacity: 1 !important; transform: none !important; visibility: visible !important; }
  .hire-route__gate { color: var(--hire-paper); }
  .hire-route__gate::before { background: var(--yellow); }
  .hire-route__result { opacity: 1; }
}