/* ============================================================
   EXIMWALA UI KIT · v3 · cargo board
   1 tokens · 2 base · 3 type · 4 layout · 5 components · 6 motion
   ============================================================ */

/* 1 ─ TOKENS */
:root{
  /* colour */
  --navy-950:#07142A; --navy-900:#0B1D3A; --navy-800:#10264A; --navy-700:#16305C; --navy-600:#1F3D70;
  --ink-0:#FFFFFF; --ink-1:#E4E8F0; --ink-2:#AEB7C8; --ink-3:#7E89A0;
  --red-600:#B3261E; --red-500:#D63B31; --red-300:#FF8A80;
  --paper:#F2F2F0; --paper-ink:#0B1D3A; --paper-ink-2:#4E5563;
  --line-1:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --line-3:rgba(255,255,255,.34);
  --grid:rgba(255,255,255,.045);
  /* type */
  --f-display:'Archivo','Arial Black','Helvetica Neue',Arial,sans-serif;
  --f-text:'Inter Tight','Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --fs-hero:clamp(34px,5.6vw,84px); --fs-h1:clamp(36px,5.2vw,72px); --fs-h2:clamp(26px,3vw,44px); --fs-h3:clamp(20px,1.9vw,26px);
  --fs-lede:clamp(19px,1.7vw,24px); --fs-body:17px; --fs-small:14.5px; --fs-micro:12.5px;
  --lh-tight:.92; --lh-snug:1.1; --lh-body:1.55;
  /* space (8pt) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --gutter:clamp(16px,4vw,56px); --max:1360px;
  /* misc */
  --ease:cubic-bezier(.2,.7,.2,1); --t-fast:.18s; --t-med:.4s; --t-slow:.8s;
  --shadow-panel:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 48px -32px rgba(0,0,0,.6);
}

