/* =============================================================
   ON2IT - design tokens.

   Marketing: edit a value here, the whole site updates.
   Eventually pulled from a brand-skill that captures the actual
   on2it.net look. Until then this file is the reference.
   ============================================================= */

:root {
  /* Brand */
  --on2it-orange: #F47929;
  --on2it-orange-web: #F26E18;
  --on2it-orange-deep: #D85F0F;
  --on2it-orange-text: #B54C0A;       /* WCAG-AA text-safe orange, >=4.5:1 on white/light-grey */
  --on2it-orange-text-hover: #943F08; /* darker hover state for the above, >=6.3:1 */
  --on2it-blue: #1F435F;
  --on2it-dark-blue: #192842;
  --on2it-darker-blue: #15263a;
  --on2it-night: #192842;
  --on2it-light-grey: #F5F2F5;
  --on2it-dark-grey: #4B4B4B;
  --on2it-text: #2A2A2A;
  --on2it-light-blue: #D1EBFC;
  --on2it-light-orange: #F8E5D9;
  --on2it-grey: #A5A5A5;
  --on2it-border: #E2DFE2;
  --on2it-green: #0AA21C;
  --on2it-yellow: #FFE100;
  --on2it-red: #F01C1C;

  /* Type */
  --font-heading: "Abel Pro", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Open Sans", Arial, Helvetica, sans-serif;

  /* Spacing scale (4px base, doubles roughly) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  /* Layout */
  --container-w: 1240px;
  --container-narrow-w: 880px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(15, 30, 45, 0.06);
  --shadow-md: 0 4px 14px rgba(15, 30, 45, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 30, 45, 0.12);
  --transition: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

/* =============================================================
   Reset and base
   ============================================================= */

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

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--on2it-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: var(--on2it-orange-text); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition); }
a:hover { color: var(--on2it-orange-text-hover); }

/* Skip link (WCAG 2.4.1) - first focusable element, injected by engine/template.html.
   Off-screen until focused, then docked top-left above the sticky header. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: var(--s-3) var(--s-5);
  background: var(--on2it-night);
  color: #fff;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.875rem;
  text-decoration: none;
}
.skip-link:focus {
  left: var(--s-4);
  top: var(--s-4);
}


h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: var(--on2it-blue);
  margin: 0 0 var(--s-5);
  font-weight: 400;
}
h1 { font-size: clamp(2.5rem, 6vw, 5rem); letter-spacing: -0.005em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.05rem; }

p { margin: 0 0 var(--s-5); }

ul, ol { margin: 0 0 var(--s-5); padding-left: 1.5rem; }
li { margin-bottom: var(--s-2); }

strong { color: var(--on2it-blue); font-weight: 600; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.container--narrow {
  max-width: var(--container-narrow-w);
  margin: 0 auto;
  padding: 0 var(--s-6);
}

.eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--on2it-orange);
  font-size: 0.875rem;
  margin: 0 0 var(--s-4);
  display: inline-block;
}

.lead {
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--on2it-blue);
}

/* =============================================================
   Buttons — canonical rules now live in section 06 (below).
   ============================================================= */

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* =============================================================
   Header + mega menu
   ============================================================= */

.site-header {
  background: rgba(14, 26, 42, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
  gap: var(--s-6);
}
.site-header__logo img { height: 40px; width: auto; }

/* Mega nav: hidden on mobile, flex on desktop. */
.mega-nav { display: none; }
.site-header__cta { display: none; }
.site-header__burger { display: flex; }

@media (min-width: 1000px) {
  .mega-nav { display: flex; }
  .site-header__cta { display: inline-flex; }
  .site-header__burger { display: none !important; }
}

.mega-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--s-7);
}
.mega-nav__item { position: relative; margin: 0; }
.mega-nav__trigger,
.mega-nav__item--simple > a {
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
  cursor: pointer;
  padding: var(--s-4) 0;
  text-decoration: none;
  position: relative;
  display: inline-block;
}
.mega-nav__trigger::after,
.mega-nav__item--simple > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.85rem;
  height: 2px;
  background: var(--on2it-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.mega-nav__item:hover .mega-nav__trigger,
.mega-nav__item--simple > a:hover { color: #fff; }
.mega-nav__item:hover .mega-nav__trigger::after,
.mega-nav__item--simple > a:hover::after { transform: scaleX(1); }

.mega-nav__panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #fff;
  color: var(--on2it-text);
  padding: var(--s-6);
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: var(--s-6);
  width: max-content;
  max-width: 880px;
  box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--on2it-orange);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 41;
}
.mega-nav__panel--narrow {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  max-width: 560px;
}
.mega-nav__item:hover .mega-nav__panel,
.mega-nav__item:focus-within .mega-nav__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-nav__col h4 {
  color: var(--on2it-orange);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  margin: 0 0 var(--s-3);
}
.mega-nav__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega-nav__col li { margin-bottom: 0.45rem; }
.mega-nav__col a {
  color: var(--on2it-blue);
  text-decoration: none;
  font-size: 0.95rem;
  transition: color var(--transition);
}
.mega-nav__col a:hover { color: var(--on2it-orange-text-hover); }

/*
  Language switcher. Flag-only trigger; clicking reveals a small panel
  with the alternate language. Smaller panel than the main mega-nav
  panels because it only carries one item.
*/
.mega-nav__item--lang .mega-nav__trigger--lang {
  padding: var(--s-3) 0;
  line-height: 0;
}
.mega-nav__item--lang .mega-nav__trigger--lang::after {
  display: none;
}
.mega-nav__item--lang .mega-nav__trigger--lang img {
  display: block;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.mega-nav__panel--lang {
  display: block;
  width: auto;
  min-width: 180px;
  padding: var(--s-3);
  grid-template-columns: none;
}
.mega-nav__panel--lang ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mega-nav__panel--lang li { margin: 0; }
.mega-nav__panel--lang a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  color: var(--on2it-blue);
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 4px;
  transition: background-color var(--transition), color var(--transition);
}
.mega-nav__panel--lang a:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--on2it-orange-deep);
}
.mega-nav__panel--lang img {
  display: block;
  width: 24px;
  height: 16px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
/*
  The current-language row: not a link, no hover, greyed out. Keep the
  same flex layout as the <a> rows so the list stays visually aligned.
*/
.mega-nav__panel--lang li.is-current .lang-current {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.95rem;
  border-radius: 4px;
  cursor: default;
}
.mega-nav__panel--lang li.is-current .lang-current img {
  opacity: 0.55;
}

.site-header__burger {
  background: none;
  border: 0;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  padding: 0;
}
.site-header__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: transform var(--transition);
}

/* =============================================================
   Footer
   ============================================================= */

.site-footer {
  background: var(--on2it-night);
  color: #fff;
  margin-top: 0;
  padding-top: var(--s-9);
  padding-bottom: var(--s-6);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--on2it-orange) 0%, var(--on2it-orange-deep) 100%);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-7);
}
@media (min-width: 800px) {
  .site-footer__cols { grid-template-columns: repeat(5, 1fr); }
}
.site-footer h4 {
  color: var(--on2it-orange);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  margin: 0 0 var(--s-4);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 0.5rem; }
.site-footer a {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  text-decoration: none;
  transition: color var(--transition);
}
.site-footer a:hover { color: #fff; }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.site-footer__brand { display: flex; align-items: center; gap: var(--s-4); }
.site-footer__brand img { height: 32px; width: auto; opacity: 0.95; }
.site-footer__brand span {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.65);
}
.site-footer__social { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--s-5); }
.site-footer__copyright {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin-top: var(--s-5);
  letter-spacing: 0.05em;
  text-align: center;
}

/* =============================================================
   Hero - dramatic, full-width, gradient + grid pattern
   Supports optional video background and full-viewport variants.
   ============================================================= */

.hero {
  position: relative;
  background: linear-gradient(135deg, var(--on2it-darker-blue) 0%, var(--on2it-dark-blue) 50%, var(--on2it-blue) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

/* Video background lives inside .hero. Full bleed, dark overlay, behind content. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.55;
}
.hero__video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(14, 26, 42, 0.72) 0%, rgba(31, 67, 95, 0.55) 100%),
    radial-gradient(circle at 80% 20%, rgba(244, 121, 41, 0.18) 0%, transparent 60%);
  z-index: -1;
  pointer-events: none;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,0.05) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 60px);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  top: -10%; right: -15%;
  width: 60vw; height: 60vw;
  max-width: 800px; max-height: 800px;
  background: radial-gradient(circle, rgba(244, 121, 41, 0.16) 0%, transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  padding-top: 60px;
  padding-bottom: var(--s-10);
  z-index: 2;
  width: 100%;
}
.hero__inner > .eyebrow { font-size: 15px; font-weight: 500; letter-spacing: 0.22em; margin-bottom: 28px; display: block; }
.hero h1 {
  color: #fff;
  max-width: 60rem;
  margin-bottom: var(--s-5);
  font-size: clamp(2.75rem, 7vw, 6rem);
  line-height: 0.95;
}
.hero__inner p {
  color: rgba(255, 255, 255, 0.92);
  max-width: 40rem;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: 1.5;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-7); }
.hero__quote {
  margin-top: var(--s-7);
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  border-left: 3px solid var(--on2it-orange);
  padding-left: var(--s-4);
}

.hero--full { min-height: 88vh; }
.hero--compact { min-height: auto; }
.hero--compact .hero__inner { padding-top: 60px; padding-bottom: var(--s-7); }
.hero--compact h1 { font-size: clamp(2rem, 4.5vw, 3.75rem); }

/* When the hero contains a video, the gradient pseudo-elements should
   still show but at lower opacity so the video reads through. */
.hero--video::before { opacity: 0.5; }
.hero--video::after { opacity: 0.6; }

/* =============================================================
   Sections
   ============================================================= */

.section { padding: var(--s-10) 0; }
.section--alt { background: var(--on2it-light-grey); }
.section--blue { background: var(--on2it-blue); color: #fff; }
.section--blue h1, .section--blue h2, .section--blue h3 { color: #fff; }
.section--blue p { color: rgba(255, 255, 255, 0.88); }
.section--dark { background: var(--on2it-night); color: #fff; position: relative; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255, 255, 255, 0.88); }
.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.section--dark > * { position: relative; }
.section--orange { background: var(--on2it-orange); color: #fff; }
.section--orange h1, .section--orange h2, .section--orange h3 { color: #fff; }
.section--centered { text-align: center; }

.section__head { max-width: 60rem; margin-bottom: var(--s-8); }
.section__head h2 { margin-bottom: var(--s-4); }
.section__head p { font-size: 1.2rem; line-height: 1.55; }

.section__head--inline {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--s-5);
  max-width: none;
}

/* Side-by-side text + image-placeholder */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .split--reverse > :first-child { order: 2; }
}
.split__visual {
  background: linear-gradient(135deg, var(--on2it-blue), var(--on2it-dark-blue));
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.split__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,0.08) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.08) 0 1px, transparent 1px 40px);
}
.split__visual::after {
  content: attr(data-label);
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  right: var(--s-5);
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
}
.split__visual--orange { background: linear-gradient(135deg, var(--on2it-orange), var(--on2it-orange-deep)); }

/* =============================================================
   Feature cards
   ============================================================= */

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
@media (min-width: 700px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.feature-card {
  background: #fff;
  border: 1px solid var(--on2it-border);
  padding: var(--s-7);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
}
.feature-card:hover {
  border-color: var(--on2it-orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.feature-card h3 { margin-bottom: var(--s-2); color: var(--on2it-blue); }
.feature-card p { margin-bottom: var(--s-3); color: var(--on2it-text); }
.feature-card a {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
  text-decoration: none;
  color: var(--on2it-orange-web);
  margin-top: auto;
}
.feature-card a:hover { color: var(--on2it-orange-text-hover); }
.feature-card--blue { background: var(--on2it-blue); color: #fff; border-color: transparent; }
.feature-card--blue h3 { color: #fff; }
.feature-card--blue p { color: rgba(255, 255, 255, 0.85); }
.feature-card--blue a { color: var(--on2it-orange-glow); }

.feature-card__icon {
  width: 48px;
  height: 48px;
  background: var(--on2it-light-orange);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on2it-orange-deep);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  margin-bottom: var(--s-3);
}

/* =============================================================
   Stat callouts
   ============================================================= */

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-7);
  text-align: center;
}
@media (min-width: 800px) {
  .stats--3 { grid-template-columns: repeat(3, 1fr); }
  .stats--4 { grid-template-columns: repeat(4, 1fr); }
}
.stat__number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--on2it-orange);
  line-height: 1;
  margin-bottom: var(--s-3);
}
.stat__label {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.95rem;
  color: var(--on2it-blue);
}
.section--blue .stat__label, .section--dark .stat__label { color: rgba(255,255,255,0.92); }

/* =============================================================
   Trust strip - logos of customers and partners
   ============================================================= */

.trust-strip {
  padding: var(--s-7) 0;
  background: var(--on2it-light-grey);
  border-top: 1px solid var(--on2it-border);
  border-bottom: 1px solid var(--on2it-border);
}
.trust-strip__label {
  text-align: center;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--on2it-grey);
  font-size: 0.8rem;
  margin-bottom: var(--s-5);
}
.trust-strip__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s-7) var(--s-9);
  opacity: 0.65;
}
.trust-strip__logos > span {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--on2it-blue);
  font-size: 1.1rem;
}

/* =============================================================
   Bullet patterns
   ============================================================= */

.checks { list-style: none; padding: 0; }
.checks li {
  padding-left: 2rem;
  position: relative;
  margin-bottom: var(--s-4);
  font-size: 1.05rem;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.4rem;
  width: 1.25rem; height: 1.25rem;
  background: var(--on2it-orange);
  clip-path: polygon(40% 65%, 80% 25%, 90% 35%, 40% 85%, 10% 55%, 20% 45%);
}

.section--dark .checks li, .section--blue .checks li { color: rgba(255,255,255,0.9); }

/* =============================================================
   CTA strip - bold band that closes a page
   ============================================================= */

.cta-strip {
  padding: var(--s-9) 0;
  background: linear-gradient(135deg, var(--on2it-blue), var(--on2it-dark-blue));
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cta-strip > * { position: relative; }
.cta-strip h2 { color: #fff; margin-bottom: var(--s-4); }
.cta-strip p { color: rgba(255,255,255,0.9); max-width: 36rem; margin: 0 auto var(--s-7); font-size: 1.15rem; }

/* Orange, image-backed variant - reuses the .proof-img-bg photo-overlay
   pattern already used elsewhere on the site (shared background images). */
.cta-strip--img { background: var(--on2it-orange-web); }
.cta-strip--img .cta-strip__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
@media (max-width: 900px), (pointer: coarse) {
  .cta-strip--img .cta-strip__bg { background-attachment: scroll; }
}
.cta-strip--img .cta-strip__bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(14,26,42,0.82) 0%, rgba(14,26,42,0.58) 55%, rgba(14,26,42,0.82) 100%),
    var(--on2it-orange-web);
  opacity: 0.9;
}
.cta-strip--img > .container { position: relative; z-index: 1; }

/* =============================================================
   Pull quote
   ============================================================= */

.pull-quote {
  border-left: 4px solid var(--on2it-orange);
  padding: var(--s-2) 0 var(--s-2) var(--s-6);
  margin: var(--s-7) 0;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--on2it-blue);
  font-style: italic;
}
.pull-quote cite {
  display: block;
  margin-top: var(--s-4);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--on2it-grey);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* =============================================================
   Blog post
   ============================================================= */

.post-header {
  background: linear-gradient(135deg, var(--on2it-darker-blue), var(--on2it-dark-blue));
  color: #fff;
  padding: var(--s-10) 0 var(--s-9);
  position: relative;
  overflow: hidden;
}
.post-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,0.05) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.05) 0 1px, transparent 1px 60px);
  pointer-events: none;
}
.post-header > * { position: relative; }
.post-header h1 { color: #fff; max-width: 50rem; margin-bottom: var(--s-5); }
.post-header__meta {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.8rem;
  color: var(--on2it-orange);
  margin-bottom: var(--s-5);
}
.post-header__byline { font-size: 1rem; color: rgba(255, 255, 255, 0.88); }

.post-body { padding: var(--s-9) 0; }
.post-body__inner { max-width: 44rem; margin: 0 auto; padding: 0 var(--s-6); font-size: 1.075rem; }
.post-body h2 { margin-top: var(--s-8); }
.post-body h3 { margin-top: var(--s-7); }
.post-body blockquote {
  border-left: 4px solid var(--on2it-orange);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  margin: var(--s-6) 0;
  font-style: italic;
  color: var(--on2it-blue);
}
.post-body hr { border: none; border-top: 1px solid var(--on2it-border); margin: var(--s-7) 0; }

.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-list li {
  background: var(--on2it-light-grey);
  color: var(--on2it-blue);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  padding: 0.45rem 0.85rem;
}

/* =============================================================
   Blog index
   ============================================================= */

.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li {
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--on2it-border);
}
.post-list li:last-child { border-bottom: 0; }
.post-list h2 { margin-bottom: 0.75rem; font-size: 2rem; }
.post-list h2 a { text-decoration: none; color: var(--on2it-blue); transition: color var(--transition); }
.post-list h2 a:hover { color: var(--on2it-orange-text-hover); }
.post-list__meta {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: var(--on2it-orange);
  margin-bottom: 0.5rem;
}

/* =============================================================
   Contact form
   ============================================================= */

.contact-form { max-width: 36rem; }
.contact-form label { display: block; margin-bottom: var(--s-4); }
.contact-form label span {
  display: block;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--on2it-blue);
  margin-bottom: 0.45rem;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.9rem;
  border: 1px solid var(--on2it-border);
  background: #fff;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.contact-form input:focus, .contact-form textarea:focus {
  outline: none;
  border-color: var(--on2it-orange);
  box-shadow: 0 0 0 3px rgba(244, 121, 41, 0.15);
}
.contact-form__row { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 600px) {
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   Image-backed cards and panels
   Use a real <img> inside .feature-card__media for richer visuals.
   ============================================================= */

.feature-card--media {
  padding: 0;
  overflow: hidden;
}
.feature-card__media {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--on2it-blue), var(--on2it-dark-blue));
  position: relative;
}
.feature-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 360ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.feature-card--media:hover .feature-card__media img { transform: scale(1.04); }
.feature-card__body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  flex: 1;
}

/* Image-backed split visual (replaces the gradient placeholder). */
.split__image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
}
.split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.split__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(14, 26, 42, 0.4) 100%);
  pointer-events: none;
}

/* Image-backed full-width band. Set via inline style:
   <section class="band band--image" style="--band-img: url('https://...')"> */
.band {
  position: relative;
  padding: var(--s-10) 0;
  color: #fff;
  overflow: hidden;
}
.band--image {
  background: var(--on2it-darker-blue);
}
.band--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--band-img);
  background-size: cover;
  background-position: center;
  opacity: 0.22;
  z-index: 0;
}
.band--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14, 26, 42, 0.92) 0%, rgba(31, 67, 95, 0.82) 100%);
  z-index: 0;
}
.band > .container { position: relative; z-index: 1; }
.band h1, .band h2, .band h3 { color: #fff; }
.band p { color: rgba(255, 255, 255, 0.92); }

/* =============================================================
   Video poster (clickable image that opens the video externally)
   Use when an embed is blocked on localhost or by privacy settings.
   ============================================================= */

.video-poster {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--on2it-dark-blue);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  text-decoration: none;
  cursor: pointer;
}
.video-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 360ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.video-poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 26, 42, 0.2) 0%, rgba(14, 26, 42, 0.55) 100%);
  pointer-events: none;
}
.video-poster:hover img { transform: scale(1.04); }
.video-poster__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: var(--on2it-orange-web);
  border-radius: 50%;
  color: #fff;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 6px;
  z-index: 1;
  transition: transform var(--transition), background var(--transition);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.video-poster:hover .video-poster__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--on2it-orange);
}
.video-poster__label {
  position: absolute;
  bottom: var(--s-5);
  left: var(--s-5);
  color: #fff;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  z-index: 1;
}

/* =============================================================
   Scroll-reveal (no-JS friendly fallback)
   nav.js wires up the IntersectionObserver. If JS is off, content
   simply shows immediately - we don't hide it by default.
   ============================================================= */

.reveal { opacity: 1; transform: none; transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1); }
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal--delay { transition-delay: 120ms; }
html.js .reveal--delay-2 { transition-delay: 240ms; }

/* =============================================================
   View transitions
   ============================================================= */

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.2, 0.6, 0.2, 1);
  }
}


/* ===== BEGIN migrated ON2IT lp-* / preview design system (supersedes rules above) ===== */
/* ============================================================
   ON2IT — style.css  (unified)
   Sections: 01 tokens · 02 fonts · 03 reset · 04 type
             05 layout · 06 buttons
   ============================================================ */

/* ─── 01 · DESIGN TOKENS ─── */
:root {
  /* Brand — canonical */
  --on2it-orange:        #F47929;   /* print orange — not for web UI */
  --on2it-orange-web:    #F26E18;   /* web primary orange */
  --on2it-orange-deep:   #D85F0F;
  --on2it-orange-text:   #B54C0A;   /* WCAG-AA text-safe orange, >=4.5:1 on white/light-grey */
  --on2it-orange-text-hover: #943F08; /* darker hover state for the above, >=6.3:1 */
  --on2it-orange-glow:   #FFB87A;
  --on2it-blue:          #1F435F;
  --on2it-dark-blue:     #192842;
  --on2it-darker-blue:   #15263a;
  --on2it-night:         #192842;
  --on2it-light-grey:    #F5F2F5;
  --on2it-off-white:     #E4EAF0;
  --on2it-dark-grey:     #4B4B4B;
  --on2it-text:          #2A2A2A;
  --on2it-light-blue:    #D1EBFC;
  --on2it-light-orange:  #F8E5D9;
  --on2it-grey:          #A5A5A5;
  --on2it-border:        #E2DFE2;
  --on2it-green:         #0AA21C;
  --on2it-yellow:        #FFE100;
  --on2it-red:           #F01C1C;

  /* Dark UI tokens (homepage components) */
  --on2it-homepage-bg:     #0B1420;
  --on2it-homepage-bg-2:   #0F1C2E;
  --on2it-homepage-bg-3:   #152236;
  --on2it-prevent:         #5aab8a;
  --on2it-prevent-dim:     rgba(90,171,138,0.12);
  --on2it-prevent-rule:    rgba(90,171,138,0.25);
  --on2it-rule:            rgba(255,255,255,0.08);
  --on2it-rule-bright:     rgba(255,255,255,0.14);
  --on2it-muted:           #7A93A8;
  --on2it-muted-dark:      #8CA2B4;   /* WCAG-AA-safe variant of --on2it-muted: same hue/sat, lightness raised
                                          just enough to clear 4.5:1 against .card's translucent-white overlay
                                          (rgba(255,255,255,.04-.06)) on top of --on2it-night, the worst realistic
                                          case. --on2it-muted itself is untouched because --lp-mid-grey (light-
                                          section text, e.g. .lp-section-light .card-time) still depends on it and
                                          needs a *darker* value against light backgrounds, not a lighter one. */
  --on2it-dim:             #3D5568;
  --on2it-card-bg:         rgba(20,42,70,0.35);
  --on2it-card-border:     rgba(30,65,95,0.45);
  --on2it-card-hover:      rgba(30,55,90,0.5);

  /* ---------------------------------------------------------------------
   UI eyebrow / kicker utility system.

   Consolidates the site's many one-off "small uppercase Abel Pro label"
   rules (section labels, eyebrows, badges, tags, meta rows) into one base
   class plus a handful of letter-spacing modifiers. Each modifier matches
   an EXACT (font-size, letter-spacing) pair that was already in wide,
   consistent use across the site - nothing here changes what anything
   looks like, it just gives the repeated declaration one home instead of
   ~95. The original per-component class (e.g. .card-type, .cr-label)
   stays in the markup and in its own CSS rule for whatever is still
   unique to it (color, margin, padding, etc.); only the shared typography
   (font-family, font-size, letter-spacing, text-transform) moved here.

   A few class names (proof-label, hero-stat-eyebrow, section-label,
   card-type) were deliberately left out: at least one page overrides them
   locally with a different letter-spacing, and merging would make the
   cascade pick one page's value for every page.
   --------------------------------------------------------------------- */
.ui-eyebrow { font-family: var(--fh); font-size: 14px; text-transform: uppercase; }
.ui-eyebrow--ls-1px    { letter-spacing: 1px; }
.ui-eyebrow--ls-1-5px  { letter-spacing: 1.5px; }
.ui-eyebrow--ls-2px    { letter-spacing: 2px; }
.ui-eyebrow--ls-2-5px  { letter-spacing: 2.5px; }
.ui-eyebrow--ls-012em  { letter-spacing: 0.12em; }
.ui-eyebrow--ls-014em  { letter-spacing: 0.14em; }
.ui-eyebrow--ls-016em  { letter-spacing: 0.16em; }
.ui-eyebrow--ls-018em  { letter-spacing: 0.18em; }

/* Typography */
  --font-heading: "Abel Pro", "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Open Sans", Arial, Helvetica, sans-serif;

  /* Spacing scale (4px base) */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;
  --s-4: 1rem;     --s-5: 1.5rem;  --s-6: 2rem;
  --s-7: 3rem;     --s-8: 4rem;    --s-9: 6rem;
  --s-10: 8rem;    --s-11: 12rem;

  /* Layout */
  --container-w:        1240px;
  --container-narrow-w: 880px;

  /* Effects */
  --shadow-sm: 0 1px 2px rgba(15,30,45,0.06);
  --shadow-md: 0 4px 14px rgba(15,30,45,0.08);
  --shadow-lg: 0 12px 40px rgba(15,30,45,0.12);
  --transition: 180ms cubic-bezier(0.2,0.6,0.2,1);

  /* Homepage shorthand aliases (homepage component CSS uses these) */
  --orange:       var(--on2it-orange-web);
  --navy:         var(--on2it-homepage-bg);
  --navy-2:       var(--on2it-homepage-bg-2);
  --navy-3:       var(--on2it-homepage-bg-3);
  --blue:         var(--on2it-blue);
  --prevent:      var(--on2it-prevent);
  --prevent-dim:  var(--on2it-prevent-dim);
  --prevent-rule: var(--on2it-prevent-rule);
  --rule:         var(--on2it-rule);
  --rule-bright:  var(--on2it-rule-bright);
  --white:        #FFFFFF;
  --off-white:    var(--on2it-off-white);
  --muted:        var(--on2it-muted-dark);  /* dark-mode secondary text; see --on2it-muted-dark above */
  --dim:          var(--on2it-dim);
  --fh:           var(--font-heading);
  --divider:      rgba(255,255,255,0.08);
  --faint:        rgba(255,255,255,0.35);
  --card-bg:      var(--on2it-card-bg);
  --card-border:  var(--on2it-card-border);
  --card-hover:   var(--on2it-card-hover);
  --H:            var(--font-heading);
  --B:            var(--font-body);
  --ease:         cubic-bezier(.4,0,.2,1);
  --t:            .35s;

  /* LP token aliases — corrects #F47929 → #F26E18 in all lp-* components */
  --lp-orange:        var(--on2it-orange-web);
  --lp-orange-hover:  var(--on2it-orange-deep);
  --lp-orange-glow:   var(--on2it-orange-glow);
  --lp-navy:          var(--on2it-blue);
  --lp-night:         var(--on2it-night);
  --lp-light:         var(--on2it-light-grey);
  --lp-mid-grey:      var(--on2it-muted);
  --lp-grey:          var(--on2it-grey);
  --lp-white:         #ffffff;
  --lp-border:        rgba(31,67,95,0.4);
  --lp-border-orange: rgba(242,110,24,0.4);
  --lp-border-light:  rgba(31,67,95,0.3);
  --lp-font-display:  var(--font-heading);
  --lp-font-body:     var(--font-body);
  --lp-font-mono:     'JetBrains Mono','Courier New',monospace;
}

/* ─── 02 · FONTS ─── (self-hosted; no external CDN dependency) ─── */
/* Abel Pro is the brand heading face and ships in a single Bold master.
   Map it across the whole weight range so every heading — whatever
   font-weight it declares — renders in real Abel Pro rather than falling
   through to a different fallback face at weight 400. */
@font-face {
  font-family: "Abel Pro";
  src: url("fonts/AbelPro-Bold.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Open Sans (body) — brand-shipped, Apache-2.0; see fonts/OpenSans-LICENSE.txt */
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-SemiboldItalic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("fonts/OpenSans-BoldItalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}


/* ─── 03 · RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  /* WCAG 2.4.11 (Focus Not Obscured): keep focused elements clear of the
     sticky .on2nav bar (68px) plus the optional region-suggestion banner,
     which sets --on2region-h via site/assets/region-suggest.js. */
  scroll-padding-top: calc(68px + var(--on2region-h, 0px));
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--on2it-text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--on2it-orange-text); text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition); }
a:hover { color: var(--on2it-orange-text-hover); }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.02;
  color: var(--on2it-blue);
  margin: 0 0 var(--s-5);
  font-weight: 400;
}
h1 { font-size: clamp(2.5rem,6vw,5rem); letter-spacing: -0.005em; }
h2 { font-size: clamp(2rem,4.5vw,3.5rem); }
h3 { font-size: clamp(1.5rem,2.5vw,2rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.05rem; }
p { margin: 0 0 var(--s-5); }
ul, ol { margin: 0 0 var(--s-5); padding-left: 1.5rem; }
li { margin-bottom: var(--s-2); }
strong { color: var(--on2it-blue); font-weight: 600; }

/* ─── 04 · TYPOGRAPHY HELPERS ─── */
.container { max-width: var(--container-w); margin: 0 auto; padding: 0 var(--s-6); }
.container--narrow { max-width: var(--container-narrow-w); margin: 0 auto; padding: 0 var(--s-6); }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 768px) { .wrap { padding: 0 24px; } }

.eyebrow {
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--on2it-orange-web);
  font-size: 0.875rem;
  margin: 0 0 var(--s-4);
  display: inline-block;
}
/* Dark-bg variant — adds // prefix */
.eyebrow-slash {
  font-weight: 700;
  color: var(--orange);
  display: block;
  margin-bottom: 16px;
}
.eyebrow-slash::before { content: "// "; }

.lead { font-size: 1.25rem; line-height: 1.55; color: var(--on2it-blue); }

/* Display type (homepage) */
.display    { font-family: var(--H); font-weight: 700; font-size: clamp(2.2rem,4vw,3.6rem); line-height: .95; letter-spacing: -1px; text-transform: uppercase; }
.display-lg { font-family: var(--H); font-weight: 400; font-size: clamp(1.7rem,3vw,2.6rem); line-height: 1.05; letter-spacing: -.5px; text-transform: uppercase; }
.display-sm { font-family: var(--H); font-weight: 700; font-size: clamp(1.2rem,1.8vw,1.5rem); line-height: 1.1; text-transform: uppercase; letter-spacing: .3px; }
.display em, .display-lg em, .display-sm em { font-style: normal; color: var(--orange); }
.body-lead { font-size: clamp(1rem,1.5vw,1.125rem); line-height: 1.75; color: var(--muted); font-weight: 300; }
.body-lead strong { color: var(--off-white); font-weight: 600; }

/* Grid texture overlay */
.grid-tex {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size: 72px 72px;
}

/* ─── 05 · LAYOUT ─── */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-7);
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .split--reverse > :first-child { order: 2; }
}
.split__visual {
  background: linear-gradient(135deg,var(--on2it-blue),var(--on2it-dark-blue));
  border-radius: 4px;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.split__visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,0.08) 0 1px,transparent 1px 40px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,0.08) 0 1px,transparent 1px 40px);
}
.split__visual::after {
  content: attr(data-label);
  position: absolute;
  bottom: var(--s-5); left: var(--s-5); right: var(--s-5);
  color: rgba(255,255,255,0.95);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
}
.split__visual--orange { background: linear-gradient(135deg,var(--on2it-orange-web),var(--on2it-orange-deep)); }
.split__image {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: 4px; box-shadow: var(--shadow-lg);
}
.split__image img { width: 100%; height: 100%; object-fit: cover; }
.split__image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,transparent 50%,rgba(14,26,42,0.4) 100%);
  pointer-events: none;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); }

/* ─── 06 · BUTTONS ─── */
/* Canonical button system (2026-08-04). Two looks, site-wide:
     - Primary   = orange fill  (source of truth: hero "See It Live")
     - Secondary = outline      (source of truth: hero "See What You Get Back")
   Every class below is kept so existing markup keeps working, but each
   one is now pinned to render pixel-identical to one of those two looks
   (or, where the background makes that unreadable, the nearest safe
   variant — blue outline on light sections, solid white on orange
   surfaces). Do not give any of these classes a different look again;
   add a new alias to this section instead of inventing a new style. */

.btn,
.btn-primary,
.btn--primary,
.btn-solid,
.lp-btn-primary,
.cta-strip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fh);
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 14px 28px;
  margin: 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
  background: var(--orange);
  color: var(--navy);
}
.btn:hover,
.btn-primary:hover,
.btn--primary:hover,
.btn-solid:hover,
.lp-btn-primary:hover,
.cta-strip-btn:hover {
  background: #D45E0A;
  color: var(--navy);
  transform: translateY(-2px);
}
.btn svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.btn:hover svg { transform: translateX(4px); }

/* Secondary — dark/photo backgrounds (white outline, e.g. the hero) */
.btn-outline,
.btn--ghost,
.btn-ghost,
.btn-outline-wh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fh);
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 12px 28px;
  margin: 0;
  border: 2px solid rgba(255,255,255,0.45);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
  background: transparent;
  color: var(--white);
}
.btn-outline:hover,
.btn--ghost:hover,
.btn-ghost:hover,
.btn-outline-wh:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.06);
  color: var(--white);
  transform: translateY(-2px);
}

/* Secondary — light/white backgrounds (blue outline; white-on-white would vanish) */
.btn--ghost-blue,
.btn--secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fh);
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 12px 28px;
  margin: 0;
  border: 2px solid var(--on2it-blue);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.2s;
  background: transparent;
  color: var(--on2it-blue);
}
.btn--ghost-blue:hover,
.btn--secondary:hover {
  background: var(--on2it-blue);
  color: #fff;
  transform: translateY(-2px);
}

/* Secondary — sitting on an orange/colored surface (solid white reads better than an outline) */
.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--fh);
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  padding: 12px 28px;
  margin: 0;
  border: 2px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
  background: #fff;
  color: var(--orange);
}
.btn-white:hover { background: rgba(255,255,255,.9); transform: translateY(-2px); }

.btn--lg { padding: 18px 36px; font-size: 15px; }

