/* ==========================================================================
   Chronos USA — chronosfulfillment.com
   Shared stylesheet for the 2026 rebuild — "Bold Navy" visual direction
   Colors verified from the real logo (IMG/00-logos/logo-chronos-usa.svg)
   and production CSS var(--red-usa) — see project memory for details.
   Same section order as the first proposal, different visual language:
   navy-forward, floating cards, framed photography, numbered modules.
   ========================================================================== */

:root {
  --navy-dark: #0b465e;
  --navy: #005e7f;
  --navy-darker: #063245;
  --teal: #00a3bf;
  --teal-dark: #00465e;
  --red: #be202f;
  --red-dark: #8f1722;

  --surface-white: #ffffff;
  --surface-light: #f8f8f8;

  --text-dark: #1d1d1f;
  --text-muted: #5b7386;
  --text-on-navy: #ffffff;
  --text-on-navy-muted: #a9c3cf;

  --border-light: #e2e6ea;

  --font-heading: 'Montserrat', 'century-gothic', sans-serif;
  --font-body: 'Open Sans', sans-serif;

  --radius: 4px;
  --max-width: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-dark);
  background: var(--surface-white);
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--navy-darker);
  margin: 0 0 16px;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.01em;
}

section { padding: 88px 0; position: relative; }
.section-alt { background: var(--surface-light); }
.section-dark { background: var(--navy-darker); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark p { color: var(--text-on-navy-muted); }
.section-dark .eyebrow { color: var(--teal); }

.eyebrow {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
  display: block;
}

.section-head {
  max-width: 680px;
  margin: 0 auto 52px;
  text-align: center;
  position: relative;
}
.section-head h2 { display: inline-block; position: relative; padding-bottom: 18px; }
.section-head h2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 4px;
  background: var(--red);
}
.section-head p { color: var(--text-muted); font-size: 17px; margin-top: 8px; }

/* ---------- Buttons ---------- */
.cta-clipped {
  display: inline-block;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  background: var(--red);
  color: #fff;
  padding: 16px 36px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.cta-clipped:hover { background: var(--red-dark); transform: translateY(-2px); }

/* ---------- Outline CTAs ----------
   A real CSS `border` can't follow a clip-path's diagonal corner cuts — the
   border only draws along the box's original straight edges, so the cut
   corner comes out with no stroke ("incomplete" frame). Instead we build the
   outline as two stacked clipped shapes: the button itself is a solid fill
   in the frame color, and an inset ::before layer punches out a smaller
   copy of the same cut-corner shape filled with whatever sits behind the
   button, so the "hole" follows the diagonal too. Each modifier below is
   tuned to the exact background it sits on; on hover the hole fills in
   solid for a clean invert effect. */
.cta-outline--glass,
.cta-outline--teal,
.cta-outline--navy,
.cta-outline--light {
  position: relative;
  isolation: isolate;
}
.cta-outline--glass::before,
.cta-outline--teal::before,
.cta-outline--navy::before,
.cta-outline--light::before {
  content: '';
  position: absolute;
  inset: 2px;
  z-index: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: background 0.15s ease;
}
.cta-outline--glass span,
.cta-outline--teal span,
.cta-outline--navy span,
.cta-outline--light span { position: relative; z-index: 1; }
/* keep the frame color steady on hover — only the inner "hole" (::before) animates */
.cta-outline--glass:hover,
.cta-outline--teal:hover,
.cta-outline--navy:hover { background: #fff; transform: translateY(-2px); }
.cta-outline--light:hover { background: var(--navy-darker); transform: translateY(-2px); }

/* on the hero photo — frosted glass, no solid color needed behind it */
.cta-outline--glass { background: #fff; color: #fff; }
.cta-outline--glass::before { background: rgba(11,70,94,0.55); }
.cta-outline--glass:hover::before { background: rgba(255,255,255,0.9); }
.cta-outline--glass:hover span { color: var(--navy-darker); }

/* on the teal YEGO strip */
.cta-outline--teal { background: #fff; color: #fff; }
.cta-outline--teal::before { background: var(--teal-dark); }
.cta-outline--teal:hover::before { background: #fff; }
.cta-outline--teal:hover span { color: var(--teal-dark); }

/* on the dark navy 3PL teaser */
.cta-outline--navy { background: #fff; color: #fff; }
.cta-outline--navy::before { background: var(--navy-darker); }
.cta-outline--navy:hover::before { background: #fff; }
.cta-outline--navy:hover span { color: var(--navy-darker); }

/* on light-gray teaser sections */
.cta-outline--light { background: var(--navy-darker); color: var(--navy-darker); }
.cta-outline--light::before { background: var(--surface-light); }
.cta-outline--light:hover::before { background: var(--navy-darker); }
.cta-outline--light:hover span { color: #fff; }

.text-link {
  color: var(--red);
  font-weight: 800;
  font-family: var(--font-heading);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
}

/* ---------- Header (dark, logo on white badge) ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 3px solid var(--red);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
}
.site-header .logo { display: inline-flex; }
.site-header .logo img { height: 42px; width: auto; }
.main-nav { display: flex; align-items: center; gap: 26px; }
.main-nav a {
  font-family: var(--font-heading);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy-darker);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a.current { color: var(--red); border-bottom-color: var(--red); }
.main-nav .nav-cta {
  background: var(--red);
  color: #fff !important;
  padding: 10px 22px;
  border-bottom: none !important;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.main-nav .nav-cta:hover { background: var(--red-dark); }

/* Services dropdown */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle::after { content: ' \25BE'; font-size: 10px; }
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 190px;
  padding: 8px 0;
  margin-top: 14px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--red);
  box-shadow: 0 16px 32px rgba(6,50,69,0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 200;
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 20px;
  border-bottom: none !important;
}
.nav-dropdown-menu a:hover { color: var(--red); background: var(--surface-light); }

/* EN / ES language toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 18px;
  margin-left: 4px;
  border-left: 1px solid var(--border-light);
}
.lang-toggle a { padding: 6px 0; border-bottom: 2px solid transparent !important; }
.lang-toggle a.lang-current { color: var(--red); }
.lang-toggle a:not(.lang-current) { color: var(--navy-darker); opacity: 0.45; }
.lang-toggle a:not(.lang-current):hover { opacity: 1; color: var(--red); }
.lang-sep { color: var(--border-light); font-weight: 400; }

/* ==========================================================================
   Hamburger + mobile menu (shared via js/nav.js on every page)
   ========================================================================== */
.hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  background: var(--navy-darker);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  background: #fff;
  padding: 0 28px 40px;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.32s ease, visibility 0s linear 0.32s;
}
.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.32s ease, visibility 0s linear 0s;
}
body.menu-open { overflow: hidden; }

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-light);
}
.mobile-menu-header .logo img { height: 38px; }
.mobile-menu-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  background: #fff;
  color: var(--navy-darker);
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.mobile-menu-close:hover { color: var(--red); border-color: var(--red); }

.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  padding-top: 36px;
  gap: 4px;
}
.mobile-nav > a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy-darker);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}
.mobile-nav > a.current, .mobile-nav > a:hover { color: var(--red); }

