@font-face { font-family: "Syncopate"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/syncopate-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Syncopate"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/syncopate-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* Colour */
  --bg: #151515;            /* page background (current site) */
  --surface: #1c1c1c;       /* cards, hero panel */
  --surface-2: #222222;     /* placeholders, menu */
  --ink: #ffffff;           /* headings, primary text */
  --ink-body: #e9ebec;      /* running text */
  --ink-muted: #a3acb0;     /* eyebrows, footer text: 7.9:1 on --bg */
  --brand-grey: #73878c;    /* brandbook grey (2022 brandbook p8): 4.85:1 on --bg, 4.52:1 on --surface */
  --line: rgba(255,255,255,0.12);
  --graphic: rgba(163,172,176,0.30);  /* card line frames at rest: the eyebrow grey (#A3ACB0) held back to 30%, so the lines sit behind the text (Anthony, 2 Nov 2026) */
  --on-grey: #151515;       /* text on the grey brand colour: 4.85:1 */

  /* Type: one scale, phone to laptop */
  --font-display: "Syncopate", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(26px, calc(19px + 1.75vw), 40px);   /* hero heading: 26px phone, 40px laptop */
  --fs-h: clamp(22px, calc(17px + 1.25vw), 32px);     /* section headings: 22px phone, 32px laptop */
  --fs-card: 18px;                                     /* card headings */
  --fs-body: clamp(16px, calc(15.1px + 0.2vw), 17px);  /* 16px on phone (STD-05) */
  --fs-label: 12px;                                    /* eyebrows, CTAs and links: one matched size */
  --fs-small: 14px;                                    /* footer */
  --lh-head: 1.22;
  --lh-body: 1.65;
  --track-head: 0.02em;
  --track-label: 0.16em;

  /* Spacing: one scale, used everywhere (STD-09) */
  --s-1: 8px;  --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 48px; --s-6: 64px;  --s-7: 96px;  --s-8: 128px;
  --section: clamp(80px, calc(56px + 5vw), 128px);   /* vertical padding of every section */
  --eyebrow-gap: 20px;                                /* eyebrow to heading */
  --head-gap: clamp(24px, calc(18px + 1vw), 32px);    /* heading to body, every section (STD-27) */
  --gutter: clamp(20px, 4vw, 56px);
  --container: 1320px;
  --header-h: 64px;

  --ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 1100px) { :root { --header-h: 80px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
:focus-visible { outline: 2px solid var(--brand-grey); outline-offset: 3px; }
.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; }

.wrap {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Type components ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--eyebrow-gap);
}
.h {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h);
  line-height: var(--lh-head);
  letter-spacing: var(--track-head);
  text-transform: uppercase;
  color: var(--ink);
  text-wrap: balance;
}
.h .t1 { color: var(--ink); }
.h .t2 { color: var(--brand-grey); }
/* Each colour on its own line on laptop and tablet (STD-15); on phone the two parts run on and wrap. */
@media (min-width: 640px) { .h .t1, .h .t2 { display: block; } }
.lead { max-width: 64ch; color: var(--ink-body); }
.stack-head > * + .lead,
.stack-head > .h + * { margin-top: var(--head-gap); }

/* CTA button */
.cta {
  display: inline-flex; align-items: center; gap: 14px;
  min-height: 52px; padding: 0 26px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none;
  color: var(--on-grey); border: 1px solid var(--brand-grey); background: var(--brand-grey);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
@media (max-width: 420px) { .cta { letter-spacing: 0.09em; padding: 0 18px; gap: 12px; } }
@media (max-width: 379px) { .cta { white-space: normal; padding-block: 12px; line-height: 1.5; } }
.cta svg, .text-link svg { width: 7px; height: 12px; flex: none; transition: transform .25s var(--ease); }
/* Primary button: grey brand colour at rest (charcoal text 4.87:1); white on hover and tap */
@media (hover: hover) { .cta:hover { background: var(--ink); border-color: var(--ink); color: var(--on-grey); } .cta:hover svg { transform: translateX(3px); } }
.cta:active, .cta:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--on-grey); }

/* Text link (no box) */
.text-link {
  display: inline-flex; align-items: center; gap: 12px; padding-block: 10px; margin-block: -10px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label);
  letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; color: var(--ink);
  transition: color .25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) { .text-link:hover { color: var(--brand-grey); } .text-link:hover svg { transform: translateX(3px); } }
.text-link:active { color: var(--brand-grey); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.header-inner { height: var(--header-h); display: flex; align-items: center; gap: var(--s-3); }
.brand { display: block; flex: none; line-height: 0; }
.brand img { height: 36px; width: auto; }
@media (min-width: 1100px) { .brand img { height: 46px; } }
/* Smallest phones: keep logo, CONTACT US and menu on one line without sideways scroll */
@media (max-width: 359px) { .header-inner { gap: 14px; } .brand img { height: 32px; } .f-brand img { height: 32px; } }
.nav { display: none; }
.header-contact {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-family: var(--font-display); font-size: 10px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink);
  padding-block: 12px; white-space: nowrap; transition: color .2s var(--ease);
}
.header-contact svg { width: 6px; height: 10px; }
@media (hover: hover) { .header-contact:hover { color: var(--brand-grey); } }
.header-contact:active { color: var(--brand-grey); }
.menu-btn {
  flex: none; width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center;
  background: none; border: 0; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.menu-btn .mb-burger { display: block; width: 20px; height: 1.5px; background: currentColor; position: relative; transition: background-color .2s; }
.menu-btn .mb-burger::before, .menu-btn .mb-burger::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease); }
.menu-btn .mb-burger::before { top: -6px; } .menu-btn .mb-burger::after { top: 6px; }
.menu-open .menu-btn .mb-burger { background: transparent; }
.menu-open .menu-btn .mb-burger::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn .mb-burger::after { transform: translateY(-6px) rotate(-45deg); }


