/* =============================================================
   BuildResearch — "The Institute" design system
   Structured authority · Navy + Gold on white
   ============================================================= */

/* ---------- Design tokens ---------- */
/* Brand values are constant; surface + text tokens flip with the theme.
   Dark theme is declared on <html data-theme="dark"> by the inline script in
   each page head, so there is no flash of the wrong theme on load. */
:root {
  color-scheme: light;

  /* Brand palette — identical in both themes */
  --navy-900: #14223B;
  --navy-800: #16243F;
  --navy-700: #1f3050;
  --navy-600: #2E3F5C;
  --navy-500: #3A5277;
  --navy-400: #5B6B82;
  --navy-300: #8595AC;
  --navy-200: #9AA4B5;

  --gold-600: #9A6B2F;        /* AA-contrast bronze for small text (>=4.5:1 on white) */
  --gold-500: #C8924A;
  --gold-400: #d8a662;
  --danger: #b3402f;

  --white: #ffffff;
  --cream: #F5F3EE;

  /* Surfaces — themed */
  --paper: #ffffff;           /* page background */
  --surface: #ffffff;         /* cards, panels, inputs */
  --tint: #f7f6f3;            /* faint warm raised surface */
  --tint-cool: #f5f7fa;
  --header-bg: rgba(255, 255, 255, 0.55);
  --header-bg-scrolled: rgba(255, 255, 255, 0.72);
  --header-bg-mobile: rgba(255, 255, 255, 0.92);
  --header-bg-mobile-scrolled: rgba(255, 255, 255, 0.96);
  --menu-bg: rgba(255, 255, 255, 0.97);
  --header-line: rgba(20, 34, 59, 0.08);

  --line: rgba(20, 34, 59, 0.12);
  --line-strong: rgba(20, 34, 59, 0.18);

  /* Text — themed */
  --ink: #14223B;             /* headings */
  --body: #44516a;            /* body text */
  --body-soft: #566377;
  --muted: #5F6B80;           /* AA-contrast muted (>=4.5:1 on white) */
  --text-strong: #16243F;     /* strong UI text on page surfaces */
  --text-mid: #1f3050;        /* nav links, chips, pills */
  --text-quiet: #5B6B82;
  --text-faint: #8595AC;      /* placeholders */

  /* Typography */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, monospace;

  /* Layout */
  --container: 1180px;
  --container-narrow: 880px;
  --radius: 3px;
  --radius-pill: 30px;
  --header-h: 86px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-sm: 0 2px 10px rgba(20, 34, 59, 0.08);
  --shadow-md: 0 14px 40px rgba(20, 34, 59, 0.12);
}

/* ---------- Dark theme — pure black ---------- */
[data-theme="dark"] {
  color-scheme: dark;

  --paper: #000000;           /* pure black, as specified */
  --surface: #0A0A0C;         /* cards lift just off black */
  --tint: #101014;
  --tint-cool: #0D0D11;
  --header-bg: rgba(0, 0, 0, 0.55);
  --header-bg-scrolled: rgba(0, 0, 0, 0.78);
  --header-bg-mobile: rgba(0, 0, 0, 0.92);
  --header-bg-mobile-scrolled: rgba(0, 0, 0, 0.96);
  --menu-bg: rgba(0, 0, 0, 0.97);
  --header-line: rgba(245, 243, 238, 0.10);

  --line: rgba(245, 243, 238, 0.11);
  --line-strong: rgba(245, 243, 238, 0.20);

  --ink: #F5F3EE;
  --body: rgba(245, 243, 238, 0.74);
  --body-soft: rgba(245, 243, 238, 0.66);
  --muted: rgba(245, 243, 238, 0.58);
  --text-strong: #F5F3EE;
  --text-mid: rgba(245, 243, 238, 0.82);
  --text-quiet: rgba(245, 243, 238, 0.62);
  --text-faint: rgba(245, 243, 238, 0.54);

  /* Every navy flattens to neutral black/grey — no blue anywhere in dark */
  --navy-900: #000000;
  --navy-800: #242424;   /* component chips: icon boxes, send button, user bubble */
  --navy-700: #333333;
  --navy-600: #3D3D3D;
  --navy-500: #474747;
  --navy-400: #545454;
  --navy-300: #666666;
  --navy-200: #7D7D7D;

  /* The AA bronze is far too dark on black — small gold text uses the light gold */
  --gold-600: #d8a662;
  --danger: #ff7a68;

  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.7);
  --shadow-md: 0 18px 50px rgba(0, 0, 0, 0.85);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.4px;
  margin: 0;
}

p { margin: 0; }

::selection { background: var(--gold-500); color: var(--navy-900); }

/* Visible keyboard focus (WCAG 2.2 — focus appearance) */
:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}
.site-header a:focus-visible,
.site-header button:focus-visible { outline-color: var(--gold-400); }
/* Don't double-up the ring on text fields that already show a focus glow */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: none; }

/* ---------- Skip link (accessibility) ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy-800);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 28px;
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding: clamp(56px, 8vw, 100px) 0; }
.section--tight { padding: clamp(40px, 6vw, 72px) 0; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 0;
}
.eyebrow--light { color: var(--gold-500); }

.lead {
  font-size: clamp(17px, 2.1vw, 19px);
  line-height: 1.62;
  color: var(--body);
}

.center { text-align: center; }
.mt-s { margin-top: 14px; }
.mt-m { margin-top: 24px; }
.mt-l { margin-top: 40px; }

/* ---------- Brand mark ---------- */
.mark {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 22px;
}
.mark span {
  width: 3px;
  border-radius: 0.5px;
  display: block;
}
.mark span:nth-child(1) { height: 9px;  background: var(--navy-400); }
.mark span:nth-child(2) { height: 13px; background: var(--navy-300); }
.mark span:nth-child(3) { height: 17px; background: var(--cream); }
.mark span:nth-child(4) { height: 22px; background: var(--gold-500); }

/* Mark on light surfaces */
.mark--ink span:nth-child(1) { background: var(--navy-300); }
.mark--ink span:nth-child(2) { background: var(--navy-500); }
.mark--ink span:nth-child(3) { background: var(--navy-800); }
.mark--ink span:nth-child(4) { background: var(--gold-500); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--navy-800); color: #F3F1EC; }
.btn--primary:hover { background: var(--navy-700); box-shadow: var(--shadow-sm); }

.btn--gold { background: var(--gold-500); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-400); box-shadow: 0 10px 24px rgba(200, 146, 74, 0.32); }

.btn--ghost {
  background: transparent;
  color: var(--text-strong);
  border-color: var(--text-strong);
}
.btn--ghost:hover { background: var(--navy-800); color: #fff; }

.btn--on-navy { background: var(--gold-500); color: var(--navy-900); }
.btn--on-navy:hover { background: var(--gold-400); }

/* Text link with gold underline */
.link-gold {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-strong);
  border-bottom: 1px solid var(--gold-500);
  padding-bottom: 3px;
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.link-gold:hover { color: var(--gold-600); gap: 11px; }
.link-gold--light { color: #fff; }
.link-gold--light:hover { color: var(--gold-400); }

/* =============================================================
   Header / Navigation
   ============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid var(--header-line);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
/* Make the inner container fill the header so the nav can center vertically */
.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
}
.site-header.is-scrolled {
  background: var(--header-bg-scrolled);
  box-shadow: 0 6px 24px rgba(20, 34, 59, 0.10);
}

.nav {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.brand__name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: #F5F3EE;
  letter-spacing: 0.2px;
}
.brand__logo {
  height: 58px;
  width: auto;
  display: block;
}
/* white version for the dark footer */
.brand__logo--light { filter: brightness(0) invert(1); }

.nav__menu {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-mid);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold-500);
  transition: width 0.28s var(--ease);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { width: 100%; }

.nav__cta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--navy-900) !important;
  background: var(--gold-500);
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  transition: background 0.22s var(--ease), transform 0.22s var(--ease);
}
.nav__cta::after { display: none; }
.nav__cta:hover { background: var(--gold-400); transform: translateY(-1px); }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  position: relative;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 10px;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle span { top: 21px; }
.nav__toggle span::before { top: -7px; }
.nav__toggle span::after { top: 7px; }
.nav__toggle.is-open span { background: transparent; }
.nav__toggle.is-open span::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle.is-open span::after { transform: translateY(-7px) rotate(-45deg); }

/* =============================================================
   Hero (split)
   ============================================================= */
.hero {
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  position: relative;
  z-index: 1;
}
.hero__main { padding: clamp(56px, 7vw, 84px) clamp(28px, 4vw, 56px); }
.hero__title {
  font-size: clamp(40px, 6vw, 62px);
  line-height: 1.04;
  letter-spacing: -0.6px;
  margin-top: 22px;
}
.hero__lead {
  font-size: clamp(17px, 2.2vw, 19px);
  line-height: 1.62;
  color: var(--body);
  max-width: 540px;
  margin-top: 24px;
}
.hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 34px;
}
.hero__rule {
  height: 1px;
  background: var(--gold-500);
  opacity: 0.5;
  margin: 50px 0 18px;
}
.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__tags .dot { color: var(--gold-500); }

.hero__aside {
  position: relative;
  background:
    linear-gradient(155deg, rgba(20, 34, 59, 0.93) 0%, rgba(20, 34, 59, 0.80) 50%, rgba(22, 36, 63, 0.92) 100%),
    var(--navy-800) url("../assets/images/hero-aside.jpg") center / cover no-repeat;
  color: #F5F3EE;
  padding: clamp(48px, 6vw, 64px) clamp(28px, 3.5vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__aside .mark { height: 40px; margin-bottom: 26px; }
.hero__aside .mark span { width: 7px; border-radius: 1px; }
.hero__aside .mark span:nth-child(1) { height: 16px; background: var(--navy-500); }
.hero__aside .mark span:nth-child(2) { height: 25px; background: var(--navy-400); }
.hero__aside .mark span:nth-child(3) { height: 33px; background: var(--navy-300); }
.hero__aside .mark span:nth-child(4) { height: 40px; background: var(--gold-500); }
.hero__statement {
  font-family: var(--serif);
  font-size: clamp(21px, 2.6vw, 25px);
  line-height: 1.4;
  font-weight: 400;
  color: #F5F3EE;
  margin-bottom: 30px;
}
.hero__list { border-top: 1px solid rgba(245, 243, 238, 0.16); }
.hero__list-item {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 17px 0;
  border-bottom: 1px solid rgba(245, 243, 238, 0.16);
}
.hero__list-item:last-child { border-bottom: 0; }
.hero__list-item .num {
  font-family: var(--serif);
  color: var(--gold-500);
  font-size: 14px;
  width: 24px;
}
.hero__list-item .label {
  font-size: 14.5px;
  font-weight: 600;
  color: #EDEAE2;
}

/* =============================================================
   Generic section heading row
   ============================================================= */
.head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
}
.head-row h2 {
  font-size: clamp(28px, 4vw, 38px);
  margin-top: 14px;
}
.section-title {
  font-size: clamp(28px, 4vw, 38px);
}

/* Prose statement block */
.statement {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}
.statement p + p { margin-top: 20px; }
.statement p {
  font-size: clamp(17px, 2.1vw, 19px);
  line-height: 1.66;
  color: var(--body);
}

/* =============================================================
   "What we do" — numbered grid
   ============================================================= */
.do-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-strong);
}
.do-cell {
  padding: 34px 30px 36px;
  border-right: 1px solid var(--line);
  transition: background 0.3s var(--ease);
}
.do-cell:first-child { padding-left: 0; }
.do-cell:last-child { padding-right: 0; border-right: 0; }
.do-cell:hover { background: var(--tint); }
.do-cell .num {
  font-family: var(--serif);
  font-size: 30px;
  color: var(--gold-500);
  margin-bottom: 16px;
}
.do-cell h3 {
  font-size: 22px;
  margin-bottom: 12px;
}
.do-cell p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--body-soft);
}
.do-cell .link-gold { margin-top: 18px; }

/* =============================================================
   Navy feature band
   ============================================================= */
.band-navy {
  background: var(--navy-800);
  color: #F5F3EE;
}
.band-navy .band__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 54px;
  align-items: center;
}
.band-navy h2 {
  font-size: clamp(28px, 4vw, 36px);
  line-height: 1.12;
  color: #F5F3EE;
}
.band-navy p {
  font-size: clamp(16px, 2vw, 17px);
  line-height: 1.66;
  color: rgba(245, 243, 238, 0.82);
  margin-bottom: 22px;
}

