/* =========================================================
   Party Learners Kids Studio — Brand Guidelines v1
   Built from the official brand book: Fredoka + Nunito + Caveat,
   cream paper background, four-color brand palette.
   ========================================================= */

:root {
  /* Brand */
  --pink: #E83E8C;
  --pink-deep: #C42B73;
  --teal: #2BBFB4;
  --teal-deep: #1E938A;
  --purple: #6B3FA0;
  --purple-deep: #4B2A78;
  --yellow: #FFC83D;
  --yellow-deep: #E0A41A;

  /* Surfaces */
  --paper: #FFFAF3;
  --paper-2: #FFF1E6;
  --ink: #2D1B47;
  --ink-soft: #5B4878;
  --line: rgba(75, 42, 120, 0.18);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Type */
  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-script: 'Caveat', cursive;
  --serif: 'Playfair Display', Georgia, serif;

  /* Editorial palette additions */
  --pink-50: #FDF1F6;
  --pink-100: #FBE2EE;
  --lav-50: #F4EEFB;
  --lav-100: #E8DCF6;
  --gold-50: #FBF1D9;
  --champagne: #F5E9D6;
  --rose-gold: #E9B8A7;

  /* Hero gradient blobs */
  --blob-pink: #F6C9DC;
  --blob-lav: #D9C8F3;
  --blob-peach: #FFE0B6;

  /* Hero background gradient stops */
  --hero-bg-1: #FFF8F1;
  --hero-bg-2: #FBF3FB;

  /* Signature Divas Glam wash */
  --sig-bg-1: #FFF7F3;
  --sig-bg-2: #FBF3F8;
  --sig-bg-3: #F6EEF8;

  /* Premium gradients */
  --grad-wordmark: linear-gradient(135deg, #C04C82 0%, #E26FA0 25%, #B973CF 55%, #A86BD4 75%, #D4A84B 100%);
  --grad-glam-cta: linear-gradient(135deg, #C04C82 0%, #A86BD4 60%, #D4A84B 130%);

  /* Shadows */
  --shadow-card: 0 24px 50px -30px rgba(75, 42, 120, 0.35);
  --shadow-soft: 0 12px 30px -18px rgba(75, 42, 120, 0.25);

  --container: 1180px;
  --transition: 220ms cubic-bezier(.2, .7, .3, 1);
}

/* =========================
   Reset & base
   ========================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.55;
  background:
    radial-gradient(900px 500px at 0% 0%, rgba(232, 62, 140, 0.08) 0%, transparent 60%),
    radial-gradient(900px 600px at 100% 10%, rgba(43, 191, 180, 0.08) 0%, transparent 60%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
}
img { max-width: 100%; display: block; }
a { color: var(--purple-deep); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--pink); }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; margin: 0; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--purple-deep);
  margin: 0 0 .5em;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
h1 { font-size: clamp(2.8rem, 5.8vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.45rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--ink-soft); }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}
/* Global horizontal overflow guard — prevents any element from breaking the viewport */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, svg { max-width: 100%; }
@media (max-width: 720px) { .container { padding: 0 22px; } }

/* =========================
   Buttons
   ========================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--yellow);
  color: var(--purple-deep);
  box-shadow: 0 8px 22px rgba(255, 200, 61, 0.35);
}
.btn-primary:hover {
  background: var(--pink);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(232, 62, 140, 0.4);
}
.btn-secondary {
  background: #fff;
  color: var(--purple-deep);
  border-color: var(--line);
}
.btn-secondary:hover {
  background: var(--purple-deep);
  color: #fff;
  border-color: var(--purple-deep);
  transform: translateY(-2px);
}
.btn-ghost {
  background: transparent;
  color: var(--purple-deep);
  border-color: var(--purple-deep);
}
.btn-ghost:hover { background: var(--purple-deep); color: #fff; }
.btn-sm { padding: 10px 18px; font-size: 0.75rem; }

/* =========================
   Header
   ========================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 250, 243, 0.92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 2px dashed var(--line);
}
/* Two-row header: nav menu on top, BIG logo banner below.
   Shrinks gracefully on scroll via .compact class added by main.js */
.nav-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  padding: 16px 0 24px;
  gap: 16px 24px;
  transition: padding .3s ease, gap .3s ease;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  transition: opacity .3s ease, transform .3s ease;
}
.brand-logo {
  height: 252px;
  width: auto;
  max-width: 730px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 8px 22px rgba(75, 42, 120, .16));
  transition: height .3s ease, max-width .3s ease;
}
.nav-wrap > nav {
  grid-column: 1 / -1;
  grid-row: 1;
  justify-self: center;
}
.nav-wrap .nav-cta {
  grid-column: 3 / 4;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  z-index: 2;
}

/* Compact (scrolled) — shrinks the logo banner, tightens spacing */
.site-header.compact .nav-wrap {
  padding: 12px 0 12px;
  gap: 6px 24px;
}
.site-header.compact .brand-logo {
  height: 72px;
  max-width: 280px;
}

/* Tablet & mobile — BIG centered logo, hamburger floats absolute right.
   Stable size on scroll, no shrinking thumbnail. */
@media (max-width: 980px) {
  .nav-wrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 0;
    gap: 0;
    position: relative;
    min-height: 132px;
  }
  .brand {
    display: flex;
    align-items: center;
    grid-column: auto;
    grid-row: auto;
    justify-self: initial;
    margin: 0 auto;
    flex: 0 1 auto;
    min-width: 0;
    max-width: calc(100% - 80px); /* leave room for hamburger on right */
  }
  .brand-logo {
    height: 116px;
    max-height: 116px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 6px 16px rgba(75, 42, 120, .18));
  }
  .nav-wrap > nav {
    grid-column: auto;
    grid-row: auto;
    justify-self: initial;
    width: auto;
  }
  .nav-wrap .nav-cta {
    grid-column: auto;
    grid-row: auto;
    justify-self: initial;
    align-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  /* Hide the standalone "Book a Party" button from mobile header — lives inside the menu */
  .nav-wrap .nav-cta .btn-primary { display: none; }
  /* Stable logo on scroll — no shrinking thumbnail behavior on mobile */
  .site-header.compact .nav-wrap { padding: 14px 0; min-height: 132px; gap: 0; }
  .site-header.compact .brand-logo { height: 116px; max-height: 116px; max-width: 100%; }
}
@media (max-width: 600px) {
  .nav-wrap { min-height: 116px; padding: 12px 0; }
  .brand-logo { height: 100px; max-height: 100px; }
  .site-header.compact .nav-wrap { min-height: 116px; padding: 12px 0; }
  .site-header.compact .brand-logo { height: 100px; max-height: 100px; }
}
@media (max-width: 430px) {
  .nav-wrap { min-height: 104px; padding: 10px 0; }
  .brand-logo { height: 88px; max-height: 88px; }
  .site-header.compact .nav-wrap { min-height: 104px; padding: 10px 0; }
  .site-header.compact .brand-logo { height: 88px; max-height: 88px; }
}
@media (max-width: 360px) {
  .nav-wrap { min-height: 92px; padding: 10px 0; }
  .brand-logo { height: 76px; max-height: 76px; }
  .site-header.compact .brand-logo { height: 76px; max-height: 76px; }
}
.brand-mark, .brand-name { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav-links a {
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
  transition: var(--transition);
}
.nav-links a:hover { background: rgba(232, 62, 140, 0.1); color: var(--pink); }
.nav-links a.active { color: var(--pink); background: rgba(232, 62, 140, 0.1); }

.nav-cta { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  border: none; background: transparent;
  border-radius: 50%;
  align-items: center; justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--purple-deep);
  position: relative;
  transition: var(--transition);
}
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; right: 0;
  height: 2px; background: var(--purple-deep);
  transition: var(--transition);
}
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle.is-open span { background: transparent; }
.nav-toggle.is-open span::before { transform: rotate(45deg); top: 0; }
.nav-toggle.is-open span::after { transform: rotate(-45deg); top: 0; }

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: fixed;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: var(--paper);
    padding: 18px 22px 26px;
    border-bottom: 2px dashed var(--line);
    box-shadow: 0 18px 35px -10px rgba(75, 42, 120, .25);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s ease, opacity .25s ease;
    max-height: calc(100vh - 100%);
    overflow-y: auto;
  }
  .nav-links.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a {
    padding: 14px 16px;
    border-radius: var(--r-md);
    font-size: 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* "Book a Party" as primary CTA inside mobile menu */
  .nav-links .menu-cta {
    margin-top: 12px;
    padding: 14px 22px !important;
    background: var(--yellow);
    color: var(--purple-deep) !important;
    font-weight: 800;
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
    justify-content: center;
    border-radius: var(--r-pill);
    box-shadow: 0 8px 22px rgba(255, 200, 61, .35);
  }
  .nav-links .menu-cta:hover { background: var(--pink); color: #fff !important; }
}

/* =========================
   Sections
   ========================= */
.section { padding: 88px 0; }
.section-tight { padding: 56px 0; }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
.section-head .eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--pink);
  transform: rotate(-2deg);
  margin-bottom: 8px;
}
.section-head h2 { margin-bottom: 16px; }
.section-head .lead {
  font-size: 1.1rem;
  max-width: 560px;
  margin: 0 auto;
  color: var(--ink-soft);
}

/* Decorative dashed party-streamer divider */
.streamer {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  margin: 0 0 0;
  border: 0;
}

/* Color word cycling (DO from brand: cycle pink → teal → purple → yellow) */
.c-pink { color: var(--pink); }
.c-teal { color: var(--teal); }
.c-purple { color: var(--purple); }
.c-purple-deep { color: var(--purple-deep); }
.c-yellow { color: var(--yellow-deep); }

/* =========================
   Hero (home) — editorial boutique premium
   ========================= */
.hero {
  position: relative;
  padding: 80px 0 140px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 780px 580px at 80% 18%, rgba(232, 213, 240, 0.65) 0%, transparent 65%),
    radial-gradient(ellipse 640px 500px at 5% 92%, rgba(248, 195, 216, 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 500px 400px at 50% 50%, rgba(255, 245, 220, 0.3) 0%, transparent 70%),
    linear-gradient(180deg, #FFFAF3 0%, #FFF5F8 60%, #FFFAF3 100%);
}
.hero::before {
  content: ""; position: absolute; top: -160px; right: -140px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 61, .22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: ""; position: absolute; bottom: -140px; left: -120px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 191, 180, .22), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* Boutique handwritten eyebrow */
.hero-eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--pink);
  transform: rotate(-2deg);
  margin-bottom: 12px;
  line-height: 1.1;
}

