/* ==========================================================================
   DAIVID — site styles
   Brand: Sora (headlines) / Inter (body). Palette from DAIVID Brand Kit 2026.
   ========================================================================== */

:root {
  /* Brand palette */
  --pink: #FF2D6F;          /* DAIVID Pink — accents, large type */
  --pink-ink: #E0134F;      /* Pink for small text / buttons on light (AA) */
  --pink-soft: #FF5C8D;     /* Pink for small text on dark (AA) */
  --blue: #09283C;          /* Insight Blue */
  --blue-2: #0E3450;
  --blue-3: #143F5E;
  --teal: #0DA6A6;          /* Analytic Teal — on dark */
  --teal-ink: #087F80;      /* Teal for small text on light (AA) */
  --n100: #F5F6F8;          /* Neutral 100 */
  --n200: #E8EAEE;
  --n300: #D3D7DE;
  --n600: #4A5563;
  --n900: #111417;          /* Neutral 900 */
  --white: #FFFFFF;

  --grad-pink: linear-gradient(90deg, #FF2D6F 0%, #FFC2D4 100%);
  --grad-teal: linear-gradient(90deg, #0DA6A6 0%, #09283C 100%);

  /* Type */
  --font-display: "Sora", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-label: var(--font-display); /* small uppercase labels: Sora, widely tracked, like the logo tagline */

  /* Layout */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 72px;
  --radius: 14px;
  --radius-sm: 8px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* z-index scale */
  --z-base: 1;
  --z-float: 10;
  --z-header: 50;
  --z-menu: 60;
}

/* ---------- Reset ---------- */
[hidden] { display: none !important; }   /* the hidden attribute always wins over component display rules */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--n900);
  background: var(--n100);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip, not hidden: keeps position:sticky working */
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; line-height: 1.05; letter-spacing: -0.03em; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--pink); color: var(--white); }

:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
.section--dark :focus-visible, .site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--pink-soft); }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--pink-ink); color: var(--white); padding: 12px 18px; border-radius: var(--radius-sm);
  text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 16px; }

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

/* ---------- Layout primitives ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(80px, 11vw, 160px); }
.section--tight { padding-block: clamp(56px, 7vw, 96px); }
.section--dark { background: var(--blue); color: var(--n100); }
.section--ink { background: var(--n900); color: var(--n100); }
.section--white { background: var(--white); }
.section--light { background: var(--n100); }
.section--tint { background: #FFF1F5; }

.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }

/* ---------- Typography ---------- */
.label {
  font-family: var(--font-label);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.5;
}
.label--pink { color: var(--pink-ink); }
.label--teal { color: var(--teal-ink); }
.section--dark .label--pink, .section--ink .label--pink { color: var(--pink-soft); }
.section--dark .label--teal, .section--ink .label--teal { color: var(--teal); }
.label--muted { color: var(--n600); }
.section--dark .label--muted, .section--ink .label--muted, .hero .label--muted, .cta-band .label--muted { color: #9DB2C2; }

.label-rule { display: inline-flex; align-items: center; gap: 14px; }
.label-rule::before { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .7; }

.display {
  font-size: clamp(52px, 10.5vw, 168px);
  line-height: .9;
  letter-spacing: -0.055em;
  font-weight: 600;
}
.h1 { font-size: clamp(44px, 7vw, 104px); line-height: .95; letter-spacing: -0.045em; }
.h2 { font-size: clamp(36px, 5.2vw, 76px); line-height: .98; letter-spacing: -0.04em; }
.h3 { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -0.025em; }
.h4 { font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }
.caps { font-size: clamp(20px, 2.4vw, 32px); text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; font-weight: 600; }

.accent-pink { color: var(--pink); }
.accent-teal { color: var(--teal-ink); }
.section--dark .accent-teal, .section--ink .accent-teal { color: var(--teal); }
.muted { color: var(--n600); }
.section--dark .muted, .section--ink .muted { color: #B8C7D3; }

.lead { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.5; }
.prose { max-width: 62ch; }
.prose > * + * { margin-top: 1em; }
.prose strong { font-weight: 600; }

/* ---------- Buttons & links ---------- */
.btn {
  --btn-bg: transparent; --btn-fg: currentColor; --btn-bd: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 12px 22px;
  border: 1px solid var(--btn-bd); border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display); font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn--primary { --btn-bg: var(--pink-ink); --btn-fg: var(--white); --btn-bd: var(--pink-ink); }
.btn--primary:hover { --btn-bg: #C20F44; --btn-bd: #C20F44; box-shadow: 0 10px 30px -10px rgba(255, 45, 111, .7); }
.btn--ghost { --btn-bd: rgba(17, 20, 23, .25); }
.btn--ghost:hover { --btn-bd: var(--n900); background: rgba(17, 20, 23, .04); }
.section--dark .btn--ghost, .section--ink .btn--ghost, .site-footer .btn--ghost { --btn-bd: rgba(245, 246, 248, .35); }
.section--dark .btn--ghost:hover, .section--ink .btn--ghost:hover, .site-footer .btn--ghost:hover { --btn-bd: var(--n100); background: rgba(245, 246, 248, .06); }
.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 14px; }
.btn--lg { min-height: 60px; padding: 16px 30px; font-size: 17px; }

.i-arrow, .i-arrow-r, .i-play {
  display: inline-block; width: 1em; height: 1em; flex: none;
  background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
  transition: transform .25s var(--ease);
}
.i-arrow { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.i-arrow-r { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.i-play { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='black'/%3E%3C/svg%3E"); }
a:hover > .i-arrow, button:hover > .i-arrow { transform: translate(2px, -2px); }
a:hover > .i-arrow-r, button:hover > .i-arrow-r { transform: translateX(3px); }

.link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 calc(100% - 8px) / 0 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.link:hover { background-size: calc(100% - 1.4em) 1px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h);
  border-bottom: 1px solid rgba(245, 246, 248, .1);
  color: var(--n100);
}
/* Blur lives on a pseudo-element so the header doesn't become the containing block for the fixed mobile menu */
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(9, 40, 60, .88);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; flex: none; min-height: 44px; }
.brand img { width: 118px; height: auto; }
.brand-tag {
  font-family: var(--font-display); font-size: 9.5px; font-weight: 400; line-height: 1.55; letter-spacing: .24em; text-transform: uppercase; /* matches the logo lockup tagline */
  color: #B8C7D3; padding-left: 16px; border-left: 1px solid rgba(245, 246, 248, .22);
}
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 4px; }
.nav a {
  position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 14px;
  font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
  text-decoration: none; color: #D6E0E8; transition: color .2s;
}
.nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 1px; background: var(--pink);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--white); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-cta { flex: none; }

.nav-toggle {
  display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid rgba(245, 246, 248, .25);
  border-radius: 999px; background: transparent; cursor: pointer; position: relative;
}
.nav-toggle span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--n100); transition: transform .3s var(--ease), top .3s var(--ease); }
.nav-toggle span:nth-child(1) { top: 19px; }
.nav-toggle span:nth-child(2) { top: 27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 23px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-menu);
  background: var(--blue); color: var(--n100);
  padding: 32px var(--gutter) 48px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 32px;
}
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; border-top: 1px solid rgba(245, 246, 248, .12); }
.mobile-nav li { border-bottom: 1px solid rgba(245, 246, 248, .12); }
.mobile-nav a.m-link {
  display: flex; justify-content: space-between; align-items: center; min-height: 64px;
  font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none;
}
.mobile-nav a.m-link .label { color: var(--pink-soft); }
body.menu-open { overflow: hidden; }

