/* ============================================================
   QuantDesigned — variant 02: David's Colours
   Palette: dark navy #0A1F3F / teal #1A7A8A / charcoal body
   Type: Montserrat (headings) + Inter (body)
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --navy: #0A1F3F;
  --navy-700: #1B3A5C;
  --navy-50: #E8F2F5;
  --ink: #2C3E50;
  --ink-soft: #4A5568;
  --grey-50: #F2F4F6;
  --grey-100: #ECEEF1;
  --grey-200: #E8EAED;
  --grey-300: #D0D3D9;
  --white: #ffffff;
  --accent: #1A7A8A;    /* muted teal — links, icons, CTAs, highlights */
  --accent-dark: #145F6B;
  --max-w: 1140px;
  --gap: 1.25rem;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(10, 31, 63, 0.06), 0 2px 8px rgba(10, 31, 63, 0.05);
  --shadow-md: 0 4px 14px rgba(10, 31, 63, 0.12);
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Montserrat", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --transition: 180ms ease;
  /* ---- Type scale ---- */
  --fs-label: 1.06rem;
  --fs-sm: 1.18rem;
  --fs-base: 1.25rem;
  --fs-md: 1.42rem;
  --fs-lg: 1.53rem;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* prevent horizontal scroll from any rogue overflow */
}
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-dark); text-decoration: underline; }
ul { padding-left: 1.25rem; }
li { margin: 0.3rem 0; }

/* ---------- Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.section { padding: 4.5rem 0; }
.section--tight { padding: 3rem 0; }
.section--navy {
  background: var(--navy);
  color: var(--white);
}
.section--navy a { color: var(--white); text-decoration: underline; }
.section--grey { background: var(--grey-50); }
.section--blue-light { background: var(--navy-50); }
.section--bordered { border-top: 1px solid var(--grey-200); border-bottom: 1px solid var(--grey-200); }

/* ---------- Dark hero (shared across all page tops) ---------- */
/* Static dark base for inner-page heroes; the homepage layers the live
   animation on top. Keeps one hero palette so teal never clashes with navy. */
.section--hero-dark {
  position: relative;
  overflow: hidden;
  color: var(--white);
  /* Constant hero-band height across inner pages (matches how-we-work).
     min-height keeps shorter heroes uniform; richer pages (e.g. contact)
     still expand rather than clip. Copy is vertically centred in the band. */
  min-height: 26rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(135% 95% at 50% 6%, rgba(10,31,63,0.75) 0%, rgba(5,20,45,0.30) 38%, rgba(2,8,20,0) 70%),
    radial-gradient(120% 85% at 50% 108%, rgba(10,31,63,0.55) 0%, rgba(2,8,20,0) 55%),
    #0A1F3F;
}
/* Darkening veil over the dot-wave so white copy stays legible — sits above
   the canvas but below the text container (z-index:1). Strongest top & bottom
   where the headline and lead sit. */
.section--hero-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(2,7,14,0.62) 0%,
    rgba(2,7,14,0.40) 42%,
    rgba(2,7,14,0.50) 100%);
}
.section--hero-dark > .container { position: relative; z-index: 1; }
.section--hero-dark h1, .section--hero-dark h2,
.section--hero-dark h3, .section--hero-dark h4 { color: var(--white); }
/* Larger, more commanding hero type on inner pages */
.section--hero-dark h1 { font-size: clamp(2.95rem, 5.9vw, 4.43rem); margin-bottom: 0.75rem; }
.section--hero-dark .hero__sub,
.section--hero-dark .contact-hero .lead { font-size: clamp(1.42rem, 2.24vw, 1.71rem); line-height: 1.5; }
.section--hero-dark .hero__sub { max-width: none; }
.section--hero-dark .lead,
.section--hero-dark p { color: rgba(255,255,255,0.85); }
.section--hero-dark a { color: var(--white); }
.section--hero-dark .muted { color: rgba(255,255,255,0.65); }
.section--hero-dark .btn { text-decoration: none; }
.section--hero-dark .btn--ghost { color: var(--white); border-color: var(--white); }
.section--hero-dark .btn--ghost:hover { background: var(--white); color: var(--navy); }

/* dot-wave canvas layer (homepage = animated, inner pages = single static frame) */
#wave-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: brightness(0.75); }

.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.6em;
  letter-spacing: 0em;
  font-weight: 700;
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
h1 { font-size: clamp(2.36rem, 4.48vw, 3.54rem); font-weight: 800; }
h2 { font-size: clamp(1.89rem, 3.07vw, 2.48rem); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.04em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p  { margin: 0 0 1em; }
.lead { font-size: var(--fs-md); color: var(--ink-soft); }

/* teal rule under section h2s */
.section h2::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  background: var(--accent);
  margin-top: 0.6rem;
  margin-bottom: 0.4rem;
}
.section--navy h2::after { background: rgba(255,255,255,0.4); }
.hero h2::after, .accordion__btn h2::after, .faq__btn h2::after,
.section--hero-dark h2::after, .cta-banner h2::after,
.tier h2::after, .card h2::after, .partner-card h2::after,
.member h2::after, .step h2::after { display: none; }

.section-intro { margin-bottom: 2.5rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-base);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  line-height: 1.2;
}
.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-dark); color: var(--white); text-decoration: none; }
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy-700);
}
.btn--ghost:hover { background: var(--navy); color: var(--white); text-decoration: none; }
.section--navy .btn--ghost { color: var(--white); border-color: var(--white); }
.section--navy .btn--ghost:hover { background: var(--white); color: var(--navy); }
.btn--lg { padding: 1rem 2rem; font-size: var(--fs-md); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  backdrop-filter: saturate(140%) blur(6px);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 0;
}
.nav__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.nav__brand:hover { text-decoration: none; }
.nav__brand-logo {
  display: block;
  height: 44.28px; /* textmark, +25% */
  width: auto;
}
@media (max-width: 480px) {
  .nav__brand-logo { height: 37.95px; } /* textmark, +25% */
}

/* narrow phones: let long hero words (e.g. "Collaborations") shrink and wrap
   instead of clipping against the overflow-hidden hero edge. break-word only
   splits a word too long to fit on its own line, and never inserts a hyphen —
   so ordinary words like "financial" wrap whole rather than being split. */
@media (max-width: 430px) {
  .section--hero-dark h1 {
    font-size: clamp(2.1rem, 8.5vw, 2.95rem);
    overflow-wrap: break-word;
  }
}
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  color: var(--ink);
  font-weight: 500;
  font-size: 1.25rem; /* top menu, +25% */
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.nav__links a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.nav__links a.is-active {
  color: var(--navy);
  border-bottom-color: var(--accent);
}
.nav__cta { margin-left: 0.5rem; }
.nav__mega-toggle { display: none; }
/* Override the .nav__links a colour rule for the CTA button itself */
.nav__links a.btn--primary,
.nav__links a.btn--primary:hover,
.nav__links a.btn--primary:focus,
.nav__links a.btn--primary:visited { color: var(--white); }

