/* ==========================================================================
   Mad Duck - design system
   Loaded after the compiled stylesheet. Replaces the earlier override file.

   Rules are scoped to `main`, to `footer`, or to a named component class
   (.qd-card, .md-dark, .qd-list...). No shared utility is redefined globally,
   so the header, footer and dark sections keep their own treatment.
   ========================================================================== */

:root {
  --md-canvas: #F6F5F2;
  --md-surface: #FFFFFF;
  --md-surface-alt: #ECEAE6;
  --md-night: #141414;
  --md-dark-card: #1B1B1E;
  --md-text: #1A1A1A;
  --md-text-muted: #5F6368;
  --md-text-faint: #8A8F94;
  --md-red: #C8102E;
  --md-border: rgba(26, 26, 26, 0.12);
  --md-border-dark: rgba(255, 255, 255, 0.13);
  --md-shadow: 0 10px 30px rgba(10, 10, 11, 0.08);
  --md-shadow-hover: 0 16px 38px rgba(10, 10, 11, 0.13);
  --md-radius: 8px;
  --md-transition: 200ms ease;
  --md-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ======================================================== canvas + rhythm */

body { background-color: var(--md-canvas); }
main { background-color: var(--md-canvas); color: var(--md-text); }

main .section { padding-top: 5.5rem; padding-bottom: 5.5rem; }
@media (max-width: 1023px) { main .section { padding-top: 4.25rem; padding-bottom: 4.25rem; } }
@media (max-width: 767px)  { main .section { padding-top: 3.25rem; padding-bottom: 3.25rem; } }

main .md-hero { padding-bottom: 5.5rem; }
@media (max-width: 767px) { main .md-hero { padding-bottom: 3.5rem; } }

/* A background change is separation enough - drop doubled-up borders. */
main .md-dark,
main .qd-cta { border-top: 0; border-bottom: 0; }

/* Supporting surface, used sparingly. */
main .band { background-color: var(--md-surface-alt); border-color: transparent; }

/* ============================================================ typography */

main .text-white { color: var(--md-text); }
main .text-white\/90, main .text-white\/80 { color: var(--md-text); }
main .text-white\/70 { color: var(--md-text-muted); }
main .text-white\/45, main .text-white\/30 { color: var(--md-text-faint); }
main .text-white\/10 { color: rgba(26, 26, 26, 0.16); }
main .text-muted, main .body-text { color: var(--md-text-muted); }

main .body-text { line-height: 1.7; max-width: 68ch; }
main .md-hero .body-text { max-width: 46rem; }
main .display-xl { font-size: clamp(2.25rem, 4.4vw, 3.4rem); line-height: 1.05; }
main .display-lg { font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1.1; }

main .eyebrow { margin-bottom: 1.1rem; }
main .mt-14 { margin-top: 2.75rem; }

/* ============================================================== surfaces */

main .bg-surface, main .bg-raised, main .bg-night { background-color: var(--md-surface); }
main .border-hairline { border-color: var(--md-border); }

/* ============================================================ card system */

main .qd-card,
main .qd-form-panel {
  background-color: var(--md-surface);
  border-color: var(--md-border);
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  position: relative;
}

main .qd-card {
  transition: transform 200ms var(--md-ease), box-shadow 200ms var(--md-ease),
              border-color 200ms var(--md-ease);
}
main .qd-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--md-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--md-ease);
  border-radius: var(--md-radius) var(--md-radius) 0 0;
}

@media (hover: hover) {
  main .qd-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--md-shadow-hover);
    border-color: rgba(200, 16, 46, 0.45);
  }
  main .qd-card:hover::before { transform: scaleX(1); }
}

/* Forms never move. */
main .qd-form-panel { transition: none; }
main .qd-form-panel:hover { transform: none; box-shadow: var(--md-shadow); }

/* Informational cards keep the default cursor. */
main .qd-card-static { cursor: default; }

