@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;700&family=Source+Sans+3:wght@300;400;500;600;700&display=swap');

/* ==========================================================================
   Industrial Security Force — Design System
   Style: Swiss Modernism 2.0 · 12-col grid, modular scale, rational spacing
   Palette: Authority navy (uniform) + brand red (shield mark)
   Type: Lexend (display) / Source Sans 3 (text)
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --navy-950: #050D1E;
  --navy-900: #08152E;
  --navy-800: #0D2149;
  --navy-700: #12305F;
  --navy-600: #1B4079;
  --navy-500: #2A568F;

  --red-700: #A80C1B;
  --red-600: #D51023;
  --red-500: #E4293B;
  --red-050: #FDECEE;

  /* --- Semantic --------------------------------------------------------- */
  --color-primary: var(--navy-700);
  --color-on-primary: #FFFFFF;
  --color-accent: var(--red-600);
  --color-on-accent: #FFFFFF;

  --color-bg: #F7F9FC;
  --color-surface: #FFFFFF;
  --color-surface-alt: #EEF2F8;
  --color-fg: #0F172A;
  --color-fg-muted: #4A5A72;
  --color-fg-subtle: #6B7A91;
  --color-border: #D8E0EA;
  --color-border-strong: #B8C5D6;
  --color-ring: var(--red-600);

  /* --- Spacing (density 4/10 — marketing) ------------------------------- */
  --space-2xs: .375rem;
  --space-xs: .75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.25rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  /* --- Type scale (1.25 modular) ---------------------------------------- */
  --font-display: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs: .8125rem;
  --text-sm: .9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.5rem;
  --text-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
  --text-3xl: clamp(2rem, 1.5rem + 2.2vw, 2.875rem);
  --text-4xl: clamp(2.375rem, 1.6rem + 3.4vw, 4rem);

  /* --- Structure -------------------------------------------------------- */
  --container: 1320px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 3.5vw, 2rem);
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(8, 21, 46, .06), 0 1px 3px rgba(8, 21, 46, .08);
  --shadow: 0 4px 6px -1px rgba(8, 21, 46, .07), 0 10px 20px -6px rgba(8, 21, 46, .10);
  --shadow-lg: 0 12px 28px -8px rgba(8, 21, 46, .18), 0 30px 60px -20px rgba(8, 21, 46, .22);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: 220ms;

  --header-h: 88px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 var(--space-xs);
  color: var(--navy-900);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); font-weight: 700; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 var(--space-xs); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-600); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red-600); }

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

ul, ol { margin: 0 0 var(--space-xs); padding-left: 1.25rem; }
li { margin-bottom: .375rem; }

hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-md) 0; }

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

::selection { background: var(--red-600); color: #fff; }

/* ==========================================================================
   Layout primitives
   ========================================================================== */

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

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

.section { padding-block: var(--space-xl); }
.section--tight { padding-block: var(--space-lg); }
.section--alt { background: var(--color-surface-alt); }
.section--surface { background: var(--color-surface); }

.section--navy {
  background: var(--navy-900);
  color: #D7E0EE;
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy a { color: #9FC0EA; }

.grid { display: grid; gap: var(--space-md); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}
.split--media-first > .split__media { order: -1; }

.stack > * + * { margin-top: var(--space-sm); }

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 200;
  background: var(--red-600);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* ==========================================================================
   Typographic helpers
   ========================================================================== */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-600);
  margin-bottom: var(--space-2xs);
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--red-600);
  flex: none;
}
.section--navy .eyebrow { color: var(--red-500); }
.section--navy .eyebrow::before { background: var(--red-500); }

