/* ============================================================
   FAM-LOCK TRUCKING
   Design system - handwritten CSS3, no framework.

   Visual language: "dispatch manifest"
   Steel plate surfaces, ruled data rows, monospace field codes,
   chevron shear angles taken from the logo shield, and the
   road center line used as a divider.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Core steel */
  --ink:        #0A0A0A;
  --charcoal:   #14161A;
  --panel:      #1C1F24;
  --panel-2:    #24282E;
  --steel:      #5C6268;
  --silver:     #A7A9AC;
  --silver-lt:  #D7D9DB;
  --white:      #FFFFFF;

  /* Logo blues - the brand accent */
  --blue:       #0057B8;
  --blue-lt:    #2B7BE0;
  --navy:       #003B82;
  --navy-deep:  #002A5E;

  /* Industrial detail accent, used sparingly */
  --gold:       #B08D3A;
  --gold-dim:   #7A6228;

  /* Semantic */
  --bg:            var(--ink);
  --bg-alt:        var(--charcoal);
  --surface:       var(--panel);
  --surface-hi:    var(--panel-2);
  --text:          #E8EAEC;
  --text-dim:      #9BA1A8;
  --text-faint:    #6B7178;
  --line:          rgba(167,169,172,.16);
  --line-strong:   rgba(167,169,172,.30);

  /* Type */
  --f-display: "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --f-body:    "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Metrics */
  --wrap: 1240px;
  --gut: clamp(20px, 5vw, 56px);
  --shear: 14px;              /* chevron notch size from the logo shield */
  --r: 2px;                   /* corners stay industrial, not rounded-app */

  --t-fast: .16s cubic-bezier(.4,0,.2,1);
  --t: .28s cubic-bezier(.4,0,.2,1);
}

/* 2026 visual refresh: clean, bright brand system built from the supplied logo. */
:root{
  --ink:#ffffff;
  --charcoal:#f3f6fa;
  --panel:#ffffff;
  --panel-2:#eaf1f8;
  --steel:#667589;
  --silver:#526176;
  --silver-lt:#d9e2ec;
  --white:#0a1b31;
  --blue:#0b4d8c;
  --blue-lt:#1768ad;
  --navy:#083d72;
  --navy-deep:#062f59;
  --gold:#1768ad;
  --gold-dim:#8bb7dd;
  --bg:#ffffff;
  --bg-alt:#f3f6fa;
  --surface:#ffffff;
  --surface-hi:#eaf1f8;
  --text:#172238;
  --text-dim:#526176;
  --text-faint:#6d7c90;
  --line:rgba(10,42,78,.12);
  --line-strong:rgba(10,42,78,.24);
  --wrap:1240px;
  --gut:clamp(16px,4vw,48px);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5,p{ margin:0; }
:focus-visible{ outline:2px solid var(--blue-lt); outline-offset:3px; }
::selection{ background:var(--blue); color:#fff; }

/* ---------- 3. TYPE SCALE ---------- */
.h-xl,.h-lg,.h-md,.h-sm{
  font-family:var(--f-display);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.01em;
  text-transform:uppercase;
  color:var(--white);
}
.h-xl{ font-size:clamp(2.9rem, 8.2vw, 6.4rem); letter-spacing:-.02em; }
.h-lg{ font-size:clamp(2.2rem, 5.2vw, 4.1rem); }
.h-md{ font-size:clamp(1.65rem, 3.2vw, 2.5rem); }
.h-sm{ font-size:clamp(1.25rem, 2vw, 1.55rem); line-height:1; }

.lede{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--text-dim); max-width:62ch; }
.body-dim{ color:var(--text-dim); }
.small{ font-size:.9rem; }

/* Monospace field code - the "manifest" voice */
.code{
  font-family:var(--f-mono);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--silver);
}
.code--blue{ color:var(--blue-lt); }
.code--gold{ color:var(--gold); }

/* Section marker: [ 02 / EQUIPMENT ] */
.marker{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--f-mono); font-size:.7rem; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--silver);
  padding-bottom:.9rem;
}
.marker::before{
  content:""; width:26px; height:2px; background:var(--blue);
}
.marker b{ color:var(--gold); font-weight:500; }

/* ---------- 4. LAYOUT ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(48px,7vw,88px); position:relative; }
.section--tight{ padding-block:clamp(44px,6vw,76px); }
.section--dark{ background:var(--ink); }
.section--alt{ background:var(--charcoal); }
.section--plate{ background:var(--charcoal); position:relative; }
.section--plate::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(135deg, rgba(167,169,172,.035) 0 1px, transparent 1px 9px);
}
.section > .wrap{ position:relative; z-index:1; }

.grid{ display:grid; gap:clamp(18px,2.4vw,30px); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .g-3,.g-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center; }
@media (max-width:920px){ .split{ grid-template-columns:1fr; } }

.stack > * + *{ margin-top:1.1rem; }
.mt-s{ margin-top:.8rem; } .mt-m{ margin-top:1.6rem; } .mt-l{ margin-top:2.6rem; }

/* Section head with the numbered rail */
.sec-head{ margin-bottom:clamp(28px,4vw,52px); max-width:78ch; }
.sec-head .h-lg + .lede{ margin-top:1.1rem; }

