:root {
  --npe-blue: #1E5B9E;
  --npe-navy: #00205B;
  --npe-ink: #00102D;
  --npe-orange: #FA5D0A;
}


.af-page-title h1 {
  font-family: 'BW Mitga', Roboto, sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: clamp(34px, 4.5vw, 56px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.005em !important;
  color: var(--npe-ink) !important;
}
.af-page-title h1::before {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--npe-orange);
  margin-bottom: 18px;
}
@media (max-width: 767px) {
  .af-page-title h1 { font-size: clamp(30px, 8vw, 40px) !important; }
}


a:focus-visible, button:focus-visible { outline-color: var(--npe-orange) !important; }


nav[aria-label="Primary"] .has-dropdown > a[aria-haspopup="true"] {
  padding: 9px 14px;
  border-radius: 3px;
  transition: background .2s, color .2s;
}
nav[aria-label="Primary"] .has-dropdown:hover > a[aria-haspopup="true"],
nav[aria-label="Primary"] .has-dropdown:focus-within > a[aria-haspopup="true"],
nav[aria-label="Primary"] .has-dropdown.is-open > a[aria-haspopup="true"] {
  background: #f2f2f2;
  color: var(--npe-ink);
}

.dropdown-panel {
  background: #F2EFE9 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 0 18px 40px rgba(0, 16, 45, .12) !important;
  padding: 4px 0 !important;
  min-width: 300px !important;
}
.dropdown-panel a {
  display: block;
  margin: 0 22px !important;          
  padding: 15px 0 !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 16, 45, .12) !important;
  background: transparent !important;
  font-family: Roboto, sans-serif;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1c1c1c !important;
  transition: color .2s;
}
.dropdown-panel a:last-child { border-bottom: 0 !important; }
.dropdown-panel a:hover,
.dropdown-panel a:focus-visible { color: var(--npe-orange) !important; background: transparent !important; }
.dropdown-panel a[aria-current="page"] { color: var(--npe-orange) !important; }


.npe-mega-panel { padding: 10px 8px 14px !important; }
.npe-mega-panel .npe-mega-link {
  margin: 0 !important;
  padding: 9px 10px !important;
  border-bottom: 0 !important;
  border-radius: 4px;
}
.npe-mega-panel .npe-mega-link:hover { background: rgba(0, 16, 45, .05) !important; color: var(--npe-orange) !important; }
.npe-mega-head { border-bottom-color: rgba(0, 16, 45, .14) !important; }


.npe-wordmark {
  font-family: 'BW Mitga', Roboto, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 14.25px;
  letter-spacing: .08em;
  line-height: 1.1;
  color: #0B0B0B;
}
header a:hover .npe-wordmark { color: var(--npe-orange); transition: color .25s; }

