/* ==========================================================================
   TATWAMASI TEJA GLOBAL LOGISTICS
   Design system + component styles — DARK THEME
   Built on Bootstrap 5 — this file only adds brand layer + components.
   --------------------------------------------------------------------------
   The site runs on four dark surface tiers rather than a light/dark
   alternation. Sections keep their original semantic class names, so page
   markup is unchanged:

     .section--white  -> --surface-base    (deep, the default field)
     .section--light  -> --surface-raised  (lifted band, gives rhythm)
     .section--navy   -> --surface-navy    (conviction band, blue wash)
     .hero / .cta-band / footer -> --surface-deep (darkest, framing)
   --------------------------------------------------------------------------
   1.  Tokens
   2.  Base & typography
   3.  Buttons & links
   4.  Section framework
   5.  Header / navigation
   6.  Hero
   7.  Service strip
   8.  Cards & media blocks
   9.  Process timeline
   10. Industries
   11. Split / alternating sections
   12. Forms
   13. Footer
   14. Motion & reveal
   15. Responsive refinements
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* Brand palette — unchanged */
  --brand-black: #0a0a0a;
  --brand-navy: #071a33;
  --brand-blue: #0b63ce;
  --brand-gold: #d9a441;
  --brand-gold-light: #f4c95d;
  --brand-light: #f5f7fa;
  --brand-white: #ffffff;
  --brand-ink: #111827;
  --brand-muted: #64748b;

  /* Blue lifted for legibility on dark surfaces */
  --brand-blue-light: #4d9ae6;

  /* Surface tiers */
  --surface-deep: #04080f;
  --surface-base: #060d15;
  --surface-raised: #0d1a2b;
  --surface-navy: #071a33;

  /* Elevated panels sitting on those tiers */
  --card: rgba(255, 255, 255, 0.04);
  --card-hover: rgba(255, 255, 255, 0.065);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-border-hover: rgba(217, 164, 65, 0.55);

  /* Type colours */
  --text-heading: #f2f5f9;
  --text-body: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.56);

  /* Derived */
  --navy-700: #0d2647;
  --navy-600: #14325a;
  --navy-900: #04101f;
  --blue-soft: rgba(11, 99, 206, 0.16);
  --gold-soft: rgba(217, 164, 65, 0.16);
  --line: rgba(255, 255, 255, 0.1);
  --line-dark: rgba(255, 255, 255, 0.12);

  /* Typography */
  --font-sans: "Manrope", "Inter", Arial, Helvetica, sans-serif;

  --fs-display: clamp(2.4rem, 1.35rem + 3.4vw, 4.35rem);
  --fs-h1: clamp(2.1rem, 1.4rem + 2.4vw, 3.35rem);
  --fs-h2: clamp(1.75rem, 1.25rem + 1.7vw, 2.65rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-h4: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem);
  --fs-lead: clamp(1rem, 0.96rem + 0.24vw, 1.15rem);
  --fs-body: 1rem;
  --fs-small: 0.9375rem;
  --fs-eyebrow: 0.75rem;

  /* Spacing */
  --section-y: clamp(64px, 4.4vw + 42px, 118px);
  --section-y-sm: clamp(48px, 3vw + 32px, 80px);
  --gutter: clamp(18px, 2vw, 32px);

  /* Shape */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  /* Elevation — black-based, since everything sits on dark */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 12px 30px -16px rgba(0, 0, 0, 0.85);
  --shadow-lg: 0 26px 64px -30px rgba(0, 0, 0, 0.95);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.32s;

  /* Layout */
  --header-h: 126px;
  --header-h-scrolled: 98px;

  color-scheme: dark;
}

/* Wider container for the long primary navigation */
.container-xxl,
.container-wide {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background-color: var(--surface-base);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-body);
  background-color: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--font-sans);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.022em;
  color: var(--text-heading);
  margin: 0 0 0.6em;
}

h1,
.h1 {
  font-size: var(--fs-h1);
}

h2,
.h2 {
  font-size: var(--fs-h2);
}

h3,
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.28;
  letter-spacing: -0.015em;
}

h4,
.h4 {
  font-size: var(--fs-h4);
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 700;
}

p {
  margin: 0 0 1.15rem;
}

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

.display-xl {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.lead-text {
  font-size: var(--fs-lead);
  line-height: 1.75;
  color: var(--text-body);
  font-weight: 400;
}

/* Legacy light-theme helpers, remapped so page markup needs no edits */
.text-muted-brand {
  color: var(--text-muted) !important;
}

.text-navy {
  color: var(--text-heading) !important;
}

.text-gold {
  color: var(--brand-gold) !important;
}

.text-blue {
  color: var(--brand-blue-light) !important;
}

.fw-medium {
  font-weight: 500 !important;
}

/* Eyebrow label — small caps with a gold tick */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brand-blue-light);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand-gold);
  flex: 0 0 28px;
}

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

.on-dark .eyebrow,
.eyebrow--light {
  color: var(--brand-gold-light);
}

/* Thin gold rule used to separate blocks */
.rule-gold {
  width: 56px;
  height: 3px;
  background: var(--brand-gold);
  border: 0;
  opacity: 1;
  margin: 0 0 26px;
  border-radius: 2px;
}

.rule-gold--center {
  margin-inline: auto;
}

