/* ==========================================================================
Pace Logistic Services — style.css (single stylesheet for ALL pages)
--------------------------------------------------------------------------
TABLE OF CONTENTS
01. Design tokens (CSS variables)
02. Base & accessibility
03. Typography helpers
04. Buttons
05. Header (sticky)
06. Shared components (panels, CTA banner, footer, hover-lift, sections)
07. HOME page sections
(future pages: append their section styles below HOME,
and put their responsive rules inside the media blocks in 08)
08. MEDIA QUERIES — one block per breakpoint, never repeated
==========================================================================*/


/* ==========================================================================
01. DESIGN TOKENS — extracted from Figma "Pace Logistic Services"
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
/* Brand colors */
--pd-navy-900: #070d1c;
--pd-navy-800: #0b1326;
--pd-navy-700: #0d1836;
--pd-navy-600: #111b31;
--pd-navy-500: #17223d;
--pd-heading: #172033;
--pd-body: #5f6d86;
--pd-muted: #797979;
--pd-muted-blue: #8e9bb4;

/* Accent / gradient */
--pd-accent: #ee500d;
--pd-gradient-start: #ef5b07;
--pd-gradient-end: #ee2c24;
--pd-gradient: linear-gradient(90deg, var(--pd-gradient-start) 0%, var(--pd-gradient-end) 100%);
--pd-icon-gold: #f6a313;

/* Surfaces */
--pd-bg-page: #f6f7f9;
--pd-bg-soft: #eff3ff;
--pd-border-light: #eff1f5;
--pd-divider: #c5cce2;
--pd-step-number: #d4dfff;
--pd-white: #ffffff;

/* FAQ */
--pd-faq-title: #1b1139;
--pd-faq-body: #363049;

/* Typography */
--pd-font-heading: "DM Sans", system-ui, sans-serif;
--pd-font-body: "Inter", system-ui, sans-serif;
--pd-fs-display: 50px;
--pd-fs-subhead: 25px;
--pd-fs-body: 18px;
--pd-fs-small: 14px;
--pd-fs-card-title: 17px;
--pd-fs-card-body: 13px;
--pd-fs-metric: 50px;
--pd-fs-step-number: 44px;
--pd-lh-body: 25px;
--pd-lh-tight: 1.2;
--pd-lh-card: 1.45;
--pd-fw-regular: 400;
--pd-fw-semibold: 600;
--pd-fw-bold: 700;
--pd-fw-extrabold: 800;

/* Spacing */
--pd-space-1: 5px;
--pd-space-2: 10px;
--pd-space-3: 15px;
--pd-space-4: 20px;
--pd-space-5: 28px;
--pd-space-6: 34px;
--pd-space-7: 50px;
--pd-space-8: 65px;
--pd-space-9: 90px;
--pd-section-y: 90px;

/* Radii */
--pd-radius-sm: 4px;
--pd-radius: 5px;
--pd-radius-md: 7px;
--pd-radius-lg: 10px;
--pd-radius-xl: 15px;

/* Shadows */
--pd-shadow-band: 5px 5px 14.35px rgba(0, 0, 0, 0.1);
--pd-shadow-card: 0 24.5px 32.7px -14.7px rgba(149, 149, 149, 0.25);
--pd-shadow-hover: 0 16px 34px rgba(11, 19, 38, 0.14);
--pd-shadow-btn: 0 10px 22px rgba(238, 44, 36, 0.32);
--pd-shadow-header: 0 6px 24px rgba(7, 13, 28, 0.35);

/* Motion */
--pd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--pd-speed: 0.3s;

/* Layout */
--pd-container-max: 1130px;
--pd-header-h: 113px; /* sticky header height (34px offset + 45px bar + padding) */
}


/* ==========================================================================
02. BASE & ACCESSIBILITY
========================================================================== */
html {
scroll-behavior: smooth;
}

body {
font-family: var(--pd-font-body);
font-size: var(--pd-fs-body);
font-weight: var(--pd-fw-regular);
line-height: var(--pd-lh-body);
color: var(--pd-body);
background-color: var(--pd-white);
-webkit-font-smoothing: antialiased;
}
body[data-page="home"]{
background-color: var(--pd-bg-page);
}
img {
max-width: 100%;
height: auto;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--pd-accent);
outline-offset: 2px;
border-radius: var(--pd-radius-sm);
}

.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 2000;
padding: 10px 18px;
background: var(--pd-navy-800);
color: var(--pd-white);
border-radius: 0 0 var(--pd-radius) 0;
}
.skip-link:focus {
left: 0;
color: var(--pd-white);
}
.site-footer .container, .site-header nav.navbar {
max-width: 100%;
padding-inline: 40px;
}

/* ==========================================================================
03. TYPOGRAPHY HELPERS
========================================================================== */
.pd-display {
font-family: var(--pd-font-heading);
font-weight: var(--pd-fw-extrabold);
font-size: clamp(34px, 4vw, var(--pd-fs-display));
line-height: 1.3;
color: var(--pd-heading);
}
.pd-display--white { color: var(--pd-white); }
.pd-display--ink { color: var(--pd-navy-900); }

.pd-subhead {
font-family: var(--pd-font-heading);
font-weight: var(--pd-fw-semibold);
font-size: var(--pd-fs-subhead);
line-height: 1.2;
}

.pd-kicker {
font-size: var(--pd-fs-small);
text-transform: uppercase;
color: var(--pd-accent);
margin-bottom: var(--pd-space-3);
}

.pd-lead {
font-size: var(--pd-fs-body);
line-height: var(--pd-lh-body);
}

.pd-gradient-text {
background: var(--pd-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.my-120{
margin-block: 120px;
}
.mb-120{
margin-bottom: 120px; 
}

/* ==========================================================================
04. BUTTONS
========================================================================== */
.btn-pd {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 12px;
font-size: var(--pd-fs-body);
line-height: var(--pd-lh-body);
border-radius: var(--pd-radius);
text-decoration: none;
transition: transform var(--pd-speed) var(--pd-ease),
box-shadow var(--pd-speed) var(--pd-ease),
background-color var(--pd-speed) var(--pd-ease),
background-position var(--pd-speed) var(--pd-ease),
color var(--pd-speed) var(--pd-ease);
}

.btn-pd--gradient {
color: var(--pd-white);
background-image: var(--pd-gradient);
background-size: 150% 100%;
background-position: 0% 0;
border: 0;
}
.btn-pd--gradient:hover,
.btn-pd--gradient:focus-visible {
color: var(--pd-white);
background-position: 100% 0;
transform: translateY(-2px);
box-shadow: var(--pd-shadow-btn);
}
.btn-pd--gradient:active {
transform: translateY(0);
box-shadow: none;
}

.btn-pd--sm {
font-size: var(--pd-fs-small);
padding: 10px;
}

.btn-pd--outline-light {
color: var(--pd-white);
border: 1px solid var(--pd-white);
border-radius: var(--pd-radius-sm);
background: transparent;
}
.btn-pd--outline-light:hover,
.btn-pd--outline-light:focus-visible {
color: var(--pd-navy-800);
background: var(--pd-white);
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(255, 255, 255, 0.18);
}


/* ==========================================================================
05. HEADER — sticky
Transparent over the hero; once the page scrolls, .site-header--scrolled
(added by js/main.js) gives it a solid navy background and shadow.
========================================================================== */
.site-header {
position: fixed;
inset: 0 0 auto 0;
z-index: 1030;
padding-block: 34px;
background: transparent;
transition: background-color var(--pd-speed) var(--pd-ease),
padding var(--pd-speed) var(--pd-ease),
box-shadow var(--pd-speed) var(--pd-ease);
}

.site-header--scrolled {
padding-block: 12px;
background: rgba(11, 19, 38, 0.96); /* --pd-navy-800 */
box-shadow: var(--pd-shadow-header);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}

.site-header .navbar {
--bs-navbar-padding-y: 0;
}

.site-header__logo img {
width: 136px;
height: 41px;
object-fit: contain;
object-position: left;
}

.site-header__nav .nav-link {
position: relative;
color: var(--pd-white);
font-size: var(--pd-fs-body);
font-weight: 400;
line-height: var(--pd-lh-body);
padding: 0.25rem 0;
margin-inline: clamp(12px, 2.5vw, 22px);
}
.site-header__nav .nav-link::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 100%;
height: 2px;
background: var(--pd-gradient);
border-radius: 2px;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--pd-speed) var(--pd-ease);
}
.site-header__nav .nav-link:hover::after,
.site-header__nav .nav-link:focus-visible::after,
.site-header__nav .nav-link.active::after {
transform: scaleX(1);
}
.site-header__nav .nav-link:hover,
.site-header__nav .nav-link:focus-visible,
.site-header__nav .nav-link.active {
color: var(--pd-white);
}