/* Dark cards. */
main .qd-card-dark,
main .md-dark .qd-card {
  background-color: var(--md-dark-card);
  border-color: var(--md-border-dark);
  box-shadow: none;
}
main .qd-card-dark .text-white,
main .md-dark .qd-card .text-white { color: #FFFFFF; }
main .qd-card-dark .qd-list-text,
main .md-dark .qd-card .qd-list-text { color: rgba(255, 255, 255, 0.88); }
main .qd-card-dark .qd-list-item,
main .md-dark .qd-card .qd-list-item,
main .qd-card-dark .border-hairline,
main .md-dark .qd-card .border-hairline { border-color: var(--md-border-dark); }
main .qd-card-dark .body-text,
main .md-dark .qd-card .body-text { color: rgba(255, 255, 255, 0.74); }
@media (hover: hover) {
  main .qd-card-dark:hover,
  main .md-dark .qd-card:hover {
    border-color: rgba(200, 16, 46, 0.55);
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.35);
  }
}

/* Clickable homepage cards use the same language. */
main .md-section a.bg-surface {
  border-radius: var(--md-radius);
  box-shadow: var(--md-shadow);
  border-color: var(--md-border);
  transition: transform 200ms var(--md-ease), box-shadow 200ms var(--md-ease),
              border-color 200ms var(--md-ease);
}
@media (hover: hover) {
  main .md-section a.bg-surface:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--md-shadow-hover);
    border-color: rgba(200, 16, 46, 0.45);
    background-color: var(--md-surface);
  }
}
main .hover\:bg-raised:hover { background-color: var(--md-surface); }

/* ========================================================= dark sections */

main .md-dark {
  background-color: var(--md-night);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}
