@font-face{font-family:'Newsreader';font-style:normal;font-weight:200 700;font-display:swap;src:url(https://lioomoving.com/wp-content/uploads/lioo-v3-fonts/newsreader-var.woff2) format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:100 900;font-display:swap;src:url(https://lioomoving.com/wp-content/uploads/lioo-v3-fonts/hanken-var.woff2) format('woff2')}

/* ==========================================================================
   LIOO v3 HERO — scoped styles. Mobile-first; enhancements layer up.
   No :root. No global selectors except the one motion-safe scroll rule.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

.lioo-hero,
.lioo-hero *,
.lioo-hero *::before,
.lioo-hero *::after { box-sizing: border-box; }

.lioo-hero {
  /* --- design tokens (scoped) --- */
  --lh-ink: #222222;
  --lh-hair: rgba(255, 255, 255, .10);
  --lh-hair-strong: rgba(255, 255, 255, .24);
  --lh-tx: rgba(255, 255, 255, .94);
  --lh-tx-72: rgba(255, 255, 255, .72);
  --lh-tx-55: rgba(255, 255, 255, .55);
  --lh-tx-40: rgba(255, 255, 255, .40);
  --lh-cyan: #02D8FD;
  --lh-cyan-ink: #08171B;
  --lh-danger: #FF8A7A;
  --lh-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --lh-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lh-ease: cubic-bezier(.22, .61, .36, 1);
  /* tune once if the sticky header height changes */
  --lh-header: 90px;

  position: relative;
  z-index: 3;
  background: var(--lh-ink);
  color: var(--lh-tx-72);
  font-family: var(--lh-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  contain: layout paint;
}

.lioo-hero ::selection { background: var(--lh-cyan); color: var(--lh-cyan-ink); }
.lioo-hero img { max-width: 100%; display: block; }
.lioo-hero a { color: inherit; text-decoration: none; }
.lioo-hero a:focus-visible,
.lioo-hero button:focus-visible,
.lioo-hero input:focus-visible,
.lioo-hero select:focus-visible {
  outline: 2px solid var(--lh-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
.lioo-hero h1 { margin: 0; text-wrap: balance; }
.lioo-hero p { margin: 0 0 1.1em; }

/* bottom fade into next section */
.lioo-hero::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: auto 0 0 0;
  height: 190px;
  background: linear-gradient(to top, rgba(28, 28, 28, .96), rgba(34, 34, 34, 0));
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   LAYER 1 — backdrop
   Mobile: heavy flat scrim over the image. No will-change, no parallax.
   -------------------------------------------------------------------------- */
.lioo-hero .lh-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34, 34, 34, .88), rgba(34, 34, 34, .94)),
    var(--lh-img);
  background-size: cover;
  background-position: right 74%;
  filter: saturate(.35) contrast(1.04);
  opacity: .9;
}

.lioo-hero .lh-glow {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(680px 560px at 72% 36%, rgba(2, 216, 253, .18), transparent 70%);
}

.lioo-hero .lh-bp {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background-image:
    linear-gradient(rgba(2, 216, 253, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2, 216, 253, .05) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(75% 80% at 32% 38%, #000 0%, transparent 78%);
          mask-image: radial-gradient(75% 80% at 32% 38%, #000 0%, transparent 78%);
}

/* dust: desktop + motion only. Never rendered on mobile. */
.lioo-hero .lh-dust { display: none; }

/* --------------------------------------------------------------------------
   LAYER 2 — content grid
   -------------------------------------------------------------------------- */
.lioo-hero .lh-wrap {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px clamp(20px, 4vw, 40px) 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.lioo-hero .lh-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lh-cyan);
  margin: 0 0 16px;
}

.lioo-hero h1 {
  font-family: var(--lh-serif);
  font-weight: 300;
  font-size: clamp(34px, 7vw, 72px);
  line-height: 1.05;
  letter-spacing: -.015em;
  color: var(--lh-tx);
  font-variation-settings: 'opsz' 60;
}

/* --- badges --- */
.lioo-hero .lh-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 22px;
  padding: 0;
  list-style: none;
}

.lioo-hero .lh-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lh-tx-72);
  background: rgba(34, 34, 34, .5);
  border: 1px solid var(--lh-hair-strong);
  border-radius: 999px;
  transition:
    color .2s var(--lh-ease),
    border-color .2s var(--lh-ease),
    background-color .2s var(--lh-ease),
    transform .2s var(--lh-ease);
}
.lioo-hero .lh-badge svg { flex: none; }
.lioo-hero .lh-badge b { color: var(--lh-tx); font-weight: 700; }
.lioo-hero .lh-stars { color: var(--lh-cyan); letter-spacing: 2px; font-size: 15px; }

