/* "How we help" page redesign: tighter spacing, medium headings, tabbed problems, compact connection flow.
   Content and fonts unchanged. Writes both colour states by hand (generator skips this file). */
.connected-site.solutions-page { --sv-pad: clamp(56px, 6vw, 96px); }

/* ---------- medium heading sizes across the page ---------- */
.connected-site.solutions-page .solution-intro h1 { font-size: clamp(2.3rem, 3.6vw, 3.7rem) !important; line-height: 1.06 !important; }
.connected-site.solutions-page main .connected-heading h2,
.connected-site.solutions-page main section h2 { font-size: clamp(1.9rem, 3vw, 3rem) !important; line-height: 1.08 !important; letter-spacing: -.035em; }
.connected-site.solutions-page .svc-links h2 { font-size: clamp(1.5rem, 2.2vw, 2.1rem) !important; }
.connected-site.solutions-page main section h3 { font-size: clamp(1.02rem, 1.25vw, 1.2rem); }
.connected-site.solutions-page .solutions-wordmark { font-size: clamp(5rem, 13vw, 13rem) !important; }

/* ---------- section spacing ---------- */
.connected-site.solutions-page main > section:not(.solution-intro) { padding-top: var(--sv-pad) !important; padding-bottom: var(--sv-pad) !important; }
.connected-site.solutions-page main .connected-heading { margin-bottom: clamp(28px, 3vw, 44px) !important; }

/* ---------- hero: far less empty space ---------- */
.connected-site.solutions-page .solution-intro { padding-top: clamp(28px, 3.5vw, 52px) !important; padding-bottom: clamp(36px, 4vw, 60px) !important; min-height: 0 !important; align-items: center; }
.connected-site.solutions-page .solution-intro .section-tag { margin-bottom: 14px; }
.connected-site.solutions-page .solutions-hero-copy > p:not(.section-tag) { margin-top: 18px; font-size: 1rem; line-height: 1.75; }
.connected-site.solutions-page .solutions-hero-link { margin-top: 22px; }
.connected-site.solutions-page .solutions-hero-side p { margin-top: 20px; }
.connected-site.solutions-page .solutions-hero-side i { height: 22px; margin-block: 10px; }

/* =========================================================
   01 · PROBLEMS — tabs (list on the left, detail on the right)
   ========================================================= */
