/* Boyemma Trucking Services - Public site stylesheet
   Modernist design system. Mobile-first, no frameworks, no build step.
   Tokens below are the single source of truth; see styleguide for rationale. */

/* Inter, self-hosted. Replaces the render-blocking Google Fonts @import.
   unicode-range means a visitor only downloads the subset their content needs:
   latin alone for this site, ~188KB across the four weights. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/inter-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/inter-400-latin.woff2') 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}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/inter-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/inter-600-latin.woff2') 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}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/inter-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/inter-700-latin.woff2') 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}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/inter-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../assets/fonts/inter-800-latin.woff2') 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}

/* ============================================================================
   BOYEMMA TRUCKING SERVICES — reference mockup
   Modernist (Swiss / International Typographic Style) retuned to the brand.
   Self-contained: no external requests, no framework, no build step.
   Type: Inter (already loaded site-wide) with a system-grotesque fallback stack.
   ========================================================================= */

/* ---- TOKENS ---------------------------------------------------------------
   Every value below is a design token. Roles are stated in comments so the
   engineer can lift them verbatim into a single stylesheet.                  */
:root{
  /* color — restricted, structural. Boyemma navy + orange evolved. */
  --paper:#ffffff;             /* page ground */
  --paper-alt:#f4f5f7;         /* alternating section band */
  --ink:#101828;               /* primary text + heavy 2px rules */
  --ink-2:#586173;             /* secondary text */
  --ink-3:#8b93a1;             /* tertiary / captions */
  --navy:#0b1f3a;              /* structural dark surface: hero, footer, CTA */
  --navy-2:#122a4a;            /* raised tone on navy */
  --on-navy:#f7f8fa;           /* text on navy */
  --on-navy-2:rgba(247,248,250,.70); /* muted text on navy */
  --navy-line:rgba(247,248,250,.18); /* rule on navy */
  --accent:#e85d04;            /* orange — the single accent */
  --accent-600:#c74e02;        /* hover */
  --accent-700:#a34002;        /* active / pressed */
  --amber:#f48c06;             /* rare secondary emphasis */
  --rule:var(--ink);           /* heavy 2px structural rule */
  --rule-2:rgba(16,24,40,.28); /* medium 1px rule */
  --rule-hair:rgba(16,24,40,.12); /* hairline */

  /* type — Inter; 1.25 (major third) scale, fluid on the display sizes */
  --font:'Inter','Inter var',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --fs-display:clamp(1.9rem, 0.55rem + 5.6vw, 5.5rem);  /* 30 -> 88, full-width hero */
  --fs-h1:clamp(2.05rem, 1.35rem + 2.9vw, 3.5rem);      /* 33 -> 56 */
  --fs-h2:clamp(1.6rem, 1.18rem + 1.75vw, 2.4rem);      /* 26 -> 38 */
  --fs-h3:1.5rem;    /* 24 */
  --fs-h4:1.1875rem; /* 19 */
  --fs-lg:1.125rem;  /* 18 */
  --fs-body:1rem;    /* 16 */
  --fs-sm:.875rem;   /* 14 */
  --fs-xs:.75rem;    /* 12 */
  --fs-2xs:.6875rem; /* 11 */

  /* spacing — base-4 */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;

  /* layout / grid */
  --page-max:1360px;
  --margin:clamp(20px,5vw,72px);
  --gutter:clamp(16px,2.2vw,28px);

  /* radii — zero everywhere (Swiss) */
  --radius:0px;

  /* motion — custom curves only; entrances ease OUT; UI feedback < 300ms */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-out-soft:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);
  --ease-ui:cubic-bezier(.3,0,0,1);
  --dur-fast:140ms;--dur-med:240ms;--dur-slow:560ms;--dur-hero:820ms;

  /* z-index layers */
  --z-banner:60;--z-nav:100;--z-menu:200;--z-overlay:300;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.55;
  font-weight:400;letter-spacing:-0.006em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:800;line-height:1.04;letter-spacing:-0.02em}
p{margin:0}
img,svg{display:block;max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-700)}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus{outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:rgba(232,93,4,.24)}
.wrap{max-width:var(--page-max);margin-inline:auto;padding-inline:var(--margin)}
.section{padding-block:clamp(56px,8.5vw,124px)}
.band-alt{background:var(--paper-alt)}
.band-navy{background:var(--navy);color:var(--on-navy)}
.mono-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- OVERLINE / KICKER --------------------------------------------------- */
.kicker{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--accent);display:inline-block}
.band-navy .kicker{color:var(--amber)}

/* ---- SECTION HEADER ------------------------------------------------------ */
.shead{display:grid;grid-template-columns:auto 1fr;gap:var(--s4) var(--s5);align-items:end;
  border-bottom:2px solid var(--rule);padding-bottom:var(--s4);margin-bottom:var(--s7)}
