/* ============================================================================
   LUMEX ENGINEERING — DESIGN SYSTEM
   Implementation of claude/14_DESIGN_SYSTEM.md v1.0
   Every value below traces to an approved token. Do not introduce new values.
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */

:root {
  /* Brand */
  --lumex-cyan:      #00B4D8;
  --lumex-cyan-deep: #00758C;

  /* Structure */
  --navy:      #1F355E;
  --navy-deep: #16264A;
  --charcoal:  #2B2D42;
  --slate:     #5A6274;

  /* Surface */
  --white:       #FFFFFF;
  --grey-light:  #F5F7FA;
  --blue-soft:   #EAF9FC;
  --border:      #E3E8EF;

  /* Feedback */
  --success: #0F7B4F;
  --error:   #B3261E;

  /* Type */
  --font-display: 'General Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Spacing — 8pt scale */
  --space-1: 4px;   --space-2: 8px;   --space-3: 16px;  --space-4: 24px;
  --space-5: 32px;  --space-6: 48px;  --space-7: 64px;  --space-8: 96px;
  --space-9: 128px; --space-10: 160px;

  /* Motion */
  --motion-fast:  180ms;
  --motion-base:  320ms;
  --motion-slow:  560ms;
  --motion-intro: 4400ms;
  --ease-out:    cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --max-width: 1320px;
  --margin:    80px;
  --gutter:    32px;
  --nav-h:     88px;
  --nav-h-scrolled: 68px;
  --radius:    4px;

  /* Shadow */
  /* Elevation removed from the system. Depth on this site comes from
     photography, white space and hairline rules — not from drop shadows.
     Website Critique §6. */
}

@media (max-width: 1199px) { :root { --margin: 48px; --gutter: 24px; --nav-h: 76px; } }
@media (max-width: 767px)  { :root { --margin: 24px; --gutter: 16px; --nav-h: 68px; --nav-h-scrolled: 60px; } }

/* --- 2. RESET ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(16px, 0.4vw + 14.5px, 17px);
  line-height: 1.70;
  font-weight: 400;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
figure { margin: 0; }

/* --- 3. TYPOGRAPHY ------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--navy);
  margin: 0;
  text-wrap: balance;
}

.t-display {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
}
h1, .t-h1 {
  font-size: clamp(34px, 4.1vw, 56px);
  line-height: 1.10;
  font-weight: 600;
  letter-spacing: -0.025em;
}
h2, .t-h2 {
  font-size: clamp(27px, 2.9vw, 40px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
}
h3, .t-h3 {
  font-size: clamp(22px, 2.0vw, 28px);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
}
h4, .t-h4 {
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.35;
  font-weight: 500;
}
.t-lead {
  font-family: var(--font-body);
  font-size: clamp(18px, 1.3vw, 20px);
  line-height: 1.60;
  color: var(--slate);
  font-weight: 400;
}
.t-small { font-size: 15px; line-height: 1.65; }
.t-caption {
  font-size: 13px; line-height: 1.50; font-weight: 500;
  letter-spacing: 0.02em; color: var(--slate);
}
.t-eyebrow {
  font-family: var(--font-body);
  font-size: 13px; line-height: 1.40; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--lumex-cyan-deep);
  display: block;
  margin-bottom: var(--space-4);
}
.t-eyebrow.on-dark { color: var(--lumex-cyan); }

p { margin: 0 0 1.15em; max-width: 70ch; }
p:last-child { margin-bottom: 0; }

a { color: var(--lumex-cyan-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

strong, b { font-weight: 600; color: var(--navy); }

.measure    { max-width: 68ch; }
.measure-sm { max-width: 56ch; }

/* --- 4. LAYOUT ----------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--max-width) + (var(--margin) * 2));
  margin-inline: auto;
  padding-inline: var(--margin);
}

.section { padding-block: var(--space-10); position: relative; }
@media (max-width: 1199px) { .section { padding-block: var(--space-8); } }
@media (max-width: 767px)  { .section { padding-block: var(--space-7); } }

.section--tight { padding-block: var(--space-8); }
@media (max-width: 767px) { .section--tight { padding-block: var(--space-6); } }

.section--grey { background: var(--grey-light); }
.section--navy { background: var(--navy); color: rgba(255,255,255,0.82); }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--navy strong { color: var(--white); }
.section--navy .t-lead { color: rgba(255,255,255,0.72); }
.section--navy a { color: var(--lumex-cyan); }
.section--navy hr, .section--navy .rule { border-color: rgba(255,255,255,0.16); }
.section--navy .facts { border-top-color: rgba(255,255,255,0.16); }
.section--navy .facts__row { border-bottom-color: rgba(255,255,255,0.16); }
.section--navy .facts__row dt { color: rgba(255,255,255,0.62); }
.section--navy .facts__row dd { color: rgba(255,255,255,0.86); }
.section--navy .facts__row dd b, .section--navy .facts__row dd strong { color: #fff; }
.section--navy .t-caption { color: rgba(255,255,255,0.62); }
.section--navy code { color: var(--lumex-cyan); }
.section--navy .tag { color: rgba(255,255,255,0.78); }

.grid { display: grid; gap: var(--gutter); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1199px) {
  .g-4, .g-5 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .g-2, .g-3, .g-4, .g-5 { grid-template-columns: 1fr; }
}

/* Two-column editorial split: heading left, content right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 991px) { .split { grid-template-columns: 1fr; gap: var(--space-5); } }

.rule { border: 0; border-top: 1px solid var(--border); margin: 0; }

.section-head { margin-bottom: var(--space-7); }
.section-head .t-lead { margin-top: var(--space-4); }

/* --- 5. BUTTONS ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 16px 32px;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out),
              color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              opacity var(--motion-fast) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--lumex-cyan); outline-offset: 2px; }

.btn--primary   { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-deep); color: var(--white); }

.btn--secondary { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1px var(--lumex-cyan); }

/* A third weight, below secondary. Used where a second action is genuinely
   secondary and a second outlined box beside the primary would give it equal
   billing it has not earned. */
.btn--quiet {
  background: transparent; color: var(--lumex-cyan-deep);
  box-shadow: inset 0 0 0 1px transparent;
  padding-inline: var(--space-3);
}
.btn--quiet:hover { color: var(--navy); background: transparent; box-shadow: inset 0 0 0 1px var(--border); }
.btn--secondary:hover { background: var(--blue-soft); color: var(--navy); }

.btn--tertiary  { padding: 0; min-height: 0; color: var(--lumex-cyan-deep); font-weight: 500; }
.btn--tertiary:hover { text-decoration: underline; text-underline-offset: 4px; }

.btn--on-dark   { background: var(--white); color: var(--navy); }
.btn--on-dark:hover { background: var(--blue-soft); color: var(--navy); }

