/* Theme Name: HOBER Solar Water Pump
   Description: HOBER B2B solar pumping site. Design tokens live in assets/css/tokens.css.
   Version: 2.0.0
   Text Domain: hober */

/* ------------------------------------------------------------------ Base -- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:100px}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--color-surface);color:var(--color-text);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body)}
img{display:block;max-width:100%;height:auto}
a{color:var(--color-accent);text-underline-offset:4px}
p{margin:0 0 1em;max-width:70ch}
h1,h2,h3{font-family:var(--font-display);color:var(--color-heading);line-height:1.15;letter-spacing:-.03em;margin:0 0 .5em}
h1{font-size:clamp(32px,4.1vw,56px);font-weight:700;line-height:1.12}
h2{font-size:clamp(26px,3vw,40px);font-weight:700;line-height:1.2}
h3{font-size:clamp(18px,2vw,23px);font-weight:600;letter-spacing:-.02em}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.container{width:100%;max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter)}
.skip-link{position:absolute;top:-100px;left:20px;z-index:100;padding:10px 14px;background:var(--color-surface);color:var(--color-heading);text-decoration:none}
.skip-link:focus{top:8px}

/* ---------------------------------------------------------------- Shared -- */
.eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 20px;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--color-accent)}
.eyebrow::before{content:"";flex:none;width:24px;height:3px;background:var(--color-sun)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:13px 23px;border:1px solid var(--color-accent);border-radius:var(--radius-sm);background:var(--color-accent);color:#fff;font-size:15px;font-weight:600;text-decoration:none;transition:background var(--transition-fast),border-color var(--transition-fast)}
.btn:hover{background:var(--color-accent-dark);border-color:var(--color-accent-dark)}
.btn--outline{background:var(--color-surface);color:var(--color-accent)}
.btn--outline:hover{background:var(--color-accent-pale)}
.arrow{font-size:18px;font-weight:400;line-height:1}
.text-link{display:flex;justify-content:space-between;gap:16px;font-size:14px;font-weight:600;text-decoration:none}
.section{padding-block:var(--section-space)}
.section--pale{background:var(--color-pale)}
.section--navy{background:var(--color-navy);color:#d2deea}
.section--navy h2,.section--navy h3{color:#fff}
.section--navy .eyebrow{color:#bed8fa}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:36px}
.section__sub{max-width:430px;margin:0;color:var(--color-muted);font-size:16px}
.section--navy .section__sub{color:#d2deea}
.caption{margin:12px 0 0;font-size:12px;color:var(--color-muted)}

/* ---------------------------------------------------------------- Header -- */
/* The header is a single row at every width: the strip that used to sit above
   it is gone, and the address it held now sits in the row itself. */
.site-header{position:sticky;top:0;z-index:20;background:var(--color-surface);border-bottom:1px solid var(--color-line)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:84px;padding-block:12px}
.header__actions{display:flex;flex:none;align-items:center;gap:20px}
.header__mail{font-size:13px;font-weight:600;color:var(--color-muted);text-decoration:none;white-space:nowrap}
.header__mail:hover{color:var(--color-accent)}
.brand{display:flex;flex-direction:column;gap:6px;text-decoration:none}
.brand__name{font-size:clamp(22px,2.4vw,30px);font-weight:800;font-style:italic;letter-spacing:-1.5px;line-height:1;color:var(--color-accent)}
.brand__tagline{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--color-navy)}
.brand__logo{display:block;width:auto;height:44px}
.custom-logo-link{display:inline-flex;flex:none}
.custom-logo{width:auto;height:44px}
.site-nav{display:flex}
.nav-list{display:flex;flex-wrap:nowrap;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.nav-list > .menu-item{position:relative}
.nav-list a{display:block;font-size:14px;font-weight:600;color:var(--color-navy);text-decoration:none;white-space:nowrap}
.nav-list > .menu-item > a{padding:10px 12px;border-radius:var(--radius-sm)}
.nav-list > .menu-item > a:hover,.nav-list > .menu-item:focus-within > a{color:var(--color-accent);background:var(--color-accent-pale)}
/* A parent says it opens: the caret is drawn by the stylesheet, so a menu
   assigned to the theme location gets it without a walker. It turns over as
   the panel opens. */
.menu-item-has-children > a::after{content:"▾";display:inline-block;margin-left:7px;font-size:9px;line-height:1;color:var(--color-muted);transform:translateY(-1px);transition:color var(--transition-fast),transform var(--transition-fast)}
.menu-item-has-children:hover > a::after,.menu-item-has-children:focus-within > a::after{color:var(--color-accent);transform:translateY(-1px) rotate(180deg)}
/* The second level: a panel that drops below the row, opened by hover for a
   pointer and by focus-within for a keyboard, so it needs no JavaScript. A
   closed panel is hidden with visibility rather than display, so it can rise
   into place and its links stay out of the tab order until it opens. The
   invisible strip above it keeps the pointer inside the item while it travels
   down from the parent into the panel. */
.nav-list > .menu-item-has-children::after{content:"";position:absolute;left:-6px;right:-6px;top:100%;height:10px}
/* The panel is white, like the header it drops from: a thin line and a soft
   shadow separate it from the page behind it. It sits close under the
   parent's name, the way a dropdown usually sits, and lists its entries in a
   single column. */
.sub-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:5;display:grid;gap:1px;width:max-content;min-width:0;max-width:min(380px,calc(100vw - 40px));margin:0;padding:10px 8px;list-style:none;background:#fff;border:1px solid var(--color-line);border-radius:12px;box-shadow:0 24px 50px rgba(18,48,74,.16),0 4px 14px rgba(18,48,74,.08);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast)}
.sub-menu::before{content:"";position:absolute;top:-5px;left:24px;width:9px;height:9px;background:#fff;border-left:1px solid var(--color-line);border-top:1px solid var(--color-line);transform:rotate(45deg)}
.menu-item-has-children:hover > .sub-menu,.menu-item-has-children:focus-within > .sub-menu{visibility:visible;opacity:1;transform:translateY(0)}
/* A visitor who asks for no motion gets the panel at once instead of its rise. */
@media (prefers-reduced-motion:reduce){.sub-menu{transition:none;transform:none}}
/* A touch screen cannot hover, so the script opens the panel on the first tap
   and lets the second one follow the link (see site.js, section 1b). */
.menu-item-has-children.is-open > .sub-menu{visibility:visible;opacity:1;transform:translateY(0)}
.menu-item-has-children.is-open > a::after{color:var(--color-accent);transform:translateY(-1px) rotate(180deg)}
/* The last item sits near the right edge of the row, so its panel opens back
   towards the row instead of off the side of the screen. */
.nav-list > .menu-item:last-child > .sub-menu{left:auto;right:0}
.nav-list > .menu-item:last-child > .sub-menu::before{left:auto;right:24px}
/* The panel names the group it holds, so a column of entries still says what
   the visitor is looking at. The rule under the label is its only ornament. */
.sub-menu__head{grid-column:1/-1;padding:2px 13px 11px}
.sub-menu__eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--color-accent)}
.sub-menu__eyebrow::after{content:"";display:block;width:22px;height:2px;margin-top:5px;border-radius:1px;background:var(--color-sun)}
/* One panel entry: the page's name, so the panel answers "where do I go" rather
   than repeating the labels. The accent bar and the arrow arrive together on
   hover or keyboard focus. */
.sub-menu a{position:relative;display:block;padding:11px 32px 11px 13px;border-radius:8px;white-space:normal;color:var(--color-text);transition:background var(--transition-fast)}
/* A second-level entry opens with a small line drawing in a pale tile, then the
   page's name, so the panel can be read at a glance. Only the second level
   carries a tile: a series link stays a plain link, so the drawing never
   competes with the list beside it. */
.sub-menu > .menu-item > a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;padding-left:10px}
.sub-menu__icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--color-accent-pale);color:var(--color-accent);transition:background var(--transition-fast),color var(--transition-fast)}
.sub-menu__text{display:block;min-width:0}
.sub-menu > .menu-item > a:hover .sub-menu__icon{background:var(--color-accent);color:#fff}
.sub-menu a::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 2px 2px 0;background:var(--color-sun);transform:scaleY(0);transform-origin:50% 0;transition:transform var(--transition-fast)}
.sub-menu a:hover{background:var(--color-accent-pale)}
.sub-menu a:hover::before,.sub-menu a:focus-visible::before{transform:scaleY(1)}
.sub-menu__label{display:block;font-size:14px;font-weight:600;color:var(--color-heading)}
.sub-menu a:hover .sub-menu__label{color:var(--color-accent)}
.sub-menu__go{position:absolute;right:13px;top:50%;font-size:13px;line-height:1;color:var(--color-accent);opacity:0;transform:translateY(-50%);transition:opacity var(--transition-fast)}
.sub-menu a:hover .sub-menu__go,.sub-menu a:focus-visible .sub-menu__go{opacity:1}
.header__cta{flex:none}
.menu-toggle{display:none;padding:8px 12px;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-navy);font-size:15px;font-weight:600;cursor:pointer}