/* ---------- 5. ROAD LINE DIVIDER (from the logo) ---------- */
.roadline{
  height:4px; width:100%;
  background:repeating-linear-gradient(90deg,var(--silver) 0 26px, transparent 26px 52px);
  opacity:.3;
}
.roadline--thin{ height:2px; background:repeating-linear-gradient(90deg,var(--steel) 0 14px, transparent 14px 28px); }

/* ---------- 6. BUTTONS ---------- */
.btn{
  --btn-bg:var(--blue); --btn-fg:#fff; --btn-bd:var(--blue);
  display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  font-family:var(--f-display); font-weight:700; font-size:1.02rem;
  letter-spacing:.06em; text-transform:uppercase;
  padding:.98rem 1.7rem; min-height:52px;
  background:var(--btn-bg); color:var(--btn-fg);
  border:2px solid var(--btn-bd); border-radius:var(--r);
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform var(--t-fast), background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  clip-path:polygon(var(--shear) 0, 100% 0, 100% calc(100% - var(--shear)), calc(100% - var(--shear)) 100%, 0 100%, 0 var(--shear));
}
.btn:hover{ background:var(--blue-lt); border-color:var(--blue-lt); transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--white); --btn-bd:var(--line-strong); }
.btn--ghost:hover{ background:rgba(255,255,255,.06); border-color:var(--silver); }
.btn--steel{ --btn-bg:var(--panel-2); --btn-fg:var(--white); --btn-bd:var(--line-strong); }
.btn--steel:hover{ background:var(--steel); border-color:var(--steel); }
.btn--gold{ --btn-bg:transparent; --btn-fg:var(--gold); --btn-bd:var(--gold-dim); }
.btn--gold:hover{ background:var(--gold); --btn-fg:var(--ink); border-color:var(--gold); }
.btn--sm{ font-size:.88rem; padding:.62rem 1.1rem; min-height:42px; --shear:10px; }
.btn--wide{ width:100%; }
.btn .arw{ font-family:var(--f-body); font-size:1.05em; line-height:1; transition:transform var(--t-fast); }
.btn:hover .arw{ transform:translateX(4px); }

.btn-row{ display:flex; flex-wrap:wrap; gap:.9rem; }

/* Text link with rule */
.tlink{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue-lt); padding-bottom:3px; border-bottom:1px solid rgba(43,123,224,.35);
  transition:color var(--t-fast), border-color var(--t-fast);
}
.tlink:hover{ color:var(--white); border-color:var(--white); }

/* ---------- 7. HEADER ---------- */
.hdr{
  position:sticky; top:0; z-index:80;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:background var(--t), border-color var(--t);
}
.hdr.is-scrolled{ background:rgba(255,255,255,.98); border-color:var(--line-strong); box-shadow:0 8px 30px rgba(7,34,64,.08); }
.hdr__bar{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; height:84px; }

.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand__mark{ width:clamp(92px,8vw,116px); height:78px; object-fit:contain; flex-shrink:0; }
.brand__txt{ display:none !important; }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--f-display); font-weight:800; font-size:1.3rem; letter-spacing:.01em;
  text-transform:uppercase; color:var(--white);
}
.brand__sub{
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--blue-lt); margin-top:3px;
}

.nav{ display:flex; align-items:center; gap:1.65rem; }
.nav a{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-dim); padding:.4rem 0; position:relative; transition:color var(--t-fast);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--blue);
  transition:width var(--t-fast);
}
.nav a:hover{ color:var(--white); }
.nav a:hover::after,.nav a[aria-current="page"]::after{ width:100%; }
.nav a[aria-current="page"]{ color:var(--white); }

.hdr__cta{ display:flex; align-items:center; gap:.8rem; }
.hdr__phone{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.08em; color:var(--silver);
  white-space:nowrap; transition:color var(--t-fast);
}
.hdr__phone:hover{ color:var(--white); }