.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.02;
  margin-bottom: 28px;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.hero h1 span { display: inline; }
.hero h1 .hero-line { display: block; }
.hero h1 .shine {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.05em;
  background: var(--grad-wordmark);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  padding: 0 .08em;
  line-height: 1;
  letter-spacing: -0.01em;
}

.hero-lead {
  font-family: var(--font-body);
  font-size: 1.18rem;
  font-weight: 500;
  color: var(--ink-soft);
  max-width: 48ch;
  margin-bottom: 32px;
  line-height: 1.55;
}
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-bottom: 28px;
}
.hero-chips {
  display: flex; flex-wrap: wrap; gap: 10px;
}

/* ===========================
   Editorial composition — main image + 2 layered supports + 2 floating cards
   =========================== */
.hero-composition {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.05;
  z-index: 1;
}
/* Soft glow blob behind composition */
.hero-composition::before {
  content: "";
  position: absolute;
  inset: -40px -30px -30px -40px;
  border-radius: 200px 80px 80px 80px;
  background:
    radial-gradient(60% 60% at 25% 25%, rgba(232, 62, 140, .22), transparent 70%),
    radial-gradient(60% 60% at 80% 80%, rgba(255, 200, 61, .22), transparent 70%);
  filter: blur(32px);
  z-index: -1;
}

/* MAIN image — dominant, top-left, arch top */
.hero-main {
  position: absolute;
  top: 0;
  left: 0;
  width: 76%;
  height: 70%;
  border-radius: 140px 32px 32px 32px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: 0 30px 70px -22px rgba(75, 42, 120, .42), 0 0 0 1px var(--line);
  z-index: 2;
}
.hero-main img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  animation: heroPan 22s ease-in-out infinite alternate;
}
@keyframes heroPan {
  0%   { object-position: 0% 50%; }
  100% { object-position: 100% 50%; }
}

/* SUB image 1 — top-right, slight rotation */
.hero-sub-1 {
  position: absolute;
  top: 4%;
  right: 0;
  width: 38%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0 20px 45px -16px rgba(75, 42, 120, .38);
  z-index: 4;
  transform: rotate(2.5deg);
  transition: transform .4s ease;
}
.hero-sub-1:hover { transform: rotate(0deg) scale(1.02); }
.hero-sub-1 img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* SUB image 2 — bottom-right, overlapping main */
.hero-sub-2 {
  position: absolute;
  bottom: 0;
  right: 8%;
  width: 50%;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  overflow: hidden;
  border: 5px solid #fff;
  box-shadow: 0 22px 50px -18px rgba(75, 42, 120, .4);
  z-index: 3;
  transform: rotate(-1.5deg);
  transition: transform .4s ease;
}
.hero-sub-2:hover { transform: rotate(0deg) scale(1.02); }
.hero-sub-2 img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) {
  .hero-main img { animation: none; }
}

/* Floating REVIEW card — bottom-left, hanging off main */
.hero-card-reviews {
  position: absolute;
  bottom: 14%;
  left: -24px;
  background: #fff;
  border-radius: var(--r-lg);
  padding: 14px 20px 14px 16px;
  border: 2px solid var(--line);
  box-shadow: 0 24px 50px -18px rgba(75, 42, 120, .4);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body);
  z-index: 5;
  max-width: 230px;
}
.hero-card-reviews .stars { color: var(--yellow); letter-spacing: 2px; font-size: 0.95rem; line-height: 1; }
.hero-card-reviews strong { display: block; color: var(--purple-deep); font-weight: 800; font-size: 0.92rem; line-height: 1.15; }
.hero-card-reviews small { display: block; color: var(--ink-soft); font-size: 0.76rem; font-weight: 600; margin-top: 2px; }

/* Floating SERVICE card — top-left, sitting above main image */
.hero-card-service {
  position: absolute;
  top: -18px;
  left: 16%;
  background: #fff;
  border-radius: var(--r-md);
  padding: 12px 16px 12px 12px;
  border: 2px solid var(--line);
  box-shadow: 0 20px 40px -16px rgba(75, 42, 120, .35);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--purple-deep);
  line-height: 1.3;
  max-width: 240px;
  z-index: 5;
}
.hero-card-service .icon {
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.hero-card-service .icon svg { width: 16px; height: 16px; }

/* ===========================
   Trust pills (4 mini badges under CTAs)
   =========================== */
.trust-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--line);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--purple-deep);
  letter-spacing: 0.01em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(75, 42, 120, .06);
}
.trust-pill::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0;
}
.trust-pill.gold::before { background: var(--yellow); }
.trust-pill.teal::before { background: var(--teal); }
.trust-pill.purple::before { background: var(--purple); }
.trust-pill.stars::before {
  content: "★";
  color: var(--yellow);
  background: transparent;
  width: auto; height: auto;
  font-size: 0.92rem;
  line-height: 1;
  margin-top: -1px;
}

@media (max-width: 980px) {
  .hero { padding: 32px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-composition { aspect-ratio: 1 / 1; max-width: 540px; margin: 0 auto; }
  .hero-card-service { left: 12px; top: -16px; max-width: 200px; font-size: 0.76rem; padding: 10px 14px 10px 10px; }
  .hero-card-reviews { left: 0; bottom: 18%; max-width: 200px; padding: 12px 16px; }
  .hero-eyebrow { font-size: 1.5rem; }
}
@media (max-width: 600px) {
  .hero { padding: 24px 0 56px; }
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); margin-bottom: 18px; }
  .hero-eyebrow { font-size: 1.3rem; margin-bottom: 8px; }
  .hero-lead { font-size: 1rem; margin-bottom: 22px; }
  .hero-actions { gap: 10px; margin-bottom: 22px; }
  .hero-actions .btn { flex: 1 1 100%; min-width: 0; padding: 14px 20px; font-size: 0.82rem; }
  .hero-card-service { display: none; }
  .hero-card-reviews { padding: 10px 14px; max-width: 180px; bottom: 12%; }
  .hero-card-reviews .stars { font-size: 0.85rem; }
  .hero-card-reviews strong { font-size: 0.82rem; }
  .hero-card-reviews small { font-size: 0.68rem; }
  .trust-pills { gap: 6px; }
  .trust-pill { font-size: 0.7rem; padding: 6px 10px; }
}
@media (max-width: 400px) {
  .hero-card-reviews { display: none; }
  .hero-composition { aspect-ratio: 4 / 3.4; }
}

/* =========================
   Chips (brand component)
   ========================= */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1.5px solid var(--line);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--purple-deep);
}
.chip .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.chip .dot.pink { background: var(--pink); }
.chip .dot.teal { background: var(--teal); }
.chip .dot.yellow { background: var(--yellow); }
.chip .dot.purple { background: var(--purple); }

/* =========================
   Moving marquee — themed experiences ticker
   ========================= */
.marquee {
  background: linear-gradient(90deg, #2A1547, #4B2A78 50%, #6B3FA0);
  color: #fff;
  padding: 18px 0;
  overflow: hidden;
  position: relative;
}
.marquee-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  width: max-content;
  animation: marqueeScroll 50s linear infinite;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: rgba(255, 255, 255, .92);
}
.marquee-track span {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.marquee-track .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow);
  flex-shrink: 0;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .marquee { padding: 14px 0; }
  .marquee-track { gap: 36px; font-size: 14px; }
  .marquee-track .dot { width: 5px; height: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* Glam CTA — premium gradient button for Divas Glam section */
.btn-glam {
  background: var(--grad-glam-cta) !important;
  color: #fff !important;
  border: none;
  box-shadow: 0 10px 28px rgba(192, 76, 130, .4);
}
.btn-glam:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(192, 76, 130, .5);
}

/* =========================
   Trust strip
   ========================= */
.trust-strip {
  padding: 22px 0;
  background:
    linear-gradient(135deg, rgba(232, 62, 140, .06), rgba(43, 191, 180, .06), rgba(255, 200, 61, .08)),
    #fff;
  border-top: 2px dashed var(--line);
  border-bottom: 2px dashed var(--line);
}
.trust-strip-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 32px;
}
.trust-strip-item {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--purple-deep);
}
.trust-strip-item .dot {
  width: 9px; height: 9px;
  border-radius: 50%;
}
.trust-strip-item .dot.pink   { background: var(--pink); }
.trust-strip-item .dot.teal   { background: var(--teal); }
.trust-strip-item .dot.yellow { background: var(--yellow); }
.trust-strip-item .dot.purple { background: var(--purple); }
.trust-strip-item .dot.stars {
  width: auto; height: auto;
  background: transparent;
  color: var(--yellow);
  font-size: 1rem;
  line-height: 1;
}
@media (max-width: 600px) {
  .trust-strip { padding: 16px 0; }
  .trust-strip-inner { gap: 10px 18px; }
  .trust-strip-item { font-size: 0.78rem; }
}

/* =========================
   Feature cards (themes)
   ========================= */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

/* Featured row — 2 prominent cards (Divas Glam + Paint Boho) */
.card-grid--featured {
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 28px;
  margin-bottom: 56px;
}
/* 3-card variant (Divas Glam + Paint Boho + Chef Party) */
.card-grid--featured-3 {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 22px;
}
@media (min-width: 1024px) {
  .card-grid--featured-3 { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.card-grid--featured-3 .feature-card--hero h3 { font-size: 1.5rem; }
.card-grid--featured-3 .feature-card--hero p { font-size: 0.95rem; }
.feature-card--hero {
  border: 2px solid rgba(232, 62, 140, .25);
  box-shadow: 0 18px 40px -22px rgba(232, 62, 140, .35);
}
.feature-card--hero h3 {
  font-size: 1.7rem;
  font-weight: 700;
}
.feature-card--hero p {
  font-size: 1rem;
}
.feature-card--hero .feature-card-image {
  aspect-ratio: 4 / 3;
  margin-bottom: 22px;
}
.feature-card--hero .card-link {
  font-weight: 800;
  font-size: 0.95rem;
}

/* Coming soon row — 3 muted cards */
.coming-soon-eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 22px;
  position: relative;
}
.coming-soon-eyebrow::before,
.coming-soon-eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px; height: 1.5px;
  background: var(--line);
  vertical-align: middle;
  margin: 0 14px 4px;
}
.card-grid--coming {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.feature-card--coming {
  opacity: 0.85;
  background: var(--paper);
  padding: 18px;
}
.feature-card--coming:hover {
  opacity: 1;
}
.feature-card--coming h3 {
  font-size: 1.2rem;
}
.feature-card--coming p {
  font-size: 0.88rem;
}
.feature-card--coming .feature-card-image {
  aspect-ratio: 4 / 3;
  margin-bottom: 14px;
  filter: saturate(.75) brightness(.98);
}
.feature-card--coming:hover .feature-card-image {
  filter: saturate(1) brightness(1);
}

@media (max-width: 720px) {
  .card-grid--featured { grid-template-columns: 1fr; gap: 20px; margin-bottom: 36px; }
  .feature-card--hero h3 { font-size: 1.45rem; }
  .feature-card--hero p { font-size: 0.95rem; }
  .card-grid--coming { grid-template-columns: 1fr 1fr; gap: 12px; }
  .feature-card--coming { padding: 14px; }
  .feature-card--coming h3 { font-size: 1.05rem; }
  .feature-card--coming p { font-size: 0.82rem; }
  .coming-soon-eyebrow { font-size: 0.72rem; }
}
@media (max-width: 480px) {
  .card-grid--coming { grid-template-columns: 1fr; }
}
.feature-card {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }

.feature-card-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: 18px;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  position: relative;
}
.feature-card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.feature-card-image[data-placeholder]::after {
  content: attr(data-placeholder);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .8);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  text-align: center; padding: 16px;
}
.feature-card-image:has(img)::after { display: none; }

