/* ======================================================================
   THE BAR
   A line across the top of the page rather than a floating pill.

   Nothing is painted over the first screen. Scroll down and the bar leaves,
   upward, out of the way of the reading. Scroll up — at any depth — and it
   comes back, on solid navy. No frosted glass, no blur, no soft edge
   dissolving into the page: the bottom of the bar is an edge.

   Its contents sit in the same measure as every section below it, so the
   logo starts exactly where the page starts.
   ====================================================================== */
.sa-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: none;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(14px, 2.2vw, 34px);

  /* the page's own measure, so the mark lines up with every heading below */
  padding-top: clamp(12px, 1.4vw, 18px);
  padding-bottom: clamp(12px, 1.4vw, 18px);
  padding-left: max(var(--sa-frame-gut, 24px), calc((100% - var(--sa-frame, 1180px)) / 2));
  padding-right: max(var(--sa-frame-gut, 24px), calc((100% - var(--sa-frame, 1180px)) / 2));

  border: 0;
  border-radius: 0;
  transform: none;
  background-color: transparent;
  background-image: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
  transition: transform .5s cubic-bezier(.83, 0, .17, 1),
              background-color .34s cubic-bezier(.83, 0, .17, 1);
}

/* the glass, the sheen and the frosted skirt all go */
.sa-nav::before,
.sa-nav::after { content: none; display: none; }
.sa-nav-veil { display: none !important; }

/* off the first screen it is solid navy, and it ends where it ends */
.sa-nav.is-solid {
  background-color: #101B37;
  box-shadow: none;
}

/* reading downward: the bar leaves. Reading back up: it returns. */
.sa-nav.is-away { transform: translateY(-100%); }
.sa-nav[data-open="true"].is-away { transform: none; }

.sa-nav-brand { margin-right: clamp(6px, 1.2vw, 18px); }
.sa-nav-links { flex: 1 1 auto; }
.sa-nav-contact { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .sa-nav { transition: background-color .2s linear; }
  .sa-nav.is-away { transform: none; }
}

/* An older script flips the labels to navy when the bar passes a light
   section. The bar carries its own navy now, so that would be navy on navy. */
