/* ==========================================================================
   Crossworld Freighters — Design System
   Built to Crossworld Brand Guidelines v1.0 (August 2026).
   Charcoal ground, Crossworld Red as accent, Archivo + IBM Plex Sans.
   The four-stop mark gradient is reserved for the logo mark ONLY —
   never on type, panels or backgrounds.
   ========================================================================== */

/* Fonts are loaded via <link rel="preconnect"> + stylesheet in each page head —
   an @import here would serialise the request behind this file. */

:root{
  /* --- Brand core ------------------------------------------------------ */
  --brand-red:#CE1B22;      /* Crossworld Red — primary accent           */
  --brand-charcoal:#23262A; /* Crossworld Charcoal — dark ground         */

  /* Charcoal ramp, derived from #23262A */
  --navy-950:#16181B;
  --navy-900:#1C1F22;
  --navy-800:#23262A;
  --navy-700:#2E3238;
  --navy-600:#3C4147;

  /* Red ramp. --teal-* / --cyan-* names retained so existing rules keep
     resolving; values are now brand-correct. */
  --teal-400:#CE1B22;       /* accent red, AA on white (5.5:1)           */
  --teal-300:#FF8A8E;       /* red tint for small text on charcoal (6.7:1)*/
  --cyan-400:#FF3C42;       /* bright red, graphics only                 */
  --brand-ink:#CE1B22;      /* red text on light grounds                 */
  --brand-deep:#B9151B;     /* deep red, hovers and borders              */
  --gold-400:#f0b64c;
  --gold-300:#f7ce82;

  /* --- Neutrals (brand guideline values) ------------------------------- */
  --ink-950:#23262A;        /* primary text                              */
  --ink-700:#4A4D52;        /* secondary text                            */
  --ink-500:#4A4D52;        /* secondary text                            */
  --ink-300:#B9BCC0;        /* tertiary text on charcoal                 */
  --ink-100:#FFFFFF;
  --paper:#FFFFFF;          /* paper                                     */
  --paper-dim:#F6F6F4;      /* panels                                    */
  --rule:#E6E6E4;           /* rules                                     */
  --white:#ffffff;

  --glass-fill:rgba(255,255,255,0.05);
  --glass-fill-strong:rgba(255,255,255,0.085);
  --glass-border:rgba(255,255,255,0.16);
  --glass-border-soft:rgba(255,255,255,0.09);

  --shadow-lg:0 30px 80px -20px rgba(22,24,27,0.45);
  --shadow-md:0 18px 40px -14px rgba(22,24,27,0.28);
  --shadow-glow:0 0 0 1px rgba(206,27,34,0.25), 0 0 40px -8px rgba(206,27,34,0.4);

  --font-head:'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body:'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'Consolas', monospace;

  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:26px;
  --radius-pill:100px;

  --ease:cubic-bezier(.22,.87,.24,1);
}

/* ---------------------------------------------------------------------- */
/* Reset */
/* ---------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
/* scroll-padding keeps #anchor targets clear of the fixed header */
html{scroll-behavior:smooth;scroll-padding-top:110px;}
body,h1,h2,h3,h4,p,figure,blockquote{margin:0;}
ul[class],ol[class]{list-style:none;margin:0;padding:0;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
input,textarea,select{font:inherit;color:inherit;}
svg{display:block;}

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink-950);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{background:var(--teal-400);color:var(--navy-950);}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--navy-950);}
::-webkit-scrollbar-thumb{background:var(--navy-600);border-radius:10px;}

.container{
  width:100%;
  max-width:1240px;
  margin:0 auto;
  padding:0 clamp(20px,4vw,40px);
}

section{position:relative;}

/* ---------------------------------------------------------------------- */
/* Typography */
/* ---------------------------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;letter-spacing:-0.01em;line-height:1.08;color:var(--navy-950);}
h1{font-size:clamp(2.4rem,5.2vw,4.4rem);}
h2{font-size:clamp(1.9rem,3.6vw,3rem);}
h3{font-size:clamp(1.25rem,2vw,1.6rem);}
h4{font-size:1.05rem;}

.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark p,.on-dark,
.surface-dark h1,.surface-dark h2,.surface-dark h3,.surface-dark h4{color:var(--ink-100);}

p{color:var(--ink-700);}
.on-dark p,.surface-dark p,.site-footer p{color:var(--ink-300);}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--brand-ink);
  font-weight:500;
}
.surface-dark .eyebrow,.on-dark .eyebrow{color:var(--teal-300);}
.eyebrow::before{
  content:'';
  width:7px;height:7px;border-radius:50%;
  background:var(--teal-400);
  box-shadow:0 0 0 4px rgba(206,27,34,.18);
}

.lede{font-size:clamp(1rem,1.3vw,1.2rem);color:var(--ink-500);max-width:56ch;}
.on-dark .lede,.surface-dark .lede{color:var(--ink-300);}

.mono{font-family:var(--font-mono);letter-spacing:.03em;}

/* Arabic registered entity name (taken verbatim from the trade licence).
   IBM Plex Sans Arabic is the companion face to our body font and is loaded
   only on the pages that show Arabic. Markup carries lang="ar" dir="rtl";
   unicode-bidi:isolate stops the surrounding brackets and commas from being
   reordered, which is the usual way Arabic inside English copy breaks. */
