/* ============================================================
   BLS — Bolivian Logistics Services
   Maersk-style UI system · static · single stylesheet
   BRAND COLORS: change the 8 variables below to match brand.
   ============================================================ */

:root{
  /* ---- brand palette (Maersk-inspired refresh, 2026-08-20: refined
     orange + a new ocean-blue accent, deeper navy, rounder radius) ---- */
  --brand-dark:  #2E3240;   /* BLS dark slate — footer, heroes, headings */
  --brand:       #FF6F00;   /* BLS orange — buttons, accents            */
  --brand-hover: #D4550A;   /* darker orange — hover states             */
  --brand-link:  #22729D;   /* ocean blue — text links, second accent   */
  --brand-light: #FF8A2B;   /* light orange — accents on dark           */
  --brand-pale:  #FFF1E5;   /* pale orange — tinted bands, icon chips   */
  --bg-alt:      #F3F4F5;   /* alternate section background (from #D3D6D8) */
  --border:      #D3D6D8;   /* card & divider borders                  */
  --border-dk:   #B0BEC5;

  --text:   #23262F;
  --muted:  #5A6069;
  --muted-2:#767676;
  --on-dark:#FFFFFF;
  --on-dark-muted:#B0BEC5;

  --wrap: 1200px;
  --radius: 8px;

  --fs-hero:  clamp(2.1rem, 1.2rem + 3.4vw, 3.4rem);
  --fs-h1:    clamp(1.9rem, 1.2rem + 2.4vw, 2.8rem);
  --fs-h2:    clamp(1.45rem, 1.1rem + 1.3vw, 2rem);
  --fs-h3:    1.2rem;
  --fs-body:  1rem;
  --fs-small: .875rem;

  --ease: cubic-bezier(.25,.6,.35,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Figtree", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--text);
  background:#fff;
  overflow-x:clip;
}
/* overflow-x:clip (not hidden): the .bls-header/.menu 100vw breakout
   tricks intentionally overhang the viewport by a scrollbar's width on
   pages with a vertical scrollbar — clip trims that without creating a
   new scroll container, which is what made position:fixed behave
   inconsistently when this was overflow-x:hidden. Never switch this back
   to hidden/auto/scroll on body or html. */
img,svg{ max-width:100%; display:block; }
a{ color:var(--brand-link); }
button{ font:inherit; }

h1,h2,h3,h4{
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.18;
  color:var(--brand-dark);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); font-weight:650; }
h2{ font-size:var(--fs-h2); }
h3{ font-size:var(--fs-h3); }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.wrap{ width:min(var(--wrap), 100% - 2.5rem); margin-inline:auto; }

.eyebrow{
  display:block;
  font-size:.8rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand-link);
  margin-bottom:.75rem;
}
.on-dark .eyebrow{ color:var(--brand-light); }
.code{ font-family:ui-monospace, Menlo, Consolas, monospace; font-size:.9em; }

/* ============================================================
   HEADER — white, slim, Maersk-style
   ============================================================ */
.bls-header{
  /* Fixed + the 100vw/centered-transform trick, not sticky+left:0/right:0
     — verified by direct measurement to be the only combination that
     reliably reaches the true full viewport width regardless of
     whatever .bls-header's containing block turns out to be on a given
     page. This is now the header for every page site-wide, not just
     Home — see header.php/footer.php for why. */
  position:fixed; top:0; left:50%; width:100vw; transform:translateX(-50%);
  z-index:60;
  background:#fff;
  border-bottom:1px solid var(--border);
}
/* Since the header is fixed (out of normal flow), page content needs
   compensating top space equal to its height so nothing renders hidden
   underneath it. Home's own hero has its own generous top padding and
   wants the header to overlay it transparently instead, so it opts out. */
main{ padding-top:80px; }
body.home-hero main{ padding-top:0; }
.header-inner{
  display:flex; align-items:center; gap:1.75rem;
  min-height:80px;
}
.brand{
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; margin-right:.5rem; flex-shrink:0;
}
.brand-mark{ width:36px; height:36px; flex-shrink:0; }
.brand-name{
  font-weight:750; font-size:1.3rem;
  letter-spacing:.01em; color:var(--brand-dark); line-height:1;
}
.brand-sub{
  display:block; font-weight:500;
  font-size:.56rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2); margin-top:.2rem;
}

