
:root{--navy:#0d2030;--brand:#20145b;--red:#e51c2e;--green:#26865f;--ink:#14243a;--muted:#5d6b7a;--line:#dce5e9;--light:#f5f8f8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:white}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.wrap{max-width:1170px;margin:auto;padding:0 24px}.top{background:#091c2e;color:#ccd9dd;font-size:12px;padding:7px 0}.top .wrap{display:flex;justify-content:space-between;gap:15px}.header{position:sticky;top:0;z-index:20;background:white;box-shadow:0 4px 24px #0d203015}.headerin{display:flex;align-items:center;gap:25px;justify-content:space-between;min-height:81px}.logo{display:block;flex:none;background:white;padding:4px 8px;border-radius:4px}.logo img{display:block;width:188px;height:auto}.nav{display:flex;gap:21px;align-items:center}.nav a{font-weight:700;font-size:13px}.nav a:hover,.more:hover{color:var(--green)}.head-actions{display:flex;align-items:center;gap:10px}.lang{background:#fff;border:1px solid #ccd6dc;padding:9px 12px;border-radius:6px;cursor:pointer}.btn{display:inline-flex;justify-content:center;align-items:center;background:var(--red);color:#fff!important;border:0;padding:13px 21px;border-radius:5px;font-weight:750;font-size:13px;cursor:pointer;transition:.2s}.btn:hover{background:#bb1526;transform:translateY(-1px)}.btn2{background:transparent;border:1px solid #dae5e7;color:white!important}.btn2:hover{background:#ffffff24}.mobile{display:none;border:0;background:transparent;font-size:24px;cursor:pointer}.hero{color:white;background:linear-gradient(90deg,#071b2ef5 0%,#0a2135e5 52%,#09283e9c 100%),url('https://images.unsplash.com/photo-1494412519320-aa613dfb7738?auto=format&fit=crop&w=1800&q=85') center/cover;padding:110px 0 95px}.eyebrow{display:inline-flex;align-items:center;gap:12px;text-transform:uppercase;letter-spacing:2px;color:#73d3a7;font-weight:800;font-size:11px}.eyebrow:before{content:'';width:32px;height:2px;background:var(--green)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(36px,5vw,65px);letter-spacing:-1.7px;line-height:1.14;max-width:900px;margin:22px 0}h1 em{font-style:normal;color:#75d1a7}.hero p{max-width:760px;color:#d6e2e8;font-size:17px;line-height:1.85}.buttons{display:flex;gap:13px;flex-wrap:wrap;margin:27px 0}.chipline{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}.chip{font-size:12px;color:#e2f0ed;border:1px solid #5c8a86a0;background:#0c384040;padding:7px 11px;border-radius:4px}.section{padding:78px 0}.section.alt{background:var(--light)}.kicker{font-size:12px;letter-spacing:1.9px;text-transform:uppercase;color:var(--green);font-weight:800}h2{font-size:clamp(27px,3.2vw,40px);line-height:1.2;letter-spacing:-1px;margin:12px 0 16px}h3{font-size:18px;line-height:1.35}.lead{color:var(--muted);max-width:770px}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:31px}.service{display:block;min-height:238px;background:white;border:1px solid var(--line);border-top:4px solid var(--green);padding:25px;border-radius:8px;transition:.2s}.service:nth-child(3n + 2){border-top-color:#1b4963}.service:nth-child(3n + 3){border-top-color:var(--red)}.service:hover{box-shadow:0 12px 30px #1c34411c;transform:translateY(-3px)}.service .emoji{font-size:28px;margin-bottom:13px;display:block}.service h3{margin-bottom:6px}.service p{color:var(--muted);font-size:13px;line-height:1.65}.more{font-weight:800;color:var(--green);font-size:12px}.flow{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:30px}.flowitem{background:white;border:1px solid var(--line);padding:19px 12px;border-radius:7px;text-align:center;position:relative}.flowitem strong{display:block;color:var(--green);font-size:12px}.flowitem span{display:block;font-weight:750;margin-top:8px;font-size:13px}.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}.photo{min-height:410px;border-radius:9px;background:#e7edf0 url('mjll-warehouse-composite.png') center center/contain no-repeat}.ticks{list-style:none;padding:0}.ticks li{margin:12px 0;padding-left:29px;position:relative}.ticks li:before{content:'✓';position:absolute;left:0;color:var(--green);font-weight:900}.banner{padding:47px 0;background:linear-gradient(110deg,#0b2033,#124c47);color:white}.banner .wrap{display:flex;justify-content:space-between;align-items:center;gap:22px}.banner h2{margin:0 0 8px}.banner p{color:#d8e9e7;margin:0}.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px}.contacts{margin:24px 0}.contacts p{margin:12px 0}.contacts a{color:#17694c;font-weight:750}.form{padding:30px;border:1px solid var(--line);border-radius:9px;background:white;box-shadow:0 10px 35px #0d20300a}.fields{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{font-weight:700;font-size:12px}.field input,.field textarea,.field select{padding:11px;border:1px solid #cad8de;border-radius:5px;min-width:0;width:100%}.field textarea{min-height:110px}.small{font-size:12px;color:var(--muted)}.footer{background:#081b2e;color:#d7e2e7;padding:42px 0 22px}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;gap:42px}.footer .logo{display:inline-block}.footer h3{font-size:14px}.footer p,.footer a{font-size:13px}.footer a:hover{color:#7bd2ad}.footer-links{display:grid;gap:9px}.copyright{margin-top:35px;border-top:1px solid #ffffff25;padding-top:19px;font-size:12px;color:#9eb2bc}.innerhero{background:linear-gradient(110deg,#0b2033,#154e47);color:white;padding:72px 0}.innerhero h1{font-size:clamp(34px,4vw,52px)}.innerhero p{max-width:790px;color:#d3e3e5}.detail{display:grid;grid-template-columns:1.4fr .7fr;gap:65px}.detail ul{padding-left:20px}.detail li{margin:12px 0}.aside{background:var(--light);padding:28px;border:1px solid var(--line);border-radius:9px;align-self:start}.aside h3{margin-bottom:12px}.aside a{display:block;color:#18684c;font-weight:700;font-size:14px;margin:9px 0}.back{color:var(--green);font-size:13px;font-weight:800}.note{margin-top:25px;padding:19px 21px;background:#eef7f2;border-left:4px solid var(--green);font-size:13px}.hidden{display:none!important}@media(max-width:950px){.nav{gap:12px}.nav a{font-size:11px}.logo img{width:155px}.flow{grid-template-columns:repeat(3,1fr)}}@media(max-width:760px){.top{display:none}.headerin{min-height:70px}.mobile{display:block}.nav{display:none;position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;background:white;padding:20px 25px;box-shadow:0 10px 25px #0d203020}.nav.open{display:flex}.header .btn{display:none}.hero{padding:80px 0}.services{grid-template-columns:1fr}.flow{grid-template-columns:repeat(2,1fr)}.split,.contact,.detail,.footer-grid{grid-template-columns:1fr;gap:25px}.photo{min-height:280px}.banner .wrap{display:block}.banner .btn{margin-top:20px}.fields{grid-template-columns:1fr}.field.full{grid-column:auto}}
/* V3 refinements — shorter service cards and consistent outline icons */
.service{min-height:174px;padding:16px 20px 15px;display:flex;flex-direction:column}
.service-icon{width:33px;height:33px;color:var(--green);display:block;margin-bottom:8px}
.service:nth-child(3n + 2) .service-icon{color:#1b4963}
.service:nth-child(3n + 3) .service-icon{color:var(--red)}
.service-icon svg{width:100%;height:100%;display:block}
.service h3{font-size:16px;margin:0 0 5px}
.service p{font-size:12.5px;line-height:1.45;margin:0 0 10px}
.service .more{margin-top:auto}
.services{gap:14px;margin-top:24px}
.about-second{color:var(--muted);line-height:1.7}
#about .ticks li{font-size:14px;margin:9px 0}
.sea-flow .flow{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.services{grid-template-columns:1fr;gap:11px}.service{min-height:0;padding:16px}.sea-flow .flow{grid-template-columns:repeat(2,1fr)}}

/* V4: unified green service treatments, cleaner footer, dedicated quote page */
.service:nth-child(n){border-top-color:var(--green)}
.service:nth-child(n) .service-icon{color:var(--green)}
.service-icon svg{stroke-width:1.7}
.footer{background:#f4f7f6;color:var(--ink);border-top:1px solid #e1e9e7}
.footer .logo,.footer-logo{background:transparent!important;padding:0!important;border:0!important;border-radius:0!important;display:inline-block}
.footer-logo img{width:194px;max-width:100%;height:auto;display:block;mix-blend-mode:multiply}
.footer a:hover{color:var(--green)}.footer p{color:#506273}.copyright{border-top:1px solid #dce5e4;color:#647784}
.footer-grid{grid-template-columns:1.45fr .9fr 1.25fr}
.service-photo-slot{aspect-ratio:16/9;background:linear-gradient(135deg,#eef4f1,#e8eff2);border:1px dashed #b2c9bd;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#648076;margin-bottom:32px}
.photo-placeholder-icon{font-size:40px;line-height:1}.service-photo-slot span:last-child{font-size:13px;font-weight:700}
.chain-title{margin-top:36px}.quote-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:55px;align-items:start}
.quote-section{background:#f7f9f8}.contact-line{font-weight:700;color:#167456}
@media(max-width:760px){.footer-grid,.quote-layout{grid-template-columns:1fr}.service-photo-slot{margin-bottom:22px}}

/* V4.1: About section typography and dash markers */
#about .ticks li::before{content:"–";color:var(--green);font-weight:700;font-size:17px;top:-2px}
#about .ticks li{padding-left:23px;line-height:1.65}
#about .lead{font-size:15px;line-height:1.85;letter-spacing:.005em}
#about .about-second{font-size:15px;line-height:1.85;margin-top:15px}
#about h2{line-height:1.25;letter-spacing:-.02em}

/* Warehouse photo: fill the entire About Us image frame without letterboxing.
   Original selected FIRST exterior/interior composite remains unchanged. */
#about .split{grid-template-columns:1.12fr 0.88fr;gap:34px;align-items:center}
#about .photo{width:100%;min-height:0;aspect-ratio:1.68;background-image:url('mjll-warehouse-composite.png');background-position:47% center;background-size:cover;background-repeat:no-repeat;border-radius:9px}
#about .lead,#about .about-second{font-size:14px;line-height:1.65}
#about .ticks li{margin:8px 0;font-size:13px;line-height:1.55}
@media(max-width:760px){#about .split{grid-template-columns:1fr;gap:22px}#about .photo{aspect-ratio:1.75;min-height:0;background-position:44% center}}

/* V4.2 About Us: selected warehouse composite, clean typography */
#about .split{grid-template-columns:1.05fr .95fr;gap:36px;align-items:center}
#about .photo{width:100%;height:auto;min-height:0;aspect-ratio:1.79;background-image:url('mjll-warehouse-composite.png');background-size:cover;background-position:center center;border-radius:10px}
#about h2{font-size:clamp(26px,2.6vw,33px);line-height:1.28;letter-spacing:-.035em;margin:10px 0 14px}
#about .lead,#about .about-second{font-size:14px;line-height:1.75;text-align:left;overflow-wrap:break-word}
#about .ticks li{font-size:13px;line-height:1.65;margin:7px 0}
/* V4.2 dark footer with clean recoloured logo, original brand geometry preserved */
.footer{background:#0d2030;color:#eef4f7;border-top:0;padding:48px 0 22px}
.footer .footer-logo{display:inline-block;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;mix-blend-mode:normal}
.footer .footer-logo img{display:block;width:210px;max-width:100%;height:auto;mix-blend-mode:normal}
.footer h3{color:#fff}
.footer p,.footer a{color:#d5e0e7}
.footer a:hover{color:#71d1a0}
.footer .copyright{color:#a9bdc8;border-top:1px solid #ffffff30}
@media(max-width:760px){#about .split{grid-template-columns:1fr;gap:24px}#about .photo{aspect-ratio:1.85}#about h2{font-size:28px}}

/* Tracking prototype V1 — isolated components */
.track-head{background:linear-gradient(110deg,#081e30,#14534b)}.track-head .kicker{color:#9fe0bd}.track-section{background:#f6f9f8}.track-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}.track-search label{font-size:13px;font-weight:750;display:block;margin-bottom:10px}.track-input-row{display:flex;gap:9px}.track-input-row input{min-width:0;flex:1;border:1px solid #cbd9dd;border-radius:5px;padding:12px 14px;letter-spacing:.04em;text-transform:uppercase}.track-input-row .btn{flex:none}.demo-orders{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.demo-orders button{font-size:12px;color:#146e54;background:#edf8f2;border:1px solid #bfddd0;border-radius:6px;padding:7px 10px;cursor:pointer}.demo-orders button:hover{background:#d6f0e3}.tracking-error{color:#b32133;font-weight:700;font-size:13px}.tracking-result{background:white;border:1px solid #dce5e9;border-radius:12px;padding:34px;margin-top:33px;box-shadow:0 12px 35px #0b20300b}.result-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-bottom:1px solid #e4ecee;padding-bottom:20px}.result-top h2{margin:8px 0;font-size:29px}.status-pill{display:inline-flex;background:#e5f5eb;color:#176846;font-size:13px;font-weight:800;border-radius:20px;padding:8px 16px;white-space:nowrap}.result-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:45px;padding-top:24px}.timeline-panel h3{margin-bottom:24px}.shipment-timeline{list-style:none;margin:0;padding:0 0 0 13px}.shipment-timeline li{position:relative;padding:0 0 22px 28px;border-left:2px solid #c6d9d0}.shipment-timeline li:last-child{border-color:transparent;padding-bottom:0}.shipment-timeline li:before{content:'';position:absolute;left:-8px;top:3px;width:13px;height:13px;background:#25845e;border:2px solid white;box-shadow:0 0 0 2px #25845e;border-radius:50%}.shipment-timeline li.pending{opacity:.48}.shipment-timeline li.pending:before{background:#fff;box-shadow:0 0 0 2px #b9c5c8}.milestone-title{font-size:15px;font-weight:800}.milestone-date{color:#6a7886;font-size:12px}.milestone-note{color:#4d6070;font-size:13px;margin-top:2px}.result-aside{background:#f8faf9;padding:23px;border-radius:9px}.result-aside dl{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.result-aside dt{color:#667785;font-size:12px;margin-top:13px}.result-aside dd{margin:0;font-size:14px;font-weight:700;overflow-wrap:anywhere}.pod-box{border-top:1px solid #dae5df;margin-top:25px;padding-top:22px}.pod-icon{color:#26865f;font-size:26px}.pod-box h3{margin:4px 0 6px}.pod-box p{font-size:13px;color:#546676}.tracking-note{max-width:870px;color:#465e65;background:#e9f2ef;border-left:4px solid #26865f;padding:18px 24px;margin-top:30px;border-radius:4px}.tracking-note p{margin:5px 0 0;font-size:13px}
@media(max-width:760px){.track-intro,.result-grid{grid-template-columns:1fr;gap:22px}.track-input-row{flex-direction:column}.tracking-result{padding:20px}.result-top{flex-direction:column}.result-aside dl{grid-template-columns:1fr 1fr}.track-section{padding:45px 0}}

/* V2: differentiated hero calls to action */
.hero .btn-services{background:#21865d;color:#fff!important;border:1px solid #21865d}.hero .btn-services:hover{background:#176b4b}.hero .buttons .btn{min-height:46px}
