/* ==========================================================================
   Creatio Construction: Dump Trucks category page styles
   Loaded only by dump-trucks.html, after style.css. Every class here starts
   with "dt-" (or sits under .page-dump-trucks), so the homepage, Services,
   Equipment Overview and the other category pages are not affected.
   The look is "haul road": the hero photo is laid out wide on a strip of
   asphalt with a dashed brass centre line running from a load point to a
   drop point, and a short manifest of the fleet sits under it. The trucks
   are two cards in identical frames, each topped by a tailgate plate, with
   their figures on a weigh slip. The comparison is a real table, loads are
   dump body profiles filled with material textures, jobs are stops along a
   vertical route, the loader and truck panels are joined by a haul line,
   the operator choice is two lanes split by a centre line and the service
   area is a route out of the Cabo San Lucas yard.

   CONTENTS
   01  Page tokens and navigation state
   02  Hero: copy, wide photo, road strip and manifest
   03  Introduction and haul slip
   04  The fleet: truck cards and weigh slips
   05  Comparison table and picks
   06  Typical loads (dump body profiles)
   07  Applications (route stops)
   08  Loader and truck
   09  Why Creatio
   10  Operator option (lanes)
   11  Travel and service area (route)
   12  Request a quote and related links
   13  FAQ and footer
   14  Motion preferences
   15  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS AND NAVIGATION STATE ======================================= */
.page-dump-trucks {
  --dt-asphalt: #151619;
  --dt-asphalt-2: #1d1f23;
  --dt-asphalt-3: #2a2c31;
  --dt-stone: #f3efe7;
  --dt-stone-2: #e6dfd1;
  --dt-earth: #6d5a43;
  --dt-line: rgba(28, 24, 18, .14);
  --dt-line-strong: rgba(28, 24, 18, .3);
  --dt-line-dark: rgba(255, 255, 255, .12);
  --dt-brass-text: #6f5830; /* darker brass for small text on light surfaces */
  /* fine asphalt grain used on the dark bands */
  --dt-grain:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .05) 0 1px, transparent 1.4px) 0 0 / 9px 11px,
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .035) 0 1px, transparent 1.5px) 0 0 / 15px 13px;
  /* dashed brass centre line */
  --dt-dash: repeating-linear-gradient(90deg, var(--accent) 0 26px, transparent 26px 46px);
  --dt-dash-v: repeating-linear-gradient(180deg, var(--accent) 0 18px, transparent 18px 32px);
}
.page-dump-trucks .nav__sub a[aria-current="page"] { color: var(--accent); }


/* 02 HERO ==================================================================== */
.dt-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 26px 0 0; color: rgba(255, 255, 255, .8);
  background: var(--dt-grain), linear-gradient(180deg, var(--dt-asphalt) 0%, var(--dt-asphalt-2) 100%);
}
.dt-hero::before { /* faint parking bay lines along the top */
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 120px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 110px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
  pointer-events: none;
}
.dt-hero__top { display: grid; gap: 22px; }
.dt-crumbs { margin-bottom: 22px; }
.dt-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: .82rem; }
.dt-crumbs li { display: inline-flex; align-items: center; }
.dt-crumbs li + li::before { content: ""; width: 12px; height: 1px; margin: 0 10px; background: var(--accent); }
.dt-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .7); text-decoration: none; }
.dt-crumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.dt-crumbs [aria-current] { color: var(--white); font-weight: 700; }

.dt-hero__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px;
  font: 500 .74rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.dt-hero__kicker span { padding: 5px 10px; border: 1px solid var(--accent); color: var(--accent); letter-spacing: .16em; }
.dt-hero__title { margin: 0; color: var(--white); font-size: clamp(2.3rem, 9.6vw, 2.6rem); line-height: 1.04; letter-spacing: -.04em; }
.dt-hero__lead { margin: 0 0 24px; font-size: var(--fs-lead); line-height: 1.65; color: rgba(255, 255, 255, .82); }
.dt-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.dt-hero__actions .btn { flex: 1 1 100%; }
.dt-hero__jump {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--white); font: 600 .92rem var(--font-head); text-decoration: none;
  border-bottom: 1px solid rgba(196, 168, 116, .6);
}
.dt-hero__jump:hover { color: var(--accent); }
.dt-hero__jump .icon { color: var(--accent); font-size: .8em; }