.sv-tabs { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); align-items: start; }
.sv-tablist { display: grid; gap: 6px; counter-reset: none; }
.sv-tab {
  position: relative; display: grid; grid-template-columns: 34px 1fr 20px; align-items: center; gap: 12px; width: 100%;
  min-height: 54px; padding: 12px 16px; border: 1px solid transparent; border-radius: 10px; background: transparent;
  font: 600 .95rem/1.35 var(--sans); text-align: left; cursor: pointer;
  transition: background .3s, border-color .3s, color .3s, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.sv-tab-num { font: 500 .66rem var(--mono); letter-spacing: .14em; }
.sv-tab-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .3s; }
.sv-tab:hover { transform: translateX(4px); }
.sv-tab[aria-pressed="true"] .sv-tab-arrow { opacity: 1; transform: none; }
.sv-tab::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: currentColor; transform: scaleY(0); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.sv-tab[aria-pressed="true"]::before { transform: scaleY(1); }
.sv-tab:focus-visible { outline: 2px solid #c9a3bd; outline-offset: 2px; }

.sv-panels { display: grid; position: sticky; top: 96px; }
.sv-panels > .service-problem-card.service-problem-card {
  grid-area: 1 / 1; margin: 0; min-height: 0; padding: clamp(24px, 2.6vw, 38px); border-radius: 14px; border: 1px solid;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .4s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .4s;
}
.sv-panels > .service-problem-card.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .4s ease, transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
.sv-panels .service-problem-card > span { display: inline-block; font: 500 .7rem var(--mono); letter-spacing: .2em; }
.sv-panels .service-problem-card h3 { margin: 14px 0 10px !important; font-size: clamp(1.35rem, 2vw, 1.9rem) !important; line-height: 1.2 !important; }
.sv-panels .service-problem-card > p { margin: 0 0 22px; font-size: 1rem; line-height: 1.7; }
.sv-panels .service-problem-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0; }
.sv-panels .service-problem-card dl > div { padding: 16px; border-radius: 10px; border: 1px solid; }
.sv-panels .service-problem-card dt { margin: 0 0 8px; font: 500 .62rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sv-panels .service-problem-card dd { margin: 0; font-size: .9rem; line-height: 1.6; }
.sv-progress { display: flex; gap: 6px; margin-top: 16px; }
.sv-progress i { flex: 1; height: 3px; border-radius: 3px; transition: background .35s; }

/* default colours (light section) */
html:not([data-theme="inverted"]) .sv-tab { color: #3d3438; }
html:not([data-theme="inverted"]) .sv-tab:hover { background: rgba(96, 67, 91, .05); }
html:not([data-theme="inverted"]) .sv-tab[aria-pressed="true"] { color: #60435b; background: #fff; border-color: rgba(96, 67, 91, .16); box-shadow: 0 10px 26px -20px rgba(96, 67, 91, .6); }
html:not([data-theme="inverted"]) .sv-panels > .service-problem-card { background: linear-gradient(160deg, #ffffff, #f6f0f3); border-color: rgba(96, 67, 91, .14); box-shadow: 0 24px 50px -36px rgba(96, 67, 91, .55); color: #211d1b; }
html:not([data-theme="inverted"]) .sv-panels .service-problem-card > span { color: #60435b; }
html:not([data-theme="inverted"]) .sv-panels .service-problem-card > p { color: #5b5156; }
html:not([data-theme="inverted"]) .sv-panels .service-problem-card dl > div { background: rgba(96, 67, 91, .04); border-color: rgba(96, 67, 91, .1); }
html:not([data-theme="inverted"]) .sv-panels .service-problem-card dt { color: #60435b; }
html:not([data-theme="inverted"]) .sv-panels .service-problem-card dd { color: #3d3438; }
html:not([data-theme="inverted"]) .sv-progress i { background: rgba(96, 67, 91, .14); }
html:not([data-theme="inverted"]) .sv-progress i.on { background: #60435b; }
/* flipped colours (dark section) */
html[data-theme="inverted"] .sv-tab { color: #cfc3cb; }
html[data-theme="inverted"] .sv-tab:hover { background: rgba(255, 255, 255, .04); }
html[data-theme="inverted"] .sv-tab[aria-pressed="true"] { color: #f0dbe8; background: rgba(201, 163, 189, .1); border-color: rgba(201, 163, 189, .28); }
html[data-theme="inverted"] .sv-panels > .service-problem-card { background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border-color: rgba(201, 163, 189, .22); color: #f1e9ee; }
html[data-theme="inverted"] .sv-panels .service-problem-card > span, html[data-theme="inverted"] .sv-panels .service-problem-card dt { color: #c9a3bd; }
html[data-theme="inverted"] .sv-panels .service-problem-card > p { color: #bfb3bb; }
html[data-theme="inverted"] .sv-panels .service-problem-card dl > div { background: rgba(255, 255, 255, .03); border-color: rgba(201, 163, 189, .16); }
html[data-theme="inverted"] .sv-panels .service-problem-card dd { color: #ddd2d9; }
html[data-theme="inverted"] .sv-progress i { background: rgba(201, 163, 189, .18); }
html[data-theme="inverted"] .sv-progress i.on { background: #c9a3bd; }

/* phone: titles become a swipeable chip row above the detail card */
@media (max-width: 860px) {
  .sv-tabs { grid-template-columns: 1fr; gap: 14px; }
  .sv-tablist { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: -20px; padding: 2px 20px 8px; scrollbar-width: none; }
  .sv-tablist::-webkit-scrollbar { display: none; }
  .sv-tab { flex: 0 0 auto; width: auto; max-width: 250px; grid-template-columns: auto 1fr; min-height: 44px; padding: 10px 14px; border-radius: 99px; font-size: .84rem; scroll-snap-align: start; white-space: normal; }
  .sv-tab:hover { transform: none; }
  .sv-tab::before, .sv-tab-arrow { display: none; }
  html:not([data-theme="inverted"]) .sv-tab { border-color: rgba(96, 67, 91, .16); }
  html[data-theme="inverted"] .sv-tab { border-color: rgba(201, 163, 189, .2); }
  .sv-panels { position: static; }
  .sv-panels .service-problem-card dl { grid-template-columns: 1fr; }
}

/* =========================================================
   02 · SECTORS WE SERVE — small icon cards, name underneath
   ========================================================= */
.sector-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 22px); margin: 0; padding: 0; list-style: none; }
.sector-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.sector-icon {
  position: relative; display: grid; place-items: center; width: 100%; max-width: 112px; aspect-ratio: 1; border-radius: 16px; border: 1px solid;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s;
}
.sector-icon svg { width: 34%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s; }
.sector-tile:hover .sector-icon { transform: translateY(-4px); }
.sector-tile:hover .sector-icon svg { transform: scale(1.1); }
.sector-name { max-width: 14ch; font: 600 .86rem/1.3 var(--sans); }
html:not([data-theme="inverted"]) .connected-site.solutions-page .sv-sectors { background: #ece6ea; }
html:not([data-theme="inverted"]) .connected-site.solutions-page .sv-sectors h2 em { color: #60435b; }
html:not([data-theme="inverted"]) .sector-name { color: #2b2229; }
html:not([data-theme="inverted"]) .sector-icon { color: #60435b; background: linear-gradient(160deg, #fff, #f6f0f3); border-color: rgba(96, 67, 91, .13); box-shadow: 0 14px 30px -24px rgba(96, 67, 91, .7); }
html:not([data-theme="inverted"]) .sector-tile:nth-child(even) .sector-icon { color: #4e6e7d; }
html:not([data-theme="inverted"]) .sector-tile:hover .sector-icon { border-color: rgba(96, 67, 91, .35); box-shadow: 0 20px 34px -22px rgba(96, 67, 91, .7); }
html[data-theme="inverted"] .connected-site.solutions-page .sv-sectors { background: #161318; }
html[data-theme="inverted"] .connected-site.solutions-page .sv-sectors h2 { color: #efe7ec; }
html[data-theme="inverted"] .connected-site.solutions-page .sv-sectors h2 em { color: #d6bccd; }
html[data-theme="inverted"] .connected-site.solutions-page .sv-sectors .connected-heading > p, html[data-theme="inverted"] .connected-site.solutions-page .sv-sectors .section-tag { color: #cfc4cb; }
html[data-theme="inverted"] .sector-name { color: #ece3e9; }
html[data-theme="inverted"] .sector-icon { color: #c9a3bd; background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); border-color: rgba(201, 163, 189, .22); }
html[data-theme="inverted"] .sector-tile:nth-child(even) .sector-icon { color: #9fbccb; border-color: rgba(159, 188, 203, .22); }
html[data-theme="inverted"] .sector-tile:hover .sector-icon { box-shadow: 0 0 26px -6px rgba(201, 163, 189, .55); }
@media (max-width: 1000px) { .sector-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 22px; } }
@media (max-width: 420px) { .sector-grid { gap: 16px 10px; } .sector-icon { border-radius: 13px; } .sector-name { font-size: .74rem; } }

/* =========================================================
   03 · ONE EXAMPLE — an app window: pieces in the sidebar, the connection as layered glass steps
   ========================================================= */
.sv-app { border-radius: 16px; border: 1px solid; overflow: hidden; }
.sv-app-bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid; }
.sv-app-bar i { width: 10px; height: 10px; border-radius: 50%; }
.sv-app-bar .connection-label { margin-left: 8px; font: 500 .66rem var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.sv-app-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 0; }
.connected-site.solutions-page .solution-puzzle .puzzle-grid {
  position: static !important; display: grid !important; align-content: start; gap: 4px; width: auto !important; max-width: none !important; height: auto !important; aspect-ratio: auto !important;
  min-height: 0 !important; margin: 0 !important; padding: 14px !important; grid-template-columns: none !important; transform: none !important; border-right: 1px solid;
}
.connected-site.solutions-page .solution-puzzle .puzzle-piece {
  position: relative !important; inset: auto !important; display: flex !important; align-items: center; width: 100% !important; height: auto !important; min-height: 42px !important;
  margin: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 9px !important; background: transparent !important;
  transform: none !important; translate: none !important; animation: none !important; filter: none !important; cursor: pointer; text-align: left; transition: background .25s, color .25s;
}
.connected-site.solutions-page .solution-puzzle .piece-shape, .connected-site.solutions-page .solution-puzzle .piece-state { display: none !important; }
.connected-site.solutions-page .solution-puzzle .piece-content { position: static !important; display: flex !important; flex-direction: row !important; align-items: center; gap: 11px; width: 100%; inset: auto !important; transform: none !important; padding: 0 !important; }
.connected-site.solutions-page .solution-puzzle .piece-content > svg { width: 17px !important; height: 17px !important; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.connected-site.solutions-page .solution-puzzle .piece-content > span { font: 500 .84rem/1.25 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }
.connected-site.solutions-page .solution-puzzle .puzzle-piece.is-connected::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; }
.connected-site.solutions-page .solution-puzzle .puzzle-piece:focus-visible { outline: 2px solid #c9a3bd !important; outline-offset: -2px; }

.connected-site.solutions-page .solution-puzzle .connection-story { position: relative; display: grid; gap: 22px; margin: 0 !important; max-width: none !important; padding: clamp(22px, 2.6vw, 34px) !important; border: 0 !important; background: none !important; overflow: hidden; }
.connected-site.solutions-page .solution-puzzle .connection-story > .section-tag { display: none !important; }
.connected-site.solutions-page .solution-puzzle .connection-path { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 26px; margin: 0 !important; padding: 0 !important; list-style: none; counter-reset: step; }
.connected-site.solutions-page .solution-puzzle .connection-path li {
  position: relative; display: flex; flex-direction: column; gap: 22px; min-height: 128px; margin: 0; padding: 16px; border-radius: 12px; border: 1px solid;
  font: 600 .95rem/1.3 var(--sans); counter-increment: step; backdrop-filter: blur(8px);
  animation: sv-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--n, 0) * 120ms);
}
.connected-site.solutions-page .solution-puzzle .connection-path li::before { content: "0" counter(step); font: 500 .62rem var(--mono); letter-spacing: .14em; opacity: .75; }
.connected-site.solutions-page .solution-puzzle .connection-path li .sv-step-icon { position: absolute; right: 14px; top: 13px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; border: 1px solid; }
.connected-site.solutions-page .solution-puzzle .connection-path li .sv-step-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.connected-site.solutions-page .solution-puzzle .connection-path li .sv-step-name { margin-top: auto; }
.connected-site.solutions-page .solution-puzzle .connection-path li:not(:last-child)::after {
  content: ""; position: absolute; left: calc(100% + 6px); top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border-top: 1.5px solid; border-right: 1.5px solid; transform: rotate(45deg); opacity: .7;
}
@keyframes sv-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.sv-flowbar { position: relative; height: 3px; border-radius: 3px; overflow: hidden; }
.sv-flowbar::after { content: ""; position: absolute; inset: 0; width: 30%; border-radius: 3px; animation: sv-bar 2.4s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes sv-bar { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.connected-site.solutions-page .solution-puzzle [data-connection-example] { max-width: 70ch; margin: 0 !important; font-size: .98rem !important; line-height: 1.75 !important; }
.connected-site.solutions-page .solution-puzzle .connection-story small { font: 500 .66rem var(--mono); letter-spacing: .06em; opacity: .7; }

/* default colours (dark section) */
html:not([data-theme="inverted"]) .sv-app { border-color: rgba(201, 163, 189, .2); background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)); box-shadow: 0 40px 80px -50px #000; }
html:not([data-theme="inverted"]) .sv-app-bar { border-color: rgba(201, 163, 189, .14); background: rgba(0, 0, 0, .18); }
html:not([data-theme="inverted"]) .sv-app-bar i { background: #3a333a; }
html:not([data-theme="inverted"]) .sv-app-bar i:first-child { background: #c9a3bd; }
html:not([data-theme="inverted"]) .sv-app-bar .connection-label { color: #9fbccb; }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .puzzle-grid { border-color: rgba(201, 163, 189, .14); background: rgba(0, 0, 0, .12); }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .puzzle-piece { color: #b3a7af !important; }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .puzzle-piece:hover { background: rgba(255, 255, 255, .04) !important; color: #efe5eb !important; }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .puzzle-piece.is-connected { color: #e6dbe2 !important; }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .puzzle-piece.is-connected::after { background: #9fbccb; box-shadow: 0 0 8px #9fbccb; }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .puzzle-piece[aria-pressed="true"] { color: #f6eaf2 !important; background: linear-gradient(90deg, rgba(201, 163, 189, .28), rgba(201, 163, 189, .08)) !important; }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .puzzle-piece[aria-pressed="true"]::after { background: #e7c3dc; box-shadow: 0 0 8px #e7c3dc; }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .connection-path li { color: #f3e8ef; border-color: rgba(201, 163, 189, .3); background: linear-gradient(160deg, rgba(201, 163, 189, .16), rgba(255, 255, 255, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .connection-path li:nth-child(even) { border-color: rgba(159, 188, 203, .32); background: linear-gradient(160deg, rgba(159, 188, 203, .15), rgba(255, 255, 255, .03)); }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .connection-path li .sv-step-icon { border-color: rgba(255, 255, 255, .16); background: rgba(0, 0, 0, .2); }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .connection-path li::after { border-color: #c9a3bd; }
html:not([data-theme="inverted"]) .sv-flowbar { background: rgba(201, 163, 189, .14); }
html:not([data-theme="inverted"]) .sv-flowbar::after { background: linear-gradient(90deg, transparent, #c9a3bd, #9fbccb); }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle [data-connection-example] { color: #d3c8cf !important; }
html:not([data-theme="inverted"]) .connected-site.solutions-page .solution-puzzle .connected-heading h2 em { color: #c9a3bd !important; }
/* flipped colours (light section) */
html[data-theme="inverted"] .sv-app { border-color: rgba(96, 67, 91, .16); background: #fff; box-shadow: 0 40px 70px -50px rgba(96, 67, 91, .6); }
html[data-theme="inverted"] .sv-app-bar { border-color: rgba(96, 67, 91, .12); background: #f7f2f5; }
html[data-theme="inverted"] .sv-app-bar i { background: #e2d8de; }
html[data-theme="inverted"] .sv-app-bar i:first-child { background: #60435b; }
html[data-theme="inverted"] .sv-app-bar .connection-label { color: #4e6e7d; }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .puzzle-grid { border-color: rgba(96, 67, 91, .12); background: #faf7f9; }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .puzzle-piece { color: #6b5f66 !important; }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .puzzle-piece:hover { background: rgba(96, 67, 91, .05) !important; color: #2b2229 !important; }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .puzzle-piece.is-connected { color: #2b2229 !important; }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .puzzle-piece.is-connected::after { background: #4e6e7d; }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .puzzle-piece[aria-pressed="true"] { color: #fff !important; background: #60435b !important; }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .puzzle-piece[aria-pressed="true"]::after { background: #fff; }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .connection-path li { color: #2b2229; border-color: rgba(96, 67, 91, .2); background: linear-gradient(160deg, rgba(96, 67, 91, .09), #fff); box-shadow: 0 12px 26px -20px rgba(96, 67, 91, .6); }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .connection-path li:nth-child(even) { border-color: rgba(78, 110, 125, .25); background: linear-gradient(160deg, rgba(78, 110, 125, .1), #fff); }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .connection-path li .sv-step-icon { border-color: rgba(96, 67, 91, .2); background: #fff; color: #60435b; }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .connection-path li::after { border-color: #60435b; }
html[data-theme="inverted"] .sv-flowbar { background: rgba(96, 67, 91, .1); }
html[data-theme="inverted"] .sv-flowbar::after { background: linear-gradient(90deg, transparent, #60435b, #4e6e7d); }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle [data-connection-example] { color: #4f464a !important; }
html[data-theme="inverted"] .connected-site.solutions-page .solution-puzzle .connected-heading h2 em { color: #60435b !important; }

@media (max-width: 900px) {
  .sv-app-body { grid-template-columns: 1fr; }
  .connected-site.solutions-page .solution-puzzle .puzzle-grid { display: flex !important; gap: 6px; overflow-x: auto; padding: 10px 12px !important; border-right: 0; border-bottom: 1px solid; scrollbar-width: none; }
  .connected-site.solutions-page .solution-puzzle .puzzle-piece { flex: none; width: auto !important; padding: 0 14px !important; border-radius: 99px !important; }
  .connected-site.solutions-page .solution-puzzle .puzzle-piece.is-connected::after { display: none; }
  .connected-site.solutions-page .solution-puzzle .connection-path { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-auto-columns: auto; gap: 12px; }
  .connected-site.solutions-page .solution-puzzle .connection-path li { min-height: 104px; }
  .connected-site.solutions-page .solution-puzzle .connection-path li::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-tab, .sv-panels > .service-problem-card, .sector-icon, .sector-icon svg { transition: none !important; }
  .connected-site.solutions-page .solution-puzzle .connection-path li, .sv-flowbar::after { animation: none !important; }
}
.connected-site.solutions-page .solution-intro h1 { margin-bottom: 0 !important; }
.connected-site.solutions-page .solution-puzzle .puzzle-grid { grid-template-rows: none !important; grid-auto-rows: auto !important; grid-template-areas: none !important; }
.connected-site.solutions-page .solution-puzzle .puzzle-piece { grid-area: auto !important; aspect-ratio: auto !important; max-height: none !important; justify-content: flex-start !important; }
.connected-site.solutions-page .solution-puzzle .piece-content { justify-content: flex-start !important; text-align: left !important; }
.connected-site.solutions-page .solution-puzzle .connection-story { align-content: start; }
.sv-app-body { align-items: stretch; }
.sv-app { margin-bottom: clamp(24px, 4vw, 56px); }

html:not([data-theme="inverted"]) .sv-tab-num { color: #6b5464; }
html[data-theme="inverted"] .sv-tab-num { color: #c9b7c3; }

/* "One example": the line under the step cards is static (no moving light), and no arrow glyphs between cards */
.sv-flowbar::after { animation: none !important; display: none; }
html:not([data-theme="inverted"]) .sv-flowbar { background: linear-gradient(90deg, rgba(201, 163, 189, .5), rgba(159, 188, 203, .5)); }
html[data-theme="inverted"] .sv-flowbar { background: linear-gradient(90deg, rgba(96, 67, 91, .35), rgba(78, 110, 125, .35)); }
.connected-site.solutions-page .solution-puzzle .connection-path li:not(:last-child)::after { display: none !important; }
.connected-site.solutions-page .solution-puzzle .connection-path li { animation: none !important; }