.btn--ghost-dark { background: transparent; color: var(--white); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); }
.btn--ghost-dark:hover { background: rgba(255,255,255,0.08); color: var(--white); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
@media (max-width: 480px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

.arrow { transition: transform var(--motion-fast) var(--ease-out); }
.btn:hover .arrow, .link-arrow:hover .arrow { transform: translateX(3px); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--lumex-cyan-deep); font-weight: 500; font-size: 16px;
  padding: 9px 0; min-height: 44px;
}
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover span:first-child { text-decoration: underline; text-underline-offset: 4px; }

/* --- 6. NAVIGATION ------------------------------------------------------- *
   Composition: identity left, action cluster right, calm void between.
   The empty centre is the premium signal — restraint, not decoration.

   Height is set by the clear-space rule, not by preference. At desktop the
   lockup is 220px wide, which at 4.719:1 is a 46.6px mark. Brand Assets §1.3
   requires 0.50 × mark height clear above and below — 23.3px each — so the bar
   cannot be shorter than 93px. It is 96px.

   Scrolled: 150px lockup = 31.8px mark, 0.35X declared exception = 11.1px,
   minimum 54px. Set to 68px, matching the Design System.
 * ------------------------------------------------------------------------ */

:root { --nav-h: 96px; --nav-h-scrolled: 68px; }
@media (max-width: 1199px) { :root { --nav-h: 88px; } }
@media (max-width: 991px)  { :root { --nav-h: 80px; --nav-h-scrolled: 64px; } }
@media (max-width: 767px)  { :root { --nav-h: 72px; --nav-h-scrolled: 60px; } }

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: transparent;
  transition: height var(--motion-base) var(--ease-in-out),
              background-color var(--motion-base) var(--ease-out),
              box-shadow var(--motion-base) var(--ease-out);
}
.nav.is-solid {
  height: var(--nav-h-scrolled);
  background: rgba(255,255,255,0.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--border);
}
.nav__inner {
  width: 100%; max-width: calc(var(--max-width) + (var(--margin) * 2));
  margin-inline: auto; padding-inline: var(--margin);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
}

/* --- brand ---------------------------------------------------------------- */
/* Clear space is padding on the anchor, so nothing can enter it. */
.brand {
  display: inline-flex; align-items: center;
  padding: 4px 6px; margin-left: -6px;
  min-height: 44px; text-decoration: none;
  /* Wordmark colour is locked artwork: #000000 on light, #FFFFFF reversed
     (Brand Assets §1.5). It is not a navy tint and is never recoloured. */
  color: #000000;
  flex: none;
}
.brand:hover { text-decoration: none; }
.brand:focus-visible { outline: 2px solid var(--lumex-cyan); outline-offset: 4px; border-radius: 2px; }
.brand--reversed { color: var(--white); }

/* Widths per Logo Integration Specification §3. Height follows the aspect
   ratio — the lockup is never squashed. */
.lx-lockup { width: 220px; height: auto; display: block; transition: width var(--motion-base) var(--ease-in-out); }
@media (max-width: 1199px) { .lx-lockup { width: 200px; } }
@media (max-width:  991px) { .lx-lockup { width: 180px; } }
@media (max-width:  767px) { .lx-lockup { width: 160px; } }
.nav.is-solid .lx-lockup { width: 150px; }
@media (max-width: 767px) { .nav.is-solid .lx-lockup { width: 144px; } }

.brand--reversed .lx-lockup { width: 200px; }
@media (max-width: 767px) { .brand--reversed .lx-lockup { width: 168px; } }

.lx-mark { width: 96px; height: auto; display: block; }
.lx-stacked { width: 240px; height: auto; display: block; }

/* --- action cluster ------------------------------------------------------- */
.nav__right { display: flex; align-items: center; gap: var(--space-6); }
@media (max-width: 1199px) { .nav__right { gap: var(--space-5); } }

.nav__links { display: flex; align-items: center; gap: calc(var(--space-5) - 6px); }

.nav__link {
  position: relative; display: inline-flex; align-items: center;
  color: var(--charcoal); font-size: 15.5px; font-weight: 500;
  letter-spacing: 0.005em; padding: 12px 3px; min-width: 44px; justify-content: center;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}
.nav__link span { position: relative; display: block; }
.nav__link span::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px;
  background: var(--lumex-cyan); transform: scaleX(0); transform-origin: right;
  transition: transform var(--motion-base) var(--ease-out);
}
.nav__link:hover { color: var(--navy); text-decoration: none; }
.nav__link:hover span::after, .nav__link.is-active span::after { transform: scaleX(1); transform-origin: left; }
.nav__link.is-active { color: var(--navy); }
.nav__link:focus-visible { outline: 2px solid var(--lumex-cyan); outline-offset: 4px; border-radius: 2px; }

.nav__rule { width: 1px; height: 22px; background: var(--border); flex: none; }
.nav.is-solid .nav__rule { background: var(--border); }

.nav__cta { min-height: 44px; padding: 13px 24px; font-size: 15.5px; }

.nav__burger {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  margin-right: -10px;
}
.nav__burger span {
  display: block; width: 22px; height: 1.5px; background: var(--navy); position: relative;
  transition: background-color var(--motion-fast) linear;
}
.nav__burger span::before, .nav__burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: var(--navy);
  transition: transform var(--motion-base) var(--ease-out);
}
.nav__burger span::before { top: -7px; }
.nav__burger span::after  { top: 7px; }
body.menu-open .nav__burger span { background: transparent; }
body.menu-open .nav__burger span::before { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__burger span::after  { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 991px) {
  .nav__links, .nav__rule, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__right { gap: 0; }
}

/* --- mobile menu ---------------------------------------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 890;
  background: var(--white);
  opacity: 0; visibility: hidden;
  transition: opacity var(--motion-base) var(--ease-out), visibility 0s linear var(--motion-base);
  overflow-y: auto;
}
body.menu-open .mobile-menu { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-menu__inner {
  min-height: 100%;
  padding: calc(var(--nav-h) + var(--space-6)) var(--margin) var(--space-7);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-7);
}
.mm__link {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-display); font-size: clamp(28px, 7vw, 34px); font-weight: 500;
  color: var(--navy); padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
  opacity: 0; transform: translateY(10px);
}
body.menu-open .mm__link {
  opacity: 1; transform: none;
  transition: opacity var(--motion-base) var(--ease-out) calc(60ms * var(--i) + 80ms),
              transform var(--motion-base) var(--ease-out) calc(60ms * var(--i) + 80ms);
}
.mm__link:hover { text-decoration: none; color: var(--lumex-cyan-deep); }
.mm__link svg { color: var(--lumex-cyan-deep); }
.mm__foot .btn { width: 100%; }

/* --- 7. CARDS ------------------------------------------------------------ */

/* No borders, no shadows, no hover lift. A hairline above the block carries
   the same structure as a bordered box and stops the page reading as a SaaS
   template. Elevation has been removed from the design system entirely —
   nothing on an editorial page needs a drop shadow. */
.card {
  background: transparent;
  border-top: 1px solid var(--border);
  padding: var(--space-4) 0 0;
  transition: border-color var(--motion-base) var(--ease-out);
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  height: 100%;
}
a.card:hover { border-top-color: var(--navy); text-decoration: none; }
.card h2, .card h3, .card h4 { margin-bottom: var(--space-2); }
.card p { color: var(--slate); font-size: 15px; line-height: 1.65; }
.card__foot { margin-top: auto; padding-top: var(--space-4); }

/* Service card.
   Ten disciplines in a three-column grid leave the tenth stranded beside two
   empty cells. Rather than pad the grid or drop to two columns, the tenth card
   takes the full row and lays out horizontally. ASP Level 3 is the accreditation
   most consultancies cannot offer, so the row that ends the section is also the
   one worth ending on — the layout and the argument agree. */
.svc-card__icon { width: 40px; height: 40px; margin-bottom: var(--space-4); color: var(--lumex-cyan-deep); }
.svc-card__icon svg { width: 100%; height: 100%; }

.svc-card--wide { grid-column: 1 / -1; }
@media (min-width: 768px) {
  .svc-card--wide {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center; column-gap: var(--space-5);
  }
  .svc-card--wide .svc-card__icon { margin-bottom: 0; }
  .svc-card--wide .svc-card__body { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: var(--space-5); align-items: baseline; }
  .svc-card--wide h3 { margin-bottom: 0; }
  .svc-card--wide .card__foot { margin-top: 0; padding-top: 0; }
}

/* --- 8. WORK ------------------------------------------------------------- *
   Photograph and name. The image lifts very slightly on hover — enough to
   register as interactive, not enough to be an effect.
 * ------------------------------------------------------------------------ */

.workhead { padding-top: calc(var(--nav-h) + var(--space-8)); padding-bottom: var(--space-7); }
@media (max-width: 991px) { .workhead { padding-top: calc(var(--nav-h) + var(--space-6)); padding-bottom: var(--space-5); } }
.workhead__h { max-width: 16ch; }
.workhead__p { margin-top: var(--space-4); max-width: 58ch; font-size: 17px; color: var(--slate); }

.workitem { display: block; text-decoration: none; color: inherit; }
.workitem:hover { text-decoration: none; }
.workitem__media {
  position: relative; overflow: hidden; background: var(--grey-light);
  aspect-ratio: 3 / 2;
}
.workitem__media img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.workitem:hover .workitem__media img { transform: scale(1.028); }
.workitem__name {
  margin: var(--space-3) 0 0;
  font-family: var(--font-display); font-size: 19px; font-weight: 500;
  color: var(--navy); line-height: 1.35; letter-spacing: -0.005em;
}
.workitem:focus-visible { outline: 2px solid var(--lumex-cyan); outline-offset: 5px; }

.workgrid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--gutter); row-gap: var(--space-8); }
.workgrid--3 { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-7); }
@media (max-width: 1199px) { .workgrid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .workgrid, .workgrid--3 { grid-template-columns: 1fr; row-gap: var(--space-6); } }