.dt-hero__media { position: relative; margin-top: 34px; }
.dt-hero__frame {
  position: relative; overflow: hidden; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--dt-asphalt-3); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9);
}
.dt-hero__frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* the road strip under the wheels */
.dt-road { position: relative; background: #101113; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.dt-road__inner { display: flex; align-items: center; gap: 14px; min-height: 58px; }
.dt-road__line { flex: 1 1 auto; height: 3px; background: var(--dt-dash); opacity: .85; }
.dt-road__pin {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
  font: 600 .8rem var(--font-head); color: var(--accent);
}
.dt-road__pin::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--accent); border-radius: 50%; }
.dt-road__pin--end { flex-direction: row-reverse; }
.dt-road__pin--end::before { background: var(--accent); }
.dt-road__pin em { display: none; font-style: normal; font-weight: 500; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }

.dt-hero__caption {
  display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding-top: 14px; padding-bottom: 6px;
  font-size: .86rem; color: rgba(255, 255, 255, .66);
}
.dt-hero__caption span { font: 600 .7rem var(--font-head); letter-spacing: .18em; color: var(--accent); }

.dt-manifest {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 22px 0 0; border-top: 1px solid var(--dt-line-dark);
}
.dt-manifest > div { padding: 18px 14px 20px 0; border-bottom: 1px solid var(--dt-line-dark); }
.dt-manifest > div:nth-child(odd) { padding-right: 14px; border-right: 1px solid var(--dt-line-dark); }
.dt-manifest > div:nth-child(even) { padding-left: 16px; }
.dt-manifest dt { font: 500 .68rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.dt-manifest dd { margin-top: 6px; color: var(--white); font: 500 .98rem/1.35 var(--font-head); }


/* 03 INTRODUCTION AND HAUL SLIP ============================================= */
.dt-intro { background: var(--white); }
.dt-intro__grid { display: grid; gap: 48px; }
.dt-intro__text .section-title { margin-bottom: 26px; }
.dt-intro__statement { font: 500 var(--fs-lead)/1.55 var(--font-head); color: var(--black); letter-spacing: -.01em; }
.dt-intro__text a { color: var(--black); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.dt-slip {
  position: relative; align-self: start; padding: 30px 26px 26px;
  background: var(--dt-stone); border: 1px solid var(--dt-line);
  border-top: 6px solid var(--dt-asphalt);
}
.dt-slip::after { /* torn tear off edge */
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -9px; height: 9px;
  background: radial-gradient(circle at 7px 0, var(--dt-stone) 6px, transparent 6.5px) 0 0 / 14px 9px repeat-x;
}
.dt-slip__label { margin: 0 0 6px; font: 500 .7rem var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--dt-brass-text); }
.dt-slip__title { margin-bottom: 18px; }
.dt-slip__list { border-top: 1px dashed var(--dt-line-strong); }
.dt-slip__list li { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px dashed var(--dt-line-strong); color: var(--black); font-weight: 700; }
.dt-slip__list span { font: 600 .74rem var(--font-head); color: var(--dt-brass-text); letter-spacing: .1em; }
.dt-slip__foot { margin: 18px 0 0; font-size: .95rem; }


/* 04 THE FLEET ============================================================== */
.dt-fleet { background: var(--dt-stone); }
.dt-fleet__head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); }
.dt-fleet__head .section-title { margin-bottom: 20px; }
.dt-fleet__grid { display: grid; gap: 34px; }

