/* ==========================================================================
   Partnership Recruiting — Design System
   No visual framework: plain CSS, organised into clearly labelled sections.
   See CLAUDE.md for the conventions this file establishes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font — Raleway, self-hosted (variable weight 400–700, latin subset).
   Sourced once from Google's own font files; no runtime dependency on any
   font CDN. See /assets/fonts/raleway/.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/raleway/raleway-variable-latin.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand colours */
  --color-navy: #112e52;
  --color-navy-dark: #0b2038;
  --color-blue: #015a93;
  --color-blue-dark: #01426d;
  --color-light-blue: #c0e0ff;
  --color-light-blue-hover: #a7d3fb;

  /* Neutrals — derived from navy rather than pure grey, for cohesion */
  --color-ink: #16233a;
  --color-ink-muted: #4c5c72;
  --color-ink-soft: #6d7c90;
  --color-border: #dbe6f0;
  --color-border-strong: #b9cbdc;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f9fc;

  /* Text/links on dark (navy) backgrounds */
  --color-on-navy: #ffffff;
  --color-on-navy-muted: var(--color-light-blue);

  --color-focus: var(--color-blue);

  /* Form feedback */
  --color-success: #1c7a4d;
  --color-success-bg: #e9f7ef;
  --color-error: #b3261e;
  --color-error-bg: #fbeae9;

  /* Typography */
  --font-family-base: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-xs: 0.8125rem;   /* 13px — fine print, footer legal text */
  --text-sm: 0.9375rem;   /* 15px — nav, buttons, labels, job metadata */
  --text-base: 1rem;      /* 16px — body */
  --text-md: 1.125rem;    /* 18px — lead paragraphs */
  --text-lg: 1.375rem;    /* 22px — card titles, small headings */
  --text-xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);   /* H3 */
  --text-2xl: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);  /* H2 */
  --text-3xl: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);   /* H1 */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;

  /* Layout */
  --container-max: 1280px;
  --container-max-narrow: 46rem;
  --container-padding-inline: clamp(1.25rem, 4vw, 3rem);

  /* Spacing scale (4px grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* Shape */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Shadows — subtle, navy-tinted rather than pure black */
  --shadow-sm: 0 1px 3px rgba(17, 46, 82, 0.08);
  --shadow-md: 0 12px 28px rgba(17, 46, 82, 0.12);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 150ms var(--ease-standard);
  --transition-base: 220ms var(--ease-standard);
}

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

/* --------------------------------------------------------------------------
   3. Reset / base
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-ink);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

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

button {
  background: none;
  border: none;
}

/* --------------------------------------------------------------------------
   4. Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-base);
  color: var(--color-navy);
  margin: 0 0 var(--space-4);
  line-height: var(--leading-tight);
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
}

h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

p {
  margin: 0 0 var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

a:not([class]) {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

a:not([class]):hover {
  color: var(--color-navy);
}

.eyebrow {
  display: block;
  text-transform: uppercase;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  color: var(--color-blue);
  margin-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   5. Accessibility helpers
   -------------------------------------------------------------------------- */

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--color-navy);
  color: #fff;
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

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

.site-footer :focus-visible,
.cta-band :focus-visible,
.contact-info :focus-visible {
  outline-color: var(--color-light-blue);
}

/* --------------------------------------------------------------------------
   6. Layout
   -------------------------------------------------------------------------- */

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
}

.container--narrow {
  max-width: var(--container-max-narrow);
}

.section {
  padding-block: clamp(3rem, 7vw, var(--space-9));
}

.section--alt {
  background: var(--color-surface-alt);
}

.section__header {
  max-width: 42rem;
  margin-bottom: var(--space-7);
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-family-base);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  padding: 0.9rem 1.75rem;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-navy);
  color: var(--color-navy);
}

.btn-secondary:hover {
  background: var(--color-navy);
  color: #fff;
}

.btn-light {
  background: var(--color-light-blue);
  border-color: var(--color-light-blue);
  color: var(--color-navy);
}

.btn-light:hover {
  background: var(--color-light-blue-hover);
  border-color: var(--color-light-blue-hover);
}

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

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

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: box-shadow var(--transition-base), border-color var(--transition-base),
    transform var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

/* Sector tiles — a single joined grid (shared 1px dividers, not separate
   cards with gaps) with clean line icons and a colour wipe-in on hover,
   sliding down from the top of the tile. Each tile is one big link
   through to its sector page. */
.sector-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

@media (max-width: 900px) {
  .sector-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .sector-tiles {
    grid-template-columns: 1fr;
  }
}

