@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/montserrat-latin.woff2?v=a5ec5492') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {

  --navy:        #0b1326;
  --navy-deep:   #080e1c;
  --navy-soft:   #16233d;

  --green:       #6ada35;
  --green-dark:  #55bc26;

  --green-text:  #3a801a;

  --beam:        #d6a473;
  --green-ink:   #222222;

  --ink:         #222222;
  --ink-soft:    #4a4a4a;

  --muted:       #65707d;
  --line:        #e2e8ed;
  --paper:       #ffffff;
  --paper-alt:   #f4f7f9;

  --paper-warm:  #f6f2eb;

  --font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --step--1: 0.75rem;

  --step--2: 0.6875rem;
  --step-14: 0.875rem;
  --step-18: 1.125rem;
  --step-0:  1rem;
  --step-1:  clamp(1.125rem, 1.09rem + 0.20vw, 1.25rem);
  --step-2:  clamp(1.5rem,   1.38rem + 0.60vw, 1.875rem);
  --step-3:  clamp(1.75rem,  1.58rem + 0.80vw, 2.25rem);
  --step-4:  clamp(1.875rem, 1.65rem + 1.00vw, 2.5rem);
  --step-5:  clamp(2rem,     1.64rem + 1.45vw, 2.8125rem);

  --gutter: clamp(1.625rem, 1.2rem + 2.2vw, 2.5rem);

  --bar-h: 108px;

  --hero-gap: clamp(2.75rem, 2.1rem + 2.6vw, 4.5rem);

  --hero-foot: calc(var(--bar-h) / 2 + var(--hero-gap));

  --shell: 1680px;
  --wide:  1170px;
  --text:   68ch;

  --shadow-sm: 0 1px 2px rgba(8, 14, 28, 0.06), 0 2px 8px rgba(8, 14, 28, 0.05);
  --shadow-md: 0 4px 12px rgba(8, 14, 28, 0.08), 0 16px 40px rgba(8, 14, 28, 0.09);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

section[id] { scroll-margin-top: calc(var(--bar-h) + 0.5rem); }

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: normal;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--step-3); }

body { --hero-h1: clamp(2.15rem, 1.75rem + 1.7vw, 3rem); }

@media (max-width: 640px) {
  body { --hero-h1: clamp(1.35rem, 6.5vw, 2rem); }
}
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); }

p { margin: 0 0 1.15em; max-width: var(--text); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--green); }

img, video, svg { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }

ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; max-width: var(--text); }
li { margin-bottom: 0.35em; }

hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

blockquote {
  margin: 1.75rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--green);
  color: var(--ink-soft);
  font-style: italic;
}

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.95);
  border-radius: 2px;
}

.section--dark :focus-visible,
.hdr--over .hdr__bar :focus-visible,
.ftr :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(11, 19, 38, 0.95);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: #fff;
  font-weight: 600;
}
.skip:focus { left: 0; }

.wrap {
  width: min(100% - var(--gutter) * 2, var(--wide));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - var(--gutter) * 2, 820px); }

.section--wide > .wrap { width: min(100% - var(--gutter) * 2, var(--shell)); }

.section { padding-block: clamp(3.125rem, 2rem + 6.2vw, 7.5rem); }