/* ─── 07 · HEADER + MEGA NAV ─── */
.site-header {
  background: rgba(14,26,42,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
  gap: var(--s-6);
}
.site-header__logo img { height: 40px; width: auto; }
.mega-nav { display: none; }
.site-header__cta { display: none; }
.site-header__burger { display: flex; }
@media (min-width: 1000px) {
  .mega-nav { display: flex; }
  .site-header__cta { display: inline-flex; }
  .site-header__burger { display: none !important; }
}
.mega-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-7); }
.mega-nav__item { position: relative; margin: 0; }
.mega-nav__trigger,
.mega-nav__item--simple > a {
  background: none; border: 0;
  color: rgba(255,255,255,0.92);
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
  cursor: pointer;
  padding: var(--s-4) 0;
  text-decoration: none;
  position: relative;
  display: inline-block;
}
.mega-nav__trigger::after,
.mega-nav__item--simple > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.85rem;
  height: 2px;
  background: var(--on2it-orange-web);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.mega-nav__item:hover .mega-nav__trigger,
.mega-nav__item--simple > a:hover { color: #fff; }
.mega-nav__item:hover .mega-nav__trigger::after,
.mega-nav__item--simple > a:hover::after { transform: scaleX(1); }
.mega-nav__panel {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: #fff; color: var(--on2it-text);
  padding: var(--s-6);
  display: grid;
  grid-template-columns: repeat(3,minmax(180px,1fr));
  gap: var(--s-6);
  width: max-content; max-width: 880px;
  box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--on2it-orange-web);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 41;
}
.mega-nav__panel--narrow { grid-template-columns: repeat(2,minmax(180px,1fr)); max-width: 560px; }
.mega-nav__item:hover .mega-nav__panel,
.mega-nav__item:focus-within .mega-nav__panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mega-nav__col h4 { color: var(--on2it-orange-text); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; margin: 0 0 var(--s-3); }
.mega-nav__col ul { list-style: none; padding: 0; margin: 0; }
.mega-nav__col li { margin-bottom: 0.45rem; }
.mega-nav__col a { color: var(--on2it-blue); text-decoration: none; font-size: 0.95rem; transition: color var(--transition); }
.mega-nav__col a:hover { color: var(--on2it-orange-text-hover); }
.site-header__burger { background: none; border: 0; width: 40px; height: 40px; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; padding: 0; }
.site-header__burger span { display: block; width: 24px; height: 2px; background: #fff; transition: transform var(--transition); }

/* ─── 08 · FOOTER ─── */
.site-footer {
  background: var(--on2it-night);
  color: #fff;
  margin-top: 0;
  padding-top: var(--s-9);
  padding-bottom: var(--s-6);
  position: relative;
}
.site-footer::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,var(--on2it-orange-web) 0%,var(--on2it-orange-deep) 100%);
}
.site-footer__cols { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s-7); }
@media (min-width: 800px) { .site-footer__cols { grid-template-columns: repeat(5,1fr); } }
.site-footer h4 { color: var(--on2it-orange-web); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; margin: 0 0 var(--s-4); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 0 0 0.5rem; }
.site-footer a { color: rgba(255,255,255,0.78); font-size: 0.95rem; text-decoration: none; transition: color var(--transition); }
.site-footer a:hover { color: #fff; }
.site-footer__bar { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid rgba(255,255,255,0.08); }
.site-footer__brand { display: flex; align-items: center; gap: var(--s-4); }
.site-footer__brand img { height: 32px; width: auto; opacity: 0.95; }
.site-footer__brand span { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; color: rgba(255,255,255,0.65); }
.site-footer__social { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-5); }
.site-footer__social a { display: inline-flex; align-items: center; gap: 0.4rem; }
.site-footer__social svg { flex-shrink: 0; opacity: 0.85; transition: opacity var(--transition); }
.site-footer__social a:hover svg { opacity: 1; }
.site-footer__copyright { font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-top: var(--s-5); letter-spacing: 0.05em; text-align: center; }

/* Homepage minimal footer */
footer { background: var(--navy-3); border-top: 1px solid var(--rule); padding: 48px 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer-left svg { height: 26px; width: auto; margin-bottom: 10px; }
.footer-left p { font-size: 12px; color: var(--dim); line-height: 1.5; }
.footer-right { text-align: right; }
.footer-right p { font-size: 12px; color: var(--dim); line-height: 1.8; }
.footer-right a { color: var(--orange); }
@media (max-width: 600px) { .footer-inner { flex-direction: column; align-items: flex-start; } .footer-right { text-align: left; } }

/* ─── 09 · HERO ─── */

/* Standard page hero */
.hero {
  position: relative;
  background: linear-gradient(135deg,var(--on2it-darker-blue) 0%,var(--on2it-dark-blue) 50%,var(--on2it-blue) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  min-height: 60vh;
  display: flex;
  align-items: center;
}
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: 0.55; }
.hero__video-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg,rgba(14,26,42,0.72) 0%,rgba(31,67,95,0.55) 100%),
    radial-gradient(circle at 80% 20%,rgba(244,121,41,0.18) 0%,transparent 60%);
  z-index: -1; pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(to right,rgba(255,255,255,0.05) 0 1px,transparent 1px 60px),
    repeating-linear-gradient(to bottom,rgba(255,255,255,0.05) 0 1px,transparent 1px 60px);
  pointer-events: none; z-index: 0;
}
.hero::after {
  content: ""; position: absolute;
  top: -10%; right: -15%;
  width: 60vw; height: 60vw;
  max-width: 800px; max-height: 800px;
  background: radial-gradient(circle,rgba(244,121,41,0.16) 0%,transparent 60%);
  filter: blur(40px); pointer-events: none; z-index: 0;
}
.hero__inner { position: relative; padding-top: 60px; padding-bottom: var(--s-10); z-index: 2; width: 100%; }
.hero h1 { color: #fff; max-width: 60rem; margin-bottom: var(--s-5); font-size: clamp(2.75rem,7vw,6rem); line-height: 0.95; }
.hero__inner p { color: rgba(255,255,255,0.92); max-width: 40rem; font-size: clamp(1.15rem,1.6vw,1.4rem); line-height: 1.5; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-7); }
.hero__quote { margin-top: var(--s-7); font-style: italic; color: rgba(255,255,255,0.85); border-left: 3px solid var(--on2it-orange-web); padding-left: var(--s-4); }
.hero--full { min-height: 88vh; }
.hero--compact { min-height: auto; }
.hero--compact .hero__inner { padding-top: 60px; padding-bottom: var(--s-7); }
.hero--compact h1 { font-size: clamp(2rem,4.5vw,3.75rem); }
.hero--video::before { opacity: 0.5; }
.hero--video::after { opacity: 0.6; }

/* nl-nl/nl-en homepage hero: the waterworks photo (same asset as the
   megamenu's "400-year-old Dutch strategy" featured card, which links to
   the Zero Trust/Dutch-water-defense video) as a background, to pull the
   NL homepage visually further apart from the international one. Same
   two-layer pattern as .mm-card--navy: a dark gradient (kept dark enough
   that .hero-split's white text/terminal widget stay readable) plus the
   photo underneath via a custom property, so the image lives in markup
   per-page rather than hardcoded into this shared class. */
.hero--photo {
  background-image: linear-gradient(135deg, rgba(14,26,42,0.90) 0%, rgba(25,40,66,0.82) 45%, rgba(31,67,95,0.62) 100%), var(--hero-photo, none);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
/* nl-nl/nl-en dropped the AUXO terminal widget from this hero (2026-07-29),
   leaving .hero-left as the only .hero-split child. Without this, the
   1fr 1fr grid still reserves an empty second track; single-column lets
   the text sit against the full-width photo instead of half of it.
   hero-left itself is then capped at 2/3 (not the full column) and stays
   left-aligned, so it reads as a wide text block over the photo rather
   than stretching edge to edge. */
/* display:block (not grid) removes any ambiguity from a stretch/max-width
   grid item defaulting to centered in some engines - a plain block box is
   unambiguously left-aligned with no auto margins anywhere on it. */
/* .hero is display:flex (align-items:center) with no flex-grow set on its
   .container child, so .container's width was resolving by shrink-to-fit
   content sizing instead of "block width, capped by max-width, centered"
   like every plain <section><div class="container"> elsewhere on the
   page - the actual cause of the extra left offset vs e.g. #compliance's
   .section__head. Forcing width:100% here removes that ambiguity; the
   existing max-width + margin:auto on .container then behave exactly
   like they do in every non-flex section. */
.hero--photo .container { width: 100%; }
.hero--photo .hero-split { display: block; width: 100%; }
.hero--photo .hero-left {
  display: block;
  width: 70%;
  max-width: 70%;
  margin: 0;
  text-align: left;
}
@media (max-width: 900px) {
  .hero--photo .hero-left { width: 100%; max-width: 100%; }
  /* background-attachment: fixed is unreliable/janky on mobile browsers
     (iOS Safari in particular effectively ignores it or repaints badly);
     scroll is the safe fallback there. */
  .hero--photo { background-attachment: scroll; }
}

/* Homepage dark hero — child selectors differentiate from standard .hero */
.hero--full::before { background-image: none; }
.hero-split { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.hero-left .logo-hero { margin-bottom: 56px; }
.hero-left .logo-hero svg { height: 42px; width: auto; }
.hero-accent-line { width: 56px; height: 3px; background: var(--orange); margin-bottom: 28px; }
.hero-left .lp-hero-title { margin-bottom: 28px; }
.hero-left .lp-hero-title .line-small { display: block; font-size: .58em; color: rgba(255,255,255,.28); margin-top: 10px; letter-spacing: .5px; }
.hero-left .lp-hero-subhead { max-width: 520px; margin-bottom: 40px; }
.hero-left .lp-hero-subhead strong { color: var(--off-white); font-weight: 600; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }
.hero-proof-row { display: flex; align-items: stretch; border: 1px solid var(--rule-bright); border-radius: 2px; overflow: hidden; }
.proof-item { flex: 1; padding: 20px 24px; border-right: 1px solid var(--rule); transition: background var(--t); }
.proof-item:last-child { border-right: none; }
.proof-item:hover { background: var(--card-bg); }
.proof-num { font-family: var(--H); font-size: 1.6rem; font-weight: 700; color: var(--orange); line-height: 1; margin-bottom: 4px; }
.proof-label { font-family: var(--H); font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
@media (max-width: 960px) { .hero-split { grid-template-columns: 1fr; gap: 48px; } .hero-right { display: none; } }
@media (max-width: 480px) {
  .hero-proof-row { flex-wrap: wrap; }
  .hero-proof-row .proof-item { flex: 1 1 50%; min-width: 0; }
  .hero-proof-row .proof-item:nth-child(odd) { border-right: 1px solid var(--rule); }
  .hero-proof-row .proof-item:nth-child(even) { border-right: none; }
  .hero-proof-row .proof-item:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--rule); }
  .hero-proof-row .proof-item:nth-last-child(-n+2) { border-bottom: none; }
}

/* ─── 10 · SECTIONS ─── */
.section { padding: var(--s-10) 0; }
.section--alt { background: var(--on2it-light-grey); }
.section--blue { background: var(--on2it-blue); color: #fff; }
.section--blue h1, .section--blue h2, .section--blue h3 { color: #fff; }
.section--blue p { color: rgba(255,255,255,0.88); }
.section--dark { background: var(--on2it-night); color: #fff; position: relative; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255,255,255,0.88); }
.section--dark::before {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
}
.section--dark > * { position: relative; }
.section--orange { background: var(--on2it-orange-web); color: #fff; }
.section--orange h1, .section--orange h2, .section--orange h3 { color: #fff; }
.section--centered { text-align: center; }
.section__head { max-width: 60rem; margin-bottom: var(--s-8); }
.section__head h2 { margin-bottom: var(--s-4); }
.section__head p { font-size: 1.2rem; line-height: 1.55; }
.section__head--inline { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--s-5); max-width: none; }

/* ─── 11 · LIGHT COMPONENTS ─── */

/* Feature grid + cards */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .feature-grid--3 { grid-template-columns: repeat(3,1fr); } .feature-grid--4 { grid-template-columns: repeat(4,1fr); } }
.feature-card { background: #fff; border: 1px solid var(--on2it-border); padding: var(--s-7); transition: all var(--transition); display: flex; flex-direction: column; gap: var(--s-3); position: relative; }
.feature-card:hover { border-color: var(--on2it-orange-web); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature-card h3 { margin-bottom: var(--s-2); color: var(--on2it-blue); }
.feature-card p { margin-bottom: var(--s-3); color: var(--on2it-text); }
.feature-card a { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.875rem; text-decoration: none; color: var(--on2it-orange-text); margin-top: auto; }
.feature-card a:hover { color: var(--on2it-orange-text-hover); }
.feature-card--blue { background: var(--on2it-blue); color: #fff; border-color: transparent; }
.feature-card--blue h3 { color: #fff; }
.feature-card--blue p { color: rgba(255,255,255,0.85); }
.feature-card--blue a { color: var(--on2it-orange-glow); }
.feature-card__icon { width: 48px; height: 48px; background: var(--on2it-light-orange); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--on2it-orange-deep); font-family: var(--font-heading); font-size: 1.5rem; margin-bottom: var(--s-3); }
.feature-card--media { padding: 0; overflow: hidden; }
.feature-card__media { aspect-ratio: 16 / 10; background: linear-gradient(135deg,var(--on2it-blue),var(--on2it-dark-blue)); position: relative; }
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 360ms cubic-bezier(0.2,0.6,0.2,1); }
.feature-card--media:hover .feature-card__media img { transform: scale(1.04); }
.feature-card__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--s-7); text-align: center; }
@media (min-width: 800px) { .stats--3 { grid-template-columns: repeat(3,1fr); } .stats--4 { grid-template-columns: repeat(4,1fr); } }
.stat__number { font-family: var(--font-heading); font-size: clamp(2.5rem,5vw,4.5rem); color: var(--on2it-orange-web); line-height: 1; margin-bottom: var(--s-3); }
.stat__label { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem; color: var(--on2it-blue); }
.section--blue .stat__label, .section--dark .stat__label { color: rgba(255,255,255,0.92); }

/* Trust strip */
.trust-strip { padding: var(--s-7) 0; background: var(--on2it-light-grey); border-top: 1px solid var(--on2it-border); border-bottom: 1px solid var(--on2it-border); }
.trust-strip__label { text-align: center; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.18em; color: var(--on2it-grey); font-size: 0.8rem; margin-bottom: var(--s-5); }
.trust-strip__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-7) var(--s-9); opacity: 0.65; }
.trust-strip__logos > span { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.05em; color: var(--on2it-blue); font-size: 1.1rem; }

/* Checks */
.checks { list-style: none; padding: 0; }
.checks li { padding-left: 2rem; position: relative; margin-bottom: var(--s-4); font-size: 1.05rem; }
.checks li::before { content: ""; position: absolute; left: 0; top: 0.4rem; width: 1.25rem; height: 1.25rem; background: var(--on2it-orange-web); clip-path: polygon(40% 65%,80% 25%,90% 35%,40% 85%,10% 55%,20% 45%); }
.section--dark .checks li, .section--blue .checks li { color: rgba(255,255,255,0.9); }

/* CTA strip */
.cta-strip { padding: var(--s-9) 0; background: linear-gradient(135deg,var(--on2it-blue),var(--on2it-dark-blue)); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta-strip::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cta-strip > * { position: relative; }
.cta-strip h2 { color: #fff; margin-bottom: var(--s-4); }
.cta-strip p { color: rgba(255,255,255,0.9); max-width: 36rem; margin: 0 auto var(--s-7); font-size: 1.15rem; }

/* Pull quote */
.pull-quote { border-left: 4px solid var(--on2it-orange-web); padding: var(--s-2) 0 var(--s-2) var(--s-6); margin: var(--s-7) 0; font-size: 1.4rem; line-height: 1.4; color: var(--on2it-blue); font-style: italic; }
.pull-quote cite { display: block; margin-top: var(--s-4); font-style: normal; font-size: 0.9rem; color: var(--on2it-grey); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; }

/* Band */
.band { position: relative; padding: var(--s-10) 0; color: #fff; overflow: hidden; }
.band--image { background: var(--on2it-darker-blue); }
.band--image::before { content: ""; position: absolute; inset: 0; background-image: var(--band-img); background-size: cover; background-position: center; opacity: 0.22; z-index: 0; }
.band--image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(14,26,42,0.92) 0%,rgba(31,67,95,0.82) 100%); z-index: 0; }
.band > .container { position: relative; z-index: 1; }
.band h1, .band h2, .band h3 { color: #fff; }
.band p { color: rgba(255,255,255,0.92); }

/* Video poster */
.video-poster { position: relative; display: block; aspect-ratio: 16 / 9; width: 100%; background: var(--on2it-dark-blue); overflow: hidden; box-shadow: var(--shadow-lg); text-decoration: none; cursor: pointer; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 360ms cubic-bezier(0.2,0.6,0.2,1); }
.video-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(14,26,42,0.2) 0%,rgba(14,26,42,0.55) 100%); pointer-events: none; }
.video-poster:hover img { transform: scale(1.04); }
.video-poster__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; background: var(--on2it-orange-web); border-radius: 50%; color: #fff; font-size: 1.75rem; display: flex; align-items: center; justify-content: center; padding-left: 6px; z-index: 1; transition: transform var(--transition), background var(--transition); box-shadow: 0 8px 24px rgba(0,0,0,0.35); }
.video-poster:hover .video-poster__play { transform: translate(-50%,-50%) scale(1.08); background: var(--on2it-orange); }
.video-poster__label { position: absolute; bottom: var(--s-5); left: var(--s-5); color: #fff; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; z-index: 1; }

/* Contact form */
.contact-form { max-width: 36rem; }
.contact-form label { display: block; margin-bottom: var(--s-4); }
.contact-form label span { display: block; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--on2it-blue); margin-bottom: 0.45rem; }
.contact-form input, .contact-form textarea { width: 100%; font-family: var(--font-body); font-size: 1rem; padding: 0.9rem; border: 1px solid var(--on2it-border); background: #fff; transition: border-color var(--transition), box-shadow var(--transition); }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--on2it-orange-web); box-shadow: 0 0 0 3px rgba(242,110,24,0.15); }
.contact-form__row { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 600px) { .contact-form__row { grid-template-columns: 1fr 1fr; } }

/* ─── 12 · DARK HOMEPAGE COMPONENTS ─── */

/* Terminal block */
.terminal { background: rgba(15,28,46,.95); border: 1px solid var(--rule-bright); border-radius: 8px; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.5); }
.terminal-bar { background: rgba(255,255,255,.05); padding: 12px 18px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--rule); }
.t-dot { width: 10px; height: 10px; border-radius: 50%; }
.t-dot.red { background: #FF5F57; } .t-dot.yellow { background: #FEBC2E; } .t-dot.green { background: #28C840; }
.terminal-label { flex: 1; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); font-family: var(--font-body); }
.terminal-body { padding: 28px 24px; font-family: 'Courier New',monospace; font-size: 12.5px; }
.t-line { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; opacity: 0; animation: fadein .4s var(--ease) forwards; }
.t-line:nth-child(1){animation-delay:.3s} .t-line:nth-child(2){animation-delay:.9s} .t-line:nth-child(3){animation-delay:1.6s}
.t-line:nth-child(4){animation-delay:2.4s} .t-line:nth-child(5){animation-delay:3.2s} .t-line:nth-child(6){animation-delay:4.0s} .t-line:nth-child(7){animation-delay:4.8s}
@keyframes fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.t-tag { font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 2px 8px; border-radius: 2px; white-space: nowrap; margin-top: 1px; flex-shrink: 0; }
.tag-agent{background:rgba(242,110,24,.2);color:var(--orange)} .tag-zt{background:rgba(31,67,95,.6);color:#7EC8F0}
.tag-ok{background:rgba(10,162,28,.2);color:#4AE86A} .tag-alert{background:rgba(240,28,28,.2);color:#FF7070} .tag-human{background:rgba(255,255,255,.1);color:var(--off-white)}
.t-text { color: var(--off-white); font-size: 12px; line-height: 1.5; }
.t-text .dim{color:var(--dim)} .t-text .hl{color:var(--orange)} .t-text .ok{color:#4AE86A} .t-text .warn{color:#FEBC2E}
.terminal-footer { padding: 14px 24px; background: rgba(242,110,24,.07); border-top: 1px solid rgba(242,110,24,.15); display: flex; align-items: center; gap: 10px; }
.terminal-footer span { font-size: 11px; color: var(--orange); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: pulse 1.8s ease infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* JTBD band */
.jtbd-band { padding: 72px 0; background: linear-gradient(90deg,var(--orange) 0%,#D45E0A 100%); position: relative; overflow: hidden; }
.jtbd-band::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent,transparent 71px,rgba(0,0,0,.07) 71px,rgba(0,0,0,.07) 72px); }
.jtbd-inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap; }
.jtbd-statement { font-family:var(--H); font-size:clamp(1.1rem,1.8vw,1.5rem); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:#fff; max-width:740px; line-height:1.15; }
.jtbd-statement em { font-style:normal; color:rgba(255,255,255,.55); }

/* Work section */
.work-section { padding:100px 0; background:var(--navy-2); position:relative; overflow:hidden; }
.work-split { display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:start; }
.work-left .display-lg { color:var(--white); margin-bottom:24px; }
.work-left .display-lg .accent { color:var(--orange); }
.work-left .body-lead { margin-bottom:24px; }
.block-3am { margin-top:36px; padding:32px 28px; background:rgba(242,110,24,.06); border:1px solid rgba(242,110,24,.18); border-left:3px solid var(--orange); border-radius:0 2px 2px 0; position:relative; overflow:hidden; }
.block-3am-time { font-family:var(--H); font-size:5rem; font-weight:700; color:rgba(242,110,24,.12); line-height:1; position:absolute; bottom:-8px; right:16px; letter-spacing:-2px; }
.block-3am-text { font-size:clamp(15px,1.5vw,17px); line-height:1.65; color:var(--muted); position:relative; z-index:1; }
.block-3am-text strong { color:var(--off-white); }
.block-3am-sub { font-size:12px; color:var(--dim); margin-top:12px; line-height:1.6; font-style:italic; position:relative; z-index:1; }
.proof-grid { display:grid; grid-template-columns:1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:2px; overflow:hidden; }
.proof-card { background:var(--navy-2); padding:28px 24px; position:relative; transition:background var(--t); }
.proof-card:hover { background:var(--card-bg); }
.proof-card::before { content:''; position:absolute; top:0; left:0; bottom:0; width:3px; background:var(--orange); }
.proof-card-lbl { color:var(--orange); margin-bottom:8px; }
.proof-card-title { font-family:var(--H); font-size:1.1rem; text-transform:uppercase; letter-spacing:.5px; color:var(--off-white); margin-bottom:8px; }
.proof-card p { font-size:12.5px; color:var(--muted); line-height:1.65; }
.proof-card p strong { color:var(--off-white); }
.proof-card-icon { width:40px; height:40px; border-radius:2px; background:rgba(242,110,24,.1); border:1px solid rgba(242,110,24,.2); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.proof-card-icon svg { width:20px; height:20px; stroke:var(--orange); fill:none; stroke-width:1.5; }
@media(max-width:900px){.work-split{grid-template-columns:1fr;gap:48px}}

/* Owns band */
.owns-band { padding:88px 0; background:var(--navy); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); position:relative; overflow:hidden; }
.owns-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.owns-headline { font-family:var(--H); font-weight:700; font-size:clamp(1.6rem,3vw,2.4rem); text-transform:uppercase; line-height:1.0; letter-spacing:-.5px; margin-bottom:24px; }
.owns-headline .white{color:var(--white)} .owns-headline .orange{color:var(--orange)}
.owns-list { list-style:none; display:flex; flex-direction:column; gap:0; }
.owns-item { padding:18px 0; border-bottom:1px solid var(--rule); display:flex; gap:16px; align-items:flex-start; }
.owns-item:last-child { border-bottom:none; }
.owns-mk { color:var(--orange); flex-shrink:0; padding-top:2px; width:112px; }
.owns-t { font-size:13px; line-height:1.7; color:var(--muted); }
.owns-t strong { color:var(--off-white); display:block; margin-bottom:2px; font-weight:600; }
@media(max-width:900px){.owns-inner{grid-template-columns:1fr;gap:48px}}

/* AUXO platform */
.auxo-section { padding:100px 0; background:var(--navy-2); position:relative; overflow:hidden; }
.auxo-platform-wrap { display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:start; }
.auxo-left .lp-section-title { color:var(--white); margin-bottom:24px; }
.auxo-left .body-lead { margin-bottom:20px; }
.auxo-trademark { display:inline-flex; align-items:center; gap:12px; padding:10px 20px; margin-bottom:32px; background:rgba(242,110,24,.1); border:1px solid rgba(242,110,24,.22); border-radius:2px; }
.auxo-trademark span { font-family:var(--H); font-size:.9rem; text-transform:uppercase; letter-spacing:2px; color:var(--orange); font-weight:700; }
.auxo-divider { height:1px; background:var(--rule); margin:32px 0; }
.platform-diagram { border:1px solid var(--rule-bright); border-radius:8px; overflow:hidden; background:var(--navy-3); }
.pd-header { padding:18px 24px; background:rgba(255,255,255,.04); border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; }
.pd-title { font-family:var(--H); font-size:.8rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.pd-badge { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); padding:4px 10px; border:1px solid rgba(242,110,24,.3); border-radius:2px; }
.pd-body { padding:28px 24px; display:flex; flex-direction:column; gap:10px; }
.pd-layer { padding:16px 18px; border-radius:2px; display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid transparent; transition:all var(--t) var(--ease); cursor:default; }
.pd-layer:hover { transform:translateX(4px); }
.pd-layer.layer-detect{background:rgba(242,110,24,.1);border-color:rgba(242,110,24,.2)}
.pd-layer.layer-prevent{background:rgba(90,171,138,.1);border-color:rgba(90,171,138,.25)}
.pd-layer.layer-zt{background:rgba(126,200,240,.06);border-color:rgba(126,200,240,.15)}
.pd-layer.layer-mcp{background:rgba(10,162,28,.07);border-color:rgba(10,162,28,.2)}
.pd-layer-name { font-family:var(--H); font-size:.85rem; text-transform:uppercase; letter-spacing:1px; }
.layer-detect .pd-layer-name{color:var(--orange)} .layer-prevent .pd-layer-name{color:var(--prevent)} .layer-zt .pd-layer-name{color:#B0D8F0} .layer-mcp .pd-layer-name{color:#4AE86A}
.pd-layer-desc { font-size:11.5px; color:var(--muted); line-height:1.5; flex:1; }
.pd-layer-tag { font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:2px; white-space:nowrap; flex-shrink:0; }
.layer-detect .pd-layer-tag{background:rgba(242,110,24,.2);color:var(--orange)} .layer-prevent .pd-layer-tag{background:var(--prevent-dim);color:var(--prevent)} .layer-zt .pd-layer-tag{background:rgba(176,216,240,.1);color:#B0D8F0} .layer-mcp .pd-layer-tag{background:rgba(74,232,106,.15);color:#4AE86A}
.pd-connector { display:flex; align-items:center; justify-content:center; height:16px; position:relative; }
.pd-connector::before { content:''; position:absolute; width:1px; height:100%; background:var(--dim); }
.pd-footer { padding:16px 24px; background:rgba(242,110,24,.06); border-top:1px solid rgba(242,110,24,.12); text-align:center; }
.pd-footer p { font-size:14px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); font-family:var(--H); }
@media(max-width:900px){.auxo-platform-wrap{grid-template-columns:1fr;gap:48px}}

/* Swarm intro band */
.swarm-band { padding:88px 0; background:var(--navy); border-top:1px solid var(--rule); }
.swarm-band-inner { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.swarm-heading .lp-section-title { color:var(--white); margin-bottom:16px; }
.swarm-heading .body-lead { margin-bottom:20px; }
.grow-note { padding:16px 20px; background:rgba(242,110,24,.07); border:1px solid rgba(242,110,24,.18); border-radius:2px; font-size:12.5px; color:var(--muted); line-height:1.6; }
.grow-note strong { color:var(--off-white); }
.mcp-bar { padding:16px 20px; margin-bottom:2px; background:rgba(10,162,28,.07); border:1px solid rgba(10,162,28,.2); border-radius:2px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.mcp-bar-name { font-family:var(--H); font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; color:#4AE86A; display:flex; align-items:center; gap:10px; }
.mcp-bar-name::before { content:''; width:6px; height:6px; border-radius:50%; background:#4AE86A; flex-shrink:0; }
.mcp-bar-badge { font-size:9.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 10px; border-radius:2px; background:rgba(10,162,28,.15); color:#4AE86A; border:1px solid rgba(10,162,28,.3); white-space:nowrap; }
@media(max-width:900px){.swarm-band-inner{grid-template-columns:1fr;gap:48px}}

/* Agent grid */
.agents-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:8px; overflow:hidden; }
.agent { background:var(--navy-2); padding:22px 18px; transition:background var(--t); cursor:default; position:relative; }
.agent:hover { background:var(--card-bg); }
.agent::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.agent.cat-zt::before{background:rgba(55,138,221,.7)} .agent.cat-traffic::before{background:rgba(139,127,212,.7)}
.agent.cat-detect::before{background:rgba(242,110,24,.8)} .agent.cat-context::before{background:rgba(90,171,138,.7)}
.agent.cat-intel::before{background:rgba(249,197,80,.7)} .agent.cat-case::before{background:rgba(180,120,220,.7)}
.agent.cat-response::before{background:rgba(242,110,24,.6)} .agent.cat-compliance::before{background:rgba(74,222,128,.6)}
.agent-cat { font-size:9.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--dim); margin-bottom:8px; display:flex; align-items:center; gap:6px; }
.agent-cat::before { content:''; width:10px; height:1px; flex-shrink:0; }
.agent.cat-zt .agent-cat{color:rgba(55,138,221,.8)} .agent.cat-zt .agent-cat::before{background:rgba(55,138,221,.5)}
.agent.cat-traffic .agent-cat{color:rgba(139,127,212,.8)} .agent.cat-traffic .agent-cat::before{background:rgba(139,127,212,.5)}
.agent.cat-detect .agent-cat{color:rgba(242,110,24,.9)} .agent.cat-detect .agent-cat::before{background:rgba(242,110,24,.5)}
.agent.cat-context .agent-cat{color:rgba(90,171,138,.85)} .agent.cat-context .agent-cat::before{background:rgba(90,171,138,.5)}
.agent.cat-intel .agent-cat{color:rgba(249,197,80,.9)} .agent.cat-intel .agent-cat::before{background:rgba(249,197,80,.5)}
.agent.cat-case .agent-cat{color:rgba(180,120,220,.85)} .agent.cat-case .agent-cat::before{background:rgba(180,120,220,.5)}
.agent.cat-response .agent-cat{color:rgba(242,110,24,.8)} .agent.cat-response .agent-cat::before{background:rgba(242,110,24,.4)}
.agent.cat-compliance .agent-cat{color:rgba(74,222,128,.85)} .agent.cat-compliance .agent-cat::before{background:rgba(74,222,128,.4)}
.agent-name { font-family:var(--H); font-size:.88rem; text-transform:uppercase; letter-spacing:.5px; color:var(--off-white); margin-bottom:6px; }
.agent-desc { font-size:12px; color:var(--muted); line-height:1.6; }
@media(max-width:900px){.agents-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:500px){.agents-grid{grid-template-columns:1fr}}

/* MDR intro band */
.mdr-intro-band { padding:0; background:var(--navy-3); position:relative; overflow:hidden; border-top:1px solid var(--rule-bright); border-bottom:1px solid var(--rule-bright); }
.mdr-intro-band::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent,transparent 71px,rgba(255,255,255,.025) 71px,rgba(255,255,255,.025) 72px); pointer-events:none; }
.mdr-intro-split { display:grid; grid-template-columns:1fr 1fr; position:relative; z-index:1; }
.mdr-intro-cell { padding:64px 72px; position:relative; }
.mdr-intro-cell.detect-cell { border-right:1px solid var(--rule-bright); }
.mdr-intro-cell::before { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; }
.detect-cell::before{background:var(--orange)} .prevent-cell::before{background:var(--prevent)}
.mdr-intro-tier { margin-bottom:12px; }
.detect-cell .mdr-intro-tier{color:var(--orange)} .prevent-cell .mdr-intro-tier{color:var(--prevent)}
.mdr-intro-title { font-family:var(--H); font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--white); line-height:1.05; margin-bottom:8px; }
.mdr-intro-sub { font-family:var(--H); font-size:clamp(1rem,1.5vw,1.2rem); font-weight:400; text-transform:uppercase; letter-spacing:.3px; line-height:1.1; }
.detect-cell .mdr-intro-sub{color:var(--orange)} .prevent-cell .mdr-intro-sub{color:var(--prevent)}
@media(max-width:700px){.mdr-intro-split{grid-template-columns:1fr}.mdr-intro-cell.detect-cell{border-right:none;border-bottom:1px solid var(--rule-bright)}.mdr-intro-cell{padding:48px 32px}}

/* Services section */
.services-section { padding:100px 0; background:var(--navy-2); position:relative; overflow:hidden; }
.services-header { max-width:760px; margin-bottom:72px; }
.services-header .lp-section-title{color:var(--white);margin-bottom:16px} .services-header .body-lead{margin-bottom:0}
.services-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule-bright); border:1px solid var(--rule-bright); border-radius:8px; overflow:hidden; }
.svc-card { background:var(--navy-3); position:relative; display:flex; flex-direction:column; }
.svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.svc-card.detect::before{background:var(--orange)} .svc-card.prevent::before{background:var(--prevent)}
.svc-head { padding:36px 36px 24px; border-bottom:1px solid var(--rule); }
.svc-tier { font-size:9px; letter-spacing:2.5px; text-transform:uppercase; font-family:var(--B); margin-bottom:10px; }
.detect .svc-tier{color:var(--orange)} .prevent .svc-tier{color:var(--prevent)}
.svc-title { font-family:var(--H); font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--white); line-height:1.05; margin-bottom:6px; }
.svc-sub { font-family:var(--H); font-size:clamp(.95rem,1.4vw,1.15rem); font-weight:400; text-transform:uppercase; letter-spacing:.3px; line-height:1.1; margin-bottom:16px; }
.detect .svc-sub{color:var(--orange)} .prevent .svc-sub{color:var(--prevent)}
.svc-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:2px; }
.detect .svc-badge{background:rgba(242,110,24,.1);border:1px solid rgba(242,110,24,.25)} .prevent .svc-badge{background:var(--prevent-dim);border:1px solid var(--prevent-rule)}
.svc-badge-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; animation:pulse 1.8s ease infinite; }
.detect .svc-badge-dot{background:var(--orange)} .prevent .svc-badge-dot{background:var(--prevent)}
.svc-badge span { font-size:10px; letter-spacing:1.5px; text-transform:uppercase; font-family:var(--B); font-weight:700; }
.detect .svc-badge span{color:var(--orange)} .prevent .svc-badge span{color:var(--prevent)}
.svc-groups { flex:1; }
.svc-group { padding:24px 36px; border-bottom:1px solid var(--rule); }
.svc-group:last-of-type { border-bottom:none; }
.svc-group-lbl { margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.detect .svc-group-lbl{color:var(--orange)} .prevent .svc-group-lbl{color:var(--prevent)}
.svc-group-lbl::before { content:''; width:14px; height:1px; flex-shrink:0; }
.detect .svc-group-lbl::before{background:rgba(242,110,24,.4)} .prevent .svc-group-lbl::before{background:var(--prevent-rule)}
.svc-items { list-style:none; display:flex; flex-direction:column; }
.svc-item { padding:14px 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:12.5px; color:var(--muted); line-height:1.5; display:flex; align-items:flex-start; gap:10px; }
.svc-item:last-child { border-bottom:none; }
.svc-item::before { content:'→'; font-size:10px; flex-shrink:0; margin-top:1px; }
.detect .svc-item::before{color:var(--orange)} .prevent .svc-item::before{color:var(--prevent)}
.svc-item strong { color:var(--off-white); }
.svc-foot { padding:22px 36px; margin-top:auto; }
.detect .svc-foot{background:rgba(242,110,24,.06);border-top:1px solid rgba(242,110,24,.15)} .prevent .svc-foot{background:var(--prevent-dim);border-top:1px solid var(--prevent-rule)}
.svc-foot-claim { font-family:var(--H); font-size:clamp(13px,1.3vw,16px); font-weight:700; color:var(--white); line-height:1.25; margin-bottom:4px; }
.svc-foot-source { font-size:11.5px; font-style:italic; color:var(--muted); }
.human-bar { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); border-top:none; }
.hb-cell { padding:20px 36px; display:flex; align-items:center; gap:16px; }
.hb-cell.detect-hb{background:rgba(242,110,24,.04)} .hb-cell.prevent-hb{background:var(--prevent-dim)}
.hb-num { font-family:var(--H); font-size:1.8rem; font-weight:700; line-height:1; flex-shrink:0; }
.detect-hb .hb-num{color:var(--orange)} .prevent-hb .hb-num{color:var(--prevent)}
.hb-label { font-size:11.5px; color:var(--muted); line-height:1.5; }
.hb-label strong { color:var(--off-white); display:block; margin-bottom:2px; }
@media(max-width:900px){.services-grid{grid-template-columns:1fr}.human-bar{grid-template-columns:1fr}}
@media(max-width:600px){.svc-head,.svc-group,.svc-foot{padding-left:24px;padding-right:24px}.hb-cell{padding-left:24px;padding-right:24px}}

/* MCP section */
.mcp-section { padding:100px 0; background:var(--navy); position:relative; overflow:hidden; }
.mcp-split { display:grid; grid-template-columns:1fr 1fr; gap:96px; align-items:center; }
.mcp-visual { position:relative; background:var(--navy-3); border:1px solid var(--rule-bright); border-radius:8px; overflow:hidden; padding:32px 28px; }
.mcp-visual-header { font-family:var(--H); font-size:.75rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--rule); }
.mcp-flow { display:flex; flex-direction:column; }
.mcp-node { display:flex; align-items:flex-start; gap:16px; padding:18px 0; border-bottom:1px solid var(--rule); position:relative; }
.mcp-node:last-child { border-bottom:none; }
.mcp-node-icon { width:38px; height:38px; border-radius:2px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--H); font-size:.75rem; font-weight:700; letter-spacing:1px; margin-top:2px; }
.icon-zt{background:rgba(126,200,240,.12);color:#7EC8F0;border:1px solid rgba(126,200,240,.2)} .icon-mcp{background:rgba(10,162,28,.12);color:#4AE86A;border:1px solid rgba(10,162,28,.2)}
.icon-ai{background:rgba(242,110,24,.12);color:var(--orange);border:1px solid rgba(242,110,24,.2)} .icon-out{background:rgba(255,255,255,.06);color:var(--off-white);border:1px solid var(--rule)}
.mcp-node-body h4 { font-family:var(--H); font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; color:var(--off-white); margin-bottom:4px; }
.mcp-node-body p { font-size:12px; color:var(--muted); line-height:1.55; }
.mcp-node-connector { position:absolute; left:18px; bottom:-17px; height:17px; width:1px; background:var(--dim); }
.mcp-unique-badge { margin-top:20px; padding:14px 18px; background:rgba(10,162,28,.08); border:1px solid rgba(10,162,28,.2); border-radius:2px; display:flex; align-items:center; gap:10px; }
.mcp-unique-badge svg { width:16px; height:16px; fill:#4AE86A; flex-shrink:0; }
.mcp-unique-badge p { font-size:12px; color:#4AE86A; font-weight:600; margin:0; line-height:1.4; }
.mcp-text .lp-kicker { color:#4AE86A; }
.mcp-text .lp-section-title { color:var(--white); margin-bottom:24px; }
@media(max-width:900px){.mcp-split{grid-template-columns:1fr;gap:48px}}

/* Prevent section */
.prevent-section { padding:100px 0; background:var(--navy-2); position:relative; overflow:hidden; }
.prevent-section::before { content:''; position:absolute; bottom:-100px; left:-200px; width:700px; height:700px; border-radius:50%; background:radial-gradient(circle,rgba(90,171,138,.05) 0%,transparent 65%); pointer-events:none; }
.prevent-split { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:start; }
.prevent-loop { background:var(--navy-3); border:1px solid var(--rule-bright); border-radius:8px; overflow:hidden; }
.pl-head { padding:18px 24px; background:rgba(255,255,255,.03); border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; }
.pl-title { font-family:var(--H); font-size:.75rem; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.pl-status { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--prevent); display:flex; align-items:center; gap:6px; }
.pl-status::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--prevent); animation:pulse 2s ease infinite; }
.pl-body { padding:8px 0; }
.pl-step { display:flex; align-items:stretch; border-bottom:1px solid var(--rule); }
.pl-step:last-child { border-bottom:none; }
.pl-num { min-width:52px; display:flex; align-items:center; justify-content:center; font-family:var(--H); font-size:1.2rem; font-weight:700; color:var(--dim); border-right:1px solid var(--rule); flex-shrink:0; transition:color var(--t); }
.pl-step:hover .pl-num { color:var(--prevent); }
.pl-content { padding:20px 22px; flex:1; }
.pl-content h4 { font-family:var(--H); font-size:.82rem; text-transform:uppercase; letter-spacing:.5px; color:var(--off-white); margin-bottom:6px; }
.pl-content p { font-size:12.5px; color:var(--muted); line-height:1.55; }
.pl-tags { display:flex; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.ptag { font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 8px; border-radius:2px; }
.ptag-ai{background:rgba(242,110,24,.15);color:var(--orange)} .ptag-human{background:var(--prevent-dim);color:var(--prevent)} .ptag-client{background:rgba(255,255,255,.08);color:var(--off-white)}
.prevent-text .lp-kicker { color:var(--prevent); }
.prevent-text .lp-section-title { color:var(--white); margin-bottom:24px; }
.prevent-features { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:36px; }
.pf { padding:20px 18px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:6px; transition:all var(--t) var(--ease); }
.pf:hover { border-color:var(--prevent-rule); background:var(--card-hover); }
.pf-label { font-family:var(--H); font-size:.78rem; text-transform:uppercase; letter-spacing:.5px; color:var(--prevent); margin-bottom:6px; }
.pf p { font-size:12px; color:var(--muted); line-height:1.55; }
@media(max-width:900px){.prevent-split{grid-template-columns:1fr;gap:48px}.prevent-features{grid-template-columns:1fr}}

/* Proof section */
.proof-section { padding:100px 0; background:var(--navy); position:relative; overflow:hidden; }
.proof-strip { padding:40px 48px; background:rgba(255,255,255,.03); border:1px solid var(--rule-bright); border-radius:8px; display:grid; grid-template-columns:repeat(4,1fr); position:relative; z-index:1; margin-bottom:40px; }
.proof-cell { padding:8px 32px; border-right:1px solid var(--rule); transition:background var(--t); }
.proof-cell:first-child{padding-left:0} .proof-cell:last-child{border-right:none}
.proof-cell:hover { background:var(--card-bg); }
.proof-cell-num { font-family:var(--H); font-size:2.6rem; font-weight:700; color:var(--orange); line-height:1; margin-bottom:6px; }
.proof-cell-lbl { font-weight:700; color:var(--muted); } /* was --dim: ~1.9:1 on --on2it-night, unreadable. Same fix as .card-time. */
.proof-cell-sub { font-size:14px; color:var(--muted); margin-top:4px; line-height:1.4; }
@media(max-width:768px){.proof-strip{grid-template-columns:1fr 1fr}.proof-cell{padding:24px 20px;border-right:none;border-bottom:1px solid var(--rule)}.proof-cell:nth-child(odd){border-right:1px solid var(--rule)}.proof-cell:nth-last-child(-n+2){border-bottom:none}}

/* Timeline */
.timeline-header { margin-bottom:56px; }
.timeline-header .display-sm { color:var(--white); margin-bottom:12px; }
.tl-items { display:grid; grid-template-columns:repeat(4,1fr); background:var(--navy); border:1px solid var(--rule); border-radius:8px; overflow:hidden; position:relative; }
.tl-items::before { content:''; position:absolute; top:47px; left:28px; right:28px; height:1px; background:linear-gradient(90deg,var(--orange) 0%,rgba(242,110,24,.15) 100%); pointer-events:none; }
.tl-item { background:var(--navy); padding:36px 28px; position:relative; overflow:hidden; transition:background var(--t); border-right:1px solid var(--rule); }
.tl-item:last-child { border-right:none; }
.tl-item:hover { background:var(--card-bg); }
.tl-year { font-family:var(--H); font-size:2rem; font-weight:700; color:rgba(242,110,24,.18); position:absolute; bottom:12px; right:16px; transition:color var(--t); }
.tl-item:hover .tl-year { color:rgba(242,110,24,.3); }
.tl-dot { width:10px; height:10px; border:2px solid var(--orange); background:var(--navy); box-shadow:0 0 8px rgba(242,110,24,.5); border-radius:50%; position:relative; z-index:1; margin-bottom:20px; }
.tl-event { font-family:var(--H); font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; color:var(--off-white); margin-bottom:8px; }
.tl-desc { font-size:12.5px; color:var(--muted); line-height:1.6; position:relative; z-index:1; }
@media(max-width:768px){.tl-items{grid-template-columns:1fr 1fr}}

/* Parallax break */
.parallax-break { position:relative; height:450px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.parallax-bg { position:absolute; inset:0; background-size:cover; background-position:center; background-attachment:fixed; }
.parallax-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(11,20,32,.78) 0%,rgba(11,20,32,.40) 28%,rgba(11,20,32,.40) 72%,rgba(11,20,32,.82) 100%),linear-gradient(135deg,rgba(242,110,24,.40) 0%,rgba(242,110,24,.60) 45%,transparent 80%); }
.parallax-content { position:relative; z-index:2; text-align:center; padding:0 48px; }
.parallax-pre { font-size:14px; letter-spacing:3.5px; color:var(--orange); text-transform:uppercase; margin-bottom:20px; font-family:var(--H); }
.parallax-q { font-family:var(--H); font-size:clamp(22px,3vw,38px); font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#fff; line-height:1.05; }
.parallax-q .accent{color:var(--orange)} .parallax-q .dim{color:rgba(255,255,255,.65)}
@media(max-width:600px){.parallax-content{padding:0 24px}}

/* Quality signals */
.quality-section { background:var(--navy-2); border-top:1px solid var(--rule); }
.quality-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); max-width:1800px; margin:0 auto; }
.q-card { background:var(--navy-3); padding:52px; position:relative; overflow:hidden; }
.q-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.q-card.tt::before{background:var(--orange)} .q-card.he::before{background:#8b7fd4}
.q-ey { margin-bottom:16px; }
.q-card.tt .q-ey{color:var(--orange)} .q-card.he .q-ey{color:#8b7fd4}
.q-h { font-family:var(--H); font-size:clamp(1.3rem,2vw,1.8rem); font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--white); line-height:1.05; margin-bottom:16px; }
.q-h .oa{color:var(--orange)} .q-h .pur{color:#8b7fd4}
.q-body { font-size:13.5px; line-height:1.8; color:var(--muted); margin-bottom:24px; max-width:480px; }
.q-body strong { color:var(--off-white); }
.q-link { font-family:var(--H); font-size:14px; letter-spacing:2px; text-transform:uppercase; border:1px solid; padding:10px 20px; border-radius:2px; display:inline-block; transition:background .15s,color .15s; }
.q-link.or-l{color:var(--orange);border-color:rgba(242,110,24,.35)} .q-link.or-l:hover{background:var(--orange);color:var(--on2it-night,#192842)}
.q-link.pur-l{color:#8b7fd4;border-color:rgba(139,127,212,.35)} .q-link.pur-l:hover{background:#8b7fd4;color:#fff}
.q-items { list-style:none; border-top:1px solid var(--rule); padding-top:20px; margin-top:24px; }
.q-item { padding:13px 0; border-bottom:1px solid var(--rule); font-size:12px; color:var(--muted); display:flex; align-items:flex-start; gap:8px; line-height:1.5; }
.q-item:last-child { border-bottom:none; }
.q-item::before { content:'→'; font-size:10px; flex-shrink:0; margin-top:1px; }
.q-card.tt .q-item::before{color:var(--orange)} .q-card.he .q-item::before{color:#8b7fd4}
.q-stats { display:flex; gap:28px; margin-top:24px; flex-wrap:wrap; }
.qst-n { font-family:var(--H); font-size:2rem; font-weight:700; color:#8b7fd4; line-height:1; margin-bottom:2px; }
.qst-l { font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); }
.q-vis { height:72px; margin:-52px -52px 36px; display:flex; align-items:center; padding:0 52px; gap:12px; position:relative; overflow:hidden; }
.q-card.tt .q-vis{background:linear-gradient(135deg,rgba(21,34,54,1) 0%,rgba(242,110,24,.18) 100%)}
.q-card.he .q-vis{background:linear-gradient(135deg,rgba(21,34,54,1) 0%,rgba(139,127,212,.18) 100%)}
.q-vis-tag { font-weight:700; padding:4px 10px; border-radius:2px; }
.q-card.tt .q-vis-tag{color:var(--orange);border:1px solid rgba(242,110,24,.35)} .q-card.he .q-vis-tag{color:#8b7fd4;border:1px solid rgba(139,127,212,.35)}
.q-vis-icon { font-size:1.4rem; opacity:.35; }
@media(max-width:768px){.quality-grid{grid-template-columns:1fr}.q-card{padding:36px 24px}.q-vis{margin:-36px -24px 28px;padding:0 24px}}

/* Integrations */
.int-section { padding:100px 0; background:var(--navy); }
.int-grid { display:flex; flex-direction:column; border:1px solid var(--rule); border-radius:8px; overflow:hidden; margin-top:56px; }
.int-row { display:flex; align-items:flex-start; border-bottom:1px solid var(--rule); transition:background var(--t); }
.int-row:last-child{border-bottom:none} .int-row:hover{background:rgba(255,255,255,.015)}
.int-cat-label { min-width:160px; padding:22px 24px; font-weight:700; color:var(--dim); border-right:1px solid var(--rule); flex-shrink:0; }
.int-pills { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px; padding:18px 24px; flex:1; }
.int-pill { display:flex; align-items:center; padding:10px 14px; border-radius:2px; background:var(--card-bg); border:1px solid var(--card-border); font-size:11.5px; font-weight:600; color:var(--off-white); transition:all var(--t) var(--ease); position:relative; overflow:hidden; cursor:default; line-height:1.4; }
.int-pill::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--row-color,var(--orange)); opacity:.75; }
.int-pill:hover { border-color:var(--row-color,var(--orange)); background:var(--card-hover); }
@media(max-width:900px){.int-pills{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}
@media(max-width:600px){.int-row{flex-direction:column;align-items:flex-start}.int-cat-label{border-right:none;border-bottom:1px solid var(--rule);width:100%}.int-pills{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));width:100%}}

/* Final CTA section */
.cta-section { padding:120px 0; position:relative; overflow:hidden; background:radial-gradient(ellipse 60% 60% at 80% 50%,rgba(242,110,24,.08) 0%,transparent 60%),var(--navy); }
.cta-split { display:grid; grid-template-columns:1.1fr .9fr; gap:96px; align-items:center; }
.cta-text .display-lg{color:var(--white);margin-bottom:24px} .cta-text .body-lead{margin-bottom:8px}
.cta-text .note { font-size:13px; color:var(--muted); font-style:italic; margin-bottom:40px; }
.cta-actions { display:flex; gap:14px; flex-wrap:wrap; }
.cta-points { display:flex; flex-direction:column; gap:24px; }
.ctp { display:flex; align-items:flex-start; gap:20px; }
.ctp-icon { width:48px; height:48px; min-width:48px; border-radius:2px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(242,110,24,.1); border:1px solid rgba(242,110,24,.2); color:var(--orange); }
.ctp-icon svg { width:22px; height:22px; fill:var(--orange); }
.ctp h4 { font-family:var(--H); font-size:.85rem; text-transform:uppercase; letter-spacing:.5px; color:var(--off-white); margin-bottom:4px; }
.ctp p { font-size:13px; color:var(--muted); line-height:1.55; }
@media(max-width:900px){.cta-split{grid-template-columns:1fr;gap:56px}}

/* ZT knowledge */
.zt-top-bar { background:var(--orange); padding:0; position:relative; overflow:hidden; }
.zt-top-bar::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent,transparent 71px,rgba(0,0,0,.07) 71px,rgba(0,0,0,.07) 72px); }
.zt-top-bar-inner { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:48px; flex-wrap:wrap; padding:40px 48px; max-width:1200px; margin:0 auto; }
.zt-top-bar-text h2 { font-family:var(--H); font-weight:700; font-size:clamp(1.6rem,3vw,2.4rem); text-transform:uppercase; letter-spacing:.5px; color:#fff; line-height:1.1; margin-bottom:6px; }
.zt-top-bar-text p { font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.6; max-width:680px; }
.zt-top-bar-meta { display:flex; gap:32px; flex-shrink:0; flex-wrap:wrap; }
.zt-meta-item { display:flex; flex-direction:column; gap:3px; text-align:center; }
.zt-meta-num { font-family:var(--H); font-size:2rem; font-weight:700; color:#fff; line-height:1; }
.zt-meta-lbl { font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.6); font-family:var(--B); }
.zt-library { padding:0 0 88px; background:var(--navy); border-bottom:1px solid var(--rule); }
.zt-tier-block { border-bottom:1px solid var(--rule); }
.zt-tier-block:last-child { border-bottom:none; }
.zt-tier-head { padding:40px 48px 24px; max-width:1200px; margin:0 auto; display:flex; align-items:baseline; gap:24px; }
.zt-tier-label { font-family:var(--H); font-size:.75rem; letter-spacing:3px; text-transform:uppercase; flex-shrink:0; }
.zt-tier-block.s-tier .zt-tier-label{color:#8b7fd4} .zt-tier-block.m-tier .zt-tier-label{color:var(--prevent)} .zt-tier-block.o-tier .zt-tier-label{color:#378ADD}
.zt-tier-audience { color:var(--muted); }
.zt-tier-desc { padding:0 48px 48px; max-width:1200px; margin:0 auto; }
.zt-tier-desc p { font-size:13px; color:var(--muted); line-height:1.7; max-width:760px; }
.zt-papers { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; background:transparent; max-width:1200px; margin:0 auto; }
.zt-paper { background:var(--card-bg); padding:28px 28px 24px; border:1px solid var(--card-border); border-radius:8px; position:relative; overflow:hidden; transition:border-color var(--t); cursor:default; display:flex; flex-direction:column; }
.zt-paper::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; }
.s-tier .zt-paper::before{background:#8b7fd4} .m-tier .zt-paper::before{background:var(--prevent)} .o-tier .zt-paper::before{background:#378ADD}
.zt-paper-type { margin-bottom:12px; display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; }
.s-tier .zt-paper-type{color:#8b7fd4} .m-tier .zt-paper-type{color:var(--prevent)} .o-tier .zt-paper-type{color:#378ADD}
.zt-paper-type::before { content:''; width:10px; height:1px; flex-shrink:0; }
.s-tier .zt-paper-type::before{background:#8b7fd4} .m-tier .zt-paper-type::before{background:var(--prevent)} .o-tier .zt-paper-type::before{background:#378ADD}
.zt-paper-title { font-family:var(--H); font-size:clamp(.95rem,1.4vw,1.15rem); font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--white); line-height:1.2; margin-bottom:10px; flex:1; }
.zt-paper-desc { font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.zt-paper-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--rule); padding-top:12px; margin-top:auto; }
.zt-paper-source { font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-family:var(--B); }
.zt-actualities { max-width:1200px; margin:40px auto 0; padding:0 48px; }
.zt-actualities-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:12px; }
.zt-actualities-head h3 { font-family:var(--H); font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:var(--off-white); }
.zt-actualities-link { font-family:var(--H); font-size:14px; letter-spacing:2px; text-transform:uppercase; color:var(--orange); border:1px solid rgba(242,110,24,.3); padding:8px 18px; border-radius:2px; transition:background .15s,color .15s; }
.zt-actualities-link:hover { background:var(--orange); color:#fff; }
.zt-act-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); border-radius:8px; overflow:hidden; }
.zt-act-item { background:var(--navy-2); padding:20px 20px 18px; transition:background var(--t); cursor:pointer; position:relative; display:block; text-decoration:none; color:inherit; }
.zt-act-item:hover { background:var(--card-bg); }
.zt-act-item::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--orange); }
.zt-act-tag { font-size:8.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); font-family:var(--B); margin-bottom:8px; display:flex; align-items:center; gap:5px; }
.zt-act-tag::before { content:'▶'; font-size:7px; }
.zt-act-title { font-family:var(--H); font-size:.88rem; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--off-white); line-height:1.25; margin-bottom:8px; }
.zt-act-desc { font-size:11.5px; color:var(--muted); line-height:1.55; }
.zt-act-source { font-size:9px; color:var(--dim); margin-top:10px; letter-spacing:.5px; font-family:var(--B); border-top:1px solid var(--rule); padding-top:8px; }
.zt-act-visual { height:68px; margin:-20px -20px 14px; background:linear-gradient(135deg,rgba(21,34,54,1) 0%,rgba(242,110,24,.14) 100%); border-bottom:1px solid var(--rule); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.zt-act-visual::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent,transparent 35px,rgba(255,255,255,.02) 35px,rgba(255,255,255,.02) 36px); }
.zt-act-play { position:relative; z-index:1; width:34px; height:34px; border-radius:50%; background:rgba(242,110,24,.12); border:1px solid rgba(242,110,24,.3); display:flex; align-items:center; justify-content:center; transition:all var(--t) var(--ease); }
.zt-act-play svg { width:12px; height:12px; fill:var(--orange); margin-left:2px; }
.zt-act-item:hover .zt-act-play { background:rgba(242,110,24,.22); border-color:rgba(242,110,24,.55); transform:scale(1.1); }
@media(max-width:900px){.zt-papers{grid-template-columns:1fr 1fr}.zt-act-grid{grid-template-columns:1fr 1fr}.zt-top-bar-inner,.zt-tier-head,.zt-tier-desc,.zt-actualities{padding-left:24px;padding-right:24px}}
@media(max-width:600px){.zt-papers{grid-template-columns:1fr}.zt-act-grid{grid-template-columns:1fr}.zt-top-bar-meta{gap:20px}}