.mobile-accordion { border-bottom: 1px solid var(--border-light); }
.mobile-accordion-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy-darker);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mobile-accordion-toggle .chevron { font-size: 13px; transition: transform 0.2s ease; }
.mobile-accordion-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.mobile-accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.mobile-accordion-panel.is-open { max-height: 400px; }
.mobile-accordion-panel a {
  display: block;
  padding: 12px 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15.5px;
  color: var(--text-muted);
}
.mobile-accordion-panel a:hover { color: var(--red); }

.mobile-lang-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
}
.mobile-lang-toggle a.lang-current { color: var(--red); }
.mobile-lang-toggle a:not(.lang-current) { color: var(--navy-darker); opacity: 0.5; }

.mobile-cta {
  display: block;
  text-align: center;
  margin-top: 20px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  background-color: var(--navy-darker);
  background-size: cover;
  background-position: center;
  padding-bottom: 90px; /* room for the floating stat card below */
  overflow: hidden;
}

/* (unused now that the hero is back to a single static aerial photo — kept in
   case a rotating hero is wanted again later) */
.hero-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: hero-crossfade 9s infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 3s; }
.hero-slide:nth-child(3) { animation-delay: 6s; }
@keyframes hero-crossfade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  75%  { opacity: 1; }
  90%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; opacity: 0; }
  .hero-slide:first-child { opacity: 1; }
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  /* Navy on the left for text legibility, fading out to fully transparent on the right
     (no red end-stop) so the rotating photos read clearly. */
  background: linear-gradient(100deg, rgba(6,50,69,0.94) 0%, rgba(6,50,69,0.72) 42%, rgba(6,50,69,0) 100%);
}
.hero .container { position: relative; z-index: 2; }
.hero-content { max-width: 640px; }
.hero .eyebrow { color: var(--teal); }
.hero h1 {
  color: #fff;
  font-size: 46px;
  margin-bottom: 20px;
  text-transform: none;
}
.hero p.lede {
  color: var(--text-on-navy-muted);
  font-size: 19px;
  margin-bottom: 34px;
  max-width: 540px;
}
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-trust {
  margin-top: 36px;
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--text-on-navy-muted);
  font-size: 14px;
}
.hero-trust .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; }

/* ---------- Stats bar: floating card overlapping the hero ---------- */
.stats-bar {
  position: relative;
  z-index: 5;
  margin-top: -70px;
}
.stats-bar .container { max-width: var(--max-width); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 24px 48px rgba(6,50,69,0.25);
  overflow: hidden;
}
.stats-grid .stat {
  padding: 30px 12px;
  border-right: 1px solid var(--border-light);
}
.stats-grid .stat:last-child { border-right: none; }
.stats-grid .stat .num {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 800;
  color: var(--navy-darker);
  display: block;
}
.stats-grid .stat .label {
  color: var(--red);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 6px;
}

/* ---------- Services grid: numbered modules with top accent + peeking photo ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 24px;
  row-gap: 24px; /* fine on desktop since it's a single row of 4 */
  align-items: stretch;
  counter-reset: service;
  padding-top: 110px; /* room for the photos peeking above the cards */
}
.service-item { position: relative; height: 100%; }

/* photo tucked behind the card — most of it shows by default, and it slides
   up further on hover to reveal even more */
.service-photo {
  position: absolute;
  z-index: 0;
  top: -96px;
  left: 14px;
  right: 14px;
  height: 190px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(6,50,69,0.2);
  transition: top 0.25s ease;
}
.service-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9);
}
.service-item:hover .service-photo { top: -128px; }

