/* ============================================================================
   FTS DISPATCH — SECTION LAYOUTS
   ========================================================================== */

/* ---------- HERO ---------- */
.hero { position: relative; padding-top: clamp(2.5rem, 1rem + 5vw, 5rem); padding-bottom: 0; }
.hero__grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 33rem) 1fr;
  gap: clamp(1rem, 4vw, 3rem); align-items: center; min-height: min(78vh, 760px);
}
.hero__copy { position: relative; z-index: var(--z-raise); padding-block: 1.5rem 6rem; }
.hero__badge { margin-bottom: 1.5rem; }
.hero h1 { font-size: var(--fs-mega); text-transform: uppercase; }
.hero h1 .line { display: block; overflow: hidden; }
.hero h1 .line > span { display: block; will-change: transform; }
.hero h1 .hl { color: var(--amber); }
.hero__sub { margin: 1.6rem 0 2rem; max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 2rem; }
.hero__trust { margin-top: 1.5rem; }

/* the stage that holds the 3D canvas + static fallback; bleeds right and down over the seam */
.hero__stage { position: absolute; inset: 8% calc(var(--gutter) * -1) -6rem 46%;
  z-index: var(--z-base); }
.hero__canvas, .hero__fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__canvas { opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
.hero__canvas[data-ready="true"] { opacity: 1; }
.hero__fallback { object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); transition: opacity var(--t-slow); }
.hero__stage[data-3d="true"] .hero__fallback { opacity: 0; pointer-events: none; }
.hero__glow { position: absolute; z-index: 0; left: 40%; top: 30%; width: 55%; height: 60%;
  background: radial-gradient(closest-side, rgba(255,55,61,.15), transparent 70%);
  filter: blur(20px); pointer-events: none; }

/* hero DMS marquee sits at the very bottom, riding the seam */
.hero__dms { position: relative; z-index: var(--z-raise); margin-top: 1rem;
  transform: translateY(50%); }
.hero__dms .dms { padding-block: .7rem; }
.hero__dms .dms__label { position: absolute; left: 14px; top: -10px; z-index: 5;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); background: var(--asphalt); padding: 0 .4rem; }
/* ---------- STATS ---------- */
.stats { padding-block: clamp(3rem,2rem+4vw,5rem); }
.stats__panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--r-md);
  overflow: hidden; }
.stat { background: var(--asphalt); padding: clamp(1.4rem,3vw,2.4rem) 1.4rem; position: relative; }
.stat__num { font-family: var(--font-mono); font-weight: 600; font-size: clamp(2.2rem,1.4rem+3vw,3.6rem);
  color: var(--amber); text-shadow: var(--glow-amber); line-height: 1; letter-spacing: -.01em;
  display: flex; align-items: baseline; }
.stat__suffix { font-size: .45em; margin-left: .15rem; color: var(--amber); }
.stat__label { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-on-dark-soft); margin-top: .7rem; }
.stat::after { content: ""; position: absolute; top: 1.4rem; right: 1.4rem; width: 7px; height: 7px;
  border-radius: 50%; background: var(--guide-lite); box-shadow: 0 0 8px var(--guide-lite); }
@media (max-width: 720px){ .stats__panel { grid-template-columns: 1fr 1fr; } }

/* ---------- SERVICES: load board ---------- */
.board__head, .board__row {
  display: grid; grid-template-columns: minmax(11rem, 1.1fr) minmax(0,2fr) auto;
  gap: clamp(1rem,3vw,2.5rem); align-items: center;
}
.board__head { padding: 0 1.25rem .9rem; font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-on-light-faint);
  border-bottom: 2px solid var(--ink-on-light); }
.board { border-top: 0; }
.board__row { position: relative; padding: clamp(1.1rem,2.5vw,1.6rem) 1.25rem;
  border-bottom: 1px solid var(--line-light); transition: background var(--t-base) var(--ease-out); }
.board__row::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--hazard); transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-base) var(--ease-out); }
.board__row:hover { background: var(--bone-2); }
.board__row:hover::before { transform: scaleY(1); }
.board__equip { display: flex; align-items: center; gap: .9rem; }
.board__icon { flex: 0 0 auto; width: 52px; height: 34px; color: var(--asphalt); opacity: .9; }
.board__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem,1.1rem+1vw,1.9rem);
  text-transform: uppercase; line-height: 1; }
.board__tag { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em;
  color: var(--ink-on-light-faint); margin-top: .3rem; display: block; }
.board__desc { color: var(--ink-on-light-soft); font-size: var(--fs-sm); }
.board__desc b { color: var(--ink-on-light); font-weight: 700; }
.board__go { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-on-light);
  white-space: nowrap; opacity: 0; transform: translateX(-6px);
  transition: opacity var(--t-base), transform var(--t-base) var(--ease-spring); }
