/* =====================================================================
   WSM homepage v2 (Stage 1 remake, round 2) · Ali Raza Solutions
   Tokens map 1:1 to Elementor Global Colours / Fonts in Stage 2.
   Remade: header, hero, From Data to Business Action, Intelligence Across Your Business, industries ×8.
   Carried from v1 (until 13 Oct): logos, testimonials, CTA, footer.
   ===================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
}

:root {
  --ink: #07111C;        /* dark foundation */
  --harbour: #0C2236;    /* secondary dark */
  --steel: #2E3A4B;      /* lines on dark */
  --cyan: #4FB8E8;       /* WSM logo cyan */
  --cyan-hi: #00B4FF;    /* illumination */
  --mist: #E8F2F9;       /* illuminated field */
  --paper: #F5F8FB;      /* light band */
  --text: #EAF1F7;
  --muted: #93A6B8;
  --text-dark: #13212F;
  --muted-dark: #4A5D70;
  --deep-cyan: #1F78A8;  /* cyan on light fields */
  --glass: linear-gradient(180deg, rgba(20, 46, 70, .82), rgba(9, 24, 39, .86));
  --edge: rgba(79, 184, 232, .24);

  --f: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wrap: 1240px;
  --gut: clamp(16px, 5vw, 64px);
  --sec: clamp(88px, 11vw, 160px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- base ---------- */
.wsm-page { margin: 0; background: var(--ink); color: var(--text); font-family: var(--f); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
.wsm-page *, .wsm-page *::before, .wsm-page *::after { box-sizing: border-box; }
.wsm-page img { max-width: 100%; height: auto; display: block; }
.wsm-page a { color: inherit; }
.wsm-page h1, .wsm-page h2, .wsm-page h3 { text-wrap: balance; margin: 0; font-weight: 600; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.06; }
.wsm-page p { margin: 0; }
.wsm-page p.wsm-wrap { margin-left: auto; margin-right: auto; }
.wsm-page :focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: 3px; border-radius: 4px; }
.wsm-wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.wsm-sr, .wsm-skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wsm-skip:focus { position: fixed; z-index: 200; top: 12px; left: 12px; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 6px; }

.wsm-h2 { font-size: clamp(32px, 3.6vw, 52px); max-width: 18ch; }
.wsm-label { font-size: 13px; letter-spacing: .14em; color: var(--cyan); font-weight: 600; margin-bottom: 18px; }
.wsm-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); margin-bottom: 22px; }
.wsm-eyebrow::before { content: ""; width: 28px; height: 1.5px; background: linear-gradient(90deg, transparent, currentColor); }
.wsm-eyebrow--dark { color: var(--deep-cyan); }
.wsm-grad { background: linear-gradient(95deg, #7FD3F7 0%, var(--cyan) 45%, var(--cyan-hi) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* buttons & links */
.wsm-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--cyan); color: var(--ink) !important; font-weight: 600; font-size: 16px; text-decoration: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 10px 30px -8px rgba(0, 180, 255, .55); transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.wsm-btn:hover { background: #7BCDF2; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 14px 40px -8px rgba(0, 180, 255, .75); }
.wsm-btn__arr { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.wsm-btn:hover .wsm-btn__arr { transform: translateX(3px); }
.wsm-btn--ghost { background: rgba(12, 34, 54, .4); color: var(--text) !important; box-shadow: 0 0 0 1px rgba(147, 166, 184, .4) inset; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.wsm-btn--ghost:hover { background: rgba(79, 184, 232, .12); box-shadow: 0 0 0 1px var(--cyan) inset, 0 0 24px -6px rgba(0, 180, 255, .6); }
.wsm-btn--sm { min-height: 42px; padding: 0 20px; font-size: 15px; box-shadow: none; }
.wsm-btn--light { background: #fff; }
.wsm-btn--light:hover { background: var(--mist); }
.wsm-link { position: relative; display: inline-block; font-weight: 600; font-size: 16px; text-decoration: none; padding: 6px 0; }
.wsm-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--cyan); transform-origin: left; transition: transform .35s var(--ease); }
.wsm-link:hover::after { transform: scaleX(.35); }
.wsm-link--light::after { background: #fff; }

/* ---------- header ---------- */
.wsm-header { position: fixed; inset: 0 0 auto; z-index: 100; transition: background .35s var(--ease), box-shadow .35s var(--ease); }
body.admin-bar .wsm-header { top: 32px; }
.wsm-header.is-solid { background: rgba(7, 17, 28, .86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(147, 166, 184, .14); }
.wsm-header__in { display: flex; align-items: center; justify-content: space-between; height: 88px; transition: height .35s var(--ease); }
.wsm-header.is-solid .wsm-header__in { height: 72px; }
.wsm-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; text-decoration: none; }
.wsm-brand img { width: 104px; }
.wsm-brand__tag { font-size: 11px; line-height: 1; font-weight: 500; letter-spacing: .06em; color: #B9C6D2; white-space: nowrap; }
.wsm-brand__tag span { color: #4FB8E8; }
.wsm-nav { display: flex; align-items: center; gap: 34px; font-size: 15px; }
.wsm-nav a:not(.wsm-btn) { text-decoration: none; color: var(--muted); transition: color .2s; }
.wsm-nav a:not(.wsm-btn):hover { color: #fff; }
.wsm-menu { display: none; }

/* =====================================================================
   P1 HERO
   ===================================================================== */
.wsm-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(132px, 13vw, 176px) 0 clamp(56px, 6vw, 88px); background: radial-gradient(90% 70% at 70% 35%, #0D2740 0%, var(--ink) 62%); }
.wsm-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wsm-hero__floor { position: absolute; left: -30%; right: -30%; bottom: -6%; height: 58%; background-image: linear-gradient(rgba(79, 184, 232, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 184, 232, .16) 1px, transparent 1px); background-size: 72px 72px; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: radial-gradient(60% 90% at 62% 100%, #000 0%, transparent 75%); mask-image: radial-gradient(60% 90% at 62% 100%, #000 0%, transparent 75%); }
.wsm-hero__orb { position: absolute; border-radius: 50%; }
.wsm-hero__orb--a { right: 6%; top: 8%; width: 760px; height: 760px; background: radial-gradient(closest-side, rgba(0, 180, 255, .2), rgba(0, 180, 255, .05) 55%, transparent); }
.wsm-hero__orb--b { left: -12%; bottom: -24%; width: 640px; height: 640px; background: radial-gradient(closest-side, rgba(31, 120, 168, .22), transparent); }
.wsm-hero__waves { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 34%; }
.wsm-hero__waves path { stroke: var(--cyan); stroke-opacity: calc(var(--o) * 2.2); stroke-width: 1; vector-effect: non-scaling-stroke; }

.wsm-hero__layout { position: relative; display: grid; grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.wsm-hero__copy { position: relative; z-index: 2; container-type: inline-size; }
.wsm-hero__title { font-size: clamp(44px, 4.9vw, 78px); font-size: min(clamp(44px, 4.9vw, 78px), 15.4cqi); /* longest line is ~6.25em: keep it inside the copy column */ font-weight: 640; font-stretch: 104%; line-height: .96; letter-spacing: -.035em; }
.wsm-line { display: block; padding-bottom: .1em; margin-bottom: -.06em; white-space: nowrap; clip-path: inset(-.3em -.4em 0 -.4em); /* masks the rise from below only; sides/top never clip "Business" */ }
.wsm-line > span { display: inline-block; }
.wsm-hero__lead { margin-top: 28px; max-width: 32em; font-size: clamp(16.5px, 1.3vw, 18.5px); color: #B8C7D5; }
.wsm-hero__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* the engine: inputs → fibre → core → fibre → outcomes */
.wsm-engine { position: relative; margin: 0 calc(var(--gut) * -.5) 0 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(28px, .62fr) auto minmax(28px, .5fr) minmax(0, 1.05fr); align-items: stretch; height: clamp(440px, 42vw, 620px); }
.wsm-engine__in, .wsm-engine__out { position: relative; z-index: 2; display: grid; grid-template-rows: repeat(4, 1fr); align-items: center; margin: 0; padding: 0; list-style: none; }
.wsm-engine__fan { display: block; width: 100%; height: 100%; overflow: visible; }
.wsm-engine__fan--in { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45), #000 70%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .45), #000 70%); }
.wsm-strands path { fill: none; stroke: var(--cyan); stroke-opacity: var(--o); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wsm-engine__fan--out .wsm-strands path { stroke: #8FD9FB; }
.wsm-pulses path { fill: none; stroke: #DDF5FF; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 7 93; stroke-dashoffset: 0; opacity: 0; }
.wsm-fan-v { display: none; }
.wsm-hero.is-flowing .wsm-pulses path { opacity: 1; animation: wsm-pulse 3.6s linear calc(var(--k) * -3.6s) infinite; }
.wsm-hero.is-flowing .wsm-engine__fan--out .wsm-pulses path { animation-duration: 3s; animation-delay: calc(var(--k) * -3s); }
.wsm-hero.is-paused .wsm-pulses path, .wsm-hero.is-paused .wsm-core__orbit, .wsm-hero.is-paused .wsm-core__halo { animation-play-state: paused; }
@keyframes wsm-pulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }

.wsm-chip { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 14px; background: var(--glass); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 34px -12px rgba(0, 0, 0, .6), 0 0 26px -6px rgba(0, 180, 255, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wsm-chip__ic, .wsm-out__ic { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(79, 184, 232, .12); box-shadow: inset 0 0 0 1px rgba(79, 184, 232, .25); }
.wsm-chip__ic svg, .wsm-out__ic svg { width: 19px; height: 19px; fill: none; stroke: #8FD9FB; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wsm-chip__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.wsm-chip__t b { font-size: 14px; font-weight: 600; color: #F1F7FC; }
.wsm-chip__t small { font-size: 11.5px; color: var(--muted); }

.wsm-out { display: flex; align-items: center; gap: 11px; padding: 11px 14px 11px 11px; border-radius: 14px; background: linear-gradient(180deg, rgba(24, 62, 92, .85), rgba(11, 30, 48, .9)); border: 1px solid rgba(79, 184, 232, .42); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 30px -4px rgba(0, 180, 255, .3); }
.wsm-out b { font-size: 13.5px; font-weight: 600; line-height: 1.25; color: #E3F5FE; }
.wsm-out__ic { background: rgba(0, 180, 255, .2); }
.wsm-out__ic svg { stroke: #E3F5FE; }

.wsm-core { position: relative; z-index: 1; align-self: center; width: clamp(150px, 13.5vw, 210px); aspect-ratio: 1; display: grid; place-items: center; }
.wsm-core__halo { position: absolute; inset: -75%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 180, 255, .5), rgba(0, 180, 255, .12) 45%, transparent 75%); animation: wsm-breathe 4.8s ease-in-out infinite; }
@keyframes wsm-breathe { 0%, 100% { opacity: .82; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
.wsm-core__rings { position: absolute; inset: -16%; width: 132%; height: 132%; overflow: visible; fill: none; }
.wsm-core__rings circle { stroke: var(--cyan); transform-box: fill-box; transform-origin: center; }
.wsm-core__orbit { stroke-opacity: .55; stroke-width: 1.2; animation: wsm-spin 70s linear infinite; }
.wsm-core__orbit--b { stroke-opacity: .3; animation-duration: 46s; animation-direction: reverse; }
.wsm-core__ring { stroke-opacity: .22; }
.wsm-core__box { position: relative; width: 66%; aspect-ratio: 1; border-radius: 24%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(circle at 50% 28%, #16466C, #0A1F33 72%); border: 1px solid rgba(143, 217, 251, .65); box-shadow: 0 0 0 7px rgba(79, 184, 232, .09), 0 0 56px 4px rgba(0, 180, 255, .6), inset 0 0 30px rgba(0, 180, 255, .48); }
.wsm-core__box img { width: 66%; }
.wsm-core__box span { font-size: 8.5px; font-weight: 600; letter-spacing: .09em; white-space: nowrap; text-transform: uppercase; color: #A6E2FA; }
@keyframes wsm-spin { to { transform: rotate(360deg); } }

.wsm-stats { position: relative; z-index: 2; margin: clamp(64px, 7vw, 104px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(147, 166, 184, .2); }
.wsm-stats > :is(div:not([class]), .wsm-stats__item) { position: relative; padding: 26px 24px 0; }
.wsm-stats > :is(div:not([class]), .wsm-stats__item):first-child { padding-left: 0; }
.wsm-stats > :is(div:not([class]), .wsm-stats__item) + :is(div:not([class]), .wsm-stats__item)::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 4px; width: 1px; background: rgba(147, 166, 184, .16); }
.wsm-stats > :is(div:not([class]), .wsm-stats__item)::after { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--cyan-hi); box-shadow: 0 0 12px var(--cyan-hi); }
.wsm-stats > :is(div:not([class]), .wsm-stats__item) + :is(div:not([class]), .wsm-stats__item)::after { left: 24px; }
.wsm-stats dt { font-size: clamp(22px, 2.1vw, 32px); font-weight: 600; font-stretch: 108%; letter-spacing: -.02em; color: #CFEFFD; line-height: 1.1; }
.wsm-stats dd { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; line-height: 1.45; max-width: 24ch; }

/* =====================================================================
   P3 FROM DATA TO BUSINESS ACTION (illuminated field + the phased journey)
   ===================================================================== */
.wsm-d2a { position: relative; overflow: hidden; overflow: clip; isolation: isolate; background: linear-gradient(180deg, #DCEBF6 0%, var(--mist) 26%, #EEF5FB 60%, #DDEBF6 100%); color: var(--text-dark); padding: clamp(150px, 15vw, 230px) 0 var(--sec); }
.wsm-d2a__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wsm-d2a__horizon { position: absolute; left: 0; top: 0; width: 100%; height: clamp(70px, 9vw, 150px); filter: drop-shadow(0 8px 22px rgba(0, 180, 255, .4)); }
.wsm-d2a__glow { position: absolute; left: 50%; top: 0; width: 1200px; height: 620px; transform: translate(-50%, -30%); background: radial-gradient(closest-side, rgba(79, 184, 232, .38), rgba(79, 184, 232, 0)); }
.wsm-d2a__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(31, 120, 168, .2) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 50% at 85% 30%, #000, transparent 75%); mask-image: radial-gradient(70% 50% at 85% 30%, #000, transparent 75%); }
.wsm-d2a__contours { position: absolute; left: 0; bottom: 0; width: 100%; height: 70%; }
.wsm-d2a__contours path { stroke: var(--cyan); stroke-opacity: var(--o); stroke-width: 1; vector-effect: non-scaling-stroke; }

.wsm-d2a__head { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 28px clamp(32px, 5vw, 80px); align-items: end; }
.wsm-d2a__head .wsm-eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.wsm-d2a__statement { font-size: clamp(34px, 4.3vw, 66px); font-weight: 580; font-stretch: 106%; line-height: 1.04; letter-spacing: -.03em; max-width: 20ch; }
.wsm-d2a__intro { font-size: 17.5px; color: var(--muted-dark); max-width: 30em; padding-bottom: 8px; }

.wsm-principles { margin: clamp(56px, 6vw, 88px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.wsm-principle { position: relative; padding: 28px 26px 30px; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .28)); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 28px 56px -30px rgba(12, 34, 54, .42), 0 2px 10px -4px rgba(31, 120, 168, .12), inset 0 1px 0 rgba(255, 255, 255, .9); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); overflow: hidden; }
.wsm-principle::after { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 2px; background: linear-gradient(90deg, var(--deep-cyan), var(--cyan), transparent); }
.wsm-principle__ic { width: 30px; height: 30px; margin-bottom: 20px; fill: none; stroke: var(--deep-cyan); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wsm-principle h3 { font-size: 19px; font-weight: 640; font-stretch: 106%; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 10px; }
.wsm-principle p { font-size: 15px; line-height: 1.55; color: var(--muted-dark); }

.wsm-journey { margin-top: clamp(88px, 10vw, 150px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 104px); align-items: start; }
.wsm-journey__stage { position: sticky; top: 104px; }
.wsm-lens { position: relative; margin: 0; padding: 22px 22px 26px; border-radius: 28px; color: #fff; overflow: hidden; background: radial-gradient(120% 90% at 50% 42%, #10314F 0%, #0A1C2E 45%, var(--ink) 80%); box-shadow: 0 50px 90px -40px rgba(7, 17, 28, .7), 0 0 0 1px rgba(79, 184, 232, .28) inset, 0 0 60px -20px rgba(0, 180, 255, .45); }
.wsm-lens::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(79, 184, 232, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 184, 232, .07) 1px, transparent 1px); background-size: 32px 32px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.wsm-lens__top { position: relative; display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wsm-lens__top span:last-child { color: var(--cyan); }
.wsm-lens__svg { position: relative; display: block; width: 100%; height: auto; margin: 6px 0 2px; overflow: visible; }
.wsm-lens__rings circle { fill: none; stroke: rgba(79, 184, 232, .14); stroke-dasharray: 2 5; }
.wsm-lens__links line { stroke: var(--cyan); stroke-opacity: .42; stroke-width: .9; }
.wsm-lens__dots circle { fill: #A6E2FA; }
.wsm-lens__dots circle[data-ring="0"] { fill: #fff; }
.wsm-lens__core circle { fill: #0A1F33; stroke: #8FD9FB; stroke-width: 1.2; }
.wsm-lens__core .wsm-lens__halo { fill: rgba(0, 180, 255, .35); stroke: none; filter: blur(4px); }
.wsm-lens__core .wsm-lens__node { fill: #EAF9FF; stroke: none; filter: drop-shadow(0 0 5px #00B4FF) drop-shadow(0 0 12px #00B4FF); }
.wsm-lens__phase { position: relative; display: flex; align-items: baseline; gap: 14px; font-size: 20px; font-weight: 600; font-stretch: 108%; }
.wsm-lens__num { font-size: 40px; line-height: 1; color: var(--cyan); letter-spacing: -.03em; }
.wsm-lens__bar { position: relative; margin-top: 16px; height: 2px; background: rgba(147, 166, 184, .2); border-radius: 2px; }
.wsm-lens__bar span { position: absolute; inset: 0; background: linear-gradient(90deg, var(--deep-cyan), var(--cyan-hi)); box-shadow: 0 0 10px var(--cyan-hi); transform-origin: left; }

.wsm-journey__steps { position: relative; padding-top: 4px; }
.wsm-journey__label { font-size: 15px; font-weight: 600; color: var(--deep-cyan); margin-bottom: clamp(40px, 5vw, 64px); max-width: 30ch; }
.wsm-journey__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; }
.wsm-journey__track { stroke: #BCD5E6; stroke-width: 2; }
.wsm-journey__fill { stroke: var(--deep-cyan); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(0, 180, 255, .7)); }
.wsm-steps { position: relative; margin: 0; padding: 0; list-style: none; }
.wsm-step { position: relative; max-width: 380px; padding-left: 50px; margin-bottom: clamp(64px, 8vw, 112px); transition: opacity .5s var(--ease); }
.wsm-step:last-child { margin-bottom: 0; }
.wsm-step:nth-child(2) { margin-left: 16%; }
.wsm-step:nth-child(3) { margin-left: 34%; }
.wsm-step:nth-child(4) { margin-left: 18%; }
.wsm-step:nth-child(5) { margin-left: 38%; }
.wsm-step__node { position: absolute; left: 0; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: var(--mist); border: 2px solid var(--deep-cyan); transition: background .4s, box-shadow .4s; }
.wsm-step__node::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--deep-cyan); transform: scale(.4); opacity: .5; transition: transform .4s var(--ease), opacity .4s; }
.wsm-step.is-on .wsm-step__node { background: #fff; box-shadow: 0 0 0 6px rgba(79, 184, 232, .16), 0 0 22px rgba(0, 180, 255, .7); }
.wsm-step.is-on .wsm-step__node::after { transform: scale(1); opacity: 1; background: var(--cyan-hi); }
.wsm-step__num { display: block; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--deep-cyan); margin-bottom: 6px; }
.wsm-step h3 { font-size: clamp(24px, 2.2vw, 32px); font-weight: 620; letter-spacing: -.02em; margin-bottom: 10px; }
.wsm-step p { font-size: 16.5px; line-height: 1.55; color: var(--muted-dark); }
html.wsm-js .wsm-journey.is-live .wsm-step:not(.is-on) { opacity: .4; }

/* =====================================================================
   P2 INTELLIGENCE ACROSS YOUR BUSINESS
   ===================================================================== */
.wsm-pillars { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, var(--ink) 0%, #0A1A2B 45%, var(--ink) 100%); padding: var(--sec) 0 calc(var(--sec) + 20px); }
.wsm-pillars__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wsm-pillars__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(79, 184, 232, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 184, 232, .055) 1px, transparent 1px); background-size: 88px 88px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent, #000 15%, #000 85%, transparent); }
.wsm-pillars__glow { position: absolute; right: -10%; top: 20%; width: 900px; height: 900px; background: radial-gradient(closest-side, rgba(0, 180, 255, .1), transparent); }
.wsm-pillars__head { max-width: 760px; }
.wsm-pillars__head > p:last-child { margin-top: 22px; color: var(--muted); max-width: 30em; font-size: 18px; }

.wsm-pillar { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; margin-top: clamp(80px, 9vw, 150px); }
.wsm-pillar--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
@media (min-width: 1440px) {
  /* R4: no dead gap between copy and visual on wide screens */
  .wsm-pillar { grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.4fr); gap: 48px; }
  .wsm-pillar--rev { grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.2fr); }
}
.wsm-pillar--rev .wsm-pillar__copy { order: 2; }
.wsm-pillar__idx { display: block; font-size: clamp(56px, 5.4vw, 84px); font-weight: 700; font-stretch: 112%; line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px rgba(79, 184, 232, .55); margin-bottom: 22px; }
.wsm-pillar h3 { font-size: clamp(30px, 2.9vw, 44px); margin-bottom: 16px; }
.wsm-pillar__copy > p { color: #A9BACA; font-size: 17.5px; max-width: 30em; }
.wsm-tags { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 24px 0 26px; padding: 0; list-style: none; }
.wsm-tags li { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #9FCFEA; }
.wsm-tags li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan-hi); }

.wsm-ui { position: relative; margin: 0; }
.wsm-ui::before { content: ""; position: absolute; inset: -10% -6%; z-index: -1; background: radial-gradient(closest-side, rgba(0, 180, 255, .16), transparent 70%); }
.wsm-ui__stage { position: relative; aspect-ratio: 16 / 11; font-size: 13px; line-height: 1.4; color: #DCEAF5; }
.wsm-panel { position: absolute; padding: 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 34px 70px -24px rgba(0, 0, 0, .75), 0 0 40px -10px rgba(0, 180, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.wsm-panel__title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.wsm-panel__title span { font-size: 10px; letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; color: var(--cyan); background: rgba(79, 184, 232, .12); }
.wsm-panel__bar, .wsm-window__bar { display: flex; align-items: center; gap: 6px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(147, 166, 184, .14); font-size: 12px; color: var(--muted); }
.wsm-panel__bar i, .wsm-window__bar i { width: 8px; height: 8px; border-radius: 50%; background: rgba(147, 166, 184, .3); }
.wsm-panel__bar span, .wsm-window__bar span { margin-left: 8px; }

/* 01 data */
.wsm-panel--graph { left: 0; top: 0; width: 42%; z-index: 1; }
.wsm-graph { display: block; width: 100%; height: auto; }
.wsm-graph__links path { fill: none; stroke: var(--cyan); stroke-opacity: .4; stroke-width: 1; }
.wsm-graph__nodes circle { fill: #0A1F33; stroke: #8FD9FB; stroke-width: 1.5; }
.wsm-graph__hub { fill: var(--cyan-hi); filter: drop-shadow(0 0 8px var(--cyan-hi)); }
.wsm-graph__keys { display: flex; gap: 12px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--muted); }
.wsm-graph__keys li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--cyan); vertical-align: 1px; }
.wsm-panel--main { left: 20%; top: 17%; width: 60%; z-index: 2; padding: 18px 20px 20px; border-color: rgba(79, 184, 232, .38); }
.wsm-ask { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: rgba(7, 17, 28, .6); border: 1px solid rgba(79, 184, 232, .35); box-shadow: 0 0 20px -6px rgba(0, 180, 255, .4); font-size: 14px; color: #F1F7FC; }
.wsm-ask svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; }
.wsm-ask__q { position: relative; }
.wsm-answer { margin-top: 16px; }
.wsm-answer__k { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 6px !important; }
.wsm-answer > p:nth-child(2) { font-size: 14.5px; color: #E3EEF7; }
.wsm-bars { display: flex; align-items: flex-end; gap: 8px; height: 92px; margin: 16px 0 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(147, 166, 184, .14); }
.wsm-bars span { position: relative; flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, rgba(147, 166, 184, .45), rgba(147, 166, 184, .12)); transform-origin: bottom; }
.wsm-bars span.is-hi { background: linear-gradient(180deg, var(--cyan-hi), rgba(0, 180, 255, .18)); box-shadow: 0 0 16px -2px rgba(0, 180, 255, .55); }
.wsm-bars em { position: absolute; left: 0; right: 0; bottom: -18px; font-style: normal; font-size: 9.5px; text-align: center; color: var(--muted); }
.wsm-sources { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wsm-sources { gap: 4px 14px !important; }
.wsm-sources li { font-size: 11px; color: #B8C7D5; }
.wsm-sources li::before { content: "↗ "; color: var(--cyan); }
.wsm-panel--kpi { right: 0; bottom: 0; width: 38%; z-index: 3; }
.wsm-spark { display: block; width: 100%; height: auto; overflow: visible; }
.wsm-spark__line { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linejoin: round; }
.wsm-spark__fc { fill: none; stroke: #A6E2FA; stroke-width: 2; stroke-dasharray: 4 4; }
.wsm-spark__dot { fill: #fff; filter: drop-shadow(0 0 6px var(--cyan-hi)); }

/* 02 workflows (WhatsApp-style conversation) */
.wsm-phone { position: absolute; left: 4%; top: 0; bottom: 0; width: 41%; z-index: 2; display: flex; flex-direction: column; padding: 10px; border-radius: 36px; background: linear-gradient(160deg, #1B3149, #08131F 60%); border: 1px solid rgba(143, 217, 251, .35); box-shadow: 0 0 0 4px rgba(7, 17, 28, .9), 0 50px 90px -30px rgba(0, 0, 0, .85), 0 0 60px -10px rgba(0, 180, 255, .3); }
.wsm-phone__bar { display: flex; align-items: center; gap: 9px; padding: 14px 12px 12px; border-radius: 27px 27px 0 0; background: #0F2234; }
.wsm-phone__av { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--deep-cyan)); font-size: 11px; font-weight: 700; color: var(--ink); }
.wsm-phone__who { display: flex; flex-direction: column; line-height: 1.2; }
.wsm-phone__who b { font-size: 13px; color: #fff; }
.wsm-phone__who small { font-size: 10.5px; color: #7FD3A8; }
.wsm-wa { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: #E2FBEB; background: rgba(37, 211, 102, .22); border: 1px solid rgba(37, 211, 102, .6); }
.wsm-wa svg { width: 13px; height: 13px; fill: none; stroke: #25D366; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wsm-chat { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; background: #0A1825; background-image: radial-gradient(rgba(79, 184, 232, .07) 1px, transparent 1.2px); background-size: 14px 14px; overflow: hidden; }
.wsm-msg { position: relative; max-width: 86%; padding: 8px 11px 16px; border-radius: 12px; font-size: 12.5px; line-height: 1.4; }
.wsm-msg time { position: absolute; right: 8px; bottom: 3px; font-size: 9px; color: rgba(220, 234, 245, .5); }
.wsm-msg--in { align-self: flex-start; background: #1A2D3F; border-top-left-radius: 4px; }
.wsm-msg--out { align-self: flex-end; background: #0F4842; box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .22); border-top-right-radius: 4px; color: #EAF8FF; }
.wsm-online { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #25D366; box-shadow: 0 0 6px #25D366; vertical-align: 1px; }
.wsm-msg--btns { display: flex; gap: 6px; padding: 6px; background: transparent; box-shadow: none; border-radius: 10px; }
.wsm-msg--btns span { padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; background: #0E4458; color: #9FE6FF; border: 1px solid rgba(79, 184, 232, .35); }
.wsm-msg--btns span:first-child { background: var(--cyan); color: var(--ink); border-color: transparent; }
.wsm-phone__input { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 0 0 27px 27px; background: #0F2234; font-size: 12px; color: var(--muted); }
.wsm-phone__input i { width: 26px; height: 26px; border-radius: 50%; background: var(--cyan); }
.wsm-flowlink { position: absolute; left: 45%; top: 10%; width: 14%; height: 80%; overflow: visible; fill: none; }
.wsm-flowlink path { stroke: var(--cyan); stroke-opacity: .5; stroke-width: 1.2; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; animation: wsm-dash 1.6s linear infinite; }
@keyframes wsm-dash { to { stroke-dashoffset: -16; } }
.wsm-rail { right: 0; top: 9%; width: 42%; z-index: 3; padding: 18px 18px 8px; }
.wsm-rail ol { position: relative; margin: 0; padding: 0; list-style: none; }
.wsm-rail__steps { position: relative; }
.wsm-rail ol::before { content: ""; position: absolute; left: 9px; top: 10px; bottom: 26px; width: 1.5px; background: rgba(147, 166, 184, .25); }
.wsm-rail__fill { position: absolute; z-index: 1; left: 9px; top: 10px; bottom: 26px; width: 1.5px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan-hi); transition: height .9s var(--ease); }
.wsm-rail__dot { position: absolute; z-index: 3; left: 4px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px rgba(0, 180, 255, .35), 0 0 16px 2px var(--cyan-hi); opacity: 0; transition: transform .9s var(--ease), opacity .3s; }
.wsm-rail__steps.is-live .wsm-rail__dot { opacity: 1; }
.wsm-rail__steps.is-reset .wsm-rail__dot, .wsm-rail__steps.is-reset .wsm-rail__fill { transition: none; }
.wsm-rail ol { z-index: 2; }
.wsm-rail li::before { transition: background-color .4s, border-color .4s, box-shadow .4s; }
.wsm-rail li b, .wsm-rail li small { transition: opacity .4s; }
.wsm-rail__steps.is-live li:not(.is-done):not(.is-wait) b, .wsm-rail__steps.is-live li:not(.is-done):not(.is-wait) small { opacity: .45; }
.wsm-rail li { position: relative; display: grid; padding: 0 0 14px 32px; line-height: 1.3; }
.wsm-rail li::before { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #0A1F33; border: 1.5px solid rgba(147, 166, 184, .45); box-sizing: border-box; }
.wsm-rail li.is-done::before { background: var(--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%2307111C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; border-color: var(--cyan); }
.wsm-rail li.is-wait::before { border-color: var(--cyan-hi); box-shadow: 0 0 0 4px rgba(0, 180, 255, .18), 0 0 14px var(--cyan-hi); }
.wsm-rail b { font-size: 13.5px; font-weight: 600; color: #F1F7FC; }
.wsm-rail small { font-size: 11.5px; color: var(--muted); }
.wsm-rail em { position: absolute; right: 0; top: 0; font-style: normal; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; color: var(--ink); background: var(--cyan); transition: opacity .4s, transform .4s var(--ease); }
.wsm-rail li:not(.is-done) em { opacity: 0; transform: scale(.7); }

/* 03 systems */
.wsm-window { position: absolute; left: 0; top: 0; width: 86%; height: 88%; z-index: 1; display: flex; flex-direction: column; padding: 14px 16px 16px; border-radius: 16px; background: linear-gradient(180deg, #0F2338, #08141F); border: 1px solid var(--edge); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .8), 0 0 50px -14px rgba(0, 180, 255, .25); }
.wsm-window__bar { margin-bottom: 12px; }
.wsm-window__body { flex: 1; display: grid; grid-template-columns: 22% 1fr; gap: 14px; min-height: 0; }
.wsm-side { display: flex; flex-direction: column; gap: 4px; padding-right: 12px; border-right: 1px solid rgba(147, 166, 184, .12); font-size: 12px; color: var(--muted); }
.wsm-hub { display: flex; align-items: center; gap: 8px; margin: 0 0 12px 4px; color: #fff; }
.wsm-hub svg { flex: 0 0 22px; width: 22px; height: 22px; fill: none; stroke: var(--cyan); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(0, 180, 255, .5)); }
.wsm-hub b { font-size: 12.5px; font-weight: 650; line-height: 1.15; }
.wsm-side span { padding: 7px 9px; border-radius: 8px; }
.wsm-side span.is-on { color: #fff; background: rgba(79, 184, 232, .14); box-shadow: inset 2px 0 0 var(--cyan); }
.wsm-dash { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.wsm-dash__h { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: #F1F7FC; }
.wsm-dash__h span { font-size: 11px; font-weight: 500; color: var(--muted); }
.wsm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wsm-kpis div { padding: 10px 12px; border-radius: 10px; background: rgba(147, 166, 184, .07); border: 1px solid rgba(147, 166, 184, .12); }
.wsm-kpis div.is-hi { border-color: rgba(79, 184, 232, .5); box-shadow: 0 0 18px -6px rgba(0, 180, 255, .55); }
.wsm-kpis small { display: block; font-size: 10.5px; color: var(--muted); }
.wsm-kpis b { font-size: 22px; font-weight: 600; font-stretch: 108%; color: #fff; }
.wsm-dash__row { flex: 1; display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; min-height: 0; }
.wsm-cols { display: flex; align-items: flex-end; gap: 6px; padding: 10px; border-radius: 10px; background: rgba(147, 166, 184, .05); }
.wsm-cols span { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--cyan), rgba(79, 184, 232, .15)); transform-origin: bottom; }
.wsm-table { margin: 0; padding: 0; list-style: none; font-size: 11.5px; }
.wsm-table li { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid rgba(147, 166, 184, .1); color: #B8C7D5; }
.wsm-table em { font-style: normal; font-size: 10px; padding: 2px 8px; border-radius: 999px; background: rgba(147, 166, 184, .14); color: #CFDCE7; }
.wsm-table em.is-ok { background: rgba(79, 184, 232, .14); color: #A6E2FA; }
.wsm-table em.is-wait { background: var(--cyan); color: var(--ink); }
.wsm-int { right: 0; bottom: 0; width: 38%; z-index: 2; }
.wsm-int ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wsm-int li { position: relative; padding: 9px 10px 9px 26px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: #E3EEF7; border: 1px solid rgba(147, 166, 184, .16); }
.wsm-int li::before { content: ""; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: #5EE0A0; box-shadow: 0 0 8px #5EE0A0; }

/* =====================================================================
   P4 INDUSTRIES ×8
   ===================================================================== */
.wsm-ind { position: relative; overflow: hidden; background: radial-gradient(70% 50% at 50% 100%, rgba(0, 180, 255, .08), transparent 70%), var(--ink); padding: clamp(40px, 5vw, 72px) 0 calc(var(--sec) + 24px); }
.wsm-ind__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 40px; align-items: end; }
.wsm-ind__head > p { color: var(--muted); max-width: 30em; }
.wsm-ind__grid { margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.wsm-card:nth-child(even) { margin-top: clamp(28px, 3.4vw, 56px); }
.wsm-card:nth-child(n+5) { margin-top: calc(clamp(28px, 3.4vw, 56px) * -1 + clamp(14px, 1.6vw, 22px)); }
.wsm-card:nth-child(n+5):nth-child(even) { margin-top: clamp(14px, 1.6vw, 22px); }
.wsm-card__link { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; isolation: isolate; text-decoration: none; background: var(--harbour); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); transition: box-shadow .45s var(--ease), transform .45s var(--ease); }
.wsm-card__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; transition: transform 1.1s var(--ease); }
.wsm-card__img { position: absolute; left: 0; top: -9%; width: 100%; height: 118% !important; object-fit: cover; filter: grayscale(.1) saturate(.95) contrast(1.04) brightness(.92); }
.wsm-card__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #0B3557; mix-blend-mode: color; opacity: .22; }
.wsm-card__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(7, 17, 28, .28) 0%, rgba(7, 17, 28, 0) 22%, rgba(7, 17, 28, 0) 42%, rgba(7, 17, 28, .72) 64%, rgba(7, 17, 28, .95) 100%), linear-gradient(140deg, rgba(0, 150, 230, .14) 0%, transparent 40%); }
.wsm-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(147, 166, 184, .16); transition: box-shadow .45s var(--ease); pointer-events: none; }
.wsm-card__num { position: absolute; left: 20px; top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: rgba(234, 241, 247, .75); }
.wsm-card__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 20px 22px; }
.wsm-card__title { display: block; font-size: clamp(17px, 1.4vw, 21px); font-weight: 620; font-stretch: 106%; letter-spacing: -.01em; line-height: 1.18; color: #fff; text-wrap: balance; }
.wsm-card__desc { display: block; margin-top: 8px; font-size: 14px; color: #C8D6E2; }
.wsm-card__arr { position: absolute; right: 16px; top: 14px; width: 30px; height: 30px; padding: 7px; border-radius: 50%; border: 1px solid rgba(234, 241, 247, .35); fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: background .35s, border-color .35s, transform .35s var(--ease); }
.wsm-card__link:hover, .wsm-card__link:focus-visible { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 40px -6px rgba(0, 180, 255, .45); }
.wsm-card__link:hover::after, .wsm-card__link:focus-visible::after { box-shadow: inset 0 0 0 1px rgba(79, 184, 232, .85), inset 0 -80px 90px -60px rgba(0, 180, 255, .45); }
.wsm-card__link:hover .wsm-card__media, .wsm-card__link:focus-visible .wsm-card__media { transform: scale(1.05); }
.wsm-card__link:hover .wsm-card__arr, .wsm-card__link:focus-visible .wsm-card__arr { background: var(--cyan); border-color: var(--cyan); stroke: var(--ink); transform: translateX(2px); }
.wsm-card__link:focus-visible { outline-offset: 4px; }
.wsm-ind__progress { display: none; }

/* =====================================================================
   Carried from v1: logos, testimonials, CTA, footer
   ===================================================================== */
/* ---------- logos (light band) ---------- */
.wsm-logos { background: var(--paper); color: var(--text-dark); padding: var(--sec) 0 clamp(64px, 8vw, 104px); overflow: hidden; }
.wsm-logos__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; align-items: end; }
.wsm-logos__head .wsm-h2 { max-width: 16ch; }
.wsm-logos__head p { color: var(--muted-dark); max-width: 32em; }
.wsm-marquee { margin-top: clamp(48px, 6vw, 80px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.wsm-marquee__track { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; gap: 20px; animation: wsm-marquee 60s linear infinite; }
.wsm-marquee:hover .wsm-marquee__track, .wsm-marquee:focus-within .wsm-marquee__track { animation-play-state: paused; }
@keyframes wsm-marquee { to { transform: translateX(calc(-50% - 10px)); } }
/* client decision 7 Oct: full colour, static, no hover effect, equal white tiles, faint border */
.wsm-logo { flex: 0 0 auto; display: grid; place-items: center; width: 200px; height: 96px; background: #fff; border: 1px solid #E1EAF2; border-radius: 10px; }
.wsm-logo img { display: block; width: auto; height: var(--h, 32px); max-width: var(--mw, 150px); object-fit: contain; }
.wsm-logos__side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.wsm-viewall { align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-dark); text-decoration: none; transition: color .25s; }
.wsm-viewall svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.wsm-viewall:hover, .wsm-viewall:focus-visible { color: var(--deep-cyan); }
.wsm-viewall:hover svg, .wsm-viewall:focus-visible svg { transform: translateX(4px); }
.wsm-logos__note { padding-top: 36px; font-size: 14px; color: #6B7F92; }

/* ---------- testimonials (dark) ---------- */
.wsm-quotes { position: relative; background: radial-gradient(60% 70% at 0% 100%, rgba(0, 180, 255, .10), transparent 70%), var(--ink); padding: var(--sec) 0; }
.wsm-quotes__head { max-width: 760px; }
.wsm-quotes__head p:last-child { margin-top: 22px; color: var(--muted); }
.wsm-carousel { margin-top: clamp(48px, 6vw, 72px); }
.wsm-carousel__viewport { overflow: hidden; }
.wsm-carousel__track { display: flex; margin: 0; padding: 0; list-style: none; gap: 24px; transition: transform .8s var(--ease); }
.wsm-quote { flex: 0 0 calc((100% - 48px) / 3); display: flex; flex-direction: column; justify-content: space-between; min-height: 300px; padding: 36px 32px; border-radius: 16px; background: linear-gradient(180deg, rgba(20, 44, 66, .7), rgba(12, 34, 54, .45)); border: 1px solid rgba(147, 166, 184, .14); }
.wsm-quote blockquote { margin: 0; }
.wsm-quote blockquote::before { content: "\201C"; display: block; font-size: 64px; line-height: .6; height: 30px; color: var(--cyan); font-weight: 700; }
.wsm-quote blockquote p { font-size: 18px; line-height: 1.55; color: #D7E3EE; }
.wsm-quote__who { margin-top: 28px; font-size: 15px; }
.wsm-quote__who b { display: block; font-weight: 650; }
.wsm-quote__who span { color: var(--muted); }
.wsm-carousel__controls { margin-top: 36px; display: flex; align-items: center; gap: 20px; }
.wsm-arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(147, 166, 184, .35); background: none; color: #fff; cursor: pointer; display: grid; place-items: center; transition: border-color .2s, background .2s; }
.wsm-arrow:hover { border-color: var(--cyan); background: rgba(79, 184, 232, .1); }
.wsm-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wsm-carousel__dots { display: flex; gap: 10px; }
.wsm-carousel__dots button { width: 28px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(147, 166, 184, .35); cursor: pointer; transition: background .3s, width .3s; }
.wsm-carousel__dots button[aria-current="true"] { background: var(--cyan); width: 44px; }

/* ---------- final CTA (bright) ---------- */
.wsm-cta { position: relative; overflow: hidden; background: linear-gradient(115deg, #0B5486 0%, #1683C4 45%, #4FB8E8 100%); padding: clamp(96px, 12vw, 168px) 0; color: #fff; }
.wsm-cta__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.wsm-cta__in { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.wsm-cta__title { font-size: clamp(42px, 5.6vw, 88px); font-weight: 650; font-stretch: 116%; line-height: .98; letter-spacing: -.035em; max-width: 13ch; }
.wsm-cta__side p { font-size: 18px; color: #E9F6FD; max-width: 28em; }
.wsm-cta__actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---------- footer ---------- */
.wsm-footer { background: var(--ink); padding: 88px 0 36px; font-size: 15px; }
.wsm-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1.3fr 1fr; gap: 40px; }
.wsm-footer__brand img { width: 150px; margin-bottom: 24px; }
.wsm-footer__brand p { color: var(--muted); max-width: 26em; }
.wsm-footer nav { display: flex; flex-direction: column; gap: 10px; }
.wsm-footer h3 { font-size: 14px; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: #fff; margin-bottom: 8px; }
.wsm-footer nav a { color: var(--muted); text-decoration: none; }
.wsm-footer nav a:hover { color: #fff; }
.wsm-footer__base { margin-top: 72px; padding-top: 24px; border-top: 1px solid rgba(147, 166, 184, .16); display: flex; justify-content: space-between; color: #5E7286; font-size: 14px; }
.wsm-footer__base a { color: inherit; }
.wsm-brand--footer { margin-bottom: 24px; }
.wsm-brand--footer img { width: 150px; margin-bottom: 0 !important; }
.wsm-brand--footer .wsm-brand__tag { font-size: 12.5px; }

/* ---------- motion start states (only while JS motion is active) ---------- */
/* Pass 4 · 1: start states stop applying once the JS releases the hero (.is-copy-in, then .is-ready) */
html.wsm-js .wsm-hero:not(.is-copy-in) .wsm-line > span { transform: translate(0, 105%); }
html.wsm-js .wsm-hero:not(.is-copy-in) .wsm-hero__in { opacity: 0; }
html.wsm-js .wsm-hero:not(.is-ready) :is(.wsm-chip, .wsm-out, .wsm-core, .wsm-engine__fan) { opacity: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .wsm-hero__layout { grid-template-columns: 1fr; }
  .wsm-hero__copy { max-width: 720px; }
  .wsm-engine { margin: 40px 0 0; height: clamp(400px, 52vw, 520px); }
  .wsm-d2a__head { grid-template-columns: 1fr; }
  .wsm-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1080px) {
  .wsm-cta__in, .wsm-logos__head { grid-template-columns: 1fr; }
  .wsm-quote { flex-basis: calc((100% - 24px) / 2); }
  .wsm-footer__grid { grid-template-columns: 1fr 1fr; }
  .wsm-pillar, .wsm-pillar--rev { grid-template-columns: 1fr; gap: 40px; }
  .wsm-pillar--rev .wsm-pillar__copy { order: 0; }
  .wsm-pillar__copy { max-width: 640px; }
  .wsm-ind__head { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .wsm-journey { grid-template-columns: 1fr; }
  .wsm-journey__stage { position: relative; top: 0; max-width: 460px; }
  .wsm-step:nth-child(n) { margin-left: 0; }
}
@media (max-width: 860px) {
  .wsm-nav { position: fixed; inset: 72px 0 auto; flex-direction: column; align-items: flex-start; gap: 0; padding: 12px var(--gut) 28px; background: rgba(7, 17, 28, .97); border-bottom: 1px solid rgba(147, 166, 184, .16); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s var(--ease), visibility .25s; }
  .wsm-nav a:not(.wsm-btn) { padding: 14px 0; font-size: 18px; width: 100%; color: var(--text); }
  .wsm-nav .wsm-nav__cta { margin-top: 14px; }
  .wsm-header.is-open .wsm-nav { opacity: 1; visibility: visible; transform: none; }
  .wsm-header.is-open { background: rgba(7, 17, 28, .97); }
  .wsm-header__in, .wsm-header.is-solid .wsm-header__in { height: 72px; }
  .wsm-menu { display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; background: none; border: 0; color: #fff; cursor: pointer; }
  .wsm-menu__bars, .wsm-menu__bars::before, .wsm-menu__bars::after { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; transition: transform .25s var(--ease), opacity .2s; }
  .wsm-menu__bars { position: relative; }
  .wsm-menu__bars::before, .wsm-menu__bars::after { content: ""; position: absolute; left: 0; }
  .wsm-menu__bars::before { top: -7px; } .wsm-menu__bars::after { top: 7px; }
  .wsm-header.is-open .wsm-menu__bars { background: transparent; }
  .wsm-header.is-open .wsm-menu__bars::before { transform: translateY(7px) rotate(45deg); }
  .wsm-header.is-open .wsm-menu__bars::after { transform: translateY(-7px) rotate(-45deg); }
  .wsm-brand img { width: 88px; }
  .wsm-brand__tag { font-size: 10px; }

  .wsm-quote { flex-basis: 100%; min-height: 0; padding: 30px 24px; }
  .wsm-carousel__controls { gap: 12px; }
  .wsm-carousel__dots { gap: 6px; }
  .wsm-carousel__dots button { width: 16px; }
  .wsm-carousel__dots button[aria-current="true"] { width: 28px; }
  .wsm-logo { width: 156px; height: 80px; }
  .wsm-logo img { height: calc(var(--h, 32px) * .82); max-width: calc(var(--mw, 150px) * .8); }
  .wsm-viewall { align-self: flex-start; }
  .wsm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .wsm-stats > :is(div:not([class]), .wsm-stats__item):nth-child(3) { padding-left: 0; }
  .wsm-stats > :is(div:not([class]), .wsm-stats__item):nth-child(3)::before { display: none; }
  .wsm-stats > :is(div:not([class]), .wsm-stats__item) + :is(div:not([class]), .wsm-stats__item):nth-child(3)::after { left: 0; }
}
@media (max-width: 760px) {
  /* hero engine turns vertical: inputs row → fibre → core → fibre → 2×2 outcomes */
  .wsm-engine { height: auto; margin: 36px 0 0; grid-template-columns: 1fr; grid-template-rows: auto 64px auto 56px auto; justify-items: center; }
  .wsm-engine__in { width: 100%; grid-template-rows: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .wsm-engine__out { width: 100%; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
  .wsm-engine__fan { height: 100%; }
  .wsm-engine__fan--in { -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), #000 70%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .45), #000 70%); }
  .wsm-fan-h { display: none; }
  .wsm-fan-v { display: inline; }
  .wsm-chip { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 12px 6px 10px; text-align: center; }
  .wsm-chip__t small { display: none; }
  .wsm-chip__t b { font-size: 11.5px; line-height: 1.2; }
  .wsm-core { width: 132px; margin: 6px 0; }
  .wsm-out { padding: 10px; }
  .wsm-out b { font-size: 12.5px; }
  .wsm-out__ic { width: 30px; height: 30px; }
  .wsm-hero__ctas .wsm-btn { width: 100%; justify-content: center; }
  .wsm-eyebrow { font-size: 11px; letter-spacing: .12em; gap: 10px; }
  .wsm-eyebrow::before { width: 18px; }

  .wsm-principles { grid-template-columns: 1fr; gap: 12px; }
  .wsm-principle { padding: 22px 22px 24px; }
  .wsm-principle__ic { margin-bottom: 14px; }

  .wsm-ui__stage { aspect-ratio: auto; display: flex; flex-direction: column; gap: 14px; }
  .wsm-panel, .wsm-window, .wsm-phone { position: relative; inset: auto; width: 100%; }
  .wsm-panel--graph, .wsm-flowlink { display: none; }
  .wsm-panel--main { width: 100%; }
  .wsm-panel--kpi, .wsm-rail, .wsm-int { width: 82%; align-self: flex-end; margin-top: -48px; }
  .wsm-phone { height: 470px; width: 88%; align-self: flex-start; }
  .wsm-window { height: auto; padding: 12px; }
  .wsm-window__body { grid-template-columns: 1fr; }
  .wsm-side { display: none; }
  .wsm-dash__row { grid-template-columns: 1fr; }
  .wsm-cols { height: 90px; }

  /* industries: horizontal scroll-snap row with next-card peek */
  .wsm-ind__wrap { padding: 0; }
  .wsm-ind__grid { display: flex; gap: 12px; margin-top: 36px; padding: 4px var(--gut) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); overscroll-behavior-x: contain; scrollbar-width: none; }
  .wsm-ind__grid::-webkit-scrollbar { display: none; }
  .wsm-card, .wsm-card:nth-child(n) { flex: 0 0 74%; margin-top: 0; scroll-snap-align: start; }
  .wsm-ind__progress { display: block; position: relative; height: 2px; margin: 22px var(--gut) 0; background: rgba(147, 166, 184, .2); border-radius: 2px; overflow: hidden; }
  .wsm-ind__progress span { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: var(--cyan); transform-origin: left; transform: scaleX(.125); }
}
@media (max-width: 600px) {
  .wsm-footer__grid { grid-template-columns: 1fr; }
  .wsm-footer__base { flex-direction: column; gap: 10px; }
  .wsm-lens__num { font-size: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .wsm-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .wsm-marquee__track [aria-hidden="true"] { display: none; }
  .wsm-marquee { -webkit-mask-image: none; mask-image: none; }
  .wsm-carousel__track, .wsm-card__link, .wsm-card__media { transition: none; }
  .wsm-core__orbit, .wsm-flowlink path { animation: none; }
  .wsm-pulses { display: none; }
}

/* ===== v5 (10 Oct): "Your data. Amplified." tagline, engine labels, From Data to Business Action head ===== */
.wsm-hero__tagline { margin-bottom: clamp(18px, 2vw, 26px); font-size: clamp(19px, 1.9vw, 30px); font-weight: 700; font-stretch: 112%; line-height: 1.1; letter-spacing: .12em; text-transform: uppercase; color: #F1F7FC; }
.wsm-hero__tagline .wsm-grad { filter: drop-shadow(0 0 18px rgba(0, 180, 255, .45)); }
.wsm-engine__label { position: absolute; z-index: 3; top: -6px; margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.wsm-engine__label--in { grid-row: 1; grid-column: 1; left: 2px; }
.wsm-engine__label--out { grid-row: 1; grid-column: 5; left: 2px; color: var(--cyan); text-shadow: 0 0 14px rgba(0, 180, 255, .5); }
.wsm-d2a__lead { font-size: clamp(18px, 1.5vw, 21px); font-weight: 560; line-height: 1.4; color: var(--text-dark); margin-bottom: 14px; }
@media (max-width: 760px) {
  .wsm-engine__label { top: -24px; }
  .wsm-engine__label--in { grid-column: 1; grid-row: 1; }
  .wsm-engine__label--out { grid-column: 1; grid-row: 5; }
}
/* hero → Intelligence Across Your Business: an illuminated edge instead of a flat seam */
.wsm-pillars::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(79, 184, 232, .55) 50%, transparent); box-shadow: 0 0 24px 2px rgba(0, 180, 255, .35); }
.wsm-pillars::after { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(1100px, 100%); height: 260px; transform: translateX(-50%); background: radial-gradient(50% 100% at 50% 0%, rgba(0, 180, 255, .14), transparent 70%); pointer-events: none; }
@media (max-width: 760px) { .wsm-engine__label--out { padding-right: 8px; background: var(--ink); } }

/* ===== v7 (14 Oct): locked hero CTAs, nav dropdowns, journey hold + mobile sequence, lower sections carried through ===== */
/* hero: tagline always one line; secondary CTA is a text link */
.wsm-hero__tagline { white-space: nowrap; font-size: min(clamp(19px, 1.9vw, 30px), 5.3cqi); }
.wsm-hero__ctas { gap: 14px 28px; }
.wsm-textlink { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--text); text-decoration: none; transition: color .25s; }
.wsm-textlink span { color: var(--cyan); transition: transform .3s var(--ease); }
.wsm-textlink:hover { color: #fff; }
.wsm-textlink:hover span, .wsm-textlink:focus-visible span { transform: translateX(4px); }
.wsm-textlink--mob { display: none; }

/* header dropdowns (JS sets .is-open + aria-expanded; hover on fine pointers, click/Enter, Esc closes) */
.wsm-dd { position: relative; }
.wsm-dd__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; background: none; border: 0; font: inherit; color: var(--muted); cursor: pointer; transition: color .2s; }
.wsm-dd__btn:hover, .wsm-dd.is-open .wsm-dd__btn { color: #fff; }
.wsm-dd__btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--ease); }
.wsm-dd.is-open .wsm-dd__btn svg { transform: rotate(180deg); }
.wsm-dd__panel { position: absolute; left: -16px; top: 100%; z-index: 5; min-width: 250px; margin: 12px 0 0; padding: 8px; list-style: none; border-radius: 14px; background: rgba(9, 22, 36, .94); border: 1px solid var(--edge); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75), 0 0 40px -12px rgba(0, 180, 255, .3); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; }
.wsm-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.wsm-dd.is-open .wsm-dd__panel { opacity: 1; visibility: visible; transform: none; }
.wsm-dd__panel--wide { min-width: 300px; }
.wsm-nav .wsm-dd__panel a { display: block; padding: 9px 12px; border-radius: 8px; color: #C9D6E2; font-size: 14.5px; line-height: 1.3; white-space: nowrap; }
.wsm-nav .wsm-dd__panel a:hover, .wsm-nav .wsm-dd__panel a:focus-visible { color: #fff; background: rgba(79, 184, 232, .1); }

/* anchors clear the fixed header */
.wsm-pillar, .wsm-page section[id] { scroll-margin-top: 72px; }

/* journey: neutral node; per-step snapshots replace the sticky lens when stacked */
.wsm-step__vis { display: none; }
.wsm-mini__links { fill: none; stroke: var(--cyan); stroke-opacity: .55; stroke-width: 2; }
.wsm-mini__glow { fill: rgba(0, 180, 255, .22); filter: blur(18px); }
@media (min-width: 1024px) {
  /* hold the pinned lens on "05 Improvement" for ~500px before it releases */
  .wsm-journey__steps { padding-bottom: 500px; }
}

/* ---------- logos: light band with depth ---------- */
.wsm-logos { position: relative; isolation: isolate; background: radial-gradient(55% 80% at 100% 0%, rgba(79, 184, 232, .16), transparent 65%), linear-gradient(180deg, #E6F0F8 0%, var(--paper) 55%); }
.wsm-logos::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(31, 120, 168, .16) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(60% 60% at 90% 10%, #000, transparent 75%); mask-image: radial-gradient(60% 60% at 90% 10%, #000, transparent 75%); pointer-events: none; }
.wsm-logo { box-shadow: 0 14px 30px -22px rgba(12, 34, 54, .35); }

/* ---------- testimonials: glass cards in the hero/pillar language ---------- */
.wsm-quotes { overflow: hidden; isolation: isolate; }
.wsm-quotes::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(79, 184, 232, .5) 50%, transparent); box-shadow: 0 0 24px 2px rgba(0, 180, 255, .3); }
.wsm-quote { position: relative; overflow: hidden; background: var(--glass); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 34px 70px -34px rgba(0, 0, 0, .8), 0 0 40px -14px rgba(0, 180, 255, .18); }
.wsm-quote::after { content: ""; position: absolute; left: 32px; right: 32px; top: 0; height: 2px; background: linear-gradient(90deg, var(--cyan-hi), var(--cyan), transparent); }
.wsm-viewall--dark { margin-left: auto; color: var(--text); }
.wsm-viewall--dark svg { stroke: var(--cyan); }
.wsm-viewall--dark:hover, .wsm-viewall--dark:focus-visible { color: #fff; }

/* ---------- final CTA: dark, one cyan button ---------- */
.wsm-cta { isolation: isolate; background: radial-gradient(60% 90% at 78% 55%, rgba(0, 180, 255, .2), transparent 70%), radial-gradient(90% 80% at 50% 100%, #0D2740 0%, var(--ink) 70%); }
.wsm-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(79, 184, 232, .55) 50%, transparent); box-shadow: 0 0 24px 2px rgba(0, 180, 255, .3); }
.wsm-cta__lines { stroke: var(--cyan); }
.wsm-cta__side p { color: #B8C7D5; }

/* ---------- R10 mobile rhythm: one spacing scale ---------- */
@media (max-width: 900px) {
  .wsm-journey__stage { display: none; }
  .wsm-step__vis { display: block; width: 144px; aspect-ratio: 1; margin: 2px 0 16px; padding: 8px; border-radius: 22px; background: radial-gradient(120% 90% at 50% 42%, #10314F 0%, #0A1C2E 45%, var(--ink) 80%); box-shadow: 0 24px 40px -24px rgba(7, 17, 28, .7), 0 0 0 1px rgba(79, 184, 232, .28) inset, 0 0 30px -12px rgba(0, 180, 255, .45); }
  .wsm-step__vis svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .wsm-step { margin-bottom: 56px; }
}
@media (max-width: 767px) {
  :root { --sec: 72px; }
  .wsm-textlink--desk { display: none; }
  .wsm-textlink--mob { display: inline-flex; justify-self: start; margin-top: 30px; }
  .wsm-hero { padding-bottom: 48px; }
  .wsm-stats { margin-top: 48px; }
  .wsm-pillar { margin-top: 64px; }
  .wsm-pillars { padding-bottom: var(--sec); }
  .wsm-d2a { padding-top: 112px; }
  .wsm-journey { margin-top: 64px; }
  .wsm-ind { padding-bottom: var(--sec); }
  .wsm-logos { padding-bottom: 56px; }
  .wsm-cta { padding: 80px 0; }
  .wsm-footer { padding-top: 64px; }
  .wsm-footer__base { margin-top: 48px; }
  .wsm-carousel__controls { flex-wrap: wrap; }
}
@media (max-width: 860px) {
  .wsm-nav { max-height: calc(100vh - 72px); overflow-y: auto; background: var(--ink); }
  .wsm-dd { width: 100%; }
  .wsm-dd__btn { width: 100%; justify-content: space-between; padding: 14px 0; font-size: 18px; color: var(--text); }
  .wsm-dd__btn svg { width: 16px; height: 16px; }
  .wsm-dd__panel, .wsm-dd__panel--wide { position: static; display: none; min-width: 0; margin: 0; padding: 0 0 10px 14px; border: 0; border-left: 1px solid rgba(79, 184, 232, .3); border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .wsm-dd.is-open .wsm-dd__panel { display: block; }
  .wsm-nav .wsm-dd__panel a { padding: 9px 0; font-size: 16px; color: var(--muted); white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .wsm-core__halo { animation: none; }
  .wsm-rail__fill, .wsm-rail__dot { transition: none; }
}

/* ---------- R6: industry cards: title block at the same height on every card, equal heights per row ---------- */
.wsm-card { display: flex; container-type: inline-size; }
/* min-height in cqw keeps the 4:5 shape but, unlike aspect-ratio, still lets flex/grid stretch every card to the tallest */
.wsm-card__link { flex: 1; display: flex; flex-direction: column; aspect-ratio: auto; min-height: 125cqw; }
@media (min-width: 1081px) { .wsm-ind__grid { align-items: start; } }
/* margin-top % is of the card WIDTH, so every title starts at the same point whatever the description length */
.wsm-card__body { position: relative; inset: auto; margin-top: 64%; padding: 0 20px 22px; }
.wsm-card__title { min-height: 2.36em; display: flex; align-items: flex-end; }
@media (min-width: 761px) and (max-width: 1080px) {
  .wsm-ind__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wsm-ind__grid .wsm-card:nth-child(n) { margin-top: 0; }
  .wsm-card__link { min-height: 80cqw; }
  .wsm-card__body { margin-top: 42%; }
}
@media (max-width: 760px) {
  .wsm-ind__grid { align-items: stretch; }
  .wsm-ind__grid .wsm-card:nth-child(n) { margin-top: 0; } /* the desktop stagger rule (nth-child(n+5):nth-child(even)) leaked into cards 6 and 8 */
  .wsm-card__body { margin-top: 58%; padding: 0 18px 20px; }
}

/* ===== v8 (15 Oct): Stage 2 Elementor adapter + Pass 3 (header, hero) ===== */
/* Elementor Free containers/widgets carry the wsm- classes. Neutralise Elementor's container defaults
   (padding, gap, flex) so the wsm- rules below own the layout; this file loads after Elementor's CSS. */
.wsm-page .e-con { --padding-top: 0px; --padding-right: 0px; --padding-bottom: 0px; --padding-left: 0px; --margin-top: 0px; --margin-bottom: 0px; --gap: 0px; --row-gap: 0px; --column-gap: 0px; --min-height: 0px; --display: block; --width: 100%; }
.wsm-page .e-con.wsm-hero__ctas { --display: flex; --flex-direction: row; --flex-wrap: wrap; --align-items: center; --row-gap: 14px; --column-gap: 28px; }
/* zero specificity: the wsm- classes below set the real spacing */
:where(.wsm-page .elementor-widget) { margin: 0; }
.wsm-page .elementor-heading-title { margin: 0; padding: 0; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-wrap: inherit; white-space: inherit; }
.wsm-page .elementor-widget-text-editor p { margin: 0; }
.wsm-page .elementor-widget-text-editor p + p { margin-top: 1em; }
/* the approved hero H1 renders with the global h1 values (they outrank .wsm-hero__title in the coded page) */
.wsm-page .wsm-hero__title .elementor-heading-title { font-weight: 600; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.06; }
/* Elementor resets figure margins inside widgets (.elementor .elementor-widget figure); restore the engine's bleed */
.wsm-page .elementor .elementor-widget figure.wsm-engine { margin: 0 calc(var(--gut) * -.5) 0 0; }
@media (max-width: 1180px) { .wsm-page .elementor .elementor-widget figure.wsm-engine { margin: 40px 0 0; } }
@media (max-width: 760px) { .wsm-page .elementor .elementor-widget figure.wsm-engine { margin: 36px 0 0; } }
/* decorative background layer (an HTML widget) fills its section */
.wsm-page .wsm-el-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Button widget → WSM primary button (hero + final CTA share this class and the ar-magnetic hover) */
.wsm-page .wsm-el-btn .elementor-button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; min-height: 52px; padding: 0 26px; border-radius: 999px; background: var(--cyan); color: var(--ink); font-family: var(--f); font-weight: 600; font-size: 16px; line-height: 1.2; text-decoration: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15) inset, 0 10px 30px -8px rgba(0, 180, 255, .55); transition: background .25s var(--ease), box-shadow .25s var(--ease); }
.wsm-page .wsm-el-btn .elementor-button:hover, .wsm-page .wsm-el-btn .elementor-button:focus-visible { background: #7BCDF2; color: var(--ink); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) inset, 0 14px 40px -8px rgba(0, 180, 255, .75); }
.wsm-page .wsm-el-btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 10px; }
.wsm-page .wsm-el-btn .elementor-button-text::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 10px; vertical-align: -3px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h11M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .3s var(--ease); }
.wsm-page .wsm-el-btn .elementor-button:hover .elementor-button-text::after { transform: translateX(3px); }
/* Button widget → secondary text link ("Explore Capabilities →"): no padding, border or fill */
.wsm-page .wsm-el-textlink .elementor-button { display: inline-flex; align-items: center; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); font-family: var(--f); font-size: 16px; font-weight: 600; line-height: 1.6; text-decoration: none; transition: color .25s; }
.wsm-page .wsm-el-textlink .elementor-button:hover, .wsm-page .wsm-el-textlink .elementor-button:focus-visible { color: #fff; background: none; }
.wsm-page .wsm-el-textlink .elementor-button-text::after { content: "→" / ""; display: inline-block; margin-left: 8px; color: var(--cyan); transition: transform .3s var(--ease); }
.wsm-page .wsm-el-textlink .elementor-button:hover .elementor-button-text::after, .wsm-page .wsm-el-textlink .elementor-button:focus-visible .elementor-button-text::after { transform: translateX(4px); }
@media (max-width: 760px) {
  .wsm-page .wsm-hero__ctas .wsm-el-btn, .wsm-page .wsm-hero__ctas .wsm-el-btn .elementor-button { width: 100%; }
}

/* Pass 3 · 1. Header: restrained WSM cyan for hover / open / current, a thin indicator, clear keyboard focus */
.wsm-nav > a:not(.wsm-btn), .wsm-dd__btn { position: relative; }
.wsm-nav > a:not(.wsm-btn)::after, .wsm-dd__btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 1.5px; border-radius: 1px; background: var(--cyan); box-shadow: 0 0 8px rgba(0, 180, 255, .5); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.wsm-dd__btn::after { right: 18px; } /* under the label, not the caret */
.wsm-nav > a:not(.wsm-btn):hover, .wsm-nav > a.is-current, .wsm-dd__btn:hover, .wsm-dd.is-open .wsm-dd__btn, .wsm-dd.is-current .wsm-dd__btn { color: #8FD9FB; }
.wsm-nav > a:not(.wsm-btn):hover::after, .wsm-nav > a.is-current::after, .wsm-dd__btn:hover::after, .wsm-dd.is-open .wsm-dd__btn::after, .wsm-dd.is-current .wsm-dd__btn::after { transform: scaleX(1); }
.wsm-dd.is-open .wsm-dd__btn svg { stroke: var(--cyan); }
.wsm-nav .wsm-dd__panel a { position: relative; transition: color .2s, background-color .2s; }
.wsm-nav .wsm-dd__panel a::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--cyan); box-shadow: 0 0 8px rgba(0, 180, 255, .6); opacity: 0; transform: scaleY(.4); transition: opacity .2s, transform .25s var(--ease); }
.wsm-nav .wsm-dd__panel a:hover, .wsm-nav .wsm-dd__panel a:focus-visible, .wsm-nav .wsm-dd__panel a.is-current { color: #8FD9FB; background: rgba(79, 184, 232, .06); }
.wsm-nav .wsm-dd__panel a:hover::before, .wsm-nav .wsm-dd__panel a:focus-visible::before, .wsm-nav .wsm-dd__panel a.is-current::before { opacity: 1; transform: none; }
.wsm-nav .wsm-dd__panel a:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px rgba(79, 184, 232, .75); }
.wsm-nav > a:not(.wsm-btn):focus-visible, .wsm-dd__btn:focus-visible { color: #8FD9FB; outline: 2px solid var(--cyan-hi); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 860px) {
  .wsm-nav > a:not(.wsm-btn)::after, .wsm-dd__btn::after, .wsm-nav .wsm-dd__panel a::before { display: none; }
  .wsm-nav .wsm-dd__panel a:hover, .wsm-nav .wsm-dd__panel a.is-current { background: none; }
}

/* Pass 3 · 2. Hero core: rings a step more visible (the pulse keeps its 4.8s speed) */
.wsm-core__orbit { stroke-opacity: .78; stroke-width: 1.5; }
.wsm-core__orbit--b { stroke-opacity: .5; }
.wsm-core__ring { stroke-opacity: .38; stroke-width: 1.3; }
.wsm-core__halo { background: radial-gradient(closest-side, rgba(0, 180, 255, .58), rgba(0, 180, 255, .14) 45%, transparent 75%); }

/* Pass 3 · 10. Hero mobile: stronger core, labels reveal with the sequence, link right after the visual, more air before the proof points */
html.wsm-js .wsm-hero:not(.is-ready) :is(.wsm-engine__label, .wsm-hero__after) { opacity: 0; }
@media (max-width: 760px) {
  .wsm-core__orbit { stroke-opacity: .92; stroke-width: 1.7; }
  .wsm-core__orbit--b { stroke-opacity: .64; }
  .wsm-core__ring { stroke-opacity: .52; stroke-width: 1.5; }
  .wsm-core__halo { inset: -85%; background: radial-gradient(closest-side, rgba(0, 180, 255, .68), rgba(0, 180, 255, .18) 45%, transparent 75%); }
  .wsm-core__box { box-shadow: 0 0 0 6px rgba(79, 184, 232, .13), 0 0 44px 6px rgba(0, 180, 255, .72), inset 0 0 26px rgba(0, 180, 255, .56); }
}
@media (max-width: 767px) {
  .wsm-hero__layout > .wsm-textlink--mob { margin-top: 26px; }
  .wsm-stats { margin-top: 76px; }
}

/* ===== v9 (17 Oct): Pass 3 · 5 + 11  From Data to Business Action, "dark journey" (Elementor, .wsm-d2b) =====
   Reuses the Hero's visual vocabulary, values copied from P1 HERO above, so the section reads at the same standard:
   - bg        radial #0D2740 → ink (as .wsm-hero), Hero grid floor (1px rgba(79,184,232,.16) @72px, perspective 520px rotateX 64deg),
               Hero orbs (.wsm-hero__orb--a/--b, reused as-is)
   - strands   #4FB8E8 1px non-scaling, opacity .16–.44 (.wsm-strands); pulses #DDF5FF dash-travel (.wsm-pulses, wsm-pulse keyframes)
   - rings     dotted orbit "1 7" .78/1.5px spin 70s, dash-dot "40 14 4 14" .5 spin 46s reverse, solid .38/1.3px; halo breathe 4.8s
   - core      radial #16466C → #0A1F33, 1px rgba(143,217,251,.65), 0 0 0 7px rgba(79,184,232,.09), 0 0 56px 4px rgba(0,180,255,.6)
   - glass     var(--glass) + 1px var(--edge), radius 14px, blur 8px, 0 0 26px -6px rgba(0,180,255,.18) (.wsm-chip); icon tile .wsm-chip__ic
   - accent    2px #00B4FF bar + 0 0 12px glow (.wsm-stats); heading cyan via .wsm-grad; easing var(--ease) */
.wsm-d2b { --tile: clamp(128px, 12.2vw, 176px); position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: clamp(112px, 10vw, 150px) 0 clamp(96px, 9vw, 128px); background: radial-gradient(80% 60% at 30% 70%, #0D2740 0%, var(--ink) 64%); color: var(--text); }
.wsm-d2b__bg { position: absolute; inset: 0; overflow: hidden; }
.wsm-d2b__floor { position: absolute; left: -30%; right: -30%; bottom: -6%; height: 64%; background-image: linear-gradient(rgba(79, 184, 232, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 184, 232, .16) 1px, transparent 1px); background-size: 72px 72px; transform: perspective(520px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: radial-gradient(60% 90% at 50% 100%, #000 0%, transparent 75%); mask-image: radial-gradient(60% 90% at 50% 100%, #000 0%, transparent 75%); opacity: .8; }
.wsm-d2b__orb-a { right: auto; left: 30%; top: 38%; }
.wsm-d2b__orb-b { left: auto; right: -14%; bottom: auto; top: -10%; }

.wsm-page .wsm-d2b__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 72px; align-items: end; }
.wsm-d2b .wsm-eyebrow { margin-bottom: 18px; }
.wsm-d2b__title { font-size: clamp(34px, 4.3vw, 64px); font-weight: 600; font-stretch: 108%; line-height: 1.02; letter-spacing: -.03em; max-width: 14ch; }
.wsm-d2b__side { padding-bottom: 6px; }
.wsm-d2b__motto { font-size: clamp(17px, 1.36vw, 19.5px); font-weight: 600; font-stretch: 106%; letter-spacing: -.01em; line-height: 1.4; color: #F1F7FC; }
.wsm-d2b__motto .elementor-heading-title { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.wsm-d2b__motto span { white-space: nowrap; }
.wsm-d2b__motto span:nth-child(2) { color: #8FD9FB; }
.wsm-d2b__motto span + span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 12px 3px 0; border-radius: 50%; background: var(--cyan-hi); box-shadow: 0 0 8px var(--cyan-hi); vertical-align: middle; }
.wsm-d2b__intro { margin-top: 14px; font-size: 16.5px; line-height: 1.6; color: #B8C7D5; max-width: 31em; }

.wsm-page .wsm-d2b__principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.wsm-page .wsm-d2b__principle { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 18px 20px; border-radius: 14px; background: var(--glass); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 34px -12px rgba(0, 0, 0, .6), 0 0 26px -6px rgba(0, 180, 255, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wsm-d2b__principle::after { content: ""; position: absolute; left: 18px; top: -1px; width: 40px; height: 2px; background: var(--cyan-hi); box-shadow: 0 0 12px var(--cyan-hi); }
.wsm-page .wsm-d2b__pic { flex: 0 0 auto; }
.wsm-page .wsm-d2b__ptext { flex: 1 1 auto; min-width: 0; }
.wsm-d2b__ph { font-size: 16.5px; font-weight: 620; line-height: 1.25; color: #F1F7FC; margin-bottom: 6px; }
.wsm-d2b__pp { font-size: 14px; line-height: 1.5; color: var(--muted); }

.wsm-page .wsm-d2b__journey { position: relative; margin-top: clamp(64px, 6vw, 84px); }
.wsm-d2b__label { font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: center; }
.wsm-page .wsm-d2b__steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
/* the line sits behind the nodes: tile + node margin (40px) + half the node (11px), centred on a 120px band */
.wsm-page .wsm-d2b__line { position: absolute; left: 0; right: 0; top: calc(var(--tile) - 9px); height: 120px; pointer-events: none; }
.wsm-d2b__fibre { display: block; width: 100%; height: 100%; overflow: visible; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wsm-d2b__base path { stroke-opacity: calc(var(--o) * .55); }
.wsm-d2b__lit { clip-path: inset(0 calc(100% - var(--p, 1) * 100%) 0 0); transition: clip-path .6s var(--ease); }
.wsm-d2b__lit path { stroke: #8FD9FB; stroke-opacity: calc(var(--o) * 1.6); }
.wsm-d2b__pulses path { opacity: .9; stroke-width: 1.6; stroke-dasharray: 2.2 97.8; animation: wsm-pulse 9s linear calc(var(--k) * -9s) infinite; }
.wsm-d2b.is-paused .wsm-d2b__pulses path, .wsm-d2b.is-paused .wsm-end__orbit, .wsm-d2b.is-paused .wsm-end__halo, .wsm-d2b.is-paused .wsm-end__pulse { animation-play-state: paused; }

.wsm-page .wsm-d2b__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wsm-page .wsm-d2b__vis { display: flex; flex-direction: column; align-items: center; }
.wsm-d2b__tile { width: var(--tile); aspect-ratio: 1; padding: 12px; border-radius: 26px; background: radial-gradient(120% 90% at 50% 42%, #10314F 0%, #0A1C2E 45%, var(--ink) 80%); border: 1px solid rgba(79, 184, 232, .3); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 24px 44px -22px rgba(0, 0, 0, .8), 0 0 30px -10px rgba(0, 180, 255, .4); transition: opacity .7s var(--ease), transform .7s var(--ease), box-shadow .7s var(--ease); }
.wsm-d2b__tile svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wsm-d2b__tile .wsm-mini__links, .wsm-d2b__tile .wsm-mini__glow, .wsm-d2b__tile .wsm-lens__core { transition: opacity .9s var(--ease) .25s; }
.wsm-d2b__tile .wsm-lens__dots circle { transform-box: fill-box; transform-origin: center; transition: transform .6s var(--ease), opacity .6s; }
.wsm-d2b__tile .wsm-lens__dots circle:nth-child(3n+1) { transition-delay: .08s; }
.wsm-d2b__tile .wsm-lens__dots circle:nth-child(3n+2) { transition-delay: .18s; }
.wsm-d2b__node { position: relative; z-index: 1; width: 22px; height: 22px; margin: 40px 0 22px; border-radius: 50%; background: #0A1F33; box-shadow: 0 0 0 1.5px rgba(143, 217, 251, .5), 0 0 0 7px rgba(79, 184, 232, .06); transition: box-shadow .6s var(--ease); }
.wsm-d2b__node::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #5D7387; transition: background .5s, box-shadow .5s; }
.wsm-d2b__num { font-size: 12.5px; font-weight: 600; letter-spacing: .14em; color: #5D7387; transition: color .5s; }
.wsm-d2b__num i { font-style: normal; color: #5D7387; }
.wsm-d2b__name { margin: 6px 0 8px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 620; letter-spacing: -.02em; line-height: 1.2; color: #F1F7FC; }
.wsm-d2b__desc { font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 22ch; }
/* lit stage */
.wsm-d2b__step.is-on .wsm-d2b__node { box-shadow: 0 0 0 1.5px #8FD9FB, 0 0 0 7px rgba(79, 184, 232, .12), 0 0 22px rgba(0, 180, 255, .7); }
.wsm-d2b__step.is-on .wsm-d2b__node::after { background: #EAF9FF; box-shadow: 0 0 8px #00B4FF; }
.wsm-d2b__step.is-on .wsm-d2b__num { color: var(--cyan); }
/* 05 end state */
.wsm-d2b__step.is-end .wsm-d2b__tile { padding: 4px; border-color: rgba(143, 217, 251, .65); background: radial-gradient(circle at 50% 30%, #16466C, #0A1F33 72%); box-shadow: 0 0 0 7px rgba(79, 184, 232, .09), 0 0 56px 4px rgba(0, 180, 255, .45), inset 0 0 30px rgba(0, 180, 255, .35); }
.wsm-d2b__step.is-end .wsm-d2b__node { width: 26px; height: 26px; margin: 38px 0 20px; }
.wsm-d2b__step.is-end.is-on .wsm-d2b__node { box-shadow: 0 0 0 1.5px #DDF5FF, 0 0 0 9px rgba(0, 180, 255, .2), 0 0 30px #00B4FF; }
.wsm-end { display: block; width: 100%; height: auto; overflow: visible; fill: none; }
.wsm-end__halo { animation: wsm-breathe 4.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.wsm-end__orbit { stroke: var(--cyan); stroke-opacity: .78; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: wsm-spin 70s linear infinite; }
.wsm-end__orbit--b { stroke-opacity: .5; animation-duration: 46s; animation-direction: reverse; }
.wsm-end__ring { stroke: var(--cyan); stroke-opacity: .38; stroke-width: 1.3; }
.wsm-end__loop { stroke: #8FD9FB; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(0, 180, 255, .8)); }
.wsm-end__loop--b { stroke-opacity: .55; }
.wsm-end__pulse { stroke: #DDF5FF; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 7 93; animation: wsm-pulse 3.6s linear infinite; }
.wsm-end__node { fill: #EAF9FF; filter: drop-shadow(0 0 5px #00B4FF) drop-shadow(0 0 14px #00B4FF); }

/* start states, only while JS motion runs: unlit stages wait dimmed, their network still scattered */
html.wsm-js .wsm-d2b__step:not(.is-on) .wsm-d2b__tile { opacity: .38; transform: scale(.94); box-shadow: none; }
html.wsm-js .wsm-d2b__step:not(.is-on) .wsm-mini__links, html.wsm-js .wsm-d2b__step:not(.is-on) .wsm-mini__glow, html.wsm-js .wsm-d2b__step:not(.is-on) .wsm-d2b__tile .wsm-lens__core { opacity: 0; }
html.wsm-js .wsm-d2b__step:not(.is-on) .wsm-d2b__tile .wsm-lens__dots circle { transform: scale(.4); opacity: .5; }
html.wsm-js .wsm-d2b__step:not(.is-on) .wsm-end__loop, html.wsm-js .wsm-d2b__step:not(.is-on) .wsm-end__pulse { opacity: 0; }
.wsm-end__loop, .wsm-end__pulse { transition: opacity .8s var(--ease) .3s; }

@media (max-width: 1180px) {
  .wsm-page .wsm-d2b__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wsm-page .wsm-d2b__head { grid-template-columns: 1fr; }
  .wsm-d2b__desc { font-size: 14px; }
}

/* ≤900: one block per stage, in order. Visual first (it animates in as the block enters), then "0X / 05", title and description,
   so visual and copy can never disagree. No pinning; only opacity/transform change, so nothing shifts on iOS address-bar resizes. */
@media (max-width: 900px) {
  .wsm-d2b { --tile: min(200px, 56vw); }
  .wsm-d2b__label { text-align: left; }
  .wsm-page .wsm-d2b__steps { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .wsm-page .wsm-d2b__line { display: none; }
  .wsm-page .wsm-d2b__step { padding: 26px 20px 30px; border-radius: 22px; background: linear-gradient(180deg, rgba(20, 46, 70, .5), rgba(9, 24, 39, .35)); border: 1px solid rgba(79, 184, 232, .16); }
  .wsm-page .wsm-d2b__step + .wsm-d2b__step { margin-top: 44px; }
  /* a short strand joins one block to the next */
  .wsm-page .wsm-d2b__step + .wsm-d2b__step::before { content: ""; position: absolute; left: 50%; top: -45px; width: 1.5px; height: 44px; transform: translateX(-50%); background: linear-gradient(180deg, rgba(79, 184, 232, .15), rgba(79, 184, 232, .7)); box-shadow: 0 0 8px rgba(0, 180, 255, .5); }
  .wsm-d2b__node { display: none; }
  .wsm-d2b__num { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 22px; }
  /* progress: five segments, this stage's one in cyan */
  .wsm-d2b__num .elementor-heading-title::after { content: ""; display: block; width: 120px; height: 3px; margin: 10px auto 0; border-radius: 2px; background: linear-gradient(var(--cyan-hi), var(--cyan-hi)) calc(var(--i, 0) * 25%) 0 / 20% 100% no-repeat, repeating-linear-gradient(90deg, rgba(147, 166, 184, .28) 0 20px, transparent 20px 25px); box-shadow: none; transition: filter .5s; }
  .wsm-d2b__step:nth-child(3) { --i: 1; } .wsm-d2b__step:nth-child(4) { --i: 2; } .wsm-d2b__step:nth-child(5) { --i: 3; } .wsm-d2b__step:nth-child(6) { --i: 4; }
  .wsm-d2b__step.is-on .wsm-d2b__num .elementor-heading-title::after { filter: drop-shadow(0 0 5px rgba(0, 180, 255, .8)); }
  .wsm-d2b__name { font-size: 22px; }
  .wsm-d2b__desc { font-size: 16px; max-width: 30ch; }
  .wsm-d2b__step.is-end { background: radial-gradient(120% 90% at 50% 0%, rgba(22, 70, 108, .55), rgba(9, 24, 39, .4)); border-color: rgba(143, 217, 251, .4); }
}
@media (max-width: 767px) {
  .wsm-page .wsm-d2b__principles { grid-template-columns: 1fr; gap: 10px; margin-top: 36px; }
  .wsm-d2b__title { font-size: clamp(34px, 9.4vw, 44px); }
  .wsm-d2b__motto .elementor-heading-title { flex-direction: column; gap: 2px; }
  .wsm-d2b__motto span + span::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wsm-d2b__pulses path, .wsm-end__halo, .wsm-end__orbit, .wsm-end__pulse { animation: none; }
}

/* ===== Pass 3 · 3. Section transitions: no hard horizontal cuts between dark sections =====
   Every dark section now meets its neighbour on the same ink edge, and the old 1px illuminated seams become soft
   ~140px glows that fade in from the boundary (same cyan as the Hero orbs), so there is no line to see. */
.wsm-pillars::before { top: 0; height: 160px; background: radial-gradient(60% 100% at 50% 0%, rgba(0, 180, 255, .1), transparent 72%); box-shadow: none; pointer-events: none; }
.wsm-pillars::after { height: 320px; background: radial-gradient(50% 100% at 50% 0%, rgba(0, 180, 255, .08), transparent 70%); }
/* after 03 Custom Systems the capability section fades into the journey's own glow */
.wsm-pillars { background: linear-gradient(180deg, var(--ink) 0%, #0A1A2B 45%, var(--ink) 92%); }
.wsm-d2b::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 0; width: min(1200px, 100%); height: 300px; transform: translateX(-50%); background: radial-gradient(50% 70% at 50% 0%, rgba(0, 180, 255, .1), transparent 70%); pointer-events: none; }
.wsm-d2b { background: radial-gradient(80% 55% at 30% 72%, #0D2740 0%, rgba(7, 17, 28, 0) 64%), linear-gradient(180deg, var(--ink) 0%, #081624 50%, var(--ink) 100%); }
.wsm-ind { background: radial-gradient(70% 50% at 50% 100%, rgba(0, 180, 255, .08), transparent 70%), linear-gradient(180deg, var(--ink), #081624 50%, var(--ink)); }
.wsm-quotes::before { height: 160px; background: radial-gradient(55% 100% at 50% 0%, rgba(0, 180, 255, .1), transparent 72%); box-shadow: none; pointer-events: none; z-index: -1; }
.wsm-cta::before { height: 180px; background: radial-gradient(55% 100% at 50% 0%, rgba(0, 180, 255, .12), transparent 72%); box-shadow: none; pointer-events: none; z-index: -1; }
/* CTA → footer: the CTA settles back to ink at its lower edge */
.wsm-cta { background: linear-gradient(180deg, rgba(7, 17, 28, 0) 72%, var(--ink) 100%), radial-gradient(60% 90% at 78% 55%, rgba(0, 180, 255, .2), transparent 70%), radial-gradient(90% 80% at 50% 100%, #0D2740 0%, var(--ink) 70%); }

/* ===== Pass 3 · 4. Intelligence 01 at 1440–1920: less empty space on the right =====
   The 01 interface grows into the outer margin (a share of it, so it still lines up at 1440) and the copy column
   is a touch wider, which balances the row without changing the layout. */
@media (min-width: 1440px) {
  .wsm-pillar:not(.wsm-pillar--rev) { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.2fr); gap: 56px; }
  .wsm-pillar:not(.wsm-pillar--rev) .wsm-ui { margin-right: calc((100vw - 1240px) * -.22); }
  .wsm-pillar--rev .wsm-ui { margin-left: calc((100vw - 1240px) * -.12); }
}
@media (min-width: 1920px) {
  .wsm-pillar:not(.wsm-pillar--rev) .wsm-ui { margin-right: -150px; }
  .wsm-pillar--rev .wsm-ui { margin-left: -82px; }
}
/* decorative layers fade out towards both edges, so orbs and the grid floor never end on a straight line */
.wsm-d2b__bg { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 180px, #000 calc(100% - 200px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 180px, #000 calc(100% - 200px), transparent 100%); }
.wsm-d2b { background: radial-gradient(70% 45% at 30% 70%, rgba(13, 39, 64, .9) 0%, rgba(7, 17, 28, 0) 70%), var(--ink); }
.wsm-d2b__title .elementor-heading-title { max-width: 13ch; }
/* Pass 3 · 5: tighter, and the next section comes up */
.wsm-pillars { padding-bottom: clamp(72px, 7vw, 112px); }
.wsm-d2b { padding-top: clamp(88px, 8vw, 120px); padding-bottom: clamp(72px, 7vw, 104px); }
/* boundary glows peak inside the section and are fully transparent at the seam itself */
.wsm-pillars::before, .wsm-d2b::before, .wsm-quotes::before, .wsm-cta::before { top: 0; height: 340px; background: radial-gradient(50% 42% at 50% 55%, rgba(0, 180, 255, .09), transparent 100%); }
.wsm-pillars::after { display: none; }
.wsm-d2b::before { left: 50%; width: min(1200px, 100%); transform: translateX(-50%); }
/* spacing that must hold inside Elementor widgets (the approved hero lead has no top margin: .wsm-page p wins there) */
.wsm-page .wsm-hero__lead { margin: 0; }
.wsm-page .wsm-d2b__name { margin: 6px 0 8px; }
.wsm-page .wsm-d2b__ph { margin: 0 0 6px; }
.wsm-page .wsm-d2b__label { margin: 0; }
@media (max-width: 900px) {
  .wsm-page .wsm-d2b__num { margin-top: 20px; }
  .wsm-page .wsm-d2b__name { margin: 14px 0 8px; }
}
/* a soft band of light along the stage line, rising towards 05 (the Hero core's halo, stretched) */
.wsm-page .wsm-d2b__steps::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(var(--tile) * .2); height: calc(var(--tile) * 1.4); background: radial-gradient(50% 50% at 50% 60%, rgba(0, 180, 255, .1), transparent 100%), radial-gradient(12% 50% at 88% 45%, rgba(0, 180, 255, .18), transparent 100%); pointer-events: none; }
@media (max-width: 900px) { .wsm-page .wsm-d2b__steps::after { display: none; } }

/* ===== v10 (19 Oct): Pass 3 · 6–9  lower sections, native Elementor ===== */
/* shared section head: title left, intro right (Industries, Testimonials) */
.wsm-page .wsm-sechead--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; }
.wsm-sechead__title { font-size: clamp(32px, 3.6vw, 52px); font-weight: 600; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.06; }
.wsm-sechead__title .elementor-heading-title { max-width: 18ch; text-wrap: balance; }
.wsm-sechead__intro { color: var(--muted); max-width: 30em; }
.wsm-page .wsm-sechead__r .wsm-el-textlink { margin-top: 16px; }
.wsm-page .wsm-sechead .wsm-eyebrow { margin-bottom: 22px; }
/* Button widget → text link on light fields */
.wsm-page .wsm-el-textlink--light .elementor-button { color: var(--text-dark); font-size: 15px; }
.wsm-page .wsm-el-textlink--light .elementor-button:hover, .wsm-page .wsm-el-textlink--light .elementor-button:focus-visible { color: var(--deep-cyan); }
.wsm-page .wsm-el-textlink--light .elementor-button-text::after { color: var(--deep-cyan); }

/* reveal start states (JS adds .is-in in a stagger; `translate` keeps hover transforms free) */
html.wsm-js .wsm-icard:not(.is-in), html.wsm-js .wsm-tcard:not(.is-in) { opacity: 0; translate: 0 18px; }
.wsm-icard, .wsm-tcard { transition: opacity .7s var(--ease), translate .8s var(--ease), transform .35s var(--ease), box-shadow .45s var(--ease); }

/* mobile swipe rows (Industries, Testimonials): progress bar under the row */
.wsm-page .wsm-snap__barw { display: none; }
.wsm-snap__bar { position: relative; height: 2px; margin: 22px var(--gut) 0; background: rgba(147, 166, 184, .2); border-radius: 2px; overflow: hidden; }
.wsm-snap__bar span { position: absolute; inset: 0; background: var(--cyan); box-shadow: 0 0 8px var(--cyan-hi); transform-origin: left; transform: scaleX(.125); }

/* ---------- 04 Industries · Pass 3 · 6: one image treatment for all eight, less space after the cards ---------- */
.wsm-ind2 { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: clamp(56px, 6vw, 88px) 0 clamp(64px, 6vw, 96px); background: radial-gradient(70% 50% at 50% 100%, rgba(0, 180, 255, .08), transparent 70%), linear-gradient(180deg, var(--ink), #081624 50%, var(--ink)); }
.wsm-page .wsm-icards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); align-items: stretch; margin-top: clamp(40px, 4.4vw, 64px); padding-bottom: 40px; }
/* the approved varied rhythm: even columns sit lower (relative offset, so reveal and hover transforms stay free) */
.wsm-page .wsm-icard:nth-child(even) { top: 40px; }
.wsm-page .wsm-icard { position: relative; display: flex; flex-direction: column; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; isolation: isolate; container-type: inline-size; color: #fff; text-decoration: none; background: var(--harbour); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.wsm-page .wsm-icard__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; transition: transform 1.1s var(--ease); }
.wsm-page .elementor .wsm-icard__media img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; max-width: none; object-fit: cover; filter: saturate(1.04) contrast(1.04) brightness(.97); }
/* identical on every card: a light cool grade, a soft top shade for the number, the same bottom-up gradient behind the text */
.wsm-icard__media::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #0B3557; mix-blend-mode: soft-light; opacity: .35; }
.wsm-icard__media::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(7, 17, 28, .32) 0%, rgba(7, 17, 28, 0) 18%, rgba(7, 17, 28, 0) 40%, rgba(7, 17, 28, .6) 60%, rgba(7, 17, 28, .93) 100%); }
.wsm-icard::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(147, 166, 184, .16); transition: box-shadow .45s var(--ease); pointer-events: none; }
.wsm-page .wsm-icard__num { position: absolute; left: 20px; top: 18px; font-size: 12px; font-weight: 600; letter-spacing: .14em; color: rgba(234, 241, 247, .8); }
.wsm-page .wsm-icard__arrw { position: absolute; right: 16px; top: 14px; }
.wsm-icard__arr { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(234, 241, 247, .35); transition: background .35s, border-color .35s, transform .35s var(--ease); }
.wsm-icard__arr svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* every title starts at the same height (margin % is of the card width), so the row lines up whatever the text length */
.wsm-page .wsm-icard__body { position: relative; z-index: 1; margin-top: 62%; padding: 0 20px 22px; }
.wsm-icard__title { font-size: clamp(17px, 1.4vw, 21px); font-weight: 620; font-stretch: 106%; letter-spacing: -.01em; line-height: 1.18; color: #fff; }
.wsm-icard__title .elementor-heading-title { min-height: 2.36em; display: flex; align-items: flex-end; text-wrap: balance; }
.wsm-page .wsm-icard__desc { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #D3DFE9; }
.wsm-page .wsm-icard:hover, .wsm-page .wsm-icard:focus-visible { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8), 0 0 40px -6px rgba(0, 180, 255, .45); }
.wsm-icard:hover::after, .wsm-icard:focus-visible::after { box-shadow: inset 0 0 0 1px rgba(79, 184, 232, .85), inset 0 -80px 90px -60px rgba(0, 180, 255, .45); }
.wsm-icard:hover .wsm-icard__media, .wsm-icard:focus-visible .wsm-icard__media { transform: scale(1.05); }
.wsm-icard:hover .wsm-icard__arr, .wsm-icard:focus-visible .wsm-icard__arr { background: var(--cyan); border-color: var(--cyan); transform: translateX(2px); }
.wsm-icard:hover .wsm-icard__arr svg, .wsm-icard:focus-visible .wsm-icard__arr svg { stroke: var(--ink); }
.wsm-page .wsm-icard:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: 4px; }

/* ---------- 05 Organisations & Brands · Pass 3 · 7: full-width heading, description beneath, static 6 × 2 grid ---------- */
.wsm-brands { position: relative; isolation: isolate; padding: clamp(72px, 7vw, 104px) 0 clamp(56px, 6vw, 88px); color: var(--text-dark); background: radial-gradient(55% 80% at 100% 0%, rgba(79, 184, 232, .16), transparent 65%), linear-gradient(180deg, #E6F0F8 0%, var(--paper) 55%); }
.wsm-brands::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(31, 120, 168, .16) 1px, transparent 1.4px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(60% 60% at 90% 10%, #000, transparent 75%); mask-image: radial-gradient(60% 60% at 90% 10%, #000, transparent 75%); pointer-events: none; }
.wsm-brands__title { font-size: clamp(32px, 3.8vw, 56px); font-weight: 600; font-stretch: 112%; letter-spacing: -.025em; line-height: 1.04; }
.wsm-page .wsm-brands__sub { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 40px; margin-top: 18px; }
.wsm-brands__intro { max-width: 40em; font-size: 17.5px; color: var(--muted-dark); }
.wsm-page .wsm-brands__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: clamp(32px, 3.4vw, 48px); }
/* tiles are plaques, not links: no pointer, no hover change, no transition (Pass 4 · 5) */
.wsm-page .wsm-ltile { display: grid; place-items: center; height: 104px; padding: 16px 18px; background: #fff; border: 1px solid #E1EAF2; border-radius: 6px; box-shadow: 0 1px 2px rgba(12, 34, 54, .06); cursor: default; transition: none; }
.wsm-page .elementor .wsm-ltile img { display: block; width: auto; height: var(--h, 32px); max-width: min(var(--mw, 150px), 100%); object-fit: contain; }
/* per-logo optical size, set by eye so the twelve read at one weight */
.wsm-ltile--01 { --h: 36px; } .wsm-ltile--02 { --h: 30px; } .wsm-ltile--03 { --h: 24px; } .wsm-ltile--04 { --h: 32px; }
.wsm-ltile--05 { --h: 42px; } .wsm-ltile--06 { --h: 34px; } .wsm-ltile--07 { --h: 30px; } .wsm-ltile--08 { --h: 28px; }
.wsm-ltile--09 { --h: 36px; } .wsm-ltile--11 { --h: 22px; } .wsm-ltile--12 { --h: 60px; }
/* Alexandra Hospital: two-line wordmark beside the emblem; the new file has no empty canvas, so it reads at the others' weight */
.wsm-ltile--10 { --h: 46px; --mw: 176px; }
.wsm-page .wsm-brands__note { margin-top: 28px; font-size: 14px; color: #6B7F92; }

/* ---------- 06 Testimonials · Pass 3 · 8: six layered glass cards, 3 × 2 ---------- */
.wsm-tst { position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding: var(--sec) 0; background: radial-gradient(60% 70% at 0% 100%, rgba(0, 180, 255, .1), transparent 70%), var(--ink); }
.wsm-tst::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 340px; background: radial-gradient(50% 42% at 50% 55%, rgba(0, 180, 255, .09), transparent 100%); pointer-events: none; }
.wsm-page .wsm-tst__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 24px; align-items: stretch; margin-top: clamp(40px, 4.4vw, 64px); padding: 0 12px 12px 0; }
/* depth: glass card + an offset back plate (the stacked-card shadow) + the Hero's accent bar */
.wsm-page .wsm-tcard { position: relative; display: flex; flex-direction: column; padding: 30px 30px 26px; border-radius: 18px; background: var(--glass); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 10px 12px 0 -1px rgba(13, 34, 54, .9), 10px 12px 0 0 rgba(79, 184, 232, .12), 0 40px 70px -34px rgba(0, 0, 0, .85), 0 0 44px -14px rgba(0, 180, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wsm-tcard::after { content: ""; position: absolute; left: 30px; top: -1px; width: 48px; height: 2px; background: var(--cyan-hi); box-shadow: 0 0 12px var(--cyan-hi); }
.wsm-tcard__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(79, 184, 232, .12); box-shadow: inset 0 0 0 1px rgba(79, 184, 232, .28), 0 0 22px -6px rgba(0, 180, 255, .5); }
.wsm-tcard__mark svg { width: 20px; height: 15px; fill: var(--cyan); }
.wsm-page .wsm-tcard__q { flex: 1 0 auto; margin-top: 22px; font-size: 16.5px; line-height: 1.62; color: #D7E3EE; }
.wsm-page .wsm-tcard__who { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(147, 166, 184, .16); }
.wsm-tcard__name { font-size: 15.5px; font-weight: 640; color: #F1F7FC; line-height: 1.35; }
.wsm-tcard__role { font-size: 14px; color: var(--muted); line-height: 1.45; }
.wsm-tcard__org { font-size: 14px; font-weight: 600; color: #8FD9FB; line-height: 1.45; }

/* ---------- 07 Final CTA · Pass 3 · 9 ---------- */
.wsm-final { position: relative; overflow: hidden; isolation: isolate; padding: clamp(96px, 11vw, 160px) 0; color: #fff; background: linear-gradient(180deg, rgba(7, 17, 28, 0) 72%, var(--ink) 100%), radial-gradient(60% 90% at 78% 55%, rgba(0, 180, 255, .2), transparent 70%), radial-gradient(90% 80% at 50% 100%, #0D2740 0%, var(--ink) 70%); }
.wsm-final::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 340px; background: radial-gradient(50% 42% at 50% 55%, rgba(0, 180, 255, .09), transparent 100%); pointer-events: none; }
.wsm-final__lines { position: absolute; inset: 0; width: 100%; height: 100%; stroke: var(--cyan); }
.wsm-page .wsm-final__in { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.wsm-final__title { font-size: clamp(42px, 5.4vw, 84px); font-weight: 650; font-stretch: 116%; line-height: .98; letter-spacing: -.035em; }
.wsm-final__title .elementor-heading-title { max-width: 13ch; text-wrap: balance; }
.wsm-final__text { font-size: 18px; color: #B8C7D5; max-width: 28em; }
.wsm-page .wsm-final__side .wsm-el-btn { margin-top: 32px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .wsm-page .wsm-icards { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 0; }
  .wsm-page .wsm-icard:nth-child(even) { top: 0; }
  .wsm-page .wsm-icard { aspect-ratio: 5 / 4; }
  .wsm-page .wsm-icard__body { margin-top: 40%; }
  .wsm-page .wsm-brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wsm-page .wsm-tst__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wsm-page .wsm-sechead--split, .wsm-page .wsm-final__in { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wsm-page .wsm-icards__wrap, .wsm-page .wsm-tst__wrap { padding: 0; }
  .wsm-page .wsm-snap { display: flex; gap: 12px; margin-top: 32px; padding: 4px var(--gut) 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); overscroll-behavior-x: contain; scrollbar-width: none; }
  .wsm-page .wsm-snap::-webkit-scrollbar { display: none; }
  .wsm-page .wsm-snap__barw { display: block; }
  .wsm-page .wsm-icard { flex: 0 0 74%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .wsm-page .wsm-icard__body { margin-top: 58%; padding: 0 18px 20px; }
  .wsm-page .wsm-tcard { flex: 0 0 86%; scroll-snap-align: start; padding: 26px 22px 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 30px 50px -30px rgba(0, 0, 0, .85), 0 0 36px -14px rgba(0, 180, 255, .22); }
  .wsm-page .wsm-tcard__q { font-size: 16px; }
  .wsm-page .wsm-brands__sub { flex-direction: column; align-items: flex-start; }
  .wsm-page .wsm-brands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .wsm-page .wsm-ltile { height: 80px; padding: 12px; }
  .wsm-page .elementor .wsm-ltile img { height: calc(var(--h, 32px) * .74); }
  .wsm-final { padding: 80px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wsm-icard, .wsm-tcard, .wsm-ltile, .wsm-icard__media { transition: none; }
}

/* Elementor containers default to a column flex direction: state it wherever these sections use flex */
.wsm-page .wsm-brands__sub { flex-direction: row; }
.wsm-page .wsm-d2b__principle, .wsm-page .wsm-d2b__step, .wsm-page .wsm-d2b__vis, .wsm-page .wsm-icard, .wsm-page .wsm-tcard { flex-direction: column; }
@media (max-width: 760px) {
  .wsm-page .wsm-snap { flex-direction: row; flex-wrap: nowrap; }
  .wsm-page .wsm-brands__sub { flex-direction: column; }
}
.wsm-page .wsm-el-textlink .elementor-button { white-space: nowrap; }
.wsm-page .wsm-brands__sub .wsm-el-textlink { flex: 0 0 auto; }
/* testimonials → CTA: the corner glow settles back to ink before the seam */
.wsm-tst { background: linear-gradient(180deg, rgba(7, 17, 28, 0) 70%, var(--ink) 100%), radial-gradient(55% 60% at 0% 78%, rgba(0, 180, 255, .1), transparent 70%), var(--ink); }

/* ===== v11 (20 Oct): 02 Intelligence Across Your Business, native Elementor (was one HTML widget) =====
   Same look as the coded section: these rules move the old element styles (.wsm-pillars__head > p, .wsm-pillar h3,
   .wsm-pillar__copy > p, .wsm-tags, .wsm-link) onto the widget classes. The interface mock-ups are unchanged HTML widgets. */
.wsm-page .wsm-pillar { display: grid; }
.wsm-pillars__title { font-size: clamp(32px, 3.6vw, 52px); font-weight: 600; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.06; }
.wsm-pillars__title .elementor-heading-title { max-width: 18ch; text-wrap: balance; }
.wsm-pillars__intro { margin-top: 22px; color: var(--muted); max-width: 30em; font-size: 18px; }
.wsm-pillar__title { font-size: clamp(30px, 2.9vw, 44px); font-weight: 600; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.06; text-wrap: balance; margin-bottom: 16px; }
.wsm-pillar__desc { color: #A9BACA; font-size: 17.5px; max-width: 30em; }
.wsm-page .wsm-pillar__tags { margin: 24px 0 26px; }
.wsm-page .wsm-pillar__tags ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.wsm-pillar__tags li { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; line-height: 1.6; text-transform: uppercase; color: #9FCFEA; }
.wsm-pillar__tags li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan-hi); }
/* Button widget → underlined text link (the pillar "Explore …" links) */
.wsm-page .wsm-el-ulink .elementor-button { position: relative; display: inline-block; min-height: 0; padding: 6px 0; border-radius: 0; background: none; box-shadow: none; color: var(--text); font-family: var(--f); font-size: 16px; font-weight: 600; line-height: 1.6; text-decoration: none; }
.wsm-page .wsm-el-ulink .elementor-button:hover, .wsm-page .wsm-el-ulink .elementor-button:focus-visible { color: var(--text); background: none; }
.wsm-page .wsm-el-ulink .elementor-button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1.5px; background: var(--cyan); transform-origin: left; transition: transform .35s var(--ease); }
.wsm-page .wsm-el-ulink .elementor-button:hover::after { transform: scaleX(.35); }
/* Elementor's own widget spacing (margin-block-end) outranks single-class margins: restate the bottom margins here */
.wsm-page .wsm-pillars .elementor-widget.wsm-eyebrow { margin: 8px 0 0; } /* as approved: the coded eyebrow sat in a line box (8px lower) with no bottom margin (.wsm-page p reset it) */
.wsm-page .wsm-pillars .elementor-widget.wsm-pillars__intro, .wsm-page .wsm-pillars .elementor-widget.wsm-pillar__desc { max-width: 30em; }
.wsm-page .wsm-pillars .elementor-widget.wsm-pillar__idx { margin-bottom: 22px; }
.wsm-page .wsm-pillars .elementor-widget.wsm-pillar__title { margin-bottom: 16px; }
.wsm-page .wsm-pillars .elementor-widget.wsm-pillar__tags { margin-bottom: 26px; }

/* ===== v12 (21 Oct): Pass 4 =====
   · 7a  .wsm-split-head: the one section-head pattern below the Hero (Intelligence, Industries, Organisations, Testimonials,
         Final CTA). Left ≈55% eyebrow + headline, right ≈40% copy (+ link/button), bottom-aligned; --sh-drop lifts the right
         block by the headline's descender gap, so its last line sits on the headline's last baseline. Stacks ≤900.
   · 7c  one spacing scale for the lower half: section padding --wsm-sec-y, head → content --wsm-head-gap; where two
         sections share the ink background only one padding is used. */
.wsm-page { --wsm-sec-y: clamp(72px, 8vw, 112px); --wsm-head-gap: clamp(40px, 4vw, 56px); }
@media (max-width: 767px) { .wsm-page { --wsm-sec-y: 56px; } }

.wsm-page .wsm-split-head { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: flex-end; gap: 24px clamp(32px, 5vw, 80px); }
.wsm-page .wsm-split-head__l { flex: 0 1 55%; min-width: 0; }
.wsm-page .wsm-split-head__r { flex: 0 1 40%; min-width: 0; padding-bottom: var(--sh-drop, 0px); }
.wsm-page .wsm-split-head__r .wsm-el-textlink { margin-top: 16px; }
.wsm-page .wsm-brands .wsm-split-head__r { --sh-drop: calc(clamp(32px, 3.8vw, 56px) * .18); }
.wsm-page .wsm-tst .wsm-split-head__r { --sh-drop: calc(clamp(32px, 3.6vw, 52px) * .19); }
.wsm-page .wsm-final .wsm-split-head__r { --sh-drop: calc(clamp(2.75rem, 5vw, 4.25rem) * .17); }
@media (max-width: 900px) {
  .wsm-page .wsm-split-head { flex-direction: column; align-items: stretch; gap: 20px; }
  .wsm-page .wsm-split-head__l, .wsm-page .wsm-split-head__r { flex: none; width: 100%; padding-bottom: 0; }
}

/* · 2a Intelligence: a full-width editorial intro, capability 01 straight underneath */
.wsm-page .wsm-pillars__head.wsm-split-head { max-width: none; }
.wsm-pillars__title { font-size: clamp(34px, 4.3vw, 64px); line-height: 1.02; letter-spacing: -.03em; }
.wsm-pillars__title .elementor-heading-title { max-width: none; }
.wsm-page .wsm-pillars .elementor-widget.wsm-pillars__intro { margin-top: 0; max-width: 34em; }
.wsm-page .wsm-pillars__head.wsm-split-head + .wsm-pillar { margin-top: var(--wsm-head-gap); }

/* · 2c Operations portal: every row on the same column tracks, all left-aligned, status pill to the right; no wrapping
   (scoped to the Elementor widget, so the coded staging front page stays as it is) */
.wsm-pillar__uiw .wsm-table li { grid-template-columns: 5.4em minmax(0, 1fr) auto; column-gap: .9em; text-align: left; font-variant-numeric: tabular-nums; }
.wsm-pillar__uiw .wsm-table li > * { min-width: 0; text-align: left; white-space: nowrap; }
.wsm-pillar__uiw .wsm-table li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; }
.wsm-pillar__uiw .wsm-table li > em { justify-self: end; }

/* · 3b the stage line ends at 05 (label + divider removed); 05 keeps the same bottom edge as the other stages */

/* · 5 Organisations & Brands: layered background, one showcase panel, static plaques */
.wsm-page .wsm-orgs { background: radial-gradient(46% 42% at 50% 66%, rgba(0, 180, 255, .14), transparent 74%), radial-gradient(55% 70% at 100% 0%, rgba(79, 184, 232, .12), transparent 65%), linear-gradient(180deg, #E4EFF8 0%, #EEF4F9 55%, var(--paper) 100%); }
.wsm-orgs::before { background-image: radial-gradient(rgba(31, 120, 168, .18) 1px, transparent 1.4px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(62% 58% at 50% 62%, #000 10%, transparent 78%); mask-image: radial-gradient(62% 58% at 50% 62%, #000 10%, transparent 78%); }
.wsm-brands__title .elementor-heading-title { text-wrap: balance; }
.wsm-page .wsm-orgs-panel { position: relative; margin-top: var(--wsm-head-gap); padding: clamp(18px, 2.4vw, 34px); border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(250, 252, 254, .5)); border: 1px solid rgba(150, 182, 208, .42); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(12, 34, 54, .05), 0 34px 64px -34px rgba(12, 34, 54, .3), 0 0 60px -20px rgba(0, 180, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wsm-page .wsm-orgs-panel::before { content: ""; position: absolute; left: 10%; right: 10%; top: -1px; width: auto; height: 1px; border-radius: 0; background: linear-gradient(90deg, transparent, rgba(0, 180, 255, .55), transparent); pointer-events: none; }
.wsm-page .wsm-orgs-panel .wsm-brands__grid { margin-top: 0; }
.wsm-page .wsm-ltile:hover { transform: none; box-shadow: 0 1px 2px rgba(12, 34, 54, .06); }
.wsm-page .wsm-brands__note { margin-top: 22px; }
@media (max-width: 760px) {
  .wsm-page .wsm-orgs-panel { padding: 14px; border-radius: 18px; }
}
@media (max-width: 600px) {
  .wsm-page .wsm-brands__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wsm-page .wsm-ltile { height: 76px; }
  .wsm-page .elementor .wsm-ltile img { height: calc(var(--h, 32px) * .8); }
}

/* · 6 Testimonials: one native scroller, about 3 cards visible; slim brand scrollbar; the next card peeks on mobile.
   The track bleeds 24px each side so the cards' glow and offset back plate are never clipped by the scroller. */
.wsm-page .wsm-testi-track { --wsm-gap: 24px; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: var(--wsm-gap); width: calc(100% + 48px); max-width: none; margin: var(--wsm-head-gap) -24px 0; padding: 8px 36px 30px 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; overscroll-behavior-x: contain; }
.wsm-page .wsm-testi-card { flex: 0 0 calc((100% - 2 * var(--wsm-gap)) / 3); scroll-snap-align: start; }
.wsm-testi-track::-webkit-scrollbar { height: 6px; }
.wsm-testi-track::-webkit-scrollbar-track { margin-inline: 24px 36px; border-radius: 3px; background: rgba(147, 166, 184, .16); }
.wsm-testi-track::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--cyan); }
.wsm-testi-track::-webkit-scrollbar-thumb:hover { background: var(--cyan-hi); }
@supports not selector(::-webkit-scrollbar) { .wsm-testi-track { scrollbar-width: thin; scrollbar-color: var(--cyan) rgba(147, 166, 184, .16); } }
.wsm-page .wsm-testi-track:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: -2px; border-radius: 20px; }
@media (max-width: 1080px) { .wsm-page .wsm-testi-card { flex-basis: calc((100% - var(--wsm-gap)) / 2); } }
@media (max-width: 767px) {
  .wsm-page .wsm-testi-track { --wsm-gap: 14px; width: 100%; margin: 32px 0 0; padding: 8px var(--gut) 26px; scroll-padding-inline: var(--gut); }
  .wsm-page .wsm-testi-card { flex-basis: 85%; }
  .wsm-testi-track::-webkit-scrollbar-track { margin-inline: var(--gut); }
}

/* · 7b Final CTA: the headline sits on two lines on desktop; the old grid becomes the shared split head */
.wsm-page .wsm-final__in { display: block; }
.wsm-final__title { font-size: clamp(2.75rem, 5vw, 4.25rem); }
.wsm-final__title .elementor-heading-title { max-width: none; }
.wsm-page .wsm-final__head .wsm-el-btn { margin-top: 32px; }

/* · 7c spacing: Industries → Organisations → Testimonials → Final CTA → footer */
.wsm-page .wsm-ind2 { padding: var(--wsm-sec-y) 0 calc(var(--wsm-sec-y) - 40px); }
.wsm-page .wsm-icards { margin-top: var(--wsm-head-gap); }
.wsm-page .wsm-brands { padding: var(--wsm-sec-y) 0; }
.wsm-page .wsm-tst { padding: var(--wsm-sec-y) 0 0; }
.wsm-page .wsm-final { padding: var(--wsm-sec-y) 0 clamp(24px, 3vw, 40px); } /* the footer below is also ink: its own top padding does the work */
@media (max-width: 1080px) { .wsm-page .wsm-ind2 { padding-bottom: var(--wsm-sec-y); } }

/* Pass 4 · 6 follow-up (21 Oct): desktop controls for the testimonials row (created by wsm-home-v2.js). Arrows sit under
   the row on the right, in the Hero's glass/cyan language; a mouse can also drag the row. Hidden on touch-size screens. */
.wsm-testi-nav { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.wsm-testi-nav[hidden] { display: none; }
.wsm-testi-nav__btn { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 1px solid rgba(79, 184, 232, .45); background: var(--glass); color: var(--cyan); cursor: pointer; box-shadow: 0 0 22px -8px rgba(0, 180, 255, .5); transition: background .3s, border-color .3s, color .3s, opacity .3s; }
.wsm-testi-nav__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wsm-testi-nav__btn--prev svg { transform: scaleX(-1); }
.wsm-testi-nav__btn:hover:not(:disabled), .wsm-testi-nav__btn:focus-visible { background: var(--cyan); border-color: var(--cyan); color: var(--ink); }
.wsm-testi-nav__btn:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: 3px; }
.wsm-testi-nav__btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .wsm-page .wsm-testi-track { cursor: grab; } }
.wsm-page .wsm-testi-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
@media (max-width: 767px) { .wsm-testi-nav { display: none; } }
@media (prefers-reduced-motion: reduce) { .wsm-testi-nav__btn { transition: none; } }

/* ===== v13 Final sprint (24 Oct): inner-page template + Split Heading section template =====
   New classes only (set in Advanced → CSS Classes). Nothing above this block changes, so page 36 is unaffected.
   .wsm-band: a plain ink section on the lower-section spacing scale; --alt and --proof are slightly lifted backgrounds. */
.wsm-page .wsm-band { position: relative; padding: var(--wsm-sec-y) 0; background: var(--ink); }
.wsm-page .wsm-band--alt { background: radial-gradient(70% 60% at 50% 0%, rgba(0, 180, 255, .07), transparent 70%), linear-gradient(180deg, var(--ink), #081624 50%, var(--ink)); }
.wsm-page .wsm-band--proof { padding: clamp(48px, 5vw, 72px) 0; background: var(--ink); }
.wsm-page .wsm-band:not(.wsm-band--alt):not(.wsm-band--proof) + .wsm-band:not(.wsm-band--alt):not(.wsm-band--proof) { padding-top: 0; } /* two plain ink bands: one padding */

/* Inner hero: eyebrow, H1, intro, one button. No diagram. */
.wsm-page .wsm-ihero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(132px, 13vw, 176px) 0 clamp(56px, 6vw, 96px); background: radial-gradient(70% 80% at 80% 20%, rgba(0, 180, 255, .12), transparent 65%), radial-gradient(90% 70% at 70% 35%, #0D2740 0%, var(--ink) 62%); }
.wsm-page .wsm-ihero__in { max-width: calc(860px + 2 * var(--gut)); margin-left: max(0px, calc((100% - var(--wrap) - 2 * var(--gut)) / 2)); }
.wsm-page :is(.wsm-ihero__title, .wsm-2col__title, .wsm-alt__title) .elementor-heading-title { font-weight: 600; font-stretch: 112%; letter-spacing: -.02em; line-height: 1.06; } /* Elementor heading CSS outranks .wsm-page h1–h3 */
.wsm-page .wsm-ihero__title .elementor-heading-title { font-size: clamp(40px, 4.6vw, 68px); }
.wsm-page .wsm-ihero .elementor-widget.wsm-ihero__intro { margin-top: 24px; max-width: 36em; color: #B9C9D8; font-size: clamp(17px, 1.3vw, 19px); }
.wsm-page .e-con.wsm-ihero__ctas { --display: flex; --flex-direction: row; --flex-wrap: wrap; --align-items: center; --row-gap: 14px; --column-gap: 28px; margin-top: 36px; }

/* Split heading followed by a two-column text/image block */
.wsm-page .wsm-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; margin-top: var(--wsm-head-gap); }
.wsm-page .wsm-2col__title .elementor-heading-title, .wsm-page .wsm-alt__title .elementor-heading-title { font-size: clamp(26px, 2.4vw, 36px); }
.wsm-page .elementor-widget.wsm-2col__body, .wsm-page .elementor-widget.wsm-alt__body { margin-top: 16px; max-width: 34em; color: #A9BACA; }
.wsm-page .wsm-2col__body p + p { margin-top: 1em; }
.wsm-page :is(.wsm-2col__media, .wsm-alt__media) img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; border: 1px solid var(--edge); box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .85); }

/* Three-card feature grid: the Capability card (.wsm-pillar__copy) framed as a glass card */
.wsm-page .wsm-fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.wsm-page .wsm-fgrid > .wsm-pillar__copy { display: flex; flex-direction: column; max-width: none; padding: clamp(24px, 2.4vw, 34px); border-radius: 18px; background: var(--glass); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 40px 70px -34px rgba(0, 0, 0, .85); }
.wsm-page .wsm-fgrid .elementor-widget.wsm-pillar__idx { margin-bottom: 18px; }
.wsm-page .wsm-fgrid .wsm-pillar__idx, .wsm-page .wsm-fgrid .wsm-pillar__idx .elementor-heading-title { font-size: clamp(40px, 3.4vw, 52px); }
.wsm-page .wsm-fgrid .elementor-widget.wsm-pillar__title { margin-bottom: 12px; }
.wsm-page .wsm-fgrid .wsm-pillar__title .elementor-heading-title { font-size: clamp(22px, 1.9vw, 28px); }
.wsm-page .wsm-fgrid .elementor-widget.wsm-pillar__tags { margin: 20px 0 22px; }
.wsm-page .wsm-fgrid .elementor-widget.wsm-el-ulink { margin-top: auto; }

/* Alternating image + text rows */
.wsm-page .wsm-alt { display: flex; flex-direction: column; gap: clamp(56px, 7vw, 104px); }
.wsm-page .wsm-alt__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.wsm-page .wsm-alt__row--rev { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.wsm-page .wsm-alt__row--rev > .wsm-alt__text { order: 2; }

/* Proof strip: the four locked proof points, native widgets (same look as the hero strip) */
.wsm-page .wsm-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(147, 166, 184, .2); }
.wsm-page .wsm-proof__item { position: relative; padding: 26px 24px 0; }
.wsm-page .wsm-proof__item:first-child { padding-left: 0; }
.wsm-page .wsm-proof__item + .wsm-proof__item::before { content: ""; position: absolute; left: 0; top: 26px; bottom: 4px; width: 1px; background: rgba(147, 166, 184, .16); }
.wsm-page .wsm-proof__item::after { content: ""; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--cyan-hi); box-shadow: 0 0 12px var(--cyan-hi); }
.wsm-page .wsm-proof__item + .wsm-proof__item::after { left: 24px; }
.wsm-page .wsm-proof__value .elementor-heading-title { font-size: clamp(22px, 2.1vw, 32px); font-weight: 600; font-stretch: 108%; letter-spacing: -.02em; color: #CFEFFD; line-height: 1.1; }
.wsm-page .elementor-widget.wsm-proof__label { margin-top: 8px; }
.wsm-page .wsm-proof__label .elementor-heading-title { color: var(--muted); font-size: 14.5px; font-weight: 400; line-height: 1.45; letter-spacing: 0; font-stretch: 100%; max-width: 24ch; }

/* Single testimonial */
.wsm-page .wsm-single-testi { max-width: 760px; margin: 0 auto; }

@media (max-width: 900px) {
  .wsm-page .wsm-2col, .wsm-page .wsm-alt__row, .wsm-page .wsm-alt__row--rev { grid-template-columns: 1fr; }
  .wsm-page .wsm-alt__row--rev > .wsm-alt__text { order: 0; }
  .wsm-page .wsm-fgrid { grid-template-columns: 1fr; max-width: 640px; }
  .wsm-page .wsm-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .wsm-page .wsm-proof__item:nth-child(odd) { padding-left: 0; }
  .wsm-page .wsm-proof__item:nth-child(odd)::before { display: none; }
  .wsm-page .wsm-proof__item:nth-child(odd)::after { left: 0; }
}
@media (max-width: 767px) {
  .wsm-page .wsm-band { padding: 56px 0; }
  .wsm-page .wsm-band--proof { padding: 40px 0; }
  .wsm-page .wsm-ihero { padding-bottom: 48px; }
  .wsm-page .wsm-single-testi .wsm-tcard { padding: 26px 22px 22px; }
}
@media (max-width: 420px) {
  .wsm-page .wsm-proof { grid-template-columns: 1fr; }
  .wsm-page .wsm-proof__item, .wsm-page .wsm-proof__item:nth-child(odd) { padding-left: 0; }
  .wsm-page .wsm-proof__item::before { display: none; }
  .wsm-page .wsm-proof__item::after, .wsm-page .wsm-proof__item + .wsm-proof__item::after { left: 0; }
}

/* v13 · Task 4 (24 Oct): hero proof points are native widgets now (they were one HTML widget). Container .wsm-stats >
   4 × container > Heading .wsm-stats__v + Heading .wsm-stats__l. Same look as the dt/dd rules above (still used by page 34). */
.wsm-page .e-con.wsm-stats { display: grid; }
.wsm-page .wsm-stats__v .elementor-heading-title { font-size: clamp(22px, 2.1vw, 32px); font-weight: 600; font-stretch: 108%; letter-spacing: -.02em; color: #CFEFFD; line-height: 1.1; }
.wsm-page .elementor-widget.wsm-stats__l { margin-top: 8px; }
.wsm-page .wsm-stats__l .elementor-heading-title { max-width: 24ch; color: var(--muted); font-size: 14.5px; font-weight: 400; font-stretch: 100%; letter-spacing: 0; line-height: 1.45; }

/* v13 · Task 4 (24 Oct): the design tokens now follow Elementor → Site Settings → Global Colours / Global Fonts.
   Elementor defines --e-global-* on the body (.elementor-kit-9), so the tokens are restated on .wsm-page (the body),
   each with the original value as fallback (page 34 doesn't load the kit CSS and keeps these values).
   Fixed tints (rgba glows, borders, glass) stay in this stylesheet. */
.wsm-page {
  --ink: var(--e-global-color-secondary, #07111C);
  --harbour: var(--e-global-color-wsmharb, #0C2236);
  --steel: var(--e-global-color-wsmstee, #2E3A4B);
  --cyan: var(--e-global-color-primary, #4FB8E8);
  --cyan-hi: var(--e-global-color-accent, #00B4FF);
  --mist: var(--e-global-color-wsmmist, #E8F2F9);
  --paper: var(--e-global-color-wsmpapr, #F5F8FB);
  --text: var(--e-global-color-text, #EAF1F7);
  --muted: var(--e-global-color-wsmmutd, #93A6B8);
  --text-dark: var(--e-global-color-wsmtxdk, #13212F);
  --muted-dark: var(--e-global-color-wsmmudk, #4A5D70);
  --deep-cyan: var(--e-global-color-wsmdeep, #1F78A8);
  --f: var(--e-global-typography-text-font-family, "Archivo"), "Helvetica Neue", Arial, sans-serif;
}

/* v13 · 25 Oct: the proof-point rules match only the real items (.wsm-stats__item, or the classless divs of page 34's <dl>),
   so the overlay div Elementor adds inside containers in the editor doesn't become a grid cell. */


/* ---------- v14 · 25 Oct · A1 Organisations & Brands: "the network behind the work" ----------
   The band goes dark like its neighbours and the logo wall becomes one glass showcase panel. Inside it a faint
   connection grid (the Hero diagram's lines) runs through the gaps between the plaques, with soft nodes where the
   lines cross. Pure CSS: the lines are backgrounds on the grid's ::before (columns + nodes) and ::after (rows),
   spaced by --cols/--rows, so they stay on the gaps at every width. --draw (0–1) is the one-shot draw-in, set by
   wsm-home-v2.js; without JS it stays 1. Everything is scoped to .wsm-orgs (page 34 keeps its own logo strip). */
.wsm-page .wsm-orgs { --g: clamp(22px, 2.6vw, 38px); --op: clamp(22px, 3.2vw, 48px); --n: 22px; --cols: 4; --rows: 3; --ln: rgba(79, 184, 232, .17);
  color: var(--text); background: radial-gradient(44% 36% at 50% 70%, rgba(0, 180, 255, .17), transparent 72%), radial-gradient(70% 45% at 50% 0%, #0C2236 0%, transparent 70%), linear-gradient(180deg, var(--ink) 0%, #0A1A2B 55%, var(--ink) 100%); }
/* one thin curved light line behind the panel, drawn like the Final CTA's */
.wsm-page .wsm-orgs::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none' fill='none' stroke='%234FB8E8'%3E%3Cpath d='M0 170 C380 170 540 380 760 380 C980 380 1100 470 1440 470' stroke-opacity='.34' stroke-width='1.2'/%3E%3Cpath d='M0 250 C400 250 560 380 760 380 C980 380 1120 410 1440 410' stroke-opacity='.14'/%3E%3C/svg%3E") 50% 100% / 100% 600px no-repeat; -webkit-mask-image: none; mask-image: none; }
.wsm-page .wsm-orgs .wsm-brands__title .elementor-heading-title { color: var(--text); }
.wsm-page .wsm-orgs .wsm-brands__intro { color: var(--muted); }
.wsm-page .wsm-orgs .wsm-el-textlink--light .elementor-button { color: var(--text); font-size: 16px; }
.wsm-page .wsm-orgs .wsm-el-textlink--light .elementor-button:hover, .wsm-page .wsm-orgs .wsm-el-textlink--light .elementor-button:focus-visible { color: #fff; }
.wsm-page .wsm-orgs .wsm-el-textlink--light .elementor-button-text::after { color: var(--cyan); }
.wsm-page .wsm-orgs .wsm-brands__note { color: #6F8498; }

/* the panel: dark glass a step lighter than the band, gradient edge brightest at the top, deep shadow, blue glow below */
.wsm-page .wsm-orgs-panel { padding: var(--op); border: 0; border-radius: 24px; overflow: hidden; background: radial-gradient(60% 75% at 50% 42%, rgba(0, 180, 255, .17), rgba(0, 180, 255, 0) 70%), linear-gradient(180deg, rgba(24, 56, 86, .6) 0%, rgba(13, 33, 53, .64) 50%, rgba(9, 24, 39, .74) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 70px 120px -60px rgba(0, 0, 0, .9), 0 46px 100px -46px rgba(0, 180, 255, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wsm-page .wsm-orgs-panel::before { left: 14%; right: 14%; z-index: 3; background: linear-gradient(90deg, transparent, rgba(0, 180, 255, .9), transparent); box-shadow: 0 0 18px 1px rgba(0, 180, 255, .45); }
.wsm-page .wsm-orgs-panel::after { content: ""; position: absolute; inset: 0; z-index: 2; width: auto; padding: 1px; border-radius: inherit; background: linear-gradient(180deg, rgba(79, 184, 232, .62) 0%, rgba(79, 184, 232, .18) 34%, rgba(79, 184, 232, .07) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }

/* the connection grid */
.wsm-page .wsm-orgs .wsm-brands__grid { position: relative; isolation: isolate; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--g); }
.wsm-page .wsm-orgs .wsm-brands__grid::before, .wsm-page .wsm-orgs .wsm-brands__grid::after { content: ""; position: absolute; z-index: -1; width: auto; height: auto; pointer-events: none; }
.wsm-page .wsm-orgs .wsm-brands__grid::before { /* columns + crossing nodes: the box spans the gap centres left/right, the panel edges top/bottom */
  top: calc(-1 * var(--op)); bottom: calc(-1 * var(--op)); left: calc(var(--g) / -2); right: calc(var(--g) / -2);
  --dot: radial-gradient(circle, rgba(200, 236, 255, 1) 0 1.6px, rgba(0, 180, 255, .55) 2.6px, rgba(0, 180, 255, .14) 5px, rgba(0, 180, 255, 0) 11px);
  --gl: 64px; /* the glints: short lit stretches of line either side of each node */
  --gh: linear-gradient(90deg, rgba(0, 180, 255, 0), rgba(79, 184, 232, .6) 50%, rgba(0, 180, 255, 0));
  --gv: linear-gradient(180deg, rgba(0, 180, 255, 0), rgba(79, 184, 232, .6) 50%, rgba(0, 180, 255, 0));
  --dy: calc((2 * var(--op) - var(--g) - var(--n)) / 6); --dyh: calc((2 * var(--op) - var(--g) - 1px) / 6); --dyv: calc((2 * var(--op) - var(--g) - var(--gl)) / 6);
  background:
    var(--dot) calc(25% - var(--n) / 4) calc(33.333% + var(--dy)) / var(--n) var(--n) no-repeat,
    var(--dot) 50% calc(33.333% + var(--dy)) / var(--n) var(--n) no-repeat,
    var(--dot) calc(75% + var(--n) / 4) calc(33.333% + var(--dy)) / var(--n) var(--n) no-repeat,
    var(--dot) calc(25% - var(--n) / 4) calc(66.667% - var(--dy)) / var(--n) var(--n) no-repeat,
    var(--dot) 50% calc(66.667% - var(--dy)) / var(--n) var(--n) no-repeat,
    var(--dot) calc(75% + var(--n) / 4) calc(66.667% - var(--dy)) / var(--n) var(--n) no-repeat,
    var(--gh) calc(25% - var(--gl) / 4) calc(33.333% + var(--dyh)) / var(--gl) 1px no-repeat,
    var(--gv) calc(25% - 1px / 4) calc(33.333% + var(--dyv)) / 1px var(--gl) no-repeat,
    var(--gh) 50% calc(33.333% + var(--dyh)) / var(--gl) 1px no-repeat,
    var(--gv) 50% calc(33.333% + var(--dyv)) / 1px var(--gl) no-repeat,
    var(--gh) calc(75% + var(--gl) / 4) calc(33.333% + var(--dyh)) / var(--gl) 1px no-repeat,
    var(--gv) calc(75% + 1px / 4) calc(33.333% + var(--dyv)) / 1px var(--gl) no-repeat,
    var(--gh) calc(25% - var(--gl) / 4) calc(66.667% - var(--dyh)) / var(--gl) 1px no-repeat,
    var(--gv) calc(25% - 1px / 4) calc(66.667% - var(--dyv)) / 1px var(--gl) no-repeat,
    var(--gh) 50% calc(66.667% - var(--dyh)) / var(--gl) 1px no-repeat,
    var(--gv) 50% calc(66.667% - var(--dyv)) / 1px var(--gl) no-repeat,
    var(--gh) calc(75% + var(--gl) / 4) calc(66.667% - var(--dyh)) / var(--gl) 1px no-repeat,
    var(--gv) calc(75% + 1px / 4) calc(66.667% - var(--dyv)) / 1px var(--gl) no-repeat,
    linear-gradient(90deg, var(--ln) 0 1px, transparent 1px) 0 0 / calc(100% / var(--cols)) 100% repeat-x,
    linear-gradient(var(--ln), var(--ln)) 100% 0 / 1px 100% no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 calc(var(--op) * .9), #000 calc(100% - var(--op) * .9), transparent); mask-image: linear-gradient(180deg, transparent, #000 calc(var(--op) * .9), #000 calc(100% - var(--op) * .9), transparent);
  clip-path: inset(0 0 calc((1 - var(--draw, 1)) * 100%) 0); }
.wsm-page .wsm-orgs .wsm-brands__grid::after { /* rows: the gap centres top/bottom, the panel edges left/right */
  top: calc(var(--g) / -2); bottom: calc(var(--g) / -2); left: calc(-1 * var(--op)); right: calc(-1 * var(--op));
  background: linear-gradient(180deg, var(--ln) 0 1px, transparent 1px) 0 0 / 100% calc(100% / var(--rows)) repeat-y, linear-gradient(var(--ln), var(--ln)) 0 100% / 100% 1px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 calc(var(--op) * .9), #000 calc(100% - var(--op) * .9), transparent); mask-image: linear-gradient(90deg, transparent, #000 calc(var(--op) * .9), #000 calc(100% - var(--op) * .9), transparent);
  clip-path: inset(0 calc((1 - var(--draw, 1)) * 100%) 0 0); }

/* plaques: equal white tiles, subtle inner border, resting shadow; the logos keep their colours */
.wsm-page .wsm-orgs .wsm-ltile { position: relative; height: 108px; padding: 16px 22px; border: 0; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(19, 33, 47, .08), 0 1px 0 rgba(255, 255, 255, .1), 0 14px 26px -16px rgba(0, 0, 0, .85); cursor: default; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.wsm-page .elementor .wsm-orgs .wsm-ltile img { height: calc(var(--h, 32px) * 1.06); max-width: min(calc(var(--mw, 150px) * 1.06), 100%); }
/* the cell outline that lights on hover sits exactly on the grid lines (it moves back down as the plaque lifts) */
.wsm-page .wsm-orgs .wsm-ltile::before { content: ""; position: absolute; inset: calc(var(--g) / -2); z-index: -1; border: 1px solid rgba(79, 184, 232, 0); pointer-events: none; transition: border-color .45s var(--ease), transform .45s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .wsm-page .wsm-orgs .wsm-ltile:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(19, 33, 47, .08), 0 26px 40px -20px rgba(0, 0, 0, .9), 0 0 30px -8px rgba(0, 180, 255, .5); }
  .wsm-page .wsm-orgs .wsm-ltile:hover::before { transform: translateY(4px); border-color: rgba(79, 184, 232, .42); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  .wsm-page .wsm-orgs .wsm-ltile:hover, .wsm-page .wsm-orgs .wsm-ltile:hover::before { transform: none; }
}

/* mobile: two columns, rows only */
@media (max-width: 760px) {
  .wsm-page .wsm-orgs { --g: 10px; --op: 16px; --cols: 2; --rows: 6; }
  .wsm-page .wsm-orgs-panel { border-radius: 18px; }
  .wsm-page .wsm-orgs .wsm-brands__grid::before { display: none; }
  .wsm-page .wsm-orgs .wsm-ltile { height: 84px; padding: 12px 14px; border-radius: 10px; }
  .wsm-page .elementor .wsm-orgs .wsm-ltile img { height: calc(var(--h, 32px) * .84); max-width: min(var(--mw, 150px), 100%); }
}


/* ---------- v15 · 25 Oct · A2 tighter mobile (≤767): about 20% less scrolling, nothing removed ----------
   Gaps and padding tighten across the page, the Intelligence mock-ups show at 85%, and the footer lists sit side by
   side. Data to Action keeps the card layout the client accepted on 20 Oct (spacing only). Desktop/tablet untouched. */
@media (max-width: 767px) {
  /* Hero: less air under the header, before the outcomes and before the proof points */
  .wsm-page .wsm-hero { padding-top: 108px; padding-bottom: 40px; }
  .wsm-page .elementor .elementor-widget figure.wsm-engine { margin-top: 24px; }
  .wsm-page .wsm-hero .wsm-stats { margin-top: 44px; }

  /* Intelligence: one rhythm, 40px between capabilities */
  .wsm-page .wsm-pillars { padding-top: 56px; padding-bottom: 48px; }
  .wsm-page .wsm-pillars__head.wsm-split-head + .wsm-pillar { margin-top: 32px; }
  .wsm-page .wsm-pillars .wsm-pillar + .wsm-pillar { margin-top: 44px; }
  .wsm-page .wsm-pillars .elementor-widget.wsm-pillar__idx { margin-bottom: 14px; }
  .wsm-page .wsm-pillars .elementor-widget.wsm-pillar__tags { margin: 14px 0 14px; }
  .wsm-page .wsm-pillars .wsm-pillar { gap: 24px; }

  /* Data to Action: the card treatment the client accepted on 20 Oct stays; only gaps and padding tighten */
  .wsm-page .wsm-d2b { padding-top: 56px; padding-bottom: 40px; }
  .wsm-page .wsm-d2b__principles { margin-top: 28px; gap: 8px; }
  .wsm-page .wsm-d2b .wsm-d2b__principle { padding: 14px 16px 16px; }
  .wsm-page .wsm-d2b__journey { margin-top: 32px; }
  .wsm-page .wsm-d2b__steps { margin-top: 20px; }
  .wsm-page .wsm-d2b .wsm-d2b__step { padding: 20px 20px 22px; }
  .wsm-page .wsm-d2b__step + .wsm-d2b__step { margin-top: 28px; }
  .wsm-page .wsm-d2b__step + .wsm-d2b__step::before { top: -29px; height: 28px; }
  .wsm-page .wsm-d2b .wsm-d2b__num { margin-top: 16px; }

  /* the space before Industries */
  .wsm-page .wsm-ind2 { padding-top: 48px; }
  /* Intelligence mock-ups at 85% (they are illustrations; their text stays legible) */
  .wsm-page .wsm-pillars .wsm-ui { zoom: .85; }

  /* Organisations: slightly shorter plaques */
  .wsm-page .wsm-orgs .wsm-ltile { height: 74px; }

  /* footer: Solutions and Contact side by side, the eight industries in two columns */
  .wsm-footer { padding-top: 56px; }
  .wsm-footer__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .wsm-footer__brand { grid-column: 1 / -1; }
  .wsm-footer__grid > nav:nth-of-type(1) { grid-column: 1; grid-row: 2; }
  .wsm-footer__grid > nav:nth-of-type(3) { grid-column: 2; grid-row: 2; }
  .wsm-footer__grid > nav:nth-of-type(2) { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; align-items: start; }
  .wsm-footer__grid > nav:nth-of-type(2) > :first-child { grid-column: 1 / -1; }
  .wsm-footer__base { margin-top: 36px; }
  /* small trims: section heads, Hero proof points and link, stage and principle cards, testimonials, logos */
  .wsm-page .wsm-split-head { gap: 14px; }
  .wsm-page .wsm-hero .wsm-hero__after { margin-top: 16px; }
  .wsm-page .wsm-hero .wsm-stats { margin-top: 32px; }
  .wsm-page .wsm-hero .wsm-stats__item { padding-top: 18px; }
  .wsm-page .wsm-pillars .elementor-widget.wsm-pillar__idx { margin-bottom: 10px; }
  .wsm-page .wsm-testi-track { margin-top: 24px; }
  .wsm-page .wsm-tst .wsm-tcard { padding-top: 22px; padding-bottom: 18px; }
  .wsm-page .wsm-orgs { padding-bottom: 44px; }
  .wsm-page .wsm-orgs .wsm-brands__note { margin-top: 16px; }
}

/* ---------- v16 · 25 Oct · A4 Intelligence capabilities 01–03: one row gap in each copy column ----------
   The rows (0X, title, description, tags, link) were spaced by four different widget margins (22/16/24/26 desktop,
   10/16/14/14 phone). Each copy column now uses one row-gap and every widget margin inside it is zero, so the spacing
   is equal at every width and the same in all three capabilities. The second column (the mock-ups) is not touched. */
.wsm-page .wsm-pillars .wsm-pillar > .wsm-pillar__copy { display: flex; flex-direction: column; align-items: flex-start; row-gap: 20px; }
.wsm-page .wsm-pillars .wsm-pillar > .wsm-pillar__copy > .elementor-widget { margin: 0; }
.wsm-page .wsm-pillars .wsm-pillar > .wsm-pillar__copy > .elementor-widget :is(p, h2, h3, ul):last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .wsm-page .wsm-pillars .wsm-pillar > .wsm-pillar__copy { row-gap: 16px; }
}

/* ---------- v17 · 26 Oct · R4 Intelligence visuals on phones: no blur under the glass panels ----------
   On Android the blurred glass panels were repainted on every scroll frame and flickered. The glass fill is 82–86%
   opaque, so without the blur the panels look the same. Phones only; desktop and tablet keep the blur. */
@media (max-width: 767px) {
  .wsm-page .wsm-pillars .wsm-ui .wsm-panel { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- v18 · 26 Oct · R2 Hero core label on phones: two lines inside the WSM square ----------
   "Intelligence layer" ran 10px past both sides of the 87px square. min-content puts each word on its own line
   (INTELLIGENCE / LAYER) without touching the text; tracking is a little tighter. Phones only; desktop unchanged. */
@media (max-width: 767px) {
  .wsm-page .wsm-hero .wsm-core__box span { width: min-content; white-space: normal; text-align: center; line-height: 1.2; letter-spacing: .06em; }
}

/* ---------- v19 · 26 Oct · R6 phones: shorter empty band after the 02 visual ----------
   The band between the workflow panel and "03" was 44px (47px visible). Cut by about 35%; the visual is unchanged. */
@media (max-width: 767px) {
  .wsm-page .wsm-pillars .wsm-pillar--rev + .wsm-pillar { margin-top: 28px; }
}

/* ---------- v20 · 26 Oct · R5 Organisations & Brands, desktop/tablet (≥768): smaller logo wall, more depth behind it ----------
   1. The whole showcase is 82% of its former size: panel width, panel padding, gaps, plaque height and padding and the
      logos all × .82, so each logo keeps the same share of its plaque and the connection grid (built on --g/--op) still
      runs through the gaps. Phones keep the client-approved sizes (the ≤760 rules above are untouched).
   2. Depth: behind the panel, a faint square grid fading out from the centre, two more soft curves in the Hero's line
      language and five small connection nodes on them. Static (no new loop), low opacity. Hover lift + line unchanged. */
@media (min-width: 768px) {
  .wsm-page .wsm-orgs { --g: calc(clamp(22px, 2.6vw, 38px) * .82); --op: calc(clamp(22px, 3.2vw, 48px) * .82); isolation: isolate; }
  .wsm-page .wsm-orgs .wsm-orgs-panel { width: 82%; margin-left: auto; margin-right: auto; }
  .wsm-page .wsm-orgs .wsm-ltile { height: 88.5px; padding: 13px 18px; }
  .wsm-page .elementor .wsm-orgs .wsm-ltile img { height: calc(var(--h, 32px) * 1.06 * .82); max-width: min(calc(var(--mw, 150px) * 1.06 * .82), 100%); }
  .wsm-page .wsm-orgs::after { content: ""; position: absolute; inset: 0; z-index: -1; width: auto; height: auto; pointer-events: none;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='none' fill='none'%3E%3Cg stroke='%234FB8E8'%3E%3Cpath d='M0 330 C300 330 470 120 720 120 C970 120 1140 300 1440 300' stroke-opacity='.16'/%3E%3Cpath d='M0 520 C360 520 520 260 760 250 C1010 240 1160 120 1440 110' stroke-opacity='.1'/%3E%3C/g%3E%3Cg fill='%23A6E2FA'%3E%3Ccircle cx='238' cy='292' r='2.2' fill-opacity='.55'/%3E%3Ccircle cx='720' cy='120' r='2.6' fill-opacity='.6'/%3E%3Ccircle cx='1212' cy='278' r='2.2' fill-opacity='.5'/%3E%3Ccircle cx='414' cy='424' r='2' fill-opacity='.4'/%3E%3Ccircle cx='1104' cy='176' r='2' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") 50% 0 / 100% 600px no-repeat,
      linear-gradient(90deg, rgba(79, 184, 232, .055) 0 1px, transparent 1px) 50% 0 / 64px 64px,
      linear-gradient(180deg, rgba(79, 184, 232, .055) 0 1px, transparent 1px) 50% 0 / 64px 64px;
    -webkit-mask-image: radial-gradient(70% 62% at 50% 58%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 62% at 50% 58%, #000 30%, transparent 100%); }
}

/* ---------- v21 · 26 Oct · R3 capability 03 tags at narrow phones (<390): one row, as from 390 up ----------
   Portals / Dashboards / Integrations need 349px with 22px gaps, so below 390 they broke into an uneven
   2 + 1. Slightly tighter gap and tracking keep them on one line. 01 and 02 (which always wrap) are unchanged. */
@media (max-width: 389px) {
  .wsm-page .wsm-pillars .wsm-pillar:last-of-type .wsm-pillar__copy ul { column-gap: 12px; }
  .wsm-page .wsm-pillars .wsm-pillar:last-of-type .wsm-pillar__copy ul li { letter-spacing: .06em; }
}

/* ---------- v22 · 26 Oct · 03 Connected Systems panel on phones: opaque fill ----------
   Without the blur (v17) the table row under its top edge showed through the 82–86% glass. Same two colours, fully
   opaque. Background only: no change to layout or animation. */
@media (max-width: 767px) {
  .wsm-page .wsm-pillars .wsm-ui--sys .wsm-int { background: linear-gradient(180deg, #13293D, #091726); }
}

/* ---------- v23 · 26 Oct · D1 → v30 · 27 Oct: the 02 connector loops again, paused off-screen ----------
   v23 set animation:none on .is-settled, which stopped the flow after one entrance (and snapped the dashes back to 0).
   The wsm-dash loop is seamless as it is: dash 3 + gap 5 = 8, and it runs 0 → -16 (two whole cycles), linear, no
   alternate, no opacity. Off-screen it is only paused (.is-offscreen, set by wsm-home-v2.js) and resumes from the
   same frame: never removed or restarted. Reduced motion keeps animation:none (static dashes). Hidden on phones. */
.wsm-page .wsm-ui--flow.is-offscreen .wsm-flowlink path { animation-play-state: paused; }

/* ---------- v24 · 26 Oct · D2 phones: less empty space inside the 02 chat ----------
   The chat filled a fixed 470px phone, leaving ~88px of empty dark chat under the last "Confirm" bubble. The phone is
   67px shorter (≈ −65% of that space); the workflow card follows it up with the same 48px overlap. Bubbles, buttons,
   the card and the animation are unchanged. */
@media (max-width: 767px) {
  .wsm-page .wsm-pillars .wsm-ui--flow .wsm-phone { height: 403px; }
}

/* ---------- v25 · 26 Oct · D3 phones: ops-portal table, location column centred ----------
   The location (Block C / Plant 2 …) sat 22px after the SR number and 150–210px before the pill. The pill column is now
   one fixed width on every row (6em ≥ the widest pill, "Scheduled") and the SR column fits its text (same width on every
   row: tabular figures), so the middle column is identical on every row and
   its text is centred in it: halfway between the SR number and the pill column. Pills stay right-aligned; row height
   unchanged. Phones first; at Ali's OK (26 Oct) desktop and tablet too, which had the same lean. */
.wsm-page .wsm-pillars .wsm-pillar__uiw .wsm-table li { grid-template-columns: max-content minmax(0, 1fr) 6em; }
.wsm-page .wsm-pillars .wsm-pillar__uiw .wsm-table li > span:nth-child(2) { text-align: center; }

/* ---------- v26 · 26 Oct · D4 Organisations (≥768): the qualification sentence lines up with the logo panel ----------
   It started at the heading's edge, 62–112px left of the 82% panel, 22px below it. It now takes the panel's width and
   centring (so its left edge is the panel's), 13px below it. Phones already line up and are unchanged. */
@media (min-width: 768px) {
  .wsm-page .wsm-orgs .wsm-brands__note { width: 82%; margin-left: auto; margin-right: auto; margin-top: 13px; }
}

/* ---------- v27 · 27 Oct · R2-1 inner page: homepage tokens only ----------
   Token audit (page 210 vs page 36, computed styles at 1440 + 390): every colour, glow, type size and spacing below
   was a value the homepage doesn't use. Each now takes the homepage value named in its comment. Inner-page classes
   only (.wsm-ihero, .wsm-band, .wsm-2col, .wsm-alt, .wsm-fgrid, .wsm-proof, .wsm-single-testi): none exist on page 36. */
.wsm-page .wsm-ihero { background: radial-gradient(90% 70% at 70% 35%, #0D2740 0%, var(--ink) 62%); } /* = .wsm-hero (no extra #00B4FF haze) */
.wsm-page .wsm-band--alt { background: radial-gradient(70% 50% at 50% 100%, rgba(0, 180, 255, .08), transparent 70%), linear-gradient(180deg, var(--ink), #081624 50%, var(--ink)); } /* = .wsm-ind2 */
.wsm-page .wsm-ihero__title .elementor-heading-title { font-size: clamp(44px, 4.9vw, 78px); } /* = hero H1 */
.wsm-page .wsm-ihero .elementor-widget.wsm-ihero__intro { margin-top: 28px; max-width: 32em; color: #B8C7D5; font-size: clamp(16.5px, 1.3vw, 18.5px); } /* = .wsm-hero__lead */
.wsm-page :is(.wsm-2col__title, .wsm-alt__title) .elementor-heading-title { font-size: clamp(30px, 2.9vw, 44px); } /* = .wsm-pillar__title */
.wsm-page :is(.wsm-2col, .wsm-alt__row, .wsm-alt__row--rev) { gap: clamp(32px, 5vw, 96px); } /* = .wsm-pillar */
.wsm-page .wsm-alt { gap: clamp(80px, 9vw, 150px); } /* = pillar → pillar */
.wsm-page :is(.wsm-2col__media, .wsm-alt__media) img { border-radius: 16px; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .8), 0 0 50px -14px rgba(0, 180, 255, .25); } /* = .wsm-window */
.wsm-page .wsm-fgrid > .wsm-pillar__copy { padding: 30px 30px 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 34px -12px rgba(0, 0, 0, .6), 0 0 26px -6px rgba(0, 180, 255, .18); } /* padding = .wsm-tcard, shadow = glass card (.wsm-chip / .wsm-d2b__principle) */
.wsm-page .wsm-fgrid .wsm-pillar__idx, .wsm-page .wsm-fgrid .wsm-pillar__idx .elementor-heading-title { font-size: 56px; } /* = .wsm-pillar__idx on phones */
.wsm-page .wsm-fgrid .wsm-pillar__title .elementor-heading-title { font-size: clamp(17px, 1.4vw, 21px); font-weight: 620; font-stretch: 106%; letter-spacing: -.01em; line-height: 1.18; } /* = .wsm-icard__title */
@media (max-width: 767px) {
  .wsm-page .wsm-ihero { padding: 108px 0 40px; } /* = .wsm-hero */
  .wsm-page :is(.wsm-2col, .wsm-alt__row, .wsm-alt__row--rev) { gap: 24px; } /* = .wsm-pillar */
  .wsm-page .wsm-alt { gap: 44px; } /* = pillar → pillar */
  .wsm-page .wsm-fgrid > .wsm-pillar__copy, .wsm-page .wsm-single-testi .wsm-tcard { padding: 22px 22px 18px; } /* = .wsm-tst .wsm-tcard */
  .wsm-page .wsm-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; } /* = .wsm-stats */
  .wsm-page .wsm-proof__item, .wsm-page .wsm-proof__item:nth-child(odd) { padding-top: 18px; }
  .wsm-page .wsm-proof__item:nth-child(even) { padding-left: 24px; }
  .wsm-page .wsm-proof__item:nth-child(even)::before { display: block; }
  .wsm-page .wsm-proof__item:nth-child(even)::after { left: 24px; }
}

/* ---------- v28 · 27 Oct · R2-4 Organisations (≥768): the note lines up with the logos, not the panel border ----------
   The plaques start at the panel's content edge (panel padding = --op, no border), so the note takes the panel's
   width minus that padding on both sides: its left edge = the first plaque column's left edge. Gap panel → note
   13 → 8px. Phones unchanged. */
@media (min-width: 768px) {
  .wsm-page .wsm-orgs .wsm-brands__note { width: calc(82% - 2 * var(--op)); margin-top: 8px; }
}

/* ---------- v29 · 27 Oct · R2-3 new blocks: FAQ (Elementor Accordion) + Full-Width Visual ----------
   Text + Visual reuses .wsm-alt__row (add .wsm-alt__row--rev to put the visual first), so it needs no new CSS.
   FAQ = Elementor's own Accordion widget (nested-accordion: <details>/<summary>; Tab, Enter/Space, arrows, Escape)
   with class .wsm-faq: each item is the homepage glass card (var(--glass), 1px var(--edge), radius 14px), titles use
   the card-title tokens (.wsm-icard__title), answers the body copy colour, icon cyan, a cyan focus ring.
   Full-Width Visual = one Image widget (.wsm-fvis__media) in the .wsm-window frame; the caption is optional. */
.wsm-page .elementor-widget.wsm-faq { max-width: 860px; margin-top: var(--wsm-head-gap);
  --n-accordion-title-icon-order: 1; --n-accordion-title-justify-content: space-between; --n-accordion-icon-size: 12px;
  --n-accordion-title-normal-color: #fff; --n-accordion-title-hover-color: #fff; --n-accordion-title-active-color: #fff;
  --n-accordion-icon-normal-color: var(--cyan); --n-accordion-icon-hover-color: var(--cyan-hi); --n-accordion-icon-active-color: var(--cyan-hi); }
.wsm-page .wsm-faq .e-n-accordion-item-title-header { flex: 1; text-align: left; }
.wsm-page .wsm-faq .e-n-accordion { display: flex; flex-direction: column; gap: 12px; }
.wsm-page .wsm-faq .e-n-accordion-item { border-radius: 14px; background: var(--glass); border: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 34px -12px rgba(0, 0, 0, .6); transition: border-color .35s var(--ease), box-shadow .35s var(--ease); }
.wsm-page .wsm-faq .e-n-accordion-item[open] { border-color: rgba(79, 184, 232, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 14px 34px -12px rgba(0, 0, 0, .6), 0 0 26px -6px rgba(0, 180, 255, .18); }
.wsm-page .wsm-faq .e-n-accordion-item-title { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; border: 0; border-radius: 14px; background: none; cursor: pointer; list-style: none; }
.wsm-page .wsm-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.wsm-page .wsm-faq .e-n-accordion-item-title:focus-visible { outline: 2px solid var(--cyan-hi); outline-offset: 2px; }
.wsm-page .wsm-faq .e-n-accordion-item-title-text { margin: 0; color: #fff; font-size: clamp(17px, 1.4vw, 21px); font-weight: 620; font-stretch: 106%; letter-spacing: -.01em; line-height: 1.18; }
.wsm-page .wsm-faq .e-n-accordion-item-title-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(79, 184, 232, .45); }
.wsm-page .wsm-faq .e-n-accordion-item > .e-con { padding: 0 24px 22px; border: 0; background: none; }
.wsm-page .wsm-faq .wsm-faq__a { margin: 0; max-width: 40em; color: #A9BACA; }
.wsm-page .wsm-faq .wsm-faq__a p { margin: 0; }
.wsm-page .wsm-faq .wsm-faq__a p + p { margin-top: 1em; }
.wsm-page .wsm-fvis .wsm-fvis__media { width: 100%; }
.wsm-page .wsm-fvis .wsm-fvis__media figure { margin: 0; }
.wsm-page .wsm-fvis .wsm-fvis__media img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--edge); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .8), 0 0 50px -14px rgba(0, 180, 255, .25); }
.wsm-page .wsm-fvis .widget-image-caption { margin: 16px 0 0; max-width: 60ch; color: var(--muted); font-size: 14.5px; line-height: 1.45; text-align: left; }
@media (max-width: 767px) {
  .wsm-page .wsm-faq .e-n-accordion { gap: 10px; }
  .wsm-page .wsm-faq .e-n-accordion-item-title { padding: 18px; gap: 14px; }
  .wsm-page .wsm-faq .e-n-accordion-item > .e-con { padding: 0 18px 18px; }
}