/* 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}
.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: the picture fills the whole hero and the copy is laid over its
   right-hand side inside a soft semi-transparent white card; the rest of the
   banner carries no overlay. The copy column uses the site grid so its edge
   lines up with the sections below. */
.hero--banner{position:relative;padding-block:0;background:var(--color-surface);overflow:hidden}
.hero--banner .hero__grid{display:flex;justify-content:flex-end;align-items:center;width:100%}
.hero--banner .hero__intro{position:absolute;inset:0;z-index:2;display:flex;align-items:center}
.hero--banner .hero__copy{max-width:520px;color:var(--color-heading);padding:40px 36px;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.65);border-radius:var(--radius-lg);backdrop-filter:blur(8px)}
.hero--banner .eyebrow{color:var(--color-accent)}
.hero--banner .hero__title{color:var(--color-heading);font-size:clamp(28px,3.2vw,44px)}
.hero--banner .hero__title-accent{color:var(--color-accent)}
.hero--banner .hero__lede{max-width:520px;margin-top:20px;color:var(--color-muted)}
.hero--banner .btn{background:var(--color-sun);border-color:var(--color-sun);color:var(--color-navy)}
.hero--banner .btn:hover{background:#ffd873;border-color:#ffd873}
.hero--banner .btn--outline{background:rgba(255,255,255,.35);border-color:rgba(18,48,74,.45);color:var(--color-navy)}
.hero--banner .btn--outline:hover{background:rgba(255,255,255,.75);border-color:var(--color-navy)}
/* The picture fills the hero at its natural aspect ratio and is never cropped,
   so the products stay complete beneath the copy. */
.hero__media{position:relative;z-index:1;line-height:0}
.hero__banner{display:block;width:100%;height:auto}

/* ---------------------------------------------------------------- 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)}

/* ---------------------------------------------------------------- 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__info p{margin:10px 0 0;font-size:14px;color:var(--color-muted)}
.form{padding:32px;background:var(--color-pale);border:1px solid var(--color-line);border-radius:var(--radius-md)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field--full{grid-column:1/-1}
.field label{display:block;margin-bottom:7px;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:48px;padding: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:120px;resize:vertical}
.form__submit{width:100%;margin-top:22px}
.form__note{margin:12px 0 0;font-size:12px;color:var(--color-muted)}
.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 banner is too short to hold the copy as an overlay,
     so the copy drops onto a white band below the complete picture instead. */
  .hero.hero--banner{display:flex;flex-direction:column}
  .hero.hero--banner .hero__media{order:-1}
  .hero.hero--banner .hero__intro{position:static;inset:auto;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;padding:0;background:none;border:0;border-radius:0}
}
@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}
  .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}