/* ==========================================================================
   NEXPORT — Global Logistics & Supply Chain
   Premium corporate design system
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand — sampled from the FAST LOGISTICS logo
     navy #0B2558 · orange #F36001 · secondary blue #23649E */
  --ink: #05132E;
  --navy-900: #071B40;
  --navy-800: #0B2558;
  --navy-700: #14396F;
  --navy-600: #1E4E92;
  --blue-500: #1C6EB8;
  --blue-400: #2E86D4;
  --cyan-400: #46B4E6;
  --orange-500: #F36001;
  --orange-400: #FF7B24;

  /* Neutrals */
  --white: #FFFFFF;
  --paper: #F6F8FC;
  --paper-2: #EDF1F7;
  --line: #DFE5EE;
  --line-soft: #EAEFF6;
  --muted: #5C6B84;
  --muted-2: #7C8AA1;

  /* Typography */
  --font: 'Outfit', 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --h1: clamp(2.5rem, 1.4rem + 4.4vw, 4.55rem);
  --h2: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --h3: clamp(1.4rem, 1.2rem + .8vw, 1.9rem);
  --lead: clamp(1.02rem, .98rem + .25vw, 1.19rem);

  /* Space & shape */
  --wrap: 1290px;
  --wrap-narrow: 1080px;
  --gutter: clamp(1.15rem, 3.6vw, 2.5rem);
  --sec: clamp(4.5rem, 9vw, 7.5rem);
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Effects */
  --sh-1: 0 1px 2px rgba(8, 24, 47, .05), 0 4px 14px rgba(8, 24, 47, .05);
  --sh-2: 0 14px 40px -12px rgba(8, 24, 47, .16);
  --sh-3: 0 32px 70px -22px rgba(8, 24, 47, .28);
  --grad-blue: linear-gradient(120deg, var(--blue-500) 0%, var(--cyan-400) 100%);
  --grad-navy: linear-gradient(150deg, var(--navy-900) 0%, var(--navy-800) 48%, #0E2F58 100%);
  --grad-orange: linear-gradient(120deg, var(--orange-500) 0%, var(--orange-400) 100%);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --header-h: 86px;
}

/* ---------- 2. Reset & base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 110px
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.72;
  color: var(--muted);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* fallback */
  overflow-x: clip;
  /* clips without creating a scroll container, keeps position:sticky working */
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 .55em;
  color: var(--navy-800);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.022em;
}

h1 {
  font-size: var(--h1);
  font-weight: 800;
  letter-spacing: -.032em
}

h2 {
  font-size: var(--h2);
  font-weight: 750;
  letter-spacing: -.028em
}

h3 {
  font-size: var(--h3)
}

h4 {
  font-size: 1.22rem
}

h5 {
  font-size: 1.06rem
}

p {
  margin: 0 0 1.15rem
}

p:last-child {
  margin-bottom: 0
}

a {
  color: var(--blue-500);
  text-decoration: none;
  transition: color .25s var(--ease)
}

a:hover {
  color: var(--navy-700)
}

ul,
ol {
  margin: 0 0 1.15rem;
  padding-left: 1.15rem
}

li {
  margin-bottom: .4rem
}

strong {
  color: var(--navy-800);
  font-weight: 650
}

small {
  font-size: .86rem
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0
}

button {
  font-family: inherit
}

:focus-visible {
  outline: 3px solid var(--orange-500);
  outline-offset: 3px;
  border-radius: 4px
}

::selection {
  background: var(--navy-800);
  color: #fff
}

/* ---------- 3. Layout helpers ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter)
}

.wrap-narrow {
  max-width: var(--wrap-narrow)
}

.section {
  padding-block: var(--sec);
  position: relative
}

.section--tight {
  padding-block: clamp(3.2rem, 6vw, 5rem)
}

.section--paper {
  background: var(--paper)
}

.section--dark {
  background: var(--grad-navy);
  color: #B9C7DC
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5 {
  color: #fff
}

.section--dark strong {
  color: #fff
}

.grid {
  display: grid;
  gap: clamp(1.1rem, 2vw, 1.75rem)
}

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

.g-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.g-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr))
}

.center {
  text-align: center
}

.mx-auto {
  margin-inline: auto
}

.mb-0 {
  margin-bottom: 0
}

.stack-sm>*+* {
  margin-top: .6rem
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

@media(max-width:1024px) {
  .g-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

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

@media(max-width:680px) {

  .g-2,
  .g-3,
  .g-4 {
    grid-template-columns: 1fr
  }
}

/* ---------- 4. Typographic components ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .775rem;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin-bottom: 1.1rem;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--grad-orange);
  border-radius: 2px;
  flex: none;
}

.section--dark .eyebrow {
  color: var(--orange-400)
}

.eyebrow--center {
  justify-content: center
}

.lead {
  font-size: var(--lead);
  line-height: 1.68;
  color: var(--muted)
}

.section--dark .lead {
  color: #AEBFD6
}

.sec-head {
  max-width: 730px;
  margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem)
}

.sec-head--center {
  margin-inline: auto;
  text-align: center
}

.sec-head p {
  margin-bottom: 0
}

.sec-head--split {
  max-width: none;
  display: flex;
  gap: 2rem;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap
}

.sec-head--split>div:first-child {
  max-width: 640px
}

/* ---------- 5. Buttons ---------- */
/* One flat brand colour per variant. Hover darkens that same colour instead of
   fading in a second hue — a button that changes colour on hover reads as a
   different button, and the gradient wash made every CTA look alike. */
.btn {
  --btn-bg: var(--navy-800);
  --btn-bg-hover: var(--navy-900);
  --btn-fg: #fff;
  --btn-shadow: 0 6px 16px -8px rgba(8, 24, 47, .5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: .94rem;
  font-weight: 650;
  letter-spacing: .005em;
  line-height: 1.25;
  cursor: pointer;
  position: relative;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
  text-align: center;
}

.btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow)
}

.btn:active {
  transform: none;
  box-shadow: none
}

.btn svg {
  width: 17px;
  height: 17px;
  flex: none;
  transition: transform .2s var(--ease)
}

.btn:hover svg {
  transform: translateX(2px)
}

.btn--primary {
  --btn-bg: var(--blue-500);
  --btn-bg-hover: var(--navy-600);
  --btn-shadow: 0 6px 16px -8px rgba(28, 110, 184, .55)
}

.btn--orange {
  --btn-bg: var(--orange-500);
  --btn-bg-hover: #D45301;
  --btn-fg: #fff;
  --btn-shadow: 0 6px 16px -8px rgba(243, 96, 1, .55)
}

/* Ghost keeps its outline and ink on hover. Swapping them for a filled dark
   pill made the secondary action compete with the primary one. */
.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--paper);
  --btn-fg: var(--navy-800);
  --btn-shadow: none;
  border-color: var(--line)
}

.btn--ghost:hover {
  border-color: var(--line);
  color: var(--navy-800)
}

.btn--on-dark {
  --btn-bg: rgba(255, 255, 255, .07);
  --btn-bg-hover: rgba(255, 255, 255, .16);
  --btn-fg: #fff;
  --btn-shadow: none;
  border-color: rgba(255, 255, 255, .28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px)
}

.btn--on-dark:hover {
  border-color: rgba(255, 255, 255, .45)
}

.btn--lg {
  padding: 1.1rem 2.1rem;
  font-size: 1rem
}

.btn--sm {
  padding: .62rem 1.15rem;
  font-size: .85rem
}

.btn--quote {
  padding: .8rem 1.4rem;
  font-size: .85rem
}

.btn--block {
  width: 100%
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 650;
  font-size: .9rem;
  color: var(--navy-800);
  letter-spacing: .01em;
}

.link-arrow svg {
  width: 15px;
  height: 15px;
  transition: transform .3s var(--ease)
}

.link-arrow:hover {
  color: var(--blue-500)
}

.link-arrow:hover svg {
  transform: translateX(4px)
}

