/* ======================================================================
   SOLUTIONS — one dark stage, the same language as the home hero
   1. the opening: the headline writes itself in, then an index of the
      five featured projects
   2. five chapters, one per featured project: the copy on one side, the
      project's living scene on the other, alternating; each scene builds
      when its chapter comes into view
   3. all solutions: filters and the full body of work, image first,
      no boxes
   Colours, type and buttons are the hero's; spacing from the 8-point scale.
   ====================================================================== */
.sa-s2 {
  --s2-bg: #0D151F;
  --s2-line: rgba(207, 217, 238, .14);
  --s2-dim: rgba(255, 255, 255, .55);
  --s2-soft: rgba(255, 255, 255, .78);
  --s2-gut: var(--sa-frame-gut, 32px);
  background: var(--s2-bg);
  color: #FFFFFF;
  font-family: "Aptos", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}
html:has(.sa-s2) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.sa-s2) { scroll-behavior: auto; } }
body.sa-s2-page { background: #0D151F; }

.sa-s2-in, .sa-s2-ch {
  width: min(var(--sa-frame, 1180px), 100% - 2 * var(--s2-gut));
  margin-inline: auto;
}
.sa-s2-eyebrow { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; color: #6F8FC9; }

/* ---------------------------------------------------------------- 1. the opening */
.sa-s2-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(55% 80% at 78% 30%, rgba(47, 87, 154, .30) 0%, rgba(47, 87, 154, 0) 70%), var(--s2-bg);
}
.sa-s2-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(207, 217, 238, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(207, 217, 238, .045) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(60% 75% at 78% 35%, #000 0%, transparent 80%);
          mask-image: radial-gradient(60% 75% at 78% 35%, #000 0%, transparent 80%);
}
.sa-s2-hero .sa-s2-in { padding-block: calc(76px + clamp(48px, 9vh, 120px)) clamp(48px, 8vh, 96px); }
.sa-s2-h1 {
  margin: 16px 0 0;
  font-size: clamp(44px, 3.6vw + 14px, 96px);
  font-weight: 800; line-height: 1.02; letter-spacing: -.01em;
  color: #FFFFFF; text-wrap: balance;
}
.sa-s2-h1 .is-accent { color: #6F8FC9; }
.sa-s2-h1 .sa-xh-w { display: inline-block; }
.sa-s2-sub { margin: 24px 0 0; max-width: 52ch; font-size: clamp(16px, .3vw + 14px, 19px); font-weight: 300; line-height: 1.55; color: var(--s2-soft); }

/* the index: five chapters on one line, a line over each that lights on hover */
.sa-s2-index { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; margin-top: clamp(48px, 9vh, 96px); }
.sa-s2-index ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.sa-s2-index li { margin: 0; padding: 0; }
.sa-s2-index ol a {
  position: relative; display: flex; align-items: baseline; gap: 12px;
  min-height: 48px; padding: 16px 0 0;
  border-top: 1px solid var(--s2-line);
  color: var(--s2-soft); text-decoration: none;
  transition: color .3s ease;
}
.sa-s2-index ol a::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: #4E72B7;
  transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.sa-s2-index ol a:hover, .sa-s2-index ol a:focus-visible, .sa-s2-index ol a.is-here { color: #FFFFFF; }
.sa-s2-index ol a:hover::before, .sa-s2-index ol a:focus-visible::before, .sa-s2-index ol a.is-here::before { transform: scaleX(1); }
.sa-s2-index a:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 4px; }
.sa-s2-n { font-size: 13px; font-weight: 600; color: #6F8FC9; font-variant-numeric: tabular-nums; }
.sa-s2-il { font-size: clamp(16px, .4vw + 12px, 19px); font-weight: 600; line-height: 1.25; }
.sa-s2-alllink {
  display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, .55); color: #FFFFFF; text-decoration: none;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: border-color .2s ease, background-color .2s ease;
}
.sa-s2-alllink::after { content: "\2193"; transition: transform .2s ease; }
.sa-s2-alllink:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.sa-s2-alllink:hover::after { transform: translateY(3px); }

/* the opening moves: words out of a blur, then the index rises */
@media (prefers-reduced-motion: no-preference) {
  .sa-s2-h1 .sa-xh-w { animation: sa-s2-word .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 120ms); }
  .sa-s2-hero .sa-s2-eyebrow, .sa-s2-sub, .sa-s2-index { animation: sa-s2-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .sa-s2-hero .sa-s2-eyebrow { animation-delay: 0ms; }
  .sa-s2-sub { animation-delay: 620ms; }
  .sa-s2-index { animation-delay: 780ms; }
  .sa-s2-index ol a::before { transition-delay: 0ms; }
}
@keyframes sa-s2-word { from { opacity: 0; filter: blur(12px); transform: translateY(.18em); } to { opacity: 1; filter: none; transform: none; } }
@keyframes sa-s2-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- 2. the chapters */
.sa-s2-chapters { position: relative; }
.sa-s2-ch {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "copy stage";
  align-items: center;
  column-gap: clamp(32px, 5vw, 96px);
  min-height: clamp(560px, 86svh, 960px);
  padding-block: clamp(48px, 8vh, 96px);
  border-top: 1px solid var(--s2-line);
  scroll-margin-top: 76px;
}
.sa-s2-ch.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "stage copy"; }
.sa-s2-copy { grid-area: copy; }
.sa-s2-stage { grid-area: stage; position: relative; }

.sa-s2-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; font-size: 13px; line-height: 1.4; }
.sa-s2-of { font-weight: 300; color: var(--s2-dim); font-variant-numeric: tabular-nums; }
.sa-s2-tags { margin-left: 16px; font-weight: 300; color: var(--s2-soft); }
.sa-s2-h { margin: 16px 0 0; font-size: clamp(30px, 1.5vw + 16px, 50px); font-weight: 800; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.sa-s2-h a { color: #FFFFFF; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s cubic-bezier(.2, .7, .2, 1); }
.sa-s2-h a:hover { background-size: 100% 1px; }
.sa-s2-h a:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 4px; }
.sa-s2-hook { margin: 16px 0 0; max-width: 44ch; font-size: clamp(16px, .3vw + 14px, 19px); font-weight: 300; line-height: 1.55; color: var(--s2-soft); }
.sa-s2 .sa-xh-f.sa-s2-f { margin-top: 32px; align-items: last baseline; }
.sa-s2 .sa-xh-f b { font-size: clamp(40px, 2.4vw + 16px, 64px); }
.sa-s2 .sa-xh-f b small { vertical-align: baseline; }
.sa-s2 .sa-xh-f span { font-size: 14px; max-width: 28ch; }
.sa-s2-client { margin: 16px 0 0; font-size: 13px; font-weight: 300; color: var(--s2-dim); }
.sa-s2 .sa-xh-actions { margin-top: 32px; flex-wrap: nowrap; }

/* the stage: the hero's scene box, a glow and the blueprint grid behind it */
.sa-s2-stage::before {
  content: ""; position: absolute; inset: -8% -6%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(50% 50% at 50% 55%, rgba(47, 87, 154, .26) 0%, rgba(47, 87, 154, 0) 72%),
    linear-gradient(rgba(207, 217, 238, .045) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(207, 217, 238, .045) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(50% 50% at 50% 55%, #000 0%, transparent 85%);
          mask-image: radial-gradient(50% 50% at 50% 55%, #000 0%, transparent 85%);
}
html .sa-s2 .sa-s2-stage .sa-xh-scenes {
  position: relative; z-index: 1;
  width: 100%; height: clamp(340px, 60svh, 680px);
  aspect-ratio: auto; max-height: none; min-height: 0; margin: 0;
}

/* ---------------------------------------------------------------- 3. all solutions */
.s2-all { position: relative; border-top: 1px solid var(--s2-line); }
.s2-all .sa-s2-in { padding-block: clamp(64px, 11vh, 128px); }
.s2-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.s2-h { margin: 16px 0 0; font-size: clamp(32px, 1.8vw + 16px, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; color: #FFFFFF; }
.s2-count { margin: 0; font-size: 14px; font-weight: 300; color: var(--s2-soft); font-variant-numeric: tabular-nums; }

/* filters: the secondary button, small; the chosen one turns white */
.s2-keys { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; }
.s2-key {
  height: 40px; padding: 0 16px; margin: 0;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 0; background: transparent;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1; color: var(--s2-soft);
  cursor: pointer; transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.s2-key:hover { border-color: rgba(255, 255, 255, .7); color: #FFFFFF; }
.s2-key[aria-pressed="true"] { border-color: #FFFFFF; background: #FFFFFF; color: #101B37; }
.s2-key:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 2px; }

/* the grid: image first, no boxes; the first project runs two columns wide so every row is full */
.s2-grid {
  --tile-h: clamp(200px, 12vw + 60px, 300px);
  display: grid; grid-template-columns: 1fr; grid-auto-flow: row dense;
  gap: 48px 24px; margin-top: 40px;
}
@media (min-width: 640px) { .s2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .s2-tile.is-wide { grid-column: span 2; } }
@media (min-width: 1100px) { .s2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.s2-tile {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  color: #FFFFFF; text-decoration: none;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
}
.s2-tile:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 6px; }
.s2-tile-media { position: relative; display: block; height: var(--tile-h); overflow: hidden; background: #101B37; }
.s2-tile-media::after { content: none; }   /* no fade: the images carry their own light/dark and must keep their contrast */
.s2-tile-img, .s2-tile-media .sa-real img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  filter: none; transform: scale(1.001);   /* images are graded at source; shown as made */
  transition: transform 1s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}
.s2-tile:hover .s2-tile-img, .s2-tile:hover .s2-tile-media .sa-real img { transform: scale(1.05); }
.s2-tile-media .sa-scene, .s2-tile-media .sa-real { position: absolute; inset: 0; }
.s2-tile-keys { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 16px; font-size: 12px; font-weight: 600; line-height: 1.4; color: #6F8FC9; }
.s2-tile-title { display: block; margin-top: 8px; font-size: clamp(17px, .3vw + 15px, 20px); font-weight: 600; line-height: 1.3; text-wrap: balance; }
.s2-tile-title::after { content: "\2192"; display: inline-block; margin-left: 8px; color: #6F8FC9; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.s2-tile:hover .s2-tile-title::after, .s2-tile:focus-visible .s2-tile-title::after { opacity: 1; transform: none; }
.s2-tile-client { display: block; margin-top: 8px; font-size: 13px; font-weight: 300; line-height: 1.4; color: var(--s2-dim); }

/* a filter: what matches leads at full strength; the rest keeps its place below a quiet line, turned down */
.s2-tile.is-aside { opacity: .36; }
.s2-tile.is-aside:hover, .s2-tile.is-aside:focus-visible { opacity: .85; }
.s2-rule { grid-column: 1 / -1; margin: 0; padding-top: 16px; border-top: 1px solid var(--s2-line); font-size: 13px; font-weight: 300; color: var(--s2-dim); }
.s2-rule[hidden] { display: none; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1100px) {
  .sa-s2-index { grid-template-columns: 1fr; row-gap: 32px; }
  .sa-s2-index ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px; }
  .sa-s2-alllink { justify-self: start; }
}
@media (max-width: 900px) {
  .sa-s2-ch, .sa-s2-ch.is-flip { grid-template-columns: 1fr; grid-template-areas: "copy" "stage"; row-gap: 32px; min-height: 0; }
  html .sa-s2 .sa-s2-stage .sa-xh-scenes { height: clamp(280px, 70vw, 420px); }
  .sa-s2 .sa-xh-actions { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .sa-s2-index ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-s2-tags { margin-left: 0; flex-basis: 100%; }
}

/* nothing drawn may push the page sideways */
.sa-s2 { overflow-x: clip; }
/* while a filter is on, nothing may jump ahead of the line to fill a gap */
.s2-grid.is-filtered { grid-auto-flow: row; }
.s2-all { scroll-margin-top: 0; }
/* a product shot on white keeps its whole outline */
.s2-tile-img.is-contain { object-fit: contain; background: #FFFFFF; padding: 16px 24px; box-sizing: border-box; }
/* 17 projects + the wide AllConnect card = 18 cells: full rows on two and three columns */

/* every card picture is 16:10 at every width (the wide card keeps the same height), so the
   crops prepared for the cards always land where they were cut: between whole elements */
.s2-grid { container-type: inline-size; --tile-h: calc(100cqi * .625); }
@media (min-width: 640px) { .s2-grid { --tile-h: calc((100cqi - 24px) / 2 * .625); } }
@media (min-width: 1100px) { .s2-grid { --tile-h: calc((100cqi - 48px) / 3 * .625); } }
.s2-tile-title, .s2-tile-client { overflow-wrap: break-word; }

/* EU projects carry their official project logo, on a white plate in the picture's corner */
.s2-tile-logo { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; background: #FFFFFF; }
.s2-tile-logo img { display: block; height: 20px; width: auto; max-width: 160px; object-fit: contain; }
@media (max-width: 639px) { .s2-tile-logo { height: 36px; } .s2-tile-logo img { height: 18px; } }

/* App screen laid over a project photo: its own layer above the photo's dimming and the
   bottom gradient, so the app keeps its true colours; it rises from the bottom edge */
.s2-tile-over { position: absolute; z-index: 2; pointer-events: none; filter: none; }
.s2-tile-over.is-phone {
  left: 4%; top: 30%; width: 34%; height: auto;
  filter: drop-shadow(0 12px 24px rgba(13, 21, 31, .45));
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.s2-tile:hover .s2-tile-over.is-phone { transform: translateY(-8px); }

/* The wide platform card becomes 16:10 on a phone: show all three devices whole on the
   same light surface rather than cutting the outer two at the edges */
@media (max-width: 639px) {
  #platform .s2-tile-media { background: #E6ECF7; }   /* the panel's own colour */
  #platform .s2-tile-img { object-fit: contain; }
}

/* Pearl-style panels: every card image is one flat #E6ECF7 panel with the real material
   centred (built into the image). The media box carries the same colour so nothing flashes
   before the image arrives; project logos are one colour (navy) in the panel's bottom margin,
   aligned with the image's left edge (15 %), no plate. Funding marks keep their own colours. */
.s2-tile-media { background: #E6ECF7; }
html .s2-tile-logo { left: 15%; bottom: calc(var(--tile-h) * .075 - 11px); height: 22px; padding: 0; gap: 16px; background: none; }
html .s2-tile-logo img { height: 22px; width: auto; }
html .s2-tile-over.is-phone { left: 10%; top: 38%; width: 26%; }
/* EU cards: the photo sits higher (9 % above, 21 % below) so the project logo has its own band */
html .s2-tile-logo { bottom: calc(var(--tile-h) * .105 - 11px); }
/* the parcel locker's funding marks sit on its dark drawn scene: white one-colour marks, no plate */
html #lockers .s2-tile-logo { left: 16px; bottom: 16px; height: 28px; padding: 0; background: none; }   /* white marks straight on the dark scene */
html #lockers .s2-tile-logo img { height: 24px; }

/* phones: filter chips get a 44 px tap height */
@media (max-width: 900px) { .s2-key { min-height: 44px; } }