/* ==========================================================================
   solar.css: the four solar pages. Owner: solar agent.
   Tokens only (core.css). Logical properties only. One accent: line-solar.
   ========================================================================== */

/* ---------- shared ---------- */
.sol-sun { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.sol-cap { display: block; margin-block-start: 10px; color: var(--ink-3); font-size: .75rem; }
.sol-fig { margin: 0; }
.sol-fig__m { aspect-ratio: var(--ratio, 4 / 3); }
.sol-fig .media img { object-position: var(--pos, 50% 50%); }
.sol-draw { inline-size: 100%; block-size: auto; overflow: visible; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sol-draw .thin { stroke-width: 1; stroke: var(--ink-3); }
.sol-draw .dash { stroke-dasharray: 5 6; }
.sol-draw .acc { stroke: var(--accent); stroke-width: 2.4; }
.sol-draw .acc2 { stroke: var(--accent-2); }
.sol-draw text { fill: var(--ink-3); stroke: none; font: 500 13px var(--f-mono); }
.sol-draw .dots > * { fill: var(--accent); stroke: none; transition: opacity .5s var(--ease) .9s; }
/* line draw: hidden only once JS marks the page, visible without JS */
.js .sol-draw [pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease-io); }
.js .sol-draw .dash[pathLength] { stroke-dasharray: 1 1; }
.js .sol-draw.is-on [pathLength] { stroke-dashoffset: 0; }
.js .sol-draw:not(.is-on) .dots > * { opacity: 0; transition-delay: 0s; }
.js .sol-draw.is-on .dash[pathLength] { transition: stroke-dashoffset 1.3s var(--ease-io), stroke-dasharray 0s 1.3s; stroke-dasharray: .012 .016; }
html.reduced .sol-draw [pathLength] { stroke-dashoffset: 0 !important; transition: none !important; }

/* Arabic and Urdu join letters: a mono face with tracking breaks the joins */
:lang(ar) main .mono, :lang(ur) main .mono, :lang(ar) main .kicker, :lang(ur) main .kicker { font-family: var(--f-body); letter-spacing: 0; }
:lang(ar) main svg text, :lang(ur) main svg text { font-family: var(--f-body); letter-spacing: 0; }

/* ---------- sub-page nav (sticky, rides under the header when it shows) ---------- */
.sol-subnav { position: sticky; inset-block-start: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid var(--line); transition: transform .45s var(--ease); }
body:has(.hdr.is-solid:not(.is-hidden)) .sol-subnav { transform: translateY(var(--header-h)); }
.sol-subnav__in { display: flex; align-items: center; gap: clamp(12px, 3vw, 40px); min-block-size: 56px; }
.sol-subnav__home { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; min-block-size: 44px; }
.sol-subnav__list { display: flex; gap: 2px; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; flex: 1; }
.sol-subnav__list::-webkit-scrollbar { display: none; }
.sol-subnav__list a { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding-inline: 12px; font-size: .875rem; color: var(--ink-2); text-decoration: none; white-space: nowrap; border-radius: var(--r-1); position: relative; }
.sol-subnav__list a .mono { color: var(--ink-3); font-size: .6875rem; }
.sol-subnav__list a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
.sol-subnav__list a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.sol-subnav__list a[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 12px; inset-block-end: 6px; block-size: 2px; background: var(--accent); }
.sol-subnav__bar { position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
[dir="rtl"] .sol-subnav__bar { transform-origin: 100% 50%; }
@media (max-width: 640px) { .sol-subnav__home { display: none; } .sol-subnav__in { padding-inline: 8px; } }

/* inverted band (local: core .section--ink paints with its own overridden --ink) */
.sol-inv { background: var(--band-bg); color: var(--band-ink); }
.sol-inv > * { --ink: var(--band-ink); --bg: var(--band-bg); --ink-2: color-mix(in srgb, var(--band-ink) 80%, transparent); --ink-3: color-mix(in srgb, var(--band-ink) 62%, transparent); --line: color-mix(in srgb, var(--band-ink) 16%, transparent); --line-2: color-mix(in srgb, var(--band-ink) 30%, transparent); --surface: color-mix(in srgb, var(--band-ink) 6%, var(--band-bg)); color: var(--ink); }

/* ---------- closing band: next chapter + CTA ---------- */
.sol-end { padding-block-start: clamp(48px, 6vw, 96px); }
.sol-end > .sol-next, .sol-end > .sol-cta { inline-size: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.sol-next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; gap: clamp(20px, 3vw, 48px); padding: clamp(18px, 2.4vw, 32px); border: 1px solid var(--line-2); border-radius: var(--r-2); text-decoration: none; color: var(--ink); background: var(--surface); position: relative; overflow: hidden; }
.sol-next__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-1); background: var(--bg-2); }
.sol-next__media picture { block-size: 100%; }
.sol-next__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .7s var(--ease); }
.sol-next:hover .sol-next__media picture { block-size: 100%; }
.sol-next__media img { transform: scale(1.05); filter: var(--photo-filter-on); }
.sol-next__txt { display: grid; gap: 14px; }
.sol-next__t { display: block; }
.sol-next__d { color: var(--ink-2); max-inline-size: 44ch; }
.sol-next__arrow { display: grid; place-items: center; inline-size: 64px; block-size: 64px; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color .3s, color .3s, transform .5s var(--ease); }
.sol-next__arrow svg { inline-size: 26px; block-size: 26px; }
.sol-next:hover .sol-next__arrow { background: var(--accent); color: var(--bg); border-color: var(--accent); transform: translateX(calc(var(--dir) * 6px)); }
@media (max-width: 900px) { .sol-next { grid-template-columns: minmax(0, 1fr); } .sol-next__arrow { display: none; } }