.site-header .navbar-toggler {
border-color: rgba(255, 255, 255, 0.55);
}
.site-header .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Pages without a dark hero behind the header (e.g. inner pages) can set
<body data-header="solid"> to force the navy background from the start. */
body[data-header="solid"] .site-header {
position: sticky;
top: 0;
background: var(--pd-navy-800);
}


/* ==========================================================================
06. SHARED COMPONENTS
========================================================================== */

/* Dark rounded panel (audience, pricing, CTA banner) */
.pd-panel {
background: var(--pd-navy-800);
border: 1px solid var(--pd-border-light);
border-radius: var(--pd-radius-xl);
color: var(--pd-white);
}

/* CTA banner — repeats on multiple pages */
.cta-banner {
position: relative;
padding: 60px 55px 59px;
overflow: visible;
}
.cta-banner__title { max-width: 562px; }
.cta-banner__copy {
max-width: 562px;
color: var(--pd-white);
margin: 0;
}
.cta-banner__truck {
position: absolute;
right: -60px;
bottom: -18px;
width: min(541px, 46%);
filter: drop-shadow(0 24px 40px rgba(7, 13, 28, 0.35));
transition: transform 0.5s var(--pd-ease);
}
.cta-banner:hover .cta-banner__truck {
transform: translateX(-8px);
}

/* Footer */
.site-footer {
background: var(--pd-navy-700);
color: var(--pd-white);
padding: 54px 0;
font-size: var(--pd-fs-small);
}
.site-footer__logo img {
width: 164px;
object-fit: contain;
}
.site-footer__tagline {
max-width: 280px;
margin: 28px 0 0;
}
.site-footer__heading {
font-size: var(--pd-fs-body);
margin-bottom: 28px;
color: var(--pd-white);
}
.site-footer__list {
list-style: none;
margin: 0;
padding: 0;
font-style: normal;
}
.site-footer__list li { line-height: var(--pd-lh-body); }
.site-footer__list a {
color: var(--pd-white);
text-decoration: none;
transition: color var(--pd-speed) var(--pd-ease);
}
.site-footer__list a:hover,
.site-footer__list a:focus-visible {
color: var(--pd-accent);
}
.site-footer__bar {
margin-top: 28px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
}
.site-footer__copyright {
color: #9dafc0;
margin: 0;
}
.site-footer__social {
display: flex;
gap: 30px;
list-style: none;
margin: 0;
padding: 0;
}
.site-footer__social a {
color: var(--pd-white);
opacity: 0.8;
font-size: 15px;
display: inline-block;
transition: opacity var(--pd-speed) var(--pd-ease),
transform var(--pd-speed) var(--pd-ease),
color var(--pd-speed) var(--pd-ease);
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
opacity: 1;
color: var(--pd-accent);
transform: translateY(-3px);
}

/* Generic card hover (services, future pages) */
.pd-hover-lift {
transition: transform var(--pd-speed) var(--pd-ease),
box-shadow var(--pd-speed) var(--pd-ease);
}
.pd-hover-lift:hover {
transform: translateY(-6px);
box-shadow: var(--pd-shadow-hover);
}

/* Section rhythm */
.pd-section {
padding-block: var(--pd-section-y);
}


/* ==========================================================================
07. HOME PAGE SECTIONS
========================================================================== */

/* --- Hero --- */
.hero {
position: relative;
min-height: 989px;
display: flex;
align-items: flex-start;
background: var(--pd-navy-800) url("../images/hero-bg.jpg") center center / cover no-repeat;
overflow: hidden;
}
.hero__content {
position: relative;
z-index: 2;
padding-top: 360px;
max-width: 530px;
}
.hero__title { margin-bottom: 18px; }
.hero__actions {
display: flex;
gap: 28px;
flex-wrap: wrap;
}

/* --- Metrics band --- */
.metrics {
position: relative;
z-index: 5;
margin-top: -108px;
background: var(--pd-bg-soft);
border-radius: var(--pd-radius-lg);
box-shadow: var(--pd-shadow-band);
padding: 32px 84px;
}
.metrics__grid {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.metrics__item {
text-align: center;
color: #000;
flex: 1 1 0;
padding-block: 25px;
}
.metrics__value {
font-family: var(--pd-font-heading);
font-weight: var(--pd-fw-extrabold);
font-size: clamp(36px, 3.6vw, var(--pd-fs-metric));
line-height: 1.2;
margin: 0;
}
.metrics__label {
font-size: var(--pd-fs-body);
margin: 0;
}
.metrics__divider {
width: 1px;
align-self: stretch;
background: var(--pd-divider);
}

/* --- How it works: intro + rolling steps --- */
.steps__intro {
max-width: 560px;
margin-inline: auto;
text-align: center;
}
.steps__intro > * + * { margin-top: 15px; }
.steps__subtitle,
.steps__note {
color: #000;
margin: 0;
}
#how-it-works {
position: relative;
}
.how-work-left {
position: absolute;
bottom: 90px;
left: 0;
}
.step-card {
position: relative;
height: 100%;
background: var(--pd-bg-soft);
border-radius: var(--pd-radius-lg);
padding: 95px 15px 30px;
overflow: hidden;
transition: transform var(--pd-speed) var(--pd-ease),
box-shadow var(--pd-speed) var(--pd-ease),
background-color var(--pd-speed) var(--pd-ease);
}
.step-card__number {
position: absolute;
top: 28px;
right: 20px;
font-weight: var(--pd-fw-bold);
font-size: var(--pd-fs-step-number);
line-height: 1;
color: var(--pd-step-number);
transition: transform var(--pd-speed) var(--pd-ease);
}
.step-card__title {
font-size: var(--pd-fs-body);
color: var(--pd-muted);
margin: 0 0 5px;
transition: color var(--pd-speed) var(--pd-ease);
}
.step-card__body {
font-size: var(--pd-fs-small);
color: var(--pd-muted);
max-width: 250px;
margin: 0;
transition: color var(--pd-speed) var(--pd-ease);
}
.step-card--active,
.step-card:hover,
.step-card:focus-within {
background: var(--pd-navy-700);
transform: translateY(-6px);
box-shadow: var(--pd-shadow-hover);
}
.step-card--active .step-card__title,
.step-card--active .step-card__body,
.step-card:hover .step-card__title,
.step-card:hover .step-card__body,
.step-card:focus-within .step-card__title,
.step-card:focus-within .step-card__body {
color: var(--pd-white);
}
.step-card:hover .step-card__number {
transform: scale(1.12);
}

