/* Global Hire — partner landing page.
   Standalone from the dashboard stylesheet: nothing here is shared, so the
   dashboard cannot be broken by a change made for this page. */

:root {
  --red: #b91f28;
  --red-lift: #d4242f;
  --ink: #12141a;
  --ink-soft: #3f4650;
  --muted: #606773;
  --faint: #8a9099;
  --line: #e4e7ea;
  --paper: #ffffff;
  --wash: #f6f7f9;
  --night: #0d0f14;
  --night-soft: #171a21;

  --shell: min(1140px, 100% - 2.5rem);
  --radius: 14px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.022em; font-weight: 800; }
p { margin: 0; }

/* Header ------------------------------------------------------------------ */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem max(1.25rem, calc((100vw - var(--shell)) / 2));
  transition: background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
}

.site-header.is-stuck {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line);
  padding-top: .7rem;
  padding-bottom: .7rem;
}

.brand img { width: 148px; }

.site-nav { display: flex; align-items: center; gap: 1.75rem; }

.site-nav a {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .2s var(--ease);
}

.site-nav a:hover { color: var(--red); }

.nav-cta {
  padding: .55rem 1.1rem;
  color: #fff !important;
  background: var(--ink);
  border-radius: 999px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}

.nav-cta:hover { background: var(--red); transform: translateY(-1px); }

@media (max-width: 640px) {
  .site-nav a:not(.nav-cta) { display: none; }
  .brand img { width: 118px; }
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  font: inherit;
  font-size: .97rem;
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}

.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn-primary { color: #fff; background: var(--red); box-shadow: 0 10px 26px -12px rgba(185, 31, 40, .85); }
.btn-primary:hover { background: var(--red-lift); transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(185, 31, 40, .9); }
.btn-primary:disabled { opacity: .6; cursor: progress; transform: none; }

.btn-ghost { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); transform: translateY(-2px); }

.btn-block { width: 100%; }

:focus-visible { outline: 2.5px solid var(--red); outline-offset: 3px; border-radius: 4px; }

/* Hero -------------------------------------------------------------------- */

.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding: 8rem 0 5rem;
  overflow: hidden;
  background: var(--night);
  color: #fff;
  isolation: isolate;
}

.hero-field { position: absolute; inset: 0; z-index: -1; }

/* Two slow-drifting colour fields. Cheap to animate because only transform
   moves — no repaint of the blur itself. */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .55;
  will-change: transform;
}

.orb-a {
  width: 46vw; height: 46vw;
  top: -12%; left: -8%;
  background: radial-gradient(circle, rgba(185, 31, 40, .95), transparent 68%);
  animation: drift-a 22s var(--ease) infinite alternate;
}

.orb-b {
  width: 40vw; height: 40vw;
  right: -10%; bottom: -18%;
  background: radial-gradient(circle, rgba(96, 103, 115, .8), transparent 66%);
  animation: drift-b 27s var(--ease) infinite alternate;
}

@keyframes drift-a { to { transform: translate3d(14%, 12%, 0) scale(1.16); } }
@keyframes drift-b { to { transform: translate3d(-12%, -10%, 0) scale(1.1); } }

.grid-veil {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 35%, transparent 78%);
}

.hero-inner { width: var(--shell); margin: 0 auto; }

.eyebrow {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red);
}

.hero .eyebrow { color: #ff7a83; }

.hero h1 {
  margin: 1.1rem 0 0;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  max-width: 19ch;
}

.hero h1 em { font-style: normal; color: #ff8f97; }

.lede {
  margin-top: 1.5rem;
  max-width: 52ch;
  font-size: clamp(1.02rem, 1.5vw, 1.19rem);
  color: rgba(255, 255, 255, .74);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.4rem; }
.hero .btn-ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); }
.hero .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2.75rem;
  margin: 4.5rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, .13);
}

.hero-stats dt { font-size: .8rem; color: rgba(255, 255, 255, .5); }
.hero-stats dd { margin: .15rem 0; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -.03em; }
.hero-stats .sub { color: rgba(255, 255, 255, .38); }

/* Sections ---------------------------------------------------------------- */