.shead__num{font-size:var(--fs-sm);font-weight:800;color:var(--accent);line-height:1;letter-spacing:0}
.shead__title{grid-column:2;font-size:var(--fs-h2);max-width:20ch;text-wrap:balance}
.shead__lead{grid-column:2;color:var(--ink-2);font-size:var(--fs-lg);max-width:56ch;margin-top:var(--s4);text-wrap:pretty}

/* ---- BUTTONS ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:-0.01em;line-height:1;
  padding:14px 20px;border:2px solid transparent;border-radius:var(--radius);
  background:transparent;color:var(--ink);text-align:left;
  transition:background-color var(--dur-fast) var(--ease-ui),
             color var(--dur-fast) var(--ease-ui),
             border-color var(--dur-fast) var(--ease-ui),
             transform var(--dur-fast) var(--ease-ui);
}
.btn svg{flex:none}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-600);border-color:var(--accent-600);color:#fff}
.btn--primary:active{background:var(--accent-700);border-color:var(--accent-700)}
.btn--outline{border-color:var(--rule-2);color:var(--ink)}
.btn--outline:hover{border-color:var(--ink);background:rgba(16,24,40,.05)}
.btn--outline:active{background:rgba(16,24,40,.10)}
.btn--ghost{padding:14px 4px;color:var(--accent)}
.btn--ghost .ar{transition:transform var(--dur-med) var(--ease-out)}
.btn--ghost:hover{color:var(--accent-700)}
.btn--ghost:hover .ar{transform:translateX(5px)}
/* on navy */
.band-navy .btn--outline,.nav .btn--outline{border-color:rgba(247,248,250,.34);color:var(--on-navy)}
.band-navy .btn--outline:hover{border-color:var(--on-navy);background:rgba(247,248,250,.08);color:var(--on-navy)}
.band-navy .btn--ghost{color:var(--amber)}
.band-navy .btn--ghost:hover{color:#fff}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* ---- INLINE LINK (in prose) --------------------------------------------- */
.tlink{color:var(--accent);font-weight:600;position:relative;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--dur-med) var(--ease-out),color var(--dur-fast) var(--ease-ui)}
.tlink:hover{color:var(--accent-700);background-size:100% 1.5px}
.band-navy .tlink,.on-navy .tlink{color:var(--amber)}
.band-navy .tlink:hover{color:#fff}

/* ---- TOP HIRING BANNER --------------------------------------------------- */
.banner{background:var(--accent);color:#fff}
.banner__in{display:flex;align-items:center;gap:var(--s4);justify-content:center;
  padding:9px var(--margin);font-size:var(--fs-sm);font-weight:600;text-align:center;position:relative}
.banner a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
.banner a:hover{color:var(--navy)}
.banner__x{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;display:grid;place-items:center;background:transparent;border:0;color:#fff;
  transition:transform var(--dur-fast) var(--ease-ui),opacity var(--dur-fast) var(--ease-ui);opacity:.85}
.banner__x:hover{opacity:1;transform:translateY(-50%) rotate(90deg)}
.banner[hidden]{display:none}

/* ---- NAV ----------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--paper);
  border-bottom:2px solid var(--rule);transition:box-shadow var(--dur-med) var(--ease-ui)}
.nav.is-scrolled{box-shadow:0 1px 0 rgba(16,24,40,.06)}
.nav__in{display:flex;align-items:center;gap:var(--s5);
  padding-block:var(--s3);max-width:var(--page-max);margin-inline:auto;padding-inline:var(--margin)}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;color:var(--ink)}
.brand .mark{width:44px;height:auto;color:var(--accent)}
.brand__wm{display:flex;flex-direction:column;line-height:1}
.brand__name{font-weight:800;font-size:16px;letter-spacing:.02em}
.brand__sub{font-size:9px;font-weight:600;letter-spacing:.28em;color:var(--ink-2);margin-top:3px}
.nav__links{display:flex;gap:var(--s5);align-items:center}
.nav__links a{color:var(--ink);font-size:var(--fs-sm);font-weight:600;padding:6px 0;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--dur-med) var(--ease-out)}
.nav__links a:hover{color:var(--accent)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)}
.nav__links a[aria-current="page"]{color:var(--accent)}
.nav__phone{font-weight:700;font-size:var(--fs-sm);color:var(--ink);border:2px solid var(--rule-2);
  padding:9px 14px;transition:border-color var(--dur-fast) var(--ease-ui),color var(--dur-fast) var(--ease-ui)}
.nav__phone:hover{border-color:var(--ink);color:var(--ink)}
.nav__cta{white-space:nowrap}
.nav__burger{display:none;width:44px;height:44px;background:transparent;border:2px solid var(--rule-2);
  align-items:center;justify-content:center;flex:none;margin-left:auto}
.burger-i{width:20px;height:2px;background:var(--ink);position:relative;transition:background-color var(--dur-fast)}
.burger-i::before,.burger-i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);
  transition:transform var(--dur-med) var(--ease-inout)}
.burger-i::before{top:-6px}.burger-i::after{top:6px}
[aria-expanded="true"] .burger-i{background:transparent}
[aria-expanded="true"] .burger-i::before{transform:translateY(6px) rotate(45deg)}
[aria-expanded="true"] .burger-i::after{transform:translateY(-6px) rotate(-45deg)}

/* mobile menu */
.menu{display:none}
@media (max-width:920px){
  .nav__links,.nav__phone,.nav__cta{display:none}
  .nav__burger{display:inline-flex}
  .menu{display:block;position:fixed;left:0;right:0;top:0;z-index:var(--z-menu);
    background:var(--navy);color:var(--on-navy);padding:var(--s8) var(--margin) var(--s7);
    clip-path:inset(0 0 100% 0);visibility:hidden;
    transition:clip-path var(--dur-med) var(--ease-inout),visibility 0s linear var(--dur-med)}
  .menu.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path var(--dur-med) var(--ease-inout)}
  .menu__close{position:absolute;top:18px;right:var(--margin);width:44px;height:44px;background:transparent;border:2px solid var(--navy-line);color:var(--on-navy);display:grid;place-items:center}
  .menu__links{display:flex;flex-direction:column;gap:2px;border-top:2px solid var(--navy-line);margin-top:var(--s6)}
  .menu__links a{color:var(--on-navy);font-size:clamp(1.6rem,9vw,2.2rem);font-weight:800;letter-spacing:-.02em;
    padding:var(--s4) 0;border-bottom:1px solid var(--navy-line);display:flex;justify-content:space-between;align-items:center}
  .menu__links a[aria-current="page"]{color:var(--amber)}
  .menu__links a .idx{font-size:var(--fs-sm);color:var(--amber);font-weight:700}
  .menu__foot{margin-top:var(--s6);display:flex;flex-direction:column;gap:var(--s3)}
  .menu__foot .btn{justify-content:flex-start}
}

/* ---- HERO ---------------------------------------------------------------- */
.hero{background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden}
.hero__rule{height:3px;background:var(--accent);transform-origin:left center}
.hero__in{padding-block:clamp(52px,8vw,104px);position:relative}
.hero__kick{color:var(--amber)}
.hero h1{font-size:var(--fs-display);letter-spacing:-0.035em;line-height:1.0;margin:var(--s5) 0 var(--s7)}
.line{display:block;overflow:hidden;padding-bottom:.05em}
.line__i{display:block;white-space:nowrap;will-change:transform}
.hero__foot{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s5) var(--s8);align-items:end;
  border-top:2px solid var(--navy-line);padding-top:var(--s6)}