/* ---------- 6. Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--navy-900);
  display: grid;
  place-items: center;
  transition: opacity .6s var(--ease), visibility .6s;
}

.preloader.is-done {
  opacity: 0;
  visibility: hidden
}

.preloader__inner {
  text-align: center;
  color: #fff
}

.preloader__mark {
  width: 74px;
  height: 74px;
  margin: 0 auto 1.2rem;
  animation: floatY 1.9s var(--ease) infinite
}

.preloader__bar {
  width: 190px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .16);
  overflow: hidden;
  margin-inline: auto
}

.preloader__bar i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 3px;
  background: var(--grad-orange);
  animation: slide 1.25s var(--ease) infinite
}

.preloader__txt {
  margin-top: 1rem;
  font-size: .75rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #8FA6C4
}

@keyframes slide {
  0% {
    transform: translateX(-110%)
  }

  100% {
    transform: translateX(360%)
  }
}

@keyframes floatY {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-9px)
  }
}

/* ---------- 7. Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 10000;
  background: var(--orange-500);
  color: #20180A;
  padding: .8rem 1.3rem;
  border-radius: 0 0 10px 10px;
  font-weight: 700;
  transition: top .25s var(--ease);
}

.skip-link:focus {
  top: 0;
  color: #20180A
}

/* ---------- 8. Topbar ---------- */
.topbar {
  background: var(--navy-900);
  color: #9BB0CC;
  font-size: .83rem;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  /* Must out-rank the sticky header (z-index 900), otherwise the language
     dropdown opens behind it and only the last item stays visible. The topbar
     scrolls away, so it never competes with the header for space. */
  position: relative;
  z-index: 950
}

.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  flex-wrap: wrap
}

.topbar__list {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0
}

.topbar__list li {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem
}

.topbar__list svg {
  width: 14px;
  height: 14px;
  color: var(--orange-400);
  flex: none
}

.topbar a {
  color: #9BB0CC
}

.topbar a:hover {
  color: #fff
}

.topbar__social {
  display: flex;
  gap: .35rem
}

.topbar__social a {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  transition: background .25s var(--ease), transform .25s var(--ease);
}

.topbar__social a:hover {
  background: var(--blue-500);
  color: #fff;
  transform: translateY(-2px)
}

.topbar__social svg {
  width: 13px;
  height: 13px
}

@media(max-width:900px) {
  .topbar {
    display: none
  }
}

/* ---------- 9. Header ---------- */
/* Transparent over the dark band that opens every page, solid once scrolled.
   The header still occupies its place in flow — #main is pulled up by exactly
   its height (see "Header overlay offset" below) so the hero slides under it
   rather than the header being taken out of flow, which would have meant
   hard-coding a top offset on every page template. */
.header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}

.header.is-stuck {
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line-soft);
  box-shadow: 0 10px 34px -18px rgba(8, 24, 47, .4)
}

/* Light treatment while the header floats over the dark band. The logo is
   navy-on-transparent artwork, so it has to be knocked out to white the same
   way the footer does it — untouched, it would be navy on navy. */
.header:not(.is-stuck) .brand__logo {
  filter: brightness(0) invert(1);
  opacity: .96
}

.header:not(.is-stuck) .nav__link {
  color: #fff
}

.header:not(.is-stuck) .nav__link[aria-current="page"] {
  color: var(--orange-400)
}

.header:not(.is-stuck) .burger {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px)
}

/* Header overlay offset — every page body opens with .hero or .ptitle, both
   dark, so this is safe site-wide. */
#main {
  margin-top: calc(var(--header-h) * -1)
}

.header__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h)
}

.brand {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex: none;
  color: var(--navy-800)
}

.brand:hover {
  color: var(--navy-800)
}

.brand__logo {
  height: 54px;
  width: auto;
  flex: none;
  display: block
}

@media(max-width:560px) {
  .brand__logo {
    height: 38px
  }
}

/* the wordmark is navy, so invert it to solid white on dark surfaces */
.brand--light .brand__logo {
  filter: brightness(0) invert(1);
  opacity: .96
}

.brand__mark {
  width: 42px;
  height: 42px;
  flex: none
}

.nav {
  margin-left: auto
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0
}

.nav__list li {
  margin: 0;
  position: relative
}

.nav__link {
  display: flex;
  align-items: center;
  gap: .3rem;
  padding: .5rem .56rem;
  border-radius: 8px;
  color: var(--navy-800);
  font-size: .8rem;
  font-weight: 650;
  position: relative;
  text-transform: uppercase;
  letter-spacing: .035em;
  white-space: nowrap;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: .56rem;
  right: .56rem;
  bottom: .22rem;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--blue-500)
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1)
}

.nav__link svg {
  width: 11px;
  height: 11px;
  opacity: .55;
  transition: transform .3s var(--ease)
}

.nav__item--has-sub:hover>.nav__link svg {
  transform: rotate(180deg)
}

.nav__sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 238px;
  list-style: none;
  margin: 0;
  padding: .55rem;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .28s var(--ease);
}

.nav__item--has-sub:hover>.nav__sub,
.nav__item--has-sub:focus-within>.nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.nav__sub a {
  display: block;
  padding: .6rem .8rem;
  border-radius: 9px;
  color: var(--navy-800);
  font-size: .885rem;
  font-weight: 550;
}

.nav__sub a:hover {
  background: var(--paper);
  color: var(--blue-500);
  padding-left: 1.05rem
}

.header__actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex: none
}

.header__quote {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding-left: 1rem;
  border-left: 1px solid var(--line)
}

.header__quote-ic {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(11, 99, 246, .1);
  color: var(--blue-500);
  flex: none
}

.header__quote-ic svg {
  width: 17px;
  height: 17px
}

.header__quote-txt {
  line-height: 1.28
}

.header__quote-txt span {
  display: block;
  font-size: .7rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600
}

.header__quote-txt a {
  font-size: .98rem;
  font-weight: 700;
  color: var(--navy-800)
}

.header__quote-txt a:hover {
  color: var(--blue-500)
}

.burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  padding: 0;
  place-items: center;
  color: var(--navy-800);
}

.burger span {
  display: block;
  width: 19px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative
}

.burger span::before,
.burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 19px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .3s var(--ease)
}

.burger span::before {
  top: -6px
}

.burger span::after {
  top: 6px
}

@media(max-width:1280px) {
  .nav {
    display: none
  }

  .burger {
    display: grid
  }

  /* the nav carries the margin-left:auto that pushes the header right, so once
     it is hidden the actions need it instead — keeps the burger pinned to the
     right edge on tablet and mobile */
  .header__actions {
    margin-left: auto
  }

  /* burger is always the last item, hard against the right gutter */
  .header__actions .burger {
    order: 99;
    margin-right: 0
  }
}

@media(max-width:560px) {
  .header__actions .btn--quote {
    display: none
  }
}

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, 88vw);
  z-index: 1000;
  background: #fff;
  transform: translateX(102%);
  transition: transform .42s var(--ease);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px -20px rgba(8, 24, 47, .35);
}

.drawer.is-open {
  transform: translateX(0)
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  border-bottom: 1px solid var(--line-soft)
}

.drawer__close {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--navy-800)
}

.drawer__close svg {
  width: 16px;
  height: 16px
}

.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.4rem 2rem
}

.drawer__nav {
  list-style: none;
  margin: 0;
  padding: 0
}

.drawer__nav li {
  margin: 0;
  border-bottom: 1px solid var(--line-soft)
}

.drawer__nav a {
  display: block;
  padding: .95rem 0;
  color: var(--navy-800);
  font-weight: 600;
  font-size: 1.02rem
}

.drawer__nav a:hover {
  color: var(--blue-500)
}

.drawer__foot {
  padding: 1.4rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: .7rem
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(6, 18, 37, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: all .35s var(--ease)
}

.scrim.is-open {
  opacity: 1;
  visibility: visible
}

body.no-scroll {
  overflow: hidden
}

/* ---------- 10. Hero ---------- */
/* Column layout, not centred flex: the pillar band is a child of the hero and
   has to sit flush on its bottom edge, with the copy centred in what is left. */
.hero {
  position: relative;
  min-height: clamp(620px, 90vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--navy-900)
}

.hero__slides {
  position: absolute;
  inset: 0
}

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.15s var(--ease);
  will-change: opacity
}

.hero__slide.is-active {
  opacity: 1
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 8s linear
}

.hero__slide.is-active img {
  transform: scale(1.16)
}

/* Two stacked washes. The flat base sinks the whole photograph so the type
   never has to fight it; the soft diagonal on top keeps some depth on the
   right instead of flattening the image into a plain dark rectangle. The old
   single gradient dropped to 28% opacity on the right, which let the sky blow
   out behind the heading and read as a stock photo with words on it. */