.feature-card .card-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  margin-bottom: 14px;
  color: #fff;
}
.feature-card .card-icon.pink { background: var(--pink); }
.feature-card .card-icon.teal { background: var(--teal); }
.feature-card .card-icon.yellow { background: var(--yellow); color: var(--purple-deep); }
.feature-card .card-icon.purple { background: var(--purple); }

.feature-card .card-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.feature-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--purple-deep);
  margin: 0 0 8px;
}
.feature-card p { margin-bottom: 16px; flex-grow: 1; font-size: 0.95rem; color: var(--ink-soft); }

.card-tag {
  display: inline-block;
  background: var(--paper-2);
  color: var(--purple-deep);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 12px;
  border: 1.5px solid var(--line);
}
.card-tag.is-popular { background: var(--pink); color: #fff; border-color: var(--pink); }
.card-tag.is-coming { background: var(--teal); color: #fff; border-color: var(--teal); }

.card-link {
  font-family: var(--font-body);
  font-weight: 800;
  color: var(--pink);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.card-link::after { content: "→"; transition: transform var(--transition); }
.card-link:hover::after { transform: translateX(4px); }

/* =========================
   Signature feature block (Divas Glam)
   ========================= */
.feature-block {
  background:
    radial-gradient(800px 400px at 100% 0%, rgba(255, 200, 61, .15), transparent 60%),
    linear-gradient(135deg, var(--purple), var(--purple-deep));
  border-radius: var(--r-xl);
  padding: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.feature-block::before {
  content: ""; position: absolute;
  top: -80px; right: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 62, 140, .35), transparent 70%);
}
.feature-block::after {
  content: ""; position: absolute;
  bottom: -60px; left: 30%;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 61, .25), transparent 70%);
}
.feature-block > * { position: relative; z-index: 1; }
.feature-block .eyebrow {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 2rem;
  color: var(--yellow);
  transform: rotate(-2deg);
  display: inline-block;
  margin-bottom: 4px;
}
.feature-block h2 {
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin-bottom: 16px;
}
.feature-block p { color: rgba(255, 255, 255, .85); margin-bottom: 24px; font-size: 1.05rem; }
.feature-block ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  margin-bottom: 28px;
}
.feature-block ul li {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  padding-left: 18px;
  position: relative;
}
.feature-block ul li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
}
.feature-block-visual {
  border-radius: var(--r-lg);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 3px solid rgba(255, 255, 255, .15);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5);
}
.feature-block-visual img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 880px) {
  .feature-block { padding: 40px 28px; grid-template-columns: 1fr; gap: 32px; }
  .feature-block ul { grid-template-columns: 1fr; }
}

/* =========================
   Divas Glam Signature — Blush, sparkle and a real-photo hero
   ========================= */
.divas-glam-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 1100px 700px at 12% 0%, rgba(255, 184, 220, .55), transparent 60%),
    radial-gradient(ellipse 900px 600px at 92% 100%, rgba(220, 198, 245, .55), transparent 65%),
    radial-gradient(ellipse 700px 500px at 50% 50%, rgba(255, 232, 200, .35), transparent 70%),
    linear-gradient(135deg, #FFEFF6 0%, #FBE7F2 35%, #F4E8FB 70%, #FFF1E0 100%);
}

.feature-block.divas-glam-feature {
  background:
    radial-gradient(ellipse 600px 480px at 8% 8%, rgba(255, 170, 210, .55) 0%, transparent 55%),
    radial-gradient(ellipse 520px 420px at 95% 95%, rgba(229, 201, 125, .35) 0%, transparent 60%),
    radial-gradient(ellipse 700px 500px at 50% 50%, rgba(255, 255, 255, .55), transparent 70%),
    linear-gradient(135deg, #FFE2EE 0%, #FFD4E5 32%, #F0DCFB 68%, #FFE9D2 100%);
  border: 1px solid rgba(232, 62, 140, .14);
  box-shadow:
    0 30px 60px -28px rgba(232, 62, 140, .35),
    0 12px 30px -16px rgba(184, 90, 184, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .65);
}

/* Soft ambient glow blobs (pink + champagne) */
.feature-block.divas-glam-feature::before {
  content: ""; position: absolute;
  top: -130px; right: -100px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 61, .35), transparent 60%);
  pointer-events: none;
  filter: blur(2px);
}
.feature-block.divas-glam-feature::after {
  content: ""; position: absolute;
  bottom: -120px; left: -70px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 130, 181, .45), transparent 60%);
  pointer-events: none;
  filter: blur(2px);
}

/* CSS sparkles dotted across the section background */
.dg-bg-sparkle {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  animation: dgBgTwinkle 5s ease-in-out infinite;
  z-index: 0;
}
.dg-bg-sparkle::before {
  content: "";
  display: block;
  width: 100%; height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F1C25C'%3E%3Cpath d='M12 0 L13.4 10.6 L24 12 L13.4 13.4 L12 24 L10.6 13.4 L0 12 L10.6 10.6 Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 6px rgba(241, 194, 92, .55));
}
.dg-bg-sparkle.dg1 { top: 6%;  left: 4%;  width: 22px; height: 22px; animation-delay: 0s;   }
.dg-bg-sparkle.dg2 { top: 14%; right: 8%; width: 16px; height: 16px; animation-delay: 1.2s; }
.dg-bg-sparkle.dg3 { bottom: 18%; left: 6%; width: 18px; height: 18px; animation-delay: 2.4s; }
.dg-bg-sparkle.dg4 { bottom: 10%; right: 14%; width: 14px; height: 14px; animation-delay: 0.7s; }
.dg-bg-sparkle.dg5 { top: 50%; left: 48%; width: 12px; height: 12px; animation-delay: 1.8s; }
@keyframes dgBgTwinkle {
  0%, 100% { opacity: 0;   transform: scale(.4) rotate(0deg); }
  45%, 55% { opacity: .9;  transform: scale(1)  rotate(180deg); }
}

/* Override generic feature-block ink-on-dark colors for the blush variant */
.divas-glam-feature p,
.divas-glam-feature .divas-glam-lead {
  color: var(--ink);
  font-weight: 600;
}
.divas-glam-feature .divas-glam-lead {
  font-size: 1.08rem;
  line-height: 1.55;
  margin-bottom: 24px;
}
.divas-glam-feature ul.divas-glam-highlights li {
  color: var(--purple-deep);
  font-weight: 700;
}
.divas-glam-feature ul.divas-glam-highlights li::before {
  background: var(--pink);
  box-shadow: 0 2px 6px rgba(232, 62, 140, .45);
}

.divas-glam-content {
  position: relative;
  z-index: 1;
}

/* Premium label pill */
.premium-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #FFD158, #FFC83D);
  color: var(--purple-deep);
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 20px 9px 18px;
  border-radius: var(--r-pill);
  margin-bottom: 22px;
  box-shadow: 0 8px 24px rgba(255, 200, 61, .42);
}
.premium-label::before {
  content: "★";
  color: var(--purple-deep);
  font-size: 0.9rem;
  margin-top: -1px;
}

/* ===== Divas Glam clean CSS wordmark (replaces medallion image) ===== */
.divas-glam-wordmark-wrap {
  position: relative;
  display: inline-block;
  margin: 12px 0 22px;
  padding: 16px 14px 22px;
  z-index: 2;
}
.divas-glam-wordmark-wrap::before {
  content: ""; position: absolute;
  inset: -18px -10px;
  background:
    radial-gradient(60% 70% at 30% 40%, rgba(255, 130, 181, .55), transparent 70%),
    radial-gradient(60% 70% at 75% 70%, rgba(189, 145, 230, .42), transparent 70%);
  filter: blur(28px);
  z-index: 0;
  border-radius: 50%;
  animation: dgWordmarkPulse 5.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes dgWordmarkPulse {
  0%   { opacity: .55; transform: scale(.94); }
  100% { opacity: 1;   transform: scale(1.07); }
}

h2.divas-glam-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 8.4vw, 6rem);
  line-height: 0.92;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  position: relative;
  z-index: 2;
  display: inline-block;
}
.divas-glam-wordmark .dg-line {
  display: block;
  background: linear-gradient(
    135deg,
    #FBD6E6 0%,
    #F2A6C9 16%,
    #E83E8C 36%,
    #B85AB8 58%,
    #8E5BC2 76%,
    #E5C97D 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .7))
    drop-shadow(0 8px 22px rgba(232, 62, 140, .35));
  animation: dgGradientShift 9s ease-in-out infinite alternate;
}
.divas-glam-wordmark .dg-line:nth-child(2) {
  margin-left: 0.18em;
  animation-delay: 0.6s;
}
@keyframes dgGradientShift {
  0%   { background-position: 0%   0%; }
  100% { background-position: 100% 0%; }
}

/* Soft shimmer light sweep across the wordmark */
.dg-shimmer {
  position: absolute;
  inset: 16px 14px 22px;
  background: linear-gradient(110deg,
    transparent 35%,
    rgba(255, 255, 255, .55) 49%,
    rgba(255, 255, 255, .85) 50%,
    rgba(255, 255, 255, .55) 51%,
    transparent 65%);
  background-size: 280% 100%;
  background-position: 280% 0;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 4;
  animation: dgShimmerSweep 6.5s ease-in-out infinite;
  border-radius: 8px;
}
@keyframes dgShimmerSweep {
  0%, 30%  { background-position: 280% 0; }
  70%, 100% { background-position: -280% 0; }
}

/* ===== Divas Glam featured photo — full setup, soft white frame, pink halo ===== */
.divas-glam-feature .feature-block-visual.divas-glam-visual {
  position: relative;
  aspect-ratio: auto;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  z-index: 1;
}
.divas-glam-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 620px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--r-lg);
  border: 6px solid #fff;
  box-shadow:
    0 36px 70px -22px rgba(232, 62, 140, .45),
    0 18px 40px -20px rgba(184, 90, 184, .4),
    0 0 0 1px rgba(232, 62, 140, .14);
  position: relative;
  z-index: 1;
}

