/* Hitch & Haul — shared styles for every page */

:root{
  --black:   #000000;
  --ink:     #0A0B09;   /* page black, a hair off pure */
  --steel:   #14170F;   /* placeholder field */
  --lime:    #B4FF00;   /* primary */
  --lime-dk: #7FB800;   /* shadowed lime, for rules + hovers */
  --zinc:    #7F877A;   /* green-tinted gray */
  --paper:   #F1F3EC;
  --rule:    rgba(180,255,0,.28);
  --seam: 72px;
  --pad: clamp(20px, 4vw, 56px);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Anton', Impact, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Barlow', system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100svh;
  display:flex;
  flex-direction:column;
}
main{ flex:1; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ---------- masthead ---------- */
.masthead{
  padding:clamp(18px,3vw,34px) var(--pad) clamp(14px,2.4vw,26px);
  text-align:center;
  border-bottom:1px solid var(--rule);
}
.mark{ display:inline-flex; align-items:center; gap:14px; }
.mark svg{ width:clamp(34px,4.4vw,46px); height:auto; display:block; }
.wordmark{
  font-family:var(--display);
  font-size:clamp(34px,6.4vw,68px);
  line-height:.92;
  letter-spacing:.02em;
  text-transform:uppercase;
  margin:0;
}
.wordmark .amp{ color:var(--lime); }
.tagline{
  margin:10px 0 0;
  font-family:var(--mono);
  font-size:clamp(10px,1.3vw,12px);
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--lime-dk);
}

/* compact masthead on inner pages */
.masthead--compact{ padding-block:16px 0; }
.masthead--compact .wordmark{ font-size:clamp(28px,4.4vw,42px); }
.masthead--compact .mark svg{ width:clamp(28px,3.4vw,36px); }

.nav{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:4px clamp(14px,3vw,34px);
  margin-top:14px; padding:10px 0;
  border-top:1px solid rgba(180,255,0,.12);
  font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--zinc);
}
.nav a{ padding:4px 0; border-bottom:2px solid transparent; }
.nav a:hover{ color:var(--paper); }
.nav a[aria-current="page"]{ color:var(--lime); border-bottom-color:var(--lime); }
.nav .nav-phone{ color:var(--lime); }

/* ---------- home: split selectors ---------- */
.split{
  display:flex;
  min-height:clamp(420px, 62svh, 720px);
}
.panel{
  position:relative;
  flex:1 1 50%;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:var(--pad);
  isolation:isolate;
  background-color:var(--steel);
  background-image:repeating-linear-gradient(135deg, rgba(180,255,0,.07) 0 14px, transparent 14px 28px);
  transition:flex-grow .45s cubic-bezier(.2,.7,.2,1);
}
/* the two halves meet on a tilt, like a raised dump bed */
@media (min-width:781px){
  .panel--trailers{
    clip-path:polygon(0 0, 100% 0, calc(100% - var(--seam)) 100%, 0 100%);
    margin-right:calc(var(--seam) / -2);
    padding-right:calc(var(--pad) + var(--seam));
  }
  .panel--hoses{
    clip-path:polygon(var(--seam) 0, 100% 0, 100% 100%, 0 100%);
    margin-left:calc(var(--seam) / -2);
    padding-left:calc(var(--pad) + var(--seam));
  }
  .split:hover .panel{ flex-grow:.86; }
  .split .panel:hover,
  .split .panel:focus-visible{ flex-grow:1.2; }
}