.sector-tile {
  position: relative;
  display: block;
  padding: var(--space-6);
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}

.sector-tile::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-navy);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.35s var(--ease-standard);
}

.sector-tile:hover::before,
.sector-tile:focus-visible::before {
  transform: scaleY(1);
}

.sector-tile__icon,
.sector-tile h3,
.sector-tile p,
.sector-tile__cta {
  position: relative;
  z-index: 1;
  transition: color 0.35s var(--ease-standard);
}

.sector-tile__icon {
  display: inline-flex;
  margin-bottom: var(--space-5);
  color: var(--color-blue);
}

.sector-tile__icon svg {
  width: 32px;
  height: 32px;
}

.sector-tile h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.sector-tile p {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-5);
}

.sector-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--color-blue);
}

.sector-tile:hover .sector-tile__icon,
.sector-tile:focus-visible .sector-tile__icon,
.sector-tile:hover h3,
.sector-tile:focus-visible h3,
.sector-tile:hover p,
.sector-tile:focus-visible p,
.sector-tile:hover .sector-tile__cta,
.sector-tile:focus-visible .sector-tile__cta {
  color: #fff;
}

/* Job card — used by the homepage "Latest Jobs" section (rendered from
   data/jobs.json by assets/js/latest-jobs.js) and, later, the Jobs page. */
.job-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .job-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .job-list {
    grid-template-columns: 1fr;
  }
}

.job-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.job-card__tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-ink-muted);
  font-size: 0.6875rem;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.job-card__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
}

.job-card__title a {
  color: var(--color-navy);
  text-decoration: none;
}

.job-card__title a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.job-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-muted);
  list-style: none;
}

.job-card__meta li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.job-card__meta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-blue);
}

/* --------------------------------------------------------------------------
   9. Header & navigation
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--color-border);
}

.site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 84px;
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-navy);
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), transform var(--transition-fast);
}

.icon-btn svg {
  width: 18px;
  height: 18px;
}

.icon-btn:hover {
  background: var(--color-blue);
  border-color: var(--color-blue);
  color: #fff;
  transform: translateY(-1px);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  font-weight: var(--weight-bold);
  font-size: 1.375rem;
  letter-spacing: var(--tracking-tight);
  color: var(--color-navy);
  text-decoration: none;
}

.site-logo__image {
  display: block;
  height: 56px;
  width: auto;
}

@media (max-width: 959px) {
  .site-logo__image {
    height: 44px;
  }
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__list > li {
  position: relative;
}

.main-nav__list > li > a,
.has-submenu__label {
  display: inline-block;
  position: relative;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-2) 0.125rem;
}

.main-nav__list > li > a:hover,
.main-nav__list > li > a[aria-current='page'] {
  color: var(--color-blue);
}

.main-nav__list > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--color-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.main-nav__list > li > a:hover::after,
.main-nav__list > li > a[aria-current='page']::after {
  transform: scaleX(1);
}

.has-submenu__label::after {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 0.4rem;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: transform var(--transition-fast);
}

.has-submenu:hover .has-submenu__label::after,
.has-submenu:focus-within .has-submenu__label::after {
  transform: rotate(180deg);
}

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 300px;
  margin: 0;
  padding: var(--space-3);
  list-style: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.has-submenu:hover .submenu,
.has-submenu:focus-within .submenu {
  opacity: 1;
  pointer-events: auto;
  /* Flush against the trigger (no vertical offset) so there's no dead
     zone between "Sectors" and the menu for the cursor to lose :hover
     in while crossing — the 4px offset above is only the closed/starting
     position for the slide-in animation, not the settled hover state. */
  transform: translate(-50%, 0);
}

.submenu li + li {
  margin-top: 0.125rem;
}

.submenu a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.625rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--color-ink);
  text-decoration: none;
}

.submenu__icon {
  flex-shrink: 0;
  color: var(--color-blue);
}

.submenu__icon svg {
  width: 18px;
  height: 18px;
}

.submenu a:hover {
  background: var(--color-surface-alt);
  color: var(--color-blue);
}

.header-cta {
  padding: 0.7rem 1.5rem;
}

.main-nav__cta {
  display: none;
}

.nav-toggle {
  display: none;
}