.board__row:hover .board__go { opacity: 1; transform: none; }
.services__note { margin-top: 1.6rem; font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--ink-on-light-soft); display: flex; gap: .6rem; align-items: baseline; }
@media (max-width: 760px){
  .board__head { display: none; }
  .board__row { grid-template-columns: 1fr; gap: .7rem; }
  .board__go { opacity: 1; transform: none; }
}

/* ---------- HOW IT WORKS: mile markers ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,3vw,2rem);
  position: relative; margin-top: 1rem; }
.steps::before { content: ""; position: absolute; top: 34px; left: 6%; right: 6%; height: 3px;
  background: repeating-linear-gradient(90deg, var(--amber) 0 18px, transparent 18px 34px); opacity: .4; }
.step { position: relative; }
.milemarker { width: 68px; height: 84px; background: var(--hazard); border-radius: var(--r-sign);
  border: 2px solid var(--silver-bright); color: var(--reflect); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.9); margin-bottom: 1.4rem; }
.milemarker .m { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .18em; opacity: .85; }
.milemarker .n { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; line-height: .9; }
.step h3 { font-size: var(--fs-h3); text-transform: uppercase; margin-bottom: .5rem; }
.step p { color: var(--ink-on-dark-soft); font-size: var(--fs-sm); }
.step__docs { margin-top: .8rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.step__docs .tag { color: var(--amber); }
@media (max-width: 820px){
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before { top: 0; bottom: 0; left: 33px; right: auto; width: 3px; height: auto;
    background: repeating-linear-gradient(180deg, var(--amber) 0 18px, transparent 18px 34px); }
  .step { display: grid; grid-template-columns: 68px 1fr; gap: 1.4rem; padding-bottom: 2.5rem; }
  .milemarker { margin-bottom: 0; }
}

/* ---------- PRICING ---------- */
.pricing__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: stretch; }
.tier { display: flex; flex-direction: column; position: relative; }
.tier--featured { outline: 2px solid var(--amber); }
.tier__flag { position: absolute; top: -12px; left: 1.5rem; background: var(--amber); color: var(--asphalt);
  font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-xs); letter-spacing: .1em;
  text-transform: uppercase; padding: .2rem .7rem; border-radius: var(--r-sign); }
.tier__name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3);
  text-transform: uppercase; }
.tier__for { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-on-light-faint);
  letter-spacing: .06em; margin-top: .2rem; }
.band--night .tier__for { color: var(--ink-on-dark-faint); }
.tier__pct { font-family: var(--font-mono); font-weight: 700; font-size: clamp(3rem,2rem+3vw,4.2rem);
  line-height: 1; margin: 1.2rem 0 .2rem; display: flex; align-items: flex-start; }
.tier__pct .sym { font-size: .44em; margin-top: .18em; margin-left: .04em; color: var(--hazard); }
.tier__unit { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-on-light-soft); margin-bottom: 1.3rem; }
.band--night .tier__unit { color: var(--ink-on-dark-soft); }
.tier__list { display: grid; gap: .7rem; margin-bottom: 1.5rem; font-size: var(--fs-sm); }
.tier__list li { display: grid; grid-template-columns: 20px 1fr; gap: .6rem; align-items: start; }
.tier__list li svg { width: 16px; height: 16px; margin-top: .28rem; color: var(--guide-lite); }
.tier__foot { margin-top: auto; }
.pricing__compare { margin-top: 1.75rem; display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 1rem; align-items: center; }
.compare__col { padding: 1.4rem 1.5rem; border-radius: var(--r-md); }
.compare__col--them { background: var(--bone-2); border: 1px dashed var(--bone-3); }
.compare__col--us { background: var(--asphalt); color: var(--ink-on-dark); }
.compare__col h4 { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: .6rem; }
.compare__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem,1.2rem+2vw,2.6rem);
  line-height: 1; }
.compare__col--them .compare__big { color: var(--hazard-deep); }
.compare__col--us .compare__big { color: var(--amber); }
.compare__note { font-family: var(--font-mono); font-size: var(--fs-xs); margin-top: .5rem; opacity: .8; }
.compare__vs { font-family: var(--font-display); font-weight: 800; color: var(--ink-on-light-faint); }
@media (max-width: 860px){ .pricing__grid { grid-template-columns: 1fr; }
  .pricing__compare { grid-template-columns: 1fr; } .compare__vs { justify-self: center; } }

/* ---------- WHY US ---------- */
.why__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.why__item { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
.why__ico { width: 54px; height: 54px; flex: 0 0 auto; border-radius: var(--r-sign);
  display: grid; place-items: center; background: var(--asphalt-2); border: 1px solid var(--line-dark);
  color: var(--amber); }
.why__ico svg { width: 26px; height: 26px; }
.why__item h3 { font-size: var(--fs-h3); text-transform: uppercase; margin-bottom: .4rem; }
.why__item p { color: var(--ink-on-dark-soft); font-size: var(--fs-sm); }
@media (max-width: 720px){ .why__grid { grid-template-columns: 1fr; } }

/* ---------- TESTIMONIALS ---------- */
.rigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.rig { display: flex; flex-direction: column; }
.rig:nth-child(2){ transform: translateY(1.75rem); }   /* asymmetric stagger */
.rig__cb { display: flex; align-items: center; gap: .55rem; font-family: var(--font-mono);
  font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--guide-lite);
  margin-bottom: 1rem; }