.nav{ display:flex; align-items:center; gap:.1rem; margin-right:auto; }
.nav-link{
  position:relative;
  display:inline-flex; align-items:center; gap:.3rem;
  padding:1.35rem .85rem; border:0; background:none; cursor:pointer;
  text-decoration:none;
  font-weight:500; font-size:.95rem; color:var(--text);
  transition:color .15s var(--ease);
}
.nav-link:focus,
.nav-link:active,
.nav-item.open > .nav-link{ background:none !important; box-shadow:none !important; outline:none; }
.nav-link::after{
  content:""; position:absolute; left:.85rem; right:.85rem; bottom:0;
  height:3px; background:var(--brand); opacity:0;
  transition:opacity .15s var(--ease);
}
.nav-link:hover{ color:var(--brand-link); }
.nav-link:hover::after{ opacity:.5; }
.nav-item.open > .nav-link{ color:var(--brand-link); }
.nav-item.open > .nav-link::after{ opacity:1; }
.nav-link .caret{ transition:transform .2s var(--ease); color:var(--muted-2); }
.nav-item.open > .nav-link .caret{ transform:rotate(180deg); }
.nav-item{ position:static; }
/* Services/Support nav-link now navigates to the hub page directly; the
   caret inside it is purely decorative on desktop (hover opens the menu).
   A separate small toggle button opens the menu without navigating —
   hidden on desktop, shown next to the link on mobile where there's no
   hover. */
.nav-caret-toggle{
  display:none; border:0; background:none; cursor:pointer; padding:.4rem;
  color:var(--muted-2); align-items:center; justify-content:center;
}

/* full-width mega menu panel — break out of the centered .header-inner to
   span the full viewport regardless of which ancestor ends up being the
   actual containing block (classic "centered container breakout" trick,
   robust either way since .header-inner shares the viewport's center) */
