/* =========================================================================
   Explicit Selection — main.css
   Single source for all styles. Tokens at top, then base, then primitives.
   See design-tokens.md for the canonical token spec.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------------- */
:root {
  /* Brand colors */
  --color-orange:    #F86F24;
  --color-navy:      #0B192E;
  --color-black:     #0A0A0A;
  --color-white:     #FFFFFF;

  /* Neutrals */
  --color-gray-900:  #0F1620;
  --color-gray-700:  #3A3F4A;
  --color-gray-500:  #6B717E;
  --color-gray-300:  #C9CDD4;
  --color-gray-100:  #E8EAEE;
  --color-gray-50:   #F4F5F7;

  /* Warm neutrals (used in Explicit Intelligence panel and select sections) */
  --color-beige:     #FAF9F7;
  --color-beige-2:   #F2EFE9;

  /* Type families */
  --font-display: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Type scale — fluid */
  --text-display-xl:  clamp(3rem,    2rem    + 4vw,    5.5rem);
  --text-display-lg:  clamp(2.25rem, 1.5rem  + 3vw,    4.5rem);
  --text-display-md:  clamp(2rem,    1.5rem  + 2.5vw,  3.5rem);
  --text-heading-lg:  clamp(1.5rem,  1.25rem + 1.25vw, 2.25rem);
  --text-heading-md:  clamp(1.25rem, 1.125rem + 0.625vw, 1.75rem);
  --text-heading-sm:  clamp(1.125rem, 1.0625rem + 0.3125vw, 1.375rem);

  /* Type scale — fixed body */
  --text-body-lg:     1.125rem;
  --text-body-md:     1rem;
  --text-body-sm:     0.875rem;
  --text-label:       0.8125rem;

  /* Line heights */
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.7;

  /* Weights */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;

  /* Spacing — 8px grid */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Section vertical rhythm — fluid (tightened for compact reading) */
  --section-y:    clamp(2rem,    1rem    + 3.5vw, 4.5rem);
  --section-y-sm: clamp(1.25rem, 0.75rem + 2vw,   2.5rem);

  /* Layout */
  --container-max:       1440px;
  --container-max-wide:  1600px;
  --container-padding:   clamp(1.25rem, 4vw, 5rem);
  --grid-gap:            clamp(1rem, 2vw, 2rem);

  /* Radii / borders */
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           12px;
  --border-width:        1px;
  --border-width-thick:  2px;

  /* Motion */
  --duration-fast:  150ms;
  --duration-base:  200ms;
  --duration-slow:  400ms;
  --ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:    cubic-bezier(0.83, 0, 0.17, 1);

  /* Header */
  --header-height:  72px;
  --header-bg:      var(--color-navy);
  --header-text:    var(--color-white);
}

/* -------------------------------------------------------------------------
   2. Reset & base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--color-gray-700);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

button { font: inherit; cursor: pointer; }

a {
  color: var(--color-orange);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-out);
}
a:hover { color: var(--color-navy); }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-gray-900);
}

h1 { font-size: var(--text-display-lg); }
h2 { font-size: var(--text-display-md); }
h3 { font-size: var(--text-heading-lg); }
h4 { font-size: var(--text-heading-md); }
h5 { font-size: var(--text-heading-sm); }
h6 { font-size: var(--text-body-lg); font-weight: var(--weight-semibold); }

p { margin: 0 0 var(--space-4); }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }

hr {
  border: 0;
  border-top: var(--border-width) solid var(--color-gray-100);
  margin: var(--space-8) 0;
}

:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}

::selection { background: var(--color-orange); color: var(--color-white); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   3. Utilities
   ------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-navy);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-medium);
  transition: top var(--duration-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); color: var(--color-white); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-eyebrow {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-orange);
}

/* -------------------------------------------------------------------------
   4. Layout primitives
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--wide { max-width: var(--container-max-wide); }

.section { padding-block: var(--section-y); }
.section--sm { padding-block: var(--section-y-sm); }
.section--muted { background: var(--color-gray-50); }
.section--dark {
  background: var(--color-navy);
  color: var(--color-white);
}
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 {
  color: var(--color-white);
}
/* Anchors inside dark sections are orange — except buttons, which carry
   their own foreground from .btn--* and would otherwise become orange-on-
   orange (invisible). */
.section--dark a:not(.btn) { color: var(--color-orange); }
.section--dark a:not(.btn):hover { color: var(--color-white); }

.section-header { margin-bottom: var(--space-12); }
.section-header > .text-eyebrow { margin-bottom: var(--space-3); }
/* Constrain the heading line-length, but let block-level wrappers (e.g.
   .prose-66) and grids inside section-header expand to the container's
   full width. Previously the wrapper itself had max-width:60ch which
   propagated to everything inside, including .prose-66, so its 66% was
   measured against 60ch instead of the container. */
.section-header > h1,
.section-header > h2,
.section-header > h3,
.section-header > h4,
.section-header > p { max-width: 60ch; }

main { display: block; min-height: 60vh; }

/* Grids */
.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* -------------------------------------------------------------------------
   5. Site header (Web Component: <site-header>)
   ------------------------------------------------------------------------- */
site-header { display: block; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  color: var(--header-text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  height: var(--header-height);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.site-header__brand img { height: 28px; width: auto; }

.site-nav { display: none; }
@media (min-width: 1024px) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
}

.site-nav__item {
  position: relative;
  display: inline-flex;
}

.site-nav__link,
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 0;
  background: transparent;
  color: var(--header-text);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--duration-base) var(--ease-out);
}

