/* ============================================================
   HALLOWEEN — October only (inc/halloween.php switches it).
   Loads after every other sheet and only re-colors and decorates.
   Delete this file's <link> and the site is back to one ink.
   Bone paper, night-purple ink, pumpkin orange. Contrast checked:
   fg-3 on paper-3 4.95:1, night on pumpkin 5.84:1.
   ============================================================ */

html.hw {
  --paper:     #FBF5EC;
  --paper-2:   #F5EBDD;
  --paper-3:   #ECDFCC;
  --ink:       #1E1329;
  --fg:        #1E1329;
  --fg-2:      #4A4152;
  --fg-3:      #645B66;
  --on-ink:    #FBF5EC;
  --on-ink-2:  rgba(251, 245, 236, 0.74);
  --rule:      #1E1329;
  --rule-thin: #E9DCC9;
  --rule-mid:  #D3C2A8;
  --rule-inv:  rgba(251, 245, 236, 0.22);

  --pumpkin:     #F26B1D;
  --pumpkin-ink: #B4470B;   /* orange that's dark enough for text on bone */
  --glow:        #FFC93C;
  --night:       #1E1329;
  --night-2:     #2B1C3B;
  --spook: 'Creepster', var(--display);
}

.hw ::selection { background: var(--pumpkin); color: var(--night); }

/* ---------- buttons go pumpkin ---------- */
.hw .btn { background: var(--pumpkin); color: var(--night); border-color: var(--night); }
.hw .btn:hover { background: var(--night); color: var(--pumpkin); }
.hw .btn--ghost { background: transparent; color: var(--night); border-color: var(--night); }
.hw .btn--ghost:hover { background: var(--pumpkin); color: var(--night); }
.hw .btn--on-ink { background: var(--pumpkin); color: var(--night); border-color: var(--pumpkin); }
.hw .btn--on-ink:hover { background: transparent; color: var(--pumpkin); }
.hw .hd__book:hover { background: var(--pumpkin); color: var(--night); }

/* ---------- section labels get a bat instead of a hairline ---------- */
.hw .tag::before {
  width: 2.3em; height: 0.95em;
  background: var(--pumpkin);
  -webkit-mask: url(/images/halloween/bat.svg?v=1) center / contain no-repeat;
          mask: url(/images/halloween/bat.svg?v=1) center / contain no-repeat;
}
.hw .dark .tag::before { background: var(--pumpkin); }

/* ---------- little orange touches ---------- */
.hw .nav__a:hover, .hw .nav__a.is-on { border-bottom: 2px solid var(--pumpkin); }
.hw .hero h1 .serif, .hw .ph h1 .serif { color: var(--pumpkin-ink); }
.hw .dark .serif { color: var(--pumpkin); }
.hw .row a:hover { background: #FCE6D3; }
.hw .row__n { color: var(--pumpkin-ink); }
.hw .rv__stars { color: var(--pumpkin); }
.hw .promise__n, .hw .steps__n {
  font-family: var(--spook); font-weight: 400; letter-spacing: 0.02em; color: var(--pumpkin);
}
.hw .promise__n { color: var(--pumpkin-ink); }
.hw .ft__tel, .hw .cta.dark .cta__tel { color: var(--pumpkin); }
.hw :is(.ctal__more, .jb__all, .rv__links a, .findus__links a, .jobs__s, .bk__alt a) { border-bottom-color: var(--pumpkin); }
.hw .areas__all a span { border-bottom-color: var(--pumpkin); }

/* ---------- the banner ---------- */
.hw-bar { background: var(--night); color: var(--on-ink); position: relative; z-index: 101; }
.hw-bar__in { display: flex; align-items: center; gap: 0.4rem 1rem; min-height: 46px; }
.hw-bar__pk {
  flex: none; width: 34px; height: 34px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  animation: hw-wobble 3.2s ease-in-out infinite;
}
.hw-bar__pk svg { width: 100%; height: 100%; }
.hw-bar__t {
  font-family: var(--spook); font-size: 1.35rem; line-height: 1; letter-spacing: 0.04em;
  color: var(--pumpkin);
}
.hw-bar__t span { color: var(--on-ink); }
.hw-bar__a {
  gap: 0.5em; margin-left: auto; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-ink-2); white-space: nowrap;
}
.hw-bar__a strong { color: var(--glow); letter-spacing: 0.04em; font-size: 0.85rem; }
.hw-bar__a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .hw-bar__a { display: none; }
  .hw-bar__in { justify-content: center; min-height: 40px; }
  .hw-bar__pk { width: 28px; height: 28px; }
  .hw-bar__t { font-size: 1.1rem; }
}
@media (max-width: 380px) { .hw-bar__t span { display: none; } }