.nav__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  width: 42px;
  height: 38px;
  cursor: pointer;
  padding: 0;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
  display: block;
  position: relative;
  height: 2px;
  width: 20px;
  background: var(--navy);
  margin: 0 auto;
  transition: transform var(--transition), top var(--transition);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top:  6px; }


/* ---------- Solutions dropdown ---------- */
.nav__item--has-dropdown { position: relative; }

.nav__dropdown-toggle {
  font: inherit;
  color: var(--ink);
  font-weight: 500;
  font-size: 1.25rem;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.35rem 0;
  margin: 0;
  cursor: pointer;
  display: block;
  line-height: inherit;
}
.nav__item--has-dropdown:hover .nav__dropdown-toggle,
.nav__dropdown-toggle[aria-expanded="true"],
.nav__dropdown-toggle.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Hidden state — themed after the barecovetech hover panel */
.nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  z-index: 200;
}
.nav__item--has-dropdown:hover .nav__dropdown,
.nav__item--has-dropdown:focus-within .nav__dropdown,
.nav__dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}
.nav__dropdown a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-size: 1.25rem;
  color: var(--ink);
  border-bottom: 0;
  white-space: nowrap;
}
.nav__dropdown a:hover,
.nav__dropdown a.is-active { color: var(--accent); background: var(--grey-50); border-bottom: 0; }

/* ---------- Full-width hover mega banners ---------- */
.nav__mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  border-bottom: 1px solid var(--grey-200);
  box-shadow: var(--shadow-md);
  padding: 1.8rem 0;
  min-height: 320px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
  z-index: 150;
}
.nav__mega > .container {
  display: flex;
  justify-content: center;
  gap: 4rem;
  padding-left: 24rem;
}
.nav__mega > .container > div {
  flex: 0 1 320px;
  text-align: left;
}
.nav__mega--contact > .container {
  gap: 7rem;
}
.nav__mega--contact > .container > div:first-child {
  flex-basis: 420px;
}
.nav__mega h4 { margin: 0 0 .5rem; color: var(--navy); font-size: 2.028rem; white-space: nowrap; }
.nav__mega h4 a { display: inline; padding: 0; color: var(--navy); font-size: 2.028rem; font-weight: inherit; }
.nav__mega p { margin: 0 0 .5rem; color: var(--ink); font-size: 1.5rem; }
.nav__mega ul { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 3px solid var(--accent); }
.nav__mega li { font-size: 1.5rem; }
.nav__mega a { display: block; padding: .4rem 0; color: var(--ink); font-size: 1.5rem; border-bottom: none; }
.nav__mega a:hover { color: var(--accent); }
.nav__mega-logo {
  position: absolute;
  /* Align the logo's left edge with the centred content column — the same x as
     the static wordmark in the nav bar — rather than the viewport edge. The
     mega panel is full-bleed (its containing block is .site-header, which has no
     max-width), so 50% is half the viewport; subtracting half of --max-w lands
     on the container's outer edge and +1.25rem reaches its content edge. Falls
     back to the 1.25rem container padding on viewports narrower than --max-w. */
  left: max(1.25rem, calc(50% - var(--max-w) / 2 + 1.25rem));
  /* Align the logo's top with the top of the section titles (.nav__mega h4),
     which begin at the panel's padding-top. Anchoring the top (instead of
     vertically centring) keeps that alignment regardless of panel height. */
  top: 1.8rem; /* == .nav__mega padding-top */
  /* Fixed size, independent of panel height. The logo is ~square, so tying its
     height to the panel (old height:72%) made it grow wider as the panel grew
     taller — which happens when the menu text wraps on high-res/scaled displays
     (e.g. 4K) — and it then overflowed the 24rem gutter into the text columns.
     A fixed width keeps it inside the gutter at every viewport. */
  width: 14rem;
  height: auto;
  object-fit: contain;
}
.nav__item--mega:hover .nav__mega,
.nav__item--mega:focus-within .nav__mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
}

/* After selecting an entry, force the panel closed even while the pointer
   is still over it (matters for same-page anchor links that don't navigate).
   Higher specificity than the hover/focus rule above, so it wins until the
   pointer leaves and JS removes the class. */
.nav__item--mega.is-collapsed .nav__mega {
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 1040px) {
  .nav__toggle { display: block; }
  .nav__brand { margin-left: 8px; }
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
    border-bottom: 1px solid var(--grey-200);
    box-shadow: var(--shadow-sm);
    max-height: 0;
    overflow: hidden;
    transition: max-height 280ms ease;
  }
  /* dvh tracks the visible viewport (Chrome's dynamic toolbar makes vh taller
     than what's on screen, which pushed the panel's lower content off-screen).
     overflow-y: auto makes the whole open menu the one scrollable region. */
  .nav__links.is-open {
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
  }
  .nav__links li { margin: 0; }
  .nav__links a { display: block; padding: 0.7rem 0; border-bottom: 1px solid var(--grey-100); }
  .nav__cta { display: none; }   /* desktop CTA hidden; sticky bottom CTA covers mobile */

  /* Solutions dropdown collapses inline on mobile */
  .nav__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 240ms ease;
  }
  .nav__dropdown.is-open { max-height: 50vh; }
  .nav__dropdown a { display: block; padding: 0.6rem 0 0.6rem 1.25rem; border-bottom: 1px solid var(--grey-100); }
  .nav__dropdown-toggle {
    display: block;
    width: 100%;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--grey-100);
  }

  /* Mega banners collapse inline on mobile, same pattern as the Solutions dropdown */
  .nav__item--mega {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--grey-100);
  }
  .nav__item--mega > a { flex: 1 1 auto; border-bottom: 0; }
  .nav__mega-toggle {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .nav__mega-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--navy);
    border-bottom: 2px solid var(--navy);
    transform: rotate(45deg);
    transition: transform 200ms ease;
  }
  .nav__mega-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }

  .nav__item--mega .nav__mega {
    position: static;
    display: block;
    flex-basis: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 0;
    min-height: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 240ms ease;
  }
  /* Expand to full content height (200vh is just a never-hit cap for the
     open transition); the whole menu below is the single scroll container,
     so the panel isn't clipped and there's no hard-to-discover nested scroll. */
  .nav__item--mega.is-open .nav__mega { max-height: 200vh; }
  .nav__mega > .container {
    display: block;
    padding-left: 1.25rem;
    gap: 0;
  }
  .nav__mega > .container > div { flex-basis: auto; margin-bottom: 1rem; }
  .nav__mega h4, .nav__mega h4 a { font-size: 1.4rem; white-space: normal; }
  .nav__mega p { font-size: 1.1rem; }
  .nav__mega ul { padding-left: 0.75rem; }
  .nav__mega li { font-size: 1.1rem; }
  .nav__mega a { padding: 0.5rem 0; font-size: 1.1rem; }
  /* The global `.nav__links a { white-space: nowrap }` (laptop-nav trim, defined
     later in the file) also matches links inside the mega panels. On mobile that
     stops long entries wrapping, so the flex panel can't shrink and spills past
     the right edge. Re-enable wrapping here with higher specificity than that rule. */
  .nav__links .nav__mega a { white-space: normal; overflow-wrap: anywhere; }
  .nav__mega-logo { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 100%);
  color: var(--white);
  padding: 5.5rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  /* subtle grid pattern */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at top right, rgba(0,0,0,0.85), transparent 70%);
}
.hero::after {
  /* QD cube mark as a subtle watermark, top-right */
  content: "";
  position: absolute;
  top: -4%;
  right: -6%;
  width: 46%;
  max-width: 540px;
  aspect-ratio: 400 / 472;
  background: url("../img/quantdesigned-icon.png") no-repeat right center / contain;
  filter: brightness(0) invert(1);
  opacity: 0.08;
  pointer-events: none;
}
@media (max-width: 720px) {
  .hero::after { width: 70%; opacity: 0.06; top: auto; bottom: -8%; right: -12%; }
}
.hero__inner { position: relative; z-index: 1; max-width: 900px; }
.hero h1 { color: var(--white); margin-bottom: 1rem; }
.hero__sub {
  font-size: 1.42rem;
  color: rgba(255, 255, 255, 0.85);
  max-width: 720px;
  margin-bottom: 2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.25rem; }
