/* VKY Cargo - vkycargo.com
   Type: Barlow Condensed (display) + Poppins (body), self-hosted.
   Colour comes from the logo: navy #1F304E, cargo red #C13227. Red is the only accent.
   Sea blue #275B9B appears in the logo artwork and as one background wash on the
   China desk band, never as an accent on text, icons or controls.
   The WhatsApp and WeChat marks keep their own brand green in the QR panel only,
   where the mark identifies the app you scan with. Everywhere else they run mono.
   One accent (cargo red). One radius (3px). Light theme with a dark-mode pass. */

@font-face{font-family:Poppins;src:url(assets/fonts/Poppins-400.woff2)format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Poppins;src:url(assets/fonts/Poppins-500.woff2)format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(assets/fonts/Poppins-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(assets/fonts/Poppins-700.woff2)format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/BarlowCondensed-600.woff2)format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/BarlowCondensed-700.woff2)format("woff2");font-weight:700;font-display:swap}

:root{
  --navy:#1F304E;
  --navy-deep:#16233B;
  --navy-soft:#2A3F63;
  --red:#C13227;
  --red-hi:#D4402F;

  --bg:#F6F7F9;
  --surface:#FFFFFF;
  --ink:#1B2A44;
  --ink-2:#54637E;
  --line:#DEE3EB;
  --line-strong:#C7CFDB;
  --step-num:#8496AE;

  --on-dark:#EDF2F9;
  --on-dark-2:#A8B8D0;
  --dark-line:rgba(255,255,255,.14);

  --r:3px;
  --shell:1240px;
  --gut:clamp(20px,5vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);

  color-scheme:light dark;

  --display:"Barlow Condensed",'Haettenschweiler','Arial Narrow',sans-serif;
  --body:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#111A2B;
    --surface:#18243A;
    --ink:#E7EEF8;
    --ink-2:#A3B3CB;
    --navy-deep:#1D2E4C;
    --navy:#24375A;
    --line:#27354F;
    --line-strong:#33445F;
    --step-num:#5E739B;
    --red:#E4574A;
    --red-hi:#F26A5B;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px;scroll-padding-bottom:64px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
/* one shared grade so the turquoise sea, grey tarmac and warm yard read as one set */
.hero__media img,.card__shot img,.card--shot img,.why__shot img,.desk__fig img{filter:saturate(.9) contrast(1.03)}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}
.ico{width:1em;height:1em;fill:currentColor;flex:none}

/* red tick used as a section mark, straight out of the film's lower thirds */
.tick{width:52px;height:5px;background:var(--red);border-radius:var(--r)}

.skip{
  position:absolute;left:12px;top:-60px;z-index:100;
  padding:12px 20px;background:var(--red);color:#fff;border-radius:var(--r);
  font:600 15px/1 var(--body);text-decoration:none;transition:top .2s var(--ease);
}
.skip:focus{top:12px}

