/* hx: hero composition mockup (home). Centred under the oculus; caption rail along the foot.
   Type is the site's Newsreader display cut: first line light, second regular, the closing
   full stop in the brand orange of the wordmark. Motion, light and beam are untouched. */
@media (min-width: 761px) {
  html body.p9 header.lx-hero { padding-block: 0 !important; }
  html body.p9 .lx-hero .hero-in { width: min(1208px, 100% - 88px) !important; margin-inline: auto !important; display: block !important; }
  html body.p9 .lx-hero .lx-hero-copy {
    position: relative; box-sizing: border-box; height: 100svh; min-height: 640px; max-width: none !important;
    margin: 0 !important; padding: 0 !important;
    display: grid !important; grid-template-columns: 260px minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto; column-gap: 40px; padding-bottom: clamp(56px, 10vh, 104px) !important;
  }
  html body.p9 .lx-hero h1.hero-h {
    grid-column: 1 / -1; align-self: end; margin: 0 0 clamp(28px, 5vh, 56px) !important;
    text-align: center; font-size: clamp(58px, 7.4vw, 116px) !important; line-height: .98 !important; letter-spacing: -.03em !important;
  }
  html body.p9 .lx-hero h1.hero-h .lab {
    position: absolute; left: 0; top: auto; bottom: calc(clamp(56px, 10vh, 104px) + 10px); margin: 0 !important;
    text-align: left; max-width: 260px; line-height: 1.7 !important;
  }
  /* no hairline over the caption rail (minimal openings, Mark 17 Oct) */
  html body.p9 .lx-hero .lx-hero-copy > p.sub {
    grid-column: 2; grid-row: 2; align-self: start; margin: 0 !important; 
    font-size: 17px !important; line-height: 1.55 !important; text-align: left; text-wrap: pretty; max-width: 44ch !important; color: rgba(245, 242, 236, .86);
  }
  html body.p9 .lx-hero .lx-hero-copy > .hero-actions {
    grid-column: 3; grid-row: 2; align-self: start; justify-content: flex-end; margin: 0 !important; gap: 12px; flex-wrap: nowrap;
  }
  html body.p9 .lx-hero .hero-actions .cta { white-space: nowrap; }
}
html body.p9 .lx-hero h1.hero-h .ln:nth-child(2) > :is(#hx-w, span) { font-weight: 300 !important; }
html body.p9 .lx-hero h1.hero-h :is(#hx-w, b) { font-weight: 450 !important; }
.hx-dot { color: #e16324; }
@media (min-width: 761px) and (max-width: 1199px) {
  html body.p9 .lx-hero .lx-hero-copy { --hx-rail: 150px; grid-template-columns: minmax(0, 1fr) auto; }
  html body.p9 .lx-hero .lx-hero-copy > p.sub { grid-column: 1; margin-top: 52px !important; font-size: 16px !important; }
  html body.p9 .lx-hero .lx-hero-copy > .hero-actions { grid-column: 2; margin-top: 52px !important; }
  html body.p9 .lx-hero h1.hero-h .lab { max-width: none; }
}
@media (max-width: 760px) {
  html body.p9 .lx-hero .lx-hero-copy { text-align: center; }
  html body.p9 .lx-hero h1.hero-h { text-align: center; }
  html body.p9 .lx-hero h1.hero-h .lab { text-align: center; }
  html body.p9 .lx-hero .lx-hero-copy > p.sub { margin-inline: auto !important; text-align: center; }
  html body.p9 .lx-hero .hero-actions { justify-content: center; }
}
/* Supporting row steps back from the headline (Mark, 17 Oct: "too big and stands out way too much"). */
@media (min-width: 761px) {
  html body.p9 .lx-hero .lx-hero-copy > p.sub { font-size: 15px !important; line-height: 1.55 !important; color: rgba(245, 242, 236, .8) !important; max-width: 42ch !important; }
  html body.p9 .lx-hero .hero-actions { gap: 10px !important; }
  html body.p9 .lx-hero .hero-actions .cta { min-height: 44px !important; height: 44px !important; padding: 0 18px !important; font-size: 13px !important; }
  html body.p9 .lx-hero h1.hero-h .lab { font-size: 11px !important; letter-spacing: .2em !important; color: rgba(245, 242, 236, .72) !important; }
}

/* hx: page openings, composed per photograph. One type system across five compositions:
   Newsreader display, set-up phrase light (300), pay-off regular (450), the final mark in the
   wordmark's orange; Manrope captions at 17/1.55; a 20% chalk hairline wherever a rail is drawn.
   stage   headline on the dark ground at the foot, sentence and buttons beside it
   column  the same, held to the left half where the picture's light moves on the right (AI, Our work)
   centre  title card in the middle, caption rail along the foot (Mailroom, Lori, WriteUp, Automation)
   horizon one line, its two halves pinned to the two edges, under the subject
   canopy  headline in the top band, clear of motion lower in the frame (Rooftop, Steady)
   html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) = any composed opening; html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) html body.p9 main > header.hero.hx.hx-column:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) html body.p9 main > header.hero.hx.hx-canopy:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) = one composition. Light, beams and motion untouched. */
html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h :is(.hx-a, .hx-b, .hx-one) { display: block; }
/* Minimal openings (Mark, 17 Oct): no link rows, no rules, no added fade. */
html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) :is(nav.ni-jumps, nav.se-paths, nav.de-jobs) { display: none !important; }
html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h .hx-a { font-weight: 300 !important; }
html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h .hx-b { font-weight: 450 !important; }
html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h .hx-one { font-weight: 400 !important; }
.hx-dot { color: #e16324; }
.hx-nb { white-space: nowrap; }
html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { margin: 0 !important; }
html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .hero-actions { margin-top: 24px !important; }

@media (min-width: 1000px) {
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) { align-items: flex-end !important; padding-bottom: 96px !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { display: grid !important; column-gap: 64px; align-items: end; margin-top: auto !important; margin-bottom: 0 !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h { grid-column: 1; grid-row: 2; margin: 0 !important; max-width: none !important; letter-spacing: -.03em !important; line-height: 1 !important; text-wrap: balance; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in > :is(.p9-by, .lab) { grid-column: 1; grid-row: 1; margin: 0 0 22px !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { font-size: 17px !important; line-height: 1.55 !important; color: rgba(245, 242, 236, .86) !important; max-width: 42ch !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .hero-actions { gap: 12px !important; flex-wrap: wrap; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in > :is(nav.ni-jumps, nav.se-paths, nav.de-jobs) { grid-column: 1 / -1; grid-row: 4; margin-top: 56px !important; width: 100% !important; max-width: none !important; }


  html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); column-gap: 56px; }
  html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h { font-size: clamp(56px, 6vw, 96px) !important; }
  html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h.long { font-size: clamp(46px, 4.6vw, 74px) !important; }
  html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side { grid-column: 2; grid-row: 2; align-self: end; }

  html body.p9 main > header.hero.hx.hx-column:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { grid-template-columns: minmax(0, 660px) 1fr; }
  html body.p9 main > header.hero.hx.hx-column:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h { font-size: clamp(56px, 5.8vw, 96px) !important; }
  html body.p9 main > header.hero.hx.hx-column:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h :is(.hx-a, .hx-b) { white-space: nowrap; }
  html body.p9 main > header.hero.hx.hx-column:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side { grid-column: 1; grid-row: 3; margin-top: 30px; }

  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) { align-items: stretch !important; padding-top: 128px !important; padding-bottom: 64px !important; min-height: 100svh !important; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; justify-items: center; text-align: center; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in > :is(.p9-by, .lab) { grid-row: 2; justify-self: center; justify-content: center; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h { grid-row: 3; font-size: clamp(56px, 6vw, 100px) !important; line-height: .98 !important; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h .studio-product-name { justify-content: center; text-align: center; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side { grid-row: 4; display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 36px; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { max-width: 46ch !important; text-wrap: balance; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .hero-actions { justify-content: center; }

  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { grid-template-columns: minmax(0, 1fr); }
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { container-type: inline-size; }
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h { grid-column: 1 / -1; font-size: clamp(40px, calc(100cqi / (var(--hx-k, 15.5) + .6)), 104px) !important; }
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h .hx-row { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: .4em; }
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h .hx-row > * { white-space: nowrap; }
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h .hx-b { margin-left: auto; text-align: right; }
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: center; margin-top: 28px; }
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { max-width: 64ch !important; }
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .hero-actions { margin-top: 0 !important; justify-content: flex-end; }
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in > :is(nav.ni-jumps, nav.se-paths, nav.de-jobs) { margin-top: 48px !important; }

  html body.p9 main > header.hero.hx.hx-canopy:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) { align-items: flex-start !important; padding-top: 168px !important; }
  html body.p9 main > header.hero.hx.hx-canopy:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { grid-template-columns: minmax(0, 1fr); margin-top: 0 !important; margin-bottom: auto !important; }
  html body.p9 main > header.hero.hx.hx-canopy:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h { font-size: clamp(56px, 5.8vw, 96px) !important; }
  html body.p9 main > header.hero.hx.hx-canopy:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side { grid-row: 3; margin-top: 36px; display: flex; align-items: flex-start; gap: 48px; max-width: 900px; }
  html body.p9 main > header.hero.hx.hx-canopy:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { flex: 1 1 auto; }
  html body.p9 main > header.hero.hx.hx-canopy:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .hero-actions { margin-top: 0 !important; flex: none; }
}
@media (max-width: 999px) {
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in, html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h, html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side { text-align: center; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in > :is(.p9-by, .lab) { justify-content: center; text-align: center; margin-inline: auto; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h .studio-product-name { justify-content: center; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { margin-inline: auto !important; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .hero-actions { justify-content: center; }
}
@media (max-width: 999px) {
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { margin-top: 20px !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h { letter-spacing: -.025em !important; line-height: 1.04 !important; text-wrap: balance; }
}
@media (max-width: 760px) {
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h { font-size: clamp(38px, 11.4vw, 46px) !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h.long { font-size: clamp(32px, 9vw, 38px) !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { font-size: 17px !important; line-height: 1.5 !important; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { grid-template-columns: minmax(0, 720px) 1fr; }
  html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h { font-size: 6vw !important; }
  html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h.long { font-size: 4.6vw !important; }
  html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side { grid-column: 1; grid-row: 3; align-self: start; margin-top: 30px; }
}

/* Product lockups: each app's own mark, lettering and colours (logotypes, exempt from WCAG 1.4.3). */
@font-face { font-family: "Hanken Grotesk"; src: url("hx-brand/hanken-grotesk-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Lora"; src: url("hx-brand/lora-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
.hx-lock { display: inline-flex; align-items: center; gap: .3em; line-height: 1; letter-spacing: 0; vertical-align: baseline; }
.hx-lock .hx-lmark { display: block; height: 1.1em; width: auto; flex: none; }
.hx-lock .hx-lword { display: block; }
.hx-rooftop .hx-lword { font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 700; letter-spacing: -.02em; color: #F4F1EA; }
.hx-rooftop .hx-lword b { font-weight: 600; color: #F0791E; }
.hx-rooftop.hx-on-paper .hx-lword { color: #14202A; }
.hx-mailroom .hx-lword { font-family: "Lora", Georgia, serif; font-weight: 600; color: #F4F1EA; letter-spacing: -.005em; }
.hx-writeup .hx-lword { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 800; letter-spacing: .02em; color: #eceef2; }
.hx-writeup .hx-lword i { font-style: normal; color: #d4720f; }
.hx-steady .hx-lword { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 700; letter-spacing: -.02em; color: #fff; }
.hx-customers .hx-lword { font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 600; color: #fff; }
.hx-shotgun .hx-wm { height: 1.05em; }
.st-mailroom .st-mark-name { font-family: "Lora", Georgia, serif; font-weight: 600; }
html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h .hx-brand-line { display: block; margin-bottom: .3em !important; font-size: max(.5em, 34px); }
html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h .hx-brand-line > span { display: inline-block; }
/* Local shade behind compositions that sit over the brighter middle and top of a photograph. */
html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { isolation: isolate; }
html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in::before, html body.p9 main > header.hero.hx.hx-canopy:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in::before { content: ""; position: absolute; z-index: -1; pointer-events: none; }
html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in::before { inset: -14% -12% 6%; background: radial-gradient(closest-side, rgba(11, 13, 14, 0.840) 0%, rgba(11, 13, 14, 0.803) 10%, rgba(11, 13, 14, 0.705) 20%, rgba(11, 13, 14, 0.569) 30%, rgba(11, 13, 14, 0.420) 40%, rgba(11, 13, 14, 0.277) 50%, rgba(11, 13, 14, 0.158) 60%, rgba(11, 13, 14, 0.072) 70%, rgba(11, 13, 14, 0.022) 80%, rgba(11, 13, 14, 0.003) 90%, rgba(11, 13, 14, 0.000) 100%); }
html body.p9 main > header.hero.hx.hx-canopy:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in::before { inset: -36% 6% -16% -20%; background: radial-gradient(closest-side, rgba(11, 13, 14, .900) 0%, rgba(11, 13, 14, .860) 10%, rgba(11, 13, 14, .755) 20%, rgba(11, 13, 14, .610) 30%, rgba(11, 13, 14, .450) 40%, rgba(11, 13, 14, .297) 50%, rgba(11, 13, 14, .169) 60%, rgba(11, 13, 14, .078) 70%, rgba(11, 13, 14, .024) 80%, rgba(11, 13, 14, .003) 90%, rgba(11, 13, 14, .000) 100%); }
html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side, html body.p9 main > header.hero.hx.hx-column:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side { position: relative; }
html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side::before, html body.p9 main > header.hero.hx.hx-column:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side::before { content: ""; position: absolute; z-index: -1; inset: -110px -120px -90px; pointer-events: none; background: radial-gradient(closest-side, rgba(11, 13, 14, 0.900) 0%, rgba(11, 13, 14, 0.860) 10%, rgba(11, 13, 14, 0.755) 20%, rgba(11, 13, 14, 0.610) 30%, rgba(11, 13, 14, 0.450) 40%, rgba(11, 13, 14, 0.297) 50%, rgba(11, 13, 14, 0.169) 60%, rgba(11, 13, 14, 0.078) 70%, rgba(11, 13, 14, 0.024) 80%, rgba(11, 13, 14, 0.003) 90%, rgba(11, 13, 14, 0.000) 100%); }
@media (max-width: 999px) {
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { position: relative; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -90px -60px -50px; background: radial-gradient(closest-side, rgba(11, 13, 14, .756) 0%, rgba(11, 13, 14, .722) 10%, rgba(11, 13, 14, .634) 20%, rgba(11, 13, 14, .512) 30%, rgba(11, 13, 14, .378) 40%, rgba(11, 13, 14, .249) 50%, rgba(11, 13, 14, .142) 60%, rgba(11, 13, 14, .065) 70%, rgba(11, 13, 14, .020) 80%, rgba(11, 13, 14, .002) 90%, rgba(11, 13, 14, .000) 100%); }
}
@media (max-width: 999px) {
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in::before { inset: -100px -60px -50px; background: radial-gradient(closest-side, rgba(11, 13, 14, 0.740) 0%, rgba(11, 13, 14, 0.707) 10%, rgba(11, 13, 14, 0.621) 20%, rgba(11, 13, 14, 0.501) 30%, rgba(11, 13, 14, 0.370) 40%, rgba(11, 13, 14, 0.244) 50%, rgba(11, 13, 14, 0.139) 60%, rgba(11, 13, 14, 0.064) 70%, rgba(11, 13, 14, 0.020) 80%, rgba(11, 13, 14, 0.002) 90%, rgba(11, 13, 14, 0.000) 100%); }
}

/* aperture (Custom software): the words sit inside the photograph's round opening, as if read through it;
   the sunlit wall to the right keeps its moving light. Centre and radius come from hx-aperture.js. */
@media (min-width: 1000px) {
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { position: absolute !important; z-index: 3; left: calc(var(--hx-cx, 387px) - var(--hx-r, 255px)) !important; top: calc(var(--hx-cy, 532px) - var(--hx-r, 255px)) !important;
    width: calc(var(--hx-r, 255px) * 2) !important; height: calc(var(--hx-r, 255px) * 2); max-width: none !important; margin: 0 !important; padding: 0 !important;
    display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) h1.hero-h { font-size: calc(var(--hx-r, 255px) * .19) !important; line-height: 1.02 !important; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side { margin-top: calc(var(--hx-r, 255px) * .1); display: flex; flex-direction: column; align-items: center; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { margin: 0 !important; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .hero-actions { margin-top: calc(var(--hx-r, 255px) * .075) !important; gap: 10px !important; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side .cta { padding-inline: calc(var(--hx-r, 255px) * .06) !important; min-height: 44px; font-size: clamp(13px, calc(var(--hx-r, 255px) * .054), 14px) !important; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { transform: translateY(calc(var(--hx-r, 255px) * -.04)); }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx).hx-ap-tight .hero-in { transform: translateY(calc(var(--hx-r, 255px) * -.17)); }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx).hx-ap-tight h1.hero-h { font-size: calc(var(--hx-r, 255px) * .17) !important; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx).hx-ap-tight .hx-side { margin-top: calc(var(--hx-r, 255px) * .07); }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx).hx-ap-tight .hx-side > .sub { max-width: calc(var(--hx-r, 255px) * 1.8) !important; font-size: 13px !important; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx).hx-ap-tight .hx-side > .hero-actions { margin-top: calc(var(--hx-r, 255px) * .055) !important; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { max-width: calc(var(--hx-r, 255px) * 1.56) !important; font-size: clamp(13px, calc(var(--hx-r, 255px) * .058), 16px) !important; line-height: 1.5 !important; text-wrap: balance; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .hero-actions { justify-content: center; flex-wrap: nowrap; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > nav.se-paths { position: absolute; z-index: 3; bottom: 56px; right: max(44px, calc((100% - 1208px) / 2)); left: max(calc(var(--hx-cx, 387px) + var(--hx-r, 255px) * 1.22 + 24px), calc(100% - max(44px, calc((100% - 1208px) / 2)) - 680px)); width: auto !important; margin: 0 !important; }
}
@media (max-width: 999px) {
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) { flex-direction: column !important; align-items: stretch !important; justify-content: flex-end !important; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > .hero-in, html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > nav.se-paths { width: auto !important; max-width: none !important; margin-left: 44px !important; margin-right: 44px !important; }
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > nav.se-paths { margin-top: 36px !important; position: relative; z-index: 3; }
}
@media (max-width: 760px) {
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > .hero-in, html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > nav.se-paths { margin-left: 20px !important; margin-right: 20px !important; }
}
/* Horizon: a soft shade that hugs the words (not a fade across the photo), so the headline holds on bright stone. */
@media (min-width: 1000px) {
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -150px -96px -90px; background: radial-gradient(closest-side, rgba(11, 13, 14, 0.900) 0%, rgba(11, 13, 14, 0.860) 10%, rgba(11, 13, 14, 0.755) 20%, rgba(11, 13, 14, 0.610) 30%, rgba(11, 13, 14, 0.450) 40%, rgba(11, 13, 14, 0.297) 50%, rgba(11, 13, 14, 0.169) 60%, rgba(11, 13, 14, 0.078) 70%, rgba(11, 13, 14, 0.024) 80%, rgba(11, 13, 14, 0.003) 90%, rgba(11, 13, 14, 0.000) 100%); }
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in { position: relative; }
}
@media (max-width: 999px) {
  html body.p9 main > header.hero.hx.hx-canopy:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in::before { inset: -220px -80px -60px; background: radial-gradient(closest-side, rgba(11, 13, 14, .861) 0%, rgba(11, 13, 14, .823) 10%, rgba(11, 13, 14, .722) 20%, rgba(11, 13, 14, .583) 30%, rgba(11, 13, 14, .430) 40%, rgba(11, 13, 14, .284) 50%, rgba(11, 13, 14, .162) 60%, rgba(11, 13, 14, .074) 70%, rgba(11, 13, 14, .023) 80%, rgba(11, 13, 14, .003) 90%, rgba(11, 13, 14, .000) 100%); }
}
/* No dark-left-to-light-right fade over the photographs (Mark, 17 Oct: "i dont want this ... at all"); the words keep
   their own soft shade. */
@media (min-width: 901px) {
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .scrim.l { background: rgba(11, 13, 14, .5) !important; opacity: 1 !important; }   /* even, not a left-to-right fade */
  :is(html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx), html body.p9 main > header.hero.hx.hx-column:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx)) .hero-in { position: relative; }
  :is(html body.p9 main > header.hero.hx.hx-stage:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx), html body.p9 main > header.hero.hx.hx-column:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx)) .hero-in::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -120px -110px -80px; background: radial-gradient(closest-side, rgba(11, 13, 14, .882) 0%, rgba(11, 13, 14, .843) 10%, rgba(11, 13, 14, .740) 20%, rgba(11, 13, 14, .598) 30%, rgba(11, 13, 14, .441) 40%, rgba(11, 13, 14, .291) 50%, rgba(11, 13, 14, .166) 60%, rgba(11, 13, 14, .076) 70%, rgba(11, 13, 14, .024) 80%, rgba(11, 13, 14, .003) 90%, rgba(11, 13, 14, .000) 100%); }
  html body.p9 main > header.hero.hx.hx-column:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in::before { right: auto; width: calc(700px + 220px); }
}
@media (min-width: 1000px) {
  /* Custom software: the opening is bright sky; a soft dusk inside the circle keeps the words readable, the wall's light untouched */
  html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -2%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 13, 14, .777) 0%, rgba(11, 13, 14, .742) 10%, rgba(11, 13, 14, .652) 20%, rgba(11, 13, 14, .526) 30%, rgba(11, 13, 14, .388) 40%, rgba(11, 13, 14, .256) 50%, rgba(11, 13, 14, .146) 60%, rgba(11, 13, 14, .067) 70%, rgba(11, 13, 14, .021) 80%, rgba(11, 13, 14, .003) 90%, rgba(11, 13, 14, .000) 100%); }
  /* the small "A product by SOLVA" line carries its own soft shade */
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in > .p9-by { position: relative; isolation: isolate; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in > .p9-by::before { content: ""; position: absolute; z-index: -1; inset: -90px -200px; pointer-events: none; background: radial-gradient(closest-side, rgba(11, 13, 14, .756) 0%, rgba(11, 13, 14, .722) 10%, rgba(11, 13, 14, .634) 20%, rgba(11, 13, 14, .512) 30%, rgba(11, 13, 14, .378) 40%, rgba(11, 13, 14, .249) 50%, rgba(11, 13, 14, .142) 60%, rgba(11, 13, 14, .065) 70%, rgba(11, 13, 14, .020) 80%, rgba(11, 13, 14, .002) 90%, rgba(11, 13, 14, .000) 100%); }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in > .p9-by { text-shadow: 0 0 14px rgba(11, 13, 14, .9), 0 0 3px rgba(11, 13, 14, .7); }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in > .p9-by { color: #F5F2EC !important; opacity: 1 !important; width: max-content !important; max-width: 100%; justify-self: start; }
  html body.p9 main > header.hero.hx.hx-centre:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hero-in > .p9-by { justify-self: center; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { color: #F5F2EC !important; }
}
/* Supporting row steps back from the headline on every opening. */
@media (min-width: 1000px) {
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .sub { font-size: 15px !important; line-height: 1.55 !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side > .hero-actions { gap: 10px !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) .hx-side .cta { min-height: 44px !important; height: 44px !important; padding: 0 18px !important; font-size: 13px !important; }
}

/* hx-dot-white: full stop in chalk, not accent (Mark 17 Oct) */
.hx-dot { color: inherit !important; }
/* Phone openings (Mark, 18 Oct: "the photo is cut off and the animations aren't there... we need it to look just as
   amazing on mobile as it does on pc"). A wide photograph squeezed into a tall phone screen showed a third of its
   width, with the words over most of what was left, so the subject was cut and every light, tree and river had no
   open photo to move in. On a phone the photograph now sits in its own band at the top, framed on its subject, and
   the words sit under it on the dark ground, so the motion runs clear of them. --hx-fx: the subject's place across the
   photograph (object-position x); --hx-band: the band's height (shorter shows more of the width). */
@media (max-width: 760px) {
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx), html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) { --hx-band: clamp(340px, 54svh, 520px); display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: stretch !important;
    min-height: 0 !important; height: auto !important; padding-top: calc(var(--hx-band) + var(--hx-gap, -24px)) !important; padding-bottom: 56px !important; background: #0B0D0E; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > .bleed, html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > .scrim, html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > .sl2-field { top: 0 !important; bottom: auto !important; height: var(--hx-band) !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > .bleed { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--hx-fade, 120px)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--hx-fade, 120px)), transparent); }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > .bleed img { object-position: var(--hx-fx, 50%) 50% !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > .scrim.l { background: rgba(11, 13, 14, .3) !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > .scrim.b { opacity: .55 !important; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > .hero-in, html body.p9 main > header.hero.hx.hx-aperture:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx) > .hero-in { margin-top: 0 !important; margin-bottom: 0 !important; }
}
/* Each photograph framed on its subject (measured on the 1920 px export). The bands that differ make room for the motion:
   Custom software shows the round opening and the sunlit wall together; Construction shows the colonnade where the statue
   peeks and both cornice statues with room to walk (heroes-statues hides them if either plinth is off the crop); Website design lowers the sun clear of the menu; Shotgun brings the lamp and its moths' 76 px reach on screen;
   Mailroom shows the light on the right of the spiral; Steady keeps the river clear of the words. */
@media (max-width: 760px) {
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/pick-264-"]) { --hx-fx: 40%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/pick-80-"]) { --hx-fx: 70%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/solva-rooftop-hero-"]) { --hx-fx: 40%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/solva-svc-design-"]) { --hx-fx: 54%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/pick-36-"]) { --hx-fx: 40%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/solva-svc-dash-"]) { --hx-fx: 44%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/solva-svc-integration-"]) { --hx-fx: 30%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/solva-custom-cine-"]) { --hx-fx: 16%; --hx-band: 400px; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/solva-trades-cine-"]) { --hx-fx: 70%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/solva-svc-crm-"]) { --hx-fx: 30%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/pick-268-"]) { --hx-fx: 50%; --hx-band: 500px; }
  html body.p9 main > header.hero.hx.hx-horizon:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/pick-268-"]) { --hx-fx: 76%; --hx-band: 540px; }   /* Construction (lead generation shares the photo, keeps the sphere) */
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/pick-31-"]) { --hx-fx: 90%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/pick-251-"]) { --hx-fx: 60%; --hx-band: 560px; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/pick-229-"]) { --hx-fx: 40%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/pick-248-"]) { --hx-fx: 100%; --hx-band: 500px; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/pick-307-"]) { --hx-fx: 60%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/pick-271-"]) { --hx-fx: 100%; --hx-band: 380px; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/solva-case-plumbing-"]) { --hx-fx: 70%; }
  html body.p9 main > header.hero.hx:is(#hx1, .hx):is(#hx2, .hx):is(#hx3, .hx):is(#hx4, .hx):has(> .bleed img[data-media-origin*="/solva-steady-cine-"]) { --hx-fx: 66%; --hx-band: 480px; --hx-gap: 64px; --hx-fade: 44px; }
}
/* Polish found by the every-page phone audit, 18 Oct (Mark: "make sure the mobile looks as polished and nice as pc on
   every page"). Rooftop's register: on a phone the long "hours sold" label took the whole row and squeezed the
   department name to nothing, so "Service" sat on top of it. Lead generation: the second link in a row was set to
   display: table, which drew its arrow as a stray vertical line (on every screen size). Construction's floor plan: on a
   phone its left wall runs through the caption's first letter. */
@media (max-width: 760px) {
  html body .sc-reg .sc-pick.sc-strip { grid-template-columns: max-content minmax(0, 1fr) !important; column-gap: 16px; }
  html body figure.st-construction-fig.ra-scene > figcaption { padding-left: 12px !important; }
}
html .nine-services.ns-trades .fw-rows li > div > a + a { display: flex; width: fit-content; }
/* Home, AI workshop: phones never build the 3D scene (a 0.3 to 1 s freeze on a phone, 15 Oct), so they showed a still.
   They now play a seamless 8.8 s loop rendered from that same scene, frame by frame, over this section's own colour;
   phone.py adds the video and its small script. Same phone rule as d-n.js. */
.ai-workshop-loop { display: none; }
@media (pointer: coarse), (max-width: 759px) {
  #lx-lights .ai-workshop-stage > .ai-workshop-loop { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .4s ease; pointer-events: none; }
  #lx-lights .ai-workshop[data-loop="on"] .ai-workshop-stage > .ai-workshop-loop { opacity: 1; }
}