/* =========================================================
   HALLOWEEN THEME (home page only)
   Switch on:  <body class="page--dark halloween"> + this stylesheet in index.html
   Switch off: remove both. Full pre-Halloween page: backup/index.before-halloween.html
   ========================================================= */
.halloween {
  --night: #140b1f;
  --night-2: #2a1538;
  --pumpkin: #ff7a1a;
  --pumpkin-glow: #ffb347;
  --ghost: #f4ecff;
}

/* ===== Hero: night sky ===== */
.halloween .hero {
  background:
    radial-gradient(circle at 78% 22%, rgba(255,179,71,.22), transparent 32%),
    radial-gradient(circle at 15% 85%, rgba(122,58,160,.35), transparent 45%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 70%, #3a1d45 100%);
  color: var(--ghost);
}
.halloween .hero .eyebrow { color: var(--pumpkin); }
.halloween .hero h1 { color: var(--ghost); }
.halloween .hero h1 em {
  color: var(--pumpkin);
  text-shadow: 0 0 18px rgba(255,122,26,.55), 0 0 42px rgba(255,122,26,.3);
  animation: hwFlicker 4.5s infinite;
}
.halloween .hero .lead { color: rgba(244,236,255,.78); }
.halloween .hero .btn { background: var(--pumpkin); border-color: var(--pumpkin); color: var(--night); }
.halloween .hero .btn--ghost { background: transparent; color: var(--ghost); border-color: rgba(244,236,255,.55); }
.halloween .hero__spices .spice { background: var(--pumpkin) !important; opacity: .35; }
.halloween .hero__spices .s2, .halloween .hero__spices .s4 { background: #9b5cc4 !important; }
.halloween .steam path { stroke: rgba(244,236,255,.45); }
.halloween .plate { box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 10px rgba(255,255,255,.08), 0 0 70px rgba(255,122,26,.25); }
.halloween .plate__tag { background: var(--night); box-shadow: 0 10px 30px -8px rgba(0,0,0,.6), 0 0 0 1px rgba(255,122,26,.4); }
.halloween .plate__tag span { color: var(--pumpkin); }
.halloween .hero__logo { filter: drop-shadow(0 0 24px rgba(255,122,26,.5)); }

/* ===== Marquee ===== */
.halloween .marquee { background: var(--pumpkin); color: var(--night); }
.halloween .marquee i { color: var(--night); }

/* ===== Decorations ===== */
.spooky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.halloween .hero__copy, .halloween .hero__art { position: relative; z-index: 1; }

.spooky__moon {
  position: absolute; top: 13%; left: 42%; width: 130px; height: 130px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d8 0%, #ffe3a3 45%, #f2c46b 100%);
  box-shadow: 0 0 60px 18px rgba(255,214,130,.35), 0 0 140px 40px rgba(255,179,71,.15);
  opacity: .9;
}
.spooky__moon::before, .spooky__moon::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(214,160,70,.35);
}
.spooky__moon::before { width: 26px; height: 26px; top: 38px; left: 44px; }
.spooky__moon::after { width: 16px; height: 16px; top: 76px; left: 80px; }

.spooky__web { position: absolute; top: 0; left: 0; width: 230px; color: rgba(244,236,255,.18); }

/* The thread starts well above the top edge, so its end never shows while the spider bobs */
.spooky__spider { position: absolute; top: -260px; left: calc(42% + 48px); z-index: 2; display: flex; flex-direction: column; align-items: center; animation: hwDangle 6s ease-in-out infinite; transform-origin: top center; }
.spooky__thread { width: 1px; height: 470px; background: linear-gradient(rgba(244,236,255,.15), rgba(244,236,255,.45)); }
.spooky__spider svg { width: 34px; color: #0b0610; margin-top: -2px; }

.spooky__bat { position: absolute; color: #0b0610; filter: drop-shadow(0 0 6px rgba(255,179,71,.25)); animation: hwFly 16s linear infinite, hwFlap .32s ease-in-out infinite alternate; }
.spooky__bat.b1 { top: 18%; width: 64px; animation-delay: 0s, 0s; }
.spooky__bat.b2 { top: 30%; width: 44px; animation-duration: 21s, .28s; animation-delay: -7s, 0s; }
.spooky__bat.b3 { top: 10%; width: 36px; animation-duration: 25s, .36s; animation-delay: -14s, 0s; }
.spooky__bat.b4 { top: 42%; width: 52px; animation-duration: 19s, .3s; animation-delay: -3s, 0s; }

.spooky__ghost { position: absolute; color: var(--ghost); opacity: .85; filter: drop-shadow(0 0 14px rgba(244,236,255,.45)); animation: hwFloat 7s ease-in-out infinite; }
.spooky__ghost.g1 { width: 60px; left: 4%; top: 58%; }
.spooky__ghost.g2 { width: 44px; left: 52%; top: 72%; animation-duration: 9s; animation-delay: -3s; opacity: .7; }

.spooky__pumpkin { position: absolute; bottom: 3%; filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); }
.spooky__pumpkin.p1 { width: 92px; left: 38%; }
.spooky__pumpkin.p2 { width: 70px; right: 3%; bottom: 5%; }
.spooky__glow { animation: hwCandle 1.6s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px #ffb347); }

.spooky__fog {
  position: absolute; left: -20%; right: -20%; bottom: -40px; height: 170px;
  background: radial-gradient(ellipse at 30% 60%, rgba(220,205,240,.22), transparent 60%),
              radial-gradient(ellipse at 75% 50%, rgba(220,205,240,.18), transparent 60%);
  filter: blur(8px); animation: hwFog 18s ease-in-out infinite alternate;
}
.spooky__fog.f2 { bottom: -60px; opacity: .7; animation-duration: 26s; animation-direction: alternate-reverse; }

/* ===== Keyframes ===== */
@keyframes hwFly { from { left: -10%; transform: translateY(0); } 25% { transform: translateY(-30px); } 50% { transform: translateY(15px); } 75% { transform: translateY(-20px); } to { left: 110%; transform: translateY(0); } }
@keyframes hwFlap { from { scale: 1 1; } to { scale: 1 .45; } }
@keyframes hwFloat { 0%, 100% { translate: 0 0; } 50% { translate: 10px -24px; } }
@keyframes hwDangle { 0%, 100% { transform: translateY(-30px) rotate(-1.5deg); } 50% { transform: translateY(30px) rotate(1.5deg); } }
@keyframes hwDangleSm { 0%, 100% { transform: translateY(-10px) rotate(-3deg); } 50% { transform: translateY(12px) rotate(3deg); } }
@keyframes hwCandle { from { opacity: .7; } to { opacity: 1; } }
@keyframes hwFog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
@keyframes hwFlicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .55; } 94% { opacity: 1; } 96% { opacity: .7; } }

/* ===== Lower sections: small Halloween touches ===== */
.halloween main > .section, .halloween main > .promise { position: relative; overflow: hidden; }

/* Bat above each section heading */
.halloween main .section__head .eyebrow::before {
  content: ""; display: block; width: 46px; height: 20px; margin: 0 auto .5rem;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 28%22%3E%3Cpath fill=%22%233e2617%22 d=%22M32 9c1.5-3 3-4.5 3-4.5l1 4.2c4-3 13-6 27-6-6 3-8 8-7 13-4-3-9-3-11 1-2-2-5-3-8-2l-5 12-5-12c-3-1-6 0-8 2-2-4-7-4-11-1 1-5-1-10-7-13 14 0 23 3 27 6l1-4.2S30.5 6 32 9z%22/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hwBob 2.6s ease-in-out infinite;
}

/* Faint cobwebs in section corners (alternating sides) */
.halloween main > .section::after, .halloween main > .promise::after {
  content: ""; position: absolute; top: 0; right: 0; width: 170px; height: 170px; opacity: .22; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22%3E%3Cg fill=%22none%22 stroke=%22%23634029%22 stroke-width=%221.2%22 transform=%22translate%28200 0%29 scale%28-1 1%29%22%3E%3Cpath d=%22M0 0L200 60M0 0L150 150M0 0L60 200M0 0L200 0M0 0L0 200%22/%3E%3Cpath d=%22M40 0Q42 22 0 40M80 0Q84 50 0 80M125 0Q130 80 0 125M170 0Q176 112 0 170%22/%3E%3C/g%3E%3C/svg%3E") top right / contain no-repeat;
}
.halloween main > .section:has(#reviewPreview)::after, .halloween main > .section:has(.faq)::after { right: auto; left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 200%22%3E%3Cg fill=%22none%22 stroke=%22%23634029%22 stroke-width=%221.2%22%3E%3Cpath d=%22M0 0L200 60M0 0L150 150M0 0L60 200M0 0L200 0M0 0L0 200%22/%3E%3Cpath d=%22M40 0Q42 22 0 40M80 0Q84 50 0 80M125 0Q130 80 0 125M170 0Q176 112 0 170%22/%3E%3C/g%3E%3C/svg%3E"); background-position: top left; }

/* A little spider hanging into the favourites section */
.halloween main > .section:has(#favGrid)::before {
  content: ""; position: absolute; top: -24px; right: 12%; width: 30px; height: 144px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 40 120%22%3E%3Cpath d=%22M20 0V98%22 stroke=%22%23634029%22 stroke-opacity=%22.45%22 stroke-width=%221%22/%3E%3Cg transform=%22translate%280 80%29%22 %3E%3Cg stroke=%22%232a180d%22 stroke-width=%222%22 fill=%22none%22 stroke-linecap=%22round%22%3E%3Cpath d=%22M14 18L4 10M14 21L2 21M14 24L4 32M15 27L8 38M26 18L36 10M26 21L38 21M26 24L36 32M25 27L32 38%22/%3E%3C/g%3E%3Cellipse cx=%2220%22 cy=%2223%22 rx=%227.5%22 ry=%228.5%22 fill=%22%232a180d%22/%3E%3Ccircle cx=%2220%22 cy=%2213%22 r=%225%22 fill=%22%232a180d%22/%3E%3Ccircle cx=%2218%22 cy=%2212.5%22 r=%221.3%22 fill=%22%23ff8a1f%22/%3E%3Ccircle cx=%2222%22 cy=%2212.5%22 r=%221.3%22 fill=%22%23ff8a1f%22/%3E%3C/g%3E%3C/svg%3E") top center / contain no-repeat; transform-origin: top center;
  animation: hwDangleSm 5s ease-in-out infinite;
}

/* Friendly ghost peeking at the promise cards */
.halloween main > .promise::before {
  content: ""; position: absolute; left: 3%; bottom: 2.5rem; width: 54px; height: 64px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 60 72%22%3E%3Cpath fill=%22%23ffffff%22 stroke=%22%23e8dcf2%22 stroke-width=%222%22 d=%22M30 2C14 2 4 14 4 30v38l8-7 7 7 7-7 4 4 4-4 7 7 7-7 8 7V30C56 14 46 2 30 2z%22/%3E%3Cellipse cx=%2222%22 cy=%2228%22 rx=%224%22 ry=%226%22 fill=%22%233e2617%22/%3E%3Cellipse cx=%2238%22 cy=%2228%22 rx=%224%22 ry=%226%22 fill=%22%233e2617%22/%3E%3Cpath d=%22M22 42q8 7 16 0%22 stroke=%22%233e2617%22 stroke-width=%223%22 fill=%22none%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 6px 14px rgba(99,64,41,.25));
  animation: hwFloat 6s ease-in-out infinite;
}

/* Jack-o-lantern sitting on the contact card */
.halloween .contact { position: relative; overflow: visible; }
.halloween .contact::after {
  content: ""; position: absolute; right: 1.6rem; top: -44px; width: 70px; height: 63px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 72%22%3E%3Cpath fill=%22%234f7a3a%22 d=%22M38 10c0-6 3-9 8-10l2 4c-4 1-5 3-5 7z%22/%3E%3Cg fill=%22%23ff7a1a%22%3E%3Cellipse cx=%2240%22 cy=%2242%22 rx=%2220%22 ry=%2228%22/%3E%3Cellipse cx=%2224%22 cy=%2244%22 rx=%2218%22 ry=%2225%22/%3E%3Cellipse cx=%2256%22 cy=%2244%22 rx=%2218%22 ry=%2225%22/%3E%3C/g%3E%3Cg fill=%22%23ffd36b%22%3E%3Cpath d=%22M22 34l9 0-4.5-8zM49 34l9 0-4.5-8z%22/%3E%3Cpath d=%22M20 48q20 16 40 0l-6 2-3 5-4-4-4 5-4-5-4 4-3-5z%22/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 8px 14px rgba(0,0,0,.3));
  animation: hwWobble 4s ease-in-out infinite; transform-origin: bottom center;
}

