/* ── Variables ─────────────────────────────────────────── */
:root {
  --blue:       #5271FF;
  --teal:       #03DDB1;
  --purple:     #6032A8;
  --navy:       #002199;
  --dark:       #1A1452;
  --orange:     #FA8E49;
  --white:      #FFFFFF;
  --black:      #000000;
  --grey-light: #F5F5F7;
  --grey-muted: #6B7280;
  --grey-edge:  #E5E7EB;
  --nav-h:      70px;
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--black);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; padding: 0; }

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 11px 26px;
  border-radius: 6px;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover { background: #3a5be0; transform: translateY(-1px); }

.btn-ghost {
  display: inline-block;
  border: 2px solid rgba(255,255,255,0.55);
  color: var(--white);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 9px 26px;
  border-radius: 6px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.btn-ghost:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}

/* ── Navigation ────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--white);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.25s ease;
}
.nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.08); }
.nav.hidden   { transform: translateY(-100%); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* LOGO — nav: blue+teal variant for white background */
.nav__logo svg { height: 34px; width: auto; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav__links a {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  transition: color 0.2s;
}
.nav__links a:hover { color: var(--blue); }

.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
}
.nav__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--black);
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.28s ease;
}
.nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none;
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0;
  background: var(--white);
  padding: 16px 32px 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  z-index: 99;
  border-top: 1px solid var(--grey-edge);
}
.nav__mobile.open { display: block; }
.nav__mobile li { padding: 13px 0; border-bottom: 1px solid var(--grey-edge); }
.nav__mobile li:last-child { border-bottom: none; margin-bottom: 16px; }
.nav__mobile a { font-size: 0.95rem; font-weight: 600; color: var(--black); }
.nav__mobile .btn-primary { display: block; text-align: center; }

/* ── Section label ─────────────────────────────────────── */
.label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 12px;
}

/* ── Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--dark);
  padding: calc(var(--nav-h) + 96px) 0 104px;
  overflow: hidden;
}
.hero::before {
  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: 48px 48px;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.hero h1 {
  font-size: clamp(1.9rem, 4.5vw, 3.2rem);
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 24px;
}
.hero p {
  font-size: clamp(0.975rem, 1.6vw, 1.1rem);
  color: rgba(255,255,255,0.72);
  font-weight: 300;
  max-width: 580px;
  line-height: 1.75;
  margin-bottom: 40px;
}
.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 100px;
  padding: 6px 14px 6px 8px;
  margin-bottom: 28px;
}
.hero__badge img { width: 22px; height: 22px; border-radius: 4px; }
.hero__badge span {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.01em;
}

/* ── Services ──────────────────────────────────────────── */
.services {
  padding: 96px 0;
  background: var(--white);
}
.section-head { margin-bottom: 52px; }
.section-head h2 { font-size: clamp(1.55rem, 2.8vw, 2.05rem); }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  border: 1.5px solid var(--grey-edge);
  border-radius: 12px;
  padding: 36px 28px 30px;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(82,113,255,0.1);
  border-color: rgba(82,113,255,0.3);
}
.card__icon { margin-bottom: 20px; }
.card__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--blue);
  background: rgba(82,113,255,0.08);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
  align-self: flex-start;
}
.card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.card p {
  font-size: 0.875rem;
  color: var(--grey-muted);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 24px;
}
.card .more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap 0.2s;
  margin-top: auto;
}
.card .more::after { content: '→'; }
.card .more:hover { gap: 9px; }

/* ── How It Works ──────────────────────────────────────── */
.how {
  padding: 96px 0;
  background: var(--grey-light);
}
.how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.step { text-align: center; }
.step__num {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--teal);
  color: #0a0a0a;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 10px; }
.step p { font-size: 0.875rem; color: var(--grey-muted); line-height: 1.7; }

/* ── Clients ───────────────────────────────────────────── */
.clients {
  padding: 96px 0;
  background: var(--white);
}
.clients__intro {
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.7;
  color: #374151;
  margin-bottom: 44px;
}

/* CLIENT LOGO STRIP — replace .client-tile text with actual logo SVGs/PNGs.
   Recommended: greyscale, max-height 36px per tile, centred inside the tile. */