.hero__sub{color:var(--on-navy-2);font-size:var(--fs-lg);max-width:56ch;line-height:1.5;margin-bottom:var(--s6);text-wrap:pretty}
.hero__meta{display:flex;flex-direction:column;align-items:flex-end;gap:var(--s2);text-align:right}
.hero__meta .big{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;line-height:.85;color:rgba(247,248,250,.12);letter-spacing:-.04em}
.hero__meta .tag{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-2);font-weight:700}
@media (max-width:760px){
  .hero__foot{grid-template-columns:1fr;align-items:start;gap:var(--s6)}
  .hero__meta{align-items:baseline;text-align:left;flex-direction:row;gap:var(--s4)}
}

/* ---- STAT STRIP ---------------------------------------------------------- */
.stats{border-bottom:2px solid var(--rule)}
.stats__in{display:grid;grid-template-columns:repeat(6,1fr);border-left:1px solid var(--rule-hair)}
.stat{padding:var(--s5) var(--s4);border-right:1px solid var(--rule-hair);border-top:0;position:relative}
.stat__tick{position:absolute;left:var(--s4);top:0;width:22px;height:3px;background:var(--accent);transform-origin:left}
.stat__val{font-size:clamp(1.6rem,3.2vw,2.35rem);font-weight:800;letter-spacing:-.03em;line-height:1;margin:var(--s4) 0 var(--s2)}
.stat__label{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.35;text-wrap:pretty}
@media (max-width:900px){.stats__in{grid-template-columns:repeat(3,1fr)}
  .stat:nth-child(-n+3){border-bottom:1px solid var(--rule-hair)}}
@media (max-width:560px){.stats__in{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--rule-hair)}}

