/* The Royal Web Design – Halloween home page (index-h.html only). Loads after optimized-home.css + announcement.css. */
:root{--pumpkin:#e8742a;--pumpkin-bright:#f39a4a;--candle:#ffcf66}

/* Banner and accents in pumpkin orange */
.hw .announce{background:var(--pumpkin)}
.hw .announce-link:hover{background:#111;color:var(--candle)}
.hw .hero-content>p{color:var(--pumpkin-bright)}
.hw .hero h1 strong{color:var(--pumpkin-bright)}
.hw .hero-actions .btn:first-child{background:var(--pumpkin);color:#111}
.hw .hero-actions .btn:first-child:hover{background:#fff}
.hw .btn.hero-call{box-shadow:inset 0 0 0 1px var(--pumpkin)}
.hw .btn.hero-call:hover{background:var(--pumpkin)}
.hw .hero-dots button.active{background:var(--pumpkin)}
.hw .final-cta{background:var(--pumpkin)}

/* Pumpkin logo is wider than the plain R */
.hw .logo img{width:150px}
.hw .footer-grid>div:first-child img{width:170px}

/* Spider that drops from under the header, then sways */
.hw-spider{position:absolute;top:100%;right:41%;width:80px;height:170px;overflow:hidden;pointer-events:none;z-index:4}
.hw-swing{position:absolute;inset:0;transform-origin:50% 0;animation:hw-sway 5.5s ease-in-out 2.6s infinite}
.hw-drop{position:absolute;inset:0;animation:hw-drop 1.9s cubic-bezier(.25,1.35,.5,1) .7s both}
.hw-thread{position:absolute;left:50%;top:0;width:1px;height:118px;background:linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.6))}
.hw-spider svg{position:absolute;left:50%;top:110px;width:46px;height:46px;margin-left:-23px}
.hw-spider .body{fill:#0b0b0b;stroke:var(--gold);stroke-width:1.6}
.hw-spider .legs{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hw-spider .eyes{fill:var(--candle)}
@keyframes hw-drop{from{transform:translateY(-175px)}to{transform:translateY(0)}}
@keyframes hw-sway{0%,100%{transform:rotate(0)}30%{transform:rotate(3.5deg)}70%{transform:rotate(-3deg)}}

/* Night sky over the hero: cobweb, moon, bats */
.hw-sky{position:absolute;inset:0;z-index:2;pointer-events:none}
.hw-web{position:absolute;top:0;right:0;width:250px;height:250px;transform:scaleX(-1)}
.hw-web path{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.1}
.hw-moon{position:absolute;top:120px;right:12%;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fff3d1 0%,#f4d79a 55%,#e3b866 100%);box-shadow:0 0 70px 18px rgba(243,200,120,.28)}
.hw-bats{position:absolute;top:96px;right:calc(12% - 70px);width:290px;height:200px}
.hw-bats path{fill:#070707}

/* Phones and tablets: keep decorations clear of the headline */
@media(max-width:1050px){.hw-moon{width:110px;height:110px;top:70px;right:5%}.hw-bats{width:210px;height:150px;top:52px;right:calc(5% - 50px)}}
@media(max-width:800px){
  .hw-spider{right:auto;left:52%;height:130px}
  .hw-thread{height:82px}.hw-spider svg{top:74px;width:38px;height:38px;margin-left:-19px}
  .hw-moon{width:78px;height:78px;top:26px;right:18px}
  .hw-bats{width:150px;height:105px;top:14px;right:-14px}
  .hw-web{width:150px;height:150px}
  .hw .logo img{width:120px}
}
@media(max-width:560px){.hw-moon,.hw-bats{display:none}.hw-spider{left:auto;right:34px}}
@media(prefers-reduced-motion:reduce){.hw-swing,.hw-drop{animation:none}}