/* ─────────────────────────────────────────────────────────────────────────
   Endeavour Group — Technical Recruitment
   Vanilla CSS. Mobile-first. No framework.
   Palette matches the parent site: white base, black/grey type, brand blue.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* Brand palette (from the EG logo + endeavoureu.com) */
  --bg:           #ffffff;
  --bg-soft:      #f6f7f9;
  --bg-section:   #0d0f12;     /* near-black for dark bands */
  --ink:          #0d0f12;     /* primary text */
  --ink-soft:     #2a2e34;
  --ink-muted:    #5a6068;
  --rule:         #e6e8ec;
  --rule-strong:  #d2d6dc;
  --brand:        #2895e8;     /* the blue G in the logo */
  --brand-deep:   #1979c4;
  --brand-soft:   #e8f3fd;
  --brand-light:  #9cddfd;     /* light blue sampled from the ET logo's T + "TECH" text — used only for the header/footer "TECH" wordmark */

  /* Typography scale */
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Helvetica, Arial, sans-serif;

  /* Layout */
  --container:    1200px;
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);
  --radius:       10px;
  --radius-sm:    6px;

  /* Motion */
  --ease:         cubic-bezier(.22,1,.36,1);
  --speed:        260ms;
}

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}
::selection { background: var(--brand); color: #fff; }

/* ── Layout ────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.section { padding: clamp(3.5rem, 8vw, 6rem) 0; }
.section--tight       { padding: clamp(1.5rem, 3vw, 2.25rem) 0 clamp(1rem, 2vw, 1.5rem); }
.section--tight-top   { padding-top: clamp(0.5rem, 1.5vw, 1.25rem); }
.section--dark { background: var(--bg-section); color: #fff; }
.section--soft { background: var(--bg-soft); }
.section--brand-dark {
  background:
    radial-gradient(circle at 85% 15%, rgba(40,149,232,0.22), transparent 55%),
    radial-gradient(circle at 10% 90%, rgba(40,149,232,0.14), transparent 60%),
    linear-gradient(135deg, #0d0f12 0%, #1a1f27 100%);
  color: #fff;
}
.section--brand-dark .section-head__title { color: #fff; }
.section--brand-dark .section-head__kicker { color: var(--brand); }
.section--brand-dark .section-head__lead { color: #b9bec6; }

/* ── Header / Nav ──────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13,15,18,0.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--speed) var(--ease),
              background var(--speed) var(--ease);
}
.site-header.is-scrolled {
  border-bottom-color: rgba(255,255,255,0.1);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 14px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
}
.brand__logo { width: 38px; height: 38px; }
/* Stack the two lines of the brand wordmark in a tight column so they
   sit naturally against the logo (no inherited body line-height gap). */
.brand > span {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
}
/* The legacy <br> between the two stacked spans inserts a phantom line
   when the children are block-level. Suppress it. */
.brand > span br { display: none; }
/* Wordmark typeface matches the ET logo artwork: a light, wide-tracked
   geometric sans (Jost stands in for the logo's Futura-style face) with
   an italic, brand-blue "TECH" subline. */
.brand__name {
  color: #fff;
  display: block;
  font-family: "Jost", var(--font-sans);
  font-weight: 400;
  font-size: 1.05em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.brand__sub {
  /* Site brand blue, not the paler logo-artwork blue — matches every
     other blue accent on the site (buttons, stats, links). */
  color: var(--brand);
  font-family: "Jost", var(--font-sans);
  font-weight: 400;
  font-style: italic;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  display: block;
  margin-top: 3px;
  /* Matches the source logo: "TECH" sits under the tail end of
     "ENDEAVOUR", not left-aligned under its start. */
  text-align: right;
}

/* Desktop nav */
.nav { display: none; align-items: center; gap: 2rem; }
.nav a {
  position: relative;
  color: rgba(255,255,255,0.72);
  font-size: 15px;
  font-weight: 500;
  padding: 4px 0;
  transition: color var(--speed) var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 360ms var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: #fff; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav__cta {
  /* brand-deep, not brand — white text on the lighter brand blue only
     hits ~3.2:1 contrast (fails WCAG AA for this font-size/weight);
     brand-deep clears 4.5:1. */
  background: var(--brand-deep);
  color: #fff !important;
  padding: 10px 18px !important;
  border-radius: var(--radius-sm);
  transition: background var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: #fff; color: var(--ink) !important; transform: translateY(-1px); }

/* Mobile nav toggle */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
}
.nav-toggle__bars {
  position: relative;
  display: block;
  width: 18px;
  height: 2px;
  background: #fff;
  transition: background 200ms var(--ease);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: #fff;
  transition: transform 260ms var(--ease), top 200ms var(--ease);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top:  6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  top: 0; transform: rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  top: 0; transform: rotate(-45deg);
}

/* Mobile menu drawer */
.mobile-nav {
  position: fixed;
  inset: 64px 0 0 0;
  background: #fff;
  padding: 1.5rem var(--gutter) 2.5rem;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease), transform 240ms var(--ease);
  border-top: 1px solid var(--rule);
  z-index: 49;
  overflow-y: auto;
}
.mobile-nav.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.mobile-nav a {
  display: block;
  padding: 18px 4px;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav .nav__cta {
  margin-top: 1rem;
  text-align: center;
  border-radius: var(--radius-sm);
}

/* ── Hero ──────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(4rem, 10vw, 7rem) 0 clamp(3rem, 8vw, 5rem);
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
  overflow: hidden;
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}
.hero__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-deep);
  font-weight: 600;
  padding: 6px 14px;
  background: var(--brand-soft);
  border-radius: 100px;
  margin-bottom: 1.25rem;
}
.hero__title {
  font-size: clamp(2rem, 5.5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  max-width: 34ch;
}
.hero__title em {
  font-style: normal;
  color: var(--brand);
  position: relative;
  white-space: nowrap;
}

/* Word-cycle: the highlighted word in the hero swaps through our specialisms
   while the mouse hovers over it. Designed to stay legible during the swap
   by fading + lifting slightly; honours prefers-reduced-motion. */
.word-cycle {
  display: inline-block;
  cursor: pointer;
  transition:
    opacity 200ms var(--ease),
    transform 200ms var(--ease);
  will-change: opacity, transform;
}
.word-cycle::after {
  /* A visible animated underline rule that signals interactivity.
     Pulses gently while idle, locks bright on hover/focus. */
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background: var(--brand);
  opacity: 0.35;
  transform-origin: left center;
  transition: opacity 360ms var(--ease), transform 360ms var(--ease);
  animation: word-cycle-pulse 2.4s ease-in-out infinite;
}
.word-cycle:hover::after,
.word-cycle:focus-visible::after {
  opacity: 0.85;
  animation: none;
}
@keyframes word-cycle-pulse {
  0%, 100% { opacity: 0.25; transform: scaleX(0.85); }
  50%      { opacity: 0.65; transform: scaleX(1);    }
}
@media (prefers-reduced-motion: reduce) {
  .word-cycle::after { animation: none; opacity: 0.5; }
}
.word-cycle.is-swapping {
  opacity: 0;
  transform: translateY(-6px);
}
.word-cycle.is-arriving {
  opacity: 0;
  transform: translateY(6px);
}
@media (prefers-reduced-motion: reduce) {
  .word-cycle { transition: none; }
  .word-cycle.is-swapping,
  .word-cycle.is-arriving { opacity: 1; transform: none; }
}
.hero__lead {
  margin-top: 1.25rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  color: var(--ink-muted);
  max-width: 78ch;
}
.hero__cta-row {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero__meta {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 1.5rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  max-width: 520px;
}
.hero__meta dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.hero__meta dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  font-size: 1rem;
}

/* Parallax decorative shapes behind the hero */
.hero__shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
  transition: transform 80ms linear;
}
.hero__shape--a {
  /* Bigger, more visible brand-blue glow on the right — gives the empty
     space on that side genuine atmosphere instead of a faint wash. */
  width: 720px; height: 720px;
  top: -220px; right: -200px;
  background: radial-gradient(circle, rgba(64,163,232,0.35) 0%, transparent 55%);
}
.hero__shape--c {
  /* Mirror of shape--a on the top-left so the hero glow reads symmetric. */
  width: 720px; height: 720px;
  top: -220px; left: -200px;
  background: radial-gradient(circle, rgba(64,163,232,0.35) 0%, transparent 55%);
}
.hero__shape--b {
  width: 420px; height: 420px;
  bottom: -140px; left: -160px;
  background: radial-gradient(circle, rgba(64,163,232,0.18) 0%, transparent 65%);
}

/* ── Hero circuit traces (PCB-style lines entering from the right) ──
   Orthogonal lines with right-angle jogs and small node dots, echoing a
   circuit-board trace pattern. Each trace fades in/out on its own
   independent loop (--d duration, --delay offset — same custom-property
   pattern as the tag-cloud drift). A mask fades everything to fully
   invisible well before the headline column, so no line ever touches
   the writing. */
.hero__circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to right,
                        rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%,
                        rgba(0,0,0,1) 68%, rgba(0,0,0,1) 100%);
          mask-image: linear-gradient(to right,
                        rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%,
                        rgba(0,0,0,1) 68%, rgba(0,0,0,1) 100%);
}
.circuit-trace {
  opacity: 0;
  animation: circuit-fade var(--d, 12s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.circuit-trace path {
  fill: none;
  stroke: #40a3e8;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
}
.circuit-node {
  fill: #40a3e8;
  opacity: 0.55;
}
.circuit-node--glow {
  fill: #a9d8ff;
  opacity: 0.95;
}
@keyframes circuit-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  62%  { opacity: 1; }
  80%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .circuit-trace { animation: none; opacity: 1; }
}
/* Hide on small screens — the right-side space we're filling doesn't
   exist on a stacked mobile layout. */
@media (max-width: 767px) {
  .hero__circuit { display: none; }
}

/* The network visual has been retired from the hero. Markup is left in
   place (hidden) in case we revisit later. Hero is single-column copy
   with brand-blue ambient atmosphere (gradient orbs + sparkles). */
.hero__network,
.hero__network-brand { display: none !important; }

.network {
  width: 100%;
  height: 100%;
  display: block;
  font-family: var(--font-sans);
}

/* ── Connection lines (light-background tuned) ──────────────────────── */
.network__lines line {
  stroke: rgba(40,149,232,0.32);
  stroke-width: 0.85;
  fill: none;
}
.network__lines--faint line {
  stroke: rgba(40,149,232,0.18);
  stroke-width: 0.6;
}

/* ── Background contact dots ────────────────────────────────────────── */
.network__bg-dots circle {
  fill: var(--brand);
  fill-opacity: 0.75;
}

/* ── Labelled nodes — chips are now plain text, no rectangle ──────── */
.net-node circle {
  fill: var(--brand);
  transition: fill 360ms var(--ease), filter 360ms var(--ease);
}
.net-node .chip rect {
  /* Hide the dark rectangles — chips become floating labels */
  fill: rgba(255,255,255,0);
  stroke: none;
}
.net-node .chip text {
  fill: var(--brand-deep);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  pointer-events: none;
  transition: fill 360ms var(--ease), font-size 360ms var(--ease);
}

/* Hover: focused chip gets stronger, others fade. */
.hero__network:hover .net-node .chip text { fill: rgba(25,121,196,0.45); }
.hero__network:hover .net-node:hover .chip text {
  fill: var(--ink);
  font-size: 10px;
}
.hero__network:hover .net-node:hover circle {
  fill: var(--brand);
  filter: drop-shadow(0 0 8px rgba(40,149,232,0.85));
}

/* ── The active "warm intro" overlay ──────────────────────────────── */
.network__active-line {
  stroke: var(--brand);
  stroke-opacity: 0.95;
  stroke-width: 1.7;
  stroke-dasharray: 6 5;
  fill: none;
  animation: net-flow 1.8s linear infinite;
}
@keyframes net-flow {
  to { stroke-dashoffset: -22; }
}

.network__active-node .halo-outer {
  fill: rgba(40,149,232,0.30);
  animation: net-halo-pulse 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
.network__active-node .halo-inner {
  fill: var(--brand);
  filter: drop-shadow(0 0 8px rgba(40,149,232,0.7));
}
.network__active-node .halo-core {
  fill: #ffffff;
}
@keyframes net-halo-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1);   }
  50%      { opacity: 0.85; transform: scale(1.18); }
}

