/* Additions share the site's palette, typography, cards and window component. */
.build-services .service-open {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  width:100%; min-height:56px; padding:9px 0; margin:0; text-align:left;
  color:var(--text); background:transparent; border:0; border-radius:2px;
  font:600 15px/var(--type-leading-copy) var(--font-body); letter-spacing:-.01em; cursor:pointer;
}
.build-services .service-open > span { min-width:0; }
/* The SVG has inset artwork; scale its box with the label to keep the arrow legible. */
.build-services :is(.service-open, .business-impact-open) .action-chevron { flex:0 0 1.75em; width:1.75em; height:1.75em; color:var(--mint); }
.build-services .service-open .action-chevron { margin-top:calc((1lh - 1.75em) / 2); }
.build-services .service-open:hover, .build-services .service-open[aria-expanded="true"] { color:var(--mint); }
.service-open:focus-visible, .value-tabs button:focus-visible, .expertise-tabs button:focus-visible, .expertise-panel:focus-visible { outline:2px solid var(--mint); outline-offset:3px; }
.service-saving { color:var(--mint); font-size:var(--type-label-size); font-weight:400; line-height:var(--type-leading-label); }
.expertise-tabs { margin-top:var(--service-gap); }
.expertise-panels { display:grid; margin-top:var(--service-gap); }
.expertise-panel { grid-area:1 / 1; min-width:0; }
/* Only the selected tab contributes height; hidden planning tables must not
   leave an empty area below the Expertise cards. Keep the tabs anchored above it. */