/* photo layer — the <img> removes itself if the file is missing, leaving the stripes */
.panel .art{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.panel:hover .art{ transform:scale(1.1); }
.panel .scrim{ position:absolute; inset:0; z-index:-1; }

/* LEFT: lime on black */
.panel--trailers .scrim{
  background:linear-gradient(to top, rgba(10,11,9,.95) 12%, rgba(10,11,9,.5) 60%, rgba(10,11,9,.25) 100%);
}
/* RIGHT: inverted — black on a lime field, photo reads through as a duotone */
.panel--hoses .scrim{
  background:linear-gradient(to top, rgba(180,255,0,.96) 20%, rgba(180,255,0,.78) 75%, rgba(180,255,0,.62) 100%);
}
.panel--hoses{ color:var(--black); }
.panel--hoses .eyebrow{ color:rgba(0,0,0,.7); }
.panel--hoses .specs li{ color:rgba(0,0,0,.72); border-color:rgba(0,0,0,.45); }
.panel--hoses .btn{ background:var(--black); color:var(--lime); border-color:var(--black); }

.copy{ max-width:34ch; }
.copy h2{
  font-family:var(--display);
  font-size:clamp(30px,4.6vw,60px);
  line-height:.94;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0 0 14px;
}
.copy p{ margin:0 0 20px; font-size:clamp(15px,1.35vw,17px); line-height:1.5; }
.panel--trailers .copy p{ color:#D3D8CE; }
.panel--hoses .copy p{ color:rgba(0,0,0,.82); }
.copy .eyebrow{ margin-bottom:12px; }

.panel .btn{ transition:transform .2s ease; }
.panel--trailers .btn:hover{ background:var(--lime); border-color:var(--lime); }
.panel--hoses .btn:hover{ background:var(--black); border-color:var(--black); }
.panel:hover .btn{ transform:translateX(4px); }
.btn .arrow{ transition:transform .2s ease; }
.panel:hover .btn .arrow,
.btn:hover .arrow{ transform:translateX(4px); }

.panel--trailers:focus-visible{ outline:3px solid var(--lime); outline-offset:-6px; }
.panel--hoses:focus-visible{ outline:3px solid var(--black); outline-offset:-6px; }

/* ---------- shared bits ---------- */
.eyebrow{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--lime);
  margin:0 0 14px;
}
.specs{
  list-style:none; margin:0 0 22px; padding:0;
  display:flex; flex-wrap:wrap; gap:8px 10px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.specs li{ padding:5px 9px; color:var(--zinc); border:1px solid rgba(180,255,0,.35); }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font:600 14px/1 'Barlow', system-ui, sans-serif;
  letter-spacing:.1em; text-transform:uppercase;
  padding:14px 22px;
  border:2px solid var(--lime);
  background:var(--lime); color:var(--black);
  cursor:pointer;
}
.btn:hover{ background:var(--paper); border-color:var(--paper); }
.btn--ghost{ background:transparent; color:var(--lime); }
.btn--ghost:hover{ background:transparent; color:var(--paper); }
.btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* lime sections: everything flips to black-on-lime */
.on-lime{ background:var(--lime); color:var(--black); }
.on-lime .eyebrow{ color:rgba(0,0,0,.7); }
.on-lime .specs li{ color:rgba(0,0,0,.72); border-color:rgba(0,0,0,.45); }
.on-lime .btn{ background:var(--black); color:var(--lime); border-color:var(--black); }
.on-lime .btn--ghost{ background:transparent; color:var(--black); }
.on-lime .btn:hover{ background:var(--ink); color:var(--paper); }
.on-lime .btn--ghost:hover{ background:var(--black); color:var(--lime); }
.on-lime .lede{ color:rgba(0,0,0,.82); }
.on-lime .photo{ background-color:#9FE000; }
.on-lime .photo-tag{ color:rgba(0,0,0,.6); border-color:rgba(0,0,0,.4); }

/* photo frame — stripes + label show until the real image loads */
.photo{
  position:relative; margin:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background-color:var(--steel);
  background-image:repeating-linear-gradient(135deg, rgba(180,255,0,.07) 0 14px, transparent 14px 28px);
}
.on-lime .photo{ background-image:repeating-linear-gradient(135deg, rgba(0,0,0,.07) 0 14px, transparent 14px 28px); }
.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* crop hints for photos whose subject isn't centered */
.focus-right{ object-position:72% 70%; }
.focus-upper{ object-position:50% 40%; }
.photo-tag{
  position:absolute; top:16px; left:16px;
  font-family:var(--mono);
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 9px;
  color:var(--lime-dk); border:1px dashed rgba(180,255,0,.45);
}
.panel .photo-tag{ z-index:-3; }
.panel--hoses .photo-tag{ color:rgba(0,0,0,.6); border-color:rgba(0,0,0,.4); left:calc(16px + var(--seam)); }

/* ---------- inner pages ---------- */
.wrap{ max-width:1160px; margin:0 auto; padding:0 var(--pad); }
.section{ padding:clamp(48px,7vw,96px) 0; }
.section + .section{ border-top:1px solid rgba(180,255,0,.12); }
.section.on-lime + .section, .section + .section.on-lime{ border-top:0; }

.hero .wrap,
.split-row{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:clamp(28px,5vw,72px);
  align-items:center;
}
.split-row--flip > :first-child{ order:2; }

.page-title{
  font-family:var(--display);
  font-size:clamp(44px,7.4vw,96px);
  line-height:.9;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0 0 18px;
}
h2.section-title{
  font-family:var(--display);
  font-size:clamp(30px,4.2vw,52px);
  line-height:.95;
  text-transform:uppercase;
  letter-spacing:.01em;
  margin:0 0 18px;
}
h3{
  font-family:var(--mono);
  font-size:12px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--lime);
  margin:0 0 14px;
}
.lede{ font-size:clamp(16px,1.5vw,19px); line-height:1.55; color:#D3D8CE; max-width:52ch; margin:0 0 24px; }
.muted{ color:var(--zinc); }

.cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:clamp(28px,4vw,56px); }

.checklist{ list-style:none; margin:0; padding:0; }
.checklist li{
  position:relative; padding:10px 0 10px 26px;
  border-bottom:1px solid rgba(241,243,236,.08);
  line-height:1.45;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:17px;
  width:10px; height:10px; background:var(--lime);
}

/* rates table */
.rates{ width:100%; border-collapse:collapse; font-size:16px; }
.rates th, .rates td{ text-align:left; padding:14px 12px; border-bottom:1px solid rgba(241,243,236,.1); }
.rates thead th{
  font-family:var(--mono); font-weight:500;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--zinc);
  border-bottom-color:var(--rule);
}
.rates tbody th{ font-weight:600; }
.rates tbody th small{ display:block; font-weight:400; color:var(--zinc); font-size:13px; margin-top:2px; }
.rates td{ font-family:var(--mono); color:var(--lime); }
.table-scroll{ overflow-x:auto; }