.worklead { margin-bottom: var(--space-8); }
.workitem--lead .workitem__media--wide { aspect-ratio: 21 / 9; }
@media (max-width: 767px) { .workitem--lead .workitem__media--wide { aspect-ratio: 16 / 10; } }
.workitem--lead .workitem__name { font-size: clamp(21px, 2vw, 27px); margin-top: var(--space-4); }

/* Project page */
.projhead { padding-top: calc(var(--nav-h) + var(--space-7)); padding-bottom: var(--space-6); }
@media (max-width: 991px) { .projhead { padding-top: calc(var(--nav-h) + var(--space-6)); padding-bottom: var(--space-5); } }
.projhead__h { max-width: 20ch; margin-top: var(--space-4); }
.projlead__fig { margin: 0; overflow: hidden; background: var(--grey-light); }
.projlead__fig img { display: block; width: 100%; height: auto; }
.projgallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
@media (max-width: 767px) { .projgallery { grid-template-columns: 1fr; } }
.projgallery__fig { margin: 0; overflow: hidden; background: var(--grey-light); }
.projgallery__fig img { display: block; width: 100%; height: auto; }

.nextproj {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5);
  padding-block: var(--space-5); border-top: 1px solid var(--border);
  text-decoration: none; color: inherit;
}
.nextproj:hover { text-decoration: none; }
.nextproj__label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate); }
.nextproj__name {
  font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); font-weight: 500;
  color: var(--navy); display: inline-flex; align-items: center; gap: 12px; text-align: right;
}
.nextproj:hover .nextproj__name { color: var(--lumex-cyan-deep); }
.nextproj .arrow { transition: transform var(--motion-base) var(--ease-out); }
.nextproj:hover .arrow { transform: translateX(4px); }

/* --- 9. FORMS ------------------------------------------------------------ */

.field { margin-bottom: var(--space-4); }
.field label {
  display: block; margin-bottom: var(--space-2);
  font-size: 15px; font-weight: 500; color: var(--charcoal);
}
.field .hint { font-size: 13px; color: var(--slate); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); color: var(--charcoal); font-size: 16px;
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}
.field textarea { min-height: 140px; resize: vertical; line-height: 1.6; padding-top: 14px; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%235A6274' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 44px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--lumex-cyan);
  box-shadow: 0 0 0 3px rgba(0,180,216,0.15);
}
.field--error input, .field--error select, .field--error textarea { border-color: var(--error); }
.field .err { display: none; margin-top: 6px; font-size: 14px; color: var(--error); }
.field--error .err { display: block; }

.checkgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-4); }
@media (max-width: 600px) { .checkgrid { grid-template-columns: 1fr; } }
.checkgrid label {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  font-size: 15px; font-weight: 400; color: var(--charcoal); margin: 0; cursor: pointer;
}
.checkgrid input[type=checkbox] {
  width: 18px; height: 18px; min-height: 0; accent-color: var(--lumex-cyan-deep); flex: none;
}

.dropzone {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: var(--space-5); text-align: center; background: var(--grey-light);
  transition: border-color var(--motion-fast) var(--ease-out), background-color var(--motion-fast) var(--ease-out);
}
.dropzone:hover { border-color: var(--lumex-cyan); background: var(--blue-soft); }
.dropzone p { margin: 0 auto; max-width: none; }

/* --- 10. FOOTER ---------------------------------------------------------- */

.footer { background: var(--navy); color: rgba(255,255,255,0.80); padding-block: var(--space-8) var(--space-6); }
.footer h4 {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.10em;
  text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: var(--space-4);
}
.footer a { color: rgba(255,255,255,0.80); font-size: 15px; }
.footer a:hover { color: var(--white); text-decoration: none; }
.footer a.btn { font-size: 16px; }
.footer a.btn--on-dark { color: var(--navy); }
.footer a.btn--on-dark:hover { color: var(--navy); background: var(--blue-soft); }
.footer li { margin-bottom: 2px; }
.footer li a { display: inline-block; padding: 9px 0; }
.footer__grid { display: grid; grid-template-columns: minmax(0,4fr) repeat(3, minmax(0,2.6fr)); gap: var(--space-6); }
@media (max-width: 991px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brandline {
  font-family: var(--font-display); font-size: 20px; font-weight: 500;
  color: var(--white); margin: var(--space-4) 0 var(--space-3); max-width: 26ch;
}
.footer__legal {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  justify-content: space-between; align-items: baseline;
  font-size: 13px; color: rgba(255,255,255,0.55);
}
.footer__legal a { font-size: 13px; color: rgba(255,255,255,0.55); }
.footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer__legal li { margin: 0; }
/* 44 px minimum. These were 38 — the only standalone links on the site under
   the WCAG 2.2 target-size minimum. Inline links inside a sentence are exempt;
   a bare "Privacy" in a footer row is not. */
.footer__legal li a { display: inline-flex; align-items: center; min-height: 44px; }

/* --- 11. HERO ------------------------------------------------------------ */

.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--space-9));
  padding-bottom: var(--space-8);
}
@media (max-width: 991px) { .hero { padding-top: calc(var(--nav-h) + var(--space-7)); padding-bottom: var(--space-6); } }

.hero__h1 { max-width: 14ch; margin-top: var(--space-4); }
/* A rule ties the lead paragraph and the call to action together, which is
   what makes the width between them read as composition rather than as a gap
   nobody noticed. */
.hero__foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7); align-items: start;
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
@media (max-width: 991px) { .hero__foot { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; } }
.hero__sub { max-width: 52ch; margin: 0; }
.hero__ctas { margin: 0; }

/* Full-bleed photography. No overlay, no caption, no headline sitting on top
   of it — the image is the content, at the width the building deserves. */
.bleed { width: 100%; overflow: hidden; background: var(--grey-light); }
.bleed__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 21 / 9; object-fit: cover;
}
@media (max-width: 767px) { .bleed__img { aspect-ratio: 16 / 10; } }