main .md-dark > .container { position: relative; z-index: 1; }
main .md-dark .text-white { color: #FFFFFF; }
main .md-dark .text-white\/90 { color: rgba(255, 255, 255, 0.92); }
main .md-dark .text-white\/80 { color: rgba(255, 255, 255, 0.82); }
main .md-dark .body-text { color: rgba(255, 255, 255, 0.76); }
main .md-dark .text-muted { color: rgba(255, 255, 255, 0.68); }
main .md-dark .border-hairline { border-color: var(--md-border-dark); }

main .md-hero {
  background-color: var(--md-night);
  color: #FFFFFF;
  border-bottom-color: transparent;
  position: relative;
  overflow: hidden;
}
main .md-hero .text-white, main #hero-pin .text-white { color: #FFFFFF; }
main .md-hero .text-white\/80, main #hero-pin .text-white\/80 { color: rgba(255, 255, 255, 0.82); }
main .md-hero .text-white\/70 { color: rgba(255, 255, 255, 0.72); }
main .md-hero .body-text, main #hero-pin .body-text { color: rgba(255, 255, 255, 0.78); }
main .md-hero .text-muted { color: rgba(255, 255, 255, 0.62); }
main .md-hero .border-hairline { border-color: var(--md-border-dark); }
main #hero-pin { background-color: #0A0A0B; }

main .md-stats { padding-top: 0; padding-bottom: 0; }
main .md-stats .text-accent { color: var(--md-red); }
main .md-stats .text-muted { color: rgba(255, 255, 255, 0.62); }
main .md-stats .border-hairline { border-color: rgba(255, 255, 255, 0.12); }

/* ============================================================== markers */

main .qd-list-item { border-color: var(--md-border); }
main .qd-list-item:last-child { border-bottom: 0; }

main .qd-marker-check {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  margin-top: 0.24rem;
  color: var(--md-text-faint);
  transition: color 200ms var(--md-ease), transform 200ms var(--md-ease);
}
main .qd-card-dark .qd-marker-check,
main .md-dark .qd-marker-check { color: rgba(255, 255, 255, 0.5); }

@media (hover: hover) {
  main .qd-card:hover .qd-marker-check,
  main .md-section a.bg-surface:hover .qd-marker-check {
    color: var(--md-red);
    transform: scale(1.08);
    transition-delay: calc(var(--qd-i, 0) * 40ms);
  }
}
@media (hover: none) {
  main .qd-marker-check { color: var(--md-red); }
}

/* Requirements are not achievements. */
main .qd-marker-req {
  width: 3px;
  height: 1.05rem;
  flex: none;
  margin-top: 0.3rem;
  border-radius: 1px;
  background-color: rgba(200, 16, 46, 0.55);
  transition: background-color 200ms var(--md-ease);
}
@media (hover: hover) {
  main .qd-card:hover .qd-marker-req { background-color: var(--md-red); }
}

@media (prefers-reduced-motion: reduce) {
  main .qd-card,
  main .qd-marker-check,
  main .md-section a.bg-surface { transition: color 200ms ease, border-color 200ms ease; }
  main .qd-card:hover,
  main .md-section a.bg-surface:hover { transform: none !important; }
  main .qd-card:hover .qd-marker-check { transform: none; }
  main .qd-card::before { transition: none; }
}

/* ================================================================ buttons */

main .bg-accent { background-color: var(--md-red); }
main .bg-accent:hover { background-color: #A60D26; }
main .bg-accent.text-white, main .bg-accent .text-white { color: #FFFFFF; }
main a.rounded-sm.bg-accent, main button.rounded-sm.bg-accent,
main a.rounded-sm.border-white\/25, main button.rounded-sm.border-white\/25 {
  min-height: 48px;
  border-radius: var(--md-radius);
  transition: background-color var(--md-transition), border-color var(--md-transition), color var(--md-transition);
}
main .border-white\/25 { border-color: rgba(26, 26, 26, 0.24); }
main .bg-transparent.text-white { color: var(--md-text); }
main .bg-transparent.text-white:hover { color: #FFFFFF; }
main .md-dark .border-white\/25 { border-color: var(--md-border-dark); }
main .md-dark .bg-transparent.text-white { color: #FFFFFF; }

main .md-section a.bg-surface svg { transition: transform 200ms var(--md-ease); }

/* ================================================================= forms */

main input:not([type="checkbox"]):not([type="radio"]),
main select, main textarea {
  background-color: var(--md-surface);
  color: var(--md-text);
  border-color: rgba(26, 26, 26, 0.2);
  border-radius: var(--md-radius);
  min-height: 48px;
}
main textarea { min-height: 128px; }
main input:not([type="checkbox"])::placeholder,
main textarea::placeholder { color: var(--md-text-faint); }
main .placeholder\:text-white\/30::placeholder { color: var(--md-text-faint); }
main label { color: var(--md-text-muted); }
main input:not([type="checkbox"]):not([type="radio"]):focus,
main select:focus, main textarea:focus { border-color: var(--md-red); }
main .grid.gap-5 { gap: 1.35rem; }

main input[type="checkbox"] {
  width: 1.05rem; height: 1.05rem; min-height: 0;
  margin-top: 0.2rem; accent-color: var(--md-red);
  border-radius: 3px; flex: none;
}
main label:has(input[type="checkbox"]) { color: var(--md-text); align-items: flex-start; }

/* ====================================================== contact rows */

main .qd-contact-rows { display: grid; gap: 0.75rem; }
main .qd-contact-row {
  display: flex; align-items: center; gap: 0.9rem;
  color: inherit; text-decoration: none;
}
main .qd-contact-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  border-radius: var(--md-radius);
  border: 1px solid var(--md-border);
  color: var(--md-red);
  transition: background-color var(--md-transition), color var(--md-transition), border-color var(--md-transition);
}
main .qd-card-dark .qd-contact-icon { border-color: var(--md-border-dark); }
main .qd-contact-label {
  display: block; font-size: 0.7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--md-text-muted);
}
main .qd-card-dark .qd-contact-label { color: rgba(255, 255, 255, 0.6); }
main .qd-contact-value {
  display: block; margin-top: 0.15rem; font-weight: 600;
  color: var(--md-text); word-break: break-word;
}
main .qd-contact-value-lg { font-size: 1.35rem; }
main .qd-card-dark .qd-contact-value { color: #FFFFFF; }
@media (hover: hover) {
  main .qd-contact-row:hover .qd-contact-icon {
    background-color: var(--md-red); color: #FFFFFF; border-color: var(--md-red);
  }
}

/* ========================================================== closing CTA */

main .qd-cta {
  background-color: var(--md-surface-alt);
  padding-top: 4.5rem; padding-bottom: 4.5rem;
}
@media (max-width: 767px) { main .qd-cta { padding-top: 3.25rem; padding-bottom: 3.25rem; } }

/* ========================================================== breadcrumbs */

main .qd-crumbs { gap: 0.25rem 0; }
main .md-hero .qd-crumbs .text-muted { color: rgba(255, 255, 255, 0.6); }
main .md-hero .qd-crumbs .text-white\/70 { color: rgba(255, 255, 255, 0.92); }

/* ===================================================== focus visibility */

main a:focus-visible, main button:focus-visible,
main input:focus-visible, main select:focus-visible, main textarea:focus-visible {
  outline: 2px solid var(--md-red);
  outline-offset: 2px;
}

/* =================================================== logistics wireframes */

main .md-wire-bay::after,
main .md-wire-trailer::after,
main .md-stats::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  opacity: 0.07;
}

main .md-wire-bay::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='320' viewBox='0 0 560 320' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='20' y='60' width='140' height='200' rx='4'/%3E%3Crect x='200' y='60' width='140' height='200' rx='4'/%3E%3Crect x='380' y='60' width='140' height='200' rx='4'/%3E%3Cpath d='M0 60h560M0 280h560'/%3E%3Cpath d='M40 260v-60h100v60M220 260v-60h100v60M400 260v-60h100v60'/%3E%3C/svg%3E");
  background-position: right -60px bottom -30px;
  background-size: 560px 320px;
}

main .md-wire-trailer::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260' viewBox='0 0 520 260' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Crect x='30' y='40' width='330' height='130' rx='6'/%3E%3Cpath d='M360 80h60l40 50v40h-100z'/%3E%3Ccircle cx='120' cy='195' r='24'/%3E%3Ccircle cx='190' cy='195' r='24'/%3E%3Ccircle cx='420' cy='195' r='24'/%3E%3Cpath d='M30 170h330M0 230h520'/%3E%3C/svg%3E");
  background-position: right -70px bottom -40px;
  background-size: 520px 260px;
}

main .md-stats::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='200' viewBox='0 0 900 200' fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Cpath d='M0 150C120 150 160 60 280 60S440 150 560 150 720 50 900 50'/%3E%3Ccircle cx='280' cy='60' r='7'/%3E%3Ccircle cx='560' cy='150' r='7'/%3E%3Ccircle cx='40' cy='150' r='7'/%3E%3Ccircle cx='860' cy='52' r='7'/%3E%3C/svg%3E");
  background-position: center bottom -20px;
  background-size: 900px 200px;
  opacity: 0.06;
}

