/* ============================================================
   JAVELIN DISPATCH LLC — Design System
   Palette: Navy #0A1F44 / Cyan #00C2D1 / White #FFFFFF
   Display: Oswald  |  Body: Inter  |  Utility/mono: Roboto Mono
   Signature element: the "dispatch route line" — a dashed cyan
   route with mile-marker waypoints, used wherever a real sequence
   (steps, lanes, contact points) needs to read as a route.
   ============================================================ */

:root{
  --navy:        #0A1F44;
  --navy-deep:   #061529;
  --navy-soft:   #14315E;
  --cyan:        #00C2D1;
  --cyan-bright: #3FE7E0;
  --ice:         #EAF7F9;
  --white:       #FFFFFF;
  --ink:         #0B1220;
  --slate:       #4A5C77;
  --slate-light: #8496AF;
  --line:        #E1E9F0;

  --font-display: 'Oswald', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Roboto Mono', monospace;

  --container: 1200px;
  --radius: 6px;
  --shadow-sm: 0 2px 10px rgba(10,31,68,0.06);
  --shadow-md: 0 12px 32px rgba(10,31,68,0.12);
  --shadow-lg: 0 24px 60px rgba(10,31,68,0.22);
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; width:100%; overflow-x:hidden; }
body{
  margin:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
body.nav-open{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; letter-spacing:.01em; margin:0 0 .5em; color:var(--navy); text-transform:uppercase; }
p{ margin:0 0 1em; color:var(--slate); }
button{ font-family:inherit; cursor:pointer; }

:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---- Page load + scroll reveal (JS toggles .in-view; CSS handles the motion) ---- */
@keyframes pageFadeIn{ from{ opacity:0; } to{ opacity:1; } }
body{ animation:pageFadeIn .45s ease both; }

.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.9,.32,1), transform .7s cubic-bezier(.22,.9,.32,1);
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-1.in-view{ transition-delay:.08s; }
.reveal-2.in-view{ transition-delay:.16s; }
.reveal-3.in-view{ transition-delay:.24s; }
.reveal-4.in-view{ transition-delay:.32s; }
@media (prefers-reduced-motion: reduce){
  .reveal, body{ opacity:1 !important; transform:none !important; animation:none !important; }
}

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:96px 0; }
.section--tight{ padding:64px 0; }
.section--ice{ background:var(--ice); }
.section--navy{ background:var(--navy); }
.section--navy h2, .section--navy h3{ color:var(--white); }
.section--navy p{ color:#B9C8DD; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--navy); font-weight:600;
  margin-bottom:14px;
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--cyan); display:inline-block; }
.section--navy .eyebrow{ color:var(--cyan-bright); }

.section-head{ max-width:680px; margin-bottom:56px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(28px,3.6vw,42px); }
.section-head p{ font-size:17px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-display); font-weight:500; letter-spacing:.05em;
  text-transform:uppercase; font-size:14px;
  padding:16px 30px; border-radius:var(--radius); border:2px solid transparent;
  transition:transform .22s cubic-bezier(.22,.9,.32,1), box-shadow .22s ease, background .22s ease, color .22s ease, border-color .22s ease;
  white-space:nowrap; will-change:transform;
}
.btn:active{ transform:translateY(0) scale(.97); }
.btn-primary{ background:var(--cyan); color:var(--navy-deep); }
.btn-primary:hover{ background:var(--cyan-bright); transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,194,209,0.38); }
.btn-outline{ border-color:rgba(255,255,255,0.5); color:var(--white); }
.btn-outline:hover{ border-color:var(--cyan-bright); color:var(--cyan-bright); transform:translateY(-2px); box-shadow:0 0 0 4px rgba(63,231,224,0.12); }
.btn-navy{ background:var(--navy); color:var(--white); }
.btn-navy:hover{ background:var(--navy-soft); transform:translateY(-2px); box-shadow:0 14px 32px rgba(10,31,68,0.3); }
.btn-ghost{ border-color:var(--navy); color:var(--navy); }
.btn-ghost:hover{ background:var(--navy); color:var(--white); transform:translateY(-2px); box-shadow:0 10px 24px rgba(10,31,68,0.2); }
.btn-block{ width:100%; }

