/* Unistra Ltd Recruitment — permanent placement
   Brand: Royal Blue #1E3B9D · Muted Purple #7F60A2 · Silver Grey #B3B4B8
   Two-track system: royal = employers, purple = candidates.
   Art direction: oversized display type, the brand mark used as a compositional
   device, duotone brand panels, hairline rules instead of boxes everywhere. */

:root {
  --paper:      #F7F8FC;
  --surface:    #FFFFFF;
  --surface-2:  #EDF0F8;
  --ink:        #0D1026;
  --midnight:   #10142F;
  --muted:      #565D7E;
  --line:       #DFE3F0;
  --hairline:   #C9CFE4;

  --royal:      #1E3B9D;
  --royal-deep: #162C75;
  --royal-soft: #E8EDFA;
  --purple:     #7F60A2;
  --purple-deep:#634984;
  --purple-soft:#F2ECF8;
  --silver:     #B3B4B8;
  --silver-soft:#ECEDF1;

  --on-dark:    #EFF1FA;
  --on-dark-dim:#A7AFD0;
  --on-accent:  #FFFFFF;

  --display: "Schibsted Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
  --body:    "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --fs-xs:  0.75rem;
  --fs-sm:  0.9375rem;
  --fs-base:1.0625rem;
  --fs-lg:  1.25rem;
  --fs-xl:  1.5rem;

  --shell: 1180px;
  --r:     8px;
  --r-lg:  18px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #080B1A;
    --surface:    #10152F;
    --surface-2:  #171D40;
    --ink:        #EFF1FA;
    --midnight:   #060915;
    --muted:      #A2AAC9;
    --line:       #232A52;
    --hairline:   #333B66;
    --royal:      #8DA3F0;
    --royal-deep: #6E86DE;
    --royal-soft: #161C42;
    --purple:     #C4A2E2;
    --purple-deep:#A87FCB;
    --purple-soft:#221A38;
    --silver:     #7C8098;
    --silver-soft:#161B38;
    --on-accent:  #080B1A;
  }
}

:root[data-theme="dark"] {
  --paper:      #080B1A;
  --surface:    #10152F;
  --surface-2:  #171D40;
  --ink:        #EFF1FA;
  --midnight:   #060915;
  --muted:      #A2AAC9;
  --line:       #232A52;
  --hairline:   #333B66;
  --royal:      #8DA3F0;
  --royal-deep: #6E86DE;
  --royal-soft: #161C42;
  --purple:     #C4A2E2;
  --purple-deep:#A87FCB;
  --purple-soft:#221A38;
  --silver:     #7C8098;
  --silver-soft:#161B38;
  --on-accent:  #080B1A;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--royal); text-underline-offset: 3px; }
a:hover { color: var(--royal-deep); }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(2.75rem, 1.4rem + 5.4vw, 5.25rem); }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.15rem); letter-spacing: -0.028em; }
h3 { font-size: var(--fs-xl); letter-spacing: -0.02em; line-height: 1.15; }
h4 { font-size: var(--fs-lg); letter-spacing: -0.015em; line-height: 1.2; }
p  { margin: 0; }

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.lede { font-size: var(--fs-lg); color: var(--muted); max-width: 56ch; line-height: 1.5; }
.prose { max-width: 62ch; display: flex; flex-direction: column; gap: 1.05rem; }
.prose p { color: var(--muted); }
.prose h3 { color: var(--ink); margin-top: 1rem; }

.rule { width: 64px; height: 4px; background: var(--royal); border-radius: 2px; }
.rule--purple { background: var(--purple); }

