/* Quick Forward identity. Presentation only; legacy selectors keep their behavior. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --qfl-deep: #123d79;
  --qfl-blue: #225db5;
  --qfl-orange: #ff9b2f;
  --navy-900: #15365f;
  --navy-800: #234e84;
  --navy-700: #3568a9;
  --navy-500: #667f9e;
  --navy-200: #e5eefb;
  --navy-dark: #15365f;
  --navy: #234e84;
  --orange: #ff9b2f;
  --orange-600: #ae4b0c;
  --orange-500: #f58b25;
  --orange-400: #ffc176;
  --orange-tint: #fff1e0;
  --paper: #fff;
  --paper-2: #f1f6fd;
  --card: #fff;
  --line: #dce5f1;
  --line-strong: #a9bed9;
  --ink: #19395f;
  --ink-soft: #4c6380;
  --ink-faint: #61738b;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Inter', 'Segoe UI', sans-serif;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 12px;
  --shadow-sm: 0 2px 8px rgb(18 61 121 / 5%);
  --shadow-md: 0 10px 30px rgb(18 61 121 / 8%);
  --shadow-lg: 0 20px 50px rgb(18 61 121 / 15%);
}

body { font-family: var(--body); color: var(--ink); background: var(--paper); }
h1, h2, h3, h4, .hq-form-header h3, .qc-title, .faq-q, .stat .num, .stat-cell b {
  font-family: var(--display); font-weight: 600; letter-spacing: .005em;
}
button, input, select, textarea, .btn, .svc-cta { font-family: var(--body); }
h1, h2 { line-height: 1.06; }
.eyebrow, .qfl-eyebrow, .qfl-video-kicker { letter-spacing: .14em; font-weight: 700; }
.eyebrow::before, .qfl-eyebrow::before, .qfl-video-kicker::before {
  width: 24px; height: 4px; background: currentColor; transform: skewX(-25deg);
}

/* A clean white masthead, without changing its positioning or menus. */
.site-header, .site-header.scrolled {
  background: #fff !important; border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 18px rgb(18 61 121 / 5%); backdrop-filter: none;
}
.site-header .nav-links > a, .site-header .nav-dd-trigger { color: var(--ink) !important; }
.site-header .nav-links > a:hover, .site-header .nav-dd-trigger:hover { color: var(--qfl-blue) !important; }
.site-header .brand-logo-card { background: transparent; box-shadow: none; border-color: transparent; }
.site-header .brand, .site-header .brand-logo-card, .site-header .qf-logo-svg,
.site-header:not(.scrolled) .brand, .site-header:not(.scrolled) .brand-logo-card,
.site-header:not(.scrolled) .qf-logo-svg { color: #0a1f44 !important; }
.site-header .nav-toggle, .site-header:not(.scrolled) .nav-toggle {
  background: #edf4ff !important; color: var(--qfl-deep) !important;
  border: 1px solid #bed0e9 !important; border-radius: 6px;
}
.site-header .nav-toggle svg { color: var(--qfl-deep) !important; stroke: currentColor !important; }
.topbar { background: var(--qfl-deep); }
.topbar .md { background: var(--qfl-orange); }
.nav-dd-panel, .mobile-menu { background: #fff; border-color: var(--line); border-radius: 8px; }
.nav-dd-panel a:hover, .mobile-menu a:hover { background: #edf4ff; color: var(--qfl-blue); }
.nav-dd-col h4, .svc-dd-flag { color: var(--qfl-blue); }

/* Rectangular controls distinguish the brand while keeping all hit areas. */
.btn, .svc-cta, .hq-submit, .hq-btn-submit, .qc-submit, .hero-track-card button {
  border-radius: 6px; font-weight: 700; letter-spacing: 0;
}
.btn-primary, .btn-call, .hq-submit, .hq-btn-submit, .qc-submit, .svc-cta.primary {
  background: var(--qfl-orange); color: #14345a; border-color: var(--qfl-orange);
  box-shadow: 0 5px 14px rgb(191 91 15 / 14%);
}
.btn-primary:hover, .btn-call:hover, .hq-submit:hover, .hq-btn-submit:hover, .qc-submit:hover, .svc-cta.primary:hover {
  background: var(--qfl-deep); color: #fff; border-color: var(--qfl-deep);
  box-shadow: 0 8px 20px rgb(18 61 121 / 18%);
}
.btn-wa, .svc-cta.success { box-shadow: none; }
.btn-lg:hover { box-shadow: 0 8px 20px rgb(18 61 121 / 18%); }
.mobile-bar { background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -3px 18px rgb(18 61 121 / 5%); }
:where(a, button, input, select, textarea):focus-visible { outline: 3px solid #347bdf; outline-offset: 3px; }

/* The existing cargo photograph is restored from its correct asset path. */
.qfl-hero { background: #e6effd; color: var(--ink); padding-top: 135px; }
.qfl-hero-bg {
  background-image: url('https://www.quickforwardlogistics.com/images/hero-cargo-logistics.png');
  background-size: cover; background-position: center; animation: qflBrandDrift 22s ease-in-out infinite alternate;
}
.qfl-hero-grid { padding-top: 42px; }
.hq-btn-submit { font-family: var(--body); }
.qfl-hero-shade {
  background: linear-gradient(90deg, rgb(236 244 255 / 97%) 0%, rgb(230 240 255 / 92%) 38%, rgb(203 223 250 / 45%) 66%, rgb(22 62 115 / 10%) 100%);
}
.qfl-hero-copy h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(50px, 5.9vw, 84px); line-height: 1.01;
  letter-spacing: .005em; max-width: 720px; color: #123e79;
}
.qfl-eyebrow { color: #a9430a; }
.qfl-lead { color: #304f73; }
.qfl-carrier-bar { color: #24496d; border-color: rgb(36 73 109 / 20%); }
.qfl-carrier-bar > span { background: rgb(239 246 255 / 85%); padding: 4px 7px; border-radius: 3px; }
.qfl-hero .qfl-actions .btn-primary {
  background: var(--qfl-orange); color: #14345a; border-color: var(--qfl-orange); box-shadow: none;
}
.qfl-hero .qfl-actions .btn-primary:hover { background: #ffb75c; }
.qfl-hero .qfl-actions .btn-outline { color: #123e79 !important; border-color: #315d91 !important; background: rgb(255 255 255 / 55%); }
.qfl-offers span { background: rgb(255 255 255 / 80%); color: #214267; border-color: #a3bcdc; border-radius: 4px; }
.qfl-offers strong { color: #123e79; }
.qfl-offers .qfl-offer-hot { border-color: #e88c39; background: #fff0dc; }
.qfl-offers .qfl-offer-hot strong { color: #9b4209; }
.qfl-proof-carriers .qfl-pc-label { color: #345578; }
.qfl-proof-carriers b, .qfl-carrier-bar b { border-radius: 4px; background: #183b69; }
.qfl-hero-form, .hero-quote-card, .quote-card {
  border-radius: 10px; border: 1px solid var(--line); border-top: 4px solid var(--qfl-orange);
  background: #fff; box-shadow: var(--shadow-lg);
}
.qfl-hero-form { border-top-color: var(--qfl-orange); }
.qfl-hero-form .hq-form-header h3 { font-family: var(--display); color: var(--ink); font-size: 30px; }
.hq-form input, .hq-form select, .quote-card input, .quote-card select, .quote-card textarea {
  border-radius: 5px; border-color: #c8d6e8; background: #f9fbff;
}

/* The same identity carries through existing service, city and article pages. */
.hero, .page-hero, .svc-hero-page, .express-hero-page {
  background: linear-gradient(115deg, #174b90 0%, #3375be 100%) !important;
}
.hero::before, .page-hero::before, .svc-hero-page::before, .express-hero-page::before {
  background-image: linear-gradient(125deg, transparent 46%, rgb(255 193 118 / 8%) 46%, rgb(255 193 118 / 8%) 47%, transparent 47%);
  background-size: 140px 140px;
}
.hero h1, .svc-hero-copy h1, .express-hero-copy h1, .page-hero h1 { letter-spacing: .005em; line-height: 1.06; }
.hero h1 .accent { color: #ffd39d; }
.qfl-video-section, .tint { background: #f0f6ff; }
.qfl-video-kicker { color: #ae4b0c; }
.qfl-video-grid h2 { color: var(--ink); letter-spacing: .005em; }
.qfl-video-frame { border-radius: 8px; box-shadow: var(--shadow-lg); border-bottom: 4px solid var(--qfl-orange); }
.svc-card, .feat, .tst, .blog-card, .carrier, .city-card, .intent-card, .region-card {
  border-radius: 8px; border-color: var(--line); box-shadow: var(--shadow-sm);
}
.svc-card::before { background: var(--qfl-orange); height: 3px; }
.svc-card:hover, .blog-card:hover { border-color: #89b0e4; box-shadow: var(--shadow-md); }
.svc-ic, .svc-ico, .feat .fi, .contact-info .ci-ic, .svc-detail .ic {
  border-radius: 5px; background: #fff0dc; color: #ae4b0c;
}
.svc-link { color: var(--qfl-blue); }
.stat-strip { border-radius: 8px; border-color: var(--line); box-shadow: var(--shadow-sm); }
.stat-cell b { color: var(--qfl-blue); }
.dark, .world { background: var(--qfl-deep); }
.step .sn { font-family: var(--display); border-radius: 5px; background: var(--qfl-blue); color: #fff; box-shadow: none; }
.dark .step .sn { background: var(--qfl-orange); color: #15365f; }
.cta-band, .promo-band {
  background: linear-gradient(115deg, #174b90, #3375be); border-radius: 10px;
  box-shadow: none; border-top: 4px solid var(--qfl-orange);
}
.cta-band .btn-primary { background: var(--qfl-orange); color: #15365f; border-color: var(--qfl-orange); }
.site-footer { background-color: #163b6c !important; border-top: 4px solid var(--qfl-orange); }
.site-footer h4 { font-family: var(--body); }
.site-footer a:hover { color: #ffd39d !important; }

@media (max-width: 760px) {
  .qfl-hero { padding-top: 115px; }
  .qfl-hero-grid { padding-top: 28px; }
  .qfl-hero-bg { background-size: auto 950px; background-position: 65% 100px; background-repeat: no-repeat; }
  .qfl-hero-shade { background: linear-gradient(180deg, rgb(237 245 255 / 95%) 0%, rgb(226 238 255 / 87%) 50%, rgb(234 243 255 / 95%) 100%); }
  .qfl-hero-copy h1 { font-size: clamp(43px, 11.5vw, 65px); }
}
@keyframes qflBrandDrift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .qfl-hero-bg { animation: none; }
  .btn, .svc-card, .blog-card { transition: none; }
}