/* =============================================================
   Values grid (6 cells)
   ============================================================= */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.value {
  background: var(--surface);
  padding: 30px 28px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.value:hover { background: var(--tint); }
.value .rn {
  font-family: var(--serif);
  color: var(--gold-500);
  font-size: 15px;
  margin-bottom: 10px;
}
.value h3 {
  font-size: 19px;
  margin-bottom: 8px;
}
.value p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--body-soft);
}

/* =============================================================
   Work / portfolio cards
   ============================================================= */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.work-grid--2 { grid-template-columns: repeat(2, 1fr); }
.work {
  display: block;
  transition: transform 0.3s var(--ease);
}
a.work:hover { transform: translateY(-4px); }
.work__media {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(135deg, #EAE6DD 0 11px, #F1EDE4 11px 22px);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  overflow: hidden;
  position: relative;
}
.work__media .tag-ghost {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
}
.work__media--navy {
  background: var(--navy-800);
  align-items: center;
  justify-content: center;
}
.work__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 7px;
  height: 84px;
}
.work__bars span { width: 15px; display: block; }
.work__bars span:nth-child(1) { height: 30px; background: var(--navy-600); }
.work__bars span:nth-child(2) { height: 48px; background: var(--navy-500); }
.work__bars span:nth-child(3) { height: 66px; background: var(--navy-400); }
.work__bars span:nth-child(4) { height: 84px; background: var(--gold-500); }
.work__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-600);
  margin: 16px 0 7px;
}
.work h3 {
  font-size: 19px;
  line-height: 1.25;
}
.work h3.is-placeholder { color: var(--text-faint); }

/* =============================================================
   Gold CTA band
   ============================================================= */
.cta-gold {
  background: var(--gold-500);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-gold h2 {
  font-size: clamp(26px, 3.4vw, 32px);
  color: var(--navy-900);
}
.cta-gold p {
  font-size: 16px;
  color: #3a2f1a;
  opacity: 0.88;
  margin-top: 8px;
  max-width: 520px;
}

/* Centered CTA */
.cta-center { text-align: center; }
.cta-center h2 {
  font-size: clamp(36px, 6vw, 60px);
  letter-spacing: -1px;
}
.cta-center p {
  font-size: 18px;
  color: var(--body);
  max-width: 460px;
  margin: 22px auto 0;
}

/* =============================================================
   Page hero (interior pages)
   ============================================================= */
.page-hero {
  border-bottom: 1px solid var(--line);
  padding: clamp(54px, 7vw, 88px) 0 clamp(40px, 5vw, 60px);
}
.page-hero h1 {
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.05;
  margin-top: 18px;
  max-width: 14ch;
}
.page-hero .lead { max-width: 620px; margin-top: 24px; }
.page-hero--center { text-align: center; }
.page-hero--center h1,
.page-hero--center .lead { margin-inline: auto; }
.page-hero--center .lead { max-width: 680px; }

/* Breadcrumb-ish meta */
.crumb {
  display: flex;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.crumb a:hover { color: var(--text-strong); }

/* =============================================================
   Two-column prose (story)
   ============================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: start;
}
.split--media-right { grid-template-columns: 1.05fr 0.95fr; }
.prose p { margin-bottom: 18px; font-size: 16.5px; line-height: 1.7; color: var(--body); }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--ink); }

.figure {
  background: var(--navy-800);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.figure__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 10px;
  height: 130px;
}
.figure__bars span { width: 22px; display: block; border-radius: 1px; }
.figure__bars span:nth-child(1) { height: 50px; background: var(--navy-600); }
.figure__bars span:nth-child(2) { height: 80px; background: var(--navy-500); }
.figure__bars span:nth-child(3) { height: 105px; background: var(--navy-300); }
.figure__bars span:nth-child(4) { height: 130px; background: var(--gold-500); }

/* Feature list (services detail) */
.feature {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: clamp(20px, 3vw, 40px);
  padding: clamp(30px, 4vw, 44px) 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.feature:last-child { border-bottom: 1px solid var(--line); }
.feature__num {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 40px);
  color: var(--gold-500);
}
.feature__body h3 {
  font-size: clamp(22px, 3vw, 27px);
  margin-bottom: 14px;
}
.feature__body p { font-size: 16px; line-height: 1.65; color: var(--body-soft); margin-bottom: 14px; }
.feature__list {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px;
}
.feature__list li {
  position: relative;
  padding-left: 20px;
  font-size: 14.5px;
  color: var(--body-soft);
}
.feature__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 7px;
  height: 7px;
  background: var(--gold-500);
  border-radius: 1px;
}

/* Pull quote */
.pullquote {
  text-align: center;
  max-width: 880px;
  margin-inline: auto;
}
.pullquote .q {
  font-family: var(--serif);
  font-size: 56px;
  line-height: 0;
  color: var(--gold-500);
  height: 28px;
  display: block;
}
.pullquote blockquote {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.36;
  color: var(--ink);
  margin: 0;
}
.pullquote cite {
  display: block;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 24px;
}

/* Stat strip */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.stat { background: var(--surface); padding: 28px 24px; text-align: center; }
.stat__num {
  font-family: var(--serif);
  font-size: clamp(30px, 4vw, 40px);
  color: var(--text-strong);
  line-height: 1;
}
.stat__num span { color: var(--gold-500); }
.stat__label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--muted);
  margin-top: 10px;
}

/* =============================================================
   Enquiry — premium split card (dark info aside + light form)
   ============================================================= */
.enquiry {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.enquiry > * { min-width: 0; }            /* let both panels shrink (grid min-width:auto fix) */

/* ---------- Dark info aside ---------- */
.enquiry__aside {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #F5F3EE;
  padding: clamp(30px, 3.6vw, 50px);
  background: linear-gradient(165deg, #1b2c4c 0%, var(--navy-900) 72%);
}
.enquiry__aside::before {                 /* gold glow + dot texture (matches statband) */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 130% at 0% 0%, rgba(200, 146, 74, 0.22), transparent 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
}
.enquiry__aside .eyebrow { color: var(--gold-400); }
.enquiry__aside h3 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(22px, 2.3vw, 27px); line-height: 1.18; color: #F5F3EE;
  margin: 14px 0 10px; max-width: 17ch;
}
.enquiry__intro { font-size: 14.5px; line-height: 1.6; color: rgba(245, 243, 238, 0.74); }
.enquiry__contacts { margin-top: clamp(22px, 3vw, 32px); }
.enquiry__c {
  display: grid; grid-template-columns: 42px 1fr; gap: 15px; align-items: start;
  padding: 18px 0; border-top: 1px solid rgba(245, 243, 238, 0.14);
}
.enquiry__c:first-child { border-top: 0; padding-top: 0; }
.enquiry__c .ic {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(245, 243, 238, 0.16);
  display: grid; place-items: center; color: var(--gold-400);
}
.enquiry__c .ic .icon { width: 20px; height: 20px; }
.enquiry__c .lbl {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-400); margin-bottom: 4px;
}
.enquiry__c .val { font-size: 15px; color: #F5F3EE; line-height: 1.45; }
.enquiry__c a.val:hover { color: var(--gold-400); }
.enquiry__c .val a { border-bottom: 1px solid rgba(200, 146, 74, 0.6); }
.enquiry__c .val a:hover { color: var(--gold-400); }
.enquiry__promise {
  margin-top: clamp(22px, 3vw, 30px);
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(245, 243, 238, 0.92);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(245, 243, 238, 0.16);
  padding: 10px 16px; border-radius: var(--radius-pill);
}
.enquiry__promise svg { width: 16px; height: 16px; color: var(--gold-400); flex-shrink: 0; }

/* ---------- Light form side ---------- */
.enquiry__main { padding: clamp(30px, 3.6vw, 50px); }
/* The hero's "Send an enquiry" lands clear of the sticky header — allowing for
   the card's 30px reveal offset when it hasn't scrolled into view yet */
.enquiry__main[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.enquiry.reveal:not(.is-in) .enquiry__main[id] { scroll-margin-top: calc(var(--header-h) + 54px); }
.form-head { margin-bottom: clamp(20px, 2.6vw, 28px); }
.form-head h3 { font-size: clamp(20px, 2.1vw, 24px); }
.form-head p { font-size: 14.5px; color: var(--body-soft); margin-top: 6px; }

.form { display: grid; gap: clamp(15px, 2vw, 20px); }
.form[hidden] { display: none; }          /* JS sets form.hidden on success — beat .form's display:grid */
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(15px, 2vw, 20px); }
.form .row > .field { min-width: 0; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label,
.field__label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase; color: var(--body);
}
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 15.5px;
  color: var(--ink);
  width: 100%;
  min-width: 0;
  background: var(--tint-cool);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder { color: var(--text-faint); }
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--surface);
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(200, 146, 74, 0.16);
}
.field .err { color: var(--danger); font-size: 13px; display: none; }
.field.is-error input,
.field.is-error select,
.field.is-error textarea { border-color: var(--danger); background: var(--surface); }
.field.is-error .err { display: block; }

/* Topic chips (radio group) */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chips label {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--text-mid); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 9px 16px; cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.chips label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-strong); transition: background 0.2s var(--ease);
}
.chips label:hover { border-color: var(--gold-500); color: var(--gold-600); }
.chips input:checked + label {
  background: var(--navy-800); border-color: var(--navy-800); color: #F5F3EE;
}
.chips input:checked + label::before { background: var(--gold-500); }
.chips input:focus-visible + label { box-shadow: 0 0 0 3px rgba(200, 146, 74, 0.22); }

.form__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 4px; }
.form__actions .btn { padding: 15px 28px; }
.form__actions .btn[disabled] { cursor: progress; opacity: 0.68; }
.form__note { font-size: 13px; color: var(--muted); max-width: 30ch; line-height: 1.5; }
.form__error { display: none; margin: -4px 0 0; color: var(--danger); font-size: 13px; line-height: 1.45; }
.form__error.is-visible,
.form__error:target { display: block; }
.form__honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Success state */
.form__success {
  display: none;
  background: linear-gradient(160deg, var(--surface), var(--tint-cool));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  text-align: center;
}
.form__success.is-visible,
.form__success:target { display: block; animation: heroRise 0.6s var(--ease) both; }
.form__success .tick {
  width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 18px;
  background: rgba(200, 146, 74, 0.14); color: var(--gold-600);
  display: grid; place-items: center;
}
.form__success .tick svg { width: 28px; height: 28px; }
.form__success h3 { font-size: clamp(21px, 2.4vw, 25px); margin-bottom: 8px; }
.form__success p { max-width: 46ch; margin-inline: auto; }

@supports selector(body:has(*)) {
  body:has(.form__success:target) #contact-form { display: none; }
}

