/* SEDULUS | the painted page ("Loving Vincent" pass). Every surface is real oil paint: brushwork from the sky of
   Van Gogh's The Starry Night (1889, MoMA; public-domain scan), sky passages only, recoloured by luminance into
   pale blue and white for the light ground and bands, and into deep navy for the dark bands (the recipe of business
   card G). Light falls from the upper left into soft blue shadow. Words stay ink on calm, solid panels.
   Build: /workspace/sedulus-diagrams/vangogh/build_vg.py. Motion: assets/js/vangogh.js (gentle parallax only). */
:root { --vg-ink: #151a24; --vg-ink-2: #2b313d; --vg-shade: 12, 22, 48; --vg-light: 255, 253, 249; }

/* ---------- the ground: pale Starry Night brushwork over the whole page ---------- */
body { background: url("../img/vg-ground.webp?v=2") 0 0 / 1240px auto repeat, #dfe6f1; background-attachment: scroll; }
@media (max-width: 700px) { body { background-size: 760px auto; } }
body::after { opacity: .07; }          /* the canvas grain is now carried by the paint itself */

/* one light for the whole picture: a warm white glow from the upper left, the far edges sinking into navy shade.
   It breathes very slowly (a minute and a half per cycle), never faster. */
body::before { inset: -6%; will-change: transform, opacity;
  background:
    radial-gradient(60% 55% at 6% 4%, rgba(var(--vg-light), .34) 0%, rgba(var(--vg-light), .12) 40%, rgba(var(--vg-light), 0) 70%),
    radial-gradient(70% 90% at 104% 70%, rgba(var(--vg-shade), .13) 0%, rgba(var(--vg-shade), 0) 70%),
    radial-gradient(150% 120% at 34% 28%, rgba(var(--vg-shade), 0) 58%, rgba(var(--vg-shade), .08) 82%, rgba(var(--vg-shade), .17) 100%);
  animation: vg-light 90s ease-in-out infinite alternate; }
@keyframes vg-light { 0% { transform: translate3d(0, 0, 0); opacity: 1; } 50% { opacity: .86; } 100% { transform: translate3d(2.2%, 1.6%, 0); opacity: .96; } }
@media (max-width: 640px) { body::before { inset: -4%;
  background: radial-gradient(110% 50% at 0% 0%, rgba(var(--vg-light), .30) 0%, rgba(var(--vg-light), 0) 62%),
              radial-gradient(160% 110% at 40% 30%, rgba(var(--vg-shade), 0) 62%, rgba(var(--vg-shade), .12) 100%); } }

/* each section catches the same light: brighter at the upper left, a soft blue shade towards the lower right */
.section::before {
  background:
    radial-gradient(62% 80% at 0% 0%, rgba(var(--vg-light), .46) 0%, rgba(var(--vg-light), .14) 42%, rgba(var(--vg-light), 0) 68%),
    radial-gradient(70% 85% at 100% 100%, rgba(var(--vg-shade), .12) 0%, rgba(var(--vg-shade), 0) 68%); }

/* ---------- painted bands: their own layer of paint, brushed edges, a slower parallax depth ---------- */
.vg-paint { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; contain: paint;
  -webkit-mask: url("../img/brush-edge-top.png?v=6") top center / 2400px 110px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 216px) no-repeat, url("../img/brush-edge-bottom.png?v=6") bottom center / 2400px 110px repeat-x;
          mask: url("../img/brush-edge-top.png?v=6") top center / 2400px 110px repeat-x, linear-gradient(#000, #000) center / 100% calc(100% - 216px) no-repeat, url("../img/brush-edge-bottom.png?v=6") bottom center / 2400px 110px repeat-x; }
.vg-paint > i { position: absolute; left: -2%; right: -2%; top: -64px; bottom: -64px; display: block;
  background: #c9d4e6 url("../img/vg-band.webp?v=3") 0 0 / 1500px 700px repeat;
  translate: 0 var(--vg-py, 0px); transform: scale(1.03); will-change: transform;
  animation: vg-drift 110s ease-in-out infinite alternate; }
@keyframes vg-drift { from { transform: scale(1.03) translate3d(-.6%, 0, 0); } to { transform: scale(1.07) translate3d(.6%, -.4%, 0); } }
#industries .vg-paint > i { background-position: 420px 260px; transform: scale(1.03) scaleX(-1); animation-name: vg-drift-flip; }
@keyframes vg-drift-flip { from { transform: scaleX(-1) scale(1.03) translate3d(-.6%, 0, 0); } to { transform: scaleX(-1) scale(1.07) translate3d(.6%, -.4%, 0); } }
#contact .vg-paint > i { background-position: 860px 120px; }

.section-tint { background: none; padding-top: calc(var(--sec-pad, 96px) + 34px); padding-bottom: calc(var(--sec-pad, 96px) + 34px); }
/* over the band the light glaze is a touch stronger, so headings sit in clear air */
.section-tint::before {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%);
  background:
    radial-gradient(55% 70% at 4% 6%, rgba(var(--vg-light), .55) 0%, rgba(var(--vg-light), .20) 45%, rgba(var(--vg-light), 0) 70%),
    radial-gradient(70% 90% at 100% 100%, rgba(var(--vg-shade), .14) 0%, rgba(var(--vg-shade), 0) 70%); }

/* calmer paint behind words that sit straight on the ground: a soft pool of light under each heading block */
.section-head, .contact-info { position: relative; }
.section-head::before, .contact-info::before { content: ""; position: absolute; inset: -56px -110px -48px -90px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--vg-light), .80) 0%, rgba(var(--vg-light), .56) 55%, rgba(var(--vg-light), 0) 100%); }
@media (max-width: 700px) { .section-head::before, .contact-info::before { inset: -30px -24px; } }