.hero__engagement {
  margin-top: 3rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
}
.hero__engagement h2 {
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}
.engagement-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.engagement-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin: 0;
}
.engagement-list .tag {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
}
.engagement-list .desc {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.12rem;
  line-height: 1.45;
}
@media (max-width: 720px) {
  .engagement-list { grid-template-columns: 1fr; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card h3 { margin-top: 0; }
.card__meta {
  color: var(--ink-soft);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* ---------- Callout / Quote ---------- */
.callout {
  background: var(--grey-50);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.callout p { margin-bottom: 0.5rem; }
.callout p:last-child { margin-bottom: 0; }
blockquote.quote {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink);
  font-style: italic;
}
blockquote.quote::before { content: "\201C"; color: var(--navy); font-size: 1.5em; line-height: 0; vertical-align: -0.3em; margin-right: 0.15em; }
blockquote.quote::after  { content: "\201D"; color: var(--navy); font-size: 1.5em; line-height: 0; vertical-align: -0.3em; margin-left: 0.1em; }

/* ---------- Step strip (Assess / Build / Embed / Train) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 2rem 0 0;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 1.5rem;
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.step__num {
  display: inline-block;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  text-align: center;
  line-height: 30px;
  font-size: var(--fs-label);
  margin-bottom: 0.6rem;
}
.step h3 { margin: 0 0 0.4rem; font-size: var(--fs-md); }
.step p { margin: 0; color: var(--ink-soft); font-size: var(--fs-base); }

/* ---------- Stat line (inline market / third-party proof point) ---------- */
/* Reusable one-liner: a hairline rule, an emphasised figure, a short claim and
   an attribution. Reads on white, grey, blue-light and navy backgrounds. */
.stat-line {
  --stat-accent: var(--navy);
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 0 1.8rem;
  padding-top: 1rem;
  border-top: 2px solid var(--grey-300);
}
.stat-line__num {
  font-weight: 800;
  font-size: 1.1625em;
  color: var(--stat-accent);
  font-variant-numeric: tabular-nums;
}
.stat-line__src {
  font-size: 0.82em;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  opacity: 0.85;
}
.stat-line__caveat { font-style: italic; opacity: 0.8; }
/* larger, full-width variant — a standalone line that spans its container */
.stat-line--lg { font-size: 1.32rem; line-height: 1.5; max-width: none; }
.stat-line--lg .stat-line__num { font-size: 1.2375em; }
/* per-service accent for the figure */
.stat-line--quant    { --stat-accent: #2C4A7C; }
.stat-line--tech     { --stat-accent: #0C6E82; }
.stat-line--training { --stat-accent: #9A6A2B; }
/* on a navy section the figure and rule go light */
.section--navy .stat-line { color: rgba(255, 255, 255, 0.85); border-top-color: rgba(255, 255, 255, 0.4); }
.section--navy .stat-line__num { color: #fff; }
.section--navy .stat-line__src { color: rgba(255, 255, 255, 0.65); }

/* strip of several stats at the foot of a section — one shared top rule, columns below */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.6rem 2.2rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 2px solid var(--grey-300);
}
.stat-strip .stat-line { margin: 0; max-width: none; border-top: 0; padding-top: 0; }
.section--navy .stat-strip { border-top-color: rgba(255, 255, 255, 0.4); }
/* force exactly two full-width columns (e.g. a 2-stat strip, or 2×2 for four) */
.stat-strip--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .stat-strip--two { grid-template-columns: 1fr; } }
.stat-strip--two .stat-line { max-width: none; }
/* larger type for a strip that needs to carry more visual weight */
.stat-strip--lg { gap: 2.2rem 3rem; }
.stat-strip--lg .stat-line { font-size: 1.32rem; line-height: 1.5; }
.stat-strip--lg .stat-line__num { font-size: 1.2375em; }
.stat-strip__eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Accordion (Where Do You Fit?) ---------- */
.accordion { display: grid; gap: 0.75rem; }
.accordion__item {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.accordion__item.is-open { box-shadow: var(--shadow-md); border-color: var(--navy-50); }
.accordion__btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 1.2rem 1.4rem;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  color: var(--navy);
  font-weight: 600;
  font-size: var(--fs-md);
}
.accordion__btn:hover { background: var(--grey-50); }
.accordion__btn .tier-tag {
  flex: 0 0 auto;
  background: var(--navy);
  color: var(--white);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  font-weight: 700;
}
.accordion__btn .chev {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.accordion__item.is-open .accordion__btn .chev { transform: rotate(-135deg); }
.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 350ms ease;
}
.accordion__panel-inner { padding: 1rem 1.6rem 2rem; }
.accordion__panel-inner p { margin: 0 0 1.2rem; line-height: 1.7; }
.accordion__panel-inner h4 {
  margin: 2.8rem 0 0.8rem;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.accordion__panel-inner ul { margin: 0 0 0.5rem; }
.accordion__panel-inner li { margin: 0.5rem 0; line-height: 1.6; }
.accordion__cta { margin-top: 2.5rem; }
.accordion__cta strong { color: var(--navy); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 0.5rem; }
.faq__item { border-bottom: 1px solid var(--grey-200); }
.faq__btn {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 1rem 0;
  font: inherit;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
}
.faq__btn:hover { color: var(--navy); }
.faq__btn .chev {
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
}
.faq__item.is-open .faq__btn .chev { transform: rotate(-135deg); }
.faq__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease;
}
.faq__panel p { padding: 0 0 1rem; margin: 0; color: var(--ink-soft); }

/* ---------- Our Corporate Partners — logo strip ---------- */
.partners-strip {
  background: var(--white);
}
.partners-strip__title {
  text-align: center;
  margin-bottom: 2rem;
}
.partner-logos {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  align-items: center;
  justify-items: center;
}
.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 96px;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  transition: transform var(--transition), opacity var(--transition);
  opacity: 0.85;
}
.partner-logo:hover, .partner-logo:focus-visible {
  opacity: 1;
  transform: translateY(-2px);
  text-decoration: none;
}
/* Cap the rendered height so tall/square logos (e.g. BMLL) don't tower over
   the wide wordmarks; images are tight-cropped so this reads as optical size. */
.partner-logo img {
  max-width: 100%;
  max-height: 62px;
  width: auto;
  height: auto;
  object-fit: contain;
}
@media (max-width: 720px) {
  .partner-logos { grid-template-columns: 1fr; gap: 1.75rem; }
  .partner-logo { height: 72px; }
  .partner-logo img { max-height: 60px; }
  .partner-modal__dialog { padding: 2.25rem 1.25rem 1.5rem; }
}

/* Clickable logo buttons (open partner popup) */
.partner-logo__btn {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* Category groups within the partner grid */
/* 5rem = ~54px sticky header + ~26px breathing room above the heading */
.partner-category { margin-bottom: 3.25rem; scroll-margin-top: 5rem; }
.partner-category:last-child { margin-bottom: 0; }
/* Land these partner anchors 60px lower in the viewport than the shared offset */
#market-data,
#technology-infrastructure,
#professional-education { scroll-margin-top: 8.75rem; }
.partner-category__label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.75rem;
  white-space: nowrap;
}
.partner-category__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--grey-300), transparent);
}
/* Single-item category (CQF): left-aligned rather than stretching to 4 cols.
   Wider cells give long wordmarks (CQF ~5.9:1) enough width to reach the same
   optical height as the other logos instead of being squeezed short. */
.partner-logos--centered {
  grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
}
/* Mobile: let the long category titles wrap instead of overflowing. The base
   rule above sets white-space:nowrap, so this override must come *after* it
   (equal specificity → later source order wins) to actually take effect. */
@media (max-width: 720px) {
  .partner-category__label {
    display: block;
    font-size: 1.4rem;
    white-space: normal;
    letter-spacing: 0.08em;
  }
  .partner-category__label::after {
    display: block;
    margin-top: 0.6rem;
  }
}

/* ---------- Partner popup modal ---------- */
.partner-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 63, 0.93);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1000;
}
.partner-modal.is-open { display: flex; }
.partner-modal__dialog {
  position: relative;
  width: 100%;
  /* Never exceed the viewport: the 3rem matches the overlay's 1.5rem side padding */
  max-width: min(700px, calc(100vw - 3rem));
  min-width: 0;
  max-height: calc(100dvh - 3rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.25rem 2rem 2rem;
  text-align: left;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.partner-modal__close {
  position: absolute;
  top: 0.55rem;
  right: 0.7rem;
  background: none;
  border: 0;
  color: var(--ink-soft);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
}
.partner-modal__close:hover { color: var(--navy); }
.partner-modal__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  margin-bottom: 1.25rem;
  min-width: 0;
}
.partner-modal__logo img {
  max-width: 80%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-width: 0;
  object-fit: contain;
}
.partner-modal__name {
  margin: 0 0 1rem;
  font-size: var(--fs-lg);
  color: var(--navy);
  overflow-wrap: break-word;
}
.partner-modal__section-label {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--navy);
  opacity: 0.6;
}
.partner-modal__about,
.partner-modal__why {
  margin: 0 0 2rem;
  color: var(--ink-soft);
  font-size: calc(var(--fs-base) * 1.125);
  line-height: 1.6;
  overflow-wrap: break-word;
}
.partner-modal__why-label { margin-top: 1.5rem; }
.partner-modal__link {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 600;
}

