/* The Solar Pumping Inverter page.
 *
 * The page's own layout only. Everything it shares with the rest of the site —
 * the section rhythm, the cards, the image frames, the step list, the tables —
 * is in assets/css/sections.css and style.css, and the drawings are painted by
 * assets/css/illustrations.css. What is here is what is this page's alone: the
 * strip of pictures under the hero, the two arrangements side by side, the four
 * range cards, the selection route, the three power states, the specification
 * tabs and the inquiry at the end.
 *
 * Two habits this sheet keeps.
 *
 * A block is a single column on a narrow screen and a row above the breakpoint,
 * so nothing is positioned so tightly that a longer word or a translation
 * breaks it.
 *
 * Nothing is hidden by this sheet. A tab panel, a state panel and the diagram
 * arrangements are shown and hidden by the behaviour library and by
 * illustrations.css, so a visitor whose browser runs no script still reads the
 * whole page. */

/* --------------------------------------- The services under the hero -- */
/* Four short lines about how an order is placed — supplied from the factory,
   branded, configured to the buyer's own design, designed with the project. They
   are not products to compare, so the strip is typographic rather than a row of
   cards: four equal cells, a small icon and one line each, and a hairline between
   the cells. It sits on the surface colour with a hairline under it, the way the
   band it replaces did, so the navy hero still ends on a light line. */
.inv-services{
  padding-block:clamp(18px,2.4vw,28px);
  border-bottom:1px solid var(--color-line);
  background:var(--color-surface);
}

.inv-services__list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
}

.inv-service{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-width:0;
  padding-inline:clamp(10px,1.4vw,20px);
  border-left:1px solid var(--color-line);
}

.inv-service:first-child{border-left:0}

/* The same 32px tile the site gives an icon everywhere else, on the pale ground
   so it reads as a mark beside the words rather than as a button. */
.inv-service__icon{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  border-radius:var(--radius-sm);
  background:var(--color-pale);
  color:var(--color-accent);
}

.inv-service__label{font-size:15px;font-weight:600;line-height:1.35;color:var(--color-heading)}

/* --------------------------------------- The value, as two arrangements -- */
/* The same pump twice, read against each other: the installation it runs in
   today on the left, and the one this page sells on the right. Each panel runs
   down its own column — a column is what fits beside another panel — and each
   ends in one photograph of that installation. The two pictures share a frame,
   so the panels are read as a pair rather than as two unrelated shots. */
.value-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(20px,2.6vw,32px);
}

.value-flow{
  display:flex;
  flex-direction:column;
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
}

/* The first panel is read quietly, so the second is the one the eye lands on.
   That is carried by the badge the panel prints, now that the two panels hold
   the same kind of content: a tag, a badge, a line and one picture. */

.value-flow__tag{
  margin:0 0 12px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.value-flow__intro{margin:16px 0 0;max-width:72ch;font-size:16px;line-height:1.6;color:var(--color-muted)}

/* The panel's picture stands where the chain of labelled boxes used to, at the
   same distance below the line that introduces the panel. The two frames are the
   same box, so the before and the after are read against each other, and cover
   lets a photograph that is not exactly 16:9 fill it without distortion. The
   frame is a .media-frame like every other picture on the site. */
.value-flow__figure{margin:clamp(22px,3vw,32px) 0 0}
.value-flow__photo{width:100%;height:100%;object-fit:cover}

.value-note{margin-top:clamp(32px,5vw,64px)}
.value-note__photo{width:100%;height:100%;object-fit:cover}

/* ------------------------------------------------------ Feature cards -- */
/* Six capabilities. The photograph comes first, the line drawing and the words
   under it: the picture says where the capability is, the words say what it is. */
.feature-card{display:flex;flex-direction:column;gap:14px}
.feature-card__frame{margin:0;background:var(--color-pale)}
.feature-card__photo{width:100%;height:100%;object-fit:cover}

.feature-card__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:var(--radius-sm);
  background:var(--color-accent-pale);
  color:var(--color-accent);
}

.feature-card__title{margin:0;font-size:17px;font-weight:600;line-height:1.35;color:var(--color-heading)}

