:root {
  --pink-soft: #fbdce8;
  --pink-soft-2: #ffeaf2;
  --white-bright: #ffffff;
  --gold: #c9a35f;
  --gold-deep: #a37a34;
  --gold-shine: linear-gradient(135deg, #f9e3b5, #cda35f, #fff2c9);
  --ink: #2b2326;
  --ink-soft: #5b4e53;
  --border-soft: #e9dbe1;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --shadow-soft: 0 18px 48px rgba(0, 0, 0, 0.12);
  --font-heading: "Playfair Display", serif;
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: radial-gradient(circle at 0% 0%, #fff5fb, #f8f0f4);
}

/* TOP BAR */

.top-bar {
  background: #151017;
  color: #f7f4f9;
  font-size: 0.8rem;
}

.white-top-bar {
  background: #fff7fb;
  color: #1a1a1a;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}


.top-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top-bar a {
  color: #1a1a1a;
  text-decoration: none;
  font-weight: 500;
}

.top-bar a:hover {
  opacity: 0.7;
}

.top-bar-left {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  font-weight: 500;
  color: #3a3a3a;
}

.top-bar-left span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.top-bar-left a {
  color: #3a3a3a;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.25s ease;
}

.top-bar-left a:hover {
  opacity: 0.6;
}

.top-divider {
  opacity: 0.5;
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.top-social {
  display: flex;
  gap: 0.5rem;
}


.top-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 33px;
  height: 33px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6d9a7, #d9b06c, #b98d46);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  animation: breathe 4s ease-in-out infinite;
}

.top-social a .icon {
  width: 24px;
  height: 24px;
  fill: #1a1a1a;
}

/* Hover Effect */
.top-social a:hover {
  transform: scale(1.72);
  box-shadow: 0 0 16px rgba(241, 210, 140, 0.9);
}

/* “Breathing glow” animation */
@keyframes breathe {
  0% {
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
  50% {
    box-shadow: 0 0 18px rgba(241, 210, 140, 0.35);
  }
  100% {
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  }
}


/* HEADER / NAV */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  /*background: #f8f3ef;*/
  background: rgba(248, 243, 239, 0.86);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
width: 72px;
  height: 72px;
  border-radius: 0;   /* or 0 for sharp edges */
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo {
    width: 100%;          /* logo sits nicely inside the circle */
  height: 100%;
  object-fit: contain;
  display: block;
}

.brand-text {
  display: flex;
  flex-direction: column;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 2.7rem;
}

.brand-sub {
  font-size: 0.7rem;
  color: var(--ink-soft);
}

/* Clickable address inside brand-sub (opens Maps) */
.brand-sub .address-link{
  cursor: pointer;
  display: inline-block;
  margin-left: .25rem;
  border-bottom: 1px solid rgba(201, 163, 95, 0.55); /* matches your gold */
  padding-bottom: 1px;
  transition: border-color .15s ease, opacity .15s ease, transform .15s ease;
}

.brand-sub .address-link:hover{
  border-color: rgba(201, 163, 95, 0.95);
  opacity: .95;
  transform: translateY(-0.5px);
}

.brand-sub .address-link:focus-visible{
  outline: 2px solid rgba(201, 163, 95, 0.25);
  outline-offset: 3px;
  border-radius: 6px;
}

.header-center {
  flex: 1;
}

.search-input {
  width: 100%;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.85rem;
  outline: none;
}

.search-input:focus {
  border-color: var(--gold);
}

.header-actions {
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.header-link {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
}

.header-link:hover {
  color: var(--gold-deep);
}

/* BUTTONS */

.btn-solid,
.btn-outline,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-solid {
  background: var(--gold-shine);
  color: #1b1510;
  border: none;
  box-shadow: 0 10px 28px rgba(161, 120, 46, 0.45);
}

.btn-solid:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(161, 120, 46, 0.55);
}

.btn-outline {
  background: transparent;
  color: var(--gold-deep);
  border: 1px solid var(--gold-deep);
}

.btn-outline:hover {
  background: rgba(201, 163, 95, 0.12);
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid transparent;
}

.btn-ghost:hover {
  border-color: rgba(0, 0, 0, 0.06);
}

.small {
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
}

/* NAV */

.nav-toggle {
  display: none;
  background: none;
  border: none;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  background: var(--ink);
}

.main-nav {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem 0.7rem;
  display: flex;
  gap: 1.2rem;
  font-size: 0.85rem;
}

.main-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.main-nav a:hover {
  color: var(--gold-deep);
}

/* HERO */

.hero {
  position: relative;
  height: 824px;
  background: none;
  overflow: hidden;
}

.hero {
  position: relative;
  height: 624px;
  background: none;
  overflow: hidden;
}

/* horizontal track of slides */
.hero-slider {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;              /* lets you drag/scroll with mouse */
  scroll-snap-type: x mandatory; /* snaps slide by slide */
  scroll-behavior: smooth;
}

/* each full-width slide */
.hero-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* your 4 images here */
.hero-slide-1 {
  background-image: url("https://i.postimg.cc/j53c5cXf/03C04A27-89F8-49D7-B425-1F824D5161F7.jpg");
}

.hero-slide-2 {
  background-image: url("https://i.postimg.cc/5tnq7gZ2/95e5203a-5f81-4556-84ff-f7ea535499f7.png");
}

.hero-slide-3 {
  background-image: url("https://i.postimg.cc/XYWzt2Dd/Screenshot-2025-11-19-at-5-13-15-PM.png");
}

.hero-inner {
  position: relative;
  max-width: 1185px;
  margin: 0 auto;
  height: 100%;
  padding: 2.8rem 1rem;
  display: flex;
  align-items: center;
}

.hero-copy {
  max-width: 430px;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 28px;
  padding: 1.8rem 1.9rem;
  box-shadow: var(--shadow-soft);
}

.hero-kicker {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}

.hero h1 {
  margin: 0 0 0.6rem;
  font-family: var(--font-heading);
  font-size: 2.4rem;
}

.hero-desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.75;
}

.hero-cta {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}

/* =========================
   HERO BUBBLE OVER IMAGE
   ========================= */

.hero{ position: relative; }

.hero-bubble{
  position: absolute;
  z-index: 3;
  left: 14px;
  top: 16px;
  max-width: 300px;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 18px;
  padding: 12px 14px;

  box-shadow: 0 18px 38px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-bubble-title{
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 18px;
  color: rgba(15,15,15,.92);
  line-height: 1.05;
}

.hero-bubble-sub{
  margin-top: 6px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: rgba(15,15,15,.68);
}

/* On desktop: hide bubble so your full hero layout stays */
@media (min-width: 901px){
  .hero-bubble{ display:none; }
}

.feature-row {
  padding: 3rem 1rem 3.2rem;
  background: #fff7fb; /* softer than pure white */
}

.feature-grid {
  max-width: 1150px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.7rem;
}

.feature-card {
  position: relative;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(199, 151, 114, 0.25); /* rose-gold tint */
  overflow: hidden;
  background: linear-gradient(135deg, #fde8f1, #fbdce9);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  animation: featureBreathe 10s ease-in-out infinite;
}

/* Hover: lift + glow (keep text visible) */
.feature-card:hover {
  animation: none;
  transform: translateY(-16px);
  box-shadow: 0 20px 40px rgba(199, 151, 114, 0.28);
  border-color: rgba(199, 151, 114, 0.5);
}

/* respect users who turn off motion */
@media (prefers-reduced-motion: reduce) {
  .feature-card {
    animation: none;
  }
}

/* IMAGE AREA + ZOOM */

.feature-image {
  position: relative;
  height: 280px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  overflow: hidden; /* so zoomed image stays clipped */
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease; /* zoom animation */
}

/* zoom the image only on hover */
.feature-card:hover .feature-image img {
  transform: scale(1.06);
}

.feature-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 20% 0%,
    rgba(255, 255, 255, 0.15),
    transparent 55%
  );
  pointer-events: none;
}

/* background images (if you still use them) */

.feature-card-1 .feature-image {
  background-image: url("https://i.postimg.cc/ZnNzTWSX/9b6dd4be-113d-47a8-98b9-3f3212adeee1.png");
}

.feature-card-2 .feature-image {
  background-image: url("https://i.postimg.cc/cCw2pP7Z/Screenshot-2025-11-13-at-9-06-00-PM.png");
}

.feature-card-3 .feature-image {
  background-image: url("https://i.postimg.cc/0yXv0Rcm/Screenshot-2025-10-17-at-1-16-54-AM.png");
}

/* TEXT AREA */

.feature-content {
  padding: 1.6rem 1.9rem 1.8rem;
}

.feature-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #8f6b74;
  display: block;
  margin-bottom: 0.45rem;
}

.feature-content h2 {
  color: #2e1f26;
  margin: 0 0 0.4rem;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  position: relative;
  display: inline-block;
}

.feature-content h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.3rem;
  width: 52%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f6d9a7, #b98d46);
}

.feature-content p {
  font-size: 0.92rem;
  color: #5a4a52;
  margin-bottom: 1.2rem;
  line-height: 1.65;
}

/* RESPONSIVE TWEAK: STACK CARDS ON SMALL SCREENS */
@media (max-width: 900px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* PRICING */

.pricing-section {
  padding: 3.2rem 1rem 3.5rem;
  background: #fdfbff;
}

.pricing-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.pricing-inner h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.pricing-inner p {
  max-width: 620px;
  margin: 0 auto 1.8rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.pricing-image-wrapper {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px dashed var(--border-soft);
  background: var(--white-bright);
  padding: 0.4rem;
}

.pricing-image-wrapper img {
  width: 100%;
  display: block;
  border-radius: calc(var(--radius-xl) - 6px);
}

/* BEFORE & AFTER SLIDER */

.ba-section {
  padding: 3.3rem 1rem;
  background: var(--pink-soft);
}

.ba-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.ba-inner h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 0.35rem;
}

.ba-inner p {
  margin-bottom: 1.7rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.ba-section {
  padding: 3.3rem 1rem;
  background: var(--pink-soft);
}

.ba-slider {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  cursor: ew-resize;

  /* THIS gives it a fixed height like the dog example */
  aspect-ratio: 16 / 7;               /* adjust ratio if you want it taller/shorter */
  background: #000;                    /* fallback while images load */
}


.ba-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;   /* change to 'center 60%' etc if you need to shift the hands */
  user-select: none;
  pointer-events: none;
}

.ba-overlay {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;         /* so left controls the line position */
}

.ba-handle-knob {
  position: relative;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--gold-shine);
  border: 2px solid #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.ba-handle-knob::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -999px;
  width: 2px;
  height: 2000px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
}

/* TESTIMONIALS */

.testimonials {
  padding: 3.4rem 1rem;
  background: var(--white-bright);
}

.test-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.test-inner h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 1.6rem;
}

.test-track {
  display: flex;
  gap: 1.2rem;
  overflow: hidden;
  scroll-behavior: smooth;
}

.test-card {
  flex: 0 0 100%;
  max-width: 100%;
  background: #fff7fb;
  border-radius: var(--radius-xl);
  padding: 1.8rem 1.6rem;
  text-align: left;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}

.test-quote {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.test-name {
  margin-top: 1rem;
  font-weight: 600;
}

.test-stars {
  color: #f3b400;
  font-size: 1rem;
}

.test-controls {
  margin-top: 1.1rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.test-controls button {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

/* WORK & BLOG */

.work-blog {
  padding: 3.4rem 1rem;
  background: #fff7fb; /* soft pink backdrop, same family as feature-row */
}

.work-blog-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
}

.work-card,
.blog-card {
  position: relative;
  background: linear-gradient(135deg, #fde8f1, #fbdce9);
  border-radius: var(--radius-xl);  
  overflow: hidden;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08);
  display: grid;
  grid-template-rows: 675px auto;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
  animation: featureBreathe 10s ease-in-out infinite; /* reuse breathing */

}

/* hover lift + stronger gold glow */
.work-card:hover,
.blog-card:hover {
  animation: none; /* pause breathing on hover */
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(199, 151, 114, 0.28);
  border-color: rgba(199, 151, 114, 0.5);
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .work-card,
  .blog-card {
    animation: none;
  }
}

.work-image,
.blog-image {
  position: relative;
  background-size: cover;
  background-position: center center;
}

.work-image {
  background-image: url("https://i.postimg.cc/kgsGrpwt/Screenshot-2025-11-18-at-1-21-46-AM.png");
}

.blog-image {
  background-image: url("https://i.postimg.cc/SK5ykF9F/Screenshot-2025-11-18-at-1-36-55-AM.png");
}

.work-body,
.blog-body {
  padding: 1.6rem 1.9rem 1.8rem;
}

.work-body h3,
.blog-body h3 {
  margin: 0 0 0.55rem;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: #2e1f26;
  position: relative;
  display: inline-block;
}

.work-body h3::after,
.blog-body h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.4rem;
  width: 48%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f6d9a7, #b98d46);
}

.work-body p,
.blog-body p {
  font-size: 0.92rem;
  color: #5a4a52;
  line-height: 1.65;
  margin-bottom: 1.2rem;
}


/* BUTTONS INSIDE THESE CARDS STAY AS-IS, BUT THEY'LL POP MORE ON PINK */

/* RESPONSIVE: STACK ON MOBILE */
@media (max-width: 900px) {
  .work-blog-inner {
    grid-template-columns: 1fr;
  }
}

/* INSTAGRAM */

.instagram {
  padding: 3.2rem 1rem 3.5rem;
  background: var(--white-bright);
}

.insta-header {
  max-width: 1100px;
  margin: 0 auto 1.6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.insta-header h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.6rem;
}

.insta-header p {
  margin: 0.25rem 0 0;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.insta-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;          /* horizontal row */
  gap: 1.2rem;
  overflow: hidden;       /* hides the overflow */
  scroll-behavior: smooth;
}

.insta-item {
  border-radius: 22px;
  min-width: 260px;       /* controls how many show at once */
  height: 360px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.insta-1 {
  background-image: url("https://i.postimg.cc/LsxnkQJd/Screenshot-2025-11-18-at-10-47-08-PM.png");
}
.insta-2 {
  background-image: url("https://i.postimg.cc/nzk0qZ1m/Screenshot-2025-11-16-at-3-31-59-AM.png");
}
.insta-3 {
  background-image: url("https://i.postimg.cc/BvkfKTMj/Screenshot-2025-11-18-at-8-37-17-PM.png");
}
.insta-4 {
  background-image: url("https://i.postimg.cc/CKffYT7W/Screenshot-2025-11-18-at-11-53-30-PM.png");
}
.insta-5 {
  background-image: url("https://i.postimg.cc/g23zdBDD/Screenshot-2025-11-18-at-10-59-15-PM.png");
}
.insta-6 { 
   background-image:
url("https://i.postimg.cc/TYph89B8/Screenshot-2025-11-18-at-10-49-24-PM.png")
}
.insta-7 { 
   background-image:
url("https://i.postimg.cc/pdDpGL4y/Screenshot-2025-11-18-at-10-50-03-PM.png")
}
.insta-8 {
  background-image: url("https://i.postimg.cc/SxyCbvzy/Screenshot-2025-11-18-at-11-03-25-PM.png");
}
.insta-9 {
  background-image: url("https://i.postimg.cc/kXBNjWcm/Screenshot-2025-11-19-at-4-58-16-PM.png");
}
.insta-10 {
  background-image: url("https://i.postimg.cc/3x2v610n/Screenshot-2025-11-19-at-4-59-20-PM.png");
}
.insta-11 {
  background-image: url("https://i.postimg.cc/L61YYDDg/Screenshot-2025-11-19-at-5-00-07-PM.png");
}
.insta-12 {
  background-image: url("https://i.postimg.cc/YSZjCmFC/Screenshot-2025-11-19-at-5-04-02-PM.png");
}
.insta-13 {
  background-image: url("https://i.postimg.cc/k51KF4b7/Screenshot-2025-11-19-at-5-02-19-PM.png");
}
.insta-14 {
  background-image: url("https://i.postimg.cc/Vvc6jQD9/Screenshot-2025-11-19-at-5-04-22-PM.png");
}
.insta-15 {
  background-image: url("https://i.postimg.cc/gJydbwHw/Screenshot-2025-11-19-at-5-06-38-PM.png");
}
.insta-16 { 
   background-image:
url("https://i.postimg.cc/Jz9Wy3TM/Screenshot-2025-11-16-at-3-33-58-AM.png")
}
.insta-17 {
  background-image: url("https://i.postimg.cc/c1Xy7GDk/Screenshot-2025-11-19-at-5-08-27-PM.png");
}
.insta-18 {
  background-image: url("https://i.postimg.cc/QdqRyQ80/Screenshot-2025-11-18-at-8-33-21-PM.png");
}
.insta-19 {
  background-image: url("https://i.postimg.cc/QdqRyQ80/Screenshot-2025-11-18-at-8-33-21-PM.png");
}
.insta-20 {
  background-image: url("https://i.postimg.cc/QdqRyQ80/Screenshot-2025-11-18-at-8-33-21-PM.png");
}
.insta-21 {
  background-image: url("https://i.postimg.cc/QdqRyQ80/Screenshot-2025-11-18-at-8-33-21-PM.png");
}
.insta-22 {
  background-image: url("https://i.postimg.cc/QdqRyQ80/Screenshot-2025-11-18-at-8-33-21-PM.png");
}
.insta-23 {
  background-image: url("https://i.postimg.cc/QdqRyQ80/Screenshot-2025-11-18-at-8-33-21-PM.png");
}
.insta-24 {
  background-image: url("https://i.postimg.cc/QdqRyQ80/Screenshot-2025-11-18-at-8-33-21-PM.png");
}

/* PRODUCT HERO */

.product-hero {
  position: relative;
  min-height: 650px;
  background-image: url("https://i.postimg.cc/SNJ5W2Y9/PNG-image.png");
  background-size: cover;
  background-position: center;
  color: #ffffff;
  isolation: isolate;  /* ✅ ensures layering behaves */
}

.product-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  /* lighter overlay so the image shows */
  background: radial-gradient(
    circle at 0% 0%,
    rgba(251, 220, 232, 0.25),
    rgba(0, 0, 0, 0.22)
  );
}

.product-inner {z-index: 2;
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 1rem;
}

.product-inner h2 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin: 0 0 0.5rem;
}