.site-nav__link:hover,
.site-nav__toggle:hover,
.site-nav__toggle[aria-expanded="true"] {
  color: var(--color-orange);
}

.site-nav__link[aria-current="page"] {
  color: var(--color-orange);
  position: relative;
}
.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 4px;
  height: 2px;
  background: var(--color-orange);
}

.site-nav__caret {
  width: 10px;
  height: 10px;
  transition: transform var(--duration-base) var(--ease-out);
}
.site-nav__toggle[aria-expanded="true"] .site-nav__caret { transform: rotate(180deg); }

.site-nav__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 260px;
  padding: var(--space-2);
  background: var(--color-white);
  color: var(--color-gray-900);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(11, 25, 46, 0.16);
  display: none;
  flex-direction: column;
  gap: 0;
}
.site-nav__toggle[aria-expanded="true"] + .site-nav__menu { display: flex; }

.site-nav__menu-link {
  display: block;
  padding: 7px var(--space-3);
  color: var(--color-gray-900);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.site-nav__menu-link:hover {
  background: var(--color-gray-50);
  color: var(--color-orange);
}

/* "Featured" divider — tight margin above, hairline rule above the heading. */
.site-nav__menu-heading {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3) 2px;
  border-top: 1px solid var(--color-gray-100);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray-500);
}

/* Mobile menu */
.site-header__menu-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--header-text);
  border-radius: var(--radius-sm);
}
@media (min-width: 1024px) {
  .site-header__menu-button { display: none; }
}
.site-header__menu-button:hover { color: var(--color-orange); }

.site-header__menu-button-icon {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
  transition: background var(--duration-base) var(--ease-out);
}
.site-header__menu-button-icon::before,
.site-header__menu-button-icon::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-out);
}
.site-header__menu-button-icon::before { top: -7px; }
.site-header__menu-button-icon::after  { top: 7px;  }

.site-header[data-mobile-open="true"] .site-header__menu-button-icon { background: transparent; }
.site-header[data-mobile-open="true"] .site-header__menu-button-icon::before { transform: translateY(7px) rotate(45deg); }
.site-header[data-mobile-open="true"] .site-header__menu-button-icon::after  { transform: translateY(-7px) rotate(-45deg); }

.site-mobile-nav {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--color-navy);
  color: var(--header-text);
  padding: var(--space-4) 0 var(--space-8);
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
}
.site-header[data-mobile-open="true"] .site-mobile-nav { display: block; }
@media (min-width: 1024px) {
  .site-mobile-nav { display: none !important; }
}

.site-mobile-nav__group { padding-block: var(--space-2); }
.site-mobile-nav__group + .site-mobile-nav__group {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-mobile-nav__group-title {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-3) 0;
  border: 0;
  background: transparent;
  color: var(--color-white);
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.01em;
}

.site-mobile-nav__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.site-mobile-nav__sublist {
  display: none;
  padding: 0 0 var(--space-3) var(--space-4);
  margin: 0;
  list-style: none;
}
.site-mobile-nav__group[data-open="true"] .site-mobile-nav__sublist { display: block; }
.site-mobile-nav__group[data-open="true"] .site-nav__caret { transform: rotate(180deg); }

.site-mobile-nav__sublist a,
.site-mobile-nav__link {
  display: block;
  padding: var(--space-2) 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-body-sm);
  text-decoration: none;
}
.site-mobile-nav__sublist a:hover,
.site-mobile-nav__link:hover { color: var(--color-orange); }

/* -------------------------------------------------------------------------
   6. Site footer (Web Component: <site-footer>)
   ------------------------------------------------------------------------- */
site-footer { display: block; }

.site-footer {
  position: relative;
  background: var(--color-navy);
  color: rgba(255, 255, 255, 0.85);
  padding-block: var(--space-16) var(--space-8);
}
/* Hairline that separates the previous page section from the footer. The
   colour matches the footer's internal divider (rgba(255,255,255,0.08))
   so it reads as the same visual language across every page. The line
   sits flush at the top edge of the footer; the footer's own padding
   provides the breathing space below it. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}
.site-footer h3 {
  color: var(--color-white);
  font-size: var(--text-heading-sm);
  margin-bottom: var(--space-3);
}

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}
.site-footer a:hover { color: var(--color-orange); }

.site-footer__top {
  display: grid;
  gap: var(--space-12);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__top { grid-template-columns: 2fr 1fr 1fr; }
}
@media (min-width: 1024px) {
  .site-footer__top { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.site-footer__brand img { height: 28px; width: auto; margin-bottom: var(--space-6); }
.site-footer__brand p { max-width: 36ch; font-size: var(--text-body-sm); }

.site-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
}

.site-footer__contact { font-size: var(--text-body-sm); font-style: normal; }
.site-footer__contact p { margin-bottom: var(--space-3); line-height: var(--leading-normal); }

.site-footer__certs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__certs-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}
.site-footer__cert-logo {
  height: 64px;
  width: auto;
  /* Both certification logos are now white-on-transparent variants, so
     they sit directly on the navy footer ground without a white panel. */
}

/* Cert hover swap — overlay a colour version on top of the white base
   and crossfade on hover. ISAE's central tick turns green; Great Place
   to Work's red + blue elements return (the shield body stays
   transparent — only the strokes/glyphs reappear in colour). */