@media (min-width: 1100px) {
  .menu-btn { display: none; }
  .nav { display: flex; justify-content: center; flex: 1; }
  .nav > ul { display: flex; gap: clamp(20px, 2.4vw, 40px); list-style: none; margin: 0; padding: 0; }
  .header-contact { margin-left: 0; font-size: 12px; }
}
.nav a, .nav button {
  font-family: var(--font-display); font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase;
  color: #d9dddf; text-decoration: none; background: none; border: 0; padding: 12px 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; position: relative; line-height: 1; transition: color .2s var(--ease);
}
.nav > ul > li { display: flex; align-items: center; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--ink); }
@media (hover: hover) { .nav a:hover, .nav button:hover { color: var(--brand-grey); } }
.nav a:active, .nav button:active { color: var(--brand-grey); }
.nav .chev { width: 9px; height: 6px; transition: transform .25s var(--ease); }
.has-sub { position: relative; }
.sub {
  position: absolute; top: 100%; left: -20px; min-width: 230px; list-style: none; margin: 0; padding: 10px 0;
  background: var(--surface); border: 1px solid var(--line);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.sub a { display: flex; padding: 12px 20px; font-size: 11px; }
.has-sub:hover .sub, .has-sub:focus-within .sub, .has-sub.open .sub { opacity: 1; visibility: visible; transform: none; }
.has-sub:hover .chev, .has-sub.open .chev { transform: rotate(180deg); }

/* Mobile menu */
.mobile-menu {
  position: fixed; left: 0; right: 0; bottom: 0; top: calc(var(--header-h) + env(safe-area-inset-top, 0px)); z-index: 40;
  background: var(--bg); overflow-y: auto; padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.menu-open { overflow: hidden; }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu > .wrap > ul > li { border-bottom: 1px solid var(--line); }
.mobile-menu a, .mobile-menu button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 60px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
}
.mobile-menu a:active, .mobile-menu button:active { color: var(--brand-grey); }
.mobile-menu .chev { width: 12px; height: 8px; transition: transform .25s var(--ease); }
.mobile-menu [aria-expanded="true"] .chev { transform: rotate(180deg); }
.mobile-menu .m-sub { padding: 0 0 var(--s-2) var(--s-2); }
.mobile-menu .m-sub a { min-height: 48px; font-size: 12px; font-weight: 400; letter-spacing: var(--track-label); color: #d9dddf; }
.mobile-menu .m-contact {
  margin-top: var(--s-5); width: auto; display: inline-flex; justify-content: flex-start; gap: 14px;
  min-height: 52px; padding: 0 26px; font-size: var(--fs-label); letter-spacing: var(--track-label);
  background: var(--brand-grey); border: 1px solid var(--brand-grey); color: var(--on-grey);
}
.mobile-menu .m-contact:active { background: var(--ink); border-color: var(--ink); color: var(--on-grey); }
@media (min-width: 1100px) { .mobile-menu { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
  display: flex; align-items: flex-end;
  padding-block: var(--s-3);
}
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero picture { z-index: -1; }
.hero picture img { object-fit: cover; object-position: 40% 28%; }
@media (min-aspect-ratio: 1/1) { .hero picture img { object-position: 52% 45%; } }
.hero .wrap { position: relative; }
.hero-panel {
  background: var(--surface);
  padding: var(--s-4) var(--s-3);
  max-width: 640px;
}
.hero-panel .h { font-size: var(--fs-h1); line-height: 1.18; }
.hero-panel .lead { margin-top: var(--head-gap); font-size: var(--fs-body); }
.hero-panel .cta { margin-top: var(--s-4); }
/* Tablet and laptop: the panel sits on the bottom edge of the image, like a plinth. Phone keeps its inset panel. */
@media (min-width: 640px) {
  .hero { padding-top: var(--s-6); padding-bottom: 0; }
  .hero-panel { padding: var(--s-5); }
}
@media (min-width: 1024px) and (min-aspect-ratio: 1/1) {
  .hero { padding-top: var(--s-5); }
  .hero-panel { max-width: 660px; padding: 52px 56px 56px; }
}
@media (min-width: 1600px) { .hero-panel { max-width: 720px; padding: var(--s-6); } }
/* Short laptop screens (1366 x 768 with browser chrome): keep the panel and button in view. */
@media (min-width: 1024px) and (max-height: 700px) {
  .hero { padding-top: var(--s-4); }
  .hero-panel { padding: 40px 48px; }
  .hero-panel .lead { margin-top: var(--s-3); }
  .hero-panel .cta { margin-top: var(--s-3); }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section + .section { padding-top: 0; }
.section.rule-top { border-top: 1px solid rgba(255,255,255,0.06); padding-top: var(--section); }
.after-head { margin-top: var(--s-5); }
@media (min-width: 1024px) { .after-head { margin-top: var(--s-6); } }

/* What we do: phone stack; tablet 2 x 2 with the intro as the first cell; laptop intro above three cards */
.engage { display: grid; gap: var(--s-2); }
.engage .section-head { margin-bottom: var(--s-4); }
@media (min-width: 640px) {
  .engage { grid-template-columns: 1fr 1fr; gap: var(--s-2); }
  .engage .section-head { margin: 0; padding: var(--s-3) var(--s-3) var(--s-3) 0; align-self: center; }
}
@media (min-width: 1200px) {
  .engage { grid-template-columns: repeat(3, 1fr); column-gap: 20px; row-gap: 0; }
  .engage .section-head { grid-column: 1 / -1; padding: 0; margin-bottom: var(--s-6); }
}
.card {
  position: relative; isolation: isolate; overflow: hidden;
  overflow: clip;                     /* clips the line graphic without stopping the card growing: with hidden, a card kept its shape and cut off text that did not fit */
  aspect-ratio: 470 / 400;            /* laptop shape on every device; height grows with content */
  display: flex; flex-direction: column;
  padding: var(--s-4) var(--s-3);
  background: var(--surface);
  color: var(--ink-body); text-decoration: none;
  transition: background-color .35s var(--ease), color .35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) { .card { padding: 36px 32px; } }
@media (min-width: 1440px) { .card { padding: 44px 40px; } }
.card .lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; transition: opacity .35s var(--ease); }
/* Each card carries one layer of the BML mark; the ends fade into the card so no finished edge shows */
.card .lines { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 72%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 30%, #000 72%, transparent 100%); }
.card .lines use, .card .lines path { fill: none; stroke: var(--graphic); stroke-width: 1; }
/* Card line graphics: one frame of the BML mark per card (Advisory top, Delivery middle, Academy base), thin outlines, scaled with the card, never stretched; the side walls sit beyond the card and both ends fade out */
.card h3 {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-card); line-height: 1.2;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); transition: color .35s var(--ease);
}
.card p { margin-top: var(--s-3); max-width: 40ch; }
.card .card-cta {
  margin-top: auto; padding-top: var(--s-4);
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink);
  transition: color .35s var(--ease);
}
.card .card-cta svg { width: 7px; height: 12px; transition: transform .3s var(--ease); }
@media (hover: hover) {
  .card:hover { background: var(--brand-grey); color: var(--on-grey); }
  .card:hover h3, .card:hover .card-cta { color: var(--on-grey); }
  .card:hover .lines { opacity: 0; }
  .card:hover .card-cta svg { transform: translateX(3px); }
}
.card:active, .card:focus-visible { background: var(--brand-grey); color: var(--on-grey); }
.card:active h3, .card:active .card-cta, .card:focus-visible h3, .card:focus-visible .card-cta { color: var(--on-grey); }
.card:active .lines, .card:focus-visible .lines { opacity: 0; }

/* Two-column sections */
.split { display: grid; gap: var(--head-gap); }
.split .body { display: grid; gap: var(--s-4); justify-items: start; align-content: start; }
@media (min-width: 1024px) {
  .split { grid-template-columns: 5fr 6fr; column-gap: clamp(48px, 7vw, 120px); align-items: start; }
  .split .body { padding-top: calc(var(--fs-label) * 1.6 + var(--eyebrow-gap)); }
}

/* Direct access */
.access .lead { margin-top: var(--head-gap); max-width: 68ch; }
.access .text-link { margin-top: calc(var(--s-4) - 10px); }

/* Clients: a slow continuous reel, logos toned down to grey. Pauses on hover; static row for reduced motion */
.reel {
  --logo-h: 48px; --reel-gap: clamp(56px, 9vw, 112px);
  overflow: hidden; padding-block: var(--s-5);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
@media (min-width: 768px) { .reel { --logo-h: 56px; } }
@media (min-width: 1200px) { .reel { --logo-h: 60px; padding-block: var(--s-6); } }
.reel-track { display: flex; width: max-content; }
.clients { list-style: none; margin: 0; padding: 0 var(--reel-gap) 0 0; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--reel-gap); }
.clients li { flex: none; line-height: 0; }
.clients img { height: var(--logo-h); width: auto; opacity: 0.55; transition: opacity .3s var(--ease); }
@media (hover: hover) { .clients li:hover img { opacity: 0.9; } }
/* Wordmark optically matched to the emblems (see Build Process Log) */
.clients img.wordmark { height: calc(var(--logo-h) * 0.62); }
@media (prefers-reduced-motion: no-preference) {
  .reel-track { animation: reel 38s linear infinite; }
  .reel:hover .reel-track { animation-play-state: paused; }
  @keyframes reel { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) {
  .reel { -webkit-mask-image: none; mask-image: none; }
  .reel-track { width: auto; justify-content: center; }
  .clients { flex-wrap: wrap; justify-content: center; padding: 0; row-gap: var(--s-5); column-gap: clamp(28px, 6vw, 72px); }
  .clients[aria-hidden="true"] { display: none; }
}

/* Insights */
.insights { list-style: none; margin-inline: 0; margin-bottom: 0; padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 640px) and (max-width: 1023px) { .insights { gap: var(--s-4); } }
@media (min-width: 1024px) { .insights { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.post { display: grid; gap: var(--s-3); align-content: start; }
@media (min-width: 640px) and (max-width: 1023px) { .post { grid-template-columns: 5fr 6fr; gap: var(--s-4); align-items: center; } }
.post-media {
  text-decoration: none;
  position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--surface-2);
  display: grid; place-items: center;
}
.post-media svg.ph-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.post-media svg.ph-lines path { fill: none; stroke: rgba(255,255,255,0.07); vector-effect: non-scaling-stroke; }
.post-media .ph-label { position: relative; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--track-label); color: var(--ink-muted); text-transform: uppercase; }
.post-body { display: grid; gap: 14px; justify-items: start; }
.post-date { font-family: var(--font-display); font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); }
.post h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-body); line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.post h3 a { text-decoration: none; transition: color .2s var(--ease); }
@media (hover: hover) { .post h3 a:hover { color: var(--brand-grey); } }
.post .text-link { margin-top: 2px; }

