/* =========================
   Niice Nails V2 — Day-Lux
   White + Rose-Gold + Soft Pink Marble
   Responsive + Interactive
   ========================= */

:root{
  --bg: #ffffff;
  --ink: #141217;
  --muted: rgba(20,18,23,.68);

  --rose: #f5c7d6;
  --rose2:#f9dbe5;
  --gold: #d6b26a;
  --gold2:#f0d9a4;

  --stroke: rgba(20,18,23,.10);
  --stroke2: rgba(255,255,255,.35);

  --card: rgba(255,255,255,.78);
  --card2: rgba(255,255,255,.62);

  --shadow: 0 18px 55px rgba(20,18,23,.12);
  --shadow2: 0 10px 35px rgba(20,18,23,.10);

  --radius: 18px;
  --radius2: 24px;

  --shell: 1120px;

  --t: 180ms;
  --t2: 420ms;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--ink);
  background:
    radial-gradient(1100px 600px at 20% -10%, rgba(214,178,106,.22), transparent 55%),
    radial-gradient(900px 600px at 80% 0%, rgba(245,199,214,.55), transparent 55%),
    radial-gradient(1200px 800px at 50% 120%, rgba(245,199,214,.28), transparent 60%),
    var(--bg);
}

a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
img{ max-width:100%; display:block; }

.shell{
  width:min(var(--shell), calc(100% - 40px));
  margin:0 auto;
}

.center{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:18px; }

.tiny{ font-size:12px; color: var(--muted); }
.muted{ color: var(--muted); }

.kicker{
  letter-spacing:.18em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(20,18,23,.62);
  margin: 0 0 10px;
}

.accent{
  background: linear-gradient(135deg, var(--gold), var(--gold2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid var(--stroke);
  box-shadow: 0 10px 20px rgba(20,18,23,.05);
  font-size: 12px;
}
.badge--soft{
  background: rgba(245,199,214,.35);
  border-color: rgba(214,178,106,.30);
}

/* Topbar */
.topbar{
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,.70);
  border-bottom: 1px solid rgba(20,18,23,.08);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 10px 0;
}
.topbar__text{ font-size: 12px; color: rgba(20,18,23,.70); }
.topbar__link{ font-size: 12px; color: rgba(20,18,23,.80); }
.topbar__link:hover{ text-decoration: underline; }

/* Header */
.header{
  position: sticky;
  top: 44px; /* under topbar */
  z-index: 70;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,.62);
  border-bottom: 1px solid rgba(20,18,23,.08);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
  padding: 14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
}
.brand__mark{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(10px 10px at 30% 30%, rgba(255,255,255,.95), transparent 60%),
    linear-gradient(135deg, rgba(245,199,214,.55), rgba(214,178,106,.35));
  border: 1px solid rgba(214,178,106,.35);
  box-shadow: var(--shadow2);
  font-weight: 800;
}
.brand__text{ line-height: 1.05; }
.brand__name{ font-weight: 800; letter-spacing:.2px; }
.brand__sub{ font-weight: 650; color: rgba(20,18,23,.70); }

.nav--desktop{
  display:flex;
  gap: 18px;
  align-items:center;
}
.nav--desktop a{
  font-size: 14px;
  padding: 10px 10px;
  border-radius: 12px;
  color: rgba(20,18,23,.78);
  transition: background var(--t) ease, transform var(--t) ease;
}
.nav--desktop a:hover{
  background: rgba(245,199,214,.30);
  transform: translateY(-1px);
}*/

.header__actions{
  display:flex;
  gap: 10px;
  align-items:center;
}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 22px rgba(20,18,23,.06);
  font-size: 13px;
  transition: transform var(--t) ease, box-shadow var(--t) ease, border-color var(--t) ease;
}
.pill:hover{
  transform: translateY(-1px);
  border-color: rgba(214,178,106,.45);
  box-shadow: 0 16px 35px rgba(20,18,23,.10);
}
.pill--solid{
  color: #201a10;
  border-color: rgba(214,178,106,.55);
  background: linear-gradient(135deg, rgba(214,178,106,.92), rgba(240,217,164,.72));
}
.pill--ghost{
  background: rgba(255,255,255,.62);
}
/*.pill--soft{
  border-color: rgba(214,178,106,.28);
  background: rgba(245,199,214,.28);
}*/

.pill--soft{
  background: rgba(255,255,255,0.82);
  color: #2b2430;
  border: 1px solid rgba(191, 166, 119, 0.28);
  box-shadow: none;
  backdrop-filter: blur(8px);
}

.pill--soft:hover{
  background: #ffffff;
  border-color: rgba(191, 166, 119, 0.42);
  transform: translateY(-1px);
}

.pill.is-icon .dot{
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(214,178,106,.95);
  box-shadow: 0 0 0 6px rgba(214,178,106,.18);
}

/* Menu button (mobile) */
.iconbtn{
  border: 1px solid rgba(20,18,23,.10);
  background: rgba(255,255,255,.78);
  border-radius: 14px;
  width: 44px; height: 44px;
  display:grid; place-items:center;
  box-shadow: 0 10px 22px rgba(20,18,23,.06);
}
.iconbtn:hover{ border-color: rgba(214,178,106,.45); }
.iconbtn--menu{ display:none; }
.iconbtn__bars{
  width: 18px; height: 12px; position: relative;
}
.iconbtn__bars:before,
.iconbtn__bars:after,
.iconbtn__bars{
  content:"";
  display:block;
}
.iconbtn__bars:before,
.iconbtn__bars:after{
  position:absolute; left:0; right:0;
  height:2px; border-radius: 2px;
  background: rgba(20,18,23,.75);
}
.iconbtn__bars:before{ top:0; }
.iconbtn__bars:after{ bottom:0; }
.iconbtn__bars/*{ }*/
.iconbtn__bars{ background: rgba(20,18,23,.75); height:2px; border-radius:2px; top:5px; }

/* Drawer */
.drawer{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1400;
}

.drawer.is-open{
  display: block;
}
.drawer__panel{
  position: fixed;
  top: 0; 
  right: 0;
  height: 100dvh;
  width: min(360px, 92vw);
  background: rgba(255,255,255,.92);
  border-left: 1px solid rgba(20,18,23,.08);
  box-shadow: -30px 0 70px rgba(20,18,23,.18);
  z-index: 200;
  padding: 16px;
  transform: translateX(0);
}
.drawer__backdrop{
  position: fixed; 
  inset: 0;
  background: rgba(20,18,23,.35);
  z-index: 190;
}
.drawer__top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 8px 2px 14px;
}
.drawer__title{ font-weight: 800; }
.drawer__nav{
  display:grid;
  gap: 10px;
}
.drawer__nav a{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(20,18,23,.08);
  background: rgba(245,199,214,.18);
}
.drawer__cta{ width: 100%; }

/* Hero */
.hero{
  position: relative;
  min-height: 640px;
  display:grid;
  align-items:center;
  padding: 44px 0 70px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  pointer-events:none;
}
.hero__bgSlide{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity var(--t2) ease, transform 900ms ease;
  filter: saturate(1.05) contrast(1.03);
}
.hero__bgSlide.is-active{
  opacity: 1;
  transform: scale(1.00);
}
.hero__sheen{
  position:absolute; inset:0;
  background:
    radial-gradient(700px 420px at 20% 10%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,.10), rgba(255,255,255,.55));
  mix-blend-mode: soft-light;
}
.hero__grain{
  position:absolute; inset:0;
  opacity: .12;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Hero card */
.hero__inner{ position: relative; z-index: 2; display:flex; justify-content:center; }
.heroCard{
  width: min(760px, 100%);
  border-radius: var(--radius2);
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
  box-shadow: var(--shadow);
  padding: 22px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.heroCard__top{ display:flex; justify-content:center; margin-bottom: 10px; }

.heroCard__title{
  margin: 0;
  text-align:center;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.02;
}
.heroCard__titleSoft{
  display:block;
  font-weight: 900;
  letter-spacing: .5px;
  background: linear-gradient(135deg, rgba(214,178,106,.95), rgba(245,199,214,.88));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.heroCard__titleHard{
  display:block;
  font-weight: 900;
}
.heroCard__sub{
  margin: 12px auto 0;
  text-align:center;
  max-width: 62ch;
  color: rgba(20,18,23,.72);
  line-height: 1.55;
}
.heroCard__cta{
  margin-top: 16px;
  display:flex;
  justify-content:center;
  gap: 10px;
  /*flex-wrap: wrap;*/
}

.heroCard__meta{
  margin-top: 18px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.stat{
  border: 1px solid rgba(20,18,23,.10);
  background: rgba(255,255,255,.55);
  border-radius: 16px;
  padding: 12px;
  text-align:center;
}
.stat__num{
  font-weight: 900;
  font-size: 18px;
  background: linear-gradient(135deg, rgba(214,178,106,.98), rgba(245,199,214,.95));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.stat__lbl{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(20,18,23,.68);
}

.heroCard__chips{
  margin-top: 14px;
  display:flex;
  justify-content:center;
  gap: 10px;
  /*flex-wrap: wrap;*/
}

.chip{
  border: 1px solid rgba(20,18,23,.12);
  background: rgba(255,255,255,.60);
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: transform var(--t) ease, border-color var(--t) ease, background var(--t) ease;
}
.chip:hover{ transform: translateY(-1px); border-color: rgba(214,178,106,.45); }
.chip.is-active{
  border-color: rgba(214,178,106,.55);
  background: rgba(245,199,214,.22);
}

.heroCard__hint{
  margin: 10px 0 0;
  text-align:center;
  font-size: 13px;
  color: rgba(20,18,23,.70);
}

/* =========================
   HERO: Halo blur ONLY behind content
   ========================= */

.heroGlass{
  /* Make the big panel stop fogging everything */
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* This wrapper becomes the “fog hugging the text + pills” */
.heroHalo{
  position: relative;
  display: grid;
  gap: 14px;
  padding: 26px 26px 22px;
  border-radius: 28px;
  isolation: isolate;
}

.heroHalo::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;

  /* the halo look */
  background: radial-gradient(120% 120% at 50% 0%,
      rgba(255,255,255,.38),
      rgba(255,255,255,.20) 40%,
      rgba(255,255,255,.12) 70%,
      rgba(255,255,255,.06)
    );

  /* blur only inside this halo shape */
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);

  /* luxury edge */
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    0 26px 70px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.10) inset;

  z-index: -1;
}

/* =========================
   Logo circle: fit better
   ========================= */
.heroLogo{
  width: 84px; height: 84px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.30);
  border: 1px solid rgba(255,255,255,.38);
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}

.heroLogo img{
  width: 100%;
  height: 100%;
  object-fit: cover;     /* fills the circle */
  object-position: center;
  transform: scale(1.10); /* slight zoom to eliminate empty edges */
}

/* =========================
   “Money” typography upgrades
   ========================= */

/* gives Niice Nails a fine black trace without looking cartoony */
.heroStroke{
  text-shadow:
    0 1px 0 rgba(0,0,0,.25),
    0 2px 14px rgba(0,0,0,.18);
  -webkit-text-stroke: 0.7px rgba(0,0,0,.45);
}

/* richer black headline */
.heroBlackLux{
  letter-spacing: -0.02em;
  text-shadow: 0 10px 28px rgba(0,0,0,.28);
}

/* slightly more premium body */
.heroSubLux{
  font-weight: 500;
  color: rgba(20,20,20,.78);
  text-shadow: 0 10px 26px rgba(0,0,0,.12);
  line-height: 1.35;
}

/* =========================
   Gold shimmer that stays readable
   ========================= */
.heroGoldShimmer{
  display: inline-block;
  background: linear-gradient(110deg,
    #8a6a1a 0%,
    #d8b86a 18%,
    #fff0c6 32%,
    #caa14a 48%,
    #f3e3b0 62%,
    #b98a2a 78%,
    #8a6a1a 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* visible even on bright areas */
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.22));
  animation: heroGoldWave 3.8s ease-in-out infinite;
}

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

/* =========================
   Pills: stop looking like stickers → real 3D buttons
   ========================= */
.heroPill--lux{
  position: relative;
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow:
    0 16px 34px rgba(0,0,0,.18),
    0 1px 0 rgba(255,255,255,.55) inset;
}

.heroPill--lux::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 120% at 30% 20%,
    rgba(255,255,255,.65),
    rgba(255,255,255,0) 55%);
  mix-blend-mode: soft-light;
  opacity: .9;
}

.heroPill--lux:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 44px rgba(0,0,0,.22),
    0 1px 0 rgba(255,255,255,.60) inset;
  filter: saturate(1.05);
}

.heroPill--lux:active{
  transform: translateY(1px);
  box-shadow:
    0 12px 26px rgba(0,0,0,.20),
    0 1px 0 rgba(255,255,255,.45) inset;
}

/* Optional: make the gold more luminous without turning neon */
.heroPill--gold{
  background: linear-gradient(135deg, #b98a2a, #f3e3b0 55%, #b98a2a);
  border: 1px solid rgba(120,80,10,.25);
}

/*Sections */
.section{ padding: 64px 0; }
.section--pattern{
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(245,199,214,.30), transparent 55%),
    linear-gradient(to bottom, rgba(245,199,214,.18), rgba(255,255,255,0));
}

.sectionHead{
  text-align:center;
  margin-bottom: 22px;
}
.sectionHead h2{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.06;
}

/* =========================================
   BOOK NOW: 3D + constant attention bounce
   ========================================= */
.heroPill--gold{
  position: relative;
  transform: translateZ(0);
  box-shadow:
    0 14px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -10px 18px rgba(120,70,0,.12);
}

.heroPill--gold::after{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events:none;
  opacity: .65;
  background: radial-gradient(circle at 25% 25%,
    rgba(255,255,255,.75),
    rgba(255,255,255,0) 45%);
}

/* Bounce */
@keyframes niice-bounce{
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-7px) scale(1.02); }
  70%  { transform: translateY(0) scale(1); }
  100% { transform: translateY(-3px) scale(1.01); }
}

/* Apply bounce ONLY to Book Now */
.heroPill--gold{
  animation: niice-bounce 1.15s ease-in-out infinite;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .heroPill--gold{ animation: none; }
}

/* =========================
   Services Header (Lux)
   ========================= */

.sectionKicker{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  margin-bottom: 10px;
}

.sectionKicker__line{
  height: 2px;
  width: 99px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214,178,106,0), rgba(214,178,106,.95), rgba(214,178,106,0));
  opacity: .9;
}

.sectionKicker__text{
  font-size: 12px;
  letter-spacing: .28em;
  font-weight: 800;
  color: rgba(214,178,106,.95);
}

.luxH2{
  margin: 0;
  text-align:center;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(34px, 4vw, 52px);
  color: rgba(20,18,23,.92);
}

.luxH2__accent{
  background: linear-gradient(135deg, rgba(214,178,106,.98), rgba(240,217,164,.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* keep it readable */
  filter: saturate(1.05) contrast(1.05);
}

.luxSub{
  margin: 10px auto 0;
  text-align:center;
  max-width: 880px;
  color: rgba(20,18,23,.68);
  font-size: 16px;
  line-height: 1.55;
}

/* Cards */
.cards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.card{
  border-radius: var(--radius2);
  border: 1px solid rgba(20,18,23,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.52));
  box-shadow: var(--shadow2);
  padding: 16px;
  position: relative;
  overflow:hidden;
  transition: transform var(--t) ease, box-shadow var(--t) ease, border-color var(--t) ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(214,178,106,.45);
  box-shadow: 0 22px 60px rgba(20,18,23,.14);
}
.card__icon{
  width: 40px; height: 40px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(245,199,214,.28);
  border: 1px solid rgba(214,178,106,.28);
  margin-bottom: 10px;
}
.card h3{ margin: 0 0 8px; }
.card p{ margin: 0 0 12px; color: rgba(20,18,23,.70); line-height: 1.45; }
.card__actions{ display:flex; gap: 10px; flex-wrap:wrap; }

/* =========================
   Feature Cards (Services)
   Inspired by reference site
   ========================= */

/* =========================
   Feature Cards (Services) — V2 Upgrade
   Clear, vibrant, per-card aura, accent hover
   ========================= 

.featureCards{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 22px;
} */

.featureCards{
  display:grid;
  grid-template-columns: repeat(3, minmax(280px, 340px));
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 1024px){
  .featureCards{
    grid-template-columns: 1fr;
    justify-content: stretch;
  }
}

/* Swipe hint (mobile only) */
.swipeHint{
  display:none;
  align-items:center;
  gap: 10px;
  font-size: 12px;
  color: rgba(20,18,23,.55);
  margin: 4px 0 10px;
  padding-left: 6px;
}
.swipeHint__dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: rgba(214,178,106,.92);
  box-shadow: 0 0 0 6px rgba(214,178,106,.14);
}

@media (max-width: 760px){
  .swipeHint{ display:flex; }
}

/* Core */
.fCard{
  --accent1: rgba(214,178,106,.95);
  --accent2: rgba(245,199,214,.70);
  --ring: rgba(214,178,106,.38);

  border-radius: 26px;
  border: 1px solid rgba(20,18,23,.12);
  background: rgba(255,255,255,.92); /* clearer */
  box-shadow: 0 22px 70px rgba(20,18,23,.12);
  overflow:hidden;
  position: relative;
  transform: translateZ(0);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

/* Per-card aura overlays (soft gradient that fades upward) */
.fCard::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 26px;
  pointer-events:none;
  opacity: .55;
  filter: blur(0px);
  transition: opacity 220ms ease;
}

/* Accent ring glow */
.fCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 26px;
  pointer-events:none;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 220ms ease;
}

/* Image (make it crisp + vivid) */
.fCard__media{
  height: 240px; /* bigger */
  background-size: cover;
  background-position: center;
  position: relative;
  filter: saturate(1.12) contrast(1.06);
}

/* Remove fog overlay. Keep a premium highlight only. */
.fCard__media::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(520px 240px at 20% 8%, rgba(255,255,255,.28), transparent 60%),
    linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0));
}

/* Chip */
.fChip{
  position:absolute;
  top: 14px; left: 14px;
  z-index: 2;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(20,18,23,.12);
  box-shadow: 0 14px 30px rgba(20,18,23,.12);
  font-size: 12px;
}
.fChip__dot{
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--accent1);
  box-shadow: 0 0 0 6px rgba(214,178,106,.14);
}

/* Body */
.fCard__body{
  padding: 16px 16px 18px;
}

/* Title bigger + elegant */
.fTitle{
  margin: 0 0 10px;
  font-size: 22px;          /* bigger */
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: .2px;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  color: rgba(20,18,23,.92);
}

.fTitle{
  position: relative;
  padding-bottom: 10px; /* room for underline */
}

/* underline that fades out to the right */
.fTitle::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: 2px;
  width: 78%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent1), rgba(214,178,106,.0));
  opacity: .72;
}

.fTitle__accent{
  color: rgba(173, 138, 204, 0.85); /* soft lilac default */
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

/* Copy bigger */
.fText{
  margin: 0 0 14px;
  font-size: 15px;
  color: rgba(20,18,23,.72);
  line-height: 1.52;
}

/* Buttons like your reference (pill-outline + filled that matches accent) */
.fActions{
  display:flex;
  gap: 12px;
  /*flex-wrap: wrap;*/
}

.fActions .pill{
  height: 46px;
  padding: 0 18px;
  font-size: 14px;
  border-radius: 999px;

  font-weight: 900;
  letter-spacing: .2px;

  /* 3D glassy pill */
  border: 1px solid rgba(255,255,255,.45);
  background:
    linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.12)),
    linear-gradient(135deg, var(--accent1), var(--accent2));

  color: rgba(20,18,23,.92);

  box-shadow:
    0 18px 36px rgba(20,18,23,.14),
    inset 0 1px 0 rgba(255,255,255,.55);

  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, border-color 180ms ease;
}

.fActions .pill:hover{
  transform: translateY(-1px);
  filter: saturate(1.06) contrast(1.02);
  border-color: var(--ring);
  box-shadow:
    0 22px 44px rgba(20,18,23,.18),
    inset 0 1px 0 rgba(255,255,255,.62);
}

/* Primary button tinted to card accent */
.fActions .pill--solid{
  border-color: var(--ring);
  background:
    linear-gradient(135deg, rgba(255,255,255,.25), rgba(255,255,255,.10)),
    linear-gradient(135deg, var(--accent1), var(--accent2));
  color: rgba(20,18,23,.92);
}

/* Hover “breath” + accent shift */
@keyframes niiceBreath {
  0%   { transform: translateY(-5px) scale(1.01); }
  50%  { transform: translateY(-7px) scale(1.02); }
  100% { transform: translateY(-5px) scale(1.01); }
}

.fCard:hover{
  border-color: var(--ring);
  box-shadow: 0 28px 90px rgba(20,18,23,.16);
  transform: translateY(-5px) scale(1.01);
  animation: niiceBreath 1.25s ease-in-out infinite;
}

.fCard:hover .fCard__media{
  filter: saturate(1.18) contrast(1.10) brightness(1.03);
}

.fCard:hover::after{
  box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 0 0 6px rgba(214,178,106,.10), 0 20px 80px rgba(20,18,23,.14);
}
.fCard:hover::before{ opacity: .75; }

.fCard:hover .fCard__media{
  transform: scale(1.03);
  transition: transform 220ms ease;
}
.fCard__media{
  transform: scale(1);
  transition: transform 220ms ease;
}

/* -------------------------
   Per-card accent palettes
   (controlled by data-accent)
   ------------------------- */
.fCard[data-accent="cherry"]{
  --accent1: rgba(215,52,74,.98);   /* candy red */
  --accent2: rgba(255,170,190,.70); /* soft pink lift */
  --ring: rgba(215,52,74,.34);
}

.fCard[data-accent="gold"]{
  --accent1: rgba(214,178,106,.96);
  --accent2: rgba(240,217,164,.80);
  --ring: rgba(214,178,106,.40);
}
.fCard[data-accent="purple"]{
  --accent1: rgba(170,115,255,.98);
  --accent2: rgba(255,197,230,.75);
  --ring: rgba(170,115,255,.38);
}
.fCard[data-accent="rose"]{
  --accent1: rgba(245,151,186,.98);
  --accent2: rgba(245,199,214,.80);
  --ring: rgba(245,151,186,.38);
}
.fCard[data-accent="blush"]{
  --accent1: rgba(235,160,180,.96);
  --accent2: rgba(255,232,238,.92);
  --ring: rgba(235,160,180,.34);
}

/* -------------------------
   Per-card aura directions
   (controlled by data-aura)
   ------------------------- */

.fCard[data-aura="bottom"]::before{
  background: linear-gradient(to top, rgba(245,199,214,.55), rgba(255,255,255,0) 62%);
}
.fCard[data-aura="bottomRight"]::before{
  background:
    radial-gradient(520px 260px at 90% 95%, rgba(245,199,214,.60), transparent 60%),
    linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,0));
}
.fCard[data-aura="topRight"]::before{
  background:
    radial-gradient(520px 260px at 90% 10%, rgba(170,115,255,.20), transparent 60%),
    radial-gradient(520px 260px at 40% 95%, rgba(255,197,230,.35), transparent 62%);
}
.fCard[data-aura="topLeft"]::before{
  background:
    radial-gradient(520px 260px at 10% 10%, rgba(235,160,180,.25), transparent 60%),
    radial-gradient(520px 260px at 60% 95%, rgba(255,232,238,.40), transparent 65%);
}

/* Responsive */
@media (max-width: 980px){
  .featureCards{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px){

  /* Swipe carousel */
  .featureCards{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 6px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .featureCards::-webkit-scrollbar{ height: 8px; }
  .featureCards::-webkit-scrollbar-thumb{
    background: rgba(20,18,23,.12);
    border-radius: 999px;
  }

  .fCard{
    min-width: 84%;
    scroll-snap-align: start;
  }

  .fCard__media{ height: 260px; } /* big image on mobile too */
  .fTitle{ font-size: 24px; }
  .fText{ font-size: 16px; }
}

/* VIP */
.vipGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: stretch;
}
.vipMedia__img{
  border-radius: var(--radius2);
  border: 1px solid rgba(20,18,23,.10);
  background-size: cover;
  background-position: center;
  min-height: 380px;
  box-shadow: var(--shadow);
  position: relative;
  overflow:hidden;
}

/* VIP image: remove fog, make vivid */
.vipMedia__img{
  filter: saturate(1.12) contrast(1.06);
}
.vipMedia__img::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0));
}