/* ---------------- nav ---------------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav__in{display:flex;align-items:center;gap:28px;height:70px}
.nav__logo{height:38px;width:auto}
.nav__logo--dark{display:none}
.nav__links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav__links a{
  font-size:13.5px;font-weight:500;text-decoration:none;color:var(--ink-2);
  padding:6px 0;border-bottom:2px solid transparent;transition:color .2s var(--ease),border-color .2s var(--ease);
  white-space:nowrap;
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--ink);border-bottom-color:var(--red)}
.nav__tel{
  display:flex;align-items:center;gap:8px;font-family:var(--display);font-size:22px;
  letter-spacing:.02em;text-decoration:none;color:var(--ink);white-space:nowrap;
}
.nav__tel:hover{color:var(--red)}
.nav__tel .ico{font-size:17px;color:var(--red)}

@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .nav__logo--light{display:none}
  :root:not([data-theme=light]) .nav__logo--dark{display:block}
}

@media (max-width:900px){
  .nav__links{display:none}
  .nav__in{height:62px;gap:16px}
  .nav__logo{height:32px}
  .nav__tel{margin-left:auto;font-size:19px}
}

/* ---------------- hero ---------------- */
.hero{position:relative;background:var(--navy-deep);color:var(--on-dark);overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:62% 42%}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(22,35,59,.97) 0%,rgba(22,35,59,.93) 52%,rgba(22,35,59,.55) 74%,rgba(22,35,59,.34) 100%),
    linear-gradient(to top,rgba(22,35,59,.85),transparent 42%);
}
@media (max-width:900px){
  .hero__media::after{
    background:linear-gradient(180deg,rgba(22,35,59,.90) 0%,rgba(22,35,59,.88) 52%,rgba(22,35,59,.80) 78%,rgba(22,35,59,.88) 100%);
  }
  .hero__sub{max-width:none}
}
.hero__in{position:relative;padding-block:clamp(64px,10vw,96px) clamp(56px,8vw,88px);min-height:min(88dvh,760px);display:flex;align-items:center}
.hero__col{max-width:730px}
.hero h1{
  text-wrap:balance;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(50px,8.4vw,116px);line-height:.9;letter-spacing:.004em;margin-bottom:26px;
}
.hero h1 .amp{color:var(--red)}
.hero__sub{font-size:clamp(15.5px,1.7vw,19px);line-height:1.6;color:#C9D6E8;max-width:46ch;margin-bottom:34px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}

/* origin ribbon sits at the hero foot: real routing info, not decoration */
.ribbon{position:relative;background:var(--navy-deep);border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line)}
.ribbon__in{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 34px;padding-block:20px}
.ribbon__lab{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-2)}
.ribbon__cities{display:flex;flex-wrap:wrap;gap:10px clamp(28px,5vw,64px);font-family:var(--display);font-weight:600;font-size:clamp(21px,2.6vw,29px);letter-spacing:.03em;text-transform:uppercase;color:var(--on-dark)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:var(--r);border:1px solid transparent;
  font:600 15px/1 var(--body);letter-spacing:.005em;text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease);
}
.btn .ico{font-size:19px}
.btn:active{transform:translateY(1px)}
.btn--primary{background:#C13227;color:#fff}
.btn--primary:hover,.btn--primary:focus-visible{background:#D4402F}
.btn--ghost{border-color:rgba(255,255,255,.34);color:var(--on-dark);background:rgba(255,255,255,.06)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
.btn--wide{width:100%}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:var(--r)}

/* ---------------- generic section ---------------- */
.sec{padding:clamp(64px,9vw,112px) 0}
.sec__head{max-width:62ch;margin-bottom:clamp(34px,5vw,56px)}
.sec__head .tick{margin-bottom:20px}
.sec h2{text-wrap:balance;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,5.4vw,60px);line-height:.96;letter-spacing:.005em;margin-bottom:16px}
.sec__lede{font-size:clamp(15px,1.6vw,17.5px);color:var(--ink-2);max-width:60ch}

/* ---------------- china desk band ---------------- */
.desk{background:var(--navy);color:var(--on-dark);position:relative;overflow:hidden}
.desk::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(120% 90% at 88% 6%,rgba(39,91,155,.5),transparent 58%);
}
.desk__in{position:relative;padding-block:clamp(60px,8vw,96px);display:grid;gap:clamp(34px,5vw,64px);grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-items:center}
.desk h2{text-wrap:balance;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(34px,5vw,58px);line-height:.96;margin-bottom:18px}
.desk p{color:var(--on-dark-2);max-width:52ch;font-size:clamp(15px,1.6vw,17.5px)}
.desk__fig{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--dark-line)}
.desk__fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.desk__note{
  margin-top:26px;padding-top:22px;border-top:1px solid var(--dark-line);
  display:flex;align-items:flex-start;gap:13px;color:var(--on-dark);font-size:15px;max-width:50ch;
}
.desk__note .ico{font-size:23px;color:var(--red);margin-top:1px}
@media (max-width:860px){.desk__in{grid-template-columns:minmax(0,1fr)}.desk__fig{order:-1}}

