/* MAG Lubricants — self-hosted webfonts (no external CDN).
   Space Grotesk + Inter (latin, latin-ext) and Material Symbols Outlined. */

/* Material Symbols base class (was provided by Google's stylesheet; required so
   the icon font-family + ligatures are applied to .material-symbols-outlined). */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* ── Global anchor-scroll offset ──
   Every in-page #hash jump (mega-menu links, TOCs, "Learn More" buttons, cross-
   page fragment links) lands the target clear of the fixed 82px nav instead of
   under it. Single source of truth — replaces the ad-hoc per-page inline
   scroll-margin-top values that were inconsistent and left some titles clipped. */
html { scroll-padding-top: 100px; }

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-300-latin-ext.34b9c504ca.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-300-latin.3100e775e8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin-ext.34b9c504ca.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400-latin.3100e775e8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin-ext.34b9c504ca.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500-latin.3100e775e8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-latin-ext.34b9c504ca.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600-latin.3100e775e8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-700-latin-ext.34b9c504ca.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-700-latin.3100e775e8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-300-latin-ext.952dddb45d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-300-latin.0640890476.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400-latin-ext.952dddb45d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-400-latin.0640890476.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-500-latin-ext.952dddb45d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-500-latin.0640890476.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-600-latin-ext.952dddb45d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-600-latin.0640890476.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-700-latin-ext.952dddb45d.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/space-grotesk-700-latin.0640890476.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Subset to the ~146 icons the site actually uses (Google icon_names
 * subsetting; full variable axes kept). 1.1MB -> 183KB. If a NEW icon is
 * added to the site, regenerate the subset or it will render as raw text
 * (see _i18n-work/README.md tooling notes). */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
  src: url(/assets/fonts/material-symbols-outlined-subset.13fabf804c.woff2) format('woff2');
}

/* ─────────────────────────────────────────────
 * Arabic (RTL) typography — Noto Sans Arabic
 * Variable weight 400–900, Arabic subset only:
 * Latin glyphs & digits inside Arabic text keep
 * rendering in Inter / Space Grotesk (brand fonts),
 * so product names, grades and specs stay consistent.
 * ───────────────────────────────────────────── */
@font-face {
  font-family: 'Noto Sans Arabic';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-sans-arabic-var.ce85091f02.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* When Arabic is active, put Noto Sans Arabic FIRST in every stack.
 * Because the face is Arabic-subset, Latin text (kept-English product
 * names, grades, specs, numbers) still renders in the brand fonts. */
html[lang="ar"] body,
html[lang="ar"] .font-body,
html[lang="ar"] [class*="font-['Inter']"] {
  font-family: 'Noto Sans Arabic', 'Inter', sans-serif;
}
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5,
html[lang="ar"] .font-headline,
html[lang="ar"] [class*="font-['Space_Grotesk']"] {
  font-family: 'Noto Sans Arabic', 'Space Grotesk', sans-serif;
}
/* Arabic script must never be letter-spaced — tracking breaks glyph
 * joining. Neutralise all tracking utilities under lang=ar. */
html[lang="ar"] * { letter-spacing: 0 !important; }
/* Keep icon ligatures intact */
html[lang="ar"] .material-symbols-outlined { font-family: 'Material Symbols Outlined' !important; }
/* RTL guard: in Arabic the root must never grow a horizontal scroll canvas
 * (marquee tracks / off-canvas layers otherwise shift the RTL paint origin
 * and the page opens onto blank overflow space).
 *
 * Do NOT set overflow-x (hidden OR clip) on the root <html> here. The <body>
 * already carries `overflow-x: hidden`, and while <html> stays `overflow: visible`
 * that body value propagates to the viewport and clips the horizontal canvas —
 * exactly the containment we want, and identical to the EN/FR pages.
 * The moment <html> gets ANY non-visible overflow, body's overflow stops
 * propagating and <body> becomes its own nested scroll container with no scroll
 * range; wheel/touch events are then swallowed and every Arabic page freezes
 * (keyboard/scrollbar still move, which masked this in earlier testing).
 * Verified across all AR routes: body containment alone keeps horiz overflow at 0
 * while restoring wheel/touch scroll. Keep this rule empty of overflow. */

/* Arabic glyphs are taller than Latin (ascenders, descenders, vowel marks):
 * the display line-heights tuned for Latin (leading 0.9–0.95) clip them.
 * Floor heading line-height under lang=ar, same pattern as the tracking guard. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4,
html[lang="ar"] .font-headline { line-height: 1.3 !important; }

/* RTL mirror for directional hero scrims: pages author `bg-gradient-to-r`
 * (dark on the left, behind start-aligned copy). In RTL the copy right-aligns,
 * so mirror the gradient to keep the dark end behind the text. */
html[dir="rtl"] .bg-gradient-to-r { background-image: linear-gradient(to left, var(--tw-gradient-stops)); }
html[dir="rtl"] .bg-gradient-to-l { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }

/* RTL: the mobile menu slides in from the right (see animations.js), so its
 * close button moves to the top-left corner. */
html[dir="rtl"] #mobile-menu-close { right: auto; left: 1.5rem; }

/* Hamburger morphs to an X while the mobile menu is open */
#mobile-menu-btn span { transition: transform .3s ease, opacity .3s ease; }
#mobile-menu-btn.menu-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#mobile-menu-btn.menu-open span:nth-child(2) { opacity: 0; }
#mobile-menu-btn.menu-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══ Mobile drawer — white Castrol-style drill-down (panels built by main.js §9) ═══ */
/* While the drawer is open the nav must be SOLID with the dark logo/X: on the
   homepage the transparent-over-hero nav paints the logo + buttons white
   (!important), which vanishes against the white drawer on touch devices
   (no :hover to cancel it). body.mag-menu-open is set by BOTH menu
   controllers; these selectors extend the index ones so they win. */
body.mag-menu-open #main-nav{background:#fff !important;border-bottom:1px solid #edeff2 !important;box-shadow:none !important}
body.mag-menu-open #main-nav:not(.nav-opaque):not(:hover) button,
body.mag-menu-open #main-nav button{color:#0A1628 !important}
body.mag-menu-open #main-nav:not(.nav-opaque):not(:hover) .nav-logo,
body.mag-menu-open #main-nav .nav-logo{filter:none !important}
body.mag-menu-open #main-nav:not(.nav-opaque):not(:hover) a{color:#0A1628 !important}

#mobile-menu .mm-list{list-style:none;margin:0;padding:82px 0 0}      /* clear the 82px fixed nav */
#mobile-menu .mm-item{border-bottom:1px solid #edeff2}
/* No default blue tap-flash / focus ring on touch; keyboard keeps an olive ring */
#mobile-menu a,#mobile-menu button{-webkit-tap-highlight-color:transparent}
#mobile-menu a:focus,#mobile-menu button:focus{outline:none}
#mobile-menu a:focus-visible,#mobile-menu button:focus-visible{outline:2px solid #767B00;outline-offset:-2px}
#mobile-menu .mm-item > a,
#mobile-menu .mm-drill{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:17px 32px;min-height:56px;text-align:start;
  color:#0A1628;font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:500;letter-spacing:.01em;
  text-decoration:none;background:none;border:0;cursor:pointer;
}
/* Tap feedback: the pressed row turns MAG green (Castrol-style) */
#mobile-menu .mm-item > a:active,#mobile-menu .mm-drill:active{background:#A5A800;color:#fff}
#mobile-menu .mm-drill:active .mm-chev{color:#fff}
#mobile-menu .mm-chev{color:#767B00;font-size:22px;flex-shrink:0;display:flex}
html[dir="rtl"] #mobile-menu .mm-chev{transform:scaleX(-1)}