.section { width: var(--shell); margin: 0 auto; padding: clamp(4.75rem, 9vw, 7.75rem) 0; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  column-gap: clamp(2rem, 6vw, 5rem);
  align-items: end;
}

.section-head .eyebrow { grid-column: 1; }
.section-head h2 { grid-column: 1; margin-top: .7rem; font-size: clamp(1.75rem, 3.4vw, 2.6rem); max-width: 18ch; }

/* Supporting text fills the space the heading leaves rather than stacking
   underneath it and pushing the section taller. */
.section-sub {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.65;
}

.section-note { grid-column: 2; margin-top: .9rem; }

@media (max-width: 820px) {
  .section-head { grid-template-columns: 1fr; }
  .section-head h2 { max-width: none; }
  .section-sub, .section-note { grid-column: 1; grid-row: auto; margin-top: 1rem; }
}

.section-dark {
  width: 100%;
  max-width: none;
  padding-inline: max(1.25rem, calc((100vw - var(--shell)) / 2));
  background: var(--night);
  color: #fff;
}

.section-dark .section-sub { color: rgba(255, 255, 255, .62); }

/* Steps ------------------------------------------------------------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.35rem;
  margin: 3.1rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.step {
  position: relative;
  padding: 2.4rem 2rem 2.2rem;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}

.step:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow: 0 22px 44px -26px rgba(18, 20, 26, .38);
}

.step-index { font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: var(--red); }
.step h3 { margin: .85rem 0 .6rem; font-size: 1.24rem; }
.step p { color: var(--muted); font-size: .97rem; }

/* Tiers ------------------------------------------------------------------- */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.2rem;
  margin-top: 3.1rem;
}

.tier {
  position: relative;
  padding: 2.5rem 2rem;
  background: var(--night-soft);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: var(--radius);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}

.tier:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, .22); }

.tier h3 { font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, .62); }
.tier-rate { margin: .7rem 0 .35rem; font-size: clamp(2.6rem, 5vw, 3.5rem); font-weight: 800; letter-spacing: -.035em; }
.tier-rate span { font-size: .45em; margin-left: .1em; color: rgba(255, 255, 255, .45); }
.tier-note { font-size: .9rem; color: rgba(255, 255, 255, .5); }

.tier-top { background: linear-gradient(165deg, rgba(185, 31, 40, .22), rgba(23, 26, 33, .9)); border-color: rgba(255, 122, 131, .35); }
.tier-top .tier-rate { color: #ff9aa1; }

.tier-flag {
  position: absolute;
  top: 1.15rem; right: 1.15rem;
  padding: .25rem .6rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  border-radius: 999px;
}

/* Audience ---------------------------------------------------------------- */

.audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem; margin-top: 3.1rem; }
.aud { padding: 2rem 1.8rem; border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.aud:hover { border-color: var(--red); transform: translateY(-4px); }
.aud h3 { font-size: 1.06rem; margin-bottom: .5rem; }
.aud p { font-size: .94rem; color: var(--muted); }

/* Apply ------------------------------------------------------------------- */

.section-apply { scroll-margin-top: 90px; }

.apply-shell {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(340px, 1.25fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 900px) { .apply-shell { grid-template-columns: 1fr; } }

.apply-aside { position: sticky; top: 110px; }
@media (max-width: 900px) { .apply-aside { position: static; } }

.apply-aside h2 { margin: .9rem 0 1.1rem; font-size: clamp(1.9rem, 4vw, 2.7rem); }
.apply-aside > p { color: var(--muted); }

.assurances { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; }

.assurances li {
  position: relative;
  padding-left: 1.9rem;
  font-size: .95rem;
  color: var(--ink-soft);
}

.assurances li::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 1.1rem; height: 1.1rem;
  background: var(--red);
  border-radius: 50%;
  clip-path: polygon(22% 52%, 40% 70%, 78% 30%, 86% 40%, 40% 86%, 14% 60%);
}

.apply-form {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 70px -46px rgba(18, 20, 26, .5);
}

.field-group { margin: 0 0 2rem; padding: 0; border: 0; }
.field-group:last-of-type { margin-bottom: 1.2rem; }

.field-group legend {
  padding: 0 0 1.1rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--faint);
}