.lede {
  font-size: var(--text-lg);
  color: var(--color-fg-muted);
  line-height: 1.6;
}
.section--navy .lede { color: #B8C7DE; }

.section-head { max-width: 62ch; margin-bottom: var(--space-lg); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* Runs the full container width so the heading and the lede each sit on one line
   at desktop. Below ~1200px there is no longer room, and both wrap normally. */
.section-head--wide { max-width: none; }
.section-head--wide .lede { max-width: none; font-size: 1.125rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.muted { color: var(--color-fg-muted); }
.small { font-size: var(--text-sm); }
.text-center { text-align: center; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--red-600);
  --btn-fg: #fff;
  --btn-bd: var(--red-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .75rem 1.625rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .015em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.btn:hover {
  --btn-bg: var(--red-700);
  --btn-bd: var(--red-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(168, 12, 27, .5);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--navy-800);
  --btn-bd: var(--color-border-strong);
}
.btn--ghost:hover {
  --btn-bg: var(--navy-800);
  --btn-bd: var(--navy-800);
  color: #fff;
  box-shadow: 0 8px 18px -6px rgba(13, 33, 73, .45);
}

.btn--on-dark {
  --btn-bg: transparent;
  --btn-fg: #fff;
  --btn-bd: rgba(255, 255, 255, .45);
}
.btn--on-dark:hover {
  --btn-bg: #fff;
  --btn-bd: #fff;
  color: var(--navy-900);
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .45);
}

.btn--lg { min-height: 54px; padding: .875rem 2rem; font-size: var(--text-base); }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy-700);
  text-decoration: none;
  min-height: 44px;
}
.arrow-link svg { transition: transform var(--dur) var(--ease); flex: none; }
.arrow-link:hover { color: var(--red-600); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Header / navigation
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 3px rgba(8, 21, 46, .06);
  /* No backdrop-filter here: it would make .header the containing block for the
     position:fixed off-canvas menu inside it, clipping the panel to the header. */
}

.topbar {
  background: var(--navy-800);
  color: #C5D3E6;
  font-size: var(--text-xs);
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: 40px;
  padding-block: .3125rem;
}
.topbar__list { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.topbar__list li { margin: 0; }
.topbar a { color: #E4EBF5; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: .4375rem; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; flex: none; color: var(--red-500); }
.topbar__badge { color: #C5D3E6; font-weight: 600; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  color: var(--navy-900);
  flex: none;
}
.brand img { width: 64px; height: auto; flex: none; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--navy-900);
}
.brand__tag {
  display: block;
  font-family: var(--font-text);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red-600);
  margin-top: .1875rem;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__list li { margin: 0; flex: none; }

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .6875rem;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-fg-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  position: relative;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--navy-800); background: var(--color-surface-alt); }
.nav__link[aria-current="page"] { color: var(--navy-900); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: .875rem;
  right: .875rem;
  bottom: 6px;
  height: 2px;
  background: var(--red-600);
  border-radius: 2px;
}

.nav__cta { margin-left: .5rem; }

.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--navy-800);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.nav__toggle:hover { background: var(--color-surface-alt); border-color: var(--navy-500); }
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-900);
  color: #fff;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media picture,
