/*
  HaulRush "Freight x AI" static page
  Source reference frames: Desktop 1440 × 1050 and Mobile 420 × 983.592.
  The custom properties below are the main adaptation points for future revisions.
*/
:root {
  --haulrush-carmine: #9B1E15;
  --ink: #000000;
  --mobile-field: #E7E7E7;
  --white: #FFFFFF;
  --heading-font: "Rubik", Arial, sans-serif;
  --legal-font: "Fira Sans", Arial, sans-serif;
  --desktop-hero-height: 810px;
  --desktop-footer-height: 240px;
  --mobile-hero-height: 860px;
  --mobile-footer-height: 123.592px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; }
body {
  background: var(--ink);
  color: var(--ink);
  font-family: var(--heading-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
img { display: block; max-width: 100%; }
.page-shell { width: 100%; overflow: hidden; }

.hero {
  position: relative;
  height: clamp(620px, 56.25vw, var(--desktop-hero-height));
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.hero-media,
.hero-image,
.mobile-image-fade {
  position: absolute;
  pointer-events: none;
}
.hero-media { inset: 0; z-index: 0; overflow: hidden; }
.hero-image {
  top: 0;
  left: 0;
  width: auto;
  max-width: none;
  height: 120.965%;
  filter: grayscale(1) brightness(1.05);
  transform: scaleX(-1);
  transform-origin: center;
  user-select: none;
}
.hero-image-cutout,
.mobile-image-fade { display: none; }

.site-header {
  position: absolute;
  z-index: 4;
  top: clamp(18px, 1.6295vw, 23.465px);
  left: clamp(24px, 2.4631vw, 35.469px);
}
.brand { display: block; }
.brand img {
  width: clamp(245px, 22.8472vw, 329px);
  height: auto;
}

h1 {
  position: absolute;
  z-index: 3;
  top: clamp(165px, 14.1254vw, 203.406px);
  left: clamp(48px, 6.6635vw, 95.954px);
  margin: 0;
  color: var(--ink);
  font-family: var(--heading-font);
  font-size: clamp(58px, 6.2267vw, 89.665px);
  font-weight: 800;
  line-height: 1.1789;
  letter-spacing: -0.043em;
  white-space: nowrap;
}

.site-footer {
  position: relative;
  height: clamp(180px, 16.6667vw, var(--desktop-footer-height));
  overflow: hidden;
  background: var(--haulrush-carmine);
  color: var(--white);
  text-align: center;
}
.footer-brand {
  position: absolute;
  top: 39.163%;
  left: 50%;
  display: block;
  width: clamp(240px, 22.3611vw, 322px);
  transform: translateX(-50%);
}
.footer-brand img { width: 100%; height: auto; }
.site-footer p {
  position: absolute;
  top: 77.458%;
  left: 50%;
  width: min(520px, calc(100% - 40px));
  margin: 0;
  transform: translateX(-50%);
  color: var(--white);
  font-family: var(--legal-font);
  font-size: clamp(13px, 1.1111vw, 16px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.011em;
}

/* The Figma mobile frame changes the composition, not merely its scale. */
@media (max-width: 767px) {
  body { background: var(--mobile-field); }

  .hero {
    height: clamp(760px, 204.7619vw, var(--mobile-hero-height));
    background: var(--ink);
  }

  .hero-image {
    top: auto;
    bottom: -3px;
    left: -27.817%;
    width: 171.9403%;
    height: auto;
    filter: grayscale(1) brightness(1.05);
  }
  .hero-image-cutout { display: block; z-index: 3; }
  .hero-image-base { z-index: 1; }

  .mobile-image-fade {
    display: block;
    z-index: 2;
    top: -42px;
    right: -9%;
    left: -9%;
    height: 86.412%;
    background: linear-gradient(
      180deg,
      rgba(231, 231, 231, 1) 0%,
      rgba(231, 231, 231, 1) 57%,
      rgba(231, 231, 231, 0.96) 67%,
      rgba(231, 231, 231, 0.55) 80%,
      rgba(231, 231, 231, 0) 100%
    );
  }

  .site-header {
    top: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    height: 58px;
    display: flex;
    align-items: flex-start;
    background: var(--white);
    padding: 20px 0 0 clamp(24px, 7.1429vw, 30px);
  }
  .brand img {
    width: min(56.746vw, 238.334px);
    height: auto;
  }

  h1 {
    z-index: 5;
    top: clamp(150px, 42.9655vw, 180.455px);
    left: clamp(24px, 8.1292vw, 34.143px);
    font-size: clamp(48px, 14.0476vw, 59px);
    line-height: 0.9153;
    letter-spacing: -0.044em;
  }

  .site-footer {
    height: var(--mobile-footer-height);
  }
  .footer-brand {
    top: 30px;
    width: calc(100% - 60px);
    max-width: 360px;
  }
  .site-footer p {
    top: 57.254px;
    width: calc(100% - 60px);
    min-height: 36.338px;
    display: grid;
    place-items: center;
    color: #E5E5E5;
    font-size: 16px;
    line-height: 1.1356;
  }
}

@media (max-width: 359px) {
  h1 { font-size: 45px; }
  .site-header { padding-left: 22px; }
  .footer-brand,
  .site-footer p { width: calc(100% - 44px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}