/* ============================================================
   uservox.com — site stylesheet
   Tokens follow the XMap design system (tokens.css in src/).
   ============================================================ */

@font-face { font-family: "Helvetica Neue XM"; src: url("/fonts/HelveticaNeueThin.otf") format("opentype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue XM"; src: url("/fonts/HelveticaNeueLight.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue XM"; src: url("/fonts/HelveticaNeueRoman.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue XM"; src: url("/fonts/HelveticaNeueMedium.otf") format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue XM"; src: url("/fonts/HelveticaNeueBold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue XM"; src: url("/fonts/HelveticaNeueHeavy.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue XM"; src: url("/fonts/HelveticaNeueBlack.otf") format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Helvetica Neue XM"; src: url("/fonts/HelveticaNeueItalic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }

@font-face { font-family: "OpenDyslexic"; src: url("/fonts/OpenDyslexic-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/fonts/OpenDyslexic-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/fonts/OpenDyslexic-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/fonts/OpenDyslexic-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  --xm-white: rgb(255,255,255);
  --xm-ink: rgb(35,31,32);
  --xm-pink: rgb(255,62,154);
  --xm-pink-dark: rgb(197,53,127);
  --xm-green: rgb(139,197,63);
  --xm-paper: #faf9f7;
  --xm-rule: rgba(35,31,32,.12);
  --xm-rule-rev: rgba(255,255,255,.14);
  --xm-text: var(--xm-ink);

  --xm-life: rgb(0,162,255);
  --xm-health: rgb(15,139,249);
  --xm-concerns: rgb(46,106,238);
  --xm-discovery: rgb(74,81,231);
  --xm-diagnose: rgb(105,85,245);
  --xm-treat: rgb(170,89,213);
  --xm-stabilise: rgb(236,93,141);
  --xm-progression: rgb(255,111,103);
  --xm-end: rgb(255,160,59);
  --xm-spectrum: linear-gradient(90deg, var(--xm-life) 0%, var(--xm-health) 12.5%, var(--xm-concerns) 25%, var(--xm-discovery) 37.5%, var(--xm-diagnose) 50%, var(--xm-treat) 62.5%, var(--xm-stabilise) 75%, var(--xm-progression) 87.5%, var(--xm-end) 100%);

  --xm-font: "Helvetica Neue XM", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --sec-y: clamp(56px, 7vw, 92px);
  --grid-gap: clamp(20px, 3vw, 40px); /* one column gap everywhere, so the second column of a two-column layout lines up with the third of a four-column one */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--xm-white); color: var(--xm-text);
  font-family: var(--xm-font); font-weight: 300; font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: 5px; /* room for the spectrum bar */
  overflow-x: clip;
}
a { color: var(--xm-pink); text-decoration: none; }
a:hover { color: var(--xm-pink-dark); }
img { max-width: 100%; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--xm-pink); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.sec { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.sec--ink { background: var(--xm-ink); color: #fff; }
.sec--paper { background: var(--xm-paper); border-top: 1px solid var(--xm-rule); border-bottom: 1px solid var(--xm-rule); }
.sec--white { background: var(--xm-white); }
.sec--line { border-top: 1px solid var(--xm-rule); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(26px, 4vw, 64px) var(--grid-gap); }
.grid-2.tight { gap: clamp(24px, 3.6vw, 56px) var(--grid-gap); }
.grid-2.end { align-items: end; }
.grid-2.start { align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(18px, 2.6vw, 40px); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 32px; }
.sec-head { margin-bottom: clamp(28px, 4vw, 48px); }

/* ---------- Type ---------- */
.eyebrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font: 700 13px/1 var(--xm-font); letter-spacing: .16em; text-transform: uppercase; color: var(--xm-pink); }
.eyebrow .n { font-size: 12px; letter-spacing: .2em; opacity: .35; color: inherit; }
.sec--ink .eyebrow .n { color: #fff; }
.display { font-weight: 900; text-transform: uppercase; letter-spacing: -.035em; line-height: .86; margin: 0; }
h1.display { font-size: clamp(40px, 6.9vw, 92px); letter-spacing: -.04em; line-height: .84; }
h2.display { font-size: clamp(34px, 4.7vw, 58px); letter-spacing: -.03em; margin-top: 18px; }
.display.md { font-size: clamp(30px, 3.7vw, 48px); line-height: .92; letter-spacing: -.025em; }
h2.display.xl { font-size: clamp(50px, 6.4vw, 84px); letter-spacing: -.04em; line-height: .83; }
.pink { color: var(--xm-pink); }
.lede { font-weight: 300; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; opacity: .8; margin: 0; max-width: 54ch; }
.lede.lg { font-size: 20px; line-height: 1.5; opacity: 1; }
.body { font-weight: 300; font-size: 16px; line-height: 1.6; opacity: .78; max-width: 62ch; margin: 0; }
.small { font-weight: 300; font-size: 13px; line-height: 1.55; opacity: .55; }
.h3 { font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 8px; }
.h3.lg { font-size: 26px; }
.label { font: 700 11px/1 var(--xm-font); letter-spacing: .16em; text-transform: uppercase; }
.label.pink { color: var(--xm-pink); }
.label.dim { opacity: .45; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 12px 22px; font: 700 11px/1 var(--xm-font); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.btn--pink { background: var(--xm-pink); color: #fff; border-color: var(--xm-pink); }
.btn--pink:hover { background: var(--xm-pink-dark); border-color: var(--xm-pink-dark); color: #fff; }
.btn--ghost { background: none; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--ghost:hover { border-color: #fff; color: #fff; }
.btn--ghost-ink { background: none; color: var(--xm-ink); border-color: var(--xm-ink); }
.btn--ghost-ink:hover { background: var(--xm-ink); color: #fff; }
.textlink { font: 700 12px/1 var(--xm-font); letter-spacing: .14em; text-transform: uppercase; color: var(--xm-pink); white-space: nowrap; background: none; border: 0; padding: 0; cursor: pointer; }
.textlink:hover { color: var(--xm-pink-dark); }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--xm-ink); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.nav-left { display: flex; align-items: center; gap: 18px clamp(18px, 2.2vw, 36px); flex-wrap: wrap; min-width: 0; }
.nav-brand { display: flex; align-items: center; gap: 11px; flex: none; }
.nav-brand .logo { height: 30px; width: auto; display: block; color: #fff; }
.nav-brand .sep { width: 1px; height: 26px; background: rgba(255,255,255,.2); }
.nav-brand .by { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.nav-brand .by:hover { opacity: .85; }
.nav-brand .by .t1 { font: 700 10px/1 var(--xm-font); letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; }
.nav-brand .by img { height: 26px; width: auto; display: block; }
.nav-brand .by .t2 { font: 700 11px/1 var(--xm-font); letter-spacing: .13em; text-transform: uppercase; color: var(--xm-pink); white-space: nowrap; }
.nav-links { display: flex; gap: 12px clamp(12px, 1.4vw, 22px); flex-wrap: wrap; }
.nav .wrap > .btn { margin-left: auto; } /* "Talk to us" sits at the right, beside the Accessibility button */
@media (max-width: 900px) { .nav-links { display: none; } }
.nav-links a { font: 700 11px/1 var(--xm-font); letter-spacing: .13em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--xm-pink); }
.nav .home-logo { height: 34px; width: auto; display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 95% at 74% 42%, rgba(0,162,255,.20) 0%, rgba(0,120,205,.11) 34%, rgba(0,70,130,.04) 58%, rgba(35,31,32,0) 76%), var(--xm-ink); }
.hero-glow { position: absolute; inset: -22%; pointer-events: none; animation: xmDrift 24s ease-in-out infinite; will-change: transform, opacity; background: radial-gradient(64% 58% at 72% 44%, rgba(0,162,255,.34) 0%, rgba(0,124,208,.17) 36%, rgba(0,70,130,.06) 62%, rgba(35,31,32,0) 80%); }
.hero .wrap { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; padding-top: clamp(50px, 7vw, 80px); padding-bottom: clamp(50px, 7vw, 84px); }
.hero-copy { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(24px, 3.6vw, 56px); position: relative; z-index: 2; }
.hero-kicker { font: 700 12px/1 var(--xm-font); letter-spacing: .22em; text-transform: uppercase; opacity: .85; display: flex; align-items: center; gap: 14px; }
.hero-kicker::before { content: ""; width: 30px; height: 2px; background: var(--xm-pink); }
.hero-copy h1 { margin-top: 38px; }
.hero-sub { max-width: 460px; display: flex; flex-direction: column; gap: 26px; }
.hero-sub p { font-weight: 300; font-size: 18px; line-height: 1.5; opacity: .85; margin: 0; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-art { position: relative; min-height: clamp(260px, 32vw, 380px); }
.hero-berg { position: absolute; right: -24px; top: 8px; width: min(430px, 46vw); transform: scale(1.42); transform-origin: 66% 30%; }
.hero-berg img { display: block; width: 100%; height: auto; filter: drop-shadow(0 34px 54px rgba(0,0,0,.6)); animation: xmBob 6s ease-in-out infinite; }
.hero-rays { position: absolute; left: -4%; right: -4%; top: 30%; height: 86%; pointer-events: none; animation: xmSway 24s ease-in-out infinite; }
.hero-rays > div { position: absolute; inset: 0; animation: xmLight 6s ease-in-out infinite; background: repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 34px, rgba(140,208,255,.11) 34px 54px, rgba(0,0,0,0) 54px 104px), repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 61px, rgba(196,232,255,.075) 61px 68px, rgba(0,0,0,0) 68px 166px), repeating-linear-gradient(90deg, rgba(0,0,0,0) 0 88px, rgba(90,180,250,.065) 88px 118px, rgba(0,0,0,0) 118px 242px); -webkit-mask-image: radial-gradient(54% 104% at 52% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,.95) 14%, rgba(0,0,0,.62) 44%, rgba(0,0,0,.2) 70%, rgba(0,0,0,0) 90%); mask-image: radial-gradient(54% 104% at 52% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,.95) 14%, rgba(0,0,0,.62) 44%, rgba(0,0,0,.2) 70%, rgba(0,0,0,0) 90%); }
@media (max-width: 760px) { .hero-art { min-height: 220px; } .hero-berg { right: 0; width: 60vw; transform: scale(1.1); } }
@keyframes xmBob { 0% { transform: translateY(0) } 50% { transform: translateY(-10px) } 100% { transform: translateY(0) } }
@keyframes xmLight { 0% { transform: translateY(0) scaleY(1); opacity: .95 } 50% { transform: translateY(-4px) scaleY(1.03); opacity: 1 } 100% { transform: translateY(0) scaleY(1); opacity: .95 } }
@keyframes xmDrift { 0% { transform: translate3d(0,0,0) scale(1); opacity: .9 } 25% { transform: translate3d(-4.5%,2.2%,0) scale(1.07); opacity: 1 } 50% { transform: translate3d(2%,-3.2%,0) scale(1.02); opacity: .84 } 75% { transform: translate3d(4.5%,1.4%,0) scale(1.08); opacity: .97 } 100% { transform: translate3d(0,0,0) scale(1); opacity: .9 } }
@keyframes xmSway { 0% { transform: translateX(0) skewX(0deg); opacity: .9 } 25% { transform: translateX(-8px) skewX(-1.7deg); opacity: 1 } 50% { transform: translateX(4px) skewX(.9deg); opacity: .8 } 75% { transform: translateX(9px) skewX(1.9deg); opacity: .96 } 100% { transform: translateX(0) skewX(0deg); opacity: .9 } }
@media (prefers-reduced-motion: reduce) { .hero-glow, .hero-berg img, .hero-rays, .hero-rays > div { animation: none !important; } }

/* ---------- Feature blocks (differentiators, roles, trust cards) ---------- */
.feat { border-top: 1px solid var(--xm-rule); padding-top: 16px; }
.sec--ink .feat { border-top-color: var(--xm-rule-rev); }
.feat .h3 { font-size: 22px; }
.feat p { font-weight: 300; font-size: 14px; line-height: 1.5; opacity: .72; margin: 0; }

/* ---------- Comparison table ---------- */
.cmp-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(18px, 2.6vw, 40px); padding-bottom: 10px; }
.cmp-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: clamp(18px, 2.6vw, 40px); padding: 24px 0; border-top: 1px solid var(--xm-rule-rev); }
.cmp-row p { margin: 0; font-weight: 300; line-height: 1.5; }
.cmp-row .was { font-size: 15px; opacity: .5; }
.cmp-row .now { font-size: 16px; }
.cmp-foot { display: flex; align-items: baseline; gap: 12px 22px; flex-wrap: wrap; padding-top: 32px; border-top: 1px solid var(--xm-rule-rev); }
.cmp-foot .big { font-weight: 900; font-size: clamp(26px, 3.2vw, 42px); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; }
.anchor-line { font-weight: 300; font-size: clamp(15px, 1.5vw, 17px); line-height: 1.55; opacity: .78; margin: 0; max-width: 52ch; }
.quote { font-weight: 900; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; margin: clamp(30px, 4vw, 48px) 0 0; max-width: 24ch; }

/* ---------- Tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 10px clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--xm-rule); }
.tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 0 0 14px; cursor: pointer; white-space: nowrap; font: 700 clamp(11px, 1.15vw, 12px)/1 var(--xm-font); letter-spacing: .14em; text-transform: uppercase; color: rgba(35,31,32,.45); display: flex; align-items: baseline; gap: 7px; transition: color .15s; }
.tab:hover { color: var(--xm-ink); }
.tab[aria-selected="true"] { color: var(--xm-ink); border-bottom-color: var(--xm-pink); }
.tab .cnt { font-weight: 400; opacity: .5; }
[hidden] { display: none !important; }

/* ---------- Screens (what you receive) ---------- */
.screen-frame { border-radius: 14px; overflow: hidden; background: var(--xm-ink); box-shadow: 0 30px 66px rgba(0,0,0,.2), 0 0 0 1px rgba(0,0,0,.1); }
.screen-bar { display: flex; align-items: center; gap: 18px; padding: 12px 16px; background: #2c2928; border-bottom: 1px solid rgba(255,255,255,.08); }
.screen-bar .dots { display: flex; gap: 7px; flex: none; }
.screen-bar .dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.22); display: block; }
.screen-bar .url { flex: 1; min-width: 0; display: flex; justify-content: center; }
.screen-bar .url span { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 7px; padding: 6px 16px; font: 400 11.5px/1.2 ui-monospace, Menlo, monospace; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-bar .pad { width: 40px; flex: none; }
.screen-img img { display: block; width: 100%; height: auto; }
.screen-ph { aspect-ratio: 1741 / 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px); }
.screen-ph .t { font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.screen-ph .s { font: 700 10px/1 var(--xm-font); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.28); }
.screen-ai { padding: 22px 24px; color: #fff; }
.screen-ai .q { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.screen-ai .q div { max-width: 74%; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); border-radius: 12px 12px 3px 12px; padding: 12px 15px; font: 300 14px/1.45 var(--xm-font); }
.screen-ai .a { display: flex; align-items: flex-start; gap: 11px; }
.screen-ai .a .av { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--xm-pink); display: flex; align-items: center; justify-content: center; font: 900 9px/1 var(--xm-font); margin-top: 2px; }
.screen-ai .a p { font: 300 14px/1.5 var(--xm-font); color: rgba(255,255,255,.9); margin: 0 0 13px; }
.screen-ai .chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.screen-ai .chips span { border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: 5px 10px; font: 700 9px/1 var(--xm-font); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.72); white-space: nowrap; }
.screen-ov { padding: 20px 24px 22px; color: #fff; }
.screen-ov .ttl { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 4px; }
.screen-ov .ttl b { font-weight: 900; font-size: 19px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.screen-ov .ttl span, .screen-ov .lbl { font: 700 8.5px/1 var(--xm-font); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.4); }
.screen-ov .sub { font: 700 8.5px/1 var(--xm-font); letter-spacing: .16em; text-transform: uppercase; color: var(--xm-pink); margin-bottom: 16px; }
.screen-ov .lbl { display: block; margin-bottom: 9px; }
.bars { display: grid; grid-template-columns: repeat(9, minmax(0,1fr)); gap: 4px; align-items: end; height: 104px; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.12); }
.bars div { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-width: 0; }
.bars i { display: block; border-radius: 2px 2px 0 0; }
.bars span { font: 700 7px/1.1 var(--xm-font); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ov-needs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; margin-top: 18px; }
.ov-needs > div { border-top: 2px solid; padding-top: 9px; }
.ov-needs .st { font: 700 8px/1 var(--xm-font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: 5px; }
.ov-needs .nm { font: 700 11px/1.3 var(--xm-font); margin-bottom: 4px; }
.ov-needs .ds { font: 300 9.5px/1.4 var(--xm-font); color: rgba(255,255,255,.6); }
.ov-tot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 18px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12); }
.ov-tot div { display: flex; align-items: baseline; gap: 7px; }
.ov-tot b { font-weight: 900; font-size: 17px; line-height: 1; color: var(--xm-pink); }
.ov-tot span { font: 700 8px/1.2 var(--xm-font); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.screen-cap { font-weight: 300; font-size: 13px; line-height: 1.5; opacity: .5; margin: 16px 0 0; text-align: center; }
.screen-q { font: 700 11px/1.4 var(--xm-font); letter-spacing: .13em; text-transform: uppercase; color: var(--xm-pink); margin-bottom: 14px; }
.screen-name { font-weight: 900; font-size: 32px; line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 16px; }

/* ---------- Scene explorer ---------- */
.phases { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.6vw, 30px); }
.phase { flex: 1 1 300px; min-width: 0; }
.phase-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.phase-head b { font-weight: 900; font-size: clamp(15px, 1.7vw, 20px); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.phase-head span { font: 300 12px/1.35 var(--xm-font); opacity: .6; }
.phase-bar { height: 3px; margin-bottom: 14px; }
.scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scene { position: relative; appearance: none; text-align: center; cursor: pointer; background: #fff; border: 1px solid var(--xm-rule); border-top: 3px solid var(--c); outline: 2px solid transparent; outline-offset: -1px; padding: 14px 8px 13px; display: flex; flex-direction: column; align-items: center; gap: 9px; transition: outline-color .15s, transform .15s; color: var(--xm-ink); }
.scene:hover { transform: translateY(-2px); }
.scene[aria-pressed="true"] { outline-color: var(--xm-pink); color: var(--xm-pink); }
.scene .no { position: absolute; top: 8px; right: 9px; font: 700 9px/1 var(--xm-font); letter-spacing: .1em; color: var(--c); }
.scene img { width: 100%; max-width: 96px; height: auto; display: block; pointer-events: none; }
.scene .nm { font-weight: 900; font-size: clamp(11px, 1.15vw, 14px); line-height: 1; letter-spacing: .02em; text-transform: uppercase; }
.scene .dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--xm-pink); }
.scene.marked .dot { display: block; }
.explore-body { display: flex; flex-wrap: wrap; gap: clamp(26px, 3.4vw, 48px); margin-top: clamp(34px, 4.5vw, 52px); padding-top: clamp(26px, 3.4vw, 40px); border-top: 1px solid var(--xm-rule); align-items: flex-start; }
.steps { flex: 95 1 280px; min-width: 0; }
.steps-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.steps-head .sel { font: 700 11px/1 var(--xm-font); letter-spacing: .16em; text-transform: uppercase; }
.steps-head .cnt { font: 300 12px/1 var(--xm-font); opacity: .45; }
.step { width: 100%; text-align: left; appearance: none; border: 0; border-top: 1px solid var(--xm-rule); border-left: 3px solid transparent; background: transparent; color: var(--xm-ink); cursor: pointer; padding: 12px 12px 12px 11px; display: grid; grid-template-columns: 28px 1fr; gap: 0 10px; transition: background .15s, border-color .15s; }
.step .no { font: 700 11px/1.45 var(--xm-font); letter-spacing: .06em; opacity: .55; }
.step .nm { font-size: clamp(13.5px, 1.3vw, 15px); line-height: 1.3; font-weight: 400; letter-spacing: -.01em; }
.step[aria-pressed="true"] { background: #fff; border-left-color: var(--xm-pink); color: var(--xm-pink); }
.step[aria-pressed="true"] .nm { font-weight: 700; }
.steps .end { border-top: 1px solid var(--xm-rule); }
.detail { flex: 105 1 300px; min-width: 0; }
.detail-head { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.detail-no { font-weight: 900; font-size: clamp(40px, 5vw, 60px); line-height: .82; letter-spacing: -.04em; flex: none; }
.detail h3 { font-weight: 900; font-size: clamp(20px, 2.2vw, 26px); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 8px; }
.detail .take { font: 700 clamp(12px, 1.2vw, 13.5px)/1.35 var(--xm-font); letter-spacing: .01em; color: var(--xm-pink); }
.detail .desc { font-weight: 300; font-size: clamp(14.5px, 1.45vw, 16px); line-height: 1.6; margin: 18px 0 0; max-width: 58ch; }
.detail .exit { border-top: 1px solid var(--xm-rule); margin-top: 20px; padding-top: 13px; }
.detail .exit .lbl { font: 700 9.5px/1 var(--xm-font); letter-spacing: .16em; text-transform: uppercase; color: var(--xm-pink); margin-bottom: 6px; }
.detail .exit .tx { font-weight: 300; font-size: 14.5px; line-height: 1.45; }
.plays { margin-top: clamp(34px, 4.5vw, 52px); padding: clamp(24px, 3vw, 34px) clamp(20px, 2.6vw, 32px); background: var(--xm-ink); color: #fff; }
.plays-head { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: baseline; margin-bottom: 20px; }
.plays-head b { font-weight: 900; font-size: clamp(18px, 2vw, 24px); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; }
.plays-head > span { font: 300 clamp(13px, 1.3vw, 14.5px)/1.4 var(--xm-font); opacity: .65; max-width: 52ch; }
.plays-body { display: flex; flex-wrap: wrap; gap: 20px 30px; align-items: flex-start; }
.play-list { flex: 1 1 260px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.play { text-align: left; cursor: pointer; border: 1px solid var(--xm-rule-rev); background: #fff; color: var(--xm-ink); border-radius: 6px; padding: 12px 13px; font: 700 clamp(10px, 1vw, 11px)/1.2 var(--xm-font); letter-spacing: .04em; text-transform: uppercase; transition: all .15s; }
.play[aria-pressed="true"] { background: var(--xm-pink); border-color: var(--xm-pink); color: #fff; }
.play-text { flex: 1 1 300px; min-width: 0; }
.play-text .where { font: 700 10px/1 var(--xm-font); letter-spacing: .14em; text-transform: uppercase; color: var(--xm-pink); margin-bottom: 10px; }
.play-text p { font-weight: 300; font-size: clamp(14.5px, 1.45vw, 15.5px); line-height: 1.5; margin: 0 0 12px; }
.play-text .eff { display: flex; gap: 11px; align-items: baseline; }
.play-text .eff b { font: 700 10px/1.4 var(--xm-font); letter-spacing: .12em; text-transform: uppercase; opacity: .45; flex: none; }
.play-text .eff span { font-weight: 300; font-size: clamp(14px, 1.4vw, 15px); line-height: 1.5; opacity: .85; }

/* ---------- Personas ---------- */
.cards { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 28px); }
.card { flex: 1 1 300px; min-width: 0; max-width: 520px; display: flex; flex-direction: column; border-top: 3px solid var(--c); background: var(--xm-paper); }
.card .pic { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c); }
.card .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; }
.card .pic .noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: repeating-linear-gradient(135deg, rgba(255,255,255,.14) 0 12px, transparent 12px 24px); font: 700 10px/1 var(--xm-font); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.card .arch { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 14px; background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,0)); font: 700 10px/1 var(--xm-font); letter-spacing: .16em; text-transform: uppercase; color: #fff; }
.card .txt { padding: clamp(16px, 2vw, 22px); }
.card .nm { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.card h3 { font-weight: 900; font-size: clamp(19px, 2vw, 24px); line-height: 1; letter-spacing: -.015em; text-transform: uppercase; margin: 0; }
.card .role { font: 400 12px/1 var(--xm-font); opacity: .5; }
.card p { font-weight: 300; font-size: clamp(14px, 1.4vw, 15.5px); line-height: 1.55; margin: 0; opacity: .82; }

/* ---------- Accordion (trust) ---------- */
.acc { border-top: 1px solid var(--xm-rule-rev); }
.acc-q { width: 100%; appearance: none; background: none; border: 0; cursor: pointer; text-align: left; display: grid; grid-template-columns: 1fr 18px; gap: 18px; align-items: center; padding: 17px 0; color: #fff; }
.acc-q span { font-weight: 700; font-size: 15px; line-height: 1.35; letter-spacing: -.005em; }
.acc-q i { font: 400 17px/1 var(--xm-font); color: rgba(255,255,255,.4); justify-self: end; font-style: normal; }
.acc-q[aria-expanded="true"] span, .acc-q[aria-expanded="true"] i { color: var(--xm-pink); }
.acc-a { font-weight: 300; font-size: 14.5px; line-height: 1.55; opacity: .74; margin: 0; padding: 0 34px 20px 0; max-width: 76ch; }
.acc-end { border-top: 1px solid var(--xm-rule-rev); }
.record { border: 1px solid rgba(255,255,255,.16); border-radius: 10px; overflow: hidden; }
.record .top { padding: 18px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.record .top .lbl { font: 700 9.5px/1 var(--xm-font); letter-spacing: .16em; text-transform: uppercase; opacity: .45; margin-bottom: 10px; }
.record .top p { font-weight: 300; font-size: 14.5px; line-height: 1.5; margin: 0; }
.record .rows { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 11px; }
.record .rows div { display: flex; justify-content: space-between; gap: 16px; font: 400 12.5px/1.4 var(--xm-font); }
.record .rows div span:first-child { opacity: .5; }
.record .rows div span:last-child { text-align: right; }

/* ---------- Proof ---------- */
.stats { display: flex; flex-direction: column; }
.stat { padding: 28px 0; border-top: 1px solid var(--xm-rule-rev); display: flex; align-items: baseline; gap: 22px; }
.stat:last-child { border-bottom: 1px solid var(--xm-rule-rev); }
.stat b { font-weight: 900; font-size: clamp(48px, 6vw, 74px); line-height: .9; letter-spacing: -.04em; color: var(--xm-pink); }
.stat b.word { font-size: 30px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.stat span { font: 300 16px/1.5 var(--xm-font); opacity: .8; max-width: 24ch; }
.proof-story { grid-column: 1 / -1; padding-top: 44px; margin-top: 44px; border-top: 1px solid var(--xm-rule-rev); }
.proof-story .grid-4 > div .label { margin-bottom: 12px; display: block; }
.proof-story p { font: 300 15px/1.55 var(--xm-font); opacity: .82; margin: 0; }
.attrib { font: 300 12.5px/1.6 var(--xm-font); opacity: .5; margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--xm-rule-rev); max-width: 92ch; }

/* ---------- Process ---------- */
.proc-group { display: flex; align-items: baseline; gap: 14px; padding: 34px 0 8px; border-top: 1px solid var(--xm-rule); }
.proc-group:first-child { padding-top: 0; border-top: 0; }
.proc-group b { font: 900 12px/1 var(--xm-font); letter-spacing: .2em; text-transform: uppercase; color: var(--xm-pink); }
.proc-group span { font: 300 12px/1 var(--xm-font); opacity: .45; }
.proc-step { display: grid; grid-template-columns: 44px 1fr; gap: 22px; padding: 22px 0; border-top: 1px solid var(--xm-rule); }
.proc-step .no { font: 700 11px/1.5 var(--xm-font); letter-spacing: .16em; opacity: .35; }
.proc-step h3 { font-weight: 900; font-size: 20px; line-height: 1.05; letter-spacing: -.015em; text-transform: uppercase; margin: 0 0 8px; }
.proc-step p { font-weight: 300; font-size: 15px; line-height: 1.55; opacity: .75; margin: 0; max-width: 62ch; }
.proc-end { border-top: 1px solid var(--xm-rule); }
.aside { background: var(--xm-paper); border-top: 2px solid var(--xm-pink); padding: 26px 26px 28px; }
.aside .label { margin-bottom: 18px; display: block; }
.aside p { font-weight: 300; font-size: 14.5px; line-height: 1.55; margin: 0; }
.aside p + p { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--xm-rule); }

/* ---------- Pricing ---------- */
.price-row { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding: 20px 0; border-top: 1px solid var(--xm-rule); }
.price-row:last-of-type { border-bottom: 1px solid var(--xm-rule); }
.price-row .no { font: 700 11px/1.5 var(--xm-font); letter-spacing: .14em; opacity: .35; }
.price-row b { display: block; font-weight: 700; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 6px; }
.price-row p { font-weight: 300; font-size: 14.5px; line-height: 1.55; opacity: .72; margin: 0; }
.scope { padding-top: 20px; }
.scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 40px; }
.scope-grid > div { padding: 14px 0; border-top: 1px solid var(--xm-rule); }
.scope-grid b { display: block; font-weight: 700; font-size: 14px; line-height: 1.3; margin-bottom: 5px; }
.scope-grid p { font-weight: 300; font-size: 13px; line-height: 1.5; opacity: .68; margin: 0; }

/* ---------- Form ---------- */
.form-head { border-top: 2px solid var(--xm-pink); padding: 26px 0 30px; }
.form-head h3 { margin-bottom: 10px; }
.form-head p { font-weight: 300; font-size: 15px; line-height: 1.55; opacity: .75; margin: 0; }
.form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 26px 24px; }
.form label { display: flex; flex-direction: column; gap: 9px; }
.form label span { font: 700 10px/1 var(--xm-font); letter-spacing: .16em; text-transform: uppercase; opacity: .5; }
.form input { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--xm-rule); border-radius: 0; padding: 9px 0; font: 300 16px/1.3 var(--xm-font); color: var(--xm-ink); outline: none; width: 100%; }
.form input:focus { border-bottom-color: var(--xm-pink); }
.form .full { grid-column: 1 / -1; }
.form .actions { grid-column: 1 / -1; padding-top: 6px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.form .hp { position: absolute; left: -9999px; }
.form-done { border-top: 2px solid var(--xm-pink); padding-top: 30px; }
.form-done .label { display: block; margin-bottom: 16px; }
.form-done h3 { font-weight: 900; font-size: 34px; line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 14px; }
.form-done p { font-weight: 300; font-size: 16px; line-height: 1.6; opacity: .8; margin: 0 0 22px; max-width: 44ch; }
.form-err { color: var(--xm-pink-dark); font-weight: 400; font-size: 14px; }

/* ---------- Footer ---------- */
.foot { background: var(--xm-ink); color: #fff; }
.foot .wrap { padding-top: clamp(35px, 7vw, 56px); padding-bottom: 30px; }
.foot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; flex-wrap: wrap; padding-bottom: 34px; border-bottom: 1px solid var(--xm-rule-rev); }
.foot-line { font-weight: 900; font-size: 26px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 0 0 16px; }
.foot-by { display: inline-flex; align-items: center; gap: 13px; font: 500 12px/1 var(--xm-font); color: #fff; }
.foot-by span { color: rgba(255,255,255,.6); }
.foot-by img { height: 64px; width: auto; display: block; }
.foot-cols { display: flex; gap: clamp(26px, 4vw, 64px); flex-wrap: wrap; }
.foot-cols .label { display: block; margin-bottom: 15px; opacity: .45; }
.foot-cols .col { display: flex; flex-direction: column; gap: 10px; font: 300 14px/1.4 var(--xm-font); }
.foot-cols .col a { color: #fff; opacity: .8; }
.foot-cols .col a:hover { opacity: 1; color: var(--xm-pink); }
.foot-cols .col a.pink { color: var(--xm-pink); opacity: 1; }
.foot-cols .col span { opacity: .8; }
.foot-bottom { display: flex; gap: 48px; flex-wrap: wrap; justify-content: space-between; padding-top: 26px; font: 300 12px/1.7 var(--xm-font); opacity: .62; }
.spectrum { position: fixed; left: 0; right: 0; bottom: 0; height: 5px; background: var(--xm-spectrum); z-index: 60; pointer-events: none; }

/* ---------- Home page ---------- */
.home-hero { background: var(--xm-ink); color: #fff; position: relative; overflow: hidden; }
.home-hero .wrap { display: block; padding-top: clamp(56px, 8vw, 100px); padding-bottom: clamp(56px, 8vw, 104px); position: relative; }
.home-hero h1.one-line { font-size: clamp(38px, 7.3vw, 108px); white-space: nowrap; max-width: none; margin-top: 30px; position: relative; z-index: 2; }
.home-hero .hero-sub { margin-top: clamp(26px, 3.4vw, 44px); position: relative; z-index: 2; }
.home-hero .hero-sub p { font-size: clamp(17px, 1.7vw, 20px); }
.sooner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(18px, 2.6vw, 40px); }
.sooner > div { border-top: 1px solid var(--xm-rule); padding-top: 16px; }
.sooner .who { font: 700 11px/1 var(--xm-font); letter-spacing: .16em; text-transform: uppercase; color: var(--xm-pink); margin-bottom: 12px; }
.sooner p { font-weight: 300; font-size: 15px; line-height: 1.55; margin: 0; opacity: .8; }
.sooner p b { font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; font-size: 20px; display: block; margin-bottom: 8px; color: var(--xm-ink); }
.two-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--grid-gap); }
.product { border-top: 3px solid var(--xm-pink); padding: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.product.soon { border-top-color: rgba(255,255,255,.3); }
.product .h3 { font-size: clamp(24px, 2.6vw, 34px); }
.product p { margin: 0; font-weight: 300; font-size: 16px; line-height: 1.6; opacity: .82; max-width: 52ch; }
.product .btn { align-self: flex-start; margin-top: 8px; }
.product .tag { font: 700 10px/1 var(--xm-font); letter-spacing: .18em; text-transform: uppercase; opacity: .5; }
.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
@media (max-width: 900px) { .how { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .how { grid-template-columns: 1fr; } }
.how > div { border-top: 1px solid var(--xm-rule); padding-top: 16px; }
.how .h3 { font-size: 20px; line-height: 1.05; min-height: 2.1em; display: flex; align-items: flex-end; margin-bottom: 12px; } /* two-line headers: every paragraph starts on the same line */
.how p { font-weight: 300; font-size: 14.5px; line-height: 1.55; opacity: .75; margin: 0; }
.draft-band { background: var(--xm-pink); color: #fff; font: 700 11px/1.4 var(--xm-font); letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 8px 16px; }

/* ---------- Abstract interface illustrations (what you receive) ----------
   Skeleton-style mocks: grey blocks stand in for text and imagery, life-stage
   colours are the only accents, pink marks where the brand acts. No live data. */
.ab { aspect-ratio: 1741 / 1000; padding: 4.2% 4.5%; display: flex; flex-direction: column; gap: 4%; color: #fff; overflow: hidden; }
.ab .b { display: block; background: rgba(255,255,255,.12); border-radius: 4px; height: 8px; }
.ab .b.h { background: rgba(255,255,255,.28); height: 12px; }
.ab .b.pk { background: var(--xm-pink); }
.ab .b.dim { background: rgba(255,255,255,.07); }
.ab .row { display: flex; gap: 6px; align-items: center; }
.ab .stack { display: flex; flex-direction: column; gap: 6px; }
.ab .pill { display: inline-block; height: 9px; border-radius: 999px; background: rgba(255,255,255,.14); }
.ab .pill.pk { background: var(--xm-pink); }
.ab .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.ab .panel { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 3%; }
.ab .top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ab .top .b { flex: none; }
/* overview */
.ab-ov .bars { height: 30%; padding: 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.ab-ov .bars div { height: 100%; justify-content: flex-end; }
.ab-ov .bars i { border-radius: 3px 3px 0 0; }
.ab-ov .needs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4%; flex: 1; }
.ab-ov .needs > div { border-top: 2px solid; padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }
/* segments */
.ab-seg .lanes { display: flex; flex-direction: column; gap: 4%; flex: 1; justify-content: center; }
.ab-seg .lane { display: grid; grid-template-columns: 18% 1fr; gap: 3%; align-items: center; }
.ab-seg .track { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; }
.ab-seg .track span { height: 14px; border-radius: 3px; background: rgba(255,255,255,.07); }
.ab-seg .track span.on { opacity: .9; }
.ab-seg .track span.act { outline: 2px solid var(--xm-pink); outline-offset: 1px; }
.ab-seg .axis { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-left: 21%; }
.ab-seg .axis span { height: 3px; border-radius: 2px; }
/* personas */
.ab-per .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; flex: 1; }
.ab-per .card-ab { display: flex; flex-direction: column; gap: 6px; border-top: 3px solid; }
.ab-per .face { width: 34%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.1); margin: 10px 0 4px; position: relative; }
.ab-per .face::after { content: ""; position: absolute; inset: 22% 30% auto 30%; height: 26%; border-radius: 50%; background: rgba(255,255,255,.28); }
.ab-per .traits { display: flex; flex-direction: column; gap: 5px; margin-top: auto; }
.ab-per .traits div { display: grid; grid-template-columns: 34% 1fr; gap: 6px; align-items: center; }
.ab-per .traits i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
.ab-per .traits i::after { content: ""; display: block; height: 100%; width: var(--v); background: currentColor; border-radius: 3px; }
/* evidence */
.ab-ev { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: auto 1fr; gap: 3% 3%; }
.ab-ev .search { grid-column: 1 / -1; height: 26px; border-radius: 6px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; padding: 0 10px; }
.ab-ev .list { display: flex; flex-direction: column; gap: 4%; }
.ab-ev .src { display: grid; grid-template-columns: 22% 1fr 16%; gap: 8px; align-items: center; padding-bottom: 4%; border-bottom: 1px solid rgba(255,255,255,.08); }
.ab-ev .src .pill { width: 100%; }
.ab-ev .rec { display: flex; flex-direction: column; gap: 8px; }
.ab-ev .rec .kv { display: flex; justify-content: space-between; gap: 10px; }
/* xmap grid */
.ab-map { display: grid; grid-template-columns: 1fr 34%; gap: 3%; }
.ab-map .grid { display: grid; grid-template-columns: 14% repeat(9, 1fr); gap: 3px; align-content: start; }
.ab-map .grid .hd { height: 6px; border-radius: 2px; }
.ab-map .grid .lbl { height: 8px; border-radius: 3px; background: rgba(255,255,255,.14); margin-right: 6px; }
.ab-map .grid .cell { aspect-ratio: 1; border-radius: 3px; background: rgba(255,255,255,.07); }
.ab-map .grid .cell.on { background: rgba(255,255,255,.16); }
.ab-map .grid .cell.act { background: var(--xm-pink); }
.ab-map .side { display: flex; flex-direction: column; gap: 8px; }
.ab-map .side .num { width: 28%; height: 22px; border-radius: 4px; background: var(--xm-pink); }
/* ai */
.ab-ai { justify-content: center; }
.ab-ai .q { align-self: flex-end; width: 62%; border-radius: 12px 12px 3px 12px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.12); padding: 3%; }
.ab-ai .a { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.ab-ai .av { width: 24px; height: 24px; border-radius: 50%; background: var(--xm-pink); }
.ab-ai .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ab-ai .chips .pill { width: 22%; height: 14px; border: 1px solid rgba(255,255,255,.22); background: none; }
.ab-ai .ask { margin-top: auto; height: 28px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: space-between; padding: 0 6px 0 12px; }
.ab-ai .ask .go { width: 18px; height: 18px; border-radius: 50%; background: var(--xm-pink); }

/* ---------- Agency comparison (light surface) ---------- */
.agency { margin-top: clamp(44px, 6vw, 72px); padding-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--xm-rule); }
.cmp-row.light { border-top-color: var(--xm-rule); }
.cmp-row.light .was { opacity: .55; }
.two-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--xm-rule); }
.two-ways .label { display: block; margin-bottom: 10px; }
.two-ways p { margin: 0; font-weight: 300; font-size: 16px; line-height: 1.55; opacity: .82; max-width: 46ch; }

/* shorter pages, 18 September */
.phases.static .scene { cursor: default; }
.phases.static .scene:hover { transform: none; }
.form textarea { appearance: none; background: none; border: 0; border-bottom: 1px solid var(--xm-rule); border-radius: 0; padding: 9px 0; font: 300 16px/1.4 var(--xm-font); color: var(--xm-ink); outline: none; width: 100%; resize: vertical; min-height: 44px; }
.form textarea:focus { border-bottom-color: var(--xm-pink); }
.eyebrow .n:empty { display: none; }

/* v3, 19 September: product-page anatomy */
.sec--tight { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.buy { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 3vw, 44px); }
.buy > div { border-top: 2px solid var(--xm-pink); padding-top: 18px; }
.buy b { display: block; font-weight: 900; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 12px; }
.buy p { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.55; opacity: .8; }
.bul { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; max-width: 46ch; }
.bul li { position: relative; padding-left: 26px; font-weight: 300; font-size: 16px; line-height: 1.5; opacity: .85; }
.bul li::before { content: ""; position: absolute; left: 0; top: .72em; width: 14px; height: 2px; background: var(--xm-pink); }
.phases.static { margin-top: clamp(32px, 4vw, 56px); }
.steps-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(18px, 2.6vw, 40px); }
.stepc { border-top: 1px solid var(--xm-rule); padding-top: 16px; }
.stepc .no { display: block; font: 700 11px/1 var(--xm-font); letter-spacing: .16em; text-transform: uppercase; color: var(--xm-pink); margin-bottom: 14px; }
.stepc h3 { font-weight: 900; font-size: 22px; line-height: 1; letter-spacing: -.015em; text-transform: uppercase; margin: 0 0 10px; }
.stepc p { margin: 0; font-weight: 300; font-size: 14.5px; line-height: 1.55; opacity: .75; }
.inv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(22px, 3vw, 40px) clamp(18px, 2.6vw, 32px); }
.tile b { display: block; font-weight: 900; font-size: 19px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin: 16px 0 8px; }
.tile p { margin: 0; font-weight: 300; font-size: 14.5px; line-height: 1.55; opacity: .75; }
.tile-art { background: var(--xm-ink); border-radius: 12px; overflow: hidden; box-shadow: 0 14px 30px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06); }
.tile-art .ab { aspect-ratio: 16 / 10; }
.tile-art .ab .b { height: 6px; } .tile-art .ab .b.h { height: 9px; } .tile-art .ab .pill { height: 7px; }
.tile-art .ab-seg .track span { height: 10px; }
.tile-art .ab-ai .q, .tile-art .ab-ai .ask { transform: none; }

/* 19 September: disease areas, services, sectors, company facts */
.areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px 18px; }
.areas li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--xm-rule); font-weight: 300; font-size: 15px; line-height: 1.3; }
.areas .ico { flex: none; width: 40px; height: 40px; color: var(--xm-ink); }
.areas .ico img { width: 100%; height: 100%; display: block; }
.areas li:hover .ico { color: var(--xm-pink); }
.svc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 3vw, 44px); }
.svc > div { border-top: 2px solid var(--xm-pink); padding-top: 18px; }
.svc b { display: block; font-weight: 900; font-size: clamp(20px, 1.8vw, 26px); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 12px; }
.svc p { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.55; opacity: .8; }
.sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(20px, 3vw, 40px) var(--grid-gap); }
.sector { border-top: 1px solid var(--xm-rule); padding-top: 16px; display: flex; flex-direction: column; }
.sector p { flex: 1; }
.sector.lead { grid-column: 1 / -1; border-top: 2px solid var(--xm-pink); }
.sector b { display: block; font-weight: 900; font-size: 20px; line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 10px; }
.sector.lead b { font-size: clamp(22px, 2vw, 28px); }
.sector p { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.55; opacity: .78; max-width: 62ch; }
.sector.lead p { font-size: 16px; max-width: 80ch; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: clamp(20px, 3vw, 44px); }
.facts .label { display: block; margin-bottom: 10px; }
.facts p { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.55; opacity: .8; }