/* Section heading group */
.section-head {
  max-width: 760px;
  margin-bottom: clamp(36px, 4vw, 60px);
}

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

.section-head p {
  color: var(--text-body);
  font-size: var(--fs-lead);
  margin-bottom: 0;
}

.section-head h2 {
  margin-bottom: 18px;
}

/* Retained for markup compatibility — every surface is dark now */
.on-dark,
.on-dark p {
  color: var(--text-body);
}

.on-dark h1,
.on-dark h2,
.on-dark h3,
.on-dark h4,
.on-dark .h1,
.on-dark .h2,
.on-dark .h3,
.on-dark .h4 {
  color: #fff;
}

.on-dark .section-head p,
.on-dark .lead-text {
  color: var(--text-body);
}

/* ==========================================================================
   3. BUTTONS & LINKS
   ========================================================================== */
.btn {
  --bs-btn-border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  border-width: 1px;
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn:focus-visible {
  outline: 3px solid var(--brand-gold-light);
  outline-offset: 3px;
  box-shadow: none;
}

/* Primary conversion — gold */
.btn-gold {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--brand-black);
}

.btn-gold:hover,
.btn-gold:focus {
  background: var(--brand-gold-light);
  border-color: var(--brand-gold-light);
  color: var(--brand-black);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(217, 164, 65, 0.9);
}

/* Secondary — outlined, resolves to gold on hover */
.btn-outline-gold {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.34);
  color: #fff;
}

.btn-outline-gold:hover,
.btn-outline-gold:focus {
  border-color: var(--brand-gold);
  color: var(--brand-gold-light);
  background: rgba(217, 164, 65, 0.08);
}

/* Tertiary ghost — quieter than the gold outline, fills instead of shifting hue */
.btn-outline-navy {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.26);
  color: #fff;
}

.btn-outline-navy:hover,
.btn-outline-navy:focus {
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* Solid blue — used where a third weight is needed without spending gold */
.btn-navy {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

.btn-navy:hover,
.btn-navy:focus {
  background: #1a75e0;
  border-color: #1a75e0;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(11, 99, 206, 0.9);
}

.btn-lg-brand {
  padding: 17px 38px;
  font-size: 0.9375rem;
}

.btn-sm-brand {
  padding: 11px 22px;
  font-size: 0.78rem;
}

/* Text link with travelling arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 0.83rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--brand-blue-light);
  text-decoration: none;
  transition: color var(--dur) var(--ease), gap var(--dur) var(--ease);
}

.link-arrow svg {
  transition: transform var(--dur) var(--ease);
  flex: 0 0 auto;
}

.link-arrow:hover {
  color: var(--brand-gold);
}

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

.link-arrow:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.link-arrow--light {
  color: var(--brand-gold-light);
}

.link-arrow--light:hover {
  color: #fff;
}

/* ==========================================================================
   4. SECTION FRAMEWORK
   ========================================================================== */
.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: var(--section-y-sm);
}

.section--white {
  background: var(--surface-base);
}

/* Lifted band — hairlines make the tier change read without a colour jump */
.section--light {
  background: var(--surface-raised);
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
}

.section--navy {
  background: var(--surface-navy);
}

.section--black {
  background: var(--surface-deep);
}


/* Soft atmospheric wash for the conviction bands */
.section--navy::before,
.section--black::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 90% at 12% 0%, rgba(11, 99, 206, 0.24), transparent 62%),
    radial-gradient(52% 70% at 92% 100%, rgba(217, 164, 65, 0.1), transparent 66%);
  pointer-events: none;
}

.section>.container-wide,
.section>.container,
.section>.container-xxl {
  position: relative;
  z-index: 1;
}

/* Hairline divider */
.divider-line {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
  opacity: 1;
}

.divider-line--dark {
  background: var(--line-dark);
}

/* ==========================================================================
   5. HEADER / NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--surface-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.site-header .navbar {
  padding-block: 0;
  min-height: var(--header-h);
  transition: min-height var(--dur) var(--ease);
}

.site-header.is-scrolled {
  background: #020509;
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.95);
  border-bottom-color: rgba(217, 164, 65, 0.22);
}

.site-header.is-scrolled .navbar {
  min-height: var(--header-h-scrolled);
}

/* Brand lockup — assets/images/logo-horizontal.png|webp is the supplied
   horizontal logo with its black JPEG canvas keyed out to transparency. The
   artwork is never redrawn, recoloured or reproportioned. This lockup carries
   its own legible wordmark, so no type is set beside it.
   Source ratio 469 x 117 (4:1) — height drives the size, width follows. */
.navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: clamp(14px, 1.6vw, 34px);
  text-decoration: none;
}

.brand-logo {
  height: 92px;
  width: auto;
  transition: height var(--dur) var(--ease);
}

.site-header.is-scrolled .brand-logo {
  height: 70px;
}

.navbar-brand:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 4px;
}

/* Primary nav links */
.site-nav .nav-link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  padding: 10px 0;
  position: relative;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.site-nav .nav-item {
  margin-inline: clamp(8px, 0.85vw, 15px);
}

.site-nav .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 2px;
  background: var(--brand-gold);
  transition: right var(--dur) var(--ease);
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
  color: #fff;
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link:focus::after {
  right: 0;
}

.site-nav .nav-link.is-active {
  color: #fff;
}