/* ---------- the dark bands: deep navy, the card G paint ---------- */
.section-navy { background: none; -webkit-mask: none; mask: none; color: #dbe5f5; }
.section-navy .vg-paint > i { background: #050b1d url("../img/vg-navy.webp?v=1") 0% 0% / cover no-repeat; }
.section-navy::before { -webkit-mask: none; mask: none;
  background: radial-gradient(30% 36% at 26% 60%, rgba(2,6,20,.30) 0%, rgba(2,6,20,.12) 60%, rgba(2,6,20,0) 100%); }

/* ---------- panels: solid white, primed with a whisper of white impasto, lit from the upper left ---------- */
.glass { -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(150deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,0) 46%, rgba(var(--vg-shade), .028) 100%), url("../img/vg-white.webp?v=2") 0 0 / 640px 640px repeat, #fff;
  border-color: rgba(214,221,232,.95); }
.section-navy .cred { background: linear-gradient(150deg, rgba(255,255,255,.75) 0%, rgba(255,255,255,0) 50%, rgba(var(--vg-shade), .04) 100%), url("../img/vg-white.webp?v=2") 0 0 / 640px 640px repeat, #fff; }

/* ---------- ink, not blue, on words and small labels ---------- */
a { color: var(--vg-ink-2); }
a:hover { color: var(--vg-ink); }
.nav a:hover, .nav a.is-active { color: var(--vg-ink); background: rgba(var(--vg-shade), .05); }
.nav a.is-active { box-shadow: inset 0 -2px 0 -0px rgba(var(--vg-shade), .0); }
.lang-menu ul a[aria-current] { color: var(--vg-ink); background: rgba(var(--vg-shade), .05); }
.hero-meta svg { color: var(--vg-ink-2); }
.icon { color: var(--vg-ink-2); border-radius: 12px; background: linear-gradient(150deg, #fff 0%, #eef1f6 100%); box-shadow: inset 0 0 0 1px rgba(var(--vg-shade), .09), inset 1px 1px 0 #fff, 3px 4px 10px -6px rgba(var(--vg-shade), .35); }
.section-navy .cred .icon { background: linear-gradient(150deg, #fff 0%, #eef1f6 100%); }
/* numbered steps: a small ink plate, square, never a round bullet */
.ms-steps .n { border-radius: 7px; color: #fff; background: linear-gradient(145deg, #2c3446 0%, #141922 100%); box-shadow: inset 1px 1px 0 rgba(255,255,255,.18), 3px 4px 10px -4px rgba(var(--vg-shade), .45); }
.lang-code { border-radius: 9px; color: var(--vg-ink); background: linear-gradient(150deg, #fff, #f0f2f6); border-color: rgba(var(--vg-shade), .14); letter-spacing: .04em; }
/* the topic key keeps the globe's colours, laid as one short brush dab instead of a round dot */
.topic-list li::before { width: 15px; height: 6px; border-radius: 6px 2px 6px 2px; transform: rotate(-14deg); box-shadow: none;
  background: linear-gradient(100deg, color-mix(in srgb, var(--dot) 78%, #fff) 0%, var(--dot) 45%, color-mix(in srgb, var(--dot) 82%, #000) 100%); }

/* ---------- buttons: a stroke of deep navy paint with a brushed outline ---------- */
.btn-primary, .nav .nav-cta { background: #0b1736 url("../img/vg-navy.webp?v=1") 22% 30% / 1000px auto no-repeat; color: #fff; text-shadow: 0 1px 6px rgba(2,6,20,.6); }
.btn-primary:hover, .nav .nav-cta:hover, .nav .nav-cta.is-active { background: #13254f url("../img/vg-navy.webp?v=1") 8% 6% / 1000px auto no-repeat; color: #fff; filter: brightness(1.18); }

/* ---------- footer: the page ends in the deep navy of the night sky ---------- */
.site-footer { background: #060d22; border-top: 0; color: #c3cee0; padding-top: 104px; -webkit-mask: none; mask: none; isolation: isolate; }
.site-footer .vg-paint { -webkit-mask: url("../img/brush-edge-top.png?v=6") top center / 2400px 110px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 108px) no-repeat;
          mask: url("../img/brush-edge-top.png?v=6") top center / 2400px 110px repeat-x, linear-gradient(#000, #000) bottom / 100% calc(100% - 108px) no-repeat; }
.site-footer .vg-paint > i { background: #060d22 url("../img/vg-foot.webp?v=1") 0% 0% / cover no-repeat; bottom: -10px; }
.site-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 70% at 30% 50%, rgba(2,6,20,.32), rgba(2,6,20,0) 70%); }
.site-footer .wrap { position: relative; }
.site-footer .standards, .site-footer .footer-grid p, .site-footer .footer-bottom { color: #c3cee0; text-shadow: 0 1px 8px rgba(2,6,20,.7); }
.site-footer .standards strong, .site-footer .foot-h { color: #fff; }
.site-footer .brand-tag { color: #dbe4f2; }
.site-footer .standards, .site-footer .footer-bottom { border-color: rgba(220,230,250,.16); }
.site-footer .footer-grid a { color: #eef3fb; text-shadow: 0 1px 8px rgba(2,6,20,.7); }
.site-footer .footer-grid a:hover { color: #fff; }
.site-footer abbr { color: #dfe7f4; }

@media (max-width: 700px) {
  .vg-paint { -webkit-mask-size: 1400px 80px, 100% calc(100% - 156px), 1400px 80px; mask-size: 1400px 80px, 100% calc(100% - 156px), 1400px 80px; }
  .vg-paint > i { background-image: url("../img/vg-band-m.webp?v=3"); background-size: 456px 600px; top: -40px; bottom: -40px; }
  .section-tint { padding-top: calc(var(--sec-pad, 64px) + 22px); padding-bottom: calc(var(--sec-pad, 64px) + 22px); }
  .section-navy .vg-paint > i { background-image: url("../img/vg-navy-m.webp?v=1"); background-size: cover; }
  .site-footer { padding-top: 84px; }
  .site-footer .vg-paint { -webkit-mask-size: 1400px 80px, 100% calc(100% - 78px); mask-size: 1400px 80px, 100% calc(100% - 78px); }
  .site-footer .vg-paint > i { background-image: url("../img/vg-foot-m.webp?v=1"); background-size: cover; }
}
@media (prefers-reduced-motion: reduce) { body::before, .vg-paint > i { animation: none; } .vg-paint > i { translate: none; } }
@media print { .vg-paint { display: none; } body { background: #fff; } }

/* ===== round 2: deeper chiaroscuro on the pale paint only (navy bands, buttons and footer unchanged) ===== */
:root { --vg-deep: 38, 66, 132; }
/* every light section: the upper-left light stays, the lower right sinks into a richer mid blue */
.section:not(.section-navy)::before {
  background:
    radial-gradient(62% 80% at 0% 0%, rgba(var(--vg-light), .48) 0%, rgba(var(--vg-light), .15) 42%, rgba(var(--vg-light), 0) 68%),
    radial-gradient(82% 95% at 100% 100%, rgba(var(--vg-deep), .19) 0%, rgba(var(--vg-deep), .08) 44%, rgba(var(--vg-deep), 0) 76%); }
.section-tint::before {
  background:
    radial-gradient(55% 70% at 4% 6%, rgba(var(--vg-light), .58) 0%, rgba(var(--vg-light), .22) 45%, rgba(var(--vg-light), 0) 70%),
    radial-gradient(82% 95% at 100% 100%, rgba(var(--vg-deep), .22) 0%, rgba(var(--vg-deep), .09) 44%, rgba(var(--vg-deep), 0) 76%); }
/* the alternating painted bands (services, industries, contact) carry a slightly darker blue in the paint itself,
   deepening from the lit upper left to the lower right, so light and shadow passages alternate as you scroll */
.section-tint .vg-paint::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: linear-gradient(150deg, rgba(160,178,216,0) 6%, rgba(160,178,216,.30) 40%, rgba(132,154,204,.46) 74%, rgba(118,142,198,.56) 100%); }

/* ===== the hero: a pale whiter blue behind the words, falling off into darker blue brushwork round them ===== */
.vg-hero-shade { position: absolute; left: 0; top: 0; width: 100%; height: 1240px; z-index: -2; pointer-events: none; mix-blend-mode: multiply;
  background: radial-gradient(ellipse 52% 44% at 50% 31%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 34%, rgba(198,210,234,.55) 64%, rgba(178,195,228,.82) 100%);
  -webkit-mask-image: linear-gradient(#000 0%, #000 52%, transparent 96%); mask-image: linear-gradient(#000 0%, #000 52%, transparent 96%); }
.hero-copy::before { background: radial-gradient(closest-side, rgba(233,239,248,.92) 0%, rgba(226,234,246,.70) 52%, rgba(226,234,246,0) 100%); }
.hero h1 { text-shadow: 0 0 1px rgba(240,245,251,.6), 0 0 24px rgba(232,239,248,.9), 0 0 60px rgba(226,234,246,.7); }
@media (max-width: 700px) {
  .vg-hero-shade { height: 1500px;
    background: radial-gradient(ellipse 78% 34% at 50% 25%, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 36%, rgba(198,210,234,.55) 68%, rgba(178,195,228,.82) 100%); }
}
@media print { .vg-hero-shade { display: none; } }
/* the deeper paint asks for a touch more light under the intros, and a firmer ink on them */
.section-head > p, .contact-info > p { color: #353b47; }
.section-head::before, .contact-info::before { background: radial-gradient(closest-side, rgba(var(--vg-light), .86) 0%, rgba(var(--vg-light), .64) 58%, rgba(var(--vg-light), 0) 100%); }
@media (max-width: 700px) { .section-head::before, .contact-info::before { inset: -40px -34px; } }

/* ---------- the header strip: the same deep navy Starry Night paint as the footer, falling into the pale ground below
   through a brushed edge. Logo and links in light ink; never blue text. ---------- */
.site-header, .site-header.is-scrolled { background: #060d22 url("../img/vg-foot.webp?v=1") 30% 18% / 1600px auto no-repeat; border-bottom: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(40,66,124,.20) 0%, rgba(6,13,34,0) 40%, rgba(2,6,20,.32) 100%); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 44px; z-index: 0; pointer-events: none;
  background: #060d22 url("../img/vg-foot.webp?v=1") 30% calc(18% + 0px) / 1600px auto no-repeat;
  -webkit-mask: url("../img/brush-edge-bottom.png?v=6") top center / 2400px 44px repeat-x; mask: url("../img/brush-edge-bottom.png?v=6") top center / 2400px 44px repeat-x;
  filter: drop-shadow(0 6px 10px rgba(6,13,34,.18)); }
.site-header .header-inner { position: relative; z-index: 1; }
.site-header .brand img { box-shadow: 0 0 0 1px rgba(220,230,250,.14); }
.site-header .brand-tag { color: #dbe4f2; text-shadow: 0 1px 6px rgba(2,6,20,.6); }
@media (min-width: 1121px) {
  .site-header .nav a { color: #e9eef7; text-shadow: 0 1px 6px rgba(2,6,20,.55); }
  .site-header .nav a:hover, .site-header .nav a.is-active { color: #fff; background: rgba(255,255,255,.09); }
  .site-header .lang-menu summary { color: #e9eef7; }
  .site-header .lang-menu summary:hover { background: rgba(255,255,255,.09); }
  .site-header .nav .nav-cta { color: #141a26; text-shadow: none;
    background: linear-gradient(150deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 60%), url("../img/vg-white.webp?v=2") 0 0 / 640px 640px repeat, #f4f6fa;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 4px 14px -6px rgba(0,0,0,.5); }
  .site-header .nav .nav-cta:hover, .site-header .nav .nav-cta.is-active { color: #141a26; filter: brightness(1.04); }
}
.site-header .nav-toggle { background: rgba(255,255,255,.07); border-color: rgba(220,230,250,.28); color: #f1f4fa; }
@media (max-width: 640px) {
  .site-header, .site-header.is-scrolled, .site-header::after { background-image: url("../img/vg-foot-m.webp?v=1"); background-size: 900px auto; }
  .site-header::after { height: 30px; -webkit-mask-size: 1400px 30px; mask-size: 1400px 30px; }
}

/* ===== header v2: the same thick Starry Night strokes as the credentials band, same texture at the same scale
   (vg-navy drawn as large as the band paints it), sharp, not blurred. --hy is the texture offset; the brushed
   edge below continues the same paint exactly. Light text keeps a soft dark shadow so it stays sharp and legible. ===== */
:root { --hy: 150px; --hh: var(--header-h, 74px); --hs: max(1542px, 107vw); }
.site-header, .site-header.is-scrolled {
  background: #070f26 url("../img/vg-navy.webp?v=1") center calc(var(--hy) * -1) / var(--hs) auto no-repeat; }
.site-header::after {
  background: #070f26 url("../img/vg-navy.webp?v=1") center calc((var(--hy) + var(--hh) - 1px) * -1) / var(--hs) auto no-repeat;
  filter: drop-shadow(0 6px 10px rgba(6,13,34,.16)); }
.site-header::before { background: linear-gradient(100deg, rgba(60,92,160,.10) 0%, rgba(6,13,34,0) 45%, rgba(2,6,20,.18) 100%); }
.site-header .brand-tag, .site-header .nav a, .site-header .lang-menu summary { text-shadow: 0 1px 2px rgba(2,6,20,.85), 0 0 10px rgba(2,6,20,.6); }
@media (max-width: 1120px) { :root { --hs: 1849px; --hy: 260px; } }
@media (max-width: 640px) {
  :root { --hy: 70px; --hs: 570px; }
  .site-header, .site-header.is-scrolled, .site-header::after { background-image: url("../img/vg-navy-m.webp?v=1"); background-size: var(--hs) auto; }
}

/* interlinking tags on phones: slightly tighter pills so the seven topics pack two per row with no wasted line */
@media (max-width: 480px) {
  .topic-list { gap: 8px; }
  .topic-list li { padding: 7px 11px; gap: 7px; font-size: 13.5px; }
  .topic-list li::before { width: 12px; }
}
@media (max-width: 374px) { .topic-list li { font-size: 13px; padding: 7px 10px; } }

/* hero tagline: one short confident line under the heading, dark ink on the pale light pool */
.hero-claim { margin: -8px 0 18px; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.35; font-weight: 600; letter-spacing: -.005em; color: #141a26;
  text-wrap: balance; text-shadow: 0 0 1px rgba(240,245,251,.6), 0 0 18px rgba(232,239,248,.9); }
.js .hero .hero-claim.reveal { --d: .18s !important; }
@media (min-width: 1000px) { .hero .hero-claim { max-width: 860px; margin-left: auto; margin-right: auto; } }
@media (max-width: 640px) { .hero-claim { margin: -6px 0 14px; font-size: 17px; } }

/* the dark navy paint runs on from the header down past the AUDIT & CONSULTING line, ending in a brushed edge
   just above the hero heading. Same texture, same scale, continuous with the header. */
.hero { position: relative; --pt: clamp(40px, 7vh, 84px); --tagh: 21px; --edge: 34px; }
.hero::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 0; pointer-events: none;
  height: calc(var(--pt) + var(--tagh) + 14px + var(--edge));
  background: #070f26 url("../img/vg-navy.webp?v=1") center calc((var(--hy) + var(--hh)) * -1) / var(--hs) auto no-repeat;
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--edge) + 1px) no-repeat, url("../img/brush-edge-bottom.png?v=6") bottom center / 2400px var(--edge) repeat-x;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--edge) + 1px) no-repeat, url("../img/brush-edge-bottom.png?v=6") bottom center / 2400px var(--edge) repeat-x;
  filter: drop-shadow(0 6px 10px rgba(6,13,34,.16)); }
.hero > .wrap { position: relative; z-index: 1; }
.hero .hero-tag { color: #e3eaf5; margin-bottom: 14px; text-shadow: 0 1px 2px rgba(2,6,20,.85), 0 0 10px rgba(2,6,20,.6); }
.hero h1 { margin-top: calc(var(--edge) + 18px); }
.hero-copy::before { top: calc(var(--tagh) + 14px + var(--edge) - 30px); }
@media (min-width: 1000px) { .hero { --pt: clamp(26px, 4.5vh, 56px); } }
@media (max-width: 640px) {
  .hero { --pt: 30px; --edge: 26px; }
  .hero::before { -webkit-mask-size: 100% calc(100% - var(--edge) + 1px), 1400px var(--edge); mask-size: 100% calc(100% - var(--edge) + 1px), 1400px var(--edge);
    background-image: url("../img/vg-navy-m.webp?v=1"); }
}

/* footer standards line: the lead-in sits on its own as a small label, no colon */
.standards .standards-label { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }

/* hero tagline always on one line: it scales with the width of the hero text column (never below 13px).
   --ck is the size per unit of column width each language needs to fit, measured on the real font. */
.hero-copy { container-type: inline-size; }
.hero-claim { --ck: .047; --cmax: 17px; white-space: nowrap; text-wrap: nowrap; font-size: max(13px, min(var(--cmax), calc(100cqw * var(--ck)))); }
:lang(it) .hero-claim, .hero-claim:lang(it) { --ck: .0436; }
@media (min-width: 641px) { .hero-claim { --cmax: 19px; } }
@media (min-width: 1000px) { .hero-claim { --cmax: clamp(18px, 1.55vw, 22px); } }
/* tagline v2: a touch smaller and bold, still one line */
.hero-claim { --ck: .0425; --cmax: 15.5px; font-weight: 700; }
:lang(it) .hero-claim, .hero-claim:lang(it) { --ck: .041; }
@media (min-width: 641px) { .hero-claim { --cmax: 17px; } }
@media (min-width: 1000px) { .hero-claim { --cmax: clamp(16px, 1.35vw, 19.5px); } }

/* ===== the middle band (Management systems): a medium painted blue, halfway between the pale ground and the navy,
   the same Starry Night strokes (vg-mid is vg-navy recoloured lighter), brushed edges top and bottom.
   Words on it are near-white with a soft dark shadow; the cards stay pale with dark ink. ===== */
.section-mid { background: none; color: #eef3fb; padding-top: calc(var(--sec-pad, 96px) + 34px); padding-bottom: calc(var(--sec-pad, 96px) + 34px); }
.section-mid .vg-paint > i { background: #3f5f9e url("../img/vg-mid.webp?v=1") 0% 0% / cover no-repeat; }
.section-mid.section::before { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 150px, #000 calc(100% - 150px), transparent 100%);
  background: radial-gradient(60% 75% at 4% 6%, rgba(200,218,250,.14) 0%, rgba(200,218,250,0) 70%), radial-gradient(80% 95% at 100% 100%, rgba(8,18,46,.30) 0%, rgba(8,18,46,0) 72%); }
/* behind the heading block a soft pool of shade instead of light, so near-white words read clearly */
.section-mid .section-head::before { background: radial-gradient(closest-side, rgba(10,22,54,.42) 0%, rgba(10,22,54,.24) 55%, rgba(10,22,54,0) 100%); }
.section-mid .section-head h2 { color: #fff; text-shadow: 0 1px 2px rgba(4,12,34,.55), 0 2px 18px rgba(4,12,34,.55); }
.section-mid .section-head p { color: #eef3fb; text-shadow: 0 1px 2px rgba(4,12,34,.6), 0 1px 12px rgba(4,12,34,.55); }
.section-mid .kicker { color: #fff; text-shadow: 0 1px 2px rgba(4,12,34,.7), 0 1px 10px rgba(4,12,34,.6); }
.section-mid .kicker::before { background: linear-gradient(90deg, #ffffff, #dfe8f7); box-shadow: 0 1px 6px rgba(4,12,34,.6); }
.section-mid .glass { box-shadow: inset 1px 1px 0 #fff, 0 0 40px -12px rgba(190,210,255,.35), 12px 20px 40px -16px rgba(4,10,30,.55); }
@media (max-width: 700px) {
  .section-mid { padding-top: calc(var(--sec-pad, 64px) + 22px); padding-bottom: calc(var(--sec-pad, 64px) + 22px); }
  .section-mid .vg-paint > i { background-image: url("../img/vg-mid-m.webp?v=1"); background-size: cover; }
}
.section-mid .glass, .section-mid .glass li, .section-mid .glass h3 { color: var(--vg-ink); text-shadow: none; }
.section-mid .ms-node span { color: var(--vg-ink-2); }

/* ===== a second medium band: only under the outcomes and team training cards (below the globe, which stays pale).
   Full width, the same vg-mid paint and brushed edges as the Management systems band. The cards stay pale. ===== */
.sg2-bands.sg2-onmid { position: relative; z-index: 0; margin-top: 150px; }
.sg2-onmid > .vg-midband { inset: auto; top: -118px; bottom: -118px; left: calc(50% - 50vw); width: 100vw; z-index: -1; }
.sg2-onmid > .vg-midband > i { background: #3f5f9e url("../img/vg-mid.webp?v=1") 0% 40% / cover no-repeat; }
.sg2-onmid > .vg-midband::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 75% at 4% 10%, rgba(200,218,250,.12) 0%, rgba(200,218,250,0) 70%), radial-gradient(80% 95% at 100% 100%, rgba(8,18,46,.26) 0%, rgba(8,18,46,0) 72%); }
#supply-chain { padding-bottom: calc(var(--sec-pad, 96px) + 40px); }
.sg2-onmid .sg2-band { box-shadow: inset 1px 1px 0 #fff, 0 0 40px -12px rgba(190,210,255,.35), 12px 20px 40px -16px rgba(4,10,30,.55); color: var(--vg-ink); }
@media (max-width: 999px) { .sg2-bands.sg2-onmid { margin-top: 128px; } }
@media (max-width: 700px) {
  .sg2-bands.sg2-onmid { margin-top: 104px; }
  .sg2-onmid > .vg-midband { top: -86px; bottom: -86px; }
  .sg2-onmid > .vg-midband > i { background-image: url("../img/vg-mid-m.webp?v=1"); background-size: cover; }
  #supply-chain { padding-bottom: calc(var(--sec-pad, 64px) + 30px); }
}

/* outcomes/training band v2: half as tall again, and painted like the footer. vg-outband is the footer's own
   Starry Night swirl worked into a medium blue ground (soft-light blend, softened stroke edges, one shared canvas
   tooth), with the light falling from the upper left into deep blue at the lower right. */
.sg2-bands.sg2-onmid { margin-top: 258px; }
.sg2-onmid > .vg-midband { top: -226px; bottom: -226px; }
.sg2-onmid > .vg-midband > i { background: #3f5f9e url("../img/vg-foot.webp?v=1") 30% 40% / cover no-repeat; }
.sg2-onmid > .vg-midband::after { mix-blend-mode: soft-light;
  background: radial-gradient(55% 80% at 12% 18%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 70%), radial-gradient(70% 90% at 96% 96%, rgba(4,10,30,.45) 0%, rgba(4,10,30,0) 72%); }
#supply-chain { padding-bottom: calc(var(--sec-pad, 96px) + 148px); }
@media (max-width: 999px) { .sg2-bands.sg2-onmid { margin-top: 236px; } }
@media (max-width: 700px) {
  .sg2-bands.sg2-onmid { margin-top: 243px; }
  .sg2-onmid > .vg-midband { top: -225px; bottom: -225px; }
  .sg2-onmid > .vg-midband > i { background-image: url("../img/vg-foot-m.webp?v=1"); background-size: cover; }
  #supply-chain { padding-bottom: calc(var(--sec-pad, 64px) + 169px); }
}

/* outcomes/training band v3: the footer's own paint (vg-foot, the same asset and cover framing as the footer and the
   header strip's navy brushwork), lifted only as far as needed to sit about 25% darker than the previous version,
   with the footer's chiaroscuro shade laid over it. Same strokes, same light out of shadow. */
.sg2-onmid > .vg-midband > i { background: #060d22 url("../img/vg-foot.webp?v=1") 0% 0% / cover no-repeat; filter: brightness(4.5) saturate(.92); }
.sg2-onmid > .vg-midband::after { mix-blend-mode: normal;
  background: radial-gradient(40% 70% at 30% 50%, rgba(2,6,20,.32), rgba(2,6,20,0) 70%), radial-gradient(70% 90% at 98% 98%, rgba(2,6,20,.28) 0%, rgba(2,6,20,0) 72%); }
@media (max-width: 700px) {
  .sg2-onmid > .vg-midband > i { background-image: url("../img/vg-foot-m.webp?v=1"); background-size: cover; filter: brightness(2.8) saturate(.92); }
}
/* soft painted transitions on this band only: no hard brushed cut; the paint itself fades in along a smooth
   (smoothstep) ramp over ~120px (80px on phones), so moving into the band the pale gives way steadily to the blue
   and the strokes surface gradually out of the pale ground */
.sg2-onmid > .vg-midband { -webkit-mask: none; mask: none; }
.sg2-onmid > .vg-midband > i { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.000) 64px, rgba(0,0,0,0.043) 79px, rgba(0,0,0,0.156) 94px, rgba(0,0,0,0.316) 109px, rgba(0,0,0,0.500) 124px, rgba(0,0,0,0.684) 139px, rgba(0,0,0,0.844) 154px, rgba(0,0,0,0.957) 169px, rgba(0,0,0,1.000) 184px, rgba(0,0,0,1.000) calc(100% - 184px), rgba(0,0,0,0.957) calc(100% - 169px), rgba(0,0,0,0.844) calc(100% - 154px), rgba(0,0,0,0.684) calc(100% - 139px), rgba(0,0,0,0.500) calc(100% - 124px), rgba(0,0,0,0.316) calc(100% - 109px), rgba(0,0,0,0.156) calc(100% - 94px), rgba(0,0,0,0.043) calc(100% - 79px), rgba(0,0,0,0.000) calc(100% - 64px)); mask-image: linear-gradient(180deg, rgba(0,0,0,0.000) 64px, rgba(0,0,0,0.043) 79px, rgba(0,0,0,0.156) 94px, rgba(0,0,0,0.316) 109px, rgba(0,0,0,0.500) 124px, rgba(0,0,0,0.684) 139px, rgba(0,0,0,0.844) 154px, rgba(0,0,0,0.957) 169px, rgba(0,0,0,1.000) 184px, rgba(0,0,0,1.000) calc(100% - 184px), rgba(0,0,0,0.957) calc(100% - 169px), rgba(0,0,0,0.844) calc(100% - 154px), rgba(0,0,0,0.684) calc(100% - 139px), rgba(0,0,0,0.500) calc(100% - 124px), rgba(0,0,0,0.316) calc(100% - 109px), rgba(0,0,0,0.156) calc(100% - 94px), rgba(0,0,0,0.043) calc(100% - 79px), rgba(0,0,0,0.000) calc(100% - 64px)); }
@media (max-width: 700px) {
  .sg2-onmid > .vg-midband { -webkit-mask: none; mask: none; }
  .sg2-onmid > .vg-midband > i { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.000) 40px, rgba(0,0,0,0.043) 50px, rgba(0,0,0,0.156) 60px, rgba(0,0,0,0.316) 70px, rgba(0,0,0,0.500) 80px, rgba(0,0,0,0.684) 90px, rgba(0,0,0,0.844) 100px, rgba(0,0,0,0.957) 110px, rgba(0,0,0,1.000) 120px, rgba(0,0,0,1.000) calc(100% - 120px), rgba(0,0,0,0.957) calc(100% - 110px), rgba(0,0,0,0.844) calc(100% - 100px), rgba(0,0,0,0.684) calc(100% - 90px), rgba(0,0,0,0.500) calc(100% - 80px), rgba(0,0,0,0.316) calc(100% - 70px), rgba(0,0,0,0.156) calc(100% - 60px), rgba(0,0,0,0.043) calc(100% - 50px), rgba(0,0,0,0.000) calc(100% - 40px)); mask-image: linear-gradient(180deg, rgba(0,0,0,0.000) 40px, rgba(0,0,0,0.043) 50px, rgba(0,0,0,0.156) 60px, rgba(0,0,0,0.316) 70px, rgba(0,0,0,0.500) 80px, rgba(0,0,0,0.684) 90px, rgba(0,0,0,0.844) 100px, rgba(0,0,0,0.957) 110px, rgba(0,0,0,1.000) 120px, rgba(0,0,0,1.000) calc(100% - 120px), rgba(0,0,0,0.957) calc(100% - 110px), rgba(0,0,0,0.844) calc(100% - 100px), rgba(0,0,0,0.684) calc(100% - 90px), rgba(0,0,0,0.500) calc(100% - 80px), rgba(0,0,0,0.316) calc(100% - 70px), rgba(0,0,0,0.156) calc(100% - 60px), rgba(0,0,0,0.043) calc(100% - 50px), rgba(0,0,0,0.000) calc(100% - 40px)); }
}
.sg2-onmid > .vg-midband::after { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.043) 15px, rgba(0,0,0,0.156) 30px, rgba(0,0,0,0.316) 45px, rgba(0,0,0,0.500) 60px, rgba(0,0,0,0.684) 75px, rgba(0,0,0,0.844) 90px, rgba(0,0,0,0.957) 105px, rgba(0,0,0,1.000) 120px, rgba(0,0,0,1.000) calc(100% - 120px), rgba(0,0,0,0.957) calc(100% - 105px), rgba(0,0,0,0.844) calc(100% - 90px), rgba(0,0,0,0.684) calc(100% - 75px), rgba(0,0,0,0.500) calc(100% - 60px), rgba(0,0,0,0.316) calc(100% - 45px), rgba(0,0,0,0.156) calc(100% - 30px), rgba(0,0,0,0.043) calc(100% - 15px), rgba(0,0,0,0.000) calc(100% - 0px)); mask-image: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.043) 15px, rgba(0,0,0,0.156) 30px, rgba(0,0,0,0.316) 45px, rgba(0,0,0,0.500) 60px, rgba(0,0,0,0.684) 75px, rgba(0,0,0,0.844) 90px, rgba(0,0,0,0.957) 105px, rgba(0,0,0,1.000) 120px, rgba(0,0,0,1.000) calc(100% - 120px), rgba(0,0,0,0.957) calc(100% - 105px), rgba(0,0,0,0.844) calc(100% - 90px), rgba(0,0,0,0.684) calc(100% - 75px), rgba(0,0,0,0.500) calc(100% - 60px), rgba(0,0,0,0.316) calc(100% - 45px), rgba(0,0,0,0.156) calc(100% - 30px), rgba(0,0,0,0.043) calc(100% - 15px), rgba(0,0,0,0.000) calc(100% - 0px)); }
@media (max-width: 700px) { .sg2-onmid > .vg-midband::after { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.043) 10px, rgba(0,0,0,0.156) 20px, rgba(0,0,0,0.316) 30px, rgba(0,0,0,0.500) 40px, rgba(0,0,0,0.684) 50px, rgba(0,0,0,0.844) 60px, rgba(0,0,0,0.957) 70px, rgba(0,0,0,1.000) 80px, rgba(0,0,0,1.000) calc(100% - 80px), rgba(0,0,0,0.957) calc(100% - 70px), rgba(0,0,0,0.844) calc(100% - 60px), rgba(0,0,0,0.684) calc(100% - 50px), rgba(0,0,0,0.500) calc(100% - 40px), rgba(0,0,0,0.316) calc(100% - 30px), rgba(0,0,0,0.156) calc(100% - 20px), rgba(0,0,0,0.043) calc(100% - 10px), rgba(0,0,0,0.000) calc(100% - 0px)); mask-image: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.043) 10px, rgba(0,0,0,0.156) 20px, rgba(0,0,0,0.316) 30px, rgba(0,0,0,0.500) 40px, rgba(0,0,0,0.684) 50px, rgba(0,0,0,0.844) 60px, rgba(0,0,0,0.957) 70px, rgba(0,0,0,1.000) 80px, rgba(0,0,0,1.000) calc(100% - 80px), rgba(0,0,0,0.957) calc(100% - 70px), rgba(0,0,0,0.844) calc(100% - 60px), rgba(0,0,0,0.684) calc(100% - 50px), rgba(0,0,0,0.500) calc(100% - 40px), rgba(0,0,0,0.316) calc(100% - 30px), rgba(0,0,0,0.156) calc(100% - 20px), rgba(0,0,0,0.043) calc(100% - 10px), rgba(0,0,0,0.000) calc(100% - 0px)); } }

/* ===== round 10: soft painted transitions at every section boundary. Each painted band now fades in and out along
   a short smoothstep ramp (about 120px on desktop, 80px on phones), so the colour shifts steadily from one section
   into the next with the brushwork showing through, never a hard cut. The footer paint starts a little above its box
   so it melts into the contact band. Header strip and the dark hero top get the same treatment.
   Medium bands use the footer's own paint, lifted to medium blue. ===== */
.vg-paint, .sg2-onmid > .vg-midband { -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 12px, rgba(0,0,0,0.104) 24px, rgba(0,0,0,0.216) 36px, rgba(0,0,0,0.352) 48px, rgba(0,0,0,0.500) 60px, rgba(0,0,0,0.648) 72px, rgba(0,0,0,0.784) 84px, rgba(0,0,0,0.896) 96px, rgba(0,0,0,0.972) 108px, rgba(0,0,0,1.000) 120px, rgba(0,0,0,1.000) calc(100% - 120px), rgba(0,0,0,0.972) calc(100% - 108px), rgba(0,0,0,0.896) calc(100% - 96px), rgba(0,0,0,0.784) calc(100% - 84px), rgba(0,0,0,0.648) calc(100% - 72px), rgba(0,0,0,0.500) calc(100% - 60px), rgba(0,0,0,0.352) calc(100% - 48px), rgba(0,0,0,0.216) calc(100% - 36px), rgba(0,0,0,0.104) calc(100% - 24px), rgba(0,0,0,0.028) calc(100% - 12px), rgba(0,0,0,0.000) calc(100% - 0px)); mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 12px, rgba(0,0,0,0.104) 24px, rgba(0,0,0,0.216) 36px, rgba(0,0,0,0.352) 48px, rgba(0,0,0,0.500) 60px, rgba(0,0,0,0.648) 72px, rgba(0,0,0,0.784) 84px, rgba(0,0,0,0.896) 96px, rgba(0,0,0,0.972) 108px, rgba(0,0,0,1.000) 120px, rgba(0,0,0,1.000) calc(100% - 120px), rgba(0,0,0,0.972) calc(100% - 108px), rgba(0,0,0,0.896) calc(100% - 96px), rgba(0,0,0,0.784) calc(100% - 84px), rgba(0,0,0,0.648) calc(100% - 72px), rgba(0,0,0,0.500) calc(100% - 60px), rgba(0,0,0,0.352) calc(100% - 48px), rgba(0,0,0,0.216) calc(100% - 36px), rgba(0,0,0,0.104) calc(100% - 24px), rgba(0,0,0,0.028) calc(100% - 12px), rgba(0,0,0,0.000) calc(100% - 0px)); }
.sg2-onmid > .vg-midband > i, .sg2-onmid > .vg-midband::after { -webkit-mask-image: none; mask-image: none; }
.site-footer { background: transparent; }
.site-footer .vg-paint { top: -72px; -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 15px, rgba(0,0,0,0.104) 30px, rgba(0,0,0,0.216) 45px, rgba(0,0,0,0.352) 60px, rgba(0,0,0,0.500) 75px, rgba(0,0,0,0.648) 90px, rgba(0,0,0,0.784) 105px, rgba(0,0,0,0.896) 120px, rgba(0,0,0,0.972) 135px, rgba(0,0,0,1.000) 150px); mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 15px, rgba(0,0,0,0.104) 30px, rgba(0,0,0,0.216) 45px, rgba(0,0,0,0.352) 60px, rgba(0,0,0,0.500) 75px, rgba(0,0,0,0.648) 90px, rgba(0,0,0,0.784) 105px, rgba(0,0,0,0.896) 120px, rgba(0,0,0,0.972) 135px, rgba(0,0,0,1.000) 150px); }
.site-header::after { height: 56px; -webkit-mask: linear-gradient(0deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 6px, rgba(0,0,0,0.104) 11px, rgba(0,0,0,0.216) 17px, rgba(0,0,0,0.352) 22px, rgba(0,0,0,0.500) 28px, rgba(0,0,0,0.648) 34px, rgba(0,0,0,0.784) 39px, rgba(0,0,0,0.896) 45px, rgba(0,0,0,0.972) 50px, rgba(0,0,0,1.000) 56px); mask: linear-gradient(0deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 6px, rgba(0,0,0,0.104) 11px, rgba(0,0,0,0.216) 17px, rgba(0,0,0,0.352) 22px, rgba(0,0,0,0.500) 28px, rgba(0,0,0,0.648) 34px, rgba(0,0,0,0.784) 39px, rgba(0,0,0,0.896) 45px, rgba(0,0,0,0.972) 50px, rgba(0,0,0,1.000) 56px); }
.hero::before { -webkit-mask: linear-gradient(0deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 5px, rgba(0,0,0,0.104) 9px, rgba(0,0,0,0.216) 14px, rgba(0,0,0,0.352) 18px, rgba(0,0,0,0.500) 23px, rgba(0,0,0,0.648) 28px, rgba(0,0,0,0.784) 32px, rgba(0,0,0,0.896) 37px, rgba(0,0,0,0.972) 41px, rgba(0,0,0,1.000) 46px); mask: linear-gradient(0deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 5px, rgba(0,0,0,0.104) 9px, rgba(0,0,0,0.216) 14px, rgba(0,0,0,0.352) 18px, rgba(0,0,0,0.500) 23px, rgba(0,0,0,0.648) 28px, rgba(0,0,0,0.784) 32px, rgba(0,0,0,0.896) 37px, rgba(0,0,0,0.972) 41px, rgba(0,0,0,1.000) 46px); }
.section-mid .vg-paint > i { background: #060d22 url("../img/vg-foot.webp?v=1") 60% 0% / cover no-repeat; filter: brightness(4.5) saturate(.92); }
.section-mid .vg-paint::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 42% at 30% 30%, rgba(2,6,20,.40), rgba(2,6,20,0) 72%), radial-gradient(40% 70% at 30% 50%, rgba(2,6,20,.26), rgba(2,6,20,0) 70%), radial-gradient(70% 90% at 98% 98%, rgba(2,6,20,.26) 0%, rgba(2,6,20,0) 72%); }
.section-mid .section-head::before { background: radial-gradient(closest-side, rgba(8,18,46,.62) 0%, rgba(8,18,46,.36) 55%, rgba(8,18,46,0) 100%); }
@media (max-width: 700px) {
  .vg-paint, .sg2-onmid > .vg-midband { -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 8px, rgba(0,0,0,0.104) 16px, rgba(0,0,0,0.216) 24px, rgba(0,0,0,0.352) 32px, rgba(0,0,0,0.500) 40px, rgba(0,0,0,0.648) 48px, rgba(0,0,0,0.784) 56px, rgba(0,0,0,0.896) 64px, rgba(0,0,0,0.972) 72px, rgba(0,0,0,1.000) 80px, rgba(0,0,0,1.000) calc(100% - 80px), rgba(0,0,0,0.972) calc(100% - 72px), rgba(0,0,0,0.896) calc(100% - 64px), rgba(0,0,0,0.784) calc(100% - 56px), rgba(0,0,0,0.648) calc(100% - 48px), rgba(0,0,0,0.500) calc(100% - 40px), rgba(0,0,0,0.352) calc(100% - 32px), rgba(0,0,0,0.216) calc(100% - 24px), rgba(0,0,0,0.104) calc(100% - 16px), rgba(0,0,0,0.028) calc(100% - 8px), rgba(0,0,0,0.000) calc(100% - 0px)); mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 8px, rgba(0,0,0,0.104) 16px, rgba(0,0,0,0.216) 24px, rgba(0,0,0,0.352) 32px, rgba(0,0,0,0.500) 40px, rgba(0,0,0,0.648) 48px, rgba(0,0,0,0.784) 56px, rgba(0,0,0,0.896) 64px, rgba(0,0,0,0.972) 72px, rgba(0,0,0,1.000) 80px, rgba(0,0,0,1.000) calc(100% - 80px), rgba(0,0,0,0.972) calc(100% - 72px), rgba(0,0,0,0.896) calc(100% - 64px), rgba(0,0,0,0.784) calc(100% - 56px), rgba(0,0,0,0.648) calc(100% - 48px), rgba(0,0,0,0.500) calc(100% - 40px), rgba(0,0,0,0.352) calc(100% - 32px), rgba(0,0,0,0.216) calc(100% - 24px), rgba(0,0,0,0.104) calc(100% - 16px), rgba(0,0,0,0.028) calc(100% - 8px), rgba(0,0,0,0.000) calc(100% - 0px)); }
  .site-footer .vg-paint { top: -44px; -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 10px, rgba(0,0,0,0.104) 20px, rgba(0,0,0,0.216) 30px, rgba(0,0,0,0.352) 40px, rgba(0,0,0,0.500) 50px, rgba(0,0,0,0.648) 60px, rgba(0,0,0,0.784) 70px, rgba(0,0,0,0.896) 80px, rgba(0,0,0,0.972) 90px, rgba(0,0,0,1.000) 100px); mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 10px, rgba(0,0,0,0.104) 20px, rgba(0,0,0,0.216) 30px, rgba(0,0,0,0.352) 40px, rgba(0,0,0,0.500) 50px, rgba(0,0,0,0.648) 60px, rgba(0,0,0,0.784) 70px, rgba(0,0,0,0.896) 80px, rgba(0,0,0,0.972) 90px, rgba(0,0,0,1.000) 100px); }
  .site-header::after { height: 40px; -webkit-mask: linear-gradient(0deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 4px, rgba(0,0,0,0.104) 8px, rgba(0,0,0,0.216) 12px, rgba(0,0,0,0.352) 16px, rgba(0,0,0,0.500) 20px, rgba(0,0,0,0.648) 24px, rgba(0,0,0,0.784) 28px, rgba(0,0,0,0.896) 32px, rgba(0,0,0,0.972) 36px, rgba(0,0,0,1.000) 40px); mask: linear-gradient(0deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 4px, rgba(0,0,0,0.104) 8px, rgba(0,0,0,0.216) 12px, rgba(0,0,0,0.352) 16px, rgba(0,0,0,0.500) 20px, rgba(0,0,0,0.648) 24px, rgba(0,0,0,0.784) 28px, rgba(0,0,0,0.896) 32px, rgba(0,0,0,0.972) 36px, rgba(0,0,0,1.000) 40px); }
  .hero::before { -webkit-mask: linear-gradient(0deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 3px, rgba(0,0,0,0.104) 6px, rgba(0,0,0,0.216) 10px, rgba(0,0,0,0.352) 13px, rgba(0,0,0,0.500) 16px, rgba(0,0,0,0.648) 19px, rgba(0,0,0,0.784) 22px, rgba(0,0,0,0.896) 26px, rgba(0,0,0,0.972) 29px, rgba(0,0,0,1.000) 32px); mask: linear-gradient(0deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.028) 3px, rgba(0,0,0,0.104) 6px, rgba(0,0,0,0.216) 10px, rgba(0,0,0,0.352) 13px, rgba(0,0,0,0.500) 16px, rgba(0,0,0,0.648) 19px, rgba(0,0,0,0.784) 22px, rgba(0,0,0,0.896) 26px, rgba(0,0,0,0.972) 29px, rgba(0,0,0,1.000) 32px); }
  .section-mid .vg-paint > i { background-image: url("../img/vg-foot-m.webp?v=1"); background-size: cover; filter: brightness(2.8) saturate(.92); }
}
@media (max-width: 700px) {
  /* phones: the systems copy runs over more of the band, so its paint sits a little deeper and the pool is wider */
  .section-mid .vg-paint > i { filter: brightness(2.4) saturate(.92); }
  .section-mid .section-head::before { background: radial-gradient(closest-side, rgba(8,18,46,.66) 0%, rgba(8,18,46,.42) 60%, rgba(8,18,46,0) 100%); }
}

/* round 11 (scroll polish): softer section blends. Each section's painted band now begins a little before its
   section and ends a little after it, and fades in over a longer, smoother run, so one colour melts into the next.
   The fully painted area behind the text starts where it did before (120 px in on desktop, 80 px on phones). */
.section > .vg-paint { inset: -32px 0; -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.008) 8px, rgba(0,0,0,0.031) 16px, rgba(0,0,0,0.067) 24px, rgba(0,0,0,0.114) 32px, rgba(0,0,0,0.171) 40px, rgba(0,0,0,0.236) 48px, rgba(0,0,0,0.307) 56px, rgba(0,0,0,0.383) 64px, rgba(0,0,0,0.461) 72px, rgba(0,0,0,0.539) 80px, rgba(0,0,0,0.617) 88px, rgba(0,0,0,0.693) 96px, rgba(0,0,0,0.764) 104px, rgba(0,0,0,0.829) 112px, rgba(0,0,0,0.886) 120px, rgba(0,0,0,0.933) 128px, rgba(0,0,0,0.969) 136px, rgba(0,0,0,0.992) 144px, rgba(0,0,0,1.000) 152px, rgba(0,0,0,1.000) calc(100% - 152px), rgba(0,0,0,0.992) calc(100% - 144px), rgba(0,0,0,0.969) calc(100% - 136px), rgba(0,0,0,0.933) calc(100% - 128px), rgba(0,0,0,0.886) calc(100% - 120px), rgba(0,0,0,0.829) calc(100% - 112px), rgba(0,0,0,0.764) calc(100% - 104px), rgba(0,0,0,0.693) calc(100% - 96px), rgba(0,0,0,0.617) calc(100% - 88px), rgba(0,0,0,0.539) calc(100% - 80px), rgba(0,0,0,0.461) calc(100% - 72px), rgba(0,0,0,0.383) calc(100% - 64px), rgba(0,0,0,0.307) calc(100% - 56px), rgba(0,0,0,0.236) calc(100% - 48px), rgba(0,0,0,0.171) calc(100% - 40px), rgba(0,0,0,0.114) calc(100% - 32px), rgba(0,0,0,0.067) calc(100% - 24px), rgba(0,0,0,0.031) calc(100% - 16px), rgba(0,0,0,0.008) calc(100% - 8px), rgba(0,0,0,0.000) calc(100% - 0px)); mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.008) 8px, rgba(0,0,0,0.031) 16px, rgba(0,0,0,0.067) 24px, rgba(0,0,0,0.114) 32px, rgba(0,0,0,0.171) 40px, rgba(0,0,0,0.236) 48px, rgba(0,0,0,0.307) 56px, rgba(0,0,0,0.383) 64px, rgba(0,0,0,0.461) 72px, rgba(0,0,0,0.539) 80px, rgba(0,0,0,0.617) 88px, rgba(0,0,0,0.693) 96px, rgba(0,0,0,0.764) 104px, rgba(0,0,0,0.829) 112px, rgba(0,0,0,0.886) 120px, rgba(0,0,0,0.933) 128px, rgba(0,0,0,0.969) 136px, rgba(0,0,0,0.992) 144px, rgba(0,0,0,1.000) 152px, rgba(0,0,0,1.000) calc(100% - 152px), rgba(0,0,0,0.992) calc(100% - 144px), rgba(0,0,0,0.969) calc(100% - 136px), rgba(0,0,0,0.933) calc(100% - 128px), rgba(0,0,0,0.886) calc(100% - 120px), rgba(0,0,0,0.829) calc(100% - 112px), rgba(0,0,0,0.764) calc(100% - 104px), rgba(0,0,0,0.693) calc(100% - 96px), rgba(0,0,0,0.617) calc(100% - 88px), rgba(0,0,0,0.539) calc(100% - 80px), rgba(0,0,0,0.461) calc(100% - 72px), rgba(0,0,0,0.383) calc(100% - 64px), rgba(0,0,0,0.307) calc(100% - 56px), rgba(0,0,0,0.236) calc(100% - 48px), rgba(0,0,0,0.171) calc(100% - 40px), rgba(0,0,0,0.114) calc(100% - 32px), rgba(0,0,0,0.067) calc(100% - 24px), rgba(0,0,0,0.031) calc(100% - 16px), rgba(0,0,0,0.008) calc(100% - 8px), rgba(0,0,0,0.000) calc(100% - 0px)); }
@media (max-width: 700px) {
  .section > .vg-paint { inset: -20px 0; -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.008) 5.3px, rgba(0,0,0,0.031) 10.5px, rgba(0,0,0,0.067) 15.8px, rgba(0,0,0,0.114) 21.1px, rgba(0,0,0,0.171) 26.3px, rgba(0,0,0,0.236) 31.6px, rgba(0,0,0,0.307) 36.8px, rgba(0,0,0,0.383) 42.1px, rgba(0,0,0,0.461) 47.4px, rgba(0,0,0,0.539) 52.6px, rgba(0,0,0,0.617) 57.9px, rgba(0,0,0,0.693) 63.2px, rgba(0,0,0,0.764) 68.4px, rgba(0,0,0,0.829) 73.7px, rgba(0,0,0,0.886) 78.9px, rgba(0,0,0,0.933) 84.2px, rgba(0,0,0,0.969) 89.5px, rgba(0,0,0,0.992) 94.7px, rgba(0,0,0,1.000) 100px, rgba(0,0,0,1.000) calc(100% - 100px), rgba(0,0,0,0.992) calc(100% - 94.7px), rgba(0,0,0,0.969) calc(100% - 89.5px), rgba(0,0,0,0.933) calc(100% - 84.2px), rgba(0,0,0,0.886) calc(100% - 78.9px), rgba(0,0,0,0.829) calc(100% - 73.7px), rgba(0,0,0,0.764) calc(100% - 68.4px), rgba(0,0,0,0.693) calc(100% - 63.2px), rgba(0,0,0,0.617) calc(100% - 57.9px), rgba(0,0,0,0.539) calc(100% - 52.6px), rgba(0,0,0,0.461) calc(100% - 47.4px), rgba(0,0,0,0.383) calc(100% - 42.1px), rgba(0,0,0,0.307) calc(100% - 36.8px), rgba(0,0,0,0.236) calc(100% - 31.6px), rgba(0,0,0,0.171) calc(100% - 26.3px), rgba(0,0,0,0.114) calc(100% - 21.1px), rgba(0,0,0,0.067) calc(100% - 15.8px), rgba(0,0,0,0.031) calc(100% - 10.5px), rgba(0,0,0,0.008) calc(100% - 5.3px), rgba(0,0,0,0.000) calc(100% - 0px)); mask: linear-gradient(180deg, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.008) 5.3px, rgba(0,0,0,0.031) 10.5px, rgba(0,0,0,0.067) 15.8px, rgba(0,0,0,0.114) 21.1px, rgba(0,0,0,0.171) 26.3px, rgba(0,0,0,0.236) 31.6px, rgba(0,0,0,0.307) 36.8px, rgba(0,0,0,0.383) 42.1px, rgba(0,0,0,0.461) 47.4px, rgba(0,0,0,0.539) 52.6px, rgba(0,0,0,0.617) 57.9px, rgba(0,0,0,0.693) 63.2px, rgba(0,0,0,0.764) 68.4px, rgba(0,0,0,0.829) 73.7px, rgba(0,0,0,0.886) 78.9px, rgba(0,0,0,0.933) 84.2px, rgba(0,0,0,0.969) 89.5px, rgba(0,0,0,0.992) 94.7px, rgba(0,0,0,1.000) 100px, rgba(0,0,0,1.000) calc(100% - 100px), rgba(0,0,0,0.992) calc(100% - 94.7px), rgba(0,0,0,0.969) calc(100% - 89.5px), rgba(0,0,0,0.933) calc(100% - 84.2px), rgba(0,0,0,0.886) calc(100% - 78.9px), rgba(0,0,0,0.829) calc(100% - 73.7px), rgba(0,0,0,0.764) calc(100% - 68.4px), rgba(0,0,0,0.693) calc(100% - 63.2px), rgba(0,0,0,0.617) calc(100% - 57.9px), rgba(0,0,0,0.539) calc(100% - 52.6px), rgba(0,0,0,0.461) calc(100% - 47.4px), rgba(0,0,0,0.383) calc(100% - 42.1px), rgba(0,0,0,0.307) calc(100% - 36.8px), rgba(0,0,0,0.236) calc(100% - 31.6px), rgba(0,0,0,0.171) calc(100% - 26.3px), rgba(0,0,0,0.114) calc(100% - 21.1px), rgba(0,0,0,0.067) calc(100% - 15.8px), rgba(0,0,0,0.031) calc(100% - 10.5px), rgba(0,0,0,0.008) calc(100% - 5.3px), rgba(0,0,0,0.000) calc(100% - 0px)); }
}