.sol-cta { margin-block-start: clamp(48px, 7vw, 120px); display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding-block-start: clamp(28px, 4vw, 56px); border-block-start: 1px solid var(--ink); }
.sol-cta__copy { display: grid; gap: 18px; }
.sol-cta__t { max-inline-size: 14ch; }
.sol-cta__act { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
@media (max-width: 900px) { .sol-cta { grid-template-columns: minmax(0, 1fr); } .sol-cta__act { justify-content: flex-start; } }

/* ==========================================================================
   HUB
   ========================================================================== */
/* hero: a tall track with a sticky stage; the sun crosses as you scroll */
.sol-hero { position: relative; block-size: 230svh; }
.sol-hero__stage { position: sticky; inset-block-start: 0; block-size: 100svh; overflow: hidden; --p: 0; display: flex; flex-direction: column;
  background:
    linear-gradient(to bottom, var(--bg-2), var(--bg) 52%); }
:root[data-theme="dark"] .sol-hero__stage { background:
    radial-gradient(60% 40% at 50% 66%, color-mix(in srgb, var(--infra) 22%, transparent), transparent 75%),
    linear-gradient(to bottom, var(--bg), color-mix(in srgb, var(--infra-2) 26%, var(--bg)) 44%, color-mix(in srgb, var(--infra-2) 12%, var(--bg)) 52%, var(--bg) 58%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sol-hero__stage { background:
    radial-gradient(60% 40% at 50% 66%, color-mix(in srgb, var(--infra) 22%, transparent), transparent 75%),
    linear-gradient(to bottom, var(--bg), color-mix(in srgb, var(--infra-2) 26%, var(--bg)) 44%, color-mix(in srgb, var(--infra-2) 12%, var(--bg)) 52%, var(--bg) 58%); } }
.sol-hero__scene { position: absolute; inset: 0; }
/* paper scrim on the reading side keeps the headline and lead clean */
.sol-hero__stage::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(calc(var(--dir) * 90deg), var(--bg) 0%, color-mix(in srgb, var(--bg) 82%, transparent) 30%, transparent 58%); }
@media (max-width: 760px) { .sol-hero__stage::after { background: linear-gradient(to bottom, var(--bg) 0%, color-mix(in srgb, var(--bg) 85%, transparent) 46%, transparent 70%); } }
.sol-fallback svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.sol-fallback__arc { stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 4 10; }
.sol-fallback__sun { fill: var(--accent); }
.sol-fallback__hz { stroke: var(--line-2); }
.sol-fallback__rows path { fill: var(--ink); opacity: .85; }
.sol-hero__copy { position: relative; z-index: 2; padding-block-start: calc(var(--header-h) + clamp(24px, 5vh, 64px)); display: grid; gap: 18px; justify-items: start; }
.sol-hero__copy .crumbs { margin-block-end: 0; }
.sol-hero__t { font-size: clamp(3.2rem, 1.2rem + 9vw, 11.5rem); max-inline-size: 11ch; margin-inline-start: -.04em; }
:lang(ar) .sol-hero__t { font-size: clamp(2.6rem, 1rem + 5.6vw, 7.4rem); max-inline-size: 13ch; }
:lang(ur) .sol-hero__t { font-size: clamp(2.2rem, 1rem + 4.6vw, 5.6rem); }
.sol-hero__lead { max-inline-size: 38ch; }
.sol-hero__act { --gap: 18px; margin-block-start: 6px; }
.sol-hero__foot { position: relative; z-index: 2; margin-block: auto clamp(16px, 4vh, 40px); padding-inline-end: calc(var(--gutter) + 80px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.sol-hero__phases { list-style: none; margin: 0; padding: 0; display: grid; }
.sol-hero__phases li { grid-area: 1 / 1; display: flex; gap: 12px; align-items: baseline; font-size: .9375rem; color: var(--ink); max-inline-size: 36ch; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); background: color-mix(in srgb, var(--bg) 70%, transparent); padding: 8px 12px; border-inline-start: 2px solid var(--accent); }
.sol-hero__phases li.is-on { opacity: 1; transform: none; }
.sol-hero__phases .mono { color: var(--accent-ink); }
.sol-hero__scroll { color: var(--ink-2); display: inline-flex; align-items: center; gap: 10px; }
.sol-hero__scroll::before { content: ""; inline-size: 1px; block-size: 36px; background: linear-gradient(var(--accent), transparent); animation: sol-drip 2.2s var(--ease-io) infinite; transform-origin: 50% 0; }
@keyframes sol-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
html.reduced .sol-hero__scroll::before { animation: none; }
@media (max-width: 760px) {
  .sol-hero { block-size: 200svh; }
  .sol-hero__scroll { display: none; }
  .sol-hero__lead { font-size: 1.02rem; }
  .sol-hero__phases li { font-size: .8125rem; }
}
html.reduced .sol-hero { block-size: auto; }
html.reduced .sol-hero__stage { position: relative; min-block-size: 100svh; }

/* six-step chain: sticky drawing plate beside the steps */
.sol-chain__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 96px); align-items: start; }
.sol-chain__aside { position: sticky; inset-block-start: calc(var(--header-h) + 72px); }
.sol-plate { border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r-2); padding: clamp(16px, 2vw, 28px); display: grid; gap: 18px; position: relative; overflow: hidden; }
.sol-plate::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 24px 24px; opacity: .55; pointer-events: none; }
.sol-plate > * { position: relative; }
.sol-plate__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sol-plate__top > .mono { color: var(--ink-3); }
.sol-plate__jump { display: flex; gap: 4px; }
.sol-plate__jump button { inline-size: 44px; block-size: 44px; border-radius: var(--r-1); font: 500 .8125rem var(--f-mono); color: var(--ink-3); border: 1px solid transparent; transition: color .2s, border-color .2s, background-color .2s; }
.sol-plate__jump button:hover { color: var(--ink); border-color: var(--line-2); }
.sol-plate__jump button[aria-current="step"] { color: var(--bg); background: var(--ink); }
.sol-plate__art { display: grid; aspect-ratio: 4 / 3; }
.sol-plate__g { grid-area: 1 / 1; opacity: 0; transition: opacity .5s var(--ease); }
.sol-plate__g.is-on { opacity: 1; }
.sol-plate__n { grid-area: 1 / 1; align-self: start; justify-self: end; font: 600 clamp(3rem, 6vw, 5.5rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1px var(--accent); pointer-events: none; }
.sol-plate__rail { block-size: 2px; background: var(--line); position: relative; }
.sol-plate__rail span { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 50%; transform: scaleX(calc(1 / 6)); transition: transform .6s var(--ease); }
[dir="rtl"] .sol-plate__rail span { transform-origin: 100% 50%; }
.sol-chain__steps { list-style: none; margin: 0; padding: 0; }
.sol-step { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px 20px; padding-block: clamp(40px, 10vh, 110px); border-block-start: 1px solid var(--line); min-block-size: 46vh; align-content: center; transition: opacity .5s var(--ease); }
.sol-step:last-child { border-block-end: 1px solid var(--line); }
/* inactive steps stay readable (WCAG 1.4.3): dim the colour, not the opacity */
.js .sol-step:not(.is-on) .sol-step__n { opacity: .5; }
.js .sol-step:not(.is-on) .sol-step__body { color: var(--ink-2); }
.js .sol-step:not(.is-on) .sol-step__body > p, .js .sol-step:not(.is-on) .sol-step__out { color: var(--ink-3); }
.sol-step__n { font: 500 .875rem var(--f-mono); color: var(--accent-ink); padding-block-start: .9em; }
.sol-step__body { display: grid; gap: 14px; }
.sol-step__body > p { color: var(--ink-2); max-inline-size: 48ch; font-size: 1.0625rem; }
.sol-step__out { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding-block-start: 12px; border-block-start: 1px dashed var(--line-2); color: var(--ink); font-weight: 500; }
.sol-step__art { display: none; }
.sol-one { margin-block-start: clamp(56px, 8vw, 120px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; max-inline-size: 64rem; }
.sol-one__mark { font: 600 clamp(7rem, 16vw, 15rem)/.75 var(--f-display); color: var(--accent); }
.sol-one .lead { max-inline-size: 40ch; color: var(--ink); font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); font-family: var(--f-display); line-height: 1.3; }
:lang(ar) .sol-one .lead, :lang(ur) .sol-one .lead { line-height: 1.7; }
@media (max-width: 900px) {
  .sol-chain__grid { grid-template-columns: minmax(0, 1fr); }
  .sol-chain__aside { display: none; }
  .sol-step { grid-template-columns: 44px minmax(0, 1fr); min-block-size: 0; padding-block: 36px; }
  .js .sol-step:not(.is-on) { opacity: 1; }
  .sol-step__art { display: block; grid-column: 1 / -1; max-inline-size: 420px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--surface); margin-block-start: 12px; }
  .sol-step__art .sol-draw.is-on [pathLength] { stroke-dashoffset: 1; }
  .sol-step__art.is-in .sol-draw.is-on [pathLength] { stroke-dashoffset: 0; }
  .sol-one { grid-template-columns: minmax(0, 1fr); }
}

