/* Landing B — "data on paper". The same material as the control room, turned
   inside out: white ground, navy data, big type, an index you can scan in
   five seconds. Brand palette only. */

.sa-paper { position: relative; background: #FFFFFF; color: #101B37; isolation: isolate; overflow: hidden; }
.sa-paper * { letter-spacing: normal; }

/* ---- hero: sentence left, the live network right ---- */
.sa-ph { position: relative; min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; padding: 120px clamp(24px, 5vw, 96px) 64px; gap: clamp(24px, 4vw, 64px); }
.sa-ph-copy { position: relative; z-index: 2; }
.sa-ph-kick { display: flex; align-items: center; gap: 12px; margin: 0 0 26px; font: 600 13px/1 "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; color: #2F579A; }
.sa-ph-kick i { width: 8px; height: 8px; border-radius: 50%; background: #4E72B7; box-shadow: 0 0 0 4px rgba(78,114,183,.18); }
.sa-ph h1 { margin: 0; font-size: clamp(48px, 6.4vw, 112px); font-weight: 800; line-height: .96; letter-spacing: -.035em; text-wrap: balance; color: #101B37; }
.sa-ph h1 .a { color: #4E72B7; }
.sa-ph-lead { margin: 28px 0 0; max-width: 46ch; font-size: clamp(17px, 1.3vw, 21px); font-weight: 300; line-height: 1.5; color: #3b4766; }
.sa-ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }
.sa-ph-btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; border-radius: 999px; background: #101B37; color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; transition: background .25s ease, transform .25s ease; }
.sa-ph-btn:hover { background: #2F579A; transform: translateY(-1px); }
.sa-ph-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; font-weight: 500; color: #3b4766; }
.sa-ph-trust span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #4E72B7; margin-right: 8px; vertical-align: middle; }

.sa-ph-stage { position: relative; aspect-ratio: 1 / 1; max-height: 78vh; }
.sa-ph-map { position: absolute; inset: 0; width: 100%; height: 100%; }
.sa-ph-hud { position: absolute; font: 600 12.5px/1 "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; color: #6F8FC9; }
.sa-ph-hud.tl { left: 0; top: 0; } .sa-ph-hud.br { right: 0; bottom: 0; text-align: right; }
.sa-ph-hud b { color: #2F579A; font-weight: 600; }
.sa-ph-corner { position: absolute; width: 20px; height: 20px; border: 1.5px solid #CFD9EE; }
.sa-ph-corner.tl { left: -14px; top: -14px; border-right: 0; border-bottom: 0; } .sa-ph-corner.tr { right: -14px; top: -14px; border-left: 0; border-bottom: 0; }
.sa-ph-corner.bl { left: -14px; bottom: -14px; border-right: 0; border-top: 0; } .sa-ph-corner.br { right: -14px; bottom: -14px; border-left: 0; border-top: 0; }
/* dynamic gradient: a pale blue field that breathes behind the map */
.sa-ph::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(40% 50% at 78% 50%, rgba(230,236,247,1) 0%, rgba(230,236,247,0) 70%), radial-gradient(30% 30% at 20% 90%, rgba(207,217,238,.8) 0%, rgba(207,217,238,0) 70%);
  animation: sa-paper-breathe 14s ease-in-out infinite alternate; }
@keyframes sa-paper-breathe { to { transform: translate(-2%, 1.5%) scale(1.04); } }

/* ---- the index: four rows, one sticky visual ---- */
.sa-px { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 72px); padding: 40px clamp(24px, 5vw, 96px) 120px; }
.sa-px-head { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid #CFD9EE; }
.sa-px-head h2 { margin: 0; font-size: clamp(28px, 2.6vw, 40px); font-weight: 800; letter-spacing: -.025em; }
.sa-px-head p { margin: 0; font: 600 12px/1 "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; color: #6F8FC9; }
.sa-px-list { display: flex; flex-direction: column; }
.sa-px-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 24px; align-items: start; padding: 34px 0 30px; border-bottom: 1px solid #E6ECF7; text-decoration: none; color: inherit; transition: padding .35s cubic-bezier(.2,.7,.2,1); }
.sa-px-row.is-on { padding-left: 14px; }
.sa-px-row::before { content: ""; position: absolute; left: 0; top: 34px; bottom: 30px; width: 3px; border-radius: 2px; background: #4E72B7; transform: scaleY(0); transform-origin: top; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.sa-px-row.is-on::before { transform: scaleY(1); }
.sa-px-n { font: 600 13px/1.2 "SF Mono", Menlo, Consolas, monospace; color: #6F8FC9; padding-top: 10px; }
.sa-px-t { margin: 0; font-size: clamp(26px, 2.6vw, 44px); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.sa-px-t .a { color: #4E72B7; }
.sa-px-m { margin: 10px 0 0; max-width: 40ch; font-size: clamp(16px, 1.15vw, 19px); font-weight: 300; line-height: 1.4; color: #3b4766; }
.sa-px-m b { font-weight: 600; color: #101B37; }
.sa-px-f { text-align: right; padding-top: 4px; }
.sa-px-f b { display: block; font-size: clamp(30px, 3vw, 52px); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.sa-px-f b small { font-size: .5em; font-weight: 700; color: #4E72B7; }
.sa-px-f span { display: block; margin-top: 6px; max-width: 22ch; margin-left: auto; font-size: 13.5px; font-weight: 300; line-height: 1.4; color: #3b4766; }
.sa-px-go { grid-column: 2; margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; font-weight: 600; color: #2F579A; }
.sa-px-row.is-on .sa-px-go { color: #101B37; text-decoration: underline; text-underline-offset: 4px; }

.sa-px-side { position: relative; }
.sa-px-stick { position: sticky; top: 96px; }
.sa-px-vis { position: relative; aspect-ratio: 16 / 9; border-radius: 0; overflow: hidden; background: #0D151F; box-shadow: 0 0 0 1px #CFD9EE, 0 40px 80px -40px rgba(16,27,55,.45); }
.sa-px-vis > * { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; z-index: 1; clip-path: inset(0 0 0 100%); transition: opacity .25s ease .55s, clip-path .6s cubic-bezier(.2,.7,.2,1); }
/* the next film wipes in from the left over the one before; the old one lets go once it is covered */
.sa-px-vis > .is-on { opacity: 1; z-index: 2; clip-path: inset(0); transition: opacity 0s, clip-path .6s cubic-bezier(.2,.7,.2,1); }
.sa-px-vis img { object-fit: cover; }
.sa-px-vis .sa-real { position: absolute; }
.sa-px-vis video { object-fit: contain; background: #0D151F; }   /* the whole frame, never cropped */
.sa-px-cap { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; font: 600 12.5px/1.4 "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; color: #6F8FC9; }
.sa-px-cap b { color: #2F579A; font-weight: 600; }

@media (max-width: 1000px) {
  .sa-ph { grid-template-columns: 1fr; padding-top: 110px; min-height: 0; }
  .sa-ph-stage { max-height: 60vw; }
  .sa-px { grid-template-columns: 1fr; }
  .sa-px-side { order: -1; }
  .sa-px-stick { position: static; }
  .sa-px-row { grid-template-columns: 44px minmax(0, 1fr); }
  .sa-px-f { grid-column: 2; text-align: left; margin-top: 10px; }
  .sa-px-f span { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .sa-ph::before { animation: none; } }

/* the navigation reads in navy on the paper until it goes solid on scroll */
.sa-nav.is-paper:not(.is-solid):not(.is-stuck):not([data-open="true"]) .sa-nav-links-a,
.sa-nav.is-paper:not(.is-solid):not(.is-stuck):not([data-open="true"]) .sa-nav-contact-a,
.sa-nav.is-paper:not(.is-solid):not(.is-stuck):not([data-open="true"]) .sa-nav-social a,
.sa-nav.is-paper:not(.is-solid):not(.is-stuck):not([data-open="true"]) .sa-nav-ic { color: #101B37 !important; }
.sa-nav.is-paper:not(.is-solid):not(.is-stuck) .sa-nav-links-a:hover,
.sa-nav.is-paper:not(.is-solid):not(.is-stuck) .sa-nav-contact-a:hover { color: #2F579A !important; }
.sa-nav.is-paper:not(.is-solid):not(.is-stuck) .sa-nav-burger span,
.sa-nav.is-paper:not(.is-solid):not(.is-stuck):not([data-open="true"]) .sa-nav-toggle span,
.sa-nav.is-paper:not(.is-solid):not(.is-stuck):not([data-open="true"]) .sa-nav-toggle span::before,
.sa-nav.is-paper:not(.is-solid):not(.is-stuck):not([data-open="true"]) .sa-nav-toggle span::after { background: #101B37; }
.sa-nav.is-paper[data-open="true"] .sa-nav-links-a,
.sa-nav.is-paper[data-open="true"] .sa-nav-contact-a,
.sa-nav.is-paper[data-open="true"] .sa-nav-ic { color: #FFFFFF !important; }
.sa-nav.is-paper[data-open="true"] .sa-nav-toggle span::before,
.sa-nav.is-paper[data-open="true"] .sa-nav-toggle span::after { background: #FFFFFF; }


/* touch: larger targets in the navigation */
@media (pointer: coarse) { .sa-nav-ic { width: 44px; height: 44px; } .sa-nav-links-a, .sa-nav-contact-a { min-height: 44px; display: inline-flex; align-items: center; } }

/* ---- the index as the opening screen: sentence above, rows and the film below, trust and the button at the foot ---- */
.sa-px.is-hero { padding-top: clamp(104px, 14vh, 150px); background: #FFFFFF; color: #101B37; }
.sa-px.is-hero * { letter-spacing: normal; }
.sa-px-lede { grid-column: 1 / -1; text-align: center; margin-bottom: clamp(20px, 3vh, 36px); }
.sa-px-lede .sa-hero-h1 { margin: 0 auto; font-size: clamp(34px, min(5.4vw, 9vh), 84px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: #101B37; text-wrap: balance; }
.sa-px-lede .sa-hero-h1 .sa-w1, .sa-px-lede .sa-hero-h1 .sa-h1-drop { display: inline-block; white-space: pre; }
.sa-px-lede .sa-hero-h1 .sa-h1-drop .sa-w1 { transform-origin: left center; will-change: opacity, filter, transform; }
@media (prefers-reduced-motion: no-preference) {
  .sa-px-lede .sa-hero-h1 .sa-w1 { opacity: 0; transform: translateY(.4em); filter: blur(7px); animation: sa-word-in .72s cubic-bezier(.2,.7,.25,1) forwards; animation-delay: calc(var(--i, 0) * .075s + .12s); }
  @keyframes sa-word-in { to { opacity: 1; transform: none; filter: blur(0); } }
}
@media (prefers-reduced-motion: reduce) { .sa-px-lede .sa-hero-h1 .sa-h1-drop { display: none; } }
.sa-px-sub { margin: 18px 0 0; font: 600 12.5px/1 "SF Mono", Menlo, Consolas, monospace; text-transform: uppercase; color: #6F8FC9; }
.sa-px.is-hero .sa-px-list { border-top: 1px solid #CFD9EE; }
.sa-px-foot { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: clamp(22px, 3.2vh, 36px); }
.sa-px-foot .sa-trust-row { max-width: none; margin: 0; justify-content: center; gap: 10px 30px; }
.sa-px-foot .sa-trust-label { color: #3b4766; }
.sa-px-foot .sa-trust-icon { background-color: transparent; }
/* the one visual is a 16:9 film; the navy fades at its ends sit on a navy frame */
.sa-px.is-hero .sa-px-vis { aspect-ratio: 16 / 9; background: #0D151F; }
.sa-px.is-hero .sa-px-vis video { object-fit: contain; background: #0D151F; }
@media (max-width: 1000px) {
  .sa-px.is-hero { padding-top: 96px; }
  .sa-px-lede { order: -2; }
  .sa-px.is-hero .sa-px-side { order: -1; }
}

/* the live row turns to the dark theme: navy ground, white words, the accent lifted */
.sa-px-row { border-radius: 0; transition: padding .35s cubic-bezier(.2,.7,.2,1), background-color .35s ease, color .35s ease, margin .35s cubic-bezier(.2,.7,.2,1); }
.sa-px-row.is-on { background: #101B37; color: #fff; padding-left: 28px; padding-right: 24px; margin: 0 -24px 0 -28px; border-bottom-color: transparent; }
.sa-px-row.is-on::before { display: none; }
.sa-px-row.is-on .sa-px-t, .sa-px-row.is-on .sa-px-f b, .sa-px-row.is-on .sa-px-m b { color: #fff; }
.sa-px-row.is-on .sa-px-t .a, .sa-px-row.is-on .sa-px-f b small { color: #6F8FC9; }
.sa-px-row.is-on .sa-px-m, .sa-px-row.is-on .sa-px-f span { color: rgba(255,255,255,.78); }
.sa-px-row.is-on .sa-px-n { color: #6F8FC9; }
.sa-px-row.is-on .sa-px-go { color: #fff; }
@media (max-width: 1000px) { .sa-px-row.is-on { margin: 0; padding-left: 16px; padding-right: 16px; } }

/* ---- the film and the list are one composition: the film column is a navy
   panel as tall as the list; under the frame it names the row it is playing ---- */
.sa-px-side { display: flex; }
.sa-px-stick { position: static; display: flex; flex-direction: column; width: 100%; background: #101B37; color: #fff; }
.sa-px.is-hero .sa-px-vis { box-shadow: none; }
.sa-px-now { display: flex; flex-direction: column; flex: 1 1 auto; padding: clamp(22px, 2.2vw, 36px) clamp(22px, 2.2vw, 36px) clamp(20px, 2vw, 32px); }
.sa-px-now-n { font: 600 13px/1 "SF Mono", Menlo, Consolas, monospace; color: #6F8FC9; }
.sa-px-now-t { margin: 12px 0 0; font-size: clamp(24px, 2.2vw, 36px); font-weight: 800; line-height: 1.05; letter-spacing: -.025em; color: #fff; }
.sa-px-now-m { margin: 10px 0 0; max-width: 46ch; font-size: clamp(15px, 1.05vw, 17px); font-weight: 300; line-height: 1.45; color: rgba(255,255,255,.78); }
.sa-px-now-dots { display: flex; gap: 8px; margin-top: auto; padding-top: 22px; }
.sa-px-now-dots i { display: block; height: 3px; flex: 1 1 0; background: rgba(207,217,238,.22); transition: background .35s ease; }
.sa-px-now-dots i.is-on { background: #6F8FC9; }
.sa-px-cap { display: none; }
@media (max-width: 1000px) { .sa-px-stick { position: static; } .sa-px-now { padding: 18px 16px 16px; } }

/* ---- the row pours into the film: a navy sheet leaves the row and lands on the frame ---- */
/* the bridge: the active row's navy runs across the gap into the film panel.
   Two blobs under a goo filter — one holding the row, one holding the panel —
   read as one thick band; when the row changes they let go one after the
   other, the band pinches in the middle like a heavy liquid, and joins
   again at the next row. */
.sa-px { position: relative; }
.sa-px-bridge { position: absolute; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.sa-px-bridge.is-in { opacity: 1; }
.sa-px-bridge i { position: absolute; top: 0; display: block; background: #101B37; will-change: transform; }
.sa-px-bridge i.b1 { transform-origin: 0% 50%; }
.sa-px-bridge i.b2 { transform-origin: 100% 50%; }
@media (max-width: 1000px) { .sa-px-bridge { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sa-px-bridge { transition: none; } }

/* ---- compact: the four rows stand exactly as tall as the film ---- */
.sa-px.is-hero .sa-px-side { align-items: flex-start; }
.sa-px.is-hero .sa-px-stick { background: transparent; }
.sa-px-now { display: none; }
.sa-px.is-hero .sa-px-row { grid-template-columns: 48px minmax(0, 1fr) auto; padding: 22px 0 20px; }
.sa-px.is-hero .sa-px-row.is-on { padding-left: 28px; padding-right: 24px; }
.sa-px.is-hero .sa-px-t { font-size: clamp(22px, 2vw, 32px); }
.sa-px.is-hero .sa-px-m { margin-top: 6px; font-size: clamp(14px, 1vw, 16px); max-width: 44ch; }
.sa-px.is-hero .sa-px-n { padding-top: 6px; }
.sa-px.is-hero .sa-px-f b { font-size: clamp(26px, 2.4vw, 40px); }
.sa-px.is-hero .sa-px-f span { font-size: 12.5px; max-width: 20ch; }
.sa-px.is-hero .sa-px-list { border-top: 1px solid #CFD9EE; }
.sa-px.is-hero { padding-bottom: clamp(48px, 6vh, 80px); }
.sa-px.is-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.sa-px.is-hero .sa-px-row { padding: 18px 0 16px; }
.sa-px.is-hero .sa-px-f b { font-size: clamp(24px, 2.1vw, 34px); }
.sa-px.is-hero .sa-px-f span { font-size: 12px; margin-top: 4px; }
.sa-px.is-hero .sa-px-m { line-height: 1.35; }
@media (max-width: 1000px) { .sa-px.is-hero { grid-template-columns: 1fr; } }

/* full-bleed white, content held to a readable width */
.sa-px.is-hero { max-width: none; padding-left: max(var(--sa-frame-gut, 24px), calc((100% - var(--sa-frame, 1180px)) / 2)); padding-right: max(var(--sa-frame-gut, 24px), calc((100% - var(--sa-frame, 1180px)) / 2)); }
/* the film panel is exactly as tall as the four rows: a navy panel with the 16:9 film centred in it */
@media (min-width: 1001px) {
  .sa-px.is-hero .sa-px-side { align-items: stretch; }
  .sa-px.is-hero .sa-px-stick { height: 100%; background: #0D151F; }
  .sa-px.is-hero .sa-px-vis { aspect-ratio: auto; height: 100%; min-height: 320px; }
}

/* ---- the glow: an amoeba of brand blues behind both sections. Five soft
   blobs whose outlines keep changing shape; together they hug the two
   sections and dissolve about 100 px beyond their edges ---- */
.sa-px-glow { position: absolute; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent), linear-gradient(180deg, transparent, #000 70px, #000 calc(100% - 70px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent), linear-gradient(180deg, transparent, #000 70px, #000 calc(100% - 70px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.sa-px-glow i { position: absolute; display: block; filter: blur(26px); will-change: transform, border-radius; animation: sa-amoeba 14s ease-in-out infinite alternate, sa-amoeba-drift 23s ease-in-out infinite alternate; }
.sa-px-glow .a1 { left: 2%; top: 4%; width: 46%; height: 60%; background: rgba(111,143,201,.75); animation-duration: 13s, 21s; }
.sa-px-glow .a2 { left: 30%; top: 30%; width: 48%; height: 66%; background: rgba(78,114,183,.7); animation-duration: 17s, 26s; animation-delay: -5s, -9s; }
.sa-px-glow .a3 { left: 56%; top: 2%; width: 42%; height: 58%; background: rgba(207,217,238,.95); animation-duration: 15s, 19s; animation-delay: -8s, -3s; }
.sa-px-glow .a4 { left: 4%; top: 48%; width: 40%; height: 50%; background: rgba(207,217,238,.9); animation-duration: 12s, 24s; animation-delay: -2s, -14s; }
.sa-px-glow .a5 { left: 62%; top: 44%; width: 36%; height: 54%; background: rgba(47,87,154,.55); animation-duration: 19s, 22s; animation-delay: -11s, -6s; }
@keyframes sa-amoeba {
  0%   { border-radius: 58% 42% 63% 37% / 46% 55% 45% 54%; }
  33%  { border-radius: 40% 60% 45% 55% / 60% 38% 62% 40%; }
  66%  { border-radius: 64% 36% 38% 62% / 36% 64% 44% 56%; }
  100% { border-radius: 45% 55% 60% 40% / 55% 45% 58% 42%; }
}
@keyframes sa-amoeba-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, -5%) scale(1.08); } 100% { transform: translate(-5%, 4%) scale(.96); } }
.sa-px.is-hero .sa-px-list, .sa-px.is-hero .sa-px-side { position: relative; z-index: 1; }
.sa-px.is-hero .sa-px-bridge { z-index: 1; }
.sa-px.is-hero .sa-px-list { background: #fff; }
@media (prefers-reduced-motion: reduce) { .sa-px-glow i { animation: none; } }
@media (max-width: 1000px) { .sa-px-glow { display: none; } }
/* room under the hero before the logos */
.sa-px.is-hero { padding-bottom: clamp(96px, 12vh, 160px); row-gap: 0; }
.sa-px.is-hero .sa-px-all { background: #fff; border-top: 1px solid #CFD9EE; }
.sa-px.is-hero .sa-px-list .sa-px-row:last-of-type { border-bottom: 0; }

/* the last row of the index: the way to all solutions, centred across the list */
.sa-px-all { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 14px 0; border-bottom: 1px solid #E6ECF7; color: #101B37; font-size: 15px; font-weight: 600; text-decoration: none; transition: background-color .25s ease, color .25s ease; }
.sa-px-all:hover { background: #101B37; color: #fff; }
.sa-px-all:focus-visible { outline: 2px solid #6F8FC9; outline-offset: -2px; }
.sa-px-foot:empty { display: none; }
.sa-px-foot { gap: 0; margin-top: clamp(16px, 2.4vh, 28px); }

/* ---- margins and the closing row, set properly ----
   every row keeps the same inner margin on both sides, active or not; the
   active row never spills outside the list; the closing row runs under both
   columns, edge to edge, and nothing continues beneath it */
.sa-px.is-hero .sa-px-row, .sa-px.is-hero .sa-px-row.is-on { margin: 0; padding-left: 28px; padding-right: 28px; }
.sa-px.is-hero .sa-px-list { border-top: 1px solid #CFD9EE; }
.sa-px.is-hero .sa-px-row:last-of-type { border-bottom: 0; }
.sa-px.is-hero .sa-px-all { grid-column: 1 / -1; margin-top: 0; border-top: 1px solid #CFD9EE; border-bottom: 1px solid #CFD9EE; min-height: 64px; font-size: 16px; }
.sa-px.is-hero .sa-px-side { position: relative; z-index: 1; }

/* ---- the hero is one screen: on a laptop the title, the four rows and the
   film all fit the first viewport; sizes follow the viewport height ---- */
@media (min-width: 1001px) {
  .sa-px.is-hero { min-height: 100vh; box-sizing: border-box; align-content: start; padding-top: clamp(76px, 11vh, 130px); padding-bottom: clamp(40px, 6vh, 120px); }
  .sa-px-lede { margin-bottom: clamp(16px, 3vh, 36px); }
  .sa-px-lede .sa-hero-h1 { font-size: clamp(30px, min(5.2vw, 7.6vh), 84px); }
  .sa-px-foot { margin-top: clamp(10px, 1.8vh, 24px); }
  .sa-px.is-hero .sa-px-row { padding: clamp(12px, 1.9vh, 20px) 28px clamp(10px, 1.7vh, 18px); }
  .sa-px.is-hero .sa-px-t { font-size: clamp(20px, min(2vw, 3.4vh), 32px); }
  .sa-px.is-hero .sa-px-m { font-size: clamp(13px, min(1.05vw, 1.8vh), 16px); margin-top: 4px; }
  .sa-px.is-hero .sa-px-f b { font-size: clamp(22px, min(2.1vw, 3.6vh), 34px); }
  .sa-px.is-hero .sa-px-f span { font-size: clamp(11px, 1.3vh, 12px); }
  .sa-px.is-hero .sa-px-all { min-height: clamp(48px, 6vh, 64px); position: relative; z-index: 1; }
}
@media (min-width: 1001px) and (max-height: 820px) {
  .sa-px.is-hero { padding-top: 70px; }
  .sa-px-lede .sa-hero-h1 { font-size: clamp(28px, 6.4vh, 60px); }
  .sa-px-lede { margin-bottom: 12px; }
  .sa-px.is-hero .sa-px-row { padding-top: 10px; padding-bottom: 8px; }
  .sa-px.is-hero .sa-px-m { max-width: 36ch; }
}

/* ---- laptop: the block is held narrower and lighter, with air around it ---- */
@media (min-width: 1001px) {
  .sa-px.is-hero { column-gap: clamp(28px, 3.5vw, 56px); }
  .sa-px-lede .sa-hero-h1 { font-size: clamp(28px, min(4.4vw, 6.6vh), 64px); }
  .sa-px.is-hero .sa-px-row { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 18px; padding: clamp(10px, 1.6vh, 16px) 22px clamp(9px, 1.4vh, 14px); }
  .sa-px.is-hero .sa-px-row.is-on { padding-left: 22px; padding-right: 22px; }
  .sa-px.is-hero .sa-px-t { font-size: clamp(18px, min(1.7vw, 2.9vh), 26px); }
  .sa-px.is-hero .sa-px-m { font-size: clamp(12px, min(.95vw, 1.6vh), 14px); max-width: 34ch; }
  .sa-px.is-hero .sa-px-f b { font-size: clamp(20px, min(1.8vw, 3.1vh), 28px); }
  .sa-px.is-hero .sa-px-f span { font-size: 11px; max-width: 18ch; }
}
/* the closing row is a real call to action: a light panel bar with a navy label, hover to navy */
.sa-px.is-hero .sa-px-all { background: #E6ECF7; border-top: 0; border-bottom: 0; color: #101B37; font-size: 15px; font-weight: 700; min-height: 54px; }
.sa-px.is-hero .sa-px-all svg { transition: transform .25s ease; }
.sa-px.is-hero .sa-px-all:hover { background: #101B37; color: #fff; }
.sa-px.is-hero .sa-px-all:hover svg { transform: translateX(4px); }
@media (min-width: 1001px) {
  .sa-px.is-hero { grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr); }
  .sa-px.is-hero .sa-px-t { white-space: nowrap; font-size: clamp(18px, min(1.6vw, 2.8vh), 24px); }
  .sa-px.is-hero .sa-px-f { min-width: 128px; }
  .sa-px-glow i { opacity: .72; }
}
/* clear hierarchy: a full step of air between the title block and the projects */
@media (min-width: 1001px) {
  .sa-px-lede { margin-bottom: clamp(44px, 7vh, 80px); }
  .sa-px-foot { margin-top: clamp(14px, 2.2vh, 26px); }
}
@media (min-width: 1001px) and (max-height: 820px) { .sa-px-lede { margin-bottom: clamp(32px, 5vh, 48px); } }
/* vertical rhythm of the first screen: the block sits centred under the bar,
   so the air above the title equals the air under the closing row;
   title → trust 24 px, trust → projects 56 px */
@media (min-width: 1001px) {
  .sa-px.is-hero { min-height: 100vh; padding-top: 76px; padding-bottom: 0; align-content: center; }
  .sa-px-lede { margin-bottom: 56px; }
  .sa-px-foot { margin-top: 24px; }
  .sa-px.is-hero .sa-px-all { margin-bottom: 0; }
}
@media (min-width: 1001px) and (max-height: 820px) { .sa-px-lede { margin-bottom: 40px; } .sa-px-foot { margin-top: 18px; } }
/* phone: the headline balances its lines and is sized so "Connecting AI Systems" holds one line */
@media (max-width: 1000px) { .sa-px.is-hero .sa-px-lede .sa-hero-h1 { text-wrap: balance; } }
@media (max-width: 480px) { .sa-px.is-hero .sa-px-lede .sa-hero-h1 { font-size: clamp(24px, 7.4vw, 34px); } }