/* ============================================================
   Fleet Driver Network — site styles
   Built on the PawCalculator design system foundations
   (warm cream paper, Fraunces/Manrope/JetBrains type, paper
   shadows, 4px spacing, 10/16/24 radii) but re-pitched for a
   trustworthy logistics brand: electric brand-blue primary,
   clay-orange warm accent, navy dark sections.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Brand blue (from the logo's electric circuit gradient) ---- */
  --blue-50:  #EAF3FF;
  --blue-100: #D3E6FF;
  --blue-200: #AECFFB;
  --blue-300: #76ACF2;
  --blue-400: #3F88E8;
  --blue-500: #2A6FDB;   /* primary */
  --blue-600: #1F57B8;
  --blue-700: #184690;
  --blue-800: #143A74;
  --cyan-400: #36C5F0;   /* circuit highlight, dark sections only */

  /* ---- Clay orange warm accent (design-system clay) ---- */
  --clay-50:  #FDF4EC;
  --clay-100: #FBE5D2;
  --clay-300: #F0A562;
  --clay-500: #D86B1F;
  --clay-600: #B5541A;
  --clay-700: #8C3F14;

  /* ---- Navy (dark sections / footer / from logo bg) ---- */
  --navy-900: #081320;
  --navy-800: #0B1A2B;
  --navy-700: #102439;
  --navy-600: #16314B;
  --navy-500: #1E3E5C;

  /* ---- Warm neutrals (design system) ---- */
  --cream-50:  #FBFAF6;
  --cream-100: #F5F2EA;
  --cream-200: #ECE7DA;
  --cream-300: #D9D2C0;
  --ink-400:   #8C8676;
  --ink-500:   #5E594D;
  --ink-700:   #2F2C25;
  --ink-900:   #15140F;

  /* ---- Semantic ---- */
  --success: #3F7A4D;  --success-bg: #E5F0E7;
  --warning: #B07A1A;  --warning-bg: #FBF1DA;

  /* ---- Roles ---- */
  --bg:            var(--cream-50);
  --bg-alt:        var(--cream-100);
  --surface:       #FFFFFF;
  --surface-sunk:  var(--cream-100);
  --hairline:      var(--cream-200);
  --border:        var(--cream-300);
  --fg:            var(--ink-900);
  --fg-body:       var(--ink-700);
  --fg-muted:      var(--ink-500);
  --fg-faint:      var(--ink-400);
  --primary:       var(--blue-500);
  --primary-hover: var(--blue-600);
  --primary-fg:    #FFFFFF;
  --accent:        var(--clay-500);
  --accent-hover:  var(--clay-600);
  --accent-fg:     #FFFFFF;
  --accent-soft:   var(--clay-50);
  --focus-ring:    var(--blue-300);
  --on-navy:       #EAF1F8;
  --on-navy-muted: #9DB2C9;

  /* ---- Type ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;

  --text-2xs: 11px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px;
  --text-md: 18px; --text-lg: 21px; --text-xl: 26px; --text-2xl: 32px;
  --text-3xl: 40px; --text-4xl: 52px; --text-5xl: 66px; --text-6xl: 82px;

  --tracking-eyebrow: 0.14em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px;

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  --shadow-sm:    0 1px 2px rgba(21,20,15,0.05);
  --shadow-card:  0 1px 2px rgba(21,20,15,0.04), 0 8px 24px -12px rgba(21,20,15,0.10);
  --shadow-pop:   0 4px 12px rgba(21,20,15,0.06), 0 24px 48px -16px rgba(21,20,15,0.18);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1200px;
  --maxw-narrow: 760px;
}

/* ---- Accent variants (Tweaks) ---- */
:root[data-accent="cyan"]   { --accent:#0E94C2; --accent-hover:#0B7BA3; --accent-soft:#E6F6FC; }
:root[data-accent="petrol"] { --accent:#2E6B78; --accent-hover:#235460; --accent-soft:#EEF4F5; }

/* ---- Dark theme ---- */
:root[data-theme="dark"] {
  --bg:            var(--navy-900);
  --bg-alt:        var(--navy-800);
  --surface:       #0F2034;
  --surface-sunk:  #0B1A2B;
  --hairline:      rgba(255,255,255,0.08);
  --border:        rgba(255,255,255,0.14);
  --fg:            #F3F7FC;
  --fg-body:       #C6D4E4;
  --fg-muted:      #8EA3BC;
  --fg-faint:      #6B819B;
  --primary:       var(--blue-400);
  --primary-hover: var(--blue-300);
  --focus-ring:    var(--blue-400);
  --shadow-card:   0 1px 2px rgba(0,0,0,0.3), 0 10px 30px -14px rgba(0,0,0,0.6);
  --shadow-pop:    0 8px 30px -10px rgba(0,0,0,0.7);
}

/* ============================================================ BASE */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--clay-100); color: var(--ink-900); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: var(--maxw-narrow); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.bg-alt { background: var(--bg-alt); }
.bg-navy { background: var(--navy-800); color: var(--on-navy); }
.center { text-align: center; }

/* ============================================================ TYPE */
.eyebrow {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--primary); display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow.on-accent { color: var(--accent); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }

.display {
  font-family: var(--font-display); font-weight: 600; line-height: 1.04;
  letter-spacing: -0.02em; font-variation-settings: "opsz" 144;
  font-size: clamp(38px, 6vw, 66px); color: var(--fg); text-wrap: balance; margin: 0;
}
.h1 { font-family: var(--font-display); font-weight: 600; line-height: 1.08;
  letter-spacing: -0.02em; font-variation-settings:"opsz" 96;
  font-size: clamp(32px, 4.5vw, 52px); color: var(--fg); text-wrap: balance; margin: 0; }
.h2 { font-family: var(--font-display); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.01em; font-variation-settings:"opsz" 72;
  font-size: clamp(27px, 3.4vw, 38px); color: var(--fg); text-wrap: balance; margin: 0; }
.h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-lg);
  line-height: 1.25; color: var(--fg); margin: 0; }