.product-inner p {
  max-width: 480px;
  font-size: 0.95rem;
  margin-bottom: 1.3rem;
}

/* =========================
   PRODUCTS HERO FIX (visibility)
   ========================= */
.product-hero{
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* If your product image is set as a background in CSS, keep it here.
   Replace URL with your real product image if needed. */
.product-hero{
  background-image: url("https://i.postimg.cc/YOUR_IMAGE.png");
}

/* Overlay was likely nuking the image — soften it */
.product-hero .product-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 45%,
    rgba(0,0,0,0.05) 100%
  );
  pointer-events: none;
}

/* Make text readable without bleaching the image */
.product-hero .product-inner{
  position: relative;
  z-index: 2;
}

/* FOOTER */

.footer {
  background: #151017;
  color: #f2edf4;
  padding: 2.5rem 1rem 1rem;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  font-size: 0.85rem;
}

.footer h4 {
  margin-top: 0;
  margin-bottom: 0.7rem;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--gold-shine);
  color: #111;
  font-size: 0.7rem;
  text-decoration: none;
  margin-right: 0.3rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li + li {
  margin-top: 0.25rem;
}

.footer-col a {
  color: #f2edf4;
  text-decoration: none;
}

.footer-col a:hover {
  text-decoration: underline;
}

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.8rem;
  padding-bottom: 1.2rem;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-cta {
  display: flex;
  gap: 0.6rem;
}

/* RESPONSIVE */

@media (max-width: 992px) {
  .header-center {
    display: none;
  }

  .header-actions {
    display: none;
  }

  .nav-toggle {
    display: flex;
    margin-left: auto;
  }

  .main-nav {
    display: none;
    flex-direction: column;
    padding: 0.5rem 1rem 1.1rem;
  }

  .main-nav.open {
    display: flex;
  }

  .hero {
    height: auto;
  }

  .hero-inner {
    padding: 2.2rem 1rem;
  }

  .hero-copy {
    margin: 0 auto;
  }

  .feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .work-blog-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .insta-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .top-bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-copy h1 {
    font-size: 2.1rem;
  }

  .insta-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .test-track {
    scroll-snap-type: x mandatory;
  }

  .test-card {
    scroll-snap-align: start;
  }
}
/* ===========================
   NIICE JOURNAL (BLOG PAGE)
   =========================== */

.blog-page {
  background: #fff;
}

/* top intro text */

.blog-main {
  max-width: 1200px;
  margin: 0 auto 4rem;
  padding: 6rem 1.5rem 4rem;
}

.blog-top-intro {
  margin-bottom: 2.5rem;
}

.blog-top-intro .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: #b97c96;
  margin-bottom: 0.6rem;
}

.blog-top-intro h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  color: #3a2830;
  margin-bottom: 0.4rem;
}

.blog-top-intro .sub {
  font-size: 0.98rem;
  color: #eb2da9;
}

/* FEATURED BANNER */

.blog-feature {
  margin-bottom: 2.75rem;
}

.blog-title-gold {
  background: linear-gradient(
    90deg,
    #b67a3a 0%,
    #d8ab57 40%,
    #f1d08b 75%,
    #f8e6bd 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.blog-feature-card {
  display: block;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.08);
  background: #000;
}

.blog-feature-image {
  position: relative;
  width: 100%;
  height: 555px;
}

.blog-feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.96;
}

.blog-feature-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 1.7rem 1.6rem;
  background: linear-gradient(180deg, rgba(206, 170, 218, 0.113) 0%, rgba(0,0,0,0.75) 100%);
  color: #fff;
}

.feature-tag {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 0.35rem;
  opacity: 0.92;
}

.feature-title {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 0.35rem;
}

.feature-snippet {
  font-size: 0.9rem;
  opacity: 0.9;
}

/* GRID OF CARDS */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.8rem;
  margin-bottom: 2.5rem;
}

.blog-item {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border: 1px solid rgba(255, 192, 213, 0.6);
}

.blog-item-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.blog-item-premium {
  border-radius: 22px;
  background: #fffdfa;
  border: 1px solid rgba(214, 172, 110, 0.35);
  box-shadow: 0 14px 40px rgba(214, 172, 110, 0.18);
}

.blog-item-premium .blog-thumb-wrap {
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  overflow: hidden;
}

.blog-item-premium:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 52px rgba(214, 172, 110, 0.24);
  transition: all 0.22s ease;
}

.blog-item-premium .blog-title {
  font-size: 1.15rem;
}

.blog-thumb-wrap {
  width: 100%;
  height: 190px;
  overflow: hidden;
}

/* FORCE ALL BLOG COVERS TO MATCH PRESS-ON CARD HEIGHT */
.blog-thumb-wrap,
.blog-card-eyebrow {
  width: 100%;
  height: 260px !important;    /* MATCH THIS HEIGHT TO THE PRESS-ON CARD */
  overflow: hidden;
  display: block;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/* Make all images fill the frame equally */
.blog-thumb-wrap img,
.blog-card-eyebrow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-item-body {
  padding: 1.3rem 1.2rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-tag {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #b97c96;
  margin-bottom: 0.4rem;
}

.blog-title {
  font-size: 1.1rem;
  color: #3a2830;
  margin-bottom: 0.45rem;
}

.blog-snippet {
  font-size: 0.95rem;
  line-height: 1.55;
  color: #5a3f48;
  flex: 1;
}

/* PAGINATION */

.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.page-btn {
  border: 1px solid #e4bfd0;
  background: #fff;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: #7d5666;
}

.page-btn.active {
  background: #f4c9dd;
  border-color: #f4c9dd;
  color: #3a2830;
  font-weight: 600;
}

.page-btn.disabled {
  opacity: 0.4;
  cursor: default;
}

/* RESPONSIVE TWEAKS */

@media (max-width: 768px) {
  .blog-main {
    padding-top: 5rem;
  }

  .blog-feature-image {
    height: 220px;
  }

  .feature-title {
    font-size: 1.25rem;
  }
}
/* ========== SINGLE POST LAYOUT ========== */

.blog-page {
  background: radial-gradient(circle at top left, #ffe9f3 0%, #fff7fb 35%, #ffffff 100%);
}

.blog-main.single-post {
  max-width: 1100px;
  margin: 0 auto 4rem;
  padding: 6rem 1.5rem 4rem;
}

/* The main article card */
.single-post .post-article {
  max-width: 780px;
  margin: 0 auto 3rem;
  background: #ffffff;
  padding: 2.4rem 2.3rem 2.5rem;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(244, 201, 221, 0.7);
}

/* ===== Comparison table for blog posts ===== */

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-size: 0.96rem;
  line-height: 1.6;
}

.comparison-table thead th {
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid rgba(244, 201, 221, 0.7);
  background: rgba(255, 247, 251, 0.9);
  color: #3b252f;
  font-weight: 600;
}

.comparison-table tbody td {
  padding: 0.85rem 1rem;
  vertical-align: top;
  color: #5a3f48;
}

.comparison-table tbody tr:nth-child(odd) {
  background: #fff;
}

.comparison-table tbody tr:nth-child(even) {
  background: #fff7fb;
}

.comparison-table tbody tr:hover {
  background: #ffeaf5;
  transition: background 0.2s ease;
  cursor: default;
}

/* Hero image at top */
.post-hero-image {
  margin: -0.6rem -0.6rem 1.8rem;
  border-radius: 20px;
  overflow: hidden;
  max-height: 360px;            /* controls how tall the hero feels */
}

.post-hero-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 60%;      /* keeps the hand + glass nicely framed */
  background: #fdf2f6;  /* soft background so empty space looks intentional */
}

.post-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.3rem;
}

.post-share {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  margin: 1.5rem 0 2rem;
  padding-left: 1rem;
  color: #b97c96;
}

.post-share span {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: #8a6a78;

}

.post-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  text-decoration: none;
  font-size: 0.75rem;
  padding: 0.4rem 0.7rem;
  background: #f7e8ef;
  color: #b97c96;
  border-radius: 50%;
  font-weight: 600;
  transition: 0.25s;
}

.post-share a img {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
}

/* Bottom CTA image frame */
.post-cta-image {
  flex: 0 0 280px;       /* controls width */
  max-width: 280px;
  height: 220px;         /* controls frame height */
  border-radius: 16px;
  overflow: hidden;
  background: #f8f0f4;    /* soft background to match brand */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
}

/* Image inside the frame */
.post-cta-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* <<< SHOWS THE WHOLE IMAGE */
  object-position: center;
  display: block;
}

/* Instagram gradient */
.post-share-icon.ig {
  background: radial-gradient(circle at 30% 30%, #f9ed32, #ee2a7b 40%, #6228d7 100%);
}

/* TikTok black */
.post-share-icon.tt {
  background: #000000;
}

/* Facebook blue */
.post-share-icon.fb {
  background: #1877f2;
}

.post-share a:hover {
  transform: translateY(-2px);
}

.post-share a:hover {
  background: #b97c96;
  color: #fff;
}

/* Instagram gradient button */
.post-share a:nth-of-type(1) {
  background: radial-gradient(circle at 30% 30%, #f9ed32, #ee2a7b 40%, #6228d7 100%);
  color: white;
}

/* TikTok black button */
.post-share a:nth-of-type(2) {
  background: #000;
  color: white;
}

/* Facebook blue button */
.post-share a:nth-of-type(3) {
  background: #1877f2;
  color: white;
}
/* Title + meta */

.post-article h1 {
  font-size: 2.1rem;
  line-height: 1.2;
  color: #3a2830;
  margin-bottom: 0.45rem;
}

.post-meta {
  font-size: 0.9rem;
  color: #8a6a78;
  margin-bottom: 1.6rem;
}

/* Body text */

.post-body {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #4c343e;
}

.post-body h2 {
  font-size: 1.2rem;
  margin-top: 1.8rem;
  margin-bottom: 0.6rem;
  color: #3a2830;
}

.post-body p {
  margin-bottom: 0.9rem;
}

/* CTA block at bottom */

.post-cta {
  margin-top: 2.6rem;
  padding: 1.7rem 1.5rem;
  border-radius: 18px;
  background: #fff5fb;
  border: 1px solid rgba(244, 201, 221, 0.9);
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
  justify-content: space-between;
}

.post-cta a {
  padding: 0.9rem 1.6rem;
  background: #f6dce7;
  border-radius: 12px;
  font-weight: 600;
  color: #b97c96;
  border: 1px solid #eac7d7;
  transition: 0.25s;
}

.post-cta a:hover {
  background: #b97c96;
  color: white;
  border-color: #b97c96;
}

.post-cta h2 {
  font-size: 1.25rem;
  margin-bottom: 0.35rem;
  color: #3a2830;
}

.post-cta p {
  margin: 0 0 0.9;
  color: #6f4c59;
  max-width: 420px;
}

.post-cta-actions {
  display: flex;
  gap: 0.7rem;
}

.btn-primary,
.btn-outline {
  display: inline-block;
  padding: 0.55rem 1.25rem;
  border-radius: 999px;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.btn-primary {
  background: #f4c9dd;
  border: 1px solid #f4c9dd;
  color: #3a2830;
  font-weight: 600;
}

.btn-outline {
  background: transparent;
  border: 1px solid #e2b9cf;
  color: #6f4c59;
}

/* Mobile tweaks */

@media (max-width: 768px) {
  .blog-main.single-post {
    align-items: flex-start;
  }

  .single-post .post-article {
    padding: 1.9rem 1.4rem 2.1rem;
    border-radius: 20px;
  }

  .post-hero-image {
    margin: -0.8rem -0.8rem 1.3rem;
  }

  .post-cta {
    align-items: flex-start;
  }

  .post-cta-actions {
    display: flex;
    gap: 0.7rem;
  }

  .post-cta-image {
    flex-basis: 100%;
    max-width: 100%;
    margin-top: 1rem;
  }
}

/* ===========================
   WORK WITH US / CAREERS PAGE
   =========================== */

.careers-page {
  background: radial-gradient(circle at top left, #ffeef8 0%, #fff7fb 30%, #ffffff 70%);
}

/* HERO */

.careers-hero {
  padding: 6rem 1.5rem 4rem;
}

.careers-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.5rem 3rem;
  border-radius: 28px;
  background: linear-gradient(135deg, #fbe3ef 0%, #f7d8f0 35%, #f4e6ff 70%, #ffffff 100%);
  box-shadow: 0 22px 55px rgba(180, 130, 150, 0.18);
  color: #3b2631;
}

.careers-hero-inner .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: #b97c96;
  margin-bottom: 0.8rem;
}

.careers-hero-inner h1 {
  font-size: 2.5rem;
  line-height: 1.1;
  margin-bottom: 1rem;
}

.careers-hero-text {
  max-width: 620px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: #5b3d48;
  margin-bottom: 1.8rem;
}

.careers-hero-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem 2rem;
}

.careers-hero-points li {
  font-size: 0.95rem;
  line-height: 1.5;
  padding-left: 1.4rem;
  position: relative;
  color: #4a313b;
}

.careers-hero-points li::before {
  content: "★";
  position: absolute;
  left: 0;
  top: 0.1rem;
  font-size: 0.8rem;
  color: #d19a9f;
}

/* WHY WORK WITH US */

.careers-intro {
  padding: 0 1.5rem 4.5rem;
}

.careers-card {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 3rem 3.4rem;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(209, 159, 180, 0.18);
}

.careers-card h2 {
  font-size: 1.8rem;
  margin-bottom: 0.9rem;
}

.careers-card > p {
  font-size: 1rem;
  line-height: 1.7;
  color: #5a3f48;
  margin-bottom: 2.1rem;
}

.careers-perks-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.careers-perk {
  background: #fff7fb;
  border-radius: 18px;
  padding: 1.4rem 1.3rem;
  border: 1px solid rgba(234, 195, 214, 0.7);
}

.careers-perk h3 {
  font-size: 1rem;
  margin-bottom: 0.45rem;
  color: #4a313b;
}

.careers-perk p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #6a4b57;
}

/* FORM SECTION */

.careers-form-section {
  padding: 0 1.5rem 5.5rem;
}

.careers-form-header {
  max-width: 800px;
  margin: 0 auto 2.4rem;
  text-align: center;
}

.careers-form-header h2 {
  font-size: 1.9rem;
  margin-bottom: 0.6rem;
}

.careers-form-header p {
  font-size: 1rem;
  line-height: 1.7;
  color: #5a3f48;
}

.careers-form {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.8rem 2.6rem 3rem;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(209, 159, 180, 0.16);
}

.careers-form .form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem 1.8rem;
  margin-bottom: 1.4rem;
}

.careers-form .form-field {
  display: flex;
  flex-direction: column;
}

.careers-form .form-field.full-width {
  grid-column: 1 / -1;
}

.careers-form label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 0.4rem;
  color: #8b6270;
}

.careers-form input,
.careers-form select,
.careers-form textarea {
  border-radius: 12px;
  border: 1px solid #f0cfe0;
  padding: 0.8rem 0.9rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: #3b2631;
  background: #fffdfd;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.careers-form input::placeholder,
.careers-form textarea::placeholder {
  color: #c09aaa;
}

.careers-form input:focus,
.careers-form select:focus,
.careers-form textarea:focus {
  outline: none;
  border-color: #d9a3ba;
  box-shadow: 0 0 0 2px rgba(217, 163, 186, 0.3);
  background: #ffffff;
}

.careers-form textarea {
  resize: vertical;
  min-height: 150px;
}

.careers-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  margin-top: 1.8rem;
}

.careers-form-footer .small-note {
  font-size: 0.8rem;
  line-height: 1.5;
  color: #8c6574;
  max-width: 430px;
}

/* Button: reuse existing .btn styles if you have them */
.careers-form .btn.btn-primary {
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  background: linear-gradient(135deg, #d79aa8 0%, #c57a9b 40%, #b86e90 100%);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(184, 110, 144, 0.45);
  transition: transform 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

.careers-form .btn.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(184, 110, 144, 0.55);
  opacity: 0.96;
}

.careers-form .btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 10px 24px rgba(184, 110, 144, 0.4);
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .careers-hero-inner {
    padding: 2.4rem 1.9rem;
  }

  .careers-hero-points {
    grid-template-columns: 1fr;
  }

  .careers-card {
    padding: 2.4rem 1.9rem 2.6rem;
  }

  .careers-perks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .careers-form {
    padding: 2.2rem 1.7rem 2.4rem;
  }

  .careers-form .form-row {
    grid-template-columns: 1fr;
  }

  .careers-form-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 600px) {
  .careers-hero {
    padding-top: 4.5rem;
  }

  .careers-hero-inner h1 {
    font-size: 2rem;
  }

  .careers-perks-grid {
    grid-template-columns: 1fr;
  }
}

/* ================= NIICE VIP PAGE ================= */

.vip-page {
  background: #fff7fb;
}

/* Hero band */

.vip-hero {
  padding: 6rem 1.5rem 4rem;
  background: radial-gradient(circle at top left, #ffeaf7, #fff7fb 50%, #ffeef9);
}

.vip-hero-inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: left;
}

.vip-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: #b97c96;
  margin-bottom: 0.75rem;
}

.vip-hero h1 {
  font-size: 2.6rem;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: #412732;
}

.vip-hero-text {
  font-size: 1.05rem;
  line-height: 1.8;
  max-width: 620px;
  color: #5a3f48;
}

.vip-hero-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Plans */

.vip-main {
  padding-bottom: 5rem;
}

.vip-section-header {
  max-width: 880px;
  margin-bottom: 3rem;
  text-align: center;
  padding: 0 1.5rem;
}

.vip-section-header h2 {
  font-size: 2.1rem;
  color: #3b252f;
  margin-bottom: 0.75rem;
}

.vip-plans-header p {
  font-size: 0.98rem;
  color: #8a6a78;
}

.vip-plans {
  max-width: 1200px;
  margin: 5rem auto 6rem;
  padding: 0 1.5rem;
}

