/* ==========================================================================
   Mad Duck - content and layout updates (Freight Solutions pass)
   Loaded after mad-duck-modern.css and before mad-duck-mobile.css.
   ========================================================================== */

/* Homepage: the video now plays full-screen with nothing over it; the
   headline and buttons sit in their own band directly after it. */
main .md-hero-copy { padding-bottom: 0; border-bottom: 1px solid var(--md-border-dark); }
main .md-hero-copy a.border-white\/25 { border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; }
main .md-hero-copy a.border-white\/25:hover { border-color: var(--md-red); }

/* Inner-page heroes: optional line art on the right, from the supplied
   wireframe set, inverted to read as white linework on the dark band. */
main .md-hero-has-art { isolation: isolate; }
main .md-hero-has-art > .container { position: relative; z-index: 1; }
main .md-hero-art {
  position: absolute;
  z-index: 0;
  right: 1%;
  bottom: 0;
  width: min(48vw, 760px);
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  filter: invert(1);
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 38%, #000 100%);
}
main .md-hero-art-truck { aspect-ratio: 2.69 / 1; background-image: url("/images/wireframes/05-american-long-nose-truck-wireframe.png"); }
main .md-hero-art-gate  { aspect-ratio: 2.5 / 1;  background-image: url("/images/wireframes/02-freight-yard-gate-wireframe-longnose-v2.png"); }
main .md-hero-art-route { aspect-ratio: 3 / 1;    background-image: url("/images/wireframes/03-coast-to-coast-route-wireframe.png"); }
@media (max-width: 1023px) { main .md-hero-art { display: none; } }

main .qd-hero-note a { white-space: nowrap; }
main .qd-form-note { margin-bottom: 0.25rem; }

/* Jump targets land below the fixed header (also covers plain #links). */
#company-driver-form,
#owner-operator-form,
#partnership-inquiry { scroll-margin-top: calc(var(--nav-height) + 1.25rem); }

/* Footer: "Get in touch" was stacked directly under the Company list. */
footer.band .container > div > div + h3 { margin-top: 2.5rem; }

/* --------------------------------------------------------------------------
   Wireframe illustrations on light sections: drawn deliberately, in open
   space, never behind body copy.
   -------------------------------------------------------------------------- */
main .wf-what-we-do::before  { opacity: 0.3; }
main .wf-inquiry-copy::before { opacity: 0.34; }
main .wf-contact-dock::before { opacity: 0.34; }
main .md-rolling::before { opacity: 0.24; }
main .qd-cta::before {
  opacity: 0.22;
  -webkit-mask-image: radial-gradient(ellipse 34% 46% at 50% 50%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 60%, #000 100%), linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: radial-gradient(ellipse 34% 46% at 50% 50%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.18) 60%, #000 100%), linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* About / Our Story: the yard sat behind the paragraphs. It now sits in the
   open space under the heading, in the left column only. */
main .wf-about-story::before {
  top: auto;
  bottom: 2.5rem;
  left: 0;
  right: auto;
  transform: translateZ(0);
  width: min(40vw, 600px);
  height: calc(min(40vw, 600px) / 2.41);
  background-position: right bottom;
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
}
@media (max-width: 1279px) {
  main .wf-what-we-do::before { opacity: 0.24; }
  main .wf-inquiry-copy::before, main .wf-contact-dock::before { opacity: 0.28; }
  main .qd-cta::before { opacity: 0.18; }
}
@media (max-width: 1023px) {
  /* single column: no open space beside the text, so it goes */
  main .wf-about-story::before { display: none; }
}
@media (max-width: 767px) {
  main .wf-what-we-do::before { opacity: 0.16; }
  main .qd-cta::before { opacity: 0.14; }
  main .md-rolling::before { opacity: 0.18; }
}

/* --------------------------------------------------------------------------
   Legal pages (Privacy Policy, Terms & Conditions)
   -------------------------------------------------------------------------- */
main .qd-legal { max-width: 50rem; color: var(--md-text-muted); font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
main .qd-legal h2 {
  margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--md-border);
  font-family: var(--font-display, inherit); font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; color: var(--md-text);
  scroll-margin-top: calc(var(--nav-height) + 1.25rem);
}
main .qd-legal h3 { margin-top: 2rem; font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: var(--md-text); }
main .qd-legal > :first-child { margin-top: 0; }
main .qd-legal h2 + p, main .qd-legal h2 + h3, main .qd-legal h3 + p { margin-top: 0.75rem; }
main .qd-legal p { margin-top: 1rem; }
main .qd-legal ul { margin-top: 1rem; padding-left: 1.35rem; list-style: disc; }
main .qd-legal li { margin-top: 0.5rem; padding-left: 0.2rem; }
main .qd-legal li::marker { color: var(--md-red); }
main .qd-legal strong { color: var(--md-text); font-weight: 700; }
main .qd-legal a { color: var(--md-red); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 767px) { main .qd-legal h2 { margin-top: 2.25rem; padding-top: 1.25rem; } }

/* --------------------------------------------------------------------------
   Inner hero with a photo beside the heading (Drive With Us)
   -------------------------------------------------------------------------- */
main .md-hero-split { display: grid; gap: 2.5rem; align-items: center; }
main .md-hero-media {
  width: 100%;
  max-width: 30rem;
  aspect-ratio: 488 / 383;
  overflow: hidden;
  border-radius: var(--md-radius, 2px);
  border: 1px solid var(--md-border-dark);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, 0.6);
}
@media (min-width: 1024px) {
  main .md-hero-split { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: 4rem; }
  main .md-hero-media { max-width: none; }
}
@media (max-width: 1023px) {
  main .md-hero-media { max-width: 26rem; }
}

/* Home / Advantages: show the whole photo at its own proportions instead of
   cropping it to fill a tall column. On desktop it stays in view beside the
   benefit cards while they scroll past. */
main img[src$="home-advantages-truck.jpg"] {
  height: auto;
  aspect-ratio: 1536 / 1024;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 1024px) {
  main div:has(> img[src$="home-advantages-truck.jpg"]) {
    align-self: start;
    position: sticky;
    top: calc(var(--nav-height) + 1.5rem);
  }
}

/* --------------------------------------------------------------------------
   Always Rolling: the heading sits inside the wireframe band at the top and
   the video starts directly beneath that band, so the drawing is never
   covered. The video is a wide, short banner (3.2:1).
   -------------------------------------------------------------------------- */
main .md-rolling.md-rolling-video { padding-top: 0; padding-bottom: 4.5rem; overflow: hidden; }
main .md-rolling.md-rolling-video > .container:first-child {
  min-height: var(--md-roll-band);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--md-roll-head-offset, 2.5rem);
}
main .md-rolling-media {
  margin: 0 auto;
  width: 100%;
  max-width: 80rem;
  aspect-ratio: 2560 / 800;
  overflow: hidden;
  border-radius: var(--md-radius, 2px);
  background-color: #0b1a2e;
  box-shadow: 0 30px 60px -30px rgba(10, 20, 40, 0.55);
}
@media (max-width: 1023px) {
  main .md-rolling.md-rolling-video { padding-bottom: 3.5rem; }
}
@media (max-width: 767px) {
  main .md-rolling.md-rolling-video { padding-bottom: 3rem; }
  main .md-rolling.md-rolling-video > .container:first-child { --md-roll-head-offset: 1.5rem; }
}