@media (max-width: 880px) {
  .enquiry { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .form .row { grid-template-columns: 1fr; }
}

/* =============================================================
   Footer
   ============================================================= */
.site-footer {
  background: var(--navy-900);
  color: rgba(245, 243, 238, 0.66);
  padding: clamp(48px, 6vw, 60px) 0 36px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(245, 243, 238, 0.14);
}
.footer__brand .brand__name { color: #F5F3EE; }
.footer__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(245, 243, 238, 0.7);
  margin-top: 16px;
  max-width: 300px;
}
.footer__col h4 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 16px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer__col a {
  font-size: 14px;
  color: rgba(245, 243, 238, 0.66);
  transition: color 0.2s var(--ease);
}
.footer__col a:hover { color: #fff; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 22px;
  font-size: 12.5px;
  color: rgba(245, 243, 238, 0.5);
}

/* =============================================================
   Scroll-reveal animations
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1000px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__aside { order: -1; }
  .band-navy .band__grid { grid-template-columns: 1fr; gap: 28px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 860px) {
  :root { --header-h: 70px; }
  .brand__logo { height: 46px; }

  /* A backdrop-filter on the header would trap the fixed menu inside the bar,
     so on mobile the header is solid (no filter) and the menu owns the blur. */
  .site-header {
    background: var(--header-bg-mobile);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
  .site-header.is-scrolled { background: var(--header-bg-mobile-scrolled); }

  /* Mobile nav — full-screen glass overlay */
  .nav__toggle { display: block; }
  .nav__menu {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 90;
    background: var(--menu-bg);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
            backdrop-filter: blur(22px) saturate(150%);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: clamp(18px, 4vw, 32px) clamp(24px, 6vw, 44px) 40px;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    overflow-y: auto;
  }
  .nav__menu.is-open { transform: translateX(0); }
  .nav__links {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .nav__links li { border-bottom: 1px solid var(--line); }
  .nav__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 19px 2px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-strong);
  }
  .nav__links a::after {            /* repurpose the underline pseudo as a chevron */
    content: "\203A";
    position: static;
    width: auto;
    height: auto;
    background: none;
    color: var(--text-faint);
    font-size: 24px;
    line-height: 1;
    transition: color 0.2s var(--ease), transform 0.2s var(--ease);
  }
  .nav__links a:hover,
  .nav__links a[aria-current="page"] { color: var(--gold-600); }
  .nav__links a:hover::after,
  .nav__links a[aria-current="page"]::after { color: var(--gold-500); transform: translateX(4px); }

  /* staggered entrance when the menu opens */
  .nav__menu.is-open .nav__links li,
  .nav__menu.is-open .nav__cta { animation: navItem 0.5s var(--ease) both; }
  .nav__menu.is-open .nav__links li:nth-child(1) { animation-delay: 0.05s; }
  .nav__menu.is-open .nav__links li:nth-child(2) { animation-delay: 0.10s; }
  .nav__menu.is-open .nav__links li:nth-child(3) { animation-delay: 0.15s; }
  .nav__menu.is-open .nav__links li:nth-child(4) { animation-delay: 0.20s; }
  .nav__menu.is-open .nav__links li:nth-child(5) { animation-delay: 0.25s; }
  .nav__menu.is-open .nav__cta { animation-delay: 0.32s; }
  @keyframes navItem {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: none; }
  }

  .nav__cta {
    margin-top: 28px;
    text-align: center;
    padding: 16px 18px;
    font-size: 16px;
    border-radius: var(--radius-pill);
  }

  .do-grid { grid-template-columns: 1fr; }
  .do-cell { padding: 28px 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .do-cell:last-child { border-bottom: 0; }

  .values { grid-template-columns: 1fr; }
  .work-grid, .work-grid--2 { grid-template-columns: 1fr; gap: 30px; }
  .split, .split--media-right { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .feature { grid-template-columns: 1fr; gap: 12px; }
  .feature__list { grid-template-columns: 1fr; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 14px; }
  .cta-gold { text-align: left; }

  .body-lock { overflow: hidden; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .container { padding-inline: 20px; }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .stats { grid-template-columns: 1fr; }
}

/* =============================================================
   Scroll progress bar
   ============================================================= */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  z-index: 200;
  pointer-events: none;
}

/* =============================================================
   Media / images — brand-cohesive treatment
   ============================================================= */
.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--navy-800);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.9s var(--ease), filter 0.6s var(--ease);
  will-change: transform;
}
.media--4x3 { aspect-ratio: 4 / 3; }
.media--16x10 { aspect-ratio: 16 / 10; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--3x2 { aspect-ratio: 3 / 2; }

/* Navy duotone wash to keep photography on-brand */
.media--duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, rgba(20, 34, 59, 0.42), rgba(20, 34, 59, 0.12) 55%, rgba(200, 146, 74, 0.18));
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.media--frame { border: 1px solid var(--line); }

/* Corner accent bar on figures */
.media--accent::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 4px;
  background: var(--gold-500);
  z-index: 2;
}

/* Hover zoom when inside an interactive card */
a.work:hover .media img,
.work:hover .media img,
.insight:hover .media img { transform: scale(1.05); }
a.work:hover .media--duotone::after,
.insight:hover .media--duotone::after { opacity: 0.7; }

/* Image clip-reveal animation */
.reveal-img { clip-path: inset(0 0 100% 0); transition: clip-path 0.9s var(--ease); }
.reveal-img.is-in { clip-path: inset(0 0 0 0); }

/* Parallax target (subtle, JS-driven) */
.parallax { will-change: transform; }

/* =============================================================
   Story / figure media (replaces abstract bar figure usage)
   ============================================================= */
.figure-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.figure-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(20, 34, 59, 0.18), rgba(20, 34, 59, 0));
}
.figure-img__badge {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--navy-800);
  color: #F5F3EE;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 12px 18px;
  z-index: 2;
}
.figure-img__badge b { color: var(--gold-500); font-weight: 700; }

/* =============================================================
   Process / approach
   ============================================================= */
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  counter-reset: step;
  border-top: 1px solid var(--line-strong);
}
.step {
  padding: 32px 26px 30px 0;
  border-right: 1px solid var(--line);
  position: relative;
}
.step:last-child { border-right: 0; padding-right: 0; }
.step:not(:first-child) { padding-left: 26px; }
.step__n {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-600);
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.step__n::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold-500);
}
.step h3 { font-size: 20px; margin-bottom: 10px; }
.step p { font-size: 14.5px; line-height: 1.55; color: var(--body-soft); }

/* =============================================================
   Insights (editorial cards)
   ============================================================= */
.insights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.insight { display: block; }
a.insight { transition: transform 0.4s var(--ease); }
a.insight:hover { transform: translateY(-4px); }
.insight .media { margin-bottom: 18px; }
.insight__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 9px;
}
.insight h3 { font-size: 21px; line-height: 1.24; margin-bottom: 9px; }
.insight p { font-size: 14.5px; line-height: 1.55; color: var(--body-soft); }
.insight .read {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.insight:hover .read { gap: 11px; color: var(--gold-600); }

/* =============================================================
   Logos / credibility strip
   ============================================================= */
.cred {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 40px;
  padding: 8px 0;
}
.cred span {
  font-family: var(--serif);
  font-size: clamp(16px, 2.2vw, 21px);
  font-weight: 600;
  color: var(--text-quiet);
  letter-spacing: 0.2px;
  transition: color 0.3s var(--ease);
}
.cred span:hover { color: var(--text-strong); }

/* Count-up number affordance */
.stat__num[data-count] { font-variant-numeric: tabular-nums; }

/* =============================================================
   Services hero thumbnail strip
   ============================================================= */
.svc-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.svc-thumb .media { margin-bottom: 16px; }
.svc-thumb h3 { font-size: 19px; }

/* =============================================================
   Refined motion — smoother, layered reveals
   ============================================================= */
.reveal { transition-duration: 0.8s; }
.reveal-left { opacity: 0; transform: translateX(-26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-left.is-in { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-right.is-in { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(0.96); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal-scale.is-in { opacity: 1; transform: none; }

/* Hero entrance — fade/rise on load */
.hero__main > * { animation: heroRise 0.9s var(--ease) both; }
.hero__main > *:nth-child(1) { animation-delay: 0.05s; }
.hero__main > *:nth-child(2) { animation-delay: 0.15s; }
.hero__main > *:nth-child(3) { animation-delay: 0.25s; }
.hero__main > *:nth-child(4) { animation-delay: 0.35s; }
.hero__main > *:nth-child(5) { animation-delay: 0.45s; }
.hero__main > *:nth-child(6) { animation-delay: 0.55s; }
.hero__aside > * { animation: heroFade 1s var(--ease) both; animation-delay: 0.35s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Gentle float for the brand mark in the aside */
.hero__aside .mark { animation: floaty 6s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* Link arrows nudge */
.link-gold span, .nav__cta { transition: transform 0.2s var(--ease), background 0.22s var(--ease); }

/* =============================================================
   Responsive — new components
   ============================================================= */
@media (max-width: 1000px) {
  .process { grid-template-columns: repeat(2, 1fr); }
  .step { border-bottom: 1px solid var(--line); }
  .step:nth-child(2) { border-right: 0; padding-right: 0; }
  .step:nth-child(3) { padding-left: 0; }
}
@media (max-width: 860px) {
  .insights { grid-template-columns: 1fr; gap: 34px; }
  .svc-thumbs { grid-template-columns: 1fr; gap: 30px; }
  .process { grid-template-columns: 1fr; }
  .step { border-right: 0; padding: 26px 0; }
  .step:nth-child(2) { padding-left: 0; }
  .hero__aside { animation: none; }
}

/* =============================================================================
   ░░  V3 — EDITORIAL DESIGN LANGUAGE  ░░
   Signature motifs that give the brand personality:
   data-bars · ghost numerals · blueprint grid · marquee · depth
   ============================================================================= */

body { font-optical-sizing: auto; }
.hero__title, .page-hero h1 { font-variation-settings: "opsz" 60; }
.section-title, .head-row h2, .s-head h2, .band-navy h2 { font-variation-settings: "opsz" 40; }

/* ---------- Blueprint dot-grid (editorial research texture) ---------- */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(20, 34, 59, 0.07) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(100deg, #000 0%, #000 42%, transparent 64%);
          mask-image: linear-gradient(100deg, #000 0%, #000 42%, transparent 64%);
}

/* Interior page heroes share the blueprint texture */
.page-hero { position: relative; }
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(20, 34, 59, 0.06) 1px, transparent 1.4px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(120deg, #000, transparent 58%);
          mask-image: linear-gradient(120deg, #000, transparent 58%);
}
.page-hero > .container { position: relative; z-index: 1; }

/* ---------- Kinetic headline underline (draws on load) ---------- */
.u-draw {
  position: relative;
  white-space: nowrap;
  font-style: italic;
}
.u-draw::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.09em;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: draw 0.85s var(--ease) 0.95s forwards;
}
@keyframes draw { to { transform: scaleX(1); } }

/* ---------- Signature: animated data bars ---------- */
.databars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 92px;
  width: clamp(180px, 60%, 280px);
  margin-bottom: 30px;
}
.databars span {
  flex: 1;
  height: var(--h, 50%);
  background: linear-gradient(to top, var(--navy-500), var(--gold-500));
  border-radius: 1px;
  transform-origin: bottom;
  transform: scaleY(0);
  animation:
    barGrow 0.7s var(--ease) forwards,
    barPulse 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 55ms), calc(720ms + var(--i) * 90ms);
}
.databars span:last-child { background: linear-gradient(to top, var(--gold-600), var(--gold-400)); }
@keyframes barGrow { to { transform: scaleY(1); } }
@keyframes barPulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.9); } }

/* ---------- Editorial section header (index + ghost numeral) ---------- */
.s-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 46px;
}
.s-head > *:not(.s-ghost) { position: relative; z-index: 1; }
.s-index {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-600);
}
.s-index::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold-500);
  margin-right: 12px;
}
.s-head h2 {
  font-size: clamp(30px, 4.6vw, 46px);
  line-height: 1.06;
  margin-top: 14px;
  max-width: 20ch;
}
.s-head__action { white-space: nowrap; margin-bottom: 6px; }
.s-ghost {
  position: absolute;
  top: -0.42em;
  right: -0.04em;
  z-index: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(96px, 17vw, 210px);
  line-height: 1;
  letter-spacing: -3px;
  color: rgba(20, 34, 59, 0.05);
  pointer-events: none;
  user-select: none;
}

/* ---------- Sector marquee ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 30px;
  padding: 0 30px;
  font-family: var(--serif);
  font-size: clamp(18px, 2.4vw, 27px);
  font-weight: 600;
  color: var(--text-mid);
  white-space: nowrap;
}
.marquee__item::after { content: "✦"; color: var(--gold-500); font-size: 0.6em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Hover gold-reveal line on cards ---------- */
.do-cell, .value, .insight, .work { position: relative; }
.do-cell::after, .value::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--ease);
}
.do-cell:hover::after, .value:hover::after { transform: scaleX(1); }
.value:first-child::after { left: 0; }

/* ---------- Depth on navy bands ---------- */
.band-navy, .hero__aside { position: relative; overflow: hidden; }
.band-navy { isolation: isolate; }
.band-navy::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(130% 150% at 100% 0%, rgba(200, 146, 74, 0.18), transparent 52%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none;
}
.band-navy > .container { position: relative; z-index: 1; }