/* ---- EDITORIAL (asymmetric two-column) ----------------------------------- */
.editorial{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s6) var(--s8)}
.editorial__num{font-size:clamp(3rem,7vw,5.5rem);font-weight:800;color:var(--paper-alt);line-height:.8;letter-spacing:-.04em;
  -webkit-text-stroke:2px var(--rule-hair);color:transparent}
.editorial__head h2{font-size:var(--fs-h2);max-width:14ch;margin-top:var(--s4)}
.editorial__body{font-size:var(--fs-lg);color:var(--ink-2);line-height:1.6;max-width:62ch}
.editorial__body p+p{margin-top:var(--s4)}
.editorial__body strong{color:var(--ink);font-weight:600}
@media (max-width:820px){.editorial{grid-template-columns:1fr;gap:var(--s5)}
  .editorial__num{font-size:3.2rem}}

/* ---- HAUL GRID (2x2 cells with visible rules) ---------------------------- */
.cells{border:2px solid var(--rule);display:grid;grid-template-columns:1fr 1fr}
.cell{padding:var(--s6);border-top:1px solid var(--rule-hair);border-left:1px solid var(--rule-hair)}
.cell:nth-child(1),.cell:nth-child(2){border-top:0}
.cell:nth-child(odd){border-left:0}
.cell__idx{font-size:var(--fs-xs);font-weight:800;color:var(--accent);letter-spacing:.05em}
.cell h3{font-size:var(--fs-h4);margin:var(--s4) 0 var(--s3);letter-spacing:-.01em}
.cell p{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.55;text-wrap:pretty}
@media (max-width:720px){.cells{grid-template-columns:1fr}
  .cell{border-left:0!important}.cell:nth-child(2){border-top:1px solid var(--rule-hair)}}

/* ---- SPEC ROWS (numbered ruled list) ------------------------------------- */
.rows{border-top:2px solid var(--rule)}
.row{display:grid;grid-template-columns:auto minmax(0,4fr) minmax(0,7fr);gap:var(--s4) var(--s6);
  align-items:start;padding:var(--s6) 0;border-bottom:1px solid var(--rule-hair);position:relative;
  transition:background-color var(--dur-med) var(--ease-ui)}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  transform:scaleY(0);transform-origin:top;transition:transform var(--dur-med) var(--ease-out)}
.row:hover{background:rgba(16,24,40,.02)}
.row:hover::before{transform:scaleY(1)}
.row__num{font-size:var(--fs-sm);font-weight:800;color:var(--accent);padding-top:5px;letter-spacing:0}
.row__title{font-size:var(--fs-h4);letter-spacing:-.01em;padding-top:0;max-width:22ch;
  transition:transform var(--dur-med) var(--ease-out)}
.row:hover .row__title{transform:translateX(6px)}
.row__body{color:var(--ink-2);line-height:1.55;font-size:var(--fs-body);text-wrap:pretty}
@media (max-width:760px){.row{grid-template-columns:auto 1fr;gap:var(--s3) var(--s4)}
  .row__body{grid-column:1/-1;padding-left:calc(var(--fs-sm) + var(--s4))}}

/* ---- FEATURED PARTNER ---------------------------------------------------- */
.partner{border:2px solid var(--rule);position:relative;background:var(--paper)}
.partner::before{content:"";position:absolute;left:-2px;right:-2px;top:-2px;height:5px;background:var(--accent)}
.partner__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.partner__main{padding:var(--s7);border-right:1px solid var(--rule-hair)}
.partner__aside{padding:var(--s7);background:var(--paper-alt)}
.partner__name{font-size:var(--fs-h3);margin:var(--s3) 0 var(--s4);letter-spacing:-.02em}
.partner p{color:var(--ink-2);line-height:1.6;font-size:var(--fs-body)}
.partner__aside h3{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.14em;color:var(--ink);margin-bottom:var(--s4)}
@media (max-width:760px){.partner__grid{grid-template-columns:1fr}
  .partner__main{border-right:0;border-bottom:1px solid var(--rule-hair);padding:var(--s6)}
  .partner__aside{padding:var(--s6)}}

/* ---- HIRING BLOCK -------------------------------------------------------- */
.hire{border:2px solid var(--rule);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s6);
  padding:var(--s7);align-items:center}
.hire h2{font-size:var(--fs-h2);max-width:16ch}
.hire p{color:var(--ink-2);font-size:var(--fs-lg);line-height:1.55;margin-top:var(--s4);max-width:52ch}
.hire__actions{display:flex;flex-direction:column;gap:var(--s3);align-items:stretch}
.hire__actions .btn{justify-content:flex-start}
@media (max-width:760px){.hire{grid-template-columns:1fr;padding:var(--s6)}}

