/* ==========================================================================
   Arshan – Logistics demo (Demo 18)  ·  body.lg-page  ·  prefix lg-
   Re-skins components/kit.css through tokens, then adds the logistics-only
   sections: hero + quick-action panel, metrics, network map, freight modes,
   shipment cards, process steps, tracking, network hubs, plans and jobs.
   Deep navy + industrial blue + orange accent; Barlow headings, Inter UI.
   ========================================================================== */
body.lg-page {
  --ak-bg: #ffffff;
  --ak-surface: #ffffff;
  --ak-surface-2: #f3f6fa;
  --ak-surface-3: #e6ecf4;
  --ak-ink: #0b1d3a;
  --ak-text: #3a4a63;
  --ak-muted: #66768f;
  --ak-line: #e2e8f1;
  --ak-accent: #1f4fd1;
  --ak-accent-hover: #183fa8;
  --ak-accent-soft: #e7eefc;
  --ak-accent-2: #f26b1d;
  --ak-dark: #0b1d3a;
  --ak-dark-2: #11294f;
  --ak-dark-ink: #dfe7f3;
  --ak-dark-muted: #9fb0c9;
  --ak-font-head: "Barlow", "Inter", system-ui, sans-serif;
  --ak-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --ak-head-weight: 600;
  --ak-radius-sm: 6px;
  --ak-radius: 10px;
  --ak-radius-lg: 14px;
  --ak-radius-media: 12px;
  --ak-btn-radius: 6px;
  --ak-shadow: 0 20px 44px -24px rgba(11, 29, 58, .32);
  --ak-shadow-lg: 0 36px 80px -32px rgba(11, 29, 58, .45);
  font-size: 15.5px;
}
.lg-page .ak-btn--alt { --b-bg: #f26b1d; --b-fg: #fff; box-shadow: 0 12px 24px -14px rgba(242, 107, 29, .8); }
.lg-page .ak-btn--alt:hover { --b-bg: #dc5a10; filter: none; }
.lg-page .ak-btn--dark { --b-bg: #0b1d3a; }
.lg-page .ak-btn--dark:hover { --b-bg: #1f4fd1; }
.lg-page .ak-eyebrow { font-weight: 600; letter-spacing: .16em; }
.lg-page .ak-title { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.12; }
.lg-page .ak-ico { background: var(--ak-accent-soft); color: var(--ak-accent); border-radius: 10px; }
.lg-page .ak-ico--alt { background: #fff1e8; color: #e05b10; }
.lg-page .ak-logo__mark { color: var(--ak-accent-2); }
.lg-page .ak-logo__text strong { font-weight: 600; letter-spacing: .14em; }
.lg-page .ak-footer .ak-logo__mark svg path:last-child { stroke: var(--ak-dark); }
.lg-page .ak-topbar { background: #071530; }

/* Hero ------------------------------------------------------------------- */
.lg-hero { position: relative; isolation: isolate; color: #fff; background: var(--ak-dark); padding-top: clamp(80px, 9vw, 130px); }
.lg-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.lg-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 21, 48, .92) 0%, rgba(7, 21, 48, .72) 42%, rgba(7, 21, 48, .25) 100%), linear-gradient(0deg, rgba(7, 21, 48, .9) 0%, transparent 38%); }
.lg-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: end; }
.lg-hero__copy { max-width: 660px; padding-bottom: 40px; }
.lg-hero .ak-eyebrow { color: #ffb183; }
.lg-hero h1 { color: #fff; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.04; font-weight: 600; }
.lg-hero h1 em { font-style: normal; color: var(--ak-accent-2); }
.lg-hero__copy p { margin: 22px 0 32px; max-width: 54ch; font-size: 18px; color: rgba(255, 255, 255, .84); }
.lg-hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: 14px; color: rgba(255, 255, 255, .82); }
.lg-hero__trust li { display: inline-flex; align-items: center; gap: 8px; }
.lg-hero__trust .icon { width: 18px; height: 18px; color: #ffb183; }
.lg-live { display: grid; gap: 10px; margin-bottom: 64px; padding: 22px; border-radius: var(--ak-radius-lg); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); animation: lg-float 6s var(--ar-ease-standard) infinite; }
@keyframes lg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.lg-live__head { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.lg-live__dot { width: 8px; height: 8px; border-radius: 50%; background: #36d07c; box-shadow: 0 0 0 4px rgba(54, 208, 124, .25); animation: ak-pulse 2s infinite; }
.lg-live__id { font-family: var(--ak-font-head); font-size: 24px; font-weight: 600; color: #fff; }
.lg-live .lg-ship__route { color: #fff; }
.lg-live .lg-ship__route small { color: rgba(255, 255, 255, .65); }
.lg-live .lg-ship__bar { background: rgba(255, 255, 255, .2); }
.lg-live .icon { width: 15px; height: 15px; display: inline; vertical-align: -2px; }
.lg-live .ak-link { color: #ffb183; }
.lg-hero__quick { position: relative; z-index: 2; margin-bottom: -76px; }
.lg-quick { background: #fff; color: var(--ak-text); border-radius: var(--ak-radius-lg); box-shadow: var(--ak-shadow-lg); overflow: hidden; }
.lg-quick__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ak-line); background: var(--ak-surface-2); }
.lg-quick__tabs [role="tab"] { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 14px; font-size: 15px; font-weight: 500; color: var(--ak-muted); border-bottom: 2px solid transparent; }
.lg-quick__tabs [role="tab"] .icon { width: 19px; height: 19px; }
.lg-quick__tabs [role="tab"][aria-selected="true"] { background: #fff; color: var(--ak-ink); border-bottom-color: var(--ak-accent-2); }
.lg-quick__tabs [role="tab"][aria-selected="true"] .icon { color: var(--ak-accent-2); }
.lg-quick__panel { padding: 26px 28px 28px; }
.lg-track-form { display: flex; gap: 12px; align-items: flex-start; }
.lg-track-form .ak-field input { min-height: 54px; }
.lg-track-form .ak-btn { min-height: 54px; }
.lg-track-form--lg .ak-field input, .lg-track-form--lg .ak-btn { min-height: 60px; font-size: 16px; }
.lg-track-form--lg { align-items: flex-end; }
.lg-quick__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; color: var(--ak-muted); }
.lg-quick__hint button:not(.ak-chip) { padding: 3px 10px; border-radius: 999px; background: var(--ak-surface-2); font-size: 13px; color: var(--ak-ink); transition: background-color var(--ar-transition-fast); }
.lg-quick__hint button:not(.ak-chip):hover { background: var(--ak-accent-soft); color: var(--ak-accent); }
.lg-quick__result:not(:empty) { margin-top: 20px; }
.lg-mini-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px; align-items: end; }
.lg-mini-form .ak-btn { min-height: 52px; }
.lg-mini-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px; border-radius: var(--ak-radius); background: var(--ak-surface-2); animation: ar-fade-up var(--ar-dur-slow) var(--ar-ease-out); }
.lg-mini-result strong { color: var(--ak-ink); }
.lg-mini-result--err { grid-template-columns: auto 1fr; background: var(--ak-danger-soft); color: var(--ak-danger); }
.lg-mini-result .lg-ship__bar { margin-top: 10px; }
.lg-page--home .lg-metrics { padding-top: 140px; }

/* Metrics ------------------------------------------------------------- */
.lg-metrics { padding-block: 56px; border-bottom: 1px solid var(--ak-line); }
.lg-stats .ak-stat strong { color: var(--ak-ink); }
.lg-stats .ak-stat strong span { font: inherit; }
.lg-metrics + .ak-section--alt, .lg-metrics.ak-section--alt { border: 0; }
.lg-big { font-family: var(--ak-font-head); font-size: 48px; font-weight: 600; color: var(--ak-accent-2); line-height: 1; }

/* Service + case + fleet cards --------------------------------------- */
.lg-svc .ak-media { border-radius: 0; }
.lg-svc .ak-card__body { position: relative; padding-top: 38px; }
.lg-svc__ico { position: absolute; top: -28px; left: 24px; width: 56px; height: 56px; background: #fff !important; color: var(--ak-accent-2) !important; box-shadow: var(--ak-shadow); border-radius: 12px !important; }
.ak-card .lg-svc__ico { position: absolute; }
.lg-svc .ak-card__title { font-size: 20px; }
.lg-svc:hover .lg-svc__ico { background: var(--ak-accent-2) !important; color: #fff !important; }
.lg-case .ak-media { border-radius: 0; }
.lg-case__tag { position: absolute; top: 14px; left: 14px; }
.lg-case__metric { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--ak-line); border-bottom: 1px dashed var(--ak-line); }
.lg-case__metric strong { font-family: var(--ak-font-head); font-size: 30px; font-weight: 600; color: var(--ak-accent-2); }
.lg-case__metric span { font-size: 14px; color: var(--ak-muted); }
.lg-spec { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ak-accent); font-weight: 500; }
.lg-spec .icon { width: 16px; height: 16px; }

/* Network band + map -------------------------------------------------- */
.lg-network { background: radial-gradient(900px 400px at 85% 0%, rgba(31, 79, 209, .35), transparent 60%), var(--ak-dark); overflow: hidden; }
.lg-network__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 56px; align-items: center; }
.lg-net-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 32px 0 34px; }
.lg-net-list li { padding-left: 16px; border-left: 2px solid var(--ak-accent-2); }
.lg-net-list strong { display: block; font-family: var(--ak-font-head); font-size: 32px; font-weight: 600; color: #fff; line-height: 1.1; }
.lg-net-list span { font-size: 14px; color: var(--ak-dark-muted); }
.lg-map { position: relative; aspect-ratio: 1000 / 383; }
.lg-map__base { position: absolute; inset: 0; width: 100%; height: 100%; }
.lg-map__routes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lg-map__routes path { fill: none; stroke: var(--ak-accent-2); stroke-width: 1.4; stroke-dasharray: 5 6; opacity: .75; vector-effect: non-scaling-stroke; animation: lg-dash 30s linear infinite; }
@keyframes lg-dash { to { stroke-dashoffset: -440; } }
.lg-pin { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 26px; z-index: 2; }
.lg-pin i { width: 11px; height: 11px; border-radius: 50%; background: var(--ak-accent-2); box-shadow: 0 0 0 4px rgba(242, 107, 29, .28); transition: transform var(--ar-transition-base), box-shadow var(--ar-transition-base); }
.lg-pin--regional i { width: 14px; height: 14px; background: #fff; border: 3px solid var(--ak-accent-2); }
.lg-pin--office i { background: #6aa2ff; box-shadow: 0 0 0 4px rgba(106, 162, 255, .28); }
.lg-pin span { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translate(-50%, 4px); padding: 4px 9px; border-radius: 6px; background: #fff; color: var(--ak-ink); font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; box-shadow: var(--ak-shadow); transition: opacity var(--ar-transition-base), transform var(--ar-transition-base); }
.lg-pin:hover span, .lg-pin:focus-visible span, .lg-pin.is-active span { opacity: 1; transform: translate(-50%, 0); }
.lg-pin:hover i, .lg-pin.is-active i { transform: scale(1.35); box-shadow: 0 0 0 8px rgba(242, 107, 29, .22); }
.lg-pin.is-dim { opacity: .2; pointer-events: none; }
.lg-pin:focus-visible { outline: 2px solid #fff; border-radius: 50%; }
.lg-net-hero { padding-block: 72px 64px; background: radial-gradient(1000px 500px at 50% 0%, rgba(31, 79, 209, .4), transparent 65%), var(--ak-dark); color: var(--ak-dark-ink); }
.lg-net-hero .ak-lead { color: var(--ak-dark-muted); }
.lg-crumbs-dark { justify-content: center; color: var(--ak-dark-muted); }
.lg-crumbs-dark [aria-current] { color: #fff; }
.lg-filterbar { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 28px; }
.lg-net-hero .ak-chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff; }
.lg-net-hero .ak-chip:hover { border-color: #fff; }
.lg-net-hero .ak-chip.is-active, .lg-net-hero .ak-chip[aria-pressed="true"] { background: var(--ak-accent-2); border-color: var(--ak-accent-2); }
.lg-net-map { position: relative; }
.lg-map--lg .lg-pin span { opacity: .9; transform: translate(-50%, 0); font-size: 11px; padding: 2px 7px; background: rgba(255, 255, 255, .92); }
.lg-hubcard { position: absolute; right: 0; bottom: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; width: min(380px, 100%); padding: 12px; border-radius: var(--ak-radius); background: #fff; color: var(--ak-text); box-shadow: var(--ak-shadow-lg); animation: ar-fade-up var(--ar-dur-slow) var(--ar-ease-out); }
.lg-hubcard img { width: 110px; height: 96px; object-fit: cover; border-radius: 8px; }
.lg-hubcard h3 { font-size: 19px; }
.lg-hubcard p { font-size: 13.5px; color: var(--ak-muted); }
.lg-hubcard .ak-badge { margin-bottom: 4px; }
.lg-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; margin-top: 26px; font-size: 13.5px; color: var(--ak-dark-muted); }
.lg-legend li { display: inline-flex; align-items: center; gap: 8px; }
.lg-legend i { width: 12px; height: 12px; border-radius: 50%; background: var(--ak-accent-2); }
.lg-legend i.lg-pin--regional { background: #fff; border: 3px solid var(--ak-accent-2); }
.lg-legend i.lg-pin--office { background: #6aa2ff; }
.lg-hubs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.lg-hub { border: 1px solid var(--ak-line); border-radius: var(--ak-radius-lg); overflow: hidden; background: #fff; transition: transform var(--ar-dur-slow) var(--ar-ease-out), box-shadow var(--ar-dur-slow) var(--ar-ease-out), opacity var(--ar-transition-base); }
.lg-hub:hover, .lg-hub.is-active { transform: translateY(-4px); box-shadow: var(--ak-shadow); }
.lg-hub.is-active { border-color: var(--ak-accent-2); }
.lg-hub .ak-media { border-radius: 0; }
.lg-hub__body { padding: 18px 20px 22px; }
.lg-hub__body h3 { font-size: 20px; margin-top: 10px; }
.lg-hub__body p { font-size: 14px; color: var(--ak-muted); }
.lg-hub__body small { display: block; margin-top: 8px; font-size: 13px; color: var(--ak-text); }
.lg-hub[hidden] { display: none; }
.lg-region-list { display: grid; gap: 10px; }
.lg-region-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; }
.lg-region-list .icon { width: 17px; height: 17px; margin-top: 4px; color: var(--ak-accent-2); }
.lg-region-list strong { color: var(--ak-ink); font-weight: 500; }

/* Freight modes (tabs) --------------------------------------------------- */
.lg-modes { background: #fff; border-radius: var(--ak-radius-lg); box-shadow: var(--ak-shadow); overflow: hidden; }
.lg-modes__tabs { display: flex; border-bottom: 1px solid var(--ak-line); }
.lg-modes__tabs [role="tab"] { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; font-size: 16px; font-weight: 500; color: var(--ak-muted); border-bottom: 2px solid transparent; }
.lg-modes__tabs [role="tab"] .icon { width: 21px; height: 21px; }
.lg-modes__tabs [role="tab"][aria-selected="true"] { color: var(--ak-ink); border-bottom-color: var(--ak-accent-2); }
.lg-modes__tabs [role="tab"][aria-selected="true"] .icon { color: var(--ak-accent-2); }
.lg-mode { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.lg-mode__img { border-radius: 0; min-height: 420px; }
.lg-mode__body { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; }
.lg-mode__body h3 { font-size: 32px; }
.lg-mode__body p { margin-top: 14px; color: var(--ak-muted); }
.lg-mode__body .ak-btn { align-self: flex-start; margin-top: 30px; }

/* Collage + warehouse ---------------------------------------------------- */
.lg-collage { position: relative; min-height: 520px; }
.lg-collage__a { position: absolute; left: 0; top: 0; width: 72%; height: 78%; }
.lg-collage__b { position: absolute; right: 0; bottom: 0; width: 52%; height: 50%; border: 8px solid #fff; box-shadow: var(--ak-shadow); }
.lg-collage__badge { position: absolute; left: 8%; bottom: 4%; display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-radius: var(--ak-radius); background: var(--ak-accent-2); color: #fff; box-shadow: var(--ak-shadow); }
.lg-collage__badge strong { font-family: var(--ak-font-head); font-size: 40px; font-weight: 600; line-height: 1; }
.lg-collage__badge span { font-size: 13px; line-height: 1.35; }
.lg-capgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 28px; }
.lg-capgrid li { display: flex; gap: 14px; align-items: flex-start; }
.lg-capgrid .icon { width: 26px; height: 26px; color: var(--ak-accent-2); flex-shrink: 0; margin-top: 2px; }
.lg-capgrid strong { display: block; font-family: var(--ak-font-head); font-size: 18px; font-weight: 600; color: var(--ak-ink); }
.lg-capgrid span { font-size: 14.5px; color: var(--ak-muted); }
.lg-whimg { position: relative; }
.lg-whimg .ak-media { aspect-ratio: 4 / 4.4; }
.lg-whimg__card { position: absolute; left: -28px; bottom: 36px; display: flex; gap: 14px; align-items: center; padding: 18px 22px; border-radius: var(--ak-radius); background: #fff; box-shadow: var(--ak-shadow-lg); }
.lg-whimg__card > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 10px; background: var(--ak-dark); color: #fff; }
.lg-whimg__card .icon { width: 24px; height: 24px; }
.lg-whimg__card strong { display: block; font-family: var(--ak-font-head); font-size: 24px; font-weight: 600; color: var(--ak-ink); }
.lg-whimg__card small { font-size: 13px; color: var(--ak-muted); }
.lg-caps__cta { background: var(--ak-dark); border-color: var(--ak-dark); color: var(--ak-dark-muted); }

/* Shipments --------------------------------------------------------------- */
.lg-ship .ak-card__body { gap: 16px; }
.lg-ship__id { font-family: var(--ak-font-head); font-size: 20px; color: var(--ak-ink); }
.lg-ship__route { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ak-ink); font-weight: 500; }
.lg-ship__route > .icon { width: 18px; height: 18px; color: var(--ak-accent-2); flex-shrink: 0; }
.lg-ship__route small { display: block; font-size: 12px; font-weight: 400; color: var(--ak-muted); text-transform: uppercase; letter-spacing: .08em; }
.lg-ship__bar { height: 6px; border-radius: 999px; background: var(--ak-surface-3); overflow: hidden; }
.lg-ship__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ak-accent), var(--ak-accent-2)); }
.lg-ship .icon { width: 15px; height: 15px; display: inline; vertical-align: -2px; }

/* Steps, timeline, industries */
.lg-steps, .lg-timeline, .lg-mini-steps { margin: 0; padding: 0; list-style: none; }
/* ------------------------------------------ */
.lg-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: s; }
.lg-step { position: relative; display: grid; gap: 12px; padding: 30px 26px; border-radius: var(--ak-radius-lg); background: var(--ak-surface-2); }
.lg-step__n { position: absolute; top: 20px; right: 24px; font-family: var(--ak-font-head); font-size: 44px; font-weight: 600; color: var(--ak-surface-3); line-height: 1; }
.lg-step h3 { font-size: 20px; }
.lg-step p { font-size: 15px; color: var(--ak-muted); }
.lg-steps--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lg-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--ak-line); }
.lg-timeline li { position: relative; padding: 32px 28px 10px 0; }
.lg-timeline li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ak-accent-2); box-shadow: 0 0 0 5px #fff; }
.lg-timeline__year { font-family: var(--ak-font-head); font-size: 34px; font-weight: 600; color: var(--ak-accent); }
.lg-timeline h3 { font-size: 19px; margin: 6px 0; }
.lg-timeline p { font-size: 15px; color: var(--ak-muted); }
.lg-inds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.lg-ind { display: flex; align-items: center; gap: 12px; padding: 20px; border-radius: var(--ak-radius); background: #fff; border: 1px solid var(--ak-line); font-weight: 500; color: var(--ak-ink); transition: border-color var(--ar-transition-base), transform var(--ar-transition-base), box-shadow var(--ar-transition-base); }
.lg-ind:hover { border-color: var(--ak-accent-2); transform: translateY(-3px); box-shadow: var(--ak-shadow); }
.lg-ind .icon { width: 24px; height: 24px; color: var(--ak-accent-2); }
.lg-leaders { gap: 20px; }
.lg-leader { display: flex; gap: 18px; align-items: center; padding: 22px; border-radius: var(--ak-radius-lg); background: #fff; border: 1px solid var(--ak-line); }
.lg-leader__photo { flex-shrink: 0; width: 88px; height: 88px; overflow: hidden; border-radius: 50%; background: var(--ak-surface-2); box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--ak-line); }
.lg-leader__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; transition: transform var(--ar-transition-base, .3s ease); }
.lg-leader:hover .lg-leader__photo img { transform: scale(1.06); }
.lg-leader__mono { display: grid; place-items: center; width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--ak-dark), var(--ak-accent)); color: #fff; font-family: var(--ak-font-head); font-size: 24px; font-weight: 600; letter-spacing: .04em; }
.lg-leader h3 { font-size: 19px; }
.lg-leader p { font-size: 14px; color: var(--ak-muted); }

/* CTA band --------------------------------------------------------------- */
.lg-cta { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 420px; padding: clamp(32px, 6vw, 80px); border-radius: var(--ak-radius-lg); isolation: isolate; color: #fff; }
.lg-cta > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.lg-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(270deg, rgba(7, 21, 48, .94) 0%, rgba(7, 21, 48, .75) 45%, rgba(7, 21, 48, .1) 100%); }
.lg-cta__body { max-width: 540px; margin-left: auto; }
.lg-cta h2 { color: #fff; font-size: clamp(30px, 3.4vw, 46px); }
.lg-cta p { margin: 16px 0 30px; color: rgba(255, 255, 255, .85); }
.lg-cta .ak-eyebrow { color: #ffb183; }

/* Plans --------------------------------------------------------------- */
.lg-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; max-width: 1080px; margin-inline: auto; }
.lg-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 36px 30px 30px; border-radius: var(--ak-radius-lg); background: #fff; border: 1px solid var(--ak-line); }
.lg-plan h3 { font-size: 24px; }
.lg-plan__desc { font-size: 14.5px; color: var(--ak-muted); }
.lg-plan__price { display: flex; align-items: baseline; gap: 6px; padding: 10px 0 16px; border-bottom: 1px solid var(--ak-line); }
.lg-plan__price strong { font-family: var(--ak-font-head); font-size: 46px; font-weight: 600; color: var(--ak-ink); line-height: 1; }
.lg-plan__price span { color: var(--ak-muted); }
.lg-plan ul { display: grid; gap: 12px; flex: 1; margin-bottom: 12px; font-size: 15px; }
.lg-plan li { display: flex; gap: 10px; }
.lg-plan li .icon { width: 18px; height: 18px; margin-top: 3px; color: var(--ak-accent-2); }
.lg-plan--popular { border: 2px solid var(--ak-accent-2); box-shadow: var(--ak-shadow-lg); transform: translateY(-10px); }
.lg-plan__ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 999px; background: var(--ak-accent-2); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* Service details --------------------------------------------------------- */
.lg-svc-hero { padding-block: 110px 90px; }
.lg-svc-hero__ico { width: 64px; height: 64px; margin-bottom: 22px; background: var(--ak-accent-2) !important; color: #fff !important; }
.lg-svc-hero__price { padding: 10px 16px; border-radius: var(--ak-btn-radius); background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); font-size: 15px; color: #fff; }
.lg-svc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; align-items: start; }
.lg-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.lg-svc-nav { display: grid; gap: 4px !important; }
.lg-svc-nav a { display: flex !important; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--ak-radius-sm); background: #fff; font-size: 15px; transition: background-color var(--ar-transition-fast), color var(--ar-transition-fast); }
.lg-svc-nav a .icon { width: 18px; height: 18px; color: var(--ak-accent-2); }
.lg-svc-nav a .icon:last-child { margin-left: auto; color: var(--ak-muted); width: 15px; height: 15px; }
.lg-svc-nav a:hover, .lg-svc-nav a[aria-current] { background: var(--ak-dark); color: #fff !important; }
.lg-svc-nav a[aria-current] .icon, .lg-svc-nav a:hover .icon { color: #fff; }
.lg-quote-widget { background: #fff; border: 1px solid var(--ak-line); box-shadow: var(--ak-shadow); }
.lg-quote-widget .ak-form { gap: 14px; }
.lg-quote-widget .ak-form__grid { gap: 14px; }
.lg-quote-widget .ak-field input { min-height: 46px; }
.lg-help { text-align: left; }
.lg-help .ak-ico { margin-bottom: 14px; }
.lg-help p { font-size: 14.5px; color: var(--ak-muted); margin-bottom: 10px; }
.lg-svc-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 48px; padding: 28px 32px; border-radius: var(--ak-radius-lg); background: var(--ak-surface-2); }
.lg-svc-cta h3 { font-size: 22px; }
.lg-svc-cta p { color: var(--ak-muted); font-size: 15px; }
.lg-why-list { display: grid; gap: 18px !important; }
.lg-why-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; color: var(--ak-muted); }
.lg-why-list .icon { width: 22px; height: 22px; color: var(--ak-accent-2); flex-shrink: 0; margin-top: 2px; }
.lg-why-list strong { display: block; font-size: 15.5px; font-weight: 500; color: var(--ak-ink); }
.lg-mini-steps { counter-reset: m; display: grid; gap: 14px !important; }
.lg-mini-steps li { counter-increment: m; position: relative; padding-left: 40px; font-size: 15px; }
.lg-mini-steps li::before { content: counter(m); position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ak-dark); color: #fff; font-size: 13px; font-weight: 600; }
.lg-mini-steps--lg li { padding-bottom: 6px; }
.lg-mini-steps strong { color: var(--ak-ink); font-weight: 500; }
.lg-quote-done { padding: 40px; border-radius: var(--ak-radius-lg); background: var(--ak-surface-2); text-align: center; animation: ar-fade-up var(--ar-dur-slow) var(--ar-ease-out); }
.lg-quote-done .ak-confirm__ico { margin-bottom: 18px; }
.lg-quote-done dl { margin: 24px auto; max-width: 520px; text-align: left; }

/* Tracking ------------------------------------------------------------- */
.lg-phero-track { padding-bottom: 120px; text-align: center; }
.lg-phero-track h1, .lg-phero-track p { margin-inline: auto; }
.lg-phero-track .ak-crumbs { justify-content: center; }
.lg-trackbox { position: relative; z-index: 2; max-width: 880px; margin: -72px auto 0; padding: 30px; border-radius: var(--ak-radius-lg); background: #fff; box-shadow: var(--ak-shadow-lg); }
.lg-track-out { max-width: 1080px; margin: 48px auto 0; }
.lg-track-out:empty { display: none; }
.lg-tr { display: grid; gap: 24px; animation: ar-fade-up var(--ar-dur-slow) var(--ar-ease-out); }
.lg-tr__head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.lg-tr__card { padding: 28px; border-radius: var(--ak-radius-lg); background: #fff; border: 1px solid var(--ak-line); }
.lg-tr__id { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.lg-tr__id h2 { font-size: 30px; }
.lg-tr__route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; padding: 18px 0; border-block: 1px solid var(--ak-line); }
.lg-tr__route small { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ak-muted); }
.lg-tr__route strong { font-family: var(--ak-font-head); font-size: 22px; color: var(--ak-ink); font-weight: 600; }
.lg-tr__route > span:last-child { text-align: right; }
.lg-tr__plane { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ak-accent-soft); color: var(--ak-accent); }
.lg-tr__plane .icon { width: 22px; height: 22px; }
.lg-tr__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.lg-tr__facts span { display: block; font-size: 12.5px; color: var(--ak-muted); }
.lg-tr__facts strong { font-weight: 500; color: var(--ak-ink); font-size: 15px; }
.lg-tr__progress { margin-top: 22px; }
.lg-tr__progress .lg-ship__bar { height: 8px; margin-top: 8px; }
.lg-tr__eta { display: flex; justify-content: space-between; font-size: 14px; color: var(--ak-muted); }
.lg-tr__eta strong { color: var(--ak-ink); }
.lg-tr__map { background: var(--ak-dark); border-color: var(--ak-dark); display: grid; align-content: center; gap: 16px; }
.lg-tr__map h3 { color: #fff; font-size: 18px; }
.lg-tr__map .lg-map { aspect-ratio: 1000 / 383; }
.lg-tr__map .lg-pin span { opacity: 1; transform: translate(-50%, 0); font-size: 11px; }
.lg-tr__map p { font-size: 13.5px; color: var(--ak-dark-muted); }
.lg-tr__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lg-multi { max-width: 1080px; margin: 32px auto 0; border: 1px solid var(--ak-line); border-radius: var(--ak-radius-lg); }
.lg-multi > summary { display: flex; align-items: center; gap: 10px; padding: 18px 22px; list-style: none; cursor: pointer; font-weight: 500; color: var(--ak-ink); }
.lg-multi > summary::-webkit-details-marker { display: none; }
.lg-multi > summary .icon { width: 19px; height: 19px; }
.lg-multi > summary .icon:last-child { margin-left: auto; transition: transform var(--ar-transition-slow); }
.lg-multi[open] > summary .icon:last-child { transform: rotate(180deg); }
.lg-multi__form { display: grid; gap: 12px; padding: 0 22px 22px; }
.lg-multi__form textarea { min-height: 90px; resize: vertical; }
.lg-multi__form .ak-btn { justify-self: start; }
.lg-multi [data-lg-multi-out]:not(:empty) { padding: 0 22px 22px; }
.lg-statusguide { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; }

/* Jobs, featured post, news band, faq ------------------------------- */
.lg-jobs { display: grid; gap: 14px; }
.lg-job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 18px 22px; border-radius: var(--ak-radius); background: #fff; border: 1px solid var(--ak-line); transition: border-color var(--ar-transition-base), box-shadow var(--ar-transition-base), transform var(--ar-transition-base); }
.lg-job:hover { border-color: var(--ak-accent-2); box-shadow: var(--ak-shadow); transform: translateY(-2px); }
.lg-job .ak-ico { width: 46px; height: 46px; }
.lg-job .ak-ico .icon { width: 21px; height: 21px; }
.lg-job__main strong { display: block; font-family: var(--ak-font-head); font-size: 19px; font-weight: 600; color: var(--ak-ink); }
.lg-job__main small { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ak-muted); }
.lg-job__main small .icon { width: 15px; height: 15px; }
.lg-job__go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ak-surface-2); color: var(--ak-ink); transition: background-color var(--ar-transition-base), color var(--ar-transition-base); }
.lg-job:hover .lg-job__go { background: var(--ak-accent-2); color: #fff; }
.lg-job__go .icon { width: 17px; height: 17px; }
.lg-job-hero { padding-block: 64px; }
.lg-job-meta { display: flex; flex-wrap: wrap; gap: 12px 26px; margin-top: 18px; color: var(--ak-muted); }
.lg-job-meta li { display: inline-flex; align-items: center; gap: 8px; }
.lg-job-meta .icon { width: 18px; height: 18px; color: var(--ak-accent-2); }
.lg-featured { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.lg-featured .ak-media { aspect-ratio: 16 / 10; }
.lg-featured__body { display: grid; gap: 16px; justify-items: start; }
.lg-featured h2 { font-size: clamp(28px, 3vw, 40px); }
.lg-featured p { color: var(--ak-muted); }
.lg-featured:hover h2 { color: var(--ak-accent-2); }
.lg-featured:hover .ak-media img { transform: scale(1.04); }
.lg-newsband { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.lg-page .ak-section--alt .ak-news input { background: #fff; }
.lg-page .ak-section--alt .ak-footer__newsmsg, .lg-soon .ak-footer__newsmsg { color: var(--ak-success); }
.lg-soon .ak-footer__newsmsg { color: #9be3b9; }
.lg-faq-search { max-width: 620px; margin-top: 28px; }
.lg-faq-search .ak-shop-search input { background: #fff; }
.lg-faqgroup[hidden] { display: none; }
.ak-faq details[hidden] { display: none; }
.lg-contact-map { min-height: 420px; }
.lg-offices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.lg-offices div { padding: 14px 16px; border-radius: var(--ak-radius); background: var(--ak-surface-2); }
.lg-offices strong { display: block; color: var(--ak-ink); font-weight: 500; }
.lg-offices span { font-size: 13px; color: var(--ak-muted); }
.lg-mini-ships { display: grid; gap: 10px; }
.lg-mini-ship { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 18px; border: 1px solid var(--ak-line); border-radius: var(--ak-radius); font-size: 14.5px; transition: border-color var(--ar-transition-fast); }
.lg-mini-ship:hover { border-color: var(--ak-accent-2); }
.lg-mini-ship strong { color: var(--ak-ink); font-weight: 600; }

/* Coming soon, video, 404 --------------------------------------------- */
.lg-page--bare { background: var(--ak-dark); }
.lg-soon { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; color: #fff; isolation: isolate; overflow: hidden; padding-block: 56px; }
.lg-soon > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.lg-soon::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(7, 21, 48, .92), rgba(7, 21, 48, .55)); }
.lg-soon__inner { display: grid; justify-items: start; }
.lg-soon .ak-logo { color: #fff; }
.lg-soon .ak-logo__text small { color: rgba(255, 255, 255, .7); }
.lg-soon .ak-eyebrow { color: #ffb183; }
.lg-soon h1 { color: #fff; font-size: clamp(38px, 5.6vw, 72px); max-width: 14ch; }
.lg-soon p { margin: 18px 0 36px; max-width: 52ch; font-size: 18px; color: rgba(255, 255, 255, .84); }
.lg-soon .ak-news input { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; }
.lg-soon .ak-news input::placeholder { color: rgba(255, 255, 255, .6); }
.lg-video { width: min(960px, calc(100% - 32px)); background: #000; }
.lg-video__frame { position: relative; aspect-ratio: 16 / 9; }
.lg-video__frame img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.lg-video__over { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; color: #fff; }
.lg-video__over h2 { color: #fff; font-size: 28px; }
.lg-video__over p { color: rgba(255, 255, 255, .8); font-size: 14px; }
.lg-video__play { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; background: var(--ak-accent-2); }
.lg-video__play .icon { width: 30px; height: 30px; fill: #fff; }
.lg-404-art { width: 100%; height: auto; }
.lg-404-box { transform-origin: 330px 180px; animation: lg-sway 5s var(--ar-ease-standard) infinite; }
@keyframes lg-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.lg-case-modal__media { aspect-ratio: 16 / 7; overflow: hidden; }
.lg-case-modal__media img { width: 100%; height: 100%; object-fit: cover; }
.lg-case-modal__grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; }
.lg-case-modal__stat { padding: 22px; border-radius: var(--ak-radius); background: var(--ak-dark); color: var(--ak-dark-muted); align-self: start; }
.lg-case-modal__stat strong { display: block; font-family: var(--ak-font-head); font-size: 44px; font-weight: 600; color: var(--ak-accent-2); line-height: 1; }
.lg-case-modal__stat .ak-btn { margin-top: 18px; }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1199px) {
  .lg-hubs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-inds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-statusguide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg-svc-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 40px; }
}
@media (max-width: 991px) {
  .lg-hero__inner { grid-template-columns: 1fr; }
  .lg-live { display: none; }
  .lg-hero__copy { padding-bottom: 48px; }
  .lg-mini-form { grid-template-columns: 1fr 1fr; }
  .lg-mini-form .ak-btn { grid-column: 1 / -1; }
  .lg-network__grid { grid-template-columns: 1fr; gap: 40px; }
  .lg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-mode { grid-template-columns: 1fr; }
  .lg-mode__img { min-height: 280px; aspect-ratio: 16 / 9; }
  .lg-collage { min-height: 440px; }
  .lg-whimg__card { left: 16px; }
  .lg-plans { grid-template-columns: 1fr; max-width: 520px; }
  .lg-plan--popular { transform: none; }
  .lg-svc-layout { grid-template-columns: minmax(0, 1fr); }
  .lg-tr__head { grid-template-columns: minmax(0, 1fr); }
  .lg-hubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-featured { grid-template-columns: 1fr; gap: 28px; }
  .lg-case-modal__grid { grid-template-columns: 1fr; }
  .lg-hubcard { position: static; margin: 16px auto 0; }
}
@media (max-width: 767px) {
  .lg-hero { padding-top: 64px; }
  .lg-hero p { font-size: 16.5px; }
  .lg-hero__quick { margin-bottom: -40px; }
  .lg-page--home .lg-metrics { padding-top: 96px; }
  .lg-quick__tabs [role="tab"] { flex-direction: column; gap: 4px; min-height: 66px; font-size: 13px; text-align: center; }
  .lg-quick__panel { padding: 20px 16px; }
  .lg-track-form { flex-direction: column; align-items: stretch; }
  .lg-track-form--lg { align-items: stretch; }
  .lg-mini-form { grid-template-columns: 1fr; }
  .lg-mini-result { grid-template-columns: 1fr; gap: 10px; }
  .lg-capgrid { grid-template-columns: 1fr; }
  .lg-inds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-features { grid-template-columns: 1fr; }
  .lg-steps--compact { grid-template-columns: 1fr; }
  .lg-tr__facts { grid-template-columns: 1fr 1fr; }
  .lg-tr__route strong { font-size: 18px; }
  .lg-trackbox { padding: 20px; }
  .lg-statusguide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg-job { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lg-job .ak-badge { display: none; }
  .lg-offices { grid-template-columns: 1fr; }
  .lg-mini-ship { grid-template-columns: 1fr auto; }
  .lg-mini-ship > span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 13.5px; color: var(--ak-muted); }
  .lg-map--lg .lg-pin span { display: none; }
  .lg-cta::before { background: linear-gradient(0deg, rgba(7, 21, 48, .95) 0%, rgba(7, 21, 48, .6) 100%); }
  .lg-collage { min-height: 360px; }
}
@media (max-width: 575px) {
  .lg-steps, .lg-timeline, .lg-hubs, .lg-statusguide { grid-template-columns: 1fr; }
  .lg-net-list strong { font-size: 26px; }
  .lg-collage__badge strong { font-size: 30px; }
  .lg-hubcard { grid-template-columns: 80px minmax(0, 1fr); }
  .lg-hubcard img { width: 80px; height: 80px; }
  .lg-whimg__card { position: static; margin-top: -40px; margin-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-live, .lg-404-box, .lg-map__routes path, .lg-live__dot { animation: none; }
}
.lg-map--lg .lg-pin[data-lab="left"] span { left: auto; right: calc(100% + 2px); bottom: auto; top: 50%; transform: translate(0, -50%); }
.lg-map--lg .lg-pin[data-lab="below"] span { bottom: auto; top: calc(100% + 2px); }
.lg-map--lg .lg-pin[data-lab="right"] span { left: calc(100% + 2px); bottom: auto; top: 50%; transform: translate(0, -50%); }