/* scale band (inverted) */
.sol-scale__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-areas: "ctl plan" "spec plan"; gap: clamp(20px, 3vw, 48px); align-items: start; }
.sol-scale__ctl { grid-area: ctl; display: grid; gap: 18px; position: relative; }
.sol-scale__range { position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 44px; inline-size: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.sol-scale__range:focus-visible + .sol-scale__track { outline: 2px solid var(--accent); outline-offset: 6px; }
.sol-scale__track { block-size: 44px; position: relative; display: block; }
.sol-scale__track::before { content: ""; position: absolute; inset-inline: 11px; inset-block-start: 21px; block-size: 2px; background: var(--line-2); }
.sol-scale__fill { position: absolute; inset-inline-start: 11px; inset-block-start: 21px; block-size: 2px; inline-size: calc((100% - 22px) * var(--s, 0)); background: var(--accent); transition: inline-size .6s var(--ease); }
.sol-scale__knob { position: absolute; inset-block-start: 11px; inset-inline-start: calc((100% - 22px) * var(--s, 0)); inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); transition: inset-inline-start .6s var(--ease); }
.sol-scale__stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sol-scale__stops button { display: flex; gap: 14px; align-items: baseline; inline-size: 100%; text-align: start; min-block-size: 48px; padding: 10px 0; font: 600 clamp(1.1rem, .9rem + .7vw, 1.5rem)/1.25 var(--f-display); color: var(--ink-3); border-block-end: 1px solid var(--line); transition: color .3s; }
.sol-scale__stops button .mono { color: inherit; font-family: var(--f-mono); }
.sol-scale__stops button:hover, .sol-scale__stops button[aria-pressed="true"] { color: var(--ink); }
.sol-scale__stops button[aria-pressed="true"] .mono { color: var(--accent); }
.sol-scale__plan { grid-area: plan; inline-size: 100%; block-size: auto; border-radius: var(--r-2); background: color-mix(in srgb, var(--bg) 4%, transparent); }
.sol-scale__plan .site { fill: none; stroke: var(--line-2); stroke-dasharray: 3 7; }
.sol-scale__plan text { fill: var(--ink-3); font: 500 13px var(--f-mono); }
.sol-scale__plan .blk { fill: var(--ink); }
.sol-scale__plan .sc { transform-box: fill-box; transform-origin: 50% 50%; transition: opacity .55s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
.sol-scale__plan g.sc circle:not(.acc-fill), .sol-scale__plan g.sc rect:not(.acc-fill):not(.blk) { fill: none; stroke: var(--ink-2); stroke-width: 1.5; }
.sol-scale__plan .acc-fill { fill: var(--accent); }
.sol-scale__plan .pivot { stroke-dasharray: 2 5; }
.sol-scale__plan .span { stroke: var(--accent); stroke-width: 2; }
.sol-scale__plan .wire { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.sol-scale__plan .road { stroke: var(--ink-3); stroke-width: 6; opacity: .35; }
.sol-scale__plan .roof { stroke-dasharray: none; }
.sol-scale__box[data-s="0"] .sc:not(.s0), .sol-scale__box[data-s="1"] .sc:not(.s1), .sol-scale__box[data-s="2"] .sc:not(.s2) { opacity: 0; transform: scale(.7); transition-delay: 0s; }
.sol-scale__spec { grid-area: spec; margin: 0; display: grid; gap: 0; }
.sol-scale__spec > div { display: grid; gap: 4px; padding-block: 14px; border-block-start: 1px solid var(--line); }
.sol-scale__spec dt { color: var(--accent); text-transform: uppercase; }
.sol-scale__spec dd { margin: 0; color: var(--ink); font-size: 1.0625rem; }
@media (max-width: 900px) {
  .sol-scale__box { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ctl" "plan" "spec"; }
}

/* routes diagram */
.sol-rt { border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); overflow: hidden; transition: background-color .8s var(--ease), color .8s var(--ease); --wire: var(--line-2); }
/* night in day theme: the box inverts to ink; night in night theme: blue hour */
:root[data-theme="light"] .sol-rt[data-time="night"] { background: var(--ink); color: var(--bg); --surface: var(--ink); --ink: var(--bg); --ink-2: color-mix(in srgb, var(--bg) 80%, transparent); --ink-3: color-mix(in srgb, var(--bg) 60%, transparent); --line: color-mix(in srgb, var(--bg) 14%, transparent); --line-2: color-mix(in srgb, var(--bg) 28%, transparent); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .sol-rt[data-time="night"] { background: var(--ink); color: var(--bg); --surface: var(--ink); --ink: var(--bg); --ink-2: color-mix(in srgb, var(--bg) 80%, transparent); --ink-3: color-mix(in srgb, var(--bg) 60%, transparent); --line: color-mix(in srgb, var(--bg) 14%, transparent); --line-2: color-mix(in srgb, var(--bg) 28%, transparent); } }
:root[data-theme="dark"] .sol-rt[data-time="night"] { --surface: color-mix(in srgb, var(--infra-2) 22%, var(--bg)); background: var(--surface); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sol-rt[data-time="night"] { --surface: color-mix(in srgb, var(--infra-2) 22%, var(--bg)); background: var(--surface); } }
.sol-rt__ctl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px; border-block-end: 1px solid var(--line); }
.sol-rt__tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.sol-rt__tabs [role="tab"] { display: inline-flex; align-items: center; gap: 10px; min-block-size: 48px; padding-inline: 12px 16px; border-radius: var(--r-1); color: var(--ink-2); font-weight: 600; font-size: .9375rem; transition: background-color .25s, color .25s; }
.sol-rt__tabs [role="tab"]:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.sol-rt__tabs [role="tab"][aria-selected="true"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.sol-rt__k { display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; border: 1px solid currentColor; font: 600 .8125rem var(--f-mono); }
[aria-selected="true"] > .sol-rt__k { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.sol-rt__time { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; align-items: center; min-block-size: 48px; padding: 4px; border-radius: 99px; border: 1px solid var(--line-2); font-weight: 600; font-size: .875rem; isolation: isolate; }
.sol-rt__opt { position: relative; z-index: 1; padding-inline: 18px; min-inline-size: 72px; text-align: center; transition: color .4s; }
.sol-rt__thumb { position: absolute; z-index: 0; inset-block: 4px; inset-inline-start: 4px; inline-size: calc(50% - 4px); border-radius: 99px; background: var(--accent); transition: transform .5s var(--ease); }
.sol-rt[data-time="night"] .sol-rt__thumb { transform: translateX(calc(var(--dir) * 100%)); }
.sol-rt[data-time="day"] .sol-rt__opt[data-o="day"], .sol-rt[data-time="night"] .sol-rt__opt[data-o="night"] { color: var(--bg); }
.sol-rt__stage { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 48px); padding: clamp(16px, 3vw, 40px); align-items: center; }
.sol-rt__svg { inline-size: 100%; block-size: auto; overflow: visible; }
.sol-rt__svg text { fill: var(--ink-3); font: 600 13px var(--f-body); }
.sol-rt__svg .nd rect, .sol-rt__svg .nd circle { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1.5; transition: stroke .5s, fill .5s; }
.sol-rt__svg .nd .grid { fill: none; stroke: var(--ink-3); stroke-width: 1.2; transition: stroke .5s; }
.sol-rt__svg .nd.is-live rect, .sol-rt__svg .nd.is-live circle { stroke: var(--accent); stroke-width: 2.2; }
.sol-rt__svg .nd.is-live .grid { stroke: var(--accent); }
.sol-rt__svg .nd.is-live text { fill: var(--ink); }
.sol-rt__svg .w { fill: none; stroke: var(--line-2); stroke-width: 3; stroke-linecap: round; transition: stroke .4s; }
.sol-rt__svg .w.is-flow { stroke: var(--accent); stroke-dasharray: 2 12; animation: sol-flow 1.1s linear infinite; }
.sol-rt__svg .w.is-flow.is-rev { animation-direction: reverse; }
@keyframes sol-flow { to { stroke-dashoffset: -28; } }
html.reduced .sol-rt__svg .w.is-flow { animation: none; stroke-dasharray: none; }
.sol-rt__svg .opt { opacity: 0; transition: opacity .5s var(--ease); }
.sol-rt[data-route="B"] .optB, .sol-rt[data-route="C"] .optC { opacity: 1; }
.sol-rt__sky .sun { fill: none; stroke: var(--accent); stroke-width: 2; transition: opacity .6s, transform .8s var(--ease); transform-origin: 700px 46px; }
.sol-rt__sky circle.sun { fill: var(--accent); }
.sol-rt__sky .moon { fill: var(--ink); opacity: 0; transition: opacity .6s; }
.sol-rt[data-time="night"] .sol-rt__sky .sun { opacity: 0; transform: translateY(30px); }
.sol-rt[data-time="night"] .sol-rt__sky .moon { opacity: 1; }
.sol-rt__txt { display: grid; gap: 12px; align-content: start; position: relative; }
.sol-rt__big { font: 600 clamp(5rem, 9vw, 8.5rem)/.8 var(--f-display); color: var(--accent); }
.sol-rt__d { color: var(--ink-2); }
.sol-rt__state { padding: 12px 14px; border-inline-start: 2px solid var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--ink); min-block-size: 3.4em; }
.sol-rt__store { display: none; }
.sol-rt[data-route="B"] .sol-rt__store { display: block; }
.sol-rt__store .link-arrow { margin-inline-start: 4px; }
@media (max-width: 900px) { .sol-rt__stage { grid-template-columns: minmax(0, 1fr); } .sol-rt__big { display: none; } }

/* sub-page index (hover preview) */
.sol-index { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--ink); }
.sol-index a { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 56px; align-items: center; gap: 12px 24px; padding-block: clamp(22px, 3vw, 40px); border-block-end: 1px solid var(--line-2); text-decoration: none; color: var(--ink); transition: padding .5s var(--ease); }
.sol-index a:hover { padding-inline-start: 12px; }
.sol-index__n { color: var(--accent-ink); }
.sol-index__t { font: 600 clamp(1.8rem, 1.2rem + 2.6vw, 3.6rem)/1.05 var(--f-display); }
:lang(ar) .sol-index__t, :lang(ur) .sol-index__t { line-height: 1.5; }
.sol-index__d { color: var(--ink-2); max-inline-size: 36ch; }
.sol-index__a { justify-self: end; }
.sol-index__a svg { inline-size: 28px; block-size: 28px; transition: transform .4s var(--ease); }
.sol-index a:hover .sol-index__a svg { transform: translateX(calc(var(--dir) * 8px)); }
.sol-index__img { display: none; }
/* up to 1100: touch tablets show the inline thumb too, so they need the stacked layout */
@media (max-width: 1100px) {
  .sol-index a { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .sol-index__d { grid-column: 2 / -1; grid-row: 2; }
  .sol-index__a { grid-row: 1; grid-column: 3; }
  .touch .sol-index__img { grid-column: 3; grid-row: 2; }
}

/* ==========================================================================
   AGRICULTURE
   ========================================================================== */
.sol-ag-hero { padding-block: calc(var(--header-h) + clamp(32px, 6vw, 88px)) clamp(40px, 6vw, 96px); overflow: hidden; }
.sol-ag-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.sol-ag-hero__copy { display: grid; gap: 20px; justify-items: start; }
.sol-ag-hero__copy .crumbs { margin-block-end: 0; }
.sol-ag-hero__t { font-size: clamp(3rem, 1.4rem + 6vw, 8.2rem); max-inline-size: 10.5ch; }
:lang(ar) .sol-ag-hero__t { max-inline-size: 11ch; font-size: clamp(2.8rem, 1.3rem + 5.4vw, 7.4rem); }
:lang(ur) .sol-ag-hero__t { max-inline-size: none; }
.sol-ag-hero__chips { list-style: none; padding: 0; margin: 4px 0 0; }
.sol-ag-hero__chips .chip { font-family: var(--f-mono); }
.sol-ag-hero__art { position: relative; }
.sol-ag-hero__art::before { content: ""; position: absolute; inset: 6% 10% 10% 0; border-radius: 50%; background: radial-gradient(closest-side, var(--accent-soft), transparent); z-index: -1; }
.sol-pivot { inline-size: 100%; block-size: auto; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.4; }
.sol-pivot .field { stroke-width: 2; }
.sol-pivot .ring { stroke: var(--ink-3); stroke-width: .8; stroke-dasharray: 2 6; }
.sol-pivot .arm { transform-box: view-box; transform-origin: 250px 300px; animation: sol-spin 48s linear infinite; }
.sol-pivot .arm__l { stroke: var(--accent); stroke-width: 3; }
.sol-pivot .tw { fill: var(--surface); stroke: var(--accent); stroke-width: 2; }
.sol-pivot .well { fill: var(--accent); stroke: none; }
.sol-pivot .mod { fill: var(--ink); stroke: none; }
.sol-pivot .vfd { stroke-width: 1.6; }
.sol-pivot .cable { stroke: var(--accent); stroke-dasharray: 5 5; stroke-width: 1.6; }
.sol-pivot .lead { stroke: var(--ink-3); stroke-width: .8; }
.sol-pivot text { fill: var(--ink-2); stroke: none; font: 500 14px var(--f-mono); }
:lang(ar) .sol-pivot text, :lang(ur) .sol-pivot text { font: 600 16px var(--f-body); }
@keyframes sol-spin { to { transform: rotate(360deg); } }
html.reduced .sol-pivot .arm { animation: none; transform: rotate(-30deg); }
@media (max-width: 900px) { .sol-ag-hero__grid { grid-template-columns: minmax(0, 1fr); } .sol-ag-hero__art { max-inline-size: 520px; } }

/* package selector */
.sol-pkg__box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: clamp(24px, 4vw, 72px); padding: clamp(20px, 3vw, 48px); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); --k: .33; }
.sol-pkg__readout { display: grid; gap: 14px; align-content: start; }
.sol-pkg__pk { color: var(--accent-ink); }
.sol-pkg__hp { display: flex; align-items: baseline; gap: 12px; overflow: hidden; }
.sol-pkg__num { display: inline-block; font: 600 clamp(5.5rem, 3rem + 9vw, 12rem)/.85 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sol-pkg__unit { font: 600 clamp(1.4rem, 1rem + 1.4vw, 2.4rem) var(--f-display); color: var(--accent); }
.sol-pkg__dl { margin: 0; display: grid; }
.sol-pkg__dl > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-block-start: 1px solid var(--line); }
.sol-pkg__dl dt { color: var(--ink-3); font-size: .875rem; }
.sol-pkg__dl dd { margin: 0; font-weight: 600; text-align: end; }
.sol-pkg__ctl { display: grid; gap: 18px; align-content: start; }
.sol-pkg__stepper { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 12px; align-items: center; }
.sol-pkg__btn { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; border: 1px solid var(--line-2); transition: background-color .2s, color .2s, border-color .2s; }
.sol-pkg__btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sol-pkg__btn svg { inline-size: 20px; block-size: 20px; }
.sol-pkg__range { -webkit-appearance: none; appearance: none; inline-size: 100%; block-size: 44px; background: transparent; margin: 0; cursor: pointer; }
.sol-pkg__range::-webkit-slider-runnable-track { block-size: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) calc(var(--k) * 100%), var(--line-2) 0); }
[dir="rtl"] .sol-pkg__range::-webkit-slider-runnable-track { background: linear-gradient(-90deg, var(--accent) calc(var(--k) * 100%), var(--line-2) 0); }
.sol-pkg__range::-moz-range-track { block-size: 4px; border-radius: 2px; background: var(--line-2); }
.sol-pkg__range::-moz-range-progress { block-size: 4px; background: var(--accent); }
.sol-pkg__range::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 28px; block-size: 28px; margin-block-start: -12px; border-radius: 50%; background: var(--accent); border: 4px solid var(--surface); box-shadow: 0 0 0 1px var(--accent), var(--shadow-1); }
.sol-pkg__range::-moz-range-thumb { inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--accent); border: 4px solid var(--surface); }
.sol-pkg__range:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.sol-pkg__ruler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 2px; }
.sol-pkg__ruler button { inline-size: 100%; min-block-size: 44px; font: 500 .8125rem var(--f-mono); color: var(--ink-3); border-block-start: 2px solid var(--line); transition: color .2s, border-color .3s; }
.sol-pkg__ruler button.is-in { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--ink-2); }
.sol-pkg__ruler button[aria-pressed="true"] { color: var(--ink); font-weight: 700; border-color: var(--accent); }
.sol-pkg__bands { display: grid; grid-template-columns: 3fr 3fr 4fr; gap: 2px; }
.sol-pkg__bands span { padding: 8px 10px; font-size: .8125rem; font-weight: 600; color: var(--ink-3); background: var(--bg); text-align: center; transition: background-color .3s, color .3s; }
.sol-pkg__bands span.is-on { background: var(--accent-ink); color: var(--bg); }
.sol-pkg__ends { display: flex; justify-content: space-between; color: var(--ink-3); }
.sol-pkg__span { inline-size: 100%; block-size: auto; fill: none; stroke: var(--ink-2); stroke-width: 1.5; overflow: visible; }
[dir="rtl"] .sol-pkg__span { transform: scaleX(-1); }
.sol-pkg__span .ground { stroke: var(--line-2); }
.sol-pkg__span .pipe { stroke: var(--ink); stroke-width: 2; }
.sol-pkg__span .pt path, .sol-pkg__span .pt rect { stroke: var(--accent); stroke-width: 2; }
.sol-pkg__span .truss { stroke: var(--ink-3); stroke-width: 1; }
.sol-pkg__span .tower { opacity: .12; transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .45s var(--ease), transform .45s var(--ease); transform: scaleY(.85); }
.sol-pkg__span .tower.is-on { opacity: 1; transform: none; }
.sol-pkg__span .tower.is-opt { opacity: .55; transform: none; stroke-dasharray: 4 4; }
.sol-pkg__note { max-inline-size: 60ch; }
.sol-pkg__more { margin-block-start: 24px; }
.sol-pkg__more summary { display: inline-flex; align-items: center; gap: 10px; min-block-size: 48px; cursor: pointer; font-weight: 600; list-style: none; }
.sol-pkg__more summary::-webkit-details-marker { display: none; }
.sol-pkg__more summary svg { inline-size: 16px; block-size: 16px; transition: transform .3s var(--ease); }
.sol-pkg__more[open] summary svg { transform: rotate(180deg); }
.sol-pkg__more tbody tr { cursor: pointer; }
.sol-pkg__more tbody tr.is-on { background: var(--accent-soft); }
.sol-pkg__more tbody tr.is-on td:first-child { box-shadow: inset calc(var(--dir) * 3px) 0 0 var(--accent); }
@media (max-width: 900px) { .sol-pkg__box { grid-template-columns: minmax(0, 1fr); } .sol-pkg__ruler button { font-size: .6875rem; } }
@media (max-width: 520px) { .sol-pkg__ruler { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 6px; } .sol-pkg__bands { grid-template-columns: 1fr; } }