.dt-truck { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--dt-line); box-shadow: 0 30px 60px -44px rgba(20, 16, 10, .55); }
.dt-truck__plate {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px;
  background: var(--dt-asphalt); color: var(--white);
  border-bottom: 4px solid transparent; border-image: repeating-linear-gradient(135deg, var(--accent) 0 10px, var(--dt-asphalt) 10px 20px) 4;
}
.dt-truck__plate span { margin-right: auto; font: 600 .82rem var(--font-head); letter-spacing: .26em; }
.dt-truck__plate i { width: 22px; height: 8px; border-radius: 2px; background: rgba(196, 168, 116, .75); }
.dt-truck__media { overflow: hidden; background: var(--dt-stone-2); }
.dt-truck__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.dt-truck__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 26px 22px 28px; }
.dt-truck__index { margin: 0 0 6px; font: 500 .72rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--dt-brass-text); }
.dt-truck__name { margin-bottom: 14px; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.03em; }
.dt-truck__desc { margin-bottom: 22px; }

.dt-weigh { margin-bottom: 22px; padding: 6px 16px; background: var(--dt-stone); border-left: 3px solid var(--accent); }
.dt-weigh > div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dotted var(--dt-line-strong); font-size: .95rem; }
.dt-weigh > div:last-child { border-bottom: 0; }
.dt-weigh dt { flex: 0 0 auto; font: 500 .7rem var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--gray-500); }
.dt-weigh dd { flex: 1 1 auto; text-align: right; color: var(--black); font-weight: 700; }

.dt-truck__operator { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 24px; font-size: .97rem; }
.dt-truck__operator .icon { margin-top: 5px; color: var(--dt-brass-text); font-size: 1.1rem; }
.dt-truck__operator strong { color: var(--black); }
.dt-truck__cta { margin-top: auto; align-self: flex-start; }
.dt-fleet__note { max-width: 70ch; margin: 30px 0 0; font-size: .95rem; color: var(--gray-500); }


/* 05 COMPARISON ============================================================= */
.dt-compare { background: var(--dt-grain), var(--dt-asphalt); color: rgba(255, 255, 255, .78); }
.dt-table-wrap { background: var(--white); border-radius: var(--radius); overflow: hidden; }
.dt-table { width: 100%; border-collapse: collapse; font-size: .97rem; line-height: 1.5; color: var(--gray-700); }
.dt-table caption {
  padding: 16px 20px; text-align: left; caption-side: top;
  font: 500 .72rem var(--font-head); letter-spacing: .18em; text-transform: uppercase;
  color: var(--white); background: var(--dt-asphalt-3);
}
.dt-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.dt-table tr { display: block; padding: 16px 20px; border-bottom: 1px solid var(--dt-line); }
.dt-table tbody tr:last-child { border-bottom: 0; }
.dt-table th[scope="row"] { display: block; margin-bottom: 8px; text-align: left; font: 600 1.05rem/1.3 var(--font-head); color: var(--black); }
.dt-table td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; color: var(--black); font-weight: 700; }
.dt-table td::before { content: attr(data-label); font: 500 .7rem/2 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--gray-500); }

.dt-pick { display: grid; gap: 16px; margin-top: 30px; }
.dt-pick__item { padding: 24px 22px; border: 1px solid var(--dt-line-dark); background: rgba(255, 255, 255, .03); }
.dt-pick__item h3 { color: var(--white); }
.dt-pick__item p { margin: 0; }
.dt-pick__item--note { border-color: rgba(196, 168, 116, .5); }
.dt-pick__item--note h3 { color: var(--accent); }