/* Six of a kind read as two rows of three. The shared four-column grid fits
   four 220px cards at this width, which leaves the last two of six on a row of
   their own with two empty cells beside them. The minimum is raised here rather
   than the count fixed, so the row still folds to two and then to one as the
   screen narrows. */
.feature-cards,
.pump-cards{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* -------------------------------------------------------- Range cards -- */
.range-cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.range-card{display:flex;flex-direction:column;gap:10px}
.range-card__frame{margin:0 0 6px}

.range-card__range{
  margin:0;
  font-size:clamp(20px,2.2vw,26px);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--color-heading);
  font-variant-numeric:tabular-nums;
}

.range-card__meta{margin:0;font-size:12px;letter-spacing:.02em;color:var(--color-muted)}
.range-card__title{margin:6px 0 0;font-size:15px;font-weight:600;color:var(--color-accent)}
.range-card__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:20px}
.range-card__actions .btn{min-height:44px;padding:10px 16px;font-size:14px}

/* The selection route is no longer laid out here: it is the one block on this
   page that is a set of answers and a panel that follows them, so it carries its
   own sheet (assets/css/inverter-selector.css) and the classes it prints all
   begin with "sel-" or "select-" and belong to it. */

/* ------------------------------------------------------- Power states -- */
/* The three states the system runs in, drawn as one picture: the array and the
   AC feed on either side of the inverter, the pump under it and the water at
   the end of the run. The equipment never moves, so a visitor compares three
   states of one system rather than reading three different drawings, and the
   state changes only what is switched on, how bright its line is and what the
   sky is doing.
 *
 * The rules below are written as the sunny state, which is the one the markup
 * ships in: a visitor whose browser runs no script — or who asked their system
 * for less motion — gets the whole system drawn, still, with nothing travelling
 * on it.
 *
 * The photograph behind the section is atmosphere only: laid at a seventh of
 * its strength under a white-to-transparent gradient, so the drawing keeps its
 * contrast whatever the picture is. */
.hybrid-section{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--color-surface);
}

.hybrid-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:linear-gradient(180deg,var(--color-surface),transparent 78%),var(--hybrid-photo,none);
  background-position:center;
  background-size:cover;
  filter:blur(3px);
  opacity:.14;
}

/* The drawing takes about two thirds of the row and the words the rest. The DOM
   order already gives the order the section reads in — drawing, states,
   description, no-battery card, call to action — so a narrow screen only has to
   drop to one column. */
.hyb{
  display:grid;
  grid-template-columns:minmax(0,65fr) minmax(0,35fr);
  gap:clamp(24px,3.5vw,48px);
  align-items:start;
}

/* The drawing panel: the pale frame the site's pictures use, so a section that
   mixes a photograph and a drawing keeps one rhythm. It isolates its own layers
   because the sky behind the drawing is a negative z-index layer inside it. */
.hyb__stage{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:0;
  padding:clamp(16px,2.4vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-pale);
}

/* The sky the drawing stands in, behind everything else in the panel: a soft
   gradient rather than a picture, so the state changes the light without
   changing what the visitor has to read. All three are light on purpose — the
   page is a white/navy site and the labels on the drawing are navy — and only
   the ground colour changes, which is what lets the change interpolate in every
   browser instead of jumping. */
.hyb__weather{
  position:absolute;
  inset:0;
  z-index:-1;
  background-color:var(--color-pale);
  background-image:linear-gradient(180deg,transparent,var(--color-surface) 88%);
  transition:background-color 650ms ease;
}

.hyb[data-state="sunny"] .hyb__weather{background-color:var(--color-sun-pale)}
.hyb[data-state="cloudy"] .hyb__weather{background-color:var(--color-line)}
.hyb[data-state="night"] .hyb__weather{background-color:var(--color-field-line)}

/* The state said in words on the drawing itself, so the picture and the panel
   beside it can never disagree about which state is showing. It sits in the
   top-right corner rather than the top-left, because the sun's glow is drawn
   into that corner of both arrangements. */
.hyb__status{
  position:absolute;
  top:clamp(12px,1.6vw,18px);
  right:clamp(12px,1.6vw,18px);
  z-index:2;
  margin:0;
}

