/* Navigation — the wide mega menu, and the two quick actions that stay on
   every page.
 *
 * The row keeps six items and never lists a model: a panel says where a visitor
 * can go, and what is inside a product family is read on the family's own page.
 * Each panel carries one featured card, so a menu has a next step rather than
 * another list.
 *
 * Desktop opens a panel on hover and on click, with a short delay so the row
 * does not flicker as the pointer crosses it; a narrow screen turns the same
 * markup into a drawer with a second level and a way back. */

.site-header{position:sticky;top:0;z-index:60}
.site-header__inner{gap:clamp(16px,2vw,32px)}

/* The compact row changes what it paints, never the height of its own box.
 *
 * It used to drop the row's min-height and its padding and to print the mark
 * smaller, and the sticky row sits in the page's flow: the three together
 * shortened the document by 16px the moment the first 8px of scroll went past,
 * so everything below moved up with the row. A browser also re-anchors a page
 * whose content above the viewport has moved, which pushed the scroll position
 * back under the threshold — the row returned to its full height, the content
 * moved down again, and the row flickered between the two heights for as long as
 * a visitor scrolled near the top. The row is now one height in both states. */
.site-header{transition:box-shadow var(--transition-fast)}
.site-header.is-scrolled{box-shadow:0 6px 20px rgba(18,48,74,.07)}

/* The mark is what reads as compact. It is drawn 8px shorter and the same 8px is
   given back as margin, so the mark's slot in the line is still 44px and the row
   keeps the height it has at the top of the page. Below the width where the mark
   is already drawn at 36px, the scrolled row is the shadow alone. */
.brand__logo,
.custom-logo{transition:height var(--transition-fast),margin var(--transition-fast)}
@media (min-width:761px){
  .site-header.is-scrolled .brand__logo,
  .site-header.is-scrolled .custom-logo{height:36px;margin-block:4px}
}

/* ------------------------------------------------------------- The row -- */
/* The row is not positioned: a panel is placed against the header itself, so a
   panel is as wide as the page whatever its own item's position is. */
.nav-item__toggle,
.nav-item > a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:40px;
  padding:9px 10px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  color:var(--color-navy);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  transition:background var(--transition-fast),color var(--transition-fast);
}

.nav-item__toggle:hover,
.nav-item > a:hover,
.nav-item.is-open .nav-item__toggle{color:var(--color-accent);background:var(--color-accent-pale)}

.nav-item__caret{
  width:8px;
  height:8px;
  margin-top:-3px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--transition-fast);
}

.nav-item.is-open .nav-item__caret{transform:rotate(225deg);margin-top:3px}

/* The row keeps one action and it is a filled rectangle in the action blue, so
   its label is white here for the same reason the panel's button is: the colour
   belongs to the button, not to whichever sheet defines .btn. Named with the
   header it sits in so the rule outweighs a .btn restated elsewhere. */
.site-header .header__cta{color:#fff}

/* --------------------------------------------------------- The panels -- */
.mega{
  position:absolute;
  top:100%;
  right:0;
  left:0;
  z-index:70;
  padding-block:clamp(24px,3vw,40px);
  border-bottom:1px solid var(--color-line);
  background:var(--color-surface);
  box-shadow:var(--shadow-panel);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateY(-4px);
  transition:opacity var(--transition-mid),transform var(--transition-mid),visibility var(--transition-mid);
}

.nav-item.is-open .mega{visibility:visible;opacity:1;pointer-events:auto;transform:none}

.mega__inner{
  display:grid;
  grid-template-columns:minmax(170px,.6fr) minmax(0,2fr) minmax(220px,.85fr);
  gap:clamp(20px,3vw,44px);
  max-width:var(--content-wide);
}

.mega__eyebrow{
  margin:0 0 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--color-accent);
}

.mega__title{margin:0 0 8px;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.3;color:var(--color-heading)}
.mega__note{margin:0;font-size:13px;line-height:1.5;color:var(--color-muted)}
.mega__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(16px,2.4vw,32px)}
.mega__col-title{
  margin:0 0 10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--color-muted);
}

.mega__list{margin:0;padding:0;list-style:none}
.mega__list + .mega__col-title{margin-top:24px}

.mega__link{
  display:grid;
  grid-template-columns:26px minmax(0,1fr) 16px;
  align-items:start;
  gap:10px;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  color:var(--color-heading);
  text-decoration:none;
  transition:background var(--transition-fast),color var(--transition-fast);
}

.mega__link:hover,
.mega__link:focus-visible{background:var(--color-pale);color:var(--color-accent)}