/* CTAs */
#mobile-menu .mm-cta{display:flex;flex-direction:column;gap:12px;padding:22px 32px 4px}
#mobile-menu .mm-cta a{display:block;text-align:center;padding:13px;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:15px;letter-spacing:.04em;text-decoration:none;border-radius:2px}
#mobile-menu .mm-cta-ghost{border:1px solid #cfd2d8;color:#0A1628}
#mobile-menu .mm-cta-ghost:active{border-color:#A5A800;color:#767B00}
#mobile-menu .mm-cta-solid{background:#A5A800;color:#0A1628}
#mobile-menu .mm-cta-solid:active{background:#8f9200}

/* Drill-in sub-panels: absolute overlays that slide over the root list */
#mobile-menu .mm-panel{position:absolute;inset:0;background:#fff;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain;
  padding-top:82px;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);visibility:hidden;z-index:2}
html[dir="rtl"] #mobile-menu .mm-panel{transform:translateX(-100%)}
#mobile-menu .mm-panel.is-open{transform:translateX(0);visibility:visible}
#mobile-menu .mm-back{display:flex;align-items:center;gap:8px;width:100%;padding:14px 32px;
  background:#f4f5f7;border:0;border-bottom:1px solid #edeff2;cursor:pointer;
  color:#45474c;font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:600;text-align:start}
#mobile-menu .mm-back .material-symbols-outlined{font-size:20px}
html[dir="rtl"] #mobile-menu .mm-back .material-symbols-outlined{transform:scaleX(-1)}
#mobile-menu .mm-panel-head{display:flex;align-items:center;gap:12px;padding:18px 32px;
  border-inline-start:4px solid #A5A800;border-bottom:1px solid #edeff2;
  color:#0A1628;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;text-decoration:none}
#mobile-menu .mm-sublist{list-style:none;margin:0;padding:0}
#mobile-menu .mm-sublist li{border-bottom:1px solid #edeff2}
/* Child rows sit indented under the panel head so they read as its children */
#mobile-menu .mm-sublist a{display:flex;align-items:center;min-height:52px;padding:14px 32px;padding-inline-start:46px;
  color:#0A1628;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:500;text-decoration:none}