.lioo-hero .lh-intro {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--lh-tx-72);
  max-width: 58ch;
}
.lioo-hero .lh-intro a {
  color: var(--lh-cyan);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- buttons --- */
.lioo-hero .lh-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.lioo-hero .lh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 26px;
  border: 0;
  border-radius: 999px;
  font-family: var(--lh-sans);
  font-size: 15.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform .32s var(--lh-ease),
    box-shadow .32s var(--lh-ease),
    border-color .32s var(--lh-ease),
    background-color .32s var(--lh-ease);
}
.lioo-hero .lh-btn svg { flex: none; }

.lioo-hero .lh-btn-p { background: var(--lh-cyan); color: var(--lh-cyan-ink); }
.lioo-hero .lh-btn-s {
  background: transparent;
  color: var(--lh-tx);
  border: 1px solid var(--lh-hair-strong);
}
.lioo-hero .lh-btn[disabled] { opacity: .6; cursor: progress; }

.lioo-hero .lh-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* --------------------------------------------------------------------------
   LAYER 3 — route line + truck (decorative)
   -------------------------------------------------------------------------- */
.lioo-hero .lh-route {
  position: absolute;
  z-index: 2;
  inset: auto 0 30px 0;
  width: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 7px rgba(2, 216, 253, .45));
}
.lioo-hero .lh-route path {
  stroke: var(--lh-cyan);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;
  transition: stroke-dashoffset 1.6s var(--lh-ease) .5s;
}
.lioo-hero .lh-route circle {
  fill: var(--lh-ink);
  stroke: var(--lh-cyan);
  stroke-width: 2;
  opacity: 0;
  transition: opacity .5s var(--lh-ease);
}
.lioo-hero .lh-route .rb { fill: var(--lh-cyan); }
.lioo-hero .lh-route.is-drawn path { stroke-dashoffset: 0; }
.lioo-hero .lh-route.is-drawn .ra { opacity: 1; transition-delay: .5s; }
.lioo-hero .lh-route.is-drawn .rb { opacity: .8; transition-delay: 2s; }