/* Anchor targets for the Services dropdown links — offsets the jump so
   the sticky header doesn't cover the top of the section. */
#load-booking, #nationwide-freight-coverage{
  scroll-margin-top: calc(var(--header-h) + 20px);
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:1000;
  border-bottom:1px solid var(--line);
  height:var(--header-h);
}
/* The frosted-glass background lives on a pseudo-element, not on
   .site-header itself. backdrop-filter (like transform/filter) makes an
   element a "containing block" for any position:fixed descendant — if it
   sat on .site-header directly, the fixed mobile nav drawer inside it
   would be confined to the header's own 84px box instead of the full
   screen. Keeping the filter off the real element avoids that entirely. */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.site-header .container{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
}
/* min-width:0 lets a flex child shrink below its content size instead of
   forcing siblings to wrap/overlap — this is the fix for the logo/brand
   text colliding with the Call button on narrow screens. */
.brand{ display:flex; align-items:center; gap:12px; min-width:0; flex:1 1 auto; }
.brand img.brand-mark{ height:40px; width:auto; flex:none; }
.brand .brand-text{ display:flex; flex-direction:column; line-height:1.05; min-width:0; overflow:hidden; }
.brand .brand-text strong{
  font-family:var(--font-display); font-size:19px; letter-spacing:.03em;
  color:var(--navy); text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.brand .brand-text span{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em;
  color:var(--cyan); text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.main-nav{ display:flex; align-items:center; gap:8px; flex:none; }
.main-nav a{
  position:relative; font-family:var(--font-display); font-size:14px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--navy-soft);
  padding:10px 16px; border-radius:var(--radius); transition:color .2s ease, background .2s ease;
}
.main-nav a::before{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px;
  background:var(--cyan); transform:scaleX(0); transform-origin:left;
  transition:transform .28s cubic-bezier(.22,.9,.32,1);
}
.main-nav a:hover{ color:var(--navy); background:var(--ice); }
.main-nav a:hover::before{ transform:scaleX(1); }
.main-nav a.active{ color:var(--navy); }
.main-nav a.active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px; background:var(--cyan);
}
/* ---- Services dropdown ---- */
.nav-item{ position:relative; }
.nav-item-row{ display:flex; align-items:center; }
.dropdown-toggle{
  background:none; border:none; cursor:pointer; padding:6px; margin-left:-6px;
  display:flex; align-items:center; justify-content:center; color:var(--navy-soft);
}
.dropdown-toggle svg{ width:11px; height:11px; transition:transform .25s ease; }
.nav-item:hover .dropdown-toggle svg,
.nav-item.open .dropdown-toggle svg{ transform:rotate(180deg); }
.dropdown-menu{
  position:absolute; top:calc(100% + 6px); left:0; min-width:250px;
  background:var(--white); border-radius:var(--radius); box-shadow:var(--shadow-md);
  padding:8px; opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index:1002;
}
.dropdown-menu a{
  display:block; padding:10px 14px; border-radius:4px; font-size:13px; white-space:nowrap;
}
.nav-item:hover .dropdown-menu,
.nav-item.open .dropdown-menu,
.nav-item:focus-within .dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.header-cta{ display:flex; align-items:center; gap:14px; flex:none; }
.header-cta .btn{ padding:13px 22px; }

/* Buttons tucked inside the mobile nav drawer — hidden on desktop where
   the header row already shows Call + Inquire Now directly. */
