/* ==========================================================================
   Nixora Services LLC — Global Stylesheet
   Palette, layout, components. Edit the tokens in :root to rebrand.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand-900: #011425;
  --brand-800: #03294c;
  --brand-700: #043b6f;
  --brand-600: #054a8b;
  --brand-500: #0660b4;
  --brand-400: #3a8ede;
  --brand-300: #76b4ef;
  --brand-200: #b3d2ef;
  --brand-100: #eaf1f8;

  /* Accent (waste-sorting / green team) */
  --accent-700: #60801e;
  --accent-600: #57741b;
  --accent-500: #90c02d;
  --accent-400: #abd652;

  /* Neutrals */
  --ink: #0e1626;
  --ink-soft: #33425c;
  --muted: #5d6b82;
  --line: #dee4ee;
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --surface-3: #e8eef6;
  --bg: #fbfcfe;

  /* Semantic */
  --on-tint: #054a8b;
  --on-tint-hover: #0660b4;
  --on-accent: #57741b;
  --focus: #0660b4;
  --danger: #b3261e;
  --star: #d9922c;

  /* Type */
  --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Space & shape */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(9, 40, 33, .06), 0 2px 8px rgba(9, 40, 33, .05);
  --shadow: 0 4px 12px rgba(9, 40, 33, .07), 0 16px 40px rgba(9, 40, 33, .08);
  --shadow-lg: 0 8px 24px rgba(9, 40, 33, .10), 0 32px 80px rgba(9, 40, 33, .12);
  --container: 1160px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e9eef6;
    --ink-soft: #c2cddd;
    --muted: #92a0b6;
    --line: #22304a;
    --surface: #111a2b;
    --surface-2: #161f33;
    --surface-3: #1d2942;
    --bg: #0b1220;
    --brand-100: #0a2038;
    --brand-200: #12406e;
    --on-tint: #86c2f5;
    --on-tint-hover: #b4d9fa;
    --on-accent: #b7dc63;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .35);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5), 0 32px 80px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --ink: #e9eef6;
  --ink-soft: #c2cddd;
  --muted: #92a0b6;
  --line: #22304a;
  --surface: #111a2b;
  --surface-2: #161f33;
  --surface-3: #1d2942;
  --bg: #0b1220;
  --brand-100: #0a2038;
  --brand-200: #12406e;
  --on-tint: #86c2f5;
  --on-tint-hover: #b4d9fa;
  --on-accent: #b7dc63;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 4px 12px rgba(0, 0, 0, .45), 0 16px 40px rgba(0, 0, 0, .35);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5), 0 32px 80px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.15;
  letter-spacing: -.022em;
  margin: 0 0 .6em;
  font-weight: 700;
}

h1 { font-size: clamp(2.05rem, 4.6vw, 3.4rem); letter-spacing: -.032em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
h4 { font-size: 1.02rem; }
p  { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--on-tint); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--on-tint-hover); }

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.2rem; }
li { margin-bottom: .4rem; }

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

::selection { background: var(--brand-200); color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--brand-700);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tint { background: var(--surface-2); }
.section--edge { border-block: 1px solid var(--line); }

.section-head { max-width: 44rem; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head:last-child { margin-bottom: 0; }
.section-head p { color: var(--muted); font-size: 1.06rem; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: .765rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-tint);
  background: var(--brand-100);
  border: 1px solid color-mix(in srgb, var(--brand-400) 28%, transparent);
  padding: .38rem .78rem;
  border-radius: 100px;
  margin-bottom: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-400);
}

.grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: .95rem;
  line-height: 1;
  padding: .95rem 1.55rem;
  border-radius: 100px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--brand-600);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-600) 32%, transparent);
}
.btn--primary:hover { background: var(--brand-500); color: #fff; }

/* accent-700 rather than the raw lime: white text needs 4.5:1. */
.btn--accent {
  background: var(--accent-700);
  color: #fff;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-700) 34%, transparent);
}
.btn--accent:hover { background: var(--accent-600); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover { border-color: var(--brand-400); color: var(--on-tint); background: var(--surface); }

.btn--light {
  background: #fff;
  color: var(--brand-800);
}
.btn--light:hover { background: var(--brand-100); color: var(--brand-800); }

.btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); color: #fff; border-color: #fff; }

.btn--block { width: 100%; }
.btn--sm { padding: .68rem 1.15rem; font-size: .875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 84px;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand__logo {
  display: block;
  width: 132px;
  height: auto;
  /* Custom properties inherit into a <use> shadow tree, so the wordmark and
     the SERVICES line recolour independently. The green wave never changes. */
  --logo-word: #054a8b;
  --logo-sub: #6d6d6d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__logo {
    --logo-word: #fff;
    --logo-sub: #b9c2cc;
  }
}
:root[data-theme="dark"] .brand__logo {
  --logo-word: #fff;
  --logo-sub: #b9c2cc;
}

/* The sprite holding the logo geometry; referenced by <use>. */
.brand-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.footer__about .brand__logo { width: 176px; }
.brand__logo--stacked { width: 220px; }

@media (max-width: 420px) {
  .brand__logo { width: 116px; }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: .1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  display: block;
  white-space: nowrap;
  padding: .5rem .62rem;
  border-radius: 100px;
  color: var(--ink-soft);
  font-size: .93rem;
  font-weight: 550;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}
.nav__links a:hover,
.nav__links a.is-active { background: var(--surface-3); color: var(--ink); }

.nav__actions { display: flex; align-items: center; gap: .45rem; }

/* Sits outside .nav__menu so the theme switch stays reachable on mobile
   without opening the menu. */
.nav__end {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: none;
}

/* --------------------------------------------------------------------------
   5b. Theme switch
   -------------------------------------------------------------------------- */
.theme-toggle {
  position: relative;
  flex: none;
  width: 58px;
  height: 31px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  background: var(--surface-3);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { border-color: var(--brand-400); }

.theme-toggle__knob {
  position: absolute;
  top: 50%;
  left: 2px;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--star);
  box-shadow: 0 1px 3px rgba(1, 15, 29, .28);
  transition: transform .26s cubic-bezier(.34, 1.35, .64, 1),
              background-color .2s ease, color .2s ease;
}
.theme-toggle__moon { display: none; }

:root[data-theme="dark"] .theme-toggle { background: var(--surface-3); }
:root[data-theme="dark"] .theme-toggle__knob {
  transform: translateX(27px);
  background: var(--brand-500);
  color: #fff;
}
:root[data-theme="dark"] .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: block; }

/* No JS: the switch cannot do anything, so do not advertise it. */
.no-js .theme-toggle { display: none; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
}
.nav__toggle span {
  position: relative;
  display: block;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, background-color .2s ease;
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px; height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, top .2s ease;
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1150px) {
  .nav__toggle { display: inline-flex; }
  .nav__end { margin-left: auto; }
  .nav__menu {
    position: fixed;
    inset: 84px 0 auto;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 1rem var(--gutter) 1.6rem;
    display: none;
    flex-direction: column;
    gap: 1rem;
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
  }
  .nav__menu.is-open { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__links a { padding: .8rem .9rem; font-size: 1rem; }
  .nav__actions { flex-direction: column; align-items: stretch; }
  .nav__actions .btn { width: 100%; }
}

@media (min-width: 1151px) {
  .nav__menu { display: flex; align-items: center; gap: .9rem; margin-left: auto; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3.5rem, 7vw, 6rem);
  background:
    radial-gradient(1100px 520px at 12% -8%, color-mix(in srgb, var(--brand-300) 26%, transparent), transparent 62%),
    radial-gradient(900px 460px at 92% 8%, color-mix(in srgb, var(--accent-400) 18%, transparent), transparent 60%),
    var(--bg);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 72%);
  opacity: .5;
  pointer-events: none;
}
.hero > .container { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero__lede {
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
  color: var(--ink-soft);
  max-width: 34rem;
  margin-bottom: 2rem;
}

.hero__note {
  margin-top: 1.6rem;
  font-size: .88rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: .5rem;
}

.hero__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 3vw, 2.1rem);
}
.hero__card h3 { margin-bottom: 1.2rem; font-size: 1.1rem; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checklist li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin: 0;
  font-size: .95rem;
  color: var(--ink-soft);
}
.checklist svg { flex: none; margin-top: .18rem; color: var(--on-tint); }