.expertise-panel[hidden] { display:none; }
:root[data-device] .service-overview.engineering-section { justify-content:flex-start; }
:root[data-device] .expertise-panel .capabilities { margin-top:0; }
.expertise-planning { padding:var(--service-card-space); border-radius:5px; background:var(--surface); }
.expertise-planning p { margin:0 0 12px; font-size:14px; line-height:var(--type-leading-copy); color:var(--service-muted); }
.expertise-planning h3 { margin:0 0 10px; font:var(--type-weight-heading) 22px/var(--type-leading-subheading) var(--font-heading); }
.expertise-planning .value-note { font-size:13px; }
.expertise-planning > :last-child, .expertise-planning .value-hosting section > :last-child { margin-bottom:0; }
.service-window {
  --window-surface:var(--bg); --window-soft:var(--surface); --window-border:var(--line);
  --window-launch-light:var(--surface); --window-launch-shade:var(--surface);
  grid-template-rows:auto minmax(0,1fr) auto;
}
.service-window-scroll { overflow:auto; min-height:0; overscroll-behavior:contain; }
.service-window-scroll > .window-content { padding-block:24px; }
.service-window .window-intro { margin:0 0 10px; }
.service-window p { font-size:16px; line-height:var(--type-leading-copy); color:var(--muted); margin:0 0 16px; }
.service-window p strong { color:var(--text); font-weight:600; }
.service-window h3 { font-size:22px; line-height:var(--type-leading-subheading); letter-spacing:var(--type-tracking-subheading); margin:24px 0 12px; }
.service-window .service-window-benefit { margin-bottom:20px; }
.service-window-intro { margin-bottom:20px; }
.service-window-intro.has-illustration { display:grid; grid-template-columns:minmax(0,1fr) clamp(88px,20vw,180px); align-items:center; gap:24px; }
.service-window-copy { min-width:0; }
.service-window-intro .service-window-benefit { margin-bottom:0; }
.service-window-intro .page-illustration { align-self:center; width:100%; height:110px; }
.service-window-intro .page-illustration[hidden] { display:none; }
.service-window .value-note { font-size:13px; }
.service-window .service-window-footer { display:flex; align-items:center; justify-content:flex-end; margin-inline:auto; padding-block:10px; border-top:1px solid var(--line); background:var(--window-surface); color:var(--text); }
.value-tabs { display:flex; gap:4px 20px; flex-wrap:wrap; border-bottom:1px solid var(--line); margin-bottom:20px; }
.value-tabs button { flex:none; border:0; border-radius:0; background:transparent; color:var(--muted); min-height:44px; padding:8px 0; font:600 14px/var(--type-leading-copy) var(--font-body); cursor:pointer; }
.value-tabs button:is(:hover,[aria-selected="true"]) { color:var(--mint); }
.value-tabs button[aria-selected="true"] { box-shadow:inset 0 -1px var(--mint); }
.service-window [role="tabpanel"][hidden] { display:none; }
.expertise-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin:24px 0; }
.expertise-guide section { min-width:0; padding-top:16px; border-top:2px solid var(--line); }
:is(.service-window,.expertise-planning) .expertise-guide h3 { margin:0 0 10px; font-size:18px; line-height:1.35; overflow-wrap:anywhere; }
:is(.service-window,.expertise-planning) .expertise-guide p { margin:0; font-size:16px; }
.service-window .expertise-guide { grid-template-columns:1fr; gap:20px; }
.service-window .expertise-guide section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:20px; }
:is(.service-window,.expertise-planning) .expertise-takeaway { border-left:2px solid var(--mint); padding:4px 0 4px 16px; font-size:16px; margin:20px 0 0; }
.service-window .expertise-lead { color:var(--text); }
.expertise-flow { container-type:inline-size; min-width:0; margin:24px 0; padding:18px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.expertise-flow figcaption { font:600 14px/1.4 var(--font-body); margin-bottom:12px; color:var(--text); }
.expertise-flow-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:var(--mint) var(--surface); }
.expertise-flow-scroll:focus-visible { outline:2px solid var(--mint); outline-offset:3px; border-radius:2px; }
.expertise-flow svg { display:block; width:100%; min-width:680px; height:auto; }
.service-window .expertise-flow .expertise-flow-hint { display:none; margin:0 0 8px; font-size:13px; color:var(--mint); }
.expertise-flow-node { fill:var(--bg); stroke:var(--line); }
.expertise-flow-link { fill:none; stroke:var(--mint); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.expertise-flow text { text-anchor:middle; font-family:var(--font-body); }
.expertise-flow-number { fill:var(--mint); font-size:11px; font-weight:600; }
.expertise-flow-label { fill:var(--text); font-size:14px; font-weight:500; }
.service-window .expertise-flow p { margin:12px 0 0; font-size:16px; }
@container (max-width:679px) {
  .service-window .expertise-flow .expertise-flow-hint { display:block; }
}
@media (max-width:700px) {
  .expertise-guide { grid-template-columns:1fr; gap:20px; }
  .service-window .expertise-guide section { grid-template-columns:1fr; gap:0; }
}
.value-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:24px 0; }
.value-stat { min-width:0; display:grid; gap:5px; padding:0 22px; border-left:1px solid var(--line); }
.value-stat:first-child { border:0; padding-left:0; }
.value-stat strong { font:var(--type-weight-heading) clamp(26px,3vw,36px)/var(--type-leading-heading) var(--font-heading); letter-spacing:var(--type-tracking-subheading); }
.value-stat span { font-size:13px; line-height:var(--type-leading-copy); color:var(--muted); }
.value-stat small { font-size:var(--type-label-size); line-height:var(--type-leading-label); color:var(--muted); }
.value-table-scroll { max-width:100%; overflow:auto; margin:20px 0; }
:is(.service-window, .expertise-planning) table { width:100%; border-collapse:collapse; font-size:14px; line-height:var(--type-leading-copy); }
:is(.service-window, .expertise-planning) caption { text-align:left; margin:0 0 10px; color:var(--muted); }
:is(.service-window, .expertise-planning) th, :is(.service-window, .expertise-planning) td { padding:10px 12px 10px 0; text-align:left; border-bottom:1px solid var(--line); font-weight:400; vertical-align:top; }
:is(.service-window, .expertise-planning) thead th { font-size:var(--type-label-size); color:var(--muted); }
:is(.service-window, .expertise-planning) td { font-variant-numeric:tabular-nums; }
.value-hosting { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.value-hosting section { min-width:0; }
:is(.service-window, .expertise-planning) .value-price { font:var(--type-weight-heading) 28px/var(--type-leading-subheading) var(--font-heading); color:var(--mint); }
.value-sources { list-style:none; padding:0; margin:20px 0; }
.value-sources li { padding:12px 0; border-top:1px solid var(--line); }
.value-sources a { color:var(--mint); text-decoration:none; overflow-wrap:anywhere; }
.value-sources a:hover { text-decoration:underline; text-underline-offset:3px; }
.expertise-flow .impact-flow-svg { display:block; width:100%; min-width:736px; height:auto; }
.impact-flow-branch { stroke-dasharray:4 4; }
@container (max-width:735px) {
  .service-window .impact-flow .expertise-flow-hint { display:block; }
}
.impact-flow-alternative .expertise-flow-node { fill:var(--surface-hover); }
.service-window :is(.impact-scenario-inputs, .value-sources details) summary { cursor:pointer; color:var(--mint); padding:10px 0; font-size:14px; }
.service-window :is(.impact-scenario-inputs, .value-sources details) summary:focus-visible { outline:2px solid var(--mint); outline-offset:2px; }
/* Fit the overview to both dimensions of the display. Keep natural document
   flow when a narrow or zoomed viewport needs more room for readable text. */
:root[data-device] .build-services.business-impact {
  --business-impact-gap:clamp(10px, min(1.5vw, 1.7svh), 20px);
  --business-impact-padding:clamp(12px, min(1.6vw, 2svh), 24px);
  display:flex; flex-direction:column; justify-content:center; min-height:100svh;
  padding-block:max(var(--home-clearance), min(8svh, 88px)) max(16px, 3svh, env(safe-area-inset-bottom));
}
.business-impact > * { width:100%; margin-inline:auto; }
.business-impact p { color:var(--service-muted); }
.business-impact-heading { text-align:center; }
.business-impact .section-top { margin-bottom:clamp(6px, 1.2svh, 14px); }
.business-impact-heading .eyebrow { text-transform:uppercase; }
:root[data-device] .business-impact .section-heading h2 { font-size:clamp(28px, min(4.3vw, 5.5svh), 52px); }
.build-services .service-note { margin:clamp(6px, 1.2svh, 12px) auto 0; max-width:64ch; font-size:14px; line-height:var(--type-leading-copy); color:var(--service-muted); text-align:center; }
.business-impact-layout { display:grid; grid-template-columns:minmax(0,1fr) 144px; align-items:start; gap:var(--business-impact-gap); margin-top:var(--business-impact-gap); }
#business-impact-panel { grid-column:1; grid-row:1; min-width:0; }
.business-impact-perspectives { grid-column:2; grid-row:1; display:grid; gap:8px; min-width:0; }
.business-impact-perspectives > span { font-size:13px; color:var(--service-muted); }
.business-impact-perspectives .value-tabs {
  display:grid; grid-template-columns:1fr; gap:4px;
  width:100%; margin:0; padding:0; border:0;
}
.business-impact-perspectives .value-tabs button { font-size:14px; text-align:left; padding:8px 12px; border-radius:5px; overflow-wrap:break-word; }
.business-impact-perspectives .value-tabs button[aria-selected="true"] { background:var(--surface-active); box-shadow:none; }
.business-impact-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--business-impact-gap); }
.business-impact-card {
  position:relative; min-width:0; display:flex; flex-direction:column; gap:var(--business-impact-gap);
  background:var(--surface); border-radius:5px; padding:var(--business-impact-padding);
}
:root[data-device] .business-impact .business-impact-cards h3 { font-size:clamp(20px, min(2vw, 3svh), 25px); }
.business-impact-card h3 { color:var(--text); min-height:2.3em; margin:0; overflow-wrap:break-word; hyphens:auto; }
.business-impact-open { display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%; padding:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit; text-align:left; cursor:pointer; }
.business-impact-open .service-title { min-width:0; overflow-wrap:break-word; hyphens:auto; }
.business-impact-open .action-chevron { margin:0; }
.business-impact-open::after { content:''; position:absolute; inset:0; border-radius:5px; }
.business-impact-open:focus-visible { outline:none; }
.business-impact-open:focus-visible::after { outline:2px solid var(--mint); outline-offset:3px; }
.business-impact-card:hover .business-impact-open, .business-impact-open[aria-expanded="true"] { color:var(--mint); }
.business-impact-number { display:flex; align-items:center; gap:12px; }
.business-impact-number strong { flex:none; font:var(--type-weight-heading) clamp(36px, min(4vw, 6svh), 56px)/var(--type-leading-heading) var(--font-heading); color:var(--mint); letter-spacing:var(--type-tracking-heading); }
.business-impact-number > span { min-width:0; color:var(--text); font-size:14px; line-height:var(--type-leading-copy); overflow-wrap:break-word; hyphens:auto; }
.business-impact .business-impact-workload { font-size:14px; line-height:var(--type-leading-copy); margin:0; overflow-wrap:break-word; hyphens:auto; }
.business-impact-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:auto 0 0; }
.business-impact-comparison > div { min-width:0; display:flex; flex-direction:column; gap:6px; padding:clamp(8px, 1.2svh, 12px); border-radius:4px; background:var(--surface-hover); }
.business-impact-comparison dt { color:var(--service-muted); font-size:13px; line-height:var(--type-leading-label); }
.business-impact-comparison dd { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 6px; margin:auto 0 0; }
.business-impact-comparison strong { color:var(--text); font:var(--type-weight-heading) clamp(20px, 2.8svh, 25px)/var(--type-leading-subheading) var(--font-heading); font-variant-numeric:tabular-nums; }
.business-impact-comparison dd span { color:var(--service-muted); font-size:var(--type-label-size); }
.business-impact-comparison .business-impact-assisted { background:var(--surface-active); }
.business-impact-assisted strong { color:var(--mint); }
.business-impact-totals {
  display:grid; grid-template-columns:1.2fr repeat(3,minmax(0,1fr)); align-items:center; gap:var(--business-impact-gap);
  margin-top:var(--business-impact-gap); padding:var(--business-impact-padding); border:0; border-radius:5px; background:var(--surface);
}
.business-impact .business-impact-totals h3 { color:var(--text); font:var(--type-weight-heading) 18px/var(--type-leading-subheading) var(--font-heading); letter-spacing:var(--type-tracking-subheading); margin:0; }
.business-impact-totals p { font-size:14px; line-height:var(--type-leading-copy); margin:6px 0 0; }
.business-impact-totals .value-stat { padding:0; border:0; }
.business-impact-totals .value-stat strong { font-size:clamp(26px, min(2.8vw, 4svh), 36px); overflow-wrap:break-word; }
.business-impact-totals .value-stat span { font-size:14px; }
.business-impact-totals .value-stat :is(span,small) { color:var(--service-muted); }
@media (min-width:701px) {
  /* Align equivalent figures without reserving empty heading lines. */
  .business-impact-card { display:grid; grid-row:span 4; grid-template-rows:subgrid; }
  .business-impact-card h3 { min-height:0; }
}
@media (max-width:1099px) {
  /* Give all three estimates the full width before resorting to a stack. */
  .business-impact-layout { grid-template-columns:minmax(0,1fr); }
  .business-impact-perspectives { grid-column:1; grid-row:1; }
  #business-impact-panel { grid-column:1; grid-row:2; }
  .business-impact-perspectives .value-tabs { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .business-impact-perspectives .value-tabs button { padding:8px 4px; font-size:13px; text-align:center; }
}
@media (min-width:900px) and (max-width:1099px) {
  .business-impact-perspectives { grid-template-columns:auto minmax(0,1fr); align-items:center; }
}
@media (max-width:899px) {
  .business-impact-number { flex-direction:column; align-items:flex-start; gap:6px; }
}
@media (min-width:900px) and (max-height:650px) {
  /* A shallow window has room for a wider heading, freeing a row for the data. */
  .business-impact .section-heading br { display:none; }
  .business-impact .section-heading em { display:inline-block; margin-inline-start:.25em; }
}
@media (max-width:700px) {
  .business-impact .section-top { margin-bottom:6px; }
  :root[data-device] .business-impact .section-heading h2 { font-size:clamp(26px, 5.8vw, 34px); }
  .build-services .service-note { font-size:13px; }
  .business-impact-cards { grid-template-columns:minmax(0,1fr); }
  .business-impact-perspectives .value-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .business-impact-card { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:10px 16px; }
  /* Keep the title and centered arrow together across the full card width. */
  .business-impact-card h3 { grid-column:1 / -1; min-height:0; }
  .business-impact-workload { grid-column:1; }
  .business-impact-number { grid-column:2; grid-row:2; }
  .business-impact-number strong { font-size:36px; }
  .business-impact-comparison { grid-column:1 / -1; margin:0; }
  .business-impact-comparison > div { gap:4px; padding:8px; }
  .business-impact-comparison dd { gap:2px 4px; }
  .business-impact-totals { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
  .business-impact-totals > div:first-child { grid-column:1 / -1; text-align:center; }
  .business-impact-totals .value-stat strong { font-size:clamp(20px, 5.8vw, 28px); }
  .business-impact-totals .value-stat span { font-size:13px; }
}
@media (max-width:360px) {
  /* Russian compact currency includes «тыс.», so reserve more room for it. */
  :root[lang="ru"] .business-impact-totals { grid-template-columns:1fr 1fr 1.4fr; }
}
@media (max-width:540px) {
  .service-window-intro.has-illustration { grid-template-columns:minmax(0,1fr) 82px; gap:12px; }
  .service-window-intro .page-illustration { height:82px; }
  :root[data-device] .service-window-intro .window-intro { font-size:24px; overflow-wrap:break-word; }
  .value-stat { padding-inline:10px; }
  .value-hosting { grid-template-columns:1fr; }
  .service-window .value-tabs { gap:4px 16px; }
  .service-window .value-tabs button { font-size:13px; }
  .service-window-scroll > .window-content { padding-block:20px; }
  .service-window .service-window-footer { padding-block:6px; }
}
/* Larger displays enlarge the estimates, labels and controls together. */
@media (min-width:1360px) and (min-height:850px) {
  :root[data-device] .build-services.business-impact {
    --business-impact-gap:calc(18 * var(--reading-unit));
    --business-impact-padding:calc(22 * var(--reading-unit));
    padding-inline:max(var(--layout-gutter), calc((100% - 1400 * var(--reading-unit)) / 2));
  }
  :root[data-device] .business-impact .section-heading h2 { font-size:calc(52 * var(--reading-unit)); }
  :root[data-device] .business-impact .business-impact-cards h3 { font-size:calc(26 * var(--reading-unit)); }
  .build-services .service-note, .business-impact-number > span, .business-impact .business-impact-workload,
  .business-impact-totals p, .business-impact-totals .value-stat span { font-size:calc(16 * var(--reading-unit)); }
  .business-impact-layout { grid-template-columns:minmax(0,1fr) calc(176 * var(--reading-unit)); }
  .business-impact-perspectives { gap:calc(12 * var(--reading-unit)); }
  .business-impact-perspectives > span, .business-impact-comparison dt { font-size:calc(14 * var(--reading-unit)); }
  .business-impact-perspectives .value-tabs button { font-size:calc(16 * var(--reading-unit)); padding:calc(12 * var(--reading-unit)); min-height:calc(48 * var(--reading-unit)); }
  .business-impact-number { gap:calc(14 * var(--reading-unit)); }
  .business-impact-number strong { font-size:calc(56 * var(--reading-unit)); }
  .business-impact-comparison { gap:calc(10 * var(--reading-unit)); }
  .business-impact-comparison > div { gap:calc(8 * var(--reading-unit)); padding:calc(12 * var(--reading-unit)); }
  .business-impact-comparison strong { font-size:calc(26 * var(--reading-unit)); }
  .business-impact-comparison dd span, .business-impact-totals .value-stat small { font-size:calc(13 * var(--reading-unit)); }
  .business-impact .business-impact-totals h3 { font-size:calc(22 * var(--reading-unit)); }
  .business-impact-totals .value-stat strong { font-size:calc(38 * var(--reading-unit)); }
}

:root .page-illustration {
  --art-mint: var(--mint);
  --art-mint-shade: #0e8467;
  --art-mint-light: #7bd7c0;
  --art-brand-spark: var(--flash);
  --art-sand: #cdc39b;
  --art-sand-shade: #918969;
}
:root .page-illustration[data-page-art="uncorked"] {
  --art-mint: #5aa18b;
  --art-mint-light: #94bdaa;
  --art-mint-shade: #346a59;
  --art-paper: #bbc1b3;
  --art-paper-shade: #879487;
  --art-sand: #baa67b;
  --art-sand-shade: #83744b;
  --art-leaf-shade: #478572;
  --art-brand-spark: var(--art-sand);
}
:root .page-illustration[data-page-art="lighter"] {
  --art-mint: #5aa18b;
  --art-mint-light: #94bdaa;
  --art-mint-shade: #346a59;
  --art-paper: #bbc1b3;
  --art-paper-shade: #879487;
  --art-sand: #baa67b;
  --art-sand-shade: #83744b;
  --art-leaf-shade: #478572;
  --art-brand-spark: var(--art-sand);
}
:root[data-theme="light"] .page-illustration {
  --art-mint: var(--mint);
  --art-mint-shade: #10544a;
  --art-mint-light: #7db2aa;
  --art-brand-spark: var(--flash);
  --art-sand: #c9a261;
  --art-sand-shade: #8d6f3c;
}
:root[data-theme="light"] .page-illustration[data-page-art="uncorked"] {
  --art-mint: #54917e;
  --art-mint-light: #9bbeac;
  --art-mint-shade: #366b5c;
  --art-paper: #d9dfd4;
  --art-paper-shade: #a7b6aa;
  --art-sand: #b79f72;
  --art-sand-shade: #887448;
  --art-leaf-shade: #457e6d;
  --art-brand-spark: var(--art-sand);
}
:root[data-theme="light"] .page-illustration[data-page-art="lighter"] {
  --art-mint: #54917e;
  --art-mint-light: #9bbeac;
  --art-mint-shade: #366b5c;
  --art-paper: #d9dfd4;
  --art-paper-shade: #a7b6aa;
  --art-sand: #b79f72;
  --art-sand-shade: #887448;
  --art-leaf-shade: #457e6d;
  --art-brand-spark: var(--art-sand);
}
/* Reviewed heading artwork: the copy sets the height, so art adds no extra row. */
:root[data-device] .build-services .illustrated-heading {
  display: grid; grid-template-columns: minmax(0, max-content) clamp(160px, 21vw, 270px);
  align-items: center; gap: clamp(28px, 4vw, 56px); width: fit-content; max-width: 100%; min-width: 0;
  margin-inline: auto; margin-bottom: clamp(8px, 1.4svh, 14px); text-align: center; flex: none;
}
.illustrated-copy { display: block; min-width: 0; }
:root[data-device] .build-services .illustrated-heading :is(.section-top, .section-heading, .eyebrow) {
  justify-content: center; text-align: center;
}
:root[data-device] .build-services .illustrated-heading h2 { text-align: center; }
:root[data-device] .build-services .illustrated-heading .service-note {
  text-align: center; margin-inline: auto; max-width: 50ch;
}
.page-illustration {
  --page-particle-length: 40px; --page-particle-width: 1.8px;
  display: block; position: relative; align-self: stretch; justify-self: end;
  width: min(100%, 270px); min-width: 0; margin: 0; pointer-events: none;
}
.page-illustration svg {
  position: absolute; inset: 0; margin: auto; display: block;
  width: 100%; height: 100%; max-height: 150px; overflow: visible;
}
/* Business Impact: approved sea-glass shell, ivory pearl and warm sparkle. */
:root .page-illustration[data-page-art="lighter"] {
  --impact-shell-edge: #376b5b;
  --impact-shell-rim: #78b49e;
  --impact-shell-inner: #659184;
  --impact-grooves: #2f5b4e;
  --impact-nacre: #c8d6ca;
  --impact-pearl-highlight: #f1f2e7;
  --impact-pearl-body: #d9dfcf;
  --impact-pearl-edge: #85ad99;
  --impact-accent: #c6c5a5;
  --impact-water: #5b9d89;
  --impact-shadow: #111b17;
}
:root[data-theme="light"] .page-illustration[data-page-art="lighter"] {
  --impact-shell-edge: #365f55;
  --impact-shell-rim: #528b7c;
  --impact-shell-inner: #83ad9e;
  --impact-grooves: #396b5b;
  --impact-nacre: #dce6db;
  --impact-pearl-highlight: #fffef4;
  --impact-pearl-body: #eaf0df;
  --impact-pearl-edge: #a4beaa;
  --impact-accent: #a19461;
  --impact-water: #508a78;
  --impact-shadow: #657e73;
}

/* The approved pearl keeps its natural proportions beside the heading. */
.page-illustration[data-page-art="lighter"] svg { max-height: 166px; }
.page-illustration[data-page-art="connected"] svg { scale: 1.18; }
/* Center the pipeline on the heading and supporting copy below the label. */
:root[data-device] #expertise .illustrated-heading { row-gap: 0; }
#expertise .illustrated-heading > .section-top { grid-column: 1; grid-row: 1; }
#expertise .illustrated-copy { grid-column: 1; grid-row: 2; }
#expertise .page-illustration { grid-column: 2; grid-row: 2; }
#expertise .page-illustration svg {
  top: 50%; bottom: auto; translate: 0 -50%; height: 150px;
}
/* Match the benefit icons' soft mint wash, with lighter shadows in light mode. */
.page-illustration-shadow { filter: blur(3px); }
:root[data-theme="light"] .page-illustration-shadow { opacity: .65; }
/* Solutions: the two currents share the workflow's paired-line finish. */
.solutions-current-main, .solutions-current-companion {
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.solutions-current-main { stroke: color-mix(in srgb, var(--mint) 58%, var(--muted)); stroke-width: 1.3; }
.solutions-current-companion { stroke: var(--mint); stroke-width: 1; stroke-opacity: .3; }
/* Illustration motion stays within the existing footprint. */
.business-impact-ripples { transform-origin: 170px 180px; }
.business-impact-spark { opacity: .85; }
.solutions-cork-motion { transform-box: fill-box; transform-origin: center; }
.solutions-current-pulse {
  --particle-dash: var(--page-particle-length);
  fill: none; stroke: color-mix(in srgb, var(--mint) 24%, var(--text));
  stroke-width: var(--page-particle-width); stroke-linecap: round;
  stroke-dasharray: var(--particle-dash) calc(500px - var(--particle-dash)); opacity: 0;
}
/* Compensate for the second current's shorter path without changing its spacing. */
.solutions-current:nth-of-type(2) .solutions-current-pulse { --particle-dash: calc(var(--page-particle-length) * 1.104); }
:root[data-theme="light"] .solutions-current-pulse { stroke: var(--mint); }
@media (prefers-reduced-motion: no-preference) {
  .page-illustration[data-motion-active="true"] { --page-art-play-state: running; }
  .business-impact-ripples { animation: page-art-ripple 6s ease-in-out infinite; }
  .business-impact-glow { animation: page-art-pearl-glow 5s ease-in-out infinite; }
  .business-impact-bubbles { animation: page-art-bubbles 7s ease-in-out infinite; }
  .solutions-cork-motion { animation: page-art-cork 4.2s ease-in-out -1s infinite; }
  .page-illustration[data-page-art="uncorked"] [data-illustration-icon] { animation: page-art-tool-float 3.6s ease-in-out -.6s infinite; }
  .page-illustration[data-page-art="uncorked"] [data-illustration-icon="operations"] { animation-delay: -1.8s; }
  .page-illustration[data-page-art="uncorked"] [data-illustration-icon="finance"] { animation-delay: -3s; }
  .solutions-current-pulse { animation: page-art-current 3.8s linear -1s infinite; }
  .solutions-current:nth-of-type(2) .solutions-current-pulse { animation-duration: 4.4s; animation-delay: -2.2s; }
  .page-illustration[data-page-art] :is(.business-impact-ripples, .business-impact-glow, .business-impact-bubbles, .solutions-cork-motion, [data-illustration-icon], .solutions-current-pulse) {
    animation-play-state: var(--page-art-play-state, paused);
  }
}
@keyframes page-art-ripple {
  0%, 100% { transform: scale(.96); opacity: .65; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes page-art-pearl-glow {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
@keyframes page-art-bubbles {
  0%, 100% { transform: translateY(2px); opacity: .35; }
  50% { transform: translateY(-3px); opacity: .6; }
}
@keyframes page-art-cork {
  0%, 100% { transform: translateY(1px) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(3deg); }
}
@keyframes page-art-tool-float {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-6px); }
}
@keyframes page-art-current {
  from { stroke-dashoffset: 0; opacity: .95; }
  to { stroke-dashoffset: -1000; opacity: .95; }
}
@media (max-width: 700px) {
  /* Keep the moving particles visible when this SVG is about 90px wide. */
  .page-illustration { --page-particle-length: 48px; --page-particle-width: 3px; }
  :root[data-device] .build-services .illustrated-heading {
    grid-template-columns: minmax(0, 1fr) minmax(72px, 25%); width: 100%; gap: 16px; margin-bottom: 12px;
  }
  .page-illustration { width: 100%; }
  .page-illustration svg { max-height: 104px; }
  .page-illustration[data-page-art="lighter"] svg { scale: 1.1; max-height: 110px; }
  :root[data-device] .build-services.service-overview .illustrated-heading .section-heading h2 { font-size: clamp(24px, 5.8vw, 30px); }
  :root[data-device] .build-services .illustrated-heading .service-note { font-size: 13px; line-height: 1.4; }
}
@media (max-height: 650px) {
  :root[data-device] .build-services .illustrated-heading { margin-bottom: 8px; }
  .page-illustration svg, .page-illustration[data-page-art="lighter"] svg { max-height: 112px; }
}

/* F — Teal ground, passing rings, from alternatives/pipeline-twins.
   Original graphite/porcelain materials, teal ground and passing hover effects. */
.expertise-f-svg {
  --f-lit: color-mix(in srgb, var(--surface-active) 74%, var(--muted));
  --f-face: color-mix(in srgb, var(--surface-active) 92%, var(--muted));
  --f-shade: color-mix(in srgb, var(--surface-active) 30%, var(--surface));
  --f-edge: color-mix(in srgb, var(--line) 86%, var(--muted));
  --f-accent: color-mix(in srgb, var(--mint) 82%, var(--f-face));
  --f-track: var(--swatch-sage-573);
  --f-shadow: var(--swatch-fixed-black);
  --expertise-f-top-highlight: var(--f-lit); --expertise-f-top-shade: var(--f-face);
  --expertise-f-side-highlight: var(--f-face); --expertise-f-side-shade: var(--f-shade);
  --expertise-f-current: color-mix(in srgb, var(--mint) 58%, var(--muted));
  --expertise-f-particle: color-mix(in srgb, var(--mint) 24%, var(--text));
}
:root[data-theme="light"] .expertise-f-svg {
  --f-lit: color-mix(in srgb, var(--swatch-fixed-white) 88%, var(--surface));
  --f-face: color-mix(in srgb, var(--swatch-fixed-white) 45%, var(--surface));
  --f-shade: color-mix(in srgb, var(--surface) 70%, var(--line));
  --f-edge: color-mix(in srgb, var(--line) 85%, var(--muted));
  --f-accent: color-mix(in srgb, var(--mint) 85%, var(--f-face));
  --f-track: var(--swatch-sage-543); --f-shadow: var(--swatch-sage-720);
  --expertise-f-particle: color-mix(in srgb, var(--mint) 45%, var(--text));
}
.expertise-f-station { fill: none; stroke: var(--f-edge); stroke-width: .85; stroke-linecap: round; stroke-linejoin: round; }
.expertise-f-art { transition: translate .2s ease; }
.expertise-f-station[data-active="true"] .expertise-f-art { translate: 0 -3px; }
.expertise-f-hit { fill: transparent; stroke: none; pointer-events: all; }
.expertise-f-art { pointer-events: none; }
.expertise-f-icon-contact { fill: var(--f-shadow); opacity: .12; stroke: none; filter: blur(2px); }
.expertise-f-icon-side { fill: url(#expertise-f-icon-side-shade); }
.expertise-f-icon-top, .expertise-f-icon-accent-top { fill: url(#expertise-f-icon-surface-shade); }
.expertise-f-icon-accent-side { fill: var(--f-accent); }
.expertise-f-icon-card, .expertise-f-icon-lens { fill: var(--f-lit); }
.expertise-f-icon-track { fill: none; stroke: var(--f-track); }
.expertise-f-icon-crm-heading, .expertise-f-icon-data-port, .expertise-f-icon-chart { stroke: var(--flash); }
.expertise-f-icon-data-port { stroke-width: 2.5; }
.expertise-f-icon-chart { fill: none; stroke-width: 2; }
.expertise-f-icon-face, .expertise-f-icon-lens-rim { fill: var(--f-shade); }
.expertise-f-icon-crm-card, .expertise-f-icon-lens-handle { fill: var(--flash); }
.expertise-f-icon-eye, .expertise-f-icon-spark { fill: var(--flash); stroke: none; }
.expertise-f-icon-antenna-tip { fill: var(--mint); }
:root[data-theme="light"] .expertise-f-icon-face { fill: var(--f-accent); }
:root[data-theme="light"] .expertise-f-icon-eye { fill: var(--swatch-olive-018); }
:root[data-theme="light"] .expertise-f-icon-antenna-tip { fill: var(--flash); }
.expertise-f-current-line { stroke: var(--expertise-f-current); stroke-width: 1.3; }
.expertise-f-companion { stroke: var(--mint); stroke-width: 1; stroke-opacity: .3; }
.expertise-f-shadow { fill: url(#expertise-f-shadow-wash); filter: blur(1px); }
.expertise-f-glow { fill: url(#expertise-f-ground-glow); }
:root[data-theme="light"] .expertise-f-shadow { opacity: .6; }
:root[data-theme="light"] .expertise-f-glow { opacity: .65; }
.expertise-f-arrival-glow { fill: url(#expertise-f-shadow-arrival); opacity: 0; transition: opacity .3s ease; }
.expertise-f-rings { opacity: 0; transition: opacity .12s ease-out; }
.expertise-f-floor[data-passing="true"] .expertise-f-rings { opacity: 1; }
.expertise-f-floor[data-arrived="true"] .expertise-f-arrival-glow { opacity: 1; }
.expertise-f-ring, .expertise-f-ring-echo, .expertise-f-ripple { fill: none; }
.expertise-f-ring { stroke-width: 1.3; }
.expertise-f-ring-echo { stroke: var(--mint); stroke-width: 1; stroke-opacity: .3; }
.expertise-f-ripple { stroke: var(--mint); stroke-width: 1.2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.expertise-f-floor[data-arrived="true"] .expertise-f-ripple { animation: expertise-f-arrival 1.1s cubic-bezier(.2,.6,.3,1) both; }
.expertise-f-floor[data-arrived="true"] .expertise-f-ring { stroke: var(--mint); stroke-opacity: .7; }
.expertise-f-station[data-arrived="true"] :is(.expertise-f-icon-accent-side, .expertise-f-icon-data-port, .expertise-f-icon-eye) { filter: drop-shadow(0 0 3px var(--mint)); }
.expertise-f-pulse {
  /* Match Solutions' visible particle size across the longer, slightly smaller-scaled path. */
  --particle-dash: calc(var(--page-particle-length) * .67);
  stroke: var(--expertise-f-particle); stroke-width: calc(var(--page-particle-width) * 1.04);
  /* One travelling pulse activates the stations in sequence. */
  stroke-dasharray: var(--particle-dash) calc(1000px - var(--particle-dash));
  opacity: 0; filter: drop-shadow(0 0 .6px color-mix(in srgb, var(--mint) 30%, transparent));
}
@keyframes expertise-f-drift { from { stroke-dashoffset: 0; opacity: 1; } to { stroke-dashoffset: -1000; opacity: 1; } }
@keyframes expertise-f-arrival { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.16); } }
@media (prefers-reduced-motion: no-preference) {
  .expertise-f-pulse {
    animation: expertise-f-drift 4s linear infinite;
    animation-play-state: var(--expertise-f-play-state, paused);
  }
  .expertise-f-svg[data-visible="true"] { --expertise-f-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
  .expertise-f-art, .expertise-f-arrival-glow, .expertise-f-rings { transition: none; }
  .expertise-f-station[data-active="true"] .expertise-f-art { translate: none; }
  .expertise-f-floor[data-arrived="true"] .expertise-f-ripple { animation: none; }
}