.ar{
  font-family:'IBM Plex Sans Arabic','Noto Sans Arabic','Segoe UI',Tahoma,sans-serif;
  font-weight:400;
  font-size:1.06em;
  line-height:1.8;
  unicode-bidi:isolate;
}

/* ---------------------------------------------------------------------- */
/* Buttons */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:var(--radius-pill);
  font-weight:600;
  font-size:.95rem;
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  cursor:pointer;
}
.btn svg{width:16px;height:16px;transition:transform .3s var(--ease);}
.btn:hover svg{transform:translate(3px,-2px);}

/* Flat Crossworld Red — the brand gradient is reserved for the mark.
   White on #CE1B22 = 5.5:1, clears AA. */
.btn-primary{
  background:var(--brand-red);
  color:#ffffff;
  box-shadow:0 12px 26px -12px rgba(206,27,34,.5);
}
.btn-primary:hover{background:var(--brand-deep);transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(206,27,34,.6);}

.btn-ghost{
  background:transparent;
  border:1.5px solid var(--glass-border);
  color:var(--ink-100);
}
.btn-ghost:hover{border-color:var(--teal-400);background:rgba(206,27,34,.08);}

.btn-dark{
  background:var(--navy-950);
  color:var(--ink-100);
  border:1.5px solid rgba(255,255,255,.08);
}
.btn-dark:hover{transform:translateY(-2px);border-color:var(--teal-400);}

.btn-sm{padding:10px 18px;font-size:.85rem;}
.btn-block{width:100%;justify-content:center;}

/* ---------------------------------------------------------------------- */
/* Header / Nav */
/* ---------------------------------------------------------------------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  padding:18px 0;
  transition:padding .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
/* The frosted background lives on a pseudo-element, NOT on .site-header itself.
   backdrop-filter creates a containing block for position:fixed descendants —
   with it on the header, the off-canvas .main-nav stopped being fixed to the
   viewport once .is-scrolled applied, and got clipped to the header's height. */
.site-header::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:0;
  background:rgba(22,24,27,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  transition:opacity .35s var(--ease);
  pointer-events:none;
}
.site-header.is-scrolled::before{opacity:1;}
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-header.is-scrolled{
  padding:12px 0;
  border-bottom:1px solid var(--glass-border-soft);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.4);
}

.brand{display:flex;align-items:center;gap:12px;}
/* Master lockup artwork from the brand pack. The white lockup is the correct
   variant on charcoal grounds (header and footer). */
.brand-lockup{height:54px;width:auto;flex-shrink:0;display:block;}
.site-header.is-scrolled .brand-lockup{height:46px;transition:height .35s var(--ease);}
@media (max-width:520px){.brand-lockup{height:42px;}}