/* 06 TYPICAL LOADS ========================================================== */
.dt-loads { background: var(--white); }
.dt-loads__head { margin-bottom: clamp(36px, 5vw, 56px); }
.dt-loads__grid { display: grid; gap: 22px; }
.dt-load { padding: 0 0 6px; }
.dt-load__bed {
  position: relative; display: block; height: 124px; margin-bottom: 20px;
  border-bottom: 4px solid var(--dt-asphalt);
}
.dt-load__bed::before { /* the dump body: open top, ribbed sides, sloped tail */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 42px;
  clip-path: polygon(0 0, 100% 0, 100% 64%, 90% 100%, 0 100%);
  background: repeating-linear-gradient(90deg, transparent 0 34px, rgba(255, 255, 255, .08) 34px 37px), var(--dt-asphalt-3);
}
.dt-load__bed::after { /* the load heaped above the rim */
  content: ""; position: absolute; left: 4px; right: 4px; top: 0; height: 46px;
  clip-path: polygon(0 100%, 6% 70%, 18% 44%, 32% 22%, 46% 6%, 58% 10%, 70% 26%, 84% 48%, 95% 76%, 100% 100%);
}
.dt-load--soil .dt-load__bed::after {
  background: radial-gradient(circle at 30% 40%, rgba(0, 0, 0, .18) 0 2px, transparent 2.5px) 0 0 / 11px 9px, #7a6249;
}
.dt-load--sand .dt-load__bed::after {
  background: radial-gradient(circle, rgba(255, 255, 255, .35) 0 .8px, transparent 1.2px) 0 0 / 5px 5px, #d6c39d;
}
.dt-load--gravel .dt-load__bed::after {
  background:
    radial-gradient(circle at 30% 30%, #9b958a 0 3px, transparent 3.5px) 0 0 / 12px 11px,
    radial-gradient(circle at 70% 70%, #6f6a62 0 2.5px, transparent 3px) 0 0 / 9px 10px, #85807a;
}
.dt-load--debris .dt-load__bed::after {
  background:
    linear-gradient(35deg, transparent 45%, rgba(255, 255, 255, .25) 45% 55%, transparent 55%) 0 0 / 22px 18px,
    linear-gradient(-20deg, transparent 40%, rgba(0, 0, 0, .25) 40% 52%, transparent 52%) 0 0 / 17px 14px, #8e8a83;
}
.dt-load h3 { margin-bottom: 8px; }
.dt-load p { margin: 0; font-size: .98rem; }


/* 07 APPLICATIONS =========================================================== */
.dt-jobs { background: var(--dt-stone); }
.dt-jobs__grid { display: grid; gap: 40px; }
.dt-jobs__intro .section-title { margin-bottom: 20px; }
.dt-route { position: relative; padding-left: 34px; }
.dt-route::before { /* the road */
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 14px;
  background: var(--dt-dash-v) 50% 0 / 2px 100% no-repeat, var(--dt-asphalt);
  border-radius: 3px;
}
.dt-route__stop { position: relative; padding: 0 0 28px; }
.dt-route__stop:last-child { padding-bottom: 0; }
.dt-route__stop::before { /* the stop marker */
  content: ""; position: absolute; left: -34px; top: 6px; width: 14px; height: 14px;
  background: var(--dt-stone); border: 3px solid var(--accent); border-radius: 50%;
}
.dt-route__km { margin: 0 0 4px; font: 600 .7rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--dt-brass-text); }
.dt-route__stop h3 { margin-bottom: 6px; }
.dt-route__stop p:last-child { margin: 0; }


/* 08 LOADER AND TRUCK ======================================================= */
.dt-pair { background: var(--dt-grain), var(--dt-asphalt-2); color: rgba(255, 255, 255, .78); }
.dt-pair__head { max-width: 720px; margin-bottom: clamp(34px, 4vw, 52px); }
.dt-pair__head .section-title { margin-bottom: 18px; color: var(--white); }
.dt-pair__grid { display: grid; gap: 0; }
.dt-pair__panel { padding: 28px 24px; background: var(--dt-asphalt-3); border: 1px solid var(--dt-line-dark); }
.dt-pair__panel h3 { color: var(--white); }
.dt-pair__label { margin: 0 0 8px; font: 500 .7rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.dt-pair__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--white); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.dt-pair__link .icon { color: var(--accent); font-size: .85em; }
.dt-pair__haul { position: relative; height: 48px; }
.dt-pair__haul span { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: var(--dt-dash-v); }
.dt-pair__haul::after { /* arrow head */
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 12px; height: 12px;
  border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: translateX(-50%) rotate(45deg);
}
.dt-pair__note { max-width: 74ch; margin: 30px 0 0; }
.dt-pair__note a { color: var(--white); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }


/* 09 WHY CREATIO ============================================================ */
.dt-why { background: var(--white); }
.dt-why__grid { display: grid; gap: 40px; }
.dt-why__intro .section-title { margin-bottom: 20px; }
.dt-why__list { border-top: 2px solid var(--black); }
.dt-why__list li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; padding: 22px 0; border-bottom: 1px solid var(--dt-line); }
.dt-why__num { font: 600 1.05rem var(--font-head); color: var(--dt-brass-text); letter-spacing: .06em; }
.dt-why__list h3 { margin-bottom: 6px; }
.dt-why__list p { margin: 0; }