@media (max-width: 1240px) {
  .brand-tag { display: none; }
  .nav a { padding: 0 10px; }
}
@media (max-width: 900px) {
  .nav, .header-cta { display: none; }
  .nav-toggle { display: block; }
}

main { padding-top: var(--header-h); }

/* ---------- Hero (shared) ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--blue); color: var(--n100);
  min-height: calc(100svh - var(--header-h));
  display: flex; flex-direction: column;
  isolation: isolate;
}
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(9, 40, 60, .9), transparent);
}
.hero-meta {
  display: flex; justify-content: space-between; gap: 24px; padding-top: 28px; padding-bottom: 20px;
  border-bottom: 1px solid rgba(245, 246, 248, .12);
}
.hero-meta .right { text-align: right; margin-left: auto; }
.hero-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 32px; padding-block: clamp(40px, 6vw, 72px); }
.hero-copy { position: relative; z-index: var(--z-base); }
.hero-copy .display { margin-top: 22px; font-size: clamp(48px, 7.6vw, 124px); }
@media (max-width: 960px) { .hero-copy .display { font-size: clamp(48px, 12vw, 110px); } }
.hero-kicker { max-width: 26ch; margin-top: 26px; font-family: var(--font-display); font-size: clamp(20px, 2vw, 28px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; text-transform: none; }
.hero-copy .lead { max-width: 48ch; margin-top: 22px; color: #C9D6E0; }
.hero-copy .btn-row { margin-top: 36px; }

.hero-visual { position: relative; align-self: stretch; min-height: 520px; }
.hero-flamingo {
  position: absolute; left: 50%; bottom: -2%; height: 108%; width: auto; max-width: none;
  transform: translateX(-50%) translate3d(var(--px, 0), var(--py, 0), 0);
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, .35));
  transition: transform .6s var(--ease);
}
.hero-fig {
  position: absolute; top: 2%; left: 4%; color: #9DB2C2;
}
.hero-ring {
  position: absolute; left: 50%; top: 50%; width: min(88%, 520px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border: 1px solid rgba(13, 166, 166, .35); border-radius: 50%; pointer-events: none;
}
.hero-ring::before, .hero-ring::after {
  content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed rgba(245, 246, 248, .12);
}
.hero-ring::after { inset: -9%; border: 1px solid rgba(255, 45, 111, .18); }
.hero-ring .tick { position: absolute; width: 14px; height: 14px; }
/* Ring (and brain) centred on the headline instead of the column; main.js sets --align-y */
.hero-visual[data-align-headline] :is(.hero-ring, .hero-brain, .hero-proof) { top: var(--align-y, 50%); }
/* Proof icon in the ring (Proof hero): the circles pulse on a shared beat, inner teal first, outer pink just after */
.hero-proof {
  position: absolute; left: 50%; top: 50%; width: min(56%, 330px); height: auto; aspect-ratio: 1270 / 1310;
  transform: translate(-50%, -50%); overflow: visible; pointer-events: none;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .35));
}
.hero-proof .proof-line path { fill: none; stroke: #F1F1F5; stroke-width: 33; stroke-linecap: round; stroke-linejoin: round; }
.hero-proof .proof-ring { fill: none; stroke-width: 33; transform-box: fill-box; transform-origin: center; }
.hero-proof .proof-ring--pink { stroke: var(--pink); animation: proof-pulse-out 1.8s cubic-bezier(.3, 0, .3, 1) .18s infinite; }
.hero-proof .proof-ring--teal { stroke: var(--teal); stroke-linecap: round; stroke-dasharray: 1 27; animation: proof-pulse-in 1.8s cubic-bezier(.3, 0, .3, 1) infinite; }
/* Quick pulse in the first ~30% of each 1.8s beat, then rest; the pink one starts 0.18s later */
@keyframes proof-pulse-in { 0%, 30%, 100% { transform: scale(1); } 14% { transform: scale(1.24); } }
@keyframes proof-pulse-out { 0%, 30%, 100% { transform: scale(1); opacity: 1; } 14% { transform: scale(1.2); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .hero-proof .proof-ring { animation: none; } }
/* Brain icon in the ring (Creative Intelligence hero); main.js resizes each dot at random */
.hero-brain {
  position: absolute; left: 50%; top: 50%; width: min(56%, 330px); height: auto; aspect-ratio: 1270 / 1330;
  transform: translate(-50%, -50%); overflow: visible; pointer-events: none;
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .35));
}
.hero-brain .brain-outline { fill: none; stroke: #F1F1F5; stroke-width: 33; }
.hero-brain .brain-midline { stroke: #F1F1F5; stroke-width: 33; stroke-linecap: round; stroke-dasharray: 20 80; }
.hero-brain .brain-dot { transform-box: fill-box; transform-origin: center; transition: transform .9s cubic-bezier(.34, 1.4, .5, 1); }
.hero-brain .brain-dot--teal { fill: var(--teal); }
.hero-brain .brain-dot--pink { fill: var(--pink); }
.hero-ring .tick::before, .hero-ring .tick::after { content: ""; position: absolute; background: rgba(245, 246, 248, .45); }
.hero-ring .tick::before { left: 6.5px; top: 0; width: 1px; height: 14px; }
.hero-ring .tick::after { top: 6.5px; left: 0; height: 1px; width: 14px; }
.hero-ring .t1 { top: -7px; left: calc(50% - 7px); }
.hero-ring .t2 { bottom: -7px; left: calc(50% - 7px); }
.hero-ring .t3 { left: -7px; top: calc(50% - 7px); }
.hero-ring .t4 { right: -7px; top: calc(50% - 7px); }

/* Floating data cards (illustrative UI) */
.data-card {
  position: absolute; z-index: var(--z-float);
  background: rgba(255, 255, 255, .96); color: var(--n900);
  border-radius: var(--radius); padding: 16px 18px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5);
  min-width: 180px;
  animation: float 7s ease-in-out infinite;
}
.data-card .label { font-size: 10px; color: var(--n600); }
.data-card .score { font-family: var(--font-display); font-size: 44px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin-top: 6px; }
.data-card .score small { font-size: 13px; color: var(--n600); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.data-card .spark { margin-top: 8px; width: 120px; height: 28px; }
.data-card--score { right: 0; top: 18%; }
.data-card--emotion { left: -6%; bottom: 12%; width: 250px; animation-delay: -2s; }
.data-card--emotion .bars { margin-top: 12px; display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 44px 1fr 34px; align-items: center; gap: 10px; font-size: 12px; }
.bar-row .track { height: 5px; background: var(--n200); border-radius: 99px; overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 99px; background: var(--blue); transform-origin: left; }
.bar-row .fill.teal { background: var(--teal); }
.bar-row .fill.pink { background: var(--pink); }
.bar-row .v { text-align: right; color: var(--n600); font-variant-numeric: tabular-nums; }
.data-card .foot { margin-top: 10px; font-family: var(--font-label); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--n600); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.hero-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-block: 20px 28px; border-top: 1px solid rgba(245, 246, 248, .12);
}
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; color: #9DB2C2; }
.scroll-cue .line { width: 1px; height: 28px; background: rgba(245, 246, 248, .3); position: relative; overflow: hidden; }
.scroll-cue .line::after { content: ""; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--pink); animation: drip 2.2s var(--ease) infinite; }
@keyframes drip { to { top: 110%; } }

