/*
Theme Name: KCS Logistics
Author: KCS Logistics
Description: A clean, responsive transportation theme with customizable business information.
Version: 1.4.1
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kcs-logistics
*/
:root{--ink:#172e3e;--muted:#5c6b73;--paper:#f6f7f4;--line:#dbe1df;--accent:#e5ab47}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--paper);font-family:Arial,Helvetica,sans-serif;line-height:1.65}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ba7713;outline-offset:5px}.wrap{width:min(1220px,calc(100% - 80px));margin:auto}.top{background:var(--ink);color:#e2e8ea;font-size:11px;letter-spacing:1.5px;padding:9px 0}.top .wrap{display:flex;justify-content:space-between}header{background:#fbfcf9;border-bottom:1px solid var(--line)}.nav{min-height:94px;display:flex;align-items:center;gap:36px}.brand{display:flex;align-items:center;gap:12px;margin-right:auto;line-height:1}.mark{background:var(--ink);color:white;font-size:22px;font-weight:900;letter-spacing:-2px;padding:15px 10px;border-right:5px solid var(--accent);transform:skew(-7deg)}.brand b{font-size:23px;letter-spacing:2px}.brand small{display:block;font-size:9px;letter-spacing:4px;margin-top:8px}.custom-logo{max-width:180px;height:auto}.links{display:flex;align-items:center;gap:27px;font-size:13px;font-weight:600}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;padding:15px 23px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;border:1px solid var(--ink);cursor:pointer}.button:hover{background:#345468}.button.gold{background:var(--accent);color:var(--ink);border-color:var(--accent)}.button.ghost{background:transparent;color:var(--ink);border-color:#bac5c8}.menu{display:none}.hero{padding:66px 0 0}.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:50px;align-items:center}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;display:flex;align-items:center;gap:12px;margin:0 0 22px}.eyebrow:before{content:"";width:24px;height:3px;background:var(--accent)}h1{font-size:clamp(44px,5.1vw,70px);line-height:1.04;letter-spacing:-3.5px;margin:0 0 25px;max-width:650px}h1 em{font-style:normal;color:#72878e}p{color:var(--muted)}.lead{max-width:420px;font-size:15px;line-height:1.8}.actions{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}.hero-art{position:relative}.hero-art img{display:block;width:100%;aspect-ratio:1.04;object-fit:cover;border-radius:3px}.image-label{position:absolute;bottom:22px;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;padding:18px;background:rgba(248,250,247,.96);font-size:12px}.image-label small{font-size:9px;letter-spacing:1px;display:block;color:var(--muted)}.image-label span:last-child{font-size:25px}.strip{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:54px;padding:24px 0}.strip div{padding-left:30px;border-left:1px solid var(--line);font-size:12px}.strip div:first-child{padding-left:0;border:0}.strip b{display:block;font-size:13px}.strip span{color:var(--muted)}section{padding:82px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:32px}h2{font-size:38px;line-height:1.18;letter-spacing:-1.5px;margin:0}h3{font-size:19px;line-height:1.3}.section-head p{max-width:340px;font-size:13px;margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);padding:30px;position:relative}.card .number{color:#839197;font-size:11px;position:absolute;right:25px;top:27px}.icon{font-size:27px;width:52px;height:52px;display:grid;place-items:center;background:#eff3f0;border:1px solid var(--line)}.card p{font-size:13px;min-height:64px}.text-link{font-size:12px;font-weight:700;border-bottom:1px solid #aebbc0;padding-bottom:6px;display:inline-block}.about{background:#e9eeeb}.split{display:grid;grid-template-columns:1fr 1fr;gap:85px;align-items:center}.route-art{min-height:330px;background:var(--ink);padding:38px;color:#fff;position:relative;overflow:hidden}.route-art:after{content:"";position:absolute;width:260px;height:260px;border:1px solid #67818c;border-radius:50%;right:-100px;top:-90px;box-shadow:0 0 0 40px #ffffff08,0 0 0 80px #ffffff08}.route-art small{font-size:10px;letter-spacing:2px;color:#b2c4cb}.route-art h3{font-size:35px;max-width:280px;letter-spacing:-1px;margin:30px 0}.route-line{display:flex;align-items:center;gap:14px;color:var(--accent);font-size:12px}.route-line i{height:1px;background:#82979f;flex:1}.checks{padding:0;list-style:none}.checks li{padding:11px 0;border-bottom:1px solid #cbd5d2;font-size:13px}.checks li:before{content:"✓";color:#456752;margin-right:13px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:36px}.steps strong{font-size:12px;color:#647b84}.steps p{font-size:13px}.careers{padding:0 0 75px}.career-box{border:1px solid var(--line);padding:36px 40px;display:flex;align-items:center;justify-content:space-between;gap:35px;background:#fff}.career-box h2{font-size:29px}.career-box p{font-size:13px;margin-bottom:0}.contact{background:var(--ink);color:#fff}.contact p{color:#bdccd1}.contact .split{align-items:start}.contact h2{font-size:46px}.details{margin-top:28px}.details a{display:block;color:#fff}.details small{color:#bdccd1}.quote-form{background:#fff;padding:30px;color:var(--ink)}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}label{display:block;font-size:11px;font-weight:700;margin-bottom:14px}input,textarea{display:block;width:100%;padding:12px;border:1px solid #cdd6d5;border-radius:0;margin-top:7px;color:var(--ink);background:#fafbf9;font-size:13px}textarea{min-height:95px;resize:vertical}.quote-form .button{width:100%}.quote-form .hint{color:var(--muted);font-size:11px;margin-bottom:0}.notice{padding:15px;background:#edf1e9;border-left:3px solid var(--accent);font-size:13px}footer{padding:35px 0;background:#102430;color:#bbc8ce;font-size:11px}.footer-row{display:flex;justify-content:space-between;gap:25px}.footer-row b{color:#fff;letter-spacing:2px}.skip{position:absolute;top:-100px;left:20px;background:white;padding:10px;z-index:100}.skip:focus{top:10px}.content{min-height:60vh;padding:65px 0;max-width:850px}.content img{max-width:100%;height:auto}.content a{color:#355e75;text-decoration:underline}.content article{margin-bottom:40px}.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}@media(max-width:950px){.wrap{width:calc(100% - 40px)}.links{gap:16px}.nav{gap:18px}.nav>.button{display:none}.hero-grid{gap:25px}h1{font-size:52px}.split{gap:35px}}@media(max-width:700px){.top{font-size:8px}.top span:last-child{display:none}.nav{min-height:78px;flex-wrap:wrap;padding:16px 0}.menu{display:block;background:none;border:1px solid var(--line);padding:8px 12px;color:var(--ink)}.links{display:none;width:100%;flex-direction:column;align-items:start;padding:15px 0}.links.open{display:flex}.hero{padding-top:38px}.hero-grid,.split{grid-template-columns:1fr;gap:30px}h1{font-size:51px;letter-spacing:-2.8px}.hero-art img{aspect-ratio:1.3}.strip{margin-top:30px;gap:12px}.strip div{padding-left:12px}.strip b{font-size:11px}.strip span{font-size:10px}.section-head{display:block}.section-head p{margin-top:18px}section{padding:55px 0}h2{font-size:32px}.cards,.steps{grid-template-columns:1fr;gap:16px}.card p{min-height:0}.steps{gap:8px}.career-box{padding:27px;display:block}.career-box .button{margin-top:24px}.contact h2{font-size:38px}.fields{grid-template-columns:1fr;gap:0}.footer-row{flex-direction:column}.quote-form{padding:22px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Refined brand, photographic banner and unified line icons */
.wordmark{display:inline-flex;flex-direction:column;align-items:center;background:var(--ink);color:white;padding:10px 17px 12px;border-bottom:3px solid var(--accent)}.wordmark>span{font-size:32px;font-weight:900;letter-spacing:1px;font-style:italic;line-height:1}.brand .wordmark small{font-size:8px;letter-spacing:2.5px;margin-top:6px}.ui-icon{width:20px;height:20px;flex-shrink:0;vertical-align:middle}.icon{width:58px;height:58px;border:0;border-radius:12px;background:#edf2f0}.icon .ui-icon{width:32px;height:32px}.text-link{display:inline-flex;align-items:center;gap:10px}.text-link .ui-icon{width:17px;height:17px}.button .ui-icon{width:18px;height:18px}.image-label .ui-icon{width:22px;height:22px}.hero-grid{grid-template-columns:.85fr 1.3fr;gap:38px}.hero-art img{aspect-ratio:1.5;object-fit:contain;background:#d6e1e8}.image-label{position:static;padding:15px 18px;border:1px solid var(--line);border-top:0;background:#fff}.hero h1{font-size:clamp(44px,4.6vw,64px)}.menu{align-items:center;gap:10px}@media(max-width:700px){.hero-grid{grid-template-columns:1fr}.hero h1{font-size:51px}.hero-art img{aspect-ratio:1.5}.menu{display:flex}.wordmark>span{font-size:28px}}

/* Full-width fleet photography */
.nav{justify-content:flex-start;gap:44px}.nav .brand{margin-right:0}.nav>.button{margin-left:auto}.links{gap:30px}.fleet-hero{position:relative;isolation:isolate;overflow:hidden;background:#e4e9e5;min-height:540px}.fleet-backdrop,.fleet-wash{position:absolute;inset:0;z-index:-2}.fleet-backdrop img{height:100%;width:100%;object-fit:cover;object-position:center;display:block}.fleet-wash{z-index:-1;background:linear-gradient(90deg,rgba(247,248,244,.98) 0%,rgba(247,248,244,.92) 22%,rgba(247,248,244,.48) 39%,rgba(247,248,244,.12) 55%,rgba(247,248,244,.05) 100%)}.fleet-inner{min-height:540px;display:flex;align-items:center;padding-top:55px;padding-bottom:55px}.fleet-copy{width:39%;max-width:470px}.fleet-copy h1{font-size:clamp(44px,4.4vw,65px);line-height:1.04;letter-spacing:-3px}.fleet-copy .lead{font-size:14px;max-width:350px;color:#41545f}.fleet-copy .actions{gap:10px}.fleet-copy .button{padding:13px 17px;font-size:12px}.fleet-hero+.wrap .strip{margin-top:0}.button,.card,.text-link .ui-icon,.links a{transition:transform .22s ease,background-color .22s ease,box-shadow .22s ease,color .22s ease}.button:hover{transform:translateY(-2px);box-shadow:0 7px 18px #172e3e18}.card:hover{transform:translateY(-4px);box-shadow:0 12px 30px #172e3e0d}.text-link:hover .ui-icon{transform:translateX(4px)}.links a:hover{color:#93651b}.fleet-copy{animation:copy-enter .75s ease-out both}.reveal-on-scroll{animation:section-enter .65s ease-out both}@keyframes copy-enter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes section-enter{from{opacity:.3;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1600px){.fleet-hero,.fleet-inner{min-height:620px}}@media(max-width:1050px){.nav{gap:28px}.links{gap:23px}.fleet-copy{width:45%}.fleet-copy h1{font-size:48px}.fleet-wash{background:linear-gradient(90deg,#f7f8f4 0%,#f7f8f4ed 28%,#f7f8f440 64%,#f7f8f408 100%)}}@media(max-width:700px){.nav{gap:20px}.nav .menu{margin-left:auto}.fleet-hero{padding-top:0;min-height:0}.fleet-inner{min-height:0;padding-top:35px;padding-bottom:245px;align-items:flex-start}.fleet-copy{width:100%;max-width:450px}.fleet-copy h1{font-size:49px;max-width:380px}.fleet-copy .lead{max-width:380px}.fleet-backdrop{top:auto;height:245px}.fleet-backdrop img{object-fit:cover;object-position:right center}.fleet-wash{background:linear-gradient(180deg,#f7f8f4 0%,#f7f8f4 59%,#f7f8f440 73%,transparent 90%)}.fleet-copy .actions{margin-top:20px}.fleet-copy .eyebrow{margin-bottom:17px}}@media(prefers-reduced-motion:reduce){.fleet-copy,.reveal-on-scroll{animation:none}.button,.card,.text-link .ui-icon,.links a{transition:none}.button:hover,.card:hover{transform:none}}

/* Restore the approved navy truck image. */
.fleet-backdrop img{object-position:center 53%}@media(max-width:700px){.fleet-backdrop img{object-position:center 55%}}

/* Port composition: clear truck on the left, copy on the right. */
.fleet-hero{min-height:0}.fleet-inner{min-height:480px;padding-top:38px;padding-bottom:38px;justify-content:flex-end}.fleet-copy{width:32%;max-width:395px;margin-left:auto}.fleet-copy h1{font-size:clamp(40px,3.7vw,56px);letter-spacing:-2.2px}.fleet-copy .lead{font-size:13px}.fleet-copy .eyebrow{font-size:9px;letter-spacing:1.7px;margin-bottom:17px}.fleet-copy .actions{margin-top:22px;gap:9px}.fleet-copy .button{padding:12px 14px;font-size:11px;gap:12px}.fleet-wash{background:linear-gradient(90deg,transparent 0%,transparent 57%,rgba(247,248,244,.38) 66%,rgba(247,248,244,.94) 74%,rgba(247,248,244,.98) 100%)}.fleet-backdrop img{object-fit:cover;object-position:left center}@media(min-width:1600px){.fleet-inner{min-height:570px}.fleet-copy{width:33%}}@media(min-width:1051px) and (max-width:1250px){.fleet-copy h1{font-size:42px}.fleet-inner{min-height:440px}.fleet-copy .lead{line-height:1.6}}
@media(max-width:1050px){.fleet-inner{padding-top:32px;padding-bottom:36vw;min-height:0}.fleet-copy{width:100%;max-width:540px;margin-left:auto;text-align:right}.fleet-copy h1{font-size:46px;max-width:none}.fleet-copy .lead{margin-left:auto;max-width:440px}.fleet-copy .eyebrow,.fleet-copy .actions{justify-content:flex-end}.fleet-backdrop{top:auto;bottom:0;height:34vw}.fleet-backdrop img{object-fit:contain;object-position:center bottom}.fleet-wash{background:linear-gradient(180deg,#f7f8f4 0%,#f7f8f4 48%,rgba(247,248,244,.1) 75%,transparent 100%)}}@media(max-width:700px){.fleet-copy h1{font-size:44px}.fleet-inner{padding-bottom:39vw}.fleet-backdrop{height:36vw}.fleet-copy .lead{font-size:14px}.fleet-wash{background:linear-gradient(180deg,#f7f8f4 0%,#f7f8f4 60%,rgba(247,248,244,.1) 82%,transparent 100%)}}

/* One-time, gentle banner entrance; no looping motion. */
@keyframes fleet-photo-enter{from{opacity:.55;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
.fleet-backdrop img{animation:fleet-photo-enter 1.6s cubic-bezier(.2,.65,.3,1) both;transform-origin:35% 55%}
.fleet-copy{animation:copy-enter .8s ease-out .18s both}
@media(prefers-reduced-motion:reduce){.fleet-backdrop img,.fleet-copy{animation:none;transform:none}}

/* Continuous hero gradient: readable copy without a paragraph panel. */
.fleet-copy .lead{color:#172e3e;font-size:15px;font-weight:400;line-height:1.75;background:transparent;padding:0;border-radius:0;max-width:100%;box-shadow:none}
@media(min-width:1051px){.fleet-wash{background:linear-gradient(90deg,rgba(247,248,244,0) 0%,rgba(247,248,244,0) 46%,rgba(247,248,244,.16) 54%,rgba(247,248,244,.58) 61%,rgba(247,248,244,.90) 67%,rgba(247,248,244,.98) 75%,#f7f8f4 100%)}}
@media(max-width:1050px){.fleet-copy .lead{max-width:440px}}

/* Compact logo sizing also applies to logos uploaded in WordPress. */
.nav .brand{flex:0 0 auto;line-height:1}.nav .brand .custom-logo{display:block;width:auto;height:auto;max-width:112px;max-height:64px;object-fit:contain}.nav{min-height:88px;padding-top:12px;padding-bottom:12px}@media(max-width:700px){.nav{min-height:76px}.nav .brand .custom-logo{max-width:94px;max-height:52px}}

.nav .brand .custom-logo{max-width:110px;max-height:36px}@media(max-width:700px){.nav .brand .custom-logo{max-width:90px;max-height:30px}}

/* v1.4: The hero remains a single integrated image-and-copy composition on narrow screens.
   No bottom-stacked banner image and no overlapping text. */
@media (max-width:1050px) {
 .fleet-hero{min-height:540px;background:#edf1f0}
 .fleet-backdrop{position:absolute;inset:0;width:100%;height:100%}
 .fleet-backdrop img{width:100%;height:100%;object-fit:cover;object-position:36% center}
 .fleet-inner{min-height:540px;padding-top:36px;padding-bottom:36px;display:flex;justify-content:flex-end;align-items:center}
 .fleet-copy{width:min(50%,465px);max-width:none;margin-left:auto;text-align:right}
 .fleet-copy .lead{margin-left:auto}
 .fleet-wash{inset:0;background:linear-gradient(90deg,rgba(247,248,244,.02) 0%,rgba(247,248,244,.20) 32%,rgba(247,248,244,.93) 59%,#f7f8f4 100%)}
}
@media (max-width:700px){
 .fleet-hero{min-height:540px}
 .fleet-inner{min-height:540px;padding:30px 0;justify-content:flex-end}
 .fleet-backdrop{inset:0;height:100%}
 .fleet-backdrop img{object-fit:cover;object-position:30% center}
 .fleet-wash{background:linear-gradient(90deg,rgba(247,248,244,.10) 0%,rgba(247,248,244,.55) 24%,rgba(247,248,244,.96) 47%,#f7f8f4 100%)}
 .fleet-copy{width:68%;max-width:none;margin-left:auto;text-align:right}
 .fleet-copy h1{font-size:clamp(29px,8vw,44px);letter-spacing:-1.5px;overflow-wrap:normal}
 .fleet-copy .lead{font-size:13px;line-height:1.55}
 .fleet-copy .actions{justify-content:flex-end;gap:8px}
 .fleet-copy .button{font-size:11px;padding:10px 12px}
 .fleet-copy .eyebrow{font-size:9px;letter-spacing:1px;justify-content:flex-end}
}
@media(max-width:390px){
 .fleet-hero,.fleet-inner{min-height:560px}
 .fleet-copy{width:75%}
 .fleet-copy h1{font-size:31px}
}

/* v1.4.1 — Sticky primary navigation; the dark top announcement strip scrolls away.
   Keep the navigation above all page sections, including the hero image. */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fbfcf9;
  box-shadow: 0 2px 10px rgba(23,46,62,.06);
}
/* Account for the fixed visible navigation when using anchor links. */
html { scroll-padding-top: 105px; }
#services, #about, #careers, #contact { scroll-margin-top: 105px; }
@media (max-width: 700px) {
  html { scroll-padding-top: 92px; }
  #services, #about, #careers, #contact { scroll-margin-top: 92px; }
}
/* WordPress admin toolbar must not overlap the sticky navigation. */
body.admin-bar header { top: 32px; }
@media (max-width: 782px) { body.admin-bar header { top: 46px; } }
@media (max-width: 600px) { body.admin-bar header { top: 0; } }