@media (max-width: 959px) {
  .site-header__inner {
    min-height: 72px;
  }

  .site-header__right {
    gap: var(--space-3);
  }

  .header-actions {
    gap: var(--space-2);
  }

  .icon-btn {
    width: 36px;
    height: 36px;
  }

  .icon-btn svg {
    width: 16px;
    height: 16px;
  }

  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .nav-toggle__bar {
    width: 20px;
    height: 2px;
    background: var(--color-navy);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }

  .site-header.nav-is-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .site-header.nav-is-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
  }

  .site-header.nav-is-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .main-nav {
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--color-surface);
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
  }

  .site-header.nav-is-open .main-nav {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .main-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-5) var(--container-padding-inline) var(--space-8);
  }

  .main-nav__list > li > a,
  .has-submenu__label {
    display: block;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-md);
  }

  .main-nav__list > li > a::after {
    display: none;
  }

  .submenu {
    position: static;
    opacity: 1;
    transform: none;
    box-shadow: none;
    border: none;
    background: var(--color-surface-alt);
    margin: 0 0 var(--space-2);
    padding: var(--space-2);
  }

  .submenu a {
    padding: var(--space-3) var(--space-4);
  }

  .main-nav__cta {
    display: block;
    padding: 0 var(--container-padding-inline);
  }

  .main-nav__cta .btn {
    width: 100%;
  }
}

body.nav-open-lock {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   10. Hero, sector grid, feature grid, CTA band
   (Reusable section patterns — not homepage-only.)
   -------------------------------------------------------------------------- */

.hero {
  background: var(--color-surface-alt);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.hero--dark {
  background: var(--color-navy);
  color: var(--color-on-navy);
}

.hero--dark .eyebrow {
  color: var(--color-light-blue);
}

.hero--dark h1 {
  color: #fff;
}

.hero--dark .hero__lead {
  color: var(--color-on-navy-muted);
}

.hero--dark :focus-visible {
  outline-color: var(--color-light-blue);
}

/* Subtle connected-node pattern for the homepage hero, echoing the
   "Connecting..." heading. Very low-contrast against the navy background —
   a texture, not a graphic — so it never competes with the heading or the
   Scotland map. Scoped to this modifier only (not every .hero--dark use,
   e.g. the sector page heroes) via the extra class on the homepage hero. */
.hero--network {
  position: relative;
  overflow: hidden;
}

.hero--network::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba(255%2C255%2C255%2C0.09)%22%20stroke-width%3D%221%22%3E%3Cline%20x1%3D%2230%22%20y1%3D%2240%22%20x2%3D%2295%22%20y2%3D%2220%22%2F%3E%3Cline%20x1%3D%2295%22%20y1%3D%2220%22%20x2%3D%22160%22%20y2%3D%2260%22%2F%3E%3Cline%20x1%3D%2230%22%20y1%3D%2240%22%20x2%3D%2255%22%20y2%3D%22110%22%2F%3E%3Cline%20x1%3D%2255%22%20y1%3D%22110%22%20x2%3D%22130%22%20y2%3D%22140%22%2F%3E%3Cline%20x1%3D%22130%22%20y1%3D%22140%22%20x2%3D%22190%22%20y2%3D%22115%22%2F%3E%3Cline%20x1%3D%2255%22%20y1%3D%22110%22%20x2%3D%2220%22%20y2%3D%22175%22%2F%3E%3Cline%20x1%3D%22130%22%20y1%3D%22140%22%20x2%3D%22150%22%20y2%3D%22200%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22rgba(255%2C255%2C255%2C0.2)%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2240%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2295%22%20cy%3D%2220%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%2260%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%22110%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22140%22%20r%3D%222.6%22%2F%3E%3Ccircle%20cx%3D%22190%22%20cy%3D%22115%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22175%22%20r%3D%222.2%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%22200%22%20r%3D%222.4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-repeat: repeat;
  background-size: 220px 220px;
  pointer-events: none;
  z-index: 0;
}

.hero--network .hero__grid {
  position: relative;
  z-index: 1;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--space-8);
}

@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: 1fr;
  }
}

.hero__content {
  max-width: 42rem;
}

.hero__lead {
  max-width: 42rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* Scotland map + pulsing placement dots */
.hero__map {
  position: relative;
  max-width: 300px;
  margin-inline: auto;
}

.hero__map-image {
  width: 100%;
  height: auto;
}

.hero__dot {
  position: absolute;
  top: var(--top);
  left: var(--left);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2), 0 0 12px 2px rgba(255, 255, 255, 0.85);
  transform: translate(-50%, -50%);
}

.hero__dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  animation: dot-pulse 2.4s var(--ease-standard) infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes dot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(3.6);
    opacity: 0;
  }
}

/* Fixed, approximate placement-city positions — percentages of the map
   image's own box, so dots stay pinned to the same point on the map at
   any viewport width (the box scales with the image, dots scale with it). */