/* 10 OPERATOR OPTION ======================================================== */
.dt-operator { background: var(--dt-stone); }
.dt-operator__head { max-width: 760px; margin-bottom: 36px; }
.dt-operator__head .section-title { margin-bottom: 18px; }
.dt-operator__lead { font-size: var(--fs-lead); color: var(--ink); }
.dt-operator__lead strong { color: var(--black); }
.dt-lanes { position: relative; display: grid; background: var(--dt-asphalt); color: rgba(255, 255, 255, .78); }
.dt-lanes::before { /* centre line between the two lanes, drawn on tablets and up */
  content: none; position: absolute; left: 24px; right: 24px; top: 50%; height: 3px; transform: translateY(-50%);
  background: var(--dt-dash);
}
.dt-lanes__lane { padding: 30px 24px 34px; }
.dt-lanes__lane h3 { color: var(--white); }
.dt-lanes__lane p:last-child { margin: 0; }
.dt-lanes__lane--ours { background: var(--dt-dash) 24px 0 / calc(100% - 48px) 3px no-repeat, rgba(196, 168, 116, .08); }
.dt-lanes__label { margin: 0 0 8px; font: 500 .7rem var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.dt-operator__note { display: flex; gap: 12px; align-items: flex-start; max-width: 74ch; margin: 26px 0 0; }
.dt-operator__note .icon { margin-top: 6px; color: var(--dt-brass-text); }


/* 11 TRAVEL AND SERVICE AREA ================================================ */
.dt-area { background: var(--white); }
.dt-area__head { max-width: 780px; margin-bottom: 40px; }
.dt-area__head .section-title { margin-bottom: 18px; }
.dt-map { position: relative; display: grid; gap: 0; padding-left: 34px; }
.dt-map::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 14px; border-radius: 3px;
  background: var(--dt-dash-v) 50% 0 / 2px 100% no-repeat, var(--dt-asphalt);
}
.dt-map__stop { position: relative; display: grid; gap: 2px; padding: 0 0 26px; }
.dt-map__stop:last-child { padding-bottom: 0; }
.dt-map__stop::before {
  content: ""; position: absolute; left: -34px; top: 6px; width: 14px; height: 14px;
  background: var(--white); border: 3px solid var(--accent); border-radius: 50%;
}
.dt-map__stop--base::before { background: var(--accent); }
.dt-map__tag { font: 500 .68rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--dt-brass-text); }
.dt-map__stop strong { font: 600 1.15rem/1.3 var(--font-head); color: var(--black); }
.dt-map__stop span:last-child { font-size: .95rem; color: var(--gray-500); }


/* 12 REQUEST A QUOTE AND RELATED LINKS ===================================== */
.dt-quote { background: var(--dt-grain), var(--dt-asphalt); color: rgba(255, 255, 255, .78); }
.dt-quote__grid { display: grid; gap: 36px; }
.dt-quote__main .section-title { margin-bottom: 18px; color: var(--white); }
.dt-quote__intro { max-width: 60ch; }
.dt-checks { display: grid; gap: 22px; margin: 28px 0; }
.dt-checks__group { padding: 22px 22px 10px; border: 1px solid var(--dt-line-dark); border-top: 3px solid var(--accent); }
.dt-checks__title { color: var(--white); font-size: 1.1rem; margin-bottom: 12px; }
.dt-checks li { display: grid; gap: 2px; padding: 10px 0 12px; border-top: 1px dashed rgba(255, 255, 255, .16); font-size: .95rem; }
.dt-checks li strong { color: var(--white); font-family: var(--font-head); font-weight: 600; }
.dt-quote__extra { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .66); }