.vip-plans-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (min-width: 1150px) {
  .vip-plans-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.vip-plan-card {
  position: relative;
  background: #ffffff;
  border-radius: 32px;
  padding: 2.4rem 2.1rem 2.3rem;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(244, 201, 221, 0.9);
  display: flex;
  flex-direction: column;
}

.vip-plan-featured {
  background: radial-gradient(circle at top left, #ffe6f3 0, #ffffff 55%);
  border-color: rgba(185, 124, 150, 0.6);
}

.vip-plan-badge {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  padding: 0.3rem 0.9rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  background: #b97c96;
  color: #ffffff;
}

.vip-plan-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #b97c96;
  margin-bottom: 0.6rem;
}


.vip-plan-name {
  font-size: 1.5rem;
  color: #3b252f;
  margin-bottom: 0.9rem;
}

.vip-plan-card h3 {
  font-size: 1.35rem;
  margin-bottom: 0.3rem;
}

.vip-plan-price {
  font-size: 1.1rem;
  margin-bottom: 1.6rem;
  color: #3b252f;
}

.vip-plan-price .vip-amount {
  font-size: 2rem;
  font-weight: 700;
}

.vip-included-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #b97c96;
  margin-bottom: 0.15rem;
}

.vip-included-main {
  font-size: 0.95rem;
  color: #4c3440;
  margin-bottom: 1.1rem;
}

.vip-plan-price .vip-period {
  margin-left: 0.25rem;
  font-size: 0.95rem;
  color: #8a6a78;
}

.vip-price-main {
  font-size: 1.9rem;
  font-weight: 700;
}

.vip-price-sub {
  font-size: 0.95rem;
  color: #7a5a67;
}

.vip-plan-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
  color: #5a3f48;
}

.vip-plan-list li {
  position: relative;
  padding-left: 1.2rem;
  margin-bottom: 0.45rem;
}

.vip-plan-list li::before {
  content: "✶";
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.75rem;
  color: #b97c96;
}

.btn-plan {
  display: inline-block;
  text-align: center;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.9rem;
  border: 1px solid #b97c96;
  color: #b97c96;
  margin-top: auto;
}

.btn-plan.primary {
  background: #b97c96;
  color: #fff;
}

/* Steps */

.vip-steps {
  padding: 3.5rem 1.5rem 3rem;
}

.vip-step-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 1.8rem;
}

@media (min-width: 880px) {
  .vip-step-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.vip-step-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.9rem;
  box-shadow: 0 16px 35px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 207, 224, 0.8);
}

/* Why membership */

.vip-why {
  padding: 3.5rem 1.5rem 3.5rem;
}

.vip-why-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  gap: 1.6rem;
}

@media (min-width: 880px) {
  .vip-why-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.vip-why-card {
  background: #fff;
  border-radius: 18px;
  padding: 1.6rem 1.5rem 1.9rem;
  border: 1px solid rgba(251, 210, 228, 0.9);
}

/* Try us CTA */

.vip-try {
  padding: 3.5rem 1.5rem 4rem;
}

.vip-try-inner {
  max-width: 980px;
  margin: 0 auto;
  border-radius: 24px;
  padding: 2.5rem 2.2rem 2.8rem;
  background: radial-gradient(circle at top left, #ffe6f7, #fff7fb);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06);
}

.vip-try-text h2 {
  font-size: 2rem;
  margin-bottom: 0.8rem;
}

.vip-try-text p {
  color: #5a3f48;
  max-width: 540px;
}

.vip-try-actions {
  margin-top: 1.8rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ===================== VIP PAGE ===================== */
/* BF FLORAL CODING FOR IMAGE
.vip-hero-image {
  width: 65%;
  margin: 0 auto;
}

.vip-hero-image img {
  width: 100%;
  height: 450px;
  border-radius: 20px;
  display: block;
  object-fit: center;
}
/*
/* Add spacing so the text starts lower */

/* ===================== VIP HERO IMAGE ===================== */

.vip-hero-image {
  position: relative;
  padding: 3rem 0 2.5rem;
  background: #fff6fb;           /* soft pink band behind the card */
  display: flex;
  justify-content: center;       /* center the card horizontally */
}

/* the VIP card itself */
.vip-hero-image img {
  width: 100%;
  max-width: 1100px;             /* controls how wide the card can get */
  height: auto;
  border-radius: 32px;
  display: block;
  object-fit: cover;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);
}

/* Floral / petal decorations in the side space */
.vip-hero-image::before,
.vip-hero-image::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  height: 460px;
  pointer-events: none;
  opacity: 0.55;
  filter: blur(0.4px);

  /* abstract floral / petal clusters using soft pinks & whites */
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9) 0 35%, transparent 40%),
    radial-gradient(circle at 80% 25%, rgba(255,220,240,0.95) 0 40%, transparent 45%),
    radial-gradient(circle at 30% 70%, rgba(255,204,230,0.85) 0 38%, transparent 43%),
    radial-gradient(circle at 70% 85%, rgba(255,240,248,0.92) 0 32%, transparent 40%);
  border-radius: 999px;
}

/* left floral cluster */
.vip-hero-image::before {
  left: max(0.5rem, 5vw);      /* sits in the left side space */
}

/* right floral cluster */
.vip-hero-image::after {
  right: max(0.5rem, 5vw);     /* sits in the right side space */
}

/* tone it down on small screens */
@media (max-width: 768px) {
  .vip-hero-image::before,
  .vip-hero-image::after {
    opacity: 0.25;
    width: 180px;
    height: 340px;
  }
}

.vip-hero {
  margin-top: 40px;
}

.vip-plan-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 in one row on desktop */
  gap: 2rem;
}

/* keep it responsive on smaller screens */
@media (max-width: 1024px) {
  .vip-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .vip-plan-grid {
    grid-template-columns: 1fr;
  }
}
/* ============================
   CONTACT PAGE
   ============================ */

.contact-page {
  background: radial-gradient(circle at top left, #ffeaf4 0, #fff7fb 42%, #ffffff 100%);
}

/* Main wrapper */
.contact-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
}

/* Hero image band (similar feel to other big cards) */
.contact-hero-image {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
  margin-bottom: 4rem;
  background: #fef4f8;
}

.contact-hero-image img {
  width: 100%;
  height: 444px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Find us section */
.contact-find-header {
  text-align: left;
  margin-bottom: 2rem;
}

.contact-find-header h1 {
  font-size: 2.1rem;
  margin-bottom: 0.7rem;
  color: #3c252f;
}

.contact-find-header p {
  font-size: 0.98rem;
  color: #7b5c69;
}

/* Two-column layout */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 3.5rem;
}

/* Map card */
.contact-map-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.2rem 1.2rem 1.6rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 192, 210, 0.6);
}

.contact-map-frame {
  position: relative;
  width: 100%;
  padding-bottom: 65%; /* aspect ratio */
  border-radius: 18px;
  overflow: hidden;
}

.contact-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.map-note {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: #8a6a76;
}

/* Locations list */
.contact-locations {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.location-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 192, 210, 0.7);
}

.location-card.secondary {
  background: #fff8fd;
  border-style: dashed;
}

.location-card h2,
.location-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #3c252f;
}

.location-address {
  font-size: 0.95rem;
  color: #6b4b57;
  margin-bottom: 0.6rem;
}

.location-meta {
  font-size: 0.9rem;
  color: #6b4b57;
  margin-bottom: 0.8rem;
}

.location-meta a {
  color: #b97c96;
  text-decoration: none;
}

.location-meta a:hover {
  text-decoration: underline;
}

.location-hours-label {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #b97c96;
  margin-bottom: 0.25rem;
}

.location-hours {
  font-size: 0.9rem;
  color: #6b4b57;
}

/* Detail cards (call / email / social) */
.contact-details {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
  margin-bottom: 2rem;
}

.contact-detail-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 192, 210, 0.6);
}

.contact-detail-card h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: #3c252f;
}

.contact-detail-card p {
  font-size: 0.92rem;
  color: #6b4b57;
}

.contact-detail-card a {
  color: #b97c96;
  text-decoration: none;
  font-weight: 600;
}

.contact-detail-card a:hover {
  text-decoration: underline;
}

.detail-note {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: #8a6a76;
}

.contact-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

/* Responsive */
@media (max-width: 860px) {
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-details {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-main {
    padding-top: 4rem;
  }

  .contact-hero-image img {
    height: 260px;
  }
}

/* ================== NIICE PERKS SECTION ================== */

.perks-section {
  background: radial-gradient(circle at top left, #ffe8f2 0, #ffeef7 35%, #fff7fb 100%);
  padding: 6rem 1.5rem 5rem;
}

.perks-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.perks-section .section-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  font-weight: 600;
  color: #b97c96;
  margin-bottom: 0.6rem;
}

.perks-section .section-title {
  font-size: 2.2rem;
  line-height: 1.18;
  margin: 0 0 1rem;
  /* Gold gradient across the whole sentence */
  background: linear-gradient(
    90deg,
    #b67a3a 0%,
    #d8ab57 40%,
    #f1d08b 75%,
    #f8e6bd 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.perks-section .section-subtitle {
  max-width: 640px;
  font-size: 1rem;
  line-height: 1.6;
  color: #715261;  /* a bit richer than before */
  margin-bottom: 2.4rem;
}

.perks-hero-image {
  width: 100%;
  max-width: 1100px;
  margin: 2.5rem auto 3rem;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);

}

/* The key: scale full image down to fit the frame */
.perks-hero-image img {
  width: 100%;
  height: 555px;          /* band height – adjust 340–400 if you want */
  object-fit: cover;      /* cinematic fill */
  object-position: center 20%; /* <-- moves what part is visible */
  display: block;

}

/* Optional luxury fade overlay */
.perks-hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 232, 242, 0.55) 0%,
    rgba(255, 232, 242, 0) 25%,
    rgba(255, 232, 242, 0) 75%,
    rgba(255, 232, 242, 0.55) 100%
  );
}

/* Grid of cards */

.perks-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem;
}

.perk-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 1.8rem 1.6rem 2rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(244, 201, 221, 0.8);
  display: flex;
  flex-direction: column;
}

.perk-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
}

.perk-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}


.perk-tag {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #b97c96;
  margin-bottom: 0.5rem;
}

.perk-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #3b222b;
  margin: 0 0 0.9rem;
}

.perk-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.6;
  color: #5a3f48;
}

.perk-list li {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.55rem;
}

.perk-list li::before {
  content: "✶";
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-size: 0.7rem;
  color: #e19ab7;
}
/* Card-specific color accents */

.perk-card:nth-child(1) {
  background: #ffffff;
}

.perk-card:nth-child(1) .perk-tag {
  color: #b97c96;  /* pinky, matches savings & rewards */
}

.perk-card:nth-child(1) .perk-list li::before {
  color: #e19ab7;
}

.perk-card:nth-child(2) {
  background: #fff8f0;
}

.perk-card:nth-child(2) .perk-tag {
  color: #d5894b;  /* warm orange for referrals */
}

.perk-card:nth-child(2) .perk-list li::before {
  color: #f3a660;
}

.perk-card:nth-child(3) {
  background: #f7f8ff;
}

.perk-card:nth-child(3) .perk-tag {
  color: #7c6ad1;  /* lilac for events */
}

.perk-card:nth-child(3) .perk-list li::before {
  color: #9b87ff;
}

.perk-card:nth-child(4) {
  background: #fdf7ff;
}

.perk-card:nth-child(4) .perk-tag {
  color: #9b5ec6;  /* deeper purple for education/influence */
}

.perk-card:nth-child(4) .perk-list li::before {
  color: #c18df1;
}

/* --------------------------- */
/* BOOK NOW BUTTON FOR PERKS   */
/* --------------------------- */

/* Make sure perk cards behave like flex containers */
.perk-card {
  display: flex;
  flex-direction: column;
}

/* Add spacing below list */
.perk-list {
  margin-bottom: 1.5rem;
}

/* Global Niice soft pink bubble */
:root {
  --perk-soft-pink: #ffd9ec;
}

/* Accent colors mapped to each card */
.perk-card:nth-child(1) { --perk-accent: #b97c96; } /* savings: rosy pink */
.perk-card:nth-child(2) { --perk-accent: #d5894b; } /* referrals: warm gold-orange */
.perk-card:nth-child(3) { --perk-accent: #7c6ad1; } /* events: lilac */
.perk-card:nth-child(4) { --perk-accent: #9b5ec6; } /* education: deeper purple */

/* Base button styling */
.perk-book-btn {
  align-self: flex-start;
  margin-top: auto; /* pushes button to bottom of card */
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--perk-accent);
  background: var(--perk-soft-pink);
  color: var(--perk-accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.18s ease;
}

/* Hover inversion */
.perk-book-btn:hover {
  background: var(--perk-accent);
  color: var(--perk-soft-pink);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  transform: translateY(-2px);
}


.perk-list strong {
  font-weight: 600;
  color: #3b222b;
}

.perks-footer-note {
  margin-top: 2.5rem;
  font-size: 0.85rem;
  color: #8a6a76;
}

/* Responsive */

@media (max-width: 1100px) {
  .perks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .perks-section {
    padding: 4.5rem 1.25rem 4rem;
  }

  .perks-section .section-title {
    font-size: 1.8rem;
  }

  .perks-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================
   🔥 NIICE PREMIUM BLOG GRID UPGRADE
   ================================================ */

/* 🟣 Fade-in on scroll */
/* 🟣 Smooth hover-ready base for cards (no fade-in) */
.blog-item {
  /* keep original look */
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  border: 1px solid rgba(255, 192, 213, 0.6);

  /* add smooth transition for our hover state */
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* ⭐ Consistent thumbnail height — luxury magazine look */
.blog-thumb-wrap {
  height: 215px; /* You can adjust to match press-ons */
  overflow: hidden;
  position: relative;
}

.blog-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* ✨ Soft lift + gold glow on hover */
.blog-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.08),
              0 0 0 2px rgba(214, 172, 110, 0.22);
  transition: all 0.35s ease;
}

.blog-item:hover .blog-thumb {
  transform: scale(1.05);
}

/* 🥂 Gold-tinted title for premium post (optional) */
.blog-item-premium .blog-title {
  font-weight: 700;
  background: linear-gradient(90deg, #b67a3a 0%, #dab57d 45%, #f8e6bd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 📐 Perfect layout spacing (titles + snippet balance) */
.blog-title {
  line-height: 1.32;
  margin-bottom: 0.55rem;
}

.blog-snippet {
  line-height: 1.55;
  margin-top: 0.4rem;
  color: #5a3f48;
}

/* 🫧 Hover tag glow for fun */
.blog-tag {
  transition: color 0.3s ease;
}

.blog-item:hover .blog-tag {
  color: #d6a86c;
}

/* ========= INSTAGRAM STRIP ========== */

.insta-grid {
  display: flex;
  gap: 1.2rem;
  flex-wrap: nowrap;
  overflow: hidden;
}

/* Card wrapper */
.insta-item {
  width: 260px;
  height: 340px;
  border-radius: 22px;
  flex-shrink: 0;

  /* base background (set per .insta-1, .insta-2, etc.) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
  overflow: hidden;

  transform-origin: center center;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* Actual image layer that zooms */
.insta-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* inherit the same background image & positioning */
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
  background-repeat: inherit;

  transform: scale(1);
  transition: transform 0.35s ease;
  z-index: 1;
}

/* Pop toward viewer (no jumping upward) */
.insta-item:hover {
  transform: scale(1.025);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  z-index: 3;
}

/* Zoom image in */
.insta-item:hover::before {
  transform: scale(1.06);
}
/* =========================
   PRODUCTS / COMING SOON PAGE
========================= */

.products-page {
  background: radial-gradient(circle at top left, #ffe9f3 0%, #fff7fb 35%, #ffffff 100%);
}

.products-main {
  padding-top: 5.5rem;
}

/* Hero */
.coming-hero {
  padding: 5.5rem 1.5rem 3.5rem;
}

.coming-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,247,251,0.92));
  border: 1px solid rgba(244, 201, 221, 0.7);
  border-radius: 26px;
  padding: 2.7rem 2.4rem 2.6rem;
  box-shadow: 0 18px 45px rgba(0,0,0,0.05);
}

.coming-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: #b97c96;
  margin-bottom: 0.85rem;
  font-weight: 600;
}

.coming-hero h1 {
  font-size: 2.4rem;
  line-height: 1.15;
  color: #3b252f;
  margin: 0 0 1rem;
}

.gold-word {
  background: linear-gradient(90deg, #b67a3a 0%, #d8ab57 40%, #f1d08b 75%, #f8e6bd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.coming-sub {
  max-width: 760px;
  color: #5a3f48;
  line-height: 1.7;
  margin-bottom: 1.4rem;
}

.coming-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 1.4rem 0 1.3rem;
}

.coming-badges {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}

.badge-pill {
  font-size: 0.8rem;
  color: #7d5666;
  background: rgba(255, 232, 242, 0.75);
  border: 1px solid rgba(244, 201, 221, 0.8);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
}

/* Choose Niice */
.choose-niice {
  padding: 2.5rem 1.5rem 3rem;
}

.choose-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.choose-head .eyebrow,
.choose-head .sub {
  margin: 0;
}

.choose-head .eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: #b97c96;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.choose-head h2 {
  font-size: 2rem;
  color: #3b252f;
  margin: 0 0 0.7rem;
}

.choose-head .sub {
  max-width: 780px;
  color: #5a3f48;
  line-height: 1.7;
  margin-bottom: 1.7rem;
}

.choose-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.choose-card {
  background: #fff;
  border: 1px solid rgba(244, 201, 221, 0.7);
  border-radius: 20px;
  padding: 1.35rem 1.25rem;
  box-shadow: 0 14px 35px rgba(0,0,0,0.04);
}

.choose-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  color: #3b252f;
}

.choose-card p {
  margin: 0;
  color: #5a3f48;
  line-height: 1.65;
  font-size: 0.95rem;
}

/* Audience split */
.audience-split {
  padding: 1.5rem 1.5rem 3.5rem;
}

.audience-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 1.3rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.audience-card {
  background: #fff;
  border-radius: 22px;
  padding: 1.7rem 1.6rem;
  border: 1px solid rgba(244, 201, 221, 0.7);
  box-shadow: 0 18px 45px rgba(0,0,0,0.04);
}

.audience-card.premium {
  background: radial-gradient(circle at top left, #ffe6f3 0, #ffffff 60%);
  border-color: rgba(214, 172, 110, 0.35);
  box-shadow: 0 18px 45px rgba(214, 172, 110, 0.14);
}

.audience-tag {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.75rem;
  color: #b97c96;
  margin: 0 0 0.6rem;
  font-weight: 600;
}

.audience-card h3 {
  margin: 0 0 0.9rem;
  color: #3b252f;
}

.audience-list {
  margin: 0;
  padding-left: 1.1rem;
  color: #5a3f48;
  line-height: 1.75;
}

/* Under construction */
.under-construction {
  padding: 0 1.5rem 4.5rem;
}

.uc-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.uc-card {
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,247,251,0.95));
  border: 1px solid rgba(244, 201, 221, 0.75);
  border-radius: 26px;
  padding: 2.4rem 2.2rem;
  box-shadow: 0 18px 45px rgba(0,0,0,0.05);
}