#mobile-menu .mm-sublist a:active{background:#A5A800;color:#fff}
#mobile-menu .mm-sublist .mm-sub--child a{padding-inline-start:62px;font-size:15px;color:#45474c}
/* Deeper drill panels stack above the one below (z set inline on open) */
#mobile-menu .mm-panel--l2{z-index:3}
#mobile-menu .mm-sublist .mm-drill--sub{min-height:52px;padding:14px 32px;padding-inline-start:46px;font-size:16px}
#mobile-menu .mm-sublist .mm-drill--sub:active{background:#A5A800;color:#fff}
#mobile-menu .mm-sublist .mm-drill--sub:active .mm-chev{color:#fff}
#mobile-menu div.mm-panel-head{cursor:default}
/* animations.js staggers every #mobile-menu li on open (sets inline opacity:0 → 1).
   The drill-panel links live in overlays revealed later, so exempt them or they
   render blank until the long stagger finishes. */
#mobile-menu .mm-panel li{opacity:1 !important;transform:none !important}

/* Utility row + install button: light theme inside the white drawer */
#mobile-menu #mobile-utils{margin:8px 32px 0;padding:18px 0 0;border-top:1px solid #edeff2}
#mobile-menu #mobile-utils button{color:#45474c}
#mobile-menu #mobile-utils button:hover{color:#767B00}
#mobile-menu #mobile-utils > span{color:#cfd2d8 !important}
#mobile-menu #mag-install-row{margin:18px 32px 0;border-top-color:#edeff2}
#mobile-menu #mag-install-btn{color:#0A1628;border-color:#cfd2d8}
#mobile-menu #mag-install-btn:hover{border-color:#A5A800;color:#767B00}

/* Owner: buttons are Title Case, never all-caps. Filled/outlined CTA anchors
   and buttons across the site drop the uppercase transform (their source text
   is already Title Case); tracking calms down to suit mixed case. */
a.uppercase[class*="bg-["],button.uppercase[class*="bg-["],
a.uppercase[class*="border"],button.uppercase[class*="border"]{
  text-transform:none;letter-spacing:.05em
}

/* ═══ Footer bottom bar: logo left, compact legal block right ═══ */
footer .ft-wrap{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
footer .ft-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0}
footer .ft-links{display:flex;flex-wrap:wrap;justify-content:flex-end;column-gap:14px;row-gap:0;text-align:end}
/* tight rows: override the generic 44px footer touch rule for this dense block */
footer nav.ft-links a{color:rgba(255,255,255,.75);font-size:10.5px;letter-spacing:.06em;text-decoration:none;
  white-space:nowrap;transition:color .2s;min-height:30px;display:inline-flex;align-items:center;padding:0}