.vipMedia__tag{ position:absolute; top: 16px; left: 16px; z-index: 2; }
.vipMedia__title{
  position:absolute; left: 16px; bottom: 16px; z-index: 2;
}
.vipMedia__titleBig{ display:block; font-size: 42px; font-weight: 900; }
.vipMedia__titleSmall{ display:block; font-weight: 750; color: rgba(20,18,23,.70); }

/* =========================
   VIP Badge (Royal + clean)
   ========================= */

.vipBadge{
  position:absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;

  display:inline-flex;
  flex-direction:column;
  gap: 2px;

  padding: 12px 14px;
  border-radius: 18px;

  background: rgba(255,255,255,.88);
  border: 1px solid rgba(20,18,23,.10);
  box-shadow: 0 20px 55px rgba(20,18,23,.14);

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

.vipBadge__big{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 950;
  letter-spacing: .2px;
  font-size: 34px;
  line-height: 1.05;
  color: rgba(20,18,23,.92);
}

.vipBadge__small{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(20,18,23,.62);
}

.vipRoyal{
  background: linear-gradient(135deg, rgba(214,178,106,.98), rgba(240,217,164,.92));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20,18,23,.20);
}

.play{
  position:absolute; right: 16px; bottom: 16px; z-index: 2;
  width: 52px; height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(214,178,106,.45);
  background: linear-gradient(135deg, rgba(214,178,106,.92), rgba(245,199,214,.40));
  box-shadow: 0 18px 40px rgba(20,18,23,.14);
  cursor:pointer;
}

.vipCard{
  border-radius: var(--radius2);
  border: 1px solid rgba(20,18,23,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.54));
  box-shadow: var(--shadow);
  padding: 18px;
}

/* =========================
   VIP Vibes (FOMO + clean)
   ========================= */

.vipVibe{
  text-align:left;
  border-radius: 18px;
  border: 1px solid rgba(20,18,23,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 16px 44px rgba(20,18,23,.10);
  padding: 14px;
  cursor:pointer;

  transition: transform var(--t) ease, box-shadow var(--t) ease, border-color var(--t) ease;
}

.vipVibe:hover{
  transform: translateY(-2px);
  border-color: rgba(214,178,106,.45);
  box-shadow: 0 22px 60px rgba(20,18,23,.14);
}

.vipVibe--featured{
  border-color: rgba(214,178,106,.55);
  box-shadow: 0 26px 70px rgba(214,178,106,.16);
}

.vipVibe__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.vipVibe__name{
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 950;
  font-size: 18px;
  letter-spacing: .2px;
  color: rgba(20,18,23,.92);
}

.vipVibe__accent{
  -webkit-text-stroke: 1px rgba(20,18,23,.22);
  text-shadow: 0 10px 24px rgba(20,18,23,.10);
}

.vipVibe__accent--gold{
  background: linear-gradient(135deg, rgba(214,178,106,.98), rgba(240,217,164,.90));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.vipVibe__accent--rose{
  background: linear-gradient(135deg, rgba(245,151,186,.98), rgba(255,232,238,.92));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.vipVibe__accent--purple{
  background: linear-gradient(135deg, rgba(170,115,255,.98), rgba(255,197,230,.78));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.vipVibe__accent--cherry{
  background: linear-gradient(135deg, rgba(215,52,74,.98), rgba(255,170,190,.80));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.vipVibe__why{
  font-weight: 850;
  color: rgba(20,18,23,.86);
  line-height: 1.35;
  margin-bottom: 6px;
}

.vipVibe__tease{
  font-size: 13px;
  color: rgba(20,18,23,.66);
  line-height: 1.4;
}

.vipCTA{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
/* VIP: reduce reading, increase scanability */
.vipLead{
  margin: 10px 0 6px;
  font-size: 16px;
  color: rgba(20,18,23,.76);
  line-height: 1.45;
  font-weight: 700;
}
.vipMicro{
  margin: 0 0 10px;
  font-size: 13px;
  color: rgba(20,18,23,.60);
}

/* Signal tags (compact, premium) */
.vipSignals{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-top: 10px;
}
.vipTag{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(245,199,214,.22);
  border: 1px solid rgba(214,178,106,.25);
  font-size: 12px;
  font-weight: 850;
  color: rgba(20,18,23,.78);
}
.vipTag--long{
  background: rgba(255,255,255,.70);
}

/* Vibe cards: single line only */
.vipVibe__oneLiner{
  font-weight: 850;
  color: rgba(20,18,23,.78);
  line-height: 1.3;
  font-size: 14px;
}

/* VIP strip on the image to kill dead space */
.vipStrip{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;

  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(20,18,23,.10);
  box-shadow: 0 18px 50px rgba(20,18,23,.12);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.vipStrip span{
  font-size: 12px;
  font-weight: 900;
  color: rgba(20,18,23,.72);
  padding-right: 10px;
  border-right: 1px solid rgba(20,18,23,.10);
}
.vipStrip span:last-child{
  border-right: none;
  padding-right: 0;
}

/* =========================
   VIP Conveyor (baggage-claim)
   ========================= */
.vipTicker{
  margin-top: 10px;
  border-radius: 999px;
  border: 1px solid rgba(20,18,23,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 18px 50px rgba(20,18,23,.10);
  overflow: hidden;
  position: relative;
  padding: 10px 0;
  /* show only ~3 pills in the viewport */
  max-width: 520px;          /* desktop window size (tune 480–560) */
  width: min(520px, 100%);   /* responsive */
  margin-left: 0;            /* align left under the text */
  margin-right: 0;
}

/* soft glass highlight */
.vipTicker::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.08));
  pointer-events:none;
}

/* edge fade so it feels like it disappears into the “belt” */
.vipTicker::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.95), rgba(255,255,255,0) 18%),
    linear-gradient(270deg, rgba(255,255,255,.95), rgba(255,255,255,0) 18%);
  mix-blend-mode: screen;
  opacity: .65;
}

.vipTicker__track{
  display:flex;
  gap: 12px;
  align-items:center;
  width: max-content;
  padding-left: 14px;

  animation: vipConveyor 18s linear infinite;
}

@keyframes vipConveyor{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* because we duplicated the items */
}

/* pause on hover (luxury control) */
.vipTicker:hover .vipTicker__track{
  animation-play-state: paused;
}

/* =========================
   Ticker Pills (shimmer)
   ========================= */
.vipTick{
  position: relative;
  display:inline-flex;
  align-items:center;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(214,178,106,.25);
  background: rgba(245,199,214,.16);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .15px;
  color: rgba(20,18,23,.78);
  white-space: nowrap;
  overflow: hidden;

  box-shadow:
    0 10px 25px rgba(20,18,23,.08),
    inset 0 1px 0 rgba(255,255,255,.55);

  animation: vipPulse 2.8s ease-in-out infinite;
}

@keyframes vipPulse{
  0%,100% { transform: translateY(0); filter: saturate(1) brightness(1); }
  50%     { transform: translateY(-1px); filter: saturate(1.05) brightness(1.03); }
}

/* shimmer sweep */
.vipTick::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 60%;
  height: 180%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: rotate(18deg);
  animation: vipShine 2.6s ease-in-out infinite;
  opacity: .55;
}

@keyframes vipShine{
  0%   { transform: translateX(-140%) rotate(18deg); }
  60%  { transform: translateX(220%) rotate(18deg); }
  100% { transform: translateX(220%) rotate(18deg); }
}

/* accent variations */
.vipTick--gold{
  border-color: rgba(214,178,106,.35);
  background: linear-gradient(135deg, rgba(214,178,106,.22), rgba(255,255,255,.68));
}
.vipTick--rose{
  border-color: rgba(245,151,186,.35);
  background: linear-gradient(135deg, rgba(245,151,186,.18), rgba(255,255,255,.70));
}
.vipTick--cherry{
  border-color: rgba(215,52,74,.30);
  background: linear-gradient(135deg, rgba(215,52,74,.12), rgba(255,255,255,.72));
}
.vipTick--soft{
  border-color: rgba(20,18,23,.10);
  background: rgba(255,255,255,.68);
}
.vipTick--long{
  border-color: rgba(214,178,106,.22);
  background: rgba(255,255,255,.74);
}

/* =========================
   “Pick me” shimmer on CTA pills
   ========================= */
.vipCTA .pill--solid,
.vipCTA .pill--ghost{
  position: relative;
  overflow: hidden;
  animation: ctaFloat 2.9s ease-in-out infinite;
}

@keyframes ctaFloat{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}

/* shimmer sweep on CTAs */
.vipCTA .pill--solid::after,
.vipCTA .pill--ghost::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-70%;
  width: 55%;
  height: 220%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: rotate(18deg);
  animation: ctaShine 2.4s ease-in-out infinite;
  opacity: .55;
}

@keyframes ctaShine{
  0%   { transform: translateX(-150%) rotate(18deg); }
  70%  { transform: translateX(240%) rotate(18deg); }
  100% { transform: translateX(240%) rotate(18deg); }
}

.toggle{
  display:flex;
  gap: 10px;
  margin: 14px 0 14px;
}
.toggle__btn{
  flex:1;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(20,18,23,.10);
  background: rgba(255,255,255,.65);
  cursor:pointer;
}
.toggle__btn.is-active{
  border-color: rgba(214,178,106,.55);
  background: rgba(245,199,214,.22);
}

.tierGrid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tier{
  border-radius: 18px;
  border: 1px solid rgba(20,18,23,.10);
  background: rgba(255,255,255,.66);
  padding: 14px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.tier--featured{
  border-color: rgba(214,178,106,.55);
  box-shadow: 0 22px 60px rgba(214,178,106,.14);
}
.tier__top{
  display:flex; align-items:center; justify-content:space-between; gap: 10px;
}
.price{ font-weight: 900; }
.list{ margin:0; padding-left: 18px; color: rgba(20,18,23,.74); }
.vipFoot{ margin-top: 10px; }

/* Gallery */
.filters{ display:flex; justify-content:center; gap: 10px; flex-wrap:wrap; margin-bottom: 14px; }

.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.tile{
  border: 1px solid rgba(20,18,23,.10);
  border-radius: var(--radius2);
  background: rgba(255,255,255,.62);
  box-shadow: var(--shadow2);
  overflow:hidden;
  padding: 0;
  cursor:pointer;
  text-align:left;
  transition: transform var(--t) ease, border-color var(--t) ease;
}
.tile:hover{ transform: translateY(-3px); border-color: rgba(214,178,106,.45); }
.tile__img{
  display:block;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
}
.tile__cap{
  display:block;
  padding: 12px;
}
.tile__title{ display:block; font-weight: 850; }
.tile__sub{ display:block; font-size: 12px; color: rgba(20,18,23,.68); margin-top: 2px; }
.tile.is-hidden{ display:none; }

/* =========================
   GALLERY IMAGE-OVERLAY CARDS
========================= */
.tile--overlay{
  position:relative;
  overflow:hidden;
  border-radius:34px;
  padding:0;
  background:transparent;
  border:none;
}

.tile--overlay .tile__img{
  position:relative;
  display:block;
  min-height:420px;
  background-size:cover;
  background-position:center;
  border-radius:34px;
  overflow:hidden;
}

.tile__shade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:34%;
  background:linear-gradient(
    to top,
    rgba(12,10,16,.72) 0%,
    rgba(12,10,16,.42) 46%,
    rgba(12,10,16,0) 100%
  );
  pointer-events:none;
  z-index:1;
}

.tile__cap--overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:22px 22px 24px;
}

.tile--overlay .tile__title{
  color:#fff;
  font-size:28px;
  font-weight:800;
  line-height:1.05;
}

.tile--overlay .tile__sub{
  color:rgba(255,255,255,.90);
  font-size:16px;
  line-height:1.35;
}

/* neutralize old below-image caption layout */
.tile--overlay .tile__cap{
  background:none;
  border:none;
}

/* Products */
.productGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items:center;
}
.productHero__img{
  border-radius: var(--radius2);
  border: 1px solid rgba(20,18,23,.10);
  min-height: 380px;
  background-size: cover;
  background-position:center;
  box-shadow: var(--shadow);
}
.productCard{
  border-radius: var(--radius2);
  border: 1px solid rgba(20,18,23,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.56));
  box-shadow: var(--shadow);
  padding: 18px;
}
.pills{ display:flex; gap: 10px; flex-wrap:wrap; margin: 12px 0; }
.pill.is-tab{ height: 40px; }
.pill.is-tab.is-active{ border-color: rgba(214,178,106,.55); background: rgba(245,199,214,.22); }

.productInfo{
  border: 1px solid rgba(20,18,23,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.65);
  padding: 14px;
}
.productInfo__title{ font-weight: 900; }
.productInfo__text{ margin-top: 4px; color: rgba(20,18,23,.70); }
.productActions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }

/* Work */
.workGrid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  align-items:center;
}
.workCard{
  border-radius: var(--radius2);
  border: 1px solid rgba(20,18,23,.10);
  background: rgba(255,255,255,.70);
  box-shadow: var(--shadow);
  padding: 18px;
}
.workBullets{ margin: 14px 0; display:grid; gap: 12px; }
.mini{ display:flex; gap: 12px; align-items:flex-start; }
.mini__icon{
  width: 30px; height: 30px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(245,199,214,.26);
  border: 1px solid rgba(214,178,106,.25);
}
.mini__title{ font-weight: 850; }
.mini__text{ font-size: 13px; color: rgba(20,18,23,.70); margin-top: 2px; }

.workMedia__img{
  border-radius: var(--radius2);
  border: 1px solid rgba(20,18,23,.10);
  min-height: 380px;
  background-size: cover;
  background-position:center;
  box-shadow: var(--shadow);
}
.workMedia__tags{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

/* Reviews */
.reviews{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.review{
  border-radius: var(--radius2);
  border: 1px solid rgba(20,18,23,.10);
  background: rgba(255,255,255,.72);
  box-shadow: var(--shadow2);
  padding: 16px;
}
.review__stars{ color: rgba(214,178,106,.95); letter-spacing: 2px; }
.review p{ margin: 10px 0 12px; color: rgba(20,18,23,.72); line-height: 1.5; }
.review__name{ font-weight: 850; }

/* Footer */
.footer{
  padding: 44px 0 20px;
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(245,199,214,.25), transparent 55%),
    rgba(255,255,255,.85);
  border-top: 1px solid rgba(20,18,23,.08);
}
.footer__inner{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 18px;
  align-items:flex-start;
}
.brand--footer .brand__mark{ width: 44px; height: 44px; }
.footer__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.footer__title{ font-weight: 900; margin-bottom: 10px; }
.footer__col a{
  display:block;
  padding: 8px 0;
  color: rgba(20,18,23,.78);
}
.footer__col a:hover{ text-decoration: underline; }
.footer__bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(20,18,23,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* FOOTER upgrades */
.brand.brand--footer{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.footer__trust{
  margin-top: 10px;
  opacity: .85;
}

.footer__bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.footer__legal{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.footer__dot{
  opacity:.45;
}

.footer__copy{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

/* Make footer logo behave nicely */
.footer .brand-logo{
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Footer visit column */
.footer__address{
  display:inline-block;
  cursor:pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .9;
}

.footer__bookpill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 18px;
  min-width: 220px;
  border-radius: 999px;
}

/* Modals */
.modal{
  border: none;
  border-radius: 22px;
  padding: 0;
  width: min(980px, 92vw);
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 90px rgba(20,18,23,.25);
}
.modal::backdrop{ background: rgba(20,18,23,.45); }
.modal--small{ width: min(520px, 92vw); }

.modal__close{
  position: absolute;
  top: 12px; right: 12px;
  width: 44px; height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(20,18,23,.10);
  background: rgba(255,255,255,.85);
  cursor:pointer;
}
.modal__media{
  width: 100%;
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  border-bottom: 1px solid rgba(20,18,23,.08);
}
.modal__meta{ padding: 16px; }
.modal__title{ font-weight: 950; font-size: 20px; }
.modal__sub{ margin-top: 6px; color: rgba(20,18,23,.70); }
.modal__actions{ display:flex; gap: 10px; flex-wrap:wrap; margin-top: 12px; }
.stack{ display:grid; gap: 10px; margin-top: 12px; }

/* Reveal */
[data-reveal]{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */
@media (max-width: 980px){
  .cards{ grid-template-columns: repeat(2, 1fr); }
  .vipGrid{ grid-template-columns: 1fr; }
  .tierGrid{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: repeat(2, 1fr); }
  .productGrid{ grid-template-columns: 1fr; }
  .workGrid{ grid-template-columns: 1fr; }
  .reviews{ grid-template-columns: 1fr; }
  .footer__inner{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .topbar__text{ display:none; }
  .nav--desktop{ display:none; }
  .iconbtn--menu{ display:grid; }
  .header{ top: 40px; }
  .hero{ min-height: 620px; padding: 24px 0 54px; }
  .heroCard{ padding: 16px; }
  .heroCard__meta{ grid-template-columns: 1fr; }
  .cards{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
}

/* cap membership option tiles so they don't balloon */
.tierGrid{ align-items: stretch; }
.tier{
  max-width: 100%;
}

/* if your membership option cards are a different class than .tier,
   paste their selector here instead and keep these same rules */

/* =========================
   VIP — fix mid-width + phone flow
   ========================= */

/* 2) On phone: media should NOT dominate the screen */
@media (max-width: 760px){
  .vipCard{ padding: 14px; }
  .vipMedia__img--inCard{
    min-height: 0;
    height: clamp(160px, 34vw, 220px); /* smaller + controlled */
    margin: 8px 0 12px;
  }
}


  /* tighten the headline + spacing so the section fits */
  #vip .vipCard h2{
    font-size: 22px;
    line-height: 1.15;
    margin: 8px 0 8px;
  }
  #vip .vipCard .muted,
  #vip .vipCard .tiny{
    font-size: 13px;
    line-height: 1.4;
  }


/* =========================
   VIP Vibes: stop stretching + swipe on phone
   ========================= */

.vipRailWrap{
  margin-top: 12px;
}

/* Desktop + wide: keep a clean grid */
.vipVibes{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px){
  .vipVibes{
    grid-template-columns: 1fr;
  }
}

/* Prevent long weird stretching */
.vipVibe{
  width: 100%;
  max-width: 100%;
}

/* VIP image sizing: control height instead of relying on big min-height */
#vip .vipMedia__img{
  min-height: 0;                 /* overrides earlier 380px minimum */
  height: clamp(180px, 34vw, 260px);
}

/* On very small phones, make it even tighter so the whole VIP block fits */
@media (max-width: 420px){
  #vip .vipMedia__img{
    height: 170px;
  }
}

/* ---- VIP Vibes: stop elongation everywhere ---- */
#vip .vipVibes{
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#vip .vipVibe{
  width: 100%;
  max-width: 100%;
}

/* TABLET + PHONE: turn into a swipe rail (this is your key fix)
   We do it at 980px so there is never that “awkward half-wide bar” zone. */
@media (max-width: 980px){
  #vip .vipVibes{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 6px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  #vip .vipVibes::-webkit-scrollbar{ height: 8px; }
  #vip .vipVibes::-webkit-scrollbar-thumb{
    background: rgba(20,18,23,.12);
    border-radius: 999px;
  }

  /* fixed “card” width = no long bars */
  #vip .vipVibe{
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: start;
  }
}

/* Slightly wider cards on super small phones */
@media (max-width: 420px){
  #vip .vipVibe{
    flex-basis: 88%;
    max-width: 88%;
  }
}

/* Keep ticker from looking huge on mobile */
@media (max-width: 760px){
  #vip .vipTicker{
    max-width: 100%;
  }
}

/* VIP height control (phone) */
@media (max-width: 760px){
  #vip .vipMedia__img{
    height: 180px;
    min-height: 0;
  }
}

/* ensure VIP never causes horizontal overflow */
#vip { overflow-x: clip; }

/* make the left image match the right card height on desktop */
.vipGrid { align-items: stretch; }
.vipMedia__img { height: 100%; min-height: 0; }

/* mobile image sizing (keeps it from being absurdly tall) */
@media (max-width: 980px){
  .vipMedia__img--inCard{
    display: block;
    height: clamp(180px, 40vw, 240px);
    margin: 10px 0 14px;
  }
}

/* =========================
   GALLERY: Mobile 2-column grid
   ========================= */

#gallery .grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Tablet */
@media (max-width: 1000px){
  #gallery .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Phone: keep 2 columns (your request) */
@media (max-width: 680px){
  #gallery .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  /* Prevent any tile content from forcing width overflow */
  #gallery .tile,
  #gallery .tile__cap{
    min-width: 0;
  }

  /* Make captions wrap instead of stretching the page */
  #gallery .tile__title,
  #gallery .tile__sub{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Extra tiny phones: still 2 columns, but tighter */
@media (max-width: 390px){
  #gallery .grid{ gap: 12px; }
}

/* =========================
   Nail Rail ("Baggage Claim" effect)
   ========================= */

.nailRailBlock{
  margin-top: 22px;
}

.nailRailHead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 12px;
}

.nailRailTitle{
  font-weight: 800;
  font-size: 18px;
}

.nailRailSub{
  opacity: .7;
  font-size: 13px;
}

/* ===== Nail Rail: auto-moving marquee that still allows swipe/drag ===== */

/*.nailRail{
  overflow: hidden;              /*important: hides the looping seam 
  position: relative;
  padding: 10px 0 14px;
  touch-action: pan-x;           /* allows horizontal swipe on mobile 
  user-select: none;
}*/

.nailRail{
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scroll-behavior: auto;
  touch-action: pan-x;
  will-change: scroll-position;
  }

.nailRail::-webkit-scrollbar{ 
  display:none; } /* Chrome/Safari hide */

.nailRail.is-dragging{
  cursor: grabbing;
}

.nailRail__track{
  display:flex;
  gap: 16px;
  width: max-content;
  will-change: transform;
  animation: none;
}

/* Pause when user interacts */
.nailRail:hover .nailRail__track,
.nailRail.is-paused .nailRail__track{
  animation-play-state: paused;
}

@keyframes nailMarquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* JS duplicates content so -50% loops clean */
}

.nailRailCard{
  flex: 0 0 auto;
  width: 260px;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.06);
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.10);
  cursor: grab;
  aspect-ratio: 4 / 5;
}

.nailRailCard:active{ cursor: grabbing; }

@media (max-width: 680px){
  .nailRail__track{ animation-duration: 60s; } /* slower */
  .nailRailCard{
    width: 62vw;          /* smaller frame */
    max-width: 240px;
    height: auto;        /* smaller height */
    background-position: center;
    aspect-ratio: 9 / 16;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgba(255,255,255,.35);
  }
}

/* =========================
   Before / After slider
   ========================= */

.baBlock{
  margin-top: 22px;
}

.baHead{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 12px;
}

.baTitle{
  font-weight: 900;
  font-size: 18px;
}

.baSub{
  opacity: .7;
  font-size: 13px;
}

.ba{
  position: relative;
  width: 100%;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 18px 46px rgba(0,0,0,.10);
  background: #fff;
  height: clamp(260px, 46vw, 460px);
}

.ba__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.ba__img--before{
  /* This gets updated by JS */
  clip-path: inset(0 50% 0 0);
}

.ba__range{
  position:absolute;
  inset:auto 14px 14px 14px;
  width: calc(100% - 28px);
  z-index: 5;
}

.ba__handle{
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width: 3px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  z-index:4;
}

.igTag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.65);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  font-weight: 700;
  text-decoration:none;
  color: inherit;
  margin: 6px 0 12px;
}

.igDot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffd6e7, #e5b7ff);
}

.pill--bounce{ animation: niiceBounce 1.6s ease-in-out infinite; }
@keyframes niiceBounce{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

@media (max-width: 680px){
  .grid{ gap: 14px; }
  .tile{ border-radius: 22px; }
}

.ba__range{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  width: auto;
  height: 44px;     /* keeps it easy to grab, but doesn't trap scrolling */
  opacity: 0;       /* hides native UI */
  z-index: 6;
}

.ba{ touch-action: pan-y; }
.ba.is-dragging{ touch-action: none; }

/* =========================
   Niice shimmer headline
   ========================= */

.niiceShimmer{
  display: inline-block;
  font-weight: 950;
  background: linear-gradient(
    120deg,
    #d6b26a 0%,
    #f5c7d6 35%,
    #ffffff 50%,
    #f5c7d6 65%,
    #d6b26a 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: niiceShimmer 3.8s linear infinite;
}

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

.niiceShimmer{
  position: relative;
  padding: 0 .10em;
}

.niiceShimmer::before{
  content:"";
  position:absolute;
  left:-.12em; right:-.12em;
  top: 58%;
  height: .70em;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.55),
    rgba(214,178,106,.18),
    rgba(245,199,214,.20),
    rgba(255,255,255,.55)
  );
  filter: blur(1px);
  opacity: .55;
  z-index: -1;
}