/* ---------------- services bento ---------------- */
.bento{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
.card{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:30px;display:flex;flex-direction:column;min-height:230px;overflow:hidden;
}
.card__ico{font-size:30px;color:var(--red);margin-bottom:auto}
.card h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,3vw,34px);line-height:1;letter-spacing:.01em;margin:20px 0 12px}
.card p{color:var(--ink-2);font-size:14.5px;line-height:1.6}
.card__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:18px}
.card__tags span{
  font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--line-strong);border-radius:var(--r);color:var(--ink-2);
}
/* photo cells: the grid must not be six identical white boxes */
.card--sea{grid-column:span 2}
.card--air{grid-column:span 2}
.card--customs{grid-column:span 2;justify-content:center}
.card--customs .card__ico{margin-bottom:14px}
.card--customs h3{margin-top:0}
.card--photo{padding:0;overflow:hidden}
.card__shot{position:relative;aspect-ratio:16/6.4;overflow:hidden;border-bottom:1px solid var(--line);background:var(--navy-deep)}
.card__shot img{width:100%;height:100%;object-fit:cover}
.card--photo .card__body{padding:26px 30px 30px;display:flex;flex-direction:column;flex:1}
.card--photo .card__ico{margin-bottom:14px}
.card--photo h3{margin-top:0}
.card--shot{grid-column:span 2;padding:0;min-height:290px;border:none}
.card--shot img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.card--shot figcaption{
  position:relative;margin-top:auto;padding:56px 28px 26px;color:#fff;width:100%;
  /* the sunset frame is bright, so the scrim has to carry the text contrast on its own */
  background:linear-gradient(to top,rgba(11,19,33,.97) 0%,rgba(11,19,33,.92) 42%,rgba(11,19,33,.66) 74%,transparent 100%);
}
.card--shot figcaption h3{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(26px,3vw,34px);line-height:1;letter-spacing:.01em;margin-bottom:10px}
.card--shot figcaption h3 .ico{font-size:24px;color:var(--red-hi)}
.card--shot figcaption span{font-size:13.5px;color:#DCE6F4;line-height:1.55;display:block;max-width:46ch}
.card--wide{grid-column:span 4;min-height:0;flex-direction:row;align-items:center;gap:30px;flex-wrap:wrap}
.card--wide .card__ico{margin:0}
.card--wide h3{margin:0;flex:none}
.card--wide p{flex:1 1 320px;margin:0}
@media (max-width:1000px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .card--sea,.card--air,.card--shot,.card--customs{grid-column:span 2;justify-content:center}
  .card--wide{grid-column:span 2}
}
@media (max-width:400px){
  .card__tags span{font-size:11px;padding:5px 8px}
}
@media (max-width:620px){
  .bento{grid-template-columns:minmax(0,1fr)}
  .card--photo .card__body{padding:24px 26px 26px}
  .card__shot{aspect-ratio:16/8}
  .card--sea,.card--air,.card--shot,.card--customs,.card--wide{grid-column:span 1}
  .card{padding:26px;min-height:0}
  .card--wide{flex-direction:column;align-items:flex-start;gap:16px}
}

/* ---------------- process rail ---------------- */
.rail{position:relative;display:grid;gap:2px;grid-template-columns:repeat(4,1fr);counter-reset:step}
.step{position:relative;background:var(--surface);border:1px solid var(--line);padding:30px 26px 34px;counter-increment:step}
.step:first-child{border-radius:var(--r) 0 0 var(--r)}
.step:last-child{border-radius:0 var(--r) var(--r) 0}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--display);font-weight:700;font-size:44px;line-height:1;color:var(--step-num);display:block;margin-bottom:16px;
}
.step h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:25px;letter-spacing:.01em;line-height:1.02;margin-bottom:10px}
.step p{font-size:14.5px;color:var(--ink-2);line-height:1.6}
.step__bar{position:absolute;left:0;top:-1px;width:100%;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.step.is-in .step__bar{transform:scaleX(1)}
@media (max-width:980px){
  .rail{grid-template-columns:repeat(2,1fr)}
  .step:first-child{border-radius:var(--r) 0 0 0}
  .step:nth-child(2){border-radius:0 var(--r) 0 0}
  .step:nth-child(3){border-radius:0 0 0 var(--r)}
  .step:last-child{border-radius:0 0 var(--r) 0}
}
@media (max-width:560px){
  .rail{grid-template-columns:minmax(0,1fr)}
  .step,.step:first-child,.step:nth-child(2),.step:nth-child(3),.step:last-child{border-radius:var(--r)}
  .rail{gap:10px}
}

/* ---------------- why / proof ---------------- */
.why{display:grid;gap:clamp(30px,5vw,72px);grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
.why__aside{align-self:start}
.why__shot{margin-top:32px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.why__shot img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){.why__shot{display:none}}
.why__list li{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--line)}
.why__list li:first-child{padding-top:0}
.why__list li:last-child{border-bottom:0;padding-bottom:0}
.why__list .ico{font-size:26px;color:var(--red);margin-top:3px}
.why__list h3{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:25px;letter-spacing:.01em;line-height:1.05;margin-bottom:7px}
.why__list p{color:var(--ink-2);font-size:15px;max-width:56ch}
@media (max-width:900px){.why{grid-template-columns:minmax(0,1fr)}.why__aside{position:static}}

/* ---------------- contact ---------------- */
.contact{background:var(--navy-deep);color:var(--on-dark)}
.contact .sec__lede{color:var(--on-dark-2)}
.contact__grid{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:start}
.contact .sec__head{margin-bottom:clamp(26px,3.5vw,38px)}
.lines .line{display:flex;gap:16px;padding:19px 0;border-bottom:1px solid var(--dark-line);align-items:flex-start}
.lines .line>div{min-width:0}
.lines .big{overflow-wrap:anywhere}
.lines .line:last-child{border-bottom:0}
.lines .ico{font-size:22px;color:var(--red);margin-top:3px;flex:none}
.lines .lab{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-2);margin-bottom:5px}
.lines .val{display:block;font-size:16.5px;line-height:1.5;overflow-wrap:anywhere}
.lines a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);transition:border-color .2s var(--ease),color .2s var(--ease)}
.lines a:hover,.lines a:focus-visible{color:#fff;border-bottom-color:var(--red)}
.lines .big{font-family:var(--display);font-weight:600;font-size:31px;letter-spacing:.02em;border-bottom:0}
.lines .big:hover{color:var(--red-hi)}

.scan{background:rgba(255,255,255,.05);border:1px solid var(--dark-line);border-radius:var(--r);padding:clamp(22px,3vw,30px)}
.scan__row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.scan__card{text-align:center}
.scan__qr{background:#fff;border-radius:var(--r);padding:9px;margin-bottom:13px}
.scan__qr img{width:100%;height:auto;aspect-ratio:1}
.scan__card b{display:flex;align-items:center;justify-content:center;gap:7px;font-size:14.5px;font-weight:600;margin-bottom:3px}
.scan__card b .ico{font-size:17px}
.scan__card small{color:var(--on-dark-2);font-size:12.5px;word-break:break-word}
.scan__ctas{display:grid;gap:10px;margin-top:22px}
@media (max-width:420px){.scan__row{grid-template-columns:1fr;max-width:260px;margin-inline:auto}}
@media (max-width:900px){.contact__grid{grid-template-columns:minmax(0,1fr)}}

/* ---------------- footer ---------------- */
.foot{background:#0E1729;color:var(--on-dark-2);padding:44px 0;border-top:1px solid var(--dark-line)}
.foot__in{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between}
.foot__in>*{min-width:0}
.foot img{height:46px;width:auto}
.foot__meta{font-size:13px;line-height:1.7;overflow-wrap:anywhere;min-width:0}
.foot__meta a{display:inline-block;padding:6px 0;overflow-wrap:anywhere}
.foot__slogan{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark)}

/* ---------------- sticky mobile action bar ---------------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  gap:1px;background:var(--line);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.dock a{touch-action:manipulation;
  flex:1;display:flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 8px;background:var(--surface);color:var(--ink);
  font:600 14.5px/1 var(--body);text-decoration:none;
}
.dock a.is-primary{background:#C13227;color:#fff}
.dock .ico{font-size:19px}
@media (max-width:760px){
  .dock{display:flex}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}

/* ---------------- scroll reveal (IntersectionObserver, no scroll listeners) ---------------- */
@media (prefers-reduced-motion:no-preference){
  /* .js gates the hidden state: without JavaScript nothing is ever revealed,
     so the content must simply be visible rather than stuck at opacity 0. */
  .js .rv{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js .rv.is-in{opacity:1;transform:none}
  .rv-d1{transition-delay:.07s}.rv-d2{transition-delay:.14s}.rv-d3{transition-delay:.21s}
}