/* Cargo Solutions site styles. See STYLE.md.
   The logo typeface, Archivo Black, is used for all text. One dark charcoal theme with a light header
   so the logo keeps its black S. Everything below the header is centred.
   Radius system: 8px for buttons, panels and the language switch; circles for icon buttons, stops and flags. */
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;src:url(../assets/fonts/archivo-black-latin.woff2) format("woff2")}
:root{--bg:#17191b;--panel:#1f2224;--g:#2a8040;--gd:#236c35;--gl:#6cca86;--ink:#f2f3f3;--mute:#b4b9bb;--line:rgba(255,255,255,.14);--line2:rgba(255,255,255,.3);
  --hd:#f3f5f3;--hd-ink:#131614;--hd-mute:#434a45;--hd-line:#d3d9d4;--r:8px;--bar:76px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-padding clears the sticky header and the logo plate hanging below it */
html{-webkit-text-size-adjust:100%;scroll-padding-top:200px}
body{min-height:100vh;min-height:100svh;font-family:"Archivo Black","Arial Black",sans-serif;font-weight:400;font-size:16px;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,b{font-weight:400}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.ic{width:1em;height:1em;fill:currentColor;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--hd-ink);color:#fff;padding:12px 16px;border-radius:var(--r)}
.skip:focus{top:12px}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}

/* Header: a light sticky bar (solid, no blur: blur over the photo flickers on phones while scrolling).
   The logo sits on a light plate that hangs well below the bar. */
.hd{position:sticky;top:0;z-index:50;background:var(--hd);border-bottom:1px solid var(--hd-line);color:var(--hd-ink)}
.hd .wrap{position:relative;display:grid;grid-template-columns:1fr 320px 1fr;align-items:center;height:var(--bar)}
.left{display:flex;align-items:center;gap:26px}
.hd nav{display:flex;gap:26px;font-size:14px;color:var(--hd-mute);white-space:nowrap}
.hd nav a{transition:color .2s}.hd nav a:hover{color:var(--hd-ink)}
.logo{position:absolute;left:50%;top:0;transform:translateX(-50%);width:320px;height:188px;display:grid;place-items:center;background:var(--hd);border-radius:0 0 22px 22px;isolation:isolate}
.logo::before{content:"";position:absolute;inset:var(--bar) 0 0;z-index:-1;border-radius:0 0 22px 22px;box-shadow:0 16px 34px rgba(0,0,0,.42)}
.logo img{width:264px;height:auto}
.acts{grid-column:3;display:flex;justify-content:flex-end;align-items:center;gap:10px}
.addr{display:flex;align-items:center;gap:8px;margin-right:12px;font-size:13px;letter-spacing:.02em;line-height:1.35;color:var(--hd-mute);white-space:nowrap;transition:color .2s}
.addr:hover{color:var(--hd-ink)}
.addr .ic{font-size:19px;color:var(--g)}
.addr span span{margin-left:.35em}
.ib{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:21px;border:1px solid var(--line2);transition:transform .2s,background .2s,border-color .2s,color .2s}
.ib:hover{border-color:var(--ink)}.ib:active{transform:scale(.96)}
.hd .ib{border-color:#b9c1bb;background:#fff}.hd .ib:hover{border-color:var(--hd-ink)}
.ib.wa,.hd .ib.wa{background:var(--g);border-color:var(--g);color:#fff}.ib.wa:hover,.hd .ib.wa:hover{background:var(--gd);border-color:var(--gd)}
.hd :focus-visible{outline-color:var(--hd-ink)}
/* Language switch: flags. Both stay at full strength; the active one gets a green ring. */
.lang{flex:none;display:flex;border:1px solid #b9c1bb;border-radius:var(--r);overflow:hidden;background:#fff}
.lang button{padding:9px 9px;transition:background .2s}
.lang button:focus-visible{outline-offset:-3px}
.lang button[aria-pressed=true]{background:#dfe5e0}
.lang-flag{width:24px;height:18px;border-radius:3px;box-shadow:0 0 0 1px rgba(128,128,128,.45)}
.lang button[aria-pressed=true] .lang-flag{box-shadow:0 0 0 2px #fff,0 0 0 4px #3fa35a}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:56px;padding:0 30px;border-radius:var(--r);font-size:17px;white-space:nowrap;transition:transform .2s,background .2s,border-color .2s}
.btn .ic{font-size:22px}
.btn:active{transform:scale(.98)}
.btn.p{background:var(--g);color:#fff}.btn.p:hover{background:var(--gd)}
.btn.s{border:1px solid rgba(255,255,255,.55);background:rgba(23,25,27,.5)}.btn.s:hover{border-color:#fff}

/* Hero: full-bleed parcel photo under a light gradient; text centred under the logo plate, route across the lower part.
   Height uses svh (not dvh): it must not change when the mobile address bar hides on scroll, or the photo rescales and jumps.
   The photo has no CSS filter (its tone is baked into the file) so it is not re-filtered while scrolling. */
.hero{position:relative;overflow:hidden;isolation:isolate;min-height:min(88vh,880px);min-height:min(88svh,880px);display:flex;text-align:center}
.bg{position:absolute;inset:0;z-index:-1;background:#3a2c22}
.bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 46% at 50% 36%,rgba(16,18,19,.62),rgba(16,18,19,.2) 70%,rgba(16,18,19,0)),linear-gradient(180deg,rgba(16,18,19,.2),rgba(16,18,19,0) 30%,rgba(23,25,27,.72) 74%,var(--bg))}
.hero .wrap{width:100%;display:flex;flex-direction:column;align-items:center;padding-top:152px;padding-bottom:30px}
.top{font-size:clamp(17px,1.9vw,25px);line-height:1.25;letter-spacing:.01em;text-shadow:0 2px 14px rgba(0,0,0,.55)}
h1{font-size:clamp(26px,3.7vw,52px);line-height:1.05;letter-spacing:-.02em;white-space:nowrap;margin:12px 0 30px;text-shadow:0 2px 18px rgba(0,0,0,.55)}
h1 em{font-style:normal;color:var(--gl)}
.cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Route. Tunables on .rt: --h arc height, --s stop size, --f flag size, --tp / --ts one-way travel time for
   plane / ship. The plane's x is linear and its y a parabola, so it follows the drawn arc exactly. Both
   vehicles travel there AND back (alternate) and turn around hidden behind the stops. */
.rt{container-type:inline-size;width:100%;margin-top:auto;padding-top:84px;text-align:left;--h:clamp(84px,13cqw,168px);--s:88px;--f:24px;--tp:11s;--ts:17s;--vw:64px;--rt-line:rgba(255,255,255,.92)}
.rt-track{position:relative;height:var(--h);margin:0 calc(var(--s)/2);--w:calc(100cqw - var(--s));--a:atan2(calc(var(--h)*4),var(--w))}
.rt-arc{position:absolute;inset:0;width:100%;height:100%;max-width:none;overflow:visible}
.rt-arc path{fill:none;stroke:var(--gl);stroke-width:2;stroke-dasharray:3 9;stroke-linecap:round}
.rt-sea{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--rt-line)}
.rt-x,.rt-y,.rt-flip,.rt-tilt{position:absolute;left:0;bottom:0;width:0;height:0}
.rt-plane{transform:translateX(calc(var(--w)*.3))}
.rt-plane .rt-y{transform:translateY(calc(var(--h)*-.84))}
.rt-plane .rt-tilt{transform:rotate(calc(var(--a)*-.4))}
.rt-ship{transform:translateX(calc(var(--w)*.64))}
.rt-ship .rt-flip{transform:scaleX(-1)}
.veh{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(23,25,27,.88);border:1.5px solid #fff;color:#fff;font-size:22px}
.veh .ico-plane{transform:rotate(90deg)}
.veh .illu{width:var(--vw);max-width:none}
/* Illustration mode (?veh=illu): the artwork on a white pill instead of an icon in a dark chip */
[data-veh=illu] .veh{width:auto;height:auto;background:#fff;border:0;border-radius:999px;padding:7px 14px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.rt-stop{position:absolute;z-index:2;bottom:calc(var(--s)/-2);width:var(--s);height:var(--s)}
.rt-stop.a{left:calc(var(--s)/-2)}.rt-stop.b{right:calc(var(--s)/-2)}
.rt-stop .ph-crop{display:block;width:100%;height:100%;overflow:hidden;border-radius:50%;border:2px solid rgba(255,255,255,.95);background:var(--bg)}
.rt-stop .ph-crop img{width:100%;height:100%;max-width:none;object-fit:cover;border-radius:50%;object-position:var(--p,50% 50%);transform:scale(var(--z,1));transform-origin:var(--o,50% 50%)}
.rt-flag{position:absolute;left:50%;bottom:calc(var(--f)/-2);width:var(--f);height:var(--f);margin-left:calc(var(--f)/-2);border-radius:50%;box-shadow:0 0 0 1.5px rgba(255,255,255,.95)}
.via{position:absolute;left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:.03em;color:#eef1ef;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.via.air{bottom:calc(100% + 32px)}.via.sea{top:calc(100% + 30px)}
.ends{display:flex;justify-content:space-between;align-items:flex-start;margin-top:calc(var(--s)/2 + var(--f)/2 + 12px)}
.ends b{display:block;font-size:clamp(17px,1.9cqw,22px);letter-spacing:-.01em}
.ends span{font-size:13px;letter-spacing:.02em;color:#d3d9d5}
.ends p:last-child{text-align:right}
/* Pause control for the route animation; hidden when there is no animation to pause */
.rt-toggle{display:none;width:44px;height:44px;border-radius:50%;place-items:center;font-size:15px;color:#fff;border:1px solid rgba(255,255,255,.5);background:rgba(23,25,27,.55);transition:border-color .2s}
.rt-toggle:hover{border-color:#fff}
.rt-toggle .play,.rt-toggle[aria-pressed=true] .pause{display:none}
.rt-toggle[aria-pressed=true] .play{display:block}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  .in{animation:in .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0)*90ms)}
  @keyframes in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  .rt-toggle{display:grid}
  .rt-plane{animation:rt-go var(--tp) linear calc(var(--tp)*-.3) infinite alternate}
  .rt-plane .rt-y{animation:rt-lift var(--tp) calc(var(--tp)*-.3) infinite}
  .rt-plane .rt-flip{animation:rt-flip calc(var(--tp)*2) linear calc(var(--tp)*-.3) infinite}
  .rt-plane .rt-tilt{animation:rt-bank var(--tp) linear calc(var(--tp)*-.3) infinite}
  .rt-ship{animation:rt-go var(--ts) linear calc(var(--ts)*-1.36) infinite alternate}
  .rt-ship .rt-flip{animation:rt-flip calc(var(--ts)*2) linear calc(var(--ts)*-1.36) infinite}
  .rt-paused .rt-x,.rt-paused .rt-y,.rt-paused .rt-flip,.rt-paused .rt-tilt{animation-play-state:paused}
  @keyframes rt-go{from{transform:translateX(0)}to{transform:translateX(var(--w))}}
  @keyframes rt-lift{0%,100%{transform:translateY(0);animation-timing-function:cubic-bezier(.333,.667,.667,1)}50%{transform:translateY(calc(var(--h)*-1));animation-timing-function:cubic-bezier(.333,0,.667,.333)}}
  @keyframes rt-flip{0%,49.999%{transform:scaleX(1)}50%,100%{transform:scaleX(-1)}}
  @keyframes rt-bank{from{transform:rotate(calc(var(--a)*-1))}to{transform:rotate(var(--a))}}
}
/* Browsers without container query units cannot size the route; leave it out rather than show it collapsed */
@supports not (width:1cqw){.rt{display:none}.hero .wrap{padding-bottom:64px}}

/* Services: titles only, centred. The preferred service is the one solid green block. Each row opens WhatsApp. */
.svc{max-width:780px;margin:0 auto;padding:72px 0 80px}
.row{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:20px;padding:26px 28px;border-bottom:1px solid var(--line);transition:background .2s}
.svc li:last-child .row{border-bottom:0}
.row:hover{background:rgba(255,255,255,.04)}
.row>.ic{font-size:28px;color:var(--gl)}
.row h3{font-size:clamp(18px,2vw,22px);letter-spacing:-.01em;line-height:1.2}
.row .go{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:21px;border:1px solid var(--gl);color:var(--gl);transition:transform .2s}
.row:hover .go{transform:translateX(3px)}
.row.pref{background:var(--g);color:#fff;border:0;border-radius:var(--r);padding:34px 28px;margin-bottom:6px}
.row.pref:hover{background:var(--gd)}
.row.pref>.ic{color:#fff;font-size:32px}
.row.pref h3{font-size:clamp(22px,2.9vw,34px)}
.row.pref .go{background:#fff;border-color:#fff;color:var(--g);width:52px;height:52px;font-size:25px}
.tag{display:inline-block;font-size:12px;letter-spacing:.03em;border:1px solid rgba(255,255,255,.85);border-radius:var(--r);padding:4px 10px;margin-bottom:12px}

/* Contact: buttons, details and social links, centred */
.ct{border-top:1px solid var(--line);padding:72px 0 88px;display:flex;flex-direction:column;align-items:center;text-align:center}
dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px;width:100%;max-width:960px;margin-top:56px}
dt{font-size:13px;letter-spacing:.04em;color:var(--mute);margin-bottom:10px}
dd{font-size:16px;letter-spacing:.01em;line-height:1.5}
dd a{display:inline-block;padding:10px 0;margin:-10px 0;transition:color .2s}dd a:hover{color:var(--gl)}
.tel{font-size:22px;letter-spacing:0}
.hours{grid-column:span 2}
.hrs{display:inline-grid;grid-template-columns:auto auto;gap:4px 18px;text-align:left;font-variant-numeric:tabular-nums}
.hrs span:nth-child(odd){text-align:right}
.hrs .off{color:var(--mute)}
.soc{display:flex;gap:10px;justify-content:center}
.soc .ib{width:52px;height:52px;font-size:24px}
.soc a.ib:hover{border-color:var(--gl);color:var(--gl)}
.soc .soon{opacity:.45}
footer{background:var(--panel);border-top:1px solid var(--line);padding:28px 0;color:var(--mute);font-size:13px;letter-spacing:.02em}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
footer img{height:54px;width:auto}
footer a{display:inline-block;padding:12px 0}
footer a:hover{color:var(--ink)}
.credit{flex-basis:100%;text-align:center;font-size:12px;line-height:1.5}
.credit a{padding:0;text-decoration:underline}

@media (max-width:1280px){.addr span span{display:block;margin-left:0}}
@media (max-width:1100px){
  html{scroll-padding-top:176px}
  .left,.hd nav{gap:18px}
  .hd .wrap{grid-template-columns:1fr 270px 1fr}.logo{width:270px;height:164px}.logo img{width:222px}
  .hero .wrap{padding-top:132px}
}
/* Phone and small-tablet layout */
@media (max-width:920px){
  :root{--bar:62px}
  html{scroll-padding-top:124px}
  body{font-size:15px}
  .wrap{padding:0 16px}
  .hd .wrap{grid-template-columns:1fr 168px 1fr;padding:0 10px}
  .hd nav,.addr{display:none}
  .logo{width:168px;height:112px;border-radius:0 0 16px 16px}.logo::before{border-radius:0 0 16px 16px}
  .logo img{width:140px}
  .ib{width:44px;height:44px;font-size:20px}.acts{gap:8px}
  .lang button{padding:13px 9px}
  .hero{min-height:min(88vh,780px);min-height:min(88svh,780px)}
  .bg::after{background:radial-gradient(ellipse 110% 40% at 50% 32%,rgba(16,18,19,.74),rgba(16,18,19,.24) 72%,rgba(16,18,19,0)),linear-gradient(180deg,rgba(16,18,19,.25),rgba(16,18,19,0) 30%,rgba(23,25,27,.76) 76%,var(--bg))}
  .hero .wrap{padding-top:82px;padding-bottom:22px}
  .top{font-size:clamp(14px,4.3vw,20px)}
  h1{font-size:clamp(19px,6.1vw,34px);margin:10px 0 22px}
  .btn{height:52px;padding:0 22px;font-size:16px}
  .rt{padding-top:68px;--s:56px;--f:20px;--vw:46px}
  .veh{width:38px;height:38px;font-size:18px}
  [data-veh=illu] .veh{padding:5px 10px}
  .via{font-size:12.5px}.via.air{bottom:calc(100% + 26px)}.via.sea{top:calc(100% + 25px)}
  .rt-toggle{width:40px;height:40px}
  .svc{padding:44px 0 52px}
  .row{grid-template-columns:28px minmax(0,1fr) auto;gap:14px;padding:22px 14px}
  .row>.ic{font-size:24px}
  .row.pref{padding:26px 14px}
  .row.pref>.ic{font-size:26px}
  .row.pref h3{font-size:clamp(15px,4.5vw,24px)}
  .row.pref .go{width:46px;height:46px;font-size:22px}
  .ct{padding:52px 0 60px}
  dl{grid-template-columns:1fr;gap:30px;margin-top:40px}
  .hours{grid-column:auto}
  footer .wrap{flex-direction:column;align-items:center;text-align:center;gap:4px}footer img{margin-bottom:10px}
  .credit{margin-top:10px}
}
/* Small phones: keep the logo plate clear of the header controls and let the headline wrap if it must */
@media (max-width:400px){h1{white-space:normal;text-wrap:balance}.hrs{font-size:13.5px;gap:4px 12px}}
@media (max-width:380px){
  .hd .wrap{grid-template-columns:1fr 132px 1fr}.logo{width:132px;height:98px}.logo img{width:112px}
  .hero .wrap{padding-top:68px}
}
@media (max-width:340px){
  .hd .wrap{grid-template-columns:1fr 118px 1fr;padding:0 8px}.logo{width:118px;height:90px}.logo img{width:100px}
  .ib{width:40px;height:40px}.acts{gap:6px}
  .lang button{padding:11px 6px}
  .btn{padding:0 16px}
}