.hyb__chip{
  display:none;
  align-items:center;
  min-height:30px;
  padding:5px 14px;
  border:1px solid var(--color-line);
  border-radius:999px;
  background:rgba(255,255,255,.86);
  color:var(--color-heading);
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
}

.hyb[data-state="sunny"] .hyb__chip[data-chip="sunny"],
.hyb[data-state="cloudy"] .hyb__chip[data-chip="cloudy"],
.hyb[data-state="night"] .hyb__chip[data-chip="night"]{display:inline-flex}

/* Two arrangements of the one drawing, one shown at a time: a phone gets a
   stacked system at its own size rather than a shrunken wide one. */
.hyb__svg{display:block;width:100%;height:auto;overflow:visible}
.hyb__svg--stack{display:none}
.hyb__caption{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--color-muted)}

/* ------------------------------------------------------- The drawing -- */
/* Every colour comes from the tokens, and the drive is the one filled, accented
   object: it is the part the page sells. The array's energy is the deeper amber
   rather than the sun accent, because a 2px line of the accent on white is not
   readable. */
.hyb-sky__disc{fill:var(--color-sun)}
.hyb-sky__glow{fill:var(--color-sun);opacity:0}
.hyb-sky__rays{stroke:var(--ill-energy-line);stroke-width:2;stroke-linecap:round}
.hyb-sky__moon{fill:var(--color-surface);stroke:var(--color-line);stroke-width:1.5}
.hyb-sky__cloud{fill:var(--color-surface);stroke:var(--color-line);stroke-width:1.5;stroke-linejoin:round}

/* The cloud and the moon are drawn in the markup but hidden here: the sunny
   state is the one the section starts in, and the sky shows one of the three. */
.hyb-sky__cloud,
.hyb-sky__moon{opacity:0}

.hyb-pv__frame{fill:var(--ill-panel);stroke:var(--ill-energy-line);stroke-width:2.5}
.hyb-pv__cells{fill:var(--color-pale);stroke:var(--ill-energy-line);stroke-width:1.5;stroke-linejoin:round}

.hyb-grid__base{stroke:var(--ill-structure);stroke-width:2.5;stroke-linecap:round}
.hyb-grid__tower{fill:none;stroke:var(--ill-structure);stroke-width:2;stroke-linecap:round}
.hyb-grid__set{fill:var(--color-surface);stroke:var(--ill-structure-soft);stroke-width:2}

.hyb-inv__body{fill:var(--ill-drive-pale);stroke:var(--ill-drive);stroke-width:2.5}
.hyb-inv__lid{fill:var(--ill-drive)}
.hyb-inv__display{fill:var(--color-surface);stroke:var(--ill-drive);stroke-width:1.5}
.hyb-inv__readout{fill:none;stroke:var(--ill-energy-line);stroke-width:2;stroke-linecap:round}
.hyb-inv__led{fill:var(--ill-energy-line)}
.hyb-inv__vents{fill:var(--ill-drive);opacity:.35}
.hyb-inv__terminals{fill:var(--color-surface);stroke:var(--ill-drive);stroke-width:1.5}
.hyb-inv__blocks{fill:var(--ill-drive)}

.hyb-pump__base{fill:var(--color-pale);stroke:var(--ill-structure);stroke-width:2}
.hyb-pump__motor{fill:var(--color-surface);stroke:var(--ill-structure);stroke-width:2.5}
.hyb-pump__fins{fill:var(--ill-structure-soft)}
.hyb-pump__coupling{fill:var(--ill-structure-soft)}
.hyb-pump__casing{fill:var(--color-surface);stroke:var(--ill-structure);stroke-width:2.5}
.hyb-pump__eye{fill:var(--ill-drive-pale);stroke:var(--ill-structure);stroke-width:1.5}
.hyb-pump__discharge{fill:var(--color-pale);stroke:var(--ill-structure);stroke-width:2}

.hyb-water__pipe{fill:none;stroke:var(--ill-water);stroke-width:4;stroke-linecap:round}
.hyb-water__drops{fill:var(--ill-water)}
.hyb-water__furrows{fill:none;stroke:var(--ill-water);stroke-width:1.5;stroke-linecap:round;opacity:.55}

