/* PACK — self-hosted Barlow + Barlow Condensed (latin subset).
   Generated from Google Fonts; see docs/fonts.md. Do not hand-edit. */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/fonts/barlow-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlow-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-condensed-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/barlow-condensed-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-condensed-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* PACK — design tokens.
   Source of truth: docs/design-handoff.md section 9. Change values here, not at
   the point of use. The accent ramp is taken from the PACK logo (RGB 54/94/200). */

:root {
  /* ground + ink */
  --bg:          #f2f2f3;
  --surface:     #ffffff;
  --text:        #111214;
  --divider:     color-mix(in srgb, #111214 16%, transparent);

  /* accent — steel blue */
  --accent-100:  #eaf0fb;
  --accent-200:  #cbd9f4;
  --accent-300:  #a3bbea;
  --accent-400:  #6f92da;
  --accent-500:  #365ec8;   /* base accent */
  --accent-600:  #2b4da6;   /* hover */
  --accent-700:  #223d84;   /* accent text on light ground — AA for body copy */
  --accent-800:  #192d62;
  --accent-900:  #101e42;   /* full navy fields: page headers, footer, dark CTAs */

  /* reversed type on navy */
  --on-dark:     #f2f2f3;
  --on-dark-dim: #dbe6f7;

  /* error */
  --error:       #b3261e;

  --font-heading: 'Barlow Condensed', system-ui, sans-serif;
  --font-body:    'Barlow', system-ui, sans-serif;

  --radius: 0;              /* everything is square */
  --container: 1240px;
  --gutter: 28px;

  /* motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
}

/* PACK — reset, document defaults and shared typography.
   Type scale and rhythm: docs/design-handoff.md section 9. Never set type below 14px. */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
}

p { margin: 0; }

a { color: var(--accent-700); text-underline-offset: 3px; }
a:hover { color: var(--accent-600); }

img { display: block; max-width: 100%; }
figure { margin: 0; }
ul, ol { margin: 0; padding-left: 1.2em; }
li + li { margin-top: 6px; }

strong { font-weight: 600; }

/* Focus — a 2px accent ring on everything interactive, never the browser default. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
/* On navy fields the accent ring has too little contrast — go light. */
.band-dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--on-dark); }

::selection { background: color-mix(in srgb, var(--accent-500) 28%, transparent); }

/* — layout primitives — */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--accent-500);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  color: #fff;
}

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

/* — shared editorial type — */
.kicker {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-700);
}
.band-dark .kicker { color: var(--accent-300); }

.eyebrow {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-700);
}

.text-muted { color: color-mix(in srgb, var(--text) 62%, transparent); }
.text-dim   { color: color-mix(in srgb, var(--text) 55%, transparent); }

/* Rich-text flow from the editor: paragraphs and lists at article measure. */
.rich-text > * + * { margin-top: 22px; }
.rich-text { font-size: 19px; line-height: 1.68; }
.rich-text a { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* Drop transforms entirely rather than merely shortening them. */
  .card:hover .card-image img,
  .team-figure:hover img { transform: none !important; }
}

/* PACK — component recipes.
   Source of truth: docs/design-handoff.md section 8. */

/* ═══════════════════════════════════════════════════════════════════════════
   The blueprint frame
   Square, hairline-bordered, transparent by default, with a '+' registration
   mark centred on each of the four corners.

   The handoff sketches the marks as four child <span class="corner"> elements
   (see docs/prototype-design-system.css). They are drawn here as eight
   background layers on a single ::after instead — visually identical, but it
   keeps the marks out of the markup, so every card, figure, panel and button
   gets them from one class with no wrapper partial.

   Consequences to respect:
     · never round the corners,
     · never drop the marks,
     · never put overflow:hidden on the framed element itself (clips the
       marks) — put it on an inner well, as .card-image and .team-photo do.
   ═════════════════════════════════════════════════════════════════════════ */