.site-nav .nav-link.is-active::after {
  right: 0;
}

.site-nav .nav-link:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 4px;
  border-radius: 2px;
}

.nav-cta {
  margin-left: clamp(10px, 1.4vw, 26px);
}

/* --------------------------------------------------------------------------
   Services submenu
   The parent stays a real link to services.html, so that page is never
   orphaned. The panel opens on hover and on keyboard focus (:focus-within),
   which needs no JavaScript and keeps Tab order natural. Below the expand
   breakpoint the panel becomes a static indented list inside the drawer.
   -------------------------------------------------------------------------- */
.has-submenu {
  position: relative;
}

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

.nav-caret {
  margin-left: 6px;
  opacity: 0.65;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

@media (min-width: 992px) {

  .has-submenu:hover .nav-caret,
  .has-submenu:focus-within .nav-caret {
    transform: rotate(180deg);
    opacity: 1;
  }

  .submenu {
    position: absolute;
    top: calc(100% + 16px);
    left: -20px;
    min-width: 250px;
    padding: 10px 0;
    background: #08111d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid var(--brand-gold);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease),
      visibility var(--dur);
    z-index: 40;
  }

  /* Invisible bridge so the pointer can cross the gap without dropping hover */
  .submenu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -18px;
    height: 18px;
  }

  .has-submenu:hover>.submenu,
  .has-submenu:focus-within>.submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .submenu a {
    display: block;
    padding: 12px 22px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    white-space: nowrap;
    border-left: 2px solid transparent;
    transition: color var(--dur) var(--ease),
      background-color var(--dur) var(--ease),
      border-color var(--dur) var(--ease),
      padding-left var(--dur) var(--ease);
  }

  .submenu a:hover,
  .submenu a:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--brand-gold);
    padding-left: 26px;
  }

  .submenu a.is-active {
    color: var(--brand-gold-light);
    border-left-color: var(--brand-gold);
  }
}

.submenu a:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: -3px;
  border-radius: 2px;
}

/* Hamburger */
.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  transition: border-color var(--dur) var(--ease);
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: 2px solid var(--brand-gold);
  outline-offset: 3px;
}

