
:root{--navy:#092d50;--blue:#146da1;--ink:#10283d;--gray:#667684;--line:#dce3e8;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:#fff}
.nav{height:88px;display:flex;align-items:center;gap:38px;padding:12px 6vw;background:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid #edf1f4}
.brand img{width:210px;display:block}.nav nav{margin-left:auto;display:flex;gap:34px}.nav a{text-decoration:none;color:#24445d;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.btn{border:0;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:12px;cursor:pointer}.primary{background:var(--navy);color:white}.light{background:#fff;color:var(--navy)}.outline-light{border:1px solid rgba(255,255,255,.75);color:#fff;background:transparent}
.hero{height:560px;background:#062a4b;position:relative;display:flex;align-items:center;overflow:hidden}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,31,55,.82) 0%,rgba(5,31,55,.52) 42%,rgba(5,31,55,.08) 72%)}
.hero-copy{position:relative;color:white;width:min(650px,86vw);margin-left:8vw}.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:800;margin-bottom:18px}.hero h1{font-size:62px;line-height:.98;text-transform:uppercase;margin:0 0 20px;letter-spacing:-.04em}.hero h1 span{font-weight:300}.hero p{font-size:18px;line-height:1.55;max-width:570px;margin:0 0 28px;color:#eef4f8}
.services{text-align:center;padding:62px 6vw 52px}.services h2,.commitment h2{font-size:34px;text-transform:uppercase;margin:0 0 8px}.services>p{margin:0;color:#71808c}.service-grid{display:grid;grid-template-columns:repeat(7,1fr);max-width:1120px;margin:42px auto 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.service-grid div{padding:25px 8px;border-right:1px solid var(--line)}.service-grid div:last-child{border:0}.service-grid b{display:block;text-transform:uppercase;font-size:13px}.service-grid span{display:block;font-size:11px;color:#7c8a95;margin-top:7px}
.split{display:grid;grid-template-columns:1fr 1fr}.panel{min-height:355px;position:relative;overflow:hidden;background:#062a4b}.panel:after{content:"";position:absolute;right:0;top:0;width:58%;height:100%;background-size:cover;background-position:center}.ship:after{background-image:url('assets/shippers-port-branded.jpg')}.carrier:after{background-image:url('assets/carriers-branded.jpg')}.shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#062a4b 0%,#062a4b 44%,rgba(6,42,75,.82) 58%,rgba(6,42,75,.12) 100%)}.panel-copy{position:absolute;z-index:2;left:8%;bottom:13%;color:#fff;max-width:390px}.panel h3{font-size:35px;text-transform:uppercase;margin:0 0 12px}.panel p{line-height:1.55;color:#edf3f6;margin:0 0 22px}
.commitment{padding:72px 9vw;display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center}.eyebrow.dark{color:#667b8c}.commitment h2 span{font-weight:300}.commitment p{font-size:17px;line-height:1.7;color:#586b79}
.cross{min-height:290px;background:#062a4b;position:relative;display:flex;align-items:center;overflow:hidden}.cross:after{content:"";position:absolute;right:0;top:0;width:58%;height:100%;background:url("assets/cross-border-clean.jpg") center/cover no-repeat}.cross:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#062a4b 0%,#062a4b 44%,rgba(6,42,75,.78) 62%,rgba(6,42,75,.12) 100%)}.cross-copy{position:relative;z-index:2;color:white;margin-left:8vw;max-width:500px}.cross h2{font-size:38px;margin:0 0 10px}.cross p{line-height:1.6;color:#eaf1f5}
footer{background:#062a4b;color:#fff;padding:50px 8vw 24px;display:grid;grid-template-columns:2fr 1fr 1fr 2fr;gap:35px;position:relative}.footer-brand img{width:220px;filter:brightness(0) invert(1);opacity:.95}.footer-brand p{color:#b9c7d2}.footer-brand~div{display:flex;flex-direction:column;gap:10px}.footer-brand~div b{text-transform:uppercase;font-size:12px;letter-spacing:.08em;margin-bottom:5px}.footer-brand~div a{color:#c8d4dd;text-decoration:none;font-size:13px}footer small{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:18px;color:#91a7b8}
.modal{display:none;position:fixed;inset:0;background:rgba(3,20,35,.72);z-index:100;padding:24px;overflow:auto}.modal.show{display:flex;align-items:center;justify-content:center}.modal-card{background:#fff;width:min(820px,100%);padding:38px;position:relative}.close{position:absolute;right:18px;top:10px;background:none;border:0;font-size:34px;cursor:pointer;color:#6b7882}.modal h2{margin-top:0;font-size:30px;text-transform:uppercase}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}label{font-size:12px;font-weight:800;text-transform:uppercase;color:#516573;display:block;margin-bottom:14px}input,select,textarea{width:100%;padding:12px;margin-top:6px;border:1px solid #ccd6dd;font:inherit;background:#fff}textarea{resize:vertical}.form-note{font-size:12px;color:#75838e}
@media(max-width:900px){.nav{height:auto;flex-wrap:wrap;padding:12px 5vw}.brand img{width:175px}.nav nav{order:3;width:100%;overflow:auto;gap:22px;padding:7px 0}.nav .btn{margin-left:auto}.hero{height:520px}.hero h1{font-size:44px}.service-grid{grid-template-columns:repeat(2,1fr)}.service-grid div{border-bottom:1px solid var(--line)}.split,.commitment{grid-template-columns:1fr}.panel{min-height:330px}.commitment{gap:25px}footer{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:560px){.hero{background-position:62% center}.hero-copy{margin-left:7vw}.hero h1{font-size:38px}.hero p{font-size:16px}.services h2,.commitment h2{font-size:28px}.service-grid{grid-template-columns:1fr 1fr}.form-grid{grid-template-columns:1fr}.modal-card{padding:28px 20px}footer{grid-template-columns:1fr}}

.form-note.success{font-weight:700;color:#0d2b49}.btn:disabled{opacity:.7;cursor:wait}

@media(max-width:760px){
  .panel:after,.cross:after{width:100%;opacity:.42}
  .shade{background:rgba(6,42,75,.78)}
  .cross:before{background:rgba(6,42,75,.78)}
  .panel-copy{left:7%;right:7%;max-width:none}
}



.hero-inner{position:relative;z-index:2}

/* ===== V12: ONLY THE THREE REQUESTED FIXES ===== */

/* Header logo: full M visible with breathing room */
.nav{
  min-height:104px;
  height:104px;
  padding-top:8px;
  padding-bottom:8px;
}
.brand{
  height:88px;
  width:265px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  flex:0 0 auto;
}
.brand img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
}

/* Hero: clean LA photo across the full width.
   No baked-in generated wording exists in this crop. */
.hero{
  height:450px !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  background:
    linear-gradient(90deg,
      rgba(5,35,61,.86) 0%,
      rgba(5,35,61,.70) 22%,
      rgba(5,35,61,.30) 39%,
      rgba(5,35,61,.06) 55%,
      rgba(5,35,61,0) 68%),
    url('assets/hero-la-clean-v12.jpg') center center / cover no-repeat !important;
}
.hero:before,.hero:after{display:none !important;}
.hero-overlay{display:none !important;}
.hero-copy{
  position:relative !important;
  z-index:2 !important;
  width:min(610px,86vw) !important;
  margin-left:7vw !important;
}
.hero h1{font-size:56px !important;}
.hero p{max-width:540px !important;}

/* Footer: use clean logo with no duplicate tagline underneath */
.footer-brand img{
  width:230px !important;
  height:auto !important;
  object-fit:contain !important;
  filter:brightness(0) invert(1);
}
.footer-brand p{display:none !important;}

@media(max-width:900px){
  .nav{height:auto;min-height:92px;}
  .brand{width:215px;height:76px;}
  .hero{height:500px !important;background-position:58% center !important;}
  .hero h1{font-size:44px !important;}
}
@media(max-width:560px){
  .brand{width:190px;height:68px;}
  .hero{
    height:560px !important;
    background-position:62% center !important;
  }
  .hero-copy{margin-left:7vw !important;}
  .hero h1{font-size:38px !important;}
}

/* ===== V13 HERO: no freeway sign, no baked-in site copy ===== */
.hero{
  height:500px !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  overflow:hidden !important;
  background:#062a4b !important;
}
.hero:after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background-image:
    linear-gradient(90deg,
      rgba(5,35,61,.90) 0%,
      rgba(5,35,61,.72) 24%,
      rgba(5,35,61,.34) 40%,
      rgba(5,35,61,.08) 54%,
      rgba(5,35,61,0) 68%),
    url('assets/hero-la-nosign-v13.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.hero:before{display:none !important;}
.hero-inner,.hero-copy{position:relative !important;z-index:2 !important;}

@media(max-width:760px){
  .hero{height:560px !important;}
  .hero:after{
    background-image:
      linear-gradient(rgba(5,35,61,.70),rgba(5,35,61,.70)),
      url('assets/hero-la-nosign-v13.jpg') !important;
    background-position:62% center !important;
  }
}

/* ===== V14 — image cleanup only ===== */
.hero{
  height:500px !important;
  position:relative !important;
  overflow:hidden !important;
  background:#062a4b !important;
}
.hero:after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background-image:
    linear-gradient(90deg,
      rgba(5,35,61,.90) 0%,
      rgba(5,35,61,.70) 23%,
      rgba(5,35,61,.28) 42%,
      rgba(5,35,61,.04) 58%,
      rgba(5,35,61,0) 70%),
    url('assets/hero-la-v14.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
.hero:before{display:none !important;}
.hero-inner,.hero-copy{position:relative !important;z-index:2 !important;}

/* Replace lower cross-border background with branded Milestone trailer */
.cross-border,
.crossborder,
#cross-border{
  background-image:
    linear-gradient(90deg,rgba(5,35,61,.80),rgba(5,35,61,.28)),
    url('assets/cross-border-v14.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

@media(max-width:760px){
  .hero{height:560px !important;}
  .hero:after{
    background-image:
      linear-gradient(rgba(5,35,61,.70),rgba(5,35,61,.70)),
      url('assets/hero-la-v14.jpg') !important;
    background-position:58% center !important;
  }
}

/* ===== V15 — requested corrections only ===== */

/* Clean hero: source crop contains no baked-in hero copy.
   Shift the photo left enough to keep the entire trailer visible. */
.hero{
  height:500px !important;
  position:relative !important;
  overflow:hidden !important;
  background:#062a4b !important;
}
.hero:after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  background-image:
    linear-gradient(90deg,
      rgba(5,35,61,.92) 0%,
      rgba(5,35,61,.76) 22%,
      rgba(5,35,61,.36) 38%,
      rgba(5,35,61,.08) 53%,
      rgba(5,35,61,0) 67%),
    url('assets/hero-v15.jpg') !important;
  background-size:cover !important;
  background-position:56% center !important;
  background-repeat:no-repeat !important;
}
.hero:before{display:none !important;}
.hero-inner,.hero-copy{position:relative !important;z-index:2 !important;}

/* Lower cross-border image now uses a branded Milestone trailer. */
.cross-border,
.crossborder,
#cross-border{
  background-image:
    linear-gradient(90deg,rgba(5,35,61,.78),rgba(5,35,61,.30)),
    url('assets/cross-border-v15.jpg') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

@media(max-width:760px){
  .hero{height:560px !important;}
  .hero:after{
    background-image:
      linear-gradient(rgba(5,35,61,.70),rgba(5,35,61,.70)),
      url('assets/hero-v15.jpg') !important;
    background-position:58% center !important;
  }
}

/* ===== V16 FINAL IMAGE FIXES ===== */
.hero{height:500px!important;position:relative!important;overflow:hidden!important;background:#062a4b!important;}
.hero:after{content:""!important;display:block!important;position:absolute!important;inset:0!important;z-index:0!important;background-image:linear-gradient(90deg,rgba(5,35,61,.94) 0%,rgba(5,35,61,.80) 20%,rgba(5,35,61,.42) 37%,rgba(5,35,61,.10) 53%,rgba(5,35,61,0) 68%),url('assets/hero-v16-clean.jpg')!important;background-size:cover!important;background-position:58% center!important;background-repeat:no-repeat!important;}
.hero:before{display:none!important}.hero-overlay{display:none!important}.hero-copy{position:relative!important;z-index:2!important;}
.cross{background-image:linear-gradient(90deg,rgba(5,35,61,.82),rgba(5,35,61,.25)),url('assets/cross-v16-branded.jpg')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat!important;}
@media(max-width:760px){.hero{height:560px!important}.hero:after{background-image:linear-gradient(rgba(5,35,61,.72),rgba(5,35,61,.72)),url('assets/hero-v16-clean.jpg')!important;background-position:55% center!important;}.cross{background-position:center center!important;}}

/* ===== V17 — remove baked-in right black strip; no other design changes ===== */
.hero:after{
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}

/* ===== V18 — approved final LA hero photo ===== */
.hero:after{
  background-image:linear-gradient(90deg,rgba(5,35,61,.94) 0%,rgba(5,35,61,.80) 20%,rgba(5,35,61,.42) 37%,rgba(5,35,61,.10) 53%,rgba(5,35,61,0) 68%),url('assets/hero-v18-final.jpg')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
@media(max-width:760px){
  .hero:after{
    background-image:linear-gradient(rgba(5,35,61,.72),rgba(5,35,61,.72)),url('assets/hero-v18-final.jpg')!important;
    background-position:center center!important;
  }
}

/* V19 FINAL — approved NYC Manhattan Bridge image. Do not alter other approved photography. */
.cross:after{
  background:url('assets/nyc-bridge-milestone-v19.png') center center/cover no-repeat !important;
  opacity:1 !important;
}
.cross{
  background:#062a4b !important;
  background-image:none !important;
}

/* V20 FINAL: force the approved NYC Manhattan Bridge / modern Cascadia image into the actual .cross section */
.cross:after{
  background-image:url('assets/nyc-bridge-milestone-v20.jpg') !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}

/* V21: office contact details only; all existing styling remains unchanged. */
.office-contact{padding:52px 8vw;text-align:center;background:#f7f9fb;color:#062a4b}
.office-contact h2{font-size:30px;text-transform:uppercase;margin:10px 0 22px}
.office-contact p{font-size:15px;line-height:1.7;margin:10px 0;color:#586b79}
.office-contact strong{color:#062a4b}
.office-contact a{color:#062a4b;text-decoration:none}
.office-contact a:hover{text-decoration:underline}
.footer-address{color:#c8d4dd;font-size:13px;line-height:1.6}
@media(max-width:560px){.office-contact{padding:42px 6vw}.office-contact h2{font-size:26px}.office-separator{display:block;font-size:0;height:0}}