/* Closing */
.closing .lead { margin-top: var(--head-gap); }
.closing .cta { margin-top: var(--s-4); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid rgba(255,255,255,0.06); padding-block: var(--s-6) var(--s-4); font-size: var(--fs-small); line-height: 1.75; color: var(--ink-muted); }
.footer-grid { display: grid; gap: var(--s-5); }
.f-offices { display: grid; gap: var(--s-5); }
@media (min-width: 640px) {
  .footer-grid { grid-template-columns: auto minmax(0, 1fr); column-gap: 96px; }
  .f-brand { grid-column: 1 / -1; }
  .f-office .line { white-space: nowrap; }
}
@media (min-width: 1100px) { .footer-grid { column-gap: 8vw; } .f-offices { grid-template-columns: auto auto; justify-content: start; column-gap: 48px; } }
@media (min-width: 1440px) {
  .footer-grid { grid-template-columns: 260px auto minmax(0, 1fr); column-gap: 56px; }
  .f-brand { grid-column: auto; }
  .f-offices { justify-self: end; }
}
@media (max-width: 639px) { .f-office address { font-size: 13px; } }
.f-brand img { height: 36px; width: auto; }
@media (min-width: 1100px) { .f-brand img { height: 46px; } }
.f-brand p { margin-top: var(--s-3); max-width: 34ch; }
.f-email { display: inline-block; margin-top: 6px; padding-block: 10px; }
.f-social { margin-top: var(--s-3); display: flex; gap: var(--s-2); }
.f-social a { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -10px; color: var(--ink-muted); transition: color .2s var(--ease); }
.f-social svg { width: 18px; height: 18px; }
@media (hover: hover) { .f-social a:hover { color: var(--brand-grey); } }
.f-title { font-family: var(--font-display); font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); margin: 0 0 var(--s-2); font-weight: 400; }
.f-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.f-links a { display: inline-flex; align-items: center; gap: 8px; padding-block: 8px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; color: var(--ink-muted); transition: color .2s var(--ease); }
.f-links svg { width: 6px; height: 10px; }
@media (hover: hover) { .f-links a:hover { color: var(--brand-grey); } }
.f-links a:active { color: var(--brand-grey); }
.f-office address { font-style: normal; }
.f-office .line { display: block; }
.f-phone { display: inline-block; margin-top: 6px; padding-block: 10px; }
/* Phone numbers and email: same colour as surrounding text, no underline, on every device (STD-22) */
a[href^="tel:"], a[href^="mailto:"], a[x-apple-data-detectors] {
  color: inherit !important; text-decoration: none !important; font: inherit; -webkit-text-fill-color: currentColor;
}
.footer-bottom { margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-wrap: wrap; gap: 6px 0.7em; font-family: var(--font-display); font-size: 10px; letter-spacing: var(--track-label); text-transform: uppercase; }
.footer-bottom a { display: inline-block; padding-block: 8px; margin-block: -8px; text-decoration: none; transition: color .2s var(--ease); }
@media (hover: hover) { .footer-bottom a:hover { color: var(--brand-grey); } }

/* ---------- Motion (quiet; off for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero picture img { animation: hero-settle 1.8s var(--ease) both; }
  @keyframes hero-settle { from { transform: scale(1.045); } to { transform: none; } }
  /* Hero panel: rises up out of the bottom edge of the photo (tablet and laptop) or lifts into place (phone), once the photo has loaded */
  .motion .hero-panel { transform: translateY(48px); opacity: 0; transition: transform 1.3s var(--ease), opacity .9s var(--ease); }
  @media (min-width: 640px) { .motion .hero-panel { transform: translateY(101%); opacity: 1; } }
  .motion.hero-in .hero-panel { transform: none; opacity: 1; }
  /* Scroll reveals: only when script runs, so the page is complete without it */
  .motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
  .motion .card.reveal { transition: opacity .9s var(--ease), transform .9s var(--ease), background-color .35s var(--ease), color .35s var(--ease); }
  .motion .reveal.in { opacity: 1; transform: none; }
  /* Batch stagger: items that arrive together follow one another (--d is set by script on inner pages) */
  .motion .reveal { transition-delay: var(--d, 0s); }
  .motion .card.reveal { transition: opacity .9s var(--ease) var(--d, 0s), transform .9s var(--ease) var(--d, 0s), background-color .35s var(--ease), color .35s var(--ease); }
  /* Text groups on inner pages: the group holds still and its pieces rise in turn; a heading's grey line follows its white line */
  .motion .reveal.stagger { opacity: 1; transform: none; }
  .motion .stagger .piece { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * .11s); }
  .motion .stagger.in .piece { opacity: 1; transform: none; }
  .motion .stagger h2 .t2 { opacity: 0; transition: opacity 1.1s var(--ease) calc(var(--d, 0s) + var(--i, 0) * .11s + .28s); }
  .motion .stagger.in h2 .t2 { opacity: 1; }
  /* Card logo frame opens from the centre outwards, once, as the card arrives */
  .motion .card .lines { clip-path: inset(0 50% 0 50%); transition: clip-path 1.8s var(--ease) .3s, opacity .35s var(--ease); }
  .motion .card.in .lines { clip-path: inset(0 0 0 0); }
}

/* Touch screens: links and buttons show their colour change while pressed */
@media (hover: none) {
  .cta:active { background: var(--ink); border-color: var(--ink); color: var(--on-grey); }
  .text-link:active, .nav a:active, .f-links a:active, .footer-bottom a:active { color: var(--brand-grey); }
}

/* Smoother scroll reveals below laptop width: shorter rise, quicker settle, so text keeps pace with a finger (Anthony, 3 Nov 2026) */
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px) {
  .motion .reveal { transform: translateY(16px); transition-duration: .7s; }
  .motion .card.reveal { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s), background-color .35s var(--ease), color .35s var(--ease); }
  .motion .reveal.in { transform: none; }
  .motion .reveal.stagger { transform: none; }
  .motion .stagger .piece { transform: translateY(14px); transition: opacity .7s var(--ease), transform .75s var(--ease); transition-delay: calc(var(--d, 0s) + var(--i, 0) * .07s); }
  .motion .stagger.in .piece { transform: none; }
  .motion .stagger h2 .t2 { transition: opacity .8s var(--ease) calc(var(--d, 0s) + var(--i, 0) * .07s + .18s); }
}

/* Square cursor (laptop and desktop only): a small grey square that reads on every background, as on the current site but smaller (Anthony, 3 Nov 2026) */
.sq-cursor, .sq-cursor * { cursor: none !important; }
.sq-cursor input, .sq-cursor textarea, .sq-cursor select { cursor: text !important; }
.sq-cursor select, .sq-cursor input[type="checkbox"] { cursor: default !important; }
.cursor-sq {
  position: fixed; left: 0; top: 0; z-index: 9999; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: #a3acb0; mix-blend-mode: difference; pointer-events: none; opacity: 0;
  transition: opacity .2s var(--ease), width .2s var(--ease), height .2s var(--ease), margin .2s var(--ease);
}
.cursor-sq.on { opacity: 1; }
.cursor-sq.link { width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.cursor-sq.text { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor-sq { display: none; } }

/* Phone header (option D, Anthony 3 Nov 2026): MENU beside the logo's stepped bars, grey then white; CLOSE and a cross when open.
   MENU matches the letter height of BLOCX MATRIX in the logo (7.7px capitals = Syncopate at 11.3px). Contact us lives in the menu. */
.mb-word, .mb-bars { display: none; }
@media (max-width: 639px) {
  .header-contact { display: none; }
  .menu-btn { width: auto; margin-left: auto; margin-right: -6px; padding: 0 6px; display: inline-flex; align-items: center; gap: 12px; }
  .menu-btn .mb-burger { display: none; }
  .mb-word { display: block; font-family: var(--font-display); font-weight: 400; font-size: 11.3px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; -webkit-text-stroke: 0.35px currentColor; }
  .mb-close { display: none; }
  .menu-open .mb-open { display: none; } .menu-open .mb-close { display: inline; }
  .mb-bars { display: grid; width: 20px; gap: 4px; }
  .mb-bars i { display: block; height: 1.5px; margin-left: auto; background: linear-gradient(90deg, #808080 0 58%, #fff 58% 100%); transition: transform .35s var(--ease), width .35s var(--ease), opacity .2s; }
  .mb-bars i:nth-child(1) { width: 20px; } .mb-bars i:nth-child(2) { width: 14px; } .mb-bars i:nth-child(3) { width: 8px; }
  .menu-open .mb-bars i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); width: 17px; }
  .menu-open .mb-bars i:nth-child(2) { opacity: 0; }
  .menu-open .mb-bars i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); width: 17px; }
  .menu-btn:active .mb-word { color: var(--brand-grey); }
  /* Open menu: lighter, smaller capitals so the list sits quietly under the header */
  .mobile-menu a, .mobile-menu button { min-height: 54px; font-weight: 400; font-size: 13px; letter-spacing: 0.14em; }
  .mobile-menu .m-sub a { min-height: 44px; font-size: 11px; }
  .mobile-menu .m-contact { font-weight: 700; font-size: 11px; }
}

