/* NS Employment Agency
   Colours come from the photographs: spruce woodlots, oilskin orange,
   harbour water, fog. Body type is a plain, open sans at a generous size
   because many readers are working in their second language. */

/* Fonts are self-hosted (SIL Open Font License, licences in /fonts), so no
   visitor's IP address goes to a font service. Built by _work/make_fonts.py. */
@font-face { font-family: "Work Sans"; src: url("../fonts/WorkSans-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/InstrumentSans-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
  --fog: #f2f4f1;
  --paper: #ffffff;
  --ink: #17262b;
  --ink-soft: #46555a;
  --line: #d5dbd6;
  --spruce: #1e4a3b;
  --spruce-deep: #143328;
  --harbour: #24506b;
  --oilskin: #c2501b;
  --oilskin-deep: #a2410f;
  --barrens: #2f3e7c;
  --field: #6d8a3a;

  --display: "Work Sans", "Arial", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --radius: 6px;
}

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

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

body {
  margin: 0;
  background: var(--fog);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

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

a { color: var(--barrens); text-underline-offset: 0.18em; }
a:hover { color: var(--spruce); }

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

h1, h2, h3 {
  font-family: var(--display);
  font-stretch: 112%;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.2rem, 5.6vw, 4.1rem); font-weight: 700; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 700; font-stretch: 105%; }

p { margin: 0 0 1em; max-width: 64ch; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  background: var(--paper);
  color: var(--ink);
  padding: 0.6rem 1rem;
  z-index: 50;
}
.skip:focus { left: 0.5rem; }

/* Labels: small caps in the mono face, used only where a thing is being named. */
.label {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}

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

.site-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.25rem;
}

