/* X Truck Lines: site-wide extras on top of rig.css + brand.css.
   Tokens only. Raw colours for the night map live in brand.css. */

/* ---- header: logo + two actions ------------------------------------------ */
.logo img{display:block;height:44px;width:auto}
.fg .logo img{height:52px}
@media (min-width:1024px){ .hdr-acts{display:flex;gap:8px} }


/* the wide, heavy X voice: h2 a touch tighter so long heads still balance */
h2{letter-spacing:-.026em}
.sec-row{display:flex;align-items:end;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)}
.sec-row .sec-head{margin-bottom:0}

/* ---- hiring markets strip: the page's one marquee -------------------------- */
.mq{position:relative;display:flex;align-items:stretch;height:64px;overflow:hidden;background:var(--surface);color:var(--ink);text-decoration:none;
  box-shadow:inset 0 1px 0 var(--rule),inset 0 -1px 0 var(--rule)}
.mq:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;border-radius:0}
.mq-l{flex:none;display:flex;align-items:center;gap:14px;padding:0 22px 0 max(var(--gutter),(100vw - var(--wrap))/2);background:var(--brand);color:var(--on-brand);font-weight:650;font-size:.95rem;z-index:1}
.mq-ls{display:none}
.mq-go{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-pill);background:var(--surface);color:var(--brand-ink);font-size:.88rem;transition:background-color var(--duration-quick) var(--ease)}
.mq:hover .mq-go{background:var(--brand-tint)}
.mq-v{flex:1;overflow:hidden;display:flex;-webkit-mask-image:linear-gradient(90deg,transparent,black 40px);mask-image:linear-gradient(90deg,transparent,black 40px)}
.mq-t{display:flex;width:max-content}
.mq-g{display:flex}
.mq-i{display:flex;align-items:center;gap:10px;padding:0 28px;white-space:nowrap;box-shadow:inset -1px 0 0 var(--rule)}
.mq-i em{font-style:normal;font-size:.84rem;font-weight:600;color:var(--brand-ink)}
.mq-i b{font-family:var(--font-disp);font-variation-settings:"wdth" var(--disp-wdth);font-weight:750;font-size:1.02rem;letter-spacing:-.01em}
.mq-i small{color:var(--muted);font-size:.84rem}
@media (prefers-reduced-motion:no-preference){
  .mq-t{animation:mq-run 44s linear infinite}
  .mq:hover .mq-t,.mq:focus-visible .mq-t{animation-play-state:paused}
}
@keyframes mq-run{to{transform:translateX(calc(-100% / 3))}}
@media (max-width:767px){ .mq{height:56px} .mq-lt{display:none} .mq-ls{display:inline} .mq-l{gap:10px;padding-right:14px} .mq-i{padding:0 18px} }

/* ---- the job board (open markets) ------------------------------------------ */
.board{padding:0;overflow:hidden}
.board .bh{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 24px;border-bottom:1px solid var(--rule);font-weight:650;color:var(--ink)}
.board .bh span+span{font-weight:500;color:var(--muted)}
.board ul{list-style:none}
.board li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px;border-top:1px solid var(--rule)}
.board li:first-child{border-top:0}
.board .jb{display:grid;gap:6px;min-width:0}
.board .jb b{font-family:var(--font-disp);font-variation-settings:"wdth" 112;font-weight:700;font-size:1.06rem;color:var(--ink);letter-spacing:-.01em}
.board .jt{display:flex;flex-wrap:wrap;gap:6px}
.board .jt span{font-size:.82rem;color:var(--ink-2);padding:2px 10px;border-radius:var(--r-pill);background:var(--sunk)}
.board .open{flex:none;display:inline-flex;align-items:center;gap:8px;font-family:var(--font-disp);font-variation-settings:"wdth" var(--data-wdth);font-weight:700;font-size:.86rem;letter-spacing:.04em;color:var(--brand-ink)}
.board .open i{width:8px;height:8px;border-radius:50%;background:var(--brand)}

/* ---- contact lists inside text columns ---------------------------------------- */
.rec{list-style:none;display:grid;gap:18px;margin-top:28px;padding-top:24px;border-top:1px solid var(--rule)}
.rec li{display:grid;gap:2px;align-content:start}
.rec b{font-weight:650;color:var(--ink)}
.rec a,.dir a{min-height:44px}
.rec a{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2);text-decoration:none;width:fit-content}
.rec a:hover{color:var(--brand-ink);text-decoration:underline}
.rec a .i{color:var(--brand)}
.dir{gap:0}
.dir>div{gap:2px}