/* =========================================================================
   Inner pages. Same tokens, type and spacing as the homepage (Look D).
   ========================================================================= */

/* ---------- Inner page hero (Register STD-25, STD-28) ----------
   Laptop and tablet: full-screen photo, eyebrow, heading, text and button at the bottom left over a gradient.
   Phone: photo fills about three-quarters of the screen with logo, eyebrow and heading on it;
   text and button sit below on the page colour. */
.page-hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
}
.ph-media { grid-area: 1 / 1; position: relative; overflow: hidden; height: 76svh; min-height: 420px; z-index: -1; }
.ph-media picture, .ph-media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ph-media img { object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.ph-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, var(--bg) 0%, rgba(21,21,21,0.96) 24%, rgba(21,21,21,0.82) 40%, rgba(21,21,21,0.45) 58%, rgba(21,21,21,0) 78%);
}
/* Heading to body uses the standard gap (--head-gap); the gradient ends in the page colour, so the photo edge does not show */
.ph-top { grid-area: 1 / 1; align-self: end; }
.ph-rest { grid-area: 2 / 1; padding-top: var(--head-gap); }
/* NTU logo: the supplied artwork unchanged, sized to sit level with the Blocx Matrix logo visually (its lettering is lighter) */
.ph-logo { display: block; height: 48px; width: auto; margin-bottom: var(--s-4); }
.page-hero h1 { font-size: var(--fs-h1); line-height: 1.18; }
.page-hero .lead { max-width: 60ch; }
.page-hero .cta { margin-top: var(--s-4); }

@media (min-width: 640px) {
  .page-hero {
    grid-template-rows: minmax(var(--s-7), 1fr) auto auto;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px));
  }
  .ph-media { grid-area: 1 / 1 / 4 / 2; height: auto; min-height: 0; }
  .ph-media::after {
    background:
      linear-gradient(to top, var(--bg) 0%, rgba(21,21,21,0.94) 30%, rgba(21,21,21,0.84) 46%, rgba(21,21,21,0.3) 62%, rgba(21,21,21,0) 76%),
      linear-gradient(to right, rgba(21,21,21,0.8) 0%, rgba(21,21,21,0.6) 40%, rgba(21,21,21,0.15) 68%, rgba(21,21,21,0) 85%);
  }
  .ph-top { grid-area: 2 / 1; padding-bottom: 0; }
  .ph-rest { grid-area: 3 / 1; padding-top: var(--head-gap); padding-bottom: 0; }
  /* The first screen ends at the body text; the button sits just under the fold (Anthony, 2 Nov 2026).
     The hero runs 60px past the screen: the 52px button plus a margin so its edge does not peek. */
  .page-hero { min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) + 60px); }
  .page-hero .lead { max-width: 62ch; }
}
@media (min-width: 1100px) { .ph-logo { height: 62px; } }
/* Short laptop screens: a tighter top so the heading and text still fit the first screen */
@media (min-width: 1024px) and (max-height: 760px) {
  .page-hero { grid-template-rows: minmax(var(--s-4), 1fr) auto auto; }
  .ph-logo { margin-bottom: var(--s-3); }
}

/* Arrival: the photograph fades up and settles, then logo, eyebrow, heading (white line, then grey), text and button follow in turn.
   Replays on every visit, including a return with the back button. */
@media (prefers-reduced-motion: no-preference) {
  .motion .ph-media img { opacity: 0; transform: scale(1.06); }
  .motion.hero-in .ph-media img { opacity: 1; transform: none; transition: opacity 1.2s var(--ease), transform 2.6s var(--ease); }
  .motion .page-hero .piece { opacity: 0; transform: translateY(26px); }
  .motion.hero-in .page-hero .piece { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: calc(.35s + var(--i, 0) * .13s); }
  .motion .page-hero h1 .t2 { opacity: 0; }
  .motion.hero-in .page-hero h1 .t2 { opacity: 1; transition: opacity 1.1s var(--ease) calc(.6s + var(--i, 0) * .13s); }
}

/* ---------- Section building blocks ---------- */
.prose { display: grid; gap: var(--s-3); max-width: 64ch; }
.stack-head .prose { margin-top: var(--head-gap); }

/* Four or three equal columns: phone one column, tablet two, laptop four or three */
.cols { display: grid; gap: var(--s-5) var(--s-4); }
@media (min-width: 640px) { .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; } .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; } }
.item h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.3;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink);
}
@media (min-width: 640px) { .item h3 { font-size: var(--fs-card); } }
.item p { margin-top: var(--s-2); }
.cols-3 .item { border-top: 1px solid var(--line); padding-top: var(--s-3); }

/* Numbered rows (How they are taught, What you get): each number carries a rule that runs to the next item;
   the last in each row runs to the edge of the text frame. Two across on tablet, four (or three) across on laptop. */
.stages { list-style: none; margin-inline: 0; margin-bottom: 0; padding: 0; display: grid; gap: var(--s-5) 0; }
.stage-num {
  display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-3);
  font-family: var(--font-display); font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--brand-grey);
}
.stage-num::after { content: ""; flex: 1; height: 1px; background: var(--line); }
@media (min-width: 640px) {
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage { padding-right: 32px; }
  .stage .stage-num::after { margin-right: -8px; }
  .stage:nth-child(2n) { padding-right: 0; }
  .stage:nth-child(2n) .stage-num::after { margin-right: 0; }
}
@media (min-width: 1100px) {
  .stages { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stage:nth-child(2n) { padding-right: 32px; }
  .stage:nth-child(2n) .stage-num::after { margin-right: -8px; }
  .stage:nth-child(4n) { padding-right: 0; }
  .stage:nth-child(4n) .stage-num::after { margin-right: 0; }
  .stages-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stages-3 .stage:nth-child(4n) { padding-right: 32px; }
  .stages-3 .stage:nth-child(4n) .stage-num::after { margin-right: -8px; }
  .stages-3 .stage:nth-child(3n) { padding-right: 0; }
  .stages-3 .stage:nth-child(3n) .stage-num::after { margin-right: 0; }
}
.stage h3 { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); line-height: 1.3; }
@media (min-width: 640px) { .stage h3 { font-size: var(--fs-card); } }
.stage p { margin-top: var(--s-2); }

/* Expandable detail (CSPARr) and questions: native details, no script needed */
.more { margin-top: var(--s-3); }
.more summary, .faq summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.more summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.more summary {
  display: inline-flex; align-items: center; gap: 10px; padding-block: 10px; margin-block: -10px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink);
  transition: color .25s var(--ease);
}
.more summary svg, .faq summary svg { width: 12px; height: 8px; flex: none; transition: transform .25s var(--ease); }
.more[open] summary svg, .faq details[open] summary svg { transform: rotate(180deg); }
@media (hover: hover) { .more summary:hover { color: var(--brand-grey); } }
.more p { margin-top: var(--s-2); }

.faq { border-top: 1px solid var(--line); max-width: 920px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding-block: 22px; font-family: var(--font-body); font-weight: 600; color: var(--ink); line-height: 1.5;
  transition: color .2s var(--ease);
}
@media (hover: hover) { .faq summary:hover { color: var(--brand-grey); } }
.faq details p { padding-bottom: var(--s-4); max-width: 68ch; margin-top: -6px; }

/* Image at the width of the text frame (STD-24) */
.frame-img { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface-2); }
.frame-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
@media (min-width: 640px) { .frame-img { aspect-ratio: 16 / 9; } }