.hyb-label{fill:var(--color-heading);font-family:var(--font-body);font-size:var(--hyb-fs,15px);font-weight:600}
.hyb-label--strong{font-weight:700}

/* Every colour a state changes is the same 200ms change the rest of the site
   uses for a colour, so the drawing never jumps from one state to the next. */
.hyb-link__line,
.hyb-link__head,
.hyb-sky__disc,
.hyb-sky__rays,
.hyb-sky__cloud,
.hyb-sky__moon,
.hyb-part--pv{transition:stroke var(--transition-mid),fill var(--transition-mid),opacity var(--transition-mid)}

/* A link is complete at rest — the picture needs no script — and normalised with
   pathLength="100", which is what lets one dash scale drive a line of any
   length: the line draws itself in, and a travelling highlight reads as a flow
   because a wide faint copy of the same path sits under a small bright one. */
.hyb-link__line{fill:none;stroke:var(--color-line);stroke-width:2;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.hyb-link__head{stroke:none;fill:var(--color-line)}
.hyb-link[data-kind="solar"] .hyb-link__line{stroke:var(--ill-energy-line)}
.hyb-link[data-kind="solar"] .hyb-link__head{fill:var(--ill-energy-line)}
.hyb-link[data-kind="grid"] .hyb-link__line{stroke:var(--color-line);stroke-dasharray:7 6}
.hyb-link[data-kind="grid"] .hyb-link__head{fill:var(--color-line)}
.hyb-link[data-kind="out"] .hyb-link__line{stroke:var(--ill-drive)}
.hyb-link[data-kind="out"] .hyb-link__head{fill:var(--ill-drive)}
.hyb-link[data-kind="water"] .hyb-link__line{stroke:var(--ill-water)}
.hyb-link[data-kind="water"] .hyb-link__head{fill:var(--ill-water)}

/* Four speeds, so the four flows never move in lockstep. The particles are off
   until the section is being read (.is-live), which is what keeps the drawing
   still for a visitor who never scrolls to it. */
.hyb-link[data-kind="solar"]{--hyb-speed:3.2s}
.hyb-link[data-kind="grid"]{--hyb-speed:4.2s}
.hyb-link[data-kind="out"]{--hyb-speed:2.6s}
.hyb-link[data-kind="water"]{--hyb-speed:3.6s}

.hyb-flow__glow,
.hyb-flow__dot{fill:none;stroke-linecap:round;stroke-dasharray:10 90;stroke-dashoffset:100;opacity:0}

.hyb-flow__glow{stroke-width:12;stroke:var(--ill-energy-line)}
.hyb-flow__dot{stroke-width:6;stroke:var(--ill-energy-line)}
.hyb-link[data-kind="grid"] .hyb-flow__glow,
.hyb-link[data-kind="grid"] .hyb-flow__dot,
.hyb-link[data-kind="out"] .hyb-flow__glow,
.hyb-link[data-kind="out"] .hyb-flow__dot{stroke:var(--ill-drive)}
.hyb-link[data-kind="water"] .hyb-flow__glow,
.hyb-link[data-kind="water"] .hyb-flow__dot{stroke:var(--ill-water)}

.hyb.is-live .hyb-flow__dot{opacity:1;animation:hober-flow-dash var(--hyb-speed,3.2s) linear infinite}
.hyb.is-live .hyb-flow__glow{opacity:.16;animation:hober-flow-pulse var(--hyb-speed,3.2s) ease-in-out infinite}

/* --------------------------------------------------- What a state does -- */
/* Sunny: the array runs the pump. The solar path is lit and travelling, and the
   AC feed is on standby — drawn, dashed and still, which is what standby looks
   like, so a visitor can see the second source is there and not in use. */
.hyb[data-state="sunny"] .hyb-sky__glow{opacity:.35}
.hyb[data-state="sunny"] .hyb-link[data-kind="grid"] .hyb-flow__dot,
.hyb[data-state="sunny"] .hyb-link[data-kind="grid"] .hyb-flow__glow{opacity:0;animation:none}

/* Cloudy: the sun is behind the cloud and the array is still working, so the
   solar path stays lit but dimmer and slower — the sun's own numbers, said in
   motion — and the AC feed takes up the rest of the load. */
.hyb[data-state="cloudy"] .hyb-sky__disc,
.hyb[data-state="cloudy"] .hyb-sky__rays{opacity:.45}
.hyb[data-state="cloudy"] .hyb-sky__glow{opacity:.22}
.hyb[data-state="cloudy"] .hyb-sky__cloud{opacity:1}
.hyb[data-state="cloudy"] .hyb-link[data-kind="solar"] .hyb-link__line,
.hyb[data-state="cloudy"] .hyb-link[data-kind="solar"] .hyb-link__head{opacity:.75}
.hyb[data-state="cloudy"] .hyb-link[data-kind="solar"]{--hyb-speed:6.4s}
.hyb[data-state="cloudy"] .hyb-link[data-kind="grid"] .hyb-link__line{stroke:var(--ill-drive);stroke-dasharray:100}
.hyb[data-state="cloudy"] .hyb-link[data-kind="grid"] .hyb-link__head{fill:var(--ill-drive)}

/* Night: there is no array output to draw, so the array fades and its edges go
   grey and the solar path stops travelling — the state says so in words beside
   it as well. The moon takes the sun's place and the AC feed carries the pump. */
.hyb[data-state="night"] .hyb-sky__disc,
.hyb[data-state="night"] .hyb-sky__rays,
.hyb[data-state="night"] .hyb-sky__glow,
.hyb[data-state="night"] .hyb-sky__cloud{opacity:0}
.hyb[data-state="night"] .hyb-sky__moon{opacity:1}
.hyb[data-state="night"] .hyb-part--pv{opacity:.4}
.hyb[data-state="night"] .hyb-pv__frame,
.hyb[data-state="night"] .hyb-pv__cells{stroke:var(--ill-structure-soft)}
.hyb[data-state="night"] .hyb-link[data-kind="solar"] .hyb-link__line{stroke:var(--ill-structure-soft)}
.hyb[data-state="night"] .hyb-link[data-kind="solar"] .hyb-link__head{fill:var(--ill-structure-soft)}
.hyb[data-state="night"] .hyb-link[data-kind="solar"] .hyb-flow__dot,
.hyb[data-state="night"] .hyb-link[data-kind="solar"] .hyb-flow__glow{opacity:0;animation:none}
.hyb[data-state="night"] .hyb-link[data-kind="grid"] .hyb-link__line{stroke:var(--ill-drive);stroke-dasharray:100}
.hyb[data-state="night"] .hyb-link[data-kind="grid"] .hyb-link__head{fill:var(--ill-drive)}

/* ------------------------------------------------ The opening sequence -- */
/* Played once, in the order the system is built — sky, array, AC feed, drive,
   pump, water — with each part carrying its own delay in --hyb-in. Fill-mode
   backwards is what holds the start state during that delay, so a part does not
   appear before its turn, and nothing here flashes, pulses or loops. */
@keyframes hyb-part-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

@keyframes hyb-label-in{
  from{opacity:0}
  to{opacity:1}
}

@keyframes hyb-line-in{
  from{stroke-dashoffset:100}
  to{stroke-dashoffset:0}
}

@keyframes hyb-head-in{
  from{opacity:0}
  to{opacity:1}
}

.hyb.is-live .hyb-part > g{animation:hyb-part-in 500ms ease-out var(--hyb-in,0ms) 1 backwards}
.hyb.is-live .hyb-label{animation:hyb-label-in 500ms ease-out var(--hyb-in,0ms) 1 backwards}
.hyb.is-live .hyb-link__line{animation:hyb-line-in 550ms ease-out var(--hyb-in,0ms) 1 backwards}
.hyb.is-live .hyb-link__head{animation:hyb-head-in 300ms ease-out calc(var(--hyb-in,0ms) + 320ms) 1 backwards}

/* The loops that run while the section is being read: the sun's glow, the cloud
   drifting a few percent across it, the impeller turning in its casing and the
   spray falling on the furrows. All slow, and all of them stop together when
   the section is scrolled out of view. */
@keyframes hyb-glow-breathe{
  0%,100%{opacity:.28}
  50%{opacity:.5}
}

@keyframes hyb-cloud-drift{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(7px)}
}