.clients__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 52px;
}
.client-tile {
  border: 1.5px solid var(--grey-edge);
  border-radius: 8px;
  padding: 22px 14px;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.45;
}

.quote-block {
  border-left: 4px solid var(--blue);
  border-radius: 0 8px 8px 0;
  background: #F7F8FF;
  padding: 26px 34px;
  max-width: 740px;
}
.quote-block blockquote {
  font-size: 0.975rem;
  font-style: italic;
  color: #1f2937;
  line-height: 1.75;
  margin-bottom: 12px;
}
.quote-block cite {
  font-size: 0.8rem;
  color: var(--grey-muted);
  font-style: normal;
}

/* ── Contact ───────────────────────────────────────────── */
.contact {
  padding: 96px 0;
  background: var(--dark);
}
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.contact__copy .label { color: var(--teal); }
.contact__copy h2 {
  font-size: clamp(1.55rem, 2.8vw, 2.05rem);
  color: var(--white);
  margin-bottom: 20px;
  line-height: 1.2;
}
.contact__copy p {
  font-size: 0.925rem;
  color: rgba(255,255,255,0.62);
  line-height: 1.75;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 0.775rem;
  font-weight: 600;
  color: rgba(255,255,255,0.68);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  padding: 10px 14px;
  color: var(--white);
  font-family: 'Poppins', sans-serif;
  font-size: 0.875rem;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,0.3); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--blue);
  background: rgba(255,255,255,0.1);
}
.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.45)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-color: rgba(255,255,255,0.07);
  padding-right: 36px;
}
.form-group select option { background: #1a1452; color: var(--white); }
.form-group textarea { resize: vertical; }

.btn-submit {
  width: 100%;
  background: var(--teal);
  color: #0a0a0a;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 28px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  margin-top: 4px;
}
.btn-submit:hover { background: #02c9a0; transform: translateY(-1px); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-feedback {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.form-feedback--success {
  background: rgba(3, 221, 177, 0.12);
  border: 1px solid rgba(3, 221, 177, 0.35);
  color: var(--teal);
}
.form-feedback--error {
  background: rgba(250, 142, 73, 0.12);
  border: 1px solid rgba(250, 142, 73, 0.35);
  color: #FA8E49;
}
.form-feedback--error a { color: inherit; text-decoration: underline; }

/* ── Footer ────────────────────────────────────────────── */
.footer {
  background: var(--navy);
  padding: 64px 0 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 48px;
}
/* LOGO — footer: white variant for dark navy background */
.footer__logo svg { height: 30px; width: auto; }
.footer__desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.42);
  line-height: 1.6;
  margin-top: 14px;
  max-width: 220px;
}
.footer__col h4 {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.32);
  margin-bottom: 18px;
}
.footer__nav li + li { margin-top: 10px; }
.footer__nav a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.62);
  transition: color 0.2s;
}
.footer__nav a:hover { color: var(--white); }
.footer__contact { display: flex; flex-direction: column; gap: 10px; }
.footer__contact a {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.62);
  transition: color 0.2s;
}
.footer__contact a:hover { color: var(--white); }
.footer__contact span { font-size: 0.8rem; color: rgba(255,255,255,0.32); }
.footer__bar {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 20px 0;
}
.footer__bar p {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.28);
  text-align: center;
}
.footer__bar a { color: inherit; transition: color 0.2s; }
.footer__bar a:hover { color: rgba(255,255,255,0.55); }

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .contact__inner { grid-template-columns: 1fr; gap: 44px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .nav__links, .nav__cta-d { display: none; }
  .nav__hamburger { display: flex; }
  .services, .how, .clients, .contact { padding: 64px 0; }
  .hero { padding: calc(var(--nav-h) + 60px) 0 72px; }
  .services__grid { grid-template-columns: 1fr; max-width: 480px; }
  .how__steps { grid-template-columns: 1fr; gap: 36px; }
  .form-row { grid-template-columns: 1fr; }
  .clients__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .hero__ctas { flex-direction: column; align-items: flex-start; }
  .clients__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .quote-block { padding: 20px 20px 20px 22px; }
}