.field { display: block; margin-bottom: 1.15rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.field-label { display: block; margin-bottom: .45rem; font-size: .88rem; font-weight: 600; color: var(--ink-soft); }
.field-label i { font-style: normal; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--red); margin-left: .35rem; }
.field-label i.optional { color: var(--faint); }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .85rem .95rem;
  font: inherit;
  font-size: .97rem;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease);
}

.field textarea { resize: vertical; min-height: 96px; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(185, 31, 40, .11);
}

.field input[aria-invalid="true"] { border-color: var(--red); background: #fffafa; }

.field-hint { display: block; margin-top: .45rem; font-size: .81rem; color: var(--faint); }

.field-reveal-wrap { position: relative; display: block; }
.field-reveal-wrap input { padding-right: 4.4rem; }

.field-reveal {
  position: absolute;
  top: 50%; right: .5rem;
  transform: translateY(-50%);
  padding: .4rem .6rem;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.field-reveal:hover { color: var(--red); }

/* Switch ------------------------------------------------------------------ */

.switch-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  margin-bottom: 1.15rem;
  background: var(--wash);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}

.switch-card.is-on { border-color: rgba(185, 31, 40, .4); background: #fff6f6; }

.switch-copy { flex: 1; min-width: 0; }
.switch-copy strong { display: block; font-size: .95rem; }
.switch-copy small { display: block; margin-top: .15rem; font-size: .82rem; color: var(--muted); }

.switch {
  flex-shrink: 0;
  width: 50px; height: 29px;
  padding: 0;
  background: #cfd5dc;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .28s var(--ease);
}

.switch[aria-checked="true"] { background: var(--red); }

.switch-knob {
  display: block;
  width: 23px; height: 23px;
  margin-left: 3px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
  transition: transform .28s var(--ease);
}

.switch[aria-checked="true"] .switch-knob { transform: translateX(21px); }

/* Reveals when the switch turns on. Height is animated via max-height so it
   works without measuring, and the panel is short enough that the easing
   still reads as natural. */
.creator-panel {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .45s var(--ease), opacity .3s var(--ease), margin .45s var(--ease);
}

.creator-panel[hidden] { display: block; }
.creator-panel.is-open { max-height: 520px; opacity: 1; margin-bottom: 1.15rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .1rem 0 1.15rem; }

.chip {
  padding: .5rem .9rem;
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s var(--ease);
}

.chip:hover { border-color: var(--faint); }
.chip.is-on { color: #fff; background: var(--red); border-color: var(--red); }

/* Feedback ---------------------------------------------------------------- */

.form-feedback { min-height: 1.2rem; margin-bottom: .9rem; font-size: .9rem; color: var(--red); font-weight: 600; }
.form-feedback:empty { min-height: 0; margin-bottom: 0; }

.form-legal { margin-top: 1rem; font-size: .8rem; color: var(--faint); text-align: center; }

.apply-done { text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; border: 1px solid var(--line); border-radius: 18px; background: var(--wash); }
.apply-done h2 { margin: 1.4rem 0 .8rem; font-size: 1.9rem; }
.apply-done p { color: var(--muted); max-width: 44ch; margin-inline: auto; }
.done-timing { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.done-timing strong { color: var(--ink); }

.done-mark svg { width: 62px; height: 62px; margin: 0 auto; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.done-mark circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .6s var(--ease) forwards; }
.done-mark path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw .35s var(--ease) .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Footer ------------------------------------------------------------------ */

.site-footer {
  padding: 3.5rem max(1.25rem, calc((100vw - var(--shell)) / 2));
  text-align: center;
  border-top: 1px solid var(--line);
  background: var(--wash);
}

.footer-mark { width: 128px; margin: 0 auto 1.3rem; }
.footer-address { font-size: .88rem; color: var(--muted); }
.footer-links { margin-top: .7rem; font-size: .88rem; display: flex; gap: .6rem; justify-content: center; color: var(--faint); }
.footer-links a { color: var(--ink-soft); font-weight: 600; text-decoration: none; }
.footer-links a:hover { color: var(--red); }
.footer-fine { margin-top: 1.4rem; font-size: .78rem; color: var(--faint); }

/* Reveal on scroll -------------------------------------------------------- */

/* Hidden only when the inline script in <head> has confirmed JavaScript is
   running. Otherwise every .reveal stays at its natural, visible state. */
.js-reveals .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-reveals .reveal.is-in { opacity: 1; transform: none; }
.js-reveals .reveal[data-delay="1"] { transition-delay: .08s; }
.js-reveals .reveal[data-delay="2"] { transition-delay: .16s; }
.js-reveals .reveal[data-delay="3"] { transition-delay: .24s; }
.js-reveals .reveal[data-delay="4"] { transition-delay: .32s; }

/* Motion is decoration here; none of it carries meaning, so it can all go. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-reveals .reveal { opacity: 1; transform: none; }
  .creator-panel.is-open { max-height: 520px; }
}

/* ==========================================================================
   Motion layer
   ========================================================================== */

/* Reading progress -------------------------------------------------------- */

.read-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  height: 3px;
  background: linear-gradient(90deg, var(--red), #ff8f97);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* Hero layout with a photo ------------------------------------------------ */

.hero { position: relative; }

.hero-inner { position: relative; z-index: 2; will-change: transform, opacity; }
.hero-field { will-change: transform; }

@media (min-width: 1024px) {
  .hero-inner { width: var(--shell); }
  .lede, .hero-actions, .hero-stats, .hero .eyebrow { max-width: 40rem; }
  .hero-title { max-width: 44rem; }
  .lede { max-width: 34rem; }
}

.story-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Hidden below 1024px: at that width the photo competes with the headline
   rather than supporting it, and the words are what convert. */

/* Photo placeholders ------------------------------------------------------ */
/* Shown only when the image fails to load, so the layout reads as designed
   rather than broken while real photography is being chosen. */

.shot-empty { display: none; }

.is-empty img { display: none; }

.is-empty .shot-empty {
  display: grid;
  place-content: center;
  gap: .35rem;
  height: 100%;
  padding: 1.5rem;
  text-align: center;
  background:
    linear-gradient(140deg, rgba(185, 31, 40, .28), rgba(23, 26, 33, .95)),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 10px, transparent 10px 20px);
}

.is-empty .shot-empty span { font-size: .95rem; font-weight: 700; color: rgba(255, 255, 255, .82); }
.is-empty .shot-empty small { font-size: .78rem; color: rgba(255, 255, 255, .45); font-family: ui-monospace, monospace; }

.story-shot.is-empty .shot-empty {
  background:
    linear-gradient(140deg, rgba(185, 31, 40, .16), rgba(18, 20, 26, .06)),
    repeating-linear-gradient(45deg, rgba(18, 20, 26, .04) 0 10px, transparent 10px 20px);
}

.story-shot.is-empty .shot-empty span { color: var(--ink-soft); }
.story-shot.is-empty .shot-empty small { color: var(--faint); }

/* Story ------------------------------------------------------------------- */

.story {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 1.1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}

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

.story-shot {
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -50px rgba(18, 20, 26, .6);
  will-change: transform;
}

.story-copy h2 { margin: .9rem 0 1.1rem; font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
.story-lede { color: var(--muted); font-size: 1.04rem; }

.story-points { margin: 1.9rem 0 0; padding: 0; list-style: none; display: grid; gap: 1rem; }

.story-points li {
  position: relative;
  padding-left: 1.7rem;
  font-size: .97rem;
  color: var(--muted);
}

.story-points strong { display: block; color: var(--ink); font-weight: 700; }

.story-points li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: .55rem; height: .55rem;
  background: var(--red);
  border-radius: 50%;
}

/* Stagger ----------------------------------------------------------------- */
/* Delay is set from DOM order by script, so markup carries no presentation. */

.js-reveals [data-stagger] > .reveal { transition-delay: var(--stagger, 0ms); }

/* Tilt -------------------------------------------------------------------- */

[data-tilt],
.js-reveals [data-tilt].reveal.is-in {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

/* The reveal owns transform until it finishes; tilting before then would
   fight the entrance animation and jitter. */
.js-reveals [data-tilt].reveal:not(.is-in) { transform: translateY(22px); }

.step[data-tilt] { position: relative; overflow: hidden; }

/* A soft highlight that tracks the cursor. Pure decoration, so it sits behind
   the content and never intercepts a click. */
.step[data-tilt]::after,
.tier[data-tilt]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(185, 31, 40, .09), transparent 62%);
  opacity: 0;
  transition: opacity .35s var(--ease);
  pointer-events: none;
}

.tier[data-tilt]::after { background: radial-gradient(320px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(255, 143, 151, .16), transparent 62%); }

.step[data-tilt]:hover::after,
.tier[data-tilt]:hover::after { opacity: 1; }

/* Counters keep their own width so the layout does not jump as digits land. */
.hero-stats dd span[data-count] { display: inline-block; font-variant-numeric: tabular-nums; }

/* Invalid form shake ------------------------------------------------------ */

@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

.apply-form.is-shaking { animation: shake .5s var(--ease); }

/* Reduced motion ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .read-progress { display: none; }
  .story-shot, .hero-inner, .hero-field { transform: none !important; }
  .hero-inner { opacity: 1 !important; }
  [data-tilt] { transform: none !important; }
  .apply-form.is-shaking { animation: none; }
}

/* ==========================================================================
   Header contrast, kinetic headline
   ========================================================================== */

/* The header floats over a near-black hero, so the links start light and flip
   to dark only once the bar itself turns white. They were dark-on-dark
   before, which made them all but invisible over the hero. */

.site-nav a {
  position: relative;
  font-size: .94rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .88);
}

.site-nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 2px;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform .35s var(--ease);
}

.site-nav a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.site-nav a:not(.nav-cta):hover { color: #fff; }

.site-header.is-stuck .site-nav a { color: var(--ink); }
.site-header.is-stuck .site-nav a:not(.nav-cta):hover { color: var(--red); }

.nav-cta {
  background: var(--red);
  box-shadow: 0 8px 22px -10px rgba(185, 31, 40, .9);
  overflow: hidden;
}

/* A sheen that crosses the button on hover. */
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, .42) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s var(--ease);
}