/* Stats strip */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.stat { background: var(--surface); padding: 1.5rem 1.4rem; }
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--on-tint);
  line-height: 1;
  margin-bottom: .4rem;
}
.stat__label { font-size: .86rem; color: var(--muted); line-height: 1.45; }

/* --------------------------------------------------------------------------
   6b. Home city band

   One flat navy ground with the photograph laid over it at a low, even
   opacity. No mask and no directional gradient anywhere: any gradient here
   reads as a visible seam across the band, so the photo is texture and the
   copy sits on a constant background at full contrast.
   -------------------------------------------------------------------------- */
.locale {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: var(--brand-900);
  padding-block: clamp(3.5rem, 7vw, 5.5rem);
}

.locale__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The arch crown sits ~2% from the photo's top edge, so any crop taken
     from the centre cuts it off. */
  object-position: 50% 0;
  opacity: .32;
}

.locale h2 { color: #fff; margin-bottom: .8rem; }
.locale p { color: rgba(255, 255, 255, .92); }
.locale .eyebrow {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .3);
}
.locale .eyebrow::before { background: var(--accent-400); }

.locale__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
}
.locale__meta li {
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .26);
  padding: .35rem .8rem;
  border-radius: 100px;
}

@media (min-width: 821px) {
  .locale { padding-block: clamp(4rem, 7vw, 6rem); }
  .locale__copy { max-width: 38rem; }
}

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  height: 100%;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--brand-400) 42%, var(--line));
}
.card p { color: var(--muted); font-size: .95rem; }

.card__icon {
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--brand-100);
  color: var(--on-tint);
  margin-bottom: 1.1rem;
}
.card__icon--accent {
  background: color-mix(in srgb, var(--accent-400) 22%, transparent);
  color: var(--on-accent);
}

.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; }
.tag {
  font-size: .74rem;
  font-weight: 650;
  font-family: var(--font-display);
  letter-spacing: .02em;
  padding: .3rem .65rem;
  border-radius: 100px;
  background: var(--surface-3);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   7b. Mission and vision

   Two coloured blocks carrying a heading and one statement each, sitting
   inside About Us under the introduction.
   -------------------------------------------------------------------------- */
.purpose {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2.2rem, 4vw, 3rem);
}