.navbar-toggler:hover {
  border-color: var(--brand-gold);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  width: 1.35em;
  height: 1.35em;
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.hero {
  position: relative;
  background: var(--surface-deep);
  overflow: hidden;
  padding-block: clamp(64px, 6vw + 30px, 122px);
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(64% 78% at 78% 22%, rgba(11, 99, 206, 0.32), transparent 60%),
    radial-gradient(48% 60% at 8% 92%, rgba(217, 164, 65, 0.12), transparent 66%),
    linear-gradient(165deg, #061423 0%, #04080f 52%, #060d15 100%);
  z-index: -2;
}

/* Fine engineering grid — reads as a plotting chart, not decoration */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(72% 72% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(72% 72% at 50% 40%, #000 20%, transparent 78%);
  z-index: -1;
}

.hero-copy {
  max-width: 620px;
}

.hero-title {
  color: #fff;
  margin-bottom: 22px;
}

.hero-title span {
  display: block;
}

.hero-title .accent {
  color: var(--brand-gold);
}

.hero-sub {
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem);
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}

.hero-text {
  color: var(--text-body);
  font-size: var(--fs-lead);
  margin-bottom: 34px;
  max-width: 540px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero-figure {
  position: relative;
  max-width: 560px;
  margin-inline: auto;
}

.hero-figure svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Photographic hero visual (index-banner.html).
   The artwork sits on its own near-black navy field, so a soft radial mask
   melts its edges into the hero gradient rather than showing a hard rectangle.
   Falls back to a plain image where masking is unsupported — still readable,
   just with a visible edge. */
.hero-photo {
  position: relative;
  max-width: 620px;
  margin-inline: auto;
}

/* Parallax layer — JS writes a transform here; the transition does the easing
   so pointer jitter never reaches the screen. */
.hero-photo__stage {
  position: relative;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  /* closest-side puts the gradient's 100% stop exactly on the box edge, so the
     alpha actually reaches zero there. A percentage radius would place it
     outside the box and leave the edges partly opaque — a visible rectangle. */
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 80%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 80%, transparent 100%);
  animation: hero-drift 7s ease-in-out infinite;
}

/* Breathing halo behind the globe */
.hero-photo__glow {
  position: absolute;
  inset: -6% -4%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 47%,
      rgba(77, 154, 230, 0.34) 0%,
      rgba(11, 99, 206, 0.14) 46%,
      transparent 70%);
  animation: hero-breathe 5.5s ease-in-out infinite;
}

/* Slow light sweep — clipped to the globe area so it reads as a pass of light
   across the sphere rather than a band crossing a rectangle. */
.hero-photo__sweep {
  position: absolute;
  inset: 8% 6%;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  overflow: hidden;
  mask-image: radial-gradient(ellipse closest-side at 50% 48%, #000 52%, transparent 84%);
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 48%, #000 52%, transparent 84%);
}

.hero-photo__sweep::before {
  content: "";
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -40%;
  width: 34%;
  background: linear-gradient(100deg,
      transparent 0%,
      rgba(190, 225, 255, 0.42) 45%,
      rgba(244, 201, 93, 0.3) 62%,
      transparent 100%);
  transform: skewX(-12deg);
  animation: hero-sweep 6.5s ease-in-out infinite;
}

/* Ambient motes drifting around the globe */
.hero-photo__motes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hero-photo__motes i {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff3d4;
  box-shadow: 0 0 6px 1px rgba(244, 201, 93, 0.95),
    0 0 16px 3px rgba(217, 164, 65, 0.5);
  opacity: 0;
  animation: hero-mote 3.4s linear infinite;
  will-change: transform, opacity;
}

/* Per-particle position, size, speed and drift vector. Generated once with a
   fixed seed so the scatter looks random but the file stays static — no
   runtime JS, and the same result on every load. --dx / --dy feed the shared
   keyframes, so one animation covers all of them. */
.hero-photo__motes i:nth-child(1) {
  left: 33.1%;
  top: 29.2%;
  --dx: -21px;
  --dy: -88px;
  animation-delay: 3.45s;
  animation-duration: 2.69s;
  width: 7px;
  height: 7px;
}

.hero-photo__motes i:nth-child(2) {
  left: 85.9%;
  top: 33.9%;
  --dx: -21px;
  --dy: -95px;
  animation-delay: 0.29s;
  animation-duration: 3.38s;
  width: 4px;
  height: 4px;
}

.hero-photo__motes i:nth-child(3) {
  left: 78.4%;
  top: 27.2%;
  --dx: -23px;
  --dy: -87px;
  animation-delay: 2.45s;
  animation-duration: 3.74s;
  width: 5px;
  height: 5px;
  background: #e8f4ff;
  box-shadow: 0 0 6px 1px rgba(159, 208, 255, 0.95), 0 0 16px 3px rgba(77, 154, 230, 0.5);
}

.hero-photo__motes i:nth-child(4) {
  left: 8.5%;
  top: 34.4%;
  --dx: -18px;
  --dy: -109px;
  animation-delay: 1.22s;
  animation-duration: 4.15s;
}

.hero-photo__motes i:nth-child(5) {
  left: 31.8%;
  top: 78.4%;
  --dx: -16px;
  --dy: -110px;
  animation-delay: 2.4s;
  animation-duration: 2.79s;
  width: 5px;
  height: 5px;
}

.hero-photo__motes i:nth-child(6) {
  left: 68.1%;
  top: 59.8%;
  --dx: -4px;
  --dy: -100px;
  animation-delay: 2.86s;
  animation-duration: 2.97s;
  background: #e8f4ff;
  box-shadow: 0 0 6px 1px rgba(159, 208, 255, 0.95), 0 0 16px 3px rgba(77, 154, 230, 0.5);
}

.hero-photo__motes i:nth-child(7) {
  left: 56.7%;
  top: 51.5%;
  --dx: 15px;
  --dy: -111px;
  animation-delay: 0.76s;
  animation-duration: 3.05s;
  width: 5px;
  height: 5px;
}

.hero-photo__motes i:nth-child(8) {
  left: 31.0%;
  top: 54.6%;
  --dx: 25px;
  --dy: -109px;
  animation-delay: 1.21s;
  animation-duration: 3.91s;
  width: 5px;
  height: 5px;
}

.hero-photo__motes i:nth-child(9) {
  left: 41.6%;
  top: 74.0%;
  --dx: 24px;
  --dy: -111px;
  animation-delay: 1.77s;
  animation-duration: 4.28s;
  width: 5px;
  height: 5px;
  background: #e8f4ff;
  box-shadow: 0 0 6px 1px rgba(159, 208, 255, 0.95), 0 0 16px 3px rgba(77, 154, 230, 0.5);
}

.hero-photo__motes i:nth-child(10) {
  left: 54.2%;
  top: 76.4%;
  --dx: 5px;
  --dy: -88px;
  animation-delay: 2.92s;
  animation-duration: 3.16s;
  width: 8px;
  height: 8px;
}

.hero-photo__motes i:nth-child(11) {
  left: 45.1%;
  top: 80.2%;
  --dx: -23px;
  --dy: -82px;
  animation-delay: 2.79s;
  animation-duration: 3.45s;
  width: 5px;
  height: 5px;
}

.hero-photo__motes i:nth-child(12) {
  left: 62.2%;
  top: 91.5%;
  --dx: 20px;
  --dy: -99px;
  animation-delay: 3.01s;
  animation-duration: 3.4s;
  width: 8px;
  height: 8px;
  background: #e8f4ff;
  box-shadow: 0 0 6px 1px rgba(159, 208, 255, 0.95), 0 0 16px 3px rgba(77, 154, 230, 0.5);
}

.hero-photo__motes i:nth-child(13) {
  left: 88.7%;
  top: 44.3%;
  --dx: 14px;
  --dy: -109px;
  animation-delay: 0.25s;
  animation-duration: 2.81s;
}

.hero-photo__motes i:nth-child(14) {
  left: 26.3%;
  top: 46.9%;
  --dx: -5px;
  --dy: -102px;
  animation-delay: 0.7s;
  animation-duration: 3.49s;
  width: 8px;
  height: 8px;
}

.hero-photo__motes i:nth-child(15) {
  left: 16.3%;
  top: 49.9%;
  --dx: -7px;
  --dy: -73px;
  animation-delay: 1.74s;
  animation-duration: 3.1s;
  background: #e8f4ff;
  box-shadow: 0 0 6px 1px rgba(159, 208, 255, 0.95), 0 0 16px 3px rgba(77, 154, 230, 0.5);
}

.hero-photo__motes i:nth-child(16) {
  left: 90.2%;
  top: 29.2%;
  --dx: -25px;
  --dy: -76px;
  animation-delay: 2.77s;
  animation-duration: 2.87s;
  width: 5px;
  height: 5px;
}

.hero-photo__motes i:nth-child(17) {
  left: 20.4%;
  top: 38.9%;
  --dx: 3px;
  --dy: -70px;
  animation-delay: 1.55s;
  animation-duration: 3.35s;
  width: 5px;
  height: 5px;
}

.hero-photo__motes i:nth-child(18) {
  left: 66.1%;
  top: 56.1%;
  --dx: -2px;
  --dy: -74px;
  animation-delay: 3.11s;
  animation-duration: 3.78s;
  background: #e8f4ff;
  box-shadow: 0 0 6px 1px rgba(159, 208, 255, 0.95), 0 0 16px 3px rgba(77, 154, 230, 0.5);
}

.hero-photo__motes i:nth-child(19) {
  left: 89.7%;
  top: 68.4%;
  --dx: -21px;
  --dy: -85px;
  animation-delay: 1.68s;
  animation-duration: 3.31s;
}

.hero-photo__motes i:nth-child(20) {
  left: 9.6%;
  top: 23.0%;
  --dx: 5px;
  --dy: -110px;
  animation-delay: 0.46s;
  animation-duration: 3.39s;
  width: 5px;
  height: 5px;
}

.hero-photo__motes i:nth-child(21) {
  left: 55.0%;
  top: 57.7%;
  --dx: -15px;
  --dy: -97px;
  animation-delay: 0.3s;
  animation-duration: 3.7s;
  width: 5px;
  height: 5px;
  background: #e8f4ff;
  box-shadow: 0 0 6px 1px rgba(159, 208, 255, 0.95), 0 0 16px 3px rgba(77, 154, 230, 0.5);
}

.hero-photo__motes i:nth-child(22) {
  left: 61.1%;
  top: 88.7%;
  --dx: 18px;
  --dy: -68px;
  animation-delay: 0.52s;
  animation-duration: 3.26s;
}

@keyframes hero-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes hero-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }

  18% {
    opacity: 0.85;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

@keyframes hero-drift {

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

  50% {
    transform: translate3d(0, -22px, 0) scale(1.018);
  }
}

@keyframes hero-breathe {

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

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes hero-sweep {
  0% {
    left: -40%;
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  72%,
  100% {
    left: 118%;
    opacity: 0;
  }
}

@keyframes hero-mote {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.45);
  }

  12% {
    opacity: 1;
  }

  72% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--dx, 6px), var(--dy, -90px), 0) scale(1);
  }
}