.burger{
  display:none; width:46px; height:46px; background:transparent;
  border:1px solid var(--line-strong); border-radius:var(--r); cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{ display:block; width:20px; height:2px; background:var(--navy-deep); transition:transform var(--t), opacity var(--t); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media (max-width:1080px){
  .nav,.hdr__cta .btn{ display:none; }
  .burger{ display:flex; }
}
@media (max-width:520px){ .hdr__phone{ display:none; } }

/* Mobile drawer */
.drawer{
  position:fixed; inset:84px 0 0; z-index:79;
  background:var(--ink); border-top:1px solid var(--line);
  padding:2rem var(--gut) 3rem; overflow-y:auto;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity var(--t), transform var(--t);
}
.drawer.is-open{ opacity:1; transform:none; pointer-events:auto; }
.drawer a.drawer__link{
  display:flex; align-items:baseline; gap:1rem; padding:1.05rem 0;
  border-bottom:1px solid var(--line);
  font-family:var(--f-display); font-size:1.7rem; font-weight:700;
  text-transform:uppercase; color:var(--white);
}
.drawer a.drawer__link i{
  font-family:var(--f-mono); font-style:normal; font-size:.66rem;
  letter-spacing:.2em; color:var(--steel);
}
.drawer .btn{ margin-top:1.8rem; }

/* Sticky mobile action bar */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; gap:1px; background:var(--line-strong);
  border-top:1px solid var(--line-strong);
}
.callbar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem .5rem; background:var(--charcoal);
  font-family:var(--f-display); font-weight:700; font-size:.98rem;
  letter-spacing:.05em; text-transform:uppercase; color:var(--white);
}
.callbar a.is-primary{ background:var(--blue); }
@media (max-width:760px){
  .callbar{ display:flex; }
  body{ padding-bottom:58px; }
}

/* ---------- 8. HERO ---------- */
.hero{ position:relative; background:#07182c; overflow:hidden; border-bottom:1px solid var(--line); min-height:min(760px,calc(100dvh - 84px)); }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center; opacity:1; filter:none; }
.hero__bg.has-image > div:not(.hero__plate){ display:none !important; }
/* Designed fallback when no photo is supplied - steel plate, not stock art */
.hero__plate{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(0,87,184,.30) 0%, transparent 58%),
    radial-gradient(90% 70% at 12% 92%, rgba(167,169,172,.10) 0%, transparent 62%),
    linear-gradient(160deg, #16181C 0%, #0A0A0A 55%, #0E1114 100%);
}
.hero__plate::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(135deg, rgba(167,169,172,.05) 0 1px, transparent 1px 11px);
}
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(4,20,40,.88) 0%, rgba(4,20,40,.66) 42%, rgba(4,20,40,.08) 76%, rgba(4,20,40,.02) 100%);
}
@media (max-width:820px){
  .hero__scrim{ background:linear-gradient(180deg, rgba(4,20,40,.46) 0%, rgba(4,20,40,.88) 57%, #07182c 100%); }
  .hero__bg img{ object-position:62% center; }
}
.hero__inner{ position:relative; z-index:2; padding-block:clamp(58px,9vw,104px); }
.hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(30px,5vw,64px); align-items:end; }
@media (max-width:1000px){ .hero__grid{ grid-template-columns:1fr; } }

.hero h1{ margin-bottom:1.4rem; }
.hero .h-xl,.hero .h-lg,.hero .h-md,.hero .h-sm{ color:#fff; }
.hero .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.5); }
.hero h1 em{ font-style:normal; color:var(--blue-lt); }
.hero .lede{ max-width:52ch; font-size:clamp(1.05rem,1.7vw,1.28rem); color:var(--silver-lt); }
.hero .btn-row{ margin-top:2.3rem; }