.mega__icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;margin-top:2px;border-radius:var(--radius-sm);background:var(--color-accent-pale);color:var(--color-accent)}
.mega__icon .icon{width:16px;height:16px}
.mega__text{min-width:0}
.mega__label{display:block;font-size:14px;font-weight:600;line-height:1.35}
.mega__desc{display:block;margin-top:2px;font-size:12px;line-height:1.45;color:var(--color-muted)}
.mega__arrow{align-self:center;font-size:14px;color:var(--color-accent);opacity:0;transition:opacity var(--transition-fast),transform var(--transition-fast)}
.mega__link:hover .mega__arrow,
.mega__link:focus-visible .mega__arrow{opacity:1;transform:translateX(2px)}

/* The panel's featured card carries the action blue itself rather than the
   page's pale tint. Everything written in it — the heading, the line of detail
   and the button — belongs to the one step the panel is asking for; a pale card
   read as another entry beside the columns. The action inside it is the single
   white box on the card, which is what marks it as the thing to press. */
.mega__feature{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:start;
  padding:16px 18px;
  border:1px solid var(--color-accent-dark);
  border-radius:var(--radius-md);
  background:var(--color-accent);
  color:#fff;
}

.mega__feature-title{margin:0;font-size:15px;font-weight:600;line-height:1.35;color:#fff}
.mega__feature-note{margin:0;font-size:12px;line-height:1.5;color:rgba(255,255,255,.86)}
/* The action is white paper on the card's field, labelled in the action blue.
   It stretches to the card's own width rather than sizing to its label, so the
   box can never run past the card, and a long label wraps inside it. Stated here
   rather than left to the shared .btn rule, which a stylesheet that loads later
   may restate without knowing what the button sits on. */
.mega__feature .btn{align-self:stretch;justify-content:center;min-height:40px;padding:8px 16px;font-size:13px;border-color:var(--color-surface);background:var(--color-surface);color:var(--color-accent)}
.mega__feature .btn:hover{border-color:var(--color-surface);background:var(--color-pale);color:var(--color-accent)}
.mega__feature .btn .arrow{color:inherit}
.mega__feature .btn:focus-visible{outline-color:var(--color-navy)}
.mega__feature-art{color:#fff;opacity:.9}

.mega__back{display:none}
.mega__all{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:600;text-decoration:none}

/* ----------------------------------------------------- Quick actions -- */
/* Two entries, never more: the pump selection and a way to talk to HOBER.
   On a wide screen they are folded into one button in the bottom corner and
   the rail opens only when a visitor asks for it, so the entries cannot come
   to rest over a title, a specification table or a submit button the way a
   rail pinned to the middle of the edge did. A phone gets them as a bar along
   the bottom edge, inside the safe area, where a thumb reaches them without
   opening anything.

   The closed button is a filled pill in the action blue with white type, not a
   white pill with a hairline border: it floats over a white page for most of
   the scroll, where a white button on a #ffffff ground leaves only a 1px line
   to be seen by. It is also the only entry to the pump selection on a wide
   screen, so it is sized as an action (52px tall, 13px label) rather than as
   fine print, and the foot of the page keeps its width clear. */

.quick-actions{
  position:fixed;
  right:var(--gutter);
  bottom:var(--space-3);
  z-index:55;
  display:flex;
  /* The rail is written after the button it belongs to, so the column is
     reversed: the button keeps the corner and the rail opens upwards from it
     rather than pushing the button up the page. */
  flex-direction:column-reverse;
  align-items:flex-end;
  gap:10px;
}

.quick-actions__toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:12px 20px;
  border:1px solid var(--color-accent-dark);
  border-radius:999px;
  background:var(--color-accent);
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:0 12px 28px rgba(18,48,74,.28);
  transition:background var(--transition-fast),border-color var(--transition-fast);
}
.quick-actions__toggle:hover{background:var(--color-accent-dark);border-color:var(--color-accent-dark)}
.quick-actions__toggle:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.quick-actions__icon{display:flex;flex:none;align-items:center;justify-content:center;width:22px;height:22px}

/* The caret points up while the rail is folded away and down once it is open,
   so the button says which way the panel will move. */
.quick-actions__caret{
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-135deg);
  transition:transform var(--transition-fast);
}
.quick-actions.is-open .quick-actions__caret{transform:rotate(45deg)}

.quick-actions__rail{
  display:none;
  flex-direction:column;
  gap:8px;
  padding:8px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  box-shadow:var(--shadow-panel);
}
.quick-actions.is-open .quick-actions__rail{display:flex}

/* The button rests over the foot of the page, so the legal row keeps clear of
   it instead of the button covering the links at the very bottom. */
@media (min-width:1101px){
  .footer-bottom{padding-right:310px}
}

.quick-action{
  display:flex;
  align-items:center;
  gap:12px;
  width:216px;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  color:#fff;
  text-decoration:none;
  transition:background var(--transition-fast);
}