/* ═══════════════════════════════════════════════════════════
   ADDITIONS FOR THE MULTI-PAGE RELEASE
   Everything above this line is the original single-page CSS,
   extracted verbatim so the homepage renders unchanged.
   ═══════════════════════════════════════════════════════════ */

/* ── Logos as files rather than inline SVG ─────────────── */
.nav__logo img    { height: 34px; width: auto; }
.footer__logo img { height: 30px; width: auto; }

/* ── Skip link ─────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--blue);
  color: var(--white);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* Visible focus for keyboard users across the site. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}
.hero a:focus-visible,
.contact a:focus-visible,
.page-hero a:focus-visible,
.cta-band a:focus-visible,
.footer a:focus-visible {
  outline-color: var(--teal);
}

/* ── Services dropdown ─────────────────────────────────── */
.nav__item { position: relative; }
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
  font-family: inherit;
  transition: color 0.2s;
}
.nav__toggle:hover,
.nav__toggle[aria-expanded="true"] { color: var(--blue); }
.nav__toggle::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}
.nav__toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }

.nav__dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -18px;
  min-width: 268px;
  background: var(--white);
  border: 1.5px solid var(--grey-edge);
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.12);
  padding: 8px;
  display: none;
}
.nav__dropdown[data-open="true"] { display: block; }
/* The panel sits 14px below the button. That gap is outside the hover target,
   so without this bridge the menu closed the moment anyone moved the cursor
   towards it. The pseudo-element makes the gap part of the panel. */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -16px;
  left: 0;
  right: 0;
  height: 16px;
}
.nav__dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--black);
  transition: background 0.18s, color 0.18s;
}
.nav__dropdown a span {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--grey-muted);
  margin-top: 2px;
  line-height: 1.5;
}
.nav__dropdown a:hover { background: rgba(82,113,255,0.07); color: var(--blue); }
.nav__dropdown a:hover span { color: var(--grey-muted); }

/* Current page marker in the primary nav. */
.nav__links a[aria-current="page"],
.nav__dropdown a[aria-current="page"] { color: var(--blue); }

