/* SEDULUS supply chain (#supply-chain): the hero globe (assets/js/supply-globe.js) with clean text round it.
   No icons. Five stages sit on the sphere, joined by a thin chain; a small cross of light at the centre. */
.sg2 { padding: 72px 0 24px; }
.sg2-wrap { width: 100%; max-width: 1380px; margin: 0 auto; padding: 0 28px; }
.sg2-head { max-width: 900px; margin: 0 auto 10px; text-align: center; }
.sg2-head .kicker { justify-content: center; margin-bottom: 14px; }
.sg2-head h2 { font-size: clamp(26px, 3.1vw, 40px); margin: 0 0 .3em; }
.sg2-head > p:last-child { font-size: 17px; color: var(--muted); margin: 0; }

.sg2-body { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 660px) minmax(220px, 1fr); gap: 34px; align-items: center; }
.sg2-col { display: grid; gap: 0; }
.sg2-col li { position: relative; padding: 15px 0 15px 20px; border-top: 1px solid rgba(21,40,79,.09); }
.sg2-col li:last-child { border-bottom: 1px solid rgba(21,40,79,.09); }
.sg2-col li::before { content: ""; position: absolute; left: 0; top: 23px; width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent), 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }
.sg2-col strong { display: block; font-size: 15.5px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.sg2-col small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.sg2-left { text-align: right; }
.sg2-left li { padding: 15px 20px 15px 0; }
.sg2-left li::before { left: auto; right: 0; }

.sg2-figure { margin: 0; }
.sg2-stage { position: relative; width: 100%; aspect-ratio: 1; container-type: inline-size; }
.sg2-stage canvas { position: absolute; inset: 0; z-index: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity 1.2s var(--ease-soft); }
.sg2-still { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 1.2s var(--ease-soft); }
.sg2-stage.is-live canvas { opacity: 1; }
.sg2-stage.is-live .sg2-still { opacity: 0; }
.sg2-chain { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.sg2-link { fill: none; stroke: url(#sg2-ch); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .85; }
.sg2-flow { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 10 200; stroke-dashoffset: 12; opacity: 0;
  animation: sg2-move 30s cubic-bezier(.42,0,.38,1) calc(var(--k) * 7s + 1s) infinite, sg2-fade 30s linear calc(var(--k) * 7s + 1s) infinite; filter: drop-shadow(0 0 3px rgba(22,193,217,.9)); }
@keyframes sg2-move { 0% { stroke-dashoffset: 12; } 30%, 100% { stroke-dashoffset: -100; } }
@keyframes sg2-fade { 0% { opacity: 0; } 4%, 26% { opacity: .95; } 30%, 100% { opacity: 0; } }
.sg2-cross { position: absolute; z-index: 3; left: 50%; top: 50%; width: 8.4cqw; height: auto; aspect-ratio: 3 / 4; transform: translate(-50%, -54%); overflow: visible; pointer-events: none; }
.sg2-glow { animation: sg2-breathe 11s ease-in-out infinite alternate; }
@keyframes sg2-breathe { 0% { opacity: .6; } 100% { opacity: 1; } }

/* labels on the sphere: a small numbered node and clean text, haloed in white so the lines never cut it */
.sg2-on { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sg2-at { position: absolute; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 30cqw; }
.sg2-l, .sg2-r { max-width: 27cqw; }
.sg2-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; line-height: 1; color: #fff;
  background: radial-gradient(circle at 35% 30%, #5f8cf3, #2f5bea 55%, #1b3fb8); box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 16px rgba(47,91,234,.45); }
.sg2-tx strong { display: block; font-size: 14.5px; line-height: 1.25; font-weight: 600; color: var(--ink); }
.sg2-tx small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.sg2-tx { position: relative; padding: 10px 16px; margin: -10px -16px; text-shadow: 0 0 2px #fff, 0 0 8px #fff;
  background: radial-gradient(closest-side, rgba(255,255,255,.95) 0%, rgba(255,255,255,.88) 62%, rgba(255,255,255,0) 100%); }
/* the number's centre sits on the anchor point; the text runs outward */
.sg2-l { flex-direction: row-reverse; text-align: right; transform: translate(calc(-100% + 13px), -50%); }
.sg2-r { transform: translate(-13px, -50%); }
.sg2-t { flex-direction: column-reverse; text-align: center; gap: 6px; transform: translate(-50%, calc(-100% + 13px)); }
.sg2-stages { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sg2-every { margin: 6px auto 0; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink); }
.sg2-every-k { margin-right: 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }

.sg2-bands { display: grid; gap: 14px; margin-top: 34px; }
.sg2-band { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 34px; align-items: center; padding: 24px 32px; border-radius: 22px;
  background: linear-gradient(150deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 55%, rgba(244,247,251,.9) 100%); border: 1px solid rgba(226,230,237,.95); box-shadow: var(--paint-lift); }
.sg2-band h3 { margin: 0; font-size: 19px; line-height: 1.3; }
.sg2-band .kicker { margin-bottom: 8px; }
.sg2-lead { margin: 0 0 8px; font-size: 16px; line-height: 1.5; font-weight: 600; color: var(--ink); }
.sg2-tags { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.sg2-outs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.sg2-outs li { padding-left: 14px; border-left: 1px solid rgba(21,40,79,.12); }
.sg2-outs strong { display: block; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.sg2-outs small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .sg2-flow { display: none; } .sg2-glow { animation: none; } }

@media (max-width: 1180px) {
  .sg2-body { grid-template-columns: 1fr 1fr; gap: 10px 40px; }
  .sg2-figure { grid-column: 1 / -1; grid-row: 1; width: min(100%, 640px); margin: 0 auto; }
  .sg2-left { text-align: left; }
  .sg2-left li { padding: 15px 0 15px 20px; }
  .sg2-left li::before { left: 0; right: auto; }
  .sg2-band { grid-template-columns: 1fr; gap: 12px; }
  .sg2-outs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* small stages: only the numbered nodes on the sphere, the names in a list below */
@container (max-width: 560px) {
  .sg2-tx { display: none; }
  .sg2-at, .sg2-l, .sg2-r, .sg2-t { transform: translate(-50%, -50%); gap: 0; }
  .sg2-cross { width: 11.5cqw; }
}
@media (max-width: 700px) {
  .sg2 { padding-top: 52px; }
  .sg2-wrap { padding: 0 18px; }
  .sg2-head h2 { font-size: 25px; }
  .sg2-head > p:last-child { font-size: 15px; }
  .sg2-body { grid-template-columns: 1fr; gap: 0; }
  .sg2-figure { width: auto; margin: 0 -10px; }
  .sg2-stages { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: grid; gap: 8px; margin: 4px 10px 0; }
  .sg2-stages li { display: flex; gap: 12px; align-items: baseline; font-size: 14px; line-height: 1.35; color: var(--ink); }
  .sg2-stages .sg2-n { width: 22px; height: 22px; font-size: 12px; box-shadow: 0 0 0 2px #fff; transform: translateY(5px); }
  .sg2-stages strong { font-weight: 600; }
  .sg2-stages small { font-size: 13px; color: var(--muted); }
  .sg2-every { margin-top: 16px; font-size: 13.5px; }
  .sg2-every-k { display: block; margin: 0 0 3px; }
  .sg2-col li { padding: 13px 0 13px 20px; }
  .sg2-col li::before { top: 21px; }
  .sg2-left { margin-top: 22px; }
  .sg2-left li:last-child { border-bottom: 0; }
  .sg2-band { padding: 20px; border-radius: 18px; }
  .sg2-band h3 { font-size: 17px; }
  .sg2-lead { font-size: 15px; }
  .sg2-outs { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
}

/* while the supply chain globe is on screen, the hero's backdrop globe steps back so the two never overlap */
.globe { transition: opacity 1s var(--ease-soft); }
html.sg-near .globe { opacity: 0; }

/* ===== round 7: the five stages named on painted plaques outside the sphere, tied to their points ===== */
.sg2-body { grid-template-columns: minmax(205px, 1fr) minmax(0, 880px) minmax(205px, 1fr); gap: 18px; }
.sg2-figure { padding: 8% 16.5% 0; }
.sg2-cross.sg2-cross-s { width: 5.4cqw; transform: translate(-50%, -52%); }
.sg2-lead-ln { fill: none; stroke: #1c2230; stroke-opacity: .55; stroke-width: 1; vector-effect: non-scaling-stroke; stroke-linecap: round; filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff); }
.sg2-lead-end { fill: #1c2230; fill-opacity: .7; }
.sg2-pls, .sg2-groups { position: absolute; inset: 0; z-index: 5; pointer-events: none; margin: 0; padding: 0; list-style: none; }
/* clean labels in the first site style: white cards, crisp edges, dark text */
.sg2-pl { position: absolute; display: flex; align-items: center; gap: 9px; width: max-content; max-width: 24cqw; padding: 9px 14px 10px;
  background: #fff; border: 1px solid #d6dde8; border-radius: 10px; box-shadow: 0 1px 2px rgba(20,26,38,.06), 0 8px 20px rgba(20,26,38,.08); }
.sg2-pl-l { transform: translate(-100%, -50%); flex-direction: row-reverse; text-align: right; }
.sg2-pl-r { transform: translate(0, -50%); }
.sg2-pl-t { transform: translate(-50%, -100%); max-width: 40cqw; }
.sg2-pt strong { display: block; font-size: 13.5px; line-height: 1.25; font-weight: 600; color: #141a26; }
.sg2-pt small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: #545c6b; }
.sg2-pn { display: none; }
/* the three things that matter at every link, each in its own place */
.sg2-g, .sg2-gk { position: absolute; width: max-content; }
.sg2-g span { display: block; padding: 6px 12px 7px; font-size: 13.5px; font-weight: 600; line-height: 1.2; color: #141a26;
  background: #fff; border: 1px solid #d6dde8; border-radius: 999px; box-shadow: 0 1px 2px rgba(20,26,38,.05), 0 6px 14px rgba(20,26,38,.06); }
.sg2-gl { transform: translate(-100%, -50%); }
.sg2-gr { transform: translate(0, -50%); }
.sg2-gb { transform: translate(-50%, -50%); }
.sg2-gk { transform: translate(-50%, -50%); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #3a4150; text-shadow: 0 0 4px #fff, 0 0 8px #fff; }
.sg2-figure > .sg2-every { display: none; }
.sg2-bands { margin-top: 64px; }

/* ----- three monochrome marker designs for the five points (a class on #supply-chain: mk-1, mk-2, mk-3) ----- */
.sg2.mk-1 .sg2-n, .sg2.mk-2 .sg2-n, .sg2.mk-3 .sg2-n { position: relative; font-size: 0; border-radius: 0; box-shadow: none; background: none; display: grid; place-items: center; }
.sg2.mk-1 .sg2-n::after, .sg2.mk-2 .sg2-n::after, .sg2.mk-3 .sg2-n::after { content: attr(data-n); position: relative; z-index: 1; line-height: 1; font-family: var(--font); font-weight: 700; }
/* option 1: a bold ink numeral with a thin short accent line beneath, no shape, a soft white halo */
.sg2.mk-1 .sg2-n { width: 34px; height: 34px; background: radial-gradient(closest-side, rgba(255,255,255,.95) 0%, rgba(255,255,255,.85) 55%, rgba(255,255,255,0) 100%); }
.sg2.mk-1 .sg2-n::after { font-size: 19px; color: #11151d; margin-top: -3px; text-shadow: 0 0 2px #fff, 0 0 6px #fff; }
.sg2.mk-1 .sg2-n::before { content: ""; position: absolute; left: 50%; bottom: 5px; width: 12px; height: 1.6px; margin-left: -6px; background: #11151d; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9); }
/* option 2: a small rounded square tile in charcoal with a white numeral */
.sg2.mk-2 .sg2-n { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(160deg, #2b313d, #12161e); box-shadow: 0 0 0 2px #fff, 0 0 14px 4px rgba(255,255,255,.85), 0 3px 8px rgba(10,14,22,.3); }
.sg2.mk-2 .sg2-n::after { font-size: 15px; color: #fff; }
/* option 3: a small charcoal diamond with a white numeral */
.sg2.mk-3 .sg2-n { width: 34px; height: 34px; }
.sg2.mk-3 .sg2-n::before { content: ""; position: absolute; inset: 6px; transform: rotate(45deg); border-radius: 3px; background: linear-gradient(160deg, #2b313d, #12161e);
  box-shadow: 0 0 0 2px #fff, 0 0 14px 4px rgba(255,255,255,.85), 0 3px 8px rgba(10,14,22,.3); }
.sg2.mk-3 .sg2-n::after { font-size: 14.5px; color: #fff; }

/* tablet: keep the plaques round the sphere */
@media (max-width: 1180px) {
  .sg2-figure { width: min(100%, 860px); }
  .sg2-pt strong { font-size: 13px; }
}
/* phone: the points stay on the sphere, the names in a tidy painted list right under it, the three groups beneath */
@media (max-width: 700px) {
  .sg2-figure { padding: 0; }
  .sg2-pls, .sg2-groups, .sg2-lead-ln, .sg2-lead-end { display: none; }
  .sg2-cross.sg2-cross-s { width: 6.5cqw; }
  .sg2-stages { gap: 8px; margin: 8px 10px 0; }
  .sg2-stages li { align-items: center; padding: 10px 14px; background: #fff; border: 1px solid #d6dde8; border-radius: 10px; box-shadow: 0 1px 2px rgba(20,26,38,.05); }
  .sg2-stages li strong { color: #141a26; }
  .sg2-stages li small { color: #545c6b; }
  .sg2-figure > .sg2-every { display: block; }
  .sg2-every-g { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 6px; }
  .sg2-every-g span { padding: 5px 12px; background: #fff; border: 1px solid #d6dde8; border-radius: 999px; color: #141a26; }
  .sg2-bands { margin-top: 34px; }
}
.sg2-on .sg2-at { transform: translate(-50%, -50%); gap: 0; }

/* ----- v4: three opt-in numeral styles for the five stages (a class on #supply-chain: markers-v4-1, -2, -3). None is the default. -----
   Fonts are tiny self-hosted subsets (only the glyphs used) and are downloaded only when one of these classes is switched on. */
@font-face { font-family: "SG Cinzel"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/sg-cinzel-600.woff2") format("woff2"); }
@font-face { font-family: "SG Montserrat Light"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/sg-mont-300.woff2") format("woff2"); }
@font-face { font-family: "SG Cormorant"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/sg-corm-700.woff2") format("woff2"); }
.sg2[class*="markers-v4-"] { --sg-gold: #a98236; --sg-ink: #17140f; }
.sg2.markers-v4-1 .sg2-n, .sg2.markers-v4-2 .sg2-n, .sg2.markers-v4-3 .sg2-n { position: relative; display: flex; align-items: center; justify-content: center; font-size: 0; color: var(--sg-ink);
  border-radius: 0; background: none; box-shadow: none; transform: none; }
.sg2.markers-v4-1 .sg2-n::after, .sg2.markers-v4-2 .sg2-n::after, .sg2.markers-v4-3 .sg2-n::after { position: relative; z-index: 1; line-height: 1; color: var(--sg-ink); }

/* option 1: a Roman numeral I to V in a Trajan style capital, set on a small ivory inscription with a fine gold rule above and below */
.sg2.markers-v4-1 .sg2-n { width: auto; min-width: 42px; height: 32px; padding: 0 11px;
  background: linear-gradient(var(--sg-gold), var(--sg-gold)) center 4px / calc(100% - 10px) 1px no-repeat,
              linear-gradient(var(--sg-gold), var(--sg-gold)) center calc(100% - 4px) / calc(100% - 10px) 1px no-repeat,
              linear-gradient(180deg, #fffdf7, #f7eedb);
  box-shadow: 0 0 0 1px rgba(169,130,54,.22), 0 0 0 4px rgba(255,255,255,.72), 0 0 18px 7px rgba(255,255,255,.78), 0 6px 14px rgba(60,42,12,.16); }
.sg2.markers-v4-1 .sg2-n::after { content: attr(data-r); font-family: "SG Cinzel", "Cinzel", Georgia, "Times New Roman", serif; font-weight: 600; font-size: 17px; letter-spacing: .1em; margin-right: -.1em; transform: translateY(.5px); }

/* option 2: an editorial numeral 01 to 05 in light Montserrat, a tall thin gold rule before it, on a feathered white field */
.sg2.markers-v4-2 .sg2-n { width: auto; height: 34px; padding: 0 8px 0 6px; gap: 9px; background: rgba(255,255,255,.95);
  box-shadow: 0 0 10px 7px rgba(255,255,255,.9), 0 0 24px 12px rgba(255,255,255,.5); }
.sg2.markers-v4-2 .sg2-n::after { content: attr(data-z); font-family: "SG Montserrat Light", var(--font); font-weight: 300; font-size: 27px; letter-spacing: -.01em; font-variant-numeric: lining-nums tabular-nums; transform: translateY(-.5px); }
.sg2.markers-v4-2 .sg2-n::before { content: ""; flex: none; width: 1px; height: 42px; background: linear-gradient(180deg, rgba(169,130,54,0), var(--sg-gold) 22%, var(--sg-gold) 78%, rgba(169,130,54,0)); }

/* option 3: a serif numeral engraved in a slim upright gilded bar, ivory hairline inside, sharp corners */
.sg2.markers-v4-3 .sg2-n { width: 25px; height: 40px;
  background: linear-gradient(104deg, rgba(255,255,255,0) 28%, rgba(255,249,230,.5) 45%, rgba(255,255,255,0) 60%),
              linear-gradient(180deg, #f3e6bd 0%, #dcc07a 34%, #c29b4c 70%, #a37b33 100%);
  box-shadow: inset 0 0 0 1px #8c6a2a, inset 0 0 0 3px rgba(255,247,224,.7), 0 0 0 2px #fff, 0 0 16px 6px rgba(255,255,255,.82), 0 6px 14px rgba(70,48,10,.22); }
.sg2.markers-v4-3 .sg2-n::after { content: attr(data-n); font-family: "SG Cormorant", "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 25px; font-variant-numeric: lining-nums; color: #1b1308;
  text-shadow: 0 1px 0 rgba(255,242,206,.6); transform: translateY(-1px); }

/* phone list under the sphere: same styles, a touch smaller */
@media (max-width: 700px) {
  .sg2.markers-v4-1 .sg2-stages .sg2-n { min-width: 34px; height: 26px; padding: 0 7px; box-shadow: 0 0 0 1px rgba(169,130,54,.22); align-self: center; }
  .sg2.markers-v4-1 .sg2-stages .sg2-n::after { font-size: 14px; }
  .sg2.markers-v4-2 .sg2-stages .sg2-n { height: 26px; padding: 0 2px 0 0; gap: 7px; box-shadow: none; background: none; align-self: center; }
  .sg2.markers-v4-2 .sg2-stages .sg2-n::after { font-size: 21px; }
  .sg2.markers-v4-2 .sg2-stages .sg2-n::before { height: 28px; }
  .sg2.markers-v4-3 .sg2-stages .sg2-n { width: 20px; height: 30px; box-shadow: inset 0 0 0 1px #8c6a2a, inset 0 0 0 2.5px rgba(255,247,224,.7); align-self: center; }
  .sg2.markers-v4-3 .sg2-stages .sg2-n::after { font-size: 19px; }
}

/* ===== round 8: macro view only. The service lists beside the globe are gone, so the globe sits alone in the middle, with room to breathe ===== */
.sg2-body { grid-template-columns: minmax(0, 1fr); gap: 0; justify-items: center; }
.sg2-figure { width: min(100%, 660px); margin: 0 auto; padding: 78px 0 0; }
.sg2-pl { max-width: 30cqw; }
.sg2-pl-t { max-width: 44cqw; }
.sg2-bands { width: 100%; max-width: 1120px; margin: 84px auto 0; }
.sg2-lead:last-child { margin-bottom: 0; }
.sg2-band { grid-template-columns: 270px minmax(0, 1fr); gap: 30px; padding: 26px 38px; }
.sg2-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; }
.sg2-outs li { padding: 3px 0 3px 16px; }
.sg2-outs strong { white-space: nowrap; }
@media (max-width: 1180px) {
  .sg2-body { grid-template-columns: minmax(0, 1fr); }
  .sg2-figure { grid-column: auto; width: min(calc(100% - 300px), 600px); padding-top: 64px; }
  .sg2-bands { margin-top: 70px; }
  .sg2-band { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 700px) {
  .sg2-figure { width: auto; margin: 0 -10px; padding: 0; }
  .sg2-bands { margin-top: 36px; }
  .sg2-band { padding: 20px; }
  .sg2-outs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .sg2-outs strong { white-space: normal; }
}

/* ----- v5: the three v4 numeral styles redone with a sparing touch of the site's brand blue (a class on #supply-chain: markers-v5-1, -2, -3). None is the default. ----- */
.sg2[class*="markers-v5-"] { --sg-blue: #2f5bea; --sg-ink: #141a26; }
.sg2.markers-v5-1 .sg2-n, .sg2.markers-v5-2 .sg2-n, .sg2.markers-v5-3 .sg2-n { position: relative; display: flex; align-items: center; justify-content: center; font-size: 0;
  border-radius: 0; background: none; box-shadow: none; transform: none; }
.sg2.markers-v5-1 .sg2-n::after, .sg2.markers-v5-2 .sg2-n::after, .sg2.markers-v5-3 .sg2-n::after { position: relative; z-index: 1; line-height: 1; color: var(--sg-ink); }

/* option 1: Roman numeral on a crisp white tablet, a fine brand blue rule above and below */
.sg2.markers-v5-1 .sg2-n { width: auto; min-width: 44px; height: 32px; padding: 0 12px; border-radius: 2px;
  background: linear-gradient(var(--sg-blue), var(--sg-blue)) center 4px / calc(100% - 12px) 1px no-repeat,
              linear-gradient(var(--sg-blue), var(--sg-blue)) center calc(100% - 4px) / calc(100% - 12px) 1px no-repeat, #fff;
  box-shadow: 0 0 0 1px rgba(20,26,38,.1), 0 0 0 4px rgba(255,255,255,.7), 0 0 18px 7px rgba(255,255,255,.8), 0 6px 14px rgba(20,26,38,.12); }
.sg2.markers-v5-1 .sg2-n::after { content: attr(data-r); font-family: "SG Cinzel", "Cinzel", Georgia, "Times New Roman", serif; font-weight: 600; font-size: 16.5px; letter-spacing: .1em; margin-right: -.1em; transform: translateY(1px); }

/* option 2: editorial numeral 01 to 05 in light Montserrat, framed by two fine brand blue corner marks, on a feathered white field */
.sg2.markers-v5-2 .sg2-n { --cm: 7px; --cw: 1.5px; width: auto; height: 36px; padding: 0 9px; background:
    linear-gradient(var(--sg-blue), var(--sg-blue)) left top / var(--cm) var(--cw) no-repeat,
    linear-gradient(var(--sg-blue), var(--sg-blue)) left top / var(--cw) var(--cm) no-repeat,
    linear-gradient(var(--sg-blue), var(--sg-blue)) right bottom / var(--cm) var(--cw) no-repeat,
    linear-gradient(var(--sg-blue), var(--sg-blue)) right bottom / var(--cw) var(--cm) no-repeat, rgba(255,255,255,.96);
  box-shadow: 0 0 10px 7px rgba(255,255,255,.9), 0 0 24px 12px rgba(255,255,255,.5); }
.sg2.markers-v5-2 .sg2-n::after { content: attr(data-z); font-family: "SG Montserrat Light", var(--font); font-weight: 300; font-size: 26px; letter-spacing: .01em; font-variant-numeric: lining-nums tabular-nums; transform: translateY(-.5px); }

/* option 3: a slim upright white bar capped with a thin brand blue line, the serif numeral in brand blue */
.sg2.markers-v5-3 .sg2-n { width: 28px; height: 40px; background: linear-gradient(var(--sg-blue), var(--sg-blue)) top / 100% 2px no-repeat, #fff;
  box-shadow: inset 0 0 0 1px rgba(20,26,38,.1), 0 0 0 2px rgba(255,255,255,.9), 0 0 16px 6px rgba(255,255,255,.82), 0 6px 14px rgba(20,26,38,.14); }
.sg2.markers-v5-3 .sg2-n::after { content: attr(data-n); font-family: "SG Cormorant", "Cormorant Garamond", Georgia, serif; font-weight: 700; font-size: 26px; font-variant-numeric: lining-nums; color: var(--sg-blue); transform: translateY(.5px); }

@media (max-width: 700px) {
  .sg2.markers-v5-1 .sg2-stages .sg2-n { min-width: 36px; height: 26px; padding: 0 8px; box-shadow: 0 0 0 1px rgba(20,26,38,.12); align-self: center; }
  .sg2.markers-v5-1 .sg2-stages .sg2-n::after { font-size: 14px; }
  .sg2.markers-v5-2 .sg2-stages .sg2-n { --cm: 5px; height: 28px; padding: 0 6px; box-shadow: none; align-self: center; }
  .sg2.markers-v5-2 .sg2-stages .sg2-n::after { font-size: 21px; }
  .sg2.markers-v5-3 .sg2-stages .sg2-n { width: 21px; height: 31px; box-shadow: inset 0 0 0 1px rgba(20,26,38,.12); align-self: center; }
  .sg2.markers-v5-3 .sg2-stages .sg2-n::after { font-size: 19px; }
}

/* the small cross of light at the centre: about 35% smaller than before, same style and place */
.sg2 .sg2-cross.sg2-cross-s { width: 3.5cqw; }
@media (max-width: 700px) { .sg2 .sg2-cross.sg2-cross-s { width: 4.2cqw; } }

/* ===================================================================================================================
   v7 (painted site): the five stage cards back ON the globe, an "At every link" card at the centre, slow flow arcs
   between the cards. Class sg2-cg on #supply-chain. Three looks: option 1 (default) cards with a thin-line ink icon
   and a small number badge; option 2 (add sg2-opt2) cleaner cards with the number only; option 3 (add sg2-opt3)
   minimal labels on soft light, joined by a thin hairline ring. Badges: site font, dark ink on white, no blue.
   =================================================================================================================== */
.sg2-cg { --cg-ink: #141a26; --cg-ink2: #2b313d; --cg-mut: #535b69; --cg-line: #dde2ea; }
.sg2-cg .sg2-cards, .sg2-cg .sg2-eg { margin: 0; padding: 0; list-style: none; }
.sg2-cg .sg2-cards { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.sg2-cg .sg2-card, .sg2-cg .sg2-row { display: flex; align-items: center; gap: 12px; }
.sg2-cg .sg2-card { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; padding: 9px 16px 9px 9px; border-radius: 14px;
  background: linear-gradient(160deg, #fff 0%, #fff 55%, #f6f8fb 100%); border: 1px solid var(--cg-line);
  box-shadow: 0 0 0 4px rgba(255,255,255,.45), 0 1px 2px rgba(20,26,38,.05), 0 12px 26px -12px rgba(20,26,38,.32); }
.sg2-cg .sg2-ic { position: relative; flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: var(--cg-ink2);
  background: linear-gradient(150deg, #fff 0%, #eef1f6 100%); box-shadow: inset 0 0 0 1px rgba(20,26,38,.09); }
.sg2-cg .sg2-icsvg { width: 21px; height: 21px; display: block; }
.sg2-cg .sg2-badge { box-sizing: border-box; display: block; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 5px; background: #fff; border: 1px solid rgba(20,26,38,.22);
  font: 700 11px/17px var(--font); text-align: center; color: var(--cg-ink); font-variant-numeric: lining-nums tabular-nums; box-shadow: 0 2px 5px -1px rgba(20,26,38,.25); }
.sg2-cg .sg2-ic .sg2-badge { position: absolute; top: -7px; right: -8px; }
.sg2-cg .sg2-ct strong { display: block; font-size: 14px; line-height: 1.25; font-weight: 600; color: var(--cg-ink); }
.sg2-cg .sg2-ct small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: var(--cg-mut); }
.sg2-cg .sg2-every-card, .sg2-cg .sg2-every-m { text-align: center; background: linear-gradient(160deg, #fff 0%, #fff 55%, #f6f8fb 100%); border: 1px solid var(--cg-line); border-radius: 14px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.45), 0 1px 2px rgba(20,26,38,.05), 0 12px 26px -12px rgba(20,26,38,.32); }
.sg2-cg .sg2-every-card { position: absolute; left: 50%; z-index: 5; transform: translateX(-50%); width: 292px; padding: 10px 12px 12px; pointer-events: none; }
.sg2-cg .sg2-ek { margin: 0 0 8px; font-size: 10.5px; line-height: 1; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: #3a4150; }
.sg2-cg .sg2-eg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sg2-cg .sg2-ei { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--cg-ink); }
.sg2-cg .sg2-ei svg { width: 20px; height: 20px; color: var(--cg-ink2); }
.sg2-cg .sg2-on { display: none; }
.sg2-cg .sg2-every-m { display: none; }
.sg2-cg .sg2-link { opacity: .9; }
@media (min-width: 1000px) {
  .sg2-cg .sg2-figure { width: min(100%, 780px); margin: 0 auto; padding: 18px 0 0; }
}
/* tablet and phone: the sphere keeps small number badges on its points, the cards line up beneath it */
@media (max-width: 999px) {
  .sg2-cg .sg2-cards, .sg2-cg .sg2-every-card { display: none; }
  .sg2-cg .sg2-figure { width: min(100%, 640px); margin: 0 auto; padding: 0; }
  .sg2-cg .sg2-on { display: block; position: absolute; inset: 0; z-index: 5; margin: 0; padding: 0; list-style: none; pointer-events: none; }
  .sg2-cg .sg2-on .sg2-at { transform: translate(-50%, -50%); }
  .sg2-cg .sg2-on .sg2-badge { min-width: 28px; height: 28px; border-radius: 7px; font-size: 13px; line-height: 26px; box-shadow: 0 0 0 3px rgba(255,255,255,.7), 0 0 14px 4px rgba(255,255,255,.6), 0 5px 12px -4px rgba(20,26,38,.3); }
  .sg2-cg .sg2-stages { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px auto 0; padding: 0; list-style: none; }
  .sg2-cg .sg2-row { padding: 9px 14px 9px 9px; border-radius: 12px; background: linear-gradient(160deg, #fff 0%, #fff 55%, #f6f8fb 100%); border: 1px solid var(--cg-line);
    box-shadow: 0 1px 2px rgba(20,26,38,.05), 0 10px 20px -12px rgba(20,26,38,.28); }
  .sg2-cg .sg2-row .sg2-ct strong { font-size: 14px; }
  .sg2-cg .sg2-every-m { display: block; margin: 10px auto 0; padding: 12px 12px 14px; }
  .sg2-cg .sg2-every-m .sg2-ek { font-size: 11px; }
}
@media (max-width: 700px) {
  .sg2-cg .sg2-figure { width: auto; margin: 0 -10px; }
  .sg2-cg .sg2-stages { grid-template-columns: minmax(0, 1fr); margin: 10px 10px 0; gap: 7px; }
  .sg2-cg .sg2-ic { width: 36px; height: 36px; }
  .sg2-cg .sg2-icsvg { width: 19px; height: 19px; }
  .sg2-cg .sg2-every-m { margin: 10px 10px 0; }
  .sg2-cg .sg2-on .sg2-badge { min-width: 24px; height: 24px; border-radius: 6px; font-size: 12px; line-height: 22px; }
}

/* option 2: cleaner cards, the number alone in a small ink-on-white tile, no icons */
.sg2-cg.sg2-opt2 .sg2-icsvg, .sg2-cg.sg2-opt2 .sg2-ei svg { display: none; }
.sg2-cg.sg2-opt2 .sg2-card, .sg2-cg.sg2-opt2 .sg2-row { gap: 11px; padding: 8px 16px 8px 8px; border-radius: 10px; box-shadow: 0 0 0 4px rgba(255,255,255,.4), 0 1px 2px rgba(20,26,38,.05), 0 8px 18px -10px rgba(20,26,38,.26); }
.sg2-cg.sg2-opt2 .sg2-ic { width: 32px; height: 32px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px rgba(20,26,38,.2); }
.sg2-cg.sg2-opt2 .sg2-ic .sg2-badge { position: static; border: 0; box-shadow: none; background: none; min-width: 0; padding: 0; font-size: 14.5px; line-height: 1; }
.sg2-cg.sg2-opt2 .sg2-every-card, .sg2-cg.sg2-opt2 .sg2-every-m { border-radius: 10px; }
.sg2-cg.sg2-opt2 .sg2-eg { gap: 0; }
.sg2-cg.sg2-opt2 .sg2-ei + .sg2-ei { border-left: 1px solid var(--cg-line); }
.sg2-cg.sg2-opt2 .sg2-ei { padding: 2px 6px; justify-content: center; }

/* option 3: minimal labels on a soft pool of light, a thin hairline ring through the five points */
.sg2-cg.sg2-opt3 .sg2-cards::before { content: ""; position: absolute; left: 20.56%; top: 20.56%; width: 58.88%; height: 58.88%; border-radius: 50%; border: 1px solid rgba(20,26,38,.32);
  box-shadow: 0 0 0 1px rgba(255,255,255,.5); }
.sg2-cg.sg2-opt3 .sg2-icsvg, .sg2-cg.sg2-opt3 .sg2-ei svg { display: none; }
.sg2-cg.sg2-opt3 .sg2-card { gap: 9px; padding: 12px 22px; border: 0; border-radius: 0; box-shadow: none;
  background: radial-gradient(closest-side, rgba(252,253,255,.97) 0%, rgba(248,250,253,.9) 60%, rgba(248,250,253,0) 100%); }
.sg2-cg.sg2-opt3 .sg2-ic { width: auto; height: auto; background: none; box-shadow: none; align-self: flex-start; padding-top: 1px; }
.sg2-cg.sg2-opt3 .sg2-ic .sg2-badge { position: static; min-width: 20px; height: 20px; font-size: 11.5px; line-height: 18px; border-color: rgba(20,26,38,.45); box-shadow: none; }
.sg2-cg.sg2-opt3 .sg2-ct strong { font-size: 14.5px; text-shadow: 0 0 6px #fff; }
.sg2-cg.sg2-opt3 .sg2-ct small { text-shadow: 0 0 6px #fff; }
.sg2-cg.sg2-opt3 .sg2-every-card { border: 0; box-shadow: none; padding: 16px 20px 18px;
  background: radial-gradient(closest-side, rgba(252,253,255,.96) 0%, rgba(248,250,253,.88) 62%, rgba(248,250,253,0) 100%); }
.sg2-cg.sg2-opt3 .sg2-ei { text-shadow: 0 0 6px #fff; }
.sg2-cg.sg2-opt3 .sg2-ei + .sg2-ei { border-left: 1px solid rgba(20,26,38,.16); }
@media (max-width: 999px) {
  .sg2-cg.sg2-opt3 .sg2-stages { gap: 0; padding: 6px 16px; border-radius: 14px; background: radial-gradient(90% 70% at 50% 50%, rgba(252,253,255,.94), rgba(248,250,253,.78) 70%, rgba(248,250,253,.4) 100%); }
  .sg2-cg.sg2-opt3 .sg2-row { background: none; border: 0; border-bottom: 1px solid rgba(20,26,38,.12); border-radius: 0; box-shadow: none; padding: 10px 2px; }
  .sg2-cg.sg2-opt3 .sg2-row:last-child { border-bottom: 0; }
  .sg2-cg.sg2-opt3 .sg2-every-m { border: 0; box-shadow: none; background: radial-gradient(90% 80% at 50% 50%, rgba(252,253,255,.94), rgba(248,250,253,.6) 80%, rgba(248,250,253,0) 100%); }
}
/* two sets of flow arcs: between the cards on desktop, between the number badges on tablet and phone */
.sg2-cg .sg2-m { display: none; }
@media (max-width: 999px) { .sg2-cg .sg2-d { display: none; } .sg2-cg .sg2-m { display: inline; } }
/* the flow arcs read a little stronger round the cards (same slow 30 s flow) */
.sg2-cg .sg2-link { stroke-width: 2.1; opacity: .95; }
/* option 3: the thin hairline ring through the five points, drawn under the flow arcs (svg circle) */
.sg2-cg .sg2-ring { display: none; fill: none; stroke: #1d2330; stroke-opacity: .78; stroke-width: .19; }
.sg2-cg.sg2-opt3 .sg2-ring { display: inline; filter: drop-shadow(0 0 .3px #fff) drop-shadow(0 0 .3px #fff) drop-shadow(0 0 .5px rgba(255,255,255,.9)); }
@media (max-width: 999px) { .sg2-cg .sg2-ring { r: 29.44px; stroke-width: .32; } }

/* ===== round 3: no flat white on the globe. The cards carry a faint painted tint (vg-card.webp, warm-pale highlights on
   pale blue), a soft light along the upper-left edges and a slightly cooler lower right. Ink stays dark and crisp. ===== */
.sg2-cg { --cg-paint: linear-gradient(150deg, rgba(255,254,250,.62) 0%, rgba(255,254,250,.18) 38%, rgba(232,239,248,0) 62%, rgba(214,225,241,.34) 100%),
    url("../img/vg-card.webp") 0 0 / 360px auto repeat, #eef2f7; --cg-edge: inset 1px 1px 0 rgba(255,255,253,.95), inset -1px -1px 0 rgba(196,210,231,.55);
  --cg-line: #d3dbe7; }
.sg2-cg .sg2-card, .sg2-cg .sg2-every-card, .sg2-cg .sg2-every-m, .sg2-cg .sg2-row { background: var(--cg-paint); border-color: var(--cg-line);
  box-shadow: var(--cg-edge), 0 0 0 4px rgba(226,234,246,.42), 0 1px 2px rgba(20,26,38,.05), 0 12px 26px -12px rgba(24,38,72,.34); }
.sg2-cg .sg2-row { box-shadow: var(--cg-edge), 0 1px 2px rgba(20,26,38,.05), 0 10px 20px -12px rgba(24,38,72,.3); }
.sg2-cg .sg2-ic { background: linear-gradient(150deg, rgba(255,254,250,.85) 0%, rgba(236,241,248,.7) 100%), url("../img/vg-card.webp") 40px 20px / 300px auto;
  box-shadow: inset 0 0 0 1px rgba(20,26,38,.09), inset 1px 1px 0 rgba(255,255,255,.9); }
.sg2-cg .sg2-badge { background: #fdfdfb; }
.sg2-cg .sg2-ct small { color: #4b5361; }
/* option 2 keeps its flatter cards, with the same paint */
.sg2-cg.sg2-opt2 .sg2-card, .sg2-cg.sg2-opt2 .sg2-row { box-shadow: var(--cg-edge), 0 0 0 4px rgba(226,234,246,.38), 0 1px 2px rgba(20,26,38,.05), 0 8px 18px -10px rgba(24,38,72,.3); }
.sg2-cg.sg2-opt2 .sg2-ic { background: #fdfdfb; box-shadow: inset 0 0 0 1px rgba(20,26,38,.2); }
/* option 3: the light pools behind the words in a pale blue light, not white */
.sg2-cg.sg2-opt3 .sg2-card { background: radial-gradient(closest-side, rgba(244,247,252,.95) 0%, rgba(236,242,250,.86) 58%, rgba(232,239,248,0) 100%); box-shadow: none; }
.sg2-cg.sg2-opt3 .sg2-every-card { background: radial-gradient(closest-side, rgba(244,247,252,.95) 0%, rgba(236,242,250,.84) 60%, rgba(232,239,248,0) 100%); box-shadow: none; }
.sg2-cg.sg2-opt3 .sg2-ct strong, .sg2-cg.sg2-opt3 .sg2-ct small, .sg2-cg.sg2-opt3 .sg2-ei { text-shadow: 0 0 6px rgba(240,245,251,.95); }
@media (max-width: 999px) {
  .sg2-cg.sg2-opt3 .sg2-stages, .sg2-cg.sg2-opt3 .sg2-every-m { background: var(--cg-paint); border: 1px solid var(--cg-line); box-shadow: var(--cg-edge), 0 10px 22px -14px rgba(24,38,72,.3); }
  .sg2-cg.sg2-opt3 .sg2-row { background: none; box-shadow: none; border: 0; border-bottom: 1px solid rgba(20,26,38,.12); border-radius: 0; }
  .sg2-cg.sg2-opt3 .sg2-row:last-child { border-bottom: 0; }
  .sg2-cg .sg2-on .sg2-badge { box-shadow: 0 0 0 3px rgba(232,239,248,.7), 0 0 14px 4px rgba(226,234,246,.6), 0 5px 12px -4px rgba(20,26,38,.3); }
}

/* ===== round 3: colour on the thin-line icons (option 1 cards). Names and lines stay dark ink.
   sg2-ic-a (default): each stage icon in its own soft colour from the globe's lines, thin line only.
   sg2-ic-b: the same colours, the icon on a very light tinted rounded square of its colour.
   sg2-ic-c: one muted ochre for every icon, on a warm lit tile (chiaroscuro). ===== */
.sg2-cg { --c1: #2f8a55; --c2: #a8820f; --c3: #c23d6f; --c4: #7457b8; --c5: #1f8790; --c6: #c4681d; --c7: #2f8a55; --c8: #a8820f; }
.sg2-cg .sg2-card-1, .sg2-cg .sg2-stages > li:nth-child(1) { --ic: var(--c1); }
.sg2-cg .sg2-card-2, .sg2-cg .sg2-stages > li:nth-child(2) { --ic: var(--c2); }
.sg2-cg .sg2-card-3, .sg2-cg .sg2-stages > li:nth-child(3) { --ic: var(--c3); }
.sg2-cg .sg2-card-4, .sg2-cg .sg2-stages > li:nth-child(4) { --ic: var(--c4); }
.sg2-cg .sg2-card-5, .sg2-cg .sg2-stages > li:nth-child(5) { --ic: var(--c5); }
.sg2-cg .sg2-ei:nth-child(1) { --ic: var(--c6); } .sg2-cg .sg2-ei:nth-child(2) { --ic: var(--c7); } .sg2-cg .sg2-ei:nth-child(3) { --ic: var(--c8); }
.sg2-cg.sg2-ic-a .sg2-ic, .sg2-cg.sg2-ic-b .sg2-ic, .sg2-cg.sg2-ic-a .sg2-ei svg, .sg2-cg.sg2-ic-b .sg2-ei svg { color: var(--ic); }
.sg2-cg.sg2-ic-a .sg2-icsvg, .sg2-cg.sg2-ic-b .sg2-icsvg { stroke-width: 1.55; }
.sg2-cg.sg2-ic-b .sg2-ic { background: linear-gradient(150deg, color-mix(in srgb, var(--ic) 7%, #fff) 0%, color-mix(in srgb, var(--ic) 15%, #f6f7f9) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 24%, transparent), inset 1px 1px 0 rgba(255,255,255,.9); }
.sg2-cg.sg2-ic-b .sg2-ei svg { box-sizing: content-box; padding: 5px; border-radius: 7px; background: color-mix(in srgb, var(--ic) 11%, #fbfbfb); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ic) 20%, transparent); }
.sg2-cg.sg2-ic-c { --ochre: #9a6f1e; }
.sg2-cg.sg2-ic-c .sg2-ic, .sg2-cg.sg2-ic-c .sg2-ei svg { color: var(--ochre); }
.sg2-cg.sg2-ic-c .sg2-ic { background: radial-gradient(120% 120% at 22% 18%, #fffdf7 0%, #f7f0e1 55%, #ece1c9 100%);
  box-shadow: inset 0 0 0 1px rgba(122,88,24,.2), inset 1px 1px 0 rgba(255,255,255,.95), inset -2px -3px 6px -3px rgba(110,80,25,.22); }
.sg2-cg.sg2-ic-c .sg2-icsvg { stroke-width: 1.65; filter: drop-shadow(.5px .6px 0 rgba(255,250,236,.9)); }

/* ===================================================================================================================
   round 4: tablet and phone keep the five cards ON the globe, like desktop. The globe runs near full width, the cards
   are compact (icon, number, name; the sub-line shows only when the globe is at least 560 px wide), in the same five-point
   layout, with the 'At every link' card in the middle. Sizes follow the globe (cqw), so the layout holds at every width.
   The flow arcs between the cards are fitted round them in assets/js/sg-arcs.js. The list under the globe is gone
   (it stays for screen readers only).
   =================================================================================================================== */
@media (max-width: 999px) {
  .sg2-cg .sg2-figure { width: min(100%, 720px); }
  .sg2-cg .sg2-on, .sg2-cg.sg2-opt3 .sg2-on::before { display: none; }
  .sg2-cg .sg2-stages, .sg2-cg .sg2-every-m { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; box-shadow: none; }
  .sg2-cg .sg2-cards, .sg2-cg .sg2-every-card { display: block; }
  .sg2-cg .sg2-card { box-sizing: border-box; white-space: normal; max-width: 42cqw; width: max-content;
    gap: clamp(6px, 2cqw, 11px); padding: clamp(4px, 1.25cqw, 8px) clamp(8px, 2.6cqw, 15px) clamp(4px, 1.25cqw, 8px) clamp(4px, 1.25cqw, 8px); border-radius: clamp(9px, 2.6cqw, 13px); }
  .sg2-cg .sg2-card-1 { left: 6% !important; top: 83.5% !important; transform: translateY(-50%); }
  .sg2-cg .sg2-card-2 { left: 2% !important; top: 38% !important; transform: translateY(-50%); }
  .sg2-cg .sg2-card-3 { left: 50% !important; top: 15% !important; transform: translate(-50%, -50%); }
  .sg2-cg .sg2-card-4 { left: auto !important; right: 2%; top: 38% !important; transform: translateY(-50%); }
  .sg2-cg .sg2-card-5 { left: auto !important; right: 6%; top: 83.5% !important; transform: translateY(-50%); }
  .sg2-cg .sg2-ic { width: clamp(24px, 7.4cqw, 38px); height: clamp(24px, 7.4cqw, 38px); border-radius: clamp(6px, 2cqw, 10px); }
  .sg2-cg .sg2-icsvg { width: 58%; height: 58%; }
  .sg2-cg .sg2-ic .sg2-badge { min-width: clamp(14px, 4.2cqw, 19px); height: clamp(14px, 4.2cqw, 19px); padding: 0 2px; top: clamp(-7px, -1.6cqw, -5px); right: clamp(-8px, -1.8cqw, -5px);
    font-size: clamp(9px, 2.7cqw, 11px); line-height: calc(clamp(14px, 4.2cqw, 19px) - 2px); border-radius: clamp(4px, 1.2cqw, 5px); }
  .sg2-cg .sg2-ct strong, .sg2-cg .sg2-row .sg2-ct strong { font-size: clamp(11px, 3.25cqw, 14px); line-height: 1.2; }
  .sg2-cg .sg2-ct small { display: none; font-size: clamp(10.5px, 2.1cqw, 12px); }
  .sg2-cg .sg2-every-card { top: 53.5% !important; width: max-content; max-width: 54cqw; padding: clamp(6px, 1.8cqw, 10px) clamp(9px, 2.6cqw, 14px) clamp(7px, 2cqw, 12px); border-radius: clamp(9px, 2.6cqw, 13px); }
  .sg2-cg .sg2-every-card .sg2-ek { font-size: clamp(8px, 2.3cqw, 10.5px); letter-spacing: .18em; margin-bottom: clamp(4px, 1.4cqw, 8px); }
  .sg2-cg .sg2-every-card .sg2-eg { grid-template-columns: minmax(0, 1fr); gap: clamp(3px, 1cqw, 5px); }
  .sg2-cg .sg2-every-card .sg2-ei { flex-direction: row; justify-content: flex-start; text-align: left; gap: clamp(5px, 1.6cqw, 8px); font-size: clamp(10.5px, 3cqw, 12px); line-height: 1.2; }
  .sg2-cg .sg2-every-card .sg2-ei svg { flex: none; width: clamp(13px, 4cqw, 18px); height: clamp(13px, 4cqw, 18px); }
  .sg2-cg.sg2-ic-b .sg2-every-card .sg2-ei svg { padding: 3px; border-radius: 5px; }
  .sg2-cg.sg2-opt2 .sg2-ei + .sg2-ei, .sg2-cg.sg2-opt3 .sg2-ei + .sg2-ei { border-left: 0; }
  .sg2-cg.sg2-opt2 .sg2-ic .sg2-badge, .sg2-cg.sg2-opt3 .sg2-ic .sg2-badge { position: static; }
  .sg2-cg.sg2-opt2 .sg2-ic { width: clamp(22px, 6.4cqw, 32px); height: clamp(22px, 6.4cqw, 32px); }
  .sg2-cg.sg2-opt2 .sg2-ic .sg2-badge { font-size: clamp(11px, 3.4cqw, 14.5px); }
  .sg2-cg.sg2-opt3 .sg2-ic { width: auto; height: auto; }
  .sg2-cg .sg2-ring { r: 31px; }
}
/* a wide enough globe (tablet) shows the sub-lines and lays the 'At every link' items side by side again */
@media (max-width: 999px) {
  @container (min-width: 560px) {
    .sg2-cg .sg2-card .sg2-ct small { display: block; }
    .sg2-cg .sg2-every-card .sg2-eg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .sg2-cg .sg2-every-card .sg2-ei { flex-direction: column; align-items: center; text-align: center; }
    .sg2-cg .sg2-every-card { max-width: 44cqw; width: 44cqw; box-sizing: border-box; }
  }
}
@media (max-width: 700px) {
  .sg2-cg .sg2-figure { width: calc(100% + 24px); max-width: none; margin: 0 -12px; }
}

/* ===== round 5: the 'At every link' card is smaller and quieter, so it reads as secondary to the five stage cards.
   Smaller heading, items and icons, tighter padding, a narrower box and a lighter shadow. Ink stays dark. ===== */
.sg2-cg .sg2-every-card { width: 248px; box-sizing: border-box; padding: 7px 7px 8px; border-radius: 11px;
  box-shadow: var(--cg-edge), 0 0 0 3px rgba(226,234,246,.36), 0 1px 2px rgba(20,26,38,.05), 0 8px 18px -10px rgba(24,38,72,.28); }
.sg2-cg .sg2-every-card .sg2-ek { margin-bottom: 6px; font-size: 8.5px; letter-spacing: .2em; }
.sg2-cg .sg2-every-card .sg2-eg { gap: 3px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); }
.sg2-cg .sg2-every-card .sg2-ei { gap: 3px; font-size: 10.5px; line-height: 1.2; }
.sg2-cg .sg2-every-card .sg2-ei svg { width: 15px; height: 15px; }
.sg2-cg.sg2-ic-b .sg2-every-card .sg2-ei svg { padding: 3px; border-radius: 5px; }
@media (max-width: 999px) {
  .sg2-cg .sg2-every-card { width: max-content; max-width: 50cqw; padding: clamp(4px, 1.2cqw, 7px) clamp(7px, 2cqw, 9px) clamp(5px, 1.4cqw, 8px); border-radius: clamp(8px, 2.2cqw, 11px); }
  .sg2-cg .sg2-every-card .sg2-ek { font-size: clamp(7.5px, 2cqw, 8.5px); letter-spacing: .16em; margin-bottom: clamp(3px, 1cqw, 6px); }
  .sg2-cg .sg2-every-card .sg2-eg { gap: clamp(2px, .7cqw, 3px); grid-template-columns: minmax(0, 1fr); }
  .sg2-cg .sg2-every-card .sg2-ei { gap: clamp(4px, 1.2cqw, 6px); font-size: clamp(10px, 2.85cqw, 10.5px); }
  .sg2-cg .sg2-every-card .sg2-ei svg { width: clamp(11px, 3.3cqw, 14px); height: clamp(11px, 3.3cqw, 14px); }
  .sg2-cg.sg2-ic-b .sg2-every-card .sg2-ei svg { padding: 2px; border-radius: 4px; }
  @container (min-width: 560px) {
    .sg2-cg .sg2-every-card { width: 248px; max-width: 36cqw; padding: 7px 7px 8px; }
    .sg2-cg .sg2-every-card .sg2-ek { font-size: 8.5px; margin-bottom: 6px; }
    .sg2-cg .sg2-every-card .sg2-eg { gap: 3px; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); }
    .sg2-cg .sg2-every-card .sg2-ei { gap: 3px; font-size: 10.5px; }
    .sg2-cg .sg2-every-card .sg2-ei svg { width: 15px; height: 15px; }
  }
}

/* ===== round 5: compact OUTCOMES band. Heading centred on top, the six outcomes in smaller dark ink below, parted by a
   thin dot. Default: two lines of three. Class sg2-o1 on #supply-chain: all six on one line (desktop).
   Phone: they wrap, neatly centred, parted by spacing only. ===== */
.sg2-cg .sg2-out { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 12px; padding: 20px 32px 22px; }
.sg2-cg .sg2-out .kicker { margin-bottom: 6px; }
.sg2-cg .sg2-out h3 { font-size: 16.5px; }
.sg2-cg .sg2-outs { display: grid; width: max-content; max-width: 100%; grid-template-columns: repeat(3, 1fr); justify-content: center; gap: 7px 0; margin: 0 auto; padding: 0; }
.sg2-cg .sg2-outs li { position: relative; padding: 0 17px; border: 0; text-align: center; }
.sg2-cg .sg2-outs li::before { content: none; position: absolute; left: -1.5px; top: 50%; width: 3px; height: 3px; margin-top: -1.5px; border-radius: 50%; background: rgba(20,26,38,.42); }
.sg2-cg .sg2-outs li:not(:nth-child(3n+1))::before { content: ""; }
.sg2-cg .sg2-outs strong { font-size: 13px; line-height: 1.35; font-weight: 600; white-space: nowrap; color: #1b212c; }
@media (min-width: 1000px) {
  .sg2-cg.sg2-o1 .sg2-outs { grid-template-columns: repeat(6, auto); }
  .sg2-cg.sg2-o1 .sg2-outs li:nth-child(4)::before { content: ""; }
}
@media (max-width: 700px) {
  .sg2-cg .sg2-out { padding: 18px 16px 20px; gap: 10px; }
  .sg2-cg .sg2-out h3 { font-size: 15.5px; }
  .sg2-cg .sg2-outs, .sg2-cg.sg2-o1 .sg2-outs { display: flex; width: auto; flex-wrap: wrap; justify-content: center; gap: 7px 20px; }
  .sg2-cg .sg2-outs li { padding: 0; }
  .sg2-cg .sg2-outs li::before, .sg2-cg .sg2-outs li:not(:nth-child(3n+1))::before, .sg2-cg.sg2-o1 .sg2-outs li:nth-child(4)::before { content: none; }
  .sg2-cg .sg2-outs strong { font-size: 13px; }
}

/* ===== round 6: three options for clearer flow arrows on the busy globe (a class on #supply-chain).
   Each arrow is drawn as a pale casing (halo or outline), the line itself (about 2.8 px, 2.6 px on tablet and phone) with a
   solid arrowhead, and a travelling pulse made of a soft blurred glow and a bright core. Widths are in css pixels through
   --u (svg units per pixel, set by sg-arcs.js), so they hold at every globe size. The pulse timing is unchanged and slow:
   one pass in about 9 s, each arrow once every 30 s.
   sg2-ar1: warm deep gold arrows, a soft light halo, golden pulses.
   sg2-ar2: dark ink arrows with a white outline, warm amber pulses.
   sg2-ar3: each arrow runs from one stage's icon colour into the next (green, gold, rose, violet, teal), a light halo,
            pulses glowing in the stage colour. ===== */
.sg2-cg #sg2-ah path { fill: #16c1d9; stroke: #16c1d9; }
.sg2-cg .sg2-halo, .sg2-cg .sg2-core { display: none; }
.sg2-cg[class*="sg2-ar"] { --lw: 2.8; --hw: 7.5; --gw: 11; --cw: 4.6; }
@media (max-width: 999px) { .sg2-cg[class*="sg2-ar"] { --lw: 2.6; --hw: 7; --gw: 10; --cw: 4.2; } }
.sg2-cg[class*="sg2-ar"] .sg2-halo.sg2-d, .sg2-cg[class*="sg2-ar"] .sg2-core.sg2-d { display: inline; }
@media (max-width: 999px) {
  .sg2-cg[class*="sg2-ar"] .sg2-halo.sg2-d, .sg2-cg[class*="sg2-ar"] .sg2-core.sg2-d { display: none; }
  .sg2-cg[class*="sg2-ar"] .sg2-halo.sg2-m, .sg2-cg[class*="sg2-ar"] .sg2-core.sg2-m { display: inline; }
}
.sg2-cg[class*="sg2-ar"] .sg2-halo, .sg2-cg[class*="sg2-ar"] .sg2-link, .sg2-cg[class*="sg2-ar"] .sg2-flow, .sg2-cg[class*="sg2-ar"] .sg2-core {
  fill: none; stroke-linecap: round; vector-effect: none; }
.sg2-cg[class*="sg2-ar"] .sg2-halo { stroke: rgba(255,252,244,.9); stroke-width: calc(var(--hw) * var(--u, .1282)); }
.sg2-cg[class*="sg2-ar"] .sg2-link { stroke-width: calc(var(--lw) * var(--u, .1282)); opacity: 1; filter: none; }
.sg2-cg[class*="sg2-ar"] #sg2-ah path, .sg2-cg[class*="sg2-ar"] [class^="sg2-ahp"] { stroke: rgba(255,252,244,.95); stroke-width: 1.6; }
.sg2-cg[class*="sg2-ar"] .sg2-flow { stroke-width: calc(var(--gw) * var(--u, .1282)); stroke-dasharray: 11 200; stroke-dashoffset: 12; filter: url(#sg2-blur-d);
  animation: sg2-move 30s cubic-bezier(.42,0,.38,1) calc(var(--k) * 7s + 1s) infinite, sg2-pfade 30s linear calc(var(--k) * 7s + 1s) infinite; }
.sg2-cg[class*="sg2-ar"] .sg2-core { stroke-width: calc(var(--cw) * var(--u, .1282)); stroke-dasharray: 7 200; stroke-dashoffset: 10; opacity: 0;
  animation: sg2-move-c 30s cubic-bezier(.42,0,.38,1) calc(var(--k) * 7s + 1s) infinite, sg2-pfade 30s linear calc(var(--k) * 7s + 1s) infinite; }
@media (max-width: 999px) { .sg2-cg[class*="sg2-ar"] .sg2-flow { filter: url(#sg2-blur-m); } }
@keyframes sg2-move-c { 0% { stroke-dashoffset: 10; } 30%, 100% { stroke-dashoffset: -102; } }
@keyframes sg2-pfade { 0% { opacity: 0; } 4%, 26% { opacity: 1; } 30%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sg2-cg .sg2-core { display: none !important; } }
/* pulses-all: every arrow carries its own pulse, all four at the same time, looping without a gap.
   The dash pattern repeats every 111 units on a 100-unit path, so as one pulse leaves the arrowhead the next one
   enters at the start: always one pulse per arrow, no fade, no blink. One pass takes about 9 s, calm linear drift.
   Slightly uneven negative delays so the four never move in lockstep and are already travelling on load. */
.sg2-cg[class*="sg2-ar"] .sg2-flow, .sg2-cg[class*="sg2-ar"] .sg2-core { --pd: -1.1s; opacity: 1; }
.sg2-cg[class*="sg2-ar"] .sg2-flow[style*="--k:1"], .sg2-cg[class*="sg2-ar"] .sg2-core[style*="--k:1"] { --pd: -4.3s; }
.sg2-cg[class*="sg2-ar"] .sg2-flow[style*="--k:2"], .sg2-cg[class*="sg2-ar"] .sg2-core[style*="--k:2"] { --pd: -6.2s; }
.sg2-cg[class*="sg2-ar"] .sg2-flow[style*="--k:3"], .sg2-cg[class*="sg2-ar"] .sg2-core[style*="--k:3"] { --pd: -8.6s; }
.sg2-cg[class*="sg2-ar"] .sg2-flow { stroke-dasharray: 11 100; animation: sg2-loop-f 10s linear var(--pd) infinite; }
.sg2-cg[class*="sg2-ar"] .sg2-core { stroke-dasharray: 7 104; animation: sg2-loop-c 10s linear var(--pd) infinite; }
@keyframes sg2-loop-f { 0% { stroke-dashoffset: 11; } 100% { stroke-dashoffset: -100; } }
@keyframes sg2-loop-c { 0% { stroke-dashoffset: 9; } 100% { stroke-dashoffset: -102; } }
/* option 1: gold */
.sg2-cg.sg2-ar1 { --ar: #8f6210; }
.sg2-cg.sg2-ar1 .sg2-link { stroke: var(--ar); }
.sg2-cg.sg2-ar1 #sg2-ah path { fill: var(--ar); }
.sg2-cg.sg2-ar1 .sg2-flow { stroke: #e0a92e; }
.sg2-cg.sg2-ar1 .sg2-core { stroke: #fff6d8; }
/* option 2: dark ink with a crisp white outline, amber pulses */
.sg2-cg.sg2-ar2 { --ar: #19202c; --hw: 6.4; }
@media (max-width: 999px) { .sg2-cg.sg2-ar2 { --hw: 6; } }
.sg2-cg.sg2-ar2 .sg2-halo { stroke: #fff; }
.sg2-cg.sg2-ar2 .sg2-link { stroke: var(--ar); }
.sg2-cg.sg2-ar2 #sg2-ah path { fill: var(--ar); stroke: #fff; }
.sg2-cg.sg2-ar2 .sg2-flow { stroke: #f0932a; }
.sg2-cg.sg2-ar2 .sg2-core { stroke: #fff1d6; }
/* option 3: stage colours */
.sg2-cg .sg2-gs1 { stop-color: var(--c1); } .sg2-cg .sg2-gs2 { stop-color: var(--c2); } .sg2-cg .sg2-gs3 { stop-color: var(--c3); }
.sg2-cg .sg2-gs4 { stop-color: var(--c4); } .sg2-cg .sg2-gs5 { stop-color: var(--c5); }
.sg2-cg.sg2-ar3 .sg2-link[data-k="0"] { stroke: url(#sg2-g1); marker-end: url(#sg2-ah2); }
.sg2-cg.sg2-ar3 .sg2-link[data-k="1"] { stroke: url(#sg2-g2); marker-end: url(#sg2-ah3); }
.sg2-cg.sg2-ar3 .sg2-link[data-k="2"] { stroke: url(#sg2-g3); marker-end: url(#sg2-ah4); }
.sg2-cg.sg2-ar3 .sg2-link[data-k="3"] { stroke: url(#sg2-g4); marker-end: url(#sg2-ah5); }
.sg2-cg .sg2-ahp2 { fill: var(--c2); } .sg2-cg .sg2-ahp3 { fill: var(--c3); } .sg2-cg .sg2-ahp4 { fill: var(--c4); } .sg2-cg .sg2-ahp5 { fill: var(--c5); }
.sg2-cg.sg2-ar3 .sg2-flow[style*="--k:0"] { stroke: var(--c1); } .sg2-cg.sg2-ar3 .sg2-flow[style*="--k:1"] { stroke: var(--c2); }
.sg2-cg.sg2-ar3 .sg2-flow[style*="--k:2"] { stroke: var(--c3); } .sg2-cg.sg2-ar3 .sg2-flow[style*="--k:3"] { stroke: var(--c4); }
.sg2-cg.sg2-ar3 .sg2-core { stroke: #fffdf8; }

/* ===== round 6: the 'At every link' card a little smaller again (about 12 %: box, text and icons) ===== */
.sg2-cg .sg2-every-card { width: 220px; padding: 6px 6px 7px; border-radius: 10px; }
.sg2-cg .sg2-every-card .sg2-ek { margin-bottom: 5px; font-size: 7.5px; }
.sg2-cg .sg2-every-card .sg2-ei { font-size: 9.5px; gap: 3px; }
.sg2-cg .sg2-every-card .sg2-ei svg { width: 13px; height: 13px; }
@media (max-width: 999px) {
  .sg2-cg .sg2-every-card { width: max-content; max-width: 46cqw; padding: clamp(4px, 1.05cqw, 6px) clamp(6px, 1.75cqw, 8px) clamp(4px, 1.2cqw, 7px); border-radius: clamp(7px, 2cqw, 10px); }
  .sg2-cg .sg2-every-card .sg2-ek { font-size: clamp(7px, 1.8cqw, 7.5px); margin-bottom: clamp(3px, .9cqw, 5px); }
  .sg2-cg .sg2-every-card .sg2-ei { gap: clamp(3px, 1cqw, 5px); font-size: clamp(9px, 2.55cqw, 9.5px); }
  .sg2-cg .sg2-every-card .sg2-ei svg { width: clamp(10px, 2.9cqw, 12.5px); height: clamp(10px, 2.9cqw, 12.5px); }
  @container (min-width: 560px) {
    .sg2-cg .sg2-every-card { width: 220px; max-width: 34cqw; padding: 6px 6px 7px; }
    .sg2-cg .sg2-every-card .sg2-ek { font-size: 7.5px; margin-bottom: 5px; }
    .sg2-cg .sg2-every-card .sg2-ei { gap: 3px; font-size: 9.5px; }
    .sg2-cg .sg2-every-card .sg2-ei svg { width: 13px; height: 13px; }
  }
}