/* WARM INTRO tag — brand-blue fill, white text, sits on light bg */
.network__active-tag rect {
  fill: var(--brand);
  stroke: none;
}
.network__active-tag circle {
  fill: #ffffff;
  animation: net-tag-pulse 1.8s ease-in-out infinite;
}
.network__active-tag text {
  fill: #ffffff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
@keyframes net-tag-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1;    }
}

.network__active {
  transition: opacity 500ms var(--ease);
}
.network__active.is-cycling {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .network__active-line     { animation: none; }
  .network__active-node .halo-outer { animation: none; }
  .network__active-tag circle { animation: none; }
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  transition: background var(--speed) var(--ease),
              color var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}
.btn .arrow { transition: transform 260ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--primary {
  background: var(--ink);
  color: #fff;
}
.btn--primary:hover {
  background: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -10px rgba(40,149,232,.55);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.btn--lg { padding: 16px 26px; font-size: 16px; }

/* ── Stats strip (between hero and value-props) ────────────────────────── */
/* A compact band of headline numbers. Each number ticks up on scroll —
   the animation lives in main.js. Subtle hairlines top + bottom mark the
   strip as a distinct beat without making it a heavy section. */
.stats-band {
  padding: clamp(2rem, 4vw, 3.25rem) 0;
  background: #ffffff;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.stat {
  text-align: center;
  padding: 0 0.75rem;
}
.stat__value {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12em;
  margin-bottom: 0.45rem;
  /* Tabular figures so digits don't jitter as they tick up */
  font-feature-settings: "tnum", "lnum";
  font-variant-numeric: tabular-nums;
}
.stat__number {
  font-size: clamp(2.4rem, 5.5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--brand);
  line-height: 1;
}
.stat__suffix {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  color: var(--brand);
  letter-spacing: -0.01em;
  line-height: 1;
}
.stat__label {
  margin: 0 auto;
  max-width: 22ch;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-muted);
  line-height: 1.35;
}

@media (min-width: 900px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  /* Hairline dividers between stat cells on desktop */
  .stat + .stat {
    border-left: 1px solid var(--rule);
  }
}

/* Subtle disclaimer under the stats strip */
.stats-disclaimer {
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  opacity: 0.75;
}

/* ── Section heading ───────────────────────────────────────────────────── */
.section-head {
  max-width: 760px;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head__kicker {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand);
  margin-bottom: 1rem;
}
.section-head__title {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section--dark .section-head__title { color: #fff; }
.section--dark .section-head__kicker { color: var(--brand); }
.section-head__lead {
  margin-top: 1rem;
  color: var(--ink-muted);
  font-size: 1.0625rem;
  max-width: 60ch;
}
.section--dark .section-head__lead { color: #b9bec6; }

/* ── Value props / propositions row ────────────────────────────────────── */
.values {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.value {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}
.value:hover {
  border-color: var(--brand);
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -24px rgba(13,15,18,.18);
}
.value__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-deep);
  border-radius: 10px;
  margin-bottom: 1rem;
  transition: background var(--speed) var(--ease),
              color var(--speed) var(--ease),
              transform 360ms var(--ease);
}
.value:hover .value__icon {
  background: var(--brand);
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
}
.value__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.value__body { color: var(--ink-muted); font-size: 0.95rem; }

/* ── Services grid ─────────────────────────────────────────────────────── */
.services {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.service {
  position: relative;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.75rem;
  overflow: hidden;
  transition: border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--brand) 0%, #1f6db3 100%);
  opacity: 0;
  transition: opacity 360ms var(--ease);
  z-index: 0;
}
.service > * { position: relative; z-index: 1; }
.service__num {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ink-muted);
  margin-bottom: 1rem;
  transition: color var(--speed) var(--ease);
}
.service__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--ink);
  transition: color var(--speed) var(--ease);
}
.service__body {
  color: var(--ink-muted);
  font-size: 0.95rem;
  transition: color var(--speed) var(--ease);
}
.service:hover {
  border-color: transparent;
  transform: translateY(-4px);
}
.service:hover::before { opacity: 1; }
.service:hover .service__num,
.service:hover .service__title,
.service:hover .service__body { color: #fff; }
.service:hover .service__num { color: rgba(255,255,255,.7); }

/* ── Sectors (tech specialisms) ────────────────────────────────────────── */
.sectors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.sector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  transition: background var(--speed) var(--ease),
              border-color var(--speed) var(--ease),
              transform var(--speed) var(--ease);
}
.sector:hover {
  background: rgba(40,149,232,.10);
  border-color: var(--brand);
  transform: translateX(4px);
}
.sector__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}
.sector__roles {
  color: #b9bec6;
  font-size: 0.875rem;
  margin-top: 4px;
}
.sector__arrow {
  color: var(--brand);
  font-size: 22px;
  transition: transform var(--speed) var(--ease);
}
.sector:hover .sector__arrow { transform: translateX(6px); }