.service-card {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-light);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 36px 24px 28px;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  counter-increment: service;
}
.service-item:nth-child(4n+2) .service-card { border-top-color: var(--red); }
.service-item:nth-child(4n+3) .service-card { border-top-color: var(--navy); }
.service-item:nth-child(4n+4) .service-card { border-top-color: var(--navy-darker); }
.service-card::before {
  content: "0" counter(service);
  position: absolute;
  top: 18px; right: 20px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 26px;
  color: var(--border-light);
}
.service-item:hover .service-card { box-shadow: 0 16px 32px rgba(6,50,69,0.14); transform: translateY(-4px); }
.service-card h3 { font-size: 19px; margin-bottom: 10px; }
.service-card p { color: var(--text-muted); font-size: 15px; margin-bottom: 18px; flex-grow: 1; }
.service-card .text-link { margin-top: auto; align-self: flex-start; }

/* ---------- Split teaser (photo with a cut corner + accent peeking through) ---------- */
.teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.teaser.reverse .teaser-media { order: 2; }
.teaser.reverse .teaser-copy { order: 1; }
.teaser-media, .location-photo { position: relative; }
.teaser-media img, .location-photo img {
  position: relative;
  z-index: 1;
  box-shadow: 0 24px 44px rgba(6,50,69,0.18);
}
/* the accent triangle sits behind the photo and peeks out through the cut corner */
.teaser-media::after, .location-photo::after {
  content: '';
  position: absolute;
  width: 72px;
  height: 72px;
  z-index: 0;
}

/* ---------- Infrastructure: one card per warehouse ---------- */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.location-card {
  display: block;
  transition: transform 0.2s ease;
}
.location-card:hover { transform: translateY(-4px); }
.location-photo {
  height: 220px;
  margin-bottom: 20px;
}
.location-photo img { width: 100%; height: 100%; object-fit: cover; }
.location-card h3 { font-size: 19px; margin-bottom: 6px; }
.location-card p { color: var(--text-muted); font-size: 15px; margin: 0; }
.locations-cta { text-align: center; margin-top: 48px; }

/* corner cut on the photo itself — varies per teaser so it doesn't feel repetitive */
.corner-tl img { clip-path: polygon(48px 0, 100% 0, 100% 100%, 0 100%, 0 48px); }
.corner-tl::after {
  top: -2px; left: -2px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  background: var(--red);
}

.corner-br img { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 48px), calc(100% - 48px) 100%, 0 100%); }
.corner-br::after {
  bottom: -2px; right: -2px;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  background: var(--teal);
}

.corner-bl img { clip-path: polygon(0 0, 100% 0, 100% 100%, 48px 100%, 0 calc(100% - 48px)); }
.corner-bl::after {
  bottom: -2px; left: -2px;
  clip-path: polygon(0 0, 100% 100%, 0 100%);
  background: var(--navy);
}
.teaser-copy p { color: var(--text-muted); font-size: 16px; margin-bottom: 26px; }
.section-dark .teaser-copy p { color: var(--text-on-navy-muted); }