.cert-swap {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.cert-swap > img {
  display: block;
  height: 64px;
  width: auto;
  transition: opacity var(--duration-slow) var(--ease-out);
}
.cert-swap__hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.cert-swap:hover .cert-swap__hover,
.cert-swap:focus-within .cert-swap__hover { opacity: 1; }
.cert-swap:hover .cert-swap__base,
.cert-swap:focus-within .cert-swap__base { opacity: 0; }

/* FD Gazellen award — clickable group: text on the left, logo to the right.
   Whole row is a single link to the FD Gazellen explainer. */
.site-footer__award {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: opacity var(--duration-base) var(--ease-out);
}
.site-footer__award:hover { opacity: 0.85; color: inherit; }
.site-footer__award-logo {
  height: 60px;
  width: auto;
}
.site-footer__award-label {
  margin: 0;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-white);
  line-height: 1.3;
  text-align: right;
  font-weight: var(--weight-semibold);
}
.site-footer__award-label span {
  display: block;
  color: rgba(255, 255, 255, 0.6);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  margin-top: 2px;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  justify-content: space-between;
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: var(--text-body-sm);
  color: rgba(255, 255, 255, 0.6);
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* -------------------------------------------------------------------------
   7. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem;
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}

.btn--primary {
  background: var(--color-orange);
  color: var(--color-white);
  border-color: var(--color-orange);
}
.btn--primary:hover {
  background: #d95e1a;
  border-color: #d95e1a;
  color: var(--color-white);
}

.btn--secondary {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.btn--secondary:hover {
  background: var(--color-navy);
  color: var(--color-white);
}
.section--dark .btn--secondary {
  color: var(--color-white);
  border-color: var(--color-white);
}
.section--dark .btn--secondary:hover {
  background: var(--color-white);
  color: var(--color-navy);
}

.btn--tertiary {
  padding-inline: 0;
  background: transparent;
  color: var(--color-orange);
  border: 0;
  font-weight: var(--weight-semibold);
}
.btn--tertiary:hover { color: var(--color-navy); }
.btn--tertiary .btn__arrow { transition: transform var(--duration-base) var(--ease-out); }
.btn--tertiary:hover .btn__arrow { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   8. Cards & content blocks
   ------------------------------------------------------------------------- */

/* Service card */
.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-8);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.service-card:hover {
  border-color: var(--color-orange);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(11, 25, 46, 0.06);
  color: inherit;
}
.service-card__title {
  font-size: var(--text-heading-md);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
}
.service-card__body { color: var(--color-gray-700); margin: 0; }
.service-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-orange);
  font-weight: var(--weight-semibold);
}
.service-card:hover .service-card__cta .btn__arrow { transform: translateX(4px); }
.service-card__cta .btn__arrow { transition: transform var(--duration-base) var(--ease-out); }

/* Case card */
.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  color: inherit;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}
.case-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(11, 25, 46, 0.08);
  color: inherit;
}

/* Stretched-link pattern: the title's <a> covers the whole card via ::after,
   so anywhere on the card is clickable. Tag buttons sit above this overlay
   with z-index:1 so clicking a chip toggles the filter without navigating.

   Important: no positioned ancestor between .case-card and .case-card__link
   may exist, otherwise the ::after's containing block clips to the title
   row and most of the card stops being clickable. .case-card__title is
   intentionally left static. */
.case-card__link {
  text-decoration: none;
  color: inherit;
}
.case-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.case-card__tags { position: relative; z-index: 1; }

/* Hidden by the filter — drop out of layout entirely. */
.case-card.is-hidden { display: none; }
.case-card__media {
  aspect-ratio: 16 / 9;
  background: var(--color-gray-100);
  overflow: hidden;
}
.case-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}
.case-card__tags {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1);
  min-width: 0;
}
/* Inside the catalog card, chips are smaller and stay on one line.
   Title baselines align across cards regardless of label length;
   ellipsis is the graceful fallback at very narrow widths only.
   Each chip is also a <button> driving the catalog filter, so it gets
   a button reset + interactive hover/active treatment. */
.case-card__tags .tag-label {
  appearance: none;
  cursor: pointer;
  border: 1px solid transparent;
  font: inherit;
  font-size: 0.6875rem;
  padding: 3px 7px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 150ms var(--ease-out),
              border-color 150ms var(--ease-out),
              color 150ms var(--ease-out);
}
.case-card__tags .tag-label:hover {
  background: rgba(248, 111, 36, 0.18);
  color: var(--color-orange);
}
.case-card__tags .tag-label.is-active {
  background: var(--color-orange);
  color: var(--color-white);
}
.case-card__tags .tag-label:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}
.case-card__title {
  font-size: var(--text-heading-md);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
}
.case-card__summary { color: var(--color-gray-700); margin: 0; }

/* Arrow-bullet list — used for "You get / you'll receive" outcome lists.
   Replaces the older `<li>→ Text</li>` inline pattern, where the arrow
   sat right next to the text with no spacing. The grid template gives
   the arrow its own fixed column so the bullets line up consistently
   and there's a clean gap between glyph and text. */
.arrow-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--color-gray-900);
}
.arrow-list > li {
  display: grid;
  grid-template-columns: 1.5em 1fr;
  column-gap: var(--space-3);
  align-items: start;
}
.arrow-list > li::before {
  content: "→";
  color: var(--color-orange);
  font-weight: var(--weight-semibold);
}

/* Tag label */
.tag-label {
  display: inline-block;
  padding: 4px 8px;
  background: rgba(248, 111, 36, 0.08);
  color: var(--color-orange);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}