.nav-cta:hover::before { transform: translateX(120%); }
.nav-cta:hover { background: var(--red-lift); transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(185, 31, 40, 1); }
.site-header.is-stuck .nav-cta { color: #fff !important; }

/* Kinetic headline -------------------------------------------------------- */

.hero-title {
  margin: 1.1rem 0 0;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  max-width: 44rem;
  display: grid;
  gap: .06em;
}

.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }

/* Each line rises from behind its own clipping edge, which reads far more
   deliberately than the whole block fading at once. */
.js-reveals .hero-title .line > span,
.js-reveals .hero-title .rotator-track {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
}

.js-reveals .hero-title.is-lit .line > span,
.js-reveals .hero-title.is-lit .rotator-track {
  transform: translateY(0);
  opacity: 1;
  transition: transform .95s cubic-bezier(.16, 1, .3, 1), opacity .7s ease;
  transition-delay: var(--line-delay, 0ms);
}

/* Rotator ----------------------------------------------------------------- */

.rotator { position: relative; display: block; min-height: 1.16em; }

.rotator-track { position: relative; display: block; }

.rotator-word {
  position: absolute;
  inset: 0;
  white-space: nowrap;
  color: #ff8f97;
  opacity: 0;
  transform: translateY(70%) rotateX(-55deg);
  transform-origin: 50% 0;
  transition: opacity .26s var(--ease), transform .6s cubic-bezier(.16, 1, .3, 1);
  will-change: transform, opacity;
}