/* =========================
   3D Studio pill — pops out
   ========================= */
.pill--3d{
  position: relative;
  box-shadow:
    0 22px 60px rgba(20,18,23,.18),
    0 10px 22px rgba(20,18,23,.10);
  transform: translateY(-1px);
}

.pill--3d::after{
  content:"";
  position:absolute;
  left: 14%;
  right: 14%;
  bottom: -14px;
  height: 18px;
  background: radial-gradient(closest-side, rgba(20,18,23,.22), transparent 70%);
  filter: blur(2px);
  opacity: .65;
  pointer-events:none;
}

/* =========================
   Niice shimmer: add contrast (stroke + glow)
   ========================= */

.niiceShimmer{
  text-shadow:
    0 10px 24px rgba(20,18,23,.10),
    0 0 18px rgba(214,178,106,.22);
  -webkit-text-stroke: 1px rgba(20,18,23,.22);
}

/* =========================
   Section swirl accents
   ========================= */

.sectionHead--niice{
  position: relative;
  padding: 24px 0 10px;
}

.sectionHead--niice::before,
.sectionHead--niice::after{
  content:"";
  position:absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  filter: blur(22px);
  opacity: .45;
  pointer-events: none;
}

.sectionHead--niice::before{
  left: -60px;
  top: -40px;
  background: radial-gradient(circle, rgba(245,199,214,.8), transparent 60%);
}

.sectionHead--niice::after{
  right: -60px;
  bottom: -40px;
  background: radial-gradient(circle, rgba(214,178,106,.8), transparent 60%);
}

/* =========================
   Gallery links row
   ========================= */

.galleryLinks{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 14px;
  /*flex-wrap: wrap;*/
}

/* Disable gallery filter pills */
.filters{
  display: none !important;
}

/* =========================
   Kicker upgrade (TRANSFORMATIONS & INSPIRATIONS)
   ========================= */

.kicker--niice{
  font-weight: 900;
  letter-spacing: .34em;
  color: rgba(20,18,23,.62);
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

/* gold underline sweep */
.kicker--niice::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 72%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214,178,106,0), rgba(214,178,106,.95), rgba(214,178,106,0));
  opacity: .9;
}

/* subtle shimmer glint across the letters */
.kicker--niice::before{
  content:"";
  position:absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.65) 45%, transparent 60%);
  transform: translateX(-140%);
  opacity: .35;
  pointer-events:none;
  animation: kickerGlint 4.4s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes kickerGlint{
  0%   { transform: translateX(-140%); }
  55%  { transform: translateX(140%); }
  100% { transform: translateX(140%); }
}

/* =========================
   Alive words (detail / results / feel)
   ========================= */

.luxSub--alive{
  font-weight: 650;
}

/* underline + shimmer pulse */
.aliveWord{
  position: relative;
  display: inline-block;
  padding: 0 2px 2px;
  font-weight: 900;
  color: rgba(20,18,23,.78);
}

/* gold underline */
.aliveWord::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214,178,106,0), rgba(214,178,106,.95), rgba(214,178,106,0));
  opacity: .9;
}

/* animated glint */
.aliveWord::before{
  content:"";
  position:absolute;
  left:-35%;
  top: -10%;
  width: 35%;
  height: 130%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0));
  transform: skewX(-18deg);
  opacity: .55;
  animation: aliveGlint 3.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes aliveGlint{
  0%   { transform: translateX(-160%) skewX(-18deg); opacity: 0; }
  20%  { opacity: .55; }
  55%  { transform: translateX(260%) skewX(-18deg); opacity: .55; }
  100% { transform: translateX(260%) skewX(-18deg); opacity: 0; }
}

/* =========================
   PERKS — Swipe rail (VIP)
   ========================= */

.perksRail{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.perkCard{
  border-radius: 26px;
  border: 1px solid rgba(20,18,23,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58));
  box-shadow: 0 22px 70px rgba(20,18,23,.10);
  overflow: hidden;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.perkCard:hover{
  transform: translateY(-3px);
  border-color: rgba(214,178,106,.45);
  box-shadow: 0 28px 90px rgba(20,18,23,.14);
}

.perkTop{
  list-style: none;
  padding: 18px 18px 14px;
  cursor: pointer;
  user-select: none;
}
.perkTop::-webkit-details-marker{ display:none; }

.perkTitle{
  display:block;
  margin-top: 10px;
  font-weight: 950;
  font-size: 22px;
  line-height: 1.12;
  color: rgba(20,18,23,.92);
}

.perkTag{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214,178,106,.22);
  background: rgba(255,255,255,.70);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(20,18,23,.70);
  box-shadow: 0 14px 30px rgba(20,18,23,.08);
}

.perkTag--gold{ border-color: rgba(214,178,106,.35); }
.perkTag--rose{ border-color: rgba(245,151,186,.35); }
.perkTag--purple{ border-color: rgba(170,115,255,.35); }
.perkTag--cherry{ border-color: rgba(215,52,74,.30); }

.perkBody{ padding: 0 18px 18px; }

.perkList{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 12px;
  color: rgba(20,18,23,.74);
  line-height: 1.55;
}
.perkList strong{ color: rgba(20,18,23,.88); }

.perkCallout{
  padding: 12px 12px;
  border-radius: 18px;
  border: 1px solid rgba(214,178,106,.28);
  background: rgba(245,199,214,.18);
  list-style: none;
  margin-left: -18px;
  padding-left: 18px;
}

.perkCard[open]{ border-color: rgba(214,178,106,.35); }
.perkCard[open] .perkTitle{
  background: linear-gradient(135deg, rgba(214,178,106,.98), rgba(245,199,214,.88));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20,18,23,.18);
}

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

/* Phone — swipe rail */
@media (max-width: 760px){
  .perksRail{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 6px 2px 14px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
  }

  .perksRail::-webkit-scrollbar{ display:none; }

  .perkCard{
    flex: 0 0 86%;
    max-width: 86%;
    scroll-snap-align: start;
  }
}

/* =========================
   3D Studio pill “pop out”
   ========================= */

.pill--3d{
  position: relative;
  transform: translateY(-2px);
  box-shadow:
    0 18px 40px rgba(20,18,23,.18),
    0 0 0 1px rgba(214,178,106,.22) inset;
}

.pill--3d::after{
  content:"";
  position:absolute;
  inset:-8px -10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(245,199,214,.35), transparent 60%);
  filter: blur(10px);
  opacity: .75;
  pointer-events:none;
  z-index: -1;
}

/* Perks hero image banner */
.perksHeroImg{
  border-radius: 28px;
  border: 1px solid rgba(20,18,23,.10);
  box-shadow: 0 22px 70px rgba(20,18,23,.12);
  background-size: cover;
  background-position: center;
  aspect-ratio: 16 / 6;
  min-height: 220px;
}

@media (max-width: 760px){
  .perksHeroImg{
    aspect-ratio: 16 / 9;
    min-height: 180px;
    border-radius: 22px;
  }
}

/* =========================
   NIICE PERKS (V2 transplant)
   ========================= */

/* Section background: readable + soft glow */
.perks-section{
  position: relative;
  padding: 74px 0;
  overflow: hidden;
}

.perks-section::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(circle at 20% 15%, rgba(245,199,214,.55), transparent 55%),
    radial-gradient(circle at 85% 30%, rgba(214,178,106,.40), transparent 55%),
    radial-gradient(circle at 45% 95%, rgba(229,183,255,.35), transparent 55%);
  filter: blur(14px);
  pointer-events:none;
  opacity: .95;
}

/* Keep your old class name but make it NOT dark */
.fade-to-dark{
  background: transparent;
}

/* Inner width: match your V2 shell vibe */
.perks-inner{
  width: min(1100px, calc(100% - 40px));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Eyebrow / title / subtitle */
.section-eyebrow{
  text-transform: uppercase;
  letter-spacing: .34em;
  font-weight: 900;
  font-size: 12px;
  color: rgba(20,18,23,.62);
  display: inline-block;
  position: relative;
  padding-bottom: 10px;
}

/* gold underline like your kicker */
.section-eyebrow::after{
  content:"";
  position:absolute;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  width: 78%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214,178,106,0), rgba(214,178,106,.95), rgba(214,178,106,0));
  opacity: .95;
}

.section-title{
  margin: 10px 0 8px;
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.06;
  font-weight: 950;
  color: rgba(20,18,23,.92);
}

.section-subtitle{
  margin: 0 0 26px;
  max-width: 72ch;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(20,18,23,.70);
}

/* Grid */
.perks-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

/* Cards */
.perk-card{
  position: relative;
  border-radius: 26px;
  padding: 20px 18px 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(20,18,23,.08);
  box-shadow: 0 18px 46px rgba(20,18,23,.10);
  backdrop-filter: blur(10px);
  transform: translateZ(0);
  transition: transform .22s ease, box-shadow .22s ease;
  overflow: hidden;
}

.perk-card{ -webkit-tap-highlight-color: transparent; }

/* Subtle “alive” sheen */
.perk-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.65) 46%, transparent 62%);
  transform: translateX(-140%);
  opacity: .25;
  pointer-events:none;
  animation: perkSheen 6.2s ease-in-out infinite;
  mix-blend-mode: screen;
}

@keyframes perkSheen{
  0%{ transform: translateX(-140%); }
  45%{ transform: translateX(140%); }
  100%{ transform: translateX(140%); }
}

.perk-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(20,18,23,.14);
}

/* “Pill” tag (the box must look like a real pill) */
.perk-tag{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid rgba(20,18,23,.10);
  box-shadow: 0 14px 30px rgba(20,18,23,.08);
  background: rgba(255,255,255,.78);
  color: rgba(20,18,23,.82);
  margin-bottom: 10px;
  position: relative;
}

/* Add a little dot inside the pill */
.perk-tag::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(245,199,214,1), rgba(214,178,106,.85));
  box-shadow: 0 0 0 3px rgba(255,255,255,.55);
}

/* Per-card accent tint (so pills + card differ) */
.perk-card--savings .perk-tag{ background: rgba(245,199,214,.42); }
.perk-card--referrals .perk-tag{ background: rgba(214,178,106,.28); }
.perk-card--events .perk-tag{ background: rgba(229,183,255,.30); }
.perk-card--education .perk-tag{ background: rgba(255,214,231,.30); }

/* ===== Opposing color system (pill vs card background) ===== */

/* Make card backgrounds visibly different */
.perk-card{
  background: rgba(255,255,255,.72); /* default fallback */
}

/* SAVINGS pill is pink-ish, so card goes SOFT PURPLE or soft lavender? 
   You asked: purple pill -> soft yellow card, and vice versa.
   We'll map each card type to a strong “opposing” tint. */

/* Savings & Rewards (often rose/pink pill) -> soft purple card */
.perk-card--savings{
  background: linear-gradient(180deg, rgba(229,183,255,.34), rgba(255,255,255,.70));
}

/* Referrals (gold-ish pill) -> soft cherry/pink card */
.perk-card--referrals{
  background: linear-gradient(180deg, rgba(255,214,231,.36), rgba(255,255,255,.70));
}

/* Events (purple-ish pill) -> soft gold card */
.perk-card--events{
  background: linear-gradient(180deg, rgba(214,178,106,.22), rgba(255,255,255,.70));
}

/* Education (cherry/red-ish pill) -> soft lavender/purple card */
.perk-card--education{
  background: linear-gradient(180deg, rgba(229,183,255,.28), rgba(255,255,255,.70));
}

/* Extra “depth” edge glow per card */
.perk-card--savings{ box-shadow: 0 18px 46px rgba(120,90,160,.12); }
.perk-card--referrals{ box-shadow: 0 18px 46px rgba(214,178,106,.14); }
.perk-card--events{ box-shadow: 0 18px 46px rgba(214,178,106,.12); }
.perk-card--education{ box-shadow: 0 18px 46px rgba(190,80,120,.12); }

/* Titles */
.perk-title{
  margin: 6px 0 12px;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 950;
  color: rgba(20,18,23,.92);
}

/* List */
.perk-list{
  margin: 0 0 16px;
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.perk-list li{
  position: relative;
  padding-left: 18px;
  color: rgba(20,18,23,.72);
  line-height: 1.45;
  transition: transform .18s ease, filter .18s ease;
}

/* star bullet */
.perk-list li::before{
  content:"✶";
  position:absolute;
  left:0;
  top: 0;
  transform: translateY(2px);
  color: rgba(214,178,106,.95);
  text-shadow: 0 6px 16px rgba(214,178,106,.22);
  transition: transform .18s ease;
}

/* Hover “pop” on each bullet (box + bullet) */
.perk-card:hover .perk-list li:hover{
  transform: translateX(6px);
  filter: brightness(1.03);
}
.perk-card:hover .perk-list li:hover::before{
  transform: translateY(2px) scale(1.25);
}

/* Make the "tap to expand" / button area match */
.perk-book-btn{
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  box-shadow: 0 14px 34px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
}
.perk-book-btn:hover{
  transform: translateY(-1px);
}

/* 3D Book button at bottom of each card */
.perk-book-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  border: 1px solid rgba(20,18,23,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.68));
  color: rgba(20,18,23,.86);
  box-shadow: 0 18px 34px rgba(20,18,23,.14);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

.perk-book-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 26px 70px rgba(20,18,23,.16);
}

.perk-book-btn:active{
  transform: translateY(-1px);
}

/* Footer note */
.perks-footer-note{
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(20,18,23,.08);
  color: rgba(20,18,23,.66);
  box-shadow: 0 14px 30px rgba(20,18,23,.08);
}

/* Divider */
.niice-divider{
  height: 1px;
  width: min(1100px, calc(100% - 40px));
  margin: 40px auto 0;
  background: linear-gradient(90deg, transparent, rgba(214,178,106,.55), rgba(245,199,214,.55), transparent);
  opacity: .85;
}

/* Responsive */
@media (max-width: 1050px){
  .perks-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .perks-section{ padding: 54px 0; }
  .perks-grid{ grid-template-columns: 1fr; }
  .perk-card{ border-radius: 22px; }
}

@media (max-width: 760px){
  .perk-card{
    animation: perkFloat 4.8s ease-in-out infinite;
  }
  .perk-card:nth-child(2){ animation-delay: .4s; }
  .perk-card:nth-child(3){ animation-delay: .8s; }
  .perk-card:nth-child(4){ animation-delay: 1.2s; }

  @keyframes perkFloat{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-4px); }
  }
}

/* Perks hero image: becomes wide/rectangular on desktop */
.perks-hero-image{
  width: 100%;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid rgba(20,18,23,.08);
  box-shadow: 0 18px 46px rgba(20,18,23,.10);
  background: rgba(255,255,255,.55);
  margin: 18px 0 22px;
}

/* The key: force a rectangular aspect on wide screens */
.perks-hero-image img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Desktop: rectangular “banner” feel */
@media (min-width: 900px){
  .perks-hero-image{
    aspect-ratio: 16 / 6;   /* wide rectangle */
  }
  .perks-hero-image img{
    height: 100%;
  }
}

/* Phone: keep it taller (still clean) */
@media (max-width: 899px){
  .perks-hero-image{
    aspect-ratio: 16 / 10;
  }
  .perks-hero-image img{
    height: 100%;
  }
}

/* ===== Mobile Perks Carousel ===== */
@media (max-width: 820px){
  .perks-grid{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    align-items: start;
    gap: 14px;

    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 10px;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    touch-action: pan-x; /* IMPORTANT: keeps the swipe momentum feel */
  }
  .perks-grid::-webkit-scrollbar{ display:none; }

  .perk-card{
    scroll-snap-align: start;
    min-width: 0;
  }
}

/* Slightly wider phones */
@media (max-width: 480px){
  .perks-grid{ grid-auto-columns: 92%; }
}

/* =========================
   GLOBAL MOBILE OVERFLOW FIX
   Stops the "blank space on right" issue on iPhone
   ========================= */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;          /* iOS-safe */
}

/* Prefer clip when supported (doesn't create scrollbars like hidden sometimes does) */
@supports (overflow: clip){
  html, body{ overflow-x: clip; }
}

/* Any section with glow blobs gets clipped (prevents pseudo-element blur overflow) */
.hero,
.section,
.perks-section,
.sectionHead--niice{
  overflow-x: clip;
}

/* =========================
   PERKS CARDS — FIX HEIGHT, DEAD SPACE, MOBILE SWIPE FEEL
   ========================= */

/* Make every perk card a clean vertical layout */
.perk-card{
  display: flex;
  flex-direction: column;
  height: auto;
}

/* Let the bullet list be the flexible section */
.perk-list{
  flex: 1;
}

/* Pin the Book Now button to the bottom (removes "extra space") */
.perk-book-btn{
  margin-top: auto;
}

/* Prevent long text from forcing weird widths */
.perk-card,
.perk-title,
.perk-list li{
  min-width: 0;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* MOBILE: perks swipe rail — iPhone finger swipe fix */
@media (max-width: 820px){
  .perks-grid{
    display: flex !important;
    gap: 14px;
    align-items: start;

    overflow-x: auto;
    overflow-y: hidden;              /* important: clean swipe surface */
    -webkit-overflow-scrolling: touch;

    scroll-snap-type: x mandatory;
    scroll-padding-left: 2px;

    padding: 6px 2px 14px;

    /* allow both: horizontal swipe + vertical page scroll */
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  /* make sure children don't block touch gestures */
  .perk-card,
  .perk-card *{
    pointer-events: auto;
  }

  .perk-card{
    flex: 0 0 88%;
    max-width: 88%;
    scroll-snap-align: start;

    /* iOS: prevents “gesture confusion” */
    touch-action: pan-x pan-y;
  }
}

@media (max-width: 480px){
  .perk-card{
    flex-basis: 92%;
    max-width: 92%;
  }
}

/* =========================
   Perks title "alive" words
   Rewards + Niicer
   ========================= */

.niiceWord{
  position: relative;
  display: inline-block;
  padding: 0 .06em;
  font-weight: 950;

  /* readable on light backgrounds */
  -webkit-text-stroke: 1px rgba(20,18,23,.22);

  /* 3D depth */
  text-shadow:
    0 2px 0 rgba(255,255,255,.65),
    0 10px 20px rgba(20,18,23,.14);

  /* shimmer */
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  animation: niiceWordShimmer 3.6s linear infinite;
}

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

/* subtle glow pill behind the word for contrast */
.niiceWord::after{
  content:"";
  position: absolute;
  left: -.10em;
  right: -.10em;
  top: 58%;
  height: .78em;
  transform: translateY(-50%);
  border-radius: 999px;
  filter: blur(1px);
  opacity: .48;
  z-index: -1;
}

/* Rewards = gold-to-rose luxury */
.niiceWord--rewards{
  background-image: linear-gradient(
    120deg,
    rgba(214,178,106,1) 0%,
    rgba(245,199,214,1) 38%,
    rgba(255,255,255,1) 52%,
    rgba(245,199,214,1) 66%,
    rgba(214,178,106,1) 100%
  );
}
.niiceWord--rewards::after{
  background: linear-gradient(90deg,
    rgba(214,178,106,.18),
    rgba(245,199,214,.22),
    rgba(255,255,255,.20)
  );
}

/* Niicer = rose-to-purple soft pop */
.niiceWord--niicer{
  background-image: linear-gradient(
    120deg,
    rgba(170,115,255,1) 0%,
    rgba(245,199,214,1) 40%,
    rgba(255,255,255,1) 52%,
    rgba(245,199,214,1) 66%,
    rgba(170,115,255,1) 100%
  );
}
.niiceWord--niicer::after{
  background: linear-gradient(90deg,
    rgba(170,115,255,.14),
    rgba(245,199,214,.22),
    rgba(255,255,255,.18)
  );
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .niiceWord{ animation: none; }
}

/* =========================================
   PERKS: Book Now shimmer (crystal purple glow)
   - always-on shimmer
   - stronger on hover/focus
   ========================================= */

.perk-book-btn{
  position: relative;
  overflow: hidden;

  /* subtle purple glow base */
  box-shadow:
    0 18px 34px rgba(20,18,23,.14),
    0 0 0 1px rgba(170,115,255,.18) inset,
    0 0 26px rgba(170,115,255,.18);

  animation: niiceCtaFloat 3.2s ease-in-out infinite;
}

/* shimmer sweep */
.perk-book-btn::after{
  content:"";
  position:absolute;
  top: -70%;
  left: -80%;
  width: 60%;
  height: 240%;
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.70),
    rgba(170,115,255,.35),
    rgba(255,255,255,0)
  );
  transform: rotate(18deg);
  opacity: .55;
  animation: niiceCtaShine 2.8s ease-in-out infinite;
  pointer-events:none;
}

/* extra halo glow that breathes */
.perk-book-btn::before{
  content:"";
  position:absolute;
  inset:-10px -14px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%,
    rgba(170,115,255,.30),
    rgba(245,199,214,.18),
    transparent 62%
  );
  filter: blur(10px);
  opacity: .70;
  pointer-events:none;
  z-index: -1;
  animation: niiceHalo 3.4s ease-in-out infinite;
}

@keyframes niiceCtaFloat{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-2px); }
}

@keyframes niiceCtaShine{
  0%   { transform: translateX(-150%) rotate(18deg); }
  65%  { transform: translateX(240%) rotate(18deg); }
  100% { transform: translateX(240%) rotate(18deg); }
}

@keyframes niiceHalo{
  0%,100% { opacity: .55; filter: blur(10px); }
  50%     { opacity: .85; filter: blur(12px); }
}

/* On hover/focus: stronger glow + lift */
.perk-book-btn:hover,
.perk-book-btn:focus-visible{
  transform: translateY(-3px);
  box-shadow:
    0 26px 70px rgba(20,18,23,.16),
    0 0 0 1px rgba(170,115,255,.22) inset,
    0 0 34px rgba(170,115,255,.26);
}

/* =========================================
   PRODUCTS: "Niice Product Line" — real gold + crystal wave
   (not transparent, no see-through blend issues)
   ========================================= */

.niiceGoldWave{
  position: relative;
  display: inline-block;
  font-weight: 950;
  letter-spacing: .2px;

  /* REAL gold color (solid) */
  color: #caa354;

  /* depth so it reads on any background */
  text-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 10px 26px rgba(20,18,23,.14);

  /* subtle bevel edge (clean, not cartoony) */
  -webkit-text-stroke: 1px rgba(70,45,15,.14);
}

/* crystal wave overlay */
.niiceGoldWave::after{
  content:"";
  position:absolute;
  inset: -8px -10px;          /* gives room for the wave */
  pointer-events:none;

  /* the wave is a moving highlight band */
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.70) 45%,
    rgba(170,115,255,.35) 52%,
    rgba(245,199,214,.35) 58%,
    rgba(255,255,255,0) 70%
  );

  transform: translateX(-140%) skewX(-14deg);
  opacity: .55;

  /* IMPORTANT: this makes it a light sweep on top of solid gold */
  mix-blend-mode: screen;

  animation: niiceGoldSweep 3.1s ease-in-out infinite;
  filter: blur(.2px);
}

@keyframes niiceGoldSweep{
  0%   { transform: translateX(-140%) skewX(-14deg); }
  60%  { transform: translateX(140%)  skewX(-14deg); }
  100% { transform: translateX(140%)  skewX(-14deg); }
}

/* =========================
   PRODUCTS tease layout
   ========================= */

.productTease{
  margin-top: 14px;
  max-width: 62ch; /* keeps it elegant on desktop */
}

.productTease__lead{
  margin: 0 0 12px;
  color: rgba(20,18,23,.72);
  line-height: 1.55;
  font-size: 16px;
}

.productTease__list{
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.productTease__list li{
  position: relative;
  padding-left: 18px;
  color: rgba(20,18,23,.78);
  line-height: 1.4;
  font-size: 15px;
}

.productTease__list li::before{
  content:"✶";
  position:absolute;
  left:0;
  top: 0;
  transform: translateY(1px);
  color: rgba(214,178,106,.95);
  text-shadow: 0 6px 16px rgba(214,178,106,.22);
}

.productTease__close{
  margin: 0;
  color: rgba(20,18,23,.74);
  line-height: 1.5;
  font-size: 15px;
}

/* =========================
   CAREERS / JOIN US — Hook card upgrade
   ========================= */

/* 1) Make CAREERS label look premium: lines left + right */
.workCard .kicker,
.workCard .tiny,
.workCard .muted{
  position: relative;
}

.workCard .kicker{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: .34em;
}

.workCard .kicker::before,
.workCard .kicker::after{
  content:"";
  height: 2px;
  width: 90px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214,178,106,0), rgba(214,178,106,.95), rgba(214,178,106,0));
  opacity: .85;
}

