/* ============================================================
   SRP Shipping (Pty) Ltd — shared stylesheet
   Design language: "transit manifest"
   - Deep blue hull base, red hi-vis accent, yellow signal highlight
   - Space Grotesk (display) / Inter (body) / IBM Plex Mono (data)
   ============================================================ */

:root{
  --hull:        #0B2D6B;   /* deep blue */
  --hull-2:      #123C8F;   /* blue panel */
  --steel:       #2C5FBE;   /* lighter blue */
  --paper:       #EDF1F6;   /* cool light bg */
  --paper-2:     #FFFFFF;
  --ink:         #0B2350;   /* dark blue text on light */
  --ink-soft:    #4A5C82;   /* muted slate-blue text */
  --line:        #D6DFE9;   /* hairline on light */
  --line-dark:   rgba(255,255,255,.10);
  --hivis:       #E4292F;   /* red accent */
  --hivis-2:     #FF5A5F;
  --signal:      #FFD100;   /* yellow, used sparingly */
  --cloud:       #A9BBE0;   /* muted text on dark */

  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;

  --shadow: 0 18px 50px -24px rgba(10,27,48,.45);

  --ff-display: "Space Grotesk", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(56px,9vw,116px); }
.section--tight{ padding-block:clamp(40px,6vw,72px); }

/* ---------- type ---------- */
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:700; line-height:1.05; margin:0; letter-spacing:-.015em; }
.eyebrow{
  font-family:var(--ff-mono);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--hivis);
  margin:0 0 18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }
.eyebrow--center{ justify-content:center; }
.lead{ font-size:clamp(1.05rem,2vw,1.22rem); color:var(--ink-soft); max-width:60ch; }
.mono{ font-family:var(--ff-mono); }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--hivis); --fg:#fff;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--bg); color:var(--fg);
  font-family:var(--ff-mono); font-size:.82rem; letter-spacing:.04em;
  padding:13px 22px; border-radius:var(--r-sm);
  border:1px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  font-weight:500;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -12px rgba(228,41,47,.7); }