/* ---------- YEGO strip (angled edges) ---------- */
.yego-strip {
  position: relative;
  overflow: hidden;
  background: var(--teal-dark);
  color: #fff;
  padding: 52px 0;
  clip-path: polygon(0 3%, 100% 0, 100% 97%, 0 100%);
}
.yego-strip .container {
  position: relative;
  z-index: 1;
}
.yego-copy { max-width: 640px; }
.yego-strip h3 { color: #fff; margin-bottom: 8px; }
.yego-strip p { color: var(--text-on-navy-muted); margin: 0 0 24px; }

/* big Yego Fulfillment logo, in white, fully visible as a background watermark */
.yego-bg-logo {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 40px;
  width: 323px;
  height: 323px;
  transform: translateY(-50%);
  filter: brightness(0) invert(1);
  opacity: 0.55;
  pointer-events: none;
}
.yego-bg-logo img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- EON WMS banner: full-bleed photo + blue overlay ---------- */
.eon-banner {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-color: var(--navy-darker);
  overflow: hidden;
}
.eon-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(6,50,69,0.92) 0%, rgba(0,94,127,0.82) 50%, rgba(0,163,191,0.55) 100%);
}
.eon-banner .container { position: relative; z-index: 1; }
.eon-content { max-width: 600px; }
.eon-content .eyebrow { color: var(--teal); }
.eon-content h2 { color: #fff; font-size: 34px; }
.eon-content p { color: var(--text-on-navy-muted); font-size: 17px; margin-bottom: 28px; }

/* ---------- BiZ partner banner: full-bleed photo, same treatment as EON but
   with a red-tinted overlay so it reads as "partner", not "technology" ---------- */
.partner-banner {
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
  background-color: var(--navy-darker);
  overflow: hidden;
}
.partner-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(6,50,69,0.94) 0%, rgba(6,50,69,0.8) 45%, rgba(190,32,47,0.35) 100%);
}
.partner-banner .container { position: relative; z-index: 1; }
.partner-content { max-width: 600px; }
.partner-content .eyebrow { color: var(--red); }
.partner-content h2 { color: #fff; font-size: 30px; }
.partner-content p { color: var(--text-on-navy-muted); font-size: 16.5px; margin: 0; }

/* ---------- Video section (dark) ---------- */
.video-section { background: var(--navy-darker); }
.video-section h2, .video-section .section-head p { color: #fff; }
.video-section .section-head p { color: var(--text-on-navy-muted); }
.video-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; }
.video-embed {
  position: relative;
  padding-top: 56.25%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(0,0,0,0.35);
  border-top: 4px solid var(--red);
  cursor: pointer;
  background: var(--navy-darker);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  border: 3px solid #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}
.video-embed:hover .video-play { background: var(--red-dark); transform: translate(-50%, -50%) scale(1.08); }

/* ---------- FAQ (numbered) ---------- */
.faq-list { max-width: 780px; margin: 0 auto; counter-reset: faq; }
.faq-item {
  border-bottom: 1px solid var(--border-light);
  padding: 24px 0 24px 48px;
  position: relative;
  counter-increment: faq;
}
.faq-item::before {
  content: counter(faq);
  position: absolute;
  left: 0; top: 22px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--navy-darker);
  color: var(--teal);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.faq-item h3 { font-size: 17px; margin-bottom: 8px; color: var(--text-dark); }
.faq-item p { color: var(--text-muted); margin: 0; font-size: 15.5px; }

/* ---------- Client logos (white strip, grayscale-to-color on hover) ---------- */
.logos-section {
  background: #fff;
  overflow: hidden;
  /* FAQ (right above) is also white with no divider, so trim the top padding
     here — otherwise the two sections' padding stacks into one big blank gap */
  padding-top: 24px;
}
.logos-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  animation: scroll-logos 38s linear infinite;
}
.logos-track img {
  height: 34px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.logos-track img:hover { filter: grayscale(0%); opacity: 1; }
@keyframes scroll-logos {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Final CTA band (diagonal red stripe) ---------- */
.cta-band {
  background: var(--navy-dark);
  color: #fff;
  padding: 68px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: 0; right: -10%;
  width: 45%; height: 200%;
  background: rgba(190,32,47,0.18);
  transform: rotate(18deg);
}
.cta-band .container {
  position: relative; z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.cta-band h2 { color: #fff; margin-bottom: 8px; }
.cta-band p { color: var(--text-on-navy-muted); margin: 0 0 4px; }
.cta-band .locations-note { font-size: 14px; margin-top: 14px; }
.cta-band .locations-note a { color: var(--teal); border-bottom: 1px solid var(--teal); }

/* ---------- Photo strip: Houston, Querétaro, SLP ---------- */
.photo-strip {
  display: flex;
  align-items: center;
  height: 100px;
  overflow: hidden;
  background: var(--navy-darker);
}
.photo-strip img {
  height: 100%;
  width: auto;
  flex: 1 1 auto;
  min-width: 110px;
  object-fit: cover;
}

/* ---------- Footer (dark) ---------- */
.site-footer {
  background: var(--navy-darker);
  padding: 48px 0 28px;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 20px;
}
.footer-top .logo {
  background: #fff;
  padding: 8px 14px;
  border-radius: var(--radius);
  display: inline-flex;
}
.footer-top .logo img { height: 34px; }
.social-block { display: flex; align-items: center; gap: 16px; }
.social-label {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
}
.social-links { display: flex; gap: 14px; }
.social-links a {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.social-links a:hover { background: var(--red-dark); }

.footer-sitemap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 20px;
}
.footer-col h4 {
  color: var(--teal);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.footer-col a {
  display: block;
  color: var(--text-on-navy-muted);
  font-size: 14px;
  margin-bottom: 10px;
}
.footer-col a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--text-on-navy-muted);
  font-size: 13px;
}
.footer-bottom a { color: var(--text-on-navy-muted); }
.footer-bottom a:hover { color: var(--teal); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 90px; /* extra clearance so row 2's peeking photo clears row 1's card */
  }
  .service-photo { top: -70px; height: 150px; }
  .service-item:hover .service-photo { top: -95px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-grid .stat:nth-child(2n) { border-right: none; }
  .teaser, .video-grid { grid-template-columns: 1fr; }
  .teaser.reverse .teaser-media, .teaser.reverse .teaser-copy { order: initial; }
  .locations-grid { grid-template-columns: 1fr; gap: 40px; }
  .main-nav { display: none; }
  .hamburger { display: flex; }
  .hero h1 { font-size: 34px; }
  .yego-strip { clip-path: none; }
  .yego-bg-logo { width: 187px; height: 187px; right: 16px; opacity: 0.4; }
}
@media (max-width: 560px) {
  .services-grid {
    grid-template-columns: 1fr;
    row-gap: 70px;
    padding-top: 90px;
  }
  .service-photo { top: -60px; height: 130px; }
  .service-item:hover .service-photo { top: -78px; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  section { padding: 56px 0; }
  .cta-band .container, .footer-top { flex-direction: column; text-align: center; }
  .footer-top { gap: 28px; }
  .social-block { flex-direction: column; gap: 12px; }
  .footer-sitemap { grid-template-columns: 1fr; text-align: center; gap: 24px; }
  .photo-strip { height: 70px; }
  .photo-strip img { min-width: 70px; }
  .hero { padding-bottom: 120px; }
}

/* ==========================================================================
   About Us — page-specific additions (built on the existing tokens/patterns,
   no new colors or fonts introduced)
   ========================================================================== */

/* ---------- Split teaser: History (reuses .teaser core rules above) ---------- */
.teaser-media img { width: 100%; display: block; }

/* ---------- Pillars: Mission / Vision / Values / Quality (numbered cards,
   same visual language as .service-card but no peeking photo) ---------- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: pillar;
}
.pillar-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 30px 22px 26px;
  position: relative;
  height: 100%;
}
.pillars-grid .pillar-card:nth-child(4n+2) { border-top-color: var(--red); }
.pillars-grid .pillar-card:nth-child(4n+3) { border-top-color: var(--navy); }
.pillars-grid .pillar-card:nth-child(4n+4) { border-top-color: var(--navy-darker); }
.pillar-card::before {
  counter-increment: pillar;
  content: "0" counter(pillar);
  position: absolute;
  top: 16px; right: 18px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 24px;
  color: var(--border-light);
}
.pillar-card h3 { font-size: 18px; margin-bottom: 10px; }
.pillar-card p { color: var(--text-muted); font-size: 14.5px; margin: 0; }
.pillar-card ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 14.5px; }
.pillar-card ul li { margin-bottom: 4px; }

/* ---------- Certifications row ---------- */
.cert-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  margin-top: 40px;
}
.cert-item { display: flex; align-items: center; gap: 14px; }
.cert-item img { height: 56px; width: auto; }
.cert-item span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 190px;
  line-height: 1.35;
}

/* ---------- Secondary locations (no photo) — compact rows under the main
   3 photo cards, so all 6 facilities are represented ---------- */
.locations-list {
  max-width: 900px;
  margin: 40px auto 0;
  border-top: 1px solid var(--border-light);
}
.locations-list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.locations-list-item .loc-name {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 15.5px;
  color: var(--navy-darker);
  min-width: 180px;
}
.locations-list-item .loc-type { color: var(--text-muted); font-size: 14px; flex: 1 1 220px; }
.locations-list-item .loc-size { color: var(--red); font-weight: 700; font-size: 14px; white-space: nowrap; }

/* ---------- Team teaser photo (square-ish crop, consistent with corner accents) ---------- */
.team-photo { position: relative; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 24px 44px rgba(6,50,69,0.18); }

/* ---------- Stats bar variant: 4 identity facts instead of 5 throughput metrics ---------- */
.stats-grid--4 { grid-template-columns: repeat(4, 1fr); }
.stats-note {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  margin: 14px 0 0;
}

@media (max-width: 900px) {
  .pillars-grid { grid-template-columns: repeat(2, 1fr); }
  .locations-list-item { flex-direction: column; gap: 4px; }
  .stats-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pillars-grid { grid-template-columns: 1fr; }
  .cert-row { gap: 28px; }
}

/* ==========================================================================
   Fulfillment — page-specific additions (built on the existing tokens/patterns,
   no new colors or fonts introduced)
   ========================================================================== */

/* ---------- Pillar icon (used when a .pillar-card needs a small icon above
   the heading instead of, or in addition to, the numbered corner badge —
   e.g. the "We Connect / We Store / We Ship / We Track" process steps) ---------- */
.pillar-card .pillar-icon {
  height: 84px;
  width: auto;
  margin-bottom: 18px;
}

/* ---------- Testimonial split (client photo + quote, two columns —
   used on a dark section whose background-color is set inline to match
   the client photo's own background, e.g. var(--navy) for Chilito Sirilo) ---------- */
.testimonial-split blockquote {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  line-height: 1.5;
}
.testimonial-split blockquote::before {
  content: '\201C';
  display: block;
  font-family: Georgia, serif;
  font-size: 60px;
  color: var(--teal);
  line-height: 1;
  margin-bottom: -12px;
}
.testimonial-split cite {
  display: block;
  font-style: normal;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-on-navy-muted);
}

@media (max-width: 560px) {
  .testimonial-split blockquote { font-size: 17px; }
}

/* ==========================================================================
   3PL — page-specific additions (built on the existing tokens/patterns,
   no new colors or fonts introduced)
   ========================================================================== */

/* ---------- Service tiles: photo on top, copy below, 3 per row ---------- */
.svc-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.svc-tile {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.svc-tile:hover { box-shadow: 0 16px 32px rgba(6,50,69,0.14); transform: translateY(-4px); }
.svc-tile-photo { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 4px solid var(--teal); }
.svc-tiles .svc-tile:nth-child(3n+2) .svc-tile-photo { border-bottom-color: var(--red); }
.svc-tiles .svc-tile:nth-child(3n+3) .svc-tile-photo { border-bottom-color: var(--navy); }
.svc-tile-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.svc-tile:hover .svc-tile-photo img { transform: scale(1.04); }
.svc-tile-body { padding: 22px 22px 24px; }
.svc-tile-body h3 { font-size: 18px; margin-bottom: 8px; }
.svc-tile-body p { color: var(--text-muted); font-size: 14.5px; margin: 0; }

/* partner-banner reused for the cross-border block: allow a CTA paragraph */
.partner-content p + p { margin-top: 24px; }

@media (max-width: 900px) {
  .svc-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .svc-tiles { grid-template-columns: 1fr; }
}
/* keep pillar titles clear of the corner counter (01, 02…) */
.pillar-card h3 { padding-right: 36px; }
.faq-item p a { color: var(--navy); text-decoration: underline; font-weight: 600; }
/* stats bar used for feature highlights instead of numbers (3PL page) */
.stats-grid--features .stat .num { font-size: 21px; line-height: 1.25; }
@media (max-width: 900px) { .stats-grid--features .stat .num { font-size: 18px; } }

/* ---------- 3PL: plain teaser image (transparent PNG, no shadow/accent) ---------- */
.teaser-media--plain img { box-shadow: none; }
.teaser-media--plain::after { display: none; }

/* ---------- 3PL: Houston facility (photo mosaic + spec cards) ---------- */
.facility-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
}
.facility-photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.facility-photos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.facility-photos .facility-photo-main {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
  box-shadow: 0 24px 44px rgba(6,50,69,0.18);
}
.facility-specs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.spec-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
}
.facility-specs .spec-card:nth-child(4n+2),
.facility-specs .spec-card:nth-child(4n+3) { border-left-color: var(--red); }
.spec-num {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 28px;
  line-height: 1.1;
  color: var(--navy-darker);
}
.spec-label {
  color: var(--red);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}
.spec-sub { color: var(--text-muted); font-size: 13.5px; margin-top: 4px; line-height: 1.45; }

/* heavy-duty banner reuses .eon-banner, with a slightly darker overlay so copy stays legible */
.hd-banner::before { background: linear-gradient(100deg, rgba(6,50,69,0.95) 0%, rgba(6,50,69,0.85) 45%, rgba(0,94,127,0.45) 100%); }

@media (max-width: 900px) {
  .facility-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .spec-num { font-size: 24px; }
}
.teaser-media--plain img { transform: scale(1.18); transform-origin: center; }
@media (max-width: 900px) { .teaser-media--plain img { transform: none; } }
.hd-banner .hd-logo { height: 110px; width: auto; margin-bottom: 22px; }
@media (max-width: 560px) { .hd-banner .hd-logo { height: 84px; } }

/* ---------- Storage page ---------- */
.pillars-grid--3 { grid-template-columns: repeat(3, 1fr); }
.svc-tiles--4 { grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pillar-card p a { color: var(--navy); text-decoration: underline; font-weight: 600; }
.section-foot-link { text-align: center; margin-top: 36px; }
@media (max-width: 900px) {
  .pillars-grid--3 { grid-template-columns: 1fr; }
  .svc-tiles--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .svc-tiles--4 { grid-template-columns: 1fr; }
}

/* Storage: EON teaser over the chip background (navy overlay, white copy) */
.eon-split { padding: 96px 0; min-height: 0; background-position: center; }
.eon-split::before { background: linear-gradient(100deg, rgba(6,50,69,0.95) 0%, rgba(0,94,127,0.86) 50%, rgba(0,94,127,0.55) 100%); }
.eon-split .teaser-copy h2 { color: #fff; }
.eon-split .teaser-copy p { color: var(--text-on-navy-muted); }
.eon-split .teaser-copy strong { color: #fff; }
.eon-split .teaser-copy .eyebrow { color: var(--teal); }
.eon-split .text-link { color: #fff; border-color: var(--teal); }
.eon-split .teaser-media--plain img { filter: drop-shadow(0 24px 40px rgba(0,0,0,0.35)); }
@media (max-width: 900px) { .eon-split { padding: 64px 0; } }

/* ---------- Foreign Trade: T1 flow steps + check list ---------- */
.flow-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  counter-reset: none;
}
.flow-step {
  position: relative;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-top: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 24px 20px 22px;
}
.flow-step:nth-child(5), .flow-step:nth-child(6) { border-top-color: var(--red); }
.flow-step:nth-child(7) { border-top-color: #fff; }
.flow-num {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  color: var(--teal);
  margin-bottom: 14px;
}
.section-dark .flow-step h3 { font-size: 17px; margin-bottom: 8px; }
.section-dark .flow-step p { font-size: 14px; margin: 0; }
.flow-tag {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--navy);
  padding: 4px 10px;
  border-radius: 2px;
}
.flow-note {
  margin: 28px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 14px;
}
.check-list { list-style: none; margin: 20px 0 0; padding: 0; }
.check-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  color: var(--text-dark);
  font-weight: 600;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 16px; height: 9px;
  border-left: 3px solid var(--teal);
  border-bottom: 3px solid var(--teal);
  transform: rotate(-45deg);
}
@media (max-width: 900px) { .flow-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .flow-steps { grid-template-columns: 1fr; } }
.section-dark .section-head p { color: #c9dbe3; }
.flow-step--cta {
  background: var(--teal-dark);
  border-top-color: var(--red) !important;
  display: flex; flex-direction: column; justify-content: center;
}
.flow-step--cta .cta-clipped { margin-top: 18px; align-self: flex-start; }
.channel-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.channel-chips span {
  font-family: var(--font-heading); font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255,255,255,0.35); padding: 6px 14px; border-radius: 2px;
}

/* ---------- FBA Prep page (fba-prep.html) ---------- */
.fba-strategy { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.fba-strategy-copy h2 { margin-bottom: 18px; }
.fba-strategy-copy p { color: var(--text-muted); }
.fba-compare { display: grid; gap: 18px; }
.fba-compare-card {
  background: #fff; border: 1px solid var(--border-light); border-left: 4px solid var(--border-light);
  border-radius: var(--radius); padding: 22px 24px;
}
.fba-compare-card--win {
  background: var(--navy-darker); border-color: var(--navy-darker); border-left-color: var(--red);
  box-shadow: 0 14px 34px rgba(6, 50, 69, .22); transform: translateX(-14px);
}
.fba-compare-tag {
  display: inline-block; font-family: var(--font-heading); font-weight: 700; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 12px;
}
.fba-compare-card--win .fba-compare-tag { color: var(--teal); }
.fba-compare-card ul { list-style: none; margin: 0; padding: 0; }
.fba-compare-card li { position: relative; padding-left: 26px; margin-bottom: 8px; font-size: 14.5px; color: var(--text-muted); }
.fba-compare-card li:last-child { margin-bottom: 0; }
.fba-compare-card li::before { content: "\2715"; position: absolute; left: 0; top: 0; color: #b3bec7; font-weight: 700; font-size: 13px; }
.fba-compare-card--win li { color: #fff; }
.fba-compare-card--win li::before { content: "\2713"; color: var(--teal); font-size: 15px; }

.beyond-grid {
  display: grid; grid-template-columns: 1fr 1.15fr 1fr; grid-template-rows: auto auto;
  column-gap: 28px; align-items: start; counter-reset: pillar; padding-bottom: 56px;
}
.beyond-visual {
  grid-column: 2; grid-row: 1; justify-self: center;
  width: 100%; max-width: 360px; height: auto; margin-bottom: 8px;
  filter: drop-shadow(0 14px 24px rgba(6, 50, 69, .16));
}
.beyond-grid .pillar-card { height: auto; grid-row: 2; }
.beyond-left { grid-column: 1; }
.beyond-main { grid-column: 2; border-top-color: var(--red) !important; box-shadow: 0 16px 36px rgba(6, 50, 69, .12); }
.beyond-right { grid-column: 3; border-top-color: var(--navy) !important; }
.beyond-side { transform: translateY(56px); }
.beyond-left { border-top-color: var(--teal) !important; }

@media (max-width: 900px) {
  .fba-strategy { grid-template-columns: 1fr; gap: 36px; }
  .fba-compare-card--win { transform: none; }
  .beyond-grid { grid-template-columns: 1fr; row-gap: 18px; padding-bottom: 0; }
  .beyond-visual, .beyond-grid .pillar-card { grid-column: 1; grid-row: auto; }
  .beyond-visual { max-width: 300px; }
  .beyond-side { transform: none; }
}

/* Hero variant: navy vignette from the edges, transparent in the center (fba-prep.html) */
.hero--vignette::before {
  background:
    radial-gradient(ellipse 58% 72% at 62% 48%, rgba(6,50,69,0) 0%, rgba(6,50,69,0.18) 38%, rgba(6,50,69,0.62) 70%, rgba(6,50,69,0.94) 100%),
    linear-gradient(90deg, rgba(6,50,69,0.55) 0%, rgba(6,50,69,0.2) 45%, rgba(6,50,69,0) 60%);
}
.hero--vignette h1, .hero--vignette p.lede { text-shadow: 0 2px 14px rgba(6,50,69,.55); }
@media (max-width: 900px) {
  .hero--vignette::before {
    background:
      radial-gradient(ellipse 80% 60% at 50% 50%, rgba(6,50,69,0.35) 0%, rgba(6,50,69,0.7) 65%, rgba(6,50,69,0.95) 100%);
  }
}

/* ---------- EON System page (eon-system.html) ---------- */
.hero--eon { background-position: 70% center; }
.hero--eon::before { background: linear-gradient(100deg, rgba(6,50,69,0.96) 0%, rgba(6,50,69,0.85) 40%, rgba(6,50,69,0.25) 75%, rgba(6,50,69,0.05) 100%); }
.teaser-media--noscale img { transform: none !important; }
.eon-map { display: block; width: 100%; max-width: 1080px; height: auto; margin: 0 auto 40px; }
.eon-chip-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.eon-chip-group { background: var(--surface-light); border: 1px solid var(--border-light); border-top: 4px solid var(--teal); border-radius: var(--radius); padding: 22px 20px; }
.eon-chip-group h3 { font-size: 16px; margin: 0; text-align: center; }
.eon-chip-group .channel-chips { margin-top: 14px; }
.channel-chips--light span { color: var(--navy-dark); border-color: var(--border-light); background: #fff; }
.eon-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.eon-tier { background: #fff; border: 1px solid var(--border-light); border-top: 4px solid var(--navy); border-radius: var(--radius); padding: 26px 22px; }
.eon-tier--included { border-top-color: var(--teal); }
.eon-tier h3 { font-size: 17px; margin: 12px 0 8px; }
.eon-tier p { color: var(--text-muted); font-size: 14.5px; margin: 0; }
.eon-tier-tag { display: inline-block; font-family: var(--font-heading); font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--navy); padding: 4px 10px; border-radius: 2px; }
.eon-tier--included .eon-tier-tag { background: var(--teal); }
.eon-screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.eon-screen { margin: 0; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius); overflow: hidden; }
.eon-screen img { display: block; width: 100%; height: auto; border-bottom: 1px solid rgba(255,255,255,0.12); }
.eon-screen figcaption { padding: 20px 20px 22px; }
.section-dark .eon-screen h3 { font-size: 17px; margin: 0 0 6px; }
.section-dark .eon-screen p { font-size: 14px; margin: 0; }
.flow-steps--light .flow-step { background: #fff; border: 1px solid var(--border-light); border-top: 4px solid var(--teal); }
.flow-steps--light .flow-step h3 { font-size: 17px; margin-bottom: 8px; }
.flow-steps--light .flow-step p { color: var(--text-muted); font-size: 14px; margin: 0; }
.eon-services .section-head { margin-left: auto; margin-right: auto; }
.eon-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.eon-link { display: block; text-decoration: none; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); border-top: 4px solid var(--teal); border-radius: var(--radius); padding: 24px 20px; transition: background .2s, transform .2s; }
.eon-link:hover { background: rgba(255,255,255,0.14); transform: translateY(-3px); }
.eon-link h3 { color: #fff; font-size: 17px; margin: 0 0 6px; }
.eon-link h3::after { content: ' →'; color: var(--teal); }
.eon-link p { color: var(--text-on-navy-muted); font-size: 14px; margin: 0; }
@media (max-width: 900px) {
  .eon-chip-groups, .eon-screens { grid-template-columns: 1fr; }
  .eon-tiers, .eon-links { grid-template-columns: repeat(2, 1fr); }
  .hero--eon::before { background: linear-gradient(180deg, rgba(6,50,69,0.9) 0%, rgba(6,50,69,0.85) 100%); }
}
@media (max-width: 560px) { .eon-tiers, .eon-links { grid-template-columns: 1fr; } }
.eon-services .section-head .eyebrow { color: var(--teal); }

/* ==========================================================================
   Contact page (contact-us.html / es/contact-us.html)
   ========================================================================== */
.hero--contact { min-height: 480px; padding-bottom: 60px; }

.contact-section { padding-top: 72px; }
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.contact-form-card {
  background: var(--surface-white);
  border: 1px solid var(--border-light);
  border-top: 4px solid var(--red);
  padding: 40px;
  box-shadow: 0 18px 40px rgba(6, 50, 69, 0.08);
}
.contact-form-card h2 { margin-bottom: 8px; }
.contact-form-intro { color: var(--text-muted); font-size: 15px; margin: 0 0 28px; }

.contact-form { display: flex; flex-direction: column; gap: 18px; }
.contact-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-form label {
  display: block;
  font-family: var(--font-heading);
  font-size: 13px; font-weight: 700;
  color: var(--navy-darker);
  letter-spacing: 0.02em;
}
.contact-form .req { color: var(--red); }
.contact-form .opt { color: var(--text-muted); font-weight: 600; font-family: var(--font-body); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 400;
  color: var(--text-dark);
  background: var(--surface-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 12px 14px;
  width: 100%;
  display: block;
  margin-top: 6px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--teal);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 163, 191, 0.15);
}
.contact-form .form-privacy { font-size: 13px; color: var(--text-muted); margin: 0; }
.contact-form .form-privacy a { color: var(--navy); border-bottom: 1px solid currentColor; }
.contact-form button.cta-clipped { align-self: flex-start; border: 0; cursor: pointer; }
.contact-form .form-notice {
  margin: 0; font-size: 14px;
  color: var(--navy-darker);
  background: rgba(0, 163, 191, 0.1);
  border-left: 3px solid var(--teal);
  padding: 10px 14px;
}

.contact-channels { display: flex; flex-direction: column; gap: 14px; }
.contact-channels h3 { font-size: 20px; margin-bottom: 6px; }
.channel {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--navy-darker);
  color: #fff;
  padding: 20px 22px;
  transition: transform 0.15s ease, background 0.15s ease;
}
a.channel:hover { background: var(--navy-dark); transform: translateY(-2px); }
.channel--static { background: var(--surface-light); color: var(--text-dark); border: 1px solid var(--border-light); }
.channel-icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}
.channel--static .channel-icon { background: var(--teal); }
.channel-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel-label {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--teal);
}
.channel strong { font-size: 17px; overflow-wrap: anywhere; }
.channel-sub { font-size: 13px; color: var(--text-on-navy-muted); }
.channel--static strong { font-size: 15px; font-weight: 600; }

.contact-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.contact-step {
  background: #fff;
  border: 1px solid var(--border-light);
  padding: 30px 28px;
}
.contact-step-num {
  display: block;
  font-family: var(--font-heading); font-weight: 800; font-size: 34px;
  color: var(--red); line-height: 1; margin-bottom: 14px;
}
.contact-step h3 { font-size: 18px; margin-bottom: 8px; }
.contact-step p { color: var(--text-muted); font-size: 15px; margin: 0; }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .contact-steps { grid-template-columns: 1fr; gap: 16px; }
  .hero--contact { min-height: 420px; }
}
@media (max-width: 560px) {
  .contact-form-card { padding: 26px 20px; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .contact-form button.cta-clipped { align-self: stretch; text-align: center; }
  .channel { padding: 18px 16px; gap: 14px; }
  .channel strong { font-size: 15px; }
}

/* ==========================================================================
   Language: footer switch + browser-language suggestion bar (js/nav.js)
   ========================================================================== */
.footer-lang a { color: var(--text-on-navy-muted); }
.footer-lang a.lang-current { color: #fff; font-weight: 700; }

.lang-suggest {
  position: fixed;
  left: 50%; bottom: 20px;
  transform: translate(-50%, 24px);
  opacity: 0;
  z-index: 900;
  width: min(560px, calc(100% - 32px));
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--navy-darker);
  color: #fff;
  padding: 16px 48px 16px 20px;
  border-left: 4px solid var(--red);
  box-shadow: 0 14px 34px rgba(6, 50, 69, 0.3);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lang-suggest.is-visible { opacity: 1; transform: translate(-50%, 0); }
.lang-suggest p { margin: 0; font-size: 15px; font-weight: 600; flex: 1 1 220px; color: #fff; }
.lang-suggest-actions { display: flex; gap: 14px; align-items: center; }
.lang-suggest-go {
  background: var(--red); color: #fff !important;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 9px 14px;
}
.lang-suggest-go:hover { background: var(--red-dark); }
.lang-suggest-stay {
  background: none; border: 0; cursor: pointer; padding: 0;
  color: var(--text-on-navy-muted); font-size: 13px; text-decoration: underline;
  font-family: var(--font-body);
}
.lang-suggest-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; cursor: pointer;
  color: var(--text-on-navy-muted); font-size: 22px; line-height: 1;
}
@media (prefers-reduced-motion: reduce) { .lang-suggest { transition: none; } }

/* Elya form embed on the contact page */
.elya-form-slot { min-height: 568px; }
.elya-form-slot iframe { min-height: 568px; display: block; }