/* CHB Logistics — shared stylesheet (hero direction 1b: full-bleed blue slab, route linework, ticker) */

:root{
  --blue:#29176F;
  --blue-light:#3A1DAB;
  --blue-accent:#7F6ACE;
  /* theme channels (rgb triplets) and assets, so a page can re-theme itself: see html.theme-bw */
  --ink-rgb:14,17,22;--hover-rgb:11,74,158;
  --accent-rgb:127,106,206;--accent-pale-rgb:205,195,255;--blue-rgb:41,23,111;--tint:#EFEBFA;
  --hatch:url("film-hatch.svg");--hatch-mobile:url("film-hatch-mobile.svg");
  --paper:#fff;
  --ink:#0E1116;
  --placeholder:#e6e8eb;
  --white:#fff;
  --font-display:'Open Sans', system-ui, sans-serif;
  --font-mono:'Open Sans', system-ui, sans-serif;
  /* header: big logo at the top of the page, smaller once scrolled (html.is-scrolled is set by script.js) */
  --header-full:112px;--header-small:76px;--logo-full:66px;--logo-small:42px;
  --header-h:var(--header-full);--logo-h:var(--logo-full);
}
html.is-scrolled{--header-h:var(--header-small);--logo-h:var(--logo-small)}
/* LogimeAll: black and white. Same components, only the tokens change; photos are turned to greyscale. */
html.theme-bw{
  --blue:#111;--blue-light:#2a2a2a;--blue-accent:#6b6b6b;--ink:#111;
  --ink-rgb:17,17,17;--hover-rgb:0,0,0;--accent-rgb:138,138,138;--accent-pale-rgb:221,221,221;--blue-rgb:0,0,0;--tint:#f1f1f1;
  --hatch:url("film-hatch-bw.svg");--hatch-mobile:url("film-hatch-mobile-bw.svg");
}
html.theme-bw img,html.theme-bw video{filter:grayscale(1)}
@media (max-width:960px){:root{--header-full:84px;--header-small:64px;--logo-full:46px;--logo-small:34px}}

*{box-sizing:border-box}
a,button{-webkit-tap-highlight-color:transparent}
section[id]{scroll-margin-top:var(--header-small)}
html{scroll-behavior:smooth}
body{
  margin:0;padding-top:var(--header-full); /* room for the fixed header, so it can shrink without moving the page */
  background:var(--paper);
  font-family:var(--font-display);
  color:var(--ink);
}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1440px;margin:0 auto}

/* ---------- Header (light, paper — logo sits on it directly, no chip needed) ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--header-h);padding:0 44px;
  background:var(--paper);border-bottom:1px solid rgba(var(--ink-rgb),.14);
  transition:height .25s ease;
}
/* Scroll progress: thin bar on the header's bottom edge that fills as the page is scrolled */
.scroll-progress{
  position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--blue-accent),var(--blue));
  transform:scaleX(0);transform-origin:left center;will-change:transform;
  transition:transform .08s linear;
}
@media (prefers-reduced-motion:reduce){.scroll-progress{transition:none}}
.logo{display:inline-flex;align-items:center;text-decoration:none;line-height:0}
.logo img{display:block;height:var(--logo-h);width:auto;transition:height .25s ease}
@media (prefers-reduced-motion:reduce){.site-header,.logo img{transition:none}}

.nav{display:flex;align-items:center;gap:32px}
.nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0}
/* with three tabs the header gets tight just above the phone breakpoint: smaller gaps and side padding there */
@media (min-width:961px) and (max-width:1180px){.site-header{padding:0 28px}.nav,.nav-links{gap:20px}}
.nav-link{
  font:500 14px var(--font-display);color:var(--ink);
  text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent;
}
.nav-link:hover{border-color:var(--blue);color:var(--blue)}
.nav-link.is-current{color:var(--blue);border-color:var(--blue)}
/* "About us": same hover animation as the language switcher (diagonal fill, label flip, corner brackets) */
.nav-link[href$="/company-overview"]{
  --btn-fg:var(--blue);--btn-bg:#fff;
  position:relative;isolation:isolate;display:inline-block;
  padding:9px 14px;margin:-9px -14px;border-bottom:0;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:transparent;
  transition:color .2s ease .15s,text-decoration-color .2s ease .15s;
}
.nav-link[href$="/company-overview"].is-current{text-decoration-color:var(--blue)}
.nav-link[href$="/company-overview"]::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--btn-fg);
  clip-path:polygon(-1% 0%,-1% 0%,-100% 100%,-1% 100%);
  transition:clip-path .4s cubic-bezier(.25,0,0,1);
}
.nav-link[href$="/company-overview"]::before{
  content:"";position:absolute;inset:4px;z-index:2;pointer-events:none;opacity:0;
  background-image:linear-gradient(to right,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to right,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to bottom,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to bottom,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px));
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
  background-repeat:no-repeat;
  transition:inset .25s cubic-bezier(.25,0,0,1),opacity .2s ease;
}
.nav-link[href$="/company-overview"]:focus-visible{outline:none;color:var(--btn-bg);text-decoration-color:transparent}
.nav-link[href$="/company-overview"]:focus-visible::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
.nav-link[href$="/company-overview"]:focus-visible::before{inset:-3px;opacity:1}
@media (hover:hover){
  .nav-link[href$="/company-overview"]:hover{color:var(--btn-bg);border-color:transparent;text-decoration-color:transparent}
  .nav-link[href$="/company-overview"]:hover::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
  .nav-link[href$="/company-overview"]:hover::before{inset:-3px;opacity:1}
}
.nav-link[href$="/company-overview"]:active::before{inset:3px;opacity:1;transition-duration:.12s}
@media (prefers-reduced-motion:reduce){
  .nav-link[href$="/company-overview"],.nav-link[href$="/company-overview"]::before,.nav-link[href$="/company-overview"]::after{transition:none}
}

.nav-item-dropdown{position:relative}
.nav-dropdown{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--white);border:1px solid rgba(var(--ink-rgb),.12);border-radius:2px;
  min-width:220px;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;pointer-events:none;
  /* Hide lags by .25s so a slightly off-path pointer doesn't lose the menu; show is instant (see :hover). */
  transition:opacity .16s ease .25s,transform .16s ease .25s,visibility 0s linear .41s;
}
/* Invisible bridge over the 14px gap between the link and the panel so hover isn't dropped in transit. */
.nav-dropdown::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}
.nav-dropdown a{
  --btn-fg:var(--blue);--btn-bg:#fff;
  position:relative;isolation:isolate;
  display:block;padding:11px 14px;font:500 13.5px var(--font-display);
  color:var(--ink);text-decoration:none;border-radius:0;
  transition:color .2s ease .15s;
}
/* same hover animation as the buttons: diagonal fill, label flip, corner brackets */
.nav-dropdown a::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--btn-fg);
  clip-path:polygon(-1% 0%,-1% 0%,-100% 100%,-1% 100%);
  transition:clip-path .4s cubic-bezier(.25,0,0,1);
}
.nav-dropdown a::before{
  content:"";position:absolute;inset:4px;z-index:2;pointer-events:none;opacity:0;
  background-image:linear-gradient(to right,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to right,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to bottom,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to bottom,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px));
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
  background-repeat:no-repeat;
  transition:inset .25s cubic-bezier(.25,0,0,1),opacity .2s ease;
}
.nav-dropdown a:focus-visible{outline:none;color:var(--btn-bg)}
.nav-dropdown a:focus-visible::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
.nav-dropdown a:focus-visible::before{inset:-2px;opacity:1}
@media (hover:hover){
  .nav-dropdown a:hover{color:var(--btn-bg)}
  .nav-dropdown a:hover::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
  .nav-dropdown a:hover::before{inset:-2px;opacity:1}
}
.nav-dropdown a:active::before{inset:3px;opacity:1;transition-duration:.12s}
@media (prefers-reduced-motion:reduce){
  .nav-dropdown a,.nav-dropdown a::before,.nav-dropdown a::after{transition:none}
}

