:root{
  /* ── primitive: color ── */
  --color-brand:#0061ff;          --color-brand-hover:#034fcb;
  --color-ink:#171728;            --color-body:#686781;
  --color-border:#e4e4ed;         --color-surface:#fff;
  --color-surface-alt:#fafafa;    --color-accent:#ff6969;
  --color-tint:#f2f5ff;           --color-muted:#8c8c9e;
  --color-slate:#33334e;

  /* ── primitive: type ── */
  --font-sans:Roboto,sans-serif;
  --text-h1:46px; --text-h2:32px; --text-h3:24px; --text-h4:22px; --text-h5:18px; --text-h6:16px;
  --text-base:16px; --text-card-title:18px;
  --lh-h1:1.348em; --lh-h2:1.438em; --lh-h3:1.625em; --lh-h4:1.273em; --lh-h5:1.444em;
  --lh-h6:1.5em;  --lh-base:1.75em;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;

  /* ── primitive: space (curated; values are the contract) ── */
  --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:26px; --space-7:40px;
  --space-section:140px;
  --space-btn-y:22px;  --space-btn-x:40px;
  --space-btn-sm-y:16px; --space-btn-sm-x:24px;

  /* ── primitive: radius / shadow / motion ── */
  --radius-card:20px; --radius-card-job:12px; --radius-img:8px; --radius-pill:1000px;
  --shadow-card:0 7px 14px 0 rgba(8,15,52,.03);
  --motion-base:.3s ease;

  /* ── semantic aliases (components consume these) ── */
  --text-heading:var(--color-ink);     --text-body:var(--color-body);
  --surface-card:var(--color-surface); --border-card:var(--color-border);
  --btn-primary-bg:var(--color-brand); --btn-primary-bg-hover:var(--color-brand-hover);
  --btn-primary-fg:var(--color-surface);
  --btn-secondary-bg:var(--color-surface); --btn-secondary-fg:var(--color-slate);
  --btn-secondary-border:var(--color-border);
  --field-border:var(--color-border);  --field-border-focus:var(--color-brand);
  --field-fg:var(--color-ink);         --field-label:var(--color-slate);
  --card-hover-border:var(--color-brand);
}

/* ── responsive type steps: mirror the export's existing breakpoints (≤991/≤767/≤479).
   Reassigning the heading tokens means any consumer of --text-h* inherits the responsive size —
   "mirror existing steps", not a new responsive system (design-questions resolved default).
   No live element consumes these tokens in this PR, so this is visual-neutral. ── */
@media (max-width:991px){:root{--text-h1:38px}}
@media (max-width:767px){:root{--text-h1:32px;--text-h2:27px;--text-h3:22px;--text-h4:20px}}
@media (max-width:479px){:root{--text-h1:27px;--text-h2:22px;--text-h3:20px;--text-h4:18px;--text-h5:16px}}

/* ── buttons (design Pattern 2; primary has NO border) ── */
.btn{display:inline-block;padding:var(--space-btn-y) var(--space-btn-x);border-radius:var(--radius-pill);
  font-family:var(--font-sans);font-weight:var(--weight-semibold);line-height:1.125em;text-align:center;
  text-decoration:none;transition:transform var(--motion-base),background-color var(--motion-base),
  color var(--motion-base),border-color var(--motion-base)}
.btn--primary{background-color:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.btn--primary:hover{background-color:var(--btn-primary-bg-hover);transform:translateY(-2px);color:var(--btn-primary-fg)}
.btn--secondary{border:1px solid var(--btn-secondary-border);background-color:var(--btn-secondary-bg);color:var(--btn-secondary-fg)}
.btn--secondary:hover{border-color:var(--color-brand);background-color:var(--color-brand);transform:translateY(-2px);color:var(--color-surface)}
.btn--sm{padding:var(--space-btn-sm-y) var(--space-btn-sm-x);font-size:var(--text-base)}
.btn--full-width{display:block;align-self:stretch}
.btn--white{background-color:var(--color-surface);color:var(--color-brand)}

/* ── card (generic base) ── */
.card{overflow:hidden;border:1px solid var(--border-card);border-radius:var(--radius-card);
  background-color:var(--surface-card);box-shadow:var(--shadow-card)}

/* ── card--job (REPLACE mode: Webflow .card.job classes removed from anchor) ── */
.card--job{display:flex;max-width:100%;overflow:hidden;align-items:center;justify-content:flex-start;
  padding:15px 18px 20px;border:1px solid var(--border-card);border-radius:var(--radius-card-job);
  background-color:var(--surface-card);box-shadow:var(--shadow-card);color:var(--text-body);
  text-decoration:none;transform:translate(0,0);
  transition:transform var(--motion-base),border-color var(--motion-base)}
.card--job:hover{border-color:var(--card-hover-border);transform:translate(0,-4px);color:var(--text-body)}
@media (max-width:767px){.card--job{flex-direction:column;align-items:stretch;padding-top:10px;padding-bottom:15px}}
@media (max-width:479px){.card--job{padding-right:0;padding-left:10px}}
.card--job__title{margin-bottom:0;font-size:var(--text-card-title);line-height:var(--lh-h3);
  font-weight:var(--weight-medium);color:var(--text-heading)}
@media (max-width:767px){.card--job__title{font-size:var(--text-base)}}

/* ── form field (reproduces .input + the #33334e label variant) ── */
.field{display:flex;flex-direction:column}
.field__label{display:block;margin-bottom:8px;color:var(--field-label);font-weight:var(--weight-medium)}
.field__input{min-height:68px;padding:0 var(--space-5);border:1px solid var(--field-border);
  border-radius:var(--radius-pill);background-color:var(--color-surface);color:var(--field-fg);
  font-size:var(--text-base);transition:color var(--motion-base),border-color var(--motion-base)}
.field__input:hover,.field__input:focus{border-color:var(--field-border-focus)}
.field__required{color:var(--color-accent)}   /* reproduces .accent-secondary-5 (#ff6969) required marker */

/* ── layout (reproduces .container-default + .section, incl. responsive 140/112/90/72) ── */
.container{max-width:1246px;margin-inline:auto;padding-inline:0}   /* no width:100% — block divs fill by default; keeps additive mode inert */
.section{padding-top:var(--space-section);padding-bottom:var(--space-section)}
@media (max-width:991px){.section{padding-top:112px;padding-bottom:112px}}
@media (max-width:767px){.section{padding-top:90px;padding-bottom:90px}}
@media (max-width:479px){.section{padding-top:72px;padding-bottom:72px}}