.rotator-word.is-live { position: relative; opacity: 1; transform: none; transition: opacity .45s var(--ease) .12s, transform .6s cubic-bezier(.16, 1, .3, 1); }

.rotator-word.is-leaving {
  opacity: 0;
  transform: translateY(-70%) rotateX(55deg);
}

/* Scroll cue -------------------------------------------------------------- */

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: .55rem;
  translate: -50% 0;
  text-decoration: none;
  opacity: .62;
  transition: opacity .3s var(--ease);
}

.scroll-cue:hover { opacity: 1; }

.scroll-cue-text { font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }

.scroll-cue-line {
  width: 1px;
  height: 44px;
  background: linear-gradient(rgba(255, 255, 255, .06), rgba(255, 255, 255, .7));
  position: relative;
  overflow: hidden;
}

.scroll-cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red);
  animation: cue-run 2.1s var(--ease) infinite;
}

@keyframes cue-run {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

@media (max-width: 1023px) { .scroll-cue { display: none; } }

/* Ambient beams ----------------------------------------------------------- */

.beam {
  position: absolute;
  top: -30%;
  width: 1px;
  height: 160%;
  background: linear-gradient(transparent, rgba(255, 143, 151, .5), transparent);
  opacity: 0;
  animation: beam-fall 9s linear infinite;
}

.beam-1 { left: 22%; animation-delay: 0s; }
.beam-2 { left: 58%; animation-delay: 3.1s; }
.beam-3 { left: 81%; animation-delay: 6.2s; }

@keyframes beam-fall {
  0%   { opacity: 0; transform: translateY(-40%); }
  12%  { opacity: .85; }
  70%  { opacity: .3; }
  100% { opacity: 0; transform: translateY(40%); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .line > span,
  .hero-title .rotator-track { transform: none; opacity: 1; }
  .rotator-word { position: absolute; }
  .rotator-word.is-live { position: relative; }
  .scroll-cue-line::after, .beam { animation: none; }
  .beam { display: none; }
  .nav-cta::before { display: none; }
}

/* The basis for the commission percentage, stated beside the numbers rather
   than left to small print. Partners deciding whether to join need it here. */
.section-note {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--red);
  font-size: .95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}

/* ==========================================================================
   Earning potential calculator
   ========================================================================== */

.potential { scroll-margin-top: 90px; }

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3.1rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 18px;
}

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