.nav-mobile-actions{ display:none; }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  background:none; border:none; padding:8px; width:40px; height:40px; flex:none;
}
.nav-toggle span{ width:22px; height:2px; background:var(--navy); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--navy-deep); color:#C6D3E5; padding:72px 0 0; }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,0.09);
}
.footer-brand{ display:flex; gap:16px; }
.footer-mark-wrap{
  flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--white); border-radius:10px; padding:9px 12px; height:fit-content;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
}
.footer-brand img.footer-mark{ height:32px; width:auto; display:block; }
.footer-brand strong{ font-family:var(--font-display); color:var(--white); font-size:18px; letter-spacing:.03em; text-transform:uppercase; display:block; margin-bottom:10px; }
.footer-message{
  writing-mode:vertical-rl; text-orientation:mixed; transform:rotate(180deg);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cyan-bright); border-left:1px solid rgba(255,255,255,0.15); padding-left:14px; margin-left:4px;
  max-height:150px;
}
.footer-col h4{ color:var(--white); font-size:13px; letter-spacing:.14em; margin-bottom:18px; }
.footer-col ul{ display:flex; flex-direction:column; gap:12px; }
.footer-col a{ font-size:14.5px; color:#B9C8DD; transition:color .18s ease; }
.footer-col a:hover{ color:var(--cyan-bright); }
.footer-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding:22px 0; font-family:var(--font-mono); font-size:12px; color:#7C8FAC;
}

/* ============================================================
   FLOATING UI: Inquire Now + Back to Top
   ============================================================ */
.inquire-fab{
  position:fixed; right:0; top:62%; transform:translateY(-50%) rotate(-90deg); transform-origin:right bottom;
  z-index:900;
  background:var(--cyan); color:var(--navy-deep);
  font-family:var(--font-display); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  padding:12px 20px; border-radius:8px 8px 0 0;
  box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:8px;
  transition:background .18s ease, padding .18s ease;
}
.inquire-fab:hover{ background:var(--cyan-bright); padding-right:26px; box-shadow:0 8px 28px rgba(0,194,209,0.45); }

.back-to-top{
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:48px; height:48px; border-radius:50%;
  background:var(--navy); color:var(--white); border:none;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s cubic-bezier(.22,.9,.32,1), background .2s ease, box-shadow .2s ease, visibility .25s ease;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--navy-soft); transform:translateY(-3px); box-shadow:0 10px 26px rgba(10,31,68,0.35); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:center;
  overflow:hidden; background:var(--navy-deep);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(6,21,41,0.94) 15%, rgba(10,31,68,0.72) 50%, rgba(0,194,209,0.28) 100%);
}
.hero-content{ position:relative; z-index:1; padding-top:120px; padding-bottom:100px; }
.hero-content .eyebrow{ color:var(--cyan-bright); }
.hero-content .eyebrow::before{ background:var(--cyan-bright); }
.hero h1{
  color:var(--white); font-size:clamp(38px,6vw,68px); line-height:1.04; max-width:820px; margin-bottom:22px;
}
.hero h1 em{ font-style:normal; color:var(--cyan-bright); }
.hero-lede{ color:#CBD9EA; font-size:18px; max-width:560px; margin-bottom:38px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:64px; }

.hero-route{ display:flex; align-items:center; gap:0; max-width:760px; flex-wrap:wrap; }
.hero-stat{ padding-right:34px; }
.hero-stat b{ display:block; font-family:var(--font-display); font-size:30px; color:var(--white); }
.hero-stat span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan-bright); }
.route-dash{ flex:1; min-width:40px; height:1px; background:repeating-linear-gradient(90deg, rgba(63,231,224,.55) 0 8px, transparent 8px 16px); margin:0 22px; }

/* ============================================================
   HOW IT WORKS — the route
   ============================================================ */
.route{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:12px;
}
.route::before{
  content:""; position:absolute; top:29px; left:8%; right:8%; height:2px;
  background:repeating-linear-gradient(90deg, var(--cyan) 0 10px, transparent 10px 20px);
  z-index:0;
}
.route-stop{ position:relative; z-index:1; }
.route-marker{
  width:60px; height:60px; border-radius:50%; background:var(--navy); color:var(--white);
  display:flex; align-items:center; justify-content:center; margin-bottom:26px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.05em; border:3px solid var(--cyan);
  box-shadow:var(--shadow-sm);
}
.route-stop h3{ font-size:19px; margin-bottom:10px; }
.route-stop p{ font-size:14.5px; margin-bottom:0; }
.route-stop .mm{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--cyan); text-transform:uppercase; margin-bottom:8px; }