/* before / after */
.sol-cmp__fig { margin: 0; }
.sol-cmp__box { aspect-ratio: 16 / 8; border-radius: var(--r-2); overflow: hidden; background: var(--bg-2); }
.sol-cmp__box > .media { block-size: 100%; border-radius: 0; }
.sol-cmp__box picture, .sol-cmp__box img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sol-cmp__box > .media:first-child img { filter: grayscale(.7) contrast(1.05); }
@media (max-width: 760px) { .sol-cmp__box { aspect-ratio: 4 / 3; } }

/* 24-hour duty ring */
.sol-duty__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: center; }
.sol-duty__ring { position: relative; max-inline-size: 560px; inline-size: 100%; justify-self: center; }
.sol-ring { inline-size: 100%; block-size: auto; fill: none; overflow: visible; }
.sol-ring .track { stroke: var(--line); stroke-width: 1; }
.sol-ring .day { stroke: var(--accent-soft); stroke-width: 30; }
.sol-ring .run { stroke: var(--ink); stroke-width: 10; stroke-linecap: round; }
.sol-ring .run--opt { stroke-dasharray: 3 6; stroke-width: 10; stroke-linecap: butt; opacity: .55; }
.sol-ring .tick { stroke: var(--ink-3); stroke-width: 1; }
.sol-ring text { fill: var(--ink-3); font: 500 13px var(--f-mono); stroke: none; }
.sol-ring .hand { transform-box: view-box; transform-origin: 200px 200px; transition: transform .25s linear; }
.sol-ring .hand path { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 4; }
.sol-ring .sunmark { fill: var(--accent); stroke: var(--bg); stroke-width: 4; transition: fill .4s; }
.sol-duty__ring[data-state="other"] .sunmark { fill: var(--ink); }
.sol-duty__ring[data-state="off"] .sunmark { fill: var(--bg-2); stroke: var(--ink-3); stroke-width: 1.5; }
.sol-ring .hub { fill: var(--ink); }
.sol-duty__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 6px; pointer-events: none; padding: 32%; }
.sol-duty__h { font: 600 clamp(2rem, 1.2rem + 3vw, 3.6rem)/1 var(--f-display); }
.sol-duty__s { font-size: .8125rem; color: var(--ink-2); line-height: 1.35; }
.sol-duty__copy { display: grid; gap: 18px; justify-items: start; }
.sol-duty__ctl { display: grid; gap: 6px; inline-size: min(100%, 420px); }
.sol-duty__ctl .mono { color: var(--ink-3); }
.sol-duty__range { inline-size: 100%; accent-color: var(--accent); block-size: 44px; margin: 0; }
.sol-duty__legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .875rem; color: var(--ink-2); }
.sol-duty__legend li { display: inline-flex; align-items: center; gap: 8px; }
.sol-duty__legend .k { inline-size: 22px; block-size: 8px; border-radius: 4px; }
.k--day { background: var(--accent-soft); outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.k--run { background: var(--ink); }
.sol-duty__state { padding: 12px 14px; border-inline-start: 2px solid var(--accent); background: var(--accent-soft); font-weight: 500; min-block-size: 3.2em; inline-size: min(100%, 460px); }
.sol-duty__hint { color: var(--ink-3); }
html.reduced .sol-duty__hint, .touch .sol-duty__hint { display: none; }
@media (max-width: 900px) { .sol-duty__grid { grid-template-columns: minmax(0, 1fr); } .sol-duty__ring { max-inline-size: 420px; } }

/* scope */
.sol-scope__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 96px); align-items: end; }
.sol-scope__fig .sol-fig__m { aspect-ratio: 860 / 1040; }
.sol-scope__copy { display: grid; gap: 20px; }
.sol-scope__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 3vw, 48px); border-block-start: 1px solid var(--ink); }
.sol-scope__list li { display: flex; gap: 16px; align-items: baseline; padding-block: 16px; border-block-end: 1px solid var(--line); font-size: 1.0625rem; font-weight: 500; }
.sol-scope__list .mono { color: var(--accent-ink); }
@media (max-width: 900px) { .sol-scope__grid { grid-template-columns: minmax(0, 1fr); } .sol-scope__fig { max-inline-size: 460px; } }
@media (max-width: 520px) { .sol-scope__list { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   COMMERCIAL AND INDUSTRIAL
   ========================================================================== */
/* text on a dark photo: light ink in both themes */
.sol-onphoto { --on: var(--bg); }
:root[data-theme="dark"] .sol-onphoto { --on: var(--ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sol-onphoto { --on: var(--ink); } }
.sol-onphoto > * { --ink: var(--on); --ink-2: color-mix(in srgb, var(--on) 86%, transparent); --ink-3: color-mix(in srgb, var(--on) 70%, transparent); color: var(--ink); }

.sol-ci-hero { position: relative; min-block-size: min(100svh, 980px); display: grid; align-items: end; overflow: hidden; background: var(--ink); }
:root[data-theme="dark"] .sol-ci-hero { background: var(--bg); }
.sol-ci-hero__media { position: absolute; inset: 0; }
.sol-ci-hero__img { position: absolute; inset: -8% 0; }
.sol-ci-hero__img picture, .sol-ci-hero__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.sol-ci-hero__img img { filter: brightness(.72) saturate(.9); }
.sol-ci-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--scrim), var(--scrim); }
.sol-ci-hero__cap { position: absolute; z-index: 2; inset-block-start: calc(var(--header-h) + 16px); inset-inline-end: var(--gutter); color: var(--ink-2); }
.sol-ci-hero__copy { position: relative; z-index: 2; display: grid; gap: 18px; justify-items: start; padding-block: calc(var(--header-h) + 48px) clamp(40px, 7vw, 96px); }
.sol-ci-hero__copy .crumbs { margin-block-end: 0; color: var(--ink-2); }
.sol-ci-hero__t { color: var(--ink); max-inline-size: 13ch; font-size: clamp(3rem, 1.2rem + 6.6vw, 9rem); }
:lang(ur) .sol-ci-hero__t { max-inline-size: none; }

/* roof or ground */
.sol-mt { border-block-start: 1px solid var(--ink); }
.sol-mt__tabs { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-block: 18px 28px; border: 1px solid var(--line-2); border-radius: 99px; padding: 4px; isolation: isolate; }
.sol-mt__tabs [role="tab"] { position: relative; z-index: 1; min-block-size: 48px; padding-inline: 28px; font: 600 1rem var(--f-body); color: var(--ink-2); transition: color .35s; white-space: nowrap; }
.sol-mt__tabs [aria-selected="true"] { color: var(--btn-ink); }
.sol-mt__ind { position: absolute; z-index: 0; inset-block: 4px; inset-inline-start: 4px; inline-size: calc(50% - 4px); border-radius: 99px; background: var(--btn-bg); transition: transform .55s var(--ease); }
.sol-mt[data-k="ground"] .sol-mt__ind { transform: translateX(calc(var(--dir) * 100%)); }
.sol-mt__panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.sol-mt__plan { display: grid; padding: clamp(14px, 2vw, 28px); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-2); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 20px 20px; }
.sol-mt__svg { grid-area: 1 / 1; inline-size: 100%; block-size: auto; fill: none; stroke: var(--ink); stroke-width: 1.4; opacity: 0; transition: opacity .4s var(--ease); }
.sol-mt__svg.is-on { opacity: 1; }
.sol-mt__svg .para, .sol-mt__svg .fence { stroke-dasharray: 6 6; stroke: var(--ink-3); }
.sol-mt__svg .edge { stroke-width: 2.4; }
.sol-mt__svg .m { fill: var(--ink); stroke: none; transform-box: fill-box; transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s var(--ease); }
[dir="rtl"] .sol-mt__svg .m { transform-origin: 100% 50%; }
.sol-mt__svg.is-on .m { transform: none; }
.sol-mt__svg .m:nth-child(3n+2) { transition-delay: .06s; } .sol-mt__svg .m:nth-child(3n) { transition-delay: .12s; }
.sol-mt__svg .obs { stroke: var(--ink-3); stroke-width: 1; }
.sol-mt__svg .walk { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 2 5; }
.sol-mt__svg .cab { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 4; }
.sol-mt__svg .mb, .sol-mt__svg .st { stroke: var(--accent); stroke-width: 2; }
.sol-mt__svg .road { stroke: var(--ink-3); stroke-width: 10; opacity: .3; }
.sol-mt__side { display: grid; }
.sol-mt__pane { grid-area: 1 / 1; display: grid; gap: 18px; align-content: start; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .45s var(--ease), transform .55s var(--ease), visibility 0s .45s; }
.sol-mt__pane.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: .08s, .08s, 0s; }
.sol-mt__d { font: 600 clamp(1.25rem, 1rem + .9vw, 1.75rem)/1.3 var(--f-display); }
:lang(ar) .sol-mt__d, :lang(ur) .sol-mt__d { line-height: 1.7; }
.sol-mt__pts { list-style: none; margin: 0; padding: 0; display: grid; }
.sol-mt__pts li { display: flex; gap: 12px; align-items: flex-start; padding-block: 12px; border-block-start: 1px solid var(--line); color: var(--ink-2); }
.sol-mt__pts svg { flex: none; inline-size: 20px; block-size: 20px; color: var(--accent); margin-block-start: 3px; }
@media (max-width: 900px) { .sol-mt__panel { grid-template-columns: minmax(0, 1fr); } }

