:root {
  --orange: #ff6a13;
  --orange-dark: #e85c00;
  --dark: #181818;
  --dark2: #242424;
  --light: #f6f5f2;
  --gray: #6b6b6b;
  --yellow: #ffcc00;
  --radius: 10px;
  font-size: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  color: var(--dark);
  background: var(--light);
  line-height: 1.5;
}

img, svg { display: block; max-width: 100%; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3, h4 { line-height: 1.15; font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 8px; }
h3 { font-size: 1.15rem; margin-bottom: 6px; }

a { color: inherit; text-decoration: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); }

.btn-outline { border-color: #fff; color: #fff; }
.btn-outline:hover { background: #fff; color: var(--dark); }

.btn-dark { background: var(--dark); color: #fff; }
.btn-dark:hover:not(:disabled) { background: var(--orange); }

.btn-ghost { background: transparent; color: var(--dark); border-color: #ccc; }
.btn-ghost:hover { border-color: var(--dark); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--dark);
  color: #fff;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  font-weight: 900;
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: #fff;
}
.logo span { color: var(--orange); margin-left: 4px; }

.main-nav { display: flex; gap: 28px; }
.main-nav a { font-weight: 600; font-size: .95rem; opacity: .9; }
.main-nav a:hover { color: var(--orange); opacity: 1; }

.phone-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
}
.phone-btn:hover { background: var(--orange-dark); }

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, var(--dark) 0%, var(--dark2) 55%, #2c2c2c 100%);
  color: #fff;
  padding: 64px 0 40px;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.eyebrow {
  color: var(--orange);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 14px;
}
.hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
.hero h1 span { color: var(--orange); }
.lede { margin: 18px 0 26px; color: #d8d8d8; font-size: 1.05rem; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.hero-trust {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  list-style: none;
  font-size: .85rem;
  color: #c9c9c9;
}
.hero-trust li { padding-left: 20px; position: relative; }
.hero-trust li::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--orange);
}