/* ---------- Hero service index — interactive ---------- */
.hero__list-item {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s var(--ease);
}
.hero__list-item::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--gold-500);
  transform: translateY(-50%);
  transition: width 0.3s var(--ease);
}
.hero__list-item:hover { padding-left: 12px; }
.hero__list-item:hover::before { width: 10px; }
.hero__list-item:hover .num { color: var(--gold-400); }
.hero__list-item:hover .label { color: #fff; }

/* ---------- Oversized footer wordmark ---------- */
.site-footer { position: relative; overflow: hidden; }
.site-footer::after {
  content: "BuildResearch";
  position: absolute;
  left: 50%;
  bottom: -0.30em;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(64px, 19vw, 280px);
  line-height: 1;
  letter-spacing: -3px;
  color: rgba(245, 243, 238, 0.035);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.site-footer .container { position: relative; z-index: 1; }

/* ---------- Header polish — gold hairline + scroll blur ---------- */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200, 146, 74, 0.5), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.site-header { position: sticky; }
.site-header.is-scrolled::after { opacity: 1; }

/* ---------- Refined buttons — subtle gold sweep ---------- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(200, 146, 74, 0.28), transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease);
}
.btn--primary:hover::before { transform: translateX(120%); }
.btn--primary > * { position: relative; z-index: 1; }

/* ---------- Eyebrow tick refinement (standalone) ---------- */
.eyebrow { display: inline-flex; align-items: center; }

/* ---------- Responsive: editorial components ---------- */
@media (max-width: 860px) {
  .s-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .s-ghost { font-size: 110px; top: -0.3em; opacity: 0.7; }
  .databars { height: 72px; width: 200px; }
  .marquee__item { font-size: 19px; gap: 22px; padding: 0 22px; }
  .site-footer::after { font-size: 26vw; }
}

/* =============================================================================
   ░░  V4 — DEPTH, IMAGERY & DENSITY  ░░
   Bolder, more alive: image heroes, photographic bands, icons, stats, team
   ============================================================================= */

/* ---------- Custom line icons ---------- */
.icon { width: 26px; height: 26px; display: block; }
.icon-box {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--navy-800);
  color: var(--gold-400);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.icon-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 100% 0%, rgba(200, 146, 74, 0.25), transparent 60%);
}

