:root {
  --brand-pink: #d64688;
  --brand-dark: #222222;
  --brand-grey: #6b6b6b;
  --brand-soft: #f7f1f7;
  --brand-white: #ffffff;
  --card-bg: rgba(255,255,255,0.95);
  --shadow-strong: 0 24px 60px rgba(34, 34, 34, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--brand-dark);
  background: linear-gradient(180deg, #faf5fb 0%, #f4edf6 100%);
}

/* backdrop-filter lives on a pseudo-element, not on .u-header itself:
   filter/backdrop-filter on an element creates a new containing block for
   any position:fixed descendant. The mobile off-canvas menu panel
   (.u-nav-container-collapse, fixed, top:0/bottom:0) lives inside the
   header, so putting the blur directly on .u-header made that panel
   position itself relative to the header's own (short) height instead of
   the viewport — collapsing it to a sliver instead of a full-height menu. */
.u-header {
  position: relative;
  border-bottom: 1px solid rgba(214, 70, 136, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
}

.u-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(18px);
  z-index: -1;
  pointer-events: none;
}

.u-sheet-1 {
  max-width: 1220px;
  margin: 0 auto;
}

.u-menu .u-nav-link {
  color: var(--brand-dark) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.u-menu .u-nav-link:hover {
  color: var(--brand-pink) !important;
}

/* Mobile off-canvas menu panel: Nicepage paints its background via
   .u-black's ::before as flat black, which felt too harsh, and the
   desktop nav's dark text color above (meant for the light header) was
   also leaking in here, making links dark-on-black and hard to read. */
.u-black.u-sidenav:before,
.u-black.u-sidenav > .u-inner-container-layout:before {
  background: linear-gradient(160deg, #4b2177 0%, #d64688 100%) !important;
  background-color: transparent !important;
}

.u-menu .u-popupmenu-items .u-nav-link {
  color: #ffffff !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.u-menu .u-popupmenu-items .u-nav-link:hover {
  color: #ffe1ee !important;
}

.u-menu .u-nav-link.u-active-white,
.u-menu .u-popupmenu-items .u-nav-link.u-active-white {
  color: var(--brand-dark) !important;
}

.u-btn,
.u-menu .u-button-style.u-nav-link {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.u-btn:hover,
.u-menu .u-nav-link:hover {
  transform: translateY(-1px);
}

.u-btn.u-button-style {
  border-radius: 999px !important;
  letter-spacing: 0.02em;
}

.u-custom-color-2,
.u-btn.u-custom-color-2,
.u-button-confirm.u-button-style,
.u-btn-1.u-custom-color-2 {
  background: linear-gradient(135deg, #d64688 0%, #ff77aa 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgba(214, 70, 136, 0.22);
}

.u-section-1,
.u-section-2,
.u-section-4,
.u-section-5,
.u-section-7 {
  background: var(--card-bg) !important;
  border-radius: 34px;
  box-shadow: var(--shadow-strong);
  padding: 36px 0 40px 0;
}

/* The cookie bar carries Nicepage's own dark u-grey-80 theme (white text on
   #333); it must keep that dark background instead of the white card look
   above, or the white text becomes invisible. */
.u-cookies-consent {
  background: #262626 !important;
  border-radius: 34px;
  box-shadow: var(--shadow-strong);
  padding: 24px !important;
}

/* Sections that carry their own Nicepage custom-color background (colored
   full-bleed blocks) must keep that color instead of the white card look
   above, otherwise light text on them becomes unreadable. Nicepage sets
   these colors via a plain (non-!important) rule on .u-custom-color-1/2,
   so re-declare the same hex values here with !important to win back over
   the white card background instead of just clearing to transparent. */
.u-section-1.u-custom-color-1, .u-section-2.u-custom-color-1,
.u-section-4.u-custom-color-1, .u-section-5.u-custom-color-1,
.u-section-7.u-custom-color-1 {
  background: #4b2177 !important;
  box-shadow: none;
}

.u-section-1.u-custom-color-2, .u-section-2.u-custom-color-2,
.u-section-4.u-custom-color-2, .u-section-5.u-custom-color-2,
.u-section-7.u-custom-color-2 {
  background: #e00170 !important;
  box-shadow: none;
}

.u-section-1 {
  position: relative;
  overflow: hidden;
}

.u-section-1 .u-layout-wrap-1 {
  position: relative;
  z-index: 2;
}

.mw-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.9;
}

.u-section-1 .u-text-1,
.u-section-1 .u-text-2,
.u-section-3 .u-text-1,
.u-section-3 .u-text-2,
.u-section-5 .u-text-1,
.u-section-5 .u-text-2 {
  position: relative;
  z-index: 2;
}

.u-section-1 .u-text-2,
.u-section-3 .u-text-1,
.u-section-5 .u-text-1 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.u-section-3 .u-repeater-1,
.u-list-1 .u-repeater {
  gap: 26px !important;
}

.u-section-3 .u-list-item-1,
.u-section-3 .u-list-item-2,
.u-section-3 .u-list-item-3,
.u-section-3 .u-list-item-4,
.u-section-3 .u-list-item-5 {
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.95);
  padding: 32px 26px;
  box-shadow: 0 18px 40px rgba(34, 34, 34, 0.08);
  /* Card headings inherit white from the purple section's own text color
     (meant for text sitting directly on that background); reset it here
     now that the heading sits on this white card instead. */
  color: var(--brand-dark);
}

.u-section-3 .u-icon-1,
.u-section-3 .u-icon-2,
.u-section-3 .u-icon-3 {
  border-color: rgba(214, 70, 136, 0.35);
  /* These icons inherit white (meant for the purple section background);
     on the white service cards above that makes the glyph invisible. */
  color: var(--brand-pink) !important;
}

.u-section-3 .u-icon-1 .u-svg-link,
.u-section-3 .u-icon-2 .u-svg-link,
.u-section-3 .u-icon-3 .u-svg-link {
  /* Nicepage hardcodes fill:#fff for any icon inside a .u-text-white
     wrapper (regardless of `color`); override that fill directly. */
  fill: var(--brand-pink) !important;
}

.u-text-palette-1-light-3,
.u-text-palette-1-light-2 {
  color: var(--brand-grey) !important;
}

/* Same muted text utility is reused directly on colored custom-color
   sections (no white card behind it there) — keep it light there instead
   of dark grey, or it becomes unreadable against the dark background. */
.u-custom-color-1 .u-text-palette-1-light-2,
.u-custom-color-1 .u-text-palette-1-light-3,
.u-custom-color-2 .u-text-palette-1-light-2,
.u-custom-color-2 .u-text-palette-1-light-3 {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ...except inside the white service cards above: those sit on their own
   white background even though the section itself is colored, so muted
   text there must go back to dark grey, not light. */
.u-section-3 [class*="u-list-item-"] .u-text-palette-1-light-2,
.u-section-3 [class*="u-list-item-"] .u-text-palette-1-light-3 {
  color: var(--brand-grey) !important;
}

/* Nicepage's own native entrance-animation system marks elements
   ".u-backstage-hidden" until its own scroll/load check decides to reveal
   them. That check is a fragile one-shot measurement that easily gets
   thrown off by any layout change elsewhere on the page (added stylesheet,
   shifted spacing, etc.), leaving real content permanently invisible.
   Force it visible unconditionally so content can never get stuck hidden;
   we lose that native entrance animation, but GSAP already provides one.
   Also kill the underlying CSS keyframe animation itself (not just the
   visibility flag) — otherwise it and GSAP's own opacity/transform tweens
   fight over the same element, and depending on exact timing either one
   can "win", which is why content was flickering / randomly disappearing. */
.u-backstage-hidden,
[data-animation-name] {
  visibility: visible !important;
  animation: none !important;
}

.u-footer {
  background: #171718 !important;
  color: #f7f1f7 !important;
  border-radius: 34px;
  box-shadow: var(--shadow-strong);
}

.u-footer a {
  color: #ff95c5 !important;
}

@media (max-width: 991px) {
  .u-section-1,
  .u-section-2,
  .u-section-4,
  .u-section-5,
  .u-section-7,
  .u-cookies-consent {
    border-radius: 24px;
    padding: 24px 16px 30px;
  }
  .u-sheet-1 {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 575px) {
  .u-menu .u-nav-link,
  .u-menu .u-popupmenu-items .u-nav-link {
    padding: 0.85rem 0.75rem !important;
  }
}

.mw-open-hours-trigger {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #d64688 0%, #ff77aa 100%) !important;
  color: #fff !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  box-shadow: 0 18px 40px rgba(214, 70, 136, 0.22);
}

.mw-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(13, 18, 34, 0.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.24s ease, visibility 0.24s ease;
}

.mw-modal-overlay.mw-modal-visible {
  opacity: 1;
  visibility: visible;
}

.mw-modal {
  width: min(560px, 100%);
  background: #fff;
  border-radius: 30px;
  box-shadow: 0 30px 70px rgba(34, 34, 34, 0.16);
  padding: 32px;
  transform: translateY(24px);
  transition: transform 0.24s ease;
}

.mw-modal-overlay.mw-modal-visible .mw-modal {
  transform: translateY(0);
}

.mw-modal h2 {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  color: var(--brand-dark);
}

.mw-modal p {
  margin: 0 0 22px;
  line-height: 1.8;
  color: var(--brand-grey);
}

.mw-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.mw-modal-button,
.mw-modal-close {
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 700;
  cursor: pointer;
}

.mw-modal-button {
  background: linear-gradient(135deg, #d64688 0%, #ff77aa 100%);
  color: #fff;
}

.mw-modal-close {
  background: rgba(34, 34, 34, 0.07);
  color: var(--brand-dark);
}

body.mw-modal-open {
  overflow: hidden;
}