:root{
  --bg-dark:#0b1220;
  --bg-dark-2:#111827;
  --bg-soft:#f8fafc;
  --bg-white:#ffffff;

  --text:#0f172a;
  --muted:#64748b;
  --line:rgba(15,23,42,.10);
  --line-soft:rgba(15,23,42,.06);

  --blue:#1d4ed8;
  --blue-2:#2563eb;
  --blue-3:#60a5fa;
  --sky:#0ea5e9;
  --red:#ef4444;
  --orange:#f97316;
  --orange-dark:#ea6c0a;

  --shadow:0 12px 30px rgba(2,6,23,.10);
  --shadow-soft:0 8px 24px rgba(2,6,23,.07);
  --shadow-strong:0 18px 40px rgba(2,6,23,.18);
  --radius:20px;

  --container:1180px;
}

*{box-sizing:border-box}

html{min-height:100%}
body{min-height:100vh}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg-soft);
  line-height:1.55;
  padding-top:0; /* set by JS in index.php */
}

a{color:inherit}
img{max-width:100%;display:block}

.container{
  width:min(var(--container), calc(100% - 48px));
  margin:0 auto;
}

/* =========================================================
   HEADER / NAV — PREMIUM FIXED HEADER
   ========================================================= */
.site-header,
.dark-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background:
    radial-gradient(900px 180px at 30% -20%, rgba(37,99,235,.35), transparent 55%),
    radial-gradient(900px 180px at 70% -20%, rgba(239,68,68,.18), transparent 55%),
    linear-gradient(180deg, rgba(11,18,32,.92), rgba(11,18,32,.88));
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:
    background .25s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    backdrop-filter .25s ease,
    transform .25s ease;
}

.site-header.is-scrolled,
.dark-header.is-scrolled{
  background:
    radial-gradient(900px 180px at 30% -20%, rgba(37,99,235,.24), transparent 55%),
    radial-gradient(900px 180px at 70% -20%, rgba(239,68,68,.12), transparent 55%),
    linear-gradient(180deg, rgba(11,18,32,.98), rgba(11,18,32,.95));
  box-shadow:0 14px 34px rgba(2,6,23,.25);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
}

.navbar,
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 0;
  transition:padding .22s ease;
}

.site-header.is-compact .navbar,
.site-header.is-compact .header-inner,
.dark-header.is-compact .navbar,
.dark-header.is-compact .header-inner{
  padding:9px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
  min-width:0;
}

.brand img{
  height:34px;
  width:auto;
  transition:height .22s ease;
}

.site-header.is-compact .brand img,
.dark-header.is-compact .brand img{
  height:30px;
}

.brand .brand-sub{
  font-size:11px;
  opacity:.85;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:-2px;
}

.nav{
  display:flex;
  align-items:center;
  gap:14px;
}

.nav a{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-weight:700;
  font-size:14px;
  padding:8px 10px;
  border-radius:12px;
  transition:background-color .18s ease, color .18s ease, transform .18s ease;
}

.nav a:hover{
  background:rgba(255,255,255,.06);
}

.nav .has-dropdown{position:relative}

.dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  padding:10px;
  border-radius:14px;
  background:rgba(15,23,42,.98);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(2,6,23,.40);
  display:none;
}

.has-dropdown:hover .dropdown{display:block}

.dropdown a{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  font-weight:600;
}

.dropdown a:hover{
  background:rgba(255,255,255,.06);
}

.nav-actions,
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.pill,
.header-phone{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  letter-spacing:.02em;
  background:rgba(255,255,255,.04);
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.pill:hover,
.header-phone:hover{
  background:rgba(255,255,255,.08);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 18px;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:850;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .2s ease, filter .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.btn-primary{
  color:#fff;
  background:linear-gradient(135deg, var(--blue), var(--sky));
  box-shadow:0 12px 30px rgba(37,99,235,.25);
}

.btn-primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}

.btn-ghost{
  color:var(--text);
  background:#fff;
  border-color:var(--line);
}

.btn-ghost:hover{
  background:#f1f5f9;
}

.nav-toggle{display:none}

.mobile-toggle{
  display:none;
  color:#fff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  padding:10px 12px;
  cursor:pointer;
}

.mobile-toggle:hover{
  background:rgba(255,255,255,.10);
}

.mobile-nav{
  display:none;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(11,18,32,.98);
}

.mobile-nav .container{
  padding:14px 0 18px;
}

.mobile-nav a{
  display:block;
  color:rgba(255,255,255,.92);
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
}

.mobile-nav a:hover{
  background:rgba(255,255,255,.06);
}

.mobile-group-title{
  margin:14px 0 6px;
  color:rgba(255,255,255,.70);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width:860px){
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .mobile-toggle{display:inline-flex}
}

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative;
  color:#fff;
  padding:92px 0 64px;
}

.hero-full{
  background-size:cover;
  background-position:center;
}

.hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(2,6,23,.88) 0%,
      rgba(2,6,23,.72) 50%,
      rgba(2,6,23,.28) 100%);
}

.hero-content{
  position:relative;
  width:min(var(--container), calc(100% - 48px));
  margin:0 auto;
  padding-top:10px;
}

.hero h1{
  margin:0 0 14px;
  font-size:clamp(36px, 5vw, 62px);
  line-height:1.02;
  letter-spacing:-.03em;
  font-weight:900;
  text-shadow:0 18px 50px rgba(0,0,0,.35);
}

.hero p{
  margin:0 0 20px;
  max-width:64ch;
  color:rgba(255,255,255,.92);
  font-size:17px;
}