/* Animated freight routes */
.route-dash {
  stroke-dasharray: 9 13;
  animation: route-flow 2.6s linear infinite;
}

@keyframes route-flow {
  to {
    stroke-dashoffset: -44;
  }
}

.pulse-node {
  animation: node-pulse 3.2s ease-in-out infinite;
  transform-origin: center;
}

.pulse-node--b {
  animation-delay: 1.1s;
}

.pulse-node--c {
  animation-delay: 2s;
}

@keyframes node-pulse {

  0%,
  100% {
    opacity: 0.35;
    r: 4;
  }

  50% {
    opacity: 1;
    r: 6.5;
  }
}

/* Compact page hero for inner pages */
.page-hero {
  position: relative;
  background: var(--surface-navy);
  overflow: hidden;
  padding-block: clamp(64px, 5vw + 40px, 112px);
  isolation: isolate;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 88% at 84% 18%, rgba(11, 99, 206, 0.34), transparent 62%),
    radial-gradient(46% 64% at 4% 100%, rgba(217, 164, 65, 0.13), transparent 68%),
    linear-gradient(155deg, #061627 0%, #071a33 60%, #04101f 100%);
  z-index: -2;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(80% 70% at 40% 50%, #000 10%, transparent 76%);
  -webkit-mask-image: radial-gradient(80% 70% at 40% 50%, #000 10%, transparent 76%);
  z-index: -1;
}

.page-hero h1 {
  color: #fff;
  margin-bottom: 20px;
}

.page-hero p {
  color: var(--text-body);
  font-size: var(--fs-lead);
}

.page-hero .hero-inner {
  max-width: 800px;
}

/* Breadcrumb */
.brand-breadcrumb {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  margin-bottom: 22px;
}

.brand-breadcrumb ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
}

.brand-breadcrumb li {
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-breadcrumb li+li::before {
  content: "/";
  color: rgba(255, 255, 255, 0.3);
}

.brand-breadcrumb a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.brand-breadcrumb a:hover {
  color: var(--brand-gold-light);
}

/* ==========================================================================
   7. SERVICE STRIP
   ========================================================================== */
.service-strip {
  background: var(--surface-raised);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  position: relative;
}

.strip-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 28px 10px;
  border-right: 1px solid var(--line);
  height: 100%;
  transition: background-color var(--dur) var(--ease);
}

.strip-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.strip-item svg {
  color: var(--brand-blue-light);
  flex: 0 0 auto;
  transition: color var(--dur) var(--ease);
}

.strip-item:hover svg {
  color: var(--brand-gold);
}

.strip-item span {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8edf3;
  line-height: 1.35;
}

/* Two-up on small screens: keep the rule between the pair, drop it at the edge */
@media (max-width: 991.98px) {
  .service-strip .row>[class*="col-"] {
    border-bottom: 1px solid var(--line);
  }

  .service-strip .row>.col-6:nth-of-type(even) .strip-item {
    border-right: 0;
  }

  .strip-item {
    border-bottom: 0;
    padding: 20px 8px;
  }

  .service-strip .row>.col-12 .strip-item {
    border-right: 0;
  }
}

/* ==========================================================================
   8. CARDS & MEDIA BLOCKS
   ========================================================================== */
/* Service card */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(28px, 2.4vw, 40px);
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  transition: transform var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.service-card::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 0;
  background: var(--brand-gold);
  border-radius: var(--radius) 0 0 0;
  transition: width var(--dur) var(--ease);
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-6px);
  background: var(--card-hover);
  border-color: var(--card-border-hover);
  box-shadow: var(--shadow-lg);
}