.rig__cb .live { width: 8px; height: 8px; border-radius: 50%; background: var(--guide-lite);
  box-shadow: 0 0 8px var(--guide-lite); }
.rig__quote { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.5; }
.rig__quote::before { content: "\201C"; font-family: var(--font-display); font-size: 2.5rem;
  color: var(--hazard); line-height: 0; vertical-align: -.35em; margin-right: .1em; }
.rig__by { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line-light);
  display: flex; align-items: center; gap: .8rem; }
.rig__handle { font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 1.1rem; line-height: 1; }
.rig__meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-on-light-faint);
  letter-spacing: .04em; margin-top: .2rem; }
.rig__plate { margin-left: auto; font-family: var(--font-stencil); font-weight: 700;
  background: var(--asphalt); color: var(--amber); padding: .2rem .5rem; border-radius: 3px;
  font-size: .8rem; letter-spacing: .08em; }
@media (max-width: 860px){ .rigs { grid-template-columns: 1fr; } .rig:nth-child(2){ transform: none; } }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 22rem) 1fr; gap: clamp(2rem,5vw,4rem); align-items: start; }
@media (max-width: 860px){ .faq__grid { grid-template-columns: 1fr; } }

/* ---------- LEAD CAPTURE ---------- */
.lead__grid { display: grid; grid-template-columns: 1fr minmax(0, 30rem); gap: clamp(2rem,5vw,4rem); align-items: start; }
.lead__aside h2 { font-size: var(--fs-h2); text-transform: uppercase; }
.lead__list { display: grid; gap: 1.1rem; margin-top: 1.75rem; }
.lead__list li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.lead__list .n { font-family: var(--font-mono); font-weight: 700; color: var(--amber);
  font-size: 1.1rem; padding-top: .1rem; }
.lead__list b { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: .01em; }
.lead__list span { color: var(--ink-on-dark-soft); font-size: var(--fs-sm); }
.lead__card { background: var(--asphalt-2); border: 1px solid var(--line-dark);
  border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2.1rem);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.lead__card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; }
.lead__card-head .t { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 1.3rem; }
.privacy-note { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-on-dark-faint);
  margin-top: 1rem; line-height: 1.5; }
@media (max-width: 860px){ .lead__grid { grid-template-columns: 1fr; } }

/* ---------- FOOTER ---------- */
.footer { background: #131619; color: var(--ink-on-dark); padding-block: clamp(3rem,2rem+4vw,5rem) 2rem; }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer__brand .brand { color: var(--reflect); margin-bottom: 1.1rem; }
.footer__brand p { color: var(--ink-on-dark-soft); font-size: var(--fs-sm); max-width: 34ch; }
.footer h4 { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin-bottom: 1rem; }
.footer__nap { font-style: normal; font-size: var(--fs-sm); color: var(--ink-on-dark-soft); line-height: 1.9; }
.footer__nap a { color: var(--ink-on-dark); }
.footer__links { display: grid; gap: .6rem; font-size: var(--fs-sm); }
.footer__links a { color: var(--ink-on-dark-soft); transition: color var(--t-fast); }
.footer__links a:hover { color: var(--amber); }
.footer__states { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.footer__states .lbl { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-on-dark-faint); margin-bottom: .8rem; }
.footer__states .grid { display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.footer__states .st { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-on-dark-soft);
  padding: .15rem .4rem; border: 1px solid var(--line-dark); border-radius: 3px; }
.footer__bottom { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line-dark);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-on-dark-faint); }
.footer__compliance { max-width: 62ch; line-height: 1.6; }
@media (max-width: 760px){ .footer__top { grid-template-columns: 1fr; gap: 2rem; } }

/* ---------- RESPONSIVE: shoulder + nav ---------- */
@media (min-width: 900px){
  .shoulder { display: block; }
}
@media (max-width: 900px){
  .nav, .header__phone, .header__cta { display: none; }
  .burger { display: block; }
  :root { --shoulder-w: 0px; }
}
@media (max-width: 900px){
  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__stage { position: relative; inset: auto; height: clamp(240px, 52vw, 380px);
    margin: 0 calc(var(--gutter) * -1); }
  .hero__copy { padding-block: 1rem 2rem; }
  .hero__dms { transform: none; margin-top: 2rem; }
  .callbar { display: grid; }
  body { padding-bottom: 56px; }   /* room for call bar */
  .floatcta { bottom: 68px; }
}
@media (max-width: 520px){
  .header__row { gap: .75rem; }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .marquee__track { animation: none !important; }
  .header__phone .amber-dot { animation: none !important; }
  .hero__canvas { display: none !important; }
}