/* ==========================================================================
   Dareto recruiting funnel — design v3.1
   Tokens and measurements are taken verbatim from the design handoff.
   No build step: this file ships as written.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
/* Self-hosted per handoff — no Google Fonts CDN, no third-party request. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url('/fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --violet: #680E53;
  --violet-hover: #7E1265;
  --violet-tint: #D9A0CB;
  --violet-chip: rgba(104, 14, 83, .08);

  --ink: #0C0D10;
  --ink-form: #0A0B0D;
  --surface-dark: #15161B;
  --surface-dark-alt: #16181C;

  /* Signal: the development path, progress and reveal. Never decorative. */
  --signal: #C98A2B;

  --paper: #F7F5F2;
  --card: #FFFFFF;

  --text-light-1: #C7C9CE;
  --text-light-2: #9A9EA6;
  --text-dark-1: #3C4048;
  --text-dark-2: #6D717A;

  --hairline-light: rgba(255, 255, 255, .18);
  --hairline-strong: rgba(255, 255, 255, .28);
  --hairline-faint: rgba(255, 255, 255, .1);
  --hairline-rung: rgba(255, 255, 255, .25);
  --hairline-dark: rgba(10, 11, 13, .08);

  --radius-card: 18px;
  --radius-panel: 20px;
  --radius-panel-lg: 28px;
  --radius-chip: 11px;
  --radius-input: 12px;
  --radius-option: 14px;
  --radius-pill: 999px;

  --font-sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap-wide: 1120px;
  --wrap-form: 720px;
  --wrap-offer: 860px;
}

/* ------------------------------------------------------------------ reset */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.55;
  color: #FFFFFF;
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* German writes "Qualifizierungsgespräche" and expects it to fit. On a 390px phone a
     word like that is wider than the column it lives in, and a word that cannot break
     does not overflow quietly — it pushes its whole box out from under the card behind
     it, leaving white text standing on white paper. `anywhere` rather than `break-word`
     because only `anywhere` also tells grid and flex that a box may be narrower than its
     longest word, which is what actually moved the box. It changes nothing that already
     fits: a word only breaks when the alternative is overflowing. */
  overflow-wrap: anywhere;
}

/* Where a hard break would land mid-word, hyphenate instead. Deliberately not on the
   display headings: hyphenation changes where lines wrap even when nothing overflows,
   and those are set to a rag somebody chose. */
p,
li,
dd,
figcaption,
.ladder__title,
.card__title,
.chip {
  hyphens: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
}

a {
  color: var(--signal);
  text-decoration: none;
}

a:hover {
  color: #FFFFFF;
}

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

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------- primitives */

.wrap {
  max-width: var(--wrap-wide);
  margin: 0 auto;
}

.wrap-form {
  max-width: var(--wrap-form);
  margin: 0 auto;
}

.wrap-offer {
  max-width: var(--wrap-offer);
  margin: 0 auto;
}

.kicker {
  margin: 0 0 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.kicker--violet {
  color: var(--violet);
}

.kicker--signal {
  color: var(--signal);
}

.kicker--muted {
  color: var(--text-light-2);
}

.kicker--muted-dark {
  color: var(--text-dark-2);
}

.kicker--sm {
  font-size: 12px;
  letter-spacing: .12em;
  margin-bottom: 14px;
}

.h1 {
  margin: 0 0 24px;
  font-size: clamp(42px, 9.6vw, 104px);
  line-height: .96;
  letter-spacing: -.045em;
  font-weight: 800;
  max-width: 940px;
  text-wrap: balance;
}

.h2 {
  margin: 0 0 36px;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 800;
}

.h2--about {
  margin-bottom: 26px;
  max-width: 800px;
}

.h2--tight {
  margin-bottom: 22px;
}

.mono {
  font-family: var(--font-mono);
}

.arrow {
  font-family: var(--font-mono);
}

/* Buttons are pills throughout — handoff rule, no exceptions. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background .15s linear, border-color .15s linear, transform .15s ease, color .15s linear;
}

.btn--cta {
  background: var(--violet);
  border-color: var(--violet);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  padding: 18px 32px;
  min-height: 58px;
  box-shadow: 0 8px 32px rgba(104, 14, 83, .45);
}

.btn--cta:hover {
  background: var(--violet-hover);
  border-color: var(--violet-hover);
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* The one action the page exists for, so it is deliberately the largest thing that is
   not a heading — and full width on a phone, where a centred pill is easy to scroll past. */
.btn--apply {
  font-size: clamp(18px, 2.2vw, 21px);
  font-weight: 700;
  padding: 22px 42px;
  min-height: 68px;
  box-shadow: 0 10px 36px rgba(104, 14, 83, .5);
}

@media (max-width: 560px) {
  .btn--apply {
    width: 100%;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.btn--signal {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink-form);
  font-size: 18px;
  font-weight: 700;
  padding: 18px 28px;
  min-height: 60px;
}

.btn--signal:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: var(--ink-form);
}

.btn--primary {
  background: var(--violet);
  border-color: var(--violet);
  color: #FFFFFF;
  font-size: 17px;
  font-weight: 700;
  padding: 16px 26px;
  min-height: 56px;
}

.btn--primary:hover {
  background: var(--violet-hover);
  border-color: var(--violet-hover);
  color: #FFFFFF;
}

.btn--block {
  width: 100%;
  font-size: 18px;
  padding: 18px 28px;
  min-height: 60px;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: .55;
  cursor: progress;
  transform: none;
}

.link-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #FFFFFF;
  transition: border-color .15s linear;
}

