/* Service pages: /services and its four topics. Sits on story.css (.st) for paper, ink and buttons. */
.sp { --sp-white: #FFFFFF; }
.dark .sp { --sp-white: #1B1813; }

.sp-head { padding: clamp(1.5rem, 3vw, 2.5rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
.sp-body { background: var(--sp-white); padding: clamp(2.5rem, 5vw, 4.5rem) 0; }
/* main.css gives every last section a fixed bottom padding; these bands stay compact. */
main.sp > section:last-child { padding-bottom: clamp(2.5rem, 5vw, 4.5rem) !important; }

/* Tabs: shows the visitor at once that this page is one of four, and which one. */
.sp-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 2px solid var(--ink); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.sp-tabs a {
  display: flex; align-items: center; min-height: 44px; padding: .25rem .875rem;
  font-size: .9375rem; font-weight: 700; color: var(--ink-3); text-decoration: none;
  transition: color .15s;
}
.sp-tabs a:hover { color: var(--green); }
.sp-tabs a:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.sp-tabs a[aria-current] { color: var(--paper); background: var(--green); }
.dark .sp-tabs a[aria-current] { color: #0B1A10; }
@media (min-width: 560px) {
  .sp-tabs { display: flex; gap: clamp(.25rem, 1.5vw, 1rem); }
}

.sp-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 900px) { .sp-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.sp-h1 { font-size: clamp(2.25rem, 5.2vw, 4.25rem); font-weight: 900; line-height: 1.03; letter-spacing: -.03em; color: var(--ink); margin: 0 0 1.25rem; }
.sp-h1 em { display: block; font-style: normal; color: var(--green); }
.sp-h1--hub em { display: inline; }
.sp-h2 { font-size: clamp(1.625rem, 3vw, 2.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); margin: 0 0 1.5rem; }

/* The picture sits on a green block, offset, so the page has some depth. */
.sp-visual { position: relative; margin: 0 .625rem .625rem 0; aspect-ratio: 18 / 13; background: var(--sp-white); border: 2px solid var(--ink); box-shadow: .625rem .625rem 0 var(--green); }
.sp-visual--photo { overflow: hidden; }
.sp-visual--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; transform: scale(1.45); transform-origin: 88% 41%; }

.sp-svg { display: block; width: 100%; height: 100%; }
.sp-box { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.sp-box--main { fill: var(--green); stroke: var(--green); }
.sp-line { fill: none; stroke: var(--paper-3); stroke-width: 4; }
.sp-label { font: 800 16px var(--mono); fill: var(--ink); }
.sp-label--main { fill: #fff; font-size: 18px; }
.dark .sp-label--main { fill: #0B1A10; }
.sp-pipe { fill: var(--paper-2); }
.sp-screen { fill: var(--lcd); }
.sp-screen-text { font: 800 22px var(--mono); fill: var(--lcd-ink); letter-spacing: .08em; }
.sp-drop { fill: var(--green); }

/* Moving dots: power reaching each house, water along the pipe. */
.sp-dot, .sp-flow { fill: var(--green); animation: sp-travel 3s linear infinite; }
.sp-dot--a { offset-path: path('M180 76V124H60V176'); }
.sp-dot--b { offset-path: path('M180 76V176'); animation-duration: 2s; }
.sp-dot--c { offset-path: path('M180 76V124H300V176'); }
.sp-flow { offset-path: path('M0 172H360'); offset-rotate: 0deg; }
.sp-flow--b { animation-delay: -1s; }
.sp-flow--c { animation-delay: -2s; }
@keyframes sp-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .sp-dot, .sp-flow { display: none; } }

/* The statement slip reads like an M-PESA message. */
.sp-slip { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.25rem, 3vw, 2rem); font-family: var(--mono); aspect-ratio: auto; }
.sp-slip-head { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--green); margin: 0 0 1rem; }
.sp-slip dl { margin: 0; }
.sp-slip dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-top: 1px dashed var(--paper-3); }
.sp-slip dt { color: var(--ink-2); }
.sp-slip dd { margin: 0; font-weight: 800; color: var(--ink); white-space: nowrap; }
.sp-slip .sp-slip-total { border-top: 2px solid var(--ink); }
.sp-slip .sp-slip-total dd { color: var(--green); font-size: 1.25rem; }
.sp-slip figcaption { font-size: .8125rem; color: var(--ink-3); margin-top: .75rem; }

/* Rows, not cards: name, what it does, and the price if it has one. */
.sp-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.sp-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: .375rem; padding: 1.25rem 0; border-bottom: 1px solid var(--paper-3); }
.sp .sp-row h3 { font-size: 1.125rem !important; line-height: 1.3; font-weight: 800; color: var(--ink); margin: 0; }
.sp-row p { font-size: 1rem; line-height: 1.55; color: var(--ink-2); margin: 0; }
.sp-side strong { display: block; font-family: var(--mono); font-size: 1rem; color: var(--green); }
.sp-side span { display: block; font-size: .8125rem; color: var(--ink-3); }
@media (min-width: 768px) {
  .sp-row { grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: 2rem; align-items: baseline; }
  .sp-row--plain { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .sp-side { text-align: right; }
}
.sp-note { font-size: .9375rem; line-height: 1.6; color: var(--ink-3); max-width: 44rem; margin: 1.25rem 0 0; }
.sp-note a { display: inline-block; padding-block: .75rem; color: var(--green); font-weight: 700; }

/* /services: one big list, one link per need. */
.sp-h1--hub { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.sp-choices { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.sp-choices a {
  display: grid; grid-template-columns: minmax(0, 1fr) 22px; gap: .25rem 1rem; align-items: center;
  padding: 1.125rem 0; border-bottom: 1px solid var(--paper-3); color: var(--ink); text-decoration: none;
  transition: color .15s, padding-left .2s;
}
.sp-choices strong { font-size: clamp(1.25rem, 2.6vw, 1.875rem); font-weight: 800; letter-spacing: -.015em; }
.sp-choices strong { grid-column: 1; grid-row: 1; }
.sp-choices span { grid-column: 1; grid-row: 2; font-size: 1rem; line-height: 1.45; color: var(--ink-3); }
.sp-choices svg { grid-column: 2; grid-row: 1 / span 2; transition: transform .2s; }
.sp-choices a:hover, .sp-choices a:focus-visible { color: var(--green); }
.sp-choices a:hover svg, .sp-choices a:focus-visible svg { transform: translateX(6px); }
.sp-choices a:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
@media (min-width: 768px) {
  .sp-choices a { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) 22px; gap: 2rem; }
  .sp-choices span { grid-column: 2; grid-row: 1; }
  .sp-choices svg { grid-column: 3; grid-row: 1; }
}

.sp-help-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.5rem; }
.sp-help .sp-h2 { margin-bottom: .375rem; }
.sp-help p { font-size: 1rem; color: var(--ink-2); margin: 0; }