.dg-photo-glow {
  position: absolute;
  inset: -28px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 60% at 30% 40%, rgba(255, 130, 181, .6), transparent 70%),
    radial-gradient(60% 60% at 70% 70%, rgba(189, 145, 230, .45), transparent 70%);
  filter: blur(34px);
  z-index: 0;
  pointer-events: none;
  animation: dgPhotoGlow 5.5s ease-in-out infinite alternate;
}
@keyframes dgPhotoGlow {
  0%   { opacity: .6; transform: scale(.96); }
  100% { opacity: 1;  transform: scale(1.05); }
}

.dg-photo-label {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--purple-deep);
  background: #fff;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  border: 2px solid var(--pink);
  box-shadow:
    0 12px 24px -10px rgba(232, 62, 140, .4),
    0 0 0 4px rgba(255, 200, 61, .18);
  white-space: nowrap;
  z-index: 2;
}

/* ===== Medallion sizing inside the new blush section (smaller than home-only) ===== */
.divas-glam-feature .divas-glam-medallion-wrap {
  margin: 12px 0 22px;
  padding: 30px 22px 26px;
}
.divas-glam-feature .glam-medallion {
  width: 260px;
  height: 260px;
}

/* =========================
   Divas Glam — MOBILE redesign (≤880px)
   Reorder: badge → photo → wordmark → copy → highlight pills → CTAs.
   Wordmark medallion shrinks and overlaps the bottom edge of the photo.
   Highlights become rounded pill cards in a 2-col grid.
   ========================= */
@media (max-width: 880px) {
  /* Flatten .divas-glam-content so its children become direct grid items
     and can be reordered alongside the photo */
  .divas-glam-feature .divas-glam-content { display: contents; }

  /* Mobile order: badge → photo → wordmark → copy → highlights → CTAs */
  .divas-glam-feature .premium-label         { order: 1; align-self: start; margin-bottom: 4px; position: relative; z-index: 2; }
  .divas-glam-feature .feature-block-visual  { order: 2; position: relative; z-index: 1; }
  .divas-glam-feature .divas-glam-medallion-wrap { order: 3; position: relative; z-index: 4; align-self: center; }
  .divas-glam-feature .divas-glam-lead       { order: 4; position: relative; z-index: 2; }
  .divas-glam-feature .divas-glam-highlights { order: 5; position: relative; z-index: 2; }
  .divas-glam-feature .hero-actions          { order: 6; position: relative; z-index: 2; }

  /* Hide the original (large) medallion-wrap on mobile — replaced by
     the photo overlay sticker below */
  .divas-glam-feature .divas-glam-medallion-wrap { display: none; }

  /* Make .feature-block-visual the positioning anchor for the sticker
     and let the sticker overhang past the photo edges */
  .divas-glam-feature .feature-block-visual {
    position: relative;
    z-index: 2;
    overflow: visible;
  }
  .dg-photo-glow { inset: -22px; filter: blur(28px); }
  .divas-glam-visual img { max-height: 540px; border-width: 5px; }

  /* Hide the floating "Real Divas Glam setup" label so it doesn't
     compete with the overlay sticker */
  .dg-photo-label { display: none; }

  /* DG STICKER — circular brand badge overlaid on the bottom-right
     corner of the main photo. Mobile-only. */
  .dg-photo-sticker {
    position: absolute;
    right: -8px;
    bottom: -18px;
    width: clamp(110px, 28vw, 150px);
    height: clamp(110px, 28vw, 150px);
    z-index: 6;
    transform: rotate(-9deg);
    transform-origin: center center;
    animation: stickerFloat 6.5s ease-in-out infinite alternate;
    pointer-events: none;
    display: block;
  }
  .dg-photo-sticker__halo {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background:
      radial-gradient(circle at 30% 35%, rgba(255, 130, 181, .7), transparent 60%),
      radial-gradient(circle at 70% 65%, rgba(255, 200, 61, .4), transparent 60%);
    filter: blur(18px);
    z-index: 0;
    animation: stickerHalo 4.5s ease-in-out infinite alternate;
  }
  .dg-photo-sticker__inner {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
    box-shadow:
      0 0 0 3px #ffffff,
      0 0 0 5px #F1C25C,
      0 0 0 7px rgba(255, 239, 196, .35),
      0 14px 26px -10px rgba(232, 62, 140, .55),
      0 6px 14px rgba(75, 42, 120, .35);
  }
  .dg-photo-sticker__inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .dg-photo-sticker__sparkle {
    position: absolute;
    width: 14px; height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F1C25C'%3E%3Cpath d='M12 0 L13.4 10.6 L24 12 L13.4 13.4 L12 24 L10.6 13.4 L0 12 L10.6 10.6 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 2;
    filter: drop-shadow(0 0 6px rgba(241, 194, 92, .85));
    opacity: 0;
    animation: stickerTwinkle 4.5s ease-in-out infinite;
  }
  .dg-photo-sticker__sparkle.s1 { top: -6px;  right: -4px; animation-delay: 0s;   }
  .dg-photo-sticker__sparkle.s2 { bottom: -2px; left: 30%; width: 11px; height: 11px; animation-delay: 1.8s; }

  /* Tighter lead copy */
  .divas-glam-feature .divas-glam-lead {
    font-size: 1rem;
    line-height: 1.55;
    margin: 6px 0 14px;
    text-align: center;
  }

  /* Highlights → premium pill cards in 2-col grid (replaces vertical bullets) */
  .divas-glam-feature ul.divas-glam-highlights {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 22px;
  }
  .divas-glam-feature ul.divas-glam-highlights li {
    padding: 12px 12px 12px 28px;
    background: linear-gradient(180deg, #ffffff 0%, #FFF6FA 100%);
    border: 1.5px solid rgba(232, 62, 140, .18);
    border-radius: 14px;
    box-shadow: 0 6px 14px -8px rgba(232, 62, 140, .25);
    font-size: 0.86rem;
    line-height: 1.2;
    color: var(--purple-deep);
  }
  .divas-glam-feature ul.divas-glam-highlights li::before {
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px; height: 7px;
    background: var(--pink);
    box-shadow: 0 0 0 3px rgba(232, 62, 140, .14);
  }

  /* CTAs — stack and full-width on mobile, primary feels stronger */
  .divas-glam-feature .hero-actions {
    flex-direction: column;
    gap: 10px;
  }
  .divas-glam-feature .hero-actions .btn { width: 100%; }
  .divas-glam-feature .hero-actions .btn-glam {
    box-shadow:
      0 14px 30px rgba(192, 76, 130, .45),
      0 0 0 4px rgba(255, 200, 61, .14);
  }

  /* Background sparkle reduction on mobile (already applied) */
  .dg-bg-sparkle.dg5,
  .dg-bg-sparkle.dg4 { display: none; }
}

@media (max-width: 480px) {
  .dg-photo-sticker {
    right: -6px;
    bottom: -16px;
  }
  .divas-glam-visual img { max-height: 480px; }
  .divas-glam-feature ul.divas-glam-highlights li { font-size: 0.82rem; padding: 10px 10px 10px 26px; }
  .dg-bg-sparkle.dg3 { display: none; }
}

/* Hide the mobile-only sticker on desktop */
@media (min-width: 881px) {
  .dg-photo-sticker { display: none; }
}

/* DG sticker keyframes — gentle float + halo pulse + occasional twinkle */
@keyframes stickerFloat {
  0%   { transform: rotate(-9deg) translateY(0); }
  100% { transform: rotate(-9deg) translateY(-6px); }
}
@keyframes stickerHalo {
  0%   { opacity: .6; transform: scale(.92); }
  100% { opacity: 1;  transform: scale(1.1); }
}
@keyframes stickerTwinkle {
  0%, 100% { opacity: 0; transform: scale(.4) rotate(0deg); }
  45%, 55% { opacity: 1; transform: scale(1)  rotate(180deg); }
}

/* Reduced-motion guard for the sticker */
@media (prefers-reduced-motion: reduce) {
  .dg-photo-sticker,
  .dg-photo-sticker__halo,
  .dg-photo-sticker__sparkle {
    animation: none !important;
  }
  .dg-photo-sticker { transform: rotate(-9deg); }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .dg-bg-sparkle,
  .dg-photo-glow {
    animation: none;
  }
  .dg-bg-sparkle { opacity: .7; }
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================
   Divas Glam medallion — premium logo treatment
   Circular crop, gold ring, pulsing halo, slow float, hover lift.
   ========================= */
.divas-glam-medallion-wrap {
  position: relative;
  display: inline-block;
  margin: 14px 0 22px;
  padding: 38px 30px;
  z-index: 2;
}

.glam-medallion {
  position: relative;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  isolation: isolate;
  animation: medallionFloat 5.5s ease-in-out infinite alternate;
  cursor: pointer;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.glam-medallion:hover {
  transform: scale(1.025) translateY(-4px);
}

/* Pulsing pink/gold halo behind the medallion */
.glam-medallion__halo {
  position: absolute;
  inset: -34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%, rgba(255, 130, 181, .65), transparent 62%),
    radial-gradient(circle at 70% 65%, rgba(255, 200, 61, .42), transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(184, 90, 184, .35), transparent 70%);
  filter: blur(28px);
  z-index: 0;
  animation: medallionHalo 4.2s ease-in-out infinite alternate;
  pointer-events: none;
}

/* Rotating gold gradient ring (ornament effect) */
.glam-medallion__rotor {
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(255, 239, 196, .9) 0deg,
    rgba(241, 194, 92, .35) 60deg,
    rgba(255, 215, 120, .95) 120deg,
    rgba(184, 134, 42, .25) 180deg,
    rgba(255, 239, 196, .9) 240deg,
    rgba(241, 194, 92, .35) 300deg,
    rgba(255, 239, 196, .9) 360deg
  );
  z-index: 1;
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px) calc(50% + 0px), transparent calc(50% + 1px));
          mask: radial-gradient(circle, transparent 0 calc(50% - 5px), #000 calc(50% - 4px) calc(50% + 0px), transparent calc(50% + 1px));
  animation: rotorSpin 22s linear infinite;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(241, 194, 92, .6));
}