/* --- Services --- */
.services {
position: relative;
background: var(--pd-bg-soft);
border-block: 1px solid var(--pd-border-light);
padding: 69px 0 0;
overflow: hidden;
}
.services__head {
max-width: 671px;
margin: 0 auto 51px;
text-align: center;
}
.services__head p { margin: 23px 0 0; }
.services .container, .loaded-mile .container{
max-width: 924px;
}
.service-card {
height: 100%;
background: var(--pd-white);
border-radius: var(--pd-radius-lg);
padding: 24px 22px 35px;
}
.service-card__icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
background: var(--pd-navy-800);
color: var(--pd-icon-gold);
border-radius: var(--pd-radius-md);
font-size: 13px;
margin-bottom: 14px;
transition: transform var(--pd-speed) var(--pd-ease),
background var(--pd-speed) var(--pd-ease),
color var(--pd-speed) var(--pd-ease);
}
.service-card:hover .service-card__icon {
background: var(--pd-gradient);
color: var(--pd-white);
transform: rotate(-8deg) scale(1.08);
}
.service-card__title {
font-size: var(--pd-fs-card-title);
font-weight: var(--pd-fw-semibold);
line-height: var(--pd-lh-tight);
color: var(--pd-heading);
margin: 0 0 14px;
}
.service-card__body {
font-size: var(--pd-fs-card-body);
line-height: var(--pd-lh-card);
margin: 0;
}
.services__trucks {
margin-top: 30px;
}

/* --- Audience panel --- */
.audience {
padding: 90px;
}
.audience__tabs {
display: inline-flex;
align-items: center;
gap: 30px;
background: var(--pd-navy-500);
border-radius: var(--pd-radius-sm);
padding: 6px 18px 5px 6px;
border: 0;
}
.audience__tab {
border: 0;
background: transparent;
color: var(--pd-white);
font-size: var(--pd-fs-small);
line-height: var(--pd-lh-body);
padding: 3.5px 10px;
border-radius: var(--pd-radius);
transition: background var(--pd-speed) var(--pd-ease);
}
.audience__tab.active { background: var(--pd-gradient); }
.audience__tab:not(.active):hover { background: rgba(255, 255, 255, 0.08); }

.audience__title {
color: var(--pd-white);
margin: 17px 0;
max-width: 214px;
}

.audience__copy {
color: var(--pd-muted-blue);
line-height: var(--pd-lh-body);
margin-bottom: 24px;
max-width: 330px;
}

.audience__bullet {
display: flex;
align-items: center;
min-height: 56px;
background: var(--pd-navy-600);
border-radius: 8px;
padding: 15px 13px;
color: var(--pd-muted-blue);
margin-bottom: 30px;
transition: color var(--pd-speed) var(--pd-ease),
transform var(--pd-speed) var(--pd-ease),
background var(--pd-speed) var(--pd-ease);
}
.audience__bullet:last-child { margin-bottom: 0; }
.audience__bullet::before {
content: "✦";
margin-right: 10px;
}
.audience__bullet:hover {
color: var(--pd-accent);
background: rgba(238, 80, 13, 0.06);
transform: translateX(6px);
}

/* --- Pricing --- */
.pricing__panel {
border-radius: 0 var(--pd-radius-xl) var(--pd-radius-xl) 0;
padding: 57px 60px 53px 164px;
height: 100%;
}
.pricing__value {
font-family: var(--pd-font-heading);
font-weight: var(--pd-fw-extrabold);
font-size: var(--pd-fs-display);
line-height: 1.2;
}
.pricing__tail { color: var(--pd-bg-page); }
.pricing__copy {
color: var(--pd-bg-page);
max-width: 297px;
margin: 7px 0 28px;
}
.pricing__photo {
border-radius: var(--pd-radius-xl);
overflow: hidden;
height: 412px;
}
.pricing__photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--pd-ease);
}
.pricing__photo:hover img { transform: scale(1.04); }

/* --- Tech / visibility --- */
.always-know .col-md-4 {
width: 30%;
}
.tech__title {
max-width: 534px;
margin-bottom: 65px;
}
.tech-card {
position: relative;
height: 405px;
border-radius: var(--pd-radius-lg);
overflow: hidden;
display: flex;
align-items: flex-end;
padding: 22px 17px;
}
.tech-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--pd-ease);
}
.tech-card:hover .tech-card__img { transform: scale(1.05); }
.tech-card__detail {
position: relative;
width: 100%;
background: rgba(54, 54, 54, 0.2);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: var(--pd-radius-lg);
padding: 20px 14px 18px 28px;
color: var(--pd-white);
transition: background var(--pd-speed) var(--pd-ease);
border: 1px solid #ffffff3d;
}
.tech-card:hover .tech-card__detail { background: rgba(11, 19, 38, 0.55); }
.tech-card__label {
font-size: var(--pd-fs-body);
margin: 0;
font-weight: 400;
}
.tech-card__text {
font-size: var(--pd-fs-small);
margin: 0;
}
.tech__foot {
margin-top: 65px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.tech__copy {
color: var(--pd-navy-900);
max-width: 643px;
margin: 0;
}

/* --- Process --- */
.process {
background: var(--pd-navy-900) url("../images/process-bg.jpg") center / cover no-repeat;
padding: 108px 0;
color: var(--pd-white);
}
.process__inner {
max-width: 518px;
margin-left: auto;
margin-right: clamp(0px, 8vw, 133px);
}
.process__step {
display: flex;
align-items: center;
justify-content: center;
min-height: 64px;
height: 100%;
text-align: center;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--pd-gradient-start);
border-radius: var(--pd-radius-lg);
padding: 7px 15px;
transition: background var(--pd-speed) var(--pd-ease),
transform var(--pd-speed) var(--pd-ease),
box-shadow var(--pd-speed) var(--pd-ease);
}
.process__step:hover {
background: rgba(239, 91, 7, 0.22);
transform: translateY(-4px);
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.35);
}
.process__step p { margin: 0; }

/* --- FAQ --- */
.faq__title {
text-align: center;
color: #000;
margin-bottom: 40px;
}
.faq-card {
background: var(--pd-white);
border: 0;
border-radius: 4.9px;
box-shadow: var(--pd-shadow-card);
margin-bottom: 30px;
border: 1px solid #edededa6;
}
.faq-card__button {
display: flex;
align-items: center;
gap: 20px;
width: 100%;
background: transparent;
border: 0;
text-align: left;
padding:38px 30px;
font-size: var(--pd-fs-body);
line-height: var(--pd-lh-body);
color: var(--pd-faq-title);
opacity: 0.88;
cursor: pointer;
transition: color var(--pd-speed) var(--pd-ease);
}
.faq-card__button:hover { color: var(--pd-accent); }
.faq-card__icon {
position: relative;
flex: 0 0 21px;
height: 21px;
margin-top: 2px;
}
.faq-card__icon::before,
.faq-card__icon::after {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 21px;
height: 3px;
border-radius: 20px;
background: var(--pd-faq-title);
opacity: 0.8;
transition: transform var(--pd-speed) var(--pd-ease),
background var(--pd-speed) var(--pd-ease);
}
.faq-card__icon::after { transform: rotate(90deg); }
.faq-card__button[aria-expanded="true"] .faq-card__icon::before { background: var(--pd-accent); }
.faq-card__button[aria-expanded="true"] .faq-card__icon::after {
transform: rotate(0deg);
background: var(--pd-accent);
}
.faq-card__answer {
padding: 0 38px 38px calc(38px + 21px + 32px);
font-size: var(--pd-fs-small);
line-height: var(--pd-lh-body);
color: var(--pd-faq-body);
opacity: 0.7;
}