@keyframes hyb-impeller{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes hyb-spray{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(3px)}
}

.hyb.is-live[data-state="sunny"] .hyb-sky__glow,
.hyb.is-live[data-state="cloudy"] .hyb-sky__glow{animation:hyb-glow-breathe 6s ease-in-out infinite}
.hyb.is-live[data-state="cloudy"] .hyb-sky__cloud{animation:hyb-cloud-drift 12s ease-in-out infinite}
.hyb.is-live .hyb-pump__impeller{animation:hyb-impeller 7s linear infinite}
.hyb.is-live .hyb-water__drops{animation:hyb-spray 6.5s ease-in-out infinite}

/* The impeller turns about the centre of its own casing: the fill-box of that
   group is the three spokes, and their centre is the casing centre. The pump
   keeps running in every state, which is the point of the section. */
.hyb-pump__impeller{transform-box:fill-box;transform-origin:center}

/* Off screen the section keeps every pixel of its picture and loses only its
   motion: pausing is cheaper than stopping and leaves the drawing exactly where
   the visitor left it. Nothing is ever hidden here. */
.hyb.is-away .hyb-flow__dot,
.hyb.is-away .hyb-flow__glow,
.hyb.is-away .hyb-sky__glow,
.hyb.is-away .hyb-sky__cloud,
.hyb.is-away .hyb-pump__impeller,
.hyb.is-away .hyb-water__drops{animation-play-state:paused}