/* ---- SPEC TABLE (Services) ----------------------------------------------- */
.spec{width:100%;border-collapse:collapse;border-top:2px solid var(--rule);border-bottom:2px solid var(--rule)}
.spec th{text-align:left;font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  font-weight:700;padding:var(--s3) var(--s4);border-bottom:2px solid var(--rule)}
.spec td{padding:var(--s4);border-bottom:1px solid var(--rule-hair);vertical-align:top;font-size:var(--fs-body);line-height:1.5}
.spec tr:last-child td{border-bottom:0}
.spec tbody tr{transition:background-color var(--dur-med) var(--ease-ui)}
.spec tbody tr:hover{background:rgba(16,24,40,.025)}
.spec .p-key{font-weight:700;color:var(--ink);width:34%;white-space:nowrap}
.spec .p-val{color:var(--ink-2)}
.spec .p-val strong{color:var(--ink);font-weight:600}
@media (max-width:640px){
  .spec,.spec tbody,.spec tr,.spec td{display:block;width:auto}
  .spec thead{display:none}
  .spec .p-key{width:auto;padding-bottom:2px;white-space:normal}
  .spec .p-val{padding-top:0}
  .spec tr{padding:var(--s3) 0;border-bottom:1px solid var(--rule-hair)}
  .spec td{border-bottom:0;padding:2px var(--s1)}
}

/* ---- SERVICE LINES (definition rows, reused .rows/.row) ------------------ */
.svc-detail ul{margin-top:var(--s3);display:grid;gap:6px}
.svc-detail li{position:relative;padding-left:20px;color:var(--ink-2);font-size:var(--fs-body);line-height:1.5}
.svc-detail li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--accent)}
.svc-detail .note{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--ink-3)}

/* ---- ONBOARDING STEPS ---------------------------------------------------- */
.steps{border-top:2px solid var(--rule);counter-reset:step}
.step{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:baseline;
  padding:var(--s5) 0;border-bottom:1px solid var(--rule-hair)}
.step__n{font-size:var(--fs-h3);font-weight:800;color:var(--accent);line-height:1;min-width:2ch}
.step p{font-size:var(--fs-lg);color:var(--ink);line-height:1.5;max-width:60ch}

/* ---- CTA BAND ------------------------------------------------------------ */
.cta{position:relative;overflow:hidden}
.cta__in{padding-block:clamp(56px,8vw,110px)}
.cta h2{font-size:var(--fs-h1);max-width:20ch;letter-spacing:-.025em}
.cta p{color:var(--on-navy-2);font-size:var(--fs-lg);max-width:56ch;margin:var(--s5) 0 var(--s6);line-height:1.55}
.cta .btn-row{margin-top:var(--s2)}
.cta__ghostnum{position:absolute;right:-2vw;bottom:-4vw;font-size:26vw;font-weight:800;line-height:.7;
  color:rgba(247,248,250,.04);letter-spacing:-.05em;pointer-events:none;user-select:none}

/* ---- FOOTER -------------------------------------------------------------- */
.foot{background:var(--navy);color:var(--on-navy);border-top:3px solid var(--accent)}
.foot__grid{display:grid;grid-template-columns:2fr 1fr 1.3fr 1.3fr;gap:var(--s6);
  padding-block:var(--s9) var(--s7)}
.foot__brand .mark{width:52px;color:#fff;margin-bottom:var(--s4)}
.foot__brand p{color:var(--on-navy-2);font-size:var(--fs-sm);line-height:1.6;max-width:42ch}
.foot h4{font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-2);
  margin-bottom:var(--s4);font-weight:700}
.foot__col a{display:block;color:var(--on-navy);font-size:var(--fs-sm);padding:5px 0}
.foot__col a:hover{color:var(--amber)}
.foot__col p{color:var(--on-navy-2);font-size:var(--fs-sm);line-height:1.6;margin-bottom:var(--s3)}
.foot__col p a{display:inline;padding:0}
.foot__work p{margin-bottom:var(--s4)}
.foot__bar{border-top:1px solid var(--navy-line);display:flex;justify-content:space-between;align-items:center;
  gap:var(--s4);padding-block:var(--s5);font-size:var(--fs-xs);color:var(--on-navy-2);flex-wrap:wrap}
.foot__bar a{color:var(--on-navy-2)}.foot__bar a:hover{color:var(--amber)}
.back-top{color:var(--amber);font-weight:700;display:inline-flex;align-items:center;gap:6px}
.back-top .ar{transition:transform var(--dur-med) var(--ease-out)}
.back-top:hover .ar{transform:translateY(-4px)}
@media (max-width:900px){.foot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot__grid{grid-template-columns:1fr;gap:var(--s6)}}