/* ---------- Hero v4: image visual + floating card + stats ---------- */
.hero__visual {
  position: relative;
  display: flex;
  padding: clamp(36px, 5vw, 60px) 0;
  padding-left: clamp(20px, 3vw, 44px);
}
.hero__media {
  position: relative;
  flex: 1;
  min-height: 440px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(20, 34, 59, 0.55), rgba(20, 34, 59, 0.12) 55%, rgba(200, 146, 74, 0.22));
}
.hero__media .databars {
  position: absolute;
  left: 26px;
  bottom: 26px;
  margin: 0;
  z-index: 2;
  height: 76px;
  width: 200px;
}
.float-card {
  position: absolute;
  left: clamp(-12px, -1.6vw, -30px);
  bottom: 44px;
  z-index: 3;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  border-left: 3px solid var(--gold-500);
  padding: 18px 22px 16px;
  max-width: 232px;
  animation: floatCard 6s ease-in-out infinite;
}
@keyframes floatCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.float-card .fc-n { font-family: var(--serif); font-size: 30px; color: var(--ink); line-height: 1; }
.float-card .fc-n span { color: var(--gold-600); }
.float-card .fc-l { font-size: 13px; color: var(--body-soft); margin-top: 7px; line-height: 1.4; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 38px;
}
.hero__stat { padding: 0 26px; border-left: 1px solid var(--line); }
.hero__stat:first-child { padding-left: 0; border-left: 0; }
.hero__stat .n { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--ink); line-height: 1; }
.hero__stat .n span { color: var(--gold-600); }
.hero__stat .l { font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* ---------- Centered, image-free landing hero ---------- */
.hero--center {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: grid;
  place-items: center;
  text-align: center;
}
.hero--center > .container { width: 100%; }
.hero--center .hero__main {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(40px, 7vh, 96px) 0;
}
.hero--center .eyebrow { justify-content: center; }
.hero--center .hero__title {
  font-size: clamp(44px, 7vw, 78px);
  margin-top: 24px;
}
.hero--center .hero__lead {
  max-width: 620px;
  margin-inline: auto;
}
.hero--center .hero__actions { justify-content: center; }
.hero--center .hero__stats { justify-content: center; }
/* Clean centre: dots fade away behind the text, hint only at the edges */
.hero--center::before {
  -webkit-mask-image: radial-gradient(125% 115% at 50% 46%, transparent 0%, transparent 46%, #000 100%);
          mask-image: radial-gradient(125% 115% at 50% 46%, transparent 0%, transparent 46%, #000 100%);
  opacity: 0.7;
}
@media (max-width: 860px) {
  .hero--center { min-height: auto; padding: 24px 0 8px; }
  .hero--center .hero__stats { gap: 0; }
}

/* ---------- Full-viewport split hero (Think Tank) ---------- */
.hero--full {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100dvh - var(--header-h));
  display: grid;
  align-items: center;
}
.hero--full > .hero__grid { width: 100%; max-width: 1560px; margin-inline: auto; }   /* keeps copy and model together on ultra-wide screens */
@media (max-width: 1000px) {
  .hero--full { min-height: auto; display: block; }
}

/* ---------- Full-bleed image hero (About) — image is a true background ---------- */
.hero--image {
  position: relative;
  background-image:
    linear-gradient(165deg, rgba(11, 20, 38, 0.84) 0%, rgba(16, 26, 47, 0.58) 52%, rgba(20, 34, 59, 0.76) 100%),
    url("../assets/images/story.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero--image::before { display: none; }            /* hide the blueprint dot-grid */
.hero--image > .container { position: relative; z-index: 1; }
.hero--image .crumb { justify-content: center; color: rgba(245, 243, 238, 0.72); }
.hero--image .crumb a { color: rgba(245, 243, 238, 0.9); }
.hero--image .crumb a:hover { color: #fff; }
.hero--image .eyebrow { color: var(--gold-400); }
.hero--image .hero__title { color: #F5F3EE; }
.hero--image .hero__lead { color: rgba(245, 243, 238, 0.9); }

/* ---------- Content section with a full-bleed image background ----------
   The photo is a real <img> inside .section-bg. It used to be a url() held in
   a custom property, but Chrome resolves a relative url() inside var() against
   the stylesheet, so "assets/…" became "css/assets/…" and never loaded. */
.section--media {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--navy-900);
}
.section-bg { position: absolute; inset: 0; z-index: -1; }
.section-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* dense behind the copy, opening up so the photograph reads on the right */
  background: linear-gradient(100deg, rgba(11, 20, 38, 0.95) 0%, rgba(13, 23, 42, 0.88) 38%, rgba(16, 26, 47, 0.6) 68%, rgba(20, 34, 59, 0.38) 100%);
}
@media (max-width: 860px) {
  .section-bg::after { background: linear-gradient(180deg, rgba(11, 20, 38, 0.9), rgba(16, 26, 47, 0.82)); }
}
/* the outcomes card now sits over visible photography, so it needs its own scrim */
.section--media .case-results {
  background: rgba(11, 20, 38, 0.58);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.section--media .split,
.section--media .split--media-right,
.section--media .why { grid-template-columns: 1fr; }
.section--media .figure-img { display: none; }
.section--media .section-title,
.section--media h2, .section--media h3, .section--media h4 { color: #F5F3EE; }
.section--media .prose p,
.section--media p,
.section--media .why__item p,
.section--media .prose-sub { color: rgba(245, 243, 238, 0.9); }
.section--media .why__item h4 { color: #F5F3EE; }   /* white titles on the photo band */
.section--media .lead-serif { color: #F5F3EE; }
.section--media .lead-serif .accent { color: var(--gold-400); }
.section--media .prose strong,
.section--media .prose em,
.section--media strong { color: #fff; }
.section--media .s-index { color: var(--gold-400); }
.section--media .prose,
.section--media .lead-serif,
.section--media .why__list { max-width: 760px; }
.section--media .work__kicker { color: var(--gold-400); }
.section--media .icon-box { background: rgba(255, 255, 255, 0.12); color: var(--gold-400); }
.section--media .link-gold { color: #fff; }
.section--media .link-gold:hover { color: var(--gold-400); }

/* ---------- 3D globe (Think Tank hero) ---------- */
.globe-stage {
  position: relative;
  flex: 1;
  min-height: 480px;
  display: grid;
  place-items: center;
}
.globe-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(380px, 48vw, 580px);
  display: block;
  cursor: grab;
  touch-action: pan-y;               /* vertical swipes still scroll the page on touch */
  opacity: 0;                        /* fades in once the scene has compiled (js/hero3d.js) */
  transition: opacity 0.9s var(--ease-out);
}
.globe-stage.is-ready .globe-canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .globe-canvas { transition: none; } }
/* a soft pool of light the model sits in */
.globe-stage::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 146, 74, 0.13), rgba(95, 136, 201, 0.08) 55%, transparent 100%);
  filter: blur(8px);
  pointer-events: none;
}
[data-theme="dark"] .globe-stage::before {
  background: radial-gradient(closest-side, rgba(200, 146, 74, 0.12), rgba(200, 146, 74, 0.03) 60%, transparent 100%);
}
.globe-stage.globe-fallback::before { display: none; }
.globe-stage.globe-fallback .globe-canvas { display: none; }
.globe-stage.globe-fallback::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: min(80%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #14161b url("../assets/images/hero-aside.jpg") center / cover;
  box-shadow: inset -22px -12px 46px rgba(0, 0, 0, 0.55), 0 24px 54px rgba(20, 34, 59, 0.22);
}
@media (max-width: 860px) {
  .globe-stage { min-height: 320px; }
  .globe-canvas { height: clamp(320px, 66vw, 500px); }   /* phones 320px; tablets grow with the width */
}
@media (prefers-reduced-motion: reduce) { .globe-canvas { cursor: default; } }

/* ---------- Navy animated stats band ---------- */
.statband { position: relative; overflow: hidden; background: var(--navy-800); color: #fff; }
.statband::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(200, 146, 74, 0.16), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
}
.statband__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.statband__item { padding: 6px 30px; border-left: 1px solid rgba(245, 243, 238, 0.16); }
.statband__item:first-child { border-left: 0; padding-left: 0; }
.statband__n { font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 4.6vw, 54px); line-height: 1; color: #F5F3EE; }
.statband__n span { color: var(--gold-500); }
.statband__l { font-size: 13.5px; color: rgba(245, 243, 238, 0.72); margin-top: 12px; letter-spacing: 0.3px; }

/* ---------- Big serif lede (asymmetric intro) ---------- */
.lead-serif {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.9vw, 31px);
  line-height: 1.38;
  color: var(--ink);
}
.lead-serif .accent { color: var(--gold-600); font-style: italic; }
.prose-sub { margin-top: 22px; font-size: 16px; line-height: 1.7; color: var(--body-soft); }

/* ---------- Service cards (icon-led) ---------- */
.svc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card {
  position: relative;
  border: 1px solid var(--line);
  padding: 34px 30px 32px;
  background: var(--surface);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
}
.svc-card::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--ease);
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
.svc-card:hover::after { transform: scaleX(1); }
.svc-card:hover .icon-box { transform: translateY(-3px); background: var(--gold-500); color: var(--navy-900); }
.svc-card .kf { font-family: var(--serif); font-size: 14px; color: var(--gold-600); margin: 22px 0 6px; }
.svc-card h3 { font-size: 22px; margin-bottom: 12px; }
.svc-card p { font-size: 15px; line-height: 1.6; color: var(--body-soft); margin-bottom: 18px; }
.svc-card .link-gold { font-size: 13px; }

/* ---------- Why us — image + icon list ---------- */
.why { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(36px, 5vw, 64px); align-items: center; }
.why__list { display: grid; gap: 26px; }
.why__item { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.why__item .icon-box { width: 52px; height: 52px; }
.why__item h4 { font-family: var(--serif); font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.why__item p { font-size: 15px; line-height: 1.6; color: var(--body-soft); }

/* ---------- Cinematic photographic band ---------- */
.band-photo { position: relative; overflow: hidden; color: #fff; isolation: isolate; }
.band-photo__bg { position: absolute; inset: -8% 0; z-index: 0; }
.band-photo__bg img { width: 100%; height: 116%; object-fit: cover; }
.band-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(16, 26, 47, 0.95) 0%, rgba(16, 26, 47, 0.78) 48%, rgba(16, 26, 47, 0.42) 100%);
}
.band-photo > .container { position: relative; z-index: 2; }
.band-photo h2 { color: #F5F3EE; }
.band-photo .eyebrow { color: var(--gold-400); }
.band-photo p { color: rgba(245, 243, 238, 0.86); }
.band-photo__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 54px; align-items: center; }

/* Centered variant — even scrim for centred statements (About mission) */
.band-photo--center { text-align: center; }
.band-photo--center::after { background: rgba(13, 22, 41, 0.78); }
.band-photo--center blockquote {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 1.22;
  letter-spacing: -0.4px;
  color: #F5F3EE;
  max-width: 21ch;
  margin: 18px auto 0;
}
.band-photo--center blockquote .accent { color: var(--gold-400); font-style: italic; }

/* ---------- Featured insight (asymmetric) ---------- */
.insight-feature {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(28px, 4vw, 50px);
  align-items: center;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.insight-feature .media { margin: 0; }
.insight-feature__body .insight__kicker { margin-bottom: 12px; }
.insight-feature__body h3 { font-size: clamp(24px, 3vw, 32px); line-height: 1.18; margin-bottom: 14px; }
.insight-feature__body p { font-size: 16.5px; line-height: 1.65; color: var(--body-soft); margin-bottom: 18px; }
.insight-feature__meta { display: flex; gap: 18px; font-size: 12.5px; letter-spacing: 0.4px; text-transform: uppercase; color: var(--muted); }

/* ---------- Team / collective scaffold ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.member { position: relative; }
.avatar {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background: linear-gradient(155deg, var(--navy-700), var(--navy-900));
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-bottom: 16px;
  transition: transform 0.4s var(--ease);
}
.member:hover .avatar { transform: translateY(-4px); }
.avatar span { font-family: var(--serif); font-size: clamp(30px, 4vw, 42px); font-weight: 600; color: var(--gold-400); }
.avatar img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.avatar::after {                       /* navy duotone wash keeps portraits on-brand */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(150deg, rgba(20, 34, 59, 0.28), rgba(20, 34, 59, 0.05) 55%, rgba(200, 146, 74, 0.14));
  mix-blend-mode: multiply; pointer-events: none;
}
.avatar::before { z-index: 2; }
.member:hover .avatar img { transform: scale(1.05); }
.avatar::before {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 46px; height: 46px;
  background:
    linear-gradient(to top, var(--gold-500) 0 3px, transparent 3px) right bottom / 8px 18px no-repeat,
    linear-gradient(to top, var(--navy-300) 0 3px, transparent 3px) right bottom / 8px 30px no-repeat;
  opacity: 0.85;
}
.member h4 { font-size: 17px; color: var(--ink); }
.member .role { font-size: 12.5px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--gold-600); margin-top: 5px; }

/* ---------- Value icons + small notes ---------- */
.v-ic { display: block; color: var(--gold-600); margin-bottom: 14px; }
.v-ic .icon { width: 30px; height: 30px; }
.value:hover .v-ic { color: var(--gold-500); }
.illus {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14.5px;
  color: var(--muted);
  margin-top: 26px;
}
.process .step__ic { color: var(--gold-600); margin-bottom: 16px; display: block; }
.process .step__ic .icon { width: 28px; height: 28px; }

/* Contact info icons */
.contact-info .info-block { display: flex; gap: 16px; align-items: flex-start; }
.info-ic { color: var(--gold-600); flex-shrink: 0; margin-top: 3px; }
.info-ic .icon { width: 22px; height: 22px; }
.next-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.next-step { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.next-step .icon-box { width: 46px; height: 46px; }
.next-step h4 { font-family: var(--serif); font-size: 18px; color: var(--ink); margin-bottom: 5px; }
.next-step p { font-size: 14.5px; line-height: 1.55; color: var(--body-soft); }
@media (max-width: 860px) { .next-steps { grid-template-columns: 1fr; gap: 22px; } }

/* Feature side column (icon + number) */
.feature__side { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
@media (max-width: 860px) {
  .feature__side { flex-direction: row; align-items: center; gap: 16px; }
}

/* =============================================================
   Article / Insight detail template
   ============================================================= */
.article-hero { position: relative; border-bottom: 1px solid var(--line); padding: clamp(40px, 6vw, 72px) 0 clamp(26px, 4vw, 40px); }
.article-kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold-600);
}
.article-title { font-size: clamp(32px, 5.2vw, 54px); line-height: 1.05; letter-spacing: -0.5px; margin-top: 16px; max-width: 18ch; }
.article-standfirst { font-family: var(--serif); font-size: clamp(19px, 2.3vw, 23px); line-height: 1.46; color: var(--body); margin-top: 22px; max-width: 62ch; }
.article-meta { display: flex; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.avatar-sm {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(155deg, var(--navy-700), var(--navy-900));
  display: grid; place-items: center;
  color: var(--gold-400); font-family: var(--serif); font-weight: 600; font-size: 17px;
  flex-shrink: 0;
}
.article-meta .m-name { font-weight: 600; color: var(--ink); font-size: 14.5px; }
.article-meta .m-sub { font-size: 13px; color: var(--muted); }
.article-meta .m-divider { width: 1px; height: 30px; background: var(--line); }

.article-feature { margin: clamp(32px, 5vw, 52px) 0; }
.article-feature .media { box-shadow: var(--shadow-md); }
.article-feature figcaption { font-size: 13px; color: var(--muted); margin-top: 12px; font-style: italic; }

.article-body { max-width: 720px; margin-inline: auto; }
.article-body > p { font-size: 18px; line-height: 1.78; color: var(--body); margin-bottom: 24px; }
.article-body > p:first-of-type::first-letter {
  float: left; font-family: var(--serif); font-weight: 600;
  font-size: 66px; line-height: 0.78; padding: 8px 12px 0 0; color: var(--ink);
}
.article-body h2 { font-size: clamp(24px, 3vw, 30px); line-height: 1.18; margin: 40px 0 16px; }
.article-body h3 { font-size: 20px; margin: 28px 0 10px; }
.article-body ul, .article-body ol { padding-left: 22px; margin-bottom: 24px; }
.article-body li { margin-bottom: 9px; font-size: 17px; line-height: 1.7; color: var(--body); }
.article-body blockquote {
  border-left: 3px solid var(--gold-500);
  padding: 4px 0 4px 26px; margin: 32px 0;
  font-family: var(--serif); font-style: italic; font-size: clamp(21px, 2.6vw, 26px);
  line-height: 1.4; color: var(--ink);
}
.callout {
  background: var(--tint);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-500);
  padding: 26px 30px; margin: 36px 0; border-radius: var(--radius);
}
.callout h4 {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; color: var(--gold-600); margin-bottom: 14px;
}
.callout ul { margin: 0; padding-left: 0; list-style: none; }
.callout li { position: relative; padding-left: 22px; margin-bottom: 10px; font-size: 16px; color: var(--body); }
.callout li::before { content: ""; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; background: var(--gold-500); border-radius: 1px; }

.author-card {
  display: flex; gap: 20px; align-items: center;
  max-width: 720px; margin: 48px auto 0;
  padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.author-card .m-name { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.author-card p { font-size: 14.5px; color: var(--body-soft); margin-top: 4px; line-height: 1.5; }

.article-tags { max-width: 720px; margin: 36px auto 0; display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
  color: var(--text-mid); background: var(--tint); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 30px;
}

/* ---------- Responsive (v4) ---------- */
@media (max-width: 1000px) {
  .why { grid-template-columns: 1fr; }
  .band-photo__grid { grid-template-columns: 1fr; gap: 26px; }
  .insight-feature { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; }
  .statband__grid { grid-template-columns: 1fr 1fr; gap: 1px; }
  .statband__item { border-left: 0; padding: 18px 0; border-top: 1px solid rgba(245, 243, 238, 0.14); }
  .statband__item:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 860px) {
  .svc-cards { grid-template-columns: 1fr; }
  .hero__visual { padding-left: 0; padding-top: 8px; }
  .hero__media { min-height: 320px; }
  .float-card { left: 14px; bottom: 14px; padding: 14px 18px; animation: none; }
  .hero__stat { padding: 0 18px; }
}
@media (max-width: 560px) {
  .team-grid { grid-template-columns: 1fr 1fr; }
  .statband__grid { grid-template-columns: 1fr; }
  .statband__item:nth-child(2) { border-top: 1px solid rgba(245, 243, 238, 0.14); }
  .hero__stats { gap: 0 0; }
}

/* =============================================================
   Reduced motion
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; }
  .reveal-img { clip-path: none; }
  .hero__main > *, .hero__aside > * { animation: none; }
  .parallax { transform: none !important; }
  .databars span { animation: none !important; transform: none !important; }
  .u-draw::after { animation: none !important; transform: scaleX(1); }
  .marquee__track { animation: none !important; }
  .float-card { animation: none !important; }
  .svc-jump a:hover, .svc-block:hover, .sector:hover { transform: none !important; }
}

/* =============================================================================
   ░░  SERVICES PAGE — editorial redesign  ░░
   Asymmetric intro · alternating image/content service blocks · sector matrix.
   Reuses tokens + .media, .icon-box, .feature__list, .s-index, .lead-serif.
   ============================================================================= */

/* ---------- Asymmetric intro lede ---------- */
.svc-intro {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(28px, 5vw, 76px);
  align-items: start;
}
.svc-intro__head h2 {
  font-size: clamp(27px, 3.6vw, 40px);
  line-height: 1.08;
  margin-top: 16px;
  max-width: 13ch;
}
.svc-intro__lead .lead-serif { margin: 0; }
.svc-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.svc-jump a {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; color: var(--text-mid);
  background: var(--surface); border: 1px solid var(--line);
  padding: 9px 16px; border-radius: var(--radius-pill);
  transition: border-color .3s var(--ease), color .3s var(--ease),
              transform .3s var(--ease), box-shadow .3s var(--ease);
}
.svc-jump a .n { font-family: var(--mono); font-size: 11px; letter-spacing: 1px; color: var(--gold-600); }
.svc-jump a:hover {
  border-color: transparent; box-shadow: var(--shadow-sm);
  color: var(--gold-600); transform: translateY(-2px);
}

/* ---------- Service detail blocks (alternating) ---------- */
.svc-blocks { display: grid; }
.svc-block {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
  padding: clamp(46px, 6.5vw, 88px) 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.svc-block:first-child { border-top: 0; padding-top: clamp(6px, 1vw, 14px); }
.svc-block--rev .svc-block__media { order: 2; }   /* image to the right, body to the left */

/* media side */
.svc-block__media { position: relative; }
.svc-block__media .media { box-shadow: var(--shadow-md); }
.svc-block__tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: #F5F3EE;
  background: rgba(16, 26, 47, 0.6);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 243, 238, 0.2);
  padding: 9px 14px; border-radius: var(--radius-pill);
}
.svc-block__tag .d { width: 6px; height: 6px; background: var(--gold-500); border-radius: 1px; }

/* body side */
.svc-block__body { position: relative; }
.svc-block__ghost {
  position: absolute; top: -0.66em; right: -0.02em; z-index: 0;
  font-family: var(--serif); font-weight: 700; line-height: 1;
  font-size: clamp(96px, 13vw, 164px); letter-spacing: -3px;
  color: rgba(20, 34, 59, 0.05); pointer-events: none; user-select: none;
}
.svc-block--rev .svc-block__ghost { right: auto; left: -0.02em; }
.svc-block__body > *:not(.svc-block__ghost) { position: relative; z-index: 1; }
.svc-block__top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.svc-block__top .s-index { margin: 0; }
.svc-block h3 { font-size: clamp(23px, 3vw, 30px); line-height: 1.1; margin-bottom: 14px; }
.svc-block__body p { font-size: 15.5px; line-height: 1.66; color: var(--body-soft); margin-bottom: 13px; }
.svc-block .feature__list { margin-top: 20px; }
.svc-block__foot {
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 28px; flex-wrap: wrap;
}
.svc-block__out { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--body); max-width: 40ch; }
.svc-block__out strong { font-style: normal; font-weight: 600; color: var(--ink); }

/* ---------- Sector matrix (navy band) ---------- */
.sectors {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: rgba(245, 243, 238, 0.14);
  border: 1px solid rgba(245, 243, 238, 0.14);
  margin-top: clamp(28px, 4vw, 44px);
}
.sector { background: var(--navy-800); padding: 26px 26px 30px; transition: background .35s var(--ease); }
.sector:hover { background: var(--navy-700); }
.sector__ic { display: block; color: var(--gold-400); margin-bottom: 16px; }
.sector__ic .icon { width: 26px; height: 26px; }
.sector h3 { font-size: 18px; color: #F5F3EE; margin-bottom: 7px; }
.sector p { font-size: 13.5px; line-height: 1.55; color: rgba(245, 243, 238, 0.7); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .svc-intro { grid-template-columns: 1fr; gap: 24px; }
  .svc-intro__head h2 { max-width: none; }
  .svc-block { grid-template-columns: 1fr; gap: 26px; padding: 44px 0; }
  .svc-block__media,
  .svc-block--rev .svc-block__media { order: -1; }   /* image always on top on mobile */
  .svc-block__ghost { display: none; }
  .sectors { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .sectors { grid-template-columns: 1fr; }
  .svc-block__foot { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* =============================================================================
   ░░  PORTFOLIO PAGE — editorial redesign  ░░
   Cinematic featured case + outcomes card · selected-work case cards · outcomes.
   Reuses tokens + .media, .svc-block__tag, .icon-box, .why__item, .statband.
   ============================================================================= */

/* ---------- Featured case (2-col inside the cinematic media band) ---------- */
.case-feature {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
.case-feature__lead .work__kicker { margin-top: 14px; }

/* Outcomes card on the dark band */
.case-results {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(245, 243, 238, 0.18);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 32px);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.case-results__h {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--gold-400);
}
.case-results ul { list-style: none; margin: 16px 0 0; padding: 0; }
.case-results li {
  display: grid; grid-template-columns: 20px 1fr; gap: 13px; align-items: start;
  padding: 15px 0; border-top: 1px solid rgba(245, 243, 238, 0.14);
  font-size: 14.5px; line-height: 1.46; color: rgba(245, 243, 238, 0.9);
}
.case-results li:first-child { border-top: 0; padding-top: 2px; }
.case-results li svg { width: 18px; height: 18px; color: var(--gold-400); margin-top: 2px; flex-shrink: 0; }

/* ---------- Selected work — editorial case tiles ---------- */
.case-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 28px); }
.case-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy-900);
  isolation: isolate;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
a.case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.case-card > img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.9s var(--ease);
}
a.case-card:hover > img { transform: scale(1.06); }
.case-card::after {                                   /* navy scrim for legible text (top + bottom) */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top,
      rgba(10, 18, 34, 0.94) 0%, rgba(12, 21, 39, 0.78) 28%,
      rgba(16, 26, 47, 0.30) 58%, rgba(16, 26, 47, 0.05) 100%),
    linear-gradient(to bottom,
      rgba(10, 18, 34, 0.5) 0%, rgba(10, 18, 34, 0) 24%);
  transition: opacity 0.5s var(--ease);
}
a.case-card:hover::after { opacity: 0.92; }
.case-card__inner {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column;
  padding: clamp(20px, 2.2vw, 28px);
}
.case-card__tag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 1.6px; text-transform: uppercase; color: #F5F3EE;
  background: rgba(16, 26, 47, 0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(245, 243, 238, 0.22);
  padding: 7px 13px; border-radius: var(--radius-pill);
}
.case-card__tag .d { width: 6px; height: 6px; background: var(--gold-500); border-radius: 1px; }
.case-card__no {
  position: absolute; top: clamp(14px, 1.6vw, 20px); right: clamp(18px, 2vw, 26px);
  font-family: var(--serif); font-weight: 700; line-height: 1;
  font-size: clamp(42px, 4vw, 56px); color: rgba(245, 243, 238, 0.4);
  text-shadow: 0 2px 18px rgba(10, 18, 34, 0.45);
  transition: color 0.5s var(--ease);
}
a.case-card:hover .case-card__no { color: rgba(216, 166, 98, 0.7); }
.case-card__foot { margin-top: auto; }
.case-card__rule {
  display: block; width: 30px; height: 2px; background: var(--gold-500);
  margin-bottom: 16px; transition: width 0.45s var(--ease);
}
a.case-card:hover .case-card__rule { width: 56px; }
.case-card__foot h3 {
  font-size: clamp(20px, 1.5vw, 23px); line-height: 1.2; color: #F5F3EE; margin-bottom: 10px;
}
.case-card__result {
  font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.5;
  color: rgba(245, 243, 238, 0.82); margin-bottom: 14px;
}
.case-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.9px;
  text-transform: uppercase; color: rgba(245, 243, 238, 0.62); margin-bottom: 16px;
}
.case-card__meta .dot { width: 4px; height: 4px; background: var(--gold-500); border-radius: 1px; }
.case-card__read {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--gold-400);
  transition: gap 0.25s var(--ease), color 0.25s var(--ease);
}
a.case-card:hover .case-card__read { gap: 13px; color: var(--gold-500); }