.hero__dot--1 { --top: 26%; --left: 47%; --delay: 0s; }    /* Highlands / Inverness */
.hero__dot--2 { --top: 13%; --left: 79%; --delay: 0.3s; }  /* Aberdeen */
.hero__dot--3 { --top: 45%; --left: 61%; --delay: 0.6s; }  /* Dundee / Perth */
.hero__dot--4 { --top: 61%; --left: 39%; --delay: 0.9s; }  /* Glasgow */
.hero__dot--5 { --top: 57%; --left: 55%; --delay: 1.2s; }  /* Edinburgh */
.hero__dot--6 { --top: 81%; --left: 31%; --delay: 1.5s; }  /* Ayrshire / South West */
.hero__dot--7 { --top: 90%; --left: 51%; --delay: 1.8s; }  /* Borders */
.hero__dot--8 { --top: 35%; --left: 11%; --delay: 2.1s; }  /* Outer Hebrides */

/* Who We Are — audience toggle (tabs) */
.audience-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-7);
}

/* Pill shape is intentional here — a segmented tab control, not a CTA
   button, so it's exempt from the "avoid pill buttons" rule elsewhere. */
.audience-toggle {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.audience-toggle__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-ink-muted);
  font-family: var(--font-family-base);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.audience-toggle__tab svg {
  width: 18px;
  height: 18px;
}

.audience-toggle__tab:hover:not(.is-active) {
  color: var(--color-navy);
  background: var(--color-surface-alt);
}

.audience-toggle__tab.is-active {
  background: var(--color-blue);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 480px) {
  .audience-toggle__tab {
    padding: 0.65rem 1rem;
    gap: var(--space-1);
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .audience-toggle__tab svg {
    width: 16px;
    height: 16px;
  }
}

.audience-panel {
  margin-bottom: var(--space-7);
}

.section__cta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

.feature-grid .feature {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
}

.feature-grid .feature h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.feature-grid .feature p {
  color: var(--color-ink-muted);
}

.cta-band {
  background: var(--color-navy);
  color: var(--color-on-navy);
  padding-block: clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.cta-band h2 {
  color: #fff;
}

.cta-band p {
  color: var(--color-on-navy-muted);
  max-width: 42rem;
  margin-inline: auto;
}

.cta-band__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--color-navy);
  color: var(--color-on-navy-muted);
  padding-block: var(--space-9) var(--space-6);
}

.site-footer a {
  color: #fff;
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-light-blue);
  text-decoration: underline;
}

.footer__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding-bottom: var(--space-8);
}

@media (min-width: 900px) {
  .footer__grid {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
  }
}

.footer__brand {
  max-width: 360px;
  flex-shrink: 0;
}

.footer-logo {
  display: inline-flex;
}

.footer-logo__image {
  width: 150px;
  height: auto;
}

.footer__tagline {
  max-width: 350px;
  margin-top: var(--space-4);
  color: var(--color-on-navy-muted);
}

/* The nav columns are grouped and pushed to the right via the
   .footer__grid space-between above, rather than spread edge to edge. */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
}

.footer-column h3 {
  color: #fff;
  font-size: var(--text-md);
  margin-bottom: var(--space-4);
}

.footer-column ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.footer-contact {
  color: #fff;
}

.footer-contact svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--color-light-blue);
}

.footer-contact a {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.65);
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: underline;
}

.site-footer .footer-bottom a:hover {
  color: #fff;
}

.footer-social {
  display: flex;
  gap: var(--space-3);
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.footer-social__link svg {
  width: 16px;
  height: 16px;
}

.site-footer .footer-social__link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   12. Scroll-reveal (restrained; skipped entirely under reduced motion)
   -------------------------------------------------------------------------- */

/* Content is visible by default (no-JS / JS-failure safe). The hidden
   starting state only applies once main.js confirms it will handle the
   reveal, by adding "js-reveal" to <html> — see assets/js/main.js. */
html.js-reveal .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease-standard), transform 0.6s var(--ease-standard);
}

html.js-reveal .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.sector-tiles .reveal:nth-child(2),
.feature-grid .reveal:nth-child(2),
.job-list .reveal:nth-child(2) {
  transition-delay: 0.06s;
}

.sector-tiles .reveal:nth-child(3),
.feature-grid .reveal:nth-child(3),
.job-list .reveal:nth-child(3) {
  transition-delay: 0.12s;
}

.sector-tiles .reveal:nth-child(4) {
  transition-delay: 0.18s;
}