/* ---- FORM (compact demo of field states, shown on Services CTA note) ------ */
.field{display:block}
.field label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:6px;color:var(--on-navy)}
.field .req{color:var(--amber)}
.control{position:relative}
.input{width:100%;padding:12px 14px;font:inherit;font-size:var(--fs-body);color:var(--ink);
  background:#fff;border:2px solid var(--rule-2);border-radius:var(--radius);caret-color:var(--accent);
  transition:border-color var(--dur-fast) var(--ease-ui)}
.input::placeholder{color:var(--ink-3)}
.input:hover{border-color:var(--ink)}
.input:focus-visible{border-color:var(--accent);outline:none}
.field.is-error .input{border-color:var(--accent)}
.field__err{display:block;font-size:var(--fs-sm);color:var(--amber);margin-top:6px;font-weight:600}

/* ---- PAGE ROUTER --------------------------------------------------------- */
.page{display:block}
.js 

/* ==== MOTION SYSTEM ======================================================== */
/* Reveal on scroll — only active when JS ran (.js). Content visible otherwise. */
.js [data-reveal]{opacity:0;transform:translateY(22px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--i,0) * 80ms)}
.js [data-reveal].is-in{opacity:1;transform:none}

/* Hero signature choreography (gated by .js, fired by .is-loaded) */
.js .hero__rule{transform:scaleX(0);transition:transform var(--dur-hero) var(--ease-out)}
.js .hero.is-loaded .hero__rule{transform:scaleX(1)}
.js .hero .line__i{transform:translateY(115%);
  transition:transform var(--dur-hero) var(--ease-out);transition-delay:calc(220ms + var(--ln,0) * 90ms)}
.js .hero.is-loaded .line__i{transform:translateY(0)}
.js .hero__anim{opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
  transition-delay:calc(var(--d,0) * 1ms)}
.js .hero.is-loaded .hero__anim{opacity:1;transform:none}

/* Stat ticks draw in with the strip */
.js .stat .stat__tick{transform:scaleX(0);
  transition:transform var(--dur-slow) var(--ease-out);transition-delay:calc(120ms + var(--i,0) * 80ms)}
.js .stat.is-in .stat__tick{transform:scaleX(1)}

/* Accordion / details content reveal (state transition) */
details.acc{border-bottom:1px solid var(--rule-hair)}
details.acc summary{list-style:none;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s4) 0;font-size:var(--fs-h4);font-weight:700;cursor:pointer;color:var(--ink);
  transition:color var(--dur-fast) var(--ease-ui)}
details.acc summary::-webkit-details-marker{display:none}
details.acc summary:hover{color:var(--accent)}
.acc__mk{width:16px;height:16px;flex:none;position:relative;margin-left:auto}
.acc__mk::before,.acc__mk::after{content:"";position:absolute;background:var(--accent);
  transition:transform var(--dur-med) var(--ease-inout)}
.acc__mk::before{top:7px;left:0;width:16px;height:2px}
.acc__mk::after{top:0;left:7px;width:2px;height:16px}
details.acc[open] .acc__mk::after{transform:scaleY(0)}
.acc__body{padding:0 0 var(--s5);color:var(--ink-2);line-height:1.6;max-width:70ch}
.js details.acc[open] .acc__body{animation:accIn var(--dur-med) var(--ease-out) both}
@keyframes accIn{from{opacity:0;transform:translateY(-8px);clip-path:inset(0 0 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}

/* ---- REDUCED MOTION: everything final, no movement ----------------------- */
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],
  .js .hero__rule,.js .hero .line__i,.js .hero__anim,
  .js .stat .stat__tick,
  .btn,.tlink,.nav__links a::after,.row,.row__title,.row::before,.acc__mk::before,.acc__mk::after,
  .menu{
    transition-duration:0.01ms!important;transition-delay:0ms!important;
    animation-duration:0.01ms!important;animation-delay:0ms!important;
  }
  .js [data-reveal]{opacity:1!important;transform:none!important}
  .js .hero__rule{transform:scaleX(1)!important}
  .js .hero .line__i{transform:none!important}
  .js .hero__anim{opacity:1!important;transform:none!important}
  .js .stat .stat__tick{transform:scaleX(1)!important}
  .js details.acc[open] .acc__body{animation:none!important}
}

/* ---- Brand lockup ---------------------------------------------------------
   assets/logo.png is the real company mark and already contains the wordmark,
   so it replaces the reference mockup's placeholder SVG + text wordmark. It is
   sized for the baked-in "TRUCKING SERVICES" line to stay legible; shrinking it
   to a 44px icon would reduce that line to unreadable mush. On navy it is
   flattened to white, the same treatment the previous stylesheet used. */
.brand__logo{height:46px;width:auto;flex:none}
.foot__brand .brand__logo{height:54px;margin-bottom:var(--s4);filter:brightness(0) invert(1)}
.menu .brand__logo{filter:brightness(0) invert(1)}
@media (max-width:640px){.brand__logo{height:38px}}