/* Inner cream + gold double-ring layered via box-shadow on the image clip */
.glam-medallion__inner {
  position: relative;
  width: 92%;
  height: 92%;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  box-shadow:
    0 0 0 4px rgba(255, 250, 243, .85),
    0 0 0 6px rgba(241, 194, 92, .9),
    0 0 0 9px rgba(255, 239, 196, .35),
    0 30px 60px -22px rgba(232, 62, 140, .55),
    0 14px 30px rgba(75, 42, 120, .35);
}
.glam-medallion__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.7,.3,1), filter .35s ease;
}
.glam-medallion:hover .glam-medallion__img {
  transform: scale(1.05);
  filter: brightness(1.06) saturate(1.08);
}

/* Glassy highlight sweep at top of medallion */
.glam-medallion__shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .35), transparent 55%),
    linear-gradient(160deg, rgba(255, 255, 255, .12) 0%, transparent 30%, transparent 70%, rgba(255, 255, 255, .08) 100%);
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
}

/* Reposition crown above the medallion */
.divas-glam-medallion-wrap .glam-crown {
  top: 6px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 64px;
  height: 36px;
  z-index: 6;
  animation: medallionCrownFloat 4.2s ease-in-out infinite alternate;
}

/* Medallion animation keyframes */
@keyframes medallionFloat {
  0%   { transform: translateY(0)     rotate(-1deg); }
  100% { transform: translateY(-7px)  rotate(1deg); }
}
@keyframes medallionHalo {
  0%   { opacity: .55; transform: scale(.93); }
  100% { opacity: 1;   transform: scale(1.07); }
}
@keyframes rotorSpin {
  to { transform: rotate(360deg); }
}
@keyframes medallionCrownFloat {
  0%   { transform: translateX(-50%) rotate(-3deg) translateY(0); }
  100% { transform: translateX(-50%) rotate(-3deg) translateY(-5px); }
}

/* Responsive sizes */
@media (max-width: 880px) {
  .divas-glam-medallion-wrap { padding: 32px 22px; }
  .glam-medallion { width: 270px; height: 270px; }
  .divas-glam-medallion-wrap .glam-crown { width: 54px; height: 32px; top: 4px; }
}
@media (max-width: 480px) {
  .divas-glam-medallion-wrap { padding: 28px 14px; }
  .glam-medallion { width: 230px; height: 230px; }
  .divas-glam-medallion-wrap .glam-crown { width: 46px; height: 28px; top: 2px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .glam-medallion,
  .glam-medallion__halo,
  .glam-medallion__rotor,
  .divas-glam-medallion-wrap .glam-crown {
    animation: none;
  }
  .glam-medallion:hover {
    transform: none;
  }
}

/* Crown float keyframes (preserved from previous) */
.glam-crown {
  position: absolute;
  top: -30px;
  left: 14px;
  width: 46px;
  height: 26px;
  z-index: 5;
  filter: drop-shadow(0 4px 10px rgba(241, 194, 92, .55));
  animation: crownFloat 4.2s ease-in-out infinite alternate;
}
.glam-crown svg { width: 100%; height: 100%; display: block; }
@keyframes crownFloat {
  0%   { transform: rotate(-3deg) translateY(0); }
  100% { transform: rotate(-3deg) translateY(-4px); }
}

/* Wordmark wrapper */
.divas-glam-title-wrap {
  position: relative;
  display: inline-block;
  margin: 10px 0 18px;
  padding: 18px 14px 22px;
  z-index: 2;
}
/* Soft halo behind wordmark — premium glow, not saturated */
.divas-glam-title-wrap::before {
  content: ""; position: absolute;
  inset: -14px -10px;
  background:
    radial-gradient(55% 65% at 30% 40%, rgba(255, 170, 210, .38), transparent 70%),
    radial-gradient(55% 65% at 75% 70%, rgba(189, 145, 230, .32), transparent 70%);
  filter: blur(26px);
  z-index: 0;
  border-radius: 50%;
  animation: glamPulse 5.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes glamPulse {
  0%   { opacity: 0.55; transform: scale(0.95); }
  100% { opacity: 1;    transform: scale(1.05); }
}

/* DIVAS GLAM wordmark — refined gradient with champagne-gold tip */
/* Specificity bumped (h2.x) to override .feature-block h2 */
h2.divas-glam-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.6rem, 9vw, 6.4rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  position: relative;
  z-index: 2;
  display: inline-block;
}
.divas-glam-title .line {
  display: block;
  background: linear-gradient(
    135deg,
    #FBD6E6 0%,
    #F2A6C9 18%,
    #E83E8C 38%,
    #B85AB8 60%,
    #8E5BC2 78%,
    #E5C97D 100%
  );
  background-size: 220% 100%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, .25))
    drop-shadow(0 8px 22px rgba(232, 62, 140, .35));
  animation: glamGradientShift 9s ease-in-out infinite alternate;
}
.divas-glam-title .line:nth-child(2) {
  margin-left: 0.18em;
  animation-delay: 0.6s;
}
@keyframes glamGradientShift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}

/* Delicate gold underline accent under the wordmark */
.glam-underline {
  position: absolute;
  left: 18px;
  bottom: 4px;
  width: 110px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(241, 194, 92, .25) 8%,
    #E5C97D 35%,
    #F1C25C 55%,
    rgba(241, 194, 92, .35) 88%,
    transparent 100%);
  z-index: 3;
  pointer-events: none;
  border-radius: 2px;
}
.glam-underline::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #F1C25C;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(241, 194, 92, .8);
}

/* Sparkles — minimal, refined, only 4 */
.sparkle {
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0;
  animation: twinkle 4.2s ease-in-out infinite;
  z-index: 5;
}
.sparkle.gold {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F1C25C'%3E%3Cpath d='M12 0 L13.4 10.6 L24 12 L13.4 13.4 L12 24 L10.6 13.4 L0 12 L10.6 10.6 Z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 6px rgba(241, 194, 92, .85));
}
.sparkle.white {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 0 L13.4 10.6 L24 12 L13.4 13.4 L12 24 L10.6 13.4 L0 12 L10.6 10.6 Z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .9));
}
.sparkle.s1 { top: -6px;   right: -8px;  width: 16px; height: 16px; animation-delay: 0s;   }
.sparkle.s2 { top: 38%;    left: -14px;  width: 12px; height: 12px; animation-delay: 1.1s; }
.sparkle.s3 { bottom: 12px; right: 8%;   width: 14px; height: 14px; animation-delay: 2.0s; }
.sparkle.s4 { top: 8%;     right: 30%;   width: 10px; height: 10px; animation-delay: 0.6s; }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40%, 60% { opacity: 1; transform: scale(1) rotate(180deg); }
}

/* Visual side — premium frame */
.divas-glam-feature .feature-block-visual {
  position: relative;
  z-index: 1;
  border: 4px solid rgba(255, 255, 255, .22);
  box-shadow:
    0 30px 60px -20px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 200, 61, .22),
    inset 0 0 0 1px rgba(255, 255, 255, .1);
}

/* Mobile reductions */
@media (max-width: 880px) {
  .glam-crown { width: 38px; height: 22px; left: 8px; top: -24px; }
  .glam-underline { width: 86px; }
  .sparkle.s4 { display: none; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .sparkle, .glam-crown,
  .divas-glam-title-wrap::before,
  .divas-glam-title .line { animation: none; }
  .sparkle { opacity: 0.7; }
}

/* =========================
   Why parents love us (4-pillar)
   ========================= */

/* Mission/vision section — soft blush/lavender panel + 2-col editorial layout */
.meaningful-section {
  position: relative;
  padding: 96px 0;
  background:
    radial-gradient(ellipse 700px 500px at 12% 18%, rgba(232, 213, 240, .45), transparent 60%),
    radial-gradient(ellipse 600px 480px at 88% 82%, rgba(248, 195, 216, .38), transparent 60%),
    linear-gradient(180deg, #FFFAF3 0%, #FFF5F8 50%, #FFFAF3 100%);
}

.meaningful-grid {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 64px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

/* LEFT — editorial real photo of Jenn with a child */
.meaningful-photo {
  position: relative;
  border-radius: 28px;
  overflow: visible;
  z-index: 1;
}
.meaningful-photo::before {
  content: ""; position: absolute;
  inset: -28px -20px -20px -28px;
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(232, 62, 140, .25), transparent 70%),
    radial-gradient(60% 60% at 80% 80%, rgba(232, 213, 240, .55), transparent 70%);
  filter: blur(28px);
  z-index: -1;
  border-radius: 50% 30% 30% 50%;
}
.meaningful-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  border: 6px solid #fff;
  box-shadow: 0 28px 60px -22px rgba(75, 42, 120, .42), 0 0 0 1px var(--line);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center;
}
.meaningful-photo-label {
  position: absolute;
  bottom: -20px;
  right: -16px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-pill);
  padding: 12px 20px;
  box-shadow: 0 18px 40px -16px rgba(75, 42, 120, .35);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 2;
}
.meaningful-photo-label .heart {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  display: grid; place-items: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.meaningful-photo-label span:last-child {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.82rem;
  color: var(--purple-deep);
  letter-spacing: 0.01em;
}

/* RIGHT — content + cards */
.meaningful-content .eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--pink);
  transform: rotate(-2deg);
  margin-bottom: 6px;
}
.meaningful-content h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.4rem);
  color: var(--purple-deep);
  line-height: 1.15;
  margin: 0 0 18px;
}
.meaningful-content .lead {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 14px;
  max-width: 56ch;
}

/* Override the global benefits-grid for inside this section — more compact */
.meaningful-content .benefits-grid {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 28px;
  max-width: none;
}
.meaningful-content .benefit {
  padding: 18px;
}
.meaningful-content .benefit .benefit-icon {
  width: 40px; height: 40px;
  margin-bottom: 10px;
}
.meaningful-content .benefit h4 {
  font-size: 1rem;
  margin: 0 0 4px;
}
.meaningful-content .benefit p {
  font-size: 0.84rem;
  margin: 0;
}

/* Hide the older centered section-head treatment — replaced by inline content */
.meaningful-section .section-head {
  margin-bottom: 64px;
}
.meaningful-section .section-head .lead { line-height: 1.7; }