/* Mobile nav sub-list */
.nav__mobile .sub { padding-left: 14px; }
.nav__mobile .sub li { border-bottom: none; padding: 9px 0 0; }
.nav__mobile .sub a { font-size: 0.875rem; font-weight: 400; color: #374151; }

/* ── Inner page hero ───────────────────────────────────── */
.page-hero {
  position: relative;
  background: var(--dark);
  padding: calc(var(--nav-h) + 64px) 0 68px;
  overflow: hidden;
}
.page-hero::before {
  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: 48px 48px;
  pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.page-hero .label { color: var(--teal); }
.page-hero h1 {
  font-size: clamp(1.7rem, 3.8vw, 2.6rem);
  color: var(--white);
  line-height: 1.18;
  margin-bottom: 20px;
}
.page-hero__lede {
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  color: rgba(255,255,255,0.72);
  font-weight: 300;
  line-height: 1.75;
  max-width: 620px;
  margin-bottom: 32px;
}
.page-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ── Breadcrumbs ───────────────────────────────────────── */
.breadcrumbs {
  position: relative;
  z-index: 1;
  margin-bottom: 22px;
  font-size: 0.78rem;
}
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.breadcrumbs li { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.42); }
.breadcrumbs li + li::before { content: '/'; color: rgba(255,255,255,0.26); }
.breadcrumbs a { color: rgba(255,255,255,0.62); transition: color 0.2s; }
.breadcrumbs a:hover { color: var(--white); }
.breadcrumbs [aria-current="page"] { color: rgba(255,255,255,0.42); }

/* ── Generic light section ─────────────────────────────── */
.section       { padding: 84px 0; background: var(--white); }
.section--grey { background: var(--grey-light); }
.section--tight { padding: 64px 0; }

/* ── Long-form prose ───────────────────────────────────── */
.prose { max-width: 720px; }
.prose > * + * { margin-top: 20px; }
.prose h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.3;
  margin-top: 48px;
}
.prose h3 {
  font-size: 1.05rem;
  line-height: 1.4;
  margin-top: 34px;
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p, .prose li {
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.8;
}
.prose strong { color: var(--black); font-weight: 600; }
.prose a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prose a:hover { color: #3a5be0; }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: 9px; }
.prose li::marker { color: var(--blue); }
.prose blockquote {
  border-left: 4px solid var(--blue);
  background: #F7F8FF;
  border-radius: 0 8px 8px 0;
  padding: 20px 26px;
  font-style: italic;
  color: #1f2937;
}

/* ── Tables ────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  border: 1.5px solid var(--grey-edge);
  border-radius: 10px;
}
.table-wrap table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.table-wrap th, .table-wrap td {
  text-align: left;
  padding: 13px 18px;
  border-bottom: 1px solid var(--grey-edge);
  line-height: 1.65;
  vertical-align: top;
}
.table-wrap th {
  font-weight: 600;
  color: var(--black);
  background: var(--grey-light);
  white-space: nowrap;
}
.table-wrap td { color: #374151; }
.table-wrap tr:last-child td { border-bottom: none; }

/* ── Callout ───────────────────────────────────────────── */
.note {
  border: 1.5px solid var(--grey-edge);
  border-left: 4px solid var(--teal);
  border-radius: 0 10px 10px 0;
  background: var(--grey-light);
  padding: 20px 26px;
}
.note p { font-size: 0.875rem; color: #374151; line-height: 1.75; }
.note p + p { margin-top: 10px; }
.note strong { color: var(--black); }

/* ── Numbered agenda / tier list ───────────────────────── */
.stack { display: grid; gap: 16px; }
.stack-item {
  border: 1.5px solid var(--grey-edge);
  border-radius: 12px;
  padding: 26px 28px;
}
.stack-item h3 { font-size: 1rem; margin-bottom: 8px; }
.stack-item p  { font-size: 0.875rem; color: var(--grey-muted); line-height: 1.75; }
.stack-item p + p { margin-top: 10px; }
.stack-item ul { margin-top: 12px; padding-left: 20px; list-style: disc; }
.stack-item li {
  font-size: 0.875rem;
  color: var(--grey-muted);
  line-height: 1.7;
  margin-top: 7px;
}
.stack-item li::marker { color: var(--blue); }
.stack-item__tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--blue);
  background: rgba(82,113,255,0.08);
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* ── Two-column facts panel ────────────────────────────── */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.5px;
  background: var(--grey-edge);
  border: 1.5px solid var(--grey-edge);
  border-radius: 12px;
  overflow: hidden;
}
.facts div { background: var(--white); padding: 22px 24px; }
.facts dt {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-muted);
  margin-bottom: 7px;
}
.facts dd { font-size: 0.9rem; color: var(--black); line-height: 1.6; }

/* ── FAQ ───────────────────────────────────────────────── */
.faq { max-width: 780px; display: grid; gap: 12px; }
.faq details {
  border: 1.5px solid var(--grey-edge);
  border-radius: 10px;
  background: var(--white);
  transition: border-color 0.2s;
}
.faq details[open] { border-color: rgba(82,113,255,0.35); }
.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px;
  font-size: 0.925rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  line-height: 1.55;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq__body { padding: 0 24px 20px; }
.faq__body p {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.8;
}
.faq__body p + p { margin-top: 12px; }
.faq__body a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ── Client logo strip ─────────────────────────────────── */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px 56px;
  margin-bottom: 46px;
}
/* Each mark is painted one flat tone through its own artwork as a mask, so
   logos of different origin sit at one consistent visual weight. */
.logo-mark {
  display: block;
  background-color: #5b6472;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
  opacity: 0.88;
}
.logo-word {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: #5b6472;
  line-height: 1.4;
  max-width: 150px;
  opacity: 0.88;
}

/* ── Insights index ────────────────────────────────────── */
.insights__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.article-card {
  border: 1.5px solid var(--grey-edge);
  border-radius: 12px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.article-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(82,113,255,0.1);
  border-color: rgba(82,113,255,0.3);
}
.article-card__meta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grey-muted);
  margin-bottom: 12px;
}
.article-card h3 { font-size: 1.02rem; line-height: 1.4; margin-bottom: 10px; }
.article-card h3 a { transition: color 0.2s; }
.article-card h3 a:hover { color: var(--blue); }
/* Makes the whole card clickable without nesting interactive elements. */
.article-card h3 a::after { content: ''; position: absolute; inset: 0; }
.article-card { position: relative; }
.article-card p {
  font-size: 0.875rem;
  color: var(--grey-muted);
  line-height: 1.7;
  flex: 1;
  margin-bottom: 20px;
}
.article-card .more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
}
.article-card .more::after { content: '→'; }