.h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--text-md);
  line-height: 1.3; color: var(--fg); margin: 0; }
.lead { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.55; color: var(--fg-body);
  text-wrap: pretty; margin: 0; }
.muted { color: var(--fg-muted); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.serif-em { font-family: var(--font-display); font-style: italic; font-weight: 500; }

.section-head { max-width: 680px; }
.section-head.center { margin: 0 auto; }
.section-head .h2 { margin-top: 14px; }
.section-head p { margin: 14px 0 0; }

/* ============================================================ BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-sm);
  height: 52px; padding: 0 26px; border-radius: var(--r-md); cursor: pointer;
  border: 1px solid transparent; transition: background var(--ease-out) .2s,
    transform .12s var(--ease-out), box-shadow .2s var(--ease-out); white-space: nowrap;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn-accent { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--accent-hover); }
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-outline { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-outline:hover { background: var(--bg-alt); }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: var(--bg-alt); }
.btn-on-navy { background: rgba(255,255,255,0.08); color: var(--on-navy); border-color: rgba(255,255,255,0.16); }
.btn-on-navy:hover { background: rgba(255,255,255,0.14); }
.btn-sm { height: 42px; padding: 0 18px; font-size: var(--text-sm); }
.btn-lg { height: 58px; padding: 0 32px; font-size: var(--text-md); }
.btn-block { width: 100%; }

/* ============================================================ NAV */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  background-image: url('fleetdriver-icon.jpg'); background-size: cover; background-position: center;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(255,255,255,0.08); overflow: hidden;
}
.brand-mark svg { display: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text b { font-family: var(--font-display); font-weight: 600; font-size: 18px;
  color: var(--fg); letter-spacing: -0.01em; white-space: nowrap; }
.brand-text { white-space: nowrap; }
.brand-text span { font-size: 9.5px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--primary); margin-top: 3px; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-links a {
  font-size: var(--text-sm); font-weight: 600; color: var(--fg-body);
  padding: 9px 13px; border-radius: var(--r-sm); position: relative;
}
.nav-links a:hover { color: var(--fg); background: var(--bg-alt); text-decoration: none; }
.nav-links a.active { color: var(--primary); }
.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-toggle { display: none; background: none; border: 1px solid var(--border);
  border-radius: var(--r-sm); width: 42px; height: 42px; cursor: pointer; color: var(--fg); }
.nav-toggle svg { width: 22px; height: 22px; margin: 0 auto; }
.mobile-menu { display: none; }

@media (max-width: 940px) {
  .nav-links, .nav-cta .btn:not(.nav-apply) { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .mobile-menu { display: none; flex-direction: column; padding: 12px 24px 22px;
    border-bottom: 1px solid var(--hairline); background: var(--bg); gap: 2px; }
  .mobile-menu.open { display: flex; }
  .mobile-menu a { padding: 13px 12px; font-weight: 600; color: var(--fg); border-radius: var(--r-sm); }
  .mobile-menu a:hover { background: var(--bg-alt); text-decoration: none; }
  .mobile-menu .btn { margin-top: 10px; }
}

/* ============================================================ FOOTER */
.footer { background: var(--navy-900); color: var(--on-navy-muted); padding: 72px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer .brand-text b { color: #fff; }
.footer-blurb { margin: 18px 0 0; max-width: 300px; font-size: var(--text-sm); line-height: 1.6; color: var(--on-navy-muted); }
.footer-col h5 { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.footer-col a { display: block; color: var(--on-navy-muted); font-size: var(--text-sm);
  padding: 6px 0; }
.footer-col a:hover { color: #fff; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);
  font-size: var(--text-xs); color: var(--on-navy-muted); flex-wrap: wrap; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,0.06); color: #fff; }
.footer-social a:hover { background: rgba(255,255,255,0.14); text-decoration: none; }
.footer-social svg { width: 18px; height: 18px; }
@media (max-width: 800px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }

/* ============================================================ CARDS / CHIPS */
.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); padding: 28px; }
.card-hover { transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
  border-radius: var(--r-pill); background: var(--bg-alt); border: 1px solid var(--hairline);
  font-size: var(--text-xs); font-weight: 600; color: var(--fg-body); }
.chip svg { width: 14px; height: 14px; }
.tag { display: inline-flex; align-items: center; height: 26px; padding: 0 11px; border-radius: var(--r-pill);
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.tag-blue { background: var(--blue-50); color: var(--blue-700); }
.tag-clay { background: var(--clay-50); color: var(--clay-700); }
.tag-green { background: var(--success-bg); color: var(--success); }

.icon-tile { width: 50px; height: 50px; border-radius: var(--r-md); display: grid; place-items: center;
  flex-shrink: 0; background: var(--blue-50); color: var(--primary); border: 1px solid var(--blue-100); }
.icon-tile svg { width: 24px; height: 24px; }
.icon-tile.clay { background: var(--clay-50); color: var(--clay-600); border-color: var(--clay-100); }
:root[data-theme="dark"] .icon-tile { background: rgba(63,136,232,0.14); border-color: rgba(63,136,232,0.25); }
:root[data-theme="dark"] .icon-tile.clay { background: rgba(216,107,31,0.15); border-color: rgba(216,107,31,0.28); }

/* reveal on scroll — content is ALWAYS visible; the .in class adds a
   transform-only slide that's purely decorative. If the animation never
   runs (paused embedded viewers, etc.) content is still fully visible. */
.reveal { opacity: 1; }
.reveal.in { animation: revealIn .55s var(--ease-out) both; }
@keyframes revealIn { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal.in { animation: none; } }

/* Safety: any inline icon SVG without an explicit size stays small.
   Prevents a stray unsized <svg> from blowing up to full container width. */
svg:not([width]):not([height]) { max-width: 1.25em; max-height: 1.25em; }
.post .read svg, .hero-meta svg, .split-list svg, .map-states .pin svg,
.contact-item .ico svg, .chip svg, .tag svg, .breadcrumb svg,
.faq-q .ic svg, .footer-social svg, .logo-item svg { width: 1em; height: 1em; flex-shrink: 0; }
.post .read svg { width: 16px; height: 16px; }