/* ------------------------------------------------------------ The tabs -- */
/* The state is the visitor's to choose, so the three states are the site's own
   state buttons: a pill, the site's transition on colour, and the accent when
   chosen. The tab set itself, and which panel is hidden, is assets/js/tabs.js
   and assets/css/tabs.css — this sheet only says what they look like. */
.hyb__aside{display:flex;flex-direction:column;gap:22px;min-width:0}
.hyb__list{display:flex;flex-wrap:wrap;gap:10px}

.hyb__tab{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:10px 18px;
  border:1px solid var(--color-line);
  border-radius:999px;
  background:var(--color-surface);
  color:var(--color-heading);
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background var(--transition-mid),border-color var(--transition-mid),color var(--transition-mid);
}

.hyb__tab:hover{border-color:var(--color-accent);color:var(--color-accent)}
.hyb__tab[aria-selected="true"]{border-color:var(--color-accent);background:var(--color-accent);color:#fff}
.hyb__tab:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.hyb__tab-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px}
.hyb__tab[aria-selected="true"] .hyb__tab-icon{color:#fff}

/* ----------------------------------------------------------- The panel -- */
/* The same three states as words, so the section answers a visitor who never
   touches a tab and a screen reader that is given the same three answers. */
.hyb__panels{min-width:0}
.hyb__panel-title{margin:0 0 10px;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--color-heading)}
.hyb__panel-text{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--color-muted)}
.hyb__mix{margin:0}
.hyb__mix-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:7px 0}
.hyb__mix-row dt{margin:0;font-size:14px;font-weight:600;color:var(--color-heading)}
.hyb__mix-row dd{display:flex;align-items:center;gap:12px;margin:0}
.hyb__mix-bar{display:inline-block;width:56px;height:6px;border-radius:999px;background:var(--color-line);overflow:hidden}
.hyb__mix-fill{display:block;height:100%;width:var(--hyb-fill,0%);border-radius:999px;background:var(--ill-energy-line)}

/* Solar is the amber row and the AC feed is the blue one, in the drawing and in
   the figures: the two rows are told apart by where they are in the list rather
   than by a colour invented for them. */
.hyb__mix-row:nth-child(2) .hyb__mix-fill{background:var(--ill-drive)}
.hyb__mix-value{min-width:46px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:var(--color-heading)}
.hyb__mix-note{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--color-muted)}

/* Not a battery: the section says why there is none, on the pale sun ground the
   page already uses for a note, and stays small so it never reads as a second
   panel beside the drawing. */