/* ── Article page ──────────────────────────────────────── */
.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
}
.byline strong { color: rgba(255,255,255,0.92); font-weight: 600; }
.byline span { display: inline-flex; align-items: center; gap: 8px; }
.byline span + span::before { content: '·'; color: rgba(255,255,255,0.3); }

.takeaways {
  border: 1.5px solid var(--grey-edge);
  border-left: 4px solid var(--blue);
  border-radius: 0 12px 12px 0;
  background: #F7F8FF;
  padding: 26px 30px;
}
.takeaways h2 {
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 14px !important;
}
.takeaways ul { padding-left: 20px; list-style: disc; }
.takeaways li { font-size: 0.875rem; color: #374151; line-height: 1.75; margin-top: 9px; }
.takeaways li:first-child { margin-top: 0; }

.sources { margin-top: 56px; padding-top: 28px; border-top: 1.5px solid var(--grey-edge); }
.sources h2 {
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey-muted);
  margin: 0 0 14px !important;
}
.sources li { font-size: 0.825rem; line-height: 1.7; margin-top: 8px; }
.sources a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.sources p { font-size: 0.78rem; color: var(--grey-muted); margin-top: 14px; }

/* ── Secondary CTA band ────────────────────────────────── */
.cta-band { background: var(--grey-light); padding: 64px 0; }
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-band h2 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); line-height: 1.3; margin-bottom: 8px; }
.cta-band p { font-size: 0.9rem; color: var(--grey-muted); line-height: 1.7; max-width: 520px; }
.cta-band__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Outlined button for light backgrounds. */
.btn-outline {
  display: inline-block;
  border: 2px solid var(--grey-edge);
  color: var(--black);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 9px 26px;
  border-radius: 6px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-1px);
}

/* ── Related links ─────────────────────────────────────── */
.related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.related-card {
  position: relative;
  border: 1.5px solid var(--grey-edge);
  border-radius: 12px;
  padding: 24px 26px;
  transition: border-color 0.22s ease, transform 0.22s ease;
}
.related-card:hover { border-color: rgba(82,113,255,0.3); transform: translateY(-3px); }
.related-card__kind {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 9px;
  display: block;
}
.related-card h3 { font-size: 0.95rem; line-height: 1.45; margin-bottom: 7px; }
.related-card h3 a::after { content: ''; position: absolute; inset: 0; }
.related-card p { font-size: 0.825rem; color: var(--grey-muted); line-height: 1.7; }

/* Respect a reduced-motion preference for every transform we apply. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .card:hover, .article-card:hover, .related-card:hover,
  .btn-primary:hover, .btn-ghost:hover, .btn-outline:hover, .btn-submit:hover {
    transform: none;
  }
}

/* ── Responsive for the additions ──────────────────────── */
@media (max-width: 900px) {
  .cta-band__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 768px) {
  .section, .cta-band { padding: 60px 0; }
  .section--tight { padding: 48px 0; }
  .page-hero { padding: calc(var(--nav-h) + 44px) 0 52px; }
  .logo-strip { gap: 26px 36px; }
  .prose h2 { margin-top: 40px; }
}
@media (max-width: 540px) {
  .page-hero__ctas { flex-direction: column; align-items: stretch; }
  .page-hero__ctas a { text-align: center; }
  .takeaways, .note { padding: 20px 22px; }
  .sources a { font-size: 0.8rem; }
}

/* ── Footer with the Services column added ─────────────── */
/* Was h4 directly under an h2 section, which skipped a level. Same visual
   treatment, valid heading order. */
.footer__col .footer__heading {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.32);
  margin-bottom: 18px;
}
.footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* Visually hidden, still announced. Used to give repeated link text
   ("Learn more") a unique accessible name. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}