/* Westbury Global Services — "Modern Global" */
:root {
  --blue: #006ee9;
  --blue-dark: #055abd;
  --navy: #071f49;
  --muted: #4d6480;
  --line: #cfe2f6;
  --ice: #eaf5ff;
  --header-h: 78px;
  --pad: clamp(20px, 4vw, 56px);
  --max: 1240px;
  --font-body: 'Manrope', Arial, Helvetica, sans-serif;
  --font-head: 'Sora', 'Manrope', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--navy); background: #fff; line-height: 1.65; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-head); }
p { color: var(--muted); }
a { color: var(--blue); }
:focus-visible { outline: 3px solid #72b5fc; outline-offset: 4px; border-radius: 4px; }
section:focus { outline: none; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 6px; text-decoration: none; }
.skip-link:focus { top: 12px; }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--pad); }

.eyebrow { font-size: 11px; letter-spacing: 2.1px; font-weight: 800; color: var(--blue); text-transform: uppercase; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 46px; padding: 12px 20px; border-radius: 6px; border: 1px solid var(--blue); font: 600 14px/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .2s, box-shadow .2s, transform .2s; }
.btn.solid { background: var(--blue); color: #fff; box-shadow: 0 7px 18px #0775e525; }
.btn.solid:hover { background: var(--blue-dark); }
.btn.outline { background: #f4faffb8; color: var(--blue); }
.btn.outline:hover { background: #e3f1ff; }
.btn:active { transform: translateY(1px); }

/* Header */
.header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad))); background: #ffffffee; backdrop-filter: blur(10px); border-bottom: 1px solid #eaf0f7; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -.65px; line-height: 1.15; }
.brand img { width: 48px; height: 48px; object-fit: contain; }
.brand > span > span { display: block; color: #727986; font-weight: 400; font-size: 14px; letter-spacing: 0; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.site-nav a:not(.btn) { color: var(--navy); text-decoration: none; font-size: 14px; font-weight: 600; padding: 10px 2px; position: relative; }
.site-nav a:not(.btn)::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 4px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.site-nav a:not(.btn):hover::after, .site-nav a.is-current::after { transform: scaleX(1); }
.nav-toggle { display: none; background: transparent; border: 1px solid var(--line); border-radius: 8px; width: 46px; height: 46px; padding: 10px; color: var(--navy); cursor: pointer; }
.nav-toggle svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* ───────── Stage (hero + services) ───────── */
.stage { position: relative; isolation: isolate; overflow: clip;
  background:
    radial-gradient(ellipse at 95% 0%, #bcddff 0%, transparent 46%),
    radial-gradient(ellipse at 10% 86%, #d3eaff 0%, transparent 44%),
    linear-gradient(125deg, #f2f8ff 4%, #eaf5ff 52%, #dceeff 100%); }

.globe { position: absolute; left: 36%; top: 24px; width: clamp(520px, 52vw, 820px); aspect-ratio: 1; border: 1px solid #328be6; border-radius: 50%; opacity: .42; pointer-events: none; z-index: 1; transform-origin: center; will-change: transform; }
.meridian, .latitude { position: absolute; border: 1px solid #61a6eb; border-radius: 50%; }
.meridian.one { inset: 0 22%; } .meridian.two { inset: 0 38%; opacity: .25; }
.latitude.one { inset: 24% 0; } .latitude.two { inset: 39% 0; opacity: .25; }
.point { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #0077ee; box-shadow: 0 0 0 6px #77b9ff28; }
.point.a { top: 22%; right: 7%; } .point.b { top: 55%; right: -.5%; } .point.c { bottom: 7%; left: 20%; }

.hero-scene, .services-scene { position: relative; z-index: 2; min-width: 0; }
.hero-grid { display: grid; grid-template-columns: .93fr 1.07fr; align-items: center; gap: clamp(24px, 4vw, 64px); max-width: var(--max); margin: 0 auto; padding: 62px var(--pad) 57px; }
.hero-copy { position: relative; min-width: 0; }
.hero-copy::before { content: ''; position: absolute; inset: -24px -22px; z-index: -1; background: radial-gradient(ellipse, #f0f8ffde 35%, transparent 75%); pointer-events: none; }
h1 { font-size: clamp(30px, 3.9vw, 54px); font-weight: 700; line-height: 1.16; letter-spacing: -.045em; margin: 22px 0 23px; }
h1 span, h2 span { color: var(--blue); }
.hero-copy > p:not(.eyebrow) { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.8; font-weight: 500; max-width: 420px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.team-photo { position: relative; min-width: 0; border: 5px solid #ffffffc9; border-radius: 17px; overflow: hidden; box-shadow: 0 22px 50px #1f6baa25, 0 0 0 1px #a3d2fd70; background: #dbe9f7; }
/* 3:2 matches the source photo exactly, so nobody is cropped out */
.team-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.team-photo figcaption { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 7px; padding: 10px 13px; border-radius: 6px; background: #ffffffed; backdrop-filter: blur(5px); color: #26405b; font-size: 12px; font-weight: 600; }
.photo-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex: none; }

.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 24px var(--pad); background: #fafdff; border-top: 1px solid var(--line); }
.benefits li { display: flex; align-items: center; justify-content: center; gap: 12px; border-right: 1px solid #e0e9f4; }
.benefits li:last-child { border: 0; }
.benefits svg, .service-grid svg { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; background: #e8f3ff; border-radius: 10px; box-sizing: content-box; flex: none; }
.benefits svg { width: 25px; height: 25px; padding: 10px; }
.benefits strong { font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: -.25px; }

.services-scene { text-align: center; padding: 72px var(--pad) 64px; background: radial-gradient(ellipse 48% 46% at 50% 46%, #ffffffd9, transparent 100%); }
.services-scene > * { max-width: calc(var(--max) - 2 * var(--pad)); margin-inline: auto; }
h2 { font-size: clamp(28px, 3vw, 42px); font-weight: 600; line-height: 1.15; letter-spacing: -.04em; margin: 16px 0; }

/* Pinned, scroll-driven mode (desktop, motion allowed) — class set by main.js */
.is-pinned .stage-wrap { height: 260vh; }
.is-pinned .stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: grid; }
.is-pinned .hero-scene, .is-pinned .services-scene { grid-area: 1 / 1; will-change: transform, opacity; }
.is-pinned .hero-scene { display: flex; flex-direction: column; height: 100%; }
.is-pinned .hero-grid { flex: 1; width: 100%; padding-block: 24px; }
.is-pinned .team-photo { justify-self: end; width: min(100%, calc((100vh - var(--header-h) - 200px) * 1.5)); }
.is-pinned .services-scene { display: flex; flex-direction: column; justify-content: center; padding-block: 24px; opacity: 0; }
.is-pinned .services-scene > * { width: 100%; }

/* ───────── Sections ───────── */
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section h2 { margin-top: 14px; }
.section-head { max-width: 780px; }
.section-head blockquote { font-family: var(--font-head); font-size: clamp(17px, 1.6vw, 21px); font-weight: 500; line-height: 1.5; letter-spacing: -.02em; border-left: 3px solid var(--blue); padding-left: 18px; margin: 22px 0 18px; }

.team { background: #fff; }
.ceo { display: grid; grid-template-columns: 280px 1fr; gap: clamp(20px, 4vw, 56px); margin-top: 48px; padding: clamp(22px, 3vw, 40px); border: 1px solid #c8dff6; border-radius: 16px; background: linear-gradient(125deg, #f2f8ff, #eaf5ff 60%, #dceeff); }
.ceo-id { display: flex; align-items: center; gap: 16px; align-self: start; }
.ceo h3 { font-size: 21px; letter-spacing: -.03em; }
.role { color: var(--blue); font-weight: 700; font-size: 13px; }
.ceo-bio p + p, .bio p + p, .careers-card p + p { margin-top: 12px; }
.ceo-bio p, .bio p { font-size: 15px; }
.avatar { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #e1efff; color: var(--blue); font: 600 15px var(--font-head); border: 1px solid #b9d8f8; }
.ceo .avatar { width: 64px; height: 64px; font-size: 19px; background: #fff; }
.section-sub { max-width: 780px; margin-top: 64px; }
.section-sub h3 { font-size: clamp(20px, 2vw, 26px); letter-spacing: -.03em; margin-bottom: 12px; }

.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; align-items: start; }
.person details { border: 1px solid #d5e5f6; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px #285a930a; transition: border-color .2s, box-shadow .2s; }
.person details:hover, .person details[open] { border-color: #9cc8f5; box-shadow: 0 12px 32px #285a9318; }
.person summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; border-radius: 12px; }
.person summary::-webkit-details-marker { display: none; }
.who { flex: 1; min-width: 0; }
.who strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 15px; letter-spacing: -.02em; }
.who small { display: block; color: var(--muted); font-size: 13px; }
.plus { position: relative; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #e8f3ff; }
.plus::before, .plus::after { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 2px; background: var(--blue); transition: transform .25s; }
.plus::after { transform: rotate(90deg); }
details[open] .plus::after { transform: rotate(0); }
.bio { padding: 2px 18px 20px 80px; }

.careers { background: radial-gradient(ellipse at 0% 100%, #d3eaff 0%, transparent 50%), linear-gradient(125deg, #f2f8ff, #eaf5ff 55%, #dceeff); border-block: 1px solid var(--line); overflow: hidden; }
.careers-grid, .contact-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.careers-grid > div > p:not(.eyebrow), .contact-grid > div > p:not(.eyebrow) { font-size: 16px; max-width: 520px; }
.careers-card { background: #fff; border: 1px solid #c8dff6; border-radius: 16px; padding: clamp(22px, 3vw, 36px); box-shadow: 0 12px 32px #285a9310; }
.careers-card h3 { font-size: 20px; letter-spacing: -.03em; margin-bottom: 12px; }
.careers-card p { font-size: 15px; }

.contact { background: #fff; }
.note { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 14px !important; font-weight: 600; color: #26405b; }
.contact-cards { display: grid; gap: 14px; }
.contact-card { position: relative; display: block; padding: 22px 60px 22px 24px; border: 1px solid #c8dff6; border-radius: 14px; background: #f7fbff; color: var(--navy); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.contact-card strong { display: block; font-family: var(--font-head); font-weight: 600; font-size: 17px; letter-spacing: -.02em; }
.contact-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.contact-card .go { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--blue); transition: transform .2s; }
.contact-card:hover { transform: translateY(-2px); border-color: var(--blue); box-shadow: 0 14px 34px #285a931c; }
.contact-card:hover .go { transform: translate(3px, calc(-50% - 3px)); }
.contact-card.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.contact-card.primary small, .contact-card.primary .go { color: #dcecff; }
.social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.social a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid #c8dff6; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; background: #fff; transition: background-color .2s, border-color .2s; }
.social a:hover { background: #e8f3ff; border-color: var(--blue); }

/* Footer */
.footer { background: #f4f9ff; border-top: 1px solid var(--line); padding: 34px 0; }
.footer-grid { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; }
.footer .brand { font-size: 17px; } .footer .brand img { width: 44px; height: 44px; mix-blend-mode: multiply; } .footer .brand > span > span { font-size: 12px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.footer nav a { color: var(--navy); font-size: 14px; font-weight: 600; text-decoration: none; padding: 10px 0; }
.footer nav a:hover { color: var(--blue); }
.copyright { font-size: 13px; }

/* Reveal on scroll (only when JS runs and motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ───────── Responsive ───────── */
@media (max-width: 860px) {
  :root { --header-h: 68px; }
  .nav-toggle { display: block; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--pad) 20px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px #07234d1a; display: none; }
  .site-nav.open { display: flex; }
  .site-nav a:not(.btn) { padding: 14px 2px; font-size: 16px; border-bottom: 1px solid #eef3f9; }
  .site-nav a:not(.btn)::after { display: none; }
  .site-nav .btn { margin-top: 16px; }
  .brand { font-size: 17px; } .brand img { width: 40px; height: 40px; } .brand > span > span { font-size: 12px; }

  .hero-grid { grid-template-columns: 1fr; padding: 40px var(--pad) 36px; gap: 28px; }
  .globe { left: -90px; top: 230px; width: 560px; }
  .benefits { grid-template-columns: 1fr; gap: 14px; padding: 20px var(--pad); }
  .benefits li { border: 0; justify-content: flex-start; }
  .services-scene { padding: 56px var(--pad); border-top: 1px solid var(--line); }
  .ceo, .people, .careers-grid, .contact-grid { grid-template-columns: 1fr; }
  .bio { padding-left: 18px; }
}
@media (max-width: 420px) {
  h1 { font-size: clamp(25px, 7.6vw, 30px); }
  .hero-actions .btn, .service-bottom .btn { width: 100%; }
}

/* ═════════ Hero redesign: cobalt panel, layered photo, curved foot ═════════ */
.stage { background: radial-gradient(ellipse at 0% 100%, #d3eaff 0%, transparent 42%), linear-gradient(115deg, #f6fbff 0%, #eef7ff 45%, #e2f0ff 100%); }

.hero-panel { position: absolute; top: 0; right: 0; z-index: 0; width: 58%; height: var(--hero-h, 100%); pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(ellipse 80% 70% at 62% 34%, #2277ff 0%, #0b52e4 48%, #0636b4 100%);
  -webkit-clip-path: ellipse(100% 90% at 100% 45%); clip-path: ellipse(100% 90% at 100% 45%); }

.cursor-glow { position: absolute; left: 0; top: 0; z-index: 1; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .45s ease; mix-blend-mode: screen; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(140, 232, 255, .42) 0%, rgba(120, 215, 255, .16) 38%, transparent 68%); }
.cursor-glow.on { opacity: 1; }

/* Globe: pale lines over the cobalt panel, easing to blue as the services scene takes over (--p is set by main.js) */
.globe { left: 47%; top: -6%; width: clamp(560px, 50vw, 940px); border-color: color-mix(in srgb, #328be6 calc(var(--p, 0) * 100%), #b9e0ff); opacity: .6; }
.meridian, .latitude { border-color: color-mix(in srgb, #61a6eb calc(var(--p, 0) * 100%), #b9e0ff); }
.point { background: color-mix(in srgb, #0077ee calc(var(--p, 0) * 100%), #d9f3ff); box-shadow: 0 0 0 6px #9fdcff33; }

.hero-grid { grid-template-columns: .92fr 1.08fr; max-width: 1480px; gap: clamp(28px, 4.5vw, 84px); padding-bottom: 110px; }
.hero-copy::before { inset: -30px -26px; background: radial-gradient(ellipse, #f6fbffd9 40%, transparent 76%); }
.hero-copy .eyebrow { font-size: clamp(11px, .95vw, 15px); letter-spacing: .28em; }
h1 { font-size: clamp(34px, 4.1vw, 76px); line-height: 1.1; letter-spacing: -.05em; margin: 26px 0 28px; }
.hero-copy > p:not(.eyebrow) { font-size: clamp(16px, 1.45vw, 23px); line-height: 1.6; max-width: 520px; }
.hero-actions { margin-top: 34px; }
.hero-actions .btn { min-height: 54px; padding: 14px 26px; font-size: 16px; border-radius: 8px; }
.hero-actions .btn.outline { background: #ffffffd9; }

.hero-visual { position: relative; min-width: 0; }
.photo-back { position: absolute; inset: 0; border-radius: 22px; border: 1px solid #ffffff55; background: #ffffff14; transform: translate(22px, 22px) rotate(1.2deg); box-shadow: 0 30px 60px #021f6e40; }
.team-photo { border: 6px solid #fff; border-radius: 20px; box-shadow: 0 34px 70px #02185a66, 0 0 0 1px #ffffff40; transform: perspective(1600px) rotateY(-4deg) rotateX(1deg); transform-origin: 60% 50%; }
.team-photo figcaption { left: 18px; bottom: 18px; gap: 10px; padding: 12px 18px; border-radius: 10px; background: #fffffff2; color: var(--navy); font-size: clamp(12px, 1vw, 15px); box-shadow: 0 10px 24px #02185a33; }
.team-photo figcaption svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.hero-foot { position: relative; }
.hero-wave { position: absolute; left: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(60px, 9vw, 120px); max-width: none; pointer-events: none; }
.wave-back { fill: #d6eaff; opacity: .75; }
.wave-front { fill: #fafdff; }
.benefits { border-top: 0; padding-block: 8px 28px; max-width: 1100px; margin-inline: auto; background: transparent; }
.hero-foot { background: #fafdff; }
.benefits svg { border-radius: 50%; padding: 13px; }
.benefits strong { font-size: clamp(14px, 1.1vw, 17px); }

.is-pinned .hero-grid { padding-block: 24px 96px; }
.is-pinned .team-photo { width: 100%; justify-self: auto; }
.is-pinned .hero-visual { justify-self: end; width: min(100%, calc((100vh - var(--header-h) - 270px) * 1.5)); }

@media (max-width: 860px) {
  .hero-panel, .stage > .globe { display: none; }
  .hero-grid { grid-template-columns: 1fr; padding: 44px var(--pad) 0; gap: 36px; }
  h1 { font-size: clamp(30px, 9vw, 52px); margin: 18px 0 20px; }
  .hero-copy .eyebrow { letter-spacing: .2em; }
  .hero-actions .btn { min-height: 50px; font-size: 15px; }
  /* The cobalt panel becomes a full-bleed block behind the photo */
  .hero-visual { margin-inline: calc(var(--pad) * -1); padding: 54px var(--pad) clamp(84px, 17vw, 130px); overflow: hidden; border-top-left-radius: 100% 64px;
    background: radial-gradient(ellipse 90% 70% at 60% 30%, #2277ff 0%, #0b52e4 50%, #0636b4 100%); }
  .hero-visual::before { content: ''; position: absolute; left: 50%; top: 50%; width: 130%; aspect-ratio: 1; transform: translate(-42%, -50%); border-radius: 50%; border: 1px solid #b9e0ff66;
    background: radial-gradient(ellipse 28% 50% at 50% 50%, transparent 99%, #b9e0ff55 100%, transparent calc(100% + 1px)), radial-gradient(ellipse 50% 22% at 50% 50%, transparent 99%, #b9e0ff55 100%, transparent calc(100% + 1px)); }
  .photo-back { inset: 54px var(--pad) clamp(84px, 17vw, 130px); transform: translate(10px, 12px) rotate(1.5deg); }
  .team-photo { position: relative; z-index: 1; transform: none; border-width: 4px; border-radius: 16px; }
  .team-photo figcaption { left: 10px; bottom: 10px; padding: 8px 12px; }
  .benefits { padding: 4px var(--pad) 24px; }
}
@media (max-width: 420px) {
  h1 { font-size: clamp(26px, 8.6vw, 36px); }
}

/* ═════════ v3: light "glass" hero panel + orbiting service cards ═════════ */
.hero-panel { background: radial-gradient(ellipse 75% 70% at 60% 30%, #e6f2ff 0%, #cfe4fd 55%, #b9d7fb 100%); }
.cursor-glow { mix-blend-mode: normal; background: radial-gradient(circle, rgba(64, 170, 255, .26) 0%, rgba(90, 190, 255, .1) 40%, transparent 68%); }
.globe { border-color: color-mix(in srgb, #328be6 calc(var(--p, 0) * 100%), #7fb6ee); opacity: .5; }
.meridian, .latitude { border-color: color-mix(in srgb, #61a6eb calc(var(--p, 0) * 100%), #8fc0f0); }
.point { background: #0077ee; box-shadow: 0 0 0 6px #77b9ff33; }
.photo-back { border-color: #ffffff; background: #ffffff80; box-shadow: 0 26px 50px #1f5fae22; }
.team-photo { box-shadow: 0 30px 60px #1f5fae3d, 0 0 0 1px #a3d2fd80; }
.team-photo figcaption { box-shadow: 0 10px 24px #1f5fae26; }
.wave-back { fill: #e3f0ff; }

/* Services heading: title left, supporting copy right */
.services-scene { text-align: left; }

/* Cards: glassy white by default, cobalt when active */

/* CTA bar */

/* Pinned: the track is longer — the extra scroll after the hero transition drives the orbit */
.is-pinned .stage-wrap { height: 480vh; }

@media (max-width: 860px) {
  .hero-visual { background: radial-gradient(ellipse 90% 70% at 60% 30%, #e6f2ff 0%, #cfe4fd 55%, #b9d7fb 100%); }
  .hero-visual::before { border-color: #7fb6ee88; background: radial-gradient(ellipse 28% 50% at 50% 50%, transparent 99%, #7fb6ee77 100%, transparent calc(100% + 1px)), radial-gradient(ellipse 50% 22% at 50% 50%, transparent 99%, #7fb6ee77 100%, transparent calc(100% + 1px)); }
}

/* ═════════ v4: Our Team intro + CEO feature card ═════════ */
.team { overflow: clip; background: radial-gradient(ellipse at 100% 0%, #e3f0ff 0%, transparent 42%), radial-gradient(ellipse at 0% 100%, #e9f4ff 0%, transparent 38%), #fbfdff; }
.team .container { position: relative; z-index: 1; }
.team .section-head { max-width: 940px; }
.team .section-head .eyebrow { font-size: 13px; letter-spacing: .2em; font-weight: 700; }
.team .section-head h2 { font-size: clamp(32px, 4vw, 56px); font-weight: 700; letter-spacing: -.045em; }
.team .section-head blockquote { border-left-width: 4px; border-radius: 2px; font-size: clamp(18px, 1.8vw, 24px); padding-left: 26px; margin: 26px 0 22px; }
.team .section-head > p:not(.eyebrow) { font-size: clamp(15px, 1.25vw, 18px); line-height: 1.7; }

.ceo { grid-template-columns: minmax(280px, .66fr) 1fr; gap: 0; padding: 0; overflow: hidden; border: 1px solid #ffffff; border-radius: 22px; background: linear-gradient(140deg, #ffffff 0%, #f5faff 60%, #eaf4ff 100%); box-shadow: 0 30px 70px #285a9324, 0 0 0 1px #d5e7fa; }
.ceo-photo { position: relative; min-height: 100%; background: #e6f2ff; }
.ceo-photo picture, .ceo-photo img { display: block; width: 100%; height: 100%; }
.ceo-photo img { position: absolute; inset: 0; object-fit: cover; object-position: 50% 8%; }
.ceo-photo::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 26px; background: linear-gradient(90deg, transparent, #f9fcffcc); pointer-events: none; }
.ceo-body { position: relative; padding: clamp(24px, 3vw, 44px) clamp(22px, 3.2vw, 48px); }
.ceo-body h3 { font-size: clamp(24px, 2.5vw, 36px); font-weight: 700; letter-spacing: -.04em; padding-right: 90px; }
.ceo-body .role { position: relative; margin-top: 8px; padding-bottom: 22px; font-size: 14px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ceo-body .role::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; border-radius: 2px; background: var(--blue); }
.ceo .ceo-body .avatar { position: absolute; right: clamp(20px, 2.6vw, 36px); top: clamp(20px, 2.6vw, 34px); width: 78px; height: 78px; font-size: 24px; font-weight: 700; background: radial-gradient(circle at 35% 30%, #ffffff, #e4f1ff); border: 1px solid #cfe2f6; box-shadow: 0 10px 24px #285a9322, inset 0 0 0 4px #ffffff; }
.ceo-bio { margin-top: 24px; }
.ceo-bio p { font-size: clamp(14.5px, 1.1vw, 16.5px); line-height: 1.65; }
.ceo-bio p + p { margin-top: 18px; }
.ceo-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 28px; padding: 18px 8px; border-radius: 16px; background: #f4f9ffcc; border: 1px solid #e3eefa; }
.ceo-stats li { display: flex; align-items: center; gap: 14px; padding: 0 clamp(8px, 1.4vw, 22px); border-right: 1px solid #dbe8f6; }
.ceo-stats li:last-child { border-right: 0; }
.ceo-stats svg { flex: none; width: 26px; height: 26px; padding: 13px; box-sizing: content-box; border-radius: 14px; background: #e8f3ff; fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ceo-stats strong { display: block; font: 700 clamp(22px, 2.1vw, 30px)/1.1 var(--font-head); color: var(--blue); letter-spacing: -.03em; }
.ceo-stats small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }

@media (max-width: 860px) {
  .ceo { grid-template-columns: 1fr; }
  .ceo-photo { aspect-ratio: 4 / 4.4; min-height: 0; }
  .ceo-photo::after { inset: auto 0 0 0; width: auto; height: 48px; background: linear-gradient(180deg, transparent, #fbfdff); }
  .ceo .ceo-body .avatar { width: 58px; height: 58px; font-size: 18px; }
  .ceo-body h3 { padding-right: 70px; }
  .ceo-stats { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .ceo-stats li { border-right: 0; padding: 0; }
}

/* ═════════ v6: arc removed · reference-style service cards · dotted orbit ═════════ */
.photo-back { display: none; }
.team-photo { border-width: 7px; border-radius: 22px; transform: rotate(-2.2deg); transform-origin: 50% 50%; box-shadow: 0 34px 70px #1f5fae38, 0 0 0 1px #cfe4fb; }


/* Dotted orbit around the whole services scene, with glowing orbs riding it */

/* Cards */
/* blue face, cross-faded by --act */
/* the thin curve sweeping through each card */


@media (max-width: 860px) {
  .team-photo { transform: none; border-width: 4px; }
}

/* ═════════ v7: slim header · leadership accordion · careers strip · navy footer ═════════ */
:root { --header-h: 70px; }
.brand img { width: 44px; height: 44px; }

/* Leadership heading */
.leaders-head { display: grid; grid-template-columns: auto 1fr; gap: 18px clamp(24px, 3vw, 44px); align-items: end; margin-top: clamp(64px, 8vw, 104px); }
.leaders-head .eyebrow { font-size: 13px; letter-spacing: .2em; font-weight: 700; }
.leaders-head h3 { margin-top: 12px; font-size: clamp(30px, 3.8vw, 52px); font-weight: 700; letter-spacing: -.045em; line-height: 1.08; }
.leaders-head h3 span { color: var(--blue); }
.leaders-head > p { max-width: 330px; padding: 6px 0 6px clamp(20px, 2.6vw, 40px); border-left: 1px solid #c9dcf0; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.5; }

/* Rows: each one is an independent image accordion */
.lead-rows { display: grid; gap: 18px; margin-top: 34px; }
.lead-row { --ease: cubic-bezier(.4, 0, .2, 1); --dur: 450ms; display: flex; gap: 12px; height: 440px; }
.lead-card { position: relative; flex: 1 1 0; min-width: 0; transition: flex-grow var(--dur) var(--ease); }
.lead-card article { position: relative; height: 100%; border-radius: 18px; border: 1px solid #fff; background: linear-gradient(170deg, #ffffff, #f6faff); box-shadow: 0 14px 36px #285a9314, 0 0 0 1px #dbe9f8; overflow: hidden; outline: none; }
.lead-card article:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #4a9dff; }
.lead-photo { position: absolute; inset: 10px 10px 114px; border-radius: 12px; overflow: hidden; background: #e6f0fb; transition: inset var(--dur) var(--ease); }
.lead-photo picture, .lead-photo img { display: block; width: 100%; height: 100%; }
.lead-photo img { object-fit: cover; object-position: var(--pos, 50% 20%); }
.lead-overlay { position: absolute; inset: auto 0 0 0; padding: 56px 22px 20px; color: #fff; opacity: 0; transform: translateY(10px); transition: opacity 200ms ease, transform 300ms var(--ease); pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, #071f4980 30%, #071f49eb 100%); }
.lead-overlay strong { display: block; overflow: hidden; text-overflow: ellipsis; font: 600 clamp(20px, 1.8vw, 26px)/1.15 var(--font-head); letter-spacing: -.03em; white-space: nowrap; }
.lead-overlay span { position: relative; display: block; margin-top: 4px; padding-bottom: 14px; font-size: 15px; color: #dcebff; white-space: nowrap; }
.lead-overlay span::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 3px; border-radius: 2px; background: #4a9dff; }
.lead-overlay p { margin-top: 12px; width: 380px; max-width: 100%; font-size: 14.5px; line-height: 1.5; color: #fff; }
.lead-caption { position: absolute; left: 0; right: 0; bottom: 0; height: 114px; padding: 14px 16px 0; transition: opacity 200ms ease; }
.lead-caption h4 { margin: 0; font: 600 clamp(14.5px, 1.15vw, 17px)/1.22 var(--font-head); letter-spacing: -.03em; }
.lead-role { position: relative; margin-top: 4px; padding-bottom: 12px; font-size: 13px; line-height: 1.35; }
.lead-role::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 3px; border-radius: 2px; background: var(--blue); }
.lead-bio-toggle { display: none; }
/* desktop: the bio is shown in the overlay; keep this copy for screen readers only */
.lead-bio { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

@media (min-width: 1101px) {
  /* active = hovered, keyboard-focused, or tapped open on a touch screen */
  .lead-card:hover, .lead-card:has(article:focus-visible), .lead-card.is-open { flex-grow: 2.7; }
  .lead-row:hover .lead-card:not(:hover) { flex-grow: 1; }
  :is(.lead-card:hover, .lead-card:has(article:focus-visible), .lead-card.is-open) .lead-photo { inset: 10px; }
  :is(.lead-card:hover, .lead-card:has(article:focus-visible), .lead-card.is-open) .lead-overlay { opacity: 1; transform: none; transition-delay: 160ms; }
  :is(.lead-card:hover, .lead-card:has(article:focus-visible), .lead-card.is-open) .lead-caption { opacity: 0; }
  .lead-row:hover .lead-card:not(:hover) .lead-photo { inset: 10px 10px 114px; }
  .lead-row:hover .lead-card:not(:hover) .lead-overlay { opacity: 0; transform: translateY(10px); transition-delay: 0ms; }
  .lead-row:hover .lead-card:not(:hover) .lead-caption { opacity: 1; }
}

/* Tablet: comfortable two-column cards, bio always visible */
@media (max-width: 1100px) {
  .lead-rows { grid-template-columns: 1fr; gap: 16px; }
  .lead-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; height: auto; }
  .lead-card article { display: flex; flex-direction: column; padding: 12px 12px 20px; }
  .lead-photo { position: relative; inset: auto; aspect-ratio: 4 / 3.4; }
  .lead-overlay { display: none; }
  .lead-caption { position: static; height: auto; padding: 16px 6px 0; }
  .lead-caption h4 { font-size: 18px; }
  .lead-role { font-size: 14px; }
  .lead-bio { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin-top: 12px; font-size: 14px; line-height: 1.6; }
}
@media (max-width: 860px) { .leaders-head { grid-template-columns: 1fr; } .leaders-head > p { border-left: 0; padding-left: 0; } }

/* Mobile: stacked cards, name and role always visible, bio behind a button */
@media (max-width: 600px) {
  .lead-row { grid-template-columns: 1fr; gap: 12px; }
  .lead-rows { gap: 12px; }
  .lead-card article { display: grid; grid-template-columns: 96px 1fr; gap: 0 14px; align-items: start; padding: 12px; }
  .lead-photo { aspect-ratio: 1 / 1.1; border-radius: 10px; }
  .lead-caption { padding: 4px 0 0; }
  .lead-caption h4 { font-size: 16.5px; }
  .lead-bio-toggle { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0 2px; border: 0; background: none; color: var(--blue); font: 700 14px var(--font-body); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
  .lead-bio { display: none; margin-top: 2px; }
  .lead-card.bio-open .lead-bio { display: block; }
}
@media (prefers-reduced-motion: reduce) { .lead-card, .lead-photo, .lead-overlay, .lead-caption { transition: none !important; } }

/* Careers strip */
.careers-strip-wrap { padding: 0 0 clamp(56px, 7vw, 96px); background: #fbfdff; }
.careers-strip { position: relative; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 22px 40px; padding: clamp(26px, 3.4vw, 44px) clamp(22px, 3.6vw, 52px); border-radius: 22px; overflow: hidden; border: 1px solid #d5e7fa; background: linear-gradient(110deg, #eef6ff 0%, #e1efff 60%, #d3e7ff 100%); }
.careers-strip > * { position: relative; z-index: 1; }
.careers-strip h2 { margin: 10px 0 8px; font-size: clamp(24px, 2.7vw, 36px); font-weight: 700; }
.careers-strip p:not(.eyebrow) { max-width: 620px; font-size: 16px; }
.careers-strip .btn { min-height: 54px; padding: 14px 28px; font-size: 16px; border-radius: 10px; }

/* Navy footer */
.footer { padding: clamp(40px, 5vw, 64px) 0 26px; border-top: 0; color: #fff; background: radial-gradient(ellipse at 100% 100%, #0e3a86 0%, transparent 45%), linear-gradient(120deg, #0a2a63, #071f49 70%); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1fr; align-items: start; gap: 34px clamp(24px, 4vw, 64px); }
.footer .brand { color: #fff; font-size: 20px; }
.footer .brand > span > span { color: #8fc0ff; font-size: 13px; font-weight: 600; }
.logo-badge { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: #fff; }
.footer .brand .logo-badge img { width: 40px; height: 40px; mix-blend-mode: normal; }
.footer-brand p { margin-top: 16px; max-width: 300px; color: #c6d9f2; font-size: 14.5px; }
.footer h2 { margin: 4px 0 12px; font: 600 15px var(--font-head); letter-spacing: 0; color: #fff; }
.footer nav { display: flex; flex-direction: column; gap: 0; }
.footer nav a { padding: 6px 0; color: #c6d9f2; font-size: 14.5px; font-weight: 500; }
.footer nav a:hover, .footer-social a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 18px; }
.footer-social a { display: inline-block; padding: 6px 0; color: #c6d9f2; font-size: 14px; text-decoration: none; }
.footer .copyright { grid-column: 1 / -1; margin-top: 8px; padding-top: 22px; border-top: 1px solid #ffffff22; color: #9db7da; font-size: 13px; }
.footer :focus-visible { outline-color: #9fd0ff; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* ═════════ v8: Services showcase — choices left, one large panel right ═════════ */
/* Default (mobile, short windows, reduced motion): no pinning, the three services simply stack. */

/* The photo settles in each time a service becomes active: a short fade from a slight zoom */

/* Pinned desktop layout */
.is-pinned .stage-wrap { height: 400vh; }
.is-pinned .services-scene { justify-content: flex-start; padding-block: clamp(18px, 3vh, 34px) clamp(14px, 2.4vh, 26px); background: radial-gradient(ellipse 60% 55% at 95% 80%, #eaf5ffcc, transparent 100%); }



/* stacked layout still needs the proposal link */

/* ═════════ v9: one site-wide interactive dot layer ═════════ */
/* Wrapper fills its section behind the content; the canvas inside is one screen tall and sticks to
   the viewport, so tall sections never need a huge bitmap. Nothing here can take a click or focus. */
.dotfield { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; }
.dotfield canvas { position: sticky; top: 0; display: block; width: 100%; height: min(100vh, 100%); }
.careers-strip-wrap, .contact, .footer { position: relative; }
.careers-strip-wrap > .container, .contact > .container, .footer > .container, .team > .container { position: relative; z-index: 1; }
.cursor-glow { transition: opacity .45s ease, transform .16s ease-out; }

/* ═════════ v10: one travelling wireframe globe ═════════ */
/* Each section has a clipped window onto the same viewport-fixed globe (see main.js). */
.globefield { position: absolute; inset: 0; z-index: 0; pointer-events: none; user-select: none; -webkit-clip-path: inset(0); clip-path: inset(0); }
.globefield.front { z-index: 2; } /* only used for the last few pixels of the merge into the footer logo */
.globe-fixed { position: fixed; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.globe-static .globe-fixed { position: absolute; }
.globe-svg { display: block; width: 100%; height: 100%; max-width: none; overflow: visible; fill: none; stroke: #2f80df; stroke-width: 1; }
.globe-svg circle, .globe-svg ellipse { vector-effect: non-scaling-stroke; }
.globe-svg .faint { opacity: .55; }
.globe-svg .pt { fill: #0077ee; stroke: none; opacity: .7; }
.globefield.dark .globe-svg { stroke: #9fd0ff; }
.globefield.dark .globe-svg .pt { fill: #9fd0ff; }
.globefield.merge .globe-svg { stroke: #8d95a1; stroke-width: 1.1; }
.globefield.merge .globe-svg .pt { display: none; }

/* v10b: larger footer logo so the globe has a visible symbol to land on */
.logo-badge { width: 76px; height: 76px; }
.footer .brand .logo-badge img { width: 58px; height: 58px; }
.footer .brand { font-size: 23px; gap: 14px; }
.footer .brand > span > span { font-size: 14px; }
.globefield.dark .globe-svg { stroke: #cfe6ff; stroke-width: 1.5; }
.globefield.merge .globe-svg { stroke: #818385; stroke-width: 1.3; } /* the logo artwork's own wireframe colour, so it reads as part of the logo once docked */

.logo-badge { overflow: hidden; }
.footer .brand .logo-badge img { width: 52px; height: 52px; }

/* ═════════ v12: Contact — frosted-glass panel ═════════ */
.contact-grid > div > h2 { font-size: clamp(40px, 5.2vw, 76px); font-weight: 700; letter-spacing: -.05em; line-height: 1.02; margin: 14px 0 18px; }
.contact-grid > div > p:not(.eyebrow) { font-size: clamp(16px, 1.3vw, 20px); max-width: 560px; }
.contact-panel { padding: clamp(18px, 2.2vw, 32px); border-radius: 24px; border: 1px solid #ffffff; background: #ffffff8c; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 26px 60px #285a931a, inset 0 0 0 1px #ffffff66; }
.contact-cards { gap: 16px; }
.contact-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 16px; border: 1px solid #ffffffcc; background: #ffffff8c; box-shadow: 0 1px 0 #ffffff inset; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.contact-card:hover { transform: translateY(-3px); border-color: #ffffff; box-shadow: 0 16px 36px #285a9322; }
.contact-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: #e6f1ff; }
.contact-icon svg, .contact-card .go svg { width: 26px; height: 26px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-card .go { position: static; transform: none; display: block; width: 26px; height: 26px; transition: transform .22s ease; }
.contact-card .go svg { width: 100%; height: 100%; stroke-width: 2; }
.contact-card:hover .go { transform: translate(3px, -3px); }
.contact-card.primary { border-color: #3a8dff; background: linear-gradient(120deg, #2a86ff 0%, #0a63ee 70%, #0550d6 100%); box-shadow: 0 12px 30px #0b5fe640; }
.contact-card.primary:hover { box-shadow: 0 20px 44px #0b5fe655; border-color: #7fbcff; }
.contact-card.primary .contact-icon { background: #ffffff2b; }
.contact-card.primary .contact-icon svg, .contact-card.primary .go svg { stroke: #fff; }
.contact-card.primary small { color: #dcecff; }
.contact-card:focus-visible, .social a:focus-visible { outline: 3px solid #72b5fc; outline-offset: 3px; }
.contact-panel .social { margin-top: 22px; padding-top: 22px; border-top: 1px solid #d5e5f6; gap: 12px; }
.contact-panel .social a { background: #ffffffb3; border-color: #bfd9f7; color: var(--blue); padding: 10px 24px; font-size: 15px; transition: background-color .22s ease, border-color .22s ease, transform .22s ease; }
.contact-panel .social a:hover { transform: translateY(-2px); }
@media (max-width: 600px) {
  .contact-card { grid-template-columns: auto 1fr; padding: 18px; gap: 14px; }
  .contact-card .go { grid-column: 2; justify-self: end; margin-top: -4px; }
  .contact-icon { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-card:hover, .contact-card:hover .go, .contact-panel .social a:hover { transform: none; }
}

/* v13: the official logo fades in over the no-globe one as the travelling globe docks */
.logo-badge { position: relative; }
.footer-logo-reveal { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; }

/* ═════════ v14: CEO card — portrait left, reference text card right, growth strip ═════════ */
.ceo { display: grid; grid-template-columns: minmax(260px, .5fr) 1fr; gap: 0; padding: 0; overflow: hidden; position: relative; border-radius: 26px; border: 1px solid #ffffff; background: linear-gradient(150deg, #ffffffd9 0%, #f3f8ffd9 60%, #eaf3ffd9 100%); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 70px #285a9320, inset 0 0 0 1px #dbe9f8; }
.ceo-photo { position: relative; min-height: 100%; background: #e6f2ff; }
.ceo-photo picture, .ceo-photo img { display: block; width: 100%; height: 100%; }
.ceo-photo img { position: absolute; inset: 0; object-fit: cover; object-position: 50% 8%; }
.ceo-photo::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 26px; background: linear-gradient(90deg, transparent, #f9fcffcc); pointer-events: none; }
.ceo-body { position: relative; padding: clamp(24px, 3vw, 44px) clamp(22px, 3.2vw, 48px); }
.ceo-body > h3 { font-size: clamp(28px, 2.9vw, 42px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; padding-right: 100px; }
.ceo-body > .role { position: relative; margin-top: 8px; padding-bottom: 22px; font-size: clamp(13px, 1vw, 15px); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; }
.ceo-body > .role::after { content: ""; position: absolute; left: 0; bottom: 0; width: 76px; height: 4px; border-radius: 2px; background: var(--blue); }
.ceo .ceo-body .avatar { position: absolute; right: clamp(20px, 2.8vw, 40px); top: clamp(20px, 2.8vw, 36px); width: clamp(64px, 6vw, 86px); height: clamp(64px, 6vw, 86px); font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; background: radial-gradient(circle at 35% 30%, #ffffff, #e4f1ff); border: 1px solid #cfe2f6; box-shadow: 0 12px 28px #285a9322, inset 0 0 0 5px #ffffff; }
.ceo .ceo-bio { margin-top: 24px; }
.ceo .ceo-bio p { font-size: clamp(14.5px, 1.12vw, 17px); line-height: 1.6; }
.ceo .ceo-bio p + p { margin-top: 16px; }
.ceo mark { background: #e3f0ff; color: #0a4fc0; font-weight: 700; padding: 1px 5px; margin: 0 -5px; border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ceo .ceo-stats { display: grid; grid-template-columns: 1.6fr 1fr 1fr; align-items: center; gap: 0; margin-top: 26px; padding: 14px 6px; border-radius: 18px; border: 1px solid #e0ecfa; background: #ffffff8c; }
.ceo-growth { padding: 4px clamp(8px, 1.3vw, 20px); border-right: 1px solid #dbe8f6; }
.ceo-growth .eyebrow { font-size: 12px; letter-spacing: .2em; }
.ceo-growth-row { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 18px); margin-top: 6px; }
.ceo-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ceo-stat strong { display: block; font: 800 clamp(28px, 2.6vw, 40px)/1 var(--font-head); color: var(--navy); letter-spacing: -.04em; }
.ceo-stat.big strong { color: var(--blue); font-size: clamp(36px, 3.6vw, 54px); }
.ceo-stat small { margin-top: 6px; font-size: 13px; color: var(--muted); }
.ceo-arrow { flex: 1; min-width: 50px; max-width: 220px; }
.ceo-arrow svg { width: 100%; height: 24px; padding: 0; background: none; border-radius: 0; box-sizing: border-box; fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ceo-fact { display: flex; align-items: center; gap: 14px; padding: 4px clamp(8px, 1.3vw, 20px); border-right: 1px solid #dbe8f6; }
.ceo-fact:last-child { border-right: 0; }
.ceo-fact svg { flex: none; width: 26px; height: 26px; padding: 13px; box-sizing: content-box; border-radius: 15px; background: #e8f3ff; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ceo-fact strong { display: block; font: 700 clamp(24px, 2.2vw, 32px)/1.05 var(--font-head); color: var(--blue); letter-spacing: -.03em; }
.ceo-fact small { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
@media (max-width: 1100px) {
  .ceo .ceo-stats { grid-template-columns: 1fr 1fr; }
  .ceo-growth { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #dbe8f6; padding-bottom: 14px; margin-bottom: 6px; }
}
@media (max-width: 860px) {
  .ceo { grid-template-columns: 1fr; }
  .ceo-photo { aspect-ratio: 4 / 4.4; min-height: 0; }
  .ceo-photo::after { inset: auto 0 0 0; width: auto; height: 48px; background: linear-gradient(180deg, transparent, #fbfdff); }
}
@media (max-width: 600px) {
  .ceo-body > h3 { padding-right: 84px; }
  .ceo .ceo-stats { grid-template-columns: 1fr; padding: 14px; }
  .ceo-fact { border-right: 0; padding: 8px 4px; }
}

/* ═════════ v15: Careers — team photo banner ═════════ */
.careers-strip-wrap { padding-top: clamp(40px, 5vw, 64px); }
.team-banner { position: relative; margin-bottom: clamp(20px, 2.6vw, 34px); border-radius: 22px; overflow: hidden; border: 1px solid #ffffff; box-shadow: 0 26px 60px #285a9322, 0 0 0 1px #d5e7fa; background: #eef6ff; }
.team-banner img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .team-banner { border-radius: 14px; } }

/* ═════════ v16: Careers page layout ═════════ */
.careers-page { padding: clamp(48px, 6vw, 88px) 0 0; background: linear-gradient(180deg, #ffffff 0%, #f7fbff 55%, #eaf3ff 100%); }
.careers-hero { max-width: 760px; margin: 0 auto clamp(26px, 3vw, 40px); text-align: center; }
.careers-hero h2 { margin: 14px 0 12px; font-size: clamp(34px, 4.4vw, 62px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; }
.careers-hero h2 span { display: block; }
.careers-hero p:not(.eyebrow) { margin: 0 auto 22px; max-width: 620px; font-size: clamp(16px, 1.3vw, 19px); }
.careers-hero .btn { min-height: 50px; padding: 12px 24px; font-size: 15px; border-radius: 10px; }
.careers-page .team-banner { margin-bottom: 0; }
.careers-tagline { display: flex; align-items: center; justify-content: center; gap: 18px; margin: clamp(18px, 2.4vw, 30px) 0 clamp(56px, 7vw, 96px); font: 500 clamp(15px, 1.2vw, 18px) var(--font-head); color: var(--navy); letter-spacing: -.01em; }
.careers-tagline::before, .careers-tagline::after { content: ""; width: clamp(40px, 6vw, 90px); height: 1px; background: #c9dcf0; }
.careers-intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.careers-intro h3 { font-size: clamp(30px, 3.6vw, 52px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; }
.careers-intro p { font-size: clamp(15px, 1.15vw, 17px); line-height: 1.7; }
.careers-values { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(40px, 5vw, 64px); }
.careers-values li { padding: 8px clamp(16px, 2.6vw, 40px); text-align: center; border-left: 1px solid #d5e5f6; }
.careers-values li:first-child { border-left: 0; }
.careers-values svg { width: 44px; height: 44px; margin: 0 auto 14px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.careers-values strong { display: block; font: 600 clamp(17px, 1.4vw, 20px) var(--font-head); letter-spacing: -.02em; }
.careers-values p { margin-top: 8px; font-size: 15px; line-height: 1.55; }
.careers-close { margin-top: clamp(56px, 7vw, 96px); padding: clamp(36px, 4.5vw, 64px) 0 clamp(56px, 7vw, 96px); border-top: 1px solid #d5e5f6; text-align: center; }
.careers-close h3 { margin: 12px auto 22px; max-width: 720px; font-size: clamp(26px, 3vw, 42px); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; }
.careers-close-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.careers-close .btn { min-height: 50px; padding: 12px 24px; font-size: 15px; border-radius: 10px; }
.careers-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; font-size: 15px; text-underline-offset: 5px; }
@media (max-width: 860px) {
  .careers-intro { grid-template-columns: 1fr; gap: 18px; }
  .careers-values { grid-template-columns: 1fr; gap: 26px; }
  .careers-values li { border-left: 0; padding: 0; }
}
@media (max-width: 600px) { .careers-tagline { text-align: center; } .careers-tagline::before, .careers-tagline::after { display: none; } }

/* ═════════ v17: visual polish — navy accents, calmer services stack, one careers CTA ═════════ */
/* Readability: slightly darker body copy, tighter small-caps labels */
:root { --muted: #41586f; }
.hero-copy .eyebrow { letter-spacing: .2em; }
.team .section-head .eyebrow, .leaders-head .eyebrow, .ceo-growth .eyebrow { letter-spacing: .16em; }
.ceo-body > .role { letter-spacing: .16em; }

/* CEO: no initials badge, growth strip becomes a navy accent */
.ceo-body > h3 { padding-right: 0; }
.ceo .ceo-stats { border: 0; background: radial-gradient(ellipse at 100% 0%, #0e3a86 0%, transparent 60%), linear-gradient(120deg, #0a2a63, #071f49 75%); box-shadow: 0 18px 40px #071f4930; }
.ceo-growth, .ceo-fact { border-color: #ffffff1f; }
.ceo-growth .eyebrow { color: #8fc0ff; }
.ceo-stat strong { color: #fff; }
.ceo-stat.big strong, .ceo-fact strong { color: #8fc0ff; }
.ceo-stat small, .ceo-fact small { color: #c6d9f2; }
.ceo-arrow svg { stroke: #8fc0ff; }
.ceo-fact svg { background: #ffffff14; stroke: #8fc0ff; }
@media (max-width: 1100px) { .ceo-growth { border-bottom-color: #ffffff1f; } }

/* Leadership: drop the decorative dashes under each role */
.lead-role::after, .lead-overlay span::after { display: none; }
.lead-role { padding-bottom: 0; }
.lead-overlay span { padding-bottom: 0; }

/* Services, stacked layout: shorter photos, one CTA after the list */
@media (min-width: 700px) {
  /* photo beside the text, alternating sides */
}

/* Careers: the value words keep their emphasis without shouting */
.careers-values p b { color: var(--blue); font-weight: 700; }
/* Careers close: a navy call-to-action panel, the one place to act */
.careers-close { position: relative; overflow: hidden; margin-top: clamp(56px, 7vw, 96px); margin-bottom: clamp(56px, 7vw, 96px); padding: clamp(40px, 5vw, 72px) clamp(22px, 4vw, 56px); border-top: 0; border-radius: 26px; color: #fff;
  background: radial-gradient(ellipse at 100% 0%, #1a56c4 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, #0e3a86 0%, transparent 50%), linear-gradient(120deg, #0a2a63, #071f49 75%); box-shadow: 0 30px 70px #071f4933; }
.careers-close .eyebrow { color: #8fc0ff; }
.careers-close h3 { color: #fff; }
.careers-close .btn.solid { background: #fff; border-color: #fff; color: var(--navy); box-shadow: 0 10px 24px #00000030; }
.careers-close .btn.solid:hover { background: #e3f1ff; }
.careers-close .careers-link { color: #cfe6ff; }
.careers-close .careers-link:hover { color: #fff; }
.careers-close :focus-visible { outline-color: #9fd0ff; }
.careers-page { padding-bottom: 0; }
.careers-hero p:not(.eyebrow) { margin-bottom: 0; }

/* Contact: what happens next */
.contact-steps { display: grid; gap: 18px; margin: 30px 0 0; padding: 0; list-style: none; counter-reset: none; max-width: 460px; }
.contact-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; }
.contact-steps li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e6f1ff; color: var(--blue); font: 700 15px var(--font-head); box-shadow: inset 0 0 0 1px #cfe3fb; }
.contact-steps strong { display: block; font: 600 16px/1.3 var(--font-head); letter-spacing: -.02em; color: var(--navy); }
.contact-steps small { display: block; margin-top: 3px; font-size: 14.5px; color: var(--muted); }

/* Footer: social links stack like the other columns */
.footer-social { flex-direction: column; gap: 0; margin-top: 14px; }
.careers-page { padding-bottom: clamp(56px, 7vw, 96px); }
.careers-close { margin-bottom: 0; }
@media (min-width: 1101px) {
  /* captions are shorter without the dash */
  .lead-caption { height: 92px; }
  .lead-photo, .lead-row:hover .lead-card:not(:hover) .lead-photo { inset: 10px 10px 92px; }
}

/* v18: pinned services are scrubbed by scroll (main.js sets opacity/transform every frame) — no CSS timers fighting it */

/* ═════════ v19: page-wide background system ═════════ */
/* Layer 1 — base atmosphere: each section gets its own soft light, from the same palette */
.team { background: radial-gradient(ellipse 50% 40% at 100% 0%, #e3f0ff 0%, transparent 100%), radial-gradient(ellipse 40% 30% at 0% 100%, #edf5ff 0%, transparent 100%), linear-gradient(180deg, #fbfdff 0%, #ffffff 40%, #f7fbff 100%); }
.careers-page { background: radial-gradient(ellipse 60% 35% at 50% 88%, #dcecff 0%, transparent 100%), radial-gradient(ellipse 35% 30% at 0% 0%, #eef6ff 0%, transparent 100%), linear-gradient(180deg, #ffffff 0%, #f7fbff 55%, #eef5ff 100%); }
.contact { background: radial-gradient(ellipse 45% 55% at 78% 50%, #e8f2ff 0%, transparent 100%), radial-gradient(ellipse 35% 40% at 0% 100%, #eef6ff 0%, transparent 100%), #ffffff; }
.footer { background: radial-gradient(ellipse 40% 60% at 100% 0%, #0f3a80 0%, transparent 100%), radial-gradient(ellipse at 100% 100%, #0e3a86 0%, transparent 45%), linear-gradient(120deg, #0a2a63, #071f49 70%); }

/* Layers 4–5 — orbits and glows (built per section in main.js) */
.bg-decor { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; user-select: none; }
.bg-decor svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.bg-glows { transform: translate3d(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -16px), 0); transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); }
.bg-orbits { transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 9px), 0); transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.bg-orbits .ln { fill: none; stroke: #2f80df; stroke-width: 1; opacity: .2; vector-effect: non-scaling-stroke; }
.bg-orbits .ln.dash { stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 7; opacity: .38; }
.bg-orbits .ln.net { opacity: .16; }
.bg-orbits .node { fill: #0a6ff0; opacity: .5; }
.bg-orbits .halo { fill: #4a9dff; opacity: .12; transform-box: fill-box; transform-origin: center; }
.bg-decor.dark .ln { stroke: #9fd0ff; opacity: .16; }
.bg-decor.dark .node { fill: #9fd0ff; opacity: .45; }
.bg-decor.dark .halo { fill: #9fd0ff; opacity: .1; }
.bg-decor.dark .bg-glows { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  .bg-orbits .ln.flow { animation: bg-flow 60s linear infinite; }
  .bg-orbits .halo { animation: bg-halo 7s ease-in-out infinite; }
  .bg-orbits circle.halo:nth-of-type(4n) { animation-delay: -3.5s; }
}
@keyframes bg-flow { to { stroke-dashoffset: -320; } }
@keyframes bg-halo { 50% { opacity: .22; transform: scale(1.35); } }

/* Hero and services share the stage: their layers cross-fade with the scroll (--p is set by main.js) */
.stage > .bg-decor.hero { opacity: calc(1 - var(--p, 0) * 1.85); }
.stage > .bg-decor.services { opacity: calc((var(--p, 0) - .33) * 1.5); }
html:not(.is-pinned) .stage > .bg-decor { opacity: 1; }
/* sections whose content sits above the layers */
.footer > .container { position: relative; z-index: 1; }
@media (max-width: 600px) {
  /* no side margins on phones: keep the lines, drop the nodes that could land on text */
  .bg-orbits .node, .bg-orbits .halo { display: none; }
  .bg-orbits .ln { opacity: .14; }
}

/* ═════════ v20: hero rebuilt from the mockup — all decoration in HTML/CSS/SVG ═════════ */
/* Depth: layers read the page-wide pointer position (--mx/--my, −1…1, set by main.js only when motion is allowed)
   and shift by different amounts; `translate` keeps this independent of each element's own transform. */
.hero-panel { display: none; }
.hero-scene { isolation: isolate; }
.hero-scene > .hero-grid, .hero-scene > .hero-foot { position: relative; z-index: 1; }
.hero-bg > *, .hero-visual > *, .hero-wave { transition: translate 1.1s cubic-bezier(.2, .7, .2, 1); }

/* Background layers */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hb-light { position: absolute; inset: 0; translate: calc(var(--mx, 0) * -10px) calc(var(--my, 0) * -8px);
  background: radial-gradient(ellipse 46% 60% at 74% 40%, #d6e8ff 0%, #e6f1ff55 55%, transparent 80%), radial-gradient(ellipse 30% 40% at 96% 8%, #cfe3ff 0%, transparent 70%), radial-gradient(ellipse 40% 45% at 8% 92%, #e0eeff 0%, transparent 75%); }
.hb-map { position: absolute; right: -2%; top: 2%; width: 54%; height: auto; aspect-ratio: 64 / 26; fill: #2f7fe8; opacity: .5; translate: calc(var(--mx, 0) * -6px) calc(var(--my, 0) * -4px); }
/* Dot clusters: two dot sizes, each masked by overlapping blobs so the edges are irregular and fade out */
.hb-dots { position: absolute; opacity: .55;
  background-image: radial-gradient(circle, #1f78e0 1.2px, transparent 1.8px), radial-gradient(circle, #1f78e080 .9px, transparent 1.4px);
  background-size: 15px 15px, 9px 9px; background-position: 0 0, 4px 6px; }
.hb-dots.d1 { right: 0; top: 50%; width: 15%; height: 42%; translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -10px);
  -webkit-mask-image: radial-gradient(60% 55% at 80% 45%, #000 30%, transparent 75%), radial-gradient(45% 35% at 45% 80%, #000 10%, transparent 70%);
  mask-image: radial-gradient(60% 55% at 80% 45%, #000 30%, transparent 75%), radial-gradient(45% 35% at 45% 80%, #000 10%, transparent 70%); }
.hb-dots.d2 { left: 70%; bottom: 20%; width: 20%; height: 16%; opacity: .4; translate: calc(var(--mx, 0) * -9px) calc(var(--my, 0) * -7px);
  -webkit-mask-image: radial-gradient(50% 60% at 40% 50%, #000 15%, transparent 72%), radial-gradient(30% 50% at 80% 30%, #000, transparent 70%);
  mask-image: radial-gradient(50% 60% at 40% 50%, #000 15%, transparent 72%), radial-gradient(30% 50% at 80% 30%, #000, transparent 70%); }
.hb-dots.d3 { left: 0; top: 0; width: 14%; height: 30%; opacity: .35; translate: calc(var(--mx, 0) * -5px) calc(var(--my, 0) * -4px);
  -webkit-mask-image: radial-gradient(70% 60% at 10% 15%, #000 10%, transparent 70%);
  mask-image: radial-gradient(70% 60% at 10% 15%, #000 10%, transparent 70%); }

/* Copy */
.hero-grid { grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 4.5vw, 80px); padding-bottom: 40px; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 18px; font-size: clamp(11px, .9vw, 14px); letter-spacing: .26em; }
.hero-copy .eyebrow::before { content: ""; flex: none; width: 46px; height: 2px; border-radius: 2px; background: var(--blue); }
.hero-copy > p:not(.eyebrow) { max-width: 540px; font-size: clamp(16px, 1.35vw, 21px); line-height: 1.6; font-weight: 500; }
.hero-actions .btn { min-width: 170px; }

/* Visual: photo, layered shapes, orbits, cards */
.hero-visual { position: relative; min-width: 0; margin: 4% 4% 7% 3%; }
.hv-orbits { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; z-index: 0; pointer-events: none; translate: calc(var(--mx, 0) * 8px) calc(var(--my, 0) * 6px); }
.hv-orbits .orbit { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.hv-orbits .node { fill: #2c83f5; }
.hv-orbits .node.big { fill: #5ea6ff; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.hv-orbits .glow { fill: #5ea6ff; opacity: .22; }
.hv-orbits .node, .hv-orbits .glow { transform-box: fill-box; transform-origin: center; }
.hv-shape { position: absolute; z-index: 0; pointer-events: none; border-radius: 26px; }
.hv-shape.a { inset: 8% 6% -5% -4%; background: linear-gradient(160deg, #e3efff 0%, #c4dcfc 100%); border: 1px solid #ffffffcc; box-shadow: 0 30px 60px #1f5fae24; transform: rotate(-4deg); translate: calc(var(--mx, 0) * 4px) calc(var(--my, 0) * 3px); }
.hv-shape.b { right: -7%; top: 20%; width: 22%; height: 34%; border-radius: 22px; background: linear-gradient(170deg, #eef5ffcc, #cfe2ffcc); border: 1px solid #fff; transform: rotate(7deg); translate: calc(var(--mx, 0) * 10px) calc(var(--my, 0) * 7px); }
.hv-shape.c { left: 18%; bottom: -8%; width: 6%; height: 26%; border-radius: 14px; background: linear-gradient(180deg, #5ea6ff, #2c7df0); opacity: .75; transform: rotate(-3deg); translate: calc(var(--mx, 0) * 12px) calc(var(--my, 0) * 9px); }
.hero-visual .team-photo { position: relative; z-index: 1; border: 7px solid #fff; border-radius: 26px; transform: perspective(1500px) rotateY(-7deg) rotate(-1.6deg); box-shadow: 0 36px 70px #1f5fae3a, 0 0 0 1px #bcd8fb; translate: calc(var(--mx, 0) * 5px) calc(var(--my, 0) * 4px); }
.hero-visual .team-photo img { aspect-ratio: 3 / 2; object-fit: cover; }

.hero-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; border-radius: 18px; border: 1px solid #ffffffd9; background: #ffffffc4; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 40px #1f5fae29, inset 0 1px 0 #fff; color: var(--navy); white-space: nowrap; transform: rotate(var(--r)); }
.hc-icon { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #e6f1ff; }
.hc-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hc-icon.solid { background: #fff; box-shadow: 0 6px 16px #1f5fae22; }
.hc-icon.solid svg { stroke-width: 3.2; stroke-linecap: butt; }
.hc-text strong { display: block; font: 600 clamp(13px, 1.05vw, 16px)/1.2 var(--font-head); letter-spacing: -.02em; }
.hc-text small { display: block; margin-top: 4px; color: var(--muted); font-size: clamp(11px, .85vw, 13px); }
.hero-card.c1 { --r: -2deg; left: -8%; top: 4%; translate: calc(var(--mx, 0) * 16px) calc(var(--my, 0) * 12px); }
.hero-card.c2 { --r: 6deg; right: -9%; top: 46%; translate: calc(var(--mx, 0) * 20px) calc(var(--my, 0) * 14px); }
.hero-card.c3 { --r: 0deg; left: 24%; bottom: -12%; translate: calc(var(--mx, 0) * 13px) calc(var(--my, 0) * 16px); }

/* Bottom: soft waves behind a floating value bar */
.hero-foot { background: none; padding: 0 var(--pad) clamp(18px, 2.6vh, 30px); }
.hero-wave { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: clamp(150px, 26vh, 240px); max-width: none; z-index: -1; translate: calc(var(--mx, 0) * -6px) 0; }
.hero-wave .wv-line { fill: none; stroke: #9cc6ff; stroke-width: 1.2; opacity: .7; vector-effect: non-scaling-stroke; }
.hero-wave .wv-line.thin { stroke: #fff; stroke-width: 2; opacity: .9; }
.benefits { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1320px; margin: 0 auto; padding: clamp(16px, 2.2vh, 26px) clamp(20px, 2.6vw, 40px); border-radius: 22px; border: 1px solid #ffffff; background: #ffffffe6; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 22px 50px #1f5fae1f, 0 0 0 1px #e1ecf9; }
.benefits li { display: flex; align-items: center; justify-content: flex-start; gap: 18px; padding: 4px clamp(14px, 2.4vw, 40px); border-right: 1px solid #e0e9f4; }
.benefits li:first-child { padding-left: 0; }
.benefits li:last-child { border-right: 0; padding-right: 0; }
.bf-icon { display: grid; place-items: center; flex: none; width: clamp(52px, 4.4vw, 66px); height: clamp(52px, 4.4vw, 66px); border-radius: 50%; background: #e8f2ff; }
.benefits .bf-icon svg { width: 46%; height: 46%; padding: 0; background: none; border-radius: 0; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.benefits strong { display: block; font: 600 clamp(14px, 1.2vw, 18px)/1.25 var(--font-head); letter-spacing: -.02em; }
.benefits small { display: block; margin-top: 4px; color: var(--muted); font-size: clamp(12.5px, 1vw, 15px); line-height: 1.45; }

/* Idle drift: cards float a few pixels, nodes breathe — only when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .hero-card { animation: hc-float 7s ease-in-out infinite; }
  .hero-card.c2 { animation-duration: 8.5s; animation-delay: -3s; }
  .hero-card.c3 { animation-duration: 7.8s; animation-delay: -5s; }
  .hv-orbits .glow { animation: hv-glow 6s ease-in-out infinite; }
  .hv-orbits .node { animation: hv-bob 9s ease-in-out infinite; }
  .hv-orbits .n3, .hv-orbits .n4 { animation-delay: -4s; }
}
@keyframes hc-float { 50% { transform: rotate(var(--r)) translateY(-6px); } }
@keyframes hv-glow { 50% { opacity: .4; transform: scale(1.3); } }
@keyframes hv-bob { 50% { transform: translate(3px, -4px); } }

/* Pinned (one screen): size the photo from the height left over, and let the headline follow the height too */
.is-pinned .hero-grid { padding-block: clamp(16px, 3vh, 36px) clamp(26px, 5vh, 56px); }
.is-pinned .hero-visual { justify-self: end; width: min(90%, calc((100vh - var(--header-h) - 330px) * 1.5)); }
.is-pinned h1 { font-size: clamp(34px, min(4.4vw, 8vh), 80px); margin: clamp(14px, 2.4vh, 26px) 0; }
.is-pinned .hero-copy > p:not(.eyebrow) { font-size: clamp(15px, min(1.35vw, 2.3vh), 21px); }
.is-pinned .hero-actions { margin-top: clamp(18px, 3.4vh, 34px); }

/* Laptop / tablet */
@media (max-width: 1100px) {
  .hero-card { padding: 10px 14px 10px 10px; gap: 10px; border-radius: 14px; }
  .hc-icon { width: 38px; height: 38px; }
  .hc-icon svg { width: 19px; height: 19px; }
  .benefits li { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; padding: 36px var(--pad) 8px; gap: 30px; }
  /* undo the older full-bleed mobile photo block */
  .hero-visual { margin: 18px 6% 56px; padding: 0; background: none; border-radius: 0; overflow: visible; }
  .hero-visual::before { display: none; }
  .hero-visual .team-photo { transform: rotate(-1.5deg); border-width: 5px; border-radius: 18px; }
  .hv-orbits .orbit.b, .hv-orbits .n4, .hv-orbits .n5, .hv-orbits .glow:nth-of-type(3) { display: none; }
  .hb-map { top: auto; bottom: 34%; right: -12%; width: 100%; opacity: .32; }
  .hb-dots.d1 { top: 60%; width: 24%; }
  .hb-dots.d2, .hv-shape.b { display: none; }
  .hero-card.c1 { left: -5%; top: -8%; }
  .hero-card.c3 { left: auto; right: -4%; bottom: -14%; }
  .hero-card.c2 { right: -5%; top: 38%; }
  .benefits { grid-template-columns: 1fr; padding: 8px 20px; }
  .benefits li { flex-direction: row; align-items: center; padding: 14px 0; border-right: 0; border-bottom: 1px solid #e0e9f4; }
  .benefits li:first-child { padding-left: 0; }
  .benefits li:last-child { border-bottom: 0; }
}
@media (max-width: 600px) {
  .hero-card.c2 { display: none; }
  .hero-card { padding: 8px 12px 8px 8px; }
  .hc-icon { width: 32px; height: 32px; }
  .hc-icon svg { width: 16px; height: 16px; }
  .hc-text strong { font-size: 12.5px; }
  .hc-text small { font-size: 10.5px; }
  .hero-copy .eyebrow { gap: 12px; letter-spacing: .18em; }
  .hero-copy .eyebrow::before { width: 28px; }
  .hero-actions .btn { width: 100%; }
}
@media (max-width: 860px) { .hv-orbits .n1, .hv-orbits .n2, .hv-orbits .glow:nth-of-type(1) { display: none; } }

/* ═════════ v22: Leadership network (traced from the mockup) ═════════ */
/* A full-bleed band holding one 3:2 stage. Sizes use cqw (1cqw = 1% of the stage width) so the whole
   composition scales as one picture; positions come from the mockup's 1536 × 1024 frame. */
.lnet-band { position: relative; margin: clamp(56px, 7vw, 100px) calc(50% - 50vw) calc(-1 * clamp(64px, 9vw, 120px));
  background: radial-gradient(ellipse 60% 50% at 50% 45%, #ffffff 0%, transparent 75%), linear-gradient(180deg, #f3f8ff 0%, #eaf3ff 55%, #e2eeff 100%); overflow: hidden; }
.lnet { --ease: cubic-bezier(.2, .7, .2, 1); --dur: 320ms; position: relative; max-width: 1600px; margin: 0 auto; aspect-ratio: 3 / 2; container-type: inline-size; }

/* Background art */
.lnet-bg, .lnet-lines { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
.lnet-bg .sweep { fill: none; stroke: #b9d4f5; stroke-width: 1.2; opacity: .7; }
.lnet-bg .sweep.w { stroke: #ffffff; stroke-width: 2; opacity: .9; }
.lnet-dots { position: absolute; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle, #8fa6c6 1.4px, transparent 1.9px); background-size: 11px 11px; }
.lnet-dots.a { left: 0; top: 13%; width: 30%; height: 32%;
  -webkit-mask-image: radial-gradient(60% 55% at 35% 45%, #000 20%, transparent 72%); mask-image: radial-gradient(60% 55% at 35% 45%, #000 20%, transparent 72%); }
.lnet-dots.b { right: 0; top: 5%; width: 32%; height: 34%;
  -webkit-mask-image: radial-gradient(60% 55% at 65% 45%, #000 20%, transparent 72%); mask-image: radial-gradient(60% 55% at 65% 45%, #000 20%, transparent 72%); }

.lnet-head { position: absolute; left: 0; right: 0; top: 3%; z-index: 2; text-align: center; }
.lnet-head .eyebrow { font-size: clamp(12px, 1.15cqw, 18px); letter-spacing: .32em; font-weight: 700; color: #1d4f9a; }
.lnet-head h3 { margin: .5cqw 0 .6cqw; font-size: clamp(34px, 4.9cqw, 78px); font-weight: 800; letter-spacing: -.05em; line-height: 1.05; color: #0a1f4d; }
.lnet-head h3 span { color: var(--blue); }
.lnet-head p:not(.eyebrow) { font-size: clamp(14px, 1.25cqw, 20px); color: #52657f; }

/* Lines and dots */
.lnet-lines .ln { fill: none; transition: opacity var(--dur) ease, stroke-width var(--dur) ease, stroke var(--dur) ease; }
.lnet-lines .mesh .ln { stroke: #9dbfe9; stroke-width: 1.1; opacity: .75; }
.lnet-lines .mesh .ln.dash { stroke-dasharray: 3 6; }
.lnet-lines .hubs .ln { stroke: #2a78ee; stroke-width: 1.7; opacity: .8; }
.lnet-lines .hubs .ln.dash { stroke-dasharray: 5 6; }
.lnet-lines .dot { transition: opacity var(--dur) ease; }
.lnet-lines .dot circle { transform-box: fill-box; transform-origin: center; }
.lnet-lines .dot .halo { opacity: .22; }
.lnet-lines .dot.b circle:not(.halo) { fill: #1f6fea; }
.lnet-lines .dot.b .halo { fill: #4d9bff; }
.lnet-lines .dot.s circle:not(.halo) { fill: #3a86f0; opacity: .85; }
.lnet-lines .dot.s .halo { fill: #7ab3ff; }
.lnet-lines .dot.n circle:not(.halo):not(.ring) { fill: #23324f; }
.lnet-lines .dot.n .ring { fill: #fff; opacity: .9; }
.lnet-lines .dot.n .halo { fill: #4d9bff; opacity: .3; }
.lnet-lines .dot.t circle:not(.halo):not(.ring) { fill: #23324f; }
.lnet-lines .dot.t .ring { fill: #fff; stroke: #9cc3f2; stroke-width: 1.5; }
.lnet-lines .dot.t .halo { fill: #4d9bff; opacity: .28; }
.lnet-lines .dot.g circle:not(.halo) { fill: #8795aa; }
.lnet-lines .dot.g .halo { fill: #b8c6da; opacity: .45; }
.lnet-lines .ln.on { opacity: 1; stroke: #0a66f0; stroke-width: 2.4; }
.lnet-lines .mesh .ln.on { stroke: #4a91f5; stroke-width: 1.6; }
.lnet-lines .dot.on .halo { opacity: .45; transform: scale(1.35); transition: opacity var(--dur) ease, transform var(--dur) var(--ease); }
.lnet.has-active .lnet-lines .hubs .ln:not(.on) { opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .lnet-lines .dot.b .halo, .lnet-lines .dot.t .halo, .lnet-lines .dot.n .halo { animation: lnet-pulse 5s ease-in-out infinite; }
  .lnet-lines .dot:nth-child(3n) .halo { animation-delay: -2.5s; }
  .lnet-lines .dot:nth-child(3n + 1) .halo { animation-delay: -1.2s; }
}
@keyframes lnet-pulse { 50% { transform: scale(1.4); opacity: .1; } }

/* Faded background profiles */
.lnet-ghosts { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.lnet-ghosts li { position: absolute; left: var(--x); top: var(--y); width: var(--d); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; overflow: hidden; opacity: .5; box-shadow: 0 0 0 3px #ffffffb0, 0 8px 18px #1f5fae1c; }
.lnet-ghosts img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: blur(2.2px) saturate(.35) brightness(1.08); transform: scale(1.12); }
.lnet-ghosts li::after { content: ""; position: absolute; inset: 0; background: #d7e7ff73; }

/* People. Each node is a zero-size anchor at its photo's centre. */
.lnet-nodes { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.lnode { --ps: 9.1cqw; --k: 1.42; position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 1; }
.lnode.center { --ps: 15.2cqw; --k: 1.07; z-index: 2; }
.lnode.active { z-index: 6; }
.lnode-btn { position: absolute; left: 0; top: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; transform: translate(-50%, calc(var(--ps) / -2)); -webkit-tap-highlight-color: transparent; }
.lnode-btn:focus-visible { outline: none; }
.lnode-btn:focus-visible .lnode-photo { outline: 3px solid #72b5fc; outline-offset: 5px; }
.lnode-photo { position: relative; display: block; width: var(--ps); height: var(--ps); padding: .5cqw; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 1px #d9e7f7, 0 0 0 .5cqw #ffffff8c, 0 1.1cqw 2.4cqw #1f5fae29; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.lnode-photo picture, .lnode-photo img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lnode-photo.initials { display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #ffffff, #dcebff); color: var(--blue); font: 700 calc(var(--ps) * .28) var(--font-head); letter-spacing: -.02em; }
/* centre: white mat, blue gradient ring, soft glow */
.lnode.center .lnode-photo { padding: .55cqw; border: .32cqw solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(160deg, #9cc8ff 0%, #2a7cf0 45%, #0b5fe0 70%, #8fc0ff 100%) border-box;
  box-shadow: 0 0 0 .7cqw #dceaff99, 0 0 3.2cqw #5ea6ff66, 0 1.6cqw 3.6cqw #1f5fae33; }

.lnode-label { position: relative; z-index: 1; display: block; margin-top: -.6cqw; padding: .6cqw 1.45cqw .65cqw; border-radius: 999px; background: #fff; box-shadow: 0 .7cqw 1.8cqw #1f5fae1f, 0 0 0 1px #e3edf9; text-align: center; white-space: nowrap; transition: opacity var(--dur) ease, transform var(--dur) var(--ease); }
.lnode-label strong { display: block; font: 800 clamp(10px, 1cqw, 16px)/1.25 var(--font-head); letter-spacing: .01em; text-transform: uppercase; color: #0d2250; }
.lnode-label strong em { font-style: normal; color: #0f5fd6; }
.lnode-label small { display: block; margin-top: .15cqw; font-size: clamp(9.5px, .86cqw, 14px); color: #4a5d78; }
.lnode.center .lnode-label { margin-top: -1.3cqw; padding: .9cqw 2.6cqw 1cqw; }
.lnode.center .lnode-label strong { font-size: clamp(13px, 1.3cqw, 21px); letter-spacing: .03em; }
.lnode.center .lnode-label small { font-size: clamp(11px, 1.08cqw, 17px); }

/* Active: the photo pops forward with a glowing ring and the card opens beside it, under the photo's edge */
.lnode.active .lnode-photo { transform: scale(var(--k)); box-shadow: 0 0 0 .22cqw #8cc0ff, 0 0 0 .75cqw #d6e7ffb3, 0 0 3cqw #5ea6ff80, 0 1.6cqw 3.4cqw #1f5fae40; }
.lnode.center.active .lnode-photo { box-shadow: 0 0 0 .9cqw #cfe3ffb3, 0 0 4cqw #5ea6ff8c, 0 1.8cqw 4cqw #1f5fae40; }
.lnode.active:not(.center) .lnode-label { opacity: 0; transform: translateY(.6cqw); pointer-events: none; }
.lnode-pop { --r: calc(var(--ps) * var(--k) / 2); position: absolute; top: 0; left: 0; z-index: 1; width: calc(var(--r) + max(230px, 17cqw)); min-height: calc(var(--r) * 1.8);
  display: flex; flex-direction: column; justify-content: center; padding: 1.3cqw 2cqw 3.3cqw calc(var(--r) + 1.5cqw); border-radius: 1.6cqw;
  background: #ffffffF2; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1.8cqw 4cqw #1f5fae2e, 0 0 0 1px #dfeaf8;
  opacity: 0; visibility: hidden; transform: translate(-.8cqw, -50%); pointer-events: none;
  transition: opacity var(--dur) ease, transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
.lnode[data-side="left"] .lnode-pop { left: auto; right: 0; padding: 1.3cqw calc(var(--r) + 1.5cqw) 3.3cqw 2cqw; transform: translate(.8cqw, -50%); }
.lnode.active .lnode-pop { opacity: 1; visibility: visible; transform: translate(0, -50%); pointer-events: auto; transition-delay: 70ms, 70ms, 0s; }
.lnode-pop strong { display: block; font: 800 clamp(13px, 1.12cqw, 18px)/1.25 var(--font-head); letter-spacing: .02em; text-transform: uppercase; color: #0d2250; }
.lpop-role { display: block; margin-top: .25cqw; color: #3c4f6b; font-size: clamp(12px, .98cqw, 16px); font-weight: 500; }
.lnode-pop p { margin-top: .85cqw; font-size: clamp(12px, .9cqw, 15px); line-height: 1.55; color: #3c4f6b; }
.lpop-go { position: absolute; right: 1.1cqw; bottom: 1.1cqw; display: grid; place-items: center; width: clamp(24px, 1.95cqw, 32px); height: clamp(24px, 1.95cqw, 32px); border-radius: 50%; background: var(--blue); box-shadow: 0 .4cqw 1cqw #0b5fe655; }
.lnode[data-side="left"] .lpop-go { right: auto; left: 1.1cqw; }
.lpop-go svg { width: 55%; height: 55%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Tablet and phone: a simpler connected layout — the COO on top, everyone below along a dashed spine */
@media (max-width: 1100px) {
  .lnet-band { margin-bottom: 0; background: linear-gradient(180deg, #f3f8ff, #eaf3ff); padding: 44px var(--pad) 56px; }
  .lnet { aspect-ratio: auto; container-type: normal; }
  .lnet-bg, .lnet-lines, .lnet-ghosts, .lnet-dots { display: none; }
  .lnet-head { position: static; margin-bottom: 30px; }
  .lnet-head h3 { margin: 10px 0 8px; font-size: clamp(32px, 7vw, 52px); }
  .lnet-head p:not(.eyebrow) { font-size: 15px; }
  .lnet-nodes { position: relative; inset: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 14px; }
  .lnet-nodes::before { content: ""; position: absolute; left: 50%; top: 60px; bottom: 30px; border-left: 1px dashed #9cc3f2; }
  .lnode { --ps: 104px; --k: 1.14; position: relative; left: auto; top: auto; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; }
  .lnode.center { --ps: 150px; --k: 1.06; grid-column: 1 / -1; margin-bottom: 8px; }
  .lnode-btn { position: relative; transform: none; max-width: 100%; }
  .lnode-photo { padding: 5px; box-shadow: 0 0 0 1px #d9e7f7, 0 12px 26px #1f5fae29; }
  .lnode.center .lnode-photo { padding: 6px; border-width: 4px; box-shadow: 0 0 0 8px #dceaff99, 0 0 40px #5ea6ff55; }
  .lnode.active .lnode-photo { box-shadow: 0 0 0 3px #8cc0ff, 0 0 0 9px #d6e7ffb3, 0 0 36px #5ea6ff80; }
  .lnode-label { margin-top: -10px; padding: 8px 12px; border-radius: 16px; white-space: normal; max-width: 100%; }
  .lnode.center .lnode-label { margin-top: -14px; padding: 10px 26px; }
  .lnode-label strong { font-size: 12.5px; }
  .lnode-label small { font-size: 12px; }
  .lnode.center .lnode-label strong { font-size: 16px; }
  .lnode.center .lnode-label small { font-size: 13.5px; }
  .lnode.active:not(.center) .lnode-label { opacity: 1; transform: none; }
  /* the card drops below the person, over the row beneath; main.js nudges it (--shift) to stay on screen */
  .lnode-pop, .lnode[data-side="left"] .lnode-pop { top: 100%; left: 50%; right: auto; width: min(320px, calc(100vw - 2 * var(--pad))); min-height: 0; margin-top: 12px; padding: 16px 48px 18px 18px; border-radius: 16px; transform: translate(calc(-50% + var(--shift, 0px)), -6px); }
  .lnode.active .lnode-pop { transform: translate(calc(-50% + var(--shift, 0px)), 0); }
  .lnode[data-side="left"] .lpop-go, .lpop-go { left: auto; right: 14px; bottom: 14px; }
  .lnode-pop strong { font-size: 15px; }
  .lpop-role { font-size: 13.5px; }
  .lnode-pop p { font-size: 14px; margin-top: 8px; }
}
@media (max-width: 640px) {
  .lnet-nodes { grid-template-columns: repeat(2, 1fr); gap: 28px 12px; }
  .lnode { --ps: 92px; }
  .lnode.center { --ps: 132px; }
  .lnode-label strong { font-size: 12px; }
  .lnode-label small { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .lnode-photo, .lnode-label, .lnode-pop, .lnet-lines .ln, .lnet-lines .dot { transition: none !important; } }
/* while someone is active, everyone else steps back into greyscale */
.lnode-photo img, .lnode-label { transition: filter var(--dur) ease, opacity var(--dur) ease, transform var(--dur) var(--ease); }
.lnet.has-active .lnode:not(.active) .lnode-photo img { filter: grayscale(1) contrast(.92) brightness(1.06); }
.lnet.has-active .lnode:not(.active) .lnode-photo { box-shadow: 0 0 0 1px #dfe5ec, 0 .8cqw 1.8cqw #1f3a5f14; }
.lnet.has-active .lnode:not(.active) .lnode-label { filter: grayscale(1); opacity: .6; }

/* ═════════ v23: Services — built from the three service mockups ═════════ */
/* Desktop is one 1448-wide canvas scaled as a picture: --u is one mockup pixel, so every position below
   is the mockup's own coordinate. The top 50px of the mockup frame are trimmed off (the header sits above). */
.services-scene { text-align: left; }
.sv-stage { position: relative; }
.sv-deco { pointer-events: none; }
.sv-tab, .sv-prev, .sv-next { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sv-tab svg, .sv-go svg, .sv-fc-ico svg, .sv-check svg, .sv-prev svg, .sv-next svg, .sv-cta svg, .sv-proposal svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sv-fc-ico svg .fill { fill: currentColor; stroke: none; }
.sv-slide { display: none; }
.sv-slide.active { display: block; }

@media (min-width: 1024px) {
  .services-scene { padding: 24px 0 16px; background: none; }
  .sv-stage { width: min(100%, 1448px); margin: 0 auto; aspect-ratio: 1448 / 1036; container-type: inline-size; }
  .is-pinned .services-scene { justify-content: center; padding: 0; }
  .is-pinned .sv-stage { width: min(100%, 1448px, calc((100vh - var(--header-h) - 8px) * 1448 / 1036)); }
  .sv-canvas { --u: calc(100cqw / 1448); position: absolute; left: 0; top: calc(-50 * var(--u)); width: 100%; height: calc(1086 * var(--u)); }
  .sv-canvas > *, .sv-slide > *, .sv-visual > * { position: absolute; }

  /* ── background: sphere, dotted map, halftone, orbits, glow ── */
  .sv-deco { inset: 0; }
  .sv-deco > * { position: absolute; }
  .sv-glow { left: calc(470 * var(--u)); top: calc(40 * var(--u)); width: calc(1000 * var(--u)); height: calc(1000 * var(--u)); border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #d9e9ff 0%, #e6f0ffb3 40%, transparent 68%); }
  .sv-sphere { left: calc(860 * var(--u)); top: calc(-190 * var(--u)); width: calc(720 * var(--u)); height: calc(720 * var(--u)); border-radius: 50%;
    background: radial-gradient(circle at 42% 58%, #ffffff00 30%, #dcebff99 62%, #c5ddfb 71%, #eaf3ff00 72%); opacity: .9; }
  .sv-map { left: calc(930 * var(--u)); top: calc(30 * var(--u)); width: calc(640 * var(--u)); height: auto; aspect-ratio: 64 / 26; max-width: none; fill: #4b8ff0; opacity: .6;
    -webkit-mask-image: radial-gradient(ellipse 60% 75% at 50% 45%, #000 45%, transparent 78%); mask-image: radial-gradient(ellipse 60% 75% at 50% 45%, #000 45%, transparent 78%); }
  .sv-dots { background-image: radial-gradient(circle, #6f9fdc 1.3px, transparent 1.8px); background-size: calc(12 * var(--u)) calc(12 * var(--u)); opacity: .5; }
  .sv-dots.a { left: 0; top: calc(760 * var(--u)); width: calc(420 * var(--u)); height: calc(330 * var(--u));
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at 20% 70%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 50% 50% at 20% 70%, #000 10%, transparent 70%); }
  .sv-dots.b { left: calc(1300 * var(--u)); top: calc(560 * var(--u)); width: calc(150 * var(--u)); height: calc(420 * var(--u));
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 80% 50%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 60% 50% at 80% 50%, #000 15%, transparent 72%); }
  .sv-dots.c { left: calc(1330 * var(--u)); top: calc(160 * var(--u)); width: calc(120 * var(--u)); height: calc(200 * var(--u)); opacity: .35;
    -webkit-mask-image: radial-gradient(ellipse 60% 50% at 80% 50%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 60% 50% at 80% 50%, #000 15%, transparent 72%); }
  .sv-orbits { inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
  .sv-orbits ellipse, .sv-orbits path { fill: none; stroke: #4a90f0; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
  .sv-orbits .o1 { opacity: .55; } .sv-orbits .o2 { opacity: .28; } .sv-orbits .o4 { opacity: .45; } .sv-orbits .o5 { opacity: .35; }
  .sv-orbits .glowline { stroke: #8cc0ff; stroke-width: 26; opacity: .16; filter: blur(8px); }
  .sv-orbits .node { fill: #1d78f2; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
  .sv-orbits .halo { fill: #5ea6ff; opacity: .2; transform-box: fill-box; transform-origin: center; }
  @media (prefers-reduced-motion: no-preference) { .sv-orbits .halo { animation: lnet-pulse 5s ease-in-out infinite; } .sv-orbits .halo:nth-of-type(odd) { animation-delay: -2.5s; } }

  /* ── left column ── */
  .sv-head { left: calc(58 * var(--u)); top: calc(82 * var(--u)); width: calc(560 * var(--u)); }
  .sv-head .eyebrow { font-size: calc(13 * var(--u)); letter-spacing: .24em; font-weight: 800; color: #1f6fe0; }
  .sv-head .eyebrow span { color: #5c6d84; font-weight: 700; }
  .sv-head h2 { margin: calc(26 * var(--u)) 0 0; font-size: calc(51 * var(--u)); font-weight: 700; letter-spacing: -.045em; line-height: 1.03; color: #081b44; }
  .sv-head h2 span { display: block; color: var(--blue); }
  .sv-head p:not(.eyebrow) { margin-top: calc(24 * var(--u)); width: calc(500 * var(--u)); font-size: max(12px, calc(16.5 * var(--u))); line-height: 1.58; color: #4e6079; }

  .sv-tabs { left: calc(58 * var(--u)); top: calc(412 * var(--u)); width: calc(400 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
  .sv-tab { position: relative; display: flex; align-items: center; gap: calc(22 * var(--u)); height: calc(106 * var(--u)); padding: 0 calc(24 * var(--u)); border: 1px solid #e3ecf8; border-radius: calc(18 * var(--u)); background: #ffffffb8; text-align: left;
    transition: margin .35s var(--ease, ease), height .35s ease, background-color .35s ease, box-shadow .35s ease, border-color .35s ease; }
  .sv-tab::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: calc(9 * var(--u)); border-radius: calc(18 * var(--u)) 0 0 calc(18 * var(--u)); background: linear-gradient(180deg, #2b86ff, #0b5fe0); opacity: 0; transition: opacity .35s ease; }
  .sv-tab:hover { border-color: #c9dcf3; background: #fffffff0; }
  .sv-ico { display: grid; place-items: center; flex: none; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(15 * var(--u)); background: #edf3fb; color: #0e1f3f; transition: background-color .35s ease, color .35s ease, box-shadow .35s ease; }
  .sv-ico svg { width: 46%; height: 46%; }
  .sv-tab-text small { display: block; font-size: max(11px, calc(15 * var(--u))); color: #6a7b92; }
  .sv-tab-text b { display: block; margin-top: calc(2 * var(--u)); font: 600 max(14px, calc(21 * var(--u)))/1.2 var(--font-head); letter-spacing: -.02em; color: #0b1c3d; transition: color .35s ease; }
  .sv-go { display: grid; place-items: center; flex: none; margin-left: auto; width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: 50%; background: #eef3fa; color: #54657e; transition: all .35s ease; }
  .sv-go svg { width: 42%; height: 42%; stroke-width: 2; }
  .sv-tab[aria-selected="true"] { height: calc(116 * var(--u)); margin: 0 calc(-3 * var(--u)) 0 calc(-10 * var(--u)); padding-left: calc(34 * var(--u)); background: #fff; border-color: #e1ebf8; box-shadow: 0 calc(18 * var(--u)) calc(44 * var(--u)) #1f5fae1f; }
  .sv-tab[aria-selected="true"]::before { opacity: 1; }
  .sv-tab[aria-selected="true"] .sv-ico { background: #fff; color: var(--blue); box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) #1f5fae24; }
  .sv-tab[aria-selected="true"] .sv-tab-text b { color: #0b66e4; }
  .sv-tab[aria-selected="true"] .sv-go { width: calc(56 * var(--u)); height: calc(56 * var(--u)); background: linear-gradient(145deg, #3b93ff, #0b5fe0); color: #fff; box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) #0b5fe066, 0 0 0 calc(7 * var(--u)) #2b86ff1f; }

  .sv-status { left: calc(58 * var(--u)); top: calc(912 * var(--u)); width: calc(400 * var(--u)); height: calc(56 * var(--u)); display: flex; align-items: center; gap: calc(20 * var(--u)); }
  .sv-count { font-size: max(12px, calc(15 * var(--u))); color: #6a7b92; letter-spacing: .04em; }
  .sv-count b { color: #0b5fe0; }
  .sv-segs { display: flex; gap: calc(20 * var(--u)); }
  .sv-seg { display: block; width: calc(40 * var(--u)); height: 3px; border-radius: 3px; background: #c8dbf3; transition: background-color .35s ease, width .35s ease; }
  .sv-seg.on { width: calc(56 * var(--u)); background: var(--blue); }
  .sv-arrows { display: flex; gap: calc(14 * var(--u)); margin-left: auto; }
  .sv-prev, .sv-next { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); min-width: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #0b5fe0; box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) #1f5fae24; transition: opacity .25s ease, transform .25s ease; }
  .sv-prev svg { transform: rotate(180deg); }
  .sv-prev svg, .sv-next svg { width: 44%; height: 44%; stroke-width: 2.2; }
  .sv-prev:disabled, .sv-next:disabled { background: #f1f5fb; color: #a9bbd4; box-shadow: none; cursor: default; }
  .sv-prev:not(:disabled):hover, .sv-next:not(:disabled):hover { transform: translateY(-1px); }
  .sv-hint { left: calc(58 * var(--u)); top: calc(988 * var(--u)); font-size: max(10px, calc(11.5 * var(--u))); letter-spacing: .24em; text-transform: uppercase; color: #6a7b92; }
  .sv-hint span { margin-left: calc(6 * var(--u)); letter-spacing: 0; }
  .sv-proposal { left: calc(1200 * var(--u)); top: calc(1010 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); padding-bottom: calc(4 * var(--u)); border-bottom: 1.5px solid currentColor; font-size: max(12px, calc(15.5 * var(--u))); font-weight: 600; color: #0b5fe0; text-decoration: none; }
  .sv-proposal svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); stroke-width: 2; }

  /* ── right side: one slide per service ── */
  .sv-panel { inset: 0; }
  .sv-slide { display: block; position: absolute; inset: 0; visibility: hidden; }
  .sv-slide.active { visibility: visible; }
  html:not(.is-pinned) .sv-slide { opacity: 0; transition: opacity .45s ease, visibility 0s linear .45s; }
  html:not(.is-pinned) .sv-slide.active { opacity: 1; transition: opacity .45s ease, visibility 0s; }
  .sv-visual { inset: 0; }

  .sv-frame { margin: 0; overflow: hidden; border: calc(6 * var(--u)) solid #fff; border-radius: calc(28 * var(--u)); background: #dbe9f7; box-shadow: 0 calc(30 * var(--u)) calc(64 * var(--u)) #1f5fae33, 0 0 0 1px #cfe2fa; }
  .sv-frame picture, .sv-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .ts .sv-frame, .b2b .sv-frame { left: calc(575 * var(--u)); top: calc(170 * var(--u)); width: calc(780 * var(--u)); height: calc(500 * var(--u)); transform: perspective(calc(1600 * var(--u))) rotateY(-11deg) rotate(4.6deg) skewX(-5deg); transform-origin: 40% 50%; }
  .cs .sv-frame { left: calc(612 * var(--u)); top: calc(150 * var(--u)); width: calc(770 * var(--u)); height: calc(560 * var(--u)); border-radius: calc(30 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u)) calc(210 * var(--u)) / calc(30 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u)) calc(150 * var(--u)); transform: rotate(-3.4deg); }
  .sv-backing { left: calc(556 * var(--u)); top: calc(160 * var(--u)); width: calc(828 * var(--u)); height: calc(804 * var(--u)); border-radius: calc(34 * var(--u)); background: linear-gradient(180deg, #ffffffcc, #ffffff 60%); box-shadow: 0 calc(34 * var(--u)) calc(80 * var(--u)) #1f5fae29, 0 0 0 1px #e3edf9; transform: rotate(-1.4deg); transform-origin: 50% 100%; }

  .sv-fc { z-index: 2; display: flex; align-items: flex-start; gap: calc(18 * var(--u)); padding: calc(24 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u)); border-radius: calc(20 * var(--u)); border: 1px solid #ffffffe6; background: #ffffffe0; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 calc(24 * var(--u)) calc(54 * var(--u)) #1f5fae2e, inset 0 1px 0 #fff; }
  .sv-fc-ico { display: grid; place-items: center; flex: none; width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: calc(15 * var(--u)); background: #eaf2fe; color: var(--blue); }
  .sv-fc-ico svg { width: 52%; height: 52%; stroke-width: 1.8; }
  .sv-fc-text strong { display: block; padding-right: calc(10 * var(--u)); font: 600 max(12px, calc(19 * var(--u)))/1.22 var(--font-head); letter-spacing: -.02em; color: #0b1c3d; }
  .sv-fc-text small { display: block; margin-top: calc(10 * var(--u)); font-size: max(10.5px, calc(14.5 * var(--u))); line-height: 1.4; color: #56677f; }
  .sv-fc-dot { position: absolute; right: calc(18 * var(--u)); top: calc(20 * var(--u)); width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: #1d78f2; box-shadow: 0 0 0 calc(5 * var(--u)) #1d78f222; }
  .b2b .f1 { left: calc(585 * var(--u)); top: calc(92 * var(--u)); width: calc(330 * var(--u)); rotate: 5deg; }
  .b2b .f2 { left: calc(490 * var(--u)); top: calc(376 * var(--u)); width: calc(320 * var(--u)); rotate: 4deg; }
  .b2b .f3 { left: calc(1165 * var(--u)); top: calc(432 * var(--u)); width: calc(268 * var(--u)); rotate: -3deg; }
  .b2b .f2 .sv-fc-ico { background: #eaf2fe; }
  .ts .f1 { left: calc(602 * var(--u)); top: calc(110 * var(--u)); width: calc(296 * var(--u)); rotate: 4deg; }
  .ts .f2 { left: calc(490 * var(--u)); top: calc(382 * var(--u)); width: calc(290 * var(--u)); rotate: 5deg; }
  .ts .f3 { left: calc(1165 * var(--u)); top: calc(418 * var(--u)); width: calc(268 * var(--u)); rotate: -5deg; }
  .cs .f1 { left: calc(1113 * var(--u)); top: calc(124 * var(--u)); width: calc(285 * var(--u)); rotate: 4deg; }
  .cs .f2 { left: calc(510 * var(--u)); top: calc(374 * var(--u)); width: calc(270 * var(--u)); rotate: 5deg; }
  .cs .f3 { left: calc(1143 * var(--u)); top: calc(462 * var(--u)); width: calc(270 * var(--u)); rotate: -6deg; }
  @media (prefers-reduced-motion: no-preference) {
    .sv-slide.active .sv-fc { animation: sv-float 7s ease-in-out infinite; }
    .sv-slide.active .sv-fc.f2 { animation-duration: 8.2s; animation-delay: -3s; }
    .sv-slide.active .sv-fc.f3 { animation-duration: 7.6s; animation-delay: -5s; }
  }
  @keyframes sv-float { 50% { transform: translateY(calc(-6 * var(--u))); } }

  .sv-card { z-index: 3; display: grid; grid-template-columns: 1fr calc(318 * var(--u)); column-gap: calc(38 * var(--u)); border-radius: calc(30 * var(--u)); background: #fff; border: 1px solid #eef3fa; box-shadow: 0 calc(30 * var(--u)) calc(70 * var(--u)) #1f5fae26; }
  .ts .sv-card, .b2b .sv-card { left: calc(500 * var(--u)); top: calc(620 * var(--u)); width: calc(918 * var(--u)); min-height: calc(360 * var(--u)); padding: calc(46 * var(--u)) calc(44 * var(--u)) calc(34 * var(--u)); }
  .cs .sv-card { left: calc(568 * var(--u)); top: calc(652 * var(--u)); width: calc(810 * var(--u)); padding: calc(24 * var(--u)) calc(36 * var(--u)) calc(30 * var(--u)) calc(44 * var(--u)); grid-template-columns: 1fr calc(250 * var(--u)); background: none; border: 0; box-shadow: none; }
  .sv-card .eyebrow { font-size: max(10px, calc(13 * var(--u))); letter-spacing: .28em; font-weight: 800; color: #1f6fe0; }
  .sv-card h3 { margin: calc(16 * var(--u)) 0 calc(18 * var(--u)); font-size: calc(42 * var(--u)); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; color: #081b44; white-space: nowrap; }
  .cs .sv-card h3 { font-size: calc(38 * var(--u)); margin-bottom: calc(14 * var(--u)); }
  .sv-desc { font-size: max(12px, calc(17 * var(--u))); line-height: 1.55; color: #56677f; }
  .cs .sv-desc { font-size: max(11.5px, calc(15.5 * var(--u))); }
  .sv-cta { margin-top: calc(28 * var(--u)); min-height: 0; height: calc(60 * var(--u)); padding: 0 calc(32 * var(--u)); gap: calc(16 * var(--u)); border-radius: calc(10 * var(--u)); font-size: max(13px, calc(18 * var(--u))); font-weight: 600; background: linear-gradient(180deg, #1b7cff, #0a5fe6); box-shadow: 0 calc(12 * var(--u)) calc(26 * var(--u)) #0b5fe640; }
  .cs .sv-cta { height: calc(54 * var(--u)); font-size: max(12.5px, calc(17 * var(--u))); margin-top: calc(24 * var(--u)); }
  .sv-cta svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); stroke-width: 2.2; }
  .sv-checks { align-self: start; margin: calc(96 * var(--u)) 0 0; padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(36 * var(--u)); border-left: 1px solid #e1e9f4; list-style: none; }
  .cs .sv-checks { margin-top: calc(84 * var(--u)); padding-left: 0; border: 0; }
  .sv-checks li { display: flex; align-items: flex-start; gap: calc(18 * var(--u)); font-size: max(11.5px, calc(16.5 * var(--u))); line-height: 1.45; color: #34465f; }
  .sv-checks li + li { margin-top: calc(14 * var(--u)); }
  .cs .sv-checks li { font-size: max(11px, calc(14 * var(--u))); gap: calc(14 * var(--u)); }
  .cs .sv-checks li + li { margin-top: calc(16 * var(--u)); }
  .sv-check { display: grid; place-items: center; flex: none; width: calc(32 * var(--u)); height: calc(32 * var(--u)); margin-top: calc(-4 * var(--u)); border-radius: 50%; background: #e7f0fd; color: #0b5fe0; }
  .cs .sv-check { width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin-top: calc(-3 * var(--u)); }
  .sv-check svg { width: 56%; height: 56%; stroke-width: 2.6; }
}

/* ── phone / tablet: the same parts, stacked; tabs switch the service in place ── */
@media (max-width: 1023px) {
  .services-scene { padding: 56px var(--pad) 60px; }
  .sv-deco, .sv-hint { display: none; }
  .sv-canvas { display: flex; flex-direction: column; }
  .sv-head .eyebrow { letter-spacing: .2em; }
  .sv-head .eyebrow span { color: #5c6d84; }
  .sv-head h2 { margin: 16px 0 0; font-size: clamp(30px, 7vw, 46px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
  .sv-head h2 span { display: block; color: var(--blue); }
  .sv-head p:not(.eyebrow) { margin-top: 16px; font-size: 16px; line-height: 1.6; }
  .sv-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 26px; }
  .sv-tab { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid #e3ecf8; border-radius: 14px; background: #ffffffc4; text-align: left; transition: background-color .3s ease, box-shadow .3s ease; }
  .sv-tab::before { content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 4px; border-radius: 0 0 4px 4px; background: var(--blue); opacity: 0; transition: opacity .3s ease; }
  .sv-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: #edf3fb; color: #0e1f3f; }
  .sv-ico svg { width: 22px; height: 22px; }
  .sv-tab-text small { display: block; font-size: 12px; color: #6a7b92; }
  .sv-tab-text b { display: block; font: 600 15px/1.2 var(--font-head); letter-spacing: -.02em; }
  .sv-go { display: none; }
  .sv-tab[aria-selected="true"] { background: #fff; box-shadow: 0 14px 30px #1f5fae1f; }
  .sv-tab[aria-selected="true"]::before { opacity: 1; }
  .sv-tab[aria-selected="true"] .sv-ico { background: #fff; color: var(--blue); box-shadow: 0 6px 16px #1f5fae24; }
  .sv-tab[aria-selected="true"] .sv-tab-text b { color: #0b66e4; }
  .sv-status { order: 3; display: flex; align-items: center; gap: 16px; margin-top: 18px; }
  .sv-count { font-size: 14px; color: #6a7b92; } .sv-count b { color: #0b5fe0; }
  .sv-segs { display: flex; gap: 10px; }
  .sv-seg { display: block; width: 28px; height: 3px; border-radius: 3px; background: #c8dbf3; }
  .sv-seg.on { width: 40px; background: var(--blue); }
  .sv-arrows { display: flex; gap: 10px; margin-left: auto; }
  .sv-prev, .sv-next { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #0b5fe0; box-shadow: 0 8px 20px #1f5fae24; }
  .sv-prev svg { transform: rotate(180deg); }
  .sv-prev svg, .sv-next svg { width: 18px; height: 18px; stroke-width: 2.2; }
  .sv-prev:disabled, .sv-next:disabled { background: #f1f5fb; color: #a9bbd4; box-shadow: none; }
  .sv-panel { order: 4; margin-top: 22px; }
  .sv-slide.active { animation: sv-in .45s ease both; }
  @keyframes sv-in { from { opacity: 0; transform: translateY(10px); } }
  .sv-visual { position: relative; padding: 22px 6px 0; }
  .sv-backing { display: none; }
  .sv-frame { margin: 0; overflow: hidden; border: 5px solid #fff; border-radius: 22px; box-shadow: 0 24px 50px #1f5fae33, 0 0 0 1px #cfe2fa; transform: rotate(-1.2deg); }
  .sv-frame img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .sv-fc { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; max-width: 62%; padding: 10px 14px 10px 10px; border-radius: 14px; background: #ffffffe6; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 14px 30px #1f5fae2e; }
  .sv-fc-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #eaf2fe; color: var(--blue); }
  .sv-fc-ico svg { width: 19px; height: 19px; }
  .sv-fc-text strong { display: block; font: 600 13px/1.25 var(--font-head); color: #0b1c3d; }
  .sv-fc-text small, .sv-fc-dot { display: none; }
  .sv-fc.f1 { right: -4px; top: 0; rotate: 3deg; }
  .sv-fc.f2 { left: -4px; bottom: 18px; rotate: -2deg; }
  .sv-fc.f3 { display: none; }
  .sv-card { position: relative; z-index: 3; margin-top: -26px; padding: 26px 22px; border-radius: 22px; background: #fff; box-shadow: 0 24px 54px #1f5fae26; }
  .sv-card .eyebrow { font-size: 12px; letter-spacing: .24em; }
  .sv-card h3 { margin: 10px 0 12px; font-size: clamp(24px, 5.6vw, 34px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
  .sv-desc { font-size: 15.5px; line-height: 1.6; }
  .sv-cta { margin-top: 20px; gap: 12px; border-radius: 10px; }
  .sv-cta svg { width: 18px; height: 18px; stroke-width: 2.2; }
  .sv-checks { margin: 22px 0 0; padding: 20px 0 0; border-top: 1px solid #e1e9f4; list-style: none; }
  .sv-checks li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #34465f; }
  .sv-checks li + li { margin-top: 12px; }
  .sv-check { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #e7f0fd; color: #0b5fe0; }
  .sv-check svg { width: 15px; height: 15px; stroke-width: 2.6; }
  .sv-proposal { order: 5; align-self: flex-end; display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding-bottom: 3px; border-bottom: 1.5px solid currentColor; font-weight: 600; text-decoration: none; }
  .sv-proposal svg { width: 16px; height: 16px; stroke-width: 2; }
}
@media (max-width: 600px) {
  .sv-tabs { grid-template-columns: 1fr; }
  .sv-tab { flex-direction: row; align-items: center; gap: 14px; padding: 12px 14px; }
  .sv-tab::before { left: -1px; right: auto; top: 10px; bottom: 10px; width: 4px; height: auto; border-radius: 0 4px 4px 0; }
  .sv-fc { max-width: 78%; }
}
.services-scene > .sv-stage { max-width: none; }
@media (min-width: 1024px) {
  .sv-head { width: calc(600 * var(--u)); }
  .sv-head h2 { font-size: calc(47.5 * var(--u)); letter-spacing: -.05em; }
  /* card: label and headline span the card; description + button left, checklist right */
  .sv-card { grid-template-columns: minmax(0, 1fr) calc(318 * var(--u)); grid-template-rows: auto auto auto 1fr; align-items: start; }
  .cs .sv-card { grid-template-columns: minmax(0, 1fr) calc(250 * var(--u)); }
  .sv-card-main { display: contents; }
  .sv-card .eyebrow, .sv-card h3 { grid-column: 1 / -1; }
  .sv-desc { grid-column: 1; grid-row: 3; }
  .sv-cta { grid-column: 1; grid-row: 4; justify-self: start; }
  .sv-checks, .cs .sv-checks { grid-column: 2; grid-row: 3 / 5; margin-top: calc(10 * var(--u)); }
  .sv-checks { margin-left: 0; }
  .cs .sv-frame { height: calc(575 * var(--u)); border-radius: calc(30 * var(--u)) calc(30 * var(--u)) calc(44 * var(--u)) calc(430 * var(--u)) / calc(30 * var(--u)) calc(30 * var(--u)) calc(44 * var(--u)) calc(190 * var(--u)); }
  .sv-fc-text strong { font-size: max(12px, calc(18 * var(--u))); }
  .b2b .f1 { width: calc(340 * var(--u)); } .b2b .f2 { width: calc(330 * var(--u)); } .b2b .f3 { width: calc(278 * var(--u)); }
  .ts .f1 { width: calc(310 * var(--u)); } .ts .f2 { width: calc(300 * var(--u)); } .ts .f3 { width: calc(282 * var(--u)); }
  .cs .f1 { width: calc(295 * var(--u)); } .cs .f2 { width: calc(280 * var(--u)); } .cs .f3 { width: calc(282 * var(--u)); }
  .sv-tab-text b { font-size: max(14px, calc(20.5 * var(--u))); white-space: nowrap; }
  .sv-tab { gap: calc(20 * var(--u)); }
}
@media (min-width: 1024px) { .sv-head { z-index: 5; } }
.sv-count, .sv-proposal, .sv-hint { white-space: nowrap; }
@media (max-width: 1023px) { .sv-visual, .sv-card { width: 100%; max-width: 720px; margin-inline: auto; } .sv-card { margin-top: -26px; } }
@media (min-width: 1024px) {
  /* Technical Support / B2B: the photo is only tilted (no skew, so nothing is stretched), and the content
     card's top edge follows the photo's bottom edge down to the right, as in the mockups */
  .ts .sv-frame, .b2b .sv-frame { transform: perspective(calc(2600 * var(--u))) rotateY(-4deg) rotate(4.5deg); transform-origin: 50% 50%; }
  .ts .sv-card, .b2b .sv-card { background: none; border: 0; box-shadow: none; padding-top: calc(52 * var(--u)); }
  .ts .sv-card::before, .b2b .sv-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 918 360' preserveAspectRatio='none'%3E%3Cpath d='M0 36Q0 1 35 2L883 73Q918 76 918 111V324Q918 360 882 360H36Q0 360 0 324Z' fill='%23fff' stroke='%23e9f0fa' stroke-width='1.5'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    filter: drop-shadow(0 calc(26 * var(--u)) calc(34 * var(--u)) #1f5fae29); }
}

/* ═════════ v24: Careers — from the mockup ═════════ */
.careers-page { padding-top: clamp(56px, 7vw, 96px); background: radial-gradient(ellipse 50% 30% at 50% 22%, #ffffff 0%, transparent 100%), linear-gradient(180deg, #f2f8ff 0%, #eaf3ff 60%, #e6f0ff 100%); }
.careers-hero { max-width: 900px; margin-bottom: clamp(30px, 3.4vw, 46px); }
.careers-hero .eyebrow { display: inline-flex; align-items: center; gap: 22px; font-size: 14px; letter-spacing: .3em; }
.careers-hero .eyebrow::before, .careers-hero .eyebrow::after { content: ""; width: clamp(40px, 5vw, 64px); height: 1.5px; background: #9cc3f2; }
.careers-hero h2 { margin: 16px 0 18px; font-size: clamp(38px, 5.2vw, 76px); font-weight: 800; letter-spacing: -.055em; line-height: 1.03; color: #0a1f4d; }
.careers-hero p:not(.eyebrow) { max-width: 640px; font-size: clamp(16px, 1.45vw, 21px); line-height: 1.45; color: #4f6280; }

/* Photo: a white glass frame with a soft blue edge, two small orbs and a pill tucked under the bottom edge */
.team-banner-wrap { position: relative; margin: 0 auto; max-width: 1140px; padding-bottom: 36px; }
.team-banner-wrap::before, .team-banner-wrap::after { content: ""; position: absolute; bottom: 36px; width: clamp(60px, 7vw, 90px); height: 1px; background: #b9d3f2; }
.team-banner-wrap::before { left: 18%; } .team-banner-wrap::after { right: 18%; }
.careers-page .team-banner { margin: 0; padding: clamp(6px, .7vw, 10px); border-radius: clamp(18px, 2vw, 26px); border: 1px solid #ffffff; background: linear-gradient(160deg, #ffffffee, #eef5ffcc);
  box-shadow: 0 30px 70px #1f5fae2e, 0 0 0 1px #cfe2fa, 0 0 40px #8fc0ff33; overflow: visible; }
.careers-page .team-banner picture, .careers-page .team-banner img { display: block; width: 100%; height: auto; border-radius: clamp(14px, 1.6vw, 20px); }
.tb-orb { position: absolute; z-index: 2; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d8ecff 0%, #6aaef9 45%, #1f73ec 100%); box-shadow: 0 8px 20px #1f73ec55, inset 0 -3px 8px #0b4fc044; pointer-events: none; }
.tb-orb.a { left: -18px; top: -14px; width: clamp(28px, 3.6vw, 46px); height: clamp(28px, 3.6vw, 46px); }
.tb-orb.b { right: -14px; bottom: 20px; width: clamp(22px, 2.8vw, 36px); height: clamp(22px, 2.8vw, 36px); }
.careers-pill { position: absolute; left: 50%; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 18px; margin: 0; padding: 12px 38px 12px 14px; transform: translateX(-50%); white-space: nowrap;
  border-radius: 999px; border: 1px solid #ffffff; background: #ffffffee; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 18px 40px #1f5fae29, 0 0 0 1px #dfeaf8;
  font: 500 clamp(14px, 1.35vw, 19px) var(--font-body); color: #0d2250; }
.careers-pill b { color: var(--blue); font-weight: 700; }
.cp-ico { display: grid; place-items: center; width: clamp(40px, 4vw, 54px); height: clamp(40px, 4vw, 54px); border-radius: 50%; background: #e6f1ff; }
.careers-pill > span:last-child { padding-left: 18px; border-left: 1px solid #d3e2f4; }
.cp-ico svg { width: 48%; height: 48%; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.careers-tagline { display: none; }

/* Intro: headline with a short blue rule, divider, paragraph */
.careers-intro { max-width: 1060px; margin: clamp(56px, 6vw, 84px) auto 0; grid-template-columns: .9fr 1.1fr; gap: 0; align-items: center; }
.careers-intro h3 { position: relative; padding: 0 clamp(20px, 3vw, 48px) 26px 0; font-size: clamp(34px, 4.1vw, 60px); font-weight: 800; letter-spacing: -.05em; line-height: 1.04; color: #0a1f4d; }
.careers-intro h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 4px; border-radius: 2px; background: var(--blue); }
.careers-intro p { padding-left: clamp(20px, 3vw, 32px); border-left: 1px solid #c9dcf0; font-size: clamp(15px, 1.2vw, 17.5px); line-height: 1.6; color: #52657f; }

/* Three glass cards with a faint icon watermark */
.careers-values { max-width: 1110px; margin: clamp(30px, 3.4vw, 46px) auto 0; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 38px); }
.careers-values li { position: relative; overflow: hidden; padding: clamp(22px, 2.6vw, 36px) clamp(20px, 3vw, 38px) clamp(24px, 2.6vw, 30px); border: 1px solid #ffffff; border-left: 1px solid #ffffff; border-radius: 22px; text-align: left;
  background: linear-gradient(160deg, #ffffffe6, #f3f8ffcc); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 22px 50px #1f5fae1f, 0 0 0 1px #e1ecf9; }
.careers-values li:first-child { border-left: 1px solid #ffffff; }
.careers-values li + li::before { content: ""; position: absolute; }
.cv-ico { display: grid; place-items: center; width: clamp(54px, 5.2vw, 70px); height: clamp(54px, 5.2vw, 70px); margin-bottom: 18px; border-radius: 50%; background: #e3effe; box-shadow: inset 0 0 0 1px #d2e4fb; }
.cv-ico svg { width: 48%; height: 48%; margin: 0; fill: none; stroke: var(--blue); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cv-ghost { position: absolute; right: -6px; top: 28px; width: clamp(90px, 9vw, 120px) !important; height: clamp(90px, 9vw, 120px) !important; margin: 0 !important; stroke: #dfe8f4 !important; stroke-width: 1.3 !important; opacity: .9; pointer-events: none; }
.careers-values strong { position: relative; padding-bottom: 14px; font: 700 clamp(19px, 1.6vw, 24px) var(--font-head); letter-spacing: -.03em; color: #0a1f4d; }
.careers-values strong::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 2px; background: var(--blue); }
.careers-values p { position: relative; margin-top: 16px; font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.5; color: #52657f; }
.careers-values p b { color: var(--blue); }
.careers-close { margin-top: clamp(56px, 7vw, 88px); }

@media (max-width: 860px) {
  .careers-intro { grid-template-columns: 1fr; gap: 20px; }
  .careers-intro p { padding-left: 0; border-left: 0; }
  .careers-values { grid-template-columns: 1fr; gap: 16px; }
  .team-banner-wrap::before, .team-banner-wrap::after { display: none; }
}
@media (max-width: 600px) {
  .careers-pill { position: relative; left: auto; transform: none; margin: -24px auto 0; width: max-content; max-width: calc(100% - 16px); padding: 8px 18px 8px 8px; gap: 10px; white-space: normal; font-size: 14px; }
  .careers-pill > span:last-child { padding-left: 10px; }
  .team-banner-wrap { padding-bottom: 0; }
  .tb-orb.a { left: -6px; } .tb-orb.b { right: -4px; }
}
/* v24b: smaller, glassier value cards */
.careers-values { max-width: 960px; gap: clamp(14px, 2vw, 24px); }
.careers-values li { padding: 20px 24px 22px; border-radius: 18px; border: 1px solid #ffffffb3;
  background: linear-gradient(150deg, #ffffff73, #ffffff33); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 14px 34px #1f5fae14, inset 0 1px 0 #ffffffd9, inset 0 0 0 1px #ffffff40; }
.cv-ico { width: 46px; height: 46px; margin-bottom: 12px; background: #ffffff8c; box-shadow: inset 0 0 0 1px #ffffffcc, 0 4px 12px #1f5fae14; }
.cv-ghost { top: 18px; right: -4px; width: 78px !important; height: 78px !important; stroke: #ffffff !important; opacity: .7; }
.careers-values strong { padding-bottom: 10px; font-size: clamp(17px, 1.35vw, 20px); }
.careers-values strong::after { width: 28px; }
.careers-values p { margin-top: 12px; font-size: clamp(14px, 1.05vw, 15.5px); }

/* ═════════ v25: Our Team — CEO scroll story (from the mockup, 1774 × 887 frame) ═════════ */
/* Each stage reads a 0…1 variable (--bg, --pt, --a1…) that main.js scrubs from scroll while pinned;
   the defaults are 1, so without the script, or with reduced motion, everything simply shows. */
.team { padding-top: 0; }
.ceo-story { position: relative; z-index: 1; background: radial-gradient(ellipse 45% 60% at 50% 40%, #ffffff 0%, transparent 70%), linear-gradient(180deg, #f1f7ff 0%, #e8f2ff 60%, #eef5ff 100%); }
.ceo-story .sr-only { position: absolute; }
.cs-left mark, .cs-growth mark { background: none; color: inherit; padding: 0; }
.cs-orbits path { fill: none; stroke: #7fb2ef; stroke-width: 1.2; vector-effect: non-scaling-stroke; opacity: .55; }
.cs-orbits path.dash { stroke-dasharray: 2 7; stroke-width: 2; stroke-linecap: round; opacity: .7; }
.cs-orbits .pt { fill: #fff; stroke: #5ea6ff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cs-orbits .glow { fill: #8cc4ff; opacity: .35; }
.cs-sphere { width: 100%; height: 100%; max-width: none; overflow: visible; display: block; }
.cs-sphere .cs-map { fill: #3d86ec; opacity: .55; }
.cs-sphere .cs-grid ellipse, .cs-sphere .cs-grid path { fill: none; stroke: #ffffff; stroke-width: 1.6; opacity: .75; }
.cs-dots { position: absolute; background-image: radial-gradient(circle, #6fa3e6 1.4px, transparent 2px); background-size: 16px 16px; opacity: .55; }
.st-ico svg, .cs-garrow svg, .st-arrow svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 1024px) {
  .ceo-story.is-story { height: 290vh; }
  .ceo-pin { position: relative; }
  .is-story .ceo-pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); display: grid; place-items: center; overflow: hidden; }
  .ceo-canvas { --u: calc(var(--cw) / 1774); --cw: min(100vw, calc((100vh - var(--header-h)) * 1774 / 887)); position: relative; width: var(--cw); height: calc(887 * var(--u)); margin: 0 auto; }
  .ceo-story:not(.is-story) .ceo-canvas { --cw: min(100vw, 1774px); margin-block: 30px; }
  .ceo-canvas > *, .cs-bg > *, .cs-strip > * { position: absolute; }

  /* 1 · background, globe, orbits */
  .cs-bg { inset: 0; opacity: var(--bg, 1); }
  .cs-dots.a { left: 0; top: 0; width: calc(420 * var(--u)); height: calc(260 * var(--u));
    -webkit-mask-image: radial-gradient(ellipse 55% 60% at 10% 20%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 55% 60% at 10% 20%, #000 10%, transparent 70%); }
  .cs-dots.b { right: 0; top: calc(560 * var(--u)); width: calc(260 * var(--u)); height: calc(300 * var(--u)); opacity: .35;
    -webkit-mask-image: radial-gradient(ellipse 55% 55% at 85% 40%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 55% 55% at 85% 40%, #000 10%, transparent 72%); }
  .cs-globe { left: calc(540 * var(--u)); top: calc(0 * var(--u)); width: calc(660 * var(--u)); height: calc(660 * var(--u));
    transform: translateY(calc(var(--drift, 0) * -18 * var(--u))) scale(calc(.92 + var(--bg, 1) * .08)) rotate(calc(var(--drift, 0) * 6deg)); }
  .cs-glow { inset: -12%; border-radius: 50%; background: radial-gradient(circle, #bfdaff 0%, #d9e9ff99 45%, transparent 70%); }
  .cs-sphere .cs-map { transform: translateX(calc(var(--drift, 0) * -140px)); }
  .cs-orbits { inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; transform: translateY(calc(var(--drift, 0) * -10 * var(--u))); }

  /* 2 · portrait, emerging from the globe (clipped at the strip so it stands behind it) */
  .cs-portrait { left: calc(560 * var(--u)); top: calc(82 * var(--u)); width: calc(500 * var(--u)); height: calc(610 * var(--u)); overflow: hidden;
    opacity: var(--pt, 1); transform: translateY(calc((1 - var(--pt, 1)) * 40 * var(--u))) scale(calc(.96 + var(--pt, 1) * .04)); transform-origin: 50% 100%; }
  .cs-portrait img { display: block; width: calc(452 * var(--u)); height: auto; margin: 0 auto; filter: drop-shadow(0 calc(20 * var(--u)) calc(30 * var(--u)) #1f5fae33); }

  /* 3 · left column, line by line */
  .cs-left { left: calc(67 * var(--u)); top: calc(150 * var(--u)); width: calc(560 * var(--u)); }
  .cs-left > * { opacity: var(--k, 1); transform: translateX(calc((1 - var(--k, 1)) * -46 * var(--u))); }
  .cs-a1 { --k: var(--a1, 1); } .cs-a2 { --k: var(--a2, 1); } .cs-a3 { --k: var(--a3, 1); } .cs-a4 { --k: var(--a4, 1); } .cs-growth { --k: var(--g5, 1); }
  .cs-left .eyebrow { font-size: max(10px, calc(15 * var(--u))); letter-spacing: .24em; font-weight: 800; color: #1f6fe0; }
  .cs-left h2 { margin: calc(22 * var(--u)) 0 0; font-size: calc(66 * var(--u)); font-weight: 800; letter-spacing: -.05em; line-height: 1.02; color: #0a1f4d; }
  .cs-left h2 span { display: block; color: var(--blue); }
  .cs-left blockquote { margin: calc(40 * var(--u)) 0 0 calc(12 * var(--u)); padding-left: calc(30 * var(--u)); border-left: calc(4 * var(--u)) solid var(--blue); font: 500 calc(26 * var(--u))/1.22 var(--font-head); letter-spacing: -.02em; color: #0d2250; }
  .cs-a4 { margin: calc(30 * var(--u)) 0 0 calc(12 * var(--u)); font-size: max(12px, calc(17.5 * var(--u))); line-height: 1.45; color: #52657f; }

  /* 4 · growth line: 5 representatives → 80+ employees */
  .cs-growth { display: flex; align-items: center; gap: calc(12 * var(--u)); margin: calc(26 * var(--u)) 0 0 calc(12 * var(--u)); font-size: max(12px, calc(16 * var(--u))); color: #52657f; }
  .cs-growth mark { position: relative; padding: calc(5 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); font-weight: 700; white-space: nowrap; color: #0a1f4d; }
  .cs-growth mark::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #d9e9ff; box-shadow: 0 0 calc(18 * var(--u)) #5ea6ff55; transform-origin: left; }
  .cs-growth mark::after { content: ""; position: absolute; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(2 * var(--u)); height: 2px; background: var(--blue); transform-origin: left; }
  .cs-growth .g5 { --h: var(--g5, 1); } .cs-growth .g80 { --h: var(--g80, 1); }
  .cs-growth mark { color: color-mix(in srgb, #0b5fe0 calc(var(--h) * 100%), #52657f); }
  .cs-growth mark::before { opacity: var(--h); transform: scaleX(var(--h)); }
  .cs-growth mark::after { transform: scaleX(var(--h)); }
  .cs-growth mark { isolation: isolate; } .cs-growth mark::before, .cs-growth mark::after { z-index: -1; }
  .cs-garrow { width: calc(56 * var(--u)); color: var(--blue); flex: none; }
  .cs-garrow svg { width: 100%; height: auto; stroke-width: 2; }
  .cs-garrow path { stroke-dasharray: 80; stroke-dashoffset: calc((1 - var(--ga, 1)) * 80); }
  .cs-growth .g80 { opacity: calc(.35 + var(--g80, 1) * .65); }

  /* 5 · biography card */
  .cs-card { left: calc(1175 * var(--u)); top: calc(103 * var(--u)); width: calc(553 * var(--u)); height: calc(550 * var(--u)); padding: calc(38 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)) calc(40 * var(--u));
    border-radius: calc(28 * var(--u)); border: 1px solid #ffffff; background: linear-gradient(160deg, #ffffffe8, #f5f9ffd9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) #1f5fae24, 0 0 0 1px #e1ecf9;
    opacity: var(--card, 1); transform: translateX(calc((1 - var(--card, 1)) * 60 * var(--u))); }
  .cs-card h3 { font-size: calc(38 * var(--u)); font-weight: 800; letter-spacing: -.045em; color: #0a1f4d; }
  .cs-role { position: relative; margin-top: calc(8 * var(--u)); padding-bottom: calc(24 * var(--u)); font-size: max(10px, calc(15 * var(--u))); letter-spacing: .26em; font-weight: 700; text-transform: uppercase; color: #1f6fe0; }
  .cs-role::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(78 * var(--u)); height: calc(4 * var(--u)); border-radius: 2px; background: var(--blue); }
  .cs-card p:not(.cs-role) { margin-top: calc(22 * var(--u)); font-size: max(11.5px, calc(16.5 * var(--u))); line-height: 1.42; color: #52657f; }
  .cs-card p:not(.cs-role) + p { margin-top: calc(16 * var(--u)); }

  /* 6 · growth strip, left to right, joined by a line that draws itself */
  .cs-strip { left: calc(60 * var(--u)); top: calc(670 * var(--u)); width: calc(1654 * var(--u)); height: calc(170 * var(--u)); border-radius: calc(26 * var(--u)); border: 1px solid #ffffff;
    background: linear-gradient(160deg, #ffffffeb, #f4f9ffd9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 calc(26 * var(--u)) calc(56 * var(--u)) #1f5fae24, 0 0 0 1px #e1ecf9;
    opacity: var(--strip, 1); transform: translateY(calc((1 - var(--strip, 1)) * 30 * var(--u))); }
  .cs-journey { left: calc(39 * var(--u)); top: calc(34 * var(--u)); width: calc(330 * var(--u)); }
  .cs-journey .eyebrow { position: relative; padding-bottom: calc(18 * var(--u)); font-size: max(10px, calc(15 * var(--u))); letter-spacing: .24em; font-weight: 800; color: #1f6fe0; }
  .cs-journey .eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: calc(84 * var(--u)); height: calc(3 * var(--u)); background: var(--blue); transform: scaleX(var(--strip, 1)); transform-origin: left; }
  .cs-journey p:not(.eyebrow) { margin-top: calc(18 * var(--u)); font-size: max(11.5px, calc(16.5 * var(--u))); line-height: 1.5; color: #52657f; }
  .cs-line { inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; pointer-events: none; }
  .cs-line path { fill: none; stroke: #7fb2ef; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--line, 1)); }
  .cs-line .n { fill: #fff; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
  .cs-line .n1 { opacity: var(--st1, 1); } .cs-line .n2 { opacity: var(--st2, 1); } .cs-line .n3 { opacity: var(--st3, 1); } .cs-line .n4 { opacity: var(--st4, 1); }
  .cs-stats { inset: 0; margin: 0; padding: 0; list-style: none; }
  .cs-stats > li { position: absolute; top: calc(40 * var(--u)); display: flex; align-items: flex-start; gap: calc(22 * var(--u)); }
  .cs-stats .st { opacity: var(--k, 1); transform: translateX(calc((1 - var(--k, 1)) * -24 * var(--u))); }
  .st1 { --k: var(--st1, 1); left: calc(435 * var(--u)); } .st2 { --k: var(--st2, 1); left: calc(806 * var(--u)); }
  .st3 { --k: var(--st3, 1); left: calc(1180 * var(--u)); } .st4 { --k: var(--st4, 1); left: calc(1435 * var(--u)); }
  .st-ico { display: grid; place-items: center; flex: none; width: calc(86 * var(--u)); height: calc(86 * var(--u)); border-radius: 50%; background: #e3effe; color: var(--blue); box-shadow: inset 0 0 0 1px #d2e4fb, 0 0 calc(24 * var(--u)) #8cc4ff55;
    transform: scale(calc(.85 + var(--k, 1) * .15)); }
  .st-ico svg { width: 50%; height: 50%; stroke-width: 1.7; }
  .st strong { display: block; margin-top: calc(-4 * var(--u)); font: 800 calc(44 * var(--u))/1.05 var(--font-head); letter-spacing: -.04em; color: #0a1f4d; font-variant-numeric: tabular-nums; }
  .st b { display: block; margin-top: calc(4 * var(--u)); font-size: max(12px, calc(18 * var(--u))); font-weight: 500; line-height: 1.3; color: #0d2250; }
  .st small { display: block; margin-top: calc(6 * var(--u)); font-size: max(10.5px, calc(14.5 * var(--u))); color: #6a7b92; }
  .st-arrow { left: calc(708 * var(--u)); top: calc(78 * var(--u)) !important; width: calc(62 * var(--u)); color: var(--blue); }
  .st-arrow svg { width: 100%; height: auto; stroke-width: 1.8; }
  .st-arrow path { stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--sa, 1)); }
  .cs-stats::before, .cs-stats::after, .cs-journey::after { content: ""; position: absolute; top: calc(34 * var(--u)); width: 1px; height: calc(100 * var(--u)); background: #d3e2f4; }
  .cs-journey::after { left: auto; right: calc(-18 * var(--u)); top: 0; height: calc(96 * var(--u)); }
  .cs-stats::before { left: calc(1148 * var(--u)); opacity: var(--st3, 1); } .cs-stats::after { left: calc(1411 * var(--u)); opacity: var(--st4, 1); }
}

/* Tablet / phone, short screens, reduced motion: the same parts stacked, fading in as they arrive */
@media (max-width: 1023px) {
  .ceo-story { padding: 56px var(--pad) 40px; overflow: hidden; }
  .ceo-canvas { position: relative; display: flex; flex-direction: column; }
  .cs-bg { position: absolute; inset: -56px calc(var(--pad) * -1) auto; height: 760px; pointer-events: none; }
  .cs-dots.a { left: 0; top: 0; width: 60%; height: 220px; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 10% 20%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 60% at 10% 20%, #000 10%, transparent 70%); }
  .cs-dots.b, .cs-orbits { display: none; }
  .cs-globe { position: absolute; left: 50%; top: 470px; width: min(560px, 110vw); aspect-ratio: 1; transform: translateX(-50%); }
  .cs-glow { position: absolute; inset: -10%; border-radius: 50%; background: radial-gradient(circle, #bfdaff 0%, transparent 70%); }
  .cs-left { position: relative; order: 1; }
  .cs-left .eyebrow { letter-spacing: .22em; }
  .cs-left h2 { margin: 12px 0 0; font-size: clamp(34px, 8vw, 54px); font-weight: 800; letter-spacing: -.05em; line-height: 1.04; }
  .cs-left h2 span { display: block; color: var(--blue); }
  .cs-left blockquote { margin: 26px 0 0; padding-left: 18px; border-left: 4px solid var(--blue); font: 500 clamp(19px, 4.6vw, 24px)/1.3 var(--font-head); color: #0d2250; }
  .cs-a4 { margin-top: 18px; font-size: 16px; line-height: 1.6; }
  .cs-growth { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; font-size: 15px; }
  .cs-growth mark { padding: 4px 10px; border-radius: 8px; background: #d9e9ff; color: #0b5fe0; font-weight: 700; }
  .cs-garrow { width: 40px; color: var(--blue); } .cs-garrow svg { width: 100%; stroke-width: 2; }
  .cs-portrait { position: relative; order: 2; margin: 26px auto 0; width: min(420px, 82vw); height: min(560px, 110vw); overflow: hidden; }
  .cs-portrait img { display: block; width: 100%; height: auto; }
  .cs-card { position: relative; order: 3; margin-top: -40px; padding: 26px 22px; border-radius: 22px; background: #ffffffeb; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 24px 50px #1f5fae24; }
  .cs-card h3 { font-size: 30px; font-weight: 800; letter-spacing: -.045em; }
  .cs-role { position: relative; margin-top: 6px; padding-bottom: 18px; font-size: 13px; letter-spacing: .24em; font-weight: 700; text-transform: uppercase; color: #1f6fe0; }
  .cs-role::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: var(--blue); }
  .cs-card p:not(.cs-role) { margin-top: 14px; font-size: 15.5px; line-height: 1.6; }
  .cs-strip { position: relative; order: 4; margin-top: 18px; padding: 24px 22px; border-radius: 22px; background: #ffffffeb; box-shadow: 0 20px 44px #1f5fae1f; }
  .cs-journey .eyebrow { font-size: 13px; letter-spacing: .22em; }
  .cs-journey p:not(.eyebrow) { margin-top: 8px; font-size: 15px; }
  .cs-line { display: none; }
  .cs-stats { position: relative; margin: 18px 0 0; padding: 0 0 0 22px; list-style: none; display: grid; gap: 16px; border-left: 2px solid #cfe2f8; }
  .cs-stats > li { display: flex; align-items: center; gap: 14px; }
  .st-arrow { display: none !important; }
  .st-ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #e3effe; color: var(--blue); flex: none; }
  .st-ico svg { width: 26px; height: 26px; stroke-width: 1.7; }
  .st strong { font: 800 28px/1 var(--font-head); color: #0a1f4d; margin-right: 8px; }
  .st > span:last-child { display: flex; flex-wrap: wrap; align-items: baseline; }
  .st b { font-weight: 600; font-size: 15px; } .st b br { display: none; }
  .st small { flex-basis: 100%; margin-top: 2px; font-size: 13px; color: #6a7b92; }
}
/* stacked reveal (IntersectionObserver adds .in) */
@media (prefers-reduced-motion: no-preference) {
  .ceo-story:not(.is-story) .cs-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
  .ceo-story:not(.is-story) .cs-rv.in { opacity: 1; transform: none; }
}
@media (min-width: 1024px) {
  .cs-sphere .cs-map { opacity: .5; }
  .cs-a4 { width: calc(470 * var(--u)); }
  .cs-left blockquote { width: calc(440 * var(--u)); }
  .cs-portrait { -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%); mask-image: linear-gradient(180deg, #000 82%, transparent 100%); }
  .cs-card { padding-top: calc(34 * var(--u)); }
  .cs-card p:not(.cs-role) { margin-top: calc(18 * var(--u)); font-size: max(11px, calc(15.6 * var(--u))); line-height: 1.4; }
  .cs-card p:not(.cs-role) + p { margin-top: calc(12 * var(--u)); }
  .cs-orbits .pt { stroke: none; fill: #ffffff; }
  .cs-orbits .glow { fill: #7db8ff; opacity: .45; }
}
@media (min-width: 1024px) {
  .cs-left { top: calc(140 * var(--u)); }
  .cs-left blockquote { width: calc(480 * var(--u)); margin-top: calc(32 * var(--u)); font-size: calc(25 * var(--u)); }
  .cs-a4 { margin-top: calc(24 * var(--u)); }
  .cs-growth { margin-top: calc(18 * var(--u)); }
}
/* v25b: portrait centred on the globe, glass bio card, no dead space above the story */
@media (min-width: 1024px) {
  .cs-portrait { left: calc(620 * var(--u)); } /* centre 870 = the globe's centre */
  /* the canvas sits at the top of the pinned screen, so it follows Services with no empty band */
  .is-story .ceo-pin { place-items: start center; padding-top: clamp(8px, 2vh, 24px); }
  .cs-card { top: auto; bottom: calc(234 * var(--u)); height: auto; min-height: calc(550 * var(--u));
    background: linear-gradient(160deg, #ffffff80 0%, #ffffff40 100%); border: 1px solid #ffffffb3;
    -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 calc(30 * var(--u)) calc(60 * var(--u)) #1f5fae1f, inset 0 1px 0 #ffffffe6, inset 0 0 0 1px #ffffff4d; }
  .cs-card p:not(.cs-role) { font-size: max(10.5px, calc(15.6 * var(--u))); color: #465a75; }
}
/* v25c: on tall windows the pinned canvas grows taller (up to 1.55×) instead of leaving an empty band;
   vertical positions use --v, sizes keep --u, so nothing overlaps and nothing is resized */
@media (min-width: 1024px) {
  .ceo-canvas { --v: var(--u); }
  .is-story .ceo-canvas { --ch: min(calc(100vh - var(--header-h) - clamp(8px, 2vh, 24px) - 12px), calc(887 * var(--u) * 1.55)); --v: calc(var(--ch) / 887); height: var(--ch); }
  .is-story .cs-left { top: calc(140 * var(--v)); }
  .is-story .cs-globe { top: calc(330 * var(--v) - 330 * var(--u)); }
  .is-story .cs-portrait { top: calc(670 * var(--v) - 588 * var(--u)); height: calc(588 * var(--u)); }
  .is-story .cs-card { bottom: calc(234 * var(--v)); }
  .is-story .cs-strip { top: calc(670 * var(--v)); }
  .is-story .cs-dots.b { top: calc(560 * var(--v)); }
  .cs-growth { white-space: nowrap; }
}
/* orbit points as real circles, so a stretched canvas never turns them into ovals */
.cs-pt { position: absolute; width: calc(var(--r) * 2 * var(--u, 1px)); height: calc(var(--r) * 2 * var(--u, 1px)); translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(var(--r) * 1.6 * var(--u, 1px)) #7db8ff73; }
@media (max-width: 1023px) { .cs-pt { display: none; } }
@media (min-width: 1024px) {
  .is-story .ceo-canvas { --ch: min(calc(100vh - var(--header-h) - clamp(8px, 2vh, 24px) - 12px), calc(887 * var(--u) * 1.75)); }
  .is-story .ceo-pin { place-items: center; padding-top: 0; }
}
/* v25d: globe and portrait sit a little higher */
@media (min-width: 1024px) {
  .cs-globe { top: calc(-40 * var(--u)); }
  .is-story .cs-globe { top: calc(330 * var(--v) - 370 * var(--u)); }
  .cs-portrait { top: calc(42 * var(--u)); height: calc(628 * var(--u)); }
  .is-story .cs-portrait { top: calc(670 * var(--v) - 628 * var(--u)); height: calc(628 * var(--u)); }
  .cs-portrait img { margin-top: calc(-40 * var(--u)); }
}
@media (min-width: 1024px) {
  .cs-portrait img { margin-top: 0; }
  .cs-portrait { display: flex; flex-direction: column; justify-content: flex-end; }
  .cs-portrait picture { display: block; margin-bottom: calc(-40 * var(--u)); }
}
@media (min-width: 1024px) {
  .cs-portrait { display: block; }
  .cs-portrait picture { margin-bottom: 0; }
}
/* v25e: the globe never rises past the top of the section (wide screens clipped it) */
@media (min-width: 1024px) {
  .cs-globe { top: max(calc(-40 * var(--u)), 0px); }
  .is-story .cs-globe { top: max(calc(330 * var(--v) - 370 * var(--u)), 8px); }
  .is-story .ceo-pin { overflow: visible; }
  .ceo-story { overflow-x: clip; }
}
/* the growth line's draw uses pathLength, which non-scaling strokes break on wide screens */
.cs-line path { vector-effect: none; stroke-width: 1.5; }
/* growth-strip intro: fits in two lines on narrower desktops */
@media (min-width: 1024px) {
  .cs-journey p:not(.eyebrow) { margin: calc(14 * var(--u)) calc(-12 * var(--u)) 0 0; font-size: max(10.5px, calc(16 * var(--u))); line-height: 1.4; }
}
/* hero headline: the copy column stops growing at ~1500px wide, so the type must stop too (it wrapped to 6 lines) */
h1 { font-size: clamp(34px, 4.1vw, 66px); }
.is-pinned h1 { font-size: clamp(34px, min(4.4vw, 8vh), 66px); }
@media (max-width: 860px) { h1 { font-size: clamp(30px, 9vw, 52px); } }
@media (max-width: 420px) { h1 { font-size: clamp(26px, 8.6vw, 36px); } }
@media (max-width: 600px) { .careers-hero h2 { font-size: clamp(28px, 8.4vw, 38px); } .careers-hero h2 span { display: inline; } }
@media (min-width: 641px) and (max-width: 1100px) { .lnet-nodes .lnode:last-child:nth-child(3n + 2) { grid-column: 2; } }
@media (min-width: 1024px) { .sv-ts .sv-frame, .sv-b2b .sv-frame { height: calc(546 * var(--u)); } }
/* hero cards nudged further off the photo so no faces are covered; photo shifts slightly left to make room */
@media (min-width: 861px) {
  .hero-visual { margin-right: 9%; margin-left: 0; }
  .hero-card.c1 { left: -13%; top: -5%; }
  .hero-card.c2 { right: -17%; top: 52%; }
}

/* ═════════ v26: Contact — from the mockup ═════════ */
.ct { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 130px) 0; background: radial-gradient(ellipse 50% 60% at 78% 30%, #e7f1ff 0%, transparent 75%), linear-gradient(180deg, #ffffff 0%, #f6faff 100%); }
.ct-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ct-globe { position: absolute; right: -14%; top: -30%; width: min(900px, 70vw); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 55%, #ffffff00 38%, #dcebff80 62%, #cfe2fb 69%, #ffffff00 71%), radial-gradient(circle at 45% 50%, #eaf3ffcc 0%, #eef5ff00 60%); opacity: .9; }
.ct-globe::after { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid #cfe1f8; box-shadow: inset 0 0 0 60px #ffffff00; }
.ct-orbits { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ct-orbits path { fill: none; stroke: #b9d4f5; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ct-orbits path.dash { stroke: #8cb9f0; stroke-dasharray: 2 7; stroke-width: 2; stroke-linecap: round; }
.ct-orbits circle { fill: #7ab3f5; stroke: #d6e8ff; stroke-width: 6; paint-order: stroke; }
.ct-dots { position: absolute; background-image: radial-gradient(circle, #8db6ea 1.4px, transparent 2px); background-size: 16px 16px; opacity: .6; }
.ct-dots.a { left: 0; bottom: 0; width: 180px; height: 200px; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 15% 80%, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse 60% 60% at 15% 80%, #000 20%, transparent 72%); }
.ct-dots.b { left: 38%; bottom: 14%; width: 110px; height: 160px; opacity: .4; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 60% 50%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 50% 50% at 60% 50%, #000 15%, transparent 72%); }
.ct-dots.c { right: 0; top: 10%; width: 150px; height: 180px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 85% 45%, #000 20%, transparent 72%); mask-image: radial-gradient(ellipse 60% 55% at 85% 45%, #000 20%, transparent 72%); }
.ct .container { position: relative; z-index: 1; }
.ct-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }

/* left */
.ct-left .eyebrow { display: flex; align-items: center; gap: 18px; font-size: 14px; letter-spacing: .3em; font-weight: 800; color: #1f6fe0; }
.ct-left .eyebrow::after { content: ""; width: 56px; height: 1.5px; background: #9cc3f2; }
.ct-left h2 { margin: 26px 0 22px; font-size: clamp(56px, 7.4vw, 108px); font-weight: 800; letter-spacing: -.06em; line-height: .95; color: #0a1a3f; }
.ct-left h2 span { color: transparent; background: linear-gradient(135deg, #1a78ff 0%, #0a55d6 100%); -webkit-background-clip: text; background-clip: text; }
.ct-lead { max-width: 470px; font-size: clamp(18px, 1.75vw, 25px); line-height: 1.4; color: #4f6280; }
.ct-steps { position: relative; margin: clamp(34px, 4vw, 52px) 0 0; padding: 0; list-style: none; display: grid; gap: clamp(28px, 3.4vw, 44px); }
.ct-steps li { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: 0 clamp(18px, 2.6vw, 38px); align-items: start; }
.ct-steps li:not(:last-child)::after { content: ""; position: absolute; left: 36px; top: 84px; bottom: calc(-1 * clamp(28px, 3.4vw, 44px) + 12px); border-left: 1.5px dashed #a9c9ef; }
.ct-num { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffffff, #f1f7ff); box-shadow: 0 12px 28px #1f5fae1f, 0 0 0 1px #e6effa; font: 700 26px var(--font-head); color: #1766e8; }
.ct-steps strong { display: block; margin-top: 8px; font: 700 clamp(19px, 1.9vw, 27px)/1.25 var(--font-head); letter-spacing: -.02em; color: #0a1a3f; }
.ct-steps small { display: block; margin-top: 8px; font-size: clamp(15px, 1.4vw, 20px); line-height: 1.5; color: #56687f; }

/* right: frosted container */
.ct-panel { padding: clamp(22px, 2.6vw, 36px); border-radius: 36px; border: 1px solid #ffffffd9; background: linear-gradient(160deg, #ffffffc7, #f4f9ffb3); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 40px 90px #1f5fae1f, 0 0 0 1px #e3edf9, inset 0 1px 0 #fff; }
.ct-card { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(16px, 2vw, 28px); padding: clamp(24px, 3vw, 40px) clamp(22px, 2.6vw, 38px); border-radius: 24px; text-decoration: none; color: #0a1a3f;
  background: #ffffff; box-shadow: 0 16px 36px #1f5fae14, 0 0 0 1px #edf2f9; transition: transform .25s ease, box-shadow .25s ease; }
.ct-card + .ct-card { margin-top: 22px; }
.ct-card:hover { transform: translateY(-3px); box-shadow: 0 22px 46px #1f5fae24, 0 0 0 1px #d6e5f8; }
.ct-card:focus-visible { outline: 3px solid #72b5fc; outline-offset: 4px; }
.ct-ico { display: grid; place-items: center; width: clamp(64px, 6.4vw, 94px); height: clamp(64px, 6.4vw, 94px); border-radius: 22px; background: #eaf2fd; color: var(--blue); }
.ct-ico svg { width: 50%; height: 50%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-text strong { display: block; font: 700 clamp(19px, 2vw, 29px)/1.2 var(--font-head); letter-spacing: -.03em; }
.ct-text small { display: block; margin-top: 10px; font-size: clamp(14.5px, 1.45vw, 20px); line-height: 1.45; color: #56687f; }
.ct-go { display: grid; place-items: center; width: clamp(48px, 4.6vw, 66px); height: clamp(48px, 4.6vw, 66px); border-radius: 50%; background: #eef4fc; color: var(--blue); transition: transform .25s ease, background-color .25s ease; }
.ct-go svg { width: 44%; height: 44%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ct-card:hover .ct-go { transform: translateX(3px); }

/* primary card */
.ct-card.primary { color: #fff; overflow: hidden; background: radial-gradient(ellipse 60% 90% at 90% 110%, #3d8cff66, transparent 70%), linear-gradient(120deg, #1b7cff 0%, #0b63ea 55%, #0a54d4 100%);
  box-shadow: 0 22px 44px #0b5fe64d, 0 0 0 1px #3f8dff, inset 0 1px 0 #ffffff40, 0 0 0 5px #bcd8ff66; }
.ct-card.primary::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -60%; height: 90%; border-radius: 50%; border-top: 1px solid #ffffff2b; background: radial-gradient(ellipse at 50% 0%, #ffffff14, transparent 60%); pointer-events: none; }
.ct-card.primary > * { position: relative; }
.ct-card.primary:hover { box-shadow: 0 28px 56px #0b5fe666, 0 0 0 1px #5ea0ff, inset 0 1px 0 #ffffff40, 0 0 0 6px #bcd8ff80; }
.ct-card.primary .ct-ico { background: linear-gradient(160deg, #2f97ff, #0a6cf2); box-shadow: 0 10px 24px #06348a55, inset 0 1px 0 #ffffff4d; }
.ct-card.primary .ct-ico svg { stroke: none; }
.ct-card.primary .ct-ico .bubble { fill: #fff; }
.ct-card.primary .ct-ico .bolt { fill: #0b6cf2; }
.ct-card.primary small { color: #dcebff; }
.ct-card.primary .ct-go { background: #ffffff1f; color: #fff; box-shadow: inset 0 0 0 1.5px #ffffff59; }

/* socials */
.ct-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 16px); margin: 28px 0 0; padding: 28px 0 0; border-top: 1px solid #dde8f5; list-style: none; }
.ct-social a { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: clamp(52px, 5vw, 72px); padding: 0 16px; border-radius: 999px; border: 1px solid #d6e4f6; background: #ffffffd9;
  font-size: clamp(14.5px, 1.4vw, 19px); font-weight: 600; color: #1766e8; text-decoration: none; box-shadow: 0 6px 16px #1f5fae0f; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.ct-social a:hover { transform: translateY(-2px); border-color: #a9c9ef; box-shadow: 0 12px 24px #1f5fae1f; }
.ct-social svg { flex: none; width: clamp(24px, 2.4vw, 32px); height: clamp(24px, 2.4vw, 32px); }
.ct-social .fb circle { fill: #1877f2; } .ct-social .fb path { fill: #fff; }
.ct-social .ig rect, .ct-social .ig circle:not(.dot) { fill: none; stroke: url(#ct-ig); stroke-width: 2.2; } .ct-social .ig .dot { fill: #d62976; }
.ct-social .tt .c { fill: #25f4ee; } .ct-social .tt .r { fill: #fe2c55; } .ct-social .tt .k { fill: #111; }

@media (max-width: 1000px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ct-globe { width: 110vw; right: -40%; top: -10%; }
}
@media (max-width: 600px) {
  .ct-left h2 { font-size: clamp(52px, 16vw, 72px); }
  .ct-steps li { grid-template-columns: 56px 1fr; }
  .ct-num { width: 56px; height: 56px; font-size: 21px; }
  .ct-steps li:not(:last-child)::after { left: 28px; top: 66px; }
  .ct-steps strong { margin-top: 4px; }
  .ct-panel { padding: 14px; border-radius: 26px; }
  .ct-card { grid-template-columns: auto 1fr; padding: 20px 18px; border-radius: 20px; }
  .ct-go { grid-column: 2; justify-self: end; width: 42px; height: 42px; margin-top: -6px; }
  .ct-ico { width: 54px; height: 54px; border-radius: 16px; align-self: start; }
  .ct-social { grid-template-columns: 1fr; padding-top: 18px; margin-top: 18px; }
  .ct-social a { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .ct-card, .ct-social a, .ct-go { transition: none; } .ct-card:hover, .ct-social a:hover { transform: none; } }
@media (min-width: 1001px) {
  .ct .container { max-width: 1400px; }
  .ct-grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: clamp(32px, 4.4vw, 72px); }
  .ct-left h2 { white-space: nowrap; font-size: clamp(56px, 6.6vw, 104px); }
  .ct-text strong { font-size: clamp(19px, 1.9vw, 28px); }
  .ct-text small { font-size: clamp(14.5px, 1.3vw, 19px); }
  .ct-steps strong { font-size: clamp(19px, 1.75vw, 26px); }
  .ct-steps small { font-size: clamp(15px, 1.3vw, 19px); }
}
.globefield { display: none !important; } /* travelling globe retired */
/* growth strip: the drawn line sits in its own clear band below the stats, not against the text */
@media (min-width: 1024px) {
  .cs-strip { height: calc(196 * var(--u)); }
  .cs-line { top: calc(24 * var(--u)); height: calc(170 * var(--u)); inset: auto 0 auto 0; }
  .cs-stats > li { top: calc(30 * var(--u)); }
  .st-arrow { top: calc(68 * var(--u)) !important; }
}
.st-ico svg.solid { fill: currentColor; stroke: none; width: 52%; height: 52%; }

/* ═════════ v27: Footer — from the mockup ═════════ */
.ft { position: relative; overflow: hidden; padding: clamp(64px, 7vw, 120px) 0 clamp(26px, 3vw, 44px); color: #fff;
  background: radial-gradient(ellipse 45% 70% at 88% 30%, #1b5fd455 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 0% 100%, #0c3b9c66 0%, transparent 70%), linear-gradient(180deg, #06298a 0%, #052478 55%, #041c63 100%); }
.ft-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ft-glow { position: absolute; border-radius: 50%; filter: blur(40px); }
.ft-glow.a { right: 6%; top: 10%; width: 420px; height: 420px; background: #2f7bff33; }
.ft-glow.b { left: 20%; bottom: -30%; width: 600px; height: 300px; background: #1d5ee833; }
.ft-globe { position: absolute; right: -9%; top: 2%; width: clamp(380px, 34vw, 640px); aspect-ratio: 1; opacity: .8; }
.ft-globe svg { width: 100%; height: 100%; max-width: none; overflow: visible; }
.ft-globe .grid ellipse { fill: none; stroke: #5d9dff; stroke-width: 1; opacity: .35; }
.ft-globe .rim { fill: none; stroke: #6fb0ff; stroke-width: 1.5; opacity: .5; filter: drop-shadow(0 0 10px #4d9bff); }
.ft-wave { position: absolute; left: -2%; bottom: 8%; width: 55%; height: 45%;
  background-image: radial-gradient(circle, #4d8fff 1.1px, transparent 1.6px); background-size: 9px 9px; opacity: .55;
  -webkit-mask-image: radial-gradient(ellipse 60% 40% at 35% 70%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse 60% 40% at 35% 70%, #000 10%, transparent 70%); transform: skewY(-9deg); }
.ft-orbits { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.ft-orbits path { fill: none; stroke: #4d8fff; stroke-width: 1; opacity: .45; vector-effect: non-scaling-stroke; }
.ft-orbits .nd { fill: #9cd0ff; filter: drop-shadow(0 0 6px #4da3ff); }
@media (prefers-reduced-motion: no-preference) { .ft-globe svg { animation: ft-spin 90s linear infinite; } }
@keyframes ft-spin { to { transform: rotate(360deg); } }

.ft .container { position: relative; z-index: 1; max-width: 1760px; }
.ft-grid { display: grid; grid-template-columns: 1.35fr 1fr 1.3fr 1.1fr; gap: 34px 0; align-items: start; }
.ft-col, .ft-brand { position: relative; }
.ft-col { padding-left: clamp(24px, 3.4vw, 64px); }
.ft-col::before { content: ""; position: absolute; left: 0; top: -40px; bottom: -80px; width: 1px; background: linear-gradient(180deg, transparent, #ffffff26 20%, #ffffff26 80%, transparent); }
.ft-col::after { content: ""; position: absolute; left: -2px; top: 42%; width: 5px; height: 5px; border-radius: 50%; background: #8cc8ff; box-shadow: 0 0 10px 2px #4da3ff; }
.ft-cta { padding-left: clamp(24px, 3.4vw, 60px); }

/* brand */
.ft .brand { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); color: #fff; font-size: clamp(30px, 2.7vw, 50px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.ft .logo-badge { width: clamp(84px, 7vw, 132px); height: clamp(84px, 7vw, 132px); border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px #ffffff1a, 0 16px 40px #00000040; display: grid; place-items: center; overflow: hidden; }
.ft .brand .logo-badge img { width: 72%; height: 72%; object-fit: contain; mix-blend-mode: normal; }
.ft .brand > span > span { display: block; margin-top: 6px; color: #8fc0ff; font-size: .62em; font-weight: 500; letter-spacing: -.01em; }
.ft-brand p { margin-top: clamp(24px, 2.4vw, 38px); max-width: 470px; font-size: clamp(16px, 1.3vw, 23px); line-height: 1.7; color: #e5efff; }

/* columns */
.ft h2 { position: relative; margin: 0 0 clamp(34px, 3vw, 50px); padding-bottom: 16px; font: 700 clamp(20px, 1.6vw, 29px)/1.2 var(--font-head); letter-spacing: -.02em; color: #fff; }
.ft h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 4px; border-radius: 3px; background: linear-gradient(90deg, #2a86ff, #0a63ea); box-shadow: 0 0 10px #2a86ff99; }
.ft-col > a { display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 360px; padding: 9px 0; color: #cfe0fb; font-size: clamp(15px, 1.2vw, 21px); text-decoration: none; transition: color .22s ease, transform .22s ease; }
.ft-col > a + a { margin-top: clamp(8px, 1vw, 18px); }
.ft-chev { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; transition: transform .22s ease; }
.ft-col > a:hover { color: #fff; }
.ft-col > a:hover .ft-chev { transform: translateX(4px); }
.ft :focus-visible { outline: 3px solid #9fd0ff; outline-offset: 3px; border-radius: 6px; }

/* CTA + social */
.ft-cta h2 { margin-bottom: 24px; }
.ft-talk { display: flex; align-items: center; gap: 18px; max-width: 320px; min-height: clamp(56px, 4.4vw, 80px); padding: 0 clamp(20px, 1.8vw, 32px); border-radius: 16px; color: #fff; text-decoration: none; font: 700 clamp(17px, 1.3vw, 23px) var(--font-head);
  background: linear-gradient(135deg, #3b93ff 0%, #1673ff 45%, #0a5ff0 100%); box-shadow: 0 0 0 1px #6fb0ff, 0 0 28px #2a86ff80, inset 0 1px 0 #ffffff59; transition: transform .25s ease, box-shadow .25s ease; }
.ft-talk span { flex: 1; }
.ft-talk svg { flex: none; width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ft-talk .arr { width: 24px; height: 24px; stroke-width: 2; transition: transform .25s ease; }
.ft-talk:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px #8cc4ff, 0 0 40px #2a86ffa6, inset 0 1px 0 #ffffff59; }
.ft-talk:hover .arr { transform: translateX(3px); }
.ft-social { display: grid; gap: 14px; margin: 26px 0 0; padding: 0; list-style: none; }
.ft-social a { display: inline-flex; align-items: center; gap: 22px; color: #dbe8ff; font-size: clamp(15px, 1.2vw, 21px); text-decoration: none; transition: color .22s ease; }
.ft-si { display: grid; place-items: center; width: clamp(44px, 3.2vw, 56px); height: clamp(44px, 3.2vw, 56px); border-radius: 50%; background: #0e3a99; border: 1px solid #ffffff26; box-shadow: inset 0 1px 0 #ffffff1a; transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.ft-si svg { width: 46%; height: 46%; fill: none; stroke: #fff; stroke-width: 1.8; }
.ft-si svg .f { fill: #fff; stroke: none; }
.ft-social a:hover { color: #fff; }
.ft-social a:hover .ft-si { background: #1a5fd8; box-shadow: 0 0 18px #2a86ff80; transform: translateY(-1px); }

/* bottom bar */
.ft-bottom { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 80px); }
.ft-rule { display: block; height: 1px; background: linear-gradient(90deg, #ffffff40, #ffffff26 60%, transparent); position: relative; }
.ft-rule::before { content: ""; position: absolute; left: 70px; top: -1px; width: 50px; height: 3px; border-radius: 2px; background: #2a86ff; box-shadow: 0 0 10px #2a86ff; }
.ft .copyright { margin-top: clamp(22px, 2.4vw, 40px); padding: 0; border: 0; font-size: clamp(14px, 1.1vw, 19px); color: #cfdcf3; }

@media (max-width: 1100px) {
  .ft-grid { grid-template-columns: 1fr 1fr; gap: 48px 0; }
  .ft-brand { grid-column: 1 / -1; }
  .ft-col:nth-of-type(1) { padding-left: 0; }
  .ft-col:nth-of-type(1)::before, .ft-col:nth-of-type(1)::after { display: none; }
  .ft-cta { grid-column: 1 / -1; padding-left: 0; }
  .ft-cta::before, .ft-cta::after { display: none; }
  .ft-col::before { top: 0; bottom: 0; }
}
@media (max-width: 600px) {
  .ft-grid { grid-template-columns: 1fr; gap: 40px; }
  .ft-col, .ft-cta { padding-left: 0; }
  .ft-col::before, .ft-col::after { display: none; }
  .ft-globe { right: -45%; top: auto; bottom: 18%; width: 90vw; opacity: .45; }
  .ft-wave { width: 100%; }
  .ft-col > a { max-width: none; }
  .ft-talk { max-width: none; }
  .ft h2 { margin-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .ft-col > a, .ft-talk, .ft-si, .ft-chev { transition: none; } .ft-talk:hover, .ft-social a:hover .ft-si { transform: none; } }
.ft .ft-col > a:not(.ft-talk) { padding: 9px 0; font-size: clamp(15px, 1.2vw, 21px); font-weight: 500; color: #cfe0fb; }
.ft .ft-col > a:not(.ft-talk):hover { color: #fff; }
.ft .ft-talk { padding: 0 clamp(20px, 1.8vw, 32px); }
.ft nav { gap: 0; }
@media (max-width: 1100px) { .ft-orbits .nd { display: none; } }
@media (min-width: 1101px) { .ft-col:not(.ft-cta) { padding-right: clamp(20px, 2.4vw, 48px); } }
/* v27b: footer in the site's navy (matches the Join Us panel) and a more compact height */
.ft { padding: clamp(44px, 4.4vw, 72px) 0 clamp(18px, 2vw, 28px);
  background: radial-gradient(ellipse 40% 70% at 90% 20%, #1a56c433 0%, transparent 70%), radial-gradient(ellipse 45% 60% at 0% 100%, #0e3a8640 0%, transparent 70%), linear-gradient(120deg, #0a2a63 0%, #071f49 60%, #061a3d 100%); }
.ft-glow.a { background: #2f7bff1f; } .ft-glow.b { background: #1d5ee81a; }
.ft-globe { width: clamp(300px, 26vw, 500px); top: -8%; opacity: .55; }
.ft-wave { opacity: .35; }
.ft-orbits path { opacity: .28; }
.ft-si { background: #ffffff0f; border-color: #ffffff24; }
.ft-social a:hover .ft-si { background: #1a56c4; }
.ft .logo-badge { width: clamp(72px, 5.4vw, 100px); height: clamp(72px, 5.4vw, 100px); }
.ft .brand { font-size: clamp(26px, 2.2vw, 40px); }
.ft-brand p { margin-top: clamp(16px, 1.6vw, 24px); font-size: clamp(15px, 1.15vw, 19px); line-height: 1.6; color: #c6d9f2; }
.ft h2 { margin-bottom: clamp(18px, 1.6vw, 26px); padding-bottom: 12px; font-size: clamp(18px, 1.35vw, 24px); }
.ft h2::after { height: 3px; width: 40px; }
.ft .ft-col > a:not(.ft-talk) { padding: 5px 0; font-size: clamp(14.5px, 1.05vw, 18px); color: #c6d9f2; }
.ft-col > a + a { margin-top: clamp(4px, .5vw, 8px); }
.ft-col::before { top: -16px; bottom: -24px; }
.ft-cta h2 { margin-bottom: 18px; }
.ft-talk { min-height: clamp(50px, 3.6vw, 62px); font-size: clamp(16px, 1.15vw, 19px); }
.ft-social { gap: 10px; margin-top: 18px; }
.ft-social a { gap: 16px; font-size: clamp(14.5px, 1.05vw, 18px); color: #c6d9f2; }
.ft-si { width: clamp(38px, 2.6vw, 46px); height: clamp(38px, 2.6vw, 46px); }
.ft-bottom { margin-top: clamp(28px, 3vw, 44px); }
.ft .copyright { margin-top: clamp(14px, 1.4vw, 22px); font-size: clamp(13px, .95vw, 16px); color: #9db7da; }
@media (max-width: 1100px) { .ft-grid { gap: 32px 0; } }
@media (max-width: 600px) { .ft-grid { gap: 28px; } .ft-globe { opacity: .3; } }
/* stacked leadership: the last row's cards open upward, so the section edge never cuts them off */
@media (max-width: 1100px) {
  .lnet-nodes .lnode:nth-last-child(-n+2):not(.center) .lnode-pop { top: auto; bottom: 100%; margin: 0 0 12px; }
}
.lnode-pop { padding-bottom: 1.5cqw; } @media (max-width: 1100px) { .lnode-pop, .lnode[data-side="left"] .lnode-pop { padding-right: 18px; padding-bottom: 18px; } }
/* the full-canvas slide layers must not swallow clicks meant for the service cards beneath them */
.sv-panel, .sv-slide, .sv-visual { pointer-events: none; }
.sv-slide.active .sv-card, .sv-slide.active .sv-fc, .sv-slide.active .sv-frame, .sv-slide.active .sv-backing { pointer-events: auto; }
.sv-backing { pointer-events: none !important; }
.sv-tab { cursor: pointer; }
.sv-tab:not([aria-selected="true"]):hover { transform: translateX(4px); box-shadow: 0 12px 28px #1f5fae1a; }
.sv-tab { transition: margin .35s ease, height .35s ease, background-color .35s ease, box-shadow .35s ease, border-color .35s ease, transform .25s ease; }
/* small screens: Streamlined Solutions sits above the photo's top-right corner, clear of every face */
@media (max-width: 860px) { .hero-card.c2 { top: -9%; right: -4%; } .hero-card.c1 { top: -9%; } }

/* ═════════ v28: one connected scroll experience (motion reference applied to WGS) ═════════ */

/* ── Reusable WGS globe: the G artwork, with only its globe turning (wireframe spun by main.js) ── */
.wgs-globe { position: relative; aspect-ratio: 521 / 560; pointer-events: none; }
.wgs-globe .wg-mark { position: relative; z-index: 2; display: block; width: 100%; height: auto; }
.wgs-globe picture { display: block; position: relative; z-index: 2; }
/* the globe sits in the G's hollow: centre (54%, 43%), diameter 65% of the artwork's width */
.wg-sphere { position: absolute; z-index: 1; left: 54%; top: 43%; width: 60%; height: auto; aspect-ratio: 1; translate: -50% -50%; max-width: none; overflow: visible; }
.wg-sphere .wg-fill { fill: #eaf3ff; }
.wg-sphere ellipse, .wg-sphere path, .wg-sphere .wg-rim { fill: none; stroke: #7d8894; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wg-sphere .wg-lat ellipse, .wg-sphere .wg-lat path { opacity: .65; }
.wg-glow { position: absolute; z-index: 0; left: 54%; top: 43%; width: 120%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, #9cc8ff66 0%, #9cc8ff1f 45%, transparent 70%); }

/* ── Hero: a soft pointer-following spotlight ── */
.hb-spot { position: absolute; left: 62%; top: 42%; width: 70vw; aspect-ratio: 1; margin: -35vw 0 0 -35vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ffffffbf 0%, #e6f1ff66 28%, transparent 62%);
  translate: calc(var(--mx, 0) * 16vw) calc(var(--my, 0) * 12vh); transition: translate 1.4s cubic-bezier(.2, .7, .2, 1); }
.hero-scene { transform-origin: 50% 32%; }

/* ── Services: scroll-driven 3D orbit (pinned desktop). main.js positions each slide around the front one. ── */
@media (min-width: 1024px) {
  .is-pinned .sv-panel { perspective: calc(1600 * var(--u)); perspective-origin: calc(1000 * var(--u)) calc(470 * var(--u)); transform-style: preserve-3d; }
  .is-pinned .sv-slide { visibility: hidden; transform-origin: calc(1000 * var(--u)) calc(470 * var(--u)); will-change: transform, opacity; }
  .is-pinned .sv-slide .sv-frame img { transition: filter .2s linear; }
  .sv-tabs { z-index: 4; }
}


/* ── Our Team story: a short horizontal entrance as its background arrives ── */
@media (min-width: 1024px) {
  .is-story .ceo-canvas { translate: calc((1 - var(--bg, 1)) * 7vw) 0; }
}

/* ── Our People scene: copy + glass photo collage, then a fly-through of the photos ── */
.team .lnet-band { margin-bottom: 0; } /* the scene follows the Leadership band, so it keeps its own bottom edge */
/* phones, tablets, short windows and reduced motion: the copy, then one row of photos to swipe through */
.people-fly { position: relative; margin-top: clamp(36px, 6vw, 64px); margin-bottom: calc(-1 * clamp(64px, 9vw, 120px)); padding-bottom: clamp(56px, 8vw, 84px); /* it runs to the section's end, under the Careers sheet */
  background: linear-gradient(180deg, transparent 0, #e6f0ff 120px); }
.pf-bg, .pf-hint { display: none; }
.pf-copy { padding: 0 var(--pad); max-width: 720px; }
.pf-copy .eyebrow { display: flex; align-items: center; gap: 14px; letter-spacing: .2em; }
.pf-copy .eyebrow::before { content: ""; width: 28px; height: 1.5px; background: currentColor; }
.pf-copy h3 { margin: 16px 0 0; font: 700 clamp(32px, 7.4vw, 48px)/1.08 var(--font-head); letter-spacing: -.04em; color: #071a45; }
.pf-copy h3 span { display: block; }
.pf-copy h3 em { font-style: normal; color: var(--blue); }
.pf-lead { margin-top: 16px; font-size: 16px; line-height: 1.55; color: #4a5c77; }
.pf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; margin-top: 24px; }
.pf-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pf-actions .btn { min-height: 50px; padding: 0 28px; gap: 14px; border-radius: 10px; font-size: 15px; box-shadow: 0 12px 28px #0b63ea40; }
.pf-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; color: var(--blue); text-decoration: none; }
.pf-link:hover { text-decoration: underline; }
.pf-stats { display: flex; margin: 30px 0 0; padding: 0; list-style: none; }
.pf-stats li { flex: 0 1 auto; padding: 0 clamp(12px, 4vw, 22px); border-left: 1px solid #c4d7f0; }
.pf-stats li:first-child { padding-left: 0; border-left: 0; }
.pf-stats strong { display: block; font: 700 clamp(24px, 5vw, 30px)/1.1 var(--font-head); letter-spacing: -.03em; color: var(--blue); }
.pf-stats b { display: block; margin-top: 5px; font-size: 14.5px; font-weight: 600; line-height: 1.25; color: #0b1c3d; }
.pf-stats small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.3; color: #5c6d84; }
/* every photo, three rows deep, swiped sideways; the six captioned photos lead */
.pf-scene { display: grid; grid-template-rows: repeat(3, clamp(120px, 30vw, 190px)); grid-auto-flow: column; grid-auto-columns: clamp(160px, 40vw, 254px); gap: 10px; overflow-x: auto; margin-top: 30px; padding: 6px var(--pad) 18px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.pf-tile { position: relative; margin: 0; min-width: 0; }
.pf-tile.pf-feat { grid-row: span 3; grid-column: span 2; }
.pf-tile.is-off { display: none; }
.pf-tile.pf-bokeh { display: none; }
.pf-tilt, .pf-photo { display: block; width: 100%; height: 100%; }
.pf-tilt { position: relative; }
.pf-photo { border-radius: 16px; overflow: hidden; background: #dbe9f7; box-shadow: 0 12px 28px #1f5fae24, 0 0 0 4px #ffffffd9; }
.pf-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-cap { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 12px; background: #ffffffe6; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 24px #1f5fae2e; }
.pf-cap-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: #eaf2fe; color: var(--blue); }
.pf-cap-ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-cap-text strong { display: block; font: 700 13.5px/1.2 var(--font-head); letter-spacing: -.01em; color: #0b1c3d; }
.pf-cap-text small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.3; color: #56677f; }
.pf-cap br { display: none; }

@media (min-width: 1024px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  .people-fly { height: 570vh; margin-top: 0; padding-bottom: 0; background: #e3eefe; }
  .pf-pin { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow: hidden; perspective: 1500px;
    background: radial-gradient(ellipse 70% 80% at 62% 42%, #f7fbff 0%, #e8f2ff 42%, transparent 78%), radial-gradient(ellipse 60% 60% at 0% 100%, #b9d3f7 0%, transparent 70%), radial-gradient(ellipse 50% 60% at 100% 100%, #bfd8fa 0%, transparent 70%), linear-gradient(180deg, #edf5ff 0%, #dceafd 60%, #c9defa 100%); }

  /* background: light, an earth glowing at the bottom, nodes and fine lines */
  .pf-bg { display: block; position: absolute; inset: 0; pointer-events: none; }
  .pf-bg > * { position: absolute; }
  .pf-glow { left: 62%; top: 40%; width: 86vw; aspect-ratio: 1.3; translate: -50% -50%; border-radius: 50%; background: radial-gradient(ellipse, #ffffff 0%, #ffffffb3 28%, transparent 66%); }
  .pf-haze { left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, transparent, #cfe3fdb3 70%, #c3dbfb); }
  .pf-earth { left: 59.5%; bottom: 0; width: 74%; height: 21%; min-height: 150px; translate: -50% 0; overflow: visible; opacity: calc(1 - var(--pf-t, 0) * .35); filter: drop-shadow(0 -10px 40px #9cc8ffcc); }
  .pf-earth-aura { fill: none; stroke: #6ea8f2; stroke-width: 70; opacity: .45; }
  .pf-earth-halo { fill: none; stroke: #ffffff; stroke-width: 26; opacity: 1; }
  .pf-earth-rim { fill: none; stroke: #ffffff; stroke-width: 3; opacity: 1; }
  .pf-earth-map { opacity: 1; }
  .pf-lines { inset: 0; width: 100%; height: 100%; max-width: none; opacity: calc(1 - var(--pf-t, 0) * .6); }
  .pf-lines path { fill: none; stroke: #ffffff; stroke-width: 1.3; opacity: .9; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #8fc0ff); }
  .pf-lines path.dot { stroke: #6fa9f3; stroke-dasharray: 1 7; stroke-linecap: round; stroke-width: 2; opacity: .8; filter: none; }
  .pf-node { width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: radial-gradient(circle, #fff 0 22%, #2f86ff 26%); box-shadow: 0 0 0 5px #ffffffb3, 0 0 0 6px #9cc8ff, 0 0 22px 6px #7fb6ff; opacity: calc(1 - var(--pf-t, 0) * .5); }
  .pf-node.big { width: 12px; height: 12px; margin: -6px; }
  @keyframes pf-pulse { 50% { box-shadow: 0 0 0 7px #ffffff8c, 0 0 0 8px #9cc8ff80, 0 0 30px 10px #7fb6ffb3; } }
  .pf-node { animation: pf-pulse 4.5s ease-in-out infinite; } .pf-node:nth-child(odd) { animation-delay: -2.2s; }

  /* copy */
  .pf-copy { position: absolute; z-index: 3; left: 4.8%; top: 10.5%; width: min(31vw, 560px); max-width: none; padding: 0; transform: translateZ(2px);
    translate: calc(var(--pf-t, 0) * -6vw) 0; opacity: calc(1 - var(--pf-t, 0)); }
  .pf-copy::before { content: ""; position: absolute; inset: -12% -14% -12% -30%; z-index: -1; background: radial-gradient(ellipse at 44% 50%, #f3f8ffeb 42%, #f3f8ff8c 62%, transparent 78%); pointer-events: none; }
  .pf-copy .eyebrow { font-size: clamp(11px, .82vw, 13.5px); letter-spacing: .22em; }
  .pf-copy h3 { margin-top: clamp(14px, 2.4vh, 26px); font-size: clamp(32px, 3.2vw, 60px); line-height: 1.1; white-space: nowrap; }
  .pf-lead { margin-top: clamp(12px, 2vh, 22px); font-size: clamp(14.5px, 1.24vw, 20px); line-height: 1.5; }
  .pf-actions { margin-top: clamp(18px, 3.2vh, 34px); gap: 12px clamp(20px, 2.2vw, 36px); }
  .pf-actions .btn { min-height: clamp(44px, 3.4vw, 56px); padding: 0 clamp(20px, 2.1vw, 34px); font-size: clamp(14px, 1.05vw, 17px); border-radius: clamp(8px, .7vw, 12px); }
  .pf-link { font-size: clamp(14px, 1.05vw, 17px); }
  .pf-stats { margin-top: clamp(22px, 4.6vh, 48px); }
  .pf-stats li { padding: 0 clamp(14px, 1.6vw, 28px); }
  .pf-stats strong { font-size: clamp(24px, 2.05vw, 36px); }
  .pf-stats b { max-width: 12ch; font-size: clamp(12.5px, .95vw, 16px); }
  .pf-stats small { max-width: 17ch; font-size: clamp(11px, .78vw, 13px); }

  /* photos: each sits at its own depth; each card is turned on the curve of the wall */
  .pf-scene { display: block; position: absolute; inset: 0; z-index: 2; gap: 0; overflow: visible; margin: 0; padding: 0; transform-style: preserve-3d; }
  .pf-tile, .pf-tile.pf-feat { position: absolute; left: 50%; top: 50%; width: var(--w); height: auto; aspect-ratio: var(--ar); opacity: 0;
    transform: translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)); transition: filter .5s ease; }
  .pf-tile.pf-bokeh { display: block; filter: blur(calc(var(--w) * .045)) saturate(.8); }
  /* the turn uses its own short perspective, so the near edge of a card is clearly taller than the far edge */
  .pf-tilt { transform: perspective(calc(var(--w) * 2.3)) rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); transform-style: preserve-3d; }
  .pf-photo { border-radius: calc(var(--w) * .055); box-shadow: 0 0 0 calc(var(--w) * .012) #ffffff8f, 0 calc(var(--w) * .07) calc(var(--w) * .16) #1f5fae2e; }
  .pf-feat .pf-photo { border-radius: calc(var(--w) * .075); box-shadow: 0 0 0 calc(var(--w) * .022) #ffffffb8, 0 0 0 calc(var(--w) * .026) #cfe4ffcc, 0 calc(var(--w) * .1) calc(var(--w) * .2) #1f5fae3d, 0 0 calc(var(--w) * .22) #b9dbffd9; }
  .pf-feat .pf-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(200deg, #ffffff59 0%, transparent 32%, transparent 70%, #cfe6ff4d 100%); pointer-events: none; }
  .pf-photo { position: relative; }
  .pf-tile.far { filter: blur(3px) saturate(.85); }
  .pf-tile.vfar { filter: saturate(.8); } /* the furthest are tiny: faint is enough, and cheaper than a blur */
  .pf-tile.far .pf-photo, .pf-tile.vfar .pf-photo, .pf-bokeh .pf-photo { box-shadow: none; }

  /* captions lift off the card towards the viewer */
  .pf-cap { --cw: calc(var(--w) * .62); left: auto; right: auto; bottom: auto; width: max-content; max-width: none; gap: calc(var(--cw) * .07); padding: calc(var(--cw) * .07) calc(var(--cw) * .09) calc(var(--cw) * .07) calc(var(--cw) * .07); border-radius: calc(var(--cw) * .085);
    border: 1px solid #ffffff; background: linear-gradient(160deg, #fffffff2, #f1f7ffe0); box-shadow: 0 calc(var(--cw) * .08) calc(var(--cw) * .2) #1f5fae38, inset 0 1px 0 #fff; transform: translateZ(calc(var(--w) * .12)); }
  .pf-cap br { display: inline; }
  .pf-cap-a { --cw: calc(var(--w) * .42); left: 4%; bottom: -7%; }
  .pf-cap-b { --cw: calc(var(--w) * .6); left: 12%; bottom: -16%; }
  .pf-cap-e { --cw: calc(var(--w) * .64); left: 8%; bottom: -4%; }
  .pf-cap-f { --cw: calc(var(--w) * .6); left: 22%; bottom: -9%; }
  .pf-cap-ico { width: calc(var(--cw) * .27); height: calc(var(--cw) * .27); border-radius: calc(var(--cw) * .07); background: #e6f0ff; }
  .pf-cap-ico svg { width: 56%; height: 56%; stroke-width: 1.9; }
  .pf-cap-text strong { font-size: calc(var(--cw) * .088); line-height: 1.18; }
  .pf-cap-text small { margin-top: calc(var(--cw) * .03); font-size: calc(var(--cw) * .066); line-height: 1.3; }

  .pf-hint { display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1vh, 12px); position: absolute; z-index: 3; left: 50.4%; bottom: clamp(10px, 2.4vh, 28px); translate: -50% 0; transform: translateZ(2px); margin: 0;
    font-size: clamp(9.5px, .72vw, 12px); font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #0d2a5a; text-shadow: 0 0 10px #fff, 0 0 4px #fff; opacity: calc(1 - var(--pf-t, 0) * 3); }
  .pf-hint svg { width: 16px; height: 16px; margin-top: -4px; fill: none; stroke: #2f76e0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .pf-mouse { position: relative; width: 17px; height: 27px; border: 1.5px solid #2f76e0; border-radius: 10px; background: #ffffff80; }
  .pf-mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; border-radius: 2px; background: #2f76e0; animation: pf-wheel 1.8s ease-in-out infinite; }
  @keyframes pf-wheel { 50% { transform: translateY(6px); opacity: .3; } }
}

/* ── Final CTA: Join Us panel with the turning WGS globe ── */
.careers-close { isolation: isolate; }
.careers-close .wgs-globe.cta { width: clamp(96px, 11vw, 150px); margin: 0 auto clamp(14px, 1.6vw, 22px); }
.careers-close .wgs-globe.cta .wg-sphere .wg-fill { fill: #f4f8ff; }
.careers-close .wgs-globe.cta::before { content: ""; position: absolute; left: 54%; top: 45%; width: 118%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 10px #ffffff14, 0 0 60px #5ea6ff66; z-index: 0; }
.cc-ring { position: absolute; left: 50%; top: 44%; z-index: -1; width: min(900px, 120%); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 38%, #9fd0ff14 38.2%, transparent 38.6%, transparent 52%, #9fd0ff10 52.2%, transparent 52.6%),
    radial-gradient(circle, #1a56c455 0%, transparent 55%);
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%); mask-image: radial-gradient(circle, #000 55%, transparent 72%); }
/* scroll reveal (--cr: 0 → 1, set by main.js while in view) */
@media (prefers-reduced-motion: no-preference) {
  .js .careers-close { transform: scale(calc(.94 + var(--cr, 1) * .06)); border-radius: calc(46px - var(--cr, 1) * 20px); }
  .js .careers-close .wgs-globe.cta { opacity: var(--cr-g, 1); transform: scale(calc(.7 + var(--cr-g, 1) * .3)); }
  .js .careers-close > .eyebrow { opacity: var(--cr-1, 1); transform: translateY(calc((1 - var(--cr-1, 1)) * 18px)); }
  .js .careers-close > h3 { opacity: var(--cr-2, 1); transform: translateY(calc((1 - var(--cr-2, 1)) * 24px)); }
  .js .careers-close > .careers-close-actions { opacity: var(--cr-3, 1); transform: translateY(calc((1 - var(--cr-3, 1)) * 24px)); }
}
@media (max-width: 600px) { .cc-ring { width: 170%; } }
.is-pinned .stage-wrap { height: 450vh; } /* + the services stepping back as their particles leave for Our Team */
.hero-scene > .hero-grid, .hero-scene > .hero-foot { transform: scale(var(--recede, 1)); }
.hero-scene > .hero-grid { transform-origin: 50% 60%; }
.hero-scene > .hero-foot { transform-origin: 50% 0%; }
.hero-scene > .hero-grid, .hero-scene > .hero-foot { transform: scale(var(--recede, 1)); }
.hero-scene > .hero-grid { transform-origin: 50% 60%; }
.hero-scene > .hero-foot { transform-origin: 50% 0%; }
.hero-scene > .hero-foot { transform: none; }

/* ═════════ v29: hero globe → particles → services world map ═════════ */
.pglobe { position: absolute; left: 0; top: 0; z-index: 1; display: none; pointer-events: none; }
.has-pglobe .pglobe { display: block; }
.hero-visual .wgs-globe.hero { position: relative; z-index: 1; width: min(100%, 470px); margin: 0 auto; }
.hero-visual .hv-shape, .hero-visual .hv-orbits .orbit.b { display: none; }
/* pinned desktop: the canvas draws the globe's dots, so the G's own wireframe steps aside */
.has-pglobe .wgs-globe.hero .wg-sphere { visibility: hidden; }
.has-pglobe .wgs-globe.hero .wg-glow { background: radial-gradient(circle, #d9e9ffcc 0%, #d9e9ff55 45%, transparent 70%); }
.has-pglobe .sv-map { opacity: 0; } /* the settled particles are the services' world map now */
.is-pinned .hero-visual { width: min(80%, calc((100vh - var(--header-h) - 250px) * 0.9)); }
@media (max-width: 860px) { .hero-visual .wgs-globe.hero { width: min(78%, 360px); } }
.pglobe { z-index: 3; }
.has-pglobe .hb-map { display: none; }
.has-pglobe .sv-map { opacity: calc(var(--pg-settle, 0) * .6); }

/* ═════════ v30: hero "WGS" wordmark — the G is the globe logo ═════════ */
.wgs-word { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0; width: 100%; container-type: inline-size; }
.wgs-word .wgs-globe.hero { flex: none; width: 40cqw; margin: 0 -1cqw; }
.ww-l { flex: none; font: 800 38cqw/1 var(--font-head); letter-spacing: -.04em; color: transparent; translate: 0 -4cqw;
  background: linear-gradient(170deg, #12306e 0%, #0a1f4d 55%, #071a3f 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 1.4cqw 2.4cqw #1f5fae29); }
.ww-l:last-child { background-image: linear-gradient(170deg, #2a86ff 0%, #0b63ea 55%, #0a54d4 100%); }
.is-pinned .hero-visual { width: min(100%, calc((100vh - var(--header-h) - 250px) * 2.1)); }
.hero-visual { margin-left: 0; margin-right: 2%; }
@media (max-width: 860px) { .hero-visual .wgs-word .wgs-globe.hero { width: 40cqw; } }
/* cards frame the word instead of covering it: two above, one below */
.ww-l { font-size: 35cqw; }
.wgs-word .wgs-globe.hero { margin: 0 .5cqw; }
.hero-visual { padding: clamp(64px, 9vh, 96px) 0 clamp(70px, 10vh, 104px); }
.hero-visual .hero-card.c1 { left: 0; top: 0; right: auto; bottom: auto; }
.hero-visual .hero-card.c2 { right: 0; top: 0; left: auto; bottom: auto; --r: 3deg; }
.hero-visual .hero-card.c3 { left: 50%; bottom: 0; top: auto; right: auto; translate: -50% 0; --r: -1deg; }
@media (max-width: 860px) {
  .hero-visual { margin: 10px 0 20px; padding: 64px 0 72px; }
  .hero-visual .hero-card.c1 { left: 0; top: 0; }
  .hero-visual .hero-card.c2 { right: 0; top: 0; }
}

/* ═════════ v31: hero redesign from the WGS globe mockup ═════════ */
/* Layers (back → front): haze + dotted map + Earth horizon · halo globe + orbits · W / G-globe / S · cards.
   Mouse parallax (--mx/--my, desktop fine pointer only): map slowest, orbits more, wordmark least, cards most. */

/* ── background ── */
.hb-light { background: radial-gradient(ellipse 50% 60% at 72% 42%, #dcebff 0%, #e8f2ffaa 50%, transparent 78%), radial-gradient(ellipse 30% 35% at 95% 5%, #d4e6ff 0%, transparent 70%), linear-gradient(115deg, #ffffff 0%, #f6faff 38%, #eaf3ff 100%); }
.has-pglobe .hb-map, .hb-map { display: block; right: -4%; top: 3%; width: 62%; opacity: .32; }
.hb-haze { position: absolute; left: 44%; top: 18%; width: 52%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #ffffffd9 0%, #eef5ff80 40%, transparent 70%); filter: blur(10px); translate: calc(var(--mx, 0) * -6px) calc(var(--my, 0) * -5px); }
.hb-earth { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42%; max-width: none; translate: calc(var(--mx, 0) * -5px) 0; }
.hb-earth .he-grid ellipse, .hb-earth .he-grid path { fill: none; stroke: #bcdcff; stroke-width: 1; opacity: .3; vector-effect: non-scaling-stroke; }
.hb-earth .he-lights circle { fill: #eaf6ff; opacity: .55; }
.hb-earth .he-arcs path { fill: none; stroke: #ffffff; stroke-width: 1.2; opacity: .55; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #9fd0ff); }
.hb-earth .he-nodes circle { r: 3.5px; fill: #ffffff; filter: drop-shadow(0 0 6px #bfe2ff); }
.hb-dots.d2 { display: none; }
.hero-foot { background: none; }
.hero-foot .hero-wave { display: none; } /* the Earth horizon replaces the wave */

/* ── copy ── */
.hero-copy .eyebrow { font-size: clamp(11px, .85vw, 13.5px); letter-spacing: .28em; font-weight: 700; color: #1a66d6; }
.hero-copy .eyebrow::before { width: 52px; }
.hero-copy h1 { font-size: clamp(38px, 4.6vw, 76px); font-weight: 800; line-height: 1.02; letter-spacing: -.05em; color: #0a1a3f; margin: clamp(18px, 2.6vh, 30px) 0 clamp(18px, 2.6vh, 28px); }
.is-pinned .hero-copy h1 { font-size: clamp(38px, min(4.6vw, 8.4vh), 76px); }
.hero-copy h1 .hl { display: block; white-space: nowrap; color: inherit; }
.hero-copy h1 .hl-blue { color: transparent; background: linear-gradient(100deg, #0a63ea 0%, #1a78ff 60%, #2a86ff 100%); -webkit-background-clip: text; background-clip: text; }
.hero-copy > p:not(.eyebrow) { max-width: 500px; font-size: clamp(16px, 1.3vw, 20px); line-height: 1.6; font-weight: 500; color: #56687f; }
.is-pinned .hero-copy > p:not(.eyebrow) { font-size: clamp(16px, min(1.3vw, 2.2vh), 20px); }
.hero-actions .btn { min-height: 58px; padding: 0 30px; border-radius: 10px; font-size: 17px; font-weight: 700; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease; }
.hero-actions .btn.solid { box-shadow: 0 12px 28px #0b63ea40; }
.hero-actions .btn.solid:hover { transform: translateY(-2px); box-shadow: 0 16px 34px #0b63ea55; }
.hero-actions .btn.outline { background: #ffffffcc; border: 1.5px solid #1a6fe8; color: #0b63ea; }
.hero-actions .btn.outline:hover { transform: translateY(-2px); background: #eef5ff; }

/* ── the WGS composition ── */
.hero-visual { padding: clamp(80px, 11vh, 120px) 0 clamp(80px, 11vh, 118px); }
.wgs-word { translate: calc(var(--mx, 0) * 3px) calc(var(--my, 0) * 2px); transition: translate 1.1s cubic-bezier(.2, .7, .2, 1); }
.ww-l { font-size: 36cqw; font-weight: 800; letter-spacing: -.03em; translate: 0 -3cqw;
  background: linear-gradient(165deg, #2a4f99 0%, #0f2c6b 38%, #081d4d 70%, #0b2a66 100%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 .5cqw 0 #041436) drop-shadow(0 1.6cqw 2.2cqw #0b2a6640); }
.ww-l:last-child { background-image: linear-gradient(165deg, #6fb2ff 0%, #1f7cf5 35%, #0b5fe0 70%, #0a4fc4 100%); filter: drop-shadow(0 .5cqw 0 #083f9e) drop-shadow(0 1.6cqw 2.2cqw #0b5fe040); }
.wgs-word .wgs-globe.hero { position: relative; z-index: 2; }
/* shaded sphere under the globe dots */
.wg-ball { position: absolute; z-index: 0; left: 54%; top: 43%; width: 60%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffffff 0%, #eef6ff 35%, #cfe3ff 70%, #9cc6fa 100%); box-shadow: inset -1.2cqw -1.2cqw 2.6cqw #5a93e640, 0 0 3cqw #8cc4ff66; }
.wgs-globe.hero .wg-glow { width: 150%; background: radial-gradient(circle, #9cc8ff55 0%, #bfdcff33 40%, transparent 70%); }
/* orbits + soft halo globe, centred on the G */
.ww-orbits { position: absolute; z-index: 0; left: 50%; top: 45%; width: 150cqw; height: auto; aspect-ratio: 1; translate: -50% -50%; max-width: none; overflow: visible; pointer-events: none; }
.ww-orbits > * { transition: translate 1.1s cubic-bezier(.2, .7, .2, 1); }
.ww-halo, .ww-halo-grid { translate: calc(var(--mx, 0) * -2px) calc(var(--my, 0) * -2px); }
.ww-halo-grid ellipse { fill: none; stroke: #ffffff; stroke-width: 1; opacity: .7; vector-effect: non-scaling-stroke; }
.ww-rings { translate: calc(var(--mx, 0) * 7px) calc(var(--my, 0) * 5px); }
.ww-rings ellipse { fill: none; stroke: url(#ww-arc); stroke-width: 1.3; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px #8cc4ff); }
.ww-rings .r2 { opacity: .8; } .ww-rings .r3 { opacity: .55; }
.ww-nodes { translate: calc(var(--mx, 0) * 7px) calc(var(--my, 0) * 5px); }
.ww-nodes .n { fill: #1a78f2; stroke: #ffffff; stroke-width: .8; filter: drop-shadow(0 0 3px #5ea6ff); transform-box: fill-box; transform-origin: center; }

/* ── cards: white glass, thin connector and node pointing at the globe ── */
.hero-visual .hero-card { padding: 16px 22px 16px 16px; border-radius: 16px; background: #ffffffe6; border: 1px solid #ffffff; box-shadow: 0 18px 40px #1f4f9429, 0 0 0 1px #e1ecf9; }
.hero-visual .hero-card::before, .hero-visual .hero-card::after { content: ""; position: absolute; pointer-events: none; }
.hero-visual .hero-card::before { height: 1.5px; background: linear-gradient(90deg, #1a2f55, #1a2f5500); transform-origin: 0 50%; }
.hero-visual .hero-card::after { width: 11px; height: 11px; border-radius: 50%; background: #1a78f2; box-shadow: 0 0 0 4px #1a78f22e, 0 0 10px #5ea6ff; }
.hero-card.c1::before { left: 58%; top: 100%; width: 70px; transform: rotate(48deg); }
.hero-card.c1::after { left: calc(58% + 44px); top: calc(100% + 48px); }
.hero-card.c2::before { right: 100%; top: 70%; width: 46px; transform-origin: 100% 50%; transform: rotate(-32deg); background: linear-gradient(270deg, #1a2f55, #1a2f5500); }
.hero-card.c2::after { right: calc(100% + 36px); top: calc(70% + 18px); }
.hero-card.c3::before { left: -30px; top: 30%; width: 34px; transform-origin: 100% 50%; transform: rotate(38deg); background: linear-gradient(270deg, #1a2f55, #1a2f5500); }
.hero-card.c3::after { left: -38px; top: calc(30% - 22px); }
.hero-visual .hero-card.c1 { left: 2%; top: 2%; --r: -2deg; translate: calc(var(--mx, 0) * 11px) calc(var(--my, 0) * 8px); }
.hero-visual .hero-card.c2 { right: -2%; top: 24%; --r: -3deg; translate: calc(var(--mx, 0) * 12px) calc(var(--my, 0) * 9px); }
.hero-visual .hero-card.c3 { left: 50%; bottom: 0; --r: -2deg; translate: calc(-50% + var(--mx, 0) * 10px) calc(var(--my, 0) * 11px); }
.hc-icon { background: #e6f1ff; }

/* ── entrance on load ── */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy .eyebrow { animation: hx-rise .8s .1s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy h1 .hl { animation: hx-line .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy h1 .hl:nth-child(1) { animation-delay: .22s; } .hero-copy h1 .hl:nth-child(2) { animation-delay: .34s; } .hero-copy h1 .hl:nth-child(3) { animation-delay: .46s; }
  .hero-copy > p:not(.eyebrow) { animation: hx-fade .9s .65s ease both; }
  .hero-actions { animation: hx-rise .8s .78s cubic-bezier(.2, .7, .2, 1) both; }
  .wgs-word { animation: hx-zoom 1.2s .3s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-visual .hero-card { animation: hx-card .9s cubic-bezier(.2, .7, .2, 1) both, hc-float 7s ease-in-out infinite; }
  .hero-visual .hero-card.c1 { animation-delay: .9s, 0s; } .hero-visual .hero-card.c2 { animation-delay: 1.05s, -3s; } .hero-visual .hero-card.c3 { animation-delay: 1.2s, -5s; }
  .ww-nodes .n { animation: hx-node 8s ease-in-out infinite; }
  .ww-nodes .b, .ww-nodes .e { animation-delay: -3s; } .ww-nodes .c, .ww-nodes .f { animation-delay: -5.5s; }
}
@keyframes hx-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes hx-line { from { opacity: 0; transform: translateY(26px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -20% 0); } }
@keyframes hx-fade { from { opacity: 0; } }
@keyframes hx-zoom { from { opacity: 0; scale: .94; } }
@keyframes hx-card { from { opacity: 0; scale: .94; } }
@keyframes hx-node { 50% { transform: translate(1.6px, -2px); } }

/* ── pinned desktop sizing: the composition keeps the hero within one screen ── */
.is-pinned .hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.is-pinned .hero-visual { justify-self: end; width: min(100%, calc((100vh - var(--header-h) - 300px) * 2)); }

/* ── tablet / phone ── */
@media (max-width: 1100px) {
  .hero-visual .hero-card { padding: 11px 15px 11px 11px; }
  .hero-card.c1::before, .hero-card.c1::after, .hero-card.c2::before, .hero-card.c2::after, .hero-card.c3::before, .hero-card.c3::after { display: none; }
}
@media (max-width: 860px) {
  .hero-copy h1 .hl { white-space: normal; }
  .hero-visual { width: 100%; padding: 70px 0 84px; }
  .hero-visual .hero-card.c1 { left: 0; top: 0; }
  .hero-visual .hero-card.c2 { right: 0; top: 0; }
  .hero-visual .hero-card.c3 { bottom: 0; }
  .ww-rings .r3, .ww-nodes .d, .ww-nodes .f { display: none; }
  .hb-earth { height: 26%; opacity: .7; }
  .hb-map { width: 110%; right: -20%; top: auto; bottom: 30%; opacity: .22; }
  .hero-actions .btn { min-height: 52px; font-size: 16px; }
}
@media (max-width: 600px) {
  .hero-copy h1 { font-size: clamp(32px, 9.4vw, 44px); }
  .hero-visual .hero-card { padding: 8px 12px 8px 8px; }
}
/* headline sized to its own column so no line is ever clipped */
.hero-copy { container-type: inline-size; }
.hero-copy h1, .is-pinned .hero-copy h1 { font-size: clamp(34px, min(10.4cqw, 8.4vh), 76px); }
/* Streamlined Solutions sits above the S, not on it */
.hero-visual .hero-card.c2 { top: 6%; right: -1%; }
.hero-card.c2::before { top: 100%; right: 38%; width: 52px; transform-origin: 100% 50%; transform: rotate(-58deg); }
.hero-card.c2::after { top: calc(100% + 38px); right: calc(38% + 24px); }
@media (max-width: 600px) { .hero-copy h1 { font-size: clamp(32px, 9.4vw, 44px); } }
.hb-earth { height: 34%; opacity: .78; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%); mask-image: linear-gradient(90deg, transparent 0%, #000 45%); }
@media (max-width: 860px) { .hb-earth { height: 22%; opacity: .55; } }
.is-pinned .hero-bg { opacity: var(--hero-o, 1); }

/* ═════════ v31b: closer to the mockup ═════════ */
/* Earth: a curved horizon in the bottom-right corner, never cropped flat, fading into the page */
.hb-earth { left: auto; right: 0; bottom: 0; width: min(78%, 1250px); height: auto; aspect-ratio: 1200 / 420; opacity: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%), linear-gradient(0deg, #000 70%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.hb-earth .he-lights circle { opacity: .8; }
.hb-earth .he-arcs path { stroke-width: 1.6; opacity: .8; }
@media (max-width: 860px) { .hb-earth { width: 130%; right: -15%; opacity: .6; } }

/* W and S: solid extruded letters with a glossy top */
.ww-l { filter: none; background: linear-gradient(172deg, #4a70bd 0%, #1d3f86 22%, #0c2560 48%, #081c4a 72%, #133a86 100%); -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 .25cqw 0 #0a2257, 0 .5cqw 0 #081c4a, 0 .75cqw 0 #06163c, 0 1cqw 0 #051232, 0 2.2cqw 2.6cqw #0b2a6655; }
.ww-l:last-child { filter: none; background: linear-gradient(172deg, #9fd0ff 0%, #3a92ff 20%, #0f6cf0 48%, #0a56d8 72%, #2a86ff 100%); -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 .25cqw 0 #0a55cc, 0 .5cqw 0 #0949b4, 0 .75cqw 0 #073d9c, 0 1cqw 0 #063386, 0 2.2cqw 2.6cqw #0b5fe055; }

/* the globe in the G: glossy sphere with a grid and a bright highlight */
.wg-ball { background: radial-gradient(circle at 34% 28%, #ffffff 0%, #f2f8ff 18%, #cfe3ff 48%, #7fb3f5 82%, #4f8fe6 100%);
  box-shadow: inset -1.6cqw -1.8cqw 3cqw #2a64c466, inset .6cqw .6cqw 1.4cqw #ffffffcc, 0 0 3.4cqw #7fb8ff80; overflow: hidden; }
.wg-ball::before { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(ellipse 50% 100% at 50% 50%, transparent 0 17%, #ffffff66 17.4% 18%, transparent 18.4% 34%),
              repeating-linear-gradient(0deg, transparent 0 15.5%, #ffffff55 15.5% 16.2%); opacity: .7; }
.wg-ball::after { content: ""; position: absolute; left: 16%; top: 10%; width: 42%; height: 26%; border-radius: 50%; background: radial-gradient(ellipse, #ffffffe6, transparent 70%); transform: rotate(-24deg); }
.has-pglobe .wgs-globe.hero .wg-glow { background: radial-gradient(circle, #9cc8ff66 0%, #bfdcff33 40%, transparent 70%); }

/* orbits: bright white paths wrapping the whole word, with nodes on them */
.ww-orbits { width: 158cqw; }
.ww-rings ellipse { stroke: #ffffff; stroke-width: 1.8; opacity: 1; filter: drop-shadow(0 0 2.5px #7fb8ff) drop-shadow(0 0 1px #ffffff); }
.ww-rings .r2 { opacity: .85; } .ww-rings .r3 { opacity: .7; }
.ww-nodes .n { fill: #1a78f2; stroke: #ffffff; stroke-width: 1.2; filter: drop-shadow(0 0 4px #5ea6ff); }
.ww-halo { opacity: .9; }

/* ═════════ v31c: match the mockup's centrepiece ═════════ */
/* G: bold glossy ring — hide the stand's foot, deepen the ring */
.wgs-word .wgs-globe.hero { margin: 0 -3.4cqw; -webkit-clip-path: inset(0 0 9% 0); clip-path: inset(0 0 9% 0); }
.wgs-word .wgs-globe.hero .wg-mark { filter: saturate(1.25) brightness(1.06) drop-shadow(.4cqw .5cqw 0 #0a3f9e) drop-shadow(0 1.6cqw 2cqw #0b4fc455); }
/* globe: rich blue sphere with a bright highlight; the dots carry the continents */
.wg-ball { background: radial-gradient(circle at 34% 28%, #ffffff 0%, #e4f0ff 14%, #9cc6ff 40%, #3f86ec 72%, #1452c0 100%);
  box-shadow: inset -1.8cqw -2cqw 3.2cqw #0a3a9a88, inset .6cqw .6cqw 1.4cqw #ffffffaa, 0 0 3.6cqw #5ea6ff99; }
.wg-ball::before { opacity: .35; }
/* letters: tighter, with side depth down-right like the mockup */
.ww-l { text-shadow: .22cqw .22cqw 0 #0a2257, .44cqw .44cqw 0 #081c4a, .66cqw .66cqw 0 #06163c, .88cqw .88cqw 0 #051232, 1.1cqw 1.1cqw 0 #040f2a, 1.4cqw 2.6cqw 3cqw #0b2a6650;
  background-image: linear-gradient(172deg, #5f86d4 0%, #2a4f9c 16%, #0e2a68 40%, #081c4a 70%, #12357c 100%); }
.ww-l:last-child { text-shadow: .22cqw .22cqw 0 #0a55cc, .44cqw .44cqw 0 #0949b4, .66cqw .66cqw 0 #073d9c, .88cqw .88cqw 0 #063386, 1.1cqw 1.1cqw 0 #052a70, 1.4cqw 2.6cqw 3cqw #0b5fe050;
  background-image: linear-gradient(172deg, #b7dcff 0%, #4a9bff 16%, #1470f2 42%, #0a56d8 72%, #2a86ff 100%); }
/* big glass sphere behind the word */
.ww-halo { opacity: 1; }
.ww-orbits .ww-halo { stroke: #ffffff; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.ww-halo-grid ellipse { opacity: .55; }
/* front orbit crossing the letters, and glossy beads */
.ww-front { position: absolute; z-index: 3; left: 50%; top: 45%; width: 158cqw; height: auto; aspect-ratio: 1; translate: calc(-50% + var(--mx, 0) * 7px) calc(-50% + var(--my, 0) * 5px); max-width: none; overflow: visible; pointer-events: none; transition: translate 1.1s cubic-bezier(.2, .7, .2, 1); }
.ww-front .ww-fr { fill: none; stroke: #ffffff; stroke-width: 1.8; opacity: .9; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #7fb8ff); }
.ww-front .ww-bead, .ww-nodes .n { stroke: #ffffffcc; stroke-width: .6; filter: drop-shadow(0 0 4px #3b8cffaa); }
.wgs-word .wgs-globe.hero { -webkit-clip-path: none; clip-path: none; }
/* the hero mark is shown whole, stand and base included: nothing is clipped */
.ww-l.ww-s { text-shadow: .22cqw .22cqw 0 #0a55cc, .44cqw .44cqw 0 #0949b4, .66cqw .66cqw 0 #073d9c, .88cqw .88cqw 0 #063386, 1.1cqw 1.1cqw 0 #052a70, 1.4cqw 2.6cqw 3cqw #0b5fe050;
  background-image: linear-gradient(172deg, #b7dcff 0%, #4a9bff 16%, #1470f2 42%, #0a56d8 72%, #2a86ff 100%); }
.wgs-globe.hero .wg-sphere .wg-fill { fill: transparent; }
.wgs-globe.hero .wg-sphere ellipse, .wgs-globe.hero .wg-sphere path, .wgs-globe.hero .wg-sphere .wg-rim { stroke: #ffffff; opacity: .8; }

/* ═════════ v31d: finer map, lower-left swooshes, night Earth ═════════ */
.hb-map { opacity: .5; fill: #5f93dc; }
.hb-earth { left: 0; right: 0; bottom: 0; width: 100%; height: auto; aspect-ratio: 1600 / 520; max-height: 62%; opacity: 1; -webkit-mask-image: none; mask-image: none; }
.hb-earth .he-grid ellipse, .hb-earth .he-grid path { fill: none; stroke: #6ea8f2; stroke-width: 1; opacity: .22; vector-effect: non-scaling-stroke; }
.hb-earth .he-lights circle { fill: #d6ecff; opacity: .9; }
.hb-earth .he-lights circle.w { fill: #fff3d6; }
.hb-earth .he-arcs path { fill: none; stroke: #ffffff; stroke-width: 1.4; opacity: .85; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #8cc4ff) drop-shadow(0 0 1px #fff); }
.hb-earth .he-flares path { stroke: #ffffff; stroke-width: 1; opacity: .7; vector-effect: non-scaling-stroke; }
.hb-earth .he-flares .c { fill: #ffffff; }
.hb-earth .he-nodes { display: none; }
.hb-swoosh { position: absolute; left: 0; bottom: 0; width: 55%; height: 44%; max-width: none; pointer-events: none; translate: calc(var(--mx, 0) * -4px) 0; }
.hb-swoosh .hs-line { fill: none; stroke-width: 2.2; filter: blur(.4px) drop-shadow(0 0 6px #ffffff); }
.hb-swoosh .hs-line.t { stroke-width: 1.2; opacity: .8; } .hb-swoosh .hs-line.t2 { stroke-width: 1; opacity: .6; }
.hb-swoosh .hs-band { filter: blur(6px); }
@media (prefers-reduced-motion: no-preference) {
  .hb-earth .he-flares .fl circle[r="26"] { animation: he-tw 4.5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .hb-earth .he-flares .fl:nth-child(2n) circle[r="26"] { animation-delay: -2s; }
}
@keyframes he-tw { 50% { opacity: .55; transform: scale(.8); } }
@media (max-width: 860px) { .hb-earth { width: 170%; left: -35%; max-height: 32%; opacity: .75; } .hb-swoosh { width: 100%; height: 26%; } }
.hb-earth { max-height: 46%; }
.hb-earth .he-land { opacity: .45; }
.hb-map { opacity: .65; fill: #4f86d6; }
/* keep the whole curved horizon (never cropped flat) and sink it lower instead */
.hb-earth { max-height: none; height: auto; aspect-ratio: 1600 / 520; bottom: -7.4vw; }
.hb-earth .he-lights circle.o { opacity: .45; fill: #9fc8ff; }
@media (max-width: 860px) { .hb-earth { bottom: -12vw; } }
.hb-swoosh { -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent 100%); mask-image: linear-gradient(90deg, #000 60%, transparent 100%); }

/* ═════════ v31e: supplied global-network image as the hero's lower background ═════════ */
.hb-earth { position: absolute; left: 0; right: 0; bottom: 0; top: auto; width: 100%; height: 54%; max-height: none; aspect-ratio: auto; opacity: 1; display: block;
  translate: calc(var(--mx, 0) * -5px) 0; transition: translate 1.1s cubic-bezier(.2, .7, .2, 1);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%); mask-image: linear-gradient(180deg, transparent 0%, #000 34%); }
.hb-earth img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; }
.hb-swoosh { display: none; }
@media (max-width: 1100px) { .hb-earth { height: 42%; } }
@media (max-width: 860px) {
  .hb-earth { width: 100%; left: 0; height: 30%; bottom: 0; opacity: 1; }
  .hb-earth img { object-position: 78% 100%; }
}

/* ═════════ v32: the whole hero's dots and lights take part in the particle transition ═════════ */
/* the DOM dots/lights hand over to the particle canvas as soon as scrolling starts (--pg-go 0 → 1) */
.has-pglobe .hb-map { --pg-map-o: .65; opacity: calc(.65 * (1 - var(--pg-go, 0))); }
.has-pglobe .hb-dots.d1 { opacity: calc(.55 * (1 - var(--pg-go, 0))); }
.has-pglobe .hb-dots.d3 { opacity: calc(.35 * (1 - var(--pg-go, 0))); }
.has-pglobe .ww-nodes, .has-pglobe .ww-front .ww-bead, .has-pglobe .hv-orbits .nodes { opacity: calc(1 - var(--pg-go, 0)); }
.has-pglobe .wg-ball::after { opacity: calc(1 - var(--pg-go, 0)); } /* the globe's highlight becomes sparks */

/* ═════════ Services: one shared scene ═════════
   The frame and its backing are shared by the three services. Inside the frame three media layers are
   stacked in the same box, one still image per service. Slides carry only their floating cards and copy. */
.sv-scene { pointer-events: none; }
.sv-frame { position: relative; }
.sv-layer { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.sv-layer.on { opacity: 1; }
.sv-layer picture, .sv-layer img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (min-width: 1024px) {
  .sv-scene { position: absolute; inset: 0; }
  .sv-scene > * { position: absolute; }
  .sv-scene .sv-frame { position: absolute; perspective: calc(1400 * var(--u)); }
  /* pinned: main.js scrubs the layers with scroll, and nothing swings round an orbit any more */
  .is-pinned .sv-layer { transition: none; will-change: opacity, transform; }
  .is-pinned .sv-panel { perspective: none; transform-style: flat; }
  .is-pinned .sv-slide { will-change: auto; }
}
@media (max-width: 1023px) {
  .sv-panel { position: relative; container-type: inline-size; }
  .sv-scene { position: relative; width: 100%; max-width: 720px; margin-inline: auto; padding: 22px 6px 0; }
  .sv-scene .sv-frame { aspect-ratio: 4 / 3; }
  .sv-layer img { aspect-ratio: auto; }
  /* the floating cards sit over the shared frame; the copy card follows it as before */
  .sv-slide .sv-visual { position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(100cqw, 720px); max-width: none; margin: 0; padding: 0; height: calc(22px + (min(100cqw, 720px) - 12px) * .75); }
  .sv-slide.active { animation: sv-in-fade .45s ease both; } /* opacity only: a transform would re-anchor the cards */
  @keyframes sv-in-fade { from { opacity: 0; } }
}
@media (prefers-reduced-motion: reduce) { .sv-layer { transition: none; } }

/* ═════════ Hero → Services particle stream ═════════
   One canvas, one particle system (main.js). It sits above both scenes' backgrounds; main.js masks the
   particles wherever people, text, buttons or cards are, so they pass behind them. Stacked layouts keep
   the canvas one screen tall and stuck to the viewport. */
.pg-layer { position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; user-select: none; }
.has-stream .pg-layer { display: block; }
.pg-layer canvas, .pg-layer canvas.pglobe { position: sticky; top: 0; left: auto; display: block; z-index: auto; }
/* as particles leave, the hero's orbit line stretches towards the next section and its dot clusters thin out */
@media (prefers-reduced-motion: no-preference) {
  .has-stream .hv-orbits .orbit { transform-box: view-box; transform-origin: 300px 0; transform: scaleY(calc(1 + var(--leave, 0) * .4)); }
  .has-stream:not(.has-pglobe) .hb-dots.d1 { opacity: calc(.55 * (1 - var(--leave, 0) * .4)); }
  .has-stream:not(.has-pglobe) .hb-dots.d3 { opacity: calc(.35 * (1 - var(--leave, 0) * .4)); }
}

/* ═════════ Services: open scene (from the services reference) ═════════
   The image has no frame: it fills the right of the scene and fades into the page. Left column: heading,
   two buttons, then the three services as rows. The selected service's detail sits in a glass bar below. */
.sv-tab-text em { display: block; font-style: normal; }
@media (min-width: 1024px) {
  /* ── image ── */
  .sv-backing { display: none; }
  .sv-scene .sv-frame { left: calc(524 * var(--u)); top: calc(50 * var(--u)); width: calc(924 * var(--u)); height: calc(690 * var(--u)); border: 0; border-radius: 0; background: none; box-shadow: none; transform: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 5%, #000 25%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 76%, transparent 100%), radial-gradient(circle at 49% 24%, #000 calc(var(--rv, 1) * 150% - 40%), transparent calc(var(--rv, 1) * 150%)); -webkit-mask-composite: source-in, source-in;
    mask-image: linear-gradient(90deg, transparent 5%, #000 25%, #000 93%, transparent 100%), linear-gradient(180deg, transparent 0, #000 9%, #000 76%, transparent 100%), radial-gradient(circle at 49% 24%, #000 calc(var(--rv, 1) * 150% - 40%), transparent calc(var(--rv, 1) * 150%)); mask-composite: intersect, intersect; }
  /* --rv (pinned, from main.js): the image opens from its earth outwards as the services arrive */

  /* ── left column ── */
  .sv-head .eyebrow { display: flex; align-items: center; gap: calc(14 * var(--u)); }
  .sv-head .eyebrow::before { content: ""; flex: none; width: calc(30 * var(--u)); height: 1.5px; background: #1f6fe0; }
  .sv-head .eyebrow span { margin-left: calc(-6 * var(--u)); }

  /* buttons: the selected service's own button, and the proposal link as its outlined partner */
  .cs .sv-cta { position: absolute; grid-area: auto; left: 0; top: calc(-448 * var(--u)); justify-content: center; width: calc(292 * var(--u)); height: calc(54 * var(--u)); margin: 0; padding: 0; gap: calc(12 * var(--u)); border-radius: calc(10 * var(--u)); font-size: max(12.5px, calc(16 * var(--u))); white-space: nowrap; }
  .cs .sv-cta svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
  .sv-proposal { left: calc(366 * var(--u)); top: calc(398 * var(--u)); height: calc(54 * var(--u)); padding: 0 calc(24 * var(--u)); gap: calc(12 * var(--u)); border: 1.5px solid #0b5fe0; border-radius: calc(10 * var(--u)); background: #ffffffb3; font-size: max(12.5px, calc(16 * var(--u))); transition: background-color .25s ease, box-shadow .25s ease; }
  .sv-proposal:hover { background: #fff; box-shadow: 0 calc(10 * var(--u)) calc(24 * var(--u)) #1f5fae24; }

  /* services as rows: number, icon, name + line, chevron */
  .sv-tabs { top: calc(486 * var(--u)); width: calc(480 * var(--u)); gap: calc(12 * var(--u)); }
  .sv-tab, .sv-tab[aria-selected="true"] { display: grid; grid-template-columns: calc(52 * var(--u)) calc(38 * var(--u)) minmax(0, 1fr) calc(26 * var(--u)); grid-template-rows: auto auto; align-content: center; align-items: center; column-gap: calc(16 * var(--u)); row-gap: calc(3 * var(--u));
    height: calc(88 * var(--u)); margin: 0; padding: 0 calc(18 * var(--u)) 0 calc(16 * var(--u)); border: 1px solid #dfe9f7; border-radius: calc(14 * var(--u)); background: #ffffffa6; box-shadow: none; }
  .sv-tab::before { display: none; }
  .sv-tab-text { display: contents; }
  .sv-tab-text small { grid-column: 1; grid-row: 1 / 3; display: grid; place-items: center; width: calc(52 * var(--u)); height: calc(52 * var(--u)); border-radius: calc(12 * var(--u)); background: #e8f0fd; font: 700 max(13px, calc(18 * var(--u)))/1 var(--font-head); color: #0b3a8f; }
  .sv-tab .sv-ico, .sv-tab[aria-selected="true"] .sv-ico { grid-column: 2; grid-row: 1 / 3; width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 0; background: none; box-shadow: none; color: var(--blue); }
  .sv-tab .sv-ico svg { width: 82%; height: 82%; }
  .sv-tab-text b { grid-column: 3; grid-row: 1; align-self: end; margin: 0; font-size: max(13.5px, calc(18.5 * var(--u))); color: #0b1c3d; }
  .sv-tab-text em { grid-column: 3; grid-row: 2; align-self: start; font-size: max(11px, calc(14 * var(--u))); line-height: 1.3; color: #5c6d84; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sv-tab .sv-go, .sv-tab[aria-selected="true"] .sv-go { grid-column: 4; grid-row: 1 / 3; width: calc(26 * var(--u)); height: calc(26 * var(--u)); background: none; box-shadow: none; color: #7c8da6; }
  .sv-tab .sv-go svg { width: 70%; height: 70%; }
  .sv-tab[aria-selected="true"] { border-color: #5b9cf5; background: #edf4ff; box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) #1f5fae1a; }
  .sv-tab[aria-selected="true"] .sv-go { color: var(--blue); }
  .sv-status { top: calc(786 * var(--u)); width: calc(480 * var(--u)); height: calc(44 * var(--u)); }
  .sv-hint { top: calc(1046 * var(--u)); }

  /* ── floating cards: flat glass, placed clear of every face ── */
  .sv-fc { align-items: center; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u)); background: #ffffffd9; box-shadow: 0 calc(16 * var(--u)) calc(40 * var(--u)) #1f5fae29, inset 0 1px 0 #fff; }
  .sv-fc-ico { width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: calc(12 * var(--u)); }
  .sv-fc-text strong { padding-right: 0; font-size: max(12px, calc(16.5 * var(--u))); }
  .sv-fc-text small { margin-top: calc(5 * var(--u)); font-size: max(10.5px, calc(13 * var(--u))); line-height: 1.35; }
  .sv-fc-dot { display: none; }
  .cs .f2 { left: calc(690 * var(--u)); top: calc(98 * var(--u)); width: calc(285 * var(--u)); rotate: none; }
  .cs .f1 { left: calc(612 * var(--u)); top: calc(476 * var(--u)); width: calc(290 * var(--u)); rotate: none; }
  .cs .f3 { left: calc(1150 * var(--u)); top: calc(392 * var(--u)); width: calc(288 * var(--u)); rotate: none; }

  /* ── the selected service's detail: a glass bar under the scene ── */
  .cs .sv-card { left: calc(58 * var(--u)); top: calc(846 * var(--u)); width: calc(1332 * var(--u)); min-height: 0; padding: calc(26 * var(--u)) calc(36 * var(--u)) calc(28 * var(--u)); grid-template-columns: calc(330 * var(--u)) minmax(0, 1fr) calc(450 * var(--u)); grid-template-rows: auto 1fr; column-gap: calc(40 * var(--u)); align-items: start;
    border: 1px solid #fff; border-radius: calc(22 * var(--u)); background: #ffffffc7; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 calc(22 * var(--u)) calc(54 * var(--u)) #1f5fae21; }
  .cs .sv-card .eyebrow { grid-column: 1; grid-row: 1; }
  .cs .sv-card h3 { grid-column: 1; grid-row: 2; margin: calc(12 * var(--u)) 0 0; font-size: max(18px, calc(30 * var(--u))); line-height: 1.12; white-space: normal; }
  .cs .sv-desc { grid-column: 2; grid-row: 1 / 3; font-size: max(12px, calc(15.5 * var(--u))); }
  .cs .sv-checks { grid-column: 3; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)) calc(20 * var(--u)); align-self: center; margin: 0; padding: 0 0 0 calc(34 * var(--u)); border-left: 1px solid #dce7f5; }
  .cs .sv-checks li { font-size: max(11px, calc(14 * var(--u))); line-height: 1.35; gap: calc(12 * var(--u)); }
  .cs .sv-checks li + li { margin-top: 0; }
  .cs .sv-check { margin-top: calc(-2 * var(--u)); }
}
@media (max-width: 1023px) {
  .sv-scene .sv-frame { border: 0; border-radius: 22px; box-shadow: none; transform: none;
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
  .sv-fc.f1, .sv-fc.f2 { rotate: none; }
  .sv-tab-text em { margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: #5c6d84; }
  .sv-tab[aria-selected="true"] { border-color: #5b9cf5; background: #edf4ff; }
}

/* ═════════ Services → Our Team particles ═════════
   A second particle set (main.js) leaves the services, travels down the page and lands on the earth
   behind the CEO's portrait as its dotted continents. One viewport-fixed canvas under the header; the
   script hides particles behind the portrait's silhouette, the text and the cards. */
.ts-canvas { position: fixed; left: 0; top: 0; z-index: 40; display: none; pointer-events: none; user-select: none; }
.has-ts .ts-canvas { display: block; }
/* the earth's dots are the colour and strength of the particles that land on them (#3d86ec in main.js),
   so the hand-over shows no change; they appear as the particles land (--ts-land, from main.js) */
.cs-sphere .cs-map { fill: #3d86ec; opacity: .9; }
.has-ts .cs-sphere .cs-map { opacity: calc(.9 * var(--ts-land, 1)); }

/* ═════════ Our People → Careers ═════════
   Desktop: the Careers scene is one of the fly-through's photos — a tile in the same 3D scene, holding a
   copy of the Careers scene (main.js), framed and hazy like the photos round it, which pass in front of
   it as they would any other. It is the last to arrive: over its final approach it turns to face the
   viewer and fills the screen (--a, 0 … 1), and the real section, hidden until then, takes its place.
   Elsewhere Careers is a sheet with rounded top corners that overlaps the end of Our People a little. */
.careers-page { z-index: 2; margin-top: -28px; border-radius: 28px 28px 0 0; overflow: clip; box-shadow: 0 -16px 44px #1f5fae1a, 0 -1px 0 #ffffff; }
.pf-tile.pf-portal { display: none; }
@media (min-width: 1024px) and (min-height: 700px) and (prefers-reduced-motion: no-preference) {
  #careers { margin-top: calc(-1 * (100svh - var(--header-h))); border-radius: 0; box-shadow: none; scroll-margin-top: -14px; /* links to Careers land on the scene itself */ }
  #careers.is-portal { visibility: hidden; }
  .mw-pin { background: linear-gradient(180deg, #eaf3ff 0%, #f4f9ff 100%); }
  .pf-tile.pf-portal { --a: 0; --m: 1; display: block; transform: translate(-50%, -50%) translate3d(var(--x), var(--y), var(--z)) scale(var(--m)); }
  .pf-portal .pf-photo { overflow: hidden; border-radius: calc(var(--w) * .055 * (1 - var(--a))); background: #eaf3ff;
    box-shadow: 0 0 0 calc(var(--w) * .012 * (1 - var(--a))) #ffffff8f, 0 calc(var(--w) * .070) calc(var(--w) * .160) #1f5fae2e; }
  /* the copy is laid out at full size and drawn at the tile's size */
  .pf-portal .mw-pin { position: absolute; left: 0; top: 0; width: var(--pw); height: var(--ph); transform: scale(var(--ps)); transform-origin: 0 0; pointer-events: none; }
  .pf-portal .reveal { opacity: 1; transform: none; }
}

/* ═════════ Our People on phones ═════════
   Only the four photos that carry a caption, one under another. The other photos are not shown (and,
   being lazy-loaded, not downloaded). Tablets and larger keep every photo. */
@media (max-width: 767px) {
  .pf-scene { grid-template-rows: none; grid-template-columns: 1fr; grid-auto-flow: row; grid-auto-columns: auto; gap: 16px; overflow: visible; padding-bottom: 6px; }
  .pf-tile, .pf-tile.pf-feat { display: none; }
  .pf-tile.pf-capd { display: block; grid-row: auto; grid-column: auto; aspect-ratio: 16 / 11; }
  .pf-capd .pf-cap { left: 12px; right: 12px; bottom: 12px; padding: 10px 14px 10px 10px; }
}

/* ═════════ Careers: the mirror wall ═════════
   The centre card faces forward; the others stand beside one another as upright panels on a wall that
   curves round the viewer — each a little smaller and turned further in, its outer edge nearer and so
   taller. Every card carries its own reflection. main.js places the cards; --cw is one card width and
   every size below follows it. Proportions are measured from the mockup. */
.careers-page.mw-careers { padding: 0 0 clamp(56px, 7vw, 96px); background: linear-gradient(180deg, #eaf3ff 0%, #f4f9ff calc(100% - 700px), #ffffff 100%); }
/* the page's travelling backdrop is not drawn behind Careers: the mirror wall is its own scene */
.mw-careers > .bg-decor { display: none; }
.mw-scroll { position: relative; }
.mw-pin { --cw: min(76vw, 420px); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding-top: clamp(40px, 7vw, 64px); }

/* background: light, dotted maps, orbital curves, nodes, haze */
.mw-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 58% 44% at 50% 26%, #ffffff 0%, #ffffffb3 40%, transparent 74%), radial-gradient(ellipse 44% 56% at 0% 52%, #b4d2fb 0%, #cfe2fd99 45%, transparent 76%), radial-gradient(ellipse 44% 56% at 100% 52%, #b4d2fb 0%, #cfe2fd99 45%, transparent 76%); }
.mw-bg > * { position: absolute; }
.mw-map { top: 3%; width: 46%; height: auto; aspect-ratio: 64 / 26; max-width: none; fill: #6fa6ee; opacity: .42; }
.mw-map.l { left: -6%; } .mw-map.r { right: -6%; transform: scaleX(-1); }
.mw-lines { inset: 0; width: 100%; height: 100%; max-width: none; }
.mw-lines path, .mw-lines ellipse { fill: none; stroke: #9cc6fb; stroke-width: 1.100; opacity: .42; vector-effect: non-scaling-stroke; }
.mw-lines .dot { stroke-dasharray: 1 8; stroke-linecap: round; stroke-width: 2; opacity: .55; }
.mw-haze { left: 0; right: 0; bottom: 0; height: 46%; background: linear-gradient(180deg, transparent, #e4f0ffcc 45%, #f4f9ff); }
.mw-node { width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: #2f86ff; box-shadow: 0 0 0 4px #5ea6ff33, 0 0 14px 3px #7fb6ff; }
.mw-node.big { width: 11px; height: 11px; margin: -5.500px; }

.mw-head { position: relative; z-index: 2; max-width: min(92vw, 900px); padding: 0 var(--pad); text-align: center; }
.mw-head .eyebrow { display: inline-flex; align-items: center; gap: clamp(14px, 1.600vw, 24px); font-size: clamp(11.500px, .900vw, 14px); letter-spacing: .34em; font-weight: 700; color: #1f6fe0; }
.mw-head .eyebrow::before, .mw-head .eyebrow::after { content: ""; width: clamp(40px, 6vw, 92px); height: 1.500px; background: #9cc3f2; }
.mw-head h2 { margin: clamp(6px, 1.200vh, 16px) 0 0; font-size: clamp(28px, min(4.200vw, 6vh), 66px); font-weight: 800; letter-spacing: -.055em; line-height: 1.04; color: #0a1f4d; }
.mw-head h2 span { display: block; color: var(--blue); }
.mw-head p:not(.eyebrow) { max-width: 34em; margin: clamp(8px, 1.500vh, 18px) auto 0; font-size: clamp(14.500px, 1.150vw, 18px); line-height: 1.45; color: #4e6079; }

/* the wall */
.mw-stage { --top: clamp(14px, 3vh, 36px); --ch: calc(var(--cw) * .712); --base: calc(var(--top) + var(--ch)); position: relative; z-index: 1; flex: none; width: 100%; height: calc(var(--base) + var(--cw) * .360); }
/* the mirror floor: a pale glossy plane under the cards, with a glow along its horizon and light streaks */
.mw-floor { position: absolute; left: 0; right: 0; top: calc(var(--base) - var(--cw) * .050); bottom: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 34% at 50% 8%, #ffffff 0%, #ffffffb8 45%, transparent 100%), linear-gradient(180deg, transparent 0, #bdd9fdcc 9%, #d9e9ffa6 46%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); }
.mw-beams { position: absolute; left: 0; right: 0; top: calc(var(--base) - var(--cw) * .200); width: 100%; height: calc(var(--cw) * .480); max-width: none; pointer-events: none; }
.mw-beams { filter: drop-shadow(0 0 7px #4f9dffcc) drop-shadow(0 0 2px #9fd0ff); }
.mw-beams path { fill: none; stroke-width: 3.400; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .95; }
.mw-beams path.thin { stroke-width: 2; opacity: .7; }
.mw-wall { position: absolute; inset: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; outline: none; }
.mw-wall.is-dragging { cursor: grabbing; }
.mw-wall:focus-visible .mw-card:not([aria-hidden]) .mw-tilt > .mw-face::before { outline: 2px solid var(--blue); outline-offset: 4px; }
/* --a: how much of the centre card this one is (1 … 0). --f: how far round the wall it stands (0 … 1).
   --k: how much of each side is trimmed away, so a card narrows to an upright panel as it leaves the
   centre. --ry: its turn. All are set by main.js. */
.mw-card { --a: 0; --f: 0; --k: 0; --ry: 0deg; --pad: calc(var(--cw) * .014); position: absolute; left: 50%; top: var(--top); width: var(--cw); margin: 0 0 0 calc(var(--cw) / -2); opacity: 0; will-change: transform, opacity; }
/* the turn has its own short perspective, so the near edge of a panel stands clearly taller than the far one */
.mw-tilt { position: relative; transform: perspective(calc(var(--cw) * 1.450)) rotateY(var(--ry)); transform-origin: 50% 56%; }
.mw-face { position: relative; display: flex; flex-direction: column; height: var(--ch); padding: var(--pad); }
/* the glass panel behind the photo and label; the centre card's blue edge and glow fade in with --a */
.mw-face::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--cw) * var(--k)); right: calc(var(--cw) * var(--k)); border-radius: calc(var(--cw) * .036); border: 1px solid #ffffff; background: linear-gradient(180deg, #ffffff, #e9f2ff);
  box-shadow: 0 calc(var(--cw) * .040) calc(var(--cw) * .100) rgb(21 72 140 / calc(.200 + var(--a) * .140)), 0 0 0 calc(var(--cw) * .0045) rgb(150 196 255 / calc(.550 + var(--a) * .450)), 0 0 0 calc(var(--cw) * .0075) rgb(72 148 255 / var(--a)), 0 0 calc(var(--cw) * .110) calc(var(--cw) * .016) rgb(94 166 255 / calc(var(--a) * .750)); }
/* the centre photo is the brightest; photos dim a little as they stand further round */
.mw-photo { position: relative; display: block; flex: none; height: calc(var(--cw) * .548); background: #dbe9f7; clip-path: inset(0 calc(var(--cw) * var(--k)) round calc(var(--cw) * .026));
  filter: brightness(calc(.960 + var(--a) * .060 - var(--f) * .050)) contrast(calc(.990 + var(--a) * .040)) saturate(calc(.960 + var(--a) * .080)); }
.mw-photo img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.mw-label { position: relative; display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; gap: calc(var(--cw) * .006); min-height: 0; width: calc(var(--cw) * (1 - 2 * var(--k)) - 4 * var(--pad)); margin: 0 auto; text-align: center; }
/* the centre card: headline and its sentence. Side cards: the headline alone, a little smaller. */
.mw-label strong { font: 600 calc(var(--cw) * (.035 + .011 * var(--a)))/1.14 var(--font-head); letter-spacing: -.025em; color: #0a1f4d; text-wrap: balance; }
.mw-label small { width: calc(var(--cw) * .860); font-size: max(10.500px, calc(var(--cw) * .0262)); line-height: 1.28; color: #4e6079; opacity: calc(var(--a) * 2 - 1); text-wrap: balance; max-height: calc(var(--cw) * .105 * var(--a)); overflow: hidden; }

/* each card's own reflection: the card again, upside down, fading away */
.mw-refl { position: absolute; left: 0; right: 0; top: calc(100% + var(--cw) * .006); height: calc(var(--cw) * .380); overflow: hidden; opacity: calc(.460 + var(--a) * .100 - var(--f) * .080); filter: blur(.800px); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000b 22%, #0005 52%, transparent 96%); mask-image: linear-gradient(180deg, #000 0%, #000b 22%, #0005 52%, transparent 96%); }
.mw-refl .mw-face { transform: scaleY(-1); }
.mw-refl .mw-face::before { box-shadow: none; }

/* controls */
.mw-arrow { position: absolute; z-index: 200; top: calc(var(--top) + var(--ch) * .500); margin-top: calc(clamp(38px, 3vw, 46px) / -2); display: grid; place-items: center; width: clamp(38px, 3vw, 46px); height: clamp(38px, 3vw, 46px); padding: 0; border: 0; border-radius: 50%; background: #0d2a6b; color: #fff; box-shadow: 0 8px 22px #0d2a6b40; cursor: pointer; transition: opacity .25s ease, transform .25s ease, background-color .25s ease; }
.mw-arrow svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 2.400; stroke-linecap: round; stroke-linejoin: round; }
.mw-prev { left: clamp(8px, 1.200vw, 24px); } .mw-next { right: clamp(8px, 1.200vw, 24px); }
.mw-arrow:hover:not(:disabled) { background: var(--blue); transform: scale(1.060); }
.mw-arrow:disabled { background: #7f93ba; box-shadow: none; cursor: default; }
.mw-dots { position: absolute; z-index: 200; left: 50%; top: calc(var(--base) + clamp(14px, 2.800vh, 30px)); display: flex; gap: 2px; translate: -50% 0; }
.mw-dot { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; }
.mw-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.500px; border-radius: 50%; background: #a9c3e6; box-shadow: 0 0 0 2px #ffffffb3; transition: background-color .3s ease, transform .3s ease; }
.mw-dot[aria-current="true"]::before { background: var(--blue); transform: scale(1.250); }
.mw-arrow:focus-visible, .mw-dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* tablet and up: the scene pins under the header and scrolling moves the wall */
@media (min-width: 768px) {
  .mw-pin { --cw: min(50vw, 560px); }
}
@media (min-width: 768px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .mw-scroll { height: calc(100svh - var(--header-h) + var(--steps, 8) * 56vh); }
  .mw-pin { --sh: calc(100svh - var(--header-h)); --cw: min(50vw, 560px, calc(var(--sh) * .600)); position: sticky; top: var(--header-h); height: var(--sh); padding-top: clamp(10px, 2.400vh, 32px); }
}
@media (min-width: 1024px) {
  .mw-pin { --cw: min(33vw, 640px); }
}
@media (min-width: 1024px) and (min-height: 600px) and (prefers-reduced-motion: no-preference) {
  .mw-pin { --cw: min(33vw, 640px, calc(var(--sh) * .600)); }
}
@media (max-width: 767px) {
  .mw-refl { height: calc(var(--cw) * .300); filter: none; opacity: .300; } /* lighter on phones */
  .mw-stage { --ch: calc(var(--cw) * .760); height: calc(var(--base) + var(--cw) * .340); } /* room for a two-line sentence */
  .mw-map { width: 80%; opacity: .300; } .mw-map.r, .mw-beams { display: none; }
}

/* Why WGS */
.mw-why { position: relative; z-index: 1; display: grid; gap: clamp(30px, 5vw, 44px); max-width: 1440px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) var(--pad) 0; text-align: center; }
.mw-why-head .eyebrow { display: inline-flex; align-items: center; gap: 16px; font-size: clamp(11px, .800vw, 12.500px); letter-spacing: .34em; font-weight: 700; color: #1f6fe0; }
.mw-why-head .eyebrow::before, .mw-why-head .eyebrow::after { content: ""; width: 30px; height: 1.500px; background: #9cc3f2; }
.mw-why-head h3 { margin: 14px 0 0; font-size: clamp(28px, 2.700vw, 40px); font-weight: 700; letter-spacing: -.045em; line-height: 1.140; color: #0a1f4d; }
.mw-why-head h3 span { display: block; color: var(--blue); }
.mw-rule { position: relative; display: block; width: 116px; height: 1px; margin: clamp(22px, 2.400vw, 30px) auto 0; background: linear-gradient(90deg, transparent, #9cc3f2 30%, #9cc3f2 70%, transparent); }
.mw-rule::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 1px; background: #7db0f0; rotate: 45deg; }
.mw-cta-wrap { margin: 0; }
.mw-cta { min-height: 54px; padding: 0 30px; gap: 14px; border-radius: 28px; font-size: 16.500px; font-weight: 600; box-shadow: 0 14px 30px #0b63ea47; }
.mw-cta svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mw-cta:hover { transform: translateY(-2px); }
.mw-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; margin: 0; padding: 0; list-style: none; }
.mw-benefits li { display: flex; flex-direction: column; align-items: center; }
.mw-ico { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: #e9f2ff; color: var(--blue); box-shadow: inset 0 0 0 1px #d3e5fd, 0 8px 20px #1f5fae14; }
.mw-ico svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.800; stroke-linecap: round; stroke-linejoin: round; }
.mw-benefits strong { margin-top: 18px; font: 600 clamp(15.500px, 1.200vw, 18px)/1.250 var(--font-head); letter-spacing: -.02em; color: #0a1f4d; }
.mw-benefits p { max-width: 13em; margin-top: 6px; font-size: clamp(13.500px, 1vw, 15px); line-height: 1.400; color: #55677f; text-wrap: balance; }
@media (min-width: 1024px) {
  /* as in the mockup: two benefits, the heading and the button, two benefits */
  .mw-why { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(300px, 1.250fr) repeat(2, minmax(0, 1fr)); align-items: center; gap: 0; }
  .mw-why-head { grid-column: 3; grid-row: 1; }
  .mw-cta-wrap { grid-column: 3; grid-row: 2; margin-top: clamp(24px, 2.400vw, 34px); }
  .mw-benefits { display: contents; }
  .mw-benefits li { grid-row: 1 / 3; padding: 0 12px; }
  .mw-benefits li:nth-child(1) { grid-column: 1; } .mw-benefits li:nth-child(2) { grid-column: 2; border-left: 1px solid #d5e3f5; }
  .mw-benefits li:nth-child(3) { grid-column: 4; } .mw-benefits li:nth-child(4) { grid-column: 5; border-left: 1px solid #d5e3f5; }
}

/* ═════════ Careers: Why WGS inside the gallery scene ═════════
   On desktop windows tall enough to hold it, main.js moves Why WGS into the pinned scene (.has-why), so
   the heading, the wall, the four benefits and the button are one view, as in the mockup. Every size
   here is a share of the scene's height (--sh), in the mockup's own proportions. */
.mw-pin.has-why { --cw: min(33.500vw, 660px, calc(var(--sh) * .476)); padding-top: calc(var(--sh) * .036); justify-content: flex-start; }
.has-why .mw-head .eyebrow { font-size: clamp(11px, calc(var(--sh) * .0150), 14.500px); }
.has-why .mw-head h2 { margin-top: calc(var(--sh) * .012); font-size: clamp(26px, min(4.200vw, calc(var(--sh) * .0610)), 68px); }
.has-why .mw-head p:not(.eyebrow) { margin-top: calc(var(--sh) * .016); font-size: clamp(13.500px, calc(var(--sh) * .0182), 18.500px); }
.has-why .mw-stage { --top: calc(var(--sh) * .034); height: calc(var(--base) + var(--sh) * .068); }
.has-why .mw-dots { top: calc(var(--base) + var(--sh) * .024); }
.has-why .mw-why { z-index: 2; width: 100%; max-width: 1500px; margin-top: calc(var(--sh) * .040); padding-top: 0; }
/* a pale veil so the text stays clear of the reflections behind it */
.has-why .mw-why::before { content: ""; position: absolute; z-index: -1; left: -20vw; right: -20vw; top: -8%; bottom: -60%; background: linear-gradient(180deg, transparent 0, #f6faffcc 30%, #fbfdff 62%); pointer-events: none; }
.has-why .mw-why-head .eyebrow { font-size: clamp(10px, calc(var(--sh) * .0128), 12.500px); }
.has-why .mw-why-head h3 { margin-top: calc(var(--sh) * .012); font-size: clamp(20px, min(2.600vw, calc(var(--sh) * .0370)), 42px); }
.has-why .mw-rule { margin-top: calc(var(--sh) * .022); }
.has-why .mw-cta-wrap { margin-top: calc(var(--sh) * .026); }
.has-why .mw-cta { min-height: clamp(38px, calc(var(--sh) * .0540), 58px); padding: 0 clamp(22px, 2vw, 32px); font-size: clamp(14px, calc(var(--sh) * .0175), 17.500px); }
.has-why .mw-ico { width: clamp(40px, calc(var(--sh) * .0680), 72px); height: clamp(40px, calc(var(--sh) * .0680), 72px); }
.has-why .mw-benefits li { align-self: start; margin-top: calc(var(--sh) * .040); }
.has-why .mw-benefits strong { margin-top: calc(var(--sh) * .016); font-size: clamp(14px, min(1.150vw, calc(var(--sh) * .0190)), 18.500px); }
.has-why .mw-benefits p { margin-top: 4px; font-size: clamp(12.500px, min(.960vw, calc(var(--sh) * .0160)), 15.500px); line-height: 1.350; }
/* in the scene the blocks are in view from the start: no reveal-on-scroll */
.has-why .reveal { opacity: 1; transform: none; }

/* ═════════ v33: Contact — from the second mockup ═════════ */
.ct { padding: clamp(72px, 8vw, 120px) 0; background: radial-gradient(ellipse 55% 70% at 78% 40%, #cfe3ff 0%, transparent 70%), radial-gradient(ellipse 45% 60% at 10% 30%, #ffffff 0%, transparent 70%), linear-gradient(115deg, #ffffff 0%, #f1f7ff 40%, #dcebff 100%); }
.ct-globe, .ct-orbits:not(.cx-orbits), .ct-dots.b { display: none; }
.cx-globe { position: absolute; right: -6%; top: -16%; width: min(1000px, 72vw); aspect-ratio: 1; opacity: .95; filter: drop-shadow(0 0 60px #5ea6ff66); }
.cx-globe svg { width: 100%; height: 100%; max-width: none; overflow: visible; }
.cx-orbits { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.cx-orbits ellipse, .cx-orbits path { fill: none; stroke: #ffffff; stroke-width: 1.4; opacity: .75; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 2px #8cc4ff); }
.cx-orbits .o3 { opacity: .45; }
.cx-orbits .dash { stroke-dasharray: 2 7; stroke-linecap: round; stroke-width: 1.8; }
.cx-orbits .nd { fill: #7fc4ff; stroke: #ffffff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.cx-orbits .halo { fill: #5ea6ff; opacity: .3; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .cx-orbits .halo { animation: lnet-pulse 5s ease-in-out infinite; } .cx-orbits .halo:nth-of-type(2n) { animation-delay: -2.5s; } }

/* left */
@media (min-width: 1001px) { .ct-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); align-items: center; } }
.ct-left .eyebrow { gap: 24px; font-size: clamp(14px, 1.2vw, 18px); letter-spacing: .34em; color: #1766e8; }
.ct-left .eyebrow::after { width: 64px; background: #1766e8; }
.ct-left h2 { white-space: normal; margin: clamp(20px, 2.4vw, 34px) 0 clamp(18px, 2vw, 28px); font-size: clamp(64px, 9vw, 150px); font-weight: 800; letter-spacing: -.055em; line-height: .88; }
.ct-left h2 .l1, .ct-left h2 .l2 { display: block; }
.ct-left h2 .l1 { color: #0a1a4a; }
.ct-left h2 .l2 { color: transparent; background: linear-gradient(120deg, #1a78ff 0%, #0a55d6 100%); -webkit-background-clip: text; background-clip: text; }
.ct-lead { max-width: 520px; font-size: clamp(17px, 1.6vw, 24px); line-height: 1.45; color: #4f6280; }
.ct-steps { gap: clamp(26px, 3vw, 40px); }
.ct-steps li { grid-template-columns: 78px 1fr; }
.ct-num { width: 78px; height: 78px; font-size: 30px; font-weight: 800; color: #1766e8; background: #ffffff; box-shadow: 0 14px 30px #1f5fae24, 0 0 0 1px #edf3fb; }
.ct-steps li:not(:last-child)::after { left: 39px; top: 92px; border-left: 1.5px dotted #8fb4e6; }
.ct-steps strong { font-size: clamp(19px, 1.8vw, 26px); font-weight: 700; color: #0a1a4a; }
.ct-steps small { max-width: 260px; font-size: clamp(15px, 1.35vw, 19px); }

/* right: frosted panel, three cards, social row */
.ct-panel { padding: clamp(18px, 2.2vw, 30px); border-radius: 34px; background: linear-gradient(160deg, #ffffff66, #eaf3ff4d); border: 1.5px solid #ffffffb3; -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 40px 90px #1f5fae29, inset 0 1px 0 #ffffffcc; }
.ct-card { padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 34px); border-radius: 24px; background: #ffffffe6; box-shadow: 0 14px 34px #1f5fae14, 0 0 0 1px #ffffff; }
.ct-card + .ct-card { margin-top: 18px; }
.ct-ico { border-radius: 20px; background: #e6f0fd; }
.ct-card.primary { background: radial-gradient(ellipse 70% 120% at 100% 0%, #2f7fff55, transparent 70%), linear-gradient(120deg, #1a5fd8 0%, #0b47b8 55%, #083a9c 100%); box-shadow: 0 22px 44px #0b3f9e4d, 0 0 0 1.5px #3f8dff, 0 0 26px #3f8dff55; }
.ct-card.primary::before { display: none; }
.ct-ico.ms { background: linear-gradient(160deg, #3aa0ff, #0a6cf2); box-shadow: 0 10px 22px #041f6699, inset 0 1px 0 #ffffff59; }
.ct-card.primary .ct-ico .bubble { fill: #fff; } .ct-card.primary .ct-ico .bolt { fill: #0a6cf2; }
.ct-card.primary .ct-go { background: transparent; box-shadow: inset 0 0 0 1.8px #ffffffcc; }
.ct-go { background: #eaf2fd; }
.ct-text strong { font-weight: 800; color: #0a1a4a; }
.ct-card.primary .ct-text strong { color: #fff; }
.ct-social { margin-top: 26px; padding-top: 26px; border-top: 1px solid #ffffffb3; }
.ct-social a { background: #ffffff8c; border: 1px solid #ffffffe6; color: #0a1a4a; font-weight: 500; }
@media (max-width: 1000px) { .cx-globe { width: 110vw; right: -40%; top: -8%; opacity: .7; } }
@media (max-width: 600px) {
  .ct-left h2 { font-size: clamp(64px, 20vw, 96px); }
  .ct-steps li { grid-template-columns: 60px 1fr; }
  .ct-num { width: 60px; height: 60px; font-size: 24px; }
  .ct-steps li:not(:last-child)::after { left: 30px; top: 72px; }
}
.cx-globe { right: -4%; top: -22%; filter: drop-shadow(0 0 80px #7fb8ff80);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 48%, transparent 72%); mask-image: radial-gradient(circle at 50% 42%, #000 48%, transparent 72%); }

/* ═════════ v34: Global Community icon → Contact background ═════════ */
.gc-canvas { position: fixed; inset: 0; z-index: 1; width: 100vw; height: 100vh; pointer-events: none; display: none; }
.gc-on .gc-canvas { display: block; }
.ct > .container { position: relative; z-index: 2; } /* content always above the particles */
/* the seed icon glows, then gives way to its particles */
.gc-on .gc-seed { position: relative; opacity: calc(1 - var(--gc-out, 0)); scale: calc(1 + var(--gc-glow, 0) * .08);
  box-shadow: inset 0 0 0 1px #d3e5fd, 0 8px 20px #1f5fae14, 0 0 calc(var(--gc-glow, 0) * 34px) calc(var(--gc-glow, 0) * 6px) #5ea6ff99; transition: none; }
/* the Contact background builds from what arrives */
.gc-on .cx-globe { opacity: calc(.95 * var(--gc-ball, 1)); }
.gc-on .cx-map { opacity: var(--gc-hand, 1); }
.gc-on .cx-orbits .o1, .gc-on .cx-orbits .o3 { vector-effect: none; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--gc-orb, 1)); }
.gc-on .cx-orbits .dash { opacity: calc(.75 * var(--gc-orb, 1)); }
.gc-on .cx-orbits .nd, .gc-on .cx-orbits .halo { opacity: var(--gc-hand, 1); }
.gc-on .ct .ct-dots { opacity: calc(.6 * var(--gc-node, 1)); }
.gc-canvas { z-index: 3; }            /* above the Careers section (z 2) where the icon lives */
.ct > .container { z-index: 4; }      /* Contact content stays above the particles */

/* ═════════ v34b: Contact globe — no hard top edge, and it turns while you're there ═════════ */
.cx-globe { top: 2%; }
.ct { background: radial-gradient(ellipse 55% 70% at 78% 48%, #cfe3ff 0%, transparent 70%), radial-gradient(ellipse 45% 60% at 10% 30%, #ffffff 0%, transparent 70%), linear-gradient(180deg, #ffffff 0%, #f4f9ff 22%, #e4efff 100%); }
.ct-bg { -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%); }
/* the world map slides round behind the globe's clip: one full turn every 90s, only while the section is in view */
.cx-spin { animation: cx-spin 90s linear infinite; animation-play-state: paused; }
.ct.cx-live .cx-spin { animation-play-state: running; }
@keyframes cx-spin { to { transform: translateX(-665.6px); } }
@media (prefers-reduced-motion: reduce) { .cx-spin { animation: none; } }
@media (max-width: 1000px) { .cx-globe { top: 4%; } }

/* ═════════ v34c: Contact content arrives in order once the background has formed ═════════ */
@media (prefers-reduced-motion: no-preference) {
  .gc-on .ct .reveal { opacity: 1; transform: none; transition: none; } /* this sequence replaces the generic reveal here */
  .gc-on .ct :is(.ct-left .eyebrow, .ct-left h2 .l1, .ct-left h2 .l2, .ct-lead, .ct-steps li, .ct-panel, .ct-card, .ct-social li) {
    opacity: 0; transform: translateY(26px); filter: blur(6px);
    transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1), filter .7s ease; transition-delay: 0s; }
  .gc-on .ct .ct-card { transform: translateX(46px); }
  .gc-on .ct .ct-panel { transform: translateY(18px) scale(.97); }
  .gc-on .ct .ct-social li { transform: translateY(14px) scale(.94); }
  .gc-on .ct .ct-steps li:not(:last-child)::after { transform: scaleY(0); transform-origin: 50% 0; transition: transform .6s ease; }
  .gc-on .ct.ct-shown :is(.ct-left .eyebrow, .ct-left h2 .l1, .ct-left h2 .l2, .ct-lead, .ct-steps li, .ct-panel, .ct-card, .ct-social li) { opacity: 1; transform: none; filter: none; }
  .gc-on .ct.ct-shown .ct-steps li:not(:last-child)::after { transform: none; }
  /* order */
  .gc-on .ct.ct-shown .ct-left .eyebrow { transition-delay: .05s; }
  .gc-on .ct.ct-shown .ct-left h2 .l1 { transition-delay: .18s; }
  .gc-on .ct.ct-shown .ct-left h2 .l2 { transition-delay: .32s; }
  .gc-on .ct.ct-shown .ct-lead { transition-delay: .48s; }
  .gc-on .ct.ct-shown .ct-steps li:nth-child(1) { transition-delay: .62s; }
  .gc-on .ct.ct-shown .ct-steps li:nth-child(2) { transition-delay: .76s; }
  .gc-on .ct.ct-shown .ct-steps li:nth-child(3) { transition-delay: .9s; }
  .gc-on .ct.ct-shown .ct-steps li:nth-child(1)::after { transition-delay: .72s; }
  .gc-on .ct.ct-shown .ct-steps li:nth-child(2)::after { transition-delay: .86s; }
  .gc-on .ct.ct-shown .ct-panel { transition-delay: .4s; }
  .gc-on .ct.ct-shown .ct-card:nth-of-type(1) { transition-delay: .6s; }
  .gc-on .ct.ct-shown .ct-card:nth-of-type(2) { transition-delay: .75s; }
  .gc-on .ct.ct-shown .ct-card:nth-of-type(3) { transition-delay: .9s; }
  .gc-on .ct.ct-shown .ct-social li:nth-child(1) { transition-delay: 1.05s; }
  .gc-on .ct.ct-shown .ct-social li:nth-child(2) { transition-delay: 1.15s; }
  .gc-on .ct.ct-shown .ct-social li:nth-child(3) { transition-delay: 1.25s; }
}
/* the seed icon: a crisp thin ring of light instead of a big soft bubble, and no zoom */
.gc-on .gc-seed { scale: none; box-shadow: inset 0 0 0 1px #d3e5fd, 0 8px 20px #1f5fae14, 0 0 0 calc(var(--gc-glow, 0) * 3px) #5ea6ff40, 0 0 calc(var(--gc-glow, 0) * 14px) #5ea6ff4d; }

/* ═════════ v35: Footer — from the mockup ═════════ */
.footer.fx { position: relative; overflow: hidden; padding: clamp(64px, 7vw, 120px) 0 clamp(28px, 3vw, 44px); color: #fff; border: 0;
  background: radial-gradient(ellipse 40% 60% at 0% 0%, #1747a855 0%, transparent 70%), radial-gradient(ellipse 50% 70% at 100% 20%, #1a4fb255 0%, transparent 70%), linear-gradient(180deg, #0a2366 0%, #081d57 55%, #061745 100%); }
.fx-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.fx-waves { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.fx-waves path { fill: none; stroke: #3b82ff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fx-waves .w-r path { stroke: #4f93ff; }
.fx-waves .w-t path { stroke: #2f6fe0; }
.fx-dots { position: absolute; background-image: radial-gradient(circle, #3b82ff 1.2px, transparent 1.7px); background-size: 12px 12px; opacity: .45; }
.fx-dots.a { left: 0; top: 10%; width: 18%; height: 70%; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 10% 45%, #000 15%, transparent 72%); mask-image: radial-gradient(ellipse 60% 55% at 10% 45%, #000 15%, transparent 72%); }
.fx-dots.b { left: 55%; top: 0; width: 35%; height: 28%; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 60% 30%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 60% 60% at 60% 30%, #000 10%, transparent 72%); }
.fx-dots.c { left: 25%; bottom: 14%; width: 35%; height: 26%; opacity: .35; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 10%, transparent 72%); mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 10%, transparent 72%); }
.footer.fx > .container { position: relative; z-index: 1; max-width: 1760px; }
.fx-grid { display: grid; grid-template-columns: 1.55fr .9fr 1.15fr 1.15fr; gap: 40px clamp(24px, 4vw, 80px); align-items: start; }

/* brand */
.fx-eyebrow { font-size: clamp(12px, .95vw, 16px); letter-spacing: .32em; font-weight: 500; text-transform: uppercase; color: #4f93ff; }
.fx-name { display: block; margin-top: clamp(10px, 1vw, 16px); text-decoration: none; font: 800 clamp(40px, 3.6vw, 70px)/1.02 var(--font-head); letter-spacing: -.035em; }
.fx-name span { display: block; }
.fx-name span:first-child { color: #ffffff; }
.fx-name span:last-child { color: transparent; background: linear-gradient(100deg, #6fb2ff 0%, #3b8cff 60%, #2a7df0 100%); -webkit-background-clip: text; background-clip: text; }
.fx-tag { margin-top: clamp(16px, 1.6vw, 26px); max-width: 420px; font-size: clamp(16px, 1.25vw, 22px); line-height: 1.5; letter-spacing: .01em; color: #c9d8f2; }

/* link columns */
.footer.fx h2 { position: relative; margin: 0 0 clamp(30px, 2.8vw, 48px); padding-bottom: 18px; font: 700 clamp(20px, 1.55vw, 28px)/1.2 var(--font-head); letter-spacing: -.02em; color: #fff; }
.footer.fx h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 2px; background: #2a7df0; }
.fx-col > a { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 340px; padding: 8px 0; color: #e3ecfb; font-size: clamp(15px, 1.2vw, 21px); text-decoration: none; transition: color .22s ease; }
.fx-col > a + a { margin-top: clamp(8px, 1vw, 18px); }
.fx-chev { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s ease; }
.fx-col > a:hover { color: #fff; }
.fx-col > a:hover .fx-chev { transform: translateX(4px); }

/* get in touch */
.fx-touch > p { margin-top: -8px; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.5; color: #c9d8f2; }
.fx-talk { display: flex; align-items: center; justify-content: space-between; margin-top: 26px; min-height: clamp(58px, 4.4vw, 80px); padding: 0 clamp(26px, 2.8vw, 56px); border-radius: 999px; color: #fff; text-decoration: none;
  font: 700 clamp(18px, 1.5vw, 26px) var(--font-head); letter-spacing: -.01em; background: linear-gradient(100deg, #1a82ff 0%, #0b63ea 60%, #0a54d4 100%); box-shadow: 0 16px 36px #0b63ea55, inset 0 1px 0 #ffffff40; transition: transform .25s ease, box-shadow .25s ease; }
.fx-talk svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.fx-talk:hover { transform: translateY(-2px); box-shadow: 0 22px 44px #0b63ea77, inset 0 1px 0 #ffffff40; }
.fx-talk:hover svg { transform: translateX(4px); }
.fx-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 0; padding: 28px 0 0; border-top: 1px solid #ffffff26; list-style: none; }
.fx-social a { display: grid; place-items: center; min-height: clamp(46px, 3.6vw, 58px); border-radius: 999px; border: 1px solid #ffffff4d; color: #fff; font-size: clamp(14px, 1.05vw, 17.5px); text-decoration: none; transition: background-color .22s ease, border-color .22s ease; }
.fx-social a:hover { background: #ffffff14; border-color: #ffffff99; }

/* bottom bar */
.fx-bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 30px; margin-top: clamp(20px, 3vw, 50px); padding-top: clamp(24px, 3vw, 48px); border-top: 1px solid #ffffff33; }
.footer.fx .copyright { margin: 0; padding: 0; border: 0; font-size: clamp(13.5px, 1vw, 17px); color: #dbe5f7; }
.fx-legal { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.fx-legal li + li::before { content: ""; display: inline-block; width: 1px; height: 18px; margin: 0 clamp(14px, 1.4vw, 24px); vertical-align: middle; background: #ffffff66; }
.fx-legal a { font-size: clamp(13.5px, 1vw, 17px); color: #dbe5f7; text-decoration: none; cursor: default; }
.fx-legal a[href] { cursor: pointer; } .fx-legal a[href]:hover { color: #fff; }
.footer.fx :focus-visible { outline: 3px solid #9fd0ff; outline-offset: 3px; border-radius: 6px; }

@media (max-width: 1100px) {
  .fx-grid { grid-template-columns: 1fr 1fr; }
  .fx-brand, .fx-touch { grid-column: 1 / -1; }
  .fx-touch { max-width: 560px; }
}
@media (max-width: 600px) {
  .fx-grid { grid-template-columns: 1fr; gap: 36px; }
  .fx-col > a { max-width: none; }
  .fx-bottom { flex-direction: column; align-items: flex-start; }
  .fx-legal li + li::before { margin: 0 12px; }
}
@media (prefers-reduced-motion: reduce) { .fx-talk, .fx-chev, .fx-talk svg { transition: none; } }
.fx-name { font-size: clamp(36px, 3.1vw, 66px); white-space: nowrap; }
.footer.fx .fx-col > a:not(.fx-talk) { padding: 8px 0; font-size: clamp(15px, 1.2vw, 21px); font-weight: 400; color: #e3ecfb; }
.footer.fx .fx-col > a:not(.fx-talk):hover { color: #fff; text-decoration: none; }
.footer.fx .fx-talk { padding: 0 clamp(26px, 2.8vw, 56px); }
.fx-waves .w-l path { stroke-width: .9; }

/* ═════════ v35b: footer proportions tuned to the target ═════════ */
.footer.fx { padding: clamp(80px, 7.2vw, 110px) 0 clamp(44px, 4vw, 66px); min-height: clamp(560px, 42vw, 700px); }
.fx-grid { grid-template-columns: 1.45fr .75fr 1fr 1.15fr; gap: 48px clamp(48px, 5.4vw, 110px); }
/* brand */
.fx-eyebrow { font-size: clamp(13px, 1vw, 16px); letter-spacing: .38em; }
.fx-name { margin-top: clamp(14px, 1.3vw, 22px); font-size: clamp(40px, 3.4vw, 58px); line-height: 1.04; white-space: normal; }
.fx-tag { margin-top: clamp(22px, 2vw, 32px); max-width: 440px; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; }
/* headings + underline */
.footer.fx h2 { margin-bottom: clamp(36px, 3vw, 52px); padding-bottom: 20px; font-size: clamp(24px, 1.85vw, 30px); }
.footer.fx h2::after { width: 48px; height: 4px; background: linear-gradient(90deg, #2f86ff, #1a6ff5); box-shadow: 0 0 10px #2f86ff80; }
/* links */
.footer.fx .fx-col > a:not(.fx-talk) { max-width: none; padding: 10px 0; font-size: clamp(17px, 1.3vw, 21px); }
.footer.fx .fx-col > a:not(.fx-talk) + a { margin-top: clamp(12px, 1.3vw, 22px); }
.fx-chev { width: 20px; height: 20px; stroke-width: 1.4; opacity: .85; }
/* get in touch */
.fx-touch > p { margin-top: -10px; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.6; color: #d2dff5; }
.footer.fx .fx-talk { margin-top: clamp(26px, 2.2vw, 36px); min-height: clamp(66px, 5vw, 84px); padding: 0 clamp(32px, 3.2vw, 56px); border-radius: 44px; font-size: clamp(21px, 1.7vw, 27px); }
.fx-talk svg { width: 32px; height: 32px; }
/* socials */
.fx-social { gap: clamp(12px, 1.2vw, 18px); margin-top: clamp(28px, 2.4vw, 38px); padding-top: clamp(28px, 2.4vw, 38px); border-top-color: #ffffff29; }
.fx-social a { min-height: clamp(52px, 3.9vw, 62px); padding: 0 18px; border-color: #8fb4ec73; font-size: clamp(15.5px, 1.15vw, 18px); }
/* waves bigger, dots quieter */
.fx-waves .w-l path { stroke-width: 1; }
.fx-dots { opacity: .22; background-size: 16px 16px; }
.fx-dots.a { opacity: .18; } .fx-dots.c { opacity: .14; }
/* bottom bar */
.fx-bottom { margin-top: clamp(40px, 4.6vw, 80px); padding-top: clamp(34px, 3.4vw, 52px); border-top-color: #9fc4ff38; }
.footer.fx .copyright, .fx-legal a { font-size: clamp(15px, 1.1vw, 18px); }
.fx-legal li + li::before { height: 20px; margin: 0 clamp(20px, 1.8vw, 30px); }
@media (max-width: 1100px) { .fx-grid { grid-template-columns: 1fr 1fr; gap: 48px 40px; } .footer.fx { min-height: 0; } }
@media (max-width: 600px) {
  .fx-grid { grid-template-columns: 1fr; gap: 40px; }
  .fx-social a { padding: 0 8px; }
  .fx-legal li + li::before { margin: 0 12px; }
}
@media (min-width: 1101px) {
  .fx-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, .7fr) minmax(0, 1.12fr) minmax(0, 1.08fr); gap: 48px clamp(40px, 4.4vw, 96px); }
  .fx-eyebrow, .fx-name span { white-space: nowrap; }
  .fx-eyebrow { letter-spacing: clamp(.2em, .8vw, .38em); }
  .fx-name { font-size: clamp(38px, 3.1vw, 58px); }
  .footer.fx .fx-col > a:not(.fx-talk) { white-space: nowrap; gap: 18px; }
  .footer.fx .fx-col > a:not(.fx-talk) { font-size: clamp(16px, 1.25vw, 21px); }
}
.fx-social { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fx-social a { padding: 0 6px; white-space: nowrap; font-size: clamp(14.5px, 1.05vw, 18px); }
/* supplied wave artwork as the footer background */
.fx-wave-img { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; opacity: .55; }
.fx-wave-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
@media (max-width: 1100px) { .fx-wave-img { height: 60%; opacity: .45; } }
/* social pills: always one even row inside the column; the text scales with the column so nothing is cut */
.fx-touch { container-type: inline-size; }
.fx-social { display: flex; flex-wrap: nowrap; }
.fx-social li { flex: 1 1 0; min-width: 0; }
.fx-social a { padding: 0 4px; white-space: nowrap; font-size: clamp(12.5px, 5.6cqw, 18px); }
/* mid-size desktops: give "Get in touch" more room so the pills breathe */
@media (min-width: 1101px) and (max-width: 1500px) {
  .fx-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .62fr) minmax(0, 1.05fr) minmax(0, 1.22fr); column-gap: clamp(32px, 3.2vw, 56px); }
}
/* the brand block sizes itself to its column, so "Global Services" and the eyebrow always fit */
@media (min-width: 1101px) {
  .fx-brand { container-type: inline-size; }
  .fx-name { font-size: clamp(30px, 12.4cqw, 58px); }
  .fx-eyebrow { font-size: clamp(11px, 3.4cqw, 16px); letter-spacing: clamp(.14em, 1.1cqw, .38em); }
}

/* v33b: Contact elements ~12% smaller */
.ct { padding: clamp(64px, 7vw, 104px) 0; }
.ct-left .eyebrow { font-size: clamp(13px, 1.05vw, 16px); }
.ct-left h2 { margin: clamp(18px, 2vw, 28px) 0 clamp(16px, 1.8vw, 24px); font-size: clamp(56px, 7.8vw, 128px); }
.ct-lead { max-width: 470px; font-size: clamp(16px, 1.4vw, 21px); }
.ct-steps { margin-top: clamp(28px, 3.4vw, 44px); gap: clamp(22px, 2.6vw, 34px); }
.ct-steps li { grid-template-columns: 66px 1fr; }
.ct-num { width: 66px; height: 66px; font-size: 25px; }
.ct-steps li:not(:last-child)::after { left: 33px; top: 78px; }
.ct-steps strong { font-size: clamp(17px, 1.55vw, 23px); }
.ct-steps small { font-size: clamp(14px, 1.2vw, 17px); }
.ct-panel { padding: clamp(16px, 1.9vw, 26px); border-radius: 30px; }
.ct-card { padding: clamp(18px, 2vw, 28px) clamp(18px, 2.1vw, 30px); border-radius: 22px; gap: clamp(14px, 1.7vw, 24px); }
.ct-card + .ct-card { margin-top: 14px; }
.ct-ico { width: clamp(56px, 5.4vw, 80px); height: clamp(56px, 5.4vw, 80px); border-radius: 18px; }
.ct-text strong { font-size: clamp(17px, 1.65vw, 24px); }
.ct-text small { margin-top: 8px; font-size: clamp(13.5px, 1.15vw, 17px); }
.ct-go { width: clamp(42px, 4vw, 58px); height: clamp(42px, 4vw, 58px); }
.ct-social { margin-top: 22px; padding-top: 22px; }
.ct-social a { min-height: clamp(46px, 4.3vw, 62px); font-size: clamp(14px, 1.2vw, 17px); }
.ct-social svg { width: clamp(22px, 2.1vw, 28px); height: clamp(22px, 2.1vw, 28px); }
@media (max-width: 600px) {
  .ct-left h2 { font-size: clamp(56px, 17vw, 84px); }
  .ct-steps li { grid-template-columns: 54px 1fr; }
  .ct-num { width: 54px; height: 54px; font-size: 21px; }
  .ct-steps li:not(:last-child)::after { left: 27px; top: 64px; }
}