/* Homepage responsive fixes */
@media(max-width:768px){
  .work-section,.auxo-section,.services-section,.mcp-section,.prevent-section,.proof-section{padding:60px 0}
  .cta-section{padding:96px 0}
  .int-section{padding:64px 0}
  .zt-library{padding:0 0 56px}
  .owns-band,.swarm-band{padding:64px 0}
  .services-header{margin-bottom:40px}
  .proof-strip{padding:24px 16px;margin-bottom:48px}
}

/* ─── 13 · BLOG ─── */
.post-header { background: linear-gradient(135deg,var(--on2it-darker-blue),var(--on2it-dark-blue)); color: #fff; padding: var(--s-10) 0 var(--s-9); position: relative; overflow: hidden; }
.post-header::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(to right,rgba(255,255,255,0.05) 0 1px,transparent 1px 60px), repeating-linear-gradient(to bottom,rgba(255,255,255,0.05) 0 1px,transparent 1px 60px); pointer-events: none; }
.post-header > * { position: relative; }
.post-header h1 { color: #fff; max-width: 50rem; margin-bottom: var(--s-5); }
.post-header__meta { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--on2it-orange-text); margin-bottom: var(--s-5); }
.post-header__byline { font-size: 1rem; color: rgba(255,255,255,0.88); }
.post-body { padding: var(--s-9) 0; }
.post-body__inner { max-width: 44rem; margin: 0 auto; padding: 0 var(--s-6); font-size: 1.075rem; }
.post-body h2 { margin-top: var(--s-8); }
.post-body h3 { margin-top: var(--s-7); }
.post-body blockquote { border-left: 4px solid var(--on2it-orange-web); padding: var(--s-2) 0 var(--s-2) var(--s-5); margin: var(--s-6) 0; font-style: italic; color: var(--on2it-blue); }
.post-body hr { border: none; border-top: 1px solid var(--on2it-border); margin: var(--s-7) 0; }
.tag-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag-list li { background: var(--on2it-light-grey); color: var(--on2it-blue); font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; padding: 0.45rem 0.85rem; }
.post-list { list-style: none; padding: 0; margin: 0; }
.post-list li { padding: var(--s-7) 0; border-bottom: 1px solid var(--on2it-border); }
.post-list li:last-child { border-bottom: 0; }
.post-list h2 { margin-bottom: 0.75rem; font-size: 2rem; }
.post-list h2 a { text-decoration: none; color: var(--on2it-blue); transition: color var(--transition); }
.post-list h2 a:hover { color: var(--on2it-orange-text-hover); }
.post-list__meta { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; color: var(--on2it-orange-text); margin-bottom: 0.5rem; }
.post-list--grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
.post-list--grid li { padding: var(--s-6); border: 1px solid var(--on2it-border); border-radius: 6px; transition: box-shadow var(--transition),border-color var(--transition); }
.post-list--grid li:last-child { border-bottom: 1px solid var(--on2it-border); }
.post-list--grid li:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.07); border-color: var(--on2it-orange-web); }
.post-list--grid h2 { font-size: 1.4rem; }
@media (min-width: 700px) { .post-list--grid { grid-template-columns: repeat(2,1fr); } }
.post-author { display: flex; align-items: center; gap: var(--s-5); padding: var(--s-6) 0; border-top: 1px solid var(--on2it-border); margin-top: var(--s-8); }
.post-author__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.post-author__name { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.08em; color: var(--on2it-blue); font-size: 1rem; margin: 0 0 var(--s-1); }
.post-author__role { font-size: 0.875rem; color: var(--on2it-grey); }
.related-posts { padding: var(--s-9) 0; background: var(--on2it-light-grey); }
.related-posts h2 { font-size: 1.5rem; margin-bottom: var(--s-7); }

/* ─── 14 · PILLAR PAGES ─── */
.toc { background: var(--on2it-light-grey); border-left: 4px solid var(--on2it-orange-web); padding: var(--s-6); margin-bottom: var(--s-8); position: sticky; top: calc(72px + var(--s-5)); }
.toc__title { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--on2it-orange-text); margin-bottom: var(--s-4); }
.toc__list { list-style: none; padding: 0; margin: 0; }
.toc__list li { margin-bottom: var(--s-2); }
.toc__list a { font-size: 0.9rem; color: var(--on2it-blue); text-decoration: none; transition: color var(--transition); }
.toc__list a:hover { color: var(--on2it-orange-text); }
.pillar-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--s-9); align-items: start; }
@media (max-width: 900px) { .pillar-layout { grid-template-columns: 1fr; } .toc { position: static; } }
.pillar-body h2 { margin-top: var(--s-9); }
.pillar-body h3 { margin-top: var(--s-7); }
.pillar-body img { border-radius: 4px; box-shadow: var(--shadow-md); margin: var(--s-7) 0; }
.pillar-related { background: var(--on2it-light-grey); border-top: 3px solid var(--on2it-orange-web); padding: var(--s-7); margin-top: var(--s-9); }
.pillar-related__title { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; color: var(--on2it-orange-text); font-size: 0.8rem; margin-bottom: var(--s-5); }

/* ─── 15 · TRAINING COURSES ─── */
.course-meta { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); padding: var(--s-5) 0; border-bottom: 1px solid var(--on2it-border); margin-bottom: var(--s-7); }
.course-meta__item { display: flex; align-items: center; gap: var(--s-2); font-size: 0.875rem; color: var(--on2it-blue); }
.course-meta__label { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--on2it-orange-text); }
.course-modules { counter-reset: module; list-style: none; padding: 0; }
.course-modules li { counter-increment: module; padding: var(--s-5) 0; border-bottom: 1px solid var(--on2it-border); display: flex; gap: var(--s-5); align-items: baseline; }
.course-modules li::before { content: counter(module,decimal-leading-zero); font-family: var(--font-heading); font-size: 1.5rem; color: var(--on2it-orange-text); flex-shrink: 0; min-width: 2.5rem; }

/* ─── 16 · LANDING PAGES (lp-*) ─── */

/* Scoped reset */
.lp-hero,.lp-section,.lp-section-light,.lp-form-section { box-sizing: border-box; }
.lp-hero *,.lp-section *,.lp-section-light *,.lp-form-section * { box-sizing: border-box; }

/* Layout */
.lp-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
@media (max-width: 768px) { .lp-container { padding: 0 20px; } }
.lp-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.lp-grid-2-asym { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 1024px) { .lp-grid-2,.lp-grid-2-asym { grid-template-columns: 1fr; gap: 40px; } }
.lp-grid-3 { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 24px; margin-top: 48px; }
.lp-img-placeholder { background: rgba(31,67,95,0.3); border: 2px dashed var(--lp-border-orange); border-radius: 8px; padding: 32px; text-align: center; font-family: var(--lp-font-display); font-size: 14px; color: var(--lp-orange); letter-spacing: 0.1em; text-transform: uppercase; }

/* Typography */
.lp-kicker { font-family: var(--lp-font-display); font-size: 14px; letter-spacing: 0.22em; color: var(--lp-orange); text-transform: uppercase; margin-bottom: 16px; display: block; }
.lp-lead { font-family: var(--lp-font-body); font-size: 1.1rem; line-height: 1.6; font-weight: 300; color: var(--lp-light); opacity: 0.75; margin-bottom: 28px; max-width: 640px; }
.lp-lead strong { opacity: 1; color: var(--lp-light); }
.lp-lead-light { font-family: var(--lp-font-body); font-size: 1.05rem; line-height: 1.65; font-weight: 300; color: var(--lp-navy); margin-bottom: 24px; }

/* Hero */
.lp-hero { padding: 60px 0 80px; background: var(--lp-night); color: var(--lp-light); font-family: var(--lp-font-body); position: relative; overflow: hidden; }
.lp-hero-meta-strip { position: absolute; top: 20px; left: 0; right: 0; text-align: center; color: var(--lp-mid-grey); padding: 0 32px; z-index: 5; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; }
.lp-hero-meta-strip .meta-sep { color: rgba(245,242,245,0.2); }
.lp-hero-meta-strip .meta-prime { color: var(--lp-orange); }
.lp-hero-eyebrow { font-family: var(--lp-font-display); font-size: 15px; font-weight: 500; letter-spacing: 0.22em; color: var(--lp-orange); margin-bottom: 28px; text-transform: uppercase; display: block; }
h1.lp-hero-title { font-family: var(--lp-font-display); font-weight: 700; font-size: clamp(2rem,4vw,3.5rem); line-height: 1.0; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 28px; color: var(--lp-light); }
h1.lp-hero-title em { font-style: normal; color: var(--lp-orange); position: relative; display: inline-block; }
.lp-hero-subhead { font-size: clamp(1rem,1.5vw,1.2rem); line-height: 1.6; color: var(--lp-light); opacity: 0.85; max-width: 560px; margin-bottom: 24px; font-weight: 300; font-family: var(--lp-font-body); }
.lp-stat-trio { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(31,67,95,0.5); border: 1px solid rgba(31,67,95,0.5); border-radius: 8px; overflow: hidden; margin-top: 36px; max-width: 580px; }
.lp-stat { background: rgba(14,27,44,0.6); padding: 18px 20px; }
.lp-stat-label { font-family: var(--lp-font-display); font-size: 14px; letter-spacing: 0.15em; color: var(--lp-orange); text-transform: uppercase; margin-bottom: 6px; }
.lp-stat-val { font-family: var(--lp-font-display); font-size: 1rem; color: var(--lp-light); line-height: 1.2; }
@media (max-width: 560px) { .lp-stat-trio { grid-template-columns: 1fr; } }
.lp-form-col { position: relative; z-index: 3; }
@media (max-width: 1024px) { .lp-form-col { max-width: 560px; margin: 0 auto; width: 100%; } }

/* Form panel */
.lp-form-wrap { background: rgba(14,27,44,0.85); border: 1px solid var(--lp-border-orange); border-radius: 10px; padding: 28px; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6), 0 0 80px -30px rgba(242,110,24,0.3); }
.lp-form-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(242,110,24,0.2); }
.lp-form-tag { color: var(--lp-orange); margin-bottom: 8px; }
.lp-form-title { font-family: var(--lp-font-display); font-size: 1.5rem; color: var(--lp-light); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 4px; }
.lp-form-sub { color: var(--lp-orange); }
.lp-form-wrap .gform_title { display: none !important; }
.lp-form-wrap .gfield_label,.lp-form-wrap .gform-field-label,.lp-form-wrap .gfield_label_before_complex,.lp-form-wrap [class*="gfield_label"],.lp-form-wrap [class*="gform-field-label"] { font-family: var(--lp-font-display) !important; font-size: 14px !important; letter-spacing: 0.04em !important; color: var(--lp-orange) !important; font-weight: 400 !important; margin-bottom: 6px !important; }
.lp-form-wrap input[type="text"],.lp-form-wrap input[type="email"],.lp-form-wrap input[type="tel"],.lp-form-wrap select,.lp-form-wrap textarea { background: rgba(6,12,24,0.6) !important; border: 1px solid rgba(31,67,95,0.6) !important; color: var(--lp-light) !important; font-family: var(--lp-font-body) !important; font-size: 16px !important; padding: 12px 14px !important; border-radius: 4px !important; width: 100% !important; }
.lp-form-wrap input:focus,.lp-form-wrap select:focus,.lp-form-wrap textarea:focus { border-color: var(--lp-orange) !important; background: rgba(6,12,24,0.85) !important; outline: none !important; }
.lp-form-wrap .gform_button,.lp-form-wrap input[type="submit"] { background: var(--lp-orange) !important; color: var(--lp-night) !important; font-family: var(--lp-font-display) !important; font-size: 15px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; padding: 16px 24px !important; border: none !important; border-radius: 4px !important; width: 100% !important; cursor: pointer !important; transition: background 0.2s,transform 0.2s !important; }
.lp-form-wrap .gform_button:hover,.lp-form-wrap input[type="submit"]:hover { background: var(--lp-orange-glow) !important; transform: translateY(-2px) !important; }
.lp-form-wrap .gfield_consent_label,.lp-form-wrap .gfield_description { font-size: 12px !important; color: var(--lp-grey) !important; font-family: var(--lp-font-body) !important; }