/* Card grids beyond the homepage: same card, three per row on laptop, two on tablet */
.card-grid { display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.card.card-title h3 { font-size: 16px; line-height: 1.35; }
@media (min-width: 640px) { .card.card-title h3 { font-size: var(--fs-card); } }

/* Two-column text without a heading split */
.two-col { display: grid; gap: var(--s-4); }
@media (min-width: 1024px) { .two-col { grid-template-columns: 1fr 1fr; column-gap: clamp(48px, 7vw, 120px); align-items: start; } }

/* Format and cost: halves matching the two columns of Assessment below, so its text lines up with the second column */
@media (min-width: 1024px) { .split.split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Heading on two lines where the column and its gap allow it (the grey line runs about 15px wider than the column at 1300px and up) */
@media (min-width: 1300px) { .split-even .h .t2 { white-space: nowrap; } }
/* BML Delivery, The advantage: the same even split, so the grey line holds on one row */

/* Split sections whose right column holds several paragraphs */
.split .body .prose { max-width: 64ch; }

/* Card frame on arrival: the outline opens from the centre as a bright line, then settles to its resting tone */
@media (prefers-reduced-motion: no-preference) {
  .motion .card .lines { transition: clip-path 2.2s var(--ease) .45s, opacity .35s var(--ease); }
  .motion .card .lines use { stroke: rgba(255,255,255,0.6); transition: stroke 1.4s var(--ease) 2.3s; }
  .motion .card.in .lines use { stroke: var(--graphic); }
}

/* Insights cards: article photo fills the 3:2 frame */
.post-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
@media (hover: hover) { .post:hover .post-media img { transform: scale(1.03); } }

/* Heading straight to body text inside a section (same gap as heading to body everywhere) */
.head-gap { margin-top: var(--head-gap); }

/* Questions: titles in Syncopate Regular capitals (Anthony chose the lighter weight, 2 Nov 2026) */
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 68px; padding-block: 18px;
  font-family: var(--font-display); font-weight: 400; font-size: 14px; line-height: 1.45; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); transition: color .2s var(--ease);
}
@media (min-width: 640px) { .faq summary { font-size: 15px; } }
@media (hover: hover) { .faq summary:hover { color: var(--brand-grey); } }
.faq details p { margin-top: -4px; }

/* Who they are for: four across on one plane, chevron before each title, divided by vertical rules that fade out at both ends.
   Tablet and below 1100px: two across, one faded rule between. Phone: stacked, faded horizontal rules between. */
.leaders { --fade: rgba(255,255,255,0.26); display: grid; }
.leader { position: relative; padding-block: var(--s-4); }
.leader:first-child { padding-top: 0; }
.leader:last-child { padding-bottom: 0; }
.leader + .leader::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--fade) 22%, var(--fade) 78%, transparent);
}
.leader h3 { display: flex; align-items: baseline; gap: 14px; font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); }
.leader h3 svg { width: 7px; height: 12px; flex: none; color: var(--brand-grey); transform: translateY(1px); }
.leader p { margin-top: 12px; padding-left: 21px; max-width: 34ch; }
@media (min-width: 640px) {
  .leaders { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-5); }
  .leader, .leader:first-child, .leader:last-child { padding: 0 var(--s-5) 0 0; }
  .leader:nth-child(2n) { padding: 0 0 0 var(--s-5); }
  .leader + .leader::before { display: none; }
  .leader:nth-child(2n)::before {
    display: block; content: ""; position: absolute; left: 0; right: auto; top: -16px; bottom: -16px; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--fade) 25%, var(--fade) 75%, transparent);
  }
}
@media (min-width: 1100px) {
  .leaders { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .leader, .leader:nth-child(2n) { padding: 0 var(--s-4); }
  .leader:first-child { padding-left: 0; }
  .leader:last-child { padding-right: 0; }
  .leader:nth-child(n+2)::before {
    display: block; content: ""; position: absolute; left: 0; right: auto; top: -16px; bottom: -16px; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--fade) 25%, var(--fade) 75%, transparent);
  }
  .leader p { max-width: 30ch; }
  /* Four across: every title breaks the same way, so the row reads level */
  .leader .lw { display: block; }
}
@media (min-width: 1300px) { .leader h3 { font-size: var(--fs-card); } }

/* The programmes opens on the campus photograph (text-frame width, STD-24): the heading sits on its lower edge,
   and the photo fades into the page colour, so the image belongs to the section rather than standing alone. */
.po-media { position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--surface-2); }

.po-media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
.po-media::after {
  content: ""; position: absolute; inset: 0;
  /* Eased stops: the shade holds behind the heading, then thins out gradually, so no edge shows where it ends */
  background: linear-gradient(to top, rgba(21,21,21,1) 0%, rgba(21,21,21,0.9) 30%, rgba(21,21,21,0.875) 35.2%, rgba(21,21,21,0.806) 40.4%, rgba(21,21,21,0.706) 45.6%, rgba(21,21,21,0.583) 50.8%, rgba(21,21,21,0.45) 56.0%, rgba(21,21,21,0.317) 61.2%, rgba(21,21,21,0.194) 66.4%, rgba(21,21,21,0.094) 71.6%, rgba(21,21,21,0.025) 76.8%, rgba(21,21,21,0.0) 82.0%);
}
/* Laptop: the shade gathers behind the heading at the lower left and clears to the right, so the buildings read */
@media (min-width: 1024px) {
  .po-media::after {
    background:
      linear-gradient(to top, rgba(21,21,21,1) 0%, rgba(21,21,21,0.88) 7%, rgba(21,21,21,0.855) 11.9%, rgba(21,21,21,0.788) 16.8%, rgba(21,21,21,0.69) 21.7%, rgba(21,21,21,0.57) 26.6%, rgba(21,21,21,0.44) 31.5%, rgba(21,21,21,0.31) 36.4%, rgba(21,21,21,0.19) 41.3%, rgba(21,21,21,0.092) 46.2%, rgba(21,21,21,0.025) 51.1%, rgba(21,21,21,0.0) 56.0%),
      radial-gradient(140% 100% at 0% 100%, rgba(21,21,21,0.9) 34%, rgba(21,21,21,0.875) 40.6%, rgba(21,21,21,0.806) 47.2%, rgba(21,21,21,0.706) 53.8%, rgba(21,21,21,0.583) 60.4%, rgba(21,21,21,0.45) 67.0%, rgba(21,21,21,0.317) 73.6%, rgba(21,21,21,0.194) 80.2%, rgba(21,21,21,0.094) 86.8%, rgba(21,21,21,0.025) 93.4%, rgba(21,21,21,0.0) 100.0%);
  }
}
.po-head { position: relative; margin-top: -9.5rem; }
@media (min-width: 640px) { .po-media { aspect-ratio: 16 / 9; } .po-head { margin-top: -10rem; } }
@media (min-width: 1024px) { .po-media { aspect-ratio: 21 / 9; } .po-head { margin-top: -11rem; } }
/* Phone: the original 4:5 crop, with the frame trimmed from the top so less sky shows; nothing else moves (Anthony, 2 Nov 2026) */
@media (max-width: 639px) {
  .po-media { aspect-ratio: 1 / 1.08; }
  .po-media img { object-position: 50% 100%; }
  /* The heading overlaps less of the photo, so the buildings show above it */
  .po-media::after { background: linear-gradient(to top, rgba(21,21,21,1) 0%, rgba(21,21,21,0.9) 16%, rgba(21,21,21,0.875) 20.2%, rgba(21,21,21,0.806) 24.4%, rgba(21,21,21,0.706) 28.6%, rgba(21,21,21,0.583) 32.8%, rgba(21,21,21,0.45) 37.0%, rgba(21,21,21,0.317) 41.2%, rgba(21,21,21,0.194) 45.4%, rgba(21,21,21,0.094) 49.6%, rgba(21,21,21,0.025) 53.8%, rgba(21,21,21,0.0) 58.0%); }
  .po-head { margin-top: -5.5rem; }
}

/* The programmes: body text runs the full width of the text frame (Anthony, 2 Nov 2026) */
.page-hero ~ .section .lead.lead-full { max-width: none; }
.lead.lead-full { text-wrap: pretty; }