/* ---------- Partner ecosystem table-as-cards ---------- */
.partners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .partners { grid-template-columns: 1fr; } }
.partner-card {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  background: var(--white);
}
.partner-card h3 {
  margin: 0 0 0.6rem;
  font-size: var(--fs-md);
  color: var(--navy);
}
.partner-card p { margin: 0; color: var(--ink-soft); font-size: var(--fs-base); }

/* ---------- Case studies ---------- */
.case {
  border: 1px solid var(--grey-200);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  background: var(--white);
  margin-bottom: 1.5rem;
}
.case h3 { margin-top: 0; }
.case__row { display: grid; grid-template-columns: 110px 1fr; gap: 0.75rem; margin-bottom: 0.85rem; }
.case__row:last-child { margin-bottom: 0; }
.case__row dt {
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}
.case__row dd { margin: 0; color: var(--ink); }
@media (max-width: 620px) {
  .case__row { grid-template-columns: 1fr; gap: 0.2rem; }
}

/* ---------- Training tiers ---------- */
/* Training page anchor offsets for the sticky header */
#tiers, #audiences, #professionals, #operations, #recruiters,
#delivery, #accreditation, #pricing, #ai-workflows, #bootcamp { scroll-margin-top: 5.5rem; }

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }
.tier {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  background: var(--white);
}
.tier__level {
  display: inline-block;
  background: var(--navy-50);
  color: var(--navy);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.6rem;
}

/* Full-width rectangle appended below a 3-box tier-grid; stacks like a normal
   box on mobile since the grid already collapses to one column there. */
.tier--wide { grid-column: 1 / -1; }
.tier--wide__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.1rem;
}
.tier--wide__cols h4 {
  margin: 0 0 0.35rem;
  font-size: var(--fs-base);
  color: var(--navy);
}
.tier--wide__cols p { margin: 0; font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .tier--wide__cols { grid-template-columns: 1fr; }
}

/* ---------- About / Team cards ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }
.member {
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  background: var(--white);
  text-align: center;
}
.member__avatar {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--navy-50);
  color: var(--navy);
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  font-weight: 700;
  font-size: 1.77rem;
  border: 2px solid var(--navy);
  overflow: hidden;
}
.member__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.member h3 { margin: 0 0 0.2rem; font-size: var(--fs-lg); }
.member__credential {
  color: var(--ink-soft);
  font-size: var(--fs-base);
  margin-bottom: 0.6rem;
}
.member__bio {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 0.75rem;
}
.member__location {
  color: var(--ink-soft);
  font-size: var(--fs-sm);
  margin-bottom: 1rem;
}
.member__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: var(--accent);
  font-weight: 600;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.member__linkedin:hover { background: var(--accent); color: var(--white); text-decoration: none; }

/* ---------- Contact page ---------- */
.contact-hero { text-align: center; max-width: 720px; margin: 0 auto; }
.contact-actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.contact-meta {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
@media (max-width: 620px) { .contact-meta { grid-template-columns: 1fr; } }

/* ---------- Receivables list (What You Receive) ---------- */
.checklist {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1.5rem;
}
@media (max-width: 720px) { .checklist { grid-template-columns: 1fr; } }
.checklist li {
  padding-left: 1.75rem;
  position: relative;
  color: var(--ink);
  margin: 0;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 14px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.85);
  padding: 3rem 0 1.5rem;
  margin-top: 2rem;
  font-size: var(--fs-sm);
}
.site-footer a { color: var(--white); }
.footer-brand-logo {
  display: block;
  height: 41.11px; /* textmark, +25% */
  width: auto;
  margin-bottom: 0.85rem;
  /* PNG is black on transparent — invert to white for the navy footer */
  filter: brightness(0) invert(1);
}
.site-footer h4 {
  color: var(--white);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 0.4rem 0; }