.lioo-hero .lh-truckstrip {
  position: absolute;
  z-index: 2;
  inset: auto 0 30px 0;
  height: 72px;
  overflow: hidden;
  pointer-events: none;
}
.lioo-hero .lh-truckmove {
  position: absolute;
  inset: 0;
  transform: translateX(calc(-100% - 80px));
}
.lioo-hero .lh-mini {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 54px;
  height: auto;
  transform: translateY(-14px);
}
.lioo-hero .lh-mini .ln {
  stroke: rgba(255, 255, 255, .65);
  stroke-width: 1.3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lioo-hero .lh-mini .bd { fill: #222222; }
.lioo-hero .lh-mini .hub { fill: var(--lh-cyan); }
.lioo-hero .lh-mini .wmk {
  font-family: var(--lh-serif);
  font-weight: 500;
  font-size: 7.6px;
  fill: rgba(255, 255, 255, .92);
  letter-spacing: .02em;
}
.lioo-hero .lh-mini .wmk tspan { fill: var(--lh-cyan); }
.lioo-hero .lh-mini .w { transform-box: fill-box; transform-origin: center; }

/* scroll cue: desktop + motion only */
.lioo-hero .lh-cue { display: none; }

/* --------------------------------------------------------------------------
   LAYER 4 — quote card
   Mobile: solid tinted panel. No backdrop-filter (GPU-expensive, invisible here).
   -------------------------------------------------------------------------- */
.lioo-hero .lh-qwrap { position: relative; min-width: 0; }

.lioo-hero .lh-qglass { display: none; }

.lioo-hero .lh-qcard {
  position: relative;
  z-index: 1;
  padding: 32px 24px 28px;
  background: rgba(40, 40, 40, .96);
  border: 1px solid rgba(255, 255, 255, .14);
  border-top: 3px solid rgba(2, 216, 253, .22);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 20px 48px rgba(0, 0, 0, .45);
  scroll-margin-top: var(--lh-header);
}

.lioo-hero .lh-qcard-title {
  margin: 0 0 8px;
  font-family: var(--lh-serif);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.15;
  color: var(--lh-tx);
  text-wrap: balance;
}
.lioo-hero .lh-sub { font-size: 14px; color: var(--lh-tx-55); margin-bottom: 24px; }

.lioo-hero .lh-prog {
  position: absolute;
  inset: -3px 0 auto 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
  pointer-events: none;
}
.lioo-hero .lh-prog i {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, rgba(2, 216, 253, .55), var(--lh-cyan));
  box-shadow: 0 0 10px rgba(2, 216, 253, .5);
  transition: transform .45s var(--lh-ease);
}
.lioo-hero .lh-prog i.is-full { box-shadow: 0 0 18px rgba(2, 216, 253, .95); }

.lioo-hero .lh-trustline {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -10px 0 22px;
  font-size: 12.5px;
  color: var(--lh-tx-55);
}
.lioo-hero .lh-trustline svg { flex: none; }

.lioo-hero .lh-f {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
  min-width: 0;
}
.lioo-hero .lh-f label { font-size: 13px; font-weight: 600; color: var(--lh-tx); }
.lioo-hero .lh-f input,
.lioo-hero .lh-f select {
  width: 100%;
  height: 52px;
  padding: 0 15px;
  font-family: var(--lh-sans);
  /* 16px min prevents iOS Safari auto-zoom on focus */
  font-size: 16px;
  color: var(--lh-tx);
  background: var(--lh-ink);
  border: 1px solid var(--lh-hair-strong);
  border-radius: 10px;
  color-scheme: dark;
  transition:
    border-color .2s var(--lh-ease),
    box-shadow .2s var(--lh-ease),
    background-color .2s var(--lh-ease);
}
.lioo-hero .lh-f input::placeholder { color: var(--lh-tx-40); }
.lioo-hero .lh-f select:invalid { color: var(--lh-tx-40); }
.lioo-hero .lh-f input:focus,
.lioo-hero .lh-f select:focus {
  outline: none;
  border-color: var(--lh-cyan);
  box-shadow: 0 0 0 3px rgba(2, 216, 253, .18);
  background: #242424;
}
.lioo-hero .lh-f input[aria-invalid="true"],
.lioo-hero .lh-f select[aria-invalid="true"] { border-color: var(--lh-danger); }

.lioo-hero .lh-f2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.lioo-hero .lh-honey {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.lioo-hero .lh-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 2px 0 16px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--lh-tx-55);
  cursor: pointer;
}
.lioo-hero .lh-consent b { color: var(--lh-tx-72); font-weight: 700; }
.lioo-hero .lh-consent a { color: var(--lh-cyan); text-decoration: underline; }
.lioo-hero .lh-consent input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 20px;
  min-width: 20px;
  height: 20px;
  margin: 2px 0 0;
  background: var(--lh-ink);
  border: 1px solid var(--lh-hair-strong);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .2s var(--lh-ease), border-color .2s var(--lh-ease);
}
.lioo-hero .lh-consent input:checked {
  background: var(--lh-cyan);
  border-color: var(--lh-cyan);
}
.lioo-hero .lh-consent input:checked::after {
  content: '';
  position: absolute;
  left: 6.5px;
  top: 3px;
  width: 4.5px;
  height: 9px;
  border: solid var(--lh-cyan-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.lioo-hero .lh-qcard .lh-btn {
  width: 100%;
  height: auto;
  min-height: 58px;
  margin-top: 8px;
  padding: 14px 20px;
  white-space: normal;
  line-height: 1.3;
}

.lioo-hero .lh-post {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lh-tx-55);
  text-align: center;
}
.lioo-hero .lh-post a { color: var(--lh-cyan); text-decoration: underline; }

.lioo-hero .lh-err {
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lh-danger);
  background: rgba(255, 138, 122, .08);
  border: 1px solid rgba(255, 138, 122, .3);
  border-radius: 10px;
}
.lioo-hero .lh-err:empty { display: none; }
.lioo-hero .lh-err a { color: var(--lh-danger); font-weight: 700; white-space: nowrap; }

