/* Customology - current site refresh in the Good to Grow look (v4) */

:root {
  --navy: #221A35;
  --navy-2: #2C2344;
  --navy-3: #3A2F58;
  --blue: #67CBDF;
  --blue-deep: #2FA9C4;
  --red: #F15B5D;
  --purple: #B764A5;
  --yellow: #FED109;
  --ink: #221A35;
  --ink-soft: #4E4762;
  --paper: #FFFFFF;
  --mist: #F4F3F8;
  --line: rgba(34, 26, 53, 0.12);
  --line-light: rgba(255, 255, 255, 0.16);
  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 24px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 84px;
}

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

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

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4, p, blockquote, figure, address { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; }

h1, h2, .callout-big, .awards-title {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
h2 em, h1 em, .callout-big em, .awards-title em, .feature-text em, .callout-quote em {
  font-style: italic;
  font-weight: 400;
  color: var(--blue);
}
h3 { font-family: var(--sans); font-weight: 600; font-size: 1.1rem; line-height: 1.3; }

.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 14px;
}
.eyebrow-blue { color: var(--blue); }

.lead { font-size: 1.1rem; color: var(--ink-soft); max-width: 62ch; }
.section-navy .lead { color: rgba(255, 255, 255, 0.78); }

.wrap { width: min(var(--wrap), 100% - 2 * var(--gutter)); margin-inline: auto; }

.section { padding: clamp(64px, 8vw, 112px) 0; }
.section-mist { background: var(--mist); }
.section-navy { background: var(--navy); color: #fff; }
.section-navy .eyebrow { color: var(--blue); }

.section-head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head .lead { margin-top: 18px; }
.section-head-center { margin-inline: auto; text-align: center; }
.section-head-center .lead { margin-inline: auto; }
.section-head-split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

/* ---------- Buttons and links ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 26px 10px 10px;
  min-height: 56px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background-color 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.pill:hover { transform: translateY(-2px); }
.pill:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.pill:not(:has(.pill-badge)) { padding-left: 26px; }
.pill-badge {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  flex: none;
}
.pill-badge img { width: 28px; height: auto; }
.pill-blue { background: var(--blue); color: var(--navy); }
.pill-blue:hover { background: #7ad5e6; box-shadow: 0 12px 30px rgba(103, 203, 223, 0.35); }
.pill-yellow { background: var(--yellow); color: var(--navy); }
.pill-yellow:hover { background: #ffdc3a; box-shadow: 0 12px 30px rgba(254, 209, 9, 0.3); }
.pill-navy { background: var(--navy); color: #fff; }
.pill-navy:hover { background: var(--navy-3); }
.pill-ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.pill-ghost:hover { background: var(--navy); color: #fff; }
.pill-small { min-height: 44px; padding: 6px 18px 6px 6px; font-size: 0.72rem; gap: 10px; }
.pill-small .pill-badge { width: 32px; height: 32px; }
.pill-small .pill-badge img { width: 22px; }
.pill:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  color: inherit;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.25s, gap 0.25s;
}
.link-arrow:hover { border-bottom-color: var(--blue); gap: 12px; }
.link-arrow:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }

.round-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: transparent;
  color: var(--navy);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.round-btn:hover { background: var(--navy); color: #fff; transform: scale(1.06); }
.round-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.round-btn:disabled { opacity: 0.35; cursor: default; transform: none; background: transparent; color: var(--navy); }

.skip-link {
  position: absolute; left: 16px; top: -60px;
  background: var(--yellow); color: var(--navy);
  padding: 10px 16px; border-radius: 999px; font-weight: 700; z-index: 100;
}
.skip-link:focus { top: 16px; }

/* ---------- Icon rings ---------- */
.icon-ring {
  width: 64px; height: 64px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex: none;
  border: 2px solid currentColor;
}
.icon-ring svg { width: 30px; height: 30px; }
.icon-ring-blue { color: var(--blue); }
.icon-ring-yellow { color: var(--yellow); }
.icon-ring-red { color: var(--red); }
.icon-ring-purple { color: var(--purple); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow 0.3s;
}
.site-header.is-scrolled { box-shadow: 0 8px 30px rgba(34, 26, 53, 0.08); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: var(--header-h);
}
.brand img { width: 140px; height: auto; }
.brand:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; border-radius: 8px; }
.site-nav { display: flex; align-items: center; gap: 28px; flex: 1; justify-content: flex-end; }
.site-nav > ul { display: flex; gap: 20px; }
.nav-extras .pill-small span:last-child { white-space: nowrap; }
.site-nav > ul a {
  font-size: 0.9rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  padding: 6px 0; border-bottom: 2px solid transparent;
  transition: border-color 0.25s, color 0.25s;
}
.site-nav > ul a:hover { border-bottom-color: var(--blue); }
.site-nav > ul a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.nav-extras { display: flex; align-items: center; gap: 18px; }
.nav-phone { font-weight: 700; font-size: 0.92rem; text-decoration: none; white-space: nowrap; }
.nav-phone:hover { color: var(--blue-deep); }
.nav-toggle {
  display: none;
  align-items: center; gap: 10px;
  background: none; border: 0; cursor: pointer;
  padding: 10px; margin-right: -10px;
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.nav-toggle:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 8px; }
.nav-toggle-bars { width: 24px; height: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.nav-toggle-bars i { display: block; height: 2px; background: var(--navy); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -1; }
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.12;
  filter: saturate(0.4);
  transform: scale(1.04);
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--navy) 35%, rgba(34, 26, 53, 0.72) 65%, rgba(34, 26, 53, 0.55));
}
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  padding: clamp(56px, 8vw, 112px) 0;
  min-height: min(calc(100vh - var(--header-h)), 820px);
  min-height: min(calc(100svh - var(--header-h)), 820px);
}
.hero-copy .lead { color: rgba(255, 255, 255, 0.8); margin-top: 24px; }
.hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
.hero-g2g { width: 300px; margin-top: 48px; opacity: 0.85; }

.hero-visual { position: relative; aspect-ratio: 1; max-width: 560px; justify-self: end; width: 100%; }
.hero-orb {
  position: absolute; inset: 6%;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
}
.hero-orb::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 50% 45%, transparent 55%, rgba(34, 26, 53, 0.55));
}
.hero-orb img { width: 100%; height: 100%; object-fit: cover; animation: hero-drift 22s ease-in-out infinite alternate; }
.hero-visual::before {
  content: ""; position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg, var(--yellow) 0 32%, transparent 32% 100%);
  z-index: -1;
}
.hero-visual::after {
  content: ""; position: absolute;
  inset: -3%;
  border-radius: 50%;
  border: 1.5px dashed rgba(103, 203, 223, 0.35);
  animation: spin 80s linear infinite;
}
.hero-dot { position: absolute; border-radius: 50%; }
.hero-dot-yellow { width: 18px; height: 18px; background: var(--yellow); top: 8%; right: 4%; }
.hero-dot-red { width: 28px; height: 28px; background: var(--red); bottom: 10%; left: 0; }
.hero-dot-purple { width: 14px; height: 14px; background: var(--purple); bottom: 2%; right: 18%; }

@keyframes hero-drift {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.1) translate(-2%, 2%); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Awards band ---------- */
.awards { background: #fff; border-bottom: 1px solid var(--line); }
.awards-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 36px 0;
}
.awards-title { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }
.awards-list { display: flex; justify-content: flex-end; align-items: center; gap: 28px; flex-wrap: wrap; }
.awards-list img { height: 80px; width: auto; }

/* ---------- Downloads ---------- */
.download-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.download-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 2px 0 var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.download-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(34, 26, 53, 0.12); }
.download-cover { display: block; border-radius: 16px; overflow: hidden; background: var(--mist); }
.download-cover img { aspect-ratio: 5 / 6; object-fit: cover; width: 100%; }
.download-card h3 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; }
.download-card p { color: var(--ink-soft); font-size: 0.98rem; flex: 1; }
.download-card .pill { align-self: flex-start; }

/* ---------- Film ---------- */
.film .section-head-center { margin-bottom: 40px; }
.film-frame {
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  border: 1px solid var(--line-light);
}
.film-frame video { width: 100%; aspect-ratio: 16 / 9; }

/* ---------- Why ---------- */
.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.why-copy p { margin-top: 18px; color: var(--ink-soft); max-width: 60ch; }
.why-copy h2 { margin-bottom: 6px; }

.callout {
  border-radius: 8px 8px 72px 8px;
  padding: clamp(28px, 4vw, 44px);
}
.callout-yellow { background: var(--yellow); color: var(--navy); }
.callout-yellow em { color: var(--navy); font-style: italic; font-weight: 400; }
.callout-big { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; }
.callout-small { margin-top: 18px; font-weight: 600; font-size: 0.95rem; }

.why-lead-in {
  margin-top: clamp(48px, 6vw, 80px);
  font-family: var(--serif); font-size: 1.4rem; font-style: italic;
  color: var(--ink-soft);
}
.why-points {
  margin-top: 28px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
}
.why-point {
  display: flex; flex-direction: column; gap: 18px;
  padding: 28px 24px;
  border-radius: 20px;
  border: 1px solid var(--line);
  transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s;
}
.why-point:hover { border-color: transparent; transform: translateY(-6px); box-shadow: 0 24px 50px rgba(34, 26, 53, 0.1); }
.why-point h3 { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; line-height: 1.5; }