/* Contact hero: intro text left, form right (was a centered stack). */
.contact-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 560px); gap: 64px; align-items: stretch; }
.contact-hero-intro { display: flex; flex-direction: column; justify-content: flex-start; }
.contact-hero-intro .lp-hero-subhead { max-width: 480px; }
@media (max-width: 860px) { .contact-hero-grid { grid-template-columns: 1fr; gap: 40px; } .contact-hero-intro { display: block; } }

/* Contact hero: incident callout, moved from a full-width top banner into the
   left column. Bottom-aligned with the form (margin-top: auto inside the
   flex column) and styled as an orange card with two corner accents, always
   visible rather than hover-only like the standard .card component -- this
   is a persistent alert/CTA, not a passive feature card. */
.contact-soc-callout {
  position: relative;
  display: block;
  margin-top: auto;
  padding: 28px 26px;
  background: rgba(242,110,24,0.12);
  border: 1px solid rgba(242,110,24,0.5);
  border-radius: 4px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.contact-soc-callout::before, .contact-soc-callout::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border-color: var(--lp-orange); border-style: solid;
  transition: width 0.2s ease, height 0.2s ease;
}
.contact-soc-callout::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.contact-soc-callout::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.contact-soc-callout:hover { background: rgba(242,110,24,0.18); border-color: rgba(242,110,24,0.7); }
.contact-soc-callout:hover::before, .contact-soc-callout:hover::after { width: 26px; height: 26px; }
.contact-soc-callout a:hover { text-decoration: underline; }
/* Prominent single phone number for the intl-en (US/North America) contact
   page, replacing a two-line NA/EMEA list once EMEA was dropped there. A
   big tappable number reads as the primary action of the callout, not just
   another line of body text - font size and weight set it apart from
   .l-body without needing a second color. */
.contact-soc-phone {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--lp-font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--lp-orange);
  text-decoration: none;
}
.contact-soc-phone:hover { text-decoration: underline; }

/* Contact hero form: more breathing room than the shared .lp-form-wrap default. */
.contact-hero-grid .lp-form-wrap { padding: 40px 36px; border-radius: 4px; }
.contact-hero-grid .lp-form-wrap input[type="text"],
.contact-hero-grid .lp-form-wrap input[type="email"],
.contact-hero-grid .lp-form-wrap select,
.contact-hero-grid .lp-form-wrap textarea { padding: 14px 16px !important; }
.contact-hero-grid .lp-form-wrap .gform_button,
.contact-hero-grid .lp-form-wrap input[type="submit"] { margin-top: 10px; }
/* Custom orange chevron instead of the OS-default select arrow. */
.contact-hero-grid .lp-form-wrap select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: rgba(6,12,24,0.6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23F26E18' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center !important;
  padding-right: 40px !important;
}
@media (max-width: 480px) { .contact-hero-grid .lp-form-wrap { padding: 28px 24px; } }

/* Sections */
.lp-section { padding: 80px 0; background: var(--lp-night); color: var(--lp-light); font-family: var(--lp-font-body); position: relative; z-index: 2; }
.lp-section-light { padding: 80px 0; background: var(--lp-white); color: var(--lp-navy); font-family: var(--lp-font-body); }
.lp-section-navy { padding: 80px 0; background: var(--lp-navy); color: var(--lp-light); font-family: var(--lp-font-body); }
@media (max-width: 768px) { .lp-section,.lp-section-light,.lp-section-navy { padding: 48px 0; } }
h2.lp-section-title { font-family: var(--lp-font-display); font-weight: 700; font-size: clamp(1.8rem,3.5vw,2.8rem); line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; max-width: 900px; color: var(--lp-light); }
h2.lp-section-title em { font-style: normal; color: var(--lp-orange); }
h2.lp-section-title-dark { font-family: var(--lp-font-display); font-weight: 700; font-size: clamp(1.8rem,3.5vw,2.8rem); line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; color: var(--lp-navy); }
h2.lp-section-title-dark em { font-style: normal; color: var(--lp-orange); }

/* Cards */
.lp-card { background: linear-gradient(180deg,rgba(31,67,95,0.18) 0%,rgba(14,27,44,0.4) 100%); border: 1px solid var(--lp-border); border-radius: 8px; padding: 32px; position: relative; transition: all 0.3s; overflow: hidden; }
.lp-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--lp-orange); transform: scaleY(0); transform-origin: top; transition: transform 0.3s; }
.lp-card:hover { border-color: var(--lp-border-orange); transform: translateY(-4px); }
.lp-card:hover::before { transform: scaleY(1); }
.lp-card-num { font-family: var(--lp-font-display); font-size: 14px; letter-spacing: 0.15em; color: var(--lp-orange); margin-bottom: 18px; }
.lp-card-title { font-family: var(--lp-font-display); font-weight: 700; font-size: 1.3rem; line-height: 1.2; margin-bottom: 12px; color: var(--lp-light); text-transform: uppercase; letter-spacing: 0.03em; }
.lp-card-body { font-size: 0.95rem; line-height: 1.55; color: var(--lp-light); opacity: 0.82; font-weight: 300; }
.lp-card-light { background: var(--lp-white); border: 1px solid rgba(22,48,69,0.15); border-radius: 8px; padding: 32px; position: relative; transition: all 0.3s; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.lp-card-light::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--lp-orange); transform: scaleY(0); transform-origin: top; transition: transform 0.3s; }
.lp-card-light:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.lp-card-light:hover::before { transform: scaleY(1); }
.lp-card-light .lp-card-num { color: var(--lp-orange); }
.lp-card-light .lp-card-title { color: var(--lp-navy); }
.lp-card-light .lp-card-body { color: var(--lp-navy); opacity: 0.85; }
/* Borderless variant of .lp-card-light: plain text sitting on the section
   background instead of a boxed card, with a subtle hover highlight rather
   than the lifted-card treatment. Used on the "How the top 10% operates"
   section on we-are-on-to-it -- text-only feature list, not a card grid. */
.lp-card-light.lp-card-plain { background: transparent; border: none; border-radius: 8px; padding: 24px; box-shadow: none; }
.lp-card-light.lp-card-plain::before { display: none; }
.lp-card-light.lp-card-plain:hover { transform: none; box-shadow: none; background: rgba(22,48,69,0.045); }
.lp-card-light.lp-card-plain .lp-card-num { text-transform: uppercase; }

/* Checklist */
.lp-checklist { margin-top: 32px; }
.lp-check-item { display: flex; align-items: flex-start; gap: 16px; padding: 16px; border-radius: 8px; font-size: 1rem; line-height: 1.5; color: var(--lp-light); font-family: var(--lp-font-body); transition: background 0.25s ease; }
.lp-check-item:hover { background: rgba(255,255,255,0.05); }
.lp-check-mark { color: var(--lp-orange); font-weight: 700; font-family: var(--lp-font-display); font-size: 1.1rem; flex-shrink: 0; margin-top: 2px; }
.lp-check-mark svg { width: 20px; height: 20px; display: block; }
.lp-check-item strong { color: var(--lp-orange); }
/* Two-line check item: bold title above, plain-language description below, instead of one run-on sentence */
.lp-check-item-title { display: block; font-family: var(--lp-font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 6px; color: var(--lp-orange); }
.lp-check-item-desc { margin: 0; font-size: 0.92rem; line-height: 1.55; opacity: 0.85; }
/* On light sections, orange-on-near-white is low contrast; keep the title bold and navy instead (matches this page's kicker convention) */
.lp-section-light .lp-check-item-title { color: var(--lp-navy); }

/* Checklist as a 3-col block grid (alternative to the bordered-list .lp-checklist) */
.lp-check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .lp-check-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .lp-check-grid { grid-template-columns: 1fr; } }
.lp-check-block { padding: 24px; color: var(--lp-navy); border-radius: 8px; transition: background 0.25s ease; }
.lp-check-block:hover { background: rgba(31,67,95,0.05); }
.lp-check-block .lp-check-mark { display: block; margin-bottom: 14px; }
.lp-dont-box { margin-top: 32px; padding-top: 32px; border-top: 1px dashed rgba(31,67,95,0.5); font-size: 0.95rem; line-height: 1.55; color: var(--lp-light); opacity: 0.75; }
.lp-dont-box strong { display: block; font-family: var(--lp-font-display); font-size: 15px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--lp-orange); margin-bottom: 12px; opacity: 1; }

/* Cert pills: one consistent color, semi-transparent fill, square-ish corners */
.lp-cert-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--lp-font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; border-radius: 6px; padding: 8px 14px; background: rgba(31,67,95,0.1); color: var(--lp-navy); }
.lp-cert-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lp-orange); flex-shrink: 0; }

/* Timeline */
.lp-path-list { list-style: none; padding: 0; margin: 48px 0 0 0; display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--lp-border); border: 1px solid var(--lp-border); border-radius: 8px; overflow: hidden; }
.lp-path-step { display: flex; flex-direction: column; padding: 32px 28px; background: var(--lp-night); transition: background 0.25s; }
.lp-path-step:hover { background: rgba(31,67,95,0.2); }
.lp-path-step:hover .lp-path-title { color: var(--lp-orange); }
.lp-path-num { font-family: var(--lp-font-display); font-size: 3rem; line-height: 1; color: var(--lp-orange); opacity: 0.85; margin-bottom: 20px; }
.lp-path-when { color: var(--lp-mid-grey); margin-bottom: 10px; }
.lp-path-title { font-family: var(--lp-font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.2; color: var(--lp-light); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.03em; transition: color 0.25s; }
.lp-path-body { font-size: 0.95rem; line-height: 1.55; color: var(--lp-light); opacity: 0.82; font-weight: 300; }

/* Milestones interactive timeline (about.html "A strategy we've stayed with").
   On-brand redesign of a beige/photo timeline reference: giant background year
   numeral, horizontal line with clickable year dots, one milestone shown at a
   time, circular founders photo only on the 2005 entry (no photo asset exists
   for the other years). Light-section component, ON2IT Blue/Orange/Light Grey
   palette only, no new brand colors introduced.
   CSS-only "radio hack": no JavaScript. Hidden radio inputs + <label for="">
   dots drive all state via :checked and general sibling selectors. Native
   radio-group keyboard support (arrow keys) comes for free. */
.ms-timeline { position: relative; margin-top: 56px; padding: 64px 56px 24px; overflow: hidden; }
.ms-radio-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ms-bg-number { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; }
.ms-bg-item {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-54%);
  font-family: var(--lp-font-display); font-weight: 700;
  font-size: clamp(7rem, 20vw, 18rem); line-height: 1;
  color: rgba(31,67,95,0.07); white-space: nowrap; opacity: 0;
  transition: opacity 0.2s ease;
}
.ms-nav {
  display: none; position: absolute; top: 96px; z-index: 3;
  background: none; border: none; padding: 8px; cursor: pointer;
  font-family: var(--lp-font-display); font-size: 30px; line-height: 1;
  color: var(--lp-orange); transition: transform 0.2s ease, opacity 0.2s ease;
}
.ms-nav:hover { transform: scale(1.15); }
.ms-nav--prev { left: 0; }
.ms-nav--next { right: 0; }
.ms-track {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: space-between;
  height: 192px; max-width: 880px; margin: 0 auto;
}
.ms-line { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(31,67,95,0.3); z-index: 0; }
.ms-dot {
  position: relative; z-index: 2; flex-shrink: 0; display: block;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--lp-white); border: 1px solid rgba(31,67,95,0.4);
  padding: 0; cursor: pointer;
  transition: all 0.25s ease;
}
.ms-dot:hover { border-color: var(--lp-navy); }
.ms-photo {
  display: none; position: absolute; left: 0; top: 50%; transform: translate(-6%,-50%);
  z-index: 3; width: 176px; height: 176px; border-radius: 50%; overflow: hidden;
  border: 4px solid var(--lp-white); box-shadow: 0 16px 32px -10px rgba(31,67,95,0.35);
}
.ms-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-content { position: relative; z-index: 1; margin-top: 8px; max-width: 480px; min-height: 132px; }
.ms-panel { display: none; }
.ms-badge {
  display: inline-block; color: var(--lp-white);
  background: var(--lp-navy); padding: 6px 16px; border-radius: 100px; margin-bottom: 16px;
}
h3.ms-title {
  font-family: var(--lp-font-display); font-weight: 700; font-size: 1.4rem;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--lp-navy); margin-bottom: 10px;
}
.ms-body { font-family: var(--lp-font-body); font-size: 0.98rem; line-height: 1.6; color: var(--lp-navy); opacity: 0.82; font-weight: 300; }

/* Per-slide state, driven purely by which radio is :checked */
#ms-0:checked ~ .ms-bg-number .ms-bg-item[data-slide="0"] { opacity: 1; }
#ms-0:checked ~ .ms-content .ms-panel[data-slide="0"] { display: block; }
#ms-0:checked ~ .ms-track .ms-photo[data-slide="0"] { display: block; }
#ms-0:checked ~ .ms-track label.ms-dot[for="ms-0"] { width: 18px; height: 18px; background: var(--lp-navy); border-color: var(--lp-navy); box-shadow: 0 0 0 6px rgba(31,67,95,0.12); }
#ms-0:checked ~ .ms-nav--prev[data-slide="0"] { display: block; }
#ms-0:checked ~ .ms-nav--next[data-slide="0"] { display: block; }
#ms-0:focus-visible ~ .ms-track label.ms-dot[for="ms-0"] { outline: 2px solid var(--lp-orange); outline-offset: 3px; }
#ms-1:checked ~ .ms-bg-number .ms-bg-item[data-slide="1"] { opacity: 1; }
#ms-1:checked ~ .ms-content .ms-panel[data-slide="1"] { display: block; }
#ms-1:checked ~ .ms-track .ms-photo[data-slide="1"] { display: block; }
#ms-1:checked ~ .ms-track label.ms-dot[for="ms-1"] { width: 18px; height: 18px; background: var(--lp-navy); border-color: var(--lp-navy); box-shadow: 0 0 0 6px rgba(31,67,95,0.12); }
#ms-1:checked ~ .ms-nav--prev[data-slide="1"] { display: block; }
#ms-1:checked ~ .ms-nav--next[data-slide="1"] { display: block; }
#ms-1:focus-visible ~ .ms-track label.ms-dot[for="ms-1"] { outline: 2px solid var(--lp-orange); outline-offset: 3px; }
#ms-2:checked ~ .ms-bg-number .ms-bg-item[data-slide="2"] { opacity: 1; }
#ms-2:checked ~ .ms-content .ms-panel[data-slide="2"] { display: block; }
#ms-2:checked ~ .ms-track .ms-photo[data-slide="2"] { display: block; }
#ms-2:checked ~ .ms-track label.ms-dot[for="ms-2"] { width: 18px; height: 18px; background: var(--lp-navy); border-color: var(--lp-navy); box-shadow: 0 0 0 6px rgba(31,67,95,0.12); }
#ms-2:checked ~ .ms-nav--prev[data-slide="2"] { display: block; }
#ms-2:checked ~ .ms-nav--next[data-slide="2"] { display: block; }
#ms-2:focus-visible ~ .ms-track label.ms-dot[for="ms-2"] { outline: 2px solid var(--lp-orange); outline-offset: 3px; }
#ms-3:checked ~ .ms-bg-number .ms-bg-item[data-slide="3"] { opacity: 1; }
#ms-3:checked ~ .ms-content .ms-panel[data-slide="3"] { display: block; }
#ms-3:checked ~ .ms-track .ms-photo[data-slide="3"] { display: block; }
#ms-3:checked ~ .ms-track label.ms-dot[for="ms-3"] { width: 18px; height: 18px; background: var(--lp-navy); border-color: var(--lp-navy); box-shadow: 0 0 0 6px rgba(31,67,95,0.12); }
#ms-3:checked ~ .ms-nav--prev[data-slide="3"] { display: block; }
#ms-3:checked ~ .ms-nav--next[data-slide="3"] { display: block; }
#ms-3:focus-visible ~ .ms-track label.ms-dot[for="ms-3"] { outline: 2px solid var(--lp-orange); outline-offset: 3px; }
#ms-4:checked ~ .ms-bg-number .ms-bg-item[data-slide="4"] { opacity: 1; }
#ms-4:checked ~ .ms-content .ms-panel[data-slide="4"] { display: block; }
#ms-4:checked ~ .ms-track .ms-photo[data-slide="4"] { display: block; }
#ms-4:checked ~ .ms-track label.ms-dot[for="ms-4"] { width: 18px; height: 18px; background: var(--lp-navy); border-color: var(--lp-navy); box-shadow: 0 0 0 6px rgba(31,67,95,0.12); }
#ms-4:checked ~ .ms-nav--prev[data-slide="4"] { display: block; }
#ms-4:checked ~ .ms-nav--next[data-slide="4"] { display: block; }
#ms-4:focus-visible ~ .ms-track label.ms-dot[for="ms-4"] { outline: 2px solid var(--lp-orange); outline-offset: 3px; }
#ms-5:checked ~ .ms-bg-number .ms-bg-item[data-slide="5"] { opacity: 1; }
#ms-5:checked ~ .ms-content .ms-panel[data-slide="5"] { display: block; }
#ms-5:checked ~ .ms-track .ms-photo[data-slide="5"] { display: block; }
#ms-5:checked ~ .ms-track label.ms-dot[for="ms-5"] { width: 18px; height: 18px; background: var(--lp-navy); border-color: var(--lp-navy); box-shadow: 0 0 0 6px rgba(31,67,95,0.12); }
#ms-5:checked ~ .ms-nav--prev[data-slide="5"] { display: block; }
#ms-5:checked ~ .ms-nav--next[data-slide="5"] { display: block; }
#ms-5:focus-visible ~ .ms-track label.ms-dot[for="ms-5"] { outline: 2px solid var(--lp-orange); outline-offset: 3px; }

@media (max-width: 720px) {
  .ms-timeline { padding: 56px 32px 16px; }
  .ms-track { height: 140px; }
  .ms-photo { width: 120px; height: 120px; }
  .ms-nav { font-size: 24px; top: 68px; }
}


/* Facts strip */
.lp-facts-strip { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 1px; background: var(--lp-border); border: 1px solid var(--lp-border); border-radius: 8px; overflow: hidden; margin-top: 48px; }
.lp-fact { background: var(--lp-night); padding: 24px 20px; text-align: center; position: relative; overflow: hidden; }
.lp-fact::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--lp-orange); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.lp-fact:hover::before { transform: scaleX(1); }
.lp-fact-label { font-family: var(--lp-font-display); font-size: 14px; letter-spacing: 0.15em; color: var(--lp-orange); text-transform: uppercase; margin-bottom: 8px; }
.lp-fact-val { font-family: var(--lp-font-display); font-size: 1.8rem; color: var(--lp-light); line-height: 1; margin-bottom: 4px; }
.lp-fact-sub { font-size: 0.85rem; color: var(--lp-light); opacity: 0.6; }

/* Speaker bios */
.lp-speakers-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 32px; margin-top: 48px; }
.lp-speaker { display: flex; gap: 20px; align-items: flex-start; }
.lp-speaker-photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid var(--lp-border-orange); flex-shrink: 0; }
.lp-speaker-photo-placeholder { width: 80px; height: 80px; border-radius: 50%; background: rgba(31,67,95,0.3); border: 2px dashed var(--lp-border-orange); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--lp-font-display); font-size: 14px; color: var(--lp-orange); text-align: center; padding: 8px; }
.lp-speaker-name { font-family: var(--lp-font-display); font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lp-light); margin-bottom: 4px; }
.lp-speaker-title { color: var(--lp-orange); margin-bottom: 10px; }
.lp-speaker-bio { font-size: 0.9rem; line-height: 1.5; color: var(--lp-light); opacity: 0.75; }

/* Two-col cards */
.lp-two-col-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
@media (max-width: 768px) { .lp-two-col-cards { grid-template-columns: 1fr; } }
.lp-col-card { background: linear-gradient(180deg,rgba(31,67,95,0.22) 0%,rgba(14,27,44,0.5) 100%); border: 1px solid var(--lp-border); border-radius: 8px; padding: 32px; transition: border-color 0.3s,transform 0.25s; }
.lp-col-card:hover { border-color: var(--lp-border-orange); transform: translateY(-3px); }
.lp-col-card h3 { font-family: var(--lp-font-display); font-weight: 700; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--lp-light); margin-bottom: 16px; }
.lp-col-card p { font-size: 0.95rem; line-height: 1.55; color: var(--lp-light); opacity: 0.82; font-weight: 300; margin-bottom: 12px; }
.lp-col-card p:last-child { margin-bottom: 0; }

/* Testimonial */
.lp-testimonial { background: rgba(31,67,95,0.12); border-left: 4px solid var(--lp-orange); border-radius: 0 8px 8px 0; padding: 32px 40px; margin-top: 48px; max-width: 800px; }
.lp-testimonial-quote { font-family: var(--lp-font-display); font-size: 1.4rem; line-height: 1.35; color: var(--lp-light); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 20px; }
.lp-testimonial-quote::before { content: "\201C"; color: var(--lp-orange); }
.lp-testimonial-quote::after  { content: "\201D"; color: var(--lp-orange); }
.lp-testimonial-author { font-family: var(--lp-font-display); font-size: 14px; letter-spacing: 0.15em; color: var(--lp-orange); text-transform: uppercase; }

/* Round 15 (about.html): readable quote card. lp-testimonial's uppercase
   display-font quote text reads poorly for longer, full-sentence quotes
   (flagged on the About page's Kindervag/Quivooij quotes). This is a
   plain white card instead: normal-case body copy, a big decorative
   orange quote mark, bold small-caps attribution. This is the sitewide
   testimonial-quote style (see the Incident Response page); on dark
   sections it switches to a translucent glass variant below instead of
   sitting as a solid white card on top of the dark background. */
.abt-quote { background: #fff; border-radius: 10px; padding: 40px 44px; box-shadow: 0 16px 40px -16px rgba(15,26,42,0.35); position: relative; display: flex; flex-direction: column; }
.abt-quote-mark { font-family: Georgia,serif; font-size: 3.2rem; line-height: 1; color: var(--lp-orange); opacity: 0.55; display: block; margin-bottom: 4px; }
.abt-quote-text { font-family: var(--lp-font-body); font-size: 1.2rem; line-height: 1.55; color: var(--lp-navy); font-weight: 400; margin-bottom: 20px; flex: 1; }
.abt-quote-author { font-family: var(--lp-font-body); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-navy); font-weight: 700; }

/* Optional avatar+name+role row for abt-quote, used when a quote should show a person, not just a text attribution line */
.abt-quote-person { display: flex; align-items: center; gap: 12px; }
.abt-quote-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(31,67,95,0.08); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.abt-quote-avatar svg { width: 20px; height: 20px; }
.abt-quote-name { font-family: var(--lp-font-body); font-size: 0.9rem; font-weight: 700; color: var(--lp-navy); }
.abt-quote-role { font-family: var(--lp-font-body); font-size: 0.8rem; color: var(--lp-navy); opacity: 0.6; }

/* Dark-background variant: on .lp-section / .lp-section-navy / .proof the card
   becomes a translucent glass panel instead of a solid white card, so it sits
   into the dark background rather than floating on top of it. */
.lp-section .abt-quote, .lp-section-navy .abt-quote, .proof .abt-quote { background: rgba(255,255,255,0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 16px 40px -16px rgba(0,0,0,0.5); }
.lp-section .abt-quote-text, .lp-section-navy .abt-quote-text, .proof .abt-quote-text { color: var(--lp-light); }
.lp-section .abt-quote-author, .lp-section-navy .abt-quote-author, .proof .abt-quote-author { color: var(--lp-light); }
.lp-section .abt-quote-name, .lp-section-navy .abt-quote-name, .proof .abt-quote-name { color: var(--lp-light); }
.lp-section .abt-quote-role, .lp-section-navy .abt-quote-role, .proof .abt-quote-role { color: var(--lp-light); opacity: 0.65; }
.lp-section .abt-quote-avatar, .lp-section-navy .abt-quote-avatar, .proof .abt-quote-avatar { background: rgba(255,255,255,0.1); }
.lp-section .abt-quote-avatar svg, .lp-section-navy .abt-quote-avatar svg, .proof .abt-quote-avatar svg { stroke: var(--lp-light); }

/* Round 17 (grow-at-on2it): Andrzej quote sits beside the "Your first month"
   copy in a 2-col grid (.lp-grid-2-asym, align-items:start). Grid keeps the
   card *box* flush with the paragraph column, but .abt-quote's default
   padding-top (40px) plus the large quote-mark glyph pushed the actual quote
   sentence ~90px below that top edge, while the paragraph text starts
   immediately -- so the two columns read as misaligned at the top. Trims
   the top padding and quote-mark size so the quote text starts close to
   where the paragraph beside it starts. */
.abt-quote--compact { padding-top: 24px; }
.abt-quote--compact .abt-quote-mark { font-size: 2rem; margin-bottom: 0; }

/* FAQ */
.lp-faq-list { margin-top: 48px; display: grid; gap: 1px; background: var(--lp-border); border: 1px solid var(--lp-border); border-radius: 8px; overflow: hidden; }
.lp-faq-item { background: var(--lp-night); padding: 28px; }
.lp-faq-q { font-family: var(--lp-font-display); font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--lp-light); margin-bottom: 12px; }
.lp-faq-a { font-size: 0.95rem; line-height: 1.6; color: var(--lp-light); opacity: 0.75; font-weight: 300; }

/* Bottom form */
.lp-form-section { padding: 80px 0; background: var(--lp-night); }
.lp-form-section-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.lp-form-section-title { font-family: var(--lp-font-display); font-weight: 700; font-size: clamp(1.6rem,3vw,2.4rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--lp-light); margin-bottom: 16px; }
.lp-form-section-sub { font-size: 1rem; line-height: 1.6; color: var(--lp-light); opacity: 0.75; margin-bottom: 40px; font-weight: 300; }

/* Primary button — canonical rule now lives in section 06 · BUTTONS */

/* LP scroll-reveal */
.lp-fade { opacity: 0; transform: translateY(20px); transition: opacity 0.7s ease-out,transform 0.7s ease-out; }
.lp-fade.in { opacity: 1; transform: translateY(0); }

/* ─── 17 · UTILITIES ─── */

/* Scroll-reveal — IT'er variant (JS adds class to <html>) */
.reveal { opacity: 1; transform: none; transition: opacity 600ms ease,transform 600ms cubic-bezier(0.2,0.6,0.2,1); }
html.js .reveal { opacity: 0; transform: translateY(24px); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal--delay   { transition-delay: 120ms; }
html.js .reveal--delay-2 { transition-delay: 240ms; }

/* Scroll-reveal — homepage variant */
.sr { opacity: 0; transform: translateY(28px); transition: opacity .65s var(--ease),transform .65s var(--ease); }
.sr.in { opacity: 1; transform: translateY(0); }
.sr.d1{transition-delay:.08s} .sr.d2{transition-delay:.16s} .sr.d3{transition-delay:.24s}
.sr.d4{transition-delay:.32s} .sr.d5{transition-delay:.40s}

/* View transitions */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.2,0.6,0.2,1);
  }
}

/* Print */
@media print {
  .site-header,.site-footer,.lp-form-wrap,.cta-strip { display: none !important; }
  body { color: #000; background: #fff; }
  a { color: #000; text-decoration: underline; }
}

/* ─── 18 · CONFIRMATION PAGES (cnf-*) ───
   Shared by cnfrmd/contact.html, demo.html, webinar.html,
   download.html, assessment.html */
      .cnf-page {
        min-height: calc(100vh - var(--nav-height, 0px));
        background: var(--lp-night);
        color: var(--lp-light);
        position: relative;
        overflow: hidden;
        display: flex; align-items: center; justify-content: center;
        padding: 48px 24px;
      }
      .cnf-page::before {
        content: '';
        position: absolute;
        top: -10%; left: 50%;
        width: 700px; height: 700px;
        transform: translateX(-50%);
        background: radial-gradient(circle, rgba(242,110,24,0.08) 0%, rgba(242,110,24,0) 65%);
        pointer-events: none;
      }
      .cnf-page-inner {
        max-width: 1200px; width: 100%;
        position: relative; z-index: 1;
        display: flex; flex-direction: column; gap: 48px;
      }
      .cnf-strip { text-align: center; max-width: 640px; margin: 0 auto; }
      .cnf-icon {
        width: 56px; height: 56px; margin: 0 auto 20px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: linear-gradient(135deg, var(--lp-orange) 0%, #d45e0e 100%);
        box-shadow: 0 0 0 5px rgba(242,110,24,0.12), 0 8px 24px rgba(0,0,0,0.35);
      }
      .cnf-icon svg { width: 26px; height: 26px; color: #fff; stroke: currentColor; }
      .cnf-eyebrow {
        color: var(--lp-orange); margin-bottom: 12px;
      }
      .cnf-title {
        font-family: var(--lp-font-display); font-weight: 700;
        font-size: clamp(1.75rem, 3vw, 2.4rem);
        line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase;
        margin: 0 0 14px; color: #fff;
      }
      .cnf-title em { font-style: normal; color: var(--lp-orange); }
      .cnf-sub {
        font-family: var(--lp-font-body);
        font-size: 1rem; line-height: 1.55;
        color: rgba(255,255,255,0.72);
        max-width: 500px; margin: 0 auto;
      }
      .cnf-rel-head { text-align: center; }
      .cnf-rel-head h2 {
        font-family: var(--lp-font-display); font-weight: 700;
        font-size: clamp(1.4rem, 2.2vw, 1.75rem);
        letter-spacing: 0.04em; text-transform: uppercase;
        margin: 0; color: #fff;
      }
      .cnf-rel-head h2 em { font-style: normal; color: var(--lp-orange); }
      .cnf-rel-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
      }
      @media (max-width: 900px) { .cnf-rel-grid { grid-template-columns: 1fr; } }

      /* Image-first cards, RG-portal pattern */
      .cnf-card {
        position: relative;
        display: block;
        aspect-ratio: 4/3;
        min-height: 240px;
        overflow: hidden;
        text-decoration: none;
        border: 1px solid transparent;
        background-color: var(--lp-navy);
        background-size: cover;
        background-position: center;
        transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
      }
      .cnf-card:hover, .cnf-card:focus-visible {
        transform: translateY(-3px);
        border-color: var(--lp-orange);
        box-shadow: 0 12px 32px rgba(0,0,0,0.4);
      }

      /* Full-card orange tint over the photo, default state only.
         inset: -1px so the tint reaches past the card's 1px border box
         (absolute children align to the padding edge, not the border
         edge, which otherwise left a thin untinted sliver at the edge). */
      .cnf-card::before {
        content: '';
        position: absolute; inset: -1px;
        background: rgba(242,110,24,0.4);
        z-index: 0;
        transition: opacity 0.22s ease;
      }
      .cnf-card:hover::before,
      .cnf-card:focus-visible::before { opacity: 0; }

      /* Always-visible bottom strip: badge + title */
      .cnf-card-base {
        position: absolute;
        bottom: 0; left: 0; right: 0;
        padding: 22px 22px 20px;
        background: linear-gradient(180deg, transparent 0%, rgba(14,26,42,0.55) 40%, rgba(14,26,42,0.95) 100%);
        z-index: 1;
        transition: opacity 0.22s ease;
      }
      .cnf-card:hover .cnf-card-base,
      .cnf-card:focus-visible .cnf-card-base { opacity: 0; }
      .cnf-card-base .badge {
        font-family: var(--lp-font-display);
        font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
        color: var(--lp-orange); margin-bottom: 6px;
      }
      .cnf-card-base .title {
        font-family: var(--lp-font-display); font-weight: 700;
        font-size: 18px; line-height: 1.15;
        text-transform: uppercase; letter-spacing: 0.02em;
        color: #fff; margin: 0;
      }

      /* Hover overlay: full info */
      .cnf-card-overlay {
        position: absolute; inset: 0;
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 24px 22px 22px;
        background: linear-gradient(180deg, rgba(31,67,95,0.55) 0%, rgba(30,51,79,0.85) 55%, rgba(14,26,42,0.98) 100%);
        opacity: 0;
        transform: translateY(12px);
        transition: opacity 0.25s ease, transform 0.25s ease;
        z-index: 2;
      }
      .cnf-card:hover .cnf-card-overlay,
      .cnf-card:focus-visible .cnf-card-overlay {
        opacity: 1;
        transform: translateY(0);
      }
      .cnf-card-overlay .badge {
        font-family: var(--lp-font-display);
        font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600;
        color: var(--lp-orange); margin-bottom: 6px;
      }
      .cnf-card-overlay .title {
        font-family: var(--lp-font-display); font-weight: 700;
        font-size: 18px; line-height: 1.15;
        text-transform: uppercase; letter-spacing: 0.02em;
        color: #fff; margin: 0 0 12px;
      }
      .cnf-card-overlay .body {
        font-family: var(--lp-font-body);
        font-size: 13px; line-height: 1.5;
        color: rgba(255,255,255,0.9); margin: 0 0 16px;
      }
      .cnf-card-overlay .cta {
        display: inline-flex; align-items: center; gap: 8px;
        font-family: var(--lp-font-display);
        font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--lp-orange);
      }
      .cnf-card-overlay .cta::after { content: '→'; transition: transform 0.18s; }
      .cnf-card:hover .cnf-card-overlay .cta::after { transform: translateX(4px); }

      /* Touch/mobiel, overlay altijd zichtbaar */
      @media (hover: none) {
        .cnf-card-overlay { opacity: 1; transform: none; }
        .cnf-card-base { opacity: 0; }
      }

/* ─── 19 · MDR DETECT — L-SERIES SHARED COMPONENTS (pages-karin) ───
   Shared by 20260621_L_1..L_4. Collision-prone names (.hero, .cta-strip,
   nav, blockquote, :root aliases) stay page-local by design — see
   memory: karin pages classname collision. */
.nav-logo img { height: 36px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 32px; }
.nav-links a {
font-family: var(--fb); font-size: 14px; font-weight: 600;
    color: rgba(255,255,255,0.75); text-decoration: none;
    transition: color 0.2s;
}
.nav-links a:hover { color: var(--white); }
.nav-links a.back-link { color: var(--orange); }
.nav-links a.back-link:hover { color: #fff; }
.nav-cta {
background: var(--orange); color: var(--white) !important;
    padding: 9px 20px; border-radius: 4px; font-weight: 700 !important;
    transition: background 0.2s !important;
}
.nav-cta:hover { background: #d45e0e !important; color: var(--white) !important; }
.hero-inner {
position: relative; z-index: 1;
    max-width: 1100px; margin: 0 auto;
    padding: 80px 40px;
    display: grid; grid-template-columns: 1fr 400px; gap: 60px; align-items: center;
}
.hero-eyebrow {
font-family: var(--fh); font-size: 15px; font-weight: 500;
    letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--orange) !important; margin-bottom: 28px;
}
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
/* .btn-primary / .btn-outline — canonical rules now live in section 06 · BUTTONS.
   (--navy on --orange is the AA-safe pairing: 6.18:1 base, 4.76:1 on the #d45e0e hover.) */
/* Small, flat orange card, no glow/gradient -- same visual language as the
   contact page's .contact-soc-callout (two static orange corners). Sits at
   the bottom of the hero-inner grid row (align-self: end), roughly level
   with the CTA buttons in the text column, instead of stretching the full
   height of the 400px hero-inner track. */
.hero-stat {
position: relative;
    align-self: end;
    max-width: 280px; margin-left: auto;
    background: rgba(242,110,24,0.12);
    border: 1px solid rgba(242,110,24,0.5);
    border-radius: 4px; padding: 16px 20px;
}
.hero-stat::before, .hero-stat::after {
content: ""; position: absolute;
    width: 16px; height: 16px;
    border-color: var(--orange); border-style: solid;
}
.hero-stat::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.hero-stat::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.hero-stat-eyebrow {
font-family: var(--fh); font-size: 14px; font-weight: 400;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--orange); margin-bottom: 6px;
}
.hero-stat-label {
font-family: var(--fh); font-size: 32px; font-weight: 700; color: var(--white);
    text-transform: uppercase; letter-spacing: 0.02em;
    line-height: 1; margin-bottom: 6px;
}
/* Each page's own local `.hero p { font-size: 17px; }` rule has the same
   specificity as `.hero-stat p` and sits later in the document (inline
   <style> after this stylesheet's <link>), so it was winning the cascade
   and silently overriding this. Qualifying with `.hero` bumps specificity
   so this rule always wins regardless of source order. */
.hero .hero-stat p {
font-size: 13px; color: rgba(255,255,255,0.65); margin: 0; line-height: 1.4;
}
.problem {
background: var(--light-grey);
    padding: 80px 40px;
}
.problem-inner {
max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center;
}
.section-label {
font-family: var(--fh); font-size: 14px; font-weight: 400;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--orange) !important; margin-bottom: 16px;
}
.problem h2 {
font-family: var(--fh); font-size: clamp(28px, 3vw, 40px);
    font-weight: 400; text-transform: uppercase; color: var(--darker);
    line-height: 1.05; margin-bottom: 20px;
}
.problem p { font-size: 16px; line-height: 1.7; color: var(--body); }
.problem-stat-icon {
width: 44px; height: 44px; border-radius: 50%;
    background: rgba(20,40,66,0.07); color: var(--darker);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
}
.problem-stat-icon svg { width: 20px; height: 20px; }
.problem-stat-num {
font-family: var(--fh); font-size: 3.5rem; font-weight: 400; color: var(--darker);
    text-transform: uppercase; letter-spacing: 0.02em;
    line-height: 1.05; margin-bottom: 8px;
}
.problem-stat-label {
font-weight: 400;
    color: var(--orange); margin-bottom: 12px;
}
.problem-stat p {
font-size: 15px; color: var(--body); line-height: 1.6;
}
.delivery {
background: var(--darker);
    padding: 80px 40px;
}
.delivery-inner { max-width: 1100px; margin: 0 auto; }
.delivery h2 {
font-family: var(--fh); font-size: clamp(28px, 3vw, 40px);
    font-weight: 400; text-transform: uppercase; color: var(--white);
    line-height: 1.05; margin-bottom: 12px;
}
.delivery-intro {
font-size: 16px; color: rgba(255,255,255,0.6);
    margin-bottom: 48px; max-width: 640px;
}
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
position: relative;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 4px; padding: 32px;
    transition: background 0.3s ease;
}
.card::before, .card::after {
content: ""; position: absolute;
    width: 14px; height: 14px;
    border-color: var(--orange); border-style: solid;
    opacity: 0;
    transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.card:hover { background: rgba(255,255,255,0.06); }
.card:hover::before, .card:hover::after { opacity: 1; width: 22px; height: 22px; }
.card:hover .card-num { text-shadow: 0 0 14px rgba(242,110,24,0.6); }
.card-num {
font-family: var(--fh); font-size: 14px; color: var(--orange);
    letter-spacing: 0.1em; margin-bottom: 16px; text-transform: uppercase;
    transition: text-shadow 0.3s ease;
}
.card h3 {
font-family: var(--fh); font-size: 22px; font-weight: 400;
    text-transform: uppercase; color: var(--white);
    line-height: 1.1; margin-bottom: 14px;
}
.card p { font-size: 14px; color: rgba(255,255,255,0.62); line-height: 1.65; }

/* Round 7: Grow at ON2IT — bento-style "ON2IT in Numbers" section. Mixes 2 real
   photos with .card stat blocks (existing orange-corner-hover component) in an
   asymmetric grid. Only new rule set; reuses --orange/--fh/--white tokens and
   the existing .card/.card-num/h3/p pattern. */
.grow-numbers-bento {
  display: grid; grid-template-columns: repeat(12,1fr);
  gap: 20px; margin-top: 48px;
}
/* Round 11: 4 cards on row 1 (span 3 of 12), 3 cards on row 2 (span 4 of 12) --
   different card counts per row, but both rows add up to the same 12 columns
   so the left/right edges line up exactly. */
.grow-numbers-bento .card { grid-column: span 3; }
.grow-numbers-bento .card:nth-child(n+5) { grid-column: span 4; }
.gnb-photo {
  position: relative; border-radius: 4px; overflow: hidden;
  background-size: cover; background-position: center;
  min-height: 180px; border: 1px solid rgba(255,255,255,0.08);
}
.gnb-photo-caption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(14,26,42,0.95) 78%);
}
.gnb-photo-caption .card-num { color: var(--orange); margin-bottom: 8px; }
.gnb-photo-caption h3 {
  font-family: var(--fh); font-size: 22px; font-weight: 400;
  text-transform: uppercase; color: var(--white); line-height: 1.1; margin: 0 0 6px;
}
.gnb-photo-caption p { font-size: 13px; color: rgba(255,255,255,0.75); margin: 0; line-height: 1.5; }
@media (max-width: 860px) {
  .grow-numbers-bento { grid-template-columns: repeat(2,1fr); }
  .grow-numbers-bento .card, .grow-numbers-bento .card:nth-child(n+5) { grid-column: span 1; }
}
@media (max-width: 560px) {
  .grow-numbers-bento { grid-template-columns: 1fr; }
  .gnb-photo { min-height: 220px; }
}

