/* 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:16px}
/* The panel is navy, like the footer and the closing bands: it separates the
   second level from the white page behind it instead of looking like another
   white card, and the light text reads cleanly against it. */
.sub-menu{position:absolute;left:0;top:calc(100% + 12px);z-index:5;display:grid;gap:2px;min-width:326px;max-width:min(380px,calc(100vw - 40px));margin:0;padding:16px 14px 14px;list-style:none;background:var(--color-navy);border:1px solid rgba(255,255,255,.12);border-radius:12px;box-shadow:0 22px 46px rgba(9,26,42,.34);visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity var(--transition-fast),transform var(--transition-fast),visibility var(--transition-fast)}
/* A group of four or more reads as two columns, which keeps the panel short
   instead of turning it into a long list. */
.sub-menu--wide{width:min(560px,calc(100vw - 40px));grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
.sub-menu::before{content:"";position:absolute;top:-6px;left:24px;width:10px;height:10px;background:var(--color-navy);border-left:1px solid rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);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 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 wide panel 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 13px}
.sub-menu__eyebrow{display:block;font-size:10px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:#8fb2cf}
.sub-menu__eyebrow::after{content:"";display:block;width:26px;height:2px;margin-top:7px;border-radius:1px;background:var(--color-accent-pale)}
/* One panel entry: the page's name over the one line that says what it is for,
   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:#f4f8fc;transition:background var(--transition-fast)}
/* A second-level entry opens with a small line drawing in a pale tile, then the
   page's name over its one line, 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:11px;align-items:center;padding-left:12px}
.sub-menu__icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.09);color:var(--color-accent-pale);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:rgba(255,255,255,.18);color:#fff}
.sub-menu a::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 2px 2px 0;background:var(--color-accent-pale);transform:scaleY(0);transform-origin:50% 0;transition:transform var(--transition-fast)}
.sub-menu a:hover{background:rgba(255,255,255,.08)}
.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:inherit}
.sub-menu a:hover .sub-menu__label{color:#fff}
.sub-menu__desc{display:block;margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.45;color:#a5bdd2}
.sub-menu__go{position:absolute;right:13px;top:50%;font-size:13px;line-height:1;color:var(--color-accent-pale);opacity:0;transform:translate(-4px,-50%);transition:opacity var(--transition-fast),transform var(--transition-fast)}
.sub-menu a:hover .sub-menu__go{opacity:1;transform:translate(0,-50%)}
.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:300px;--mega-gap:26px;--mega-pad:18px;
  left:var(--gutter);right:var(--gutter);top:calc(100% + 12px);width:auto;min-width:0;max-width:none;
  min-height:440px;align-content:start;padding:16px var(--mega-pad) 18px;
  grid-template-columns:minmax(0,var(--mega-col)) minmax(0,1fr);gap:2px var(--mega-gap)}
.sub-menu--mega::before{display:none}
/* The 12px 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:-14px;height:14px}
.sub-menu--mega > .sub-menu__head{grid-column:1}

/* The third level itself. Visibility is inherited and never set here: that is
   what keeps a series list inside a panel that is closed. It reads in the
   panel's own light tone, one step quieter than the section labels beside it. */
.sub-menu--series{position:absolute;z-index:1;left:calc(var(--mega-pad) + var(--mega-col) + var(--mega-gap));right:var(--mega-pad);top:16px;bottom:18px;
  display:block;min-width:0;max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;
  visibility:inherit;opacity:1;transform:none;transition:none;overflow:auto}
.sub-menu--series::before{display:none}
.sub-menu--series .series-list{margin:0;padding:0;list-style:none}
.sub-menu--series a{padding:4px 0;font-size:13.5px;font-weight:500;line-height:1.35;color:#a5bdd2;white-space:normal}
.sub-menu--series a:hover{background:transparent;color:#fff}
.sub-menu--series a::before{display:none}
.series-head{margin:0 0 14px}
.series-group{margin:0 0 14px}
.series-group__head{margin:0 0 5px;font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:#8fb2cf}
/* The family with a series for most pump types reads in columns, and a column
   break never separates a pump type from its series. */
.sub-menu--series-pane{column-count:3;column-gap:26px}
.sub-menu--series-pane .series-head{column-span:all}
.sub-menu--series-pane .series-group{break-inside:avoid}
/* The short family stays under its own section, where it needs no grouping. */
.sub-menu--series-inline{position:static;left:auto;right:auto;top:auto;bottom:auto;overflow:visible;margin:2px 0 4px;padding:0 0 0 13px}
.sub-menu--series-inline .series-group{margin:0}
.sub-menu--series-inline a{padding:3px 0;font-size:13px;color:#8fb2cf}

/* ---------------------------------------------------------------- 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, where the supplied banner is plain navy. A left-to-right
   scrim keeps the products on the left fully visible while giving the copy a
   solid, readable panel on the right. 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-navy);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;background:linear-gradient(90deg,rgba(11,33,56,0) 32%,rgba(11,33,56,.55) 54%,rgba(11,33,56,.92) 70%)}
.hero--banner .hero__copy{max-width:520px;color:#fff;padding-block:46px}
.hero--banner .eyebrow{color:var(--color-sun)}
.hero--banner .hero__title{color:#fff;font-size:clamp(28px,3.2vw,44px)}
.hero--banner .hero__title-accent{color:var(--color-sun)}
.hero--banner .hero__lede{max-width:520px;margin-top:20px;color:rgba(255,255,255,.9)}
.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,.06);border-color:rgba(255,255,255,.6);color:#fff}
.hero--banner .btn--outline:hover{background:rgba(255,255,255,.18);border-color:#fff}
/* The picture fills the hero at its natural aspect ratio and is never cropped,
   so the products stay complete beneath the overlay. */
.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 -- */
.applications{display:grid;grid-template-columns:1.1fr .9fr;gap:40px}
.applications__gallery{display:grid;gap:18px;grid-template-rows:repeat(3,minmax(200px,1fr))}
.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:200px;object-fit:cover}
.photo-label{position:absolute;left:20px;bottom:20px;margin:0;padding:14px 20px;border-radius:5px;background:var(--color-surface);font-size:14px;font-weight:600;color:var(--color-navy)}
.application{display:grid;grid-template-columns:36px 1fr;gap:16px;padding:23px 0;border-top:1px solid var(--color-line)}
.application:last-child{border-bottom:1px solid var(--color-line)}
.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 two-column layout, the group label
     and the hover ornament have nothing to do. */
  .sub-menu--wide{width:auto;grid-template-columns:none}
  .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 panel is a white block here, so the navy panel's light text is put back
     to 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)}
  .sub-menu__desc{margin-top:2px;font-size:12.5px;color:var(--color-muted)}
  /* 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}
  .sub-menu--series{position:static;left:auto;right:auto;top:auto;bottom:auto;column-count:1;overflow:visible}
  .series-head{margin:0 0 10px}
  .series-group{margin:0 0 10px}
  /* The panel is a white block here, so the series read in the page's own
     colours like every other entry in it. */
  .series-group__head,.series-head .sub-menu__eyebrow{color:var(--color-muted)}
  .sub-menu--series a,.sub-menu--series-inline a{color:var(--color-muted)}
  .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 navy 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-navy);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-block: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 navy band below the complete picture. */
  .hero.hero--banner{padding-block:0;background:var(--color-navy)}
  .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:200px;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}
}