.brand {
  display: flex;
  align-items: center;
  min-height: 44px; /* a full-size tap area on tablets, where the black block is smaller */
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand-name {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.1;
  display: block;
}
.brand-legal {
  display: block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
/* On phones the legal name switches to the narrower text face so it stays on one line. */
@media (max-width: 520px) {
  .brand-legal { font-family: var(--body); font-size: 0.78rem; letter-spacing: 0; }
}

.nav-toggle {
  display: none;
  font: inherit;
  font-weight: 700;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.45rem 0.8rem;
  color: var(--ink);
  cursor: pointer;
}

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav a {
  display: block;
  padding: 0.5rem 0.7rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius);
}
.site-nav a:hover { background: var(--fog); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--spruce); box-shadow: inset 0 -3px 0 var(--spruce); border-radius: 0; }
.site-nav .nav-cta a {
  background: var(--oilskin);
  color: #fff;
  margin-left: 0.4rem;
}
.site-nav .nav-cta a:hover { background: var(--oilskin-deep); color: #fff; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgb(23 38 43 / 0.08);
  }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; padding: 0.5rem var(--gutter) 1rem; }
  .site-nav a { padding: 0.75rem 0.5rem; }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--spruce); padding-left: 0.9rem; }
  .site-nav .nav-cta a { margin: 0.5rem 0 0; text-align: center; }
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3rem;
  padding: 0.7rem 1.25rem;
  border-radius: var(--radius);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.btn-primary { background: var(--oilskin); color: #fff; }
.btn-primary:hover { background: var(--oilskin-deep); color: #fff; }
.btn-spruce { background: var(--spruce); color: #fff; }
.btn-spruce:hover { background: var(--spruce-deep); color: #fff; }
.btn-ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-light { border-color: #fff; color: #fff; background: transparent; }
.btn-light:hover { background: #fff; color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.btn-row-gap { margin-top: 2.25rem; }

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

.hero {
  position: relative;
  min-height: min(88vh, 46rem);
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--spruce-deep);
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 50%;
}
/* Darkens only the open pasture on the left, where the words sit, so the cows keep their colour. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(12 30 24 / 0.78) 0%, rgb(12 30 24 / 0.55) 38%, rgb(12 30 24 / 0) 68%),
    linear-gradient(0deg, rgb(12 30 24 / 0.55) 0%, rgb(12 30 24 / 0) 45%);
}
.hero .wrap {
  position: relative;
  z-index: 1;
  padding-top: 6rem;
  padding-bottom: clamp(2.5rem, 7vw, 5rem);
}
.hero h1 { max-width: 15ch; margin-bottom: 0.4em; }
.hero p { font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 40ch; color: #eef3ef; }
.hero .label { color: #cfe0d6; }

/* Phones: the hero is only as tall as its words plus a band of picture above
   them. A fixed 36rem height left about 214 px of empty sky over the headline
   (Karl, 27 Oct 2026: "reduce the empty space in the top"). */
@media (max-width: 700px) {
  .hero { min-height: 0; }
  .hero .wrap { padding-top: 7rem; padding-bottom: 2.25rem; }
  .hero-img { object-position: 78% 50%; }
  .hero::after {
    background: linear-gradient(0deg, rgb(12 30 24 / 0.88) 0%, rgb(12 30 24 / 0.55) 55%, rgb(12 30 24 / 0.15) 100%);
  }
}

/* Inner-page header with a photo strip */
.page-head {
  position: relative;
  color: #fff;
  background: var(--spruce-deep);
  overflow: hidden;
}
.page-head img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

/* For photos whose subject's face sits near the top of the frame. */
.page-head-top img { object-position: 50% 6%; }
/* For a photo whose person stands on the left, under the words: mirrored so
   they stand on the right. Only for photos with no lettering in them. */
.page-head-flip img { transform: scaleX(-1); }
/* The orange focus ring is too faint on dark green (2.1 to 2.9:1); white is 10:1 or more. */
.hero :focus-visible, .page-head :focus-visible, .section-spruce :focus-visible,
.site-foot :focus-visible { outline-color: #fff; }

/* Keep anchored sections clear of the sticky header. */
[id] { scroll-margin-top: 5rem; }
/* The same for a form field the browser jumps to with "Please fill in this
   field": checkboxes have no id, so without this one landed under the header. */
input, select, textarea { scroll-margin-top: 5rem; }
.page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(12 30 24 / 0.85) 0%, rgb(12 30 24 / 0.5) 55%, rgb(12 30 24 / 0.2) 100%);
}
.page-head .wrap {
  position: relative;
  z-index: 1;
  padding-top: clamp(3.5rem, 9vw, 6.5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.page-head h1 { max-width: 18ch; }
.page-head p { max-width: 46ch; font-size: 1.15rem; color: #eef3ef; }
.page-head .label { color: #cfe0d6; }

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

.section { padding: clamp(3rem, 8vw, 5.5rem) 0; }
.section-paper { background: var(--paper); }
.section-spruce { background: var(--spruce); color: #fff; }
.section-spruce a { color: #fff; }
.section-spruce .label { color: #cfe0d6; }

.section-intro { margin-bottom: 2.25rem; }
.section-intro p { color: var(--ink-soft); font-size: 1.1rem; }
.section-spruce .section-intro p { color: #dbe7e0; }

/* Two doors: employers and workers */
.doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.door {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.door img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.door-body { padding: 1.5rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.door-body ul { margin: 0 0 1.5rem; padding-left: 1.2rem; }
.door-body li { margin-bottom: 0.35rem; }
.door-body .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 760px) { .doors { grid-template-columns: 1fr; } }

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

.sector-group + .sector-group { margin-top: 3rem; }
.sector-group-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.5rem;
  margin-bottom: 1.25rem;
}
.sector-group-head h2,
.sector-group-head h3 { margin: 0; font-size: 1.35rem; }
.sector-group-head p { margin: 0 0 0 auto; color: var(--ink-soft); font-size: 0.95rem; }
@media (max-width: 640px) {
  .sector-group-head { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
  .sector-group-head p { margin: 0; font-size: 0.9rem; }
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1.25rem;
}
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card-body { padding: 1rem 1.1rem 1.2rem; }
.card-body h4 {
  font-family: var(--display);
  font-stretch: 105%;
  font-size: 1.1rem;
  margin: 0 0 0.3rem;
}
.card-body p { margin: 0; color: var(--ink-soft); font-size: 0.97rem; line-height: 1.5; }
@media (max-width: 640px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
  .card-body { padding: 0.75rem 0.8rem 0.9rem; }
  .card-body h4 { font-size: 0.98rem; }
  .card-body p { font-size: 0.88rem; line-height: 1.45; }
}

/* ---------- Season calendar (the signature) ---------- */

.season {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.75rem);
}
.season-grid {
  display: grid;
  grid-template-columns: minmax(7.5rem, 13rem) repeat(12, minmax(0, 1fr));
  column-gap: 2px;
  row-gap: 0;
  align-items: center;
}
.season-grid .m {
  font-family: var(--mono);
  font-size: 0.75rem;
  text-align: center;
  color: var(--ink-soft);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.season-grid .m-short { display: none; }
.season-head,
.season-row { display: contents; }
.season-row .name {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.55rem 0.75rem 0.55rem 0;
  line-height: 1.25;
  border-bottom: 1px solid var(--line);
  align-self: stretch;
  display: flex;
  align-items: center;
}
.season-row .c {
  height: 100%;
  min-height: 2.6rem;
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* Each cell is one month. Two strengths: some hiring, and peak hiring. */
.season-row .c::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0.9rem;
  transform: translateY(-50%);
}
/* "Some hiring" is a pale fill with a full-colour outline, so it still reads at 3:1 against white. */
.season-row .c.on::before { background: color-mix(in srgb, var(--row-colour) 20%, #fff); box-shadow: inset 0 0 0 1.5px var(--row-colour); }
.season-row .c.peak::before { background: var(--row-colour); }
.season-row.farm { --row-colour: var(--field); }
.season-row.water { --row-colour: var(--harbour); }
.season-row.town { --row-colour: var(--oilskin); }

.season-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.season-key span { display: inline-flex; align-items: center; gap: 0.45rem; }
.season-key i { display: inline-block; width: 1.6rem; height: 0.7rem; background: var(--ink); }
.season-key .k-on { background: color-mix(in srgb, var(--ink) 15%, #fff); box-shadow: inset 0 0 0 1.5px var(--ink); }
.season-key .k-farm { background: var(--field); }
.season-key .k-water { background: var(--harbour); }
.season-key .k-town { background: var(--oilskin); }
.season-note { margin: 1rem 0 0; font-size: 0.92rem; color: var(--ink-soft); }

@media (max-width: 640px) {
  .season-grid { grid-template-columns: 6.6rem repeat(12, minmax(0, 1fr)); column-gap: 1px; }
  .season-grid .m-long { display: none; }
  .season-grid .m-short { display: inline; }
  .season-row .name { font-size: 0.82rem; padding-right: 0.4rem; }
  .season-row .c::before { height: 0.75rem; }
}

/* ---------- Steps (a real sequence, so they are numbered) ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  border-top: 3px solid currentColor;
  padding-top: 1rem;
}
.steps li::before {
  content: "Step " counter(step);
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  opacity: 0.8;
}
.steps h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.steps p { margin: 0; font-size: 0.98rem; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Split rows (text beside a photo) ---------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: center;
}
.split img { border-radius: var(--radius); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split.flip > :first-child { order: 2; }
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
  .split.flip > :first-child { order: 0; }
}

.ticks { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.ticks li { position: relative; padding-left: 1.7rem; margin-bottom: 0.55rem; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.5em;
  width: 0.75rem;
  height: 0.42rem;
  border-left: 3px solid var(--spruce);
  border-bottom: 3px solid var(--spruce);
  transform: rotate(-45deg);
}
.section-spruce .ticks li::before { border-color: #fff; }

/* Notice panel for rules people need to know (fees, licences) */
.notice {
  border-left: 5px solid var(--oilskin);
  background: var(--paper);
  padding: 1.1rem 1.25rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.notice h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.notice-gap { margin-top: 2.5rem; }
.notice p:last-child { margin-bottom: 0; }

/* ---------- Pay tiers (find work page, #pay) ----------
   Karl, 4 Nov 2026: the wage text he was asked to add. Four tiers on the
   spruce band; the little bars rise with each tier (decoration only). */
.pay-tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.pay-tier {
  background: var(--spruce-deep);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1.35rem;
}
.pay-level { display: flex; align-items: flex-end; gap: 4px; height: 1.4rem; margin-bottom: 0.9rem; }
.pay-level i { display: block; width: 7px; background: rgb(255 255 255 / 0.2); border-radius: 1px; }
.pay-level i:nth-child(1) { height: 25%; }
.pay-level i:nth-child(2) { height: 50%; }
.pay-level i:nth-child(3) { height: 75%; }
.pay-level i:nth-child(4) { height: 100%; }
.pay-tier:nth-child(1) .pay-level i:nth-child(-n+1),
.pay-tier:nth-child(2) .pay-level i:nth-child(-n+2),
.pay-tier:nth-child(3) .pay-level i:nth-child(-n+3),
.pay-tier:nth-child(4) .pay-level i { background: #e98a55; }
.pay-tier h3 { font-size: 1.05rem; color: #dbe7e0; margin: 0 0 0.35rem; }
.pay-figure {
  font-family: var(--display);
  font-size: clamp(1.65rem, 2.3vw, 2.1rem);
  line-height: 1.1;
  color: #fff;
  margin: 0 0 0.8rem;
}
.pay-figure span { display: block; margin-top: 0.2rem; font-family: var(--body); font-size: 0.95rem; font-weight: 400; color: #cfe0d6; }
.pay-tier > p:not(.pay-figure) { color: #dbe7e0; font-size: 0.98rem; margin: 0 0 0.8rem; }
.pay-tier > p:last-child { margin-bottom: 0; }
.pay-examples { list-style: none; margin: 0; padding: 0.6rem 0 0; border-top: 1px solid rgb(255 255 255 / 0.18); font-size: 0.97rem; }
.pay-examples li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.3rem 0; }
.pay-examples li + li { border-top: 1px dotted rgb(255 255 255 / 0.2); }
.pay-examples li span:first-child { color: #dbe7e0; }
.pay-examples li span:last-child { color: #fff; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pay-note { margin: 1.6rem 0 0.35rem; color: #fff; }
.pay-source { margin: 0; font-size: 0.95rem; color: #cfe0d6; }
@media (min-width: 1101px) { .pay-tier h3 { min-height: 2.6em; } }
@media (max-width: 1100px) { .pay-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pay-tiers { grid-template-columns: 1fr; } .pay-tier { padding: 1.1rem 1.1rem 1.2rem; } }

/* ---------- Industry detail (industries page) ---------- */

.industry {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.sector-group-head + .industry { border-top: 0; padding-top: 0.75rem; }
.industry img { border-radius: var(--radius); aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.industry h3 { font-size: 1.4rem; }
.industry .roles { font-size: 0.98rem; color: var(--ink-soft); }
.industry .roles strong { color: var(--ink); }
@media (max-width: 760px) {
  .industry { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 0; }
  .industry img { aspect-ratio: 16 / 9; }
}

/* ---------- Forms ---------- */

.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2rem);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 1.25rem;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.field label,
.field legend {
  display: block;
  font-weight: 700;
  margin-bottom: 0.3rem;
  padding: 0;
}
.field .hint { display: block; font-weight: 400; font-size: 0.9rem; color: var(--ink-soft); margin-top: -0.15rem; margin-bottom: 0.35rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid #78847f;
  border-radius: var(--radius);
  padding: 0.65rem 0.75rem;
  min-height: 3rem;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: 3px solid var(--oilskin); outline-offset: 1px; border-color: var(--ink); }
.field fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.35rem 1rem;
}
.checks label,
.consent label {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-weight: 400;
  margin: 0;
}
.checks input,
.consent input { width: 1.15rem; height: 1.15rem; min-height: 0; margin-top: 0.2rem; flex: none; accent-color: var(--spruce); }
.req { color: var(--oilskin-deep); }
.form-foot { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.form-foot p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); flex: 1 1 18rem; }
.form-status { margin-top: 1rem; font-weight: 600; }
.form-status:empty { display: none; }
/* Phones: full-width send button and roomier checkbox rows, for thumbs. */
@media (max-width: 520px) {
  .form-foot .btn { width: 100%; }
  .checks label { padding: 0.25rem 0; }
}

/* ---------- Contact strip and footer ---------- */

/* As many equal columns as there are cards: the phone card only appears once there is a number. */
.contact-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
.contact-strip div { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; }
.contact-strip p { margin: 0; }
@media (max-width: 760px) { .contact-strip { grid-auto-flow: row; grid-template-columns: 1fr; } }

.site-foot {
  background: var(--ink);
  color: #d6dfdb;
  padding: 3rem 0 2rem;
  font-size: 0.95rem;
}
.site-foot a { color: #fff; }
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
}
.foot-grid h2 { font-size: 1rem; font-stretch: 105%; color: #fff; margin-bottom: 0.75rem; }
.foot-grid ul { list-style: none; padding: 0; margin: 0; }
.foot-grid li { margin-bottom: 0.25rem; }
.foot-grid li a { display: inline-block; padding: 0.25rem 0; }
.foot-legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgb(255 255 255 / 0.15);
  font-size: 0.85rem;
  color: #aebbb5;
}
.foot-legal p { max-width: none; margin-bottom: 0.4rem; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }

/* Prose pages (privacy) */
.prose { max-width: 46rem; }
.prose h2 { font-size: 1.45rem; margin-top: 2rem; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4rem; }

.photo { position: relative; display: block; }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

/* Cloudflare Turnstile spam check, above the send button. */
.cf-turnstile { margin: 1.25rem 0 0; min-height: 65px; }
.cf-turnstile[data-size="compact"] { min-height: 140px; }
.form-status a { color: inherit; }


/* ===================== LOCAL DEMO: compact layout ===================== */
body { font-size: 1rem; }
h1 { font-size: clamp(2rem, 3.6vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); }
.section { padding: clamp(2.25rem, 4.5vw, 3.5rem) 0; }
.page-head { min-height: 0; }

.demo-bar { background: #fff4c2; color: #4a3b00; font-size: 0.85rem; text-align: center; padding: 0.35rem 1rem; }

.hero-c { background: var(--fog); padding: clamp(1.75rem, 3.5vw, 2.75rem) 0; border-bottom: 1px solid var(--line); }
.hero-c-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.hero-c h1 { line-height: 1.08; margin: 0 0 0.75rem; max-width: 21ch; text-wrap: balance; }
.hero-c p { font-size: 1.1rem; color: var(--ink-soft); max-width: 44ch; margin: 0 0 1.25rem; }
.mosaic { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.mosaic a { position: relative; display: block; border-radius: var(--radius); overflow: hidden; }
.mosaic img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.mosaic span { position: absolute; left: 0.5rem; bottom: 0.5rem; background: rgb(23 38 43 / 0.8); color: #fff;
  font-weight: 600; font-size: 0.82rem; padding: 0.2rem 0.55rem; border-radius: 4px; }
.mosaic a:hover span { background: var(--spruce); }

.section-c { padding: clamp(2rem, 4vw, 3rem) 0; }
.section-c-paper { background: var(--paper); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.aud { background: var(--fog); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem;
  display: flex; flex-direction: column; }
.aud-for { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.aud h2 { margin: 0.2rem 0 0.75rem; }
.aud ul { margin: 0 0 1.25rem; padding-left: 1.15rem; }
.aud li { margin-bottom: 0.3rem; }
.aud .btn { margin-top: auto; align-self: flex-start; }

.intro-c { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.intro-c h2 { margin: 0; }
.sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }
/* Karl, 27 Oct 2026: plain white boxes; the green bar along the top sweeps in
   from the left while the mouse is over one (or it has keyboard focus). */
.sector { position: relative; overflow: hidden; display: block; text-decoration: none; color: inherit; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; transition: border-color 0.3s; }
.sector::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--spruce);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease-out; }
.sector:hover, .sector:focus-visible { border-color: var(--spruce); }
.sector:hover::before, .sector:focus-visible::before { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .sector, .sector::before { transition: none; } }
.sector h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.sector p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
.season-details { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 0.8rem 1.1rem; }
.season-details summary { cursor: pointer; font-weight: 600; color: var(--spruce); }
.season-details[open] summary { margin-bottom: 1rem; }

.where-c { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.where-c h2 { margin: 0 0 0.5rem; }
.where-c p { margin: 0; color: var(--ink-soft); }

@media (max-width: 860px) {
  .hero-c-grid, .two-col, .where-c { grid-template-columns: 1fr; }
  .sectors { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .sectors { grid-template-columns: 1fr; }
  .mosaic span { font-size: 0.75rem; }
}

/* Home: dark hero, words on the left, four kinds of work in a 2 x 2 block on the right.
   Karl, 27 Oct 2026: the flat green looked plain, so it carries a fine grain
   (img/texture-grain.png, made by this script) over soft light: brighter top
   left, deeper bottom right, like a lit wall rather than a fill colour. */
.hero-band { position: relative; color: #fff; overflow: hidden; background-color: #143328;
  background-image:
    url(../img/texture-grain.png),
    radial-gradient(ellipse 60% 85% at 8% 0%, rgb(58 122 96 / 0.55), transparent 62%),
    radial-gradient(ellipse 55% 70% at 40% 105%, rgb(6 20 15 / 0.65), transparent 70%),
    linear-gradient(160deg, #1d4838 0%, #143328 55%, #0e261d 100%);
  background-size: 240px 240px, auto, auto, auto; }
.hero-band p a { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / 0.45);
  text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.hero-band p a:hover { text-decoration-color: #fff; }
.hero-band-text { position: relative; z-index: 1; padding-top: clamp(2.75rem, 6vw, 4rem); padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.hero-band h1 { color: #fff; line-height: 1.06; margin: 0 0 0.8rem; text-wrap: balance;
  font-size: calc(clamp(2rem, 3.6vw, 2.9rem) * var(--hf-scale, 1)); }
.hero-band p { color: #e6efe9; font-size: 1.15rem; margin: 0 0 1.4rem; }
.hero-band-photos { position: absolute; top: 0; right: 0; bottom: 0; width: 48%; margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 3px; }
.hero-band-photos li, .hero-band-photos a { position: relative; display: block; height: 100%; min-height: 0; overflow: hidden; }
.hero-band-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Captions the way a magazine sets them: plain text on a soft shadow at the
   foot of the photo, no boxes (Karl: the boxed labels "looked a little ai"). */
.hero-band-photos a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, rgb(8 20 16 / 0.72), rgb(8 20 16 / 0)); pointer-events: none; }
.hero-band-photos span { position: absolute; left: 1rem; bottom: 0.8rem; z-index: 1; color: #fff;
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; text-shadow: 0 1px 3px rgb(0 0 0 / 0.35); }
.hero-band-photos a:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
/* Karl, 27 Oct 2026: on a computer the headline is two lines, one sentence
   each, and starts near the left edge instead of inside the centred column;
   the header widens to the same edge so the logo lines up with it. The photos
   keep the size they had before (48% wide, 44% up to 1100px, and the old hero
   height: Karl turned down narrower photos), so the headline is sized to the
   column beside them (cqi): each sentence keeps to its line, and it grows on
   wider screens. It never goes below the old size (Karl: on smaller laptops
   3 lines at full size beat 2 smaller ones), so there the second sentence
   wraps, balanced as "Find workers for / your business." */
@media (min-width: 861px) {
  .home .site-head .wrap { max-width: none; padding-left: clamp(1.5rem, 3vw, 4rem); padding-right: clamp(1.5rem, 3vw, 4rem); }
  .hero-band { display: flex; align-items: center; min-height: clamp(27rem, calc(17.3vw + 244px), 29rem); }
  .hero-band-text { width: 52%; max-width: none; margin: 0; container-type: inline-size;
    padding-left: clamp(1.5rem, 3vw, 4rem); padding-right: 2rem; }
  .hero-band-text > * { max-width: 40rem; }
  .hero-band h1 { max-width: none; font-size: calc(min(4.6rem, max(clamp(2rem, 3.6vw, 2.9rem), 6.5cqi)) * var(--hf-scale, 1));
    letter-spacing: -0.02em; line-height: 1.04; }
  .hero-band h1 span { display: block; }
  .hero-band p { font-size: clamp(1.15rem, 1.15vw, 1.3rem); }
  /* Karl, 27 Oct 2026: no Request workers / Apply for work buttons here on a
     computer; the menu above already has Find work and Hire workers. Phones
     keep them, since their menu is folded away. */
  .hero-band .btn-row { display: none; }
  .hero-band p { margin-bottom: 0; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .hero-band { min-height: clamp(23.5rem, calc(75vw - 381px), 27.1rem); }
  .hero-band-photos { width: 44%; }
  .hero-band-text { width: 56%; }
}
@media (max-width: 860px) {
  .hero-band-text > * { max-width: none; }
  .hero-band-photos { position: static; width: auto; height: clamp(220px, 60vw, 380px); }
}

/* Forms keep the live site's text size (Karl, 27 Oct 2026, preferred the live
   "kind of work" checkboxes to the demo's smaller ones). */
.form { font-size: 1.0625rem; }

/* The forms are jumped to from "Apply for work" and "Request workers": stop
   their headings landing under the sticky header. */
#apply, #request { scroll-margin-top: 4.5rem; }

/* Industries: each group is a dropdown; inside, the jobs run left to right. */
/* minmax(0, 1fr) and min-width: 0 stop a group stretching to the full width of its row of cards. */
.ind-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.ind-group, .ind-scroller { min-width: 0; }
.ind-hint { margin: 0 0 0.4rem; color: var(--ink-soft); }
.ind-group { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 5.5rem; }
.ind-group > summary { list-style: none; cursor: pointer; display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.25rem 1rem; padding: 1.1rem 3.2rem 1.1rem 1.3rem; position: relative; }
.ind-group > summary::-webkit-details-marker { display: none; }
.ind-group > summary::after { content: ""; position: absolute; right: 1.4rem; top: 50%; width: 0.6rem; height: 0.6rem;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateY(-70%) rotate(45deg); transition: transform 0.2s; }
.ind-group[open] > summary::after { transform: translateY(-20%) rotate(-135deg); }
.ind-group > summary:hover .ind-title { color: var(--spruce); }
.ind-group[open] > summary { border-bottom: 1px solid var(--line); }
.ind-title { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
.ind-meta { color: var(--ink-soft); font-size: 0.95rem; }
.ind-scroller { position: relative; padding: 1.1rem 0 1rem; }
.ind-row { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 1.3rem;
  padding: 0 1.3rem 0.75rem; }
.ind-row:focus-visible { outline: 2px solid var(--spruce); outline-offset: -2px; }
.job-card { flex: 0 0 clamp(15.625rem, 30%, 20rem); scroll-snap-align: start; display: flex; flex-direction: column;
  background: var(--fog); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.job-card .photo img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }
.job-card > div { padding: 0.9rem 1rem 1rem; }
.job-card h3 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.job-card p { font-size: 0.92rem; line-height: 1.5; margin: 0 0 0.5rem; }
.job-card .roles { font-size: 0.88rem; color: var(--ink-soft); }
.job-card .roles strong { color: var(--ink); }
.ind-arrow { position: absolute; top: 38%; z-index: 2; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 1.6rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15); }
.ind-arrow:hover { background: var(--spruce); color: #fff; border-color: var(--spruce); }
.ind-arrow.prev { left: 0.4rem; }
.ind-arrow.next { right: 0.4rem; }
.ind-arrow[hidden] { display: none; }
@media (max-width: 640px) {
  .ind-arrow { display: none; }
  .job-card { flex-basis: 82%; }
  .ind-group > summary { padding-left: 1rem; }
}

/* Easier to read for older visitors (Karl, 27 Oct 2026). */
body { font-size: 1.125rem; }
main p, main li { max-width: 68ch; }
.hero-band-photos li { max-width: none; }

/* No typewriter labels: plain words in the body font. */
.label, .steps li::before, .season-grid .m, .brand-legal { font-family: var(--body); letter-spacing: 0; text-transform: none; }
.label { font-size: 1rem; font-weight: 700; color: var(--ink); }
.steps li::before { font-size: 1rem; font-weight: 700; }
.season-grid .m { font-size: 1rem; }
.brand-name { font-size: 1.2rem; }
.brand-legal { font-size: 1rem; }
/* At 16px the legal name wraps under the logo on a phone; the footer has it. */
@media (max-width: 520px) { .brand-legal { display: none; } }

/* Nothing under 16px. */
.sector h3 { font-size: 1.15rem; }
.sector p, .job-card p, .steps p, .card-body p { font-size: 1.0625rem; }
.job-card h3 { font-size: 1.2rem; }
.job-card .roles, .industry .roles, .ind-meta, .sector-group-head p, .card-body h4, .season-row .name,
.season-key, .season-note, .field .hint, .form-foot p, .site-foot, .foot-legal, .mosaic span { font-size: 1rem; }
.hero-band-photos span { font-size: 1.0625rem; }

/* Bigger things to tap: 48px menu links, menu button and arrows; 26px
   checkboxes; footer and other stand-alone links at least 44px tall. */
.site-nav a { min-height: 3rem; display: flex; align-items: center; }
.nav-toggle { min-height: 3rem; padding: 0.6rem 1rem; }
.ind-arrow { width: 3rem; height: 3rem; }
.checks input, .consent input { width: 1.625rem; height: 1.625rem; margin-top: 0; }
.checks label { min-height: 2.75rem; }
.foot-grid li { margin-bottom: 0; }
.foot-grid li a { padding: 0.6rem 0; }
.intro-c a { display: inline-block; padding: 0.6rem 0; }
.season-details > summary { padding: 0.6rem 0; }

/* One button colour everywhere: the deeper orange, which white text reads on
   at 6.4:1 (the lighter orange was 4.7:1). No outline-only buttons. */
.btn-primary, .btn-spruce, .btn-ghost, .btn-light, .site-nav .nav-cta a {
  background: var(--oilskin-deep); border-color: var(--oilskin-deep); color: #fff; }
.btn-primary:hover, .btn-spruce:hover, .btn-ghost:hover, .btn-light:hover, .site-nav .nav-cta a:hover {
  background: #7f330b; border-color: #7f330b; color: #fff; }

/* Every screen size keeps the shapes of the laptop design (see make_compact_demo.py). */
@media (min-width: 861px) {
  .hero-band { min-height: 0; }
  .hero-band::after { content: ""; flex: 0 0 48%; aspect-ratio: 730 / 464; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .hero-band { min-height: 0; }
  .hero-band::after { flex-basis: 44%; }
}
@media (max-width: 860px) {
  .hero-band-photos { height: auto; aspect-ratio: 3 / 2; }
}
@media (min-width: 1537px) {
  html { font-size: clamp(100%, min(calc(50% + 100vw / 192), calc(100vh / 36)), 2.5rem); }
  .hero-band-text { width: auto; flex: 1 1 0; }
  .hero-band-photos { width: min(48%, 45.9rem); }
  .hero-band::after { flex-basis: min(48%, 45.9rem); }
  .hero-band h1 { font-size: calc(2.9rem * var(--hf-scale, 1)); }
  .page-head { display: flex; flex-direction: column; justify-content: center; min-height: calc(19vw - 3px); }
}

/* Review fixes, 28 Oct 2026 (see make_compact_demo.py). */
/* White focus ring on the dark green, where the orange one was 2.1 to 2.9:1. */
.hero-band :focus-visible, .section-spruce :focus-visible, .page-head :focus-visible,
.site-foot :focus-visible { outline-color: #fff; }
/* Industries: group titles are headings now, sized as before. Cards keep their
   own height, the arrow sits over the photos, and on a phone the row fades at
   the right edge so the next card reads as more to swipe, not as cut-off words. */
.ind-title { margin: 0; line-height: 1.2; }
.ind-row { align-items: flex-start; }
.ind-arrow { top: 6.5rem; }
@media (max-width: 760px) {
  .ind-row { -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
    mask-image: linear-gradient(90deg, #000 82%, transparent); }
}
/* Find work: three columns of kinds of work, so no label wraps. */
.checks { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
/* The home boxes are links; on a touch screen there is no hover to say so. */
.sector h3 { color: var(--spruce); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
/* Phone menu: "Contact us" centred in its button like the others. */
.site-nav .nav-cta a { justify-content: center; }
/* Banners: titles on one or two natural lines, and the line under them short
   enough to stay clear of the person in the photo. */
.page-head h1 { max-width: 24ch; }
@media (min-width: 861px) { .page-head p { max-width: 34ch; } }

/* The logo, in the style of the Silent Professionals logo (Karl, 2 Nov 2026):
   the name in bold capitals over a solid black bar with the legal name in
   white, widely spaced, squared capitals. The bar is as wide as the name.
   Since 4 Nov 2026 the header shows the name alone (Karl: "NS Employment Agency
   LTD."), so the bar's rules are unused, kept in case it comes back. */
@font-face { font-family: "Jura"; src: url("../fonts/Jura-Medium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
.brand > span { display: inline-flex; flex-direction: column; align-items: stretch; }
.brand-name { font-family: var(--display); font-weight: 700; font-stretch: normal; text-transform: uppercase;
  font-size: 1.95rem; line-height: 1; letter-spacing: 0.01em; color: #111; white-space: nowrap; }
.brand-legal { display: block; margin-top: 0.3rem; padding: 0.22rem 0.45rem 0.2rem; background: #000; color: #fff;
  font-family: "Jura", var(--mono); font-weight: 500; font-size: 1rem; line-height: 1.15;
  letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; text-align: center; }
/* The logo keeps one size on every computer. 901 to 1140 px is too narrow for
   it and the menu side by side with room between them, so there the menu
   stays behind its Menu button, with the same rules as below 901 px
   (style.css); 1141 to 1260 px, the menu links sit a little closer together.
   (Re-measured 4 Nov 2026 for the black-block logo and the full-width header:
   the space before the menu is now at least about 110 px wherever it shows.) */
@media (min-width: 901px) and (max-width: 1140px) {
  .nav-toggle { display: inline-block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--paper);
    border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgb(23 38 43 / 0.08); }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; padding: 0.5rem var(--gutter) 1rem; }
  .site-nav a { padding: 0.75rem 0.5rem; }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--spruce); padding-left: 0.9rem; }
  .site-nav .nav-cta a { margin: 0.5rem 0 0; text-align: center; }
}
@media (min-width: 1141px) and (max-width: 1260px) {
  .site-nav a { padding-left: 0.45rem; padding-right: 0.45rem; font-size: 1rem; }
}
/* Tablets and phones (Karl, 2 Nov 2026: the full size "covers the screen and
   looks unnatural" there): a smaller logo, the bar still as wide as the name. */
@media (max-width: 900px) {
  .brand-name { font-size: 1.4rem; }
  .brand-legal { font-size: 0.72rem; margin-top: 0.22rem; padding: 0.17rem 0.38rem 0.15rem; }
}
/* Too narrow for the bar at a readable size: the name alone, still in capitals.
   The footer gives the legal name in full. */
@media (max-width: 639px) {
  .brand-legal { display: none; }
  .brand-name { font-size: 1.02rem; }
}
/* Small phones: "NS Employment Agency LTD." and the Menu button do not fit on
   one line below about 430 px, so the name takes two lines there. */
@media (max-width: 440px) {
  .brand, .brand > span { min-width: 0; }
  .brand-name { white-space: normal; line-height: 1.1; }
  .brand-name > span { display: block; white-space: nowrap; }
}
/* Option C (Karl, 4 Nov 2026, picked from four mockups): the whole name in
   white on a black block, and on computers the header runs the full width of
   the screen, so the name sits well away from the menu. The sizes per screen
   above still apply; the block grows with them. */
.brand-name { background: #000; color: #fff; padding: 0.36em 0.55em 0.32em; letter-spacing: 0.02em; }
@media (min-width: 901px) {
  .brand-name { font-size: 1.75rem; }
  .site-head .wrap { max-width: none; padding-left: clamp(1.5rem, 3vw, 4rem); padding-right: clamp(1.5rem, 3vw, 4rem); gap: 3rem; }
}