/* ===== Utility bar ===== */
.utility-bar { background: var(--cx-ink); color: var(--cx-steel); font-size: .8125rem; }
.utility-bar__inner { display: flex; align-items: center; justify-content: space-between; height: 36px; gap: var(--sp-4); }
.utility-bar__links { list-style: none; display: flex; gap: var(--sp-5); margin: 0; padding: 0; }
.utility-bar__links a { color: var(--cx-steel); text-decoration: none; font-weight: 600; }
.utility-bar__links a:hover { color: #fff; }
.utility-bar__right { white-space: nowrap; }
@media (max-width: 767px) { .utility-bar__links { display: none; } }

/* ===== Masthead ===== */
.masthead { background: #fff; border-bottom: 1px solid var(--cx-line); }
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 96px; padding-block: var(--sp-3); }
.masthead__logo { display: flex; align-items: center; flex: none; }
.masthead__logo img { height: 46px; width: auto; display: block; }
.masthead__info { list-style: none; display: flex; gap: var(--sp-6); margin: 0; padding: 0; flex: 1; justify-content: center; }
.info-box { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-small); color: var(--cx-body); }
.info-box svg { width: 28px; height: 28px; color: var(--cx-red); flex: none; }
.info-box strong { display: block; color: var(--cx-ink); font-family: var(--ff-head); font-size: .8125rem; }
.masthead__cta { flex: none; }
@media (max-width: 1199px) { .masthead__info { display: none; } }
@media (max-width: 991px) { .masthead__inner { min-height: 64px; } .masthead__cta { display: none; } }