footer nav.ft-links a:hover{color:#A5A800}
footer .ft-copy{color:rgba(255,255,255,.45);font-size:10px;letter-spacing:.06em;text-align:end}
@media(max-width:767px){
  /* cap the block width so the links settle into a tidy right-aligned 2-column stack */
  footer .ft-links{column-gap:12px;max-width:236px}
  footer nav.ft-links a{min-height:28px}
}

/* Breadcrumb strip on nested pages (sits under the fixed nav, inside main's pt-[82px]) */
.bc-strip { background: #f8f9fa; border-bottom: 1px solid #e2e5ea; }
.bc-strip ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; max-width: 1536px; margin: 0 auto; padding: 11px 32px; }
@media (min-width: 768px) { .bc-strip ol { padding-left: 48px; padding-right: 48px; } }
.bc-strip li { display: flex; align-items: center; font-family: 'Space Grotesk', sans-serif; font-size: 12px; letter-spacing: 0.04em; color: #5b6b82; }
.bc-strip li + li::before { content: '/'; margin: 0 10px; color: #9aa1ad; }
.bc-strip a { color: #5b6b82; transition: color 0.2s ease; }
.bc-strip a:hover { color: #767B00; }
.bc-strip li[aria-current] { color: #101c2e; font-weight: 600; }

/* ═════════════════════════════════════════════════════════
   Container widening + mobile ergonomics
   (moved from js/main.js §7 — loads earlier, cacheable, no reflow)
   ═════════════════════════════════════════════════════════ */
@media(min-width:1400px){body .max-w-7xl{max-width:1400px}body .max-w-5xl{max-width:1100px}}
@media(min-width:1600px){body .max-w-7xl{max-width:1600px}body .max-w-5xl{max-width:1300px}}
@media(min-width:1920px){body .max-w-7xl{max-width:1800px}}
/* overscroll-behavior stops iOS rubber-band/scroll-chaining; overflow-x:hidden
   + touch-action:pan-y kill horizontal wobble — the drill panels park off-screen
   at translateX(100%), which otherwise creates swipeable horizontal overflow */
#mobile-menu{overflow-y:auto;overflow-x:hidden;touch-action:pan-y;overscroll-behavior:contain;padding-bottom:2.5rem}
@media(max-width:767px){
input,textarea,select{font-size:16px!important}
#mobile-menu-btn{width:48px;height:48px}
footer a{display:inline-block;padding:8px 4px}
footer a.flex-shrink-0{padding:0}
footer a:not(.flex-shrink-0){min-height:44px;display:inline-flex;align-items:center}
#mobile-utils button{min-height:44px}
/* lang + search icons now sit in the mobile nav next to the hamburger */
#lang-btn,#search-btn{min-height:44px;min-width:40px;justify-content:center}
}
.slide-dot{position:relative}
.slide-dot::after{content:"";position:absolute;left:0;right:0;top:-21px;bottom:-21px}
#hero-playpause{padding:12px;margin:-12px}
/* Language/region modal options — hover via CSS (CSP-safe; replaces inline on* handlers) */
.mag-lm-opt:hover{border-color:#A5A800 !important;background:#f8f9fa !important;transform:translateY(-1px)}
.mag-lm-lang:hover{border-color:#A5A800 !important}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #767B00;outline-offset:2px}

/* ───────────────────────────────────────────────────────────
   AA contrast — brand olive text on light grounds
   #A5A800 is ~2.56:1 on white (fails WCAG AA text + non-text);
   #767B00 is ~4.56:1 (passes). The site's default ground is light, so darken
   olive text by default, then re-assert the brighter #A5A800 inside the dark
   navy sections/heroes (#0A1628 / #0C2340 / #101c2e) where it already passes
   (~6:1) and is the intended accent. Faint decorative variants (…/[0.08]) and
   bg-/border-olive are untouched.
   ─────────────────────────────────────────────────────────── */
.text-\[\#A5A800\],
.hover\:text-\[\#A5A800\]:hover,
.group:hover .group-hover\:text-\[\#A5A800\],
.before\:text-\[\#A5A800\]:before{color:#767B00}
[class*="bg-[#0A1628]"] .text-\[\#A5A800\],
[class*="bg-[#0C2340]"] .text-\[\#A5A800\],
[class*="bg-[#101c2e]"] .text-\[\#A5A800\],
[class*="bg-[#0A1628]"] .hover\:text-\[\#A5A800\]:hover,
[class*="bg-[#0C2340]"] .hover\:text-\[\#A5A800\]:hover,
[class*="bg-[#101c2e]"] .hover\:text-\[\#A5A800\]:hover,
[class*="bg-[#0A1628]"] .group:hover .group-hover\:text-\[\#A5A800\],
[class*="bg-[#0C2340]"] .group:hover .group-hover\:text-\[\#A5A800\],
[class*="bg-[#101c2e]"] .group:hover .group-hover\:text-\[\#A5A800\]{color:#A5A800}
h1,h2,h3{text-wrap:balance}
@media(min-width:768px) and (max-width:1130px){#main-nav ul>li{padding-left:0.6rem;padding-right:0.6rem}#main-nav ul>li>a{font-size:13.5px;letter-spacing:0}}
@media(min-width:1130.02px) and (max-width:1460px){html[lang="fr"] #main-nav ul>li{padding-left:0.6rem;padding-right:0.6rem}html[lang="fr"] #main-nav ul>li>a{font-size:13.5px;letter-spacing:0}}

/* ═════════════════════════════════════════════════════════
   Desktop mega-menu (moved from js/main.js mega builder)
   ═════════════════════════════════════════════════════════ */
.mega-panel{position:fixed;left:0;right:0;margin-left:auto;margin-right:auto;max-width:33.6cm;top:82px;z-index:45;background:#fff;border-top:2px solid #A5A800;box-shadow:0 28px 64px rgba(10,22,40,.18);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .13s ease,transform .13s ease,visibility 0s linear .13s}
.mega-panel.open{opacity:1;visibility:visible;transform:none;transition:opacity .13s ease,transform .13s ease}
.mega-inner{max-width:none;margin:0 auto;display:grid;grid-template-columns:190px auto;gap:36px;padding:36px 44px;align-items:stretch;justify-content:center}
.mega-inner.has-feat{grid-template-columns:185px 566px 300px}
.mega-intro-h{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#101c2e;font-size:20px;margin:0 0 14px}
.mega-intro-x{color:#45474c;font-size:13.5px;line-height:1.65;margin:0 0 20px;max-width:30ch}
.mega-intro-cta{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:#767B00;text-decoration:none}
.mega-intro-cta:hover{color:#101c2e}
.mega-groups{display:flex;gap:40px;border-left:1px solid rgba(197,198,205,.5);border-right:1px solid rgba(197,198,205,.5);padding-left:32px;padding-right:32px;flex-wrap:nowrap}
.mega-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.mega-link{display:block;padding:7px 0;text-decoration:none}
.mega-subgroup{display:flex;flex-direction:column;gap:4px;margin-block:2px;margin-inline:7px 0;padding-inline-start:16px;border-inline-start:2px solid rgba(165,168,0,.45)}
.mega-link-t{display:block;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:#101c2e;transition:color .15s ease;white-space:nowrap}
.mega-link:hover .mega-link-t,.mega-link--active .mega-link-t{color:#767B00}
.mega-feat{position:relative;overflow:hidden;display:block;min-height:248px;background:#0A1628;text-decoration:none}
.mega-feat-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55;transition:transform .5s ease,opacity .3s ease}
.mega-feat:hover .mega-feat-img{transform:scale(1.06);opacity:.7}
.mega-feat-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;background:linear-gradient(to top,rgba(10,22,40,.88),rgba(10,22,40,.05))}
.mega-feat-k{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#767B00;font-weight:700}
.mega-feat-t{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;color:#fff;margin-top:4px}
.mega-feat-x{font-size:12px;color:#cbd5e1;margin-top:4px}
.mega-feat-cta{font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:#fff;margin-top:14px}
.mega-feat:hover .mega-feat-cta{color:#767B00}
/* Product card: big bottle hugged on the LEFT, text RIGHT, flat grey bg (same card height) */
.mega-feat--product{background:#eceeef}
.mega-feat--product .mega-feat-img{inset-block:0;inset-inline:5% 61%;opacity:1;background-size:auto 72%;background-repeat:no-repeat;background-position:center}
.mega-feat--product .mega-feat-body{inset-block:0;inset-inline:44% 0;justify-content:center;background:transparent;padding-block:16px;padding-inline:4px 16px}
.mega-feat--product .mega-feat-k{white-space:nowrap}
.mega-feat--product .mega-feat-t{color:#101c2e;font-size:15px;line-height:1.2;white-space:normal}
.mega-feat--product .mega-feat-x{color:#45474c}
.mega-feat--product .mega-feat-cta{color:#101c2e;margin-top:10px}
.mega-feat--product:hover .mega-feat-cta{color:#767B00}
.mega-feat--product:hover .mega-feat-img{transform:scale(1.05)}
/* Products panel: industry selector rail (left) drives the category grid (right) */
#mega-products .mega-inner.has-feat{grid-template-columns:170px minmax(0,1fr) 300px}
.mega-filter{display:grid;grid-template-columns:164px minmax(0,1fr);gap:0 26px;border-inline-start:1px solid rgba(197,198,205,.5);border-inline-end:1px solid rgba(197,198,205,.5);padding-block:0;padding-inline:14px 26px}
.mega-ind-rail{display:flex;flex-direction:column;gap:2px;border-inline-end:1px solid rgba(197,198,205,.5);padding-inline-end:14px}
.mega-ind{display:flex;align-items:center;justify-content:space-between;gap:10px;background:none;border:0;border-inline-start:2px solid transparent;padding-block:6px;padding-inline:10px 8px;cursor:pointer;text-align:start;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:13.5px;color:#3A5070;transition:color .15s ease,border-color .15s ease,background-color .15s ease}
.mega-ind:hover{color:#101c2e}
.mega-ind--on{border-inline-start-color:#A5A800;background:rgba(165,168,0,.08);color:#101c2e}
.mega-cats-wrap{display:flex;flex-direction:column;min-width:0}
.mega-cats-h{font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:#75777d;margin:2px 0 8px}
.mega-sec-x{font-size:13px;line-height:1.6;color:#45474c;margin:0 0 12px;max-width:52ch}
.mega-cats.mega-cats--list{grid-template-columns:minmax(0,1fr)}
.mega-cats--list .mega-link-t{white-space:nowrap}
html[lang="fr"] .mega-link-t,html[lang="ar"] .mega-link-t{white-space:normal}
.mega-cat--sub{margin-inline-start:7px;padding-inline-start:16px;border-inline-start:2px solid rgba(165,168,0,.45)}
/* Bird's-eye detail zone: mini visual + Learn More (rail items with a detail block) */
.mega-detail{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:4px}
.mega-detail[hidden]{display:none}
.mega-detail--in{animation:megaCatIn .18s ease both}
.mega-more{display:inline-block;font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:10px;color:#101c2e;border:1px solid #101c2e;padding:6px 12px;text-decoration:none;transition:color .15s ease,border-color .15s ease,background-color .15s ease}
.mega-more:hover,.mega-more:active{background:#767B00;border-color:#767B00;color:#fff}
/* mini timeline (history) */
.mega-tl{display:flex;width:100%;position:relative;margin-top:6px}
.mega-tl::before{content:'';position:absolute;top:5px;left:8%;right:8%;height:2px;background:rgba(197,198,205,.55)}
.mega-tl-i{position:relative;flex:1;min-width:0;text-align:center;padding-top:18px}
.mega-tl-i::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:12px;height:12px;background:#fff;border:3px solid #A5A800;border-radius:50%}
.mega-tl-y{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12.5px;color:#101c2e}
.mega-tl-t{display:block;font-size:9.5px;color:#75777d;line-height:1.3;margin-top:1px}
/* pillar / process tokens (purpose, services flows) */
.mega-tok{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.mega-tok-i{display:flex;align-items:center;gap:8px;border:1px solid rgba(197,198,205,.7);padding:8px 14px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:#101c2e}
.mega-tok-i::before{content:'';width:7px;height:7px;background:#A5A800}
.mega-tok-a{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:#767B00}
/* RTL: arrow glyphs are text ("→") and must point with the reading direction */
[dir="rtl"] .mega-arr,[dir="rtl"] .mega-tok-a{display:inline-block;transform:scaleX(-1)}
#mega-services .mega-filter{grid-template-columns:180px minmax(0,1fr)}
/* leadership card */
.mega-lead{border-inline-start:3px solid #A5A800;padding-block:4px;padding-inline:14px 0}
.mega-lead-n{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;color:#101c2e}
.mega-lead-r{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:#75777d;margin-top:3px}
/* mini stat grid (infrastructure) */
.mega-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:rgba(197,198,205,.5);border:1px solid rgba(197,198,205,.5);width:100%}
.mega-stat{background:#fff;padding:10px 12px}
.mega-stat-n{display:block;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;color:#101c2e}
.mega-stat-l{display:block;font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:#75777d;margin-top:2px}
.mega-subtabs{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 12px}
.mega-subtabs[hidden]{display:none}
.mega-subtab{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:600;letter-spacing:.03em;color:#3A5070;background:none;border:0;border-bottom:2px solid rgba(197,198,205,.45);padding:2px 1px 6px;white-space:nowrap;cursor:pointer;transition:color .15s ease,border-color .15s ease}
.mega-subtab:hover{color:#101c2e;border-bottom-color:#A5A800}
.mega-subtab--on{color:#101c2e;border-bottom-color:#A5A800}
.mega-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;align-content:start}
.mega-cat .mega-link-t{font-size:15px;white-space:normal}
.mega-cat--hide{display:none}
.mega-cats--in .mega-cat{animation:megaCatIn .16s ease both;animation-delay:calc(var(--i,0)*14ms)}
@keyframes megaCatIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mega-panel .mega-intro,.mega-panel .mega-col,.mega-panel .mega-ind-rail,.mega-panel .mega-cats-wrap,.mega-panel .mega-feat{opacity:0;transform:translateY(5px);transition:opacity .16s ease,transform .16s ease}
.mega-panel.open .mega-intro{opacity:1;transform:none;transition-delay:.02s}
.mega-panel.open .mega-col:nth-child(1),.mega-panel.open .mega-ind-rail{opacity:1;transform:none;transition-delay:.04s}
.mega-panel.open .mega-col:nth-child(2),.mega-panel.open .mega-cats-wrap{opacity:1;transform:none;transition-delay:.06s}
.mega-panel.open .mega-feat{opacity:1;transform:none;transition-delay:.08s}
@media (prefers-reduced-motion: reduce){.mega-panel,.mega-panel *{transition:none!important;transform:none!important;animation:none!important}}
@media (max-width: 767px){.mega-panel{display:none!important}}
/* Scroll progress bar: shown on mobile only, hidden on desktop */
@media (min-width:768px){#scroll-progress{display:none!important}}
/* Current page tab AND the tab whose mega-menu is open: persistent green + underline */
#main-nav ul > li.nav-active::before,#main-nav ul > li.mega-current::before{transform:scaleX(1)}
#main-nav ul > li.nav-active > a,#main-nav ul > li.mega-current > a{color:#767B00 !important;font-weight:700}
/* Single-active rule: while a mega-menu is open, the current-page tab yields so
   only the tab being hovered stays lit. Two tabs never read as selected at once;
   the "you are here" highlight returns the moment the menu closes. */
#main-nav.mega-open ul > li.nav-active:not(.mega-current)::before{transform:scaleX(0)}
#main-nav.mega-open ul > li.nav-active:not(.mega-current) > a{color:#3A5070 !important;font-weight:500}
/* Same yield when hovering/focusing a tab WITHOUT a mega-menu (Services, Careers):
   no panel opens, so :has() on the hovered/focused sibling drives the dimming. */
#main-nav ul:has(> li:hover) > li.nav-active:not(:hover)::before,
#main-nav ul:has(> li:focus-within) > li.nav-active:not(:focus-within)::before{transform:scaleX(0)}
#main-nav ul:has(> li:hover) > li.nav-active:not(:hover) > a,
#main-nav ul:has(> li:focus-within) > li.nav-active:not(:focus-within) > a{color:#3A5070 !important;font-weight:500}
/* Smaller desktops / browser zoom: keep the SAME 4-zone layout, just tighter
   (prevents the link columns from wrapping into one tall column) */
@media (min-width:768px) and (max-width:1180px){
  .mega-inner.has-feat{grid-template-columns:160px 500px 250px;gap:28px;padding:28px 32px}
  .mega-groups{gap:24px;padding-left:20px;padding-right:20px}
  .mega-intro-h{font-size:18px}
  .mega-intro-x{font-size:12.5px}
  .mega-link-t{font-size:15px}
  .mega-feat{min-height:210px}
  #mega-products .mega-inner.has-feat{grid-template-columns:150px minmax(0,1fr) 250px}
  .mega-filter{grid-template-columns:148px minmax(0,1fr);gap:0 18px;padding-block:0;padding-inline:12px 20px}
  .mega-ind-rail{padding-inline-end:12px}
  .mega-ind{font-size:12.5px}
  .mega-subtabs{gap:4px 12px}
  .mega-subtab{font-size:11px;padding-bottom:5px}
  .mega-cats{gap:0 18px}
  .mega-cat .mega-link-t{font-size:14px}
}

/* ───────────────────────────────────────────────────────────
   Mobile quick-contact FABs (#mag-fab) — Call + Get a Quote as two round icons
   docked to the screen's end edge (replaced the full-width sticky bar).
   - Appear only after the visitor scrolls (.is-on, set by main.js)
   - A slim arrow tab "semi-hides" them: .is-docked slides the icon stack off
     the edge (animating inset-inline-end, so RTL mirrors automatically) and
     leaves just the tab; the same tab pulls them back out.
   - Draggable vertically (main.js).
   z-index 35 sits BELOW the mobile menu (z-40), search (9600), cookie (9998).
   ─────────────────────────────────────────────────────────── */
#mag-fab{display:none}
@media(max-width:767px){
  #mag-fab{
    display:flex;align-items:center;gap:6px;
    position:fixed;inset-inline-end:10px;top:58%;z-index:35;
    touch-action:none;-webkit-tap-highlight-color:transparent;
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:opacity .25s ease,transform .25s ease,visibility .25s,inset-inline-end .3s ease;
  }
  #mag-fab.is-on{opacity:1;visibility:visible;transform:translateY(0)}
  #mag-fab.is-docked{inset-inline-end:-60px}          /* stack (52px) slides off; tab stays */
  #mag-fab.is-dragging{opacity:.85}
  #mag-fab .mag-fab-stack{display:flex;flex-direction:column;align-items:center;gap:10px}
  #mag-fab .mag-fab-btn{
    display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;
    text-decoration:none;box-shadow:0 4px 16px rgba(10,22,40,.22);
  }
  #mag-fab .mag-fab-btn .material-symbols-outlined{font-size:24px}
  #mag-fab .mag-fab-call{background:#fff;color:#0A1628;border:1px solid rgba(10,22,40,.12)}
  #mag-fab .mag-fab-call:active{background:#f1f3f6}
  #mag-fab .mag-fab-quote{background:#A5A800;color:#0A1628}
  #mag-fab .mag-fab-quote:active{background:#8f9200}
  #mag-fab .mag-fab-btn:focus-visible{outline:2px solid #767B00;outline-offset:2px}
  /* the pull-out / dock tab */
  #mag-fab #mag-fab-tab{
    display:flex;align-items:center;justify-content:center;width:22px;height:56px;
    background:rgba(10,22,40,.5);color:#fff;border:0;cursor:pointer;padding:0;
    border-start-start-radius:10px;border-end-start-radius:10px;
    border-start-end-radius:0;border-end-end-radius:0;
  }
  #mag-fab #mag-fab-tab .material-symbols-outlined{font-size:18px;transition:transform .3s ease}
  /* chevron_left points "pull out" when docked (LTR); flips when expanded */
  #mag-fab:not(.is-docked) #mag-fab-tab .material-symbols-outlined{transform:rotate(180deg)}
  html[dir="rtl"] #mag-fab #mag-fab-tab .material-symbols-outlined{transform:rotate(180deg)}
  html[dir="rtl"] #mag-fab:not(.is-docked) #mag-fab-tab .material-symbols-outlined{transform:rotate(0deg)}
  /* the drawer (z-40) covers the FABs; also hide while it's open for cleanliness */
  body.mag-menu-open #mag-fab{display:none}
  @media (prefers-reduced-motion: reduce){#mag-fab{transition:none;transform:none}}
}

/* ───────────────────────────────────────────────────────────
   Back-to-top (#mag-top) — appears after ~1.5 viewports of scrolling,
   bottom end corner, all viewports. Hidden while the drawer is open.
   ─────────────────────────────────────────────────────────── */
#mag-top{
  position:fixed;inset-inline-end:16px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;
  display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  background:#A5A800;color:#0A1628;border:0;cursor:pointer;box-shadow:0 4px 16px rgba(10,22,40,.25);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
  -webkit-tap-highlight-color:transparent;
}
#mag-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
#mag-top:hover{background:#8f9200}
#mag-top:focus-visible{outline:2px solid #767B00;outline-offset:2px}
#mag-top .material-symbols-outlined{font-size:22px}
body.mag-menu-open #mag-top{display:none}
@media (prefers-reduced-motion: reduce){#mag-top{transition:none;transform:none}}

/* ───────────────────────────────────────────────────────────
   Homepage Certifications & Standards (Tier 2 upgrade). Plain CSS,
   no Tailwind rebuild. Two honest groups: ISO certifications (with the
   management-system scope, wording mirrored from our-infrastructure.html so
   the AR/FR pack translations resolve) + industry standards (acronym plates).
   Replaces the old faded opacity-60 boxes with clean cards + olive hover.
   ─────────────────────────────────────────────────────────── */
.mag-cert-group{color:#9a9ca2;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.22em;text-align:center}
.mag-cert-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;min-height:108px;padding:22px 16px;background:#fff;border:1px solid #dcdde2;border-radius:2px;transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease;cursor:default}
.mag-cert-card:hover{border-color:#A5A800;box-shadow:0 10px 26px rgba(10,22,40,.07)}
.mag-cert-code{color:#0A1628;font-weight:700;font-size:18px;letter-spacing:.05em;line-height:1}
.mag-cert-card--std .mag-cert-code{font-size:23px;letter-spacing:.14em}
.mag-cert-cap{color:#6b6d73;font-size:11.5px;line-height:1.35;letter-spacing:.005em;max-width:18ch}

/* ───────────────────────────────────────────────────────────
   Quick RFQ modal (Tier 2) — opened by [data-mag-rfq] triggers (e.g. the
   sticky bar's Get a Quote). Built + wired in main.js; posts to /api/contact
   as form_type=quick_quote, reusing MAGFormSecurity (Turnstile + honeypot +
   business-email). z-index 9700: above search (9600), below cookie (9998).
   Logical props (start / inline-end) so it mirrors correctly in RTL.
   ─────────────────────────────────────────────────────────── */
#mag-rfq{position:fixed;inset:0;z-index:9700;display:none;font-family:Inter,sans-serif}
#mag-rfq.is-open{display:block}
#mag-rfq .mag-rfq-backdrop{position:absolute;inset:0;background:rgba(10,22,40,.55)}
#mag-rfq .mag-rfq-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:calc(100% - 32px);max-width:440px;max-height:calc(100vh - 32px);overflow-y:auto;
  background:#fff;border-radius:6px;box-shadow:0 24px 60px rgba(10,22,40,.35);padding:28px 26px}
#mag-rfq .mag-rfq-close{position:absolute;top:10px;inset-inline-end:10px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;border:none;background:none;color:#75777d;cursor:pointer;border-radius:50%;font-size:22px;line-height:1}
#mag-rfq .mag-rfq-close:hover{background:#f1f3f6;color:#0A1628}
#mag-rfq .mag-rfq-title{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:22px;color:#0A1628;margin-bottom:6px;padding-inline-end:28px}
#mag-rfq .mag-rfq-sub{font-size:13.5px;color:#6b6d73;line-height:1.5;margin-bottom:20px}
#mag-rfq label{display:block;font-size:12px;font-weight:600;color:#0A1628;letter-spacing:.01em;margin-bottom:6px;text-align:start}
#mag-rfq select,#mag-rfq input[type=email],#mag-rfq textarea{width:100%;border:1px solid #d3d4d9;border-radius:4px;
  padding:11px 12px;font-size:16px;color:#0A1628;background:#fff;margin-bottom:16px;font-family:inherit}
#mag-rfq select:focus,#mag-rfq input:focus,#mag-rfq textarea:focus{outline:2px solid #767B00;outline-offset:1px;border-color:#767B00}
#mag-rfq textarea{resize:vertical;min-height:76px}
#mag-rfq input.mag-field-error,#mag-rfq select.mag-field-error,#mag-rfq textarea.mag-field-error{border-color:#b42318}
#mag-rfq .mag-rfq-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#mag-rfq .mag-rfq-consent{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;cursor:pointer}
#mag-rfq .mag-rfq-consent input{margin-top:3px;flex-shrink:0}
#mag-rfq .mag-rfq-consent span{font-size:12px;color:#6b6d73;line-height:1.5;text-align:start}
#mag-rfq .mag-rfq-consent a{color:#767B00;text-decoration:underline}
#mag-rfq .mag-rfq-submit{width:100%;background:#A5A800;color:#0A1628;border:none;border-radius:4px;
  padding:14px;font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;cursor:pointer;min-height:48px;transition:background .2s}
#mag-rfq .mag-rfq-submit:hover{background:#8f9200}
#mag-rfq .mag-rfq-submit:disabled{opacity:.7;cursor:default}
#mag-rfq .mag-rfq-msg{font-size:13px;line-height:1.5;margin-top:14px;padding:10px 12px;border-radius:4px}
#mag-rfq .mag-rfq-success{background:#f3f6e8;color:#4a5200;border:1px solid #d9e0a8}
#mag-rfq .mag-rfq-error{background:#fdecec;color:#b42318;border:1px solid #f3c2c2}
#mag-rfq .mag-rfq-full{display:inline-block;margin-top:14px;font-size:12.5px;color:#767B00;text-decoration:underline}
#mag-rfq [data-turnstile-container]{margin-bottom:16px}

/* ───────────────────────────────────────────────────────────
   PWA install entry — injected into the mobile drawer by main.js §13, shown
   only when the app is installable (Chrome beforeinstallprompt) or on iOS
   Safari (manual Add-to-Home-Screen hint). Styled for the dark navy drawer.
   ─────────────────────────────────────────────────────────── */
#mag-install-row{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:none}
#mag-install-row.is-visible{display:block}
#mag-install-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:12px 16px;cursor:pointer;
  color:#fff;background:none;border:1px solid rgba(255,255,255,.25);border-radius:4px;
  font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:15px;transition:border-color .2s,color .2s}
#mag-install-btn:hover{border-color:#A5A800;color:#A5A800}
#mag-install-btn:focus-visible{outline:2px solid #A5A800;outline-offset:2px}
#mag-install-btn .material-symbols-outlined{font-size:22px}
#mag-install-btn span:last-child{text-align:start;line-height:1.3}