/* Homepage-only 3D effects: tilt cards, CSS 3D truck, staircase steps */

/* ---------- 3D icons (visible on all devices) ---------- */
.tilt-3d .icon-circle {
  background: linear-gradient(145deg, #ffffff 0%, var(--color-navy-soft) 100%);
  box-shadow: 0 4px 0 #c9d3de, 0 10px 18px rgba(2, 28, 51, 0.14);
}
.tilt-3d .icon-circle--orange {
  background: linear-gradient(145deg, #ffffff 0%, var(--color-orange-soft) 100%);
  box-shadow: 0 4px 0 #f5c9a8, 0 10px 18px rgba(240, 98, 3, 0.16);
}

/* ---------- Tilt cards ---------- */
.tilt-3d {
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 400ms cubic-bezier(.2, .8, .2, 1), box-shadow var(--transition-base);
  will-change: transform;
}
.tilt-3d.is-tilting { transition: transform 80ms linear, box-shadow var(--transition-base); }
.tilt-3d:hover {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.tilt-3d > * { transform: translateZ(20px); }
.tilt-3d > .icon-circle { transform: translateZ(45px); }
.tilt-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.55), transparent 55%);
}
.tilt-3d:hover::after { opacity: 1; }

/* ---------- 3D truck section ---------- */
.truck3d-section .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: center;
}
.truck3d-list { display: flex; flex-direction: column; gap: 12px; margin: 20px 0 28px; }

.truck-stage {
  --s: 1;
  height: 380px;
  perspective: 1400px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.truck-stage::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(240, 98, 3, 0.12), transparent);
}
.truck3d-scene {
  position: relative;
  width: 420px;
  height: 200px;
  transform-style: preserve-3d;
  transform: scale(var(--s)) rotateX(-14deg) rotateY(var(--turn, -32deg));
  transition: transform 150ms linear;
}