.hero__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(5, 15, 32, .93) 0%, rgba(5, 15, 32, .88) 42%, rgba(5, 15, 32, .70) 72%, rgba(5, 15, 32, .62) 100%),
    linear-gradient(180deg, rgba(5, 15, 32, .55) 0%, rgba(5, 15, 32, .30) 40%, rgba(5, 15, 32, .80) 100%);
}

.hero__grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 70% 40%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 70% 40%, #000, transparent 75%);
}

.hero__in {
  position: relative;
  z-index: 3;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem)) clamp(3rem, 6vw, 4.5rem)
}

.hero__content {
  max-width: 760px;
  color: #fff
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .5rem 1.05rem .5rem .5rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .79rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: #DCE7F5;
  margin-bottom: 1.5rem;
}

.hero__badge b {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .24rem .68rem;
  border-radius: 100px;
  background: var(--grad-orange);
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

/* Tighter than the global h1: a hero headline is read as a shape before it is
   read as words, and the default 1.08 leading with open tracking made three
   lines drift apart instead of holding together as one block. */
.hero h1 {
  color: #fff;
  margin-bottom: 1rem;
  font-size: clamp(2.35rem, 1.5rem + 3.6vw, 3.95rem);
  line-height: 1.03;
  letter-spacing: -.028em;
  text-wrap: balance
}

/* The accent is the word, not a bar behind it. The old highlighter swoosh sat
   under one phrase in every heading on the site and is the first thing that
   makes a page look assembled from a template. */
.hero h1 em {
  font-style: normal;
  color: var(--orange-400)
}

/* The motto is set as a quiet rule-and-caps line rather than orange italics.
   Italic orange next to an orange word in the headline read as two accents
   competing for the same job. */
.hero__slogan {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #9FB4CE;
  margin-bottom: 1.5rem;
}

.hero__slogan::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--orange-500);
  flex: none
}

.hero__sub {
  font-size: clamp(1rem, .95rem + .25vw, 1.12rem);
  color: #AFC2D9;
  max-width: 560px;
  margin-bottom: 2rem;
  line-height: 1.65
}

/* ---- Hero pillar band ----
   Four capability columns flush on the hero's bottom edge. Previously this
   information sat in a floating white card that overlapped the photograph,
   which cut the hero in half and left the page with no clean seam. */
.hero__band {
  position: relative;
  z-index: 3;
  border-top: 1px solid rgba(255, 255, 255, .13);
  background: linear-gradient(180deg, rgba(4, 12, 27, .58), rgba(4, 12, 27, .82));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.hero__band-in {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* The extra bottom padding is the landing strip for the action card, which
   rides up over this band from the section below. Without it the card clips
   the second line of the longer pillar descriptions. */
.hero__pillar {
  padding-block: clamp(1.35rem, 2.2vw, 1.9rem) clamp(3.6rem, 5.2vw, 4.4rem);
  padding-inline: clamp(1rem, 1.8vw, 1.7rem);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* Flush the outer edges so the band's first and last columns line up with the
   headline above rather than sitting one gutter further in. */
.hero__pillar:first-child {
  padding-left: 0
}

.hero__pillar:last-child {
  padding-right: 0
}

.hero__pillar+.hero__pillar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 45%;
  width: 1px;
  background: rgba(255, 255, 255, .13)
}

.hero__pillar svg {
  width: 22px;
  height: 22px;
  color: var(--orange-400)
}

.hero__pillar h3 {
  font-size: .97rem;
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0
}

.hero__pillar p {
  font-size: .82rem;
  line-height: 1.5;
  color: #9FB4CE;
  margin: 0
}

@media(max-width:900px) {
  .hero__band-in {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .hero__pillar:nth-child(odd)::before {
    display: none
  }

  .hero__pillar:nth-child(n+3) {
    border-top: 1px solid rgba(255, 255, 255, .13)
  }
}

@media(max-width:520px) {
  .hero__band-in {
    grid-template-columns: 1fr
  }

  .hero__pillar::before {
    display: none
  }

  .hero__pillar+.hero__pillar {
    border-top: 1px solid rgba(255, 255, 255, .13)
  }
}

/* Anchored to the bottom-right of the copy column, not the hero's vertical
   centre — the centre is now occupied by the headline, and measuring up from
   the hero's own bottom edge would put them behind the pillar band. */
.hero__dots {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(.75rem, 1.6vw, 1.4rem);
  z-index: 4;
  display: flex;
  gap: .55rem
}

.hero__dots button {
  width: 11px;
  height: 11px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5);
  background: transparent;
  cursor: pointer;
  transition: all .3s var(--ease);
  position: relative;
}

/* Label sits above the row now that the dots run horizontally; to the side it
   would overlap the neighbouring dot. */
.hero__dots button::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  opacity: 0;
  transition: opacity .3s var(--ease)
}

.hero__dots button:hover::after {
  opacity: .8
}

.hero__dots button[aria-selected="true"] {
  background: var(--orange-500);
  border-color: var(--orange-500);
  transform: scale(1.25)
}

@media(max-width:760px) {
  .hero__dots {
    display: none
  }
}

/* ---------- Post-hero action bar ----------
   Three things a visitor actually wants at this point in the page — track a
   shipment, get a price, reach a person — instead of a row of figures nobody
   can verify. The card rides up over the hero's pillar band so the two read as
   one composition rather than as two stacked strips. */
.actionbar {
  position: relative;
  z-index: 6;
  background: #fff;
  padding-bottom: clamp(1.6rem, 3vw, 2.4rem)
}

.actionbar__card {
  transform: translateY(clamp(-2.4rem, -3.5vw, -1.6rem));
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.actionbar__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: clamp(1.15rem, 2vw, 1.6rem) clamp(1.1rem, 1.8vw, 1.5rem);
  position: relative;
  transition: background .25s var(--ease);
}

.actionbar__item+.actionbar__item {
  border-left: 1px solid var(--line-soft)
}

.actionbar__item:hover {
  background: rgba(28, 110, 184, .05)
}

.actionbar__ic {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(28, 110, 184, .1);
  color: var(--blue-500);
  transition: background .25s var(--ease), color .25s var(--ease);
}

.actionbar__item:hover .actionbar__ic {
  background: var(--blue-500);
  color: #fff
}

.actionbar__ic svg {
  width: 19px;
  height: 19px
}

.actionbar__txt {
  min-width: 0
}

.actionbar__txt b {
  display: block;
  font-size: .98rem;
  font-weight: 700;
  color: var(--navy-800);
  line-height: 1.25
}

.actionbar__txt span {
  display: block;
  font-size: .81rem;
  color: var(--muted-2);
  margin-top: .15rem
}

.actionbar__go {
  width: 17px;
  height: 17px;
  margin-left: auto;
  flex: none;
  color: var(--line);
  transition: color .25s var(--ease), transform .25s var(--ease);
}

.actionbar__item:hover .actionbar__go {
  color: var(--orange-500);
  transform: translateX(3px)
}

@media(max-width:840px) {
  .actionbar__card {
    grid-template-columns: 1fr
  }

  .actionbar__item+.actionbar__item {
    border-left: 0;
    border-top: 1px solid var(--line-soft)
  }
}

/* ---------- Service marquee ----------
   Replaces the six static pills. The list is longer than the row is wide, so
   letting it travel says "this is a catalogue" where a wrapped grid of six
   said "this is all of it". The track holds two identical runs and shifts by
   exactly half its width, which makes the loop seamless. */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: fl-marquee 42s linear infinite
}

.marquee:hover .marquee__track {
  animation-play-state: paused
}

.marquee__run {
  display: flex;
  align-items: center;
  flex: none
}

.marquee__run span {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-right: 2.4rem;
  font-size: .87rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--navy-700);
  white-space: nowrap
}

.marquee__run span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange-500);
  flex: none
}

@keyframes fl-marquee {
  to {
    transform: translateX(-50%)
  }
}

@media(prefers-reduced-motion:reduce) {
  .marquee__track {
    animation: none;
    flex-wrap: wrap
  }
}

/* ---------- 11. Page title (inner pages) ---------- */
.ptitle {
  position: relative;
  background: var(--navy-900);
  overflow: hidden;
  padding-block: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem)) clamp(4rem, 8vw, 6rem)
}

.ptitle__bg {
  position: absolute;
  inset: 0
}

.ptitle__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .32
}

.ptitle__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(95deg, rgba(6, 18, 37, .95), rgba(6, 18, 37, .6))
}

/* No max-width here: this element is also the .wrap, which has margin-inline:auto.
   Constraining it would centre the whole block instead of leaving it on the page
   gutter, breaking the vertical alignment with the header logo. Limit the text
   children instead. */