/* ---- the X: where rail meets road (diagram) -------------------------------- */
.xc{border-radius:var(--r-surface);background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule),var(--shadow-1);padding:clamp(10px,1.4vw,18px)}
.xcross{display:block;width:100%;height:auto;aspect-ratio:1}
.xcross .tie{fill:var(--rule-strong)}
.xcross .rail{stroke:var(--ink-2);stroke-width:6;stroke-linecap:round}
.xcross .road{stroke:var(--tile-dark);stroke-width:100}
.xcross .lane{stroke:var(--on-dark);stroke-width:4;stroke-dasharray:26 22}
.xcross .edge{stroke:var(--brand);stroke-width:3}
.xcross text{font-family:var(--font-disp);font-variation-settings:"wdth" var(--data-wdth);font-weight:650;font-size:13px;letter-spacing:.08em;fill:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .js .xcross .tie{opacity:0;transition:opacity .6s var(--ease)}
  .js .xcross .draw{stroke-dasharray:651;stroke-dashoffset:651}
  .js .xc.in .xcross .tie{opacity:1}
  .js .xc.in .xcross .draw{stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease)}
  .xcross .lane{animation:xlane 1.6s linear infinite}
}
@keyframes xlane{to{stroke-dashoffset:-48}}

/* ---- operations map (night plate in both themes) ----------------------------- */
.xmapf{border-radius:var(--r-surface);overflow:hidden;background:radial-gradient(120% 100% at 60% 30%,var(--map-bg-2) 0%,var(--map-bg) 70%);box-shadow:var(--shadow-2)}
.xmap{display:block;width:100%;height:auto}
.xmap .dots circle{fill:var(--map-dot);opacity:.42}
.xmap .halo{fill:var(--map-mk);opacity:.13}
.xmap .orbit{fill:none;stroke:var(--map-mk);stroke-opacity:.45;stroke-dasharray:2 4}
.xmap .mk{fill:var(--map-mk)}
.xmap .ring{fill:none;stroke:var(--map-mk);stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0}
.xmap .tr{fill:var(--map-mk)} .xmap .cb{fill:var(--map-lbl)}
.xmap .lbl{font-family:var(--font-disp);font-variation-settings:"wdth" 112;font-weight:750;font-size:25px;fill:var(--map-lbl);paint-order:stroke;stroke:var(--map-halo);stroke-width:6px;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){ .xmap .ring{animation:xring 3s cubic-bezier(.32,.72,0,1) infinite} }
@keyframes xring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(3);opacity:0}}
.xmapf figcaption{display:flex;flex-wrap:wrap;gap:10px 26px;padding:0 28px 22px;color:var(--map-cap);font-size:.9rem}
.xmapf figcaption span{display:inline-flex;align-items:center;gap:10px}
.xl-mk{width:12px;height:12px;border-radius:50%;background:var(--map-mk);box-shadow:0 0 0 5px color-mix(in srgb,var(--map-mk) 18%,transparent)}
.xl-trk{width:18px;height:9px;border-radius:2px;background:linear-gradient(90deg,var(--map-mk) 70%,var(--map-lbl) 70%)}
@media (max-width:899px){ .xmap .lbl{font-size:30px} .xmapf figcaption{padding:0 18px 18px} }