.lang-switch{
  --btn-fg:var(--blue);--btn-bg:#fff;
  position:relative;isolation:isolate;
  font:500 10px var(--font-mono);letter-spacing:.12em;color:rgba(var(--ink-rgb),.64);text-decoration:none;display:flex;gap:6px;
  padding:9px 12px;margin:-9px -12px;
  transition:color .2s ease .15s;
}
.lang-switch b{color:var(--ink);font-weight:600;transition:color .2s ease .15s}
.lang-switch span{color:rgba(var(--ink-rgb),.25);transition:color .2s ease .15s}
/* same hover animation as the buttons: diagonal fill, label flip, corner brackets */
.lang-switch::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--btn-fg);
  clip-path:polygon(-1% 0%,-1% 0%,-100% 100%,-1% 100%);
  transition:clip-path .4s cubic-bezier(.25,0,0,1);
}
.lang-switch::before{
  content:"";position:absolute;inset:4px;z-index:2;pointer-events:none;opacity:0;
  background-image:linear-gradient(to right,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to right,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to bottom,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to bottom,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px));
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
  background-repeat:no-repeat;
  transition:inset .25s cubic-bezier(.25,0,0,1),opacity .2s ease;
}
.lang-switch:focus-visible{outline:none;color:rgba(255,255,255,.85)}
.lang-switch:focus-visible b{color:var(--btn-bg)}
.lang-switch:focus-visible span{color:rgba(255,255,255,.55)}
.lang-switch:focus-visible::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
.lang-switch:focus-visible::before{inset:-3px;opacity:1}
@media (hover:hover){
  .lang-switch:hover{color:rgba(255,255,255,.85)}
  .lang-switch:hover b{color:var(--btn-bg)}
  .lang-switch:hover span{color:rgba(255,255,255,.55)}
  .lang-switch:hover::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
  .lang-switch:hover::before{inset:-3px;opacity:1}
}
.lang-switch:active::before{inset:3px;opacity:1;transition-duration:.12s}
@media (prefers-reduced-motion:reduce){
  .lang-switch,.lang-switch b,.lang-switch span,.lang-switch::before,.lang-switch::after{transition:none}
}

/* ---------- Buttons ----------
   Hatched outline with corner brackets. On hover a solid fill sweeps in diagonally, the label
   flips colour and the brackets open out; on press they pull in. --btn-fg is the ink/fill colour,
   --btn-bg is the label colour once filled (the surface the button sits on). */
