@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root{--brown:#38251d;--orange:#c65d32;--cream:#f5eedf;--yellow:#e5b84f;--white:#fffaf0;--green:#218838}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--brown);font-family:Arial,Helvetica,sans-serif}
a{transition:.2s ease}
.site-head{background:var(--brown);color:var(--cream);padding:17px 5%;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brand{font-family:'Archivo Black',Arial,sans-serif;font-size:clamp(18px,2.5vw,27px);letter-spacing:-1px;color:var(--cream);text-decoration:none;white-space:nowrap}
.brand .orange{color:var(--orange)}
.head-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.head-tag{font-size:10px;font-weight:900;letter-spacing:1.6px;color:var(--yellow)}
.call{background:var(--green);color:#fff;text-decoration:none;padding:12px 16px;border-radius:4px;font-size:12px;font-weight:900;box-shadow:0 3px 0 #17652a}
.est{background:var(--yellow);color:var(--brown);text-decoration:none;padding:12px 16px;border-radius:4px;font-size:12px;font-weight:900}
.main-nav{display:flex;justify-content:center;gap:clamp(12px,2.5vw,30px);flex-wrap:wrap;background:#2b1c16;padding:13px 10px}
.main-nav a{color:var(--cream);text-decoration:none;font-size:11px;font-weight:900;letter-spacing:1px}
.main-nav a:hover,.main-nav a.active{color:var(--yellow)}
.page-wrap{width:100%;overflow:hidden}
.hero{background:var(--brown);color:var(--cream);text-align:center;padding:78px 22px;border-bottom:10px solid var(--orange)}
.eyebrow{color:var(--yellow);font-size:13px;font-weight:800;letter-spacing:4px;margin-bottom:18px}
.hero h1{font-size:clamp(40px,7vw,76px);line-height:1;font-weight:900;letter-spacing:-2px;margin:0 0 20px}
.hero h2{color:var(--yellow);font-size:clamp(17px,3vw,25px);letter-spacing:2px;margin:0 0 25px}
.hero p{max-width:700px;margin:0 auto 30px;font-size:17px;line-height:1.8}
.button{display:inline-block;background:var(--orange);color:#fff8e9;padding:16px 27px;text-decoration:none;font-size:13px;font-weight:900;letter-spacing:1.5px;border-radius:4px;box-shadow:0 4px 0 #8d3c20;transition:.2s}
.button:hover{background:var(--yellow);color:var(--brown);transform:translateY(-2px)}
.call-button{display:inline-block;background:var(--green);color:#fff;padding:14px 22px;text-decoration:none;font-size:13px;font-weight:900;letter-spacing:1px;border-radius:4px;box-shadow:0 3px 0 #17652a}
.section{padding:70px 22px;text-align:center}
.section-heading{font-size:clamp(30px,5vw,43px);font-weight:900;letter-spacing:-1px;margin:0 0 15px}
.section-subtitle{max-width:680px;margin:0 auto 40px;font-size:16px;line-height:1.7}
.orange-line{width:65px;height:5px;background:var(--orange);margin:20px auto 25px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:1100px;margin:auto;text-align:left}
.card{background:var(--white);padding:28px 24px;border:1px solid #e6d9c4;border-bottom:5px solid var(--orange);border-radius:5px}
.card h3{font-size:19px;font-weight:900;margin:0 0 12px}.card p{font-size:14px;line-height:1.7;margin:0}
.icon{font-size:32px;margin-bottom:14px}
.dark{background:var(--brown);color:var(--cream)}.dark .section-subtitle{color:#e9dcc8}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;max-width:1000px;margin:auto}
.step{padding:22px}.step-num{width:55px;height:55px;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;border-radius:50%;background:var(--yellow);color:var(--brown);font-size:25px;font-weight:900}
.step h3{color:var(--yellow);font-size:19px;margin:0 0 12px}.step p{font-size:14px;line-height:1.7}
.experience{background:var(--yellow);padding:62px 22px;text-align:center}.experience-num{font-size:clamp(65px,12vw,105px);font-weight:900;line-height:1;color:var(--brown);margin-bottom:10px}.experience h2{font-size:clamp(22px,4vw,32px);letter-spacing:1px;margin:0 0 20px}.experience p{max-width:760px;margin:auto;font-size:16px;line-height:1.8}
.management{background:var(--brown);color:var(--cream);padding:65px 22px;text-align:center}.management h2{font-size:clamp(28px,5vw,42px);margin:0 0 20px}.management p{max-width:760px;margin:auto;font-size:16px;line-height:1.8;color:#e9dcc8}
.why{background:var(--white)}.why-box{max-width:760px;margin:auto;font-size:17px;line-height:1.9}
.notice{background:var(--cream);border-left:5px solid var(--orange);padding:24px;max-width:850px;margin:35px auto 0;text-align:left;font-size:14px;line-height:1.8}
.final-cta{background:var(--orange);color:#fff8e9;text-align:center;padding:70px 22px}.final-cta h2{font-size:clamp(30px,5vw,45px);font-weight:900;margin:0 0 15px}.final-cta p{font-size:17px;margin:0 0 28px}.final-cta .button{background:var(--yellow);color:var(--brown);box-shadow:0 4px 0 #9a7428}
.footer{background:var(--brown);color:var(--cream);padding:38px 20px;text-align:center}.footer h3{font-size:23px;letter-spacing:2px;margin:0 0 10px}.footer p{color:var(--yellow);font-size:12px;font-weight:800;letter-spacing:2px;margin:0 0 20px}.footer a{color:var(--cream);text-decoration:none}.footer-phone{font-size:17px;font-weight:800}
.map-section{background:var(--white);padding:60px 20px;text-align:center}.map-section p{max-width:760px;margin:0 auto 24px;line-height:1.7}.map-frame{max-width:1050px;height:480px;margin:25px auto 0;border:4px solid var(--brown);border-radius:6px;overflow:hidden;box-shadow:0 5px 0 rgba(56,37,29,.15)}#service-map{width:100%;height:100%}.map-note{font-size:13px;color:#67564a;margin:14px auto 0!important}
.city-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;max-width:1000px;margin:30px auto 0}.city{background:var(--white);padding:22px 15px;border-bottom:4px solid var(--orange);font-weight:800;font-size:16px}
.service-dark{background:var(--brown);color:var(--cream)}.service-dark .card{background:#493127;border:1px solid #695044;color:var(--cream)}.service-dark .card h3{color:var(--yellow)}.service-dark .card p{color:#e9dcc8}
@media(max-width:700px){.site-head{justify-content:center;text-align:center;padding:18px 12px}.head-actions{justify-content:center}.head-tag{width:100%}.main-nav{gap:12px 16px;padding:13px 8px}.main-nav a{font-size:10px}.hero{padding:62px 18px}.section{padding:52px 15px}.cards,.steps,.city-grid{grid-template-columns:1fr}.map-frame{height:390px}.button{max-width:340px}.card{padding:25px 20px}}


/* HOMEPAGE BRAND DETAILS: clean icons, yellow estimate CTA, restored animation */
.icon-art{
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--orange);
  background:var(--cream);
  border:2px solid var(--orange);
  border-radius:50%;
}
.icon-art svg{width:34px;height:34px;display:block}
.hero .button{
  background:var(--yellow);
  color:var(--brown);
  box-shadow:0 5px 0 rgba(56,37,29,.28);
  padding:17px 30px;
}
.hero .button:hover{
  background:var(--cream);
  color:var(--brown);
  transform:translateY(-3px);
}

/* Original worker / box / van animation from the supplied homepage embed */
.animation-scene{
  width:100%;
  max-width:440px;
  margin:25px auto 0;
  overflow:hidden;
}
.animation-scene svg{width:100%;height:auto;display:block}
.animation-scene .worker{animation:workerMove 9s infinite}
.animation-scene .box{
  animation:boxLoad 9s infinite;
  transform-box:fill-box;
  transform-origin:center;
}
.animation-scene .van{animation:vanDrive 9s infinite}
.animation-scene .wheel{
  transform-box:fill-box;
  transform-origin:center;
  animation:wheelSpin 9s infinite;
}
@keyframes workerMove{
  0%,10%{transform:translateX(0)}
  25%,48%{transform:translateX(45px)}
  55%,100%{transform:translateX(0)}
}
@keyframes boxLoad{
  0%,28%{transform:translate(0,0);opacity:1}
  43%{transform:translate(125px,-35px);opacity:1}
  48%,100%{transform:translate(125px,-35px);opacity:0}
}
@keyframes vanDrive{
  0%,55%{transform:translateX(0)}
  72%,90%{transform:translateX(900px)}
  91%,100%{transform:translateX(0)}
}
@keyframes wheelSpin{
  0%,55%{transform:rotate(0deg)}
  72%,90%{transform:rotate(720deg)}
  91%,100%{transform:rotate(0deg)}
}
@media(max-width:700px){
  .animation-scene{max-width:350px;margin-top:20px}
}
@media(prefers-reduced-motion:reduce){
  .animation-scene .worker,.animation-scene .box,
  .animation-scene .van,.animation-scene .wheel{animation:none}
}

/* Keep the current page tab highlighted */
.main-nav a.active,
.main-nav a[aria-current="page"] {
  color: var(--yellow) !important;
  border-bottom: 3px solid var(--yellow);
  padding-bottom: 7px;
}

/* Homepage loading sequence: worker takes a box from the stack and loads the van. */
.animation-scene .carry-box {
  transform-box: view-box;
  transform-origin: 0 0;
  animation: carryBoxLoad 9s ease-in-out infinite;
}
@keyframes carryBoxLoad {
  0%, 12%   { transform: translate(218px, 137px); opacity: 1; }
  23%       { transform: translate(235px, 112px); opacity: 1; }
  39%       { transform: translate(390px, 82px); opacity: 1; }
  45%, 100% { transform: translate(405px, 82px); opacity: 0; }
}
@media(prefers-reduced-motion: reduce) {
  .animation-scene .carry-box { animation: none; opacity: 0; }
}

/* Refined loading sequence: boxes move from the pile into the worker's hands. */
.animation-scene .worker { animation: none !important; }
.animation-scene .carry-box {
  transform-box: view-box;
  transform-origin: 0 0;
  opacity: 0;
}
.animation-scene .carry-one { animation: loadFirst 9s ease-in-out infinite; }
.animation-scene .carry-two { animation: loadSecond 9s ease-in-out infinite; }
.animation-scene .carry-three { animation: loadThird 9s ease-in-out infinite; }
.animation-scene .pile-top { animation: removeTop 9s ease-in-out infinite; }
.animation-scene .pile-middle { animation: removeMiddle 9s ease-in-out infinite; }
.animation-scene .pile-bottom { animation: removeBottom 9s ease-in-out infinite; }
.animation-scene .box-hands { animation: handsHold 9s ease-in-out infinite; }

@keyframes loadFirst {
  0%, 2% { transform: translate(166px,111px); opacity:1; }
  9% { transform: translate(250px,105px); opacity:1; }
  15% { transform: translate(274px,108px); opacity:1; }
  23% { transform: translate(405px,88px); opacity:1; }
  25%,100% { transform: translate(405px,88px); opacity:0; }
}
@keyframes loadSecond {
  0%, 27% { transform: translate(184px,132px); opacity:0; }
  29% { transform: translate(184px,132px); opacity:1; }
  36% { transform: translate(250px,105px); opacity:1; }
  42% { transform: translate(274px,108px); opacity:1; }
  50% { transform: translate(405px,88px); opacity:1; }
  52%,100% { transform: translate(405px,88px); opacity:0; }
}
@keyframes loadThird {
  0%, 54% { transform: translate(145px,142px); opacity:0; }
  56% { transform: translate(145px,142px); opacity:1; }
  63% { transform: translate(250px,105px); opacity:1; }
  69% { transform: translate(274px,108px); opacity:1; }
  77% { transform: translate(405px,88px); opacity:1; }
  79%,100% { transform: translate(405px,88px); opacity:0; }
}
@keyframes removeTop {
  0%, 18% { opacity:1; }
  23%,100% { opacity:0; }
}
@keyframes removeMiddle {
  0%, 44% { opacity:1; }
  50%,100% { opacity:0; }
}
@keyframes removeBottom {
  0%, 71% { opacity:1; }
  77%,100% { opacity:0; }
}
@keyframes handsHold {
  0%, 10%, 24%, 37%, 51%, 64%, 78%,100% { opacity:0; }
  12%, 22%, 39%, 49%, 66%, 76% { opacity:1; }
}
@keyframes vanDrive {
  0%, 82% { transform: translateX(0); }
  94%, 97% { transform: translateX(900px); }
  98%,100% { transform: translateX(0); }
}
@keyframes wheelSpin {
  0%, 82% { transform: rotate(0deg); }
  94%, 97% { transform: rotate(720deg); }
  98%,100% { transform: rotate(0deg); }
}
@media(prefers-reduced-motion:reduce) {
  .animation-scene .carry-box,.animation-scene .pile-top,
  .animation-scene .pile-middle,.animation-scene .pile-bottom,
  .animation-scene .box-hands { animation:none !important; }
  .animation-scene .carry-box { opacity:0 !important; }
}


/* Clean, coordinated loading animation. Each box stays solid and moves with the worker. */
.animation-scene .worker {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: workerTrips 18s ease-in-out infinite;
}
.animation-scene .carry-box {
  transform-box: view-box;
  transform-origin: 0 0;
  opacity: 0;
}
.animation-scene .carry-one { animation: carryOne 18s ease-in-out infinite; }
.animation-scene .carry-two { animation: carryTwo 18s ease-in-out infinite; }
.animation-scene .carry-three { animation: carryThree 18s ease-in-out infinite; }
.animation-scene .pile-top { animation: pileTop 18s ease-in-out infinite; }
.animation-scene .pile-middle { animation: pileMiddle 18s ease-in-out infinite; }
.animation-scene .pile-bottom { animation: pileBottom 18s ease-in-out infinite; }

/* Worker crouches to lift, walks to the van carrying the box, then returns. */
@keyframes workerTrips {
  0%, 2% { transform: translate(0,0) rotate(0); }
  7% { transform: translate(-5px,3px) rotate(-9deg); }
  12% { transform: translate(0,0) rotate(0); }
  26%, 31% { transform: translate(90px,0) rotate(0); }
  38% { transform: translate(-5px,3px) rotate(-9deg); }
  43% { transform: translate(0,0) rotate(0); }
  57%, 62% { transform: translate(90px,0) rotate(0); }
  69% { transform: translate(-5px,3px) rotate(-9deg); }
  74% { transform: translate(0,0) rotate(0); }
  88% { transform: translate(90px,0) rotate(0); }
  93%,100% { transform: translate(0,0) rotate(0); }
}
/* Box path: stack -> held in front of the worker -> van cargo area. */
@keyframes carryOne {
  0%, 3% { transform: translate(166px,111px); opacity:0; }
  7% { transform: translate(235px,111px); opacity:1; }
  12% { transform: translate(278px,110px); opacity:1; }
  26% { transform: translate(368px,110px); opacity:1; }
  29% { transform: translate(472px,91px); opacity:1; }
  31%,100% { transform: translate(472px,91px); opacity:0; }
}
@keyframes carryTwo {
  0%, 34% { transform: translate(184px,132px); opacity:0; }
  38% { transform: translate(235px,111px); opacity:1; }
  43% { transform: translate(278px,110px); opacity:1; }
  57% { transform: translate(368px,110px); opacity:1; }
  60% { transform: translate(472px,91px); opacity:1; }
  62%,100% { transform: translate(472px,91px); opacity:0; }
}
@keyframes carryThree {
  0%, 65% { transform: translate(145px,142px); opacity:0; }
  69% { transform: translate(235px,111px); opacity:1; }
  74% { transform: translate(278px,110px); opacity:1; }
  88% { transform: translate(368px,110px); opacity:1; }
  91% { transform: translate(472px,91px); opacity:1; }
  93%,100% { transform: translate(472px,91px); opacity:0; }
}
@keyframes pileTop { 0%, 9% {opacity:1} 12%,100% {opacity:0} }
@keyframes pileMiddle { 0%, 40% {opacity:1} 43%,100% {opacity:0} }
@keyframes pileBottom { 0%, 71% {opacity:1} 74%,100% {opacity:0} }
/* The van waits until all three boxes are loaded, then drives away. */
.animation-scene .van { animation: vanDrive 18s ease-in-out infinite; }
.animation-scene .wheel { animation: wheelSpin 18s ease-in-out infinite; }
@keyframes vanDrive {
  0%, 94% { transform: translateX(0); }
  99% { transform: translateX(900px); }
  100% { transform: translateX(0); }
}
@keyframes wheelSpin {
  0%, 94% { transform: rotate(0); }
  99% { transform: rotate(720deg); }
  100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .animation-scene .worker,.animation-scene .carry-box,.animation-scene .pile-top,
  .animation-scene .pile-middle,.animation-scene .pile-bottom,
  .animation-scene .van,.animation-scene .wheel { animation:none !important; }
  .animation-scene .carry-box { opacity:0 !important; }
}


/* Homepage headline: RIDDANCE is dark brown against the orange hero. */
.hero .hero-riddance { color: #38251d !important; }
.hero .hero-deleters { color: #38251d !important; }

/* Rebuilt loading scene: the held box is a child of the worker, never a separate floating object. */
.animation-scene .worker {
  transform-box: view-box;
  transform-origin: 283px 168px;
  animation: workerLoadTrips 18s linear infinite;
}
.animation-scene .held-box {
  opacity: 0;
  animation: heldBoxVisible 18s linear infinite;
}
.animation-scene .pile-top { animation: pileTopFade 18s linear infinite; }
.animation-scene .pile-middle { animation: pileMiddleFade 18s linear infinite; }
.animation-scene .pile-bottom { animation: pileBottomFade 18s linear infinite; }

/* Walk left to the pile, pick up, carry to the van, and return. Repeat for each box. */
@keyframes workerLoadTrips {
  0%,2% { transform: translate(0,0) rotate(0); }
  4% { transform: translate(-48px,2px) rotate(-7deg); }
  8% { transform: translate(-48px,0) rotate(0); }
  15% { transform: translate(140px,0) rotate(0); }
  17% { transform: translate(140px,0) rotate(0); }
  22% { transform: translate(0,0) rotate(0); }
  34%,36% { transform: translate(0,0) rotate(0); }
  38% { transform: translate(-48px,2px) rotate(-7deg); }
  42% { transform: translate(-48px,0) rotate(0); }
  49% { transform: translate(140px,0) rotate(0); }
  51% { transform: translate(140px,0) rotate(0); }
  56% { transform: translate(0,0) rotate(0); }
  68%,70% { transform: translate(0,0) rotate(0); }
  72% { transform: translate(-48px,2px) rotate(-7deg); }
  76% { transform: translate(-48px,0) rotate(0); }
  83% { transform: translate(140px,0) rotate(0); }
  85% { transform: translate(140px,0) rotate(0); }
  90%,100% { transform: translate(0,0) rotate(0); }
}
@keyframes heldBoxVisible {
  0%,7% { opacity:0; }
  8%,17% { opacity:1; }
  18%,41% { opacity:0; }
  42%,51% { opacity:1; }
  52%,75% { opacity:0; }
  76%,85% { opacity:1; }
  86%,100% { opacity:0; }
}
@keyframes pileTopFade { 0%,7% {opacity:1} 8%,100% {opacity:0} }
@keyframes pileMiddleFade { 0%,41% {opacity:1} 42%,100% {opacity:0} }
@keyframes pileBottomFade { 0%,75% {opacity:1} 76%,100% {opacity:0} }
@media (prefers-reduced-motion: reduce) {
  .animation-scene .worker,.animation-scene .held-box,
  .animation-scene .pile-top,.animation-scene .pile-middle,
  .animation-scene .pile-bottom { animation:none !important; }
}





/* Junk Deleters homepage hero refinements */
.hero .hero-brandline {
  white-space: nowrap;
  font-size: clamp(42px, 6vw, 82px);
  line-height: .98;
  letter-spacing: -3px;
  margin-bottom: 14px;
}
.hero .hero-deleters { color: #38251d !important; }
.hero h2 { margin-bottom: 16px; }
.hero > p { margin-bottom: 22px; }

/* Larger head-only Pac-Man mascot; all three cans begin visible. */
.animation-scene.deleter-scene {
  width: 100%;
  max-width: 760px;
  margin: 18px auto 0;
  overflow: hidden;
}
.animation-scene.deleter-scene svg {
  width: 100%;
  height: auto;
  display: block;
}
.deleter-scene .deleter-head {
  transform-box: view-box;
  animation: headTravel 10s linear infinite;
}
.deleter-scene .pac-mouth {
  transform-box: fill-box;
  transform-origin: left center;
  animation: pacChomp 10s linear infinite;
}
.deleter-scene .trash-can { opacity: 1; }
.deleter-scene .can-one { animation: eatCanOne 10s linear infinite; }
.deleter-scene .can-two { animation: eatCanTwo 10s linear infinite; }
.deleter-scene .can-three { animation: eatCanThree 10s linear infinite; }

/* The head reaches each can just as its mouth opens. */
@keyframes headTravel {
  0%   { transform: translate(35px, 96.5px); }
  100% { transform: translate(690px, 96.5px); }
}
@keyframes pacChomp {
  0%, 13.8%, 15.8%, 45.8%, 47.8%, 77.8%, 79.8%, 100% { transform: scaleY(.02); }
  14.8%, 46.8%, 78.8% { transform: scaleY(1.4); }
}
@keyframes eatCanOne {
  0%, 14.79% { opacity: 1; }
  14.8%, 100% { opacity: 0; }
}
@keyframes eatCanTwo {
  0%, 46.79% { opacity: 1; }
  46.8%, 100% { opacity: 0; }
}
@keyframes eatCanThree {
  0%, 78.79% { opacity: 1; }
  78.8%, 100% { opacity: 0; }
}
@media (max-width: 700px) {
  .hero .hero-brandline {
    white-space: normal;
    font-size: clamp(40px, 10.5vw, 60px);
    letter-spacing: -2px;
  }
  .animation-scene.deleter-scene {
    max-width: 100%;
    margin-top: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .animation-scene.deleter-scene * { animation: none !important; }
  .deleter-scene .trash-can { opacity: 1; }
  .deleter-scene .deleter-head { transform: translate(35px,96.5px); }
}


/* Intentional computer-command highlight for the homepage slogan */
.hero .command-slogan {
  display: table;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 18px !important;
  padding: 5px 11px 6px;
  background: #2457c5 !important;
  color: #fffaf0 !important;
  border-radius: 3px;
  font-size: clamp(16px, 2.5vw, 22px);
  font-weight: 900;
  letter-spacing: 1.4px;
  line-height: 1.25;
  box-shadow: 0 3px 0 rgba(56, 37, 29, .22);
}
@media (max-width: 520px) {
  .hero .command-slogan {
    padding: 6px 8px;
    letter-spacing: .7px;
    font-size: clamp(13px, 3.4vw, 17px);
  }
}