/* On small screens, shorten the lines */
@media (max-width: 520px){
  .workCard .kicker::before,
  .workCard .kicker::after{ width: 52px; }
}

/* 2) JOIN US pop + gold underline that fades */
.joinTitle{
  margin: 0 0 10px;
}

.joinPop{
  position: relative;
  display: inline-block;
  font-weight: 950;
}

.joinPop::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214,178,106,0), rgba(214,178,106,.95), rgba(214,178,106,0));
  opacity: .95;
  filter: drop-shadow(0 10px 18px rgba(214,178,106,.22));
  animation: joinUnderline 2.6s ease-in-out infinite;
}

@keyframes joinUnderline{
  0%,100%{ transform: scaleX(.75); opacity: .70; }
  50%    { transform: scaleX(1);   opacity: .98; }
}

/* 3) Gold sweep underline for the 3 key words */
.goldSweep{
  position: relative;
  display: inline-block;
  font-weight: 900;
  color: rgba(20,18,23,.86);
}

.goldSweep::after{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(214,178,106,0), rgba(214,178,106,.95), rgba(214,178,106,0));
  opacity: .85;
}

.goldSweep::before{
  content:"";
  position:absolute;
  left:-40%;
  top: -18%;
  width: 38%;
  height: 160%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85), rgba(255,255,255,0));
  transform: skewX(-18deg) translateX(-160%);
  opacity: .55;
  mix-blend-mode: screen;
  animation: sweepGlint 3.8s ease-in-out infinite;
}

@keyframes sweepGlint{
  0%   { transform: skewX(-18deg) translateX(-160%); opacity: 0; }
  18%  { opacity: .55; }
  60%  { transform: skewX(-18deg) translateX(280%); opacity: .55; }
  100% { transform: skewX(-18deg) translateX(280%); opacity: 0; }
}

/* 4) Button row spacing */
.workActions.altPills{
  display: flex;
  gap: 12px;
 /* flex-wrap: wrap;*/
  align-items: center;
}

/* 5) Alternating 3D “breathing” pills (one up, other down) */
.pill--altA, .pill--altB{
  position: relative;
  overflow: hidden;
  box-shadow:
    0 22px 60px rgba(20,18,23,.18),
    0 10px 22px rgba(20,18,23,.10);
  transform: translateZ(0);
}

.pill--altA{
  animation: altFloatA 2.8s ease-in-out infinite;
}
.pill--altB{
  animation: altFloatB 2.8s ease-in-out infinite;
}

@keyframes altFloatA{
  0%,100% { transform: translateY(-2px); }
  50%     { transform: translateY(2px); }
}
@keyframes altFloatB{
  0%,100% { transform: translateY(2px); }
  50%     { transform: translateY(-2px); }
}

/* Shimmer “crystal” sweep on BOTH pills */
.pill--altA::after,
.pill--altB::after{
  content:"";
  position:absolute;
  top:-70%;
  left:-80%;
  width: 60%;
  height: 240%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(229,183,255,.70),
    rgba(245,199,214,.55),
    rgba(255,255,255,0)
  );
  transform: rotate(18deg);
  opacity: .55;
  animation: pillCrystal 2.6s ease-in-out infinite;
}

@keyframes pillCrystal{
  0%   { transform: translateX(-160%) rotate(18deg); }
  70%  { transform: translateX(260%) rotate(18deg); }
  100% { transform: translateX(260%) rotate(18deg); }
}

/* Phone pill dot */
.phoneDot{
  width: 9px; height: 9px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(229,183,255,.95), rgba(214,178,106,.85));
  box-shadow: 0 0 0 6px rgba(229,183,255,.14);
  display: inline-block;
}

/* 6) Checkmarks “alive”: icon glints + rows lift on hover */
.workBullets .mini{
  border-radius: 16px;
  padding: 8px 10px;
  transition: transform 180ms ease, background 180ms ease;
}

.workBullets .mini:hover{
  transform: translateY(-2px);
  background: rgba(245,199,214,.14);
}

.workBullets .mini__icon{
  position: relative;
  overflow: hidden;
}

.workBullets .mini__icon::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-80%;
  width: 70%;
  height: 240%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(214,178,106,.55), rgba(255,255,255,0));
  transform: rotate(18deg);
  opacity: .55;
  animation: checkGlint 3.4s ease-in-out infinite;
}

@keyframes checkGlint{
  0%   { transform: translateX(-170%) rotate(18deg); }
  65%  { transform: translateX(260%) rotate(18deg); }
  100% { transform: translateX(260%) rotate(18deg); }
}

/* Make the bullet titles pop gold on hover (desktop + mobile tap focus) */
.workBullets .mini:hover .mini__title{
  background: linear-gradient(135deg, rgba(214,178,106,.98), rgba(240,217,164,.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20,18,23,.18);
  text-shadow: 0 10px 24px rgba(20,18,23,.10);
}

/* =========================
   LOVED BY CLIENTS — Rainbow luxe treatment
   ========================= */

.kicker--rainbow{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  letter-spacing: .34em;
  position: relative;
}

.kicker--rainbow::before,
.kicker--rainbow::after{
  content:"";
  height: 2px;
  width: 120px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,0,150,0),
    rgba(255,0,150,.85),
    rgba(255,165,0,.85),
    rgba(255,230,0,.85),
    rgba(0,220,120,.85),
    rgba(0,160,255,.85),
    rgba(140,90,255,.85),
    rgba(255,0,150,0)
  );
  opacity: .9;
  filter: drop-shadow(0 10px 18px rgba(140,90,255,.14));
  animation: rainbowLine 3.4s ease-in-out infinite;
}

@keyframes rainbowLine{
  0%,100%{ transform: scaleX(.86); opacity: .72; }
  50%    { transform: scaleX(1);   opacity: .96; }
}

@media (max-width: 520px){
  .kicker--rainbow::before,
  .kicker--rainbow::after{ width: 64px; }
}

/* Title */
.loveTitle{
  margin: 10px 0 8px;
}

/* Rainbow number (alive shimmer without turning “see-through”) */
.rainbowNum{
  position: relative;
  font-weight: 950;
  color: #D6B26A; /* keeps it readable even if older browsers ignore clip */
  background: linear-gradient(
    90deg,
    #ff3aa7, #ffb100, #ffe600, #26d07c, #3aa7ff, #8a5cff, #ff3aa7
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(20,18,23,.16);
  text-shadow: 0 14px 30px rgba(20,18,23,.12);
  animation: rainbowFlow 4.2s ease-in-out infinite;
}

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

/* Subline “Have a Niice experience.” with a soft prism underline pulse */
.loveSub{
  margin: 0 auto 18px;
  max-width: 680px;
}

.niiceLine{
  position: relative;
  font-weight: 900;
  white-space: nowrap;
}

.niiceLine::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255,0,150,.0),
    rgba(255,0,150,.70),
    rgba(255,230,0,.70),
    rgba(0,220,120,.70),
    rgba(0,160,255,.70),
    rgba(140,90,255,.70),
    rgba(255,0,150,.0)
  );
  opacity: .85;
  filter: drop-shadow(0 10px 18px rgba(0,160,255,.12));
  animation: niicePulse 2.8s ease-in-out infinite;
}

@keyframes niicePulse{
  0%,100%{ transform: scaleX(.82); opacity: .70; }
  50%    { transform: scaleX(1);   opacity: .95; }
}

/* Optional: make each review card feel alive on hover/tap */
.reviewCard, .testimonial, .quoteCard{
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.reviewCard:hover, .testimonial:hover, .quoteCard:hover{
  transform: translateY(-3px);
  box-shadow:
    0 26px 70px rgba(20,18,23,.14),
    0 10px 22px rgba(20,18,23,.10);
}

/* =========================
   Review Stars — Prism glint (lux, not loud)
   ========================= */

.review__stars{
  position: relative;
  display: inline-block;
  letter-spacing: 2px;

  /* keep default gold as the base */
  color: rgba(214,178,106,.95);
  text-shadow:
    0 10px 20px rgba(20,18,23,.10),
    0 0 18px rgba(214,178,106,.16);
}

/* Only apply the prism effect if the browser supports it */
@supports (-webkit-background-clip: text) or (background-clip: text){

  .review__stars{
    /* Prism gradient but “muted” */
    background: linear-gradient(
      90deg,
      rgba(214,178,106,.95),
      rgba(245,199,214,.85),
      rgba(170,115,255,.80),
      rgba(214,178,106,.95)
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 1px rgba(20,18,23,.14);

    /* very slow idle shimmer */
    animation: starsIdle 9.5s ease-in-out infinite;
  }

  @keyframes starsIdle{
    0%   { background-position: 0% 50%;   filter: saturate(1.02); }
    50%  { background-position: 100% 50%; filter: saturate(1.08); }
    100% { background-position: 0% 50%;   filter: saturate(1.02); }
  }

  /* A “glint sweep” that pops on hover (desktop) */
  .review:hover .review__stars{
    animation-duration: 3.4s; /* speeds up only when hovered */
  }

  /* On mobile (no hover): glint when user taps the card */
  .review:active .review__stars{
    animation-duration: 2.6s;
  }
}

/* =========================
   HERO — Clean, Logo Medallion, Luxury CTAs
   ========================= */

/* Logo medallion */
.heroLogo{
  width: 86px;
  height: 86px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;

  background:
    radial-gradient(18px 18px at 30% 25%, rgba(255,255,255,.95), transparent 60%),
    linear-gradient(135deg, rgba(245,199,214,.55), rgba(214,178,106,.35));
  border: 1px solid rgba(214,178,106,.45);

  box-shadow:
    0 18px 55px rgba(20,18,23,.18),
    inset 0 1px 0 rgba(255,255,255,.65);

  transform: translateZ(0);
}
.heroLogo img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(20,18,23,.18));
}

/* =========================================
   HERO LOGO: micro bloom (hover/tap)
   ========================================= */
.heroLogo{
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 999px;
  overflow: visible;
  isolation: isolate; /* keeps bloom behind logo */
}

.heroLogo img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* makes image “fit” the circle better */
  object-position: center;       /* adjust later if needed */
  border-radius: 999px;
  display: block;
}

/* Bloom behind logo */
.heroLogo::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 999px;
  z-index:-1;
  opacity: 0;
  transform: scale(.92);
  transition: opacity .35s ease, transform .35s ease, filter .35s ease;
  filter: blur(10px);
  background:
    radial-gradient(circle at 35% 30%,
      rgba(255,182,222,.55),
      rgba(216,170,255,.35) 35%,
      rgba(255,215,140,.25) 60%,
      rgba(255,255,255,0) 75%);
}

.heroLogo:hover::after,
.heroLogo:focus-within::after,
.heroLogo.is-tapped::after{
  opacity: 1;
  transform: scale(1);
  filter: blur(12px);
}

/* desktop hover */
.heroLogo:hover::before{
  opacity: 1;
  transform: scale(1);
  filter: blur(12px);
}

/* tap/keyboard focus for mobile + accessibility */
.heroLogo:active::before,
.heroLogo:focus-within::before{
  opacity: 1;
  transform: scale(1.02);
  filter: blur(13px);
}

/* Title cleanup */
.heroCard__title{
  margin: 14px 0 10px;
  line-height: 1.02;
}

/* Niice Nails = gold foil */
.heroBrand{
  display:block;
  font-weight: 900;
  letter-spacing: .2px;

  /* Gold foil */
  background: linear-gradient(90deg,
    #6f4e13,
    #d6b26a,
    #f3e1a8,
    #d0a24f,
    #7a5516
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* “black outline” feel without looking cartoony */
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 10px 26px rgba(20,18,23,.18),
    0 0 18px rgba(214,178,106,.18);
}

/* Luxury Nail Bar = black rich ink, clean power */
.heroMain{
  display:block;
  font-weight: 950;
  color: rgba(10,10,12,.92);
  text-shadow: 0 12px 26px rgba(20,18,23,.16);
}

/* subtle shimmer pass over the gold text (not see-through, no “blend bug”) */
.heroBrand{
  position: relative;
}
.heroBrand::after{
  content:"";
  position:absolute;
  inset:-6px -10px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.55),
    rgba(229,183,255,.35),
    rgba(255,255,255,0)
  );
  transform: skewX(-18deg) translateX(-140%);
  animation: titleSweep 3.6s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: .55;
  pointer-events:none;
}

@keyframes titleSweep{
  0%   { transform: skewX(-18deg) translateX(-140%); }
  60%  { transform: skewX(-18deg) translateX(140%); }
  100% { transform: skewX(-18deg) translateX(140%); }
}

/* CTA upgrades */
.heroPill{
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

/* more 3D “button you can feel” */
.heroPill:hover{
  transform: translateY(-2px);
  filter: saturate(1.05) contrast(1.02);
  box-shadow:
    0 22px 50px rgba(20,18,23,.18),
    inset 0 1px 0 rgba(255,255,255,.65);
}

/* luminous gold */
.heroPill--gold{
  border-color: rgba(214,178,106,.65);
  background: linear-gradient(135deg, rgba(214,178,106,.98), rgba(240,217,164,.78));
  color: rgba(20,18,23,.92);
}

/* crystal shimmer sweep */
.heroPill::after{
  content:"";
  position:absolute;
  top:-60%;
  left:-70%;
  width: 55%;
  height: 220%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.55),
    rgba(229,183,255,.35),
    rgba(245,199,214,.35),
    rgba(255,255,255,0)
  );
  transform: rotate(18deg);
  opacity: .55;
  animation: heroShine 2.9s ease-in-out infinite;
  pointer-events:none;
}

@keyframes heroShine{
  0%   { transform: translateX(-150%) rotate(18deg); }
  70%  { transform: translateX(240%) rotate(18deg); }
  100% { transform: translateX(240%) rotate(18deg); }
}

/* Make 3D Studios feel “special” */
.heroPill--3d{
  border-color: rgba(170,115,255,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18)),
    radial-gradient(420px 140px at 30% 10%, rgba(229,183,255,.28), transparent 60%);
}

/* Mobile: shrink medallion slightly */
@media (max-width: 760px){
  .heroLogo{ width: 74px; height: 74px; }
}

.heroLogo{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;

  background: radial-gradient(14px 14px at 30% 25%, rgba(255,255,255,.95), transparent 60%),
              linear-gradient(135deg, rgba(245,199,214,.60), rgba(214,178,106,.45));

  border: 1px solid rgba(214,178,106,.55);

  box-shadow:
    0 18px 55px rgba(20,18,23,.22),
    inset 0 1px 0 rgba(255,255,255,.70);
}

.heroLogo img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* keeps full logo */
  object-position: center;
  padding: 14px;                /* THIS is what makes it fit nicely */
  filter: drop-shadow(0 10px 18px rgba(20,18,23,.20));
}

/* HERO card becomes transparent (so photo shows) */
.heroCard{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* This is the ONLY fog now */
.heroGlass{
  position: relative;
  width: min(760px, 92vw);
  margin: 0 auto;
  padding: 34px 34px 28px;
  border-radius: 28px;

  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);

  /* “fog” without blocking the image */
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);

  box-shadow:
    0 26px 70px rgba(20,18,23,.28),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* Optional: soft vignette around the glass so it blends expensive */
.heroGlass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(700px 260px at 50% 15%, rgba(245,199,214,.16), transparent 65%),
              radial-gradient(700px 260px at 50% 90%, rgba(214,178,106,.12), transparent 65%);
  pointer-events:none;
}

.heroCard__cta{
  display:flex;
  gap: 12px;
  justify-content: center;
  margin-top: 16px;
}

.heroPill{
  position: relative;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 750;
  letter-spacing: .2px;

  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 16px 40px rgba(20,18,23,.22),
    inset 0 1px 0 rgba(255,255,255,.55);

  transform: translateZ(0);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.heroPill:hover{
  transform: translateY(-2px);
  box-shadow:
    0 22px 55px rgba(20,18,23,.26),
    inset 0 1px 0 rgba(255,255,255,.70);
  filter: saturate(1.05) contrast(1.02);
}

/* Luminous gold “Book Now” */
.heroPill--gold{
  border-color: rgba(214,178,106,.70);
  background: linear-gradient(135deg, rgba(214,178,106,1), rgba(245,225,168,.78));
  color: rgba(12,12,14,.90);
}

/* Ghost: clean glass */
.heroPill--ghost{
  color: rgba(12,12,14,.82);
}

/* 3D Studios: crystal glow */
.heroPill--3d{
  border-color: rgba(170,115,255,.30);
  background:
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18)),
    radial-gradient(420px 140px at 35% 15%, rgba(229,183,255,.28), transparent 60%);
}

/* crystal shimmer sweep for ALL pills (subtle, premium) */
.heroPill::after{
  content:"";
  position:absolute;
  top:-70%;
  left:-80%;
  width: 55%;
  height: 240%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.55),
    rgba(229,183,255,.30),
    rgba(245,199,214,.26),
    rgba(255,255,255,0)
  );
  transform: rotate(18deg);
  opacity: .45;
  animation: pillShine 3.2s ease-in-out infinite;
  pointer-events:none;
}

@keyframes pillShine{
  0%   { transform: translateX(-160%) rotate(18deg); }
  70%  { transform: translateX(260%) rotate(18deg); }
  100% { transform: translateX(260%) rotate(18deg); }
}
.heroBrand, .heroMain { font-family: "Playfair Display", serif; }
body { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* =========================
   HERO TITLE: radiating fog glows
   ========================= */

/* Pink fog behind "Niice Nails" */
.heroBrand{
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.heroBrand::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 55%;
  width: 120%;
  height: 115%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 999px;

  /* soft pink fog */
  background: radial-gradient(circle,
      rgba(255, 170, 215, .55) 0%,
      rgba(255, 190, 235, .28) 38%,
      rgba(255, 255, 255, 0) 72%
  );
  filter: blur(16px);
  opacity: .9;
}

/* Gold fog behind "Luxury Nail Bar" */
.heroMain{
  position: relative;
  display: inline-block;
  isolation: isolate;
}

.heroMain::after{
  content:"";
  position:absolute;
  left: 50%;
  top: 55%;
  width: 118%;
  height: 110%;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 999px;

  /* soft gold fog */
  background: radial-gradient(circle,
      rgba(255, 210, 120, .45) 0%,
      rgba(255, 215, 150, .22) 40%,
      rgba(255, 255, 255, 0) 74%
  );
  filter: blur(16px);
  opacity: .85;
}

.heroBrand::after{ animation: heroGlowPink 3.8s ease-in-out infinite; }
.heroMain::after{  animation: heroGlowGold 4.2s ease-in-out infinite; }

@keyframes heroGlowPink{
  0%,100%{ transform: translate(-50%,-50%) scale(0.98); opacity: .78; }
  50%{    transform: translate(-50%,-50%) scale(1.03); opacity: .98; }
}
@keyframes heroGlowGold{
  0%,100%{ transform: translate(-50%,-50%) scale(0.99); opacity: .72; }
  50%{    transform: translate(-50%,-50%) scale(1.04); opacity: .92; }
}

/* =========================
   HERO CTA: better mobile sizing + spacing
   ========================= */

.heroCard__cta{
  display: flex;
  gap: 12px;
  /*flex-wrap: wrap;*/
  justify-content: center;
}

/* Mobile: bigger, easier to tap, cleaner spacing */
@media (max-width: 520px){
  .heroCard__cta{
    gap: 10px;
    padding-top: 2px;
  }

  .heroPill--lux{
    font-size: 15px;
    padding: 12px 18px;
    min-height: 44px; /* thumb-friendly */
  }

  /* Make them feel premium + balanced */
  .heroCard__cta .heroPill{
    border-radius: 999px;
  }
}

@media (max-width: 520px){
  .heroCard__cta .heroPill{
    flex: 1 1 44%;
    max-width: 48%;
    text-align: center;
  }
  .heroCard__cta .heroPill:last-child{
    flex-basis: 60%;
    max-width: 70%;
  }
}

/* === VIP (Membership block) — MOBILE FIX ONLY === */
@media (max-width: 900px){

  /* stop the section padding from eating your width */
  #vip.section { padding-left: 16px; padding-right: 16px; }

  /* make the inner wrapper fit the phone */
  #vip .shell { width: 100%; max-width: 100%; margin: 0 auto; }

  /* kill any 2-column/grid behavior on mobile */
  #vip .vipGrid { display: block; }

  /* allow the card to shrink inside the viewport */
  #vip .vipCard { width: 100%; max-width: 100%; min-width: 0; }

  /* headline must wrap (no “Perks & Mo” cutoff) */
  #vip h2 { white-space: normal; overflow-wrap: anywhere; }

  /* keep pills clean */
  #vip .vipTick { white-space: nowrap; }
}

/* === VIP Ticker: true endless rail on mobile === */
@media (max-width: 900px){

  #vip .vipTicker{
    overflow: hidden;
    width: 100%;
  }

  #vip .vipTicker__track{
    display: flex;
    flex-wrap: nowrap;
    width: max-content;                 /* critical: track becomes as wide as its contents */
    gap: 10px;
    animation: vipMarquee 16s linear infinite;
    will-change: transform;
  }

  #vip .vipTick{
    flex: 0 0 auto;                     /* critical: prevent shrinking */
    white-space: nowrap;
  }

  @keyframes vipMarquee{
    from { transform: translate3d(0,0,0); }
    to   { transform: translate3d(-50%,0,0); } /* assumes you duplicated Set A + Set B */
  }
}
/* === VIP vibe cards: more square + easier swipe on mobile === */
@media (max-width: 900px){

  /* horizontal swipe rail stays */
  #vip .vipVibes{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }

  /* each card becomes a compact “tile” */
  #vip .vipVibe{
    flex: 0 0 78%;
    max-width: 78%;
    min-height: 120px;      /* smaller */
    padding: 14px 14px;     /* tighter */
    border-radius: 18px;
    scroll-snap-align: start;
  }

  /* tighten text so it doesn’t force height */
  #vip .vipVibe__oneLiner{
    margin-top: 8px;
    line-height: 1.25;
  }
}

/* === VIP (Membership) — DESKTOP: true full-screen feel === */
@media (min-width: 901px){

  /* Let the section/background span the full browser width */
  #vip.section{
    width: 100%;
    max-width: none;
  }

  /* Center the content block and allow it to grow wider */
  #vip .shell{
    width: min(1180px, 100%);
    max-width: none;
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  /* Ensure the grid isn't reserving an empty column */
  #vip .vipGrid{
    display: block;   /* kills phantom 2-col layouts */
  }

  /* Make the card fill the container cleanly */
  #vip .vipCard{
    width: 100%;
    max-width: none;
    margin: 0 auto;
  }

  /* Optional: make the ticker belt a bit wider on desktop */
  #vip .vipTicker{
    max-width: 760px;
    width: min(760px, 100%);
  }
}

/* =========================================
   VIP polish — “Become a Member” effects only
   (rainbow shimmer + Niice sparkle lines + CTA purple→gold wash)
   ========================================= */

#vip .kicker{
  position: relative;
  display: inline-block;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* 1) Rainbow shimmer on the word “Member” only */
#vip .kicker .kickerMember{
  background: linear-gradient(
    90deg,
    #b67cff, #ffd98a, #f6a6c8, #b67cff
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: vipMemberRainbow 3.2s linear infinite;
  position: relative;
  display: inline-block;
}

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

/* 2) “Niice” sparkle lines growing out (subtle, luxury) */
#vip .kicker .kickerMember::before,
#vip .kicker .kickerMember::after{
  content:"";
  position: absolute;
  top: 50%;
  width: 0;
  height: 2px;
  transform: translateY(-50%);
  border-radius: 999px;
  opacity: .85;
  filter: blur(.2px);
  background: linear-gradient(90deg, rgba(182,124,255,0), rgba(255,217,138,.9), rgba(246,166,200,0));
  animation: vipMemberRays 2.6s ease-in-out infinite;
}

#vip .kicker .kickerMember::before{ right: 105%; }
#vip .kicker .kickerMember::after { left: 105%;  animation-delay: .18s; }

@keyframes vipMemberRays{
  0%, 35% { width: 0; opacity: 0; }
  55%    { width: 46px; opacity: .9; }
  100%   { width: 0; opacity: 0; }
}

/* 3) Add a soft purple glow wash to the CTA block area */
#vip .vipCTA{
  position: relative;
  padding: 14px 14px;
  border-radius: 18px;
}