/* think, say, do */
.tsd { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); }
.tsd > div { border-top: 1px solid var(--xm-rule); padding-top: 16px; }
.tsd .k { display: block; font-weight: 900; font-size: clamp(26px, 3vw, 44px); line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: 12px; }
.tsd .sys { grid-column: 1 / -1; border-top: 2px solid var(--xm-pink); margin-top: 6px; }
.tsd .sys .k { font-size: clamp(18px, 1.6vw, 22px); color: var(--xm-pink); }
.tsd p { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.55; opacity: .8; max-width: 70ch; }
@media (max-width: 760px) { .tsd { grid-template-columns: 1fr; } }

.foot-sub { font: 700 11px/1 var(--xm-font); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.85); margin: -6px 0 18px; } /* white text, pink rule: the same as the hero kicker */
.foot-sub { display: flex; align-items: center; gap: 14px; }
.foot-sub::before { content: ""; width: 30px; height: 2px; background: var(--xm-pink); } /* the same mark as the hero kicker: the strap opens the page and closes it */

/* hero art: think, say, do, floating with parallax */
.tsd-art { min-height: clamp(300px, 34vw, 440px); }
.tsd-glow { position: absolute; inset: 10% 0 10% 10%; background: radial-gradient(closest-side, rgba(255,62,154,.22), transparent 70%); filter: blur(10px); }
.tsd-card { position: absolute; border-radius: 16px; padding: 18px 20px; backdrop-filter: blur(6px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px rgba(0,0,0,.45); display: flex; flex-direction: column; gap: 9px; will-change: transform; animation: xmBob 7s ease-in-out infinite; }
.tsd-card span { font-weight: 900; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.tsd-card i { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.18); width: 88%; }
.tsd-card.think { left: 4%; top: 6%; width: 46%; color: rgba(255,255,255,.55); animation-delay: -1s; }
.tsd-card.say { left: 30%; top: 36%; width: 44%; color: rgba(255,255,255,.8); animation-delay: -3.5s; }
.tsd-card.do { left: 52%; top: 62%; width: 44%; color: var(--xm-pink); background: rgba(255,62,154,.14); border-color: rgba(255,62,154,.45); animation-delay: -5s; }
.tsd-card.do b { display: block; height: 10px; border-radius: 5px; background: var(--xm-pink); width: 70%; }
.tsd-thread { position: absolute; left: 22%; top: 14%; width: 56%; height: 70%; border-left: 2px dashed rgba(255,255,255,.14); border-bottom: 2px dashed rgba(255,255,255,.14); border-radius: 0 0 0 40px; transform-origin: left top; }
@media (max-width: 760px) { .tsd-art { min-height: 250px; } }

sup.reg { font-size: .74em; line-height: 0; vertical-align: .4em; font-weight: inherit; margin-left: 2px; letter-spacing: 0; }
.h3 sup.reg, .display sup.reg { font-size: .5em; vertical-align: .55em; }
.tag sup.reg { font-size: .9em; vertical-align: .2em; }

/* the brain */
.brain { position: absolute; right: -9%; top: 0; width: clamp(360px, 47vw, 720px); will-change: transform; aspect-ratio: 1; z-index: 5; pointer-events: none; }
.brain canvas { width: 100%; height: 100%; display: block; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }
.brain-glow { position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,162,255,.28), rgba(255,62,154,.10) 55%, transparent 75%); filter: blur(18px); }
.brain.missing canvas, .brain.no-webgl canvas { display: none; }
.brain.missing, .brain.no-webgl { background: url("/brand/brain.png") center / contain no-repeat; filter: drop-shadow(0 40px 60px rgba(0,0,0,.55)); }
/* Side by side for as long as the opening line of the hero ("What people say is rarely what they think,",
   about 300px) fits to the left of the brain; below that, the phone layout: the brain oversized between the headline
   and the paragraph, hanging off the right edge. Larger text sizes zoom the page, so they stack proportionately sooner. */