/* ============================================================
   CARDS / GRIDS
   ============================================================ */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:34px 30px;
  transition:transform .32s cubic-bezier(.22,.9,.32,1), box-shadow .32s ease, border-color .32s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 20px 44px rgba(10,31,68,0.16), 0 0 0 1px rgba(0,194,209,0.18); border-color:transparent; }
.card:hover .icon{ background:var(--cyan); transform:translateY(-2px) scale(1.05); }
.card:hover .icon svg{ stroke:var(--white); }
.card .icon{
  width:48px; height:48px; border-radius:10px; background:var(--ice); color:var(--navy);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  transition:background .28s ease, transform .28s ease;
}
.card .icon svg{ width:24px; height:24px; stroke:var(--navy); transition:stroke .28s ease; }
.card h3{ font-size:18px; margin-bottom:10px; }
.card p{ font-size:14.5px; margin-bottom:0; }
.card .num{ font-family:var(--font-mono); font-size:12px; color:var(--cyan); letter-spacing:.1em; display:block; margin-bottom:12px; }

/* split section w/ image */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.split-media{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); }
.split-media img{ width:100%; height:100%; object-fit:cover; min-height:380px; transition:transform .6s cubic-bezier(.22,.9,.32,1); }
.split-media:hover img{ transform:scale(1.045); }
.split-media .tag{
  position:absolute; left:20px; bottom:20px; background:rgba(6,21,41,0.85); color:var(--white);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:8px 14px; border-radius:4px; border-left:3px solid var(--cyan);
}

/* stat strip */
.stat-strip{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.12); border-bottom:1px solid rgba(255,255,255,.12); }
.stat-strip div{ padding:34px 20px; text-align:center; border-right:1px solid rgba(255,255,255,.12); }
.stat-strip div:last-child{ border-right:none; }
.stat-strip b{ display:block; font-family:var(--font-display); font-size:34px; color:var(--white); }
.stat-strip span{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-bright); }

/* CTA banner */
.cta-banner{
  position:relative; border-radius:var(--radius); overflow:hidden; padding:64px 56px;
  background:var(--navy); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-banner::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(0,194,209,0.16), transparent 60%);
}
.cta-banner > *{ position:relative; z-index:1; }
.cta-banner h2{ color:var(--white); margin-bottom:8px; font-size:30px; }
.cta-banner p{ color:#BCCBDE; margin-bottom:0; }

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.page-hero{
  position:relative; padding:150px 0 84px; overflow:hidden; background:var(--navy-deep);
}
.page-hero-media{ position:absolute; inset:0; }
.page-hero-media img{ width:100%; height:100%; object-fit:cover; }
.page-hero-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(6,21,41,0.95) 30%, rgba(10,31,68,0.55) 100%); }
.page-hero-content{ position:relative; z-index:1; max-width:680px; }
.page-hero h1{ color:var(--white); font-size:clamp(32px,4.4vw,50px); margin-bottom:14px; }
.page-hero p{ color:#CBD9EA; font-size:17px; margin-bottom:0; }
.breadcrumb{ font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan-bright); margin-bottom:18px; display:block; }

/* ============================================================
   FORMS
   ============================================================ */