/* --------------------------------------------------------------------------
   MOTION — opt-in only. Everything below is skipped under reduced-motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .lioo-hero .lh-badge:hover {
    color: var(--lh-tx);
    border-color: rgba(2, 216, 253, .55);
    background: rgba(34, 34, 34, .68);
    transform: translateY(-1px);
  }
  .lioo-hero .lh-btn-p:hover {
    transform: translateY(-2px) scale(1.012);
    box-shadow: 0 14px 36px rgba(2, 216, 253, .34);
  }
  .lioo-hero .lh-btn-p:active { transform: translateY(0) scale(.988); transition-duration: .12s; }
  .lioo-hero .lh-btn-s:hover { transform: translateY(-2px); border-color: rgba(255, 255, 255, .42); }
  .lioo-hero .lh-btn-s:active { transform: translateY(0); transition-duration: .12s; }

  /* headline word-mask. transform-only — no reflow, no CLS. */
  .lioo-hero .lh-hw {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .08em;
    margin-bottom: -.08em;
  }
  .lioo-hero .lh-hw i {
    display: inline-block;
    font-style: normal;
    transform: translateY(112%);
    animation: lh-hwup .72s var(--lh-ease) both;
  }
  @keyframes lh-hwup { to { transform: translateY(0); } }

  /* glow + truck: paused when the hero is off-screen (see JS) */
  .lioo-hero .lh-glow { animation: lh-glow 14s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
  @keyframes lh-glow {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-40px, 24px, 0); }
  }

  .lioo-hero .lh-route.is-drawn ~ .lh-truckstrip .lh-truckmove {
    animation: lh-drive 13s linear infinite 2.2s;
  }
  .lioo-hero .lh-route.is-drawn ~ .lh-truckstrip .lh-mini {
    animation: lh-bob 13s linear infinite 2.2s;
  }
  .lioo-hero .lh-route.is-drawn ~ .lh-truckstrip .lh-mini .w {
    animation: lh-spin .55s linear infinite;
  }
  @keyframes lh-drive {
    from { transform: translateX(calc(-100% - 80px)); }
    to   { transform: translateX(80px); }
  }
  @keyframes lh-bob {
    0%   { transform: translateY(-14px); }
    15%  { transform: translateY(-15px); }
    35%  { transform: translateY(-26px); }
    55%  { transform: translateY(-20px); }
    75%  { transform: translateY(-10px); }
    100% { transform: translateY(-24px); }
  }
  @keyframes lh-spin { to { transform: rotate(360deg); } }

  /* JS toggles this when the hero leaves the viewport */
  .lioo-hero.is-offscreen .lh-glow,
  .lioo-hero.is-offscreen .lh-truckmove,
  .lioo-hero.is-offscreen .lh-mini,
  .lioo-hero.is-offscreen .lh-mini .w,
  .lioo-hero.is-offscreen .lh-dust i {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lioo-hero .lh-route path { stroke-dashoffset: 0; transition: none; }
  .lioo-hero .lh-route circle { opacity: 1; transition: none; }
  .lioo-hero .lh-truckstrip { display: none; }
}