/* ==========================================================================
   Supplied line art (Mad-Duck-Line-Art-v2)
   01 About "Ready to roll?" (light)   02 Contact hero (white on black)
   03 Drive With Us "Talk to a person" (light)
   04 Freight Solutions hero (white on black)
   ========================================================================== */

/* White-on-black heroes: right half only, no inversion, vertically centred
   in the space below the fixed header. */
main .md-hero-art-contact,
main .md-hero-art-mountains {
  top: var(--nav-height);
  bottom: 0;
  right: 0;
  width: 48%;
  aspect-ratio: auto;
  background-size: contain;
  background-position: right center;
  filter: none;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 100%);
}
main .md-hero-art-contact   { background-image: url("/images/line-art/02-contact-dark.png"); }
main .md-hero-art-mountains { background-image: url("/images/line-art/04-freight-solutions-mountains.png"); }

/* Light sections: full-width drawing behind the content. */
main .md-art-ready,
main .md-art-talk { position: relative; isolation: isolate; overflow: hidden; }
main .md-art-ready > *,
main .md-art-talk > * { position: relative; z-index: 1; }
main .md-art-ready::before,
main .md-art-talk::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  width: 100%;
  aspect-ratio: 2172 / 724;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center bottom;
  pointer-events: none;
  user-select: none;
}
main .md-art-ready::before {
  top: 50%;
  transform: translate(-50%, -46%);
  background-image: url("/images/line-art/01-ready-to-roll-v2.png");
  opacity: 0.42;
}
main .md-art-talk::before {
  bottom: 0;
  transform: translate(-50%, 16%);
  background-image: url("/images/line-art/03-drive-with-us.png");
  opacity: 0.55;
}
@media (max-width: 1023px) {
  main .md-art-ready::before,
  main .md-art-talk::before { width: 150%; }
}
@media (max-width: 767px) {
  main .md-art-ready::before { width: 190%; opacity: 0.3; }
  main .md-art-talk::before { width: 190%; opacity: 0.45; transform: translate(-50%, 8%); }
}
/* The two white-on-black hero drawings need the full desktop width to stay
   clear of the heading and paragraph; below that they are hidden. */
@media (max-width: 1279px) {
  main .md-hero-art-contact,
  main .md-hero-art-mountains { display: none; }
}
/* The freight heading runs wider than the contact one, so its drawing
   takes a little less of the hero. */
main .md-hero-art-mountains { width: 40%; }

/* ==========================================================================
   Form-section drawings (Mad-Duck-Form-Drawings)
   Company Drivers: across the lower part of the prequalification section.
   Owner-Operators: the open left side, below the contact line, beside the form.
   ========================================================================== */
main .md-form-art { position: relative; isolation: isolate; overflow: hidden; }
main .md-form-art > * { position: relative; z-index: 1; }
main .md-form-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: 2172 / 724;
}
main .md-form-art-cd::before {
  left: 0;
  bottom: 1rem;
  width: min(41vw, 720px);
  background-image: url("/images/form-drawings/company-drivers-prequalification.png");
  background-position: left bottom;
  opacity: 0.55;
}
main .md-form-art-oo::before {
  left: 0;
  bottom: 12rem;
  width: min(41vw, 720px);
  background-image: url("/images/form-drawings/owner-operators-inquiry.png");
  background-position: left bottom;
  opacity: 0.55;
}
/* Single-column layouts have no open space beside the form. */
@media (max-width: 1023px) {
  main .md-form-art::before { display: none; }
}