.link-pill:hover {
  border-color: var(--signal);
  color: #FFFFFF;
}

.back-link {
  display: block;
  margin-top: 28px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--hairline-strong);
  padding: 4px 0;
  color: var(--text-light-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.back-link:hover {
  color: #FFFFFF;
}

/* Error messaging is plain text on a signal-coloured bar. */
.form-error {
  margin: 16px 0 0;
  background: var(--signal);
  color: var(--ink-form);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 700;
}

/* ============================================================ landing page */

.landing {
  overflow-x: hidden;
}

.site-header {
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--wrap-wide);
  margin: 0 auto;
}

.logo {
  height: 30px;
  width: auto;
  display: block;
}

.hero {
  position: relative;
  padding: clamp(56px, 9vw, 110px) 24px clamp(48px, 7vw, 88px);
  background: radial-gradient(90% 70% at 78% 0%, rgba(104, 14, 83, .5), transparent 62%);
}

.hero .kicker {
  margin-bottom: 20px;
}

/* Chips sit under the headline in v3.1. */
.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}

.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--text-light-1);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius-pill);
  padding: 7px 14px;
}

.hero__accent {
  color: var(--violet-tint);
}

.hero__sub {
  margin: 0;
  font-size: clamp(18px, 2.4vw, 22px);
  color: var(--text-light-1);
  max-width: 620px;
  font-weight: 500;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 40px;
}

.section {
  padding: clamp(64px, 9vw, 104px) 24px 0;
}

.section--bottom {
  padding: clamp(64px, 9vw, 104px) 24px;
}

.section--flush {
  padding: 0 24px;
}

/* Sits right after the development ladder — the point where the page has made its case. */
.section--mid-cta {
  padding: clamp(56px, 8vw, 84px) 24px clamp(56px, 8vw, 84px);
}

.mid-cta {
  display: flex;
  justify-content: center;
}

.section--conditions {
  padding: clamp(56px, 8vw, 88px) 24px 0;
}

.section--process {
  padding: clamp(56px, 8vw, 88px) 24px clamp(64px, 9vw, 104px);
}

.paper {
  background: var(--paper);
  color: var(--ink-form);
  border-radius: 32px 32px 0 0;
}

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.prose {
  display: grid;
  gap: 16px;
  font-size: 17px;
  color: var(--text-dark-1);
}

.prose p {
  margin: 0;
}

/* Opening passage of the Dareto section, one step up from body copy. */
.prose__lead {
  margin-bottom: 4px !important;
  font-size: clamp(19px, 2.6vw, 23px);
  line-height: 1.45;
  color: var(--ink-form);
}

.prose__emphasis {
  font-weight: 700;
  color: var(--ink-form);
}

.section__intro {
  margin: 0 0 32px;
  font-size: 17px;
  color: var(--text-dark-1);
  max-width: 720px;
}

.about__images {
  display: grid;
  gap: 14px;
}

.image-frame {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative;
  background: rgba(10, 11, 13, .06);
}

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

/* Shown until a real photo is dropped in — carries the shot briefing. */
.image-frame__briefing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  /* One step darker than the muted body text: at 12px the lighter tone fails AA. */
  color: var(--text-dark-1);
  border: 1px dashed rgba(10, 11, 13, .18);
  border-radius: var(--radius-card);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}

.card-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.card-grid--pair {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.card {
  background: var(--card);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-card);
  padding: 26px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.card--icon {
  gap: 8px;
}

.card__number {
  display: inline-flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  background: var(--violet-chip);
  border-radius: var(--radius-chip);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--violet);
}