@media (max-width: 767px) {
  main .md-wire-bay::after,
  main .md-wire-trailer::after,
  main .md-stats::after { display: none; }
}

/* ========================================================== nav dropdown */

.qd-dropdown { min-width: 19rem; }
.qd-dropdown > ul {
  border-radius: var(--md-radius);
  border-color: var(--md-border-dark);
  background-color: #171719;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  padding: 0.25rem 0;
  animation: qd-dd-in 160ms ease-out;
}
@keyframes qd-dd-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .qd-dropdown > ul { animation: none; } }

.qd-dropdown > ul > li > a {
  border-bottom: 0 !important;
  padding: 0.7rem 1.15rem;
  letter-spacing: 0.12em;
  transition: background-color var(--md-transition), color var(--md-transition);
}
.qd-dropdown > ul > li > a:hover,
.qd-dropdown > ul > li > a:focus-visible {
  background-color: rgba(255, 255, 255, 0.06); color: #FFFFFF;
}
.qd-dropdown > ul > li > a[aria-current="page"] {
  color: var(--md-red); box-shadow: inset 2px 0 0 var(--md-red);
}
.qd-subnav { padding-left: 0.9rem; padding-bottom: 0.6rem; }
.qd-subnav > a { padding-top: 0.65rem; padding-bottom: 0.65rem; }

/* =============================================================== footer */

footer.band {
  background-color: var(--md-night);
  border-top-color: var(--md-border-dark);
  border-bottom-color: transparent;
}
footer.band .border-hairline { border-color: var(--md-border-dark); }
footer.band .text-muted { color: rgba(255, 255, 255, 0.7); }
footer.band .body-text { color: rgba(255, 255, 255, 0.7); }
footer.band ul { line-height: 1.9; }


/* The artwork is the section's own bottom edge - no dead band beneath it. */
main .md-rolling { padding-top: 4.5rem; padding-bottom: 0; }
main .md-rolling > .container + div { margin-top: 2.5rem; }
@media (max-width: 767px) {
  main .md-rolling { padding-top: 3.25rem; }
  main .md-rolling > .container + div { margin-top: 1.75rem; }
}