/* ---- Legal prose ----------------------------------------------------------
   The privacy policy is a long statutory document, not a marketing surface. It
   gets a single measured column and quiet rules rather than the numbered
   section grammar used elsewhere. */
.legal{max-width:74ch}
.legal h2{font-size:var(--fs-h4);margin:var(--s8) 0 var(--s3);padding-top:var(--s4);border-top:1px solid var(--rule-hair)}
.legal h2:first-of-type{margin-top:var(--s5)}
.legal h3{font-size:var(--fs-body);margin:var(--s5) 0 var(--s2)}
.legal p{margin:0 0 var(--s4);color:var(--ink-2);max-width:74ch}
.legal ul{margin:0 0 var(--s4);padding-left:var(--s5);list-style:disc}
.legal li{margin-bottom:var(--s2);color:var(--ink-2)}
.legal li::marker{color:var(--accent)}
.legal strong{color:var(--ink);font-weight:700}
.legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.legal .note{margin-bottom:var(--s6)}

/* ---- Fixes to the delivered system ---------------------------------------
   1. The on-navy outline button was scoped to .band-navy and .nav, but .hero
      and .menu are also navy surfaces. Without this, every hero's secondary
      button rendered dark ink on a dark ground and was effectively invisible.
   2. The reference mockup had no skip link, so the class carried no styles and
      "Skip to main content" printed as visible text at the top of every page. */
.hero .btn--outline,
.menu .btn--outline{border-color:rgba(247,248,250,.34);color:var(--on-navy)}
.hero .btn--outline:hover,
.menu .btn--outline:hover{border-color:var(--on-navy);background:rgba(247,248,250,.08);color:var(--on-navy)}

.skip-link{
  position:absolute;left:var(--s4);top:-100px;z-index:var(--z-overlay);
  padding:12px 18px;background:var(--accent);color:#fff;
  font-size:var(--fs-sm);font-weight:700;text-decoration:none;
  transition:top var(--dur-fast) var(--ease-ui);
}
.skip-link:focus{top:var(--s3);color:#fff}

/* ---- Form controls --------------------------------------------------------
   The reference styleguide demoed the form on a navy panel, so `.field label`
   shipped as white and the controls were only styled through a `.input` class
   that assumed a dark ground. On the real contact page the form sits on white,
   which left the labels invisible and the controls at browser defaults. These
   rules complete the component for a light surface and style the elements
   themselves, so markup does not have to remember a class. */
.field{display:block;margin-bottom:var(--s5)}
.field label{color:var(--ink)}
.field .req{color:var(--accent)}

.field input,
.field select,
.field textarea{
  display:block;width:100%;max-width:34rem;
  padding:12px 14px;
  font:inherit;font-size:var(--fs-body);color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule-2);border-radius:var(--radius);
  transition:border-color var(--dur-fast) var(--ease-ui),box-shadow var(--dur-fast) var(--ease-ui);
}
.field textarea{min-height:11rem;resize:vertical}
.field input::placeholder,
.field textarea::placeholder{color:var(--ink-3)}
.field input:hover,
.field select:hover,
.field textarea:hover{border-color:var(--ink)}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);outline:none;box-shadow:inset 0 0 0 1px var(--accent);
}
.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

.form-error{display:none;margin-top:6px;font-size:var(--fs-sm);font-weight:600;color:var(--accent)}
.form-error.is-visible{display:block}

.form-status{
  max-width:34rem;margin:0 0 var(--s5);padding:12px 14px;
  border:1px solid var(--rule-2);border-left:3px solid var(--rule-2);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink);
}
.form-status[hidden]{display:none}
.form-status.is-error{border-color:var(--accent);border-left-color:var(--accent);color:var(--accent-700)}
.form-status.is-success{border-color:var(--ink);border-left-color:var(--ink);color:var(--ink)}


/* ---- Inner-page hero layout -----------------------------------------------
   The reference mockup's inner hero used .hero__grid / .hero__side, but the
   stylesheet only ever defined the home hero's .hero__foot / .hero__meta pair.
   Unstyled, the side element simply stacked under the buttons on every inner
   page. This mirrors the home treatment: content left, oversized ghost figure
   right, collapsing to a single column on narrow screens. */
.hero__grid{
  display:grid;grid-template-columns:1fr;gap:var(--s6);
  align-items:end;margin-top:var(--s7);
}
.hero__side{
  display:flex;flex-direction:row;align-items:baseline;gap:var(--s4);
}
.hero__side .big{
  font-size:clamp(2.5rem,6vw,4.5rem);font-weight:800;line-height:.85;
  color:rgba(247,248,250,.12);letter-spacing:-.04em;
}
.hero__side .tag{
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-navy-2);font-weight:700;
}
@media (min-width:900px){
  .hero__grid{grid-template-columns:minmax(0,1fr) auto;gap:var(--s8)}
  .hero__side{flex-direction:column;align-items:flex-end;text-align:right;gap:var(--s2)}
}

