/* NPM Energy - consolidated stylesheet (base + site overrides + 2026-10 revisions) */
@font-face {
  font-family: Noto Kufi Arabic Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/noto-kufi-arabic-arabic-wght-normal-DGgC7XND.woff2)
    format("woff2-variations");
  unicode-range:
    U+6??, U+750-77F, U+870-88E, U+890-891, U+897-8E1, U+8E3-8FF, 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;
}
@font-face {
  font-family: Noto Kufi Arabic Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/noto-kufi-arabic-math-wght-normal-DQBQnv-a.woff2)
    format("woff2-variations");
  unicode-range:
    U+302-303, U+305, U+307-308, U+310, U+312, U+315, U+31A, U+326-327, U+32C,
    U+32F-330, U+332-333, U+338, U+33A, U+346, U+34D, U+391-3A1, U+3A3-3A9,
    U+3B1-3C9, U+3D1, U+3D5-3D6, U+3F0-3F1, U+3F4-3F5, U+2016-2017, U+2034-2038,
    U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071,
    U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112,
    U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE,
    U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF,
    U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395,
    U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7,
    U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF,
    U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D,
    U+1D400-1D7FF, U+1EE??;
}
@font-face {
  font-family: Noto Kufi Arabic Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/noto-kufi-arabic-symbols-wght-normal-DD5BxwiP.woff2)
    format("woff2-variations");
  unicode-range:
    U+1-C, U+E-1F, U+7F-9F, U+20DD-20E0, U+20E2-20E4, U+2150-218F, U+2190,
    U+2192, U+2194-2199, U+21AF, U+21E6-21F0, U+21F3, U+2218-2219, U+2299,
    U+22C4-22C6, U+2300-243F, U+2440-244A, U+2460-24FF, U+25A0-27BF, U+28??,
    U+2921-2922, U+2981, U+29BF, U+29EB, U+2B??, U+4DC0-4DFF, U+FFF9-FFFB,
    U+10140-1018E, U+10190-1019C, U+101A0, U+101D0-101FD, U+102E0-102FB,
    U+10E60-10E7E, U+1D2C0-1D2D3, U+1D2E0-1D37F, U+1F0??, U+1F100-1F1AD,
    U+1F1E6-1F1FF, U+1F30D-1F30F, U+1F315, U+1F31C, U+1F31E, U+1F320-1F32C,
    U+1F336, U+1F378, U+1F37D, U+1F382, U+1F393-1F39F, U+1F3A7-1F3A8,
    U+1F3AC-1F3AF, U+1F3C2, U+1F3C4-1F3C6, U+1F3CA-1F3CE, U+1F3D4-1F3E0,
    U+1F3ED, U+1F3F1-1F3F3, U+1F3F5-1F3F7, U+1F408, U+1F415, U+1F41F, U+1F426,
    U+1F43F, U+1F441-1F442, U+1F444, U+1F446-1F449, U+1F44C-1F44E, U+1F453,
    U+1F46A, U+1F47D, U+1F4A3, U+1F4B0, U+1F4B3, U+1F4B9, U+1F4BB, U+1F4BF,
    U+1F4C8-1F4CB, U+1F4D6, U+1F4DA, U+1F4DF, U+1F4E3-1F4E6, U+1F4EA-1F4ED,
    U+1F4F7, U+1F4F9-1F4FB, U+1F4FD-1F4FE, U+1F503, U+1F507-1F50B, U+1F50D,
    U+1F512-1F513, U+1F53E-1F54A, U+1F54F-1F5FA, U+1F610, U+1F650-1F67F,
    U+1F687, U+1F68D, U+1F691, U+1F694, U+1F698, U+1F6AD, U+1F6B2,
    U+1F6B9-1F6BA, U+1F6BC, U+1F6C6-1F6CF, U+1F6D3-1F6D7, U+1F6E0-1F6EA,
    U+1F6F0-1F6F3, U+1F6F7-1F6FC, U+1F7??, U+1F800-1F80B, U+1F810-1F847,
    U+1F850-1F859, U+1F860-1F887, U+1F890-1F8AD, U+1F8B0-1F8BB, U+1F8C0-1F8C1,
    U+1F900-1F90B, U+1F93B, U+1F946, U+1F984, U+1F996, U+1F9E9, U+1FA00-1FA6F,
    U+1FA70-1FA7C, U+1FA80-1FA89, U+1FA8F-1FAC6, U+1FACE-1FADC, U+1FADF-1FAE9,
    U+1FAF0-1FAF8, U+1FB??;
}
@font-face {
  font-family: Noto Kufi Arabic Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/noto-kufi-arabic-latin-ext-wght-normal-BD7-f0yw.woff2)
    format("woff2-variations");
  unicode-range:
    U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329,
    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;
}
@font-face {
  font-family: Noto Kufi Arabic Variable;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(./fonts/noto-kufi-arabic-latin-wght-normal-BFPo14U7.woff2)
    format("woff2-variations");
  unicode-range:
    U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@layer theme {
  :root,
  :host {
    --font-sans:
      ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono:
      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *,
  :after,
  :before,
  ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }
  html,
  :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b,
  strong {
    font-weight: bolder;
  }
  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(
      --default-mono-font-variation-settings,
      normal
    );
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub,
  sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol,
  ul,
  menu {
    list-style: none;
  }
  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    vertical-align: middle;
    display: block;
  }
  img,
  video {
    max-width: 100%;
    height: auto;
  }
  button,
  input,
  select,
  optgroup,
  textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not ((-webkit-appearance: -apple-pay-button))) or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }
    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button,
  input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }
  ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button {
    height: auto;
  }
  ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