/* 2 ─ BASE */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f-text);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-1);background:var(--navy-900);padding:0 var(--gutter);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:96px 96px;background-attachment:fixed}
img,svg,picture{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--red-300);outline-offset:3px}
::selection{background:var(--red-600);color:#fff}
.wrap{max-width:var(--max);margin:0 auto}
.skip{position:absolute;left:-999px;top:0;background:var(--red-600);color:#fff;padding:12px 16px;min-height:44px}
.skip:focus{left:var(--gutter);z-index:99}

/* 3 ─ TYPE */
.t-hero,.t-h1,.t-h2,.t-h3,.t-vessel{font-family:var(--f-display);font-weight:900;color:var(--ink-0);text-wrap:balance}
.t-hero{font-size:var(--fs-hero);line-height:var(--lh-tight);overflow-wrap:anywhere;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 900;text-transform:uppercase;letter-spacing:-.01em}
.t-h1{font-size:var(--fs-h1);line-height:.95;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 900;text-transform:uppercase;letter-spacing:-.01em}
.t-h2{font-size:var(--fs-h2);line-height:var(--lh-snug);font-stretch:100%;font-variation-settings:"wdth" 100,"wght" 800;letter-spacing:-.015em}
.t-h3{font-size:var(--fs-h3);line-height:1.15;font-stretch:100%;font-variation-settings:"wdth" 100,"wght" 700;letter-spacing:-.01em}
.t-lede{font-size:var(--fs-lede);line-height:1.35;font-weight:300;color:var(--ink-1);max-width:34em;letter-spacing:-.005em}
.t-body{font-size:var(--fs-body);color:var(--ink-1);max-width:62ch}
.t-small{font-size:var(--fs-small);color:var(--ink-2);max-width:70ch}
.t-label{font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.t-idx{font-family:var(--f-display);font-weight:800;font-stretch:100%;font-variation-settings:"wdth" 100,"wght" 800;font-size:var(--fs-micro);letter-spacing:.06em;color:var(--red-300)}
.t-vessel{font-size:18px;text-transform:uppercase;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 900}
.t-num{font-variant-numeric:tabular-nums;font-weight:600}
.t-dim{color:var(--ink-3)}
.t-body a,.t-small a,.t-lede a{text-decoration-thickness:1.5px;text-underline-offset:3px;text-decoration-color:var(--red-500);display:inline-block;padding-block:12px;margin-block:-12px}
.t-body a:hover,.t-small a:hover{color:var(--ink-0)}

/* 4 ─ LAYOUT */
.sec{padding-block:clamp(48px,7vw,96px)}
.sec-tight{padding-block:clamp(32px,4vw,56px)}
.sec-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-4) var(--s-6);align-items:baseline;margin-bottom:var(--s-7)}
.sec-head .t-idx{padding-top:.4em}
.sec-head .t-lede{margin-top:var(--s-4);grid-column:2}
.cols-2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,88px);align-items:start}
.cols-2.eq{grid-template-columns:1fr 1fr}
.cols-2.rev{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.bleed{margin-inline:calc(50% - 50vw)}
.stack>*+*{margin-top:var(--s-4)}
.stack-lg>*+*{margin-top:var(--s-6)}
.rule{height:1px;background:var(--line-2);border:0}
.rule-strong{height:2px;background:var(--ink-0);border:0}
@media(max-width:900px){.cols-2,.cols-2.eq,.cols-2.rev{grid-template-columns:1fr}.sec-head{grid-template-columns:1fr}.sec-head .t-lede{grid-column:1}}

/* 5 ─ COMPONENTS */
/* 5.1 buttons: variants primary/secondary/ghost · sizes md/lg · states hover/active/focus/disabled */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:700;font-size:15px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;
  min-height:48px;padding:0 22px;border:2px solid transparent;cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-primary{background:var(--red-600);border-color:var(--red-600);color:#fff}
.btn-primary:hover{background:var(--red-500);border-color:var(--red-500)}
.btn-secondary{background:transparent;border-color:var(--ink-0);color:var(--ink-0)}
.btn-secondary:hover{background:var(--ink-0);color:var(--navy-900)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-0);padding-inline:6px;position:relative}
.btn-ghost::after{content:"";position:absolute;left:6px;right:6px;bottom:8px;height:2px;background:var(--red-500);transform:scaleX(.35);transform-origin:left;transition:transform var(--t-med) var(--ease)}
.btn-ghost:hover::after{transform:scaleX(1)}
.btn-lg{min-height:56px;padding-inline:28px;font-size:16px}
.btn .arrow{width:18px;height:18px;transition:transform var(--t-fast) var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}
.on-paper .btn-secondary{border-color:var(--paper-ink);color:var(--paper-ink)}.on-paper .btn-secondary:hover{background:var(--paper-ink);color:#fff}
/* 5.2 panel */
.panel{background:linear-gradient(180deg,var(--navy-800),var(--navy-900));border:1px solid var(--line-1);box-shadow:var(--shadow-panel);padding:clamp(20px,3vw,40px)}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);padding-bottom:var(--s-4);border-bottom:1px solid var(--line-2);margin-bottom:var(--s-5);flex-wrap:wrap}
/* 5.3 tags & status */
.tag{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-micro);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red-300)}
.tag::before{content:"";width:8px;height:8px;background:currentColor}
.tag.live::before{animation:pulse 1.6s ease-in-out infinite}
.tag.ok{color:#7FD3A8}
/* 5.4 kv list */
.kv{border-top:2px solid var(--ink-0)}
.kv>div{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2.4fr);gap:var(--s-4);padding:14px 0;border-bottom:1px solid var(--line-1)}
.kv dt{font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.kv dd{color:var(--ink-0);font-weight:500}
/* 5.5 ticker (fixture rows) */
.ticker{list-style:none;border-top:2px solid var(--ink-0)}
.ticker li{display:grid;grid-template-columns:76px minmax(170px,1.4fr) minmax(120px,1fr) minmax(240px,2.2fr) minmax(96px,.8fr);gap:var(--s-4);align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line-1);font-size:16px;transition:background var(--t-fast)}
.ticker li:hover{background:rgba(255,255,255,.03)}
.ticker .t-vessel{font-size:17px}
.ticker .qty small{color:var(--ink-3);font-weight:400;font-size:12px;margin-left:2px}
.ticker .route,.ticker .cargo{color:var(--ink-1)}
.ticker .when{color:var(--ink-3)}
.ticker-wrap{overflow-x:auto}.ticker-wrap .ticker{min-width:680px}
.ticker.orders li{grid-template-columns:76px minmax(180px,1.6fr) minmax(220px,2fr) minmax(96px,.8fr)}
/* 5.6 order card (hero) */
.order{position:relative;border-left:12px solid var(--red-600);padding-left:clamp(16px,2.4vw,32px)}
.order .terms{display:flex;flex-wrap:wrap;gap:0 var(--s-6);margin-top:var(--s-6);border-top:1px solid var(--line-2)}
.order .terms div{padding:14px 0 0;font-size:15px;min-width:140px}
.order .terms b{display:block;font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
/* 5.7 photo figures */
.fig{margin:0;position:relative;overflow:hidden;background:var(--navy-800)}
.fig img{width:100%;height:100%;object-fit:cover;display:block}
.fig figcaption{position:absolute;left:0;bottom:0;background:rgba(11,29,58,.92);color:var(--ink-0);padding:10px 14px;font-size:var(--fs-small);font-weight:600;max-width:60ch;backdrop-filter:blur(6px)}
.fig.ratio-43{aspect-ratio:4/3}.fig.ratio-32{aspect-ratio:3/2}.fig.ratio-169{aspect-ratio:16/9}
/* 5.8 door */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--line-2)}
.door{position:relative;min-height:clamp(420px,50vw,620px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,3vw,48px);overflow:hidden;isolation:isolate;text-decoration:none;background:var(--navy-900)}
.door picture,.door img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform var(--t-slow) var(--ease)}
.door::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(11,29,58,.97) 28%,rgba(11,29,58,.35) 70%,rgba(11,29,58,.05))}
.door:hover img{transform:scale(1.04)}
.door .t-h1{font-size:clamp(34px,4.4vw,64px)}
.door .t-body{color:var(--ink-1);max-width:44ch;margin-top:var(--s-3)}
.door .btn{margin-top:var(--s-5);align-self:flex-start}
/* 5.9 ports */
.ports{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(24px,5vw,80px);border-top:2px solid var(--ink-0)}
.ports div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:11px 0;border-bottom:1px solid var(--line-1);cursor:default;transition:padding-left var(--t-fast) var(--ease)}
.ports div:hover{padding-left:6px}
.ports b{font-family:var(--f-display);font-weight:900;font-stretch:125%;font-variation-settings:"wdth" 125,"wght" 900;text-transform:uppercase;font-size:clamp(15px,1.25vw,19px);line-height:1;color:var(--ink-0);white-space:nowrap}
.ports span{color:var(--ink-3);font-size:13px;text-align:right;white-space:nowrap}
/* 5.10 lane map */
.lanes svg{width:100%;height:auto;display:block;font-family:var(--f-text)}
.lanes .grid line{stroke:var(--grid);stroke-width:1}
.lanes .coast{fill:none;stroke:var(--line-3);stroke-width:1}
.lanes .route{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:4 5}
.lanes .route-lit{fill:none;stroke:var(--red-500);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;animation:lit 24s linear infinite}
.lanes .port circle{fill:var(--ink-0);transition:r var(--t-fast)}
.lanes .port text{fill:var(--ink-1);font-size:13px;font-weight:600}
.lanes .port.hot circle{fill:var(--red-300);r:6}
.lanes .vessel rect{fill:var(--ink-0)}
/* 5.11 inputs: default/focus/error/disabled */
.field{display:grid;gap:6px}
.field label{font-size:var(--fs-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field textarea,.field select{font:inherit;font-size:17px;color:var(--ink-0);background:rgba(255,255,255,.03);border:1px solid var(--line-3);padding:13px 14px;min-height:50px;width:100%;transition:border-color var(--t-fast),background var(--t-fast)}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field input:hover,.field textarea:hover{border-color:var(--ink-2)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ink-0);background:rgba(255,255,255,.06);box-shadow:0 0 0 3px rgba(255,138,128,.25)}
.field input:disabled{opacity:.5}
.field.error input{border-color:var(--red-500)}
.field .hint{font-size:var(--fs-micro);color:var(--ink-3)}
.field.error .hint{color:var(--red-300)}
form.stack{max-width:560px}
/* 5.12 header/footer */
.site-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);padding-block:18px;border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:20;background:rgba(11,29,58,.82);backdrop-filter:blur(10px);margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter)}
.site-head .logo{display:inline-flex;align-items:center;min-height:44px}.site-head .logo img{width:200px;height:auto}
.site-head nav ul{display:flex;gap:2px;list-style:none;flex-wrap:wrap;align-items:center}
.site-head nav a{display:inline-flex;align-items:center;text-decoration:none;font-weight:600;font-size:14px;padding:0 12px;min-height:44px;min-width:44px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-1);border-bottom:2px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.site-head nav a:hover{color:var(--ink-0)}
.site-head nav a[aria-current]{color:var(--ink-0);border-bottom-color:var(--red-500)}
.site-head .clock{font-size:var(--fs-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px;white-space:nowrap}
.site-head .clock b{color:var(--ink-0);font-variant-numeric:tabular-nums;font-weight:600}
.site-foot{border-top:2px solid var(--ink-0);margin-top:clamp(56px,8vw,112px);padding-block:var(--s-7) var(--s-8);display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s-6);font-size:15px}
.site-foot ul{list-style:none}
.site-foot li a{display:inline-block;text-decoration:none;padding:9px 0;min-height:44px;font-weight:600;color:var(--ink-1)}
.site-foot li a:hover{color:var(--ink-0);text-decoration:underline;text-decoration-color:var(--red-500);text-underline-offset:4px}
.site-foot .brand img{width:200px}
.site-foot .brand p{margin-top:var(--s-4);color:var(--ink-2);max-width:40ch}
.site-foot .legal{grid-column:1/-1;color:var(--ink-3);font-size:var(--fs-small);padding-top:var(--s-4);border-top:1px solid var(--line-1)}
.site-foot .legal a{display:inline-block;padding:12px 6px;margin:-12px -2px;min-width:44px;text-align:center;color:var(--ink-1)}
.crumbs{font-size:var(--fs-small);color:var(--ink-3);padding-top:var(--s-4)}
.crumbs ol{list-style:none;display:flex;gap:10px;flex-wrap:wrap}
.crumbs a{text-decoration:none;display:inline-block;padding:12px;margin:-12px;min-width:44px;min-height:44px}
.crumbs li+li::before{content:"/";margin-right:10px}
/* 5.13 paper band */
.on-paper{background:var(--paper);color:var(--paper-ink);color-scheme:light}
.on-paper .t-h2,.on-paper .t-h3{color:var(--paper-ink)}
.on-paper .t-small,.on-paper .t-label{color:var(--paper-ink-2)}
.logos{display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-7);align-items:center}
.logos img{height:64px;width:auto;max-width:140px;object-fit:contain;filter:saturate(.9)}
/* 5.14 certificates */
.certs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5)}
.certs figure{margin:0;background:#fff;padding:10px;transition:transform var(--t-med) var(--ease)}
.certs figure:hover{transform:translateY(-4px)}
.certs img{width:100%;height:auto}
.certs figcaption{font-size:13px;color:var(--paper-ink);padding:12px 4px 4px;font-weight:600}
/* 5.15 page head (inner) */
.page-head{padding-block:clamp(32px,5vw,64px) var(--s-6);border-bottom:2px solid var(--ink-0);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5)}
.page-head .t-lede{margin-top:var(--s-2)}
/* responsive */
@media(max-width:900px){.doors,.ports,.certs{grid-template-columns:1fr}.site-head{flex-wrap:wrap}.site-head .clock{display:none}.site-foot{grid-template-columns:1fr}.door{min-height:70vw}.order{border-left-width:8px}}

/* 6 ─ MOTION */
@keyframes lit{to{stroke-dashoffset:0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.reveal{opacity:0;transform:translateY(10px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.in{opacity:1;transform:none}
.ticker li.reveal{transition-delay:calc(var(--i,0)*45ms)}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}.lanes .route-lit{animation:none;stroke-dashoffset:0}.lanes .vessel{display:none}.tag.live::before{animation:none}.door img{transition:none}.btn,.ports div{transition:none}}