/* fleet by market */
.xnet-g{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);margin-top:clamp(32px,4vw,48px);align-items:start}
.bars{list-style:none;display:grid;gap:14px}
.bars li{display:grid;grid-template-columns:170px minmax(0,1fr) 40px;align-items:center;gap:16px;font-size:.96rem;color:var(--ink)}
.bars i{display:block;height:10px;border-radius:var(--r-pill);background:var(--brand);transform-origin:left;transform:scaleX(var(--w))}
.bars b{text-align:right;font-family:var(--font-disp);font-variation-settings:"wdth" var(--data-wdth);font-weight:700;font-size:1.08rem;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:no-preference){
  .js .bars.rv i{transition:transform 1.4s var(--ease) .2s}
  .js .bars.rv:not(.in) i{transform:scaleX(0)}
}
.tot{display:grid;gap:4px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.tot span{color:var(--muted)}
.tot b{font-family:var(--font-disp);font-variation-settings:"wdth" 70;font-weight:700;font-size:clamp(3.4rem,2.4rem + 3vw,5.2rem);line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.yards{display:grid;grid-template-columns:28px 1fr;gap:12px;margin-top:20px;color:var(--ink-2)}
.yards .i{width:24px;height:24px;color:var(--brand)}
@media (max-width:899px){ .xnet-g{grid-template-columns:minmax(0,1fr)} }
@media (max-width:479px){ .bars li{grid-template-columns:118px minmax(0,1fr) 30px;gap:10px;font-size:.9rem} }

/* ---- customer logos ------------------------------------------------------- */
.cls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.cl{display:grid;place-items:center;height:116px;padding:22px 30px;border-radius:var(--r-surface);background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule)}
.on-surface .cl{background:var(--paper)}
.cl img{max-height:56px;width:auto;max-width:100%;object-fit:contain}
.cl.jbh{font-family:var(--font-disp);font-variation-settings:"wdth" 125;font-weight:900;font-size:1.5rem;letter-spacing:.02em;color:var(--muted)}
@media (max-width:767px){ .cls{grid-template-columns:1fr 1fr} .cl{height:96px;padding:18px} }

/* ---- the PURE family: logo cards ------------------------------------------ */
.lgc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lg{position:relative;display:grid;grid-template-rows:140px auto;border-radius:var(--r-surface);background:var(--surface);box-shadow:inset 0 0 0 1px var(--rule);text-decoration:none;color:var(--ink);overflow:hidden;
  transition:box-shadow var(--duration-fast) var(--ease),transform var(--duration-fast) var(--ease)}
a.lg:hover{box-shadow:inset 0 0 0 1px var(--rule-strong),var(--shadow-1);transform:translateY(-2px)}
.lg .lg-l{display:grid;place-items:center;padding:26px 40px;background:var(--sunk)}
.lg .lg-l img{max-height:72px;max-width:100%;width:auto;object-fit:contain}
.lg .lg-l.dk{background:var(--tile-dark)}
.lg .lg-l.dk img{max-height:96px;border-radius:var(--r-ctl)}
.lg .lg-b{display:grid;gap:2px;padding:18px 56px 20px 22px}
.lg .lg-b b{font-weight:650;font-size:1.06rem}
.lg .lg-b small{color:var(--muted)}
.lg>.i{position:absolute;right:20px;bottom:22px;width:20px;height:20px;color:var(--brand)}
.lg.cur{box-shadow:inset 0 0 0 2px var(--brand)}
.lg .here{position:absolute;right:18px;bottom:20px;font-size:.84rem;font-weight:600;color:var(--brand-ink)}
.lg.cur .lg-b{padding-right:110px}

@media (max-width:899px){ .lgc{grid-template-columns:1fr 1fr} }
@media (max-width:559px){ .lgc{grid-template-columns:1fr} }

/* ---- steps of a real sequence: rig .tl laid out along the road on wide screens */
.tl .sn{display:block;margin-bottom:14px;font-family:var(--font-disp);font-variation-settings:"wdth" var(--data-wdth);font-weight:700;font-size:1.5rem;line-height:1;color:var(--brand-ink)}
.tl b{display:block;font-weight:650;font-size:1.1rem;color:var(--ink);margin-top:10px}
.tl p{color:var(--ink-2);margin-top:4px;max-width:34ch}
.tl .si{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);background:var(--brand-tint);color:var(--brand)}
.tl .si .i{width:22px;height:22px}
@media (min-width:900px){
  .tl.tl-h{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-left:0;border-top:2px solid var(--rule);margin-left:0;padding-top:0}
  .tl.tl-h li{padding:32px 0 0}
  .tl.tl-h li::before{left:0;top:-7px}
}

/* ---- forms ------------------------------------------------------------------ */
.form .full{grid-column:1/-1}
.form .btn{justify-self:start}
.form .ok{grid-column:1/-1}

/* ---- inner page hero ------------------------------------------------------- */
.phero h1{font-size:clamp(2.2rem,1.3rem + 3vw,4rem)}
.crumbs .i{width:14px;height:14px}
.phero .phero-media .hero-frame img{object-position:var(--pos,50% 50%)}

@media (max-width:899px){ .sec-row{align-items:start} }

/* rig's .fb a colour would mute a button placed in the footer bar */
.fb .btn-p{color:var(--on-brand)}