/* Round 12 (industrial-cybersecurity): flex row of equal-width .card items,
   reusing the existing orange-corner-hover .card component as-is (no growth
   on hover, just an even side-by-side row). */
.card-row-grow { display: flex; gap: 24px; align-items: stretch; }
.card-row-grow .card { flex: 1 1 0; }
@media (max-width: 860px) {
  .card-row-grow { flex-direction: column; }
}

/* Round 13 (industrial-cybersecurity): darker, more opaque .card panel for
   use over the orange "Security without disruption" background, so white
   card text stays readable against a bright/mid-tone photo backdrop. */
.sec-prevent-orange .card { background: rgba(20,14,8,0.55); border-color: rgba(255,255,255,0.16); }
.sec-prevent-orange .card:hover { background: rgba(20,14,8,0.68); }

.proof {
position: relative; overflow: hidden;
    background: var(--orange);
    padding: 80px 40px;
}
.proof-img-bg {
position: absolute; inset: 0; z-index: 0;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
@media (max-width: 900px), (pointer: coarse) {
  .proof-img-bg { background-attachment: scroll; }
}
.proof-img-bg::after {
content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(100deg, rgba(14,26,42,0.82) 0%, rgba(14,26,42,0.58) 55%, rgba(14,26,42,0.82) 100%),
      var(--orange);
    opacity: 0.9;
}
.proof-inner {
position: relative; z-index: 1;
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.trust-indicators { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.trust-item {
background: rgba(255,255,255,0.09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 4px; padding: 24px;
}
.trust-item-num {
font-family: var(--fh); font-size: 36px; color: var(--white);
    line-height: 1; margin-bottom: 6px;
}
.trust-item p { font-size: 13px; color: rgba(255,255,255,0.85); line-height: 1.5; }
.faq {
background: var(--light-grey);
    padding: 80px 40px;
}
.faq-inner { max-width: 820px; margin: 0 auto; }
.faq-inner .section-label,
  .faq-inner h2 { text-align: center; }
.faq h2 {
font-family: var(--fh); font-size: clamp(28px, 3vw, 40px);
    font-weight: 400; text-transform: uppercase; color: var(--darker);
    line-height: 1.05; margin-bottom: 32px;
}
.faq-list {
display: grid; gap: 1px;
    background: rgba(14,26,42,0.10);
    border: 1px solid rgba(14,26,42,0.10);
    border-radius: 8px; overflow: hidden;
}
.faq-item { background: var(--white); padding: 20px 28px; }
.faq-item summary {
cursor: pointer; list-style: none; position: relative; padding-right: 36px;
    font-family: var(--fh); font-weight: 400; font-size: 16px;
    text-transform: uppercase; letter-spacing: 0.02em; color: var(--darker);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    font-family: var(--fh); font-size: 24px; color: var(--orange); font-weight: 300;
    transition: transform 0.2s;
}
.faq-item[open] summary { margin-bottom: 12px; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-a { font-size: 14px; line-height: 1.65; color: var(--body); margin: 0; }
.cta-strip-inner { max-width: 720px; margin: 0 auto; }
.cta-strip-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 900px) {
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 13px; }
  .hero-inner { grid-template-columns: 1fr; padding: 60px 20px; }
  .hero-stat { margin-top: 16px; margin-left: 0; max-width: none; align-self: auto; }
  .problem { padding: 60px 20px; }
  .problem-inner { grid-template-columns: 1fr; gap: 40px; }
  .delivery { padding: 60px 20px; }
  .cards { grid-template-columns: 1fr; }
  .proof { padding: 60px 20px; }
  .proof-inner { grid-template-columns: 1fr; gap: 40px; }
  .faq { padding: 60px 20px; }
}
@media (max-width: 600px) {
  .nav-links { display: none; }
  .trust-indicators { grid-template-columns: 1fr; }
}

/* ─── 20 · MDR DETECT — R-SERIES SHARED COMPONENTS (pages-karin) ───
   Shared by 20260621_R_1..R_3. Same collision caveat as above
   (.btn-ghost/.btn-solid/.btn-white/.sr/.d1-d4/.in/.lead/.hero/.cta-strip
   stay page-local). */
.nav {
background: var(--dark); height: 68px; display: flex; align-items: center; padding: 0 40px; gap: 40px; position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.nav-brand { font-family: var(--fh); font-size: 22px; color: #fff; letter-spacing: 1px; }
.nav-links { display: flex; gap: 24px; flex: 1; }
.nav-links a {
font-family: var(--fh); font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.7); text-decoration: none; padding: 24px 4px; border-bottom: 3px solid transparent;
}
.nav-links a.active { color: #fff; border-bottom-color: var(--orange); }
.nav-pill {
background: var(--orange); color: #fff !important; padding: 10px 18px; border-radius: 2px; font-family: var(--fh); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
}
.benefit-strip { background: var(--dark); padding: 56px 40px; }
.benefit-strip .inner { max-width: 1120px; margin: 0 auto; }
.strip-ey {
color: var(--orange); margin-bottom: 24px;
}
.b-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.b-card {
position: relative; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); padding: 28px 24px; border-radius: 4px; transition: background 0.3s ease;
}
.b-card::before, .b-card::after {
content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--orange); border-style: solid; opacity: 0; transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.b-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.b-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.b-card:hover { background: rgba(255,255,255,0.07); }
.b-card:hover::before, .b-card:hover::after { opacity: 1; width: 22px; height: 22px; }
.b-card:hover .otag .o1 { text-shadow: 0 0 14px rgba(242,110,24,0.6); }
.b-card .bicon {
width: 40px; height: 40px; margin-bottom: 14px; color: var(--orange); background: rgba(242,110,24,0.15); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 9px; box-sizing: border-box;
}
.b-card .bicon svg { width: 100%; height: 100%; }
.b-card h2, .b-card h3 {
font-family: var(--fh); font-size: 18px; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; line-height: 1.2;
}
.b-card p { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,0.65); }
.b-card p strong { color: #fff; }
.otag { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; flex-wrap: wrap; }
.otag .o1 {
flex-shrink: 0; background: rgba(242,110,24,0.16); color: var(--orange); font-family: var(--fh); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; transition: text-shadow 0.3s ease;
}
.otag .o2 {
font-family: var(--fh); font-size: 14px; letter-spacing: 0.3px; text-transform: uppercase; color: #fff; font-weight: 400; line-height: 1.3;
}
.dark-sec { background: var(--light-grey); padding: 64px 40px; }
.dark-sec .inner { max-width: 1120px; margin: 0 auto; }
.dark-sec .ey {
font-family: var(--fh); font-size: 14px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--orange); margin-bottom: 12px;
}
.dark-sec h2 {
font-family: var(--fh); font-size: 40px; color: var(--dark); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px;
}
.dark-sec h2 .acc { color: var(--orange); }
.fp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fp {
background: #fff; border: 1px solid rgba(31,67,95,0.10); padding: 28px 24px; border-radius: 4px; box-shadow: 0 12px 28px -8px rgba(30,51,79,0.12); display: flex; flex-direction: column; height: 100%; box-sizing: border-box;
}
.fp .ftag {
align-self: flex-start; display: inline-block; background: rgba(242,110,24,0.18); color: var(--orange); font-family: var(--fh); font-size: 14px; letter-spacing: 1.5px; padding: 2px 8px; border-radius: 2px; margin-bottom: 16px; text-transform: uppercase;
}
.fp h3, .fp h4 {
font-family: var(--fh); font-size: 17px; color: var(--dark); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;
}
.fp p { font-size: 13px; color: var(--text); line-height: 1.65; }
.fp .flist { list-style: none; margin-top: auto; padding-top: 20px; }
.fp .flist li {
display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--dark); font-weight: 500; padding: 7px 0;
}
.fp .flist li + li { border-top: 1px solid rgba(31,67,95,0.08); }
.fp .flist li::before {
content: '\2713'; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: rgba(242,110,24,0.14); color: var(--orange); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.proof-sec { padding: 56px 40px; background: var(--dark); }
.pc { background: var(--dark); padding: 28px; text-align: center; }
.pn { font-family: var(--fh); font-size: 52px; color: var(--orange); line-height: 1; }
.pn .u { font-size: 28px; }
.pl {
color: rgba(255,255,255,0.9); font-weight: 400; margin-top: 8px;
}
.ps { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 3px; }
.related { position: relative; overflow: hidden; background: var(--orange); padding: 56px 40px; }
.related-img-bg {
position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-attachment: fixed;
}
@media (max-width: 900px), (pointer: coarse) {
  .related-img-bg { background-attachment: scroll; }
}
.related-img-bg::after {
content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,26,42,0.74) 0%, rgba(14,26,42,0.48) 55%, rgba(14,26,42,0.74) 100%), rgba(242,110,24,0.62);
}
.related .inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.rel-ey {
color: rgba(255,255,255,0.85); margin-bottom: 6px; text-shadow: 0 2px 12px rgba(14,26,42,0.6);
}
.rel-h {
font-family: var(--fh); font-size: 20px; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 22px; text-shadow: 0 2px 12px rgba(14,26,42,0.6);
}
.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.rel-card {
position: relative; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.32); padding: 20px 18px; border-radius: 4px; transition: background 0.3s ease; display: flex; flex-direction: column; height: 100%; text-decoration: none; box-sizing: border-box;
}
.rel-card::before, .rel-card::after {
content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--orange); border-style: solid; opacity: 0; transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.rel-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.rel-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.rel-card:hover { background: rgba(255,255,255,0.28); }
.rel-card:hover::before, .rel-card:hover::after { opacity: 1; width: 22px; height: 22px; }
.rel-card:hover .rel-step { text-shadow: 0 0 14px rgba(242,110,24,0.6); }
.rel-step {
color: var(--orange); margin-bottom: 6px; transition: text-shadow 0.3s ease;
}
.rel-card h3, .rel-card h4, .rel-card h5 {
font-family: var(--fh); font-size: 15px; color: #fff; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; line-height: 1.2;
}
.rel-card p { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.4; }
.rel-arrow {
font-family: var(--fh); font-size: 14px; color: var(--orange); margin-top: auto; padding-top: 8px; display: block; transition: text-shadow 0.3s ease;
}
.faq { background: var(--light-grey); padding: 80px 40px; }
.faq-inner { max-width: 820px; margin: 0 auto; }
.faq-ey {
color: var(--orange); margin-bottom: 12px; text-align: center;
}
.faq h2 {
font-family: var(--fh); font-size: clamp(26px, 3vw, 36px); font-weight: 400; text-transform: uppercase; color: var(--dark); line-height: 1.05; margin-bottom: 32px; text-align: center; letter-spacing: 0.5px;
}
.faq-list {
display: grid; gap: 1px; background: rgba(14,26,42,0.10); border: 1px solid rgba(14,26,42,0.10); border-radius: 8px; overflow: hidden;
}
.faq-item { background: #fff; padding: 20px 28px; }
.faq-item summary {
cursor: pointer; list-style: none; position: relative; padding-right: 36px; font-family: var(--fh); font-weight: 400; font-size: 16px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--dark);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--fh); font-size: 24px; color: var(--orange); font-weight: 300; transition: transform 0.2s;
}
.faq-item[open] summary { margin-bottom: 12px; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-a { font-size: 14px; line-height: 1.65; color: var(--text); margin: 0; }
.cta-btns { display: flex; gap: 12px; flex-shrink: 0; justify-content: center; }
/* .btn-outline-wh — canonical rule now lives in section 06 · BUTTONS */
footer .inner {
max-width: 1120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
}
footer .fbrand { font-family: var(--fh); font-size: 18px; color: #fff; letter-spacing: 1px; }
footer .ftag {
font-size: 10px; letter-spacing: 2px; color: rgba(255,255,255,0.35); text-transform: uppercase; margin-top: 2px;
}
footer .fcopy { font-size: 12px; color: rgba(255,255,255,0.35); text-align: right; line-height: 1.5; }
.svc-big {
font-family: var(--fh); font-size: 60px; color: var(--orange); line-height: 1; letter-spacing: -2px; position: relative;
}
.svc-big .su { font-size: 30px; }
.svc-lbl {
font-size: 12px; color: var(--lp-navy); opacity: 0.7; margin-top: 6px; margin-bottom: 0; position: relative;
}
/* Round 18 (svc-card stat grid): dropped the boxed/bordered treatment on
   each of the 4 cells (background+border+radius made 4 nested boxes inside
   the already-dark .svc-card, plus visibly collided with the card's ghost
   watermark at the hard box edges). Now plain text on the card's own
   background, separated by hairline dividers instead of full boxes. */
/* Round 19 (svc-card): swapped the solid dark-navy gradient card (floating,
   heavy, poor fit sitting on these pages' white hero) for the same light,
   orange-cornered accent-block language already used for .hero-stat and
   .contact-soc-callout elsewhere on the site. Text recolored dark-navy to
   read on the new light tint. */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; position: relative; }
.svc-cell { text-align: center; padding: 12px 10px; transition: opacity 0.25s ease; }
.svc-cell:nth-child(odd) { border-right: 1px solid rgba(22,48,69,0.15); }
.svc-cell:nth-child(-n+2) { border-bottom: 1px solid rgba(22,48,69,0.15); }
.svc-cell:hover { opacity: 0.7; }
.svc-cn { font-family: var(--fh); font-size: 26px; color: var(--lp-navy); line-height: 1; }
.svc-cl { font-size: 11px; color: var(--lp-navy); opacity: 0.55; margin-top: 4px; }
@media (max-width: 900px) {
  .b-grid, .fp-grid { grid-template-columns: 1fr; }
}


/* ==================================================================== */
/* 21 · ZERO TRUST — SHARED COMPONENTS (pages-karin)                    */
/* ==================================================================== */

/* ------------------------------------------------------------------ */
/* Zero_Trust shared/unique rules. Selectors here are safe against the  */
/* pre-existing global stylesheet AND against each other (identical     */
/* across pages, or used on only one page). Selectors that repeat       */
/* across the 4 Zero_Trust pages with DIFFERING values (accent colors,  */
/* per-page background images, etc.) are intentionally excluded here    */
/* and kept in each page's local <style> block instead.                 */
/* ------------------------------------------------------------------ */

.hero-audience {
font-family: var(--fh); font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--dim); margin-bottom: 20px;
}
.hero-stats { display: flex; gap: 0; flex-wrap: wrap; }
.nav-logo {
font-family: var(--fh); font-size: 18px; letter-spacing: 1px; text-transform: uppercase; color: var(--white); text-decoration: none;
}
.nav-logo span { color: var(--orange); }
.nav-tier-links { display: flex; gap: 0; }
.nav-tier-links a {
font-family: var(--fh); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 0 20px; height: 60px; display: flex; align-items: center; border-bottom: 3px solid transparent; transition: color 0.2s, border-color 0.2s;
}
.nav-tier-links a:hover { color: var(--white); }
.content { max-width: 1100px; margin: 0 auto; padding: 64px 48px 100px; }
.section-head {
margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--divider); display: flex; align-items: center; gap: 16px;
}
.section-title { font-family: var(--fh); font-size: 22px; color: var(--white); text-transform: uppercase; }
.section-desc { font-size: 12px; color: var(--dim); margin-top: 2px; }
.section-count {
font-family: var(--fh); font-size: 14px; letter-spacing: 1px; color: var(--faint); margin-left: auto; white-space: nowrap;
}
.card-type { font-family: var(--fh); font-size: 14px; letter-spacing: 2px; text-transform: uppercase; color: var(--orange); }

/* Round 6: light-mode override of the Board-Brief .card family, scoped to
   .lp-section-light so the existing dark usage (Karin pages) is untouched.
   Values built from existing --lp-* tokens; --lp-navy = #1F435F -> rgb(31,67,95). */
.lp-section-light .card { background: var(--lp-white); border: 1px solid rgba(31,67,95,0.14); box-shadow: 0 2px 12px rgba(31,67,95,0.06); }
.lp-section-light .card:hover { background: var(--lp-white); box-shadow: 0 10px 28px rgba(31,67,95,0.12); border-color: var(--lp-border-orange); }
.lp-section-light .card::before, .lp-section-light .card::after { border-color: var(--lp-orange); }
.lp-section-light .card-type { color: var(--lp-orange); }
.lp-section-light .card-dot { background: rgba(31,67,95,0.3); }
.lp-section-light .card-time { color: var(--lp-mid-grey); }
.lp-section-light .card-title { color: var(--lp-navy); }
.lp-section-light .card-desc { color: rgba(31,67,95,0.75); }
.lp-section-light .card-footer { border-top: 1px solid rgba(31,67,95,0.14); }
.lp-section-light .card-author { color: var(--lp-mid-grey); }
.lp-section-light .card-author strong { color: var(--lp-navy); }
.lp-section-light .card-arrow { color: rgba(31,67,95,0.35); }
.lp-section-light .card-num { color: var(--lp-orange); }
.lp-section-light .card h3 { color: var(--lp-navy); }
.lp-section-light .card p { color: rgba(31,67,95,0.75); }

.card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.card-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.card-time { font-family: var(--fh); font-size: 14px; color: var(--muted); } /* was --dim: ~1.9:1 on --on2it-night, unreadable. Generalizes the #compliance fix below sitewide. */
.card-title {
font-family: var(--fh); font-size: 22px; font-weight: 400; line-height: 1.2; color: var(--white); margin-bottom: 12px; flex: 1; text-transform: uppercase;
}
.card-desc { font-size: 13px; line-height: 1.65; color: var(--muted); margin-bottom: 18px; }
.card-footer {
display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--divider);
}
.card-author { font-size: 11px; color: var(--muted); } /* was --dim, same contrast bug as .card-time above */
.card-author strong { color: var(--muted); }
.card-arrow { font-size: 16px; color: var(--faint); transition: color 0.2s, transform 0.2s; }
.cta-card { padding: 32px 36px; border-radius: 6px; text-decoration: none; display: block; }
.cta-label {
margin-bottom: 8px;
}
.cta-title { font-family: var(--fh); font-size: 22px; margin-bottom: 6px; text-transform: uppercase; }
.cta-card.hub .cta-title { color: var(--white); }
.cta-desc { font-size: 13px; line-height: 1.6; }
.cta-link {
font-family: var(--fh); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; margin-top: 14px; display: inline-block;
}
.cta-photo { position: relative; overflow: hidden; background: var(--orange); padding: 80px 40px; }
.cta-photo-bg::after {
content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(100deg, rgba(14,26,42,0.82) 0%, rgba(14,26,42,0.58) 55%, rgba(14,26,42,0.82) 100%),
      var(--orange);
    opacity: 0.9;
}
.cta-photo-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
.hero-deck strong { color: var(--white); font-weight: 600; }
.the-line { background: linear-gradient(135deg, rgba(242,110,24,0.08), rgba(10,14,26,0)); border-top: 1px solid var(--orange-border); border-bottom: 1px solid var(--divider); padding: 28px 48px; }
.the-line-inner {
max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.the-line-label {
font-weight: 400; color: var(--orange); white-space: nowrap; flex: 0 0 auto; padding-right: 24px; border-right: 1px solid var(--divider);
}
.the-line-text {
font-family: var(--fb); font-size: 16px; line-height: 1.65; color: var(--mid); font-weight: 400; flex: 1 1 320px;
}
.lane-proof { background: var(--light-grey); padding: 64px 48px; }
.proof-body { font-size: 14px; line-height: 1.65; color: var(--body); }
.proof-source {
font-family: var(--fh); font-size: 14px; color: rgba(14,26,42,0.45); margin-top: 14px; letter-spacing: 0.05em;
}
.kv-photo { position: relative; overflow: hidden; background: var(--orange); padding: 80px 40px; }
.kv-photo-bg {
position: absolute; inset: 0; z-index: 0; background-image: url('/assets/background-images/shared/Firewall_HP.webp'); background-size: cover; background-position: center; background-attachment: fixed;
}
.kv-photo-bg::after {
content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(14,26,42,0.82) 0%, rgba(14,26,42,0.58) 55%, rgba(14,26,42,0.82) 100%), var(--orange); opacity: 0.9;
}
.kv-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; }
.kv-card {
position: relative;
    background: rgba(255,255,255,0.09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 8px;
    padding: 48px 56px;
    display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: center;
}
.kv-card::before {
content: '\201C'; position: absolute; top: 10px; left: 24px;
    font-family: var(--fh); font-size: 64px; line-height: 1;
    color: var(--white); opacity: 0.35;
}
.kv-quote {
font-family: var(--fh); font-size: 28px; line-height: 1.4; color: var(--white); font-weight: 400; margin-bottom: 0; padding-top: 24px;
}
.kv-attr {
display: flex; align-items: center; gap: 16px; border-left: 1px solid rgba(255,255,255,0.25); padding-left: 32px;
}
.kv-badge {
width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1.5px solid rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; font-family: var(--fh); font-size: 14px; color: var(--white); flex-shrink: 0;
}
.kv-name { font-family: var(--fh); font-size: 15px; color: var(--white); }
.kv-role {
font-family: var(--fh); font-size: 14px; letter-spacing: 0.08em; color: var(--orange-soft); margin-top: 3px;
}
.next { padding: 64px 48px 80px; }
.next-inner { max-width: 1100px; margin: 0 auto; }
.next-label {
font-weight: 400; color: var(--dim); margin-bottom: 28px;
}
.next-cards { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.next-card {
position: relative; background: var(--card-bg); border: 1px solid var(--card-border); padding: 24px; text-decoration: none; display: block; transition: background 0.3s ease;
}
.next-card::before, .next-card::after {
content: ""; position: absolute; width: 12px; height: 12px; border-color: var(--orange); border-style: solid; opacity: 0; transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.next-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.next-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.next-card:hover { background: var(--orange-dim); }
.next-card:hover::before, .next-card:hover::after { opacity: 1; width: 18px; height: 18px; }
.next-card:hover .next-arrow { color: var(--orange); }
.next-card-eyebrow {
font-family: var(--fh); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px;
}
.next-card-title {
font-family: var(--fh); font-size: 18px; text-transform: uppercase; color: var(--white); line-height: 1.2; margin-bottom: 8px;
}
.next-card-desc { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-bottom: 16px; }
.next-arrow { font-size: 16px; color: var(--faint); display: block; transition: color 0.2s; }
/* .cta-strip-btn — canonical rule now lives in section 06 · BUTTONS */
.platform-strip {
background: linear-gradient(135deg, rgba(62,207,142,0.05), rgba(10,14,26,0)); border-top: 1px solid var(--green-border); border-bottom: 1px solid var(--divider); padding: 28px 48px;
}
.platform-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: flex-start; gap: 48px; }
.platform-item { flex: 1; }
.platform-label {
color: var(--green); margin-bottom: 6px;
}
.platform-text { font-size: 13px; line-height: 1.6; color: var(--mid); }
.dict-feature {
max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center; text-decoration: none; background: var(--white); border: 1px solid rgba(14,26,42,0.10); border-radius: 8px; padding: 40px 44px; box-sizing: border-box; box-shadow: 0 12px 28px -8px rgba(14,26,42,0.12); transition: box-shadow 0.2s, border-color 0.2s;
}
.dict-feature:hover { border-color: var(--green-border); box-shadow: 0 16px 34px -8px rgba(14,26,42,0.18); }
.dict-feature:hover .dict-cta { background: var(--green); color: var(--bg); }
.dict-eyebrow {
color: var(--green); margin-bottom: 12px;
}
.dict-title {
font-family: var(--fh); font-size: 30px; color: var(--darker); margin-bottom: 12px; text-transform: uppercase;
}
.dict-title em { font-style: normal; color: var(--blue); }
.dict-desc { font-size: 13.5px; line-height: 1.7; color: var(--body); margin-bottom: 16px; }
.dict-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.dict-tag {
font-family: var(--fh); font-size: 14px; color: var(--body); background: var(--white); border: 1px solid rgba(14,26,42,0.12); padding: 3px 9px; border-radius: 3px;
}
.dict-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dict-cta {
font-family: var(--fh); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; padding: 14px 26px; border: 1.5px solid var(--green); color: var(--green); border-radius: 4px; white-space: nowrap; transition: background 0.2s, color 0.2s;
}
.dict-count { font-family: var(--fh); font-size: 14px; color: rgba(14,26,42,0.5); letter-spacing: 1px; }
.auxo-box {
max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;
}
.auxo-eyebrow {
color: var(--green); margin-bottom: 10px;
}
.auxo-title {
font-family: var(--fh); font-size: 24px; color: var(--darker); margin-bottom: 12px; line-height: 1.2; text-transform: uppercase;
}
.auxo-desc { font-size: 13px; line-height: 1.65; color: var(--body); }
.auxo-metrics { display: flex; flex-direction: column; gap: 16px; }
.auxo-metric {
padding: 14px 18px; border-radius: 6px; transition: background 0.25s ease;
}
.auxo-metric:hover { background: rgba(14,26,42,0.04); }
.auxo-metric-num {
font-family: var(--fh); font-size: 28px; color: var(--green); line-height: 1; margin-bottom: 4px;
}
.auxo-metric-label {
color: rgba(14,26,42,0.5);
}
.lane-dict { background: var(--light-grey); padding: 64px 48px; }
.lane-auxo { background: var(--white); padding: 64px 48px; border-top: 1px solid rgba(14,26,42,0.08); }
.outcomes-strip {
background: linear-gradient(135deg, rgba(30,144,255,0.06), rgba(10,14,26,0)); border-top: 1px solid var(--blue-border); border-bottom: 1px solid var(--divider); padding: 28px 48px;
}
.outcomes-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: flex-start; gap: 48px; }
.outcome-item { flex: 1; }
.outcome-label {
color: var(--blue-dim); margin-bottom: 6px;
}
.outcome-text { font-size: 13px; line-height: 1.6; color: var(--mid); }
.lane-five-step { background: var(--light-grey); padding: 64px 48px; }
.five-step {
max-width: 1100px; margin: 0 auto;
}
.fs-eyebrow {
color: var(--dark-blue); margin-bottom: 14px;
}
.fs-title {
font-family: var(--fh); font-size: 26px; color: var(--darker); margin-bottom: 28px; text-transform: uppercase;
}
.fs-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.fs-step {
padding: 18px 16px; border-radius: 6px; transition: background 0.25s ease;
}
.fs-step:hover { background: rgba(14,26,42,0.04); }
.fs-num {
font-family: var(--fh); font-size: 22px; color: var(--blue); margin-bottom: 8px; line-height: 1;
}
.fs-label {
font-family: var(--fh); font-size: 14px; color: var(--darker); margin-bottom: 6px; text-transform: uppercase;
}
.fs-desc { font-size: 11.5px; color: var(--body); line-height: 1.5; }
.mandate-strip {
background: linear-gradient(135deg, rgba(244,121,41,0.08), rgba(10,14,26,0)); border-top: 1px solid var(--orange-border); border-bottom: 1px solid var(--divider); padding: 28px 48px;
}
.mandate-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: flex-start; gap: 48px; }
.mandate-item { flex: 1; }
.mandate-label {
color: var(--orange); margin-bottom: 6px;
}
.mandate-text { font-size: 13px; line-height: 1.6; color: var(--mid); }
.lane-board-q { background: var(--light-grey); padding: 64px 48px; }
.board-questions {
max-width: 1100px; margin: 0 auto;
}
.bq-eyebrow {
color: var(--orange); margin-bottom: 14px;
}
.bq-title {
font-family: var(--fh); font-size: 26px; color: var(--darker); margin-bottom: 24px; text-transform: uppercase;
}
.bq-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 32px; row-gap: 2px; }
.bq-item {
font-size: 14px; color: var(--body); line-height: 1.55; padding: 16px 18px; border-radius: 6px; display: flex; align-items: baseline; gap: 14px; transition: background 0.25s ease;
}
.bq-item:hover { background: rgba(14,26,42,0.04); }
.bq-num {
font-family: var(--fh); font-size: 14px; color: var(--orange); flex-shrink: 0;
}
@media (max-width: 900px), (pointer: coarse) {
  .cta-photo-bg { background-attachment: scroll; }
}
@media (max-width: 900px) {
  .nav-tier-links { display: none; }
  .content { padding: 40px 20px 60px; }
  .cta-photo { padding: 52px 20px; }
}
@media (max-width: 900px), (pointer: coarse) {
  .kv-photo-bg { background-attachment: scroll; }
}
@media (max-width: 900px) {
  .hero-deck { font-size: 15px; }
  .the-line { padding: 18px 20px; }
  .the-line-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .the-line-label { border-right: none; padding-right: 0; }
  .the-line-text { font-size: 15px; }
  .lane-proof { padding: 40px 20px; }
  .kv-photo { padding: 52px 20px; }
  .kv-quote { padding-top: 16px; }
  .kv-card { grid-template-columns: 1fr; gap: 24px; padding: 40px 28px; }
  .kv-attr { border-left: none; padding-left: 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.25); }
  .next { padding: 40px 20px 60px; }
  .next-cards { grid-template-columns: 1fr; }
  .platform-strip { padding: 20px; }
  .platform-inner { flex-direction: column; gap: 20px; }
  .dict-feature { grid-template-columns: 1fr; }
  .lane-dict, .lane-auxo { padding: 40px 20px; }
  .dict-feature { padding: 28px 24px; }
  .outcomes-strip { padding: 20px; }
  .outcomes-inner { flex-direction: column; gap: 20px; }
  .fs-steps { grid-template-columns: 1fr 1fr; }
  .lane-five-step { padding: 40px 20px; }
  .mandate-strip { padding: 20px; }
  .mandate-inner { flex-direction: column; gap: 20px; }
  .lane-board-q { padding: 40px 20px; }
}