/* ── Approach / numbered list ──────────────────────────────────────────── */
.approach {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
.approach__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}
.approach__item:first-child { border-top: none; padding-top: 0; }
.approach__num {
  font-size: 2.25rem;
  font-weight: 600;
  color: var(--brand);
  font-feature-settings: "tnum";
  line-height: 1;
}
.approach__title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.approach__body { color: var(--ink-muted); }

/* ── Referral card (homepage highlight) ────────────────────────────────── */
.referral-card {
  background:
    radial-gradient(circle at 85% 15%, rgba(40,149,232,0.22), transparent 55%),
    linear-gradient(135deg, #0d0f12 0%, #1a1f27 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(2.25rem, 4vw, 3.5rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.referral-card__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 1rem;
  max-width: 22ch;
}
.referral-card__lead {
  margin-top: 1rem;
  color: #b9bec6;
  max-width: 56ch;
  margin-bottom: 1.75rem;
}
.referral-card__lead strong { color: var(--brand); font-weight: 600; }
.referral-card__numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}
.referral-card__number {
  text-align: center;
}
.referral-card__amount {
  display: block;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--brand);
  letter-spacing: -0.02em;
}
.referral-card__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #b9bec6;
}
.referral-card__divider {
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,0.15);
}
@media (min-width: 768px) {
  .referral-card { grid-template-columns: 1.4fr auto; gap: 3rem; }
  .referral-card__divider { height: 80px; }
}

