/* ==========================================================================
Solvesall — 2026 redesign: navigation + hero
Ported from the Webflow reference (Solvesall's Stellar Site).
All classes are namespaced `sa-` so nothing here can collide with the
existing Webflow-generated stylesheet.
========================================================================== */
:root {
/* Solvesall brand palette — no colour outside this set */
--sa-navy: #101B37; /* Primary */
--sa-ink: #0D151F; /* Primary Deep */
--sa-elevated: #16244A; /* Dark-theme raised surface */
--sa-support: #2F579A; /* Primary Supporting */
--sa-blue: #4E72B7; /* Accent Primary */
--sa-blue-lift: #6F8FC9; /* Accent Light */
--sa-surface-2: #E6ECF7; /* Surface Secondary */
--sa-surface-3: #CFD9EE; /* Surface Panel */
--sa-white: #FFFFFF; /* Surface Base */
/* Resting surfaces, both from the brand palette: white for the page and
Surface Secondary one step down, so the quiet bands still separate from
the white sheet without adding a colour the brand does not own. */
--sa-paper: #FFFFFF; /* the quiet band: logos, soft landings */
--sa-paper-2: #E6ECF7; /* one step down: the closing call to action */
/* Body copy. The brand sets headings in Primary and body in "Primary or
dark gray"; the page had drifted to four different blue-greys inside a
few per cent of each other, which is most of why every light section
read as the same wash of blue. One grey, near-neutral, so the blues
around it are the only blue in view. */
--sa-body: #3A3F49; /* body copy on light surfaces */
--sa-body-2: #5A6070; /* captions and secondary lines */
/* Extended signal colours (brand, September 2026) — Bright tier, for marks
on navy. Referenced by role, never by hue. */
--signal-connected: #6E9DF4; /* network: scale, coverage, connected assets */
--signal-optimised: #33BC69; /* gain: savings, distance and time removed */
--signal-attention: #FACE2A; /* intelligence: AI, classification, documents */
--signal-foundation: #6F8FC9; /* track record: the company itself */
--signal-critical: #F85950; /* reserved: a genuine negative — used here on request */
/* Aptos is the brand face; Inter is the web fallback */
--sa-font: "Aptos", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
--sa-nav-h: 40px; /* logo height, drives nav height */
--sa-logo-scale: .92; /* every ticker logo, scaled together */
--sa-ticker-gap: 84px; /* whitespace between logos — equal for every pair */
--sa-ticker-speed: 93s; /* one full loop ≈ 30px per second */
}
/* every component this stylesheet owns speaks in the brand face */
.sa-nav, .sa-nav *,
.sa-hero, .sa-hero *,
.sa-proj, .sa-proj *,
.sa-exp-section, .sa-exp-section *,
.sa-cta, .sa-cta * { font-family: var(--sa-font); }
/* --------------------------------------------------------------- navigation */
.sa-nav {
position: fixed;
isolation: isolate;
top: 16px;
left: 50%;
transform: translateX(-50%);
z-index: 100;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
gap: 24px;
width: auto;
max-width: calc(100% - 24px);
padding: 8px;
border: 0;
border-radius: 999px;
/* Liquid glass: real backdrop blur, a white top highlight that falls away,
and a dark tint underneath. The tint is what keeps the white labels above
4.5:1 when the bar floats over the light projects page. */
background-color: rgba(16, 27, 55, .66);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .13) 0%,
rgba(255, 255, 255, .055) 44%,
rgba(255, 255, 255, .012) 100%);
-webkit-backdrop-filter: blur(28px) saturate(175%);
backdrop-filter: blur(28px) saturate(175%);
box-shadow: 0 14px 38px -14px rgba(6, 10, 19, .62);
}
/* the sheen that makes glass read as glass, not as a painted slab */
.sa-nav::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-image:
radial-gradient(120% 160% at 18% -40%, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, 0) 58%),
radial-gradient(90% 140% at 92% 140%, rgba(111, 143, 201, .20) 0%, rgba(111, 143, 201, 0) 62%);
pointer-events: none;
}
.sa-nav-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.sa-nav-logo-img {
height: var(--sa-nav-h);
width: auto;
border-radius: 999px;
display: block;
}
.sa-nav-links {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.sa-nav-links-a {
flex-shrink: 0;
padding: 8px 10px;
border-radius: 999px;
color: var(--sa-white);
font-size: 14px;
font-weight: 400;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: background-color .2s ease, color .2s ease;
}
.sa-nav-links-a:hover,
.sa-nav-links-a:focus-visible { background-color: #ffffff26; color: var(--sa-white); }
.sa-nav-cta {
display: inline-flex;
align-items: center;
flex-shrink: 0;
column-gap: 8px;
padding: 12px 22px;
border-radius: 999px;
background-image: linear-gradient(135deg, var(--sa-blue) 0%, var(--sa-blue-lift) 100%);
color: var(--sa-white);
font-size: 14px;
font-weight: 600;
letter-spacing: .2px;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 5px 20px -1px #4e72b759;
transition: transform .2s ease, box-shadow .2s ease;
}
.sa-nav-cta:hover,
.sa-nav-cta:focus-visible {
color: var(--sa-white);
transform: translateY(-1px);
box-shadow: 0 12px 32px #4e72b773;
}
/* hamburger — hidden on desktop, shown below 992px */
.sa-nav-toggle {
display: none;
width: 40px; height: 40px;
padding: 0;
border: 0;
border-radius: 999px;
background: #ffffff1a;
cursor: pointer;
align-items: center;
justify-content: center;
}
.sa-nav-toggle span,
.sa-nav-toggle span::before,
.sa-nav-toggle span::after {
content: "";
display: block;
width: 16px; height: 1.5px;
background: var(--sa-white);
border-radius: 2px;
transition: transform .25s ease, opacity .2s ease;
}
.sa-nav-toggle span { position: relative; }
.sa-nav-toggle span::before { position: absolute; top: -5px; }
.sa-nav-toggle span::after { position: absolute; top: 5px; }
.sa-nav[data-open="true"] .sa-nav-toggle span { background: transparent; }
.sa-nav[data-open="true"] .sa-nav-toggle span::before { transform: translateY(5px) rotate(45deg); }
.sa-nav[data-open="true"] .sa-nav-toggle span::after { transform: translateY(-5px) rotate(-45deg); }
/* --------------------------------------------------------------------- hero */
.sa-hero {
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 100vh;
/* the nav floats over the top and the logo band is pinned to the foot, so
the box is padded by both: "centred" then means centred in the space
between them, at any window height */
padding: clamp(92px, 10vh, 124px) 0 clamp(110px, 13vh, 146px);
/* the photograph is a bright white-studio shot, so the section is built to
meet it: a pale field that carries the same daylight, deepening only
slightly to the left where the words sit */
/* one honest step instead of four stops inside five per cent of each
other, which no eye can see and which left the whole field as haze */
background-color: var(--sa-white);
background-image: linear-gradient(103deg, var(--sa-surface-2) 0%, var(--sa-white) 58%);
text-align: left;
overflow: hidden;
}
/* The picture is not cropped and not stretched. It keeps its own proportions,
stands at its full width on the right of the frame, and only its left edge
is feathered into a field painted in the same daylight — so the whole
photograph is there, with no visible border and no zoom. */
.sa-hero-media {
position: absolute;
inset: 0;
z-index: 0;
background-image: url("../images/sa-hero.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
/* The box is given the photograph's own proportions, so nothing inside it is
ever squeezed or cropped, and it stands to the right, clear of the logo
band. Because the box is exactly the picture, the feather can be measured
against the picture's own left edge rather than the window's. */
.sa-hero-media {
inset: auto 0 104px auto;
/* as wide as the window height allows, but never more than two thirds of
the frame — so on a squarer laptop screen the words keep their ground */
width: min(66%, calc((100vh - 104px) * 1.339));
height: auto;
aspect-ratio: 1200 / 896;
/* left edge dissolves into the field; the foot, which is only studio floor,
is taken off so the box has no bottom edge either */
-webkit-mask-image:
linear-gradient(to left, #000 0%, #000 46%, rgba(0,0,0,.62) 64%, rgba(0,0,0,.22) 80%, transparent 96%),
linear-gradient(to top, transparent 0%, #000 8%, #000 100%);
mask-image:
linear-gradient(to left, #000 0%, #000 46%, rgba(0,0,0,.62) 64%, rgba(0,0,0,.22) 80%, transparent 96%),
linear-gradient(to top, transparent 0%, #000 8%, #000 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
/* The ground under the words: the section's own light, gathered where the
copy sits and gone before anything worth looking at. */
.sa-hero-overlay {
position: absolute;
inset: 0;
z-index: 1;
background-image:
linear-gradient(90deg,
rgba(240, 243, 248, .92) 0%,
rgba(242, 245, 249, .74) 16%,
rgba(245, 247, 251, .38) 26%,
rgba(248, 250, 253, .10) 34%,
rgba(255, 255, 255, 0) 42%),
linear-gradient(180deg,
rgba(237, 240, 246, .40) 0%,
rgba(242, 245, 249, .10) 12%,
rgba(247, 249, 252, 0) 26%),
radial-gradient(44% 26% at 22% 40%,
rgba(242, 245, 249, .94) 0%,
rgba(244, 247, 250, .82) 46%,
rgba(247, 249, 252, .42) 74%,
rgba(255, 255, 255, 0) 100%);
pointer-events: none;
}
.sa-hero-content {
position: relative;
z-index: 10;
/* the same measure the rest of the page uses, so the headline starts on the
same left edge as every heading below it */
width: min(1340px, calc(100% - 56px));
max-width: none;
margin: 0 auto;
padding: 0;
text-align: left;
}
/* a short line above the headline, in the supporting blue — the brand's own
sentence, so the block opens with a thought rather than a claim */
.sa-hero-kicker {
margin: 0 0 18px;
font-size: 15px;
font-weight: 600;
line-height: 1.4;
color: var(--sa-support);
}
/* the actions: one filled, one plain — the page's single primary action */
.sa-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 34px 0 0; }
.sa-hero-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 24px;
border-radius: 999px;
background-color: var(--sa-navy);
color: var(--sa-white);
font-size: 15px;
font-weight: 600;
line-height: 1;
text-decoration: none;
transition: background-color .2s ease, transform .2s ease;
}
.sa-hero-cta:hover { background-color: var(--sa-support); transform: translateY(-1px); }
.sa-hero-cta svg { display: block; }
.sa-hero-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--sa-navy);
font-size: 15px;
font-weight: 600;
text-decoration: none;
}
.sa-hero-link:hover { color: var(--sa-support); }
.sa-hero-h1 {
margin: 0 0 24px;
color: var(--sa-navy);
font-size: 70px;
font-weight: 800;
line-height: 1.08;
letter-spacing: -1px;
}
.sa-hero-p {
max-width: 540px;
margin-bottom: 40px;
color: var(--sa-body);
font-size: 18px;
font-weight: 300;
line-height: 1.7;
}
/* ------------------------------------------------------------- trust badges */
.sa-trust-row {
display: flex;
flex-flow: row wrap;
align-items: center;
gap: 14px 32px;
/* they stay on the field rather than running out onto the photograph */
max-width: 430px;
margin: 30px 0 0;
}
.sa-trust-item { display: flex; align-items: center; gap: 10px; }
.sa-trust-icon {
flex: none;
width: 22px; height: 22px;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.sa-icon-shield { background-image: url("data:image/svg+xml;utf8,"); }
.sa-icon-clock { background-image: url("data:image/svg+xml;utf8,"); }
.sa-icon-eu { background-image: url("data:image/svg+xml;utf8,"); }
.sa-trust-label {
margin: 0;
color: var(--sa-body);
font-size: 14px;
font-weight: 300;
line-height: 1.4;
letter-spacing: .2px;
white-space: nowrap;
}
/* ------------------------------------------------------- partner logo ticker */
.sa-hero-ticker {
position: absolute;
bottom: 0; left: 0; right: 0;
z-index: 10;
min-height: 94px;
display: flex;
align-items: center;
padding: 20px 0;
background-color: var(--sa-white);
overflow: hidden;
}
.sa-hero-ticker-track {
display: flex;
flex-wrap: nowrap;
align-items: center; /* every logo centres on one line, whatever its shape */
flex-shrink: 0; /* the ticker is a flex box — without this the track is
squeezed to the viewport and the -50% loop mis-lands */
width: max-content;
white-space: nowrap;
will-change: transform;
animation: sa-marquee var(--sa-ticker-speed) linear infinite;
}
.sa-hero-ticker:hover .sa-hero-ticker-track { animation-play-state: paused; }
/* The loop travels exactly one set width, in pixels, whatever the viewport.
The old -50% assumed the track was the set twice, which only fills a screen
narrower than one half of it: on a wide monitor the second copy ran out and
left white space at the right. sa-hero.js clones the set until the track is
at least a screen wider than one set, and publishes that set width here. */
@keyframes sa-marquee {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(calc(-1 * var(--sa-ticker-set, 50%)), 0, 0); }
}
.sa-hero-ticker-item {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
margin-right: var(--sa-ticker-gap);
}
.sa-hero-ticker-item img {
height: auto;
width: auto; /* overridden per logo below */
max-width: 100%;
object-fit: contain;
opacity: .9;
transition: opacity .35s ease;
}
.sa-hero-ticker-item img:hover { opacity: 1; }
/* Per-logo optical sizing. Each logo was rasterised, trimmed to its actual
ink, and scaled so every mark carries the same visual weight — measured,
not eyeballed. Widths are on the element; height follows automatically. */
.sa-hero-ticker-track img[alt="Adria Dom"] { width: calc(166px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="SIJ"] { width: calc(160px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="TAB"] { width: calc(93px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="Robeta"] { width: calc(160px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="Adria Mobil"] { width: calc(160px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="Garmin"] { width: calc(135px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="Concorde"] { width: calc(94px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="Reich"] { width: calc(98px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="Pošta Slovenije"] { width: calc(160px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="Böckmann"] { width: calc(79px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="Danfoss"] { width: calc(117px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="Banka Slovenije"] { width: calc(160px * var(--sa-logo-scale)); }
.sa-hero-ticker-track img[alt="GoOpti"] { width: calc(122px * var(--sa-logo-scale)); }
/* ---------------------------------------------------------------- responsive */
@media screen and (max-width: 991px) {
/* below desktop the pill becomes a full-width bar so the dropdown and the
toggle sit inside it instead of hanging off the right edge */
.sa-nav {
left: 12px;
right: 12px;
width: auto;
max-width: none;
transform: none;
gap: 12px;
padding: 8px 8px 8px 12px;
}
.sa-nav-toggle { display: inline-flex; }
.sa-nav-links {
position: absolute;
top: calc(100% + 10px);
left: 0; right: 0;
flex-direction: column;
align-items: stretch;
gap: 2px;
padding: 10px;
border: 0;
border-radius: 24px;
background-color: rgba(16, 27, 55, .88);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 46%, rgba(255, 255, 255, .015) 100%);
-webkit-backdrop-filter: blur(28px) saturate(175%);
backdrop-filter: blur(28px) saturate(175%);
box-shadow: 0 16px 40px #101b3773;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.sa-nav[data-open="true"] .sa-nav-links { opacity: 1; visibility: visible; transform: none; }
.sa-nav-links-a { padding: 12px 14px; border-radius: 14px; font-size: 15px; }
.sa-hero-h1 { font-size: 48px; }
/* Narrow enough that there is no room beside the words: the photograph
moves under them instead of next to them, and the light is laid over the
top of the frame rather than the left of it. */
.sa-hero-media {
/* the whole picture, still at its own proportions, laid across the foot
of the frame with its sky dissolving up into the field */
inset: auto 0 104px 0;
width: auto;
height: auto;
aspect-ratio: 1200 / 896;
-webkit-mask-image: linear-gradient(to bottom,
transparent 0%, rgba(0,0,0,.30) 13%, #000 32%, #000 100%);
mask-image: linear-gradient(to bottom,
transparent 0%, rgba(0,0,0,.30) 13%, #000 32%, #000 100%);
-webkit-mask-composite: source-over;
mask-composite: add;
}
.sa-hero-overlay {
background-image: linear-gradient(180deg,
rgba(230, 238, 250, .97) 0%,
rgba(232, 240, 251, .92) 26%,
rgba(238, 244, 252, .54) 41%,
rgba(246, 250, 254, .14) 53%,
rgba(255, 255, 255, 0) 64%);
}
.sa-hero { align-items: flex-start; }
.sa-hero-content { padding-top: 132px; }
.sa-trust-row { max-width: none; }
}
@media screen and (min-width: 768px) and (max-width: 1300px) {
/* between a laptop and a phone the headline and the picture would meet
over the ship: the type steps down one size and the picture gives up a
little of the frame, and the words keep clear ground */
.sa-hero-h1 { font-size: clamp(44px, 4.6vw, 60px); }
.sa-hero-media { width: min(60%, calc((100vh - 104px) * 1.339)); }
}
@media screen and (min-width: 768px) and (max-width: 1100px) {
/* one line of badges no longer fits beside the picture: they take two */
.sa-trust-row { max-width: 440px; }
.sa-hero-overlay {
background-image:
linear-gradient(90deg,
rgba(228, 236, 249, .92) 0%,
rgba(231, 239, 250, .80) 22%,
rgba(236, 243, 252, .50) 36%,
rgba(243, 248, 253, .18) 48%,
rgba(255, 255, 255, 0) 60%),
linear-gradient(180deg,
rgba(226, 235, 248, .40) 0%,
rgba(234, 241, 251, .10) 12%,
rgba(240, 245, 252, 0) 26%),
radial-gradient(48% 32% at 24% 44%,
rgba(232, 239, 251, .95) 0%,
rgba(235, 242, 252, .84) 48%,
rgba(241, 246, 253, .46) 76%,
rgba(255, 255, 255, 0) 100%);
}
}
@media screen and (max-width: 767px) {
.sa-nav { top: 10px; gap: 8px; padding: 6px 6px 6px 10px; }
.sa-nav-cta { padding: 10px 16px; font-size: 13px; }
.sa-hero-content { padding: 112px 24px 180px; }
.sa-hero-h1 { font-size: 36px; letter-spacing: -.5px; }
.sa-hero-p { font-size: 16px; }
.sa-trust-row { gap: 16px 20px; margin: 32px 0; }
.sa-hero-ticker { min-height: 104px; padding: 20px 0; }
.sa-hero-ticker-item { margin-right: 48px; }
.sa-hero-ticker-item img { transform: scale(.78); transform-origin: center; }
}
/* respect the reader's motion preference */
@media (prefers-reduced-motion: reduce) {
.sa-hero-ticker-track { animation: none; }
.sa-hero-video { display: none; }
.sa-nav-cta, .sa-nav-links-a { transition: none; }
}
/* ==========================================================================
About us + Get in touch
Ported from the same Webflow reference.
========================================================================== */
/* ----------------------------------------------------------------- About us */
.sa-exp-section {
position: relative;
padding: 100px 80px;
background-color: var(--sa-ink);
background-image:
radial-gradient(70% 60% at 50% 38%, #6f8fc973 0%, #4e72b740 35%, #16244A1a 65%, #0d151f00 85%),
linear-gradient(180deg, #101b37 0%, #0d151f 100%);
}
.sa-exp-inner {
display: flex;
flex-direction: column;
row-gap: 72px;
max-width: 1280px;
margin: 0 auto;
}
.sa-exp-title {
margin: 0;
color: var(--sa-white);
font-size: 48px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -.8px;
}
.sa-exp-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: start;
gap: 48px;
}
.sa-exp-col { display: flex; flex-direction: column; row-gap: 24px; }
.sa-exp-col-title {
margin: 0;
color: var(--sa-white);
font-size: 32px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -.4px;
}
.sa-exp-list { display: flex; flex-direction: column; row-gap: 12px; }
.sa-exp-item {
margin: 0;
color: #ffffffbf;
font-size: 15px;
font-weight: 300;
line-height: 1.5;
}
/* ------------------------------------------------------------ Get in touch */
.sa-cta {
padding: 100px 80px;
background-color: var(--sa-paper-2);
text-align: left;
}
.sa-cta-inner {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: end;
gap: 64px;
max-width: 1280px;
margin: 0 auto;
}
.sa-cta-left {
grid-area: 1 / 1 / 2 / 2;
align-self: start;
display: flex;
flex-direction: column;
row-gap: 8px;
padding-top: 32px;
}
.sa-cta-question {
margin: 0;
/* the resting question was accent blue, which on a light ground is a
4:1 grey-blue — readable enough to look fine and not readable enough
to pass. It rests in body grey and lights to navy. */
color: var(--sa-body-2);
font-size: 18px;
font-weight: 300;
line-height: 1.5;
}
.sa-cta-h2 {
max-width: 700px;
margin: 0 0 24px;
color: var(--sa-navy);
font-size: 48px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -.8px;
}
.sa-cta-form {
grid-area: 1 / 2 / 2 / 3;
display: flex;
flex-direction: column;
box-sizing: border-box;
padding: 32px 32px 0;
}
.sa-form-label {
display: block;
margin-bottom: 6px;
color: var(--sa-navy);
font-size: 14px;
font-weight: 600;
}
.sa-form-input,
.sa-form-textarea {
display: block;
box-sizing: border-box;
width: 100%;
margin-bottom: 16px;
padding: 12px 20px;
border: 0;
border-radius: 0;
background-color: var(--sa-white);
color: var(--sa-navy);
font-family: var(--sa-font);
font-weight: 300;
font-size: 15px;
}
.sa-form-input { height: 52px; }
.sa-form-textarea {
min-height: 120px;
padding: 16px 20px;
border-radius: 0;
resize: vertical;
}
.sa-form-input:focus,
.sa-form-textarea:focus {
outline: none;
box-shadow: 0 0 0 3px #4e72b733;
}
.sa-form-input::placeholder,
.sa-form-textarea::placeholder { color: #101b3766; }
.sa-form-submit {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
margin-top: 8px;
padding: 16px 32px;
border: 0;
border-radius: 0;
background-image: linear-gradient(135deg, var(--sa-blue) 0%, var(--sa-blue-lift) 100%);
color: var(--sa-white);
font-family: var(--sa-font);
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
cursor: pointer;
box-shadow: none;
transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.sa-form-submit:hover:not(:disabled) {
filter: brightness(1.06);
}
.sa-form-submit:disabled { opacity: .6; cursor: default; }
.sa-form-recaptcha { margin-bottom: 16px; }
.sa-form-note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; }
/* status is carried by the mark and the weight, not by a colour outside
the palette (which also reads better for colour-blind visitors) */
.sa-form-note.is-ok { color: var(--sa-support); font-weight: 600; }
.sa-form-note.is-fail { color: var(--sa-navy); font-weight: 600; }
/* the honeypot: invisible to people, irresistible to bots */
.sa-form-hp {
position: absolute;
left: -9999px;
top: auto;
width: 1px; height: 1px;
overflow: hidden;
}
@media screen and (max-width: 991px) {
.sa-exp-section { padding: 96px 40px; }
.sa-exp-grid { grid-template-columns: 1fr; gap: 48px 40px; }
.sa-cta-inner { grid-template-columns: 1fr; row-gap: 32px; }
.sa-cta-left,
.sa-cta-form { grid-area: auto; }
.sa-cta-form { padding: 24px 0 0; }
}
@media screen and (max-width: 767px) {
.sa-exp-section { padding: 80px 24px; }
.sa-exp-title { font-size: 36px; }
.sa-exp-col-title{ font-size: 26px; }
.sa-cta { padding: 80px 24px; }
.sa-cta-h2 { font-size: 36px; }
.sa-cta-question { font-size: 16px; }
}
/* ==========================================================================
Projects — full-height vertical panels.
Resting: the panel sits low, showing keyword / title / one line.
Hover: it rises to just below the midline and reveals the full story.
========================================================================== */
.sa-proj {
--sa-proj-h: 78vh;
position: relative;
background-color: var(--sa-navy);
overflow: hidden;
}
.sa-proj-head {
max-width: 1280px;
margin: 0 auto;
padding: 96px 80px 48px;
}
.sa-proj-eyebrow {
margin: 0 0 12px;
color: var(--sa-blue-lift);
font-size: 12px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
}
.sa-proj-h2 {
margin: 0;
color: var(--sa-white);
font-size: 48px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -.8px;
}
.sa-proj-rail {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
min-height: var(--sa-proj-h);
}
.sa-proj-card {
position: relative;
display: block;
min-height: var(--sa-proj-h);
overflow: hidden;
text-decoration: none;
isolation: isolate;
background-color: var(--sa-elevated);
}
/* a hairline between panels, like the reference */
.sa-proj-card + .sa-proj-card::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 1px;
background: #ffffff1f;
z-index: 4;
}
.sa-proj-img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
z-index: 0;
transform: scale(1.02);
transition: transform .9s cubic-bezier(.22, 1, .36, 1), filter .6s cubic-bezier(.4, 0, .2, 1);
filter: none;
}
.sa-proj-card:hover .sa-proj-img,
.sa-proj-card:focus-visible .sa-proj-img {
transform: scale(1.07);
filter: saturate(1.06) brightness(1.05);
}
/* constant veil so the panels read as a set rather than five loose photos */
.sa-proj-veil {
position: absolute;
inset: 0;
z-index: 1;
background-image: linear-gradient(180deg, #101b3759 0%, #101b3714 30%, #101b3700 52%);
pointer-events: none;
}
/* the lifting overlay — anchored to the bottom, grows upward */
.sa-proj-panel {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 3;
padding: 32px 26px 30px;
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
background-color: #101b378c;
background-image: linear-gradient(to top, #101b37e6 0%, #101b37b3 65%, #101b3759 100%);
transition: background-color .62s cubic-bezier(.22, 1, .36, 1);
}
.sa-proj-kicker {
margin: 0 0 10px;
color: var(--sa-blue-lift);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
}
.sa-proj-title {
margin: 0 0 10px;
color: var(--sa-white);
font-size: 26px;
font-weight: 600;
line-height: 1.15;
letter-spacing: -.3px;
}
.sa-proj-hook {
margin: 0;
color: #ffffffd9;
font-size: 15px;
font-weight: 300;
line-height: 1.55;
}
/* Revealed on hover.
The height animates via grid-template-rows 0fr -> 1fr rather than max-height.
max-height has to be guessed high enough for the tallest card, so the panel
reaches full size early and then sits still for the rest of the duration —
which is what makes it feel stiff. 0fr -> 1fr animates the *actual* content
height, so the easing curve maps directly onto the movement you see. */
.sa-proj-more {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition:
grid-template-rows .62s cubic-bezier(.22, 1, .36, 1),
opacity .34s cubic-bezier(.4, 0, .2, 1);
}
.sa-proj-more-in {
min-height: 0; /* required, or the grid row refuses to collapse */
overflow: hidden;
transform: translateY(10px);
transition: transform .62s cubic-bezier(.22, 1, .36, 1);
}
.sa-proj-card:hover .sa-proj-more,
.sa-proj-card:focus-visible .sa-proj-more,
.sa-proj-card:focus-within .sa-proj-more {
grid-template-rows: 1fr;
opacity: 1;
transition:
grid-template-rows .62s cubic-bezier(.22, 1, .36, 1),
opacity .42s cubic-bezier(.4, 0, .2, 1) .06s;
}
.sa-proj-card:hover .sa-proj-more-in,
.sa-proj-card:focus-visible .sa-proj-more-in,
.sa-proj-card:focus-within .sa-proj-more-in { transform: none; }
.sa-proj-rule {
width: 44px; height: 2px;
margin: 18px 0 16px;
border: 0;
background-image: linear-gradient(90deg, var(--sa-blue-lift), #ffffff00);
}
.sa-proj-desc {
margin: 0;
color: #ffffffbf;
font-size: 13.5px;
font-weight: 300;
line-height: 1.6;
}
.sa-proj-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
color: var(--sa-white);
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.sa-proj-link::after {
content: "";
width: 16px; height: 1px;
background: currentColor;
transition: width .25s ease;
}
.sa-proj-card:hover .sa-proj-link::after { width: 28px; }
@media screen and (max-width: 1200px) {
.sa-proj-head { padding: 80px 40px 40px; }
.sa-proj-title { font-size: 22px; }
.sa-proj-panel { padding: 26px 20px 24px; }
}
/* below tablet the rail becomes a stack and everything is simply open —
there is no hover on a touch screen */
@media screen and (max-width: 991px) {
.sa-proj { --sa-proj-h: 62vh; }
.sa-proj-rail { grid-auto-flow: row; grid-auto-columns: auto; }
.sa-proj-card + .sa-proj-card::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
}
@media (hover: none) {
.sa-proj-more { grid-template-rows: 1fr; opacity: 1; }
.sa-proj-more-in { transform: none; }
}
@media screen and (max-width: 767px) {
.sa-proj-head { padding: 64px 24px 32px; }
.sa-proj-h2 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
.sa-proj-img, .sa-proj-more, .sa-proj-more-in, .sa-proj-panel, .sa-proj-link::after { transition: none; }
}
/* The source photography is landscape and the panels are tall, so each image
needs its own focal point or the crop lands on nothing. */
.sa-proj-card .sa-proj-img { object-position: center; }
/* the nav floats over the page — stop it covering headings on anchor jumps */
html { scroll-padding-top: 96px; }
/* ==========================================================================
Projects index — keyword filtering
Dark header band (so the floating nav still reads), light content below.
========================================================================== */
.sa-work-head {
padding: 200px 80px 96px;
background-color: var(--sa-navy);
background-image:
radial-gradient(60% 70% at 22% 30%, #4e72b759 0%, #2f579a26 40%, #101b3700 75%),
linear-gradient(180deg, var(--sa-navy) 0%, var(--sa-ink) 100%);
}
.sa-work-head-in { max-width: 1280px; margin: 0 auto; }
.sa-work-eyebrow {
margin: 0 0 14px;
color: var(--sa-blue-lift);
font-size: 12px;
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
}
.sa-work-h1 {
margin: 0 0 20px;
color: var(--sa-white);
font-size: 64px;
font-weight: 800;
line-height: 1.05;
letter-spacing: -1.4px;
}
.sa-work-intro {
max-width: 620px;
margin: 0;
color: #ffffffcc;
font-size: 18px;
font-weight: 300;
line-height: 1.65;
}
/* ------------------------------------------------------------------ filters */
.sa-work-body {
padding: 56px 80px 120px;
background-color: var(--sa-surface-2);
}
.sa-work-body-in { max-width: 1280px; margin: 0 auto; }
.sa-filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding-bottom: 28px;
border-bottom: 1px solid #2f579a26;
}
.sa-filter-label {
margin: 0 8px 0 0;
color: var(--sa-navy);
font-size: 12px;
font-weight: 600;
letter-spacing: 2px;
text-transform: uppercase;
opacity: .55;
}
.sa-chip {
appearance: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 16px;
border: 1px solid #2f579a40;
border-radius: 999px;
background: transparent;
color: var(--sa-navy);
font-family: var(--sa-font);
font-size: 14px;
font-weight: 400;
line-height: 1;
cursor: pointer;
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.sa-chip:hover { border-color: var(--sa-blue); background: #4e72b714; }
.sa-chip[aria-pressed="true"] {
background: var(--sa-blue);
border-color: var(--sa-blue);
color: var(--sa-white);
font-weight: 600;
}
.sa-chip-count {
font-size: 12px;
font-weight: 600;
opacity: .6;
}
.sa-chip[aria-pressed="true"] .sa-chip-count { opacity: .85; }
.sa-filter-status {
margin: 20px 0 28px;
color: var(--sa-navy);
font-size: 14px;
font-weight: 300;
opacity: .7;
}
/* -------------------------------------------------------------------- grid */
.sa-work-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 24px;
align-items: start;
}
.sa-work-card {
display: flex;
flex-direction: column;
padding: 30px 30px 26px;
border: 1px solid #2f579a1f;
border-radius: 20px;
background: var(--sa-white);
transition: transform .35s cubic-bezier(.22,1,.36,1),
box-shadow .35s cubic-bezier(.22,1,.36,1),
border-color .35s ease;
}
.sa-work-card:hover {
transform: translateY(-3px);
border-color: #4e72b74d;
box-shadow: 0 18px 44px #101b3714;
}
/* hidden by a filter — collapses out of the grid */
.sa-work-card[hidden] { display: none; }
.sa-work-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 18px;
}
.sa-work-tag {
padding: 5px 11px;
border-radius: 999px;
background: var(--sa-surface-2);
color: var(--sa-support);
font-size: 11px;
font-weight: 600;
letter-spacing: .6px;
text-transform: uppercase;
}
.sa-work-title {
margin: 0 0 10px;
color: var(--sa-navy);
font-size: 23px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.3px;
}
.sa-work-client {
margin: 0 0 16px;
color: var(--sa-blue);
font-size: 13px;
font-weight: 600;
letter-spacing: .4px;
}
.sa-work-desc {
margin: 0;
color: #101b37c7;
font-size: 15px;
font-weight: 300;
line-height: 1.6;
}
/* measured results — only on the projects that genuinely have them */
.sa-work-stats {
display: flex;
flex-wrap: wrap;
gap: 26px;
margin-top: 22px;
padding-top: 20px;
border-top: 1px solid #2f579a1f;
}
.sa-work-stat-n {
display: block;
color: var(--sa-navy);
font-size: 24px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -.4px;
}
.sa-work-stat-l {
display: block;
margin-top: 4px;
color: #101b3799;
font-size: 12px;
font-weight: 400;
line-height: 1.35;
}
.sa-work-note {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 20px;
padding: 12px 14px;
border-radius: 12px;
background: #4e72b714;
color: var(--sa-support);
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}
.sa-work-note::before {
content: "★";
flex: none;
color: var(--sa-blue);
font-size: 13px;
line-height: 1.5;
}
.sa-work-empty {
padding: 60px 0;
color: var(--sa-navy);
font-size: 16px;
font-weight: 300;
text-align: center;
opacity: .7;
}
@media screen and (max-width: 991px) {
.sa-work-head { padding: 150px 40px 72px; }
.sa-work-h1 { font-size: 46px; }
.sa-work-body { padding: 40px 40px 90px; }
.sa-work-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 767px) {
.sa-work-head { padding: 120px 24px 56px; }
.sa-work-h1 { font-size: 34px; letter-spacing: -.8px; }
.sa-work-intro { font-size: 16px; }
.sa-work-body { padding: 32px 24px 72px; }
.sa-work-card { padding: 24px 22px 22px; }
.sa-work-stats { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
.sa-work-card { transition: none; }
}
/* ==========================================================================
Projects — mosaic, editorial treatment
Light page, hairline grid with corner dots, oversized two-tone display type,
and the photography held in dark panels. Tiles vary in span so the wall
keeps its rhythm; keywords re-pack it; a tile opens to full width in place.
========================================================================== */
.sa-gal {
position: relative;
padding: 0 0 120px;
background-color: var(--sa-white);
}
.sa-gal-in { max-width: 1380px; margin: 0 auto; padding: 0 56px; }
/* ------------------------------------------------------------------ header */
.sa-gal-head {
padding: 104px 0 64px;
text-align: center;
}
.sa-gal-eyebrow {
margin: 0 0 34px;
color: var(--sa-support);
font-size: 11px;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
}
.sa-gal-h2 {
margin: 0 auto;
max-width: 15ch;
color: var(--sa-navy);
font-size: clamp(40px, 6.4vw, 92px);
font-weight: 800;
line-height: .96;
letter-spacing: -3px;
text-transform: uppercase;
}
/* the opening words sit back, the rest lands — United Carriers' two-tone move */
.sa-gal-h2 .lead { color: #101b3740; }
.sa-gal-sub {
max-width: 52ch;
margin: 30px auto 0;
color: #101b37b3;
font-size: 16px;
font-weight: 300;
line-height: 1.65;
}
/* ---------------------------------------------------------------- keywords */
.sa-gal-keys {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
padding: 0 0 40px;
}
.sa-gk {
appearance: none;
padding: 10px 17px;
border: 1px solid #2f579a33;
border-radius: 0;
background: transparent;
color: var(--sa-navy);
font-family: var(--sa-font);
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: 1.4px;
text-transform: uppercase;
cursor: pointer;
transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.sa-gk:hover { border-color: var(--sa-blue); }
.sa-gk[aria-pressed="true"] {
background: var(--sa-navy);
border-color: var(--sa-navy);
color: var(--sa-white);
}
/* ------------------------------------------------------------------ mosaic */
.sa-gal-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-flow: dense;
/* the hairline grid is the gap itself — cells sit on a ruled sheet */
gap: 1px;
background: #2f579a26;
border: 1px solid #2f579a26;
}
.sa-tile {
position: relative;
grid-column: span 4;
display: flex;
flex-direction: column;
padding: 26px 26px 30px;
border: 0;
background: var(--sa-white);
cursor: pointer;
text-align: left;
font-family: var(--sa-font);
transition: background-color .3s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.sa-tile.is-feature { grid-column: span 7; }
.sa-tile.is-major { grid-column: span 5; }
.sa-tile.is-half { grid-column: span 6; }
.sa-tile.is-banner { grid-column: span 12; }
.sa-tile[hidden] { display: none; }
.sa-tile:hover { background: #e6ecf759; }
/* the dot markers at each cell's corners */
.sa-tile::before,
.sa-tile::after {
content: "";
position: absolute;
width: 3px; height: 3px;
border-radius: 50%;
background: #2f579a5c;
}
.sa-tile::before { top: 12px; left: 12px; }
.sa-tile::after { top: 12px; right: 12px; }
/* --------------------------------------------------------------- the media */
.sa-tile-media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
margin-bottom: 22px;
background: var(--sa-ink);
overflow: hidden;
}
.sa-tile.is-feature .sa-tile-media { aspect-ratio: 16 / 9; }
.sa-tile.is-banner .sa-tile-media { aspect-ratio: 24 / 7; }
.sa-tile-img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transform: scale(1.01);
transition: transform 1s cubic-bezier(.22,1,.36,1);
}
.sa-tile:hover .sa-tile-img,
.sa-tile:focus-visible .sa-tile-img { transform: scale(1.06); }
/* the number rides on the media, in a plain square chip */
.sa-tile-stat { display: none; }
.sa-tile-stat-hidden {
position: absolute;
top: 0; right: 0;
display: block;
padding: 9px 13px;
background: #0d151fd9;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
text-align: right;
}
.sa-tile-stat-n {
display: block;
color: var(--sa-white);
font-size: 17px;
font-weight: 800;
line-height: 1;
letter-spacing: -.2px;
white-space: nowrap;
}
.sa-tile-stat-l {
display: block;
margin-top: 4px;
color: #ffffff8c;
font-size: 9px;
font-weight: 600;
letter-spacing: 1.1px;
text-transform: uppercase;
white-space: nowrap;
}
/* ---------------------------------------------------------------- the copy */
.sa-tile-keys { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 12px; }
.sa-tile-key {
color: var(--sa-support);
font-size: 10px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
}
.sa-tile-title {
display: block;
margin: 0 0 10px;
color: var(--sa-navy);
font-size: 25px;
font-weight: 800;
line-height: 1.1;
letter-spacing: -.7px;
text-transform: uppercase;
}
.sa-tile.is-feature .sa-tile-title { font-size: 34px; letter-spacing: -1.1px; }
.sa-tile.is-banner .sa-tile-title { font-size: 28px; }
.sa-tile-client {
display: block;
margin: 0;
color: #101b3799;
font-size: 12px;
font-weight: 500;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.sa-tile-hook {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows .45s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}
.sa-tile-hook > span { min-height: 0; overflow: hidden; }
.sa-tile-hook p {
margin: 14px 0 0;
color: #101b37b8;
font-size: 14px;
font-weight: 300;
line-height: 1.6;
max-width: 46ch;
}
.sa-tile-go {
display: inline-flex;
align-items: center;
gap: 9px;
margin-top: 14px;
color: var(--sa-blue);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
}
.sa-tile-go::after {
content: "";
width: 20px; height: 1px;
background: currentColor;
transition: width .3s ease;
}
.sa-tile:hover .sa-tile-hook,
.sa-tile:focus-visible .sa-tile-hook { grid-template-rows: 1fr; opacity: 1; }
.sa-tile:hover .sa-tile-go::after { width: 34px; }
.sa-tile:focus-visible { outline: 2px solid var(--sa-blue); outline-offset: -2px; }
/* ------------------------------------------------------------ opened state */
.sa-tile.is-open {
grid-column: 1 / -1;
flex-direction: row;
gap: 46px;
align-items: flex-start;
background: var(--sa-surface-2);
}
.sa-tile.is-open .sa-tile-media { flex: 0 0 46%; margin-bottom: 0; aspect-ratio: 4 / 3; }
.sa-tile.is-open .sa-tile-body { flex: 1; }
.sa-tile.is-open .sa-tile-hook { display: none; }
.sa-tile.is-open .sa-tile-title { font-size: 34px; letter-spacing: -1.1px; }
.sa-tile-detail { display: none; }
.sa-tile.is-open .sa-tile-detail { display: block; margin-top: 20px; }
.sa-tile-detail p {
margin: 0 0 22px;
color: #101b37cc;
font-size: 15px;
font-weight: 300;
line-height: 1.7;
max-width: 58ch;
}
.sa-tile-facts { display: block; margin: 0; }
.sa-tile-fact {
display: grid;
grid-template-columns: 130px 1fr;
gap: 18px;
padding: 11px 0;
border-top: 1px solid #2f579a26;
font-size: 13px;
line-height: 1.5;
}
.sa-tile-fact dt {
color: #101b3785;
font-weight: 600;
letter-spacing: 1.1px;
text-transform: uppercase;
font-size: 10px;
padding-top: 2px;
}
.sa-tile-fact dd { margin: 0; color: var(--sa-navy); font-weight: 300; }
.sa-tile-award {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 22px;
padding: 11px 16px;
background: var(--sa-navy);
color: var(--sa-white);
font-size: 11px;
font-weight: 600;
letter-spacing: 1.1px;
text-transform: uppercase;
line-height: 1.45;
}
.sa-tile-award::before { content: "★"; color: var(--sa-blue-lift); }
.sa-tile-close {
position: absolute;
top: 0; right: 0;
width: 42px; height: 42px;
display: none;
align-items: center;
justify-content: center;
border: 0;
background: var(--sa-navy);
color: var(--sa-white);
font-size: 14px;
line-height: 1;
}
.sa-tile.is-open .sa-tile-close { display: inline-flex; }
.sa-tile.is-open::before, .sa-tile.is-open::after { display: none; }
.sa-gal-empty {
padding: 56px 0;
color: #101b3799;
font-size: 13px;
font-weight: 600;
letter-spacing: 1.4px;
text-transform: uppercase;
text-align: center;
}
.sa-gal-count {
display: block;
margin-top: 14px;
color: #101b3780;
font-size: 11px;
font-weight: 600;
letter-spacing: 1.6px;
text-transform: uppercase;
}
/* ------------------------------------------------------------- responsive */
@media screen and (max-width: 1100px) {
.sa-gal-in { padding: 0 28px; }
.sa-gal-grid { grid-template-columns: repeat(6, 1fr); }
.sa-tile, .sa-tile.is-half { grid-column: span 3; }
.sa-tile.is-feature, .sa-tile.is-major, .sa-tile.is-banner { grid-column: span 6; }
.sa-tile-title, .sa-tile.is-feature .sa-tile-title { font-size: 24px; letter-spacing: -.6px; }
}
@media screen and (max-width: 767px) {
.sa-gal { padding-bottom: 76px; }
.sa-gal-in { padding: 0 18px; }
.sa-gal-head { padding: 74px 0 44px; }
.sa-gal-h2 { letter-spacing: -1.4px; }
.sa-gal-grid { grid-template-columns: 1fr; }
.sa-tile, .sa-tile.is-half, .sa-tile.is-feature, .sa-tile.is-major, .sa-tile.is-banner { grid-column: 1 / -1; }
.sa-tile { padding: 20px 18px 24px; }
.sa-tile-media, .sa-tile.is-feature .sa-tile-media, .sa-tile.is-banner .sa-tile-media { aspect-ratio: 16 / 10; }
.sa-tile-title { font-size: 21px; }
.sa-tile-hook { grid-template-rows: 1fr; opacity: 1; }
.sa-tile.is-open { flex-direction: column; gap: 0; }
.sa-tile.is-open .sa-tile-media { flex: none; width: 100%; margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
.sa-tile, .sa-tile-img, .sa-tile-hook { transition: none; }
}
/* ==========================================================================
PROJECTS — one set of work, two ways in
Globe : an orthographic earth of light dots; each project is a pin joined
to its label by a thin leader line. Hover lights the pin, the line
and a motif drawn on the earth for what that project actually does.
Cards : the same eight projects, plain and fast.
The keyword row sits above both and drives both.
Brand rules held here: gradients built only from the Solvesall palette,
glass with real backdrop blur, no strokes on any container, no added
letter-spacing, radii on the 8/10/12 scale.
========================================================================== */
.sa-w {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(76px, 9vw, 128px) 0 clamp(68px, 8vw, 112px);
background-color: transparent;
background-image:
radial-gradient(96% 52% at 50% 30%, #16244A 0%, #101B37 42%, rgba(13,21,31,0) 82%),
linear-gradient(180deg, rgba(13,21,31,0) 0%, #0D151F 16%, #0D151F 100%);
color: var(--sa-white);
}
.sa-w, .sa-w * { font-family: var(--sa-font); }
/* Soft vertical light stripes — equal width, blurred, calming toward the
bottom of the field, exactly as the brand gradient recipe describes. */
.sa-w::before {
content: "";
position: absolute;
inset: -12% -12% 0;
background-image: repeating-linear-gradient(90deg,
rgba(255, 255, 255, .030) 0 96px,
rgba(13, 21, 31, .050) 96px 192px);
filter: blur(28px);
-webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 48%, transparent 90%);
mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.5) 48%, transparent 90%);
pointer-events: none;
z-index: 0;
}
.sa-w-in {
position: relative;
z-index: 1;
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
}
/* ------------------------------------------------------------------ head */
.sa-w-eyebrow {
margin: 0 0 14px;
font-size: 13px;
font-weight: 600;
color: var(--sa-blue-lift);
}
.sa-w-h2 {
margin: 0;
max-width: 17ch;
font-size: clamp(34px, 4.6vw, 60px);
font-weight: 800;
line-height: 1.05;
color: var(--sa-white);
}
.sa-w-sub {
margin: 18px 0 0;
max-width: 64ch;
font-size: clamp(15px, 1.1vw, 17px);
font-weight: 300;
line-height: 1.62;
color: rgba(255, 255, 255, .76);
}
.sa-w-count {
display: block;
margin-top: 8px;
font-weight: 600;
color: var(--sa-blue-lift);
}
/* ----------------------------------------------------------- glass shell */
.sa-w-card,
.sa-w-hint,
.sa-w-pin-card {
border: 0;
background-color: rgba(255, 255, 255, .075);
}
.sa-w-pin-card {
background-color: rgba(15, 25, 48, .52);
box-shadow: 0 10px 28px -14px rgba(6, 10, 20, .85);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .20) 0%,
rgba(255, 255, 255, .10) 50%,
rgba(255, 255, 255, .03) 100%);
-webkit-backdrop-filter: blur(16px) saturate(118%);
backdrop-filter: blur(16px) saturate(118%);
}
/* Where the browser cannot blur, the glass becomes a solid elevated panel
rather than a washed-out one — readability before effect. */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.sa-w-card, .sa-w-hint, .sa-w-pin-card {
background-color: rgba(22, 36, 74, .88);
}
}
/* -------------------------------------------------------------- controls */
.sa-w-controls {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: clamp(30px, 3.4vw, 46px) 0 clamp(22px, 2.4vw, 32px);
}
/* Each keyword is its own piece of glass — white on the dark field, never a
single shared rail. The chosen one takes the gradient treatment the nav's
Contact button uses. */
.sa-w-keys,
.sa-w-views {
display: flex;
align-items: center;
gap: 8px;
padding: 0;
border: 0;
background: none;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.sa-w-keys { flex-wrap: wrap; row-gap: 8px; }
.sa-w-views { flex-wrap: nowrap; flex-shrink: 0; }
/* Frosted glass with a light source trapped inside it: a soft blue bloom
sitting behind the top-left of each chip, a bright band along the top edge
where the light catches, and the ground behind blurred through it. */
.sa-w-key,
.sa-w-view {
position: relative;
isolation: isolate;
overflow: hidden;
appearance: none;
border: 0;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
padding: 12px 20px;
border-radius: 999px;
font: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1;
color: var(--sa-white);
white-space: nowrap;
background-color: rgba(255, 255, 255, .035);
-webkit-backdrop-filter: blur(26px) saturate(150%);
backdrop-filter: blur(26px) saturate(150%);
box-shadow: 0 10px 26px -14px rgba(13, 21, 31, .75);
transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}
/* the bloom inside the glass */
.sa-w-key::before,
.sa-w-view::before {
content: "";
position: absolute;
z-index: -1;
left: -14%;
top: -160%;
width: 62%;
height: 300%;
border-radius: 50%;
background-image: radial-gradient(closest-side,
rgba(111, 143, 201, .95) 0%,
rgba(78, 114, 183, .55) 45%,
rgba(78, 114, 183, 0) 100%);
filter: blur(11px);
opacity: .34;
pointer-events: none;
transition: opacity .22s ease, transform .22s ease;
}
/* the sheen sitting on the surface */
.sa-w-key::after,
.sa-w-view::after {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .15) 0%,
rgba(255, 255, 255, .05) 46%,
rgba(255, 255, 255, 0) 72%);
pointer-events: none;
}
.sa-w-key:hover,
.sa-w-view:hover {
background-color: rgba(255, 255, 255, .10);
transform: translateY(-1px);
}
.sa-w-key:hover::before,
.sa-w-view:hover::before { opacity: .62; transform: translateX(10%); }
.sa-w-key:active,
.sa-w-view:active { transform: translateY(0); }
.sa-w-key[aria-pressed="true"],
.sa-w-view[aria-pressed="true"] {
background-color: rgba(78, 114, 183, .92);
color: var(--sa-white);
font-weight: 600;
box-shadow: 0 8px 26px -6px rgba(78, 114, 183, .60);
}
.sa-w-key[aria-pressed="true"]::before,
.sa-w-view[aria-pressed="true"]::before { opacity: .95; }
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.sa-w-key, .sa-w-view { background-color: rgba(64, 84, 128, .82); }
}
.sa-w-key:focus-visible,
.sa-w-view:focus-visible,
.sa-w-pin-card:focus-visible,
.sa-w-card-go:focus-visible {
outline: 2px solid var(--sa-blue-lift);
outline-offset: 3px;
}
/* ----------------------------------------------------------------- globe */
/* The globe runs the full width of the viewport, not the text column — a
horizon that stops at a content edge is not a horizon. */
/* The stage is never wider than the footage itself, so the film is shown at
its own size or smaller — downscaling stays sharp, upscaling never does.
It still sits wider than the text column, and is centred on it. */
/* Drawn, not filmed — so it is resolution-independent and can run the full
width of the viewport without any of it being stretched. */
.sa-w-stage {
position: relative;
display: none;
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
height: clamp(520px, 47vw, 900px);
}
.sa-w[data-view="globe"] .sa-w-stage { display: block; }
.sa-w[data-view="globe"] .sa-w-cards { display: none; }
.sa-w[data-view="cards"] .sa-w-stage { display: none; }
/* Every edge of the drawing dissolves. Done as a mask over the whole canvas
rather than per element, so the ground, the coastlines, the horizon line
and the masts all fade the same way and nothing ends on a hard line. */
.sa-w-canvas {
position: absolute;
inset: 0;
display: block;
pointer-events: none;
-webkit-mask-image:
linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%),
linear-gradient(180deg, transparent 0%, #000 9%, #000 86%, transparent 100%);
mask-image:
linear-gradient(90deg, transparent 0%, #000 11%, #000 89%, transparent 100%),
linear-gradient(180deg, transparent 0%, #000 9%, #000 86%, transparent 100%);
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.sa-w-pins { position: absolute; inset: 0; }
.sa-w-hint { display: none; }
/* A pin is a zero-size anchor point: the dot marks the place, the card hangs
off whichever side keeps it inside the frame. */
.sa-w-pin {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
color: var(--sa-white);
pointer-events: none;
will-change: transform;
transition: opacity .25s ease;
}
.sa-w-pin-dot, .sa-w-pin-card { pointer-events: auto; }
.sa-w-pin-card { text-decoration: none; color: inherit; }
/* The marker itself is painted on the canvas so it sits in the same light as
the planet; this is only the hit area over it. */
.sa-w-pin-dot {
position: absolute;
left: -13px;
top: -13px;
width: 26px;
height: 26px;
border-radius: 50%;
}
/* The label floats directly above the point where the stalk leaves the pin. */
.sa-w-pin-card {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
gap: 2px;
width: max-content;
max-width: 200px;
padding: 8px 13px;
border-radius: 8px;
transform: translateY(-50%);
transition: background-color .22s ease, transform .22s ease;
}
.sa-w-pin-card { left: 50%; transform: translate(-50%, -50%); text-align: center; align-items: center; }
.sa-w-pin-name { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--sa-white); }
.sa-w-pin-client { font-size: 11.5px; font-weight: 300; line-height: 1.35; color: rgba(255, 255, 255, .74); }
.sa-w-pin-go {
display: none;
align-items: center;
gap: 5px;
margin-top: 5px;
font-size: 11.5px;
font-weight: 600;
color: var(--sa-surface-3);
}
.sa-w-pin.is-hot .sa-w-pin-go { display: inline-flex; }
.sa-w-pin.is-hot .sa-w-pin-card {
background-color: rgba(24, 40, 78, .78);
transform: translate(-50%, -50%) scale(1.03);
}
/* Filtered out: pushed back into the field, never removed. */
.sa-w-pin.is-dim { opacity: .55; }
.sa-w-pin.is-dim .sa-w-pin-card {
background-color: rgba(16, 27, 55, .60);
background-image: none;
}
.sa-w-pin.is-far { opacity: 0; pointer-events: none; }
/* ----------------------------------------------------------------- cards */
.sa-w-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.sa-w-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 10px;
transition: background-color .22s ease, transform .22s ease, opacity .22s ease;
}
.sa-w-card:hover { background-color: rgba(255, 255, 255, .15); transform: translateY(-4px); }
.sa-w-card-media {
position: relative;
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: var(--sa-ink);
}
.sa-w-card-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .92;
transition: transform .5s ease, opacity .3s ease;
}
.sa-w-card:hover .sa-w-card-img { transform: scale(1.05); opacity: 1; }
.sa-w-card-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 20px 22px 20px;
}
/* Filtered out means recessed, not unreadable: the glass panel drops away
so matches pop, but the text stays above 4.5:1 on the field behind it. */
.sa-w-card.is-dim {
opacity: .55;
background-color: rgba(255, 255, 255, .022);
background-image: none;
}
.sa-w-card.is-dim:hover { opacity: .82; transform: none; }
/* The line icon rides on the photograph rather than repeating above the
title — it names the kind of work at a glance without stealing a line. */
.sa-w-card-icon {
position: absolute;
left: 14px;
bottom: 14px;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
color: var(--sa-white);
background-color: rgba(13, 21, 31, .55);
background-image: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 55%, rgba(255,255,255,0) 100%);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.sa-w-card-name { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--sa-surface-3); }
.sa-w-card-title { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.34; color: var(--sa-white); }
.sa-w-card-client { display: block; margin: 9px 0 0; font-size: 13px; font-weight: 300; color: rgba(255, 255, 255, .74); }
.sa-w-card-keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; }
.sa-w-card-keys > span { display: inline-block; }
.sa-w-card-keys span {
padding: 4px 9px;
border-radius: 8px;
background-color: rgba(255, 255, 255, .10);
font-size: 11.5px;
font-weight: 300;
color: rgba(255, 255, 255, .80);
}
.sa-w-card-go {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 20px;
font-size: 13px;
font-weight: 600;
color: var(--sa-surface-3);
text-decoration: none;
transition: color .2s ease, gap .2s ease;
}
.sa-w-card:hover .sa-w-card-go { color: var(--sa-white); gap: 9px; }
.sa-w-card-hit { position: absolute; inset: 0; border-radius: 10px; }
/* ------------------------------------------------------------ responsive */
/* Below this width the eight labels cannot be pulled apart — the projects
sit within a couple of degrees of each other in central Europe — so the
globe is not offered and the cards carry the section on their own. */
@media (max-width: 899px) {
.sa-w-in { width: calc(100% - 40px); }
.sa-w-controls { flex-direction: column; align-items: flex-start; }
.sa-w-views { display: none; }
.sa-w-stage { display: none !important; }
.sa-w-cards { display: grid !important; }
}
@media (max-width: 560px) {
.sa-w-in { width: calc(100% - 32px); }
.sa-w-cards { grid-template-columns: 1fr; }
.sa-w-card-body { padding: 18px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
.sa-w-card, .sa-w-key, .sa-w-view, .sa-w-pin, .sa-w-pin-card, .sa-w-pin-dot, .sa-w-card-go {
transition-duration: .01ms;
}
.sa-w-card:hover { transform: none; }
}
/* ==========================================================================
PROOF — the record, sitting behind the contact form
========================================================================== */
.sa-proof {
position: relative;
padding: clamp(72px, 8vw, 108px) 0;
background-color: var(--sa-ink);
background-image: linear-gradient(180deg, #101B37 0%, #0D151F 100%);
color: var(--sa-white);
}
.sa-proof, .sa-proof * { font-family: var(--sa-font); }
.sa-proof-in { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.sa-proof-eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--sa-blue-lift); }
.sa-proof-h2 {
margin: 0 0 clamp(34px, 4vw, 52px);
max-width: 20ch;
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 800;
line-height: 1.1;
color: var(--sa-white);
}
.sa-proof-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 32px 40px;
margin: 0;
padding: 0;
list-style: none;
}
.sa-proof-stat {
padding: 8px 0;
border-radius: 0;
background: none;
}
/* One mark per card, in its role colour, above the number. The numeral and
the caption stay white — the colour belongs to the icon alone. Fixed
assignment: the order never moves. */
.sa-proof-ic {
display: block;
width: 72px;
height: 72px;
margin: 0 0 20px;
color: var(--signal-foundation);
}
.sa-proof-ic-svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* the glyphs are drawn as thin outlines; stroking them along their own edge
doubles the line weight without changing the drawing */
.sa-proof-ic-svg path { stroke: currentColor; stroke-width: .8; stroke-linejoin: round; stroke-linecap: round; }
.sa-proof-ic.is-connected { color: var(--signal-connected); }
.sa-proof-ic.is-optimised { color: var(--signal-optimised); }
.sa-proof-ic.is-attention { color: var(--signal-attention); }
.sa-proof-ic.is-foundation { color: var(--signal-critical); } /* the years card, red by request */
/* the numbers are typed out when the cards come into view; a caret blinks
at the end while it happens */
.sa-proof-ch { opacity: 0; transition: opacity .32s ease; }
.sa-proof-n.is-on .sa-proof-ch { opacity: 1; }
.sa-proof-n.is-typing::after {
content: "";
display: inline-block;
width: .08em;
height: .82em;
margin-left: .06em;
vertical-align: -.06em;
background-color: currentColor;
animation: sa-caret .8s steps(1) infinite;
}
@keyframes sa-caret { 50% { opacity: 0; } }
.sa-proof-n { display: block; font-size: clamp(30px, 3.2vw, 42px); font-weight: 800; line-height: 1; color: var(--sa-white); }
.sa-proof-l { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 300; line-height: 1.5; color: rgba(255, 255, 255, .76); }
.sa-proof-note {
margin: 26px 0 0;
font-size: 13.5px;
font-weight: 300;
color: rgba(255, 255, 255, .70);
}
@media (max-width: 560px) {
.sa-proof-in { width: calc(100% - 32px); }
}
/* ------------------------------------------------- contact form questions */
/* Hovering a question brings it forward: it grows a little, darkens to
Primary, and thickens optically. The weight is faked with a hairline text
shadow rather than a real 600 so the line never re-wraps under the cursor. */
.sa-cta-question {
transform-origin: left center;
/* slow, so the light seems to move down the list of its own accord */
transition: color 1.1s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1), text-shadow 1.1s ease;
cursor: default;
}
/* the lit one: the same state a cursor gives it, handed down the list one
question at a time by the script, and taken over by the real cursor on hover */
.sa-cta-question.is-lit,
.sa-cta-question:hover {
color: var(--sa-navy);
transform: scale(1.035);
text-shadow: 0 0 .5px currentColor;
}
.sa-cta-left:hover .sa-cta-question.is-lit:not(:hover) {
color: var(--sa-body-2);
transform: none;
text-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
.sa-cta-question { transition-duration: .01ms; }
.sa-cta-question:hover, .sa-cta-question.is-lit { transform: none; }
}
/* ==========================================================================
ABOUT — the three things the company is, drawn as one network
Industries feed the capabilities; the capabilities resolve into products.
Hovering any node lights the whole path it belongs to, in both directions.
========================================================================== */
/* Experts in — three plain columns on a light field, in the manner of the
reference: a centred heading with a short bar of accent under it, each
column headed by a tick, each item a quiet row with a hairline mark before
it. The one-line explanations stay, on hover and on focus, in the note
underneath. */
.sa-net {
position: relative;
isolation: isolate;
overflow: hidden;
padding: clamp(72px, 8.5vw, 120px) 0 clamp(56px, 6.5vw, 92px);
background-color: var(--sa-white);
color: var(--sa-navy);
}
.sa-net, .sa-net * { font-family: var(--sa-font); }
.sa-net-in {
position: relative;
z-index: 1;
width: min(1180px, calc(100% - 48px));
margin: 0 auto;
}
/* the same heading as every other section: eyebrow, then the title, on the
left edge — no centring and no bar */
.sa-net-head { text-align: left; }
.sa-net-eyebrow {
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
color: var(--sa-support);
}
.sa-net-h2 {
margin: 0;
max-width: 20ch;
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 800;
line-height: 1.1;
color: var(--sa-navy);
}
/* ----------------------------------------------------------------- stage */
.sa-net-stage {
position: relative;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(28px, 4vw, 64px);
align-items: start;
margin-top: clamp(40px, 5vw, 64px);
}
/* ----------------------------------------------------------------- nodes */
.sa-net-col { display: flex; flex-direction: column; gap: 2px; }
.sa-net-col-title {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 12px;
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 600;
line-height: 1.3;
color: var(--sa-navy);
}
/* the tick before each heading */
.sa-net-tick {
flex: none;
width: 18px;
height: 18px;
background-repeat: no-repeat;
background-size: contain;
background-image: url("data:image/svg+xml;utf8,");
}
.sa-net-node {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 8px 8px 8px 0;
border: 0;
border-radius: 8px;
cursor: pointer;
font: inherit;
font-size: clamp(15px, 1.1vw, 16.5px);
font-weight: 400;
line-height: 1.4;
text-align: left;
color: var(--sa-body);
background: none;
transition: color .18s ease, background-color .18s ease;
}
/* the hairline mark before each item */
.sa-net-dot {
display: block;
flex: none;
width: 1.5px;
height: 14px;
border-radius: 1px;
background-color: var(--sa-surface-3);
transition: background-color .18s ease, height .18s ease;
}
.sa-net-node.is-out { font-weight: 600; color: var(--sa-navy); }
.sa-net-node:hover,
.sa-net-node.is-active { color: var(--sa-navy); }
.sa-net-node:hover .sa-net-dot,
.sa-net-node.is-active .sa-net-dot { background-color: var(--sa-blue); height: 18px; }
.sa-net-node:focus-visible { outline: 2px solid var(--sa-blue); outline-offset: 2px; }
/* ------------------------------------------------------------------ note */
.sa-net-note {
display: flex;
align-items: center;
min-height: 64px;
margin: clamp(28px, 3.6vw, 44px) 0 0;
padding: 16px 22px;
border-radius: 10px;
background-color: var(--sa-surface-2);
font-size: 15px;
font-weight: 300;
line-height: 1.6;
color: var(--sa-body);
}
/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
.sa-net-in { width: calc(100% - 40px); }
.sa-net-stage { grid-template-columns: 1fr; gap: 34px; }
.sa-net-note { min-height: 0; }
}
@media (max-width: 560px) {
.sa-net-in { width: calc(100% - 32px); }
.sa-net-node { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
.sa-net-node { transition-duration: .01ms; }
}
/* ------------------------------------------------- the awarded work card */
/* One product has been recognised; the awards belong to it, not to the
company in general, so they sit under its name rather than in a list of
company facts. */
.sa-proof-award {
/* the products on the left, the list of awards on the right — the list
scrolls in place, so the panel stays about three awards tall */
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.5fr);
align-items: start;
gap: clamp(28px, 4vw, 60px);
margin-top: clamp(28px, 3.4vw, 44px);
padding: clamp(24px, 2.6vw, 34px) clamp(28px, 3vw, 40px);
border: 0;
border-radius: 10px;
background-color: rgba(255, 255, 255, .05);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .05) 52%, rgba(255, 255, 255, .01) 100%);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
}
.sa-proof-award-side { display: flex; flex-direction: column; gap: 22px; }
.sa-proof-award-side .sa-proof-award-head + .sa-proof-award-head { margin-top: 4px; }
/* the list: three rows tall, the rest reached by scrolling; the top and foot
dissolve so it reads as a window onto a longer list */
.sa-proof-award-win { position: relative; }
/* The foot of the window is put into shadow — a long, gradual darkening
that starts above the third award — so it is plain that the list goes on
beneath. Once the visitor has scrolled it eases off, and comes back at the
end of the list. */
/* the shadow belongs to the whole panel's foot, edge to edge: it says
"this card scrolls", not "this column is dimmed" */
.sa-proof-award { position: relative; }
.sa-proof-award::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 46%;
pointer-events: none;
border-radius: 0 0 10px 10px;
background-image: linear-gradient(180deg,
rgba(9, 15, 26, 0) 0%,
rgba(9, 15, 26, .32) 40%,
rgba(9, 15, 26, .80) 100%);
transition: opacity .5s ease;
}
.sa-proof-award:has(.sa-proof-award-win.is-scrolled)::after { opacity: .45; }
.sa-proof-award:has(.sa-proof-award-win.is-end)::after { opacity: 0; }
.sa-proof-award-win::after { display: none; }
.sa-proof-award-more { z-index: 1; }
.sa-proof-award-more {
position: absolute;
right: 18px; bottom: 12px;
display: inline-flex; align-items: center; gap: 6px;
margin: 0;
font-size: 12px; font-weight: 600;
color: rgba(214, 228, 252, .92);
pointer-events: none;
transition: opacity .4s ease;
}
.sa-proof-award-more svg { animation: sa-award-nudge 1.8s ease-in-out infinite; }
@keyframes sa-award-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.sa-proof-award-win.is-scrolled .sa-proof-award-more { opacity: 0; }
.sa-proof-award-scroll {
position: relative;
max-height: 336px;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: 14px;
-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 100%);
mask-image: linear-gradient(180deg, transparent 0, #000 22px, #000 100%);
scrollbar-width: thin;
scrollbar-color: rgba(143, 182, 242, .45) transparent;
}
.sa-proof-award-scroll::-webkit-scrollbar { width: 4px; }
.sa-proof-award-scroll::-webkit-scrollbar-track { background: transparent; }
.sa-proof-award-scroll::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(143, 182, 242, .45); }
.sa-proof-award-scroll:focus-visible { outline: 2px solid rgba(143, 182, 242, .6); outline-offset: 4px; }
.sa-proof-award-scroll .sa-proof-award-list { padding: 8px 0 44px; }
/* which product a row belongs to, now that the rows are one list */
.sa-proof-award-for {
display: block;
margin: 0 0 4px;
font-size: 11.5px;
font-weight: 600;
color: var(--sa-blue-lift);
}
@media (max-width: 860px) {
.sa-proof-award { grid-template-columns: 1fr; }
.sa-proof-award-scroll { max-height: 400px; }
}
.sa-proof-award-eyebrow {
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--sa-blue-lift);
}
.sa-proof-award-name {
margin: 0;
font-size: clamp(20px, 1.8vw, 24px);
font-weight: 800;
line-height: 1.1;
color: var(--sa-white);
}
.sa-proof-award-what {
margin: 8px 0 0;
max-width: 34ch;
font-size: 13.5px;
font-weight: 300;
line-height: 1.55;
color: rgba(255, 255, 255, .72);
}
.sa-proof-award-list {
display: flex;
flex-direction: column;
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.sa-proof-award-item {
display: grid;
grid-template-columns: 62px minmax(0, 1fr);
align-items: baseline;
gap: 16px;
}
.sa-proof-award-year {
font-size: 15px;
font-weight: 600;
color: var(--sa-blue-lift);
font-variant-numeric: tabular-nums;
}
.sa-proof-award-body { display: flex; flex-direction: column; gap: 4px; }
.sa-proof-award-title {
font-size: 16.5px;
text-wrap: pretty;
font-weight: 600;
line-height: 1.35;
color: var(--sa-white);
}
.sa-proof-award-badge {
/* a status, not a control: a small dot and a word in the role's colour,
no fill, no border — nothing that asks to be pressed */
display: inline-flex;
align-items: center;
gap: 7px;
margin-left: 12px;
padding: 0;
border: 0;
background: none;
font-size: 12px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
vertical-align: 1px;
}
/* the word alone carries the status; only the win gets a mark — a trophy,
drawn in the same colour */
.sa-proof-award-badge.is-win::before {
content: "";
flex: none;
width: 20px;
height: 20px;
background-color: #6F8FC9;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* A burst of sparks from the trophy the moment the winning row scrolls into
view — a dozen of them in the four signal colours, with a soft glow, flying
further and lingering a beat, then gone. */
.sa-proof-award-badge.is-win { position: relative; }
.sa-award-spark {
position: absolute;
left: 10px; top: 50%;
width: 7px; height: 7px;
margin: -3.5px 0 0 0;
border-radius: 50%;
background-color: var(--c, currentColor);
box-shadow: 0 0 10px 2px var(--c, currentColor);
opacity: 0;
pointer-events: none;
transform: translate(0, 0) scale(.5);
z-index: 3;
}
.sa-award-spark:nth-child(3n) { width: 5px; height: 5px; margin-top: -2.5px; }
.sa-proof-award-badge.is-lit .sa-award-spark {
animation: sa-award-spark 1.35s cubic-bezier(.14, .86, .28, 1) forwards;
animation-delay: var(--d, 0s);
}
@keyframes sa-award-spark {
0% { opacity: 0; transform: translate(0, 0) scale(.5); }
10% { opacity: 1; transform: translate(calc(var(--x) * .25), calc(var(--y) * .25)) scale(1.25); }
70% { opacity: 1; }
100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 10px)) scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
.sa-proof-award-badge.is-lit .sa-award-spark { animation: none; }
}
/* the product names link to their own pages */
.sa-proof-award-name-a { color: inherit; text-decoration: none; transition: color .2s ease; }
.sa-proof-award-name-a:hover { color: var(--sa-blue-lift); }
.sa-proof-award-badge.is-win { color: var(--sa-white); }
.sa-proof-award-badge.is-finalist { color: var(--sa-blue-lift, #6F8FC9); }
.sa-proof-award-badge.is-open { color: rgba(255,255,255,.7); }
.sa-proof-award-badge.is-gold { color: #E8C460; }
.sa-proof-award-badge.is-silver { color: #CED6E2; }
.sa-proof-award-badge.is-medal { color: #E2B27A; }
@keyframes sa-award-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .34; }
}
@media (prefers-reduced-motion: reduce) {
.sa-proof-award-badge.is-open::before { animation: none; }
.sa-proof-award-more svg { animation: none; }
}
.sa-proof-award-by {
font-size: 13.5px;
font-weight: 300;
line-height: 1.5;
color: rgba(255, 255, 255, .74);
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.sa-proof-award { background-color: rgba(22, 36, 74, .90); }
}
@media (max-width: 860px) {
.sa-proof-award-group { grid-template-columns: 1fr; gap: 22px; }
.sa-proof-award-what { max-width: none; }
}
/* --- award source links --- */
.sa-proof-award-link {
position: relative;
color: inherit;
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0 100%;
transition: background-size .28s ease;
}
.sa-proof-award-link:hover,
.sa-proof-award-link:focus-visible { background-size: 100% 1px; }
.sa-proof-award-ext {
margin-left: 6px;
color: var(--sa-blue-lift);
vertical-align: 1px;
opacity: .85;
transition: opacity .2s ease, transform .2s ease;
}
.sa-proof-award-link:hover .sa-proof-award-ext,
.sa-proof-award-link:focus-visible .sa-proof-award-ext {
opacity: 1;
transform: translate(1px, -1px);
}
.sa-proof-award-src {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* --- footer: certification badge replaces the orbit graphic --- */
.footer_component {
background-image: linear-gradient(180deg, #101B37 0%, #0D151F 100%);
background-position: 0 0;
background-size: cover;
background-repeat: no-repeat;
}
.sa-foot-cert {
display: flex;
flex-direction: column;
gap: 16px;
padding: 0;
border: 0;
background: none;
}
.sa-foot-cert-eyebrow {
margin: 0;
font-size: 12px;
font-weight: 600;
color: var(--sa-blue-lift);
}
.sa-foot-cert-list {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.sa-foot-cert-item {
display: flex;
align-items: center;
gap: 12px;
}
.sa-foot-seal {
flex: none;
color: var(--sa-blue-lift);
}
.sa-foot-cert-body { display: flex; flex-direction: column; gap: 2px; }
.sa-foot-cert-code {
font-size: 15px;
font-weight: 600;
line-height: 1.2;
color: var(--sa-white);
}
.sa-foot-cert-desc {
font-size: 12.5px;
font-weight: 300;
line-height: 1.35;
color: rgba(255, 255, 255, .74);
}
.sa-foot-cert-eu {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
font-size: 12.5px;
font-weight: 300;
color: rgba(255, 255, 255, .74);
}
.sa-foot-cert-eu svg { flex: none; color: var(--sa-blue-lift); }
@media (max-width: 991px) {
.sa-foot-cert { align-self: start; max-width: 320px; }
}
/* the orbit graphic used to fill this space; tighten it now that it is gone */
.footer_component .padding-vertical.padding-xxlarge {
padding-top: clamp(56px, 6vw, 88px);
padding-bottom: 0;
}
.footer_component .padding-bottom.padding-xxlarge {
padding-bottom: clamp(32px, 3.4vw, 48px);
}
/* ================================================================ pillars */
.sa-pillars {
position: relative;
overflow: hidden;
padding: clamp(64px, 7vw, 108px) 0;
background-color: var(--sa-navy-deep);
background-image: linear-gradient(180deg, #101B37 0%, #0D151F 62%, #0D151F 100%);
}
.sa-pillars, .sa-pillars * { font-family: var(--sa-font); }
.sa-pillars::before {
content: "";
position: absolute;
top: -22%;
left: 50%;
width: min(1100px, 120%);
height: 620px;
transform: translateX(-50%);
background-image: radial-gradient(50% 50% at 50% 50%,
rgba(47, 87, 154, .40) 0%, rgba(22, 36, 74, .22) 46%, rgba(13, 21, 31, 0) 78%);
pointer-events: none;
}
.sa-pillars-in {
position: relative;
z-index: 1;
width: min(1180px, calc(100% - 64px));
margin: 0 auto;
}
.sa-pillars-head { max-width: 700px; }
.sa-pillars-eyebrow {
margin: 0 0 14px;
font-size: 13px;
font-weight: 600;
color: var(--sa-blue-lift);
}
.sa-pillars-h2 {
margin: 0;
font-size: clamp(30px, 3.6vw, 50px);
font-weight: 800;
line-height: 1.06;
color: var(--sa-white);
}
.sa-pillars-sub {
margin: 18px 0 0;
max-width: 60ch;
font-size: clamp(15px, 1.15vw, 17px);
font-weight: 300;
line-height: 1.6;
color: rgba(255, 255, 255, .78);
}
.sa-pillars-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr) minmax(0, 1fr);
align-items: center;
gap: clamp(20px, 3vw, 56px);
/* the full measure, so the first column starts on the same left edge as the
heading above it and every other section on the page */
margin: clamp(28px, 3.4vw, 44px) 0 0;
}
.sa-pillars-col.is-right { text-align: right; }
.sa-pillars-name {
margin: 0 0 14px;
font-size: clamp(19px, 1.7vw, 24px);
font-weight: 800;
color: var(--sa-white);
}
.sa-pillars-list {
display: flex;
flex-direction: column;
gap: 9px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14.5px;
font-weight: 300;
line-height: 1.5;
color: rgba(255, 255, 255, .82);
}
/* --- the two overlapping fields --- */
.sa-pillars-venn {
position: relative;
aspect-ratio: 1 / 1.06;
min-height: 250px;
}
.sa-venn-c {
position: absolute;
width: 76%;
aspect-ratio: 1;
border-radius: 50%;
mix-blend-mode: screen;
filter: blur(1.5px);
will-change: transform, border-radius;
}
.sa-venn-c.is-a {
top: 0;
right: 0;
background-image: linear-gradient(158deg,
rgba(103, 136, 197, .90) 0%, rgba(56, 96, 165, .88) 52%, rgba(35, 62, 122, .84) 100%);
}
.sa-venn-c.is-b {
bottom: 0;
left: 0;
background-image: linear-gradient(158deg,
rgba(66, 100, 168, .86) 0%, rgba(41, 72, 134, .84) 52%, rgba(24, 43, 90, .82) 100%);
}
.sa-venn-t {
position: absolute;
z-index: 2;
font-size: clamp(14px, 1.25vw, 17px);
font-weight: 300;
color: var(--sa-white);
white-space: nowrap;
}
.sa-venn-t.is-a { top: 22%; right: 62%; }
.sa-venn-t.is-b { bottom: 21%; left: 60%; }
.sa-pillars-more { margin: clamp(30px, 3.4vw, 46px) 0 0; }
.sa-pillars-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: var(--sa-blue-lift);
text-decoration: none;
}
.sa-pillars-link svg { transition: transform .22s ease; }
.sa-pillars-link:hover svg,
.sa-pillars-link:focus-visible svg { transform: translateX(3px); }
@media (max-width: 900px) {
.sa-pillars-in { width: calc(100% - 40px); }
.sa-pillars-grid { grid-template-columns: 1fr; gap: 30px; }
.sa-pillars-col.is-right { text-align: left; }
.sa-pillars-venn { order: -1; width: min(320px, 84%); margin: 0 auto 6px; min-height: 0; }
.sa-venn-t.is-a { right: 56%; }
.sa-venn-t.is-b { left: 54%; }
}
@media (max-width: 560px) {
.sa-pillars-in { width: calc(100% - 32px); }
}
/* ============================================================= about page */
.sa-ab-in {
width: min(1180px, calc(100% - 64px));
margin: 0 auto;
}
.sa-ab-eyebrow {
margin: 0 0 14px;
font-size: 13px;
font-weight: 600;
color: var(--sa-blue-lift);
}
.sa-ab-h2 {
margin: 0;
max-width: 30ch;
font-size: clamp(19px, 1.9vw, 26px);
font-weight: 700;
line-height: 1.25;
color: var(--sa-white);
}
/* --- hero --- */
.sa-ab-hero {
position: relative;
overflow: hidden;
/* room for the floating nav above; below, only enough to separate the
picture from the next heading — the two sections share one dark field */
padding: clamp(120px, 12vw, 160px) 0 clamp(16px, 2vw, 28px);
background-color: var(--sa-navy);
background-image: linear-gradient(180deg, #101B37 0%, #16244A 34%, #101B37 72%, #0D151F 100%);
}
.sa-ab-hero, .sa-ab-hero *, .sa-mv *, .sa-found *, .sa-team *, .sa-office * {
font-family: var(--sa-font);
}
.sa-ab-hero::before {
content: "";
position: absolute;
top: -30%;
left: 62%;
width: min(900px, 100%);
height: 780px;
transform: translateX(-50%);
background-image: radial-gradient(50% 50% at 50% 50%,
rgba(47, 87, 154, .55) 0%, rgba(22, 36, 74, .28) 48%, rgba(16, 27, 55, 0) 76%);
pointer-events: none;
}
.sa-ab-hero .sa-ab-in { position: relative; z-index: 1; }
.sa-ab-h1 {
margin: 0;
font-size: clamp(38px, 4.8vw, 66px);
font-weight: 800;
line-height: 1.04;
color: var(--sa-white);
}
.sa-ab-lead {
margin: 20px 0 0;
max-width: 52ch;
font-size: clamp(15px, 1.2vw, 18px);
font-weight: 300;
line-height: 1.62;
color: rgba(255, 255, 255, .82);
}
.sa-ab-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(18px, 2.4vw, 36px);
margin: clamp(38px, 4.5vw, 60px) 0 0;
padding: 0;
list-style: none;
}
.sa-ab-stats li { display: flex; flex-direction: column; gap: 7px; }
.sa-ab-n {
font-size: clamp(28px, 3vw, 40px);
font-weight: 800;
line-height: 1;
color: var(--sa-white);
font-variant-numeric: tabular-nums;
}
.sa-ab-l {
font-size: 13.5px;
font-weight: 300;
line-height: 1.45;
color: rgba(255, 255, 255, .74);
}
/* --- mission & vision --- */
.sa-mv {
padding: clamp(16px, 2vw, 28px) 0 clamp(64px, 7vw, 104px);
background-color: var(--sa-navy-deep);
background-image: linear-gradient(180deg, #0D151F 0%, #101B37 100%);
}
.sa-mv-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 2.4vw, 32px);
margin-top: clamp(22px, 2.6vw, 34px);
}
.sa-mv-card {
padding: clamp(26px, 3vw, 38px);
border: 0;
border-radius: 10px;
background-color: rgba(255, 255, 255, .05);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .05) 54%, rgba(255, 255, 255, .01) 100%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
backdrop-filter: blur(20px) saturate(150%);
}
.sa-mv-kind {
margin: 0 0 12px;
font-size: 12px;
font-weight: 600;
color: var(--sa-blue-lift);
}
.sa-mv-text {
margin: 0;
font-size: clamp(15px, 1.1vw, 17px);
font-weight: 300;
line-height: 1.55;
color: var(--sa-white);
}
/* --- founding and quality --- */
.sa-found {
padding: clamp(64px, 7vw, 104px) 0;
background-color: var(--sa-navy-deep);
background-image: linear-gradient(180deg, #0D151F 0%, #101B37 58%, #0D151F 100%);
}
.sa-found-flow {
position: relative;
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr) minmax(0, 1fr);
align-items: center;
gap: clamp(26px, 4.4vw, 72px);
margin-top: clamp(32px, 3.6vw, 48px);
}
.sa-found-labs { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px); }
.sa-found-card {
padding: clamp(22px, 2.4vw, 30px);
border: 0;
border-radius: 10px;
background-color: rgba(255, 255, 255, .022);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, .022) 54%, rgba(255, 255, 255, .006) 100%);
-webkit-backdrop-filter: blur(16px) saturate(135%);
backdrop-filter: blur(16px) saturate(135%);
}
.sa-found-card.is-us {
background-image: linear-gradient(180deg,
rgba(78, 114, 183, .14) 0%, rgba(47, 87, 154, .07) 56%, rgba(22, 36, 74, .02) 100%);
}
.sa-found-name {
margin: 0 0 10px;
font-size: clamp(16px, 1.4vw, 19px);
font-weight: 800;
line-height: 1.25;
color: var(--sa-white);
}
.sa-found-text {
margin: 0;
font-size: 14px;
font-weight: 300;
line-height: 1.55;
color: rgba(255, 255, 255, .80);
}
.sa-found-list {
display: flex;
flex-direction: column;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
font-weight: 300;
line-height: 1.45;
color: rgba(255, 255, 255, .80);
}
.sa-found-iso {
display: flex;
flex-direction: column;
gap: 14px;
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.sa-found-iso li { display: flex; align-items: center; gap: 12px; }
.sa-found-iso svg { flex: none; color: var(--sa-blue-lift); }
.sa-found-iso span span { display: block; }
.sa-found-iso-code { font-size: 14.5px; font-weight: 600; color: var(--sa-white); }
.sa-found-iso-desc { font-size: 12.5px; font-weight: 300; color: rgba(255, 255, 255, .74); }
/* --- team --- */
.sa-team {
padding: clamp(64px, 7vw, 104px) 0;
background-color: var(--sa-navy-deep);
background-image: linear-gradient(180deg, #0D151F 0%, #101B37 100%);
}
.sa-team-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 2vw, 26px);
margin: clamp(32px, 3.6vw, 48px) 0 0;
padding: 0;
list-style: none;
}
.sa-team-link {
display: block;
overflow: hidden;
border-radius: 10px;
text-decoration: none;
background-color: rgba(255, 255, 255, .045);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .11) 0%, rgba(255, 255, 255, .045) 54%, rgba(255, 255, 255, .01) 100%);
-webkit-backdrop-filter: blur(18px) saturate(145%);
backdrop-filter: blur(18px) saturate(145%);
transition: transform .28s ease, background-color .28s ease;
}
.sa-team-link:hover,
.sa-team-link:focus-visible { transform: translateY(-3px); background-color: rgba(255, 255, 255, .09); }
.sa-team-media {
display: block;
width: 132px;
aspect-ratio: 1 / 1;
margin: 22px 22px 0;
border-radius: 10px;
overflow: hidden;
}
.sa-team-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 20%;
filter: grayscale(1) contrast(1.05) brightness(1.03);
transition: transform .5s ease;
}
.sa-team-link:hover .sa-team-img { transform: scale(1.035); }
.sa-team-body {
display: flex;
flex-direction: column;
gap: 5px;
padding: 16px 22px 22px;
}
.sa-team-name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--sa-white); }
.sa-team-role { font-size: 13px; font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, .76); }
.sa-team-in {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 8px;
font-size: 12.5px;
font-weight: 600;
color: var(--sa-blue-lift);
}
/* --- office --- */
.sa-office {
padding: clamp(64px, 7vw, 104px) 0;
background-color: var(--sa-navy-deep);
background-image: linear-gradient(180deg, #101B37 0%, #0D151F 100%);
}
.sa-office-grid {
display: grid;
grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
align-items: center;
gap: clamp(28px, 4vw, 56px);
}
.sa-office-addr {
margin: 20px 0 0;
font-size: 15px;
font-style: normal;
font-weight: 300;
line-height: 1.75;
color: rgba(255, 255, 255, .82);
}
.sa-office-links { display: flex; flex-wrap: wrap; gap: 22px; margin: 22px 0 0; }
.sa-office-a {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 14.5px;
font-weight: 600;
color: var(--sa-blue-lift);
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-size: 0 1px;
background-position: 0 100%;
transition: background-size .28s ease;
}
.sa-office-a:hover, .sa-office-a:focus-visible { background-size: 100% 1px; }
.sa-office-map { margin: 0; }
.sa-office-map img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
}
.sa-office-credit {
margin: 10px 0 0;
font-size: 11.5px;
font-weight: 300;
color: rgba(255, 255, 255, .58);
}
.sa-nav-links-a.is-current { color: var(--sa-white); font-weight: 600; }
.sa-pillars-foot {
margin: clamp(28px, 3.2vw, 42px) auto 0;
max-width: 68ch;
font-size: 14.5px;
font-weight: 300;
line-height: 1.6;
text-align: center;
color: rgba(255, 255, 255, .74);
}
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.sa-mv-card, .sa-found-card, .sa-team-link { background-color: rgba(22, 36, 74, .92); }
}
@media (max-width: 1000px) {
.sa-found-flow { grid-template-columns: 1fr; }
.sa-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-office-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
.sa-ab-in { width: calc(100% - 40px); }
.sa-mv-grid { grid-template-columns: 1fr; }
.sa-ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.sa-ab-in { width: calc(100% - 32px); }
.sa-team-grid { grid-template-columns: 1fr; }
.sa-ab-h2 { max-width: none; }
}
/* --- about hero: title and lead on the left, the office on the right --- */
.sa-ab-top {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
/* the introduction is short and the photograph is tall: centring the words
on the picture reads as intended, not as a column that ran out */
align-items: center;
gap: clamp(28px, 4vw, 60px);
}
/* drop the photo by the h1's ascender gap so its top edge lands on the
cap height of "About us" rather than on the invisible line box */
.sa-ab-photo { margin-top: .1em; font-size: clamp(38px, 4.8vw, 66px); }
.sa-ab-photo { margin: 0; }
.sa-ab-photo img {
display: block;
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .85);
}
@media (max-width: 900px) {
.sa-ab-top { grid-template-columns: 1fr; gap: 28px; }
}
#two-pillars .sa-pillars-h2 {
font-size: clamp(19px, 1.9vw, 26px);
font-weight: 700;
line-height: 1.25;
}
#two-pillars .sa-pillars-head { max-width: 780px; }
.sa-found-wires {
position: absolute;
inset: 0;
z-index: 0;
overflow: visible;
pointer-events: none;
}
.sa-found-card { position: relative; z-index: 1; }
@media (max-width: 1000px) {
.sa-found-wires { display: none; }
}
/* ======================================================== navigation menu */
.sa-nav-item { position: relative; }
.sa-nav-trigger {
display: inline-flex;
align-items: center;
gap: 6px;
border: 0;
cursor: pointer;
font: inherit;
font-size: 14px;
font-weight: 400;
background-color: transparent;
}
.sa-nav-chev { transition: transform .22s ease; }
.sa-nav-trigger[aria-expanded="true"] .sa-nav-chev { transform: rotate(180deg); }
.sa-nav-links-a.is-current {
color: var(--sa-white);
font-weight: 600;
background-color: #ffffff1f;
}
.sa-nav-menu {
position: absolute;
top: calc(100% + 12px);
left: 50%;
z-index: 10;
display: flex;
flex-direction: column;
gap: 2px;
width: 336px;
padding: 8px;
border: 0;
border-radius: 18px;
background-color: #101b37f5;
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
box-shadow: 0 22px 50px -18px #060a13cc;
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(-6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.sa-nav-menu[data-open="true"] {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* a hover bridge, so the pointer can cross the gap without the menu closing */
.sa-nav-menu::before {
content: "";
position: absolute;
left: 0; right: 0; top: -14px;
height: 14px;
}
.sa-nav-menu-a {
display: flex;
flex-direction: column;
gap: 3px;
padding: 11px 14px;
border-radius: 12px;
text-decoration: none;
transition: background-color .18s ease;
}
.sa-nav-menu-a:hover,
.sa-nav-menu-a:focus-visible { background-color: #ffffff1a; }
.sa-nav-menu-a.is-current { background-color: #ffffff26; }
.sa-nav-menu-t {
font-size: 14.5px;
font-weight: 600;
line-height: 1.25;
color: var(--sa-white);
}
.sa-nav-menu-d {
font-size: 12.5px;
font-weight: 300;
line-height: 1.4;
color: #cfd9ee;
}
@media screen and (max-width: 991px) {
/* inside the burger panel the menu is just a nested block, always open */
.sa-nav-item { width: 100%; }
.sa-nav-trigger { width: 100%; justify-content: space-between; padding: 12px 14px; }
.sa-nav-menu {
position: static;
width: auto;
margin: 2px 0 6px;
padding: 4px 0 4px 10px;
border-radius: 0;
background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
max-height: 0;
overflow: hidden;
transition: max-height .28s ease;
}
.sa-nav-menu[data-open="true"] { max-height: 420px; transform: none; }
.sa-nav-menu::before { display: none; }
.sa-nav-menu-a { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
.sa-nav-menu, .sa-nav-chev { transition-duration: .01ms; }
}
/* ============ projects page: same family as the landing and about pages ====
Same type scale, same glass, same radii. The page keeps its light ground —
the rest of the site is dark, and the contrast is the point — but the
uppercase condensed headings, the ruled sheet and the outlined chips were a
different design language and had to go. */
.sa-gal {
position: relative;
overflow: hidden;
padding: 0 0 clamp(72px, 8vw, 120px);
background-color: var(--sa-white);
background-image: linear-gradient(180deg, var(--sa-white) 0%, var(--sa-surface-2) 100%);
}
.sa-gal::before {
content: "";
position: absolute;
top: -220px;
left: 50%;
width: min(1100px, 130%);
height: 720px;
transform: translateX(-50%);
background-image: radial-gradient(50% 50% at 50% 50%,
rgba(78, 114, 183, .18) 0%, rgba(47, 87, 154, .07) 46%, rgba(230, 236, 247, 0) 76%);
pointer-events: none;
}
.sa-gal-in {
position: relative;
z-index: 1;
width: min(1240px, calc(100% - 64px));
max-width: none;
margin: 0 auto;
padding: 0;
}
/* ------------------------------------------------------------------ header */
.sa-gal-head {
padding: clamp(140px, 15vw, 200px) 0 clamp(26px, 3vw, 38px);
text-align: left;
}
.sa-gal-eyebrow { display: none; }
.sa-gal-count { display: none; }
.sa-gal-h2 {
margin: 0;
max-width: none;
font-size: clamp(38px, 4.8vw, 66px);
font-weight: 800;
line-height: 1.04;
letter-spacing: 0;
text-transform: none;
color: var(--sa-navy);
}
.sa-gal-sub {
margin: 20px 0 0;
max-width: 52ch;
font-size: clamp(15px, 1.2vw, 18px);
font-weight: 300;
line-height: 1.62;
color: #101b37c2;
}
/* ---------------------------------------------------- keywords, as glass */
.sa-gal-keys {
justify-content: flex-start;
gap: 8px;
padding: 0 0 clamp(26px, 3vw, 38px);
}
.sa-gk {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 11px 18px;
border: 0;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
text-transform: none;
color: var(--sa-navy);
background-color: rgba(255, 255, 255, .62);
-webkit-backdrop-filter: blur(22px) saturate(160%);
backdrop-filter: blur(22px) saturate(160%);
box-shadow: 0 8px 20px -12px rgba(16, 27, 55, .40);
transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.sa-gk::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 62%);
pointer-events: none;
}
.sa-gk:hover { border-color: transparent; background-color: rgba(255, 255, 255, .92); }
.sa-gk[aria-pressed="true"] {
background-color: var(--sa-blue);
border-color: transparent;
color: var(--sa-white);
box-shadow: 0 10px 26px -10px rgba(78, 114, 183, .70);
}
/* --------------------------------------------------- smaller, equal cards */
.sa-gal-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-auto-flow: row;
gap: 2px; /* the tiles read as one sheet, barely parted */
background: none;
border: 0;
}
.sa-tile,
.sa-tile.is-feature,
.sa-tile.is-major,
.sa-tile.is-half,
.sa-tile.is-banner { grid-column: auto; }
.sa-tile {
padding: 0 0 20px; /* the picture runs to the tile's edges */
border-radius: 0;
background-color: rgba(255, 255, 255, .66);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .58) 55%, rgba(255, 255, 255, .40) 100%);
-webkit-backdrop-filter: blur(22px) saturate(155%);
backdrop-filter: blur(22px) saturate(155%);
box-shadow: 0 18px 40px -26px rgba(16, 27, 55, .55);
transition: background-color .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1),
box-shadow .3s ease;
}
/* the little corner ticks were hairlines; the site has no strokes */
.sa-tile::before,
.sa-tile::after { display: none; }
.sa-tile:hover {
background-color: rgba(255, 255, 255, .90);
transform: translateY(-3px);
box-shadow: 0 26px 50px -28px rgba(16, 27, 55, .62);
}
.sa-tile-media,
.sa-tile.is-feature .sa-tile-media,
.sa-tile.is-banner .sa-tile-media {
aspect-ratio: 16 / 10;
margin-bottom: 16px;
border-radius: 0;
}
.sa-tile-stat { display: none; }
.sa-tile-stat-hidden { border-radius: 0; padding: 8px 12px; }
.sa-tile-stat-n { font-size: 15.5px; }
.sa-tile-stat-l { font-size: 8.5px; }
.sa-tile-keys { gap: 10px; margin-bottom: 9px; padding: 0 4px; }
.sa-tile-key {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--sa-support);
}
.sa-tile-title,
.sa-tile.is-feature .sa-tile-title,
.sa-tile.is-banner .sa-tile-title {
margin: 0 0 8px;
padding: 0 4px;
font-size: 18px;
font-weight: 800;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
}
.sa-tile-client {
padding: 0 4px;
font-size: 12.5px;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: #101b37a6;
}
.sa-tile-hook p { padding: 0 4px; font-size: 13.5px; }
.sa-tile-go {
padding: 0 4px;
font-size: 12.5px;
letter-spacing: 0;
text-transform: none;
}
.sa-tile-award {
margin: 18px 4px 0;
border-radius: 10px;
align-items: flex-start;
font-size: 12px;
letter-spacing: 0;
text-transform: none;
}
/* ------------------------------------------------------------ opened tile */
.sa-tile.is-open {
grid-column: 1 / -1;
gap: 32px;
padding: 18px 18px 26px;
background-color: rgba(255, 255, 255, .90);
}
.sa-tile.is-open .sa-tile-media { flex: 0 0 42%; aspect-ratio: 16 / 11; }
.sa-tile.is-open .sa-tile-title { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: 0; }
.sa-tile.is-open .sa-tile-detail p:not(.sa-tile-award) { font-size: 14.5px; }
/* the fact rows used a hairline rule; a fading one reads softer and is not a box */
.sa-tile-fact {
border-top: 0;
background-image: linear-gradient(90deg,
rgba(47, 87, 154, .22) 0%, rgba(47, 87, 154, .10) 62%, rgba(47, 87, 154, 0) 100%);
background-repeat: no-repeat;
background-size: 100% 1px;
background-position: 0 0;
}
.sa-tile-fact dt { letter-spacing: 0; text-transform: none; font-size: 11.5px; }
@media (max-width: 1100px) {
.sa-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.sa-gal-in { width: calc(100% - 40px); }
.sa-tile.is-open { flex-direction: column; gap: 18px; }
.sa-tile.is-open .sa-tile-media { flex: none; width: 100%; }
}
@media (max-width: 620px) {
.sa-gal-in { width: calc(100% - 32px); }
.sa-gal-grid { grid-template-columns: 1fr; }
}
/* ------------------------------------------- the real certification marks */
/* The badge artwork carries its own white plate and rounded corners, so it
needs no background and no radius of ours — adding them put a square white
shoulder outside the mark's own outline. */
.sa-foot-cert-list { gap: 16px; }
.sa-foot-cert-item {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 9px;
}
.sa-foot-cert-img {
display: block;
width: 132px;
max-width: 100%;
height: auto;
}
.sa-foot-cert-body { display: flex; flex-direction: column; gap: 2px; }
.sa-found-iso li {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.sa-found-iso-img {
display: block;
width: 150px;
max-width: 100%;
height: auto;
}
.sa-found-iso-body { display: flex; flex-direction: column; gap: 3px; }
/* the award chip sits inside .sa-tile-detail, so the paragraph rules there
were overriding its own colour and size */
.sa-tile .sa-tile-award {
color: var(--sa-white);
font-size: 12px;
line-height: 1.5;
}
.sa-tile .sa-tile-award::before { line-height: 1.5; }
.sa-tile-close { border-radius: 0 10px 0 10px; }
/* ---- founders on a light ground, so the page has a rhythm of its own ---- */
.sa-team {
position: relative;
overflow: hidden;
background-color: var(--sa-white);
background-image: linear-gradient(180deg, var(--sa-white) 0%, var(--sa-surface-2) 100%);
}
.sa-team::before {
content: "";
position: absolute;
top: -240px;
left: 50%;
width: min(1000px, 130%);
height: 640px;
transform: translateX(-50%);
background-image: radial-gradient(50% 50% at 50% 50%,
rgba(78, 114, 183, .16) 0%, rgba(47, 87, 154, .06) 46%, rgba(230, 236, 247, 0) 76%);
pointer-events: none;
}
.sa-team .sa-ab-in { position: relative; z-index: 1; }
.sa-team .sa-ab-eyebrow { color: var(--sa-support); }
.sa-team .sa-ab-h2 { color: var(--sa-navy); }
.sa-team .sa-team-link {
background-color: rgba(255, 255, 255, .68);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .60) 55%, rgba(255, 255, 255, .42) 100%);
-webkit-backdrop-filter: blur(22px) saturate(155%);
backdrop-filter: blur(22px) saturate(155%);
box-shadow: 0 18px 40px -26px rgba(16, 27, 55, .55);
}
.sa-team .sa-team-link:hover,
.sa-team .sa-team-link:focus-visible {
background-color: rgba(255, 255, 255, .92);
box-shadow: 0 26px 50px -28px rgba(16, 27, 55, .62);
}
.sa-team .sa-team-name { color: var(--sa-navy); }
.sa-team .sa-team-role { color: rgba(16, 27, 55, .72); }
.sa-team .sa-team-in { color: var(--sa-support); }
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.sa-team .sa-team-link { background-color: rgba(255, 255, 255, .94); }
}
/* ------------------------------------------ two pillars: the overlap moves */
.sa-pillars-lead {
display: block;
margin-bottom: 6px;
font-weight: 600;
color: var(--sa-white);
}
/* the bright lens where the two fields meet */
.sa-venn-x {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 46%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
background-image: radial-gradient(50% 50% at 50% 50%,
rgba(160, 194, 245, .55) 0%, rgba(111, 143, 201, .22) 46%, rgba(78, 114, 183, 0) 74%);
filter: blur(14px);
opacity: 0;
pointer-events: none;
}
/* before the section is reached the two fields sit apart */
.sa-venn-c.is-a { transform: translate(7%, -9%) scale(.94); opacity: 0; }
.sa-venn-c.is-b { transform: translate(-7%, 9%) scale(.94); opacity: 0; }
.sa-venn-t { opacity: 0; }
/* …then they move together, and keep breathing so the overlap never settles */
/* …then they move together and never stop: each field wanders its own slow
loop and lets its outline go a little off-round as it goes, the way wax
does in a lamp. Two different periods, so the pair never visibly repeats. */
.sa-pillars.is-in .sa-venn-c.is-a {
animation: sa-venn-in-a .95s cubic-bezier(.22, 1, .36, 1) both,
sa-lava-a 19s 1.05s ease-in-out infinite;
}
.sa-pillars.is-in .sa-venn-c.is-b {
animation: sa-venn-in-b .95s .08s cubic-bezier(.22, 1, .36, 1) both,
sa-lava-b 24s 1.13s ease-in-out infinite;
}
.sa-pillars.is-in .sa-venn-x {
animation: sa-venn-lens 1.1s .45s ease-out both,
sa-lava-lens 15s 1.55s ease-in-out infinite;
}
.sa-pillars.is-in .sa-venn-t.is-a { animation: sa-venn-label .6s .62s ease-out both; }
.sa-pillars.is-in .sa-venn-t.is-b { animation: sa-venn-label .6s .74s ease-out both; }
@keyframes sa-venn-in-a {
from { transform: translate(7%, -9%) scale(.94); opacity: 0; }
to { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes sa-venn-in-b {
from { transform: translate(-7%, 9%) scale(.94); opacity: 0; }
to { transform: translate(0, 0) scale(1); opacity: 1; }
}
@keyframes sa-lava-a {
0% { transform: translate(0, 0) scale(1); border-radius: 50%; }
22% { transform: translate(-5%, 4%) scale(1.05); border-radius: 57% 43% 47% 53% / 51% 49% 51% 49%; }
46% { transform: translate(-2%, 9%) scale(.97); border-radius: 45% 55% 53% 47% / 56% 44% 56% 44%; }
68% { transform: translate(4%, 5%) scale(1.04); border-radius: 54% 46% 44% 56% / 46% 57% 43% 54%; }
86% { transform: translate(2%, -2%) scale(1.01); border-radius: 49% 51% 55% 45% / 53% 47% 53% 47%; }
100% { transform: translate(0, 0) scale(1); border-radius: 50%; }
}
@keyframes sa-lava-b {
0% { transform: translate(0, 0) scale(1); border-radius: 50%; }
18% { transform: translate(5%, -3%) scale(1.04); border-radius: 44% 56% 52% 48% / 55% 47% 53% 45%; }
42% { transform: translate(3%, -8%) scale(.98); border-radius: 55% 45% 46% 54% / 44% 56% 44% 56%; }
64% { transform: translate(-4%, -5%) scale(1.05); border-radius: 47% 53% 57% 43% / 54% 45% 55% 46%; }
84% { transform: translate(-2%, 2%) scale(1.01); border-radius: 52% 48% 45% 55% / 48% 53% 47% 52%; }
100% { transform: translate(0, 0) scale(1); border-radius: 50%; }
}
/* the light in the overlap swells and drifts with them */
@keyframes sa-lava-lens {
0% { opacity: .80; transform: translate(-50%, -50%) scale(1); }
30% { opacity: 1; transform: translate(-46%, -47%) scale(1.16); }
55% { opacity: .86; transform: translate(-52%, -44%) scale(1.04); }
80% { opacity: 1; transform: translate(-49%, -53%) scale(1.14); }
100% { opacity: .80; transform: translate(-50%, -50%) scale(1); }
}
@keyframes sa-venn-lens {
from { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes sa-venn-lens-pulse {
from { opacity: .82; transform: translate(-50%, -50%) scale(1); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes sa-venn-label {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Motion here is decorative: the diagram must read identically without it. */
@media (prefers-reduced-motion: reduce) {
.sa-venn-c.is-a, .sa-venn-c.is-b { transform: none; opacity: 1; border-radius: 50%; }
.sa-venn-t { opacity: 1; }
.sa-venn-x { opacity: .9; }
.sa-pillars.is-in .sa-venn-c.is-a,
.sa-pillars.is-in .sa-venn-c.is-b,
.sa-pillars.is-in .sa-venn-x,
.sa-pillars.is-in .sa-venn-t.is-a,
.sa-pillars.is-in .sa-venn-t.is-b { animation: none; }
}
/* no JavaScript, no animation — so the finished state must be the default */
.no-js .sa-venn-c.is-a, .no-js .sa-venn-c.is-b { transform: none; opacity: 1; }
.no-js .sa-venn-t { opacity: 1; }
.no-js .sa-venn-x { opacity: .9; }
.sa-w-more { margin: clamp(28px, 3.2vw, 44px) 0 0; }
.sa-w-more-a {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
font-weight: 600;
color: var(--sa-blue-lift);
text-decoration: none;
}
.sa-w-more-a svg { transition: transform .22s ease; }
.sa-w-more-a:hover svg, .sa-w-more-a:focus-visible svg { transform: translateX(3px); }
/* a project that lives on its own product site: the card links out instead of
expanding, so the hook stays visible rather than waiting for a hover */
.sa-tile.is-link { display: flex; text-decoration: none; }
.sa-tile.is-link .sa-tile-hook.is-open { grid-template-rows: 1fr; opacity: 1; }
.sa-tile.is-link .sa-tile-go::after { width: 20px; }
.sa-tile.is-link:hover .sa-tile-go::after { width: 34px; }
/* ============================================ featured cards, rebuilt ======
Four equal boxes with the photograph squeezed into a strip at the top left
the text ragged and the bottom of every card empty. These are portrait now:
the photograph fills the card and the words sit on a glass panel over it, so
the picture does the work and there is no dead space to explain. */
.sa-w[data-view="cards"] .sa-w-cards {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: clamp(14px, 1.5vw, 20px);
}
.sa-w[data-view="cards"] .sa-w-card {
position: relative;
display: block;
aspect-ratio: 4 / 5;
border-radius: 14px;
overflow: hidden;
background-color: var(--sa-ink);
box-shadow: 0 22px 48px -28px rgba(0, 0, 0, .9);
transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease, opacity .22s ease;
}
.sa-w[data-view="cards"] .sa-w-card:hover,
.sa-w[data-view="cards"] .sa-w-card:focus-within {
background-color: var(--sa-ink);
transform: translateY(-6px);
box-shadow: 0 34px 62px -30px rgba(0, 0, 0, .95);
}
.sa-w[data-view="cards"] .sa-w-card-media {
position: absolute;
inset: 0;
aspect-ratio: auto;
}
.sa-w[data-view="cards"] .sa-w-card-img {
opacity: 1;
object-position: 50% 60%;
transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.sa-w[data-view="cards"] .sa-w-card:hover .sa-w-card-img,
.sa-w[data-view="cards"] .sa-w-card:focus-within .sa-w-card-img { transform: scale(1.07); }
/* the photograph has to carry white type at the bottom whatever it shows */
.sa-w[data-view="cards"] .sa-w-card-media::after {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(180deg,
rgba(13, 21, 31, .16) 0%,
rgba(13, 21, 31, .06) 28%,
rgba(13, 21, 31, .74) 60%,
rgba(13, 21, 31, .96) 100%);
pointer-events: none;
}
.sa-w[data-view="cards"] .sa-w-card-icon {
top: 14px;
left: 14px;
bottom: auto;
width: 36px;
height: 36px;
}
.sa-w[data-view="cards"] .sa-w-card-body {
position: absolute;
inset: auto 10px 10px;
z-index: 2;
display: flex;
flex-direction: column;
flex: none;
padding: 16px 16px 15px;
border-radius: 10px;
background-color: rgba(13, 21, 31, .62);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 46%, rgba(255, 255, 255, .01) 100%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
transition: background-color .3s ease;
}
.sa-w[data-view="cards"] .sa-w-card:hover .sa-w-card-body,
.sa-w[data-view="cards"] .sa-w-card:focus-within .sa-w-card-body { background-color: rgba(13, 21, 31, .70); }
.sa-w[data-view="cards"] .sa-w-card-name {
margin: 0 0 6px;
font-size: 11.5px;
letter-spacing: .01em;
color: var(--sa-blue-lift);
}
.sa-w[data-view="cards"] .sa-w-card-title {
font-size: clamp(16px, 1.3vw, 18px);
font-weight: 800;
line-height: 1.24;
}
.sa-w[data-view="cards"] .sa-w-card-client {
margin: 7px 0 0;
font-size: 12.5px;
color: rgba(255, 255, 255, .78);
}
/* the keyword chips repeat the filter row above and crowd the glass */
.sa-w[data-view="cards"] .sa-w-card-keys { display: none; }
.sa-w[data-view="cards"] .sa-w-card-go {
margin-top: 12px;
padding-top: 0;
font-size: 13px;
font-weight: 600;
color: var(--sa-blue-lift);
}
.sa-w[data-view="cards"] .sa-w-card.is-dim { opacity: .38; background-color: var(--sa-ink); }
.sa-w[data-view="cards"] .sa-w-card.is-dim:hover { opacity: .72; transform: none; }
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
.sa-w[data-view="cards"] .sa-w-card-body { background-color: rgba(13, 21, 31, .86); }
}
@media (max-width: 720px) {
.sa-w[data-view="cards"] .sa-w-cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sa-w[data-view="cards"] .sa-w-card { aspect-ratio: 5 / 6; }
}
/* ============ the Solution section, given the weight it deserves ==========
This is the section the whole page exists to reach, and it was sitting in
the same narrow column as everything else with four equal tiles. Wider
field, taller cards, and the flagship given twice the width so the row has
a subject rather than four peers. */
/* The section is meant to be taken in at a glance, so it is sized against the
window rather than the page: the padding and the type are held to a share
of the viewport height, and the stage takes whatever is left. On a laptop
the whole thing — heading, filters, earth and rail — lands in one screen. */
.sa-w {
padding: clamp(96px, 10vh, 150px) 0 clamp(56px, 7vh, 110px);
scroll-margin-top: 88px;
}
.sa-w-in { width: min(1340px, calc(100% - 56px)); }
.sa-w-h2 { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.02; }
.sa-w-sub { font-size: clamp(15px, 1.15vw, 18px); max-width: 54ch; }
.sa-w-controls { margin: clamp(24px, 2.6vw, 34px) 0 clamp(18px, 2vw, 26px); }
/* Above the split the section is a column of fixed things — heading, subtitle,
filters, and the link at the foot. The split itself takes whatever height is
left over, so the whole section lands inside one screen on any laptop
without a single hard-coded number. */
@media screen and (min-width: 901px) {
.sa-w[data-view="globe"] { display: flex; min-height: 100vh; }
.sa-w[data-view="globe"] .sa-w-in {
display: flex;
flex-direction: column;
justify-content: center;
/* it fills the section's height by stretching, never its width by growing —
growing would swallow the page gutter and put the heading on the edge */
flex: 0 0 auto;
}
.sa-w[data-view="globe"] .sa-w-head,
.sa-w[data-view="globe"] .sa-w-controls,
.sa-w[data-view="globe"] .sa-w-more { flex: 0 0 auto; }
.sa-w[data-view="globe"] .sa-w-split {
/* a basis of zero, so the rail's own card heights do not decide how tall
the section is — the window does */
flex: 1 1 0%;
min-height: 320px;
max-height: 660px;
}
/* and the rows share out whatever height the rail is given */
.sa-w[data-view="globe"] .sa-w-cards { min-height: 0; }
.sa-w[data-view="globe"] .sa-w-card {
flex: 1 1 0%;
height: auto;
min-height: 60px;
max-height: 118px;
}
}
/* A laptop screen is wide but not tall. Below about 860px of window the type
and the spacing come down a further step so the earth still has room, and
the section keeps landing in one screen rather than spilling into the next. */
@media screen and (min-width: 901px) and (max-height: 940px) {
.sa-w[data-view="globe"] { padding: 84px 0 44px; }
.sa-w[data-view="globe"] .sa-w-h2 { font-size: clamp(34px, 3.4vw, 48px); }
.sa-w[data-view="globe"] .sa-w-sub {
margin-top: 10px;
font-size: 14.5px;
line-height: 1.5;
max-width: 62ch;
}
.sa-w[data-view="globe"] .sa-w-controls { margin: 18px 0 14px; }
.sa-w[data-view="globe"] .sa-w-split { margin-top: 16px; min-height: 296px; }
.sa-w[data-view="globe"] .sa-w-cards { gap: clamp(8px, 1vw, 14px); }
.sa-w[data-view="globe"] .sa-w-more { margin-top: 16px; }
.sa-w[data-view="globe"] .sa-w-key { padding: 8px 15px; font-size: 13.5px; }
}
.sa-w[data-view="cards"] .sa-w-cards {
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-auto-rows: clamp(400px, 32vw, 520px);
gap: clamp(16px, 1.5vw, 22px);
}
/* every card fills the row, so the wide one is wide rather than tall */
.sa-w[data-view="cards"] .sa-w-card { aspect-ratio: auto; height: 100%; }
.sa-w[data-view="cards"] .sa-w-card:first-child { grid-column: span 2; }
.sa-w[data-view="cards"] .sa-w-card:first-child .sa-w-card-title {
font-size: clamp(22px, 2.1vw, 30px);
line-height: 1.16;
}
.sa-w[data-view="cards"] .sa-w-card:first-child .sa-w-card-body { padding: 22px 22px 20px; inset: auto 12px 12px; }
.sa-w[data-view="cards"] .sa-w-card:first-child .sa-w-card-name { font-size: 12.5px; margin-bottom: 8px; }
.sa-w[data-view="cards"] .sa-w-card:first-child .sa-w-card-client { font-size: 13.5px; }
.sa-w[data-view="cards"] .sa-w-card:first-child .sa-w-card-go { font-size: 14px; margin-top: 14px; }
.sa-w[data-view="cards"] .sa-w-card:first-child .sa-w-card-icon { width: 42px; height: 42px; top: 18px; left: 18px; }
@media (max-width: 1180px) {
.sa-w[data-view="cards"] .sa-w-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(320px, 42vw, 430px); }
.sa-w[data-view="cards"] .sa-w-card:first-child { grid-column: span 2; }
}
@media (max-width: 720px) {
.sa-w-in { width: calc(100% - 32px); }
.sa-w[data-view="cards"] .sa-w-cards { grid-template-columns: 1fr; grid-auto-rows: clamp(300px, 78vw, 400px); }
.sa-w[data-view="cards"] .sa-w-card:first-child { grid-column: span 1; }
}
/* the three companion cards are narrow, so their titles need to be a notch
smaller or they wrap into ribbons */
.sa-w[data-view="cards"] .sa-w-card:not(:first-child) .sa-w-card-title {
font-size: clamp(15px, 1.15vw, 16.5px);
line-height: 1.28;
}
.sa-w[data-view="cards"] .sa-w-card:not(:first-child) .sa-w-card-body { padding: 14px 14px 13px; }
.sa-w[data-view="cards"] .sa-w-card:not(:first-child) .sa-w-card-client { font-size: 12px; margin-top: 6px; }
.sa-w[data-view="cards"] .sa-w-card:not(:first-child) .sa-w-card-go { font-size: 12.5px; margin-top: 10px; }
@media (max-width: 1180px) {
.sa-w[data-view="cards"] .sa-w-card:not(:first-child) .sa-w-card-title { font-size: 17px; }
.sa-w[data-view="cards"] .sa-w-card:not(:first-child) .sa-w-card-body { padding: 18px 18px 16px; }
}
/* ================= the earth and the work, side by side ==================
The globe stops being a full-bleed backdrop and becomes half a composition:
the world on the left with the light gathered behind it, the projects
travelling down a rail on the right, one of them lit at a time and tied to
its pin on the earth. */
.sa-w-split {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr);
align-items: stretch;
gap: clamp(20px, 2.6vw, 44px);
margin-top: clamp(20px, 2.4vw, 34px);
}
/* the light behind the world, so the earth reads against a lifted field */
.sa-w-split::before {
content: "";
position: absolute;
top: 50%;
left: 30%;
width: min(1000px, 80%);
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
background-image: radial-gradient(50% 50% at 50% 50%,
rgba(63, 104, 178, .40) 0%,
rgba(38, 68, 128, .22) 38%,
rgba(22, 36, 74, .10) 60%,
rgba(13, 21, 31, 0) 78%);
filter: blur(6px);
pointer-events: none;
z-index: 0;
}
.sa-w[data-view="globe"] .sa-w-stage {
position: relative;
z-index: 1;
width: auto;
max-width: none;
margin-left: 0;
height: 100%;
border-radius: 16px;
}
/* both halves are on screen at once now */
.sa-w[data-view="globe"] .sa-w-cards { display: flex; }
/* ------------------------------------------------------------- the rail */
/* The reference's shape: a short bold name written to the left of a small
landscape photograph, the words running just onto its edge, four of them
stacked with a thin travelling rail beside them marking which one the
earth is pointing at. */
.sa-w[data-view="globe"] .sa-w-cards {
position: relative;
z-index: 1;
flex-direction: column;
justify-content: center;
gap: clamp(12px, 1.3vw, 20px);
height: 100%;
padding-right: clamp(16px, 1.6vw, 24px);
overflow: hidden;
--sa-n: 4;
--sa-live: 0;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
}
/* the track, and the lit length of it that travels with the live card */
.sa-w[data-view="globe"] .sa-w-cards::before,
.sa-w[data-view="globe"] .sa-w-cards::after {
content: "";
position: absolute;
right: 0;
width: 2px;
border-radius: 2px;
pointer-events: none;
}
.sa-w[data-view="globe"] .sa-w-cards::before {
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, .09);
}
.sa-w[data-view="globe"] .sa-w-cards::after {
height: calc(100% / var(--sa-n));
top: calc(var(--sa-live) * 100% / var(--sa-n));
background-image: linear-gradient(180deg, #A8C6F6 0%, #5D82C4 100%);
transition: top .6s cubic-bezier(.22, 1, .36, 1);
}
.sa-w[data-view="globe"] .sa-w-card {
position: relative;
display: block;
height: clamp(96px, 10vw, 150px);
aspect-ratio: auto;
grid-template-columns: none;
border-radius: 0;
overflow: visible;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
/* the photograph is bounded rather than a bare percentage, so on a narrow
rail the words keep a readable measure instead of being squeezed under it */
--sa-shot: clamp(180px, 60%, 330px);
transform: translateX(10px);
transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.sa-w[data-view="globe"] .sa-w-card-body { opacity: .66; transition: opacity .55s ease; }
.sa-w[data-view="globe"] .sa-w-card.is-live .sa-w-card-body,
.sa-w[data-view="globe"] .sa-w-card:hover .sa-w-card-body,
.sa-w[data-view="globe"] .sa-w-card:focus-within .sa-w-card-body { opacity: 1; }
.sa-w[data-view="globe"] .sa-w-card:first-child { grid-column: auto; }
.sa-w[data-view="globe"] .sa-w-card.is-live,
.sa-w[data-view="globe"] .sa-w-card:hover,
.sa-w[data-view="globe"] .sa-w-card:focus-within {
transform: translateX(0);
}
/* no lit edge here — the travelling rail beside the column does that job */
.sa-w[data-view="globe"] .sa-w-card::before { display: none; }
/* the photograph sits on the right of the row */
.sa-w[data-view="globe"] .sa-w-card-media {
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: auto;
width: var(--sa-shot);
height: auto;
border-radius: 0;
overflow: hidden;
box-shadow: 0 14px 30px -22px rgba(0, 0, 0, .9);
}
.sa-w[data-view="globe"] .sa-w-card-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 44%;
/* the photographs are shown as they are — the same colour as the earth
beside them and the picture in the hero; only the words step back */
transform: scale(1.03);
transition: transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.sa-w[data-view="globe"] .sa-w-card.is-live .sa-w-card-img,
.sa-w[data-view="globe"] .sa-w-card:hover .sa-w-card-img,
.sa-w[data-view="globe"] .sa-w-card:focus-within .sa-w-card-img {
transform: scale(1.08);
}
/* No shadow over the pictures. Only the first and last rows, which sit at the
edges of the column and are already dissolving into the mask, take a light,
even veil so the eye settles on the middle of the rail. */
.sa-w[data-view="globe"] .sa-w-card-media::after {
content: "";
position: absolute;
inset: 0;
background-color: rgba(8, 13, 26, 0);
transition: background-color .55s ease;
}
.sa-w[data-view="globe"] .sa-w-card:first-child .sa-w-card-media::after,
.sa-w[data-view="globe"] .sa-w-card:last-child .sa-w-card-media::after {
background-color: rgba(8, 13, 26, .34);
}
.sa-w[data-view="globe"] .sa-w-card:first-child.is-live .sa-w-card-media::after,
.sa-w[data-view="globe"] .sa-w-card:last-child.is-live .sa-w-card-media::after,
.sa-w[data-view="globe"] .sa-w-card:first-child:hover .sa-w-card-media::after,
.sa-w[data-view="globe"] .sa-w-card:last-child:hover .sa-w-card-media::after {
background-color: rgba(8, 13, 26, 0);
}
.sa-w[data-view="globe"] .sa-w-card-icon { display: none; }
.sa-w[data-view="globe"] .sa-w-card-body {
position: absolute;
left: 0;
top: 0;
bottom: 0;
/* the words end a little before the picture, which carries no shadow now */
right: calc(var(--sa-shot) + 14px);
z-index: 3;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
padding: 0;
border-radius: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* the name is the headline here, exactly as the reference reads it */
.sa-w[data-view="globe"] .sa-w-card-name {
order: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
font-size: clamp(15px, 1.3vw, 18.5px);
font-weight: 600;
line-height: 1.2;
color: var(--sa-white);
}
/* and the sentence that says what it is runs quietly underneath */
.sa-w[data-view="globe"] .sa-w-card-title,
.sa-w[data-view="globe"] .sa-w-card .sa-w-card-title {
order: 2;
margin: 6px 0 0;
font-size: clamp(11.5px, .92vw, 13px);
font-weight: 300;
line-height: 1.34;
color: rgba(226, 235, 250, .80);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sa-w[data-view="globe"] .sa-w-card.is-live .sa-w-card-title,
.sa-w[data-view="globe"] .sa-w-card:hover .sa-w-card-title,
.sa-w[data-view="globe"] .sa-w-card:focus-within .sa-w-card-title {
color: rgba(238, 244, 255, .94);
}
.sa-w[data-view="globe"] .sa-w-card-client,
.sa-w[data-view="globe"] .sa-w-card-keys { display: none; }
/* the whole row is the link; the label itself is for screen readers */
.sa-w[data-view="globe"] .sa-w-card .sa-w-card-go {
position: absolute;
inset: 0;
z-index: 5;
margin: 0;
padding: 0;
gap: 0;
font-size: 0;
line-height: 0;
color: transparent;
}
.sa-w[data-view="globe"] .sa-w-card .sa-w-card-go svg { display: none; }
.sa-w[data-view="globe"] .sa-w-card.is-dim { opacity: .18; } /* filtered out (no filter row on the home page now) */
/* the column breathes: each row on its own slow cycle, a few pixels only, so
it is alive without ever asking to be watched */
@keyframes sa-rail-drift {
0%, 100% { translate: 0 -3.5px; }
50% { translate: 0 3.5px; }
}
.sa-w[data-view="globe"] .sa-w-card {
animation: sa-rail-drift 11s ease-in-out infinite;
}
.sa-w[data-view="globe"] .sa-w-card:nth-child(2) { animation-duration: 13.5s; animation-delay: -3.1s; }
.sa-w[data-view="globe"] .sa-w-card:nth-child(3) { animation-duration: 9.8s; animation-delay: -6.4s; }
.sa-w[data-view="globe"] .sa-w-card:nth-child(4) { animation-duration: 15s; animation-delay: -1.7s; }
.sa-w[data-view="globe"] .sa-w-card:nth-child(5) { animation-duration: 12.2s; animation-delay: -8.2s; }
@media (prefers-reduced-motion: reduce) {
.sa-w[data-view="globe"] .sa-w-card { transition-duration: .01ms; animation: none; }
.sa-w[data-view="globe"] .sa-w-card-img { transition-duration: .01ms; }
.sa-w[data-view="globe"] .sa-w-cards::after { transition-duration: .01ms; }
}
/* below the split the globe steps aside and the cards go back to a grid */
@media (max-width: 900px) {
.sa-w-split { grid-template-columns: 1fr; }
.sa-w-split::before { display: none; }
.sa-w[data-view="globe"] .sa-w-stage { display: none; }
.sa-w[data-view="globe"] .sa-w-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-auto-rows: clamp(300px, 60vw, 380px);
height: auto;
padding-right: 0;
overflow: visible;
-webkit-mask-image: none;
mask-image: none;
}
/* the travelling rail belongs to the column beside the earth; in the grid
there is no column and nothing for it to mark */
.sa-w[data-view="globe"] .sa-w-cards::before,
.sa-w[data-view="globe"] .sa-w-cards::after { display: none; }
.sa-w[data-view="globe"] .sa-w-card {
display: block;
height: 100%;
grid-template-columns: none;
opacity: 1;
transform: none;
}
.sa-w[data-view="globe"] .sa-w-card-media { position: absolute; inset: 0; border-radius: 0; height: auto; }
.sa-w[data-view="globe"] .sa-w-card-media::after {
background-image: linear-gradient(180deg, rgba(13,21,31,.16) 0%, rgba(13,21,31,.06) 28%,
rgba(13,21,31,.74) 60%, rgba(13,21,31,.96) 100%);
}
.sa-w[data-view="globe"] .sa-w-card-body {
position: absolute; inset: auto 10px 10px; padding: 16px;
border-radius: 10px;
background-color: rgba(13, 21, 31, .62);
-webkit-backdrop-filter: blur(20px) saturate(160%);
backdrop-filter: blur(20px) saturate(160%);
}
.sa-w[data-view="globe"] .sa-w-card-client { display: block; }
/* full-size cards put the sentence back on top and the family name above it */
.sa-w[data-view="globe"] .sa-w-card-name {
order: 0; margin: 0 0 8px; font-size: 12px; color: var(--sa-surface-3);
-webkit-line-clamp: 1;
}
.sa-w[data-view="globe"] .sa-w-card-title {
order: 0; margin: 0; font-size: 16px; font-weight: 600; line-height: 1.34;
color: var(--sa-white); -webkit-line-clamp: 3;
}
.sa-w[data-view="globe"] .sa-w-card-go { position: relative; inset: auto; font-size: 12.5px; gap: 6px; margin-top: 10px; }
.sa-w[data-view="globe"] .sa-w-card-go svg { display: block; }
.sa-w[data-view="globe"] .sa-w-card::before { display: none; }
}
/* In the split the rail carries every name, so the pins go back to being
pins: a dot and a mast, with the lit one haloed. No labels to collide,
which also fixes four Slovenian projects stacking on top of each other. */
.sa-w[data-view="globe"] .sa-w-pin-card { display: none; }
.sa-w[data-view="globe"] .sa-w-pin { pointer-events: none; }
.sa-w[data-view="globe"] .sa-w-pin-dot {
width: 9px;
height: 9px;
transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease;
}
.sa-w[data-view="globe"] .sa-w-pin.is-hot .sa-w-pin-dot {
transform: scale(1.75);
box-shadow: 0 0 0 6px rgba(143, 182, 242, .22),
0 0 0 14px rgba(143, 182, 242, .10),
0 0 26px 4px rgba(143, 182, 242, .55);
}
/* the canvas dissolves into the section on every side now that it is a panel
rather than a full-bleed band */
.sa-w[data-view="globe"] .sa-w-stage { border-radius: 0; }
/* the canvas paints its own light and lets it fall to nothing before the
edge, so nothing needs masking off — a mask here would clip the planet */
.sa-w[data-view="globe"] .sa-w-canvas {
-webkit-mask-image: none;
mask-image: none;
}
/* the media still carried its 16:10 ratio from the card grid, which made it
size itself rather than fill the box the rail gives it */
.sa-w[data-view="globe"] .sa-w-card-media {
aspect-ratio: auto;
}
.sa-w[data-view="globe"] .sa-w-card-body { min-width: 0; }
.sa-w[data-view="globe"] .sa-w-card-keys { display: none; }
/* the lit pin sends out a slow ring, so the eye is told where to look before
it has read the card that named it */
.sa-w[data-view="globe"] .sa-w-pin-dot::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 9px;
height: 9px;
margin: -4.5px 0 0 -4.5px;
border-radius: 50%;
background-color: rgba(143, 182, 242, .55);
opacity: 0;
pointer-events: none;
}
.sa-w[data-view="globe"] .sa-w-pin.is-hot .sa-w-pin-dot::after {
animation: sa-pin-ring 2.6s cubic-bezier(.16, .8, .3, 1) infinite;
}
@keyframes sa-pin-ring {
0% { opacity: .5; transform: scale(1); }
70% { opacity: 0; transform: scale(5.6); }
100% { opacity: 0; transform: scale(5.6); }
}
@media (prefers-reduced-motion: reduce) {
.sa-w[data-view="globe"] .sa-w-pin.is-hot .sa-w-pin-dot::after { animation: none; }
}
/* ==========================================================================
Project case studies — project-.html
The About page's header pattern (words left, picture right, on the navy
field), then a light page: the story in the main column, the facts and
the recognition in a panel beside it. Plain, and the same on every page.
========================================================================== */
.sa-case-hero, .sa-case-hero * , .sa-case, .sa-case * { font-family: var(--sa-font); }
.sa-case-hero { padding-bottom: clamp(48px, 5vw, 72px); }
.sa-case-eyebrow {
margin: 0 0 16px;
font-size: 13px;
font-weight: 600;
color: var(--sa-blue-lift);
}
.sa-case-crumb { color: inherit; text-decoration: none; }
.sa-case-crumb:hover { color: var(--sa-white); }
.sa-case-h1 { font-size: clamp(32px, 4vw, 54px); max-width: 16ch; }
.sa-case-client {
margin: 16px 0 0;
font-size: 15px;
font-weight: 600;
color: var(--sa-blue-lift);
}
.sa-case-photo img { aspect-ratio: 16 / 10; object-fit: cover; }
/* ----------------------------------------------------------------- body */
.sa-case {
padding: clamp(56px, 6vw, 96px) 0 clamp(72px, 8vw, 120px);
background-color: var(--sa-white);
color: var(--sa-navy);
}
.sa-case-grid {
display: grid;
grid-template-columns: minmax(0, 1.45fr) minmax(280px, 1fr);
align-items: start;
gap: clamp(36px, 5vw, 80px);
}
.sa-case-h2 {
margin: 0 0 12px;
font-size: clamp(20px, 1.8vw, 24px);
font-weight: 800;
line-height: 1.15;
color: var(--sa-navy);
}
.sa-case-h2 + .sa-case-p { margin-top: 0; }
.sa-case-p {
margin: 0 0 clamp(28px, 3vw, 40px);
max-width: 62ch;
font-size: clamp(16px, 1.2vw, 18px);
font-weight: 300;
line-height: 1.68;
color: var(--sa-body);
}
/* the panel: a light surface, no stroke */
.sa-case-side { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 18px; }
.sa-case-box {
padding: 24px 26px 26px;
border-radius: 12px;
background-color: var(--sa-surface-2);
background-image: linear-gradient(180deg, var(--sa-surface-2) 0%, var(--sa-surface-3) 100%);
}
.sa-case-box-h {
margin: 0 0 14px;
font-size: 13px;
font-weight: 600;
color: var(--sa-support);
}
.sa-case-box-p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: var(--sa-navy); }
.sa-case-facts { margin: 0; }
.sa-case-fact { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 0; }
.sa-case-fact + .sa-case-fact { background-image: linear-gradient(90deg, rgba(16,27,55,.10), rgba(16,27,55,.10)); background-size: 100% 1px; background-repeat: no-repeat; }
.sa-case-fact dt { margin: 0; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--sa-support); }
.sa-case-fact dd { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--sa-navy); }
/* EU funding: the logos as they appear on the site today, then the statement */
.sa-case-eu { margin: 8px 0 0; padding: 22px 0 0; }
.sa-case-eu-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin: 0 0 14px; }
.sa-case-eu-logo { display: block; height: 52px; width: auto; }
.sa-case-eu-p { margin: 0; max-width: 62ch; font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--sa-body-2); }
.sa-case-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin: 6px 0 0; }
.sa-case-cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 13px 22px; border-radius: 999px;
background-color: var(--sa-navy); color: var(--sa-white);
font-size: 14.5px; font-weight: 600; line-height: 1; text-decoration: none;
transition: background-color .2s ease, transform .2s ease;
}
.sa-case-cta:hover { background-color: var(--sa-support); transform: translateY(-1px); }
.sa-case-back { font-size: 14.5px; font-weight: 600; color: var(--sa-navy); text-decoration: none; }
.sa-case-back:hover { color: var(--sa-support); }
@media (max-width: 900px) {
.sa-case-grid { grid-template-columns: 1fr; }
.sa-case-side { position: static; }
}
/* the project tiles carry no client line — the case study does that */
.sa-tile .sa-tile-client { display: none; }
/* with the picture bleeding to the edges, the words take the inset instead */
.sa-tile .sa-tile-body { padding: 0 18px; }
.sa-tile .sa-tile-keys { padding: 0 4px; }
/* ==========================================================================
Case study one-pager: Context / Outcome / Key stages / Final design /
Impact / Learnings / Contact. Text-led; the stages block carries the weight.
========================================================================== */
.sa-cs { padding: clamp(36px, 4vw, 56px) 0 clamp(56px, 6vw, 88px); }
.sa-cs .sa-ab-in { display: flex; flex-direction: column; gap: 14px; }
.sa-cs-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sa-cs-block {
padding: 22px 24px 24px;
border-radius: 12px;
background-color: var(--sa-surface-2);
}
.sa-cs-block.is-accent { background-image: linear-gradient(180deg, var(--sa-surface-2) 0%, var(--sa-surface-3) 100%); }
.sa-cs .sa-case-h2 { margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--sa-support); }
.sa-cs .sa-case-p { margin: 0; max-width: none; font-size: 15px; line-height: 1.6; }
.sa-cs .sa-case-p + .sa-case-facts { margin-top: 14px; }
.sa-cs-outcome { font-weight: 500; font-size: 16.5px; color: var(--sa-navy); }
.sa-cs-stages { padding-bottom: 28px; }
.sa-cs-stage-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 22px 28px;
margin: 4px 0 0; padding: 0; list-style: none;
}
.sa-cs-stage { margin: 0; padding: 0; }
.sa-cs-num {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; margin-bottom: 12px; border-radius: 50%;
background-color: var(--sa-navy); color: var(--sa-white);
font-size: 13px; font-weight: 600;
}
.sa-cs-stage-h { margin: 0 0 6px; font-size: 16.5px; font-weight: 700; line-height: 1.25; color: var(--sa-navy); }
.sa-cs-stage-p { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.55; color: var(--sa-body); }
.sa-cs-learn { margin: 0; padding-left: 18px; }
.sa-cs-learn li { margin: 0 0 8px; padding-left: 4px; font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--sa-body); }
.sa-cs-learn li:last-child { margin-bottom: 0; }
.sa-cs-mail { color: var(--sa-navy); font-weight: 600; text-decoration: none; }
.sa-cs-mail:hover { color: var(--sa-support); }
.sa-cs .sa-case-actions { margin-top: 16px; }
.sa-cs .sa-case-eu { padding-top: 10px; }
@media (max-width: 760px) {
.sa-cs-row { grid-template-columns: 1fr; }
}
/* --- Book a demo (project pages) --- */
.sa-case-hero .sa-case-actions-top { margin-top: 28px; }
.sa-case-hero .sa-hero-cta { background-color: var(--sa-white); color: var(--sa-navy); }
.sa-case-hero .sa-hero-cta:hover { background-color: var(--sa-blue-lift); color: var(--sa-white); }
/* compact, standard-sized form: ~1040px container, 44px fields, 2:3 split */
.sa-cta.is-demo { padding: clamp(48px, 6vw, 72px) clamp(20px, 4vw, 48px); }
.sa-cta.is-demo .sa-cta-inner {
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
align-items: start;
gap: clamp(28px, 5vw, 64px);
max-width: 1040px;
}
.sa-cta.is-demo .sa-cta-left { padding-top: 8px; row-gap: 0; }
.sa-cta.is-demo .sa-cta-h2 { margin: 0; font-size: clamp(28px, 3vw, 36px); letter-spacing: -.4px; }
.sa-cta-sub { margin: 12px 0 0; max-width: 34ch; color: var(--sa-body); font-size: 16px; font-weight: 300; line-height: 1.5; }
.sa-cta.is-demo .sa-cta-form { padding: 0; max-width: 520px; }
.sa-cta.is-demo .sa-form-label { margin-bottom: 4px; font-size: 13px; }
.sa-cta.is-demo .sa-form-input,
.sa-cta.is-demo .sa-form-textarea { margin-bottom: 12px; padding: 10px 14px; font-size: 15px; }
.sa-cta.is-demo .sa-form-input { height: 44px; }
.sa-cta.is-demo .sa-form-textarea { min-height: 96px; padding: 12px 14px; }
.sa-cta.is-demo .sa-form-submit { margin-top: 4px; padding: 12px 24px; font-size: 15px; }
.sa-cta.is-demo .sa-form-recaptcha { margin-bottom: 12px; }
@media (max-width: 900px) {
.sa-cta.is-demo .sa-cta-inner { grid-template-columns: 1fr; row-gap: 24px; }
.sa-cta.is-demo .sa-cta-left,
.sa-cta.is-demo .sa-cta-form { grid-area: auto; max-width: none; }
}
/* --- footer: ISO column + EU funding column, no panel --- */
.sa-foot-cert { flex-direction: row; align-items: flex-start; gap: 40px; }
.sa-foot-col { display: flex; flex-direction: column; gap: 16px; }
.sa-foot-fund-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sa-foot-fund-list li { margin: 0; padding: 0; }
.sa-foot-fund-img { display: block; width: 104px; max-width: 100%; height: auto; }
@media (max-width: 991px) { .sa-foot-cert { max-width: none; flex-wrap: wrap; } }
/* ==========================================================================
Projects index, dark. Keywords are plain text (no pill); a chosen keyword
is lit. Filtering no longer hides tiles: matches move to the front, the
rest stay behind them, dimmed.
========================================================================== */
.sa-gal.is-page {
background-color: var(--sa-navy);
background-image: linear-gradient(180deg, #101B37 0%, #16244A 34%, #101B37 72%, #0D151F 100%);
}
.sa-gal.is-page::before {
background-image: radial-gradient(50% 50% at 50% 50%,
rgba(111, 143, 201, .28) 0%, rgba(78, 114, 183, .10) 46%, rgba(16, 27, 55, 0) 76%);
}
.sa-gal.is-page .sa-gal-h2 { color: var(--sa-white); }
.sa-gal.is-page .sa-gal-sub { color: rgba(255, 255, 255, .72); }
.sa-gal.is-page .sa-gal-keys { gap: 4px 22px; }
.sa-gal.is-page .sa-gk {
padding: 8px 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: rgba(255, 255, 255, .62);
font-size: 14px;
font-weight: 600;
background-image: linear-gradient(90deg, var(--sa-blue-lift), var(--sa-blue-lift));
background-repeat: no-repeat;
background-size: 0 2px;
background-position: 0 100%;
transition: color .2s ease, background-size .25s ease;
}
.sa-gal.is-page .sa-gk::after { display: none; }
.sa-gal.is-page .sa-gk:hover { background-color: transparent; color: var(--sa-white); }
.sa-gal.is-page .sa-gk[aria-pressed="true"] {
background-color: transparent;
color: var(--sa-white);
background-size: 100% 2px;
box-shadow: none;
}
.sa-gal.is-page .sa-gal-grid { gap: 14px; }
.sa-gal.is-page .sa-tile {
border-radius: 0;
overflow: hidden;
background-color: rgba(255, 255, 255, .05);
background-image: linear-gradient(180deg,
rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .05) 54%, rgba(255, 255, 255, .01) 100%);
-webkit-backdrop-filter: blur(20px) saturate(150%);
backdrop-filter: blur(20px) saturate(150%);
box-shadow: none;
transition: opacity .35s ease, filter .35s ease, transform .4s cubic-bezier(.22, 1, .36, 1), background-color .3s ease;
}
.sa-gal.is-page .sa-tile:hover { background-color: rgba(255, 255, 255, .10); box-shadow: none; }
.sa-gal.is-page .sa-tile-title { color: var(--sa-white); }
.sa-gal.is-page .sa-tile-key { color: var(--sa-blue-lift); }
.sa-gal.is-page .sa-tile-client { color: rgba(255, 255, 255, .62); }
.sa-gal.is-page .sa-tile-hook p { color: rgba(255, 255, 255, .78); }
.sa-gal.is-page .sa-tile-go { color: var(--sa-blue-lift); }
.sa-gal.is-page .sa-tile.is-open { background-color: rgba(255, 255, 255, .10); }
.sa-gal.is-page .sa-tile-detail p, .sa-gal.is-page .sa-tile-fact dd { color: rgba(255, 255, 255, .82); }
.sa-gal.is-page .sa-tile-fact dt { color: var(--sa-blue-lift); }
.sa-gal.is-page .sa-gal-empty { color: rgba(255, 255, 255, .7); }
/* tiles outside the chosen keywords: pushed after the matches, dimmed */
.sa-gal.is-page .sa-tile.is-dim { opacity: .34; filter: saturate(.5); }
.sa-gal.is-page .sa-tile.is-dim:hover { opacity: .7; filter: none; }
/* ==========================================================================
Footer, reorganised. Row 1: logo + three link columns on one grid.
Row 2: a trust strip — ISO marks and EU funding logos at one shared height,
labelled, separated by a hairline. Row 3: copyright.
========================================================================== */
.footer_component .footer_top-wrapper { grid-template-columns: 1fr; }
.footer_component .footer_left-wrapper {
grid-template-columns: 1.2fr 1fr 1fr 1fr;
grid-column-gap: clamp(24px, 4vw, 64px);
align-items: start;
}
.footer_component .padding-bottom.padding-xxlarge { padding-bottom: clamp(36px, 4vw, 56px); }
.sa-foot-trust {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 28px clamp(40px, 6vw, 96px);
padding: clamp(28px, 3vw, 40px) 0 clamp(8px, 1.5vw, 16px);
background-image: linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.14));
background-repeat: no-repeat;
background-size: 100% 1px;
background-position: 0 0;
}
.sa-foot-trust-group { display: flex; flex-direction: column; gap: 14px; }
.sa-foot-trust-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 18px clamp(24px, 3vw, 44px);
margin: 0; padding: 0; list-style: none;
}
.sa-foot-trust-list li { margin: 0; padding: 0; }
/* every mark shares one 44px height, so the row reads as one line */
.sa-foot-trust .sa-foot-cert-item { flex-direction: row; align-items: center; gap: 12px; }
.sa-foot-trust .sa-foot-cert-img { width: auto; height: 44px; border-radius: 6px; }
.sa-foot-trust .sa-foot-cert-code { font-size: 14px; }
.sa-foot-trust .sa-foot-cert-desc { font-size: 12px; }
.sa-foot-eu-globe {
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; flex: none;
border-radius: 6px;
background-color: rgba(255,255,255,.06);
color: var(--sa-blue-lift);
}
.sa-foot-trust-list.is-fund li {
display: inline-flex; align-items: center;
height: 44px; padding: 0 10px;
border-radius: 6px;
background-color: #fff; /* the EU marks are only legible on white */
}
.sa-foot-trust .sa-foot-fund-img { display: block; width: auto; height: 34px; max-width: none; }
/* retire the old column layout */
.sa-foot-cert, .sa-foot-col, .sa-foot-fund-list { display: none; }
@media (max-width: 991px) {
.footer_component .footer_left-wrapper { grid-template-columns: 1fr 1fr; grid-row-gap: 32px; }
.footer_component .footer_left-wrapper .footer_logo-link { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.footer_component .footer_left-wrapper { grid-template-columns: 1fr; grid-row-gap: 24px; }
.sa-foot-trust .sa-foot-cert-img, .sa-foot-eu-globe, .sa-foot-trust-list.is-fund li { height: 40px; }
.sa-foot-trust .sa-foot-fund-img { height: 30px; }
}
/* ==========================================================================
Project tiles: the text sits on glass. The photograph continues beneath
the body — the same picture, blurred and tinted — so the tile reads as one
image with a frosted band across its foot.
========================================================================== */
.sa-gal.is-page .sa-tile { padding: 0; }
.sa-gal.is-page .sa-tile-media,
.sa-gal.is-page .sa-tile.is-feature .sa-tile-media,
.sa-gal.is-page .sa-tile.is-banner .sa-tile-media { margin-bottom: 0; }
.sa-gal.is-page .sa-tile .sa-tile-body {
flex: 1 1 auto; /* fill the tile to its foot, so the glass runs all the way down */
position: relative;
isolation: isolate;
overflow: hidden;
padding: 18px 20px 20px;
}
.sa-gal.is-page .sa-tile-glass {
position: absolute;
inset: -40px;
z-index: -2;
/* sample the middle of the picture, not its foot: several illustrations
fade to flat navy at the bottom and would give the glass nothing to show */
/* the WHOLE picture, squashed into the band and blurred away: the tile's
own colour comes through (a yellow van makes yellow glass), where a crop
of the photo's grey floor never would */
background-position: center;
background-size: 100% 100%;
background-repeat: no-repeat;
filter: blur(26px) saturate(1.8) brightness(1.12);
transform: none;
pointer-events: none;
}
.sa-gal.is-page .sa-tile .sa-tile-body::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: linear-gradient(180deg, rgba(16, 27, 55, .30) 0%, rgba(16, 27, 55, .52) 100%);
/* the glass edge: a hairline of light where the pane meets the picture */
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
pointer-events: none;
}
.sa-gal.is-page .sa-tile .sa-tile-keys,
.sa-gal.is-page .sa-tile .sa-tile-title,
.sa-gal.is-page .sa-tile .sa-tile-client,
.sa-gal.is-page .sa-tile .sa-tile-hook p,
.sa-gal.is-page .sa-tile .sa-tile-go { padding-left: 0; padding-right: 0; }
.sa-gal.is-page .sa-tile-key { color: #C9D8F4; }
.sa-gal.is-page .sa-tile-hook p { color: rgba(255, 255, 255, .88); }
.sa-gal.is-page .sa-tile-go { color: #fff; }
@media (prefers-reduced-transparency: reduce) {
.sa-gal.is-page .sa-tile-glass { display: none; }
.sa-gal.is-page .sa-tile .sa-tile-body::before { background: rgba(16, 27, 55, .92); }
}
/* ==========================================================================
Case study, buyer-first. Is this you? → What changed → How it goes →
What you get + Proof → Related. Light page, quiet panels, one accent.
========================================================================== */
.sa-cs2 { padding: clamp(32px, 4vw, 52px) 0 clamp(48px, 5vw, 72px); }
.sa-cs2 .sa-ab-in { display: flex; flex-direction: column; gap: 14px; }
.sa-cs2-row { display: grid; gap: 14px; }
.sa-cs2-row.is-fit { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.sa-cs2-row.is-get { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.sa-cs2-block {
padding: 22px 24px 24px;
border-radius: 12px;
background-color: var(--sa-surface-2);
}
.sa-cs2-block.is-quiet { background-color: transparent; box-shadow: inset 0 0 0 1px rgba(16, 27, 55, .10); }
.sa-cs2-h { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--sa-support); }
/* is this you? — the pains, ticked, in the reader's words */
.sa-cs2-pains { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sa-cs2-pains li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--sa-navy); }
.sa-cs2-pains svg { flex: none; margin-top: 4px; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background-color: var(--sa-navy); color: #fff; }
.sa-cs2-for { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sa-cs2-for li { font-size: 15px; font-weight: 300; line-height: 1.5; color: var(--sa-body); padding-left: 14px; position: relative; }
.sa-cs2-for li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background-color: var(--sa-blue-lift); }
/* what changed — before against after; after is the lit side */
.sa-cs2-block.is-change { background-image: linear-gradient(180deg, var(--sa-surface-2) 0%, var(--sa-surface-3) 100%); }
.sa-cs2-ba { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sa-cs2-before, .sa-cs2-after { padding: 18px 20px; border-radius: 10px; }
.sa-cs2-before { background-color: rgba(255, 255, 255, .55); }
.sa-cs2-after { background-color: var(--sa-navy); color: #fff; }
.sa-cs2-tag { display: inline-block; margin-bottom: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.sa-cs2-before .sa-cs2-tag { color: var(--sa-support); }
.sa-cs2-after .sa-cs2-tag { color: var(--sa-blue-lift); }
.sa-cs2-before p, .sa-cs2-after p { margin: 0; font-size: 15px; line-height: 1.55; }
.sa-cs2-before p { color: var(--sa-body); font-weight: 300; }
.sa-cs2-after p { font-weight: 400; }
.sa-cs2-facts { margin-top: 14px; }
.sa-cs2-facts:empty { display: none; }
/* how it goes — a timeline the customer walks through */
.sa-cs2-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px 24px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.sa-cs2-step { position: relative; margin: 0; padding: 14px 0 0; border-top: 2px solid rgba(16, 27, 55, .12); counter-increment: step; }
.sa-cs2-step-h::before { content: counter(step) ' '; color: var(--sa-support); font-weight: 600; }
.sa-cs2-step::before { content: ""; position: absolute; top: -2px; left: 0; width: 34px; height: 2px; background-color: var(--sa-navy); }
.sa-cs2-when { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--sa-support); }
.sa-cs2-step-h { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--sa-navy); }
.sa-cs2-step-p { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--sa-body); }
/* what you get + proof */
.sa-cs2-get { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--sa-navy); }
.sa-cs2-proof { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.sa-cs2-proof li { font-size: 14.5px; font-weight: 500; line-height: 1.45; color: var(--sa-navy); padding-left: 22px; position: relative; }
.sa-cs2-proof li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--sa-support) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.5 2.5 5.5-5.5'/%3E%3C/svg%3E") center/10px no-repeat; }
.sa-cs2-award { margin: 14px 0 0; font-size: 13px; font-weight: 300; line-height: 1.55; color: var(--sa-body-2); }
.sa-cs2-block .sa-case-eu { margin-top: 14px; padding-top: 14px; background-image: linear-gradient(90deg, rgba(16,27,55,.12), rgba(16,27,55,.12)); background-repeat: no-repeat; background-size: 100% 1px; }
/* related */
.sa-cs2-block.is-rel { background: none; padding-left: 0; padding-right: 0; padding-bottom: 0; }
.sa-cs2-rel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sa-cs2-all { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sa-navy); text-decoration: none; }
.sa-cs2-all:hover { color: var(--sa-support); }
.sa-cs2-rels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sa-cs2-rel { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background-color: var(--sa-surface-2); text-decoration: none; color: var(--sa-navy); transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.sa-cs2-rel:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(16,27,55,.45); }
.sa-cs2-rel-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.sa-cs2-rel-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-cs2-rel-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.sa-cs2-rel-t { font-size: 15px; font-weight: 700; line-height: 1.3; }
.sa-cs2-rel-c { font-size: 12.5px; font-weight: 500; color: var(--sa-support); }
@media (max-width: 860px) {
.sa-cs2-row.is-fit, .sa-cs2-row.is-get, .sa-cs2-ba { grid-template-columns: 1fr; }
.sa-cs2-rels { grid-template-columns: 1fr; }
}
/* ==========================================================================
AllConnect product line page. Dark hero with the three units on a lit
stage; a light body of use cases, products, comparison and platform.
========================================================================== */
.sa-ac-hero, .sa-ac-hero *, .sa-ac, .sa-ac * { font-family: var(--sa-font); }
.sa-ac-hero { padding-bottom: clamp(40px, 5vw, 72px); }
.sa-ac-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 5vw, 72px); }
.sa-ac-h1 { font-size: clamp(44px, 6vw, 84px); letter-spacing: -1.5px; max-width: none; }
.sa-ac-hero .sa-ab-lead { max-width: 46ch; }
.sa-ac-jump { align-self: center; font-size: 15px; font-weight: 600; color: var(--sa-blue-lift); text-decoration: none; }
.sa-ac-jump:hover { color: var(--sa-white); }
.sa-ac-hero-fig { margin: 0; position: relative; }
.sa-ac-hero-fig::before { content: ""; position: absolute; inset: 10% 0 0; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(111,143,201,.45) 0%, rgba(78,114,183,.18) 45%, rgba(16,27,55,0) 72%); filter: blur(12px); pointer-events: none; }
.sa-ac-hero-fig img { position: relative; display: block; width: 100%; height: auto; }
.sa-ac-hero-fig figcaption { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6px; text-align: center; font-size: 13px; font-weight: 600; color: var(--sa-blue-lift); }
.sa-ac { padding: clamp(48px, 6vw, 88px) 0; background-color: var(--sa-white); color: var(--sa-navy); }
.sa-ac + .sa-ac { padding-top: 0; }
.sa-ac-h2 { margin: 0 0 clamp(20px, 2.6vw, 32px); font-size: clamp(26px, 3vw, 38px); font-weight: 800; line-height: 1.12; letter-spacing: -.4px; color: var(--sa-navy); }
.sa-ac-sub { margin: -10px 0 28px; max-width: 64ch; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--sa-body); }
/* use cases */
.sa-ac-use-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sa-ac-use { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background-color: var(--sa-surface-2); color: var(--sa-navy); text-decoration: none; transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease; }
.sa-ac-use:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(16,27,55,.5); }
.sa-ac-use-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.sa-ac-use-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sa-ac-use-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.sa-ac-use-k { font-size: 12px; font-weight: 600; color: var(--sa-support); }
.sa-ac-use-t { font-size: 17px; font-weight: 700; line-height: 1.25; }
.sa-ac-use-p { font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--sa-body); }
.sa-ac-use-go { margin-top: auto; padding-top: 10px; font-size: 13px; font-weight: 600; color: var(--sa-navy); }
.sa-ac-use-go::after { content: " →"; }
/* products */
.sa-ac-prod-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sa-ac-prod { padding: 22px 24px 26px; border-radius: 12px; background-color: var(--sa-surface-2); }
.sa-ac-prod.is-lead { background-color: var(--sa-navy); color: var(--sa-white); }
.sa-ac-prod-fig { display: flex; align-items: center; justify-content: center; height: 150px; margin: 0 0 16px; }
.sa-ac-prod-fig img { max-width: 78%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 18px 26px rgba(16,27,55,.28)); }
.sa-ac-prod-h { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.3px; }
.sa-ac-prod-tag { margin: 4px 0 14px; font-size: 13.5px; font-weight: 600; color: var(--sa-support); }
.sa-ac-prod.is-lead .sa-ac-prod-tag { color: var(--sa-blue-lift); }
.sa-ac-prod-list { margin: 0; padding-left: 18px; }
.sa-ac-prod-list li { margin: 0 0 7px; padding-left: 2px; font-size: 14.5px; font-weight: 300; line-height: 1.5; color: var(--sa-body); }
.sa-ac-prod.is-lead .sa-ac-prod-list li { color: rgba(255,255,255,.86); }
/* comparison */
.sa-ac-table-wrap { overflow-x: auto; border-radius: 12px; background-color: var(--sa-surface-2); }
.sa-ac-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.sa-ac-table th, .sa-ac-table td { padding: 12px 16px; text-align: left; vertical-align: top; line-height: 1.45; }
.sa-ac-table thead th { font-size: 15px; font-weight: 800; color: var(--sa-navy); border-bottom: 2px solid rgba(16,27,55,.14); }
.sa-ac-table thead th:first-child { width: 20%; }
.sa-ac-table tbody th { font-weight: 600; color: var(--sa-support); font-size: 13px; }
.sa-ac-table tbody td { font-weight: 300; color: var(--sa-body); }
.sa-ac-table tbody tr + tr th, .sa-ac-table tbody tr + tr td { border-top: 1px solid rgba(16,27,55,.08); }
.sa-ac-table tbody td:nth-child(3) { background-color: rgba(47,87,154,.06); font-weight: 600; }
.sa-ac-note { margin: 10px 0 0; font-size: 12.5px; color: var(--sa-body-2); }
/* platform */
.sa-ac-plat-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.sa-ac-plat-list { margin: 0; display: flex; flex-direction: column; gap: 18px; }
.sa-ac-plat-list dt { margin: 0 0 4px; font-size: 16.5px; font-weight: 700; color: var(--sa-navy); }
.sa-ac-plat-list dd { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.55; color: var(--sa-body); }
.sa-ac-plat-fig { margin: 0; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 104px; }
.sa-ac-plat-fig > img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 16px 36px -22px rgba(16,27,55,.45); }
.sa-ac-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sa-ac-apps img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 16px 36px -22px rgba(16,27,55,.45); }
/* aftermarket */
.sa-ac-after-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 28px; padding: clamp(24px, 3vw, 40px); border-radius: 12px; background-image: linear-gradient(180deg, var(--sa-surface-2) 0%, var(--sa-surface-3) 100%); }
.sa-ac-after-box .sa-ac-h2 { margin-bottom: 12px; }
.sa-ac-after-box .sa-ac-sub { margin: 0; }
/* brands */
.sa-ac-brands { padding-top: 0; }
.sa-ac-brands-h { margin: 0 0 18px; font-size: 13px; font-weight: 600; color: var(--sa-support); }
.sa-ac-brand-list { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 44px; margin: 0; padding: 0; list-style: none; }
.sa-ac-brand-list li { margin: 0; padding: 0; }
.sa-ac-brand-list img { display: block; height: 30px; width: auto; max-width: 130px; object-fit: contain; filter: grayscale(1); opacity: .75; }
@media (max-width: 1000px) {
.sa-ac-use-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sa-ac-hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.sa-ac-prod-grid, .sa-ac-plat-grid, .sa-ac-after-box { grid-template-columns: 1fr; }
.sa-ac-plat-fig { position: static; }
}
@media (max-width: 520px) { .sa-ac-use-grid { grid-template-columns: 1fr; } }
/* ==========================================================================
Projects grid: the card IS the picture. Five to a row, edge to edge with no
gaps, portrait 560:1024 — the ratio the photographs are shot at, so each one
is shown whole — and the data on a pane of real glass over the picture's
foot; hover lifts the pane to show the rest.
========================================================================== */
.sa-gal.is-page .sa-gal-in { width: min(1560px, calc(100% - 40px)); }
.sa-gal.is-page .sa-gal-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.sa-gal.is-page .sa-tile {
position: relative;
overflow: hidden;
padding: 0;
border-radius: 0;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
}
.sa-gal.is-page .sa-tile:hover { background: none; transform: none; box-shadow: none; }
.sa-gal.is-page .sa-tile-media,
.sa-gal.is-page .sa-tile.is-feature .sa-tile-media,
.sa-gal.is-page .sa-tile.is-banner .sa-tile-media { aspect-ratio: 560 / 1024; margin: 0; border-radius: 0; }
.sa-gal.is-page .sa-tile-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* the pane: genuine backdrop glass, so the picture shows through it blurred */
.sa-gal.is-page .sa-tile-glass { display: none; }
.sa-gal.is-page .sa-tile .sa-tile-body {
position: absolute;
left: 0; right: 0; bottom: 0;
min-height: 0;
padding: 14px 18px 16px;
/* no tint of ours — only the picture, blurred, darkened enough to read on */
background-color: transparent;
background-image: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .44) 100%);
-webkit-backdrop-filter: blur(18px) saturate(1.7);
backdrop-filter: blur(18px) saturate(1.7);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .20);
transition: background-color .35s ease;
}
.sa-gal.is-page .sa-tile:hover .sa-tile-body { background-color: rgba(0, 0, 0, .12); }
.sa-gal.is-page .sa-tile .sa-tile-body::before { display: none; }
.sa-gal.is-page .sa-tile-keys { margin-bottom: 6px; }
.sa-gal.is-page .sa-tile-title { margin-bottom: 0; font-size: 16px; }
/* the rest of the story arrives on hover — the pane rises over the picture */
.sa-gal.is-page .sa-tile .sa-tile-hook { grid-template-rows: 0fr; opacity: 0; }
.sa-gal.is-page .sa-tile:hover .sa-tile-hook,
.sa-gal.is-page .sa-tile:focus-within .sa-tile-hook { grid-template-rows: 1fr; opacity: 1; }
.sa-gal.is-page .sa-tile-hook p { margin-top: 10px; }
@media (max-width: 1400px) { .sa-gal.is-page .sa-gal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1180px) { .sa-gal.is-page .sa-gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .sa-gal.is-page .sa-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px), (hover: none) {
.sa-gal.is-page .sa-tile .sa-tile-hook { grid-template-rows: 1fr; opacity: 1; }
}
@media (max-width: 560px) { .sa-gal.is-page .sa-gal-grid { grid-template-columns: 1fr; } }
/* one column is already wide; a full-height portrait would be absurd there */
@media (max-width: 700px) { .sa-gal.is-page .sa-tile-media { aspect-ratio: 4 / 5; } }
/* aftermarket: owners are sent to their vehicle manufacturer's support */
.sa-ac-after-owner { margin: 16px 0 0; padding-top: 16px; border-top: 1px solid rgba(16, 27, 55, .12); font-size: 15px; font-weight: 300; line-height: 1.6; color: #3B4766; }
.sa-ac-after-owner b { font-weight: 600; color: #101B37; }
.sa-ac-after-owner a { font-weight: 600; color: #101B37; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sa-ac-after-owner a:hover { color: #2F579A; }
/* phones: product lists toward 16 px */
@media (max-width: 900px) { .sa-ac-prod-list li { font-size: 15.5px; } }