/* ==================================================================== */
/* 22 · CONTACT                    */
/* ==================================================================== */

.loc-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-top: 40px;
      }
      @media (max-width: 900px) { .loc-grid { grid-template-columns: 1fr; } }

      /* nl-nl / nl-en contact: Zaltbommel stays the primary destination
         (2fr) with a smaller Plano card alongside (1fr) instead of an
         equal split or a plain text mention. Declared after the plain
         .loc-grid rule/query above at equal specificity, so it wins on
         desktop but the mobile query (same selector, later still) drops
         back to one column instead of squeezing a 2:1 ratio into a phone
         screen. */
      .loc-grid--emea-primary { grid-template-columns: 2fr 1fr; }
      @media (max-width: 900px) { .loc-grid--emea-primary { grid-template-columns: 1fr; } }

      .loc-card {
        background: white;
        border: 1px solid rgba(31,67,95,0.10);
        border-radius: 4px;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
      @media (max-width: 620px) { .loc-card { grid-template-columns: 1fr; } }

      /* The Plano card in .loc-grid--emea-primary only gets 1/3 of the
         section width, not enough for its own info/map side-by-side split
         without squeezing both. Stack info above map instead - this is
         the "brief" treatment for a secondary office, not the full
         two-column card the primary office gets. */
      .loc-card--compact { grid-template-columns: 1fr; }

      /* Wraps the secondary (Plano) card with a small "Andere vestigingen /
         Other locations" label above it. Grid items stretch to the row
         height by default, so this wrapper is already as tall as the
         Zaltbommel card next to it; margin-top: auto on the card (not the
         label) pushes the card itself to the bottom so its bottom edge
         lines up with Zaltbommel's, while the label stays pinned to the
         top of the column instead of floating at whatever height the
         card happens to be. */
      .loc-secondary { display: flex; flex-direction: column; height: 100%; }
      .loc-secondary-label {
        font-family: var(--lp-font-display);
        font-size: 13px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(31,67,95,0.5);
        margin-bottom: 12px;
      }
      .loc-secondary .loc-card { margin-top: auto; }

      .loc-info {
        padding: 28px 30px;
        display: flex;
        flex-direction: column;
        color: var(--lp-navy);
      }
      .loc-info .loc-name {
        font-family: var(--lp-font-display);
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        margin-bottom: 4px;
        color: var(--lp-navy);
      }
      .loc-info .loc-role {
        font-family: var(--lp-font-display);
        font-size: 14px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--lp-orange);
        margin-bottom: 22px;
      }
      .loc-info .loc-block {
        font-family: var(--lp-font-body);
        font-size: 14px;
        line-height: 1.55;
        color: rgba(31,67,95,0.85);
        margin-bottom: 18px;
      }
      .loc-info .loc-block a { color: var(--lp-orange); text-decoration: none; }
      .loc-info .loc-block a:hover { text-decoration: underline; }
      .loc-info .loc-label {
        font-family: var(--lp-font-display);
        font-size: 14px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(31,67,95,0.5);
        margin-bottom: 4px;
      }

      .loc-map {
        min-height: 300px;
        position: relative;
        background: #F0F2F5;
        overflow: hidden;
      }
      .loc-map iframe {
        width: 100%; height: 100%;
        border: 0; display: block;
        filter: grayscale(1) contrast(1.08);
      }
      /* ON2IT orange tint over de kaart */
      .loc-map::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(242,110,24,0.55) 0%, rgba(212,95,15,0.62) 100%);
        mix-blend-mode: multiply;
        pointer-events: none;
        z-index: 1;
      }
      /* Hover CTA: donkere overlay + oranje 'Get directions' button */
      .loc-map-cta {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        background: rgba(14,26,42,0.55);
        opacity: 0;
        transition: opacity 0.25s ease;
        z-index: 3;
      }
      .loc-map-cta:hover,
      .loc-map-cta:focus-visible { opacity: 1; }
      .loc-map:hover .loc-map-cta { opacity: 1; }

      .loc-map-cta-btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: var(--lp-orange);
        color: var(--lp-night);
        font-family: var(--lp-font-display);
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        padding: 14px 22px;
        border-radius: 3px;
        transform: translateY(8px);
        transition: transform 0.25s ease, background 0.15s;
        box-shadow: 0 8px 24px rgba(0,0,0,0.35);
      }
      .loc-map-cta-btn::after {
        content: '\2197';
        font-size: 15px;
      }
      .loc-map:hover .loc-map-cta-btn,
      .loc-map-cta:focus-visible .loc-map-cta-btn { transform: translateY(0); }
      .loc-map-cta-btn:hover { background: #d45e0e; }

      /* Op touch/mobiel: button is standaard zichtbaar in de rechteronderhoek */
      @media (hover: none) {
        .loc-map-cta {
          opacity: 1;
          background: transparent;
          align-items: flex-end;
          justify-content: flex-end;
          padding: 16px;
        }
        .loc-map-cta-btn { transform: none; }
      }

      /* Round 15 (about.html): dark-mode variant of .loc-card for the About
         page's "Where we operate" section, which sits on a dark lp-section.
         Reuses the same dark-card gradient/border as .lp-card elsewhere on
         this page. The Maps overlay in .loc-map is untouched and stays orange. */
      /* Round 16 (about.html): swap the gradient panel for the sitewide
         orange-corner-hover .card treatment (same component used for the
         four pillars/Vision & Mission), so "Where we operate" matches the
         rest of the page instead of its own one-off gradient. */
      .loc-card--dark {
        position: relative;
        background: rgba(255,255,255,0.04);
        border-color: rgba(255,255,255,0.08);
        transition: background 0.3s ease;
      }
      .loc-card--dark::before, .loc-card--dark::after {
        content: "";
        position: absolute;
        width: 14px; height: 14px;
        border-color: var(--orange); border-style: solid;
        opacity: 0;
        transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
        z-index: 2;
      }
      .loc-card--dark::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
      .loc-card--dark::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
      .loc-card--dark:hover { background: rgba(255,255,255,0.06); }
      .loc-card--dark:hover::before, .loc-card--dark:hover::after { opacity: 1; width: 22px; height: 22px; }
      .loc-card--dark .loc-info,
      .loc-card--dark .loc-info .loc-name { color: var(--lp-light); }
      .loc-card--dark .loc-info .loc-role { color: var(--lp-orange); }
      .loc-card--dark .loc-info .loc-block { color: rgba(255,255,255,0.75); }
      .loc-card--dark .loc-info .loc-block a { color: var(--lp-orange); }
      .loc-card--dark .loc-info .loc-label { color: rgba(255,255,255,0.5); }
    

      .legal-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-top: 40px;
      }
      @media (max-width: 900px) { .legal-grid { grid-template-columns: 1fr; } }

      .legal-card {
        position: relative;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 4px;
        padding: 28px 30px;
        transition: background 0.3s ease;
      }
      .legal-card::before, .legal-card::after {
        content: "";
        position: absolute;
        width: 14px; height: 14px;
        border-color: var(--lp-orange); border-style: solid;
        opacity: 0;
        transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
      }
      .legal-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
      .legal-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
      .legal-card:hover { background: rgba(255,255,255,0.06); }
      .legal-card:hover::before, .legal-card:hover::after { opacity: 1; width: 22px; height: 22px; }
      .legal-card .l-label, .contact-soc-callout .l-label {
        font-family: var(--lp-font-display);
        font-size: 14px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--lp-orange);
        margin-bottom: 12px;
      }
      .legal-card .l-title, .contact-soc-callout .l-title {
        font-family: var(--lp-font-display);
        font-size: 18px;
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        margin-bottom: 16px;
      }
      .legal-card .l-body, .contact-soc-callout .l-body {
        font-family: var(--lp-font-body);
        font-size: 14px;
        line-height: 1.6;
        color: rgba(255,255,255,0.72);
      }
      .legal-card .l-body a, .contact-soc-callout .l-body a {
        color: var(--lp-orange);
        text-decoration: none;
        word-break: break-all;
      }
      .legal-card .l-body a:hover, .contact-soc-callout .l-body a:hover { text-decoration: underline; }
      .legal-card .l-body code, .contact-soc-callout .l-body code {
        background: rgba(242,110,24,0.10);
        color: var(--lp-orange);
        padding: 2px 6px;
        border-radius: 2px;
        font-family: 'SF Mono', Menlo, monospace;
        font-size: 12px;
      }

      .legal-links {
        margin-top: 32px;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
      }
      .legal-links a {
        font-family: var(--lp-font-display);
        font-size: 14px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.25);
        padding: 12px 20px;
        border-radius: 3px;
        text-decoration: none;
        transition: background 0.15s, border-color 0.15s;
      }
      .legal-links a:hover {
        background: rgba(255,255,255,0.05);
        border-color: var(--lp-orange);
      }

/* ==================================================================== */
/* 23 · TRAINING COURSES                    */
/* ==================================================================== */

.tc-filter-bar {
        margin: 28px 0 24px;
        padding: 18px 22px;
        background: white;
        border: 1px solid rgba(31,67,95,0.10);
        border-radius: 14px;
        box-shadow: 0 1px 0 rgba(31,67,95,0.04), 0 12px 28px -16px rgba(31,67,95,0.18);
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr auto;
        gap: 18px;
        align-items: end;
      }
      @media (max-width: 800px) { .tc-filter-bar { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 500px) { .tc-filter-bar { grid-template-columns: 1fr; } }

      .tc-field { display: flex; flex-direction: column; gap: 7px; }
      .tc-label {
        color: var(--lp-orange);
      }
      .tc-input, .tc-select {
        font-family: var(--lp-font-body);
        font-size: 15px;
        padding: 12px 14px;
        border: 1px solid rgba(31,67,95,0.16);
        border-radius: 8px;
        background: white;
        color: var(--lp-navy);
        transition: border-color 0.15s, box-shadow 0.15s;
        width: 100%;
        appearance: none;
      }
      .tc-select {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23F26E18' d='M1 1l5 5 5-5'/></svg>");
        background-repeat: no-repeat;
        background-position: right 14px center;
        padding-right: 36px;
      }
      .tc-input::placeholder { color: rgba(11,20,40,0.4); }
      .tc-input:focus, .tc-select:focus {
        outline: none;
        border-color: var(--lp-orange);
        box-shadow: 0 0 0 3px rgba(242,110,24,0.12);
      }
      .tc-reset {
        font-family: var(--lp-font-display);
        font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--lp-orange);
        background: transparent;
        border: 1px solid rgba(242,110,24,0.3);
        padding: 12px 18px;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.15s;
        white-space: nowrap;
      }
      .tc-reset:hover { background: rgba(242,110,24,0.06); }

      .tc-meta-row {
        display: flex; justify-content: space-between; align-items: center;
        margin: 8px 4px 24px;
        color: rgba(11,20,40,0.55);
      }
      .tc-meta-row strong { color: var(--lp-orange); font-weight: 700; }

      .tc-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
      }
      @media (max-width: 900px) { .tc-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
      @media (max-width: 600px) { .tc-grid { grid-template-columns: 1fr; } }

      .tc-card {
        background: white;
        border: 1px solid rgba(31,67,95,0.10);
        border-radius: 14px;
        overflow: hidden;
        display: flex; flex-direction: column;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
        box-shadow: 0 1px 0 rgba(31,67,95,0.03), 0 4px 14px -8px rgba(31,67,95,0.10);
        text-decoration: none;
        color: inherit;
      }
      .tc-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 1px 0 rgba(31,67,95,0.04), 0 22px 40px -16px rgba(31,67,95,0.22);
        border-color: rgba(242,110,24,0.35);
      }
      .tc-card[hidden] { display: none; }

      /* Small vendor banner strip above each course card, real PANW imagery */
      .tc-card__cover {
        position: relative;
        height: 96px;
        overflow: hidden;
        background: #192842;
      }
      .tc-card__art {
        position: absolute; inset: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }
      .tc-card:hover .tc-card__art { transform: scale(1.04); }

      /* ALLE pills oranje — één style */
      .tc-card__badge {
        position: absolute;
        top: 14px; left: 14px;
        color: white;
        background: var(--lp-orange);
        padding: 6px 12px;
        border-radius: 100px;
        border: 1px solid rgba(255,255,255,0.18);
        box-shadow: 0 4px 12px -4px rgba(242,110,24,0.4);
      }

      .tc-card__badge--static {
        position: static;
        display: inline-block;
        align-self: flex-start;
        margin-bottom: 14px;
      }

      .tc-card__body {
        padding: 24px 26px 26px;
        display: flex; flex-direction: column; flex: 1;
      }
      .tc-card__title {
        font-family: var(--lp-font-display);
        font-size: 1.02rem;
        line-height: 1.35;
        color: var(--lp-navy);
        margin: 0 0 10px;
      }
      .tc-card__desc {
        font-family: var(--lp-font-body);
        font-size: 0.93rem;
        line-height: 1.55;
        color: rgba(11,20,40,0.7);
        margin: 0 0 18px;
        flex: 1;
      }
      .tc-card__foot {
        display: flex; justify-content: space-between; align-items: center;
        padding-top: 14px;
        border-top: 1px solid rgba(31,67,95,0.08);
      }
      .tc-card__meta {
        color: rgba(11,20,40,0.5);
        font-size: 12px !important;
        white-space: nowrap;
      }
      .tc-card__cta {
        font-family: var(--lp-font-display);
        font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
        color: var(--lp-orange);
        font-weight: 700;
        white-space: nowrap;
      }
      .tc-empty {
        grid-column: 1 / -1;
        padding: 60px 24px;
        text-align: center;
        font-family: var(--lp-font-body);
        color: rgba(11,20,40,0.55);
      }
    

      .tc-sched {
        margin-top: 48px;
        background: rgba(11,20,40,0.4);
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px;
        overflow: hidden;
      }
      .tc-sched-row {
        display: grid;
        grid-template-columns: minmax(220px, 280px) 1fr auto;
        gap: 28px;
        padding: 20px 28px;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        align-items: center;
        transition: background 0.15s;
      }
      .tc-sched-row:last-child { border-bottom: none; }
      .tc-sched-row:hover { background: rgba(31,67,95,0.18); }
      .tc-sched-date {
        color: var(--lp-orange);
      }
      .tc-sched-course {
        font-family: var(--lp-font-body);
        font-weight: 700;
        font-size: 14px;
        color: var(--lp-light);
        line-height: 1.4;
      }
      .tc-sched-cta {
        color: var(--lp-orange);
        text-decoration: none;
        white-space: nowrap;
      }
      @media (max-width: 700px) {
        .tc-sched-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 22px; }
        .tc-sched-cta { margin-top: 4px; }
      }

/* ==================================================================== */
/* 24 · RESOURCES                    */
/* ==================================================================== */

.rs-filter-bar {
        margin: 28px 0 24px; padding: 18px 22px; background: white; border: 1px solid rgba(31,67,95,0.10);
        border-radius: 14px; box-shadow: 0 1px 0 rgba(31,67,95,0.04), 0 12px 28px -16px rgba(31,67,95,0.18);
        display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 16px; align-items: end;
      }
      @media (max-width: 900px) { .rs-filter-bar { grid-template-columns: 1fr 1fr; } }
      @media (max-width: 500px) { .rs-filter-bar { grid-template-columns: 1fr; } }
      .rs-field { display: flex; flex-direction: column; gap: 7px; }
      .rs-label { color: var(--lp-orange); }
      .rs-input, .rs-select {
        font-family: var(--lp-font-body); font-size: 15px; padding: 12px 14px;
        border: 1px solid rgba(31,67,95,0.16); border-radius: 8px; background: white; color: var(--lp-navy);
        width: 100%; appearance: none; transition: border-color 0.15s, box-shadow 0.15s;
      }
      .rs-select { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23F26E18' d='M1 1l5 5 5-5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
      .rs-input:focus, .rs-select:focus { outline: none; border-color: var(--lp-orange); box-shadow: 0 0 0 3px rgba(242,110,24,0.12); }
      .rs-input::placeholder { color: rgba(11,20,40,0.4); }
      .rs-reset { font-family: var(--lp-font-display); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-orange); background: transparent; border: 1px solid rgba(242,110,24,0.3); padding: 12px 18px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
      .rs-reset:hover { background: rgba(242,110,24,0.06); }

      .rs-meta-row {
        display: flex; justify-content: space-between; align-items: center;
        margin: 8px 4px 24px;
        color: rgba(11,20,40,0.55);
      }
      .rs-meta-row strong { color: var(--lp-orange); font-weight: 700; }

      .rs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
      @media (max-width: 900px) { .rs-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
      @media (max-width: 600px) { .rs-grid { grid-template-columns: 1fr; } }

      .rs-card {
        position: relative;
        background: white; border: 1px solid rgba(31,67,95,0.10); border-radius: 4px;
        display: flex; flex-direction: column;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
        box-shadow: 0 1px 0 rgba(31,67,95,0.03), 0 4px 14px -8px rgba(31,67,95,0.10);
        text-decoration: none; color: inherit;
      }
      /* Two-corner orange bracket accent on hover, same treatment as .card
         in the Board-Brief / Zero Trust Dictionary card family. */
      .rs-card::before, .rs-card::after {
        content: ""; position: absolute; width: 14px; height: 14px;
        border-color: var(--lp-orange); border-style: solid; opacity: 0;
        transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
      }
      .rs-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
      .rs-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
      .rs-card:hover::before, .rs-card:hover::after { opacity: 1; width: 22px; height: 22px; }
      .rs-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -16px rgba(31,67,95,0.22); border-color: rgba(242,110,24,0.35); }
      .rs-card:hover .rs-card__art { transform: scale(1.05); }
      .rs-card[hidden] { display: none; }

      .rs-card__cover {
        position: relative; aspect-ratio: 16 / 9;
        background: linear-gradient(135deg, #1F435F 0%, #192842 100%);
        border-radius: 4px 4px 0 0; overflow: hidden;
      }
      .rs-card__cover::before {
        content: ''; position: absolute; inset: 0;
        background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
        background-size: 32px 32px; pointer-events: none;
      }
      .rs-card__cover--whitepaper::after  { content: ''; position: absolute; top: -30%; right: -15%; width: 70%; height: 160%; background: radial-gradient(ellipse, rgba(242,110,24,0.18), transparent 60%); pointer-events: none; }
      .rs-card__cover--datasheet::after   { content: ''; position: absolute; bottom: -40%; left: -15%; width: 80%; height: 180%; background: radial-gradient(ellipse, rgba(242,110,24,0.14), transparent 60%); pointer-events: none; }
      .rs-card__cover--infographic::after { content: ''; position: absolute; top: -30%; left: -20%; width: 80%; height: 180%; background: radial-gradient(ellipse, rgba(242,110,24,0.14), transparent 60%); pointer-events: none; }
      .rs-card__cover--checklist::after   { content: ''; position: absolute; top: -20%; right: -25%; width: 75%; height: 170%; background: radial-gradient(ellipse, rgba(242,110,24,0.16), transparent 60%); pointer-events: none; }
      .rs-card__art { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 0.5s ease; }

      .rs-card__badge {
        position: absolute; top: 14px; left: 14px;
        color: white; background: var(--lp-orange); padding: 6px 12px; border-radius: 100px;
        border: 1px solid rgba(255,255,255,0.18); box-shadow: 0 4px 12px -4px rgba(242,110,24,0.4);
        z-index: 2;
      }
      .rs-card__type {
        display: flex; align-items: center; gap: 6px;
        color: var(--lp-orange); font-weight: 700; margin-bottom: 10px;
      }
      .rs-card__star { font-size: 13px; letter-spacing: 0; }
      .rs-card__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
      .rs-card__title { font-family: var(--lp-font-display); font-size: 1.15rem; line-height: 1.3; color: var(--lp-navy); text-transform: uppercase; margin: 0 0 10px; }
      .rs-card__desc  { font-family: var(--lp-font-body); font-size: 0.92rem; line-height: 1.55; color: rgba(11,20,40,0.7); margin: 0 0 18px; flex: 1; }
      .rs-card__foot  { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid rgba(31,67,95,0.08); }
      .rs-card__meta  { color: rgba(11,20,40,0.5); font-size: 12px; }
      .rs-card__cta   { font-family: var(--lp-font-display); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-orange); font-weight: 700; }
      .rs-empty       { grid-column: 1 / -1; padding: 60px 24px; text-align: center; font-family: var(--lp-font-body); color: rgba(11,20,40,0.55); }


      /* Library access modal, opened when a locked visitor clicks a resource card */
      .lib-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; }
      .lib-modal[hidden] { display: none; }
      .lib-modal__backdrop {
        position: absolute; inset: 0; background: rgba(15,26,42,0.45); backdrop-filter: blur(3px);
        opacity: 0; transition: opacity 0.2s ease;
      }
      .lib-modal__panel {
        position: relative; z-index: 1; width: 100%; max-width: 480px; max-height: calc(100vh - 48px); overflow-y: auto;
        background: var(--lp-light); border-radius: 10px;
        padding: 32px; box-shadow: 0 30px 60px -20px rgba(14,26,42,0.35);
        opacity: 0; transform: translateY(12px) scale(0.98); transition: opacity 0.2s ease, transform 0.2s ease;
      }
      .lib-modal.is-open .lib-modal__backdrop { opacity: 1; }
      .lib-modal.is-open .lib-modal__panel { opacity: 1; transform: translateY(0) scale(1); }
      .lib-modal__close {
        position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%;
        background: rgba(31,67,95,0.08); border: none; color: var(--lp-navy);
        font-size: 18px; line-height: 28px; text-align: center; cursor: pointer; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
      }
      .lib-modal__close:hover { background: rgba(31,67,95,0.16); }
      .lib-modal__badge {
        display: inline-flex; align-items: center; gap: 8px; color: var(--lp-orange); margin-bottom: 8px;
      }
      .lib-modal__title { font-family: var(--lp-font-display); font-size: 1.3rem; color: var(--lp-navy); margin: 0 0 8px; line-height: 1.3; }
      .lib-modal__title em { color: var(--lp-orange); font-style: normal; }
      .lib-modal__desc { font-family: var(--lp-font-body); font-size: 0.92rem; color: rgba(11,20,40,0.65); line-height: 1.55; margin: 0 0 20px; }
      .lib-modal__form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .lib-modal__input {
        padding: 12px 14px; border: 1px solid rgba(31,67,95,0.2); background: #fff;
        color: var(--lp-navy); font-family: var(--lp-font-body); font-size: 14px; border-radius: 6px; outline: none;
      }
      .lib-modal__input:focus { border-color: var(--lp-orange); }
      .lib-modal__input--full { grid-column: 1 / 3; }
      .lib-modal__consent {
        grid-column: 1 / 3; display: flex; gap: 10px; font-family: var(--lp-font-body); font-size: 0.82rem;
        color: rgba(11,20,40,0.65); line-height: 1.5; cursor: pointer; padding: 4px 0;
      }
      .lib-modal__consent input { margin-top: 3px; accent-color: var(--lp-orange); cursor: pointer; }
      .lib-modal__submit {
        grid-column: 1 / 3; background: var(--lp-orange); color: var(--lp-night); font-family: var(--lp-font-display);
        font-size: 14px; letter-spacing: 0.10em; text-transform: uppercase; padding: 12px 22px; border: none;
        border-radius: 6px; cursor: pointer; font-weight: 700;
      }
      .lib-modal__submit:disabled { opacity: 0.6; cursor: not-allowed; }
      .lib-modal__fine { font-family: var(--lp-font-body); font-size: 0.78rem; color: rgba(11,20,40,0.55); margin: 16px 0 0; }
      .lib-modal__fine a { color: var(--lp-orange); }
      @media (max-width: 560px) { .lib-modal__form { grid-template-columns: 1fr; } .lib-modal__input, .lib-modal__input--full, .lib-modal__consent, .lib-modal__submit { grid-column: 1 / 2 !important; } }

/* ==================================================================== */
/* 25 · EVENTS                    */
/* ==================================================================== */

.ev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
      @media (max-width: 900px) { .ev-grid { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 600px) { .ev-grid { grid-template-columns: 1fr; } }
      .ev-card {
        background: white; border: 1px solid rgba(31,67,95,0.10); border-radius: 14px; overflow: hidden;
        display: flex; flex-direction: column;
        transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
        box-shadow: 0 1px 0 rgba(31,67,95,0.03), 0 4px 14px -8px rgba(31,67,95,0.10);
        text-decoration: none; color: inherit;
      }
      .ev-card:hover { transform: translateY(-4px); box-shadow: 0 22px 40px -16px rgba(31,67,95,0.22); border-color: rgba(242,110,24,0.35); }
      .ev-card__cover {
        position: relative; aspect-ratio: 4 / 3;
        background: linear-gradient(135deg, #1F435F 0%, #192842 100%);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: 28px 32px; overflow: hidden;
      }
      .ev-card__cover::before {
        content: ''; position: absolute; inset: 0;
        background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
        background-size: 32px 32px;
      }
      .ev-card__cover::after {
        content: ''; position: absolute; top: -40%; right: -25%; width: 80%; height: 180%;
        background: radial-gradient(ellipse, rgba(242,110,24,0.18), transparent 60%);
        pointer-events: none;
      }
      .ev-card__cover-tag {
        position: relative; z-index: 1;
        font-family: var(--lp-font-display); font-size: 14px; letter-spacing: 0.20em; text-transform: uppercase;
        color: var(--lp-orange); margin-bottom: 14px; text-align: center;
      }
      .ev-card__cover-title {
        position: relative; z-index: 1;
        font-family: var(--lp-font-display); font-size: clamp(1.3rem, 2.2vw, 1.8rem);
        line-height: 1.1; color: white; text-transform: uppercase; letter-spacing: 0.01em;
        margin: 0; text-align: center; max-width: 100%;
      }
      .ev-card__body { padding: 26px 28px 28px; display: flex; flex-direction: column; flex: 1; gap: 10px; }
      .ev-card__meta-row {
        display: inline-flex; align-items: center; gap: 10px;
        font-family: var(--lp-font-body); font-size: 0.95rem; color: var(--lp-navy);
      }
      .ev-card__meta-row svg { flex-shrink: 0; }
      .ev-card__desc { font-family: var(--lp-font-body); font-size: 0.92rem; line-height: 1.55; color: rgba(11,20,40,0.7); margin: 8px 0 0; flex: 1; }
      .ev-card__cta { font-family: var(--lp-font-display); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lp-orange); font-weight: 700; padding-top: 16px; margin-top: 8px; border-top: 1px solid rgba(31,67,95,0.08); }

      /* Empty state for .ev-grid when there are no upcoming events (e.g. the
         AI Hiring Event cards were pulled after cancellation). Spans the
         full grid width like .rs-empty on the resources page, but with the
         same card chrome as .ev-card/.et-card instead of bare text. */
      .ev-empty {
        grid-column: 1 / -1;
        background: white; border: 1px solid rgba(31,67,95,0.10); border-radius: 14px;
        padding: 56px 32px; text-align: center;
        display: flex; flex-direction: column; align-items: center; gap: 14px;
        box-shadow: 0 1px 0 rgba(31,67,95,0.03), 0 4px 14px -8px rgba(31,67,95,0.10);
      }
      .ev-empty__icon {
        width: 48px; height: 48px; border-radius: 12px;
        background: rgba(242,110,24,0.08); border: 1px solid rgba(242,110,24,0.18);
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--lp-orange);
      }
      .ev-empty__title { font-family: var(--lp-font-display); font-size: 1.2rem; color: var(--lp-navy); text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }
      .ev-empty__desc { font-family: var(--lp-font-body); font-size: 0.95rem; line-height: 1.6; color: rgba(11,20,40,0.65); max-width: 560px; margin: 0; }

      /* === Live Threat Talks card, animated broadcast UI === */
      .tt-cover { background: linear-gradient(135deg, #1F435F 0%, #192842 100%); padding: 0; overflow: hidden; }
      .tt-grid {
        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: 28px 28px;
      }
      .tt-glow {
        position: absolute; top: -40%; right: -25%;
        width: 90%; height: 180%;
        background: radial-gradient(ellipse, rgba(242,110,24,0.22), transparent 60%);
        pointer-events: none;
        animation: tt-glow-shift 8s ease-in-out infinite alternate;
      }
      @keyframes tt-glow-shift {
        0%   { transform: translate(0, 0); opacity: 0.85; }
        100% { transform: translate(-12%, 8%); opacity: 1; }
      }

      .tt-live-badge {
        position: absolute; top: 16px; right: 16px;
        display: inline-flex; align-items: center; gap: 8px;
        background: rgba(0,0,0,0.45);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,0.15);
        padding: 6px 12px; border-radius: 100px;
        color: white;
        z-index: 3;
      }
      .tt-live-dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: #FF3B30;
        box-shadow: 0 0 0 0 rgba(255,59,48,0.8);
        animation: tt-pulse 1.8s infinite;
      }
      @keyframes tt-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(255,59,48,0.6); transform: scale(1); }
        70%  { box-shadow: 0 0 0 10px rgba(255,59,48,0); transform: scale(1.1); }
        100% { box-shadow: 0 0 0 0 rgba(255,59,48,0); transform: scale(1); }
      }

      .tt-waveform {
        position: absolute; left: 0; right: 0; bottom: 0;
        display: flex; align-items: flex-end; justify-content: space-between;
        height: 55%; padding: 0 16px 12px;
        gap: 3px;
        opacity: 0.65;
      }
      .tt-bar {
        flex: 1;
        background: linear-gradient(180deg, var(--lp-orange) 0%, rgba(242,110,24,0.15) 100%);
        border-radius: 2px 2px 0 0;
        transform-origin: bottom center;
        animation: tt-wave 1.4s ease-in-out infinite;
      }
      /* Verschillende heights + delays per bar voor levendige golf */
      .tt-bar:nth-child(1)  { height: 18%; animation-delay: 0.00s; }
      .tt-bar:nth-child(2)  { height: 32%; animation-delay: 0.05s; }
      .tt-bar:nth-child(3)  { height: 55%; animation-delay: 0.10s; }
      .tt-bar:nth-child(4)  { height: 38%; animation-delay: 0.15s; }
      .tt-bar:nth-child(5)  { height: 65%; animation-delay: 0.20s; }
      .tt-bar:nth-child(6)  { height: 80%; animation-delay: 0.25s; }
      .tt-bar:nth-child(7)  { height: 45%; animation-delay: 0.30s; }
      .tt-bar:nth-child(8)  { height: 72%; animation-delay: 0.35s; }
      .tt-bar:nth-child(9)  { height: 90%; animation-delay: 0.40s; }
      .tt-bar:nth-child(10) { height: 60%; animation-delay: 0.45s; }
      .tt-bar:nth-child(11) { height: 75%; animation-delay: 0.40s; }
      .tt-bar:nth-child(12) { height: 50%; animation-delay: 0.35s; }
      .tt-bar:nth-child(13) { height: 85%; animation-delay: 0.30s; }
      .tt-bar:nth-child(14) { height: 40%; animation-delay: 0.25s; }
      .tt-bar:nth-child(15) { height: 68%; animation-delay: 0.20s; }
      .tt-bar:nth-child(16) { height: 30%; animation-delay: 0.15s; }
      .tt-bar:nth-child(17) { height: 52%; animation-delay: 0.10s; }
      .tt-bar:nth-child(18) { height: 22%; animation-delay: 0.05s; }
      .tt-bar:nth-child(19) { height: 45%; animation-delay: 0.00s; }
      .tt-bar:nth-child(20) { height: 28%; animation-delay: 0.05s; }
      .tt-bar:nth-child(21) { height: 18%; animation-delay: 0.10s; }
      @keyframes tt-wave {
        0%, 100% { transform: scaleY(0.45); opacity: 0.75; }
        50%      { transform: scaleY(1);    opacity: 1;    }
      }
      @media (prefers-reduced-motion: reduce) {
        .tt-bar, .tt-live-dot, .tt-glow { animation: none; }
      }

      .tt-content {
        position: absolute; left: 0; right: 0; top: 50%;
        transform: translateY(-50%);
        text-align: center; padding: 0 28px;
        z-index: 2;
      }
      .tt-cover .ev-card__cover-tag,
      .tt-cover .ev-card__cover-title {
        position: relative; z-index: 2;
      }
      /* Drop het centreren van de basic ev-card__cover layout, wij hebben nu absolute positioning */
      .tt-cover { display: block; }

    

      .et-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px; }
      @media (max-width: 1000px) { .et-grid { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 540px)  { .et-grid { grid-template-columns: 1fr; } }
      .et-card {
        background: white; border: 1px solid rgba(31,67,95,0.10); border-radius: 14px; padding: 28px 26px;
        display: flex; flex-direction: column; gap: 14px;
        box-shadow: 0 1px 0 rgba(31,67,95,0.03), 0 4px 14px -8px rgba(31,67,95,0.10);
        transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
      }
      .et-card:hover { transform: translateY(-3px); border-color: rgba(242,110,24,0.35); box-shadow: 0 18px 32px -16px rgba(31,67,95,0.18); }
      .et-card__icon {
        width: 44px; height: 44px; border-radius: 10px;
        background: rgba(242,110,24,0.08); border: 1px solid rgba(242,110,24,0.18);
        display: inline-flex; align-items: center; justify-content: center;
        color: var(--lp-orange);
      }
      .et-card__title { font-family: var(--lp-font-display); font-size: 1.1rem; color: var(--lp-navy); margin: 0; line-height: 1.3; }
      .et-card__desc  { font-family: var(--lp-font-body); font-size: 0.9rem; line-height: 1.55; color: rgba(11,20,40,0.7); margin: 0; }
      .et-card__list  { color: rgba(11,20,40,0.5); margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(31,67,95,0.08); }

/* ==================================================================== */
/* 26 · CREDITS PAGE                    */
/* ==================================================================== */

.credits-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .credits-hero-copy { max-width: 620px; }
  .credits-hero-visual { position: relative; }
  .credits-hero-visual img { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45)) drop-shadow(0 8px 16px rgba(242,110,24,0.15)); }
  @media (max-width: 900px) {
    .credits-hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .credits-hero-copy { max-width: 100%; }
    .credits-hero-visual img { max-width: 380px; }
  }