/* Page hero (interior pages) */
.phero { padding-top: calc(var(--nav-h) + var(--space-8)); padding-bottom: var(--space-7); }
@media (max-width: 991px) { .phero { padding-top: calc(var(--nav-h) + var(--space-6)); padding-bottom: var(--space-6); } }
.phero__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: end; }
@media (max-width: 991px) { .phero__inner { grid-template-columns: 1fr; gap: var(--space-4); align-items: start; } }

/* --- 12. TECHNICAL FIGURE (placeholder media) ---------------------------- */
/* Renders an engineered, drawing-like panel wherever real photography is
   pending. It is deliberately not a photograph and is never mistaken for one. */

.figpanel {
  position: relative; width: 100%; height: auto;
  background:
    linear-gradient(160deg, #F7F9FC 0%, #EDF2F8 100%);
  overflow: hidden;
  border-radius: var(--radius);
}
.figpanel--dark {
  background: linear-gradient(160deg, #1F355E 0%, #16264A 100%);
}
.figpanel__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(31,53,94,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,53,94,0.05) 1px, transparent 1px),
    linear-gradient(to right, rgba(31,53,94,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,53,94,0.025) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}
.figpanel--dark .figpanel__grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
}

/* Drawing-sheet corner ticks — the figure reads as a sheet, not a grey box. */
.figpanel__corner { position: absolute; width: 14px; height: 14px; pointer-events: none; }
.figpanel__corner--tl { top: 10px; left: 10px; border-top: 1px solid rgba(31,53,94,0.28); border-left: 1px solid rgba(31,53,94,0.28); }
.figpanel__corner--br { bottom: 10px; right: 10px; border-bottom: 1px solid rgba(31,53,94,0.28); border-right: 1px solid rgba(31,53,94,0.28); }
.figpanel--dark .figpanel__corner--tl { border-color: rgba(255,255,255,0.26); }
.figpanel--dark .figpanel__corner--br { border-color: rgba(255,255,255,0.26); }
.figpanel__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.figpanel__tag {
  position: absolute; left: var(--space-4); bottom: var(--space-4);
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate); background: rgba(255,255,255,0.86);
  padding: 6px 10px; border-radius: 2px; border: 1px solid var(--border);
}
.figpanel--dark .figpanel__tag {
  color: rgba(255,255,255,0.72); background: rgba(0,0,0,0.20); border-color: rgba(255,255,255,0.16);
}
.figpanel__ratio-16x9 { aspect-ratio: 16/9; }
.figpanel__ratio-4x3  { aspect-ratio: 4/3; }
.figpanel__ratio-21x9 { aspect-ratio: 21/9; }
.figpanel__ratio-4x5  { aspect-ratio: 4/5; }
.figpanel__ratio-3x2  { aspect-ratio: 3/2; }

/* --- DIRECTOR PORTRAIT ---------------------------------------------------- *
   --portrait-ratio is the single control. Interim artwork is 1:1 with no
   headroom (Brand Assets §5.2); the commissioned session delivers 4:5 and
   only this token changes. Both Directors always share one value.
 * ------------------------------------------------------------------------ */
:root { --portrait-ratio: 4 / 5; }

.portrait {
  margin: 0; width: 100%; max-width: 480px;   /* §5.1 caps interim use at 480px */
  overflow: hidden;
  background: var(--grey-light);
  aspect-ratio: var(--portrait-ratio);
  position: relative;
}
.portrait--sm { max-width: 240px; }
.portrait--lg { max-width: 480px; }
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.portrait__pending { position: absolute; inset: 0; }
.portrait__pending .figpanel { height: 100%; }
.portrait__tag {
  position: absolute; left: var(--space-3); bottom: var(--space-3);
  font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--slate); background: rgba(255,255,255,0.88);
  padding: 6px 10px; border-radius: 2px; border: 1px solid var(--border);
}

/* --- PEOPLE --------------------------------------------------------------- *
   Rows, not columns. Unequal profile length between two Directors reads as
   hierarchy in a column layout; in rows each holds equal frame width.
 * ------------------------------------------------------------------------ */
.people { display: grid; gap: 0; }
.person {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--space-7);
  padding-block: var(--space-7);
  border-top: 1px solid var(--border);
  align-items: start;
}
.people .person:last-child { border-bottom: 1px solid var(--border); }
@media (max-width: 767px) {
  .person { grid-template-columns: 1fr; gap: var(--space-5); padding-block: var(--space-6); }
}

.person__name { font-size: clamp(24px, 2.1vw, 30px); margin: 0; }
.person__role { margin-top: 8px; font-size: 15px; color: var(--slate); }
.person__quote {
  margin: 0; padding-left: var(--space-4);
  border-left: 2px solid var(--lumex-cyan);
}
.person__quote blockquote {
  margin: 0; font-family: var(--font-display); font-size: clamp(19px, 1.6vw, 22px);
  line-height: 1.45; font-weight: 500; color: var(--navy); letter-spacing: -0.01em;
}

/* Compact variant — homepage */
.people--compact { grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
.people--compact .person {
  grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
  gap: var(--space-4); padding-block: var(--space-5);
  border-top: 1px solid var(--border); border-bottom: none;
  align-items: center;
}
.people--compact .person:last-child { border-bottom: none; }
.people--compact .person__name { font-size: 21px; }
a.person--link { text-decoration: none; color: inherit; transition: opacity var(--motion-fast) var(--ease-out); }
a.person--link:hover { text-decoration: none; opacity: 0.78; }
a.person--link:focus-visible { outline: 2px solid var(--lumex-cyan); outline-offset: 6px; }
@media (max-width: 991px) { .people--compact { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .people--compact .person { grid-template-columns: 110px minmax(0,1fr); } }

/* --- 13. CAPABILITY STRIP ------------------------------------------------ */

.capstrip { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.capstrip__inner { padding-block: var(--space-5); }
.capstrip__label {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--slate); margin: 0 0 var(--space-4);
}
.capstrip__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  column-gap: var(--space-4); row-gap: 0;
}
.capstrip__item {
  display: flex; align-items: baseline; gap: 9px;
  padding: 13px 0 13px; border-top: 1px solid var(--border);
  font-size: 15px; font-weight: 500; color: var(--charcoal); text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.capstrip__item:hover { color: var(--navy); border-top-color: var(--lumex-cyan); text-decoration: none; }
.capstrip__item:focus-visible { outline: 2px solid var(--lumex-cyan); outline-offset: 3px; }
.capstrip__n {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--lumex-cyan-deep); flex: none; font-variant-numeric: tabular-nums;
}
.capstrip__t { line-height: 1.3; }

@media (max-width: 1199px) { .capstrip__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width:  991px) { .capstrip__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  600px) { .capstrip__grid { grid-template-columns: repeat(2, 1fr); }
  .capstrip__item { font-size: 14.5px; } }

/* --- 14. PROOF / STAT BLOCKS --------------------------------------------- */

.proofline {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);
}
@media (max-width: 991px) { .proofline { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
@media (max-width: 520px)  { .proofline { grid-template-columns: 1fr; } }
.proofline__item { border-top: 2px solid var(--lumex-cyan); padding-top: var(--space-4); }
.proofline__k {
  font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 600;
  color: var(--navy); line-height: 1.1; letter-spacing: -0.02em;
}
.section--navy .proofline__k { color: var(--white); }
.proofline__v { margin-top: 10px; font-size: 15px; color: var(--slate); }
.proofline__k .slot { font-family: var(--font-body); font-size: 17px; font-weight: 500; line-height: 1.45; display: inline-block; letter-spacing: 0; }
.section--navy .proofline__v { color: rgba(255,255,255,0.68); }

/* --- 15. NUMBERED PROCESS ------------------------------------------------ */

.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 56px minmax(0,1fr);
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
}
.step:last-child { border-bottom: 1px solid var(--border); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--lumex-cyan-deep); letter-spacing: 0.04em; padding-top: 5px;
}
.section--navy .step { border-color: rgba(255,255,255,0.14); }
.section--navy .step::before { color: var(--lumex-cyan); }
.step h3 { font-size: 20px; margin-bottom: var(--space-2); }
.step p { color: var(--slate); font-size: 15.5px; }
.section--navy .step p { color: rgba(255,255,255,0.70); }
@media (max-width: 600px) { .step { grid-template-columns: 40px minmax(0,1fr); gap: var(--space-3); } }

