/* ==================================================================
   Kansas City Shipping Containers — freight-industrial identity
   Palette: coal black / safety yellow / warm paper / rail rust
   Type: slab-serif display over humanist body
   Motif: intermodal caution stripe, hard freight-label shadows
   ================================================================== */
:root{
  --coal:#161616; --coal-2:#242424; --steel:#3a3d40;
  --paper:#f7f4ec; --card:#fffdf7; --ink:#1c1b18; --muted:#6b675e;
  --yellow:#f2b705; --yellow-dk:#cf9a00; --rust:#a63c1e; --rust-dk:#7f2d15;
  --line:#dcd5c4; --ok:#2e6b34;
  --maxw:1180px;
  --slab:Rockwell,"Rockwell Nova","Roboto Slab","Courier New",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; color:var(--ink); background:var(--paper);
  font:16.5px/1.7 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif}
h1,h2,h3{font-family:var(--slab); line-height:1.15; color:var(--ink); margin:0 0 .5em; font-weight:700}
h1{font-size:2.35rem; letter-spacing:-.5px; text-transform:uppercase}
h2{font-size:1.45rem; text-transform:uppercase; letter-spacing:.3px;
  padding-left:14px; border-left:6px solid var(--yellow)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
a{color:var(--rust)}
a:hover{color:var(--rust-dk)}
img{max-width:100%; height:auto; display:block}
ul{margin:0 0 1em; padding-left:1.2em}
li{margin-bottom:.45em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* caution-stripe motif */
.stripe, header::after{content:""; display:block; height:8px;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 16px,var(--coal) 16px 32px)}

/* ---------- Buttons: freight-label style ---------- */
.btn{display:inline-block; background:var(--yellow); color:var(--coal); text-decoration:none;
  font-family:var(--slab); font-weight:700; text-transform:uppercase; letter-spacing:.6px;
  padding:14px 26px; border:2px solid var(--coal); border-radius:3px; cursor:pointer;
  font-size:.98rem; line-height:1.25; text-align:center;
  box-shadow:4px 4px 0 var(--coal); transition:transform .08s, box-shadow .08s, background .12s}
.btn:hover{background:#ffc61a; transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--coal)}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--coal)}
.btn-lg{padding:16px 30px; font-size:1.04rem}
.btn-ghost{background:transparent; color:var(--coal); box-shadow:4px 4px 0 rgba(22,22,22,.25)}
.hero-band .btn-ghost{color:#fff; border-color:#fff; box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.hero-band .btn-ghost:hover{background:rgba(255,255,255,.12); transform:translate(-1px,-1px)}
.cta-row{display:flex; flex-wrap:wrap; gap:16px; margin:22px 0}
.cta-row .btn{flex:1 1 240px; max-width:360px}

/* ---------- Header: coal deck ---------- */
header{position:sticky; top:0; z-index:50; background:var(--coal); color:#fff}
.bar{display:flex; align-items:center; justify-content:space-between; gap:16px;
  max-width:var(--maxw); margin:0 auto; padding:12px 20px}
.phone-lg{font-family:var(--slab); font-weight:700; color:var(--yellow); text-decoration:none;
  white-space:nowrap; font-size:1.5rem; letter-spacing:.5px; display:flex; align-items:center;
  gap:9px; line-height:1.05; min-height:44px; padding:5px 0}
.phone-lg small{display:block; font-size:.56rem; font-weight:600; letter-spacing:2px;
  text-transform:uppercase; color:#bdb7a8; margin-top:3px; font-family:inherit}
.phone-lg:hover{color:#ffc61a}
nav.main{display:flex; align-items:center; gap:19px}
nav.main a{color:#e8e4d8; text-decoration:none; font-weight:600; font-size:.95rem}
nav.main a:hover,nav.main a.active{color:var(--yellow)}
.has-drop{position:relative}
.has-drop::after{content:""; position:absolute; top:100%; left:0; width:100%; height:10px}
.drop{position:absolute; top:calc(100% + 8px); left:0; background:var(--coal-2);
  border:1px solid #3c3c3c; border-top:3px solid var(--yellow); min-width:250px; padding:6px;
  display:none; box-shadow:0 16px 34px rgba(0,0,0,.45)}
.has-drop:hover .drop,.has-drop:focus-within .drop{display:block}
.drop a{display:block; padding:10px 12px; white-space:nowrap; color:#e8e4d8}
.drop a:hover{background:#000; color:var(--yellow)}
.menu-toggle{display:none; background:none; border:2px solid var(--yellow); border-radius:3px;
  padding:10px 14px; min-height:44px; font-family:var(--slab); font-weight:700; cursor:pointer;
  color:var(--yellow); text-transform:uppercase; letter-spacing:.5px}
.nav-cta{background:var(--yellow); color:var(--coal) !important; padding:10px 16px;
  border-radius:3px; font-family:var(--slab); font-weight:700; text-transform:uppercase;
  letter-spacing:.5px}
.nav-cta:hover{background:#ffc61a}

/* ---------- Page layout ---------- */
.page{display:grid; grid-template-columns:1fr 370px; gap:48px; align-items:start;
  max-width:var(--maxw); margin:0 auto; padding:46px 20px}
.page .main >:first-child{margin-top:0}
.lead{font-size:1.14rem; color:#4c483e}
.section{margin:38px 0}
.crumbs{font-family:var(--slab); font-size:.78rem; text-transform:uppercase; letter-spacing:1px;
  color:var(--muted); margin-bottom:12px}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--rust)}

/* ---------- Hero: coal band ---------- */
.hero-band{background:var(--coal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M0 59h60M59 0v60' stroke='%23222' stroke-width='1'/%3E%3C/svg%3E"); color:#f3efe4;
  border-bottom:8px solid var(--yellow)}
.hero-band h1{color:#fff}
.hero-band h1::after{content:""; display:block; width:90px; height:8px; margin-top:14px;
  background:repeating-linear-gradient(-45deg,var(--yellow) 0 10px,transparent 10px 20px)}
.hero-band .lead{color:#cfc9ba}
.hero-band a{color:var(--yellow)}
.hero-band a.btn{color:var(--coal)}
.hero-band a.btn-ghost{color:#fff; border-color:#fff}

/* ---------- Photos: plated ---------- */
.photo{display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border:2px solid var(--coal);
  border-bottom:8px solid var(--yellow); border-radius:2px; margin:0 0 24px}

/* ---------- Cards: manifest tickets ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin:24px 0}
.card{border:2px solid var(--coal); border-radius:3px; padding:22px; background:var(--card);
  box-shadow:5px 5px 0 rgba(22,22,22,.14)}
.card h3{margin-bottom:.35em}
.card h3 a{color:var(--ink)}
.card p{margin:0; color:var(--muted); font-size:.95rem}
.badge{display:inline-block; background:var(--coal); color:var(--yellow); font-family:var(--slab);
  font-size:.68rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  padding:4px 10px; border-radius:2px; margin-bottom:10px}

/* ---------- Lists ---------- */
.check{list-style:none; padding:0}
.check li{position:relative; padding-left:26px; margin-bottom:10px}
.check li::before{content:"▸"; position:absolute; left:2px; color:var(--rust);
  font-weight:900; font-size:1.05rem}
.areas{list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:9px; columns:auto !important}
.areas li{margin:0; break-inside:auto}
.areas li a, .areas li{font-size:.92rem}
.areas a{display:inline-block; text-decoration:none; color:var(--ink); font-weight:600;
  border:1.5px solid var(--coal); border-radius:2px; background:var(--card); padding:6px 12px;
  box-shadow:2px 2px 0 rgba(22,22,22,.16)}
.areas a:hover{background:var(--yellow); color:var(--coal)}
.areas small{color:var(--muted); font-weight:400}
.trust-row{display:flex; flex-wrap:wrap; gap:10px; margin:22px 0}
.trust-row span{font-weight:600; font-size:.88rem; background:var(--coal-2); color:#e8e4d8;
  border-left:4px solid var(--yellow); padding:8px 14px; border-radius:2px}
.trust-row b{margin-right:4px}
.page > .main > .trust-row span{background:#fff; color:var(--ink); border:1px solid var(--line);
  border-left:4px solid var(--yellow)}

/* ---------- FAQ: manifest entries ---------- */
.faq-item{background:var(--card); border:1.5px solid var(--line); border-left:6px solid var(--coal);
  padding:14px 18px; margin:0 0 14px; border-radius:2px}
.faq-item h3{margin-bottom:.35em; font-size:1.02rem}
.faq-item p{margin:0; color:#4c483e; font-size:.97rem}

/* ---------- Quote box: dispatch card ---------- */
.quote-box{position:sticky; top:92px; border:2px solid var(--coal); border-radius:4px;
  overflow:hidden; background:var(--card); box-shadow:7px 7px 0 rgba(22,22,22,.18)}
.quote-head{background:var(--coal); color:var(--yellow); text-align:center; padding:16px 18px;
  font-family:var(--slab); font-weight:700; font-size:1.3rem; line-height:1.15;
  text-transform:uppercase; letter-spacing:1px}
.quote-head span{display:block; font-size:.66rem; font-weight:600; letter-spacing:2px;
  margin-top:5px; color:#bdb7a8}
form.quote{padding:22px}
form.quote label{display:block; font-family:var(--slab); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:1px; color:var(--ink); margin:0 0 6px}
form.quote input,form.quote textarea{width:100%; padding:12px; border:1.5px solid var(--coal);
  border-radius:2px; font:inherit; color:var(--ink); margin-bottom:14px; background:#fff}
form.quote input:focus,form.quote textarea:focus{outline:3px solid var(--yellow)}
form.quote textarea{resize:vertical; min-height:96px}
form.quote .btn{width:100%}
.form-note{margin:10px 0 0; font-size:.8rem; color:var(--muted); text-align:center}
.form-status{margin:12px 0 0; font-weight:600; font-size:.95rem}
.form-status.ok{color:var(--ok)} .form-status.err{color:var(--rust)}
.hp{position:absolute; left:-9999px}
.req{color:var(--rust)}

/* ---------- Calculator embed ---------- */
.calc-embed{border:2px solid var(--coal); border-radius:3px; overflow:hidden;
  box-shadow:6px 6px 0 rgba(22,22,22,.15); margin:0 0 24px; background:#fff}
.calc-embed iframe{display:block; width:100%; border:0}

/* ---------- Footer: coal deck with stripe ---------- */
footer{background:var(--coal); color:#b9b4a5; margin-top:28px; padding:0 0 26px; font-size:.94rem;
  border-top:8px solid var(--yellow)}
footer .foot{padding-top:44px}
footer a{color:#dcd7c8; text-decoration:none}
footer a:hover{color:var(--yellow)}
.foot{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:26px}
.foot strong{color:var(--yellow); display:block; margin-bottom:9px; font-family:var(--slab);
  text-transform:uppercase; letter-spacing:1px; font-size:.85rem}
.foot-brand strong{font-size:1.05rem}
.foot-brand p{color:#8e897b; max-width:340px; margin:.4em 0 .6em}
.foot-phone{display:inline-block; font-family:var(--slab); font-size:1.35rem; font-weight:700;
  margin:4px 0; color:var(--yellow) !important}
.foot-nav{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.foot-bottom{border-top:1px solid #333; margin-top:30px; padding-top:18px; display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:.8rem; color:#7d7869}

/* ---------- Sticky mobile call bar ---------- */
.mobile-call{position:fixed; left:0; right:0; bottom:0; z-index:60; display:none; text-align:center;
  background:var(--coal); color:var(--yellow); font-family:var(--slab); font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; padding:15px; text-decoration:none;
  border-top:4px solid var(--yellow); box-shadow:0 -2px 14px rgba(0,0,0,.4)}

/* ---------- Responsive ---------- */
@media (max-width:940px){
  .page{grid-template-columns:1fr; gap:32px}
  .quote-box{position:static}
  .menu-toggle{display:inline-block}
  nav.main{display:none; position:absolute; top:100%; left:0; right:0; background:var(--coal-2);
    flex-direction:column; align-items:stretch; gap:0; padding:8px 14px;
    border-bottom:4px solid var(--yellow); box-shadow:0 14px 26px rgba(0,0,0,.5);
    max-height:calc(100vh - 72px); max-height:calc(100dvh - 72px);
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
  nav.main.open{display:flex}
  nav.main a{padding:12px 6px; border-bottom:1px solid #383838}
  .nav-cta{background:none; color:var(--yellow) !important; padding:12px 6px}
  .has-drop .drop{position:static; display:block; box-shadow:none; border:0; min-width:0;
    padding:0 0 0 16px; background:transparent}
  .has-drop::after{display:none}
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  h1{font-size:1.75rem}
  h2{font-size:1.25rem}
  .phone-lg small{display:none}
  .phone-lg{font-size:1.22rem}
  .mobile-call{display:block}
  body{padding-bottom:56px}
  .foot{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column}
  .main .btn,.main .btn-lg{display:block; width:100%; margin:0 0 12px}
  .cta-row{flex-direction:column}
  .cta-row .btn{flex:none; width:100%; max-width:none}
}