@media (max-width: 880px) {
  .meaningful-section { padding: 72px 0; }
  .meaningful-grid { grid-template-columns: 1fr; gap: 40px; }
  .meaningful-photo { max-width: 460px; margin: 0 auto; }
  .meaningful-photo img { aspect-ratio: 4 / 4.4; }
  .meaningful-content .benefits-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .meaningful-content .benefits-grid { grid-template-columns: 1fr; }
  .meaningful-photo-label { right: 0; padding: 10px 16px; }
  .meaningful-photo-label span:last-child { font-size: 0.74rem; }
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin: 0 auto;
}
.benefit {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
}
.benefit .benefit-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  color: #fff;
  margin-bottom: 14px;
}
.benefit.pink .benefit-icon { background: var(--pink); }
.benefit.teal .benefit-icon { background: var(--teal); }
.benefit.yellow .benefit-icon { background: var(--yellow); color: var(--purple-deep); }
.benefit.purple .benefit-icon { background: var(--purple); }
.benefit h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--purple-deep);
  margin: 0 0 6px;
}
.benefit p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* =========================
   Reviews
   ========================= */
.reviews-summary {
  display: flex; align-items: center; justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}
.reviews-rating {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--yellow-deep);
  line-height: 1;
}
.reviews-stars {
  color: var(--yellow);
  font-size: 1.4rem;
  letter-spacing: 4px;
}
.reviews-meta { font-size: 0.92rem; color: var(--ink-soft); font-weight: 600; }

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 40px;
}
.review {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.review-stars { color: var(--yellow); letter-spacing: 3px; margin-bottom: 14px; font-size: 1rem; }
.review p {
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}
.review-readmore {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pink);
  text-decoration: none;
  transition: color var(--transition);
}
.review-readmore:hover { color: var(--purple-deep); }
.review-readmore::after { content: " →"; }
.review-author {
  display: flex; align-items: center; gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1.5px dashed var(--line);
}
.review-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  display: grid; place-items: center;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-display);
}
.review-name {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--purple-deep);
  font-family: var(--font-body);
}
.review-source { font-size: 0.78rem; color: var(--ink-soft); font-weight: 600; }

/* =========================
   Gallery
   ========================= */
.gallery-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
  margin-bottom: 40px;
}
.gallery-filter {
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--purple-deep);
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  transition: var(--transition);
}
.gallery-filter:hover { background: rgba(232, 62, 140, .1); color: var(--pink); border-color: var(--pink); }
.gallery-filter.active { background: var(--pink); color: #fff; border-color: var(--pink); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* Editorial gallery — 1 large feature image + supporting tiles
   Override aspect-ratio so items respect grid cell size (no overflow) */
.gallery-editorial {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
  align-items: stretch;
}
.gallery-editorial .gallery-item {
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
}
.gallery-editorial .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-editorial .gallery-item.feature {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 880px) {
  .gallery-editorial {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 170px;
  }
  .gallery-editorial .gallery-item.feature {
    grid-column: span 2;
    grid-row: span 2;
  }
}
.gallery-item {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  border: 2px solid var(--line);
  background: linear-gradient(135deg, var(--pink), var(--teal));
  transition: var(--transition);
}
.gallery-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition);
}
.gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.gallery-item:hover img { transform: scale(1.05); }

.gallery-item[data-label]:not(:has(img))::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: rgba(255, 255, 255, .95);
  font-family: var(--font-display);
  font-size: 0.92rem;
  text-align: center; padding: 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(75, 42, 120, .5) 100%);
}

.gallery-item.tall { aspect-ratio: 1 / 1.4; }

/* =========================
   Our Promise — emotional pledge card
   ========================= */
.promise-section {
  padding: 56px 0 48px;
  position: relative;
}
.promise-card {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-xl);
  padding: 48px 56px;
  text-align: center;
  position: relative;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.promise-card::before,
.promise-card::after {
  content: ""; position: absolute; left: 50%;
  width: 80px; height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  transform: translateX(-50%);
}
.promise-card::before { top: 24px; }
.promise-card::after  { bottom: 24px; }
.promise-eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--pink);
  transform: rotate(-2deg);
  margin-bottom: 8px;
}
.promise-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  color: var(--purple-deep);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
.promise-card p {
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 auto 24px;
  max-width: 580px;
}
.promise-mark {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  color: #fff;
  font-size: 1.4rem;
  margin: 0 auto 18px;
  box-shadow: 0 14px 30px -10px rgba(232, 62, 140, .5);
}
@media (max-width: 720px) {
  .promise-card { padding: 36px 28px; }
  .promise-card h3 { font-size: 1.4rem; }
  .promise-card .btn { white-space: normal; line-height: 1.3; padding: 14px 22px; }
}
@media (max-width: 600px) {
  .promise-card { padding: 32px 20px; }
  .promise-card h3 { font-size: 1.25rem; }
  .promise-card p { font-size: 0.95rem; }
  .promise-card .btn {
    width: 100%;
    font-size: 0.78rem;
    padding: 14px 16px;
    line-height: 1.3;
    white-space: normal;
  }
}

/* =========================
   Final CTA / Footer band
   ========================= */
.cta-band {
  background:
    radial-gradient(60% 60% at 0% 100%, rgba(232, 62, 140, .35) 0%, transparent 60%),
    radial-gradient(60% 60% at 100% 0%, rgba(255, 200, 61, .35) 0%, transparent 60%),
    linear-gradient(135deg, var(--purple-deep), var(--purple));
  color: #fff;
  border-radius: var(--r-xl);
  padding: 56px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band .eyebrow {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.8rem;
  color: var(--yellow);
  transform: rotate(-2deg);
  display: inline-block;
  margin-bottom: 6px;
}
.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band h2 .yw { color: var(--yellow); }
.cta-band p {
  color: rgba(255, 255, 255, .85);
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 1.05rem;
}
.cta-band .hero-actions { justify-content: center; }
.cta-band .btn-secondary {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .25);
}
.cta-band .btn-secondary:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .4); }
@media (max-width: 720px) { .cta-band { padding: 40px 24px; } }
@media (max-width: 600px) {
  .cta-band { padding: 36px 20px; border-radius: var(--r-lg); }
  .cta-band h2 { font-size: 1.7rem; margin-bottom: 12px; }
  .cta-band p { font-size: 0.95rem; margin-bottom: 22px; }
  .cta-band .hero-actions { flex-direction: column; gap: 10px; }
  .cta-band .hero-actions .btn { width: 100%; }
}

/* Global mobile section padding tightening + horizontal overflow guard */
@media (max-width: 600px) {
  body { overflow-x: hidden; }
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 36px; }
  .section-head h2 { font-size: 1.7rem; margin-bottom: 14px; }
  .section-head .lead { font-size: 0.96rem; }
  .section-head .eyebrow { font-size: 1.3rem; }
  .container { padding: 0 18px; }
  .feature-card { padding: 18px; }
  .feature-card h3 { font-size: 1.15rem; }
  .feature-card p { font-size: 0.88rem; }
  .review { padding: 20px; }
  .review p { font-size: 0.9rem; }
  .review-author { padding-top: 14px; margin-top: 14px; }
}

/* =========================
   Service detail page (interior hero)
   ========================= */
.service-hero {
  padding: 56px 0 32px;
  position: relative;
  overflow: hidden;
}
.service-hero::before {
  content: ""; position: absolute; top: -100px; right: -80px;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 200, 61, .25), transparent 70%);
  z-index: 0;
}
.service-hero .container { position: relative; z-index: 1; }
.service-hero h1 { max-width: 800px; }
.service-hero-lead { font-size: 1.15rem; max-width: 660px; }

.service-hero-eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--pink);
  transform: rotate(-2deg);
  margin-bottom: 4px;
}

.service-hero-image {
  margin-top: 32px;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 2px solid var(--line);
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 7;
  background: linear-gradient(135deg, var(--pink), var(--purple));
}
.service-hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* ----- Divas Glam service hero — medallion + text side-by-side ----- */
.service-hero--glam .service-hero-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: center;
}
.service-hero--glam .service-hero-medallion {
  margin: 0;
  padding: 30px 22px;
  flex-shrink: 0;
}
/* Slightly smaller medallion in this context so the H1 still leads */
.service-hero--glam .glam-medallion {
  width: 280px;
  height: 280px;
}
.service-hero--glam .service-hero-text h1 { margin-top: 6px; }

@media (max-width: 880px) {
  .service-hero--glam .service-hero-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    text-align: center;
  }
  .service-hero--glam .service-hero-medallion {
    margin: 0 auto;
    padding: 26px 14px 14px;
  }
  .service-hero--glam .glam-medallion {
    width: 240px;
    height: 240px;
  }
  .service-hero--glam .service-hero-text { text-align: left; }
  .service-hero--glam .service-hero-text .hero-actions { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .service-hero--glam .glam-medallion {
    width: 210px;
    height: 210px;
  }
}

/* =========================
   Detail cards
   ========================= */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.detail {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
}
.detail-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  margin-bottom: 14px;
  color: #fff;
}
.detail-icon.pink { background: var(--pink); }
.detail-icon.teal { background: var(--teal); }
.detail-icon.purple { background: var(--purple); }
.detail-icon.yellow { background: var(--yellow); color: var(--purple-deep); }
.detail h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--purple-deep);
  margin: 0 0 14px;
}
.detail ul { display: flex; flex-direction: column; gap: 8px; }
.detail li {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding-left: 20px;
  position: relative;
  line-height: 1.5;
}
.detail li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pink);
}
.detail.teal li::before { background: var(--teal); }
.detail.yellow li::before { background: var(--yellow); }
.detail.purple li::before { background: var(--purple); }

/* =========================
   Packages
   ========================= */
.packages {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.package {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-xl);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  transition: var(--transition);
  position: relative;
}
.package:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.package.is-popular {
  border: 2px solid var(--pink);
  background: linear-gradient(180deg, rgba(232, 62, 140, .04) 0%, #fff 100%);
  margin-top: 18px; /* extra space so the popular tag is never clipped */
  overflow: visible;
}
.packages { padding-top: 14px; } /* parent grid breathing room for absolute tag */
.package-popular-tag {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  background: var(--yellow);
  color: var(--purple-deep);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 20px;
  border-radius: var(--r-pill);
  box-shadow: 0 6px 16px rgba(255, 200, 61, .4);
  white-space: nowrap;
  z-index: 2;
}
.package-name {
  font-family: var(--font-display);
  font-size: 1.45rem;
  color: var(--purple-deep);
  margin: 0 0 6px;
}
.package-meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 18px;
}
.package ul { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; flex-grow: 1; }
.package li {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  padding-left: 24px;
  position: relative;
}
.package li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--teal-deep);
  font-weight: 800;
}
.package .btn { width: 100%; }

/* =========================
   Stat block (per brand)
   ========================= */