/* "View all" tile used in More-cases grids on case study pages */
.case-card--cta { display: grid; place-items: center; text-align: center; background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); }
.case-card--cta::after { display: none; }
.case-card--cta .inner { position: relative; z-index: 2; padding: 30px; }
.case-card--cta .n { font-family: var(--serif); font-size: clamp(38px, 4vw, 52px); line-height: 1; color: var(--gold-400); display: block; margin-bottom: 14px; }
.case-card--cta h3 { color: #F5F3EE; font-size: 21px; margin-bottom: 8px; }
.case-card--cta p { color: rgba(245, 243, 238, 0.7); font-size: 14px; line-height: 1.5; margin-bottom: 18px; }

/* ---------- Outcomes band (what every engagement leaves behind) ---------- */
.outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(26px, 3.5vw, 44px); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .case-feature { grid-template-columns: 1fr; gap: 28px; }
  .case-cards { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .outcomes { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .case-cards { grid-template-columns: 1fr; gap: 18px; }
  .case-card { aspect-ratio: 4 / 5; }
}

/* =============================================================================
   ░░  BuildResearch AI — chat widget  ░░
   Floating bubble + dialog panel. Navy + gold, serif name, mobile full-sheet.
   ============================================================================= */
.brchat { font-family: var(--sans); }
html.brchat-lock, html.brchat-lock body { overflow: hidden; }
html.brchat-lock body { position: fixed; left: 0; right: 0; width: 100%; }   /* chat.js sets top:-scrollY and restores it on close */

/* ---------- Floating bubble ---------- */
.brchat__fab {
  position: fixed; z-index: 1000;
  right: calc(clamp(16px, 2.4vw, 26px) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(16px, 2.4vw, 26px) + env(safe-area-inset-bottom, 0px));
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  color: #F5F3EE;
  background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy-900) 78%);
  border: 1px solid rgba(245, 243, 238, 0.16);
  box-shadow: 0 14px 36px rgba(20, 34, 59, 0.34);
  cursor: pointer;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.brchat__fab:hover { transform: translateY(-3px); box-shadow: 0 20px 46px rgba(20, 34, 59, 0.42); }
.brchat__fab > span { grid-area: 1 / 1; display: grid; place-items: center; }
.brchat__fab svg { width: 26px; height: 26px; }
.brchat__fab .ic-close { opacity: 0; transform: rotate(-45deg) scale(0.7); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.brchat__fab .ic-open  { opacity: 1; transform: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.brchat.is-open .brchat__fab .ic-open  { opacity: 0; transform: rotate(45deg) scale(0.7); }
.brchat.is-open .brchat__fab .ic-close { opacity: 1; transform: none; }
/* hover label (desktop) */
.brchat__fab-label {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px);
  white-space: nowrap; font-size: 13px; font-weight: 600; color: #F5F3EE;
  background: var(--navy-800); border: 1px solid rgba(245, 243, 238, 0.14);
  padding: 8px 14px; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm); opacity: 0; pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.brchat__fab:hover .brchat__fab-label { opacity: 1; transform: translateY(-50%); }
.brchat.is-open .brchat__fab-label { display: none; }

/* ---------- Panel ---------- */
.brchat__panel {
  position: fixed; z-index: 1001;
  right: calc(clamp(16px, 2.4vw, 26px) + env(safe-area-inset-right, 0px));
  bottom: calc(clamp(16px, 2.4vw, 26px) + env(safe-area-inset-bottom, 0px) + 62px + 14px);
  width: min(384px, calc(100vw - 32px));
  height: min(580px, calc(100dvh - 140px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(20, 34, 59, 0.32);
  opacity: 0; transform: translateY(16px) scale(0.98); transform-origin: bottom right;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.brchat.is-open .brchat__panel { opacity: 1; transform: none; pointer-events: auto; }

/* header */
.brchat__head {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 14px 15px 18px; color: #F5F3EE;
  background: linear-gradient(150deg, #1b2c4c 0%, var(--navy-900) 76%);
}
.brchat__head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(200, 146, 74, 0.26), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
}
.brchat__avatar {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: var(--gold-400);
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(245, 243, 238, 0.18);
}
.brchat__avatar svg { width: 21px; height: 21px; }
.brchat__id { line-height: 1.2; min-width: 0; }
.brchat__id .name { font-family: var(--serif); font-weight: 600; font-size: 17px; color: #F5F3EE; }
.brchat__close, .brchat__reset {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px;
  display: grid; place-items: center; color: rgba(245, 243, 238, 0.8);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(245, 243, 238, 0.14);
  cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.brchat__reset { margin-left: auto; }
.brchat__close { margin-left: 6px; }
.brchat__close:hover, .brchat__reset:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.brchat__close svg { width: 17px; height: 17px; }
.brchat__reset svg { width: 15px; height: 15px; }
.brchat__handle {
  display: none; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px;
  border-radius: 2px; background: rgba(245, 243, 238, 0.35);
}

/* messages */
.brchat__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 15px; background: var(--tint-cool);
  display: flex; flex-direction: column; gap: 13px;
  scroll-behavior: smooth;
}
.brchat__msg { display: flex; gap: 9px; align-items: flex-end; max-width: 100%; }
.brchat__msg .av {
  width: 27px; height: 27px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; color: var(--gold-400); background: var(--navy-800);
}
.brchat__msg .av svg { width: 15px; height: 15px; }
.brchat__bubble {
  font-size: 14px; line-height: 1.5; padding: 11px 14px; border-radius: 14px;
  max-width: 80%; word-wrap: break-word;
}
.brchat__msg--bot .brchat__bubble {
  background: var(--surface); border: 1px solid var(--line); color: var(--body);
  border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm);
}
.brchat__msg--user { flex-direction: row-reverse; }
.brchat__msg--user .brchat__bubble {
  background: var(--navy-800); color: #F5F3EE; border-bottom-right-radius: 5px;
}
.brchat__bubble a { color: var(--gold-600); font-weight: 600; border-bottom: 1px solid rgba(200, 146, 74, 0.5); }
.brchat__bubble a:hover { color: var(--gold-500); }
.brchat__msg--user .brchat__bubble a { color: var(--gold-400); border-bottom-color: rgba(216, 166, 98, 0.6); }
.brchat__bubble strong { color: var(--ink); font-weight: 600; }
.brchat__msg--user .brchat__bubble strong { color: #fff; }

/* typing dots */
.brchat__typing { display: inline-flex; align-items: center; gap: 5px; }
.brchat__typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--navy-300); animation: brchatBlink 1.1s infinite; }
.brchat__typing span:nth-child(2) { animation-delay: 0.18s; }
.brchat__typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes brchatBlink { 0%, 75%, 100% { opacity: 0.28; transform: translateY(0); } 38% { opacity: 1; transform: translateY(-2px); } }

/* suggestion chips */
.brchat__sugg { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 36px; }
.brchat__sugg button {
  font-size: 12.5px; font-weight: 600; color: var(--text-mid);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 8px 14px; cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.brchat__sugg button:hover { border-color: var(--gold-500); color: var(--gold-600); background: var(--surface); }

/* footer / input */
.brchat__foot { background: var(--surface); border-top: 1px solid var(--line); padding: 12px 12px 10px; }
.brchat__form { display: flex; gap: 8px; align-items: center; }
.brchat__input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14px; color: var(--ink);
  background: var(--tint-cool); border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 12px 16px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}
.brchat__input::placeholder { color: var(--text-faint); }
.brchat__input:focus { outline: none; background: var(--surface); border-color: var(--gold-500); box-shadow: 0 0 0 3px rgba(200, 146, 74, 0.16); }
.brchat__send {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: none;
  display: grid; place-items: center; color: var(--gold-400); background: var(--navy-800);
  cursor: pointer; transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.brchat__send:hover { background: var(--navy-700); }
.brchat__send:active { transform: scale(0.94); }
.brchat__send svg { width: 18px; height: 18px; margin-left: -1px; }
.brchat__note { font-size: 10.5px; line-height: 1.4; color: var(--muted); text-align: center; margin-top: 9px; }
.brchat__note a { color: var(--gold-600); border-bottom: 1px solid rgba(200, 146, 74, 0.5); }

/* rich replies (markdown-lite from the assistant: paragraphs, lists) */
.brchat__bubble p { margin: 0 0 8px; }
.brchat__bubble ul, .brchat__bubble ol { margin: 2px 0 8px; padding-left: 18px; }
.brchat__bubble li { margin: 3px 0; }
.brchat__bubble li::marker { color: var(--gold-500); }
.brchat__bubble > :last-child { margin-bottom: 0; }
/* waiting on the assistant */
.brchat__send[disabled] { opacity: 0.55; cursor: progress; }
.brchat__send[disabled]:hover { background: var(--navy-800); }
.brchat__send[disabled]:active { transform: none; }

/* ---------- Touch devices ---------- */
.brchat__fab, .brchat__close, .brchat__reset, .brchat__send, .brchat__sugg button {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;   /* no 300ms delay / double-tap zoom */
}
.brchat__panel { overscroll-behavior: contain; }
.brchat__body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (hover: none) and (pointer: coarse) {
  .brchat__input { font-size: 16px; }   /* below 16px iOS zooms the whole page when the field is focused */
}

/* ---------- Phones & short viewports: full-screen sheet ----------
   Keep this query in sync with MOBILE_MQ in js/chat.js. chat.js sizes the panel to
   the visual viewport (keyboard, URL bar), pins the page behind it, and adds
   swipe-down / back-button closing. */
@media (max-width: 560px), (max-height: 520px) {
  .brchat__panel {
    top: 0; right: 0; bottom: auto; left: 0;
    width: auto; height: 100vh; height: 100dvh;
    max-height: none; border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top, 0px);
    opacity: 1; visibility: hidden; transform: translateY(100%);
    transition: transform 0.32s var(--ease), visibility 0s linear 0.32s;
  }
  .brchat.is-open .brchat__panel { visibility: visible; transform: none; transition: transform 0.32s var(--ease); }
  .brchat__head { padding: 16px 10px 12px 16px; }
  .brchat__handle { display: block; }
  .brchat__close, .brchat__reset { width: 42px; height: 42px; border-radius: 10px; }
  .brchat__close svg { width: 19px; height: 19px; }
  .brchat__reset svg { width: 17px; height: 17px; }
  .brchat__body { padding: 16px 14px; gap: 12px; }
  .brchat__bubble { font-size: 15px; max-width: 86%; padding: 11px 14px; }
  .brchat__sugg { padding-left: 36px; }
  .brchat__sugg button { min-height: 42px; padding: 10px 16px; font-size: 14px; }
  .brchat__foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .brchat__input { font-size: 16px; padding: 13px 16px; }
  .brchat__send { width: 46px; height: 46px; }
  .brchat__note { font-size: 11.5px; margin-top: 8px; }
  .brchat__fab { width: 56px; height: 56px; }
  .brchat.is-open .brchat__fab { opacity: 0; transform: scale(0.5); pointer-events: none; }
}

/* Short viewports (landscape phones): compact chrome so the conversation gets the height */
@media (max-height: 520px) {
  .brchat__head { padding: 12px 10px 8px 14px; gap: 10px; }
  .brchat__avatar { width: 34px; height: 34px; }
  .brchat__avatar svg { width: 17px; height: 17px; }
  .brchat__id .name { font-size: 16px; }
  .brchat__close, .brchat__reset { width: 38px; height: 38px; }
  .brchat__body { padding: 12px 14px; gap: 10px; }
  .brchat__foot { padding-top: 8px; }
  .brchat__input { padding: 10px 14px; }
  .brchat__send { width: 42px; height: 42px; }
  .brchat__note { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .brchat__typing span { animation: none !important; }
  .brchat__panel { transition: none !important; }
}

/* =============================================================
   Theme toggle control
   Sits in the header bar so it stays reachable on mobile, where
   the nav collapses behind the hamburger.
   ============================================================= */
.nav { justify-content: flex-start; }
.nav > .brand { margin-right: auto; }

.theme-toggle {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-strong);
  padding: 0;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
              color 0.25s var(--ease), transform 0.35s var(--ease-out);
}
.theme-toggle:hover,
.theme-switch.is-open .theme-toggle {
  border-color: var(--gold-500);
  color: var(--gold-600);
}
.theme-switch.is-open .theme-toggle { background: var(--tint); }
.theme-toggle svg { width: 17px; height: 17px; display: none; transition: transform 0.45s var(--ease-out); }
.theme-toggle:hover svg { transform: rotate(-14deg); }
/* The button shows the visitor's choice: sun, moon, or a screen for "Device" */
[data-theme-pref="light"] .theme-toggle .icon-sun,
[data-theme-pref="dark"] .theme-toggle .icon-moon,
[data-theme-pref="system"] .theme-toggle .icon-system,
html:not([data-theme-pref]) .theme-toggle .icon-system { display: block; }

/* The theme menu: a small frosted panel under the button */
.theme-switch { position: relative; flex: none; display: flex; z-index: 95; }
.theme-menu {
  --tm-bg: rgba(255, 255, 255, 0.94);
  position: absolute; top: calc(100% + 12px); right: -6px;
  min-width: 204px; padding: 6px;
  background: var(--tm-bg);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
          backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20, 34, 59, 0.06), 0 22px 48px -14px rgba(20, 34, 59, 0.30);
  transform-origin: calc(100% - 26px) 0;
  animation: themeMenuIn 0.2s var(--ease-out);
}
.theme-menu[hidden] { display: none; }
/* a small pointer up to the button */
.theme-menu::before {
  content: ""; position: absolute; top: -6px; right: 21px;
  width: 11px; height: 11px; transform: rotate(45deg);
  background: var(--tm-bg);
  border-top: 1px solid var(--line); border-left: 1px solid var(--line);
  border-top-left-radius: 3px;
  clip-path: polygon(0 0, 100% 0, 0 100%);   /* only the half above the panel */
}
@keyframes themeMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.theme-menu__title {
  position: relative;
  padding: 8px 10px 7px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--muted);
}
.theme-menu__item {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 10px 11px;
  border: 0; border-radius: 9px; background: transparent;
  font-family: var(--sans); font-size: 14.5px; font-weight: 500; line-height: 1.2; text-align: left;
  color: var(--text-mid);
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.theme-menu__item + .theme-menu__item { margin-top: 2px; }
.theme-menu__item:hover, .theme-menu__item:focus-visible { background: var(--tint); color: var(--text-strong); }
.theme-menu__item:focus-visible { outline: 2px solid var(--gold-600); outline-offset: -2px; }
.theme-menu__icon { width: 17px; height: 17px; flex: none; color: var(--muted); transition: color 0.18s var(--ease); }
.theme-menu__label { flex: 1; }
.theme-menu__hint { font-size: 12px; font-weight: 500; color: var(--muted); }
.theme-menu__check { width: 15px; height: 15px; flex: none; color: var(--gold-600); stroke-width: 2.4; opacity: 0; transform: scale(0.6); transition: opacity 0.18s var(--ease), transform 0.25s var(--ease-out); }
.theme-menu__item[aria-checked="true"] { color: var(--ink); font-weight: 600; }
.theme-menu__item[aria-checked="true"] .theme-menu__icon { color: var(--gold-600); }
.theme-menu__item[aria-checked="true"] .theme-menu__check { opacity: 1; transform: none; }
[data-theme="dark"] .theme-menu {
  --tm-bg: rgba(18, 18, 22, 0.94);
  border-color: var(--line-strong);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 24px 56px -12px rgba(0, 0, 0, 0.9);
}
[data-theme="dark"] .theme-menu::before { border-color: var(--line-strong); }
[data-theme="dark"] .theme-menu__item:hover, [data-theme="dark"] .theme-menu__item:focus-visible { background: rgba(245, 243, 238, 0.07); }

@media (max-width: 860px) {
  .theme-switch { margin-right: 4px; }
  .theme-toggle { width: 38px; height: 38px; }
  .theme-menu { right: -4px; }
  .theme-menu::before { right: 18px; }
}
@media print { .theme-switch { display: none !important; } }

/* =============================================================
   Dark theme — component refinements
   Tokens handle surfaces and text; these are the cases where a
   component needs a different *decision* on black, not just a
   different value.
   ============================================================= */

/* The wordmark is dark artwork — invert it onto black */
[data-theme="dark"] .brand__logo { filter: brightness(0) invert(1); }

/* Navy panels flatten toward black so the page reads black, not blue */
[data-theme="dark"] .statband,
[data-theme="dark"] .band-navy,
[data-theme="dark"] .site-footer,
[data-theme="dark"] .sector,
[data-theme="dark"] .work__media--navy { background: #0A0A0A; }
[data-theme="dark"] .sector:hover { background: #171717; }
[data-theme="dark"] .statband,
[data-theme="dark"] .band-navy { border-block: 1px solid var(--line); }
[data-theme="dark"] .site-footer { border-top: 1px solid var(--line); }

/* Navy-on-black has no presence — the primary CTA becomes gold */
[data-theme="dark"] .btn--primary { background: var(--gold-500); color: #000; }
[data-theme="dark"] .btn--primary:hover { background: var(--gold-400); }
[data-theme="dark"] .btn--ghost:hover { background: var(--cream); color: #000; }
[data-theme="dark"] .nav__cta { color: #000 !important; }

/* Photography is dimmed so it sits on black instead of glaring off it */
[data-theme="dark"] .media img,
[data-theme="dark"] .case-card img,
[data-theme="dark"] .band-photo__bg img,
[data-theme="dark"] .avatar img { filter: brightness(0.80) contrast(1.04) saturate(0.94); }
[data-theme="dark"] .section--media { background: #000; }
[data-theme="dark"] .section-bg img { filter: brightness(0.8) contrast(1.04) saturate(0.94); }
[data-theme="dark"] .section-bg::after {
  background: linear-gradient(100deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.86) 40%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.45) 100%);
}
[data-theme="dark"] .section--media .case-results { background: rgba(0, 0, 0, 0.58); }
@media (max-width: 860px) {
  [data-theme="dark"] .section-bg::after { background: rgba(0, 0, 0, 0.86); }
}
[data-theme="dark"] .band-photo::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.86) 48%, rgba(0, 0, 0, 0.55) 100%);
}

/* Cards need a visible edge once the drop shadow stops reading on black */
[data-theme="dark"] .svc-card,
[data-theme="dark"] .stat,
[data-theme="dark"] .float-card,
[data-theme="dark"] .author-card { border: 1px solid var(--line); box-shadow: none; }
[data-theme="dark"] .svc-card:hover { border-color: var(--gold-600); }

/* Gold selection stays legible */
[data-theme="dark"] ::selection { background: var(--gold-500); color: #000; }

/* =============================================================
   Motion system
   One primitive — [data-anim] — with a shared stagger channel
   (--i). The existing .reveal classes still work; these add
   range and let any group stagger without hand-set delays.
   ============================================================= */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform, filter, clip-path;
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out),
    filter 0.85s var(--ease-out),
    clip-path 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 85ms);
}
[data-anim].is-in { opacity: 1; transform: none; filter: none; }

[data-anim="fade"]        { transform: none; }
[data-anim="up"]          { transform: translateY(34px); }
[data-anim="down"]        { transform: translateY(-26px); }
[data-anim="left"]        { transform: translateX(-42px); }
[data-anim="right"]       { transform: translateX(42px); }
[data-anim="scale"]       { transform: scale(0.93); }
[data-anim="blur"]        { transform: translateY(20px); filter: blur(14px); }
[data-anim="rise"]        { transform: translateY(46px) scale(0.98); }

/* Masked wipe — the text slides up from behind its own edge */
[data-anim="clip"] {
  opacity: 1;
  clip-path: inset(0 0 100% 0);
  transform: translateY(14px);
}
[data-anim="clip"].is-in { clip-path: inset(0 0 -0.15em 0); transform: none; }

/* Auto-stagger: children of a .stagger group inherit an increasing --i,
   so a grid animates in sequence without per-element data-delay. */
.stagger > *:nth-child(1)  { --i: 0; }
.stagger > *:nth-child(2)  { --i: 1; }
.stagger > *:nth-child(3)  { --i: 2; }
.stagger > *:nth-child(4)  { --i: 3; }
.stagger > *:nth-child(5)  { --i: 4; }
.stagger > *:nth-child(6)  { --i: 5; }
.stagger > *:nth-child(7)  { --i: 6; }
.stagger > *:nth-child(8)  { --i: 7; }
.stagger > *:nth-child(9)  { --i: 8; }
.stagger > *:nth-child(10) { --i: 9; }

/* Longer, softer travel on the original reveal primitives */
.reveal { transform: translateY(30px); transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out); }
.reveal-img { transition: clip-path 1.05s var(--ease-out); }

/* Section index numbers count into view alongside their heading */
.s-index { transition: opacity 0.7s var(--ease-out) 0.1s, letter-spacing 0.9s var(--ease-out) 0.1s; }
.reveal .s-index, [data-anim] .s-index { letter-spacing: 3px; }
.reveal.is-in .s-index, [data-anim].is-in .s-index { letter-spacing: 1px; }

/* Scroll-linked header underline sweep (progressive enhancement) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-title, .s-head h2 {
      animation: titleRise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 26%;
    }
    @keyframes titleRise {
      from { opacity: 0; transform: translateY(28px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* Micro-interactions */
.svc-card, .work, .insight, .case-card, .member {
  transition: transform 0.45s var(--ease-out), border-color 0.35s var(--ease),
              background 0.35s var(--ease), box-shadow 0.45s var(--ease-out);
}
.svc-card:hover, .insight:hover, .member:hover { transform: translateY(-6px); }
.btn { transition: background 0.28s var(--ease), color 0.28s var(--ease),
                   transform 0.3s var(--ease-out), box-shadow 0.35s var(--ease-out); }

/* Respect the user's motion preference across every primitive above */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-anim],
  [data-anim].is-in {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .reveal, .reveal-img, .theme-toggle, .btn, .svc-card, .work, .insight, .case-card, .member {
    transition: none !important;
    animation: none !important;
  }
  .svc-card:hover, .insight:hover, .member:hover, .btn:hover { transform: none; }
}

