/* =====================================================================
   Round four, third pass (30 September 2026): liveliness, from the two libraries the client supplied
   (SmoothUI and Amicro, both MIT), rebuilt in plain CSS and JS:
   - hover-expand (SmoothUI): the six problems as expanding panels, one screen tall
   - scrubber + animated-stepper (SmoothUI), CardTimeMachine (Amicro): the road to 2030 as a scrubbable timeline
   - basic-accordion (SmoothUI): the FAQ, plus turning to minus, height animated
   - mask-reveal-up, svg-draw-on-scroll, scroll-progress, infinite-slider, tilt-card, shimmer-sweep (SmoothUI);
     spotlight, pulse-dot (Amicro): the motion shared by every page
   Everything stops under prefers-reduced-motion.
   ===================================================================== */

/* ---------------------------------------------------------------- the six problems: expanding panels */
.m .xp-band { background: #FBFBFD; padding-top: 128px; }
.m .xp-band .band-head { margin-bottom: 44px; }
.m .xp { display: flex; gap: 10px; height: 620px; }
.m .xp-panel { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; border-radius: 24px; background: #2A2D33; isolation: isolate;
  transition: flex-grow .7s var(--ease); box-shadow: 0 1px 2px rgba(0, 20, 50, .05), 0 30px 60px -36px rgba(0, 20, 50, .45); }
.m .xp-panel.is-on { flex-grow: 6.2; }
.m .xp-panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12);
  transition: transform 1.4s var(--ease); }
.m .xp-panel.is-on > img { transform: none; }
.m .xp-panel .ai-tag { top: 16px; right: 16px; bottom: auto; opacity: 0; transition: opacity .3s; }
.m .xp-panel.is-on .ai-tag { opacity: 1; transition-delay: .35s; }
.m .xp-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(12, 14, 18, .42), rgba(12, 14, 18, .04) 38%, rgba(12, 14, 18, .74));
  transition: background-color .4s; }
.m .xp-panel:not(.is-on) .xp-shade { background: linear-gradient(180deg, rgba(12, 14, 18, .08), rgba(12, 14, 18, .58)); }
.m .xp-trigger { all: unset; box-sizing: border-box; position: absolute; inset: 0; z-index: 2; cursor: pointer; display: flex; flex-direction: column;
  justify-content: space-between; align-items: center; padding: 22px 0; border-radius: inherit; }