.service-card:hover::after,
.service-card:focus-within::after {
  width: 100%;
}

.service-card__num {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--brand-gold);
  margin-bottom: 22px;
  display: block;
}

.service-card__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--blue-soft);
  color: var(--brand-blue-light);
  margin-bottom: 22px;
  transition: transform var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.service-card:hover .service-card__icon {
  transform: translateY(-4px);
  background: var(--gold-soft);
  color: var(--brand-gold);
}

.service-card h3 {
  margin-bottom: 12px;
}

.service-card p {
  color: var(--text-muted);
  font-size: var(--fs-small);
  margin-bottom: 24px;
}

.service-card .link-arrow {
  margin-top: auto;
  align-self: flex-start;
}

/* Value item — the navy "Why choose us" band */
.value-item {
  height: 100%;
  padding: 30px 28px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.value-item:hover {
  border-color: var(--card-border-hover);
  background: var(--card-hover);
  transform: translateY(-4px);
}

.value-item__icon {
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(217, 164, 65, 0.42);
  color: var(--brand-gold);
  margin-bottom: 20px;
}

.value-item h3 {
  font-size: 1.08rem;
  color: #fff;
  margin-bottom: 10px;
}

.value-item p {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Plain bordered card (mission / vision / values / approach) */
.brand-card {
  height: 100%;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: clamp(26px, 2.2vw, 38px);
  transition: border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.brand-card:hover {
  border-color: var(--card-border-hover);
  background: var(--card-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.brand-card h3 {
  margin-bottom: 12px;
}

.brand-card p {
  color: var(--text-muted);
  font-size: var(--fs-small);
  margin-bottom: 0;
}

.brand-card__index {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--brand-gold);
  display: block;
  margin-bottom: 16px;
}

/* Media frame — a hairline separates dark artwork from the dark page */
.media-frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-navy);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: var(--shadow-lg);
}

.media-frame img,
.media-frame svg {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.6s var(--ease);
}

.media-frame--zoom:hover img,
.media-frame--zoom:hover svg {
  transform: scale(1.035);
}

.media-frame::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 76px;
  height: 4px;
  background: var(--brand-gold);
}

/* Benefit list with gold ticks */
.tick-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

.tick-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: var(--fs-small);
  color: var(--text-body);
}

.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--brand-gold);
  border-bottom: 2px solid var(--brand-gold);
  transform: rotate(-45deg);
}

/* ==========================================================================
   9. PROCESS TIMELINE
   ========================================================================== */
.process {
  position: relative;
}

.process-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  position: relative;
}

/* Horizontal connector sits behind the numbered nodes */
.process-track::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(217, 164, 65, 0) 0%,
      rgba(217, 164, 65, 0.55) 12%,
      rgba(217, 164, 65, 0.55) 88%,
      rgba(217, 164, 65, 0) 100%);
}

.process-step {
  position: relative;
  text-align: center;
  padding-inline: 6px;
}

.process-step__node {
  width: 60px;
  height: 60px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-base);
  border: 1px solid rgba(217, 164, 65, 0.6);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
  transition: background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.process-step:hover .process-step__node {
  background: var(--brand-gold);
  color: var(--brand-black);
  transform: translateY(-4px);
}