/* ---- Map frame ------------------------------------------------------------
   The embed is the one third-party request on the site; it gets the same 2px
   structural rule as every other framed block so it does not read as foreign. */
.map-frame{border:2px solid var(--rule);margin-top:var(--s5)}
.map-frame iframe{display:block;width:100%;height:clamp(280px,42vw,420px);border:0}
.map-links{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s4)}

/* ---- Content lists --------------------------------------------------------
   The global reset strips list markers, and the design only ever styled lists
   inside .svc-detail. Everywhere else an agent-authored <ul> collapsed into
   undifferentiated lines with no markers and no spacing. This extends the
   system's own idiom (a short orange rule as the marker) to the content blocks
   that carry lists. .legal keeps its own disc treatment. */
.editorial__body ul,
.partner__main ul,
.partner__aside ul,
.cell ul,
.row__body ul,
.acc__body ul,
.step ul,
.hire ul{display:grid;gap:8px;margin-top:var(--s3)}
.editorial__body li,
.partner__main li,
.partner__aside li,
.cell li,
.row__body li,
.acc__body li,
.step li,
.hire li{
  position:relative;padding-left:20px;color:var(--ink-2);
  font-size:var(--fs-body);line-height:1.5;
}
.editorial__body li::before,
.partner__main li::before,
.partner__aside li::before,
.cell li::before,
.row__body li::before,
.acc__body li::before,
.step li::before,
.hire li::before{
  content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--accent);
}
.band-navy li,
.partner__aside li{color:var(--ink-2)}

/* ---- Rows without a title -------------------------------------------------
   .row is a three-column definition grid (number | title | body). A row that
   carries only a body — a checklist item rather than a term and its
   definition — dropped its text into the narrow title column, where it wrapped
   early and left the wide column empty. */
.row--plain .row__body{grid-column:2/-1}

/* ---- Pull quote -----------------------------------------------------------
   The owner's quotation was built as a .row, which is a definition grid, not a
   quotation: it rendered small, in the narrow column, under a stray rule. */
.pullquote{
  margin:0;padding:var(--s7) 0;
  border-top:2px solid var(--rule);border-bottom:1px solid var(--rule-hair);
}
.pullquote blockquote{margin:0;max-width:26ch;position:relative}
.pullquote p{
  font-size:var(--fs-h2);font-weight:800;line-height:1.15;letter-spacing:-.02em;
  color:var(--ink);text-wrap:pretty;max-width:22ch;
}
.pullquote figcaption{margin-top:var(--s5)}
.pullquote cite{
  font-style:normal;font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
@media (min-width:900px){
  .pullquote{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:var(--s7);align-items:end}
  .pullquote blockquote{max-width:none}
  .pullquote p{max-width:20ch}
  .pullquote figcaption{margin-top:0;padding-bottom:6px}
}

/* ---- Row hover accent -----------------------------------------------------
   The 3px hover stripe sat at the row's left edge (left:0) and the row has no
   left padding, so it painted straight over the first 3px of the row number:
   "01" read as "1" whenever the row was hovered. Affected every .rows block —
   Why shippers stay, Service lines, Where our odometers have been, The honest
   version, Good match if you, and How we work.

   Moving the stripe into the page gutter rather than indenting the row keeps
   the row numbers aligned with the section number above them (both at the
   container's left edge) and keeps the rules on .rows and .shead flush. */
.row::before{left:calc(-1 * var(--s3))}

/* ---- Light home hero ------------------------------------------------------
   Every hero shared one navy ground, so arriving on the home page felt the same
   as landing on any inner page. The home hero now sits on paper with navy
   display type; inner pages keep the navy ground, which gives them a focused,
   sectional feel by contrast. This also restores the light-home / dark-inner
   split the previous site was built around.

   Each rule below undoes one navy assumption. The orange top rule, the
   staggered line reveal and the oversized figure are unchanged. */
.hero--light{background:var(--paper);color:var(--ink)}
.hero--light .hero__kick{color:var(--accent)}
.hero--light .hero__sub{color:var(--ink-2)}
.hero--light .hero__foot{border-top-color:var(--rule-2)}
.hero--light .hero__meta .big{color:rgba(16,24,40,.09)}
.hero--light .hero__meta .tag{color:var(--ink-3)}

/* Undo the on-navy outline button: on paper it needs the light treatment. */
.hero--light .btn--outline{border-color:var(--rule-2);color:var(--ink)}
.hero--light .btn--outline:hover{border-color:var(--ink);background:rgba(16,24,40,.05);color:var(--ink)}