/* ---------- Feature quote ---------- */
.feature-quote-inner {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
}
.feature-photo { position: relative; width: 320px; aspect-ratio: 1; }
.feature-photo > img:first-child {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  outline: 6px solid var(--navy); outline-offset: -6px;
  box-shadow: 0 0 0 2px var(--blue);
}
.feature-logo {
  position: absolute; right: -8px; bottom: 8px;
  width: 92px; height: 92px; border-radius: 50%;
  background: #fff; padding: 6px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.feature-text p { font-family: var(--serif); font-size: clamp(1.35rem, 2.2vw, 1.9rem); line-height: 1.35; font-weight: 400; }
.feature-text footer { margin-top: 22px; }
.feature-text cite, .t-card cite, .callout-quote cite {
  font-style: normal; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.feature-text cite { color: var(--blue); }
.feature-text .pill { margin-top: 28px; }

/* ---------- What we do ---------- */
.what-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.what-ring { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; }
.what-ring-track {
  position: absolute; inset: 12%;
  border-radius: 50%;
  border: 2px dashed rgba(34, 26, 53, 0.25);
}
.what-centre {
  position: absolute; inset: 31%;
  border-radius: 50%;
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-style: italic; font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  box-shadow: 0 20px 40px rgba(34, 26, 53, 0.2);
}
.what-node {
  position: absolute;
  width: 26%; aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: #fff; color: var(--navy);
  font-weight: 700; font-size: clamp(0.62rem, 1.1vw, 0.78rem); letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s, transform 0.4s var(--ease), box-shadow 0.3s;
}
.what-node:hover { transform: scale(1.08); }
.what-node:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.what-node[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color: var(--navy); box-shadow: 0 16px 36px rgba(103, 203, 223, 0.45); }
.what-node-n { top: -1%; left: 50%; transform: translateX(-50%); }
.what-node-n:hover { transform: translateX(-50%) scale(1.08); }
.what-node-e { right: -1%; top: 50%; transform: translateY(-50%); }
.what-node-e:hover { transform: translateY(-50%) scale(1.08); }
.what-node-s { bottom: -1%; left: 50%; transform: translateX(-50%); }
.what-node-s:hover { transform: translateX(-50%) scale(1.08); }
.what-node-w { left: -1%; top: 50%; transform: translateY(-50%); }
.what-node-w:hover { transform: translateY(-50%) scale(1.08); }

.what-panels { position: relative; }
.what-panel {
  background: #fff;
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 24px 60px rgba(34, 26, 53, 0.08);
  animation: panel-in 0.5s var(--ease);
}
.what-panel:focus-visible { outline: 3px solid var(--yellow); }
.what-step { font-family: var(--serif); font-style: italic; color: var(--blue); font-size: 1.1rem; }
.what-panel h3 { font-family: var(--serif); font-weight: 500; font-size: 2rem; margin: 6px 0 16px; }
.what-panel p { color: var(--ink-soft); }
.what-controls { display: flex; gap: 12px; margin-top: 20px; }
@keyframes panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Testimonial carousel ---------- */
.carousel { position: relative; }
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 24px) / 3);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 8px 0 24px;
  -webkit-overflow-scrolling: touch;
}
.carousel-track::-webkit-scrollbar { display: none; }
.t-card {
  scroll-snap-align: start;
  background: var(--mist);
  border-radius: var(--radius);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 22px;
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.t-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(34, 26, 53, 0.1); }
.t-photo { position: relative; width: 132px; height: 132px; }
.t-photo > img:first-child { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.t-logo {
  position: absolute; right: -14px; bottom: -4px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #fff; padding: 3px;
  box-shadow: 0 6px 18px rgba(34, 26, 53, 0.18);
}
.t-card blockquote { display: flex; flex-direction: column; gap: 16px; flex: 1; }
.t-card blockquote p { font-family: var(--serif); font-size: 1.08rem; line-height: 1.5; flex: 1; }
.t-card cite { color: var(--ink-soft); }
.carousel-controls { display: flex; gap: 12px; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.carousel-dots button {
  width: 10px; height: 10px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(34, 26, 53, 0.2);
  transition: background-color 0.25s, transform 0.25s;
}
.carousel-dots button[aria-current="true"] { background: var(--blue); transform: scale(1.3); }
.carousel-dots button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

/* ---------- Logo walls ---------- */
.logo-wall {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 18px;
}
.logo-wall li {
  aspect-ratio: 1; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 2px 0 var(--line);
  transition: transform 0.4s var(--ease), box-shadow 0.4s;
}
.logo-wall li:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 18px 36px rgba(34, 26, 53, 0.12); }
.logo-wall img { width: 100%; height: 100%; object-fit: cover; }

.partner-wall {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
.partner-wall li {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line); border-radius: 16px;
  display: grid; place-items: center;
  padding: 18px;
  transition: border-color 0.3s, transform 0.4s var(--ease), box-shadow 0.4s;
}
.partner-wall li:hover { border-color: transparent; transform: translateY(-4px); box-shadow: 0 18px 36px rgba(34, 26, 53, 0.1); }
.partner-wall img {
  width: 100%; height: 100%; object-fit: contain;
  filter: grayscale(1); opacity: 0.75;
  transition: filter 0.3s, opacity 0.3s;
}
.partner-wall li:hover img { filter: none; opacity: 1; }

/* ---------- Approach / Customer.AI ---------- */
.cai {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1.1fr);
  gap: 0;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  background: var(--navy-2);
  overflow: hidden;
}
.cai > div { padding: clamp(24px, 3vw, 40px); }
.cai-inputs { border-right: 1px solid var(--line-light); }
.cai-outputs { border-left: 1px solid var(--line-light); }
.cai-col-title {
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 22px;
}
.cai-inputs li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  font-weight: 600; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px dashed var(--line-light);
}
.cai-inputs li:last-child { border-bottom: 0; }
.data-chip {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--navy);
}
.data-chip svg { width: 22px; height: 22px; }
.data-chip-blue { background: var(--blue); }
.data-chip-purple { background: var(--purple); color: #fff; }
.data-chip-red { background: var(--red); color: #fff; }
.data-chip-yellow { background: var(--yellow); }

.cai-core { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.cai-logo { width: min(100%, 300px); }
.cai-core > p { color: rgba(255, 255, 255, 0.78); font-size: 0.98rem; max-width: 46ch; }
.cai-caps {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; width: 100%;
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.cai-caps li { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cai-caps .icon-ring { width: 60px; height: 60px; }
.cai-built {
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 22px; border-top: 1px dashed var(--line-light); width: 100%;
}
.cai-built .eyebrow { margin: 0; }
.cai-built img:nth-of-type(1) { width: 130px; }
.cai-built img:nth-of-type(2) { width: 36px; }

.cai-outputs li { padding: 14px 0; border-bottom: 1px dashed var(--line-light); }
.cai-outputs li:last-child { border-bottom: 0; }
.cai-outputs h3 { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.cai-outputs p { color: rgba(255, 255, 255, 0.78); font-size: 0.92rem; margin-top: 4px; }

.cai-unlock { text-align: center; margin-top: clamp(40px, 6vw, 72px); }
.badge-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
  max-width: 900px; margin: 8px auto 0;
}
.badge-row li { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.badge-row img { width: 150px; height: 150px; object-fit: contain; transition: transform 0.5s var(--ease); }
.badge-row li:hover img { transform: translateY(-6px) rotate(-3deg); }
.badge-row span { color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; max-width: 28ch; }
.cai-unlock .g2g-line { width: 300px; margin: 40px auto 0; }

.callout-quote {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 36px; align-items: center;
}
.callout-photo { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; }
.callout-quote p { font-family: var(--serif); font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.3; }
.callout-quote footer { margin-top: 18px; }

/* ---------- Team ---------- */
.team-group { margin-top: 40px; }
.team-group-title {
  font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--purple);
  padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 24px;
}
.team-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
.person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.person img {
  width: 150px; height: 150px; border-radius: 50%; object-fit: cover;
  margin-bottom: 12px;
  filter: grayscale(1);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--line);
  transition: box-shadow 0.35s, filter 0.35s, transform 0.4s var(--ease);
}
.person:hover img { filter: none; transform: translateY(-4px); box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--blue); }
.person strong { font-family: var(--serif); font-weight: 500; font-size: 1.2rem; }
.person span { font-size: 0.85rem; color: var(--ink-soft); }

.team-foot {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: center;
}
.team-foot > p { color: var(--ink-soft); font-size: 1.05rem; }
.team-join {
  background: var(--yellow); border-radius: 8px 8px 60px 8px; padding: 32px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.team-join em { color: var(--navy); }

/* ---------- Insights ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.post { display: flex; flex-direction: column; gap: 12px; }
.post-image { display: block; border-radius: 20px; overflow: hidden; }
.post-image img { aspect-ratio: 1; object-fit: cover; width: 100%; transition: transform 0.6s var(--ease); }
.post:hover .post-image img { transform: scale(1.04); }
.post time { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--purple); font-weight: 600; margin-top: 8px; }
.post h3 { font-family: var(--serif); font-weight: 500; font-size: 1.35rem; }
.post h3 a { text-decoration: none; }
.post h3 a:hover { color: var(--blue-deep); }
.post h3 a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.post p { color: var(--ink-soft); font-size: 0.98rem; flex: 1; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.contact-copy > img { width: 200px; margin-bottom: 28px; }
.contact-copy p { margin-top: 18px; color: rgba(255, 255, 255, 0.78); max-width: 50ch; }
.contact-punch { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--yellow) !important; }
.contact-details { margin: 28px 0; display: flex; flex-direction: column; gap: 6px; }
.contact-details a { font-family: var(--serif); font-size: 1.6rem; text-decoration: none; }
.contact-details a:hover { color: var(--blue); }
.contact-details a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }

.contact-form {
  background: #fff; color: var(--navy);
  border-radius: var(--radius);
  padding: clamp(28px, 4vw, 44px);
  display: flex; flex-direction: column; gap: 18px;
}
.contact-form h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); background: var(--mist); padding: 10px 14px; border-radius: 10px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.form-row input, .form-row textarea {
  font: inherit; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--mist); color: var(--navy);
}
.form-row textarea { resize: vertical; }
.contact-form .pill { align-self: flex-start; }

/* ---------- Footer ---------- */
.site-footer { background: #1A1429; color: rgba(255, 255, 255, 0.8); padding: 64px 0 32px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-col h3 { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; }
.footer-col > img { width: 150px; margin-bottom: 18px; }
.footer-col p { margin-top: 10px; }
.footer-col a { text-decoration: none; }
.footer-col a:hover { color: var(--blue); }
.footer-col a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.footer-links { display: flex; flex-direction: column; gap: 8px; }
.social { display: flex; gap: 10px; margin-top: 22px; }
.social a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-light);
  display: grid; place-items: center;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.social a:hover { background: var(--blue); border-color: var(--blue); color: var(--navy); }
.footer-badges { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; }
.footer-badges > img { width: 150px; filter: invert(1) brightness(1.4); opacity: 0.8; }
.gji { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; }
.gji img { width: 48px; background: #fff; border-radius: 8px; padding: 4px; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line-light);
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.footer-bottom img { width: 220px; opacity: 0.8; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
  .nav-phone { display: none; }
}
@media (max-width: 1100px) {
  .site-nav > ul { gap: 14px; }
  .site-nav > ul a { font-size: 0.82rem; }
  .nav-extras .pill-small span:last-child { display: none; }
  .nav-extras .pill-small { padding-right: 6px; }
  .logo-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .partner-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cai { grid-template-columns: 1fr; }
  .cai-inputs, .cai-outputs { border-left: 0; border-right: 0; }
  .cai-inputs { border-bottom: 1px solid var(--line-light); }
  .cai-outputs { border-top: 1px solid var(--line-light); }
  .cai-inputs ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .cai-outputs ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .carousel-track { grid-auto-columns: calc((100% - 24px) / 2); }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    background: var(--navy); color: #fff;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0;
    padding: 24px var(--gutter) 40px;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease);
    visibility: hidden;
  }
  .site-nav.is-open { transform: none; visibility: visible; }
  .site-nav > ul { flex-direction: column; gap: 0; }
  .site-nav > ul a { display: block; padding: 16px 0; font-size: 1.3rem; font-family: var(--serif); border-bottom: 1px solid var(--line-light); }
  .site-nav > ul a:hover { border-bottom-color: var(--blue); }
  .nav-extras { flex-direction: column; align-items: flex-start; gap: 18px; margin-top: 28px; }
  .nav-phone { display: inline; font-size: 1.1rem; }
  .brand img { width: 120px; }
  body.nav-open { overflow: hidden; }

  .hero-inner { grid-template-columns: 1fr; min-height: 0; padding: 48px 0 56px; }
  .hero-visual { max-width: 360px; justify-self: center; order: -1; }
  .why-grid, .feature-quote-inner, .what-grid, .team-foot, .contact-grid, .callout-quote { grid-template-columns: 1fr; }
  .feature-photo { width: 240px; }
  .why-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-grid, .post-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .awards-inner { grid-template-columns: 1fr; text-align: center; }
  .awards-list img { height: 76px; }
  .awards-list { justify-content: center; }
  .what-ring { width: min(100%, 340px); }
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .pill { font-size: 0.74rem; padding-right: 20px; min-height: 52px; }
  .hero-actions .pill span:last-child { max-width: 180px; line-height: 1.3; }
  .hero-visual { max-width: 280px; }
  .hero-g2g { width: 240px; margin-top: 36px; }
  .why-points { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .partner-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .partner-wall li { padding: 12px; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .person img { width: 120px; height: 120px; }
  .carousel-track { grid-auto-columns: 100%; }
  .cai-inputs ul, .cai-outputs ul { grid-template-columns: 1fr; }
  .cai-caps { grid-template-columns: 1fr; gap: 20px; }
  .badge-row { grid-template-columns: 1fr; gap: 32px; }
  .callout { border-bottom-right-radius: 48px; }
  .callout-photo { width: 140px; height: 140px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { justify-content: center; text-align: center; }
  .feature-text .pill span { white-space: normal; text-align: left; line-height: 1.3; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-orb img { animation: none; }
}

/* =====================================================================
   v5 Consolidated: CEO feedback (6 Nov 2026). Clean corporate look with
   confidence-inspiring blue, CFO and CEO messaging, and lots of smooth,
   subtle motion. Everything respects prefers-reduced-motion.
   ===================================================================== */
:root { --blue-ink: #1F7F96; --soft-blue: #E8F6FA; }

/* Corporate blue instead of cartoony colour: one icon colour, blue callouts */
.icon-ring-yellow, .icon-ring-red, .icon-ring-purple { color: var(--blue); }
.callout-yellow { background: linear-gradient(135deg, #2FA9C4, #67CBDF); color: #fff; }
.callout-yellow em { color: var(--navy); }
.callout-yellow .callout-small { color: rgba(255,255,255,.9); }
.eyebrow { color: var(--blue-ink); }

/* Scroll progress */
.scroll-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 200; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--blue), var(--purple)); }

/* Headline word reveal */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.js [data-split] .w > span { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform .9s var(--ease), opacity .9s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.js [data-split].is-split-in .w > span { transform: none; opacity: 1; }

/* Hero entrance and floating chips */
.js .anim-hero { opacity: 0; transform: translateY(18px); animation: heroIn .9s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes heroIn { to { opacity: 1; transform: none; } }
.hero-visual { position: relative; transition: transform .2s linear; }
.hero-chip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--navy); font: 600 13px/1.2 var(--sans); box-shadow: 0 18px 40px -18px rgba(0,0,0,.55); white-space: nowrap; animation: bob 6s ease-in-out infinite; z-index: 3; }
.hero-chip b { font-size: 17px; color: var(--blue-ink); }
.hero-chip img { height: 20px; width: auto; }
.hero-chip-a { left: -6%; top: 14%; }
.hero-chip-b { right: -4%; top: 46%; animation-delay: -2s; }
.hero-chip-c { left: 6%; bottom: 8%; animation-delay: -4s; }
.hero-chip-c img { height: 26px; }
@keyframes bob { 50% { transform: translateY(-10px); } }

/* Staggered children */
.js [data-stagger] > * { opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-stagger].is-in > * { opacity: 1; transform: none; }
.js [data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; } .js [data-stagger].is-in > *:nth-child(2) { transition-delay: 80ms; } .js [data-stagger].is-in > *:nth-child(3) { transition-delay: 160ms; } .js [data-stagger].is-in > *:nth-child(4) { transition-delay: 240ms; } .js [data-stagger].is-in > *:nth-child(5) { transition-delay: 320ms; } .js [data-stagger].is-in > *:nth-child(6) { transition-delay: 400ms; }
.js .logo-wall li, .js .partner-wall li { opacity: 0; transform: scale(.85); transition: opacity .5s var(--ease), transform .5s var(--ease), filter .3s ease; transition-delay: calc(var(--k, 0) * 22ms); }
.js .logo-wall.is-visible li, .js .partner-wall.is-visible li { opacity: 1; transform: none; }
.logo-wall li:hover { transform: translateY(-4px) scale(1.06) !important; }

/* Magnetic buttons and hover polish */
.magnetic { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.download-cover img, .post-image img, .impact-photo img { transition: transform .8s var(--ease); }
.download-card:hover .download-cover img, .post:hover .post-image img, .impact-photo:hover img { transform: scale(1.05); }

/* Trust strip */
.trust-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding-top: 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-item .eyebrow { margin: 0; }
.trust-item img { height: 30px; width: auto; }
.trust-item .trust-iso { height: 64px; border-radius: 6px; }
.trust-item p { font-size: 14px; color: var(--ink-soft); max-width: 380px; }

/* Opportunity */
.opp-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: end; margin-bottom: 56px; }
.opp-copy { display: grid; gap: 14px; border-left: 4px solid var(--blue); padding-left: 24px; color: var(--ink-soft); font-size: 18px; }
.opp-copy strong { color: var(--ink); }
.outcome-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.outcome-row li { padding: 28px 24px; border-radius: 20px; background: var(--soft-blue); display: grid; gap: 6px; transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s ease; }
.outcome-row li:hover { transform: translateY(-6px); background: #fff; box-shadow: 0 24px 48px -30px rgba(34, 26, 53, .6); }
.outcome-row b { font: italic 500 clamp(24px, 2.2vw, 32px)/1.1 var(--serif); }
.outcome-row span { color: var(--ink-soft); font-size: 15px; }

/* Flow: the platform connects your data (not the centre of the universe) */
.flow-stage { position: relative; display: grid; grid-template-columns: 200px 1fr 280px; align-items: center; min-height: 440px; margin-top: 24px; }
.flow-col { display: grid; gap: 12px; position: relative; z-index: 2; }
.flow-sources li { display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line-light); font: 600 13px var(--sans); letter-spacing: .06em; text-transform: uppercase; transition: background-color .3s ease, transform .3s var(--ease); }
.flow-sources li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 0 var(--c); animation: srcPulse 3s ease-in-out infinite; }
.flow-sources li:nth-child(2)::before { animation-delay: .5s; } .flow-sources li:nth-child(3)::before { animation-delay: 1s; } .flow-sources li:nth-child(4)::before { animation-delay: 1.5s; } .flow-sources li:nth-child(5)::before { animation-delay: 2s; } .flow-sources li:nth-child(6)::before { animation-delay: 2.5s; }
.flow-sources li:hover { background: rgba(103,203,223,.16); transform: translateX(6px); }
@keyframes srcPulse { 50% { box-shadow: 0 0 14px 2px var(--c); } }
.flow-lines { position: absolute; inset: 0 280px 0 200px; width: calc(100% - 480px); height: 100%; z-index: 1; }
.flow-lines path { fill: none; stroke: rgba(103,203,223,.25); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.flow-lines path { stroke-dasharray: 3 14; }
.js .flow-stage.is-visible .flow-lines path { stroke: var(--blue); animation: dash 1.6s linear infinite; }
.flow-out path { stroke-dasharray: 3 14; }
@keyframes dash { to { stroke-dashoffset: -34; } }
.flow-core { position: relative; z-index: 2; justify-self: center; width: min(300px, 100%); padding: 30px 26px 24px; border-radius: 26px; text-align: center; background: linear-gradient(160deg, #2C2344, #221A35); border: 1px solid rgba(103,203,223,.5); box-shadow: 0 0 60px -16px rgba(103,203,223,.6); }
.flow-core-ring { position: absolute; inset: -10px; border-radius: 32px; border: 1px dashed rgba(103,203,223,.4); animation: ringSpin 30s linear infinite; pointer-events: none; }
@keyframes ringSpin { to { filter: hue-rotate(0); border-color: rgba(183,100,165,.5); } }
.flow-core img { width: 82%; margin: 0 auto; }
.flow-core-sub { margin-top: 12px; font: italic 15px var(--serif); color: var(--blue); }
.flow-core-built { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.flow-core-built img { width: 110px; margin: 0; }
.flow-outcomes li { display: grid; gap: 2px; padding: 12px 0 12px 18px; border-left: 2px solid rgba(103,203,223,.35); transition: border-color .3s ease, padding-left .3s var(--ease); }
.flow-outcomes li:hover { border-color: var(--blue); padding-left: 24px; }
.flow-outcomes b { font: 300 24px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.flow-outcomes span { font-size: 14px; color: rgba(255,255,255,.72); }
.flow-note { margin-top: 40px; text-align: center; font: 600 14px var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.flow-note em { color: var(--blue); font-style: normal; }

/* Signature products */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.product-card { display: grid; gap: 10px; align-content: start; padding: 30px 26px; border-radius: 24px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease; transform-style: preserve-3d; }
.product-card:hover { border-color: rgba(103,203,223,.6); box-shadow: 0 34px 60px -38px rgba(34, 26, 53, .7); }
.product-card > img { width: 120px; height: auto; margin-bottom: 8px; transition: transform .6s var(--ease); }
.product-card:hover > img { transform: rotate(-8deg) scale(1.06); }
.product-card .product-cover { width: 96px; border-radius: 6px; box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); }
.product-kicker { font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.product-card h3 { font: 500 26px/1.15 var(--serif); }
.product-card p:not(.product-kicker) { color: var(--ink-soft); font-size: 15px; }
.product-card .link-arrow { margin-top: 6px; }

/* Value calculator with sliding bars */
.calc { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; background: #fff; border-radius: 28px; padding: 32px; box-shadow: 0 40px 80px -60px rgba(34,26,53,.8); }
.calc-inputs { display: grid; gap: 28px; padding: 8px 12px; }
.slider { display: grid; grid-template-columns: 1fr auto; gap: 10px; font: 600 15px var(--sans); }
.slider output { font: 700 20px var(--sans); color: var(--navy); transition: color .2s ease; }
.slider input { grid-column: 1 / -1; width: 100%; appearance: none; -webkit-appearance: none; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--blue) var(--fill, 0%), #E4E2EC var(--fill, 0%)); cursor: pointer; }
.slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 3px solid var(--navy); box-shadow: 0 4px 12px rgba(34,26,53,.3); transition: transform .2s var(--ease); }
.slider input::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid var(--navy); }
.slider input:active::-webkit-slider-thumb, .slider input:hover::-webkit-slider-thumb { transform: scale(1.18); }
.calc-assume { font: italic 15px/1.5 var(--serif); color: var(--ink-soft); }
.calc-result { background: var(--navy); color: #fff; border-radius: 22px; padding: 32px; display: grid; gap: 18px; align-content: center; }
.calc-label { font: 700 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.calc-big { font: 700 clamp(56px, 6vw, 86px)/1 var(--sans); letter-spacing: -.02em; transition: transform .25s var(--ease); }
.calc-big.bump { transform: scale(1.04); }
.calc-bars { display: grid; gap: 14px; }
.calc-bars div { display: grid; grid-template-columns: 1fr auto; gap: 6px; font-size: 14px; color: rgba(255,255,255,.8); }
.calc-bars b { color: #fff; font-size: 18px; }
.calc-bars i { grid-column: 1 / -1; height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.calc-bars em { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--purple)); transition: width .7s var(--ease); }
.calc dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.calc dt { font: 600 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.calc dd { margin: 0; font: 700 24px var(--sans); }
.link-light { color: #fff; background: none; border: 0; cursor: pointer; padding: 0; justify-self: start; }

/* Impact bars and cost of inaction */
.impact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.impact-photo { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; }
.impact-photo img { width: 100%; height: 100%; object-fit: cover; }
.bars { display: grid; gap: 24px; margin-top: 24px; }
.bars-top { display: flex; justify-content: space-between; align-items: baseline; font: 600 14px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.bars-top b { font: 700 34px var(--sans); letter-spacing: 0; color: var(--navy); }
.bars-track { height: 12px; border-radius: 6px; background: #E9E7F0; margin: 8px 0; overflow: hidden; }
.bars-track i { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--blue), var(--purple)); transition: width 1.6s var(--ease); }
.bars.is-in .bars-track i { width: calc(var(--v) * 1%); }
.bars p { color: var(--ink-soft); font-size: 15px; }
.coi { margin-top: 72px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; padding: 40px; border-radius: 28px; background: var(--soft-blue); }
.coi-title { font: 500 clamp(28px, 3vw, 40px)/1.15 var(--serif); margin-bottom: 14px; }
.coi-title em { color: var(--blue-ink); font-style: italic; }
.coi-head p:last-child { color: var(--ink-soft); }
.coi-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.coi-tabs button { text-align: left; display: grid; gap: 6px; padding: 20px; border-radius: 18px; border: 1px solid transparent; background: #fff; cursor: pointer; transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.coi-tabs b { font: 700 14px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.coi-tabs span { color: var(--ink-soft); font-size: 15px; }
.coi-tabs button:hover { transform: translateY(-3px); }
.coi-tabs button[aria-selected='true'] { border-color: var(--blue); box-shadow: 0 18px 40px -26px rgba(34,26,53,.7); }
.coi-tabs button[aria-selected='true'] b { color: var(--blue-ink); }

/* News feed (Daily briefing) */
.news-updated { margin-top: 12px; font: 500 13px var(--sans); color: var(--ink-soft); }
.news-updated::before { content: ''; display: inline-block; vertical-align: 1px; margin: 0 10px 0 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(103,203,223,.25); }
.news-updated[hidden] { display: none; }
.news-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.news-filters button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 13px var(--sans); cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.news-filters button:hover { border-color: var(--navy); }
.news-filters button[aria-selected='true'] { background: var(--navy); color: #fff; border-color: var(--navy); }
.news-filters button:focus-visible, .news-link:focus-visible, .ticker-toggle:focus-visible { outline: 3px solid var(--blue-deep); outline-offset: 3px; }
.ticker { display: flex; align-items: center; gap: 12px; margin: 8px 0 32px; padding: 12px 0; border-block: 1px solid var(--line); }
.ticker[hidden] { display: none; }
.ticker-viewport { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; gap: 48px; width: max-content; animation: tick 60s linear infinite; font: 500 14px var(--sans); color: var(--ink-soft); }
.ticker-track span { white-space: nowrap; }
.ticker-track span::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); margin-right: 10px; vertical-align: 2px; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track, .ticker.is-paused .ticker-track { animation-play-state: paused; }
.ticker-toggle { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; transition: border-color .2s ease; }
.ticker-toggle:hover { border-color: var(--navy); }
.ticker.is-paused .ticker-toggle svg { display: none; }
.ticker.is-paused .ticker-toggle::before { content: ''; width: 0; height: 0; margin-left: 2px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
@keyframes tick { to { transform: translateX(-50%); } }
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.news-card { border-radius: 20px; background: #fff; border: 1px solid var(--line); animation: cardIn .5s var(--ease) both; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.news-card:hover, .news-card:focus-within { transform: translateY(-4px); box-shadow: 0 24px 40px -30px rgba(34,26,53,.7); border-color: rgba(103,203,223,.7); }
@keyframes cardIn { from { opacity: 0; transform: translateY(14px); } }
.news-link { height: 100%; padding: 24px; border-radius: inherit; display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; text-decoration: none; color: inherit; }
.news-meta { display: flex; justify-content: space-between; gap: 12px; font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-ink); }
.news-meta span:last-child { color: var(--ink-soft); letter-spacing: 0; text-transform: none; font-weight: 500; text-align: right; }
.news-card h3 { font: 500 20px/1.3 var(--serif); overflow-wrap: anywhere; }
.news-link:hover h3 { text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.news-card p { font-size: 14px; color: var(--ink-soft); }
.news-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); font: 500 13px var(--sans); color: var(--ink-soft); }
.news-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--navy); }
.news-go svg { transition: transform .3s var(--ease); }
.news-link:hover .news-go svg { transform: translate(2px, -2px); }
.news-skeleton { padding: 24px; display: grid; gap: 12px; min-height: 230px; animation: none; }
.news-skeleton span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #ECEAF2 25%, #F6F5FA 50%, #ECEAF2 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.news-skeleton span:nth-child(1) { width: 40%; }
.news-skeleton span:nth-child(2) { height: 20px; width: 90%; }
.news-skeleton span:nth-child(3) { height: 20px; width: 70%; }
.news-skeleton span:nth-child(4) { width: 100%; margin-top: 12px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.news-empty { grid-column: 1 / -1; padding: 40px 24px; border-radius: 20px; border: 1px dashed var(--line); text-align: center; font: italic 17px var(--serif); color: var(--ink-soft); background: rgba(255,255,255,.6); }
.news-note { margin-top: 20px; font: italic 14px var(--serif); color: var(--ink-soft); }

/* Sponsorship teaser */
.sponsor-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: center; }
.sponsor-logo { aspect-ratio: 1; max-width: 320px; border-radius: 50%; border: 2px dashed rgba(103,203,223,.6); display: grid; place-items: center; text-align: center; padding: 24px; font: 600 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); animation: bob 7s ease-in-out infinite; }
.sponsor .lead { margin: 16px 0 28px; }

/* Responsive */
@media (max-width: 1100px) {
  .flow-stage { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
  .flow-lines { display: none; }
  .flow-sources { grid-template-columns: repeat(3, 1fr); }
  .flow-outcomes { grid-template-columns: 1fr 1fr; }
  .product-grid { grid-template-columns: 1fr 1fr; }
  .outcome-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .opp-grid, .calc, .impact-grid, .coi, .sponsor-grid { grid-template-columns: 1fr; }
  .news-grid { grid-template-columns: 1fr 1fr; }
  .hero-chip-a { left: 0; } .hero-chip-b { right: 0; }
  .coi { padding: 24px; }
}
@media (max-width: 600px) {
  .flow-sources, .flow-outcomes, .product-grid, .outcome-row, .coi-tabs { grid-template-columns: 1fr; }
  .calc { padding: 16px; }
  .news-grid { grid-template-columns: 1fr; }
  .news-link { padding: 20px; }
  .hero-chip { font-size: 11px; padding: 8px 12px; }
  .hero-chip b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-split] .w > span, .js .anim-hero, .js [data-stagger] > *, .js .logo-wall li, .js .partner-wall li { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .hero-chip, .flow-sources li::before, .flow-core-ring, .ticker-track, .sponsor-logo, .news-card, .js .flow-stage.is-visible .flow-lines path { animation: none !important; }
  .ticker { display: none !important; }
  .news-skeleton span { animation: none; }
  .bars-track i, .calc-bars em { transition: none; }
}

/* Sponsorship page */
.sponsor-hero { min-height: 0; padding-block: 140px 100px; }
.sponsor-logo-lg { width: min(380px, 80vw); max-width: none; margin-inline: auto; background: rgba(255,255,255,.04); }
.athlete-photo { aspect-ratio: 4 / 5; border-radius: 28px; background: var(--soft-blue); display: grid; place-items: center; font: 600 13px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.outcome-row-3 { grid-template-columns: repeat(3, 1fr); margin-top: 28px; }
@media (max-width: 600px) { .outcome-row-3 { grid-template-columns: 1fr; } }

/* Corporate blue for the join panel and team labels */
.team-join { background: linear-gradient(135deg, #2FA9C4, #67CBDF) !important; color: #fff; }
.team-join .callout-big em { color: var(--navy); }
.team-group-title { color: var(--blue-ink) !important; }
.team .person img { transition: transform .5s var(--ease), filter .5s ease; }
.team .person:hover img { transform: scale(1.06); }

.sponsor-hero .hero-visual::before, .sponsor-hero .hero-visual::after { display: none; }
.sponsor-hero .hero-visual { display: grid; place-items: center; }

/* =====================================================================
   How we do it: matches the GJI23786 CDIP artwork. Data assets feed the
   Customer.ai panel and a consolidated hub, which then activates the
   outcomes on the right. Customology is beside the business, not its centre.
   ===================================================================== */
.cdip-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 80px 300px; align-items: start; gap: 0 12px; margin-top: 40px; }
.cdip-wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.cdip-wires path { fill: none; stroke: #67CBDF; stroke-width: 1.4; opacity: .9; filter: drop-shadow(0 0 4px rgba(103,203,223,.9)); }
.cdip-wires .wire-flow { stroke: #fff; stroke-width: 1.6; stroke-dasharray: 2 18; opacity: .9; }
.cdip-wires circle { fill: #fff; filter: drop-shadow(0 0 6px #67CBDF); }
.js .cdip-stage .cdip-wires path.wire { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.6s var(--ease) .5s; }
.js .cdip-stage.is-on .cdip-wires path.wire { stroke-dashoffset: 0; }
.js .cdip-stage.is-on .cdip-wires .wire-flow { animation: wireFlow 1.4s linear infinite; }
@keyframes wireFlow { to { stroke-dashoffset: -40; } }

.cdip-main { position: relative; z-index: 2; display: grid; gap: 0; }
.cdip-top { display: grid; grid-template-columns: minmax(0, 1fr) 80px 210px; align-items: start; }
.cdip-label { font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.85); text-align: center; }
.cdip-assets ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 18px; }
.cdip-assets li { display: grid; justify-items: center; gap: 12px; text-align: center; font: 700 11px/1.35 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.cdip-db { position: relative; width: clamp(54px, 5.6vw, 80px); aspect-ratio: 1; border-radius: 50%; background: var(--c) no-repeat center / 46% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.4'%3E%3Cellipse cx='12' cy='5' rx='8' ry='2.6'/%3E%3Cpath d='M4 5v14c0 1.4 3.6 2.6 8 2.6s8-1.2 8-2.6V5M4 9.7c0 1.4 3.6 2.6 8 2.6s8-1.2 8-2.6M4 14.4c0 1.4 3.6 2.6 8 2.6s8-1.2 8-2.6M8 8.4h1.5M8 13h1.5M8 17.7h1.5'/%3E%3C/svg%3E"); transition: transform .4s var(--ease), box-shadow .4s ease; }
.cdip-assets li.is-light .cdip-db { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221A35' stroke-width='1.4'%3E%3Cellipse cx='12' cy='5' rx='8' ry='2.6'/%3E%3Cpath d='M4 5v14c0 1.4 3.6 2.6 8 2.6s8-1.2 8-2.6V5M4 9.7c0 1.4 3.6 2.6 8 2.6s8-1.2 8-2.6M4 14.4c0 1.4 3.6 2.6 8 2.6s8-1.2 8-2.6M8 8.4h1.5M8 13h1.5M8 17.7h1.5'/%3E%3C/svg%3E"); }
.cdip-assets li:hover .cdip-db { transform: translateY(-4px) scale(1.06); box-shadow: 0 0 0 6px rgba(255,255,255,.08), 0 0 30px var(--c); }
.js .cdip-assets li { opacity: 0; transform: translateY(16px) scale(.9); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--i) * 90ms); }
.js .cdip-stage.is-on .cdip-assets li { opacity: 1; transform: none; }

/* Dotted chevron arrows, drawn by JS as a grid of dots */
.cdip-arrow { display: block; height: 90px; margin-top: 46px; }
.cdip-arrow svg { width: 100%; height: 100%; overflow: visible; }
.cdip-arrow circle { fill: #67CBDF; animation: arrowDots 1.8s ease-in-out infinite; animation-delay: calc(var(--x) * 60ms); }
@keyframes arrowDots { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.cdip-arrow-out { margin-top: 46px; }

/* Consolidated data assets hub */
.cdip-hub { position: relative; width: 210px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #2F2650, #221A35 70%); box-shadow: 0 0 0 2px rgba(103,203,223,.7), 0 0 50px rgba(103,203,223,.45), inset 0 0 40px rgba(103,203,223,.15); margin-top: 0; }
.cdip-hub-text { position: absolute; inset: 0; animation: hubSpin 40s linear infinite; }
.cdip-hub-text text { fill: #fff; font: 600 13px var(--sans); letter-spacing: .32em; }
@keyframes hubSpin { to { transform: rotate(360deg); } }
.cdip-layers { position: absolute; left: 22%; top: 26%; width: 56%; overflow: visible; }
.cdip-layers .layer { transition: transform .8s var(--ease); }
.js .cdip-stage:not(.is-on) .cdip-layers .layer-1 { transform: translateY(-14px); }
.js .cdip-stage:not(.is-on) .cdip-layers .layer-3 { transform: translateY(14px); }
.cdip-hub:hover .layer-1 { transform: translateY(-4px); }
.cdip-hub:hover .layer-3 { transform: translateY(4px); }
.js .cdip-hub { opacity: 0; transform: scale(.8); transition: opacity .8s var(--ease) .4s, transform .8s var(--ease) .4s; }
.js .cdip-stage.is-on .cdip-hub { opacity: 1; transform: none; }

/* The Customer.ai panel */
.cdip-panel { position: relative; display: grid; grid-template-columns: 1.15fr .6fr 1fr; align-items: center; gap: 24px; margin-top: 110px; padding: 36px 40px 28px; border-radius: 34px; border: 2px solid rgba(103,203,223,.85); box-shadow: 0 0 34px -6px rgba(103,203,223,.55), inset 0 0 40px -10px rgba(103,203,223,.35); background: rgba(34,26,53,.6); }
.js .cdip-panel { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease) .2s, transform .9s var(--ease) .2s; }
.js .cdip-stage.is-on .cdip-panel { opacity: 1; transform: none; }
.cdip-cai img { width: min(100%, 320px); }
.cdip-built { display: grid; justify-items: center; gap: 12px; }
.cdip-databricks { width: 150px; }
.cdip-iso { width: 64px; border-radius: 6px; }
.cdip-caps { display: grid; gap: 16px; padding-top: 64px; }
.cdip-caps ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cdip-caps img { width: 100%; max-width: 110px; margin: 0 auto; transition: transform .4s var(--ease); }
.cdip-caps li:hover img { transform: scale(1.08) rotate(-4deg); }
.js .cdip-caps li { opacity: 0; transform: scale(.7); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .cdip-stage.is-on .cdip-caps li { opacity: 1; transform: none; }
.js .cdip-stage.is-on .cdip-caps li:nth-child(1) { transition-delay: 1.4s; } .js .cdip-stage.is-on .cdip-caps li:nth-child(2) { transition-delay: 1.55s; } .js .cdip-stage.is-on .cdip-caps li:nth-child(3) { transition-delay: 1.7s; }

/* Outcomes on the right */
.cdip-outcomes { position: relative; z-index: 2; display: grid; gap: 0; align-self: stretch; }
.cdip-outcomes li { display: grid; grid-template-columns: 76px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 2px solid rgba(103,203,223,.55); }
.cdip-outcomes li:first-child { padding-top: 6px; }
.cdip-glass { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.4), rgba(255,255,255,.05) 55%, rgba(255,255,255,.12)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45), 0 10px 24px -12px rgba(0,0,0,.8); transition: transform .4s var(--ease), box-shadow .4s ease; }
.cdip-glass svg { width: 40px; height: 40px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cdip-outcomes li:hover .cdip-glass { transform: scale(1.06); box-shadow: inset 0 0 0 1.5px #67CBDF, 0 0 26px rgba(103,203,223,.55); }
.cdip-outcomes h3 { font: 400 30px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.cdip-outcomes p { font-size: 14px; color: rgba(255,255,255,.85); margin-top: 4px; }
.cdip-outcomes .cdip-g2g { display: block; border: 0; padding-top: 22px; }
.cdip-g2g img { width: 100%; max-width: 300px; }
.js .cdip-outcomes li { opacity: 0; transform: translateX(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .cdip-stage.is-on .cdip-outcomes li { opacity: 1; transform: none; transition-delay: calc(1.8s + var(--i, 4) * 120ms); }

@media (max-width: 1180px) {
  .cdip-stage { grid-template-columns: 1fr; }
  .cdip-arrow-out { transform: rotate(90deg); height: 70px; width: 90px; margin: 24px auto 0; }
  .cdip-outcomes { grid-template-columns: 1fr 1fr; column-gap: 32px; margin-top: 12px; }
  .cdip-outcomes .cdip-g2g { grid-column: 1 / -1; text-align: center; } .cdip-g2g img { margin: 0 auto; }
}
@media (max-width: 860px) {
  .cdip-wires { display: none; }
  .cdip-top { grid-template-columns: 1fr; justify-items: center; }
  .cdip-top .cdip-arrow { transform: rotate(90deg); height: 70px; width: 90px; margin: 16px auto; }
  .cdip-assets ul { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .cdip-panel { grid-template-columns: 1fr; text-align: center; justify-items: center; margin-top: 32px; padding: 28px 22px; }
  .cdip-caps { padding-top: 0; }
  .cdip-cai { justify-self: center; }
  .cdip-cai img { margin-inline: auto; }
  .cdip-outcomes { grid-template-columns: 1fr; }
  .cdip-outcomes h3 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .cdip-assets li, .js .cdip-hub, .js .cdip-panel, .js .cdip-caps li, .js .cdip-outcomes li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cdip-hub-text, .cdip-arrow circle, .js .cdip-stage.is-on .cdip-wires .wire-flow { animation: none !important; }
  .js .cdip-stage .cdip-wires path.wire { stroke-dashoffset: 0; transition: none; }
}

.cdip { overflow-x: clip; }

/* ---------- v5 polish sweep ---------- */
/* Contact: last yellow leftovers move to confidence blue */
.contact-punch { color: var(--blue) !important; }
/* Partner logos: knock out the off-white boxes baked into some files, even out optical sizes */
.partner-wall img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.12) brightness(1.04); }
.partner-wall li:hover img { filter: contrast(1.12) brightness(1.04); }
.partner-wall img[src*="surveymonkey"] { transform: scale(.75); }
.partner-wall img[src*="ncr"], .partner-wall img[src*="ibm-marketing"], .partner-wall img[src*="campaign-monitor"] { transform: scale(1.35); }
/* Product cards: same-height icon box and kicker block so titles line up across the row */
.product-card > img { height: 120px; width: auto; max-width: 130px; object-fit: contain; }
.product-card .product-cover { height: 120px; width: auto; }
@media (min-width: 1000px) { .product-kicker { min-height: 2.7em; display: flex; align-items: flex-end; } }
/* Sponsorship closing CTA: breathing room under the lead line */
.section-head .sponsor-cta { margin-top: 18px; justify-self: center; }
/* CDIP panel: drop the dark boxes baked into the Customer.ai and Databricks files */
.cdip-cai img, .cdip-databricks { mix-blend-mode: lighten; }

/* =====================================================================
   v5 sub-pages and dropdown navigation (6 Nov 2026)
   Platform, Customer Growth Analysis, ISO 27001, News, Article, About,
   Contact, Download, Thank you and the legal templates. Shared page hero,
   dropdown nav (hover, keyboard, mobile accordion) and the new blocks.
   Everything respects prefers-reduced-motion.
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Dropdown navigation ---- */
.site-nav > ul > li { position: relative; }
.nav-parent { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer; padding: 6px 0; font: 500 0.9rem var(--sans); color: inherit; border-bottom: 2px solid transparent; white-space: nowrap; transition: border-color .25s, color .25s; }
.nav-parent svg { width: 12px; height: 12px; flex: none; transition: transform .3s var(--ease); }
.nav-parent:hover, .has-menu.is-open > .nav-parent, .has-menu.is-current > .nav-parent, .site-nav > ul > li > a[aria-current="page"] { border-bottom-color: var(--blue); }
.has-menu.is-open > .nav-parent svg { transform: rotate(180deg); }
.nav-parent:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.nav-menu { position: absolute; top: calc(100% + 12px); left: -14px; min-width: 250px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 60px -24px rgba(34,26,53,.45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s; z-index: 60; }
.nav-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.has-menu.is-open > .nav-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.site-nav .nav-menu a { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border-bottom: 0; white-space: nowrap; font-size: .9rem; font-weight: 500; transition: background-color .2s ease, color .2s ease; }
.site-nav .nav-menu a:hover { background: var(--soft-blue); color: var(--navy); }
.site-nav .nav-menu a[aria-current="page"] { background: var(--soft-blue); color: var(--blue-ink); }
.nav-menu a svg { width: 13px; height: 13px; opacity: .55; }
@media (max-width: 1100px) { .nav-parent { font-size: 0.82rem; } }
@media (max-width: 900px) {
  .site-nav > ul > li { position: static; }
  .nav-parent { display: flex; width: 100%; justify-content: space-between; padding: 16px 0; font: 400 1.3rem var(--serif); color: #fff; border-bottom: 1px solid var(--line-light); border-radius: 0; }
  .nav-parent:hover, .has-menu.is-open > .nav-parent, .has-menu.is-current > .nav-parent { border-bottom-color: var(--blue); }
  .nav-parent svg { width: 18px; height: 18px; }
  .nav-menu { position: static; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
  .nav-menu::before { display: none; }
  .has-menu.is-open > .nav-menu { max-height: 480px; }
  .site-nav .nav-menu a { padding: 13px 0 13px 22px; font: 400 1.02rem var(--sans); color: rgba(255,255,255,.82); border-bottom: 1px solid rgba(255,255,255,.08); border-radius: 0; white-space: normal; }
  .site-nav .nav-menu li:last-child a { border-bottom: 1px solid var(--line-light); }
  .site-nav .nav-menu a:hover, .site-nav .nav-menu a[aria-current="page"] { background: transparent; color: var(--blue); }
}

/* ---- Page hero (sub-pages) ---- */
.page-hero { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 96px); }
.page-hero::before { content: ''; position: absolute; right: -12%; top: -30%; width: 58vw; max-width: 760px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(103,203,223,.26), transparent 62%); pointer-events: none; }
.page-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.page-hero-inner.is-single { grid-template-columns: minmax(0, 820px); }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }
.page-hero .lead { color: rgba(255,255,255,.8); margin-top: 22px; }
.page-hero .lead a { color: var(--blue); }
.page-hero .hero-actions { margin-top: 32px; }
.page-hero-light { background: var(--mist); color: var(--ink); }
.page-hero-light::before { background: radial-gradient(circle, rgba(103,203,223,.3), transparent 62%); }
.page-hero-light .lead { color: var(--ink-soft); }
.page-hero-light .lead a { color: var(--blue-ink); }
.page-hero-visual { position: relative; transition: transform .2s linear; }
.js .page-hero-visual > :first-child { opacity: 0; transform: translateY(18px); animation: heroIn .9s var(--ease) .3s forwards; }
.hero-photo { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 40px 80px -40px rgba(0,0,0,.8); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; font: 500 13px var(--sans); color: rgba(255,255,255,.6); }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.crumbs a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.crumbs [aria-current] { color: #fff; }
.page-hero-light .crumbs, .article-hero .crumbs { color: var(--ink-soft); }
.page-hero-light .crumbs [aria-current], .article-hero .crumbs [aria-current] { color: var(--ink); }
.page-hero-light .crumbs a:hover, .article-hero .crumbs a:hover { color: var(--blue-ink); }
.crumbs-top { margin-bottom: 0; }

/* Shared small blocks */
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px; margin-top: 28px; }
.section-head:not(.section-head-center) .cta-actions { justify-content: flex-start; }
.link-on-navy { color: #fff; }
.prose { display: grid; gap: 16px; margin-top: 18px; color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.prose strong { color: var(--ink); }
.h3-serif { font: 500 1.6rem/1.2 var(--serif); margin-bottom: 18px; }
.section-foot-link { margin-top: 36px; text-align: center; }
.outcome-row-2 { grid-template-columns: repeat(2, 1fr); }
.contact-details-center { align-items: center; margin: 24px 0 0; }
.section-head-center .contact-details-center { margin-inline: auto; }

/* Glow panel (Customer.AI and ISO hero visuals) */
.glow-panel { position: relative; display: grid; justify-items: center; gap: 20px; padding: 36px 34px 30px; border-radius: 34px; border: 2px solid rgba(103,203,223,.85); box-shadow: 0 0 34px -6px rgba(103,203,223,.55), inset 0 0 40px -10px rgba(103,203,223,.35); background: rgba(34,26,53,.6); text-align: center; }
.glow-panel > img:first-child { width: min(100%, 320px); mix-blend-mode: lighten; }
.glow-sub { font: italic 15px/1.5 var(--serif); color: var(--blue); }
.glow-built { display: flex; align-items: center; gap: 14px; font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.glow-built img { height: 30px; width: auto; mix-blend-mode: lighten; }
.glow-built .glow-iso { height: 56px; border-radius: 6px; mix-blend-mode: normal; }
.glow-badges { display: flex; gap: 14px; padding-top: 10px; border-top: 1px solid var(--line-light); width: 100%; justify-content: center; }
.glow-badges li { width: 78px; transition: transform .4s var(--ease); }
.glow-badges li:hover { transform: translateY(-4px) rotate(-4deg); }
.glow-panel-iso { padding-top: 40px; }
.glow-panel-iso .glow-iso-lg { width: 120px; mix-blend-mode: normal; border-radius: 10px; box-shadow: 0 20px 40px -20px rgba(0,0,0,.8); animation: bob 7s ease-in-out infinite; }
.glow-panel-iso .glow-sub { color: rgba(255,255,255,.85); font-style: normal; font: 600 12px/1.6 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* Trust grid (platform, ISO) */
.trust-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.trust-grid .lead + .lead { margin-top: 14px; }
.trust-grid .hero-actions { margin-top: 28px; }
.trust-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.trust-cards li { display: grid; align-content: center; justify-items: center; gap: 12px; min-height: 150px; padding: 22px 18px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid var(--line-light); text-align: center; transition: background-color .3s ease, transform .3s var(--ease); }
.trust-cards li:hover { background: rgba(103,203,223,.12); transform: translateY(-4px); }
.trust-cards img { height: 34px; width: auto; mix-blend-mode: lighten; }
.trust-cards .trust-cards-iso { height: 64px; border-radius: 6px; mix-blend-mode: normal; }
.trust-cards b { font: 700 28px/1 var(--sans); color: var(--blue); letter-spacing: .04em; }
.trust-cards span { font-size: 13px; color: rgba(255,255,255,.75); }

/* Partner note and the quieter legacy products */
.partner-note { margin-top: 32px; text-align: center; color: var(--ink-soft); font-size: 15px; }
.partner-note .link-arrow { margin-left: 6px; }
.legacy-title { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.legacy-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.legacy-card { display: grid; gap: 6px; align-content: start; padding: 22px 22px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.legacy-card:hover { transform: translateY(-3px); border-color: rgba(103,203,223,.6); box-shadow: 0 20px 40px -30px rgba(34,26,53,.6); }
.legacy-kicker { font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.legacy-card h3 { font: 600 16px var(--sans); }
.legacy-card p:not(.legacy-kicker) { font-size: 14px; color: var(--ink-soft); }
.legacy-card .link-arrow { font-size: 13px; margin-top: 4px; }

/* Customer Growth Analysis */
.reveals-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; margin-top: 56px; }
.reveals-copy { color: var(--ink-soft); font-size: 17px; line-height: 1.65; }
.reveals-copy + .reveals-copy { margin-top: 16px; }
.reveals-copy strong { color: var(--ink); }
.steps { position: relative; display: grid; gap: 28px; max-width: 920px; margin: 0 auto; }
.steps::before, .steps::after { content: ''; position: absolute; left: 35px; top: 36px; bottom: 36px; width: 2px; }
.steps::before { background: var(--line); }
.steps::after { background: linear-gradient(var(--blue), var(--purple)); transform: scaleY(0); transform-origin: top; transition: transform 1.8s var(--ease) .2s; }
.steps.is-in::after { transform: none; }
.step { display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: start; }
.step-num { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--blue); color: var(--blue-ink); font: 700 20px var(--sans); box-shadow: 0 0 0 8px var(--mist); transition: background-color .3s ease, color .3s ease, transform .3s var(--ease); }
.step:hover .step-num { background: var(--blue); color: var(--navy); transform: scale(1.06); }
.step-card { position: relative; display: grid; gap: 10px; padding: 28px 110px 28px 30px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease; }
.step-card:hover { transform: translateY(-4px); border-color: rgba(103,203,223,.6); box-shadow: 0 30px 50px -40px rgba(34,26,53,.7); }
.step-kicker { font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-ink); }
.step-card h3 { font: 500 24px/1.15 var(--serif); }
.step-card > p:not(.step-kicker) { color: var(--ink); font-weight: 500; font-size: 16px; }
.step-card ul { display: grid; gap: 6px; }
.step-card li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-soft); }
.step-card li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.step-icon { position: absolute; right: 26px; top: 26px; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--soft-blue); color: var(--blue-ink); transition: transform .4s var(--ease), background-color .3s ease; }
.step-icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.step-card:hover .step-icon { transform: rotate(-6deg) scale(1.06); }
.after-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.after-list { display: grid; gap: 14px; }
.after-list li { display: grid; grid-template-columns: 72px 1fr; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 20px; background: var(--soft-blue); transition: transform .3s var(--ease), background-color .3s ease; }
.after-list li:hover { transform: translateX(6px); background: #fff; box-shadow: 0 24px 48px -30px rgba(34,26,53,.6); }
.after-list img { width: 72px; height: 72px; object-fit: contain; }
.after-list h3 { font: 500 20px/1.2 var(--serif); }
.after-list p { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }

/* ISO 27001 and compliance */
.isms-grid, .privacy-grid, .details-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.isms-card { padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: var(--navy); color: #fff; }
.isms-intro { color: rgba(255,255,255,.8); font-size: 15px; margin-bottom: 18px; }
.isms-list { display: grid; gap: 10px; counter-reset: isms; }
.isms-list li { position: relative; padding: 12px 14px 12px 50px; border-radius: 12px; background: rgba(255,255,255,.06); font-size: 14px; line-height: 1.5; counter-increment: isms; transition: background-color .3s ease; }
.isms-list li::before { content: counter(isms, decimal-leading-zero); position: absolute; left: 14px; top: 11px; font: 700 13px var(--sans); color: var(--blue); }
.isms-list li:hover { background: rgba(103,203,223,.16); }
.doc-list { display: grid; gap: 10px; }
.doc-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line); background: #fff; text-decoration: none; transition: transform .3s var(--ease), border-color .3s ease, box-shadow .3s ease; }
.doc-list a:hover { transform: translateX(4px); border-color: rgba(103,203,223,.7); box-shadow: 0 20px 40px -30px rgba(34,26,53,.6); }
.doc-list a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.doc-list span { display: grid; gap: 2px; }
.doc-list b { font-weight: 600; }
.doc-list small { font-size: 13px; color: var(--ink-soft); }
.doc-list svg { flex: none; color: var(--blue-ink); }
.details { display: grid; gap: 10px; margin: 0; }
.details div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); font-size: 15px; }
.details dt { font-weight: 600; }
.details dd { margin: 0; color: var(--ink-soft); }
.details a { color: var(--blue-ink); text-decoration: none; }
.details a:hover { text-decoration: underline; }

/* News index */
.post-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 8px; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.post-meta .post-cat { color: var(--blue-ink); }
.post-meta time { color: var(--ink-soft); font-weight: 500; letter-spacing: .08em; }
.post .post-meta time { margin-top: 0; }
.post.is-shown { animation: cardIn .45s var(--ease) both; }
.news-empty { margin-top: 24px; text-align: center; color: var(--ink-soft); font: italic 1rem var(--serif); }
.archive-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 28px; margin-top: 48px; padding: 24px 28px; border-radius: 20px; background: var(--soft-blue); color: var(--ink-soft); }
.archive-note strong { color: var(--ink); }

/* Article template */
.article-hero { position: relative; background: var(--mist); padding: 48px 0 0; overflow: hidden; }
.article-hero::before { content: ''; position: absolute; right: -10%; top: -20%; width: 50vw; max-width: 700px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(103,203,223,.28), transparent 62%); pointer-events: none; }
.article-hero .wrap { position: relative; }
.article-head { max-width: 860px; margin: 0 auto; text-align: center; }
.article-head h1 { font-size: clamp(2rem, 4vw, 3.2rem); }
.article-meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; margin-top: 22px; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.article-byline { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.article-byline img { width: 22px; height: auto; }
.article-figure { position: relative; max-width: 1000px; margin: 40px auto -120px; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 80px -40px rgba(34,26,53,.6); background: #fff; }
.article-figure > img:first-child { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-logo { position: absolute; left: 28px; bottom: 28px; width: 84px; height: 84px; border-radius: 50%; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.article-section { padding-top: 160px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(40px, 6vw, 80px); max-width: 1100px; margin: 0 auto; }
.article-body { font-size: 1.08rem; line-height: 1.7; color: var(--ink-soft); }
.article-lead { font: 400 clamp(1.25rem, 2vw, 1.5rem)/1.45 var(--serif); color: var(--ink); margin-bottom: 1.6em; }
.article-body h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--ink); margin: 1.8em 0 .6em; scroll-margin-top: calc(var(--header-h) + 24px); }
.article-body p + p { margin-top: 1.1em; }
.article-body > ul:not(.outcome-row) { display: grid; gap: 10px; margin: 1.2em 0; }
.article-body > ul:not(.outcome-row) li { position: relative; padding-left: 26px; }
.article-body > ul:not(.outcome-row) li::before { content: ''; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.article-stats { margin: 1.2em 0 1.6em; }
.article-stats b { color: var(--blue-ink); }
.article-quote { margin: 2.2em 0; padding: 28px 32px; border-left: 4px solid var(--blue); border-radius: 0 24px 24px 0; background: var(--soft-blue); }
.article-quote p { font: 400 clamp(1.2rem, 2vw, 1.5rem)/1.4 var(--serif); color: var(--ink); }
.article-quote footer { margin-top: 14px; }
.article-quote cite { font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: var(--blue-ink); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2em; }
.tags a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); font: 500 13px var(--sans); text-decoration: none; color: var(--ink); transition: background-color .2s ease, border-color .2s ease; }
.tags a:hover { background: var(--soft-blue); border-color: rgba(103,203,223,.6); }
.article-aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; display: grid; gap: 18px; }
.aside-card { display: grid; gap: 10px; padding: 24px; border-radius: 20px; background: var(--soft-blue); font-size: 15px; color: var(--ink-soft); }
.aside-card .eyebrow { margin-bottom: 2px; }
.aside-card-navy { background: var(--navy); color: rgba(255,255,255,.82); }
.aside-card-navy .pill { justify-self: start; margin-top: 6px; }
.social-dark { margin-top: 4px; }
.social-dark a { border-color: var(--line); color: var(--ink); }
.aside-toc { display: grid; gap: 4px; }
.aside-toc a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); text-decoration: none; color: var(--ink); transition: border-color .2s ease, color .2s ease; }
.aside-toc a:hover, .aside-toc a.is-active { border-color: var(--blue); color: var(--blue-ink); }

/* About and careers */
.discipline-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.discipline { display: grid; gap: 8px; align-content: start; padding: 28px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s ease; }
.discipline:hover { transform: translateY(-6px); border-color: rgba(103,203,223,.6); box-shadow: 0 30px 50px -40px rgba(34,26,53,.7); }
.discipline h3 { font: 500 1.6rem/1.15 var(--serif); }
.discipline p { color: var(--ink-soft); font-size: 15px; }
.about-extension { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 64px); align-items: center; margin-top: 56px; }
.about-extension .prose { margin-top: 0; }
.stat-quote { padding: clamp(28px, 4vw, 40px); border-radius: 8px 8px 72px 8px; background: var(--navy); color: #fff; }
.stat-quote p { font: 400 clamp(1.4rem, 2.4vw, 1.9rem)/1.25 var(--serif); }
.stat-quote em { color: var(--blue); }
.stat-quote footer { margin-top: 18px; }
.stat-quote cite { font: 500 13px var(--sans); font-style: normal; color: rgba(255,255,255,.7); }
.team-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 900px; }
.gji-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 6vw, 72px); align-items: center; }
.gji-logo { display: grid; place-items: center; aspect-ratio: 1; border-radius: 28px; background: #fff; border: 1px solid var(--line); }
.gji-logo img { width: 60%; }
.gji-grid .lead { margin: 16px 0 24px; }
.careers-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.careers-card { display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: #fff; color: var(--navy); }
.careers-card .eyebrow { margin-bottom: 0; }
.careers-card h3 { font: 500 1.6rem/1.2 var(--serif); }
.careers-card p:not(.eyebrow) { color: var(--ink-soft); }
.careers-note { font-size: 14px; }
.careers-note a { color: var(--blue-ink); }
.careers-h3 { font: 500 1.6rem/1.2 var(--serif); margin-bottom: 14px; }
.careers-copy { color: rgba(255,255,255,.8); }
.culture-values { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.culture-values li { padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(103,203,223,.6); color: var(--blue); font: 600 13px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.culture-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 48px; }
.culture-grid li { border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 2; }
.culture-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.culture-grid li:hover img { transform: scale(1.05); }

/* Contact and subscribe */
.contact-page { padding-top: clamp(40px, 5vw, 64px); }
.contact-page .crumbs-top { margin-bottom: 32px; }
.contact-page .contact-copy h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }
.contact-address { margin-top: 8px; color: rgba(255,255,255,.78); line-height: 1.6; }
.contact-address a { color: #fff; text-decoration: none; }
.contact-address a:hover { color: var(--blue); }
.contact-form-title { font: 500 1.6rem/1.2 var(--serif); }
.ways-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ways-card { display: grid; gap: 12px; align-content: start; padding: 28px 24px; border-radius: 20px; border: 1px solid var(--line); transition: transform .4s var(--ease), box-shadow .4s, border-color .3s; }
.ways-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: 0 24px 50px rgba(34,26,53,.1); }
.ways-card h3 { font: 500 1.3rem var(--serif); }
.ways-card p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.ways-card a { color: var(--ink); text-decoration: none; font-weight: 500; }
.ways-card a:hover { color: var(--blue-ink); }
.subscribe-band { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: center; }
.subscribe-band .eyebrow { color: rgba(255,255,255,.85); }
.subscribe-action { display: grid; justify-items: start; gap: 12px; }
.subscribe-note { font-size: 13px; color: rgba(255,255,255,.85); }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote-grid .t-card { background: var(--mist); }
.quote-more { margin-top: 28px; text-align: center; }

/* Gated download and thank-you */
.gate-cover { max-width: 340px; margin: 0 auto; }
.gate-cover img { border-radius: 14px; box-shadow: 0 50px 80px -40px rgba(0,0,0,.85); transform: rotate(-3deg); transition: transform .6s var(--ease); }
.gate-cover:hover img { transform: rotate(0) translateY(-6px); }
.gate { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.gate .lead { margin-top: 0; }
.gate-stats { margin-top: 28px; }
.gate-stats li { background: #fff; }
.gate-stats b { color: var(--blue-ink); }
.gate-points { display: grid; gap: 10px; margin-top: 28px; }
.gate-points li { position: relative; padding-left: 26px; color: var(--ink-soft); }
.gate-points li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.gate-form { box-shadow: 0 40px 80px -60px rgba(34,26,53,.8); }
.gate-form h3 { font-size: 1.35rem; }
.gate-form .form-note a { color: var(--blue-ink); }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.form-check input { margin-top: 3px; accent-color: var(--blue-deep); }
.form-fine { font-size: 12px; color: var(--ink-soft); }
.form-fine a { color: var(--blue-ink); }
.download-grid-2 { grid-template-columns: 1fr 1fr; }
.download-card-wide { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: start; }
.download-card-wide .download-copy { display: grid; gap: 10px; }
.download-card-wide .download-copy .eyebrow { margin-bottom: 0; }
.download-card-wide .download-copy p:not(.eyebrow) { flex: none; }
.download-card-wide .download-copy .pill { margin-top: 6px; justify-self: start; }
.download-card-cga .download-cover img { aspect-ratio: 5 / 6; }
.thanks { padding-block: clamp(72px, 9vw, 120px) clamp(56px, 7vw, 96px); }
.thanks-inner { justify-items: center; text-align: center; }
.thanks .lead { margin-inline: auto; }
.thanks .hero-actions { justify-content: center; }
.thanks-check { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--soft-blue); margin-bottom: 22px; }
.thanks-check svg { width: 56px; height: 56px; fill: none; stroke: var(--blue-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.js .thanks-check circle { stroke-dasharray: 176; stroke-dashoffset: 176; animation: drawIn 1s var(--ease) .3s forwards; }
.js .thanks-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: drawIn .6s var(--ease) 1s forwards; }
@keyframes drawIn { to { stroke-dashoffset: 0; } }

/* Legal templates */
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(40px, 6vw, 80px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 24px); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; padding-right: 8px; }
.legal-toc h2 { font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--blue-ink); margin-bottom: 12px; }
.legal-toc ol { display: grid; gap: 2px; }
.legal-toc a { display: block; padding: 7px 12px; border-left: 2px solid var(--line); font-size: 14px; line-height: 1.4; text-decoration: none; color: var(--ink-soft); transition: border-color .2s ease, color .2s ease, background-color .2s ease; }
.legal-toc a:hover { color: var(--ink); border-color: var(--blue); }
.legal-toc a.is-active { color: var(--blue-ink); border-color: var(--blue); background: var(--soft-blue); }
.legal-toc a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; border-radius: 4px; }
.legal-toc-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.legal-body { max-width: 780px; font-size: 1rem; line-height: 1.7; color: var(--ink-soft); }
.legal-body h2 { font: 500 1.55rem/1.25 var(--serif); color: var(--ink); margin: 2.4em 0 .8em; scroll-margin-top: calc(var(--header-h) + 24px); }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p { margin: 0 0 1em; }
.legal-body p.legal-sub { color: var(--ink); font-weight: 600; margin-top: 1.4em; }
.legal-body p.legal-updated { font: italic 15px var(--serif); color: var(--ink-soft); padding: 12px 16px; border-radius: 12px; background: var(--mist); display: inline-block; }
.legal-body ul { list-style: disc; padding-left: 22px; margin: 0 0 1em; display: grid; gap: 6px; }
.legal-body strong { color: var(--ink); }
.legal-body a { color: var(--blue-ink); }

/* Responsive */
@media (max-width: 1100px) {
  .legacy-grid, .ways-grid, .discipline-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .page-hero-inner, .trust-grid, .reveals-grid, .after-grid, .isms-grid, .privacy-grid, .details-grid, .about-extension, .gji-grid, .careers-grid, .gate, .subscribe-band, .legal-layout, .article-layout, .download-grid-2 { grid-template-columns: 1fr; }
  .page-hero-visual { max-width: 480px; margin-inline: auto; width: 100%; }
  .page-hero .hero-chip-a { left: 0; } .page-hero .hero-chip-b { right: 0; }
  .quote-grid, .culture-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .culture-grid { margin-top: 40px; }
  .gji-logo { max-width: 240px; }
  .article-aside { position: static; }
  .article-figure { margin-bottom: -80px; }
  .article-section { padding-top: 120px; }
  .legal-toc { position: static; max-height: none; padding: 0; }
  .legal-toc ol { grid-template-columns: 1fr; }
  .download-grid-2 { max-width: 640px; margin-inline: auto; }
  .trust-cards li { min-height: 120px; }
  .team-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .legacy-grid, .ways-grid, .discipline-grid, .outcome-row-2, .trust-cards, .form-row-2 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 52px 1fr; gap: 14px; }
  .step-num { width: 52px; height: 52px; font-size: 16px; }
  .steps::before, .steps::after { left: 25px; }
  .step-card { padding: 22px 22px 22px; }
  .step-icon { position: static; width: 48px; height: 48px; order: -1; }
  .step-icon svg { width: 26px; height: 26px; }
  .download-card-wide { grid-template-columns: 1fr; }
  .download-card-wide .download-cover { max-width: 200px; }
  .details div { grid-template-columns: 1fr; gap: 2px; }
  .article-logo { width: 60px; height: 60px; left: 16px; bottom: 16px; }
  .glow-panel { padding: 28px 22px 24px; }
  .archive-note { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .js .page-hero-visual > :first-child, .js .thanks-check circle, .js .thanks-check path { opacity: 1; transform: none; animation: none; stroke-dashoffset: 0; }
  .steps::after { transform: none; transition: none; }
  .post.is-shown { animation: none; }
  .glow-panel-iso .glow-iso-lg { animation: none; }
  .nav-menu { transition: none; }
}
/* Polish after the first visual pass */
.glow-panel { background: #251E3D; }
.link-arrow svg { flex: none; width: 16px; height: 16px; }
h2 + .lead, h1 + .lead { margin-top: 18px; }
.gate .lead { margin-top: 18px; }
.glow-panel-iso > img:first-child { width: 120px; }
.steps, .isms-list, .discipline-grid, .aside-toc, .legal-toc ol { list-style: none; padding: 0; margin: 0; }
.article-figure > img:first-child { aspect-ratio: auto; }
/* Mobile menu: the header's backdrop blur made it the containing block for the fixed off-canvas panel, so only the first row showed. Solid header on phones. */
@media (max-width: 900px) {
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; }
}
@media (max-width: 900px) {
  .nav-extras .pill-small span:last-child { display: inline; }
  .nav-extras .pill-small { padding-right: 18px; }
}


/* ---------- Daily briefing: editorial front-page layout ---------- */
.news-press { --tc: var(--blue-ink); background: #FBFAF8; border-top: 1px solid var(--line); }
.news-press [data-tone='iso'] { --tc: #B88A00; }
.news-press [data-tone='data'] { --tc: #1D8CA6; }
.news-press [data-tone='gov'] { --tc: #8E3E80; }
.news-press [data-tone='research'] { --tc: #C8393B; }

/* Masthead: heavy rule, title, live dateline */
.news-press .section-head { border-top: 4px solid var(--navy); padding-top: 22px; margin-bottom: 0; align-items: end; }
.news-press .news-updated { font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.news-press .news-updated::before { background: var(--red); box-shadow: none; animation: liveBlink 2.4s ease-in-out infinite; }
@keyframes liveBlink { 50% { opacity: .25; } }

/* Section tabs: plain text with an underline, like a news site's section nav */
.news-press .news-filters { gap: 0; border-bottom: 1px solid var(--line); }
.news-press .news-filters button { border: 0; border-radius: 0; background: none; padding: 12px 14px; color: var(--ink-soft); position: relative; }
.news-press .news-filters button::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--blue); transform: scaleX(0); transition: transform .3s var(--ease); }
.news-press .news-filters button:hover { color: var(--navy); background: none; }
.news-press .news-filters button[aria-selected='true'] { background: none; color: var(--navy); box-shadow: none; }
.news-press .news-filters button[aria-selected='true']::after { transform: scaleX(1); }

/* Latest strip between thin rules */
.news-press .ticker { margin: 0 0 28px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
.news-press .ticker::before { content: 'Latest'; flex: none; padding-right: 14px; margin-right: 2px; border-right: 1px solid var(--line); font: 700 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.news-press .ticker-track { color: var(--navy); }
.news-press .ticker-track span::before { background: var(--line); width: 5px; height: 5px; }
.news-press .ticker-toggle { background: #fff; }

/* Stories: no boxes, separated by rules */
.news-press .news-grid { gap: 0 40px; padding-top: 4px; }
.news-press .news-card { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--line); box-shadow: none !important; transform: none !important; }
.news-press .news-link { padding: 22px 0 24px; gap: 10px; }
.news-press .news-meta { align-items: center; font-size: 11px; }
.news-press .news-meta > span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--tc); }
.news-press .news-meta > span:first-child::before { content: ''; width: 8px; height: 8px; background: var(--tc); }
.news-press .news-meta > span:last-child { color: var(--ink-soft); font-size: 12px; }
.news-press .news-card h3 { color: var(--navy); transition: color .2s ease; }
.news-press .news-link:hover h3 { color: #000; text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.news-press .news-card p { color: var(--ink-soft); }
.news-press .news-foot { border-top: 0; padding-top: 0; font-size: 12px; }
.news-press .news-go { color: var(--blue-ink); font-weight: 600; }
.news-press .news-link:focus-visible { outline-offset: 6px; }

/* Publisher marks: small, flat, bordered */
.news-source { display: inline-flex; align-items: center; gap: 8px; }
.news-logo { flex: none; width: 22px; height: 22px; border-radius: 5px; background: #fff; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.news-logo img { width: 16px; height: 16px; object-fit: contain; }
.news-logo.is-mono { background: var(--tc); border-color: transparent; }
.news-logo.is-mono::before { content: attr(data-mono); font: 700 9px var(--sans); color: #fff; }

/* Lead story: the front-page splash, with a column rule to its right */
.news-press .news-lead { grid-column: span 2; grid-row: span 2; border-top: 0; padding-right: 40px; margin-right: -20px; border-right: 1px solid var(--line); }
.news-press .news-lead .news-link { padding: 22px 0 28px; grid-template-rows: auto auto auto 1fr auto; }
.news-press .news-lead .news-meta { justify-content: flex-start; gap: 18px; }
.news-press .news-lead .news-meta::before { content: 'Top story'; order: -1; padding: 4px 8px; background: var(--navy); color: #fff; font: 700 10px var(--sans); letter-spacing: .14em; }
.news-press .news-lead h3 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -.01em; max-width: 20ch; margin-top: 8px; }
.news-press .news-lead p { font-size: 18px; line-height: 1.6; max-width: 54ch; }
.news-press .news-lead .news-logo { width: 28px; height: 28px; }
.news-press .news-lead .news-logo img { width: 20px; height: 20px; }
/* The two stories beside the lead start flush with its top */
.news-press .news-lead + .news-card, .news-press .news-lead + .news-card + .news-card { border-top: 0; }
.news-press .news-lead + .news-card + .news-card { border-top: 1px solid var(--line); }

/* Skeleton, empty state */
.news-press .news-skeleton { background: none; border-radius: 0; padding: 22px 0; }
.news-press .news-empty { border-radius: 0; background: none; }

@media (max-width: 1100px) {
  .news-press .news-lead { grid-row: auto; padding-right: 0; margin-right: 0; border-right: 0; }
  .news-press .news-lead + .news-card { border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .news-press .news-lead { grid-column: auto; }
  .news-press .news-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .news-press .news-filters button { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .news-press .news-updated::before { animation: none; }
  .news-press .news-filters button::after { transition: none; }
}
/* Story images: wide lead image, square thumbnails beside the other headlines */
.news-img { display: block; overflow: hidden; background: #ECEAF2; }
.news-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); }
.news-link:hover .news-img img { transform: scale(1.05); }
.news-img.is-tile { display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 14%, #fff); }
.news-img.is-tile svg { width: 40%; height: 40%; fill: none; stroke: var(--tc); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--ease); }
.news-link:hover .news-img.is-tile svg { transform: scale(1.1); }
.news-press .news-lead .news-link { padding-top: 0; grid-template-rows: auto auto auto auto 1fr auto; }
.news-press .news-lead .news-img { aspect-ratio: 2 / 1; margin-bottom: 12px; position: relative; }
.news-press .news-lead .news-img::after { content: ''; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--tc); }
.news-press .news-card:not(.news-lead) .news-link { grid-template-columns: minmax(0, 1fr) 104px; grid-template-rows: auto auto 1fr auto; column-gap: 18px; }
.news-press .news-card:not(.news-lead) .news-img { grid-column: 2; grid-row: 2 / span 2; width: 104px; height: 104px; align-self: start; margin-top: 4px; }
.news-press .news-card:not(.news-lead) .news-meta, .news-press .news-card:not(.news-lead) .news-foot { grid-column: 1 / -1; grid-row: auto; }
.news-press .news-card:not(.news-lead) .news-meta { grid-row: 1; }
.news-press .news-card:not(.news-lead) h3, .news-press .news-card:not(.news-lead) p { grid-column: 1; }
.news-press .news-card:not(.news-lead) .news-foot { grid-row: 4; }
@media (max-width: 700px) {
  .news-press .news-card:not(.news-lead) .news-link { grid-template-columns: minmax(0, 1fr) 84px; }
  .news-press .news-card:not(.news-lead) .news-img { width: 84px; height: 84px; }
}
@media (prefers-reduced-motion: reduce) { .news-link:hover .news-img img, .news-link:hover .news-img.is-tile svg { transform: none; } }
/* Capability statement: CSS document cover in place of a PDF thumbnail */
.cap-cover { position: relative; width: min(100%, 360px); aspect-ratio: 210 / 297; margin-inline: auto; padding: 34px 30px 0; border-radius: 6px; color: #fff; overflow: hidden;
  background: radial-gradient(420px 300px at 110% -10%, rgba(103,203,223,.35), transparent 60%), var(--navy);
  box-shadow: 0 40px 70px -35px rgba(34,26,53,.8), 0 0 0 1px rgba(255,255,255,.08) inset; transform: rotate(-3deg); transition: transform .6s var(--ease); }
.page-hero-visual:hover .cap-cover { transform: rotate(0) translateY(-6px); }
.cap-cover img { width: 120px; height: auto; }
.cap-cover-kicker { margin-top: 48px; font: 700 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }
.cap-cover-title { margin-top: 10px; font: 500 30px/1.15 var(--serif); }
.cap-cover-title em { color: var(--blue); }
.cap-cover ul { margin-top: 26px; display: grid; gap: 10px; font: 500 13px var(--sans); color: rgba(255,255,255,.8); }
.cap-cover li { padding-left: 16px; position: relative; }
.cap-cover li::before { content: ''; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.cap-cover-strip { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; display: flex; }
.cap-cover-strip i { flex: 1; }
.cap-cover-strip i:nth-child(1) { background: #67CBDF; } .cap-cover-strip i:nth-child(2) { background: #B764A5; } .cap-cover-strip i:nth-child(3) { background: #F15B5D; } .cap-cover-strip i:nth-child(4) { background: #FED109; } .cap-cover-strip i:nth-child(5) { background: #4A1B3F; }
@media (prefers-reduced-motion: reduce) { .cap-cover { transform: none; transition: none; } }
/* Briefing: home preview link and news-page intro */
.news-press .news-more { margin-top: 28px; display: flex; justify-content: center; }
.news-press .news-intro { margin-top: 12px; max-width: 60ch; color: var(--ink-soft); }
/* CDIP: yellow pulses into the Customer.ai icon, glowing yellow nodes on hover */
.cdip-wires circle.pulse { fill: #FED109; filter: drop-shadow(0 0 5px #FED109) drop-shadow(0 0 10px rgba(254,209,9,.6)); opacity: 0; transition: opacity .6s ease 2s; }
.js .cdip-stage.is-on .cdip-wires circle.pulse { opacity: 1; }
.cdip-cai { position: relative; }
.cdip-cai-nodes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cdip-cai-nodes circle { fill: #FED109; opacity: 0; pointer-events: all; cursor: default; transform-box: fill-box; transform-origin: center;
  transition: opacity .3s ease, transform .4s var(--ease), filter .3s ease; animation: caiNodeGlow 3.2s ease-in-out infinite; animation-delay: calc(var(--n) * .55s); }
@keyframes caiNodeGlow { 0%, 70%, 100% { opacity: 0; } 82% { opacity: .9; filter: drop-shadow(0 0 10px rgba(254,209,9,.9)); } }
.cdip-cai:hover .cdip-cai-nodes circle { animation: none; opacity: 1; filter: drop-shadow(0 0 12px rgba(254,209,9,.85)); }
.cdip-cai-nodes circle:hover { transform: scale(1.18); filter: drop-shadow(0 0 18px #FED109) drop-shadow(0 0 30px rgba(254,209,9,.6)) !important; }
@media (prefers-reduced-motion: reduce) { .cdip-cai-nodes circle { animation: none; } .cdip-cai-nodes circle:hover { transform: none; } }
/* CDIP: hub column shifted (by JS, --hub-shift) so it sits above the centre capability badge */
@media (min-width: 861px) {
  .cdip-top { grid-template-columns: minmax(0, 1fr) 64px 210px var(--hub-shift, 0px); }
  .cdip-db { width: min(clamp(54px, 5.6vw, 76px), 84%); }
  .cdip-assets ul { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .cdip-assets li { font-size: 10.5px; letter-spacing: .05em; hyphens: manual; }
}

/* CDIP data assets: example systems listed under each label */
.cdip-assets li { align-content: start; }
.cdip-sys-list { display: grid; gap: 3px; margin-top: -2px; font: 500 11px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.62); }
.cdip-sys-list li { display: block; font: 500 11px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.66); }
.cdip-sys-list li::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 5px 2px 0; border-radius: 50%; background: var(--c); vertical-align: middle; }
.cdip-assets li.is-light .cdip-sys-list li::before { background: var(--c); }
.js .cdip-sys-list li { opacity: 0; transform: translateY(4px); transition: opacity .5s ease, transform .5s var(--ease); transition-delay: calc(.9s + var(--i) * 90ms); }
.js .cdip-stage.is-on .cdip-sys-list li { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .cdip-sys-list li { opacity: 1; transform: none; transition: none; } }
.cdip-assets ul.cdip-sys-list { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 0; justify-items: center; }
.cdip-assets ul.cdip-sys-list li { display: block; text-align: center; }
.cdip-sys-list li::before { width: 4px; height: 4px; margin: 0 4px 2px 0; }
.cdip-assets li[style*="#4A1B3F"] .cdip-sys-list li::before { background: #A4609A; }
@media (min-width: 861px) {
  /* Same label height in every column so the lists start on one line */
  .cdip-asset-name { min-height: 4.1em; }
  .cdip-assets ul.cdip-sys-list li { font-size: 10.5px; }
}
/* CDIP data assets: an example system logo inside each circle, ringed in the circle's colour */
.cdip-assets li .cdip-db.has-logo { background: #fff; background-image: none; display: grid; place-items: center; overflow: hidden;
  box-shadow: 0 0 0 5px var(--c), 0 0 24px -4px var(--c); }
.cdip-db.has-logo img { width: 86%; height: 86%; object-fit: contain; transform: scale(1.18); mix-blend-mode: multiply; filter: contrast(1.1) brightness(1.04); }
.cdip-assets li:hover .cdip-db.has-logo { box-shadow: 0 0 0 5px var(--c), 0 0 34px var(--c); }
/* Wire dots in the colour of their source circle */
.cdip-wires circle { fill: var(--pc, #fff); filter: drop-shadow(0 0 6px var(--pc, #67CBDF)); }
.cdip-wires circle.pulse { fill: var(--pc, #FED109); filter: drop-shadow(0 0 5px var(--pc, #FED109)) drop-shadow(0 0 10px var(--pc, #FED109)); }
/* CDIP activation: dots only show while flowing; Customer.ai pulses when they all arrive */
.js .cdip-stage.is-on .cdip-wires circle.pulse { opacity: 0; transition: opacity .25s ease; }
.js .cdip-stage.is-on .cdip-wires.is-flowing circle.pulse { opacity: 1; }
.cdip-cai-nodes circle { animation: none; }
.cdip-cai img { transform-origin: 76% 34%; }
.cdip-cai::before { content: ''; position: absolute; left: 76%; top: 34%; width: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(254,209,9,.9); box-shadow: 0 0 24px rgba(254,209,9,.5), inset 0 0 18px rgba(103,203,223,.4); transform: translate(-50%, -50%) scale(.5); opacity: 0; }
.cdip-cai.is-activated::before { animation: caiRing 1.2s cubic-bezier(.2,.7,.3,1); }
.cdip-cai.is-activated img { animation: caiActivate 1s var(--ease); }
.cdip-cai.is-activated .cdip-cai-nodes circle { animation: caiNodeFlash 1.1s ease-out; }
@keyframes caiRing { 0% { opacity: .95; transform: translate(-50%, -50%) scale(.45); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); } }
@keyframes caiActivate { 0% { transform: scale(1); } 28% { transform: scale(1.06); filter: brightness(1.2) drop-shadow(0 0 18px rgba(103,203,223,.75)); } 100% { transform: scale(1); filter: none; } }
@keyframes caiNodeFlash { 0% { opacity: 0; } 22% { opacity: 1; filter: drop-shadow(0 0 14px #FED109) drop-shadow(0 0 26px rgba(254,209,9,.6)); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cdip-cai.is-activated::before, .cdip-cai.is-activated img, .cdip-cai.is-activated .cdip-cai-nodes circle { animation: none; } }
/* Transparent Customer.ai logo: no blend needed, the activation glow follows the shapes */
.cdip-cai img { mix-blend-mode: normal; }

/* Trust band: dark credentials bar on one shared grid; award and Databricks marks on transparent backgrounds */
.awards.trust-band { --tb-cols: minmax(0, 1.15fr) minmax(0, 1.85fr) minmax(0, 1fr); background: #1B1530; color: #fff; border-bottom: 0; border-top: 1px solid rgba(255,255,255,.08); }
.trust-band .awards-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.85fr); gap: 40px; padding: 40px 0 34px; }
.trust-band .awards-title { color: #fff; }
.trust-band .awards-title em { color: var(--blue); }
.trust-band .awards-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; justify-items: center; align-items: center; }
.trust-band .awards-list li { display: grid; place-items: center; width: 100%; height: 84px; }
.trust-band .awards-list img { height: 76px; width: auto; max-width: 100%; object-fit: contain; transition: transform .4s var(--ease), filter .4s ease; }
.trust-band .awards-list li:hover img { transform: translateY(-3px); filter: drop-shadow(0 8px 18px rgba(254,209,9,.25)); }
.trust-band .trust-strip { display: grid; grid-template-columns: var(--tb-cols); gap: 40px; align-items: center; margin-top: 0; padding: 22px 0 30px; border-top: 1px solid rgba(255,255,255,.12); }
.trust-band .trust-item .eyebrow { color: var(--blue); }
.trust-band .trust-item img { height: 26px; }
.trust-band .trust-item .trust-iso { height: 58px; }
.trust-band .trust-item p { color: rgba(255,255,255,.72); max-width: none; }
.trust-band .pill-ghost { justify-self: end; color: #fff; border-color: rgba(255,255,255,.45); }
.trust-band .pill-ghost:hover { border-color: var(--blue); color: var(--blue); }
@media (max-width: 1000px) {
  .trust-band .awards-inner { grid-template-columns: 1fr; text-align: center; gap: 22px; }
  .trust-band .trust-strip { grid-template-columns: 1fr 1fr; }
  .trust-band .pill-ghost { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 640px) {
  .trust-band .awards-list { gap: 12px; }
  .trust-band .awards-list li { height: 60px; }
  .trust-band .awards-list img { height: 54px; }
  .trust-band .trust-strip { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .trust-band .trust-item { flex-direction: column; }
}
.trust-band .pill-ghost { white-space: nowrap; }
/* Cost of inaction: line icons from the GJI23786 artwork (navy line, blue accent) */
.coi-tabs button { grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 16px; align-items: start; }
.coi-tabs .coi-ic { grid-row: 1 / span 2; width: 48px; height: 48px; fill: none; stroke: var(--navy); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.coi-tabs .coi-ic .ac { stroke: var(--blue); stroke-width: 2.4; }
.coi-tabs .coi-ic .ac-dot { fill: var(--blue); stroke: none; }
.coi-tabs b, .coi-tabs span { grid-column: 2; }
.coi-tabs button:hover .coi-ic { transform: translateY(-2px) rotate(-3deg); }
.coi-tabs button[aria-selected='true'] .coi-ic .ac[pathLength] { stroke-dasharray: 1; animation: coiDraw .9s var(--ease) both; }
@keyframes coiDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .coi-tabs button[aria-selected='true'] .coi-ic .ac[pathLength] { animation: none; } }

/* What we do: icons from the live site's discipline circles, a lit arc that travels the ring, gentle autoplay */
.what-node { display: grid; place-content: center; justify-items: center; gap: 6px; }
.what-ic { width: 38%; height: auto; fill: none; stroke: var(--navy); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.what-ic .ac { stroke: var(--blue-ink, #1D8CA6); }
.what-node[aria-selected="true"] .what-ic .ac { stroke: #fff; }
.what-node[aria-selected="true"] .what-ic { transform: scale(1.1); }
.what-node:hover .what-ic { transform: translateY(-2px) rotate(-4deg); }
.what-centre { display: grid; place-content: center; justify-items: center; gap: 4px; background: radial-gradient(circle at 50% 35%, #2F2650, var(--navy) 72%); }
.what-centre-ic { width: 34%; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.what-gear { transform-origin: 22px 20px; animation: whatGear 12s linear infinite; }
@keyframes whatGear { to { transform: rotate(360deg); } }
.what-centre::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(103,203,223,.45); animation: whatBreathe 3.6s ease-in-out infinite; }
@keyframes whatBreathe { 0%, 100% { transform: scale(.94); opacity: .9; } 50% { transform: scale(1.06); opacity: 0; } }
.what-arc { position: absolute; inset: 12%; width: 76%; height: 76%; overflow: visible; pointer-events: none; transform: rotate(var(--arc, -180deg)); transition: transform .9s var(--ease); }
.what-arc circle { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 25 75; filter: drop-shadow(0 0 4px rgba(103,203,223,.9)); }
.what-panel { position: relative; overflow: hidden; }
.what-panel-ic { position: absolute; right: -18px; top: -18px; width: 150px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .14; pointer-events: none; animation: whatWm .7s var(--ease) both; }
.what-panel-ic .ac { stroke: var(--blue); }
@keyframes whatWm { from { opacity: 0; transform: translate(12px, -8px) rotate(8deg); } }
.what-panel h3, .what-panel p, .what-step { position: relative; }
.what-controls { align-items: center; }
.what-progress { order: 3; flex: 1; height: 3px; border-radius: 3px; background: rgba(34,26,53,.12); overflow: hidden; margin-left: 8px; }
.what-progress i { display: block; height: 100%; width: 100%; background: var(--blue); transform-origin: left; transform: scaleX(0); }
.what-progress.is-running i { animation: whatTimer var(--what-dur, 6s) linear forwards; }
.what-progress.is-paused i { animation-play-state: paused; }
@keyframes whatTimer { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .what-gear, .what-centre::after, .what-panel-ic { animation: none; }
  .what-arc { transition: none; }
  .what-progress { display: none; }
}
/* CDIP relay: the highlight travels Customer.ai -> capabilities -> consolidated hub -> outcomes */
.cdip-wires .relay-route { fill: none; stroke: none; }
.cdip-wires circle.relay { fill: #FED109; filter: drop-shadow(0 0 6px #FED109) drop-shadow(0 0 12px rgba(254,209,9,.6)); opacity: 0; transition: opacity .2s ease; }
.cdip-wires.is-relaying circle.relay { opacity: 1; }
[data-cdip-caps] img { transition: transform .5s var(--ease), filter .5s ease; }
[data-cdip-caps].is-lit li:nth-child(1) img { transition-delay: 0s; }
[data-cdip-caps].is-lit li:nth-child(2) img { transition-delay: .1s; }
[data-cdip-caps].is-lit li:nth-child(3) img { transition-delay: .2s; }
[data-cdip-caps].is-lit img { transform: scale(1.1); filter: drop-shadow(0 0 14px rgba(254,209,9,.65)) brightness(1.08); }
.cdip-hub { transition: box-shadow .5s ease; }
.cdip-hub.is-lit { box-shadow: 0 0 0 3px #FED109, 0 0 70px rgba(254,209,9,.45), inset 0 0 50px rgba(103,203,223,.3); }
.cdip-hub .cdip-layers .layer { transition: transform .5s var(--ease); }
.cdip-hub.is-lit .layer-1 { transform: translateY(-5px); }
.cdip-hub.is-lit .layer-3 { transform: translateY(4px); }
.cdip-arrow-out.is-firing circle { animation: arrowFire .8s ease-out; animation-delay: calc(var(--x) * 45ms); }
@keyframes arrowFire { 0% { fill: #67CBDF; opacity: .3; } 40% { fill: #FED109; opacity: 1; } 100% { fill: #67CBDF; opacity: .3; } }
.cdip-outcomes li h3 { transition: color .4s ease; }
.cdip-outcomes li.is-lit .cdip-glass { transform: scale(1.08); box-shadow: inset 0 0 0 2px #FED109, 0 0 30px rgba(254,209,9,.55); }
.cdip-outcomes li.is-lit h3 { color: #FED109; }
.cdip-outcomes li.is-lit { border-bottom-color: rgba(254,209,9,.8); }
@media (prefers-reduced-motion: reduce) { [data-cdip-caps].is-lit img, .cdip-outcomes li.is-lit .cdip-glass { transform: none; } }

/* =====================================================================
   v6 revisions (review comments, 10 Nov 2026)
   ===================================================================== */
/* In-page links land below the sticky header */
html { scroll-padding-top: calc(var(--header-h, 84px) + 16px); }

/* Hero chip: shield icon replaces the Databricks logo */
.hero-chip svg { width: 20px; height: 20px; flex: none; color: var(--blue-ink); }
/* ISO chip: landscape ISO 27001 mark reads far better at this size than the tall badge */
.hero-chip-c img { height: 34px; }

/* Trust band: Databricks removed, so ISO takes the room; bigger ISO marks */
@media (min-width: 1001px) { .trust-band .trust-strip { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 1000px) { .trust-band .trust-strip { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.trust-band .trust-item .trust-iso { height: 96px; }
.cdip-iso { width: 110px; }

/* Product cards: every row (artwork, kicker, title, copy, link) lines up across cards */
.product-card { grid-row: span 5; grid-template-rows: subgrid; row-gap: 10px; }
.product-card .link-arrow { align-self: end; }
.product-icon-round { border-radius: 50%; }
/* Transparent mock-ups: shadow follows the artwork, not its rectangle */
.product-card .product-cover, .gate-cover img, .book-cover { box-shadow: none; border-radius: 0; filter: drop-shadow(0 16px 16px rgba(34, 26, 53, .28)); }

/* Path to Repurchase diagram (scrolls sideways on small screens rather than shrinking the labels) */
.ptr-diagram { margin: 40px 0 0; overflow-x: auto; }
.ptr-diagram img { width: 100%; min-width: 720px; height: auto; }

/* Forms */
.form-success { background: #e3f5ea; color: #14532d; padding: 12px 14px; border-radius: 10px; font-size: .95rem; }
.form-success a { color: inherit; font-weight: 600; }
.gate-form-title { font: 500 1.35rem/1.3 var(--serif); }
.form-error { background: #fdecec; color: #8a1c1c; padding: 12px 14px; border-radius: 10px; font-size: .95rem; }
/* Subscribe form in the contact page band; honeypot field stays out of sight and out of the tab order */
.subscribe-form { color: var(--navy); }
/* Two-up fields may shrink below the inputs' intrinsic width in narrow columns */
.form-row-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.form-row input { min-width: 0; }
/* Required fields get a red asterisk (screen readers already hear "required" from the attribute) */
.form-row:has(> input[required], > textarea[required]) > label::after { content: " *" / ""; color: #c62828; font-weight: 700; }
/* Wider subscribe form so long email addresses fit (stacks to one column at 900px as before) */
@media (min-width: 901px) { .subscribe-band { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.contact-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-form.is-done > :not(.form-success) { display: none; }

/* Download page: book details beside the form */
.download-book .gate { align-items: start; }
.download-card[hidden] { display: none; } /* the card's own display would otherwise beat [hidden] */
.book-head { display: flex; align-items: center; gap: 24px; margin-bottom: 22px; }
.book-cover { width: 150px; height: auto; flex: none; }
.book-head h1 { font-size: clamp(1.6rem, 2.4vw, 2.2rem); }
.book > p:not(.lead) { margin-top: 16px; color: var(--ink-soft); }
@media (max-width: 900px) { .download-book .gate { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .book-head { flex-direction: column; align-items: flex-start; } .book-cover { width: 110px; } }