.hyb__battery{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:var(--radius-md);background:var(--color-sun-pale)}
.hyb__battery-icon{display:flex;flex:0 0 auto;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-surface);color:#7a5a12}
.hyb__battery-title{margin:0 0 4px;font-size:15px;font-weight:700;color:#7a5a12}
.hyb__battery-body p{margin:0 0 6px;font-size:13px;line-height:1.55;color:#7a5a12}
.hyb__battery-note{margin:0;font-size:12px;line-height:1.5;opacity:.85}

/* The way out of the section. The buttons and the row they sit in are the site's
   own; only the heading above them belongs to this component, and the rule above
   it is what separates the two questions — which state, and what to buy. */
.hyb__cta{margin:0;padding-top:22px;border-top:1px solid var(--color-line)}
.hyb__cta-title{margin:0;font-size:18px;font-weight:700;line-height:1.35;color:var(--color-heading)}

/* ---------------------------------------------------------- Responsive -- */
/* The wide arrangement is swapped for the stacked one at the same breakpoint
   illustrations.css uses for its own stacked diagrams. */
@media (max-width:820px){
  .hyb__svg--wide{display:none}
  .hyb__svg--stack{display:block}
}

/* A phone swipes the three states rather than wrapping them: three wrapped pills
   would push the drawing off the screen, and there is no hover on touch. */
@media (max-width:640px){
  .hyb__stage{padding:14px}
  .hyb__list{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .hyb__list::-webkit-scrollbar{display:none}
  .hyb__tab{flex:0 0 auto;scroll-snap-align:start}
}

/* Reduced motion: the states still change, they just arrive as a plain swap. No
   particle is ever drawn, nothing turns, nothing breathes and no colour eases —
   and the drawing is complete without any of it, so a visitor who asked for
   less motion gets the answer rather than an empty panel. */
@media (prefers-reduced-motion: reduce){
  .hyb,
  .hyb *{animation:none !important;transition:none !important}
  .hyb-flow__dot,
  .hyb-flow__glow{opacity:0 !important}
}

/* --------------------------------------------------------- Pump duties -- */
.pump-card{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.pump-card__frame{margin:0;width:100%}
.pump-card__photo{width:100%;height:100%;object-fit:contain}
.pump-card__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-accent-pale);color:var(--color-accent)}
.pump-card__title{margin:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--color-heading)}
.pump-cards__cta{margin-top:28px}

/* --------------------------------------------------- Monitoring block -- */
.monitor{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3.5vw,48px);
  align-items:start;
}

.monitor__screen{padding:clamp(16px,2.4vw,28px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-pale)}
.monitor__svg{display:block;width:100%;height:auto}
.monitor__body{display:flex;flex-direction:column;gap:20px;min-width:0}
.monitor__list{margin:0}
.monitor__connect{margin:0}
.monitor__shot{margin:0}
.monitor__photo{width:100%;height:100%;object-fit:cover}
.monitor__cta{margin-top:0}
.monitor__note{margin-top:0}

/* ------------------------------------------------ Specification table -- */
/* The whole range in one table: one row per model, one column per basic
   parameter, and a last column handing that model on to the page that publishes
   it in full. There is no tab strip to switch any more, so this block hides no
   row and no column, and its class names carry the prefix "inv-models" rather
   than the deleted component's "spec-families". */
.inv-models{
  margin-top:clamp(24px,3vw,40px);
  padding:clamp(18px,2.4vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-surface);
}

/* The scrolling region. It carries tabindex="0" and role="region" in the markup,
   so a keyboard visitor can reach the table and scroll it. */
.inv-models__scroll{
  overflow-x:auto;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  -webkit-overflow-scrolling:touch;
}

/* Seven columns stay legible because the table keeps a minimum width and the
   region scrolls instead: below that width the cells would fold a word per line.
   The header row is left plain rather than sticky — the region scrolls sideways
   only, so a sticky offset would hold it against an edge that never moves — and
   each row is read as one line of figures, which is why the cells do not wrap. */
.inv-models__table{width:100%;min-width:720px;border-collapse:collapse;font-size:14px}
.inv-models__table caption{text-align:left;padding:14px 16px 12px;font-size:12px;line-height:1.5;color:var(--color-muted)}