.home-hero .hero-sub { max-width: min(560px, calc(109vw - clamp(360px, 47vw, 720px) - var(--gutter) - 16px)); }
@media (max-width: 660px) {
  .home-hero .wrap { display: flex; flex-direction: column; }
  .home-hero .hero-kicker { order: 0; }
  .home-hero h1 { order: 1; }
  .brain { order: 2; }
  .home-hero .hero-sub { order: 3; max-width: 560px; }
  .brain { --bw: min(122vw, 600px); position: relative; right: auto; top: auto; width: var(--bw); align-self: flex-end; margin: calc(-0.26 * var(--bw)) calc(-0.3 * var(--bw)) calc(-0.22 * var(--bw)) 0; }
  .home-hero h1.one-line { white-space: normal; margin-top: -14px; }
}
@media (max-width: 780px) {
  html[data-text="aa"] .home-hero .wrap { display: flex; flex-direction: column; }
  html[data-text="aa"] .home-hero .hero-kicker { order: 0; }
  html[data-text="aa"] .home-hero h1 { order: 1; }
  html[data-text="aa"] .brain { order: 2; }
  html[data-text="aa"] .home-hero .hero-sub { order: 3; max-width: 560px; }
  html[data-text="aa"] .brain { --bw: min(122vw, 600px); position: relative; right: auto; top: auto; width: var(--bw); align-self: flex-end; margin: calc(-0.26 * var(--bw)) calc(-0.3 * var(--bw)) calc(-0.22 * var(--bw)) 0; }
  html[data-text="aa"] .home-hero h1.one-line { white-space: normal; margin-top: -14px; }
}
@media (max-width: 925px) {
  html[data-text="aaa"] .home-hero .wrap { display: flex; flex-direction: column; }
  html[data-text="aaa"] .home-hero .hero-kicker { order: 0; }
  html[data-text="aaa"] .home-hero h1 { order: 1; }
  html[data-text="aaa"] .brain { order: 2; }
  html[data-text="aaa"] .home-hero .hero-sub { order: 3; max-width: 560px; }
  html[data-text="aaa"] .brain { --bw: min(122vw, 600px); position: relative; right: auto; top: auto; width: var(--bw); align-self: flex-end; margin: calc(-0.26 * var(--bw)) calc(-0.3 * var(--bw)) calc(-0.22 * var(--bw)) 0; }
  html[data-text="aaa"] .home-hero h1.one-line { white-space: normal; margin-top: -14px; }
}