.purpose__item {
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.purpose__item--vision {
  background: linear-gradient(135deg, #3d5410, var(--accent-700));
}

.purpose__item h3 {
  color: #fff;
  margin-bottom: .6rem;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}
.purpose__item p {
  margin: 0;
  color: rgba(255, 255, 255, .93);
  font-size: clamp(.98rem, 1.4vw, 1.05rem);
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   8. Job / application cards
   -------------------------------------------------------------------------- */
.job {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
  height: 100%;
}
.job:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.job__media {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.job__top {
  padding: 1.6rem clamp(1.3rem, 2.4vw, 1.9rem) 1.3rem;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  color: #fff;
}
.job__top--accent { background: linear-gradient(135deg, #3d5410, var(--accent-700)); }
.job__badge {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .28);
  padding: .28rem .6rem;
  border-radius: 100px;
  margin-bottom: .8rem;
}
.job__top h3 { color: #fff; margin-bottom: .3rem; font-size: 1.35rem; }
.job__top p { color: rgba(255, 255, 255, .88); font-size: .92rem; margin: 0; }
.job__body {
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  flex: 1;
}
.job__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.job__meta li {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface-2);
  border: 1px solid var(--line);
  padding: .3rem .65rem;
  border-radius: 100px;
}
.job__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.job__list li {
  position: relative;
  padding-left: 1.5rem;
  margin: 0;
  font-size: .93rem;
  color: var(--muted);
}
.job__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-400);
}
.job__cta { margin-top: auto; }

/* --------------------------------------------------------------------------
   9. Process timeline
   -------------------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 1rem; }
@media (min-width: 760px) { .steps { grid-template-columns: 1fr 1fr; gap: 1rem 2rem; } }

.step {
  counter-increment: step;
  position: relative;
  display: flex;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s ease, transform .2s ease;
}
.step:hover { border-color: var(--brand-400); transform: translateX(3px); }
.step__num {
  flex: none;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-100);
  color: var(--on-tint);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: .92rem;
}
.step__num::before { content: counter(step); }
.step h4 { margin-bottom: .2rem; }
.step p { font-size: .9rem; color: var(--muted); margin: 0; }

/* --------------------------------------------------------------------------
   10. Reviews
   -------------------------------------------------------------------------- */
.review {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.4rem, 2.4vw, 1.85rem);
  box-shadow: var(--shadow-sm);
  height: 100%;
}
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.review blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.review blockquote::before { content: "\201C"; }
.review blockquote::after  { content: "\201D"; }
.review__by { display: flex; align-items: center; gap: .8rem; margin-top: auto; }
.avatar {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-600);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
}
.review__by strong { display: block; font-size: .93rem; }
.review__by span { display: block; font-size: .83rem; color: var(--muted); }

/* Placeholder-content marker. Delete this block, the .sample-note element
   and every .tag--sample badge once real reviews replace the examples. */
.sample-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 1.15rem 1.5rem;
  margin-bottom: 2rem;
  background: var(--surface-2);
  border: 1px dashed color-mix(in srgb, var(--muted) 48%, transparent);
  border-radius: var(--radius-lg);
}
.sample-note p {
  margin: 0;
  max-width: 58ch;
  font-size: .93rem;
  color: var(--muted);
}
.sample-note strong { color: var(--ink); }
.sample-note .btn { margin-left: auto; }

.review__head {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.review__head .stars { margin-right: auto; }

.tag--sample {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   11. CEO block
   -------------------------------------------------------------------------- */
.ceo {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
}
@media (max-width: 860px) { .ceo { grid-template-columns: 1fr; } }

.ceo__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(150deg, var(--brand-700), var(--brand-400) 55%, var(--accent-400));
  box-shadow: var(--shadow-lg);
  display: grid;
  place-items: center;
}
.ceo__portrait img { width: 100%; height: 100%; object-fit: cover; }
.ceo__initials {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 5.5rem);
  font-weight: 800;
  color: rgba(255, 255, 255, .92);
  letter-spacing: -.04em;
}
.ceo__quote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--ink);
  border-left: 3px solid var(--brand-400);
  padding-left: 1.2rem;
  margin: 0 0 1.5rem;
}
.ceo__sig { display: flex; align-items: center; gap: .9rem; margin-top: 1.6rem; }
.ceo__sig strong { font-family: var(--font-display); font-size: 1.05rem; display: block; }
.ceo__sig span { font-size: .88rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   12. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 3.2vw, 2.4rem);
  box-shadow: var(--shadow);
}

.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.field label {
  font-family: var(--font-display);
  font-size: .87rem;
  font-weight: 650;
  color: var(--ink);
}
.field .hint { font-size: .8rem; color: var(--muted); }
.field .req { color: var(--danger); }

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: .97rem;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .78rem .9rem;
  width: 100%;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-400) 22%, transparent);
}
.field input::placeholder, .field textarea::placeholder { color: color-mix(in srgb, var(--muted) 78%, transparent); }