:root {
  --navy-950: #04142f;
  --navy-900: #071b3d;
  --navy-800: #0c2852;
  --blue-600: #256b96;
  --ice-100: #edf5f8;
  --ice-50: #f6f9fa;
  --slate-600: #5c6775;
  --slate-300: #cbd3d8;
  --gold: #d9aa4c;
  --white: #fff;
  --ink: #07182f;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--white);
  color: var(--ink);
  text-rendering: optimizelegibility;
  margin: 0;
  font-family:
    Inter,
    Segoe UI,
    Arial,
    Helvetica,
    sans-serif;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
}
.site {
  overflow: clip;
}
.locale-ar {
  font-family:
    Noto Kufi Arabic Variable,
    Tahoma,
    Arial,
    sans-serif;
}
.locale-ar .eyebrow {
  letter-spacing: 0;
  font-weight: 600;
}
.locale-ar .nav-links,
.locale-ar .language-button,
.locale-ar .nav-cta,
.locale-ar .button {
  font-weight: 600;
}
.shell {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
}
.header {
  z-index: 20;
  width: 100%;
  color: var(--white);
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
}
.utility {
  color: #ffffffb3;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  border-bottom: 1px solid #ffffff29;
  justify-content: space-between;
  align-items: center;
  min-height: 36px;
  padding-inline: max(28px, 50% - 590px);
  font-size: 11px;
  font-weight: 700;
  display: flex;
}
.utility-right {
  white-space: nowrap;
  direction: ltr;
  align-items: center;
  gap: 14px;
  display: flex;
}
.utility a:hover {
  color: var(--white);
}
.nav-shell {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: min(1180px, 100% - 48px);
  min-height: 84px;
  margin-inline: auto;
  display: grid;
}
.brand {
  direction: ltr;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  line-height: 1;
  display: inline-flex;
}
.nav-links {
  color: #ffffffc7;
  justify-content: center;
  gap: 34px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}