.ptitle__in {
  position: relative;
  z-index: 2
}

.ptitle h1 {
  color: #fff;
  margin-bottom: .85rem;
  max-width: 860px
}

.ptitle p {
  color: #B4C6DC;
  font-size: var(--lead);
  margin-bottom: 0;
  max-width: 600px
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  font-size: .85rem
}

.crumbs li {
  margin: 0;
  color: #8FA6C4;
  display: flex;
  align-items: center;
  gap: .55rem
}

.crumbs li+li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange-500)
}

.crumbs a {
  color: #B4C6DC;
  font-weight: 550
}

.crumbs a:hover {
  color: #fff
}

.crumbs [aria-current] {
  color: var(--orange-400);
  font-weight: 600
}

/* ---------- 12. Cards ---------- */
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 2.6vw, 2.15rem);
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--grad-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s var(--ease);
}

.card:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-2);
  border-color: transparent
}

.card:hover::before {
  transform: scaleX(1)
}

.card__ic {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  margin-bottom: 1.3rem;
  background: linear-gradient(140deg, rgba(11, 99, 246, .11), rgba(0, 194, 255, .09));
  color: var(--blue-500);
  transition: background .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}

.card__ic svg {
  width: 29px;
  height: 29px
}

.card:hover .card__ic {
  background: var(--grad-blue);
  color: #fff;
  transform: rotate(-6deg) scale(1.04)
}

.card {
  color: var(--muted)
}

.card h3 {
  font-size: 1.24rem;
  margin-bottom: .6rem;
  color: var(--navy-800)
}

.card p {
  font-size: .95rem;
  margin-bottom: 1.1rem;
  color: var(--muted)
}

a.card:hover h3 {
  color: var(--blue-500)
}

.card__num {
  position: absolute;
  right: 1.3rem;
  top: 1rem;
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy-800);
  opacity: .05;
  letter-spacing: -.05em;
}

/* Service card w/ image */
.scard {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-soft);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  display: flex;
  flex-direction: column;
}

.scard:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-2)
}

.scard__media {
  position: relative;
  aspect-ratio: 16/11;
  overflow: hidden;
  background: var(--paper-2)
}

.scard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease)
}

.scard:hover .scard__media img {
  transform: scale(1.08)
}

.scard__tag {
  position: absolute;
  left: 1rem;
  top: 1rem;
  padding: .4rem .85rem;
  border-radius: 100px;
  background: rgba(6, 18, 37, .7);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.scard__ic {
  position: absolute;
  right: 1.2rem;
  bottom: -26px;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--grad-blue);
  color: #fff;
  box-shadow: var(--sh-2);
  transition: transform .4s var(--ease);
}

.scard__ic svg {
  width: 25px;
  height: 25px
}

.scard:hover .scard__ic {
  transform: rotate(-8deg)
}

.scard__body {
  padding: 1.7rem clamp(1.3rem, 2.2vw, 1.75rem);
  flex: 1;
  display: flex;
  flex-direction: column
}

.scard__body h3 {
  font-size: 1.2rem;
  margin-bottom: .55rem;
  padding-right: 3rem
}

.scard__body p {
  font-size: .94rem;
  flex: 1;
  margin-bottom: 1.15rem
}

/* Feature/why card */
.fcard {
  display: flex;
  gap: 1.15rem;
  padding: 1.6rem;
  border-radius: var(--r);
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  transition: background .35s var(--ease), transform .35s var(--ease), border-color .35s var(--ease);
}

.fcard:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .2);
  transform: translateY(-5px)
}

.fcard__ic {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(243, 96, 1, .18);
  color: var(--orange-400)
}

.fcard__ic svg {
  width: 24px;
  height: 24px
}

.fcard h4 {
  color: #fff;
  font-size: 1.08rem;
  margin-bottom: .35rem
}

.fcard p {
  font-size: .9rem;
  margin-bottom: 0;
  color: #A8BAD1
}

/* ---------- 13. About / media blocks ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center
}

.split--wide-left {
  grid-template-columns: 1.05fr .95fr
}

@media(max-width:940px) {

  .split,
  .split--wide-left {
    grid-template-columns: 1fr
  }
}

.media-stack {
  position: relative;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  padding-left: clamp(0px, 3vw, 2.5rem)
}

.media-stack__main {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-3);
  aspect-ratio: 4/3.4
}

.media-stack__main img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.media-stack__sub {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(150px, 34%, 230px);
  aspect-ratio: 1;
  border-radius: var(--r);
  overflow: hidden;
  border: 7px solid #fff;
  box-shadow: var(--sh-2);
}

.media-stack__sub img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.badge-float {
  position: absolute;
  right: clamp(-.5rem, -1vw, 0px);
  top: clamp(1.5rem, 4vw, 2.6rem);
  background: var(--grad-orange);
  color: #fff;
  border-radius: var(--r);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--sh-2);
  text-align: center;
  min-width: 132px;
}

.badge-float b {
  display: block;
  font-size: 2.05rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.035em
}

.badge-float span {
  display: block;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  margin-top: .35rem
}

.media-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2)
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* Check list */
.checks {
  list-style: none;
  margin: 0 0 1.8rem;
  padding: 0;
  display: grid;
  gap: .75rem
}

.checks.g2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1.4rem
}

@media(max-width:560px) {
  .checks.g2 {
    grid-template-columns: 1fr
  }
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  margin: 0;
  font-size: .95rem;
  font-weight: 550;
  color: var(--navy-800)
}

.checks svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--blue-500);
  margin-top: .16rem
}

.section--dark .checks li {
  color: #D5E1F0
}

.section--dark .checks svg {
  color: var(--orange-400)
}

/* ---------- 14. Tabs (Mission/Vision/Values) ---------- */
.tabs__nav {
  display: flex;
  gap: .4rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.6rem;
  flex-wrap: wrap
}

.tabs__btn {
  padding: .75rem 1.25rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  font-size: .95rem;
  font-weight: 650;
  color: var(--muted);
  border-radius: 8px 8px 0 0;
  transition: color .3s var(--ease);
}

.tabs__btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--grad-orange);
  transform: scaleX(0);
  transition: transform .3s var(--ease)
}

.tabs__btn[aria-selected="true"] {
  color: var(--navy-800)
}

.tabs__btn[aria-selected="true"]::after {
  transform: scaleX(1)
}

.tabs__panel[hidden] {
  display: none
}

/* ---------- 15. Process ---------- */
.process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
  position: relative
}

.process::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 44px;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(11, 99, 246, .3) 0 10px, transparent 10px 20px);
}

.pstep {
  position: relative;
  text-align: center;
  padding-top: 0
}

.pstep__num {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px dashed rgba(11, 99, 246, .32);
  color: var(--navy-800);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.03em;
  position: relative;
  z-index: 2;
  transition: all .4s var(--ease);
}

.pstep__ic {
  position: absolute;
  right: calc(50% - 62px);
  top: -4px;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--grad-orange);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-1)
}

.pstep__ic svg {
  width: 18px;
  height: 18px
}

.pstep:hover .pstep__num {
  background: var(--grad-blue);
  color: #fff;
  border-color: transparent;
  border-style: solid;
  transform: translateY(-5px)
}

.pstep h4 {
  font-size: 1.08rem;
  margin-bottom: .4rem
}

.pstep p {
  font-size: .9rem;
  margin-bottom: 0
}

@media(max-width:1024px) {
  .process {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1.25rem
  }

  .process::before {
    display: none
  }
}

@media(max-width:520px) {
  .process {
    grid-template-columns: 1fr
  }
}

/* ---------- 16. Track shipment ---------- */
.track-band {
  position: relative;
  overflow: hidden;
  background: var(--grad-navy)
}

.track-band__bg {
  position: absolute;
  right: -6%;
  bottom: -12%;
  width: min(620px, 55%);
  opacity: .11;
  pointer-events: none
}

.track-form {
  display: flex;
  gap: .7rem;
  background: #fff;
  border-radius: 100px;
  padding: .55rem;
  box-shadow: var(--sh-3);
  max-width: 620px;
}

.track-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: .85rem 1.35rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--navy-800);
}

.track-form input::placeholder {
  color: var(--muted-2)
}

.track-form input:focus {
  outline: none
}

.track-form:focus-within {
  box-shadow: 0 0 0 4px rgba(11, 99, 246, .22), var(--sh-3)
}

