/* Hero shipment-journey mock */
.tms-svc .jr { background:#F6F8FB; padding:18px; display:flex; flex-direction:column; gap:12px; }
.tms-svc .jr__top { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.tms-svc .jr__top strong { font-size:17px; }
.tms-svc .jr__top small { display:block; font-size:11.5px; color:#0B1A3D; font-weight:600; }
.tms-svc .jr__route { background:#0B1A3D; color:#fff; border-radius:12px; padding:14px 16px; }
.tms-svc .jr__ends { display:flex; justify-content:space-between; font-size:13px; font-weight:700; }
.tms-svc .jr__ends span small { display:block; font-size:10.5px; font-weight:600; color:#A9B6CE; }
.tms-svc .jr__ends span:last-child { text-align:right; }
.tms-svc .jr__line { position:relative; height:6px; border-radius:99px; background:#24376A; margin:16px 4px 6px; }
.tms-svc .jr__line i { position:absolute; left:0; top:0; height:100%; width:62%; border-radius:99px; background:#E8731C; }
.tms-svc .jr__line b { position:absolute; left:62%; top:50%; transform:translate(-50%,-50%); width:30px; height:30px; border-radius:50%; background:#E8731C; border:3px solid #0B1A3D; display:grid; place-items:center; }
.tms-svc .jr__meta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.tms-svc .jr__meta div { background:#fff; border:1px solid #E6EBF3; border-radius:10px; padding:9px 11px; min-width:0; }
.tms-svc .jr__meta small { display:block; font-size:10.5px; font-weight:700; color:#0B1A3D; }
.tms-svc .jr__meta b { font-size:13px; white-space:nowrap; }
.tms-svc .jr__steps { list-style:none; margin:0; padding:6px 14px; background:#fff; border:1px solid #E6EBF3; border-radius:12px; }
.tms-svc .jr__steps li { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:12.5px; font-weight:600; color:#0B1A3D; border-top:1px solid #EEF1F6; }
.tms-svc .jr__steps li:first-child { border-top:0; }
.tms-svc .jr__steps li::before { content:""; flex:none; width:16px; height:16px; border-radius:50%; border:2px solid #CBD3DF; background:#fff; box-sizing:border-box; }
.tms-svc .jr__steps li.done::before { border-color:#1B7F5A; background:#1B7F5A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat; }
.tms-svc .jr__steps li.now::before { border-color:#E8731C; box-shadow:0 0 0 3px #FDEEE3; }
.tms-svc .jr__steps li.todo { color:#8492AB; }
.tms-svc .jr__steps li span { margin-left:auto; font-size:11px; font-weight:600; color:#0B1A3D; white-space:nowrap; }
@media (min-width:1200px) { .tms-svc .jr { padding:24px; gap:14px; } .tms-svc .jr__top strong { font-size:20px; } .tms-svc .jr__ends { font-size:15px; } .tms-svc .jr__meta b { font-size:14.5px; } .tms-svc .jr__steps li { font-size:14px; padding:10px 0; } .tms-svc .jr__steps li span { font-size:12px; } }

/* Responsive fixes */
.tms-svc .integration { min-width:0; overflow-wrap:anywhere; }
@media (max-width:359px) { .integrations { grid-template-columns:minmax(0,1fr) !important; } }
.tms-svc .jr__ends span small, .tms-svc .jr__meta small { font-size:11.5px; }
.tms-svc .jr .pill { font-size:11.5px; }
@media (max-width:419px) { .tms-svc .jr__meta { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); } .tms-svc .jr__meta b { font-size:12px; } }

/* Even spacing around CTA banners */
.tms-svc section.midcta:not(.midcta--after-compare) { padding-top:0; padding-bottom:0; }

.tms-svc .why--4 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:1200px) { .why--4 { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:599px) { .why--4 { grid-template-columns:minmax(0,1fr); } }

/* Client quotes */
.tms-svc .proof__card.quote { margin:0; gap:18px; justify-content:space-between; }
.tms-svc .proof__card.quote blockquote { margin:0; font-size:17px; line-height:1.5; font-weight:600; color:#fff; }
.tms-svc .proof__card.quote figcaption { display:flex; flex-direction:column; gap:2px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); }
.tms-svc .proof__card.quote figcaption strong { font-size:15px; color:#FDBA74; }

.tms-svc .proof__more a { text-decoration:none; }
.tms-svc .proof__more a:hover { text-decoration:underline; }

/* No orphan cards in 2-column layouts */
@media (max-width:1024px) { .proof .quote:last-child { grid-column:1 / -1; } }

.tms-svc .proof__more { margin-top:32px; }
.tms-svc .proof__more a.btn { display:inline-flex; color:#fff; padding:0 26px; text-decoration:none; }
.tms-svc .proof__more a.btn:hover { text-decoration:none; background:rgba(255,255,255,.08); }
@media (max-width:767px) { .proof__more a.btn { width:100%; } }

/* Headings that keep the look of their former labels */
.tms-svc .whatis__list h3, .tms-svc .integration h3 { margin:0; font:inherit; font-weight:700; color:inherit; letter-spacing:inherit; line-height:inherit; }
.tms-svc .whatis__list h3 { display:block; font-size:16px; }

@media (min-width:1025px) { .integrations { grid-template-columns:repeat(5,minmax(0,1fr)); } .integration { flex-direction:column; align-items:flex-start; gap:12px; font-size:14.5px; } }

/* Integration cards with descriptions */
.tms-svc .integration { align-items:flex-start; }
.tms-svc .integration__txt { min-width:0; }
.tms-svc .integration__txt p { margin:4px 0 0; font-size:13.5px; font-weight:400; line-height:1.45; color:var(--text); }
@media (max-width:599px) { .integrations { grid-template-columns:minmax(0,1fr) !important; } .integration { font-size:15px; padding:14px 16px; } }

/* CTA banners placed inside a section */
.tms-svc .midcta--in { padding:0; margin-top:clamp(28px,4vw,40px); background:none; }

/* Hero headline: two clean lines on desktop/tablet */
@media (min-width:600px) { .tms-svc .hero h1 .h1-top, .tms-svc .hero h1 .h1-hl { white-space:nowrap; } }
@media (min-width:1025px) {
.tms-svc .hero .wrap { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); }
.tms-svc .hero h1 { font-size:clamp(28px,2.85vw,42px); line-height:1.15; }
}
@media (max-width:599px) { .tms-svc .hero h1 { font-size:clamp(25px,7.2vw,32px); } }
.tms-svc .m-br { display:none; }
@media (max-width:599px) { .tms-svc .m-br { display:inline; } .tms-svc .hero h1 .h1-top { text-wrap:wrap; } }
@media (min-width:768px) and (max-width:1024px) { #demo .box { grid-template-columns:1fr; } }

/* Brand text colour for all content, light and dark mode alike */
.tms-svc, .tms-svc[data-theme="dark"] { --ink:#0B1A3D; --text:#0B1A3D; --muted:#0B1A3D; }
.tms-svc .lead, .tms-svc .head p, .tms-svc .whatis p, .tms-svc .problem p, .tms-svc .timeline li p, .tms-svc .benefit p, .tms-svc .solution p, .tms-svc .feat p, .tms-svc .industry p, .tms-svc .why__item p, .tms-svc .integration__txt p, .tms-svc .faq p, .tms-svc .whatis__list span, .tms-svc .swipe, .tms-svc .compare td { color:#0B1A3D; }

/* Hero fleet dashboard mock */
.tms-svc .fd { background:#F6F8FB; padding:18px; display:flex; flex-direction:column; gap:12px; }
.tms-svc .fd__top { display:flex; justify-content:space-between; align-items:center; }
.tms-svc .fd__top strong { font-size:17px; }
.tms-svc .fd__tiles { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.tms-svc .fd__tiles > div { background:#fff; border:1px solid #E6EBF3; border-radius:10px; padding:10px 11px; min-width:0; }
.tms-svc .fd__tiles small { display:block; font-size:11px; font-weight:700; color:#0B1A3D; opacity:.7; line-height:1.25; }
.tms-svc .fd__tiles b { display:block; font-size:19px; line-height:1.2; margin-top:2px; }
.tms-svc .fd__tiles b em { font-style:normal; font-size:12px; font-weight:600; opacity:.6; }
.tms-svc .fd__warn { color:#C2560A; }
.tms-svc .fd__list { background:#fff; border:1px solid #E6EBF3; border-radius:12px; overflow:hidden; }
.tms-svc .fd__row { display:grid; grid-template-columns:1.1fr 1.4fr auto; gap:10px; align-items:center; padding:9px 14px; border-top:1px solid #EEF1F6; font-size:12.5px; }
.tms-svc .fd__row:first-child { border-top:0; }
.tms-svc .fd__head { background:#FAFBFD; font-size:11px; font-weight:700; opacity:.7; }
.tms-svc .fd__row b { display:block; font-size:12.5px; }
.tms-svc .fd__row small { display:block; font-size:11px; opacity:.65; }
.tms-svc .fd__row > span:nth-child(2) { min-width:0; }
.tms-svc .pill.r { color:#B42318; background:#FDE8E6; }
.tms-svc .fd .pill { font-size:11.5px; padding:4px 10px; }
@media (min-width:1200px) { .tms-svc .fd { padding:22px; gap:14px; } .tms-svc .fd__top strong { font-size:19px; } .tms-svc .fd__tiles b { font-size:22px; } .tms-svc .fd__row { font-size:13.5px; padding:11px 16px; } .tms-svc .fd__row b { font-size:13.5px; } }
@media (max-width:419px) { .tms-svc .fd__tiles { grid-template-columns:repeat(2,minmax(0,1fr)); } .tms-svc .fd__row { grid-template-columns:minmax(0,1fr) auto; row-gap:4px; } .tms-svc .fd__row > span:nth-child(2) { grid-column:1 / -1; font-size:12px; opacity:.85; } .tms-svc .fd__row .pill { justify-self:end; } .tms-svc .fd__head > span:nth-child(2) { display:none; } }

/* Sub-titles styled like h3 but not headings */
.tms-svc .problem .h3-like { margin:0 0 8px; font-size:17px; font-weight:700; line-height:1.3; }
.tms-svc .whatis__list .h3-like { margin:0; font-size:16px; font-weight:700; display:block; }
.tms-svc .benefit .h3-like { margin:0 0 6px; font-size:17px; font-weight:700; line-height:1.3; }

/* E-commerce page: headline is longer than the fleet page's, so allow it to wrap */
@media (min-width:600px) { .tms-svc .hero h1 .h1-top, .tms-svc .hero h1 .h1-hl { white-space:normal; } }
.tms-svc .nw { white-space:nowrap; }
.tms-svc .jr .pill { white-space:nowrap; }