.page-hero__media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* hero-lobby.* is pre-cropped to the detachment, so centre is correct */
  object-position: center;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg, rgba(5, 13, 30, .96) 0%, rgba(8, 21, 46, .90) 42%, rgba(8, 21, 46, .55) 78%, rgba(8, 21, 46, .40) 100%),
    linear-gradient(to top, rgba(5, 13, 30, .55) 0%, transparent 30%);
}
.hero__inner {
  padding-block: clamp(1.75rem, 2.5vw, 2.25rem);
  max-width: min(100%, 1040px);
}
.hero h1 { font-size: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem); }
.hero h1 { color: #fff; margin-bottom: var(--space-sm); }
.hero h1 em {
  font-style: normal;
  color: var(--red-500);
  display: block;
}
.hero__lede {
  font-size: clamp(1.0625rem, .95rem + .5vw, 1.25rem);
  color: #C5D3E6;
  max-width: 66ch;
  margin-bottom: var(--space-md);
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .4375rem .875rem .4375rem .5rem;
  margin-bottom: var(--space-sm);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 100px;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: .06em;
  color: #E4EBF5;
}
.hero__badge span { min-width: 0; }
.hero__badge b { color: #fff; font-weight: 600; }
.hero__badge svg { width: 18px; height: 18px; color: var(--red-500); flex: none; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: var(--space-lg);
  margin-bottom: 0;          /* dl keeps a default 1em bottom margin otherwise */
  max-width: 780px;
}
.hero__stat {
  background: rgba(5, 13, 30, .72);
  padding: var(--space-sm) var(--space-xs);
  text-align: center;
}
.hero__stat dt {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1;
}
.hero__stat dd {
  margin: .5rem 0 0;
  font-size: var(--text-xs);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #9FB2CC;
  line-height: 1.35;
}

/* Stats sit below the hero, not inside it: the hero box is then short enough
   for much more of the (very wide) photograph to survive object-fit: cover. */
.stat-strip { background: var(--navy-900); }
.stat-strip .hero__stats {
  margin-top: 0;
  max-width: none;
  border-radius: 0;
  border-inline: 0;
  border-block-color: rgba(255, 255, 255, .14);
}
.stat-strip .hero__stat { background: var(--navy-900); }

/* Compact page hero for interior pages */
.page-hero {
  position: relative;
  isolation: isolate;
  background: var(--navy-800);
  color: #fff;
  overflow: hidden;
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(95deg, rgba(8, 21, 46, .95) 0%, rgba(8, 21, 46, .88) 55%, rgba(8, 21, 46, .62) 100%);
}
.page-hero--plain { background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-700) 100%); }
.page-hero--plain::after { display: none; }
.page-hero__inner { padding-block: clamp(3rem, 7vw, 5rem); max-width: min(100%, 760px); }
.page-hero h1 { color: #fff; font-size: var(--text-3xl); margin-bottom: var(--space-2xs); }
.page-hero p { color: #C0CFE4; font-size: var(--text-lg); max-width: 56ch; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 var(--space-sm);
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8FA3BE;
}
.breadcrumb li { margin: 0; display: flex; align-items: center; gap: .5rem; }
.breadcrumb li + li::before { content: "/"; color: #5C718C; }
.breadcrumb a { color: #B8C7DE; text-decoration: none; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb [aria-current] { color: #fff; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--color-fg-muted); font-size: var(--text-sm); }

.card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--navy-500);
}
.card--link:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--navy-500);
}
.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.card__link { text-decoration: none; color: inherit; }
.card__link:hover { color: inherit; }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-xs);
  background: var(--red-050);
  color: var(--red-600);
  border-radius: var(--radius);
}
.card__icon svg { width: 26px; height: 26px; }

.card--navy {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}
.card--navy h3 { color: #fff; }
.card--navy p { color: #B8C7DE; }
.card--navy .card__icon { background: rgba(213, 16, 35, .18); color: var(--red-500); }

.card--accent { border-top: 3px solid var(--red-600); }

/* Numbered step cards */
.step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm);
  padding-top: calc(var(--space-sm) + .5rem);
}
.step__num {
  position: absolute;
  top: calc(-1 * var(--space-2xs) - 8px);
  left: var(--space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--navy-800);
  color: #fff;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-sm);
}
.step h3 { margin-top: var(--space-xs); font-size: var(--text-lg); }
.step p { color: var(--color-fg-muted); font-size: var(--text-sm); margin-bottom: 0; }

/* Feature list with check marks */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 0;
  font-size: var(--text-sm);
}
.checklist svg {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 3px;
  color: var(--red-600);
}
.section--navy .checklist li { color: #C5D3E6; }
.section--navy .checklist svg { color: var(--red-500); }

/* ==========================================================================
   Media
   ========================================================================== */

.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--navy-800);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4 / 5; }
.media-frame--wide { aspect-ratio: 16 / 10; }

.media-frame__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-md) var(--space-sm) var(--space-xs);
  background: linear-gradient(to top, rgba(5, 13, 30, .92), transparent);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
}