/* Generic cuboid: set --w --h --d and position with left/top */
.cuboid {
  position: absolute;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
}
.cuboid > .f { position: absolute; backface-visibility: hidden; }
.cuboid > .f-front, .cuboid > .f-back { width: var(--w); height: var(--h); left: 0; top: 0; }
.cuboid > .f-left, .cuboid > .f-right { width: var(--d); height: var(--h); top: 0; left: calc((var(--w) - var(--d)) / 2); }
.cuboid > .f-top, .cuboid > .f-bottom { width: var(--w); height: var(--d); left: 0; top: calc((var(--h) - var(--d)) / 2); }
.cuboid > .f-front { transform: translateZ(calc(var(--d) / 2)); }
.cuboid > .f-back { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.cuboid > .f-right { transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.cuboid > .f-left { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.cuboid > .f-top { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.cuboid > .f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

/* Cargo box */
.t-cargo { --w: 280px; --h: 150px; --d: 120px; left: 0; top: 10px; }
.t-cargo > .f { background: #ffffff; border: 1px solid #dfe5ec; border-radius: 4px; }
.t-cargo > .f-top { background: #eef1f4; }
.t-cargo > .f-left, .t-cargo > .f-right { background: linear-gradient(180deg, #e6ebf0, #d6dde5); }
.t-cargo > .f-left::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid #c3ccd6;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent calc(50% - 1px), #c3ccd6 calc(50% - 1px), #c3ccd6 calc(50% + 1px), transparent calc(50% + 1px));
}
.t-cargo > .f-bottom { background: #9aa6b2; }
.t-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 0 14px;
  font-family: var(--font-heading);
  color: var(--color-navy);
}
.t-brand strong { font-size: 27px; line-height: 1.1; letter-spacing: -0.5px; }
.t-brand span { font-size: 14px; font-weight: 600; margin-top: 4px; }
.t-brand i {
  display: block;
  width: 70%;
  height: 6px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--color-orange);
  transform: rotate(-3deg);
}

/* Cab */
.t-cab { --w: 96px; --h: 104px; --d: 112px; left: 284px; top: 56px; }
.t-cab > .f { background: var(--color-navy-mid); border-radius: 4px; }
.t-cab > .f-top { background: #1d4a72; }
.t-cab > .f-front::before, .t-cab > .f-back::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 30px;
  right: 10px;
  height: 38px;
  border-radius: 4px 10px 4px 4px;
  background: linear-gradient(135deg, #bfe0ff, #5e8db8);
}
.t-cab > .f-right::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  height: 42px;
  border-radius: 4px;
  background: linear-gradient(160deg, #d6ecff, #5e8db8);
}
.t-cab > .f-right::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 14px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffd27a 0 18%, transparent 18% 82%, #ffd27a 82%);
}
.t-cab > .f-left { background: var(--color-navy); }

/* Chassis */
.t-chassis { --w: 380px; --h: 14px; --d: 96px; left: 0; top: 160px; }
.t-chassis > .f { background: #1f2a36; }

/* Wheels (flat discs on both sides) */
.t-wheel {
  position: absolute;
  top: 152px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, #cfd6de 0 22%, #2a3440 24% 60%, #111820 62%);
}
.t-wheel.w1 { left: 36px; } .t-wheel.w2 { left: 88px; } .t-wheel.w3 { left: 310px; }
.t-wheel.near { transform: translateZ(49px); }
.t-wheel.far { transform: translateZ(-49px); }

/* Ground shadow */
.t-shadow {
  position: absolute;
  left: -20px;
  top: 118px;
  width: 440px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(2, 28, 51, 0.28), transparent);
  transform: rotateX(90deg);
}

/* Cardboard boxes next to the truck */
.t-box > .f { background: #d9a86c; border: 1px solid #c08d52; }
.t-box > .f-top { background: #e4b97f; }
.t-box > .f-left, .t-box > .f-right { background: #c99556; }
.t-box > .f-front::before, .t-box > .f-top::before {
  content: "";
  position: absolute;
  left: calc(50% - 5px);
  top: 0;
  bottom: 0;
  width: 10px;
  background: rgba(255, 255, 255, 0.35);
}
.t-box1 { --w: 54px; --h: 50px; --d: 54px; left: -40px; top: 124px; transform: translateZ(100px); }
.t-box2 { --w: 46px; --h: 42px; --d: 46px; left: -36px; top: 82px; transform: translateZ(100px) rotateY(18deg); }
.t-box3 { --w: 40px; --h: 38px; --d: 40px; left: -100px; top: 136px; transform: translateZ(130px) rotateY(-12deg); }

@media (max-width: 900px) {
  .truck3d-section .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .truck-stage { --s: 0.8; height: 320px; order: -1; }
}
@media (max-width: 480px) {
  .truck-stage { --s: 0.6; height: 250px; }
}

/* ---------- 3D staircase steps ---------- */
.steps-3d { padding-top: 60px; perspective: 1200px; }
.steps-3d .step {
  border-color: #d5dce4;
  transform: translateY(var(--lift, 0));
  box-shadow:
    1px 1px 0 #dfe5ec, 2px 2px 0 #dfe5ec, 3px 3px 0 #d5dce4, 4px 4px 0 #d5dce4,
    5px 5px 0 #cbd2db, 6px 6px 0 #cbd2db, 7px 7px 0 #c2cad4, 8px 8px 0 #c2cad4,
    18px 22px 30px rgba(2, 28, 51, 0.12);
  transition: transform 300ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms ease;
}
.steps-3d .step:nth-child(2) { --lift: -20px; }
.steps-3d .step:nth-child(3) { --lift: -40px; }
.steps-3d .step:nth-child(4) { --lift: -60px; }
.steps-3d .step:hover {
  transform: translateY(calc(var(--lift, 0px) - 6px)) translate(-3px, -3px);
  box-shadow:
    1px 1px 0 #dfe5ec, 2px 2px 0 #dfe5ec, 3px 3px 0 #d5dce4, 4px 4px 0 #d5dce4,
    5px 5px 0 #cbd2db, 6px 6px 0 #cbd2db, 7px 7px 0 #c2cad4, 8px 8px 0 #c2cad4,
    9px 9px 0 #b8c1cc, 10px 10px 0 #b8c1cc, 11px 11px 0 #aeb8c4,
    24px 30px 36px rgba(2, 28, 51, 0.16);
}
.steps-3d .step-number {
  background: radial-gradient(circle at 32% 28%, #4f7fae, var(--color-navy-mid) 55%, var(--color-navy));
  box-shadow: 0 4px 0 #0a2540, 0 8px 14px rgba(2, 28, 51, 0.3);
}
.steps-3d .step:last-child .step-number {
  background: radial-gradient(circle at 32% 28%, #ff9a52, var(--color-orange) 55%, var(--color-orange-dark));
  box-shadow: 0 4px 0 #a84302, 0 8px 14px rgba(240, 98, 3, 0.3);
}

/* Scroll reveal: steps rise into place (only when JS is running) */
.js-3d .steps-3d .step { opacity: 0; transform: translateY(calc(var(--lift, 0px) + 40px)) rotateX(35deg); }
.js-3d .steps-3d.in-view .step {
  opacity: 1;
  transform: translateY(var(--lift, 0));
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1), opacity 500ms ease, box-shadow 300ms ease;
}
.js-3d .steps-3d.in-view .step:nth-child(2) { transition-delay: 120ms; }
.js-3d .steps-3d.in-view .step:nth-child(3) { transition-delay: 240ms; }
.js-3d .steps-3d.in-view .step:nth-child(4) { transition-delay: 360ms; }
.js-3d .steps-3d.in-view .step:hover { transition-delay: 0ms; transform: translateY(calc(var(--lift, 0px) - 6px)) translate(-3px, -3px); }

@media (max-width: 900px) {
  .steps-3d { padding-top: 0; }
  .steps-3d .step:nth-child(n) { --lift: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  .tilt-3d, .tilt-3d:hover { transform: none; }
  .truck3d-scene { transition: none; }
  .js-3d .steps-3d .step,
  .js-3d .steps-3d.in-view .step { opacity: 1; transform: translateY(var(--lift, 0)); transition: none; }
}

/* ---------- 3D quote banner ---------- */
.cta-3d-wrap { perspective: 1400px; padding-bottom: 18px; }
.cta-banner.cta-3d {
  position: relative;
  overflow: visible;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 500ms cubic-bezier(.2, .8, .2, 1);
  background:
    radial-gradient(circle at 50% -20%, rgba(47, 92, 134, 0.55), transparent 60%),
    var(--color-primary-dark);
  box-shadow:
    0 2px 0 #0a2a47, 0 4px 0 #082440, 0 6px 0 #071f38, 0 8px 0 #061b31,
    0 10px 0 #05172a, 0 12px 0 #041424,
    0 30px 50px rgba(2, 28, 51, 0.35);
}
.cta-banner.cta-3d.is-tilting { transition: transform 80ms linear; }
.cta-3d > h2, .cta-3d > .cta-website { transform: translateZ(30px); }
.cta-3d > .cta-phone {
  transform: translateZ(55px);
  text-shadow: 0 2px 0 #0c2c48, 0 4px 0 #082440, 0 10px 18px rgba(0, 0, 0, 0.35);
}
.cta-3d > .btn {
  transform: translateZ(60px);
  box-shadow: 0 5px 0 #a84302, 0 14px 24px rgba(240, 98, 3, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease, background var(--transition-base);
}
.cta-3d > .btn:hover { transform: translateZ(60px) translateY(-2px); box-shadow: 0 7px 0 #a84302, 0 18px 28px rgba(240, 98, 3, 0.4); }
.cta-3d > .btn:active { transform: translateZ(60px) translateY(4px); box-shadow: 0 1px 0 #a84302, 0 6px 12px rgba(240, 98, 3, 0.3); }
.cta-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.12), transparent 50%);
}
.cta-3d:hover::after { opacity: 1; }

/* Floating cardboard boxes on the banner */
.cta-float {
  position: absolute;
  transform-style: preserve-3d;
  animation: ctaFloat 5s ease-in-out infinite;
  pointer-events: none;
}
.cta-float-l { left: 7%; top: 30%; }
.cta-float-r { right: 8%; top: 46%; animation-delay: -2.5s; }
.cta-float .cuboid { position: relative; }
.cta-float-l .cuboid { --w: 64px; --h: 58px; --d: 64px; transform: rotateX(-18deg) rotateY(32deg); }
.cta-float-r .cuboid { --w: 50px; --h: 46px; --d: 50px; transform: rotateX(-18deg) rotateY(-28deg); }
@keyframes ctaFloat {
  0%, 100% { transform: translateZ(70px) translateY(0); }
  50% { transform: translateZ(70px) translateY(-14px); }
}

@media (max-width: 900px) {
  .cta-float-l { left: 4%; top: 12%; }
  .cta-float-r { right: 4%; top: auto; bottom: 14%; }
  .cta-float-l .cuboid { --w: 44px; --h: 40px; --d: 44px; }
  .cta-float-r .cuboid { --w: 36px; --h: 34px; --d: 36px; }
}
@media (max-width: 640px) {
  .cta-float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-banner.cta-3d { transform: none; }
  .cta-float { animation: none; transform: translateZ(70px); }
}

/* 3D India map behind the quote banner. The map renders into its own flat
   layer so its tilted back edge isn't hidden behind the banner's surface. */
.cta-map {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  perspective: 900px;
  transform: translateZ(1px);
  pointer-events: none;
}
.cta-map-body {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  aspect-ratio: 1458 / 1695;
  transform-style: preserve-3d;
  transform: translate(-50%, -46%) rotateX(50deg) rotateZ(-8deg);
}
.cta-map-layer,
.cta-map-top {
  position: absolute;
  inset: 0;
  -webkit-mask: url('../img/india-map-3d.svg') center / 100% 100% no-repeat;
  mask: url('../img/india-map-3d.svg') center / 100% 100% no-repeat;
}
.cta-map-layer {
  background: #0b2d4c;
  transform: translateZ(calc(var(--i) * 2px));
}
.cta-map-layer:first-child { background: #010f1c; filter: blur(6px); transform: translateZ(-1px) scale(1.02); }
.cta-map-top {
  transform: translateZ(22px);
  background:
    radial-gradient(circle at 35% 25%, rgba(255, 255, 255, 0.22), transparent 55%),
    linear-gradient(160deg, #3d6d99 0%, #1d4a72 55%, #123a5c 100%);
}
.cta-hub {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--color-orange);
  box-shadow: 0 0 0 3px rgba(240, 98, 3, 0.35), 0 0 16px 4px rgba(240, 98, 3, 0.7);
  transform: translateZ(23px);
}
.cta-hub::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(240, 98, 3, 0.8);
  animation: ctaHubPulse 2.4s ease-out infinite;
}
.cta-hub:nth-last-child(3)::after { animation-delay: -0.6s; }
.cta-hub:nth-last-child(2)::after { animation-delay: -1.2s; }
.cta-hub:nth-last-child(1)::after { animation-delay: -1.8s; }
@keyframes ctaHubPulse {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(2.4); opacity: 0; }
}
/* Keep the banner text readable on top of the map */
.cta-3d > h2, .cta-3d > .cta-phone, .cta-3d > .cta-website { text-shadow: 0 2px 12px rgba(2, 28, 51, 0.85); }

/* Wide screens: map sits in the empty right side of the banner, boxes on the left */
@media (min-width: 901px) {
  .cta-map-body { left: 80%; width: 380px; transform: translate(-50%, -44%) rotateX(50deg) rotateZ(-8deg); }
  .cta-float-r { left: 15%; right: auto; top: 62%; }
}
/* Narrow screens: map stays centred but faded behind the text */
@media (max-width: 900px) {
  .cta-map { opacity: 0.4; }
}
@media (max-width: 640px) {
  .cta-map-body { width: 270px; }
}
@media (prefers-reduced-motion: reduce) {
  .cta-hub::after { animation: none; opacity: 0; }
}

/* ---------- 3D hero (sits on top of cine-hero.css) ---------- */
.cine-hero { perspective: 1200px; }

/* Backdrop drifts opposite the mouse for depth */
.cine-backdrop {
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0) scale(1.06);
  transition: transform 300ms ease-out;
}

/* Extruded block letters */
.cine-title {
  transform: rotateX(calc(var(--py, 0) * -8deg)) rotateY(calc(var(--px, 0) * 10deg));
  transition: transform 300ms ease-out;
  text-shadow:
    0 1px 0 #d9e1ea, 0 2px 0 #c9d3de, 0 3px 0 #b8c4d2, 0 4px 0 #a7b5c5,
    0 5px 0 #96a6b8, 0 6px 0 #8597ab, 0 7px 0 #74889e, 0 8px 0 #637991,
    0 9px 0 #f06203, 0 10px 0 #cf5202,
    0 18px 28px rgba(0, 0, 0, 0.55);
}
.cine-mask { padding-bottom: 0.14em; }
/* Start the title reveal further down so the extra padding doesn't show a sliver */
.cine-hero.anim .cine-line { transform: translateY(130%); }
@keyframes cineReveal { from { transform: translateY(130%); } to { transform: translateY(0); } }
.cine-rule { box-shadow: 0 3px 0 #a84302, 0 6px 14px rgba(240, 98, 3, 0.5); }
.cine-cta {
  box-shadow: 0 5px 0 #a84302, 0 14px 26px rgba(0, 0, 0, 0.35);
  transition: transform 120ms ease, box-shadow 120ms ease, background var(--transition-base);
}
.cine-cta:hover { box-shadow: 0 7px 0 #a84302, 0 18px 30px rgba(0, 0, 0, 0.4); }
.cine-cta:active { transform: translateY(4px); box-shadow: 0 1px 0 #a84302, 0 6px 12px rgba(0, 0, 0, 0.3); }

/* Perspective road along the bottom of the hero */
.hero-floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  z-index: 1;
  perspective: 300px;
  perspective-origin: 50% 0%;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 45%);
  mask: linear-gradient(to bottom, transparent, #000 45%);
}
.hero-floor-plane {
  position: absolute;
  left: -50%;
  right: -50%;
  top: 0;
  height: 260%;
  transform-origin: 50% 0;
  transform: rotateX(72deg);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 90px);
}
.hero-road {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 360px;
  margin-left: -180px;
  background: linear-gradient(90deg, rgba(240, 98, 3, 0.55) 0 4px, rgba(2, 28, 51, 0.55) 4px calc(100% - 4px), rgba(240, 98, 3, 0.55) calc(100% - 4px));
}
.hero-road::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 8px;
  margin-left: -4px;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0 60px, transparent 60px 120px);
  animation: heroRoad 1.2s linear infinite;
}
@keyframes heroRoad {
  from { background-position: 0 0; }
  to { background-position: 0 120px; }
}

/* Hero vehicles drive toward the centre: spinning wheels, bouncing body,
   a moving road strip underneath and speed lines behind. All icons face
   right, so the right-hand slot is mirrored to face the centre. */
.cine-side { perspective: 700px; }
.cine-side svg {
  overflow: visible;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45));
  transform: rotateY(28deg);
  transition: transform 400ms cubic-bezier(.2, .8, .2, 1);
}
.cine-side-r svg { scale: -1 1; }
.cine-side:hover svg { transform: rotateY(12deg) translateY(-6px); }

.cine-side .wheel {
  transform-box: fill-box;
  transform-origin: center;
  animation: heroWheel 0.45s linear infinite;
}
.cine-side .vbody { animation: heroBounce 0.32s ease-in-out infinite alternate; }
@keyframes heroWheel { to { transform: rotate(360deg); } }
@keyframes heroBounce { from { translate: 0 0; } to { translate: 0 -2.5px; } }

/* moving road strip under the wheels */
.cine-side::before {
  content: "";
  position: absolute;
  left: -14%;
  right: -14%;
  top: 84%;
  height: 22%;
  z-index: -1;
  pointer-events: none;
  border-radius: 6px;
  transform: rotateX(62deg);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0 22px, transparent 22px 44px) 0 50% / 44px 3px repeat-x,
    linear-gradient(180deg, #2a3a4b, #121c27);
  box-shadow: inset 0 3px 0 rgba(240, 98, 3, 0.75), inset 0 -3px 0 rgba(240, 98, 3, 0.75), 0 0 28px rgba(240, 98, 3, 0.35);
  -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  animation: heroLaneL 0.45s linear infinite;
}
.cine-side-r::before { animation-name: heroLaneR; }
@keyframes heroLaneL { from { background-position: 0 50%, 0 0; } to { background-position: -44px 50%, 0 0; } }
@keyframes heroLaneR { from { background-position: 0 50%, 0 0; } to { background-position: 44px 50%, 0 0; } }

/* speed lines behind the vehicle */
.cine-side::after {
  content: "";
  position: absolute;
  top: 28%;
  width: 34%;
  height: 46%;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7)) 0 15% / 100% 3px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5)) 40% 50% / 70% 3px no-repeat,
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6)) 20% 85% / 85% 3px no-repeat;
  animation: heroSpeed 0.6s linear infinite;
}
.cine-side-l::after { left: -26%; }
.cine-side-r::after { right: -26%; scale: -1 1; animation-name: heroSpeedR; }
@keyframes heroSpeed {
  0% { translate: 18px 0; opacity: 0; }
  30% { opacity: 1; }
  100% { translate: -26px 0; opacity: 0; }
}
@keyframes heroSpeedR {
  0% { translate: -18px 0; opacity: 0; }
  30% { opacity: 1; }
  100% { translate: 26px 0; opacity: 0; }
}