.quick-action__icon{display:flex;flex:none;align-items:center;justify-content:center;width:24px;height:24px}
.quick-action__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.quick-action__label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
/* The line under the label is set in the same white as the label. White at 85%
   over these chips measured 2.9:1 on the green one (and 5.5:1 on the
   blue one) — under the 4.5:1 a line this size needs — while the label above it
   is already set at 700 weight, so the
   hierarchy between the two does not depend on the tint. */
.quick-action__note{font-size:12px;line-height:1.3}

.quick-action--select{background:var(--color-accent)}
.quick-action--select:hover{background:var(--color-accent-dark)}
/* White on the WhatsApp green measured 3.5:1, so the four words on the chip
   failed AA. This is the same green held dark enough for the label and the line
   under it to clear 4.5:1. */
.quick-action--whatsapp{background:#17823f}
.quick-action--whatsapp:hover{background:#12663a}

.quick-action__label--short{display:none}

/* The folded button keeps out of the way of a form's own submit control. The
   inquiry form's submit button is drawn full width, so it reaches the corner the
   button rests in on a wide screen and the middle of the bar on a phone — a
   click aimed at "Send Inquiry" was taken by the rail instead, which is the worst
   possible trade: the visitor believes the inquiry was sent and has opened
   WhatsApp. While a submit control is on screen the rail is taken out of the hit
   test and out of the accessibility tree — programmatically, so a keyboard reader
   is never sent to a control that is not there — and it returns the moment the
   form is scrolled past. A rail the visitor opened is never taken away: that one
   was asked for. */
.quick-actions{
  transition:opacity var(--transition-fast),transform var(--transition-fast),visibility 0s linear 0s;
}
.quick-actions.is-aside{
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity var(--transition-fast),transform var(--transition-fast),visibility 0s linear var(--transition-fast);
}

/* -------------------------------------------------------------- Mobile -- */
/* The row turns into the drawer below this width rather than squeezing: six
   sections and one action fit on one line above it, and below it they do not. */
@media (max-width:1100px){
  .site-header__inner{min-height:var(--header-height-compact);flex-wrap:nowrap}

  .menu-toggle{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:10px 14px;
    border:1px solid var(--color-line);
    border-radius:var(--radius-sm);
    background:var(--color-surface);
    color:var(--color-navy);
    font-family:inherit;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
  }

  /* The drawer starts under the row itself. --header-live is the row's measured
     height, written by nav.js, so the panel follows a header that is taller on
     one breakpoint than on another rather than being offset by a guess. */
  .site-header__inner > .site-nav{
    position:fixed;
    inset:var(--header-live,var(--header-height)) 0 0;
    z-index:65;
    display:none;
    overflow-y:auto;
    padding:12px var(--gutter) calc(var(--quickbar-height) + 32px);
    background:var(--color-surface);
  }

  body.nav-open .site-header__inner > .site-nav{display:block}
  body.nav-open{overflow:hidden}

  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-item{border-bottom:1px solid var(--color-line)}
  .nav-item__toggle,
  .nav-item > a{width:100%;justify-content:space-between;min-height:56px;padding:14px 4px;font-size:18px}

  /* A panel becomes a screen of its own: it covers the drawer and offers the
     way back, so the second level never reads as a list inside a list. */
  .mega{
    position:fixed;
    inset:var(--header-live,var(--header-height)) 0 0;
    width:auto;
    max-width:none;
    margin:0;
    padding:12px var(--gutter) calc(var(--quickbar-height) + 32px);
    overflow-y:auto;
    transform:none;
    box-shadow:none;
    border-bottom:0;
  }

  .nav-item.is-open .mega{transform:none}
  .mega__inner{grid-template-columns:minmax(0,1fr);gap:24px;max-width:none}
  .mega__intro{order:-1}
  .mega__back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    padding:10px 4px;
    border:0;
    background:transparent;
    color:var(--color-accent);
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
  }

  .mega__link{padding:10px 0;grid-template-columns:26px minmax(0,1fr)}
  .mega__label{font-size:15px}
  .mega__desc{font-size:13px}
  .mega__arrow{display:none}
  .mega__feature{margin-top:8px}

  /* The bar is the phone's permanent entry rather than something to open, so
     the button that opens the rail is not printed here and the rail takes the
     bottom edge itself. */
  .quick-actions{top:auto;right:0;bottom:0;left:0;align-items:stretch;gap:0}
  .quick-actions__toggle{display:none}
  .quick-actions__rail{
    display:flex;
    flex-direction:row;
    gap:0;
    padding:0;
    border:0;
    border-top:1px solid var(--color-line);
    border-radius:0;
    box-shadow:0 -6px 20px rgba(18,48,74,.08);
    padding-bottom:env(safe-area-inset-bottom,0);
  }

  .quick-action{flex:1 1 50%;justify-content:center;width:auto;min-height:var(--quickbar-height);border-radius:0;padding:10px 12px}
  .quick-action__label{font-size:13px;letter-spacing:.04em}
  .quick-action__note{display:none}
  .quick-action__label--long{display:none}
  .quick-action__label--short{display:inline}

  /* The bar sits over the bottom of the page, so the page keeps that space
     clear: a form's submit button and a cookie notice stay reachable. */
  body{padding-bottom:calc(var(--quickbar-height) + env(safe-area-inset-bottom,0px))}

  /* The bar leaves the bottom edge altogether while a form's submit control is
     on screen, and takes its reserved space with it: a phone read to the end of a
     page would otherwise finish with a band of background under the footer where
     the bar used to be. */
  .quick-actions.is-aside{transform:translateY(100%)}
  body:has(.quick-actions.is-aside){padding-bottom:env(safe-area-inset-bottom,0px)}
}

@media (min-width:1101px){
  .menu-toggle{display:none}
  .quick-action__label--short{display:none}
  .quick-action__label--long{display:inline}
}

/* ------------------------------- The utility strip and the languages --
   The two things a buyer reads once — the address the sales team answers on and
   the language the page is read in — sit in a slim strip above the navigation
   row, so the row keeps its six sections and its one action to itself. The strip
   is part of the page and scrolls away with it; only the row sticks to the top.

   One list of languages, printed in the two shapes the site has room for: the
   row of names in the strip, and one compact dropdown inside the drawer — the
   same languages, each named in its own script, so nothing is lost on a narrow
   screen. The dropdown is a native <details>: it opens, closes and takes the
   keyboard without a script. Nothing here is printed when the site serves one
   language. */

.util-bar{display:none;background:var(--color-navy);color:rgba(255,255,255,.82)}
.util-bar__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:36px}
.util-bar__icon{display:flex;flex:none;align-items:center}
.util-bar__icon--globe{color:var(--color-sun)}
.util-bar__mail{
  display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;
  color:rgba(255,255,255,.82);text-decoration:none;
}
.util-bar__mail:hover,.util-bar__mail:focus-visible{color:#fff;text-decoration:underline}
.util-bar__lang{display:flex;align-items:center;gap:10px}

.lang-switch__list{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
.lang-switch__item{display:flex;align-items:center}
.lang-switch__link{
  display:inline-flex;align-items:center;min-height:32px;padding:4px 9px;
  border-radius:var(--radius-sm);color:rgba(255,255,255,.82);font-size:13px;font-weight:600;
  text-decoration:none;white-space:nowrap;
}
.lang-switch__link:hover,.lang-switch__link:focus-visible{color:#fff;background:rgba(255,255,255,.14)}
.lang-switch__link.is-current,.lang-switch__link[aria-current="true"]{
  color:var(--color-navy);background:var(--color-sun);
}

.lang-menu{position:relative;display:inline-block}
.lang-menu__summary{
  display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:8px 11px;
  border:1px solid var(--color-line);border-radius:var(--radius-sm);background:var(--color-surface);
  color:var(--color-navy);font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;list-style:none;
}
.lang-menu__summary::-webkit-details-marker{display:none}
.lang-menu__summary::marker{content:""}
.lang-menu__summary:hover{border-color:var(--color-field-line)}
.lang-menu__caret{
  width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
}
.lang-menu[open] .lang-menu__caret{transform:rotate(-135deg) translate(-1px,-1px)}
.lang-menu__list{
  position:absolute;top:calc(100% + 6px);inset-inline-end:0;z-index:80;min-width:180px;
  margin:0;padding:6px;list-style:none;background:var(--color-surface);
  border:1px solid var(--color-line);border-radius:var(--radius-sm);
  box-shadow:0 14px 30px rgba(18,48,74,.16);
}
.lang-menu__link{
  display:block;padding:9px 10px;border-radius:var(--radius-sm);
  color:var(--color-text);font-size:14px;line-height:1.3;text-decoration:none;
}
.lang-menu__link:hover,.lang-menu__link:focus-visible{background:var(--color-pale);color:var(--color-navy)}
.lang-menu__link.is-current{background:var(--color-accent-pale);color:var(--color-navy);font-weight:600}

/* The drawer's own entry, which is where a phone reads the same list. */
.nav-item--lang{display:none}
.nav-lang{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-line)}
.nav-lang__label{
  margin:0 0 7px;color:var(--color-muted);font-size:12px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
}

@media (min-width:1101px){
  .util-bar{display:block}
  .nav-item--lang{display:none}
}

@media (max-width:1100px){
  .util-bar{display:none}
  .nav-item--lang{display:block}
  .lang-menu{display:block;width:100%}
  .lang-menu__summary{width:100%;justify-content:space-between;min-height:44px;font-size:15px}
  .lang-menu__list{position:static;margin-top:6px;min-width:0;box-shadow:none}
  .lang-menu__link{padding:11px 10px;font-size:15px}
}