.media-badge {
  position: absolute;
  right: calc(-1 * var(--space-sm));
  bottom: var(--space-sm);
  background: var(--red-600);
  color: #fff;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  max-width: 220px;
}
.media-badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1;
}
.media-badge span {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: .375rem;
  color: rgba(255, 255, 255, .88);
}

/* ==========================================================================
   Gallery
   ========================================================================== */

/* Masonry columns rather than fixed frames: these photographs run from 0.44 to
   2.28 in aspect, so any fixed frame crops most of them badly. Each keeps its own
   shape here, and the width/height attributes reserve the right space up front. */
.gallery {
  columns: 3 260px;
  column-gap: var(--space-sm);
}
.gallery__item {
  position: relative;
  margin: 0 0 var(--space-sm);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-800);
  -webkit-column-break-inside: avoid;
  break-inside: avoid;
}
.gallery__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 500ms var(--ease);
}
.gallery__item:hover img { transform: scale(1.045); }
.gallery__item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-md) var(--space-xs) var(--space-xs);
  background: linear-gradient(to top, rgba(5, 13, 30, .92), transparent);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* ==========================================================================
   Stats strip
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 0;
  padding: 0;
}
.stats > div { text-align: center; }
.stats dt {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--navy-800);
  letter-spacing: -.03em;
  line-height: 1;
}
.stats dd {
  margin: .625rem 0 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

/* ==========================================================================
   Tables / definition rows
   ========================================================================== */

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.spec th, .spec td {
  text-align: left;
  padding: var(--space-xs) var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.spec th {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy-800);
  width: 34%;
}
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   CTA band
   ========================================================================== */

.cta-band {
  background:
    radial-gradient(80% 140% at 12% 0%, rgba(213, 16, 35, .32) 0%, transparent 60%),
    linear-gradient(115deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: #fff;
}
.cta-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: var(--space-md);
  align-items: center;
  padding-block: var(--space-lg);
}
.cta-band h2 { color: #fff; margin-bottom: .5rem; }
.cta-band p { color: #C5D3E6; max-width: 56ch; margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */

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

.field { display: grid; gap: .4375rem; }
.field label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy-800);
}
.field label .req { color: var(--red-600); }
.field__hint { font-size: var(--text-xs); color: var(--color-fg-subtle); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: .6875rem .875rem;
  font-family: var(--font-text);
  font-size: var(--text-base);
  color: var(--color-fg);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.field select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A72' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 20px; padding-right: 2.5rem; }

.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--navy-500); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--red-600);
  box-shadow: 0 0 0 3px rgba(213, 16, 35, .18);
}

.field__error {
  display: none;
  align-items: center;
  gap: .375rem;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--red-700);
}
.field__error svg { width: 15px; height: 15px; flex: none; }
.field.is-invalid .field__error { display: flex; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea { border-color: var(--red-600); background: #FFF8F8; }

.form__note { font-size: var(--text-xs); color: var(--color-fg-subtle); }

.form-status {
  display: none;
  align-items: flex-start;
  gap: .75rem;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius);
  border-left: 4px solid var(--navy-600);
  background: #EBF2FB;
  color: var(--navy-800);
  font-size: var(--text-sm);
}
.form-status.is-visible { display: flex; }
.form-status svg { width: 22px; height: 22px; flex: none; color: var(--navy-600); }
.form-status strong { display: block; font-family: var(--font-display); }
.form-status a { color: inherit; text-decoration: underline; font-weight: 600; }
.form-status:focus-visible { outline: 2px solid var(--navy-600); outline-offset: 2px; }

/* Same panel, used for a failed send */
.form-status--error {
  border-left-color: var(--red-600);
  background: var(--red-050);
  color: var(--navy-900);
}
.form-status--error svg { color: var(--red-600); }

/* Honeypot. Positioned off-screen rather than display:none, because some bots
   skip fields they can tell are hidden. aria-hidden and tabindex="-1" in the
   markup keep screen readers and keyboard users away from it. */
.form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ==========================================================================
   Contact blocks
   ========================================================================== */

.office {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--navy-700);
  border-radius: var(--radius);
  padding: var(--space-sm);
}
.office__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-600);
  margin-bottom: .5rem;
}
.office h3 { font-size: var(--text-lg); margin-bottom: .75rem; }
.office__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.office__list li { display: flex; gap: .75rem; margin: 0; font-size: var(--text-sm); }
.office__list svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--navy-600); }
.office__list a { color: var(--navy-700); text-decoration: none; font-weight: 600; word-break: break-word; }
.office__list a:hover { color: var(--red-600); text-decoration: underline; }