.hero-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Hero trust bar */
.hero-trust{
  display:flex;
  align-items:center;
  gap:20px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.10);
  flex-wrap:wrap;
}
.hero-trust-item{
  color:rgba(255,255,255,.55);
  font-size:13px;
  display:flex;
  align-items:center;
  gap:7px;
}
.hero-trust-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#22c55e;
  flex-shrink:0;
}

/* Hero kicker badge */
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(249,115,22,.18);
  border:1px solid rgba(249,115,22,.35);
  color:#fb923c;
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
  margin-bottom:18px;
}
.hero-kicker-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
  flex-shrink:0;
}

/* Orange primary button */
.btn-orange{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:999px;
  border:1px solid transparent;
  text-decoration:none;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  color:#fff;
  background:var(--orange);
  box-shadow:0 12px 28px rgba(249,115,22,.30);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-orange:hover{
  transform:translateY(-1px);
  filter:brightness(1.06);
  box-shadow:0 16px 34px rgba(249,115,22,.38);
}

/* Outline button for dark backgrounds */
.btn-outline-white{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 24px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.25);
  text-decoration:none;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  color:#fff;
  background:transparent;
  transition:background .2s ease, border-color .2s ease;
}
.btn-outline-white:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.40);
}

/* =========================================================
   HOOK BAND
   ========================================================= */
.hook-band{
  background:var(--orange);
  padding:16px 0;
}
.hook-band-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.hook-band-text{
  color:#fff;
  font-size:15px;
  font-weight:700;
}
.hook-band-text span{
  opacity:.82;
  font-weight:400;
}
.hook-band-pill{
  display:inline-flex;
  align-items:center;
  padding:9px 20px;
  border-radius:999px;
  border:1.5px solid rgba(255,255,255,.35);
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:14px;
  background:rgba(255,255,255,.14);
  white-space:nowrap;
  transition:background .18s ease;
}
.hook-band-pill:hover{
  background:rgba(255,255,255,.22);
}

/* =========================================================
   STEP CARDS — dark themed
   ========================================================= */
.step-card{
  background:var(--bg-dark) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:0 10px 30px rgba(2,6,23,.28) !important;
  padding:0 !important;
}
.step-card-body{
  padding:14px 16px 18px;
}
.step-num-badge{
  width:26px;
  height:26px;
  border-radius:7px;
  background:var(--orange);
  color:#fff;
  font-size:12px;
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
}
.step-title{
  font-weight:900 !important;
  margin:0 0 4px !important;
  font-size:15px !important;
  color:#fff !important;
}
.step-text{
  margin:0 !important;
  color:rgba(255,255,255,.42) !important;
  font-size:12px !important;
  line-height:1.55 !important;
}
.step-svg-anim{
  width:100%;
  height:150px;
  display:block;
  overflow:hidden;
}

/* =========================================================
   WHAT WE MOVE — dark section override
   ========================================================= */
.what-we-move{
  background:var(--bg-dark) !important;
}
.what-we-move .section-kicker{
  background:rgba(249,115,22,.15);
  border-color:rgba(249,115,22,.30);
  color:#fb923c;
}
.what-we-move h2{
  color:#fff !important;
}
.what-we-move .lead{
  color:rgba(255,255,255,.55) !important;
}
.what-we-move .move-item{
  border:1px solid rgba(255,255,255,.07);
  background:rgba(255,255,255,.03);
}
.what-we-move .move-item h3{
  color:rgba(255,255,255,.75) !important;
  font-size:13px !important;
}
.what-we-move .move-item:hover{
  background:rgba(255,255,255,.06);
}
.what-we-move .move-item:hover h3{
  color:#fff !important;
}

/* =========================================================
   SVG STEP ANIMATION KEYFRAMES
   ========================================================= */
@keyframes svgWheelSpin{
  to{ transform:rotate(360deg); }
}
@keyframes svgTruckBob{
  0%,100%{ transform:translateX(0) translateY(0); }
  50%{ transform:translateX(0) translateY(-1.5px); }
}
@keyframes svgTreeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-350px); }
}
@keyframes svgRoadScroll{
  to{ transform:translateX(130px); }
}
@keyframes svgForkLift{
  0%,100%{ transform:translateY(2px); }
  50%{ transform:translateY(-12px); }
}
@keyframes svgPalletRise{
  0%,100%{ transform:translate(0,2px); }
  50%{ transform:translate(0,-12px); }
}
@keyframes svgTruckPulse{
  0%,100%{ transform:translateX(0); }
  50%{ transform:translateX(-1px); }
}
@keyframes svgForkIn{
  0%,100%{ transform:translateX(-30px); }
  50%{ transform:translateX(0); }
}
@keyframes svgForkArmPl{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
@keyframes svgTargetGlow{
  0%,100%{ opacity:.25; }
  50%{ opacity:.85; }
}
@keyframes svgCheckPop{
  0%,35%{ transform:scale(0);opacity:0; }
  55%{ transform:scale(1.12);opacity:1; }
  70%,100%{ transform:scale(1);opacity:1; }
}
@keyframes svgDocSlide{
  0%{ transform:translateY(10px);opacity:0; }
  25%,100%{ transform:translateY(0);opacity:1; }
}
@keyframes svgSignalPulse{
  0%,100%{ opacity:.3; }
  50%{ opacity:1; }
}
@keyframes svgEmailPop{
  0%,55%{ transform:translateY(12px) scale(.92);opacity:0; }
  75%,100%{ transform:translateY(0) scale(1);opacity:1; }
}
@keyframes svgPhonePulse{
  0%,100%{ opacity:.7; }
  50%{ opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  .step-svg-anim *{ animation:none !important; }
}

/* =========================================================
   GLOBAL SECTIONS
   ========================================================= */
.section{
  padding:78px 0;
  position:relative;
}

.section-soft{
  background:linear-gradient(180deg, #eef5ff 0%, #f8fbff 100%);
  border-top:1px solid rgba(37,99,235,.08);
  border-bottom:1px solid rgba(37,99,235,.08);
}

.section-dark{
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(37,99,235,.24), transparent 55%),
    radial-gradient(900px 260px at 80% 0%, rgba(239,68,68,.12), transparent 55%),
    linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 100%);
  color:#fff;
}

.section h2,
.service-band h2,
.section-soft h2,
.section-dark h2,
.cta-band h2{
  margin:0 0 14px;
  font-size:clamp(26px, 2.6vw, 34px);
  line-height:1.15;
  letter-spacing:-0.01em;
  font-weight:800;
  color:var(--blue);
}

.section-dark h2{
  color:var(--blue-3);
  font-size:clamp(24px, 2.4vw, 32px);
}

.section h3{
  margin:0 0 10px;
  font-size:23px;
  line-height:1.15;
  font-weight:850;
  color:#0f172a;
}

.section p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
}