.tools { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: clamp(28px, 4vw, 48px); padding-top: 24px; border-top: 1px solid var(--xm-rule-rev); }
.tools p { margin: 0; font-weight: 300; font-size: 15px; line-height: 1.55; opacity: .8; max-width: 72ch; }
.tools p b { font-weight: 700; opacity: 1; }

sup.ref { font-size: .6em; line-height: 0; vertical-align: super; margin-left: 2px; }
sup.ref a { color: var(--xm-pink); text-decoration: none; font-weight: 700; }
.refs { margin: clamp(26px, 3vw, 40px) 0 0; padding-top: 16px; border-top: 1px solid var(--xm-rule); }
.refs summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 10px; font: 700 11px/1 var(--xm-font); letter-spacing: .18em; text-transform: uppercase; color: var(--xm-pink); }
.refs summary::-webkit-details-marker { display: none; }
.refs summary::after { content: "+"; font-size: 14px; line-height: 1; }
.refs[open] summary::after { content: "−"; }
.refs ol { margin: 16px 0 0; padding-left: 1.4em; font-weight: 300; font-size: 12.5px; line-height: 1.6; opacity: .7; columns: 2; column-gap: 40px; }
.refs li { break-inside: avoid; margin-bottom: 8px; padding-right: 8px; }
.refs a { color: inherit; text-decoration: underline; text-decoration-color: rgba(35,31,32,.25); text-underline-offset: 2px; }
.refs a:hover { color: var(--xm-pink); text-decoration-color: var(--xm-pink); }
@media (max-width: 760px) { .refs ol { columns: 1; } }