/* ── Commitments strip (bridge between sections) ───────────────────────── */
/* Three small credential blocks sit inline. No card, no border — just
   icon + title + one line of body copy each. Generous vertical padding
   makes it read as a deliberate beat between the cloud and the referral. */
.commitments {
  padding: clamp(4rem, 8vw, 6rem) 0;
}
.commitments__inner {
  text-align: center;
}
.commitments__rule {
  display: inline-block;
  width: 40px;
  height: 2px;
  background: var(--brand);
  margin-bottom: 0.9rem;
}
.commitments__kicker {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin-bottom: 2.5rem;
}
.commitments__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 900px;
  margin: 0 auto;
}
.commit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.commit__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-deep);
  border-radius: 10px;
  margin-bottom: 1rem;
  transition: background var(--speed) var(--ease),
              color var(--speed) var(--ease),
              transform 360ms var(--ease);
}
.commit:hover .commit__icon {
  background: var(--brand);
  color: #ffffff;
  transform: rotate(-6deg) scale(1.06);
}
.commit__title {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.45rem;
  max-width: 20ch;
  line-height: 1.3;
}
.commit__body {
  font-size: 0.9rem;
  color: var(--ink-muted);
  max-width: 28ch;
  line-height: 1.55;
}

@media (min-width: 640px) {
  .commitments__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 0;
    max-width: 760px;
  }
  /* Hairline dividers between cells in a row — matches the stats strip.
     :nth-child(odd) targets the second item of each row of 2. */
  .commit:nth-child(even) { border-left: 1px solid var(--rule); padding-left: 1.5rem; }
  .commit:nth-child(odd)  { padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .commitments__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    max-width: 1180px;
  }
  /* Reset the tablet pair-only rule, then re-apply across all four. */
  .commit:nth-child(odd)  { padding-right: 0; }
  .commit:nth-child(even) { padding-left: 0; border-left: none; }
  .commit + .commit {
    border-left: 1px solid var(--rule);
    padding-left: 1.75rem;
  }
  .commit { padding-right: 1.75rem; }
  .commit:last-child { padding-right: 0; }
}

/* ── Hiring band (open, no box — sits above the boxed referral card) ──── */
.hiring-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: end;
  border-top: 1px solid rgba(13,15,18,0.08);
  padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}
.hiring-band__title {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 0.75rem;
  max-width: 18ch;
}
.hiring-band__lead {
  margin-top: 1rem;
  color: var(--ink-muted);
  max-width: 56ch;
}
.hiring-band__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (min-width: 860px) {
  .hiring-band {
    grid-template-columns: 1.4fr auto;
    gap: 3rem;
  }
}