.section--dark { background: var(--navy); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: #fff; }
.section--alt { background: var(--paper-alt); }

.lede {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400;
}
.section--dark .lede { color: #fff; }

.eyebrow {
  display: block;
  margin-bottom: 0.9rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}
.section--dark .eyebrow { color: var(--green); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 15px 40px;
  border: 2px solid transparent;
  border-radius: 0;
  background: var(--green);
  color: var(--green-ink);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
}
.btn:hover { background: var(--green-dark); }

.btn--ghost {
  background: transparent;
  border-color: currentColor;
  color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.section--dark .btn--ghost, .phero .btn--ghost, .hero .btn--ghost { color: #fff; }
.section--dark .btn--ghost:hover, .phero .btn--ghost:hover, .hero .btn--ghost:hover {
  background: #fff;
  border-color: #fff;
  color: var(--navy);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 2rem;
}


.btn-row--center { justify-content: center; }

.btn-row .btn { min-width: 19.5rem; }

body { --btn-floor: 0px; }

.p-index                 { --btn-w: 169px; }
.p-canada                { --btn-w: 212px; }
.p-freight-broker        { --btn-w: 256px; }
.p-usa                   { --btn-w: 276px; }
.p-crossborder               { --btn-w: 230px; }
.p-customs               { --btn-w: 251px; }
.p-warehousing-logistics { --btn-w: 263px; }
.p-vehicle-transport     { --btn-w: 316px; }
.p-quote                 { --btn-w: 298px; }
.p-services              { --btn-w: 213px; }
.p-schedule              { --btn-w: 262px; }
.p-accessorial-pricing   { --btn-w: 235px; }
.p-carrier               { --btn-w: 309px; }
.p-density-calculator    { --btn-w: 249px; }

.p-free-coffee           { --btn-w: 331px; }
.p-freight-rates         { --btn-w: 256px; }
.p-getmybol              { --btn-w: 281px; }
.p-faqs                  { --btn-w: 150px; }
.p-insurance-claims      { --btn-w: 321px; }
.p-shipping-news         { --btn-w: 210px; }
.p-track                 { --btn-w: 191px; }
.p-pickup                { --btn-w: 208px; }
.p-contact               { --btn-w: 258px; }
.p-clear                 { --btn-w: 296px; }
.p-careers               { --btn-w: 279px; }
.p-aboutus               { --btn-w: 239px; }

body[class^="p-shipping-news-"] { --btn-w: 210px; }
.p-specialized-freight   { --btn-w: 247px; }
.p-managed-transportation { --btn-w: 259px; }
.p-crossborder-vancouver-losangeles { --btn-w: 290px; }
.p-crossborder-calgary-losangeles { --btn-w: 290px; }
.p-crossborder-toronto-losangeles { --btn-w: 290px; }
.p-crossborder-vancouver-sanfrancisco { --btn-w: 290px; }
.p-crossborder-calgary-sanfrancisco { --btn-w: 290px; }
.p-crossborder-vancouver-dallas { --btn-w: 290px; }
.p-crossborder-calgary-dallas { --btn-w: 290px; }
.p-crossborder-toronto-dallas { --btn-w: 290px; }
.p-canada-vancouver-toronto { --btn-w: 290px; }
.p-crossborder-canada-california { --btn-w: 210px; }
.p-crossborder-canada-texas { --btn-w: 210px; }
.p-crossborder-canada-washington { --btn-w: 210px; }
.p-crossborder-canada-oregon { --btn-w: 210px; }
.p-crossborder-canada-nevada { --btn-w: 210px; }
.p-crossborder-canada-arizona { --btn-w: 210px; }
.p-crossborder-canada-michigan { --btn-w: 210px; }
.p-crossborder-canada-newyork { --btn-w: 210px; }
.p-crossborder-canada-newjersey { --btn-w: 210px; }
.p-crossborder-canada-oklahoma { --btn-w: 210px; }
.p-crossborder-canada-ohio { --btn-w: 210px; }
.p-crossborder-canada-illinois { --btn-w: 210px; }
.p-crossborder-canada-pennsylvania { --btn-w: 210px; }
.p-crossborder-canada-indiana { --btn-w: 210px; }
.p-crossborder-canada-tennessee { --btn-w: 210px; }
.p-crossborder-canada-louisiana { --btn-w: 210px; }

.p-canada-vancouver,
.p-usa-losangeles,
.p-usa-sanfrancisco,
.p-usa-dallas,
.p-canada-calgary,
.p-canada-toronto        { --btn-w: 257px; }

@media (min-width: 621px) {
  .p-vehicle-transport .btn-row .btn { min-width: 22.5rem; }
}

@media (max-width: 620px) {
  body { --btn-floor: min(var(--btn-w, 0px), 100%); }

  .btn-row .btn {
    min-width: var(--btn-floor);
    width: auto;
    max-width: 100%;
    padding-inline: 1.1rem;
  }
}

.grid { display: grid; gap: clamp(1rem, 0.7rem + 1.2vw, 1.75rem); }

.card {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              border-color 0.25s var(--ease);
}
.card h3 { margin-bottom: 0.4em; }
.card p { color: var(--ink-soft); font-size: var(--step-0); line-height: 1.6; }

a.card { text-decoration: none; display: block; }
a.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--green);
}

.rv [data-rv] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.rv [data-rv].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv [data-rv] { opacity: 1; transform: none; }
}

.center { text-align: center; }
.center .lede, .center p { margin-inline: auto; }
.center .btn-row { justify-content: center; }

.center > .wrap > h2:last-of-type, .center .lede { margin-bottom: 0; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.btn { min-height: 44px; }

summary { min-height: 44px; }