/* applications */
.sol-apps__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 72px); align-items: start; }
.sol-apps__head { display: grid; gap: 16px; position: sticky; inset-block-start: calc(var(--header-h) + 80px); }
.sol-apps__list { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--ink); }
.sol-apps__row { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); gap: 8px 24px; align-items: baseline; padding-block: 22px; border-block-end: 1px solid var(--line-2); transition: padding .45s var(--ease), color .3s; cursor: default; }
.sol-apps__row:hover { padding-inline-start: 10px; }
.sol-apps__row .mono { color: var(--accent-ink); }
.sol-apps__t { font: 600 clamp(1.4rem, 1rem + 1.4vw, 2.3rem)/1.15 var(--f-display); }
:lang(ar) .sol-apps__t, :lang(ur) .sol-apps__t { line-height: 1.6; }
.sol-apps__d { color: var(--ink-2); }
.sol-apps__img { display: none; }
@media (max-width: 900px) { .sol-apps__grid { grid-template-columns: minmax(0, 1fr); } .sol-apps__head { position: static; } .sol-apps__row { grid-template-columns: 40px minmax(0, 1fr); } .sol-apps__d { grid-column: 2; } .touch .sol-apps__img { grid-column: 2; } }

/* routes over a day */
.sol-day__box { display: grid; gap: 22px; }
.sol-day__ctl { display: grid; gap: 6px; inline-size: min(100%, 520px); }
.sol-day__ctl .mono { color: var(--ink-3); }
.sol-day__range { inline-size: 100%; block-size: 44px; margin: 0; accent-color: var(--accent); }
.sol-day__rows { display: grid; gap: 18px; --h: 20; }
.sol-day__axis, .sol-day__bar { margin-inline-start: 260px; }
.sol-day__axis { display: flex; justify-content: space-between; font: 500 .75rem var(--f-mono); color: var(--ink-3); direction: ltr; }
.sol-day__row { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 20px; row-gap: 6px; align-items: center; }
.sol-day__row .sol-day__bar { margin-inline-start: 0; }
.sol-day__lab { display: flex; align-items: center; gap: 10px; font-size: 1rem; }
.sol-day__lab .sol-rt__k { color: var(--ink); }
.sol-day__bar { position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; block-size: 40px; direction: ltr; }
.c { display: block; border-radius: 2px; }
.c--sun { background: var(--accent); }
.c--bat { background: var(--accent-2); }
.c--gen { background: var(--ink-2); }
.c--none { background: repeating-linear-gradient(-45deg, var(--line-2) 0 1px, transparent 1px 6px); outline: 1px solid var(--line); outline-offset: -1px; }
.sol-day__cur { position: absolute; inset-block: -8px; inline-size: calc(100% / 24); inset-inline-start: calc(var(--h) * 100% / 24); border: 2px solid var(--ink); border-radius: 3px; transition: inset-inline-start .25s var(--ease); pointer-events: none; }
.sol-day__now { grid-column: 2; font-size: .875rem; color: var(--ink-2); min-block-size: 1.5em; }
.sol-day__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: .875rem; color: var(--ink-2); }
.sol-day__legend li { display: inline-flex; align-items: center; gap: 8px; }
.sol-day__legend .c { inline-size: 22px; block-size: 12px; }
.sol-day__note { color: var(--ink-3); }
@media (max-width: 760px) {
  .sol-day__axis { margin-inline-start: 0; }
  .sol-day__row { grid-template-columns: minmax(0, 1fr); }
  .sol-day__now { grid-column: 1; }
  .sol-day__bar { block-size: 30px; gap: 1px; }
}