/* ==========================================================================
   Logistics wireframe artwork
   Six supplied PNGs, one section each, drawn into the background with
   pseudo-elements. Each box is sized to the asset's own aspect ratio so
   `contain` fits it exactly rather than shrinking it. Decorative only:
   no layout height, no pointer events, no selection, nothing announced.
   ========================================================================== */

main .wf-what-we-do,
main .wf-about-story,
main .wf-inquiry-copy,
main .wf-contact-dock,
main .qd-cta,
main .md-rolling {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

main .wf-what-we-do > *,
main .wf-about-story > *,
main .wf-inquiry-copy > *,
main .wf-contact-dock > *,
main .qd-cta > *,
main .md-rolling > * {
  position: relative;
  z-index: 1;
}

main .wf-what-we-do::before,
main .wf-about-story::before,
main .wf-inquiry-copy::before,
main .wf-contact-dock::before,
main .qd-cta::before,
main .md-rolling::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateZ(0);
}

/* 1. Home / What We Do - long-nose truck, right of the heading ------------ */
/* asset ratio 2.69:1 - box matches, so nothing is cropped or squashed */
main .wf-what-we-do::before {
  top: 1rem;
  right: -3%;
  width: min(66vw, 960px);
  height: calc(min(66vw, 960px) / 2.69);
  background-image: url("/images/wireframes/05-american-long-nose-truck-wireframe.png");
  background-position: right top;
  opacity: 0.15;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 18%, #000 44%, #000 90%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.28) 18%, #000 44%, #000 90%, transparent 100%);
}

/* 2. About / Our Story - loading yard filling the left half --------------- */
/* asset ratio 2.41:1 */
main .wf-about-story::before {
  /* The subject sits in the asset's right two-thirds, so the box is anchored
     by its right edge at ~62% of the section and runs off-stage to the left.
     That lands the yard and truck in the left half, as approved, without
     scaling the artwork unevenly. */
  top: 50%;
  right: 38%;
  transform: translateY(-50%) translateZ(0);
  width: min(80vw, 1180px);
  height: calc(min(80vw, 1180px) / 2.41);
  background-image: url("/images/wireframes/01-warehouse-loading-yard-wireframe.png");
  background-position: right center;
  opacity: 0.15;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 78%, rgba(0,0,0,.35) 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 78%, rgba(0,0,0,.35) 92%, transparent 100%);
}

/* 3. Always Rolling - full-width banner, composition centred -------------- */
/* asset ratio 3.00:1. The sunset illustration owns the lower half of this
   section, so the art fills the open heading band and dissolves into it. */