@media(max-width:520px) {
  .track-form {
    flex-direction: column;
    border-radius: var(--r-lg);
    padding: .8rem
  }

  .track-form .btn {
    width: 100%
  }
}

.track-hint {
  font-size: .85rem;
  color: #8FA6C4;
  margin-top: .9rem
}

.track-hint code {
  background: rgba(255, 255, 255, .1);
  padding: .15rem .5rem;
  border-radius: 5px;
  color: var(--orange-400);
  font-size: .82rem
}

/* Result panel */
.track-result {
  margin-top: 2.5rem;
  display: none
}

.track-result.is-visible {
  display: block;
  animation: fadeUp .55s var(--ease) both
}

.track-panel {
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  overflow: hidden
}

.track-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.3rem, 3vw, 2.2rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.track-panel__id {
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600
}

.track-panel__id b {
  display: block;
  font-size: 1.32rem;
  letter-spacing: -.02em;
  text-transform: none;
  color: var(--navy-800);
  margin-top: .2rem
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem 1rem;
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .03em;
  background: rgba(0, 168, 89, .12);
  color: #00803F;
}

.pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.8s ease-in-out infinite
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: .45;
    transform: scale(1.35)
  }
}

.track-panel__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line)
}

.track-panel__cell {
  background: #fff;
  padding: 1.25rem clamp(1.1rem, 2.2vw, 1.6rem)
}

.track-panel__cell span {
  display: block;
  font-size: .73rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 650;
  margin-bottom: .3rem
}

.track-panel__cell b {
  font-size: 1rem;
  color: var(--navy-800);
  font-weight: 650
}

@media(max-width:820px) {
  .track-panel__grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:460px) {
  .track-panel__grid {
    grid-template-columns: 1fr
  }
}

/* Timeline */
.timeline {
  list-style: none;
  margin: 0;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.3rem, 3vw, 2.2rem)
}

.timeline li {
  position: relative;
  padding-left: 3.3rem;
  padding-bottom: 2rem;
  margin: 0
}

.timeline li:last-child {
  padding-bottom: 0
}

.timeline li::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: -4px;
  width: 2px;
  background: var(--line);
}

.timeline li:last-child::before {
  display: none
}

.timeline li.done::before {
  background: var(--blue-500)
}

.timeline__dot {
  position: absolute;
  left: 0;
  top: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper-2);
  color: var(--muted-2);
  border: 2px solid var(--line);
}

.timeline__dot svg {
  width: 15px;
  height: 15px
}

.timeline li.done .timeline__dot {
  background: var(--blue-500);
  border-color: var(--blue-500);
  color: #fff
}

.timeline li.current .timeline__dot {
  background: var(--orange-500);
  border-color: var(--orange-500);
  color: #fff;
  box-shadow: 0 0 0 5px rgba(243, 96, 1, .22)
}

.timeline h4 {
  font-size: 1.05rem;
  margin-bottom: .2rem
}

.timeline li:not(.done):not(.current) h4 {
  color: var(--muted-2)
}

.timeline p {
  font-size: .9rem;
  margin-bottom: 0
}

.timeline time {
  display: block;
  font-size: .8rem;
  color: var(--muted-2);
  font-weight: 600;
  margin-top: .25rem;
  letter-spacing: .02em
}

/* ---------- 17. Solutions ---------- */
.sol {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.2rem, 4vw, 3.2rem);
}

.sol:nth-child(even) .sol__media {
  order: 2
}

.sol__media {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  aspect-ratio: 4/3;
  position: relative
}

.sol__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease)
}

.sol:hover .sol__media img {
  transform: scale(1.05)
}

.sol__badge {
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--blue-500);
  display: grid;
  place-items: center;
}

.sol__badge svg {
  width: 24px;
  height: 24px
}

.sol+.sol {
  border-top: 1px solid var(--line-soft)
}

@media(max-width:900px) {
  .sol {
    grid-template-columns: 1fr
  }

  .sol:nth-child(even) .sol__media {
    order: 0
  }
}

/* ---------- 18. Industries ---------- */
.ind {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1/1.06;
  display: flex;
  align-items: flex-end;
  background: var(--navy-800);
}

.ind img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease)
}

.ind::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 18, 37, .93) 8%, rgba(6, 18, 37, .25) 58%, rgba(6, 18, 37, .1) 100%);
  transition: background .4s var(--ease)
}

.ind:hover img {
  transform: scale(1.08)
}

.ind:hover::after {
  background: linear-gradient(to top, rgba(11, 99, 246, .9) 0%, rgba(6, 18, 37, .55) 62%, rgba(6, 18, 37, .2) 100%)
}

.ind__in {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
  color: #fff;
  width: 100%
}

.ind__ic {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .15);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  margin-bottom: .9rem
}

.ind__ic svg {
  width: 22px;
  height: 22px
}

.ind h3 {
  color: #fff;
  font-size: 1.12rem;
  margin-bottom: .25rem
}

.ind p {
  font-size: .85rem;
  color: #BDCDE2;
  margin: 0;
  opacity: 0;
  max-height: 0;
  transition: all .4s var(--ease)
}

.ind:hover p {
  opacity: 1;
  max-height: 80px;
  margin-top: .3rem
}

/* ---------- 19. Projects ---------- */
.proj {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: block;
  background: var(--navy-800)
}

.proj img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease)
}

.proj::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6, 18, 37, .9), rgba(6, 18, 37, .05) 62%);
  opacity: .9;
  transition: opacity .4s var(--ease)
}

.proj:hover img {
  transform: scale(1.07)
}

.proj__in {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(1.3rem, 2.5vw, 1.9rem);
  color: #fff
}

.proj__cat {
  display: inline-block;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-400);
  margin-bottom: .45rem
}

.proj h3 {
  color: #fff;
  font-size: 1.22rem;
  margin-bottom: .3rem
}

.proj__meta {
  font-size: .85rem;
  color: #B7C8DD;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap
}

.proj__go {
  position: absolute;
  right: 1.3rem;
  top: 1.3rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--navy-800);
  display: grid;
  place-items: center;
  z-index: 2;
  opacity: 0;
  transform: translateY(-8px) rotate(-30deg);
  transition: all .4s var(--ease);
}

.proj__go svg {
  width: 18px;
  height: 18px
}

.proj:hover .proj__go {
  opacity: 1;
  transform: translateY(0) rotate(0)
}

/* ---------- 20. Testimonials ---------- */
.quotes {
  position: relative
}

.quotes__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: clamp(1rem, 2vw, 1.6rem);
  scrollbar-width: none;
  padding-bottom: .4rem
}

.quotes__track::-webkit-scrollbar {
  display: none
}

@media(min-width:900px) {
  .quotes__track {
    grid-auto-columns: calc(50% - .8rem)
  }
}

.quote {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.7rem, 3vw, 2.4rem);
  position: relative;
}

.quote__mark {
  position: absolute;
  right: 1.6rem;
  top: 1.3rem;
  font-size: 5rem;
  line-height: 1;
  color: var(--blue-500);
  opacity: .1;
  font-weight: 800
}

.quote__stars {
  display: flex;
  gap: .2rem;
  color: var(--orange-500);
  margin-bottom: 1rem
}

.quote__stars svg {
  width: 17px;
  height: 17px
}

.quote blockquote {
  margin: 0 0 1.5rem;
  font-size: 1.06rem;
  line-height: 1.68;
  color: var(--navy-800);
  font-weight: 500
}

.quote__by {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft)
}

.quote__by img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex: none
}

.quote__by b {
  display: block;
  color: var(--navy-800);
  font-size: 1rem
}

.quote__by span {
  font-size: .85rem;
  color: var(--muted)
}

.quotes__ctrl {
  display: flex;
  gap: .6rem;
  margin-top: 1.8rem;
  justify-content: center
}

.quotes__ctrl button {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--navy-800);
  transition: all .3s var(--ease);
}

.quotes__ctrl button:hover {
  background: var(--navy-800);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px)
}

.quotes__ctrl svg {
  width: 17px;
  height: 17px
}

/* ---------- 21. Blog ---------- */
.post {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}

.post:hover {
  transform: translateY(-7px);
  box-shadow: var(--sh-2)
}

.post__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative;
  background: var(--paper-2)
}

.post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease)
}

.post:hover .post__media img {
  transform: scale(1.07)
}