.stat-demo {
  background: linear-gradient(135deg, var(--purple), var(--purple-deep));
  border-radius: var(--r-lg);
  padding: 24px;
  color: #fff;
  display: flex; align-items: center; gap: 18px;
}
.stat-demo .big {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4rem;
  color: var(--yellow);
  line-height: 1;
}
.stat-demo .lbl {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: rgba(255, 255, 255, .7);
}
.stat-demo h5 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  margin: 2px 0 4px;
  color: #fff;
}
.stat-demo p { margin: 0; font-size: 0.88rem; color: rgba(255, 255, 255, .85); }

/* =========================
   Note (info banner)
   ========================= */
.note {
  margin-top: 28px;
  padding: 18px 22px;
  background: #fff;
  border: 2px solid var(--line);
  border-left: 6px solid var(--pink);
  border-radius: var(--r-md);
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 500;
}

/* =========================
   Theme chips
   ========================= */
.chip-grid {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center;
}

/* =========================
   Themed Section — inspiration showcase
   ========================= */
.themed-section {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background:
    linear-gradient(135deg, rgba(232, 62, 140, .04), rgba(232, 213, 240, .12), rgba(255, 200, 61, .06)),
    #FFFAF3;
}
.themed-section::before,
.themed-section::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  z-index: 0;
}
.themed-section::before {
  top: -120px; left: -100px;
  width: 460px; height: 460px;
  background: radial-gradient(circle, rgba(232, 62, 140, .35), transparent 70%);
  animation: blobDriftA 22s ease-in-out infinite alternate;
}
.themed-section::after {
  bottom: -150px; right: -130px;
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(232, 213, 240, .65), transparent 70%);
  animation: blobDriftB 26s ease-in-out infinite alternate;
}
@keyframes blobDriftA {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, 40px) scale(1.05); }
  100% { transform: translate(30px, 80px) scale(1.1); }
}
@keyframes blobDriftB {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -30px) scale(0.95); }
  100% { transform: translate(-80px, 20px) scale(1.05); }
}

.themed-section .container { position: relative; z-index: 1; }

/* Themed grid — DESKTOP: 2-col with text-side and image collage side
   MOBILE: stacked, with images split before/after the text wall */
.themed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas:
    "heading      top-mood"
    "text         bottom-mood"
    "cta          bottom-mood";
  gap: 28px 56px;
  align-items: start;
}
.themed-heading        { grid-area: heading; }
.themed-text           { grid-area: text; }
.themed-cta            { grid-area: cta; align-self: start; }
.theme-moodboard--top  { grid-area: top-mood; align-self: start; }
.theme-moodboard--bottom { grid-area: bottom-mood; align-self: start; }

.themed-heading .eyebrow {
  display: inline-block;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--pink);
  transform: rotate(-2deg);
  margin-bottom: 6px;
}
.themed-heading h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.6rem);
  color: var(--purple-deep);
  line-height: 1.1;
  margin-bottom: 12px;
}
.themed-intro {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 48ch;
  font-weight: 600;
}
.themed-text .lead {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 52ch;
}
.themed-text .ask-line {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--purple-deep);
  margin-top: 14px;
  display: inline-block;
}
.themed-disclaimer {
  font-size: 0.82rem;
  font-weight: 600;
  max-width: 520px;
  margin-top: 14px;
}

/* Sparkles in themed section — only 3, subtle */
.themed-section .theme-sparkle {
  position: absolute;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFD158'%3E%3Cpath d='M12 0 L13.5 10.5 L24 12 L13.5 13.5 L12 24 L10.5 13.5 L0 12 L10.5 10.5 Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  animation: themeTwinkle 4s ease-in-out infinite;
  z-index: 2;
  filter: drop-shadow(0 0 4px rgba(255, 200, 61, .6));
}
.themed-section .theme-sparkle.t1 { top: 12%; left: 6%; width: 18px; height: 18px; animation-delay: 0s; }
.themed-section .theme-sparkle.t2 { top: 28%; right: 12%; width: 14px; height: 14px; animation-delay: 1.5s; }
.themed-section .theme-sparkle.t3 { bottom: 18%; left: 48%; width: 16px; height: 16px; animation-delay: 2.8s; }
@keyframes themeTwinkle {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  40%, 60% { opacity: .85; transform: scale(1) rotate(180deg); }
}

/* Theme moodboard — split into top (2 cards) + bottom (3 cards) */
.theme-moodboard {
  display: grid;
  gap: 14px;
  position: relative;
}
.theme-moodboard--top {
  grid-template-columns: 1fr 1fr;
  margin-bottom: 16px;
}
.theme-moodboard--bottom {
  grid-template-columns: 1fr 1fr 1fr;
}
.theme-moodboard--top .theme-card,
.theme-moodboard--bottom .theme-card { aspect-ratio: 1 / 1.15; }
/* Feature card — slightly bigger / wider */
.theme-card--feature { grid-column: span 2; aspect-ratio: 16 / 10 !important; }
.theme-card--feature .name { font-size: 2rem; }
/* Hide the float — the cards already lift on hover */
@keyframes moodboardFloat { 0% { transform: translateY(0); } 100% { transform: translateY(0); } }
@keyframes moodboardFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}
.theme-card {
  aspect-ratio: 1 / 1.15;
  border-radius: var(--r-lg);
  position: relative;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: 0 18px 40px -16px rgba(75, 42, 120, .35);
  transition: transform .4s ease, box-shadow .4s ease;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 18px;
  background: #f5e8ee; /* fallback if image fails */
}
.theme-card:hover {
  transform: translateY(-5px) rotate(.8deg);
  box-shadow: 0 24px 50px -16px rgba(75, 42, 120, .45);
}
.theme-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .6s ease;
}
.theme-card:hover > img {
  transform: scale(1.05);
}
/* Gradient overlay for text legibility */
.theme-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 100%);
  z-index: 1;
}
.theme-card .name {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
  position: relative;
  z-index: 2;
}
.theme-card .deco {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  color: #fff;
  z-index: 2;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 6px;
}
.theme-card .deco svg { width: 100%; height: 100%; }

/* Enhanced chip hover (with theme tint via class) */
.themed-section .chip-grid {
  justify-content: flex-start;
  margin-bottom: 14px;
}
.themed-section .chip {
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  cursor: default;
}
.themed-section .chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(75, 42, 120, .18);
}
.themed-section .chip.tint-barbie:hover      { background: #FFE0EC; border-color: #FFB7D0; color: var(--pink-deep); }
.themed-section .chip.tint-frozen:hover      { background: #E5EDFF; border-color: #B4C7E7; color: #3F5F8F; }
.themed-section .chip.tint-princess:hover    { background: #FFF4D6; border-color: #F0D27A; color: #8C5B26; }
.themed-section .chip.tint-hello:hover       { background: #FFF0F4; border-color: #FFC7D8; color: var(--pink-deep); }
.themed-section .chip.tint-pinkbow:hover     { background: #FFE7EE; border-color: #FFA6C0; color: var(--pink-deep); }
.themed-section .chip.tint-coquette:hover    { background: #FBE6F0; border-color: #F0BAD4; color: var(--pink-deep); }
.themed-section .chip.tint-anglestitch:hover { background: #DDF2FA; border-color: #9CD2E8; color: #246684; }
.themed-section .chip.tint-capybara:hover    { background: #FFEED8; border-color: #E8B47A; color: #8C5B26; }
.themed-section .chip.tint-axolotl:hover     { background: #FFE4EC; border-color: #FFB6C8; color: #C44A86; }
.themed-section .chip.tint-harry:hover       { background: #ECE0F8; border-color: #C8A3D9; color: var(--purple-deep); }
.themed-section .chip.tint-demon:hover       { background: #2D1B47; border-color: #6B3FA0; color: #FFD158; }
.themed-section .chip.tint-custom:hover      { background: #DFF7F2; border-color: #98DBCB; color: var(--teal-deep); }

/* MOBILE / TABLET — stacked: heading → top images → text → bottom images → CTA */
@media (max-width: 900px) {
  .themed-section { padding: 72px 0; }
  .themed-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "heading"
      "top-mood"
      "text"
      "bottom-mood"
      "cta";
    gap: 24px;
  }
  .themed-heading        { text-align: center; max-width: 560px; margin: 0 auto; }
  .themed-text           { text-align: center; max-width: 560px; margin: 0 auto; }
  .themed-text .lead     { margin-left: auto; margin-right: auto; }
  .themed-text .chip-grid { justify-content: center; }
  .themed-disclaimer     { margin-left: auto; margin-right: auto; }
  .themed-cta            { text-align: center; }
  .themed-intro          { margin-left: auto; margin-right: auto; }

  /* Top moodboard on mobile: 1 large feature + 1 smaller below it */
  .theme-moodboard--top {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 0;
    gap: 12px;
  }
  .theme-moodboard--top .theme-card--feature {
    grid-column: 1 / -1 !important;
    aspect-ratio: 16 / 9 !important;
    width: 100%;
  }
  .theme-moodboard--top .theme-card:nth-child(2) {
    aspect-ratio: 4 / 3 !important;
    width: 70%;
    justify-self: center;
  }

  /* Bottom moodboard on mobile: 1 wide on top + 2 below */
  .theme-moodboard--bottom {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    gap: 10px;
  }
  .theme-moodboard--bottom .theme-card:first-child {
    grid-column: 1 / -1 !important;
    aspect-ratio: 16 / 9 !important;
  }
}
@media (max-width: 600px) {
  .theme-card { padding: 14px; }
  .theme-card .name { font-size: 1.25rem; }
  .theme-moodboard { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .themed-section::before, .themed-section::after,
  .theme-moodboard, .theme-sparkle { animation: none; }
}

/* =========================
   Contact form
   ========================= */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

.contact-form {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--shadow-card);
}
.contact-form h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  margin-bottom: 6px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-row.single { grid-template-columns: 1fr; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-group label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--purple-deep);
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  background: var(--paper);
  color: var(--ink);
  transition: var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--pink);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(232, 62, 140, .15);
}
.form-group textarea { min-height: 130px; resize: vertical; }
.form-actions { margin-top: 6px; }
.form-actions .btn { width: 100%; }
.form-note {
  margin-top: 16px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
  font-weight: 600;
}

.contact-aside .info-card {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  margin-bottom: 16px;
}
.contact-aside h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--purple-deep);
  margin-bottom: 14px;
}
.contact-aside .info-card ol { display: flex; flex-direction: column; gap: 10px; counter-reset: step; }
.contact-aside .info-card li {
  position: relative;
  padding-left: 38px;
  font-size: 0.92rem;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
}
.contact-aside .info-card li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--pink);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 0.85rem;
}
.contact-aside ul.list { display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; color: var(--ink); }
.contact-aside ul.list li {
  padding-left: 18px;
  position: relative;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-soft);
}
.contact-aside ul.list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.social-links {
  display: flex; flex-direction: column; gap: 10px;
}
.social-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: #fff;
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink);
  transition: var(--transition);
}
.social-link:hover { background: rgba(232, 62, 140, .08); color: var(--pink); transform: translateX(2px); }
.social-link-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  display: grid; place-items: center;
}
.social-link-icon svg { width: 20px; height: 20px; }
.social-link strong { display: block; font-size: 0.92rem; color: var(--purple-deep); }
.social-link small { color: var(--ink-soft); font-size: 0.78rem; font-weight: 600; }

/* =========================
   Footer
   ========================= */
.site-footer {
  background:
    radial-gradient(60% 60% at 0% 100%, rgba(232, 62, 140, .15) 0%, transparent 60%),
    radial-gradient(60% 60% at 100% 0%, rgba(255, 200, 61, .12) 0%, transparent 60%),
    linear-gradient(135deg, var(--purple-deep), var(--purple));
  color: #fff;
  padding: 64px 0 28px;
  margin-top: 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }
.footer-brand .brand-logo { display: none; }
.footer-wordmark {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.02;
  margin-bottom: 16px;
  text-decoration: none;
}
.footer-wordmark .wm-line1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: #fff;
  letter-spacing: -0.02em;
}
.footer-wordmark .wm-line2 {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.74rem;
  color: var(--yellow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 6px;
}
.footer-brand p { font-size: 0.92rem; max-width: 320px; color: rgba(255, 255, 255, .85); }
.site-footer h4 {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 18px;
}
.site-footer ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer ul a { color: rgba(255, 255, 255, .85); font-size: 0.93rem; font-weight: 600; }
.site-footer ul a:hover { color: var(--yellow); }
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-social a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  border: 1.5px solid rgba(255, 255, 255, .15);
  display: grid; place-items: center;
  color: #fff;
  transition: var(--transition);
}
.footer-social a:hover { background: var(--yellow); color: var(--purple-deep); border-color: var(--yellow); transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom {
  border-top: 2px dashed rgba(255, 255, 255, .15);
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, .7);
}

