/* Kingsley Haulage - deliberately late-2000s inspired styling */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 24px 12px;
  color: #171717;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  background-color: #d5d5d5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='1' cy='1' r='.55' fill='%23bcbcbc'/%3E%3C/svg%3E");
}
a { color: #c8202e; text-decoration: underline; }
a:hover { color: #e13a46; }
.outer-wrap {
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #777;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.top-strip {
  height: 23px;
  padding: 3px 12px;
  background: #202020;
  color: #fff;
  text-align: right;
  font: bold 10px Tahoma, Arial, sans-serif;
}
.top-links a { color: #fff; text-decoration: none; }
.header {
  min-height: 142px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  background: linear-gradient(to bottom, #fff 0%, #f4f4f4 100%);
  border-bottom: 1px solid #aaa;
}
.logo-link { display: block; line-height: 0; }
.company-logo { display: block; width: 205px; max-width: 100%; height: 118px; object-fit: contain; object-position: left center; }
.header-message { flex: 1; min-width: 0; text-align: left; padding: 2px 0 0; }
.company-title { color: #222; font: bold 29px/1.12 "Trebuchet MS", Verdana, sans-serif; letter-spacing: .8px; white-space: nowrap; }
.slogan { margin-top: 7px; color: #c8202e; font: italic 13px Georgia, "Times New Roman", serif; }
.header-small { margin-top: 5px; color: #555; font: 10px Verdana, Geneva, sans-serif; }
.navigation {
  display: flex;
  flex-wrap: wrap;
  min-height: 32px;
  background: linear-gradient(to bottom, #3A3A3A 0%, #222222 55%, #111111 100%);
  border-top: 1px solid #650015;
  border-bottom: 1px solid #570013;
}
.navigation a {
  display: block;
  padding: 8px 15px 7px;
  color: #fff;
  font: bold 12px "Trebuchet MS", Verdana, sans-serif;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
  border-right: 1px solid rgba(255,255,255,.13);
}
.navigation a:hover, .navigation a.selected {
  color: #252525;
  text-shadow: none;
  background: linear-gradient(to bottom, #f4c6ca, #e8a0a6);
}
/* Kingsley Haulage - deliberately late-2000s inspired styling */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 24px 12px;
  color: #171717;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  background-color: #d5d5d5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Ccircle cx='1' cy='1' r='.55' fill='%23bcbcbc'/%3E%3C/svg%3E");
}
a { color: #c8202e; text-decoration: underline; }
a:hover { color: #e13a46; }
.outer-wrap {
  width: 960px;
  max-width: 100%;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #777;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
}
.top-strip {
  height: 23px;
  padding: 3px 12px;
  background: #202020;
  color: #fff;
  text-align: right;
  font: bold 10px Tahoma, Arial, sans-serif;
}
.top-links a { color: #fff; text-decoration: none; }
.header {
  min-height: 142px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  background: linear-gradient(to bottom, #fff 0%, #f4f4f4 100%);
  border-bottom: 1px solid #aaa;
}
.logo-link { display: block; line-height: 0; }
.company-logo { display: block; width: 205px; max-width: 100%; height: 118px; object-fit: contain; object-position: left center; }
.header-message { flex: 1; min-width: 0; text-align: left; padding: 2px 0 0; }
.company-title { color: #222; font: bold 29px/1.12 "Trebuchet MS", Verdana, sans-serif; letter-spacing: .8px; white-space: nowrap; }
.slogan { margin-top: 7px; color: #c8202e; font: italic 13px Georgia, "Times New Roman", serif; }
.header-small { margin-top: 5px; color: #555; font: 10px Verdana, Geneva, sans-serif; }
.navigation {
  display: flex;
  flex-wrap: wrap;
  min-height: 32px;
  background: linear-gradient(to bottom, #3A3A3A 0%, #222222 55%, #111111 100%);
  border-top: 1px solid #650015;
  border-bottom: 1px solid #570013;
}
.navigation a {
  display: block;
  padding: 8px 15px 7px;
  color: #fff;
  font: bold 12px "Trebuchet MS", Verdana, sans-serif;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
  border-right: 1px solid rgba(255,255,255,.13);
}
.navigation a:hover, .navigation a.selected {
  color: #252525;
  text-shadow: none;
  background: linear-gradient(to bottom, #f4c6ca, #e8a0a6);
}
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 215px; gap: 20px; padding: 20px 18px 22px; }
.sidebar { grid-column: 2; grid-row: 1; padding-left: 12px; border-left: 1px solid #ccc; }
.side-box { margin-bottom: 12px; border: 1px solid #aaa; background: #fff; }
.side-box h2 {
  margin: 0;
  padding: 5px 7px;
  color: #28230F;
  background: linear-gradient(to bottom, #e56a73, #c8202e);
  color: #28230F;
  font: bold 12px "Trebuchet MS", Verdana, sans-serif;
  text-shadow: 1px 1px #78601C;
}
.side-box:nth-child(even) h2 { background: linear-gradient(to bottom, #777, #414141); text-shadow: 1px 1px #333; }
.side-inner { padding: 7px 8px 9px; }
.side-inner p { margin: 2px 0 8px; }
.link-list { display: grid; gap: 4px; }
.link-list a { font-size: 11px; }
.small-button {
  display: inline-block;
  padding: 4px 9px;
  margin: 2px 2px 2px 0;
  color: #111;
  font: bold 11px "Trebuchet MS", Verdana, sans-serif;
  text-decoration: none;
  background: linear-gradient(to bottom, #fff, #eeeeee);
  border: 1px solid #888;
  border-bottom: 2px solid #777;
  box-shadow: inset 0 1px 0 #fff;
}
.small-button:hover { color: #650016; background: linear-gradient(to bottom, #fff1f2, #f2c4c8); }
.main-content { grid-column: 1; grid-row: 1; min-width: 0; }
.welcome-panel {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid #d98b91;
  background: #fff8f8;
}
.welcome-mark {
  flex: 0 0 58px;
  height: 58px;
  display: grid;
  place-items: center;
  color: #fff;
  font: bold 20px Georgia, serif;
  border: 1px solid #c8202e;
  background: linear-gradient(135deg, #e56a73 0%, #a91520 70%);
  text-shadow: 1px 1px #500;
}
h1 { margin: 0 0 4px; color: #c8202e; font: bold 16px Arial, Helvetica, sans-serif; }
.welcome-panel p { margin: 2px 0; }
.content-block { margin: 0 0 17px; }
.bar-heading {
  margin: 0 0 7px;
  padding: 4px 8px;
  color: #28230F;
  font: bold 13px Arial, Helvetica, sans-serif;
  background: linear-gradient(to right, #e56a73 0%, #f7dadd 62%, #fff 100%);
}
.content-block > p { margin: 5px 1px 8px; }
table { width: 100%; margin: 6px 0; border-collapse: collapse; }
th, td { padding: 6px; border: 1px solid #b9b9b9; text-align: left; vertical-align: top; }
th { color: #222; background: linear-gradient(to bottom, #eee, #d9d9d9); font-weight: bold; }
td:first-child { width: 34%; font-weight: bold; }
tr:nth-child(even) td { background: #f5f5f5; }
.fleet-feature { display: flex; gap: 12px; align-items: center; padding: 10px; border: 1px solid #ccc; background: #f7f7f7; }
.truck-placeholder { font-size: 38px; }
.fleet-feature p { margin: 3px 0; }
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.contact-cards div { padding: 8px; border: 1px solid #ccc; background: #f6f6f6; }
.edit-note { color: #777; font-size: 10px; font-style: italic; }
.footer {
  padding: 11px 14px;
  color: #555;
  text-align: center;
  font: 10px/1.6 Verdana, Geneva, sans-serif;
  background: linear-gradient(to bottom, #eee, #ddd);
  border-top: 4px solid #c8202e;
}
.footer-links { margin-top: 3px; }
@media (max-width: 700px) {
  body { padding: 0; background: #eee; }
  .outer-wrap { border-left: 0; border-right: 0; }
  .header { min-height: 105px; }
  .company-logo { width: 160px; height: 88px; }
  .company-title { font-size: 20px; white-space: normal; }
  .slogan { font-size: 12px; }
  .navigation a { flex: 1 1 33.333%; text-align: center; padding: 9px 4px; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; }
  .side-box { margin: 0; }
}
@media (max-width: 450px) {
  .header-message { display: block; }
  .company-logo { width: 112px; height: 76px; }
  .company-title { font-size: 16px; white-space: normal; }
  .slogan { font-size: 10px; }
  .sidebar, .contact-cards { grid-template-columns: 1fr; }
  .welcome-panel { gap: 8px; padding: 9px; }
  .welcome-mark { flex-basis: 45px; height: 45px; }
}


/* Responsive recruitment advertisement */
.recruitment-video { margin-top: 22px; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption { margin-top: 12px; }