/* Stat block */
.stat-block { display: flex; flex-direction: column; gap: var(--space-2); }
.stat-block__value {
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  font-weight: var(--weight-bold);
  color: var(--color-orange);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}
.stat-block__label {
  font-size: var(--text-body-sm);
  color: var(--color-gray-700);
}

/* Category tile (orange label + grey accent bar) */
.category-tile {
  position: relative;
  padding-left: var(--space-6);
}
.category-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--color-gray-300);
}
.category-tile__label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-orange);
}
.category-tile__title {
  font-size: var(--text-heading-md);
  margin-bottom: var(--space-3);
}
.category-tile__body { margin: 0; color: var(--color-gray-700); }

/* Callout */
.callout {
  border: 1px solid var(--color-gray-100);
  border-left: 2px solid var(--color-orange);
  background: var(--color-white);
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-sm);
}
.callout > :last-child { margin-bottom: 0; }
.callout__title {
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-900);
  margin: 0 0 var(--space-3);
}
.section--dark .callout {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.section--dark .callout__title { color: var(--color-white); }

/* Dual panel (50/50 navy + light) */
.dual-panel {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .dual-panel { grid-template-columns: 1fr 1fr; }
}
.dual-panel__pane {
  padding: clamp(2rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dual-panel__pane--dark {
  background: var(--color-navy);
  color: var(--color-white);
}
.dual-panel__pane--dark h1, .dual-panel__pane--dark h2,
.dual-panel__pane--dark h3, .dual-panel__pane--dark h4 {
  color: var(--color-white);
}
.dual-panel__pane--light {
  background: var(--color-white);
  color: var(--color-gray-700);
}

/* Trusted by grid */
.trusted-by {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 768px) { .trusted-by { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .trusted-by { grid-template-columns: repeat(5, 1fr); } }
.trusted-by__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  border-right: 1px solid var(--color-gray-100);
  border-bottom: 1px solid var(--color-gray-100);
  background: var(--color-white);
  transition: transform var(--duration-base) var(--ease-out);
  min-height: 100px;
}
.trusted-by__cell:hover { transform: translateY(-2px); }
.trusted-by__cell img {
  max-height: 36px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.8;
  transition: filter var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}
.trusted-by__cell:hover img { filter: grayscale(0); opacity: 1; }

/* Diagram frame */
.diagram-frame {
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-white);
}
.diagram-frame iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* -------------------------------------------------------------------------
   9. Hero
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: clamp(420px, 60vh, 720px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: var(--space-20) var(--space-12);
  background: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media img,
.hero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(11, 25, 46, 0.85) 0%,
    rgba(11, 25, 46, 0.55) 60%,
    rgba(11, 25, 46, 0.2) 100%
  );
}
.hero__content {
  position: relative;
  z-index: 1;
  max-width: 60ch;
}
.hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-4);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-orange);
}
/* Hero wordmark — used on /intelligence in place of an eyebrow text label.
   Scaled down vs. the home-page version since it sits with a display title
   beneath it, not as the centerpiece. Width is fluid so it scales cleanly
   between mobile (~250px) and desktop (~360px). */
.hero__wordmark {
  display: block;
  width: clamp(240px, 32vw, 360px);
  height: auto;
  margin-bottom: var(--space-6);
}
.hero__title {
  font-size: var(--text-display-lg);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}
.hero__lead {
  font-size: var(--text-body-lg);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-8);
  max-width: 60ch;
}

.hero--split {
  min-height: auto;
  display: grid;
  grid-template-columns: 1fr;
  padding: 0;
}
@media (min-width: 768px) {
  .hero--split { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------------------------------
   Hero layout — single column on tablet/mobile, two columns on desktop
   so the rotating taglines can sit alongside the "In the spotlight" rail.
   Must sit above .hero__media (which is absolutely-positioned at z-index:0
   and ends with a dark gradient overlay), otherwise the spotlight column
   reads as a blank dark area.
   ------------------------------------------------------------------------- */
.hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .hero__layout {
    /* Right column narrower than before so its left edge pulls in toward
       the right side of the page; both the items and the divider therefore
       sit closer to the container's right edge (= the right end of the
       header nav bar). */
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.36fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
  }
}

/* "In the spotlight" — desktop-only sidebar of editorial entry points.
   Hidden on tablet/mobile so the hero falls back to a single-column
   carousel layout. The whole item is a link with a colour shift + arrow
   nudge on hover; .site-footer-style minimal divider between items. */
.hero-spotlight { display: none; }
@media (min-width: 1024px) {
  .hero-spotlight {
    display: flex;
    flex-direction: column;
    /* Symmetric gap above and below the divider — tightened so the line
       lifts toward "Payment networks benchmarking" (which stays put) and
       "Agentic commerce" pulls up by the same amount, keeping the rail
       compact without crowding either item. */
    gap: clamp(1.25rem, 1.5vw, 1.75rem);
    color: rgba(255, 255, 255, 0.85);
    /* Top-align with the carousel; the carousel slides occupy a flexible
       height, so just align both grid items to start. */
  }
}
.hero-spotlight__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}
.hero-spotlight__topic {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  transition: color var(--duration-base) var(--ease-out);
}
.hero-spotlight__question {
  font-size: clamp(1.2rem, 0.9vw + 1rem, 1.5rem);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  color: var(--color-white);
  transition: color var(--duration-base) var(--ease-out);
}
.hero-spotlight__arrow {
  display: inline-block;
  margin-left: var(--space-3);
  color: var(--color-orange);
  font-weight: var(--weight-semibold);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.hero-spotlight__item:hover .hero-spotlight__topic    { color: var(--color-orange); }
.hero-spotlight__item:hover .hero-spotlight__question { color: var(--color-orange); }
.hero-spotlight__item:hover .hero-spotlight__arrow,
.hero-spotlight__item:focus-visible .hero-spotlight__arrow {
  opacity: 1;
  transform: translateX(2px);
}
.hero-spotlight__item:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.hero-spotlight__divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin: 0;
}