.process-step h3 {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.process-step p {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

.section--light .process-step__node {
  background: var(--surface-raised);
}

@media (max-width: 991.98px) {
  .process-track {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .process-track::before {
    top: 12px;
    bottom: 40px;
    left: 30px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
        rgba(217, 164, 65, 0) 0%,
        rgba(217, 164, 65, 0.55) 8%,
        rgba(217, 164, 65, 0.55) 92%,
        rgba(217, 164, 65, 0) 100%);
  }

  .process-step {
    text-align: left;
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 20px;
    padding: 0 0 34px;
  }

  .process-step__node {
    margin: 0;
    width: 60px;
    height: 60px;
  }

  .process-step:last-child {
    padding-bottom: 0;
  }
}

/* ==========================================================================
   10. INDUSTRIES
   ========================================================================== */
.industry-tile {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 22px 22px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.industry-tile:hover {
  border-color: var(--card-border-hover);
  background: var(--card-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.industry-tile svg {
  color: var(--brand-blue-light);
  flex: 0 0 auto;
  transition: color var(--dur) var(--ease);
}

.industry-tile:hover svg {
  color: var(--brand-gold);
}

.industry-tile span {
  font-weight: 700;
  font-size: 0.9rem;
  color: #e8edf3;
  letter-spacing: -0.005em;
  line-height: 1.4;
}

/* ==========================================================================
   11. SPLIT / ALTERNATING SECTIONS
   ========================================================================== */
.split-row {
  align-items: center;
}

.split-row+.split-row {
  margin-top: clamp(56px, 5vw, 96px);
}

.split-index {
  font-size: clamp(2.6rem, 4.5vw, 4rem);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.1);
  letter-spacing: -0.04em;
  display: block;
  margin-bottom: 8px;
}

.on-dark .split-index {
  color: rgba(255, 255, 255, 0.1);
}

/* Flow diagram (freight forwarding page) */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.flow-node {
  position: relative;
  text-align: center;
  padding: 30px 20px;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.flow-node:hover {
  border-color: var(--card-border-hover);
  background: var(--card-hover);
}

.flow-node__icon {
  color: var(--brand-gold);
  margin-bottom: 16px;
  display: inline-flex;
}

.flow-node h3 {
  font-size: 0.85rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
}

.flow-node p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}

.flow-node:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  width: 18px;
  height: 1px;
  background: rgba(217, 164, 65, 0.5);
}

@media (max-width: 767.98px) {
  .flow-grid {
    grid-template-columns: 1fr;
  }

  .flow-node:not(:last-child)::after {
    top: auto;
    bottom: -18px;
    right: 50%;
    width: 1px;
    height: 18px;
  }
}

/* Final CTA band */
.cta-band {
  position: relative;
  background: var(--surface-deep);
  overflow: hidden;
  isolation: isolate;
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(56% 78% at 50% 46%, rgba(11, 99, 206, 0.26), transparent 62%),
    linear-gradient(180deg, #04101f, #04080f);
  z-index: -2;
}

.cta-band__globe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1060px, 150%);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

.cta-band__globe svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   12. FORMS
   ========================================================================== */
.form-panel {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: clamp(26px, 3vw, 46px);
  box-shadow: var(--shadow-md);
}

.form-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  margin-bottom: 8px;
}

.form-label .req {
  color: var(--brand-gold);
}

.form-control,
.form-select {
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  font-size: 0.95rem;
  color: var(--text-heading);
  background-color: rgba(0, 0, 0, 0.28);
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.36);
}

/* Bootstrap ships a dark caret — swap it for a light one */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,0.6%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select option {
  background-color: #0d1a2b;
  color: var(--text-heading);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--brand-blue-light);
  background-color: rgba(0, 0, 0, 0.4);
  box-shadow: 0 0 0 3px rgba(77, 154, 230, 0.22);
  color: var(--text-heading);
  outline: none;
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: #ff7a6b;
  background-image: none;
}

.form-select.is-invalid {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28255,255,255,0.6%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(255, 122, 107, 0.22);
}

.field-error {
  display: none;
  font-size: 0.8rem;
  color: #ff9c90;
  margin-top: 6px;
  font-weight: 600;
}

.field-error.is-visible {
  display: block;
}

.form-note {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.form-status {
  display: none;
  margin-top: 20px;
  padding: 15px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.form-status.is-visible {
  display: block;
}

.form-status--ok {
  background: rgba(11, 99, 206, 0.16);
  border-color: rgba(77, 154, 230, 0.45);
  color: #d3e6fb;
}

.form-status--err {
  background: rgba(192, 57, 43, 0.16);
  border-color: rgba(255, 122, 107, 0.45);
  color: #ffc4bb;
}

/* Dark contact panel that carries the detail list */
.contact-panel {
  position: relative;
  height: 100%;
  background: var(--surface-navy);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: clamp(28px, 3vw, 46px);
  overflow: hidden;
  isolation: isolate;
}

.contact-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 80% at 100% 0%, rgba(11, 99, 206, 0.32), transparent 62%),
    radial-gradient(50% 60% at 0% 100%, rgba(217, 164, 65, 0.12), transparent 66%);
  z-index: -1;
}

.contact-panel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 84px;
  height: 4px;
  background: var(--brand-gold);
}

/* Contact detail list */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.contact-list li {
  display: flex;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-dark);
}

.contact-list li:last-child {
  border-bottom: 0;
}

.contact-list__icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  border: 1px solid rgba(217, 164, 65, 0.42);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-gold);
}

.contact-list__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 4px;
}

.contact-list__value {
  margin: 0;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  word-break: break-word;
}

.contact-list__value a {
  color: #fff;
  text-decoration: none;
}

.contact-list__value a:hover {
  color: var(--brand-gold-light);
}

/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--surface-deep);
  color: var(--text-body);
  position: relative;
  isolation: isolate;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 14% 0%, rgba(11, 99, 206, 0.18), transparent 62%);
  z-index: -1;
}

.footer-main {
  padding-block: clamp(52px, 4.4vw, 84px);
}

.footer-logo {
  height: 266px;
  width: auto;
  margin-bottom: 24px;
}

.footer-heading {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 14px;
}