/* Always Rolling band: the wireframe fills it edge to edge, ceiling to floor */
main .md-rolling {
  --md-roll-band: 20rem;
  padding-top: 5.5rem;
  padding-bottom: 0;
}
main .md-rolling > .container {
  min-height: calc(var(--md-roll-band) - 5.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
main .md-rolling::before {
  inset: 0 0 auto 0;
  width: 100%;
  height: var(--md-roll-band);
  aspect-ratio: auto;
  background-image: url("/images/wireframes/03-coast-to-coast-route-wireframe.png");
  background-position: center 46%;
  background-size: cover;
  opacity: 0.15;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* 4. Partnership Inquiry - long-nose V2 in the open left column ----------- */
/* asset ratio 2.50:1 */
main .wf-inquiry-copy::before {
  left: -22%;
  bottom: 2rem;
  width: 122%;
  aspect-ratio: 2.5 / 1;
  height: auto;
  background-image: url("/images/wireframes/02-freight-yard-gate-wireframe-longnose-v2.png");
  background-position: right bottom;
  background-size: contain;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 14%, #000 34%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 14%, #000 34%, #000 100%);
}

/* 5. Ready to Roll - wide scene across the whole CTA ---------------------- */
/* asset ratio 2.69:1. Forklift artwork no longer appears here. */
main .qd-cta::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(0);
  width: min(104vw, 1600px);
  height: calc(min(104vw, 1600px) / 2.69);
  background-image: url("/images/wireframes/06-ready-to-roll-wide-579-wireframe.png");
  background-position: center center;
  opacity: 0.13;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* 6. Contact - level dock and forklift below the information cards -------- */
/* asset ratio 2.00:1 */
main .wf-contact-dock::before {
  /* The complete scene is visible and its right edge lands where the form
     card begins; it bleeds left past the page margin, where the asset is
     empty anyway, so the subject reads at a believable size. */
  left: -16%;
  bottom: 2rem;
  width: 116%;
  aspect-ratio: 2 / 1;
  height: auto;
  background-image: url("/images/wireframes/04-level-dock-forklift-wireframe.png");
  background-position: right bottom;
  background-size: contain;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 14%, #000 34%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.45) 14%, #000 34%, #000 100%);
}

/* Tablet -------------------------------------------------------------- */
@media (max-width: 1279px) {
  main .wf-what-we-do::before { width: min(70vw, 720px); height: calc(min(70vw, 720px) / 2.69); opacity: 0.11; }
  main .wf-about-story::before { right: 30%; width: min(92vw, 900px); height: calc(min(92vw, 900px) / 2.41); opacity: 0.11; }
  main .wf-inquiry-copy::before { opacity: 0.11; }
  main .wf-contact-dock::before { opacity: 0.11; }
  main .qd-cta::before { width: min(120vw, 1200px); height: calc(min(120vw, 1200px) / 2.69); opacity: 0.10; }
  main .md-rolling { --md-roll-band: 17rem; }
}

/* Mobile - controlled crop, lower weight, never near a form ------------- */
@media (max-width: 767px) {
  main .wf-what-we-do::before { width: 118vw; height: calc(118vw / 2.69); opacity: 0.08; }
  main .wf-about-story::before { right: -10%; width: 150vw; height: calc(150vw / 2.41); opacity: 0.08; }
  main .qd-cta::before { width: 160vw; height: calc(160vw / 2.69); opacity: 0.07; }
  main .md-rolling { --md-roll-band: 13rem; }
  main .md-rolling::before { opacity: 0.11; }
}
@media (max-width: 639px) {
  main .wf-inquiry-copy::before,
  main .wf-contact-dock::before { display: none; }
}

/* ==========================================================================
   Always Rolling: hold the animation in view while the page scrolls past it.
   position: sticky only - the visitor keeps full control of scrolling, the
   scrollbar behaves normally, and nothing is intercepted or snapped.
   ========================================================================== */

/* `clip` instead of `hidden`: hidden would make this a scroll container and
   break the sticky child. */
main .md-rolling { overflow: clip; }

main .ar-pin-track {
  height: 240vh;
  min-height: 1400px;
}
main .ar-pin-stage {
  position: sticky;
  top: calc(var(--nav-height) + 1.5rem);
  width: 100%;
}

@media (max-width: 1023px) {
  main .ar-pin-track { height: 220vh; min-height: 1100px; }
}
@media (max-width: 767px) {
  main .ar-pin-track { height: 200vh; min-height: 900px; }
  main .ar-pin-stage { top: calc(var(--nav-height) + 0.75rem); }
}

/* Reduced motion: no hold, no scrub - the finished frame in normal flow. */
@media (prefers-reduced-motion: reduce) {
  main .ar-pin-track { height: auto; min-height: 0; }
  main .ar-pin-stage { position: static; }
}

/* ==========================================================================
   Always Rolling - sticky pin
   The animation holds on screen while scroll distance drives its timeline.
   This is CSS sticky, not scroll interception: wheel, trackpad, keyboard and
   screen-reader navigation all behave normally and the visitor can leave at
   any point.
   ========================================================================== */

main .md-rolling { overflow: visible; }

main .md-rolling-pin { height: 230vh; }
main .md-rolling-sticky {
  position: sticky;
  top: calc(var(--nav-height) + 1.5rem);
  width: 100%;
}

@media (max-width: 1023px) { main .md-rolling-pin { height: 200vh; } }
@media (max-width: 639px)  { main .md-rolling-pin { height: 170vh; } }

/* Reduced motion: no pinning, no long scroll, just the finished frame. */
main .md-rolling-pin[data-md-pin="off"] { height: auto; }
main .md-rolling-pin[data-md-pin="off"] .md-rolling-sticky { position: static; }
@media (prefers-reduced-motion: reduce) {
  main .md-rolling-pin { height: auto; }
  main .md-rolling-sticky { position: static; }
}