/* ============================================================
   Accessibility panel (a11y.js) — settings live as attributes on <html>
   ============================================================ */
/* Dark appearance: chosen, or Auto with a dark system */
html[data-dark] { color-scheme: dark; --xm-white: rgb(22,20,21); --xm-paper: rgb(30,27,28); --xm-text: rgb(240,238,236); --xm-rule: rgba(255,255,255,.14); }
html[data-dark] .form input, html[data-dark] .form textarea { color: var(--xm-text); caret-color: var(--xm-pink); } /* typed text stays readable in dark mode */
html[data-dark] .form input:-webkit-autofill { -webkit-text-fill-color: var(--xm-text); box-shadow: 0 0 0 40px var(--xm-paper) inset; }
html[data-dark] .sec--paper { border-color: var(--xm-rule); }
html[data-dark] .refs a { text-decoration-color: rgba(255,255,255,.3); }
html[data-dark] .tsd .k, html[data-dark] .sector b, html[data-dark] .h3 { color: inherit; }
/* Text size: the whole page scales, like browser zoom, so layouts hold */
html[data-text="aa"] body { zoom: 1.18; }
html[data-text="aaa"] body { zoom: 1.4; }
@supports not (zoom: 1) { html[data-text="aa"] { font-size: 118%; } html[data-text="aaa"] { font-size: 140%; } }
/* --z is that zoom. Fixed panels divide their screen-edge limits by it, so a larger text size scales their
   contents but never pushes them past the edge of the screen. */