/* ---------- Delivery film ---------- */
.hero-visual { position: relative; min-width: 0; }
.delivery-film {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 28px;
  background: #0b0d0f url("../images/hooklift-mayz-logo-centered.png?v=13") center / cover no-repeat;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 32px 80px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
}
.delivery-film::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,9,10,.16) 0%, transparent 38%, rgba(7,9,10,.9) 100%),
    linear-gradient(90deg, rgba(7,9,10,.5), transparent 48%);
}
.delivery-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.delivery-placeholder,
.delivery-placeholder img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.delivery-placeholder { z-index: 1; overflow: hidden; }
.delivery-placeholder img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
  animation: delivery-placeholder-drift 14s ease-in-out infinite alternate;
}
.delivery-film.motion-paused .delivery-placeholder img { animation-play-state: paused; }
@keyframes delivery-placeholder-drift {
  from { transform: scale(1.02) translate3d(0,0,0); }
  to { transform: scale(1.09) translate3d(-1.5%,-1%,0); }
}
.delivery-motion,
.delivery-motion-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.delivery-motion { z-index: 1; overflow: hidden; }
.delivery-motion-bg { object-fit: cover; object-position: center; }
.delivery-motion-can {
  position: absolute;
  z-index: 2;
  left: 51%;
  top: 54%;
  width: 52%;
  height: auto;
  transform-origin: 95% 88%;
  will-change: transform;
  filter: drop-shadow(0 14px 10px rgba(0,0,0,.28));
  animation: hooklift-pickup-motion 10s cubic-bezier(.55,.02,.28,1) infinite;
}
.delivery-motion-jib {
  position: absolute;
  z-index: 3;
  left: 28%;
  top: 47%;
  width: 42%;
  height: auto;
  transform-origin: 7% 79%;
  will-change: transform;
  filter: drop-shadow(0 9px 7px rgba(0,0,0,.3));
  animation: hooklift-jib-motion 10s cubic-bezier(.55,.02,.28,1) infinite;
}
.delivery-film.motion-paused .delivery-motion-can,
.delivery-film.motion-paused .delivery-motion-jib { animation-play-state: paused; }
@keyframes hooklift-pickup-motion {
  0%, 14% { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  42% { transform: translate3d(-8%,-3%,0) rotate(28deg) scale(.98); }
  72% { transform: translate3d(-37%,-31%,0) rotate(12deg) scale(.93); }
  88%, 100% { transform: translate3d(-53%,-46%,0) rotate(0deg) scale(.89); }
}
@keyframes hooklift-jib-motion {
  0%, 14% { transform: translate3d(18%,8%,0) rotate(-48deg) scale(.94); }
  42% { transform: translate3d(8%,-1%,0) rotate(-52deg) scale(.97); }
  72% { transform: translate3d(-5%,-7%,0) rotate(-20deg) scale(.94); }
  88%, 100% { transform: translate3d(-13%,-10%,0) rotate(12deg) scale(.91); }
}
.delivery-film-shade {
  position: absolute;
  inset: auto 8% 0 auto;
  z-index: 3;
  width: 58%;
  height: 5px;
  border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 32px rgba(255,106,19,.65);
}
.delivery-film-topline,
.delivery-film-caption,
.video-toggle { position: absolute; z-index: 4; }
.delivery-film-topline {
  top: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(9,11,12,.58);
  backdrop-filter: blur(12px);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 5px rgba(255,106,19,.15); }
.delivery-film-caption { left: 28px; right: 90px; bottom: 30px; }
.delivery-film-caption span { color: var(--orange); font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.delivery-film-caption strong { display: block; margin-top: 5px; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.05; }
.delivery-film-caption p { margin-top: 8px; color: rgba(255,255,255,.72); font-size: .88rem; }
.video-toggle {
  right: 24px;
  bottom: 25px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: rgba(9,11,12,.62);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.video-toggle:hover { transform: scale(1.06); background: var(--orange); }
.video-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pause-icon { width: 12px; height: 15px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.video-toggle[aria-pressed="true"] .pause-icon { width: 0; height: 0; margin-left: 3px; border: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid currentColor; }
.legacy-truck-animation[hidden] { display: none !important; }

/* ---------- Legacy truck scene (kept only as archived markup) ---------- */
/* ============================================================
   TRUCK SCENE TUNING
   These four values drive every pose below. The defaults suit
   the built-in SVG truck. When real cut-out photos are dropped
   in, script.js adds .photo-truck / .photo-dumpster and the
   overrides further down take over -- nudge those, not these.
   ------------------------------------------------------------
   --truck-w   width of the truck artwork
   --truck-x   truck's X, measured from the scene's LEFT edge.
               Negative deliberately hangs the cab off the side so
               only the back of the truck -- the rails, hooklift and
               rear axle actually doing the delivering -- is in shot.
   --dump-w    width of the container artwork
   --load-x    container's X when riding on the rails
   --load-y    container's height when riding on the rails
   --ground-x  container's X once dropped on the road
   --ground-y  container's height once dropped on the road

   Everything is anchored to the left edge rather than the centre,
   so the framing holds no matter how wide the scene gets, and
   nothing is tied to the artwork's proportions -- swapping in a
   photo of a different size shifts nothing until you retune.
   ============================================================ */
.truck-scene {
  --truck-w: 400px;
  --truck-x: -132px;
  --dump-w: 197.3px;
  --load-x: 43px;
  --load-y: 101px;
  /* Dropped can hugs the RIGHT edge so the scene fills at any width;
     the floor stops it backing into the truck when narrow. */
  --ground-x: max(298px, calc(100% - 207px));
  --ground-y: 48px;

  position: relative;
  height: 320px;
  /* Capped so the framing stays consistent -- without this the scene
     stretches to ~745px when the hero stacks to one column and the
     truck ends up marooned in the corner. */
  max-width: 560px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, #3b4a5a 0%, #526475 55%, #526475 55%);
  border: 3px solid #000;
  cursor: pointer;
  user-select: none;
}
.truck-scene .sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #4a5b6d 0%, #5c7186 60%);
}
.truck-scene .ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60px;
  background: repeating-linear-gradient(90deg, #4b4b4b 0 40px, #444 40px 80px);
  border-top: 4px dashed var(--yellow);
}

.truck {
  position: absolute;
  left: var(--truck-x);
  bottom: 44px;
  width: var(--truck-w);
  z-index: 3;
}
.truck-svg,
.truck-photo { width: 100%; height: auto; display: block; overflow: visible; }

.hoist-arm {
  transform-origin: 180px 113px;
  transition: transform 1s ease-in-out;
}

.dumpster {
  position: absolute;
  left: var(--dump-x, var(--load-x));
  bottom: var(--dump-y, var(--load-y));
  width: var(--dump-w);
  transform: rotate(var(--dump-rot, 0deg));
  transform-origin: 100% 100%;
  transition: left 1.5s cubic-bezier(.5,0,.5,1),
              bottom 1.5s cubic-bezier(.5,0,.5,1),
              transform 1.1s ease-in-out;
  z-index: 2;
}
.dumpster-svg,
.dumpster-photo { width: 100%; height: auto; display: block; overflow: visible; }

/* photo cut-outs replace the SVG artwork once script.js finds them */
.truck-photo,
.dumpster-photo { display: none; }
.photo-truck .truck-svg { display: none; }
.photo-truck .truck-photo { display: block; }
.photo-dumpster .dumpster-svg { display: none; }
.photo-dumpster .dumpster-photo { display: block; }

/* ------------------------------------------------------------------
   POSES

   The truck never moves -- it stays parked at --truck-x for every
   pose, so nothing drives across the scene in either direction. All
   the motion belongs to the hoist and the container.

     parked / loaded   container riding on the rails
     tilting / hooking hoist up, container tipped on its rear corner
     unloaded          container down on the road behind the truck

   parked and loaded look identical, as do tilting and hooking; they
   are kept as separate names so the delivery and pickup sequences in
   script.js read clearly.
------------------------------------------------------------------ */

/* --- container riding on the rails (start of delivery / end of pickup) --- */
.truck-scene[data-state="parked"] .dumpster,
.truck-scene[data-state="loaded"] .dumpster {
  --dump-x: var(--load-x);
  --dump-y: var(--load-y);
  --dump-rot: 0deg;
}
.truck-scene[data-state="parked"] .hoist-arm,
.truck-scene[data-state="loaded"] .hoist-arm { transform: rotate(0deg); }

/* --- hoist raised, container tipped up on its rear corner --- */
.truck-scene[data-state="tilting"] .dumpster,
.truck-scene[data-state="hooking"] .dumpster {
  --dump-x: var(--load-x);
  --dump-y: var(--load-y);
  --dump-rot: 24deg;
}
.truck-scene[data-state="tilting"] .hoist-arm,
.truck-scene[data-state="hooking"] .hoist-arm { transform: rotate(24deg); }

/* --- container down on the road, behind the truck --- */
.truck-scene[data-state="unloaded"] .dumpster {
  --dump-x: var(--ground-x);
  --dump-y: var(--ground-y);
  --dump-rot: 0deg;
}
.truck-scene[data-state="unloaded"] .hoist-arm { transform: rotate(0deg); }

/* ============================================================
   PHOTO MODE TUNING  --  edit these when your cut-outs are in
   ------------------------------------------------------------
   script.js adds .photo-truck once images/truck-cutout.png
   loads, and .photo-dumpster once images/dumpster-cutout.png
   loads. Photos have different proportions to the SVG artwork,
   so these four numbers re-seat the container on the rails.

   How to tune (takes about a minute, all in this block):
     1. --truck-w   : size the truck how you want it
     2. --truck-x   : slide the truck so it parks centred
     3. --load-y    : raise/lower the container until it rests
                      exactly on the truck's rails
     4. --load-x    : slide it until its front sits just behind
                      the hooklift tower
     5. --ground-y  : where it rests on the road (raise until the
                      skids touch, no gap and no sinking)
   ============================================================ */
.truck-scene.photo-truck {
  --truck-w: 400px;
  --truck-x: -132px;
  --load-x: 43px;
  --load-y: 101px;
}
.truck-scene.photo-dumpster {
  --dump-w: 197.3px;
  --ground-x: max(298px, calc(100% - 207px));
  --ground-y: 48px;
}

.truck-controls {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.truck-hint {
  margin-top: 10px;
  font-size: .82rem;
  color: #b9b9b9;
}

/* ---------- Strip ---------- */
.strip { background: var(--orange); color: #fff; padding: 20px 0; }
.strip-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  text-align: center;
}
.strip-inner div { display: flex; flex-direction: column; }
.strip-inner strong { font-size: 1.1rem; }
.strip-inner span { font-size: .8rem; opacity: .9; }

/* ---------- Sections ---------- */
.section { padding: 72px 0; }
.section.alt { background: #efece5; }
.section-sub { color: var(--gray); margin-bottom: 32px; max-width: 60ch; }

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 28px;
}
.card {
  background: #fff;
  border: 2px solid #eee;
  border-radius: var(--radius);
  padding: 24px;
}
.card.featured { border-color: var(--orange); box-shadow: 0 8px 24px rgba(255,106,19,.15); }
.card-tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--orange);
  margin-bottom: 8px;
}
.card p:last-child { color: var(--gray); font-size: .92rem; }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.service {
  padding: 20px 0;
  border-top: 3px solid var(--orange);
}
.service p { color: var(--gray); font-size: .92rem; }

.area-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: center;
}
.area-grid p { color: var(--gray); margin: 14px 0 22px; }
.area-box {
  background: var(--dark);
  color: #fff;
  border-radius: var(--radius);
  padding: 28px;
}
.area-box ul { list-style: none; }
.area-box li {
  padding: 10px 0;
  border-bottom: 1px solid #3a3a3a;
  font-weight: 600;
}
.area-box li:last-child { border-bottom: none; }

.quote-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 40px;
  align-items: start;
}
.quote-grid p { color: var(--gray); margin-top: 10px; }
.quote-form {
  background: #fff;
  border-radius: var(--radius);
  padding: 28px;
  border: 2px solid #eee;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #ddd;
  border-radius: 8px;
  font-family: inherit;
  font-size: .95rem;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--orange); }
