.brand-mark {
  position: relative;
  width: 112px !important;
  height: 84px !important;
  padding: 8px 5px;
  justify-content: center !important;
  overflow: visible !important;
}

.brand-mark img {
  width: 92px !important;
  height: 68px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform-origin: center;
  opacity: 1;
}









.brand-mark.waw-logo-play 







@media (max-width: 760px) {
  .header-inner { min-height: 80px !important; }
  .brand-mark { width: 90px !important; height: 74px !important; padding: 7px; }
  .brand-mark img { width: 76px !important; height: 60px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-mark img, 
  .brand-mark img { opacity: 1; }
  
}

/* Animated home hero seahorse. */
.turtle-body img[src*="seahorse-original"] {
  animation: waw-seahorse-swim 3.4s ease-in-out infinite;
  filter: drop-shadow(0 22px 22px rgba(33,27,22,.16));
}

.turtle-mascot:has(img[src*="seahorse-original"]) {
  width: min(285px, 68vw);
}

@keyframes waw-seahorse-swim {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}

/* Warm, summery motion for the sun motif in the home hero. */
.hero-single-motif {
  transform-origin: center;
  animation: waw-summer-sun 8s linear infinite !important;
  will-change: transform, filter;
}

@keyframes waw-summer-sun {
  0% {
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 0 3px rgba(238,198,38,.24));
  }
  25% {
    transform: rotate(90deg) scale(1.07);
    filter: drop-shadow(0 0 11px rgba(238,198,38,.52));
  }
  50% {
    transform: rotate(180deg) scale(1);
    filter: drop-shadow(0 0 5px rgba(235,78,27,.30));
  }
  75% {
    transform: rotate(270deg) scale(1.07);
    filter: drop-shadow(0 0 13px rgba(238,198,38,.56));
  }
  100% {
    transform: rotate(360deg) scale(1);
    filter: drop-shadow(0 0 3px rgba(238,198,38,.24));
  }
}

@media (max-width: 700px) {
  .turtle-mascot:has(img[src*="seahorse-original"]) { width: 205px; }
}

/* Interactive green brand world on the About page. */
.about-art:has(.waw-identity-scene) {
  --identity-x: 0px;
  --identity-y: 0px;
  --identity-tilt: 0deg;
  overflow: hidden;
  isolation: isolate;
}

.about-art:has(.waw-identity-scene)::after {
  content: "";
  position: absolute;
  inset: 9%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11,157,74,.10), transparent 67%);
  animation: waw-identity-glow 3s ease-in-out infinite;
}

.about-art .waw-identity-scene {
  position: relative;
  z-index: 1;
  width: 96% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: contain;
  transform: translate(var(--identity-x), var(--identity-y)) rotate(var(--identity-tilt));
  transition: transform .22s cubic-bezier(.2,.8,.2,1), filter .25s;
  animation: waw-identity-float 4.2s ease-in-out infinite;
  filter: drop-shadow(0 18px 22px rgba(11,117,58,.13));
}

.about-art:has(.waw-identity-scene):hover .waw-identity-scene {
  filter: drop-shadow(0 24px 28px rgba(11,117,58,.22));
}

@keyframes waw-identity-float {
  0%, 100% { margin-top: 7px; }
  50% { margin-top: -7px; }
}

@keyframes waw-identity-glow {
  0%, 100% { transform: scale(.94); opacity: .5; }
  50% { transform: scale(1.06); opacity: 1; }
}

@media (max-width: 700px) {
  .about-art .waw-identity-scene { width: 108% !important; }
}

/* Keep the social row anchored to the same right edge as the footer logo. */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
}

.footer-brand > img,
.footer-brand > p,
.footer-brand .social-links {
  margin-right: 0;
  margin-left: auto;
}

.footer-brand .social-links {
  direction: rtl;
  width: 100%;
  justify-content: flex-start;
  transform: translateX(34px);
}

@media (max-width: 700px) {
  .footer-brand {
    align-items: flex-start;
    text-align: right;
  }

  .footer-brand > img,
  .footer-brand > p,
  .footer-brand .social-links {
    margin-right: 0;
    margin-left: auto;
  }

  .footer-brand .social-links {
    justify-content: flex-start;
    transform: translateX(22px);
  }
}

/* ── Logo: the wordmark draws itself in, stroke by stroke ── */
.brand-mark .waw-logo-svg {
  width: 92px !important;
  height: 68px !important;
  overflow: visible;
  display: block;
}

.waw-logo-svg .waw-letter {
  opacity: 1;
  transform-box: fill-box;
  transform-origin: 50% 60%;
}

/* each stroke waits its turn when play class is attached */
.brand-mark.waw-logo-play .waw-logo-svg .waw-letter {
  animation: waw-letter-in .62s cubic-bezier(.22,.7,.24,1) both;
  animation-delay: calc(var(--i) * .13s);
}

@keyframes waw-letter-in {
  from { opacity: 0; transform: translateY(6px) scale(.94); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* a slow breath once the whole mark has landed */
.brand-mark.waw-logo-play .waw-logo-svg {
  animation: waw-logo-breathe 6s 1.5s ease-in-out infinite;
}

@keyframes waw-logo-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}

.brand-mark:hover .waw-logo-svg .waw-letter {
  transition: transform .3s cubic-bezier(.22,.7,.24,1);
  transform: translateY(-1.5px);
}

@media (max-width: 760px) {
  .brand-mark .waw-logo-svg { width: 76px !important; height: 60px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .waw-logo-svg .waw-letter,
  .brand-mark.waw-logo-play .waw-logo-svg .waw-letter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .brand-mark.waw-logo-play .waw-logo-svg { animation: none !important; }
}