/* ---- footer tagline ------------------------------------------------------- */
.fg .tagl{margin-top:18px;font-family:var(--font-disp);font-variation-settings:"wdth" var(--disp-wdth);font-weight:var(--disp-wght);font-size:1.12rem;line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.fg .tagl+p{margin-top:8px;max-width:34ch}

/* ---- shared section blocks (home, about, services, drive for x) ------------- */
.hero+.mq,.phero+.mq{margin-top:clamp(48px,6vw,80px)}
.why .bento{grid-auto-rows:minmax(210px,auto)}
.why .b-img{grid-column:1/7;grid-row:1/3}
.why .b-1{grid-column:7/13}
.why .b-1 h3{font-family:var(--font-disp);font-variation-settings:"wdth" var(--disp-wdth);font-weight:var(--disp-wght);font-size:clamp(1.6rem,1.2rem + 1.2vw,2.3rem);letter-spacing:-.02em}
.why .b-2{grid-column:7/10}
.why .b-3{grid-column:10/13}
.why .b-4{grid-column:1/7}
.why .b-5{grid-column:7/13}
.why .tile p{max-width:44ch}
.why .b-5::after{width:34%;right:-6%}
.why .b-5 p,.why .b-5 h3{max-width:66%}
.ab-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:center}
.ab-t .lead{margin-top:20px;color:var(--ink);max-width:none}
.ab-t .body{margin-top:16px}
.ab-c{grid-template-columns:1fr 1fr;column-gap:28px;margin-top:24px}
.ab-c>li:nth-child(2){border-top:0}
.svc-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.svc-g>div{display:grid;gap:12px;align-content:start;padding-top:22px;border-top:2px solid var(--ink)}
.svc-g>div>.i{width:30px;height:30px;color:var(--brand)}
.svc-g h3{font-size:1.18rem}
.svc-g ul{list-style:none;display:grid;gap:10px;margin-top:4px}
.svc-g li{display:grid;grid-template-columns:20px 1fr;gap:10px;color:var(--ink-2);font-size:.98rem;line-height:1.45}
.svc-g li .i{width:18px;height:18px;color:var(--brand);margin-top:2px}
@media (max-width:899px){
  .why .bento{grid-auto-rows:auto} .why .tile{min-height:180px}
  .ab-g{grid-template-columns:1fr} .ab-g .xc{max-width:440px}
  .svc-g{grid-template-columns:1fr 1fr}
}
@media (max-width:559px){ .svc-g,.ab-c{grid-template-columns:1fr} .ab-c>li:nth-child(2){border-top:1px solid var(--rule)} }

/* map caption title (drive for x) */
.xmapf figcaption .cap-t{color:var(--map-lbl);font-weight:650}

/* current page inside the mobile drawer (rig styles it only in the desktop nav) */
.drawer li a[aria-current="page"]{color:var(--brand-ink);box-shadow:inset 3px 0 0 var(--brand);padding-left:14px}

/* ---- PURE family grid: five cards, the current one spans two columns ---- */
.lgc .lg.cur{grid-column:span 2}
@media (max-width:559px){ .lgc .lg.cur{grid-column:auto} }

/* ---- contact sign-off: the white X artwork on the dark tile ---- */
.xsig{display:grid;place-items:center;width:clamp(132px,14vw,176px);aspect-ratio:16/10;padding:14px 18px;border-radius:var(--r-surface);background:var(--tile-dark)}
.xsig img{width:100%;height:auto}
@media (max-width:899px){ .xsig{display:none} }

/* ---- photos: the daily loop, photo mosaics, gallery ---- */
.tl .ph{display:block;margin-bottom:22px;border-radius:var(--r-surface);overflow:hidden;aspect-ratio:4/3;background:var(--sunk)}
.tl .ph img{width:100%;height:100%;object-fit:cover}
.mosaic figure img{object-position:var(--pos,50% 50%)}
.ph-more{display:flex;justify-content:flex-end;margin-top:20px}
.svc-ph{margin-top:clamp(40px,5vw,64px)}

/* rig's .lb sets display:grid, which keeps the closed lightbox dialog on screen (transparent, full-viewport, z 90) */
.lb:not([open]){display:none}

/* footer action pair */
.fb-acts{display:inline-flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- refer a driver ---- */
.rf-wrap{max-width:860px}
.rf-head{text-align:center;margin-bottom:32px}
.rf-head .tag{justify-content:center}
.rf-head h1{font-size:clamp(2.2rem,1.3rem + 3vw,3.6rem)}
.rf-head .lead{margin-inline:auto;max-width:56ch;margin-top:14px}
.fset-h{font-size:1.35rem;margin:0 0 18px}
.fset-h:not(:first-of-type){margin-top:36px}
.req{color:#B42318;margin-left:2px}
.rg{display:flex;gap:22px;min-height:48px;align-items:center}
.rd{display:inline-flex;align-items:center;gap:8px;font-weight:500;cursor:pointer}
.rd input{width:20px;height:20px;accent-color:var(--brand)}
.rf-sz{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rf-go{margin-top:28px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err-box{margin-top:18px;background:#FDECEA}
.err-box .i{color:#B42318}
.rf-panel .ok{margin-top:0}