.post__date {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  background: var(--grad-orange);
  color: #fff;
  border-radius: 11px;
  padding: .55rem .8rem;
  text-align: center;
  line-height: 1;
  box-shadow: var(--sh-1);
}

.post__date b {
  display: block;
  font-size: 1.25rem;
  font-weight: 800
}

.post__date span {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase
}

.post__body {
  padding: 1.6rem clamp(1.25rem, 2.2vw, 1.7rem);
  flex: 1;
  display: flex;
  flex-direction: column
}

.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .8rem;
  color: var(--muted-2);
  margin-bottom: .8rem;
  font-weight: 550
}

.post__meta span {
  display: flex;
  align-items: center;
  gap: .35rem
}

.post__meta svg {
  width: 14px;
  height: 14px;
  color: var(--blue-500)
}

.post h3 {
  font-size: 1.16rem;
  margin-bottom: .55rem;
  line-height: 1.35
}

.post h3 a {
  color: var(--navy-800)
}

.post h3 a:hover {
  color: var(--blue-500)
}

.post p {
  font-size: .93rem;
  flex: 1;
  margin-bottom: 1.1rem
}

/* ---------- 22. Logos marquee ---------- */
.marquee {
  overflow: hidden;
  position: relative;
  padding-block: .4rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)
}

.marquee__row {
  display: flex;
  gap: clamp(2.5rem, 6vw, 5rem);
  width: max-content;
  animation: marq 34s linear infinite
}

.marquee:hover .marquee__row {
  animation-play-state: paused
}

.marquee img {
  height: 38px;
  width: auto;
  object-fit: contain;
  opacity: .45;
  filter: grayscale(1);
  transition: all .35s var(--ease)
}

.marquee img:hover {
  opacity: 1;
  filter: none
}

@keyframes marq {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

/* ---------- 23. Accordion / FAQ ---------- */
.acc {
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff
}

.acc+.acc {
  margin-top: .85rem
}

.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.35rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--navy-800);
}

.acc__btn:hover {
  color: var(--blue-500)
}

.acc__btn i {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--paper);
  display: grid;
  place-items: center;
  transition: all .3s var(--ease);
  color: var(--blue-500);
}

.acc__btn i svg {
  width: 14px;
  height: 14px;
  transition: transform .3s var(--ease)
}

.acc__btn[aria-expanded="true"] i {
  background: var(--grad-blue);
  color: #fff
}

.acc__btn[aria-expanded="true"] i svg {
  transform: rotate(45deg)
}

.acc__panel {
  padding: 0 1.35rem 1.3rem;
  font-size: .95rem
}

.acc__panel[hidden] {
  display: none
}

/* ---------- 24. Forms ---------- */
.form {
  display: grid;
  gap: 1.1rem
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem
}

@media(max-width:600px) {
  .form__row {
    grid-template-columns: 1fr
  }
}

.field label {
  display: block;
  font-size: .83rem;
  font-weight: 650;
  letter-spacing: .03em;
  color: var(--navy-800);
  margin-bottom: .45rem
}

.field label .req {
  color: #E0453A
}

/* 16px is not a design choice: iOS Safari zooms the whole page in when a
   focused control is smaller than that, and the visitor is left having to
   pinch back out to carry on browsing. Same reason on .nl-form below. */
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  color: var(--navy-800);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}

.field textarea {
  min-height: 140px;
  resize: vertical
}

.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B84' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.6rem
}

.field input::placeholder,
.field textarea::placeholder {
  color: #9AA8BD
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--blue-400);
  box-shadow: 0 0 0 4px rgba(11, 99, 246, .13)
}

.field .err {
  display: none;
  color: #D93B30;
  font-size: .8rem;
  margin-top: .35rem;
  font-weight: 600
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: #E0453A;
  box-shadow: 0 0 0 4px rgba(224, 69, 58, .1)
}

.field.is-invalid .err {
  display: block
}

.consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .87rem
}

.consent input {
  width: 18px;
  height: 18px;
  margin-top: .22rem;
  flex: none;
  accent-color: var(--blue-500)
}

.form-note {
  display: none;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  font-size: .92rem;
  font-weight: 600;
  background: rgba(0, 168, 89, .1);
  color: #00733A;
  border: 1px solid rgba(0, 168, 89, .25);
}

.form-note.is-visible {
  display: block;
  animation: fadeUp .4s var(--ease) both
}

/* ---------- 25. Contact info ---------- */
.info-card {
  display: flex;
  gap: 1.1rem;
  padding: 1.5rem;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line-soft);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2)
}

.info-card__ic {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--grad-blue);
  color: #fff
}

.info-card__ic svg {
  width: 23px;
  height: 23px
}

.info-card h4 {
  font-size: 1.02rem;
  margin-bottom: .3rem
}

.info-card p,
.info-card a {
  font-size: .93rem;
  margin: 0;
  display: block;
  color: var(--muted)
}

.info-card a:hover {
  color: var(--blue-500)
}

.map-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-2);
  border: 1px solid var(--line-soft);
  line-height: 0;
  background: var(--paper-2)
}

.map-frame iframe {
  width: 100%;
  height: clamp(320px, 45vw, 480px);
  border: 0;
  display: block
}

/* ---------- 26. CTA band ---------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--grad-navy);
  padding: clamp(2.4rem, 5vw, 4rem)
}

.cta-band::before {
  content: "";
  position: absolute;
  right: -10%;
  top: -40%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 99, 246, .45), transparent 68%);
}

.cta-band__in {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap
}

.cta-band h2 {
  color: #fff;
  margin-bottom: .6rem;
  max-width: 640px
}

.cta-band p {
  color: #AEC0D8;
  margin-bottom: 0;
  max-width: 560px
}

/* ---------- 27. Newsletter ---------- */
.newsletter {
  background: var(--grad-orange);
  border-radius: var(--r-xl);
  padding: clamp(2rem, 4vw, 3rem);
  position: relative;
  overflow: hidden
}

.newsletter::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 0);
  background-size: 20px 20px;
}

.newsletter__in {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap
}

.newsletter h3 {
  color: #fff;
  margin-bottom: .35rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)
}

.newsletter p {
  color: rgba(255, 255, 255, .9);
  margin-bottom: 0;
  font-weight: 550
}

.nl-form {
  display: flex;
  gap: .6rem;
  background: #fff;
  border-radius: 100px;
  padding: .45rem;
  min-width: min(430px, 100%);
  box-shadow: 0 12px 30px -14px rgba(20, 10, 0, .5)
}

.nl-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: .8rem 1.2rem;
  font-family: inherit;
  font-size: 16px;
  color: var(--navy-800)
}

.nl-form input:focus {
  outline: none
}

@media(max-width:520px) {
  .nl-form {
    flex-direction: column;
    border-radius: var(--r-lg)
  }

  .nl-form .btn {
    width: 100%
  }
}

/* ---------- 28. Footer ---------- */
.footer {
  background: var(--ink);
  color: #95A9C4;
  position: relative;
  overflow: hidden
}

.footer::before {
  content: "";
  position: absolute;
  left: -8%;
  bottom: -30%;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 99, 246, .22), transparent 70%);
  pointer-events: none;
}

.footer__main {
  position: relative;
  z-index: 2;
  padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 3.5rem)
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr 1fr 1.25fr;
  gap: clamp(1.8rem, 4vw, 3rem)
}

@media(max-width:960px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:560px) {
  .footer__grid {
    grid-template-columns: 1fr
  }
}

.footer .brand__logo {
  height: 54px
}

.footer__slogan {
  font-size: 1rem;
  font-style: italic;
  color: var(--orange-400);
  margin: .1rem 0 1.1rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.footer h5 {
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  position: relative;
  padding-bottom: .85rem;
}

.footer h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-orange)
}

.footer p {
  font-size: .93rem
}

.footer strong {
  color: #fff
}

.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem
}

.footer__links li {
  margin: 0
}

.footer__links a {
  color: #95A9C4;
  font-size: .93rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem
}

.footer__links a::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange-500);
  opacity: .55;
  transition: all .3s var(--ease);
  flex: none
}

.footer__links a:hover {
  color: #fff
}

.footer__links a:hover::before {
  opacity: 1;
  transform: scale(1.4)
}

.footer__contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.05rem
}

.footer__contact li {
  margin: 0;
  display: flex;
  gap: .85rem;
  font-size: .93rem;
  line-height: 1.55
}

.footer__contact svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--orange-400);
  margin-top: .2rem
}

.footer__contact a {
  color: #95A9C4
}