.footer-grid a:hover { color: var(--white); }
.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-size: var(--fs-label);
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--navy);
  padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 90;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
}
.mobile-cta a {
  display: block;
  text-align: center;
  background: var(--white);
  color: var(--navy);
  font-weight: 700;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  text-decoration: none;
}
@media (max-width: 1040px) {
  .mobile-cta { display: block; }
  body { padding-bottom: 78px; }   /* reserve space so footer is reachable */
}

/* ---------- Misc ---------- */
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.divider { height: 1px; background: var(--grey-200); margin: 3rem 0; border: 0; }
.cta-banner {
  text-align: center;
  padding: 3.5rem 0;
}
.cta-banner h2 { margin-bottom: 0.75rem; }
.cta-banner p { color: var(--white); max-width: 640px; margin: 0 auto 1.5rem; }

/* ============================================================
   Animations — task 02
   ============================================================ */

/* Hero grid: slow diagonal background-position drift (mask stays fixed) */
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 56px 56px, 56px 56px; }
}
.hero::before { animation: gridDrift 32s linear infinite; }

/* Engagement tag scale nudge on hover */
.engagement-list li .tag { transition: transform var(--transition); }
.engagement-list li:hover .tag { transform: scale(1.06); }

/* Step card: inset-left accent on hover */
.step { transition: transform var(--transition), box-shadow var(--transition); }
.step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), inset 3px 0 0 var(--accent);
}

/* Partner-card hover lift */
.partner-card { transition: transform var(--transition), box-shadow var(--transition); }
.partner-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Scroll-reveal — JS adds .reveal; IntersectionObserver adds .is-visible */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Reduced motion: disable all non-essential animation */
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; }
  .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
  .step:hover, .partner-card:hover { transform: none; box-shadow: none; }
  .engagement-list li:hover .tag { transform: none; }
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--white);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; outline: 2px solid var(--accent); }

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}


/* =================================================================
   Diagram blocks  (03-diagrams-* variants)
   ================================================================= */
.diagram{margin:2.25rem 0 .25rem}
.diagram img{width:100%;height:auto;border:1px solid var(--grey-200);border-radius:var(--radius-lg)}
.diagram figcaption{margin-top:.85rem;font-size:var(--fs-sm);color:var(--ink-soft)}
.diagram__hint{display:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Technique A: tap-to-zoom lightbox */
.diagram--zoomable .diagram__btn{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative;line-height:0}
.diagram--zoomable .diagram__hint{display:inline-block;position:absolute;right:.75rem;bottom:.95rem;background:rgba(10,31,63,.88);color:#fff;font-size:.94rem;line-height:1.2;padding:.35rem .6rem;border-radius:999px}
.lightbox{position:fixed;inset:0;background:rgba(10,31,63,.93);display:none;z-index:1000}
.lightbox.is-open{display:block}
.lightbox__scroller{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:flex-start;justify-content:center;justify-content:safe center;padding:1rem;touch-action:pan-x pan-y pinch-zoom}
/* touch-action:auto lets a one-finger drag that starts ON the image pan the scroller (pinch-zoom stays default). pinch-zoom alone would block single-finger panning over the image, so drags only worked on the surrounding background. */
.lightbox__img{max-width:none;width:min(1600px,230vw);height:auto;touch-action:auto;border-radius:6px;background:#fff}
/* Source diagrams top out at ~1536px wide. Cap the zoomed width by device-pixel-ratio so the displayed physical pixels never exceed the source's native resolution — otherwise high-DPI phones software-upscale it and it looks blurry/pixelated. */
@media (min-resolution:2dppx){
  .lightbox__img{width:min(768px,200vw)}
}
@media (min-resolution:3dppx){
  .lightbox__img{width:min(512px,150vw)}
}
.lightbox__close{position:fixed;top:.7rem;right:.9rem;z-index:1001;background:#fff;color:var(--navy);border:0;border-radius:50%;width:2.6rem;height:2.6rem;font-size:1.77rem;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* ---------- Role carousel ---------- */
.role-carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.role-carousel {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
}
.role-carousel::-webkit-scrollbar { display: none; }
.role-card {
  flex: 0 0 calc(33.333% - 0.85rem);
  scroll-snap-align: start;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.role-card:nth-child(even) {
  background: var(--navy);
  border-color: var(--navy);
}
.role-card:nth-child(even) h3 {
  color: var(--white);
  border-bottom-color: var(--accent);
}
.role-card:nth-child(even) li { color: rgba(255,255,255,0.8); }
.role-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.role-card h3 {
  margin-top: 0;
  color: var(--navy);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
}
.role-card ul {
  padding-left: 1.1rem;
  margin: 0;
}
.role-card li {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  margin: 0.4rem 0;
}
.role-card p {
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  font-style: italic;
  margin: 0 0 0.75rem;
}
.role-card:nth-child(even) p { color: rgba(255,255,255,0.8); }
.carousel-btn {
  flex-shrink: 0;
  width: 3rem;
  height: 6.6rem;
  border-radius: 999px;
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--transition), box-shadow var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.carousel-btn:hover { background: var(--navy-50); box-shadow: var(--shadow-md); }
.carousel-btn:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 900px) {
  .role-card { flex-basis: calc(50% - 0.65rem); }
}
@media (max-width: 600px) {
  .role-card { flex-basis: 85vw; }
  /* Keep the prev/next arrows on mobile, floated over the track edges so they
     stay usable without squeezing the cards out of the row. */
  .carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.6rem;
    height: 5.6rem;
    font-size: 2.8rem;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .carousel-btn--prev { left: -0.4rem; }
  .carousel-btn--next { right: -0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .role-carousel { scroll-behavior: auto; }
  .role-card:hover { transform: none; box-shadow: none; }
}

/* ===================================================================
   Case studies — card grid, filter dropdown & detail pages
   =================================================================== */

/* --- Intro blurb --- */
.cs-intro {
  max-width: 720px;
  margin: 0 auto 1.75rem;
  text-align: center;
}
.cs-intro p {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ink-soft);
  line-height: 1.6;
}

/* --- Filter row --- */
.cs-filter-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 2.5rem;
}
.cs-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--navy);
  background-color: #fff;
  /* chevron */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A7A8A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  border: 1px solid var(--grey-300);
  border-radius: var(--radius);
  padding: 0.6rem 2.6rem 0.6rem 1rem;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cs-select:hover { border-color: var(--accent); }
.cs-select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,122,138,0.2); }

/* --- Card grid (flex so visible cards stay centred when < 3 per row) --- */
.cs-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}
.cs-cards .cs-card { flex: 1 1 320px; max-width: 360px; }
@media (max-width: 360px) { .cs-cards .cs-card { max-width: 100%; } }