.uc-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: #b97c96;
  font-weight: 600;
  margin-bottom: 0.7rem;
}

.uc-card h2 {
  margin: 0 0 0.8rem;
  color: #3b252f;
  font-size: 2rem;
}

.uc-text {
  margin: 0 0 1.3rem;
  color: #5a3f48;
  line-height: 1.7;
  max-width: 820px;
}

.uc-steps {
  display: grid;
  gap: 0.9rem;
  margin: 1.4rem 0 1.7rem;
}

.uc-step {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(244, 201, 221, 0.65);
  border-radius: 18px;
  padding: 0.9rem 1rem;
}

.uc-dot {
  width: 10px;
  height: 10px;
  margin-top: 0.45rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #f6d9a7, #b98d46);
  box-shadow: 0 0 0 4px rgba(244, 201, 221, 0.45);
}

.uc-step h4 {
  margin: 0 0 0.25rem;
  color: #3b252f;
  font-size: 1rem;
}

.uc-step p {
  margin: 0;
  color: #5a3f48;
  line-height: 1.6;
  font-size: 0.95rem;
}

.uc-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.uc-note {
  margin-top: 1rem;
  color: #8a6a78;
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Responsive */
@media (max-width: 980px) {
  .choose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .audience-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .coming-hero h1 {
    font-size: 1.85rem;
  }
  .choose-grid {
    grid-template-columns: 1fr;
  }
}
/* PRODUCTS PAGE — tighten header gap (correct selectors) */
.products-page .products-main {
  padding-top: 4.1rem; /* align with your header height */
}

@media (max-width: 768px) {
  .products-page .products-main {
    padding-top: 4.6rem;
  }
}
/* ============================================
   SHOP PAGE — GLAMOUR PASS (SAFE OVERRIDES)
   Paste at bottom of style.css
============================================ */

/* Gold shimmer upgrade (keeps your gradient but adds movement) */
.gold-word {
  background-size: 220% 100%;
  animation: niiceGoldShimmer 5.2s ease-in-out infinite;
}

@keyframes niiceGoldShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Slight “glass” glow on hero card */
.coming-hero-inner {
  position: relative;
  overflow: hidden;
}

.coming-hero-inner::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.65), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(214,172,110,0.18), transparent 55%);
  pointer-events: none;
  opacity: 0.9;
}

/* Premium hover lift (toward viewer, not “up and cut off”) */
.choose-card,
.audience-card,
.uc-card {
  transform: translateZ(0);
  transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
  will-change: transform;
}

.choose-card:hover,
.audience-card:hover,
.uc-card:hover {
  transform: translateY(-6px) scale(1.01); /* gentle, not dramatic */
  box-shadow: 0 26px 70px rgba(0,0,0,0.10);
  border-color: rgba(214, 172, 110, 0.38);
}

/* Add a soft “gold halo” only on premium pro card */
.audience-card.premium:hover {
  box-shadow: 0 26px 78px rgba(214, 172, 110, 0.20);
}

/* Make the steps feel clickable/premium */
.uc-step {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.uc-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  border-color: rgba(214, 172, 110, 0.30);
}

/* Buttons: micro-lift */
.coming-actions a,
.uc-actions a {
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.coming-actions a:hover,
.uc-actions a:hover {
  transform: translateY(-2px);
  filter: brightness(1.02);
}

/* Optional: scroll reveal classes (works if you add JS below) */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gold-word { animation: none; }
  .choose-card, .audience-card, .uc-card, .uc-step { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================
   NIICE SEARCH — AUTOCOMPLETE DROPDOWN
========================================= */
.niice-search-wrap {
  position: relative;
  width: 100%;
}

.niice-suggest {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(244, 201, 221, 0.85);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.10);
  overflow: hidden;
}

.niice-suggest-item {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 0.85rem 0.95rem;
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  cursor: pointer;
}

.niice-suggest-item:hover {
  background: rgba(255, 232, 242, 0.55);
}

.niice-suggest-main {
  color: #3b252f;
  font-weight: 600;
}

.niice-suggest-sub {
  color: #8a6a78;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* === PRIMARY CTA: BOOK ONLINE (HEADER ONLY) === */
.site-header .btn-outline {
  background: linear-gradient(135deg, #f6d9a7, #b98d46);
  color: #2b1c10;
  border: none;
  box-shadow: 0 10px 26px rgba(185, 141, 70, 0.45);
  font-weight: 600;
}

/* Hover = richer gold + subtle lift */
.site-header .btn-outline:hover {
  background: linear-gradient(135deg, #ffdca8, #c99c4a);
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(185, 141, 70, 0.6);
}

/* Keep it readable on mobile */
@media (max-width: 768px) {
  .site-header .btn-outline {
    padding: 0.55rem 1.2rem;
    font-size: 0.8rem;
  }
}

/* === BOOK ONLINE: subtle luxury pulse === */
/* ===== Book Online: premium gold + pulse ===== */
.book-online-btn{
  background: linear-gradient(180deg, #f7e7b5 0%, #d7b06f 48%, #b98d46 100%);
  color: #1b1510;
  border: 1px solid rgba(185, 141, 70, 0.55);
  box-shadow: 0 10px 26px rgba(185, 141, 70, 0.42);
  font-weight: 700;
  letter-spacing: .2px;
  transform: translateZ(0);
  animation: niicePulseGold 4.4s cubic-bezier(.2,.9,.2,1) infinite;
}

.book-online-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(185, 141, 70, 0.68);
}

/* ===== Scroll glow (subtle, only while moving) ===== */
body.is-scrolling .book-online-btn{
  box-shadow:
    0 18px 46px rgba(185, 141, 70, 0.78),
    0 0 0 3px rgba(216, 176, 122, 0.18);
  filter: brightness(1.08);
}

/* ===== Eye-catching, still luxury (every 4.4s) ===== */
@keyframes niicePulseGold{
  0%, 55%{
    box-shadow: 0 10px 26px rgba(185, 141, 70, 0.40);
    filter: brightness(1);
    transform: translateY(0);
  }
  70%{
    box-shadow: 0 14px 34px rgba(185, 141, 70, 0.60);
    filter: brightness(1.05);
    transform: translateY(-1px);
  }
  82%{
    box-shadow:
      0 22px 54px rgba(185, 141, 70, 0.86),
      0 0 0 3px rgba(216, 176, 122, 0.22);
    filter: brightness(1.12);
    transform: translateY(-2px);
  }
  100%{
    box-shadow: 0 10px 26px rgba(185, 141, 70, 0.40);
    filter: brightness(1);
    transform: translateY(0);
  }
}

/* apply pulse to header Book Online only */
.site-header .btn-outline {
  animation: niicePulseGold 4.4s ease-in-out infinite;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-header .btn-outline {
    animation: none !important;
  }
}

/* =========================================
   NIICE: Always-gold Book Online button
   (wins against old .btn-outline rules)
========================================= */
.site-header .header-actions a.book-online-btn,
.site-header .header-actions button.book-online-btn,
.site-header a.book-online-btn {
  background: var(--gold-shine) !important;
  color: #1b1510 !important;
  border: 1px solid rgba(161, 120, 46, 0.45) !important;
  box-shadow: 0 10px 28px rgba(161, 120, 46, 0.45) !important;
}

.site-header .header-actions a.book-online-btn:hover,
.site-header a.book-online-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(161, 120, 46, 0.55) !important;
}

/* subtle “premium pulse” every 4.4s (no flashing while scrolling) */
.site-header a.book-online-btn {
  position: relative;
  animation: niicePulse 4.4s ease-in-out infinite;
  will-change: box-shadow, transform;
}

@keyframes niicePulse {
  0%, 72% {
    box-shadow: 0 10px 28px rgba(161, 120, 46, 0.45);
    transform: translateY(0);
  }
  78% {
    box-shadow: 0 18px 42px rgba(161, 120, 46, 0.62);
    transform: translateY(-1px);
  }
  84% {
    box-shadow: 0 12px 32px rgba(161, 120, 46, 0.52);
    transform: translateY(0);
  }
  100% {
    box-shadow: 0 10px 28px rgba(161, 120, 46, 0.45);
    transform: translateY(0);
  }
}

/* IMPORTANT: stop pulsing while user is actively scrolling */
body.is-scrolling .site-header a.book-online-btn {
  animation: none !important;
}

/* extra scroll “glow” without flashing */
body.is-scrolling .site-header a.book-online-btn {
  box-shadow: 0 18px 48px rgba(161, 120, 46, 0.65) !important;
}

/* Force Book Online button styling across all pages */
.header-actions a[href="#book"].btn-outline.small{
  background: var(--gold-shine) !important;
  color: #1b1510 !important;
  border: none !important;
  box-shadow: 0 10px 28px rgba(161, 120, 46, 0.45) !important;
}

/* ===== PERKS: hover lift + gold emphasis (SAFE / add-only) ===== */

/* Replace .perks-grid with your actual container if different */
.perks-grid li {
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
  border-radius: 14px;
  padding: .6rem .85rem;
}

.perks-grid li:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
}

/* bold phrase turns gold when hovering the row */
.perks-grid li strong {
  transition: color .22s ease;
}

.perks-grid li:hover strong {
  color: var(--gold-deep);
}

/* ===============================
   VIP PLAN CARDS — Premium Hover
   (safe add-only, uses your selectors)
================================ */

/* Make cards feel clickable and premium */
.vip-plan-card{
  position: relative; /* needed for the clickable overlay in Part B */
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
  will-change: transform;
  cursor: pointer;
}

/* Lift + glow */
.vip-plan-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 22px 48px rgba(0,0,0,.14);
  border-color: rgba(201,163,95,.55);
}

/* Soft luxury sheen */
.vip-plan-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  opacity:0;
  transition: opacity .24s ease;
  background: radial-gradient(600px 160px at 20% 0%, rgba(255,255,255,.28), transparent 60%);
}
.vip-plan-card:hover::after{
  opacity:1;
}

/* Optional: make plan name lean gold on hover (premium cue) */
.vip-plan-card:hover .vip-plan-name{
  color: var(--gold-deep);
}

/* VIP cards: full-card clickable overlay */
.vip-plan-card .vip-card-link{
  position:absolute;
  inset:0;
  border-radius: inherit;
  z-index: 2;
  text-indent:-9999px;
  overflow:hidden;
}

/* Keep any real buttons/links above the overlay */
.vip-plan-card a,
.vip-plan-card button{
  position: relative;
  z-index: 3;
}

/* ==========================================
   NIICE MOBILE CTA BAR (phone only)
   - Sits directly under header
   - Stays visible on scroll
   - Does NOT block content
   ========================================== */

.niice-mobile-cta{ display:none; }