/* =============================================================
   Navy band content colouring
   Text on the navy band takes its colour from the band itself
   rather than from per-element inline styles.
   ============================================================= */
.band-navy .section-title,
.band-navy h2,
.band-navy h3,
.band-navy h4 { color: var(--cream); }
.band-navy p { color: rgba(245, 243, 238, 0.72); }
.band-navy .s-index { color: var(--gold-400); }
.band-navy .values { background: rgba(245, 243, 238, 0.14); border-color: rgba(245, 243, 238, 0.14); }
.band-navy .value { background: var(--navy-800); }
.band-navy .value:hover { background: var(--navy-700); }

[data-theme="dark"] .band-navy .value { background: #050505; }
[data-theme="dark"] .band-navy .value:hover { background: #141414; }
[data-theme="dark"] .band-navy .values { background: rgba(245, 243, 238, 0.12); border-color: rgba(245, 243, 238, 0.12); }

/* =============================================================
   Hero entrance
   Heroes sit above the fold, so they animate on load rather than
   waiting for a scroll intersection. Pure CSS — no observer.
   ============================================================= */
.hero__main.stagger > *,
.page-hero .stagger > * {
  opacity: 0;
  transform: translateY(26px);
  animation: heroIn 0.95s var(--ease-out) forwards;
  animation-delay: calc(var(--i, 0) * 95ms + 120ms);
}
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* The gold underline on the hero word draws itself in after the title lands */
.hero__main.stagger .u-draw { animation-delay: 700ms; }

@media (prefers-reduced-motion: reduce) {
  .hero__main.stagger > *,
  .page-hero .stagger > * { opacity: 1; transform: none; animation: none; }
}

/* Let .reveal share the stagger channel so a grid can sequence its children
   without hand-written data-delay on each one. */
.reveal { transition-delay: calc(var(--i, 0) * 85ms); }

/* Inside a .stagger group the shared --i channel governs sequencing, so it
   must win over any hand-set [data-delay] on the same element. Equal
   specificity, declared last. */
.stagger > .reveal { transition-delay: calc(var(--i, 0) * 85ms); }

/* The dark-theme primary button is gold, which would vanish on the gold CTA
   band — there it stays navy. */
[data-theme="dark"] .cta-gold .btn--primary { background: var(--navy-900); color: var(--cream); }
[data-theme="dark"] .cta-gold .btn--primary:hover { background: var(--navy-800); }

/* =============================================================
   Dark theme — remove every trace of blue
   The navy token ramp already flattens to neutral greys above.
   These are the literal blue values baked into gradients, image
   scrims, textures and shadows, which tokens cannot reach.
   ============================================================= */

/* Chat widget — launcher, panel header, send button */
[data-theme="dark"] .brchat__fab {
  background: linear-gradient(160deg, #1A1A1A 0%, #000 78%);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.72);
}
[data-theme="dark"] .brchat__fab:hover { box-shadow: 0 20px 46px rgba(0, 0, 0, 0.85); }
[data-theme="dark"] .brchat__head { background: linear-gradient(150deg, #161616 0%, #000 76%); }
[data-theme="dark"] .brchat__panel { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8); }

/* Enquiry aside panel */
[data-theme="dark"] .enquiry__aside { background: linear-gradient(165deg, #161616 0%, #000 72%); }

/* Image washes and duotone tints */
[data-theme="dark"] .media--duotone::after {
  background: linear-gradient(150deg, rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.16) 55%, rgba(200, 146, 74, 0.18));
}
[data-theme="dark"] .avatar::after {
  background: linear-gradient(150deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.06) 55%, rgba(200, 146, 74, 0.14));
}
[data-theme="dark"] .hero__media::after {
  background: linear-gradient(155deg, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0.16) 55%, rgba(200, 146, 74, 0.22));
}
[data-theme="dark"] .figure-img::after {
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.24), rgba(0, 0, 0, 0));
}

/* Full-bleed photo heroes */
[data-theme="dark"] .hero--image {
  background-image:
    linear-gradient(165deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0.70) 52%, rgba(0, 0, 0, 0.84) 100%),
    url("../assets/images/story.jpg");
}
[data-theme="dark"] .hero__aside {
  background:
    linear-gradient(155deg, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.84) 50%, rgba(0, 0, 0, 0.93) 100%),
    #000 url("../assets/images/hero-aside.jpg") center / cover no-repeat;
}

