/* A single playful response, bounded to the photograph's existing artwork area. */
.photo-mount { --art-motion: nb-art-spin; --art-duration: 780ms; }
.gallery-item:nth-child(6n+4) .photo-mount,
.work-plate-2 .photo-mount,
.work-plate-4 .photo-mount { --art-motion: nb-art-bounce; --art-duration: 680ms; }
.gallery-item:nth-child(24n+12) .photo-mount,
.gallery-item:nth-child(24n+24) .photo-mount { --art-motion: nb-art-orbit; --art-duration: 820ms; }
@media (prefers-reduced-motion: no-preference) {
  .photo-mount.is-art-playing .photo-art::before {
    animation: var(--art-motion) var(--art-duration) cubic-bezier(.16, 1, .3, 1) both;
    will-change: transform;
  }
}
@keyframes nb-art-spin {
  0% { transform: rotate(0deg) scale(1); }
  48% { transform: rotate(245deg) scale(.92); }
  78% { transform: rotate(352deg) scale(.99); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes nb-art-bounce {
  0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
  28% { transform: translate(-3px, -8px) rotate(-5deg) scale(.94); }
  58% { transform: translate(4px, 3px) rotate(4deg) scale(.96); }
  80% { transform: translate(-1px, -2px) rotate(-1deg) scale(.99); }
}
@keyframes nb-art-orbit {
  0%, 100% { transform: rotate(0deg) scale(1); }
  35% { transform: rotate(18deg) scale(.94); }
  72% { transform: rotate(-7deg) scale(.98); }
}

/* Full-row light and clear state feedback for the native disclosures. */
.service-row, .faq-list details {
  position: relative;
  transition: background-color 180ms ease, border-color 180ms ease;
}
.service-row summary, .faq-list summary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-left: 24px;
  padding-right: 24px;
  transition: color 180ms ease;
}
.service-row summary::before, .faq-list summary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 82% 50%, #8cb7f27a 0%, #c9e0ff8c 48%, #e8f3ff33 78%);
  opacity: 0;
  transform: translateX(5%);
  transition: opacity 220ms ease, transform 350ms cubic-bezier(.16, 1, .3, 1);
}
.service-row .plus-icon, .faq-list .plus-icon {
  width: 44px;
  height: 44px;
  border: 1px solid #8fb3e5;
  border-radius: 50%;
  background: #e4f0ff;
  color: var(--blue);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 320ms cubic-bezier(.16, 1, .3, 1);
}
.service-row .plus-icon::before, .service-row .plus-icon::after,
.faq-list .plus-icon::before, .faq-list .plus-icon::after {
  width: 18px;
  left: 12px;
  top: 21px;
  height: 1.5px;
}
.service-row[open], .faq-list details[open] { background: #edf5ff; border-bottom-color: #91b5e5; }
.service-row[open] > summary, .faq-list details[open] > summary,
.service-row summary:focus-visible, .faq-list summary:focus-visible { color: var(--blue); }
.service-row[open] > summary::before, .faq-list details[open] > summary::before,
.service-row summary:focus-visible::before, .faq-list summary:focus-visible::before { opacity: 1; transform: none; }
.service-row[open] .plus-icon, .faq-list details[open] .plus-icon,
.service-row summary:focus-visible .plus-icon, .faq-list summary:focus-visible .plus-icon {
  color: white;
  background: var(--blue);
  border-color: var(--blue);
}
.service-content { padding-left: 24px; padding-right: 24px; padding-top: 22px; }
.faq-list details > p { padding-left: 24px; padding-right: 24px; padding-top: 20px; }
.service-row[open] .service-content, .faq-list details[open] > p { animation: nb-answer-in 260ms cubic-bezier(.16, 1, .3, 1) both; }
@keyframes nb-answer-in {
  from { opacity: .3; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) and (pointer: fine) {
  .service-row summary:hover, .faq-list summary:hover { color: var(--blue); }
  .service-row summary:hover::before, .faq-list summary:hover::before { opacity: 1; transform: none; }
  .service-row summary:hover .plus-icon, .faq-list summary:hover .plus-icon {
    color: white;
    background: var(--blue);
    border-color: var(--blue);
  }
  .service-row:not([open]) summary:hover .plus-icon,
  .faq-list details:not([open]) summary:hover .plus-icon { transform: rotate(90deg); }
}
@media (max-width: 700px) {
  .service-row summary, .faq-list summary { padding-left: 14px; padding-right: 14px; gap: 14px; }
  .service-content, .faq-list details > p { padding-left: 14px; padding-right: 14px; }
  .service-price { gap: 12px; }
  .service-row .plus-icon, .faq-list .plus-icon { width: 40px; height: 40px; }
  .service-row .plus-icon::before, .service-row .plus-icon::after,
  .faq-list .plus-icon::before, .faq-list .plus-icon::after { left: 10px; top: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo-art::before, .service-row[open] .service-content, .faq-list details[open] > p { animation: none !important; transform: none !important; }
  .service-row, .faq-list details,
  .service-row summary, .faq-list summary,
  .service-row summary::before, .faq-list summary::before,
  .service-row .plus-icon, .faq-list .plus-icon { transition: none !important; }
  .service-row .plus-icon, .faq-list .plus-icon { transform: none !important; }
}

/* Blue actions reverse to a light surface with a soft, offset blue glow. */
.button-blue, .gallery-booking .button {
  transition: background-color 220ms ease, color 220ms ease,
    border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}
.button-blue:is(:hover, :focus-visible),
.gallery-booking .button:is(:hover, :focus-visible) {
  background: #fff;
  color: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 11px 28px #0947b65c, 0 0 0 4px #8dbbfa70;
}
@media (prefers-reduced-motion: reduce) {
  .button-blue, .gallery-booking .button { transition: none; }
  .button-blue:is(:hover, :focus-visible),
  .gallery-booking .button:is(:hover, :focus-visible) { transform: none; }
}