.calc-inputs { display: grid; gap: 1.9rem; align-content: center; }

.calc-field { display: block; }

.calc-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.calc-label em {
  font-style: normal;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

.calc-scale { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .76rem; color: var(--faint); }
.calc-scale i { font-style: normal; }

/* Range input, styled consistently rather than left to each browser. */
.calc-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--red) var(--fill, 30%), #dfe3e8 var(--fill, 30%));
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: #fff;
  border: 3px solid var(--red);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(185, 31, 40, .35);
  cursor: grab;
  transition: transform .18s var(--ease);
}

.calc-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.14); }
.calc-field input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.05); }

.calc-field input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: #fff;
  border: 3px solid var(--red);
  border-radius: 50%;
  cursor: grab;
}

.calc-field input[type="range"]:focus-visible { outline: 2.5px solid var(--red); outline-offset: 6px; }

.calc-result {
  display: grid;
  align-content: center;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: var(--night);
  color: #fff;
  border-radius: 14px;
  text-align: center;
}

.calc-tier { font-size: .88rem; color: rgba(255, 255, 255, .62); line-height: 1.5; }
.calc-tier strong { color: #ff8f97; }

.calc-amount {
  margin: .6rem 0 .2rem;
  font-size: clamp(2.3rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.calc-period { font-size: .88rem; color: rgba(255, 255, 255, .6); }
.calc-period strong { color: rgba(255, 255, 255, .92); }

.calc-bar {
  height: 5px;
  margin: 1.4rem 0 .75rem;
  background: rgba(255, 255, 255, .13);
  border-radius: 999px;
  overflow: hidden;
}

.calc-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--red), #ff8f97);
  border-radius: 999px;
  transition: width .5s var(--ease);
}

.calc-next { font-size: .8rem; color: rgba(255, 255, 255, .5); }

.calc-caveat {
  max-width: 70ch;
  margin: 1.2rem 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--faint);
}

/* ==========================================================================
   Hero photograph
   ========================================================================== */