.sa-nav.on-light .sa-nav-links-a,
.sa-nav.on-light .sa-nav-contact-a { color: rgba(255, 255, 255, .82); }
.sa-nav.on-light .sa-nav-links-a:hover,
.sa-nav.on-light .sa-nav-links-a:focus-visible,
.sa-nav.on-light .sa-nav-contact-a:hover,
.sa-nav.on-light .sa-nav-contact-a:focus-visible,
.sa-nav.on-light .sa-nav-links-a.is-current { color: #FFFFFF; }

/* ----------------------------------------------------------------------
   The bar carries its own parts, so it is the same bar on the pages that
   load the redesign sheet and on the handful still on the old template.
   Nothing here depends on a token another sheet has to define.
   ---------------------------------------------------------------------- */
.sa-nav, .sa-nav * {
  font-family: var(--sa-font, "Aptos", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif);
  box-sizing: border-box;
}
.sa-nav-brand {
  display: inline-flex; align-items: center; flex-shrink: 0;
  margin-right: clamp(8px, 1.6vw, 24px);
  text-decoration: none;
}
/* The mark is a wordmark on its own dark plate. The plate was being
   rounded into a pill by the sheet, which is a shape the brand does not
   have — the corners are square. */
.sa-nav-logo-img { display: block; height: 40px; width: auto; border-radius: 0; }

/* One group holds the whole menu — the two links, the two accounts and the
   action — because the burger opens this element and nothing else. The old
   split kept Contact in a second group that the narrow layout hid outright,
   so on a phone the bar offered no way to reach the form at all. */
.sa-nav-links {
  display: flex; flex-wrap: nowrap; align-items: center;
  flex: 1 1 auto;
  gap: clamp(14px, 2vw, 32px);
  white-space: nowrap;
  /* the old glass nav left a white sheen and a 28px blur on this element;
     the bar shed both long ago, the panel it opens had not */
  background-image: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  box-shadow: none;
}
/* the accounts sit at the right end, with the action last: everything to
   their left is the site, everything to their right is the one thing we
   want a reader to do */
.sa-nav-social {
  display: flex; align-items: center; gap: 2px;
  margin-left: auto;
}
.sa-nav-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: rgba(255, 255, 255, .7);
  transition: color .2s ease;
}
.sa-nav-ic svg { display: block; }
.sa-nav-ic:hover, .sa-nav-ic:focus-visible { color: #FFFFFF; }
.sa-nav-ic:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
.sa-nav-links-a,
.sa-nav-contact-a {
  flex-shrink: 0;
  padding: 6px 0;
  border: 0; border-radius: 0;
  background-color: transparent;
  color: rgba(255, 255, 255, .86);
  font-size: 14.5px; font-weight: 300; line-height: 1;
  letter-spacing: normal; text-transform: none; text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}
.sa-nav-links-a:hover, .sa-nav-links-a:focus-visible,
.sa-nav-contact-a:hover, .sa-nav-contact-a:focus-visible {
  background-color: transparent; color: #FFFFFF;
}
.sa-nav-links-a.is-current { color: #FFFFFF; font-weight: 600; background-color: transparent; }
.sa-nav-contact-cta { font-weight: 400; }

/* the burger, and the panel it opens */
.sa-nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 38px; height: 38px;
  margin-left: auto;
  padding: 0; border: 0; border-radius: 0;
  background: transparent; cursor: pointer;
}
.sa-nav-toggle span,
.sa-nav-toggle span::before,
.sa-nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 1.5px;
  background: #FFFFFF; border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.sa-nav-toggle span { position: relative; }
.sa-nav-toggle span::before { position: absolute; top: -6px; }
.sa-nav-toggle span::after  { position: absolute; top: 6px; }
.sa-nav[data-open="true"] .sa-nav-toggle span { background: transparent; }
.sa-nav[data-open="true"] .sa-nav-toggle span::before { transform: translateY(6px) rotate(45deg); }
.sa-nav[data-open="true"] .sa-nav-toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

@media screen and (max-width: 900px) {
  .sa-nav { position: fixed; }
  .sa-nav-toggle { display: inline-flex; }
  .sa-nav-links { flex: none; }
  .sa-nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0;
    /* the panel keeps the bar's own measure, so an item in it starts
       exactly where the mark above it starts */
    padding: 8px var(--sa-frame-gut, 24px) 16px;
    border-radius: 0;
    background-color: #101B37;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
  }
  .sa-nav[data-open="true"] .sa-nav-links { opacity: 1; visibility: visible; transform: none; }
  .sa-nav[data-open="true"] { background-color: #101B37; }
  .sa-nav-links-a { padding: 12px 0; font-size: 16px; }
  /* in the open panel the order is the site, then the action, then the
     accounts — the two icons are the quietest thing in it, so they go last */
  .sa-nav-contact-a { order: 2; padding: 12px 0; font-size: 16px; }
  .sa-nav-social {
    order: 3;
    margin: 6px 0 0; gap: 6px;
  }
  .sa-nav-ic { width: 40px; height: 40px; }
}

/* ===================================================== touch targets
   Fitts's law: every tap target is at least 44 px on the side the thumb
   meets it. The visible mark keeps its size; the padding does the work. */
.sa-nav-ic { width: 40px; height: 40px; }
.sa-nav-toggle { width: 44px; height: 44px; }
@media (max-width: 1000px) {
  .sa-nav-links-a,
  .sa-nav-contact-a { padding-top: 12px; padding-bottom: 12px; }
  .sa-nav-ic { width: 44px; height: 44px; }
  .sa-net-node { min-height: 44px; }
  .sa-proof-award-link,
  .sa-proof-award-name-a { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .sa-foot-list li { margin-bottom: 0; }
  .sa-foot-a { padding: 14px 0; }
  .sa-foot-ic { width: 44px; height: 44px; }
}
.sa-foot-a { font-weight: 300; }

/* ===================================================== THE BUTTONS
   One system for the whole site, loaded last so it settles every page.
   Three levels, one shape (square), one weight (600), no pills, no
   gradients, no shadows. Colour stays with the surface: navy on light,
   white on dark. Tripled classes outrank the older per-section rules. */
:root { --sa-btn-h: 48px; }

/* primary: Get in touch, Book a demo, Talk about aftermarket */
html .sa-form-submit.sa-form-submit.sa-form-submit,
html .sa-hero-cta.sa-hero-cta.sa-hero-cta,
html .sa-case-cta.sa-case-cta.sa-case-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--sa-btn-h); padding: 0 28px;
  border: 0; border-radius: 0;
  background-image: none; box-shadow: none; filter: none; transform: none;
  font-family: var(--sa-font); font-size: 15px; font-weight: 600; line-height: 1;
  letter-spacing: 0; text-transform: none; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
html .sa-form-submit.sa-form-submit.sa-form-submit::after,
html .sa-hero-cta.sa-hero-cta.sa-hero-cta::after,
html .sa-case-cta.sa-case-cta.sa-case-cta::after { content: "\2192"; font-weight: 600; transition: transform .25s ease; }
html .sa-form-submit.sa-form-submit.sa-form-submit:hover::after,
html .sa-hero-cta.sa-hero-cta.sa-hero-cta:hover::after,
html .sa-case-cta.sa-case-cta.sa-case-cta:hover::after { transform: translateX(4px); }
/* an arrow already written in the markup is not doubled */
html .sa-hero-cta.sa-hero-cta.sa-hero-cta svg,
html .sa-hero-cta.sa-hero-cta.sa-hero-cta .sa-arrow,
html .sa-case-cta.sa-case-cta.sa-case-cta svg { display: none; }
/* navy on a light surface */
html .sa-case-cta.sa-case-cta.sa-case-cta,
html .sa-form-submit.sa-form-submit.sa-form-submit { background-color: #101B37; color: #FFFFFF; }
html .sa-case-cta.sa-case-cta.sa-case-cta:hover,
html .sa-form-submit.sa-form-submit.sa-form-submit:hover { background-color: #2F579A; color: #FFFFFF; }
/* white on a dark surface: the night end of the contact band, the dark case heroes and demo forms */
html .sa-cta .sa-form-submit.sa-form-submit.sa-form-submit,
html .sa-case-hero .sa-hero-cta.sa-hero-cta.sa-hero-cta,
html .sa-hero-cta.sa-hero-cta.sa-hero-cta,
html .sa-cta.is-demo .sa-form-submit.sa-form-submit.sa-form-submit { background-color: #FFFFFF; color: #101B37; }
html .sa-cta .sa-form-submit.sa-form-submit.sa-form-submit:hover,
html .sa-case-hero .sa-hero-cta.sa-hero-cta.sa-hero-cta:hover,
html .sa-hero-cta.sa-hero-cta.sa-hero-cta:hover,
html .sa-cta.is-demo .sa-form-submit.sa-form-submit.sa-form-submit:hover { background-color: #E6ECF7; color: #101B37; }
html .sa-form-submit.sa-form-submit.sa-form-submit:focus-visible,
html .sa-hero-cta.sa-hero-cta.sa-hero-cta:focus-visible,
html .sa-case-cta.sa-case-cta.sa-case-cta:focus-visible { outline: 2px solid #4E72B7; outline-offset: 3px; }

/* tertiary: text actions with an arrow — All solutions, All projects, Contact in the nav */
html .sa-foot-a.is-more.is-more,
html .sa-cs2-all.sa-cs2-all,
html .sa-nav-contact-a.sa-nav-contact-cta.sa-nav-contact-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; letter-spacing: 0; text-decoration: none; border: 0; background: transparent;
}
html .sa-foot-a.is-more.is-more { font-size: 13px; color: #101B37; }
html .sa-cs2-all.sa-cs2-all { font-size: 14px; }
html .sa-foot-a.is-more.is-more svg, html .sa-cs2-all.sa-cs2-all svg, html .sa-nav-contact-cta.sa-nav-contact-cta .sa-arrow { display: none; }
html .sa-foot-a.is-more.is-more::after,
html .sa-cs2-all.sa-cs2-all::after,
html .sa-nav-contact-a.sa-nav-contact-cta.sa-nav-contact-cta::after { content: "\2192"; transition: transform .25s ease; }
html .sa-foot-a.is-more.is-more:hover::after,
html .sa-cs2-all.sa-cs2-all:hover::after,
html .sa-nav-contact-a.sa-nav-contact-cta.sa-nav-contact-cta:hover::after { transform: translateX(4px); }

/* the hero index closing row is a list row, not a button: it shares the 600 weight */
html .sa-px.is-hero .sa-px-all.sa-px-all { font-weight: 600; }

/* chips are labels, not buttons: 12 px / 600, square, one surface */
html .sa-live-tag.sa-live-tag,
html .sa-gk.sa-gk.sa-gk,
html .sa-chip.sa-chip,
html .sa-fcard-key.sa-fcard-key,
html .sa-tile-key.sa-tile-key { border-radius: 0; font-weight: 600; letter-spacing: 0; }
html .sa-live-tag.sa-live-tag { font-size: 11px; padding: 4px 8px; }
html .sa-gk.sa-gk.sa-gk { font-size: 12px; }

/* one shape on the whole site: no rounded cards, tiles, nodes or media */
html .sa-cs2-rel.sa-cs2-rel, html .sa-ac-use.sa-ac-use, html .sa-team-link.sa-team-link,
html .sa-net-node.sa-net-node, html .sa-3d-go.sa-3d-go, html .sa-cs2-rel img, html .sa-ac-use img,
html .sa-team-link img, html .sa-fcard.sa-fcard, html .sa-tile.sa-tile { border-radius: 0; }
/* the full sweep: every card, panel, media frame and tag on every page is square;
   only true circles (icon discs, dots, hubs) keep their shape */
html .sa-cs2-block.sa-cs2-block, html .sa-cs2-before.sa-cs2-before, html .sa-cs2-after.sa-cs2-after,
html .sa-hero-hw.sa-hero-hw, html .sa-hero-hw img, html .sa-hero-facts > div, html .sa-lflow li,
html .sa-live-stage.sa-live-stage, html .sa-live-video video, html .sa-agent-card.sa-agent-card,
html .sa-hub-node.sa-hub-node, html .sa-lflow-arr.sa-lflow-arr, html .sa-hot.sa-hot,
html .sa-3d-go span, html .sa-3d-go img, html .sa-live-pics img, html .sa-net-shot-img.sa-net-shot-img, html .sa-proof-award-shot-img.sa-proof-award-shot-img,
html .sa-found-card.sa-found-card, html .sa-team-media.sa-team-media, html .sa-ab-photo img, html .sa-office-map img,
html .sa-ac-after-box.sa-ac-after-box, html .sa-ac-prod.sa-ac-prod, html .sa-ac-table-wrap.sa-ac-table-wrap,
html .sa-ac-plat-fig img, html .sa-ac-apps img,
html .form_input.form_input, html .section_portfolio11.section_portfolio11, html .portfolio11_image.portfolio11_image,
html .portfolio11_image-link.portfolio11_image-link, html .button.button { border-radius: 0; }

/* ===================================================== THE TYPE SCALE
   One size and one weight per level on every redesigned page.
   h1 800, section h2 800, card/row h3 600, body 300; no 400/500/700. */
html .sa-gal.is-page .sa-gal-h1.sa-gal-h1, html .sa-gal-h1.sa-gal-h1.sa-gal-h1,
html .sa-ab-hero .sa-ab-h1.sa-ab-h1, html .sa-ab-h1.sa-ab-h1.sa-ab-h1,
html .sa-case-hero h1.sa-hero-h1, html .sa-ac-hero h1 { font-size: clamp(36px, 4.4vw, 64px); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
html .sa-net-h2.sa-net-h2, html .sa-proof-h2.sa-proof-h2, html .sa-cta-h2.sa-cta-h2,
html .sa-ab-h2.sa-ab-h2, html .sa-pillars-h2.sa-pillars-h2, html .sa-found-h2.sa-found-h2, html .sa-team-h2.sa-team-h2, html .sa-office-h2.sa-office-h2,
html .sa-case .sa-cs2-h2.sa-cs2-h2, html .sa-cs2-block > h2, html .sa-ac h2.sa-ac-h2, html .sa-ac-h2.sa-ac-h2 { font-size: clamp(28px, 3vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
html .sa-gal-h2.sa-gal-h2.sa-gal-h2 { font-weight: 800; }
html .sa-cs2-step-h.sa-cs2-step-h, html .sa-cs2-rel-t.sa-cs2-rel-t, html .sa-ac-use-t.sa-ac-use-t, html .sa-ac dt,
html .sa-cs2-tag.sa-cs2-tag, html .sa-tile-key.sa-tile-key.sa-tile-key, html .sa-fcard-key.sa-fcard-key.sa-fcard-key,
html .sa-tile-go.sa-tile-go, html .sa-fcard-go.sa-fcard-go, html .sa-net-label.sa-net-label, html .sa-net-node.is-out .sa-net-label,
html .sa-px-f b small, html .sa-proof-award-badge.sa-proof-award-badge, html .sa-cs2-rel-c.sa-cs2-rel-c { font-weight: 600; }
html .sa-cs2-tag.sa-cs2-tag { letter-spacing: 0; }
html .sa-net-node:not(.is-out) .sa-net-label { font-weight: 300; }
html .sa-tile-client.sa-tile-client, html .sa-fcard-client.sa-fcard-client, html .sa-foot-iso-desc.sa-foot-iso-desc,
html .sa-foot-credit.sa-foot-credit, html .sa-foot-place.sa-foot-place, html .sa-case figcaption, html .sa-lflow-arr.sa-lflow-arr,
html .sa-ac-note.sa-ac-note, html .sa-ac td, html .sa-cs2-get.sa-cs2-get { font-weight: 300; }

/* ===================================================== THE RHYTHM
   Every section breathes the same: one vertical padding on the scale. */
:root { --sa-sec: clamp(64px, 7vw, 104px); }
html .sa-net.sa-net, html .sa-proof.sa-proof, html .sa-cta.sa-cta, html .sa-found.sa-found, html .sa-pillars.sa-pillars,
html .sa-team.sa-team, html .sa-office.sa-office, html .sa-case.sa-case { padding-top: var(--sa-sec); padding-bottom: var(--sa-sec); }
html .sa-ac.sa-ac { padding-bottom: var(--sa-sec); }
html .sa-ab-hero.sa-ab-hero { padding-bottom: var(--sa-sec); }
html h1.sa-gal-h2.sa-gal-h2 { font-size: clamp(36px, 4.4vw, 64px); font-weight: 800; }
html .sa-pillars-h2.sa-pillars-h2.sa-pillars-h2 { font-size: clamp(28px, 3vw, 44px); font-weight: 800; }
html .sa-cta.is-demo .sa-cta-h2.sa-cta-h2 { font-size: clamp(28px, 3vw, 44px); }
html .sa-gal .sa-tile-key.sa-tile-key, html .sa-gal.is-page .sa-tile .sa-tile-key, html .sa-gal .sa-tile-go.sa-tile-go, html .sa-gal.is-page .sa-tile-go { font-weight: 600; }
html .sa-sol-note.sa-sol-note, html .sa-fcard-hook.sa-fcard-hook, html .sa-ac-table td.is-lead, html .sa-ac td { font-weight: 300; }
html #two-pillars .sa-pillars-h2.sa-pillars-h2 { font-size: clamp(28px, 3vw, 44px); font-weight: 800; line-height: 1.1; }
html .sa-gal.is-sol .sa-gal-h2.sa-gal-h2 { font-size: clamp(36px, 4.4vw, 64px); font-weight: 800; }
html .sa-gal.is-sol .sa-tile .sa-tile-go.sa-tile-go { font-weight: 600; }
html .sa-ac-table tbody td.is-lead, html .sa-ac-table td[class] { font-weight: 300; }

/* ===================================================== THERMAL GROUND
   The contact band breathes like a thermal image (reference: Wannathis
   "Thermal Neon"): long diagonal streams of the palette's blues sweep from
   bottom-left to top-right over near-black pools, on two layers with
   different clocks so the pattern never repeats. Slower than the reference
   (14 s / 18 s) because someone is typing next to it. Brightest point stays
   at the accent (#4E72B7), so white type keeps AA contrast. The whole band
   is night now, so the questions and the heading are white. */
html .sa-cta.sa-cta {
  position: relative; isolation: isolate; overflow: hidden;
  background-color: #0D151F;
  background-image: linear-gradient(180deg, #101B37 0%, #0D151F 100%);
}
html .sa-cta.sa-cta::before, html .sa-cta.sa-cta::after {
  content: ""; position: absolute; inset: auto; left: -30%; top: -40%; width: 160%; height: 180%;
  z-index: -1; pointer-events: none; filter: blur(48px); will-change: transform; opacity: 1;
}
html .sa-cta.sa-cta::before {
  background:
    radial-gradient(60% 22% at 30% 62%, rgba(78, 114, 183, 1) 0%, rgba(78, 114, 183, 0) 70%),
    radial-gradient(50% 18% at 72% 30%, rgba(111, 143, 201, .7) 0%, rgba(111, 143, 201, 0) 70%),
    radial-gradient(45% 30% at 80% 78%, rgba(13, 21, 31, 1) 0%, rgba(13, 21, 31, 0) 70%);
  animation: sa-thermal-a 14s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
html .sa-cta.sa-cta::after {
  background:
    radial-gradient(55% 20% at 60% 40%, rgba(47, 87, 154, .95) 0%, rgba(47, 87, 154, 0) 70%),
    radial-gradient(40% 26% at 18% 22%, rgba(13, 21, 31, 1) 0%, rgba(13, 21, 31, 0) 70%),
    radial-gradient(48% 16% at 50% 84%, rgba(78, 114, 183, .7) 0%, rgba(78, 114, 183, 0) 70%);
  animation: sa-thermal-b 18s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}
@keyframes sa-thermal-a {
  0%   { transform: translate3d(-22%, 16%, 0) rotate(-12deg) scale(1); }
  50%  { transform: translate3d(4%, -8%, 0) rotate(-24deg) scale(1.2); }
  100% { transform: translate3d(24%, -20%, 0) rotate(-8deg) scale(1.05); }
}
@keyframes sa-thermal-b {
  0%   { transform: translate3d(20%, -14%, 0) rotate(-20deg) scale(1.15); }
  50%  { transform: translate3d(-10%, 6%, 0) rotate(-30deg) scale(.95); }
  100% { transform: translate3d(-26%, 22%, 0) rotate(-10deg) scale(1.25); }
}
@media (prefers-reduced-motion: reduce) { html .sa-cta.sa-cta::before, html .sa-cta.sa-cta::after { animation: none; } }
/* type on the night */
html .sa-cta.sa-cta .sa-cta-h2 { color: #FFFFFF; }
html .sa-cta.sa-cta .sa-cta-question { color: rgba(255, 255, 255, .74); }
html .sa-cta.sa-cta .sa-cta-question.is-lit,
html .sa-cta.sa-cta .sa-cta-question:hover { color: #FFFFFF; }
html .sa-cta.sa-cta .sa-cta-sub, html .sa-cta.sa-cta .sa-form-note { color: rgba(255, 255, 255, .8); }
html .sa-cta.sa-cta .sa-form-label { color: rgba(255, 255, 255, .88); }
html .sa-cta.sa-cta .sa-form-submit.sa-form-submit.sa-form-submit { background-color: #FFFFFF; color: #101B37; }
html .sa-cta.sa-cta .sa-form-submit.sa-form-submit.sa-form-submit:hover { background-color: #E6ECF7; color: #101B37; }

/* ===================================================== TRACK RECORD
   The list reads as product + award + result. What the award was for opens
   underneath when the pointer (or keyboard focus) rests on the row. On touch
   screens there is no hover, so there the line is simply shown. */
@media (hover: hover) {
  .sa-proof-award-item .sa-proof-award-by,
  .sa-proof-award-side .sa-proof-award-head .sa-proof-award-what {
    display: block; max-height: 0; opacity: 0; overflow: hidden; margin-top: -4px;
    transition: max-height .35s ease, opacity .3s ease, margin-top .35s ease;
  }
  .sa-proof-award-item:hover .sa-proof-award-by,
  .sa-proof-award-item:focus-within .sa-proof-award-by,
  .sa-proof-award-side .sa-proof-award-head:hover .sa-proof-award-what,
  .sa-proof-award-side .sa-proof-award-head:focus-within .sa-proof-award-what {
    max-height: 6em; opacity: 1; margin-top: 0;
  }
  .sa-proof-award-item, .sa-proof-award-side .sa-proof-award-head { cursor: default; }
}
/* the award photo belongs to AllDelivery: close under its name, clear air before the next product */
html .sa-proof-award-side .sa-proof-award-shot { margin: 16px 0 40px; }

/* ===================================================== EXPERTS IN — the map
   Three columns on one axis, wired together by soft curves. One industry is
   always in focus: its fields and products stay lit, everything else steps
   back, its wires draw themselves in, and its note reads out underneath.
   All wires rest faintly, so the whole thing reads as a network at a glance. */
html .sa-net .sa-net-stage.sa-net-stage {
  position: relative;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(72px, 10vw, 168px); row-gap: 40px; align-items: start;
}
.sa-net-wires { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.sa-net-wire {
  fill: none; stroke: #CFD9EE; stroke-width: 1; opacity: .7;
  transition: stroke .3s ease, opacity .3s ease, stroke-width .3s ease;
}
.sa-net-wire.is-on {
  stroke: #4E72B7; stroke-width: 1.6; opacity: 1;
  stroke-dasharray: var(--len); stroke-dashoffset: var(--len);
  animation: sa-wire-draw .55s cubic-bezier(.3, 0, .2, 1) forwards;
}
@keyframes sa-wire-draw { to { stroke-dashoffset: 0; } }
html .sa-net.is-focus .sa-net-wire:not(.is-on):not(.is-path) { opacity: .28; }
.sa-net-wire.is-path { stroke: #6F8FC9; stroke-width: 1; opacity: .55; }

html .sa-net .sa-net-col { position: relative; z-index: 1; gap: 4px; }
html .sa-net .sa-net-col-title { font-size: 12px; font-weight: 600; color: #4E72B7; margin: 0 0 14px; letter-spacing: 0; }
html .sa-net .sa-net-node.sa-net-node {
  width: auto; align-self: flex-start; padding: 10px 0; border-radius: 0;
  font-size: clamp(16px, 1.25vw, 19px); font-weight: 300; color: #101B37; background: #FFFFFF;
  transition: color .3s ease, opacity .3s ease;
}
html .sa-net .sa-net-node.is-out { font-weight: 600; }
html .sa-net .sa-net-node .sa-net-mark { display: none; }
html .sa-net.is-focus .sa-net-node.is-dim { opacity: .32; }
html .sa-net .sa-net-node.is-linked { color: #101B37; font-weight: 600; opacity: 1; }
html .sa-net .sa-net-node.is-active { color: #2F579A; font-weight: 600; opacity: 1; }
html .sa-net .sa-net-node.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: #4E72B7;
  transform-origin: left; animation: sa-net-under .4s ease forwards;
}
@keyframes sa-net-under { from { transform: scaleX(0); } to { transform: scaleX(1); } }
html .sa-net .sa-net-node:focus-visible { outline: 2px solid #4E72B7; outline-offset: 4px; }

/* the note reads out under the whole map, with room reserved so nothing jumps */
html .sa-net .sa-net-note.sa-net-note {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(72px, 10vw, 168px);
  align-items: baseline; min-height: 104px; margin: 48px 0 0; padding: 28px 0 0;
  border-top: 1px solid #E6ECF7; border-radius: 0; background: none;
}
.sa-net-note-t { font-size: clamp(22px, 2vw, 28px); font-weight: 800; color: #101B37; line-height: 1.15; }
.sa-net-note-in { max-width: 62ch; font-size: 16px; font-weight: 300; line-height: 1.6; color: #3B4766; }
@media (prefers-reduced-motion: reduce) { .sa-net-wire.is-on, html .sa-net .sa-net-node.is-active::after { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 900px) {
  html .sa-net .sa-net-stage.sa-net-stage { grid-template-columns: 1fr; row-gap: 28px; }
  html .sa-net .sa-net-note.sa-net-note { grid-template-columns: 1fr; row-gap: 8px; }
  html .sa-net .sa-net-col { flex-direction: row; flex-wrap: wrap; column-gap: 20px; }
  html .sa-net .sa-net-col-title { flex-basis: 100%; }
}
html .sa-net .sa-net-col-title .sa-net-tick { display: none; }
html .sa-net .sa-net-col-title { gap: 0; }
html .sa-net .sa-net-col .sa-net-col-title { padding-left: 0; background-image: none; }

/* the note names what the word is: a small label above its name */
html .sa-net .sa-net-note.sa-net-note { grid-template-areas: "k in" "t in"; grid-template-rows: auto 1fr; row-gap: 8px; }
.sa-net-note-k { grid-area: k; font-size: 12px; font-weight: 600; color: #4E72B7; }
.sa-net-note-t { grid-area: t; }
.sa-net-note-in { grid-area: in; }
@media (max-width: 900px) { html .sa-net .sa-net-note.sa-net-note { grid-template-areas: "k" "t" "in"; } }

/* ===================================================== EXPERTS IN — three still columns, colour in motion
   Nothing moves but colour. The chosen word sits on a soft wash with its name
   in a navy-to-blue gradient, and its wires carry a gradient that flows slowly
   from industry to field to solution. */
html .sa-net .sa-net-wire.is-on { stroke: url(#sa-net-flow); stroke-width: 2; }
html .sa-net .sa-net-wire.is-path { stroke: #6F8FC9; stroke-width: 1; opacity: .45; }
html .sa-net .sa-net-node.is-active { isolation: isolate; background: transparent; }
html .sa-net .sa-net-node.is-active::after { display: none; }
html .sa-net .sa-net-node.is-active::before {
  content: ""; position: absolute; z-index: -1; top: 4px; bottom: 4px; left: -16px; right: -16px;
  background: linear-gradient(90deg, rgba(230, 236, 247, 0) 0%, #E6ECF7 22%, #E6ECF7 78%, rgba(230, 236, 247, 0) 100%);
  animation: sa-net-wash .45s ease both;
}
@keyframes sa-net-wash { from { opacity: 0; transform: scaleX(.6); } to { opacity: 1; transform: none; } }
html .sa-net .sa-net-node.is-active .sa-net-label {
  background: linear-gradient(90deg, #101B37 0%, #2F579A 55%, #4E72B7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600;
}
/* the note is ruled off with the same gradient the wires carry */
html .sa-net .sa-net-note.sa-net-note { border-top: 2px solid transparent; border-image: linear-gradient(90deg, #2F579A 0%, #6F8FC9 35%, #E6ECF7 70%, rgba(230, 236, 247, 0) 100%) 1; }
/* the first time the section scrolls in, the columns arrive one after another */
@media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
  html .sa-net.is-in-view .sa-net-col { animation: sa-net-col-in .8s cubic-bezier(.2,.7,.2,1) both; }
  html .sa-net.is-in-view .sa-net-col:nth-of-type(2) { animation-delay: .15s; }
  html .sa-net.is-in-view .sa-net-col:nth-of-type(3) { animation-delay: .3s; }
  @keyframes sa-net-col-in { from { opacity: .4; transform: translateY(16px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { html .sa-net .sa-net-node.is-active::before { animation: none; } }
/* the note text sits in the note grid, not on the page frame (it was inset 20px on phones) */
html .sa-net .sa-net-note .sa-net-note-in { width: auto; margin-left: 0; margin-right: 0; }
@media (min-width: 901px) { html .sa-net .sa-net-node.sa-net-node { white-space: nowrap; } }

/* ===================================================== THEME SWAP
   Experts in is the dark section now and Track record the light one, so the
   page alternates white / navy / white / thermal instead of two dark blocks
   in a row. Experts in takes the navy gradient Track record used to carry. */
html .sa-net.sa-net.sa-net { background: linear-gradient(180deg, #101B37 0%, #0D151F 100%); color: #FFFFFF; }
html .sa-net .sa-net-h2.sa-net-h2 { color: #FFFFFF; }
html .sa-net .sa-net-col .sa-net-col-title { color: #6F8FC9; }
html .sa-net .sa-net-node.sa-net-node { background: transparent; color: rgba(255, 255, 255, .9); }
html .sa-net .sa-net-node.is-out.is-out { color: #FFFFFF; }
html .sa-net .sa-net-node:focus-visible { outline-color: #6F8FC9; }
html .sa-net .sa-net-wire.sa-net-wire { stroke: #6F8FC9; opacity: .22; }
html .sa-net.is-focus .sa-net-wire.sa-net-wire:not(.is-on):not(.is-path) { opacity: .1; }
html .sa-net .sa-net-wire.sa-net-wire.is-path { stroke: #6F8FC9; opacity: .5; }
html .sa-net .sa-net-wire.sa-net-wire.is-on { stroke: url(#sa-net-flow); opacity: 1; }
html .sa-net .sa-net-node.is-active::before {
  background: linear-gradient(90deg, rgba(78, 114, 183, 0) 0%, rgba(78, 114, 183, .3) 22%, rgba(78, 114, 183, .3) 78%, rgba(78, 114, 183, 0) 100%);
}
html .sa-net .sa-net-node.is-active .sa-net-label { background: linear-gradient(90deg, #FFFFFF 0%, #E6ECF7 55%, #CFD9EE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html .sa-net .sa-net-note.sa-net-note { border-image: linear-gradient(90deg, #4E72B7 0%, #6F8FC9 35%, rgba(111, 143, 201, .25) 70%, rgba(111, 143, 201, 0) 100%) 1; }
html .sa-net .sa-net-note .sa-net-note-t { color: #FFFFFF; }
html .sa-net .sa-net-note .sa-net-note-in { color: rgba(255, 255, 255, .76); }
html .sa-net .sa-net-note .sa-net-note-k { color: #6F8FC9; }

/* Track record on white: navy type, the accent for small labels, quiet rules */
html .sa-proof.sa-proof.sa-proof { background: #FFFFFF; color: #101B37; }
html .sa-proof .sa-proof-in, html .sa-proof .sa-proof-h2.sa-proof-h2, html .sa-proof .sa-proof-n, html .sa-proof .sa-proof-ch,
html .sa-proof .sa-proof-award-name, html .sa-proof .sa-proof-award-name-a, html .sa-proof .sa-proof-award-title,
html .sa-proof .sa-proof-award-body, html .sa-proof .sa-proof-award-src, html .sa-proof .sa-proof-award-badge.is-win { color: #101B37; }
html .sa-proof .sa-proof-eyebrow, html .sa-proof .sa-proof-award-eyebrow, html .sa-proof .sa-proof-award-year,
html .sa-proof .sa-proof-award-for, html .sa-proof .sa-proof-award-ext { color: #4E72B7; }
html .sa-proof .sa-proof-award-ext path { stroke: #4E72B7; }
html .sa-proof .sa-proof-l, html .sa-proof .sa-proof-award-what, html .sa-proof .sa-proof-award-by { color: #3B4766; }
html .sa-proof .sa-proof-award-shot-cap, html .sa-proof .sa-proof-award-badge:not(.is-win) { color: #5A6684; }
html .sa-proof .sa-proof-award.sa-proof-award { border-top-color: #E6ECF7; }
html .sa-proof .sa-proof-award-win.sa-proof-award-win { border-left-color: #E6ECF7; }
html .sa-proof .sa-proof-award-link { color: #101B37; background-image: linear-gradient(#4E72B7, #4E72B7); }
html .sa-proof .sa-proof-award-name-a:hover, html .sa-proof .sa-proof-award-link:hover { color: #2F579A; }
html .sa-proof .sa-proof-award-link:hover .sa-proof-award-ext path { stroke: #2F579A; }
html .sa-proof .sa-proof-award-toggle { color: #2F579A; }
html .sa-proof .sa-proof-award-toggle:hover { color: #101B37; }
html .sa-proof .sa-proof-award-toggle:focus-visible { outline-color: #4E72B7; }
html .sa-proof .sa-proof-award::after { background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 40%, #FFFFFF 100%); }
/* with the product head gone, the photo sits right under its label */
html .sa-proof-award-side .sa-proof-award-shot:first-child { margin-top: 0; }
/* the photo closes the column: no bottom margin hanging under it */
html .sa-proof-award-side .sa-proof-award-shot:last-child { margin-bottom: 0; }
/* "Awarded work" is the heading of the whole block — photo and list sit under it.
   It uses the same sub-section title as the Experts in note (22–28px, 800, navy). */
html .sa-proof .sa-proof-award-h {
  grid-column: 1 / -1; margin: 0 0 calc(24px - clamp(28px, 4vw, 60px));
  font-size: clamp(22px, 2vw, 28px); font-weight: 800; line-height: 1.15; letter-spacing: 0; color: #101B37;
}
@media (max-width: 860px) { html .sa-proof .sa-proof-award-h { margin-bottom: calc(20px - clamp(28px, 4vw, 60px)); } }
/* Track record is the awards now: no stats row, no rule, the photo and the
   list follow the heading directly */
html .sa-proof .sa-proof-award.sa-proof-award { border-top: 0; padding-top: 0; margin-top: clamp(28px, 3vw, 40px); }
html .sa-proof .sa-proof-h2.sa-proof-h2 { max-width: none; text-wrap: balance; }

/* ===================================================== SCROLL REVEAL (sa-reveal.js)
   a calm, staggered entrance for the blocks of every section below the hero */
.sa-rvl { transition: opacity .55s ease var(--rv-d, 0ms), translate .8s cubic-bezier(.16, .8, .2, 1) var(--rv-d, 0ms), filter .55s ease var(--rv-d, 0ms) !important; }
.sa-rvl.sa-rvl-wait { opacity: 0 !important; translate: 0 40px; filter: blur(6px); }
@media (prefers-reduced-motion: reduce) { .sa-rvl.sa-rvl-wait { opacity: 1 !important; translate: none; } }
@media print { .sa-rvl.sa-rvl-wait { opacity: 1 !important; translate: none; } }

/* Experts in note: the description starts on the heading's line — its first baseline
   is the heading's baseline; the small label sits alone above the heading */
@media (min-width: 901px) {
  html .sa-net .sa-net-note.sa-net-note { grid-template-areas: "k ." "t in"; grid-template-rows: auto auto; align-items: baseline; align-content: start; }
  html .sa-net .sa-net-note .sa-net-note-in { align-self: baseline; }
}

/* Track record is balanced in its frame: the award list ends on the right margin (its
   longest line touches it), the photo fills the rest of the left side; the descriptions
   that open on hover never widen the list */
@media (min-width: 861px) {
  html .sa-proof .sa-proof-award.sa-proof-award { grid-template-columns: minmax(0, 1fr) auto; }
  html .sa-proof .sa-proof-award-win.sa-proof-award-win { justify-self: end; width: max-content; max-width: 100%; }
  html .sa-proof .sa-proof-award-by, html .sa-proof .sa-proof-award-what { contain: inline-size; }
  html .sa-proof .sa-proof-award-side .sa-proof-award-shot { max-width: none; }
}
@media (min-width: 861px) { html .sa-proof .sa-proof-award-side .sa-proof-award-shot { max-width: 560px; } }
/* the contact form's fields run to the frame's right margin; no leftover panel padding */
html .sa-cta .sa-cta-form.sa-cta-form { padding-left: 0; padding-right: 0; }

/* balanced frame: the demo form fills its column to the right margin, and the brand
   row spans the frame, so the right edge of what is drawn matches the left */
@media (min-width:861px){ html .sa-cta.is-demo .sa-cta-form.sa-cta-form { max-width:none; width:100%; justify-self:stretch; } }
@media (min-width:701px){ html .sa-ac-brands .sa-ac-brand-list { justify-content:space-between; } }

/* Experts in: a label takes the width of its bold form from the start, so pointing at a
   word (light → semibold) never re-wraps it and no edge of the section moves */
html .sa-net .sa-net-label[data-t] { display: inline-flex; flex-direction: column; }
html .sa-net .sa-net-label[data-t]::after { content: attr(data-t); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none; }

/* a portrait screenshot in a case hero stays within the first screen, so the headline is not pushed down */
html .sa-case-hero .sa-hero-hw img { max-height: min(56vh, 520px); width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; }

/* EU project pages: the official project logo under the client line, on a white plate */
html .sa-case-logos { display: inline-flex; align-items: center; gap: 16px; margin: 16px 0 0; padding: 10px 16px; background: #FFFFFF; }
html .sa-case-logos img { display: block; height: 24px; width: auto; }

/* Client logos in one colour (navy on light): the files themselves are one-colour
   (assets/images/mono), so no greyscale filter or fading is applied on top */
html .sa-ac-brand-list img { filter: none; opacity: 1; }
html .sa-hero-ticker-item img { opacity: 1; }

/* One optical size for every client logo (Pearl-style row): each width gives the same
   bounding-box area, so long wordmarks are lower and compact marks taller. Measured from the
   one-colour files in assets/images/mono. */
html .sa-hero-ticker-track img[alt="Adria Dom"] { width: calc(148px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="Adria Dom"] { width: 111px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="SIJ"] { width: calc(127px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="SIJ"] { width: 95px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="TAB"] { width: calc(112px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="TAB"] { width: 99px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="Robeta"] { width: calc(190px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="Robeta"] { width: 143px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="Adria Mobil"] { width: calc(215px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="Adria Mobil"] { width: 165px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="Garmin"] { width: calc(130px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="Garmin"] { width: 98px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="Concorde"] { width: calc(93px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="Concorde"] { width: 70px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="Reich"] { width: calc(112px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="Reich"] { width: 85px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="Pošta Slovenije"] { width: calc(195px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="Pošta Slovenije"] { width: 147px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="Böckmann"] { width: calc(108px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="Böckmann"] { width: 81px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="Danfoss"] { width: calc(108px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="Danfoss"] { width: 81px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="Banka Slovenije"] { width: calc(158px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="Banka Slovenije"] { width: 119px; height: auto; max-width: none; }
html .sa-hero-ticker-track img[alt="GoOpti"] { width: calc(129px * var(--sa-logo-scale)); height: auto; }
html .sa-ac-brand-list img[alt="GoOpti"] { width: 97px; height: auto; max-width: none; }

/* Client-logo row: no white strip — the logos sit on the dark page (white where their own
   colours lack contrast, own colours where they hold it) and ride a slowly swelling line. */
html .sa-logos { background: linear-gradient(180deg, #0D151F, #101B37); }   /* joins the hero above (#0D151F) to Experts below (#101B37) */
html .sa-logos .sa-hero-ticker { background: transparent; padding: 48px 0 52px; overflow: hidden; }
html .sa-hero-ticker .sa-wave { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
html .sa-hero-ticker .sa-wave path { fill: none; stroke: none; }   /* the wave is felt in the logos, not drawn */
html .sa-hero-ticker-track { position: relative; z-index: 1; }
html .sa-hero-ticker-item { will-change: translate, rotate; }
/* project-page hero logos: no white plate */
html .sa-case-logos { padding: 0; background: none; gap: 24px; }
html .sa-case-logos img { height: 28px; }
/* parcel-locker card: funding marks in white straight on the dark scene, no plate */
html #lockers .s2-tile-logo { background: none; padding: 0; left: 16px; bottom: 16px; height: 28px; }
html #lockers .s2-tile-logo img { height: 24px; }
/* a little quicker than before (93 s), so each logo visibly climbs, tips and descends the wave */
html .sa-logos { --sa-ticker-speed: 70s; }

/* Hero fills the screen; the logo row sits below it with the same space from the hero's
   bottom edge to the logos as from the logos to "Experts in" (24 px under the row is kept
   so the wave's dips are never clipped). */
html .sa-logos .sa-hero-ticker { padding: 128px 0 24px; }
@media (max-width: 1300px) { html .sa-logos .sa-hero-ticker { padding: 113px 0 24px; } }
@media (max-width: 900px)  { html .sa-logos .sa-hero-ticker { padding: 88px 0 24px; } }

/* Experts in — connections read as one system: every wire of the chosen word (its own and
   the paths beyond) is the same fine light line; the rest of the web steps back to a hairline.
   Every connected word carries the same highlight; the chosen word keeps its wash. White
   impulses (sa-net.js) travel from the chosen word along these wires. */
html .sa-net .sa-net-wire.sa-net-wire { stroke: #6F8FC9; stroke-width: .75; opacity: .14; }
html .sa-net.is-focus .sa-net-wire.sa-net-wire:not(.is-on):not(.is-path) { opacity: .07; }
html .sa-net .sa-net-wire.sa-net-wire.is-on,
html .sa-net .sa-net-wire.sa-net-wire.is-path { stroke: #CFD9EE; stroke-width: 1.25; opacity: .8; }
html .sa-net .sa-net-node.is-linked.is-linked { color: #FFFFFF; opacity: 1; }
html .sa-net .sa-net-node.is-linked .sa-net-label { font-weight: 600; color: #FFFFFF; }
html .sa-net .sa-net-pulses circle { mix-blend-mode: screen; }

/* client logos 30 % smaller (zoom shrinks the layout box too, so the
   ticker spacing and set width follow) */
html .sa-logos .sa-hero-ticker-item img { zoom: .7; }

/* contact form fields look like the Solution Finder field: a quiet light
   surface on the night, white type, brand-blue focus ring, square */
html .sa-cta.sa-cta .sa-form-input,
html .sa-cta.sa-cta .sa-form-textarea {
  background-color: rgba(207, 217, 238, .09); color: #FFFFFF;
  border: 0; border-radius: 0; box-shadow: none; font-weight: 300; font-size: 16px;
  transition: background-color .2s ease, box-shadow .2s ease;
}
html .sa-cta.sa-cta .sa-form-input { height: 48px; padding: 0 18px; }
html .sa-cta.sa-cta .sa-form-textarea { padding: 14px 18px; }
html .sa-cta.sa-cta .sa-form-input:focus,
html .sa-cta.sa-cta .sa-form-textarea:focus { outline: none; background-color: rgba(207, 217, 238, .13); box-shadow: 0 0 0 2px #6F8FC9; }
html .sa-cta.sa-cta .sa-form-input::placeholder,
html .sa-cta.sa-cta .sa-form-textarea::placeholder { color: rgba(255, 255, 255, .5); }
html .sa-cta.sa-cta .sa-form-input:-webkit-autofill,
html .sa-cta.sa-cta .sa-form-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #FFFFFF; caret-color: #FFFFFF;
  -webkit-box-shadow: 0 0 0 1000px #1E2A44 inset; box-shadow: 0 0 0 1000px #1E2A44 inset;
}
html .sa-cta.sa-cta .sa-form-input::selection, html .sa-cta.sa-cta .sa-form-textarea::selection { background: #2F579A; color: #FFFFFF; }

/* Experts in: the night lifts into the brand blue towards the bottom, where
   the Solution Finder sits. Small labels on the lighter part move from the
   accent blue to the light panel blue so they keep their contrast. */
html .sa-net.sa-net.sa-net { background: linear-gradient(180deg, #101B37 0%, #132147 35%, #22407A 75%, #2F579A 100%); }
html .sa-net .sa-net-note-k, html .sa-net .sa-fdt-k { color: #CFD9EE; }

/* Experts in on laptop screens: one size smaller, so the heading, the whole
   map and its note fit on one screen */
@media (min-width: 901px) and (max-height: 920px) {
  html .sa-net.sa-net.sa-net { padding-top: clamp(56px, 8vh, 80px); }
  html .sa-net.sa-net.sa-net .sa-net-h2 { font-size: 34px; }
  html .sa-net.sa-net.sa-net .sa-net-stage { margin-top: 32px; }
  html .sa-net.sa-net.sa-net .sa-net-col-title { margin-bottom: 8px; }
  html .sa-net.sa-net.sa-net .sa-net-node.sa-net-node { padding: 7px 0; font-size: 16px; }
  html .sa-net.sa-net.sa-net .sa-net-note.sa-net-note { margin-top: 28px; padding-top: 20px; }
  html .sa-net.sa-net.sa-net .sa-net-note-t { font-size: 22px; }
  html .sa-net.sa-net.sa-net .sa-net-note-in { font-size: 15px; }
}

/* ===== client logos live with the proof: under the awards in "Built,
   shipped, and recognized", dark on white, still moving, full bleed ===== */
html .sa-proof .sa-proof-logos { margin-top: clamp(56px, 7vw, 96px); }
html .sa-proof .sa-proof-logos-h { margin: 0 0 8px; }
html .sa-proof .sa-logos { background: none; width: 100vw; margin-left: calc(50% - 50vw); }
html .sa-proof .sa-logos .sa-hero-ticker,
html .sa-proof .sa-logos .sa-hero-ticker.sa-hero-ticker { padding: 24px 0 8px; background: transparent; }
html .sa-proof .sa-logos .sa-hero-ticker-item img { filter: brightness(0); opacity: .7; transition: opacity .3s ease; }
html .sa-proof .sa-logos .sa-hero-ticker-item img:hover { opacity: 1; }
/* with the strip gone, Experts begins where the hero ends: same night at the seam */
html .sa-net.sa-net.sa-net { background: linear-gradient(180deg, #0D151F 0%, #101B37 10%, #132147 35%, #22407A 75%, #2F579A 100%); }
/* logos in their own colours on white; room above and below for the wave,
   so no logo is clipped at the bottom of its swing */
html .sa-proof .sa-logos .sa-hero-ticker-item img { filter: none; opacity: 1; }
html .sa-proof .sa-logos .sa-hero-ticker,
html .sa-proof .sa-logos .sa-hero-ticker.sa-hero-ticker { padding: 48px 0 56px; }
html .sa-proof .sa-proof-logos { margin-top: clamp(32px, 4vw, 56px); }
/* Pošta Slovenije in its yellow panel: narrower, so it carries the same weight as the others */
html .sa-proof .sa-hero-ticker-track img[alt="Pošta Slovenije"] { width: calc(150px * var(--sa-logo-scale, 1)); }

/* ===== home page: the page settles on whole sections — hero, Experts in,
   Track record, Get in touch, footer. Desktop only: on phones the sections
   are long and free scrolling reads better. Sections taller than the screen
   can still be scrolled through before the next one takes over. ===== */
@media (min-width: 901px) {
  html:has(.sa-xh) { scroll-snap-type: y mandatory; }
  html:has(.sa-xh) .sa-xh,
  html:has(.sa-xh) .sa-net,
  html:has(.sa-xh) .sa-proof,
  html:has(.sa-xh) .sa-cta { scroll-snap-align: start; scroll-snap-stop: always; }
  html:has(.sa-xh) .sa-foot { scroll-snap-align: end; }
  /* each section fills the screen; content sits clear of the fixed bar */
  html:has(.sa-xh) .sa-net.sa-net.sa-net,
  html:has(.sa-xh) .sa-proof.sa-proof,
  html:has(.sa-xh) .sa-cta.sa-cta { min-height: 100vh; min-height: 100svh; box-sizing: border-box; }
  html:has(.sa-xh) .sa-proof.sa-proof,
  html:has(.sa-xh) .sa-cta.sa-cta { display: flex; flex-direction: column; justify-content: center; padding-top: calc(76px + clamp(24px, 4vh, 48px)); padding-bottom: clamp(32px, 6vh, 64px); }
}
@media (min-width: 901px) and (max-height: 920px) {
  html:has(.sa-xh) .sa-net.sa-net.sa-net { padding-top: calc(76px + 20px); padding-bottom: 48px; }
  html:has(.sa-xh) .sa-net .sa-fdt { margin-top: 40px; padding-block: 24px; }
}

/* ===== snapping, laptop heights: Experts in and Built, shipped each fit one
   screen, so every wheel step lands on a whole section. Spacing follows the
   screen height instead of fixed steps. */
@media (min-width: 901px) and (max-height: 920px) {
  html:has(.sa-xh) .sa-net.sa-net.sa-net { padding-top: calc(76px + 1.5vh); padding-bottom: 2.5vh; }
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-stage { margin-top: 2.4vh; }
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-note.sa-net-note { margin-top: 2vh; padding-top: 1.4vh; }
  html:has(.sa-xh) .sa-net .sa-fdt.sa-fdt { margin-top: 2.6vh; padding-block: 2vh; }
  html:has(.sa-xh) .sa-proof.sa-proof { padding-top: calc(76px + 2vh); padding-bottom: 3vh; }
  html:has(.sa-xh) .sa-proof .sa-proof-h2.sa-proof-h2 { margin-bottom: 3vh; }
  html:has(.sa-xh) .sa-proof .sa-proof-award.sa-proof-award { margin-top: 2.4vh; }
  html:has(.sa-xh) .sa-proof .sa-proof-logos.sa-proof-logos { margin-top: 3vh; }
}
@media (min-width: 901px) and (max-height: 800px) {
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-node.sa-net-node { padding: 5px 0; }
  html:has(.sa-xh) .sa-proof .sa-proof-award-shot-img { max-height: 40vh; object-fit: cover; }
}
/* the sections carry their own room for the fixed bar, so snap to their very top;
   the full-bleed logo strip must never widen the page */
@media (min-width: 901px) { html:has(.sa-xh) { scroll-padding-top: 0; } }
html .sa-proof.sa-proof { overflow-x: clip; }
/* short laptop screens (≤800px tall): a touch tighter still, so the map,
   its note, the finder and the contact form each stay on one screen */
@media (min-width: 901px) and (max-height: 800px) {
  html:has(.sa-xh) .sa-net.sa-net.sa-net { padding-top: calc(76px + 1vh); }
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-h2 { font-size: 30px; }
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-node.sa-net-node { padding: 4px 0; }
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-note-in { font-size: 14px; line-height: 1.5; }
  html:has(.sa-xh) .sa-net .sa-fdt.sa-fdt { padding-block: 1.2vh; }
  html:has(.sa-xh) .sa-cta.sa-cta { padding-top: calc(76px + 1.5vh); padding-bottom: 2.5vh; }
  html:has(.sa-xh) .sa-cta.sa-cta .sa-form-input { height: 44px; }
}
/* tall screens: the hero's scene and the Experts map share the height too */
@media (min-width: 901px) and (min-height: 921px) {
  html:has(.sa-xh) .sa-xh .sa-xh-scenes { height: clamp(300px, min(32vw, 100svh - 540px), 620px); }
  html:has(.sa-xh) .sa-net.sa-net.sa-net { padding-top: calc(76px + 2.4vh); padding-bottom: 3vh; }
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-stage { margin-top: 4vh; }
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-note.sa-net-note { margin-top: 3vh; }
  html:has(.sa-xh) .sa-net .sa-fdt.sa-fdt { margin-top: 3.6vh; padding-block: 3.4vh; }
}
/* in-between heights (921–1020px): the map keeps its laptop size */
@media (min-width: 901px) and (min-height: 921px) and (max-height: 1020px) {
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-h2 { font-size: 38px; }
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-col-title { margin-bottom: 8px; }
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-node.sa-net-node { padding: 7px 0; font-size: 17px; }
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-note.sa-net-note { padding-top: 20px; }
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-note-t { font-size: 24px; }
  html:has(.sa-xh) .sa-net .sa-fdt.sa-fdt { padding-block: 2.4vh; }
}
@media (min-width: 901px) and (max-height: 800px) {
  html:has(.sa-xh) .sa-net.sa-net.sa-net { padding-bottom: 1.6vh; }
}

/* the hard CSS snap is replaced by a soft settle (sa-snap.js): it waits until
   the page is still and only then glides gently to a section edge */
html:has(.sa-xh) { scroll-snap-type: none; }

/* Experts in: the note follows the map's own three columns — the label and
   name under Industries, the explanation starting exactly under Knowledge,
   its first line on the name's baseline */
@media (min-width: 901px) {
  html .sa-net .sa-net-note.sa-net-note {
    grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto;
    column-gap: clamp(72px, 10vw, 168px); row-gap: 6px; align-items: baseline;
  }
  html .sa-net .sa-net-note .sa-net-note-k { grid-column: 1; grid-row: 1; }
  html .sa-net .sa-net-note .sa-net-note-t { grid-column: 1; grid-row: 2; }
  html .sa-net .sa-net-note .sa-net-note-in { grid-column: 2 / span 2; grid-row: 2; max-width: 64ch; }
}
@media (min-width: 901px) and (max-height: 800px) {
  html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-node.sa-net-node { padding: 3px 0; }
}
/* room for the eighth field in Knowledge (Delivery point intelligence) */
@media (min-width: 901px) and (min-height: 1021px) { html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-node.sa-net-node { padding: 8px 0; } }
@media (min-width: 901px) and (min-height: 921px) and (max-height: 1020px) { html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-node.sa-net-node { padding: 4px 0; } }
@media (min-width: 901px) and (min-height: 801px) and (max-height: 920px) { html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-node.sa-net-node { padding: 5px 0; } }
@media (min-width: 901px) and (max-height: 800px) { html:has(.sa-xh) .sa-net.sa-net.sa-net .sa-net-node.sa-net-node { padding: 2px 0; } }

/* AllConnect: the technical comparison is sent by email, not published. Text left, short
   form right (email + optional company); stacks on narrow screens. */
html .sa-ac-gate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px 64px; align-items: start; padding: 48px 0 0; border-top: 1px solid #CFD9EE; }
html .sa-ac-gate .sa-ac-h2 { margin: 0 0 16px; }
html .sa-ac-gate .sa-ac-sub { margin: 0; max-width: 56ch; }
html .sa-gate-form { display: grid; gap: 6px; }
html .sa-gate-form .sa-form-label { margin-top: 18px; }
html .sa-gate-form .sa-form-label:first-child { margin-top: 0; }
html .sa-gate-form .sa-form-opt { font-weight: 300; color: #5B6785; }
html .sa-gate-form .sa-form-recaptcha { margin-top: 8px; }
html .sa-gate-form .sa-form-submit { margin-top: 16px; justify-self: start; }
@media (max-width: 900px) { html .sa-ac-gate { grid-template-columns: 1fr; padding-top: 32px; } }
/* inputs on a light surface: the brand panel tone so the field reads on white; square, 48 px */
html .sa-gate-form .sa-form-input.sa-form-input { height: 48px; padding: 12px 16px; background: #E6ECF7; border: 0; color: #101B37; font-size: 16px; font-weight: 300; border-radius: 0; }
html .sa-gate-form .sa-form-input.sa-form-input:focus { outline: 2px solid #4E72B7; outline-offset: 0; background: #FFFFFF; }
/* the moving logos fade in at the left edge of the screen and fade out at the right */
html .sa-proof .sa-logos .sa-hero-ticker.sa-hero-ticker {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
@media (max-width: 900px) {
  html .sa-proof .sa-logos .sa-hero-ticker.sa-hero-ticker {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  }
}

/* clients and partners added 19 Oct: optical widths, about 57 px x the square root of each logo's aspect ratio, like the others */
html .sa-hero-ticker-track img[alt="Knott"] { width: calc(129px * var(--sa-logo-scale, 1)); height: auto; }
html .sa-hero-ticker-track img[alt="Omnipemf"] { width: calc(126px * var(--sa-logo-scale, 1)); height: auto; }
html .sa-hero-ticker-track img[alt="Caratec"] { width: calc(143px * var(--sa-logo-scale, 1)); height: auto; }
html .sa-hero-ticker-track img[alt="Mediabus"] { width: calc(87px * var(--sa-logo-scale, 1)); height: auto; }
html .sa-hero-ticker-track img[alt="LPP"] { width: calc(123px * var(--sa-logo-scale, 1)); height: auto; }
html .sa-hero-ticker-track img[alt="Plistor"] { width: calc(82px * var(--sa-logo-scale, 1)); height: auto; }
html .sa-hero-ticker-track img[alt="CoastKey"] { width: calc(125px * var(--sa-logo-scale, 1)); height: auto; }
html .sa-hero-ticker-track img[alt="TPV"] { width: calc(50px * var(--sa-logo-scale, 1)); height: auto; }
html .sa-hero-ticker-track img[alt="ISO 9001 certified, Bureau Veritas"] { width: calc(120px * var(--sa-logo-scale, 1)); height: auto; }
html .sa-hero-ticker-track img[alt="ISO 27001 certified, Bureau Veritas"] { width: calc(120px * var(--sa-logo-scale, 1)); height: auto; }

/* ===== tall screens: Track record and Get in touch take the height of their content,
   not the whole screen, so a large monitor shows no wide empty band around them.
   Laptops (up to 1000 px tall) keep the full-screen sections. */
@media (min-width: 901px) and (min-height: 1001px) {
  html:has(.sa-xh) .sa-proof.sa-proof.sa-proof,
  html:has(.sa-xh) .sa-cta.sa-cta.sa-cta { min-height: 0; padding-top: calc(76px + clamp(48px, 6vh, 96px)); padding-bottom: clamp(64px, 8vh, 128px); }
}

/* ===== Solutions page: the finder no longer fills the screen, so the list of all
   projects starts within the first screen and visitors see there is more below */
@media (min-width: 901px) {
  html .sa-fd-stage.sa-fd-stage, html .sa-fd-stage.sa-fd-stage > .sa-fd-in { min-height: 0; }
  html .sa-fd-stage.sa-fd-stage > .sa-fd-in { padding-block: calc(76px + clamp(32px, 5vh, 72px)) clamp(40px, 6vh, 80px); }
  html .s2-all .sa-s2-in { padding-top: clamp(40px, 5vh, 64px); }
}
/* ===== tall screens: About and project heroes take the height of their content,
   not the whole screen (laptops keep the full-screen hero) */
@media (min-width: 901px) and (min-height: 1001px) {
  html .sa-c-hero .sa-c-hero-in.sa-c-hero-in { min-height: 0; padding-bottom: clamp(56px, 7vh, 112px); }
  html .sa-ab-hero.sa-ab-hero.sa-ab-hero { min-height: 0; }
}

/* ===== The people: every card the same height, everything centred, photos a little lighter */
html .sa-team .sa-team-grid { align-items: stretch; }
html .sa-team .sa-team-grid > li { display: flex; }
html .sa-team .sa-team-link.sa-team-link { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; height: 100%; }
html .sa-team .sa-team-media.sa-team-media { margin-inline: auto; }
html .sa-team .sa-team-body.sa-team-body { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
html .sa-team .sa-team-role { text-wrap: balance; }
html .sa-team .sa-team-in.sa-team-in { margin-top: auto; padding-top: 8px; justify-content: center; }
html .sa-team .sa-team-img.sa-team-img { filter: grayscale(1) contrast(1.02) brightness(1.18); }
html .sa-team .sa-team-grid.sa-team-grid { grid-auto-rows: 1fr; }