/* -------------------------------------------------------------------------
   10. Carousel skeleton
   ------------------------------------------------------------------------- */
.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-template-columns: 100%;
  overflow: hidden;
}
.carousel__slide {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-in-out);
  pointer-events: none;
}
.carousel__slide[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.carousel__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.carousel__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.3);
  padding: 0;
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.carousel__dot:hover { background: rgba(255, 255, 255, 0.6); }
.carousel__dot[aria-current="true"] {
  background: var(--color-orange);
  transform: scale(1.2);
}
.carousel__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  color: var(--color-white);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.carousel__nav:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}
.section--dark .carousel__dot { background: rgba(255, 255, 255, 0.3); }

/* -------------------------------------------------------------------------
   11. 404 page
   ------------------------------------------------------------------------- */
.page-404 {
  text-align: center;
  padding-block: var(--section-y);
  max-width: 60ch;
  margin-inline: auto;
}
.page-404__code {
  font-size: clamp(4rem, 3rem + 6vw, 8rem);
  font-weight: var(--weight-bold);
  color: var(--color-orange);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}
.page-404 h1 { font-size: var(--text-display-md); margin-bottom: var(--space-4); }
.page-404 p  { font-size: var(--text-body-lg); color: var(--color-gray-700); margin-bottom: var(--space-8); }

/* -------------------------------------------------------------------------
   Legal documents (Cookie / Privacy)
   ------------------------------------------------------------------------- */
.legal-doc {
  max-width: 80ch;
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--color-gray-700);
}
.legal-doc h2 {
  margin: var(--space-12) 0 var(--space-3);
  font-size: var(--text-heading-md);
  color: var(--color-gray-900);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-gray-100);
}
.legal-doc h3 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-heading-sm);
  color: var(--color-gray-900);
}
.legal-doc h2:first-child, .legal-doc h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-doc p { margin: 0 0 var(--space-4); }
.legal-doc ul, .legal-doc ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.legal-doc li { margin-bottom: var(--space-2); }
.legal-doc .callout { margin: var(--space-6) 0; }

/* -------------------------------------------------------------------------
   12. Print
   ------------------------------------------------------------------------- */
@media print {
  site-header, site-footer { display: none; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}

/* -------------------------------------------------------------------------
   13. Beige section (warm neutral) + inline orange highlight
   ------------------------------------------------------------------------- */
.section--beige { background: var(--color-beige); }

.text-orange { color: var(--color-orange); }

/* Reading-width utility — narrative paragraphs that should occupy ~2/3 of
   the container so they don't run edge-to-edge on wide layouts. Falls back
   to full width on mobile. */
.prose-66 { width: 100%; }
@media (min-width: 768px) {
  .prose-66 { width: 66.666%; }
}

/* -------------------------------------------------------------------------
   14. Home — compact hero carousel
   "Twice smaller" hero. The carousel sits centred; each slide is a single
   tagline with a few words highlighted in orange. Fades between slides.
   ------------------------------------------------------------------------- */
.hero--compact {
  min-height: clamp(260px, 38vh, 420px);
  padding-block: var(--space-12) var(--space-12);
  display: flex;
  align-items: center;
}
.hero--compact .hero__content { max-width: 70ch; }

.hero-line {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-white);
  margin: 0;
}

/* Carousel — fade variant.
   The base .carousel__track is a grid stack (all slides occupy the same
   grid cell). The track auto-sizes to the tallest slide, so an overlay
   fade reads cleanly without collapsing the parent height. We only add a
   small Y-translate for a subtle "rise on enter" feel here. */
.carousel--fade .carousel__slide {
  transform: translateY(6px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}
.carousel--fade .carousel__slide[aria-hidden="false"] {
  transform: none;
}

/* -------------------------------------------------------------------------
   15. Logo marquee — infinite-scroll logo strip (Trusted by)
   ------------------------------------------------------------------------- */
.logo-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.logo-marquee__track {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  width: max-content;
  animation: logo-marquee-scroll 60s linear infinite;
}
.logo-marquee:hover .logo-marquee__track,
.logo-marquee:focus-within .logo-marquee__track {
  animation-play-state: paused;
}
.logo-marquee__item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(28px, 2.4vw, 40px);
}
.logo-marquee__item img {
  max-height: 100%;
  width: auto;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}
.logo-marquee__item:hover img { filter: grayscale(0); opacity: 1; }

@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; }
}

/* -------------------------------------------------------------------------
   16. Service cards on home — flat number-led variant inside beige section
   ------------------------------------------------------------------------- */
