/*
Theme Name: Dynamic Transportation Industrial v5
Theme URI: https://dynamictrans.com
Author: Dynamic Transportation LLC
Description: Industrial transportation theme for Dynamic Transportation LLC.
Version: 5.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: dynamic-transportation-industrial
*/

:root{
  --ink:#07090b;
  --charcoal:#121519;
  --steel:#252a30;
  --smoke:#eef0f2;
  --white:#fff;
  --muted:#69717b;
  --line:#d8dde1;
  --red:#c8102e;
  --red-dark:#8c0b22;
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--charcoal);background:#fff;line-height:1.55}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.container{width:min(var(--max),calc(100% - 42px));margin:0 auto}
.utility-bar{background:#050608;color:#d8dce0;font-size:12px;letter-spacing:.5px;text-transform:uppercase}
.utility-inner{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.utility-bar a{color:#fff;font-weight:800}
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.98);border-bottom:1px solid #d8dce0;box-shadow:0 6px 25px rgba(0,0,0,.05)}
.header-inner{min-height:90px;display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;margin-right:auto}
.brand-logo{display:block;width:min(425px,42vw);max-height:75px;object-fit:contain;object-position:left center}
.main-nav ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.main-nav a{color:#15191e;font-size:13px;font-weight:900;letter-spacing:.6px;text-transform:uppercase}
.main-nav a:hover{color:var(--red);text-decoration:none}
.portal-button{display:inline-flex;align-items:center;justify-content:center;background:var(--red);color:#fff!important;padding:13px 17px;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.7px}
.portal-button:hover{background:#e0183a;text-decoration:none}
.nav-toggle{display:none;border:1px solid #32363b;background:#fff;padding:9px 12px;font-weight:800}

.hero{position:relative;min-height:720px;display:flex;align-items:flex-end;color:#fff;background:#090b0e url('assets/hero-industrial.png') center 55%/cover no-repeat;overflow:hidden}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.76) 43%,rgba(0,0,0,.12) 76%,rgba(0,0,0,.02) 100%)}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:9px;background:var(--red)}
.hero-content{position:relative;z-index:2;width:min(820px,100%);padding:130px 0 105px}
.kicker{color:#ff3859;font-size:13px;font-weight:900;letter-spacing:2.2px;text-transform:uppercase}
.hero h1{margin:17px 0 25px;font-size:clamp(56px,7.1vw,102px);line-height:.91;letter-spacing:-4.7px;text-transform:uppercase}
.hero p{max-width:760px;font-size:20px;color:#e3e6e9}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:35px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;font-size:12px;font-weight:900;letter-spacing:.8px;text-transform:uppercase;border:1px solid transparent}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#e0183a;text-decoration:none}
.btn-light{background:#fff;color:#0a0c0f}
.btn-light:hover{background:#e8ebee;text-decoration:none}
.btn-line{border-color:#747b84;color:#fff}
.btn-line:hover{border-color:#fff;text-decoration:none}
.btn-dark{background:#0b0d10;color:#fff}
.btn-dark:hover{background:#252a30;text-decoration:none}

.intro-strip{background:#fff;border-bottom:1px solid var(--line)}
.intro-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:80px;padding:85px 0}
.section-label{color:var(--red);font-size:12px;font-weight:900;letter-spacing:2px;text-transform:uppercase}
.display-title{margin:10px 0 20px;font-size:clamp(39px,5vw,69px);line-height:.98;letter-spacing:-2.7px;text-transform:uppercase}
.lead{font-size:19px;color:#555e67}
.promise{background:#101318;color:#fff;padding:40px;border-left:7px solid var(--red)}
.promise h3{font-size:28px;margin:0 0 15px;text-transform:uppercase}
.promise p{color:#cbd0d5}

.capabilities{background:#090b0e;color:#fff;padding:95px 0}
.cap-head{display:flex;justify-content:space-between;gap:45px;align-items:end;margin-bottom:40px}
.cap-head .display-title{max-width:780px}
.cap-head p{max-width:410px;color:#bbc1c8}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#333840;border:1px solid #333840}
.cap-card{position:relative;min-height:520px;background:#0c0f12;overflow:hidden}
.cap-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%);opacity:.72;transition:.35s ease}
.cap-card:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.96),rgba(0,0,0,.05) 72%)}
.cap-card:hover img{transform:scale(1.035);filter:grayscale(25%);opacity:.93}
.cap-content{position:absolute;z-index:2;left:27px;right:27px;bottom:27px}
.cap-number{color:#ff3859;font-weight:900;letter-spacing:2px;font-size:11px}
.cap-content h3{font-size:25px;line-height:1.04;text-transform:uppercase;margin:9px 0 11px}
.cap-content p{font-size:14px;color:#c7ccd1;margin:0}

.story{padding:105px 0;background:#f2f3f4}
.story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:75px;align-items:center}
.story-mark{background:#0a0c0f;color:#fff;min-height:460px;padding:45px;position:relative;overflow:hidden}
.story-mark:after{content:"DYNAMIC";position:absolute;right:-80px;bottom:-30px;font-size:115px;font-weight:900;color:rgba(255,255,255,.035);transform:rotate(-90deg);transform-origin:right bottom}
.story-mark h3{font-size:39px;text-transform:uppercase;line-height:1;margin:0 0 30px}
.story-mark ul{position:relative;z-index:1;padding:0;list-style:none}
.story-mark li{padding:16px 0;border-bottom:1px solid #30353b;font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.6px}
.story-copy h2{font-size:clamp(40px,5vw,67px);line-height:.98;letter-spacing:-2.6px;text-transform:uppercase;margin:10px 0 24px}

.dispatch-section{background:var(--red);color:#fff;padding:85px 0}
.dispatch-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:75px;align-items:center}
.dispatch-section h2{font-size:clamp(42px,5vw,68px);line-height:.96;margin:8px 0 20px;text-transform:uppercase;letter-spacing:-2.5px}
.dispatch-section p{font-size:18px;color:#fff}
.dispatch-panel{background:#fff;color:#101318;padding:38px;box-shadow:0 22px 70px rgba(65,0,12,.3)}
.dispatch-panel h3{font-size:28px;text-transform:uppercase;margin:0 0 12px}
.dispatch-panel p{color:#59616a;font-size:15px}
.dispatch-panel .btn{width:100%}

.contact-ribbon{background:#050608;color:#fff;padding:48px 0}
.contact-ribbon .container{display:flex;justify-content:space-between;align-items:center;gap:30px}
.contact-ribbon strong{display:block;font-size:31px;text-transform:uppercase}
.contact-ribbon span{color:#c9ced3}

.page-hero{background:#0a0c0f;color:#fff;padding:105px 0 70px;border-bottom:8px solid var(--red)}
.page-hero h1{margin:9px 0 0;font-size:clamp(50px,7vw,83px);line-height:.95;text-transform:uppercase;letter-spacing:-3px}
.page-content{padding:75px 0;max-width:940px}
.page-content h2{font-size:34px;text-transform:uppercase;margin-top:48px;line-height:1.05}
.page-content h3{font-size:23px;margin-top:34px}
.page-content p,.page-content li{font-size:17px}
.notice{background:#f1f2f4;border-left:6px solid var(--red);padding:22px 25px;margin:28px 0}

.portal-page{background:#0b0d10;min-height:calc(100vh - 124px);padding:95px 0;color:#fff}
.portal-page-grid{display:grid;grid-template-columns:1fr .8fr;gap:70px;align-items:center}
.portal-page h1{font-size:clamp(52px,7vw,88px);line-height:.92;text-transform:uppercase;letter-spacing:-3.5px;margin:10px 0 25px}
.portal-card{background:#fff;color:#101318;padding:42px;box-shadow:0 30px 85px rgba(0,0,0,.4);border-top:8px solid var(--red)}
.portal-card h2{font-size:28px;text-transform:uppercase;margin-top:0}
.portal-card .btn{width:100%;margin-top:15px}

.site-footer{background:#090b0e;color:#bbc1c8;padding:65px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:65px}
.footer-logo{width:390px;max-height:88px;object-fit:contain;object-position:left}
.site-footer h3{color:#fff;font-size:15px;text-transform:uppercase;letter-spacing:1px;margin:0 0 18px}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin:9px 0}
.site-footer a{color:#d8dce0}
.footer-bottom{border-top:1px solid #2a2e34;margin-top:44px;padding-top:20px;font-size:12px;color:#858d96}
.small{font-size:13px}

@media(max-width:1050px){
  .main-nav{display:none}
  .nav-toggle{display:block}
  .main-nav.open{display:block;position:absolute;left:0;right:0;top:124px;background:#fff;padding:22px;border-top:1px solid #ddd}
  .main-nav.open ul{display:block}
  .main-nav.open li{margin:15px 0}
  .portal-button{margin-left:auto}
  .cap-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:800px){
  .utility-inner{display:block;padding:7px 0;text-align:center}
  .utility-inner div:last-child{margin-top:4px}
  .header-inner{min-height:78px}
  .brand-logo{width:275px;max-height:62px}
  .portal-button{display:none}
  .hero{min-height:650px;background-position:63% center}
  .hero:before{background:rgba(0,0,0,.75)}
  .hero-content{padding:100px 0 85px}
  .hero h1{letter-spacing:-3px}
  .intro-grid,.story-grid,.dispatch-grid,.portal-page-grid,.footer-grid{grid-template-columns:1fr}
  .cap-head{display:block}
  .contact-ribbon .container{display:block}
  .contact-ribbon .btn{margin-top:20px}
}
@media(max-width:560px){
  .container{width:min(var(--max),calc(100% - 28px))}
  .brand-logo{width:225px}
  .cap-grid{grid-template-columns:1fr}
  .cap-card{min-height:440px}
  .hero h1{font-size:54px}
  .display-title{font-size:42px}
}

.address-block{
  display:grid;
  gap:10px;
  margin-top:18px;
  font-size:14px;
  line-height:1.55;
}
.address-block strong{
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.7px;
  font-size:12px;
}
.footer-contact{
  margin-top:18px;
}
.footer-contact a{color:#fff;font-weight:800}
@media(max-width:800px){
  .hero{background-position:68% center}
}