@media (max-width: 900px){

  .niice-mobile-cta{
    display: flex;
    gap: 10px;
    align-items: center;

    /* Sticky under the top strip */
    position: sticky;
    top: 0;                 /* if you have a top strip, see the note below */
    z-index: 9999;

    padding: 10px 12px;
    margin: 0 10px 10px 10px;
    border-radius: 18px;

    /* Premium glass */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);

    border: 1px solid rgba(0,0,0,0.07);
    box-shadow: 0 14px 40px rgba(0,0,0,0.12);

    overflow-x: auto;                 /* if phone is small, it scrolls horizontally */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .niice-mobile-cta::-webkit-scrollbar{ height: 0; }

  .niice-cta{
    flex: 0 0 auto;
    padding: 11px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: .2px;
    font-size: 14px;

    color: #222;
    background: rgba(255,255,255,0.80);
    border: 1px solid rgba(0,0,0,0.10);
    white-space: nowrap;
  }

  .niice-cta-primary{
    /* Gold “Book Now” */
    background: linear-gradient(180deg, #efd59a 0%, #e2bf77 100%);
    border-color: rgba(0,0,0,0.12);
    box-shadow: 0 10px 24px rgba(226,191,119,0.35);
  }

  /* Optional: tiny “press” feel */
  .niice-cta:active{
    transform: translateY(1px);
  }
}

/* =========================================
   MOBILE HEADER CTA (Book Now / Memberships / 3D)
   Phone-only, sticky, clean, never blocks content
   ========================================= */

/* Hidden by default (desktop unchanged) */
.niice-mobile-cta { display: none; }

@media (max-width: 900px) {

  /* Make header sticky so CTA stays visible on scroll */
  .site-header{
    position: sticky;
    top: 0;
    z-index: 5000;
    background: inherit; /* keeps your existing header look */
  }

  /* Ensure header can stack rows on mobile */
  .site-header .header-inner{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* Force CTA to be its own full-width row under the brand/address */
  .niice-mobile-cta{
    display: flex;
    width: 100%;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;

    /* premium glass line that matches your brand */
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;

    /* if phone is tight, allow sideways swipe instead of hiding buttons */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .niice-mobile-cta::-webkit-scrollbar{ height: 0; }
  .niice-mobile-cta{ scrollbar-width: none; }

  /* Button chips */
  .niice-cta{
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;

    color: #1a1a1a;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
    white-space: nowrap;
  }

  /* Gold primary */
  .niice-cta-primary{
    background: #d8b07a;
    border-color: rgba(0,0,0,0.10);
  }

  /* Optional: slightly smaller chips if needed */
  /* .niice-cta{ padding: 9px 12px; font-size: 14px; } */
}

.footer-address-link{
  display:inline-block;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: .9;
}
.footer-address-link:hover{
  opacity: 1;
}

.footer-social{
  display:flex;
  gap:12px;
  margin-top:10px;
}

.social-icon{
  width:42px;
  height:42px;
  border-radius:999px;
  background: var(--gold, #d8b46b);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transition: transform .15s ease, filter .15s ease;
}

.social-icon:hover{
  transform: translateY(-1px);
  filter: brightness(1.02);
}

.social-icon svg{
  width:20px;
  height:20px;
  fill:#111; /* keeps the icon readable */
}

.footer-links a{
  color: inherit;
  text-decoration: none;
  opacity: .9;
}
.footer-links a:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* FOOTER BASE (force the dark footer back) */
.site-footer{
  background: #0f0b14;
  color: #fff;
  padding: 60px 20px 30px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer .footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

@media (max-width: 900px){
  .site-footer .footer-inner{
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

/* LINKS IN FOOTER */
.site-footer a{
  color: inherit;
  text-decoration: none;
  opacity: .92;
}

.site-footer a:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-social{ display:flex; gap:12px; margin-top:10px; }

.social-icon{
  width:42px; height:42px;
  border-radius:999px;
  background:#d8b46b;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.social-icon svg{ width:20px; height:20px; fill:#111; }

.footer-address-link{
  display: inline-block;
  margin: 8px 0 14px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: .95;
}
.footer-address-link:hover{ opacity: 1; }

/* =========================================================
   NIICE SMART SEARCH — DROPDOWN (GLOBAL FIX)
   If dropdown exists but looks wrong or gets cut off, this fixes it.
========================================================= */

/* 1) Prevent header containers from clipping the dropdown */
.site-header,
.site-header .header-inner,
.site-header .header-center {
  overflow: visible !important;
}

/* 2) Wrapper created by JS */
.site-header .niice-search-wrap {
  position: relative !important;
  width: 100%;
}

/* 3) Dropdown box */
.site-header .niice-suggest {
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;

  display: block;
  border-radius: 14px;
  overflow: hidden;

  background: rgba(12, 12, 14, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 22px 55px rgba(0,0,0,0.45);

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Keep [hidden] behaving properly */
.site-header .niice-suggest[hidden] {
  display: none !important;
}

/* 4) Suggestion rows (buttons) */
.site-header .niice-suggest-item {
  width: 100%;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 12px 14px;
  margin: 0;

  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);

  color: #fff;
  cursor: pointer;

  /* normalize button typography */
  font: inherit;
  letter-spacing: 0.2px;
  text-align: left;
}

.site-header .niice-suggest-item:last-child {
  border-bottom: 0;
}

.site-header .niice-suggest-item:hover,
.site-header .niice-suggest-item:focus-visible {
  background: rgba(255,255,255,0.09);
  outline: none;
}

/* 5) Text styling */
.site-header .niice-suggest-main {
  font-weight: 700;
  font-size: 0.95rem;
}

.site-header .niice-suggest-sub {
  opacity: 0.75;
  font-size: 0.82rem;
  white-space: nowrap;
}

/* 6) Mobile: simplify */
@media (max-width: 720px) {
  .site-header .niice-suggest {
    border-radius: 12px;
    top: calc(100% + 8px) !important;
  }

  .site-header .niice-suggest-sub {
    display: none;
  }
}

/* SMART SEARCH DROPDOWN (forces visible + premium look) */
.niice-search-wrap { position: relative; overflow: visible; }
.niice-suggest{
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  z-index: 99999;
  background: rgba(12,12,14,.96);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 22px 55px rgba(0,0,0,.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.niice-suggest-item{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  text-align:left;
}
.niice-suggest-item:last-child{ border-bottom: 0; }
.niice-suggest-item:hover{ background: rgba(255,255,255,.09); }
.niice-suggest-main{ font-weight: 700; font-size: .95rem; }
.niice-suggest-sub{ opacity:.75; font-size: .82rem; white-space: nowrap; }

/* =========================================
   FIX: SMART SEARCH DROPDOWN (LIGHT MODE)
   Restores original white appearance
========================================= */

.niice-suggest{
  background: #ffffff !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.18) !important;
  backdrop-filter: none !important;
}

/* Individual rows */
.niice-suggest-item{
  background: transparent !important;
  color: #1a1a1a !important;
}

/* Hover state */
.niice-suggest-item:hover{
  background: rgba(0,0,0,0.04) !important;
}

/* Main + sub text */
.niice-suggest-main{
  color: #1a1a1a !important;
  font-weight: 700;
}

.niice-suggest-sub{
  color: #6b6b6b !important;
}

/* =========================================
   SMART SEARCH – GOLD HOVER STATE
========================================= */

.niice-suggest-item:hover{
  background: linear-gradient(
    135deg,
    rgba(216,176,122,0.18),
    rgba(216,176,122,0.28)
  ) !important;

  box-shadow: inset 0 0 0 1px rgba(216,176,122,0.45);
}

/* Make the main keyword pop on hover */
.niice-suggest-item:hover .niice-suggest-main{
  color: #b8893d !important;
}

/* Keep secondary label elegant */
.niice-suggest-item:hover .niice-suggest-sub{
  color: #6f5a33 !important;
}

/* =========================================
   FEATURE CARDS → MOBILE CAROUSEL ONLY
   Desktop stays the same
   ========================================= */

@media (max-width: 900px) {

  /* Turn the grid wrapper into a horizontal swipe row */
  .feature-grid.feature-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch; /* iOS smooth */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;

    padding: 10px 16px 18px;
    margin: 0;

    /* prevents accidental page-wide sideways scroll */
    max-width: 100%;
  }

  /* Each card becomes a “slide” */
  .feature-grid.feature-carousel .feature-card {
    flex: 0 0 auto !important;
    width: 82vw;         /* big + premium like your example */
    max-width: 430px;    /* keeps it sane on tablets */
    scroll-snap-align: start;

    /* if your cards have grid width rules, this forces the new sizing */
    min-width: 82vw;
  }

  /* Hide scrollbar while keeping swipe working */
  .feature-grid.feature-carousel::-webkit-scrollbar { height: 0px; }
  .feature-grid.feature-carousel { scrollbar-width: none; }

  /* Optional: give the row a “carousel feel” by making the cards pop slightly */
  .feature-grid.feature-carousel .feature-card {
    transform: translateZ(0);
  }
}

/* =========================================
   FEATURE CARDS → MORE VIBRANT / PREMIUM
   ========================================= */

.feature-card {
  border-radius: 28px;                 /* more modern */
  overflow: hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,0.14);
}

/* Make images look richer */
.feature-card .feature-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;

  /* punchier visuals */
  filter: saturate(1.18) contrast(1.08);
  transform: scale(1.02);
}

/* Add a soft “tint overlay” like the example */
.feature-card .feature-image {
  position: relative;
}
.feature-card .feature-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.10) 0%,
    rgba(0,0,0,0.34) 70%,
    rgba(0,0,0,0.46) 100%
  );
  pointer-events: none;
}

/* Make text area cleaner + more legible */
.feature-card .feature-content {
  backdrop-filter: blur(6px);
}

/* Hover polish for desktop (optional) */
@media (hover: hover) {
  .feature-card:hover {
    transform: translateY(-4px);
    transition: transform 180ms ease, box-shadow 180ms ease;
    box-shadow: 0 24px 70px rgba(0,0,0,0.18);
  }
}

@media (max-width: 900px) {
  .feature-grid.feature-carousel {
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    /* IMPORTANT: do NOT set touch-action here */
  }
}


/* =========================================
   FIX: Header + Felicia ALWAYS clickable
   (no pointer-events hacks)
   ========================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 999999; /* above everything */
  overflow: visible;
}

/* Mobile CTA bar (if present) must be under the header but still clickable */
.niice-mobile-cta {
  position: relative;
  z-index: 999998;
}

/* Felicia widget + launcher */
#felicia,
.felicia,
.felicia-widget,
.felicia-launcher,
.chat-widget,
.chat-launcher {
  position: relative;
  z-index: 999999;
}

/* Make sure decorative overlays NEVER eat taps */
.feature-image::after,
.perks-hero-image::after,
.vip-hero-image::before,
.vip-hero-image::after,
.product-overlay {
  pointer-events: none !important;
}

/* =========================================
   MOBILE CAROUSELS: Work/Blog + Perks
   Desktop stays grid
   ========================================= */

@media (max-width: 900px) {

  /* WORK + BLOG row becomes swipe carousel */
  .work-blog-inner {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;

    padding: 10px 16px 18px;
    margin: 0;
    max-width: 100%;

    scrollbar-width: none;
  }
  .work-blog-inner::-webkit-scrollbar { height: 0px; }

  .work-card,
  .blog-card {
    flex: 0 0 auto !important;
    width: 82vw;
    max-width: 430px;
    min-width: 82vw;
    scroll-snap-align: start;
  }

  /* PERKS grid becomes swipe carousel */
  .perks-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 18px;

    overflow-x: auto;
    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 16px;

    padding: 10px 16px 18px;
    margin: 0;
    max-width: 100%;

    scrollbar-width: none;
  }
  .perks-grid::-webkit-scrollbar { height: 0px; }

  .perk-card {
    flex: 0 0 auto !important;
    width: 82vw;
    max-width: 430px;
    min-width: 82vw;
    scroll-snap-align: start;
  }
}

/* =========================================================
   NIICE VIBRANCE PATCH (SAFE OVERRIDES)
   Paste at BOTTOM of style.css
   ========================================================= */

:root{
  --niice-cream: #fffaf6;
  --niice-blush: #f7e3e6;
  --niice-peach: #fde8dc;
  --niice-champagne: #f6ead8;
  --niice-ink: #1f1c1b;
  --niice-gold: #d6b56a;
  --niice-card: rgba(255,255,255,.92);
  --niice-line: rgba(31,28,27,.10);
  --niice-shadow: 0 18px 50px rgba(20,18,18,.10);
  --niice-shadow-soft: 0 10px 24px rgba(20,18,18,.08);
}

/* Make sections feel more “layered” without changing structure */
.hero,
.feature-row,
.pricing-section,
.perks-section,
.ba-section,
.testimonials,
.instagram,
.product-hero,
.site-footer{
  position: relative;
}

/* Global “luxury pop” for cards */
.feature-card,
.perk-card,
.test-card,
.blog-card,
.work-card{
  background: var(--niice-card);
  border: 1px solid var(--niice-line);
  box-shadow: var(--niice-shadow-soft);
  transform: translateZ(0);
}

/* Slightly stronger hover/tap feedback (desktop + mobile) */
@media (hover:hover){
  .feature-card:hover,
  .perk-card:hover,
  .test-card:hover,
  .blog-card:hover,
  .work-card:hover{
    box-shadow: var(--niice-shadow);
    transform: translateY(-2px);
  }
}

/* Buttons: make primary actions feel “alive” but still luxury */
.btn-solid,
.perk-book-btn{
  box-shadow: 0 12px 28px rgba(214,181,106,.22);
  border: 1px solid rgba(214,181,106,.35);
}

@media (hover:hover){
  .btn-solid:hover,
  .perk-book-btn:hover{
    box-shadow: 0 16px 40px rgba(214,181,106,.28);
    transform: translateY(-1px);
  }
}

/* Outline buttons get a softer “gold kiss” on hover */
@media (hover:hover){
  .btn-outline:hover{
    border-color: rgba(214,181,106,.75);
    box-shadow: 0 14px 36px rgba(214,181,106,.18);
    transform: translateY(-1px);
  }
}

/* Mobile: tap feedback */
.btn-solid:active,
.btn-outline:active,
.perk-book-btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(214,181,106,.18);
}

/* HERO: add premium depth + subtle glow */
.hero{
  background: radial-gradient(1100px 520px at 20% 10%, rgba(214,181,106,.16), transparent 60%),
              radial-gradient(900px 520px at 90% 30%, rgba(247,227,230,.30), transparent 55%),
              linear-gradient(180deg, rgba(255,250,246,.75), rgba(255,250,246,0));
}

/* Add a soft overlay “sheen” above slider */
.hero::after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  background: linear-gradient(120deg,
    rgba(255,255,255,.10),
    rgba(214,181,106,.10),
    rgba(255,255,255,.06)
  );
  mix-blend-mode: soft-light;
}

/* Make hero copy card feel more premium */
.hero-copy{
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(31,28,27,.10);
  box-shadow: 0 24px 70px rgba(20,18,18,.16);
  backdrop-filter: blur(10px);
}

/* Pricing: premium frame for the menu image */
.pricing-section{
  background: linear-gradient(180deg, var(--niice-cream), rgba(247,227,230,.22));
}

.pricing-image-wrapper{
  border-radius: 18px;
  border: 1px solid rgba(31,28,27,.10);
  box-shadow: 0 26px 70px rgba(20,18,18,.14);
  overflow: hidden;
}

.pricing-image-wrapper img{
  display:block;
  width:100%;
  filter: contrast(1.03) saturate(1.05);
}

/* Perks: add a subtle luxury texture + contrast rhythm */
.perks-section{
  background:
    radial-gradient(900px 420px at 20% 10%, rgba(214,181,106,.15), transparent 60%),
    radial-gradient(700px 420px at 80% 20%, rgba(247,227,230,.28), transparent 55%),
    linear-gradient(180deg, rgba(255,250,246,.92), rgba(246,234,216,.40));
}

/* Make perks cards feel premium */
.perk-card{
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(20,18,18,.12);
}

/* Give perk titles a touch more hierarchy */
.perk-title{
  letter-spacing: -0.2px;
}

/* Before/After: elevate the reveal moment */
.ba-section{
  background: linear-gradient(180deg, rgba(31,28,27,.03), rgba(247,227,230,.18));
}

.ba-slider{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(20,18,18,.14);
  border: 1px solid rgba(31,28,27,.10);
}

/* Make the handle feel more “designed” */
.ba-handle{
  filter: drop-shadow(0 14px 22px rgba(20,18,18,.18));
}

/* Testimonials: increase card contrast */
.test-card{
  border-radius: 18px;
}

/* Controls feel more tappable */
.test-controls button,
.insta-controls button{
  border: 1px solid rgba(214,181,106,.35);
  box-shadow: 0 12px 28px rgba(20,18,18,.10);
  backdrop-filter: blur(10px);
}

@media (hover:hover){
  .test-controls button:hover,
  .insta-controls button:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 40px rgba(20,18,18,.14);
    border-color: rgba(214,181,106,.65);
  }
}

/* Instagram: gallery feel */
.instagram{
  background: linear-gradient(180deg, rgba(255,250,246,.92), rgba(247,227,230,.22));
}

.insta-grid{
  gap: 12px;
}

.insta-item{
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(20,18,18,.12);
  border: 1px solid rgba(31,28,27,.08);
}

/* Product hero: make it feel like a campaign */
.product-hero{
  background: radial-gradient(900px 520px at 15% 25%, rgba(214,181,106,.18), transparent 60%),
              linear-gradient(180deg, rgba(31,28,27,.02), rgba(247,227,230,.22));
}

.hero-micro{
  margin: 10px 0 0;
  font-family: Montserrat, sans-serif;
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(31,28,27,.70);
}

/* =========================
   KEYWORD HIGHLIGHT (NIICE GLOW TEXT)
   ========================= */
.niice-highlight{
  position: relative;
  display: inline-block;
  padding: 0 .18em;
  margin: 0 -.12em;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--niice-ink);
  z-index: 0;
}

.niice-highlight::before{
  content:"";
  position:absolute;
  left: -.06em;
  right: -.06em;
  bottom: .08em;
  height: .55em;
  border-radius: 999px;
  background:
    radial-gradient(60% 140% at 20% 50%, rgba(247,227,230,.85), rgba(247,227,230,0) 70%),
    radial-gradient(60% 140% at 80% 50%, rgba(214,181,106,.42), rgba(214,181,106,0) 70%),
    linear-gradient(90deg, rgba(247,227,230,.70), rgba(214,181,106,.30));
  z-index: -1;
  filter: blur(.2px);
}

/* Optional “premium shimmer” for highlights */
@media (prefers-reduced-motion: no-preference){
  .niice-highlight::after{
    content:"";
    position:absolute;
    inset: -2px -6px -2px -6px;
    border-radius: 999px;
    background: linear-gradient(120deg, rgba(255,255,255,.0), rgba(255,255,255,.35), rgba(255,255,255,.0));
    opacity: .35;
    transform: translateX(-40%);
    z-index: -1;
    pointer-events:none;
    animation: niiceSheen 5.8s ease-in-out infinite;
  }
  @keyframes niiceSheen{
    0%, 55% { transform: translateX(-55%); opacity: .0; }
    65%     { opacity: .30; }
    100%    { transform: translateX(55%); opacity: .0; }
  }
}

/* =========================
   BUBBLE TAGS / PILLS
   ========================= */
.feature-tag,
.section-eyebrow,
.perk-tag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214,181,106,.28);
  background:
    radial-gradient(120% 160% at 20% 50%, rgba(247,227,230,.85), rgba(247,227,230,0) 60%),
    radial-gradient(120% 160% at 80% 50%, rgba(214,181,106,.26), rgba(214,181,106,0) 62%),
    rgba(255,255,255,.72);
  box-shadow: 0 12px 28px rgba(20,18,18,.08);
  backdrop-filter: blur(10px);
}

.feature-tag::before,
.section-eyebrow::before,
.perk-tag::before{
  content:"";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(214,181,106,.95);
  box-shadow: 0 0 0 3px rgba(214,181,106,.18);
}

/* =========================
   ACCENT BUBBLES (CARD CORNER GLOWS)
   ========================= */
.feature-card,
.perk-card,
.test-card{
  position: relative;
  overflow: hidden;
}

.feature-card::after,
.perk-card::after,
.test-card::after{
  content:"";
  position:absolute;
  width: 220px;
  height: 220px;
  right: -120px;
  top: -120px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%,
      rgba(247,227,230,.85),
      rgba(214,181,106,.22) 45%,
      rgba(247,227,230,0) 70%
    );
  opacity: .55;
  pointer-events:none;
  filter: blur(.2px);
}

/* =========================
   SECTION GLOW SEPARATORS
   ========================= */
.perks-section::before,
.testimonials::before,
.instagram::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-1px;
  height: 80px;
  background: radial-gradient(60% 120% at 50% 0%, rgba(214,181,106,.18), rgba(214,181,106,0) 70%);
  pointer-events:none;
}

.section-title,
.test-inner h2,
.pricing-inner h2{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}
.section-title::after,
.test-inner h2::after,
.pricing-inner h2::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;
  width: 64%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214,181,106,.85), rgba(247,227,230,.35));
}

/* =========================
   NIICE GRADIENT WORD (Perks-style)
   ========================= */
.niice-word{
  background: linear-gradient(90deg, #b8892f 0%, #f2d9a6 40%, #c98b2e 70%, #f6e4b9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* crisp outline */
  -webkit-text-stroke: 1px rgba(0,0,0,0.55);

  /* backup outline look for browsers */
  text-shadow:
    0 1px 0 rgba(0,0,0,0.25),
    0 0 12px rgba(185,137,47,0.22);

  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Optional: extra “pop” on bigger headings */
h1 .niice-word, h2 .niice-word{
  -webkit-text-stroke: 1.2px rgba(0,0,0,0.55);
}

/* soft luxury texture */
.section-texture{
  position: relative;
}

.section-texture::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.18;
  background-image:
    radial-gradient(circle at 18px 18px, rgba(185,137,47,0.20) 2px, transparent 2.4px),
    radial-gradient(circle at 44px 44px, rgba(234,200,150,0.16) 2px, transparent 2.4px);
  background-size: 64px 64px;
  z-index:0;
}

.section-texture > *{
  position: relative;
  z-index: 1;
}

.feature-card, .perk-card, .test-card, .blog-card, .work-card{
  transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
}

.feature-card:hover, .perk-card:hover, .test-card:hover, .blog-card:hover, .work-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.14);
  filter: saturate(1.05);
}

.niice-divider{
  width: min(820px, 92%);
  height: 1px;
  margin: 28px auto;
  background: linear-gradient(90deg, transparent, rgba(185,137,47,0.35), transparent);
}

/* =========================
   NIICE COLOR-TIED HEADLINE SYSTEM
========================= */