.form-msg { color: var(--orange-dark); font-weight: 600; font-size: .9rem; }

.faq-list { max-width: 760px; margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
details {
  background: #fff;
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 14px 18px;
}
summary { font-weight: 700; cursor: pointer; }
details p { margin-top: 10px; color: var(--gray); }

/* ---------- Footer ---------- */
.site-footer { background: var(--dark); color: #ddd; padding: 48px 0 0; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
}
.footer-inner h4 { color: #fff; margin-bottom: 10px; font-size: .95rem; }
.footer-inner p { font-size: .9rem; margin-bottom: 6px; color: #b9b9b9; }
.footer-inner a:hover { color: var(--orange); }
.footer-inner .logo { margin-bottom: 10px; display: inline-block; }
.footer-bottom {
  text-align: center;
  padding: 16px;
  font-size: .8rem;
  color: #888;
  border-top: 1px solid #333;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .delivery-film { min-height: 440px; }
  .main-nav { display: none; }
  .cards, .services-grid { grid-template-columns: repeat(2, 1fr); }
  .area-grid, .quote-grid { grid-template-columns: 1fr; }
  .strip-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cards, .services-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .truck-scene { height: 240px; }
  .hero { padding-top: 42px; }
  .delivery-film { min-height: 390px; border-radius: 20px; }
  .delivery-film-topline { top: 16px; left: 16px; }
  .delivery-film-caption { left: 20px; right: 70px; bottom: 23px; }
  .delivery-film-caption p { display: none; }
  .video-toggle { right: 16px; bottom: 18px; }
}

/* The truck + dropped container span ~486px side to side. Below that the
   whole rig scales down together so it still fits inside the scene. */
@media (max-width: 620px) {
  .truck-scene {
    --truck-w: 240px;
    --truck-x: -79px;
    --dump-w: 118px;
    --load-x: 26px;
    --load-y: 78px;
    --ground-x: max(161px, calc(100% - 128px));
    --ground-y: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-placeholder img { animation: none; transform: scale(1.04); }
  .delivery-motion-can { animation: none; transform: translate3d(-53%,-46%,0) scale(.89); }
  .delivery-motion-jib { animation: none; transform: translate3d(-13%,-10%,0) rotate(12deg) scale(.91); }
  .delivery-video { display: none; }
}

.quote-form label{color:#d8d8d8;font-size:.82rem;font-weight:700}.quote-form label input{margin-top:7px;width:100%}.availability{padding:14px;border:1px solid rgba(255,255,255,.13);border-radius:10px;color:#bdbdbd;line-height:1.5}.availability-pill{display:inline-flex;gap:6px;margin:3px 7px 3px 0;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.08)}.availability-pill.is-open{color:#bdf4c8;border:1px solid rgba(77,200,102,.35)}.availability-pill.is-full{color:#ffb5b5;border:1px solid rgba(255,90,90,.35)}.terms-check{display:flex;gap:10px;align-items:flex-start;line-height:1.45}.terms-check input{width:auto!important;margin:3px 0 0!important}.order-track{margin-top:28px;padding:22px;border-radius:14px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1)}.order-track h3{margin-bottom:12px}.order-track form{display:grid;gap:9px}.order-track input{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:#17191b;color:#fff}.order-result{margin-top:14px;padding:14px;border-radius:10px;line-height:1.55}.order-result.success{color:#d8ffe0;background:rgba(45,150,68,.16);border:1px solid rgba(72,196,96,.32)}.order-result.error{color:#ffd6d6;background:rgba(190,50,50,.15);border:1px solid rgba(230,75,75,.3)}
.size-price{font-size:1.7rem!important;font-weight:900;color:var(--orange)!important;margin:.25rem 0 .6rem!important}.size-price small{font-size:.75rem;color:#888;font-weight:700}.instant-price{padding:16px;border-radius:10px;background:rgba(255,106,19,.1);border:1px solid rgba(255,106,19,.3);color:#ffd4ba;font-weight:700}.instant-price strong{display:block;color:#fff;font-size:1.55rem;margin-bottom:3px}