.blueprint {
  position: relative;
  border: 1px solid var(--divider);
  border-radius: var(--radius);
}

.blueprint::after {
  content: "";
  position: absolute;
  inset: -5px;
  pointer-events: none;
  --mark: color-mix(in srgb, var(--accent-500) 70%, transparent);
  background-image:
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark)),
    linear-gradient(var(--mark), var(--mark)), linear-gradient(var(--mark), var(--mark));
  background-size:
    1px 9px, 9px 1px,
    1px 9px, 9px 1px,
    1px 9px, 9px 1px,
    1px 9px, 9px 1px;
  background-position:
    left 5px top 0,     left 0 top 5px,
    right 5px top 0,    right 0 top 5px,
    left 5px bottom 0,  left 0 bottom 5px,
    right 5px bottom 0, right 0 bottom 5px;
  background-repeat: no-repeat;
}

/* A navy panel needs a light rim, because its border sits between a navy fill and a
   light page and only the inner side is visible.
   
   The registration marks are deliberately NOT reversed with it. They are drawn at
   inset: -5px, so they sit on the page ground rather than on the panel - reversing
   them to white put white marks on a #f2f2f3 background, a contrast ratio of 1.0:1.
   They stay the default accent, which reads against the page the way every other
   panel's marks do. */
.blueprint.on-dark { border-color: rgba(255, 255, 255, 0.22); }

/* Surface variants — the only fills the design allows. */
.bp-surface { background: var(--surface); }
.bp-accent  { background: var(--accent-100); }
.bp-navy    { background: var(--accent-900); color: var(--on-dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   Buttons
   ═════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--divider);
  background: transparent;
  color: var(--text);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.btn-primary {
  background: var(--accent-500);
  border-color: var(--accent-500);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-600); border-color: var(--accent-600); color: #fff; }
.btn-primary:active { background: var(--accent-700); border-color: var(--accent-700); }
/* The primary button carries the blueprint marks (handoff section 8). */
.btn-primary { position: relative; }

.btn-secondary { background: transparent; border-color: var(--divider); color: var(--text); }
.btn-secondary:hover {
  background: color-mix(in srgb, var(--accent-500) 8%, transparent);
  border-color: var(--accent-500);
  color: var(--text);
}

.btn-ghost-dark {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--on-dark);
}
.btn-ghost-dark:hover { background: rgba(255, 255, 255, 0.1); color: var(--on-dark); }

/* Button sitting on a navy field, reversed out. */
.btn-on-navy {
  background: #fff;
  border-color: #fff;
  color: var(--accent-900);
  padding: 16px 28px;
  font-size: 16px;
}
.btn-on-navy:hover { background: var(--accent-100); border-color: var(--accent-100); color: var(--accent-900); }

.btn-lg { padding: 14px 26px; font-size: 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Tag chip
   ═════════════════════════════════════════════════════════════════════════ */

.tag {
  display: inline-block;
  border-radius: var(--radius);
  background: var(--accent-100);
  color: var(--accent-700);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
}
.tag-on-dark { background: rgba(255, 255, 255, 0.14); color: var(--on-dark); }

/* ═══════════════════════════════════════════════════════════════════════════
   Header
   ═════════════════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
}

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}

/* The logo is deliberately large — do not shrink it (handoff section 5). */
.site-logo { display: block; margin-right: auto; }
.site-logo img { height: 76px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 0; }

.site-nav a {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding: 8px 14px;
  /* Transparent 2px border so the active state does not shift the row. */
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-nav a:hover { color: var(--accent-600); }
.site-nav a[aria-current] {
  color: var(--accent-700);
  border-bottom-color: var(--accent-500);
}

.site-header .btn { font-size: 15px; padding: 10px 20px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--divider);
  cursor: pointer;
  color: var(--text);
}
.nav-toggle svg { display: block; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--divider);
  background: var(--surface);
}
.mobile-nav[data-open] { display: block; }
.mobile-nav__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 16px var(--gutter) 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-nav a:not(.btn) {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding: 10px 0;
}
.mobile-nav a[aria-current] { color: var(--accent-700); }
.mobile-nav .btn { width: 100%; margin-top: 16px; }