.card__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-chip);
  background: var(--violet-chip);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.card__title {
  font-size: 18px;
}

.card__title--sm {
  font-size: 17px;
}

.card__text {
  margin: 0;
  font-size: 16px;
  color: var(--text-dark-2);
}

.section__footnote {
  margin: 28px 0 0;
  font-size: 18px;
  font-weight: 700;
  max-width: 760px;
}

/* ------------------------------------------------- development perspective */
/* The centrepiece of the page: what this role turns into. */

.ladder-card {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  background: var(--ink);
  color: #FFFFFF;
  border-radius: var(--radius-panel-lg);
  padding: clamp(32px, 6vw, 64px);
  background-image: radial-gradient(70% 90% at 90% 10%, rgba(104, 14, 83, .4), transparent 60%);
}

.ladder-card__heading {
  margin: 0 0 14px;
  font-size: clamp(30px, 5.4vw, 50px);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 800;
  max-width: 720px;
}

.ladder {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* minmax(0, …) rather than a bare 1fr: a plain fr track refuses to go below the widest
   word in it, and refusing here does not clip the rung, it slides the whole ladder out
   past the edge of the card it is printed on. */
.ladder__step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 20px;
}

/* The rail is decoration; on a phone it was taking a fifth of the line length. */
@media (max-width: 560px) {
  .ladder__step {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }

  .ladder__dot {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
}

.ladder__rail {
  display: grid;
  justify-items: center;
  grid-template-rows: auto 1fr;
  gap: 6px;
}

.ladder__dot {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-rung);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--text-light-1);
}

.ladder__step.is-highlight .ladder__dot {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink-form);
  font-weight: 500;
}

.ladder__line {
  width: 1px;
  background: var(--hairline-rung);
}

/* The rail warms up into the highlighted rung and cools down after it. */
.ladder__line--to-signal {
  background: linear-gradient(var(--hairline-rung), var(--signal));
}

.ladder__line--from-signal {
  background: linear-gradient(var(--signal), var(--hairline-rung));
}

.ladder__body {
  padding: 8px 0 36px;
}

.ladder__step:last-child .ladder__body {
  padding-bottom: 0;
}

.ladder__title {
  font-size: 20px;
}

.ladder__step.is-highlight .ladder__title {
  color: var(--signal);
}

.ladder__text {
  margin: 6px 0 0;
  font-size: 16px;
  color: var(--text-light-2);
  max-width: 620px;
}

.ladder__step.is-highlight .ladder__text {
  color: var(--text-light-1);
}

.ladder-card__closing {
  margin: 40px 0 0;
  font-size: clamp(18px, 2.6vw, 22px);
  font-weight: 700;
  max-width: 760px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: 26px;
}

/* ------------------------------------------------------------ requirements */

.req-card {
  background: var(--card);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-card);
  padding: clamp(26px, 4vw, 36px);
}

.req-card h3 {
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.req-card--muted h3 {
  color: var(--text-dark-2);
}

.marker-list {
  display: grid;
  gap: 12px;
  font-size: 16px;
  color: var(--text-dark-1);
}

.marker-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
}

.marker-list--muted {
  color: var(--text-dark-2);
}

.marker--check {
  color: var(--violet);
  font-weight: 700;
}

/* ------------------------------------------------------------- conditions */

.conditions-card {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-card);
  padding: clamp(26px, 4vw, 36px);
}

.conditions-card .kicker {
  margin-bottom: 18px;
}

.conditions-list {
  display: grid;
  gap: 12px;
  font-size: 16px;
  color: var(--text-dark-1);
  max-width: 860px;
}

.conditions-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
}

.conditions-list__dash {
  font-family: var(--font-mono);
  color: var(--text-light-2);
}

.conditions-list__emphasis {
  color: var(--ink-form);
}

/* ---------------------------------------------------------------- process */

.process {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  max-width: 800px;
}

.process li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 16px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--hairline-dark);
  border-radius: 16px;
  padding: 18px 22px;
}

.process__number {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--violet);
  font-weight: 500;
}

.process__text {
  font-size: 16px;
}

.process li.is-highlight {
  background: var(--violet);
  color: #FFFFFF;
  border-color: var(--violet);
}

.process li.is-highlight .process__number {
  color: var(--violet-tint);
}

/* --------------------------------------------------------------- closing */