/* ==========================================================================
07b. ABOUT PAGE SECTIONS
Shared components reused with NO restyling: header, footer, buttons,
.cta-banner, .metrics (dark via modifier below).
========================================================================== */

/* --- Metrics dark variant (about page) — modifier only --- */
.metrics--dark {
background: var(--pd-navy-700);
margin-top: 0; /* no hero overlap on about — it overlaps the .values band below instead */
}
.metrics--dark .metrics__item { color: var(--pd-white); }
.metrics--dark .metrics__divider { background: var(--pd-white); }

/* --- About hero --- */
.about-hero {
position: relative;
min-height: 850px;
display: flex;
align-items: center;
overflow: hidden;
padding: 140px 0 90px;
background: var(--pd-navy-700) url("../images/about-hero.png") center center / cover no-repeat;
}
.about-hero__content {
position: relative;
z-index: 2;
max-width: 542px;
transform: translateY(22px);
}
.about-hero__copy {
color: var(--pd-white);
margin: 14px 0 50px;
}
.about-hero__truck {
position: absolute;
right: 0;
bottom: 0;
width: min(72%, 1040px);
z-index: 1;
pointer-events: none;
}

/* --- About intro (photo + copy) --- */
.about-intro__photo {
border-radius: var(--pd-radius-xl);
overflow: hidden;
max-height: 529px;
}
.about-intro__photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s var(--pd-ease);
}
.about-intro__photo:hover img { transform: scale(1.04); }

.about-intro__content { max-width: 555px; }
.about-intro__content h2 { margin-bottom: 34px; }
.about-intro__content p {
color: #000;
margin-bottom: 25px;
}

/* --- Values / principles --- */
/* Soft blue full-bleed band; the dark metrics band above overlaps into it
(same overlap pattern as the homepage hero/metrics). */
.values {
background: var(--pd-bg-soft);
margin-top: -103px;   /* pulls the band up behind the metrics' lower half */
padding-top: 200px;   /* 103px overlap + 96px visual gap to the title */
padding-bottom: 120px
}

.values__title {
text-align: center;
margin-bottom: 65px;
}

.value-card {
height: 100%;
min-height: 286px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 16px;
background: #fefefe;
border-radius: var(--pd-radius-lg);
box-shadow: 0 0 17.5px rgba(0, 0, 0, 0.1);
padding: 46px 30px;
}
.value-card__icon {
width: 74px;
height: 74px;
display: grid;
place-items: center;
background: #fef3ef;
border-radius: 50%;
color: var(--pd-accent);
font-size: 30px;
transition: transform var(--pd-speed) var(--pd-ease),
background var(--pd-speed) var(--pd-ease),
color var(--pd-speed) var(--pd-ease);
}
.value-card:hover .value-card__icon {
background: var(--pd-gradient);
color: var(--pd-white);
transform: rotate(-8deg) scale(1.08);
}
.value-card__title {
color: #000;
margin: 0;
font-size: 24px;
}
.value-card__text {
color: #000;
max-width: 240px;
margin: 0;
font-size: 16px;
}
/* --- Team --- */
.team__copy {
color: #000;
margin: 34px 0;
}
.team__lists { margin-bottom: 34px; }
.team__list {
list-style: none;
margin: 0;
padding: 0;
color: #000;
}
.team__list li {
position: relative;
padding-left: 28px;
margin-bottom: 16px;
}
.team__list li::before {
content: "\2714"; /* ✔ */
position: absolute;
left: 0;

}

.team-collage {
display: flex;
gap: 20px;
}
.team-collage__col {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.team-collage__col:last-child { margin-top: 40px; }
.team-collage img {
width: 100%;
border-radius: var(--pd-radius-lg);
object-fit: cover;
transition: transform var(--pd-speed) var(--pd-ease),
box-shadow var(--pd-speed) var(--pd-ease);
}
.team-collage img:hover {
transform: scale(1.03);
box-shadow: var(--pd-shadow-hover);
}
.dispatch-team .row.gx-5 {
margin-inline: calc(-.5 * 1.5rem);
}

/* --- Page hero (dark navy, used by all inner pages) --- */
.page-hero {
position: relative;
min-height: 850px;
display: flex;
align-items: center;
background: var(--pd-navy-700);
overflow: hidden;
padding: 140px 0 90px;
}
.page-hero--short {
min-height: 650px;
align-items: flex-end;
}

.page-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.6;
pointer-events: none;
}
.page-hero__bg--dim { opacity: 0.5; }
.page-hero__bg--blur { filter: blur(12px); transform: scale(1.05); }

.page-hero__content {
position: relative;
z-index: 2;
max-width: 575px;
}
.page-hero__copy {
color: var(--pd-white);
margin: 24px 0 28px;
}

/* --- Detail card (soft blue image card: services details, equipment,
industries) --- */
.detail-card {
height: 100%;
display: flex;
flex-direction: column;
background: var(--pd-bg-soft);
border-radius: var(--pd-radius-lg);
padding: 13px 8px 21px;
transition: transform var(--pd-speed) var(--pd-ease),
box-shadow var(--pd-speed) var(--pd-ease);
}
.detail-card:hover {
transform: translateY(-6px);
box-shadow: var(--pd-shadow-hover);
}
.detail-card__img {
width: 100%;
height: 190px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 24px;
}
.detail-card--photo .detail-card__img {
    height: auto;
    aspect-ratio: 1.55;
}
.detail-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 19px;
padding-inline: 4px;
}
.detail-card__title {
color: #000;
margin: 0;
}
.detail-card__text {
color: #000;
margin: 0;
}
.detail-card__body .btn-pd { margin-top: auto; }

/* --- Check list (✔ items, shared) --- */
.pd-checks {
list-style: none;
margin: 0;
padding: 0;
color: #000;
}
.pd-checks li {
position: relative;
padding-left: 22px;
margin-bottom: 16px;
}
.pd-checks li:last-child { margin-bottom: 0; }
.pd-checks li::before {
content: "\2714";
position: absolute;
left: 0;
}
.pd-checks--sm { font-size: var(--pd-fs-small); }
.pd-checks--sm li { margin-bottom: 12px; }

/* --- Split rows (alternating image/content) --- */
.split__img {
width: 100%;
border-radius: var(--pd-radius-xl);
object-fit: cover;
transition: transform 0.6s var(--pd-ease);
}
.split__img-wrap {
overflow: hidden;
border-radius: var(--pd-radius-xl);
}
.split__img-wrap:hover .split__img { transform: scale(1.04); }
.split__title { margin-bottom: 34px; }
.split__copy {
color: #000;
margin-bottom: 34px;
}
.split .pd-checks { margin-bottom: 34px; }