/* --------------------------------------------------------------------------
   ≥640px — two-column form rows, roomier card
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .lioo-hero .lh-badges { gap: 10px; }
  .lioo-hero .lh-badge { padding: 0 18px; font-size: 13.5px; }
  .lioo-hero .lh-f2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lioo-hero .lh-qcard { padding: 36px 34px 30px; }
  .lioo-hero .lh-qcard-title { font-size: 29px; }
}

/* --------------------------------------------------------------------------
   ≥1024px — the full cinematic treatment.
   Parallax, dust, glass, backdrop blur, scroll cue all live here.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .lioo-hero .lh-wrap {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 52px;
    align-items: center;
    min-height: min(86svh, 940px);
    padding: 48px clamp(20px, 4vw, 40px) 104px;
  }

  .lioo-hero .lh-bg {
    inset: -140px 0;
    overflow: hidden;
    background-image:
      linear-gradient(90deg, #222 34%, rgba(34, 34, 34, .72) 62%, rgba(34, 34, 34, .42)),
      var(--lh-img);
    box-shadow: inset 0 0 200px 70px rgba(24, 24, 24, .6);
  }

  .lioo-hero .lh-qwrap { transform: translateY(36px); }

  .lioo-hero .lh-qglass {
    display: block;
    position: absolute;
    z-index: 0;
    right: -32px;
    top: -32px;
    width: 86%;
    height: 78%;
    border-radius: 12px;
    background: linear-gradient(135deg,
      rgba(2, 216, 253, .20),
      rgba(255, 255, 255, .05) 42%,
      rgba(2, 216, 253, .04) 75%);
    border: 1px solid rgba(2, 216, 253, .32);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .22),
      0 10px 26px rgba(0, 0, 0, .16);
    -webkit-backdrop-filter: blur(7px);
            backdrop-filter: blur(7px);
    pointer-events: none;
  }

  .lioo-hero .lh-qcard {
    background: rgba(40, 40, 40, .78);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .09),
      0 32px 80px rgba(0, 0, 0, .5);
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .lioo-hero .lh-bg,
  .lioo-hero .lh-bp,
  .lioo-hero .lh-qcard { will-change: transform; }

  .lioo-hero .lh-qcard { transition: transform .35s var(--lh-ease), box-shadow .35s var(--lh-ease); }
  .lioo-hero .lh-qcard:hover { transform: translateY(-4px); }

  .lioo-hero .lh-dust {
    display: block;
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .lioo-hero .lh-dust i {
    position: absolute;
    bottom: -12px;
    border-radius: 50%;
    background: rgba(2, 216, 253, .28);
    animation: lh-dust linear infinite;
  }
  @keyframes lh-dust {
    from { transform: translateY(0); opacity: 0; }
    8%   { opacity: 1; }
    85%  { opacity: .6; }
    to   { transform: translateY(-92vh); opacity: 0; }
  }

  .lioo-hero .lh-cue {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: absolute;
    z-index: 2;
    left: 50%;
    bottom: 66px;
    transform: translateX(-50%);
    pointer-events: none;
  }
  .lioo-hero .lh-cue-line {
    position: relative;
    width: 2px;
    height: 34px;
    background: rgba(255, 255, 255, .14);
    border-radius: 2px;
    overflow: hidden;
  }
  .lioo-hero .lh-cue-line i {
    position: absolute;
    left: 0;
    top: -8px;
    width: 100%;
    height: 8px;
    background: var(--lh-cyan);
    border-radius: 2px;
    animation: lh-cue 1.8s var(--lh-ease) infinite;
  }
  @keyframes lh-cue {
    0%        { transform: translateY(0); }
    70%, 100% { transform: translateY(42px); }
  }
  .lioo-hero .lh-cue-lbl {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--lh-tx-55);
  }
}

/* portability armor: neutralize ancestor ::before bleed on badges */
.lioo-hero .lh-badges .lh-badge::before{content:none}