@media (max-width: 960px) {
  .hero-body { grid-template-columns: 1fr; }
  .hero-visual { min-height: 460px; }
  .data-card--emotion { left: 0; }
}
@media (max-width: 560px) {
  .hero-meta .right { display: none; }
  .hero-visual { min-height: 400px; }
  .data-card { transform: scale(.88); }
  .data-card--score { right: -4px; top: 6%; }
  .data-card--emotion { bottom: 4%; width: 220px; }
  .hero-bottom .label:last-child { display: none; }
}

/* Scroll-scrubbed video hero (home) */
.hero--video { display: block; min-height: 0; overflow: visible; background: var(--blue); }
.js .hero--video { height: 260vh; }                 /* scroll distance that drives the video */
.hero--video::after { display: none; }
.hero-pin {
  position: relative; overflow: hidden; isolation: isolate;
  height: calc(100svh - var(--header-h)); min-height: 560px;
  display: flex; flex-direction: column;
}
.js .hero--video .hero-pin { position: sticky; top: var(--header-h); }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
  object-fit: cover; object-position: 60% 50%; background: var(--blue);
}
@media (max-width: 960px) { .hero-video { object-position: 72% 50%; } } /* keep the flamingo in frame on portrait screens */
.hero-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Left-side shade only: fully transparent from the middle of the screen to the right edge */
  background: linear-gradient(90deg, rgba(9, 40, 60, .88) 0%, rgba(9, 40, 60, .6) 28%, rgba(9, 40, 60, .2) 42%, rgba(9, 40, 60, 0) 50%);
}
.hero--video .hero-body { grid-template-columns: minmax(0, 1fr); }
.hero--video .hero-copy { max-width: 760px; will-change: opacity, transform; }
.hero--video .hero-copy .lead { color: #D6E0E8; }
.hero--video .hero-copy .display { text-shadow: 0 2px 30px rgba(9, 40, 60, .35); }
.hero-progress { position: relative; flex: 0 1 240px; height: 2px; background: rgba(245, 246, 248, .2); border-radius: 2px; overflow: hidden; }
.hero-progress span { position: absolute; inset: 0; background: var(--pink); transform-origin: left; transform: scaleX(var(--p, 0)); }
@media (max-width: 960px) {
  .hero--video .hero-copy .display { font-size: clamp(48px, 13vw, 110px); }
  .hero-shade { background: linear-gradient(to top, rgba(9, 40, 60, .92) 0%, rgba(9, 40, 60, .7) 45%, rgba(9, 40, 60, .25) 100%); }
  .hero--video .hero-body { align-items: end; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero--video { height: auto; }
  .js .hero--video .hero-pin { position: relative; top: 0; }
  .hero-progress { display: none; }
}

/* Page hero (interior pages) */
.page-hero { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(64px, 9vw, 120px); min-height: auto; }
/* Creative Intelligence hero: Neutral 900 ink with a soft Insight Blue glow behind the visual */
.page-hero--network { background: radial-gradient(ellipse 60% 75% at 72% 48%, rgba(14, 52, 80, .95) 0%, rgba(9, 40, 60, .55) 38%, rgba(17, 20, 23, 0) 72%), var(--n900); }
.page-hero--network::after { background: linear-gradient(to top, rgba(17, 20, 23, .9), transparent); }
/* Creative Intelligence hero: low-poly shards (drawn on the canvas) with a pink point of light for a cursor */
.page-hero--shards { background: var(--n900); }
.page-hero--shards::after { background: linear-gradient(to top, rgba(17, 20, 23, .85), transparent); }
.page-hero--shards.is-lit { cursor: none; }
.page-hero--shards.is-lit :is(a, button, [role="button"]) { cursor: pointer; }
.page-hero .hero-body { padding-block: clamp(24px, 4vw, 48px) 0; align-items: end; }
.page-hero .hero-visual { min-height: 380px; }
.page-hero .hero-copy .display { font-size: clamp(46px, 6.6vw, 108px); }
.contact-grid .h1 { font-size: clamp(40px, 5.2vw, 80px); }
.card .h2 { font-size: clamp(30px, 3.4vw, 52px); }
.statement { font-size: clamp(28px, 3.2vw, 48px); line-height: 1.08; letter-spacing: -0.035em; font-family: var(--font-display); font-weight: 600; }

/* ---------- Section header (editorial) ---------- */
.sec-head {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-bottom: 16px; margin-bottom: clamp(40px, 6vw, 80px);
  border-bottom: 1px solid rgba(17, 20, 23, .14);
}
.section--dark .sec-head, .section--ink .sec-head { border-bottom-color: rgba(245, 246, 248, .14); }
.sec-title { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-title .prose { justify-self: end; }
@media (max-width: 860px) { .sec-title { grid-template-columns: 1fr; } .sec-title .prose { justify-self: start; } }

/* ---------- Logo marquee ---------- */
.marquee-wrap { background: var(--white); border-bottom: 1px solid var(--n200); padding-block: 28px; overflow: hidden; }
.marquee-head { display: flex; align-items: center; gap: 24px; margin-bottom: 14px; }
.marquee-rule { flex: 1; height: 1px; background: var(--n200); }
.marquee-toggle {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--n300); background: var(--white);
  display: grid; place-items: center; cursor: pointer; color: var(--n900); transition: border-color .2s, background-color .2s;
}
.marquee-toggle:hover { border-color: var(--n900); }
.i-pause { width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.marquee-toggle[aria-pressed="true"] .i-pause { width: 0; height: 0; border: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
.marquee { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee:hover, .marquee.is-paused { animation-play-state: paused; }
.marquee ul { display: flex; list-style: none; gap: clamp(40px, 6vw, 88px); padding-right: clamp(40px, 6vw, 88px); align-items: center; }
.logo-word {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(20px, 2vw, 28px); letter-spacing: -0.03em;
  color: #6B7684; white-space: nowrap; transition: color .2s;
}
.logo-word:hover { color: var(--n900); }
.logo-item { display: flex; align-items: center; height: 48px; }
.logo-item img { display: block; max-width: none; /* size comes from the width/height attributes (files are 2x) */ opacity: .55; transition: opacity .25s var(--ease); }
.logo-item img:hover { opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--n300); }
.pillar {
  position: relative; padding: clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 36px) clamp(32px, 3vw, 48px);
  border-right: 1px solid var(--n300); display: flex; flex-direction: column; gap: 20px;
  transition: background-color .3s var(--ease);
}
.pillar:first-child { padding-left: 0; }
.pillar:last-child { border-right: 0; padding-right: 0; }
.pillar .num { display: flex; justify-content: space-between; align-items: center; }
.pillar .icon { width: 72px; height: 72px; }
.pillar .big {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(64px, 7vw, 112px); line-height: .9; letter-spacing: -0.06em;
}
.pillar .visual { height: 180px; border-radius: var(--radius); overflow: hidden; position: relative; background: var(--blue); }
.pillar p { color: var(--n600); }
@media (max-width: 960px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar, .pillar:first-child, .pillar:last-child { padding-inline: 0; border-right: 0; border-bottom: 1px solid var(--n300); }
}

/* Pillar visuals */
.viz-impact { display: flex; align-items: flex-end; gap: 10px; padding: 24px; height: 100%; }
.viz-impact span { flex: 1; border-radius: 6px 6px 2px 2px; background: rgba(245, 246, 248, .14); transform-origin: bottom; }
.viz-impact span.hi { background: var(--grad-pink); background: linear-gradient(to top, var(--pink), #FF8FB1); }
.viz-dots { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(14, 1fr); gap: 0; padding: 18px; place-items: center; }
.viz-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(245, 246, 248, .22); }
.viz-dots i.t { background: var(--teal); }
.viz-dots i.p { background: var(--pink); }
.viz-plug { display: flex; align-items: center; justify-content: center; gap: 10px; height: 100%; padding: 20px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid var(--n300); font-size: 13px; font-weight: 500; background: var(--white); color: var(--n900);
}
.chip--pink { background: var(--pink-ink); border-color: var(--pink-ink); color: var(--white); }
.chip--dark { background: transparent; border-color: rgba(245, 246, 248, .3); color: var(--n100); }
.chip img { width: 22px; height: 22px; }

/* ---------- Video block ---------- */
.video-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: clamp(14px, 2vw, 24px); overflow: hidden;
  background: radial-gradient(120% 90% at 80% 20%, #16496B 0%, var(--blue) 55%, #061C2A 100%);
  display: grid; place-items: center; color: var(--n100);
  box-shadow: 0 40px 80px -40px rgba(9, 40, 60, .6);
}
.video-frame .grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(245, 246, 248, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(245, 246, 248, .05) 1px, transparent 1px); background-size: 48px 48px; }
.video-frame .vf-flamingo { position: absolute; right: 6%; bottom: -8%; height: 96%; width: auto; opacity: .95; }
.video-frame .vf-meta { position: absolute; left: 24px; top: 20px; right: 24px; display: flex; justify-content: space-between; color: #9DB2C2; }
.play-btn {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 28px 10px 10px;
  border-radius: 999px; background: rgba(255, 255, 255, .96); color: var(--n900); border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 16px; text-decoration: none;
  transition: box-shadow .25s var(--ease), background-color .2s;
}
.play-btn .circle { width: 48px; height: 48px; border-radius: 50%; background: var(--pink-ink); color: var(--white); display: grid; place-items: center; }
.play-btn .circle .i-play { width: 20px; height: 20px; margin-left: 3px; }
.play-btn:hover { box-shadow: 0 0 0 10px rgba(255, 45, 111, .2); }
.video-note { position: absolute; left: 24px; bottom: 20px; color: #9DB2C2; z-index: 2; }

/* ---------- Offering router ---------- */
.router { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.offer {
  position: relative; overflow: hidden; border-radius: clamp(16px, 2vw, 24px);
  padding: clamp(28px, 3.4vw, 52px); display: flex; flex-direction: column; min-height: 560px;
  isolation: isolate;
}
.offer--ci { background: var(--white); border: 1px solid var(--n200); }
.offer--mb { background: var(--blue); color: var(--n100); }
.offer .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.offer .icon { width: 84px; height: 84px; }
.offer h3 { margin-top: 32px; font-size: clamp(36px, 4.2vw, 64px); }
.offer .aud { margin-top: auto; padding-top: 40px; list-style: none; }
.offer .aud li { border-top: 1px solid var(--n200); }
.offer--mb .aud li { border-top-color: rgba(245, 246, 248, .15); }
.offer .aud a {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 20px; align-items: center; padding: 22px 0; text-decoration: none; min-height: 44px;
}
.offer .aud .who { grid-column: 1; }
.offer .aud .what { grid-column: 1; color: var(--n600); font-size: 16px; max-width: 46ch; }
.offer--mb .aud .what { color: #B8C7D3; }
.offer .aud .go {
  grid-column: 2; grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 50%; border: 1px solid currentColor;
  display: grid; place-items: center; opacity: .6; transition: background-color .25s var(--ease), color .25s, opacity .25s, border-color .25s;
}
.offer .aud a:hover .go { background: var(--pink-ink); border-color: var(--pink-ink); color: var(--white); opacity: 1; }
.offer .aud a:hover .who { color: var(--pink-ink); }
.offer--mb .aud a:hover .who { color: var(--pink-soft); }
.offer-deco { position: absolute; z-index: -1; pointer-events: none; }
.offer--ci .offer-deco { right: -40px; top: -40px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 45, 111, .12), transparent 70%); }
.offer--mb .offer-deco { right: -60px; top: -60px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(13, 166, 166, .28), transparent 70%); }
@media (max-width: 900px) { .router { grid-template-columns: 1fr; } .offer { min-height: 0; } }

/* ---------- Quotes ---------- */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.quote {
  background: var(--white); border: 1px solid var(--n200); border-radius: var(--radius);
  padding: 32px 32px 28px; display: flex; flex-direction: column; gap: 24px; min-height: 300px; margin: 0;
}
.quote .qmark { font-family: var(--font-display); font-size: 64px; line-height: .6; color: var(--pink); font-weight: 700; height: 28px; }
.quote-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 40px; }
.quote-logo { display: block; height: auto; max-width: 140px; opacity: .75; }
.quote blockquote { margin: 0; font-family: var(--font-display); font-size: clamp(17px, 1.35vw, 19px); line-height: 1.35; letter-spacing: -0.015em; font-weight: 500; }
.quote .placeholder { color: var(--n600); font-style: italic; font-family: var(--font-body); font-weight: 400; font-size: 16px; }
.quote figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--blue); color: var(--n100); display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 15px; flex: none; }
.quote .who strong { display: block; font-size: 15px; }
.quote .who span { font-size: 14px; color: var(--n600); }
@media (max-width: 860px) { .quotes { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .quotes { grid-template-columns: 1fr; } .quote { min-height: 0; } }

/* ---------- Posts ---------- */
.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.post { display: flex; flex-direction: column; gap: 16px; text-decoration: none; }
.post .thumb { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; position: relative; background: var(--blue); }
.post .thumb::before { content: ""; position: absolute; inset: 0; background: var(--th, var(--grad-teal)); opacity: .9; transition: transform .6s var(--ease); }
.post .thumb img { position: absolute; width: 38%; right: 10%; bottom: -10%; transition: transform .6s var(--ease); }
.post:hover .thumb img { transform: translateY(-8px) rotate(-3deg); }
.post .meta { display: flex; gap: 12px; color: var(--n600); }
.post h3 { transition: color .2s; }
.post:hover h3 { color: var(--pink-ink); }
.post .ph { color: var(--n600); font-size: 15px; }
/* Blog cards with real featured images (pulled from blog.daivid.co) */
.post .thumb--photo { aspect-ratio: 16 / 9; background: var(--n200); }
.post .thumb--photo::before { display: none; }
.post .thumb--photo img { inset: 0; width: 100%; height: 100%; object-fit: cover; right: auto; bottom: auto; }
.post:hover .thumb--photo img { transform: scale(1.04); }
.post h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post .meta time { color: inherit; }
.linkedin-strip { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.li-card { border: 1px solid var(--n200); border-radius: var(--radius); background: var(--white); padding: 22px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; min-height: 180px; transition: border-color .2s; }
.li-card:hover { border-color: var(--n900); }
.li-card .li-top { display: flex; align-items: center; gap: 10px; }
.li-card .li-top img { width: 36px; height: 36px; border-radius: 50%; }
.li-card .li-top strong { font-size: 14px; display: block; }
.li-card .li-top span { font-size: 12px; color: var(--n600); }
.li-card .li-ic { margin-left: auto; width: 20px; height: 20px; color: #0A66C2; }
.li-card p { color: var(--n600); font-size: 15px; font-style: italic; }
@media (max-width: 900px) { .posts, .linkedin-strip { grid-template-columns: 1fr; } }
/* LinkedIn feed (SociableKIT widget): the widget draws its own cards inside this box */
.linkedin-feed { margin-top: 48px; min-height: 180px; max-width: 100%; overflow: hidden; }
.linkedin-feed noscript a { font-weight: 600; }

/* ---------- Closing CTA ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--blue); color: var(--n100); isolation: isolate; }
.cta-band .cta-inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end; }
/* The small right-hand label would sit on the flamingo head; the CTA button says the same, so hide it there */
.cta-band:has(.cta-flamingo) .sec-head .label--muted { visibility: hidden; }
/* Anchored from the top so the head is always in view; only the feet run off the bottom */
.cta-band .cta-flamingo { position: absolute; right: max(2vw, calc((100vw - var(--container)) / 2)); top: clamp(16px, 3vw, 32px); height: 112%; width: auto; z-index: -1; opacity: .95; }
.cta-band .display { font-size: clamp(48px, 8.4vw, 136px); }
/* Size the headline from its own column (not the window) so the longest line, e.g. "Performance,",
   always fits with room to spare; browsers set text slightly differently (Chrome is wider). */
@supports (container-type: inline-size) {
  .cta-band .cta-inner { container-type: inline-size; }
  .cta-band .display { font-size: clamp(40px, 8.2cqi, 136px); }
}
.cta-band .cta-side { padding-bottom: 12px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; position: relative; }
.cta-band .tri { position: absolute; z-index: -2; pointer-events: none; }
@media (max-width: 900px) {
  .cta-band .cta-inner { grid-template-columns: 1fr; }
  @supports (container-type: inline-size) { .cta-band .display { font-size: clamp(40px, 13.5cqi, 110px); } }
  .cta-band .cta-flamingo { opacity: .22; right: 4%; }
}

/* ---------- CTA animated brand graphics ---------- */
.cta-graphics { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; opacity: .75; }
.cta-graphics g, .cta-graphics circle, .cta-graphics polyline { transform-box: fill-box; transform-origin: center; }
.cta-band:has(.cta-graphics)::before { /* keeps the headline side clear */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--blue) 0%, rgba(9, 40, 60, .92) 35%, rgba(9, 40, 60, 0) 70%);
}
.cg-peaks--back { opacity: .22; animation: cg-sway 18s ease-in-out infinite alternate; }
.cg-peaks--front { opacity: .16; animation: cg-sway 14s ease-in-out infinite alternate-reverse; }
.cg-burst .cg-spin { animation: cg-rotate 90s linear infinite; }
.cg-burst circle { fill: #F5F6F8; }
.cg-burst circle.t { fill: #0DA6A6; }
.cg-burst circle.p { fill: #FF2D6F; }
.cg-arc--1 { animation: cg-rotate 40s linear infinite; }
.cg-arc--2 { animation: cg-rotate 28s linear infinite reverse; }
.cg-arc--3 { animation: cg-rotate 120s linear infinite; }
.cg-line { stroke-dasharray: 100; stroke-dashoffset: 100; animation: cg-draw 9s var(--ease) infinite; }
.cg-node { opacity: 0; animation: cg-node 9s var(--ease) infinite; animation-delay: calc(var(--i) * .45s); }
.cg-node--end { animation-name: cg-node-end; }
.cg-facet { animation: cg-float 12s ease-in-out infinite; }
.cg-facet--1 { opacity: .55; animation-duration: 14s; }
.cg-facet--2 { opacity: .45; animation-duration: 11s; animation-delay: -4s; }
.cg-facet--3 { opacity: .4; animation-duration: 16s; animation-delay: -8s; }
.cg-facet--4 { opacity: .3; animation-duration: 10s; animation-delay: -2s; }

@keyframes cg-rotate { to { transform: rotate(360deg); } }
@keyframes cg-sway { from { transform: translateX(-24px); } to { transform: translateX(24px); } }
@keyframes cg-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(4deg); }
}
@keyframes cg-draw {
  0% { stroke-dashoffset: 100; opacity: 0; }
  8% { opacity: 1; }
  40%, 80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cg-node {
  0%, 10% { opacity: 0; transform: scale(.4); }
  22%, 80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}
@keyframes cg-node-end {
  0%, 30% { opacity: 0; transform: scale(.4); }
  40% { opacity: 1; transform: scale(1.4); }
  50%, 80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}
@media (max-width: 900px) {
  .cta-graphics { opacity: .4; }
  .cta-band:has(.cta-graphics)::before { background: rgba(9, 40, 60, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .cg-line { stroke-dashoffset: 0; }
  .cg-node { opacity: 1; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--n900); color: #C9D1DA; padding-top: clamp(64px, 8vw, 112px); }
.footer-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 48px 64px; padding-bottom: 64px; border-bottom: 1px solid rgba(245, 246, 248, .1); }
.newsletter h2 { color: var(--n100); font-size: clamp(28px, 3vw, 40px); }
.newsletter p { margin-top: 12px; }
.newsletter form { margin-top: 24px; display: flex; gap: 8px; max-width: 460px; }
.newsletter input {
  flex: 1; min-width: 0; min-height: 52px; padding: 12px 20px; border-radius: 999px; border: 1px solid rgba(245, 246, 248, .22);
  background: rgba(245, 246, 248, .04); color: var(--n100);
}
.newsletter input::placeholder { color: #8C97A3; }
.newsletter input:focus { outline: none; border-color: var(--pink-soft); box-shadow: 0 0 0 3px rgba(255, 92, 141, .25); }
.newsletter .form-msg { margin-top: 12px; font-size: 14px; min-height: 1.5em; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer-cols h3 { font-family: var(--font-label); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: #8C97A3; margin-bottom: 14px; }
.footer-cols ul { list-style: none; }
.footer-cols a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding-block: 6px; line-height: 1.35; text-decoration: none; color: #E3E8ED; transition: color .2s; }
.footer-cols a:hover { color: var(--pink-soft); }
.footer-brand { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-block: 56px 40px; flex-wrap: wrap; }
.footer-brand img { width: min(260px, 40vw); height: auto; }
.footer-brand .social { display: flex; gap: 10px; align-items: center; }
.icon-btn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(245, 246, 248, .22); color: var(--n100); transition: background-color .2s, border-color .2s; }
.icon-btn:hover { background: #0A66C2; border-color: #0A66C2; }
.icon-btn svg { width: 20px; height: 20px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-block: 24px 32px; border-top: 1px solid rgba(245, 246, 248, .1); font-size: 14px; color: #8C97A3; }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--n100); }
.footer-bottom ul { list-style: none; display: flex; gap: 8px 24px; flex-wrap: wrap; }
@media (max-width: 900px) { .footer-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- Audience switch (tabs) ---------- */
.switch { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 0 16px; border-bottom: 1px solid var(--n300); }
.section--dark .switch { border-bottom-color: rgba(245, 246, 248, .18); }
.switch [role="tab"] {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: 16px 0; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: clamp(18px, 2vw, 26px); font-weight: 500; letter-spacing: -0.025em;
  color: var(--n600); transition: color .2s;
}
.section--dark .switch [role="tab"] { color: #9DB2C2; }
.switch [role="tab"] .label { margin-right: 14px; }
.switch [role="tab"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.switch [role="tab"][aria-selected="true"] { color: var(--n900); }
.section--dark .switch [role="tab"][aria-selected="true"] { color: var(--white); }
.switch [role="tab"][aria-selected="true"]::after { transform: scaleX(1); }
.switch [role="tab"]:hover { color: var(--n900); }
.section--dark .switch [role="tab"]:hover { color: var(--white); }
.switch .i-arrow-r { opacity: .5; }
.switch [aria-selected="true"] .i-arrow-r { opacity: 1; transform: rotate(90deg); color: var(--pink); }
.tabpanel { padding-top: clamp(48px, 6vw, 88px); }
.tabpanel[hidden] { display: none; }
.tabpanel.is-entering > * { animation: rise .6s var(--ease) both; }
.tabpanel.is-entering > *:nth-child(2) { animation-delay: .06s; }
.tabpanel.is-entering > *:nth-child(3) { animation-delay: .12s; }
.tabpanel.is-entering > *:nth-child(4) { animation-delay: .18s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .switch { grid-template-columns: 1fr; }
  .switch [role="tab"] { min-height: 60px; border-bottom: 1px solid var(--n200); }
}

/* Panel intro with ghost numeral (Matteo-style) */
.panel-intro { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 24px 48px; align-items: start; }
.ghost-num {
  font-family: var(--font-display); font-weight: 300; font-size: clamp(96px, 14vw, 200px); line-height: .8; letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1px var(--n300);
}
.section--dark .ghost-num { -webkit-text-stroke-color: rgba(245, 246, 248, .22); }
/* Creative Intelligence: each audience view gets its own tint and matching outlined number */
.audiences--tinted { transition: background-color .5s var(--ease); }
.audiences--tinted[data-view="brands"] { background: #FFF1F5; }
.audiences--tinted[data-view="adtech"] { background: #E8F6F6; }
.audiences--tinted #panel-brands .ghost-num { -webkit-text-stroke: 1.5px var(--pink-ink); }
.audiences--tinted #panel-adtech .ghost-num { -webkit-text-stroke: 1.5px var(--teal-ink); }
.audiences--tinted[data-view="brands"] .sec-head, .audiences--tinted[data-view="brands"] .switch, .audiences--tinted[data-view="brands"] .steps, .audiences--tinted[data-view="brands"] .step { border-color: #F3C9D6; }
.audiences--tinted[data-view="adtech"] .sec-head, .audiences--tinted[data-view="adtech"] .switch { border-color: #BFE2E2; }
.panel-intro .h2 { margin-top: 14px; }
.panel-intro .prose { margin-top: 24px; }
@media (max-width: 760px) { .panel-intro { grid-template-columns: 1fr; } .ghost-num { font-size: 88px; } }

/* ---------- Step list ---------- */
.steps { list-style: none; margin-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--n300); counter-reset: step; }
.section--dark .steps { border-top-color: rgba(245, 246, 248, .18); }
.step { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.3fr) 88px; gap: 16px 32px; align-items: start; padding-block: 32px; border-bottom: 1px solid var(--n300); }
.section--dark .step { border-bottom-color: rgba(245, 246, 248, .18); }
.step .label { padding-top: 8px; }
.step p { color: var(--n600); }
.section--dark .step p { color: #B8C7D3; }
.step .icon { width: 72px; height: 72px; justify-self: end; }
@media (max-width: 860px) {
  .step { grid-template-columns: 48px minmax(0, 1fr) 56px; }
  .step p { grid-column: 2 / 4; }
  .step .icon { grid-row: 1; grid-column: 3; width: 56px; height: 56px; }
}

/* ---------- Feature highlight box ---------- */
.highlight {
  margin-top: clamp(48px, 6vw, 80px); position: relative; overflow: hidden; isolation: isolate;
  border-radius: clamp(16px, 2vw, 24px); background: var(--blue); color: var(--n100);
  padding: clamp(32px, 4vw, 64px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px 64px; align-items: end;
}
.highlight .icon { width: 88px; height: 88px; margin-bottom: 24px; }
.highlight p { color: #C9D6E0; }
.highlight .deco { position: absolute; right: -80px; bottom: -120px; width: 420px; height: 420px; z-index: -1; opacity: .9; }
@media (max-width: 860px) { .highlight { grid-template-columns: 1fr; } }

/* ---------- Stat blocks ---------- */
.stats { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid rgba(245, 246, 248, .18); }
.stat { padding: 28px 24px 8px 0; border-right: 1px solid rgba(245, 246, 248, .18); padding-left: 24px; }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: 0; }
.stat .n { font-family: var(--font-display); font-weight: 600; font-size: clamp(48px, 6vw, 88px); line-height: .95; letter-spacing: -0.05em; }
.stat p:not(.n) { margin-top: 10px; color: #B8C7D3; font-size: 15px; max-width: 30ch; }
.section--light .stats, .section--white .stats { border-top-color: var(--n300); }
.section--light .stat, .section--white .stat { border-right-color: var(--n300); }
.section--light .stat p:not(.n), .section--white .stat p:not(.n) { color: var(--n600); }
/* Proof page: headline stats above the two cards; numbers pop up as they count */
.proof-stats { margin-bottom: clamp(40px, 5vw, 64px); }
/* Number with its caption to the right, the pair centred in its column. The number is sized from the
   column: as big as fits next to the caption (about 240px reserved), up to 140px. In narrow columns
   (under 470px) the caption goes under the number instead, so the number can stay large. */
.proof-stats .stat { container-type: inline-size; padding: 32px 24px 24px; }
.proof-stats .stat-inner { display: flex; align-items: center; justify-content: center; gap: 8px 22px; }
.proof-stats .stat .n { flex: none; font-size: clamp(48px, calc((100cqi - 240px) / 2.7), 140px); }
.proof-stats .stat p:not(.n) { margin-top: 0; max-width: 17ch; font-size: 15px; line-height: 1.45; }
@container (max-width: 470px) {
  .proof-stats .stat-inner { flex-direction: column; text-align: center; }
  .proof-stats .stat .n { font-size: clamp(48px, 30cqi, 120px); transform-origin: center bottom; }
  .proof-stats .stat p:not(.n) { max-width: 28ch; }
}
@media (max-width: 700px) { .proof-stats .stat { padding-inline: 0; } }
.stat .n[data-pop] { display: inline-block; transform-origin: left bottom; }
.stat .n.is-popping { animation: stat-pop .7s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes stat-pop { 0% { transform: scale(.6); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 700px) {
  .stats { grid-template-columns: 1fr; }
  .stat, .stat:first-child { padding-left: 0; border-right: 0; border-bottom: 1px solid rgba(245, 246, 248, .18); padding-bottom: 24px; }
}

/* ---------- Integration diagram ---------- */
.flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.flow .node { border: 1px solid var(--n300); border-radius: var(--radius); background: var(--white); padding: 22px; min-height: 150px; display: flex; flex-direction: column; gap: 12px; }
.flow .node img { width: 48px; height: 48px; }
.flow .node:not(.core) { color: var(--n900); }   /* white cards: dark text, even inside a dark section */
/* On dark sections the outer cards use a soft Insight Blue tint instead of white, so they don't glare */
.section--dark .flow .node:not(.core) { background: #E4ECF2; border-color: #E4ECF2; color: var(--blue); }
.section--dark .flow .node:not(.core) p { color: #3A4F60; }
.section--dark .flow .node:not(.core) h4 { color: var(--teal-ink); }   /* Analytic Teal, text-strength shade for light backgrounds */
.flow .node.core { background: var(--blue); color: var(--n100); border-color: var(--blue); }
.flow .node.core p { color: #C9D6E0; }
.flow .node p { font-size: 15px; color: var(--n600); }
.flow .conn { width: 44px; height: 1px; background: repeating-linear-gradient(90deg, var(--pink) 0 6px, transparent 6px 10px); position: relative; }
.flow .conn::after { content: ""; position: absolute; right: -2px; top: -4px; border: 4.5px solid transparent; border-left: 7px solid var(--pink); }
@media (max-width: 860px) {
  .flow { grid-template-columns: 1fr; }
  .flow .conn { width: 1px; height: 32px; justify-self: center; background: repeating-linear-gradient(180deg, var(--pink) 0 6px, transparent 6px 10px); }
  .flow .conn::after { right: -4px; top: auto; bottom: -6px; border: 4.5px solid transparent; border-top: 7px solid var(--pink); }
}

/* ---------- Partner logo wall ---------- */
.logo-wall { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); border-top: 1px solid var(--n300); border-left: 1px solid var(--n300); }
.logo-wall li { list-style: none; border-right: 1px solid var(--n300); border-bottom: 1px solid var(--n300); min-height: 120px; display: grid; place-items: center; padding: 20px; text-align: center; }
.logo-wall .logo-word { font-size: clamp(18px, 1.8vw, 24px); }
.logo-wall-img { display: block; max-width: 100%; height: auto; opacity: .7; transition: opacity .25s var(--ease); }
.logo-wall li:hover .logo-wall-img { opacity: 1; }
.section--dark .logo-wall, .section--dark .logo-wall li { border-color: rgba(245, 246, 248, .15); }
.section--dark .logo-word { color: #B8C7D3; }
.section--dark .logo-word:hover { color: var(--white); }
.logo-group + .logo-group { margin-top: 48px; }
.logo-group .label { margin-bottom: 16px; display: block; }
@media (max-width: 860px) { .logo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Split / two column content ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px clamp(32px, 6vw, 96px); align-items: start; }
.split--wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
@media (max-width: 900px) { .split, .split--wide-left { grid-template-columns: 1fr; } }

.card {
  border: 1px solid var(--n200); border-radius: clamp(16px, 2vw, 24px); background: var(--white);
  padding: clamp(28px, 3.4vw, 48px); display: flex; flex-direction: column; gap: 20px; height: 100%;
}
.card .icon { width: 72px; height: 72px; }
.card--dark { background: var(--blue); color: var(--n100); border-color: var(--blue); }
.card.card--dark p { color: #C9D6E0; }
.card--tint { background: #E8F6F6; border-color: #BFE3E3; }   /* pale Analytic Teal card, between white and dark */
.card.card--tint p { color: #3E5458; }
.card p { color: var(--n600); }

.check-list { list-style: none; counter-reset: c; border-top: 1px solid var(--n200); }
.check-list li { counter-increment: c; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: baseline; padding-block: 16px; border-bottom: 1px solid var(--n200); font-weight: 500; }
.check-list li::before { content: counter(c, decimal-leading-zero); font-family: var(--font-label); font-size: 12px; letter-spacing: .1em; color: var(--pink-ink); }
.card--dark .check-list, .card--dark .check-list li { border-color: rgba(245, 246, 248, .15); }
.card--dark .check-list li::before { color: var(--pink-soft); }

/* ---------- About ---------- */
.definition { border-left: 2px solid var(--pink); padding-left: 24px; }
.definition .word { font-family: var(--font-display); font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.03em; }
.definition .pos { font-family: var(--font-label); font-size: 13px; color: #9DB2C2; margin-left: 8px; }
.definition p { margin-top: 8px; color: #C9D6E0; }

.year-block { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px 48px; align-items: end; }
.year-block .year { font-family: var(--font-display); font-weight: 600; font-size: clamp(100px, 16vw, 240px); line-height: .8; letter-spacing: -0.07em; color: var(--pink); }
@media (max-width: 760px) { .year-block { grid-template-columns: 1fr; } }

.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }

.regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(245, 246, 248, .18); margin-top: 48px; }
.region { padding: 28px 24px 0 0; border-right: 1px solid rgba(245, 246, 248, .18); }
.region + .region { padding-left: 24px; }
.region:last-child { border-right: 0; }
.region .n { font-family: var(--font-display); font-size: clamp(40px, 5vw, 72px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; }
@media (max-width: 600px) { .regions { grid-template-columns: 1fr; } .region, .region + .region { padding-left: 0; border-right: 0; padding-bottom: 20px; border-bottom: 1px solid rgba(245, 246, 248, .18); } }

.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; align-items: start; }
.member { display: flex; flex-direction: column; gap: 18px; }
.member .photo { aspect-ratio: 1 / 1; border-radius: var(--radius); background: var(--n100); overflow: hidden; position: relative; }
.member .photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1); }
a.photo { display: block; color: inherit; cursor: pointer; }
a.photo img { transition: transform .5s var(--ease), filter .5s var(--ease); }
a.photo:hover img, a.photo:focus-visible img { transform: scale(1.04); filter: grayscale(0); }   /* colour returns on hover */
.photo-li {  position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%;  display: grid; place-items: center; background: #0A66C2; color: #fff;  opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease), transform .25s var(--ease);}
.photo-li svg { width: 18px; height: 18px; }
a.photo:hover .photo-li, a.photo:focus-visible .photo-li { opacity: 1; transform: none; }
@media (hover: none) { .photo-li { opacity: 1; transform: none; } }
.member .photo--ph { background: repeating-linear-gradient(135deg, var(--n200) 0 12px, var(--n100) 12px 24px); }
.member h3 { font-size: 22px; }
.member .role { margin-top: 6px; color: var(--pink-ink); font-family: var(--font-label); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.bio { margin-top: 10px; border-top: 1px solid var(--n200); }
.bio summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--n900);
}
.bio summary::-webkit-details-marker { display: none; }
.bio summary::after {
  content: ""; width: 28px; height: 28px; flex: none; border: 1px solid var(--n300); border-radius: 50%;
  background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
  transition: transform .25s var(--ease), background-color .2s, border-color .2s;
}
.bio summary:hover::after { border-color: var(--pink-ink); }
.bio[open] summary::after { transform: rotate(45deg); }
.bio-text { padding-bottom: 8px; }
.bio-text p, .bio-text li { font-size: 15px; line-height: 1.6; color: var(--n600); }
.bio-text p + p, .bio-text p + ul { margin-top: 12px; }
.bio-text ul { list-style: none; display: grid; gap: 10px; }
.bio-text li { padding-left: 16px; position: relative; }
.bio-text li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1.5px; background: var(--pink); }
.bio-text strong { color: var(--n900); font-weight: 600; }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Contact form ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: 1fr; } }
.form-card { background: var(--white); color: var(--n900); border-radius: clamp(16px, 2vw, 24px); padding: clamp(24px, 3.4vw, 48px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .45); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: 15px; }
.field .req { color: var(--pink-ink); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--n300); background: var(--n100); color: var(--n900); font-size: 16px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111417' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: var(--white); box-shadow: 0 0 0 3px rgba(13, 166, 166, .25); }
.field [aria-invalid="true"] { border-color: var(--pink-ink); background: #FFF5F8; }
.field .err { font-size: 14px; color: var(--pink-ink); min-height: 0; }
.field .err:empty { display: none; }
.form-foot { margin-top: 28px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.form-foot .fine { font-size: 14px; color: var(--n600); max-width: 52ch; }
.form-foot .fine a { color: var(--n900); }
.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.form-success { text-align: left; padding: 24px 0; }
.form-success .icon { width: 72px; height: 72px; margin-bottom: 16px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }

.route-list { list-style: none; margin-top: 40px; border-top: 1px solid rgba(245, 246, 248, .18); }
.route-list li { border-bottom: 1px solid rgba(245, 246, 248, .18); }
.route-list button {
  width: 100%; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 0; background: none; border: 0; cursor: pointer; text-align: left;
  color: #D6E0E8; font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; transition: color .2s;
}
.route-list img { width: 36px; height: 36px; flex: none; }
.route-list button:hover, .route-list button[aria-pressed="true"] { color: var(--white); }
.route-list button[aria-pressed="true"] .i-arrow-r { color: var(--pink-soft); opacity: 1; }
.route-list .i-arrow-r { margin-left: auto; opacity: .45; }

/* ---------- Legal ---------- */
.legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px 80px; align-items: start; }
.legal-toc { position: sticky; top: calc(var(--header-h) + 32px); list-style: none; border-left: 1px solid var(--n300); }
.legal-toc a { display: flex; align-items: center; min-height: 44px; padding-left: 18px; margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--n600); font-weight: 500; }
.legal-toc a:hover { color: var(--n900); border-left-color: var(--pink); }
.legal-section { padding-block: 40px; border-top: 1px solid var(--n300); }
.legal-section:first-child { border-top: 0; padding-top: 0; }
.legal-section .prose { margin-top: 20px; }
.placeholder-box { border: 1px dashed var(--n300); border-radius: var(--radius-sm); padding: 18px 20px; color: var(--n600); font-size: 15px; background: var(--white); }
@media (max-width: 860px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } }

/* ---------- Graphic elements ---------- */
.origami { position: absolute; pointer-events: none; }

/* ---------- Reveal on scroll ---------- */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal-line { display: block; overflow: hidden; padding-right: .12em; margin-right: -.12em; padding-bottom: .06em; margin-bottom: -.06em; }
.js .reveal-line > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .is-in .reveal-line > span, .js .reveal-line.is-in > span { transform: none; }

/* ---------- Utilities ---------- */
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: clamp(40px, 5vw, 64px); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee { animation-duration: 76s !important; animation-iteration-count: infinite !important; }
  .js .reveal, .js .reveal-line > span { opacity: 1; transform: none; }
}

/* ---------- Phone fixes ---------- */
/* Hero visual kept only as a desktop spacer (e.g. Creative Intelligence): no empty block on phones */
@media (max-width: 960px) { .hero-visual--spacer { display: none; } }
@media (max-width: 600px) and (prefers-reduced-motion: no-preference) { .js .hero--video { height: 190vh; } }
@media (max-width: 600px) {
  /* Home video hero: shorter pinned scroll, and a more compact copy block so the flamingo stays in view */
  .hero--video .hero-meta { display: none; }
  .hero--video .hero-copy .display { font-size: clamp(42px, 12vw, 56px); }
  .hero--video .hero-kicker { margin-top: 16px; font-size: 18px; }
  .hero--video .hero-copy .lead { margin-top: 12px; font-size: 15px; }
  .hero--video .hero-copy .btn-row { margin-top: 22px; }
  .hero--video .btn--lg { padding-block: 14px; }
  .hero--video .hero-bottom { padding-block: 14px 18px; }
  /* Leadership team: two per row instead of six full-width photos */
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .member { gap: 12px; }
  .member h3 { font-size: 17px; line-height: 1.25; }
  .member .role { font-size: 10.5px; letter-spacing: .1em; line-height: 1.4; }
  .photo-li { width: 32px; height: 32px; right: 8px; bottom: 8px; }
  .photo-li svg { width: 15px; height: 15px; }
}

/* Nav items that aren't live yet (Media Intelligence, Proof): greyed out, not clickable */
.nav a.is-disabled, .mobile-nav a.m-link.is-disabled { color: rgba(245, 246, 248, .32); cursor: not-allowed; }
.nav a.is-disabled::after { display: none; }
.mobile-nav a.m-link.is-disabled .label { color: rgba(245, 246, 248, .25); }

/* Home: second "Trusted by" row (programmes, industry bodies, awards) under the logo carousel */
.trusted-wrap { background: var(--white); border-bottom: 1px solid var(--n200); padding-block: 28px 40px; }
.logo-wall--row li { min-height: 104px; padding: 16px 12px; }
@media (max-width: 1100px) { .logo-wall--row { --n: 4 !important; } }
@media (max-width: 860px) { .logo-wall--row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Footer: company details under the copyright row */
.footer-company { font-style: normal; padding-block: 16px 40px; text-align: center; font-size: 13px; color: #8C97A3; }
.footer-company ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.footer-company li:not(:last-child)::after { content: "·"; margin-inline: 10px; color: #5C6773; }
@media (max-width: 560px) { .footer-company ul { flex-direction: column; align-items: center; } .footer-company li::after { display: none; } }

/* Legal page: downloadable policy documents */
.doc-link { display: flex; align-items: center; gap: 16px; max-width: 560px; padding: 16px 20px; border: 1px solid var(--n300); border-radius: var(--radius-sm); background: var(--white); color: var(--n900); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.doc-link:hover, .doc-link:focus-visible { border-color: var(--pink); box-shadow: 0 6px 20px rgba(17, 20, 23, .06); }
.doc-ic { flex: none; display: grid; place-items: center; width: 44px; height: 52px; border-radius: 6px; background: var(--pink); color: var(--white); font-family: var(--font-label); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.doc-txt { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.doc-txt strong { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.doc-txt span { font-size: 13px; color: var(--n600); }
.doc-link .i-arrow { flex: none; color: var(--pink-ink); }