/* --- Contact form (underline style) --- */
.contact-form label {
display: block;
font-size: var(--pd-fs-small);
color: var(--pd-body);
margin-bottom: 2px;
}
.form-underline {
display: block;
width: 100%;
border: 0;
border-bottom: 1px solid #cacaca;
border-radius: 0;
background: transparent;
padding: 10px 10px 32px;
font-size: var(--pd-fs-body);
line-height: var(--pd-lh-body);
color: #000;
transition: border-color var(--pd-speed) var(--pd-ease);
}
.form-underline::placeholder { color: #000; }
.form-underline:focus {
outline: none;
border-bottom-color: var(--pd-accent);
box-shadow: 0 1px 0 0 var(--pd-accent);
}
textarea.form-underline {
min-height: 146px;
resize: vertical;
padding-bottom: 100px;
}
.form-underline.is-invalid { border-bottom-color: #dc3545; }
.contact-form .invalid-feedback {
display: none;
font-size: var(--pd-fs-small);
color: #dc3545;
margin-top: 6px;
}
.form-underline.is-invalid ~ .invalid-feedback { display: block; }
.contact-form__status { margin-top: 16px; }

/* --- Contact info band --- */
.contact-info {
position: relative;
padding: 65px 0;
background: var(--pd-bg-soft) url("../images/contact-info-bg.png") center / cover no-repeat;
}
.contact-info__title { color: var(--pd-navy-700); }
.contact-info__kicker {
font-size: var(--pd-fs-small);
color: var(--pd-navy-700);
margin-bottom: 25px;
}
.contact-info__card {
padding: 32px;
color: #000;
}
.contact-info__heading {
font-size: var(--pd-fs-body);
font-weight: var(--pd-fw-bold);
margin: 0 0 25px;
}
.contact-info__heading::after {
content: "";
display: block;
width: 27px;
height: 3px;
background: #000;
margin-top: 25px;
transition: width var(--pd-speed) var(--pd-ease),
background var(--pd-speed) var(--pd-ease);
}
.contact-info__card:hover .contact-info__heading::after {
width: 54px;
background: var(--pd-accent);
}
.contact-info__card p { margin-bottom: 25px; }
.contact-info__card a {
color: #000;
text-decoration: none;
transition: color var(--pd-speed) var(--pd-ease);
}
.contact-info__card a:hover { color: var(--pd-accent); }

.page-hero.services-hero{
background: var(--pd-navy-700) url("../images/services-hero.png") center top / cover no-repeat;
}
.page-hero.industries-hero{
background: var(--pd-navy-700) url("../images/industries-hero.png") center top / cover no-repeat;
}
.page-hero.shippers-hero{
background: var(--pd-navy-700) url("../images/sippers-hero.png") center top / cover no-repeat;
}
.page-hero.technology-hero{
background: var(--pd-navy-700) url("../images/technology-hero.png") center top / cover no-repeat;
}
.page-hero.contact-hero{
background: var(--pd-navy-700) url("../images/contact-hero.png") center top / cover no-repeat;
}
.page-hero.load-hero{
background: var(--pd-navy-700) url("../images/load-hero.png") center top / cover no-repeat;
}
.page-hero.dispatch-management-hero{
background: var(--pd-navy-700) url("../images/dispatch-management-hero.png") center top / cover no-repeat;
}
.page-hero.rate-megotiation-hero{
background: var(--pd-navy-700) url("../images/rate-megotiation-hero.png") center top / cover no-repeat;
}
.page-hero.privacy-policy-hero{
background: var(--pd-navy-700) url("../images/privacy-policy.png") center top / cover no-repeat;
}
.page-hero.terms-service-hero{
background: var(--pd-navy-700) url("../images/terms-service-hero.png") center top / cover no-repeat;
}
.page-hero.faq-hero{
background: var(--pd-navy-700) url("../images/faq-hero.png") center top / cover no-repeat;
}
.page-hero.beverage-hero{
background: var(--pd-navy-700) url("../images/food-and-beverage-hero.png") center top / cover no-repeat;
}

/* ==========================================================================
   404 error page
   ========================================================================== */
.error-hero{
position: relative;
display: flex;
align-items: center;
text-align: center;
padding: 170px 0 110px;
background: var(--pd-navy-700) url("../images/load-hero.png") center / cover no-repeat;
overflow: hidden;
}
/* Darken the photo so the headline keeps its contrast. */
.error-hero::before{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7, 13, 28, 0.88) 0%, rgba(7, 13, 28, 0.74) 100%);
}
.error-hero__truck{
position: absolute;
right: -30px;
bottom: -8px;
width: min(430px, 40%);
opacity: 0.35;
z-index: 1;
pointer-events: none;
}
.error-hero__inner{
position: relative;
z-index: 2;
max-width: 760px;
margin: 0 auto;
}
.error-hero__code{
font-family: "DM Sans", sans-serif;
font-weight: 800;
font-size: clamp(104px, 21vw, 240px);
line-height: 0.88;
letter-spacing: -0.04em;
margin: 0 0 6px;
background: var(--pd-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.error-hero__label{
display: inline-block;
color: var(--pd-white);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 7px 18px;
margin-bottom: 26px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 999px;
}
.error-hero__title{
color: var(--pd-white);
margin-bottom: 18px;
}
.error-hero__copy{
color: var(--pd-muted-blue);
max-width: 610px;
margin: 0 auto 34px;
}
.error-hero__actions{
display: flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}

/* Popular-page tiles */
.error-links__card{
display: block;
height: 100%;
padding: 30px 30px 28px;
background: var(--pd-white);
border: 1px solid #edededa6;
border-radius: 8px;
box-shadow: var(--pd-shadow-card);
text-decoration: none;
transition: transform 0.22s ease, border-color 0.22s ease;
}
.error-links__card:hover,
.error-links__card:focus-visible{
transform: translateY(-5px);
border-color: var(--pd-accent);
}
.error-links__icon{
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
margin-bottom: 20px;
border-radius: 50%;
font-size: 20px;
color: var(--pd-accent);
background: rgba(238, 80, 13, 0.1);
transition: background 0.22s ease, color 0.22s ease;
}
.error-links__card:hover .error-links__icon{
background: var(--pd-gradient);
color: var(--pd-white);
}
.error-links__title{
display: block;
color: var(--pd-heading);
font-weight: 700;
font-size: 20px;
margin-bottom: 8px;
}
.error-links__card:hover .error-links__title{
color: var(--pd-accent);
}
.error-links__copy{
color: var(--pd-body);
margin: 0;
}

@media (max-width: 767.98px){
.error-hero{ padding: 130px 0 80px; }
.error-hero__truck{ display: none; }
.error-hero__actions .btn-pd{ width: 100%; }
}
.manufacturing-hero{
background: var(--pd-navy-700) url("../images/manufacturing-hero.png") center top / cover no-repeat;
}
.become-carrier-hero{
background: var(--pd-navy-700) url("../images/become-carrier.png") center top / cover no-repeat;
}
.load-board-hero{
background: var(--pd-navy-700) url("../images/load-board-hero.png") center top / cover no-repeat;
}
.carriers-hero{
background: var(--pd-navy-700) url("../images/carriers-hero.png") center top / cover no-repeat;
}
.retail-logistics-hero{
    background: var(--pd-navy-700) url("../images/retail-logistics-hero.png") center top / cover no-repeat;
}
.automative-hero{
    background: var(--pd-navy-700) url("../images/automative-hero.png") center top / cover no-repeat;
}
.agricultural-hero{
    background: var(--pd-navy-700) url("../images/agricultural-hero.png") center top / cover no-repeat;
}
.carriers-page-hero{
    background: var(--pd-navy-700) url("../images/carriers-page-hero.png") center top / cover no-repeat;
} 
.dry-van-hero{
    background: var(--pd-navy-700) url("../images/dry-van-hero.png") center top / cover no-repeat;
}
.refrigerated-hero{
    background: var(--pd-navy-700) url("../images/refrigerated-hero.png") center top / cover no-repeat; 
}
.flatbed-heavy-haul-hero{
    background: var(--pd-navy-700) url("../images/flatbed-heavy-haul-hero.png") center top / cover no-repeat; 
}
.expedited-freight-hero{
    background: var(--pd-navy-700) url("../images/expedited-freight-hero.png") center top / cover no-repeat; 
}
.cross-border-logistics-hero{
    background: var(--pd-navy-700) url("../images/cross-border-logistics-hero.png") center top / cover no-repeat; 
}
.dispatch-services-hero{
   background: var(--pd-navy-700) url("../images/dispatch-services-hero.png") center top / cover no-repeat; 
}
.eld-hos-compliance-hero{
   background: var(--pd-navy-700) url("../images/eld-hos-compliance-hero.png") center top / cover no-repeat; 
}
.who-we-serve .col-lg-6 {
width: 46%;
} 
.who-we-serve  a.btn-pd {
margin: 0 !important;
}
section#quote {
scroll-margin-top: 100px;
}
.page-hero--short .page-hero__content {
max-width: 730px;
}
.whats-include .col-lg-6:first-child {
width: 45%;
}
.complete-dispatch img {
width: 100%;
}
.complete-dispatch .col-lg-6:first-child {
width: 45%;
}
.section-header-desc {
max-width: 675px;
margin: 25px 0 65px;
}
.privacy-policy {
color: #000;
}
.privacy-policy h2 {
font-size: 25px;
margin: 40px 0 20px;
}


/* ==========================================================================
09. NEW PAGES — Carriers / Blog / Single Blog
========================================================================== */
.band-soft { background: var(--pd-bg-soft); }

/* Numbered feature card grid (Carriers "Why Choose Pace Logistic Services?") */
.feature-card {
position: relative;
height: 100%;
background: var(--pd-bg-soft);
border-radius: var(--pd-radius-lg);
padding: 32px 28px 30px;
overflow: hidden;
transition: transform var(--pd-speed) var(--pd-ease), box-shadow var(--pd-speed) var(--pd-ease);
}
.feature-card:hover {
transform: translateY(-6px);
box-shadow: var(--pd-shadow-hover);
}
.feature-card__number {
display: block;
font-family: var(--pd-font-heading);
font-weight: var(--pd-fw-extrabold);
font-size: 40px;
line-height: 1;
color: var(--pd-step-number);
text-align: right;
margin-bottom: 18px;
}
.feature-card__title {
color: #000;
margin: 0 0 8px;
}
.feature-card__body {
color: var(--pd-body);
font-size: var(--pd-fs-small);
margin: 0;
}
.feature-card--active {
background: var(--pd-navy-700);
}
.feature-card--active .feature-card__number { color: rgba(255,255,255,0.25); }
.feature-card--active .feature-card__title,
.feature-card--active .feature-card__body { color: var(--pd-white); }

/* Equipment icon cards (Carriers "Equipment We Dispatch") */
.equip-card {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
background: var(--pd-bg-soft);
border-radius: var(--pd-radius-lg);
padding: 38px 16px;
text-align: center;
transition: transform var(--pd-speed) var(--pd-ease), box-shadow var(--pd-speed) var(--pd-ease);
gap: 40px;
}
.equip-card:hover {
transform: translateY(-6px);
box-shadow: var(--pd-shadow-hover);
}
.equip-card__icon {
font-size: 36px;
color: var(--pd-navy-700);
}
.equip-card__label {
color: #000;
margin: 0;
}

/* Horizontal blog teaser card (Carriers "Recent Blogs") */
.blog-teaser {
display: flex;
gap: 20px;
align-items: flex-start;
}
.blog-teaser__img {
width: 130px;
height: 110px;
object-fit: cover;
border-radius: var(--pd-radius-md);
flex-shrink: 0;
}
.blog-teaser__title {
color: #000;
margin: 0 0 8px;
}
.blog-teaser__text {
color: var(--pd-body);
font-size: var(--pd-fs-small);
margin: 0;
}
.blog-teaser__link {
color: var(--pd-accent);
font-weight: var(--pd-fw-semibold);
text-decoration: underline;
}
.blog-teaser__link:hover { color: var(--pd-navy-700); }


/* Requirements split image (carriers.html) reuses .split, .split__img, .pd-checks */
.single-blog-mid.w-100 {
margin: 25px 0;
}
.blog-card-item {
padding: 16px;
border-radius: 16px;
}
.blog-card-item .detail-card__img {
height: auto;
border-radius: 16px;
aspect-ratio: 1.35;
}
.blog-card-item .detail-card__body {
gap: 5px;
}
.blog-card-item a.btn-pd {
margin-top: 20px;
}
.blog-date {
font-size: 14px;
margin-bottom: 5px;
display: block;
}
.view-all-full {
margin-top: 65px;
}
.single-blog-inner .container {
max-width: 924px;
}
.upload-field{
min-height:100px;
border-bottom:1px solid #d9d9d9;
}

.upload-field label{
padding: 30px 0;
}

.upload-field label span{
margin-top: 18px;
}

.upload-placeholder{
width:100%;
height:160px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
gap:18px;
cursor:pointer;
margin:0;
}

.upload-placeholder svg{
display:block;
width:54px;
height:54px;
margin:0 auto;
}

.upload-placeholder span{
display:block;
width:100%;
margin:0;
text-align:center;
color:#C8CCD8;
font-size:15px;
line-height:1.6;
}
.carriers-why-choose .row {
max-width: 80%;
}
.carriers-why-choose .row.mt-1 {
margin-left: auto;
}
/*==============================
BLOG HIGHLIGHT SECTION
==============================*/

.blog-highlight-section {
padding: 80px 0;
background: #fff;
}

.blog-highlight-section .blog-highlight-container {
display: grid;
grid-template-columns: 785px 557px;
column-gap: 22px;
align-items: stretch;
justify-content: center;
}


.blog-featured-card {
position: relative;
display: block;
width: 785px;
height: 100%;
border-radius: 12px;
overflow: hidden;
text-decoration: none;
}
.blog-featured-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}