/* Footer: row of pumpkins and a Halloween greeting */
.halloween .footer { position: relative; }
.halloween .footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 24px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 80 72%22%3E%3Cpath fill=%22%234f7a3a%22 d=%22M38 10c0-6 3-9 8-10l2 4c-4 1-5 3-5 7z%22/%3E%3Cg fill=%22%23ff7a1a%22%3E%3Cellipse cx=%2240%22 cy=%2242%22 rx=%2220%22 ry=%2228%22/%3E%3Cellipse cx=%2224%22 cy=%2244%22 rx=%2218%22 ry=%2225%22/%3E%3Cellipse cx=%2256%22 cy=%2244%22 rx=%2218%22 ry=%2225%22/%3E%3C/g%3E%3Cg fill=%22%23ffd36b%22%3E%3Cpath d=%22M22 34l9 0-4.5-8zM49 34l9 0-4.5-8z%22/%3E%3Cpath d=%22M20 48q20 16 40 0l-6 2-3 5-4-4-4 5-4-5-4 4-3-5z%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 26px 24px space no-repeat; background-repeat: space no-repeat; opacity: .9; padding: 0 1rem; box-sizing: border-box; background-origin: content-box;
}
.footer__boo { display: none; }
.halloween .footer__boo {
  display: block; text-align: center; margin: 0 0 1.6rem; font-family: "Kalam", cursive; font-size: 1.25rem; color: #c2410c;
}