/* --- 16. ACCORDION / FAQ ------------------------------------------------- */

.acc { border-top: 1px solid var(--border); }
.acc__item { border-bottom: 1px solid var(--border); }
.acc__q {
  width: 100%; text-align: left; display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); padding: var(--space-4) 0; min-height: 44px;
  font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--navy);
  line-height: 1.4;
}
.acc__q:focus-visible { outline: 2px solid var(--lumex-cyan); outline-offset: 2px; }
.acc__icon { flex: none; width: 20px; height: 20px; margin-top: 3px; position: relative; }
.acc__icon::before, .acc__icon::after {
  content: ''; position: absolute; background: var(--lumex-cyan-deep);
  transition: transform var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out);
}
.acc__icon::before { top: 9.5px; left: 0; width: 20px; height: 1.5px; }
.acc__icon::after  { left: 9.5px; top: 0; width: 1.5px; height: 20px; }
.acc__item.is-open .acc__icon::after { transform: rotate(90deg); opacity: 0; }
.acc__a { display: none; padding-bottom: var(--space-5); }
.acc__item.is-open .acc__a { display: block; }
.acc__a p { color: var(--slate); }

/* --- 17. QUOTE ----------------------------------------------------------- */

.quote { background: var(--blue-soft); border-radius: var(--radius); padding: var(--space-6); }
.quote blockquote {
  margin: 0; font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px);
  line-height: 1.45; font-weight: 500; color: var(--navy); letter-spacing: -0.01em;
}
.quote figcaption { margin-top: var(--space-4); font-size: 15px; color: var(--slate); }

/* --- 18. DATA TABLE / FACT PANEL ----------------------------------------- */

.facts { border-top: 1px solid var(--border); }
.facts__row {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.facts__row dt { color: var(--slate); font-weight: 500; }
.facts__row dd { margin: 0; color: var(--charcoal); }
@media (max-width: 600px) { .facts__row { grid-template-columns: 1fr; gap: 2px; } }

/* --- 19. FOOTNOTES ------------------------------------------------------- */

.fn-ref {
  font-size: 0.42em; vertical-align: super; line-height: 0; margin-left: 3px;
  color: var(--lumex-cyan-deep); font-weight: 600; text-decoration: none;
  padding: 0 1px;
}
.fn-ref:hover { text-decoration: underline; }
.footnotes {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.footnotes h4, .footnotes .fn-head {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--slate); margin-bottom: var(--space-4);
}
.footnotes ol { counter-reset: fn; }
.footnotes li {
  counter-increment: fn; display: grid; grid-template-columns: 26px 1fr; gap: 10px;
  font-size: 14px; line-height: 1.65; color: var(--slate); margin-bottom: var(--space-3);
  max-width: 78ch;
}
.footnotes li::before { content: counter(fn) '.'; color: var(--lumex-cyan-deep); font-weight: 600; }

/* --- 20. CTA BAND -------------------------------------------------------- */

.ctaband { background: var(--navy); color: var(--white); }
.ctaband__inner {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-8); align-items: center;
}
@media (max-width: 991px) { .ctaband__inner { grid-template-columns: 1fr; gap: var(--space-5); } }
.ctaband h2 { color: var(--white); max-width: 20ch; }
.ctaband p { color: rgba(255,255,255,0.72); margin-top: var(--space-4); }
.ctaband .btn-row { justify-content: flex-start; }
@media (min-width: 992px) { .ctaband .btn-row { justify-content: flex-end; } }

/* --- 21. REVEALS --------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

/* --- 22. INTRO OVERLAY --------------------------------------------------- *
   White. The same white as the page beneath it, so there is no scene change
   at any frame — only a mark being drawn on a page that is already there.
 * ------------------------------------------------------------------------ */

#intro {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 240ms var(--ease-out), visibility 0s linear 240ms;
}
#intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
#intro-stage { width: min(300px, 54vw); will-change: transform, opacity; }
#lx-intro-svg { width: 100%; height: auto; display: block; overflow: visible; }
#lxi-strands path { will-change: opacity, transform; }

/* The homepage rises into place beneath the mark rather than appearing after
   it. Held down only while the intro is actually playing — a visitor who
   arrives on any other route, or with reduced motion, never sees this state. */
body:not(.intro-emerge):not(.intro-done) #app,
body:not(.intro-emerge):not(.intro-done) .nav {
  opacity: 0; transform: translateY(12px);
}
#app, .nav {
  transition: opacity 420ms var(--ease-out), transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
body.intro-emerge #app, body.intro-emerge .nav,
body.intro-done #app,   body.intro-done .nav { opacity: 1; transform: none; }

/* The header lockup is the destination of the travelling mark. It stays
   invisible until the mark has landed on it, so the two are never on screen
   together and the hand-off reads as one object arriving rather than two
   objects crossing. */
body:not(.intro-done) .nav .brand { opacity: 0; }
.nav .brand { transition: opacity 180ms linear; }

@media (prefers-reduced-motion: reduce) {
  #app, .nav { opacity: 1 !important; transform: none !important; transition: none; }
}

/* --- 23. REVIEW INSTRUMENTATION (not part of the production site) --------- *
   No visible control. Press G to surface every field that still requires
   content, together with the build notes explaining the reasoning.
 * ------------------------------------------------------------------------ */


/* Content slots: real placeholders, visible only in review mode */
.slot {
  display: inline; color: var(--slate);
  border-bottom: 1px dashed rgba(90,98,116,0.45);
}
.section--navy .slot, .footer .slot { color: rgba(255,255,255,0.55); border-bottom-color: rgba(255,255,255,0.28); }
body.review .slot {
  background: #FFF6D9; color: #6B5300; border-bottom: 1px dashed #C9A227;
  box-shadow: 0 0 0 2px #FFF6D9;
  border-radius: 2px;
}
.slot__tag { display: none; }
body.review .slot__tag {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #7A5C00; background: #FFE99A;
  padding: 1px 5px; border-radius: 2px; margin-right: 6px; vertical-align: 2px;
}
.note {
  display: none;
}
body.review .note {
  display: block; margin: var(--space-4) 0;
  border-left: 3px solid #C9A227; background: #FFFBEF;
  padding: var(--space-3) var(--space-4);
  font-size: 14px; line-height: 1.6; color: #6B5300; border-radius: 0 2px 2px 0;
  max-width: 78ch;
}
.note b { color: #4A3900; }
.note--nav { margin-top: 0; }

/* --- 24. UTILITIES ------------------------------------------------------- */

.u-center { text-align: center; }
.u-mt-2 { margin-top: var(--space-2); }
.u-mt-3 { margin-top: var(--space-3); }
.u-mt-4 { margin-top: var(--space-4); }
.u-mt-5 { margin-top: var(--space-5); }
.u-mt-6 { margin-top: var(--space-6); }
.u-mt-7 { margin-top: var(--space-7); }
.u-mb-4 { margin-bottom: var(--space-4); }
.u-mb-5 { margin-bottom: var(--space-5); }
.u-mb-6 { margin-bottom: var(--space-6); }
.u-mb-7 { margin-bottom: var(--space-7); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1100;
  background: var(--navy); color: var(--white); padding: 14px 20px; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

.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;
}

/* Accreditations and discipline labels are typography, not user interface.
   A pale outlined box reads as a disabled button, and none of these are
   interactive. Set on a rule, in caps, at a size that says "credential". */
.tag {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--slate); border: 0; background: none; padding: 0;
}
/* Separators removed. At five accreditations on a narrow column the rule sat
   on the letterforms, and the gap does the work on its own. */