.final-cta {
  background: var(--ink);
  padding: clamp(72px, 10vw, 120px) 24px;
  background-image: radial-gradient(80% 80% at 50% 110%, rgba(104, 14, 83, .55), transparent 65%);
}

.final-cta__inner {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.final-cta h2 {
  margin: 0 0 20px;
  font-size: clamp(32px, 7vw, 60px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 800;
  text-wrap: balance;
}

.final-cta p {
  margin: 0 auto 36px;
  font-size: 17px;
  color: var(--text-light-2);
  max-width: 540px;
}

.site-footer {
  background: var(--ink);
  color: var(--text-light-2);
  padding: 8px 24px 48px;
  border-top: 1px solid var(--hairline-faint);
}

.site-footer__inner {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 28px;
}

.site-footer__logo {
  height: 22px;
  width: auto;
  display: block;
  opacity: .75;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  font-size: 14px;
}

.site-footer__links a,
.form-footer a {
  color: var(--text-light-2);
}

.site-footer__links a:hover,
.form-footer a:hover {
  color: #FFFFFF;
}

/* Opens the consent layer; sits inline with the footer links and must match them. */
.footer-button {
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
  color: var(--text-light-2);
  cursor: pointer;
}

.footer-button:hover {
  color: #FFFFFF;
}

.site-footer__company {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ============================================== nothing open right now */

.closed {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.closed__main {
  display: flex;
  align-items: center;
  padding: clamp(48px, 10vw, 120px) 24px;
  background: radial-gradient(90% 70% at 78% 0%, rgba(104, 14, 83, .5), transparent 62%);
}

.closed__inner {
  max-width: 640px;
  margin: 0 auto;
}

.closed__heading {
  margin: 0 0 20px;
  font-size: clamp(32px, 7vw, 64px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 800;
  text-wrap: balance;
}

.closed__text {
  margin: 0 0 16px;
  font-size: 17px;
  color: var(--text-light-1);
}

.closed__text--muted {
  margin-bottom: 36px;
  color: var(--text-light-2);
}

/* ====================================================== questionnaire page */

body.form-page {
  background: var(--ink-form);
}

.form-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  line-height: 1.5;
}

.form-header {
  border-bottom: 1px solid var(--hairline-light);
  padding: 14px 20px 0;
}

.form-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-light-2);
}

.form-header__logo {
  height: 22px;
  width: auto;
  display: block;
}

.progress {
  height: 3px;
  background: var(--hairline-light);
  border-radius: 2px;
  margin: 12px 0 8px;
  overflow: hidden;
}

.progress__bar {
  height: 3px;
  background: var(--signal);
  transition: width .2s linear;
  width: 0;
}

.progress__note {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--signal);
}

.form-main {
  padding: 32px 20px 48px;
}

.question__code {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-light-2);
}

.question__title {
  margin: 0 0 8px;
  font-size: clamp(24px, 5.6vw, 36px);
  line-height: 1.12;
  letter-spacing: -.02em;
  font-weight: 800;
  text-wrap: pretty;
}

.question__hint {
  margin: 0 0 28px;
  font-size: 15px;
  color: var(--text-light-2);
}

.options {
  display: grid;
  gap: 10px;
}

.option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 16px 18px;
  min-height: 58px;
  font-size: 17px;
  border-radius: var(--radius-option);
  background: var(--surface-dark-alt);
  border: 1px solid var(--hairline-strong);
  color: #FFFFFF;
  transition: border-color .12s linear, background .12s linear;
}

.option:hover {
  border-color: var(--signal);
}

.option.is-selected {
  background: var(--violet);
  border-color: var(--violet);
}

/* Multiple choice, and only there, gets a tick — several answers stay on screen at once
   and "which ones did I pick" must not rest on colour alone. It sits in the padding the
   rule below reserves, so a long answer wraps against the tick, never under it. */
.options--multi .option {
  position: relative;
  padding-right: 46px;
}

.options--multi .option.is-selected::after {
  content: "✓";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  color: var(--violet-tint);
}

.field {
  width: 100%;
  background: var(--surface-dark-alt);
  border: 1px solid var(--hairline-strong);
  padding: 14px 16px;
  font-size: 17px;
  line-height: 1.5;
  border-radius: var(--radius-input);
  color: #FFFFFF;
  min-height: 52px;
}

.field::placeholder {
  color: var(--text-dark-2);
}

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

.final-fields {
  display: grid;
  gap: 20px;
}

.final-fields label {
  display: grid;
  gap: 6px;
}

.field-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-light-2);
}