.main-nav{display:flex;align-items:center;gap:2px;}
.main-nav a{
  padding:11px 18px;
  border-radius:var(--radius-pill);
  font-size:1rem;
  font-weight:500;
  color:var(--ink-300);
  transition:color .25s var(--ease), background .25s var(--ease);
}
.main-nav a:hover{color:var(--ink-100);background:var(--glass-fill);}
.main-nav a.is-active{color:#ffffff;background:var(--brand-deep);}

/* --- Divisions dropdown --------------------------------------------------
   A real <button> with aria-expanded, not a hover-only panel: hover alone is
   unusable on touch and invisible to keyboards. main.js drives open/close;
   the panel is [hidden] until then, so it degrades to nothing without JS
   rather than sitting open over the page. Below 1024px .main-nav becomes an
   off-canvas column, and the panel renders inline there instead. */
.nav-dd{position:relative;}
.nav-dd-toggle{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 18px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:1rem;font-weight:500;
  color:var(--ink-300);background:none;border:0;cursor:pointer;
  transition:color .25s var(--ease), background .25s var(--ease);
}
.nav-dd-toggle:hover{color:var(--ink-100);background:var(--glass-fill);}
.nav-dd-toggle[aria-expanded="true"]{color:var(--ink-100);background:var(--glass-fill);}
.nav-dd-chev{width:13px;height:13px;flex-shrink:0;transition:transform .25s var(--ease);}
.nav-dd-toggle[aria-expanded="true"] .nav-dd-chev{transform:rotate(180deg);}

.nav-dd-menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  width:min(92vw,340px);z-index:1200;
  background:var(--navy-950);
  border:1px solid var(--glass-border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  padding:8px;
}
.nav-dd-menu a,.nav-dd-menu .is-soon{
  display:block;padding:11px 13px;border-radius:var(--radius-sm);
  text-align:left;
}
.nav-dd-menu a:hover{background:var(--glass-fill);}
.nav-dd-menu strong{
  display:block;font-family:var(--font-head);font-weight:600;
  font-size:.95rem;color:var(--ink-100);line-height:1.25;
}
.nav-dd-menu span{
  display:block;font-size:.78rem;color:var(--ink-300);margin-top:3px;line-height:1.4;
}
/* Divisions without a page yet. Shown so the group reads complete, but not a
   link — a dead nav item is worse than an honest "soon". */
.nav-dd-menu .is-soon{opacity:.55;cursor:default;}
.nav-dd-menu .is-soon em{
  display:inline-block;margin-top:5px;font-style:normal;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:100px;
  background:var(--glass-fill);border:1px solid var(--glass-border-soft);color:var(--ink-300);
}
.nav-dd-all{
  margin-top:6px;padding-top:11px !important;
  border-top:1px solid var(--glass-border-soft);
  font-size:.8rem;color:var(--ink-300) !important;
}
.nav-dd-all:hover{color:var(--ink-100) !important;}

@media (max-width:1024px){
  /* Inside the off-canvas panel a popover makes no sense — render the list
     inline and let the panel scroll. */
  .nav-dd{width:100%;}
  .nav-dd-toggle{width:100%;justify-content:space-between;padding:14px 16px;font-size:1.05rem;}
  .nav-dd-menu{
    position:static;transform:none;width:auto;
    box-shadow:none;border:0;border-left:1px solid var(--glass-border-soft);
    border-radius:0;margin:2px 0 6px 16px;padding:0 0 0 10px;background:none;
  }
  .nav-dd-menu a,.nav-dd-menu .is-soon{padding:10px 6px;}
}

.header-cta{display:flex;align-items:center;gap:14px;}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  border-radius:50%;
  border:1px solid var(--glass-border);
  align-items:center;justify-content:center;
  flex-shrink:0;
}
.nav-toggle span{display:block;width:18px;height:1.5px;background:var(--ink-100);position:relative;transition:background .2s;}
.nav-toggle span::before,.nav-toggle span::after{
  content:'';position:absolute;left:0;width:18px;height:1.5px;background:var(--ink-100);transition:transform .3s var(--ease);
}
.nav-toggle span::before{top:-6px;}
.nav-toggle span::after{top:6px;}
.nav-toggle.is-open span{background:transparent;}
.nav-toggle.is-open span::before{transform:translateY(6px) rotate(45deg);}
.nav-toggle.is-open span::after{transform:translateY(-6px) rotate(-45deg);}

/* ---------------------------------------------------------------------- */
/* Dark hero surfaces & background fx */
/* ---------------------------------------------------------------------- */
.surface-dark{
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(206,27,34,.10), transparent 60%),
    radial-gradient(900px 500px at 8% 8%, rgba(255,60,66,.06), transparent 55%),
    linear-gradient(180deg,var(--navy-950),var(--navy-900) 55%,var(--navy-800));
  color:var(--ink-100);
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.grid-overlay{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 75%);
  pointer-events:none;
  z-index:0;
}
.noise-veil::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(22,24,27,.5));
  z-index:0;
}

[data-tilt]{transition:transform .15s ease-out;transform:perspective(1200px) rotateX(0deg) rotateY(0deg);will-change:transform;}
[data-tilt] .route-dot{cursor:pointer;}