.taglist { display: flex; flex-wrap: wrap; column-gap: var(--space-5); row-gap: 10px; align-items: center; }
.tag--cyan { color: var(--lumex-cyan-deep); }
a.tag:focus-visible { outline: 2px solid var(--lumex-cyan); outline-offset: 2px; }
.tag--cyan { color: var(--lumex-cyan-deep); border-color: rgba(0,180,216,0.4); background: var(--blue-soft); }

.taglist { display: flex; flex-wrap: wrap; gap: 8px; }

.breadcrumb { font-size: 14px; color: var(--slate); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--slate); }
.breadcrumb a:hover { color: var(--lumex-cyan-deep); }
.breadcrumb span { margin: 0 8px; opacity: 0.5; }

/* --- 25. REDUCED MOTION -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .proj-card:hover .proj-card__img { transform: none; }
}

/* Tag chips that are links are interactive targets, not labels — they carry the
   44px minimum in full (Design System, touch targets). Static tags do not. */
a.tag { min-height: 44px; padding-inline: 2px; }

/* --- 404 ------------------------------------------------------------------ */

.p404 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; }
.p404__mark svg { width: 240px; height: auto; display: block; }
@media (max-width: 991px) { .p404 { grid-template-columns: 1fr; } .p404__mark { display: none; } }

/* --- ARGUMENT BLOCKS ------------------------------------------------------ *
   Three propositions separated by a rule and white space rather than by three
   bordered boxes. The content is identical; the register is not. A boxed card
   says "feature"; an unboxed column with a hairline above it says "position".
 * ------------------------------------------------------------------------ */

.argu { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
@media (max-width: 991px) { .argu { grid-template-columns: 1fr; gap: var(--space-6); } }
.argu__item { border-top: 1px solid var(--navy); padding-top: var(--space-4); }
.argu__item h3 { font-size: 20px; margin: 0 0 var(--space-3); max-width: 22ch; }
.argu__item p { color: var(--slate); font-size: 15.5px; line-height: 1.65; margin-bottom: var(--space-4); }

/* --- SERVICE INDEX -------------------------------------------------------- *
   Ten disciplines as rows on a rule, not ten cards. Ten identical bordered
   boxes is the single most repetitive layout on the site, and a numbered index
   is both quieter and faster to scan.
 * ------------------------------------------------------------------------ */

.svclist { border-top: 1px solid var(--border); }
.svcrow {
  display: grid; grid-template-columns: 44px minmax(0, 260px) minmax(0, 1fr) 32px;
  gap: var(--space-4); align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background-color var(--motion-fast) linear, padding-inline var(--motion-base) var(--ease-out);
}
.svcrow:hover { text-decoration: none; background: rgba(255,255,255,0.7); padding-inline: var(--space-3); }
.svcrow:focus-visible { outline: 2px solid var(--lumex-cyan); outline-offset: -2px; }
.svcrow__n { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--lumex-cyan-deep); font-variant-numeric: tabular-nums; }
.svcrow__name { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--navy); line-height: 1.3; }
.svcrow__desc { font-size: 15px; color: var(--slate); line-height: 1.6; }
.svcrow__go { color: var(--lumex-cyan-deep); justify-self: end; transition: transform var(--motion-base) var(--ease-out); }
.svcrow:hover .svcrow__go { transform: translateX(4px); }
@media (max-width: 991px) {
  .svcrow { grid-template-columns: 34px minmax(0, 1fr) 24px; row-gap: 6px; }
  .svcrow__desc { grid-column: 2 / 3; }
}

/* --- DIRECTOR PAIR -------------------------------------------------------- */

.dirpair { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); max-width: 780px; }
@media (max-width: 600px) { .dirpair { grid-template-columns: 1fr; gap: var(--space-6); } }
.dircard { display: block; text-decoration: none; color: inherit; }
.dircard:hover { text-decoration: none; }
.dircard .portrait { max-width: none; }
.dircard__name { margin: var(--space-4) 0 0; font-size: 21px; }
.dircard__role { margin: 4px 0 0; font-size: 15px; color: var(--slate); }

/* --- EMPTY STATE ---------------------------------------------------------- */

.emptystate { border-top: 1px solid var(--border); padding-top: var(--space-5); max-width: 62ch; }
.emptystate h3 { margin-bottom: var(--space-3); }
.emptystate .t-lead { margin: 0; }

/* --- WIDE CONTAINER ------------------------------------------------------- *
   A second, wider measure for photography. Text holds the 1200px measure
   because that is where it reads; images do not have to.
 * ------------------------------------------------------------------------ */

.wrap-wide {
  width: 100%;
  max-width: calc(1560px + (var(--margin) * 2));
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* --- SERVICE INDEX, LARGE VARIANT ---------------------------------------- */

.svclist--index { border-top: 1px solid var(--border); }
.svcrow--lg {
  grid-template-columns: 44px 28px minmax(0, 280px) minmax(0, 1fr) 32px;
  padding-block: var(--space-5);
}
.svcrow--lg .svcrow__name { font-size: 21px; }
.svcrow--lg:hover { background: var(--white); }
.svcrow__ico { width: 24px; height: 24px; color: var(--lumex-cyan-deep); align-self: center; }
.svcrow__ico svg { width: 100%; height: 100%; display: block; }
@media (max-width: 991px) {
  .svcrow--lg { grid-template-columns: 34px 24px minmax(0, 1fr) 24px; row-gap: 8px; }
  .svcrow--lg .svcrow__desc { grid-column: 3 / 4; }
}

/* --- SCOPE BLOCKS --------------------------------------------------------- *
   The delivery scope was four bordered cards. It is a set of lists; a rule
   above each column carries the same structure with none of the boxing.
 * ------------------------------------------------------------------------ */

.scopegrid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: var(--space-8); row-gap: var(--space-7); }
@media (max-width: 767px) { .scopegrid { grid-template-columns: 1fr; row-gap: var(--space-6); } }
.scope { border-top: 1px solid var(--navy); padding-top: var(--space-4); }
.scope h3 { margin: 0 0 var(--space-3); }

/* --- MOBILE MENU DIRECT CONTACT ------------------------------------------ */

.mm__direct { display: grid; gap: 0; margin-bottom: var(--space-5); border-top: 1px solid var(--border); }
.mm__direct-item {
  display: flex; align-items: center; min-height: 52px;
  border-bottom: 1px solid var(--border);
  font-size: 16px; font-weight: 500; color: var(--navy); text-decoration: none;
}
.mm__direct-item:hover { text-decoration: none; color: var(--lumex-cyan-deep); }

/* --- NO-SCRIPT FALLBACK --------------------------------------------------- *
   The production build is server-rendered; this prototype is not. A visitor
   with JavaScript disabled or blocked should still see who we are and how to
   reach us, rather than an empty white page.
 * ------------------------------------------------------------------------ */