/* =========================
   Floating WhatsApp widget — global
   ========================= */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 10px;
  border-radius: var(--r-pill);
  background: #ffffff;
  box-shadow: 0 14px 35px rgba(54, 24, 93, 0.18), 0 2px 8px rgba(54, 24, 93, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-family: var(--font-body);
  transition: transform .3s ease, box-shadow .3s ease;
  max-width: 320px;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(54, 24, 93, 0.26), 0 4px 12px rgba(54, 24, 93, 0.10);
}
.whatsapp-float__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(37, 211, 102, .35);
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}
.whatsapp-float:hover .whatsapp-float__icon,
.whatsapp-float:focus-visible .whatsapp-float__icon {
  box-shadow: 0 8px 22px rgba(37, 211, 102, .55);
  transform: scale(1.05);
}
.whatsapp-float__icon img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.whatsapp-float__text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.whatsapp-float__text strong {
  color: var(--purple-deep);
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.005em;
}
.whatsapp-float__text small {
  color: var(--ink-soft);
  font-size: 0.74rem;
  font-weight: 600;
  margin-top: 1px;
}

@media (max-width: 640px) {
  .whatsapp-float {
    right: 16px;
    bottom: 16px;
    padding: 0;
    gap: 0;
    border-radius: 50%;
    border: none;
    background: transparent;
    box-shadow: 0 10px 30px rgba(37, 211, 102, .4);
  }
  .whatsapp-float__text { display: none; }
  .whatsapp-float__icon {
    width: 60px;
    height: 60px;
  }
}

/* =========================
   Utilities
   ========================= */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 40px; }
.mb-0 { margin-bottom: 0; }
.muted { color: var(--ink-soft); }
.divider {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  border: none;
  margin: 56px 0;
}

@media (max-width: 720px) {
  .section { padding: 64px 0; }
}

/* =========================
   Premium polish pass — micro-interactions, lightbox,
   scroll reveals, animated gradients, WhatsApp pulse
   ========================= */

/* ----- Button micro-interactions ----- */
.btn { transform: translateZ(0); will-change: transform; }
.btn-primary:hover {
  box-shadow:
    0 12px 30px rgba(232, 62, 140, 0.45),
    0 0 0 4px rgba(255, 200, 61, 0.18);
}
.btn-primary:active,
.btn-glam:active,
.btn-ghost:active {
  transform: scale(.97);
  filter: brightness(.96);
  transition-duration: 80ms;
}
.btn-secondary:active {
  transform: scale(.98);
  filter: brightness(.96);
  transition-duration: 80ms;
}
.btn-secondary {
  position: relative;
  overflow: hidden;
}
.btn-secondary::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 0;
  background: var(--purple-deep);
  z-index: -1;
  transition: height .25s ease;
}
.btn-secondary:hover::after { height: 100%; }
.btn-glam:hover {
  box-shadow:
    0 16px 40px rgba(192, 76, 130, .55),
    0 0 0 4px rgba(255, 200, 61, 0.18);
}

/* ----- Feature card image zoom + deeper hover shadow ----- */
.feature-card-image img {
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.feature-card:hover {
  transform: translateY(-7px);
  box-shadow:
    0 36px 70px -28px rgba(75, 42, 120, .5),
    0 16px 30px -16px rgba(75, 42, 120, .28);
}
.feature-card:hover .feature-card-image img {
  transform: scale(1.05);
}

/* ----- Elegant text-link underline animation (content area only) ----- */
.section a:not(.btn):not(.menu-cta):not(.gallery-filter):not(.brand):not(.gallery-item):not(.theme-card):not(.feature-card-link) {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s ease;
}
.section a:not(.btn):not(.menu-cta):not(.gallery-filter):not(.brand):not(.gallery-item):not(.theme-card):not(.feature-card-link):hover {
  background-size: 100% 1.5px;
}

/* ----- Theme chip glow + tiny rotate (extra polish on top of existing tint hovers) ----- */
.themed-section .chip:hover {
  transform: translateY(-2px) rotate(1deg);
  filter: drop-shadow(0 6px 14px rgba(232, 62, 140, .22));
}

/* ----- Gallery — overlay + view icon + soft pink/lavender glow on hover ----- */
.gallery-item {
  cursor: zoom-in;
  transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(232, 62, 140, .35), transparent 70%),
    linear-gradient(180deg, rgba(107, 63, 160, 0) 55%, rgba(107, 63, 160, .35) 100%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
  pointer-events: none;
}
.gallery-item:hover {
  box-shadow:
    0 22px 44px -18px rgba(232, 62, 140, .45),
    0 12px 24px -16px rgba(184, 90, 184, .35);
}
.gallery-item:hover img {
  transform: scale(1.07);
}
.gallery-item .view-icon {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(.85);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--purple-deep);
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 10px 22px rgba(75, 42, 120, .25);
}
.gallery-item .view-icon svg {
  width: 22px; height: 22px;
  display: block;
}
.gallery-item:hover::before { opacity: 1; }
.gallery-item:hover .view-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ----- Lightbox ----- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 40, .92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lightbox.is-open {
  display: flex;
  opacity: 1;
}
.lightbox__img {
  max-width: min(1200px, 96vw);
  max-height: 88vh;
  width: auto; height: auto;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  object-fit: contain;
  background: #1a0e2e;
  transform: scale(.96);
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__caption {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  max-width: 80vw;
  padding: 8px 16px;
  background: rgba(0, 0, 0, .35);
  border-radius: var(--r-pill);
  pointer-events: none;
}
.lightbox__btn {
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .25);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
  z-index: 1;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .26); transform: scale(1.06); }
.lightbox__btn svg { width: 22px; height: 22px; }
.lightbox__close { top: 18px; right: 18px; }
.lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
.lightbox__prev:hover, .lightbox__next:hover { transform: translateY(-50%) scale(1.06); }
@media (max-width: 600px) {
  .lightbox__btn { width: 38px; height: 38px; }
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__close { top: 12px; right: 12px; }
}
body.lightbox-open { overflow: hidden; }

/* ----- Scroll reveals — fade-up with subtle blur removal ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  transition:
    opacity .6s cubic-bezier(.2,.7,.3,1),
    transform .6s cubic-bezier(.2,.7,.3,1),
    filter .55s ease;
  will-change: opacity, transform, filter;
}
[data-reveal="image"] {
  transform: translateY(0) scale(.96);
  filter: blur(2px);
  transition-duration: .65s;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
[data-reveal][data-delay="1"].is-visible { transition-delay: 80ms; }
[data-reveal][data-delay="2"].is-visible { transition-delay: 160ms; }
[data-reveal][data-delay="3"].is-visible { transition-delay: 240ms; }
[data-reveal][data-delay="4"].is-visible { transition-delay: 320ms; }
[data-reveal][data-delay="5"].is-visible { transition-delay: 400ms; }

/* ----- Subtle animated gradients (Divas Glam + final CTA only) ----- */
.feature-block.divas-glam-feature {
  background-size: 200% 200%;
  animation: glamPanShift 28s ease-in-out infinite alternate;
}
.cta-band {
  background-size: 200% 200%;
  animation: ctaPanShift 24s ease-in-out infinite alternate;
}
@keyframes glamPanShift {
  0%   { background-position: 0% 0%, 100% 100%, 50% 50%, 0% 0%; }
  100% { background-position: 100% 100%, 0% 0%, 50% 50%, 100% 100%; }
}
@keyframes ctaPanShift {
  0%   { background-position: 0% 100%, 100% 0%, 0% 0%; }
  100% { background-position: 100% 0%, 0% 100%, 100% 100%; }
}

/* ----- WhatsApp icon idle pulse ----- */
.whatsapp-float__icon {
  animation: waPulse 4s ease-in-out infinite;
}
@keyframes waPulse {
  0%, 70%, 100% {
    box-shadow: 0 6px 16px rgba(37, 211, 102, .35), 0 0 0 0 rgba(37, 211, 102, .45);
  }
  85% {
    box-shadow: 0 6px 16px rgba(37, 211, 102, .35), 0 0 0 14px rgba(37, 211, 102, 0);
  }
}
.whatsapp-float:hover .whatsapp-float__icon,
.whatsapp-float:focus-visible .whatsapp-float__icon {
  animation: none;
}

/* ----- Reduced motion guard for everything in this polish pass ----- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .feature-block.divas-glam-feature,
  .cta-band,
  .whatsapp-float__icon { animation: none !important; }
  .lightbox, .lightbox__img { transition: none !important; }
  .feature-card-image img,
  .gallery-item img { transition: none; }
}