/* Closed by default: nothing here is required, and an open file input suggests otherwise. */
.upload {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--radius-input);
}

.upload__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  color: var(--text-light-1);
}

.upload__summary::-webkit-details-marker {
  display: none;
}

/* Disclosure triangle, drawn so it can rotate when the panel opens. */
.upload__summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 6px solid var(--text-light-2);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}

.upload[open] .upload__summary::before {
  transform: rotate(90deg);
}

.upload__toggle {
  font-weight: 700;
  color: #FFFFFF;
}

.upload__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
  border: 1px solid var(--signal);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

.upload__chosen {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--signal);
  flex-basis: 100%;
}

.upload__body {
  display: grid;
  gap: 6px;
  padding: 0 16px 16px;
}

.upload__hint {
  font-size: 15px;
  color: var(--text-light-1);
}

.upload input[type='file'] {
  font-size: 15px;
  margin-top: 6px;
}

.upload__status {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--signal);
}

.upload__reassurance {
  margin: -12px 0 0;
  font-size: 14px;
  color: var(--text-light-2);
}

.consent {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 15px;
  color: var(--text-light-1);
}

.consent input[type='checkbox'] {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--violet);
}

.result {
  max-width: 620px;
}

.result__title {
  margin: 0 0 20px;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
}

.result__title--pass {
  font-size: clamp(28px, 6.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.025em;
}

.result p {
  margin: 0 0 16px;
  font-size: 17px;
  color: var(--text-light-1);
}

.result p:last-of-type {
  margin-bottom: 0;
}

.result__lead {
  margin: 0 0 28px;
  font-size: 17px;
  color: var(--text-light-1);
  max-width: 560px;
}

.code-box {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-option);
  padding: 16px;
  display: grid;
  gap: 4px;
  max-width: 320px;
  margin: 0 0 28px;
}

.code-box__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-light-2);
}

.code-box__value {
  font-family: var(--font-mono);
  font-size: 26px;
  letter-spacing: .06em;
}

.form-footer {
  border-top: 1px solid var(--hairline-light);
  padding: 20px;
  color: var(--text-dark-2);
}

.form-footer__inner {
  max-width: var(--wrap-form);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Shown only when scripting is unavailable — the questionnaire cannot work without it. */
.noscript-notice {
  margin: 0 0 28px;
  background: var(--signal);
  color: var(--ink-form);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 16px;
  font-weight: 700;
}

/* =============================================================== offer page */

.offer-header {
  border-bottom: 1px solid var(--hairline-light);
  padding: 14px 20px;
}

.offer-header__inner {
  max-width: var(--wrap-offer);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-light-2);
}

.offer-header__code {
  color: var(--signal);
}

.offer-section {
  padding: 48px 20px;
  border-bottom: 1px solid var(--hairline-light);
}

/* Whatever comes first gets the top treatment; whatever comes last closes the page. */
.offer-section--lead {
  background: radial-gradient(80% 60% at 80% 0%, rgba(104, 14, 83, .4), transparent 60%);
}

.offer-section--tail {
  padding: 48px 20px 64px;
  border-bottom: 0;
}

.offer-section--plain {
  border-bottom: 0;
}

.offer__title {
  margin: 0 0 12px;
  font-size: clamp(30px, 7vw, 52px);
  line-height: 1.02;
  letter-spacing: -.03em;
  font-weight: 800;
}

.offer__title--sm {
  font-size: clamp(28px, 6.6vw, 46px);
  line-height: 1.03;
  margin-bottom: 20px;
}

.offer__sub {
  margin: 0 0 40px;
  font-size: 18px;
  color: var(--text-light-1);
  max-width: 620px;
}

.offer__gate-text {
  margin: 0 0 28px;
  font-size: 17px;
  color: var(--text-light-1);
}

/* ----------------------------------------------- onboarding and development */

.phases {
  display: grid;
  gap: 0;
}

.phase {
  display: grid;
  grid-template-columns: minmax(96px, 130px) 1fr;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.phase__when {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--text-light-2);
  padding-top: 3px;
}

.phase__when--signal {
  color: var(--signal);
}

.phase__title {
  font-size: 18px;
}

.phase__what {
  margin: 6px 0 0;
  font-size: 16px;
  color: var(--text-light-2);
  max-width: 580px;
}

/* Money is named, never quantified — the numbers belong in the first conversation. */
.money-note {
  margin-top: 32px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 28px);
  max-width: 720px;
  background: rgba(255, 255, 255, .03);
}

.money-note__kicker {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
}

