/* ═══════════════════════════════════════════════════════════════════════════
   💅 JOKE.CSS — the FABULOUS edition 💅
   Loaded AFTER style.css and overrides it. This file is the entire joke:
   delete the <link> and the site is back to normal. Nothing else was touched.
   Not for production. Obviously. Look at it.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --pink:#ff1493; --pink-hot:#ff69b4; --pink-deep:#c71585; --pink-pale:#ffd1ec;
  --lime:#adff2f; --gold:#ffd700; --cyan:#00ffff;

  /* hijack the real design tokens — every component turns pink for free */
  --blue:#ff1493; --blue-d:#c71585; --blue-deep:#8b0a50;
  --action:#ff69b4; --action-d:#ff1493; --action-ink:#ffffff;
  --accent:#ff1493; --accent-soft:rgba(255,20,147,.18);
  --ink:#8b0a50; --slate:#c71585; --line:#ffb6d9;
  --bg:#fff0f7; --bg-warm:#ffe4f1;
  --focus:rgba(255,20,147,.55);
  --shadow-sm:0 2px 0 var(--pink-hot),0 8px 20px rgba(255,20,147,.35);
  --shadow-md:0 6px 0 var(--pink-hot),0 20px 44px rgba(255,20,147,.45);
  --font:"Comic Sans MS","Chalkboard SE","Comic Neue",cursive;
}