@media (max-width: 900px) {
  .site-nav, .site-header > .site-header__inner > .btn { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-logo img { height: 60px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Page header band — every page except Home and Privacy
   ═════════════════════════════════════════════════════════════════════════ */

.band-dark {
  background: var(--accent-900);
  color: var(--on-dark);
}

.page-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px var(--gutter);
}
.page-header .kicker { display: block; margin-bottom: 20px; }
.page-header h1 {
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1.02;
  text-transform: uppercase;
  margin: 0;
  max-width: 20ch;
}
.page-header__tag { margin-top: 24px; }

@media (max-width: 900px) {
  .page-header__inner { padding: 56px var(--gutter); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Cards — resources listing
   ═════════════════════════════════════════════════════════════════════════ */

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease);
}
.card:hover { border-color: var(--accent-500); color: inherit; }

.card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--divider);
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 200ms var(--ease);
}
.card:hover .card-image img { transform: scale(1.02); }

.card-body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.card-body h3 { font-size: 27px; line-height: 1.12; }
.card-standfirst { font-size: 16px; color: color-mix(in srgb, var(--text) 62%, transparent); }
.card-more {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-700);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Segmented control — resources filter
   ═════════════════════════════════════════════════════════════════════════ */

.seg {
  display: flex;
  width: fit-content;
  border: 1px solid var(--divider);
}
.seg a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  padding: 12px 26px;
  border-right: 1px solid var(--divider);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg a:last-child { border-right: 0; }
.seg a:hover { background: color-mix(in srgb, var(--accent-500) 8%, transparent); color: var(--text); }
.seg a[aria-current] { background: var(--accent-500); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   Table — ROI metrics
   ═════════════════════════════════════════════════════════════════════════ */

.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.table th {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 62%, transparent);
  padding: 12px 14px;
  border-bottom: 1px solid var(--divider);
  white-space: nowrap;
}
.table td {
  padding: 14px;
  vertical-align: top;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
}
.table th:first-child, .table td:first-child { width: 34%; }

/* ═══════════════════════════════════════════════════════════════════════════
   Form controls
   ═════════════════════════════════════════════════════════════════════════ */

.field { display: flex; flex-direction: column; gap: 8px; }

.field label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  caret-color: var(--accent-500);
  transition: border-color var(--dur) var(--ease);
}
.input:hover { border-color: color-mix(in srgb, var(--text) 40%, transparent); }
.input:focus-visible { border-color: var(--accent-500); }
textarea.input { resize: vertical; min-height: 120px; }

.field-error .input { border-color: var(--error); }
.field-message {
  font-size: 14px;
  color: var(--error);
}

.form-note {
  font-size: 14px;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}

.form-success {
  padding: 14px 16px;
  background: var(--accent-100);
  color: var(--accent-800);
  font-size: 16px;
}

.validation-summary { padding: 14px 16px; border: 1px solid var(--error); color: var(--error); font-size: 15px; }
.validation-summary ul { margin: 0; }

/* Honeypot — off-screen rather than display:none so bots still fill it. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Footer
   ═════════════════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--accent-900);
  color: var(--on-dark-dim);
}

.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--gutter) 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
}

.site-footer h2 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-300);
  margin-bottom: 18px;
}

.site-footer a { color: var(--on-dark-dim); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }

.footer-links { display: flex; flex-direction: column; gap: 10px; font-size: 16px; }

.footer-strapline { font-size: 15px; max-width: 32ch; margin-top: 18px; }

/* Logos sit on a white plate — the marks are white-on-navy artwork. */
.logo-plate {
  display: inline-block;
  background: #fff;
  padding: 14px 18px;
}
.logo-plate img { height: 74px; width: auto; }