.skip { position: absolute; left: -9999px; background: var(--royal); color: #fff; padding: .75rem 1rem; z-index: 100; }
.skip:focus { left: 0; top: 0; }

/* ---------- header ---------- */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 76px; }
.brand { display: flex; flex: 0 0 auto; }
.brand img { height: 34px; width: auto; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.7rem; }
.nav a {
  font-family: var(--display); font-weight: 500; font-size: var(--fs-sm);
  color: var(--ink); text-decoration: none;
}
.nav a:hover { color: var(--royal); }
.nav a[aria-current="page"] { color: var(--royal); }
.nav-toggle {
  margin-left: auto; display: none;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--ink); font-family: var(--display); font-size: var(--fs-sm);
  padding: .5rem .85rem; cursor: pointer;
}
@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav { display: none; width: 100%; order: 3; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: .8rem; }
  .nav.is-open { display: flex; }
  .nav a { padding: .75rem 0; border-top: 1px solid var(--line); font-size: var(--fs-base); }
  .nav .btn { margin-top: .8rem; text-align: center; border-top: 0; }
  .masthead__inner { flex-wrap: wrap; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--display); font-weight: 600; font-size: var(--fs-sm);
  padding: .8rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--royal  { background: var(--royal);  color: var(--on-accent); }
.btn--royal:hover  { background: var(--royal-deep);  color: var(--on-accent); }
.btn--purple { background: var(--purple); color: var(--on-accent); }
.btn--purple:hover { background: var(--purple-deep); color: var(--on-accent); }
.btn--ghost  { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn--ghost:hover  { border-color: var(--royal); color: var(--royal); }
.btn--light  { background: #fff; color: var(--royal); }
.btn--light:hover  { background: #E9EDFA; color: var(--royal-deep); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn--outline-light:hover { background: rgba(255,255,255,.12); color: #fff; }

.actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

/* ---------- sections ---------- */

.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section--alt { background: var(--surface-2); }
.section__head { display: flex; flex-direction: column; gap: .85rem; max-width: 54ch; margin-bottom: 3rem; }

/* ---------- hero ---------- */

.hero { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--hairline) 1px, transparent 0);
  background-size: 26px 26px;
  opacity: .32; mask-image: linear-gradient(to bottom, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero__grid { position: relative; display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.25fr .75fr; } }
.hero__copy { display: flex; flex-direction: column; gap: 1.35rem; }
.hero h1 span { color: var(--royal); }

.hero__mark { position: relative; justify-self: center; width: min(100%, 420px); }
.hero__mark::after {
  content: ""; position: absolute; inset: -18%;
  background: radial-gradient(circle, color-mix(in srgb, var(--royal) 22%, transparent) 0%, transparent 68%);
  z-index: 0;
}
.hero__mark img { position: relative; z-index: 1; width: 100%; }
@media (max-width: 979px) { .hero__mark { width: min(62%, 300px); } }

/* ---------- fact strip ---------- */

.facts { display: grid; gap: 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { padding: 1.5rem 0; display: flex; flex-direction: column; gap: .3rem; }
@media (min-width: 760px) {
  .fact { padding: 1.6rem 2rem; border-left: 1px solid var(--line); }
  .fact:first-child { padding-left: 0; border-left: 0; }
}
@media (max-width: 759px) { .fact + .fact { border-top: 1px solid var(--line); } }
.fact__k { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fact__v { font-family: var(--display); font-weight: 600; font-size: var(--fs-base); color: var(--ink); line-height: 1.3; }

/* ---------- whatsapp panel ---------- */

.wa {
  margin-top: 2.5rem; display: grid; gap: 1.75rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface);
}
@media (min-width: 860px) {
  .wa { grid-template-columns: 1.35fr 1fr; align-items: center; gap: 2.5rem; }
}
.wa__h { font-size: var(--fs-xl); margin: .35rem 0 .7rem; }
.wa__body p { color: var(--muted); margin: 0; max-width: 46ch; }
.wa__cta { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
@media (min-width: 860px) { .wa__cta { align-items: flex-end; text-align: right; } }
.wa__note { font-size: var(--fs-xs); color: var(--muted); margin: 0; max-width: 34ch; }
@media (min-width: 860px) { .wa__note { text-align: right; } }

.btn--wa { background: #167F45; color: #fff; }
.btn--wa:hover { background: #106334; color: #fff; }
.btn--wa svg { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- vacancies ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.chip {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .08em;
  text-transform: uppercase; padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--hairline); background: transparent; color: var(--muted);
  cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: var(--royal); color: var(--royal); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.vacs { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.vacs--empty { border-top: 0; }
.vac {
  padding: 2rem 0; border-bottom: 1px solid var(--line);
  display: grid; gap: .85rem;
}
@media (min-width: 900px) {
  .vac { grid-template-columns: 1fr 20rem; column-gap: 3rem; align-items: start; }
  .vac__meta, .vac__title, .vac__sum { grid-column: 1; }
  .vac__facts { grid-column: 2; grid-row: 1 / span 3; }
  .vac__more { grid-column: 1; }
}
.vac__meta { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.vac__tag {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .1em;
  text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px;
}
.vac__tag--care { background: var(--royal-soft); color: var(--royal); }
.vac__tag--commercial { background: var(--purple-soft); color: var(--purple-deep); }
.vac__tag--industrial { background: var(--silver-soft); color: var(--muted); }
.vac__ref { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); letter-spacing: .06em; }
.vac__title { font-size: var(--fs-xl); margin: 0; line-height: 1.15; }
.vac__title a { color: var(--ink); text-decoration: none; }
.vac__title a:hover { color: var(--royal); }
.vac__sum { color: var(--muted); margin: 0; max-width: 56ch; }
.vac__facts { display: grid; gap: .7rem; margin: 0; }
.vac__facts dt {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.vac__facts dd { margin: .15rem 0 0; font-family: var(--display); font-weight: 600; color: var(--ink); }
.vac__more {
  font-family: var(--display); font-weight: 600; font-size: var(--fs-sm);
  color: var(--royal); text-decoration: none; justify-self: start;
}
.vac__more:hover { text-decoration: underline; }

.vac-empty {
  padding: 0 0 clamp(1rem, 3vw, 2rem); max-width: 62ch;
}
.vac-empty h2 { font-size: var(--fs-xl); margin: .4rem 0 .9rem; }
.vac-empty p { color: var(--muted); }
.vac-empty .actions { margin-top: 1.6rem; }
.vac-none { margin-top: 2rem; color: var(--muted); }

.latest { display: grid; border-top: 1px solid var(--hairline); }
.latest__row {
  display: grid; gap: .35rem 1.5rem; padding: 1.35rem 0;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
  transition: padding-left .15s ease;
}
.latest__row:hover { padding-left: .6rem; }
@media (min-width: 860px) {
  .latest__row { grid-template-columns: 13rem 1fr 12rem 14rem; align-items: baseline; }
}
.latest__tag {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .1em;
  text-transform: uppercase; justify-self: start; padding: .25rem .6rem; border-radius: 999px;
}
.latest__tag--care { background: var(--royal-soft); color: var(--royal); }
.latest__tag--commercial { background: var(--purple-soft); color: var(--purple-deep); }
.latest__tag--industrial { background: var(--silver-soft); color: var(--muted); }
.latest__title { font-family: var(--display); font-weight: 600; font-size: var(--fs-lg); }
.latest__where, .latest__pay { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- single job ---------- */

.job { display: grid; gap: 2.5rem; }
@media (min-width: 940px) { .job { grid-template-columns: 1fr 21rem; gap: 4rem; align-items: start; } }
.job__main h2 { font-size: var(--fs-lg); margin: 2.2rem 0 .9rem; }
.job__main h2:first-child { margin-top: 0; }
.job__side { display: grid; gap: 1.25rem; align-content: start; }
@media (min-width: 940px) { .job__side { position: sticky; top: 6rem; } }
.job__box {
  padding: 1.5rem; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--surface);
}
.job__box p { color: var(--muted); font-size: var(--fs-sm); }
.job__box p:first-of-type { margin-top: .35rem; }
.job__small { font-size: var(--fs-xs); color: var(--muted); line-height: 1.6; }
.job__small a { color: var(--royal); }

/* ---------- audience fork ---------- */

.fork { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .fork { grid-template-columns: 1fr 1fr; } }
.fork__card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: .7rem;
  padding: clamp(1.75rem, 3vw, 2.6rem);
  border-radius: var(--r-lg);
  text-decoration: none; color: var(--on-accent);
  min-height: 260px;
  transition: transform .18s ease;
}
.fork__card:hover { transform: translateY(-3px); color: var(--on-accent); }
.fork__card--employers  { background: linear-gradient(140deg, var(--royal) 0%, var(--royal-deep) 100%); }
.fork__card--candidates { background: linear-gradient(140deg, var(--purple) 0%, var(--purple-deep) 100%); }
.fork__card .eyebrow { color: rgba(255,255,255,.72); }
.fork__card h3 { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.fork__card p { color: rgba(255,255,255,.85); font-size: var(--fs-sm); max-width: 34ch; }
.fork__go { margin-top: auto; font-family: var(--display); font-weight: 600; font-size: var(--fs-sm); color: #fff; padding-top: 1rem; }
.fork__card img {
  position: absolute; right: -14%; bottom: -22%; width: 58%;
  opacity: .11; pointer-events: none;
}

/* ---------- sectors: hairline rows, not cards ---------- */

.sectors { display: grid; gap: 0; }
.sector {
  display: grid; gap: 1rem 2.5rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.sector:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .sector { grid-template-columns: 5rem 1fr 1fr; align-items: start; } }
.sector__n {
  font-family: var(--mono); font-size: var(--fs-sm); color: var(--tone);
  letter-spacing: .06em; padding-top: .3rem;
}
.sector__head { display: flex; flex-direction: column; gap: .6rem; }
.sector__tag {
  align-self: flex-start; font-family: var(--mono); font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; background: var(--tint); color: var(--tone);
}
.sector h3 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.9rem); }
.sector p { color: var(--muted); font-size: var(--fs-sm); }
.sector--care       { --tone: var(--royal);  --tint: var(--royal-soft); }
.sector--commercial { --tone: var(--purple); --tint: var(--purple-soft); }
.sector--industrial { --tone: var(--ink);    --tint: var(--silver-soft); }

.roles { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
@media (min-width: 520px) { .roles { grid-template-columns: 1fr 1fr; } }
.roles li { font-size: var(--fs-sm); color: var(--muted); padding-left: 1rem; position: relative; }
.roles li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--tone, var(--royal));
}

/* ---------- midnight band: commitments ---------- */

.dark {
  position: relative; overflow: hidden;
  background: var(--midnight); color: var(--on-dark);
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.dark::before {
  content: ""; position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: 46rem; height: 46rem; max-width: 70vw;
  background: radial-gradient(circle, rgba(126,96,162,.34) 0%, transparent 62%);
  pointer-events: none;
}
.dark .shell { position: relative; }
.dark h2 { color: #fff; margin: 1rem 0 1.25rem; }
.dark .eyebrow { color: var(--on-dark-dim); }
.dark .lede { color: var(--on-dark-dim); }

.commit { display: grid; gap: 0; margin-top: 2.75rem; }
@media (min-width: 820px) { .commit { grid-template-columns: repeat(2, 1fr); column-gap: 3.5rem; } }
.commit__item { padding-block: 1.6rem; border-top: 1px solid rgba(255,255,255,.16); display: flex; gap: 1.25rem; }
.commit__n {
  font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .1em;
  color: var(--purple); padding-top: .35rem; flex: 0 0 auto;
}
.commit__body { display: flex; flex-direction: column; gap: .35rem; }
.commit h4 { color: #fff; }
.commit p { color: var(--on-dark-dim); font-size: var(--fs-sm); max-width: 42ch; }

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

.steps { display: grid; gap: 2rem; position: relative; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }
.step { display: flex; flex-direction: column; gap: .7rem; padding-top: 1.4rem; border-top: 3px solid var(--royal); }
.step:nth-child(2) { border-top-color: var(--purple); }
.step:nth-child(3) { border-top-color: var(--silver); }
.step__n { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.step h3 { font-size: var(--fs-xl); }
.step p { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- hairline definition list ---------- */

.checks { display: grid; gap: 0; }
@media (min-width: 760px) { .checks { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.check { padding-block: 1.3rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .3rem; }
.check h4 { font-size: var(--fs-base); }
.check p { color: var(--muted); font-size: var(--fs-sm); }

/* ---------- gradient CTA band ---------- */

.band {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--royal) 0%, var(--royal-deep) 46%, var(--purple-deep) 100%);
  color: #fff; border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}
.band h2 { color: #fff; }
.band p { color: rgba(255,255,255,.86); max-width: 54ch; }
.band img { position: absolute; right: -6%; top: -30%; width: 34%; opacity: .13; pointer-events: none; }
.band .actions { margin-top: .4rem; position: relative; }

/* ---------- page header ---------- */

.pagehead {
  position: relative; overflow: hidden;
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
}
.pagehead::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, var(--hairline) 1px, transparent 0);
  background-size: 26px 26px; opacity: .3;
  mask-image: linear-gradient(to bottom, #000, transparent 80%); pointer-events: none;
}
.pagehead__inner { position: relative; display: flex; flex-direction: column; gap: 1.1rem; }

/* ---------- layout helpers ---------- */

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 940px) { .split { grid-template-columns: 1.05fr .95fr; } }
.panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.4rem, 3vw, 2.1rem);
  display: flex; flex-direction: column; gap: 1.1rem;
}

/* ---------- forms ---------- */

.form { display: flex; flex-direction: column; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-family: var(--display); font-weight: 600; font-size: var(--fs-sm); }
.field input, .field select, .field textarea {
  font-family: var(--body); font-size: var(--fs-base);
  padding: .72rem .85rem; border: 1px solid var(--hairline); border-radius: var(--r);
  background: var(--surface); color: var(--ink); width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--royal); }
.field--row { display: grid; gap: 1.1rem; }
@media (min-width: 620px) { .field--row { grid-template-columns: 1fr 1fr; } }
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); }
.consent input { width: 18px; height: 18px; margin-top: .2rem; flex: 0 0 auto; }
.form__note { font-size: var(--fs-xs); color: var(--muted); }
.form__status { font-size: var(--fs-sm); font-weight: 600; font-family: var(--display); }
.form__status[data-state="ok"]    { color: var(--royal); }
.form__status[data-state="error"] { color: #B3261E; }
.hp { position: absolute; left: -9999px; opacity: 0; }

/* ---------- contact detail rows ---------- */

.details { display: grid; gap: 0; }
.detail { padding-block: 1.15rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .2rem; }
.detail dt { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.detail dd { margin: 0; font-size: var(--fs-lg); font-family: var(--display); font-weight: 600; letter-spacing: -.015em; }
.detail dd a { text-decoration: none; }

/* ---------- footer ---------- */

.foot {
  position: relative; overflow: hidden;
  background: var(--midnight); color: var(--on-dark-dim);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
}
.foot::before {
  content: ""; position: absolute; left: -6%; bottom: -46%;
  width: 34rem; height: 34rem; max-width: 60vw;
  background: radial-gradient(circle, rgba(30,59,157,.4) 0%, transparent 64%);
  pointer-events: none;
}
.foot .shell { position: relative; }
.foot__grid { display: grid; gap: 2.25rem; }
@media (min-width: 820px) { .foot__grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.foot img { height: 42px; width: auto; }
.foot h4 { color: #fff; font-family: var(--mono); font-weight: 500; font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; }
.foot ul { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.foot a { color: var(--on-dark-dim); text-decoration: none; font-size: var(--fs-sm); }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot__blurb { font-size: var(--fs-sm); color: var(--on-dark-dim); max-width: 38ch; margin-top: 1rem; }
.foot__legal {
  margin-top: 2.75rem; padding-top: 1.3rem; border-top: 1px solid rgba(255,255,255,.14);
  display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; justify-content: space-between;
  font-size: var(--fs-xs); color: #7E87AC;
}

/* ---------- v9: four sectors ---------- */
.sector--driving    { --tone: var(--royal);  --tint: var(--royal-soft); }
.sector--care       { --tone: var(--purple-deep); --tint: var(--purple-soft); }
.vac__tag--driving, .latest__tag--driving { background: var(--royal-soft); color: var(--royal); }
.vac__tag--care, .latest__tag--care { background: var(--purple-soft); color: var(--purple-deep); }
.job__box .btn { margin-top: 1rem; }
[hidden] { display: none !important; }
.form__status[data-state="error"] { color: #B42318; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form__status[data-state="error"] { color: #FDA29B; } }