.glow-orb{
  position:absolute;border-radius:50%;
  filter:blur(60px);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

/* ---------------------------------------------------------------------- */
/* Glass card */
/* ---------------------------------------------------------------------- */
.glass{
  background:var(--glass-fill);
  border:1px solid var(--glass-border-soft);
  border-radius:var(--radius-md);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.card{
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(206,27,34,.35);}

/* ---------------------------------------------------------------------- */
/* Section chrome */
/* ---------------------------------------------------------------------- */
.section{padding:clamp(72px,10vw,128px) 0;}
.section-tight{padding:clamp(48px,6vw,80px) 0;}

.section-head{max-width:680px;margin-bottom:clamp(36px,5vw,64px);}
.section-head.centered{margin-inline:auto;text-align:center;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{margin-top:16px;}
.section-head .lede{margin-top:18px;}
.section-head.centered .lede{margin-inline:auto;}

.tilt-divider{
  position:absolute;left:0;right:0;height:90px;
  background:inherit;
  clip-path:polygon(0 0,100% 100%,100% 100%,0 100%);
}

.diag-cut-top{clip-path:polygon(0 40px, 100% 0, 100% 100%, 0 100%);}

/* ---------------------------------------------------------------------- */
/* Stat band */
/* ---------------------------------------------------------------------- */
.stat-grid{
  display:grid;
  /* auto-fit rather than a fixed 4, so a band with three stats fills the row
     instead of leaving an empty column */
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  background:var(--glass-border-soft);
  border:1px solid var(--glass-border-soft);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.stat-cell{
  background:rgba(22,24,27,.35);
  padding:32px 24px;
  text-align:center;
}
.stat-num{
  font-family:var(--font-head);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  color:var(--teal-300);
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
}
.stat-label{
  margin-top:8px;
  font-size:.82rem;
  color:var(--ink-300);
  font-weight:500;
}

/* ---------------------------------------------------------------------- */
/* Route / map motifs */
/* ---------------------------------------------------------------------- */
.route-dot{animation:pulse-dot 2.4s ease-in-out infinite;}
@keyframes pulse-dot{
  0%,100%{opacity:1;r:4;}
  50%{opacity:.35;r:6;}
}
.route-path{stroke-dasharray:6 8;animation:dash-move 26s linear infinite;}
@keyframes dash-move{to{stroke-dashoffset:-1000;}}

/* ---------------------------------------------------------------------- */
/* Hero world map (js/worldmap.js)                                          */
/* Land is drawn three times — blurred aura, crisp coastline, solid fill —   */
/* so the red picks out the outer edge of each landmass and internal country */
/* borders stay hidden behind the opaque top layer.                          */
/* ---------------------------------------------------------------------- */
.world-map{display:block;width:100%;height:auto;overflow:visible;}
.map-panel{padding:20px;}
/* Desktop only: give the map column the larger share and trim the panel
   padding, so the map gains roughly a quarter of its width. The left column
   still holds the lede comfortably. Below 1024px .grid-2 collapses to one
   column and these no longer apply. */
@media (min-width:1025px){
  /* .grid-2 is declared later in this file, so a bare .hero-grid would lose on
     source order at equal specificity — hence the doubled selector. */
  .grid-2.hero-grid{grid-template-columns:0.8fr 1.2fr;}
  .map-panel{padding:14px;}
}
.wm-land{fill:#332c31;stroke:#574851;stroke-width:.4;}
.wm-land.is-market{fill:#4e3036;stroke:rgba(206,27,34,.85);stroke-width:.55;}
.wm-aura{fill:var(--brand-deep);stroke:var(--brand-deep);stroke-width:3.6;}
.wm-aura-layer{opacity:.8;}
.wm-edge{fill:none;stroke:var(--brand-red);stroke-width:2.2;stroke-linejoin:round;}
.wm-edge-layer{opacity:.95;}

.wm-lane{fill:none;stroke:url(#wmLane);stroke-width:1.8;stroke-linecap:round;opacity:.9;}
.wm-lane-dash{fill:none;stroke:rgba(255,138,142,.55);stroke-width:1.1;stroke-dasharray:2 7;stroke-linecap:round;}
.wm-mover{fill:var(--cyan-400);}

.wm-halo{fill:var(--brand-red);opacity:.16;}
.wm-halo.is-hq{fill:var(--gold-400);opacity:.14;}
.wm-ring{fill:none;stroke:var(--brand-red);stroke-width:1.2;}
.wm-ring.is-hq{stroke:var(--gold-400);}
.wm-core{fill:var(--cyan-400);}
.wm-core.is-hq{fill:var(--gold-400);stroke:#fff;stroke-width:1.4;}
.wm-label{font-family:var(--font-mono);font-weight:500;font-size:19px;letter-spacing:.06em;
  fill:var(--ink-100);paint-order:stroke;stroke:rgba(22,24,27,.85);stroke-width:4px;}
.wm-label.is-hq{fill:var(--gold-300);}

/* No label bump in the 641–1024px band: .grid-2 collapses to a single column
   there, so the map is WIDER than on desktop and 19px already renders larger. */
/* Below ~640px the panel is under 300px wide, so a 900-unit map puts labels at
   roughly 8px — unreadable. Drop them and let the map read as a graphic: the
   hub pills above and the city strip below already name all four markets, so
   nothing is lost. Nodes grow to stay legible at that size. */
@media (max-width:640px){
  .wm-label{display:none;}
  .wm-core{r:6;}
  .wm-core.is-hq{r:7.5;}
  .wm-edge{stroke-width:3.4;}
  .wm-lane{stroke-width:2.6;}
  .wm-aura{stroke-width:4.6;}
}

/* ---------------------------------------------------------------------- */
/* Reveal-on-scroll */
/* ---------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
[data-reveal].is-visible{opacity:1;transform:translateY(0);}
[data-reveal="fade"]{transform:none;}
[data-reveal-delay="1"]{transition-delay:.08s;}
[data-reveal-delay="2"]{transition-delay:.16s;}
[data-reveal-delay="3"]{transition-delay:.24s;}
[data-reveal-delay="4"]{transition-delay:.32s;}
[data-reveal-delay="5"]{transition-delay:.4s;}

/* ---------------------------------------------------------------------- */
/* Grids & layout helpers */
/* ---------------------------------------------------------------------- */
/* Ticked feature list. Shared by services.html and the construction division
   pages — an inline SVG with no width/height renders at its intrinsic default,
   so these dimensions are load-bearing, not decoration. */
.check-list{display:flex;flex-direction:column;gap:14px;margin-top:26px;}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--ink-700);list-style:none;}
.check-list svg{width:20px;height:20px;flex-shrink:0;color:var(--teal-400);margin-top:1px;}
/* Inside a card the UA list indent stacks on top of the card padding. */
.card .check-list{padding-left:0;}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:16px;}

/* ---------------------------------------------------------------------- */
/* Service / feature cards */
/* ---------------------------------------------------------------------- */
.icon-tile{
  width:52px;height:52px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(206,27,34,.16), rgba(255,60,66,.1));
  border:1px solid rgba(206,27,34,.25);
  color:var(--teal-400);
  flex-shrink:0;
}
.icon-tile svg{width:26px;height:26px;}

.feature-card{padding:32px;display:flex;flex-direction:column;gap:16px;}
.feature-card h3{margin-top:4px;}
.feature-card p{font-size:.94rem;}

.pill-tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;
  border-radius:var(--radius-pill);
  font-size:.76rem;
  font-weight:600;
  background:var(--paper-dim);
  color:var(--navy-700);
}
.on-dark .pill-tag{background:var(--glass-fill);color:var(--teal-300);border:1px solid var(--glass-border-soft);}



/* ---------------------------------------------------------------------- */
/* Forms */
/* ---------------------------------------------------------------------- */
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-size:.82rem;font-weight:600;color:var(--ink-700);}
.on-dark .field label{color:var(--ink-300);}
.field input,.field select,.field textarea{
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--rule);
  background:var(--white);
  font-size:.95rem;
  transition:border-color .25s, box-shadow .25s;
}
.on-dark .field input,.on-dark .field select,.on-dark .field textarea{
  background:rgba(255,255,255,.04);
  border-color:var(--glass-border-soft);
  color:var(--ink-100);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--teal-400);box-shadow:0 0 0 4px rgba(206,27,34,.15);
}
.field textarea{resize:vertical;min-height:120px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}

/* ---------------------------------------------------------------------- */
/* Footer */
/* ---------------------------------------------------------------------- */
.site-footer{background:var(--navy-950);color:var(--ink-300);position:relative;overflow:hidden;}
.footer-top{padding:clamp(56px,7vw,88px) clamp(20px,4vw,40px) 48px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.footer-col h4{color:var(--ink-100);margin-bottom:18px;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;font-family:var(--font-mono);font-weight:500;}
.footer-col a{display:block;padding:6px 0;font-size:.92rem;color:var(--ink-300);transition:color .2s;}
.footer-col a:hover{color:var(--teal-300);}
.footer-bottom{padding:26px clamp(20px,4vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--ink-300);}
.group-strip{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 22px;border-radius:var(--radius-md);
  background:var(--glass-fill);border:1px solid var(--glass-border-soft);
  margin-bottom:40px;
}
.group-strip .sep{width:1px;height:18px;background:var(--glass-border);}
.group-chip{font-size:.78rem;font-weight:600;color:var(--ink-300);}
.group-chip.is-live{color:var(--teal-300);}
/* Vision 2030 support row — its own band between the footer columns and the
   copyright line. Deliberately not inside the contact column and not next to
   the World Shipping Alliance pill: WSA is a membership held, Vision 2030 is a
   national programme supported, and the two should not read as the same kind
   of badge. Government mark — do not recolour, distort or crop. */
.footer-vision{
  display:flex;align-items:center;gap:clamp(16px,3vw,28px);flex-wrap:wrap;
  padding:22px clamp(20px,4vw,40px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-vision img{width:150px;height:auto;flex-shrink:0;display:block;}
.footer-vision span{font-size:.82rem;color:var(--ink-300);max-width:46ch;line-height:1.6;}

/* Division lockup in the footer. Sized by WIDTH with height:auto so the
   aspect ratio survives the max-width clamp on narrow columns — fixing the
   height instead would squash the artwork. 292px puts the endorsement line
   inside the SVG at ~10.7px; see SITE-MAINTENANCE.md §8 for the height floor. */
.footer-division-lockup{width:292px;max-width:100%;height:auto;display:block;}
@media (max-width:1024px){.footer-division-lockup{width:262px;}}

.social-row{display:flex;gap:10px;margin-top:18px;}
.social-row a{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--glass-border-soft);color:var(--ink-300);
}
.social-row a:hover{border-color:var(--teal-400);color:var(--teal-300);}
.social-row a svg{width:16px;height:16px;}

/* ---------------------------------------------------------------------- */
/* Utility */
/* ---------------------------------------------------------------------- */
/* Unmissable marker for content awaiting real data — must be empty before launch.
   Search the project for "needs-input" to find every remaining one. */
.needs-input{
  display:inline-block;
  background:repeating-linear-gradient(45deg,#ffe9a8,#ffe9a8 8px,#ffdc7a 8px,#ffdc7a 16px);
  color:#5c4405;
  border:1px dashed #b8860b;
  border-radius:4px;
  padding:1px 7px;
  font-family:var(--font-mono);
  font-size:.82em;
  font-weight:600;
}

.text-center{text-align:center;}
.mt-8{margin-top:8px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;} .mt-48{margin-top:48px;}
.mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}
.gap-12{gap:12px;} .gap-16{gap:16px;}
.flex{display:flex;} .items-center{align-items:center;} .justify-center{justify-content:center;}
.w-full{width:100%;}
.hide-mobile{display:initial;}
.show-mobile{display:none;}

/* ---------------------------------------------------------------------- */
/* Page hero shared */
/* ---------------------------------------------------------------------- */
.page-hero{padding:calc(clamp(72px,10vw,128px) + 60px) 0 clamp(64px,8vw,96px);}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--ink-300);margin-bottom:20px;}
.breadcrumb .sep{opacity:.5;}
.breadcrumb .current{color:var(--teal-300);}

/* ---------------------------------------------------------------------- */
/* Responsive */
/* ---------------------------------------------------------------------- */
/* The off-canvas menu and its toggle MUST switch on at the same breakpoint.
   Previously the nav hid at 1024px but the toggle only appeared at 720px,
   leaving tablet widths with no navigation at all. */
@media (max-width:1024px){
  .grid-2{grid-template-columns:1fr;}
  .grid-3{grid-template-columns:1fr 1fr;}
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:36px;}

  .main-nav{
    position:fixed;top:0;right:0;bottom:0;
    width:min(80vw,340px);
    background:var(--navy-950);
    flex-direction:column;
    align-items:stretch;
    padding:100px 28px 40px;
    gap:4px;
    transform:translateX(100%);
    /* visibility keeps the closed panel out of the tab order */
    visibility:hidden;
    transition:transform .4s var(--ease), visibility 0s linear .4s;
    box-shadow:-20px 0 50px rgba(0,0,0,.4);
    display:flex;
    overflow-y:auto;
  }
  .main-nav.is-open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .4s var(--ease), visibility 0s;
  }
  .main-nav a{padding:14px 16px;font-size:1.05rem;}
  .nav-toggle{display:flex;}
  .header-cta .btn-ghost{display:none;}
}
@media (max-width:860px){
  .field-row{grid-template-columns:1fr;}
}
@media (max-width:720px){
  .grid-3{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr 1fr;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hide-mobile{display:none;}
  .show-mobile{display:initial;}
}
@media (max-width:520px){
  .stat-grid{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:1fr;}
}

/* Nav scrim for mobile menu */
.nav-scrim{
  position:fixed;inset:0;background:rgba(22,24,27,.6);
  opacity:0;pointer-events:none;transition:opacity .35s;z-index:900;
}
.nav-scrim.is-open{opacity:1;pointer-events:auto;}

/* ---------------------------------------------------------------------- */
/* Focus states — keyboard users must always see where they are           */
/* ---------------------------------------------------------------------- */
:focus-visible{
  outline:3px solid var(--gold-400);
  outline-offset:3px;
  border-radius:4px;
}
.surface-dark :focus-visible,
.site-footer :focus-visible{outline-color:var(--gold-300);}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{outline-offset:0;}

/* Skip link — first tab stop on every page */
.skip-link{
  position:absolute;
  left:16px;top:-100px;
  z-index:2000;
  padding:12px 20px;
  border-radius:0 0 10px 10px;
  background:var(--gold-400);
  color:var(--navy-950);
  font-weight:700;
  font-size:.9rem;
  transition:top .2s var(--ease);
}
.skip-link:focus{top:0;}

/* ---------------------------------------------------------------------- */
/* Reduced motion — this site runs ~20 looping animations by default      */
/* ---------------------------------------------------------------------- */
/* ==========================================================================
   Crossworld Construction — trading division section
   A self-contained set of pages (construction*.html) that sits inside this
   site rather than on its own domain. It keeps the group header and footer
   so the relationship stays visible, but carries its own division bar,
   local nav and accent so it reads as a distinct business.
   The division does NOT get its own accent colour. Two reasons: the division
   lockup guidelines state "no division has its own colour, mark, typeface or
   gradient"; and gold already carries a meaning on this site — Jeddah / head
   office on the maps and legends, the current step on the tracker, and focus
   outlines. Crossworld Red throughout. The division reads as distinct through
   its own lockup, header and navigation, not through colour.
   ========================================================================== */

/* This REPLACES the group .site-header on division pages rather than stacking
   beneath it. Two reasons: two bars was ~141px of chrome and read as a site
   inside a site; and .site-header is transparent until .is-scrolled (its
   frosted fill lives on a ::before), so any gap below it exposed the white
   page background as a white band. One opaque bar, sticky at top:0 — with no
   fixed element above it, none of the header-offset arithmetic applies. */
.division-header{
  position:sticky;top:0;z-index:1000;
  background:var(--navy-950);
  border-bottom:1px solid var(--glass-border-soft);
}
.division-header > .container{
  display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding-block:13px;
}
/* The official "horizontal" division lockup, -white colourway: red gradient
   mark, white name, and the "A division of / Crossworld Freighters LLC"
   endorsement built into the artwork. Because the endorsement is inside the
   SVG, the rule that a division name never appears without it is satisfied
   structurally — there is no separate strapline to forget or hide.
   Height is load-bearing: the endorsement is set at 15.5 of 128 viewBox
   units, so it renders at height x 0.12. Below about 64px it stops being
   readable. Do not shrink this to save header space. */
.division-id{display:flex;align-items:center;min-width:0;}
.division-id .division-lockup{height:84px;width:auto;flex-shrink:0;display:block;}
.division-right{display:flex;align-items:center;gap:14px;min-width:0;}
.division-nav{display:flex;gap:3px;}
.division-nav a{
  padding:8px 14px;border-radius:100px;font-size:.86rem;font-weight:600;
  white-space:nowrap;
  color:var(--ink-300);transition:color .25s var(--ease),background .25s var(--ease);
}
.division-nav a:hover{color:var(--ink-100);background:var(--glass-fill);}
.division-nav a[aria-current="page"]{
  color:#FFFFFF;background:var(--brand-red);
}
/* Quiet route back to the group site. */
.division-up{
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding-left:15px;border-left:1px solid var(--glass-border-soft);
  font-size:.79rem;color:var(--ink-300);
  transition:color .25s var(--ease);
}
.division-up:hover{color:var(--ink-100);}
.division-up svg{width:13px;height:13px;flex-shrink:0;}

@media (max-width:1100px){
  /* 74px keeps the endorsement line at ~9px. Any smaller and it stops being
     readable, which is the floor for using this layout at all. */
  .division-id .division-lockup{height:74px;}
  .division-nav a{padding:8px 11px;font-size:.82rem;}
}
@media (max-width:900px){
  /* Two rows: lockup, then nav. The full lockup cannot shrink below ~64px and
     stay readable, so the bar stops being sticky here rather than holding
     ~140px at the top of a phone screen for the whole page. */
  .division-header{position:static;}
  .division-header > .container{flex-direction:column;align-items:stretch;gap:12px;padding-block:14px;}
  /* Nav and the route back share one row: the nav scrolls rather than wrapping,
     and .division-up is nowrap so it survives the squeeze. */
  .division-nav{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .division-nav::-webkit-scrollbar{display:none;}
}
@media (max-width:560px){
  .division-up{padding-left:11px;}
}

/* No .division-scope accent overrides. The eyebrow, breadcrumb, check-list
   and card hovers all inherit Crossworld Red from the base rules, which is
   the point — see the note at the top of this section. */

.trade-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:22px;margin-top:8px;
}
.trade-card{
  display:flex;flex-direction:column;
  padding:26px 26px 28px;border-radius:var(--radius-md);
  /* clips the bleeding .trade-figure to the card's rounded corners */
  overflow:hidden;
  background:var(--paper);border:1px solid var(--rule);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.trade-card:hover{
  transform:translateY(-5px);box-shadow:var(--shadow-md);
  border-color:rgba(206,27,34,.35);
}
.trade-card .trade-no{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  color:var(--brand-ink);
}

/* --- Specification tables (Crossworld Trading) --------------------------
   A products division needs to show numbers, not just prose. Wrapped in
   .spec-wrap so a wide table scrolls inside its own box rather than making
   the page scroll sideways. */
.spec-wrap{
  margin-top:24px;overflow-x:auto;
  border:1px solid var(--rule);border-radius:var(--radius-md);
  background:var(--paper);
}
.spec-table{width:100%;border-collapse:collapse;min-width:520px;}
.spec-table caption{
  text-align:left;padding:18px 22px 0;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-ink);
}
.spec-table th,.spec-table td{
  padding:14px 22px;text-align:left;font-size:.9rem;
  border-bottom:1px solid var(--rule);vertical-align:top;
}
.spec-table thead th{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-500);font-weight:500;
}
.spec-table tbody th{
  font-weight:600;color:var(--navy-950);width:34%;white-space:nowrap;
}
.spec-table tbody td{color:var(--ink-700);}
.spec-table tbody tr:last-child th,.spec-table tbody tr:last-child td{border-bottom:none;}
/* Standards referenced in a spec cell — set in mono so they read as codes. */
.spec-table code{
  font-family:var(--font-mono);font-size:.82em;color:var(--navy-950);
  background:var(--paper-dim);padding:1px 5px;border-radius:4px;
  white-space:nowrap;
}