.noscript {
  max-width: 62ch; margin: 0 auto; padding: var(--space-9) var(--margin);
  font-size: 17px; line-height: 1.7; color: var(--charcoal);
}
.noscript p + p { margin-top: var(--space-4); }

.mm__direct-item { justify-content: space-between; gap: var(--space-4); }
.mm__direct-v { color: var(--slate); font-weight: 400; }

/* --- COVER AND REGISTRATION ---------------------------------------------- *
   The figure carries the weight, the label explains it, the note qualifies it.
   Set on a rule rather than in a card, and the insurer named in full — a limit
   without an underwriter is a number, not a credential.
 * ------------------------------------------------------------------------ */

.coverrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); }
@media (max-width: 767px) { .coverrow { grid-template-columns: 1fr; gap: var(--space-6); } }
.cover { border-top: 1px solid var(--navy); padding-top: var(--space-4); }
/* The figure is the hero. Label above it, one line of currency beneath it,
   and nothing else — the underwriter and the aggregate belong on the
   certificate, which is available on request. */
.cover__l {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--slate);
}
.cover__k {
  margin-top: var(--space-3);
  font-family: var(--font-display); font-size: clamp(38px, 5vw, 68px);
  font-weight: 500; color: var(--navy); line-height: 0.95; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.cover__m { margin-top: var(--space-3); font-size: 14px; line-height: 1.6; color: var(--slate); }

.credrow {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-6); row-gap: 0;
  margin-top: var(--space-9); border-top: 1px solid var(--border);
}
@media (max-width: 767px) { .credrow { grid-template-columns: 1fr; } }
.credrow__item {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-block: var(--space-3); border-bottom: 1px solid var(--border);
}
.credrow__abbr {
  font-size: 13px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--lumex-cyan-deep); white-space: nowrap; min-width: 78px;
}
.credrow__name { font-size: 14.5px; color: var(--slate); line-height: 1.45; }
.credrow__note { margin-top: var(--space-4); font-size: 13.5px; color: var(--slate); max-width: 68ch; }

/* --- BOOKING PANEL -------------------------------------------------------- */

.bookpanel { border-top: 1px solid var(--navy); padding-top: var(--space-5); }
.bookpanel__h { font-size: 21px; margin: 0; }
.bookpanel__p { margin-top: var(--space-3); font-size: 15.5px; color: var(--slate); max-width: 44ch; }
.bookpanel__contacts { margin-top: var(--space-5); border-top: 1px solid var(--border); }
.bookpanel__contact {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-3); border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--slate); font-size: 15px; min-height: 48px;
}
.bookpanel__contact b { color: var(--navy); font-weight: 500; font-variant-numeric: tabular-nums; }
.bookpanel__contact:hover { text-decoration: none; color: var(--navy); }
.bookpanel__cta { margin-top: var(--space-5); width: 100%; }
.bookpanel__alt { margin-top: var(--space-4); }
.calendly-inline-widget { min-height: 640px; margin-top: var(--space-4); }

/* Telephone pairs inside a facts row */
.telstack { display: grid; gap: 2px; }
.telstack a { display: flex; align-items: baseline; gap: var(--space-3); text-decoration: none; min-height: 34px; }
.telstack a span { color: var(--slate); min-width: 108px; }
.telstack a b { font-weight: 500; font-variant-numeric: tabular-nums; }

#intro-skip {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  color: var(--slate); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; font-weight: 600;
  padding: 12px 20px; min-height: 44px; min-width: 44px;
  border: 1px solid var(--border); border-radius: 2px; background: var(--white);
  opacity: 0; transition: opacity 260ms linear, color 160ms linear, border-color 160ms linear;
}
#intro-skip.is-shown { opacity: 1; }
#intro-skip:hover { color: var(--navy); border-color: var(--navy); }
#intro-skip:focus-visible { outline: 2px solid var(--lumex-cyan); outline-offset: 2px; opacity: 1; }
#lxi-strands path { will-change: opacity, transform; }

/* The general enquiries address is 29 characters and the footer contact column
   is narrow at tablet widths. Allow it to break rather than push the page
   sideways — a seven-pixel horizontal scroll is still a horizontal scroll. */
.footer li, .footer li a { overflow-wrap: anywhere; }

/* --- EDITORIAL PHOTOGRAPHY ----------------------------------------------- *
   The ratio changes at each breakpoint because the crop does. Declared here
   rather than left to the image, so the space is reserved before it decodes.
 * ------------------------------------------------------------------------ */

.pic { margin: 0; overflow: hidden; background: var(--grey-light); }
.pic picture, .pic img { display: block; width: 100%; height: 100%; }
.pic img { object-fit: cover; }
.pic { aspect-ratio: var(--r-d); }
@media (max-width: 1023px) { .pic { aspect-ratio: var(--r-t); } }
@media (max-width:  600px) { .pic { aspect-ratio: var(--r-m); } }

/* Full-width band. One image, at the width it deserves, with nothing on it. */
.pic--band { width: 100%; }

/* Paired office images — equal by AREA, not by box.
   Sydney is square; Cairo is at the 4:3 it was framed at. At the largest step
   that is 420 x 420 (176,400 px2) against 485 x 364 (176,540) — different
   shape, the same weight on the page.

   Each column steps down in fixed pairs rather than flexing, because the media
   row needs a known height for the two images to sit on one baseline. --mh is
   the square's edge, which is always the taller of the two; Cairo is pushed to
   the bottom of that row, so the two captions start on one line and the height
   difference reads as composition rather than as hierarchy. */
.officeduo {
  --mh: 420px;
  display: grid; grid-template-columns: 420px 485px;
  gap: var(--space-7); margin-top: var(--space-8);
}
.officeduo__item { margin: 0; display: grid; grid-template-rows: var(--mh) auto; }
.officeduo__item .pic { align-self: end; }
@media (max-width: 1199px) {
  .officeduo { --mh: 340px; grid-template-columns: 340px 393px; gap: var(--space-6); }
}
@media (max-width: 899px) {
  .officeduo { --mh: 280px; grid-template-columns: 280px 323px; gap: var(--space-5); }
}
@media (max-width: 700px) {
  .officeduo { --mh: auto; grid-template-columns: 1fr; gap: var(--space-6); }
  .officeduo__item { grid-template-rows: auto auto; }
}
.office__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border);
}
.office__name { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--navy); }
.office__meta { font-size: 12.5px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--slate); }

.pic--col { max-width: 440px; }          /* the sharpness envelope of a 735px source */
.office__body { margin-top: var(--space-3); font-size: 15px; color: var(--slate); line-height: 1.65; }

/* --- PHOTOGRAPH BESIDE TEXT ---------------------------------------------- *
   Two columns, tops aligned, and a gap wide enough that the photograph is
   read as a photograph rather than as the left edge of a paragraph.

   The image column is fixed at 420px rather than fluid, for one reason: the
   supplied master is 735px wide, and 420 css is the widest position at which
   it is still sharp on a 2x display. A fluid column would put it at 580 on a
   large monitor, where it would be visibly soft. Fixed 6 August.
 * ------------------------------------------------------------------------ */

.splitpic {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: var(--space-9);
  align-items: start;
}
@media (max-width: 1199px) { .splitpic { grid-template-columns: 360px minmax(0, 1fr); gap: var(--space-7); } }
@media (max-width:  899px) { .splitpic { grid-template-columns: 1fr; gap: var(--space-6); } }
.splitpic .pic { width: 100%; max-width: none; }

/* Optical alignment. The top of a text block sits half a leading below the box
   it is in, so a mathematically aligned column reads as low. Trimmed. */