.logo-plate-sm { padding: 6px 10px; }
.logo-plate-sm img { height: 34px; }

.footer-legal {
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px var(--gutter) 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 14px;
  color: rgba(219, 230, 247, 0.7);
}
.footer-legal a { color: rgba(219, 230, 247, 0.9); text-decoration: underline; }

/* PACK — per-page layout.
   Source of truth: docs/design-handoff.md section 7. Measurements are exact;
   the 900px and 640px breakpoints are where the grids collapse. */

/* ═══════════════════════════════════════════════════════════════════════════
   7.1 Home
   ═════════════════════════════════════════════════════════════════════════ */

.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 96px var(--gutter) 88px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 56px;
  align-items: end;
}
.hero .kicker { display: block; margin-bottom: 22px; }
.hero h1 {
  font-size: clamp(52px, 7vw, 104px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.hero h1 .accent-line { color: var(--accent-400); }
.hero__intro { font-size: 21px; line-height: 1.45; color: var(--on-dark-dim); }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 64px var(--gutter);
    align-items: start;
  }
  .hero h1 { font-size: clamp(40px, 11vw, 72px); }
}

.lead-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 80px var(--gutter) 24px;
}
.lead-statement {
  font-size: 26px;
  line-height: 1.42;
  max-width: 60ch;
  margin: 0 0 56px;
}

.proposition-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
.proposition-card { padding: 32px; }
.proposition-card__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-700);
  margin-bottom: 14px;
}
.proposition-card p { font-size: 17px; }

.purpose-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px var(--gutter);
}
/* Optional image above the purpose panel. The gap matches the card grid gutter so the
   two blueprint frames read as one stacked object rather than two unrelated bands. */
.purpose-image {
  aspect-ratio: 21 / 9;
  overflow: hidden;
  margin-bottom: 28px;
}
.purpose-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.purpose-panel { padding: 56px; background: var(--surface); }
.purpose-panel__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 48px;
  align-items: start;
}
.purpose-panel h2 { font-size: 44px; text-transform: uppercase; }
.purpose-panel p { font-size: 22px; line-height: 1.5; }

.home-panels {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter) 88px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.home-panel {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.home-panel h2 { font-size: 32px; text-transform: uppercase; }
.home-panel p { font-size: 17px; }
.home-panel .btn { margin-top: auto; }

/* With a feed present, the two home panels become separate full-width bands - feed
   above, contact below - instead of the side-by-side pair. Each band therefore has to
   supply the page container itself, which .home-panels used to do for both, and the
   panel padding and type that .home-panel used to give their contents. */
.linkedin-section,
.get-in-touch-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter);
}
.get-in-touch-section { padding-bottom: 88px; }

.linkedin-section .eyebrow,
.get-in-touch-section .eyebrow { display: block; }

.linkedin-section h2,
.get-in-touch-section h2 { font-size: 32px; text-transform: uppercase; }

.linkedin-section p,
.get-in-touch-section p { font-size: 17px; }

/* Both panels keep the framed, padded treatment they had as the two halves of
   .home-panels - only the width around them, and what they contain, has changed.
   align-items keeps the button to its content width instead of stretching it across
   the panel, which is what the flex column would otherwise do. */
