/* ==========================================================================
   KingShip Logistics — public site
   The same navy and gold as the hiring tracker, the orientation pages and
   every email the system sends, so somebody who applies here and then gets
   an email from us is plainly looking at the same company.
   ========================================================================== */

:root{
  --navy:#13294B; --deep:#0C1B33; --gold:#C8A02C; --goldl:#F3E9CE;
  --ink:#22262E; --mute:#5C6472; --light:#F4F6FA; --line:#D8DEE8;
  --red:#9B2226; --green:#2C5F2D; --paper:#FBFCFE;
  --sidebar:272px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Segoe UI",Calibri,system-ui,-apple-system,sans-serif;
  line-height:1.65;font-size:16.5px;
}
img{max-width:100%;display:block}
a{color:var(--navy)}

/* ---------- the sidebar the owner wanted kept ---------- */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:var(--deep);
  color:#fff;display:flex;flex-direction:column;z-index:60;
  box-shadow:2px 0 18px rgba(12,27,51,.16);
}
.sidebar .brand{padding:26px 24px 18px;text-align:center;border-bottom:1px solid rgba(255,255,255,.09)}
.sidebar .brand img{width:132px;margin:0 auto 12px}
.sidebar .brand .tag{
  font-size:10.5px;letter-spacing:2.4px;color:var(--gold);font-weight:700;text-transform:uppercase;
}
.sidebar nav{padding:18px 14px;flex:1;overflow-y:auto}
.sidebar nav a{
  display:block;padding:11px 16px;border-radius:9px;color:#C5D0E2;text-decoration:none;
  font-size:15px;font-weight:600;margin-bottom:3px;transition:background .15s,color .15s;
}
.sidebar nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.sidebar nav a[aria-current="page"]{background:var(--gold);color:var(--deep)}
.sidebar .side-cta{padding:16px 20px 12px;border-top:1px solid rgba(255,255,255,.09)}
.sidebar .side-cta a{
  display:block;text-align:center;background:var(--gold);color:var(--deep);
  text-decoration:none;font-weight:700;padding:13px 14px;border-radius:9px;font-size:15px;
}
.sidebar .side-cta a:hover{background:#D9B449}
.sidebar .side-foot{padding:0 20px 22px;font-size:12.5px;color:#8B98AC;line-height:1.6}
.sidebar .side-foot a{color:#C5D0E2}

/* the hamburger, phones only */
.menubtn{
  display:none;position:fixed;top:14px;left:14px;z-index:70;
  background:var(--deep);color:var(--gold);border:0;border-radius:9px;
  width:46px;height:46px;font-size:21px;cursor:pointer;box-shadow:0 4px 14px rgba(12,27,51,.28);
}
.veil{display:none;position:fixed;inset:0;background:rgba(12,27,51,.5);z-index:55}

/* ---------- page canvas ---------- */
.page{margin-left:var(--sidebar);min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:820px;margin:0 auto;padding:0 28px}
main{flex:1;padding:0 0 10px}

/* ---------- hero ---------- */
.hero{background:var(--deep);color:#fff;padding:78px 0 70px;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;right:-90px;top:-70px;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,160,44,.17),transparent 68%);
}
.hero .kicker{
  font-size:11.5px;letter-spacing:2.8px;color:var(--gold);font-weight:700;
  text-transform:uppercase;margin:0 0 14px;
}
.hero h1{
  font-family:Cambria,Georgia,serif;font-size:44px;line-height:1.15;margin:0 0 18px;font-weight:600;
}
.hero p{font-size:18.5px;color:#C5D0E2;margin:0 0 26px;max-width:600px}
.hero .motto{
  display:inline-block;margin-top:6px;font-size:12px;letter-spacing:3px;color:var(--gold);
  font-weight:700;text-transform:uppercase;
}

/* ---------- sections ---------- */
section{padding:60px 0}
section + section{border-top:1px solid var(--line)}
section.tint{background:var(--light)}
section.deep{background:var(--deep);color:#fff}
section.deep p{color:#C5D0E2}
h2{
  font-family:Cambria,Georgia,serif;font-size:31px;line-height:1.25;color:var(--navy);
  margin:0 0 8px;font-weight:600;
}
section.deep h2{color:#fff}
h3{font-size:17.5px;color:var(--navy);margin:0 0 7px}
section.deep h3{color:var(--gold)}
.eyebrow{
  font-size:11.5px;letter-spacing:2.6px;color:var(--gold);font-weight:700;
  text-transform:uppercase;margin:0 0 12px;
}
p{margin:0 0 16px}
.lede{font-size:18.5px;color:var(--mute);margin-bottom:26px}
section.deep .lede{color:#9FB0C8}

/* a line the company actually says out loud */
.saying{
  font-family:Cambria,Georgia,serif;font-size:25px;line-height:1.4;color:var(--navy);
  border-left:4px solid var(--gold);padding:4px 0 4px 22px;margin:30px 0;font-style:italic;
}
section.deep .saying{color:#fff;border-left-color:var(--gold)}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:16px;margin-top:26px}
.card{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 22px 20px;
}
section.tint .card{background:#fff}
section.deep .card{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.13)}
.card p{margin:0;font-size:15.5px;color:var(--mute)}
section.deep .card p{color:#B8C6DA}

/* the five core values */
.value{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)}
.value:last-child{border-bottom:0}
section.deep .value{border-bottom-color:rgba(255,255,255,.12)}
.value .mark{
  flex:none;width:48px;height:48px;border-radius:50%;border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;color:var(--gold);
}
.value .mark svg{width:24px;height:24px}
.value h3{margin:0 0 5px;font-size:16px;letter-spacing:.4px;text-transform:uppercase;color:var(--gold)}
.value p{margin:0;font-size:15.5px;color:var(--mute)}
section.deep .value p{color:#B8C6DA}

/* plain list with gold ticks */
.ticks{list-style:none;margin:0 0 18px;padding:0}
.ticks li{position:relative;padding:7px 0 7px 30px;font-size:16px}
.ticks li::before{
  content:"\2713";position:absolute;left:0;top:7px;color:var(--gold);font-weight:700;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--gold);color:var(--deep);text-decoration:none;
  font-weight:700;font-size:16px;padding:15px 30px;border-radius:9px;border:2px solid var(--gold);
}
.btn:hover{background:#D9B449;border-color:#D9B449}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.ghost:hover{background:rgba(200,160,44,.13)}
.btn.navy{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.navy:hover{background:#1B3868;border-color:#1B3868}
.btnrow{display:flex;gap:13px;flex-wrap:wrap;align-items:center;margin-top:8px}

/* the three steps of applying */
.steps{counter-reset:s;margin:28px 0 8px;padding:0;list-style:none}
.steps li{
  counter-increment:s;position:relative;padding:0 0 26px 62px;
}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-2px;width:42px;height:42px;border-radius:50%;
  background:var(--gold);color:var(--deep);font-weight:700;font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.steps li::after{
  content:"";position:absolute;left:21px;top:44px;bottom:2px;width:2px;background:var(--line);
}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{margin:8px 0 5px}
.steps p{margin:0;color:var(--mute);font-size:15.5px}

/* ---------- contact ---------- */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:22px;margin-top:22px}
.contact h3{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.contact p{margin:0 0 4px;font-size:15.5px}
.contact a{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--line)}
section.deep .contact a{color:#fff;border-bottom-color:rgba(255,255,255,.3)}

/* ---------- footer ---------- */
footer{background:var(--deep);color:#8B98AC;padding:30px 0;font-size:13.5px}
footer .wrap{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
footer b{color:var(--gold);font-weight:700;letter-spacing:1.5px;font-size:12px;text-transform:uppercase}

/* ---------- phones ---------- */
@media (max-width:900px){
  body{font-size:16px}
  .menubtn{display:block}
  .sidebar{transform:translateX(-100%);transition:transform .22s ease}
  body.navopen .sidebar{transform:translateX(0)}
  body.navopen .veil{display:block}
  .page{margin-left:0}
  .wrap{padding:0 20px}
  main > section:first-child, .hero{padding-top:74px}
  .hero h1{font-size:33px}
  .hero p{font-size:17px}
  h2{font-size:26px}
  .saying{font-size:21px;padding-left:17px}
  section{padding:46px 0}
}