.sector-tiles .reveal:nth-child(5) {
  transition-delay: 0.24s;
}

.sector-tiles .reveal:nth-child(6) {
  transition-delay: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  html.js-reveal .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   13. About page — hero visual, process steps, quote, testimonials, split CTA
   -------------------------------------------------------------------------- */

.about-hero {
  background: var(--color-surface-alt);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.about-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--space-8);
}

@media (max-width: 900px) {
  .about-hero__grid {
    grid-template-columns: 1fr;
  }
}

.about-hero__content {
  max-width: 38rem;
}

/* Layered offset panel + dot pattern behind the framed visual, so it reads
   as designed rather than a photo simply dropped into the layout. */
.about-hero__visual {
  position: relative;
  max-width: 380px;
  margin-inline: auto;
}

.about-hero__visual::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-5));
  left: calc(-1 * var(--space-5));
  width: 96px;
  height: 96px;
  background-image: radial-gradient(var(--color-blue) 2px, transparent 2.5px);
  background-size: 14px 14px;
  opacity: 0.35;
  z-index: 0;
}

.about-hero__accent {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  right: calc(-1 * var(--space-5));
  bottom: calc(-1 * var(--space-5));
  background: var(--color-light-blue);
  border-radius: var(--radius-lg);
  z-index: 0;
}

.about-hero__frame {
  position: relative;
  z-index: 1;
  margin: 0 var(--space-5) var(--space-5) 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.about-hero__frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Our Approach — four-step process, connected by a through-line behind the
   numbered circles on wider screens. */
.process-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.process-list::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--color-border-strong);
  z-index: 0;
}

@media (max-width: 900px) {
  .process-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-list::before {
    display: none;
  }
}

@media (max-width: 560px) {
  .process-list {
    grid-template-columns: 1fr;
  }
}

.process-step {
  position: relative;
  text-align: center;
}

.process-step__number {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--color-blue);
  color: #fff;
  font-weight: var(--weight-bold);
  font-size: var(--text-lg);
}

.process-step h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
}

.process-step p {
  max-width: 16rem;
  margin: 0 auto;
  color: var(--color-ink-muted);
}

/* "Why Partnership Recruiting?" quote emphasis */
.quote-highlight {
  max-width: 40rem;
  margin: 0 auto;
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  font-style: italic;
  color: var(--color-navy);
  line-height: var(--leading-snug);
}

.quote-highlight__mark {
  display: block;
  font-size: 4rem;
  font-weight: var(--weight-bold);
  font-style: normal;
  line-height: 1;
  color: var(--color-light-blue);
  margin-bottom: -0.5rem;
}