.section strong{
  color:#0f172a;
}

.section-dark p,
.section-dark .lead,
.section-dark .stat-label{
  color:rgba(255,255,255,.84);
}

.lead{
  max-width:78ch;
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.grid-4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}

.split{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  align-items:start;
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  box-shadow:var(--shadow);
}

.card p:last-child{
  margin-bottom:0;
}

@media (max-width:980px){
  .grid-3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}

@media (max-width:900px){
  .grid-4{grid-template-columns:1fr 1fr}
}

@media (max-width:600px){
  .grid-4{grid-template-columns:1fr}
}

/* =========================================================
   SUBTLE SECTION DIVIDERS
   ========================================================= */
.section::before,
.section-soft::before,
.section-dark::before,
.steps::before,
.cta-band::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(92%, 1100px);
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(37,99,235,.10) 20%,
    rgba(37,99,235,.18) 50%,
    rgba(37,99,235,.10) 80%,
    transparent 100%
  );
}

.section-dark::before{
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(96,165,250,.10) 20%,
    rgba(96,165,250,.22) 50%,
    rgba(96,165,250,.10) 80%,
    transparent 100%
  );
}

/* =========================================================
   STEPS / ANIMATION TOP BLOCK
   ========================================================= */
.steps{
  padding:46px 0 34px;
  background:linear-gradient(180deg, rgba(15,23,42,.03), rgba(15,23,42,0));
  position:relative;
}

.steps h2{
  margin:0 0 8px;
  font-size:clamp(32px, 4vw, 50px);
  line-height:1.04;
  letter-spacing:-.03em;
  font-weight:900;
  color:var(--blue);
}

.steps > .container > p{
  margin:0 0 20px;
  color:var(--muted);
  max-width:80ch;
  font-size:16px;
}

.steps-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}

.step-card{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  padding:14px 14px 16px;
  box-shadow:var(--shadow);
  overflow:hidden;
}

.step-title{
  font-weight:900;
  margin:12px 0 6px;
  font-size:18px;
  color:var(--blue);
}

.step-text{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

.anim{
  width:100%;
  height:150px;
  border-radius:16px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(219,234,254,.65), rgba(255,255,255,.88));
  border:1px solid rgba(15,23,42,.10);
}

.step-card .a{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease;
}

.step-card.is-inview .a{
  opacity:1;
  transform:translateY(0);
}

@media (max-width:980px){
  .steps-grid{grid-template-columns:repeat(2, 1fr)}
}

@media (max-width:560px){
  .steps-grid{grid-template-columns:1fr}
}

/* =========================================================
   PICKUP ANIMATION
   ========================================================= */
.pickup-card .anim{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  height:150px;
}