.inv-models__table th,
.inv-models__table td{padding:12px 14px;border-bottom:1px solid var(--color-line);text-align:left;vertical-align:middle;white-space:nowrap}

.inv-models__table thead th{
  background:var(--color-pale);
  color:var(--color-heading);
  font-size:13px;
  font-weight:700;
}

/* The model is the row's own heading, so it reads heavier than the figures
   beside it, and the figures are set in lining tabular digits so a column of
   them can be compared down the page. */
.inv-models__model{font-weight:600;color:var(--color-heading)}
.inv-models__value{color:var(--color-text);font-variant-numeric:tabular-nums}
/* A figure the model's own page does not state: quieter than a figure, because
   it is the absence of one rather than a value to compare. */
.inv-models__empty{color:var(--color-muted)}
.inv-models__action{white-space:nowrap}
/* The site's .text-link is a space-between row written for a card foot, so in a
   table cell it is set to hug its own words, the way the collection table's own
   action link is. */
.inv-models__action .text-link{display:inline-flex;font-size:13px}
.inv-models__table tbody tr:last-child th,
.inv-models__table tbody tr:last-child td{border-bottom:0}
.inv-models__table tbody tr:hover th,
.inv-models__table tbody tr:hover td{background:var(--color-pale)}

.inv-models__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.inv-models__note{margin:18px 0 0;font-size:13px;line-height:1.55;color:var(--color-muted);max-width:80ch}

/* --------------------------------------------------------- Applications -- */
.app-cards{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.app-card{display:flex;flex-direction:column;gap:14px;padding:0;overflow:hidden}
.app-card__frame{margin:0;border:0;border-radius:0;border-bottom:1px solid var(--color-line)}
.app-card__photo{width:100%;height:100%;object-fit:cover}
.app-card__body{display:flex;flex-direction:column;gap:8px;padding:0 clamp(18px,2.2vw,24px) clamp(18px,2.2vw,24px)}
.app-card__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--color-accent-pale);color:var(--color-accent)}
.app-card__title{margin:0;font-size:17px;font-weight:600;color:var(--color-heading)}
.app-card__note{margin:0;font-size:14px;line-height:1.55;color:var(--color-muted)}
.app-cards__cta{margin-top:28px}

/* ------------------------------------------------------- Support block -- */
.support-photo{width:100%;height:100%;object-fit:cover}
.support-list{margin-top:24px;gap:20px}

/* ---------------------------------------------------------- The inquiry -- */
.inv-cta__grid{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}

.inv-cta__form{padding:clamp(20px,2.6vw,32px);border:1px solid var(--color-line);border-radius:var(--radius-lg);background:var(--color-surface)}
.inv-cta__actions{margin-top:24px}
.inv-cta__aside{display:flex;flex-direction:column;gap:20px}
.inv-cta__photo{width:100%;height:100%;object-fit:cover}
.inv-cta__list{gap:18px}

/* ----------------------------------------------------------- Responsive -- */
@media (max-width:1000px){
  .hyb,
  .monitor,
  .inv-cta__grid{grid-template-columns:minmax(0,1fr);gap:28px}
}

/* One panel under the other once two of them no longer fit side by side. */
@media (max-width:860px){
  .value-pair{grid-template-columns:minmax(0,1fr)}
}

/* The service strip folds to two cells and then to one. The rule between the
   cells turns with the grid: a hairline above a cell rather than at its left, so
   the strip reads as rows of lines at every width. */
@media (max-width:860px){
  .inv-services__list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inv-service{
    justify-content:flex-start;
    padding-block:12px;
    padding-inline:0;
    border-left:0;
    border-top:1px solid var(--color-line);
  }
  .inv-service:nth-child(-n+2){border-top:0}
}

@media (max-width:640px){
  .inv-services__list{grid-template-columns:minmax(0,1fr)}
  .inv-service:nth-child(-n+2){border-top:1px solid var(--color-line)}
  .inv-service:first-child{border-top:0}
  /* The table keeps its minimum width — the region scrolls it — so only the type
     and the cell padding come down and seven columns stay legible. */
  .inv-models{padding:14px}
  .inv-models__table{font-size:13px}
  .inv-models__table th,
  .inv-models__table td{padding:10px}
}