.service-card--num {
  position: relative;
  padding: clamp(1.5rem, 2.2vw, 2.25rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-gray-100);
  background: var(--color-white);
}
.service-card--num__num {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-wide);
  color: var(--color-orange);
  margin-bottom: var(--space-3);
}
.service-card--num h3 {
  font-size: var(--text-heading-md);
  margin: 0 0 var(--space-3);
}
.service-card--num p {
  margin: 0 0 var(--space-4);
  color: var(--color-gray-700);
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
}
.service-card--num__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-orange);
  text-decoration: none;
}
.service-card--num__cta .btn__arrow {
  transition: transform var(--duration-base) var(--ease-out);
}
.service-card--num__cta:hover .btn__arrow { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   17. Explicit Intelligence panel — embedded inside the practice section
   ------------------------------------------------------------------------- */
.ei-panel {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: 1fr;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid var(--color-beige-2);
}
@media (min-width: 768px) {
  .ei-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}

.ei-panel__brand {
  font-size: var(--text-body-sm);
  /* The brand column collapses to the wordmark's natural width so the
     note paragraph below wraps to exactly that width. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ei-panel__wordmark {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  /* Negative margin-top pulls the image up so its LETTERS (not the
     sparkle stars above them) land at the right column's first-line
     baseline. The sparkles peek above. The shift is the natural-image
     gap (letters_top - sparkles_top = 19px) scaled by displayed/natural
     width (480/603 ≈ 0.796) ≈ 15px. Plus the original space-3 (12px)
     between POWERED BY and the wordmark. */
  margin: calc(var(--space-3) - 15px) 0 var(--space-4);
}
.ei-panel__brand-note {
  width: 100%;
  max-width: 480px;
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-gray-700);
}

.ei-panel__copy p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--color-gray-700);
}
.ei-panel__copy p + p { margin-top: 0; }

/* Vertical alignment: at desktop, push the right column down so its first
   line of body copy starts at the wordmark's top edge. The offset equals
   POWERED-BY's line-box (text-label × 1.5) plus the wordmark image's
   margin-top (var(--space-3)). */
@media (min-width: 768px) {
  .ei-panel__copy {
    padding-top: calc(var(--text-label) * 1.5 + var(--space-3));
  }
}
.ei-panel__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-weight: var(--weight-semibold);
  color: var(--color-orange);
  text-decoration: none;
}
.ei-panel__cta .btn__arrow { transition: transform var(--duration-base) var(--ease-out); }
.ei-panel__cta:hover .btn__arrow { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   18. Why-us — three-column source-text block (no invented headings)
   ------------------------------------------------------------------------- */
.why-grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

.why-item {
  border-left: 2px solid var(--color-orange);
  padding: 0 0 0 var(--space-4);
}
.why-item h3 {
  font-size: var(--text-heading-sm);
  margin: 0 0 var(--space-3);
}
.why-item p {
  margin: 0;
  color: var(--color-gray-700);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
}

/* -------------------------------------------------------------------------
   19. Source-text intro block — two columns, body-led
   ------------------------------------------------------------------------- */
.source-intro {
  display: grid;
  gap: clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 768px) {
  .source-intro { grid-template-columns: 3fr 2fr; }
}

.source-intro__copy p {
  font-size: var(--text-body-lg);
  color: var(--color-gray-900);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-4);
}
.source-intro__copy p:last-child { margin-bottom: 0; }

/* Stats: horizontal (3 columns) ONLY when stacked under the text on
   narrow screens. Once the source-intro switches to two columns at 768px,
   stats become vertical and stay vertical at every wider width. */
.source-intro__stats {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 768px) {
  .source-intro__stats {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* -------------------------------------------------------------------------
   17. Insights — "Thoughts & News" hero, post cards, post body
   ------------------------------------------------------------------------- */

/* Hero panel — centered title + subtitle + LinkedIn CTA, on a navy ground.
   Mirrors the live site's "Thoughts & News" panel and aboutt.pdf slide 1. */
.insights-hero {
  background:
    linear-gradient(180deg, rgba(11,25,46,0.72), rgba(11,25,46,0.92)),
    radial-gradient(ellipse at 20% 0%, rgba(248,111,36,0.18), transparent 55%),
    var(--color-navy);
}
.insights-hero__inner {
  max-width: 60rem;
  margin: 0 auto;
  text-align: center;
}
.insights-hero__title {
  font-size: var(--text-display-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.insights-hero__subtitle {
  margin: var(--space-4) auto 0;
  max-width: 50ch;
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.85);
}
.insights-hero__cta { margin: var(--space-8) 0 0; }

/* Post cards — reuse .case-card chrome; meta row replaces orange tag chips. */
.insights-card .case-card__body { gap: var(--space-2); }
.insights-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-2);
}
.insights-card__category {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-orange);
}
.insights-card__date {
  font-size: var(--text-body-sm);
  color: var(--color-gray-500);
  white-space: nowrap;
}
.insights-card .case-card__title {
  font-size: var(--text-heading-sm);
  line-height: 1.3;
}

/* Body of an individual insights post — readable narrative width, lists, lead. */
.insight-body {
  max-width: 80ch;
}
.insight-body > p,
.insight-body > ul,
.insight-body > ol,
.insight-body > h2,
.insight-body > h3,
.insight-body > blockquote {
  margin-bottom: var(--space-6);
}
.insight-body > h2 {
  font-size: var(--text-heading-md);
  margin-top: var(--space-12);
  color: var(--color-gray-900);
}
.insight-body > h3 {
  font-size: var(--text-heading-sm);
  margin-top: var(--space-8);
  color: var(--color-gray-900);
}
.insight-body > blockquote {
  margin: var(--space-8) 0;
  padding: var(--space-4) var(--space-6);
  border-left: 3px solid var(--color-orange);
  color: var(--color-gray-700);
  font-style: italic;
}
.insight-body__lead {
  font-size: var(--text-body-lg);
  color: var(--color-gray-900);
}
.insight-body__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-8);
  background: var(--color-gray-100);
}