.menu{
  /* verified by direct measurement in a real browser: left:0/right:0 alone
     (relying on .bls-header being a true full-viewport containing block)
     was NOT reliable, so this uses the same 100vw+centered-transform trick
     as .bls-header — it doesn't depend on any ancestor's box being
     correct, only on being roughly centered on the page, which it is. */
  position:absolute; left:50%; width:100vw; transform:translateX(-50%); top:100%;
  background:#fff; border-bottom:1px solid var(--border);
  box-shadow:0 18px 30px -18px rgba(0,36,61,.25);
  padding:2rem 0 2.25rem;
  opacity:0; visibility:hidden; pointer-events:none;
  translate:0 -6px;
  transition:opacity .18s var(--ease), translate .18s var(--ease), visibility .18s;
}
.nav-item.open > .menu{
  opacity:1; visibility:visible; pointer-events:auto; translate:0 0;
}
.menu-cols{
  width:min(var(--wrap), 100% - 2.5rem); margin-inline:auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem 3rem;
}
.menu-cols.cols-1{ grid-template-columns:minmax(0,420px); }
.menu-group-label{
  font-size:.75rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);
  margin:0 0 .8rem; padding-bottom:.6rem;
  border-bottom:1px solid var(--border);
}
.menu-group{ display:flex; flex-direction:column; }
.menu a{
  display:block; padding:.6rem 0;
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.menu a b{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:550; color:var(--text); font-size:.95rem;
  transition:color .15s var(--ease);
}
.menu a:hover b{ color:var(--brand-link); }
.menu a span{ display:block; font-size:.82rem; color:var(--muted); margin-top:.1rem; }
.menu-promo{
  width:min(var(--wrap), 100% - 2.5rem); margin:1.6rem auto 0;
  display:flex; align-items:center; gap:1.5rem;
  padding:1.25rem; background:var(--bg-alt); border-radius:var(--radius);
}
.menu-promo img{ width:210px; height:115px; object-fit:cover; border-radius:6px; flex-shrink:0; }
.menu-promo h5{ margin:0 0 .35rem; font-size:1rem; font-weight:650; color:var(--text); }
.menu-promo p{ margin:0 0 .9rem; font-size:.85rem; color:var(--muted); max-width:30em; line-height:1.5; }
.menu-promo .btn{ padding:.6rem 1.1rem; font-size:.85rem; }

/* ============================================================
   HOME HERO HEADER — transparent over the hero photo, solidifies on
   scroll or while a mega-menu / language dropdown is open.
   ============================================================ */
body.home-hero .bls-header{
  /* position/width/z-index are already the base .bls-header rule now —
     Home only needs to override the color treatment for the transparent
     overlay-on-photo look. */
  background:transparent;
  border-bottom-color:rgba(255,255,255,.18);
}
body.home-hero .bls-header .brand-name{ color:#fff; }
body.home-hero .bls-header .nav-link{ color:#fff; }
body.home-hero .bls-header .nav-link .caret{ color:rgba(255,255,255,.75); }
body.home-hero .bls-header .nav-caret-toggle{ color:rgba(255,255,255,.75); }
body.home-hero .bls-header .lang{ color:#fff; }
body.home-hero .bls-header .lang-btn{ color:#fff; }
body.home-hero .bls-header .lang-btn .caret{ color:rgba(255,255,255,.75); }
body.home-hero .bls-header .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
body.home-hero .bls-header .btn-outline:hover{ background:rgba(255,255,255,.12); }
body.home-hero .bls-header .nav-toggle{ border-color:rgba(255,255,255,.5); color:#fff; }

/* Solid-white state — driven by .menu-open (JS, reliable) with .scrolled
   and :has() as belt-and-suspenders for browsers/paths that support them. */
body.home-hero .bls-header.scrolled,
body.home-hero .bls-header.menu-open,
body.home-hero .bls-header:has(.nav-item.open),
body.home-hero .bls-header:has(.lang-item.open){
  background:#fff; border-bottom-color:var(--border);
  box-shadow:0 1px 0 var(--border);
}
body.home-hero .bls-header.scrolled .brand-name, body.home-hero .bls-header.menu-open .brand-name,
body.home-hero .bls-header.scrolled .nav-link, body.home-hero .bls-header.menu-open .nav-link,
body.home-hero .bls-header.scrolled .lang, body.home-hero .bls-header.menu-open .lang,
body.home-hero .bls-header.scrolled .lang-btn, body.home-hero .bls-header.menu-open .lang-btn{
  color:var(--text);
}
body.home-hero .bls-header.scrolled .nav-link .caret, body.home-hero .bls-header.menu-open .nav-link .caret,
body.home-hero .bls-header.scrolled .nav-caret-toggle, body.home-hero .bls-header.menu-open .nav-caret-toggle,
body.home-hero .bls-header.scrolled .lang-btn .caret, body.home-hero .bls-header.menu-open .lang-btn .caret{
  color:var(--muted-2);
}
body.home-hero .bls-header.scrolled .btn-outline, body.home-hero .bls-header.menu-open .btn-outline{
  background:#fff; color:var(--brand-link); border-color:var(--brand);
}
body.home-hero .bls-header.scrolled .nav-toggle, body.home-hero .bls-header.menu-open .nav-toggle{
  border-color:var(--border); color:var(--brand-dark);
}
/* !important: Elementor's global kit CSS (loaded site-wide) applies its
   own accent color to bare <a>/<button> hover/focus states, with enough
   specificity to leak a pink background through our nav controls. */
.nav-link:hover, .nav-link:focus, .nav-link:focus-visible, .nav-link:active,
.nav-caret-toggle:hover, .nav-caret-toggle:focus, .nav-caret-toggle:focus-visible, .nav-caret-toggle:active,
.nav-toggle:hover, .nav-toggle:focus, .nav-toggle:focus-visible, .nav-toggle:active,
.lang-btn:hover, .lang-btn:focus, .lang-btn:focus-visible, .lang-btn:active{
  background:none !important; box-shadow:none !important; outline:none !important;
}
/* Same Elementor-bleed issue on the .btn family (widget "Track" button
   included) — these DO have a real background by design, so reinforce
   the correct one per variant instead of clearing it to none. */
.btn-solid:hover, .btn-solid:focus, .btn-solid:focus-visible, .btn-solid:active,
.btn-amber:hover, .btn-amber:focus, .btn-amber:focus-visible, .btn-amber:active{
  background:var(--brand-hover) !important; border-color:var(--brand-hover) !important; color:#fff !important; box-shadow:none !important; outline:none !important;
}
.btn-outline:hover, .btn-outline:focus, .btn-outline:focus-visible, .btn-outline:active{
  background:var(--brand-pale) !important; color:var(--brand-link) !important; border-color:var(--brand) !important; box-shadow:none !important; outline:none !important;
}
.btn-ghost:hover, .btn-ghost:focus, .btn-ghost:focus-visible, .btn-ghost:active{
  background:rgba(255,255,255,.12) !important; color:#fff !important; box-shadow:none !important; outline:none !important;
}
.widget-tab.active:hover, .widget-tab.active:focus, .widget-tab.active:focus-visible, .widget-tab.active:active{
  background:none !important; color:var(--brand-dark) !important; box-shadow:none !important; outline:none !important;
}

@media (max-width:880px){
  /* Same fixed+full-bleed treatment as desktop (position:sticky's width
     follows normal block flow, which can end up narrower than the
     viewport depending on ancestor wrapping — fixed sidesteps that
     ambiguity entirely, same fix that solved this on desktop). */
  body.home-hero .bls-header{ background:#fff; border-bottom-color:var(--border); }
  body.home-hero .bls-header .brand-name,
  body.home-hero .bls-header .nav-toggle{ color:var(--brand-dark); }
  body.home-hero .bls-header .nav-toggle{ border-color:var(--border); }
  /* The mobile drawer (.nav) always has a white background — its links
     must stay dark regardless of the transparent-over-hero header state,
     or they render invisible (white text on the drawer's white bg). */
  body.home-hero .bls-header .nav-link,
  body.home-hero .bls-header .lang{ color:var(--text); }
  body.home-hero .bls-header .nav-link .caret,
  body.home-hero .bls-header .nav-caret-toggle{ color:var(--muted-2); }
}

.header-actions{ display:flex; align-items:center; gap:.9rem; flex-shrink:0; }
.lang{
  font-size:.85rem; font-weight:550; letter-spacing:.03em;
  text-decoration:none; color:var(--text);
  padding:.45rem .4rem;
}
.lang:hover{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }

/* buttons — rectangular, Maersk-flat */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1.5rem; border-radius:var(--radius);
  border:1px solid transparent;
  font-weight:600; font-size:.95rem; text-decoration:none; cursor:pointer;
  transition:background .15s var(--ease), color .15s var(--ease),
             border-color .15s var(--ease);
}
/* !important on the .btn-* base colors too, not just their hover states:
   Hello Elementor's reset.css has a [type="submit"] rule (same
   specificity tier as a single class) that loads after this stylesheet
   and paints any <button type="submit"> — like the tracking widget's
   Track button — pink by default, not just on hover/focus. */
.btn-solid{ background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }
.btn-solid:hover{ background:var(--brand-hover) !important; border-color:var(--brand-hover) !important; }
.btn-amber{ background:var(--brand) !important; color:#fff !important; border-color:var(--brand) !important; }
.btn-amber:hover{ background:var(--brand-hover) !important; border-color:var(--brand-hover) !important; }
.btn-ghost{ background:transparent !important; color:#fff !important; border-color:#fff !important; }
.btn-ghost:hover{ background:rgba(255,255,255,.12) !important; }
.btn-outline{ background:#fff !important; color:var(--brand-link) !important; border-color:var(--brand) !important; }
.btn-outline:hover{ background:var(--brand-pale) !important; }

.nav-toggle{
  display:none; width:44px; height:44px; border:1px solid var(--border);
  border-radius:var(--radius); background:none; cursor:pointer;
  align-items:center; justify-content:center; color:var(--brand-dark);
}
.nav-toggle svg{ width:22px; height:22px; }
.nav-toggle .icon-close{ display:none; }
body.nav-open .nav-toggle .icon-burger{ display:none; }
body.nav-open .nav-toggle .icon-close{ display:block; }

/* ============================================================
   HERO — navy band + Maersk-style self-service widget
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(70rem 34rem at 110% -30%, #3E4457 0%, transparent 60%),
    linear-gradient(150deg, #383D4E 0%, var(--brand-dark) 65%);
  color:var(--on-dark-muted);
}
.hero-bg{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
}
.hero .wrap{ position:relative; z-index:2; }
.hero-main{
  padding-block:clamp(3.5rem, 7vw, 6rem) clamp(6rem, 9vw, 8rem);
  max-width:760px;
}
.hero h1{
  color:#fff; font-size:var(--fs-hero); font-weight:650;
  letter-spacing:-.015em; margin-bottom:.45em;
}
.hero .lede{
  font-size:clamp(1.02rem, 1rem + .3vw, 1.18rem);
  color:var(--on-dark-muted); max-width:36em; margin-bottom:1.6rem;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; }

/* self-service widget (Track / Quote / Get started) */
.widget-zone{ position:relative; margin-top:-4.4rem; z-index:5; padding-bottom:0; }
.widget{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 14px 34px -14px rgba(0,36,61,.3);
  overflow:hidden;
}
.widget-tabs{ display:flex; border-bottom:1px solid var(--border); background:var(--bg-alt); }
.widget-tab{
  flex:0 0 auto;
  padding:1rem 1.6rem; border:0; background:none; cursor:pointer;
  font-weight:600; font-size:.95rem; color:var(--muted);
  border-bottom:3px solid transparent;
  display:inline-flex; align-items:center; gap:.5rem;
  transition:color .15s var(--ease);
}
.widget-tab svg{ width:18px; height:18px; }
/* !important here on purpose: Elementor's global kit CSS (always loaded
   site-wide) applies its own accent color to bare <button> hover/focus
   states with enough specificity to leak through otherwise. */
.widget-tab:hover,
.widget-tab:focus,
.widget-tab:focus-visible{ background:none !important; color:var(--brand) !important; box-shadow:none !important; outline:none !important; }
.widget-tab.active{
  color:var(--brand-dark); background:#fff;
  border-bottom-color:var(--brand);
}
.widget-panel{ display:none; padding:1.6rem; }
.widget-panel.active{ display:block; }
.widget-row{ display:flex; gap:.8rem; align-items:stretch; }
.widget-row input{
  flex:1; min-width:0;
  font:inherit; font-size:1rem;
  padding:.78rem 1rem; border:1px solid var(--border-dk);
  border-radius:var(--radius); color:var(--text); background:#fff;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.widget-row input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-pale);
}
.widget-hint{ margin-top:.7rem; font-size:.82rem; color:var(--muted); }
.widget-panel p.widget-lede{ color:var(--muted); margin-bottom:1rem; max-width:52em; }
.track-result{
  margin-top:1rem; padding:.85rem 1rem; border-radius:var(--radius);
  background:var(--brand-pale); font-size:.9rem; display:none;
}
.track-result.show{ display:block; }

/* inner page hero */
.hero.hero-page .hero-main{ padding-block:clamp(2.6rem, 5vw, 4rem); max-width:820px; }
.hero.hero-page h1{ font-size:var(--fs-h1); }
.breadcrumb{
  display:flex; flex-wrap:wrap; gap:.45rem; align-items:center;
  font-size:.82rem; color:var(--on-dark-muted);
  margin-bottom:1.4rem;
}
.breadcrumb a{ color:var(--on-dark-muted); text-decoration:none; }
.breadcrumb a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.breadcrumb .bc-sep{ color:#6E7688; }
.breadcrumb .bc-here{ color:#fff; font-weight:550; }

/* ============================================================
   SECTIONS
   ============================================================ */
.section{ padding-block:clamp(3.2rem, 6.5vw, 5.5rem); }
.section-fog{ background:var(--bg-alt); }
.section-ink{ background:var(--brand-dark); color:var(--on-dark-muted); }
.section-ink h2,.section-ink h3{ color:#fff; }

.section-head{ max-width:46em; margin-bottom:clamp(1.8rem, 3.5vw, 2.8rem); }
.section-head p{ color:var(--muted); font-size:1.02rem; }
.section-ink .section-head p{ color:var(--on-dark-muted); }

.grid{ display:grid; gap:1.25rem; }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }

/* cards — flat, bordered, arrow-link (Maersk pattern) */
.card{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); padding:1.6rem 1.5rem 1.4rem;
  display:flex; flex-direction:column; gap:.35rem;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
a.card{ text-decoration:none; }
a.card:hover{
  border-color:var(--brand);
  box-shadow:0 8px 22px -12px rgba(0,36,61,.28);
}
.card .card-code{
  font-size:.72rem; font-weight:600;
  letter-spacing:.1em; color:var(--muted-2); text-transform:uppercase;
  margin-bottom:.55rem;
}
.card h3{ margin-bottom:.3rem; font-size:1.12rem; }
.card p{ color:var(--muted); font-size:.93rem; }
.card .card-more{
  margin-top:auto; padding-top:1.1rem;
  font-weight:600; font-size:.9rem; color:var(--brand-link);
  display:inline-flex; align-items:center; gap:.35rem;
}
a.card:hover .card-more{ color:var(--brand-hover); text-decoration:underline; text-underline-offset:3px; }
.card-icon{
  width:44px; height:44px; border-radius:var(--radius);
  background:var(--brand-pale); color:var(--brand-link);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:.95rem;
}
.card-icon svg{ width:23px; height:23px; }
a.card:hover .card-icon{ background:var(--brand); color:#fff; }

.section-fog .card{ background:#fff; }
.section-ink .card{
  background:rgba(255,255,255,.05); border-color:#454B5E;
}
.section-ink .card h3{ color:#fff; }
.section-ink .card p{ color:var(--on-dark-muted); }
.section-ink .card .card-more{ color:var(--brand-light); }
.section-ink .card-icon{ background:rgba(255,255,255,.1); color:var(--brand-light); }

/* split */
.split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem); align-items:center;
}
.split.rev > .split-media{ order:-1; }
.split p{ color:var(--muted); }
.split-media{
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); background:var(--bg-alt);
  aspect-ratio:5/4; position:relative;
}
.split-media svg{ width:100%; height:100%; }

/* checklist */
.ticks{ list-style:none; margin:1.3rem 0 0; padding:0; display:grid; gap:.7rem; }
.ticks li{ display:flex; gap:.7rem; align-items:flex-start; }
.ticks li::before{
  content:""; flex-shrink:0; width:20px; height:20px; margin-top:.18rem;
  border-radius:50%;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}
.ticks b{ color:var(--brand-dark); font-weight:620; }

/* process steps */
.steps{ counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.step{
  counter-increment:step;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:1.5rem 1.4rem;
}
.step::before{
  content:counter(step);
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--brand-pale); color:var(--brand-link);
  font-weight:700; font-size:.95rem;
  margin-bottom:1rem;
}
.step h3{ font-size:1.05rem; margin:0 0 .35rem; }
.step p{ font-size:.9rem; color:var(--muted); }

/* stats */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.stat{ border-left:3px solid var(--brand-light); padding-left:1.1rem; }
.stat b{
  display:block; font-size:clamp(1.7rem, 1.2rem + 1.5vw, 2.3rem);
  font-weight:700; letter-spacing:-.015em;
  color:var(--brand-dark); line-height:1.1;
}
.section-ink .stat b{ color:#fff; }
.stat span{ font-size:.88rem; color:var(--muted); }
.section-ink .stat span{ color:var(--on-dark-muted); }

/* CTA band — pale blue, flat (Maersk pattern) */
.cta-band{
  background:var(--brand-pale);
  border:1px solid #FFDDBE;
  border-radius:var(--radius);
  padding:clamp(2rem, 4.5vw, 3.2rem);
  display:grid; grid-template-columns:1.35fr .65fr;
  gap:2rem; align-items:center;
}
.cta-band h2{ color:var(--brand-dark); margin-bottom:.35rem; }
.cta-band p{ color:var(--muted); margin:0; }
.cta-band .hero-cta{ justify-content:flex-end; }
.cta-band .btn-ghost{ background:transparent; color:var(--brand-link); border-color:var(--brand); }
.cta-band .btn-ghost:hover{ background:#fff; }

/* forms */
.track-box{
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.8rem;
}
.track-box > label{
  display:block; font-size:.8rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.6rem;
}
.form{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.field{ display:flex; flex-direction:column; gap:.35rem; }
.field.full{ grid-column:1/-1; }
.field label{
  font-size:.8rem; font-weight:600; color:var(--muted);
}
.field input,.field textarea,.field select{
  font:inherit; color:var(--text);
  padding:.72rem .9rem; border:1px solid var(--border-dk);
  border-radius:var(--radius); background:#fff;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-pale);
}
.field textarea{ min-height:130px; resize:vertical; }

/* channels */
.channel{ display:flex; gap:1rem; align-items:flex-start; }
.channel .card-icon{ margin:0; flex-shrink:0; }
.channel b{ display:block; color:var(--brand-dark); font-weight:620; }
.channel span{ font-size:.92rem; color:var(--muted); }
.channel a{ font-size:.92rem; }

/* FAQ — Maersk accordion */
.faq{ border-top:1px solid var(--border); }
.faq details{ border-bottom:1px solid var(--border); }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.1rem .1rem; font-weight:600; color:var(--brand-dark); font-size:1rem;
}
.faq summary:hover{ color:var(--brand-link); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-weight:400; font-size:1.5rem; color:var(--brand-link);
  transition:transform .2s var(--ease); line-height:1;
}
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .faq-a{ padding:0 .1rem 1.25rem; color:var(--muted); max-width:62em; }

/* prose */
.prose{ max-width:760px; }
.prose h2{ font-size:1.3rem; margin-top:2.2em; }
.prose p,.prose li{ color:var(--text); }
.prose ul{ padding-left:1.2rem; }
.prose .meta{ font-size:.85rem; color:var(--muted-2); margin-bottom:2rem; }

/* ============================================================
   FOOTER — light, Maersk-style
   ============================================================ */
.bls-footer{ background:#fff; color:var(--muted); border-top:1px solid var(--border); }
.footer-links{ padding:clamp(2.8rem, 5.5vw, 4rem) 0 2rem; }
.footer-top{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:2.5rem; padding-bottom:2.4rem;
}
.footer-col h4{
  color:var(--text); font-size:1.05rem; font-weight:650;
  margin:0 0 1rem; padding-bottom:.75rem; border-bottom:1px solid var(--border);
}
.footer-col h4.footer-sub{ margin-top:1.8rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.footer-col a{
  display:block; text-decoration:none; font-size:.9rem; color:var(--muted);
  padding:.3rem 0; transition:color .15s var(--ease);
}
.footer-col a:hover{ color:var(--brand-link); }

.footer-brand{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:1.2rem; padding:1.8rem 0; border-top:1px solid var(--border);
}
.footer-brand small{ display:block; margin-top:.5rem; font-size:.8rem; color:var(--muted-2); }
.footer-social{ display:flex; align-items:center; gap:1rem; font-size:.88rem; color:var(--muted); }
.footer-social b{ color:var(--text); }
.socials{ display:flex; gap:.5rem; }
.socials a{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text); transition:all .15s var(--ease);
}
.socials a:hover{ border-color:var(--brand); color:var(--brand); }
.socials svg{ width:16px; height:16px; }

.footer-bottom{
  border-top:1px solid var(--border);
  padding-block:1.2rem;
  font-size:.82rem; color:var(--muted);
}
.footer-bottom nav{ display:flex; flex-wrap:wrap; gap:1.4rem; }
.footer-bottom a{ color:var(--muted); text-decoration:none; }
.footer-bottom a:hover{ color:var(--text); text-decoration:underline; }

.footer-utility{ background:var(--bg-alt); padding:1.1rem 0; }
.footer-utility .wrap{ display:flex; gap:.8rem; flex-wrap:wrap; }
.footer-utility a{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.85rem; font-weight:600; color:var(--text);
  padding:.6rem 1rem; border-radius:999px; border:1px solid var(--border);
  background:#fff; text-decoration:none; transition:border-color .15s var(--ease), transform .15s var(--ease);
}
.footer-utility a:hover{ border-color:var(--brand); transform:translateY(-1px); }

@media (max-width:1020px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } .footer-brand{ flex-direction:column; align-items:flex-start; } }

/* ============================================================
   MOTION (restrained) + FOCUS
   ============================================================ */
.rv{ opacity:0; transform:translateY(14px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.rv.in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.07s; } .rv-d2{ transition-delay:.14s; } .rv-d3{ transition-delay:.21s; }

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

@media (prefers-reduced-motion: reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px){
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); row-gap:1.6rem; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .menu-cols{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 880px){
  .split, .split.rev{ grid-template-columns:1fr; }
  .split.rev > .split-media{ order:0; }
  .grid-3,.grid-2{ grid-template-columns:1fr; }
  .cta-band{ grid-template-columns:1fr; }
  .cta-band .hero-cta{ justify-content:flex-start; }
  .form{ grid-template-columns:1fr; }
  .widget-tabs{ overflow-x:auto; }
  .widget-tab{ padding:.9rem 1.1rem; white-space:nowrap; }

  .nav-toggle{ display:flex; }
  .header-actions .lang{ display:none; }
  .header-actions .btn{ display:none; }
  .nav{
    position:fixed; inset:80px 0 0 0; z-index:55;
    background:#fff;
    flex-direction:column; align-items:stretch; gap:0;
    padding:.6rem 1.25rem 2.5rem; overflow-y:auto;
    display:none; margin:0;
  }
  body.nav-open .nav{ display:flex; }
  body.nav-open{ overflow:hidden; }
  .nav-link{
    width:100%; justify-content:space-between;
    padding:1rem .2rem;
    border-bottom:1px solid var(--border);
    font-size:1.05rem;
  }
  .nav-link::after{ display:none; }
  .nav-item{ position:relative; }
  .nav-link .caret{ display:none; } /* avoid a second, non-interactive chevron */
  .nav-caret-toggle{
    display:flex; position:absolute; right:0; top:0; height:3.1rem; width:3rem;
  }
  .nav-item.open > .nav-caret-toggle .caret{ transform:rotate(180deg); }
  .menu{
    position:static; opacity:1; visibility:hidden;
    display:none; box-shadow:none; border:0; padding:.3rem 0 .8rem;
    translate:none; width:auto; transform:none;
  }
  .nav-item.open > .menu{ display:block; visibility:visible; }
  .menu-cols{ width:100%; grid-template-columns:1fr; gap:1.2rem; }
  .menu-promo{ display:none; } /* the truck photo promo doesn't fit well in the mobile drawer */
  .nav-mobile-cta{ margin-top:1.4rem; display:grid; gap:.75rem; }
  .nav-mobile-cta .btn{ width:100%; }
}

@media (min-width: 881px){
  .nav-mobile-cta{ display:none; }
}

@media (max-width: 560px){
  .grid-4,.steps,.stats{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .widget-row{ flex-direction:column; }
  .hero-cta .btn{ width:100%; }
  .widget-zone{ margin-top:-3.4rem; }
}

/* ============================================================
   BLS-* RESPONSIVE GRID/SPLIT UTILITIES
   Used by the PHP-generated pages (bls_svc_*, bls_article_*,
   bls_render_industry_page, home.php) in place of hardcoded inline
   grid-template-columns, which had no mobile/tablet breakpoints.
   ============================================================ */
.bls-grid-2,.bls-grid-3,.bls-grid-4{ display:grid; gap:20px; }
.bls-grid-2{ grid-template-columns:repeat(2,1fr); }
.bls-grid-3{ grid-template-columns:repeat(3,1fr); }
.bls-grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .bls-grid-3,.bls-grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .bls-grid-2,.bls-grid-3,.bls-grid-4{ grid-template-columns:1fr; }
}

.bls-steps-3,.bls-steps-4{ display:grid; gap:32px; }
.bls-steps-3{ grid-template-columns:repeat(3,1fr); }
.bls-steps-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .bls-steps-3,.bls-steps-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .bls-steps-3,.bls-steps-4{ grid-template-columns:1fr; }
}

.bls-split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
@media (max-width:880px){
  .bls-split{ grid-template-columns:1fr; gap:32px; }
}

.bls-hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:end; }
@media (max-width:900px){
  .bls-hero-grid{ grid-template-columns:1fr; gap:32px; }
}


/* ============================================================
   BRAND LOGO + LANGUAGE SELECTOR + MICRO-MOTIONS
   ============================================================ */
.brand-logo{ height:50px; width:auto; display:block; }
.bls-footer .brand-logo{ height:40px; }

.lang-item{ position:relative; }
.lang-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .6rem; border:0; background:none; cursor:pointer;
  font-weight:550; font-size:.88rem; color:var(--text);
  border-radius:var(--radius);
  transition:background .15s var(--ease), color .15s var(--ease);
}
.lang-btn:hover{ background:var(--bg-alt); color:var(--brand-link); }
.lang-btn .caret{ transition:transform .2s var(--ease); color:var(--muted-2); }
.lang-item.open .lang-btn .caret{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:160px;
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 12px 26px -12px rgba(46,50,64,.3);
  padding:.4rem;
  opacity:0; visibility:hidden; pointer-events:none;
  translate:0 -4px;
  transition:opacity .16s var(--ease), translate .16s var(--ease), visibility .16s;
  z-index:70;
}
.lang-item.open .lang-menu{ opacity:1; visibility:visible; pointer-events:auto; translate:0 0; }
.lang-menu a, .lang-menu .lang-current{
  display:block; padding:.55rem .7rem; border-radius:3px;
  font-size:.9rem; text-decoration:none; color:var(--text);
}
.lang-menu a:hover{ background:var(--brand-pale); color:var(--brand-link); }
.lang-menu .lang-current{ color:var(--muted-2); cursor:default; }
.lang-menu .lang-current::after{ content:" ✓"; color:var(--brand); }
.lang-mobile{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem .2rem; text-decoration:none;
  font-weight:550; color:var(--text);
  border-bottom:1px solid var(--border); width:100%;
}

.text-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.95rem;
  color:var(--brand-link); text-decoration:none;
}
.text-link:hover{ text-decoration:underline; text-underline-offset:3px; }
.text-link svg{ transition:transform .18s var(--ease); }
.text-link:hover svg{ transform:translateX(3px); }

/* Maersk-style arrow micro-motion on cards */
.card .card-more svg{ transition:transform .18s var(--ease); }
a.card:hover .card-more svg{ transform:translateX(4px); }

/* widget active tab uses brand (duplicate of the .widget-tab:hover rule
   near the top of the file used to override it with --brand-link (teal)
   instead of BLS orange — removed, this is the only tab-hover rule now) */
.widget-tab.active{ border-bottom-color:var(--brand); }

/* focus ring in brand */
.widget-row input:focus, .field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-pale);
}

@media (max-width:880px){
  .lang-item{ display:none; }
  .brand-logo{ height:38px; }
}

/* ============================================================
   HOVER MEGA-MENUS (Maersk behavior: open on hover, desktop)
   ============================================================ */
@media (hover:hover) and (min-width:881px){
  .nav-item.has-menu:hover > .nav-link{ color:var(--brand-link); }
  .nav-item.has-menu:hover > .nav-link::after{ opacity:1; }
  .nav-item.has-menu:hover > .nav-link .caret{ transform:rotate(180deg); }
  .nav-item.has-menu:hover > .menu,
  .nav-item.has-menu:focus-within > .menu{
    opacity:1; visibility:visible; pointer-events:auto; translate:0 0;
    transition-delay:.06s;
  }
  .nav-item.has-menu > .menu{ transition-delay:.12s; } /* forgiving close */
  .lang-item:hover .lang-menu,
  .lang-item:focus-within .lang-menu{
    opacity:1; visibility:visible; pointer-events:auto; translate:0 0;
  }
  .lang-item:hover .lang-btn .caret{ transform:rotate(180deg); }
}

/* ============================================================
   INSIGHTS / RESOURCES (Maersk-style article cards & prose)
   ============================================================ */
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.post-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; text-decoration:none; display:flex; flex-direction:column;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.post-card:hover{ border-color:var(--brand); box-shadow:0 8px 22px -12px rgba(46,50,64,.28); }
.post-media{ aspect-ratio:16/9; background:var(--bg-alt); position:relative; overflow:hidden; }
.post-media svg{ width:100%; height:100%; }
.post-body{ padding:1.25rem 1.3rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.post-kicker{
  font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--brand-link); margin-bottom:.5rem;
}
.post-card h3{ font-size:1.08rem; margin-bottom:.4rem; }
.post-card p{ color:var(--muted); font-size:.92rem; margin:0; }
.post-meta{
  margin-top:auto; padding-top:1rem;
  font-size:.8rem; color:var(--muted-2);
  display:flex; align-items:center; gap:.5rem;
}
.post-card:hover h3{ color:var(--brand-link); }

/* article page */
.article{ max-width:760px; }
.article .lede-p{ font-size:1.14rem; color:var(--muted); }
.article h2{ font-size:1.5rem; margin-top:2em; }
.article h3{ font-size:1.15rem; margin-top:1.6em; }
.article p, .article li{ color:var(--text); line-height:1.7; }
.article ul, .article ol{ padding-left:1.25rem; }
.article .article-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center;
  font-size:.85rem; color:var(--muted-2);
  padding-bottom:1.5rem; margin-bottom:2rem; border-bottom:1px solid var(--border);
}
.article .article-meta b{ color:var(--brand-link); font-weight:600; }
.article table{
  width:100%; border-collapse:collapse; margin:1.4rem 0; font-size:.93rem;
}
.article th, .article td{
  text-align:left; padding:.7rem .8rem; border:1px solid var(--border);
}
.article th{ background:var(--bg-alt); font-weight:650; color:var(--brand-dark); }
.article .callout{
  background:var(--brand-pale); border-left:3px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:1.1rem 1.3rem; margin:1.6rem 0;
}
.article .callout p{ margin:0; }
.dl-list dt{ font-weight:650; color:var(--brand-dark); margin-top:1.1rem; }
.dl-list dd{ margin:0.2rem 0 0; color:var(--muted); }

/* ============================================================
   TABLET REFINEMENT
   ============================================================ */
@media (min-width:881px) and (max-width:1100px){
  .nav-link{ padding:1.35rem .55rem; font-size:.9rem; }
  .header-actions .btn{ padding:.6rem 1rem; font-size:.88rem; }
  .lang-btn span{ display:none; }
  .post-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:880px){
  .post-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .post-grid{ grid-template-columns:1fr; }
  .article table{ display:block; overflow-x:auto; }
}