.field-row { display: grid; gap: 0 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.field-row--3 { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 620px) { .field-row--3 { grid-template-columns: 1fr; } }

/* The street address keeps most of the width: it carries the suggestion list,
   which needs room to show a street and a city on one line. */
.field-row--address { grid-template-columns: 3fr 1fr; }
@media (max-width: 620px) { .field-row--address { grid-template-columns: 1fr; } }

/* The two hints are different lengths, so one wraps and the other does not,
   and the inputs stopped lining up. Pushing each input to the bottom of its
   cell keeps them level however the text above them falls. */
@media (min-width: 621px) {
  .field-row--address .field > input { margin-top: auto; }
}

.fieldset {
  margin: 0 0 1.4rem;
  padding: 1.1rem 1.2rem .4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.fieldset legend {
  padding: 0 .45rem;
  font-family: var(--font-display);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-tint);
}
.fieldset .check:last-of-type { margin-bottom: 1rem; }

.check {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .88rem;
  color: var(--muted);
  margin-bottom: 1.2rem;
}
.check input { width: 18px; height: 18px; flex: none; margin-top: .18rem; accent-color: var(--brand-600); }

/* Fields the submit handler flagged as incomplete. The browser's own bubble
   is easy to miss and on a phone often does not appear at all, so the field
   itself has to show it. Cleared as soon as the field becomes valid. */
.field [aria-invalid="true"],
.field [aria-invalid="true"]:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 5%, var(--bg));
}
.field [aria-invalid="true"]:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 22%, transparent);
}
.check input[aria-invalid="true"] {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}
.check:has(input[aria-invalid="true"]) { color: var(--danger); }

.form-note {
  font-size: .82rem;
  color: var(--muted);
  margin-top: 1rem;
}

.form-status {
  display: none;
  margin-top: 1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
.form-status.is-visible { display: block; }
.form-status--ok { background: var(--brand-100); color: var(--on-tint); border: 1px solid var(--brand-200); }
.form-status--err { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); }

/* --------------------------------------------------------------------------
   13. Contact info list
   -------------------------------------------------------------------------- */
.contact-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 1.15rem; }
.contact-list li { display: flex; gap: .9rem; margin: 0; }
.contact-list .ico {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--brand-100);
  color: var(--on-tint);
}
.contact-list strong { display: block; font-family: var(--font-display); font-size: .93rem; }
.contact-list a, .contact-list span { font-size: .95rem; color: var(--muted); text-decoration: none; }
.contact-list a:hover { color: var(--on-tint); text-decoration: underline; }

/* --------------------------------------------------------------------------
   13b. Staff access tiles
   -------------------------------------------------------------------------- */
.access {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.access:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--brand-400);
  color: inherit;
}

.access__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--brand-100);
  color: var(--on-tint);
  margin-bottom: .3rem;
}
.access--primary .access__icon {
  background: var(--brand-600);
  color: #fff;
}

.access h2 {
  font-size: clamp(1.1rem, 1.7vw, 1.28rem);
  margin: 0;
}
.access p {
  margin: 0;
  font-size: .93rem;
  color: var(--muted);
}

.access__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: .6rem;
  font-family: var(--font-display);
  font-size: .9rem;
  font-weight: 650;
  color: var(--on-tint);
}
.access:hover .access__cta { color: var(--on-tint-hover); }
.access__go { flex: none; }

/* Standing advisory, not a transient alert. */
.notice {
  display: flex;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-500);
  border-radius: var(--radius);
}
.notice__icon {
  flex: none;
  color: var(--on-accent);
  margin-top: .15rem;
}
.notice strong {
  display: block;
  font-family: var(--font-display);
  margin-bottom: .3rem;
}
.notice p {
  margin: 0;
  font-size: .92rem;
  color: var(--muted);
}
.notice code {
  font-size: .88em;
  padding: .1em .35em;
  border-radius: 4px;
  background: var(--surface-3);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-800), var(--brand-600) 60%, var(--brand-500));
  color: #fff;
  border-radius: var(--radius-xl);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  text-align: center;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 340px;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 68%);
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, .88); max-width: 46rem; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.8rem; }

/* --------------------------------------------------------------------------
   15. Social links
   -------------------------------------------------------------------------- */