.feature-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 900px) {
  .feature-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .feature-grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (max-width: 760px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

.testimonial-card {
  position: relative;
  margin: 0;
  padding: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: var(--space-2);
  right: var(--space-6);
  font-size: 5rem;
  font-weight: var(--weight-bold);
  color: var(--color-light-blue);
  line-height: 1;
}

.testimonial-card__quote {
  position: relative;
  z-index: 1;
  font-size: var(--text-md);
  font-style: italic;
  color: var(--color-ink);
  margin-bottom: var(--space-5);
}

.testimonial-card__name {
  display: block;
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
}

.testimonial-card__role {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Split CTA — one panel per audience, each linking through to a different
   page (Jobs for job seekers, Contact for employers). */
.cta-split {
  background: var(--color-surface);
}

.cta-split__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.cta-split__panel {
  padding: clamp(2.5rem, 6vw, 4rem) var(--space-6);
  text-align: center;
}

.cta-split__panel--seekers {
  border-right: 1px solid var(--color-border);
}

.cta-split__panel p {
  max-width: 28rem;
  margin-inline: auto;
  color: var(--color-ink-muted);
}

.cta-split__panel .btn {
  margin-top: var(--space-5);
}

@media (max-width: 760px) {
  .cta-split__grid {
    grid-template-columns: 1fr;
  }

  .cta-split__panel--seekers {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
}

/* --------------------------------------------------------------------------
   14. Contact page — form + contact info panel
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

.contact-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  box-shadow: var(--shadow-sm);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (max-width: 560px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-navy);
}

.form-field label .optional {
  display: block;
  margin-top: 0.15rem;
  font-weight: var(--weight-regular);
  color: var(--color-ink-soft);
}

.form-field input,
.form-field select,
.form-field textarea {
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-base);
  color: var(--color-ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field textarea {
  resize: vertical;
  min-height: 140px;
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--color-blue);
  box-shadow: 0 0 0 3px rgba(1, 90, 147, 0.15);
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.form-note {
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}

.form-note a {
  color: var(--color-ink-soft);
}

/* Inline success/error feedback shown by assets/js/ajax-form.js in place of
   the form provider's own response page. */
.form-status {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.form-status--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.form-status--error {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* Contact info — navy panel, deliberately contrasting with the plain white
   form card so the two halves of the page read distinctly. */
.contact-info {
  background: var(--color-navy);
  color: var(--color-on-navy-muted);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
}

.contact-info h2 {
  color: #fff;
}

.contact-info__lead {
  color: var(--color-on-navy-muted);
  margin-bottom: var(--space-6);
}

.contact-info__list {
  list-style: none;
  margin: 0 0 var(--space-7);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  color: #fff;
}

.contact-info__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.contact-info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-light-blue);
}

.contact-info__icon svg {
  width: 18px;
  height: 18px;
}

.contact-info__list a {
  color: #fff;
  text-decoration: none;
}

.contact-info__list a:hover {
  color: var(--color-light-blue);
  text-decoration: underline;
}

.contact-info__label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-light-blue);
  margin-bottom: 0.2rem;
}

.contact-info__social {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.contact-info__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.contact-info__social-link svg {
  width: 16px;
  height: 16px;
}

.contact-info__social-link:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

/* --------------------------------------------------------------------------
   15. Upload CV page — single centred form card, file field
   -------------------------------------------------------------------------- */

.form-field input[type='file'] {
  padding: 0.55rem 1rem 0.55rem 0.55rem;
  cursor: pointer;
}

.form-field input[type='file']::file-selector-button {
  margin-right: var(--space-4);
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--color-blue);
  color: #fff;
  font-family: var(--font-family-base);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.form-field input[type='file']::file-selector-button:hover {
  background: var(--color-blue-dark);
}

.form-field__hint {
  font-size: var(--text-xs);
  color: var(--color-ink-soft);
}

/* Soft blue accent shapes behind the form card, rather than a flat white
   section — kept subtle so the white card stays the visual focus. */
.accent-section {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-alt);
}

.accent-section::before,
.accent-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}

.accent-section::before {
  width: 440px;
  height: 440px;
  top: -160px;
  right: -140px;
  background: var(--color-light-blue);
  opacity: 0.6;
}

.accent-section::after {
  width: 340px;
  height: 340px;
  bottom: -140px;
  left: -100px;
  background: var(--color-blue);
  opacity: 0.14;
}

.accent-section .container {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   16. Jobs page — filter bar, results meta, empty state
   -------------------------------------------------------------------------- */

.job-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.job-filters .form-field {
  flex: 1 1 200px;
  min-width: 180px;
}

.job-filters__reset {
  flex-shrink: 0;
}

.job-list-meta {
  margin-bottom: var(--space-6);
}

.job-list-count {
  margin: 0;
  font-weight: var(--weight-medium);
  color: var(--color-ink-muted);
}

.job-list-empty {
  max-width: 32rem;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
  text-align: center;
  color: var(--color-ink-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.job-list-empty p:first-child {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  margin-bottom: var(--space-2);
}

.job-list .job-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: box-shadow var(--transition-base), border-color var(--transition-base),
    transform var(--transition-base);
}

.job-list .job-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

/* Make the whole card a click target for the job link without adding a
   nested <a> — the title's real anchor is stretched to cover the card.
   Keeps semantics, keyboard focus and right-click/open-in-new-tab intact. */
.job-list .job-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.job-list .job-card:focus-within {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

/* --------------------------------------------------------------------------
   17. Job detail page (generated by scripts/build.js)
   -------------------------------------------------------------------------- */

.job-detail-hero {
  padding-block: clamp(2rem, 5vw, 3rem);
}

.job-detail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-blue);
  text-decoration: none;
}

.job-detail__back:hover {
  text-decoration: underline;
}

.job-detail__intro h1 {
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.job-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-ink-muted);
  font-weight: var(--weight-medium);
}

.job-detail__meta li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.job-detail__meta-icon {
  display: inline-flex;
}

.job-detail__meta-icon svg {
  width: 18px;
  height: 18px;
  color: var(--color-blue);
  flex-shrink: 0;
}

.job-detail-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-8);
  align-items: start;
}

@media (max-width: 900px) {
  .job-detail-grid {
    grid-template-columns: 1fr;
  }
}

.job-detail__content h2 {
  font-size: var(--text-lg);
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.job-detail__content h2:first-child {
  margin-top: 0;
}

.job-detail__content ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-ink-muted);
}