.pickup-scene{
  position:absolute;
  inset:0;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(180deg, #dff2ff 0%, #f8fafc 58%, #e5e7eb 100%);
  border:1px solid rgba(15,23,42,.10);
}

.pickup-scene::before{
  content:"";
  position:absolute;
  inset:-40px -80px auto -80px;
  height:140px;
  background:
    radial-gradient(260px 140px at 18% 50%, rgba(239,68,68,.12), transparent 60%),
    radial-gradient(320px 160px at 76% 35%, rgba(37,99,235,.14), transparent 62%);
  filter:blur(2px);
  opacity:.95;
}

.pickup-trees{
  position:absolute;
  left:-200%;
  right:-200%;
  top:0;
  height:110px;
  pointer-events:none;
  z-index:2;
  animation:pickupTreeLayer 18s linear infinite;
  will-change:transform;
}

.pickup-trees .tree{
  position:absolute;
  left:calc(var(--x) * 1%);
  bottom:10px;
  width:80px;
  height:110px;
  transform:translateX(-50%);
}

.pickup-trees .tree::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:10px;
  height:64px;
  transform:translateX(-50%);
  background:linear-gradient(180deg, #6b4a2f, #3b2414);
  border-radius:8px;
  box-shadow:0 3px 8px rgba(2,6,23,.16);
}

.pickup-trees .tree::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:42px;
  width:76px;
  height:52px;
  transform:translateX(-50%);
  background:
    radial-gradient(40px 24px at 32% 58%, #166534 60%, transparent 61%),
    radial-gradient(46px 28px at 66% 52%, #14532d 60%, transparent 61%),
    radial-gradient(32px 20px at 46% 34%, #15803d 60%, transparent 61%);
}

@keyframes pickupTreeLayer{
  from { transform:translateX(0); }
  to   { transform:translateX(-1200px); }
}

.pickup-road{
  z-index:1;
  position:absolute;
  left:-160%;
  right:-160%;
  bottom:0;
  height:62px;
  background:linear-gradient(180deg, #9ca3af 0%, #6b7280 100%);
  opacity:.98;
  animation:pickupRoadLeft 4.2s linear infinite !important;
}

.pickup-road::after{
  content:"";
  position:absolute;
  left:-160%;
  right:-160%;
  top:26px;
  height:6px;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 90px,
      rgba(255,255,255,.55) 90px 125px,
      transparent 125px 210px
    );
  opacity:.75;
  filter:blur(.2px);
  animation:pickupRoadLeft 4.2s linear infinite !important;
}

.pickup-truck{
  position:absolute;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  width:min(460px, 88%);
  height:auto;
  z-index:5;
  filter:drop-shadow(0 12px 18px rgba(2,6,23,.16));
  animation:truckBob 1.8s ease-in-out infinite;
}

@keyframes truckBob{
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%{ transform:translateX(-50%) translateY(1px); }
}

.wheel{
  --size:18px;
  --dx:0px;
  --dy:0px;
  position:absolute;
  width:calc(var(--size) * var(--s, 1));
  height:calc(var(--size) * var(--s, 1));
  border-radius:50%;
  z-index:6;
  left:calc(var(--x) * 1% + var(--dx));
  top:calc(var(--y) * 1% + var(--dy));
  transform:translate(-50%, -50%);
  transform-origin:50% 50%;
  background:
    radial-gradient(circle at 50% 50%,
      #e5e7eb 0 16%,
      #9ca3af 17% 30%,
      #111827 31% 72%,
      #0b1220 73% 100%
    );
  box-shadow:0 2px 5px rgba(2,6,23,.25);
  animation:wheelSpin .55s linear infinite;
  opacity:.98;
}

.wheel::after{
  content:"";
  position:absolute;
  inset:22%;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      rgba(255,255,255,.7) 0deg 6deg,
      transparent 6deg 18deg
    );
  opacity:.25;
}

@keyframes wheelSpin{
  0%{ transform:translate(-50%, -50%) rotate(0deg); }
  100%{ transform:translate(-50%, -50%) rotate(360deg); }
}

@keyframes pickupRoadLeft{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-18%); }
}

@media (prefers-reduced-motion:reduce){
  .pickup-trees,
  .pickup-road,
  .pickup-road::after,
  .wheel,
  .pickup-truck{
    animation:none !important;
  }
}

/* =========================================================
   SERVICE BAND
   ========================================================= */
.service-band{
  background:linear-gradient(180deg, #f3f8ff 0%, #ffffff 100%);
}

.service-band .container{
  position:relative;
}

.service-band-card{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:24px;
  align-items:stretch;
  background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(14,165,233,.06));
  border:1px solid rgba(37,99,235,.10);
  border-radius:26px;
  padding:32px;
  box-shadow:0 14px 34px rgba(2,6,23,.08);
  color:var(--text);
}

.service-band-copy h2{
  color:var(--blue);
}

.service-band-copy p{
  color:#334155;
  font-size:17px;
  max-width:78ch;
}

.service-band-copy strong{
  color:#0f172a;
}

.service-band-side{
  display:grid;
  gap:14px;
}

.mini-stat{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(37,99,235,.12);
  border-radius:18px;
  padding:16px;
  backdrop-filter:blur(6px);
  box-shadow:0 8px 20px rgba(2,6,23,.05);
}

.mini-stat strong{
  display:block;
  color:var(--blue);
  margin-bottom:4px;
}

.mini-stat span{
  color:#475569;
  font-size:14px;
}