@keyframes hwBob { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-5px) scaleY(.75); } }
@keyframes hwWobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

@media (max-width: 900px) {
  .halloween main > .section::after, .halloween main > .promise::after { width: 110px; height: 110px; }
  .halloween main > .section:has(#favGrid)::before { right: 6%; height: 110px; width: 24px; top: -20px; }
  .halloween main > .promise::before { display: none; }
  .halloween .contact::after { width: 54px; height: 49px; top: -34px; right: 1rem; }
}

/* Medium laptops: the left ghost would sit on the intro text */
@media (min-width: 901px) and (max-width: 1280px) {
  .spooky__ghost.g1 { display: none; }
}

/* ===== Phones ===== */
@media (max-width: 900px) {
  .spooky__moon { width: 52px; height: 52px; top: 82px; left: 5%; box-shadow: 0 0 30px 8px rgba(255,214,130,.3); }
  .spooky__moon::before { width: 10px; height: 10px; top: 13px; left: 15px; }
  .spooky__moon::after { width: 6px; height: 6px; top: 31px; left: 32px; }
  .spooky__web { width: 140px; }
  .spooky__spider { left: 90%; animation-name: hwDangleSm; }
  .spooky__thread { height: 380px; }
  .spooky__web { opacity: .7; }
  .spooky__bat.b3, .spooky__bat.b4 { display: none; }
  .spooky__ghost.g1 { top: 46%; width: 44px; }
  .spooky__ghost.g2 { display: none; }
  .spooky__pumpkin.p1 { width: 64px; left: 4%; bottom: 2%; }
  .spooky__pumpkin.p2 { width: 52px; }
}