#vip .vipCTA::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 22px;
  background:
    radial-gradient(420px 160px at 20% 20%, rgba(182,124,255,.20), transparent 60%),
    radial-gradient(520px 200px at 70% 70%, rgba(214,178,106,.18), transparent 65%);
  pointer-events:none;
  opacity: .9;
  filter: blur(2px);
}

/* 4) Optional: a faint purple→gold edge highlight on the card (super subtle) */
#vip .vipCard{
  position: relative;
}
#vip .vipCard::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  background: linear-gradient(135deg, rgba(182,124,255,.10), rgba(214,178,106,.10));
  mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  padding: 1px;               /* creates a 1px “ring” */
  opacity: .55;
}

/* ===== Header brand only (safe) ===== */
.brand{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.brand-logo{
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 12px; /* optional */
  flex: 0 0 auto;
}

.brand-text{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.brand-name{ font-weight: 900; font-size: 20px; letter-spacing: .2px; }
.brand-sub{ font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Slightly bigger on wide screens */
@media (min-width: 1100px){
  .brand-logo{ width: 52px; height: 52px; }
  .brand-name{ font-size: 22px; }
}

/* Smaller on tight screens */
@media (max-width: 600px){
  .brand-logo{ width: 38px; height: 38px; border-radius: 10px; }
  .brand-name{ font-size: 18px; }
  .brand-sub{ display:none; } /* prevents header squeeze on phone */
}

/* ===== Header wrap safety (prevents overflow on medium screens) ===== */
header, .site-header, .header, .topbar{
  max-width: 100%;
}

@media (max-width: 1100px){
  nav, .nav, .nav-links, .menu, .header-nav{
    /*flex-wrap: wrap;*/
    row-gap: 10px;
  }

  .header-actions, .actions, .cta-group{
    /*flex-wrap: wrap;*/
    gap: 10px;
  }
}

/* =========================
   VIP SECTION – CLEAN LUX TUNE (safe overrides)
   ========================= */

.vipCard{
  border: 1px solid rgba(0,0,0,.08);
  box-shadow:
    0 18px 50px rgba(0,0,0,.08),
    0 2px 10px rgba(0,0,0,.04);
}

.vipCard h2{
  margin-top: 10px;
  letter-spacing: -0.02em;
}

/* Make the in-card image feel like a premium hero */
.vipMedia__img--inCard{
  border-radius: 22px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  min-height: 240px;

  /* “quiet luxury” filter */
  filter: saturate(1.02) contrast(1.02);
  box-shadow: 0 18px 55px rgba(0,0,0,.14);
  border: 1px solid rgba(255,255,255,.55);
  margin: 14px 0 14px;
}

/* Add soft glass overlay so text below feels cleaner */
.vipMedia__img--inCard::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.02),
    rgba(255,255,255,.10) 55%,
    rgba(255,255,255,.22)
  );
}

/* Reduce "visual noise" from the moving ticker */
.vipTicker{
  margin-top: 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}

.vipTick{
  font-weight: 800;
}

/* =========================
   VIP VIBE CARDS — GLASS LUX UPGRADE
   ========================= */

.vipVibe{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(14px);
  box-shadow:
    0 10px 30px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.6);

  transition: transform .25s ease, box-shadow .25s ease;
}

.vipVibe:hover{
  transform: translateY(-3px);
  box-shadow:
    0 18px 45px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.vipVibe--featured{
  background: linear-gradient(
    135deg,
    rgba(255,230,200,.85),
    rgba(255,245,235,.9)
  );
  border: 1px solid rgba(212,175,55,.45);
}

/* =========================
   VIP VIBE CARDS — GLASS LUX UPGRADE
   ========================= */

.vipVibe{
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(255,255,255,.6);
  backdrop-filter: blur(14px);
  box-shadow:
    0 10px 30px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.6);

  transition: transform .25s ease, box-shadow .25s ease;
}

.vipVibe:hover{
  transform: translateY(-3px);
  box-shadow:
    0 18px 45px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.7);
}

.vipVibe--featured{
  background: linear-gradient(
    135deg,
    rgba(255,230,200,.85),
    rgba(255,245,235,.9)
  );
  border: 1px solid rgba(212,175,55,.45);
}

.vipMedia__img--inCard{
  border-radius: 26px;
}

/* =========================
   HEADER NAV = pill-by-default + luxury hover
   ========================= */

/* Desktop nav links look like pills (like Contact) */
/* Desktop Navigation Pills */
.nav--desktop a{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:10px 16px;
  border-radius:999px;

  font-weight:500;
  font-size:15px;

  color:#1d1b1f;
  text-decoration:none;

  background:rgba(255,255,255,0.55);
  backdrop-filter:blur(6px);

  border:1px solid rgba(0,0,0,0.06);

  transition:all .22s ease;
}

.nav--desktop a:hover{
  background:linear-gradient(135deg,#f5e6ef,#f7f1e6);
  border-color:rgba(0,0,0,0.08);
  transform:translateY(-1px);
}

/* Subtle “breath” on hover/focus */
.site-header .nav--desktop a:hover,
.site-header .nav--desktop a:focus-visible{
  transform: translateY(-1px) scale(1.03);
  background: rgba(245, 199, 214, 0.30);
  border-color: rgba(214, 178, 106, 0.32);
  box-shadow: 0 16px 40px rgba(20,18,23,.10);
  outline: none;
}

/* Active/current page (keeps your Contact vibe) */
.site-header .nav--desktop a.is-active,
.site-header .nav--desktop a[aria-current="page"]{
  background: rgba(214, 178, 106, 0.22);
  border-color: rgba(214, 178, 106, 0.45);
  color: rgba(20,18,23,.88);
}

/* Keep spacing nice when links wrap */
.site-header .nav--desktop{
  gap: 10px;              /* if your nav already uses gap, this just confirms */
  row-gap: 10px;
  /*flex-wrap: wrap;*/
}

/* Slightly larger brand/logo (safe, doesn’t break layout) */
.site-header .brand-logo{
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
}

/* =========================
   HEADER LAYOUT: brand hard-left + better spacing
   ========================= */

/* Make header row use full width and distribute space cleanly */
.site-header .header__inner{
  width: 100%;
  max-width: none;
  padding-left: 18px;
  padding-right: 18px;
}

/* Brand sits flush left */
.site-header .brand{
  margin-right: auto;
  flex: 0 0 auto;
}

/* Keep nav from squeezing into the brand */
.site-header .nav--desktop{
  margin-left: 22px;
}

/* Actions stay to the far right */
.site-header .header__actions{
  margin-left: auto;
  flex: 0 0 auto;
}

/* BOOK PILL: luxury sticker vibe */
.pill--book{
  position: relative;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .2px;
  box-shadow:
    0 18px 45px rgba(20,18,23,.18),
    inset 0 1px 0 rgba(255,255,255,.55);
  transform: translateY(-1px);
}
.pill--book::after{
  content:"";
  position:absolute;
  inset: 3px 8px auto 8px;
  height: 40%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
  opacity: .7;
}
.pill--book:hover{
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    0 24px 60px rgba(20,18,23,.22),
    inset 0 1px 0 rgba(255,255,255,.6);
}

/* =========================================================
   HEADER: MID-SIZE (2-row max + swipe if more)
   Range: tablets + small laptops
========================================================= */
@media (min-width: 901px) and (max-width: 1180px){

  /* Keep header from growing */
  .site-header .shell{
    align-items: center;
    gap: 14px;
  }

  /* NAV becomes a 2-row horizontal-swipe area */
  .nav--desktop{
    display: grid;
    grid-auto-flow: column;              /* build columns horizontally */
    grid-template-rows: repeat(2, auto); /* ONLY 2 rows */
    grid-auto-columns: max-content;      /* each pill keeps its natural width */
    gap: 10px;

    overflow-x: auto;                    /* swipe horizontally */
    overflow-y: hidden;                  /* never add vertical growth */
    -webkit-overflow-scrolling: touch;

    max-width: 55vw;                     /* adjust if needed */
    padding-bottom: 2px;

    /* premium edge fade */
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  .nav--desktop a{
    white-space: nowrap;
  }

  /* hide scrollbar */
  .nav--desktop::-webkit-scrollbar{ height: 0; }
  .nav--desktop{ scrollbar-width: none; }

  /* keep right side tight */
  .header__actions{
    flex: 0 0 auto;
    gap: 10px;
  }
}

/* =========================================================
   MID-SIZE HEADER: 2-ROW SWIPE RAIL (no extra height growth)
   Shows exactly 2 rows; overflow becomes horizontal swipe
========================================================= */
@media (min-width: 901px) and (max-width: 1180px){

  /* Make the nav area a 2-row rail that scrolls sideways */
  .nav--desktop{
    display: grid !important;
    grid-template-rows: repeat(2, auto) !important; /* ONLY 2 rows */
    grid-auto-flow: column !important;              /* add items left->right */
    grid-auto-columns: max-content !important;      /* each pill keeps size */
    gap: 10px !important;

    overflow-x: auto !important;  /* swipe */
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    max-width: 56vw;              /* space for phone + book on right */
    padding-bottom: 2px;

    /* premium fade edges */
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  .nav--desktop a{
    white-space: nowrap;
  }
}

/* ================================
   HEADER NAV LINKS = PILL LOOK (RESTORE)
   Paste at VERY BOTTOM of landing.css
================================= */

.nav--desktop a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(214,178,106,.18);
  background: rgba(255,255,255,.55);
  box-shadow: 0 14px 40px rgba(20,18,23,.08);
  white-space: nowrap;
  text-decoration: none;
}

/* active/selected look (optional) */
.nav--desktop a.is-active,
.nav--desktop a[aria-current="page"]{
  background: rgba(245,199,214,.55);
  border-color: rgba(245,151,186,.35);
}

/* ================================
   MID-SIZE HEADER: 2-ROW SWIPE RAIL
   (only between desktop + phone)
================================= */
@media (min-width: 901px) and (max-width: 1180px){

  .nav--desktop{
    display: grid !important;
    grid-template-rows: repeat(2, auto) !important; /* EXACTLY 2 rows */
    grid-auto-flow: column !important;              /* fill columns */
    grid-auto-columns: max-content !important;
    gap: 10px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;

    max-width: 56vw;
    padding-bottom: 2px;

    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }

  .nav--desktop::-webkit-scrollbar{ height: 0; }
  .nav--desktop{ scrollbar-width: none; }
}

/* =========================================================
   MID-SIZE HEADER FIX (between desktop + phone)
   Turn desktop nav into a swipe rail so pills never disappear
   ========================================================= */
@media (max-width: 1180px) and (min-width: 901px){

  /* keep header one-row, no extra height */
  .header__inner{
    align-items: center;
    gap: 18px;
  }

  /* nav becomes a horizontal swipe rail */
  .nav--desktop{
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;

    /* IMPORTANT: lets it shrink between logo + actions */
    min-width: 0;
    flex: 1 1 auto;

    /* spacing */
    gap: 12px;
    padding: 6px 4px;

    /* hide scrollbar */
    scrollbar-width: none;
  }
  .nav--desktop::-webkit-scrollbar{ display:none; }

  /* each pill stays its own size (no squishing / no wrapping) */
  .nav--desktop a{
    flex: 0 0 auto;
  }

  /* keep phone + book button pinned and not pushed off */
  .header__actions{
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* optional: subtle “fade edges” so users feel it’s swipeable */
  .nav--desktop{
    mask-image: linear-gradient(90deg,
      transparent 0,
      #000 18px,
      #000 calc(100% - 18px),
      transparent 100%);
  }
}

/* ============================
   MID-SIZE NAV: swipe rail (no header height growth)
   ============================ */

/* Critical: allow the middle column to shrink so overflow works */
.header__inner,
.site-header .shell,
.site-header .header__inner {
  min-width: 0;
}

/* The wrapper that holds nav + hint */
.navRail{
  position: relative;
  min-width: 0;
  flex: 1 1 auto;
}

/* MID RANGE: convert nav into horizontal swipe rail */
@media (max-width: 1180px) and (min-width: 901px){

  /* Force header to stay one clean row */
  .site-header .shell,
  .header__inner{
    display: flex;
    align-items: center;
    gap: 18px;
  }

  /* This is the swipe rail */
  .navRail .nav--desktop{
    display: flex;
    flex-wrap: nowrap;          /* no wrapping */
    overflow-x: auto;           /* swipe */
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;      /* firefox hide */
    gap: 10px;

    padding: 6px 56px 6px 10px; /* right padding ensures last pill (Work With Us) isn't clipped */
    margin: 0;
    min-width: 0;
    scroll-snap-type: x proximity;
  }

  /* Hide scrollbar (webkit) */
  .navRail .nav--desktop::-webkit-scrollbar{
    display:none;
  }

  /* Make each link behave like a pill tile in the rail */
  .navRail .nav--desktop > a{
    flex: 0 0 auto;             /* prevent shrinking */
    scroll-snap-align: start;
  }
}

/* MOBILE: keep your existing drawer behavior (desktop nav hidden there) */
@media (max-width: 900px){
  .navRail{ display:none; }
}

  /* Minimal “more content” indicator (no overlay, no pill) */
  .navRailIndicator{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 6px;
    border-radius: 999px;
    opacity: .65;
    background: linear-gradient(90deg, rgba(214,178,106,.15), rgba(214,178,106,.55));
    pointer-events: none;
  }

  /* A subtle edge cue without blocking content */
  .navRail{
    mask-image: linear-gradient(90deg, #000 0%, #000 86%, rgba(0,0,0,.0) 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 86%, rgba(0,0,0,.0) 100%);
  }

  /* =========================================
   NIICE SERVICES PAGE (no pricing, conversion)
   Paste at bottom of landing.css or style.css
   ========================================= */

.niice-services-page { padding: 44px 0 90px; }
.niice-services-page .shell { max-width: 1120px; margin: 0 auto; padding: 0 18px; }

.niice-pagehead { margin: 12px 0 28px; }
.niice-kicker {
  display: inline-block;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
  font-size: 12px;
}
.niice-title { margin: 8px 0 10px; font-size: clamp(34px, 4vw, 54px); line-height: 1.05; }
.niice-subtitle { margin: 0; max-width: 60ch; opacity: .85; }

.niice-block { margin-top: 34px; }
.niice-h2 { font-size: clamp(22px, 2.4vw, 34px); margin: 0 0 14px; }
.niice-h3 { font-size: 18px; margin: 0 0 8px; }
.niice-h4 { font-size: 14px; margin: 0 0 10px; }
.niice-muted { opacity: .75; margin: 0 0 10px; }

.niice-grid-2 {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 18px;
  align-items: start;
}

.niice-card {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 34px rgba(0,0,0,.06);
  padding: 18px;
  background: rgba(255,255,255,.9);
}
.niice-card--soft { background: rgba(255, 247, 250, .92); }
.niice-card--white { background: rgba(255,255,255,.95); }

.niice-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.niice-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.7);
  white-space: nowrap;
}

.niice-list, .niice-checks { margin: 0; padding-left: 18px; }
.niice-list li { margin: 8px 0; }
.niice-checks li { margin: 7px 0; }

.niice-divider {
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 14px 0;
}

.niice-stack { display: grid; gap: 12px; }
.niice-mini {
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  padding: 14px;
}
.niice-mini h4 { margin: 0 0 6px; font-size: 14px; }
.niice-mini p { margin: 0; opacity: .78; font-size: 13px; }

.niice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.12);
  margin-top: 14px;
}
.niice-btn--primary {
  background: #111;
  color: #fff;
  border-color: rgba(0,0,0,.18);
}
.niice-btn--ghost {
  background: rgba(255,255,255,.75);
  color: #111;
}

.niice-cards-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.niice-combo {
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(250, 250, 250, .9);
  padding: 18px;
}
.niice-combo__head { margin-bottom: 10px; }

.niice-combo__images {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
.niice-figure {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}
.niice-figure img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
}

.niice-combo__cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

.niice-why {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.niice-why__box {
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.92);
  padding: 14px;
}
.niice-why__box h4 { margin: 0 0 6px; font-size: 14px; }
.niice-why__box p { margin: 0; opacity: .78; font-size: 13px; }

/* Responsive */
@media (max-width: 980px) {
  .niice-grid-2 { grid-template-columns: 1fr; }
  .niice-cards-4 { grid-template-columns: 1fr 1fr; }
  .niice-why { grid-template-columns: 1fr 1fr; }
  .niice-figure img { height: 190px; }
}
@media (max-width: 560px) {
  .niice-cards-4 { grid-template-columns: 1fr; }
  .niice-why { grid-template-columns: 1fr; }
  .niice-figure img { height: 170px; }
}