.cr-step-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
  .cr-step-card { background: rgba(31,67,95,0.03); border: 1px solid rgba(31,67,95,0.12); border-radius: 4px; padding: 32px; }
  .cr-step-card-num { font-family: var(--lp-font-display); font-size: 14px; color: var(--lp-orange); letter-spacing: 0.1em; margin-bottom: 16px; }
  .cr-step-card h3 { font-family: var(--lp-font-display); font-size: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--lp-navy); line-height: 1.1; margin: 0 0 14px; }
  .cr-step-card p { font-family: var(--lp-font-body); font-size: 14px; color: var(--lp-navy); opacity: 0.72; line-height: 1.65; margin: 0; }
  @media (max-width: 900px) {
    .cr-step-cards { grid-template-columns: 1fr; }
  }

#packages.lp-section-navy { background: var(--lp-night); }
  .cr-pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 8px; align-items: stretch; }
  .cr-pkg-card { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--lp-night); border: 1px solid var(--lp-border); border-radius: 8px; padding: 36px 32px; }
  .cr-pkg-card::before { content: ""; position: absolute; top: -60%; left: 50%; transform: translateX(-50%); width: 140%; height: 260px; background: radial-gradient(ellipse at center, rgba(31,67,95,0.65) 0%, rgba(31,67,95,0) 72%); z-index: -1; pointer-events: none; }
  .cr-pkg-card--featured { border-color: var(--lp-orange); background: var(--lp-night); }
  .cr-pkg-card--featured::before { background: radial-gradient(ellipse at center, rgba(242,110,24,0.4) 0%, rgba(242,110,24,0) 72%); }
  .cr-pkg-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
  .cr-pkg-name { font-family: var(--lp-font-display); font-weight: 700; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--lp-light); }
  .cr-pkg-badge { font-family: var(--lp-font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--lp-night); background: var(--lp-orange); padding: 4px 10px; border-radius: 3px; }
  .cr-pkg-desc { font-size: 0.92rem; line-height: 1.55; color: var(--lp-light); opacity: 0.72; margin: 0 0 28px; min-height: 44px; }
  .cr-pkg-price { font-family: var(--lp-font-display); font-size: 2.6rem; line-height: 1; color: var(--lp-light); margin-bottom: 6px; }
  .cr-pkg-unit { font-size: 0.9rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.55; margin-left: 8px; }
  .cr-pkg-meta { font-size: 0.82rem; color: var(--lp-light); opacity: 0.6; margin: 0 0 24px; }
  .cr-pkg-cta { display: block; text-align: center; background: var(--lp-orange); color: var(--lp-night); font-family: var(--lp-font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 20px; border-radius: 4px; text-decoration: none; transition: background 0.2s; }
  .cr-pkg-cta:hover { background: var(--lp-orange-glow, var(--lp-orange)); }
  .cr-pkg-divider { border-top: 1px solid var(--lp-border-light); margin: 28px 0 20px; }
  .cr-pkg-includes-label { color: var(--lp-light); opacity: 0.55; margin-bottom: 14px; }
  .cr-pkg-checklist { display: grid; gap: 12px; margin-top: auto; }
  .cr-pkg-check { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; line-height: 1.45; color: var(--lp-light); opacity: 0.85; }
  .cr-pkg-check-mark { color: var(--lp-orange); font-weight: 700; flex-shrink: 0; }
  .cr-pkg-note { margin-top: 28px; font-size: 0.9rem; color: var(--lp-light); opacity: 0.65; }
  .cr-pkg-note a { color: var(--lp-orange); }
  @media (max-width: 900px) {
    .cr-pkg-grid { grid-template-columns: 1fr; }
    .cr-pkg-desc { min-height: 0; }
  }

/* ===== Filter bar (no border-heavy, one clean shape) ===== */
      /* Sentinel voor IntersectionObserver, detecteert wanneer filter sticky wordt */
      .cr-filter-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }

      .cr-filter-bar {
        position: sticky;
        top: 84px;              /* onder preview-bar / main nav */
        z-index: 20;
        margin: 32px 0 20px; padding: 16px 20px;
        background: white;
        border: 1px solid rgba(31,67,95,0.08);
        border-radius: 12px;
        box-shadow: 0 4px 16px -8px rgba(31,67,95,0.10);
        display: grid; grid-template-columns: 1.4fr 0.9fr auto auto; gap: 14px; align-items: end;
        transition: background 0.25s, box-shadow 0.25s, border-color 0.25s;
      }
      /* Wanneer sticky: semi-transparant oranje glassmorphism */
      .cr-filter-bar.is-stuck {
        background: rgba(242,110,24,0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-color: rgba(255,255,255,0.25);
        box-shadow: 0 12px 36px -8px rgba(212,95,15,0.35), 0 0 0 1px rgba(255,255,255,0.10);
      }
      .cr-filter-bar.is-stuck .cr-label {
        color: #fff;
        opacity: 0.95;
      }
      .cr-filter-bar.is-stuck .cr-input,
      .cr-filter-bar.is-stuck .cr-select {
        background: rgba(255,255,255,0.95);
        color: var(--lp-navy);
        border-color: rgba(255,255,255,0.4);
      }
      .cr-filter-bar.is-stuck .cr-input::placeholder { color: rgba(31,67,95,0.5); }
      .cr-filter-bar.is-stuck .cr-input:focus,
      .cr-filter-bar.is-stuck .cr-select:focus {
        background: #fff;
        border-color: #fff;
        box-shadow: 0 0 0 3px rgba(255,255,255,0.25);
      }
      .cr-filter-bar.is-stuck .cr-sort-btn {
        color: #fff;
        border-color: rgba(255,255,255,0.35);
        background: rgba(255,255,255,0.08);
      }
      .cr-filter-bar.is-stuck .cr-sort-btn:hover {
        background: rgba(255,255,255,0.20);
        border-color: rgba(255,255,255,0.55);
      }
      .cr-filter-bar.is-stuck .cr-reset {
        color: #fff;
        border-color: rgba(255,255,255,0.35);
        background: rgba(255,255,255,0.08);
      }
      .cr-filter-bar.is-stuck .cr-reset:hover {
        background: rgba(255,255,255,0.20);
        border-color: rgba(255,255,255,0.55);
      }
      @media (max-width: 960px) { .cr-filter-bar { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .cr-filter-bar { grid-template-columns: 1fr; } }
      .cr-field { display: flex; flex-direction: column; gap: 5px; }
      .cr-label {
        color: var(--lp-orange);
      }
      .cr-input, .cr-select {
        font-family: var(--lp-font-body); font-size: 15px;
        padding: 10px 14px; border-radius: 6px;
        border: 1px solid rgba(31,67,95,0.15); color: var(--lp-navy);
        background: rgba(31,67,95,0.03); outline: none; width: 100%;
      }
      .cr-input:focus, .cr-select:focus { border-color: var(--lp-orange); background: white; }
      .cr-reset {
        font-family: var(--lp-font-display); font-size: 14px;
        letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--lp-navy); background: transparent;
        border: 1px solid rgba(31,67,95,0.15); padding: 11px 18px;
        border-radius: 6px; cursor: pointer; white-space: nowrap; height: fit-content;
        transition: background 0.15s, border-color 0.15s;
      }
      .cr-reset:hover { background: rgba(31,67,95,0.06); border-color: rgba(31,67,95,0.25); }
      .cr-count {
        color: rgba(31,67,95,0.55); margin: 0 0 18px;
      }

      /* ===== Grid ===== */
      .cr-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 14px;
      }

      /* ===== Card. LEAN, no unnecessary borders ===== */
      .cr-card {
        position: relative;
        display: flex; flex-direction: column;
        background: white;
        border: 1px solid rgba(31,67,95,0.08);
        border-radius: 4px;
        padding: 18px 20px 16px;
        text-decoration: none;
        transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
      }
      /* Two-corner orange bracket accent on hover, same treatment as the
         resource-library / Zero Trust Dictionary card family. */
      .cr-card::before, .cr-card::after {
        content: ""; position: absolute; width: 14px; height: 14px;
        border-color: var(--lp-orange); border-style: solid; opacity: 0;
        transition: opacity 0.3s ease, width 0.3s ease, height 0.3s ease;
      }
      .cr-card::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
      .cr-card::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
      .cr-card:hover::before, .cr-card:hover::after { opacity: 1; width: 22px; height: 22px; }
      .cr-card:hover {
        border-color: var(--lp-border-orange);
        transform: translateY(-2px);
        box-shadow: 0 12px 24px -8px rgba(14,26,42,0.08);
      }

      .cr-card__head {
        display: flex; justify-content: space-between; align-items: flex-start;
        gap: 10px; margin-bottom: 12px;
      }
      .cr-card__icon {
        display: inline-flex; align-items: center; justify-content: center;
        width: 28px; height: 28px;
        flex-shrink: 0;
        border-radius: 6px;
        background: rgba(242,110,24,0.10);
        color: var(--lp-orange);
        margin-right: 4px;
      }
      .cr-card__icon svg { width: 15px; height: 15px; }
      .cr-card__cat {
        color: var(--lp-orange); font-weight: 600;
        align-self: center;
        flex: 1;
      }

      /* Cost badge, the star element */
      .cr-cost {
        display: inline-flex; align-items: baseline; gap: 4px;
        font-family: var(--lp-font-display);
        background: var(--lp-navy); color: #fff;
        padding: 5px 10px; border-radius: 4px;
        white-space: nowrap; flex-shrink: 0;
      }
      .cr-cost-num { font-size: 14px; font-weight: 700; }
      .cr-cost-lbl { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
      .cr-cost--custom {
        background: rgba(31,67,95,0.06); color: var(--lp-navy);
        border: 1px solid rgba(31,67,95,0.15);
        font-family: var(--lp-font-display); font-size: 14px; font-weight: 700;
        letter-spacing: 0.10em; text-transform: uppercase;
        padding: 6px 12px;  /* iets meer padding om visueel te matchen met de num-lbl variant */
      }
      .cr-cost--hourly {
        background: rgba(242,110,24,0.10); color: var(--lp-orange);
        border: 1px solid rgba(242,110,24,0.3);
      }
      .cr-cost--hourly .cr-cost-num { font-size: 13px; letter-spacing: 0.02em; }

      .cr-card__title {
        font-family: var(--lp-font-display); font-weight: 700;
        font-size: 15px; line-height: 1.25;
        text-transform: uppercase; letter-spacing: 0.02em;
        color: var(--lp-navy); margin: 0 0 8px;
      }
      .cr-card__body {
        font-family: var(--lp-font-body); font-size: 13px; line-height: 1.5;
        color: rgba(31,67,95,0.72); margin: 0 0 14px; flex: 1;
      }

      /* Tags, no border-top divider, just tag chips floating */
      .cr-card__tags {
        display: flex; gap: 5px; flex-wrap: wrap;
        margin-top: auto;
      }
      .cr-tag {
        font-family: var(--lp-font-body); font-size: 10.5px;
        color: rgba(31,67,95,0.55);
        background: rgba(31,67,95,0.05);
        padding: 3px 10px; border-radius: 100px;
        transition: background 0.15s, color 0.15s, transform 0.15s;
        cursor: pointer;
        border: none;
        display: inline-block;
      }
      .cr-tag:hover {
        background: rgba(242,110,24,0.20);
        color: var(--lp-orange);
        transform: translateY(-1px);
      }
      .cr-tag.is-match {
        background: rgba(242,110,24,0.15);
        color: var(--lp-orange);
        font-weight: 600;
      }
      .cr-tag.is-active {
        background: var(--lp-orange);
        color: #fff;
        font-weight: 600;
      }

      .cr-empty {
        text-align: center; padding: 60px 20px;
        color: rgba(31,67,95,0.55); font-family: var(--lp-font-body); font-size: 15px;
        display: none;
      }
      .cr-empty.is-visible { display: block; }
      /* Section headers (alleen zichtbaar bij Recommended + no filter) */
      .cr-section-header {
        display: none;
        grid-column: 1 / -1;
        align-items: baseline;
        gap: 14px;
        padding: 20px 4px 8px;
        margin-top: 8px;
        border-bottom: 1px solid rgba(31,67,95,0.10);
      }
      .cr-section-header:first-of-type { margin-top: 0; }
      .cr-section-title {
        font-family: var(--lp-font-display); font-weight: 700;
        font-size: 18px; letter-spacing: 0.03em; text-transform: uppercase;
        color: var(--lp-navy);
      }
      .cr-section-count {
        color: rgba(31,67,95,0.5);
      }
      .cr-grid.is-grouped .cr-section-header { display: flex; }
      /* ===== Sort icon-button + menu ===== */
      .cr-sort-wrap { position: relative; height: fit-content; }
      .cr-sort-btn {
        display: inline-flex; align-items: center; gap: 8px;
        font-family: var(--lp-font-display); font-size: 14px;
        letter-spacing: 0.10em; text-transform: uppercase;
        color: var(--lp-navy); background: transparent;
        border: 1px solid rgba(31,67,95,0.15);
        padding: 10px 14px; border-radius: 6px;
        cursor: pointer; white-space: nowrap;
        transition: background 0.15s, border-color 0.15s;
      }
      .cr-sort-btn:hover { background: rgba(31,67,95,0.05); border-color: rgba(31,67,95,0.25); }
      .cr-sort-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
      .cr-sort-btn .cr-sort-chev { width: 12px; height: 12px; opacity: 0.6; transition: transform 0.2s; }
      .cr-sort-wrap.is-open .cr-sort-btn .cr-sort-chev { transform: rotate(180deg); }
      .cr-sort-wrap.is-open .cr-sort-btn { background: rgba(31,67,95,0.05); border-color: var(--lp-orange); }

      .cr-sort-menu {
        position: absolute; top: calc(100% + 6px); right: 0;
        background: white; border: 1px solid rgba(31,67,95,0.12);
        border-radius: 8px; padding: 6px;
        box-shadow: 0 12px 32px rgba(14,26,42,0.14);
        display: none; flex-direction: column; gap: 2px;
        min-width: 220px; z-index: 20;
      }
      .cr-sort-wrap.is-open .cr-sort-menu { display: flex; }
      .cr-sort-opt {
        text-align: left;
        font-family: var(--lp-font-body); font-size: 14px;
        padding: 8px 12px; border-radius: 4px;
        border: none; background: transparent; color: var(--lp-navy);
        cursor: pointer; white-space: nowrap;
      }
      .cr-sort-opt:hover { background: rgba(31,67,95,0.06); }
      .cr-sort-opt.is-active { background: rgba(242,110,24,0.10); color: var(--lp-orange); font-weight: 600; }

.cr-faq-list {
    max-width: 820px; margin: 40px auto 0;
    display: grid; gap: 1px;
    background: rgba(31,67,95,0.10);
    border: 1px solid rgba(31,67,95,0.10);
    border-radius: 8px;
    overflow: hidden;
  }
  .cr-faq-item {
    background: white;
    padding: 18px 24px;
    color: var(--lp-navy);
  }
  .cr-faq-item summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 36px;
    font-family: var(--lp-font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: var(--lp-navy);
    text-transform: uppercase;
  }
  .cr-faq-item summary::-webkit-details-marker { display: none; }
  .cr-faq-item summary::after {
    content: '+';
    position: absolute; right: 0; top: 50%;
    transform: translateY(-50%);
    font-family: var(--lp-font-display);
    font-size: 24px; color: var(--lp-orange);
    font-weight: 300; transition: transform 0.2s;
  }
  .cr-faq-item[open] summary { margin-bottom: 12px; }
  .cr-faq-item[open] summary::after { content: '\2212'; }
  .cr-faq-a {
    font-family: var(--lp-font-body);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--lp-navy);
    opacity: 0.75;
    margin: 0;
  }

/* Blog-content data table. Same card language as .cr-faq-list/.pp-tldr -
   navy header row, thin dividers, orange hover - for markdown tables
   pasted into blog posts. Previously these rendered with bare browser
   table defaults (no border, no header styling, no zebra rows). */
.cr-table-wrap {
  overflow-x: auto;
  margin: var(--s-6) 0;
  border: 1px solid rgba(31,67,95,0.12);
  border-radius: 8px;
}
.cr-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-family: var(--lp-font-body);
  font-size: 0.92rem;
}
.cr-table thead th {
  background: var(--lp-navy);
  color: #fff;
  font-family: var(--lp-font-display);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 14px 18px;
}
.cr-table tbody td {
  padding: 14px 18px;
  color: var(--lp-navy);
  border-bottom: 1px solid rgba(31,67,95,0.10);
  vertical-align: top;
  line-height: 1.55;
}
.cr-table tbody tr:last-child td { border-bottom: none; }
.cr-table tbody tr:nth-child(even) { background: rgba(31,67,95,0.03); }
.cr-table tbody tr:hover { background: rgba(242,110,24,0.05); }

/* Badge variant: status-tag tables (e.g. capability mapping matrices)
   that use .id/.pa/.crit/.tag cells to flag severity or delivery state. */
.cr-table--badges td.id { font-family: var(--lp-font-mono); color: var(--lp-orange); font-weight: 700; white-space: nowrap; }
.cr-table--badges td.pa { font-weight: 600; }
.cr-table--badges .crit {
  display: inline-block; padding: 2px 9px; border-radius: 4px;
  font-family: var(--lp-font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(214,69,45,0.12); color: #d6452d;
}
.cr-table--badges .tag {
  display: inline-block; padding: 3px 11px; border-radius: 20px;
  font-family: var(--lp-font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}
.cr-table--badges .tag.delivers { background: rgba(34,140,90,0.12); color: #1c8a56; }
.cr-table--badges .tag.partial { background: rgba(242,110,24,0.12); color: var(--lp-orange); }
.cr-table--badges .tag.advise { background: rgba(31,67,95,0.10); color: var(--lp-navy); }
.cr-table--badges .tag.gap { background: rgba(31,67,95,0.10); color: var(--lp-navy); }
.cr-table--badges .high {
  display: inline-block; padding: 2px 9px; border-radius: 4px;
  font-family: var(--lp-font-display); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(242,110,24,0.12); color: var(--lp-orange);
}

/* Light-mode card/grid components for rich blog articles (comparison
   grids, layered benefit cards, form-factor chips). Distinct from the
   sitewide dark .cards/.card (built for navy sections) - these sit on
   the light .pp-article background, so they need their own contrast. */
.cr-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: var(--s-6) 0; }
@media (max-width: 720px) { .cr-cards { grid-template-columns: 1fr; } }
.cr-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(31,67,95,0.12);
  border-radius: 8px;
  padding: 24px 26px;
}
.cr-card h3 { margin-top: 0; font-size: 1.05rem; }
.cr-card__tag {
  display: inline-block; margin-bottom: 10px;
  font-family: var(--lp-font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lp-orange);
}
.cr-card__who {
  font-family: var(--lp-font-body); font-size: 0.85rem; font-weight: 600; color: var(--lp-navy); opacity: 0.65;
  margin: -6px 0 10px;
}
.cr-benefit {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(31,67,95,0.10);
  font-size: 0.88rem; line-height: 1.5; color: var(--lp-navy); opacity: 0.85;
}
.cr-benefit b { display: block; color: var(--lp-orange); font-family: var(--lp-font-display); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 4px; }

.cr-ff-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: var(--s-6) 0; }
.cr-ff-card {
  background: rgba(31,67,95,0.04); border: 1px solid rgba(31,67,95,0.10); border-radius: 6px;
  padding: 16px 18px; font-family: var(--lp-font-body);
}
.cr-ff-card b { display: block; color: var(--lp-navy); font-size: 0.92rem; margin-bottom: 4px; }
.cr-ff-card span { display: block; font-size: 0.8rem; color: var(--lp-navy); opacity: 0.65; line-height: 1.4; }

.cr-pull {
  font-family: var(--lp-font-display); font-weight: 700; text-transform: none;
  font-size: 1.3rem; line-height: 1.35; color: var(--lp-navy);
  border-left: 4px solid var(--lp-orange); padding: 4px 0 4px 24px; margin: var(--s-7) 0;
}

/* Four-up (or similar) stat strip for light blog articles - number,
   label, one-line supporting detail. */
.cr-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: var(--s-6) 0; }
@media (max-width: 720px) { .cr-stats { grid-template-columns: 1fr 1fr; } }
.cr-stat { background: #fff; border: 1px solid rgba(31,67,95,0.12); border-radius: 8px; padding: 20px; }
.cr-stat__n { font-family: var(--lp-font-display); font-size: 1.7rem; font-weight: 700; color: var(--lp-orange); line-height: 1; margin-bottom: 6px; }
.cr-stat__l { font-family: var(--lp-font-display); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; color: var(--lp-navy); text-transform: uppercase; margin-bottom: 8px; }
.cr-stat__sub { font-size: 0.82rem; line-height: 1.5; color: var(--lp-navy); opacity: 0.7; margin: 0; }

.cr-modal-overlay { position: fixed; inset: 0; background: rgba(15,26,42,0.45); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 500; }
  .cr-modal-overlay[hidden] { display: none; }
  .cr-modal { position: relative; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; background: var(--lp-light); border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(14,26,42,0.35); }
  .cr-modal-close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: rgba(31,67,95,0.08); color: var(--lp-navy); border: none; font-size: 18px; line-height: 28px; text-align: center; cursor: pointer; padding: 0; z-index: 1; }
  .cr-modal-close:hover { background: rgba(31,67,95,0.16); }
  .cr-modal-body { padding: 32px; }
  .cr-modal-head { margin-bottom: 20px; padding-right: 28px; padding-bottom: 16px; border-bottom: 1px solid rgba(31,67,95,0.14); }
  .cr-modal-tag { color: var(--lp-orange); margin-bottom: 8px; }
  .cr-modal-title { font-family: var(--lp-font-display); font-size: 1.4rem; color: var(--lp-navy); letter-spacing: 0.01em; text-transform: uppercase; margin-bottom: 4px; }
  .cr-modal-service { font-family: var(--lp-font-display); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-orange); }
  .cr-modal-form { display: grid; gap: 12px; }
  .cr-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .cr-modal-label { font-family: var(--lp-font-display); font-size: 14px; letter-spacing: 0.04em; color: var(--lp-navy); opacity: 0.7; text-transform: uppercase; }
  .cr-modal-input { display: block; background: #fff; border: 1px solid rgba(31,67,95,0.2); color: var(--lp-navy); font-family: var(--lp-font-body); font-size: 15px; padding: 10px 14px; border-radius: 4px; width: 100%; margin-top: 5px; }
  .cr-modal-input:focus { border-color: var(--lp-orange); outline: none; }
  .cr-modal-submit { background: var(--lp-orange); color: var(--lp-night); font-family: var(--lp-font-display); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 14px 24px; border: none; border-radius: 4px; width: 100%; cursor: pointer; margin-top: 4px; }
  .cr-modal-submit:hover { background: var(--lp-orange-glow, var(--lp-orange)); }
  .cr-modal-fine { font-family: var(--lp-font-body); font-size: 0.78rem; color: var(--lp-navy); opacity: 0.55; margin: 8px 0 0; line-height: 1.5; text-align: center; }
  .cr-modal-fine a { color: var(--lp-orange); }
  .cr-modal-success-text { font-family: var(--lp-font-body); font-size: 1rem; line-height: 1.6; color: var(--lp-navy); }
  @media (max-width: 600px) {
    .cr-modal-body { padding: 24px; }
    .cr-modal-row { grid-template-columns: 1fr; }
  }


/* Round 8: Grow at ON2IT feedback fixes.
   1) Pattern-A (.card h3/.card p) was never covered by the Round 6 light-section
      override, which only patched Pattern-B (.card-title/.card-desc). That left
      white-on-white text wherever a plain .card sits inside .lp-section-light
      (We Secure, We Innovate, the 5 Numbers stat cards). Fix once, sitewide. */
.lp-section-light .card h3 { color: var(--lp-navy); }
.lp-section-light .card p { color: rgba(31,67,95,0.75); }

/* 2) Numbers section: make the number the dominant element, one line of
   context underneath. Scoped to .grow-numbers-bento so it doesn't affect
   .card usage elsewhere (Karin pages, careers.html). */
/* Round 11: flat "reference image" stat-card look -- light grey fill, no
   border, no orange corner brackets, small line icon above the number.
   Scoped to .grow-numbers-bento so the shared .card look elsewhere is
   untouched. */
.grow-numbers-bento .card {
  background: #F7F8FA; border: none; box-shadow: none;
  padding: 28px 24px; border-radius: 10px;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.grow-numbers-bento .card:hover {
  background: #F7F8FA; transform: translateY(-3px);
  box-shadow: 0 14px 32px -18px rgba(31,67,95,0.22);
}
.grow-numbers-bento .card::before, .grow-numbers-bento .card::after { display: none; }
.gnb-stat-icon { width: 28px; height: 28px; color: var(--lp-orange); margin-bottom: 18px; flex-shrink: 0; }
.grow-numbers-bento .card h3 { font-size: 40px; font-weight: 700; margin-bottom: 8px; }
.grow-numbers-bento .card p { font-size: 13px; line-height: 1.4; color: rgba(31,67,95,0.6); margin: 0; }
.gnb-photo-caption .card-num { font-size: 32px; margin-bottom: 6px; }

/* 3) We Innovate: Threat Talks photo card reveals its full description on
   hover instead of showing a permanently-visible line. Scoped to the
   --reveal modifier so the two Numbers-section photos (always-visible
   captions) are unaffected. */
.gnb-photo--reveal .gnb-photo-caption p {
  max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.gnb-photo--reveal .gnb-photo-caption { transition: background 0.3s ease; }
.gnb-photo--reveal:hover .gnb-photo-caption { background: linear-gradient(180deg, transparent 0%, rgba(14,26,42,0.97) 45%); }
.gnb-photo--reveal:hover .gnb-photo-caption p { max-height: 160px; opacity: 1; margin-top: 8px; }

/* Round 14 (we-are-on-to-it): placeholder variant for a .gnb-photo slot
   where no real photo exists yet. Dashed "photo coming soon" tag top-left,
   diagonal-hatch fill instead of a background-image, caption still renders
   normally underneath so the card keeps its place in the grid. */
.gnb-photo--placeholder {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 14px), var(--lp-night);
  display: flex; align-items: flex-end;
}
.gnb-photo--placeholder-tag {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  color: rgba(255,255,255,0.55); border: 1px dashed rgba(255,255,255,0.32);
  padding: 6px 10px; border-radius: 2px; display: inline-flex; align-items: center; gap: 6px;
}
.gnb-photo--placeholder-tag svg { width: 14px; height: 14px; stroke: rgba(255,255,255,0.55); fill: none; stroke-width: 1.5; }

/* Round 16 (we-are-on-to-it): "In the field" cards (Threat Talks / Hack the
   X / Recognition) use .gnb-photo-caption .card-num as a text label, not the
   "01/02/03" step numeral the Round 11 rule (32px) was written for on
   grow-at-on2it. At 32px the label read as an oversized, awkward word, and
   --reveal hid the supporting paragraph until hover, leaving the card almost
   empty by default. This modifier resets the label to a small kicker, keeps
   the caption always legible, tightens the type scale/spacing between
   label -> title -> body, and swaps the hover-to-reveal-text trick for a
   plain card lift (matching .card/.lp-card-light elsewhere on this page). */
.gnb-photo--info { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.gnb-photo--info:hover { transform: translateY(-4px); box-shadow: 0 14px 34px -16px rgba(0,0,0,0.4); }
.gnb-photo--info .gnb-photo-caption {
  background: linear-gradient(180deg, transparent 0%, rgba(14,26,42,0.85) 55%);
  padding: 28px 24px 24px;
  transition: background 0.3s ease;
}
.gnb-photo--info .card-num { font-size: 11px; letter-spacing: 0.15em; margin-bottom: 10px; }
.gnb-photo--info h3 { font-size: 19px; line-height: 1.3; margin: 0 0 10px; }
/* Body copy stays hover-reveal (matches the original --reveal interaction
   Sam wanted kept), just with the corrected type scale/spacing above. */
.gnb-photo--info p {
  font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 0;
  max-height: 0; opacity: 0; margin-top: 0; overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}
.gnb-photo--info:hover .gnb-photo-caption { background: linear-gradient(180deg, transparent 0%, rgba(14,26,42,0.97) 40%); }
.gnb-photo--info:hover p { max-height: 160px; opacity: 1; margin-top: 8px; }


/* Round 10: Careers page job cards, second pass. Fixes a real bug: base
   `a { color: orange; text-decoration: underline; }` was leaking through
   every text node inside these cards (the whole card is an <a>), which read
   as "orange lines below all texts" -- text-decoration draws using the
   color of the element that declared it (the anchor), not the descendant's
   overridden color, so title/meta/link text all sat on an orange underline.
   Fix: text-decoration: none on .job-card. Also replaces the plain dash
   bullets with small orange line-icons (pin/clock/briefcase) in front of
   location/type/department, and adds a bit of hover polish. Scoped to
   .job-card so the shared Board-Brief .card (Karin pages) is untouched. */
.job-card { text-decoration: none; transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.job-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px -12px rgba(31,67,95,0.22); }
.job-card .card-title { font-size: 26px; font-weight: 500; text-transform: uppercase; margin-bottom: 16px; letter-spacing: 0.01em; }
.job-meta { list-style: none; margin: 0 0 20px; padding: 0; font-size: 13px; line-height: 1.5; color: var(--muted); display: flex; flex-direction: column; gap: 9px; }
.job-meta li { display: flex; align-items: center; gap: 9px; }
.job-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--orange); }
.lp-section-light .job-meta { color: rgba(31,67,95,0.75); }
.job-more { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); transition: color 0.2s ease; }
.lp-section-light .job-more { color: var(--lp-mid-grey); }
.job-card:hover .job-more { color: var(--orange); }
.job-card:hover .card-arrow { color: var(--orange); transform: translateX(4px); }

/* ==================================================================== */
/* 27 · CAREERS FILTER BAR                    */
/* ==================================================================== */
/* Same search+select+reset pattern as .tc-filter-bar (training-courses)
   and .rs-filter-bar (resources), scoped as .cf-* so it doesn't collide
   with .cr-* (credits page, which also has a sort control + sticky state). */

.cf-filter-bar {
  margin: 28px 0 24px;
  padding: 18px 22px;
  background: white;
  border: 1px solid rgba(31,67,95,0.10);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(31,67,95,0.04), 0 12px 28px -16px rgba(31,67,95,0.18);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr auto;
  gap: 18px;
  align-items: end;
}
@media (max-width: 800px) { .cf-filter-bar { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .cf-filter-bar { grid-template-columns: 1fr; } }

.cf-field { display: flex; flex-direction: column; gap: 7px; }
.cf-label {
  color: var(--lp-orange);
}
.cf-input, .cf-select {
  font-family: var(--lp-font-body);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid rgba(31,67,95,0.16);
  border-radius: 8px;
  background: white;
  color: var(--lp-navy);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  appearance: none;
}
.cf-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23F26E18' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.cf-input::placeholder { color: rgba(11,20,40,0.4); }
.cf-input:focus, .cf-select:focus {
  outline: none;
  border-color: var(--lp-orange);
  box-shadow: 0 0 0 3px rgba(242,110,24,0.12);
}
.cf-reset {
  font-family: var(--lp-font-display);
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--lp-orange);
  background: transparent;
  border: 1px solid rgba(242,110,24,0.3);
  padding: 12px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.cf-reset:hover { background: rgba(242,110,24,0.06); }

.cf-meta-row {
  display: flex; justify-content: space-between; align-items: center;
  margin: 8px 4px 24px;
  color: rgba(11,20,40,0.55);
}
.cf-meta-row strong { color: var(--lp-orange); font-weight: 700; }

.job-card[hidden] { display: none; }

.cf-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  font-family: var(--lp-font-body);
  font-size: 15px;
  color: rgba(11,20,40,0.55);
  border: 1px dashed rgba(31,67,95,0.18);
  border-radius: 14px;
}


/* ============================================================
   O2MEGA — new mega-menu header (scoped; supersedes .site-header/.mega-nav)
   All internals are .on2nav__* / .mm-* so nothing leaks to page content.
   ============================================================ */
.site-header { display: none !important; } /* legacy header off */