/* --------------------------------------------- Third level: product series -- */
/* The Products panel carries a third level, so it is the wide one. It hangs
   from the header container rather than from its own nav item, which is what
   keeps a list of every series inside the page at any width. */
.site-header__inner{position:relative}
.nav-list > .menu-item--mega{position:static}
.nav-list > .menu-item--mega::after{display:none}
.sub-menu--mega{--mega-col:260px;--mega-gap:18px;--mega-pad:12px;
  left:0;right:auto;top:calc(100% + 6px);width:max-content;min-width:0;max-width:calc(var(--content-max) - 2 * var(--gutter));
  align-content:start;padding:12px var(--mega-pad);
  grid-template-columns:minmax(0,var(--mega-col)) max-content;gap:1px var(--mega-gap)}
.sub-menu--mega::before{display:none}
/* The 6px the panel floats below the row stays hoverable, so the pointer
   travels from the nav item into the panel without the panel closing. */
.sub-menu--mega::after{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
/* Every entry of the section list stays in the first column. The second column
   is where the series pane hangs, so an entry the grid places there lands under
   the series instead of beside it. */
.sub-menu--mega > .sub-menu__head,
.sub-menu--mega > .menu-item{grid-column:1}
/* The second column holds the series of one section at a time, and only while
   the visitor points at that section. */
.sub-menu--mega > .menu-item--series-default > a,
.sub-menu--mega > .menu-item:hover > a{background:var(--color-accent-pale)}
.sub-menu--mega > .menu-item--series-default > a .sub-menu__label,
.sub-menu--mega > .menu-item:hover > a .sub-menu__label{color:var(--color-accent)}
.sub-menu--mega > .menu-item--series-default > a .sub-menu__go,
.sub-menu--mega > .menu-item:hover > a .sub-menu__go{opacity:1}
/* While a section is pointed at, the default section is no longer the one
   whose list is out, so its row leaves the lit state too. */
.sub-menu--mega:has(> .menu-item--series:hover) > .menu-item--series-default:not(:hover) > a,
.sub-menu--mega:has(> .menu-item--series:focus-within) > .menu-item--series-default:not(:focus-within) > a{background:transparent}
.sub-menu--mega:has(> .menu-item--series:hover) > .menu-item--series-default:not(:hover) > a .sub-menu__label,
.sub-menu--mega:has(> .menu-item--series:focus-within) > .menu-item--series-default:not(:focus-within) > a .sub-menu__label{color:var(--color-heading)}
.sub-menu--mega:has(> .menu-item--series:hover) > .menu-item--series-default:not(:hover) > a .sub-menu__go,
.sub-menu--mega:has(> .menu-item--series:focus-within) > .menu-item--series-default:not(:focus-within) > a .sub-menu__go{opacity:0}
.sub-menu--mega > .menu-item > .sub-menu--series-pane{left:calc(var(--mega-pad) + var(--mega-col));padding-left:var(--mega-gap);right:auto;width:max-content;visibility:hidden}
.sub-menu--mega > .menu-item--series-default > .sub-menu--series-pane,
.sub-menu--mega > .menu-item:hover > .sub-menu--series-pane,
.sub-menu--mega > .menu-item:focus-within > .sub-menu--series-pane,
.sub-menu--mega > .menu-item.is-open > .sub-menu--series-pane{visibility:visible}
.sub-menu--mega:has(> .menu-item--series:hover:not(.menu-item--series-default)) > .menu-item--series-default > .sub-menu--series-pane,
.sub-menu--mega:has(> .menu-item--series:focus-within:not(.menu-item--series-default)) > .menu-item--series-default > .sub-menu--series-pane,
.sub-menu--mega:has(> .menu-item--series.is-open:not(.menu-item--series-default)) > .menu-item--series-default > .sub-menu--series-pane{visibility:hidden}
.sub-menu__rest{position:absolute;z-index:0;left:calc(var(--mega-pad) + var(--mega-col) + var(--mega-gap));right:var(--mega-pad);top:12px;
  visibility:inherit;margin:0;padding:0}
.sub-menu__rest-text{margin:0;max-width:320px;font-size:13.5px;line-height:1.55;color:var(--color-muted)}
.sub-menu--mega:has(> .menu-item--series:hover) > .sub-menu__rest,
.sub-menu--mega:has(> .menu-item--series:focus-within) > .sub-menu__rest,
.sub-menu--mega:has(> .menu-item--series.is-open) > .sub-menu__rest,
.sub-menu--mega:has(> .menu-item--series-default) > .sub-menu__rest{visibility:hidden}

/* The third-level Card Panel: Refined B2B Hardware & Modern Card Architecture */
.sub-menu--series{position:absolute;z-index:1;left:calc(var(--mega-pad) + var(--mega-col) + var(--mega-gap));right:var(--mega-pad);top:8px;bottom:12px;
  display:flex;flex-direction:column;width:720px;max-width:calc(100vw - 320px);margin:0;padding:16px 20px 20px;
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;box-shadow:inset 0 1px 2px rgba(255,255,255,.8),0 1px 3px rgba(15,23,42,.03);
  visibility:inherit;opacity:1;transform:none;transition:none;overflow-y:auto;overflow-x:hidden}
.sub-menu--series.sub-menu--series-few{width:380px}
.sub-menu--series::before{display:none}

/* Header bar inside the series pane */
.series-pane__header{display:flex;align-items:center;gap:10px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #e2e8f0}
.series-pane__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:4px;background:#e2e8f0;color:var(--color-navy);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.series-pane__title{font-size:12px;font-weight:600;color:var(--color-muted);letter-spacing:.02em}

/* Grid layout for groups */
.series-pane__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.sub-menu--series-few .series-pane__grid{grid-template-columns:1fr}
.series-group{margin:0;display:flex;flex-direction:column}
.series-group__head{margin:0 0 8px;padding:0}
.series-group__tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-navy);padding-left:2px}