/* ---------- jack-o'-lanterns: lit faces that flicker; tap one to blow it out ---------- */
.hw-face { fill: var(--glow); }
.hw-pk { overflow: visible; cursor: pointer; }
.hw-pk .hw-face { animation: hw-flicker 2.6s steps(1) infinite; }
.hw-pk.is-out .hw-face { fill: #3A1A08; animation: none; filter: none; }
@keyframes hw-flicker {
  0%, 100% { filter: drop-shadow(0 0 3px #FFB020); opacity: 1; }
  41%      { filter: drop-shadow(0 0 1px #FFB020); opacity: 0.82; }
  43%      { filter: drop-shadow(0 0 4px #FFB020); opacity: 1; }
  72%      { filter: drop-shadow(0 0 2px #FFB020); opacity: 0.9; }
}
@keyframes hw-wobble {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

/* ---------- the header drips ---------- */
.hw .hd { border-bottom: 0; }
.hw .hd::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 24px;
  background: url(/images/halloween/drip.svg?v=2) 0 0 / 180px 24px repeat-x;
  pointer-events: none;
}

/* ---------- a spider hanging off the header ---------- */
.hw-spider {
  position: absolute; top: 100%; right: clamp(5rem, 22vw, 22rem); z-index: 98;
  width: 30px; height: 46px;
  pointer-events: none;
  animation: hw-dangle 4.5s ease-in-out infinite alternate;
}
.hw-spider::before {   /* the thread */
  content: ''; position: absolute; left: 50%; top: 0; bottom: 18px; width: 1px;
  background: rgba(120, 108, 132, 0.85);
}
.hw-spider svg { position: absolute; left: 0; bottom: 0; width: 30px; height: 25px; filter: drop-shadow(0 0 1px rgba(255, 245, 230, 0.9)); }
.hw-spider.is-up { animation: hw-climb 2.8s ease-in-out forwards; }
@media (hover: hover) { .hw-spider { pointer-events: auto; cursor: pointer; } }
@keyframes hw-dangle { from { height: 44px; } to { height: 96px; } }
@keyframes hw-climb { 0% { height: 80px; } 25%, 70% { height: 20px; } 100% { height: 60px; } }
@media (max-width: 960px) { .hw-spider { right: 5.5rem; transform: scale(0.85); transform-origin: top center; } }

/* ---------- cobwebs in the corners of photos and page banners ---------- */
.hw .hero__photo, .hw .danny__plate, .hw .ph { position: relative; }
.hw .hero__photo::after, .hw .danny__plate::after, .hw .ph::after {
  content: ''; position: absolute; z-index: 2; pointer-events: none;
  width: clamp(70px, 9vw, 110px); aspect-ratio: 1;
  -webkit-mask: url(/images/halloween/web.svg?v=1) 0 0 / 100% 100% no-repeat;
          mask: url(/images/halloween/web.svg?v=1) 0 0 / 100% 100% no-repeat;
}
/* top-right of Dan's photo, white so it reads on the picture */
.hw .hero__photo::after { top: 8px; right: 8px; transform: scaleX(-1); background: rgba(255, 255, 255, 0.85); filter: drop-shadow(0 0 1px rgba(0,0,0,0.5)); }
.hw .danny__plate::after { top: 10px; left: 10px; background: rgba(255, 255, 255, 0.8); filter: drop-shadow(0 0 1px rgba(0,0,0,0.5)); }
/* page banners: grey web in the top-right corner of the page */
.hw .ph { overflow: hidden; }
.hw .ph::after { top: 0; right: 0; transform: scaleX(-1); width: clamp(90px, 14vw, 180px); background: var(--rule-mid); }

/* a pumpkin sitting on the hero line, beside Dan */
.hw .hero__photo::before {
  content: ''; position: absolute; z-index: 2; bottom: 0; left: -74px;
  width: 62px; height: 57px;
  background: url(/images/halloween/pumpkin.svg?v=1) center bottom / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(255, 176, 32, 0.45));
  animation: hw-glow 2.6s steps(1) infinite;
}
@keyframes hw-glow {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(255, 176, 32, 0.5)); }
  41%      { filter: drop-shadow(0 0 2px rgba(255, 176, 32, 0.3)); }
  72%      { filter: drop-shadow(0 0 5px rgba(255, 176, 32, 0.45)); }
}
@media (max-width: 520px) {
  .hw .hero__photo::before { left: auto; right: 14px; bottom: 54px; width: 54px; height: 50px; }
  /* Dan and Dave fill the right side of their photo; the truck's tailgate corner is free */
  .hw .hero__photo--team::before { right: auto; left: 16px; }
}

/* ---------- dark sections become a night sky ---------- */
.hw .dark { background-color: var(--night); }
.hw :is(.how, .danny, .ft, .cta.dark, .vals) {
  background-image:
    radial-gradient(1.4px 1.4px at 22px 34px, rgba(255,255,255,0.75), transparent 70%),
    radial-gradient(1px 1px at 96px 120px, rgba(255,255,255,0.55), transparent 70%),
    radial-gradient(1.6px 1.6px at 170px 62px, rgba(255,240,200,0.7), transparent 70%),
    radial-gradient(1px 1px at 240px 180px, rgba(255,255,255,0.5), transparent 70%),
    radial-gradient(1.2px 1.2px at 58px 220px, rgba(255,255,255,0.6), transparent 70%),
    radial-gradient(1px 1px at 300px 26px, rgba(255,255,255,0.45), transparent 70%),
    radial-gradient(1.3px 1.3px at 200px 280px, rgba(255,255,255,0.55), transparent 70%);
  background-size: 330px 310px;
}
/* a moon over the "who you get" section */
.hw .danny { position: relative; overflow: hidden; }
.hw .danny::before {
  content: ''; position: absolute; top: clamp(1.5rem, 4vw, 3rem); right: clamp(1.5rem, 6vw, 6rem);
  width: clamp(54px, 7vw, 90px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF6D8, #F3DFA6 70%);
  box-shadow: 0 0 40px 10px rgba(255, 230, 160, 0.22);
}
.hw .danny__in { position: relative; z-index: 1; }

/* ---------- the graveyard above the footer ---------- */
.hw-yard {
  position: relative; overflow: hidden;
  height: clamp(175px, 18vw, 225px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 34C140 10 260 8 420 26S700 52 860 30 1100 6 1200 22V60H0z' fill='%231E1329'/%3E%3C/svg%3E") bottom / 100% 46px no-repeat,
    radial-gradient(1.3px 1.3px at 40px 30px, rgba(255,255,255,0.7), transparent 70%) 0 0 / 280px 140px,
    radial-gradient(1px 1px at 190px 80px, rgba(255,255,255,0.5), transparent 70%) 0 0 / 280px 140px,
    radial-gradient(1.5px 1.5px at 120px 18px, rgba(255,240,200,0.65), transparent 70%) 0 0 / 280px 140px,
    linear-gradient(transparent calc(100% - 20px), var(--night) 0),
    linear-gradient(#3A2550, var(--night-2) 70%);
  border-top: 1.5px solid var(--night);
}
.hw .hw-yard + .ft { border-top: 0; }
.hw-moon {
  position: absolute; top: 18px; right: 9%;
  width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF6D8, #F3DFA6 70%);
  box-shadow: 0 0 36px 8px rgba(255, 230, 160, 0.25);
}
.hw-moon::after {   /* a bat across the moon */
  content: ''; position: absolute; left: -16px; top: 18px; width: 34px; height: 15px;
  background: var(--night);
  -webkit-mask: url(/images/halloween/bat.svg?v=1) center / contain no-repeat;
          mask: url(/images/halloween/bat.svg?v=1) center / contain no-repeat;
}
.hw-yard__in {
  position: relative; height: 100%;
  display: flex; align-items: flex-end; justify-content: space-around; gap: 0.5rem;
  padding-bottom: 14px;
}
.hw-stone {
  position: relative; flex: none; cursor: pointer;
  width: clamp(64px, 8vw, 92px); height: clamp(74px, 9vw, 104px);
  border-radius: 50% 50% 4px 4px / 42% 42% 4px 4px;
  background: linear-gradient(160deg, #6B5B7E, #4A3D5C 60%, #3B3049);
  box-shadow: inset -5px -4px 0 rgba(0,0,0,0.18);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0.6rem 0.35rem 0.4rem; text-align: center;
  transform: rotate(-3deg); transform-origin: bottom center;
  transition: transform .25s;
}
.hw-stone:nth-of-type(2n) { transform: rotate(4deg); }
.hw-stone:nth-of-type(3n) { transform: rotate(-1deg); }
.hw-stone::before {
  content: 'RIP'; font-family: var(--spook); font-size: clamp(1.05rem, 1.6vw, 1.4rem); line-height: 1;
  color: #D8CFE4; letter-spacing: 0.06em;
}
.hw-stone::after {
  content: attr(data-rip); margin-top: 0.3rem;
  font-family: var(--display); font-weight: 700; font-size: clamp(0.5rem, 0.8vw, 0.62rem);
  line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: #C9BEDA;
}
.hw-stone--tall { height: clamp(88px, 10.5vw, 124px); }
.hw-stone--cross { border-radius: 6px 6px 4px 4px; }
.hw-stone:hover { transform: rotate(0) translateY(-2px); }
/* hover or tap a stone and a ghost comes up out of it */
.hw-stone__ghost {
  position: absolute; left: 50%; bottom: 100%;
  width: 58%; aspect-ratio: 80 / 96;
  background: url(/images/halloween/ghost.svg?v=1) center / contain no-repeat;
  transform: translate(-50%, 70%) scale(0.6); opacity: 0;
  transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .2s;
}
.hw-stone:hover .hw-stone__ghost, .hw-stone.is-boo .hw-stone__ghost { transform: translate(-50%, -2px); opacity: 1; }
.hw-pk--yard { width: clamp(40px, 5vw, 58px); flex: none; margin-bottom: -4px; }
@media (max-width: 640px) {
  .hw-yard__in > .hw-stone:nth-of-type(4), .hw-yard__in > .hw-stone:nth-of-type(5),
  .hw-yard__in > .hw-pk--yard:last-of-type { display: none; }
  .hw-moon { width: 44px; height: 44px; right: 6%; }
}

/* ---------- mobile call bar ---------- */
.hw .callbar { background: var(--night); border-top: 3px solid var(--pumpkin); }
.hw .callbar__n { color: var(--pumpkin); }

/* ---------- things added by halloween.js ---------- */
.hw-sky { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.hw-bat {
  position: absolute; left: 0; top: var(--y); width: var(--s);
  transform: translateX(-140px);
  animation: hw-fly var(--d) linear var(--delay) infinite;
}
.hw-bat svg { display: block; width: 100%; fill: var(--night); filter: drop-shadow(0 0 1px rgba(255, 245, 230, 0.7)); animation: hw-flap .17s ease-in-out infinite alternate; }
@keyframes hw-flap { from { transform: scaleY(1); } to { transform: scaleY(0.3); } }
@keyframes hw-fly {
  0%        { transform: translate(-140px, 0); }
  9%        { transform: translate(25vw, -40px); }
  18%       { transform: translate(50vw, 14px); }
  27%       { transform: translate(75vw, -26px); }
  36%, 100% { transform: translate(calc(100vw + 140px), 0); }
}
/* bats let out of the banner pumpkin */
.hw-burst { position: fixed; z-index: 120; width: 34px; pointer-events: none; }
.hw-burst svg { filter: drop-shadow(0 0 1px rgba(255, 245, 230, 0.7)); }
.hw-burst svg { display: block; width: 100%; fill: var(--night); animation: hw-flap .15s ease-in-out infinite alternate; }
.hw-burst--light svg { fill: var(--pumpkin); }

/* the ghost that peeks in from the right edge (desktop only) */
.hw-ghost {
  position: fixed; right: 0; bottom: 7.5rem; z-index: 150;
  width: 64px; height: 77px; padding: 0; border: 0; background: none; cursor: pointer;
  transform: translateX(62%) rotate(-12deg);
  transition: transform .45s cubic-bezier(.2, 1.3, .4, 1);
}
.hw-ghost img { width: 100%; height: 100%; animation: hw-bob 2.4s ease-in-out infinite; }
.hw-ghost:hover, .hw-ghost.is-out { transform: translateX(-16px) rotate(0); }
.hw-ghost:focus-visible { outline-offset: 4px; }
@keyframes hw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hw-boo {
  position: fixed; right: 92px; bottom: 9.5rem; z-index: 150;
  background: var(--paper); color: var(--fg); border: 1.5px solid var(--night);
  padding: 0.75rem 1rem; box-shadow: 5px 5px 0 var(--pumpkin);
  font-size: 0.9rem; line-height: 1.4; max-width: 15rem;
}
.hw-boo b { display: block; font-family: var(--spook); font-weight: 400; font-size: 1.6rem; line-height: 1; color: var(--pumpkin-ink); letter-spacing: 0.04em; }
.hw-boo a { font-weight: 800; border-bottom: 2px solid var(--pumpkin); }
@media (max-width: 960px) { .hw-ghost, .hw-boo { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .hw-sky, .hw-burst, .hw-ghost, .hw-boo { display: none; }
  .hw-spider { animation: none; height: 60px; }
}