/* The photograph occupies the right of the hero rather than the full width, so
   the headline on the left and the cards inside the image never share space.
   Its left edge is feathered rather than cut, so it reads as part of the
   background instead of a panel dropped on top of it. */
.hero-media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: auto;
  width: min(80%, 1500px);
  height: 100%;
  object-fit: cover;
  object-position: right center;

  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 9%, #000 22%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 7%, #000 15%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.4) 9%, #000 22%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.5) 7%, #000 15%, #000 88%, transparent 100%);
  mask-composite: intersect;
}

/* The mask now does the fading, so this only has to keep the header and the
   scroll cue readable over the brighter parts of the image. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(13, 15, 20, .82) 0%, rgba(13, 15, 20, .3) 12%, transparent 26%),
    linear-gradient(to right, rgba(13, 15, 20, .88) 0%, rgba(13, 15, 20, .72) 20%, rgba(13, 15, 20, .3) 34%, transparent 46%);
}

/* Below the layout breakpoint the text cannot sit clear of the subject, so the
   photograph steps back and becomes atmosphere rather than content. */
@media (max-width: 1023px) {
  .hero-media {
    width: 100%;
    opacity: .38;
    object-position: 74% center;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }
  .hero-scrim {
    background: linear-gradient(to bottom, rgba(13, 15, 20, .9) 0%, rgba(13, 15, 20, .7) 45%, rgba(13, 15, 20, .95) 100%);
  }
}

/* The grid reads as noise over a photograph; it was giving an empty background
   structure it no longer needs. */
.grid-veil { opacity: .28; }

.beam { opacity: 0; background: linear-gradient(transparent, rgba(255, 143, 151, .22), transparent); }

@media (max-width: 1023px) { .beam { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero-media { transform: none !important; }
}

/* ==========================================================================
   Earning potential calculator
   ========================================================================== */

.potential { scroll-margin-top: 90px; }

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .78fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 2.4rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 18px;
}

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

.calc-inputs { display: grid; gap: 1.9rem; align-content: center; }

.calc-field { display: block; }

.calc-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .8rem;
  font-size: .93rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.calc-label em {
  font-style: normal;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

.calc-scale { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .76rem; color: var(--faint); }
.calc-scale i { font-style: normal; }

/* Range input, styled consistently rather than left to each browser. */
.calc-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, var(--red) var(--fill, 30%), #dfe3e8 var(--fill, 30%));
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  background: #fff;
  border: 3px solid var(--red);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(185, 31, 40, .35);
  cursor: grab;
  transition: transform .18s var(--ease);
}

.calc-field input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.14); }
.calc-field input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.05); }

.calc-field input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: #fff;
  border: 3px solid var(--red);
  border-radius: 50%;
  cursor: grab;
}

.calc-field input[type="range"]:focus-visible { outline: 2.5px solid var(--red); outline-offset: 6px; }

.calc-result {
  display: grid;
  align-content: center;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  background: var(--night);
  color: #fff;
  border-radius: 14px;
  text-align: center;
}

.calc-tier { font-size: .88rem; color: rgba(255, 255, 255, .62); line-height: 1.5; }
.calc-tier strong { color: #ff8f97; }

.calc-amount {
  margin: .6rem 0 .2rem;
  font-size: clamp(2.3rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.calc-period { font-size: .88rem; color: rgba(255, 255, 255, .6); }
.calc-period strong { color: rgba(255, 255, 255, .92); }

.calc-bar {
  height: 5px;
  margin: 1.4rem 0 .75rem;
  background: rgba(255, 255, 255, .13);
  border-radius: 999px;
  overflow: hidden;
}

.calc-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--red), #ff8f97);
  border-radius: 999px;
  transition: width .5s var(--ease);
}

.calc-next { font-size: .8rem; color: rgba(255, 255, 255, .5); }

.calc-caveat {
  max-width: 70ch;
  margin: 1.2rem 0 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--faint);
}

/* ==========================================================================
   Commission rate emphasis
   ========================================================================== */

/* Replaces the plain eyebrow. The rate is the single most persuasive fact on
   the page, so it leads rather than sitting in a statistics row below the fold. */