.btn:active{ transform:translateY(0); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ box-shadow:none; border-color:var(--ink); background:rgba(10,27,48,.03); }
.btn--ghost-dark{ background:transparent; color:#fff; border-color:var(--line-dark); }
.btn--ghost-dark:hover{ box-shadow:none; border-color:rgba(255,255,255,.55); }
.btn .arr{ transition:transform .18s ease; }
.btn:hover .arr{ transform:translateX(3px); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(10,27,48,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.brand{ display:flex; align-items:center; gap:12px; color:#fff; }
.brand .mark{ width:34px; height:34px; flex:0 0 auto; }
.brand b{ font-family:var(--ff-display); font-weight:700; font-size:1.06rem; letter-spacing:-.01em; }
.brand small{ display:block; font-family:var(--ff-mono); font-size:.58rem; letter-spacing:.2em; color:var(--cloud); text-transform:uppercase; }
/* logo image on a clean white plate so a non-transparent JPG sits well on navy */
.brand--img{ background:#fff; padding:7px 13px; border-radius:9px; line-height:0; transition:transform .18s ease, box-shadow .18s ease; }
.brand--img:hover{ transform:translateY(-1px); box-shadow:0 8px 20px -10px rgba(0,0,0,.5); }
.brand-logo{ height:36px; width:auto; display:block; }
.foot-logo{ height:42px; width:auto; background:#fff; padding:8px 14px; border-radius:9px; display:inline-block; margin-bottom:14px; }
@media (max-width:420px){ .brand-logo{ height:30px; } .brand--img{ padding:6px 10px; } }
.nav-links{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.nav-links a{
  color:var(--cloud); font-size:.9rem; padding:9px 14px; border-radius:var(--r-sm);
  transition:color .15s, background .15s;
}
.nav-links a:hover{ color:#fff; background:rgba(255,255,255,.06); }
.nav-links a[aria-current="page"]{ color:#fff; }
.nav-links a[aria-current="page"]::after{
  content:""; display:block; height:2px; background:var(--hivis); margin-top:5px; border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:14px; }
.nav-tel{ color:var(--cloud); font-family:var(--ff-mono); font-size:.82rem; }
.nav-tel:hover{ color:#fff; }
.nav-toggle{ display:none; background:none; border:0; padding:8px; }
.nav-toggle span{ display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:.25s; }
/* phone + CTA that only appear inside the mobile dropdown menu */
.nav-mobile-only{ display:none; }

/* ============================================================
   HERO
   ============================================================ */
.hero{ background:var(--hull); color:#fff; position:relative; overflow:hidden; }
.hero::before{ /* faint dotted manifest grid */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px; pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,64px);
  align-items:center; padding-block:clamp(54px,8vw,96px); position:relative;
}
.hero h1{ font-size:clamp(2.3rem,5.4vw,3.9rem); margin:0 0 22px; }
.hero h1 em{ font-style:normal; color:var(--hivis); }
.hero .lead{ color:var(--cloud); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.hero-stats{
  display:flex; gap:34px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line-dark);
  flex-wrap:wrap;
}
.hero-stats .stat b{ font-family:var(--ff-display); font-size:1.7rem; display:block; }
.hero-stats .stat span{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cloud); }

/* ---------- route map (signature) ---------- */
.routemap{ position:relative; }
.routemap svg{ width:100%; height:auto; overflow:visible; }
.routemap .route-line{
  fill:none; stroke:var(--signal); stroke-width:1.6; opacity:.55;
  stroke-dasharray:5 7; animation:dash 2.4s linear infinite;
}
.routemap .route-line.is-prime{ stroke:var(--hivis); opacity:.95; stroke-width:2.2; }
.routemap .node circle{ fill:var(--hull-2); stroke:var(--signal); stroke-width:1.6; }
.routemap .node.is-hub circle{ fill:var(--hivis); stroke:var(--hivis-2); }
.routemap .node.is-prime circle{ stroke:var(--hivis); }
.routemap .node text.code{ font-family:var(--ff-mono); font-size:12px; fill:#fff; font-weight:500; }
.routemap .node text.place{ font-family:var(--ff-mono); font-size:9.5px; fill:var(--cloud); letter-spacing:.06em; }
.routemap .pulse{ fill:var(--hivis); opacity:.5; animation:pulse 2.2s ease-out infinite; }
@keyframes dash{ to{ stroke-dashoffset:-48; } }
@keyframes pulse{ 0%{ r:7; opacity:.55; } 100%{ r:20; opacity:0; } }

/* ============================================================
   MODE BAND  (Air / Sea / Road / Rail / Warehousing)
   ============================================================ */
.modes{ background:var(--hull-2); color:#fff; border-block:1px solid var(--line-dark); }
.modes-grid{ display:grid; grid-template-columns:repeat(5,1fr); }
.mode{
  padding:30px clamp(14px,2vw,26px); border-left:1px solid var(--line-dark);
  display:flex; flex-direction:column; gap:12px; transition:background .2s;
}
.mode:first-child{ border-left:0; }
.mode:hover{ background:rgba(255,255,255,.03); }
.mode svg{ width:30px; height:30px; stroke:var(--hivis); }
.mode b{ font-family:var(--ff-display); font-size:1.05rem; }
.mode span{ font-size:.83rem; color:var(--cloud); }
.mode i{ font-family:var(--ff-mono); font-style:normal; font-size:.62rem; letter-spacing:.16em; color:var(--hivis); text-transform:uppercase; }

/* ============================================================
   GENERIC LIGHT SECTIONS
   ============================================================ */
.sec-head{ max-width:62ch; margin-bottom:clamp(32px,5vw,56px); }
.sec-head h2{ font-size:clamp(1.8rem,3.6vw,2.7rem); margin-bottom:18px; }
.sec-head.is-center{ margin-inline:auto; text-align:center; }

/* service cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.card{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r);
  padding:28px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative; overflow:hidden;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:#c2cedb; }
.card .tag{
  font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--hivis); display:block; margin-bottom:14px;
}
.card h3{ font-size:1.22rem; margin-bottom:10px; }
.card p{ margin:0; color:var(--ink-soft); font-size:.95rem; }
.card ul{ margin:14px 0 0; padding:0; list-style:none; }
.card ul li{ position:relative; padding-left:20px; font-size:.92rem; color:var(--ink-soft); margin-bottom:7px; }
.card ul li::before{ content:"→"; position:absolute; left:0; color:var(--hivis); font-family:var(--ff-mono); }
.card .ico{ width:42px; height:42px; border-radius:10px; background:rgba(228,41,47,.12);
  display:grid; place-items:center; margin-bottom:18px; }
.card .ico svg{ width:22px; height:22px; stroke:var(--hivis); }

/* split / feature block */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; }
.panel-dark{ background:var(--hull); color:#fff; border-radius:var(--r-lg); padding:clamp(28px,4vw,48px); }
.panel-dark .lead{ color:var(--cloud); }

/* checklist */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.checks li{ position:relative; padding-left:34px; }
.checks li::before{
  content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%;
  background:var(--hivis); -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center/14px no-repeat;
}
.checks.on-dark li{ color:#e8eef5; }

/* destination chips */
.dests{ display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.chip{
  font-family:var(--ff-mono); font-size:.8rem; letter-spacing:.04em;
  border:1px solid var(--line-dark); color:#fff; padding:8px 14px; border-radius:100px;
  display:inline-flex; align-items:center; gap:9px;
}
.chip .code{ color:var(--hivis); }
.chip.is-prime{ background:var(--hivis); color:#fff; border-color:var(--hivis); }
.chip.is-prime .code{ color:#fff; }

/* stat strip */
.strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.strip .cell{ background:var(--paper-2); padding:26px 22px; }
.strip .cell b{ font-family:var(--ff-display); font-size:2rem; color:var(--ink); display:block; }
.strip .cell span{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }

/* ============================================================
   PAGE BANNER (interior pages)
   ============================================================ */
.banner{ background:var(--hull); color:#fff; position:relative; overflow:hidden; }
.banner::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:26px 26px;
}
.banner-inner{ position:relative; padding-block:clamp(54px,8vw,90px); }
.banner h1{ font-size:clamp(2.1rem,4.6vw,3.2rem); margin-bottom:16px; max-width:18ch; }
.banner .lead{ color:var(--cloud); }
.crumbs{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; color:var(--cloud); margin-bottom:22px; text-transform:uppercase; }
.crumbs a:hover{ color:#fff; }
.crumbs span{ color:var(--hivis); }

/* ============================================================
   TEAM
   ============================================================ */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; }
.person{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:26px;
  transition:transform .2s, box-shadow .2s;
}
.person:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.person .avatar{
  width:62px; height:62px; border-radius:14px; display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:700; font-size:1.3rem; color:#fff;
  background:linear-gradient(135deg,var(--steel),var(--hull)); margin-bottom:18px;
}
.person .role{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hivis); }
.person h3{ font-size:1.16rem; margin:6px 0 10px; }
.person p{ margin:0; font-size:.92rem; color:var(--ink-soft); }

/* ============================================================
   CREDENTIALS
   ============================================================ */
.cred-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.cred{
  border:1px solid var(--line); border-radius:var(--r); padding:26px; background:var(--paper-2);
  display:flex; flex-direction:column; gap:12px;
}
.cred .badge{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:var(--hull); color:var(--hivis); flex:0 0 auto;
}
.cred .badge svg{ width:22px; height:22px; stroke:currentColor; }
.cred h3{ font-size:1.1rem; }
.cred p{ margin:0; color:var(--ink-soft); font-size:.92rem; }
.cred .ref{ font-family:var(--ff-mono); font-size:.72rem; color:var(--ink-soft); margin-top:auto; padding-top:8px; border-top:1px dashed var(--line); }
.cred .ref b{ color:var(--ink); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,56px); align-items:start; }
.offices{ display:grid; gap:16px; }
.office{ border:1px solid var(--line); border-radius:var(--r); padding:22px; background:var(--paper-2); }
.office .role{ font-family:var(--ff-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hivis); }
.office h3{ font-size:1.12rem; margin:6px 0 10px; }
.office p{ margin:0 0 4px; color:var(--ink-soft); font-size:.92rem; }
.office a{ color:var(--ink); border-bottom:1px solid var(--line); }
.office a:hover{ border-color:var(--hivis); color:var(--hivis); }

.form{ background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(24px,3vw,34px); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; }
.field input,.field select,.field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--ff-body); font-size:.95rem; background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--hivis); box-shadow:0 0 0 3px rgba(228,41,47,.16);
}
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:14px; }
.form-ok{
  display:none; margin-top:18px; padding:14px 16px; border-radius:var(--r-sm);
  background:rgba(228,41,47,.1); border:1px solid var(--hivis); color:var(--ink); font-size:.9rem;
}
.form-ok.show{ display:block; }

/* ============================================================
   CTA + FOOTER
   ============================================================ */
.cta-band{ background:linear-gradient(120deg,var(--hull),var(--steel)); color:#fff; position:relative; overflow:hidden; }
.cta-band::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:26px 26px;
}
.cta-inner{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.cta-inner h2{ font-size:clamp(1.7rem,3.4vw,2.5rem); max-width:18ch; }
.cta-inner p{ color:var(--cloud); margin:.6em 0 0; }

.site-foot{ background:var(--hull); color:var(--cloud); padding-block:clamp(44px,6vw,64px) 30px; border-top:1px solid var(--line-dark); }
.foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:34px; }
.foot-grid h4{ font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--hivis); margin-bottom:16px; font-weight:500; }
.foot-grid a{ color:var(--cloud); display:block; padding:5px 0; font-size:.92rem; }
.foot-grid a:hover{ color:#fff; }
.foot-grid p{ margin:0 0 6px; font-size:.9rem; }
.foot-brand b{ color:#fff; font-family:var(--ff-display); font-size:1.2rem; }
.foot-bottom{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--line-dark);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.04em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:920px){
  .hero-grid{ grid-template-columns:1fr; }
  .routemap{ order:-1; max-width:520px; }
  .modes-grid{ grid-template-columns:repeat(2,1fr); }
  .mode:nth-child(odd){ border-left:0; }
  .split,.contact-grid{ grid-template-columns:1fr; }
  .strip{ grid-template-columns:repeat(2,1fr); }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nav-links,.nav-tel{ display:none; }
  .nav-cta{ display:none; }                 /* keep the top bar to logo + menu button only */
  .nav-toggle{ display:block; }
  .site-head.open .nav-links{
    display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:0;
    background:var(--hull-2); border-bottom:1px solid var(--line-dark); padding:10px var(--gutter) 18px;
    max-height:calc(100dvh - 70px); overflow-y:auto;
  }
  .site-head.open .nav-links a{ padding:13px 6px; width:100%; }
  /* phone + quote button, revealed inside the open menu */
  .site-head.open .nav-mobile-only{ display:block; }
  .nav-m-tel{ margin-top:10px; padding-top:6px; border-top:1px solid var(--line-dark); }
  .nav-m-tel a{ color:var(--hivis) !important; font-family:var(--ff-mono); font-size:.92rem; }
  .nav-m-cta{ margin-top:8px; }
  .nav-m-cta a{ width:100%; justify-content:center; padding:14px 18px !important; }
  .field-row{ grid-template-columns:1fr; }
  .cta-inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:480px){
  .modes-grid{ grid-template-columns:1fr; }
  .mode{ border-left:0; border-top:1px solid var(--line-dark); }
  .mode:first-child{ border-top:0; }
  .strip,.foot-grid{ grid-template-columns:1fr; }
}

/* accessibility */
:focus-visible{ outline:2px solid var(--hivis); outline-offset:3px; border-radius:4px; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto; }
}