header a .npe-wordmark { color: #0B0B0B !important; font-weight: 700 !important; }
@media (max-width: 767px) {
  header a .npe-wordmark { font-size: 11.25px !important; letter-spacing: .06em; white-space: normal !important; }
}


nav[aria-label="Primary"] { position: relative; }
.has-dropdown.npe-has-mega { position: static; }
.npe-mega-panel { min-width: min(1180px, 94vw); left: 0; right: auto; padding: 10px 8px 14px; }
.npe-mega { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px 12px; }
@media (max-width: 1200px) { .npe-mega { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.npe-mega-col { padding: 10px 12px; }
.npe-mega-head { font-family: Roboto, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--npe-orange); margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid #e4e7ec; }
.npe-mega-link { display: block; font-family: Roboto, sans-serif; font-size: 13px; font-weight: 500; color: var(--npe-navy); text-decoration: none; padding: 7px 8px; border-radius: 6px; transition: background .2s, color .2s; }
.npe-mega-link:hover { background: #f2f2f2; color: var(--npe-orange); }
@media (max-width: 1300px) { .npe-mega-panel { min-width: 700px; } .npe-mega { grid-template-columns: repeat(2, minmax(0, 1fr)); } }




.npe-vp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; }
.npe-vp-side { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 1100px) {
  .npe-vp-grid { grid-template-columns: 1fr; }
  .npe-vp-side { position: static; }
}


.npe-vp-prose > h2 { font-family: 'BW Mitga', Roboto, sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(21px, 2.1vw, 28px); line-height: 1.12; color: var(--npe-ink); margin: 40px 0 16px; }
.npe-vp-prose > h2:first-child { margin-top: 0; }
.npe-vp-prose p { font-family: Roboto, sans-serif; font-size: 14.5px; line-height: 1.8; color: #434750; margin: 0 0 16px; }
.npe-vp-divider { border: 0; border-top: 1px solid #d8dbe2; margin: 34px 0; }



.npe-cut-tr {
  --npe-notch: 150px;
  position: relative;
  background: transparent !important;
}
.npe-cut-tr > * { position: relative; z-index: 2; }
.npe-cut-tr::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--npe-surface, #0B0B0B);
  border-radius: inherit;
  pointer-events: none;

  -webkit-mask-image:
    linear-gradient(#000 0 0),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="15" y="15" width="70" height="70" rx="15" fill="black" transform="rotate(45 50 50)"/></svg>');
  mask-image:
    linear-gradient(#000 0 0),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect x="15" y="15" width="70" height="70" rx="15" fill="black" transform="rotate(45 50 50)"/></svg>');

  -webkit-mask-size: 100% 100%, var(--npe-notch) var(--npe-notch);
  mask-size: 100% 100%, var(--npe-notch) var(--npe-notch);

  
  -webkit-mask-position: 0 0, right calc(var(--npe-notch) / -2) top calc(var(--npe-notch) / -2);
  mask-position: 0 0, right calc(var(--npe-notch) / -2) top calc(var(--npe-notch) / -2);

  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;

  
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .npe-cut-tr::after {
    -webkit-mask-image: none;
    mask-image: none;
    clip-path: polygon(0 0, calc(100% - 58px) 0, 100% 58px, 100% 100%, 0 100%);
  }
}

.npe-cut-bolt { position: absolute; top: 16px; right: 18px; z-index: 2; color: var(--npe-orange); }


.npe-info-card { border-radius: 20px; overflow: hidden; background: linear-gradient(165deg, #FA5D0A 0%, #5b3346 46%, #00205B 100%); color: #fff; }
.npe-info-card .npe-info-photo { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.npe-info-rows { padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 16px; }
.npe-info-row { display: flex; gap: 14px; align-items: flex-start; }
.npe-info-row + .npe-info-row { border-top: 1px solid rgba(255,255,255,.22); padding-top: 16px; }
.npe-info-ic { flex-shrink: 0; width: 20px; height: 20px; color: #fff; margin-top: 2px; }
.npe-info-label { font-family: Roboto, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.npe-info-value { font-family: Roboto, sans-serif; font-size: 15px; font-weight: 700; color: #fff; margin-top: 4px; line-height: 1.45; }
.npe-info-value a { color: inherit; text-decoration: none; }
.npe-info-value a:hover { text-decoration: underline; }
.npe-info-note { font-family: Roboto, sans-serif; font-size: 12px; color: rgba(255,255,255,.72); margin-top: 4px; }
.npe-appt-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: #0B0B0B; color: #fff; font-family: Roboto, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 16px 20px; border-radius: 10px; margin: 6px 26px 26px; text-decoration: none; transition: background .25s; }
.npe-appt-btn:hover { background: var(--npe-navy); }
.npe-appt-btn svg { color: var(--npe-orange); }


.npe-form-card { position: relative; padding: 30px 28px 32px; }
.npe-form-card::before { content: ""; position: absolute; top: 8px; right: 0; width: 62px; height: 62px; background: var(--npe-orange); border-radius: 16px; }
.npe-form-card::after { content: ""; position: absolute; inset: 0; background: #F2EFE9; border-radius: 20px 0 20px 20px; clip-path: polygon(0 0, calc(100% - 66px) 0, 100% 66px, 100% 100%, 0 100%); }
.npe-form-card > * { position: relative; z-index: 2; }
.npe-form-title { font-family: 'BW Mitga', Roboto, sans-serif; font-weight: 700; font-size: 21px; color: var(--npe-ink); margin: 0 0 20px; }
.npe-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.npe-form-field { display: flex; flex-direction: column; gap: 7px; }
.npe-form-field.full { grid-column: 1 / -1; }
.npe-form-label { font-family: Roboto, sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #6a6a64; }
.npe-form-input, .npe-form-textarea { width: 100%; background: #fff; border: 1px solid #ddd9d0; border-radius: 8px; padding: 12px 14px; font-family: Roboto, sans-serif; font-size: 13.5px; color: var(--npe-ink); }
.npe-form-input:focus, .npe-form-textarea:focus { outline: 2px solid var(--npe-orange); outline-offset: 0; border-color: var(--npe-orange); }
.npe-form-textarea { min-height: 96px; resize: vertical; }
.npe-form-submit { display: inline-flex; align-items: center; gap: 10px; background: #0B0B0B; color: #fff; font-family: Roboto, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 14px 26px; border-radius: 10px; border: 0; cursor: pointer; margin-top: 18px; transition: background .25s; }
.npe-form-submit:hover { background: var(--npe-orange); }
.npe-form-submit svg { color: var(--npe-orange); }
.npe-form-submit:hover svg { color: #fff; }


.npe-chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.npe-chip { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; background: #fff; border: 1px solid #e4e7ec; padding: 12px 10px; font-family: Roboto, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--npe-ink); text-decoration: none; transition: background .25s, color .25s, border-color .25s; }
.npe-chip:hover, .npe-chip.is-active { background: var(--npe-orange); border-color: var(--npe-orange); color: #fff; }


.npe-emg-card { --npe-surface: #0B0B0B; position: relative; background: #0B0B0B; color: #fff; border-radius: 20px; padding: 30px 32px 28px; }
.npe-emg-title { font-family: 'BW Mitga', Roboto, sans-serif; font-weight: 700; font-size: 20px; color: #fff; margin: 0; }
.npe-emg-sub { font-family: Roboto, sans-serif; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.85); margin: 6px 0 0; }
.npe-emg-body { font-family: Roboto, sans-serif; font-size: 13.5px; line-height: 1.75; color: rgba(255,255,255,.75); margin: 16px 0 0; }


.npe-fcard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 700px) { .npe-fcard-grid { grid-template-columns: 1fr; } }
.npe-fcard { background: #fff; border: 1px solid #e4e7ec; border-radius: 16px; padding: 26px 24px; }
.npe-fcard-ic { width: 30px; height: 30px; color: var(--npe-orange); margin-bottom: 16px; }
.npe-fcard h3 { font-family: Roboto, sans-serif; font-size: 15px; font-weight: 700; color: var(--npe-ink); margin: 0 0 10px; }
.npe-fcard p { font-family: Roboto, sans-serif; font-size: 13.5px; line-height: 1.7; color: #434750; margin: 0; }


.npe-acc { border-bottom: 1px solid #d8dbe2; }
.npe-acc:first-of-type { border-top: 1px solid #d8dbe2; }
.npe-acc > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 2px; font-family: Roboto, sans-serif; font-size: 15px; font-weight: 700; color: var(--npe-ink); }
.npe-acc > summary::-webkit-details-marker { display: none; }
.npe-acc .npe-acc-chev { flex-shrink: 0; width: 30px; height: 30px; border-radius: 999px; background: #eef2f7; color: var(--npe-navy); display: flex; align-items: center; justify-content: center; transition: transform .3s, background .3s, color .3s; }
.npe-acc[open] .npe-acc-chev { transform: rotate(180deg); background: var(--npe-orange); color: #fff; }
.npe-acc-body { padding: 0 2px 24px; font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.8; color: #434750; }


.npe-safety { position: relative; padding: 36px 34px 38px; }
.npe-safety::before { content: ""; position: absolute; top: 8px; right: 0; width: 62px; height: 62px; background: var(--npe-orange); border-radius: 16px; }
.npe-safety::after { content: ""; position: absolute; inset: 0; background: #F2EFE9; border-radius: 20px 0 20px 20px; clip-path: polygon(0 0, calc(100% - 66px) 0, 100% 66px, 100% 100%, 0 100%); }
.npe-safety > * { position: relative; z-index: 2; }
.npe-safety-ic { width: 42px; height: 42px; color: var(--npe-ink); margin-bottom: 18px; }
.npe-safety-title { font-family: 'BW Mitga', Roboto, sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(20px, 2vw, 27px); line-height: 1.15; color: var(--npe-ink); margin: 0 0 14px; }
.npe-safety-body { font-family: Roboto, sans-serif; font-size: 14px; line-height: 1.8; color: #434750; margin: 0 0 22px; max-width: 560px; }
.npe-safety-btn { display: inline-flex; align-items: center; gap: 10px; background: #0B0B0B; color: #fff; font-family: Roboto, sans-serif; font-size: 12.5px; font-weight: 700; padding: 13px 22px; border-radius: 10px; text-decoration: none; transition: background .25s; }
.npe-safety-btn:hover { background: var(--npe-orange); }
.npe-safety-btn svg { color: var(--npe-orange); }
.npe-safety-btn:hover svg { color: #fff; }


/* Primary nav: labels stay on one line so multi-word items ("Industry
   Sectors", "Service & Support") never overshoot the 52px nav row, and the
   row tightens progressively so nothing clips before the 1180px hamburger. */
header nav[aria-label="Primary"] a { white-space: nowrap; }
/* …but links inside dropdown/mega panels wrap normally within their column. */
header nav[aria-label="Primary"] .dropdown-panel a { white-space: normal; }
/* Push the primary nav to the right so it sits beside the Request Quote CTA,
   and halve the gap between the last item (Contact) and the button — the row's
   base gap is 32px (gap-8), so 16px is a 50% reduction. margin-left:auto sends
   all the spare space to the logo side, keeping the logo hard left. */
header > div:first-child { column-gap: 16px; }
header nav[aria-label="Primary"] { margin-left: auto; }
@media (max-width: 1440px) {
  header nav[aria-label="Primary"] { gap: 14px; font-size: 13.5px; }
}
/* The wordmark + full nav fit down to ~1305px with the tightened header, so
   keep the wordmark visible to 1300px — common 1366px laptops at 100% zoom
   render at ≈1349px CSS width (after the scrollbar) and now show it. Below
   1300px the two can't both fit, so drop the wordmark (the logo still shows
   and links home) and keep the horizontal menu; hamburger below 1140px. */
@media (max-width: 1310px) {
  header .npe-wordmark { display: none; }
}
@media (max-width: 1140px) {
  header nav[aria-label="Primary"] { display: none !important; }
  header button[aria-controls="mobile-menu"] { display: flex !important; }
  /* The panel's Tailwind lg:hidden would keep it display:none at >=1024px
     even when the toggle removes .hidden — override while the hamburger
     is the active navigation. */
  header #mobile-menu:not(.hidden) { display: block !important; }
}