.splitpic__body > :first-child { margin-top: -0.34em; }
@media (max-width: 899px) { .splitpic__body > :first-child { margin-top: 0; } }

/* --- IMAGE-LED SPLIT ------------------------------------------------------ *
   The inverse of .splitpic: here the photograph is the argument and the text
   supports it, so the image takes the wide column. 660 px is set against the
   1300 px master — the widest position at which it is still sharp on a 2x
   display. It is a fixed column for the same reason .splitpic's is.
 * ------------------------------------------------------------------------ */

.splitfig {
  display: grid;
  grid-template-columns: 660px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 1199px) { .splitfig { grid-template-columns: 520px minmax(0, 1fr); gap: var(--space-7); } }
@media (max-width:  899px) { .splitfig { grid-template-columns: 1fr; gap: var(--space-6); } }
.splitfig .pic { width: 100%; max-width: none; background: rgba(255,255,255,0.04); }
.splitfig__body .t-eyebrow { display: block; margin-bottom: var(--space-3); }
.splitfig__body p { color: rgba(255,255,255,0.78); }

/* --- THE DIRECT LINE ------------------------------------------------------ */

.directline { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: center; }
@media (max-width: 899px) { .directline { grid-template-columns: 1fr; gap: var(--space-5); } }
.directline__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
@media (max-width: 600px) { .directline__nums { grid-template-columns: 1fr; gap: var(--space-4); } }
.directline__num {
  display: block; padding-top: var(--space-3);
  border-top: 1px solid rgba(255,255,255,0.22);
  text-decoration: none; min-height: 44px;
  transition: border-color var(--motion-fast) var(--ease-out);
}
.directline__num:hover { border-top-color: var(--lumex-cyan); }
.directline__name {
  display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.10em;
  text-transform: uppercase; color: rgba(255,255,255,0.62); margin-bottom: 6px;
}
.directline__num b {
  display: block; font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 500; color: #fff;
}
.directline__mail { margin-top: var(--space-5); }
.directline__mail a { color: var(--lumex-cyan); font-size: 17px; overflow-wrap: anywhere; }

/* --- FEATURE VIDEO -------------------------------------------------------- *
   Contained, in flow, with its aspect ratio declared per breakpoint so the
   block occupies its final height from first paint. A video that reserves no
   space is a layout shift waiting for the network.
 * ------------------------------------------------------------------------ */

.featvid { margin: 0; overflow: hidden; background: var(--navy-deep); aspect-ratio: var(--r-d); }
@media (max-width: 600px) { .featvid { aspect-ratio: var(--r-m); } }
.featvid__v { display: block; width: 100%; height: 100%; object-fit: cover; }

.splitvid {
  display: grid;
  grid-template-columns: 560px minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}
@media (max-width: 1199px) { .splitvid { grid-template-columns: 440px minmax(0, 1fr); gap: var(--space-7); } }
@media (max-width:  899px) { .splitvid { grid-template-columns: 1fr; gap: var(--space-6); } }
.splitvid__body .t-eyebrow { display: block; margin-bottom: var(--space-3); }

/* A single quiet line between the discipline index and the model. Not a
   section — a breath. */
.transition {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 400;
  color: var(--navy); max-width: 34ch; margin: 0;
}

/* --- HOMEPAGE VIDEO HERO -------------------------------------------------- *
   Full viewport, one image moving slowly, and the sentence the whole practice
   is built on sitting over it. Nothing else.

   svh rather than vh: on iOS, 100vh includes the address bar that is about to
   collapse, so a vh hero is always slightly too tall on first paint.
 * ------------------------------------------------------------------------ */

.vhero {
  position: relative;
  height: min(100svh, 940px);
  min-height: 600px;
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--navy-deep, #0E1E3C);
  isolation: isolate;
}
@media (max-width: 767px) { .vhero { height: min(88svh, 760px); min-height: 520px; } }

.vhero__media { position: absolute; inset: 0; z-index: 0; }
.vhero__video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* The clip is a wide city vista; holding the frame slightly high keeps the
     skyline off the headline. */
  object-position: 50% 42%;
}

/* 36% flat, plus a lower-left gradient carrying the type. Measured, not
   guessed: white on the graded plate holds above 7:1 across the text area. */
.vhero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* a band under the header, so the reversed lockup never has to sit on a
       bright sky — §1.6 governs the asset, contrast governs the ground */
    linear-gradient(to bottom, rgba(9,20,40,0.52) 0%, rgba(9,20,40,0.12) 22%, rgba(9,20,40,0) 34%),
    /* and the plate the type sits on */
    linear-gradient(to top, rgba(9,20,40,0.72) 0%, rgba(9,20,40,0.34) 42%, rgba(9,20,40,0.10) 74%),
    rgba(9,20,40,0.14);
}

.vhero__inner { position: relative; z-index: 2; width: 100%; padding-bottom: var(--space-9); }
@media (max-width: 767px) { .vhero__inner { padding-bottom: var(--space-7); } }

.vhero .t-eyebrow { color: rgba(255,255,255,0.82); }
.vhero__h1 {
  margin-top: var(--space-4);
  max-width: 15ch;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 76px);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.028em;
  text-wrap: balance;
}
.vhero__foot {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7); align-items: end;
  margin-top: var(--space-6); padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,0.22);
}
@media (max-width: 991px) { .vhero__foot { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; } }
.vhero__sub {
  margin: 0; max-width: 50ch;
  color: rgba(255,255,255,0.86); font-size: 17px; line-height: 1.6;
}
@media (max-width: 767px) { .vhero__sub { font-size: 16px; } }
.vhero__ctas { margin: 0; }

.btn--ghost {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42);
}
.btn--ghost:hover { background: rgba(255,255,255,0.10); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7); }

/* A single hairline that draws itself downward, once. Not an animated mouse. */
.vhero__cue {
  position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 44px; height: 44px; display: flex; align-items: flex-end; justify-content: center;
}
.vhero__cue-line { width: 1px; height: 30px; background: rgba(255,255,255,0.5); transform-origin: top; }
@media (prefers-reduced-motion: no-preference) {
  .vhero__cue-line { animation: cue 2.6s cubic-bezier(0.65,0,0.35,1) infinite; }
  @keyframes cue { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
}
@media (max-width: 767px) { .vhero__cue { display: none; } }

/* --- HEADER OVER THE HERO ------------------------------------------------- *
   Transparent, reversed lockup, white links — because Brand Assets §1.6
   prohibits the full-colour artwork on any ground darker than #EAF9FC, and a
   video hero is emphatically darker than that.
 * ------------------------------------------------------------------------ */

.brand { position: relative; display: inline-flex; }
.brand__fc, .brand__rev { display: block; transition: opacity 260ms var(--ease-out); }
.brand__rev { position: absolute; inset: 0; opacity: 0; color: #fff; }
.nav.is-over .brand__fc { opacity: 0; }
.nav.is-over .brand__rev { opacity: 1; }

.nav.is-over { background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav.is-over .nav__link { color: rgba(255,255,255,0.88); }
.nav.is-over .nav__link:hover, .nav.is-over .nav__link.is-active { color: #fff; }
.nav.is-over .nav__link span::after { background: #fff; }
.nav.is-over .nav__rule { background: rgba(255,255,255,0.28); }
.nav.is-over .nav__cta {
  background: rgba(255,255,255,0.10); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.nav.is-over .nav__cta:hover { background: #fff; color: var(--navy); box-shadow: none; }
.nav.is-over .nav__burger span,
.nav.is-over .nav__burger span::before,
.nav.is-over .nav__burger span::after { background: #fff; }