.cs-card.is-hidden { display: none; }

/* Case-study cards use one accent per group (Quant / Tech & Data / Training) */
.cs-card[data-cat="quant"]    { --c: #2C4A7C; }
.cs-card[data-cat="tech"]     { --c: #0C6E82; }
.cs-card[data-cat="training"] { --c: #9A6A2B; }

.cs-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--grey-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.cs-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), inset 0 3px 0 var(--c);
  text-decoration: none;
}
.cs-card:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }

.cs-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--c) 10%, #fff);
  border-bottom: 1px solid var(--grey-200);
  overflow: hidden;
}
.cs-card__media svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.cs-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.4rem 1.5rem 1.6rem;
}
.cs-card__body .cs-tag { margin: 0 0 0.7rem; }
.cs-card__body h3 { margin: 0 0 0.7rem; font-size: var(--fs-lg); color: var(--navy); }
.cs-card__summary { margin: 0 0 1.1rem; color: var(--ink-soft); font-size: var(--fs-base); line-height: 1.55; }
.cs-card__more {
  margin-top: auto;
  font-weight: 700;
  font-size: var(--fs-base);
  color: var(--c);
}
.cs-card:hover .cs-card__more { text-decoration: underline; }
/* engagement-path label on representative-scenario cards (non-clickable) */
.cs-card__path {
  margin-top: auto;
  padding-top: 0.4rem;
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--c);
}

/* --- Card SVG motifs (animated, accent-tinted) --- */
.csm { color: var(--c); }
.csm--stroke { fill: none; stroke: var(--c); }

/* 1. liquidity heatmap — staggered opacity pulse */
@keyframes csHeat { 0%,100% { opacity: 0.18; } 50% { opacity: 0.85; } }
.csm-heat rect { fill: currentColor; rx: 2; animation: csHeat 3.2s ease-in-out infinite; }

/* 2. yield curve — stroke draws then erases, looping */
@keyframes csDraw { to { stroke-dashoffset: 0; } }
@keyframes csTrace {
  0%   { stroke-dashoffset: 320; }
  45%  { stroke-dashoffset: 0; }
  55%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -320; }
}
.csm-curve path {
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: csTrace 4s ease-in-out infinite;
}
.csm-curve circle { animation: csHeat 2.8s ease-in-out infinite; }

/* 3. terminal / code — blinking caret + sliding lines */
@keyframes csBlink { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.csm-code .caret { animation: csBlink 1s steps(1) infinite; }
@keyframes csType { 0% { transform: scaleX(0); } 60%,100% { transform: scaleX(1); } }
.csm-code .ln { transform-origin: left center; animation: csType 2.4s ease-out forwards; }

/* 4. audit stack — sheets pulse + ticks draw, looping */
@keyframes csRiseLoop {
  0%, 100% { opacity: 0.35; transform: translateY(5px); }
  50%      { opacity: 1;    transform: translateY(0); }
}
@keyframes csTickLoop {
  0%   { stroke-dashoffset: 24; }
  40%  { stroke-dashoffset: 0; }
  80%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 24; }
}
.csm-audit .sheet { animation: csRiseLoop 3.2s ease-in-out infinite; }
.csm-audit .tick { stroke-dasharray: 24; stroke-dashoffset: 24; animation: csTickLoop 3.2s ease-in-out infinite; }

/* Elements that animate via transform need their own coordinate box in SVG */
.csm-stack .layer,
.csm-book .ask, .csm-book .bid,
.csm-lanes .fill,
.csm-steps .climb,
.csm-signal .scan { transform-box: fill-box; }

/* generic accent pulse reused by a couple of motifs (each on its own timing) */
@keyframes csPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* 5. allocation ring — segmented donut, segments pulse in sequence */
@keyframes csAlloc { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.csm-alloc .seg { animation: csAlloc 3s ease-in-out infinite; }

/* 6. hub & spoke — satellite nodes pulse outward from a steady core */
.csm-hub .node { animation: csPulse 2.6s ease-in-out infinite; }

/* 7. building stack — layers rise into place bottom-up, looping */
@keyframes csStack {
  0%       { opacity: 0; transform: translateY(12px); }
  15%, 70% { opacity: 1; transform: translateY(0); }
  85%,100% { opacity: 0; transform: translateY(12px); }
}
.csm-stack .layer { animation: csStack 3.4s ease-in-out infinite; }

/* 8. signal — waveform traces while a marker scans across */
@keyframes csSignalDraw {
  0%   { stroke-dashoffset: 300; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -300; }
}
@keyframes csScan { 0% { transform: translateX(0); } 100% { transform: translateX(128px); } }
.csm-signal .wave { stroke-dasharray: 300; animation: csSignalDraw 3s ease-in-out infinite; }
.csm-signal .scan { animation: csScan 3s linear infinite; }

/* 9. local extension — a global curve, then a local branch draws off it */
@keyframes csLocalDraw {
  0%   { stroke-dashoffset: 130; }
  40%  { stroke-dashoffset: 0; }
  70%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -130; }
}
.csm-local .ext { stroke-dasharray: 130; animation: csLocalDraw 3.6s ease-in-out infinite; }
.csm-local .pt  { animation: csPulse 3.6s ease-in-out infinite; }

/* 10. tail risk — distribution with a shaded tail that pulses */
@keyframes csTail { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.6; } }
.csm-tail .tail { animation: csTail 2.8s ease-in-out infinite; }

/* 11. order book — bid/ask depth flickers around the mid */
@keyframes csBook {
  0%, 100% { transform: scaleX(0.5); opacity: 0.4; }
  50%      { transform: scaleX(1);   opacity: 0.9; }
}
.csm-book .ask { transform-origin: left center;  animation: csBook 2.2s ease-in-out infinite; }
.csm-book .bid { transform-origin: right center; animation: csBook 2.2s ease-in-out infinite; }

/* 12. throughput lanes — fills sweep across staggered tracks, looping */
@keyframes csLane { 0% { transform: scaleX(0); } 50% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.csm-lanes .fill { transform-origin: left center; animation: csLane 3s ease-in-out infinite; }

/* 13. multi-curve — several curves trace over one another */
@keyframes csMulti {
  0%   { stroke-dashoffset: 300; }
  45%  { stroke-dashoffset: 0; }
  70%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -300; }
}
.csm-multi .mc { stroke-dasharray: 300; animation: csMulti 4.2s ease-in-out infinite; }