/* numbered steps */
.steps{ list-style:none; margin:0; padding:0; counter-reset:step; display:grid; gap:0; }
.steps li{
  counter-increment:step;
  display:grid; grid-template-columns:56px 1fr; gap:4px 16px;
  padding:18px 0;
  border-bottom:1px solid rgba(241,243,236,.08);
}
.steps li::before{
  content:counter(step, decimal-leading-zero);
  grid-row:span 2;
  font-family:var(--display); font-size:40px; line-height:1; color:var(--lime);
}
.steps strong{ font-size:18px; }
.steps span{ color:#C3C9BD; line-height:1.5; }

/* ---------- forms ---------- */
.form{ display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field--full{ grid-column:1 / -1; }
.field label, .field legend{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--zinc);
}
.field .req{ color:var(--lime); }
.field input, .field select, .field textarea{
  width:100%;
  font:inherit; font-size:16px;
  color:var(--paper);
  background:var(--steel);
  border:1px solid rgba(180,255,0,.22);
  border-radius:0;
  padding:12px 14px;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input[type="file"]{ padding:10px; font-size:14px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--lime); box-shadow:0 0 0 1px var(--lime);
}
.field input[type="date"]{ color-scheme:dark; }
.field .hint{ font-size:13px; color:var(--zinc); }
.form .btn{ justify-self:start; }
.hidden{ position:absolute; left:-9999px; }

/* ---------- footer bar ---------- */
.bar{
  display:flex; flex-wrap:wrap; gap:8px 28px;
  justify-content:center; align-items:center;
  padding:16px var(--pad);
  background:var(--black);
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--zinc);
  text-align:center;
}
.bar a{ color:var(--lime); }
.bar a:hover{ color:var(--paper); }

/* ---------- mobile ---------- */
@media (max-width:780px){
  .split{ flex-direction:column; }
  .panel{ min-height:52svh; padding:clamp(20px,6vw,32px); }
  .panel--trailers{ border-bottom:3px solid var(--lime); }
  .panel--hoses .photo-tag{ left:16px; }

  .hero .wrap, .split-row{ grid-template-columns:1fr; }
  .split-row--flip > :first-child{ order:0; }
  .form{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .panel .art{ transform:none; }
}