/* ===== Red nav bar ===== */
.navbar { background: var(--cx-red); position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.navbar__inner { display: flex; align-items: center; height: 60px; gap: var(--sp-5); }
.navbar__burger { display: none; background: none; border: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: var(--sp-2); }
.nav { list-style: none; display: flex; gap: var(--sp-6); margin: 0; padding: 0; flex: 1; }
.nav > li { position: relative; display: flex; align-items: center; }
.nav > li > a, .nav > li > button.nav__top-link {
  color: #fff; text-decoration: none; font-family: var(--ff-head); font-weight: 600; font-size: .9375rem;
  background: none; border: none; cursor: pointer; padding: var(--sp-5) 0; display: inline-flex; align-items: center; gap: 6px;
}
.nav > li > a:hover, .nav > li > button.nav__top-link:hover, .nav > li.is-open > button.nav__top-link { color: rgba(255,255,255,.82); }
.nav__top-link svg { width: 14px; height: 14px; transition: transform .15s; }
.nav > li.is-open > button.nav__top-link svg { transform: rotate(180deg); }
.navbar__phone { color: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; flex: none; }
.navbar__phone strong { font-family: var(--ff-head); font-size: .9375rem; }
.navbar__phone small { font-size: .75rem; color: rgba(255,255,255,.8); }

/* Mega menu */
.mega {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: min(920px, 92vw);
  background: #fff; color: var(--cx-ink); box-shadow: var(--shadow-2); border-radius: 0 0 var(--radius) var(--radius);
  padding: var(--sp-6); display: none; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6); z-index: 600;
}
.nav > li:first-child .mega { left: 0; transform: none; }
.nav > li.is-open > .mega { display: grid; }
.mega--2col { grid-template-columns: repeat(2, 1fr) 1.1fr; }
.mega__col-title { font-family: var(--ff-head); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cx-muted); margin-bottom: var(--sp-3); }
.mega__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.mega__col a { color: var(--cx-ink); text-decoration: none; font-size: var(--fs-small); font-weight: 600; display: block; padding: var(--sp-2) 0; }
.mega__col a:hover { color: var(--cx-red-600); }
.mega__feature { background: var(--cx-night); color: #fff; border-radius: var(--radius); padding: var(--sp-5); display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-4); }
.mega__feature h4 { color: #fff; font-size: 1rem; margin-bottom: var(--sp-2); }
.mega__feature p { color: var(--cx-steel); font-size: .8125rem; margin: 0; }
.mega__feature .link-arrow { color: var(--cx-red-on-dark); }

/* Simple dropdown (Industries / Company) */
.dropdown { position: absolute; top: 100%; left: 0; background: #fff; color: var(--cx-ink); min-width: 260px; box-shadow: var(--shadow-2); border-radius: 0 0 var(--radius) var(--radius); padding: var(--sp-4); display: none; z-index: 600; }
.nav > li.is-open > .dropdown { display: block; }
.dropdown ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dropdown a { display: block; padding: var(--sp-2) var(--sp-3); color: var(--cx-ink); text-decoration: none; font-size: var(--fs-small); font-weight: 600; border-radius: 2px; }
.dropdown a:hover { background: var(--cx-mist); color: var(--cx-red-600); }
.dropdown--cols { min-width: 440px; grid-template-columns: 1fr 1fr; display: none; gap: var(--sp-4); }
.nav > li.is-open > .dropdown--cols { display: grid; }

@media (max-width: 991px) {
  .navbar__burger { display: inline-flex; }
  .navbar__phone, .nav { display: none; }
}

/* Mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: #fff; z-index: 1000;
  box-shadow: -8px 0 24px rgba(0,0,0,.2); display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .2s ease;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__backdrop { position: fixed; inset: 0; background: rgba(14,19,26,.5); z-index: 999; display: none; }
.mobile-drawer__backdrop.is-open { display: block; }
.mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--cx-line); }
.mobile-drawer__close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--cx-ink); padding: var(--sp-2); }
.mobile-drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); }
.mobile-drawer__body details { border-bottom: 1px solid var(--cx-line); }
.mobile-drawer__body summary { list-style: none; padding: var(--sp-4) 0; font-family: var(--ff-head); font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.mobile-drawer__body summary::-webkit-details-marker { display: none; }
.mobile-drawer__body summary svg { width: 18px; height: 18px; color: var(--cx-red-600); transition: transform .15s; }
.mobile-drawer__body details[open] summary svg { transform: rotate(180deg); }
.mobile-drawer__body ul { list-style: none; margin: 0 0 var(--sp-3); padding: 0 0 0 var(--sp-3); display: grid; gap: var(--sp-2); }
.mobile-drawer__body a { color: var(--cx-body); text-decoration: none; font-size: var(--fs-small); display: block; padding: var(--sp-1) 0; }
.mobile-drawer__body > a { display: block; padding: var(--sp-4) 0; border-bottom: 1px solid var(--cx-line); font-family: var(--ff-head); font-weight: 700; color: var(--cx-ink); text-decoration: none; }
.mobile-drawer__foot { padding: var(--sp-5); border-top: 1px solid var(--cx-line); display: grid; gap: var(--sp-3); }
.mobile-drawer__foot a.navbar__phone { color: var(--cx-ink); align-items: flex-start; }
.mobile-drawer__foot a.navbar__phone small { color: var(--cx-muted); }

/* ===== Hero ===== */
.hero {
  position: relative; color: #fff; overflow: hidden;
  background: var(--cx-night) linear-gradient(100deg, rgba(227,0,42,.92) 0%, rgba(227,0,42,.78) 42%, rgba(14,19,26,.55) 100%);
  padding-block: clamp(72px, 11vw, 140px);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .5;
}
.hero__inner { position: relative; max-width: 760px; }
.hero h1 { color: #fff; font-size: var(--fs-display); margin-bottom: var(--sp-5); }
.hero p.lead { color: rgba(255,255,255,.92); margin-bottom: var(--sp-7); }

.trust-strip { background: #fff; border-bottom: 1px solid var(--cx-line); padding-block: var(--sp-4); }
.trust-strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-7); margin: 0; padding: 0; justify-content: center; }
.trust-strip li { font-size: var(--fs-small); font-weight: 600; color: var(--cx-body); display: flex; align-items: center; gap: var(--sp-2); }
.trust-strip li svg { width: 16px; height: 16px; color: var(--cx-red); flex: none; }

/* ===== Footer ===== */
.footer { background: var(--cx-night); color: var(--cx-steel); }
.footer__grid { display: grid; gap: var(--sp-8); grid-template-columns: 1.3fr 1fr 1fr 1fr; padding-block: clamp(48px, 6vw, 80px); }
@media (max-width: 991px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand img { height: 38px; width: auto; margin-bottom: var(--sp-4); }
.footer__brand p { font-size: var(--fs-small); color: var(--cx-steel); margin-bottom: var(--sp-4); }
.footer__brand address { font-size: var(--fs-small); color: var(--cx-steel); line-height: 1.8; }
.footer__brand a { color: var(--cx-steel); text-decoration: none; }
.footer__brand a:hover { color: #fff; }
.email-reveal { background: none; border: none; color: var(--cx-red-on-dark); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.footer__title { font-family: var(--ff-head); color: #fff; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 var(--sp-4); }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.footer__col a { color: var(--cx-steel); text-decoration: none; font-size: var(--fs-small); }
.footer__col a:hover { color: #fff; }
.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer__social a { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; display: grid; place-items: center; color: var(--cx-steel); }
.footer__social a:hover { border-color: var(--cx-red-on-dark); color: var(--cx-red-on-dark); }
.footer__social svg { width: 16px; height: 16px; }
.footer__bar { border-top: 1px solid rgba(255,255,255,.12); }
.footer__bar-inner { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; justify-content: space-between; padding-block: var(--sp-5); font-size: .8125rem; }
.footer__bar p { margin: 0; color: var(--cx-steel); }
.footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-5); margin: 0; padding: 0; }
.footer__legal a { color: var(--cx-steel); text-decoration: none; }
.footer__legal a:hover { color: #fff; }

/* Back to top */
.back-to-top {
  position: fixed; right: var(--sp-5); bottom: var(--sp-5); width: 44px; height: 44px; border-radius: 50%;
  background: var(--cx-ink); color: #fff; border: none; display: none; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: var(--shadow-2); z-index: 400;
}
.back-to-top.is-visible { display: flex; }
.back-to-top svg { width: 20px; height: 20px; }

/* ===== 2026-11-03 fixes ===== */
/* Header: 2 rows only (masthead + nav bar); info boxes are 2 tight lines */
.masthead__inner { min-height: 84px; }
.info-box br { display: none; }
.info-box span { line-height: 1.4; }
.info-box strong { line-height: 1.4; margin-bottom: 2px; }

/* Mega menus anchor to the nav container, never to their own (off-centre) item */
.navbar__inner { position: relative; }
.nav > li:has(> .mega) { position: static; }
.nav > li > .mega,
.nav > li:first-child > .mega {
  left: clamp(16px, 4vw, 32px);
  right: auto;
  transform: none;
  width: min(920px, calc(100% - 2 * clamp(16px, 4vw, 32px)));
}

/* Hero sits closer to the menu bar */
.hero { padding-top: clamp(14px, 1.8vw, 24px); padding-bottom: clamp(56px, 8vw, 110px); }

/* The hero's two-column grid was vertically centering the text block against the much taller
   hero illustration, which pushed the heading down and recreated the "gap below the nav bar"
   look even with padding-top reduced. Top-align the row instead so the heading starts right
   after the hero's own padding, independent of how tall the illustration is. */
.hero .split { align-items: start; }

/* Footer company name readable on dark */
.footer__brand address strong { color: #fff; }

/* ===== Header phone call-to-action (desktop only; mobile drawer keeps its own style) ===== */
@media (min-width: 992px) {
  .navbar .navbar__phone {
    display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 0; align-items: center; align-content: center;
    background: #fff; color: var(--cx-ink);
    padding: 6px 18px 6px 8px; border-radius: 999px;
    box-shadow: 0 2px 8px rgba(14,19,26,.22);
    transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .navbar .navbar__phone::before {
    content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%;
    background-color: var(--cx-red);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 18px 18px; grid-row: 1 / span 2; grid-column: 1;
  }
  .navbar .navbar__phone span, .navbar .navbar__phone > * { line-height: 1.2; }
  .navbar .navbar__phone strong { grid-column: 2; grid-row: 1; align-self: end; color: var(--cx-ink); font-size: .9375rem; display: block; white-space: nowrap; transition: color .18s ease; }
  .navbar .navbar__phone small { grid-column: 2; grid-row: 2; align-self: start; color: var(--cx-red-600); font-weight: 600; display: block; white-space: nowrap; transition: color .18s ease; }
  .navbar .navbar__phone:hover, .navbar .navbar__phone:focus-visible {
    background: var(--cx-night); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(14,19,26,.35);
  }
  .navbar .navbar__phone:hover strong, .navbar .navbar__phone:focus-visible strong { color: #fff; }
  .navbar .navbar__phone:hover small, .navbar .navbar__phone:focus-visible small { color: var(--cx-red-on-dark); }
}
@media (prefers-reduced-motion: reduce) { .navbar .navbar__phone { transition: none; } .navbar .navbar__phone:hover { transform: none; } }