.solution-puzzle { padding-top: 24px; }
.puzzle-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; grid-auto-rows: 210px; isolation: isolate; margin: 0 0 64px; }
.puzzle-piece { --piece-accent: #a98ca0; position: relative; z-index: var(--piece-order); min-height: 0; height: 100%; transform: none; padding: 30px 28px; background: transparent; border: 0; color: #45343f; cursor: pointer; }
.puzzle-piece:nth-child(3n+2) { --piece-accent: #8dd4d9; }
.puzzle-piece:nth-child(3n) { --piece-accent: #bfa26a; }
.piece-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.piece-shape path { fill: none; stroke: #b5a9b1; stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: stroke .25s, stroke-width .25s, filter .25s; }
.piece-narrow { display: none; }
.piece-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; font: 500 .88rem/1.5 var(--sans); text-align: center; }
.piece-content svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.piece-state { visibility: hidden; font: 400 .58rem var(--mono); letter-spacing: .04em; }
.puzzle-piece.is-connected { z-index: 10; }
.puzzle-piece.is-connected .piece-shape path { stroke: var(--piece-accent); stroke-opacity: .48; stroke-width: 1.25; filter: none; }
.puzzle-piece[aria-pressed="true"] { z-index: 30; color: #60435b; }
.puzzle-piece[aria-pressed="true"] .piece-shape path { stroke: var(--piece-accent); stroke-opacity: .85; stroke-width: 2; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--piece-accent) 28%, transparent)); }
.puzzle-piece[aria-pressed="true"] .piece-state { visibility: visible; }
.puzzle-piece:hover .piece-shape path { stroke: var(--piece-accent); }
.puzzle-piece:hover .piece-content { color: #60435b; }
.connected-site .puzzle-piece:focus-visible { z-index: 31; outline: none; }
.puzzle-piece:focus-visible .piece-shape path { stroke: #60435b; stroke-opacity: 1; stroke-width: 3; stroke-dasharray: 5 3; }
.connection-story { padding: 32px 0; border-block: 1px solid var(--rule); min-height: 240px; }
.connection-path { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 24px 0; gap: 12px; }
.connection-path li { font: 500 .85rem/1.6 var(--sans); color: var(--plum); }
.connection-path li:not(:last-child)::after { content: '→'; margin-left: 12px; }
.connection-story > p:not(.section-tag) { max-width: 70ch; line-height: 1.85; font-size: 1rem; }
.connection-story > small { display: block; margin-top: 24px; color: var(--muted); font-size: .75rem; line-height: 1.7; }
@media(max-width:760px) {
 .puzzle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 190px; margin-bottom: 44px; }
 .piece-wide { display: none; } .piece-narrow { display: block; }
 .puzzle-piece { min-height: 0; padding: 28px 18px; }
 .piece-content { font-size: .77rem; gap: 12px; }
 .connection-story { min-height: 0; }
}
@media(prefers-reduced-motion:reduce) { .piece-shape path { transition: none; } }

/* A distinct opening panel separates the introduction from the service puzzle. */
.connected-site.solutions-page .solution-intro {
  display: grid; grid-template-columns: minmax(0, 1fr) 190px;
  align-items: center; gap: clamp(48px, 7vw, 110px);
  padding: clamp(88px, 9vw, 140px) var(--gutter);
  background: #242126; color: #f4eee6; border-bottom: 1px solid #60435b;
  text-align: left;
}
.solutions-hero-copy { max-width: 960px; }
.solutions-page .solution-intro .section-tag { color: #c5b2c1; }
.solutions-page .solution-intro h1 {
  margin: 28px 0 32px; font-size: clamp(2.8rem, 5.2vw, 5.7rem);
  font-weight: 500; line-height: 1.08; letter-spacing: -.045em; color: #f4eee6;
}
.solutions-page .solution-intro h1 span { color: #c5b2c1; }
.solutions-hero-copy > p:not(.section-tag) { max-width: 52ch; color: #c9bfc8; font: 400 1.05rem/1.9 var(--sans); margin: 0; }
.solutions-hero-link { display: inline-flex; align-items: center; gap: 32px; min-height: 48px; margin-top: 36px; padding: 12px 0; border-bottom: 1px solid #ad91a5; color: #f4eee6; text-decoration: none; font: 500 .83rem var(--sans); }
.solutions-hero-link:hover { color: #d9c3d3; border-color: #f4eee6; }
.solutions-hero-side { border-left: 1px solid #ffffff24; padding: 8px 0 8px 32px; }
.solutions-hero-side > span { display: block; color: #c5b2c1; font: 400 .65rem/1.6 var(--mono); letter-spacing: .09em; }
.solutions-hero-side i { display: block; width: 1px; height: 35px; margin: 14px 0 14px 4px; background: #ad91a550; }
.solutions-hero-side p { margin: 32px 0 0; color: #f4eee6; font: 400 1rem/1.7 var(--sans); }
.solutions-page .solution-puzzle { padding-top: var(--section-space); scroll-margin-top: 80px; }
@media(max-width:900px) {
  .connected-site.solutions-page .solution-intro { grid-template-columns: 1fr; padding-block: 80px; }
  .solutions-hero-side { display: none; }
}
@media(max-width:620px) {
  .connected-site.solutions-page .solution-intro { padding-block: 64px 72px; }
  .solutions-page .solution-intro h1 { font-size: clamp(2.3rem, 8.5vw, 3.3rem); margin-top: 24px; }
  .solutions-hero-copy > p:not(.section-tag) { font-size: .95rem; }
}

.solution-closing { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 56px; padding: var(--section-space) var(--gutter); background: var(--paper); border-top: 1px solid #60435b45; }
.solution-closing h2 { font-size: clamp(2.3rem,4.5vw,4.8rem); line-height: 1.1; letter-spacing: -.045em; font-weight: 500; margin: 0 0 28px; }
.solution-closing p { max-width: 49ch; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.9; }
.solution-closing > a { display: inline-flex; justify-content: center; align-items: center; gap: 32px; padding: 19px 26px; min-height: 56px; background: var(--plum); color: #fff; font: 500 .85rem/1.5 var(--sans); text-decoration: none; }
.solution-closing > a:hover { background: #493345; }
@media(max-width:760px) {
 .solution-closing { grid-template-columns: 1fr; gap: 32px; }
 .solution-closing > a { justify-self: start; }
}

/* Quiet bookend accents leave the interactive puzzle as the focal point. */
.connected-site.solutions-page .solution-intro,
.solution-closing { position: relative; isolation: isolate; overflow: hidden; }
.solutions-accent { position: absolute; z-index: -1; height: auto; pointer-events: none; user-select: none; }
.solutions-accent-dots { width: clamp(200px,22vw,320px); right: -60px; bottom: -75px; opacity: .24; }
.solutions-accent-rings { width: 200px; right: var(--gutter); top: 30px; opacity: .15; }
@media(max-width:760px) {
 .solutions-accent-dots { width: 190px; right: -70px; bottom: -65px; opacity: .16; }
 .solutions-accent-rings { width: 130px; top: 24px; opacity: .12; }
}

/* Override legacy page-hero child rules: decoration must never occupy a grid cell. */
.connected-site.solutions-page .solution-intro > .solutions-accent {
  position: absolute; z-index: 0; margin: 0; max-width: none;
}
.connected-site.solutions-page .solution-intro > .solutions-hero-copy {
  position: relative; z-index: 1; width: 100%; min-width: 0;
  max-width: 960px; margin: 0; justify-self: start;
}
.connected-site.solutions-page .solution-intro > .solutions-hero-side {
  position: relative; z-index: 1; width: 100%; margin: 0; box-sizing: border-box;
}
.connected-site.solutions-page .solution-intro .section-tag { margin: 0 0 28px; }
.connected-site.solutions-page .solution-intro h1 {
  font-size: clamp(2.5rem, 4.8vw, 5.2rem); line-height: 1.12;
  margin: 0 0 32px; text-wrap: balance;
}
@media (max-width: 1100px) {
  .connected-site.solutions-page .solution-intro { grid-template-columns: 1fr; }
  .connected-site.solutions-page .solution-intro > .solutions-hero-side { display: none; }
}
@media (max-width: 620px) {
  .connected-site.solutions-page .solution-intro { padding: 64px 24px 72px; gap: 0; }
  .connected-site.solutions-page .solution-intro h1 { font-size: clamp(2.05rem, 8vw, 3rem); line-height: 1.14; }
  .connected-site.solutions-page .solution-intro .section-tag { margin-bottom: 24px; }
  .solutions-hero-link { margin-top: 28px; }
}

/* ===== Inverted colours for the moon/sun switch (generated from the rules above — keep at end of file) ===== */
html[data-theme="inverted"] .puzzle-piece { --piece-accent: #654c5d; background: transparent; border: 0; color: #d8cbd3; }
html[data-theme="inverted"] .puzzle-piece:nth-child(3n/**/+2) { --piece-accent: #345e61; }
html[data-theme="inverted"] .puzzle-piece:nth-child(3n) { --piece-accent: #bfa26a; }
html[data-theme="inverted"] .piece-shape path { fill: none; stroke: #53474f; }
html[data-theme="inverted"] .piece-content svg { fill: none; stroke: currentColor; }
html[data-theme="inverted"] .puzzle-piece.is-connected .piece-shape path { stroke: var(--piece-accent); }
html[data-theme="inverted"] .puzzle-piece[aria-pressed="true"] { color: #d2bfcf; }
html[data-theme="inverted"] .puzzle-piece[aria-pressed="true"] .piece-shape path { stroke: var(--piece-accent); }
html[data-theme="inverted"] .puzzle-piece:hover .piece-shape path { stroke: var(--piece-accent); }
html[data-theme="inverted"] .puzzle-piece:hover .piece-content { color: #d2bfcf; }
html[data-theme="inverted"] .connected-site .puzzle-piece:focus-visible { outline: none; }
html[data-theme="inverted"] .puzzle-piece:focus-visible .piece-shape path { stroke: #d2bfcf; }
html[data-theme="inverted"] .connection-story { border-block: 1px solid var(--rule); }
html[data-theme="inverted"] .connection-path li { color: #d2bfcf; }
html[data-theme="inverted"] .connection-story > small { color: var(--muted); }
html[data-theme="inverted"] .connected-site.solutions-page .solution-intro { background: #f1eae1; color: #382d1e; border-bottom: 1px solid #d2bfcf; }
html[data-theme="inverted"] .solutions-page .solution-intro .section-tag { color: #503c4c; }
html[data-theme="inverted"] .solutions-page .solution-intro h1 { color: #382d1e; }
html[data-theme="inverted"] .solutions-page .solution-intro h1 span { color: #503c4c; }
html[data-theme="inverted"] .solutions-hero-copy > p:not(.section-tag) { color: #473c46; }
html[data-theme="inverted"] .solutions-hero-link { border-bottom: 1px solid #62495b; color: #382d1e; }
html[data-theme="inverted"] .solutions-hero-link:hover { color: #4a2f42; border-color: #382d1e; }
html[data-theme="inverted"] .solutions-hero-side { border-left: 1px solid rgba(33, 33, 33, 0.141); }
html[data-theme="inverted"] .solutions-hero-side > span { color: #503c4c; }
html[data-theme="inverted"] .solutions-hero-side i { background: #ad91a550; }
html[data-theme="inverted"] .solutions-hero-side p { color: #382d1e; }
html[data-theme="inverted"] .solution-closing { background: #271c24; border-top: 1px solid rgba(210, 191, 207, 0.271); }
html[data-theme="inverted"] .solution-closing p { color: var(--muted); }
html[data-theme="inverted"] .solution-closing > a { background: #60435b; color: #fff; }
html[data-theme="inverted"] .solution-closing > a:hover { background: #493345; }