/* ==========================================================================
   Maps
   ========================================================================== */

.map-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--navy-700);
  border-radius: var(--radius);
  padding: var(--space-sm);
}
.map-card h3 { font-size: var(--text-lg); margin-bottom: .375rem; }
.map-card .arrow-link { align-self: flex-start; }

.map-frame {
  position: relative;
  aspect-ratio: 16 / 11;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-surface-alt);
}
.map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 640px) {
  .map-frame { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  background: var(--navy-950);
  color: #93A5BF;
  font-size: var(--text-sm);
  padding-top: var(--space-xl);
}
.footer__h {
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.footer a { color: #B8C7DE; text-decoration: none; }
.footer a:hover { color: #fff; text-decoration: underline; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.5fr;
  gap: var(--space-lg) var(--space-md);
  padding-bottom: var(--space-lg);
}
.footer__brand { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--space-xs); }
.footer__brand img {
  width: 68px;
  box-sizing: content-box;
  padding: 6px 8px;
  background: #fff;
  border-radius: 6px;
}
.footer__brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  color: #fff;
  line-height: 1.2;
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer__list li { margin: 0; }
.footer__list a { display: inline-block; padding-block: .1875rem; }

.footer__licence {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
  padding: var(--space-xs);
  font-size: var(--text-xs);
  line-height: 1.55;
  color: #A9BBD3;
}
.footer__licence strong { color: #fff; display: block; margin-bottom: .25rem; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-block: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: #7E90AB;
}

/* ==========================================================================
   Motion — scroll reveal (Standard tier, 300-450ms, staggered)
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* The licence number is long; below this width the top bar would wrap to two rows.
   The full licence details stay on the About page. */
@media (max-width: 999px) {
  .topbar__inner { justify-content: flex-start; }
  .topbar__badge { display: none; }
}

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
  :root { --header-h: 76px; }

  .nav__toggle { display: inline-flex; }

  .nav__menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(340px, 86vw);
    max-height: 100dvh;
    overflow-y: auto;
    padding: calc(var(--header-h) + var(--space-sm)) var(--space-sm) var(--space-lg);
    background: var(--color-surface);
    border-left: 1px solid var(--color-border);
    box-shadow: -20px 0 50px -20px rgba(8, 21, 46, .35);
    transform: translateX(100%);
    visibility: hidden;
    /* Closing: stay visible for the slide-out, then hide. Opening (below):
       become visible immediately, so the panel is focusable straight away. */
    transition: transform 280ms var(--ease), visibility 0s linear 280ms;
    z-index: 90;
  }
  .nav__menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 280ms var(--ease), visibility 0s linear 0s;
  }

  .nav__list { flex-direction: column; align-items: stretch; gap: .125rem; }
  .nav__link {
    min-height: 52px;
    padding: 0 var(--space-xs);
    font-size: var(--text-base);
    border-radius: var(--radius);
  }
  .nav__link[aria-current="page"] { background: var(--red-050); }
  .nav__link[aria-current="page"]::after { left: var(--space-xs); right: auto; width: 20px; bottom: 10px; }
  .nav__cta { margin: var(--space-sm) 0 0; }
  .nav__cta .btn { width: 100%; }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(5, 13, 30, .6);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms var(--ease), visibility 280ms;
    z-index: 80;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

}

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-md); }
  .split--media-first > .split__media { order: 0; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band__inner { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
  .media-badge { right: var(--space-xs); }
}

@media (max-width: 640px) {
  :root { --space-xl: 3.5rem; --space-lg: 2.5rem; }

  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--space-md); }
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topbar__inner { justify-content: flex-start; }
  .brand img { width: 52px; }
  .brand__name { font-size: .9375rem; }
  .btn { width: 100%; }
  .btn-row .btn { width: auto; flex: 1 1 auto; }
  .spec th, .spec td { display: block; width: auto; padding: .5rem 0; }
  .spec th { border-bottom: 0; padding-bottom: 0; }
}