/* Hero stat rail - facts about how the site works, not invented numbers */
.railbox{
  border:1px solid var(--line-strong); background:rgba(20,22,26,.72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  clip-path:polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}
.railbox .code{ color:#c9d7e7; }
.railbox__row span{ color:#c9d7e7; }
.railbox__row strong{ color:#fff; }
.railbox__hd{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.15rem; border-bottom:1px solid var(--line);
  background:rgba(0,87,184,.10);
}
.railbox__row{ display:flex; gap:1rem; padding:1rem 1.15rem; border-bottom:1px solid var(--line); }
.railbox__row:last-child{ border-bottom:0; }
.railbox__row b{
  font-family:var(--f-display); font-size:1.5rem; font-weight:800; color:var(--gold);
  line-height:1; flex-shrink:0; width:34px;
}
.railbox__row span{ font-size:.9rem; color:var(--text-dim); line-height:1.45; }
.railbox__row strong{ display:block; color:var(--white); font-weight:600; font-size:.95rem; margin-bottom:.15rem; }

/* ---------- 9. TICKER STRIP ---------- */
.strip{ background:var(--blue); color:#fff; padding:.85rem 0; overflow:hidden; }
.strip__track{ display:flex; gap:3rem; white-space:nowrap; animation:slide 34s linear infinite; }
.strip__track span{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:3rem;
}
.strip__track span::after{ content:"◆"; font-size:.55rem; opacity:.6; letter-spacing:0; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .strip__track{ animation:none; } }

/* ---------- 10. PANELS / CARDS ---------- */
.panel{
  background:var(--surface); border:1px solid var(--line);
  padding:clamp(1.4rem,2.4vw,2rem); position:relative;
  transition:border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
}
.panel,.svc,.matcher,.wiz__stage,.ticket,.nextstep{ box-shadow:0 12px 32px rgba(8,45,82,.07); }
.panel--notch{
  clip-path:polygon(0 0, calc(100% - var(--shear)) 0, 100% var(--shear), 100% 100%, var(--shear) 100%, 0 calc(100% - var(--shear)));
}
.panel--hover:hover{ border-color:var(--line-strong); background:var(--surface-hi); transform:translateY(-3px); }

/* Service card - built like a work order, not a SaaS tile */
.svc{
  display:flex; flex-direction:column; background:var(--charcoal);
  border:1px solid var(--line); border-top:2px solid var(--steel);
  padding:0; transition:border-color var(--t), transform var(--t);
}
.svc:hover{ border-top-color:var(--blue); transform:translateY(-4px); }
.svc__hd{ display:flex; align-items:flex-start; gap:1rem; padding:1.4rem 1.5rem 1rem; }
.svc__no{
  font-family:var(--f-display); font-size:2.6rem; font-weight:800; line-height:.8;
  color:transparent; -webkit-text-stroke:1px var(--steel); flex-shrink:0;
  transition:-webkit-text-stroke-color var(--t);
}
.svc:hover .svc__no{ -webkit-text-stroke-color:var(--blue-lt); }
.svc__bd{ padding:0 1.5rem 1.4rem; flex:1; display:flex; flex-direction:column; }
.svc__when{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); margin-bottom:.5rem;
}
.svc__ft{
  margin-top:auto; padding:1rem 1.5rem; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

/* Ruled list - the manifest row */
.rows{ border-top:1px solid var(--line); }
.rows li{
  display:flex; align-items:baseline; gap:1rem; padding:.72rem 0;
  border-bottom:1px solid var(--line); font-size:.94rem; color:var(--text-dim);
}
.rows li::before{
  content:"›"; color:var(--blue-lt); font-size:1rem; line-height:1; flex-shrink:0;
}
.rows--check li::before{ content:"✓"; color:var(--gold); font-size:.85rem; }

/* Trust block */
.trust{ border-left:2px solid var(--line); padding:.2rem 0 .2rem 1.4rem; transition:border-color var(--t); }
.trust:hover{ border-left-color:var(--gold); }
.trust h3{ font-family:var(--f-display); font-size:1.28rem; font-weight:700; text-transform:uppercase; color:var(--white); margin-bottom:.45rem; }

/* Process step */
.step{ position:relative; padding-top:1.6rem; border-top:2px solid var(--line); }
.step__no{
  position:absolute; top:-.85rem; left:0; background:var(--ink); padding-right:.7rem;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.2em; color:var(--gold);
}
.section--alt .step__no{ background:var(--charcoal); }
.step h3{ font-family:var(--f-display); font-size:1.35rem; font-weight:700; text-transform:uppercase; color:var(--white); margin-bottom:.5rem; }

/* ---------- 11. AUDIENCE MATCHER ---------- */
.matcher{ border:1px solid var(--line-strong); background:var(--charcoal); }
.matcher__hd{ padding:clamp(1.3rem,2.5vw,2rem); border-bottom:1px solid var(--line); }
.matcher__tabs{ display:flex; flex-wrap:wrap; gap:1px; background:var(--line); border-bottom:1px solid var(--line); }
.matcher__tab{
  flex:1 1 150px; padding:1.05rem .8rem; background:var(--panel); border:0; cursor:pointer;
  font-family:var(--f-display); font-weight:700; font-size:1.02rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-dim); text-align:center;
  border-bottom:3px solid transparent; transition:all var(--t-fast);
}
.matcher__tab:hover{ background:var(--panel-2); color:var(--white); }
.matcher__tab[aria-selected="true"]{ background:var(--panel-2); color:var(--white); border-bottom-color:var(--blue); }
.matcher__body{ padding:clamp(1.4rem,3vw,2.4rem); }
.matcher__panel[hidden]{ display:none; }

/* ---------- 12. QUOTE WIZARD ---------- */
.wiz{ display:grid; grid-template-columns:262px minmax(0,1fr); gap:clamp(24px,4vw,52px); align-items:start; }
.wiz > *{ min-width:0; }
@media (max-width:940px){ .wiz{ grid-template-columns:1fr; } }

.wiz__rail{ position:sticky; top:98px; }
@media (max-width:940px){ .wiz__rail{ position:static; } }
.wiz__rail ol{ border-left:2px solid var(--line); }
.wiz__rail li{
  position:relative; padding:.62rem 0 .62rem 1.35rem; margin-left:-2px;
  border-left:2px solid transparent;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); transition:color var(--t-fast), border-color var(--t-fast);
}
.wiz__rail li b{ display:block; font-size:.62rem; color:var(--steel); margin-bottom:2px; letter-spacing:.2em; }
.wiz__rail li.is-active{ color:var(--white); border-left-color:var(--blue); }
.wiz__rail li.is-done{ color:var(--silver); border-left-color:var(--gold-dim); }
.wiz__rail li.is-done::after{ content:"✓"; position:absolute; right:0; top:.62rem; color:var(--gold); font-size:.8rem; }
@media (max-width:940px){
  .wiz__rail{ overflow:hidden; }
  .wiz__rail ol{ display:flex; overflow-x:auto; border-left:0; border-bottom:2px solid var(--line); gap:0; }
  .wiz__rail li{ flex:0 0 auto; padding:.5rem .9rem; border-left:0; border-bottom:2px solid transparent; margin:0 0 -2px; }
  .wiz__rail li.is-active{ border-bottom-color:var(--blue); }
  .wiz__rail li.is-done{ border-bottom-color:var(--gold-dim); }
  .wiz__rail li.is-done::after{ display:none; }
}

.wiz__stage{ background:var(--charcoal); border:1px solid var(--line-strong); }
.wiz__bar{ height:3px; background:var(--panel-2); position:relative; overflow:hidden; }
.wiz__bar i{ position:absolute; inset:0 auto 0 0; background:linear-gradient(90deg,var(--navy),var(--blue-lt)); width:0; transition:width var(--t); }
.wiz__hd{ padding:clamp(1.4rem,3vw,2.2rem) clamp(1.4rem,3vw,2.4rem) 0; }
.wiz__hd h2{ font-family:var(--f-display); font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; text-transform:uppercase; color:var(--white); line-height:1; margin:.55rem 0 .5rem; }
.wiz__bd{ padding:clamp(1.2rem,3vw,2rem) clamp(1.4rem,3vw,2.4rem) clamp(1.4rem,3vw,2.2rem); }
.wiz__ft{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem clamp(1.4rem,3vw,2.4rem); border-top:1px solid var(--line); background:rgba(10,10,10,.4);
}
.wiz__step[hidden]{ display:none; }

/* Choice tiles */
.choices{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice label{
  display:block; height:100%; padding:1.05rem 1.15rem; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--steel);
  transition:all var(--t-fast);
}
.choice label:hover{ background:var(--panel-2); border-left-color:var(--silver); }
.choice label b{
  display:block; font-family:var(--f-display); font-size:1.18rem; font-weight:700;
  text-transform:uppercase; color:var(--white); line-height:1.05; margin-bottom:.2rem;
}
.choice label span{ font-size:.82rem; color:var(--text-faint); }
.choice input:checked + label{ background:rgba(0,87,184,.14); border-color:var(--blue); border-left-color:var(--blue-lt); }
.choice input:checked + label b{ color:var(--white); }
.choice input:checked + label::after{
  content:"✓"; position:absolute; top:.7rem; right:.85rem; color:var(--blue-lt); font-size:.9rem; font-weight:700;
}
.choice input:focus-visible + label{ outline:2px solid var(--blue-lt); outline-offset:2px; }

/* Fields */
.field{ margin-bottom:1.25rem; }
.field > label,.flabel{
  display:block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--silver); margin-bottom:.5rem;
}
.field .hint{ display:block; font-family:var(--f-body); font-size:.82rem; letter-spacing:0; text-transform:none; color:var(--text-faint); margin-top:.35rem; }
.req{ color:var(--gold); }

.input,textarea.input,select.input{
  width:100%; padding:.92rem 1rem; background:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--r); color:var(--white);
  font-size:1rem; transition:border-color var(--t-fast), background var(--t-fast);
}
.input::placeholder{ color:var(--text-faint); }
.input:focus{ outline:0; border-color:var(--blue); background:#0D1015; }
textarea.input{ min-height:130px; resize:vertical; line-height:1.55; }
select.input{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--silver) 50%),linear-gradient(135deg,var(--silver) 50%,transparent 50%);
  background-position:calc(100% - 20px) 52%, calc(100% - 14px) 52%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat;
}
.input.is-bad{ border-color:#B4453A; }
.err{ display:none; margin-top:.4rem; font-size:.8rem; color:#E0796D; }
.err.is-on{ display:block; }

.pair{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:620px){ .pair{ grid-template-columns:1fr; } }

/* Location block with the road line between pickup and delivery */
.route{ display:grid; grid-template-columns:1fr auto 1fr; gap:1.2rem; align-items:start; }
.route__mid{ padding-top:2.6rem; }
.route__mid i{
  display:block; width:2px; height:56px;
  background:repeating-linear-gradient(180deg,var(--silver) 0 8px, transparent 8px 16px);
  opacity:.5; margin:0 auto;
}
@media (max-width:760px){ .route{ grid-template-columns:1fr; } .route__mid{ display:none; } }

/* File upload */
.drop{
  border:2px dashed var(--line-strong); background:var(--ink);
  padding:2rem 1.4rem; text-align:center; cursor:pointer;
  transition:border-color var(--t-fast), background var(--t-fast);
}
.drop:hover,.drop.is-over{ border-color:var(--blue); background:rgba(0,87,184,.07); }
.drop b{ display:block; font-family:var(--f-display); font-size:1.25rem; font-weight:700; text-transform:uppercase; color:var(--white); }
.drop span{ font-size:.86rem; color:var(--text-faint); }
.drop input{ display:none; }
.files{ display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin-top:1rem; }
.file{ position:relative; border:1px solid var(--line); background:var(--panel); overflow:hidden; }
.file img{ width:100%; height:96px; object-fit:cover; }
.file__meta{ padding:.5rem .6rem; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.file__x{
  position:absolute; top:4px; right:4px; width:24px; height:24px;
  background:rgba(10,10,10,.85); border:1px solid var(--line-strong); color:var(--white);
  cursor:pointer; line-height:1; font-size:.85rem;
}
.file__x:hover{ background:#B4453A; border-color:#B4453A; }
.file--doc{ display:flex; align-items:center; justify-content:center; height:96px; font-family:var(--f-mono); font-size:.7rem; color:var(--silver); background:var(--panel-2); }

/* ---------- 13. PROJECT SUMMARY TICKET ---------- */
.ticket{
  background:var(--charcoal); border:1px solid var(--line-strong);
  border-top:3px solid var(--blue); position:relative;
}
.ticket__hd{ padding:1.5rem clamp(1.3rem,3vw,2.2rem) 1.2rem; border-bottom:1px dashed var(--line-strong); }
.ticket__hd h2{ font-family:var(--f-display); font-size:clamp(1.5rem,3vw,2.15rem); font-weight:800; text-transform:uppercase; color:var(--white); line-height:1; }
.ticket__id{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; color:var(--gold); }
.ticket__bd{ padding:clamp(1.1rem,2.5vw,1.8rem) clamp(1.3rem,3vw,2.2rem); }
.ticket__row{
  display:grid; grid-template-columns:190px minmax(0,1fr); gap:1rem;
  padding:.72rem 0; border-bottom:1px solid var(--line); align-items:baseline;
}
.ticket__row:last-child{ border-bottom:0; }
.ticket__row dt{
  font-family:var(--f-mono); font-size:.67rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel);
}
.ticket__row dd{ margin:0; color:var(--white); font-size:.98rem; }
.ticket__row dd.empty{ color:var(--text-faint); font-style:italic; }
@media (max-width:620px){ .ticket__row{ grid-template-columns:1fr; gap:.2rem; } }
.ticket__ft{ padding:1.3rem clamp(1.3rem,3vw,2.2rem); border-top:1px dashed var(--line-strong); background:rgba(10,10,10,.35); }

.actions{ display:grid; gap:.7rem; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }

/* Post-submit next-step cards */
.nextstep{ border:1px solid var(--line); background:var(--panel); padding:1.2rem 1.3rem; }
.nextstep h4{ font-family:var(--f-display); font-size:1.15rem; font-weight:700; text-transform:uppercase; color:var(--white); margin-bottom:.35rem; }

/* ---------- 14. GALLERY ---------- */
.gal{ display:grid; gap:1px; grid-template-columns:repeat(3,1fr); background:var(--line); }
@media (max-width:860px){ .gal{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .gal{ grid-template-columns:1fr; } }
.gal__item{ position:relative; background:var(--charcoal); aspect-ratio:4/3; overflow:hidden; }
.gal__item img{ width:100%; height:100%; object-fit:cover; transition:transform var(--t); }
.gal__item:hover img{ transform:scale(1.04); }
.gal__slot{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.6rem; text-align:center; padding:1.4rem;
  background:
    repeating-linear-gradient(135deg, rgba(167,169,172,.045) 0 1px, transparent 1px 10px),
    linear-gradient(160deg,#1A1D21,#101215);
}
.gal__slot b{ font-family:var(--f-display); font-size:1.15rem; font-weight:700; text-transform:uppercase; color:var(--steel); }
.gal__slot span{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-faint); }
.gal__tag{
  position:absolute; top:0; left:0; z-index:2; padding:.4rem .75rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  background:var(--ink); color:var(--gold); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.8rem; }
.filters button{
  padding:.5rem 1.05rem; background:transparent; border:1px solid var(--line-strong); cursor:pointer;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-dim);
  transition:all var(--t-fast);
}
.filters button:hover{ color:var(--white); border-color:var(--silver); }
.filters button[aria-pressed="true"]{ background:var(--blue); border-color:var(--blue); color:#fff; }

/* ---------- 14b. TRUCK VIDEO ---------- */
.truckvid{ position:relative; border:1px solid var(--line); background:var(--charcoal); overflow:hidden; }
/* Phone footage is taller than it is wide, so it gets capped and centred
   instead of stretching a two-storey player down the column. */
.truckvid--portrait{ max-width:400px; margin-inline:auto; }
.truckvid__el{ display:block; width:100%; height:auto; background:#000; }
.truckvid--portrait .truckvid__el{ aspect-ratio:9/16; object-fit:cover; }
.truckvid__tag{
  position:absolute; top:0; left:0; z-index:2; padding:.4rem .75rem;
  font-family:var(--f-mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  background:var(--ink); color:var(--gold); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  pointer-events:none;
}
.truckvid__cap{
  padding:.9rem 1.1rem; border-top:1px solid var(--line);
  font-size:.85rem; line-height:1.55; color:var(--text-dim);
}

/* ---------- 15. ACCORDION ---------- */
.acc{ border-top:1px solid var(--line-strong); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  padding:1.35rem 0; background:transparent; border:0; cursor:pointer; text-align:left;
  font-family:var(--f-display); font-size:clamp(1.1rem,2vw,1.4rem); font-weight:700;
  text-transform:uppercase; color:var(--white); transition:color var(--t-fast);
}
.acc__btn:hover{ color:var(--blue-lt); }
.acc__btn i{
  flex-shrink:0; width:26px; height:26px; border:1px solid var(--line-strong); position:relative;
  transition:border-color var(--t-fast), transform var(--t);
}
.acc__btn i::before,.acc__btn i::after{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--silver); transition:opacity var(--t-fast), background var(--t-fast);
}
.acc__btn i::before{ width:11px; height:1.5px; }
.acc__btn i::after{ width:1.5px; height:11px; }
.acc__btn[aria-expanded="true"] i{ border-color:var(--blue); }
.acc__btn[aria-expanded="true"] i::after{ opacity:0; }
.acc__btn[aria-expanded="true"] i::before{ background:var(--blue-lt); }
.acc__pane{ overflow:hidden; max-height:0; transition:max-height var(--t); }
.acc__pane > div{ padding:0 0 1.5rem; max-width:72ch; color:var(--text-dim); }

/* Honest placeholder when an answer needs Mickey's real info */
.needs{
  display:inline-flex; align-items:center; gap:.55rem; padding:.55rem .85rem;
  border:1px dashed var(--gold-dim); background:rgba(176,141,58,.07); color:var(--silver);
  font-size:.88rem;
}
.needs b{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }

/* ---------- 16. CTA BAND ---------- */
.band{ position:relative; background:var(--navy-deep); overflow:hidden; border-block:1px solid rgba(255,255,255,.12); }
.band::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(80% 130% at 88% 50%, rgba(0,87,184,.55) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 12px);
}
.band .wrap{ position:relative; z-index:1; }
.band__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; padding-block:clamp(40px,6vw,72px); }
.band h2{ max-width:22ch; }
.band .lede{ color:rgba(255,255,255,.78); }

/* ---------- 17. FOOTER ---------- */
.ftr{ background:#07182c; color:#fff; border-top:1px solid rgba(255,255,255,.12); padding-top:clamp(44px,6vw,72px); }
.ftr .body-dim,.ftr a{ color:#b9c7d6; }
.ftr a:hover,.ftr h4{ color:#fff; }
.ftr .ftr__bot p{ color:#91a4b8; }
.ftr__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:clamp(24px,4vw,48px); padding-bottom:2.8rem; }
@media (max-width:900px){ .ftr__top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .ftr__top{ grid-template-columns:1fr; } }
.ftr h4{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:1.1rem; }
.ftr li{ margin-bottom:.6rem; }
.ftr a{ color:var(--text-dim); font-size:.93rem; transition:color var(--t-fast); }
.ftr a:hover{ color:var(--white); }
.ftr__logo{ width:min(100%,260px); padding:.45rem; background:#fff; border-radius:6px; margin-bottom:1.2rem; }
.ftr__bot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding-block:1.5rem; border-top:1px solid var(--line);
}
.ftr__bot p{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.ftr__credit a{ font-size:inherit; color:#b9c7d6; }
.ftr__credit a:hover{ color:#fff; }
.vh{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ---------- 18. PAGE HEADER (inner pages) ---------- */
.phead{ position:relative; background:var(--charcoal); border-bottom:1px solid var(--line); overflow:hidden; }
.phead::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(70% 120% at 90% 10%, rgba(0,87,184,.22) 0%, transparent 60%),
    repeating-linear-gradient(135deg, rgba(167,169,172,.035) 0 1px, transparent 1px 11px);
}
.phead .wrap{ position:relative; z-index:1; padding-block:clamp(44px,7vw,88px); }
.crumbs{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-faint); margin-bottom:1.1rem; }
.crumbs a{ color:var(--silver); }
.crumbs a:hover{ color:var(--white); }
.crumbs span{ margin-inline:.5rem; color:var(--steel); }

/* Light-theme component corrections. */
.input,textarea.input,select.input,.drop{ background:#fff; color:var(--text); }
.input:focus{ background:#fff; }
.wiz__ft,.ticket__ft{ background:#f5f8fb; }
.callbar a{ background:#fff; color:var(--navy-deep); }
.callbar a.is-primary{ color:#fff; }
.drawer{ background:#fff; }
.drawer a.drawer__link{ color:var(--navy-deep); }
.band .h-lg,.band .btn--ghost{ color:#fff; }
.band .btn--ghost{ border-color:rgba(255,255,255,.5); }
.hero .railbox{ background:rgba(7,24,44,.88); border-color:rgba(255,255,255,.22); }
.hero .railbox__row span{ color:#c9d7e7; }
.hero .railbox__row strong{ color:#fff; }

@media (max-width:760px){
  .section{ padding-block:44px; }
  .hdr__bar{ height:72px; }
  .brand__mark{ width:84px; height:64px; }
  .drawer{ inset:72px 0 0; padding-top:1rem; }
  .drawer a.drawer__link{ padding:.8rem 0; font-size:1.45rem; }
  .hero{ min-height:auto; }
  .hero__inner{ padding-block:76px 48px; }
  .hero__grid{ gap:24px; }
  .hero .btn-row,.band .btn-row{ display:grid; width:100%; }
  .hero .btn,.band .btn{ width:100%; }
  .railbox{ display:none; }
  .sec-head{ margin-bottom:28px; }
  .mt-l{ margin-top:1.8rem; }
  .phead .wrap{ padding-block:36px; }
}

@media (max-width:420px){
  .h-xl{ font-size:2.7rem; }
  .h-lg{ font-size:2.15rem; }
  .btn{ width:100%; padding-inline:1rem; }
  .matcher__tab{ flex-basis:50%; min-height:48px; }
  .choices{ grid-template-columns:1fr; }
  .wiz__hd,.wiz__bd,.wiz__ft{ padding-inline:1rem; }
  .wiz__ft{ flex-wrap:wrap; }
  .ftr__top{ gap:28px; }
}

/* ---------- 19. MISC ---------- */
.tag{
  display:inline-block; padding:.28rem .6rem; margin:0 .3rem .3rem 0;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.03);
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--silver);
}
.hide{ display:none !important; }
.sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:-9999px; top:0; z-index:200; padding:.9rem 1.3rem;
  background:var(--blue); color:#fff; font-family:var(--f-mono); font-size:.75rem; letter-spacing:.15em;
}
.skip:focus{ left:0; }

/* Reveal on scroll */
.rv{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.rv.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rv{ opacity:1; transform:none; } }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); z-index:120;
  background:var(--panel-2); border:1px solid var(--line-strong); border-left:3px solid var(--blue);
  padding:.85rem 1.3rem; color:var(--white); font-size:.9rem;
  opacity:0; pointer-events:none; transition:opacity var(--t), transform var(--t);
}
.toast.is-on{ opacity:1; transform:translate(-50%,0); }
@media (max-width:760px){ .toast{ bottom:76px; } }

/* Print - the summary should print like a real work order */
@media print{
  .hdr,.callbar,.ftr,.band,.wiz__rail,.wiz__ft,.actions,.strip,.skip,.toast{ display:none !important; }
  body{ background:#fff; color:#000; padding:0; }
  .ticket{ background:#fff; border:1px solid #000; }
  .ticket__row dt{ color:#444; }
  .ticket__row dd,.ticket__hd h2{ color:#000; }
  .section{ padding-block:0; }
}

/* ============================================================
   CONTRAST FIXES (2026-10-27)
   The light theme turned --text-dim / --silver / --gold into
   dark blue-greys meant for white pages, but the footer, the
   hero and the CTA band are still dark navy, so text there fell
   to 2.3-3.1:1. Dark sections get their own light colours here;
   --text-faint is darkened so it also passes on white.
   Every pair below is at least 4.5:1.
   ============================================================ */
:root{ --text-faint:#5d6c80; }                       /* 5.4:1 on white, 5.0:1 on #f3f6fa */
.crumbs span{ color:var(--text-faint); }

/* Footer (#07182c) */
.ftr a{ color:#b9c7d6; }                             /* 10.4:1 */
.ftr a:hover{ color:#fff; }
.ftr h4{ color:#6fa8e6; }                            /*  7.2:1 */
.ftr .code{ color:#91a4b8; }                         /*  7.0:1 */

/* Home hero label over the dark photo */
.hero .marker{ color:#b9c7d6; }
.hero .marker b{ color:#6fa8e6; }

/* CTA band: the main "Request A Hauling Quote" button was blue on navy */
.band .btn--gold{ --btn-bg:#fff; --btn-fg:#062f59; --btn-bd:#fff; }
.band .btn--gold:hover{ background:#dbe8f6; border-color:#dbe8f6; --btn-fg:#062f59; }