.blog-featured-card:hover img {
transform: scale(1.05);
}

.blog-featured-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(0,0,0,0) 20%,
rgba(0,0,0,.15) 45%,
rgba(0,0,0,.82) 100%
);
}

.blog-featured-overlay {
position: absolute;
left: 30px;
right: 30px;
bottom: 28px;
z-index: 2;
}
.blog-featured-overlay h2 {
margin: 0 0 14px;
color: #fff;
font-size: 25px;
font-weight: 600;
line-height: 1.2;
}

.blog-featured-overlay p {
margin: 0;
color: rgba(255,255,255,.95);
font-size: 18px;
line-height: 1.6;
}

.blog-featured-overlay span {
color: #fff;
font-weight: 600;
}


.blog-sidebar {
width: 557px;
display: flex;
flex-direction: column;
gap: 20px;
}


.blog-small-card {
display: flex;
align-items: center;
gap: 18px;
text-decoration: none;
}

.blog-small-image {
width: 171px;
min-width: 171px;
height: 194px;
border-radius: 12px;
overflow: hidden;
}

.blog-small-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .4s ease;
}

.blog-small-card:hover img {
transform: scale(1.06);
}

.blog-small-content {
flex: 1;
}

.blog-small-content h3 {
margin: 0 0 12px;
color: #111;
font-size: 25px;
font-weight: 600;
line-height: 1.35;
}