.on2nav { position: sticky; top: 0; z-index: 1000; background: var(--on2it-dark-blue, #192842); font-family: var(--lp-font-body, "Open Sans", sans-serif); }
.on2nav a { text-decoration: none; }
.on2nav__bar { display: flex; align-items: center; gap: 28px; max-width: 1360px; margin: 0 auto; padding: 0 28px; height: 68px; }
.on2nav__brand { flex: 0 0 auto; display: inline-flex; align-items: center; }
.on2nav__brand img { display: block; height: 34px; width: auto; }
.on2nav__nav { flex: 1 1 auto; }
.on2nav__items { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; justify-content: center; }
.on2nav__item { position: static; }
.on2nav__trigger {
  font-family: var(--lp-font-display, "Abel", sans-serif); text-transform: uppercase; letter-spacing: 1px;
  font-size: 14px; color: rgba(255,255,255,0.85); background: none; border: 0; cursor: pointer;
  height: 68px; padding: 0 14px; border-bottom: 3px solid transparent; display: inline-flex; align-items: center; gap: 6px;
}
.on2nav__item:hover .on2nav__trigger,
.on2nav__trigger[aria-expanded="true"] { color: #fff; border-bottom-color: var(--lp-orange, #F26E18); background: rgba(255,255,255,0.05); }

/* Panel: full-width dropdown under the bar, hidden until hover/focus/open */
.on2nav__panel {
  position: absolute; left: 0; right: 0; top: 68px; background: #fff;
  box-shadow: 0 24px 48px -18px rgba(14,26,42,0.35);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
  z-index: 999;
}
.on2nav__item:hover > .on2nav__panel,
.on2nav__item:focus-within > .on2nav__panel,
.on2nav__item.is-open > .on2nav__panel {
  opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .16s ease, transform .16s ease;
}
.on2nav__grid { max-width: 1360px; margin: 0 auto; padding: 34px 28px 22px; display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 40px; }
.on2nav__grid--narrow { grid-template-columns: 1fr 1fr; max-width: 900px; margin: 0; }

.mm-col-head { color: var(--lp-navy, #1F435F); }
.mm-col-sub { font-size: 12px; color: #7c8794; font-style: italic; margin: 4px 0 12px; padding-bottom: 12px; border-bottom: 1px solid #eee; }
.mm-item { display: block; padding: 9px 0; }
.mm-item + .mm-item { border-top: 1px dashed rgba(31,67,95,0.10); }
.mm-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14.5px; color: var(--lp-navy, #1F435F); line-height: 1.25; }
.mm-arrow { color: var(--lp-orange, #F26E18); font-weight: 700; opacity: 0; transform: translateX(-4px); transition: 120ms; }
.mm-item:hover .mm-arrow { opacity: 1; transform: translateX(0); }
.mm-desc { display: block; font-size: 12.5px; color: #4B4B4B; margin-top: 3px; line-height: 1.4; }
.mm-desc em { color: var(--lp-orange, #F26E18); font-style: normal; font-weight: 600; }
.mm-item:hover { background: linear-gradient(90deg, rgba(242,110,24,0.06), transparent 60%); }

.mm-col--featured { display: flex; flex-direction: column; gap: 12px; }
.mm-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 120px; padding: 40px 16px 16px; border-radius: 8px; overflow: hidden; color: #fff; background-size: cover; background-position: center; }
.mm-card--navy { background-image: linear-gradient(135deg, rgba(25,40,66,0.90) 0%, rgba(44,95,141,0.74) 100%), var(--mm-card-img, none); }
.mm-card--night { background-image: linear-gradient(135deg, rgba(25,40,66,0.90) 0%, rgba(31,67,95,0.74) 100%), var(--mm-card-img, none); }
.mm-card--orange { background-image: linear-gradient(135deg, rgba(242,110,24,0.94) 0%, rgba(242,110,24,0.86) 100%), var(--mm-card-img, none); justify-content: center; padding: 10px 18px; min-height: 44px; gap: 2px; }
.mm-card--orange .mm-tag { position: static; background: transparent; padding: 0; margin-bottom: 4px; display: inline-block; width: fit-content; }
.mm-tag { position: absolute; top: 12px; left: 14px; font-family: var(--lp-font-display, "Abel", sans-serif); font-size: 12px; letter-spacing: 2px; background: var(--lp-orange, #F26E18); padding: 3px 7px; border-radius: 2px; }
.mm-card-title { font-family: var(--lp-font-display, "Abel", sans-serif); text-transform: uppercase; font-size: 18px; letter-spacing: .5px; }
.mm-card-p { font-size: 12.5px; opacity: .9; line-height: 1.4; }
.mm-card-cta { color: #fff; margin-top: 2px; }
.mm-allcases { color: var(--lp-navy, #1F435F); padding: 10px 0 2px; }
.mm-allcases .mm-arrow { opacity: 1; transform: none; }

.mm-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1360px; margin: 0 auto; padding: 16px 28px; background: var(--lp-light, #F5F2F5); border-top: 1px solid #eee; }
.mm-cta-text strong { display: inline; font-family: var(--lp-font-display, "Abel", sans-serif); text-transform: uppercase; letter-spacing: 1.5px; color: var(--lp-navy, #1F435F); font-size: 14px; }
.mm-cta-text span { font-size: 13px; color: #4B4B4B; margin-left: 12px; }
.mm-cta-btns { display: flex; gap: 10px; flex: 0 0 auto; }
.mm-btn { font-family: var(--lp-font-display, "Abel", sans-serif); font-size: 14px; letter-spacing: 1px; text-transform: uppercase; padding: 10px 18px; border-radius: 2px; }
.mm-btn--solid { background: var(--lp-orange, #F26E18); color: var(--on2it-night, #192842); }
.mm-btn--ghost { background: transparent; color: var(--lp-navy, #1F435F); border: 1px solid var(--lp-navy, #1F435F); }

/* actions: language + CTA */
.on2nav__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.on2nav__lang { position: relative; }
.on2nav__trigger--lang { height: auto; padding: 6px; border: 0; }
/* width:max-content so every entry sits on one line whatever the labels
   say - "Nederland - Nederlands" wrapped at the old fixed 190px, which made
   a region look like two. min-width keeps the panel from collapsing narrower
   than the title; max-width stops max-content overflowing a phone. */
.on2nav__panel--lang { left: auto; right: 0; top: 60px; width: max-content; min-width: 190px; max-width: calc(100vw - 32px); border-radius: 8px; border-top: 3px solid var(--lp-orange,#F26E18); }
.on2nav__lang-title {
  margin: 0; padding: 10px 10px 6px;
  font-family: var(--lp-font-display, "Abel", sans-serif); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--lp-orange, #F26E18);
  border-bottom: 1px solid rgba(31,67,95,0.12); white-space: nowrap;
}
.on2nav__panel--lang ul { list-style: none; margin: 0; padding: 8px; }
.on2nav__panel--lang li { }
.on2nav__panel--lang a, .on2nav__lang-current { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--lp-navy,#1F435F); font-size: 14px; white-space: nowrap; }
.on2nav__panel--lang img { flex: 0 0 auto; }
/* Panel has room the trigger doesn't; enlarge the region icons here so
   the globe grid is actually legible, not just present. */
.on2nav__panel--lang .on2nav__flag-pair img { width: 30px; height: 20px; }
.on2nav__panel--lang a:hover { background: var(--lp-light,#F5F2F5); }
/* Region icon (globe/"NL" badge) + language flag, shown side by side:
   nl-nl and nl-en share the first item and differ only in the second, so
   both must stay visible rather than collapsing to one icon per variant. */
.on2nav__flag-pair { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.on2nav__flag-pair img { flex: 0 0 auto; border-radius: 1px; }
/* "NL" region badge - replaces an earlier hand-drawn map silhouette that
   turned out illegible at nav size no matter how it was colored (2026-07-29
   feedback). Plain text is always readable at any size, and recoloring it
   for the two contexts below is a CSS color change instead of hand-editing
   SVG paths. */
.on2nav__region-badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--lp-font-display, "Abel", sans-serif); font-weight: 700;
  letter-spacing: 0.02em; line-height: 1; flex: 0 0 auto;
  color: var(--lp-navy, #1F435F);
}
.on2nav__panel--lang .on2nav__region-badge { width: 30px; font-size: 13px; }
/* globe icon is drawn dark for the white dropdown panel; the closed
   trigger sits on the dark navbar instead, so force it white there via
   filter rather than keeping a second colored copy of the SVG.
   :first-child scopes the filter to the REGION icon only - each pair's
   second img is the language flag (US/NL/GB tricolour) and must keep its
   real colors in both contexts, or it stops being a recognizable flag. */
.on2nav__trigger--lang .on2nav__flag-pair img { width: 19px; height: 13px; }
.on2nav__trigger--lang .on2nav__flag-pair img:first-child { filter: brightness(0) invert(1); }
.on2nav__trigger--lang .on2nav__region-badge { width: 19px; font-size: 11px; color: #fff; }
.on2nav__lang:hover .on2nav__panel--lang, .on2nav__lang:focus-within .on2nav__panel--lang { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .16s ease, transform .16s ease; }
.is-current .on2nav__lang-current { opacity: .5; }
.on2nav__cta { font-family: var(--lp-font-display, "Abel", sans-serif); text-transform: uppercase; letter-spacing: 1px; font-size: 14px; background: var(--lp-orange, #F26E18); color: var(--on2it-night, #192842); padding: 11px 18px; border-radius: 2px; white-space: nowrap; }

.on2nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.on2nav__burger span { width: 24px; height: 2px; background: #fff; display: block; }

/* Mobile */
@media (max-width: 1024px) {
  .on2nav__burger { display: flex; }
  .on2nav__nav { display: none; position: absolute; left: 0; right: 0; top: 68px; background: #192842; max-height: calc(100vh - 68px); overflow-y: auto; }
  body.nav-open .on2nav__nav { display: block; }
  .on2nav__items { flex-direction: column; justify-content: flex-start; gap: 0; padding: 8px 0; }
  .on2nav__item { border-bottom: 1px solid rgba(255,255,255,0.06); }
  .on2nav__trigger { width: 100%; justify-content: space-between; height: auto; padding: 16px 24px; border-bottom: 0; }
  .on2nav__panel { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 0; display: none; }
  .on2nav__item.is-open > .on2nav__panel { display: block; }
  .on2nav__grid, .on2nav__grid--narrow { grid-template-columns: 1fr; gap: 20px; padding: 12px 24px 24px; }
  .mm-cta { flex-direction: column; align-items: flex-start; }
  .on2nav__cta { display: none; }
}

/* ============================================================
   O2MEGA menu polish — sleeker look (CSS-only, no JS)
   Scoped to .on2nav so nothing leaks to page content.
   ============================================================ */
/* Orange column headers with a short accent bar (matches mockups) */
.on2nav .mm-col-head {
  color: var(--lp-orange, #F26E18);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  position: relative;
}
.on2nav .mm-col-head::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 34px; height: 2px;
  background: var(--lp-orange, #F26E18);
}
/* Featured tagline: no second divider under the accent bar */
.on2nav .mm-col--featured .mm-col-sub {
  border-bottom: 0; padding-bottom: 0; margin: 0 0 14px;
}

/* Drop dashed separators; rely on whitespace + a soft rounded hover */
.on2nav .mm-item + .mm-item { border-top: 0; }
.on2nav .mm-item {
  padding: 10px 12px;
  margin: 2px -12px;
  border-radius: 8px;
  transition: background .14s ease;
}
.on2nav .mm-item:hover { background: rgba(242,110,24,0.07); }
.on2nav .mm-label { font-size: 15px; }
.on2nav .mm-desc { color: #5a6673; }

/* Featured cards: subtle hover lift */
.on2nav .mm-card { transition: transform .16s ease, box-shadow .16s ease; }
.on2nav .mm-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(14,26,42,0.5);
}
.on2nav .mm-card--navy:hover .mm-card-title,
.on2nav .mm-card--navy:hover .mm-card-cta,
.on2nav .mm-card--night:hover .mm-card-title,
.on2nav .mm-card--night:hover .mm-card-cta {
  color: var(--lp-orange, #F26E18);
}
.on2nav .mm-card--navy:hover .mm-tag,
.on2nav .mm-card--navy:hover .mm-card-p,
.on2nav .mm-card--night:hover .mm-tag,
.on2nav .mm-card--night:hover .mm-card-p {
  color: #fff;
}

/* Vertical dividers between the columns (desktop only) */
@media (min-width: 1025px) {
  /* More air inside the panel */
  .on2nav__grid { padding: 40px 32px 34px; gap: 40px; }
  /* Vertical dividers between the columns */
  .on2nav__grid > .mm-col + .mm-col {
    border-left: 1px solid #ececec;
    padding-left: 40px;
  }
}

/* ==================================================================== */
/* HOMEPAGE v2 — small set of net-new components (draft 01_20260615).   */
/* Everything else on this page reuses existing site classes:           */
/* .hero/.hero-split/.terminal, .lp-kicker, .lp-section-title(-dark),    */
/* .lp-grid-2/.lp-grid-3, .card family, .abt-quote, .band/.band--image,  */
/* .proof-strip, .agents-grid, .section--dark/--blue/--alt, btn-primary/ */
/* btn-outline (dark sections) and .btn.btn--ghost-blue (light sections).*/
/* ==================================================================== */

/* Trust bar (light strip, dot + label facts), centered */
.trust-bar { padding-top:28px; padding-bottom:28px; }
.trust-bar-inner { display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:wrap; }
.ti { display:flex; align-items:center; gap:10px; }
.ti-dot { width:7px; height:7px; border-radius:50%; background:var(--on2it-orange-web); flex-shrink:0; }
.ti span { font-family:var(--font-heading); font-size:14px; letter-spacing:1px; text-transform:uppercase; color:var(--on2it-blue); }

/* Proof card big stat number (Zero / 100% / 4 min) */
.card-stat { font-family:var(--fh); font-size:2rem; font-weight:400; color:var(--orange); line-height:1; margin-bottom:6px; }
.lp-section-light .card-stat { color:var(--lp-orange); }

/* Simple footer link inside .card when there's no author byline, just a CTA */
.card-arrow-link { font-family:var(--fh); font-size:14px; letter-spacing:1.5px; text-transform:uppercase; color:var(--orange); }
.lp-section-light .card-arrow-link { color:var(--lp-orange); }
.card:hover .card-arrow-link { color:var(--off-white); }
.lp-section-light .card:hover .card-arrow-link { color:var(--lp-navy); }

/* MDR Runway — Detect grows into Prevent, two even panels (no arrow) */
.rw-shared { padding:16px 28px; margin:32px 0; background:rgba(255,255,255,.02); border:1px solid var(--rule-bright); border-radius:2px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; } /* bg was .05: diluted the night backdrop enough that .rw-shared-lbl's orange text dropped to 4.25:1. .02 keeps the glass-panel highlight but restores 4.67:1. */
.rw-shared-lbl { color:var(--orange); }
.rw-pills { display:flex; gap:8px; flex-wrap:wrap; }
.rw-pill { background:rgba(242,110,24,.06); border:1px solid rgba(242,110,24,.3); border-radius:20px; padding:4px 13px; color:var(--orange); } /* bg was .15: the orange wash brought the effective background too close to the orange text, 4.13:1. .06 keeps a visible tint and restores 4.64:1. */
.rw-track { display:grid; grid-template-columns:1fr 1fr; gap:2px; align-items:stretch; }
.rw-panel { padding:40px 36px; border-radius:2px; display:flex; flex-direction:column; }
.rw-detect { background:var(--navy-3); border:1px solid var(--rule-bright); }
.rw-prevent { background:var(--navy-3); border:1px solid rgba(242,110,24,.3); }
.rw-eyebrow { color:var(--orange); margin-bottom:8px; }
.rw-tier-name { font-family:var(--H); font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--white); line-height:1; margin-bottom:6px; }
.rw-tier-sub { font-size:13px; font-style:italic; color:var(--muted); margin-bottom:24px; }
.rw-items { list-style:none; flex:1; }
.rw-items li { display:flex; gap:13px; margin-bottom:16px; align-items:flex-start; }
.rw-items li::before { flex-shrink:0; margin-top:2px; font-weight:700; font-size:15px; color:var(--orange); line-height:1.4; }
.rw-items--check li::before { content:'\2713'; }
.rw-items--plus li::before { content:'+'; }
.rw-item-body { flex:1; min-width:0; }
.rw-item-h { font-family:var(--H); font-size:.85rem; letter-spacing:.5px; text-transform:uppercase; color:var(--off-white); margin-bottom:3px; }
.rw-items p { font-size:12.5px; line-height:1.6; color:var(--muted); margin:0; }
.rw-panel > a { margin-top:8px; align-self:flex-start; }
.rw-footer { display:grid; grid-template-columns:1fr 1fr; gap:2px; margin-top:1px; }
.rw-footer-cell { padding:18px 36px; display:flex; flex-direction:column; gap:2px; }
.rw-footer-l { background:rgba(255,255,255,.03); }
.rw-footer-r { background:rgba(242,110,24,.08); }
.rw-footer-lbl { color:var(--off-white); }
.rw-footer-desc { font-size:12.5px; color:var(--muted); }
@media(max-width:900px){
  .rw-track,.rw-footer { grid-template-columns:1fr; }
}
/* This section's own grid texture removed per feedback; kept as a plain
   dark panel instead. */
body[data-route="/"] #services::before,
body[data-route="/"] #threat-talks::before {
  background-image: none;
}

/* Context pillars (numbered mini-cards inside a light .card). The
   comment above always said "light .card" but the text-color override
   to go with it was never added, so .card-title/.card-desc fell back to
   their dark-mode defaults (white title, --muted desc) on the white
   section background - unreadable. Fixing only the text here, not the
   card shell (background/border/shadow stay the plain dark-mode .card
   rule, i.e. flat and borderless), so the cards keep sitting into the
   background rather than popping out as boxed cards. */
.rw-pillars { display:grid; grid-template-columns:1fr 1fr; gap:2px; align-content:start; }
.rw-pillars .card-title { color: var(--lp-navy); }
.rw-pillars .card-desc { color: rgba(31,67,95,0.75); }
.rw-pillar-num { font-family:var(--fh); font-size:1.75rem; color:var(--lp-orange); line-height:1; margin-bottom:6px; }
@media(max-width:600px){ .rw-pillars { grid-template-columns:1fr; } }

/* Threat Talks feed — same 2x2 rhythm as the pillars above, play-icon style */
.rw-feed { display:grid; grid-template-columns:1fr 1fr; gap:2px; align-content:start; }
.rw-feed-item { text-decoration:none; display:block; }
.rw-feed-play { width:32px; height:32px; border-radius:50%; background:rgba(242,110,24,.15); border:1px solid rgba(242,110,24,.35); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.rw-feed-play svg { width:12px; height:12px; fill:var(--orange); margin-left:2px; }
.rw-feed-item .card-desc { margin-bottom:0; }
@media(max-width:600px){ .rw-feed { grid-template-columns:1fr; } }

/* Homepage section rhythm — normalize vertical padding. .section (128px,
   base system) and .lp-section-light (80px, lp-* system) get mixed on this
   page; without this, sections visibly change height for no reason as you
   scroll. Match the 100px rhythm this page's own dark sections already use
   (auxo/services/mcp/prevent/proof-section before this rewrite). Scoped to
   the homepage route only, so inner pages using .section/.lp-section-light
   elsewhere are untouched. */
body[data-route="/"] section.section,
body[data-route="/"] section.lp-section-light {
  padding: 100px 0;
}
@media (max-width: 768px) {
  body[data-route="/"] section.section,
  body[data-route="/"] section.lp-section-light {
    padding: 60px 0;
  }
}

/* Hairline seam for the trust bar strip against its light/white neighbours */
body[data-route="/"] .trust-bar { border-top: 1px solid rgba(31,67,95,0.1); border-bottom: 1px solid rgba(31,67,95,0.1); }

/* Give the 4 outcome cards a meta row like every other .card instance on
   the site (soc-transformation.html, proof points above) so they don't
   look like an unfinished variant of the component. */
#outcomes .card-meta { display:flex; align-items:center; gap:8px; margin-bottom:14px; }

/* ==================================================================== */
/* HOMEPAGE v2 — round 2 fixes (contrast, spacing, hover states,        */
/* Platform as plain text tiles, "people behind it" orange/photo lane). */
/* ==================================================================== */

/* Four Outcomes cards were sitting on .section--blue (on2it-blue,       */
/* #1F435F), a mid-tone navy the .card component's text tokens (--muted, */
/* designed against the much darker --navy/--navy-2) weren't legible on. */
/* Section is now .section--dark (matches every other dark section's    */
/* card usage on this page); this rule just tightens the 2x2 card grid,  */
/* which used the same 48px gap .lp-grid-2 uses for two-column *text*    */
/* layouts elsewhere - too much air for a card grid. */
#outcomes .lp-grid-2 { gap: 24px; }

/* nl-nl/nl-en homepage "Wetgeving & certificering" / "Regulation &
   certification" compliance cards (#compliance): the .card-time-on-
   --dim contrast bug this section was originally patched for is now
   fixed at the source (.card-time's default color is --muted, and
   --muted resolves to --on2it-muted-dark - see the token block up top),
   so the local color override is gone. What's left here is just this
   section's own sizing: enlarge the body copy and tighten the card grid
   the same way #outcomes was tightened, rather than leaving it at the
   48px gap .lp-grid-2 defaults to for text layouts. */
#compliance .card-desc { font-size: 15px; }
#compliance .lp-grid-2 { gap: 24px; }
/* The sitewide `strong { color: var(--on2it-blue); }` default assumes a
   light background; on this dark section it renders as unreadable blue
   bold text, same family of bug as the .card-time fix above. */
#compliance .card-desc strong { color: var(--off-white); }

/* nl-nl "Vanuit Zaltbommel" (#nederland) / nl-en "From Zaltbommel"
   (#netherlands): section--alt is a light-grey background, but plain
   .card defaults to the dark-mode component (white title, light-grey
   .card-desc) since it isn't wrapped in .lp-section-light - same family
   of bug as #compliance above, just the light-background version:
   near-white text on a near-white background instead of blue-on-blue.
   Recolor to navy and size the body copy up, matching the light-section
   .card conventions (.lp-section-light .card-title/.card-desc) used
   elsewhere on the site. */
#nederland .card-title, #netherlands .card-title { color: var(--lp-navy); }
#nederland .card-desc, #netherlands .card-desc { color: var(--lp-navy); font-size: 15px; }

/* nl-nl/nl-en homepage "Threat Intelligence" lane: this section is now
   section--alt (light grey) instead of section--dark, unlike its
   counterpart on the international homepage which stays dark. Scoped to
   #threat-talks.section--alt so the dark instance is untouched. Same
   card-on-light-background fix as #nederland/#netherlands above, plus
   the feed-item play icon, which used the sitewide --orange dark-mode
   token (~2.85:1 on --on2it-light-grey, fails the 3:1 floor for a
   non-text UI icon) - swapped to --on2it-orange-text, the token this
   site already keeps for AA-safe orange on light backgrounds. */
#threat-talks.section--alt .card-title { color: var(--lp-navy); }
#threat-talks.section--alt .card-desc { color: rgba(31,67,95,0.75); }
#threat-talks.section--alt .rw-feed-play { background: rgba(181,76,10,.08); border-color: rgba(181,76,10,.35); }
#threat-talks.section--alt .rw-feed-play svg { fill: var(--on2it-orange-text); }

/* MDR Runway panel hover states */
.rw-panel { transition: background var(--t) var(--ease), border-color var(--t) var(--ease); }
.rw-detect:hover { background: var(--card-hover); border-color: var(--rule-bright); }
.rw-prevent:hover { background: rgba(242,110,24,.1); border-color: rgba(242,110,24,.5); }

/* AUXO Platform tiles — plain text on the white section background,    */
/* no card shell/border, just a slight hover tint. */
.platform-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:48px; }
.p-tile { padding:18px 16px; border-radius:6px; transition:background var(--t) var(--ease); }
.p-tile:hover { background: rgba(31,67,95,0.05); }
.p-tile-tag { color:var(--lp-orange); margin-bottom:10px; }
.p-tile-name { font-family:var(--lp-font-display); font-size:.95rem; letter-spacing:.5px; text-transform:uppercase; color:var(--lp-navy); margin-bottom:8px; }
.p-tile-desc { font-size:13px; line-height:1.6; color:rgba(31,67,95,0.72); }
@media(max-width:900px){ .platform-tiles { grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .platform-tiles { grid-template-columns:1fr; } }

/* About page "recognition" row: two .platform-tiles grids (4-across, then
   3-across) stacked instead of one 7-item grid, so the 3-card second row
   still spans the full container width (wider cards) instead of leaving an
   empty 4th slot. Tighter gap than the default AUXO platform-tiles usage.
   Scoped to #about-recognition so that usage elsewhere is untouched. */
#about-recognition .platform-tiles { gap: 10px; margin-top: 10px; }
#about-recognition .platform-tiles.tiles-4 { grid-template-columns: repeat(4, 1fr); }
#about-recognition .platform-tiles.tiles-3 { grid-template-columns: repeat(3, 1fr); }
#about-recognition .lp-container > .platform-tiles:first-child { margin-top: 40px; }
@media (max-width: 900px) {
  #about-recognition .platform-tiles.tiles-4,
  #about-recognition .platform-tiles.tiles-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  #about-recognition .platform-tiles.tiles-4,
  #about-recognition .platform-tiles.tiles-3 { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* BLOG - photo-top card, shared between /blog/ listing and each */
/* post's "Related articles" strip (both use .lp-grid-3).        */
/* ============================================================ */
.bg-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid rgba(31,67,95,0.08); border-radius: 10px;
  overflow: hidden; text-decoration: none;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.bg-card:hover {
  border-color: var(--lp-orange); transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(14,26,42,0.08);
}
.bg-thumb {
  height: 180px; background-color: rgba(31,67,95,0.06);
  background-size: cover; background-position: center;
}
.bg-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 18px; }
.bg-card__cat {
  color: var(--lp-orange); font-weight: 600; margin-bottom: 10px;
}
.bg-card__title {
  font-family: var(--lp-font-display); font-weight: 700; font-size: 16px; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--lp-navy); margin: 0 0 10px;
}
.bg-card__excerpt {
  font-family: var(--lp-font-body); font-size: 13px; line-height: 1.55;
  color: rgba(31,67,95,0.72); margin: 0 0 14px; flex: 1;
}
.bg-card__tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: auto; }
.bg-card[hidden] { display: none; }

/* ============================================================ */
/* BLOG POST (pp-*) - individual article layout: reading progress */
/* bar, dark lp-hero header, optional cover image, two-column body */
/* (prose + sticky sidebar with TOC/share/newsletter), related grid.*/
/* Reuses .lp-hero/.lp-hero-eyebrow/.lp-hero-title/.lp-form-wrap/    */
/* .cr-tag/.bg-card so the article matches the rest of the new      */
/* design system; only the elements below are new/page-type-scoped. */
/* ============================================================ */
.pp-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(31,67,95,0.12); z-index: 500; }
.pp-progress__bar { height: 100%; width: 0%; background: var(--lp-orange); transition: width 0.1s linear; }

.pp-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--lp-font-display); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lp-orange); text-decoration: none; margin-bottom: 24px;
}
.pp-back:hover { text-decoration: underline; }

.pp-meta {
  font-family: var(--lp-font-body); font-size: 0.95rem; color: rgba(255,255,255,0.75);
  margin-top: 18px;
}
.pp-meta strong { color: #fff; font-weight: 600; }

/* Article column widened and left-aligned so it lines up with the hero's
   left edge above it, instead of the old centered 44rem measure. Also
   trims the dead space .post-body/.lp-section-light normally add above
   the first heading. */
.pp-article.post-body { padding: 24px 0 var(--s-9); }
/* Article prose headings otherwise inherit the site-wide h2/h3 rules
   (clamp up to 3.5rem/2rem) meant for big landing-page section titles -
   too large for in-article subheadings, so scoped down here. */
.pp-article h2 { font-size: 1.7rem; }
.pp-article h3 { font-size: 1.3rem; }
.pp-article .post-body__inner { max-width: 720px; margin: 0; padding: 0; }
#content.lp-section-light { padding-top: 40px; }

.pp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
@media (max-width: 960px) { .pp-layout { grid-template-columns: 1fr; gap: 40px; } }

.pp-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 92px; }
@media (max-width: 960px) { .pp-sidebar { position: static; } }

.pp-toc, .pp-share {
  background: #fff; border: 1px solid rgba(31,67,95,0.08); border-radius: 10px; padding: 20px 22px;
}
.pp-toc__label {
  display: block; color: var(--lp-orange); font-weight: 600; margin-bottom: 14px;
}
.pp-share__btns { display: flex; gap: 10px; }
.pp-share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(31,67,95,0.06); border: 1px solid rgba(31,67,95,0.12); color: var(--lp-navy);
  cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pp-share__btn svg { width: 16px; height: 16px; }
.pp-share__btn:hover, .pp-share__btn.is-copied { background: var(--lp-orange); border-color: var(--lp-orange); color: #fff; }

/* Solid dark navy (not the translucent .lp-form-wrap default) - the
   translucent version let the white section behind it bleed through and
   washed the card out to a lighter, muddier blue. */
.pp-cta.lp-form-wrap { background: var(--lp-night); padding: 24px; }
.pp-cta__title {
  font-family: var(--lp-font-display); font-weight: 700; font-size: 1.05rem; text-transform: uppercase;
  letter-spacing: 0.02em; color: var(--lp-light); margin: 0 0 8px;
}
.pp-cta__body { font-family: var(--lp-font-body); font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.68); margin: 0 0 16px; }

.pp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--s-6); }

/* TL;DR / key-takeaways box, sits above the first heading. Same dark-card,
   two-orange-corner language as the sitewide .card component (see .cards/
   .card in this file), just always-visible instead of hover-revealed since
   this box isn't a link. */
.pp-tldr {
  position: relative; overflow: hidden;
  background: rgba(242,110,24,0.08); border: 1px solid rgba(242,110,24,0.3);
  border-radius: 8px; padding: 24px 26px 22px; margin: 0 0 var(--s-6);
}
.pp-tldr__label {
  display: block; color: var(--lp-orange); font-weight: 600; margin-bottom: 12px;
}
.pp-tldr .checks { margin: 0; }
.pp-tldr .checks li { font-size: 0.95rem; margin-bottom: 10px; color: var(--lp-navy); }
.pp-tldr .checks li:last-child { margin-bottom: 0; }
.pp-tldr .checks li::before { background: var(--lp-orange); }
.pp-tldr .checks li strong { color: var(--lp-navy); }

/* Mid-article contextual CTA banner. Same dark-card/two-orange-corner
   language as .pp-tldr above, but hover-revealed (this one IS a link) and
   a shade darker, plus an Abel Pro eyebrow + supporting line so it reads
   as a designed component instead of a plain text-and-button strip. */
.pp-inline-cta {
  position: relative; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--lp-night); color: #fff; border: 1px solid rgba(242,110,24,0.2);
  border-radius: 8px; padding: 28px 32px; margin: var(--s-7) 0;
  transition: background 0.25s ease;
}
.pp-inline-cta::before, .pp-inline-cta::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border-color: var(--lp-orange); border-style: solid; opacity: 0;
  transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.pp-inline-cta::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.pp-inline-cta::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.pp-inline-cta:hover { background: #0a1520; }
.pp-inline-cta:hover::before, .pp-inline-cta:hover::after { opacity: 1; width: 22px; height: 22px; }
.pp-inline-cta__body { max-width: 460px; }
.pp-inline-cta__label {
  display: block; color: var(--lp-orange); font-weight: 600; margin-bottom: 10px;
}
.pp-inline-cta__lead {
  margin: 0 0 8px; font-family: var(--lp-font-display); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: 0.01em; color: #fff; line-height: 1.3;
}
.pp-inline-cta__sub { margin: 0; font-family: var(--lp-font-body); font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.68); }
.pp-inline-cta .lp-btn-primary { white-space: nowrap; }

/* Author bio card at the end of the article. */
.pp-author-bio {
  background: #fff; border: 1px solid rgba(31,67,95,0.08); border-radius: 10px;
  padding: 20px 22px; margin-top: var(--s-6);
}
.pp-author-bio p { margin: 0; font-family: var(--lp-font-body); font-size: 13px; line-height: 1.6; color: rgba(31,67,95,0.75); }

/* =============================================================
   CSP-safe interaction utilities.
   These replace former inline on* handlers (onfocus/onblur/
   onmouseover/onmouseout) so the CSP script-src can stay
   'self' with no 'unsafe-inline'. Purely presentational.
   ============================================================= */
.lp-inp:focus,
.lp-inp-dark:focus,
#lib-form input:focus { border-color: var(--on2it-orange-web) !important; }
.lp-inp-dark:focus { background: rgba(255, 255, 255, 0.07) !important; }
.lp-lift-1 { transition: transform 0.15s; }
.lp-lift-1:hover { transform: translateY(-1px); }
.lp-lift-4:hover { transform: translateY(-4px); border-color: rgba(242, 110, 24, 0.5) !important; }

/* We Are ON2IT ("Where you'll find us"): event-name cards. Distinct from
   the shared .gnb-photo--reveal treatment (still used as-is by
   grow-at-on2it and the training-courses pages - not touched here).
   Caption is fully hidden by default; hover brings in a semi-transparent
   brand-blue overlay across the whole image with the event name centered
   in orange. Hover-only by design (no always-on state), so there is no
   text at all until the visitor interacts with the card. */
.gnb-photo--event {
  transition: border-color 0.35s ease;
}
.gnb-photo--event:hover {
  border-color: var(--lp-orange);
}
.gnb-photo--event .gnb-photo-caption {
  position: absolute; inset: -1px;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  background: rgba(25, 40, 66, 0);
  opacity: 0;
  transition: background 0.35s ease, opacity 0.35s ease;
}
.gnb-photo--event:hover .gnb-photo-caption {
  background: rgba(25, 40, 66, 0.88);
  opacity: 1;
}
.gnb-photo--event .gnb-photo-caption h3 {
  color: var(--lp-orange); margin: 0;
}

/* =============================================================
   Wrong-region suggester (/assets/region-suggest.js).
   A bar offering the market that matches the visitor's country and
   language, and - once they have chosen a market - telling them when
   they are not in it.

   Sits at the very top of the page, above the menu, and is inserted
   before <header class="on2nav"> rather than overlaid on it: a fixed
   bar would cover the logo and the nav, including the region switcher,
   which is the one control that solves the same problem.

   Sticky, not fixed, so it holds its own space. The header is itself
   sticky at top:0, so while the bar is present the header is pushed
   down by exactly the bar's height (--on2region-h, measured in JS);
   without that the two would overlap as soon as the page scrolls.
   ============================================================= */
.on2region {
  position: sticky; top: 0; z-index: 1100;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  background: var(--on2it-dark-blue, #1E334F);
  border-bottom: 3px solid var(--lp-orange, #F26E18);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.on2region.is-in { opacity: 1; }
.has-on2region .on2nav { top: var(--on2region-h, 0px); }
@media (prefers-reduced-motion: reduce) {
  .on2region { transition: none; }
}
.on2region__flag { flex: 0 0 auto; display: block; border-radius: 2px; }
.on2region__text {
  flex: 1 1 auto; margin: 0;
  font-family: var(--lp-font-body, sans-serif); font-size: 14px; line-height: 1.5;
  color: #fff;
}
.on2region__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.on2region__btn {
  font-family: var(--lp-font-display, "Abel", sans-serif);
  font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
  padding: 10px 18px; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  /* --go is an <a> and --stay a <button>; make the two match. The site's
     link reset only covers .on2nav a, so the anchor needs its own. */
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; line-height: 1.2;
}
.on2region__btn--go { background: var(--lp-orange, #F26E18); color: var(--on2it-night, #192842); }
.on2region__btn--go:hover { background: var(--on2it-orange, #F47929); color: var(--on2it-night, #192842); }
.on2region__btn--stay {
  background: transparent; color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.35);
}
.on2region__btn--stay:hover { border-color: #fff; color: #fff; }

@media (max-width: 640px) {
  /* Two rows: flag + message, then the two buttons. The message keeps
     `flex: 1 1 auto` so it shares the first row with the flag instead of
     leaving it stranded on a line of its own. */
  .on2region { flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; padding: 12px 16px; }
  .on2region__flag { margin-top: 3px; }
  .on2region__text { flex: 1 1 auto; }
  .on2region__actions { flex: 1 1 100%; }
  .on2region__btn { flex: 1 1 0; padding: 11px 12px; }
}

/* WCAG 1.4.3 - the global `strong { color: var(--on2it-blue); }` rule (see the
   base `strong` rule near the top of this file) is a direct-selector match, so
   it overrides any inherited paragraph color -- including inside dark-background
   containers, where on2it-blue text measures 1.42:1 on --on2it-night and 1.0:1
   on --on2it-blue (both fail 4.5:1, and 1.0:1 is literally invisible). Generalizes
   the existing #compliance .card-desc strong precedent to every dark wrapper.
   --off-white clears 12.17:1 on --on2it-night and 8.55:1 on --on2it-blue. */
.section--dark strong,
.section--blue strong,
.feature-card--blue strong,
.lp-section strong,
.lp-section-navy strong,
.lp-hero strong {
  color: var(--off-white);
}