.form-wrap{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:44px; box-shadow:var(--shadow-md); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field{ margin-bottom:22px; }
.field label{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius);
  font-family:var(--font-body); font-size:15px; color:var(--ink); background:var(--white);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 4px rgba(0,194,209,0.14);
}
.field textarea{ resize:vertical; min-height:130px; }
.form-note{ font-size:13px; color:var(--slate-light); margin-top:6px; }
.form-status{ margin-top:18px; font-size:14.5px; font-weight:600; display:none; padding:14px 16px; border-radius:var(--radius); }
.form-status.show{ display:block; }
.form-status.ok{ background:#E7F9F1; color:#0F7A4C; }
.form-status.err{ background:#FDEEEE; color:#B4232C; }

/* contact info list */
.contact-list{ display:flex; flex-direction:column; gap:4px; }
.contact-item{
  display:flex; align-items:flex-start; gap:16px; padding:20px 0; border-bottom:1px solid var(--line);
  transition:transform .28s cubic-bezier(.22,.9,.32,1);
}
.contact-item:hover{ transform:translateX(4px); }
.contact-item .icon{ width:44px; height:44px; border-radius:10px; background:var(--ice); display:flex; align-items:center; justify-content:center; flex:none; transition:background .28s ease; }
.contact-item .icon svg{ width:20px; height:20px; stroke:var(--navy); transition:stroke .28s ease; }
.contact-item:hover .icon{ background:var(--cyan); }
.contact-item:hover .icon svg{ stroke:var(--white); }
.contact-item h4{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--slate-light); margin-bottom:4px; }
.contact-item p{ font-size:16px; color:var(--navy); font-weight:600; margin:0; }
.contact-item a:hover p{ color:var(--cyan); }

/* leader message */
.leader{ display:grid; grid-template-columns:220px 1fr; gap:44px; align-items:start; }
.leader-avatar{
  width:220px; height:220px; border-radius:50%; background:linear-gradient(160deg, var(--navy), var(--navy-soft));
  display:flex; align-items:center; justify-content:center; color:var(--cyan-bright);
  font-family:var(--font-display); font-size:44px; box-shadow:var(--shadow-md); border:4px solid var(--cyan);
}
.leader blockquote{ font-family:var(--font-display); font-size:22px; line-height:1.5; color:var(--white); margin:0 0 20px; text-transform:none; font-weight:400; }
.leader cite{ font-style:normal; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- Tablet (portrait tablets / small laptops) ---- */
@media (max-width: 980px){
  .grid-3, .grid-4{ grid-template-columns:repeat(2,1fr); }
  .split{ grid-template-columns:1fr; gap:36px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-message{ display:none; }
  .leader{ grid-template-columns:1fr; text-align:left; }
  .leader-avatar{ width:120px; height:120px; font-size:28px; }
}

/* ---- Nav drawer kicks in for tablet + mobile ---- */
@media (max-width: 860px){
  .container{ padding:0 20px; }

  /* Dimming backdrop behind the drawer — sits below the header (so the
     hamburger/X toggle stays clickable) but above every other section,
     which is what makes the rest of the page visually + functionally
     inert while the menu is open. */
  .nav-backdrop{
    position:fixed; inset:0; z-index:999;
    background:rgba(6,21,41,0.55);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden;
    transition:opacity .32s ease, visibility 0s linear .32s;
  }
  .nav-backdrop.open{ opacity:1; visibility:visible; transition:opacity .32s ease; }

  .main-nav{
    position:fixed; top:0; right:0; bottom:0;
    width:50vw; min-width:260px; max-width:340px;
    height:100vh; height:100dvh;
    background:var(--white); flex-direction:column; align-items:stretch;
    padding:calc(var(--header-h) + 16px) 22px 28px; gap:2px; margin:0;
    transform:translateX(100%);
    transition:transform .38s cubic-bezier(.22,.9,.32,1);
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    box-shadow:-16px 0 48px rgba(6,21,41,0.28); z-index:1001;
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{
    padding:14px 10px; border-bottom:1px solid var(--line); font-size:14px;
    display:block;
  }
  .nav-mobile-actions{
    display:flex; flex-direction:column; gap:12px;
    margin-top:20px; padding-top:22px; border-top:1px solid var(--line);
  }
  /* Buttons in the drawer need their own sizing: the header-row .btn
     styles (16px/30px padding, nowrap) are tuned for short single-line
     labels and are too large for "Call (307) 888-9963" at drawer width,
     which was pushing the text past the button's edges and overlapping
     the "Inquire Now" button directly beneath it. Scoping smaller
     padding/font + allowing wrap here fixes that without touching the
     .btn rules used everywhere else on desktop and mobile header. */
  .nav-mobile-actions a{
    border-bottom:none !important; white-space:normal;
    padding:13px 16px; font-size:13px; line-height:1.3; gap:8px;
  }
  .header-cta .btn span.long{ display:none; }
  .nav-toggle{ display:flex; }

  /* Services dropdown becomes an inline accordion inside the drawer */
  .nav-item{ display:block; }
  .nav-item-row{ align-items:stretch; }
  .nav-item-row a{ flex:1; }
  .dropdown-toggle{ width:44px; margin-left:0; border-bottom:1px solid var(--line); }
  .dropdown-menu{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    padding:0; max-height:0; overflow:hidden;
    transition:max-height .3s ease;
  }
  .dropdown-menu a{ padding:12px 10px 12px 24px; }
  .nav-item.open .dropdown-menu{ max-height:220px; }
  .route{ grid-template-columns:1fr 1fr; }
  .route::before{ display:none; }
  .stat-strip{ grid-template-columns:repeat(2,1fr); }
  .stat-strip div{ border-bottom:1px solid rgba(255,255,255,.12); }
}

/* Narrow phones: let the drawer take a bit more of the width so text
   and tap targets don't feel cramped, while staying well short of full-screen. */
@media (max-width: 420px){
  .main-nav{ width:72vw; min-width:0; }
}

/* ---- Phones ---- */
@media (max-width: 640px){
  .container{ padding:0 18px; }
  .section{ padding:56px 0; }
  .section--tight{ padding:44px 0; }
  .grid-3, .grid-4, .grid-2, .route, .form-row{ grid-template-columns:1fr; }

  /* Header: give the logo all the room it needs and drop the header-row
     Call / Inquire buttons — both are still one tap away, in the open
     nav drawer and via the fixed side tab, so nothing is lost. */
  .brand img.brand-mark{ height:32px; }
  .brand .brand-text strong{ font-size:16px; }
  .brand .brand-text span{ font-size:9px; letter-spacing:.14em; }
  .header-cta{ gap:8px; }
  .header-cta .btn-ghost, .header-cta .btn-primary{ display:none; }

  .hero{ min-height:auto; }
  .hero-content{ padding-top:88px; padding-bottom:64px; padding-left:10px; padding-right:10px; }
  .hero h1{ font-size:clamp(30px,9vw,40px); }
  .hero-lede{ font-size:15.5px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  .hero-route{ flex-direction:column; align-items:flex-start; gap:18px; }
  .route-dash{ display:none; }

  .page-hero{ padding:112px 0 56px; }

  .section-head{ margin-bottom:36px; }
  .section-head h2{ font-size:clamp(24px,7vw,32px); }

  .split{ gap:28px; }
  .split-media img{ min-height:240px; }

  .leader{ padding:28px !important; }
  .leader blockquote{ font-size:18px; }

  .cta-banner{ padding:36px 24px; flex-direction:column; text-align:center; }
  .cta-banner h2{ font-size:24px; }

  .form-wrap{ padding:22px; }

  .btn{ padding:14px 22px; font-size:13px; }
  .inquire-fab{ font-size:11px; padding:9px 14px; top:58%; }
  .back-to-top{ right:16px; bottom:16px; width:44px; height:44px; }

  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; text-align:left; }
}

/* ---- Small phones ---- */
@media (max-width: 380px){
  .container{ padding:0 14px; }
  .brand .brand-text span{ display:none; }
  .header-cta{ gap:6px; }
  .hero h1{ font-size:clamp(26px,9vw,34px); }
  .stat-strip{ grid-template-columns:1fr 1fr; }
}