/* deliverables stack */
.sol-gets__stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; --fx-stack-top: calc(var(--header-h) + 90px); }
.sol-gets__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(20px, 4vw, 72px); align-items: end; min-block-size: min(52vh, 440px); padding: clamp(22px, 3.5vw, 56px); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.sol-gets__card:nth-child(even) { background: var(--bg-2); }
.sol-gets__n { font: 600 clamp(6rem, 4rem + 9vw, 15rem)/.75 var(--f-display); color: transparent; -webkit-text-stroke: 1.5px var(--accent); align-self: start; }
.sol-gets__body { display: grid; gap: 18px; }
.sol-gets__r { display: grid; gap: 8px; padding-block-start: 16px; border-block-start: 1px solid var(--line-2); font-size: 1.125rem; color: var(--ink); max-inline-size: 44ch; }
@media (max-width: 760px) { .sol-gets__card { grid-template-columns: minmax(0, 1fr); min-block-size: 0; } .sol-gets__n { font-size: 5rem; } }

/* equipment marquee */
.sol-supply__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 72px); align-items: end; margin-block-end: clamp(28px, 4vw, 56px); }
.sol-supply__head p { color: var(--ink-2); max-inline-size: 44ch; }
.sol-supply__band { border-block: 1px solid var(--ink); padding-block: 22px; }
.sol-supply__band ul { list-style: none; margin: 0; padding: 0; display: flex; flex: none; }
.sol-supply__band li { display: inline-flex; align-items: baseline; gap: 12px; padding-inline: 28px; font: 600 clamp(1.4rem, 1rem + 1.6vw, 2.6rem)/1.2 var(--f-display); white-space: nowrap; }
.sol-supply__band li::after { content: ""; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--accent); margin-inline-start: 28px; align-self: center; }
.sol-supply__band .mono { color: var(--accent-ink); font-size: .8125rem; }
@media (max-width: 760px) { .sol-supply__head { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   DELIVERY
   ========================================================================== */
.sol-dl-hero { padding-block: calc(var(--header-h) + clamp(32px, 6vw, 88px)) clamp(56px, 7vw, 112px); overflow: hidden; }
.sol-dl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 88px); align-items: center; }
.sol-dl-hero__copy { display: grid; gap: 20px; justify-items: start; }
.sol-dl-hero__copy .crumbs { margin-block-end: 0; }
.sol-dl-hero__t { font-size: clamp(3rem, 1.4rem + 6vw, 8.4rem); max-inline-size: 10ch; }
:lang(ur) .sol-dl-hero__t { max-inline-size: none; }
.sol-dl-hero__media { position: relative; padding-block-end: 18%; padding-inline-start: 12%; }
.sol-dl-hero__a .sol-fig__m { box-shadow: var(--shadow-2); }
.sol-dl-hero__b { position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 42%; }
.sol-dl-hero__b .sol-fig__m { border: 6px solid var(--bg); box-shadow: var(--shadow-2); }
.sol-dl-hero__stamp { position: absolute; inset-block-start: -28px; inset-inline-end: 0; color: var(--accent-ink); }
@media (max-width: 900px) { .sol-dl-hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* pinned horizontal sequence */
.sol-seq { position: relative; padding-block: var(--sec) 0; }
.sol-seq__pin { display: flex; flex-direction: column; gap: clamp(20px, 3vh, 40px); }
.sol-seq.is-pinned .sol-seq__pin { block-size: 100svh; padding-block: calc(56px + 32px) 32px; box-sizing: border-box; }
.sol-seq__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(16px, 4vw, 64px); align-items: end; }
.sol-seq__meta { display: grid; gap: 10px; }
.sol-seq__rail { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sol-seq__rail li { display: grid; gap: 6px; padding-block-start: 10px; border-block-start: 2px solid var(--line-2); font-size: .8125rem; color: var(--ink-3); transition: color .3s, border-color .3s; }
.sol-seq__rail li.is-past { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.sol-seq__rail li.is-on { border-color: var(--accent); color: var(--ink); }
.sol-seq__rail .mono { color: var(--accent-ink); }
.sol-seq__rt { line-height: 1.35; }
.sol-seq__hint { color: var(--ink-3); }
.sol-seq__view { overflow: hidden; flex: 1; min-block-size: 0; }
.sol-seq__track { display: flex; gap: clamp(20px, 3vw, 48px); padding-inline: var(--gutter); block-size: 100%; will-change: transform; }
.sol-stage { flex: none; inline-size: min(78vw, 1180px); display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 56px); align-items: center; padding: clamp(18px, 2.4vw, 36px); border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--surface); position: relative; overflow: hidden; }
.sol-stage__n { position: absolute; inset-block-end: -.18em; inset-inline-end: .04em; font: 600 clamp(9rem, 6rem + 12vw, 22rem)/.8 var(--f-display); color: transparent; -webkit-text-stroke: 1px var(--line-2); pointer-events: none; }
.sol-stage__media { position: relative; }
.sol-stage__inset { position: absolute; inline-size: 44%; inset-inline-end: -6%; inset-block-end: -10%; }
.sol-stage__inset .sol-fig__m { border: 5px solid var(--surface); box-shadow: var(--shadow-2); }
.sol-stage__inset .sol-cap { display: none; }
.sol-stage__txt { display: grid; gap: 18px; position: relative; }
.sol-stage__k { color: var(--accent-ink); }
.sol-stage__dl { margin: 0; display: grid; gap: 0; }
.sol-stage__dl > div { display: grid; gap: 6px; padding-block: 14px; border-block-start: 1px solid var(--line); }
.sol-stage__dl dt { font: 600 .75rem/1.3 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
:lang(ar) .sol-stage__dl dt, :lang(ur) .sol-stage__dl dt, :lang(zh) .sol-stage__dl dt { letter-spacing: 0; font-size: .875rem; }
.sol-stage__dl dd { margin: 0; font-size: 1.0625rem; color: var(--ink); }
.sol-stage__dl > div:last-child dd { font-weight: 600; }
.sol-seq.is-pinned .sol-stage { block-size: 100%; max-block-size: 640px; }
.sol-seq.is-pinned .sol-seq__track { align-items: center; }
.sol-seq:not(.is-pinned) .sol-seq__track { flex-direction: column; padding-inline: var(--gutter); }
.sol-seq:not(.is-pinned) .sol-stage { inline-size: 100%; }
.sol-seq:not(.is-pinned) .sol-seq__view { overflow: visible; }
.sol-seq:not(.is-pinned) .sol-seq__hint { display: none; }
@media (max-width: 900px) {
  .sol-seq__head { grid-template-columns: minmax(0, 1fr); }
  .sol-seq__rail { display: none; }
  .sol-stage { grid-template-columns: minmax(0, 1fr); }
  .sol-stage__inset { inline-size: 40%; inset-inline-end: 8px; inset-block-end: 36px; }
}

/* O&M loop */
.sol-om__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: center; }
.sol-om__copy { display: grid; gap: 20px; }
.sol-om__list { list-style: none; margin: 8px 0 0; padding: 0; border-block-start: 1px solid var(--line-2); }
.sol-om__list button { display: flex; gap: 16px; align-items: baseline; inline-size: 100%; min-block-size: 52px; padding-block: 12px; text-align: start; border-block-end: 1px solid var(--line); color: var(--ink-2); font-size: 1.0625rem; transition: color .25s, padding .4s var(--ease); }
.sol-om__list button:hover { color: var(--ink); padding-inline-start: 8px; }
.sol-om__list button[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.sol-om__list .mono { color: var(--accent); }
.sol-om__loop { container-type: inline-size; position: relative; inline-size: min(100%, 520px); aspect-ratio: 1; justify-self: center; --prog: .2; }
.sol-om__ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; transform: rotate(-90deg); fill: none; }
[dir="rtl"] .sol-om__ring { transform: rotate(-90deg) scaleY(-1); }
.sol-om__ring .base { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 6; }
.sol-om__ring .prog { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--prog)); transition: stroke-dashoffset .9s var(--ease); stroke-linecap: round; }
.sol-om__node { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 52px; block-size: 52px; margin: -26px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); font: 600 .8125rem var(--f-mono); color: var(--ink-3); transform: rotate(var(--a)) translate(42cqi) rotate(calc(-1 * var(--a))); transition: background-color .4s, color .4s, border-color .4s, box-shadow .4s; }
[dir="rtl"] .sol-om__node { transform: rotate(calc(180deg - var(--a))) translate(42cqi) rotate(calc(var(--a) - 180deg)); }
.sol-om__node.is-past { color: var(--ink); border-color: var(--accent); }
.sol-om__node.is-on { background: var(--accent); color: var(--bg); border-color: var(--accent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent); }
.sol-om__center { position: absolute; inset: 22%; display: grid; align-content: center; justify-items: center; text-align: center; gap: 10px; }
.sol-om__k { color: var(--accent); }
.sol-om__d { color: var(--ink-2); max-inline-size: 26ch; }
.sol-om__note { margin-block-start: clamp(28px, 4vw, 56px); color: var(--ink-3); }
@media (max-width: 900px) { .sol-om__grid { grid-template-columns: minmax(0, 1fr); } .sol-om__loop { inline-size: min(100%, 400px); } }
@media (max-width: 520px) { .sol-om__node { transform: rotate(var(--a)) translate(42cqi) rotate(calc(-1 * var(--a))); inline-size: 44px; block-size: 44px; margin: -22px; } [dir="rtl"] .sol-om__node { transform: rotate(calc(180deg - var(--a))) translate(42cqi) rotate(calc(var(--a) - 180deg)); } .sol-om__center { inset: 20%; } .sol-om__center .h2 { font-size: 1.4rem; } }

/* pull quote */
.sol-quote__fig { margin: 0 auto; display: grid; gap: 20px; }
.sol-quote__q { margin: 0; position: relative; padding-inline-start: clamp(48px, 8vw, 140px); }
.sol-quote__q::before { content: "\201C"; position: absolute; inset-inline-start: 0; inset-block-start: -.18em; font: 600 clamp(6rem, 12vw, 12rem)/1 var(--f-display); color: var(--accent); }
[dir="rtl"] .sol-quote__q::before { content: "\201D"; }
.sol-quote__q p { font: 500 clamp(1.8rem, 1.1rem + 2.8vw, 4rem)/1.15 var(--f-display); max-inline-size: 24ch; text-wrap: balance; }
:lang(ar) .sol-quote__q p, :lang(ur) .sol-quote__q p { line-height: 1.6; }
.sol-quote__fig figcaption { padding-inline-start: clamp(48px, 8vw, 140px); color: var(--ink-3); }