/* Bubble-ish headline feel */
.niice-title{
  font-family: "Playfair Display", serif;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* Bigger on mobile too */
.feature-card h2,
.work-card h3,
.blog-card h3{
  font-size: clamp(1.15rem, 2.4vw, 1.65rem);
}

/* Accent word chip 
.niice-accent{
  position: relative;
  display: inline-block;
  padding: 0 .12em;
  border-radius: 999px;             
  font-weight: 700;
  color: var(--niice-accent-ink, #1a1a1a);
  text-shadow:
    -1px 0 rgba(0,0,0,.35),
     1px 0 rgba(0,0,0,.35),
     0 -1px rgba(0,0,0,.25),
     0  1px rgba(0,0,0,.25);         
}*/

/* soft “paint” behind the word 
.niice-accent::before{
  content:"";
  position:absolute;
  inset: 55% -0.10em -0.10em -0.10em; /* sits behind lower half 
  border-radius: 999px;
  background: var(--niice-accent-bg, rgba(212,175,55,.35));
  filter: blur(0.2px);
  z-index:-1;
}*/

/* gradient text option (more premium) 
.niice-accent--grad{
  background: linear-gradient(90deg, var(--niice-accent-a,#d4af37), var(--niice-accent-b,#b07a2a));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    -1px 0 rgba(0,0,0,.35),
     1px 0 rgba(0,0,0,.35),
     0 -1px rgba(0,0,0,.25),
     0  1px rgba(0,0,0,.25);
}*/

/* shimmer-on-hover for special words 
.niice-shimmer{
  background-size: 220% 100%;
  transition: transform .18s ease, filter .18s ease, background-position .45s ease;
  filter: saturate(1.05);
}
.niice-shimmer:hover{
  transform: translateY(-1px) scale(1.02);
  background-position: 100% 0;
  filter: saturate(1.25) brightness(1.05);
}*/

/* Card hover = more alive, like the pet site */
.feature-card,
.work-card,
.blog-card{
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.feature-card:hover,
.work-card:hover,
.blog-card:hover{
  transform: translateY(-4px);
  filter: saturate(1.06);
  box-shadow: 0 18px 45px rgba(0,0,0,.12);
}

/* Per-card theme variables (you’ll tune these) */
.feature-card{ --niice-accent-a:#d4af37; --niice-accent-b:#b07a2a; --niice-accent-bg: rgba(212,175,55,.28); }
.feature-card-1{ --niice-accent-a:#d4af37; --niice-accent-b:#b07a2a; --niice-accent-bg: rgba(212,175,55,.28);} /* VIP gold */
.feature-card-2{ --niice-accent-a:#c07ad6; --niice-accent-b:#6a8cff; --niice-accent-bg: rgba(160,120,220,.24);} /* manicure cool pop */
.feature-card-3{ --niice-accent-a:#c9a46c; --niice-accent-b:#8a6a45; --niice-accent-bg: rgba(201,164,108,.22);} /* chair warm luxe */

.work-card{ --niice-accent-a:#7c5cff; --niice-accent-b:#d66cff; --niice-accent-bg: rgba(124,92,255,.20);} /* purple vibe */
.blog-card{ --niice-accent-a:#ff4d6d; --niice-accent-b:#ffb703; --niice-accent-bg: rgba(255,77,109,.20);} /* candy red pop */

/* =========================
   GOOGLE PROOF STRIP
========================= */
.google-proof{
  display:flex;
  gap:.55rem;
  align-items:center;
  justify-content:center;
  margin: .55rem auto 1.1rem;
  font-family: "Montserrat", sans-serif;
  font-size: .95rem;
  color: rgba(25,25,25,.75);
}
.google-dot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #34a853; /* google green */
  box-shadow: 0 0 0 6px rgba(52,168,83,.14);
}
.google-text{ font-weight: 600; }
.google-stars{
  color:#34a853;
  letter-spacing: .12em;
  font-weight: 800;
}

/* =========================
   PREMIUM BUTTON MOTION
========================= */
.btn-solid, .btn-outline, .perk-book-btn{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-solid:hover, .btn-outline:hover, .perk-book-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(0,0,0,.12);
  filter: saturate(1.08);
}
.btn-solid:active, .btn-outline:active, .perk-book-btn:active{
  transform: translateY(0px) scale(.99);
}

/* =========================
   NIICE PERKS-STYLE WORD HIGHLIGHT (CRISP)
========================= */
.niice-word {
  display: inline-block;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #a46b2a, #d7b35a, #f5e1a6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* crisp readability WITHOUT blur */
  -webkit-text-stroke: 0.75px rgba(0,0,0,0.28);
  text-stroke: 0.75px rgba(0,0,0,0.28);

  /* tiny clean depth (not blurry) */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.18));
}

/* optional: subtle luxe underline like your perks vibe */
.niice-word--underline {
  position: relative;
}
.niice-word--underline::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -0.12em;
  height: 0.18em;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(164,107,42,.25), rgba(245,225,166,.45));
  z-index: -1;
}

/* hover shimmer (premium, not childish) */
.niice-word--shine {
  background-size: 220% 100%;
  transition: background-position .5s ease, transform .18s ease;
}
.niice-word--shine:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
}

/* =========================
   NIICE HIGHLIGHT (PERKS-STYLE, CRISP)
   Replaces old blurry accent system
========================= */

/* Use on words you wrap with:
   <span class="niice-accent niice-accent--grad niice-shimmer">WORD</span>
*/
.niice-accent {
  display: inline-block;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* gradient fill like perks header */
.niice-accent--grad {
  background: linear-gradient(90deg, #a46b2a, #d7b35a, #f5e1a6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* crisp readability — NOT blur */
  -webkit-text-stroke: 0.8px rgba(0, 0, 0, 0.25);
  text-stroke: 0.8px rgba(0, 0, 0, 0.25);

  /* small, clean depth */
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.14));
}

/* shimmer only on hover (premium) */
.niice-shimmer {
  background-size: 220% 100%;
  background-position: 0% 0%;
  transition: background-position .55s ease, transform .18s ease;
}

.niice-shimmer:hover {
  background-position: 100% 0%;
  transform: translateY(-1px);
}

/* Bigger, rounder, more “alive” titles like the pets site */
.niice-title {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  letter-spacing: -0.03em;
  line-height: 1.12;
}

/* make card headings feel less “squared” */
.feature-content h2,
.work-body h3,
.blog-body h3,
.test-inner h2,
.ba-inner h2 {
  text-wrap: balance;
}

/* =========================
   THEMED ACCENT COLORS (per card)
========================= */
.feature-card-1 { --a1:#b07a2a; --a2:#f5e1a6; } /* VIP gold */
.feature-card-2 { --a1:#6d28d9; --a2:#ffb4d8; } /* mani purple/pink */
.feature-card-3 { --a1:#8a6a45; --a2:#e7c8a2; } /* pedi warm tan */

.work-card { --a1:#6d28d9; --a2:#d946ef; }      /* purple */
.blog-card { --a1:#ff2d55; --a2:#ffb703; }      /* candy red/gold */

/* apply per-card gradient without changing your HTML structure */
.feature-card-1 .niice-accent--grad,
.feature-card-2 .niice-accent--grad,
.feature-card-3 .niice-accent--grad,
.work-card .niice-accent--grad,
.blog-card .niice-accent--grad{
  background: linear-gradient(90deg, var(--a1), var(--a2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtle lift (adds “premium energy”) */
.feature-card,
.perk-card,
.test-card,
.work-card,
.blog-card{
  transition: transform .18s ease, box-shadow .18s ease;
}

.feature-card:hover,
.perk-card:hover,
.test-card:hover,
.work-card:hover,
.blog-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
}

.product-badges{
  display: flex;
  gap: .6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1rem 0 1.2rem;
}

.product-badges span{
  padding: .45rem .8rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}

/* =========================================
   NIICE DARKBAND (Products-style luxe band)
   Drop-in section theme: dark gradient + gold
   Cards inside become blush/cream for contrast
   ========================================= */

:root{
  --niice-gold: #d6b36a;
  --niice-gold-2: #f3d49a;
  --niice-ink: #0b0b10;
  --niice-ink-2: #15151c;
  --niice-smoke: rgba(255,255,255,.08);

  /* “bottle / polish tan” vibe */
  --niice-bottle: #c9a37a;

  /* your existing site blush background vibe */
  --niice-blush: #fff6f4;
  --niice-blush-2: #fdeeee;
}

.niice-darkband{
  position: relative;
  padding: clamp(56px, 6vw, 90px) 0;
  color: #fff;
  isolation: isolate;

  /* dark gray -> black fade like products */
  background:
    radial-gradient(1200px 500px at 15% 20%, rgba(214,179,106,.16), transparent 55%),
    radial-gradient(900px 420px at 85% 10%, rgba(201,163,122,.14), transparent 60%),
    linear-gradient(180deg, var(--niice-ink-2), var(--niice-ink));
}

.niice-darkband::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index:-1;

  /* subtle shimmer texture */
  background:
    radial-gradient(2px 2px at 10% 30%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(2px 2px at 70% 20%, rgba(255,255,255,.12), transparent 55%),
    radial-gradient(2px 2px at 40% 80%, rgba(255,255,255,.10), transparent 55%);
  opacity:.35;
}

.niice-darkband h2,
.niice-darkband .niice-title,
.niice-darkband h3,
.niice-darkband h4{
  color:#fff;
}

.niice-darkband p{
  color: rgba(255,255,255,.82);
}

/* gold “eye stimulation” underline accent on the main title */
.niice-darkband .niice-title{
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.niice-darkband .niice-title::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 0;
  width: 58%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--niice-gold), var(--niice-gold-2));
  opacity:.95;
}

/* =========================
   WORK + BLOG cards become blush like “products” contrast
   ========================= */
.niice-darkband .work-blog-inner{
  position: relative;
}

.niice-darkband .work-card,
.niice-darkband .blog-card{
  background: linear-gradient(180deg, var(--niice-blush), var(--niice-blush-2));
  border: 1px solid rgba(214,179,106,.28);
  box-shadow:
    0 18px 55px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.55) inset;
}

.niice-darkband .work-card p,
.niice-darkband .blog-card p{
  color: rgba(15,15,20,.76);
}

.niice-darkband .work-card .niice-title,
.niice-darkband .blog-card .niice-title{
  color: rgba(15,15,20,.92);
}

/* buttons inside the cards: luxe hover */
.niice-darkband .work-card .btn-solid.small,
.niice-darkband .blog-card .btn-outline.small{
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.niice-darkband .work-card .btn-solid.small:hover,
.niice-darkband .blog-card .btn-outline.small:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(214,179,106,.22);
}

/* =========================
   BEFORE/AFTER: make it feel like a “premium module”
   ========================= */
.niice-darkband .ba-inner{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(214,179,106,.20);
  border-radius: 24px;
  padding: clamp(18px, 2.4vw, 28px);
  box-shadow: 0 22px 70px rgba(0,0,0,.32);
  backdrop-filter: blur(6px);
}

.niice-darkband .ba-inner p{
  color: rgba(255,255,255,.78);
}

/* give the slider a gold-kissed frame */
.niice-darkband .ba-slider{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(214,179,106,.28);
  box-shadow:
    0 18px 48px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.06) inset;
}

/* handle becomes “gold hardware” */
.niice-darkband .ba-handle-knob{
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  border: 1px solid rgba(214,179,106,.55);
}

.niice-darkband .ba-handle{
  background: linear-gradient(180deg, rgba(214,179,106,.95), rgba(201,163,122,.95));
}

/* Optional: if any section buttons exist inside darkband, make hover gold */
.niice-darkband .btn-outline.small{
  border-color: rgba(214,179,106,.55);
  color: rgba(15,15,20,.88);
}

.niice-darkband .btn-outline.small:hover{
  border-color: rgba(214,179,106,.95);
  box-shadow: 0 10px 26px rgba(214,179,106,.22);
}

/* =========================================
   DARKBAND BLEED: fade into/out of surrounding light sections
   ========================================= */

.niice-darkband{
  /* keep what we already set */
  overflow: hidden; /* ensures fades don't spill weirdly */
}

/* TOP + BOTTOM fades (pink -> dark -> pink) */
.niice-darkband::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  z-index: 0; /* sits above background, below content */
  background:
    /* TOP: light section bleeds into dark */
    linear-gradient(
      180deg,
      rgba(255,246,244,0.95) 0%,
      rgba(255,246,244,0.45) 10%,
      rgba(255,246,244,0.00) 22%
    ),
    /* BOTTOM: dark bleeds back into light */
    linear-gradient(
      0deg,
      rgba(255,246,244,0.95) 0%,
      rgba(255,246,244,0.40) 12%,
      rgba(255,246,244,0.00) 26%
    );
  mix-blend-mode: normal;
  opacity: 1;
}

/* Make sure real content stays above the fade overlay */
.niice-darkband > *{
  position: relative;
  z-index: 1;
}

/* =========================================
   MENU inside DARKBAND: white text + gold brand words
   ========================================= */

.pricing-section.niice-darkband h2{
  color:#fff;
}

.pricing-section.niice-darkband p{
  color: rgba(255,255,255,.82);
}

.pricing-section.niice-darkband .menu-gold{
  color: var(--niice-gold);
  text-shadow: 0 10px 30px rgba(214,179,106,.18);
}

/* If any other text in menu was dark, force it clean */
.pricing-section.niice-darkband{
  color: #fff;
}

/* =========================================
   MOBILE: TOP BAR UPGRADE (clean + premium)
   ========================================= */
@media (max-width: 900px){
  .white-top-bar{
    position: sticky;
    top: 0;
    z-index: 6000;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.82);
    border-bottom: 1px solid rgba(214,179,106,.20);
  }

  .top-bar-inner{
    padding: 8px 12px;
    gap: 10px;
  }

  /* Hide the extra sentence on mobile */
  .top-bar-left span:nth-child(3),
  .top-divider{
    display:none;
  }

  .top-bar-left{
    font-size: 12px;
    opacity: .95;
    white-space: nowrap;
  }

  /* Make phone number look like a luxe pill */
  .top-bar-left a{
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(214,179,106,.12);
    border: 1px solid rgba(214,179,106,.28);
    text-decoration:none;
    font-weight: 600;
  }

  /* Social icons tighter + nicer */
  .top-social .icon{
    width: 18px;
    height: 18px;
    opacity: .9;
  }
  .top-social a{
    width: 32px;
    height: 32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 999px;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.06);
  }
}

/* ===== Mobile CTA: floating pills (NO big tray) ===== */
@media (max-width: 900px){
  .niice-mobile-cta{
    grid-area: cta;
    padding: 0;
    margin: 0 auto;
    width: min(520px, 100%);
  }

  .niice-mobile-cta-shell{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 0;                 /* removes tray padding */
    background: transparent;     /* removes tray background */
    border: 0;                   /* removes tray border */
    box-shadow: none;            /* removes tray shadow */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .niice-mobile-cta-btn{
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-family: Montserrat, system-ui, -apple-system, Arial, sans-serif;
    font-weight: 800;
    font-size: 14px;

    background: rgba(255,255,255,0.85);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 10px 24px rgba(0,0,0,0.10);
  }

  .niice-mobile-cta-btn.is-primary{
    background: linear-gradient(180deg, rgba(235, 209, 150, 0.95), rgba(214, 173, 86, 0.85));
    border: 1px solid rgba(216, 178, 94, 0.55);
    box-shadow: 0 14px 28px rgba(216, 178, 94, 0.22);
  }

  /* remove ANY "square" decorations if they were CSS-generated */
  .niice-mobile-cta-btn::before,
  .niice-mobile-cta-btn::after{ content: none !important; }
}

/* =========================================
   MOBILE HERO BALANCE (slider + glass copy)
   ========================================= */
@media (max-width: 900px){
  .hero{
    min-height: 74vh;
    padding-top: 8px;
  }

  /* limit the slider visual dominance */
  .hero-slider{
    height: 52vh;
  }

  /* copy becomes a premium glass card */
  .hero-inner{
    align-items: flex-end;
    padding: 0 14px 16px;
  }

  .hero-copy{
    width: 100%;
    max-width: 520px;
    padding: 14px 14px 16px;
    border-radius: 18px;

    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(214,179,106,.20);
    backdrop-filter: blur(10px);
    box-shadow: 0 20px 50px rgba(0,0,0,.12);
  }

  .hero-copy h1{
    font-size: 30px;
    line-height: 1.05;
  }

  .hero-desc{
    font-size: 14px;
    line-height: 1.45;
  }

  /* make CTAs look premium and not huge */
  .hero-cta{
    gap: 10px;
  }
  .hero-cta a{
    flex: 1;
    text-align:center;
    padding: 12px 10px;
    border-radius: 999px;
  }
}

/* =========================================
   HERO WORD BUBBLE HIGHLIGHT
   ========================================= */
.hero .niice-word{
  position: relative;
  display:inline-block;
  padding: 2px 10px 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(214,179,106,.35), rgba(255,233,180,.22));
  border: 1px solid rgba(214,179,106,.30);
  box-shadow: 0 14px 40px rgba(214,179,106,.16);
}
.hero .niice-word::after{
  content:"";
  position:absolute;
  inset:-10px -14px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.50), rgba(255,255,255,0));
  opacity: .55;
  pointer-events:none;
}

/* =========================================================
   NIICE LUXE MOBILE-FIRST HEADER + CTA + FADE SYSTEM
   Paste at the BOTTOM of style.css
   ========================================================= */

:root{
  --niice-black: #0b0b0d;
  --niice-charcoal: #121217;
  --niice-gold: #d6b36a;
  --niice-gold-2:#f2dd9b;
  --niice-blush: #fbf4f6;     /* your pinkish-white */
  --niice-ink: #1c1c22;
}

/* ---------------------------
   1) MOBILE HEADER CLEANUP
   --------------------------- */
@media (max-width: 900px){

  /* Top bar becomes smaller + cleaner (or hide it if you want) */
  .white-top-bar{
    position: sticky;
    top: 0;
    z-index: 6000;
    border-bottom: 1px solid rgba(214,179,106,.25);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
  }
  .top-bar-inner{
    gap: 10px;
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  .top-bar-left{
    font-size: 12px;
    opacity: .95;
  }
  .top-divider{ display:none; }
  .top-bar-right .follow-label{ display:none; }

  /* Header becomes a luxury “panel” */
  .site-header{
    background: rgba(251,244,246,.86);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(214,179,106,.22);
  }

  /* Brand area: tighten and make it feel like a logo lockup */
  .brand{
    gap: 10px;
    align-items: center;
  }
  .brand-logo{
    width: 42px;
    height: 42px;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,.12);
  }
  .brand-name{
    font-size: 22px;
    letter-spacing: .3px;
  }
  .brand-sub{
    font-size: 12px;
    opacity: .88;
  }

  /* Hide desktop header actions on phone */
  .header-actions{ display:none; }
  .header-center{ display:none; }

  /* Burger button: make it look intentional */
  .nav-toggle{
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(214,179,106,.28);
    background: rgba(255,255,255,.70);
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
  }
  .nav-toggle span{
    background: rgba(28,28,34,.85);
  }
}

/* -----------------------------------
   2) MOBILE CTA BAR (premium version)
   ----------------------------------- */