/* ==========================================================================
   Large displays

   Everything above is authored for laptops, where the 1320px container fills
   about 88% of the screen. That same container on a 1440p, ultrawide or 4K
   monitor leaves two thirds of the glass empty while the type stays at laptop
   size, so the page reads as a narrow strip stranded in the middle.

   Two levers, applied in steps:

     - the root font size, which every rem in this stylesheet follows, so type,
       spacing and section rhythm grow together instead of type alone;
     - the container, which widens but deliberately stops short of the viewport,
       because a line of text spanning a 4K monitor is unreadable however large
       the letters are.

   --container-narrow grows alongside the font so the reading measure it exists
   to enforce stays the same number of characters.

   These query CSS pixels, not hardware pixels, which is what makes them behave
   under OS scaling: a 4K panel run at 200% reports a 1920px viewport and gets
   the 1800 step, while the same panel at 100% reports 3840px and gets the
   widest one.

   Nothing here applies below 1500px, so laptops render exactly as before.
   ========================================================================== */

@media (min-width: 1500px) {
  :root {
    --container: min(90vw, 1560px);
  }
}

@media (min-width: 1800px) {
  :root {
    font-size: 17px;
    --container: min(88vw, 1780px);
    --container-narrow: 880px;
    --header-h: 94px;
  }
  /* The hero copy carries its own 1040px cap, which would otherwise hold it at
     laptop width inside a container that has grown well past it. */
  .hero__inner { max-width: min(100%, 1240px); }

  /* Body copy in a two-column split has no ch cap of its own — only the
     headings and ledes do. Each half is wide enough from here on that a
     paragraph would otherwise run well past 100 characters. */
  .split > :not(.split__media) p { max-width: 76ch; }
}

@media (min-width: 2200px) {
  :root {
    font-size: 18px;
    --container: min(86vw, 1980px);
    --container-narrow: 940px;
    --header-h: 102px;
  }
  .hero__inner { max-width: min(100%, 1340px); }

  /* Three columns would put each photograph near 640px wide. A fourth keeps
     them close to the size they have on a laptop. */
  .gallery { columns: 4 300px; }
}

@media (min-width: 2800px) {
  :root {
    font-size: 19px;
    --container: 2120px;
    --container-narrow: 1000px;
    --header-h: 110px;
  }
  .hero__inner { max-width: min(100%, 1420px); }
  .gallery { columns: 4 320px; }
}

@media (min-width: 3400px) {
  :root {
    font-size: 20px;
    --container: 2240px;
    --container-narrow: 1060px;
    --header-h: 118px;
  }
  .hero__inner { max-width: min(100%, 1500px); }
  .gallery { columns: 5 340px; }
}

/* The hero is sized by its content, so without a floor it stays around 500px
   tall on any monitor — a thin band once the screen is taller than ~1100px.
   The floor tracks 34vw, which is close to the hero photograph's own 2.69:1
   aspect, so raising it costs little extra cropping. Gated on height as well as
   width so a short ultrawide does not end up with a hero taller than its
   viewport, and kept above 2200px so the crop the client already signed off at
   1440px is untouched. */
@media (min-width: 2200px) and (min-height: 900px) {
  .hero {
    min-height: min(34vw, 900px);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

/* ==========================================================================
   Preferences
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .gallery__item:hover img { transform: none; }
}

@media print {
  .header, .footer, .cta-band, .nav-backdrop, .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  [data-reveal] { opacity: 1; transform: none; }
}