/* ── the stage ────────────────────────────────────────────────────────────── */
body{
  font-family:var(--font)!important;
  background:linear-gradient(135deg,#ffe4f1,#ffd1ec,#ffc0e8,#ffd1ec,#ffe4f1)!important;
  background-size:400% 400%!important;
  animation:shimmy 14s ease infinite;
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ctext y='26' font-size='26'%3E💅%3C/text%3E%3C/svg%3E") 4 4, auto;
}
@keyframes shimmy{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* glitter overlay — pinned, never eats clicks */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 12% 22%,#fff,transparent),
    radial-gradient(2px 2px at 78% 8%,var(--gold),transparent),
    radial-gradient(3px 3px at 33% 71%,var(--cyan),transparent),
    radial-gradient(2px 2px at 61% 47%,#fff,transparent),
    radial-gradient(2px 2px at 88% 84%,var(--lime),transparent),
    radial-gradient(3px 3px at 5% 58%,var(--gold),transparent);
  animation:twinkle 2.2s steps(2) infinite;
}
@keyframes twinkle{0%,100%{opacity:.95}50%{opacity:.25}}

/* ── typography: rainbow, and shouting ────────────────────────────────────── */
h1,h2,h3{
  font-family:var(--font)!important;letter-spacing:0!important;
  background:linear-gradient(90deg,#ff1493,#ff8c00,#ffd700,#adff2f,#00ffff,#ff1493);
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:rainbow 4s linear infinite;
  text-shadow:none;
}
@keyframes rainbow{to{background-position:300% 0}}
h1::after{content:" 💖✨";-webkit-text-fill-color:initial}
h2::after{content:" 💅";-webkit-text-fill-color:initial}
.eyebrow{color:var(--pink)!important;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:.15}}
.eyebrow::before{content:"✨ "}
.eyebrow::after{content:" ✨"}

/* ── header ───────────────────────────────────────────────────────────────── */
.site-header{
  background:linear-gradient(90deg,#ff1493,#ff69b4,#ffd700,#ff69b4,#ff1493)!important;
  background-size:300% 100%;animation:rainbow 6s linear infinite;
  border-bottom:5px dashed var(--gold)!important;backdrop-filter:none!important;
}
.brand-aaa{color:#fff!important;text-shadow:2px 2px 0 var(--pink-deep),4px 4px 0 var(--gold);
  animation:wobble 1.6s ease-in-out infinite}
.brand-words{color:#fff!important}
.brand-ico{color:#fff!important;animation:spin 3.5s linear infinite;transform-origin:50% 50%}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.nav a{color:#fff!important;font-weight:800!important;text-shadow:1px 1px 0 var(--pink-deep)}
.nav a:hover{color:var(--gold)!important;transform:scale(1.25) rotate(-5deg);display:inline-block}

/* ── hero ─────────────────────────────────────────────────────────────────── */
.hero{
  background-image:linear-gradient(135deg,rgba(255,20,147,.88),rgba(255,105,180,.82),rgba(255,215,0,.7))!important;
  border-bottom:8px dotted var(--gold);
}
.hero h1{-webkit-text-fill-color:#fff!important;color:#fff!important;background:none!important;
  text-shadow:3px 3px 0 var(--pink-deep),6px 6px 0 var(--gold),9px 9px 18px rgba(0,0,0,.3);
  animation:wobble 3s ease-in-out infinite}
.hero .lede{color:#fff8fc!important;font-weight:700}
.hero .lede::after{content:" 💦🚿✨"}

/* ── buttons: enormous, bouncing, unmissable ──────────────────────────────── */
.btn{
  font-family:var(--font)!important;font-weight:900!important;
  border:4px solid var(--gold)!important;border-radius:999px!important;
  text-transform:uppercase;letter-spacing:.06em;
  box-shadow:0 5px 0 var(--pink-deep),0 12px 26px rgba(255,20,147,.5)!important;
}
.btn-primary,.btn-call{background:linear-gradient(180deg,#ff69b4,#ff1493)!important;color:#fff!important}
.btn-ghost{background:var(--gold)!important;color:var(--pink-deep)!important;border-color:var(--pink)!important}
.btn:hover{animation:boing .45s ease infinite;transform:none!important}
@keyframes boing{0%,100%{transform:translateY(0) rotate(-2deg) scale(1.05)}
                 50%{transform:translateY(-9px) rotate(2deg) scale(1.12)}}
.btn-call::before{content:"📞 "}
.btn-primary::after{content:" 💖"}

/* ── cards: tilted, because straight lines are boring ─────────────────────── */
.svc-card,.rev-card,.reviews,.form-card,.area-list{
  border:4px solid var(--pink)!important;border-radius:26px!important;
  background:#fff6fb!important;box-shadow:var(--shadow-md)!important;
}
.svc-card{transition:transform .25s}
.svc-card:nth-child(odd){transform:rotate(-2.2deg)}
.svc-card:nth-child(even){transform:rotate(2.2deg)}
.svc-card:hover{transform:rotate(0) scale(1.09)!important;border-color:var(--gold)!important;z-index:5}
.svc-name{font-weight:900!important;color:var(--pink-deep)!important}
.svc-name::before{content:"💖 "}
.stars,.gstars{color:var(--gold)!important;text-shadow:0 0 10px var(--gold);font-size:1.9rem!important}

/* ── the service-area map, but make it fashion ────────────────────────────── */
.area-map svg{border:5px solid var(--pink)!important;box-shadow:var(--shadow-md)!important}
.area-map a.cty:hover .cfill,.area-map a.cty.hl .cfill{
  fill:rgba(255,20,147,.45)!important;stroke:var(--gold)!important;stroke-width:2.5px!important}
.area-map a.cty:hover text,.area-map a.cty.hl text{fill:var(--pink-deep)!important}
.area-list a:hover,.area-list a.hl{background:var(--pink-pale)!important}
.area-list .al-name{color:var(--pink-deep)!important}
.area-list .al-ar{color:var(--pink)!important;font-size:1.5rem!important}
.al-zone{background:linear-gradient(90deg,#ff1493,#ffd700)!important;color:#fff!important}

/* ── forms ────────────────────────────────────────────────────────────────── */
input,select,textarea{
  font-family:var(--font)!important;border:3px solid var(--pink)!important;
  border-radius:18px!important;background:#fff!important}
input:focus,select:focus,textarea:focus{
  outline:4px solid var(--gold)!important;box-shadow:0 0 22px var(--pink-hot)!important}

/* ── footer sign-off ──────────────────────────────────────────────────────── */
.site-footer{background:linear-gradient(90deg,#ff1493,#c71585)!important;color:#fff!important;
  border-top:6px dashed var(--gold)!important}
.site-footer a{color:var(--gold)!important}
.site-footer::after{
  content:"💖 plumbing, but make it FABULOUS 💖";
  display:block;text-align:center;padding:20px;font-size:1.3rem;font-weight:900;color:var(--gold);
  text-shadow:2px 2px 0 var(--pink-deep);animation:wobble 2s ease-in-out infinite}

/* ── mercy ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .btn:hover{animation:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   🗺️💖 THE PINK MAP
   The SVG is generated with inline fill/stroke presentation attributes, and CSS
   beats presentation attributes — so the whole basemap can be repainted from
   here by matching the generator's exact emitted colours. gen-area-map-v2.py is
   NOT touched; this is pure override. Every value below is one the generator
   writes, so if it ever changes palette these selectors simply stop matching.
   ═══════════════════════════════════════════════════════════════════════════ */

/* water: the Atlantic and Biscayne Bay go full flamingo */
.area-map svg rect[fill="#d7ecf6"]{fill:#ff85c8!important}
/* the soft tint inside the service boundary */
.area-map svg path[fill="rgba(0,181,244,.05)"]{fill:rgba(255,215,0,.22)!important}
/* land — mainland and every island */
.area-map svg path[fill="#ffffff"]{fill:#fff0f7!important;stroke:#c71585!important;stroke-width:1.1!important}
/* streets, quietly pink */
.area-map svg g[stroke="#dde6ec"]{stroke:#ffc9e6!important}
.area-map svg g[stroke="#cfdbe3"]{stroke:#ffb0dc!important}
/* freeway casing + ribbons */
.area-map svg g[stroke="#f2f8fb"]{stroke:#fff!important}
.area-map svg g[stroke="#b0c4d0"]{stroke:#ff1493!important}
.area-map svg g[stroke="#c1d1db"]{stroke:#ff69b4!important}
/* causeways in gold — they're the glamorous bit, they get gold */
.area-map svg g[stroke="#bacbd5"]{stroke:#ffd700!important;stroke-width:3!important}
/* the service boundary: fat gold dashes that march */
.area-map svg path[stroke="#0a6f92"]{
  stroke:#ffd700!important;stroke-width:3.4!important;opacity:1!important;
  stroke-dasharray:10 8!important;animation:march 1.1s linear infinite}
@keyframes march{to{stroke-dashoffset:-18}}
/* HQ pin — gold, and it throbs */
.area-map svg circle[fill="#00b5f4"]{fill:#ffd700!important;stroke:#c71585!important;
  transform-box:fill-box;transform-origin:center;animation:throb 1.3s ease-in-out infinite}
.area-map svg circle[fill="#053040"]{fill:#ff1493!important}
@keyframes throb{0%,100%{transform:scale(1)}50%{transform:scale(1.45)}}
/* place labels */
.area-map svg text[fill="#10222f"]{fill:#8b0a50!important;font-family:var(--font)!important}
/* water + landmark labels */
.area-map svg text[fill="#8aa2b1"],
.area-map svg text[fill="#8fb6c9"]{fill:#fff!important}
.area-map svg text[fill="#7fa3b6"]{fill:#fff!important;font-weight:800!important}
.area-map svg text[fill="#7e94a3"]{fill:#ffe9f5!important}
.area-map svg text[fill="#05678a"]{fill:#ffd700!important}
/* the halo behind every label is white in the generator — make it pink-proof */
.area-map svg text{paint-order:stroke;stroke:#fff0f7!important;stroke-width:3.6px!important}