.job-detail__content li {
  margin-bottom: var(--space-2);
}

.job-detail__description {
  white-space: pre-line;
}

.job-detail__sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: calc(84px + var(--space-6));
}

.job-detail__card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.job-detail__card--alt {
  background: var(--color-surface-alt);
}

.job-detail__card h3 {
  margin-bottom: var(--space-3);
}

.job-detail__card p {
  color: var(--color-ink-muted);
  margin-bottom: var(--space-5);
}

.job-detail__card .btn {
  width: 100%;
}

.job-detail__card .btn + .btn {
  margin-top: var(--space-3);
}

/* --------------------------------------------------------------------------
   18. Apply page — job context banner + fallback state
   -------------------------------------------------------------------------- */

.apply-heading__eyebrow {
  display: block;
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  color: var(--color-ink-muted);
}

.apply-heading__title {
  display: block;
}

.apply-context {
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-blue);
  border-radius: var(--radius-md);
}

.apply-context__title {
  margin: var(--space-2) 0 0.2rem;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
}

.apply-context__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.apply-fallback {
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-6);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  text-align: center;
}

.apply-fallback a {
  color: var(--color-blue);
}

/* --------------------------------------------------------------------------
   19. Sector pages — hero visual, role grid, feature icons
   -------------------------------------------------------------------------- */

.sector-hero__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
}

.sector-hero__visual svg {
  width: 45%;
  height: 45%;
  color: var(--color-light-blue);
}

/* Variant with a real photo instead of an icon — drop the translucent
   placeholder box in favour of a plain framed image. */
/* Photo variant — same layered offset-panel + dot-accent treatment as the
   About page hero (.about-hero__visual), adapted for the dark hero
   background: a light-blue accent block behind the frame and a dot
   pattern peeking out top-left, rather than the plain translucent
   icon-box used by the other sector pages' hero visuals. */
.sector-hero__visual--photo {
  position: relative;
  display: block;
  max-width: 440px;
  aspect-ratio: auto;
  background: none;
  border: none;
  box-shadow: none;
}

.sector-hero__visual--photo::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-5));
  left: calc(-1 * var(--space-5));
  width: 96px;
  height: 96px;
  background-image: radial-gradient(var(--color-light-blue) 2px, transparent 2.5px);
  background-size: 14px 14px;
  opacity: 0.5;
  z-index: 0;
}

.sector-hero__accent {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  right: calc(-1 * var(--space-5));
  bottom: calc(-1 * var(--space-5));
  background: var(--color-light-blue);
  border-radius: var(--radius-lg);
  z-index: 0;
}

.sector-hero__frame {
  position: relative;
  z-index: 1;
  margin: 0 var(--space-5) var(--space-5) 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.sector-hero__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.hero__lead--tagline {
  font-size: var(--text-base);
  color: var(--color-on-navy-muted);
  opacity: 0.85;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 900px) {
  .role-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .role-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.role-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: center;
  transition: box-shadow var(--transition-base), border-color var(--transition-base),
    transform var(--transition-base);
}

.role-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  transform: translateY(-2px);
}

.role-card__icon {
  display: inline-flex;
  color: var(--color-blue);
}

.role-card__icon svg {
  width: 26px;
  height: 26px;
}

.role-card span {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-navy);
}

.feature__icon {
  display: inline-flex;
  margin-bottom: var(--space-3);
  color: var(--color-blue);
}

.feature__icon svg {
  width: 28px;
  height: 28px;
}

/* Overview section — image on one side, text content on the other. Reused
   with the image on the left (sector overview) or right (job seekers). */
.split-media {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-8);
  align-items: center;
}

.split-media--reverse {
  grid-template-columns: 1.1fr 0.9fr;
}

@media (max-width: 900px) {
  .split-media,
  .split-media--reverse {
    grid-template-columns: 1fr;
  }

  .split-media--reverse .split-media__image {
    order: -1;
  }

  /* The plain (non-reverse) variant's only use is the sector-page overview
     section, where the image is first in the DOM (it sits on the left on
     desktop) — on mobile that meant the heading and copy only appeared
     after the image. Show the text first there instead. */
  .split-media:not(.split-media--reverse) .split-media__body {
    order: -1;
  }

  .split-media__body .section__header {
    margin-bottom: var(--space-5);
  }

  /* About page "Our Mission" intro — same tightened heading-to-text gap
     as the sector overview sections above. Scoped to the left-aligned
     variant only, so it doesn't affect the centered intros on other
     pages (Upload CV, Apply, 404) that reuse .container--narrow. */
  .container--narrow > .section__header:not(.section__header--center) {
    margin-bottom: var(--space-5);
  }
}