/* --- Calculators (Crossworld Consultancy) -------------------------------
   Pure client-side. Nothing entered here is transmitted or stored, which is
   both a privacy property worth stating on the page and the reason these
   need no backend. */
.calc{
  background:var(--paper);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:clamp(24px,3vw,34px);
}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3vw,36px);align-items:start;}
@media (max-width:820px){.calc-grid{grid-template-columns:1fr;}}

.calc-field{display:block;margin-bottom:16px;}
.calc-field > span{
  display:block;font-size:.82rem;font-weight:600;color:var(--navy-950);margin-bottom:6px;
}
.calc-field > small{display:block;font-size:.75rem;color:var(--ink-500);margin-top:5px;line-height:1.45;}
.calc-field input,.calc-field select{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid var(--rule);background:var(--paper-dim);
  font-family:var(--font-body);font-size:1rem;color:var(--navy-950);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.calc-field input:focus,.calc-field select:focus{
  outline:none;border-color:var(--brand-red);background:var(--paper);
}
.calc-inline{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* Results panel. Charcoal so the numbers read as an answer, not another input. */
.calc-out{
  background:var(--navy-950);border-radius:var(--radius-md);
  padding:22px 24px;color:var(--ink-300);
}
.calc-out dl{margin:0;display:grid;gap:2px;}
.calc-out .row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.calc-out .row:last-child{border-bottom:none;}
.calc-out dt{font-size:.86rem;}
.calc-out dd{
  margin:0;font-family:var(--font-mono);font-size:.92rem;color:var(--ink-100);
  white-space:nowrap;
}
.calc-out .row.is-total{margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.22);border-bottom:none;}
.calc-out .row.is-total dt{font-weight:600;color:var(--ink-100);font-size:.92rem;}
.calc-out .row.is-total dd{font-size:1.22rem;color:#FF8A8E;}
.calc-out .calc-note{
  margin-top:14px;font-size:.76rem;color:var(--ink-300);line-height:1.55;
}
/* Threshold / status verdict line */
.calc-verdict{
  margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);
  font-size:.86rem;line-height:1.5;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--ink-100);
}