/* -------------------------------------------------------------------------
   18. Engage — Meet-us flip cards
   The annotation on aboutt.pdf slide 2 reads "Not a new page – a text in
   the same card on a flip side", so each event flips on hover/focus to
   reveal the description without navigating away.
   ------------------------------------------------------------------------- */
.event-card {
  position: relative;
  display: block;
  perspective: 1200px;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.event-card__inner {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transition: transform var(--duration-slow) var(--ease-in-out);
  border-radius: var(--radius-md);
}
.event-card:hover .event-card__inner,
.event-card:focus-visible .event-card__inner,
.event-card.is-flipped .event-card__inner {
  transform: rotateY(180deg);
}
.event-card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--color-gray-100);
  display: flex;
  flex-direction: column;
  background: var(--color-white);
}
.event-card__face--front {
  padding: var(--space-6);
  gap: var(--space-4);
  justify-content: space-between;
}
.event-card__logo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--radius-sm);
  padding: var(--space-6);
  min-height: 180px;
}
/* Image-based front face: cover image fills the top, meta sits beneath. */
.event-card__media {
  flex: 1 1 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-gray-50);
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-card__media--contain { background: var(--color-white); border: 1px solid var(--color-gray-100); }
.event-card__media--contain img { object-fit: contain; padding: var(--space-4); }
.event-card__meta { margin-top: var(--space-4); }
.event-card__where {
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-gray-500);
}
.event-card__when {
  margin: var(--space-1) 0 0;
  font-size: var(--text-body-sm);
  color: var(--color-gray-700);
}
.event-card__title {
  margin: var(--space-3) 0 0;
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-900);
}
.event-card__face--back {
  transform: rotateY(180deg);
  padding: var(--space-6);
  background: var(--color-navy);
  color: var(--color-white);
  justify-content: space-between;
}
.event-card__face--back p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-body-sm);
}
.event-card__back-title {
  font-size: var(--text-heading-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-white) !important;
  margin: 0 0 var(--space-3) !important;
}
.event-card__cta {
  display: inline-block;
  margin-top: var(--space-4);
  color: var(--color-orange);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body-sm);
}
@media (prefers-reduced-motion: reduce) {
  .event-card__inner { transition: none; }
}

/* Past events — greyscaled cover, faded chrome, small "Past" badge. */
.event-card--past .event-card__media img { filter: grayscale(1); opacity: 0.85; }
.event-card--past .event-card__face--front { background: var(--color-gray-50); }
.event-card--past .event-card__where,
.event-card--past .event-card__when { color: var(--color-gray-500); }
.event-card--past .event-card__title { color: var(--color-gray-700); }
.event-card__badge {
  display: none;
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(11, 25, 46, 0.78);
  color: var(--color-white);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.event-card--past .event-card__badge { display: inline-block; }

/* -------------------------------------------------------------------------
   18b. Events carousel — horizontal scroller with snap points and arrow nav.
   Three cards visible on desktop, ~1.4 on mobile. JS in main.js scrolls
   the track by one card width on prev/next. Cards inside keep their
   own flip behavior (each is a .event-card with [data-flip-card]).
   ------------------------------------------------------------------------- */
.event-carousel {
  position: relative;
  --event-card-gap: clamp(1rem, 2.5vw, 2rem);
}
.event-carousel__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--event-card-gap);
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px 2px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gray-300) transparent;
}
.event-carousel__track > * {
  scroll-snap-align: start;
  min-width: 0;
}
/* 3 cards visible on desktop. Cards take 1/3 minus gap; the past-events
   separator takes half a card slot. */
.event-carousel__track > .event-card {
  flex: 0 0 calc((100% - 2 * var(--event-card-gap)) / 3);
}
.event-carousel__track > .event-carousel__separator {
  flex: 0 0 calc(((100% - 2 * var(--event-card-gap)) / 3) * 0.5);
}
.event-carousel__track::-webkit-scrollbar { height: 6px; }
.event-carousel__track::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 999px;
}
.event-carousel__track::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 900px) {
  .event-carousel__track > .event-card { flex-basis: 78%; }
  .event-carousel__track > .event-carousel__separator { flex-basis: 39%; }
}
@media (max-width: 480px) {
  .event-carousel__track > .event-card { flex-basis: 88%; }
  .event-carousel__track > .event-carousel__separator { flex-basis: 44%; }
}

/* "Past events" separator tile — half the visual width of a card, with
   the label rendered vertically (rotated CCW so it reads bottom-to-top). */
