/* Solutions page */
.sol-page { --sol-line: var(--rule); }
.sol-page .sol-ic { flex: none; }
.sol-page h2 { color: var(--ink); text-wrap: balance; }
.sol-page h2 em { color: var(--green-700); font-style: normal; }

/* Hero: uses the home page hero styles from site.css, so type, size and position match. */

/* ── Facts strip ──────────────────────────────────────────────────────── */
.sol-facts { background: var(--paper); border-bottom: 1px solid var(--sol-line); }
.sol-facts__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sol-facts__list li { display: flex; flex-direction: column; gap: .35rem; padding: clamp(22px, 2.6vw, 36px) clamp(14px, 2vw, 28px); border-inline-start: 1px solid var(--sol-line); }
.sol-facts__list li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.sol-facts__list strong { display: flex; align-items: baseline; gap: .35rem; color: var(--ink); font-family: var(--f-head); font-size: clamp(1.5rem, 2.4vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.sol-facts__list small { color: var(--green-700); font-size: .5em; font-weight: 700; letter-spacing: .02em; }
.sol-facts__list span { color: var(--ink-3); font-size: .9375rem; line-height: 1.45; }

/* ── Sticky index ─────────────────────────────────────────────────────── */
.sol-index { position: sticky; top: calc(var(--header-h) - 1px); z-index: 20; background: rgba(255,255,255,.94); border-bottom: 1px solid var(--sol-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sol-index__inner { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.sol-index__inner::-webkit-scrollbar { display: none; }
.sol-index a { display: inline-flex; align-items: center; gap: .55rem; flex: none; padding: 1rem 1rem; border-bottom: 2px solid transparent; color: var(--ink-3); font-family: var(--f-head); font-size: .9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color .25s, border-color .25s; }
.sol-index a span { color: var(--green-600); font-size: .75rem; font-weight: 700; }
.sol-index a:hover { color: var(--ink); }
.sol-index a.is-active { border-bottom-color: var(--green-600); color: var(--ink); }

/* ── Chapters: title | photo | copy, in one row ───────────────────────── */
.sol-chapter { padding: clamp(64px, 7vw, 112px) 0; overflow-x: clip; background: var(--paper); border-top: 1px solid var(--sol-line); }
.sol-chapter__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "title media copy"; align-items: stretch; gap: clamp(24px, 3.4vw, 64px); }
.sol-chapter__title { grid-area: title; }
.sol-chapter__media { grid-area: media; }
.sol-chapter__copy { grid-area: copy; }
.sol-chapter__title, .sol-chapter__copy { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; min-width: 0; }

.sol-chapter__title .eyebrow { margin-bottom: 1rem; }
.sol-chapter__title h2 { margin: 0; font-size: clamp(1.9rem, 2.7vw, 2.9rem); line-height: 1.06; letter-spacing: -.025em; }
.sol-chapter__label { display: block; margin-bottom: .6rem; color: var(--green-700); font-family: var(--f-head); font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.sol-chapter__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sol-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem 1rem; border: 1px solid var(--sol-line); border-radius: 99px; background: var(--paper); color: var(--ink); font-family: var(--f-head); font-size: .9375rem; font-weight: 600; text-decoration: none; transition: border-color .25s, background-color .25s, color .25s; }
.sol-chip:hover { border-color: var(--green-600); background: var(--green-tint); color: var(--green-700); }

.sol-chapter__media { position: relative; min-height: 360px; }
.sol-chapter__frame { position: absolute; inset: 0; overflow: hidden; background: var(--stone-2); }
.sol-chapter__frame img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: var(--pos, 50% 50%); will-change: transform; transition: scale .8s var(--ease); }
.sol-chapter__media:hover .sol-chapter__frame img { scale: 1.04; }

.sol-chapter__body p { max-width: 32rem; margin: 0 0 1rem; color: var(--ink-2); font-size: 1rem; line-height: 1.65; }
.sol-chapter__body p:last-child { margin-bottom: 0; }
.sol-chapter__body .sol-chapter__tag { margin-top: 1.25rem; padding-inline-start: .9rem; border-inline-start: 3px solid var(--green); color: var(--ink); font-family: var(--f-head); font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.sol-chapter__more { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.sol-chapter__facts { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.sol-chapter__facts li { display: flex; align-items: flex-start; gap: .65rem; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.sol-chapter__facts li::before { width: 6px; height: 6px; margin-top: .55em; border-radius: 50%; background: var(--green); flex: none; content: ""; }
.sol-chapter__go { display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: var(--green-600); color: #fff; transition: background-color .25s, transform .35s var(--ease); }
.sol-chapter__go svg { transform: scaleX(var(--flip)); transition: transform .35s var(--ease); }
.sol-chapter__go:hover { background: var(--green-700); color: #fff; }
.sol-chapter__go:hover svg { transform: scaleX(var(--flip)) translateX(3px); }

/* Photos slide in from alternating sides; text fades up */
.js .sol-chapter__media.reveal { opacity: 0; transform: translateX(-120px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); }
.js .sol-chapter--flip .sol-chapter__media.reveal { transform: translateX(120px); }
.js .sol-chapter .sol-chapter__media.reveal.is-visible { opacity: 1; transform: none; }
.sol-chapter__copy.reveal { transition-delay: .12s; }

/* ── Shared section head ──────────────────────────────────────────────── */
.sol-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: clamp(32px, 4vw, 56px); }
.sol-head h2 { max-width: 14ch; margin: 0; font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.75rem); line-height: 1.04; letter-spacing: -.025em; }
.sol-head > p { max-width: 430px; margin: 0 0 4px; color: var(--ink-3); font-size: 1rem; line-height: 1.6; }
.sol-flow .sol-head h2 { max-width: none; }
.sol-head--light h2 { color: #fff; }
.sol-head--light h2 em { color: #9fd4a9; }
.sol-head--light > p { color: rgba(255,255,255,.72); }

/* ── Fixed sites ──────────────────────────────────────────────────────── */
.sol-fixed .sol-head h2 { max-width: none; }
.sol-fixed__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); }
.sol-fixed__item { min-width: 0; }
.sol-fixed__img { aspect-ratio: 3 / 2; margin: 0 0 1.5rem; overflow: hidden; background: var(--stone-2); }
.sol-fixed__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.sol-fixed__item:hover .sol-fixed__img img { transform: scale(1.03); }
.sol-fixed__kicker { margin: 0 0 .5rem; color: var(--ink-3); font-size: .9375rem; }
.sol-fixed__item h3 { margin: 0 0 .85rem; font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.12; letter-spacing: -.02em; }
.sol-fixed__item > p:not([class]) { max-width: 36rem; margin: 0 0 1.25rem; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.7; }
.sol-fixed__links { display: flex; gap: 1.5rem; margin: 0; }
.sol-fixed__links a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color .2s, text-underline-offset .2s; }
.sol-fixed__links a:hover { color: var(--green-700); text-underline-offset: 3px; }

/* ── Deployment: three stops along one road ───────────────────────────── */
.sol-modes { position: relative; isolation: isolate; padding: var(--section) 0; overflow-x: clip; background: var(--paper); }
.sol-modes::before { position: absolute; z-index: -1; inset: 0; background-image: radial-gradient(rgba(17,24,20,.14) 1px, transparent 1.2px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%); content: ""; pointer-events: none; }
.sol-modes .sol-head h2 { max-width: none; }
.sol-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 56px); margin: clamp(8px, 2vw, 24px) 0 0; padding: 0; list-style: none; }
.sol-stop { position: relative; min-width: 0; }
.sol-stop__num { position: absolute; z-index: 0; top: -.15em; inset-inline-start: 0; color: transparent; font-family: var(--f-head); font-size: clamp(4.5rem, 8vw, 8rem); font-weight: 600; line-height: 1; letter-spacing: -.04em; -webkit-text-stroke: 1.2px rgba(17,24,20,.3); transition: -webkit-text-stroke-color .4s var(--ease); }
.sol-stop:hover .sol-stop__num { -webkit-text-stroke-color: var(--green-600); }
.sol-scene { position: relative; z-index: 1; display: block; width: 100%; height: auto; overflow: visible; }
.sol-scene * { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sol-scene .fill-paper { fill: var(--paper); }
.sol-scene .fill-stone { fill: var(--stone); }
.sol-scene .g { stroke: var(--green-600); }
.sol-scene .sol-txt, .sol-scene .sd-txt { fill: var(--ink); stroke: none; font-family: var(--f-head); font-weight: 600; }
.sol-scene .sol-road { stroke: var(--ink); stroke-width: 1.6; }
.sol-scene .sol-tick { stroke: var(--green-600); }
.sol-scene .sol-stopdot { fill: var(--paper); stroke: var(--green-600); stroke-width: 2; transition: fill .3s; }
.sol-stop:hover .sol-stopdot { fill: var(--green-600); }
.sol-scene .sd-pin path.g { fill: var(--green-tint); }
.sol-scene .sd-ripple { stroke: var(--green-600); opacity: 0; }

.sol-stop__text { margin-top: 1.25rem; padding-inline: .1rem; }
.sol-stop__tag { display: inline-block; margin-bottom: .75rem; padding: .3rem .75rem; border: 1px solid var(--green-600); border-radius: 99px; color: var(--green-700); font-family: var(--f-head); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sol-stop__text h3 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: 1.08; letter-spacing: -.02em; transition: color .3s; }
.sol-stop:hover .sol-stop__text h3 { color: var(--green-700); }
.sol-stop__text p { max-width: 24rem; margin: 0; color: var(--ink-2); font-size: 1.0625rem; line-height: 1.6; }

/* A little life in each scene */
.sol-scene .sd-pin { transform-box: fill-box; transform-origin: 50% 100%; animation: sol-float 2.6s ease-in-out infinite; }
.sol-scene .sd-ripple { transform-box: fill-box; transform-origin: center; animation: sol-ripple 2.6s ease-out infinite; }
.sol-scene .sd-drive { animation: sol-drive 3.2s ease-in-out infinite; }
.sol-scene .sd-wheel { transform-box: fill-box; transform-origin: center; animation: sol-spin 1.1s linear infinite; }
.sol-scene .sd-wheel--slow { animation-duration: 2.6s; }
.sol-scene .sd-speed { stroke-dasharray: 6 8; animation: sol-speed 1.1s linear infinite; }
.sol-scene .sd-bolt { animation: sol-bolt 1.8s ease-in-out infinite; }
.sol-scene .sd-nudge { animation: sol-nudge 3.4s ease-in-out infinite; }
@keyframes sol-float { 50% { transform: translateY(-9px); } }
@keyframes sol-ripple { 0% { opacity: .85; transform: scale(.35); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes sol-drive { 50% { transform: translateX(10px); } }
@keyframes sol-spin { to { transform: rotate(360deg); } }
@keyframes sol-speed { to { stroke-dashoffset: -28; } }
@keyframes sol-bolt { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes sol-nudge { 50% { transform: translateX(9px); } }

/* ── Flow diagram ─────────────────────────────────────────────────────── */
.sol-flow { background: var(--paper); }
.sol-flow__stage { display: grid; grid-template-columns: minmax(0, 1fr) clamp(56px, 9vw, 140px) minmax(220px, .8fr) clamp(56px, 9vw, 140px) minmax(0, 1fr); align-items: stretch; }
.sol-flow__col { display: grid; grid-auto-rows: 1fr; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sol-flow__col--in { grid-template-rows: repeat(4, 1fr); }
.sol-flow__col--out { grid-template-rows: repeat(3, 1fr); }
.sol-flow__lines { width: 100%; height: 100%; min-height: 100%; overflow: visible; }
.sol-flow__lines path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 7 7; animation: sol-flow 1.1s linear infinite; }
.sol-flow__lines .dc, .sol-legend .dc { stroke: var(--green-600); }
.sol-flow__lines .ac, .sol-legend .ac { stroke: var(--ink); }
@keyframes sol-flow { to { stroke-dashoffset: -14; } }

.sol-node { display: flex; align-items: center; gap: .9rem; padding: 14px 18px; border: 1px solid var(--sol-line); border-inline-start: 3px solid var(--ink); background: var(--stone); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.sol-node--dc { border-inline-start-color: var(--green-600); }
.sol-node:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(17,24,20,.08); }
.sol-node__icon { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--paper); color: var(--green-700); box-shadow: inset 0 0 0 1px var(--sol-line); }
.sol-node strong { display: block; color: var(--ink); font-family: var(--f-head); font-size: 1.0625rem; font-weight: 600; line-height: 1.2; }
.sol-node small { display: block; margin-top: .15rem; color: var(--ink-3); font-size: .875rem; line-height: 1.35; }

.sol-core { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 24px 18px 20px; border: 1px solid var(--green-600); background: var(--paper); text-align: center; box-shadow: 0 0 0 8px var(--green-tint); }
.sol-core__unit { width: min(220px, 100%); aspect-ratio: 1; display: grid; place-items: center; margin-bottom: .5rem; border-radius: 50%; background: var(--stone); }
.sol-core__unit img { width: 82%; height: auto; object-fit: contain; }
.sol-core strong { color: var(--ink); font-family: var(--f-head); font-size: 1.15rem; font-weight: 600; line-height: 1.2; }
.sol-core small { color: var(--ink-3); font-size: .9rem; }
.sol-core__link { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .85rem; padding: .55rem .8rem; border: 1px dashed var(--green-600); border-radius: 99px; color: var(--green-700); font-size: .8125rem; font-weight: 600; line-height: 1.3; }

.sol-legend { display: flex; justify-content: center; gap: 1.75rem; flex-wrap: wrap; margin: clamp(28px, 3vw, 44px) 0 0; padding: 0; list-style: none; color: var(--ink-3); font-size: .875rem; }
.sol-legend li { display: flex; align-items: center; gap: .6rem; }
.sol-legend i { display: block; width: 34px; border-top: 2px dashed currentColor; }
.sol-legend .dc { color: var(--green-600); }
.sol-legend .ac { color: var(--ink); }
.sol-legend .net { color: var(--green); border-top-style: dotted; }

/* ── Chargeable models marquee ────────────────────────────────────────── */
.sol-models { padding: clamp(36px, 4vw, 56px) 0; overflow: hidden; background: var(--stone); border-block: 1px solid var(--sol-line); }
.sol-models__label { margin: 0 0 .9rem; padding-inline: var(--gutter); color: var(--green-700); font-family: var(--f-head); font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.sol-models__track { display: flex; width: max-content; animation: sol-marquee 48s linear infinite; }
.sol-models__track ul { display: flex; flex: none; margin: 0; padding: 0; list-style: none; }
.sol-models__track li { display: flex; align-items: center; color: var(--ink); font-family: var(--f-head); font-size: clamp(2.75rem, 7vw, 6.5rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; white-space: nowrap; }
.sol-models__track li:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.sol-models__track li::after { width: .22em; height: .22em; margin-inline: .45em; border-radius: 50%; background: var(--green); flex: none; content: ""; }
.sol-models:hover .sol-models__track { animation-play-state: paused; }
@keyframes sol-marquee { to { transform: translateX(-50%); } }

/* ── Comparison table ─────────────────────────────────────────────────── */

/* ── Which system fits: three spec sheets ─────────────────────────────── */
.sol-compare { background: var(--paper); }
.sol-sheets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.sol-sheet { display: flex; flex-direction: column; min-width: 0; padding: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 40px) 0; }
.sol-sheet + .sol-sheet { border-inline-start: 1px solid var(--sol-line); }
.sol-sheet:first-child { padding-inline-start: 0; }
.sol-sheet:last-child { padding-inline-end: 0; }
.sol-sheet__img { display: grid; place-items: center; aspect-ratio: 4 / 3; margin-bottom: 1.5rem; background: var(--stone); }
.sol-sheet__img img { width: 70%; height: 80%; object-fit: contain; transition: transform .5s var(--ease); }
.sol-sheet:hover .sol-sheet__img img { transform: translateY(-4px); }
.sol-sheet h3 { margin: 0; font-size: clamp(1.6rem, 2.3vw, 2.2rem); line-height: 1.05; letter-spacing: -.02em; }
.sol-sheet__type { margin: .35rem 0 1.5rem; color: var(--ink-3); font-size: 1rem; line-height: 1.45; }
.sol-sheet dl { margin: 0 0 1.75rem; }
.sol-sheet dl div { padding: .85rem 0; border-top: 1px solid var(--sol-line); }
.sol-sheet dt { margin-bottom: .2rem; color: var(--ink-3); font-size: .875rem; }
.sol-sheet dd { margin: 0; color: var(--ink); font-size: 1.0625rem; line-height: 1.45; }
.sol-sheet__link { align-self: flex-start; margin-top: auto; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 1.5px; text-underline-offset: 5px; transition: color .2s, text-underline-offset .2s; }
.sol-sheet__link:hover { color: var(--green-700); text-underline-offset: 3px; }
.sol-sheets__note { margin: clamp(28px, 3vw, 44px) 0 0; padding-top: 1.1rem; border-top: 1px solid var(--sol-line); color: var(--ink-3); font-size: .9875rem; }

@media (max-width: 900px) {
  .sol-sheets { grid-template-columns: minmax(0, 1fr); }
  .sol-sheet, .sol-sheet:first-child, .sol-sheet:last-child { padding: 28px 0 32px; }
  .sol-sheet + .sol-sheet { border-inline-start: 0; border-top: 1px solid var(--sol-line); }
  .sol-sheet__img { aspect-ratio: 16 / 9; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .sol-chapter__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media media" "title copy"; row-gap: 28px; }
  .sol-chapter__media { min-height: 0; aspect-ratio: 16 / 9; }
  .js .sol-chapter__media.reveal { transform: translateX(-56px); }
  .js .sol-chapter--flip .sol-chapter__media.reveal { transform: translateX(56px); }
}

@media (max-width: 760px) {
  .sol-chapter__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "media" "title" "copy"; }
  .sol-chapter__media { aspect-ratio: 4 / 3; }
}

@media (max-width: 1100px) {
  .sol-facts__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sol-facts__list li:nth-child(4) { padding-inline-start: 0; border-inline-start: 0; }
  .sol-facts__list li:nth-child(n+4) { border-top: 1px solid var(--sol-line); }
}

@media (max-width: 900px) {
  .sol-head { align-items: start; flex-direction: column; gap: 14px; }
  .sol-fixed__grid { grid-template-columns: 1fr; }
  .sol-route { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sol-stop__num { font-size: clamp(4rem, 16vw, 6rem); }

  .sol-flow__stage { grid-template-columns: 1fr; gap: 0; }
  .sol-flow__lines { display: none; }
  .sol-flow__col--in, .sol-flow__col--out { grid-template-rows: none; grid-auto-rows: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-flow__col--out { grid-template-columns: 1fr; }
  .sol-core { margin: 44px auto; max-width: 420px; width: 100%; position: relative; }
  .sol-core::before, .sol-core::after { position: absolute; inset-inline-start: 50%; width: 0; height: 28px; border-inline-start: 2px dashed var(--green-600); content: ""; }
  .sol-core::before { top: -36px; }
  .sol-core::after { bottom: -36px; }
}

@media (max-width: 620px) {
  .sol-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sol-facts__list li, .sol-facts__list li:nth-child(4) { padding-inline: 14px; border-inline-start: 1px solid var(--sol-line); }
  .sol-facts__list li:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
  .sol-facts__list li:nth-child(n+3) { border-top: 1px solid var(--sol-line); }
  .sol-facts__list li:last-child { grid-column: 1 / -1; padding-inline-start: 0; border-inline-start: 0; }
  .sol-flow__col--in { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .sol-flow__lines path, .sol-models__track, .sol-scene * { animation: none !important; }
  .sol-models__track { width: auto; flex-wrap: wrap; }
  .sol-models__track ul:nth-child(2) { display: none; }
  .sol-chapter__frame img, .sol-chapter__go, .sol-chapter__go svg, .sol-node { transition: none; }
  .sol-chapter__media:hover .sol-chapter__frame img, .sol-node:hover { transform: none; scale: 1; }
}