/* ---------- Service pages (BML Advisory, BML Delivery, BML Academy) ---------- */
/* Hero without a button: the first screen ends 32px below the body text, and the next section follows at the standard 128px */
@media (min-width: 640px) {
  .page-hero.no-cta { min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) - 32px); }
}
/* Three numbered rows (BML Delivery, How we engage): one column, lines full width, until there is room for three across */
@media (min-width: 640px) and (max-width: 1099px) {
  .stages.trio { grid-template-columns: minmax(0, 1fr); }
  .stages.trio .stage, .stages.trio .stage:nth-child(2n) { padding-right: 0; }
  .stages.trio .stage .stage-num::after { margin-right: 0; }
  .stages.trio .stage p { max-width: 64ch; }
}
/* The collaboration (BML Academy): a full-width band in the surface colour, the bridge to the CPD with NTU page */
.section.band { background: var(--surface); padding-block: var(--section); }
.section.band + .section { padding-top: var(--section); }
.band .body .cta { margin-top: var(--s-2); }

/* A long eyebrow on its own line (BML Academy band): heading and text start level beneath it */
@media (min-width: 1024px) { .split.split-level .body { padding-top: 0; } }
/* Service pages, tablet: the section head starts at the top of its cell, so every section opens the same distance below the one before */
.page-hero ~ .section .engage .section-head { align-self: start; padding-top: 0; }

/* Service page cards (What we do pages): the homepage card shape, and every card in a set the same height on every screen,
   phone included, set by the card with the most text (Anthony, 2 Nov 2026). Homepage and CPD cards are not affected. */
/* Every page (homepage and CPD with NTU from 2 Nov 2026): every card in a set the same height, set by the card with the most text */
.engage, .card-grid { grid-auto-rows: 1fr; }
/* Every page: where a card grows to fit its text, the cards beside it grow with it, so a row stays level */
.engage > .card, .card-grid > .card { align-self: stretch; justify-self: stretch; min-width: 0; }
@media (max-width: 639px), (min-width: 1200px) { .engage { grid-template-rows: auto; } }
/* No single word left alone on the last line of card text */
.card p { text-wrap: pretty; }
.nw { white-space: nowrap; }

/* Service pages on phone: the whole hero text shows on the first screen. The photo takes the space the text leaves,
   and the first screen ends 24px below the text (Anthony, 2 Nov 2026). Phone photos are cropped lower on the building, so less sky shows. */
@media (max-width: 639px) {
  .page-hero.no-cta {
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: calc(100vh - var(--header-h) - 24px);
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) - 24px);
  }
  .page-hero.no-cta .ph-media { height: auto; min-height: 300px; }
}

/* Every page on phone: the grey line of a two-tone heading starts on its own line, as on tablet and laptop (Anthony, 2 Nov 2026) */
.h .t1, .h .t2 { display: block; }

/* ---------- About page ---------- */
/* Portrait grid shared by Leadership and the advisory board, so Anthony's portrait is exactly the advisers' size (ABOUT-02):
   two across on phone, three on tablet, five on laptop */
.leadership, .people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-2); }
.people { row-gap: var(--s-5); }
@media (min-width: 640px) { .leadership, .people { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-3); } }
@media (min-width: 1100px) { .leadership, .people { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--s-4); } }

/* Leadership. Phone: eyebrow, heading, portrait and caption, text (Build Brief v16).
   Tablet and laptop: the portrait beside the text, the top of its frame level with the top of the LEADERSHIP eyebrow (ABOUT-08) */
.ld-head, .ld-body { grid-column: 1 / -1; }
.person.ld-photo { grid-column: 1 / 2; margin-block: var(--head-gap) 0; }
.ld-photo + .ld-body { margin-top: var(--s-4); }
@media (min-width: 640px) {
  .leadership { grid-template-rows: auto 1fr; align-items: start; }
  .person.ld-photo { grid-column: 1 / 2; grid-row: 1 / 3; margin: 5px 0 0;  /* the eyebrow line box sits 5px above its capitals */ align-self: start; }
  .ld-head, .ld-body { grid-column: 2 / -1; padding-left: clamp(16px, 4vw, 72px); }
  .ld-head { grid-row: 1; }
  .ld-photo + .ld-body { grid-row: 2; margin-top: var(--head-gap); }
  .ld-body.prose { align-content: start; }
}
@media (min-width: 1100px) { .ld-head, .ld-body { grid-column: 2 / 5; } }
.ld-body.prose { max-width: 64ch; }

/* A person: framed square portrait, name in Syncopate capitals, then title or two specialisations, all aligned left (ABOUT-21, ABOUT-22).
   Frame: a hairline in the eyebrow grey, 8px out from the photo, like a mount; it turns to the site grey on hover with the photo */
.person { margin: 0; min-width: 0; }
.person-frame { display: block; padding: 8px; border: 1px solid rgba(163,172,176,0.38); transition: border-color .35s var(--ease); -webkit-tap-highlight-color: transparent; }
.person-photo { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--surface-2); }
.person-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Hover and tap: the portrait turns to the site grey, as the cards do, and shows the LinkedIn mark */
.person-photo::after { content: ""; position: absolute; inset: 0; background: var(--brand-grey); opacity: 0; transition: opacity .35s var(--ease); }
.li-mark { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; color: var(--on-grey); opacity: 0; transition: opacity .35s var(--ease); }
.li-mark svg { width: 28px; height: 28px; }
@media (hover: hover) {
  .person-frame:hover { border-color: var(--brand-grey); }
  .person-frame:hover .person-photo::after { opacity: .88; }
  .person-frame:hover .li-mark { opacity: 1; }
}
.person-frame:focus-visible .person-photo::after, .person-frame:active .person-photo::after { opacity: .88; }
.person-frame:focus-visible .li-mark, .person-frame:active .li-mark { opacity: 1; }
.person figcaption { margin-top: var(--s-3); display: grid; gap: 8px; }
.person .pn { font-family: var(--font-display); font-weight: 700; font-size: 14px; line-height: 1.35; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.person .pr { font-size: 14px; line-height: 1.5; color: var(--ink-muted); }

/* The record: three figures, no cards (ABOUT-04). Laptop three across with faded vertical dividers; tablet and phone stacked with faded horizontal rules, labels 18px (ABOUT-13) */
.figures { --fade: rgba(255,255,255,0.26); list-style: none; margin-inline: 0; margin-bottom: 0; padding: 0; display: grid; }
.figure { position: relative; display: grid; gap: var(--s-2); padding-block: var(--s-4); }
.figure:first-child { padding-top: 0; }
.figure:last-child { padding-bottom: 0; }
.figure + .figure::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--fade), var(--fade) 60%, transparent); }
.fig-n { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, calc(24px + 1.6vw), 46px); line-height: 1; letter-spacing: 0.01em; color: var(--ink); }
.fig-l { font-family: var(--font-display); font-weight: 400; font-size: 18px; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-body); }
@media (min-width: 1024px) {
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .figure, .figure:first-child, .figure:last-child { padding: 0 var(--s-5); }
  .figure:first-child { padding-left: 0; }
  .figure:last-child { padding-right: 0; }
  .figure + .figure::before { left: 0; right: auto; top: -16px; bottom: -16px; width: 1px; height: auto; background: linear-gradient(180deg, transparent, var(--fade) 25%, var(--fade) 75%, transparent); }
  .fig-l { font-size: 15px; }
}

/* Co-Founder stays whole; each specialisation sits on its own line */
.pr .seg { display: inline-block; }
.pr .spec { display: block; line-height: 1.4; }
.pr .spec + .spec { margin-top: 6px; }

/* A hyphenated name moves to the next line whole */
.pn .seg { display: inline-block; }

/* About on phone: the whole hero text shows on the first screen, as on tablet and laptop; the button sits just below it, past the fold.
   The photo takes the space the text leaves, and its shade covers only the part behind the heading, so the concrete keeps its contrast */
@media (max-width: 639px) {
  .page-hero.fit {
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: calc(100vh - var(--header-h) + 60px);
    min-height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) + 60px);
  }
  .page-hero.fit .ph-media { height: auto; min-height: 300px; }
  .page-hero.fit .ph-media img { object-position: 50% 100%; }
  .page-hero.fit .ph-media::after { background: linear-gradient(to top, rgba(21,21,21,1) 0%, rgba(21,21,21,0.92) 12%, rgba(21,21,21,0.86) 22%, rgba(21,21,21,0.74) 30%, rgba(21,21,21,0.56) 38%, rgba(21,21,21,0.36) 46%, rgba(21,21,21,0.19) 54%, rgba(21,21,21,0.07) 62%, rgba(21,21,21,0) 70%); }
}