.calc-rates{
  margin-top:34px;padding:16px 20px;border-radius:var(--radius-sm);
  background:var(--paper-dim);border:1px solid var(--rule);
  font-size:.78rem;color:var(--ink-500);line-height:1.6;
}
.calc-rates strong{color:var(--navy-950);}

/* Standards pills, for listing test protocols under a product card. */
.std-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;}
.std-row span{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.04em;
  padding:5px 10px;border-radius:100px;
  background:var(--paper-dim);color:var(--navy-800);border:1px solid var(--rule);
}

/* Illustrative-photography disclosure under a trade grid. Kept quiet but
   present: the photos are licensed third-party images of the trades, not
   Crossworld's own completed projects, and this is the line that says so. */
.photo-note{
  margin-top:28px;font-size:.78rem;color:var(--ink-500);max-width:74ch;
}

/* --- Optional photo on a trade card ------------------------------------
   The figure bleeds out of the card's own padding with negative margins
   rather than the card dropping its padding and everything moving into a
   wrapper. That way a card with no photo is completely unaffected — which
   matters, because photos arrive a few at a time. */
.trade-figure{
  position:relative;
  margin:-26px -26px 22px;           /* cancels .trade-card's 26px padding */
  aspect-ratio:4/3;
  background:var(--paper-dim);        /* holds the space while loading */
  overflow:hidden;
}
.trade-figure img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--ease);
}
.trade-card:hover .trade-figure img{transform:scale(1.045);}
/* Scrim so the number chip stays legible over a light photo. */
.trade-figure::after{
  content:'';position:absolute;inset:auto 0 0 0;height:55%;
  background:linear-gradient(to top,rgba(22,24,27,.75),rgba(22,24,27,0));
  pointer-events:none;
}
/* On a photo the number sits over the image, in white, instead of above the
   heading. Both positions share the base .trade-no type styling. */
