/* Hayes Tipper Hire — brand foundation
   Yellow: primary logo / CTA accent; Blue: fleet / engineering heritage.
   WCAG: yellow should not be used for small text on white. */
:root {
  color-scheme: dark;
  --brand-yellow: #FAC515;
  --brand-blue: #0055A5;
  --brand-navy: #0E1726;
  --brand-white: #FFFFFF;
  --brand-muted: #BAC5D3;
  --brand-surface: #142239;
  --focus-ring: #FAC515;
}
* { box-sizing: border-box; }
html { font-family: system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
body {
  min-height: 100svh;
  margin: 0;
  background: var(--brand-navy);
  color: var(--brand-white);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 85% 10%, rgb(0 85 165 / .35), transparent 45%),
    linear-gradient(135deg, var(--brand-navy) 10%, #102D4C 100%);
}
main {
  min-height: 100svh;
  width: min(100%, 1150px);
  margin-inline: auto;
  padding: clamp(2rem,7vw,5rem);
  display: flex;
  align-items: center;
}
.content { max-width: 780px; }
.kicker {
  color: var(--brand-yellow);
  text-transform: uppercase;
  font-weight: 750;
  letter-spacing: .22em;
  font-size: .8rem;
}
h1 {
  margin: 1.25rem 0;
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  line-height: .96;
  letter-spacing: -.075em;
  font-weight: 850;
}
h1 span { display: block; color: var(--brand-yellow); }
.lead { max-width: 32rem; font-size: clamp(1.1rem,2vw,1.35rem); line-height: 1.6; color: var(--brand-muted); }
.accent-line { width: 76px; height: 5px; margin-top: 2rem; background: var(--brand-yellow); }
.site-status { font-size: .85rem; margin-top: 1.5rem; color: var(--brand-muted); }
::selection { background: var(--brand-yellow); color: var(--brand-navy); }

/* Official transparent PNG is deployed to /assets/hayes_logo on DreamHost.
   Masking uses its actual alpha channel, preserving fine edges without
   colour filters or regenerating the artwork. */
.brand-mark {
  display: block;
  width: min(360px, 72vw);
  aspect-ratio: 1869 / 488;
  background-color: var(--brand-yellow);
  -webkit-mask-image: url("/assets/hayes_logo");
  mask-image: url("/assets/hayes_logo");
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.brand-mark--blue { background-color: var(--brand-blue); }
.brand-mark--white { background-color: var(--brand-white); }