.socials { display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.socials li { margin: 0; }
.socials a {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.socials a:hover {
  transform: translateY(-3px);
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 2.2rem;
  margin-bottom: 2.6rem;
}
@media (max-width: 880px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__about p { font-size: .92rem; color: var(--muted); max-width: 30rem; margin-top: 1rem; }
.footer h4 {
  font-size: .78rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer__list a { font-size: .93rem; color: var(--ink-soft); text-decoration: none; }
.footer__list a:hover { color: var(--on-tint); text-decoration: underline; }

.footer__bottom {
  border-top: 1px solid var(--line);
  padding-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .86rem;
  color: var(--muted);
}
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer__bottom a { color: var(--muted); text-decoration: none; }
.footer__bottom a:hover { color: var(--on-tint); text-decoration: underline; }

/* --------------------------------------------------------------------------
   17. Reveal animation
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, .61, .36, 1), transform .6s cubic-bezier(.22, .61, .36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   18. Utilities
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--muted); }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Spam trap. It has to be display:none rather than .sr-only: a clipped 1px
   input is still a rendered field, and browser autofill and password managers
   fill it for real people. Bots read the markup, not the stylesheet.
   display:none already takes it out of the accessibility tree, so it carries
   no aria-hidden — that would only warn about hiding a focusable element. */
.honeypot { display: none !important; }

/* Address suggestions. The list is positioned against .field, which is why
   that gets a stacking context of its own — the dropdown has to sit over the
   fields below it. */
.field { position: relative; }

.suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: .3rem;
  list-style: none;
  max-height: 16rem;
  overflow-y: auto;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(2, 18, 36, .16);
}

.suggestions li {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .55rem .65rem;
  border-radius: calc(var(--radius-sm) - 3px);
  cursor: pointer;
}

.suggestions li:hover,
.suggestions li.is-active { background: var(--surface-2); }

.suggestions__line { font-size: .95rem; color: var(--ink); }
.suggestions__context { font-size: .8rem; color: var(--muted); }

/* The line under the address field after it has been checked. Sized like the
   existing hints so it reads as guidance, never as a validation failure —
   an address the Census file has not heard of is usually still real. */
.field-check {
  margin: .45rem 0 0;
  font-size: .82rem;
  line-height: 1.45;
}
.field-check--ok { color: var(--accent-600); }
.field-check--info { color: var(--on-tint); }
.field-check--warn { color: var(--muted); }

.field-check__use {
  font: inherit;
  font-weight: 700;
  color: var(--on-tint);
  background: none;
  border: 0;
  padding: 0 .1rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.field-check__use:hover { color: var(--on-tint-hover); }

/* Emailed verification code. Sits under the email field, quiet until it is
   needed, and states plainly why it is being asked for — a code with no
   explanation reads like an obstacle rather than a step. */
.verify { margin-top: .6rem; }
.verify__ask {
  margin: 0 0 .5rem;
  font-size: .8rem;
  line-height: 1.45;
  color: var(--muted);
}
.verify__row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.verify__row + .verify__row { margin-top: .5rem; }
/* A class that sets display beats the browser's own [hidden] rule, so the
   code box stayed on screen after being told to go away. */
.verify__row[hidden] { display: none; }

.btn--small {
  font-size: .85rem;
  padding: .5rem .95rem;
}

.verify__code {
  width: 7.5rem;
  flex: none;
  font-size: 1.05rem;
  letter-spacing: .28em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* A verified address is left visible but no longer editable, so the code
   cannot be checked against one address and the form sent with another. */
.verify--done .verify__row { display: none; }
.verify--done .verify__ask { color: var(--accent-600); font-weight: 600; }

/* Language switch. Both codes are always visible, one lit: a flag would
   claim a country the language does not belong to, and a globe icon says
   "settings" more than it says "español". */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-display);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .42rem .6rem;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease;
}
.lang-toggle:hover { border-color: var(--brand-400); }
.lang-toggle__on { color: var(--on-tint); }
.lang-toggle__off { color: var(--muted); }
:root[lang="es"] .lang-toggle__on { color: var(--muted); }
:root[lang="es"] .lang-toggle__off { color: var(--on-tint); }

@media (max-width: 420px) {
  .lang-toggle { padding: .42rem .5rem; font-size: .72rem; }
}

.page-hero {
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  background:
    radial-gradient(800px 380px at 20% -20%, color-mix(in srgb, var(--brand-300) 24%, transparent), transparent 62%),
    var(--bg);
  border-bottom: 1px solid var(--line);
}
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-600); text-decoration: underline; }