.event-carousel__separator {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-gray-300);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
  aspect-ratio: 2 / 5;
}
.event-carousel__separator-text {
  font-size: var(--text-heading-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray-500);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.event-carousel__controls { display: inline-flex; gap: var(--space-2); }
.event-carousel__nav {
  appearance: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  color: var(--color-gray-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              opacity var(--duration-base) var(--ease-out);
}
.event-carousel__nav:hover:not(:disabled) {
  border-color: var(--color-orange);
  color: var(--color-orange);
}
.event-carousel__nav:disabled { opacity: 0.35; cursor: not-allowed; }

/* -------------------------------------------------------------------------
   16b. Reveal — subtle fade + small rise on scroll-in (modern, not slidey).
   Elements opt in with [data-reveal]. JS adds .is-revealed when they
   enter the viewport. prefers-reduced-motion: animation is bypassed in JS.
   ------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* Slight cascade for grouped children using a stagger index. */
[data-reveal][data-reveal-delay="1"] { transition-delay: 80ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 160ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 240ms; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------------------
   17a. Case-studies filter — pill chips that toggle a multi-select OR filter.
   Chips render from JS based on the unique tags found on the cards below.
   The card's tag chips are the same buttons in different chrome.
   ------------------------------------------------------------------------- */
.case-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.case-filter__heading {
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-gray-500);
}
.case-filter__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}
.case-filter__chip {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  padding: 6px 12px;
  border: 1px solid var(--color-gray-100);
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-gray-900);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 150ms var(--ease-out),
              border-color 150ms var(--ease-out),
              color 150ms var(--ease-out);
}
.case-filter__chip:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}
.case-filter__chip.is-active {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}
.case-filter__chip-count {
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  background: var(--color-gray-50);
  color: var(--color-gray-500);
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 22px;
  text-align: center;
  transition: background-color 150ms var(--ease-out),
              color 150ms var(--ease-out);
}
.case-filter__chip:hover .case-filter__chip-count {
  background: rgba(248, 111, 36, 0.12);
  color: var(--color-orange);
}
.case-filter__chip.is-active .case-filter__chip-count {
  background: rgba(255, 255, 255, 0.22);
  color: var(--color-white);
}
.case-filter__chip:focus-visible {
  outline: 2px solid var(--color-orange);
  outline-offset: 2px;
}
.case-filter__clear {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  margin-left: auto;
  color: var(--color-gray-500);
  font: inherit;
  font-size: var(--text-body-sm);
  text-decoration: underline;
}
.case-filter__clear:hover { color: var(--color-orange); }
.case-filter__count {
  margin: var(--space-3) 0 0;
  color: var(--color-gray-500);
  font-size: var(--text-body-sm);
  min-height: 1.4em;
}

/* Empty state shown when the active filters match no cards. */
.case-filter-empty {
  display: none;
  text-align: center;
  padding: var(--space-12) 0;
  color: var(--color-gray-500);
}
.case-filter-empty.is-visible { display: block; }
.case-filter-empty__reset {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--color-orange);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------
   17b. Pagination (insights catalog)
   ------------------------------------------------------------------------- */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.pagination__btn {
  appearance: none;
  font: inherit;
  cursor: pointer;
  padding: var(--space-2) var(--space-4);
  min-width: 2.5rem;
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-gray-900);
  font-weight: var(--weight-medium);
  font-size: var(--text-body-sm);
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out);
}
.pagination__btn:hover:not(:disabled) {
  border-color: var(--color-orange);
  color: var(--color-orange);
}
.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pagination__btn.is-current {
  background: var(--color-orange);
  border-color: var(--color-orange);
  color: var(--color-white);
}
.pagination__ellipsis {
  padding: 0 var(--space-2);
  color: var(--color-gray-500);
}
.pagination__status {
  flex-basis: 100%;
  text-align: center;
  margin: var(--space-3) 0 0;
  color: var(--color-gray-500);
  font-size: var(--text-body-sm);
}

/* -------------------------------------------------------------------------
   19b. Link cards (Payments expertise bottom: Case studies / Featured / Resources)
   ------------------------------------------------------------------------- */
.link-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  background: var(--color-white);
  border: 1px solid var(--color-gray-100);
  border-radius: var(--radius-md);
}
.link-card__title {
  margin: 0;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-orange);
}
.link-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.link-card__list a {
  color: var(--color-gray-900);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.link-card__list a:hover {
  color: var(--color-orange);
  text-decoration: underline;
}
.link-card__more {
  margin: var(--space-2) 0 0;
  font-size: var(--text-body-sm);
}

/* -------------------------------------------------------------------------
   20. Payment core competence areas — domain blocks
   Six numbered "competency" blocks. The orange numeral anchors each
   domain; sublists sit in a 2-column grid (or single column when the
   list is short) to break up the wall of bullets without being a flat
   numbered list.
   ------------------------------------------------------------------------- */
.competency {
  position: relative;
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--color-gray-100);
}
.competency:first-of-type { border-top: none; padding-top: 0; }
.competency:last-of-type  { padding-bottom: 0; }

.competency__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: start;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.competency__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-orange);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.competency__title {
  font-size: var(--text-heading-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-gray-900);
  margin: 0;
  letter-spacing: var(--tracking-tight);
}
.competency__lede {
  margin: var(--space-3) 0 0;
  color: var(--color-gray-700);
  max-width: 80ch;
}

.competency__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  /* Indent the body to align with the title (under the numeral). */
}
@media (min-width: 768px) {
  .competency__grid {
    margin-left: calc(clamp(2.5rem, 4.5vw, 4rem) + clamp(1rem, 2vw, 1.75rem));
  }
}

.competency__group { min-width: 0; }
.competency__group--full { grid-column: 1 / -1; }
.competency__group-title {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-orange);
  margin: 0 0 var(--space-3);
}
.competency__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.competency__list li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--color-gray-700);
  line-height: 1.55;
}
.competency__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-orange);
}

/* -------------------------------------------------------------------------
   19. Engage — Contact list (icon + line per channel)
   ------------------------------------------------------------------------- */
.contact-list {
  display: grid;
  gap: var(--space-6);
  max-width: 32rem;
  margin: var(--space-8) auto 0;
}
.contact-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: var(--space-4);
  align-items: center;
}
.contact-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(248, 111, 36, 0.18);
  color: var(--color-orange);
}