.nav-links a {
  padding-block: 10px;
  position: relative;
}
.nav-links a:after {
  background: var(--gold);
  content: "";
  height: 1px;
  transition: transform 0.18s;
  position: absolute;
  inset-block-end: 4px;
  inset-inline: 0;
  transform: scaleX(0);
}
.nav-links a:hover {
  color: var(--white);
}
.nav-links a:hover:after {
  transform: scaleX(1);
}
.nav-actions {
  align-items: center;
  gap: 12px;
  display: flex;
}
.language-button {
  color: var(--white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding-inline: 8px;
  background: 0 0;
  border: 0;
  font-size: 12px;
  font-weight: 700;
}
.nav-cta {
  border: 1px solid #ffffff57;
  align-items: center;
  gap: 12px;
  padding: 13px 17px;
  font-size: 12px;
  font-weight: 700;
  transition:
    background 0.18s,
    color 0.18s;
  display: inline-flex;
}
.nav-cta:hover {
  background: var(--white);
  color: var(--navy-950);
}
.hero {
  min-height: 860px;
  color: var(--white);
  align-items: center;
  display: flex;
  position: relative;
}
.hero-media,
.hero-overlay {
  position: absolute;
  inset: 0;
}
.hero-media {
  background: var(--navy-900);
  transform: scale(1.012);
}
.hero-overlay {
  background:
    linear-gradient(90deg, #03112ae0 0%, #03112aad 38%, #03112a1f 70%),
    linear-gradient(#03112a70 0%, #0000 38%, #03112a57 100%);
}
.locale-ar .hero-overlay {
  background:
    linear-gradient(270deg, #03112ae6 0%, #03112aab 45%, #03112a1f 78%),
    linear-gradient(#03112a70 0%, #0000 38%, #03112a57 100%);
}
.hero-content {
  z-index: 2;
  padding-top: 104px;
  position: relative;
}
.eyebrow {
  color: var(--blue-600);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  font-size: 11px;
  font-weight: 800;
  display: flex;
}
.eyebrow:before {
  background: var(--gold);
  content: "";
  width: 32px;
  height: 2px;
}
.eyebrow.light {
  color: #ffffffb8;
}
.hero h1 {
  letter-spacing: -0.055em;
  max-width: 760px;
  margin: 0;
  font-size: clamp(56px, 7.4vw, 104px);
  font-weight: 520;
  line-height: 0.94;
}
.locale-ar .hero h1 {
  letter-spacing: -0.025em;
  max-width: 720px;
  font-size: clamp(48px, 6.4vw, 86px);
  font-weight: 650;
  line-height: 1.18;
}
.hero-copy {
  color: #ffffffc7;
  max-width: 620px;
  margin: 28px 0 0;
  font-size: 18px;
  line-height: 1.72;
}
.hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
  display: flex;
}
.button {
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  min-width: 208px;
  padding: 17px 20px;
  font-size: 13px;
  font-weight: 750;
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s;
  display: inline-flex;
}
.button-primary {
  background: var(--gold);
  color: var(--navy-950);
}
.button-primary:hover {
  background: #ecc166;
}
.button-ghost {
  color: var(--white);
  border: 1px solid #ffffff59;
}
.button-ghost:hover {
  border-color: var(--white);
  background: #ffffff1a;
}
.hero-bottom {
  z-index: 2;
  border-top: 1px solid #fff3;
  grid-template-columns: repeat(3, 1fr);
  display: grid;
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
}
.hero-point {
  border-inline-end: 1px solid #fff3;
  align-items: center;
  gap: 16px;
  min-height: 86px;
  padding-inline: 26px;
  display: flex;
}
.hero-point:first-child {
  padding-inline-start: 0;
}
.hero-point:last-child {
  border-inline-end: 0;
}
.hero-point span {
  color: var(--gold);
  letter-spacing: 0.14em;
  font-size: 10px;
  font-weight: 800;
}
.hero-point strong {
  font-size: 13px;
  font-weight: 650;
}
.section {
  padding-block: 124px;
}
.section h2,
.contact-section h2 {
  letter-spacing: -0.045em;
  margin: 0;
  font-size: clamp(40px, 4.6vw, 67px);
  font-weight: 520;
  line-height: 1.02;
}
.locale-ar .section h2,
.locale-ar .contact-section h2 {
  letter-spacing: -0.018em;
  font-weight: 650;
  line-height: 1.25;
}
.company-section {
  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 0.8fr);
  align-items: center;
  gap: 90px;
  display: grid;
}
.section-intro .lead,
.logistics-copy .lead {
  max-width: 650px;
  color: var(--slate-600);
  margin: 32px 0 0;
  font-size: 16px;
  line-height: 1.9;
}
.company-visual {
  min-height: 570px;
  position: relative;
}
.profile-crop {
  background: var(--ice-100);
  position: relative;
  overflow: hidden;
}
.company-visual > .profile-crop {
  position: absolute;
  inset-block: 0 50px;
  inset-inline: 0 36px;
}
.profile-crop picture,
.profile-crop img {
  display: block;
  width: 100%;
  height: 100%;
}
.profile-crop img {
  object-fit: cover;
  object-position: 50% 50%;
}
.vision-card {
  background: var(--navy-900);
  width: min(330px, 82%);
  color: var(--white);
  padding: 32px;
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  box-shadow: 0 28px 60px #04142f3b;
}
.vision-card span,
.quality-index {
  color: var(--gold);
  letter-spacing: 0.18em;
  font-size: 10px;
  font-weight: 800;
}
.vision-card p {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.72;
}
.capabilities-section {
  background: var(--ice-50);
}
.section-heading {
  margin-bottom: 64px;
}
.split-heading {
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  align-items: end;
  gap: 70px;
  display: grid;
}
.split-heading > p {
  color: var(--slate-600);
  margin: 0 0 3px;
  font-size: 15px;
  line-height: 1.8;
}
.capability-grid {
  border-top: 1px solid var(--slate-300);
  grid-template-columns: repeat(6, 1fr);
  display: grid;
}
.capability-card {
  border-inline-end: 1px solid var(--slate-300);
  border-bottom: 1px solid var(--slate-300);
  background: #ffffff75;
  flex-direction: column;
  grid-column: span 2;
  justify-content: space-between;
  min-height: 320px;
  padding: 30px;
  transition:
    background 0.18s,
    transform 0.18s;
  display: flex;
}
.capability-card:nth-child(3),
.capability-card:nth-child(5) {
  border-inline-end: 0;
}
.capability-card:nth-child(4) {
  grid-column: 2 / span 2;
}
.capability-card:hover {
  z-index: 1;
  background: var(--white);
  transform: translateY(-5px);
  box-shadow: 0 18px 40px #04142f14;
}
.capability-number {
  color: var(--blue-600);
  letter-spacing: 0.15em;
  font-size: 11px;
  font-weight: 800;
}
.capability-card h3 {
  letter-spacing: -0.025em;
  margin: 0;
  font-size: 24px;
  font-weight: 650;
}
.capability-card p {
  color: var(--slate-600);
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.72;
}
.products-section {
  padding-bottom: 40px;
}
.products-panel {
  background: var(--navy-900);
  min-height: 620px;
  color: var(--white);
  grid-template-columns: 1.22fr 0.78fr;
  display: grid;
}
.products-copy {
  padding: 78px;
}
.products-copy > p:not(.eyebrow) {
  color: #ffffffb3;
  max-width: 650px;
  margin: 28px 0 0;
  font-size: 15px;
  line-height: 1.82;
}
.product-tags {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 38px;
  display: flex;
}
.product-tags span {
  color: #ffffffde;
  border: 1px solid #ffffff38;
  padding: 11px 14px;
  font-size: 12px;
  font-weight: 650;
}
.quality-panel {
  background:
    linear-gradient(#0b2c5133, #03142dbd),
    url(img/profile-sectors-800.webp) 88% / cover no-repeat;
  background-image:
    linear-gradient(#0b2c5133, #03142dbd),
    image-set(url(img/profile-sectors-800.avif) type("image/avif"), url(img/profile-sectors-800.webp) type("image/webp"));
  background-position: 70% 50%;
  background-size: cover;
  flex-direction: column;
  justify-content: space-between;
  padding: 56px;
  display: flex;
}
.quality-panel > div {
  border-inline-start: 2px solid var(--gold);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  background: #03142dbd;
  padding: 28px;
}
.quality-panel h3 {
  margin: 0;
  font-size: 25px;
}
.quality-panel p {
  color: #ffffffbd;
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.75;
}
.logistics-section {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(40px, 6vw, 88px);
  display: grid;
}
.logistics-media {
  aspect-ratio: 4 / 5;
  max-height: 680px;
  width: 100%;
  min-width: 0;
}
.logistics-copy {
  min-width: 0;
  padding-inline: 2px;
}
.logistics-copy h2 {
  overflow-wrap: break-word;
}
.logistics-copy ul {
  gap: 0;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
}
.logistics-copy li {
  border-top: 1px solid #dfe4e7;
  align-items: flex-start;
  line-height: 1.5;
  gap: 15px;
  padding-block: 17px;
  font-size: 14px;
  font-weight: 650;
  display: flex;
}
.logistics-copy li .check {
  flex: none;
  background: var(--ice-100);
  width: 24px;
  height: 24px;
  color: var(--blue-600);
  border-radius: 50%;
  place-items: center;
  font-size: 11px;
  display: inline-grid;
}
.principles-section {
  background: var(--ice-50);
}
.centered {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}
.centered .eyebrow {
  justify-content: center;
}
.principle-grid {
  border-top: 1px solid var(--slate-300);
  border-bottom: 1px solid var(--slate-300);
  grid-template-columns: repeat(4, 1fr);
  margin-top: 64px;
  display: grid;
}
.principle-grid article {
  border-inline-end: 1px solid var(--slate-300);
  min-height: 225px;
  padding: 30px;
}
.principle-grid article:last-child {
  border-inline-end: 0;
}
.principle-grid article > span {
  color: var(--blue-600);
  letter-spacing: 0.15em;
  font-size: 10px;
  font-weight: 800;
}
.principle-grid h3 {
  margin: 42px 0 0;
  font-size: 22px;
}
.principle-grid p {
  color: var(--slate-600);
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.7;
}
.contact-section {
  background: var(--navy-900);
  color: var(--white);
  padding-block: 110px;
}
.contact-grid {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);
  gap: 100px;
  display: grid;
}
.contact-copy > p:not(.eyebrow) {
  color: #ffffffa6;
  max-width: 620px;
  margin: 28px 0 0;
  font-size: 15px;
  line-height: 1.8;
}
.contact-list {
  border-top: 1px solid #fff3;
}
.contact-list a,
.contact-list > div {
  border-bottom: 1px solid #fff3;
  gap: 7px;
  padding-block: 23px;
  padding-inline: 0 40px;
  display: grid;
  position: relative;
}
.contact-list span {
  color: #ffffff8c;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}
.contact-list strong {
  font-size: 15px;
  font-weight: 600;
}
.contact-list .contact-icon {
  color: var(--gold);
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 4px;
  transform: translateY(-50%);
}
.footer {
  background: var(--navy-950);
  color: var(--white);
  padding-top: 62px;
}
.footer-main {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 70px;
  padding-bottom: 55px;
  display: grid;
}
.footer-main p {
  color: #ffffff85;
  margin: 0;
  font-size: 13px;
}
.footer-main > a:last-child {
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
}
.footer-bottom {
  color: #fff6;
  border-top: 1px solid #ffffff1f;
  justify-content: space-between;
  padding-block: 22px;
  font-size: 11px;
  display: flex;
}
@media (width<=980px) {
  .nav-links {
    display: none;
  }
  .nav-shell {
    grid-template-columns: auto 1fr;
  }
  .nav-actions {
    display: none;
  }
  .hero {
    min-height: 800px;
  }
  .company-section,
  .logistics-section {
    grid-template-columns: 1fr;
    gap: 64px;
  }
  .company-visual {
    min-height: 540px;
  }
  .logistics-media {
    aspect-ratio: 16 / 11;
    max-height: 560px;
  }
  .capability-card,
  .capability-card:nth-child(4) {
    grid-column: span 3;
  }
  .capability-card:nth-child(3),
  .capability-card:nth-child(5) {
    border-inline-end: 1px solid var(--slate-300);
  }
  .products-panel {
    grid-template-columns: 1fr;
  }
  .quality-panel {
    min-height: 480px;
  }
  .principle-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .principle-grid article:nth-child(2) {
    border-inline-end: 0;
  }
  .principle-grid article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--slate-300);
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
}
@media (width<=680px) {
  .shell,
  .nav-shell {
    width: min(100% - 32px, 1180px);
  }
  .utility {
    display: none;
  }
  .nav-shell {
    min-height: 76px;
  }
      .hero {
    align-items: flex-start;
    min-height: 760px;
  }
  .hero-media img {
    object-position: 64% 50%;
  }
  .hero-overlay,
  .locale-ar .hero-overlay {
    background: linear-gradient(#03112ad6 0%, #03112ab3 58%, #03112a9e 100%);
  }
  .hero-content {
    padding-top: 158px;
  }
  .hero h1,
  .locale-ar .hero h1 {
    font-size: 50px;
  }
  .hero-copy {
    margin-top: 22px;
    font-size: 15px;
  }
  .button {
    width: 100%;
    min-width: 0;
  }
  .hero-bottom {
    grid-template-columns: 1fr;
    padding-block: 12px;
  }
  .hero-point {
    border: 0;
    min-height: 40px;
    padding-inline: 0;
  }
  .section {
    padding-block: 86px;
  }
  .section h2,
  .contact-section h2 {
    font-size: 40px;
  }
  .company-visual {
    min-height: 430px;
  }
  .logistics-media {
    aspect-ratio: 4 / 3;
  }
  .company-visual > .profile-crop {
    inset: 0 0 72px;
  }
  .vision-card {
    width: 90%;
    padding: 25px;
  }
  .split-heading {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  .capability-grid {
    grid-template-columns: 1fr;
  }
  .capability-card,
  .capability-card:nth-child(4) {
    border-inline-end: 0;
    grid-column: auto;
    min-height: 255px;
  }
  .products-section {
    width: 100%;
    padding-block: 0;
  }
  .products-copy {
    padding: 56px 24px;
  }
  .quality-panel {
    min-height: 430px;
    padding: 24px;
  }
  .logistics-section {
    gap: 48px;
  }
  .principle-grid {
    grid-template-columns: 1fr;
  }
  .principle-grid article,
  .principle-grid article:nth-child(2) {
    border-inline-end: 0;
    border-bottom: 1px solid var(--slate-300);
    min-height: 190px;
  }
  .principle-grid article:last-child {
    border-bottom: 0;
  }
  .contact-section {
    padding-block: 86px;
  }
  .footer-main {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  :before,
  :after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ---- site overrides ---- */
html {
  scroll-padding-top: 92px;
}

/* Hero: clip scaled background image and extend overlay to the bottom edge */
.hero {
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  transform: scale(1.02);
  transform-origin: center center;
}

.hero-overlay {
  background:
    linear-gradient(90deg, #03112ae0 0%, #03112aad 38%, #03112a1f 70%),
    linear-gradient(to bottom, #03112a66 0%, #03112a33 45%, #03112a99 100%);
}

.locale-ar .hero-overlay {
  background:
    linear-gradient(270deg, #03112ae6 0%, #03112aab 45%, #03112a1f 78%),
    linear-gradient(to bottom, #03112a66 0%, #03112a33 45%, #03112a99 100%);
}

.hero-bottom {
  background: linear-gradient(to top, #03112ad9 0%, #03112a80 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@media (width > 680px) {
  .hero-point:first-child {
    padding-inline-start: 26px;
  }
}

.header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 40;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background 0.28s ease,
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    backdrop-filter 0.28s ease;
}

.header .utility {
  max-height: 36px;
  overflow: hidden;
  transition:
    max-height 0.28s ease,
    min-height 0.28s ease,
    opacity 0.22s ease,
    padding 0.28s ease,
    border-color 0.28s ease;
}

.header .nav-shell {
  transition: min-height 0.28s ease;
}

.brand {
  direction: ltr;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  line-height: 1;
}

.brand-logo {
  display: block;
  width: 150px;
  max-width: 60vw;
  height: auto;
  aspect-ratio: 1699 / 551;
}

.header .nav-cta {
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.header.is-scrolled {
  background: color-mix(in srgb, var(--navy-950) 92%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-bottom-color: #d9aa4c3d;
  box-shadow: 0 18px 48px #03112a4d;
}

.header.is-scrolled .utility {
  max-height: 0;
  min-height: 0;
  opacity: 0;
  padding: 0;
  border-bottom-color: transparent;
  pointer-events: none;
}

.header.is-scrolled .nav-shell {
  min-height: 72px;
}

.header.is-scrolled .nav-cta {
  background: var(--gold);
  color: var(--navy-950);
  border-color: var(--gold);
}

.header.is-scrolled .nav-cta:hover {
  background: #ecc166;
  color: var(--navy-950);
}

@media (width <= 680px) {
  html {
    scroll-padding-top: 76px;
  }

  .header.is-scrolled .nav-shell {
    min-height: 68px;
  }

  .brand-logo {
    width: 104px;
  }

  .hero-overlay,
  .locale-ar .hero-overlay {
    background:
      linear-gradient(to bottom, #03112a8f 0%, #03112a52 52%, #03112a9e 100%),
      linear-gradient(90deg, #03112a70 0%, #03112a1f 50%, #03112a70 100%);
  }

  .hero-bottom {
    width: 100%;
    max-width: none;
    padding-inline: 16px;
    background: linear-gradient(to top, #03112ae8 0%, #03112aa6 58%, #03112a00 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header,
  .header .utility,
  .header .nav-shell,
  .header .nav-cta {
    transition: none;
  }
}

/* Capability cards with contextual photography */
.capability-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--white);
  min-height: 0;
}

.capability-media {
  position: relative;
  height: 168px;
  overflow: hidden;
  isolation: isolate;
}

.capability-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #03112a66 0%,
    #03112a99 55%,
    #03112acc 100%
  );
  pointer-events: none;
}

.capability-media picture {
  display: block;
  height: 100%;
}

.capability-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

.capability-number {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: 22px;
  z-index: 2;
  color: var(--gold);
  background: #03112ab8;
  padding: 6px 10px;
  letter-spacing: 0.15em;
}


.capability-body {
  padding: 26px 28px 30px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.capability-card:hover {
  background: var(--white);
}

.capability-card:hover .capability-media img {
  transform: scale(1.05);
}

.capability-card:hover .capability-media::after {
  background: linear-gradient(
    to bottom,
    #03112a55 0%,
    #03112a88 55%,
    #03112ab8 100%
  );
}


@media (width <= 680px) {
  .capability-media {
    height: 148px;
  }

  .capability-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capability-card,
  .capability-card:nth-child(4) {
    grid-column: auto;
    border-inline-end: 1px solid var(--slate-300);
  }

  .capability-card:nth-child(5) {
    grid-column: 1 / -1;
    border-inline-end: 0;
  }

  .capability-body {
    padding: 22px 20px 26px;
  }

}

/* Principle cards with contextual photography */
.principle-grid .principle-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  background: var(--white);
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.principle-media {
  position: relative;
  height: 140px;
  overflow: hidden;
  isolation: isolate;
}

.principle-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    #03112a55 0%,
    #03112a88 55%,
    #03112ab0 100%
  );
  pointer-events: none;
}

.principle-media picture {
  display: block;
  height: 100%;
}

.principle-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.45s ease;
}

.principle-number {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 20px;
  z-index: 2;
  color: var(--gold);
  background: #03112ab8;
  padding: 6px 10px;
  letter-spacing: 0.15em;
  font-size: 10px;
  font-weight: 800;
}



.principle-body {
  padding: 24px 26px 28px;
  flex: 1;
}

.principle-grid .principle-body h3 {
  margin: 0;
}

.principle-body p {
  margin: 12px 0 0;
}

.principle-card:hover .principle-media img {
  transform: scale(1.05);
}

.principle-card:hover .principle-media::after {
  background: linear-gradient(
    to bottom,
    #03112a44 0%,
    #03112a77 55%,
    #03112aa8 100%
  );
}

@media (width <= 680px) {
  .principle-media {
    height: 128px;
  }

  .principle-body {
    padding: 20px 18px 24px;
  }

}

/* Leadership quote — quiet navy pause between principles and contact */
.leadership-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  padding-block: 108px;
  background:
    radial-gradient(58% 70% at 8% 18%, #d9aa4c22 0%, #d9aa4c00 58%),
    radial-gradient(48% 60% at 92% 88%, #256b9628 0%, transparent 55%),
    linear-gradient(165deg, #03112a 0%, #071b3d 52%, #04142f 100%);
}

.leadership-section::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    #d9aa4c55 35%,
    #d9aa4c55 65%,
    transparent 100%
  );
  pointer-events: none;
}

.leadership-quote {
  display: block;
  max-width: 760px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.leadership-quote.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.leadership-quote .quote-mark {
  display: block;
  color: var(--gold);
  font-size: clamp(72px, 9vw, 108px);
  font-weight: 400;
  line-height: 0.72;
  margin: 0 0 18px;
  opacity: 0.92;
}

.leadership-quote > p {
  margin: 0;
  color: #ffffffef;
  font-size: clamp(24px, 2.7vw, 34px);
  font-weight: 450;
  letter-spacing: -0.02em;
  line-height: 1.42;
  max-width: 34ch;
}

.locale-ar .leadership-quote > p {
  max-width: 28ch;
  letter-spacing: 0;
  font-weight: 500;
  line-height: 1.55;
}

.leadership-quote footer {
  display: block;
  min-width: 0;
  margin-top: 34px;
  padding: 0;
}

.leadership-quote .quote-rule {
  display: block;
  width: 42px;
  height: 2px;
  margin-bottom: 18px;
  background: var(--gold);
  transform-origin: left center;
  transform: scaleX(0.35);
  transition: transform 0.8s ease 0.15s;
}

[dir="rtl"] .leadership-quote .quote-rule {
  transform-origin: right center;
}

.leadership-quote.is-visible .quote-rule {
  transform: scaleX(1);
}

.leadership-quote footer strong {
  display: block;
  color: var(--white);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.leadership-quote footer span {
  display: block;
  margin-top: 7px;
  color: #ffffff94;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.locale-ar .leadership-quote footer span {
  letter-spacing: 0.04em;
  text-transform: none;
}

.locale-ar .quote-mark {
  font-family: "Noto Kufi Arabic Variable", sans-serif;
}

@media (width <= 680px) {
  .leadership-section {
    padding-block: 84px;
  }

  .leadership-quote > p {
    max-width: none;
    font-size: clamp(22px, 6.2vw, 28px);
  }

  .leadership-quote .quote-mark {
    font-size: 68px;
    margin-bottom: 14px;
  }
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (prefers-reduced-motion: reduce) {
  .leadership-quote,
  .leadership-quote .quote-rule {
    transition: none;
    transform: none;
    opacity: 1;
  }
}

/* ---- 2026-10 revisions ---- */
/* Inline SVG icons (replace text arrows / emoji that iOS renders as blue emoji) */
.icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.button .icon,
.nav-cta .icon {
  width: 16px;
  height: 16px;
}
.contact-list .contact-icon {
  width: 20px;
  height: 20px;
}
.logistics-copy li .check .icon {
  width: 12px;
  height: 12px;
}
/* Directional arrows mirror in RTL */
[dir="rtl"] .icon-dir {
  transform: scaleX(-1);
}

/* Hero image (was a CSS background) */
.hero-media picture,
.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-media img {
  object-fit: cover;
  object-position: 50% 50%;
}

/* Bidirectional text: keep Latin names and phone numbers intact inside Arabic */
bdi[dir="ltr"],
.ltr {
  unicode-bidi: isolate;
  white-space: nowrap;
}
.contact-list strong {
  text-align: start;
}
.contact-list .address {
  white-space: normal;
}

/* Skip link */
.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  inset-block-start: -60px;
  z-index: 100;
  background: var(--gold);
  color: var(--navy-950);
  padding: 12px 16px;
  font-weight: 700;
}
.skip-link:focus {
  inset-block-start: 12px;
}

/* Footer address */
.footer-address {
  display: block;
  margin-top: 6px;
  color: #ffffff85;
  font-size: 12px;
  font-style: normal;
}
.footer-main > a:last-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---- Mobile navigation ---- */
.menu-toggle {
  display: none;
  justify-self: end;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--white);
  background: transparent;
  border: 1px solid #ffffff57;
  cursor: pointer;
}
.menu-toggle .bars,
.menu-toggle .bars::before,
.menu-toggle .bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle .bars {
  position: relative;
}
.menu-toggle .bars::before,
.menu-toggle .bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}
.menu-toggle .bars::before {
  top: -6px;
}
.menu-toggle .bars::after {
  top: 6px;
}
.menu-toggle[aria-expanded="true"] .bars {
  background: transparent;
}
.menu-toggle[aria-expanded="true"] .bars::before {
  transform: translateY(6px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .bars::after {
  transform: translateY(-6px) rotate(-45deg);
}
.mobile-menu {
  display: none;
}
@media (width <= 980px) {
  .menu-toggle {
    display: inline-flex;
  }
  .mobile-menu:not([hidden]) {
    display: block;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    background: var(--navy-950);
    border-top: 1px solid #d9aa4c3d;
    box-shadow: 0 24px 48px #03112a80;
  }
  .mobile-menu ul {
    width: min(1180px, 100% - 32px);
    margin-inline: auto;
    padding-block: 8px 20px;
  }
  .mobile-menu li + li {
    border-top: 1px solid #ffffff1f;
  }
  .mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding-block: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffffe0;
  }
  .mobile-menu a:hover,
  .mobile-menu a:focus-visible {
    color: var(--white);
  }
  .mobile-menu .mobile-cta {
    justify-content: center;
    margin-top: 12px;
    background: var(--gold);
    color: var(--navy-950);
    padding-inline: 20px;
  }
  .mobile-menu li.cta-item {
    border-top: 0;
  }
  .header.menu-open {
    background: var(--navy-950);
  }
  .header.menu-open .utility {
    display: none;
  }
}
body.menu-locked {
  overflow: hidden;
}

/* Hero on phones: let the content set the height so the second button is never
   hidden behind the 01/02/03 strip */
@media (width <= 680px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .hero-content {
    padding-bottom: 48px;
  }
  .hero-bottom {
    position: relative;
  }
}

.hero-point span {
  min-width: 20px;
}

/* Tap targets >= 44x44 without moving anything: grow the hit box with padding,
   cancel the layout effect with an equal negative margin. */
.brand {
  min-width: 44px;
  padding-block: 6px;
  margin-block: -6px;
  box-sizing: content-box;
}
.utility-right a {
  display: inline-flex;
  align-items: center;
  padding-block: 9px 19px;
  margin-block: -9px -19px;
  padding-inline: 4px;
  margin-inline: -4px;
}
.header:not(.is-scrolled) .utility {
  overflow: visible;
  position: relative;
  z-index: 1;
}
.nav-links a {
  padding-block: 17px;
  margin-block: -7px;
  padding-inline: 4px;
  margin-inline: -4px;
}
.nav-links a::after {
  inset-block-end: 11px;
  inset-inline: 4px;
}