/* ── CTA band ──────────────────────────────────────────────────────────── */
.cta-band {
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 2rem;
  align-items: center;
}
.cta-band__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.cta-band__lead {
  margin-top: 1rem;
  color: #b9bec6;
  max-width: 56ch;
}
.cta-band .btn--primary { background: var(--brand-deep); }
.cta-band .btn--primary:hover { background: #fff; color: var(--ink); }
.cta-band .btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.cta-band .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ── Page hero (interior pages) ────────────────────────────────────────── */
.page-hero {
  padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
}
.page-hero__title {
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.page-hero__lead {
  margin-top: 1rem;
  font-size: 1.0625rem;
  color: var(--ink-muted);
  max-width: 60ch;
}

/* ── Prose (long-form copy) ────────────────────────────────────────────── */
.prose { max-width: 70ch; }
.prose p + p { margin-top: 1rem; }
.prose h2 {
  font-size: 1.5rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.prose h3 {
  font-size: 1.125rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}
.prose ul {
  margin: 1rem 0;
  padding-left: 1.25rem;
}
.prose ul li {
  list-style: disc;
  margin-bottom: 0.5rem;
  color: var(--ink-soft);
}
.prose a {
  color: var(--brand-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--brand); }

/* ── About: split intro ────────────────────────────────────────────────── */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.split__aside {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.split__aside dt {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 1rem;
}
.split__aside dt:first-child { margin-top: 0; }
.split__aside dd {
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--ink);
}

/* ── Contact form ─────────────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.contact-info dt {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 1.5rem;
}
.contact-info dt:first-child { margin-top: 0; }
.contact-info dd {
  margin: 6px 0 0;
  font-size: 1.125rem;
  font-weight: 500;
}
.contact-info a:hover { color: var(--brand); }

.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
.form__field { display: grid; gap: 6px; }
.form__field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.form__field input,
.form__field select,
.form__field textarea {
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: border-color var(--speed) var(--ease),
              box-shadow var(--speed) var(--ease);
}
.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(40,149,232,.15);
}
.form__field textarea { min-height: 140px; resize: vertical; }
.form__hint { color: var(--ink-muted); font-size: 13px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-section);
  color: #b9bec6;
  padding: 4rem 0 1.5rem;
}
.site-footer a { color: #b9bec6; transition: color var(--speed) var(--ease); }
.site-footer a:hover { color: #fff; }
/* The ET logo's "E" is dark ink. On the dark footer that disappears, so
   give the logo a small ivory tile that lets it read. Tile uses the
   same radius as the rest of the UI. */
.site-footer .brand__logo {
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 4px;
  box-sizing: content-box;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
.footer-brand .brand__name { color: #fff; }
.footer-brand p { margin-top: 1rem; color: #8e949c; max-width: 36ch; font-size: 0.9rem; }
.footer-col h4 {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.footer-col li { margin-bottom: 0.6rem; font-size: 0.9rem; }
.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-size: 13px;
  color: #8e949c;
}
.footer-bottom__text {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Accreditation badges (Good Business Charter, SME Climate Hub) — sit
   alongside the copyright block in the footer's bottom strip. */
.footer-badges {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.footer-badges img {
  height: 40px;
  width: auto;
  opacity: 0.9;
  transition: opacity var(--speed) var(--ease);
}
.footer-badges img:hover { opacity: 1; }

/* ── Thanks page ───────────────────────────────────────────────────────── */
.thanks-main { min-height: calc(100vh - 80px); display: flex; align-items: center; }
.thanks {
  width: 100%;
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: linear-gradient(180deg, #fff 0%, var(--bg-soft) 100%);
}
.thanks__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 720px;
}
.thanks__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-deep);
  margin-bottom: 1.5rem;
  animation: pop 600ms var(--ease) both;
}
.thanks__title {
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 1rem;
  max-width: 18ch;
}
.thanks__lead {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  color: var(--ink-muted);
  max-width: 60ch;
}
.thanks__lead strong { color: var(--ink); font-weight: 600; }
.thanks__cta-row {
  margin-top: 2.5rem;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@keyframes pop {
  0%   { transform: scale(0.7); opacity: 0; }
  60%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .thanks__tick { animation: none; }
}

/* ── Reveal-on-scroll ─────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 80ms;  }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }

/* ── Utilities ─────────────────────────────────────────────────────────── */
.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;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-weight: 600;
  z-index: 100;
}
.skip-link:focus { left: 16px; }

/* ─────────────────────────────────────────────────────────────────────────
   Responsive — mobile-first breakpoints
   ───────────────────────────────────────────────────────────────────────── */

/* tablet up */
@media (min-width: 768px) {
  .values    { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .services  { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .sectors   { grid-template-columns: repeat(2, 1fr); }
  .approach  { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  .hero__meta { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1.4fr; }
  .form__row { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 2fr 1fr; }
  .cta-band { grid-template-columns: 1.4fr auto; gap: 3rem; }
}

/* desktop up */
@media (min-width: 1024px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
  .services { grid-template-columns: repeat(3, 1fr); }
  /* Hero is single-column on desktop too — keeps the headline central
     and pushes the rich talent network down to its own showcase section. */
}

/* ── Roles we cover · floating tag cloud ──────────────────────────────────
   Each pill is positioned absolutely (left/top as %) inside a wide canvas.
   Three nested spans separate three independent transforms:
     .pill         → anchor positioning (left/top + translate to centre)
     .pill__drift  → idle drift animation (translate only)
     .pill__label  → visual chip + hover scale
   Below tablet width the canvas collapses to a wrapped flex layout so the
   pills reflow neatly on mobile.                                            */
.tag-cloud {
  position: relative;
  width: 100%;
  aspect-ratio: 1200 / 540;
  border-radius: var(--radius);
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 30%, rgba(40,149,232,0.18), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(40,149,232,0.10), transparent 60%),
    linear-gradient(135deg, #0d0f12 0%, #1a1f27 100%);
  cursor: default;
}

/* ── A single pill ────────────────────────────────────────────────────── */
.pill {
  position: absolute;
  transform: translate(-50%, -50%);   /* centre on the (left, top) anchor */
  will-change: transform;
  z-index: 1;
}
.pill__drift {
  display: inline-block;
  animation: pill-drift var(--d, 20s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.pill__label {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: rgba(255,255,255,0.92);
  background: rgba(40,149,232,0.08);
  border: 1px solid rgba(40,149,232,0.65);
  transition:
    transform 400ms var(--ease),
    opacity 400ms var(--ease),
    color 400ms var(--ease),
    background 400ms var(--ease),
    border-color 400ms var(--ease),
    box-shadow 400ms var(--ease);
}
@keyframes pill-drift {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(7px, -5px); }
  50%      { transform: translate(-4px, 5px); }
  75%      { transform: translate(5px, 4px); }
}

/* ── Tier modifiers ──────────────────────────────────────────────────── */
.pill--glow .pill__label {
  background: rgba(40,149,232,0.20);
  border-color: rgba(127,196,245,0.85);
  font-weight: 600;
  font-size: 15px;
  padding: 8px 16px;
  box-shadow: 0 0 16px rgba(40,149,232,0.35);
}
.pill--mid .pill__label {
  color: rgba(255,255,255,0.70);
  background: transparent;
  border-color: rgba(40,149,232,0.40);
}
.pill--dim .pill__label {
  color: rgba(255,255,255,0.48);
  background: transparent;
  border-color: rgba(40,149,232,0.25);
  font-size: 12px;
  padding: 5px 11px;
}

/* ── Hover behaviour ─────────────────────────────────────────────────── */
/* When the cloud is hovered (anywhere), everyone dims a touch… */
.tag-cloud:hover .pill__label {
  opacity: 0.32;
}
/* …except the specific pill being pointed at, which sharpens and grows. */
.tag-cloud:hover .pill:hover .pill__label {
  opacity: 1;
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 26px rgba(40,149,232,0.85);
  transform: scale(1.12);
}
.pill:hover { z-index: 5; }

/* Honour the user's motion preference: no drift, no transitions. */
@media (prefers-reduced-motion: reduce) {
  .pill__drift { animation: none; }
  .pill__label { transition: none; }
}

/* ── Mobile: collapse to a wrapped flex layout ────────────────────────── */
@media (max-width: 768px) {
  .tag-cloud {
    aspect-ratio: auto;
    padding: 1.75rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.4rem;
    justify-content: center;
    align-content: center;
  }
  .pill {
    position: static;
    transform: none;
  }
  .pill__drift { animation: none; }
  .pill--dim .pill__label,
  .pill--mid .pill__label {
    color: rgba(255,255,255,0.78);
  }
}

/* large desktop */
@media (min-width: 1280px) {
  .approach  { grid-template-columns: repeat(2, 1fr); column-gap: 4rem; }
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__shape { transform: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Responsive audit additions
   - Small phones (≤420px): tighten gutters, lighter hero shapes, smaller
     headline scale, single-column footer, single-column sectors
   - Phones (≤640px): hiring band stacks neatly, referral card simplifies
   - Large desktops (≥1440px): container widens, headlines breathe
   - Ultra-wide (≥1920px): cap container at a comfortable reading width
   ───────────────────────────────────────────────────────────────────────── */

/* Small phones */
@media (max-width: 480px) {
  :root { --gutter: 1.1rem; }
  .hero { padding: 3rem 0 2.5rem; }
  .hero__title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .hero__lead  { font-size: 0.975rem; }
  .hero__shape--a { width: 380px; height: 380px; top: -120px; right: -120px; opacity: 0.45; }
  .hero__shape--b { display: none; }
  .hero__cta-row .btn { width: 100%; justify-content: center; text-align: center; }
  .stats-grid { gap: 1.5rem 0.5rem; }
  .stat__label { font-size: 0.8rem; }
  .section { padding: clamp(2.5rem, 8vw, 4rem) 0; }
  .commitments { padding: 3rem 0; }
  .sectors  { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom p { font-size: 0.85rem; }
  .site-header__inner { padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .brand__sub { font-size: 10px; }
  .referral-card { padding: 1.75rem 1.5rem; }
  .referral-card__numbers { gap: 1rem; }
  .referral-card__amount { font-size: 1.85rem; }
  .hiring-band__title { font-size: clamp(1.5rem, 7vw, 1.85rem); }
}

/* Phones up to ~640px */
@media (max-width: 640px) {
  .hiring-band__actions .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .values   { gap: 1.25rem; }
  .services { gap: 1rem; }
  .service, .value { padding: 1.25rem; }
  .section-head__title { font-size: clamp(1.5rem, 6vw, 2rem); }
  .section-head__lead  { font-size: 1rem; }
  .referral-card__title { font-size: clamp(1.35rem, 6vw, 1.75rem); }
}

/* Large desktops — let content breathe on big monitors */
@media (min-width: 1440px) {
  :root { --container: 1280px; }
  .hero__title { font-size: clamp(3rem, 4.4vw, 4.25rem); }
  .hero__lead  { font-size: 1.15rem; max-width: 64ch; }
  .section-head__title { font-size: clamp(2rem, 2.6vw, 2.75rem); }
}

/* Ultra-wide screens — cap container so lines stay readable, lift hero
   atmosphere a touch so it doesn't look lost in the void. */
@media (min-width: 1920px) {
  :root { --container: 1360px; --gutter: 3rem; }
  .hero__shape--a { width: 900px; height: 900px; opacity: 0.6; }
  .hero__shape--b { width: 540px; height: 540px; opacity: 0.28; }
  .hero { padding: 8rem 0 6rem; }
  body { font-size: 17px; }
}

/* Prevent any rare horizontal overflow on long words. Use `clip` so the
   sticky header isn't broken by an overflow container. */
html { overflow-x: clip; }
body { overflow-x: clip; }


/* ─────────────────────────────────────────────────────────────────────────
   Intro overlay — Access Granted → Vault Doors Open
   Phases (session-storage flag, respects prefers-reduced-motion):
     1. is-locked: ACCESS GRANTED badge + loading bar + wordmark appear
        immediately, bar fills over ~0.75s.
     2. is-cracking: badge crossfades directly into the door-open motion —
        no static pause. Emblem appears and immediately begins scaling as
        the doors start swinging, so it reads as one continuous unlock.
     3. is-opening: doors swing open in 3D (hinged at outer edge, not a
        flat slide), a light flare blooms through the seam the instant
        they start moving, and the site scales+fades in from behind so
        it feels revealed rather than merely uncovered.
     4. is-done: overlay hidden
   Kept deliberately quick end-to-end so it never reads as a delay. ────── */

.tech-intro {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
  perspective: 1800px;
}
.tech-intro.is-done {
  visibility: hidden;
  transition: visibility 0s linear 0.4s;
}

/* Site revealed from behind — scales/fades in as the doors swing, so it
   feels pushed into view rather than sitting there waiting to be shown. */
body.intro-active #main,
body.intro-active .site-header {
  opacity: 0;
  transform: scale(1.035);
  filter: saturate(0.85);
}
body.intro-active.intro-revealing #main,
body.intro-active.intro-revealing .site-header {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1);
  transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              transform 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
              filter 1.05s ease 0.15s;
}

/* ── Doors: two dark panels, hinged at the outer edge like real doors ── */
.tech-intro__gate {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}
.tech-intro__panel {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(to right, #070a10, #05070c);
  transform-style: preserve-3d;
  transition: transform 1.25s cubic-bezier(0.76, 0, 0.24, 1);
  box-shadow: 0 0 60px 10px rgba(0,0,0,0.4);
}
.tech-intro__panel--l { left: 0; transform-origin: left center; }
.tech-intro__panel--r { right: 0; transform-origin: right center; }

.tech-intro.is-opening .tech-intro__panel--l {
  transform: rotateY(-92deg) translateZ(0);
}
.tech-intro.is-opening .tech-intro__panel--r {
  transform: rotateY(92deg) translateZ(0);
}

/* Panel face shading so the swing reads as dimensional, not flat */
.tech-intro__panel::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 80%, rgba(0,0,0,0.5) 100%);
  opacity: 0;
  transition: opacity 1.25s ease;
}
.tech-intro__panel--r::after {
  background: linear-gradient(to left, transparent 80%, rgba(0,0,0,0.5) 100%);
}
.tech-intro.is-opening .tech-intro__panel::after { opacity: 1; }

/* Seam hairline — brightens into a flare right as the doors start to move,
   then fades out as the doors open so it never lingers over the
   revealed site (transition-based, not a filled keyframe animation, so
   the .is-opening rule below can reliably override it). */
.tech-intro__seam {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  z-index: 2;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(40, 149, 232, 0.35) 15%,
    var(--brand) 50%,
    rgba(40, 149, 232, 0.35) 85%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.5s ease 0.2s;
}
.tech-intro.is-locked .tech-intro__seam,
.tech-intro.is-cracking .tech-intro__seam {
  opacity: 1;
}
.tech-intro.is-opening .tech-intro__seam {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.tech-intro__flare {
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%) scaleX(1);
  z-index: 4;
  background: radial-gradient(ellipse 40px 100% at center,
    rgba(120, 190, 255, 0.9) 0%,
    rgba(40, 149, 232, 0.4) 40%,
    transparent 100%);
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
}
.tech-intro.is-opening .tech-intro__flare {
  animation: ti-flare-burst 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.tech-intro__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(5,7,12,0.6) 100%);
  z-index: 3;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.tech-intro.is-opening .tech-intro__vignette { opacity: 0; }

/* ── Unlock badge + wordmark (phase 2) ───────────────────────────── */
.tech-intro__unlock {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.tech-intro.is-locked .tech-intro__unlock {
  opacity: 1;
}
.tech-intro.is-cracking .tech-intro__unlock,
.tech-intro.is-opening .tech-intro__unlock {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition-duration: 0.35s;
}
.tech-intro__badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--brand);
  background: rgba(5, 7, 12, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brand);
  position: relative;
}
.tech-intro__badge::before,
.tech-intro__badge::after {
  content: "";
  position: absolute;
  width: 10px; height: 10px;
  border: 1px solid var(--brand);
}
.tech-intro__badge::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.tech-intro__badge::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.tech-intro__dot {
  width: 8px; height: 8px;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--brand);
  animation: ti-dot-pulse 1.2s ease-in-out infinite;
}

/* Loading bar underneath the badge — fills once as the overlay opens,
   giving the unlock something to visually resolve toward. Quick by
   design so the whole overlay never reads as a stall. */
.tech-intro__bar {
  margin: 22px auto 0;
  width: 220px;
  max-width: 46vw;
  height: 2px;
  background: rgba(40, 149, 232, 0.18);
  border-radius: 2px;
  overflow: hidden;
}
.tech-intro__bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--brand);
  border-radius: 2px;
  box-shadow: 0 0 8px var(--brand);
}
.tech-intro.is-locked .tech-intro__bar-fill {
  animation: ti-bar-fill 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes ti-bar-fill {
  from { width: 0%; }
  to   { width: 100%; }
}

.tech-intro__name {
  display: block;
  margin-top: 20px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  color: #eae5d8;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.tech-intro__name em { color: var(--brand); font-style: normal; font-weight: 600; }
.tech-intro__sub {
  display: block;
  margin-top: 12px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0.78;
}

/* ── Emblem: EG logo + corner frame — crossfades in as badge fades,
   then immediately begins its own opening motion once doors move ──── */
.tech-intro__emblem {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 5;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s,
              transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s;
  padding: 32px 40px;
  pointer-events: none;
}
.tech-intro.is-cracking .tech-intro__emblem {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.tech-intro.is-opening .tech-intro__emblem {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.6);
  transition: opacity 0.6s ease 0.05s,
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0s;
}

.tech-intro__emblem::before,
.tech-intro__emblem::after,
.tech-intro__emblem > .tech-intro__frame::before,
.tech-intro__emblem > .tech-intro__frame::after {
  content: "";
  position: absolute;
  width: 24px; height: 24px;
  border: 1.5px solid var(--brand);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.5s ease;
}
.tech-intro__emblem::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.tech-intro__emblem::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.tech-intro__frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.tech-intro__frame::before { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.tech-intro__frame::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* Corner brackets fly outward as the vault opens — mirrors the doors */
.tech-intro.is-opening .tech-intro__emblem::before { transform: translate(-18px, -18px); opacity: 0; }
.tech-intro.is-opening .tech-intro__emblem::after  { transform: translate(18px, -18px); opacity: 0; }
.tech-intro.is-opening .tech-intro__frame::before  { transform: translate(-18px, 18px); opacity: 0; }
.tech-intro.is-opening .tech-intro__frame::after   { transform: translate(18px, 18px); opacity: 0; }

.tech-intro__logo {
  width: clamp(80px, 12vw, 130px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 24px rgba(40, 149, 232, 0.35));
  animation: ti-emblem-pulse 2s ease-in-out infinite;
}
@keyframes ti-emblem-pulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(40, 149, 232, 0.3)); }
  50%      { filter: drop-shadow(0 0 32px rgba(40, 149, 232, 0.55)); }
}

@keyframes ti-flare-burst {
  0%   { opacity: 0; transform: translateX(-50%) scaleX(1); }
  15%  { opacity: 1; transform: translateX(-50%) scaleX(3); }
  45%  { opacity: 0.9; transform: translateX(-50%) scaleX(10); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(40); }
}
@keyframes ti-dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 10px var(--brand); }
  50%      { opacity: 0.5; box-shadow: 0 0 4px var(--brand); }
}

@media (prefers-reduced-motion: reduce) {
  .tech-intro { display: none; }
  body.intro-active #main,
  body.intro-active .site-header { opacity: 1; transform: none; filter: none; }
}

/* ── Cookie consent — bespoke banner + preferences modal ────────────────
   First-party only. Bottom-centre floating panel, rounded corners, soft
   shadow, fade + slide on entry. Matches the site's own tokens. ────── */
.cc-banner {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 16px);
  z-index: 9999;
  width: min(640px, calc(100vw - 2rem));
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -12px rgba(13, 15, 18, 0.22), 0 4px 12px rgba(13, 15, 18, 0.08);
  padding: 1.5rem 1.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.cc-banner.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.cc-banner__text {
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
}
.cc-banner__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.1rem;
}
.cc-banner__links a {
  font-size: 12px;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-banner__links a:hover { color: var(--brand); }
.cc-banner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.cc-btn {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 0.65rem 1.15rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.cc-btn--primary {
  background: var(--brand);
  color: #fff;
}
.cc-btn--primary:hover { background: var(--brand-deep); }
.cc-btn--secondary {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}
.cc-btn--secondary:hover { border-color: var(--ink-muted); }
.cc-btn--link {
  background: transparent;
  border: 0;
  padding: 0.65rem 0.2rem;
  color: var(--ink-muted);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: auto;
}
.cc-btn--link:hover { color: var(--brand); }

@media (max-width: 560px) {
  .cc-banner { padding: 1.25rem 1.25rem 1.4rem; bottom: 12px; }
  .cc-banner__actions { flex-direction: column; align-items: stretch; }
  .cc-btn { width: 100%; text-align: center; }
  .cc-btn--link { margin-left: 0; }
}

/* ── Preferences modal ───────────────────────────────────────────────── */
.cc-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.cc-modal[hidden] { display: none; }
.cc-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(13, 15, 18, 0.55);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}
.cc-modal.is-visible .cc-modal__scrim { opacity: 1; }
.cc-modal__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: min(80vh, 640px);
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -15px rgba(13, 15, 18, 0.35);
  padding: 2rem;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.cc-modal.is-visible .cc-modal__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cc-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border: 0;
  background: var(--bg-soft);
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
}
.cc-modal__close:hover { color: var(--ink); }
.cc-modal__title {
  margin: 0 2rem 0.6rem 0;
  font-family: var(--serif, var(--font-sans));
  font-size: 1.4rem;
  color: var(--ink);
}
.cc-modal__lead {
  margin: 0 0 1.5rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-muted);
}
.cc-modal__categories {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
}
.cc-category {
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
}
.cc-category__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.cc-category__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.cc-category__body {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Switch control */
.cc-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}
.cc-switch.is-locked { cursor: default; }
.cc-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.cc-switch__track {
  position: relative;
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--rule-strong);
  transition: background var(--speed) var(--ease);
  flex-shrink: 0;
}
.cc-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(13, 15, 18, 0.3);
  transition: transform var(--speed) var(--ease);
}
.cc-switch input:checked + .cc-switch__track { background: var(--brand); }
.cc-switch input:checked + .cc-switch__track .cc-switch__thumb { transform: translateX(16px); }
.cc-switch.is-locked .cc-switch__track { background: var(--brand-soft); }
.cc-switch.is-locked .cc-switch__track .cc-switch__thumb { transform: translateX(16px); background: var(--brand); }
.cc-switch__state {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.cc-modal__footer {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.cc-modal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}
.cc-modal__links a {
  font-size: 12px;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-modal__links a:hover { color: var(--brand); }
.cc-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.cc-modal__actions .cc-btn { flex: 1 1 auto; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .cc-banner, .cc-modal__scrim, .cc-modal__panel { transition: none; }
}