.trade-figure .trade-no{
  position:absolute;left:18px;bottom:12px;z-index:1;
  color:#FFFFFF;
}
@media (prefers-reduced-motion:reduce){
  .trade-card:hover .trade-figure img{transform:none;}
}
.trade-card h3{margin-top:12px;font-size:1.06rem;line-height:1.3;}
.trade-card p{margin-top:10px;font-size:.9rem;color:var(--ink-700);}
.trade-card .trade-meta{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-500);
}

/* Division landing: the three service groups */
.group-card{
  display:flex;flex-direction:column;
  padding:30px;border-radius:var(--radius-lg);
  background:var(--paper);border:1px solid var(--rule);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.group-card:hover{
  transform:translateY(-6px);box-shadow:var(--shadow-lg);
  border-color:rgba(206,27,34,.35);
}
.group-card .group-icon{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:rgba(206,27,34,.10);margin-bottom:20px;
}
.group-card .group-icon svg{width:26px;height:26px;color:var(--brand-ink);}
.group-card h3{font-size:1.2rem;}
.group-card p{margin-top:10px;font-size:.93rem;color:var(--ink-700);}
.group-card ul{margin-top:16px;padding:0;list-style:none;}
.group-card ul li{
  font-size:.86rem;color:var(--ink-700);padding:6px 0;
  border-bottom:1px dashed var(--rule);
}
.group-card ul li:last-child{border-bottom:none;}
.group-card .btn{margin-top:22px;align-self:flex-start;}

/* The hero's usual +60px allowance for the fixed group header does not apply
   here: the division header is sticky and therefore still in normal flow. */
.division-scope .page-hero{padding-top:clamp(52px,6vw,80px);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* reveal-on-scroll must not leave content invisible */
  [data-reveal]{opacity:1 !important;transform:none !important;}
  [data-tilt]{transform:none !important;}
  /* SMIL animations inside SVG are not CSS animations, so the rule above does
     not reach them. Hiding the animation elements stops them running, which
     leaves the artwork in its first frame. */
  animate,animateMotion,animateTransform{display:none !important;}
}