/* ---------- Programme pages (PROG-08, PROG-14) ---------- */
/* Title on the page colour, then the programme image: text-frame width and the full screen height below the header on tablet and laptop;
   full screen width at 4:5 on phone. Cropped to its focal point, never stretched, no text on it */
.section.prog-head { padding-top: clamp(40px, calc(20px + 5vw), 96px); }
.prog-head h1 { font-size: var(--fs-h1); line-height: 1.18; }
/* Phone: the long programme titles at the section-heading size, so a title does not fill the screen */
@media (max-width: 639px) { .prog-head h1 { font-size: var(--fs-h); line-height: 1.22; } }
.prog-media-wrap { margin-top: var(--s-5); }
@media (min-width: 1024px) { .prog-media-wrap { margin-top: var(--s-6); } }
.prog-media { position: relative; margin: 0; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--surface-2); }
.prog-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
@media (max-width: 639px) { .prog-media-wrap { padding-left: 0; padding-right: 0; } }
@media (min-width: 640px) {
  .prog-media { aspect-ratio: auto; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px)); min-height: 420px; }
}
@media (prefers-reduced-motion: no-preference) {
  .motion .prog-media img { opacity: 0; transform: scale(1.04); }
  .motion.hero-in .prog-media img { opacity: 1; transform: none; transition: opacity 1.2s var(--ease), transform 2.6s var(--ease); }
  .motion .prog-head .piece { opacity: 0; transform: translateY(26px); }
  .motion.hero-in .prog-head .piece { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); transition-delay: calc(.2s + var(--i, 0) * .13s); }
  .motion .prog-head h1 .t2 { opacity: 0; }
  .motion.hero-in .prog-head h1 .t2 { opacity: 1; transition: opacity 1.1s var(--ease) calc(.45s + var(--i, 0) * .13s); }
}

/* The case for the programme: the opening line large on the left, the argument on the right (the split used across the site) */
.hook { font-family: var(--font-body); font-weight: 500; font-size: clamp(19px, calc(14px + 0.9vw), 24px); line-height: 1.45; color: var(--ink); max-width: 30ch; text-wrap: pretty; }
.prog-intro .prose { max-width: 64ch; }

/* Course content: heading left, content right, aligned with the paragraphs above; a hairline between rows */
.prog-details { display: grid; }
.pd-row { display: grid; gap: var(--s-3); padding-block: var(--s-5); border-top: 1px solid var(--line); }
.pd-row:first-child { padding-top: 0; border-top: 0; }
@media (min-width: 1024px) { .pd-row { grid-template-columns: 5fr 6fr; column-gap: clamp(48px, 7vw, 120px); padding-block: var(--s-6); } .pd-row:first-child { padding-top: 0; } }
.pd-h { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
@media (min-width: 640px) { .pd-h { font-size: var(--fs-card); } }
.pd-body { max-width: 64ch; display: grid; gap: var(--s-3); }
.pd-lead { color: var(--ink-body); }
/* Bullets (STD-10, PROG-04): a small grey square, the same gap to the text on every list, text a step smaller than running text */
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.6; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 6px; height: 6px; background: var(--brand-grey); }
.ticks strong { font-weight: 600; color: var(--ink); }
/* Back to all programmes (PROG-09): the text-link style, arrow pointing left */
.back-row { padding-top: var(--s-5); border-top: 1px solid var(--line); }
@media (min-width: 1024px) { .back-row { padding-top: var(--s-6); } }
@media (hover: hover) { .text-link.back:hover svg { transform: translateX(-3px); } }

/* ---------- Programme page trial layout (.v2, Strategic Execution Leadership) ---------- */
/* Tablet and laptop: eyebrow, title and the whole photograph fit the first screen; the photo takes the height the title leaves, ending 32px above the fold */
@media (min-width: 640px) {
  .v2.prog-head { padding-top: var(--s-4); }
  .v2.prog-head h1 { font-size: var(--fs-h); line-height: var(--lh-head); }
  .v2 .ph-fit { display: flex; flex-direction: column; height: calc(100vh - var(--header-h) - var(--s-4) - 32px); height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) - var(--s-4) - 32px); min-height: 520px; }
  .v2 .prog-media-wrap { flex: 1 1 auto; min-height: 0; margin-top: var(--s-4); }
  .v2 .prog-media { height: 100%; min-height: 0; }
}
/* The opening line in Syncopate capitals, as a statement */
.v2 .hook { font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.45; letter-spacing: 0.05em; text-transform: uppercase; max-width: 32ch; }
@media (min-width: 640px) { .v2 .hook { font-size: 18px; } }
@media (min-width: 1024px) { .v2 .prog-intro .body { padding-top: 0; } }
/* Numbered rows: number, then a line across the full text frame; heading left, content right, starting on the same line */
.v2 .pd-row, .v2 .pd-row:first-child { border-top: 0; padding-block: 0; }
.v2 .pd-row + .pd-row { margin-top: var(--s-6); }
.v2 .pd-num { grid-column: 1 / -1; margin-bottom: var(--s-3); }
@media (min-width: 1024px) { .v2 .pd-row { row-gap: 0; } .v2 .pd-row + .pd-row { margin-top: var(--s-7); } .v2 .pd-h { padding-top: 2px; } }
.v2 .back-row { border-top: 0; padding-top: var(--s-6); }
@media (min-width: 1024px) { .v2 .back-row { padding-top: var(--s-7); } }

/* Trial, round 2: the opening line's baseline level with the first line of the paragraphs beside it; all course content at one size */
@media (min-width: 1024px) { .v2 .hook { padding-top: 2px; } }
.v2 .pd-body p { font-size: 16px; line-height: 1.6; }

/* Layout B (preview switch): each section stacks number and line, heading, then its content directly beneath; lists in two columns on laptop */
@media (min-width: 1024px) {
  .v2 .pd-row { grid-template-columns: minmax(0, 1fr); }
  .v2 .pd-h { padding-top: 0; margin-bottom: var(--head-gap); }
  .v2 .pd-body { max-width: none; }
  .v2 .pd-body > p { max-width: 64ch; }
  .v2 .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(48px, 6vw, 96px); row-gap: 18px; align-items: start; }
  .v2 .ticks li { max-width: 58ch; }
}

/* Stacked rows (phone and tablet, and Layout B): number, then 24px, heading, then the standard heading-to-text gap */
.v2 .pd-row { row-gap: 0; }
.v2 .pd-h { margin-bottom: var(--head-gap); }

/* Programme pages, tablet and laptop: a faded line under the opening line, ending in fades like the client reel, so the statement is anchored (Anthony, 2 Nov 2026) */
@media (min-width: 640px) {
  .v2 .hook::after { content: ""; display: block; height: 1px; margin-top: var(--s-4); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.26) 18%, rgba(255,255,255,0.26) 82%, transparent); }
}

/* Programme pages on phone: eyebrow, title and the whole photograph on the first screen, as on tablet and laptop; the photo runs edge to edge and takes the height the title leaves */
@media (max-width: 639px) {
  .v2.prog-head { padding-top: var(--s-3); }
  .v2 .ph-fit { display: flex; flex-direction: column; height: calc(100vh - var(--header-h) - var(--s-3) - 24px); height: calc(100svh - var(--header-h) - env(safe-area-inset-top, 0px) - var(--s-3) - 24px); min-height: 440px; }
  .v2 .prog-media-wrap { flex: 1 1 auto; min-height: 0; margin-top: var(--s-4); }
  .v2 .prog-media { aspect-ratio: auto; height: 100%; min-height: 220px; }
}

/* ---------------------------------------------------------------- Insights (Brief Page 8, INS-01 to INS-06)
   Index: the homepage card treatment. On tablet the homepage rows (image left, text right), not two across,
   so three articles never leave one card alone. Articles: the programme-page head, then one reading column. */