.niice-title {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.niice-shimmer {
  background: linear-gradient(
    120deg,
    #d4af37 0%,
    #f6d88c 25%,
    #9fd3ff 50%,
    #d4af37 75%,
    #f6d88c 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: niiceShimmer 6s ease-in-out infinite;
}

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

/* Make "Niice" in the Services title more visible (higher contrast, still luxury) */
.niice-title .niice-shimmer{
  color: #c9a24d; /* deeper champagne gold */
  font-weight: 900;
  letter-spacing: .01em;

  /* soft separation from pink background */
  -webkit-text-stroke: 0.6px rgba(255,255,255,.65);

  /* depth without looking glowy */
  text-shadow:
    0 1px 1px rgba(0,0,0,.10),
    0 10px 22px rgba(201,162,77,.20);
}

/* === Mani + Pedi Hero Pair === */

.niice-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 34px;
}

.niice-pair-card {
  border-radius: 26px;
  padding: 26px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 18px 48px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.niice-pair-card--mani {
  background: linear-gradient(
    135deg,
    #fff5f8 0%,
    #f6d88c 50%
  );
}

.niice-pair-card--pedi {
  background: linear-gradient(
    225deg,
    #eef7ff 0%,
    #f6d88c 50%
  );
}

/* Big bubble title pills */
.niice-pill {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 18px;
  width: fit-content;
}

.niice-pill--mani {
  background: linear-gradient(135deg, #f9c5d1, #f6d88c);
}

.niice-pill--pedi {
  background: linear-gradient(135deg, #b7dcff, #f6d88c);
}

/* Name lists */
.niice-name-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.niice-name-list li {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.niice-name-list li span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  opacity: .65;
}

/* Book buttons */
.niice-pill-btn {
  margin-top: 20px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  text-align: center;
}

.niice-pill-btn--mani {
  background: linear-gradient(135deg, #f9c5d1, #f6d88c);
  color: #111;
}

.niice-pill-btn--pedi {
  background: linear-gradient(135deg, #b7dcff, #f6d88c);
  color: #111;
}

/* Responsive: stack ONLY on small screens */
@media (max-width: 720px) {
  .niice-pair {
    grid-template-columns: 1fr;
  }
}

.niice-combo-soft {
  margin-top: 38px;
  padding: 26px;
  border-radius: 22px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  text-align: center;
}

.niice-combo-soft h2 {
  font-size: 28px;
  margin-bottom: 10px;
}

.niice-combo-soft p {
  max-width: 52ch;
  margin: 0 auto 14px;
  opacity: .8;
}

.niice-combo-points {
  list-style: none;
  padding: 0;
  margin: 0;
}

.niice-combo-points li {
  font-weight: 600;
  margin: 8px 0;
}

/* =========================================
   SERVICES: make pink/blue main, gold ends
   (targets your existing card classes)
   ========================================= */

.niice-pair-card--mani{
  background:
    radial-gradient(140% 120% at 50% 38%,
      rgba(255, 214, 228, .85) 0%,
      rgba(255, 214, 228, .62) 45%,
      rgba(255, 214, 228, .34) 65%,
      rgba(245, 197, 86, .20) 84%,
      rgba(245, 197, 86, .10) 100%) !important;
}

.niice-pair-card--pedi{
  background:
    radial-gradient(140% 120% at 50% 38%,
      rgba(185, 224, 255, .85) 0%,
      rgba(185, 224, 255, .62) 45%,
      rgba(185, 224, 255, .34) 65%,
      rgba(245, 197, 86, .20) 84%,
      rgba(245, 197, 86, .10) 100%) !important;
}

/* Optional: keep them airy (not heavy) */
.niice-pair-card--mani,
.niice-pair-card--pedi{
  border-color: rgba(0,0,0,.10) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.08) !important;
}

.niice-pill-sub{
  font-style: normal;
  font-weight: 750;
  opacity: .75;
}

/* =========================================
   SERVICES CARDS: 3D / GLASS DEPTH UPGRADE
   (drop at the very bottom of your CSS)
   ========================================= */

/* Base card depth */
.niice-pair-card{
  position: relative;
  overflow: hidden;
  border-radius: 28px; /* keep your vibe, slightly more premium */
  border: 1px solid rgba(0,0,0,.10);
  box-shadow:
    0 22px 60px rgba(0,0,0,.14),
    0 6px 18px rgba(0,0,0,.08);
  transform: translateZ(0);
  backdrop-filter: blur(10px);
}

/* Inner frame (adds “real card” feel) */
.niice-pair-card::before{
  content:"";
  position:absolute;
  inset: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  pointer-events:none;
  z-index: 0;
}

/* Glass highlight + depth gradient */
.niice-pair-card::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background:
    radial-gradient(700px 380px at 22% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(520px 280px at 78% 22%, rgba(255,255,255,.22), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 45%, rgba(0,0,0,.04));
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index: 0;
  opacity: .9;
}

/* Ensure content stays above the overlays */
.niice-pair-card > *{
  position: relative;
  z-index: 1;
}

/* Colored aura edge (adds “luxury glow”) */
.niice-pair-card--mani{
  box-shadow:
    0 26px 70px rgba(0,0,0,.14),
    0 10px 24px rgba(0,0,0,.08),
    0 0 0 1px rgba(255,255,255,.30),
    0 18px 55px rgba(255, 160, 190, .22);
}

.niice-pair-card--pedi{
  box-shadow:
    0 26px 70px rgba(0,0,0,.14),
    0 10px 24px rgba(0,0,0,.08),
    0 0 0 1px rgba(255,255,255,.30),
    0 18px 55px rgba(120, 185, 255, .22);
}

/* Pills feel “raised” */
.niice-pill{
  box-shadow:
    0 10px 24px rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(10px);
}

/* Button becomes a premium “soft capsule” */
.niice-pill-btn{
  box-shadow:
    0 18px 40px rgba(0,0,0,.14),
    inset 0 0 0 1px rgba(255,255,255,.40);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

/* Desktop hover: subtle lift (expensive, not cheesy) */
@media (hover:hover){
  .niice-pair-card:hover{
    transform: translateY(-2px);
    box-shadow:
      0 32px 90px rgba(0,0,0,.16),
      0 12px 28px rgba(0,0,0,.10),
      0 0 0 1px rgba(255,255,255,.34);
  }
  .niice-pair-card:hover .niice-pill-btn{
    transform: translateY(-2px);
    filter: brightness(1.02);
    box-shadow:
      0 22px 52px rgba(0,0,0,.16),
      inset 0 0 0 1px rgba(255,255,255,.46);
  }
}

/* =========================================
   COMBO SECTION: Premium Feature Panel
   (Paste at BOTTOM of your CSS)
   ========================================= */

/* 1) Whole panel = premium glass feature */
.niice-block.niice-combo{
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.62);
  backdrop-filter: blur(12px);
  box-shadow:
    0 28px 90px rgba(0,0,0,.12),
    0 10px 24px rgba(0,0,0,.08);
}

/* inner “frame” */
.niice-block.niice-combo::before{
  content:"";
  position:absolute;
  inset: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  pointer-events:none;
}

/* glow + highlight wash */
.niice-block.niice-combo::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background:
    radial-gradient(800px 420px at 18% 18%, rgba(255,185,210,.40), transparent 60%),
    radial-gradient(800px 420px at 82% 22%, rgba(170,210,255,.35), transparent 62%),
    radial-gradient(900px 520px at 50% 110%, rgba(245,197,86,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 45%, rgba(0,0,0,.03));
  pointer-events:none;
  mix-blend-mode: normal;
  opacity: .95;
}

/* keep content above overlays */
.niice-block.niice-combo *{
  position: relative;
  z-index: 1;
}

/* 2) Add a “Niice Credits” value chip (no HTML change) */
.niice-combo__head{
  position: relative;
  padding-bottom: 10px;
}

.niice-combo__head::after{
  content:"Niice Credits: every combo stacks value → your next upgrade gets easier.";
  display: inline-flex;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 850;
  font-size: 12px;
  letter-spacing: .01em;
  color: rgba(18,18,18,.78);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

/* 3) Image tiles look premium even before images load */
.niice-combo__images{
  gap: 14px; /* keep consistent */
}

.niice-combo__images .niice-figure{
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow:
    0 18px 50px rgba(0,0,0,.10),
    inset 0 0 0 1px rgba(255,255,255,.55);
  transform: translateZ(0);
}

/* subtle “photo card” sheen */
.niice-combo__images .niice-figure::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 240px at 22% 18%, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%, rgba(0,0,0,.04));
  pointer-events:none;
}

/* if images are missing / still loading, show a classy placeholder */
.niice-combo__images .niice-figure::after{
  content:"Niice Combo Moment";
  position:absolute;
  left: 14px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 12px;
  color: rgba(18,18,18,.72);
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}

/* make the actual image fill properly */
.niice-combo__images img{
  display:block;
  width:100%;
  height: 260px;          /* gives the row presence */
  object-fit: cover;
  border-radius: 22px;
}

/* hover lift on desktop */
@media (hover:hover){
  .niice-combo__images .niice-figure{
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .niice-combo__images .niice-figure:hover{
    transform: translateY(-3px);
    filter: brightness(1.02);
    box-shadow:
      0 26px 70px rgba(0,0,0,.14),
      inset 0 0 0 1px rgba(255,255,255,.60);
  }
}

/* 4) CTA buttons look premium */
.niice-combo__cta .niice-btn--primary{
  border: 0;
  background: linear-gradient(135deg,
    rgba(255,210,225,.85),
    rgba(245,197,86,.65),
    rgba(170,210,255,.70)
  );
  color: rgba(18,18,18,.92);
  box-shadow: 0 18px 48px rgba(0,0,0,.12);
}

.niice-combo__cta .niice-btn--ghost{
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
}

/* Slight texture so gradients don’t feel flat */
.niice-pair-card{
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(0,0,0,.06) 0, transparent 60%),
    radial-gradient(1px 1px at 70% 60%, rgba(0,0,0,.05) 0, transparent 60%);
  background-size: 180px 180px, 220px 220px;
  background-repeat: repeat;
}

/* =========================================
   NIICE PERKS – Clean Apple-style dropdown list
   (single source of truth)
   ========================================= */

.perk-list--dropdown{
  list-style: none;
  padding-left: 0;
  margin: 12px 0 18px;
  display: grid;
  gap: 10px;
}

/* =========================================
   Service list: title + intrigue line
   ========================================= */

.niice-name-list{
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
}

.niice-name-list li{
  font-weight: 800;
  margin: 12px 0;
  line-height: 1.2;
}

/* the description line inside <span> */
.niice-name-list li > span{
  display: block;
  margin-top: 6px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.35;
  opacity: .78;
}

.perk-item{ margin: 0; }

/* “Tap a perk to see details” line once per card */
.perk-title{
  position: relative;
}
.perk-title::after{
  content: "Tap anywhere on this card to expand all perks";
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(18,18,18,.45);
}

/* Row container */
.perk-dd{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.76);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

.perk-dd:hover{
  filter: brightness(1.02);
}

/* Clickable header row */
.perk-dd__sum{
  list-style: none;
  cursor: pointer;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 950;
  color: rgba(18,18,18,.90);
}

.perk-dd__sum::-webkit-details-marker{ display:none; }

/* Apple-ish chevron on the LEFT */
.perk-dd__sum::before{
  content: "";
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(18,18,18,.40);
  border-bottom: 2px solid rgba(18,18,18,.40);
  transform: rotate(-45deg);
  display: inline-block;
  transition: transform .18s ease, border-color .18s ease;
}

/* Rotate chevron down when open */
.perk-dd[open] .perk-dd__sum::before{
  transform: rotate(45deg) translateY(1px);
  border-color: rgba(18,18,18,.55);
}

.perk-dd__title{
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.2;
}
.perk-dd__title strong{
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Hide hint area completely (we don’t need it anymore) */
.perk-dd__hint{ display: none !important; }

/* Expand text */
.perk-dd__body{
  padding: 0 14px 14px;
  color: rgba(18,18,18,.72);
  line-height: 1.45;
  font-weight: 700;
  font-size: 13px;
}

/* Open state styling */
.perk-dd[open]{
  border-color: rgba(245,197,86,.35);
  box-shadow: 0 14px 38px rgba(0,0,0,.09);
  background: rgba(255,255,255,.86);
}

.perk-dd[open]{
  filter: saturate(1.05);
}

/* Default perk title */
.perk-dd__title strong{
  color: rgba(18,18,18,.90);
  transition: color .25s ease;
}

/* ONLY the opened item changes color */
.perk-dd[open] > .perk-dd__title strong{
  color: rgba(180,140,90,.95); /* soft gold */
}

/* Give more air before Book Now */
.perk-book-btn{
  margin-top: 14px;
}

/* Default title color */
.perk-dd .perk-dd__title strong{
  color: rgba(18,18,18,.90);
  transition: color .22s ease;
}

/* Opened item title color */
.perk-dd[open] .perk-dd__title strong{
  color: rgba(180,140,90,.95); /* soft gold */
}

.niice-combo-lock{
  margin: 14px 0 0;
  text-align: center;
  font-size: 14px;
  color: rgba(20,20,20,.72);
}

/* Pattern helpers for Mani+Pedi section */
.niice-combo-points{
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 12px;
  text-align: center;
}

.niice-combo-points li{
  font-size: 22px;
  line-height: 1.35;
  font-weight: 650;
  color: rgba(20,20,20,.92);
}

.niice-combo-points li strong{
  font-weight: 950;
}

.niice-arrow{
  display: inline-block;
  margin: 0 10px;
  font-weight: 950;
  opacity: .85;
}

/* Badge replaces parentheses (cleaner) */
.niice-mini-badge{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  margin-left: 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.60);
  color: rgba(20,20,20,.65);
  transform: translateY(-2px);
}

/* Gold highlight (more visible than soft gold) + subtle shine */
.niice-highlight{
  font-weight: 950;

  /* Gold text */
  background: linear-gradient(
    90deg,
    #B8892D,
    #F1D07A,
    #B8892D
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Shine motion only */
  background-size: 220% 100%;
  animation: niiceGoldSweep 3s linear infinite;

  /* REMOVE glow block */
  text-shadow: none;
}

@keyframes niiceGoldSweep{
  0%{ background-position: 0% 0; }
  100%{ background-position: 220% 0; }
}

/* Upgrade emphasis (stays readable, not gold) */
.niice-upgrade{
  font-weight: 950;
}

/* The “best value…” line should look like a soft footer, not a headline */
.niice-combo-lock{
  margin: 16px 0 0;
  text-align: center;
  font-size: 16px;
  font-weight: 750;
  color: rgba(20,20,20,.58);
}

/* === HARD KILL the highlight bar (keeps gold shimmer text) === */
.niice-highlight::before,
.niice-highlight::after{
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* If the bar is coming from background on the span itself */
.niice-highlight{
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

/* =========================
   Combo Soft — Quick Pills
   ========================= */
.niice-quickpills{
  margin-top: 18px;
  margin-bottom: 18px; /* ← ADD THIS */
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

.qpill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .02em;

  color: rgba(18,18,18,.82);
  background: linear-gradient(
    180deg,
    rgba(255,232,240,.95),
    rgba(255,245,248,.88)
  );
  border: 1px solid rgba(238,170,190,.35);
  box-shadow: 0 14px 32px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.qpill:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.12);
}

/* Book Now = the only flashy one */
.qpill--book{
  color: rgba(20,20,20,.95);
  border: 1px solid rgba(245,197,86,.55);

  background: linear-gradient(135deg,
    rgba(255,215,230,.95),
    rgba(245,197,86,.85),
    rgba(255,225,180,.85)
  );

  box-shadow:
    0 22px 48px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.55);

  position: relative;
}

.qpill--book:hover{
  transform: translateY(-3px) scale(1.03);
  box-shadow:
    0 28px 60px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.65);
}

/* Mobile spacing so it stays clean */
@media (max-width: 520px){
  .qpill{
    width: 100%;
    max-width: 260px;
  }
}

/* =========================
   HEADER ALIGNMENT FIX
   ========================= */

.site-header .header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.site-header .brand{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Make top-left "Niice Nails" match hero vibe */
.site-header .brand-name{
  font-family: "Playfair Display", serif;
  font-weight: 800;
  font-size: clamp(20px, 5vw, 30px);
  line-height: 1.05;
  letter-spacing: .2px;
}

/* Subline */
.site-header .brand-sub{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: .78;
}

/* Mobile vs Desktop address swap */
.address-full{ display: none; }
@media (min-width: 980px){
  .address-city{ display: none; }
  .address-full{ display: inline; }
}

/* Keep right-side actions in a clean row */
.site-header .header__actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;          /* stops menu dropping weirdly */
  white-space: nowrap;
}

/* Make the menu button match pill height & look intentional */
.site-header .iconbtn--menu{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* If phone width is tight, slightly compress the call pill */
@media (max-width: 430px){
  .site-header .pill--ghost{
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* =========================
   FORCE MOBILE MENU BUTTON TO SHOW ON PHONE
   ========================= */

/* Always show hamburger on small screens */
@media (max-width: 980px){
  .iconbtn--menu{ 
    display: inline-flex !important;
  }

  /* Hide desktop nav on phone so it doesn't interfere */
  .nav--desktop{
    display: none !important;
  }
}

/* =========================
   FORCE CLICKABLE ADDRESS (mobile + desktop)
   ========================= */
.site-header .address-link{
  cursor: pointer !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(0,0,0,.45) !important;
  border-radius: 8px !important;
  padding: 0 2px !important;
}

.site-header .address-link:hover{
  text-decoration-color: rgba(0,0,0,.75) !important;
}

.site-header .address-link:focus{
  outline: 2px solid rgba(245,197,86,.45) !important;
  outline-offset: 3px !important;
}

/* =========================
   MOBILE HEADER: KEEP PHONE PILL + SHOW MENU BUTTON
   (does NOT change logo sizing)
   ========================= */

@media (max-width: 860px){

  /* keep header layout stable */
  .site-header .header__inner{
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
  }

  /* don’t let brand area push buttons away */
  .site-header .brand{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* ensure actions area is visible */
  .site-header .header__actions{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex: 0 0 auto !important;
  }

  /* show menu button no matter what other CSS says */
  .site-header .iconbtn--menu,
  .site-header #openMenu{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* if desktop nav exists, hide it on phone */
  .site-header .nav--desktop{
    display: none !important;
  }
}

/* FORCE the gold part of "Niice Nails Services" to pop (Services page heading) */
.niice-pagehead .niice-title span:first-child,
.niice-pagehead .niice-title .niice-shimmer,
.niice-services-page .niice-title span:first-child,
.niice-services-page .niice-title .niice-shimmer {
  color: #c9a24d !important;
  font-weight: 900 !important;
  -webkit-text-stroke: 0.6px rgba(255,255,255,.65) !important;
  text-shadow:
    0 1px 1px rgba(0,0,0,.10),
    0 10px 22px rgba(201,162,77,.22) !important;
}

/* SERVICES heading: make “Niice Nails” pop (targets your real element: h2.luxH2) */
#services .sectionHead .luxH2{
  text-shadow:
    0 1px 0 rgba(255,255,255,.6),
    0 10px 26px rgba(0,0,0,.10);
}

/* If “Niice Nails” is wrapped in a span inside the h2, make it stronger gold */
#services .sectionHead .luxH2 span,
#services .sectionHead .luxH2 .gold,
#services .sectionHead .luxH2 .accent,
#services .sectionHead .luxH2 .niice{
  color: #c9a24d !important;
  font-weight: 900 !important;
  -webkit-text-stroke: 0.7px rgba(255,255,255,.65) !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 10px 22px rgba(201,162,77,.25) !important;
}

/* tighten VIP section after removing cards */
.vipCard{
  padding-bottom: 24px;
}

/* Mobile drawer: make Book the hero CTA */
.drawer__cta--book{
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow:
    0 18px 45px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.75);
  transform: translateY(-2px);
  position: relative;
}

.drawer__cta--book::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 20%,
    rgba(255,215,130,.55),
    rgba(255,255,255,0) 60%);
  filter: blur(14px);
  z-index: -1;
  pointer-events:none;
}

.drawer__cta--book:active{
  transform: translateY(0);
}

/* =========================
   STICKY GLASS HEADER (AFTER HERO)
   ========================= */

.site-header{
  position: relative;
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease, border-color .25s ease;
  transition: opacity 0.18s ease;
}

/* Active only after trigger */
.site-header.is-sticky{
  position: sticky;
  top: 0;
  z-index: 7000;

  background: rgba(255,255,255,.62);
  backdrop-filter: blur(18px) saturate(1.12);
  -webkit-backdrop-filter: blur(18px) saturate(1.12);

  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Keep brand + book + phone more visible */
.site-header.is-sticky .brand-name{
  opacity: 1;
}
/*
.site-header.is-sticky .pill--book{
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
  transform: translateY(-.5px);
}

.site-header.is-sticky .pill--ghost{
  border-color: rgba(216,176,122,.38);
}*/

/* Optional: de-emphasize desktop nav links slightly when sticky */
.site-header.is-sticky .nav--desktop a{
  opacity: .72;
}
.site-header.is-sticky .nav--desktop a:hover{
  opacity: 1;
}

/* =========================
   VIP PAGE REBUILD
========================= */
.vip-page .site-footer{
  margin-top: 0;
}

.vip-hero-clean{
  padding: 4.5rem 0 2rem;
  background:
    radial-gradient(circle at top left, rgba(212,183,122,0.16), transparent 28%),
    linear-gradient(180deg, #fffaf8 0%, #fff 100%);
}

.vip-hero-clean__inner{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: center;
}

.vip-hero-clean__text{
  max-width: 640px;
}

.vip-hero-clean__title{
  font-family: "Playfair Display", serif;
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: #221d22;
  margin: 0.4rem 0 1rem;
}

.vip-hero-clean__sub{
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(34,29,34,0.76);
  max-width: 58ch;
}

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

.vip-hero-clean__bullets{
  display:flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

.vip-hero-clean__bullets span{
  border: 1px solid rgba(191,166,119,0.24);
  background: rgba(255,255,255,0.9);
  color: #5d4c3a;
  border-radius: 999px;
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.vip-hero-clean__media img{
  width: 100%;
  display:block;
  border-radius: 2rem;
  box-shadow: 0 30px 70px rgba(34,29,34,0.14);
}

.vip-benefits,
.vip-value,
.vip-proof,
.vip-faq{
  padding: 4rem 0;
}

.vip-section-header{
  text-align:center;
  margin-bottom: 2rem;
}

.vip-section-header h2{
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  color: #221d22;
  margin: 0;
}

.vip-section-header p{
  color: rgba(34,29,34,0.68);
  margin-top: 0.8rem;
}

.vip-benefits-grid,
.vip-proof-grid,
.vip-faq-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}

.vip-benefit-card,
.vip-proof-card,
.vip-faq-card{
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(191,166,119,0.16);
  border-radius: 1.6rem;
  padding: 1.5rem;
  box-shadow: 0 18px 40px rgba(34,29,34,0.06);
}

.vip-benefit-card h3,
.vip-faq-card h3{
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.1rem;
  color: #221d22;
}

.vip-benefit-card p,
.vip-proof-card p,
.vip-faq-card p{
  color: rgba(34,29,34,0.72);
  line-height: 1.65;
}

.vip-proof-card span{
  display:block;
  margin-top: 1rem;
  font-weight: 700;
  color: #5d4c3a;
}

.vip-plans{
  padding: 4.5rem 0;
  background:
    linear-gradient(180deg, rgba(252,244,240,0.6) 0%, rgba(255,255,255,1) 100%);
}

.vip-plans-header{
  text-align:center;
  max-width: 760px;
  margin: 0 auto 2rem;
}

.vip-plans-header h2{
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.03em;
  color: #221d22;
  margin-bottom: 0.8rem;
}

.vip-plans-header p{
  color: rgba(34,29,34,0.7);
  line-height: 1.65;
}

.vip-plans-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.3rem;
  align-items: stretch;
}

.vip-plan-card{
  position: relative;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(191,166,119,0.16);
  border-radius: 1.8rem;
  padding: 1.5rem;
  box-shadow: 0 18px 50px rgba(34,29,34,0.08);
  display:flex;
  flex-direction:column;
}

.vip-plan-featured{
  border-color: rgba(191,166,119,0.36);
  box-shadow: 0 22px 60px rgba(191,166,119,0.16);
}

.vip-plan-vip{
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(252,246,240,0.96) 100%);
  border-color: rgba(191,166,119,0.28);
}

.vip-plan-badge{
  position:absolute;
  top: 1rem;
  right: 1rem;
  background: #221d22;
  color: #fff;
  border-radius: 999px;
  padding: 0.45rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.vip-plan-label{
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.75rem;
  color: rgba(34,29,34,0.46);
  margin-bottom: 0.6rem;
}

.vip-plan-name{
  font-family: "Playfair Display", serif;
  font-size: 2rem;
  line-height: 1;
  color: #221d22;
  margin: 0 0 1rem;
}

.vip-plan-price{
  margin: 0 0 1rem;
}

.vip-amount{
  font-size: 2rem;
  font-weight: 800;
  color: #221d22;
}

.vip-period{
  color: rgba(34,29,34,0.56);
}

.vip-included-title{
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(34,29,34,0.48);
  margin-bottom: 0.35rem;
}

.vip-included-main{
  color: #3b333b;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.vip-plan-list{
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display:grid;
  gap: 0.5rem;
}

.vip-plan-list li{
  color: rgba(34,29,34,0.74);
  line-height: 1.35;
  padding-left: 1.05rem;
  position: relative;
  font-size: 0.96rem;
}

.vip-plan-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: #c7a864;
}

.vip-plan-btn{
  margin-top: auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius: 999px;
  padding: 0.9rem 1.15rem;
  background: #2b2430;
  color: #fff;
  font-weight: 700;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}

.vip-plan-btn:hover{
  transform: translateY(-2px);
  opacity: 1;
  background: #1f1a22;
}

.vip-value__inner{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1.6rem;
  align-items: center;
}

.vip-value__text h2{
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: #221d22;
  margin-bottom: 1rem;
}

.vip-value__text p{
  color: rgba(34,29,34,0.72);
  line-height: 1.7;
}

.vip-value__card{
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(191,166,119,0.18);
  border-radius: 1.8rem;
  padding: 1.8rem;
  box-shadow: 0 18px 50px rgba(34,29,34,0.07);
}

.vip-value__card h3{
  margin-top: 0;
  color: #221d22;
}

.vip-value__card ul{
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  color: rgba(34,29,34,0.76);
  line-height: 1.8;
}

.vip-final-cta{
  padding: 4.5rem 0 5rem;
  background:
    radial-gradient(circle at center, rgba(212,183,122,0.14), transparent 38%),
    linear-gradient(180deg, #fff 0%, #fff8f5 100%);
}

.vip-final-cta__inner{
  text-align:center;
  max-width: 760px;
  margin: 0 auto;
}

.vip-final-cta__inner h2{
  font-family: "Playfair Display", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.03;
  color: #221d22;
  margin-bottom: 0.8rem;
}

.vip-final-cta__inner p{
  color: rgba(34,29,34,0.72);
  line-height: 1.7;
}

.vip-final-cta__actions{
  display:flex;
  gap: 1rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-top: 1.5rem;
}

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

  .vip-hero-clean__inner,
  .vip-value__inner{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px){
  .vip-benefits-grid,
  .vip-proof-grid,
  .vip-faq-grid,
  .vip-plans-grid{
    grid-template-columns: 1fr;
  }

  .vip-hero-clean{
    padding-top: 3rem;
  }

  .vip-plan-card{
    padding: 1.25rem;
  }
}

/* Highlight phrases inside expectation text */

.niice-highlight{
  color:#b9955a;
  font-weight:600;
}

.niice-highlight-soft{
  color:#7a5c46;
  font-weight:600;
}

.niice-highlight-rose{
  color:#c38b9a;
  font-weight:600;
}

/*.niice-expect-box{

  background: rgba(255,255,255,0.55);

  backdrop-filter: blur(12px);

  border-radius: 22px;

  border: 1px solid rgba(200,170,120,0.18);

  padding: 28px;

  margin-top: 20px;

  box-shadow:
  0 20px 40px rgba(0,0,0,0.04),
  inset 0 1px 0 rgba(255,255,255,0.6);

}
*/
.niice-expect-box{
  background: rgba(255,255,255,0.52);
  backdrop-filter: blur(10px);
  border-radius: 22px;
  border: 1px solid rgba(200,170,120,0.16);
  padding: 24px;
  margin-top: 18px;
  box-shadow:
    0 12px 30px rgba(0,0,0,0.035),
    inset 0 1px 0 rgba(255,255,255,0.55);
  max-width: 100%;
}

/* =========================
   CONTACT PAGE - PLAN YOUR VISIT
========================= */

.contact-visit-notes{
  padding: 0 1.25rem 2.5rem;
}

.contact-visit-card{
  max-width: 1100px;
  margin: 0 auto;
  background: rgba(255,255,255,0.84);
  border: 1px solid rgba(199,168,100,0.14);
  border-radius: 1.8rem;
  padding: 1.8rem;
  box-shadow: 0 18px 44px rgba(36,24,24,0.05);
}

.contact-visit-card h2{
  margin: 0 0 1rem;
  font-family: "Playfair Display", serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  color: #2b2226;
}

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

.contact-visit-item{
  background: rgba(255,250,247,0.76);
  border: 1px solid rgba(199,168,100,0.10);
  border-radius: 1.2rem;
  padding: 1rem;
}

.contact-visit-item h3{
  margin: 0 0 0.35rem;
  font-size: 1rem;
  color: #2b2226;
}

.contact-visit-item p{
  margin: 0;
  color: rgba(43,34,38,0.74);
  line-height: 1.6;
}

.contact-visit-actions{
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.4rem;
}

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

@media (max-width: 640px){
  .contact-visit-grid{
    grid-template-columns: 1fr;
  }
}

/* =========================
   HOMEPAGE VIP VALUE BLOCK
========================= */

.vipValueHome{
  padding: 4.5rem 0;
  background:
    radial-gradient(circle at top left, rgba(212,183,122,0.10), transparent 28%),
    linear-gradient(180deg, rgba(255,250,247,0.72), rgba(255,255,255,1));
}

.vipValueHome__wrap{
  display:grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 1.8rem;
  align-items:center;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(199,168,100,0.14);
  border-radius: 2rem;
  padding: 1.8rem;
  box-shadow: 0 18px 50px rgba(36,24,24,0.05);
  backdrop-filter: blur(10px);
}

.vipValueHome__kicker{
  letter-spacing: 0.16em;
}

.vipValueHome__title{
  margin-bottom: 0.8rem;
}

.vipValueHome__sub{
  max-width: 58ch;
}

.vipValueHome__points{
  display:grid;
  gap: 0.85rem;
  margin-top: 1.3rem;
}

.vipValueHome__point{
  background: rgba(255,250,247,0.78);
  border: 1px solid rgba(199,168,100,0.10);
  border-radius: 1.15rem;
  padding: 0.95rem 1rem;
}

.vipValueHome__point strong{
  display:block;
  margin-bottom: 0.22rem;
  color: #2b2226;
  font-size: 0.98rem;
}

.vipValueHome__point span{
  color: rgba(43,34,38,0.72);
  line-height: 1.55;
  display:block;
}

.vipValueHome__actions{
  display:flex;
  gap: 1rem;
  flex-wrap:wrap;
  margin-top: 1.4rem;
}

.vipValueHome__media{
  display:flex;
  justify-content:center;
}

.vipValueHome__image{
  width: 100%;
  min-height: 430px;
  border-radius: 1.8rem;
  background-size: cover;
  background-position: center;
  box-shadow: 0 24px 60px rgba(36,24,24,0.10);
}

@media (max-width: 980px){
  .vipValueHome__wrap{
    grid-template-columns: 1fr;
  }

  .vipValueHome__image{
    min-height: 320px;
  }
}

/* =========================
   VIP HOME IMAGE OVERLAY
========================= */
.vipValueHome__wrap--overlay{
  display:block;
}

.vipValueHome__media--full{
  position:relative;
  min-height:860px;
  background-size:cover;
  background-position:center;
  border-radius:42px;
  overflow:hidden;
}

.vipValueHome__shade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:56%;
  background:linear-gradient(
    to top,
    rgba(12,10,16,.78) 0%,
    rgba(12,10,16,.48) 40%,
    rgba(12,10,16,.12) 72%,
    rgba(12,10,16,0) 100%
  );
  z-index:1;
  pointer-events:none;
}

.vipValueHome__overlayContent{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:34px 34px 36px;
  color:#fff;
}

.vipValueHome__overlayContent .vipValueHome__kicker{
  color:rgba(255,255,255,.82);
}

.vipValueHome__overlayContent .vipValueHome__title{
  color:#fff;
  max-width:900px;
}

.vipValueHome__overlayContent .vipValueHome__sub{
  color:rgba(255,255,255,.92);
  max-width:820px;
}

.vipValueHome__overlayContent .vipValueHome__points{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:24px;
}

.vipValueHome__overlayContent .vipValueHome__point{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  border-radius:24px;
  padding:18px 18px 20px;
  color:#fff;
}

.vipValueHome__overlayContent .vipValueHome__point strong{
  display:block;
  margin-bottom:8px;
  color:#fff;
}

.vipValueHome__overlayContent .vipValueHome__point span{
  color:rgba(255,255,255,.88);
}

.vipValueHome__overlayContent .vipValueHome__actions{
  margin-top:22px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

@media (max-width: 980px){
  .vipValueHome__media--full{
    min-height:760px;
  }

  .vipValueHome__overlayContent .vipValueHome__points{
    grid-template-columns:1fr;
  }
}
/* =========================
   SUBPAGE MOBILE HEADER FIX
   services / contact / vip
========================= */

@media (max-width: 640px){

  .services-page .header__inner,
  .contact-page .header__inner,
  .vip-page .header__inner{
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }

  .services-page .brand--center,
  .contact-page .brand--center,
  .vip-page .brand--center{
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.7rem;
  }

  .services-page .brand-mark,
  .contact-page .brand-mark,
  .vip-page .brand-mark{
    flex: 0 0 auto;
  }

  .services-page .brand-logo,
  .contact-page .brand-logo,
  .vip-page .brand-logo{
    width: 46px;
    height: 46px;
    object-fit: contain;
  }

  .services-page .brand-text,
  .contact-page .brand-text,
  .vip-page .brand-text{
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .services-page .brand-name,
  .contact-page .brand-name,
  .vip-page .brand-name{
    font-size: 1.05rem;
    line-height: 0.95;
    letter-spacing: -0.02em;
    white-space: normal;
    word-break: keep-all;
  }

  .services-page .brand-sub,
  .contact-page .brand-sub,
  .vip-page .brand-sub{
    display: none;
  }

  .services-page .navRail,
  .contact-page .navRail,
  .vip-page .navRail{
    display: none;
  }

  .services-page .header__actions,
  .contact-page .header__actions,
  .vip-page .header__actions{
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
  }

  .services-page .header__actions .pill--ghost,
  .contact-page .header__actions .pill--ghost,
  .vip-page .header__actions .pill--ghost{
    padding: 0.72rem 0.8rem;
    font-size: 0.86rem;
    border-radius: 999px;
    min-width: 0;
    white-space: nowrap;
  }

  .services-page .header__actions .pill--book,
  .contact-page .header__actions .pill--book,
  .vip-page .header__actions .pill--book{
    padding: 0.72rem 1rem;
    font-size: 0.92rem;
    border-radius: 999px;
    white-space: nowrap;
  }

  .services-page .iconbtn--menu,
  .contact-page .iconbtn--menu,
  .vip-page .iconbtn--menu{
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
  }
}

@media (max-width: 430px){

  .services-page .brand-logo,
  .contact-page .brand-logo,
  .vip-page .brand-logo{
    width: 38px;
    height: 38px;
  }

  .services-page .brand--center,
  .contact-page .brand--center,
  .vip-page .brand--center{
    gap: 0.55rem;
  }

  .services-page .brand-name,
  .contact-page .brand-name,
  .vip-page .brand-name{
    font-size: 0.88rem;
    line-height: 0.9;
    letter-spacing: -0.03em;
  }

  .services-page .header__actions,
  .contact-page .header__actions,
  .vip-page .header__actions{
    gap: 0.45rem;
  }

  .services-page .header__actions .pill--ghost,
  .contact-page .header__actions .pill--ghost,
  .vip-page .header__actions .pill--ghost{
    padding: 0.62rem 0.62rem;
    font-size: 0.76rem;
    max-width: 112px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .services-page .header__actions .pill--book,
  .contact-page .header__actions .pill--book,
  .vip-page .header__actions .pill--book{
    padding: 0.62rem 0.82rem;
    font-size: 0.84rem;
  }

  .services-page .iconbtn--menu,
  .contact-page .iconbtn--menu,
  .vip-page .iconbtn--menu{
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }
}

/* =========================
   FLOATING QUICK ACTIONS
========================= */

.floatingQuickActions{
  position: fixed;
  top: 0.9rem;
  right: 1rem;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.floatingQuickActions.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.floatingQuickActions .pill--book{
  box-shadow: 0 10px 25px rgba(36,24,24,0.12);
}

.floatingQuickActions .iconbtn--menu{
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 25px rgba(36,24,24,0.10);
}

@media (min-width: 641px){
  .floatingQuickActions{
    top: 1rem;
    right: 1.25rem;
  }
}

@media (max-width: 430px){
  .floatingQuickActions{
    top: 0.8rem;
    right: 0.8rem;
    gap: 0.55rem;
  }

  .floatingQuickActions .pill--book{
    padding: 0.68rem 0.92rem;
    font-size: 0.88rem;
  }

  .floatingQuickActions .iconbtn--menu{
    width: 44px;
    height: 44px;
  }
}

.drawer{
  z-index: 1400;
}

.drawer__panel{
  z-index: 1401;
}

.drawer__backdrop{
  z-index: 1399;
}

.navRailIndicator{
  display: none !important;
}

@media (min-width: 981px){
  .site-header .iconbtn--menu{
    display: none;
  }
}

@media (min-width: 981px){
  .nav--desktop{
    gap: 0.9rem;
  }

  .nav--desktop a{
    padding: 0.82rem 1.1rem;
  }

  .header__actions{
    gap: 0.8rem;
  }
}

.nav--desktop{
  display:flex;
  gap:10px;
  align-items:center;
}

.header__inner{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
}

.book-pill{
  padding:11px 20px;
  border-radius:999px;

  font-weight:600;

  background:linear-gradient(135deg,#f6e7c9,#e8c987);
  border:1px solid rgba(0,0,0,0.08);

  box-shadow:
    0 6px 16px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);

  transition:all .22s ease;
}

.book-pill:hover{
  transform:translateY(-1px);
  box-shadow:
    0 10px 24px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* =========================
   DESKTOP HEADER HARD OVERRIDE
========================= */
@media (min-width: 981px){

  .site-header{
    position: sticky;
    top: 0;
    z-index: 1100;
    backdrop-filter: blur(10px);
  }

  .site-header .header__inner{
    display: grid !important;
    grid-template-columns: auto minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 1.5rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  .site-header .brand--center{
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    min-width: 0 !important;
    text-decoration: none !important;
  }

  .site-header .brand-logo{
    width: 78px !important;
    height: 78px !important;
    object-fit: contain !important;
  }

  .site-header .brand-text{
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
  }

  .site-header .brand-name{
    font-size: 2rem !important;
    line-height: 0.95 !important;
    letter-spacing: -0.03em !important;
    white-space: nowrap !important;
  }

  .site-header .brand-sub{
    font-size: 0.92rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    opacity: 0.9 !important;
  }

  .site-header .navRail{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .site-header .navRailIndicator{
    display: none !important;
  }

  .site-header .nav.nav--desktop{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
    width: auto !important;
  }

  .site-header .nav.nav--desktop a{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    padding: 0.78rem .98rem !important;
    margin: 0 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(223,196,181,0.7) !important;
    color: #231f23 !important;
    text-decoration: none !important;
    font-size: 0.97rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: 0 6px 18px rgba(28,20,20,0.05) !important;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease !important;
  }

  .site-header .nav.nav--desktop a:hover{
    background: linear-gradient(135deg, rgba(252,243,247,0.96), rgba(248,242,231,0.96)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(28,20,20,0.08) !important;
  }

  .site-header .header__actions{
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.85rem !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  .site-header .header__actions .pill--ghost{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.92rem 1.3rem !important;
    border-radius: 999px !important;
    font-size: 0.98rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

  .site-header .header__actions .pill--book{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.92rem 1.4rem !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    background: linear-gradient(135deg, #f5e5b9, #e5c36e) !important;
    border: 1px solid rgba(171,135,58,0.35) !important;
    color: #241d12 !important;
    box-shadow: 0 8px 22px rgba(148,110,35,0.16) !important;
  }

  .site-header .iconbtn--menu{
    display: none !important;
  }
}

/* =========================
   HIDE PAGE HEADER WHEN DRAWER IS OPEN
========================= */
body.drawer-open .site-header{
  opacity: 0 !important;
  pointer-events: none !important;
}

body.drawer-open .floatingQuickActions{
  opacity: 0 !important;
  pointer-events: none !important;
}

body.drawer-open .drawer{
  z-index: 9999 !important;
}

body.drawer-open .drawer__panel{
  z-index: 10000 !important;
  background: rgba(255,255,255,0.98) !important;
}

body.drawer-open .drawer__backdrop{
  z-index: 9998 !important;
}

/* =========================
   BRAND SUB ROLLING RAIL
========================= */
.brand-sub--rail{
  display:block;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  cursor:pointer;
  max-width:260px;
}

.brand-sub__track{
  display:inline-flex;
  gap:2.5rem;
  min-width:max-content;
}

.brand-sub__track span{
  display:inline-block;
}

/* Only animate when space is tighter */
@media (max-width: 1180px){
  .brand-sub--rail{
    max-width:220px;
  }

  .brand-sub__track{
    animation: brandRailMove 14s linear infinite;
  }

  .brand-sub--rail:hover .brand-sub__track{
    animation-play-state: paused;
  }
}

/* Full desktop = keep it still */
@media (min-width: 1181px){
  .brand-sub--rail{
    max-width:none;
    overflow:visible;
  }

  .brand-sub__track{
    animation:none !important;
    transform:none !important;
    gap:0;
  }

  .brand-sub__track span:last-child{
    display:none;
  }
}

@keyframes brandRailMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.fCard{
  position: relative;
  overflow: hidden;
}

.fCard__media{
  position: relative;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* bottom-only shade */
.fCard__shade{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: linear-gradient(
    to top,
    rgba(12, 10, 18, 0.60) 0%,
    rgba(12, 10, 18, 0.32) 45%,
    rgba(12, 10, 18, 0.00) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.fChip{
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
}

.fCard__body{
  position: relative;
  margin-top: -84px;
  z-index: 3;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
  padding: 26px 28px 30px;
}

/* makes the title feel stronger against image transition */
.fTitle{
  margin: 0 0 14px;
}

.fText{
  margin: 0 0 22px;
}

.fCard__media{
  transition: transform .35s ease;
}

.fCard:hover .fCard__media{
  transform: scale(1.03);
}

.fCard--overlay{
  position: relative;
  overflow: hidden;
  border-radius: 34px;
}

.fCard--overlay .fCard__media{
  position: relative;
  min-height: 720px;
  background-size: cover;
  background-position: center;
  border-radius: 34px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.fCard--overlay .fCard__shade{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 44%;
  background: linear-gradient(
    to top,
    rgba(10, 10, 16, 0.72) 0%,
    rgba(10, 10, 16, 0.48) 35%,
    rgba(10, 10, 16, 0.18) 68%,
    rgba(10, 10, 16, 0.00) 100%
  );
  pointer-events: none;
  z-index: 1;
}

.fCard--overlay .fChip{
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 3;
}

.fCard__overlayContent{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 30px 30px 32px;
  color: #fff;
}

.fCard--overlay .fTitle{
  margin: 0 0 14px;
  color: #fff;
}

.fCard--overlay .fTitle__accent{
  color: inherit;
}

.fCard--overlay .fText{
  margin: 0 0 22px;
  color: rgba(255,255,255,.92);
  max-width: 85%;
}

.fCard--overlay .fActions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* kill old white box spacing if older styles still exist */
.fCard--overlay .fCard__body{
  display: none;
}

/* =========================
   NIICE FOOTER
========================= */
.niiceFooter{
  margin-top: 80px;
  padding: 56px 0 22px;
  background:
    radial-gradient(1200px 500px at 10% 0%, rgba(232,204,255,.18), transparent 55%),
    radial-gradient(900px 500px at 100% 10%, rgba(255,214,230,.16), transparent 55%),
    #fff;
  border-top: 1px solid rgba(190,170,210,.28);
}

.niiceFooter__grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 28px;
}

.niiceFooter__brand{
  display:flex;
  align-items:flex-start;
  gap:14px;
  color:inherit;
  text-decoration:none;
}

.niiceFooter__logo{
  width:58px;
  height:58px;
  object-fit:contain;
  flex:0 0 58px;
}

.niiceFooter__brand strong{
  display:block;
  font-size:20px;
  line-height:1.1;
  margin-bottom:6px;
}

.niiceFooter__brand p{
  margin:0;
  color:rgba(35,28,46,.72);
  line-height:1.55;
}

.niiceFooter__col h4{
  margin:0 0 14px;
  font-size:15px;
  letter-spacing:.02em;
}

.niiceFooter__col,
.niiceFooter__miniLinks{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.niiceFooter__col a,
.niiceFooter__miniLinks a{
  color:rgba(35,28,46,.78);
  text-decoration:none;
  transition:.18s ease;
}

.niiceFooter__col a:hover,
.niiceFooter__miniLinks a:hover{
  color:#111;
  transform:translateX(2px);
}

.niiceFooter__socials{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}

.niiceSocial{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  text-decoration:none;
  background:rgba(255,255,255,.7);
  border:1px solid rgba(190,170,210,.32);
  box-shadow:0 10px 24px rgba(80,50,100,.08);
  color:#1f1828;
  transition:.18s ease;
}

.niiceSocial:hover{
  transform:translateY(-2px);
}

.niiceFooter__address{
  text-decoration:underline;
  text-underline-offset:4px;
  line-height:1.7;
}

.niiceFooter__bottom{
  margin-top:32px;
  padding-top:18px;
  border-top:1px solid rgba(190,170,210,.22);
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}

.niiceFooter__bottom p{
  margin:0;
  color:rgba(35,28,46,.64);
  font-size:14px;
}

@media (max-width: 980px){
  .niiceFooter__grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 640px){
  .niiceFooter{
    padding:46px 0 20px;
  }

  .niiceFooter__grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .niiceFooter__bottom{
    flex-direction:column;
  }
}

/* GALLERY: keep original size, move text onto image only */
.tile{
  overflow:hidden;
}

.tile__img{
  position:relative;
  display:block;
  overflow:hidden;
}

.tile__shade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:34%;
  background:linear-gradient(
    to top,
    rgba(12,10,16,.72) 0%,
    rgba(12,10,16,.38) 48%,
    rgba(12,10,16,0) 100%
  );
  pointer-events:none;
  z-index:1;
}

.tile__cap--overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:18px 18px 20px;
  background:none;
  border:none;
}

.tile__cap--overlay .tile__title{
  color:#fff;
}

.tile__cap--overlay .tile__sub{
  color:rgba(255,255,255,.92);
}

/* VIP: keep original layout/size, only place heading/sub on image */
.vipValueHome__image--overlay{
  position:relative;
  overflow:hidden;
}

.vipValueHome__imageShade{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:42%;
  background:linear-gradient(
    to top,
    rgba(12,10,16,.74) 0%,
    rgba(12,10,16,.42) 46%,
    rgba(12,10,16,0) 100%
  );
  pointer-events:none;
  z-index:1;
}

.vipValueHome__imageText{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:24px 24px 26px;
  color:#fff;
}

.vipValueHome__kicker--onImage{
  color:rgba(255,255,255,.82);
  margin-bottom:10px;
}

.vipValueHome__imageTitle{
  margin:0 0 10px;
  color:#fff;
  line-height:1.06;
}

.vipValueHome__imageSub{
  margin:0;
  color:rgba(255,255,255,.92);
}

.vipValueHome__contentSpacer{
  height:0;
}

/* VIP stacked version: image first, content below */
.vipValueHome__wrap--stacked{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.vipValueHome__media--top{
  width:100%;
}

.vipValueHome__sub--belowImage{
  margin:0 0 20px;
}

/* =========================
   VIP HOME REFINED LAYOUT
========================= */
.vipValueHome__wrap{
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  gap:28px;
  align-items:stretch;
}

.vipValueHome__content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.vipValueHome__sub--belowImage{
  margin:0 0 22px;
  text-align:center;
  font-size:18px;
  line-height:1.6;
}

.vipValueHome__media{
  width:100%;
}

.vipValueHome__image--overlay{
  position:relative;
  min-height:560px;
  background-size:cover;
  background-position:center;
  border-radius:34px;
  overflow:hidden;
}

.vipValueHome__imageShade{
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:42%;
  background:linear-gradient(
    to bottom,
    rgba(12,10,16,.70) 0%,
    rgba(12,10,16,.34) 52%,
    rgba(12,10,16,0) 100%
  );
  pointer-events:none;
  z-index:1;
}

.vipValueHome__imageText--top{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:2;
  padding:26px 26px 0;
  color:#fff;
}

.vipValueHome__kicker--onImage{
  color:rgba(255,255,255,.82);
  margin-bottom:10px;
}

.vipValueHome__imageTitle{
  margin:0;
  color:#fff;
  line-height:1.02;
  max-width:520px;
}

/* Less bland cards */
.vipValueHome__points{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

.vipValueHome__point{
  position:relative;
  padding:22px 22px 20px;
  border-radius:24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,248,252,.92));
  border:1px solid rgba(225,208,190,.38);
  box-shadow: 0 16px 34px rgba(44,28,40,.06);
  overflow:hidden;
}

.vipValueHome__point::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:5px;
  border-radius:8px;
}

.vipValueHome__point--priority::before{
  background:linear-gradient(180deg, #d8bc67, #f0dfac);
}

.vipValueHome__point--value::before{
  background:linear-gradient(180deg, #dca3c7, #f2d6e8);
}

.vipValueHome__point--perks::before{
  background:linear-gradient(180deg, #b78ce8, #e2cdfb);
}

.vipValueHome__point strong{
  display:block;
  margin-bottom:8px;
  font-size:18px;
  line-height:1.2;
}

.vipValueHome__point span{
  display:block;
  color:rgba(52,40,48,.78);
  line-height:1.6;
  font-size:16px;
}

.vipValueHome__actions{
  margin-top:20px;
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

@media (max-width: 1100px){
  .vipValueHome__wrap{
    grid-template-columns:1fr;
  }

  .vipValueHome__media{
    order:-1;
  }

  .vipValueHome__content{
    order:2;
  }

  .vipValueHome__image--overlay{
    min-height:320px;
  }

  .vipValueHome__sub--belowImage{
    text-align:left;
  }
}

@media (max-width: 640px){
  .vipValueHome__image--overlay{
    min-height:260px;
    background-position:center top;
  }

  .vipValueHome__imageText--top{
    padding:18px 18px 0;
  }

  .vipValueHome__imageTitle{
    max-width:100%;
    font-size:42px;
    line-height:1.02;
  }

  .vipValueHome__sub--belowImage{
    font-size:16px;
  }

  .vipValueHome__point{
    padding:18px 18px 16px;
  }
}

/* =========================
   NIICE FOOTER V2
========================= */
.niiceFooter--v2{
  margin-top:72px;
  padding:34px 0 18px;
  background:
    radial-gradient(1200px 520px at 15% 10%, rgba(255,214,230,.14), transparent 52%),
    radial-gradient(900px 480px at 100% 0%, rgba(232,204,255,.14), transparent 54%),
    linear-gradient(180deg, #fffafc 0%, #fff 100%);
  border-top:1px solid rgba(225,208,190,.36);
}

.niiceFooter__topLine{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(215,190,150,.55), transparent);
  margin-bottom:28px;
}

.niiceFooter__grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr .9fr .9fr .9fr;
  gap:30px;
  align-items:start;
}

.niiceFooter__heading{
  margin:0 0 18px;
  font-size:30px;
  line-height:1;
  font-weight:800;
  letter-spacing:.01em;
}

.niiceFooter__col{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.niiceFooter__address{
  display:inline-block;
  color:#20181d;
  text-decoration:underline;
  text-underline-offset:4px;
  line-height:1.6;
  font-size:17px;
}

.niiceFooter__hours{
  margin-top:10px;
}

.niiceFooter__label{
  display:block;
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:13px;
  color:rgba(35,28,46,.62);
}

.niiceFooter__hours p{
  margin:0 0 6px;
  color:#2b2229;
  font-size:16px;
  line-height:1.5;
}

.niiceFooter__socialGrid{
  display:grid;
  grid-template-columns:repeat(4, 64px);
  gap:12px;
  justify-content:start;
}

.niiceFooter__socialBtn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  border-radius:18px;
  border:1px solid rgba(225,208,190,.42);
  background:rgba(255,255,255,.72);
  box-shadow:0 12px 28px rgba(60,40,50,.05);
  color:#1f1820;
  text-decoration:none;
  transition:.18s ease;
}

.niiceFooter__socialBtn svg{
  width:28px;
  height:28px;
  fill:currentColor;
}

.niiceFooter__socialBtn:hover{
  transform:translateY(-2px);
}

.niiceFooter__linkList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.niiceFooter__linkList a{
  color:rgba(35,28,46,.82);
  text-decoration:none;
  font-size:16px;
  line-height:1.45;
  transition:.18s ease;
}

.niiceFooter__linkList a:hover{
  color:#111;
  transform:translateX(2px);
}

.niiceFooter__bottom{
  margin-top:30px;
  padding-top:16px;
  border-top:1px solid rgba(225,208,190,.26);
  display:flex;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.niiceFooter__bottom p{
  margin:0;
  color:rgba(35,28,46,.65);
  font-size:14px;
  line-height:1.5;
}

@media (max-width: 1180px){
  .niiceFooter__grid{
    grid-template-columns:1fr 1fr;
  }
}
@media (max-width: 680px){
  .niiceFooter--v2{
    padding:28px 0 16px;
  }

  .niiceFooter__grid{
    grid-template-columns:1fr 1fr;
    gap:22px 18px;
  }

  .niiceFooter__col--visit,
  .niiceFooter__col--connect{
    grid-column:1 / -1;
  }

  .niiceFooter__heading{
    font-size:22px;
  }

  .niiceFooter__socialGrid{
    grid-template-columns:repeat(4, 64px);
    gap:10px;
  }

  .niiceFooter__linkList{
    gap:10px;
  }

  .niiceFooter__bottom{
    flex-direction:column;
  }
}

.lazy-bg{
  background-color: rgba(245, 239, 242, 0.6);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================
   VIP PAGE ELEVATION OVERRIDES
========================= */

.vip-page .vip-hero-clean--elevated{
  padding-top: 18px;
}

.vip-page .vip-hero-clean__frame{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.vip-page .vip-hero-clean__media--overlay{
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  min-height: 360px;
  box-shadow: 0 24px 70px rgba(31, 20, 32, 0.14);
}

.vip-page .vip-hero-clean__media--overlay img{
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.vip-page .vip-hero-clean__imageShade{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(19,12,20,.10), rgba(19,12,20,.26) 42%, rgba(19,12,20,.58) 100%);
  pointer-events: none;
}

.vip-page .vip-hero-clean__imageText{
  position: absolute;
  left: 38px;
  top: 34px;
  right: 38px;
  z-index: 2;
  max-width: 720px;
}

.vip-page .vip-eyebrow--light{
  color: rgba(255,255,255,.88);
  letter-spacing: .18em;
}

.vip-page .vip-hero-clean__title--overlay{
  margin: 10px 0 0;
  color: #fff;
  font-size: clamp(40px, 5vw, 78px);
  line-height: .94;
  max-width: 760px;
  text-shadow: 0 8px 24px rgba(0,0,0,.18);
}

.vip-page .vip-hero-clean__text--below{
  text-align: center;
  max-width: 920px;
  margin: 0 auto;
}

.vip-page .vip-hero-clean__sub{
  max-width: 760px;
  margin: 0 auto 18px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.45;
  color: rgba(37, 29, 40, .78);
}

.vip-page .vip-hero-clean__actions--lifted{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.vip-page .btn-primary--vip3d,
.vip-page .btn-outline--vip3d{
  position: relative;
  border-radius: 999px;
  padding: 16px 26px;
  font-weight: 700;
  box-shadow: 0 14px 34px rgba(31, 20, 32, 0.10);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease;
}

.vip-page .btn-primary--vip3d:hover,
.vip-page .btn-outline--vip3d:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(31, 20, 32, 0.14);
}

.vip-page .btn-primary--vip3d{
  background: linear-gradient(180deg, #f7d8e7 0%, #efb4d2 100%);
  color: #2a202b;
  border: 1px solid rgba(210, 150, 185, .45);
}

.vip-page .btn-outline--vip3d{
  background: #fff;
  color: #2a202b;
  border: 1px solid rgba(42,32,43,.14);
}

.vip-page .vip-benefit-rail{
  overflow: hidden;
  border-radius: 999px;
  padding: 6px 0;
}

.vip-page .vip-benefit-rail__track{
  display: flex;
  gap: 10px;
  width: max-content;
  animation: vipBenefitRail 28s linear infinite;
}

.vip-page .vip-benefit-rail:hover .vip-benefit-rail__track{
  animation-play-state: paused;
}

.vip-page .vip-benefit-pill{
  flex: 0 0 auto;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  color: #493844;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(220, 188, 205, .62);
  box-shadow: 0 10px 26px rgba(31, 20, 32, 0.08);
}

@keyframes vipBenefitRail{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.vip-page .vip-benefits--elevated{
  padding-top: 10px;
}

.vip-page .vip-section-header--tight{
  max-width: 760px;
  margin: 0 auto 22px;
  text-align: center;
}

.vip-page .vip-benefits-grid--elevated{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.vip-page .vip-benefit-card--soft{
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(231, 215, 224, .88);
  border-radius: 24px;
  padding: 24px 22px;
  box-shadow: 0 16px 36px rgba(31, 20, 32, 0.06);
}

.vip-page .vip-benefit-card--soft h3{
  margin: 0 0 10px;
  font-size: 18px;
}

.vip-page .vip-benefit-card--soft p{
  margin: 0;
  color: rgba(37,29,40,.76);
  line-height: 1.65;
  font-size: 16px;
}

/* desktop keeps image premium but not absurdly huge */
@media (min-width: 951px){
  .vip-page .vip-hero-clean__frame{
    max-width: 1180px;
    margin: 0 auto;
  }

  .vip-page .vip-hero-clean__media--overlay{
    min-height: 420px;
  }

  .vip-page .vip-hero-clean__media--overlay img{
    min-height: 420px;
  }

  .vip-page .vip-hero-clean__imageText{
    top: 34px;
    left: 42px;
    right: 42px;
  }

  .vip-page .vip-benefits-grid--elevated{
    max-width: 1120px;
    margin: 0 auto;
  }
}

/* phone polish */
@media (max-width: 950px){
  .vip-page .vip-hero-clean__media--overlay{
    min-height: 250px;
    border-radius: 26px;
  }

  .vip-page .vip-hero-clean__media--overlay img{
    min-height: 250px;
  }

  .vip-page .vip-hero-clean__imageText{
    top: 22px;
    left: 22px;
    right: 22px;
  }

  .vip-page .vip-hero-clean__title--overlay{
    font-size: 52px;
    line-height: .92;
    max-width: 320px;
  }

  .vip-page .vip-hero-clean__sub{
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 16px;
  }

  .vip-page .vip-benefits-grid--elevated{
    grid-template-columns: 1fr;
  }
}

/* =========================
   VIP PAGE FLOW POLISH
========================= */

.vip-page .vip-rail-band{
  padding: 8px 0 24px;
}

.vip-page .vip-benefit-rail--top{
  overflow: hidden;
  border-radius: 999px;
}

.vip-page .vip-valueLeadCard{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.92));
  border: 1px solid rgba(233, 216, 226, .85);
  border-radius: 30px;
  padding: 30px;
  box-shadow: 0 18px 44px rgba(31,20,32,.06);
}

.vip-page .vip-valueLeadCard__left h2{
  margin: 10px 0 12px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: .96;
}

.vip-page .vip-valueLeadCard__left p{
  margin: 0;
  color: rgba(37,29,40,.76);
  font-size: 18px;
  line-height: 1.65;
  max-width: 680px;
}

.vip-page .vip-valueMini{
  height: 100%;
  border-radius: 24px;
  background: rgba(248, 239, 244, .92);
  border: 1px solid rgba(231, 215, 224, .92);
  padding: 24px;
}

.vip-page .vip-valueMini h3{
  margin: 0 0 12px;
  font-size: 22px;
}

.vip-page .vip-valueMini ul{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 10px;
  color: rgba(37,29,40,.78);
  line-height: 1.55;
}

.vip-page .vip-introSelect{
  padding: 6px 0 26px;
}

.vip-page .vip-introSelect__card{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.94));
  border: 1px solid rgba(234, 219, 227, .86);
  border-radius: 28px;
  padding: 30px;
  box-shadow: 0 18px 44px rgba(31,20,32,.05);
  text-align: center;
}

.vip-page .vip-introSelect__card h2{
  margin: 10px 0 12px;
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.02;
}

.vip-page .vip-introSelect__card p{
  max-width: 760px;
  margin: 0 auto;
  color: rgba(37,29,40,.76);
  font-size: 17px;
  line-height: 1.65;
}

.vip-page .vip-introSelect__points{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.vip-page .vip-introSelect__point{
  border-radius: 20px;
  padding: 18px 16px;
  background: rgba(247, 237, 242, .85);
  border: 1px solid rgba(232, 214, 223, .85);
  box-shadow: 0 10px 28px rgba(31,20,32,.04);
}

.vip-page .vip-introSelect__point strong{
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
}

.vip-page .vip-introSelect__point span{
  color: rgba(37,29,40,.74);
  line-height: 1.5;
  font-size: 14px;
}

/* move hero image feel higher in hierarchy */
.vip-page .vip-hero-clean--elevated{
  padding-bottom: 10px;
}

/* desktop */
@media (min-width: 951px){
  .vip-page .vip-hero-clean__frame{
    max-width: 1180px;
    margin: 0 auto;
  }

  .vip-page .vip-hero-clean__media--overlay{
    min-height: 420px;
  }

  .vip-page .vip-hero-clean__text--below{
    max-width: 950px;
  }
}

/* phone */
@media (max-width: 950px){
  .vip-page .vip-valueLeadCard{
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .vip-page .vip-valueLeadCard__left h2{
    font-size: 34px;
  }

  .vip-page .vip-valueLeadCard__left p{
    font-size: 16px;
  }

  .vip-page .vip-introSelect__card{
    padding: 22px;
  }

  .vip-page .vip-introSelect__points{
    grid-template-columns: 1fr;
  }
}

/* =========================================
   NIICE VIP — DESIGN ELEVATION PASS ONLY
   no layout rebuild, only polish
========================================= */

.vip-page{
  background:
    radial-gradient(900px 420px at 20% 8%, rgba(215,178,79,.10), transparent 55%),
    radial-gradient(800px 420px at 85% 28%, rgba(215,178,79,.08), transparent 58%),
    linear-gradient(180deg, #fcf7f8 0%, #f8f0f4 46%, #faf6f2 100%);
}

/* hero area tighter + more premium */
.vip-page .vip-hero-clean{
  padding-top: 28px;
  padding-bottom: 28px;
}

.vip-page .vip-hero-clean__frame{
  max-width: 1120px;
  margin: 0 auto;
}

.vip-page .vip-hero-clean__media--overlay{
  min-height: 420px;
  max-height: 520px;
  border-radius: 34px;
  overflow: hidden;
  box-shadow: 0 26px 70px rgba(27,18,22,.12);
  border: 1px solid rgba(230, 212, 188, .65);
}

.vip-page .vip-hero-clean__media--overlay img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.vip-page .vip-hero-clean__imageShade{
  background:
    linear-gradient(180deg, rgba(25,18,20,.10) 0%, rgba(25,18,20,.18) 38%, rgba(25,18,20,.42) 100%);
}

.vip-page .vip-hero-clean__imageText{
  justify-content: flex-start;
  padding: 42px 40px 34px;
}

.vip-page .vip-hero-clean__title--overlay{
  max-width: 560px;
  line-height: .93;
  letter-spacing: -.03em;
  text-shadow: 0 10px 24px rgba(0,0,0,.20);
}

.vip-page .vip-eyebrow--light{
  color: rgba(255,255,255,.88);
  letter-spacing: .20em;
}

/* below-image caption */
.vip-page .vip-hero-clean__text--below{
  max-width: 860px;
  margin: 22px auto 0;
  text-align: center;
}

.vip-page .vip-hero-clean__sub{
  max-width: 760px;
  margin: 0 auto 18px;
  font-size: 20px;
  line-height: 1.5;
  color: rgba(44,31,38,.80);
}

/* conversion buttons — 3d/lifted */
.vip-page .vip-hero-clean__actions--lifted{
  justify-content: center;
  gap: 14px;
  margin-top: 14px;
  margin-bottom: 16px;
}

.vip-page .btn-primary--vip3d,
.vip-page .btn-outline--vip3d{
  border-radius: 999px;
  min-height: 52px;
  padding: 0 24px;
  font-weight: 800;
  box-shadow: 0 14px 26px rgba(35,18,26,.10);
  transform: translateY(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.vip-page .btn-primary--vip3d:hover,
.vip-page .btn-outline--vip3d:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(35,18,26,.14);
}

.vip-page .btn-primary--vip3d{
  background: linear-gradient(180deg, #f6d88b 0%, #e6c56e 58%, #d8b45c 100%);
  color: #2a1f17;
  border: 1px solid rgba(196,157,58,.70);
}

.vip-page .btn-outline--vip3d{
  background: rgba(255,255,255,.84);
  color: #2b2024;
  border: 1px solid rgba(219,207,202,.95);
}

/* benefit rail */
.vip-page .vip-benefit-rail{
  margin-top: 12px;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.vip-page .vip-benefit-rail__track{
  display: flex;
  gap: 10px;
  width: max-content;
  animation: vipRailMove 34s linear infinite;
}

.vip-page .vip-benefit-pill{
  border-radius: 999px;
  padding: 10px 16px;
  white-space: nowrap;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(230,215,204,.95);
  box-shadow: 0 8px 22px rgba(34,19,25,.05);
  color: rgba(45,33,39,.82);
  font-weight: 700;
  font-size: 14px;
}

@keyframes vipRailMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* gold fade sections */
.vip-page .vip-plans,
.vip-page .vip-proof{
  position: relative;
  z-index: 1;
}

.vip-page .vip-plans::before,
.vip-page .vip-proof::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(700px 220px at 18% 0%, rgba(214,176,73,.12), transparent 58%),
    radial-gradient(900px 260px at 85% 18%, rgba(214,176,73,.10), transparent 62%);
}

/* plan section spacing */
.vip-page .vip-plans{
  padding-top: 54px;
  padding-bottom: 36px;
}

.vip-page .vip-plans-header{
  max-width: 760px;
  margin: 0 auto 28px;
  text-align: center;
}

.vip-page .vip-plans-header h2{
  font-size: clamp(34px, 4.1vw, 56px);
  line-height: .98;
  margin-bottom: 10px;
}

.vip-page .vip-plans-header p{
  font-size: 18px;
  line-height: 1.55;
  color: rgba(44,31,38,.74);
}

/* plan cards */
.vip-page .vip-plans-grid{
  align-items: stretch;
  gap: 22px;
}

.vip-page .vip-plan-card{
  border-radius: 28px;
  border: 1px solid rgba(234,220,214,.95);
  box-shadow: 0 18px 44px rgba(37,21,30,.06);
  background: rgba(255,255,255,.88);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.vip-page .vip-plan-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 58px rgba(37,21,30,.10);
}

.vip-page .vip-plan-featured{
  border-color: rgba(212,177,83,.70);
  box-shadow: 0 22px 54px rgba(184,143,44,.14);
}

.vip-page .vip-plan-vip{
  border-color: rgba(204,168,75,.78);
  box-shadow: 0 24px 60px rgba(184,143,44,.16);
}

/* gold CTA buttons for plans */
.vip-page .vip-plan-btn{
  background: linear-gradient(180deg, #f6d88b 0%, #e7c56f 58%, #d8b45d 100%);
  color: #2a1f17;
  border: 1px solid rgba(196,157,58,.74);
  border-radius: 999px;
  box-shadow: 0 14px 28px rgba(173,132,35,.18);
  font-weight: 800;
}

.vip-page .vip-plan-btn:hover{
  filter: brightness(1.02);
  transform: translateY(-1px);
}

/* badges louder + more premium */
.vip-page .vip-plan-badge{
  background: linear-gradient(180deg, #fff2bf 0%, #f3d978 55%, #ddb64b 100%);
  color: #3a2715;
  border: 1px solid rgba(193,151,42,.72);
  box-shadow:
    0 10px 24px rgba(180,137,28,.18),
    inset 0 1px 0 rgba(255,255,255,.55);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.vip-page .vip-plan-featured .vip-plan-name,
.vip-page .vip-plan-vip .vip-plan-name{
  background: linear-gradient(180deg, #a9811f 0%, #e3c166 42%, #8a6210 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* make price region feel more expensive */
.vip-page .vip-amount{
  color: #241a1f;
  text-shadow: 0 1px 0 rgba(255,255,255,.45);
}

.vip-page .vip-period{
  color: rgba(56,42,48,.68);
}

/* value section */
.vip-page .vip-value{
  padding-top: 42px;
  padding-bottom: 30px;
}

.vip-page .vip-valueLeadCard{
  border: 1px solid rgba(232,217,208,.95);
  box-shadow: 0 20px 50px rgba(35,18,26,.06);
}

.vip-page .vip-valueLeadCard__left h2{
  max-width: 720px;
}

/* proof section */
.vip-page .vip-proof{
  padding-top: 40px;
  padding-bottom: 34px;
}

.vip-page .vip-proof .vip-section-header h2,
.vip-page .vip-faq .vip-section-header h2,
.vip-page .vip-final-cta h2{
  text-wrap: balance;
}

.vip-page .vip-proof-card,
.vip-page .vip-faq-card{
  border: 1px solid rgba(232,217,208,.92);
  box-shadow: 0 14px 34px rgba(35,18,26,.05);
}

/* final cta */
.vip-page .vip-final-cta{
  padding-top: 34px;
}

/* desktop image not ridiculously huge */
@media (min-width: 1200px){
  .vip-page .vip-hero-clean__frame{
    max-width: 1080px;
  }

  .vip-page .vip-hero-clean__media--overlay{
    min-height: 380px;
    max-height: 430px;
  }

  .vip-page .vip-hero-clean__title--overlay{
    font-size: clamp(56px, 5.5vw, 76px);
    max-width: 620px;
  }
}

/* tablet */
@media (max-width: 1100px){
  .vip-page .vip-hero-clean__frame{
    max-width: 940px;
  }

  .vip-page .vip-hero-clean__media--overlay{
    min-height: 360px;
  }

  .vip-page .vip-plans-header h2{
    font-size: 42px;
  }
}

/* phone fixes */
@media (max-width: 767px){
  .vip-page .vip-hero-clean{
    padding-top: 18px;
    padding-bottom: 20px;
  }

  .vip-page .vip-hero-clean__frame{
    max-width: 100%;
  }

  .vip-page .vip-hero-clean__media--overlay{
    min-height: 240px;
    max-height: 300px;
    border-radius: 26px;
  }

  .vip-page .vip-hero-clean__imageText{
    padding: 22px 20px 18px;
  }

  .vip-page .vip-hero-clean__title--overlay{
    max-width: 260px;
    font-size: clamp(34px, 10vw, 48px);
    line-height: .96;
  }

  .vip-page .vip-hero-clean__text--below{
    margin-top: 16px;
    padding: 0 8px;
  }

  .vip-page .vip-hero-clean__sub{
    font-size: 15px;
    line-height: 1.52;
    max-width: 100%;
    padding: 0 6px;
    margin-bottom: 14px;
  }
}

.vip-page .vip-hero-clean__actions--lifted{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px;
  margin-bottom:16px;
}

.vip-page .btn-primary--vip3d,
.vip-page .btn-outline--vip3d{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 20px;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  white-space:nowrap;
  box-shadow:0 12px 24px rgba(30,18,22,.10);
  transform:translateY(0);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.vip-page .btn-primary--vip3d:hover,
.vip-page .btn-outline--vip3d:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(30,18,22,.14);
}

.vip-page .btn-primary--vip3d{
  color:#2c1d10;
  border:1px solid rgba(194,149,34,.82);
  background:
    linear-gradient(180deg, rgba(255,247,206,1) 0%, rgba(244,214,122,1) 18%, rgba(227,187,71,1) 52%, rgba(211,166,47,1) 100%);
  box-shadow:
    0 14px 28px rgba(196,146,30,.24),
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -6px 14px rgba(165,115,12,.10);
}

.vip-page .btn-outline--vip3d{
  color:#2b2024;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(220,210,204,.98);
}

.vip-page .vip-benefit-rail{
  margin-top:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  mask-image:none;
  -webkit-mask-image:none;
}

.vip-page .vip-benefit-rail::-webkit-scrollbar{
  display:none;
}

.vip-page .vip-benefit-rail__track{
  display:flex;
  gap:10px;
  width:max-content;
  animation:vipRailMove 34s linear infinite;
}

.vip-page .vip-benefit-rail:hover .vip-benefit-rail__track{
  animation-play-state:paused;
}

.vip-page .vip-benefit-rail:active .vip-benefit-rail__track{
  animation-play-state:paused;
}

.vip-page .vip-benefit-pill{
  border-radius:999px;
  padding:10px 15px;
  white-space:nowrap;
  background:rgba(255,255,255,.90);
  border:1px solid rgba(231,217,205,.98);
  box-shadow:0 8px 18px rgba(34,19,25,.05);
  color:rgba(45,33,39,.82);
  font-weight:700;
  font-size:13px;
}

@keyframes vipRailMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

.vip-page .vip-plans{
  position:relative;
  z-index:1;
  padding-top:54px;
  padding-bottom:36px;
}

.vip-page .vip-plans::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(760px 240px at 18% 0%, rgba(219,177,66,.16), transparent 58%),
    radial-gradient(860px 280px at 82% 20%, rgba(219,177,66,.12), transparent 62%);
}

.vip-page .vip-proof{
  position:relative;
  z-index:1;
  padding-top:40px;
  padding-bottom:34px;
}

.vip-page .vip-proof::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(760px 220px at 50% 0%, rgba(219,177,66,.10), transparent 60%);
}

.vip-page .vip-plans-header{
  max-width:760px;
  margin:0 auto 28px;
  text-align:center;
}

.vip-page .vip-plans-header h2{
  font-size:clamp(34px, 4.1vw, 56px);
  line-height:.98;
  margin-bottom:10px;
}

.vip-page .vip-plans-header p{
  font-size:18px;
  line-height:1.55;
  color:rgba(44,31,38,.74);
}

.vip-page .vip-plans-grid{
  gap:22px;
  align-items:stretch;
}

.vip-page .vip-plan-card{
  position:relative;
  border-radius:28px;
  border:1px solid rgba(234,220,214,.96);
  box-shadow:0 18px 44px rgba(37,21,30,.06);
  background:rgba(255,255,255,.92);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

.vip-page .vip-plan-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 58px rgba(37,21,30,.10);
}

.vip-page .vip-plan-card:not(.vip-plan-featured):not(.vip-plan-vip){
  filter:saturate(.92);
}

.vip-page .vip-plan-featured{
  border-color:rgba(218,178,64,.60);
  box-shadow:0 22px 54px rgba(184,143,44,.12);
}

.vip-page .vip-plan-vip{
  border-color:rgba(198,150,39,.78);
  box-shadow:0 24px 60px rgba(184,143,44,.18);
}

/*.vip-page .vip-plan-vip::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:28px;
  padding:1px;
  background:linear-gradient(180deg, rgba(255,240,183,.95), rgba(225,181,61,.9), rgba(164,120,19,.9));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

.vip-page .vip-plan-btn{
  background:
    linear-gradient(180deg, rgba(255,247,206,1) 0%, rgba(244,214,122,1) 18%, rgba(227,187,71,1) 52%, rgba(211,166,47,1) 100%);
  color:#2a1f17;
  border:1px solid rgba(196,157,58,.76);
  border-radius:999px;
  box-shadow:
    0 14px 28px rgba(173,132,35,.18),
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -6px 14px rgba(165,115,12,.08);
  font-weight:800;
}

.vip-page .vip-plan-btn:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
}*/

/* default plan buttons = soft rose / luxury neutral */
.vip-page .vip-plan-btn{
  background:linear-gradient(180deg, rgba(255,243,247,1) 0%, rgba(248,222,232,1) 100%);
  color:#3a262f;
  border:1px solid rgba(232,196,210,.95);
  border-radius:999px;
  box-shadow:
    0 10px 22px rgba(112,69,87,.08),
    inset 0 1px 0 rgba(255,255,255,.72);
  font-weight:800;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.vip-page .vip-plan-btn:hover{
  filter:brightness(1.02);
  transform:translateY(-1px);
  box-shadow:
    0 14px 26px rgba(112,69,87,.12),
    inset 0 1px 0 rgba(255,255,255,.72);
}

/* only featured cards get gold buttons */
.vip-page .vip-plan-featured .vip-plan-btn{
  background:
    linear-gradient(180deg, rgba(255,247,206,1) 0%, rgba(244,214,122,1) 18%, rgba(227,187,71,1) 52%, rgba(211,166,47,1) 100%);
  color:#2a1f17;
  border:1px solid rgba(196,157,58,.76);
  box-shadow:
    0 14px 28px rgba(173,132,35,.18),
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -6px 14px rgba(165,115,12,.08);
}

/* VIP top tier should feel premium but different from gold-featured */
.vip-page .vip-plan-vip .vip-plan-btn{
  background:linear-gradient(180deg, rgba(252,241,246,1) 0%, rgba(242,216,227,1) 100%);
  color:#432832;
  border:1px solid rgba(224,190,206,.95);
  box-shadow:
    0 12px 24px rgba(112,69,87,.10),
    inset 0 1px 0 rgba(255,255,255,.74);
}

.vip-page .vip-plan-badge{
  background:
    linear-gradient(180deg, rgba(255,248,218,1) 0%, rgba(248,221,125,1) 28%, rgba(232,191,69,1) 62%, rgba(205,155,37,1) 100%);
  color:#3b2812;
  border:1px solid rgba(193,151,42,.78);
  box-shadow:
    0 12px 24px rgba(180,137,28,.18),
    inset 0 1px 0 rgba(255,255,255,.62);
  font-weight:900;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.vip-page .vip-plan-featured .vip-plan-badge{
  background:
    linear-gradient(180deg, rgba(255,248,218,1) 0%, rgba(247,225,144,1) 24%, rgba(237,195,85,1) 58%, rgba(215,168,48,1) 100%);
}

.vip-page .vip-plan-featured .vip-plan-name,
.vip-page .vip-plan-vip .vip-plan-name{
  background:linear-gradient(180deg, #9c7317 0%, #ebcb79 42%, #8a6210 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.vip-page .vip-amount{
  color:#241a1f;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
}

.vip-page .vip-period{
  color:rgba(56,42,48,.68);
}

/* keep image refined on wide desktop */
@media (min-width: 1200px){
  .vip-page .vip-hero-clean__frame{
    max-width:1080px;
  }

  .vip-page .vip-hero-clean__media--overlay{
    min-height:380px;
    max-height:430px;
  }

  .vip-page .vip-hero-clean__title--overlay{
    font-size:clamp(56px, 5.5vw, 76px);
    max-width:620px;
  }
}

/* phone cleanup */
@media (max-width: 767px){
  .vip-page .vip-hero-clean__actions--lifted{
    justify-content:flex-start;
    gap:8px;
    padding:0 4px;
  }

  .vip-page .btn-primary--vip3d,
  .vip-page .btn-outline--vip3d{
    min-height:44px;
    padding:0 14px;
    font-size:12px;
    flex:0 0 auto;
  }

  .vip-page .vip-hero-clean__sub{
    font-size:14px;
    line-height:1.5;
    max-width:100%;
    margin:0 auto 12px;
    padding:0 4px;
  }

  .vip-page .vip-benefit-rail{
    margin-top:8px;
    padding-left:2px;
    padding-right:2px;
  }

  .vip-page .vip-benefit-rail__track{
    animation:vipRailMove 42s linear infinite;
    will-change:transform;
  }
  .vip-page .vip-benefit-pill{
    font-size:12px;
    padding:9px 13px;
  }

  .vip-page .vip-plan-badge{
    font-size:10px;
    padding:6px 9px;
  
  }
}