/* Series Item Badges / Cards */
.series-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.series-item{list-style:none;margin:0;padding:0}
.series-item__link{position:relative;display:flex;flex-direction:column;padding:7px 22px 7px 10px;background:#ffffff;border:1px solid #e2e8f0;border-radius:7px;box-shadow:0 1px 2px rgba(15,23,42,.04);text-decoration:none;transition:all var(--transition-fast)}
.series-item__link:hover{background:#ffffff;border-color:var(--color-accent);box-shadow:0 3px 10px rgba(0,102,204,.14);transform:translateY(-1px)}
.series-item__name{display:block;font-size:12.5px;font-weight:600;line-height:1.35;color:var(--color-heading);transition:color var(--transition-fast)}
.series-item__link:hover .series-item__name{color:var(--color-accent)}
.series-item__note{display:block;margin-top:2px;font-size:11px;font-weight:400;line-height:1.35;color:var(--color-muted)}
.series-item__arrow{position:absolute;right:8px;top:50%;font-size:11px;line-height:1;color:var(--color-accent);opacity:0;transform:translate(-3px,-50%);transition:all var(--transition-fast)}
.series-item__link:hover .series-item__arrow{opacity:1;transform:translate(0,-50%)}

/* Inline fallback for mobile */
.sub-menu--series-inline{position:static;left:auto;right:auto;top:auto;bottom:auto;overflow:visible;margin:4px 0 8px;padding:0 0 0 14px;background:none;border:none;box-shadow:none}

/* ---------------------------------------------------------------- Footer -- */
.site-footer{background:var(--color-navy);color:#c4d3e0;padding-block:48px 24px;font-size:14px}
.site-footer a{color:#dbe5ed;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.brand--footer .brand__name{color:#fff}
.brand--footer .brand__tagline{color:#c4d3e0}
.footer-brand__text{margin:20px 0 0;max-width:330px;color:#c4d3e0}
.footer-brand__link{display:inline-block;margin-top:20px;font-weight:600}
.footer-brand__mail{margin:10px 0 0}
/* The profiles the footer lists: one row of named links in the brand column,
   under the address. They carry their platform's name rather than a brand mark,
   so the row says where each one goes in words. */
.footer-social{margin:22px 0 0}
.footer-social__title{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.footer-social__list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.footer-social__link{display:inline-flex;align-items:center;gap:8px;padding:6px 13px 6px 11px;border:1px solid #415c72;border-radius:999px;font-size:13px;font-weight:600;line-height:1.2;color:#dbe5ed;transition:border-color var(--transition-fast),color var(--transition-fast)}
.footer-social__link:hover,.footer-social__link:focus-visible{border-color:#fff;color:#fff;text-decoration:none}
/* The platform's mark, in the theme's own glyph hand and taking the link's own
   colour, so it brightens with the label on hover. */
.footer-social__mark{display:inline-flex;flex:none}
.footer-social__mark .icon{display:block}
.footer-col__title{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff}
.footer-col__list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;margin-top:40px;padding-top:20px;border-top:1px solid #415c72;font-size:12px}
.footer-bottom p{margin:0}
.footer-bottom__legal{display:flex;gap:20px}

/* ------------------------------------------------------------------ Hero -- */
.site-main.site-main--home{padding-block:0}
.hero{padding-block:62px 50px;background:linear-gradient(110deg,var(--color-surface) 48%,var(--color-pale) 48%)}
.hero__grid{display:grid;grid-template-columns:.94fr 1.06fr;gap:48px;align-items:center}
.hero__title-accent{color:var(--color-accent)}
.hero__lede{margin-top:24px;max-width:470px;font-size:18px}
.hero__notes{display:flex;flex-wrap:wrap;gap:12px 22px;margin:28px 0 0;padding:0;list-style:none;font-size:13px;color:var(--color-muted)}
.hero__notes li::before{content:"✓";margin-right:7px;color:var(--color-accent)}
/* Banner hero: a band of photographs, turned over one after another. The
   pictures fill the band and are cropped to it, so a photograph of any shape
   reads as a banner and the copy keeps one place on every slide; a scrim in a
   deep steel navy is laid over the band's left-hand side, so the copy is printed
   in white on a photograph of any brightness — no card, no panel and no blur
   behind it. The band carries one colour only: the sun accent is not used here,
   because a photograph under a yellow button reads as a template rather than as
   a manufacturer's own page. The copy column uses the site grid so its edge lines
   up with the sections below. Below the banner breakpoint the copy drops onto a
   white band, and the band's own rules put the page's dark colours back. */
.hero--banner{position:relative;padding-block:0;background:#0c2233;overflow:hidden}
.hero--banner .hero__grid{display:flex;justify-content:flex-start;align-items:center;width:100%}
/* The band is as tall as the pictures are wide, held a little shorter than the
   window so the section under it is always in sight, and floored so a small
   screen keeps room for the copy. */
.hero--banner .hero__intro{position:relative;z-index:1;display:flex;align-items:center;min-height:clamp(330px,34vw,560px);padding-block:clamp(40px,5vw,72px)}
.hero--banner .hero__copy{max-width:600px;color:#fff}
/* The label above the heading is set in a light steel tone with a hairline in
   front of it, and the heading is one colour: a two-tone heading over a
   photograph is the part of the band that read as decoration. */
.hero--banner .eyebrow{color:#c3d3e0}
.hero--banner .eyebrow::before{width:22px;height:1px;background:rgba(255,255,255,.5)}
.hero--banner .hero__title{color:#fff;font-size:clamp(27px,2.9vw,40px);letter-spacing:-.02em}
.hero--banner .hero__title-accent{color:#fff}
.hero--banner .hero__lede{max-width:520px;margin-top:18px;color:rgba(255,255,255,.82)}
/* One solid button, one hairline button, both in the band's own greys. */
.hero--banner .btn{background:var(--color-surface);border-color:var(--color-surface);color:#12304a}
.hero--banner .btn:hover{background:#e3e9f0;border-color:#e3e9f0;color:#0c2233}
.hero--banner .btn--outline{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.5);color:#fff}
.hero--banner .btn--outline:hover{background:rgba(255,255,255,.16);border-color:#fff}
/* The picture fills the band and is cropped to it, never squashed: the slides
   are stacked in the band and only the one being shown is printed. The scrim
   stands over them, so the copy reads on a bright site photograph and on a dark
   one alike. */
.hero--banner .hero__media{position:absolute;inset:0;z-index:1;line-height:0}
.hero--banner .hero__slide{position:absolute;inset:0}
.hero__banner{display:block;width:100%;height:100%;object-fit:cover}
.hero__scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,22,35,.86) 0%,rgba(8,22,35,.66) 38%,rgba(8,22,35,.2) 70%,rgba(8,22,35,0) 100%)}

/* Stepping through the band: the two arrows, the dot that stands for each
   picture and the button that holds the turning over. They sit on the picture at
   the foot of the band, and the reading a screen reader hears is the slide count
   the behaviour writes into the hidden status line. */
/* Square controls on a flat navy chip, and one rule per picture in place of a
   row of round dots: the same shapes the rest of the page is drawn from. */
.hero__controls{position:absolute;right:clamp(16px,4vw,44px);bottom:clamp(16px,2.6vw,28px);z-index:2;display:flex;align-items:center;gap:9px}
.hero__control{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:3px;background:rgba(8,22,35,.6);color:#fff;font:inherit;font-size:14px;line-height:1;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}
.hero__control:hover{border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.2)}
.hero__glyph{display:block}
.hero__control--play::before{content:"❚❚";font-size:10px}
.hero__control--play[aria-pressed="false"]::before{content:"▶";font-size:11px}
.hero__dots{display:flex;align-items:center;gap:6px}
.hero__dot{width:20px;height:3px;padding:0;border:0;border-radius:1px;background:rgba(255,255,255,.32);cursor:pointer;transition:background var(--transition-fast)}
.hero__dot[aria-current="true"]{background:#fff}
.hero--banner .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------------------------------------------------------------- Trust -- */
.trust{padding-block:24px;border-bottom:1px solid var(--color-line)}
.trust__inner{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:24px;align-items:center}
.trust__intro{margin:0;max-width:200px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.trust__item strong{display:block;font-size:14px;color:var(--color-navy)}
.trust__item p{margin:2px 0 0;font-size:13px;color:var(--color-muted)}

/* ------------------------------------------------------------- Filter tabs -- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tab{padding:10px 19px;border:1px solid var(--color-line);border-radius:5px;background:var(--color-surface);color:var(--color-text);font-size:14px;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}
.tab:hover{border-color:var(--color-accent);color:var(--color-accent)}
.tab[aria-selected="true"],.tab[aria-selected="true"]:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}

/* ---------------------------------------------------------------- Products -- */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.product{display:flex;flex-direction:column;overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.product[hidden]{display:none}
.product__image{position:relative;height:235px;padding:24px;background:#f5f7fa}
.product__photo{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.tag{position:absolute;left:16px;top:16px;margin:0;padding:3px 8px;background:var(--color-surface);border:1px solid var(--color-line);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted)}
.product__body{display:flex;flex:1;flex-direction:column;padding:26px}
.product__body > p{margin:15px 0 21px;font-size:15px;color:var(--color-muted)}
.product__cta{margin-top:20px}
.specs{margin:auto 0 0;padding:10px 0 0;border-top:1px solid var(--color-line)}
.specs div{display:flex;justify-content:space-between;gap:16px;padding:6px 0;font-size:13px}
.specs dt{color:var(--color-muted)}
.specs dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;color:var(--color-navy);text-align:right}
.product-note{margin:20px 0 0;font-size:13px;color:var(--color-muted)}

/* ------------------------------------------------------------ Conversion -- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.engineering{overflow:hidden;background:var(--color-surface);border:1px solid var(--color-line);border-radius:var(--radius-lg)}
.engineering__top{display:flex;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--color-line);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.engineering__image{width:100%;height:280px;padding:30px;object-fit:contain}
.flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:0;padding:18px 12px;background:var(--color-navy);color:#fff;font-size:12px}
.flow span:nth-child(even){color:var(--color-sun)}
.checklist{margin:25px 0;padding:0;list-style:none}
.checklist li{display:flex;gap:13px;margin:13px 0;font-size:15px}
.checklist li::before{content:"✓";flex:none;font-weight:700;color:var(--color-accent)}

/* ---------------------------------------------------------- Applications -- */
/* The gallery is a 2×2 grid whose four shots stretch to the same height as
   the four application rows beside them, so the two columns end on one line. */
.applications{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:stretch}
.applications__gallery{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:16px}
.applications__shot{position:relative;overflow:hidden;border-radius:10px;background:var(--color-pale);margin:0}
.applications__image{display:block;width:100%;height:100%;min-height:150px;object-fit:cover}
.photo-label{position:absolute;left:12px;bottom:12px;margin:0;padding:8px 12px;border-radius:5px;background:var(--color-surface);font-size:12px;font-weight:600;color:var(--color-navy);max-width:calc(100% - 24px)}
.applications__list{display:flex;flex-direction:column;align-self:stretch}
.application{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--color-line);flex:1;align-content:center}
.application:first-child{padding-top:0;border-top:0}
.application:last-child{border-bottom:0;padding-bottom:0}
.application .application__num{margin:0;padding-top:4px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--color-accent)}
.application h3{margin:0}
.application p{margin:10px 0 0;font-size:15px;color:var(--color-muted)}

/* ---------------------------------------------------- Business types (B2B) -- */
.b2b{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:42px}
.b2b__card{padding-top:26px;border-top:1px solid #60788d}
.b2b__card .b2b__num{margin:0 0 18px;font-size:14px;font-variant-numeric:tabular-nums;color:var(--color-sun)}
.b2b__card h3{margin:0}
.b2b__card p{margin:16px 0 0;font-size:15px;color:#d2deea}
.b2b__link{display:inline-block;margin-top:24px;font-size:14px;font-weight:600;color:#fff;text-decoration:none}
.b2b__link:hover{text-decoration:underline}

/* ------------------------------------------------------------------ Steps -- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:42px}
.step{padding-top:22px;border-top:2px solid var(--color-line)}
.step .step__num{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;margin:0 0 18px;border-radius:var(--radius-sm);background:var(--color-pale);color:var(--color-accent);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.step h3{margin:0;font-size:19px}
.step p{margin:12px 0 0;font-size:14px;color:var(--color-muted)}
.resource-link{display:inline-block;margin-top:32px;font-size:14px;font-weight:600}

/* -------------------------------------------------------------------- FAQ -- */
.faq__grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:72px}
.faq__list{min-width:0}
.faq details{padding:20px 0;border-bottom:1px solid var(--color-line)}
.faq details:first-child{padding-top:0}
.faq summary{display:flex;justify-content:space-between;gap:22px;cursor:pointer;list-style:none;font-size:17px;font-weight:600;color:var(--color-navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--color-accent)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0;padding-top:15px;max-width:630px;font-size:15px;color:var(--color-muted)}
/* The row of links under a FAQ answer, where the answer's subject continues on
   another page. The shared .faq rule above gives every paragraph in an answer the
   answer's own measure and top padding, so this row resets both and reads as a row
   of small semibold links, with the ↗ arrow already in the markup. It lives in the
   shared sheet because several pages' FAQ sections print it (Contact, the inverter
   page, Installer Support), and the pattern is the same one everywhere. */
.faq .faq__links{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin:var(--space-2) 0 0;padding:0;max-width:none}
.faq .faq__link{display:inline-flex;align-items:center;gap:var(--space-1);font-size:14px;font-weight:600;text-decoration:none;transition:color var(--transition-fast)}
.faq .faq__link:hover,
.faq .faq__link:focus-visible{color:var(--color-accent-dark);text-decoration:underline}

/* ---------------------------------------------------------------- Contact -- */
.contact__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:80px;align-items:start}
.contact__info{margin-top:30px;padding-top:24px;border-top:1px solid var(--color-line)}
.contact__mail{font-size:18px;font-weight:600}
.contact__wa{display:block;margin-top:10px}
.contact__info p{margin:10px 0 0;font-size:14px;color:var(--color-muted)}
.form{padding:26px;background:var(--color-pale);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px 18px}
.field--full{grid-column:1/-1}
.field label{display:block;margin-bottom:5px;font-size:13px;font-weight:600;color:var(--color-navy)}
.field__req{color:var(--color-accent)}
.field__hint{font-weight:400;color:var(--color-muted)}
input,select,textarea{width:100%;min-height:46px;padding:11px 12px;border:1px solid var(--color-field-line);border-radius:5px;background:var(--color-surface);color:var(--color-navy);font:inherit;font-size:15px}
textarea{min-height:96px;resize:vertical}
.form__submit{width:100%;margin-top:18px}
.form__note{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--color-muted)}

/* ------------------------------------------------- The optional half -- */
/* A form asks for the few answers it cannot be worked from; everything else is
   one step away in a disclosure rather than another row in front of the
   visitor. The words say what the block holds and how far down the form it is
   closed, and the plus/minus marker is the one the FAQ already uses, so a
   closed block reads as a control on every form on the site. The selector's
   own disclosure wears the same clothes: one costume, one rule. */
.form__more,.selector-more{margin:0;border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface)}
.form__more > summary,.selector-more > summary{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0;padding:11px 14px;cursor:pointer;list-style:none;font-size:13px;font-weight:600;color:var(--color-navy)}
.form__more > summary::-webkit-details-marker,.selector-more > summary::-webkit-details-marker{display:none}
.form__more > summary::after,.selector-more > summary::after{content:"+";flex:none;font-size:18px;line-height:1;color:var(--color-accent)}
.form__more[open] > summary::after,.selector-more[open] > summary::after{content:"−"}
.form__more[open] > summary,.selector-more[open] > summary{border-bottom:1px solid var(--color-line)}
.form__more > .fields,.selector-more > .fields{padding:14px}
.feedback{margin:14px 0 0;font-size:14px;color:var(--color-navy)}
.feedback:empty{display:none}
.feedback--sent{padding-left:12px;border-left:3px solid var(--color-accent)}
.feedback--invalid,.feedback--failed{padding-left:12px;border-left:3px solid var(--color-sun)}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------- Other templates (base) -- */
.site-main{padding-block:clamp(32px,6vw,72px)}
.page-title{margin-bottom:24px}
.lead{font-size:18px;color:var(--color-muted)}
.entry{margin-bottom:40px}
.entry__title a{text-decoration:none}
.entry__body{max-width:70ch}

/* ------------------------------------------------------------- Responsive -- */
@media(max-width:1400px){
  .hero__grid{gap:70px}
}
@media(max-width:1180px){
  .nav-list > .menu-item > a{padding:10px 9px}
  /* The row keeps its single line: the two actions leave before the row would
     have to wrap or squeeze the menu. */
  .header__cta{display:none}
  .header__mail{display:none}
  .split,.contact__grid,.faq__grid{gap:44px}
}
@media(max-width:980px){
  .menu-toggle{display:block}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;padding:16px var(--gutter);background:var(--color-surface);border-bottom:1px solid var(--color-line);box-shadow:var(--shadow-float)}
  .site-nav.is-open{display:flex}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav-list a{display:block;padding:12px 0;font-size:15px}
  /* In the panel the second level is always open: a vertical guide and an
     indent, so a group reads as one block and nothing needs a tap to open. */
  .nav-list > .menu-item > a{padding:12px 0;border-radius:0}
  .nav-list > .menu-item > a:hover,.nav-list > .menu-item:focus-within > a{background:transparent}
  /* The panel is a drop-down only above the mobile breakpoint: here the second
     level is always open, so the hover strip, the pointer and the hidden state
     are all switched off. */
  .nav-list > .menu-item-has-children::after{display:none}
  .sub-menu{position:static;display:block;min-width:0;max-width:none;margin:0 0 8px 2px;padding:0 0 0 14px;border:0;border-left:1px solid var(--color-line);border-radius:0;box-shadow:none;background:transparent;visibility:visible;opacity:1;transform:none;transition:none}
  /* The panel is a static block here, so the fixed width and the group label
     have nothing to do. */
  .sub-menu{width:auto}
  .sub-menu__head{display:none}
  .sub-menu::before{display:none}
  .sub-menu a{padding:9px 0;font-size:14px;color:var(--color-muted)}
  /* The panel is a white block here, so the tile takes the page's own colours. */
  .sub-menu > .menu-item > a{grid-template-columns:28px minmax(0,1fr);gap:10px;padding-left:0}
  .sub-menu__icon{width:28px;height:28px;border-radius:8px;background:var(--color-accent-pale);color:var(--color-accent)}
  .sub-menu > .menu-item > a:hover .sub-menu__icon{background:var(--color-accent-pale);color:var(--color-accent)}
  .sub-menu a::before,.sub-menu__go{display:none}
  .sub-menu a:hover{background:transparent}
  /* The second level reads as plain text rows here, in the page's own colours. */
  .sub-menu__label{font-size:14px;color:var(--color-navy)}
  .sub-menu a:hover .sub-menu__label{color:var(--color-navy)}
  /* The wide panel is a static block here too: the section list and every
     series list below it read as one column, in the order they are nested. */
  .sub-menu--mega{left:auto;right:auto;min-height:0;grid-template-columns:1fr;gap:0}
  .sub-menu--mega::after{display:none}
  /* The pane is a static block in the stack, so the box that reaches back over
     the gap above the breakpoint has nothing to reach for here. */
  .sub-menu--mega > .menu-item > .sub-menu--series-pane,
  .sub-menu--series{position:static;left:auto;right:auto;top:auto;bottom:auto;padding:8px 0 0;min-width:0;max-width:none;border:none;background:none;box-shadow:none;overflow:visible;visibility:visible}
  .series-pane__header{display:none}
  .series-pane__grid{grid-template-columns:1fr;gap:12px}
  /* The stacked panel reads all three levels at once, so the line that says a
     series list opens on hover has nothing to say here — each list already
     sits under the section it belongs to. */
  .sub-menu__rest{display:none}
  .series-group{margin:0 0 10px}
  .series-group__head{margin:0 0 4px}
  .series-group__tag{color:var(--color-muted);font-size:10px}
  .series-item__link{background:none;border:none;box-shadow:none;padding:4px 0}
  .series-item__link:hover{background:none;box-shadow:none;transform:none}
  .series-item__name{color:var(--color-muted);font-weight:500}
  .series-item__arrow{display:none}
  .menu-item-has-children > a::after{font-size:8px}
  .trust__inner{grid-template-columns:repeat(3,1fr)}
  .trust__intro{display:none}
  .products{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:28px 22px}
  /* Below tablet width the band is too short to hold the copy as an overlay, so
     the pictures keep a band of their own above and the copy drops onto a white
     strip below it, where the page's own dark colours come back. The scrim turns
     with it: its work up here is to carry the controls at the foot of the picture,
     not to hold the copy. */
  .hero.hero--banner{background:var(--color-surface)}
  .hero.hero--banner .hero__media{position:relative;inset:auto;aspect-ratio:16/9}
  .hero.hero--banner .hero__scrim{background:linear-gradient(0deg,rgba(8,22,35,.5) 0%,rgba(8,22,35,.1) 34%,rgba(8,22,35,0) 62%)}
  .hero.hero--banner .hero__controls{left:0;right:0;bottom:12px;justify-content:center;gap:8px}
  .hero__control{width:34px;height:34px;font-size:14px}
  .hero.hero--banner .hero__intro{position:static;inset:auto;min-height:0;background:var(--color-surface);padding-block:32px 36px}
  .hero.hero--banner .hero__grid{justify-content:flex-start;padding-block:0}
  .hero.hero--banner .hero__copy{max-width:640px;color:var(--color-heading)}
  .hero.hero--banner .eyebrow{color:var(--color-muted)}
  .hero.hero--banner .hero__title{color:var(--color-heading)}
  .hero.hero--banner .hero__title-accent{color:var(--color-heading)}
  .hero.hero--banner .hero__lede{color:var(--color-muted)}
  .hero.hero--banner .btn--outline{background:rgba(255,255,255,.35);border-color:rgba(18,48,74,.45);color:var(--color-navy)}
}
@media(max-width:760px){
  :root{--section-space:52px}
  .container{padding-inline:20px}
  .site-header__inner{min-height:70px}
  .custom-logo{height:36px}
  .brand__logo{height:36px}
  .brand__name{font-size:26px}
  .hero{padding-block:40px 32px;background:linear-gradient(var(--color-surface) 45%,var(--color-pale) 45%)}
  .hero__grid,.split,.applications,.faq__grid,.contact__grid{grid-template-columns:1fr;gap:32px}
  .hero__title{font-size:34px}
  .hero__lede{font-size:16px}
  .hero__notes{gap:8px 14px;font-size:12px}
  /* Small screens: the copy sits on a white band below the complete picture. */
  .hero.hero--banner{padding-block:0;background:var(--color-surface)}
  .hero.hero--banner .hero__intro{padding-block:28px 32px}
  .hero--banner .hero__copy{max-width:none}
  /* The banner headline carries a longer audience line now: at 34px it wraps to
     four lines on a phone and pushes the two actions down with it. 30px keeps
     "Solar Pumping Solutions" on one line, so the headline reads in three lines
     and still clears the picture above and the buttons below. */
  .hero.hero--banner .hero__title{font-size:30px}
  .hero--banner .hero__lede{max-width:none}
  .section__head{display:block;margin-bottom:26px}
  .section__sub{margin-top:18px;max-width:none}
  .products{grid-template-columns:1fr}
  .product__image{height:250px}
  .engineering__image{height:230px;padding:20px}
  .applications__gallery{grid-template-rows:auto}
  .applications__image{height:150px;min-height:0}
  .b2b{grid-template-columns:1fr;gap:28px;margin-top:30px}
  .steps{grid-template-columns:1fr;gap:24px;margin-top:30px}
  .faq summary{font-size:16px}
  .form{padding:22px}
  .fields{grid-template-columns:1fr}
  .field--full{grid-column:auto}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}

/* 06 / Insights & Guides on the homepage. A hairline marks where the reading
   band begins: it sits between the pale FAQ and the contact section, and two
   plain white sections in a row would otherwise read as one. The cards inside
   are the shared note-card component, so a note looks the same here as it does
   on Insights & Guides and in the search results. */
.home-notes{border-top:1px solid var(--color-line)}

/* A collection in the panel's own column: its name over the one line that says
   which pumps it is for. Read as one link, so the note is part of the item. */
.sub-menu--series .series-item__note{display:block;margin-top:5px;font-size:12px;font-weight:400;line-height:1.4;color:var(--color-muted);white-space:normal}