/* ============================================================ hero
The solutions section is the page's first screen: the earth on the
left with the sentence over it, the work on the right. Everything
here is an addition to the redesign sheet, never an edit of it.
================================================================= */
/* Space is the same everywhere now — the lit pool that used to stand
behind the world made the earth look lamp-lit rather than sunlit. */
.sa-w-split::before { display: none !important; }
/* The section still says what it is, but only to a screen reader: on the
first screen the sentence is the heading, and two headings stacked on
the same edge read as a mistake. */
.sa-w-hero .sa-w-head {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ------------------------------------------------------------- glass */
/* A pane of frosted glass laid over the left of the world, with one clean
edge: it runs off the page on the left and stops on a soft corner just
past the middle of the earth, so the planet is sharp where it is free and
quiet where the words are. */
/* The blurred pane over the planet is gone — the earth is shown as it is
drawn. What stays is a shadow, not a pane: a gradient that fades out long
before the middle of the section, has no edge and no blur, and does
nothing except keep the headline off the bright side of the limb. */
.sa-w-hero .sa-lede-glass {
position: absolute;
top: -1000px;
bottom: -1000px;
left: calc(50% - 50vw);
width: calc(50vw - 50% + 50%);
z-index: 2;
pointer-events: none;
background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
background-image: linear-gradient(90deg,
rgba(4, 7, 14, .84) 0%,
rgba(4, 7, 14, .80) 58%,
rgba(4, 7, 14, .52) 78%,
rgba(4, 7, 14, .16) 92%,
rgba(4, 7, 14, 0) 100%);
-webkit-mask-image: none;
mask-image: none;
}
/* The supporting lines cross the planet at narrower widths, so they carry the
same halo — lighter, because they are smaller type. */
.sa-w-hero .sa-lede .sa-trust-label,
.sa-w-hero .sa-lede .sa-trust-icon {
text-shadow: 0 0 14px rgba(4, 7, 14, .92), 0 1px 3px rgba(4, 7, 14, .8);
filter: drop-shadow(0 0 8px rgba(4, 7, 14, .85));
}
/* -------------------------------------------------------------- words */
.sa-w-hero .sa-lede {
position: absolute;
top: 50%;
/* the same gutter the bar uses, so the sentence starts on the same edge
as the logo above it (an absolute box is laid out against the padding
box, so the gutter has to be repeated here rather than inherited) */
left: clamp(24px, 5.6vw, 88px);
z-index: 3;
width: min(560px, 40vw);
transform: translateY(-50%);
}
.sa-w-hero .sa-lede .sa-hero-kicker {
margin: 0 0 16px;
color: #9FB6DE;
font-size: 14.5px;
}
.sa-w-hero .sa-lede .sa-hero-h1 {
margin: 0 0 22px;
color: #FFFFFF;
/* a halo tight to the letterforms: where the line runs onto the lit side of
the planet the type keeps its contrast, without a pane over the globe */
text-shadow: 0 0 18px rgba(4, 7, 14, .94), 0 1px 4px rgba(4, 7, 14, .88);
font-size: clamp(26px, 2.85vw, 42px);
line-height: 1.08;
letter-spacing: -.6px;
/* each line stays one line: the sentence breaks where it is written to
break and nowhere else, and the box holds the words rather than the
column, so what is measured against the glass is the sentence itself */
white-space: nowrap;
width: max-content;
max-width: 100%;
}
.sa-w-hero .sa-lede .sa-trust-row {
max-width: 360px;
margin-top: 26px;
gap: 12px 26px;
}
.sa-w-hero .sa-lede .sa-trust-label {
color: rgba(255, 255, 255, .80);
}
/* The badges are drawn line art, not blocks: the same three icons in white
stroke on nothing at all. (They come out of the redesign sheet stroked in
dark blue for the light hero, so on space they are restated here.) */
.sa-w-hero .sa-lede .sa-trust-icon {
background-color: transparent;
}
.sa-w-hero .sa-lede .sa-icon-shield {
background-image: url("data:image/svg+xml;utf8,");
}
.sa-w-hero .sa-lede .sa-icon-clock {
background-image: url("data:image/svg+xml;utf8,");
}
.sa-w-hero .sa-lede .sa-icon-eu {
background-image: url("data:image/svg+xml;utf8,");
}
.sa-w-hero .sa-lede .sa-hero-actions { margin-top: 28px; }
.sa-w-hero .sa-lede .sa-hero-cta {
background-color: #2F579A;
color: #FFFFFF;
}
.sa-w-hero .sa-lede .sa-hero-cta:hover,
.sa-w-hero .sa-lede .sa-hero-cta:focus-visible {
background-color: #4E72B7;
}
/* the rail is the page's second voice, so it gives the sentence room */
/* The first screen keeps the page's own gutter on both sides, so the
sentence, the logo above it and the right edge of the work all stand on
the same two lines. */
@media screen and (min-width: 901px) {
.sa-w-hero .sa-w-in {
/* A page has a measure. Past about 1500px a line of content stops being
a composition and becomes two things at opposite ends of a desk, so
the first screen holds to 1336px of content inside its gutters and
the rest of a large display becomes margin. */
width: min(100%, 1512px);
max-width: none;
margin-left: auto;
margin-right: auto;
/* a wide margin at the edges of the page and a narrow one between the
two halves: the air belongs on the outside, where it frames the
screen, not in the middle, where it only pulls the two apart */
padding-left: clamp(24px, 5.6vw, 88px);
padding-right: clamp(24px, 5.6vw, 88px);
}
.sa-w-hero .sa-w-split {
grid-template-columns: minmax(0, 1.34fr) minmax(360px, 1fr);
gap: clamp(16px, 2vw, 32px);
}
/* the first screen grows with the window rather than sitting in the
middle of a tall display with empty bands above and below it */
.sa-w.sa-w-hero[data-view="globe"] .sa-w-split {
min-height: clamp(440px, 56vh, 620px);
max-height: clamp(520px, 70vh, 880px);
}
/* and the rail is wide enough that a card's own sentence fits in it */
.sa-w-hero .sa-w-cards {
width: min(100%, 540px);
margin-left: auto;
}
}
/* Where the globe is not drawn the sentence is simply the top of the page:
it comes out of its corner, back into the flow, ahead of the cards. */
@media screen and (max-width: 900px) {
.sa-w-hero .sa-lede-glass { display: none; }
.sa-w-hero .sa-lede {
position: static;
width: auto;
transform: none;
margin: 0 0 clamp(28px, 5vw, 44px);
}
.sa-w-hero .sa-lede .sa-hero-h1 { font-size: clamp(25px, 6.8vw, 42px); max-width: none; }
.sa-w-hero .sa-lede .sa-trust-row { max-width: none; }
}
/* ------------------------------------------------------------- logos */
/* The clients used to sit along the bottom edge of the old hero; as their
own band under the first screen they need to stand up on their own. */
.sa-logos {
position: relative;
z-index: 1;
/* The clients sit on paper, not on the same white as the section under
them: dark hero, a warm strip, then the white the reading happens on —
three steps where there used to be two. */
background-color: #FFFFFF;
}
.sa-logos .sa-hero-ticker {
position: static;
background-color: #FFFFFF;
min-height: 0;
padding: clamp(18px, 2.4vw, 30px) 0;
}
/* ========================================================== the bar
The navigation is a line across the top of the page rather than a
floating pill: the labels on the left, the way to reach us on the
right, and nothing drawn around either. It stays clear over the
first screen and takes a dark ground once a light section scrolls
under it, so the labels never fall below contrast.
================================================================= */
.sa-nav {
top: 0;
left: 0;
right: 0;
width: 100%;
max-width: none;
transform: none;
justify-content: flex-start;
gap: clamp(16px, 2.4vw, 36px);
padding: clamp(14px, 1.6vw, 22px) clamp(20px, 4vw, 60px);
border-radius: 0;
/* No bar: the labels sit straight on the section. What keeps them legible
is not a ground behind them but the veil below, which takes the page's
own colour and dissolves whatever scrolls up into it. */
background-color: transparent;
background-image: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
.sa-nav::before { display: none; }
/* Nothing behind the bar at the top of a page: the labels sit straight on the
hero. The moment the page moves, a pane of frosted glass slides down from
the top edge and stays — blurring whatever is passing under the bar rather
than hiding it. Its tint follows the section: dark over dark, light over
light, so the words keep their contrast either way. Its lower edge is
feathered, so content fades out before it reaches them. */
.sa-nav-veil {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
height: calc(var(--veil-solid, 62px) + 26px);
pointer-events: none;
opacity: 0;
transform: translateY(-10px);
background-color: rgba(9, 15, 26, .46);
-webkit-backdrop-filter: blur(18px) saturate(128%);
backdrop-filter: blur(18px) saturate(128%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 26px), rgba(0,0,0,0) 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 26px), rgba(0,0,0,0) 100%);
transition: opacity .34s ease, transform .34s cubic-bezier(.22,.7,.25,1), background-color .3s ease;
}
.sa-nav-veil.is-on { opacity: 1; transform: none; }
.sa-nav-veil.is-light { background-color: rgba(255, 255, 255, .58); }
/* where the glass cannot be blurred, a plain tint stands in for it */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.sa-nav-veil { background-color: rgba(9, 15, 26, .88); }
.sa-nav-veil.is-light { background-color: rgba(255, 255, 255, .92); }
}
@media (prefers-reduced-motion: reduce) {
.sa-nav-veil { transition-duration: .01ms; transform: none; }
}
/* over a light section the words turn over with it */
.sa-nav.on-light .sa-nav-links-a,
.sa-nav.on-light .sa-nav-contact-a { color: rgba(22, 36, 74, .82); }
.sa-nav.on-light .sa-nav-links-a:hover,
.sa-nav.on-light .sa-nav-links-a:focus-visible,
.sa-nav.on-light .sa-nav-contact-a:hover,
.sa-nav.on-light .sa-nav-contact-a:focus-visible,
.sa-nav.on-light .sa-nav-links-a.is-current { color: #101B37; }
.sa-nav-brand { margin-right: clamp(8px, 1.6vw, 24px); }
.sa-nav-links { gap: clamp(14px, 2vw, 32px); }
.sa-nav-links-a,
.sa-nav-contact-a {
padding: 6px 0;
border-radius: 0;
background-color: transparent;
color: rgba(255, 255, 255, .86);
font-size: 14.5px;
font-weight: 300;
letter-spacing: normal;
text-transform: none;
text-decoration: none;
transition: color .2s ease;
}
.sa-nav-links-a:hover,
.sa-nav-links-a:focus-visible,
.sa-nav-contact-a:hover,
.sa-nav-contact-a:focus-visible {
background-color: transparent;
color: #FFFFFF;
}
.sa-nav-links-a.is-current {
background-color: transparent;
color: #FFFFFF;
font-weight: 400;
}
/* the right-hand end of the line */
.sa-nav-contact {
display: flex;
align-items: center;
gap: clamp(16px, 2.2vw, 34px);
margin-left: auto;
}
@media screen and (max-width: 900px) {
.sa-nav { padding: 12px 18px; }
.sa-nav-contact { display: none; }
}
/* ===================================================== the sentence
The headline settles in first and the rest of the block follows it,
so the page opens on the thought rather than on furniture. It sits a
little back from full white, which on a pane of glass reads as part
of the picture rather than as a label stuck on top of it.
================================================================= */
.sa-w-hero .sa-lede .sa-hero-h1 { opacity: .8; }
@media (prefers-reduced-motion: no-preference) {
.sa-w-hero .sa-lede .sa-hero-h1,
.sa-w-hero .sa-lede .sa-trust-row,
.sa-w-hero .sa-lede .sa-hero-actions {
animation: sa-lede-in .9s cubic-bezier(.22, .61, .36, 1) both;
}
.sa-w-hero .sa-lede .sa-hero-h1 { animation-delay: .10s; }
.sa-w-hero .sa-lede .sa-trust-row { animation-delay: .62s; }
.sa-w-hero .sa-lede .sa-hero-actions{ animation-delay: .80s; }
@keyframes sa-lede-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* the headline keeps its own level once it has arrived */
.sa-w-hero .sa-lede .sa-hero-h1 {
animation-name: sa-lede-in-h1;
}
@keyframes sa-lede-in-h1 {
from { opacity: 0; transform: translateY(14px); }
to { opacity: .8; transform: none; }
}
}
/* ================================================== get in touch
The invitation runs from night on the left to daylight on the right,
with the light breathing very slowly across it — the same journey the
globe makes, in one still frame.
================================================================= */
@media screen and (min-width: 901px) {
.sa-cta {
position: relative;
isolation: isolate;
overflow: hidden;
/* The journey ran night-to-daylight, left to right — which put the
questions on the dark end, where they could only be white, and the
faint ones read as nothing at all. It runs the other way now: the
words get the daylight and can be navy, and the form keeps the night,
where its white fields stand out rather than dissolve. */
/* Daylight is white and the palette's light surfaces; the ramp keeps
the light half nearly neutral and spends the blue only on the short
turn into night, so the band does not read as one long blue wash.
The night starts before the form, so its white labels sit on dark. */
background-color: var(--sa-paper, #FFFFFF);
background-image: linear-gradient(100deg,
#FFFFFF 0%,
#F4F7FC 16%,
#E6ECF7 30%,
#CFD9EE 40%,
#8FA5CF 47%,
#57709C 53%,
#2F579A 62%,
#1B2C57 80%,
#0D151F 100%);
}
.sa-cta::after {
content: "";
position: absolute;
inset: -22% -12%;
z-index: -1;
pointer-events: none;
background-image:
radial-gradient(38% 62% at 72% 38%, rgba(111, 143, 201, .26) 0%, rgba(111, 143, 201, 0) 70%),
radial-gradient(30% 52% at 26% 70%, rgba(255, 255, 255, .42) 0%, rgba(255, 255, 255, 0) 72%);
}
.sa-cta .sa-cta-question { color: rgba(16, 27, 55, .72); }
.sa-cta .sa-cta-question.is-lit,
.sa-cta .sa-cta-question:hover { color: #0D151F; }
.sa-cta .sa-cta-h2 { color: #101B37; }
.sa-cta .sa-cta-sub { color: rgba(16, 27, 55, .78); }
/* the form now sits on the night end, so its labels change sides */
.sa-cta .sa-form-label { color: rgba(255, 255, 255, .88); }
/* A blue button on a blue field was a button you had to look for. On the
night end the daylight itself is the mark: the same paper as the other
end of the ramp, with the navy back in the type. */
.sa-cta .sa-form-submit {
background-image: none;
background-color: var(--sa-paper, #FFFFFF);
color: var(--sa-navy);
}
.sa-cta .sa-form-submit:hover,
.sa-cta .sa-form-submit:focus-visible {
background-color: var(--sa-white);
color: var(--sa-ink);
}
}
@media screen and (min-width: 901px) and (prefers-reduced-motion: no-preference) {
.sa-cta::after { animation: sa-cta-drift 26s ease-in-out infinite alternate; }
@keyframes sa-cta-drift {
from { transform: translate3d(-2%, -1%, 0) scale(1); }
to { transform: translate3d(3%, 2%, 0) scale(1.06); }
}
}
/* ===================================================== the buttons
A button is a button because of its shape and its ground, not
because the words in it are heavier than the words around them.
================================================================= */
.sa-hero-cta,
.sa-nav-contact-cta,
.sa-form-submit,
.sa-w-card-go {
font-weight: 600;
}
/* the bar keeps the same measure and the same margin as the first screen
below it, so the logo and the sentence stand on one edge at any size */
@media screen and (min-width: 901px) {
.sa-nav {
width: min(100%, 1512px);
margin-left: auto;
margin-right: auto;
padding-left: clamp(24px, 5.6vw, 88px);
padding-right: clamp(24px, 5.6vw, 88px);
}
}
/* The world sits a little right of its own column, so its left side is the
ground the sentence stands on and its right side stays in the clear. */
@media screen and (min-width: 901px) {
.sa-w-hero .sa-w-canvas { transform: translateX(17%); }
}
/* ====================================================== the tagline
It arrives a word at a time, holds, and then says less: the two
phrases that were carrying the sentence blur away and what is left
closes the gap — "Connecting the Physical World".
================================================================= */
.sa-w-hero .sa-lede .sa-hero-h1 .sa-w1 {
display: inline-block;
white-space: pre;
}
.sa-w-hero .sa-lede .sa-hero-h1 .sa-h1-drop {
display: inline-block;
white-space: pre;
}
/* Each word of a dropped phrase leaves and returns on its own, a beat behind
the one to its left, so the change reads as a sweep along the line rather
than a block switching off. The timing is set from the script; what
belongs here is only the pivot the word turns on. */
.sa-w-hero .sa-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-w-hero .sa-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); }
}
}
/* where motion is not wanted the sentence is simply the short one */
@media (prefers-reduced-motion: reduce) {
.sa-w-hero .sa-lede .sa-hero-h1 .sa-h1-drop { display: none; }
}
/* The canvas used to carry the sky as well as the planet, and its edges were
masked so none of that ended on a hard line. The sky is its own layer now
and the drawing is only the disc — which has its own soft edge — so the
mask has nothing left to soften and was clipping the world's right limb. */
@media screen and (min-width: 901px) {
.sa-w-hero .sa-w-canvas {
-webkit-mask-image: none;
mask-image: none;
}
}
/* ==========================================================================
PROOF — declutter
The section was carrying four accent colours in the stat row, five badge
colours in the awards, a repeated year and product on every line, a card
frame inside the section and a scroll region inside a scrolling page.
None of that is content, so all of it goes. Height is unchanged.
========================================================================== */
/* the four coloured marks are gone from the markup; the numbers lead */
.sa-proof-stats { gap: 28px 40px; }
.sa-proof-stat { padding: 0; }
/* --- the panel is no longer a card inside the section -------------------- */
.sa-proof-award {
padding: 0;
border: 0;
border-radius: 0;
background: none !important;
background-image: none !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
margin-top: clamp(30px, 3.4vw, 46px);
padding-top: clamp(26px, 3vw, 38px);
border-top: 1px solid rgba(255, 255, 255, .10);
}
/* the foot shadow existed only to say "this scrolls" */
.sa-proof-award::after { display: none !important; }
@media (min-width: 861px) {
/* one hairline separates the two halves instead of a box around both */
.sa-proof-award-win {
padding-left: clamp(28px, 3.4vw, 52px);
border-left: 1px solid rgba(255, 255, 255, .10);
}
}
/* --- the list is a list again, not a window ------------------------------ */
.sa-proof-award-scroll {
max-height: none;
overflow: visible;
padding-right: 0;
-webkit-mask-image: none;
mask-image: none;
}
.sa-proof-award-scroll .sa-proof-award-list { padding: 0; }
.sa-proof-award-list { gap: 18px; }
/* repeated years and repeated product labels are noise: the run is read as
one group, so only its first line carries them */
.sa-proof-award-item.is-yr-cont .sa-proof-award-year { visibility: hidden; }
.sa-proof-award-item.is-for-cont .sa-proof-award-for { display: none; }
/* --- one quiet status word; only a win keeps colour ---------------------- */
.sa-proof-award-badge,
.sa-proof-award-badge.is-finalist,
.sa-proof-award-badge.is-open,
.sa-proof-award-badge.is-gold,
.sa-proof-award-badge.is-silver,
.sa-proof-award-badge.is-medal {
color: rgba(255, 255, 255, .62);
font-weight: 400;
font-size: 12.5px;
}
.sa-proof-award-badge.is-win { color: var(--sa-white); font-weight: 600; }
/* --- the last two awards open in place ---------------------------------- */
.sa-proof-award-item.is-extra { display: none; }
.sa-proof-award-win.is-open .sa-proof-award-item.is-extra { display: grid; }
.sa-proof-award-toggle {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 18px 0 0;
padding: 0;
border: 0;
background: none;
color: rgba(214, 228, 252, .82);
font: inherit;
font-size: 13px;
font-weight: 400;
cursor: pointer;
transition: color .2s ease;
}
.sa-proof-award-toggle:hover { color: #fff; }
.sa-proof-award-toggle svg { transition: transform .25s ease; }
.sa-proof-award-win.is-open .sa-proof-award-toggle svg { transform: rotate(180deg); }
.sa-proof-award-toggle:focus-visible { outline: 2px solid rgba(143, 182, 242, .6); outline-offset: 4px; }
/* the dead space between the record and the footer was doing nothing */
.sa-proof { padding-bottom: clamp(56px, 5.4vw, 76px); }
/* the two certificates were the brightest objects on the page */
.sa-foot-cert-img { opacity: .82; }
/* the toggle lines up with the award titles, not with the year gutter */
.sa-proof-award-toggle { margin-left: 78px; }
/* a year group is read as a block: a little more air before a new year */
.sa-proof-award-item:not(:first-child):not(.is-yr-cont) { margin-top: 10px; }
/* the win keeps its trophy and its colour; the confetti burst landed on top
of the text and was the last loud thing in the section */
.sa-proof-award-badge .sa-award-spark { display: none !important; }
@media (max-width: 560px) {
/* the year gutter was eating a quarter of the line length */
.sa-proof-award-item { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; }
.sa-proof-award-year { font-size: 13.5px; }
.sa-proof-award-toggle { margin-left: 52px; }
}
/* --- the ceremony photo, in the column's empty half ---------------------- */
.sa-proof-award-shot {
margin: clamp(20px, 2.2vw, 26px) 0 0;
max-width: 420px;
}
.sa-proof-award-shot-img {
display: block;
width: 100%;
height: auto;
border-radius: 8px;
/* a bright stage photo against a dark section: held back a little so it
sits in the page rather than glaring out of it */
opacity: .94;
filter: saturate(.94);
}
.sa-proof-award-shot-cap {
margin-top: 9px;
text-align: left;
font-size: 12px;
font-weight: 300;
line-height: 1.5;
color: rgba(255, 255, 255, .62);
}
@media (max-width: 860px) {
.sa-proof-award-shot { max-width: none; }
}
/* ==========================================================================
EXPERTS IN — the panel
Three flat columns of identical text with an empty grey instruction box
under them. The box goes; the photo takes the fourth column and the
explanation appears under it. Items get smaller so the column titles lead.
========================================================================== */
@media (min-width: 1101px) {
.sa-net-stage {
grid-template-columns: repeat(3, minmax(0, 1fr)) 340px;
gap: clamp(24px, 2.6vw, 40px);
column-gap: clamp(22px, 2.2vw, 34px);
}
/* the same hairline the awarded-work block uses, so the panel reads as
part of the page's language rather than a floating card */
.sa-net-side {
padding-left: clamp(20px, 2.2vw, 34px);
border-left: 1px solid rgba(16, 27, 55, .10);
}
}
/* --- the fleet, standing on the page rather than sitting in a box -------- */
.sa-net-shot { margin: 0; }
.sa-net-shot-img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
/* the lower third of the frame is already near-white floor, so fading it
out lets the vehicles stand on the section instead of on a card */
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(180deg, #000 0%, #000 82%, rgba(0,0,0,0) 100%);
}
/* --- the explanation: a line of type, not a container ------------------- */
.sa-net .sa-net-note {
display: block;
/* The tallest explanation in the set runs to 162px in this 340px column.
The box reserves more than that, so the panel is the same height whether
a note is showing or not and the section below never moves. */
min-height: 120px;
margin: 14px 0 0;
padding: 0;
border-radius: 0;
background: none;
font-size: 14px;
font-weight: 300;
line-height: 1.65;
color: #33456B;
}
.sa-net-note-in {
display: block;
opacity: 0;
transform: translateY(4px);
transition: opacity .26s ease, transform .26s ease;
}
.sa-net-note-in:not(:empty) { opacity: 1; transform: none; }
/* --- hierarchy: the titles lead, the items recede ----------------------- */
.sa-net-col-title {
margin-bottom: 8px;
font-size: 15px;
}
.sa-net-tick { width: 15px; height: 15px; }
.sa-net .sa-net-node {
padding: 6px 6px 6px 0;
font-size: 14.5px;
font-weight: 300;
line-height: 1.45;
color: #46546F;
}
.sa-net .sa-net-node.is-out { font-weight: 500; color: var(--sa-navy); }
.sa-net .sa-net-node:hover,
.sa-net .sa-net-node.is-active { color: var(--sa-navy); font-weight: 400; }
.sa-net-dot { height: 12px; }
/* --- the columns arrive in sequence, once ------------------------------- */
@media (prefers-reduced-motion: no-preference) {
.sa-net.can-reveal .sa-net-node,
.sa-net.can-reveal .sa-net-col-title,
.sa-net.can-reveal .sa-net-side {
opacity: 0;
transform: translateY(8px);
}
.sa-net.is-seen .sa-net-node,
.sa-net.is-seen .sa-net-col-title,
.sa-net.is-seen .sa-net-side {
opacity: 1;
transform: none;
transition: opacity .5s ease, transform .5s cubic-bezier(.22,.7,.25,1);
transition-delay: calc(var(--r, 0) * 28ms);
}
}
@media (max-width: 1100px) and (min-width: 901px) {
.sa-net-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-net-side { grid-column: 2; }
}
@media (max-width: 1100px) {
/* wider column, so the longest note is 115px here */
.sa-net .sa-net-note { min-height: 124px; }
}
@media (max-width: 900px) {
.sa-net-stage { grid-template-columns: minmax(0, 1fr); }
.sa-net-side { grid-column: auto; max-width: 440px; }
}
/* --- the mark beside each item: a hairline that becomes a tick ----------- */
/* At rest every row carries a plain vertical hairline. On hover or focus the
line retracts and the tick draws itself in, left to right — the same
checkmark the column titles used to wear, now earned one row at a time. */
.sa-net-mark {
display: block;
flex: none;
width: 14px;
height: 14px;
}
.sa-net-mark svg { display: block; overflow: visible; }
.sa-net-mark-line {
stroke: var(--sa-surface-3);
transform-origin: 2px 8px;
transition: opacity .16s ease, transform .22s cubic-bezier(.3,.7,.3,1), stroke .2s ease;
}
.sa-net-mark-tick {
stroke: var(--sa-blue);
stroke-dasharray: 17;
stroke-dashoffset: 17;
transition: stroke-dashoffset .34s cubic-bezier(.25,.75,.3,1) .06s;
}
.sa-net .sa-net-node:hover .sa-net-mark-line,
.sa-net .sa-net-node:focus-visible .sa-net-mark-line,
.sa-net .sa-net-node.is-active .sa-net-mark-line {
opacity: 0;
transform: scaleY(.35);
}
.sa-net .sa-net-node:hover .sa-net-mark-tick,
.sa-net .sa-net-node:focus-visible .sa-net-mark-tick,
.sa-net .sa-net-node.is-active .sa-net-mark-tick {
stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
.sa-net-mark-line, .sa-net-mark-tick { transition-duration: .01ms; }
}
/* --- titles: no tick, aligned with the rows beneath them ---------------- */
.sa-net .sa-net-col-title {
display: block;
padding-left: 24px;
margin-bottom: 10px;
}
.sa-net .sa-net-node { gap: 10px; }
/* ==========================================================================
THE RAIL — the object stands out of its card
The five shots are cut out of their studio ground, so each one is the
object itself rather than a photograph of it. The card keeps a plate — a
dark blue pane, inset from the row — and the object is laid over it at a
size that breaks the plate's top edge, with a shadow cast onto it. Nothing
about the rail's position changes; only what sits in it.
========================================================================== */
@media (min-width: 901px) {
.sa-w-hero[data-view="globe"] .sa-w-card {
--sa-shot: clamp(160px, 50%, 268px);
}
.sa-w-hero[data-view="globe"] .sa-w-card-media {
overflow: visible;
background: none;
box-shadow: none;
}
/* the plate: shorter than the row, so the object has an edge to cross */
.sa-w-hero[data-view="globe"] .sa-w-card-media::before {
content: "";
position: absolute;
/* the pane stops at the object's waistline: everything below that edge
is page, so the lower half of the object has left the card */
inset: 0 0 50% 0;
border-radius: 12px 12px 10px 10px;
background-image: linear-gradient(150deg,
rgba(93, 130, 196, .46) 0%,
rgba(30, 49, 96, .74) 55%,
rgba(16, 27, 55, .86) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09),
0 18px 36px -28px rgba(0, 0, 0, .95);
transition: background-image .45s ease, box-shadow .45s ease;
}
.sa-w-hero[data-view="globe"] .sa-w-card-img {
/* bottom-anchored inside a box taller than the plate: the object stands
on the pane's lower edge and its top crosses the pane's upper one */
/* centred on the row, so the pane's lower edge crosses the object at its
middle; taller than the row, so it also breaks the pane's top */
position: absolute;
z-index: 1;
display: block;
left: 0;
top: 50%;
bottom: auto;
width: 100%;
height: 118%;
max-width: none;
margin: 0;
object-fit: contain;
object-position: 50% 50%;
opacity: 1;
/* the shadow follows the cut-out's own outline, so the object reads as
standing on the plate rather than pasted onto it */
filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45));
transform: translateY(-50%);
transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .45s ease;
}
/* the live row lifts its object a little further off the plate */
.sa-w-hero[data-view="globe"] .sa-w-card.is-live .sa-w-card-img,
.sa-w-hero[data-view="globe"] .sa-w-card:hover .sa-w-card-img,
.sa-w-hero[data-view="globe"] .sa-w-card:focus-within .sa-w-card-img {
transform: translateY(-50%) scale(1.05);
filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .5));
}
.sa-w-hero[data-view="globe"] .sa-w-card.is-live .sa-w-card-media::before,
.sa-w-hero[data-view="globe"] .sa-w-card:hover .sa-w-card-media::before,
.sa-w-hero[data-view="globe"] .sa-w-card:focus-within .sa-w-card-media::before {
background-image: linear-gradient(152deg,
rgba(111, 143, 201, .42) 0%,
rgba(22, 36, 74, .70) 58%,
rgba(13, 21, 31, .78) 100%);
}
/* the edge fade belongs to a photograph filling its box; there is no box */
.sa-w-hero[data-view="globe"] .sa-w-card-media::after { display: none; }
}
/* --- the stacked grid below the split ----------------------------------- */
/* Narrow screens drop the globe and the rail and stack the five as cards, and
the script switches the section to its cards view — so these rules key off
the hero alone, not the view. Same idea at a different scale: a pane in the
upper half, the object standing on it and crossing its top edge. */
@media (max-width: 900px) {
.sa-w-hero .sa-w-card-media {
background-color: transparent;
overflow: visible;
}
.sa-w-hero .sa-w-card-media::before {
content: "";
position: absolute;
inset: 4% 12px 68% 12px;
border-radius: 12px;
background-image: linear-gradient(152deg,
rgba(93, 130, 196, .40) 0%,
rgba(30, 49, 96, .72) 55%,
rgba(16, 27, 55, .84) 100%);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09);
}
.sa-w-hero .sa-w-card-img {
position: absolute;
z-index: 1;
left: 8%;
top: 1%;
bottom: auto;
width: 84%;
height: 42%;
max-width: none;
margin: 0;
object-fit: contain;
object-position: 50% 100%;
opacity: 1;
transform: none;
filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .45));
}
/* the gradient existed to hold white type over a photograph */
.sa-w-hero .sa-w-card-media::after { display: none; }
/* The foot band puts the field over its product name on two lines with a
rule between. A stacked card has no room for that, and the two spans ran
together into one word, so here they share a line with a separator. */
.sa-w-hero .sa-w-card-top,
.sa-w-hero .sa-w-card-sub { display: inline; }
.sa-w-hero .sa-w-card-top::after { content: none; }
.sa-w-hero .sa-w-card-sub::before {
content: "\00b7";
margin: 0 .45em;
opacity: .55;
}
}
/* The rail gave its first and last object a different height so neither was
clipped by the column. The foot band has no clip and one line to stand on,
so a row where two of four are 6% taller is just an uneven row. Retired. */
/* ==========================================================================
THE RAIL — composition
Five fixes to the column's geometry. Nothing moves position or changes
content; what changes is that the five rows finally share a grid.
========================================================================== */
@media (min-width: 901px) {
/* 1 — ONE COLUMN EDGE.
The idle row used to be pushed 10px right, which moved its pane too, so
four panes started at one x and the fifth at another. The shift now
belongs to the words alone; the panes keep a single edge. */
.sa-w-hero[data-view="globe"] .sa-w-card {
transform: none;
/* 3 — ONE RHYTHM. Each row also drifted ±3.5px on its own slow cycle,
which is what made the gaps read as 28/26/26/25 and the names sit at
different heights. The travelling marker beside the column already
says which row is live; the drift only cost the grid. */
animation: none;
}
.sa-w-hero[data-view="globe"] .sa-w-card-body {
/* 2 — ONE BASELINE. Top-aligned, so every name starts on its pane's top
edge instead of floating on the middle of a row whose height depends
on how long the sentence is. */
justify-content: flex-start;
padding-top: 0;
/* 4 — SELECTED, NOT DISABLED. .66 read as greyed out; at .8 the four
quiet rows are plainly readable and the live one still leads. */
opacity: .8;
transform: translateX(10px);
transition: transform .55s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}
.sa-w-hero[data-view="globe"] .sa-w-card.is-live .sa-w-card-body,
.sa-w-hero[data-view="globe"] .sa-w-card:hover .sa-w-card-body,
.sa-w-hero[data-view="globe"] .sa-w-card:focus-within .sa-w-card-body {
opacity: 1;
transform: none;
}
/* 5 — THE ROW SAYS IT IS A LINK.
The client and an arrow appear on the live row, in space that is already
reserved under the sentence, so nothing reflows as the marker travels. */
.sa-w-hero[data-view="globe"] .sa-w-card .sa-w-card-client {
display: block;
order: 3;
margin: 9px 0 0;
font-size: clamp(10.5px, .82vw, 12px);
font-weight: 400;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgba(168, 198, 246, .92);
opacity: 0;
transform: translateY(3px);
transition: opacity .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.sa-w-hero[data-view="globe"] .sa-w-card .sa-w-card-client::after {
content: " →";
color: rgba(168, 198, 246, .72);
}
.sa-w-hero[data-view="globe"] .sa-w-card.is-live .sa-w-card-client,
.sa-w-hero[data-view="globe"] .sa-w-card:hover .sa-w-card-client,
.sa-w-hero[data-view="globe"] .sa-w-card:focus-within .sa-w-card-client {
opacity: 1;
transform: none;
}
}
/* the section keeps a clear foot under the reserved note area */
.sa-net { padding-bottom: clamp(72px, 7vw, 108px); }
/* ==========================================================================
ABOUT — the top block and the two statements
========================================================================== */
@media (min-width: 861px) {
/* the title starts on the photograph's top edge rather than floating on
the middle of it: one line across the two columns */
.sa-ab-top { align-items: start; }
.sa-ab-top-text { padding-top: 0; }
.sa-ab-h1 { margin-top: 0; }
}
/* Mission and Vision carried a glass panel each. The words are the content;
the panels only boxed them in, so they go — the two statements sit on the
section itself, held apart by space and the label above each. */
.sa-mv-card {
padding: 0;
border: 0;
border-radius: 0;
background-color: transparent !important;
background-image: none !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
@media (min-width: 861px) {
.sa-mv-grid { gap: clamp(40px, 5vw, 80px); }
}
/* the certifications and the EU funding marks share one row */
@media (min-width: 861px) {
.sa-foot-trust {
flex-wrap: nowrap;
align-items: flex-start;
gap: 14px clamp(32px, 4vw, 64px);
}
.sa-foot-trust-group { flex: 0 1 auto; min-width: 0; }
.sa-foot-trust-list { flex-wrap: nowrap; gap: 14px clamp(18px, 2vw, 30px); }
}
/* ========================================================================
THE FIRST SCREEN, AS A STATEMENT
The planet is the screen, not a panel in it. The sentence stands on the
night at the top of the sky; the earth comes out of that night below it;
and the five products stand along the foot as the objects themselves,
the live one lit.
Everything is laid out in one flex column — sentence, then whatever room
is left, then the objects — so the three bands can never run into each
other, however short the window is. The planet is the only thing taken
out of that flow, because it is the backdrop.
Sizes are clamped on BOTH axes. A wide, short window is the case that
breaks a hero sized on width alone: the type keeps growing while the
planet, measured in vh, shrinks to nothing. min(vw, vh) keeps the two in
proportion whichever way the window is squeezed.
Below 901px none of this applies — the section is still the card grid.
===================================================================== */
@media (min-width: 901px) {
/* --- the three bands -------------------------------------------------- */
.sa-w-hero { overflow: hidden; }
.sa-w-hero[data-view="globe"] .sa-w-in,
.sa-w-hero .sa-w-in {
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
/* The column used to fill the window whatever its shape, so the words
went to the top, the planet to the bottom, and the space between them
grew with the screen — a hundred pixels of sky at 1146, six hundred at
1692. It is capped and centred instead: one composition, the same
proportions at every size, and the extra height becomes margin. */
flex: 0 0 auto;
align-self: center;
box-sizing: border-box;
width: 100%;
max-width: none;
min-height: 0;
/* a definite height: a percentage here resolves against a flex parent
whose own height is indefinite, and the column quietly shrink-wraps */
height: min(88vh, 980px);
height: min(88svh, 980px);
/* The words are a capped, centred block; the planet is not. It hangs off
the screen itself, so it rises from the bottom edge at any height
instead of floating with empty space under it. */
position: static;
/* the sentence, the proof, the five things, then the one action: nothing
sits under the button to compete with it, and it gets the last word */
justify-content: flex-start;
padding: clamp(40px, 6vh, 92px) 0 clamp(8px, 1.2vh, 16px);
}
/* the split is only a wrapper in the markup; here its two children are
bands of the column in their own right */
.sa-w-hero .sa-w-split { display: contents; }
.sa-w-hero .sa-w-head { display: none; }
.sa-w-hero .sa-lede-glass { display: none; }
/* --- the planet ------------------------------------------------------- */
/* It rises from under the foot of the screen rather than sitting behind
the words. A veil strong enough to keep the sentence legible over the
lit hemisphere (measured 1.1:1 without one) would be the pane over the
earth we already took off, so the type gets clear sky instead and the
planet gets to stay bright. Its size is clamped on both axes, so a wide
short window shrinks it in proportion with the type. */
.sa-w-hero[data-view="globe"] {
/* The planet belongs to the screen, so it is measured in the screen:
its visible cap is always the same share of the height at any size.
A flatter horizon would read as a bigger world, and a quarter more
diameter does exactly that — but the surface is shaded into a bitmap
of fixed size, so a wider disc is the same picture stretched further,
and the crawl we just took out comes back. Flattening waits until the
renderer shades only the band that is actually on screen; then the
disc can grow without the bitmap having to. */
--sa-globe: min(126vh, 94vw);
}
.sa-w-hero[data-view="globe"] .sa-w-stage {
position: absolute;
left: 50%;
top: auto;
right: auto;
bottom: calc(var(--sa-globe) * -.62);
transform: translateX(-50%);
flex: 0 0 auto;
width: var(--sa-globe);
height: var(--sa-globe);
max-width: none;
z-index: 1;
}
.sa-w-hero[data-view="globe"] .sa-w-canvas { transform: none; }
/* One shelf of night along the foot, feathered at its top edge, so the
objects and their names are read off a single dark ground instead of
off whatever continent happens to be behind them. */
/* on the column, not on the section: the column is its own stacking
context, so a band painted on the section would sit over the objects
as well as under them */
.sa-w-hero[data-view="globe"] { position: relative; }
.sa-w-hero[data-view="globe"] .sa-w-in::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -220px;
height: min(620px, 64%);
background: linear-gradient(180deg,
rgba(4, 7, 14, 0) 0%, rgba(4, 7, 14, .48) 28%,
rgba(4, 7, 14, .84) 58%, rgba(4, 7, 14, .94) 82%, rgba(4, 7, 14, .96) 100%);
z-index: 2;
pointer-events: none;
}
/* --- band one: the sentence ------------------------------------------- */
.sa-w-hero[data-view="globe"] .sa-lede {
/* relative, not static: it is a band of the column now, but it still has
to out-rank the canvas, and z-index is ignored on a static box — which
is what put the planet's sky over the sentence and greyed it out */
position: relative;
inset: auto;
transform: none;
width: min(880px, 84vw);
margin: 0 auto;
text-align: center;
flex: 0 0 auto;
z-index: 4;
}
.sa-w-hero[data-view="globe"] .sa-lede .sa-hero-h1 {
/* the sentence is centred on the column, not on itself: the box has to
be the column's full width, or a shrink-to-fit box centres its lines
inside the longest line and the whole block sits off to the left */
width: 100%;
max-width: none;
margin: 0;
font-size: clamp(28px, min(5.2vw, 9.2vh), 78px);
text-shadow: 0 0 30px rgba(4, 7, 14, .97), 0 2px 10px rgba(4, 7, 14, .92);
}
.sa-w-hero[data-view="globe"] .sa-lede .sa-trust-row {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: clamp(10px, 1.4vw, 18px) clamp(18px, 2.4vw, 34px);
margin-top: clamp(12px, 2.8vh, 28px);
max-width: none;
}
.sa-w-hero[data-view="globe"] .sa-lede .sa-trust-label,
.sa-w-hero[data-view="globe"] .sa-lede .sa-trust-icon {
text-shadow: 0 0 16px rgba(4, 7, 14, .95), 0 1px 4px rgba(4, 7, 14, .9);
}
.sa-w-hero[data-view="globe"] .sa-lede .sa-hero-actions {
display: flex;
justify-content: center;
margin-top: clamp(14px, 3.2vh, 32px);
}
/* --- band two: whatever room is left, which is where the planet reads -- */
/* --- band three: the five objects ------------------------------------- */
.sa-w-hero[data-view="globe"] .sa-w-cards {
position: static;
width: 100%;
/* the rail was a full-height column; as a foot band it is only as tall
as the objects in it */
height: auto;
max-width: 1320px;
display: flex;
flex-direction: row;
justify-content: center;
/* the objects share one line to stand on; the names hang below it, in a
block that always reserves two lines */
align-items: flex-start;
flex: 0 0 auto;
/* The rail clipped and masked its own box — a mask confines everything
painted in the element, pseudo-elements included, which is what drew
the shelf below as a rectangle with two hard sides. */
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
gap: clamp(14px, 3vw, 56px);
min-height: 0;
margin: clamp(22px, 3.6vh, 52px) auto clamp(8px, 1.2vh, 18px);
padding: 0 clamp(16px, 3vw, 48px);
z-index: 4;
}
.sa-w-hero[data-view="globe"] .sa-w-card {
position: relative;
flex: 0 1 auto;
width: clamp(92px, 11vw, 182px);
height: auto;
max-height: none;
min-height: 0;
overflow: visible;
text-align: center;
/* the rail indented every row by 8px on the left; in a centred band that
indent only pushes the whole row off its own axis */
padding: 0;
margin: 4px 0;
transform: none;
animation: none;
}
.sa-w-hero[data-view="globe"] .sa-w-card-media {
display: block;
position: relative;
width: 100%;
/* the objects come down with the window rather than crowding the words */
height: clamp(34px, min(5.75vw, 9.1vh), 81px);
margin: 0 0 clamp(7px, 1.2vh, 12px);
background: none;
box-shadow: none;
overflow: visible;
}
.sa-w-hero[data-view="globe"] .sa-w-card-media::before,
.sa-w-hero[data-view="globe"] .sa-w-card-media::after { display: none; }
.sa-w-hero[data-view="globe"] .sa-w-card-img {
position: absolute;
/* The box is the whole media area and object-fit does the placing, so the
object is centred on its own column. Insets with an auto width did not
centre anything: an absolutely positioned replaced element takes its
intrinsic width from the height and then ignores `right`, so every
object sat a few pixels right of its name. */
inset: 0;
width: 100%; height: 100%;
max-width: none; max-height: none;
object-fit: contain;
object-position: center bottom;
transform: none;
opacity: .82;
filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .85)) saturate(.9) brightness(.94);
transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1), filter .5s ease;
}
.sa-w-hero[data-view="globe"] .sa-w-card-icon { display: none; }
.sa-w-hero[data-view="globe"] .sa-w-card.is-live .sa-w-card-img,
.sa-w-hero[data-view="globe"] .sa-w-card:hover .sa-w-card-img,
.sa-w-hero[data-view="globe"] .sa-w-card:focus-within .sa-w-card-img {
opacity: 1;
transform: translateY(-5px) scale(1.06);
filter: drop-shadow(0 22px 28px rgba(0, 0, 0, .9)) saturate(1) brightness(1.04);
}
.sa-w-hero[data-view="globe"] .sa-w-card-body {
position: static;
left: auto; top: auto;
width: auto; max-width: none; height: auto;
padding: 0;
display: block;
opacity: 1;
transform: none;
}
/* The rail owned both of this element's pseudo-elements — a full-height
track and a travelling 2px marker. Neither means anything in a foot
band, and the track was still carrying its old height, which is what
put a veil over the sentence. Both are retired here. */
.sa-w-hero[data-view="globe"] .sa-w-cards::before,
.sa-w-hero[data-view="globe"] .sa-w-cards::after { content: none; }
.sa-w-hero[data-view="globe"] .sa-w-card-name {
display: block;
font-size: clamp(10.5px, .85vw, 13.5px);
font-weight: 500;
line-height: 1.25;
/* two lines are reserved, so a name that wraps on a narrow rail does not
lift its object off the line the other four stand on */
min-height: 0;
color: rgba(255, 255, 255, .9);
text-shadow: 0 0 14px rgba(4, 7, 14, .95), 0 1px 4px rgba(4, 7, 14, .9);
transition: color .45s ease;
}
/* two lines with a rule between: what the field is, then what we call it */
.sa-w-hero[data-view="globe"] .sa-w-card-top { display: block; }
.sa-w-hero[data-view="globe"] .sa-w-card-sub {
display: block;
margin-top: clamp(4px, .7vh, 7px);
font-weight: 400;
color: rgba(255, 255, 255, .62);
transition: color .45s ease;
}
/* the rule belongs between the two lines, not under them */
.sa-w-hero[data-view="globe"] .sa-w-card-top::after {
content: "";
display: block;
height: 1px;
margin: clamp(5px, .9vh, 8px) auto 0;
width: 74%;
background: rgba(168, 198, 246, .34);
transition: background .45s ease;
}
.sa-w-hero[data-view="globe"] .sa-w-card-name::after { content: none; }
.sa-w-hero[data-view="globe"] .sa-w-card.is-live .sa-w-card-top::after,
.sa-w-hero[data-view="globe"] .sa-w-card:hover .sa-w-card-top::after,
.sa-w-hero[data-view="globe"] .sa-w-card:focus-within .sa-w-card-top::after {
background: rgba(168, 198, 246, .9);
}
.sa-w-hero[data-view="globe"] .sa-w-card.is-live .sa-w-card-sub,
.sa-w-hero[data-view="globe"] .sa-w-card:hover .sa-w-card-sub,
.sa-w-hero[data-view="globe"] .sa-w-card:focus-within .sa-w-card-sub { color: rgba(255, 255, 255, .92); }
.sa-w-hero[data-view="globe"] .sa-w-card.is-live .sa-w-card-name,
.sa-w-hero[data-view="globe"] .sa-w-card:hover .sa-w-card-name,
.sa-w-hero[data-view="globe"] .sa-w-card:focus-within .sa-w-card-name { color: #fff; }
.sa-w-hero[data-view="globe"] .sa-w-card.is-live .sa-w-card-name::after,
.sa-w-hero[data-view="globe"] .sa-w-card:hover .sa-w-card-name::after,
.sa-w-hero[data-view="globe"] .sa-w-card:focus-within .sa-w-card-name::after {
background: rgba(168, 198, 246, .9);
}
/* the sentence and the client list belong to the rail, not to a foot index */
.sa-w-hero[data-view="globe"] .sa-w-card .sa-w-card-title,
.sa-w-hero[data-view="globe"] .sa-w-card .sa-w-card-client,
.sa-w-hero[data-view="globe"] .sa-w-card .sa-w-card-keys { display: none; }
/* the whole tile is the link to its case study; the label it carried is
kept for a screen reader rather than thrown away */
.sa-w-hero[data-view="globe"] .sa-w-card-go {
display: block;
position: absolute;
inset: -10px -6px -8px;
margin: 0;
padding: 0;
border: 0;
font-size: 0;
color: transparent;
z-index: 3;
}
.sa-w-hero[data-view="globe"] .sa-w-card-go svg { display: none; }
}
/* A window under about 620px tall has no room for three bands at full size:
the badges go, and what is left closes up. */
@media (min-width: 901px) and (max-height: 620px) {
.sa-w-hero[data-view="globe"] .sa-lede .sa-trust-row { display: none; }
.sa-w-hero .sa-w-in { padding-top: clamp(44px, 7vh, 72px); }
}
/* ========================================================================
ABOUT — THE OPENING BAND IS THE SCREEN
The title and the photograph are the first thing, so they get the whole
window rather than three quarters of it, with the next heading starting
under the fold where it belongs. The measurements come from svh, so an
iPad or a phone with a retracting browser bar does not get a section
taller than the glass.
===================================================================== */
@media (min-width: 861px) {
.sa-ab-hero {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
min-height: 100svh;
padding-top: clamp(104px, 11vh, 150px);
padding-bottom: clamp(40px, 6vh, 90px);
}
/* the photograph fills the room the band now has, without stretching */
.sa-ab-top { align-items: start; }
.sa-ab-photo img,
.sa-ab-photo { max-height: min(62vh, 620px); }
.sa-ab-photo img { width: 100%; height: 100%; object-fit: cover; }
}
@media (max-width: 860px) {
/* on a phone the band is as tall as its content; a forced screenful there
only pushes the text off the bottom */
.sa-ab-hero { min-height: 0; }
}
/* The headline sat a step back from white because it used to lie on a pane
of glass over the planet. There is no pane now and it stands on clear
sky, so it comes up to full strength — at .8 it read as grey. */
@media (min-width: 901px) {
.sa-w-hero[data-view="globe"] .sa-lede .sa-hero-h1 { opacity: 1; }
}
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
.sa-w-hero[data-view="globe"] .sa-lede .sa-hero-h1 {
animation-name: sa-lede-in;
}
}
/* Mission and Vision belong to the opening screen, not to a section under
it: the page now says who we are, shows the building, and states what
the company is for, all in one view. The block was a section of its own
and carries a section's padding and background, which it does not need
inside the band. */
.sa-mv-inline {
padding: 0;
background: none;
background-image: none;
}
@media (min-width: 861px) {
.sa-mv-inline { margin-top: clamp(26px, 4.4vh, 62px); }
/* the photograph gives up the height the two statements need */
.sa-ab-photo img,
.sa-ab-photo { max-height: min(44vh, 440px); }
.sa-ab-hero { padding-top: clamp(96px, 10vh, 140px); padding-bottom: clamp(32px, 5vh, 72px); }
.sa-mv-inline .sa-ab-h2 { font-size: clamp(22px, 2.1vw, 30px); }
/* the two statements sit on the same two columns as the words and the
photograph above them, so the band reads as one grid rather than two */
.sa-mv-inline .sa-mv-grid {
margin-top: clamp(14px, 2.2vh, 26px);
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: clamp(28px, 4vw, 60px);
}
}
@media (max-width: 860px) {
.sa-mv-inline { margin-top: 36px; }
}
/* ========================================================================
TWO PILLARS — ONE SCREEN
The section is a single idea: two capabilities and the overlap between
them. It was a fixed ~900px tall whatever the window, so on a laptop it
spilled over the fold and the diagram — the whole point — was cut off.
It is a flex column now, centred, one screenful, with every measurement
clamped on both axes so a short window shrinks the type and the diagram
together rather than pushing them out of the frame.
===================================================================== */
@media (min-width: 901px) {
.sa-pillars {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
min-height: 100svh;
padding: clamp(84px, 11vh, 132px) 0 clamp(36px, 6vh, 84px);
}
.sa-pillars .sa-pillars-in { width: min(1180px, calc(100% - 48px)); }
.sa-pillars .sa-pillars-eyebrow { margin-bottom: clamp(8px, 1.4vh, 14px); }
.sa-pillars .sa-pillars-h2 {
font-size: clamp(26px, min(3.6vw, 6.2vh), 50px);
}
.sa-pillars .sa-pillars-sub {
margin-top: clamp(10px, 1.8vh, 18px);
font-size: clamp(13px, min(1.15vw, 1.95vh), 17px);
line-height: 1.55;
}
.sa-pillars .sa-pillars-grid {
margin-top: clamp(16px, 3vh, 44px);
gap: clamp(20px, 3vw, 56px);
}
/* the diagram keeps its own proportions; only its size is capped, so the
circles and their labels stay where they were drawn */
.sa-pillars .sa-pillars-venn {
min-height: 0;
width: 100%;
max-width: clamp(160px, min(20vw, 31vh), 290px);
margin-left: auto;
margin-right: auto;
}
.sa-pillars .sa-pillars-name {
margin-bottom: clamp(7px, 1.2vh, 14px);
font-size: clamp(17px, min(1.7vw, 2.9vh), 24px);
}
.sa-pillars .sa-pillars-list {
gap: clamp(5px, .9vh, 9px);
font-size: clamp(12.5px, min(1.05vw, 1.8vh), 14.5px);
}
.sa-pillars .sa-pillars-foot {
margin-top: clamp(14px, 2.6vh, 42px);
font-size: clamp(12.5px, min(1.05vw, 1.8vh), 14.5px);
}
}
@media (max-width: 900px) {
/* stacked, so it is as tall as it needs to be */
.sa-pillars { min-height: 0; }
}
/* under about 600px of window the section closes up a further step rather
than letting the closing line slip under the fold */
@media (min-width: 901px) and (max-height: 620px) {
.sa-pillars { padding: clamp(68px, 9vh, 96px) 0 clamp(18px, 3vh, 40px); }
.sa-pillars .sa-pillars-sub { margin-top: 8px; line-height: 1.45; }
.sa-pillars .sa-pillars-grid { margin-top: 10px; }
.sa-pillars .sa-pillars-foot { margin-top: 10px; }
}
/* the row stands closer to the foot of the screen */
@media (min-width: 901px) {
.sa-w-hero[data-view="globe"] { padding-bottom: clamp(16px, 2.4vh, 32px); }
}
/* ========================================================================
THE PAGE IS A STACK, NOT A STRIP
Nothing scrolls past anything. Each section sticks where it is and the
next one rides up over it, so the page reads as sheets being laid down
rather than as one long ribbon. Every section already carries an opaque
ground, which is what makes a cover read as a cover.
A section shorter than the window sticks at the top. One taller than the
window has to be allowed to scroll until its foot is on the sill first,
or its lower half would never be reachable — so it sticks at
`100vh - its own height`, a negative offset the script measures and
writes per section. The stacking order is written there too, because a
sheet must cover the one before it and no other.
===================================================================== */
@media (min-width: 901px) {
.main-wrapper.sa-stack > section,
.main-wrapper.sa-stack > footer {
position: sticky;
top: var(--sa-stick, 0px);
}
/* the tail: the last section and the foot under it scroll out together */
.main-wrapper.sa-stack > .sa-flow { position: relative; top: auto; }
/* What a covered sheet sinks into. Without it the page's own white shows
through a sheet that is fading, and a sheet on its way back would read
as washing out rather than as going away. */
.main-wrapper.sa-stack { background-color: #04070E; }
/* The script writes --sa-recede from the scroll and the sheet below reads
it as distance: it sinks under a veil of the page's own dark, so what
is left of it reads as being further away. It is a veil and not the
sheet's own opacity because a sheet made transparent stops hiding the
sheets under it — the hero's headline came through two sections lower
down the page. Nothing is animated here: a transition would put the
sheet a beat behind the finger, and it is meant to move with it. */
.main-wrapper.sa-stack > section > .sa-veil {
position: absolute;
inset: 0;
z-index: 60;
pointer-events: none;
background-color: var(--sa-veil-ink, #050A16);
opacity: calc(var(--sa-recede, 0) * .62);
will-change: opacity;
}
}
/* the one action, now the last thing in the column and sitting on the
horizon: it needs its own plane, or the planet paints over it */
@media (min-width: 901px) {
.sa-w-hero[data-view="globe"] .sa-hero-actions {
position: relative;
z-index: 6;
flex: 0 0 auto;
/* room between the solutions and the action, so the button sits down
on the planet's crown rather than up against the labels */
margin: clamp(16px, 3vh, 30px) auto 0;
display: flex;
justify-content: center;
}
.sa-w-hero[data-view="globe"] .sa-hero-cta {
box-shadow: 0 18px 40px rgba(4, 7, 14, .55), 0 4px 12px rgba(4, 7, 14, .4);
}
}
/* On a narrow screen the column is one long stack, so a button placed after
the five solutions falls a thousand pixels below the fold. There the old
order stands: the sentence, the action, then the solutions. */
@media (max-width: 900px) {
.sa-w-hero .sa-w-in {
display: flex;
flex-direction: column;
}
.sa-w-hero .sa-lede { order: 1; }
.sa-w-hero .sa-hero-actions { order: 2; margin-top: clamp(14px, 2.4vh, 24px); }
.sa-w-hero .sa-w-head { order: 3; }
.sa-w-hero .sa-w-split { order: 4; }
}
/* a thin white edge around the one action, so it reads as a control rather
than as a painted shape — asked for expressly, and the only stroke on
the page */
.sa-hero-cta {
border: 1px solid rgba(255, 255, 255, .82);
}
.sa-hero-cta:hover,
.sa-hero-cta:focus-visible { border-color: #FFFFFF; }
/* ==========================================================================
THE ONE ACTION, AS A SENTENCE
A filled button on the horizon competed with the planet behind it: a
shape with its own ground, its own edge and its own shadow, sitting in
front of the one picture the page is built around. The words are the
whole control now — the rule under them is what says it can be clicked,
and it is the only line on the first screen. The shadow is not decoration:
it is what keeps white type legible where the bright limb passes under it.
========================================================================== */
.sa-hero-cta.is-text {
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: #FFFFFF;
font-size: clamp(14px, 1.05vw, 17px);
font-weight: 500;
line-height: 1.4;
letter-spacing: 0;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgba(255, 255, 255, .45);
text-underline-offset: 7px;
/* three passes: a tight one so the rule keeps its own edge where the
bright limb runs under it, and two wider ones that darken the sky
around the words without reading as a box */
text-shadow: 0 0 6px rgba(4, 7, 14, .98), 0 0 16px rgba(4, 7, 14, .92),
0 0 30px rgba(4, 7, 14, .8);
transition: text-decoration-color .3s ease, color .3s ease;
}
.sa-hero-cta.is-text svg {
flex: none;
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.sa-hero-cta.is-text:hover,
.sa-hero-cta.is-text:focus-visible {
background: none;
color: #FFFFFF;
text-decoration-color: #FFFFFF;
transform: none;
}
.sa-hero-cta.is-text:hover svg,
.sa-hero-cta.is-text:focus-visible svg { transform: translateX(4px); }
.sa-hero-cta.is-text:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 6px; }
/* the two rules written for the button have nothing left to sit on */
@media (min-width: 901px) {
.sa-w-hero[data-view="globe"] .sa-hero-cta.is-text { box-shadow: none; }
}
.sa-w-hero .sa-lede .sa-hero-cta.is-text,
.sa-w-hero .sa-lede .sa-hero-cta.is-text:hover,
.sa-w-hero .sa-lede .sa-hero-cta.is-text:focus-visible { background-color: transparent; }
/* ==========================================================================
THE ONE ACTION, AS A PILL WHOSE EDGE FOLLOWS THE HAND
A navy pill with a 1px rim of Primary Supporting, on which a soft light
in the lighter brand blues sits on whichever side the cursor is — it
follows the pointer around the page, and a faint glow leans the same
way. Asked for from a reference. Without a pointer (a phone) or without
the script, the light simply keeps circling; with reduced motion it stands
still. Colours: #2F579A rim, #4E72B7 → #6F8FC9 → #E6ECF7 light.
========================================================================== */
.sa-hero-cta.is-orbit {
--sa-orbit-rim: 1px;
--sa-orbit-a: 300deg; /* where the light is, from 3 o'clock, clockwise */
--sa-orbit-x: .5; /* cos / sin of the same, for the glow to lean */
--sa-orbit-y: -.87;
position: relative;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 20px 34px 20px 36px;
border: 0;
border-radius: 999px;
/* what shows through the rim where the light is not: the face's own navy,
so at rest there is no visible edge — only the light. On hover the rim
comes up in Primary Supporting. */
background: #101B37;
color: #FFFFFF;
font-size: clamp(14px, 1.05vw, 17px);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0;
text-decoration: none;
text-shadow: none;
box-shadow:
0 18px 40px rgba(4, 7, 14, .5),
calc(var(--sa-orbit-x) * 10px) calc(var(--sa-orbit-y) * 10px) 34px rgba(111, 143, 201, .30);
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
/* the light: one large square spun behind the face, carrying a single soft
sweep centred on 3 o'clock, so a rotation of --sa-orbit-a puts it where
the hand is */
.sa-hero-cta.is-orbit::before {
content: "";
position: absolute;
z-index: -2;
left: 50%; top: 50%;
width: 260%;
aspect-ratio: 1 / 1;
margin: -130% 0 0 -130%;
background: conic-gradient(from 0deg,
transparent 0deg,
transparent 8deg,
rgba(78, 114, 183, .35) 30deg,
#4E72B7 52deg,
#6F8FC9 72deg,
#CFD9EE 86deg,
#E6ECF7 90deg,
#CFD9EE 94deg,
#6F8FC9 108deg,
#4E72B7 128deg,
rgba(78, 114, 183, .35) 150deg,
transparent 172deg,
transparent 360deg);
transform: rotate(var(--sa-orbit-a));
animation: sa-orbit 3.6s linear infinite;
will-change: transform;
}
/* once the script is steering, the circling stops and the hand leads */
.sa-hero-cta.is-orbit.is-led::before { animation: none; }
/* the face, inset by the rim so the light shows only at the edge */
.sa-hero-cta.is-orbit::after {
content: "";
position: absolute;
z-index: -1;
inset: var(--sa-orbit-rim);
border-radius: inherit;
background-color: #101B37; /* Primary, flat */
}
.sa-hero-cta.is-orbit svg {
flex: none;
transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.sa-hero-cta.is-orbit:hover,
.sa-hero-cta.is-orbit:focus-visible {
color: #FFFFFF;
background: #2F579A;
transform: translateY(-1px);
}
.sa-hero-cta.is-orbit:hover svg,
.sa-hero-cta.is-orbit:focus-visible svg { transform: translateX(4px); }
.sa-hero-cta.is-orbit:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 5px; }
@keyframes sa-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* the earlier rules for the flat button have nothing to add here */
.sa-w-hero .sa-lede .sa-hero-cta.is-orbit,
.sa-w-hero .sa-lede .sa-hero-cta.is-orbit:hover,
.sa-w-hero .sa-lede .sa-hero-cta.is-orbit:focus-visible { background-color: #101B37; }
.sa-w-hero .sa-lede .sa-hero-cta.is-orbit:hover,
.sa-w-hero .sa-lede .sa-hero-cta.is-orbit:focus-visible { background-color: #2F579A; }
@media (prefers-reduced-motion: reduce) {
.sa-hero-cta.is-orbit::before { animation: none; }
.sa-hero-cta.is-orbit { transition: none; }
}
/* ===================================================== book a call
Sits in the left column of the contact band, on the night ground, so it
takes the same paper-on-navy look as the form's submit next to it and
the sentence above it reads like the questions. Opens the Microsoft
Bookings page for the shared "Solvesall – intro call" calendar.
================================================================= */
.sa-cta-book {
margin-top: 24px;
display: flex;
flex-direction: column;
row-gap: 12px;
}
.sa-cta-book-text { margin: 0; }
.sa-cta-book-btn {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
padding: 16px 32px;
background-color: var(--sa-paper, #FFFFFF);
color: var(--sa-navy);
font-family: var(--sa-font);
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: background-color .2s ease, color .2s ease;
}
.sa-cta-book-btn:hover,
.sa-cta-book-btn:focus-visible {
background-color: var(--sa-white);
color: var(--sa-ink);
}