body.rose-site {
  margin: 0;
  padding: 0;
  font-family: Jost, sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

.rose-site h1,
.rose-site h2,
.rose-site h3 {
  font-family: 'Cormorant Garamond', serif;
}

.rose-site a {
  text-decoration: none;
}

.rose-site button {
  cursor: pointer;
}

.rose-site button:disabled {
  cursor: not-allowed;
}

.rose-site :focus-visible {
  outline: 2px solid hsl(var(--primary));
  outline-offset: 5px;
}

.rose-skip {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 999999;
  padding: 12px;
  background: white;
  color: black;
}

.rose-skip:focus {
  top: 12px;
}

.rose-demo-label {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: #211a18ed;
  color: #fff;
  text-align: center;
  font: 12px/1.5 Jost, sans-serif;
  padding: 5px 12px;
  pointer-events: none;
}

.rose-site {
  padding-bottom: 30px !important;
}

.rose-site.admin-bar #rose-header {
  top: 32px;
}

#rose-header.rose-solid {
  background: hsl(var(--background) / .97);
  box-shadow: 0 1px 12px #0000000d;
  backdrop-filter: blur(12px);
}

#rose-header.rose-solid nav a,
#rose-header.rose-solid > div > button {
  color: hsl(var(--foreground));
}

#rose-header.rose-solid nav a:hover,
#rose-header nav a[aria-current=page] {
  color: hsl(var(--primary));
}

#rose-header.rose-solid nav a:last-child {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: transparent;
}

#rose-header .rose-logo {
  max-width: 190px;
  max-height: 86px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.rose-site footer .rose-logo {
  max-height: 100px;
  max-width: 180px;
}

#rose-header .rose-menu-open {
  max-height: 420px;
  opacity: 1;
  visibility: visible;
}

#rose-header .rose-menu-closed {
  visibility: hidden;
  pointer-events: none;
}

[data-rose-reveal] {
  opacity: 1;
}

.rose-motion [data-rose-reveal] {
  opacity: 0;
  transform: var(--rose-from, translateY(28px));
  transition:
    opacity .7s ease-out var(--rose-delay, 0s),
    transform .7s ease-out var(--rose-delay, 0s);
}

.rose-motion [data-rose-reveal].rose-visible {
  opacity: 1;
  transform: none;
}

.rose-bubble {
  animation: rose-bubble var(--rose-duration, 8s) ease-in-out
    var(--rose-bubble-delay, 0s) infinite;
  will-change: transform, border-radius;
}

@keyframes rose-bubble {
  0%,
  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    transform: translate(0, 0);
  }

  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    transform: translate(10px, -18px);
  }
}

.rose-service-card,
.rose-addon-card {
  transition:
    transform .3s ease-out,
    box-shadow .3s ease-out;
}

.rose-service-card img,
.rose-addon-card img {
  transition: transform .6s ease-out;
}

@media (hover: hover) {
  .rose-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 60px -10px hsl(var(--primary) / .15);
  }

  .rose-addon-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px -8px hsl(var(--primary) / .12);
  }

  .rose-service-card img:hover {
    transform: scale(1.04);
  }

  .rose-addon-card img:hover {
    transform: scale(1.05);
  }
}

.rose-selected {
  outline: 2px solid hsl(var(--primary));
  background: hsl(var(--primary) / .07) !important;
}

.rose-demo-panel {
  max-width: 680px;
  margin: 24px auto;
  padding: 24px;
  border: 1px solid hsl(var(--border));
  border-radius: 16px;
  background: hsl(var(--card));
}

.rose-demo-panel label {
  display: block;
  margin: 14px 0 6px;
}

.rose-demo-panel input,
.rose-demo-panel select {
  width: 100%;
  padding: 12px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--background));
}

.rose-demo-panel button {
  padding: 12px 24px;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  margin: 20px 8px 0 0;
}

.rose-status {
  margin-top: 16px;
  padding: 16px;
  background: hsl(var(--primary) / .1);
  border-radius: 12px;
}

@media (max-width: 782px) {
  .rose-site.admin-bar #rose-header {
    top: 46px;
  }
}

@media (max-width: 600px) {
  .rose-site.admin-bar #rose-header {
    top: 0;
  }

  #rose-header .rose-logo {
    max-width: 155px;
  }

  .rose-demo-label {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rose-site * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  [data-rose-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Equal-height service cards */
#rose-main .grid.grid-cols-1.gap-8 {
  grid-auto-rows: 1fr;
}

/* Consistent image area on mobile */
#rose-main article > div:first-child {
  position: relative;
  height: 220px;
  min-height: 0;
  overflow: hidden;
}

/* Prevent image dimensions from stretching the card */
#rose-main article > div:first-child > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Images fill the equal-height cards on desktop */
@media (min-width: 768px) {
  #rose-main article {
    min-height: 340px;
  }

  #rose-main article > div:first-child {
    height: auto;
    align-self: stretch;
  }
}

/* Light menu over the darkened hero image */
#rose-header:not(.rose-solid) nav[aria-label="Main navigation"] a:not(:last-child),
#rose-header:not(.rose-solid) > div > button {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Dark menu when the header has a light background */
#rose-header.rose-solid nav[aria-label="Main navigation"] a:not(:last-child),
#rose-header.rose-solid > div > button {
  color: hsl(var(--foreground));
  text-shadow: none;
}

/* Keep hover and active links readable */
#rose-header nav[aria-label="Main navigation"] a:not(:last-child):hover,
#rose-header nav[aria-label="Main navigation"] a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* Mobile menu has its own light background */
#rose-header nav[aria-label="Mobile navigation"] a:not(:last-child) {
  color: hsl(var(--foreground));
  text-shadow: none;
}

/* Smooth menu hover animation */
#rose-header nav[aria-label="Main navigation"] a {
  display: inline-block;
  transition:
    transform 0.25s ease,
    text-shadow 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

@media (hover: hover) {
  /* Slight zoom */
  #rose-header nav[aria-label="Main navigation"] a:hover {
    transform: scale(1.06);
  }

  /* Glow over the dark hero background */
  #rose-header:not(.rose-solid)
    nav[aria-label="Main navigation"] a:hover {
    text-shadow:
      0 0 8px rgba(255, 255, 255, 0.75),
      0 0 18px rgba(255, 255, 255, 0.4);
  }

  /* Soft shadow over the light header background */
  #rose-header.rose-solid
    nav[aria-label="Main navigation"] a:hover {
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
  }

  /* Extra glow for the Book Now button */
  #rose-header:not(.rose-solid)
    nav[aria-label="Main navigation"] a:last-child:hover {
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.3);
  }

  /* Raised shadow for Book Now on the light header */
  #rose-header.rose-solid
    nav[aria-label="Main navigation"] a:last-child:hover {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  #rose-header nav[aria-label="Main navigation"] a {
    transition: none;
    transform: none;
  }
}

/* Permanent glow over the dark hero */
#rose-header:not(.rose-solid) .rose-logo {
  filter:
    drop-shadow(0 0 5px rgba(255, 225, 180, 0.55))
    drop-shadow(0 0 12px rgba(255, 210, 155, 0.3));
}

/* Permanent shadow over the light header */
#rose-header.rose-solid .rose-logo {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.3));
}