.split-media__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.split-media__image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.split-media__body p {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}

/* Sector page hero — a step down from the homepage's h1 so it doesn't
   compete as hard with the sector-specific supporting copy, and slightly
   more vertical breathing room than the homepage hero. */
.sector-hero {
  padding-block: clamp(3rem, 7vw, 5rem);
}

.sector-hero .hero__content h1 {
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
}

/* Job seekers / employers benefit cards — icon-forward, horizontal
   layout, a step up in visual polish from a plain bordered box. */
.benefit-card {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: box-shadow var(--transition-base), border-color var(--transition-base),
    transform var(--transition-base);
}

.benefit-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
  transform: translateX(4px);
}

.benefit-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-light-blue);
  color: var(--color-blue);
}

.benefit-card__icon svg {
  width: 22px;
  height: 22px;
}

.benefit-card h3 {
  font-size: var(--text-md);
  margin-bottom: 0.25rem;
}

.benefit-card p {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

/* Job seekers / employers content column: heading + lead + a vertical
   stack of feature boxes (as opposed to the 3-column .feature-grid). */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

/* Final CTA with a full-bleed photo background (per-page image set via
   inline style="background-image:...") and a navy gradient overlay for
   text contrast. A distinct modifier from the plain .cta-split used on
   the About page, so that page's white background is unaffected. */
.cta-split--photo {
  position: relative;
  padding-block: clamp(4rem, 9vw, 7rem);
  background-size: cover;
  background-position: center;
  color: var(--color-on-navy);
}

.cta-split--photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(11, 32, 56, 0.74) 0%, rgba(1, 66, 109, 0.64) 100%);
}

.cta-split--photo .container {
  position: relative;
  z-index: 1;
}

.cta-split--photo .section__header h2 {
  color: #fff;
}

.cta-split--photo .section__header .lead {
  color: #fff;
}

.cta-split--photo .cta-split__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
}

.cta-split--photo .cta-split__panel {
  padding: 0;
}

.cta-split--photo .cta-split__panel--seekers {
  border-right: none;
}

.cta-split--photo :focus-visible {
  outline-color: var(--color-light-blue);
}

/* --------------------------------------------------------------------------
   19. Privacy Policy — long-form legal content
   -------------------------------------------------------------------------- */

.legal-meta {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  margin-bottom: var(--space-8);
}

.legal-content h2 {
  margin-top: var(--space-9);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}

.legal-content h2:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.legal-content h3 {
  margin-top: var(--space-6);
}

.legal-content ul {
  margin: 0 0 var(--space-4);
  padding-left: 1.5rem;
  color: var(--color-ink-muted);
}

.legal-content li {
  margin-bottom: var(--space-2);
}

/* Data Controller / Contact Us block — a plain, non-interactive info card
   (deliberately without .card's hover lift, since this isn't a link). */
.info-card {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-5) 0 var(--space-6);
}

.info-card p {
  margin: 0;
  line-height: var(--leading-relaxed);
}

.info-card strong {
  display: block;
  color: var(--color-navy);
  margin-bottom: 0.25rem;
}

/* So the sticky header doesn't cover the heading when jumping to #cookies
   (e.g. from a future cookie consent banner). */
#cookies {
  scroll-margin-top: 100px;
}

/* --------------------------------------------------------------------------
   20. Cookie consent banner (assets/js/cookie-consent.js)
   -------------------------------------------------------------------------- */

.footer-bottom__link {
  padding: 0;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.65);
  text-decoration: underline;
  cursor: pointer;
}

.site-footer .footer-bottom__link:hover {
  color: #fff;
}

.cookie-consent {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 200;
  width: 360px;
  max-width: calc(100vw - 2 * var(--space-5));
}

.cookie-consent__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease-standard), transform 0.3s var(--ease-standard);
}

.cookie-consent.is-visible .cookie-consent__card {
  opacity: 1;
  transform: translateY(0);
}

.cookie-consent__title {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
}

.cookie-consent__text {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-ink-muted);
}

.cookie-consent__text a {
  color: var(--color-blue);
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.cookie-consent__actions .btn {
  flex: 1 1 auto;
  padding: 0.65rem 1rem;
  font-size: var(--text-sm);
}

@media (max-width: 480px) {
  .cookie-consent {
    right: var(--space-3);
    bottom: var(--space-3);
    left: var(--space-3);
    width: auto;
    max-width: none;
  }
}