/* 14. progression — a dot climbs ascending steps, looping */
@keyframes csClimb {
  0%, 8%   { transform: translate(0, 0);        opacity: 1; }
  30%      { transform: translate(28px, -13px); }
  55%      { transform: translate(56px, -25px); }
  80%, 92% { transform: translate(84px, -37px); opacity: 1; }
  100%     { transform: translate(84px, -37px); opacity: 0; }
}
.csm-steps .climb { animation: csClimb 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .csm-heat rect, .csm-curve path, .csm-curve circle,
  .csm-code .caret, .csm-code .ln, .csm-audit .sheet, .csm-audit .tick,
  .csm-alloc .seg, .csm-hub .node, .csm-stack .layer,
  .csm-signal .wave, .csm-signal .scan, .csm-local .ext, .csm-local .pt,
  .csm-tail .tail, .csm-book .ask, .csm-book .bid,
  .csm-lanes .fill, .csm-multi .mc, .csm-steps .climb {
    animation: none;
  }
  .csm-curve path, .csm-signal .wave, .csm-local .ext, .csm-multi .mc { stroke-dashoffset: 0; }
  .csm-code .ln { transform: scaleX(1); }
  .csm-audit .tick { stroke-dashoffset: 0; }
  .csm-audit .sheet { opacity: 1; transform: none; }
  .csm-stack .layer, .csm-lanes .fill, .csm-book .ask, .csm-book .bid { transform: none; opacity: 1; }
  .csm-steps .climb { transform: translate(84px, -37px); opacity: 1; }
}

/* ===== Case study detail pages ===== */
.cs-detail { padding: 4rem 0; }
.cs-detail .container { max-width: 820px; }

/* metadata bar */
.cs-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 0 0 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--grey-200);
  border-bottom: 1px solid var(--grey-200);
}
@media (max-width: 680px) { .cs-meta { grid-template-columns: 1fr 1fr; } }
.cs-meta dt {
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--cd, var(--accent)); margin-bottom: 0.35rem;
}
.cs-meta dd { margin: 0; font-size: var(--fs-base); color: var(--ink); line-height: 1.45; }

/* solution-type pills */
.cs-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 2.5rem; }
.cs-pill {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.02em;
  color: var(--cd, var(--accent));
  background: color-mix(in srgb, var(--cd, var(--accent)) 12%, transparent);
  padding: 0.35rem 0.85rem; border-radius: 100px;
}

.cs-detail h2 {
  font-size: var(--fs-lg); color: var(--navy);
  margin: 2.5rem 0 1rem; padding-left: 0.9rem;
  border-left: 4px solid var(--cd, var(--accent));
}
.cs-detail h3 { font-size: var(--fs-md); color: var(--navy); margin: 1.6rem 0 0.5rem; }
.cs-detail p, .cs-detail li { font-size: var(--fs-base); color: var(--ink-soft); line-height: 1.75; }
.cs-detail ul { padding-left: 1.2rem; }
.cs-detail li { margin-bottom: 0.5rem; }
.cs-detail .lead { font-size: var(--fs-md); color: var(--ink); }
.cs-detail .callout { border-left-color: var(--cd, var(--accent)); }
.cs-detail .callout h3 { margin-top: 0; }

/* related case studies */
.cs-related { background: var(--grey-50); border-top: 1px solid var(--grey-200); }
.cs-related h2 { font-size: var(--fs-lg); color: var(--navy); margin: 0 0 1.5rem; }
.cs-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 680px) { .cs-related-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Chat widget — bottom-right decision-tree funnel (task 02)
   Brand navy #003366. Sits above the mobile sticky CTA (z 90).
   ============================================================ */
.qd-chat {
  --qd-navy: #003366;
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 120;
  font-family: var(--font-sans);
}

/* ---- Launcher bubble ---- */
.qd-chat__bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 0;
  background: var(--qd-navy);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(0, 51, 102, 0.35);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.qd-chat__bubble:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 51, 102, 0.42); }
.qd-chat__bubble:focus-visible { outline: 3px solid var(--qd-navy); outline-offset: 3px; }

/* ---- Teaser tooltip ---- */
.qd-chat__teaser {
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  width: 230px;
  background: #fff;
  border: 1px solid rgba(0, 51, 102, 0.18);
  border-radius: 12px 12px 4px 12px;
  box-shadow: 0 6px 22px rgba(0, 51, 102, 0.18);
  padding: 12px 34px 12px 14px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #1a1a2e;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 260ms ease, transform 260ms ease;
}
.qd-chat__teaser::after {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 20px;
  width: 14px;
  height: 8px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  filter: drop-shadow(0 2px 2px rgba(0,51,102,0.10));
}
.qd-chat__teaser.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.qd-chat__teaser-close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: 0;
  cursor: pointer;
  color: #888;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
}
.qd-chat__teaser-close:hover { color: var(--qd-navy); }
.qd-chat__icon { width: 28px; height: 28px; }
.qd-chat__icon--close { display: none; }
.qd-chat.is-open .qd-chat__icon--open { display: none; }
.qd-chat.is-open .qd-chat__icon--close { display: block; }

/* ---- Panel ---- */
.qd-chat__panel {
  position: absolute;
  right: 0;
  bottom: 76px;
  width: 360px;
  max-width: calc(100vw - 40px);
  height: 520px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0, 51, 102, 0.28);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.qd-chat.is-open .qd-chat__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.qd-chat__header {
  background: var(--qd-navy);
  color: #fff;
  padding: 16px 18px;
  position: relative;
}
.qd-chat__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.qd-chat__subtitle { font-size: 0.95rem; opacity: 0.82; margin-top: 2px; }
.qd-chat__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qd-chat__close:hover { background: rgba(255, 255, 255, 0.22); }
.qd-chat__close svg { width: 18px; height: 18px; }