.blog-small-content p {
margin: 0;
color: rgb(0, 0, 0);
font-size: 14px;
line-height: 1.7;
}
.blog-small-content span {
color: #111;
font-weight: 600;
}
.equipment-dispatch .col-md-4 {
width: 20%;
}
.recent-blogs .blog-small-content {
flex: unset;
width: 50%;
}
label.upload-label{
color: black;
font-size: 18px;
padding-left: 12px;
}
h2#form-title {
color: #000;
}
.site-header .dropdown-caret-btn {
margin: 0;
color: #fff !important;
box-shadow: none;
}
.site-header .dropdown-caret-btn:after{
display: none;
}
.site-header .dropdown-caret-btn::before {
font-family: "FontAwesome";
content: '\f078';
display: inline-block;
font-size: 12px;
}
.site-header .nav-item.dropdown a.nav-link {
margin-right: 0;
}
















/* ==================Responsive================= */

@media (min-width: 1441px) {
.pricing__photo {
height: 500px;
}
.pricing__panel {
align-content: center;
}
.honest-pricing-section .col-lg-5 {
width: 35%;
}
.site-footer .container, .site-header nav.navbar {
padding-inline: 80px;
}
}

@media (min-width: 1200px) {
.site-header__logo img {
width: 164px;
height: auto;
}
}

@media (max-width: 1440px) {
.container, .container-lg, .container-md, .container-sm, .container-xl {
max-width: 1154px;
}
.faq-card__button {
gap: 24px;
}
.always-know .col-md-4 {
width: 32%;
}
.honest-pricing-section .col-lg-5 {
width: 40%;
}
#how-it-works .row {
justify-content: end !important;
}
.about-hero__content {
transform: translateY(-20px);
}
.blog-highlight-section .blog-highlight-container {
max-width: 100%;
padding: 0 20px;
grid-template-columns: minmax(0, 1fr) 520px;
column-gap: 22px;
}

.blog-featured-card,
.blog-sidebar {
width: 100%;
}
}


@media (max-width: 1280px) {
.honest-pricing-section .col-lg-6 {
width: 54%;
}
.honest-pricing-section .col-lg-5 {
width: 41%;
}
.cta-banner {
width: 98.5%;
}
.cta-banner__truck {
right: -24px;
}
.site-header__nav .nav-link {
margin-inline: clamp(12px, 2.5vw, 14px);
}
.who-we-serve .col-lg-6, .whats-include .col-lg-6:first-child {
width: 49%;
}
form.contact-form .row.g-5 {
margin-inline: -12px;
}
.contact-info__card {
padding: 0;
}
.blog-highlight-section {
padding: 70px 0;
}

.blog-highlight-container {
grid-template-columns: minmax(0, 1fr) 430px;
gap: 20px;
}

.blog-featured-overlay {
left: 24px;
right: 24px;
bottom: 24px;
}

.blog-featured-overlay h2 {
font-size: 22px;
}

.blog-featured-overlay p {
font-size: 16px;
}

.blog-small-image {
width: 150px;
min-width: 150px;
height: 170px;
}
.blog-small-content h3 {
font-size: 21px;
}

}


@media (max-width: 1024px) {
.hero {
min-height: 800px;
}
.site-header__nav .nav-link {
margin-inline: 8px;
}
:root {
--pd-fs-body: 16px;
}
.hero__content {
padding-top: 280px;
max-width: 430px;
}
.how-work-left {
width: 250px;
}
.audience {
padding: 70px;
}
.pricing__panel {
padding: 57px 60px 53px 50px;
}
.pricing__photo {
height: 400px;
}
.honest-pricing-section .col-lg-5 {
width: 44%;
}
.honest-pricing-section .col-lg-6 {
width: 56%;
}
.faq-card__button {
gap: 18px;
padding: 25px;
}
.cta-banner__title, .cta-banner__copy {
max-width: 440px;
}
.site-footer .container, .site-header nav.navbar {
padding-inline: 12px;
}
.metrics {
padding: 32px;
}
.about-hero__content {
transform: translateY(20px);
}
.carriers-why-choose .row {
max-width: 90%;
}
.equipment-dispatch .col-md-4 {
width: 33.3%;
}
.site-footer__logo img {
    width: 120px;
}
}


/* ----- ≤ 991.98px (tablet & below) ---------------------------------------- */
@media (max-width: 991px) {
/* Inner pages: hero */
.page-hero {
min-height: 650px;
padding: 130px 0 60px;
}
.page-hero--short { min-height: 400px; }

/* Inner pages: detail cards & splits */
.detail-card__img { height: 200px; }
.split__title { margin-bottom: 20px; }

/* Contact */
.contact-info { padding: 48px 0; }
.contact-info__card { padding: 24px 0; }
/* About: hero */
.about-hero {
min-height: 600px;
padding: 140px 0 0;
}
.about-hero__content {
transform: translateY(-60px);
max-width: 422px;
}

/* About: intro photo */
.about-intro__photo { max-height: 380px; }

/* About: metrics/values overlap */
.metrics--dark { margin-top: 0; }
.values {
margin-top: -70px;
padding-top: 130px;
}

/* About: team collage */
.team-collage__col:last-child { margin-top: 20px; }

/* Header: mobile collapse panel */
.site-header__collapse {
margin-top: 14px;
padding: 18px;
background: var(--pd-navy-800);
border-radius: var(--pd-radius-lg);
}
.site-header__nav .nav-link {
margin-inline: 0;
padding: 0.5rem 0;
}
.site-header__cta { margin-top: 10px; }

/* CTA banner */
.cta-banner { padding: 40px 28px; }
.cta-banner__truck {
position: static;
width: 100%;
margin-top: 24px;
}

/* Home: hero */
.hero { min-height: 720px; }
.hero__content { padding-top: 240px; }

/* Home: metrics */
.metrics {
padding: 28px 24px;
margin-top: -70px;
}
.metrics__grid {
flex-wrap: wrap;
row-gap: 24px;
}
.metrics__item { flex: 1 1 40%; }
.metrics__divider { display: none; }

/* Home: audience & pricing panels */
.audience { padding: 48px 28px; }
.pricing__panel {
border-radius: var(--pd-radius-xl);
padding: 40px 28px;
}
.pricing__photo {
height: 300px;
margin-top: 20px;
}

/* Home: process */
.process__inner {
margin: 0 0 0 auto;
max-width: 450px;
}
.process__step p {
font-size: 14px;
}
.site-footer__heading {
margin-bottom: 12px;
}
.site-footer__tagline {
margin: 12px 0 0;
}
.site-footer .container, .site-header nav.navbar {
padding-inline: 12px;
}
.how-work-left{
display: none;
}
.honest-pricing-section .col-lg-5, .honest-pricing-section .col-lg-6 {
width: 100%;
}
.honest-pricing-section .ps-0 {
padding-left: calc(var(--bs-gutter-x) * .5) !important;
}
.pricing__copy {
max-width: 100%;
}
.pricing__photo {
height: auto;
}
.always-know .col-md-4 {
width: 33%;
}
.tech-card__detail {
padding: 15px;
}
.tech__foot {
margin-top: 45px;
gap: 15px;
}
.about-intro__content {
max-width: 100%;
}
.metrics.metrics--dark {
margin-top: 0;
}
.who-we-serve .col-lg-6, .whats-include .col-lg-6:first-child {
width: 100%;
}
.whats-include a.btn-pd {
margin-top: 0 !important;
}
.complete-dispatch .col-lg-6:first-child {
width: 100%;
}
.blog-highlight-section .blog-highlight-container {
grid-template-columns: 1fr;
gap: 30px;
padding: 0 20px;
}

.blog-featured-card,
.blog-sidebar {
width: 100%;
}

.blog-featured-card {
height: 500px;
}

.blog-small-card {
align-items: center;
}

.blog-small-image {
width: 180px;
min-width: 180px;
height: 180px;
}

.blog-small-content h3 {
font-size: 18px;
}
body .site-header .nav-item.dropdown
{
flex-wrap: wrap;
}
body .navbar-nav .dropdown-menu {
background: transparent;
margin: 0;
padding: 0;
width: 100%;
}
body .dropdown-item {
color: #ffffff;
font-size: 15px;
}
.site-header .dropdown-caret-btn {
margin-left: 10px !important;
}
}