.footer__contact a:hover {
  color: #fff
}

.footer__social {
  display: flex;
  gap: .55rem;
  margin-top: 1.6rem
}

.footer__social a {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #95A9C4;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .09);
  transition: all .3s var(--ease);
}

.footer__social a:hover {
  background: var(--blue-500);
  color: #fff;
  border-color: transparent;
  transform: translateY(-3px)
}

.footer__social svg {
  width: 16px;
  height: 16px
}

.footer__cert {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  margin-top: 1.8rem;
  flex-wrap: wrap
}

.footer__cert img {
  height: 42px;
  width: auto;
  opacity: .42;
  filter: grayscale(1) brightness(2.4)
}

.footer__bar {
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(255, 255, 255, .09);
  padding-block: 1.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.8rem;
  align-items: center;
  justify-content: space-between;
  font-size: .86rem;
}

.footer__bar nav {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem
}

.footer__bar a {
  color: #95A9C4
}

.footer__bar a:hover {
  color: #fff
}

/* ---------- 29. Floating actions ---------- */
.fabs {
  position: fixed;
  right: clamp(.9rem, 2vw, 1.5rem);
  bottom: clamp(.9rem, 2vw, 1.5rem);
  z-index: 880;
  display: grid;
  gap: .7rem;
  justify-items: center
}

.fab {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 12px 28px -10px rgba(6, 18, 37, .5);
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}

.fab:hover {
  transform: translateY(-4px) scale(1.05)
}

.fab svg {
  width: 25px;
  height: 25px
}

.fab--wa {
  background: #25D366
}

.fab--wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: ripple 2.4s ease-out infinite;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: .7
  }

  100% {
    transform: scale(1.75);
    opacity: 0
  }
}

.fab--chat {
  background: var(--grad-blue)
}

.fab--top {
  background: var(--navy-800);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px)
}

.fab--top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none
}

.fab__tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: var(--navy-800);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  padding: .45rem .8rem;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}

.fab:hover .fab__tip {
  opacity: 1
}

/* Chat panel */
.chat {
  position: fixed;
  right: clamp(.9rem, 2vw, 1.5rem);
  bottom: calc(clamp(.9rem, 2vw, 1.5rem) + 68px);
  z-index: 885;
  width: min(360px, calc(100vw - 2rem));
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(.97);
  transition: all .35s var(--ease);
  border: 1px solid var(--line-soft);
}

.chat.is-open {
  opacity: 1;
  visibility: visible;
  transform: none
}

.chat__head {
  background: var(--grad-navy);
  color: #fff;
  padding: 1.05rem 1.15rem;
  display: flex;
  gap: .8rem;
  align-items: center
}

.chat__avatar {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--grad-orange);
  display: grid;
  place-items: center;
  color: #fff;
  flex: none
}

.chat__avatar svg {
  width: 21px;
  height: 21px
}

/* Presence dot on the avatar, the way a support widget normally shows it. It
   used to sit inline before the status text, and because the rule matched any
   span in the header a second dot was painted before the title. */
.chat__avatar::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #33D17A;
  border: 2px solid var(--navy-800)
}

.chat__id {
  min-width: 0;   /* let the text wrap instead of shoving the close button out */
  display: grid;
  gap: .1rem
}

.chat__name {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.005em
}

.chat__status {
  font-size: .735rem;
  line-height: 1.35;
  color: #A9BDD8
}

.chat__close {
  margin-left: auto;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #C6D4E8;
  cursor: pointer;
  padding: 0;
  display: grid;
  place-items: center;
  transition: background .25s var(--ease), color .25s var(--ease)
}

.chat__close:hover {
  background: rgba(255, 255, 255, .17);
  color: #fff
}

.chat__close svg {
  width: 15px;
  height: 15px
}

.chat__body {
  padding: 1.15rem;
  max-height: min(48vh, 330px);
  overflow-y: auto;
  background: var(--paper)
}

.chat__msg {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 16px 16px 16px 6px;
  padding: .9rem 1.05rem;
  font-size: .88rem;
  line-height: 1.62;
  box-shadow: var(--sh-1);
  margin: 0
}

.chat__label {
  margin: 1rem 0 .55rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2)
}

.chat__quick {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem
}

.chat__quick a {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  font-size: .82rem;
  font-weight: 600;
  padding: .48rem .85rem .48rem .7rem;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy-800);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease)
}

.chat__quick svg {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--blue-500)
}

.chat__quick a:hover {
  background: var(--blue-500);
  color: #fff;
  border-color: transparent
}

.chat__quick a:hover svg {
  color: #fff
}

.chat__foot {
  padding: .95rem 1.15rem 1.15rem;
  background: #fff;
  border-top: 1px solid var(--line-soft)
}

.chat__foot .btn svg {
  width: 18px;
  height: 18px
}

/* The shared button nudges its icon on hover, which suits a trailing arrow but
   reads as a glitch on a leading channel logo. */
.chat__foot .btn:hover svg {
  transform: none
}

/* ---------- 30. Cookie banner ---------- */
.cookie {
  position: fixed;
  left: clamp(.9rem, 2vw, 1.5rem);
  bottom: clamp(.9rem, 2vw, 1.5rem);
  z-index: 890;
  width: min(390px, calc(100vw - 1.8rem));
  background: #fff;
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  border: 1px solid var(--line);
  padding: 1.15rem 1.25rem 1.25rem;
  transform: translateY(140%);
  transition: transform .5s var(--ease);
}

.cookie.is-open {
  transform: none
}

/* Icon sits on the title's line. Stacked above it, the 44px block pushed the
   notice to the height of a dialog for two sentences of text. */
.cookie__head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .55rem
}

.cookie__ic {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(243, 96, 1, .1);
  color: var(--orange-500);
  display: grid;
  place-items: center;
  flex: none
}

.cookie__ic svg {
  width: 16px;
  height: 16px
}

.cookie h4 {
  font-size: .98rem;
  margin: 0
}

.cookie p {
  font-size: .845rem;
  line-height: 1.6;
  margin-bottom: 1rem
}

/* The policy is a link inside the sentence, not a third button. As a button it
   was equal in weight to the two real choices and wrapped onto its own line. */
.cookie p a {
  color: var(--blue-500);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px
}

.cookie p a:hover {
  color: var(--navy-700)
}

.cookie__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem
}

.cookie__actions .btn {
  width: 100%;
  padding-inline: .75rem
}

/* ---------- 31. Reveal animations ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--ease), transform .75s var(--ease)
}

[data-reveal].is-in {
  opacity: 1;
  transform: none
}

[data-reveal="left"] {
  transform: translateX(-32px)
}

[data-reveal="right"] {
  transform: translateX(32px)
}

/* On a phone the ±32px slide leaves every not-yet-revealed block hanging past
   the right edge, so the page reports a layout wider than the screen. Reveal
   vertically instead — at this width the sideways motion reads the same. */
@media(max-width:900px) {

  [data-reveal="left"],
  [data-reveal="right"] {
    transform: translateY(26px)
  }
}

[data-reveal="zoom"] {
  transform: scale(.94)
}

[data-reveal].is-in {
  transform: none
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@media(prefers-reduced-motion:reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important
  }

  .hero__slide img {
    transform: none !important
  }
}

/* ---------- 32. Utility bits ---------- */
.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .8rem;
  border-radius: 100px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  background: rgba(11, 99, 246, .1);
  color: var(--blue-500);
}

.divider-shape {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  line-height: 0;
  pointer-events: none
}

.divider-shape svg {
  width: 100%;
  height: clamp(38px, 5vw, 72px)
}

.pager {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: 3rem;
  flex-wrap: wrap
}

.pager a,
.pager span {
  min-width: 46px;
  height: 46px;
  padding-inline: .9rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy-800);
  font-weight: 650;
  font-size: .92rem;
}

.pager a:hover {
  background: var(--navy-800);
  color: #fff;
  border-color: transparent
}

.pager .is-current {
  background: var(--grad-blue);
  color: #fff;
  border-color: transparent
}

.sticky-side {
  position: sticky;
  top: calc(var(--header-h) + 24px)
}

/* Spacing / layout utilities */
.pt-0 {
  padding-top: 0
}

.mt-1 {
  margin-top: 1rem
}

.mt-2 {
  margin-top: 1.8rem
}

.mt-3 {
  margin-top: clamp(1.5rem, 3vw, 2.2rem)
}

.mb-2 {
  margin-bottom: 1.4rem
}