/* Phones: show both vehicles below the button so they can still be tapped */
@media (max-width: 640px) {
  .cine-hero .cine-copy { padding-bottom: 150px; }
  .cine-hero .cine-side {
    display: block;
    top: auto;
    bottom: 34px;
    width: 116px;
    transform: none;
  }
  .cine-hero .cine-side:hover, .cine-hero .cine-side:active { transform: none; }
  .cine-hero .cine-side-l { left: 9%; }
  .cine-hero .cine-side-r { right: 9%; }
  .cine-side svg, .cine-side:hover svg { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-road::after { animation: none; }
  .cine-backdrop, .cine-title { transform: none; }
  .cine-side .wheel, .cine-side .vbody, .cine-side::before, .cine-side::after { animation: none; }
  .cine-side::after { opacity: 0; }
}

/* ---------- 3D "Our Services" section ---------- */
.services-3d {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(47, 92, 134, 0.10), transparent 60%),
    linear-gradient(180deg, #f7f9fb, #ffffff 70%);
  overflow: hidden;
}
/* faint isometric grid */
.services-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    repeating-linear-gradient(30deg, rgba(18, 58, 92, 0.05) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(150deg, rgba(18, 58, 92, 0.05) 0 1px, transparent 1px 46px);
  -webkit-mask: linear-gradient(180deg, #000, transparent 80%);
  mask: linear-gradient(180deg, #000, transparent 80%);
}
.services-3d .container { position: relative; }
.services-3d .section-head h2 {
  text-shadow: 0 1px 0 #c9d3de, 0 2px 0 #b8c4d2, 0 3px 0 #a7b5c5, 0 8px 14px rgba(2, 28, 51, 0.15);
}
.services-3d .grid { counter-reset: svc; gap: 28px; }

.services-3d .service-card {
  --edge1: #d5dce4; --edge2: #c2cad4; --edge3: #aeb8c4; --accent: var(--color-navy-mid);
  counter-increment: svc;
  overflow: visible;
  background: linear-gradient(160deg, #ffffff 60%, #f3f6f9);
  border-color: #dfe5ec;
  box-shadow:
    2px 2px 0 var(--edge1), 4px 4px 0 var(--edge1), 6px 6px 0 var(--edge2), 8px 8px 0 var(--edge3),
    20px 24px 32px rgba(2, 28, 51, 0.10);
}
.services-3d .service-card.svc-orange { --edge1: #f8d7bf; --edge2: #f2bd96; --edge3: #e9a06b; --accent: var(--color-orange); }
.services-3d .service-card.tilt-3d:hover {
  box-shadow:
    2px 2px 0 var(--edge1), 4px 4px 0 var(--edge1), 6px 6px 0 var(--edge2), 8px 8px 0 var(--edge2),
    10px 10px 0 var(--edge3), 12px 12px 0 var(--edge3),
    28px 34px 40px rgba(2, 28, 51, 0.16);
}
/* coloured top strip */
.services-3d .service-card::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: -1px;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--accent);
}
/* big faint number in the corner (01–08) */
.services-3d .service-card > h3::after {
  content: counter(svc, decimal-leading-zero);
  position: absolute;
  top: -78px;
  right: -6px;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(18, 58, 92, 0.16);
  pointer-events: none;
}
.services-3d .service-card > h3 { position: relative; }

/* chunky 3D icon tiles */
.services-3d .service-card .icon-circle {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  font-size: 1.8rem;
  background: linear-gradient(145deg, #ffffff, #dfe7ef);
  box-shadow: 0 2px 0 #c3ced9, 0 4px 0 #b3c0cd, 0 6px 0 #a3b2c1, 0 14px 20px rgba(2, 28, 51, 0.18);
}
.services-3d .service-card .icon-circle--orange {
  background: linear-gradient(145deg, #ffffff, #fde3d0);
  box-shadow: 0 2px 0 #f6caa8, 0 4px 0 #f0b588, 0 6px 0 #e9a06b, 0 14px 20px rgba(240, 98, 3, 0.2);
}

/* "Learn more" as a pressable pill */
.services-3d .card-link {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-navy-soft);
  color: var(--accent);
  font-size: 0.9rem;
  box-shadow: 0 3px 0 var(--edge2);
  transition: transform 120ms ease, box-shadow 120ms ease, background var(--transition-base);
}
.services-3d .svc-orange .card-link { background: var(--color-orange-soft); }
.services-3d .card-link:hover { box-shadow: 0 5px 0 var(--edge3); translate: 0 -2px; }
.services-3d .card-link:active { box-shadow: 0 0 0 var(--edge3); translate: 0 3px; }

/* Cards rise into place on scroll (uses `translate`, so it doesn't fight the tilt transform) */
.js-3d .reveal-3d > * {
  opacity: 0;
  translate: 0 46px;
  transition: opacity 600ms ease, translate 800ms cubic-bezier(.16, 1, .3, 1), transform 400ms cubic-bezier(.2, .8, .2, 1), box-shadow var(--transition-base);
}
.js-3d .reveal-3d.in-view > * { opacity: 1; translate: 0 0; }
.js-3d .reveal-3d.in-view > *:nth-child(2) { transition-delay: 80ms, 80ms, 0ms, 0ms; }
.js-3d .reveal-3d.in-view > *:nth-child(3) { transition-delay: 160ms, 160ms, 0ms, 0ms; }
.js-3d .reveal-3d.in-view > *:nth-child(4) { transition-delay: 240ms, 240ms, 0ms, 0ms; }
.js-3d .reveal-3d.in-view > *:nth-child(5) { transition-delay: 320ms, 320ms, 0ms, 0ms; }
.js-3d .reveal-3d.in-view > *:nth-child(6) { transition-delay: 400ms, 400ms, 0ms, 0ms; }
.js-3d .reveal-3d.in-view > *:nth-child(7) { transition-delay: 480ms, 480ms, 0ms, 0ms; }
.js-3d .reveal-3d.in-view > *:nth-child(8) { transition-delay: 560ms, 560ms, 0ms, 0ms; }
.js-3d .reveal-3d.in-view > .is-tilting { transition: transform 80ms linear, box-shadow var(--transition-base); }

@media (prefers-reduced-motion: reduce) {
  .js-3d .reveal-3d > * { opacity: 1; translate: none; transition: none; }
}

/* ---------- 3D "Why Choose Us" cards + detail popup ---------- */
.why-3d { background: linear-gradient(180deg, #ffffff, #f4f7fa); }
.why-3d .section-head h2 {
  text-shadow: 0 1px 0 #c9d3de, 0 2px 0 #b8c4d2, 0 3px 0 #a7b5c5, 0 8px 14px rgba(2, 28, 51, 0.15);
}
.why-3d .grid { gap: 28px; }
.why-3d .why-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--color-on-dark);
  border: 0;
  background:
    radial-gradient(circle at 80% 0%, rgba(240, 98, 3, 0.18), transparent 50%),
    linear-gradient(160deg, #1b4a74 0%, var(--color-navy-mid) 45%, var(--color-navy) 100%);
  box-shadow:
    2px 2px 0 #0b2d4c, 4px 4px 0 #0a2944, 6px 6px 0 #08233b, 8px 8px 0 #061d31,
    22px 26px 34px rgba(2, 28, 51, 0.25);
}
.why-3d .why-card.tilt-3d:hover {
  box-shadow:
    2px 2px 0 #0b2d4c, 4px 4px 0 #0a2944, 6px 6px 0 #08233b, 8px 8px 0 #061d31,
    10px 10px 0 #f06203, 12px 12px 0 #cf5202,
    30px 36px 42px rgba(2, 28, 51, 0.3);
}
.why-3d .why-card::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--color-orange);
}
.why-3d .why-card h3 { color: #fff; font-size: 1.05rem; }
.why-3d .why-card > p { color: var(--color-on-dark-muted); flex: 1; }
.why-3d .why-card .icon-circle {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  font-size: 1.7rem;
  margin-bottom: var(--space-4);
  background: linear-gradient(145deg, #ffffff, #dfe7ef);
  box-shadow: 0 2px 0 #9fb0c2, 0 4px 0 #7f93a8, 0 6px 0 #5f7790, 0 14px 22px rgba(0, 0, 0, 0.35);
}
.why-3d .why-card .icon-circle--orange {
  background: linear-gradient(145deg, #ffffff, #fde3d0);
  box-shadow: 0 2px 0 #f0b588, 0 4px 0 #e9a06b, 0 6px 0 #cf5202, 0 14px 22px rgba(0, 0, 0, 0.35);
}
.why-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-4);
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--color-orange);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 0 #a84302, 0 10px 18px rgba(0, 0, 0, 0.25);
  transition: translate 120ms ease, box-shadow 120ms ease;
}
.why-more span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  font-size: 1rem;
  line-height: 1;
}
.why-more:hover { translate: 0 -2px; box-shadow: 0 6px 0 #a84302, 0 14px 22px rgba(0, 0, 0, 0.3); }
.why-more:active { translate: 0 4px; box-shadow: 0 0 0 #a84302, 0 4px 8px rgba(0, 0, 0, 0.2); }
.why-more:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Popup */
.why-modal {
  margin: auto; /* base.css resets margins to 0, which breaks the dialog's built-in centring */
  border: 0;
  outline: none;
  padding: 0;
  background: transparent;
  max-width: min(640px, calc(100vw - 32px));
  width: 100%;
  max-height: calc(100vh - 32px);
  overflow: visible;
  perspective: 1200px;
}
.why-modal::backdrop {
  background: rgba(2, 28, 51, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.why-modal-panel {
  position: relative;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  border-top: 5px solid var(--color-orange);
  box-shadow:
    0 2px 0 #dfe5ec, 0 4px 0 #d5dce4, 0 6px 0 #cbd2db, 0 8px 0 #c2cad4,
    0 40px 70px rgba(0, 0, 0, 0.35);
  transform-origin: 50% 100%;
}
.why-modal[open] .why-modal-panel { animation: whyModalIn 500ms cubic-bezier(.16, 1, .3, 1); }
.why-modal-panel:focus { outline: none; }
@keyframes whyModalIn {
  from { opacity: 0; transform: rotateX(-28deg) translateY(60px) scale(0.92); }
  to { opacity: 1; transform: none; }
}
.why-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--color-navy-soft);
  color: var(--color-navy);
  font-size: 1.5rem;
  line-height: 1;
  box-shadow: 0 3px 0 #c9d3de;
}
.why-modal-close:hover { background: #dbe3eb; }
.why-modal-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); padding-right: 44px; }
.why-modal-icon {
  width: 60px;
  height: 60px;
  border-radius: 18px;
  font-size: 1.7rem;
  background: linear-gradient(145deg, #ffffff, #fde3d0);
  box-shadow: 0 2px 0 #f0b588, 0 4px 0 #e9a06b, 0 6px 0 #cf5202, 0 12px 18px rgba(240, 98, 3, 0.25);
}
.why-modal-head h3 { margin: 0; font-size: 1.4rem; }
.why-modal-body h4 { margin: var(--space-5) 0 var(--space-3); color: var(--color-navy); }
.why-modal-body ul { display: flex; flex-direction: column; gap: 10px; }
.why-modal-body li {
  position: relative;
  padding: 10px 12px 10px 40px;
  border-radius: var(--radius-sm);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
.why-modal-body li::before {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 10px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-orange);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.why-modal-body li strong { color: var(--color-ink); }
.why-detail-note {
  margin: var(--space-4) 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-orange-soft);
  color: var(--color-ink);
  font-size: 0.9rem;
}
.why-detail-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
body.why-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .why-modal-panel { padding: var(--space-5); }
  .why-modal-head h3 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .why-modal[open] .why-modal-panel { animation: none; }
}

/* Shared vehicle gradients live in this svg; it must never be display:none
   (cine-hero.css hides every svg in the hero buttons by default). */
svg.vehicle-defs { display: block !important; position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Clickable booking steps + "Start Your Booking" bar ---------- */
.step-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.step-link:hover h3 { color: var(--color-orange-dark); }
.step-link:focus-visible { outline: 3px solid var(--color-orange); outline-offset: 4px; }
.step-go {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--color-navy-soft);
  color: var(--color-navy-mid);
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 3px 0 #c3ced9;
  transition: background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
.step-link:first-child .step-go,
.step-link:hover .step-go {
  background: var(--color-orange);
  color: #fff;
  box-shadow: 0 3px 0 #a84302;
}

.quick-quote {
  margin-top: 44px;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 10% -40%, rgba(47, 92, 134, 0.6), transparent 60%),
    var(--color-primary-dark);
  border-top: 4px solid var(--color-orange);
  box-shadow:
    0 2px 0 #0a2a47, 0 4px 0 #082440, 0 6px 0 #071f38, 0 8px 0 #061b31, 0 10px 0 #05172a,
    0 30px 46px rgba(2, 28, 51, 0.3);
}
.quick-quote.is-flash { animation: qqFlash 1.2s ease; }
@keyframes qqFlash {
  0%, 100% { box-shadow: 0 2px 0 #0a2a47, 0 4px 0 #082440, 0 6px 0 #071f38, 0 8px 0 #061b31, 0 10px 0 #05172a, 0 30px 46px rgba(2, 28, 51, 0.3); }
  30% { box-shadow: 0 2px 0 #0a2a47, 0 4px 0 #082440, 0 6px 0 #071f38, 0 8px 0 #061b31, 0 10px 0 #05172a, 0 0 0 6px rgba(240, 98, 3, 0.55), 0 30px 46px rgba(2, 28, 51, 0.3); }
}
.quick-quote-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 16px; }
.quick-quote-title strong {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: #fff;
  text-shadow: 0 2px 0 #5f7790, 0 6px 10px rgba(0, 0, 0, 0.4);
}
.quick-quote-title span { color: var(--color-on-dark-muted); font-size: 0.9rem; }
.quick-quote-fields {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr auto;
  gap: 14px;
  align-items: end;
}
.qq-field { display: flex; flex-direction: column; gap: 6px; }
.qq-field span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-on-dark-muted); }
.qq-field select,
.qq-field input {
  height: 50px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: #fff;
  color: var(--color-ink);
  font: inherit;
  box-shadow: inset 0 2px 4px rgba(2, 28, 51, 0.12), 0 3px 0 rgba(0, 0, 0, 0.35);
}
.qq-field select:focus,
.qq-field input:focus { outline: none; box-shadow: inset 0 2px 4px rgba(2, 28, 51, 0.12), 0 0 0 4px rgba(240, 98, 3, 0.45); }
.qq-submit {
  height: 50px;
  white-space: nowrap;
  box-shadow: 0 5px 0 #a84302, 0 12px 20px rgba(0, 0, 0, 0.3);
  transition: translate 120ms ease, box-shadow 120ms ease, background var(--transition-base);
}
.qq-submit:hover { translate: 0 -2px; box-shadow: 0 7px 0 #a84302, 0 16px 24px rgba(0, 0, 0, 0.3); }
.qq-submit:active { translate: 0 4px; box-shadow: 0 1px 0 #a84302, 0 4px 8px rgba(0, 0, 0, 0.3); }

@media (max-width: 900px) {
  .quick-quote-fields { grid-template-columns: 1fr 1fr; }
  .quick-quote-fields .qq-field:first-child, .qq-submit { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .quick-quote { padding: var(--space-5) var(--space-4); }
  .quick-quote-fields { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .quick-quote.is-flash { animation: none; }
}

/* ---------- Packers & Movers section: 3D copy side + floor and badges ---------- */
.truck3d-section {
  background:
    radial-gradient(ellipse 45% 60% at 75% 55%, rgba(240, 98, 3, 0.08), transparent 70%),
    linear-gradient(180deg, #fff, #f4f6f9);
}
.pk-title {
  text-shadow: 0 1px 0 #c9d3de, 0 2px 0 #b8c4d2, 0 3px 0 #f06203, 0 8px 14px rgba(2, 28, 51, 0.18);
}
.pk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.pk-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: #fff;
  border-top: 3px solid var(--color-orange);
  box-shadow: 2px 2px 0 #dfe5ec, 4px 4px 0 #d5dce4, 6px 6px 0 #cbd2db, 0 14px 22px rgba(2, 28, 51, 0.1);
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--color-muted);
  transition: translate 250ms cubic-bezier(.16, 1, .3, 1), box-shadow 250ms ease;
}
.pk-list li:hover {
  translate: -3px -3px;
  box-shadow: 2px 2px 0 #dfe5ec, 4px 4px 0 #d5dce4, 6px 6px 0 #cbd2db, 8px 8px 0 #f06203, 0 20px 28px rgba(2, 28, 51, 0.14);
}
.pk-list b { display: block; font-size: 0.95rem; color: var(--color-navy); }
/* icon sits in a small 3D cube */
.pk-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 12px;
  font-size: 1.3rem;
  background: linear-gradient(145deg, #fff3ea, #fdd9bf);
  box-shadow: 0 4px 0 #f0b48a, 0 8px 12px rgba(240, 98, 3, 0.2), inset 0 1px 0 #fff;
}
.pk-btn {
  box-shadow: 0 5px 0 #a84302, 0 12px 20px rgba(240, 98, 3, 0.3);
  transition: translate 150ms ease, box-shadow 150ms ease;
}
.pk-btn:hover { translate: 0 -2px; box-shadow: 0 7px 0 #a84302, 0 16px 24px rgba(240, 98, 3, 0.35); }
.pk-btn:active { translate: 0 4px; box-shadow: 0 1px 0 #a84302; }

/* floor under the truck */
.pk-floor {
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: 140%;
  height: 260px;
  translate: -50% 0;
  transform: perspective(700px) rotateX(70deg);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, rgba(2, 28, 51, 0.06) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(2, 28, 51, 0.06) 0 1px, transparent 1px 48px),
    radial-gradient(ellipse at 50% 40%, rgba(240, 98, 3, 0.12), transparent 65%);
  -webkit-mask: radial-gradient(ellipse 60% 70% at 50% 45%, #000 40%, transparent 75%);
  mask: radial-gradient(ellipse 60% 70% at 50% 45%, #000 40%, transparent 75%);
  pointer-events: none;
}

/* floating 3D badges around the truck */
.pk-badge {
  position: absolute;
  z-index: 2;
  padding: 7px 13px;
  border-radius: 999px;
  background: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-navy);
  white-space: nowrap;
  box-shadow: 0 4px 0 #d5dce4, 0 12px 20px rgba(2, 28, 51, 0.15);
  animation: pkFloat 4s ease-in-out infinite;
}
.pk-badge--a { top: 8%; left: 6%; }
.pk-badge--b { top: 4%; right: 8%; animation-delay: -1.3s; border: 1px solid #f2c4a3; box-shadow: 0 4px 0 #f0b48a, 0 12px 20px rgba(240, 98, 3, 0.18); }
.pk-badge--c { bottom: 10%; right: 4%; animation-delay: -2.6s; }
@keyframes pkFloat { 50% { translate: 0 -10px; } }

@media (max-width: 640px) {
  .pk-list { grid-template-columns: minmax(0, 1fr); }
  .pk-badge { font-size: 0.7rem; padding: 5px 10px; }
  .pk-badge--c { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-badge { animation: none; }
  .pk-list li { transition: none; }
}