/* Case-card scrim */
[data-theme="dark"] .case-card::after {
  background:
    linear-gradient(to top,
      rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.80) 28%,
      rgba(0, 0, 0, 0.34) 58%, rgba(0, 0, 0, 0.06) 100%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 24%);
}
[data-theme="dark"] .case-card__tag { background: rgba(0, 0, 0, 0.62); }
[data-theme="dark"] .svc-block__tag { background: rgba(0, 0, 0, 0.7); }

/* Blueprint dot texture — navy dots are invisible on black */
[data-theme="dark"] .hero::before {
  background-image: radial-gradient(rgba(245, 243, 238, 0.055) 1px, transparent 1.4px);
}
[data-theme="dark"] .page-hero::before {
  background-image: radial-gradient(rgba(245, 243, 238, 0.05) 1px, transparent 1.4px);
}

/* Oversized ghost numerals */
[data-theme="dark"] .s-ghost,
[data-theme="dark"] .svc-block__ghost { color: rgba(245, 243, 238, 0.055); }

/* Shadows carry a navy tint that reads blue against black */
[data-theme="dark"] .nav__cta { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .globe-stage.globe-fallback::after {
  box-shadow: inset -22px -12px 46px rgba(0, 0, 0, 0.6), 0 24px 54px rgba(0, 0, 0, 0.5);
}

/* Remaining blue-tinted shadows, scrims and placeholder fills */
[data-theme="dark"] .site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55); }
[data-theme="dark"] .band-photo--center::after { background: rgba(0, 0, 0, 0.86); }
[data-theme="dark"] .case-card__no { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .globe-stage.globe-fallback::after {
  background: #000 url("../assets/images/hero-aside.jpg") center / cover;
}

/* Contact: without WebGL the stage shows a still rendered from its own scene
   (the envelope, open on an enquiry), not the globe photograph */
.globe-stage--talk.globe-fallback::after,
[data-theme="dark"] .globe-stage--talk.globe-fallback::after {
  width: min(84%, 440px);
  aspect-ratio: 971 / 1059;
  max-height: 100%;                  /* phones: the stage is shorter than the still is tall */
  border-radius: 0;
  box-shadow: none;
  background: url("../assets/images/contact-envelope.webp") center / contain no-repeat;
}
[data-theme="dark"] .globe-stage--talk.globe-fallback::after {
  background-image: url("../assets/images/contact-envelope-dark.webp");
}

/* =============================================================
   3D scene replay control
   Only revealed by script once WebGL is confirmed, so it never
   appears above the static fallback image.
   ============================================================= */
.model-replay {
  position: absolute;
  left: 50%;
  bottom: 11%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-strong);
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease),
              background 0.25s var(--ease), transform 0.3s var(--ease-out);
}
.model-replay svg { width: 15px; height: 15px; }
.model-replay:hover {
  border-color: var(--gold-500);
  color: var(--gold-600);
  transform: translateX(-50%) translateY(-2px);
}
.model-replay[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .model-replay:hover { transform: translateX(-50%); }
}

/* =============================================================
   Section photography
   Imagery for the sections that used to be text only.
   ============================================================= */

/* Home, the collective: copy beside a two-photo composition */
.collective {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(36px, 5.5vw, 80px);
  align-items: center;
  margin-top: -26px;
}
.collective__media {
  position: relative;
  padding: 0 0 clamp(44px, 6vw, 70px) clamp(36px, 5vw, 64px);
}
.collective__main { aspect-ratio: 4 / 3; box-shadow: var(--shadow-md); }
.collective__inset {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 42%;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--surface);
  box-shadow: var(--shadow-md);
}
.collective__card.float-card { left: auto; right: -18px; top: clamp(18px, 4vw, 40px); bottom: auto; }
@media (max-width: 920px) {
  .collective { grid-template-columns: 1fr; margin-top: -10px; }
  .collective__media { max-width: 640px; }
  .collective__card.float-card { right: 12px; }
}
@media (max-width: 600px) {
  .collective__media { padding: 0 0 36px 20px; }
  .collective__inset { width: 46%; border-width: 4px; }
  .collective__card.float-card { top: 12px; padding: 12px 16px 11px; max-width: 176px; }
  .collective__card .fc-n { font-size: 22px; }
}

/* Think Tank, how we operate: photo-topped cards */
.svc-card--photo { padding-top: 0; }
.svc-card__media { aspect-ratio: 16 / 10; margin: 0 -30px; border-radius: 0; }
.svc-card--photo .icon-box {
  margin-top: -28px;
  z-index: 2;
  outline: 4px solid var(--surface);
  box-shadow: 0 10px 24px rgba(20, 34, 59, 0.22);
}
.svc-card--photo:hover .media img { transform: scale(1.05); }
[data-theme="dark"] .svc-card--photo .icon-box { box-shadow: none; }

/* Portfolio, what every engagement leaves behind */
.outcome__media { margin-bottom: 24px; }
.outcome:hover .outcome__media img { transform: scale(1.04); }

/* About, the disciplines the collective covers: photo tiles, not portraits */
.avatar--photo { aspect-ratio: 4 / 3; place-items: start; }
.avatar--photo span {
  position: relative;
  z-index: 3;
  margin: 12px;
  padding: 6px 11px 5px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.5px;
  color: var(--cream);
  background: rgba(11, 20, 38, 0.66);
  border: 1px solid rgba(245, 243, 238, 0.2);
  border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
[data-theme="dark"] .avatar--photo span { background: rgba(0, 0, 0, 0.66); }