.money-note__text {
  margin: 0;
  font-size: 17px;
  color: #FFFFFF;
}

/* ----------------------------------------------------- voice-message intro */

.intro__lead {
  margin: 0 0 20px;
  font-size: 17px;
  color: var(--text-light-1);
  max-width: 640px;
}

.intro__questions {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin-bottom: 24px;
}

.intro__questions li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  font-size: 17px;
}

.intro__number {
  font-family: var(--font-mono);
  color: var(--signal);
}

.intro__note {
  margin: 0 0 32px;
  font-size: 16px;
  color: var(--text-light-2);
  max-width: 640px;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: stretch;
}

.copy-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  padding: 18px 22px;
  min-height: 60px;
  cursor: pointer;
  border-radius: var(--radius-pill);
  font-size: 16px;
  color: #FFFFFF;
  transition: border-color .15s linear;
}

.copy-btn:hover {
  border-color: var(--signal);
}

.copy-btn__hint {
  font-size: 12px;
  color: var(--text-light-2);
  line-height: 1.2;
}

.copy-btn__row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.copy-btn__code {
  font-family: var(--font-mono);
  letter-spacing: .06em;
}

.copy-btn__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--signal);
}

.closing-note {
  margin: 24px 0 0;
  font-size: 16px;
  color: var(--text-light-2);
}

.offer-footer {
  border-top: 1px solid var(--hairline-light);
  padding: 24px 20px 36px;
  color: var(--text-dark-2);
}

.offer-footer__inner {
  max-width: var(--wrap-offer);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  font-size: 14px;
}

.offer-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.offer-footer__links a {
  color: var(--text-light-2);
}

.offer-footer__links a:hover {
  color: #FFFFFF;
}

.offer-footer__doc {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  align-self: center;
}

/* --------------------------------------------------------------- utilities */

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ job listing */

.listing {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

/* Shorter than a job's hero: this page is a signpost, not the pitch. */
.listing__hero {
  padding: clamp(32px, 6vw, 64px) 24px clamp(48px, 8vw, 88px);
  background: radial-gradient(90% 70% at 78% 0%, rgba(104, 14, 83, .5), transparent 62%);
}

.listing__lead {
  margin: 20px 0 0;
  max-width: 46ch;
  color: var(--text-light-1);
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
}

.listing__body {
  padding: clamp(48px, 8vw, 88px) 24px clamp(64px, 10vw, 112px);
}

/* --------------------------------------------------------------------- search */

.listing__search {
  margin-bottom: clamp(28px, 4vw, 44px);
  max-width: 420px;
}

.listing__search-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dark-2);
  margin-bottom: 8px;
}

.listing__search-input {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  color: var(--ink-form);
  background: var(--card);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-card);
}

.listing__search-input:focus-visible {
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.listing__empty {
  margin: 16px 0 0;
  color: var(--text-dark-2);
}

/* ---------------------------------------------------------------------- cards */

.job-grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);

  /* auto-fit, so one open role fills the row instead of sitting in a narrow column
     beside empty space — the state this page is in most of the time. */
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

.job-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 3vw, 32px);
  background: var(--card);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-panel);
  color: var(--ink-form);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.job-card:hover,
.job-card:focus-visible {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 14px 40px rgba(104, 14, 83, .16);
}

.job-card__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--violet);
}

.job-card__title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink-form);
}

.job-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The dark-background chip, restated for paper. */
.chip--paper {
  color: var(--text-dark-2);
  border-color: var(--hairline-dark);
}

.job-card__sub {
  margin: 0;
  color: var(--text-dark-1);
  line-height: 1.6;

  /* Four lines of the role's own intro: enough to decide whether to open it, not so much
     that the card becomes the page. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-card__cta {
  margin-top: auto;
  padding-top: 6px;
  font-weight: 700;
  color: var(--violet);
}

.job-card:hover .job-card__cta .arrow {
  transform: translateX(3px);
}

.job-card .arrow {
  display: inline-block;
  transition: transform .18s ease;
}

/* --------------------------------------------------------------------- paging */

.listing__pager {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(32px, 4vw, 48px);
}

.listing__page {
  min-width: 40px;
  padding: 10px 12px;
  font: inherit;
  font-family: var(--font-mono);
  color: var(--text-dark-1);
  background: var(--card);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius-card);
  cursor: pointer;
}

.listing__page:hover {
  border-color: var(--violet);
}

.listing__page--current {
  background: var(--violet);
  border-color: var(--violet);
  color: #FFFFFF;
}