.qd-chat__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  background: var(--grey-50);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- Messages ---- */
.qd-chat__msg {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 1rem;
  line-height: 1.45;
}
.qd-chat__msg--bot {
  align-self: flex-start;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--grey-200);
  border-bottom-left-radius: 4px;
}
.qd-chat__msg--user {
  align-self: flex-end;
  background: var(--qd-navy);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* ---- Option buttons ---- */
.qd-chat__options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  margin-top: 2px;
}
.qd-chat__option {
  background: #fff;
  color: var(--qd-navy);
  border: 1.5px solid var(--qd-navy);
  border-radius: 20px;
  padding: 9px 15px;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  text-align: right;
  transition: background 150ms ease, color 150ms ease;
}
.qd-chat__option:hover { background: var(--qd-navy); color: #fff; }
.qd-chat__option:focus-visible { outline: 3px solid var(--qd-navy); outline-offset: 2px; }
.qd-chat__option--back {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 5px 11px;
  border-color: #b0b8c4;
  color: var(--ink-soft, #6b7280);
  opacity: 0.8;
}
.qd-chat__option--back:hover { background: #f4f6f8; color: var(--ink, #1a1a2e); border-color: #7a8898; opacity: 1; }

/* ---- Lead form ---- */
.qd-chat__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--grey-200);
  border-radius: 12px;
  padding: 14px;
}
.qd-chat__field { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; color: var(--ink-soft); }
.qd-chat__field input,
.qd-chat__field textarea {
  font: inherit;
  font-size: 1rem;
  padding: 9px 11px;
  border: 1px solid var(--grey-300);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  resize: vertical;
}
.qd-chat__field input:focus,
.qd-chat__field textarea:focus { outline: 2px solid var(--qd-navy); border-color: var(--qd-navy); }
.qd-chat__submit {
  background: var(--qd-navy);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.qd-chat__submit:hover { background: #002a55; }
.qd-chat__submit:disabled { opacity: 0.6; cursor: default; }
.qd-chat__error { color: #b00020; font-size: 0.9rem; }
.qd-chat__error a { color: #b00020; }
.qd-chat__or { text-align: center; font-size: 0.88rem; color: var(--ink-soft); }
.qd-chat__mailto {
  align-self: center;
  color: var(--qd-navy);
  font-weight: 600;
  font-size: 0.98rem;
}

/* ---- Mobile: lift bubble above sticky CTA, near-fullscreen panel ---- */
@media (max-width: 860px) {
  .qd-chat { bottom: 90px; right: 16px; }
  .qd-chat__panel {
    bottom: 72px;
    width: calc(100vw - 24px);
    height: calc(100vh - 180px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qd-chat__bubble,
  .qd-chat__panel { transition: none; }
}

/* ===== Quant "who we work with" interactive offer toggle (quant.html) ===== */
.offer { --offer-gap: 1rem; margin-top: 2.5rem; }

/* Segmented control — switches the axis the offer is explored on.
   A sliding navy thumb makes the "organisation vs capability" duality tangible. */
.offer__switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(620px, 100%);
  padding: 6px;
  background: var(--grey-50);
  border: 1px solid var(--navy-50);
  border-radius: 999px;
  margin: 0 auto 2.25rem;
}
.offer__switch::before {
  content: "";
  position: absolute;
  top: 6px; bottom: 6px; left: 6px;
  width: calc((100% - 12px) / 2);
  background: var(--navy);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.offer__switch[data-axis="tasks"]::before { transform: translateX(100%); }
.offer__switch-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.15;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color .3s ease;
}
.offer__switch-btn small {
  display: block; margin-top: 3px;
  font-weight: 500; font-size: .45em; letter-spacing: .02em; opacity: .6;
}
.offer__switch-btn[aria-pressed="true"] { color: #fff; }
.offer__switch-btn[aria-pressed="true"] small { opacity: .8; }
.offer__switch-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.offer__stage { transition: opacity .28s ease; }
.offer__stage.is-swapping { opacity: 0; }

@media (max-width: 540px) { .offer__switch { width: 100%; } }

/* Spotlight variant — compact card grid + a single expanding detail drawer */
.offer--C .offer__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--offer-gap);
}
@media (max-width: 820px) { .offer--C .offer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .offer--C .offer__grid { grid-template-columns: 1fr; } }

.offer--C .ctile {
  position: relative; overflow: hidden;
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  border: 1px solid var(--grey-200); border-radius: var(--radius-lg);
  background: #fff; padding: 1.6rem 1.6rem 1.45rem; min-height: 204px;
  display: flex; flex-direction: column; gap: .6rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.offer--C .ctile::before { /* dormant keyline; lights teal on hover/select */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s ease;
}
.offer--C .ctile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--navy-50); }
.offer--C .ctile:hover::before,
.offer--C .ctile[aria-expanded="true"]::before { transform: scaleX(1); }
.offer--C .ctile h3 {
  margin: 0; font-size: clamp(1.58rem, 1.9vw, 1.82rem);
  color: var(--navy); line-height: 1.24; letter-spacing: 0;
}
.offer--C .ctile p { margin: 0; font-size: 1.34rem; color: var(--ink-soft); line-height: 1.44; }
.offer--C .ctile .ctile-more {
  margin-top: auto; padding-top: .6rem;
  font-size: 1.14rem; font-weight: 600; letter-spacing: .02em; color: var(--accent);
}
.offer--C .ctile[aria-expanded="true"] {
  border-color: var(--navy); background: var(--navy-50); box-shadow: var(--shadow-md);
}
.offer--C .ctile[aria-expanded="true"] .ctile-more { color: var(--navy); }
.offer--C .ctile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.offer--C .offer__drawer {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .34s ease; margin-top: var(--offer-gap);
  scroll-margin-top: 5rem; /* clear the sticky header when scrolled into view */
}
.offer--C .offer__drawer.is-open { grid-template-rows: 1fr; }
.offer--C .offer__drawer-inner { overflow: hidden; }
.offer--C .offer__drawer-card {
  position: relative;
  background: var(--navy); color: #fff;
  border-radius: var(--radius-lg); border-top: 3px solid var(--accent);
  padding: 2.1rem 2.25rem; display: block;
}
@media (max-width: 760px) { .offer--C .offer__drawer-card { padding: 1.6rem 1.4rem; } }
.offer--C .offer__drawer-card h3 {
  margin: 0 0 .6rem; color: #fff;
  font-size: clamp(1.58rem, 1.9vw, 1.82rem); line-height: 1.22;
}
.offer--C .offer__drawer-card h3::after { display: none; }
.offer--C .offer__drawer-card .odrawer-tag {
  margin: 0; color: var(--accent); font-style: italic; font-size: 1.58rem; line-height: 1.4;
}
.offer--C .offer__drawer-card .odrawer-for {
  margin: 1rem 0 0; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .92rem; color: rgba(255,255,255,.72); line-height: 1.5;
}
.offer--C .offer__drawer-card .odrawer-for strong {
  display: block; margin-bottom: .2rem;
  color: rgba(255,255,255,.9); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
}
.offer--C .offer__drawer-card ul {
  list-style: none; margin: 1.85rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 2.5rem;
}
@media (max-width: 760px) { .offer--C .offer__drawer-card ul { grid-template-columns: 1fr; } }
.offer--C .offer__drawer-card li {
  position: relative; margin: 0; padding-left: 1.9rem;
  line-height: 1.4; font-size: 1.5rem; color: rgba(255,255,255,.92);
}
.offer--C .offer__drawer-card li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 14px; height: 2px; background: var(--accent);
}
.offer--C .offer__drawer-close {
  position: absolute; top: 1.1rem; right: 1.2rem;
  appearance: none; border: 1px solid rgba(255,255,255,.4);
  background: transparent; color: #fff; border-radius: 999px;
  width: 34px; height: 34px; padding: 0; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease, border-color .2s ease;
}
.offer--C .offer__drawer-close:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }
.offer--C .offer__drawer-close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 540px) { .offer--C .offer__drawer-close { top: .8rem; right: .8rem; } }

/* Drawer content settles in when it opens */
.offer--C .offer__drawer.is-open .offer__drawer-card > * { animation: offerFade .4s ease both; }
@keyframes offerFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .offer__switch::before, .offer__stage,
  .offer--C .ctile, .offer--C .ctile::before, .offer--C .offer__drawer { transition: none; }
  .offer--C .ctile:hover { transform: none; }
  .offer--C .offer__drawer.is-open .offer__drawer-card > * { animation: none; }
}

/* ===== PREVIEW · OPTION B — trim nav (+25% → ~+10%) to fit laptops; ☰ at ≤1040px ===== */
.nav__links a,
.nav__dropdown-toggle { font-size: 1.1rem; white-space: nowrap; }
.nav__brand-logo { height: 38px; }
.nav__links { gap: 1.1rem; }