.dt-quote__box { align-self: start; display: grid; gap: 14px; padding: 28px 24px; background: var(--dt-asphalt-3); border: 1px solid var(--dt-line-dark); }
.dt-quote__box h3 { color: var(--white); font-size: 1.5rem; margin-bottom: 6px; }
.dt-quote__kicker { margin: 0; font: 500 .7rem var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.dt-quote__box .btn { width: 100%; }
.dt-quote__lines { display: grid; gap: 4px; margin-top: 6px; }
.dt-quote__lines a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--white); font-weight: 700; font-size: .92rem; text-decoration: none; overflow-wrap: anywhere; }
.dt-quote__lines a .icon { color: var(--accent); }
.dt-quote__lines a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

.dt-related { margin-top: 48px; padding-top: 30px; border-top: 1px solid var(--dt-line-dark); }
.dt-related__title { margin-bottom: 14px; color: var(--white); font-size: 1rem; letter-spacing: .02em; }
.dt-related ul { display: flex; flex-wrap: wrap; gap: 10px; }
.dt-related a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px;
  color: var(--white); border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; text-decoration: none; font-size: .95rem;
  transition: border-color .2s, color .2s;
}
.dt-related a .icon { color: var(--accent); font-size: .8em; }
.dt-related a:hover { border-color: var(--accent); color: var(--accent); }


/* 13 FAQ AND FOOTER ========================================================= */
.dt-faq { border-top: 1px solid var(--dt-line); }
.dt-faq .faq__contact a { min-height: 44px; }
.dt-faq .faq__contact a .icon { color: var(--dt-brass-text); }
/* The footer on this page has no blog column, so the four remaining columns share the row */
.page-dump-trucks .footer__claim span { color: var(--accent); }


/* 14 MOTION PREFERENCES ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .dt-related a { transition: none; }
}


/* 15 RESPONSIVE ============================================================= */
@media (max-width: 479px) {
  .dt-quote__box { padding: 24px 18px; }
  .dt-truck__body { padding: 24px 18px 26px; }
  .dt-weigh { padding: 6px 12px; }
}

@media (min-width: 480px) {
  .dt-hero__title { font-size: clamp(2.6rem, 9vw, 3.2rem); }
  .dt-road__pin em { display: inline; }
  .dt-hero__actions .btn { flex: 0 0 auto; }
}

