/* Deep Blu Pools & Power Washing: the look of the original deepblupools.com site on top of public/assets/css/site.css.
   Colors and fonts come from Settings → Branding. This file only restores the shark mascot floating free of the
   white logo tiles, the tilted "FREE" highlight and the wood-plank sign above the headline. */
:root { --wood: #9A6B45; --wood-700: #6E4A2C; }

/* The shark floats with a shadow instead of sitting on a white tile */
.hero-logo-tile, .about-logo, .gc-logo, .final-logo, .footer-logo, .thanks-logo { background: transparent; box-shadow: none; border-radius: 0; }
.hero-logo-tile img, .about-logo img, .gc-logo img, .final-logo img, .footer-logo img, .thanks-logo img { filter: drop-shadow(0 10px 14px rgba(14,38,56,.4)); }
.hero-logo-tile { padding: 0 6%; }
.hero-logo-tile img { animation: bob 6s ease-in-out infinite; }
.thanks-logo img { animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
.gc-logo { width: 110px; height: 110px; padding: 0; right: -8px; bottom: -40px; transform: rotate(10deg); }
.gc-logo img { filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.final-logo { width: 150px; height: 150px; padding: 0; }
.footer-logo { width: 120px; height: 120px; padding: 0; }

/* Header: the shark logo with the playful two-tone name */
.brand-logo { filter: drop-shadow(0 3px 4px rgba(14,38,56,.25)); transition: transform .3s; }
.brand:hover .brand-logo { transform: rotate(-6deg) scale(1.05); }
.brand-name { color: var(--sky); -webkit-text-stroke: 1px var(--navy); paint-order: stroke fill; letter-spacing: .02em; text-shadow: 0 2px 0 var(--navy); }
.brand-sub { font-weight: 900; color: var(--slate); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
@media (max-width: 430px) { .brand-sub { font-size: .56rem; letter-spacing: .04em; white-space: normal; line-height: 1.15; max-width: 9em; } }

/* The big tilted FREE in the headline */
.hl { display: inline-block; color: var(--sky); -webkit-text-stroke: 2px #fff; paint-order: stroke fill; transform: rotate(-3deg); text-shadow: 0 4px 0 var(--navy-900); }

/* Wood-plank sign above the headline */
.eyebrow-tag { background: linear-gradient(180deg, #A97A52, var(--wood) 60%, var(--wood-700)); border: 0; color: #FFF6EA; font-weight: 900; font-size: .88rem; letter-spacing: .02em; padding: .45em 1em; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.12), 0 3px 0 #4F331D; transform: rotate(-1.2deg); }
.eyebrow-tag .ico { color: #FFE2A8; }

@media (min-width: 960px) { .final-logo { width: 220px; height: 220px; } }
@media (prefers-reduced-motion: reduce) { .hero-logo-tile img, .thanks-logo img { animation: none; } .brand-logo { transition: none; } }