.rate-badge {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .5rem .5rem .55rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 143, 151, .28);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
  backdrop-filter: blur(6px);
}

.rate-badge-mark {
  padding: .32rem .72rem;
  background: var(--red);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .01em;
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(185, 31, 40, .9);
}

.rate-badge > span:last-child { padding-right: .55rem; }

@media (max-width: 520px) {
  .rate-badge { font-size: .78rem; gap: .5rem; }
  .rate-badge-mark { font-size: .78rem; padding: .3rem .6rem; }
}

/* Three facts that give the percentage meaning. Each is a property of how the
   programme works, so none of them depends on results we cannot yet show. */
.rate-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.2rem 2.5rem;
  margin: 2.6rem 0 0;
  padding: 1.6rem 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.rate-facts li { display: grid; gap: .3rem; }

.rate-facts strong {
  font-size: 1.02rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}

.rate-facts strong::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .55rem;
  background: var(--red);
  border-radius: 50%;
  vertical-align: middle;
}

.rate-facts span { font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, .6); }

/* The top rate carries the section, so it is given more weight than the two
   below it rather than being one of three equal cards. */
.tier-top .tier-rate { font-size: clamp(3rem, 5.6vw, 4rem); }

/* ==========================================================================
   Calculator: presets and tier track
   ========================================================================== */

.calc-presets { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.9rem; }
.calc-presets-label { font-size: .84rem; font-weight: 600; color: var(--faint); margin-right: .2rem; }

.preset {
  padding: .45rem .95rem;
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: all .22s var(--ease);
}

.preset:hover { border-color: var(--red); color: var(--red); transform: translateY(-1px); }
.preset.is-on { color: #fff; background: var(--red); border-color: var(--red); }

/* Tier track ---------------------------------------------------------------
   Turns the bare progress bar into the journey it was always describing, so
   the milestones are visible before you reach them rather than only mentioned
   once passed. */

.tier-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
}

.tier-track::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 12%;
  right: 12%;
  height: 3px;
  background: #dfe3e8;
  border-radius: 999px;
}

.tier-track-fill {
  position: absolute;
  top: 7px;
  left: 12%;
  height: 3px;
  width: 0;
  max-width: 76%;
  background: linear-gradient(90deg, var(--red), #ff8f97);
  border-radius: 999px;
  transition: width .55s var(--ease);
}

.tier-track li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .3rem;
  text-align: center;
}

.tier-dot {
  width: 17px;
  height: 17px;
  background: #fff;
  border: 3px solid #dfe3e8;
  border-radius: 50%;
  transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}

.tier-track li.is-reached .tier-dot { border-color: var(--red); }

.tier-track li.is-current .tier-dot {
  transform: scale(1.28);
  border-color: var(--red);
  box-shadow: 0 0 0 5px rgba(185, 31, 40, .16);
}

.tier-track strong { font-size: .88rem; font-weight: 700; color: var(--faint); transition: color .3s var(--ease); }
.tier-track small { font-size: .78rem; color: var(--faint); transition: color .3s var(--ease); }

.tier-track li.is-reached strong { color: var(--ink); }
.tier-track li.is-current strong,
.tier-track li.is-current small { color: var(--red); }

/* Result card --------------------------------------------------------------
   Reacts when a threshold is crossed, so reaching a tier registers as an event
   rather than a number quietly changing. */

.calc-result { position: relative; overflow: hidden; transition: box-shadow .5s var(--ease); }

.calc-result::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 60% at 50% 0%, rgba(185, 31, 40, .34), transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}

.calc-result.is-elite::after { opacity: 1; }
.calc-result.is-elite { box-shadow: 0 0 0 1px rgba(255, 143, 151, .28), 0 22px 50px -30px rgba(185, 31, 40, .8); }

@keyframes tier-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.045); }
  100% { transform: scale(1); }
}

.calc-result.is-shifting { animation: tier-pop .5s var(--ease); }

.calc-amount { position: relative; }

@media (prefers-reduced-motion: reduce) {
  .calc-result.is-shifting { animation: none; }
  .tier-track-fill { transition: none; }
}