.linkedin-section > .blueprint,
.get-in-touch-section > .blueprint {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.linkedin-panel { background: var(--surface); }

/* A white framed well for the embed, matching the surface treatment used by the other
   blueprint panels.
   
   No overflow scroller here on purpose. An overflow-x on this wrapper would add a
   second, outer scrollbar on top of whatever the widget already draws for itself.
   The max-width on descendants is what keeps a fixed-width embed from widening the
   page; any scrollbar left inside the widget belongs to the widget and is set in the
   Elfsight dashboard, not here. */
.linkedin-feed { width: 100%; }
.linkedin-feed iframe,
.linkedin-feed img {
  display: block;
  max-width: 100%;
  border: 0;
}

@media (max-width: 900px) {
  .linkedin-section > .blueprint,
  .get-in-touch-section > .blueprint { padding: 28px; }
}

@media (max-width: 900px) {
  .lead-section { padding: 56px var(--gutter) 16px; }
  .lead-statement { font-size: 22px; margin-bottom: 36px; }
  .purpose-section { padding: 40px var(--gutter); }
  .purpose-image { margin-bottom: 20px; }
  .purpose-panel { padding: 32px; }
  .purpose-panel__inner { grid-template-columns: 1fr; gap: 24px; }
  .purpose-panel h2 { font-size: 34px; }
  .purpose-panel p { font-size: 19px; }
  .home-panels { grid-template-columns: 1fr; padding: 16px var(--gutter) 56px; }
  .home-panel { padding: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7.2 Culture / 7.6 About origin story — sticky sidebar heading + body
   ═════════════════════════════════════════════════════════════════════════ */

.editorial {
  max-width: var(--container);
  margin: 0 auto;
  padding: 72px var(--gutter) 96px;
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.editorial__aside h2 {
  font-size: 34px;
  line-height: 1.05;
  text-transform: uppercase;
  position: sticky;
  top: 110px;
}
.editorial__body {
  max-width: 72ch;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.editorial__body p { font-size: 19px; }

.pull-quote {
  padding: 36px;
  margin: 14px 0;
  background: var(--surface);
}
.pull-quote p {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.2;
  color: var(--accent-800);
}

.cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 900px) {
  .editorial {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 48px var(--gutter) 64px;
  }
  /* Sidebar heading becomes static above the body (handoff 7.2). */
  .editorial__aside h2 { position: static; font-size: 30px; }
  .pull-quote { padding: 28px; }
  .pull-quote p { font-size: 25px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7.3 Resources
   ═════════════════════════════════════════════════════════════════════════ */

.resources-filter {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--gutter) 0;
}

.card-grid {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--gutter) 96px;
  display: grid;
  /* auto-fill, not auto-fit: a row with one or two cards keeps three tracks, so a lone
     card stays card-sized instead of stretching across the page with a letterbox image. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 28px;
}

/* Sits directly under the segmented filter, in place of .card-grid, so it carries
   the same 40px above and 96px below — otherwise the panel's corner marks collide
   with the filter. */
.empty-state {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--gutter) 96px;
}
.empty-state__panel {
  padding: 64px;
  text-align: center;
  background: var(--surface);
}
.empty-state__panel h2 { font-size: 38px; text-transform: uppercase; }
.empty-state__panel p { font-size: 19px; max-width: 52ch; margin: 18px auto 28px; }

@media (max-width: 640px) {
  /* Both are the same slot under the filter, so they shed the same amount. */
  .card-grid { grid-template-columns: 1fr; padding-bottom: 64px; }
  .empty-state { padding-bottom: 64px; }
  .empty-state__panel { padding: 36px 24px; }
  .empty-state__panel h2 { font-size: 30px; }
  .seg { width: 100%; }
  .seg a { flex: 1; text-align: center; padding: 12px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Events — listing cards, past-events section, and the detail panel
   ═════════════════════════════════════════════════════════════════════════ */

/* Two chips side by side: the kind, then the format. */
.card-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* A quieter second chip, so "Event" reads as the label and "Online" as the qualifier
   rather than the two competing. */
.tag-quiet {
  background: transparent;
  border: 1px solid var(--divider);
  color: color-mix(in srgb, var(--text) 62%, transparent);
}

/* The date leads an event card, so it gets the accent and the condensed face rather
   than sitting in body copy. */
.event-when {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--accent-700);
}
.event-venue { font-size: 16px; color: color-mix(in srgb, var(--text) 62%, transparent); }

/* Past events are still worth showing as evidence the programme runs, but they should
   not compete with what is still to come. Muted, and lifted back on hover so they are
   clearly still real links. */
.event-card--past { opacity: 0.72; transition: opacity var(--dur) var(--ease); }
.event-card--past:hover { opacity: 1; }
.event-card--past .event-when { color: color-mix(in srgb, var(--text) 55%, transparent); }

.past-events {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter) 96px;
}
.past-events > h2 {
  font-size: 26px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 62%, transparent);
  padding-top: 36px;
  border-top: 1px solid var(--divider);
}

/* Past events sit inside .past-events, which already supplies the container. */
.past-events .card-grid { max-width: none; padding: 28px 0 0; }

/* Open events - sessions run in-house on request. Their own section on the Events tab,
   between what is coming up and what has been: same container and rule as past events,
   but at full strength, because these are live offers rather than an archive. */
.open-events {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px var(--gutter) 96px;
}
/* When past events follow, the two sections share one gap rather than stacking two. */
.open-events + .past-events { padding-top: 0; }
.open-events > h2 {
  font-size: 26px;
  text-transform: uppercase;
  padding-top: 36px;
  border-top: 1px solid var(--divider);
}
.open-events__intro {
  margin-top: 8px;
  font-size: 17px;
  color: color-mix(in srgb, var(--text) 62%, transparent);
}
.open-events .card-grid { max-width: none; padding: 28px 0 0; }

/* The when/where panel on an event page. Sits between the hero and the body at the
   article measure, so the eye does not have to travel wider than the prose below it. */
.event-detail {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter) 40px;
}
.event-details-panel {
  padding: 32px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.event-detail-item .eyebrow { display: block; margin-bottom: 6px; }
.event-detail-item p { font-size: 19px; }
.event-address { line-height: 1.5; white-space: pre-line; }
.event-passed {
  font-size: 17px;
  color: color-mix(in srgb, var(--text) 55%, transparent);
}

/* The form at the foot of an open event page, at the article measure so it lines up with
   the details above it. .contact-form supplies the panel itself. */
.open-event-form {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px var(--gutter) 96px;
}

/* The booking panel on a paid event: payment outcome, then the form. Same measure as the
   open event form, and the form itself is .contact-form with a price line and a places
   field on top. */
.event-booking {
  max-width: 760px;
  margin: 0 auto;
  padding: 16px var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.booking-price { font-size: 19px; }
.booking-price strong { font-family: var(--font-heading); font-weight: 600; font-size: 26px; letter-spacing: 0.01em; }
.booking-status { padding: 14px 16px; font-size: 16px; }
.booking-status--ok { background: var(--accent-100); color: var(--accent-800); }
.booking-status--warn { border: 1px solid var(--error); color: var(--error); }
.field--narrow { max-width: 180px; }

@media (max-width: 900px) {
  .event-details-panel { padding: 24px; }
  .past-events { padding-bottom: 64px; }
  .open-events { padding-bottom: 64px; }
  .open-events > h2 { padding-top: 28px; }
  .open-event-form { padding-bottom: 64px; }
  .event-booking { padding-bottom: 64px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7.4 Article detail
   ═════════════════════════════════════════════════════════════════════════ */

.article-breadcrumb {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px var(--gutter) 0;
}
.article-breadcrumb a {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.article-breadcrumb a:hover { text-decoration: underline; }

.article-header {
  max-width: var(--container);
  margin: 0 auto;
  padding: 28px var(--gutter) 40px;
}
.article-header h1 {
  font-size: clamp(36px, 4.6vw, 62px);
  text-transform: uppercase;
  margin: 18px 0 0;
  max-width: 22ch;
}

.article-hero {
  max-width: var(--container);
  margin: 0 auto 48px;
  aspect-ratio: 21 / 9;
  overflow: hidden;
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }

.article-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.article-body p { font-size: 19px; line-height: 1.68; }

.article-footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}
.article-footer__inner {
  border-top: 1px solid var(--divider);
  padding-top: 36px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .article-hero { aspect-ratio: 16 / 9; margin-bottom: 32px; }
  .article-body, .article-footer { padding-bottom: 64px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7.5 ROI
   ═════════════════════════════════════════════════════════════════════════ */

.roi-intro {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--gutter) 0;
}
.roi-intro p { font-size: 24px; line-height: 1.45; max-width: 60ch; }

.roi-panels {
  max-width: var(--container);
  margin: 0 auto;
  padding: 56px var(--gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}
.roi-panel { padding: 40px; background: var(--surface); }
.roi-panel h2 { font-size: 30px; text-transform: uppercase; margin-bottom: 18px; }
.roi-panel p { font-size: 17px; }
.roi-panel > * + * { margin-top: 16px; }

.roi-table-section {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 56px;
}
.roi-table-section h2 { font-size: 34px; text-transform: uppercase; margin-bottom: 28px; }
.roi-footnote { max-width: 72ch; margin: 28px 0 0; font-size: 17px; }

.roi-cta {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) 96px;
}
.roi-cta__panel {
  padding: 56px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.roi-cta__panel h2 { font-size: 38px; text-transform: uppercase; max-width: 18ch; }

/* Forced onto its own line beneath the heading-and-button row. Without the 100% basis
   it becomes a third flex item and justify-content: space-between pushes it into the
   middle of the row, between the heading and the button. Colour is inherited from
   .bp-navy, so only the dimming is set here. Matches .roi-footnote at 17px. */
.roi-cta__footnote {
  flex: 0 0 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  max-width: 72ch;
  color: var(--on-dark-dim);
  opacity: 0.75;
}

@media (max-width: 900px) {
  .roi-intro p { font-size: 21px; }
  .roi-panels { padding: 40px var(--gutter); }
  .roi-panel { padding: 28px; }
  .roi-cta__panel { padding: 32px; }
  .roi-cta__panel h2 { font-size: 30px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7.6 About — Meet the PACK
   ═════════════════════════════════════════════════════════════════════════ */

.team-band {
  border-top: 1px solid var(--divider);
  background: var(--surface);
}
.team-band__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 72px var(--gutter) 96px;
}
.team-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.team-heading-row h2 { font-size: 44px; text-transform: uppercase; }
.team-note { font-size: 17px; color: color-mix(in srgb, var(--text) 55%, transparent); }

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.team-figure { background: var(--surface); }
.team-photo {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-bottom: 1px solid var(--divider);
}
.team-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.team-figure figcaption { padding: 20px; }
.team-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
}
.team-role {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-700);
  margin-top: 6px;
}

@media (max-width: 1023px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-heading-row h2 { font-size: 36px; }
  .team-band__inner { padding: 48px var(--gutter) 64px; }
}
@media (max-width: 639px) {
  .team-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7.7 Contact
   ═════════════════════════════════════════════════════════════════════════ */

.contact-layout {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px var(--gutter) 96px;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
}
.contact-intro p { font-size: 19px; }
.contact-intro p + p { margin-top: 22px; color: color-mix(in srgb, var(--text) 62%, transparent); }
.contact-linkedin {
  display: inline-block;
  margin-top: 28px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
}
.contact-linkedin:hover { text-decoration: underline; }

.contact-form {
  padding: 40px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-form .btn { align-self: flex-start; padding: 14px 26px; font-size: 16px; }

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 48px var(--gutter) 64px;
  }
  .contact-form { padding: 28px; }
}
@media (max-width: 640px) {
  .field-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7.8 Privacy policy — no header band, narrow measure
   ═════════════════════════════════════════════════════════════════════════ */

.narrow-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px var(--gutter) 96px;
}
.narrow-page h1 {
  font-size: clamp(36px, 4.4vw, 56px);
  text-transform: uppercase;
  margin-bottom: 28px;
}
.narrow-page__intro { font-size: 19px; margin-bottom: 28px; }

@media (max-width: 900px) {
  .narrow-page { padding: 48px var(--gutter) 64px; }
}