.m .xp-panel.is-on .xp-trigger { inset: 0 auto auto 0; padding: 22px 24px; flex-direction: row; gap: 12px; align-items: center; cursor: default; }
.m .xp-trigger:focus-visible { outline: 2px solid #8CC4F8; outline-offset: -4px; }
.m .xp-field { writing-mode: vertical-rl; transform: rotate(180deg); font: 600 19px/1 var(--f-display); letter-spacing: .01em; color: #fff; white-space: nowrap; }
.m .xp-panel.is-on .xp-field { writing-mode: horizontal-tb; transform: none; font: 500 12px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: #DCE7F6; }
.m .xp-abbr { padding: 7px 9px; border-radius: 8px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .22);
  font: 600 11px/1 var(--f-mono); letter-spacing: .05em; color: #fff; }
.m .xp-panel.is-on .xp-abbr { order: -1; background: #fff; color: #001F47; border-color: #fff; }
.m .xp-content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; padding: 76px 30px 28px;
  pointer-events: none; }
.m .xp-panel.is-on .xp-content { pointer-events: auto; }
.m .xp-content > * { opacity: 0; transform: translateY(18px); transition: opacity .3s ease, transform .6s var(--ease); }
.m .xp-panel.is-on .xp-content > * { opacity: 1; transform: none; }
.m .xp-panel.is-on .xp-stat { transition-delay: .28s; }
.m .xp-panel.is-on .xp-card { transition-delay: .4s; }
.m .xp-content { min-width: 560px; }
.m .xp-big { display: block; font: 600 88px/.92 var(--f-display); letter-spacing: -0.03em; color: #fff; }
.m .xp-fact { display: block; max-width: 26em; margin-top: 10px; font-size: 16px; line-height: 1.45; color: #DCE7F6; }
.m .xp-line { display: block; max-width: 20em; font: 500 26px/1.2 var(--f-display); color: #fff; }
.m .xp-stat .cs-src { margin-top: 10px; }
.m .xp-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; padding: 22px 24px; border-radius: 18px;
  background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 24px 50px -24px rgba(0, 10, 30, .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.m .xp-k { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 500 11px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: #62728A; }
.m .xp-k::before { content: ''; width: 8px; height: 8px; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.m .xp-step--do .xp-k { color: #003B7A; }
.m .xp-step--do .xp-k::before { background: #003B7A; }
.m .xp-step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.m .xp-step .xp-problem { font: 500 17px/1.35 var(--f-display); }
.m .xp-tool { grid-column: 1 / -1; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px;
  border-radius: 12px; background: #F2F6FB; text-decoration: none; color: var(--ink); transition: background-color .18s; }
.m .xp-tool:hover { background: #E4EDF8; }
.m .xp-ico { width: 30px; height: 30px; color: #006CC0; }
.m .xp-tool strong { display: block; font: 600 15px/1.2 var(--f-display); }
.m .xp-tool span span { display: block; margin-top: 3px; font-size: 12.5px; color: #62728A; }
.m .xp-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #001F47; color: #fff; transition: transform .2s var(--ease); }
.m .xp-tool:hover .xp-go { transform: translateX(3px); }
.m .xp-prog { position: absolute; left: 30px; right: 30px; bottom: 12px; z-index: 4; height: 2px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, .18); opacity: 0; }
.m .xp-prog i { display: block; height: 100%; background: #8CC4F8; transform-origin: 0 50%; transform: scaleX(0); }
.m .xp.auto .xp-panel.is-on .xp-prog { opacity: 1; }
.m .xp.auto .xp-panel.is-on .xp-prog i { animation: tt-fill 9s linear both; }
.m .xp.is-paused .xp-prog i, .m .xp.is-offscreen .xp-prog i { animation-play-state: paused !important; }
.m .xp-panel:not(.is-on):hover > img { transform: scale(1.06); }

@media (max-width: 1100px) {
  .r2.m .xp-card { grid-template-columns: minmax(0, 1fr); }
  .r2.m .xp-content { min-width: 460px; }
}
@media (max-width: 900px) {
  .r2.m .xp { flex-direction: column; height: auto; gap: 8px; }
  .r2.m .xp-panel { flex: none; height: 76px; transition: height .6s var(--ease); }
  .r2.m .xp-panel.is-on { height: 640px; }
  .r2.m .xp-trigger { flex-direction: row; justify-content: space-between; padding: 0 20px; }
  .r2.m .xp-panel.is-on .xp-trigger { inset: 0 0 auto 0; height: 64px; padding: 0 20px; justify-content: flex-start; }
  .r2.m .xp-field { writing-mode: horizontal-tb; transform: none; font-size: 18px; }
  .r2.m .xp-content { min-width: 0; padding: 70px 18px 18px; }
  .r2.m .xp-big { font-size: 60px; }
  .r2.m .xp-fact { font-size: 14.5px; }
  .r2.m .xp-card { padding: 18px; gap: 12px; }
  .r2.m .xp-step .xp-problem { font-size: 16px; }
  .r2.m .xp-step p { font-size: 14px; }
}

/* ---------------------------------------------------------------- the road to 2030: a scrubbable timeline */
.m .tl { position: relative; margin-top: 8px; }
.m .tl-stage { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: stretch; margin-bottom: 40px; }
.m .tl-card { position: relative; min-height: 250px; border-radius: 26px; background: #001F47; color: #fff; overflow: hidden; isolation: isolate;
  box-shadow: 0 40px 80px -40px rgba(0, 20, 50, .5); }
.m .tl-card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background: radial-gradient(600px 300px at 100% 0%, rgba(0, 108, 192, .55), transparent 70%); }
.m .tl-slide { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 40px; align-content: center; padding: 36px 44px;
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .35s ease, transform .55s var(--ease), visibility 0s linear .35s; }
.m .tl-slide.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .05s, transform .55s var(--ease) .05s; }
.m .tl-date { grid-row: span 3; align-self: center; font: 600 64px/.95 var(--f-display); letter-spacing: -0.03em; color: #fff; white-space: nowrap; }
.m .tl-date small { display: block; margin-top: 10px; font: 500 12px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: #8FB0D8; }
.m .tl-phase { justify-self: start; padding: 7px 11px; border-radius: 99px; font: 600 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.m .tl-phase--past { background: rgba(255, 255, 255, .1); color: #C9D6E6; }
.m .tl-phase--now { background: #fff; color: #001F47; }
.m .tl-phase--next { background: rgba(232, 177, 88, .18); color: #F2C888; }
.m .tl-phase--expected { background: rgba(255, 255, 255, .1); color: #C9D6E6; border: 1px dashed rgba(255, 255, 255, .35); }
.m .tl-phase--target { background: rgba(111, 211, 162, .16); color: #8FE0B6; }
.m .tl-text { margin: 0; font: 500 23px/1.35 var(--f-display); color: #fff; text-wrap: pretty; }
.m .tl-link { justify-self: start; color: #8CC4F8; }
.m .tl-side { display: grid; gap: 12px; }
.m .tl-count { padding: 24px 26px; border-radius: 22px; background: #fff; border: 1px solid #E0E7F0; }
.m .tl-count .num { display: block; font: 600 54px/1 var(--f-display); letter-spacing: -0.02em; color: #8A5A0B; }
.m .tl-count p { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.m .tl-count .tl-ck { display: block; margin-bottom: 10px; font: 500 11px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.m .tl-legend { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 22px; border-radius: 22px; background: #fff; border: 1px solid #E0E7F0; }
.m .tl-legend span { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--f-body); color: var(--body); }
.m .tl-legend i { width: 10px; height: 10px; border-radius: 50%; }
.m .tl-track { position: relative; padding: 40px 0 16px; touch-action: pan-y; }
.m .tl-line { position: absolute; left: 0; right: 0; top: 57px; height: 2px; background: #DDE4EE; border-radius: 2px; }
.m .tl-line i { position: absolute; inset: 0; background: linear-gradient(90deg, #003B7A, #006CC0); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.4s var(--ease); }
.m .tl.in .tl-line i { transform: scaleX(1); }
.m .tl-stops { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.m .tl-stop { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; cursor: pointer; padding: 6px 2px;
  text-align: center; }
.m .tl-dot { position: relative; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--c, #8A96A8); box-sizing: border-box;
  transition: transform .3s var(--ease), background-color .2s; }
.m .tl-stop:hover .tl-dot { transform: scale(1.25); }
.m .tl-stop.is-on .tl-dot { background: var(--c); transform: scale(1.45); box-shadow: 0 0 0 6px rgba(0, 59, 122, .12); }
.m .tl-lab { font: 500 11.5px/1.2 var(--f-mono); letter-spacing: .03em; color: var(--muted); transition: color .2s; }
.m .tl-stop.is-on .tl-lab { color: var(--ink); font-weight: 600; }
.m .tl-stop:focus-visible { outline: 2px solid #006CC0; outline-offset: 4px; border-radius: 8px; }
.m .tl-yr { position: absolute; top: -34px; left: 50%; transform: translateX(-50%); font: 600 13px/1 var(--f-display); color: var(--ink); }
.m .tl-today { position: absolute; top: 30px; bottom: 30px; width: 2px; background: #8A5A0B; transform: translateX(-1px); pointer-events: none; }
.m .tl-today span { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px); white-space: nowrap; padding: 5px 8px; border-radius: 99px;
  background: #8A5A0B; color: #fff; font: 600 10.5px/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.m .tl-today::after { content: ''; position: absolute; left: 50%; top: 24px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #8A5A0B; }
.js-motion .tl-today::before { content: ''; position: absolute; left: 50%; top: 24px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #8A5A0B;
  animation: ping 1.8s ease-out infinite; }
.m .tl-ctl { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.m .tl-ctl .t-count { margin-right: auto; }
@media (max-width: 900px) {
  .r2.m .tl-stage { grid-template-columns: minmax(0, 1fr); }
  .r2.m .tl-side { grid-template-columns: 1fr 1fr; }
  .r2.m .tl-slide { grid-template-columns: minmax(0, 1fr); padding: 28px; align-content: start; }
  .r2.m .tl-date { grid-row: auto; font-size: 44px; }
  .r2.m .tl-card { min-height: 330px; }
  .r2.m .tl-text { font-size: 19px; }
  .r2.m .tl-track { overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .r2.m .tl-track::-webkit-scrollbar { display: none; }
  .r2.m .tl-stops, .r2.m .tl-line { min-width: 760px; }
  .r2.m .tl-line { right: auto; width: 760px; }
}
@media (max-width: 600px) { .r2.m .tl-side { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- FAQ: plus turns to minus, the answer opens smoothly */
.m .qa .pm { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #C9D6E6; background: none;
  transition: background-color .25s, border-color .25s, transform .4s var(--ease); }
.m .qa .pm::before, .m .qa .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px;
  background: var(--ink); transition: transform .35s var(--ease), background-color .25s, opacity .25s; }
.m .qa .pm::after { transform: rotate(90deg); }
.m .qa[open] .pm { background: #001F47; border-color: #001F47; transform: rotate(180deg); }
.m .qa[open] .pm::before, .m .qa[open] .pm::after { background: #fff; }
.m .qa[open] .pm::after { transform: rotate(0deg); opacity: 0; }
.m .qa summary:hover .pm { border-color: #001F47; }
.m .qa .qa-a { overflow: hidden; }
.m .qa .qa-a > p { margin-top: 0; }
.m .qa { transition: background-color .25s; }

/* ---------------------------------------------------------------- shared motion */
/* a thin reading-progress line under the header (SmoothUI scroll-progress), driven by the scroll itself */
.scroll-prog { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #006CC0, #8CC4F8); }
@supports (animation-timeline: scroll()) {
  .js-motion .scroll-prog { animation: sp linear both; animation-timeline: scroll(root); }
  @keyframes sp { to { transform: scaleX(1); } }
}
/* headings rise word by word from behind a mask (SmoothUI mask-reveal-up) */
.js-motion .mr .mw { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.js-motion .mr .mw > span { display: inline-block; transform: translateY(105%); transition: transform .8s var(--ease); transition-delay: calc(var(--w) * 45ms); }
.js-motion .mr.in .mw > span { transform: none; }
/* line icons draw themselves once in view (SmoothUI svg-draw-on-scroll) */
.js-motion .draw path, .js-motion .draw rect, .js-motion .draw circle { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease) .15s; }
.js-motion .draw.in path, .js-motion .draw.in rect, .js-motion .draw.in circle { stroke-dashoffset: 0; }
/* a light that follows the pointer across dark bands and heroes (Amicro spotlight) */
.m .band--deep { position: relative; isolation: isolate; }
.m .band--deep > .wrap { position: relative; z-index: 1; }
.m .spot-light { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(520px circle at var(--sx, 50%) var(--sy, 50%), rgba(140, 196, 248, .14), transparent 60%); }
.m .spot.lit .spot-light { opacity: 1; }
/* primary buttons: a sheen crosses on hover (SmoothUI shimmer-sweep) */
.m .btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.m .btn-primary::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: translateX(0) skewX(-18deg); opacity: 0; }
.m .btn-primary:hover::after { opacity: 1; transform: translateX(420%) skewX(-18deg); transition: transform .8s var(--ease), opacity .1s; }
/* cards lean towards the pointer (SmoothUI tilt-card) */
.m [data-tilt] { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); will-change: transform; }
.m [data-tilt].tilting { transition: transform .08s linear; }
/* the standards the work follows, running as a band (SmoothUI infinite-slider) */
.m .marquee { position: relative; overflow: hidden; padding: 22px 0; border-block: 1px solid #E3E8EF; background: #fff;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.m .mq-track { display: flex; gap: 44px; width: max-content; }
.js-motion .mq-track { animation: mq 48s linear infinite; }
.m .marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.m .mq-item { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; font: 500 14px/1 var(--f-mono); letter-spacing: .03em; color: var(--body); }
.m .mq-item b { font-weight: 600; color: var(--ink); }
.m .mq-item::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #006CC0; }
.m .mq-k { position: absolute; left: 0; top: 0; }
/* team photos: colour and a lift on hover */
.m .member img { filter: grayscale(.35); transition: filter .4s, transform .6s var(--ease); }
.m .member:hover img { filter: none; transform: translateY(-4px); }
/* page heroes: the monogram dot ground drifts slowly behind every page title */
.m .page-hero .ph-ground { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.m .page-hero .ph-ground::before { content: ''; position: absolute; inset: -20%; background-image: radial-gradient(rgba(160, 200, 245, .35) 1px, transparent 1.6px);
  background-size: 24px 24px; -webkit-mask-image: radial-gradient(ellipse 45% 60% at 80% 30%, #000, transparent 70%); mask-image: radial-gradient(ellipse 45% 60% at 80% 30%, #000, transparent 70%); }
.js-motion .page-hero .ph-ground::before { animation: drift 30s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(-4%, 3%); } }
.m .page-hero .ph-ground::after { content: ''; position: absolute; width: 700px; height: 700px; right: -200px; top: -300px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 108, 192, .45), transparent); }
.js-motion .page-hero .ph-ground::after { animation: drift 22s ease-in-out infinite alternate-reverse; }

@media (prefers-reduced-motion: reduce) {
  .m .xp-panel, .m .xp-panel > img, .m .xp-content > *, .m .tl-slide, .m .tl-line i, .m .qa .pm, .m .qa .pm::before, .m .qa .pm::after,
  .m [data-tilt], .m .member img { transition: none !important; }
  .m .tl-line i { transform: none; }
}
.m .xp-shade { background: linear-gradient(180deg, rgba(0, 22, 52, .82), rgba(0, 22, 52, .35) 48%, rgba(0, 22, 52, .9)); }

/* ---------------------------------------------------------------- Services: who it is for, what you receive, who you work with */
.m .svc-index a { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 16px; padding: 18px 4px; }
.m .si-ico { width: 30px; height: 30px; color: #8CC4F8; }
.m .svc-index small { display: block; margin-top: 5px; font: 400 13.5px/1.4 var(--f-body); color: #9FB5D3; }
.m .sr-for { margin: 0; font-size: 16px; line-height: 1.5; color: var(--body); max-width: 26em; }
.m .sr-head { gap: 16px; }
.m .sr-block { margin-top: 26px; }
.m .sr-k { display: block; margin-bottom: 14px; font: 500 11.5px/1 var(--f-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.m .sr-leads { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.m .lead-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px 16px; border-radius: 16px;
  background: #F5F8FC; border: 1px solid #E3E9F1; transition: border-color .2s, transform .3s var(--ease); }
.m .lead-card:hover { border-color: #BFD0E6; transform: translateX(4px); }
.m .lead-card img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.m .lead-card strong { display: block; font: 600 16px/1.2 var(--f-display); color: var(--ink); }
.m .lead-card em { display: block; margin-top: 3px; font: 500 11px/1.2 var(--f-mono); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: #006CC0; }
.m .lc-line { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.m .svc-row .ts-points { margin-bottom: 0; }
/* how an engagement starts: three steps on a line that draws itself (SmoothUI animated-stepper) */
.m .eng-steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.m .eng-steps::before { content: ''; position: absolute; left: 8px; right: 8px; top: 8px; height: 2px; background: #D5DDE8; }
.m .eng-step { position: relative; padding-top: 40px; }
.m .eng-dot { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #003B7A; box-shadow: 0 0 0 6px #E4EDF8; }
.js-motion .eng-step .eng-dot { transform: scale(0); transition: transform .5s var(--ease) calc(var(--i) * 180ms + .2s); }
.js-motion .eng-step.in .eng-dot { transform: none; }
.m .eng-step p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--body); max-width: 24em; }
@media (max-width: 900px) {
  .r2.m .eng-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .r2.m .eng-steps::before { left: 8px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .r2.m .eng-step { padding: 0 0 0 40px; }
}
.m .qa .pm::before { transform: none; }
.m .qa.closing .pm { background: none; border-color: #C9D6E6; transform: none; }
.m .qa.closing .pm::before { background: var(--ink); }
.m .qa.closing .pm::after { background: var(--ink); transform: rotate(90deg); opacity: 1; }
.m .eng-steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .r2.m .eng-steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .r2.m .eng-steps--4::before { display: none; } }
.m .page-hero { position: relative; isolation: isolate; }
.m .page-hero .spot-light { z-index: 1; }
/* phones: every tap target at least 44px tall (WCAG 2.5.5, Apple and Google guidance) */
@media (max-width: 900px) {
  .r2.m .link-arrow { min-height: 44px; align-items: center; }
  .r2.m .brand { display: inline-flex; align-items: center; min-height: 44px; }
  .r2.m .sa-chip { padding-block: 12px; }
  .r2.m .edit { display: inline-flex; align-items: center; min-height: 44px; }
  .r2.m .f-col a, .r2.m .f-base a { display: inline-block; padding-block: 8px; }
}
@media (max-width: 600px) {
  .r2.m .mvf-p { font-size: 24px; line-height: 1.3; }
  .r2.m .share-p, .r2.m .lede { font-size: 18px; }
  .r2.m .mvf { gap: 40px; }
}

/* The mobile menu is position: fixed inside the header. A backdrop-filter on the stuck header makes the header the
   containing block for fixed children, which clipped the open menu to the header's 72px once the page had scrolled.
   While the menu is open the header drops the filter and the menu fills the screen again. */
.r2.m .site-head.nav-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: #001F47; box-shadow: none; }
@media (max-width: 1100px) { .r2.m .main-nav { height: calc(100dvh - 72px); bottom: auto; } }

/* footer: a real LinkedIn mark in a 44px target, and the AI note aligned with everything else */
.m .f-in { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .22); color: #fff; transition: background-color .15s, border-color .15s; }
.m .f-in:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
@media (max-width: 600px) { .r2.m .f-base .f-ai { text-align: left; } .r2.m .f-in { padding: 0; } }

/* the language switcher */
.m .lang-sw { position: relative; }
.m .lang-btn { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px;
  border-radius: 99px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; font: 500 12.5px/1 var(--f-display); letter-spacing: .08em; }
.m .lang-btn::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.m .lang-btn:hover { border-color: #fff; }
.m .lang-btn:focus-visible { outline: 2px solid #8CC4F8; outline-offset: 2px; }
.m .lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; list-style: none; margin: 0; padding: 6px; min-width: 170px; border-radius: 14px;
  background: #fff; box-shadow: 0 20px 40px -12px rgba(0, 10, 30, .45); }
.m .lang-menu a { display: block; padding: 10px 12px; border-radius: 9px; color: var(--ink); text-decoration: none; font: 500 14px/1.2 var(--f-body); }
.m .lang-menu a:hover { background: #EEF3F9; }
.m .lang-menu a[aria-current] { background: #001F47; color: #fff; }
@media (max-width: 1100px) { .r2.m .lang-btn { height: 40px; padding: 0 10px; } }

/* the header with seven languages: longer menu words need room. Below 1480px "Log in" becomes an icon (its name stays
   for assistive technology) and the menu tightens; the full menu moves behind the button from 1320px (was 1100px). */
.m .login { display: inline-flex; align-items: center; gap: 8px; }
.m .login-ico { display: none; }
@media (max-width: 1480px) {
  .r2.m .main-nav { gap: 16px; }
  .r2.m .main-nav a { font-size: 12px; letter-spacing: .06em; }
  .r2.m .head-row { gap: 22px; }
  .r2.m .head-tools { gap: 14px; }
  .r2.m .login-ico { display: block; }
  .r2.m .login-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .r2.m .login { width: 40px; height: 40px; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); }
}
@media (max-width: 1320px) {
  .r2.m .head-row { height: 72px; }
  .r2.m .nav-toggle { display: grid; }
  .r2.m .login { display: none; }
  .r2.m .head-tools { margin-left: auto; gap: 12px; }
  .r2.m .main-nav { position: fixed; left: 0; right: 0; top: 72px; height: calc(100dvh - 72px); bottom: auto; z-index: 50; display: none; flex-direction: column;
    gap: 0; margin: 0; padding: 12px var(--gutter) 40px; overflow-y: auto; background: #001F47; }
  .r2.m .nav-open .main-nav { display: flex; }
  .r2.m .main-nav a { padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 20px; letter-spacing: .02em; text-transform: none; font-weight: 500; }
  .r2.m .main-nav .nav-only-m { display: block; }
  .r2.m .main-nav .nav-cta { margin-top: 28px; padding: 18px 24px; border: 0; border-radius: 99px; background: #fff; color: #001F47;
    text-align: center; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
}
@media (max-width: 1480px) and (min-width: 1321px) {
  .r2.m .head-row { --gutter: 36px; gap: 18px; }
  .r2.m .site-head .wrap { padding-inline: 36px; }
  .r2.m .brand .logo { width: 158px; height: auto; }
  .r2.m .main-nav { gap: 13px; }
  .r2.m .main-nav a { font-size: 11.5px; letter-spacing: .05em; }
  .r2.m .btn-head { padding: 0 16px; font-size: 11.5px; }
}

/* ---------------------------------------------------------------- audit fixes, 1 October 2026 */
/* pause buttons: the icon follows the state, never aria-pressed, so the name and the state cannot contradict */
.m .t-btn > span { box-sizing: border-box; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.m .t-btn[data-state="stopped"] > span { width: 0; height: 0; margin-left: 3px; border-right: 0; border-left: 11px solid currentColor;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.m .xp-ctl { display: flex; justify-content: flex-end; margin: -28px 0 12px; }
.m .mq-pause { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 2; width: 32px; height: 32px; background: #fff; }
.m .marquee.mq-stopped .mq-track { animation-play-state: paused; }
/* focus: a white ring on every dark ground, navy on white menus; and room under the sticky header */
.m .hero-r4 :focus-visible, .m .sw-in :focus-visible, .m .tl-card :focus-visible, .m .xp-panel :focus-visible,
.m .story-visual :focus-visible, .m .price-band :focus-visible, .m .ts-stage :focus-visible { outline-color: #fff; }
.m .lang-menu :focus-visible, .m .hero-r4 .lang-menu :focus-visible { outline-color: #001F47; }
.m .xp-card :focus-visible, .m .sw-in .pcard :focus-visible { outline-color: #001F47; }
html.m { scroll-padding-top: 104px; }
/* contrast: the sample-figures note and photo source lines (audit: 1.8 to 2.9:1) */
.m .sw-note { color: #3A4A60; }
.m .xp-stat .cs-src, .m .sv-fig .cs-src, .m .ss-media .cs-src, .m .rs-img .cs-src { color: #CFE0F5; text-shadow: 0 1px 2px rgba(0, 10, 30, .6); }
.m .in-watch { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #D5DDE8; font-size: 15px; color: var(--body); }
/* long compound words in the translations (German above all) break at syllables rather than overflow */
html:not([lang="en"]) .h-display, html:not([lang="en"]) .h-page, html:not([lang="en"]) .h-section, html:not([lang="en"]) .ts-h,
html:not([lang="en"]) .sr-h, html:not([lang="en"]) .sw-name, html:not([lang="en"]) .xp-step p, html:not([lang="en"]) .btn,
html:not([lang="en"]) .svc-name, html:not([lang="en"]) .tl-text { -webkit-hyphens: auto; hyphens: auto; }