.btn-cta,.btn-solid,.btn-outline,.btn-submit,.biz-more{
  --btn-fg:var(--blue);--btn-bg:#fff;
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:14px 20px;border:0;border-radius:0;
  background-color:transparent;
  background-image:repeating-linear-gradient(119deg,
    color-mix(in srgb,var(--btn-fg) 20%,transparent) 0,
    color-mix(in srgb,var(--btn-fg) 20%,transparent) 1px,
    transparent 1px,transparent 5px);
  color:var(--btn-fg);
  font:600 11px/1 var(--font-display);letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:color .2s ease .15s;
}
.btn-cta::after,.btn-solid::after,.btn-outline::after,.btn-submit::after,.biz-more::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--btn-fg);
  clip-path:polygon(-1% 0%,-1% 0%,-100% 100%,-1% 100%);
  transition:clip-path .4s cubic-bezier(.25,0,0,1);
}
.btn-cta::before,.btn-solid::before,.btn-outline::before,.btn-submit::before,.biz-more::before{
  content:"";position:absolute;inset:-1px;z-index:2;pointer-events:none;
  background-image:
    linear-gradient(to right,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),
    linear-gradient(to right,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),
    linear-gradient(to bottom,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),
    linear-gradient(to bottom,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px));
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
  background-repeat:no-repeat;
  transition:inset .25s cubic-bezier(.25,0,0,1);
}
:is(.btn-cta,.btn-solid,.btn-outline,.btn-submit,.biz-more):focus-visible{color:var(--btn-bg);outline:none}
:is(.btn-cta,.btn-solid,.btn-outline,.btn-submit,.biz-more):focus-visible::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
:is(.btn-cta,.btn-solid,.btn-outline,.btn-submit,.biz-more):focus-visible::before{inset:-3px}
@media (hover:hover){
  :is(.btn-cta,.btn-solid,.btn-outline,.btn-submit,.biz-more):hover:not(:disabled){color:var(--btn-bg)}
  :is(.btn-cta,.btn-solid,.btn-outline,.btn-submit,.biz-more):hover:not(:disabled)::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
  :is(.btn-cta,.btn-solid,.btn-outline,.btn-submit,.biz-more):hover:not(:disabled)::before{inset:-3px}
  /* a business row is one big link: hovering anywhere on it lights up its MORE button */
  .biz-row:hover .biz-more{color:var(--btn-bg)}
  .biz-row:hover .biz-more::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
  .biz-row:hover .biz-more::before{inset:-3px}
}
.biz-row:focus-visible .biz-more{color:var(--btn-bg)}
.biz-row:focus-visible .biz-more::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
.biz-row:focus-visible .biz-more::before{inset:-3px}
.biz-row:active .biz-more::before{inset:3px;transition-duration:.12s}
:is(.btn-cta,.btn-solid,.btn-outline,.btn-submit,.biz-more):active:not(:disabled)::before{inset:3px;transition-duration:.12s}
@media (prefers-reduced-motion:reduce){
  :is(.btn-cta,.btn-solid,.btn-outline,.btn-submit,.biz-more),
  :is(.btn-cta,.btn-solid,.btn-outline,.btn-submit,.biz-more)::before,
  :is(.btn-cta,.btn-solid,.btn-outline,.btn-submit,.biz-more)::after{transition:none}
}
/* per-button colour + size */
.btn-cta{padding:12px 18px;font-size:12.5px;font-weight:700}
.btn-solid,.btn-outline{padding:17px 28px;font-size:13.5px;font-weight:700}
.btn-outline{--btn-fg:var(--ink)}
.cta-band .btn-solid{--btn-fg:#fff;--btn-bg:var(--blue)}
.biz-more{--btn-fg:var(--ink);justify-self:end;align-self:start;margin-top:7px;padding:13px 18px;font-weight:700}

.nav-toggle{display:none;flex-direction:column;gap:5px;width:26px;height:26px;justify-content:center;background:none;border:0;cursor:pointer;padding:0}
.nav-toggle span{height:2px;background:var(--ink);border-radius:1px;transition:transform .3s ease,opacity .2s ease}
/* three bars turn into an X when the menu is open (top and bottom bar rotate, the middle one fades) */
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-mobile{display:none}

/* ---------- Hero (inspired by 1a: paper + hairline grid, blue as accent only) ---------- */
.hero{position:relative;background:var(--paper);overflow:hidden;padding:78px 44px 0}
.hero-photo{
  position:absolute;top:0;right:0;bottom:130px;width:min(50%,900px);z-index:0; /* 130px = height of .hero-facts, so the photo ends exactly on its top line */
  -webkit-mask-image:linear-gradient(to right,transparent,black 22%);
  mask-image:linear-gradient(to right,transparent,black 22%);
}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:65% 45%;display:block}
.hero-inner{position:relative;z-index:1;max-width:1000px;padding-bottom:56px}
.hero-title{margin:0 0 26px;font:600 clamp(48px,9vw,116px)/.92 var(--font-display);letter-spacing:-.045em;color:var(--ink)}
.hero-title .accent-word{color:var(--blue);font-weight:700}
.fade-word{color:var(--blue);font-weight:700}
/* company motto: signature line above the big title */
.motto{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:700 13px var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.hero-sub{margin:0 0 38px;max-width:520px;font:400 18px/1.5 var(--font-display);color:rgba(var(--ink-rgb),.72)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.hero-facts{position:relative;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(var(--ink-rgb),.16)}
.hero-fact{padding:26px 26px 30px 0;border-left:1px solid rgba(var(--ink-rgb),.16)}
.hero-fact:first-child{padding-left:0;border-left:0}
/* Blue corners in every fact cell: top right and bottom left, static */
.hero-fact{position:relative}
.hero-fact::after{
  content:"";position:absolute;inset:14px;pointer-events:none;
  background:
    linear-gradient(var(--blue),var(--blue)) 100% 0/16px 1px,linear-gradient(var(--blue),var(--blue)) 100% 0/1px 16px,
    linear-gradient(var(--blue),var(--blue)) 0 100%/16px 1px,linear-gradient(var(--blue),var(--blue)) 0 100%/1px 16px;
  background-repeat:no-repeat;
}
/* Facts span the full page width. Column edges snap to the hero's 120px background lines, so every divider sits on a line
   (the first column starts at the page edge, its text is indented by the 44px page padding). */
@media (min-width:961px){
  .hero-facts{margin:0 -44px;grid-template-columns:repeat(3,1fr)}
  @supports (width:round(nearest,100%,120px)){
    .hero-facts{grid-template-columns:round(nearest,33.333%,120px) round(nearest,33.333%,120px) 1fr}
  }
  .hero-fact:first-child{padding-left:44px;padding-right:12px}
  .hero-fact:not(:first-child){padding-left:43px} /* + 1px divider = 44px, same as the first cell */
  .fact-num{white-space:nowrap}
}
@media (min-width:961px) and (max-width:1100px){.fact-num.accent{font-size:40px}}
.fact-num{font:600 46px/1 var(--font-display);letter-spacing:-.03em;color:var(--ink)}
.fact-num.accent{color:var(--blue)}
/* "CZ-HU-SK" is wider than the numbers: keep it on one line and let it shrink with the column */
.fact-num.accent{white-space:nowrap}
@media (max-width:960px){.fact-num.accent{font-size:min(46px,calc((100vw - 48px) / 10))}}
.fact-label{margin-top:9px;font:700 13px var(--font-mono);letter-spacing:.14em;color:rgba(var(--ink-rgb),.64)}

/* ---------- Ticker (moving text, recolored to match the light theme) ---------- */
@keyframes chbtick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker{background:var(--tint);overflow:hidden;padding:13px 0;white-space:nowrap;border-top:1px solid rgba(var(--blue-rgb),.16);border-bottom:1px solid rgba(var(--blue-rgb),.16)}
.ticker-track{display:inline-flex;gap:44px;animation:chbtick 45s linear infinite reverse;font:500 11px var(--font-mono);letter-spacing:.18em;color:var(--blue)}
/* Business names in the ticker are links: hover stops the scroll and lights the item up like a button */
.ticker-link{
  --btn-fg:var(--blue);--btn-bg:#fff;
  position:relative;isolation:isolate;display:inline-block;
  padding:8px 14px;margin:-8px -14px;
  color:inherit;text-decoration:none;
  transition:color .2s ease .15s;
}
.ticker-link::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--btn-fg);
  clip-path:polygon(-1% 0%,-1% 0%,-100% 100%,-1% 100%);
  transition:clip-path .4s cubic-bezier(.25,0,0,1);
}
.ticker-link::before{
  content:"";position:absolute;inset:4px;z-index:2;pointer-events:none;opacity:0;
  background-image:linear-gradient(to right,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to right,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to bottom,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px)),linear-gradient(to bottom,var(--btn-fg) 8px,transparent 8px,transparent calc(100% - 8px),var(--btn-fg) calc(100% - 8px));
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;
  background-position:0 0,0 100%,0 0,100% 0;
  background-repeat:no-repeat;
  transition:inset .25s cubic-bezier(.25,0,0,1),opacity .2s ease;
}
.ticker-link:focus-visible{outline:none;color:var(--btn-bg)}
.ticker-link:focus-visible::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
.ticker-link:focus-visible::before{inset:-3px;opacity:1}
.ticker-track:has(.ticker-link:focus-visible){animation-play-state:paused}
@media (hover:hover){
  .ticker-track:has(.ticker-link:hover){animation-play-state:paused}
  .ticker-link:hover{color:var(--btn-bg)}
  .ticker-link:hover::after{clip-path:polygon(0% 0%,200% 0%,100% 100%,0% 100%)}
  .ticker-link:hover::before{inset:-3px;opacity:1}
}
.ticker-link:active::before{inset:3px;opacity:1;transition-duration:.12s}
@media (prefers-reduced-motion:reduce){
  .ticker-link,.ticker-link::before,.ticker-link::after{transition:none}
}

/* ---------- Mission strip ---------- */

/* ---------- Business list (homepage) ---------- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:46px;flex-wrap:wrap;gap:12px}
.section-title{margin:0;font:600 clamp(32px,5vw,56px)/1 var(--font-display);letter-spacing:-.04em;color:var(--ink)}
.section-title .accent-word{color:var(--blue);font-weight:800}

.business{background:var(--paper);padding:80px 44px 24px}
.biz-row{
  display:grid;grid-template-columns:300px 1fr 150px;gap:32px;align-items:start;
  padding:34px 20px 34px 0;border-top:1px solid rgba(var(--ink-rgb),.16);transition:background .18s;
}
.business .biz-row:last-child{border-bottom:1px solid rgba(var(--ink-rgb),.16)}
.biz-row:hover{background:rgba(var(--hover-rgb),.05)}
a.biz-row{color:inherit;text-decoration:none;cursor:pointer}
a.biz-row:focus-visible{outline:none;background:rgba(var(--hover-rgb),.05)}
/* Business list photos: white frame, blue hatch peeking out behind and small corner brackets (same look as the framed photos) */
.biz-photo{position:relative;isolation:isolate;box-sizing:border-box;width:210px;height:118px;padding:4px;background:#fff;box-shadow:0 8px 20px rgba(var(--ink-rgb),.18);display:flex;align-items:center;justify-content:center;text-align:center;margin-top:14px}
.biz-photo::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:10px -9px -10px 9px;background:var(--hatch) 0 0/100% 100% no-repeat}
.biz-photo::after{content:"";position:absolute;inset:-6px;pointer-events:none;background-image:linear-gradient(to right,var(--blue) 14px,transparent 14px,transparent calc(100% - 14px),var(--blue) calc(100% - 14px)),linear-gradient(to right,var(--blue) 14px,transparent 14px,transparent calc(100% - 14px),var(--blue) calc(100% - 14px)),linear-gradient(to bottom,var(--blue) 14px,transparent 14px,transparent calc(100% - 14px),var(--blue) calc(100% - 14px)),linear-gradient(to bottom,var(--blue) 14px,transparent 14px,transparent calc(100% - 14px),var(--blue) calc(100% - 14px));background-size:100% 2px,100% 2px,2px 100%,2px 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:no-repeat}
.biz-photo span{font:700 13px/1.6 var(--font-mono);letter-spacing:.14em;color:rgba(var(--ink-rgb),.64)}
.biz-photo img{width:100%;height:100%;object-fit:cover;display:block}
/* keep the subject in frame when the picture is cropped */
.biz-photo img[src*="transport-dock-trucks"]{object-position:50% 70%}
.biz-title{margin:0 0 14px;font:600 30px/1.05 var(--font-display);letter-spacing:-.025em;color:var(--ink)}
.biz-body{display:flex;flex-direction:column;gap:20px;padding-top:4px}
.biz-body p, .biz-single{margin:0;font:400 15.5px/1.6 var(--font-display);color:rgba(var(--ink-rgb),.72);max-width:560px}
.biz-sub-title{font:600 13px var(--font-display);color:var(--blue);margin-bottom:6px}
.biz-list{list-style:none;margin:0;padding:0;max-width:340px}
.biz-list li{position:relative;padding:13px 0 13px 24px;border-bottom:1px solid rgba(var(--ink-rgb),.14);font:600 15px/1.3 var(--font-display);color:var(--ink)}
.biz-list li:first-child{border-top:1px solid rgba(var(--ink-rgb),.14)}
.service-copy .biz-list{max-width:520px;margin-top:22px}
.biz-list li::before{content:"";position:absolute;left:2px;top:50%;width:7px;height:7px;margin-top:-3.5px;background:var(--blue)}