.insights-index { margin-top: 0; gap: var(--s-5); }
@media (min-width: 1024px) { .insights-index { row-gap: var(--s-6); } }
.art-head .art-date { margin-top: var(--s-2); color: var(--ink-muted); }
.art-body { max-width: 68ch; }
.art-body > * + * { margin-top: var(--s-3); }
.art-body p { font-size: var(--fs-body); line-height: 1.7; }
.art-body > .art-h { margin-top: var(--s-6); font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.45; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); max-width: 36ch; text-wrap: balance; }
.art-body > .art-h + * { margin-top: var(--s-3); }
.art-body > .art-pull { margin-block: var(--s-5); font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.45; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-grey); max-width: 30ch; text-wrap: balance; }
.art-body > .art-pull + .art-h { margin-top: var(--s-5); }
@media (min-width: 640px) { .art-body > .art-h { font-size: 18px; } .art-body > .art-pull { font-size: 20px; } }
.art-body .ticks li { font-size: var(--fs-body); line-height: 1.7; }
.art-body .ticks li::before { top: 0.72em; }
.art-ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: n; }
.art-ol li { counter-increment: n; position: relative; padding-left: 40px; font-size: var(--fs-body); line-height: 1.7; }
.art-ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0.42em; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-label); letter-spacing: var(--track-label); color: var(--brand-grey); line-height: 1.4; }
.art-body > .art-meta { font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.art-body > .art-note { margin-top: var(--s-3); }
.art-body > .art-go { margin-top: var(--s-4); }
.in-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--brand-grey); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .2s var(--ease); }
@media (hover: hover) { .in-link:hover { color: var(--brand-grey); } }
.art-back { border-top: 0; padding-top: var(--s-6); }
@media (min-width: 1024px) { .art-back { padding-top: var(--s-7); } }

/* ---------------------------------------------------------------- Contact (Brief Page 9, CON-01 to CON-08)
   No image. Heading and lead, then the form (left) and the ways to reach us (right); stacked on phone, form first. */
.contact-head { max-width: 64ch; }
.contact-head .lead { margin-top: var(--head-gap); }
.contact-grid { display: grid; gap: var(--s-6); margin-top: var(--s-5); align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(48px, 6vw, 112px); } }
/* Enquiry card: the card surface, no line graphics (CON-06). Its frame brightens while the form is in use. */
.enquiry { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: 28px 22px; background: var(--surface); border: 1px solid transparent; transition: border-color .3s var(--ease); min-width: 0; }
@media (min-width: 640px) { .enquiry { padding: 36px 32px; } }
@media (min-width: 1440px) { .enquiry { padding: 44px 40px; } }
.enquiry:focus-within { border-color: rgba(163,172,176,0.38); }
@media (hover: hover) { .enquiry:hover { border-color: rgba(163,172,176,0.38); } }
.fld-row { display: grid; gap: var(--s-4); }
@media (min-width: 640px) { .fld-row { grid-template-columns: 1fr 1fr; gap: var(--s-3); } }
.fld { display: grid; gap: 10px; min-width: 0; }
.fld label { font-family: var(--font-display); font-size: 13px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); }
@media (min-width: 1024px) { .fld label { font-size: 14px; } }
.fld input, .fld textarea {
  width: 100%; min-width: 0; box-sizing: border-box; padding: 14px 16px; margin: 0;
  font: inherit; font-size: 16px; line-height: 1.5; color: var(--ink);
  background: var(--bg); border: 1px solid rgba(163,172,176,0.30); border-radius: 0; -webkit-appearance: none; appearance: none;
  transition: border-color .2s var(--ease);
}
@media (min-width: 1024px) { .fld input, .fld textarea { font-size: 18px; } }
.fld textarea { resize: vertical; min-height: 148px; height: 100%; }
.fld-message { flex: 1 1 auto; grid-template-rows: auto minmax(0, 1fr); }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--ink); }
.fld input:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.fld [aria-invalid="true"] { border-color: #e0a3a3; }
.fld-err { font-size: 14px; line-height: 1.5; color: #e0a3a3; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.enq-foot { display: grid; gap: var(--s-3); justify-items: start; margin-top: 4px; }
@media (min-width: 640px) { .enq-foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-4); } }
.enquiry .cta { cursor: pointer; }
.enq-note { display: grid; gap: 6px; justify-items: start; font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.c-plain { color: inherit; text-decoration: none; }
/* Privacy policy: the footer link style (Syncopate capitals, small chevron), so it reads as a route, not a hyperlink in a sentence */
.note-link { display: inline-flex; align-items: center; gap: 8px; padding-block: 8px; margin-block: -8px; font-family: var(--font-display); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; color: var(--ink-muted); transition: color .2s var(--ease); }
.note-link svg { width: 6px; height: 10px; flex: none; transition: transform .25s var(--ease); }
@media (hover: hover) { .note-link:hover { color: var(--ink); } .note-link:hover svg { transform: translateX(3px); } }
.form-status { font-size: 16px; line-height: 1.6; color: var(--ink); padding-top: var(--s-3); border-top: 1px solid var(--line); }
/* The ways to reach us */
.contact-side { display: grid; gap: var(--s-6); min-width: 0; }
@media (min-width: 640px) and (max-width: 1023px) { .contact-side { grid-template-columns: 1fr 1fr; column-gap: var(--s-5); } }
.c-block > p:not(.eyebrow) { font-size: var(--fs-body); line-height: 1.7; }
.c-block .text-link { margin-top: var(--s-3); }
.c-office { color: var(--ink-muted); font-size: 16px; line-height: 1.7; }
.c-office + .c-office { margin-top: var(--s-3); }
.c-label { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.c-office address { font-style: normal; display: grid; font-size: 16px; line-height: 1.7; color: var(--ink-muted); }
.c-office > .c-plain, .c-office address .c-plain { font-size: 16px; line-height: 1.7; color: var(--ink-muted); }
/* Addresses: two lines where they fit; on phone and narrow laptops each long line breaks once, at its comma */
@media (min-width: 640px) { .c-office .line { white-space: nowrap; } }
@media (max-width: 639px), (min-width: 1024px) and (max-width: 1279px) { .c-office .seg { display: block; } .c-office .bc { display: none; } }
/* Laptop: the ways to reach us run the full height of the form card, the capitals of BOOK A CALL level with its top edge
   and the email's baseline on its bottom edge; whichever is taller sets the height and the other spreads to meet it */
@media (min-width: 1024px) {
  .contact-grid { align-items: stretch; }
  .contact-side { display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-5); margin-block: var(--cap-top, -5px) var(--base-bot, -9px); }
}
@media (hover: hover) { .c-plain:hover { color: var(--ink); } }

/* ---------------------------------------------------------------- Privacy Policy (HD-38, PRIV-01 to PRIV-04) */
.legal-top .art-date { margin-top: var(--s-2); }
.section.legal-top { padding-bottom: 0; }
.section.legal-body { padding-top: var(--s-6); }
.tbc { color: var(--brand-grey); font-family: var(--font-display); font-size: 12px; letter-spacing: var(--track-label); white-space: nowrap; }
button.text-link { background: none; border: 0; padding-inline: 0; cursor: pointer; }

/* ---------------------------------------------------------------- Cookie notice (LCH-07): a template, off on the live
   site until a cookie-setting tool is added. Bottom left on laptop and tablet, across the foot of the screen on phone.
   Accept and Reject carry equal weight, as the ICO expects. */
.cookie {
  position: fixed; z-index: 60; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid; gap: var(--s-2); padding: 24px 22px; background: var(--surface); border: 1px solid rgba(163,172,176,0.38);
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}
@media (min-width: 640px) { .cookie { right: auto; left: max(24px, env(safe-area-inset-left, 0px)); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); width: 400px; padding: 28px; } }
.cookie .eyebrow { margin: 0; }
.cookie-text { font-size: 14px; line-height: 1.6; color: var(--ink-body); }
.cookie-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.cookie-btn {
  min-height: 48px; padding: 0 16px; cursor: pointer; background: transparent; color: var(--ink); border: 1px solid var(--ink); border-radius: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
@media (hover: hover) { .cookie-btn:hover { background: var(--ink); color: var(--on-grey); } }
.cookie-btn:active, .cookie-btn:focus-visible { background: var(--ink); color: var(--on-grey); }
.cookie .note-link { justify-self: start; margin-top: 4px; }
.motion .cookie { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .8s var(--ease); }
.motion .cookie.show { opacity: 1; transform: none; }

/* Touch screens (phone and iPad) have no hover, so the open question and the press carry the colour change instead (Anthony, 3 Nov 2026) */
@media (hover: none) {
  .faq details[open] summary, .more[open] summary { color: var(--brand-grey); }
  .faq summary:active, .more summary:active { color: var(--brand-grey); }
}
/* The record on phones: figures and labels scaled down to sit with the rest of the page (Anthony, 3 Nov 2026; replaces ABOUT-13's 18px on phone) */
@media (max-width: 639px) {
  .fig-n { font-size: 28px; }
  .fig-l { font-size: 14px; }
}