@media (min-width: 560px) {
  .dt-loads__grid { grid-template-columns: repeat(2, 1fr); gap: 34px 26px; }
  .dt-pick { grid-template-columns: repeat(2, 1fr); }
  .dt-pick__item--note { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  .dt-hero { padding-top: 34px; }
  .dt-hero__frame img { aspect-ratio: 2 / 1; }
  .dt-hero__title { font-size: clamp(3.2rem, 6.6vw, 3.8rem); }
  .dt-manifest { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dt-manifest > div, .dt-manifest > div:nth-child(odd), .dt-manifest > div:nth-child(even) { padding: 20px 18px 22px; border-right: 1px solid var(--dt-line-dark); border-bottom: 0; }
  .dt-manifest > div:first-child { padding-left: 0; }
  .dt-manifest > div:last-child { border-right: 0; }

  .dt-intro__grid { grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: start; }
  .dt-truck__body { padding: 30px 30px 32px; }

  /* the comparison becomes a real table */
  .dt-table { table-layout: fixed; }
  .dt-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: table-header-group; }
  .dt-table tr { display: table-row; padding: 0; }
  .dt-table th, .dt-table td { display: table-cell; padding: 16px 20px; vertical-align: top; border-bottom: 1px solid var(--dt-line); text-align: left; }
  .dt-table td::before { content: none; }
  .dt-table tbody tr:last-child th, .dt-table tbody tr:last-child td { border-bottom: 0; }
  .dt-table thead th { padding: 14px 20px; font: 500 .7rem var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--gray-500); background: var(--dt-stone); }
  .dt-table thead th:first-child { width: 26%; }
  .dt-table th[scope="row"] { margin: 0; font-size: 1rem; }
  .dt-table tbody tr:nth-child(even) { background: #faf8f4; }

  .dt-pair__grid { grid-template-columns: 1fr 90px 1fr; align-items: stretch; }
  .dt-pair__haul { height: auto; }
  .dt-pair__haul span { left: 8px; right: 14px; top: 50%; bottom: auto; width: auto; height: 3px; transform: translateY(-50%); background: var(--dt-dash); }
  .dt-pair__haul::after { left: auto; right: 8px; bottom: auto; top: 50%; transform: translateY(-50%) rotate(-45deg); }

  .dt-lanes { grid-template-columns: 1fr 1fr; }
  .dt-lanes__lane--ours { background: rgba(196, 168, 116, .08); }
  .dt-lanes::before { content: ""; left: 50%; right: auto; top: 24px; bottom: 24px; width: 3px; height: auto; transform: translateX(-50%); background: var(--dt-dash-v); }
  .dt-lanes__lane { padding: 40px 40px 44px; }

  .dt-checks { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .dt-hero__top { grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: end; }
  .dt-hero__title { max-width: 12ch; font-size: var(--fs-h1); }
  .dt-hero__lead { margin-bottom: 26px; }
  .dt-hero__media { margin-top: 48px; }

  .dt-fleet__grid { grid-template-columns: 1fr 1fr; gap: 30px; }

  .dt-pick { grid-template-columns: repeat(3, 1fr); }
  .dt-pick__item--note { grid-column: auto; }

  .dt-loads__grid { grid-template-columns: repeat(4, 1fr); }

  .dt-jobs__grid { grid-template-columns: .85fr 1.3fr; gap: 80px; align-items: start; }
  .dt-jobs__intro { position: sticky; top: calc(var(--header-h) + 40px); }
  .dt-route { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; padding-left: 0; }
  .dt-route::before { content: none; }
  .dt-route__stop { padding: 26px 0 28px 34px; border-top: 1px solid var(--dt-line); }
  .dt-route__stop:last-child { padding-bottom: 28px; }
  .dt-route__stop::after { /* a short stretch of road beside every stop */
    content: ""; position: absolute; left: 0; top: 26px; bottom: 26px; width: 14px; border-radius: 3px;
    background: var(--dt-dash-v) 50% 0 / 2px 100% no-repeat, var(--dt-asphalt);
  }
  .dt-route__stop::before { left: 1px; top: 30px; z-index: 1; width: 12px; height: 12px; border-width: 2px; }

  .dt-why__grid { grid-template-columns: .85fr 1.3fr; gap: 80px; align-items: start; }
  .dt-why__intro { position: sticky; top: calc(var(--header-h) + 40px); }
  .dt-why__list li { grid-template-columns: 64px minmax(0, .9fr) minmax(0, 1.2fr); gap: 0 28px; align-items: baseline; }
  .dt-why__list li > div { display: contents; }
  .dt-why__list h3 { margin: 0; }

  /* the service area runs left to right along one road */
  .dt-map { grid-template-columns: repeat(5, 1fr); gap: 20px; padding: 40px 0 0; }
  .dt-map::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 14px; background: var(--dt-dash) 0 50% / 100% 2px no-repeat, var(--dt-asphalt); }
  .dt-map__stop { padding: 0; }
  .dt-map__stop::before { left: 0; top: -40px; }

  .dt-quote__grid { grid-template-columns: 1.4fr .8fr; gap: 64px; }
  .dt-quote__box { position: sticky; top: calc(var(--header-h) + 40px); }

  .page-dump-trucks .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}

@media (min-width: 1440px) {
  .dt-truck__body { padding: 34px 38px 38px; }
}