/* ---------- Warehouse network map (homepage) ---------- */
.corridor{background:var(--paper);padding:88px 44px 96px;border-bottom:1px solid rgba(var(--ink-rgb),.12)}
.corridor-grid{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:start}
.corridor-text{margin:14px 0 0;font:400 16px/1.6 var(--font-display);color:rgba(var(--ink-rgb),.72);max-width:400px}
.corridor-stats{display:flex;flex-direction:column;gap:28px;margin-top:34px}
.corridor-stat-num{font:600 clamp(44px,5vw,60px)/1 var(--font-display);color:var(--blue);letter-spacing:-.03em}
.corridor-stat-label{margin-top:10px;font:700 13px var(--font-mono);letter-spacing:.14em;color:rgba(var(--ink-rgb),.64)}

.corridor-map-wrap{background:#fff;border:1px solid rgba(var(--ink-rgb),.14);background-image:linear-gradient(90deg,rgba(var(--ink-rgb),.05) 1px,transparent 1px);background-size:60px 100%}
.corridor-map{display:block;width:100%;height:auto}
.corridor-country path{fill:#f1f2f4;stroke:rgba(var(--ink-rgb),.22);stroke-width:1.2}
.corridor-line{stroke:var(--blue);stroke-opacity:.35;stroke-width:1.4;fill:none;pointer-events:none}
/* flag tint: fades in over the hovered country, dots/lines/labels stay above it */
.corridor-flags{pointer-events:none}
.flag{opacity:0;stroke:none;transition:opacity .25s ease}
@media (hover:hover){
  .corridor-map:has(.country-cz:hover,.corridor-marker[data-country="cz"]:hover) .flag-cz,
  .corridor-map:has(.country-sk:hover,.corridor-marker[data-country="sk"]:hover) .flag-sk,
  .corridor-map:has(.country-hu:hover,.corridor-marker[data-country="hu"]:hover) .flag-hu{opacity:.5}
}
@media (prefers-reduced-motion:reduce){.flag{transition:none}}
/* touch screens: tap a country (or one of its warehouses) to switch its flag on, tap again to switch it off */
.corridor-map.show-cz .flag-cz,
.corridor-map.show-sk .flag-sk,
.corridor-map.show-hu .flag-hu{opacity:.5}
@media (hover:none){.corridor-country path,.corridor-marker{cursor:pointer}}
.corridor-marker circle{transition:r .15s ease;fill:var(--blue)}
.corridor-marker.is-hq circle{fill:var(--ink)}
.corridor-marker:hover circle{r:7}
.corridor-marker-label{font:600 12px var(--font-mono);fill:var(--ink);letter-spacing:.01em;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.corridor-marker-sub{font:400 10.5px var(--font-mono);fill:rgba(var(--ink-rgb),.64);transition:fill .15s ease;paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round}
.corridor-marker:hover .corridor-marker-sub{fill:var(--blue)}

/* ---------- Shipment growth chart ---------- */
.growth{background:var(--paper);padding:80px 44px 88px;border-bottom:1px solid rgba(var(--ink-rgb),.12)}
.growth .section-head{margin-bottom:0}
.growth-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:end;margin-top:44px}
.growth-stat{padding-top:26px;border-top:1px solid rgba(var(--ink-rgb),.16)}
.growth-stat-num{font:600 clamp(44px,6vw,72px)/1 var(--font-display);letter-spacing:-.03em;color:var(--blue)}
.growth-stat-label{margin-top:14px;font:700 13px var(--font-mono);letter-spacing:.14em;color:rgba(var(--ink-rgb),.64)}
.growth-chart{position:relative;min-height:220px}
.growth-chart svg{display:block;width:100%;overflow:visible}
.growth-chart text{font:700 12px var(--font-mono);letter-spacing:.1em;fill:rgba(var(--ink-rgb),.64)}
.growth-chart .g-grid{stroke:rgba(var(--ink-rgb),.12);stroke-width:1}
.growth-chart .g-base{stroke:rgba(var(--ink-rgb),.35);stroke-width:1}
.growth-chart .g-line{fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.growth-chart .g-future{fill:none;stroke:var(--blue-accent);stroke-width:2.2;stroke-dasharray:7 6;stroke-linecap:round;opacity:.8}
.growth-chart .g-today{stroke:var(--blue);stroke-width:1;stroke-dasharray:3 4}
.growth-chart .g-label{fill:var(--blue);letter-spacing:.14em}
.growth-chart .g-label-f{fill:var(--blue-accent)}
.growth-chart .g-end{fill:var(--blue);stroke:#fff;stroke-width:2}
.growth-chart .g-clip{transform:scaleX(0);transform-origin:left center;transform-box:fill-box;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.growth-chart .g-clip-f{transition:transform 1.2s cubic-bezier(.3,.6,.3,1) 1.6s}
.growth-chart.is-in .g-clip{transform:scaleX(1)}
.growth-chart .g-end,.growth-chart .g-today,.growth-chart .g-label-t{opacity:0;transition:opacity .4s ease 1.2s}
.growth-chart .g-label-f{opacity:0;transition:opacity .5s ease 2.6s}
.growth-chart.is-in .g-end,.growth-chart.is-in .g-label-t,.growth-chart.is-in .g-label-f{opacity:1}
.growth-chart.is-in .g-today{opacity:.45}
@media (prefers-reduced-motion:reduce){.growth-chart .g-clip,.growth-chart .g-clip-f{transform:none;transition:none}.growth-chart .g-end,.growth-chart .g-label-t,.growth-chart .g-label-f{opacity:1;transition:none}.growth-chart .g-today{opacity:.45;transition:none}}

/* ---------- Drone films (autoplay, muted, looping; started by script.js when in view) ---------- */
.film{background:var(--paper);padding:48px 44px;border-bottom:1px solid rgba(var(--ink-rgb),.12)}
/* CHB blue behind the film: one continuous set of diagonal lines that thicken into solid blue */
.film{position:relative;overflow:hidden}
.film::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--hatch) 0 0/100% 100% no-repeat;
}
.film--flip::before{transform:scaleX(-1)}
.film-stage{position:relative;z-index:1}
.film-video{
  display:block;width:100%;height:auto;aspect-ratio:21/9;max-height:min(480px,calc(100vh - 190px));object-fit:cover;background:var(--ink);border:0;
}

/* ---------- Network (partner facilities) ---------- */
.network{background:var(--paper);padding:80px 44px 96px;border-bottom:1px solid rgba(var(--ink-rgb),.12)}
.network-intro{margin:0 0 32px;max-width:640px;font:400 17px/1.6 var(--font-display);color:rgba(var(--ink-rgb),.72)}
.network-feature{margin-bottom:68px;border:1px solid rgba(var(--ink-rgb),.14)}
.network-feature img{display:block;width:100%;height:auto;aspect-ratio:4/3;max-height:480px;object-fit:cover}
.network-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.network-card{background:#fff;border:1px solid rgba(var(--ink-rgb),.14);overflow:hidden}
.network-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.network-caption{padding:16px 20px}
/* the frame's hatch layer paints over the card background, so the caption gets its own white box, as wide as the photo */
.network-card.frame .network-caption{background:#fff;position:relative}
.network-caption-title{font:600 15px var(--font-display);color:var(--ink);margin-bottom:4px}
.network-caption-sub{font:700 13px var(--font-mono);letter-spacing:.14em;color:rgba(var(--ink-rgb),.64)}

/* ---------- Contact ---------- */
.contact{background:var(--paper);padding:96px 44px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.contact-title{margin:0 0 34px;font:600 clamp(32px,5vw,56px)/1 var(--font-display);letter-spacing:-.04em;color:var(--ink)}
.contact-info{display:flex;flex-direction:column;gap:26px;max-width:400px}
.contact-label{font:700 13px var(--font-mono);letter-spacing:.14em;color:rgba(var(--ink-rgb),.64);margin-bottom:9px}
.contact-value{margin:0;font:400 18px/1.55 var(--font-display);color:var(--ink)}
.contact-value a{text-decoration:none}
.contact-value a:hover{color:var(--blue)}
.rule{height:1px;background:rgba(var(--ink-rgb),.14)}
.contact-row{display:flex;gap:44px;flex-wrap:wrap}
.social{display:flex;gap:10px}
.social a{font:500 11px var(--font-mono);letter-spacing:.1em;color:var(--ink);text-decoration:none;border:1px solid rgba(var(--ink-rgb),.22);padding:9px 14px;border-radius:2px}
.social a:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

.contact-form{background:#fff;border:1px solid rgba(var(--ink-rgb),.14);padding:38px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.field{margin-bottom:20px}
.field label{display:block;font:700 13px var(--font-mono);letter-spacing:.14em;color:rgba(var(--ink-rgb),.64);margin-bottom:8px}
.field input,.field textarea{
  width:100%;border:1px solid rgba(var(--ink-rgb),.2);border-radius:2px;background:#fff;
  font:400 15px var(--font-display);color:var(--ink);padding:12px 14px;
}
.field input{height:46px}
.field textarea{height:118px;resize:vertical;font-family:var(--font-display)}
.field input:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px}
.btn-submit{display:flex;width:100%;padding:19px 26px;font-size:12px;font-weight:700}
.btn-submit:disabled{opacity:.6;cursor:not-allowed}
.form-note{margin:14px 0 0;font:400 13px/1.5 var(--font-display);color:rgba(var(--ink-rgb),.64)}
.form-note.is-success{color:var(--blue);font-weight:600}
.form-note.is-error{color:#B3261E;font-weight:600}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);padding:56px 44px 30px}
.site-footer .logo{background:#fff;padding:16px 24px}
.site-footer .logo img{height:56px}
.footer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:60px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.14);flex-wrap:wrap}
.footer-cols{display:flex;gap:70px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:11px}
.footer-col-title{font:700 13px var(--font-mono);letter-spacing:.14em;color:rgba(255,255,255,.6)}
.footer-col a{font:400 14px var(--font-display);color:rgba(255,255,255,.8);text-decoration:none}
.footer-col a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:22px;font:400 12px var(--font-mono);color:rgba(255,255,255,.6);flex-wrap:wrap;gap:10px}

/* ---------- Inner page hero (Company overview / business pages) ---------- */
.page-hero{background:var(--paper);padding:64px 44px 80px}
.page-title{margin:0 0 46px;font:600 clamp(40px,7vw,88px)/.94 var(--font-display);letter-spacing:-.045em;color:var(--ink)}
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.fact-table{display:grid;grid-template-columns:220px 1fr;border-top:1px solid rgba(var(--ink-rgb),.16)}
.fact-table > div{padding:22px 0;font:400 19px/1.5 var(--font-display);color:var(--ink)}
.fact-table > div.label{font:700 13px var(--font-mono);letter-spacing:.14em;color:rgba(var(--ink-rgb),.64)}
.fact-table > div.accent{color:var(--blue)}
/* placeholder for content that still has to be written */
.todo-note{display:inline-block;padding:10px 14px;border:2px dashed #d97706;background:#fff7e6;color:#8a4b00;font:700 13px/1.4 var(--font-mono);letter-spacing:.14em}
.fact-table > div:nth-child(n+3){border-top:1px solid rgba(var(--ink-rgb),.16)}
/* to-do marker for content still to be written: remove the element when the text is added */
.pull-quote{margin:44px 0 0;font:400 26px/1.4 var(--font-display);letter-spacing:-.015em;color:var(--blue)}
.photo-block{background:var(--placeholder);border:1px dashed rgba(var(--ink-rgb),.3);height:560px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.photo-block span{font:700 13px/1.7 var(--font-mono);letter-spacing:.14em;color:rgba(var(--ink-rgb),.64)}
.photo-block img{width:100%;height:100%;object-fit:cover;display:block}
.photo-block--trucks img{object-position:80% center}
.photo-block:has(img){border-style:solid;border-color:rgba(var(--ink-rgb),.14)}
/* About page photos share the framed look of the business pages (brackets and hatch sit outside the box) */
.photo-block.frame,.network-feature.frame,.network-card.frame{border:0;overflow:visible}
.network-feature.frame{margin-bottom:68px}
.photo-block.frame{display:block}

.timeline{background:var(--ink);padding:88px 44px;overflow-x:clip;--tl-gutter:44px}
/* One coordinate system: every milestone draws its own dot and its own piece of the line from the same centre point
   (--tl-cx / --tl-cy inside the item), so line, dots and beam stay aligned at any width. */
.timeline-grid{--tl-dur:2.6s;--tl-cx:50%;--tl-cy:-42px;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;padding-top:56px}
.timeline-item{position:relative;padding:0 10px;text-align:center}
.timeline-item:nth-child(1){--i:0;--seg-a:#7F6ACE;--seg-b:#9380DA}
.timeline-item:nth-child(2){--i:1;--seg-a:#9380DA;--seg-b:#A697E7}
.timeline-item:nth-child(3){--i:2;--seg-a:#A697E7;--seg-b:#BAADF3}
.timeline-item:nth-child(4){--i:3;--seg-a:#BAADF3;--seg-b:#CDC3FF}
.timeline-item:nth-child(5){--i:4}
/* the dot, centred on the item's centre point */
.timeline-item::before{content:"";position:absolute;z-index:2;box-sizing:border-box;width:16px;height:16px;left:calc(var(--tl-cx) - 8px);top:calc(var(--tl-cy) - 8px);border-radius:50%;background:var(--ink);border:2px solid rgba(255,255,255,.35);transition:background-color .3s ease,border-color .3s ease}
/* the line: from this dot's centre to the next dot's centre (grey track, purple fill that runs in as the dots light up) */
.timeline-item:not(:last-child)::after{content:"";position:absolute;z-index:1;left:var(--tl-cx);top:calc(var(--tl-cy) - 1px);width:100%;height:2px;background-image:linear-gradient(90deg,var(--seg-a),var(--seg-b)),linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16));background-size:0% 100%,100% 100%;background-repeat:no-repeat;transition:background-size calc(var(--tl-dur) * .25) linear calc(var(--i) * var(--tl-dur) * .25)}
.timeline-grid.is-in .timeline-item:not(:last-child)::after{background-size:100% 100%,100% 100%}
.timeline-item p + h3{margin-top:22px}
.timeline-grid.is-in .timeline-item::before{background:var(--blue-accent);border-color:var(--blue-accent);transition-delay:calc(var(--i) * var(--tl-dur) * .25)}
.timeline-item--today::before{width:20px;height:20px;left:calc(var(--tl-cx) - 10px);top:calc(var(--tl-cy) - 10px)}
.timeline-item--today .timeline-year{color:#fff}
.timeline-grid.is-in .timeline-item--today::before{animation:tlpulse 2.2s ease-out calc(var(--tl-dur) * .8 + .4s) 5}
.timeline-item--today::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  left:var(--tl-cx);top:calc(var(--tl-cy) - 70px);width:calc(50% + var(--tl-gutter));height:140px;
  /* light stream leaving the Today dot: thin at the dot centre, widening symmetrically along a parabola, fading out */
  clip-path:polygon(0.0% 50.00%,4.2% 49.92%,8.3% 49.66%,12.5% 49.24%,16.7% 48.65%,20.8% 47.89%,25.0% 46.96%,29.2% 45.87%,33.3% 44.60%,37.5% 43.17%,41.7% 41.57%,45.8% 39.80%,50.0% 37.86%,54.2% 35.75%,58.3% 33.47%,62.5% 31.03%,66.7% 28.41%,70.8% 25.63%,75.0% 22.68%,79.2% 19.56%,83.3% 16.27%,87.5% 12.81%,91.7% 9.19%,95.8% 5.39%,100.0% 1.43%,100.0% 98.57%,95.8% 94.61%,91.7% 90.81%,87.5% 87.19%,83.3% 83.73%,79.2% 80.44%,75.0% 77.32%,70.8% 74.37%,66.7% 71.59%,62.5% 68.97%,58.3% 66.53%,54.2% 64.25%,50.0% 62.14%,45.8% 60.20%,41.7% 58.43%,37.5% 56.83%,33.3% 55.40%,29.2% 54.13%,25.0% 53.04%,20.8% 52.11%,16.7% 51.35%,12.5% 50.76%,8.3% 50.34%,4.2% 50.08%,0.0% 50.00%);
  background:
    linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,0) 85%) 0 69px/100% 2px no-repeat,
    linear-gradient(90deg,rgba(var(--accent-pale-rgb),.95) 0%,rgba(var(--accent-rgb),.72) 24%,rgba(var(--accent-rgb),.3) 60%,rgba(var(--accent-rgb),0) 100%);
  transform:scaleX(0);transform-origin:left center;opacity:0;
  transition:transform 1.5s cubic-bezier(.2,.6,.2,1) var(--tl-dur),opacity 1s ease var(--tl-dur);
}
.timeline-grid.is-in .timeline-item--today::after{transform:scaleX(1);opacity:1}
@keyframes tlpulse{0%{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.6)}100%{box-shadow:0 0 0 16px rgba(var(--accent-rgb),0)}}
@media (prefers-reduced-motion:reduce){.timeline-item::before,.timeline-item::after{transition:none}.timeline-grid.is-in .timeline-item--today::before{animation:none}}
.timeline-year{font:700 13px var(--font-mono);letter-spacing:.14em;color:#9a89e2;margin-bottom:20px}
.timeline-item h3{margin:0 0 12px;font:600 clamp(18px,1.85vw,26px)/1.1 var(--font-display);letter-spacing:-.025em;color:#fff;overflow-wrap:break-word}
.timeline-item p{margin:0;font:400 15px/1.6 var(--font-display);color:rgba(255,255,255,.66)}

.cta-band{background:var(--blue);padding:60px 44px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
/* the question box takes all the width the button leaves free; the font scales so the longest question (about 28em wide)
   fits on one line from roughly 1100px up, and keeps growing on very wide screens */
.cta-band p{margin:0;flex:1 1 560px;min-width:0;font:600 clamp(22px,calc((100vw - 380px) / 29),60px)/1.2 var(--font-display);letter-spacing:-.03em;color:#fff}
/* Typewriter: every question sits in the same grid cell (invisible, only to size the box by the longest one),
   the typed text is layered on top, so the band and the button never change height while it types. */
.cta-type{display:grid}
.cta-type-q,.cta-type-live{grid-area:1/1}
.cta-type-q:not(:first-child){visibility:hidden}
.cta-type.is-typing .cta-type-q:first-child{opacity:0}
.cta-type-cursor{display:inline-block;width:2px;height:.95em;margin-left:3px;vertical-align:-.1em;background:#fff;animation:ctablink 1s steps(1) infinite}
@keyframes ctablink{50%{opacity:0}}

.mini-footer{background:var(--ink);padding:26px 44px;display:flex;align-items:center;justify-content:space-between;font:400 12px var(--font-mono);color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.12);flex-wrap:wrap;gap:10px}

/* ---------- Business detail page ---------- */
.detail-hero{position:relative;background:var(--paper);overflow:hidden;padding:64px 44px;border-bottom:1px solid rgba(var(--ink-rgb),.12);background-image:linear-gradient(90deg,rgba(var(--ink-rgb),.07) 1px,transparent 1px);background-size:120px 100%}
.detail-eyebrow{font:700 13px var(--font-mono);letter-spacing:.14em;color:var(--blue);margin-bottom:20px}
.detail-title{margin:0;font:600 clamp(40px,7vw,84px)/.95 var(--font-display);letter-spacing:-.04em;color:var(--ink)}

.detail-body{background:var(--paper);padding:72px 44px 96px;overflow-x:clip}
.detail-services{display:flex;flex-direction:column;max-width:1440px}
.service-block{padding:32px 0;border-top:1px solid rgba(var(--ink-rgb),.16)}
.service-block:first-child{padding-top:0;border-top:0}
.service-block .service-text{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:56px;align-items:start}
.service-text[id]{scroll-margin-top:150px}
.service-block h2{margin:0;font:600 32px/1.1 var(--font-display);letter-spacing:-.025em;color:var(--blue)}
.service-block p{margin:0;font:400 17px/1.6 var(--font-display);color:rgba(var(--ink-rgb),.72);max-width:680px}
.service-copy p + p{margin-top:14px}

/* ---------- Framed photos: white frame, CHB blue corner brackets, hatch gradient peeking out behind ---------- */
.frame{position:relative;isolation:isolate;margin:0;padding:6px;background:#fff;box-shadow:0 12px 32px rgba(var(--ink-rgb),.2)}
.frame img{display:block;width:100%;object-fit:cover}
.frame::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:22px -18px -22px 18px;background:var(--hatch) 0 0/100% 100% no-repeat}
.frame--flip::before{transform:scaleX(-1);inset:22px 18px -22px -18px}
.frame::after{content:"";position:absolute;inset:-10px;pointer-events:none;background-image:linear-gradient(to right,var(--blue) 26px,transparent 26px,transparent calc(100% - 26px),var(--blue) calc(100% - 26px)),linear-gradient(to right,var(--blue) 26px,transparent 26px,transparent calc(100% - 26px),var(--blue) calc(100% - 26px)),linear-gradient(to bottom,var(--blue) 26px,transparent 26px,transparent calc(100% - 26px),var(--blue) calc(100% - 26px)),linear-gradient(to bottom,var(--blue) 26px,transparent 26px,transparent calc(100% - 26px),var(--blue) calc(100% - 26px));background-size:100% 2px,100% 2px,2px 100%,2px 100%;background-position:0 0,0 100%,0 0,100% 0;background-repeat:no-repeat}
/* Hover: only the picture zooms inside its frame (Motion hover(scale) idea in CSS); frame, hatch and brackets stay put */
.frame-img{display:block;overflow:hidden}
.photo-block .frame-img{height:100%}
.frame-img img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  .frame:hover .frame-img img{transform:scale(1.06)}
}
@media (prefers-reduced-motion:reduce){.frame-img img{transition:none}.frame:hover .frame-img img{transform:none}}
/* two photos side by side */
.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1440px;margin-top:64px}
.photo-pair .frame img{aspect-ratio:16/10}
.frame--truck img{object-position:center 10%}
/* wide banner below the pair */
.detail-banner{max-width:1440px;margin-top:80px}
.detail-banner img{height:clamp(200px,27vw,400px)}
.banner-raillex-train img{object-position:center 46%}
.banner-trucks-row img{object-position:center 58%}
.banner-warehouse-aisle img{object-position:center 60%}
.banner-dock-forwarding-wide img{object-position:center 55%}
/* Zigzag rows: each text block sits beside its own photo, sides alternate */
.service-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center;padding:52px 0}
.service-row:first-child{padding-top:10px}
.service-row--reverse .frame{order:-1}
.service-row .service-text{grid-template-columns:1fr;gap:16px}
.service-row .frame img{aspect-ratio:3/2}
.service-copy--list .biz-list{margin-top:0}
.detail-services > .detail-banner{width:100%;margin:36px 0 28px}
.detail-services > .detail-banner + .service-block{border-top:0}
/* Manpower: text beside one larger photo */
.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) min(46%,640px);gap:72px;align-items:start;max-width:1440px}
.detail-layout .service-block .service-text{grid-template-columns:1fr;gap:14px}
.detail-layout .frame img{aspect-ratio:3/2}

/* ---------- Entrance and scroll reveals ----------
   Targets start hidden (only when scripting is on) and script.js adds .is-in when they should appear,
   so nothing flashes visible first. If the script never runs, everything appears after 4 s. */
.js :is(.motto,.hero-title,.hero-sub,.hero-actions,.detail-eyebrow,.detail-title,.page-title,.hero-fact){opacity:0;transform:translateY(18px)}
.js .hero-photo{opacity:0}
.js :is(.contact-grid,.cta-band,.overview-grid,.footer-top,.film-video,.network-grid,.growth-grid){opacity:0;transform:translateY(24px)}
.js .biz-row{opacity:0;transform:translateX(-24px)}
.js .service-block{opacity:0;transform:translateY(20px)}
.js .timeline-item > *{opacity:0;transform:translateY(20px)}
.js .corridor-map:not(.is-in) :is(.corridor-line path,.corridor-marker){opacity:0}
.js .is-in{opacity:1;transform:none;transition:opacity .5s ease-out var(--d,0s),transform .5s ease-out var(--d,0s)}
/* the blue film background fades in together with its video (opacity only: the mirrored one keeps its scaleX) */
.js .film::before{opacity:0}
.js .film.is-in{transition:none}
.js .film.is-in::before{opacity:1;transition:opacity .5s ease-out var(--d,0s)}
.js .hero-photo.is-in{transition-duration:.8s,.8s}
.js .film-video.is-in{transition-duration:.3s,.3s}
.js .biz-row.is-in{transition:opacity .45s ease-out var(--d,0s),transform .45s ease-out var(--d,0s),background .18s}
.js .corridor-map.is-in{opacity:1;transform:none;transition:none}
.js .corridor-map.is-in .corridor-line path{transition:opacity .5s ease-out calc(var(--k,0) * .05s)}
.js .corridor-map.is-in .corridor-marker{transition:opacity .35s ease-out calc(.25s + var(--k,0) * .06s)}
html.js:not(.js-ready) .film::before{animation:rvfade .01s 4s forwards}
html.js:not(.js-ready) :is(.motto,.hero-title,.hero-sub,.hero-actions,.detail-eyebrow,.detail-title,.page-title,.hero-fact,.hero-photo,.contact-grid,.cta-band,.overview-grid,.footer-top,.film-video,.network-grid,.growth-grid,.biz-row,.service-block,.timeline-item > *){animation:rvfallback .01s 4s forwards}
@keyframes rvfallback{to{opacity:1;transform:none}}
@keyframes rvfade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .js .film::before{opacity:1}
  .js :is(.motto,.hero-title,.hero-sub,.hero-actions,.detail-eyebrow,.detail-title,.page-title,.hero-fact,.hero-photo,.contact-grid,.cta-band,.overview-grid,.footer-top,.film-video,.network-grid,.growth-grid,.biz-row,.service-block,.timeline-item > *){opacity:1;transform:none}
  .js .corridor-map:not(.is-in) :is(.corridor-line path,.corridor-marker){opacity:1}
}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .hero-photo{width:min(38%,460px)}
}
@media (max-width:960px){
  .nav-links,.lang-switch,.btn-cta{display:none}
  .nav-toggle{display:flex}
  .site-header{padding:0 20px}
  .hero{padding:44px 20px 0}
  .hero-photo{display:none}
  .detail-hero{padding:44px 20px}
  .detail-body{padding-top:44px;padding-bottom:56px}
  .service-block{padding:26px 0}
  .service-block .service-text{grid-template-columns:1fr;gap:14px}
  .photo-pair{grid-template-columns:1fr;gap:44px;margin-top:44px}
  .frame::before{inset:12px -8px -12px 8px}
  .frame--flip::before{inset:12px 8px -12px -8px}
  .detail-banner{margin-top:56px}
  .detail-layout{grid-template-columns:1fr;gap:44px}
  .service-row{grid-template-columns:1fr;gap:44px;padding:36px 0}
  .service-row--reverse .frame{order:0}
  .service-row:first-child{padding-top:6px}
  .detail-services > .detail-banner{margin:28px 0 20px}
  .fact-table{grid-template-columns:1fr}
  .fact-table > div{padding:14px 0}
  .fact-table > div.label{padding-bottom:0}
  .fact-table > div:not(.label){padding-top:6px}
  .fact-table > div:not(.label):nth-child(n+3){border-top:0}
  .business,.contact,.corridor,.growth,.film,.network,.site-footer,.page-hero,.timeline,.cta-band,.detail-body{padding-left:20px;padding-right:20px}
  .cta-band p{flex-basis:100%;font-size:clamp(22px,calc((100vw - 40px) / 29),34px)}
  .biz-row{grid-template-columns:1fr;gap:14px}
  .biz-photo{width:min(100%,380px);height:auto;aspect-ratio:3/2} /* keep a normal photo shape instead of a full-width 118px strip */
  .biz-more{justify-self:start}
  .hero-facts{grid-template-columns:1fr 1fr;gap:20px 24px}
  .hero-fact{border-left:0;padding:16px 0 0;border-top:1px solid rgba(var(--ink-rgb),.16)}
  .hero-fact::after{display:none}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .corridor-grid{grid-template-columns:1fr;gap:32px}
  .growth-grid{grid-template-columns:1fr;gap:28px;margin-top:32px}
  .film-video{aspect-ratio:16/9}
  .film::before{background-image:var(--hatch-mobile)}
  .corridor-text{max-width:none}
  .network-grid{grid-template-columns:1fr;gap:44px}
  .network-feature img{max-height:none}
  .overview-grid{grid-template-columns:1fr;gap:40px}
  .photo-block{height:300px}
  .timeline-grid{grid-template-columns:1fr;padding:0 0 0 40px;--tl-cx:-28px;--tl-cy:12px}
  .timeline-item{padding:0 0 34px;text-align:left}
  .timeline-item:last-child{padding-bottom:0}
  .timeline-item:not(:last-child)::after{left:calc(var(--tl-cx) - 1px);top:var(--tl-cy);width:2px;height:100%;background-image:linear-gradient(180deg,var(--seg-a),var(--seg-b)),linear-gradient(rgba(255,255,255,.16),rgba(255,255,255,.16));background-size:100% 0%,100% 100%}
  .timeline-item--today::after{left:calc(var(--tl-cx) - 30px);top:var(--tl-cy);width:60px;height:84px;clip-path:polygon(50.00% 0.0%,49.91% 4.2%,49.65% 8.3%,49.22% 12.5%,48.61% 16.7%,47.83% 20.8%,46.88% 25.0%,45.75% 29.2%,44.44% 33.3%,42.97% 37.5%,41.32% 41.7%,39.50% 45.8%,37.50% 50.0%,35.33% 54.2%,32.99% 58.3%,30.47% 62.5%,27.78% 66.7%,24.91% 70.8%,21.88% 75.0%,18.66% 79.2%,15.28% 83.3%,11.72% 87.5%,7.99% 91.7%,4.08% 95.8%,0.00% 100.0%,100.00% 100.0%,95.92% 95.8%,92.01% 91.7%,88.28% 87.5%,84.72% 83.3%,81.34% 79.2%,78.12% 75.0%,75.09% 70.8%,72.22% 66.7%,69.53% 62.5%,67.01% 58.3%,64.67% 54.2%,62.50% 50.0%,60.50% 45.8%,58.68% 41.7%,57.03% 37.5%,55.56% 33.3%,54.25% 29.2%,53.12% 25.0%,52.17% 20.8%,51.39% 16.7%,50.78% 12.5%,50.35% 8.3%,50.09% 4.2%,50.00% 0.0%);background:linear-gradient(180deg,rgba(var(--accent-pale-rgb),.95),rgba(var(--accent-rgb),.3) 60%,rgba(var(--accent-rgb),0));transform:scaleY(0);transform-origin:top center}
  .timeline-grid.is-in .timeline-item--today::after{transform:scaleY(1);opacity:1}
  .footer-top{flex-direction:column;gap:30px}
  .site-footer .logo{padding:12px 18px}
  .site-footer .logo img{height:46px}
  .footer-cols{gap:40px}
  .form-row{grid-template-columns:1fr}

  /* Menu: the white panel grows as a circle out of the toggle button and shrinks back into it; the items fly in one by one */
  .nav-mobile{
    --spring:cubic-bezier(.2,.8,.2,1);
    --origin:calc(100% - 33px) calc(var(--header-h) / -2);
    display:block;position:fixed;inset:var(--header-h) 0 0 0;background:var(--paper);z-index:40;
    padding:20px;overflow-y:auto;
    clip-path:circle(0px at var(--origin));visibility:hidden;
    transition:clip-path .4s cubic-bezier(.4,0,.2,1) .2s,visibility 0s linear .6s;
  }
  @supports (transition-timing-function:linear(0,1)){
    .nav-mobile{--spring:linear(0,.22 6%,.62 13%,.92 20%,1.07 27%,1.09 33%,1.04 41%,.99 52%,1 70%,1)}
  }
  .nav-mobile.is-open{
    clip-path:circle(150vmax at var(--origin));visibility:visible;
    transition:clip-path .8s var(--spring),visibility 0s;
  }
  .nav-mobile > ul > li,.nav-mobile-foot{
    opacity:0;transform:translateY(50px);
    transition:opacity .25s ease calc(var(--r,0) * .05s),transform .3s ease calc(var(--r,0) * .05s);
  }
  .nav-mobile.is-open > ul > li,.nav-mobile.is-open .nav-mobile-foot{
    opacity:1;transform:none;
    transition:opacity .4s ease calc(.2s + var(--i,0) * .07s),transform .6s cubic-bezier(.2,.9,.3,1.15) calc(.2s + var(--i,0) * .07s);
  }
  .nav-mobile ul{list-style:none;margin:0;padding:0}
  .nav-mobile > ul > li{border-bottom:1px solid rgba(var(--ink-rgb),.14)}
  .nav-mobile a{display:block;padding:16px 4px;color:var(--ink);text-decoration:none;font:500 16px var(--font-display);transform-origin:left center;transition:transform .15s ease}
  .nav-mobile a:active{transform:scale(.95)}
  @media (hover:hover){.nav-mobile a:hover{transform:scale(1.04)}}
  .nav-mobile .sub-list{padding-left:14px}
  .nav-mobile .sub-list a{color:rgba(var(--ink-rgb),.65);font-size:14px;padding:12px 4px}
  .nav-mobile-foot{display:flex;gap:12px;padding:20px 4px}
}
@media (max-width:960px) and (prefers-reduced-motion:reduce){
  .nav-mobile{clip-path:none;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s}
  .nav-mobile.is-open{clip-path:none;opacity:1;transition:opacity .2s ease,visibility 0s}
  .nav-mobile > ul > li,.nav-mobile-foot,.nav-mobile.is-open > ul > li,.nav-mobile.is-open .nav-mobile-foot{opacity:1;transform:none;transition:none}
  .nav-mobile a,.nav-mobile a:active,.nav-mobile a:hover{transform:none;transition:none}
  .nav-toggle span{transition:none}
}

/* ---------- Accessibility: skip link, tiny phones ---------- */
.skip-link{position:fixed;left:12px;top:-60px;z-index:100;padding:12px 18px;background:var(--blue);color:#fff;font:600 14px var(--font-display);text-decoration:none;transition:top .15s ease}
.skip-link:focus{top:12px;outline:2px solid #fff;outline-offset:2px}
@media (max-width:350px){.hero-title{font-size:38px}.detail-title,.page-title{font-size:30px}}

/* LogimeAll: the wordmark is much wider than the other logos, so it is drawn a little smaller */
html.theme-bw .logo img{height:calc(var(--logo-h) * .58)}
html.theme-bw .site-footer .logo img{height:36px}
.service-copy .service-link{margin-top:26px}
.banner-airport-forwarding img{object-position:center 58%}
.banner-raillex-loading img{object-position:center 42%}