/* ----- ≤ 767.98px (mobile) -------------------------------------------------- */
@media (max-width: 767px) {
/* Inner pages */
.page-hero { padding: 90px 0; }
textarea.form-underline { padding-bottom: 40px; }
.form-underline { padding-bottom: 18px; }
/* Section rhythm */
.pd-section { padding-block: 56px; }

/* About: values & team */
.values__title { margin-bottom: 35px; }
.value-card { min-height: 0; }
.team__lists .col-sm-6 + .col-sm-6 { margin-top: 0; }

/* Footer alignment */
.site-footer [class^="col"] { text-align: left !important; }
.site-footer__heading {
margin-bottom: 10px;
font-size: 18px;
}

/* Home: tech cards */
.tech-card {
height: 340px;
margin-bottom: 20px;
}

/* Home: FAQ */
.faq-card__button { padding: 15px; }
.faq-card__answer { padding: 0 24px 24px calc(24px + 21px + 15px); }
.site-header {
padding-block: 20px;
}
.hero {
min-height: 700px;
display: flex;
align-items: center;
position: relative;
padding: 90px 0 90px;
}
.hero__content {
padding-top: 0;
}
.mobile-overlay:before {
content: '';
position: absolute;
inset: 0;
background: #000;
opacity: 0.5;
}
.metrics__item {
padding-block: 0;
}
.metrics__value {
font-size: clamp(25px, 3.6vw, var(--pd-fs-metric));
}
:root {
--pd-fs-body: 15px;
}
.step-card {
height: auto;
padding: 30px 15px;
}
.step-card__body {
max-width: 75%;
}
.services {
padding: 60px 0 0;
}
.my-120 {
margin-block: 60px;
}
.mb-120{
margin-bottom: 60px; 
}
.audience {
padding: 45px 25px;
}
.pricing__photo {
margin-top: 0;
}
.process {
padding: 60px 0;
}
.always-know .col-md-4 {
width: 100%;
margin-top: 0;
}
.tech__title {
margin-bottom: 35px;
}
.tech__foot {
margin-top: 15px;
}
.faq-card {
margin-bottom: 20px;
}
.faq-card__icon::before, .faq-card__icon::after {
width: 14px;
height: 2px;
}
.d-flex:has(.btn-pd) {
gap: 10px !important;
}
.site-footer [class^="col"] {
margin-top: 30px !important;
}
.site-footer {
padding-bottom: 20px;
}
.about-hero {
min-height: 650px;
padding: 90px 0 90px;
}
.about-hero__content {
transform: unset;
max-width: 370px;
}
.about-hero__copy {
margin: 14px 0 30px;
}
.about-intro__content h2 {
margin-bottom: 15px;
}
.values {
padding-bottom: 60px;
}
.team__copy {
margin: 20px 0;
}
.team__lists {
margin-bottom: 10px;
}
.pd-display--ink.text-center.mb-5 {
margin-bottom: 20px !important;
}
.detail-card__body .col-6
{
width: 100%;
}
.pd-checks--sm li, .split .pd-checks li {
margin-bottom: 6px !important;
}
.who-we-serve .split .pd-checks {
margin-bottom: 0;
}
.split__copy {
margin-bottom: 20px;
}
.who-we-serve a.btn-pd {
margin-top: 20px !important;
}
.split__title {
margin-bottom: 12px;
}
.one-platform .split .pd-checks, .whats-include .split .pd-checks, .who-we-serve .split .pd-checks {
margin-bottom: 0;
}
.page-hero--short .page-hero__content {
margin-top: 60px;
}
form.contact-form .row.g-5 > * {
margin-top: 25px;
}
form.contact-form .row.g-5 {
margin-inline: calc(-.5 * var(--bs-gutter-x));
--bs-gutter-x: 0;
}   
.contact-info__card {
padding: 10px 0;
}
.complete-dispatch .btn-pd.mt-4 {
margin-top: 10px !important;
}
.privacy-policy h2 {
font-size: 22px;
margin: 30px 0 12px;
}
.related-product .text-center.mx-auto.mb-5 {
margin-bottom: 0 !important;
}
.blog-card-item {
padding: 12px;
}
.view-all-full {
margin-top: 40px;
}
.blog-highlight-section {
padding: 60px 0;
}

.blog-highlight-container {
padding: 0 15px;
}

.blog-featured-card {
height: 380px;
}

.blog-featured-overlay {
left: 20px;
right: 20px;
bottom: 20px;
}

.blog-featured-overlay h2 {
font-size: 20px;
margin-bottom: 10px;
}

.blog-featured-overlay p {
font-size: 14px;
line-height: 1.6;
}

.blog-small-card {
gap: 15px;
}

.blog-small-image {
width: 130px;
min-width: 130px;
height: 130px;
}

.blog-small-content h3 {
font-size: 18px;
margin-bottom: 8px;
}

.blog-small-content p {
font-size: 14px;
line-height: 1.5;
}
.carriers-why-choose .row {
max-width: initial;
}
.carriers-why-choose .row.mt-1 {
margin-left: calc(-.5 * var(--bs-gutter-x));
}
.band-soft  .split .pd-checks {
margin-bottom: 0;
}
.equipment-dispatch .col-md-4 {
width: 50%;
}
.equip-card-img {
height: 40px;
object-fit: contain;
}
.equip-card {
padding: 30px 10px;
gap: 30px;
}
.recent-blogs .blog-small-content {
flex: 1;
width: auto;
}
.site-header .dropdown-caret-btn {
margin-left: 5px !important;
}
}

/* ----- Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}


@media (max-width: 767.98px) {
.blog-card__img { height: 200px; }
.author-card { flex-wrap: wrap; text-align: center; justify-content: center; }
.post-meta { gap: 14px; }
}