@media (max-width: 900px){

  /* Turn your existing .niice-mobile-cta into a luxe “control dock” */
  .niice-mobile-cta{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 10px 12px;
    margin: 10px 12px 12px;
    border-radius: 18px;

    background: linear-gradient(180deg,
      rgba(255,255,255,.72),
      rgba(255,255,255,.46)
    );
    border: 1px solid rgba(214,179,106,.24);
    box-shadow: 0 18px 45px rgba(0,0,0,.12);
    backdrop-filter: blur(14px);
  }

  .niice-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 8px;

    height: 44px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .2px;

    border: 1px solid rgba(28,28,34,.10);
    background: rgba(255,255,255,.75);
    color: var(--niice-ink);

    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  }

  /* Primary feels like gold glass */
  .niice-cta-primary{
    background: linear-gradient(135deg, rgba(214,179,106,.95), rgba(242,221,155,.85));
    border: 1px solid rgba(214,179,106,.45);
    color: #17171b;
    box-shadow: 0 14px 32px rgba(214,179,106,.26);
  }

  .niice-cta:hover{
    transform: translateY(-1px);
    box-shadow: 0 16px 35px rgba(0,0,0,.14);
    border-color: rgba(214,179,106,.45);
  }

  /* Tiny icons without emojis — uses CSS only (no SVG needed) */
  .niice-mobile-cta a::before{
    content:"";
    width: 18px;
    height: 18px;
    display:inline-block;
    border-radius: 6px;
    background: rgba(214,179,106,.18);
    border: 1px solid rgba(214,179,106,.25);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  }

  /* Different “icon vibes” per button */
  .niice-mobile-cta a[href*="contact"]::before{ /* Book */
    background: linear-gradient(135deg, rgba(214,179,106,.35), rgba(242,221,155,.18));
  }
  .niice-mobile-cta a[href*="memberships"]::before{ /* VIP */
    background: linear-gradient(135deg, rgba(28,28,34,.10), rgba(214,179,106,.20));
  }
  .niice-mobile-cta a[href*="3d"]::before{ /* 3D */
    background: linear-gradient(135deg, rgba(0,0,0,.10), rgba(214,179,106,.14));
  }
}

/* -----------------------------------
   3) HERO: stop it from hogging phone
   ----------------------------------- */
@media (max-width: 900px){

  /* Reduce the hero height so users SEE content below */
  .hero{
    min-height: 74vh; /* was likely too tall */
    padding-bottom: 8px;
  }

  /* Keep the rotating images but shrink their dominance */
  .hero-slider{
    height: 74vh;
  }

  /* Make the hero copy feel like a “glass card” */
  .hero-copy{
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(214,179,106,.20);
    border-radius: 22px;
    padding: 18px 16px;
    box-shadow: 0 22px 55px rgba(0,0,0,.14);
    backdrop-filter: blur(14px);
  }

  .hero-kicker{
    letter-spacing: .22em;
    font-size: 11px;
  }

  .hero-micro{
    font-size: 13px;
    opacity: .9;
  }

  .hero h1{
    font-size: 36px;
    line-height: 1.05;
  }

  /* Make the “Set” highlight pop more */
  .niice-word{
    display:inline-block;
    padding: 2px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(214,179,106,.35), rgba(242,221,155,.18));
    border: 1px solid rgba(214,179,106,.22);
    box-shadow: 0 12px 30px rgba(214,179,106,.14);
  }

  /* Tighten CTA spacing so it reads like Pet Spa */
  .hero-cta{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 12px;
  }
  .hero-cta .btn-solid,
  .hero-cta .btn-ghost{
    width: 100%;
    justify-content:center;
  }
}

/* ------------------------------------------------
   4) DARK SLABS + FADE EDGES (light -> dark -> light)
   ------------------------------------------------ */
.dark-slab{
  background: linear-gradient(180deg, var(--niice-charcoal), var(--niice-black));
  color: rgba(255,255,255,.90);
}

.dark-slab h1,
.dark-slab h2,
.dark-slab h3,
.dark-slab .niice-title{
  color: rgba(255,255,255,.92);
}

.dark-slab p,
.dark-slab li{
  color: rgba(255,255,255,.78);
}

/* Fade utility classes (apply via HTML classes you added) */
.fade-top,
.fade-bottom{
  position: relative;
  overflow: visible;
}

.fade-top::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top: -60px;
  height: 80px;
  background: linear-gradient(180deg, rgba(251,244,246,1), rgba(11,11,13,0));
  pointer-events:none;
}

.fade-bottom::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: -60px;
  height: 80px;
  background: linear-gradient(0deg, rgba(251,244,246,1), rgba(11,11,13,0));
  pointer-events:none;
}

/* When coming OUT of dark into your normal light/pink section */
.fade-from-dark{
  position: relative;
}
.fade-from-dark::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top: -60px;
  height: 80px;
  background: linear-gradient(180deg, rgba(11,11,13,1), rgba(251,244,246,0));
  pointer-events:none;
}

/* -----------------------------------
   5) MENU SECTION: white text + gold Niice Nails
   ----------------------------------- */
.pricing-section.dark-slab h2{
  color: rgba(255,255,255,.92);
}
.title-gold{
  color: var(--niice-gold);
  text-shadow: 0 10px 30px rgba(214,179,106,.22);
}

.pricing-section.dark-slab p{
  color: rgba(255,255,255,.76);
}

/* Pricing image pops on dark */
.pricing-section.dark-slab .pricing-image-wrapper img{
  border: 1px solid rgba(214,179,106,.22);
  box-shadow: 0 22px 60px rgba(0,0,0,.35);
}

/* =========================
   MOBILE CTA (Premium Segmented)
   ========================= */

.niice-ico svg { width: 18px; height: 18px; display: block; fill: currentColor; }

@media (max-width: 900px) {

  /* cleaner mobile top-bar: less "desktop squeezed" */
  .white-top-bar .top-bar-left .top-divider,
  .white-top-bar .top-bar-left span:nth-child(3) { display: none; } /* hides "Complimentary..." on phone */

  .white-top-bar .top-bar-inner {
    padding: 10px 14px;
    gap: 10px;
    flex-wrap: wrap;
  }

  .top-bar-left span { font-size: 13px; }
  .top-bar-right .follow-label { display: none; }

  /* the premium CTA shell */
  .niice-mobile-cta { display: block; padding: 12px 14px 10px; }
  .niice-mobile-cta-shell{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    padding: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(216, 178, 94, 0.25);
    box-shadow: 0 16px 40px rgba(0,0,0,0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .niice-mobile-cta-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    border-radius: 999px;
    text-decoration: none;
    font-family: Montserrat, system-ui, -apple-system, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #1a1a1a;
    background: rgba(255,255,255,0.78);
    border: 1px solid rgba(0,0,0,0.06);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  }

  .niice-mobile-cta-btn.is-primary{
    background: linear-gradient(180deg, rgba(235, 209, 150, 0.95), rgba(214, 173, 86, 0.85));
    border: 1px solid rgba(216, 178, 94, 0.55);
    box-shadow: 0 14px 34px rgba(216, 178, 94, 0.25);
  }

  .niice-mobile-cta-btn:active{
    transform: scale(0.98);
  }

  .niice-mobile-cta-btn:hover{
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
  }

  .niice-mobile-cta-label { font-size: 14px; }

  /* remove old "generic pill" styling if it exists */
  .niice-cta, .niice-cta-primary { all: unset; }
}

/* =========================
   MOBILE HERO BALANCE (less “takes over screen”)
   ========================= */
@media (max-width: 900px) {
  .hero { min-height: 68vh; }
  .hero-inner { padding: 28px 14px 18px; }

  .hero-copy{
    max-width: 560px;
    margin: 0 auto;
    background: rgba(255,255,255,0.68);
    border: 1px solid rgba(216, 178, 94, 0.20);
    box-shadow: 0 20px 60px rgba(0,0,0,0.14);
    border-radius: 26px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 18px 16px;
  }

  .hero-kicker { font-size: 12px; letter-spacing: 2px; }
  .hero-micro { font-size: 13px; }

  .hero h1{
    font-size: 42px;
    line-height: 1.02;
    margin-top: 8px;
  }

  .hero-desc { font-size: 15px; line-height: 1.5; }

  .hero-cta{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hero-cta .btn-solid,
  .hero-cta .btn-ghost{
    height: 50px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
  }
}

/* =========================
   LOCAL SECTION FADES (light <-> dark)
   ========================= */

.fade-to-dark, .fade-to-light { position: relative; overflow: hidden; }

.fade-to-dark::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height: 110px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(15,15,15,1));
  pointer-events:none;
}

.fade-to-light::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height: 110px;
  background: linear-gradient(to bottom, rgba(15,15,15,0), rgba(255,255,255,1));
  pointer-events:none;
}

/* =========================
   MENU TITLE (white + gold accent)
   ========================= */
.pricing-section.is-dark {
  background: radial-gradient(1200px 700px at 30% 10%, rgba(80,80,80,0.35), rgba(15,15,15,1));
  color: #fff;
}