.footer-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  background: var(--brand-gold);
}

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

.footer-links li {
  margin-bottom: 11px;
}

.footer-links a {
  color: var(--text-body);
  text-decoration: none;
  font-size: 0.925rem;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}

.footer-links a:hover {
  color: var(--brand-gold-light);
  padding-left: 5px;
}

.footer-links a:focus-visible {
  outline: 2px solid var(--brand-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer-cta-band {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-block: 30px;
}

.footer-cta-band p {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.45rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0;
}

.footer-bottom {
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
}

.footer-bottom a {
  color: var(--text-body);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--brand-gold-light);
}

/* Back to top */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(217, 164, 65, 0.5);
  background: var(--surface-navy);
  color: var(--brand-gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
  z-index: 1020;
  cursor: pointer;
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.to-top:hover {
  background: var(--brand-gold);
  color: var(--brand-black);
}

.to-top:focus-visible {
  outline: 3px solid var(--brand-gold-light);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 2000;
  background: var(--brand-gold);
  color: var(--brand-black);
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 12px;
}

/* Scrollbar, so the chrome matches the page */
* {
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--surface-deep);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  border: 3px solid var(--surface-deep);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(217, 164, 65, 0.6);
}

::selection {
  background: rgba(217, 164, 65, 0.32);
  color: #fff;
}

/* ==========================================================================
   14. MOTION & REVEAL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal[data-delay="1"] {
  transition-delay: 0.08s;
}

.reveal[data-delay="2"] {
  transition-delay: 0.16s;
}

.reveal[data-delay="3"] {
  transition-delay: 0.24s;
}

.reveal[data-delay="4"] {
  transition-delay: 0.32s;
}

/* No-JS safety: content must never stay hidden */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .reveal {
    opacity: 1;
    transform: none;
  }

  .route-dash {
    animation: none;
    stroke-dasharray: 9 13;
  }

  .pulse-node {
    animation: none;
    opacity: 0.85;
  }

  /* Hero photo settles into its resting state — no drift, sweep or motes */
  .hero-photo img {
    animation: none;
    transform: none;
  }

  .hero-photo__glow {
    animation: none;
    opacity: 0.85;
    transform: none;
  }

  .hero-photo__sweep {
    display: none;
  }

  .hero-photo__motes {
    display: none;
  }

  .hero-photo__ring {
    animation: none;
  }

  .hero-photo__pulse {
    display: none;
  }

  .hero-photo__stage {
    transition: none;
    transform: none !important;
  }
}

/* ==========================================================================
   15. RESPONSIVE REFINEMENTS
   ========================================================================== */

/* Collapsed navigation drawer — below the lg expand breakpoint */
@media (max-width: 991.98px) {
  .site-header .navbar {
    min-height: 76px;
  }

  .brand-logo {
    height: 46px;
  }

  .site-header.is-scrolled .brand-logo {
    height: 40px;
  }

  .site-nav {
    padding: 10px 0 26px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }

  .site-nav .nav-item {
    margin-inline: 0;
  }

  .site-nav .nav-link {
    padding: 14px 2px;
    font-size: 0.82rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .site-nav .nav-link::after {
    display: none;
  }

  .site-nav .nav-link.is-active {
    color: var(--brand-gold-light);
  }

  /* Submenu sits open and indented rather than hiding behind a second tap */
  .nav-caret {
    display: none;
  }

  .has-submenu>.nav-link {
    border-bottom: 0;
  }

  .submenu {
    margin: 4px 0 0 6px;
    padding: 0 0 10px 18px;
    border-left: 1px solid rgba(217, 164, 65, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .submenu a {
    display: block;
    padding: 11px 2px;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.66);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
  }

  .submenu a:hover {
    color: #fff;
  }

  .submenu a.is-active {
    color: var(--brand-gold-light);
  }

  .nav-cta {
    margin: 24px 0 0;
  }

  .nav-cta .btn {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  :root {
    --fs-eyebrow: 0.7rem;
  }

  .hero {
    padding-block: 56px 44px;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .hero-figure {
    margin-top: 38px;
  }

  .btn {
    padding: 14px 24px;
  }

  .btn-lg-brand {
    padding: 15px 26px;
    font-size: 0.875rem;
  }

  .section-head {
    margin-bottom: 30px;
  }

  .media-frame::after {
    width: 54px;
  }

  .footer-logo {
    height: 92px;
  }

  .to-top {
    right: 14px;
    bottom: 14px;
    width: 42px;
    height: 42px;
  }
}

/* Narrow phones — keep the wordmark clear of the hamburger */
@media (max-width: 400px) {
  .brand-logo {
    height: 38px;
  }
}

@media (max-width: 575.98px) {
  .service-card {
    padding: 24px 22px;
  }

  .value-item {
    padding: 24px 22px;
  }

  .industry-tile {
    padding: 18px 16px;
    gap: 13px;
  }

  .contact-list li {
    padding: 18px 0;
    gap: 14px;
  }
}

/* Large desktop — let the grid breathe rather than stretch */
@media (min-width: 1600px) {
  :root {
    --section-y: 128px;
  }
}

/* Print — invert back to ink on paper */
@media print {

  .site-header,
  .site-footer,
  .to-top,
  .hero-figure,
  .cta-band {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  li,
  span {
    color: #000 !important;
  }
}