@media (max-width:900px){
  .service-band-card{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   WHAT WE MOVE
   ========================================================= */
.what-we-move{
  background:linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.move-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:22px 18px;
  margin-top:28px;
}

.move-item{
  text-align:center;
  padding:10px 8px;
  border-radius:18px;
  transition:transform .22s ease, background-color .22s ease, box-shadow .22s ease;
}

.move-item:hover{
  transform:translateY(-6px);
  background:rgba(37,99,235,.04);
  box-shadow:0 14px 30px rgba(2,6,23,.06);
}

.move-icon{
  position:relative;
  width:92px;
  height:92px;
  margin:0 auto 12px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 24px rgba(37,99,235,.18);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
  overflow:visible;
}

.move-icon::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  z-index:-1;
  opacity:.85;
  transform:scale(.96);
  transition:transform .22s ease, opacity .22s ease, filter .22s ease;
  filter:blur(2px);
}

.move-item:hover .move-icon{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 18px 34px rgba(37,99,235,.24);
  filter:saturate(1.05);
}

.move-item:hover .move-icon::before{
  transform:scale(1.08);
  opacity:1;
  filter:blur(4px);
}

.move-icon svg{
  width:42px;
  height:42px;
  stroke:#fff;
  fill:none;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .22s ease;
}

.move-item:hover .move-icon svg{
  transform:scale(1.04);
}

.move-item h3{
  margin:0;
  font-size:16px;
  font-weight:800;
  color:#0f172a;
  transition:color .22s ease;
}

.move-item:hover h3{
  color:#1d4ed8;
}

/* subtle blue tone variation across icons */
.move-grid .move-item:nth-child(6n+1) .move-icon{
  background:linear-gradient(135deg, #1d4ed8, #2563eb);
}
.move-grid .move-item:nth-child(6n+1) .move-icon::before{
  background:radial-gradient(circle, rgba(29,78,216,.24) 0%, rgba(29,78,216,.10) 45%, rgba(29,78,216,0) 72%);
}

.move-grid .move-item:nth-child(6n+2) .move-icon{
  background:linear-gradient(135deg, #2563eb, #0ea5e9);
}
.move-grid .move-item:nth-child(6n+2) .move-icon::before{
  background:radial-gradient(circle, rgba(37,99,235,.22) 0%, rgba(37,99,235,.10) 45%, rgba(37,99,235,0) 72%);
}

.move-grid .move-item:nth-child(6n+3) .move-icon{
  background:linear-gradient(135deg, #0f5fe0, #38bdf8);
}
.move-grid .move-item:nth-child(6n+3) .move-icon::before{
  background:radial-gradient(circle, rgba(14,165,233,.22) 0%, rgba(14,165,233,.10) 45%, rgba(14,165,233,0) 72%);
}

.move-grid .move-item:nth-child(6n+4) .move-icon{
  background:linear-gradient(135deg, #1e40af, #2563eb);
}
.move-grid .move-item:nth-child(6n+4) .move-icon::before{
  background:radial-gradient(circle, rgba(30,64,175,.22) 0%, rgba(30,64,175,.10) 45%, rgba(30,64,175,0) 72%);
}

.move-grid .move-item:nth-child(6n+5) .move-icon{
  background:linear-gradient(135deg, #2563eb, #60a5fa);
}
.move-grid .move-item:nth-child(6n+5) .move-icon::before{
  background:radial-gradient(circle, rgba(96,165,250,.24) 0%, rgba(96,165,250,.10) 45%, rgba(96,165,250,0) 72%);
}

.move-grid .move-item:nth-child(6n+6) .move-icon{
  background:linear-gradient(135deg, #1d4ed8, #38bdf8);
}
.move-grid .move-item:nth-child(6n+6) .move-icon::before{
  background:radial-gradient(circle, rgba(56,189,248,.22) 0%, rgba(56,189,248,.10) 45%, rgba(56,189,248,0) 72%);
}

@media (max-width:1100px){
  .move-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

@media (max-width:760px){
  .move-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

@media (max-width:520px){
  .move-grid{
    grid-template-columns:repeat(2, 1fr);
  }

  .move-icon{
    width:82px;
    height:82px;
  }

  .move-icon svg{
    width:38px;
    height:38px;
  }
}

@media (prefers-reduced-motion: reduce){
  .move-item,
  .move-icon,
  .move-icon::before,
  .move-icon svg,
  .move-item h3{
    transition:none !important;
  }

  .move-item:hover,
  .move-item:hover .move-icon,
  .move-item:hover .move-icon::before,
  .move-item:hover .move-icon svg{
    transform:none !important;
  }
}

/* =========================================================
   WHO WE ARE / WHY US / WHAT WE DO
   ========================================================= */
.feature-split{
  align-items:center;
}

.section-soft p{
  max-width:80ch;
}

.side-highlight{
  background:#fff;
}

.why-grid .card{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-top:5px solid var(--blue-2);
}

.why-grid .card:nth-child(2){
  border-top-color:var(--sky);
}

.why-grid .card:nth-child(3){
  border-top-color:var(--red);
}

.what-we-do-box{
  margin-top:28px;
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:24px;
  padding:26px;
  box-shadow:var(--shadow-soft);
}

.section .lead{
  font-size:17px;
}

.badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}

.pill-lite{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.12);
  color:#1e3a8a;
  font-weight:700;
  font-size:13px;
}

.ticks{
  margin:0;
  padding-left:18px;
}

.ticks li{
  margin:10px 0;
  color:#334155;
}

/* =========================================================
   STATS
   ========================================================= */
.stats-grid{
  text-align:center;
  margin-top:22px;
}

.stat{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  padding:26px 16px;
}

.stat-number{
  font-size:58px;
  line-height:1;
  font-weight:900;
  color:#fff;
}

.stat-label{
  margin-top:10px;
  font-size:15px;
  letter-spacing:.02em;
}

/* =========================================================
   TESTIMONIAL
   ========================================================= */
.testimonial{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  padding:28px;
  border-radius:22px;
  box-shadow:var(--shadow);
  max-width:920px;
  border-left:6px solid var(--blue-2);
}

.testimonial p{
  font-size:17px;
  line-height:1.8;
}

/* =========================================================
   CTA BAND
   ========================================================= */
.cta-band{
  background:
    linear-gradient(135deg, rgba(37,99,235,.10), rgba(239,68,68,.07));
  border-top:1px solid rgba(15,23,42,.06);
  position:relative;
}

.cta-band h2{
  margin:0 0 8px;
  color:var(--blue);
  font-size:clamp(30px, 4vw, 46px);
}

.cta-band p{
  margin:0;
  color:#334155;
  font-size:16px;
}

.cta-band-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}

.cta-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* =========================================================
   SMALL LABEL / KICKER
   ========================================================= */
.section-kicker{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(37,99,235,.10);
  border:1.5px solid rgba(37,99,235,.18);
  color:var(--blue);
  font-size:13px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.section-kicker-light{
  background:rgba(255,255,255,.10);
  border:2px solid rgba(255,255,255,.16);
  color:#93c5fd;
}

/* =========================================================
   SUBTLE FORKLIFT BACKGROUND TEXTURE
   ========================================================= */
.texture-bg{
  position:relative;
  overflow:hidden;
}

.texture-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('/assets/img/bg/forklift-pattern.png');
  background-repeat:repeat;
  background-size:260px;
  background-position:center;
  opacity:.05;
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:0;
}

.texture-bg > *{
  position:relative;
  z-index:1;
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  margin-top:0;
  background:
    radial-gradient(900px 180px at 30% -20%, rgba(37,99,235,.30), transparent 55%),
    radial-gradient(900px 180px at 70% -20%, rgba(239,68,68,.16), transparent 55%),
    linear-gradient(180deg, rgba(11,18,32,.98), rgba(11,18,32,.94));
  border-top:3px solid var(--orange);
  color:#fff;
}

.footer-inner{
  padding:46px 0 26px;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:18px;
}

.footer-bottom{
  padding:16px 0;
  border-top:1px solid rgba(255,255,255,.10);
  color:rgba(255,255,255,.75);
  font-size:13px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

@media (max-width:900px){
  .footer-inner{grid-template-columns:1fr; gap:22px}
}

/* =========================================================
   PLACEHOLDER / OTHER PAGES
   ========================================================= */
.page-placeholder{
  background:#f4f6f8;
  padding:60px 0;
}

.placeholder-card{
  background:#fff;
  border-radius:20px;
  padding:40px;
  box-shadow:0 14px 34px rgba(0,0,0,0.08);
  border:1px solid #e6edf3;
}

.placeholder-card h1{
  margin:0 0 14px;
  font-size:40px;
  color:#1c3e63;
}

.placeholder-card p{
  margin:0 0 10px;
  color:#4c5b68;
  line-height:1.7;
  font-size:16px;
}
/* =========================================================
   BACK TO TOP
   ========================================================= */
.back-to-top{
  position:fixed;
  right:22px;
  bottom:22px;
  width:52px;
  height:52px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  background:linear-gradient(135deg, #1d4ed8, #0ea5e9);
  box-shadow:0 14px 30px rgba(37,99,235,.28);
  z-index:999;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease, box-shadow .22s ease;
  font-size:24px;
  font-weight:900;
}

.back-to-top:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 34px rgba(37,99,235,.34);
}

.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

html{
  scroll-behavior:smooth;
}
/* =========================================================
   CONTACT MAPS SECTION
   ========================================================= */
.contact-maps{
  background:linear-gradient(180deg, #0b1220 0%, #111827 100%);
  color:#fff;
  text-align:center;
}

.contact-details{
  margin:20px 0 30px;
  font-size:14px;
  line-height:1.7;
  color:rgba(255,255,255,.85);
}

.contact-details a{
  color:#93c5fd;
  text-decoration:none;
}

.contact-details a:hover{
  text-decoration:underline;
}

.maps-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:20px;
}

.map-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:16px;
  backdrop-filter:blur(6px);
}

.map-card h3{
  margin:0 0 12px;
  color:#93c5fd;
  font-size:20px;
}

.leaflet-map{
  height:240px;
  width:100%;
  border-radius:14px;
  overflow:hidden;
}

.leaflet-container{
  border-radius:14px;
  font-family:inherit;
}

@media (max-width:900px){
  .maps-grid{
    grid-template-columns:1fr;
  }
}
.map-frame{
    height:500px;
    width:100%;
    border:1px solid #ddd;
    border-radius:14px;
    position:relative;
    overflow:hidden;
    background:#e9eef3;
}

.map-frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
}

.map-frame::before{
    display:none;
}
/* =========================================================
   SIMPLE PROCESS (SERVICE PAGE)
   ========================================================= */
.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:20px;
}

.process-item{
  text-align:center;
  padding:20px;
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(2,6,23,.06);
  box-shadow:0 10px 24px rgba(2,6,23,.05);
}

.process-number{
  width:42px;
  height:42px;
  margin:0 auto 10px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  color:#fff;
  font-weight:800;
}

.process-item h3{
  margin:6px 0;
  font-size:18px;
  color:#0f172a;
}

.process-item p{
  font-size:14px;
  color:#475569;
}

@media (max-width:900px){
  .process-grid{
    grid-template-columns:1fr;
  }
}
/* =========================================================
   ENQUIRY FORM
   ========================================================= */
.enquiry-form{
  margin-top:22px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.form-field{
  display:flex;
  flex-direction:column;
}

.form-field-full{
  grid-column:1 / -1;
}

.form-field label{
  font-weight:700;
  color:#0f172a;
  margin-bottom:8px;
}

.form-field label span{
  color:#dc2626;
}

.form-field label small{
  font-weight:600;
  color:#64748b;
}

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;
  padding:14px 14px;
  font:inherit;
  color:#0f172a;
  background:#fff;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

.form-field textarea{
  resize:vertical;
  min-height:150px;
}

.enquiry-submit{
  margin-top:20px;
  min-width:180px;
}

.form-alert{
  border-radius:16px;
  padding:16px 18px;
  margin:0 0 20px;
  font-size:15px;
  line-height:1.6;
}

.form-alert ul{
  margin:10px 0 0 18px;
  padding:0;
}

.form-alert-success{
  background:rgba(34,197,94,.10);
  border:1px solid rgba(34,197,94,.22);
  color:#166534;
}

.form-alert-error{
  background:rgba(239,68,68,.08);
  border:1px solid rgba(239,68,68,.20);
  color:#991b1b;
}

@media (max-width:760px){
  .form-grid{
    grid-template-columns:1fr;
  }
}
.input-with-icon {
    position: relative;
}

.input-with-icon input {
    width: 100%;
    padding-right: 40px; /* space for icon */
}

.input-help {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    background: #2f7de1;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.85;
}

.input-help:hover {
    opacity: 1;
}
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

.form-group {
    flex: 1;
}

.form-group.full {
    flex: 100%;
}
.pickup-section {
    background: #eefaf0;
    padding: 20px;
    border-radius: 8px;
}

.delivery-section {
    background: #eef4ff;
    padding: 20px;
    border-radius: 8px;
}
/* =========================
   Unload animation - upgraded
   ========================= */

.unload-card .anim,
.unload-anim {
    position: relative;
    height: 148px;
    min-height: 148px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.10);
    background: linear-gradient(180deg, #dfe8f4 0%, #edf3f9 100%);
}

.unload-scene {
    position: relative;
    width: 100%;
    height: 148px;
}

.unload-sky {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #d4e1ef 0%, #eef3f9 80%);
}

.unload-yard {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    height: 42px;
    background: linear-gradient(180deg, #b7c3d3 0%, #9eacbf 100%);
}

.unload-ground-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    height: 6px;
    background: #7f8da3;
    opacity: 0.7;
}

.unload-truck {
    position: absolute;
    left: 14px;
    bottom: 28px;
    width: 126px;
    height: 58px;
}

.ut-cab {
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 28px;
    height: 24px;
    background: linear-gradient(180deg, #1f2a44 0%, #121a2b 100%);
    border-radius: 6px 6px 4px 4px;
}

.ut-window {
    position: absolute;
    left: 18px;
    bottom: 22px;
    width: 10px;
    height: 8px;
    background: rgba(255,255,255,0.55);
    border-radius: 2px;
}

.ut-tray {
    position: absolute;
    left: 26px;
    bottom: 14px;
    width: 92px;
    height: 20px;
    background: linear-gradient(180deg, #4670e4 0%, #2d58cf 100%);
    border-radius: 8px;
    box-shadow:
        inset 0 -2px 0 rgba(255,255,255,0.18),
        0 6px 12px rgba(45, 88, 207, 0.18);
}

.ut-shadow {
    position: absolute;
    left: 10px;
    bottom: 6px;
    width: 104px;
    height: 8px;
    background: rgba(55, 65, 81, 0.18);
    border-radius: 999px;
    filter: blur(2px);
}

.ut-wheel {
    position: absolute;
    bottom: 0;
    width: 18px;
    height: 18px;
    background: #161b22;
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px #4b5563;
}

.ut-wheel-1 { left: 10px; }
.ut-wheel-2 { left: 68px; }

.unload-forklift {
    position: absolute;
    right: 34px;
    bottom: 20px;
    width: 50px;
    height: 72px;
}

.uf-body {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 38px;
    height: 24px;
    background: linear-gradient(180deg, #f4a51c 0%, #de8500 100%);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(217, 132, 0, 0.18);
}

.uf-mast {
    position: absolute;
    right: 6px;
    bottom: 12px;
    width: 7px;
    height: 58px;
    background: #4a5568;
    border-radius: 4px;
}

.uf-arm {
    position: absolute;
    right: -8px;
    bottom: 28px;
    width: 22px;
    height: 4px;
    background: #667085;
    border-radius: 999px;
    animation: unloadForkMotion 3.6s ease-in-out infinite;
}

.unload-pallet {
    position: absolute;
    right: 56px;
    bottom: 34px;
    width: 40px;
    height: 38px;
    animation: unloadPalletMotion 3.6s ease-in-out infinite;
}

.up-load {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 24px;
    background: linear-gradient(180deg, #bf8550 0%, #9a653d 100%);
    border-radius: 4px;
    box-shadow: inset 0 -2px 0 rgba(255,255,255,0.14);
}

.up-base {
    position: absolute;
    left: 4px;
    bottom: 0;
    width: 32px;
    height: 8px;
    background: #7a5740;
    border-radius: 2px;
}

@keyframes unloadPalletMotion {
    0%   { transform: translateY(-4px); }
    50%  { transform: translateY(6px); }
    100% { transform: translateY(-4px); }
}

@keyframes unloadForkMotion {
    0%   { transform: translateY(-4px); }
    50%  { transform: translateY(6px); }
    100% { transform: translateY(-4px); }
}
/* =========================
   Placement animation
   ========================= */

.placement-card .anim,
.placement-anim {
    position: relative;
    height: 148px;
    min-height: 148px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #eef4fb 0%, #dfeaf8 100%);
    border: 1px solid rgba(37, 99, 235, 0.10);
}

.placement-scene {
    position: relative;
    width: 100%;
    height: 148px;
}

/* ground */
.placement-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    height: 8px;
    background: linear-gradient(90deg, #7b8798, #8f9bad);
    border-radius: 999px;
}

/* forklift */
.placement-forklift {
    position: absolute;
    left: 24px;
    bottom: 30px;
    width: 48px;
    height: 66px;
}

.pf-body {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 24px;
    background: linear-gradient(180deg, #f6a623, #da8400);
    border-radius: 6px;
}

.pf-mast {
    position: absolute;
    right: 6px;
    bottom: 12px;
    width: 7px;
    height: 58px;
    background: #485569;
    border-radius: 4px;
}

.pf-arm {
    position: absolute;
    right: -10px;
    bottom: 28px;
    width: 20px;
    height: 4px;
    background: #5f6b7d;
    border-radius: 999px;
}

/* pallet */
.placement-pallet {
    position: absolute;
    left: 78px;
    bottom: 42px;
    width: 38px;
    height: 36px;
    animation: placementSlide 3.4s cubic-bezier(.4,0,.2,1) infinite;
}

.pp-top {
    position: absolute;
    width: 38px;
    height: 22px;
    background: linear-gradient(180deg, #c58b57, #99643c);
    border-radius: 4px;
}

.pp-base {
    position: absolute;
    bottom: 0;
    left: 3px;
    width: 32px;
    height: 8px;
    background: #76553d;
    border-radius: 2px;
}

/* target zone (subtle) */
.placement-target {
    position: absolute;
    right: 26px;
    bottom: 26px;
    width: 44px;
    height: 6px;
    background: rgba(37, 99, 235, 0.25);
    border-radius: 999px;
}

/* animation = gentle side placement */
@keyframes placementSlide {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(12px);
    }
}
/* =========================
   Confirmation animation
   ========================= */

.confirmation-card .anim,
.confirmation-anim {
    position: relative;
    height: 148px;
    min-height: 148px;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #eef4fb 0%, #dfeaf8 100%);
    border: 1px solid rgba(37, 99, 235, 0.10);
}

.confirmation-scene {
    position: relative;
    width: 100%;
    height: 148px;
}

.confirm-paper {
    position: absolute;
    left: 50%;
    top: 54%;
    width: 66px;
    height: 82px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
    transform: translate(-50%, -50%);
}

.paper-top {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
    border-radius: 12px 12px 0 0;
}

.paper-line {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 4px;
    border-radius: 999px;
    background: rgba(100, 116, 139, 0.22);
}

.line-1 { top: 26px; }
.line-2 { top: 38px; }
.line-3 { top: 50px; width: 26px; right: auto; }

.confirm-check-wrap {
    position: absolute;
    right: 28px;
    bottom: 24px;
    width: 34px;
    height: 34px;
    animation: confirmPop 2.8s ease-in-out infinite;
}

.confirm-circle {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border-radius: 50%;
    box-shadow: 0 8px 18px rgba(34, 197, 94, 0.25);
}

.confirm-check {
    position: absolute;
    left: 10px;
    top: 9px;
    width: 12px;
    height: 7px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
}

.confirm-signal {
    position: absolute;
    left: 42px;
    top: 38px;
    opacity: 0.7;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 20px;
}

.confirm-signal span {
    display: block;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #60a5fa, #2563eb);
    animation: confirmBars 1.8s ease-in-out infinite;
}

.confirm-signal span:nth-child(1) {
    height: 8px;
    animation-delay: 0s;
}
.confirm-signal span:nth-child(2) {
    height: 13px;
    animation-delay: 0.15s;
}
.confirm-signal span:nth-child(3) {
    height: 18px;
    animation-delay: 0.3s;
}

@keyframes confirmPop {
    0%, 100% {
        transform: scale(0.94);
        opacity: 0.9;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes confirmBars {
    0%, 100% {
        transform: scaleY(0.8);
        opacity: 0.65;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}
.steps-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.steps-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}
.unload-depth {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0) 60%,
        rgba(0,0,0,0.08) 100%
    );
    pointer-events: none;
}
.unload-forklift,
.unload-pallet {
    transform-origin: bottom center;
}
.unload-contact-shadow {
    position: absolute;
    right: 40px;
    bottom: 20px;
    width: 70px;
    height: 10px;
    background: rgba(0,0,0,0.18);
    border-radius: 999px;
    filter: blur(3px);
}
/* =========================
   Scene 1 - Pickup illustrated
   ========================= */

.pickup-illustrated-card .anim,
.pickup-illustrated-anim {
    position: relative;
    height: 148px;
    min-height: 148px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.10);
    background: linear-gradient(180deg, #dfe8f4 0%, #edf3f9 100%);
}

.pickup-illustrated-scene {
    position: relative;
    width: 100%;
    height: 148px;
}

.pickup-illustrated-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pickup-illustrated-card .step-text {
    max-width: 26ch;
}

.pickup-illustrated-svg .pickup-wheel {
    transform-box: fill-box;
    transform-origin: center;
    animation: pickupWheelSpin 3.2s linear infinite;
}

.pickup-illustrated-svg .pickup-wheel-2 {
    animation-delay: -0.08s;
}

.pickup-illustrated-svg .pickup-wheel-3 {
    animation-delay: -0.14s;
}

.pickup-illustrated-svg .pickup-wheel-4 {
    animation-delay: -0.2s;
}

@keyframes pickupWheelSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* =========================
   Scene 2 - Goods ready
   ========================= */

.goods-ready-card .anim,
.goods-ready-anim {
    position: relative;
    height: 148px;
    min-height: 148px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(37, 99, 235, 0.10);
    background: linear-gradient(180deg, #dfe8f4 0%, #edf3f9 100%);
}

.goods-ready-scene {
    position: relative;
    width: 100%;
    height: 148px;
}

.goods-ready-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.goods-ready-card .step-text {
    max-width: 26ch;
}

.goods-ready-svg .ready-stack {
    transform-origin: center;
    animation: readyStackFloat 3.4s ease-in-out infinite;
}

.goods-ready-svg .ready-check {
    transform-origin: center;
    animation: readyCheckPulse 2.8s ease-in-out infinite;
}

@keyframes readyStackFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes readyCheckPulse {
    0%, 100% { transform: scale(0.96); opacity: 0.92; }
    50% { transform: scale(1); opacity: 1; }
}