html { --z: 1; }
@supports (zoom: 1) { html[data-text="aa"] { --z: 1.18; } html[data-text="aaa"] { --z: 1.4; } }
/* OpenDyslexic: heavier letters, weighted bottoms; headings keep their case but drop to the weights the face has */
/* Every element, the accessibility panel included: many set their own font, so a list of selectors always misses some */
html[data-dyslexic] body, html[data-dyslexic] body * { font-family: "OpenDyslexic", var(--xm-font) !important; }
html[data-dyslexic] body { letter-spacing: .01em; word-spacing: .06em; line-height: 1.7; }
html[data-dyslexic] .display { letter-spacing: 0; font-weight: 700; }
/* High contrast: chosen, or the system asks for more contrast */
html[data-contrast] { --xm-pink: rgb(196,0,106); --xm-pink-dark: rgb(140,0,76); --xm-text: #000; --xm-rule: rgba(0,0,0,.45); --xm-rule-rev: rgba(255,255,255,.5); }
html[data-contrast][data-dark] { --xm-pink: rgb(255,140,200); --xm-pink-dark: rgb(255,180,220); --xm-text: #fff; --xm-white: #000; --xm-paper: #000; --xm-rule: rgba(255,255,255,.5); }
html[data-contrast] .lede, html[data-contrast] .body, html[data-contrast] .sector p, html[data-contrast] .tsd p, html[data-contrast] .product p, html[data-contrast] .how p, html[data-contrast] .tools p,
html[data-contrast] .refs ol, html[data-contrast] .foot-cols .col a, html[data-contrast] .foot-cols .col span, html[data-contrast] .foot-cols .label, html[data-contrast] .hero-sub p { opacity: 1 !important; }
html[data-contrast] a:not(.btn):not(.home-logo) { text-decoration: underline; text-underline-offset: 2px; }
html[data-contrast] :focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
html[data-contrast] .btn--ghost { border-width: 2px; }
/* Red-green colour support: the brand pink becomes amber, which stays distinct from the blues, and links are underlined */
html[data-cvd] { --xm-pink: rgb(224,120,0); --xm-pink-dark: rgb(170,90,0); }
html[data-cvd][data-dark] { --xm-pink: rgb(255,170,60); --xm-pink-dark: rgb(255,200,120); }
html[data-cvd] a:not(.btn):not(.home-logo) { text-decoration: underline; text-underline-offset: 2px; }
/* Reduced animation: chosen, or the system asks for it */
html[data-reduce] *, html[data-reduce] *::before, html[data-reduce] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html[data-reduce] { scroll-behavior: auto; }
html[data-reduce] .brain { transform: none !important; }
html[data-reduce] .hero-glow, html[data-reduce] .brain-glow, html[data-reduce] .hero-rays { animation: none !important; }
/* The control itself */
.a11y-skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--xm-pink); color: #fff; font: 700 13px/1 var(--xm-font); letter-spacing: .12em; text-transform: uppercase; padding: 12px 16px; border-radius: 4px; transition: top .15s; }
.a11y-skip:focus { top: 12px; outline: 3px solid #fff; }
.nav .wrap { position: relative; }
.a11y-btn { order: 99; margin-left: -14px; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; padding: 0; background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); border-radius: 50%; cursor: pointer; opacity: .85; }
.a11y-btn:hover, .a11y-btn[aria-expanded="true"] { opacity: 1; border-color: var(--xm-pink); color: var(--xm-pink); }
@media (max-width: 720px) { .a11y-btn { margin-left: -16px; } }
/* Larger text sizes zoom the page but not the screen, so the menu bar runs out of room sooner. Keep everything,
   the Accessibility button included, on one row: fold the menu links away earlier, shorten the button to its
   icon earlier, and tighten the bar on phones. */
@media (max-width: 1180px) { html[data-text="aa"] .nav-links { display: none; } }
@media (max-width: 1400px) { html[data-text="aaa"] .nav-links { display: none; } }
@media (max-width: 860px) { html[data-text="aa"] .a11y-btn { margin-left: -16px; } }
@media (max-width: 1010px) { html[data-text="aaa"] .a11y-btn { margin-left: -16px; } }
@media (max-width: 600px) {
  html[data-text="aa"] .nav .wrap, html[data-text="aaa"] .nav .wrap { flex-wrap: nowrap; column-gap: 10px; padding-left: 12px; padding-right: 12px; }
  html[data-text="aa"] .nav .btn, html[data-text="aaa"] .nav .btn { padding-left: 13px; padding-right: 13px; }
  html[data-text="aa"] .a11y-btn, html[data-text="aaa"] .a11y-btn { margin-left: 0; }
  html[data-text="aaa"] .nav .home-logo { height: 28px; }
  html[data-text="aaa"] main h1.display { font-size: 30px !important; }
}
.a11y-panel { position: fixed; top: 64px; right: calc(12px / var(--z)); z-index: 300; width: min(360px, calc((100vw - 24px) / var(--z))); max-height: calc((100vh - 12px) / var(--z) - 64px); max-height: calc((100dvh - 12px) / var(--z) - 64px); overflow: auto; overscroll-behavior: contain; background: var(--xm-ink); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.45); padding: 18px 20px 16px; font-family: var(--xm-font); }
.a11y-panel[hidden] { display: none; }
.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.a11y-head h2 { margin: 0; font: 900 16px/1 var(--xm-font); letter-spacing: .02em; text-transform: uppercase; }
.a11y-close { background: transparent; border: 0; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 2px 6px; opacity: .7; }
.a11y-close:hover { opacity: 1; color: var(--xm-pink); }
.a11y-note { margin: 10px 0 6px; font-weight: 300; font-size: 13px; line-height: 1.5; opacity: .7; }
.a11y-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); }
.a11y-label { flex: 1 1 100px; min-width: 0; display: flex; flex-direction: column; gap: 3px; font: 700 13px/1.3 var(--xm-font); }
.a11y-label small { font-weight: 300; font-size: 12px; line-height: 1.4; opacity: .6; }
.a11y-seg { display: inline-flex; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; flex-shrink: 0; }
.a11y-opt { background: transparent; color: #fff; border: 0; border-left: 1px solid rgba(255,255,255,.14); padding: 7px 12px; font: 700 12px/1 var(--xm-font); cursor: pointer; min-width: 44px; }
.a11y-opt:first-child { border-left: 0; }
@media (max-width: 420px) { .a11y-opt { padding-left: 8px; padding-right: 8px; } } /* narrow phones at large text: keep the three-way choices inside the panel */
.a11y-opt[aria-checked="true"] { background: var(--xm-pink); color: #fff; }
.a11y-opt--text-aa { font-size: 14px; } .a11y-opt--text-aaa { font-size: 16px; }
.a11y-toggle { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: 0; color: #fff; cursor: pointer; padding: 4px 0; font: 700 12px/1 var(--xm-font); flex-shrink: 0; }
.a11y-knob { position: relative; width: 40px; height: 22px; border-radius: 999px; background: rgba(255,255,255,.22); transition: background .15s; }
.a11y-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.a11y-toggle[aria-checked="true"] .a11y-knob { background: var(--xm-pink); }
.a11y-toggle[aria-checked="true"] .a11y-knob::after { left: 21px; }
.a11y-state { min-width: 24px; text-align: left; opacity: .8; }
.a11y-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); font: 300 13px/1.3 var(--xm-font); }
.a11y-reset { background: transparent; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; color: #fff; padding: 7px 12px; font: 700 11px/1 var(--xm-font); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.a11y-reset:hover { border-color: var(--xm-pink); color: var(--xm-pink); }
.a11y-foot a { color: var(--xm-pink); }
.a11y-panel :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Contact form on the home page */
.contact-form { margin-top: 18px; gap: 20px 20px; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form .hp { position: absolute; left: -9999px; }
.form-note { grid-column: 1 / -1; margin: 0; font-weight: 300; font-size: 13px; line-height: 1.5; opacity: .65; }
.form-note a { text-decoration: underline; }
.aside .form-done { border-top: 0; padding-top: 0; }
.aside .form-done h3 { font-size: 28px; }

/* Where we work: a way in for each sector, a button that sits at the foot of every column */
.sector-cta { margin-top: 20px; align-self: flex-start; padding: 11px 18px; font-size: 11px; color: var(--xm-ink); border-color: var(--xm-ink); background: transparent; transition: background .15s, color .15s, border-color .15s, transform .12s; }
.sector-cta:hover, .sector-cta:focus-visible { background: var(--xm-pink); border-color: var(--xm-pink); color: #fff; }
.sector-cta:active { transform: scale(.97); }
html[data-dark] .sector-cta { color: var(--xm-text); border-color: var(--xm-text); }
html[data-dark] .sector-cta:hover { color: #fff; }
/* Policy-page footers: links at full strength, nothing pink that is not a link */
.foot-legal { display: block; margin-top: 6px; }
.foot-legal a { color: var(--xm-pink); text-decoration: underline; text-decoration-color: rgba(255,62,154,.45); text-underline-offset: 3px; }
.foot-legal a:hover { color: #fff; text-decoration-color: #fff; }


/* How we know: the second view on trial (TILES · LINE beside the eyebrow switches) */
.view-switch { display: inline-flex; align-items: center; gap: 7px; margin-left: 14px; color: var(--xm-text); opacity: .45; font: 700 11px/1 var(--xm-font); letter-spacing: .16em; text-transform: uppercase; }
.view-switch:hover, .view-switch:focus-within { opacity: .9; }
.view-opt { background: transparent; border: 0; padding: 2px 0; margin: 0; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; border-bottom: 1.5px solid transparent; }
.view-opt[aria-pressed="true"] { color: var(--xm-pink); border-bottom-color: var(--xm-pink); }
.view-opt:hover { color: var(--xm-pink); }
.tsd-line { margin-top: clamp(28px, 4vw, 48px); }
.gapviz { background: var(--xm-ink); color: #fff; border-radius: 16px; padding: clamp(28px, 4vw, 56px) clamp(22px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.gv-head { margin-bottom: clamp(28px, 4vw, 48px); }
.gv-lead { margin: 0 0 10px; font: 700 13px/1 var(--xm-font); letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.gv-big { margin: 0; font-weight: 900; font-size: clamp(30px, 4.2vw, 58px); line-height: .98; letter-spacing: -.02em; text-transform: uppercase; }
.gv-big .ln { display: block; }
.gv-big .n { color: #fff; }
.gv-big em { font-style: normal; }
.gv-big .w-think { color: var(--xm-life); } .gv-big .w-say { color: var(--xm-diagnose); } .gv-big .w-do { color: var(--xm-end); }
.gv-key { margin: 16px 0 0; font: 700 11px/1 var(--xm-font); letter-spacing: .18em; text-transform: uppercase; opacity: .6; }
.gv-q { display: block; margin: -6px 0 8px; font-weight: 900; font-size: 15px; line-height: 1.2; letter-spacing: -.01em; text-transform: uppercase; color: var(--xm-pink); }
.gv-count { display: block; margin: -6px 0 12px; font-weight: 900; font-size: 20px; line-height: 1; letter-spacing: -.01em; }
.gv-count i { font-style: normal; font-weight: 400; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-left: 4px; }
.gv-big sup.ref a { color: var(--xm-end); }
.gv-cols { display: grid; grid-template-columns: 1.25fr .85fr 1.25fr .85fr 1.25fr; gap: clamp(16px, 2.4vw, 36px); align-items: start; }
.gv-col .k { display: block; font-weight: 900; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 16px; }
.gv-think .k { color: var(--xm-life); } .gv-say .k { color: var(--xm-diagnose); } .gv-do .k { color: var(--xm-end); }
.gv-think { --c: var(--xm-life); } .gv-say { --c: var(--xm-diagnose); } .gv-do { --c: var(--xm-end); }
.pict { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; width: 100%; max-width: 240px; margin-bottom: 18px; }
.pict span { display: block; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.09); transform: scale(.55); transition: background .5s, transform .5s cubic-bezier(.2,.8,.2,1), border-color .5s; }
.pict span.h { background: transparent; border: 1.5px solid rgba(255,255,255,.22); transform: scale(.9); }
.go .pict span.l { background: var(--c); transform: scale(1); }
.go .pict span.h { border-color: rgba(0,162,255,.55); }
.gv-col p, .gv-gap p, .gv-sys p { margin: 0; font-weight: 300; font-size: 14.5px; line-height: 1.55; opacity: .8; }
.gv-gap { padding-top: clamp(30px, 3.6vw, 48px); border-left: 1px dashed rgba(255,255,255,.18); padding-left: clamp(12px, 1.6vw, 22px); }
.gv-gap .gk { display: block; font: 700 11px/1 var(--xm-font); letter-spacing: .18em; text-transform: uppercase; color: var(--xm-pink); margin-bottom: 10px; }
.gv-gap p { font-weight: 400; opacity: .92; }
.gv-gap .gn { display: block; font-weight: 900; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; letter-spacing: -.03em; color: var(--xm-pink); margin-bottom: 8px; }
.gv-gap p::first-line { font-weight: 700; }
.gv-sys { margin-top: clamp(28px, 4vw, 48px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: 1.25fr 2fr; gap: clamp(16px, 2.4vw, 36px); }
.gv-sys .k { display: block; font-weight: 900; font-size: clamp(18px, 1.7vw, 22px); line-height: 1.1; letter-spacing: -.01em; text-transform: uppercase; color: var(--xm-pink); }
.gv-sys p { max-width: 60ch; }
.gapviz sup.ref a { color: var(--xm-pink); }
@media (max-width: 860px) {
  .gv-cols { grid-template-columns: 1fr; gap: 26px; }
  .gv-gap { padding-top: 0; border-left: 0; padding-left: 0; border-top: 1px dashed rgba(255,255,255,.18); padding-top: 16px; }
  .pict { max-width: 200px; }
  .gv-sys { grid-template-columns: 1fr; gap: 12px; }
}


/* Client logo strip: marks supplied by Matt on 25 September, shown in one tone */
.logos { margin: 8px 0 clamp(32px, 4vw, 56px); overflow: hidden; }
.logos-k { font: 700 12px/1 var(--xm-font); letter-spacing: .18em; text-transform: uppercase; color: #7a7a86; margin: 0 0 18px; }
.logos-track { display: flex; width: max-content; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); animation: logos-scroll 36s linear infinite; }
.logos:hover .logos-track, .logos:focus-within .logos-track { animation-play-state: paused; }
.logos-set { display: flex; align-items: center; gap: clamp(40px, 6vw, 96px); padding-right: clamp(40px, 6vw, 96px); flex: none; }
/* scoped to the strip: the nav logo on both pages also uses the class "logo" */
.logos .logo { display: inline-flex; align-items: center; height: 56px; color: #8a8a96; transition: color .25s; }
.logos .logo:hover { color: var(--xm-ink); }
html[data-dark] .logos .logo { color: #8f8f9c; }
html[data-dark] .logos .logo:hover { color: #fff; }
/* each logo file is a white mark on transparent; used as a mask so its colour follows the page */
.lg { display: block; height: var(--h); width: calc(var(--h) * var(--ar)); background: currentColor; -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; }
.lg-allianz { --img: url("/brand/clients/allianz.png"); --ar: 3.792; --h: 26px; }
.lg-avios { --img: url("/brand/clients/avios.png"); --ar: 3.830; --h: 26px; }
.lg-bandq { --img: url("/brand/clients/bandq.png"); --ar: 2.288; --h: 27px; }
.lg-telefonica { --img: url("/brand/clients/telefonica.png"); --ar: 4.068; --h: 26px; }
.lg-nhs-sbs { --img: url("/brand/clients/nhs-sbs.png"); --ar: 3.913; --h: 36px; }
.lg-joyall { --img: url("/brand/clients/joyall.png"); --ar: 1.520; --h: 36px; }
.lg-jpmorgan { --img: url("/brand/clients/jpmorgan.png"); --ar: 4.905; --h: 24px; }
.lg-priority { --img: url("/brand/clients/priority.png"); --ar: 2.264; --h: 32px; }
.lg-screwfix { --img: url("/brand/clients/screwfix.png"); --ar: 4.196; --h: 26px; }
.lg-orange { --img: url("/brand/clients/orange.png"); --ar: 1.000; --h: 40px; }
.lg-edge4health { --img: url("/brand/clients/edge4health.png"); --ar: 6.400; --h: 24px; }
.lg-skandia { --img: url("/brand/clients/skandia.png"); --ar: 5.571; --h: 23px; }
.lg-catapult { --img: url("/brand/clients/catapult.png"); --ar: 2.528; --h: 34px; }
.lg-provident { --img: url("/brand/clients/provident.png"); --ar: 4.520; --h: 25px; }
.lg-o2 { --img: url("/brand/clients/o2.png"); --ar: 1.011; --h: 38px; }
@keyframes logos-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .logos-track { animation: none; width: auto; flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; } .logos-set[aria-hidden] { display: none; } .logos-set { flex: 1 1 100%; flex-wrap: wrap; gap: 18px 40px; padding-right: 0; } }
html[data-reduce] .logos-track { animation: none; width: auto; flex-wrap: wrap; -webkit-mask-image: none; mask-image: none; }
html[data-reduce] .logos-set[aria-hidden] { display: none; }
html[data-reduce] .logos-set { flex: 1 1 100%; flex-wrap: wrap; gap: 18px 40px; padding-right: 0; }

/* Phones: let display headings wrap on their own, balanced, instead of the desktop line breaks */
@media (max-width: 560px) {
  h2.display br { display: none; }
  h2.display { text-wrap: balance; }
}
.nowrap { white-space: nowrap; }


/* Brain easter egg: a grab hand over the brain itself, a closed hand while turning it */
html.brain-hover { cursor: grab; }
html.brain-grabbing, html.brain-grabbing * { cursor: grabbing !important; user-select: none; -webkit-user-select: none; }