.pricing-section.is-dark h2{
  color:#fff;
  text-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.pricing-section.is-dark h2 .gold{
  background: linear-gradient(180deg, rgba(235, 209, 150, 1), rgba(214, 173, 86, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Header: centered brand on mobile (pet-site vibe) ===== */
@media (max-width: 900px){
  .header-inner{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand nav"
      "cta   cta";
    align-items: center;
    gap: 12px;
    padding: 14px 14px 10px;
  }

  .brand{ grid-area: brand; justify-self: center; text-align: center; }
  .nav-toggle{ grid-area: nav; justify-self: end; }

  .brand--center{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  /* restore logo size (bigger, like original) */
  .brand-logo{
    width: 56px;
    height: 56px;
    object-fit: contain;
  }

  .brand-name{ font-size: 34px; line-height: 1; }
  .brand-sub{ font-size: 14px; opacity: .85; }
}

@media (max-width: 900px){
  .nav-toggle{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 10px !important;
  }
}

/* ===== Hero title: Love pink gradient, Set gold ===== */
.hero-love{
  background: linear-gradient(90deg, #ff4fa3, #ff86c3, #ff4fa3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 18px 40px rgba(255, 79, 163, 0.18);
}

.hero-set{
  background: linear-gradient(180deg, rgba(235, 209, 150, 1), rgba(214, 173, 86, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 18px 40px rgba(216, 178, 94, 0.22);
}

/* kill any previous "Set pill" styling if it exists */
.niice-word{
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ===== Keyword highlights ===== */
.hl-gold{
  font-weight: 700;
  background: linear-gradient(180deg, rgba(235, 209, 150, 1), rgba(214, 173, 86, 1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-bottom: 1px solid rgba(216, 178, 94, 0.40);
}

.hl-pink{
  font-weight: 700;
  background: linear-gradient(90deg, #ff4fa3, #ff86c3);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  border-bottom: 1px solid rgba(255, 79, 163, 0.30);
}

/* ================================
   NIICE MOBILE: CLEAN HIERARCHY
   ================================ */

:root{
  --niice-gold: #d9b56b;
  --niice-pink: #ff4fa0;
  --niice-pink-deep: #c2146b;
  --niice-ink: #1a1a1a;
  --niice-cream: #fbf2f5;
}

/* 1) Brand row: logo NEXT to Niice Nails (not stacked) */
.brand.brand--center{
  display:flex;
  align-items:center;
  gap:12px;
  justify-content:center;
  text-align:left;
}

.brand-logo{
  width:56px;
  height:56px;
  object-fit:contain;
}

/* 2) Make header NOT sticky on mobile + reduce wasted padding */
@media (max-width: 900px){
  .site-header{
    position: relative !important;
    top: auto !important;
  }

  .header-inner{
    padding: 10px 14px !important;
  }

  /* Kill the “extra” desktop header actions on phone */
  .header-center,
  .header-actions{
    display:none !important;
  }

  /* Top bar: keep it clean (no giant multi-line chunk) */
  .top-bar-left .top-divider,
  .top-bar-left span:nth-child(3){
    display:none !important; /* hides “Complimentary beverages...” on phone */
  }

  .white-top-bar .top-bar-inner{
    flex-direction: column;
    align-items:flex-start;
    gap:8px;
    padding:10px 14px;
  }
}

/* 3) Remove the weird circle behind the hamburger (if your CSS added it) */
.nav-toggle{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.nav-toggle::before,
.nav-toggle::after{
  display:none !important;
}

/* 4) Hero headline: LOVE = vibrant pink gradient, SET = gold */
.hero h1{
  line-height: 1.05;
}

.hero-love{
  background: linear-gradient(90deg, var(--niice-pink), var(--niice-pink-deep));
  -webkit-background-clip: text;
  background-clip:text;
  color: transparent;
  text-shadow: 0 10px 30px rgba(255,79,160,.18);
}

.hero-set{
  color: var(--niice-gold);
  text-shadow: 0 10px 30px rgba(217,181,107,.20);
}

/* 5) Keyword highlights */
.hl-pink{
  color: var(--niice-pink-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: rgba(255,79,160,.35);
}

.hl-gold{
  color: var(--niice-gold);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-color: rgba(217,181,107,.35);
}

/* 6) Bullets = “pet-site” clarity */
.hero-bullets{
  margin: 14px 0 0;
  padding: 0;
  list-style:none;
  display:grid;
  gap:10px;
  color: rgba(26,26,26,.82);
  font-size: 15px;
}

.hero-bullets li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.hero-bullets li::before{
  content:"";
  width:10px;
  height:10px;
  margin-top: 6px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(255,255,255,0)) , linear-gradient(90deg, var(--niice-pink), var(--niice-gold));
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* 7) Fix “hero takes the whole phone” by balancing slider height */
@media (max-width: 900px){
  .hero{
    min-height: auto !important;
  }
  .hero-slider{
    height: 52vh !important; /* instead of swallowing the entire screen */
    max-height: 520px;
  }
  .hero-inner{
    padding-top: 14px !important;
  }
}

/* 8) Floating vertical CTA stack (bottom-left), phone only */
.niice-float-cta{
  display:none;
}

@media (max-width: 900px){
  .niice-float-cta{
    display:flex;
    position: fixed;
    left: 12px;
    bottom: 14px;
    z-index: 9999;
    flex-direction: column;
    gap:10px;
  }

  .niice-float-btn{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 12px 14px;
    border-radius: 16px;
    text-decoration:none;
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    font-weight: 800;
    letter-spacing: .3px;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    border: 1px solid rgba(255,255,255,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #111;
  }

  .niice-float-ico svg{
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  .niice-float-btn.is-book{
    background: linear-gradient(90deg, rgba(217,181,107,.95), rgba(255,255,255,.85));
  }

  .niice-float-btn.is-vip{
    background: linear-gradient(90deg, rgba(255,79,160,.95), rgba(255,255,255,.86));
  }

  .niice-float-btn.is-3d{
    background: linear-gradient(90deg, rgba(35,35,35,.92), rgba(80,80,80,.70));
    color: #fff;
    border-color: rgba(255,255,255,.22);
  }

  /* Don’t let this cover Felicia’s bubble */
  #felicia{
    z-index: 9998;
  }
}

:root{
  --niice-gold:#d8b36a;
  --niice-gold-2:#f1deaa;
  --niice-pink:#ff4fa3;
  --niice-ink:#141414;
}

/* 1) Mobile: header should NOT be sticky (stops the huge space hog) */
@media (max-width: 900px){
  .site-header{
    position: relative !important;
    top: auto !important;
  }

  /* optional: reduce clutter on mobile */
  .header-center, .header-actions{ display:none !important; }

  /* brand layout: logo LEFT of Niice Nails (horizontal) */
  .brand.brand--center{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    text-align:left !important;
  }
  .brand-mark{ margin:0 !important; }
  .brand-logo{
    width:46px !important;
    height:46px !important;
    object-fit:contain !important;
  }
}

/* 2) HERO: remove big “blocking card” feel */
.hero-copy{
  background: rgba(255,255,255,.58) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(216,179,106,.22);
  border-radius: 22px;
  padding: 14px 14px 16px !important;
  max-width: 520px;
}

/* 3) Title pill (Love at First Set) */
.hero-title-pill{
  display:inline-block;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(216,179,106,.28);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 14px 35px rgba(0,0,0,.12);
  margin-bottom: 10px;
}
.hero-title{
  margin:0;
  font-family:"Playfair Display", serif;
  font-weight:700;
  color: var(--niice-ink);
  line-height:1.05;
  font-size: clamp(32px, 6vw, 46px);
}
.hero-title-set{
  color: var(--niice-gold);
}

/* 4) Minimal bullets */
.hero-mini-list{
  list-style:none;
  padding:0;
  margin: 6px 0 12px;
  display:grid;
  gap: 8px;
}
.hero-mini-list li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 15.5px;
  color: rgba(20,20,20,.78);
}
.dot{
  width:10px;height:10px;border-radius:999px;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}
.dot-pink{ background: radial-gradient(circle at 30% 30%, #fff, var(--niice-pink)); }
.dot-gold{ background: radial-gradient(circle at 30% 30%, #fff, var(--niice-gold)); }

.mini-strong{ font-weight:800; }
.mini-pink{ color: var(--niice-pink); }
.mini-gold{ color: var(--niice-gold); }

/* 5) Pills: phone + book + vip + 3d */
.hero-cta--pills{ display:grid; gap:10px; margin-top: 10px; }

.hero-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  border-radius:999px;
  padding: 14px 14px;
  text-decoration:none;
  font-weight:800;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.16);
}
.hero-pill--phone{
  background: rgba(255,255,255,.85);
  color: var(--niice-ink);
  border: 2px hero-solid rgba(216,179,106,.55);
}
.hero-pill--book{
  background: linear-gradient(135deg, var(--niice-gold-2), var(--niice-gold));
  color:#141414;
}
.hero-pill--vip{
  background: linear-gradient(135deg, #ff78bd, var(--niice-pink));
  color:#fff;
}
.hero-pill--3d{
  background: linear-gradient(135deg, #2b2b2f, #111114);
  color:#fff;
}
.pill-ico svg{ width:18px;height:18px; fill: currentColor; opacity:.9; }

/* =========================================
   MOBILE HERO — PetSpa-style (NO big box)
   ========================================= */
@media (max-width: 900px) {

  /* Hide the top bar (number + socials) on small screens */
  .white-top-bar { display: none !important; }

  /* Header: brand left, logo next to name, keep hamburger */
  .header-inner{
    align-items: center;
  }

  /* Hide search + desktop links on mobile (clean header) */
  .header-center,
  .header-actions { display: none !important; }

  /* Brand layout: logo to the LEFT of Niice Nails */
  .brand.brand--center{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    text-align: left !important;
  }

  .brand-mark{ margin: 0 !important; }
  .brand-logo{
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
  }

  .brand-text .brand-name{
    font-size: 34px !important;
    line-height: 1 !important;
  }
  .brand-text .brand-sub{
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* HERO: remove the big “card” look */
  .hero-copy{
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: 92vw !important;
  }

  /* Title: NOT a pill — elegant text on image */
  .hero-title-pill{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 0 10px 0 !important;
  }

  .hero-title{
    font-family: "Playfair Display", serif !important;
    font-weight: 700 !important;
    font-size: 44px !important;
    line-height: 1.05 !important;
    color: #111 !important;
    letter-spacing: -0.5px !important;
    text-shadow: 0 8px 30px rgba(0,0,0,.18) !important;
    margin: 0 !important;
  }

  .hero-title-set{
    color: #c9a24a !important; /* gold */
    text-shadow: 0 8px 30px rgba(0,0,0,.12) !important;
  }

  /* Mini list: tighter + cleaner */
  .hero-mini-list{
    list-style: none !important;
    padding: 0 !important;
    margin: 10px 0 12px 0 !important;
    display: grid !important;
    gap: 10px !important;
  }

  .hero-mini-list li{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    color: rgba(17,17,17,.85) !important;
  }

  .dot{
    width: 10px !important;
    height: 10px !important;
    border-radius: 999px !important;
    flex: 0 0 10px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.12) !important;
  }
  .dot-pink{ background: radial-gradient(circle at 30% 30%, #ffd6e8, #ff6fb1) !important; }
  .dot-gold{ background: radial-gradient(circle at 30% 30%, #ffe8b6, #c9a24a) !important; }

  .mini-strong{ font-weight: 700 !important; }
  .mini-pink{ color: #ff4fa3 !important; }
  .mini-gold{ color: #c9a24a !important; }

  /* Pills: smaller width + better look */
  .hero-cta--pills{
    display: grid !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  .hero-pill{
    width: min(320px, 88vw) !important;   /* smaller than before */
    margin: 0 !important;
    padding: 14px 18px !important;
    border-radius: 999px !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 15px !important;          /* smaller lettering */
    letter-spacing: .2px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    /* “glass” effect like Pet Spa */
    background: rgba(255,255,255,.78) !important;
    border: 1px solid rgba(201,162,74,.35) !important;
    box-shadow:
      0 18px 40px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.55) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }

  .hero-pill:active{
    transform: scale(.98);
  }

  /* Phone pill icon */
  .hero-pill--phone .pill-ico svg{
    width: 18px !important;
    height: 18px !important;
    fill: rgba(17,17,17,.85) !important;
  }

  /* Book = soft gold */
  .hero-pill--book{
    background: linear-gradient(180deg, rgba(255,235,190,.95), rgba(201,162,74,.65)) !important;
    border: 1px solid rgba(201,162,74,.55) !important;
    color: #171717 !important;
  }

  /* VIP = refined pink */
  .hero-pill--vip{
    background: linear-gradient(180deg, rgba(255,196,222,.92), rgba(255,84,170,.62)) !important;
    border: 1px solid rgba(255,84,170,.45) !important;
    color: #171717 !important;
  }

  /* 3D = elegant dark */
  .hero-pill--3d{
    background: linear-gradient(180deg, rgba(40,40,40,.92), rgba(0,0,0,.65)) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    color: #fff !important;
  }

  /* Make floating CTA hidden until JS toggles it */
  #niiceFloatCta[hidden] { display: none !important; }
}

/* =========================================================
   MOBILE HERO — REMOVE BIG BLUR CARD + CLEAN PILLS
   ========================================================= */

@media (max-width: 900px) {

  /* Hide the top bar (call + socials) on small viewport */
  .white-top-bar { display: none !important; }

  /* Brand: logo LEFT of Niice Nails (not stacked / centered) */
  .brand.brand--center{
    display:flex !important;
    align-items:center !important;
    gap: 10px !important;
  }
  .brand-mark{ margin: 0 !important; }
  .brand-logo{ width: 46px !important; height: 46px !important; object-fit: contain; }
  .brand-text{ text-align:left !important; }

  /* If your header CSS is forcing centered layout, this helps */
  .header-inner{
    align-items:center !important;
  }

  /* Kill the “big box” look (blur/backdrop/rounded panel) */
  .hero-copy,
  .hero-copy *{
    backdrop-filter: none !important;
  }

  .hero-copy{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    max-width: 92vw !important;
  }

  /* Title: NO pill background. Just beautiful text over image. */
  .hero-title-pill{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 0 10px 0 !important;
  }

  .hero-title{
    font-size: 44px !important;
    line-height: 1.05 !important;
    color: #141414 !important;
    text-shadow: 0 10px 26px rgba(0,0,0,.12) !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
  }

  /* If you want ALL BLACK title (including Set) */
  .hero-title-set{
    color: #141414 !important;
  }

  /* Mini bullets: small + clean */
  .hero-mini-list{
    margin: 12px 0 14px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    display: grid !important;
    gap: 8px !important;
  }
  .hero-mini-list li{
    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    font-size: 16px !important;
    color: rgba(20,20,20,.88) !important;
    display:flex !important;
    align-items:center !important;
    gap: 10px !important;
  }
  .dot{
    width: 10px !important; height: 10px !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.10) !important;
    flex: 0 0 10px !important;
  }
  .dot-pink{ background: radial-gradient(circle at 30% 30%, #ffd3ea 0%, #ff6fb5 55%, #ff2f93 100%) !important; }
  .dot-gold{ background: radial-gradient(circle at 30% 30%, #fff2c5 0%, #e7c56c 55%, #c89f3f 100%) !important; }

  .mini-strong{ font-weight: 700 !important; }
  .mini-pink{ color:#ff4aa6 !important; }
  .mini-gold{ color:#c8a146 !important; }

  /* Pills: smaller + “perks pill” vibe (tight, glossy, premium) */
  .hero-cta--pills{
    display: grid !important;
    gap: 10px !important;
    margin-top: 12px !important;
    width: min(440px, 92vw) !important;
  }

  .hero-pill{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap: 10px !important;

    height: 52px !important;
    border-radius: 999px !important;

    font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .2px !important;
    text-decoration: none !important;

    border: 1px solid rgba(255,255,255,.70) !important;
    box-shadow:
      0 18px 45px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.60) !important;

    transform: translateZ(0);
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease !important;
  }

  .hero-pill:active{ transform: scale(.98) !important; }
  .hero-pill:hover{
    transform: translateY(-1px) !important;
    filter: saturate(1.05) !important;
    box-shadow:
      0 22px 55px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.70) !important;
  }

  /* Phone pill = white with gold edge */
  .hero-pill--phone{
    background: rgba(255,255,255,.86) !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(200,161,70,.55) !important;
  }

  /* Book pill = champagne gold */
  .hero-pill--book{
    background: linear-gradient(180deg, #fff1c9 0%, #e6c56e 55%, #d4b053 100%) !important;
    color: #161616 !important;
    border: 1px solid rgba(160,120,35,.25) !important;
  }

  /* VIP pill = soft pink */
  .hero-pill--vip{
    background: linear-gradient(180deg, #ffd2e7 0%, #ff88c1 55%, #ff4aa6 100%) !important;
    color: #161616 !important;
    border: 1px solid rgba(255,74,166,.25) !important;
  }

  /* 3D pill = dark luxe */
  .hero-pill--3d{
    background: linear-gradient(180deg, #3a3a3a 0%, #1f1f1f 60%, #111 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.18) !important;
  }

  /* Phone pill icon size */
  .pill-ico svg{
    width: 18px !important;
    height: 18px !important;
    opacity: .9 !important;
  }
}

/* Title: clean, no pill, no blur */
.hero-title-pill{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}
.hero-title{
  font-family: "Playfair Display", serif;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.02;
  font-size: clamp(40px, 7vw, 58px);
  color: rgba(10,10,10,.92); /* black */
  text-shadow: 0 10px 32px rgba(0,0,0,.25);
}
.hero-title-set{
  color: rgba(10,10,10,.92); /* Set also black (as requested) */
}

/* Mini bullets: clean + readable */
.hero-mini-list{
  list-style: none;
  padding: 0;
  margin: 10px 0 18px 0;
  display: grid;
  gap: 10px;
}
.hero-mini-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.92);
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: 0 0 auto;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}
.dot-pink{ background: radial-gradient(circle at 30% 30%, #ffd1e7, #ff5aa7); }
.dot-gold{ background: radial-gradient(circle at 30% 30%, #fff2c7, #d8b35a); }

.mini-strong{ font-weight: 800; }
.mini-pink{ color:#ff7ab6; }
.mini-gold{ color:#f2d08a; }

/* Premium pill system (like Pet Spa / your perks buttons vibe) */
.hero-cta--pills{
  display: grid;
  gap: 12px;
  margin-top: 12px;
  max-width: 360px;
}

/* Base pill */
.hero-pill{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 14px 34px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.35);
  transform: translateZ(0);
  transition: transform .15s ease, filter .15s ease;
  max-width: 360px;
}
.hero-pill:active{ transform: scale(.985); }
.hero-pill:hover{ filter: brightness(1.03); }

/* Phone pill: clean white with gold edge */
.hero-pill--phone{
  justify-content: center;
  height: 54px;
  background: rgba(255,255,255,.88);
  color: rgba(20,20,20,.9);
  border: 1px solid rgba(216,179,90,.65);
}
.hero-pill--phone .pill-ico{
  width: 18px; height: 18px;
  display:inline-flex;
}
.hero-pill--phone svg{ width: 18px; height: 18px; fill: rgba(20,20,20,.75); }

/* CTA pills */
.hero-pill--book{
  background: linear-gradient(180deg, rgba(246,226,170,.96), rgba(210,170,78,.92));
  color: rgba(25,18,6,.92);
  border-color: rgba(240,215,150,.7);
}

.hero-pill--vip{
  background: linear-gradient(180deg, rgba(255,166,210,.95), rgba(255,92,165,.90));
  color: rgba(25,8,18,.92);
  border-color: rgba(255,200,230,.65);
}

.hero-pill--3d{
  background: linear-gradient(180deg, rgba(40,40,40,.88), rgba(10,10,10,.92));
  color: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.20);
}

/* =========================
   MOBILE HEADER CTA PILLS
   ========================= */

.header-cta-mobile{
  display: none; /* desktop off */
}

@media (max-width: 900px){
  /* Header layout: allow the CTA row to sit under brand text */
  .header-inner{
    display: grid !important;
    grid-template-columns: 1fr auto; /* brand + hamburger */
    grid-template-areas:
      "brand toggle"
      "cta   toggle"
      "search search";
    row-gap: 10px;
    align-items: center;
  }

  .brand{ grid-area: brand; }
  .nav-toggle{ grid-area: toggle; }
  .header-center{ grid-area: search; }
  .header-cta-mobile{ grid-area: cta; }

  /* The pills row */
  .header-cta-mobile{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .hcta{
    height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .2px;

    border: 1px solid rgba(255,255,255,.55);
    box-shadow:
      0 10px 22px rgba(0,0,0,.18),
      inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .12s ease, filter .12s ease;
  }

  .hcta:active{ transform: scale(.985); }
  .hcta:hover{ filter: brightness(1.03); }

  .hcta--book{
    background: linear-gradient(180deg, rgba(246,226,170,.96), rgba(210,170,78,.92));
    color: rgba(25,18,6,.92);
    border-color: rgba(240,215,150,.7);
  }

  @media (max-width: 900px){

  .hcta{
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow:
      0 14px 28px rgba(0,0,0,.16),
      0 2px 0 rgba(255,255,255,.55) inset,
      0 -10px 18px rgba(0,0,0,.06) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateZ(0);
  }

  /* Keep Book gold (premium) */
  .hcta--book{
    background: linear-gradient(180deg, rgba(246,226,170,.96), rgba(210,170,78,.92));
    color: rgba(25,18,6,.92);
    border-color: rgba(240,215,150,.7);
  }

  /* VIP = soft glass */
  .hcta--vip{
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(245,245,245,.62));
    color: rgba(20,20,20,.86);
  }

  /* 3D = smoked glass */
  .hcta--3d{
    background: linear-gradient(180deg, rgba(30,30,30,.55), rgba(10,10,10,.72));
    color: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.14);
  }

  /* Make them “pop” on press */
  .hcta:active{
    transform: translateY(1px) scale(.985);
    box-shadow:
      0 10px 20px rgba(0,0,0,.14),
      0 2px 0 rgba(255,255,255,.50) inset,
      0 -8px 16px rgba(0,0,0,.05) inset;
  }
}


@media (max-width: 900px){
  .hero-cta--pills{ display: none !important; }
  .hero-pill--phone{ display: none !important; } /* if phone pill was in hero */
}

/* ===== HERO SLIDER FIX (mobile) ===== */
.hero{
  position: relative;
  overflow: hidden;
}

/* Make the hero tall enough AFTER the bigger header */
@media (max-width: 900px){
  .hero{
    min-height: 64vh;   /* increase if you want more image */
  }
  .hero-inner{
    min-height: 64vh;
  }
}

/* Ensure slides fill the hero area correctly */
.hero-slider{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

@media (max-width: 900px){
  .hero-mini-list{ display: none !important; }
}
}

@media (max-width: 900px){
  .hero-bubble{
    left: 12px;
    top: 10px;
    max-width: 255px;
  }
}

/* =========================
   MOBILE HEADER REFINEMENTS
   ========================= */
@media (max-width: 900px) {

  /* Hide the top bar (call + socials) on small view */
  .white-top-bar { display: none; }

  /* Brand: logo left, text beside it (already mostly true) */
  .brand--center {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }

  .brand-mark { flex: 0 0 auto; }
  .brand-logo { width: 46px; height: 46px; object-fit: contain; }

  /* Hide header actions on phone (desktop links) */
  .header-actions { display: none; }
  .header-center { display: none; } /* search bar off on phone */

  /* Pills row under brand/address */
  .mobile-quick{
    display: flex;
    gap: 10px;
    padding: 10px 0 6px;
    margin-left: 58px; /* lines up under text next to logo */
  }

  .mq-pill{
    appearance: none;
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 999px;
    padding: 9px 16px;
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .2px;
    text-decoration: none;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* “3D pop” */
    background: rgba(255,255,255,.75);
    box-shadow:
      0 10px 24px rgba(0,0,0,.10),
      inset 0 1px 0 rgba(255,255,255,.9);
    backdrop-filter: blur(10px);
    transform: translateZ(0);
  }

  .mq-pill:active{
    transform: translateY(1px);
    box-shadow:
      0 6px 16px rgba(0,0,0,.10),
      inset 0 1px 0 rgba(255,255,255,.9);
  }

  /* Book stays “soft gold” */
  .mq-pill.is-book{
    background: linear-gradient(180deg, rgba(255,236,187,.95), rgba(224,190,120,.90));
    border-color: rgba(150,110,40,.22);
    color: #1d1a14;
  }

  /* VIP + 3D are soft-light neutrals */
  .mq-pill.is-vip{
    background: rgba(255,255,255,.72);
    color: #3a3230;
  }

  .mq-pill.is-3d{
    background: linear-gradient(180deg, rgba(70,70,70,.78), rgba(25,25,25,.78));
    border-color: rgba(255,255,255,.12);
    color: #fff;
  }

  /* Hide on desktop by default */
  /* (Outside media query, mobile-quick is not present visually unless you set it) */
}

/* default: keep pills hidden on desktop */
.mobile-quick{ display:none; }

/* =========================
   MOBILE HERO BUBBLE
   ========================= */
@media (max-width: 900px) {

  /* make sure hero image is not “cut off” weirdly */
  .hero{
    min-height: 62vh;
  }

  .hero-inner{
    display: flex;
    align-items: flex-start;
  }

  /* Small “pet spa style” bubble overlay */
  .hero-bubble{
    margin: 14px 0 0 14px;
    max-width: 78%;
    border-radius: 18px;
    padding: 14px 14px;
    background: rgba(255,255,255,.68);
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.16);
    backdrop-filter: blur(10px);
  }

  .hero-bubble-title{
    font-family: "Playfair Display", serif;
    font-weight: 700;
    font-size: 22px;
    line-height: 1.1;
    color: #1e1b17;
  }

  .hero-bubble-sub{
    margin-top: 6px;
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    color: rgba(30,27,23,.72);
    line-height: 1.25;
  }

  /* Optional: hide desktop CTA buttons on mobile so it stays clean */
  .hero-cta--desktop{ display:none; }
}

/* =========================
   HERO ROTATION — CSS CROSSFADE
   (works even if JS breaks)
   ========================= */

.hero { position: relative; overflow: hidden; }
.hero-slider { position: absolute; inset: 0; z-index: 0; }

/* stack slides on top of each other */
.hero-slide{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.03);
  animation: niiceFade 15s infinite;
  will-change: opacity, transform;
}

/* each slide gets a different delay */
.hero-slide-1{ animation-delay: 0s; }
.hero-slide-2{ animation-delay: 5s; }
.hero-slide-3{ animation-delay: 10s; }

/* fade timing */
@keyframes niiceFade{
  0%   { opacity: 0; transform: scale(1.03); }
  8%   { opacity: 1; transform: scale(1.00); }
  33%  { opacity: 1; transform: scale(1.00); }
  41%  { opacity: 0; transform: scale(1.02); }
  100% { opacity: 0; }
}

/* keep your content above the slides */
.hero-inner{ position: relative; z-index: 1; }

/* if user prefers reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-slide{ animation: none; opacity: 1; }
  .hero-slide-2, .hero-slide-3{ display:none; }
}