.flex-1 {
  flex: 1;
  margin: 0
}

.items-center {
  align-items: center
}

.section--ink {
  background: #08182F
}

.timeline--flush {
  padding: 0
}

.panel--glass {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12)
}

.overline {
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 650;
  color: var(--muted-2);
  margin-bottom: 2rem;
}

.input-flat {
  border: 0;
  padding: .8rem 1.2rem;
  background: transparent
}

.input-flat:focus {
  box-shadow: none
}

/* Timeline on dark surfaces */
.section--dark .timeline h4 {
  color: #fff
}

.section--dark .timeline p {
  color: #A8BAD1
}

.section--dark .timeline li:not(.done):not(.current) h4 {
  color: #8FA6C4
}

.section--dark .timeline li:not(.done):not(.current) p {
  color: #7D93B2
}

.section--dark .timeline li::before {
  background: rgba(255, 255, 255, .16)
}

.section--dark .timeline li.done::before {
  background: var(--blue-400)
}

.section--dark .timeline__dot {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
  color: #8FA6C4
}

.panel {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 2.6vw, 2rem)
}

.panel--dark {
  background: var(--grad-navy);
  border-color: transparent;
  color: #B9C7DC
}

.panel--dark h3,
.panel--dark h4 {
  color: #fff
}

.sprite {
  display: none
}

.mb-grid {
  margin-bottom: clamp(1.1rem, 2vw, 1.75rem)
}

.span-2 {
  grid-column: span 2
}

@media(max-width:680px) {
  .span-2 {
    grid-column: auto
  }
}

.one-col {
  grid-template-columns: 1fr
}

.btn-row--center {
  justify-content: center
}

/* =========================================================================
   MULTILINGUAL
   ========================================================================= */

/* Chinese: Outfit keeps the Latin glyphs (brand name, phone numbers, dates)
   and CJK falls through to the reader's system font. A webfont is deliberately
   avoided here — a full Simplified Chinese face is 8–12 MB, which would be the
   slowest thing on the site for exactly the audience it is meant to serve. */
.lang-cjk {
  --font: 'Outfit', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
          'Noto Sans CJK SC', 'Source Han Sans SC', 'WenQuanYi Micro Hei', sans-serif;
}

/* CJK has no ascenders/descenders to speak of and reads better with a little
   more air and slightly looser tracking than the Latin setting. */
.lang-cjk body { line-height: 1.85 }
.lang-cjk h1,
.lang-cjk h2,
.lang-cjk h3,
.lang-cjk h4 { letter-spacing: 0; line-height: 1.35 }
.lang-cjk .hero h1 { letter-spacing: 0 }
.lang-cjk .eyebrow,
.lang-cjk .overline,
.lang-cjk .nav__link,
.lang-cjk .marquee__run span,
.lang-cjk .footer h5 { letter-spacing: .08em }
.lang-cjk .hero__slogan { font-style: normal }
.lang-cjk .footer__slogan { font-style: normal }

/* ---------- Language switcher (topbar) ---------- */
.langsw { position: relative }

.langsw__btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .6rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 100px;
  background: rgba(255, 255, 255, .07);
  color: #9BB0CC;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease)
}

.langsw__btn:hover,
.langsw__btn[aria-expanded="true"] { background: var(--blue-500); color: #fff; border-color: transparent }
.langsw__btn svg { width: 13px; height: 13px; flex: none }
.langsw__btn svg:last-child { width: 10px; height: 10px; opacity: .7 }

.langsw__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 50;
  min-width: 150px;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--r);
  box-shadow: var(--sh-3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all .25s var(--ease)
}

.langsw__btn[aria-expanded="true"] + .langsw__menu { opacity: 1; visibility: visible; transform: none }
.langsw__menu li { margin: 0 }

.langsw__menu a {
  display: block;
  padding: .55rem .8rem;
  border-radius: 8px;
  color: var(--navy-800);
  font-size: .88rem;
  font-weight: 550
}

.langsw__menu a:hover { background: var(--paper); color: var(--blue-500) }
.langsw__menu a[aria-current="true"] { background: var(--paper); color: var(--blue-500); font-weight: 700 }

/* ---------- Language list (mobile drawer) ---------- */
.drawer__lang {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft)
}

.drawer__lang a {
  padding: .5rem 1rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--navy-800);
  font-size: .86rem;
  font-weight: 600
}

.drawer__lang a:hover { background: var(--paper) }
.drawer__lang a.is-current { background: var(--navy-800); color: #fff; border-color: transparent }

/* ---------- WeChat floating button (Chinese site) ---------- */
.fab--wechat { background: #07C160 }

.fab--wechat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #07C160;
  animation: ripple 2.4s ease-out infinite
}

/* ---------- WeChat QR panel ---------- */
.wechat-card {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
  max-width: 320px;
  margin-inline: auto
}

.wechat-card__id {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy-800);
  letter-spacing: .04em
}

/* ---------- Map fallback (Google is unreachable from mainland China) ---------- */
.map-note {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1.1rem 1.3rem;
  margin-top: 1rem;
  border-radius: var(--r);
  background: rgba(243, 96, 1, .08);
  border: 1px solid rgba(243, 96, 1, .22);
  font-size: .9rem
}

.map-note svg { width: 20px; height: 20px; flex: none; color: var(--orange-500); margin-top: .15rem }
.untranslated-note {
  margin: 1.5rem 0 0;
  padding: .85rem 1.2rem;
  border-radius: var(--r);
  background: rgba(243, 96, 1, .09);
  border: 1px solid rgba(243, 96, 1, .25);
  color: var(--navy-800);
  font-size: .88rem;
  font-weight: 550
}

/* ---------- Language flags ---------- */
.flag {
  width: 21px;
  height: 14px;
  flex: none;
  border-radius: 2px;
  /* light flags need an edge so they do not bleed into the surface */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
  object-fit: cover
}

.langsw__btn .flag { width: 19px; height: 13px }
.langsw__btn .flag + span { line-height: 1 }

.langsw__menu a {
  display: flex;
  align-items: center;
  gap: .6rem
}

.drawer__lang a {
  display: inline-flex;
  align-items: center;
  gap: .5rem
}

.topbar .flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) }

/* ---------- Developer signature ---------- */
.devsig {
  /* The three items cannot share one row at 1290px, and the credit alone on a
     ragged second line reads as an accident. Give it a full-width line of its
     own so it lands as a deliberate signature. */
  flex: 0 0 100%;
  margin: .2rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .55rem .9rem
}

.devsig__pill {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .3rem .85rem .3rem .3rem;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 100px;
  background: rgba(255, 255, 255, .03);
  transition: background .3s var(--ease), border-color .3s var(--ease)
}

.devsig__pill:hover {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .14)
}

/* The initials sit under the photo, so a missing file degrades to a monogram
   instead of a broken-image icon. */
.devsig__ph {
  position: relative;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .08)
}

.devsig__mono {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  color: #95A9C4
}

.devsig__ph img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%
}

.devsig__txt {
  display: grid;
  gap: .1rem;
  text-align: left;
  line-height: 1.2
}

.devsig__by {
  font-size: .68rem;
  letter-spacing: .02em;
  color: #8AA0BE
}

.devsig__name {
  font-size: .82rem;
  font-weight: 650;
  color: #95A9C4;
  transition: color .25s var(--ease)
}

.devsig__pill:hover .devsig__name { color: var(--orange-400) }

.devsig__ext {
  width: 11px;
  height: 11px;
  color: #7D93B2;
  transition: color .25s var(--ease)
}

.devsig__pill:hover .devsig__ext { color: var(--orange-400) }

.devsig__rule {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, .1)
}

.devsig__links {
  display: inline-flex;
  gap: .4rem
}

/* Same shape language as the company's own social buttons, one size down and
   without the accent fill — the client's row stays the louder of the two. */
.devsig__links a {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #8AA0BE;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .07);
  transition: all .3s var(--ease)
}

.devsig__links a:hover {
  color: var(--orange-400);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14)
}

.devsig__links svg {
  width: 15px;
  height: 15px
}

@media(max-width:640px) {
  .devsig { flex-direction: column; gap: .75rem }
  .devsig__rule { display: none }
}

/* Three items in the bar: keep them apart on desktop, stacked and centred
   once the row can no longer hold them. */
@media(max-width:900px) {
  .footer__bar { justify-content: center; text-align: center }
  .footer__bar nav { justify-content: center }
}