/* ======================================================================
   HERO — featured work
   One dark stage the width of the window, laid out on the page frame:
   the headline across the top, then the four projects on the left and the
   project's living scene on the right, the two sharing one centre line.
   The scenes are drawn in code (sa-scenes), so they are sharp on any
   screen. The headline writes itself in out of a blur, the scene builds,
   and the stage walks through the four projects; pointing at one shows it,
   and each opens its explainer film.
   ====================================================================== */
.sa-xh {
  --xh-bg: #0D151F;
  --xh-line: rgba(207, 217, 238, .14);
  --xh-dim: rgba(255, 255, 255, .5);
  --xh-soft: rgba(255, 255, 255, .78);
  --xh-dur: 8s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 72% 62%, rgba(47, 87, 154, .28) 0%, rgba(47, 87, 154, 0) 70%),
    var(--xh-bg);
  color: #FFFFFF;
  font-family: "Aptos", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
}

.sa-xh-in {
  width: min(var(--sa-frame, 1180px), 100% - 2 * var(--sa-frame-gut, 32px));
  margin: 0 auto;
  min-height: max(100svh, 640px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: clamp(32px, 4.4vw, 72px);
  padding-block: calc(76px + clamp(16px, 3.6vh, 48px)) clamp(20px, 3.6vh, 48px);
}

/* ---------------------------------------------------------------- row 1: the headline */
.sa-xh-head { grid-column: 1 / -1; position: relative; }
@media (min-width: 901px) { .sa-xh-head .sa-xh-all { position: absolute; right: 0; bottom: -12px; margin: 0; } }
.sa-xh-h1 {
  margin: 0;
  font-size: min(clamp(38px, 4.2vw, 62px), 6.4vh);
  font-weight: 800; line-height: 1.04; letter-spacing: 0;
  color: #FFFFFF;
}
.sa-xh-h1 .is-accent { color: #6F8FC9; }
.sa-xh-w { display: inline-block; }
.sa-xh-trust {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  margin: clamp(12px, 1.8vh, 18px) 0 0; padding: 0; list-style: none;
  font-size: 13px; font-weight: 300; color: var(--xh-soft);
}
.sa-xh-trust li, .sa-xh-list > li { padding-left: 0; margin-left: 0; }
.sa-xh-trust li { display: inline-flex; align-items: center; gap: 18px; }
.sa-xh-trust li + li::before { content: ""; width: 3px; height: 3px; background: #4E72B7; }

/* ---------------------------------------------------------------- row 2: projects | scene, one centre line */
.sa-xh-left, .sa-xh-right { align-self: center; margin-top: clamp(16px, 3vh, 40px); }

.sa-xh-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--xh-line); }
.sa-xh-item { border-bottom: 1px solid var(--xh-line); }
.sa-xh-tab {
  position: relative;
  display: grid; grid-template-columns: 40px 1fr; align-items: baseline;
  width: 100%; min-height: 48px;
  padding: clamp(8px, 1.3vh, 13px) 0;
  border: 0; background: none; cursor: pointer; text-align: left;
  font: inherit; color: var(--xh-dim);
  transition: color .3s ease;
}
.sa-xh-tab:hover, .sa-xh-item.is-on .sa-xh-tab { color: #FFFFFF; }
.sa-xh-tab:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 2px; }
.sa-xh-n { font-size: 13px; font-weight: 600; color: #6F8FC9; font-variant-numeric: tabular-nums; }
.sa-xh-t { font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; line-height: 1.2; }

/* how long until the next project: a line that fills under the open tab */
.sa-xh-prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #4E72B7; transform: scaleX(0); transform-origin: left; }
.sa-xh-item.is-on .sa-xh-prog.is-run { animation: sa-xh-fill var(--xh-dur) linear forwards; }
.sa-xh.is-held .sa-xh-item.is-on .sa-xh-prog { animation-play-state: paused; }
@keyframes sa-xh-fill { to { transform: scaleX(1); } }

/* the open project */
.sa-xh-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.2, .7, .2, 1); }
.sa-xh-item.is-on .sa-xh-body { grid-template-rows: 1fr; }
.sa-xh-body > div { overflow: hidden; min-height: 0; }
.sa-xh-inner { padding: 0 0 clamp(16px, 2.4vh, 22px) 40px; }
.sa-xh-m { margin: 0; font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--xh-soft); max-width: 44ch; }
.sa-xh-f { display: flex; align-items: baseline; gap: 14px; margin: clamp(10px, 1.6vh, 14px) 0 0; }
.sa-xh-f b { font-size: clamp(32px, 2.6vw, 40px); font-weight: 800; line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sa-xh-f b small { font-size: .5em; font-weight: 600; color: #6F8FC9; margin-left: 2px; }
.sa-xh-f span { font-size: 13px; font-weight: 300; line-height: 1.45; color: var(--xh-soft); max-width: 26ch; }
.sa-xh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: clamp(14px, 2vh, 18px); }
.sa-xh-item.is-on .sa-xh-inner > * { animation: sa-xh-in .6s cubic-bezier(.2, .7, .2, 1) both; }
.sa-xh-item.is-on .sa-xh-inner > :nth-child(2) { animation-delay: .08s; }
.sa-xh-item.is-on .sa-xh-inner > :nth-child(3) { animation-delay: .16s; }
@keyframes sa-xh-in { from { opacity: 0; filter: blur(8px); transform: translateY(6px); } to { opacity: 1; filter: none; transform: none; } }

/* the explainer button: the primary button, white on the dark stage */
.sa-xh-play {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px; padding: 0 20px 0 16px;
  border: 0; border-radius: 0; background: #FFFFFF; color: #101B37;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background-color .2s ease;
}
.sa-xh-play:hover { background: #E6ECF7; }
.sa-xh-play:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 3px; }
.sa-xh-play svg { width: 18px; height: 18px; flex: none; }
.sa-xh-play .sa-xh-len { font-weight: 300; color: #2F579A; font-variant-numeric: tabular-nums; }
/* the project link and the link to all solutions: the tertiary button */
.sa-xh-more, .sa-xh-all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: #FFFFFF; text-decoration: none; }
.sa-xh-all { margin-top: clamp(12px, 2vh, 20px); color: var(--xh-soft); }
.sa-xh-more::after, .sa-xh-all::after { content: "\2192"; transition: transform .2s ease; }
.sa-xh-more:hover::after, .sa-xh-all:hover::after { transform: translateX(4px); }
.sa-xh-all:hover { color: #FFFFFF; }
.sa-xh-more:focus-visible, .sa-xh-all:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 3px; }

/* ---------------------------------------------------------------- the scene */
.sa-xh-right { position: relative; }
.sa-xh-scenes {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 5;
  max-height: calc(100svh - 300px);
  min-height: 320px;
  margin-left: auto;
}
.sa-xh-scenes .sa-scene {
  background: transparent;                         /* the stage's own glow shows through: no box */
  opacity: 0;
  transform: scale(.94);
  filter: blur(8px);
  transition: opacity .8s ease, transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .8s ease;
}
.sa-xh-scenes .sa-scene.is-on { opacity: 1; transform: none; filter: none; }

/* ---------------------------------------------------------------- the opening */
@media (prefers-reduced-motion: no-preference) {
  .sa-xh-w { animation: sa-xh-word .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(.15s + var(--i) * .11s); }
  @keyframes sa-xh-word { from { opacity: 0; filter: blur(12px); transform: translateY(.18em); } to { opacity: 1; filter: none; transform: none; } }
  .sa-xh-trust, .sa-xh-list > li, .sa-xh-all { animation: sa-xh-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
  .sa-xh-trust { animation-delay: 1s; }
  .sa-xh-list > li:nth-child(1) { animation-delay: 1.15s; }
  .sa-xh-list > li:nth-child(2) { animation-delay: 1.23s; }
  .sa-xh-list > li:nth-child(3) { animation-delay: 1.31s; }
  .sa-xh-list > li:nth-child(4) { animation-delay: 1.39s; }
  .sa-xh-all { animation-delay: 1.5s; }
  @keyframes sa-xh-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  .sa-xh-scenes .sa-scene { transition: opacity .3s ease; transform: none; filter: none; }
  .sa-xh-body { transition: none; }
}

/* ---------------------------------------------------------------- explainer */
.sa-xh-lb {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(13, 21, 31, .96);
  opacity: 0; transition: opacity .3s ease;
}
.sa-xh-lb.is-open { opacity: 1; }
.sa-xh-lb[hidden] { display: none; }
/* the films are 1920 × 1080: never shown larger than that, so they stay sharp */
.sa-xh-lb video { width: min(1920px, 100%, (100svh - 120px) * 16 / 9); aspect-ratio: 16 / 9; background: #000; transform: scale(.97); transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.sa-xh-lb.is-open video { transform: none; }
.sa-xh-x { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: none; color: #FFFFFF; cursor: pointer; }
.sa-xh-x svg { width: 22px; height: 22px; }
.sa-xh-x:hover { background: rgba(255, 255, 255, .08); }
.sa-xh-x:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 2px; }
html.sa-xh-lock, html.sa-xh-lock body { overflow: hidden; }

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 900px) {
  .sa-xh-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; min-height: 0; padding-block: calc(76px + 24px) 48px; }
  .sa-xh-h1 { font-size: clamp(34px, 9.4vw, 52px); }
  .sa-xh-trust li + li::before { display: none; }
  .sa-xh-trust { gap: 4px 16px; }
  .sa-xh-right { order: 2; margin-top: 20px; }
  .sa-xh-left { order: 3; margin-top: 8px; }
  .sa-xh-scenes { aspect-ratio: 4 / 3; max-height: none; min-height: 0; }
}

/* each scene gets a little room inside its box so nothing is ever cut at the edge;
   the city of AllDelivery is the widest, so it gets the most */
.sa-xh-scenes .sa-scene { inset: 5%; overflow: visible; contain: layout style; }
.sa-xh-scenes .sa-scene[data-scene="alldelivery"] { inset: 13% 11%; }

/* Caravanning: the motorhome in line drawing, the hub in the middle, light running out
   along the wires to everything it controls and up to the cloud */
.sa-xh-rv { display: grid; place-items: center; }
.sa-xh-rv-svg { width: 100%; height: 100%; overflow: visible; }
.sa-xh-rv .body path, .sa-xh-rv .body rect, .sa-xh-rv .body circle { fill: none; stroke: #CFD9EE; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sa-xh-rv .body .thin { stroke: rgba(207, 217, 238, .25); stroke-dasharray: 3 5; }
.sa-xh-rv .w { fill: none; stroke: rgba(111, 143, 201, .35); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sa-xh-rv .f { fill: none; stroke: url(#xh-rv-g); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 18 82; stroke-dashoffset: 100; vector-effect: non-scaling-stroke; }
.sa-xh-rv .n { fill: #0D151F; stroke: #6F8FC9; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sa-xh-rv .hub rect { fill: #2F579A; stroke: #CFD9EE; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sa-xh-rv .hub text { fill: #FFFFFF; font-size: 12px; font-weight: 600; }
.sa-xh-rv .labels text { fill: rgba(255, 255, 255, .72); font-size: 11.5px; font-weight: 300; }
.sa-xh-rv .labels .ext, .sa-xh-rv .labels .bus { fill: #6F8FC9; font-weight: 600; font-size: 11px; }
@media (prefers-reduced-motion: no-preference) {
  .sa-xh-rv.is-on .f { animation: sa-xh-flow 2.6s cubic-bezier(.45, 0, .55, 1) var(--d, 0s) infinite; }
  .sa-xh-rv.is-on .n { animation: sa-xh-node 2.6s ease var(--d, 0s) infinite; }
  .sa-xh-rv.is-on .body > * { animation: sa-xh-draw 1.4s cubic-bezier(.3, 0, .2, 1) both; stroke-dasharray: 1400; }
}
@keyframes sa-xh-flow { 0% { stroke-dashoffset: 100; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes sa-xh-node { 0%, 60% { fill: #0D151F; } 75% { fill: #6F8FC9; } 100% { fill: #0D151F; } }
@keyframes sa-xh-draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sa-xh-rv .f { stroke-dasharray: none; stroke-dashoffset: 0; opacity: .6; } }

.sa-xh-rv .hub .bus { fill: #CFD9EE; font-size: 9.5px; font-weight: 300; }
/* AllDelivery as on its own site: a dark city, taller buildings in navy-grey with lit
   edges, faint streets; the stops stay in the accent blue */
.sa-xh-scenes [data-scene="alldelivery"] { --sc-top: #2A3955; --sc-front: #18233B; --sc-side: #22304D; --hk: 2.6; }
.sa-xh-scenes [data-scene="alldelivery"] .sa-scene-ground { background-color: #0D151F; box-shadow: 0 0 0 1px rgba(207,217,238,.08), 0 40px 60px -20px rgba(0,0,0,.7); }
.sa-xh-scenes [data-scene="alldelivery"] .sa-box > i { box-shadow: inset 0 0 0 1px rgba(207, 217, 238, .16); }
.sa-xh-scenes [data-scene="alldelivery"] .sa-box > .t { transform: translateZ(calc(var(--h) * var(--hk) * 1px)); }
.sa-xh-scenes [data-scene="alldelivery"] .sa-box > .f,
.sa-xh-scenes [data-scene="alldelivery"] .sa-box > .b { height: calc(var(--h) * var(--hk) * 1px); }
.sa-xh-scenes [data-scene="alldelivery"] .sa-box > .s,
.sa-xh-scenes [data-scene="alldelivery"] .sa-box > .l { width: calc(var(--h) * var(--hk) * 1px); }
.sa-xh-scenes [data-scene="alldelivery"] .sa-box.is-acc,
.sa-xh-scenes [data-scene="alldelivery"] .sa-box.is-lit { --hk: 1.6; }
.sa-xh-scenes [data-scene="alldelivery"] .sa-street { background: rgba(207, 217, 238, .09); }
.sa-xh-scenes [data-scene="alldelivery"] .sa-street.is-main { background: rgba(207, 217, 238, .16); }

/* the hub is the real AllConnect Pro unit, on a soft pad so the wires end under it */
.sa-xh-rv .hub .pad { fill: rgba(13, 21, 31, .85); stroke: none; }
.sa-xh-rv .hub image { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.sa-xh-rv .hub text { fill: #FFFFFF; font-size: 12px; font-weight: 600; }
.sa-xh-rv .hub .bus { fill: #6F8FC9; font-size: 10px; font-weight: 600; }

/* the AllConnect Pro unit drawn as a line icon, the same hand as the vehicle */
.sa-xh-rv .hub .flange, .sa-xh-rv .hub .shell { fill: #101B37; stroke: #CFD9EE; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sa-xh-rv .hub .face { fill: #0D151F; stroke: #6F8FC9; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sa-xh-rv .hub .port { fill: none; stroke: #CFD9EE; stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.sa-xh-rv .hub .pad, .sa-xh-rv .hub image { display: none; }

/* Last mile scene: the dark city of the AllDelivery site, with its pins, route and walk */
.sa-xh-scenes [data-scene="lastmile"] { --sc-top: #2A3955; --sc-front: #18233B; --sc-side: #22304D; --hk: 2.6; overflow: visible; }
.sa-xh-scenes [data-scene="lastmile"] .sa-scene-ground { background-color: #0D151F; box-shadow: 0 0 0 1px rgba(207,217,238,.08), 0 40px 60px -20px rgba(0,0,0,.7); }
.sa-xh-scenes [data-scene="lastmile"] .sa-box > i { box-shadow: inset 0 0 0 1px rgba(207, 217, 238, .16); }
.sa-xh-scenes [data-scene="lastmile"] .sa-box > .t { transform: translateZ(calc(var(--h) * var(--hk) * 1px)); }
.sa-xh-scenes [data-scene="lastmile"] .sa-box > .f, .sa-xh-scenes [data-scene="lastmile"] .sa-box > .b { height: calc(var(--h) * var(--hk) * 1px); }
.sa-xh-scenes [data-scene="lastmile"] .sa-box > .s, .sa-xh-scenes [data-scene="lastmile"] .sa-box > .l { width: calc(var(--h) * var(--hk) * 1px); }
.sa-xh-scenes [data-scene="lastmile"] .sa-box.is-acc { --hk: 1; }
.sa-xh-scenes [data-scene="lastmile"] .sa-box.is-target { --sc-top: #3A4C70; --sc-front: #22304D; --sc-side: #2C3C5E; }
.sa-xh-scenes [data-scene="lastmile"] .sa-street { background: rgba(207, 217, 238, .09); }
.sa-xh-scenes [data-scene="lastmile"] .sa-street.is-main { background: rgba(207, 217, 238, .16); }
.sa-scene .lm-plan, .sa-scene .lm-walk, .sa-scene .lm-learn { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.sa-scene .lm-plan { stroke: #FFFFFF; stroke-width: 2.4; }
.sa-scene .lm-walk { stroke: #6F8FC9; stroke-width: 2; }
.sa-scene .lm-learn { stroke: #4E72B7; stroke-width: 3.2; }
.sa-gps { position: absolute; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #CFD9EE; box-shadow: 0 0 6px rgba(111, 143, 201, .9); transform: translateZ(1.5px); opacity: 0; }
.sa-anchor { position: absolute; width: 0; height: 0; transform: translateZ(1px); }
.sa-lm-ov { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; font-family: "Aptos", "Inter", "Segoe UI", sans-serif; }
.sa-lm-ov .lm-pin path { stroke: #FFFFFF; stroke-width: 1.4; }
.sa-lm-ov .lm-pin circle { fill: #FFFFFF; }
.sa-lm-ov .lm-pin.is-geo path { fill: #6F8FC9; }
.sa-lm-ov .lm-pin.is-stop path { fill: #2F579A; }
.sa-lm-ov rect { fill: rgba(13, 21, 31, .9); stroke: rgba(207, 217, 238, .3); stroke-width: 1; }
.sa-lm-ov text { fill: #FFFFFF; font-size: 12px; font-weight: 600; }
.sa-lm-ov .lm-tag text { font-weight: 300; fill: #E6ECF7; }
.sa-lm-ov .lm-step { fill: #6F8FC9; font-size: 13px; font-weight: 600; }

/* lower city so the routes read between the buildings */
.sa-xh-scenes [data-scene="lastmile"] { --hk: 1.5; }
.sa-xh-scenes [data-scene="agentsx"] { overflow: visible; }
.sa-ag-ov .lm-tag text { font-size: 12px; font-weight: 600; fill: rgba(255,255,255,.8); }
.sa-ag-ov .lm-tag rect { transition: fill .3s ease; }
.sa-ag-ov .lm-tag.is-on rect { fill: #2F579A; stroke: #6F8FC9; }
.sa-ag-ov .lm-tag.is-on text { fill: #FFFFFF; }
.sa-ag-ov .lm-tag.is-hub rect { fill: #FFFFFF; stroke: none; }
.sa-ag-ov .lm-tag.is-hub text { fill: #101B37; font-weight: 800; }

/* ===== elevation: the scene leads; the copy is one group; the stage has depth ===== */
.sa-xh-in { position: relative; z-index: 1; }
.sa-xh::before {
  content: ""; position: absolute; inset: 0; z-index: 0; 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(55% 65% at 70% 62%, #000 0%, transparent 78%);
          mask-image: radial-gradient(55% 65% at 70% 62%, #000 0%, transparent 78%);
}
.sa-xh-h1 { font-size: min(clamp(38px, 2.6vw + 18px, 78px), 7.2vh); }
.sa-xh-head .sa-xh-all { position: static; }
.sa-xh-left .sa-xh-all { margin-top: clamp(16px, 2.4vh, 24px); }
@media (min-width: 901px) {
  .sa-xh-in { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); }
  /* the scene may run past the frame towards the window edge, never wider than it reads well */
  .sa-xh-right { --ext: calc((100vw - min(var(--sa-frame, 1180px), 100vw - 2 * var(--sa-frame-gut, 32px))) / 2 - var(--sa-frame-gut, 32px)); }
  .sa-xh-scenes {
    aspect-ratio: auto;
    width: min(100% + var(--ext), 1120px);
    height: clamp(380px, 64svh, 860px);
    max-height: none;
  }
}

/* fit one screen down to 1280 × 720: the scene and the headline yield to short windows */
@media (min-width: 901px) {
  .sa-xh-scenes { height: clamp(300px, min(64svh, 100svh - 370px), 860px); }
  .sa-xh-h1 { font-size: min(clamp(38px, 2.6vw + 18px, 78px), 6.4vh); }
}
@media (min-width: 901px) and (max-height: 820px) {
  .sa-xh-in { padding-block: calc(76px + 12px) 16px; }
  .sa-xh-trust { margin-top: 8px; }
  .sa-xh-left, .sa-xh-right { margin-top: 16px; }
  .sa-xh-tab { min-height: 44px; padding: 8px 0; }
  .sa-xh-inner { padding-bottom: 12px; }
  .sa-xh-left .sa-xh-all { margin-top: 8px; }
  .sa-xh-f { margin-top: 6px; }
  .sa-xh-actions { margin-top: 10px; }
}

@media (min-width: 901px) {
  .sa-xh-in { grid-template-columns: minmax(0, 4.9fr) minmax(0, 7.1fr); }
  .sa-xh-actions { flex-wrap: nowrap; }
}

/* the open project breathes: the progress line belongs to the title (tight above it),
   the description starts a clear step below it; spacing on the 8-px scale */
.sa-xh-item .sa-xh-inner { padding-top: 16px; padding-bottom: 24px; }
.sa-xh-item .sa-xh-f { margin-top: 16px; }
.sa-xh-item .sa-xh-actions { margin-top: 24px; }
@media (min-width: 901px) and (max-height: 820px) {
  .sa-xh-item .sa-xh-inner { padding-top: 12px; padding-bottom: 16px; }
  .sa-xh-item .sa-xh-f { margin-top: 8px; }
  .sa-xh-item .sa-xh-actions { margin-top: 16px; }
}

.sa-xh-rv .w.trunk { stroke: rgba(111, 143, 201, .6); stroke-width: 1.6; }
.sa-xh-rv .labels .hubname { fill: #FFFFFF; font-size: 11.5px; font-weight: 600; }
.sa-xh-rv .labels .bus { fill: #6F8FC9; font-size: 10px; font-weight: 600; }

/* ===== centred composition: on wide screens this page uses a wider shared frame, so the
   nav, the headline and the two columns all sit on one centred measure; the scene stays
   inside it and the copy stays close to the headline ===== */
@media (min-width: 1700px) { :root { --sa-frame: 1440px; } }
@media (min-width: 901px) {
  .sa-xh-scenes { width: 100%; height: clamp(300px, min(56svh, 100svh - 370px), 720px); }
}

@media (min-width: 901px) {
  .sa-xh-scenes { height: clamp(300px, min(46svh, 100svh - 370px), 600px); }
  .sa-xh-left, .sa-xh-right { margin-top: clamp(16px, 2.6vh, 32px); }
}

.sa-xh-rv .door rect { fill: none; stroke: #CFD9EE; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.sa-xh-rv .door .leaf { fill: #101B37; }

/* number and label: the label's last line sits on the number's baseline */
.sa-xh .sa-xh-f { align-items: last baseline; }
.sa-xh .sa-xh-f b small { vertical-align: baseline; }

/* ===== projects lead to their pages ===== */
.sa-xh-t { display: inline-flex; align-items: baseline; gap: 10px; }
.sa-xh-go { font-size: .8em; font-weight: 600; color: #6F8FC9; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.sa-xh-item.is-on .sa-xh-go { opacity: 1; transform: none; }
.sa-xh-item.is-on .sa-xh-tab:hover .sa-xh-go { transform: translateX(4px); color: #FFFFFF; }
.sa-xh-item.is-on .sa-xh-tab { cursor: pointer; }
.sa-xh-item.is-on .sa-xh-tab:hover .sa-xh-tt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(255,255,255,.4); }
/* the scene opens the project it shows */
.sa-xh-scene-link { position: absolute; inset: 0; z-index: 3; }
.sa-xh-scene-link:focus-visible { outline: 2px solid #6F8FC9; outline-offset: 4px; }
/* all solutions: the secondary button on the dark stage */
.sa-xh .sa-xh-all.is-btn { height: 48px; min-height: 48px; padding: 0 20px; border: 1px solid rgba(255, 255, 255, .55); color: #FFFFFF; transition: border-color .2s ease, background-color .2s ease; }
.sa-xh .sa-xh-all.is-btn:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .06); }

/* one panel height for every project (set by sa-xhero.js): nothing below or above moves */
.sa-xh-list .sa-xh-item .sa-xh-inner { min-height: var(--xh-inner, 0px); box-sizing: border-box; }